:root {
    --pink: #FF7AD9;
    --mint: #B7FFE4;
    --black: #070A12;
    --cyan: #6EF3FF;
    --lilac: #B68CFF;
    --frost: #EAF7FF;
    --glass: rgba(234, 247, 255, 0.105);
    --stroke: rgba(234, 247, 255, 0.25);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--frost);
    background: var(--black);
    font-family: Inter, sans-serif;
    overflow-x: hidden;
}

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

.ambient-field {
    position: fixed;
    inset: 0;
    z-index: -3;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 15%, rgba(110, 243, 255, 0.22), transparent 32%),
        radial-gradient(circle at 76% 22%, rgba(255, 122, 217, 0.18), transparent 30%),
        radial-gradient(circle at 45% 82%, rgba(182, 140, 255, 0.20), transparent 36%),
        linear-gradient(135deg, #070A12 0%, #0c1220 48%, #070A12 100%);
}

.mesh {
    position: absolute;
    width: 55vw;
    height: 55vw;
    border-radius: 38% 62% 53% 47%;
    filter: blur(38px);
    opacity: 0.45;
    mix-blend-mode: screen;
    animation: drift 18s ease-in-out infinite alternate;
}

.mesh-a {
    left: -12vw;
    top: 8vh;
    background: radial-gradient(circle, var(--cyan), transparent 58%);
}

.mesh-b {
    right: -18vw;
    top: 20vh;
    background: radial-gradient(circle, var(--pink), transparent 56%);
    animation-delay: -6s;
}

.mesh-c {
    left: 26vw;
    bottom: -22vw;
    background: radial-gradient(circle, var(--lilac), transparent 60%);
    animation-delay: -11s;
}

.circuit-sky {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.42;
}

.circuit-sky path,
.circuit-sky circle {
    fill: none;
    stroke: rgba(183, 255, 228, 0.34);
    stroke-width: 1.4;
    filter: drop-shadow(0 0 10px rgba(110, 243, 255, 0.45));
}

.particle-field {
    position: absolute;
    inset: 0;
}

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--frost);
    box-shadow: 0 0 18px var(--cyan);
    opacity: 0.72;
    transform: translate3d(0, 0, 0);
}

.topbar {
    position: fixed;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: min(1120px, calc(100% - 34px));
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    padding: 10px 12px;
    border: 1px solid rgba(234, 247, 255, 0.24);
    border-radius: 999px;
    background: rgba(7, 10, 18, 0.48);
    backdrop-filter: blur(22px);
    box-shadow: 0 0 42px rgba(110, 243, 255, 0.16);
}

.brand-mark,
.system-chip,
.eyebrow,
.readout,
.glass-pane span,
.glass-nav {
    font-family: "IBM Plex Mono", monospace;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.brand-mark {
    padding-left: 16px;
    font-weight: 600;
    color: var(--mint);
}

.glass-nav {
    display: flex;
    gap: 8px;
    padding: 6px;
    border-radius: 999px;
    background: rgba(234, 247, 255, 0.08);
    font-size: 11px;
}

.glass-nav a {
    padding: 8px 12px;
    border-radius: 999px;
    color: rgba(234, 247, 255, 0.76);
    transition: color 240ms ease, background 240ms ease, box-shadow 240ms ease;
}

.glass-nav a:hover,
.glass-nav a.active {
    color: var(--black);
    background: linear-gradient(90deg, var(--cyan), var(--mint));
    box-shadow: 0 0 24px rgba(110, 243, 255, 0.42);
}

.system-chip {
    justify-self: end;
    padding: 8px 14px;
    border-radius: 999px;
    color: var(--pink);
    background: rgba(255, 122, 217, 0.11);
    font-size: 11px;
}

.story {
    position: relative;
    z-index: 1;
}

.chapter {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 118px 24px 56px;
}

.slab {
    position: relative;
    width: min(1180px, 100%);
    min-height: 72vh;
    border: 1px solid var(--stroke);
    border-radius: 42px;
    background:
        linear-gradient(135deg, rgba(234, 247, 255, 0.14), rgba(234, 247, 255, 0.035)),
        radial-gradient(circle at 12% 18%, rgba(110, 243, 255, 0.12), transparent 28%),
        radial-gradient(circle at 82% 76%, rgba(255, 122, 217, 0.11), transparent 28%);
    backdrop-filter: blur(26px) saturate(145%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045), 0 34px 110px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.slab::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--spin, 0deg), transparent 0 18%, var(--cyan), var(--mint), var(--lilac), var(--pink), transparent 82% 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.72;
    animation: borderSpin 8s linear infinite;
    pointer-events: none;
}

