/* ── TOKENS ── */
		:root {
			--bg: #181d20;
			--bg2: #343f46;
			--bg3: #2a343a;
			--border: rgba(186, 233, 255, 0.144);
			--border-hover: rgba(255, 255, 255, 0.16);
			--text: #ffffff;
			--muted: #a9b3b6;
			--primary: #0690c7;
			--accent: #00aed9;
			--accent2: #ff9900;
			--accent3: #00a6d9;
			--accent4: #7296b6;
			--primary-dim: rgba(0, 192, 217, 0.1);
			--accent2-dim: rgba(255, 123, 0, 0.1);
			--radius: 12px;
			--radius-sm: 8px;
		}

		*,
		*::before,
		*::after {
			box-sizing: border-box;
			margin: 0;
			padding: 0;
		}

		html {
			scroll-behavior: smooth;
		}

		body {
			font-family: 'DM Sans', sans-serif;
			background: var(--bg);
			color: var(--text);
			min-height: 100vh;
			overflow-x: hidden;
			display: flex;
			flex-direction: column;
		}

		/* ── DOT GRID TEXTURE ── */
		body::before {
			content: '';
			position: fixed;
			inset: 0;
			background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
			background-size: 32px 32px;
			pointer-events: none;
			z-index: 0;
		}

		/* ── GLOW ORBS ── */
		.glow-blue {
			position: fixed;
			width: 800px;
			height: 600px;
			background: radial-gradient(ellipse, rgba(6, 144, 199, 0.18) 0%, transparent 70%);
			top: -150px;
			left: 50%;
			transform: translateX(-50%);
			pointer-events: none;
			z-index: 0;
		}

		.glow-green {
			position: fixed;
			width: 500px;
			height: 400px;
			background: radial-gradient(ellipse, rgba(0, 217, 126, 0.1) 0%, transparent 70%);
			bottom: 0;
			right: -100px;
			pointer-events: none;
			z-index: 0;
		}

		.glow-orange {
			position: fixed;
			width: 400px;
			height: 300px;
			background: radial-gradient(ellipse, rgba(255, 153, 0, 0.08) 0%, transparent 70%);
			bottom: 100px;
			left: -80px;
			pointer-events: none;
			z-index: 0;
		}

		/* ── NAV ── */
		nav {
			position: relative;
			z-index: 10;
			padding: 20px 48px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid var(--border);
			backdrop-filter: blur(20px);
		}

		.logo {
			display: flex;
			align-items: center;
			gap: 10px;
			text-decoration: none;
			color: var(--text);
		}

		.logo-mark {
			width: 32px;
			height: 32px;
			background: linear-gradient(135deg, var(--accent), var(--accent2));
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: 'DM Mono', monospace;
			font-size: 12px;
			font-weight: 500;
			color: #fff;
			flex-shrink: 0;
		}

		.logo-text {
			font-size: 16px;
			font-weight: 600;
			letter-spacing: -0.3px;
		}

		.nav-badge {
			display: flex;
			align-items: center;
			gap: 7px;
			background: rgba(255, 153, 0, 0.1);
			border: 1px solid rgba(255, 153, 0, 0.25);
			border-radius: 100px;
			padding: 6px 14px;
			font-size: 12px;
			font-family: 'DM Mono', monospace;
			color: var(--accent2);
		}

		.nav-dot {
			width: 6px;
			height: 6px;
			background: var(--accent2);
			border-radius: 50%;
			animation: pulse 2s infinite;
		}

		/* ── MAIN ── */
		main {
			flex: 1;
			position: relative;
			z-index: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 80px 24px;
			text-align: center;
		}

		/* ── CONSOLE MOCKUP ── */
		.console-wrap {
			width: 100%;
			max-width: 680px;
			margin-bottom: 56px;
			animation: floatUp 0.8s ease both;
		}

		.console-shell {
			background: var(--bg2);
			border: 1px solid var(--border);
			border-radius: var(--radius);
			overflow: hidden;
		}

		.console-bar {
			background: var(--bg3);
			padding: 10px 16px;
			border-bottom: 1px solid var(--border);
			display: flex;
			align-items: center;
			gap: 6px;
		}

		.c-dot {
			width: 10px;
			height: 10px;
			border-radius: 50%;
		}

		.console-bar span {
			margin-left: 8px;
			font-size: 11px;
			font-family: 'DM Mono', monospace;
			color: var(--muted);
		}

		.console-body {
			padding: 28px;
			display: flex;
			gap: 20px;
		}

		/* sidebar skeleton */
		.c-sidebar {
			width: 140px;
			flex-shrink: 0;
			display: flex;
			flex-direction: column;
			gap: 8px;
		}

		.skel {
			background: rgba(255, 255, 255, 0.05);
			border-radius: 4px;
			height: 10px;
			animation: shimmer 2s infinite;
		}

		.skel-btn {
			background: rgba(255, 255, 255, 0.05);
			border-radius: 6px;
			height: 28px;
			animation: shimmer 2s infinite;
		}

		.skel-long {
			width: 80%;
		}

		.skel-mid {
			width: 60%;
		}

		.skel-short {
			width: 45%;
		}

		/* main area skeleton */
		.c-main {
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: 12px;
		}

		.skel-heading {
			height: 14px;
			width: 55%;
			background: rgba(255, 255, 255, 0.07);
			border-radius: 4px;
			margin-bottom: 4px;
			animation: shimmer 2s infinite;
		}

		.skel-cards {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 10px;
			margin-top: 4px;
		}

		.skel-card {
			background: rgba(255, 255, 255, 0.04);
			border: 1px solid var(--border);
			border-radius: var(--radius-sm);
			padding: 16px;
			display: flex;
			flex-direction: column;
			gap: 7px;
		}

		.skel-icon {
			width: 28px;
			height: 28px;
			border-radius: 6px;
			background: rgba(255, 255, 255, 0.08);
			animation: shimmer 2s infinite;
		}

		/* ── UNDER CONSTRUCTION OVERLAY ── */
		.overlay-wrap {
			position: relative;
			margin-top: -8px;
		}

		.overlay-bar {
			background: rgba(255, 153, 0, 0.08);
			border: 1px solid rgba(255, 153, 0, 0.2);
			border-top: none;
			border-radius: 0 0 var(--radius) var(--radius);
			padding: 14px 24px;
			display: flex;
			align-items: center;
			gap: 10px;
			font-size: 12px;
			font-family: 'DM Mono', monospace;
			color: var(--accent2);
		}

		.overlay-bar svg {
			flex-shrink: 0;
			color: var(--accent2);
		}

		/* ── CONTENT ── */
		.content {
			max-width: 560px;
			animation: floatUp 0.8s 0.15s ease both;
		}

		.status-pill {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			background: rgba(255, 153, 0, 0.1);
			border: 1px solid rgba(255, 153, 0, 0.25);
			border-radius: 100px;
			padding: 6px 16px;
			font-size: 12px;
			font-family: 'DM Mono', monospace;
			color: var(--accent2);
			margin-bottom: 24px;
		}

		.status-dot {
			width: 6px;
			height: 6px;
			background: var(--accent2);
			border-radius: 50%;
			animation: pulse 2s infinite;
		}

		h1 {
			font-family: 'Fraunces', serif;
			font-size: clamp(32px, 5vw, 54px);
			font-weight: 300;
			line-height: 1.1;
			letter-spacing: -1px;
			margin-bottom: 20px;
		}

		h1 em {
			font-style: italic;
			color: var(--accent);
		}

		.subtitle {
			font-size: 16px;
			color: var(--muted);
			line-height: 1.75;
			margin-bottom: 40px;
		}

		/* ── PROGRESS BAR ── */
		.progress-wrap {
			background: var(--bg2);
			border: 1px solid var(--border);
			border-radius: var(--radius);
			padding: 20px 24px;
			margin-bottom: 40px;
			text-align: left;
		}

		.progress-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10px;
		}

		.progress-label {
			font-size: 12px;
			font-family: 'DM Mono', monospace;
			color: var(--muted);
			text-transform: uppercase;
			letter-spacing: 0.08em;
		}

		.progress-pct {
			font-size: 12px;
			font-family: 'DM Mono', monospace;
			color: var(--accent3);
		}

		.progress-track {
			width: 100%;
			height: 4px;
			background: rgba(255, 255, 255, 0.07);
			border-radius: 2px;
			overflow: hidden;
		}

		.progress-fill {
			height: 100%;
			width: 72%;
			background: linear-gradient(90deg, var(--accent), var(--accent3));
			border-radius: 2px;
			animation: grow 1.4s 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
		}

		/* ── MILESTONES ── */
		.milestones {
			display: flex;
			flex-direction: column;
			gap: 1px;
			background: var(--border);
			border: 1px solid var(--border);
			border-radius: var(--radius);
			overflow: hidden;
			margin-bottom: 40px;
			text-align: left;
		}

		.milestone {
			background: var(--bg2);
			padding: 14px 20px;
			display: flex;
			align-items: center;
			gap: 14px;
			font-size: 13px;
		}

		.m-icon {
			width: 22px;
			height: 22px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			font-size: 11px;
		}

		.m-done {
			background: rgba(0, 217, 126, 0.15);
			color: var(--accent3);
		}

		.m-active {
			background: rgba(6, 144, 199, 0.15);
			color: var(--accent);
		}

		.m-soon {
			background: rgba(255, 255, 255, 0.05);
			color: var(--muted);
		}

		.m-label {
			flex: 1;
			color: var(--text);
		}

		.m-label.muted {
			color: var(--muted);
		}

		.m-tag {
			font-size: 10px;
			font-family: 'DM Mono', monospace;
			padding: 2px 8px;
			border-radius: 100px;
		}

		.tag-done {
			background: rgba(0, 217, 126, 0.12);
			color: var(--accent3);
		}

		.tag-active {
			background: rgba(6, 144, 199, 0.12);
			color: var(--accent);
		}

		.tag-soon {
			background: rgba(255, 255, 255, 0.06);
			color: var(--muted);
		}

		/* ── NOTIFY FORM ── */
		.notify-form {
			display: flex;
			gap: 8px;
			margin-bottom: 20px;
		}

		.notify-input {
			flex: 1;
			background: var(--bg2);
			border: 1px solid var(--border);
			border-radius: var(--radius-sm);
			padding: 12px 16px;
			font-family: 'DM Sans', sans-serif;
			font-size: 14px;
			color: var(--text);
			outline: none;
			transition: border-color 0.18s;
		}

		.notify-input::placeholder {
			color: var(--muted);
		}

		.notify-input:focus {
			border-color: var(--accent);
		}

		.notify-btn {
			background: linear-gradient(135deg, var(--accent), var(--accent2));
			border: none;
			border-radius: var(--radius-sm);
			padding: 12px 22px;
			font-family: 'DM Sans', sans-serif;
			font-size: 14px;
			font-weight: 600;
			color: #fff;
			cursor: pointer;
			transition: opacity 0.2s, transform 0.15s;
			white-space: nowrap;
		}

		.notify-btn:hover {
			opacity: 0.88;
			transform: translateY(-1px);
		}

		.notify-btn:active {
			transform: translateY(0);
		}

		.notify-note {
			font-size: 12px;
			color: var(--muted);
			font-family: 'DM Mono', monospace;
		}

		/* success state */
		.notify-success {
			display: none;
			align-items: center;
			justify-content: center;
			gap: 10px;
			background: rgba(0, 217, 126, 0.08);
			border: 1px solid rgba(0, 217, 126, 0.2);
			border-radius: var(--radius-sm);
			padding: 14px 20px;
			font-size: 14px;
			color: var(--accent3);
			margin-bottom: 20px;
		}

		/* ── LINKS ROW ── */
		.links-row {
			display: flex;
			gap: 12px;
			justify-content: center;
			flex-wrap: wrap;
			animation: floatUp 0.8s 0.3s ease both;
		}

		.link-pill {
			display: flex;
			align-items: center;
			gap: 6px;
			background: var(--bg2);
			border: 1px solid var(--border);
			border-radius: var(--radius-sm);
			padding: 10px 18px;
			font-size: 13px;
			color: var(--muted);
			text-decoration: none;
			transition: border-color 0.18s, color 0.18s;
		}

		.link-pill:hover {
			border-color: rgba(255, 255, 255, 0.16);
			color: var(--text);
		}

		/* ── FOOTER ── */
		footer {
			position: relative;
			z-index: 1;
			padding: 20px 48px;
			border-top: 1px solid var(--border);
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			gap: 12px;
		}

		.footer-left {
			font-size: 13px;
			color: var(--muted);
		}

		.footer-right {
			display: flex;
			align-items: center;
			gap: 6px;
			font-size: 12px;
			font-family: 'DM Mono', monospace;
			color: var(--accent3);
		}

		.status-live-dot {
			width: 6px;
			height: 6px;
			background: var(--accent3);
			border-radius: 50%;
			animation: pulse 2.5s infinite;
		}

		/* ── ANIMATIONS ── */
		@keyframes fadeUp {
			from {
				opacity: 0;
				transform: translateY(20px);
			}

			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		@keyframes floatUp {
			from {
				opacity: 0;
				transform: translateY(28px);
			}

			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		@keyframes pulse {

			0%,
			100% {
				opacity: 1;
				transform: scale(1);
			}

			50% {
				opacity: 0.5;
				transform: scale(1.4);
			}
		}

		@keyframes shimmer {
			0% {
				opacity: 0.4;
			}

			50% {
				opacity: 0.8;
			}

			100% {
				opacity: 0.4;
			}
		}

		@keyframes grow {
			from {
				width: 0;
			}

			to {
				width: 72%;
			}
		}

		/* ── RESPONSIVE ── */
		@media (max-width: 600px) {
			nav {
				padding: 16px 20px;
			}

			main {
				padding: 48px 20px;
			}

			.console-body {
				flex-direction: column;
			}

			.c-sidebar {
				width: 100%;
				flex-direction: row;
				flex-wrap: wrap;
			}

			.skel-btn {
				flex: 1;
				min-width: 60px;
			}

			.notify-form {
				flex-direction: column;
			}

			.notify-btn {
				width: 100%;
			}

			footer {
				padding: 16px 20px;
				flex-direction: column;
				align-items: flex-start;
			}
		}