:root {
			--bg: #07111f;
			--bg-2: #0d1b2a;
			--panel: rgba(8, 20, 36, 0.84);
			--panel-strong: rgba(9, 26, 44, 0.96);
			--line: rgba(119, 217, 255, 0.22);
			--line-strong: rgba(119, 217, 255, 0.5);
			--text: #e7f6ff;
			--muted: #96b9d0;
			--cyan: #6ce4ff;
			--teal: #32ffc7;
			--gold: #ffd97a;
			--red: #ff8c8c;
			--blue: #5ea3ff;
			--shadow: 0 18px 55px rgba(0, 0, 0, 0.34);
			--radius: 22px;
			--max: 1300px;
		}

		* {
			box-sizing: border-box;
		}

		html {
			scroll-behavior: smooth;
		}

		body {
			margin: 0;
			font-family: "Bahnschrift", "Segoe UI Variable Display", "Segoe UI", sans-serif;
			color: var(--text);
			background:
				radial-gradient(circle at 15% 15%, rgba(50, 255, 199, 0.18), transparent 18%),
				radial-gradient(circle at 85% 12%, rgba(94, 163, 255, 0.18), transparent 16%),
				radial-gradient(circle at 50% 60%, rgba(108, 228, 255, 0.08), transparent 28%),
				linear-gradient(145deg, #04101d 0%, #07111f 35%, #09192b 100%);
			line-height: 1.6;
			overflow-x: hidden;
		}

		body::before {
			content: "";
			position: fixed;
			inset: 0;
			pointer-events: none;
			background:
				linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
				linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
			background-size: 42px 42px;
			mask-image: radial-gradient(circle at center, black 55%, transparent 100%);
			opacity: 0.4;
		}

		a {
			color: inherit;
			text-decoration: none;
		}

		.shell {
			width: min(calc(100% - 32px), var(--max));
			margin: 0 auto;
			position: relative;
			z-index: 1;
		}

		.topbar {
			position: sticky;
			top: 0;
			z-index: 10;
			backdrop-filter: blur(16px);
			background: rgba(4, 12, 21, 0.72);
			border-bottom: 1px solid rgba(255, 255, 255, 0.06);
		}

		.topbar-inner {
			width: min(calc(100% - 32px), var(--max));
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 20px;
			padding: 14px 0;
		}

		.brand {
			display: flex;
			align-items: center;
			gap: 14px;
			letter-spacing: 0.1em;
			text-transform: uppercase;
			font-weight: 700;
		}

		.brand-badge {
			width: 42px;
			height: 42px;
			border-radius: 14px;
			background:
				conic-gradient(from 220deg, var(--cyan), var(--teal), var(--gold), var(--cyan));
			box-shadow: 0 0 24px rgba(108, 228, 255, 0.35);
			position: relative;
		}

		.brand-badge::after {
			content: "";
			position: absolute;
			inset: 7px;
			border-radius: 11px;
			background: rgba(5, 16, 27, 0.9);
			border: 1px solid rgba(255, 255, 255, 0.08);
		}

		.topnav {
			display: flex;
			gap: 16px;
			flex-wrap: wrap;
			justify-content: flex-end;
		}

		.topnav a {
			color: var(--muted);
			font-size: 0.92rem;
			transition: color 180ms ease, transform 180ms ease;
		}

		.topnav a:hover,
		.topnav a:focus-visible {
			color: var(--cyan);
			transform: translateY(-1px);
		}

		.hero {
			min-height: 92vh;
			display: grid;
			align-items: center;
			padding: 56px 0 40px;
		}

		.hero-grid {
			display: grid;
			grid-template-columns: 1.2fr 0.8fr;
			gap: 28px;
			align-items: stretch;
		}

		.hero-copy,
		.hero-panel,
		.card,
		.table-wrap,
		.spectrum,
		.faq-item,
		.timeline-item {
			background: var(--panel);
			border: 1px solid var(--line);
			border-radius: var(--radius);
			box-shadow: var(--shadow);
		}

		.hero-copy {
			padding: 32px;
			position: relative;
			overflow: hidden;
		}

		.hero-copy::before {
			content: "";
			position: absolute;
			inset: auto -20% -35% 28%;
			height: 320px;
			background: radial-gradient(circle, rgba(108, 228, 255, 0.18), transparent 65%);
			filter: blur(12px);
		}

		.eyebrow {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			padding: 7px 12px;
			border-radius: 999px;
			color: var(--cyan);
			border: 1px solid rgba(108, 228, 255, 0.28);
			background: rgba(108, 228, 255, 0.08);
			font-size: 0.83rem;
			letter-spacing: 0.11em;
			text-transform: uppercase;
		}

		h1,
		h2,
		h3 {
			margin: 0;
			line-height: 1.08;
			font-weight: 800;
		}

		h1 {
			font-size: clamp(2.7rem, 6vw, 5.8rem);
			margin-top: 18px;
			max-width: 12ch;
			text-transform: uppercase;
			letter-spacing: 0.04em;
		}

		.lede {
			margin: 20px 0 0;
			max-width: 70ch;
			color: #cbe4f4;
			font-size: 1.05rem;
		}

		.hero-stats {
			margin-top: 28px;
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 12px;
		}

		.stat {
			padding: 16px;
			border-radius: 18px;
			border: 1px solid rgba(255, 255, 255, 0.06);
			background: rgba(255, 255, 255, 0.03);
		}

		.stat strong {
			display: block;
			color: var(--cyan);
			font-size: 1.4rem;
			margin-bottom: 4px;
		}

		.hero-panel {
			padding: 22px;
			background: linear-gradient(180deg, rgba(11, 26, 45, 0.92), rgba(6, 17, 29, 0.92));
			position: relative;
			overflow: hidden;
		}

		.hero-panel::before {
			content: "";
			position: absolute;
			inset: 18px;
			border-radius: 18px;
			border: 1px solid rgba(255, 255, 255, 0.06);
			pointer-events: none;
		}

		.signal-display {
			position: relative;
			border-radius: 20px;
			background:
				linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
				radial-gradient(circle at 50% 20%, rgba(50, 255, 199, 0.16), transparent 40%),
				#07131f;
			min-height: 100%;
			padding: 20px;
			display: flex;
			flex-direction: column;
			gap: 18px;
		}

		.panel-head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: var(--muted);
			text-transform: uppercase;
			letter-spacing: 0.12em;
			font-size: 0.75rem;
		}

		.chipline {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			gap: 10px;
		}

		.chip {
			border-radius: 16px;
			padding: 14px 10px;
			background: rgba(255, 255, 255, 0.03);
			border: 1px solid rgba(255, 255, 255, 0.08);
			text-align: center;
			font-size: 0.82rem;
			color: var(--muted);
		}

		.chip strong {
			display: block;
			color: var(--text);
			font-size: 1rem;
			margin-bottom: 6px;
		}

		.wave-stack {
			display: grid;
			gap: 12px;
		}

		.wave {
			height: 76px;
			border-radius: 18px;
			position: relative;
			overflow: hidden;
			border: 1px solid rgba(255, 255, 255, 0.08);
			background:
				linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
				#081624;
		}

		.wave::before,
		.wave::after {
			content: "";
			position: absolute;
			inset: 0;
			background-repeat: repeat-x;
			opacity: 0.9;
		}

		.wave::before {
			background-image: radial-gradient(circle at 18px 58px, transparent 16px, rgba(108, 228, 255, 0.88) 16px, rgba(108, 228, 255, 0.88) 20px, transparent 20px);
			background-size: 72px 76px;
			animation: slide 9s linear infinite;
		}

		.wave::after {
			background-image: radial-gradient(circle at 18px 20px, transparent 16px, rgba(50, 255, 199, 0.48) 16px, rgba(50, 255, 199, 0.48) 20px, transparent 20px);
			background-size: 72px 76px;
			animation: slide 12s linear infinite retoe;
		}

		@keyframes slide {
			from { transform: translateX(0); }
			to { transform: translateX(-72px); }
		}

		section {
			padding: 24px 0 8px;
		}

		.section-head {
			display: flex;
			justify-content: space-between;
			align-items: end;
			gap: 24px;
			margin-bottom: 18px;
		}

		.section-head p {
			margin: 0;
			color: var(--muted);
			max-width: 70ch;
		}

		.section-kicker {
			color: var(--teal);
			text-transform: uppercase;
			letter-spacing: 0.12em;
			font-size: 0.8rem;
			margin-bottom: 10px;
		}

		.grid-2,
		.grid-3,
		.grid-4 {
			display: grid;
			gap: 18px;
		}

		.grid-2 {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.grid-3 {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}

		.grid-4 {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}

		.card {
			padding: 22px;
			position: relative;
			overflow: hidden;
		}

		.card::after {
			content: "";
			position: absolute;
			right: -20px;
			top: -40px;
			width: 110px;
			height: 110px;
			border-radius: 50%;
			background: radial-gradient(circle, rgba(108, 228, 255, 0.18), transparent 70%);
			pointer-events: none;
		}

		.card h3 {
			font-size: 1.2rem;
			margin-bottom: 12px;
		}

		.card p,
		.card li,
		.timeline-item p,
		.faq-item p {
			color: #c7dceb;
		}

		.list {
			margin: 0;
			padding-left: 18px;
		}

		.list li + li {
			margin-top: 8px;
		}

		.flow {
			display: grid;
			grid-template-columns: repeat(5, minmax(0, 1fr));
			gap: 12px;
		}

		.flow-step {
			padding: 18px;
			border-radius: 18px;
			border: 1px solid rgba(255, 255, 255, 0.08);
			background: rgba(255, 255, 255, 0.03);
			position: relative;
		}

		.flow-step span {
			display: inline-block;
			margin-bottom: 8px;
			color: var(--cyan);
			font-size: 0.8rem;
			text-transform: uppercase;
			letter-spacing: 0.1em;
		}

		.flow-step::after {
			content: "";
			position: absolute;
			top: 50%;
			right: -8px;
			width: 16px;
			height: 2px;
			background: linear-gradient(90deg, rgba(108, 228, 255, 0.75), transparent);
		}

		.flow-step:last-child::after {
			display: none;
		}

		.table-wrap {
			overflow: auto;
			padding: 12px;
		}

		table {
			width: 100%;
			border-collapse: collapse;
			min-width: 1020px;
			background: transparent;
		}

		th,
		td {
			padding: 14px 12px;
			text-align: left;
			vertical-align: top;
			border-bottom: 1px solid rgba(255, 255, 255, 0.08);
		}

		th {
			color: var(--cyan);
			font-size: 0.82rem;
			text-transform: uppercase;
			letter-spacing: 0.1em;
			position: sticky;
			top: 0;
			background: rgba(8, 20, 36, 0.98);
			z-index: 1;
		}

		tbody tr:hover {
			background: rgba(255, 255, 255, 0.03);
		}

		.tag {
			display: inline-flex;
			padding: 4px 9px;
			border-radius: 999px;
			font-size: 0.75rem;
			text-transform: uppercase;
			letter-spacing: 0.07em;
			border: 1px solid rgba(255, 255, 255, 0.12);
			color: var(--text);
			background: rgba(255, 255, 255, 0.04);
			white-space: nowrap;
		}

		.good { color: var(--teal); }
		.warn { color: var(--gold); }
		.bad { color: var(--red); }

		.spectrum {
			padding: 22px;
		}

		.spectrum-bar {
			height: 22px;
			border-radius: 999px;
			background: linear-gradient(90deg,
				#5d00ff 0%,
				#295fff 14%,
				#00a4ff 28%,
				#00e0d1 40%,
				#55ff5a 54%,
				#f7ff4d 68%,
				#ffb340 82%,
				#ff5f5f 100%);
			box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
			margin: 14px 0 10px;
		}

		.scale {
			display: flex;
			justify-content: space-between;
			gap: 10px;
			color: var(--muted);
			font-size: 0.86rem;
		}

		.timeline {
			display: grid;
			gap: 16px;
		}

		.timeline-item,
		.faq-item {
			padding: 20px;
		}

		.timeline-item strong,
		.faq-item strong {
			color: var(--cyan);
			display: block;
			margin-bottom: 8px;
			text-transform: uppercase;
			letter-spacing: 0.08em;
			font-size: 0.84rem;
		}

		.callout {
			padding: 24px;
			border-radius: var(--radius);
			background:
				linear-gradient(135deg, rgba(108, 228, 255, 0.12), rgba(50, 255, 199, 0.08)),
				var(--panel-strong);
			border: 1px solid var(--line-strong);
			box-shadow: var(--shadow);
		}

		.compare-grid {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 16px;
			margin-top: 18px;
		}

		.compare-box {
			padding: 18px;
			border-radius: 20px;
			background: rgba(255, 255, 255, 0.03);
			border: 1px solid rgba(255, 255, 255, 0.08);
		}

		.compare-box h3 {
			margin-bottom: 10px;
		}

		.invention-grid {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 18px;
		}

		.invention-card {
			padding: 22px;
			border-radius: 24px;
			background:
				linear-gradient(180deg, rgba(108, 228, 255, 0.08), rgba(255, 255, 255, 0.02)),
				var(--panel);
			border: 1px solid rgba(108, 228, 255, 0.22);
			box-shadow: var(--shadow);
			position: relative;
			overflow: hidden;
		}

		.invention-card::before {
			content: "";
			position: absolute;
			inset: auto -10% -18% 40%;
			height: 180px;
			background: radial-gradient(circle, rgba(50, 255, 199, 0.22), transparent 68%);
			pointer-events: none;
		}

		.invention-index {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 42px;
			height: 42px;
			border-radius: 14px;
			font-weight: 800;
			color: var(--cyan);
			background: rgba(108, 228, 255, 0.08);
			border: 1px solid rgba(108, 228, 255, 0.25);
			margin-bottom: 14px;
		}

		.invention-card h3 {
			margin-bottom: 10px;
			font-size: 1.18rem;
		}

		.invention-meta {
			display: flex;
			flex-wrap: wrap;
			gap: 8px;
			margin-top: 14px;
		}

		.invention-meta span {
			padding: 6px 10px;
			border-radius: 999px;
			font-size: 0.75rem;
			letter-spacing: 0.06em;
			text-transform: uppercase;
			color: #d4efff;
			background: rgba(255, 255, 255, 0.04);
			border: 1px solid rgba(255, 255, 255, 0.1);
		}

		.diagram-grid {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 18px;
			margin: 20px 0 22px;
		}

		.diagram-panel {
			padding: 18px;
			border-radius: 24px;
			background: linear-gradient(180deg, rgba(9, 27, 43, 0.96), rgba(8, 18, 31, 0.9));
			border: 1px solid rgba(108, 228, 255, 0.22);
			box-shadow: var(--shadow);
		}

		.diagram-panel h3 {
			margin-bottom: 12px;
		}

		.diagram-panel p {
			margin: 10px 0 0;
			color: #c7dceb;
		}

		.diagram-panel svg {
			width: 100%;
			height: auto;
			display: block;
		}

		.diagram-panel svg rect,
		.diagram-panel svg circle,
		.diagram-panel svg ellipse {
			transform-box: fill-box;
			transform-origin: center;
		}

		.diagram-panel svg line,
		.diagram-panel svg path {
			stroke-linecap: round;
		}

		.diagram-panel svg rect,
		.diagram-panel svg circle,
		.diagram-panel svg ellipse,
		.diagram-panel svg text {
			animation: diagramPulse 5.4s ease-in-out infinite;
		}

		.diagram-panel svg line,
		.diagram-panel svg path {
			animation: diagramFlow 4.8s linear infinite;
		}

		.invention-card {
			animation: floatCard 8s ease-in-out infinite;
		}

		.invention-card:nth-child(2n) {
			animation-delay: -1.6s;
		}

		.invention-card:nth-child(3n) {
			animation-delay: -3.2s;
		}

		.invention-card:hover {
			transform: translateY(-8px);
			border-color: rgba(108, 228, 255, 0.42);
			box-shadow: 0 24px 65px rgba(0, 0, 0, 0.4);
		}

		.invention-index {
			animation: badgeOrbit 4.4s ease-in-out infinite;
		}

		@keyframes diagramPulse {
			0%,
			100% {
				opacity: 0.88;
				transform: scale(1);
			}

			50% {
				opacity: 1;
				transform: scale(1.018);
			}
		}

		@keyframes diagramFlow {
			0% {
				stroke-dashoffset: 0;
				filter: drop-shadow(0 0 0 rgba(108, 228, 255, 0));
			}

			50% {
				filter: drop-shadow(0 0 6px rgba(108, 228, 255, 0.35));
			}

			100% {
				stroke-dashoffset: -32;
				filter: drop-shadow(0 0 0 rgba(108, 228, 255, 0));
			}
		}

		@keyframes floatCard {
			0%,
			100% {
				transform: translateY(0px);
			}

			50% {
				transform: translateY(-6px);
			}
		}

		@keyframes badgeOrbit {
			0%,
			100% {
				transform: translateY(0) scale(1);
				box-shadow: 0 0 0 rgba(108, 228, 255, 0);
			}

			50% {
				transform: translateY(-3px) scale(1.04);
				box-shadow: 0 0 18px rgba(108, 228, 255, 0.22);
			}
		}

		.footer {
			padding: 28px 0 60px;
			color: var(--muted);
			font-size: 0.92rem;
		}

		.pill-row {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			margin-top: 18px;
		}

		.pill-row span {
			padding: 8px 12px;
			border-radius: 999px;
			background: rgba(255, 255, 255, 0.04);
			border: 1px solid rgba(255, 255, 255, 0.08);
			color: #d4ebf9;
		}

		@media (max-width: 1100px) {
			.hero-grid,
			.grid-4,
			.grid-3,
			.grid-2,
			.invention-grid,
			.diagram-grid,
			.compare-grid,
			.flow {
				grid-template-columns: 1fr;
			}

			.hero-stats,
			.chipline {
				grid-template-columns: repeat(2, minmax(0, 1fr));
			}

			.flow-step::after {
				display: none;
			}
		}

		@media (max-width: 720px) {
			.topbar-inner {
				align-items: flex-start;
				flex-direction: column;
			}

			h1 {
				max-width: none;
			}

			.hero-copy,
			.hero-panel,
			.card,
			.timeline-item,
			.faq-item,
			.spectrum,
			.callout {
				padding: 18px;
			}

			.hero-stats,
			.chipline {
				grid-template-columns: 1fr;
			}

			.topnav {
				gap: 10px 14px;
			}
		}

		@media (prefers-reduced-motion: reduce) {
			*,
			*::before,
			*::after {
				animation: none !important;
				transition: none !important;
				scroll-behavior: auto !important;
			}
		}