.hero-slab {
    display: grid;
    grid-template-columns: 1.06fr 0.94fr;
    align-items: center;
    gap: 36px;
    padding: clamp(34px, 6vw, 78px);
}

.headline-panel {
    position: relative;
    z-index: 2;
    max-width: 700px;
}

.eyebrow {
    margin: 0 0 18px;
    color: var(--cyan);
    font-size: 12px;
}

h1,
h2,
h3 {
    font-family: "Libre Baskerville", Baskerville, serif;
    margin: 0;
    font-weight: 400;
    line-height: 0.96;
}

h1 {
    max-width: 780px;
    font-size: clamp(58px, 8.8vw, 132px);
    letter-spacing: -0.07em;
    text-shadow: 0 0 40px rgba(110, 243, 255, 0.28);
}

h2 {
    font-size: clamp(44px, 6.6vw, 92px);
    letter-spacing: -0.06em;
}

h3 {
    font-size: 30px;
    letter-spacing: -0.04em;
}

.lede,
.copy-stack p,
.glass-pane p,
.final-copy {
    color: rgba(234, 247, 255, 0.78);
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.7;
}

.lede {
    max-width: 580px;
    margin-top: 28px;
}

.rail-readout {
    position: absolute;
    left: 28px;
    bottom: 28px;
    color: var(--mint);
    font-size: 11px;
}

.prism-orb {
    position: relative;
    min-height: 470px;
    display: grid;
    place-items: center;
    perspective: 900px;
}

.ring {
    position: absolute;
    width: min(34vw, 390px);
    aspect-ratio: 1;
    border: 1px solid rgba(234, 247, 255, 0.32);
    border-radius: 50%;
    box-shadow: 0 0 42px rgba(110, 243, 255, 0.22), inset 0 0 44px rgba(255, 122, 217, 0.12);
}

.ring-one {
    transform: rotateX(68deg) rotateZ(12deg);
    animation: orbitOne 9s linear infinite;
}

.ring-two {
    transform: rotateY(68deg) rotateZ(-18deg);
    border-color: rgba(255, 122, 217, 0.38);
    animation: orbitTwo 11s linear infinite;
}

.core {
    width: min(24vw, 260px);
    aspect-ratio: 1;
    border-radius: 42% 58% 50% 50%;
    background:
        radial-gradient(circle at 30% 20%, var(--frost), transparent 20%),
        conic-gradient(from 20deg, var(--cyan), var(--mint), var(--pink), var(--lilac), var(--cyan));
    filter: drop-shadow(0 0 56px rgba(110, 243, 255, 0.72));
    opacity: 0.9;
    animation: morph 7s ease-in-out infinite alternate;
}

.circuit-frame span,
.connector-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, var(--cyan), var(--pink), transparent);
    box-shadow: 0 0 18px rgba(110, 243, 255, 0.55);
}

.circuit-frame span:nth-child(1) { top: 12%; left: 6%; width: 20%; height: 1px; }
.circuit-frame span:nth-child(2) { top: 12%; left: 26%; width: 1px; height: 9%; }
.circuit-frame span:nth-child(3) { bottom: 11%; right: 12%; width: 22%; height: 1px; }
.circuit-frame span:nth-child(4) { bottom: 11%; right: 34%; width: 1px; height: 12%; }

.split-slab {
    display: grid;
    grid-template-columns: 1fr 0.86fr;
    align-items: center;
    gap: 44px;
    padding: clamp(28px, 5vw, 64px);
}

.signal-map {
    position: relative;
    min-height: 480px;
    border-radius: 30px;
    background: rgba(7, 10, 18, 0.36);
    border: 1px solid rgba(234, 247, 255, 0.16);
    overflow: hidden;
}

.signal-map::before {
    content: "";
    position: absolute;
    inset: -20%;
    background-image: linear-gradient(rgba(234, 247, 255, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(234, 247, 255, 0.055) 1px, transparent 1px);
    background-size: 44px 44px;
    transform: rotate(-8deg);
}

.signal-map svg {
    position: absolute;
    inset: 8%;
    width: 84%;
    height: 84%;
}

.trace {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 90 28;
    animation: dash 4s linear infinite;
}

.trace-a { stroke: var(--cyan); }
.trace-b { stroke: var(--pink); animation-delay: -1s; }
.trace-c { stroke: var(--mint); animation-delay: -2s; }

.node {
    position: absolute;
    z-index: 2;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--black);
    background: var(--frost);
    font-family: "IBM Plex Mono", monospace;
    font-weight: 600;
    box-shadow: 0 0 28px rgba(110, 243, 255, 0.62);
    animation: pulse 2.8s ease-in-out infinite;
}

.n1 { left: 11%; top: 17%; }
.n2 { right: 15%; top: 27%; animation-delay: -0.7s; }
.n3 { left: 28%; bottom: 18%; animation-delay: -1.4s; }
.n4 { right: 24%; bottom: 24%; animation-delay: -2.1s; }

.metric-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 30px;
}

.metric-grid div,
.glass-pane {
    border: 1px solid rgba(234, 247, 255, 0.18);
    border-radius: 22px;
    background: rgba(234, 247, 255, 0.08);
    backdrop-filter: blur(18px);
}

.metric-grid div {
    padding: 18px;
}

.metric-grid strong {
    display: block;
    color: var(--mint);
    font-family: "Libre Baskerville", Baskerville, serif;
    font-size: 36px;
    font-weight: 400;
}

.metric-grid span {
    color: rgba(234, 247, 255, 0.62);
    font-family: "IBM Plex Mono", monospace;
    font-size: 10px;
    text-transform: uppercase;
}

.showcase-slab {
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    gap: 30px;
    align-items: center;
    padding: clamp(30px, 5vw, 70px);
}

.pane-stack {
    position: relative;
    min-height: 560px;
}

.glass-pane {
    position: absolute;
    width: min(460px, 90%);
    padding: 30px;
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.24);
    transition: transform 500ms ease, border-color 500ms ease;
}

.glass-pane:hover {
    transform: translateY(-12px) rotate(0deg) scale(1.03);
    border-color: rgba(110, 243, 255, 0.62);
}

.glass-pane span {
    color: var(--pink);
    font-size: 11px;
}

.pane-one { top: 5%; left: 4%; transform: rotate(-5deg); }
.pane-two { top: 34%; right: 0; transform: rotate(4deg); }
.pane-three { bottom: 3%; left: 13%; transform: rotate(-2deg); }

.final-slab {
    min-height: 66vh;
    display: grid;
    place-items: center;
    text-align: center;
    padding: clamp(36px, 8vw, 92px);
}

.final-slab h2 {
    max-width: 980px;
}

.final-copy {
    max-width: 620px;
    margin: 28px auto 0;
}

.launch-button {
    display: inline-flex;
    margin-top: 34px;
    padding: 15px 24px;
    border-radius: 999px;
    color: var(--black);
    background: linear-gradient(90deg, var(--cyan), var(--mint), var(--pink));
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: 0 0 36px rgba(110, 243, 255, 0.38);
}

.progress-rail {
    position: fixed;
    right: 20px;
    top: 20vh;
    z-index: 9;
    width: 2px;
    height: 60vh;
    background: rgba(234, 247, 255, 0.16);
}

.progress-fill {
    width: 100%;
    height: 0%;
    background: linear-gradient(var(--cyan), var(--pink));
    box-shadow: 0 0 18px var(--cyan);
}

@property --spin {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes borderSpin { to { --spin: 360deg; } }
@keyframes drift { to { transform: translate3d(7vw, -5vh, 0) rotate(28deg) scale(1.12); } }
@keyframes orbitOne { to { transform: rotateX(68deg) rotateZ(372deg); } }
@keyframes orbitTwo { to { transform: rotateY(68deg) rotateZ(-378deg); } }
@keyframes morph { to { border-radius: 58% 42% 46% 54%; transform: rotate(18deg) scale(1.04); } }
@keyframes dash { to { stroke-dashoffset: -118; } }
@keyframes pulse { 50% { transform: scale(1.16); box-shadow: 0 0 44px rgba(255, 122, 217, 0.72); } }

@media (max-width: 900px) {
    .topbar {
        grid-template-columns: 1fr;
        border-radius: 26px;
    }

    .brand-mark,
    .system-chip {
        justify-self: center;
        padding: 0;
    }

    .glass-nav {
        justify-content: center;
        flex-wrap: wrap;
    }

    .hero-slab,
    .split-slab,
    .showcase-slab {
        grid-template-columns: 1fr;
    }

    .prism-orb,
    .signal-map,
    .pane-stack {
        min-height: 360px;
    }

    .glass-pane {
        position: relative;
        inset: auto;
        width: 100%;
        margin-bottom: 16px;
        transform: none;
    }

    .metric-grid {
        grid-template-columns: 1fr;
    }
}