:root {
    --bg: #02050c;
    --bg-2: #050a15;
    --panel: rgba(7, 18, 37, .54);
    --panel-strong: rgba(7, 20, 42, .82);
    --line: rgba(113, 221, 255, .18);
    --line-strong: rgba(111, 230, 255, .46);
    --text: #edf8ff;
    --muted: #8ea6ba;
    --muted-2: #637b8f;
    --cyan: #76e6ff;
    --cyan-2: #1dc8ff;
    --blue: #3e7bff;
    --violet: #8267ff;
    --green: #65e6bd;
    --gold: #ffd782;
    --danger: #ff809c;
    --radius: 22px;
    --shadow: 0 22px 90px rgba(0, 0, 0, .42);
    --max: 1240px;
    --mx: 50vw;
    --my: 50vh;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
    margin: 0;
    min-width: 320px;
    color: var(--text);
    background:
        radial-gradient(circle at 20% 0%, rgba(38, 91, 180, .16), transparent 34rem),
        radial-gradient(circle at 80% 20%, rgba(79, 38, 180, .10), transparent 32rem),
        linear-gradient(180deg, #02050c 0%, #040915 48%, #02050c 100%);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    background: radial-gradient(500px circle at var(--mx) var(--my), rgba(75, 198, 255, .055), transparent 58%);
}
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
::selection { background: rgba(75, 210, 255, .25); color: white; }

.skip-link { position: fixed; left: 1rem; top: -6rem; z-index: 999; padding: .8rem 1rem; background: white; color: #00121f; border-radius: 8px; }
.skip-link:focus { top: 1rem; }

#starfield { position: fixed; inset: 0; z-index: -4; width: 100%; height: 100%; }
.noise { position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .15; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }

.cursor-light { position: fixed; left: 0; top: 0; width: 36px; height: 36px; border: 1px solid rgba(117, 226, 255, .6); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 999; opacity: 0; transition: opacity .2s, width .2s, height .2s, border-color .2s; box-shadow: 0 0 28px rgba(63, 205, 255, .25); }
.cursor-light span { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; transform: translate(-50%, -50%); border-radius: 50%; background: white; box-shadow: 0 0 12px var(--cyan); }
body.pointer-active .cursor-light { opacity: 1; }
body.cursor-hover .cursor-light { width: 54px; height: 54px; border-color: rgba(133, 105, 255, .85); }

.eyebrow { color: var(--cyan); letter-spacing: .22em; font-size: .72rem; font-weight: 750; text-transform: uppercase; }
.signal { display: inline-block; width: 6px; height: 6px; margin-right: .6rem; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); animation: pulseDot 1.8s infinite; }

.topbar {
    position: fixed;
    left: 50%;
    top: 16px;
    transform: translateX(-50%);
    width: min(calc(100% - 32px), 1500px);
    height: 58px;
    z-index: 100;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 0 14px;
    border: 1px solid rgba(117, 226, 255, .14);
    border-radius: 18px;
    background: rgba(2, 8, 18, .64);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 16px 50px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.035);
    opacity: 0;
    translate: 0 -14px;
    transition: opacity .5s ease, translate .5s ease, border-color .3s ease;
}
body.boot-complete .topbar { opacity: 1; translate: 0 0; }
.topbar:hover { border-color: rgba(117, 226, 255, .26); }
.brand { display: flex; align-items: center; width: max-content; gap: .7rem; }
.brand-core { position: relative; width: 25px; height: 25px; border: 1px solid rgba(112, 230, 255, .56); border-radius: 50%; box-shadow: 0 0 14px rgba(47, 202, 255, .25); }
.brand-core::before, .brand-core::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(128, 103, 255, .65); border-radius: 50%; transform: rotateX(62deg); }
.brand-core::after { transform: rotateY(62deg); }
.brand-core span { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: white; left: 9px; top: 9px; box-shadow: 0 0 10px var(--cyan); }
.brand-word { font-size: 1.05rem; font-weight: 780; letter-spacing: .04em; }
.brand-build { color: var(--muted-2); font-size: .58rem; letter-spacing: .16em; border-left: 1px solid rgba(255,255,255,.12); padding-left: .7rem; }
.topbar-center { display: flex; align-items: center; gap: .55rem; color: #7f9db3; font-size: .62rem; letter-spacing: .14em; }
.system-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.separator { width: 1px; height: 15px; background: rgba(255,255,255,.1); margin: 0 .25rem; }
.topbar-actions { justify-self: end; display: flex; gap: .35rem; }
.icon-control { display: flex; align-items: center; gap: .45rem; height: 38px; padding: 0 .75rem; border: 1px solid transparent; border-radius: 10px; background: transparent; cursor: pointer; color: #9bb3c4; font-size: .63rem; letter-spacing: .13em; transition: .22s ease; }
.icon-control i { font-size: 1.05rem; color: var(--cyan); }
.icon-control:hover, .icon-control:focus-visible { color: white; border-color: rgba(108, 224, 255, .18); background: rgba(95, 213, 255, .05); outline: none; }

.scene { position: relative; min-height: 100svh; width: 100%; padding: clamp(110px, 11vw, 160px) max(24px, calc((100vw - var(--max))/2)); overflow: clip; }
.scene::before { content: ""; position: absolute; left: 6vw; right: 6vw; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(97, 220, 255, .11), transparent); }
.section-heading { max-width: 700px; position: relative; z-index: 2; }
.section-heading.centered { margin: 0 auto 4rem; text-align: center; }
.section-heading h2, .final-content h2 { margin: 1rem 0 1.2rem; font-size: clamp(2.5rem, 6.3vw, 6.2rem); line-height: .9; letter-spacing: -.055em; font-weight: 820; }
.section-heading h2 span, .final-content h2 span { color: transparent; -webkit-text-stroke: 1px rgba(146, 228, 255, .78); text-shadow: 0 0 28px rgba(48, 176, 255, .16); }
.section-heading p, .final-content p { color: var(--muted); line-height: 1.75; max-width: 620px; font-size: clamp(.96rem, 1.3vw, 1.12rem); }
.section-heading.centered p { margin-left: auto; margin-right: auto; }

.hero { min-height: 100svh; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 2rem; padding-top: 140px; }
.hero::before { display: none; }
.hero-copy { position: relative; z-index: 5; align-self: center; }
.hero-copy h1 { font-size: clamp(4rem, 8.6vw, 9.4rem); line-height: .78; margin: 1.35rem 0 2rem; letter-spacing: -.07em; font-weight: 860; }
.hero-copy h1 span { color: transparent; -webkit-text-stroke: 1.2px rgba(146, 228, 255, .78); text-shadow: 0 0 40px rgba(43, 191, 255, .18); }
.hero-lead { max-width: 620px; color: #a0b5c6; line-height: 1.75; font-size: clamp(1rem, 1.4vw, 1.18rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.plasma-button, .ghost-button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 48px; padding: 0 1.15rem; border-radius: 12px; border: 1px solid rgba(115, 226, 255, .45); cursor: pointer; letter-spacing: .1em; font-size: .7rem; font-weight: 760; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.plasma-button { color: #eafdff; background: linear-gradient(135deg, rgba(30, 181, 255, .25), rgba(104, 75, 255, .18)); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 0 26px rgba(45, 192, 255, .11); }
.plasma-button::before { content: ""; position: absolute; inset: -120% 30%; transform: rotate(23deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent); transition: transform .7s ease; }
.plasma-button:hover::before { transform: translateX(180%) rotate(23deg); }
.plasma-button:hover, .plasma-button:focus-visible { box-shadow: inset 0 1px rgba(255,255,255,.11), 0 0 35px rgba(45, 192, 255, .24); outline: none; }
.ghost-button { color: #9eb7c9; border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.025); }
.ghost-button:hover { color: white; border-color: rgba(115,226,255,.3); }
.hero-meta { display: flex; gap: 2.5rem; margin-top: 2.7rem; }
.hero-meta div { display: flex; flex-direction: column; gap: .2rem; }
.hero-meta strong { font-size: .95rem; letter-spacing: .1em; }
.hero-meta span { color: var(--muted-2); font-size: .58rem; letter-spacing: .15em; }

.hero-system { position: relative; min-height: 640px; z-index: 4; transform-style: preserve-3d; perspective: 1200px; }
.hero-core-zone { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); width: 330px; height: 330px; display: grid; place-items: center; }
.hero-core-zone::before { content: ""; position: absolute; width: 100%; height: 30%; border: 1px solid rgba(91, 213, 255, .18); border-radius: 50%; transform: rotate(17deg); box-shadow: 0 0 25px rgba(49,183,255,.08); }
.hero-core-zone::after { content: ""; position: absolute; width: 124%; height: 42%; border: 1px solid rgba(127, 99, 255, .14); border-radius: 50%; transform: rotate(-31deg); }
.core-mark { position: relative; display: grid; place-items: center; width: 92px; height: 92px; border: 0; border-radius: 50%; background: radial-gradient(circle, rgba(134,235,255,.3), rgba(13,54,91,.24) 35%, rgba(5,12,27,.7) 66%, transparent 70%); cursor: pointer; filter: drop-shadow(0 0 20px rgba(48,196,255,.28)); }
.memory-core { width: 172px; height: 172px; }
.core-ring { position: absolute; border: 1px solid rgba(105, 224, 255, .55); border-radius: 50%; box-shadow: 0 0 20px rgba(54, 207, 255, .18), inset 0 0 18px rgba(65, 186, 255, .08); }
.core-ring-a { inset: 9%; animation: spin 11s linear infinite; }
.core-ring-b { inset: 23%; border-color: rgba(145,111,255,.72); transform: rotateX(64deg); animation: spinReverse 8s linear infinite; }
.core-ring-c { inset: 2%; border-style: dashed; opacity: .4; animation: spin 24s linear infinite; }
.core-heart { width: 19%; aspect-ratio: 1; border-radius: 50%; background: #f4fdff; box-shadow: 0 0 7px white, 0 0 18px var(--cyan), 0 0 45px rgba(56,190,255,.7), 0 0 85px rgba(104,75,255,.28); animation: coreBreath 2.8s ease-in-out infinite; }
.core-scan { position: absolute; inset: -38%; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 88%, rgba(92,223,255,.17) 94%, transparent 100%); animation: spin 4.5s linear infinite; }
.core-label { position: absolute; bottom: 30px; display: flex; flex-direction: column; text-align: center; gap: .3rem; }
.core-label b { font-size: .68rem; letter-spacing: .18em; }
.core-label span { font-size: .54rem; letter-spacing: .18em; color: var(--muted-2); }
.core-telemetry span { position: absolute; left: var(--x); top: var(--y); color: rgba(118,230,255,.55); font-size: .48rem; letter-spacing: .18em; }

.holo-card { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(9,22,44,.66), rgba(4,10,23,.54)); backdrop-filter: blur(18px) saturate(130%); box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.035); overflow: hidden; }
.holo-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(139,230,255,.045) 50%, transparent 70%); transform: translateX(-100%); transition: transform .8s ease; }
.holo-card:hover::before { transform: translateX(100%); }
.holo-card::after { content: ""; position: absolute; left: 16px; top: -1px; width: 72px; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); opacity: .65; }
.float-panel { position: absolute; width: 260px; padding: 1rem; animation: float 6s ease-in-out infinite; }
.float-panel header { display: flex; gap: .45rem; align-items: center; color: #b6c9d8; font-size: .58rem; letter-spacing: .14em; }
.float-panel header i { color: var(--cyan); font-size: 1rem; }
.float-panel header small { margin-left: auto; color: var(--muted-2); }
.float-panel p { margin: .8rem 0 .7rem; color: #d7e8f1; line-height: 1.45; font-size: .8rem; }
.float-panel footer { display: flex; justify-content: space-between; color: var(--muted-2); font-size: .58rem; letter-spacing: .08em; }
.float-panel footer b { color: var(--cyan); }
.float-a { left: 0; top: 10%; animation-delay: -1s; }
.float-b { right: 0; top: 19%; animation-delay: -3.5s; }
.float-c { right: 7%; bottom: 7%; animation-delay: -5s; }
.micro-stats { display: grid; gap: .6rem; margin-top: .8rem; }
.micro-stats span { color: var(--muted); font-size: .7rem; }
.micro-stats b { color: white; font-size: 1rem; margin-right: .3rem; }
.progress { height: 3px; margin: .8rem 0; background: rgba(255,255,255,.06); overflow: hidden; }
.progress span { display: block; width: var(--progress); height: 100%; background: linear-gradient(90deg, var(--cyan), var(--violet)); box-shadow: 0 0 12px rgba(70,210,255,.5); }
.wave, .mini-wave { height: 38px; background: repeating-linear-gradient(90deg, transparent 0 5px, rgba(115,226,255,.7) 6px 7px, transparent 8px 12px); mask-image: linear-gradient(180deg, transparent, black 25%, black 75%, transparent); animation: waveShift 2s linear infinite; opacity: .75; }
.mini-wave { height: 26px; margin-top: .6rem; }

.hero-horizon, .final-horizon { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.planet { position: absolute; width: min(1160px, 105vw); aspect-ratio: 1; border-radius: 50%; right: -22%; bottom: -63%; background: radial-gradient(circle at 45% 23%, rgba(77,151,188,.32), rgba(10,37,61,.55) 36%, rgba(3,10,20,.92) 67%, #01040a 72%); box-shadow: inset 0 0 130px rgba(31,125,174,.25), 0 -7px 55px rgba(78,210,255,.18); opacity: .84; }
.planet::before { content: ""; position: absolute; inset: 2%; border-radius: 50%; background-image: radial-gradient(ellipse at 34% 25%, rgba(91,154,142,.18), transparent 12%), radial-gradient(ellipse at 52% 17%, rgba(88,121,107,.16), transparent 9%), radial-gradient(ellipse at 63% 28%, rgba(110,154,133,.12), transparent 8%); filter: blur(2px); opacity: .6; }
.atmosphere { position: absolute; width: min(1200px, 108vw); aspect-ratio: 1; border-radius: 50%; right: -23%; bottom: -64%; border-top: 3px solid rgba(121,231,255,.36); filter: drop-shadow(0 -10px 25px rgba(59,184,255,.18)); opacity: .74; }
.orbit-line { position: absolute; border: 1px solid rgba(96,216,255,.13); border-radius: 50%; }
.orbit-line-one { width: 80vw; height: 18vw; right: -15vw; bottom: 15vh; transform: rotate(-13deg); }
.orbit-line-two { width: 50vw; height: 11vw; right: 5vw; bottom: 19vh; transform: rotate(21deg); border-color: rgba(132,102,255,.14); }
.scroll-cue { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: .6rem; border: 0; background: transparent; color: #718c9f; font-size: .58rem; letter-spacing: .18em; cursor: pointer; animation: bob 2.2s ease-in-out infinite; }
.scroll-cue i { color: var(--cyan); }

.boot { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: #01040a; transition: opacity .7s ease, visibility .7s; }
.boot.hidden { opacity: 0; visibility: hidden; }
.boot-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(80,194,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(80,194,255,.035) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(circle at center, black, transparent 68%); animation: gridBoot 4s ease-out forwards; }
.boot-core { width: 130px; height: 130px; opacity: 0; animation: bootCore 1.2s .25s ease forwards; }
.boot-copy { position: absolute; top: calc(50% + 115px); width: min(420px, calc(100vw - 48px)); text-align: center; }
.boot-line { margin: .7rem 0 .8rem; font-size: .68rem; letter-spacing: .16em; color: #adc3d2; min-height: 1em; }
.boot-meter { height: 1px; background: rgba(255,255,255,.08); overflow: hidden; }
.boot-meter span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--violet)); box-shadow: 0 0 12px var(--cyan); transition: width .3s ease; }
.boot-skip { margin-top: 1rem; border: 0; background: transparent; color: var(--muted-2); font-size: .55rem; letter-spacing: .14em; cursor: pointer; }
.boot-skip:hover { color: white; }

.reveal { opacity: 0; transform: translateY(30px); filter: blur(8px); transition: opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1), filter .85s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); filter: blur(0); }

.continuum-section { min-height: 920px; }
.continuum-visual { position: relative; height: 360px; margin: 5rem 0 3rem; }
.continuum-line { position: absolute; left: 3%; right: 3%; top: 49%; height: 2px; background: linear-gradient(90deg, transparent, rgba(106,224,255,.24) 8%, rgba(106,224,255,.48), rgba(130,102,255,.38), transparent); box-shadow: 0 0 22px rgba(72,205,255,.12); }
.continuum-line::before { content: ""; position: absolute; inset: -4px 0; background: repeating-linear-gradient(90deg, transparent 0 54px, rgba(120,216,255,.16) 55px 56px, transparent 57px 112px); }
.event-node { position: absolute; top: 49%; transform: translate(-50%, -50%); }
.event-a { left: 14%; }.event-b { left: 36%; }.event-c { left: 60%; }.event-d { left: 81%; }
.event-node > button { position: relative; z-index: 3; width: 60px; height: 60px; border-radius: 50%; border: 1px solid rgba(103,223,255,.25); background: rgba(4,15,31,.85); color: var(--cyan); cursor: pointer; box-shadow: 0 0 0 7px rgba(48,201,255,.02), 0 0 25px rgba(48,201,255,.12); transition: .25s; }
.event-node > button i { display: block; font-size: 1.25rem; }
.event-node > button span { display: block; margin-top: 2px; font-size: .48rem; color: #9cb5c7; }
.event-node:hover > button, .event-node.active > button { transform: scale(1.12); border-color: rgba(103,223,255,.62); box-shadow: 0 0 0 11px rgba(48,201,255,.03), 0 0 38px rgba(48,201,255,.25); }
.event-card { position: absolute; width: 235px; padding: .9rem; left: 50%; transform: translateX(-50%); bottom: 76px; opacity: .3; transition: .25s; }
.event-node:nth-of-type(even) .event-card { bottom: auto; top: 76px; }
.event-node:hover .event-card, .event-node.active .event-card { opacity: 1; transform: translateX(-50%) translateY(-5px); }
.event-card b { display: block; font-size: .75rem; margin-bottom: .35rem; }
.event-card span { display: block; color: var(--muted); font-size: .62rem; line-height: 1.5; }
.continuum-now { position: absolute; right: 0; top: calc(49% - 30px); display: flex; align-items: center; gap: .5rem; color: var(--cyan); font-size: .55rem; letter-spacing: .18em; }
.continuum-now span { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.pipeline { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; gap: .7rem; align-items: center; padding: 1.1rem; border-top: 1px solid rgba(105,221,255,.1); border-bottom: 1px solid rgba(105,221,255,.1); }
.pipeline > div { display: grid; grid-template-columns: auto 1fr; column-gap: .6rem; align-items: center; }
.pipeline > div i { grid-row: 1 / 3; font-size: 1.3rem; color: var(--cyan); }
.pipeline b { font-size: .62rem; letter-spacing: .12em; }
.pipeline span { font-size: .55rem; color: var(--muted-2); }
.pipeline > i { color: rgba(115,226,255,.32); }

.memoryverse-section { background: radial-gradient(circle at 50% 50%, rgba(22,77,117,.12), transparent 58%); }
.memoryverse { position: relative; min-height: 660px; border: 1px solid rgba(105,222,255,.13); border-radius: 30px; overflow: hidden; background: linear-gradient(180deg, rgba(6,16,33,.55), rgba(2,8,18,.9)); box-shadow: inset 0 0 90px rgba(31,115,167,.08), 0 40px 120px rgba(0,0,0,.28); cursor: crosshair; }
.verse-grid, .network-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(80,194,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(80,194,255,.045) 1px, transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(circle at 50% 50%, black, transparent 78%); transform: perspective(700px) rotateX(58deg) scale(1.3) translateY(12%); transform-origin: bottom; }
.verse-path { position: absolute; width: 46%; height: 2px; background: linear-gradient(90deg, transparent, rgba(103,221,255,.3), transparent); transform-origin: left; }
.path-one { left: 12%; top: 45%; transform: rotate(13deg); }
.path-two { left: 43%; top: 50%; transform: rotate(-18deg); width: 38%; }
.verse-orb { position: absolute; z-index: 8; left: 50%; top: 50%; width: 24px; height: 24px; transform: translate(-50%,-50%); border: 1px solid rgba(134,229,255,.85); border-radius: 50%; pointer-events: none; transition: opacity .2s; box-shadow: 0 0 20px rgba(65,213,255,.38); }
.verse-orb span { position: absolute; inset: 7px; border-radius: 50%; background: white; box-shadow: 0 0 10px var(--cyan); }
.memory-beacon { position: absolute; z-index: 6; width: 70px; height: 70px; border-radius: 50%; border: 1px solid rgba(96,217,255,.24); background: radial-gradient(circle, rgba(55,181,237,.14), rgba(4,16,31,.84) 58%); color: var(--cyan); cursor: pointer; box-shadow: 0 0 0 9px rgba(45,187,255,.018), 0 0 28px rgba(45,187,255,.1); transition: .25s ease; }
.memory-beacon::after { content: ""; position: absolute; inset: -11px; border: 1px solid rgba(101,221,255,.11); border-radius: 50%; animation: beacon 2.8s ease-out infinite; }
.memory-beacon i { display: block; font-size: 1.4rem; }
.memory-beacon span { font-size: .48rem; letter-spacing: .08em; color: #a2bbc9; }
.memory-beacon:hover, .memory-beacon:focus-visible { outline: none; transform: scale(1.16); border-color: rgba(118,232,255,.65); box-shadow: 0 0 0 12px rgba(45,187,255,.03), 0 0 45px rgba(45,187,255,.24); }
.beacon-one { left: 12%; top: 28%; }.beacon-two { left: 32%; top: 56%; }.beacon-three { left: 57%; top: 29%; }.beacon-four { left: 78%; top: 55%; }.beacon-five { left: 67%; top: 77%; }
.memory-preview { position: absolute; z-index: 5; right: 3%; top: 4%; width: min(360px, 35%); padding: 1rem; transition: .25s ease; }
.memory-preview.active { border-color: rgba(104,224,255,.38); box-shadow: var(--shadow), 0 0 55px rgba(58,191,255,.12); }
.memory-preview header { display: flex; justify-content: space-between; color: var(--cyan); font-size: .56rem; letter-spacing: .14em; }
.preview-media { position: relative; height: 150px; display: grid; place-items: center; margin: .9rem 0; border-radius: 14px; overflow: hidden; background: radial-gradient(circle at 50% 70%, rgba(43,124,160,.24), transparent 45%), linear-gradient(140deg, #071525, #081a2d 45%, #050b15); }
.preview-media::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(105,223,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(105,223,255,.04) 1px, transparent 1px); background-size: 20px 20px; }
.preview-media i { font-size: 2.6rem; color: rgba(135,235,255,.58); z-index: 2; }
.preview-scan { position: absolute; z-index: 3; left: 0; right: 0; height: 1px; top: 0; background: linear-gradient(90deg, transparent, var(--cyan), transparent); box-shadow: 0 0 14px var(--cyan); animation: scan 3s linear infinite; }
.memory-preview h3 { font-size: 1.1rem; margin: .2rem 0 .45rem; }
.memory-preview p { color: var(--muted); font-size: .72rem; line-height: 1.55; min-height: 3.2em; }
.verse-instruction { position: absolute; left: 22px; bottom: 19px; color: #69859b; letter-spacing: .12em; font-size: .55rem; display: flex; gap: .45rem; align-items: center; }
.verse-instruction i { color: var(--cyan); }

.echo-section { min-height: 960px; }
.echo-console { margin-top: 4rem; border: 1px solid rgba(100,218,255,.17); border-radius: 26px; padding: 1rem; background: rgba(3,10,22,.62); box-shadow: 0 35px 120px rgba(0,0,0,.35); }
.echo-search { height: 62px; display: flex; align-items: center; gap: .8rem; padding: 0 1rem; border: 1px solid rgba(110,224,255,.22); border-radius: 15px; background: rgba(5,18,35,.75); color: #c8dce8; }
.echo-search i { color: var(--cyan); font-size: 1.25rem; }
.echo-search span { flex: 1; font-size: .82rem; }
kbd { color: #708b9f; font-size: .54rem; border: 1px solid rgba(255,255,255,.12); border-radius: 5px; padding: .25rem .4rem; background: rgba(255,255,255,.03); }
.echo-result-grid { display: grid; grid-template-columns: 235px 1fr 240px; gap: 1rem; margin-top: 1rem; }
.source-list { display: flex; flex-direction: column; gap: .5rem; }
.source { display: grid; grid-template-columns: auto 1fr; gap: .7rem; text-align: left; padding: .8rem; border: 1px solid transparent; border-radius: 12px; color: #93a9bb; background: transparent; cursor: pointer; }
.source i { font-size: 1.2rem; color: #718da2; margin-top: .1rem; }
.source span { display: flex; flex-direction: column; gap: .25rem; }
.source b { color: #a9bfce; font-size: .7rem; }
.source small { color: #5f788d; font-size: .52rem; }
.source.active { border-color: rgba(111,226,255,.22); background: rgba(62,179,223,.055); }
.source.active i, .source.active b { color: var(--cyan); }
.transcript-panel, .intelligence-panel { border: 1px solid rgba(255,255,255,.07); border-radius: 16px; background: rgba(7,15,29,.58); padding: 1rem; }
.audio-head { display: flex; align-items: center; gap: .7rem; }
.round-button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(100,221,255,.28); border-radius: 50%; background: rgba(61,188,239,.08); color: var(--cyan); cursor: pointer; }
.audio-head > div { display: flex; flex-direction: column; gap: .2rem; }
.audio-head b { font-size: .65rem; }.audio-head span { color: #648095; font-size: .48rem; letter-spacing: .1em; }
.confidence { margin-left: auto; text-align: right; }.confidence b { color: var(--green); }
.audio-wave { position: relative; height: 56px; margin: .8rem 0; overflow: hidden; background: repeating-linear-gradient(90deg, transparent 0 3px, rgba(109,225,255,.58) 4px 5px, transparent 6px 9px); mask-image: linear-gradient(180deg, transparent, black 20%, black 80%, transparent); }
.audio-wave::after { content: ""; position: absolute; left: 64%; top: 0; bottom: 0; width: 1px; background: white; box-shadow: 0 0 12px var(--cyan); }
.transcript-lines { display: grid; gap: .55rem; }
.transcript-lines p { margin: 0; padding: .55rem .7rem; color: #9eb4c4; font-size: .74rem; line-height: 1.5; border-left: 1px solid transparent; }
.transcript-lines time { display: inline-block; width: 50px; color: #5d788c; font-size: .55rem; }
.transcript-lines p.hit { color: #e2f3fa; background: rgba(72,190,233,.06); border-left-color: var(--cyan); }
mark { color: var(--cyan); background: transparent; font-weight: 750; }
.evidence-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.chip-button, .evidence-button { border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.025); color: #8da5b7; border-radius: 8px; padding: .5rem .65rem; font-size: .53rem; letter-spacing: .1em; cursor: pointer; }
.chip-button:hover, .evidence-button:hover { color: var(--cyan); border-color: rgba(103,222,255,.25); }
.intelligence-panel { align-self: stretch; }
.intel-head { display: flex; gap: .5rem; color: var(--cyan); font-size: .58rem; letter-spacing: .12em; }
.intel-head i { font-size: 1rem; }
.intelligence-panel dl { display: grid; gap: .75rem; margin: 1.2rem 0; }
.intelligence-panel dl div { padding-bottom: .65rem; border-bottom: 1px solid rgba(255,255,255,.055); }
.intelligence-panel dt { color: #5f788d; font-size: .52rem; text-transform: uppercase; letter-spacing: .1em; }
.intelligence-panel dd { margin: .25rem 0 0; color: #cde0eb; font-size: .7rem; }
.evidence-button { width: 100%; color: var(--cyan); }

.telemetry-section { background: radial-gradient(circle at 75% 35%, rgba(68,53,165,.12), transparent 34rem); }
.telemetry-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: .8rem; }
.telemetry-card { min-height: 170px; padding: 1rem; }
.telemetry-card.primary { grid-row: span 2; min-height: 350px; }
.telemetry-card.oddity { grid-column: span 2; }
.telemetry-card header { display: flex; gap: .5rem; align-items: center; color: #88a3b6; font-size: .54rem; letter-spacing: .12em; }
.telemetry-card header i { color: var(--cyan); font-size: 1.05rem; }.telemetry-card header small { margin-left: auto; color: #587287; }
.telemetry-card > strong { display: block; font-size: clamp(1.4rem, 2.5vw, 2.5rem); letter-spacing: -.04em; margin-top: 1rem; }
.telemetry-card > small { display: block; margin-top: .5rem; color: var(--muted-2); font-size: .58rem; line-height: 1.5; }
.telemetry-card > p { color: #a4b8c7; line-height: 1.55; font-size: .78rem; }
.telemetry-card.warning header i { color: var(--gold); }.telemetry-card.warning > strong { color: var(--gold); }
.life-gauge { position: relative; width: 180px; height: 180px; margin: 1.4rem auto .7rem; }
.life-gauge svg { width: 100%; transform: rotate(-90deg); }.life-gauge circle { fill: none; stroke: rgba(255,255,255,.06); stroke-width: 8; }.life-gauge circle.meter { stroke: url(#none); stroke: var(--cyan); stroke-linecap: round; stroke-dasharray: 434; stroke-dashoffset: 95; filter: drop-shadow(0 0 7px rgba(77,212,255,.4)); }
.life-gauge > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }.life-gauge b { font-size: 3.2rem; letter-spacing: -.07em; }.life-gauge span { color: #648195; font-size: .52rem; letter-spacing: .12em; }
.primary > p { text-align: center; color: #6f899c; font-size: .66rem; }
.statify-event { margin-top: 2rem; display: grid; grid-template-columns: 220px 1fr; gap: 1rem; position: relative; align-items: center; padding: 1.4rem; border: 1px solid rgba(104,222,255,.09); border-radius: 24px; background: rgba(3,10,21,.48); }
.event-source { padding: 1rem; display: flex; gap: .8rem; align-items: center; z-index: 2; }
.event-source > i { font-size: 2rem; color: var(--cyan); }.event-source div { display: flex; flex-direction: column; gap: .2rem; }.event-source span { color: #617d91; font-size: .5rem; }.event-source b { font-size: .85rem; }.event-source small { color: var(--muted); font-size: .6rem; }
.event-dimensions { display: flex; flex-wrap: wrap; gap: .5rem; }.event-dimensions span { display: flex; gap: .4rem; align-items: center; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); color: #9db2c1; border-radius: 999px; padding: .55rem .7rem; font-size: .6rem; }.event-dimensions i { color: var(--cyan); }
.discovery-strip { grid-column: 1 / -1; display: flex; gap: .8rem; align-items: center; border-top: 1px solid rgba(108,221,255,.08); padding-top: 1rem; }.discovery-strip i { font-size: 1.5rem; color: var(--violet); }.discovery-strip div { display: flex; flex-direction: column; gap: .25rem; }.discovery-strip span { color: #796fa4; font-size: .5rem; letter-spacing: .12em; }.discovery-strip b { font-size: .72rem; color: #bbc9d4; }

.quest-section { min-height: 900px; }
.quest-board { display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: .8rem; margin-top: 4rem; }
.quest-card { min-height: 220px; padding: 1.1rem; display: flex; flex-direction: column; }
.quest-card.main-quest { grid-row: span 2; min-height: 455px; }
.quest-card.safety { grid-column: span 2; }
.quest-card header { display: flex; justify-content: space-between; color: var(--cyan); font-size: .54rem; letter-spacing: .14em; }.quest-card header i { font-size: 1.2rem; }
.quest-card h3 { margin: auto 0 .6rem; font-size: clamp(1.1rem, 1.8vw, 1.65rem); letter-spacing: -.03em; }.quest-card p { color: var(--muted); line-height: 1.55; font-size: .7rem; }
.quest-card footer { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; padding-top: .7rem; border-top: 1px solid rgba(255,255,255,.06); font-size: .56rem; }.quest-card footer b { color: var(--cyan); }.quest-card footer span { color: #5d788c; }
.quest-progress { height: 3px; background: rgba(255,255,255,.06); margin: 1rem 0; overflow: hidden; }.quest-progress span { display: block; width: 38%; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--violet)); box-shadow: 0 0 14px rgba(73,205,255,.45); }
.main-quest::before { background: radial-gradient(circle at 15% 15%, rgba(53,203,255,.1), transparent 32%); transform: none; }.safety header i { color: var(--green); }.safety header span { color: var(--green); }

.affinity-section { background: radial-gradient(circle at 20% 40%, rgba(38,94,170,.11), transparent 34rem); }
.affinity-layout { display: grid; grid-template-columns: .85fr 1fr 1.2fr; gap: .8rem; align-items: stretch; }
.affinity-radar { min-height: 380px; padding: 1.2rem; display: grid; place-content: center; text-align: center; }
.radar { position: relative; width: 230px; height: 230px; border: 1px solid rgba(98,219,255,.18); border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 44px, rgba(100,221,255,.08) 45px 46px), linear-gradient(90deg, transparent 49.7%, rgba(100,221,255,.08) 50%, transparent 50.3%), linear-gradient(0deg, transparent 49.7%, rgba(100,221,255,.08) 50%, transparent 50.3%); overflow: hidden; }
.radar .sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(103,222,255,.18), transparent 26%, transparent); animation: spin 4s linear infinite; }
.ping { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 13px var(--cyan); }.p1{left:32%;top:28%}.p2{left:68%;top:39%}.p3{left:58%;top:73%}.p4{left:23%;top:64%}
.radar-copy { display: flex; flex-direction: column; gap: .3rem; margin-top: 1rem; }.radar-copy span { color: var(--cyan); font-size: .52rem; letter-spacing: .14em; }.radar-copy b { font-size: 1rem; }.radar-copy small { color: var(--muted-2); font-size: .58rem; }
.peer-list { display: grid; gap: .8rem; }.peer { min-height: 115px; padding: .9rem; display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; }.synthetic-avatar { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; border: 1px solid rgba(115,224,255,.16); background: radial-gradient(circle at 30% 25%, rgba(116,224,255,.3), rgba(15,35,62,.65)); }.synthetic-avatar i { font-size: 1.45rem; color: #c8f4ff; }.avatar-b{background:radial-gradient(circle at 30% 25%,rgba(134,103,255,.32),rgba(24,27,65,.7))}.avatar-c{background:radial-gradient(circle at 30% 25%,rgba(101,230,189,.24),rgba(12,45,47,.7))}
.peer div:nth-child(2) { display:flex; flex-direction:column; gap:.25rem}.peer b{font-size:.78rem}.peer span{font-size:.6rem;color:var(--muted)}.peer small{font-size:.48rem;color:#557084;letter-spacing:.1em}
.public-render { padding: 1rem; min-height: 380px; }.public-render header { display:flex;align-items:center;gap:.5rem;color:#8ba5b7;font-size:.53rem;letter-spacing:.12em}.public-render header i{color:var(--cyan);font-size:1rem}.public-render header small{margin-left:auto;color:#5d7589}
.render-scene { position:relative;height:245px;margin:.9rem 0;border-radius:15px;overflow:hidden;background:linear-gradient(180deg,#071a2d 0%,#133851 50%,#091522 100%)}.render-scene::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 24%,rgba(138,222,255,.18),transparent 20%),linear-gradient(135deg,transparent 40%,rgba(129,100,255,.12));}.render-sun{position:absolute;width:42px;height:42px;border-radius:50%;right:22%;top:20%;background:rgba(167,234,255,.75);box-shadow:0 0 35px rgba(104,219,255,.45)}.render-ridge{position:absolute;left:-5%;right:-5%;height:52%;bottom:-13%;background:#07101a;clip-path:polygon(0 70%,14% 48%,28% 63%,42% 27%,58% 57%,74% 21%,100% 61%,100% 100%,0 100%)}.render-figure{position:absolute;left:48%;bottom:23%;width:8px;height:34px;border-radius:10px;background:#bbf2ff;box-shadow:0 0 15px rgba(109,224,255,.4)}.render-meta{display:flex;flex-direction:column;gap:.25rem}.render-meta b{font-size:.75rem}.render-meta span{font-size:.58rem;color:var(--muted)}

.network-section { min-height: 930px; }
.agent-network { position: relative; height: 560px; margin-top: 2.5rem; border: 1px solid rgba(104,221,255,.11); border-radius: 28px; overflow: hidden; background: rgba(3,10,21,.5); }
.agent-core { position: absolute; z-index: 4; width: 150px; height: 150px; border: 1px solid rgba(101,222,255,.18); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; background: radial-gradient(circle, rgba(42,160,211,.13), rgba(4,15,30,.88) 64%); box-shadow: 0 0 42px rgba(46,187,242,.09); }
.agent-core .mini-core { width: 27px; height: 27px; margin-bottom: .25rem; border: 1px solid var(--cyan); border-radius: 50%; box-shadow: inset 0 0 10px rgba(87,219,255,.24),0 0 16px rgba(63,203,255,.25); position:relative}.agent-core .mini-core::after{content:"";position:absolute;inset:8px;border-radius:50%;background:white;box-shadow:0 0 9px var(--cyan)}.agent-core b{font-size:.7rem;letter-spacing:.12em}.agent-core small{font-size:.48rem;color:#5f7a8f;letter-spacing:.08em}
.node-you{left:50%;top:50%;transform:translate(-50%,-50%);width:190px;height:190px;border-color:rgba(104,226,255,.38)}.node-friend{left:11%;top:10%}.node-family{right:11%;top:10%}.node-expert{right:8%;bottom:8%}
.network-lines { position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible}.network-lines path{fill:none;stroke:rgba(103,222,255,.18);stroke-width:1.5;stroke-dasharray:5 7;animation:dash 12s linear infinite}.network-lines path:nth-child(2){stroke:rgba(132,102,255,.22)}.network-lines path:nth-child(3){stroke:rgba(101,230,189,.2)}
.consent-packet{position:absolute;z-index:5;display:flex;align-items:center;gap:.4rem;color:#8eacbd;font-size:.48rem;letter-spacing:.1em;padding:.45rem .55rem;border:1px solid rgba(100,220,255,.16);border-radius:999px;background:rgba(4,14,28,.88);box-shadow:0 0 20px rgba(50,187,235,.08)}.consent-packet i{color:var(--green)}.packet-one{left:26%;top:29%;animation:packetA 5s ease-in-out infinite}.packet-two{right:27%;top:29%;animation:packetB 5.5s ease-in-out infinite}.packet-three{right:28%;bottom:26%;animation:packetC 6s ease-in-out infinite}

.vault-section { background: radial-gradient(circle at 50% 55%, rgba(57,54,149,.12), transparent 38rem); }
.vault-interface { position:relative;max-width:1050px;margin:0 auto;border:1px solid rgba(100,220,255,.11);border-radius:28px;padding:2rem;background:rgba(3,10,21,.48);overflow:hidden}.vault-rings{position:absolute;right:-40px;top:-70px;width:300px;height:300px;display:grid;place-items:center;opacity:.55}.vr{position:absolute;border:1px solid rgba(100,220,255,.18);border-radius:50%}.vr1{inset:10%;animation:spin 18s linear infinite}.vr2{inset:24%;border-color:rgba(132,103,255,.23);animation:spinReverse 14s linear infinite}.vr3{inset:38%}.vr4{inset:46%;box-shadow:0 0 20px rgba(74,204,255,.2)}.vault-rings>i{font-size:2.1rem;color:var(--cyan);filter:drop-shadow(0 0 12px rgba(87,219,255,.4))}
.audience-tabs{position:relative;z-index:2;display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}.audience-tab{border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.025);color:#758fa2;border-radius:9px;padding:.55rem .75rem;font-size:.53rem;letter-spacing:.1em;cursor:pointer}.audience-tab.active{color:var(--cyan);border-color:rgba(105,224,255,.3);background:rgba(69,193,234,.06)}
.audience-preview{position:relative;z-index:2;display:grid;grid-template-columns:220px 1fr 210px;gap:1.2rem;align-items:center;padding:1rem}.preview-image{height:160px;border-radius:14px;display:grid;place-content:center;text-align:center;gap:.6rem;border:1px solid rgba(109,222,255,.12);background:radial-gradient(circle at 50% 45%,rgba(67,178,221,.16),rgba(4,14,28,.9))}.preview-image i{font-size:2.6rem;color:var(--cyan)}.preview-image span{font-size:.5rem;color:#637e92;letter-spacing:.12em}.preview-image.rendered{background:linear-gradient(145deg,rgba(79,54,155,.18),rgba(12,34,53,.8))}.preview-image.rendered i{color:#a798ff}
.audience-copy>span{color:var(--cyan);font-size:.5rem;letter-spacing:.12em}.audience-copy h3{font-size:1.35rem;margin:.4rem 0}.audience-copy p{color:var(--muted);font-size:.68rem;line-height:1.55}.permission-list{display:grid;gap:.55rem}.permission-list span{color:#849fb1;font-size:.58rem}.permission-list i{color:var(--green);margin-right:.35rem}.permission-list .denied i{color:#65798a}.vault-rule{position:relative;z-index:2;margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:.6rem;font-size:.55rem;letter-spacing:.1em}.vault-rule i{font-size:1.2rem;color:var(--cyan)}.vault-rule span{color:var(--cyan)}.vault-rule b{color:#6c8497;font-weight:500}

.horizon-section { min-height: 100svh; display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding-bottom:120px }.final-horizon .planet{right:50%;transform:translateX(50%);bottom:-75%;width:min(1300px,120vw);opacity:.62}.final-horizon .atmosphere{right:50%;transform:translateX(50%);bottom:-76%;width:min(1340px,123vw)}.final-content{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center}.final-content h2{font-size:clamp(3rem,7vw,7rem)}.final-content p{margin:.4rem auto 1.6rem}.final-core{width:115px;height:115px;margin-bottom:2rem}.site-footer{position:absolute;left:max(24px,calc((100vw - var(--max))/2));right:max(24px,calc((100vw - var(--max))/2));bottom:24px;z-index:5;display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:end;padding-top:1rem;border-top:1px solid rgba(102,222,255,.11);text-align:left}.site-footer>div:first-child{display:flex;flex-direction:column;gap:.25rem}.site-footer small{color:#5f788c;font-size:.56rem}.footer-stats{display:flex;gap:1rem;color:#577085;font-size:.5rem;letter-spacing:.1em}.footer-stats b{color:#8aa5b7}.site-footer nav{justify-self:end;display:flex;flex-wrap:wrap;gap:.7rem}.site-footer nav a,.site-footer nav button{border:0;background:transparent;color:#668096;font-size:.5rem;letter-spacing:.1em;cursor:pointer;padding:0}.site-footer nav a:hover,.site-footer nav button:hover{color:var(--cyan)}

.orbit-shell { position: fixed; inset: 0; z-index: 500; visibility: hidden; opacity: 0; transition: opacity .3s, visibility .3s; }
.orbit-shell.open { visibility: visible; opacity: 1; }
.orbit-backdrop { position:absolute;inset:0;border:0;background:rgba(1,5,12,.82);backdrop-filter:blur(12px);cursor:default }.orbit-nav{position:absolute;left:50%;top:50%;width:min(680px,92vw);aspect-ratio:1;transform:translate(-50%,-50%) scale(.82);transition:transform .45s cubic-bezier(.2,.8,.2,1);border:1px solid rgba(102,222,255,.08);border-radius:50%;background:radial-gradient(circle,rgba(19,68,98,.14),rgba(2,8,18,.35) 55%,transparent 70%)}.orbit-shell.open .orbit-nav{transform:translate(-50%,-50%) scale(1)}.orbit-nav::before,.orbit-nav::after{content:"";position:absolute;inset:16%;border:1px solid rgba(99,220,255,.12);border-radius:50%;animation:spin 30s linear infinite}.orbit-nav::after{inset:31%;border-color:rgba(134,103,255,.14);animation:spinReverse 21s linear infinite}.orbit-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;width:120px;height:120px}.orbit-item{position:absolute;left:50%;top:50%;z-index:5;width:112px;height:64px;margin-left:-56px;margin-top:-32px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;border:1px solid rgba(99,220,255,.15);border-radius:14px;background:rgba(4,14,28,.86);color:#7894a8;transform:rotate(calc(var(--i) * 40deg)) translateY(-285px) rotate(calc(var(--i) * -40deg));font-size:.54rem;letter-spacing:.08em;transition:.22s ease}.orbit-item i{font-size:1.25rem;color:var(--cyan)}.orbit-item:hover,.orbit-item:focus-visible{outline:none;color:white;border-color:rgba(105,225,255,.38);box-shadow:0 0 28px rgba(55,193,246,.13);transform:rotate(calc(var(--i) * 40deg)) translateY(-292px) rotate(calc(var(--i) * -40deg)) scale(1.06)}

.transmission-modal { position:fixed;inset:0;z-index:700;visibility:hidden;opacity:0;transition:.3s}.transmission-modal.open{visibility:visible;opacity:1}.modal-backdrop{position:absolute;inset:0;border:0;background:rgba(1,5,12,.84);backdrop-filter:blur(12px)}.transmission-panel{position:absolute;left:50%;top:50%;width:min(760px,calc(100vw - 32px));max-height:min(820px,calc(100vh - 32px));overflow:auto;transform:translate(-50%,-46%) scale(.96);padding:2rem;border:1px solid rgba(104,223,255,.2);border-radius:24px;background:linear-gradient(145deg,rgba(7,20,40,.96),rgba(3,9,20,.98));box-shadow:0 40px 140px rgba(0,0,0,.65),0 0 60px rgba(55,185,238,.08);transition:.35s cubic-bezier(.2,.8,.2,1)}.transmission-modal.open .transmission-panel{transform:translate(-50%,-50%) scale(1)}.modal-close{position:absolute;right:1rem;top:1rem;width:38px;height:38px;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:rgba(255,255,255,.025);color:#7893a7;cursor:pointer}.transmission-panel h2{font-size:clamp(2.3rem,5vw,4.6rem);letter-spacing:-.05em;margin:.7rem 0}.transmission-panel>p{color:var(--muted);font-size:.78rem;line-height:1.6}.transmission-panel form{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:1.5rem}.transmission-panel label{display:flex;flex-direction:column;gap:.4rem}.transmission-panel label.wide,.form-footer.wide{grid-column:1/-1}.transmission-panel label>span{color:#6f8b9e;font-size:.5rem;letter-spacing:.12em}.transmission-panel input,.transmission-panel textarea{width:100%;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:rgba(255,255,255,.025);color:white;padding:.8rem;outline:none;resize:vertical}.transmission-panel input:focus,.transmission-panel textarea:focus{border-color:rgba(105,224,255,.38);box-shadow:0 0 0 3px rgba(77,205,255,.05)}.honeypot{position:absolute!important;left:-9999px!important}.form-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.3rem}.form-footer>span{color:#5e788c;font-size:.52rem;letter-spacing:.08em}.form-footer>span.success{color:var(--green)}.form-footer>span.error{color:var(--danger)}

.diagnostics{position:fixed;z-index:850;right:18px;bottom:18px;width:min(430px,calc(100vw - 36px));padding:1rem;border:1px solid rgba(103,223,255,.22);border-radius:16px;background:rgba(2,9,20,.94);backdrop-filter:blur(14px);box-shadow:0 25px 90px rgba(0,0,0,.55);transform:translateY(130%);opacity:0;transition:.35s ease}.diagnostics.open{transform:translateY(0);opacity:1}.diag-head{display:flex;justify-content:space-between;align-items:center;color:var(--cyan);font-size:.58rem;letter-spacing:.14em}.diag-head button{border:0;background:transparent;color:#718a9e;cursor:pointer}.diag-grid{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin:1rem 0}.diag-grid div{display:flex;flex-direction:column;gap:.2rem;border:1px solid rgba(255,255,255,.06);border-radius:9px;padding:.7rem}.diag-grid span{font-size:.47rem;color:#617a8e;letter-spacing:.1em}.diag-grid b{font-size:.67rem;color:#b7cedc}.diagnostics p{color:#5e788c;font-size:.56rem;line-height:1.5;margin:0}
.echo-palette{position:fixed;z-index:860;left:50%;top:18%;width:min(620px,calc(100vw - 32px));transform:translate(-50%,-25px);padding:.7rem;border:1px solid rgba(105,224,255,.24);border-radius:14px;background:rgba(3,12,25,.97);box-shadow:0 35px 100px rgba(0,0,0,.58);opacity:0;visibility:hidden;transition:.25s}.echo-palette.open{opacity:1;visibility:visible;transform:translate(-50%,0)}.echo-palette>div{display:flex;align-items:center;gap:.5rem;color:var(--cyan);font-size:.52rem;letter-spacing:.12em}.echo-palette>div button{margin-left:auto;border:0;background:transparent;color:#6f899d;cursor:pointer}.echo-palette input{width:100%;margin:.7rem 0;border:0;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);background:transparent;color:white;padding:.9rem .2rem;outline:none}.echo-palette small{color:#587185;font-size:.5rem}
.achievement{position:fixed;z-index:900;left:50%;bottom:28px;transform:translate(-50%,140%);display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;border:1px solid rgba(105,224,255,.28);border-radius:12px;background:rgba(3,13,27,.95);box-shadow:0 20px 70px rgba(0,0,0,.5),0 0 35px rgba(54,192,244,.08);transition:.45s cubic-bezier(.2,.8,.2,1)}.achievement.show{transform:translate(-50%,0)}.achievement>i{font-size:1.5rem;color:var(--cyan)}.achievement div{display:flex;flex-direction:column;gap:.2rem}.achievement span{font-size:.46rem;color:#638095;letter-spacing:.12em}.achievement b{font-size:.68rem;letter-spacing:.08em}

body.overclock { --cyan: #a7f7ff; --violet: #a575ff; }
body.overclock .holo-card { border-color: rgba(155,236,255,.32); }
body.overclock #starfield { filter: brightness(1.35) saturate(1.25); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinReverse { to { transform: rotate(-360deg); } }
@keyframes coreBreath { 0%,100%{transform:scale(.78);opacity:.7}50%{transform:scale(1.12);opacity:1} }
@keyframes float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)} }
@keyframes waveShift { to { background-position-x: 48px; } }
@keyframes pulseDot { 0%,100%{opacity:.45}50%{opacity:1} }
@keyframes bob { 0%,100%{translate:0 0}50%{translate:0 6px} }
@keyframes gridBoot { from{opacity:0;transform:scale(1.2)}to{opacity:1;transform:scale(1)} }
@keyframes bootCore { from{opacity:0;transform:scale(.5);filter:blur(15px)}to{opacity:1;transform:scale(1);filter:blur(0)} }
@keyframes beacon { 0%{transform:scale(.72);opacity:.8}100%{transform:scale(1.5);opacity:0} }
@keyframes scan { from{top:0}to{top:100%} }
@keyframes dash { to { stroke-dashoffset: -120; } }
@keyframes packetA { 0%,100%{transform:translate(0,0)}50%{transform:translate(120px,70px)} }
@keyframes packetB { 0%,100%{transform:translate(0,0)}50%{transform:translate(-115px,75px)} }
@keyframes packetC { 0%,100%{transform:translate(0,0)}50%{transform:translate(-120px,-65px)} }

@media (max-width: 1080px) {
    :root { --max: 930px; }
    .hero { grid-template-columns: 1fr; padding-top: 145px; }
    .hero-copy { max-width: 760px; }
    .hero-system { min-height: 590px; }
    .planet, .atmosphere { right: -40%; }
    .echo-result-grid { grid-template-columns: 190px 1fr; }
    .intelligence-panel { grid-column: 1 / -1; display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center}.intelligence-panel dl{grid-template-columns:repeat(4,1fr);margin:0}.intelligence-panel dl div{border:0;padding:0}.evidence-button{width:auto}
    .telemetry-grid { grid-template-columns: 1.3fr 1fr 1fr; }.telemetry-card.oddity{grid-column:span 2}
    .quest-board { grid-template-columns: 1fr 1fr; }.quest-card.main-quest{grid-row:auto;grid-column:span 2;min-height:320px}.quest-card.safety{grid-column:span 2}
    .affinity-layout { grid-template-columns: 1fr 1.25fr; }.public-render{grid-column:1/-1}.affinity-radar{min-height:340px}
    .audience-preview { grid-template-columns:180px 1fr }.permission-list{grid-column:1/-1;grid-template-columns:repeat(4,1fr)}
}

@media (max-width: 760px) {
    body::after, .cursor-light { display:none; }
    .topbar { top: 8px; width: calc(100% - 16px); grid-template-columns:1fr auto; }
    .topbar-center, .icon-control span, .brand-build { display:none; }
    .scene { padding-left: 18px; padding-right: 18px; padding-top: 100px; }
    .hero { padding-top: 120px; min-height: auto; }
    .hero-copy h1 { font-size: clamp(4rem, 20vw, 6.5rem); }
    .hero-actions { align-items:stretch;flex-direction:column; }.plasma-button,.ghost-button{width:100%}
    .hero-meta { gap:1rem;justify-content:space-between }.hero-meta span{font-size:.48rem}
    .hero-system { min-height: 530px; margin-top:1.5rem }.hero-core-zone{width:240px;height:240px}.memory-core{width:135px;height:135px}.float-panel{width:210px}.float-a{top:1%;left:-5%}.float-b{right:-6%;top:22%}.float-c{right:2%;bottom:0}.core-label{bottom:5px}
    .planet { width: 150vw; right: -65%; bottom: -43%; }.atmosphere{width:155vw;right:-67%;bottom:-44%}
    .section-heading.centered { margin-bottom:2.2rem }.section-heading h2,.final-content h2{font-size:clamp(2.7rem,13vw,5rem)}
    .continuum-section { min-height:820px }.continuum-visual{height:480px;margin:3rem 0 2rem}.continuum-line{left:50%;right:auto;top:4%;bottom:4%;width:2px;height:auto;background:linear-gradient(180deg,transparent,rgba(106,224,255,.42),transparent)}.continuum-line::before{display:none}.event-node{left:50%!important;top:auto!important;transform:translate(-50%,-50%)}.event-a{top:14%!important}.event-b{top:36%!important}.event-c{top:59%!important}.event-d{top:82%!important}.event-card{left:76px;bottom:auto!important;top:50%!important;transform:translateY(-50%);width:min(230px,60vw)}.event-node:nth-of-type(even) .event-card{left:auto;right:76px;top:50%!important;transform:translateY(-50%)}.event-node:hover .event-card,.event-node.active .event-card{transform:translateY(-50%)}.continuum-now{right:calc(50% - 20px);top:auto;bottom:0}.pipeline{grid-template-columns:1fr 1fr;gap:.5rem}.pipeline>i{display:none}.pipeline>div{border:1px solid rgba(255,255,255,.05);border-radius:10px;padding:.6rem}
    .memoryverse { min-height: 650px }.memory-preview{right:4%;left:4%;top:4%;width:auto}.preview-media{height:120px}.beacon-one{left:10%;top:52%}.beacon-two{left:34%;top:72%}.beacon-three{left:62%;top:48%}.beacon-four{left:75%;top:75%}.beacon-five{left:50%;top:88%;display:none}.memory-beacon{width:58px;height:58px}
    .echo-console{padding:.6rem}.echo-search{height:auto;min-height:58px}.echo-search span{font-size:.7rem}.echo-result-grid{grid-template-columns:1fr}.source-list{display:grid;grid-template-columns:repeat(3,1fr)}.source{display:flex;flex-direction:column;gap:.3rem;padding:.6rem}.source i{font-size:1rem}.source small{display:none}.intelligence-panel{display:block}.intelligence-panel dl{grid-template-columns:1fr 1fr;display:grid;margin:1rem 0}.evidence-button{width:100%}
    .telemetry-grid { grid-template-columns:1fr 1fr }.telemetry-card.primary{grid-column:1/-1;grid-row:auto;min-height:330px}.telemetry-card.oddity{grid-column:1/-1}.telemetry-card{min-height:155px}.statify-event{grid-template-columns:1fr}.event-dimensions{align-items:stretch}.discovery-strip{grid-column:auto}
    .quest-board { grid-template-columns:1fr }.quest-card.main-quest,.quest-card.safety{grid-column:auto}.quest-card.main-quest{min-height:300px}
    .affinity-layout { grid-template-columns:1fr }.public-render{grid-column:auto}.affinity-radar{min-height:320px}.radar{width:205px;height:205px}
    .agent-network{height:620px}.node-you{top:49%;width:160px;height:160px}.node-friend{left:3%;top:8%;width:120px;height:120px}.node-family{right:3%;top:8%;width:120px;height:120px}.node-expert{right:7%;bottom:7%;width:120px;height:120px}.network-lines{display:none}.consent-packet{font-size:.42rem}.packet-one{left:14%;top:33%;animation:none}.packet-two{right:12%;top:33%;animation:none}.packet-three{right:21%;bottom:31%;animation:none}
    .vault-interface{padding:1rem}.vault-rings{opacity:.25}.audience-preview{grid-template-columns:1fr}.preview-image{height:130px}.permission-list{grid-template-columns:1fr 1fr}.vault-rule{align-items:flex-start;flex-wrap:wrap}
    .site-footer{grid-template-columns:1fr;text-align:center;justify-items:center}.site-footer nav{justify-self:center}.footer-stats{order:3}.horizon-section{padding-bottom:180px}.final-horizon .planet{width:180vw;bottom:-52%}.final-horizon .atmosphere{width:184vw;bottom:-53%}
    .orbit-nav{width:340px}.orbit-center{width:86px;height:86px}.orbit-item{width:84px;height:52px;margin-left:-42px;margin-top:-26px;font-size:.45rem;transform:rotate(calc(var(--i) * 40deg)) translateY(-146px) rotate(calc(var(--i) * -40deg))}.orbit-item:hover,.orbit-item:focus-visible{transform:rotate(calc(var(--i) * 40deg)) translateY(-151px) rotate(calc(var(--i) * -40deg)) scale(1.04)}.orbit-item i{font-size:1rem}
    .transmission-panel{padding:1.3rem}.transmission-panel form{grid-template-columns:1fr}.transmission-panel label.wide,.form-footer.wide{grid-column:auto}.form-footer{align-items:stretch;flex-direction:column}.form-footer .plasma-button{width:100%}
}

@media (max-width: 450px) {
    .hero-system { min-height: 500px }.float-panel{width:178px;padding:.75rem}.float-panel p{font-size:.68rem}.float-b{top:27%}.hero-meta{display:grid;grid-template-columns:repeat(3,1fr)}
    .event-card{width:180px}.pipeline{grid-template-columns:1fr}
    .source-list{grid-template-columns:1fr}.source{display:grid;grid-template-columns:auto 1fr}.source small{display:block}
    .telemetry-grid{grid-template-columns:1fr}.telemetry-card.primary,.telemetry-card.oddity{grid-column:auto}.telemetry-card{min-height:140px}
    .peer{grid-template-columns:auto 1fr}.peer small{display:none}
    .permission-list{grid-template-columns:1fr}
    .orbit-nav{width:300px}.orbit-item{width:72px;height:48px;margin-left:-36px;margin-top:-24px;transform:rotate(calc(var(--i) * 40deg)) translateY(-128px) rotate(calc(var(--i) * -40deg))}.orbit-item:hover,.orbit-item:focus-visible{transform:rotate(calc(var(--i) * 40deg)) translateY(-132px) rotate(calc(var(--i) * -40deg)) scale(1.03)}
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .boot { display:none }.topbar{opacity:1;translate:0 0}.reveal{opacity:1;transform:none;filter:none}.cursor-light{display:none}
}

/* ============================================================
   GENESIS 0.2 - CINEMATIC FACE PASS
   ============================================================ */
:root { --hero-art-opacity:.72; }
body::after { content:""; position:fixed; inset:0; pointer-events:none; z-index:999; box-shadow:inset 0 0 180px rgba(0,0,0,.48); }
.topbar::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:linear-gradient(90deg,transparent,rgba(83,217,255,.34),rgba(116,87,255,.22),transparent); transform-origin:left; transform:scaleX(var(--scroll-progress,0)); }
.hero { grid-template-columns:minmax(420px,.88fr) minmax(620px,1.12fr); isolation:isolate; }
.hero-copy { max-width:720px; }
.hero-copy h1 { font-size:clamp(3.75rem,7.1vw,8.1rem); line-height:.84; margin-top:1.15rem; text-wrap:balance; }
.hero-copy h1 span { background:linear-gradient(90deg,#96ecff 0%,#70b8ff 46%,#b289ff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:0; text-shadow:0 0 36px rgba(73,174,255,.2); }
.hero-lead { max-width:670px; }
.hero-art { position:absolute; z-index:1; right:-5vw; top:7.5vh; width:min(74vw,1180px); height:min(79vh,760px); pointer-events:none; perspective:1200px; opacity:var(--hero-art-opacity); filter:saturate(1.08) contrast(1.05); mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.6) 15%,#000 34%,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0,#000 10%,#000 84%,transparent 100%); mask-composite:intersect; }
.hero-art picture,.hero-art img { width:100%; height:100%; display:block; }
.hero-art img { object-fit:cover; object-position:center; transform:rotateY(-5deg) rotateX(1deg) scale(1.035); animation:heroDrift 13s ease-in-out infinite alternate; }
.hero-art::before { content:""; position:absolute; inset:0; z-index:2; background:radial-gradient(circle at 52% 83%,rgba(49,207,255,.35),transparent 24%),linear-gradient(90deg,rgba(2,5,12,.82),transparent 27%); mix-blend-mode:screen; opacity:.62; }
.hero-art-scan { position:absolute; z-index:3; left:10%; right:8%; top:0; height:2px; background:linear-gradient(90deg,transparent,rgba(138,235,255,.8),transparent); box-shadow:0 0 22px rgba(50,206,255,.55); animation:heroScan 6.8s linear infinite; opacity:.58; }
.hero-art-vignette { position:absolute; inset:0; z-index:4; box-shadow:inset 0 0 120px #02060e; }
.hero-system { z-index:4; opacity:.82; transform:translateX(5%); }
.float-panel { background:linear-gradient(145deg,rgba(7,20,39,.77),rgba(2,7,17,.67)); border-color:rgba(102,220,255,.25); }
.memory-core { backdrop-filter:blur(4px); }
.live-ribbon { position:absolute; z-index:7; left:max(24px,calc((100vw - var(--max))/2)); right:max(24px,calc((100vw - var(--max))/2)); bottom:62px; min-height:42px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem; padding:.55rem .8rem; border:1px solid rgba(103,220,255,.13); border-radius:12px; background:linear-gradient(90deg,rgba(5,18,36,.78),rgba(6,11,27,.48)); backdrop-filter:blur(16px); box-shadow:0 10px 40px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.025); overflow:hidden; }
.live-ribbon::before { content:""; position:absolute; left:-30%; top:0; width:30%; height:1px; background:linear-gradient(90deg,transparent,var(--cyan),transparent); animation:ribbonSweep 4.5s linear infinite; }
.live-ribbon-label,.live-ribbon-time { color:#77dfff; font-size:.52rem; letter-spacing:.16em; white-space:nowrap; }
.live-ribbon-label { display:flex; align-items:center; gap:.4rem; }
.live-ribbon-label i { font-size:.95rem; }
.live-ribbon-event { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#aabfce; font-size:.58rem; letter-spacing:.1em; }
.scroll-cue { bottom:14px; }
.vision-window { position:relative; width:100%; min-height:72svh; padding:3vh max(18px,calc((100vw - 1480px)/2)) 8vh; display:grid; place-items:center; overflow:hidden; }
.vision-window::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 50%,rgba(26,119,183,.08),transparent 50%); }
.vision-window-media { position:relative; width:min(1480px,94vw); aspect-ratio:1.8/1; border-radius:28px; border:1px solid rgba(105,222,255,.18); overflow:hidden; background:#030914; box-shadow:0 70px 160px rgba(0,0,0,.55),0 0 80px rgba(32,154,232,.08),inset 0 1px rgba(255,255,255,.04); transform-style:preserve-3d; }
.vision-window-media::before { content:""; position:absolute; inset:0; z-index:3; background:linear-gradient(180deg,rgba(2,6,15,.08),rgba(2,6,15,.36)),radial-gradient(circle at 60% 38%,transparent 0 23%,rgba(2,6,15,.18) 54%,rgba(2,6,15,.72) 100%); pointer-events:none; }
.vision-window-media img { width:100%; height:100%; display:block; object-fit:contain; object-position:top center; transform:none; transition:none; }
.vision-window-media:hover img { transform:none; }
.vision-window-grid { position:absolute; inset:0; z-index:4; pointer-events:none; opacity:.12; background-image:linear-gradient(rgba(90,211,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(90,211,255,.18) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(180deg,transparent,#000 35%,#000 70%,transparent); }
.vision-window-caption { position:absolute; z-index:5; left:clamp(20px,4vw,64px); bottom:clamp(18px,4vw,58px); max-width:640px; display:flex; flex-direction:column; gap:.65rem; }
.vision-window-caption span { color:#70dfff; font-size:.58rem; letter-spacing:.18em; }
.vision-window-caption strong { font-size:clamp(1.5rem,3.4vw,3.6rem); line-height:.98; letter-spacing:-.045em; text-shadow:0 8px 40px rgba(0,0,0,.8); }
@keyframes heroDrift { from{transform:rotateY(-5deg) rotateX(1deg) scale(1.035) translate3d(0,0,0)} to{transform:rotateY(-3deg) rotateX(0deg) scale(1.055) translate3d(-12px,-8px,0)} }
@keyframes heroScan { 0%{transform:translateY(30px);opacity:0} 12%{opacity:.55} 85%{opacity:.35} 100%{transform:translateY(690px);opacity:0} }
@keyframes ribbonSweep { from{transform:translateX(0)} to{transform:translateX(440%)} }

@media (max-width:1120px) {
  .hero { grid-template-columns:1fr; align-content:center; }
  .hero-copy { max-width:760px; padding-top:4vh; }
  .hero-art { right:-20vw; top:17vh; width:105vw; height:66vh; opacity:.48; }
  .hero-system { min-height:500px; margin-top:0; transform:translateY(-2vh); }
  .live-ribbon { bottom:54px; }
}
@media (max-width:760px) {
  :root { --hero-art-opacity:.42; }
  .hero { padding-top:104px; min-height:110svh; }
  .hero-copy h1 { font-size:clamp(3.05rem,14vw,5.2rem); line-height:.87; }
  .hero-lead { max-width:94%; line-height:1.62; }
  .hero-art { left:12%; right:auto; top:28vh; width:92vw; height:62vh; mask-image:linear-gradient(180deg,transparent,#000 12%,#000 75%,transparent 100%); }
  .hero-art img { object-position:center; }
  .hero-system { min-height:430px; opacity:.75; transform:translateY(-4vh); }
  .live-ribbon { left:18px; right:18px; bottom:50px; grid-template-columns:auto 1fr; gap:.65rem; }
  .live-ribbon-time { display:none; }
  .live-ribbon-event { font-size:.5rem; }
  .vision-window { min-height:auto; padding-top:2vh; }
  .vision-window-media { width:95vw; aspect-ratio:.82/1; border-radius:20px; }
  .vision-window-media img { object-position:top center; }
  .vision-window-caption strong { font-size:clamp(1.45rem,7vw,2.4rem); }
}
@media (prefers-reduced-motion:reduce) {
  .hero-art img,.hero-art-scan,.live-ribbon::before { animation:none !important; }
}

/* ============================================================
   GENESIS 0.3 / CONTINUUM NAV + LIFE GRAMMAR
   ============================================================ */
.section-rail{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:80;display:flex;flex-direction:column;gap:7px;padding:14px 10px;border:1px solid rgba(103,207,255,.12);background:rgba(2,8,20,.44);backdrop-filter:blur(18px);border-radius:18px;box-shadow:0 0 30px rgba(0,160,255,.06)}
.section-rail a{position:relative;display:grid;grid-template-columns:26px 8px;align-items:center;gap:5px;min-height:24px;color:rgba(190,218,255,.42);text-decoration:none;font-size:9px;letter-spacing:.12em;transition:.25s ease}
.section-rail a span{font-variant-numeric:tabular-nums}
.section-rail a b{position:absolute;right:23px;opacity:0;pointer-events:none;padding:5px 8px;border:1px solid rgba(71,185,255,.18);border-radius:7px;background:rgba(2,10,24,.88);white-space:nowrap;font-size:8px;font-weight:600;color:#bde9ff;transform:translateX(5px);transition:.25s ease}
.section-rail a::after{content:"";width:6px;height:6px;border-radius:50%;background:rgba(120,184,255,.3);box-shadow:0 0 0 rgba(29,197,255,0);transition:.25s ease}
.section-rail a:hover,.section-rail a.active{color:#e9fbff}
.section-rail a:hover b,.section-rail a.active b{opacity:1;transform:translateX(0)}
.section-rail a.active::after{background:#4de1ff;box-shadow:0 0 14px rgba(29,215,255,.85)}
.rail-progress{position:absolute;right:12px;top:15px;bottom:15px;width:1px;background:rgba(75,164,255,.08);z-index:-1}
.rail-progress i{display:block;width:1px;height:0;background:linear-gradient(#36d8ff,#775dff);box-shadow:0 0 10px #3ddcff;transition:height .08s linear}

.chronos-strip{margin:0 0 14px;padding:12px 15px 9px;border:1px solid rgba(73,173,255,.13);border-radius:12px;background:linear-gradient(180deg,rgba(8,22,46,.62),rgba(4,11,28,.55));position:relative;overflow:hidden}
.chronos-strip::before{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,#1bd8ff 45%,#755bff,transparent);opacity:.5}
.chronos-head,.chronos-labels{display:flex;justify-content:space-between;align-items:center;gap:12px}
.chronos-head span{font-size:9px;letter-spacing:.15em;color:#89a8c8}.chronos-head b{font-size:11px;color:#d8f7ff;font-variant-numeric:tabular-nums}
.chronos-strip input[type=range]{width:100%;height:22px;margin:7px 0 0;accent-color:#39d8ff;background:transparent;cursor:ew-resize}
.chronos-labels span{font-size:7px;letter-spacing:.11em;color:rgba(164,194,224,.45)}

.lifegrammar-section{min-height:900px;padding-top:120px;position:relative}
.lifegrammar-section::before{content:"";position:absolute;left:-10vw;top:20%;width:50vw;height:50vw;background:radial-gradient(circle,rgba(78,59,255,.14),transparent 65%);pointer-events:none}
.lifegrammar-shell{max-width:1180px;margin:42px auto 0;display:grid;grid-template-columns:150px minmax(0,1fr) 260px;gap:14px;padding:14px;border:1px solid rgba(84,190,255,.18);border-radius:24px;background:linear-gradient(145deg,rgba(7,18,42,.82),rgba(2,7,19,.72));box-shadow:0 28px 80px rgba(0,0,0,.35),0 0 50px rgba(32,156,255,.07);transform-style:preserve-3d}
.life-selector{display:flex;flex-direction:column;gap:7px}
.life-tab{display:flex;align-items:center;gap:9px;width:100%;min-height:48px;padding:0 11px;border:1px solid rgba(75,164,255,.11);border-radius:10px;background:rgba(6,15,33,.62);color:#7793b2;font:inherit;font-size:9px;letter-spacing:.12em;text-align:left;cursor:pointer;transition:.25s ease}
.life-tab i{font-size:19px;color:#4d84c8}.life-tab:hover,.life-tab.active{color:#e9fbff;border-color:rgba(54,215,255,.5);background:linear-gradient(90deg,rgba(17,102,169,.18),rgba(94,52,181,.12));box-shadow:inset 2px 0 #33ddff,0 0 18px rgba(44,199,255,.07)}.life-tab.active i{color:#4fe7ff;filter:drop-shadow(0 0 7px rgba(44,215,255,.6))}
.life-event{min-width:0;border:1px solid rgba(69,171,255,.13);border-radius:18px;padding:22px;background:radial-gradient(circle at 50% 0,rgba(15,89,157,.16),transparent 42%),rgba(4,11,25,.55);position:relative;overflow:hidden}
.life-event::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(100,220,255,.035) 48%,transparent 61%);transform:translateX(-100%);animation:lifeSweep 7s ease-in-out infinite;pointer-events:none}@keyframes lifeSweep{0%,65%{transform:translateX(-100%)}85%,100%{transform:translateX(100%)}}
.life-event-core{display:flex;align-items:center;gap:16px;padding-bottom:17px;border-bottom:1px solid rgba(93,174,255,.11)}
.life-event-icon{display:grid;place-items:center;width:64px;height:64px;border:1px solid rgba(60,215,255,.38);border-radius:17px;background:radial-gradient(circle,rgba(58,201,255,.18),rgba(29,59,120,.06));box-shadow:0 0 27px rgba(36,177,255,.13),inset 0 0 20px rgba(62,187,255,.07)}.life-event-icon i{font-size:30px;color:#62e9ff;filter:drop-shadow(0 0 9px rgba(58,214,255,.6))}
.life-event-core small,.life-insight small,.life-actions small{display:block;margin-bottom:4px;color:#5d7f9f;font-size:8px;letter-spacing:.16em}.life-event-core h3{margin:0 0 3px;font-size:25px;color:#eefcff}.life-event-core p{margin:0;color:#7792ae;font-size:10px;letter-spacing:.08em}
.life-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:15px 0}.life-stat-grid span{padding:12px 10px;border:1px solid rgba(81,165,244,.11);border-radius:10px;background:rgba(4,11,25,.5)}.life-stat-grid small{display:block;margin-bottom:6px;color:#577895;font-size:7px;letter-spacing:.12em}.life-stat-grid b{font-size:14px;color:#dff9ff;font-variant-numeric:tabular-nums}
.life-insight{display:flex;gap:12px;align-items:center;padding:13px 14px;border:1px solid rgba(76,215,255,.15);border-radius:11px;background:linear-gradient(90deg,rgba(14,83,129,.13),rgba(71,46,150,.09))}.life-insight i{font-size:23px;color:#62dfff}.life-insight b{font-size:11px;color:#cfefff;font-weight:500;line-height:1.45}
.life-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:13px 14px;border-top:1px solid rgba(77,164,238,.1)}.life-actions b{font-size:10px;color:#bddcf1;font-weight:500}.safety-chip{flex:0 0 auto;padding:7px 9px;border:1px solid rgba(72,224,172,.2);border-radius:999px;color:#78e5c1;font-size:7px;letter-spacing:.1em;background:rgba(22,98,73,.08)}
.lifegrammar-rule{padding:20px;border-left:1px solid rgba(70,176,255,.12);display:flex;flex-direction:column;justify-content:center}.lifegrammar-rule>span{font-size:8px;letter-spacing:.17em;color:#6386a7}.lifegrammar-rule div{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:14px 0}.lifegrammar-rule b{font-size:9px;color:#bfefff}.lifegrammar-rule i{font-size:9px;color:#596bff}.lifegrammar-rule p{margin:0;color:#718da8;font-size:10px;line-height:1.6}

@media (max-width:1100px){.section-rail{display:none}.lifegrammar-shell{grid-template-columns:120px minmax(0,1fr)}.lifegrammar-rule{grid-column:1/-1;border-left:0;border-top:1px solid rgba(70,176,255,.12)}}
@media (max-width:720px){.lifegrammar-section{padding-top:90px}.lifegrammar-shell{display:block;margin-top:26px;padding:10px;border-radius:18px}.life-selector{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:10px}.life-tab{min-height:54px;padding:7px 4px;justify-content:center;flex-direction:column;gap:4px;font-size:7px;text-align:center}.life-tab i{font-size:18px}.life-event{padding:15px}.life-event-core h3{font-size:20px}.life-stat-grid{grid-template-columns:repeat(2,1fr)}.life-actions{align-items:flex-start;flex-direction:column}.lifegrammar-rule{padding:17px 8px 9px}.chronos-labels span:nth-child(2),.chronos-labels span:nth-child(4){display:none}}

/* GENESIS 0.3.1 / ORBIT ENGINE */
.hero-core-zone{width:520px;height:520px;perspective:1100px;transform-style:preserve-3d;pointer-events:none}
.core-orbit-engine{--state-color:#72e8ff;position:relative;width:500px;height:500px;display:grid;place-items:center;transform-style:preserve-3d;pointer-events:none;filter:drop-shadow(0 24px 45px rgba(0,0,0,.25));transition:filter .6s ease}
.core-orbit-engine[data-state="echo"]{--state-color:#aa8dff}.core-orbit-engine[data-state="statify"]{--state-color:#70e7d3}.core-orbit-engine[data-state="quest"]{--state-color:#7b9dff}.core-orbit-engine[data-state="affinity"]{--state-color:#b38aff}.core-orbit-engine[data-state="vault"]{--state-color:#8adfff}
.core-orbit-engine::before{content:"";position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle,rgba(81,221,255,.13),rgba(49,116,255,.045) 34%,transparent 66%);filter:blur(5px);animation:orbitAura 5.8s ease-in-out infinite;pointer-events:none}
.core-orbit-engine::after{content:"";position:absolute;left:50%;top:50%;width:2px;height:360px;transform:translate(-50%,-50%);background:linear-gradient(transparent,rgba(113,225,255,.14) 36%,rgba(255,255,255,.45) 50%,rgba(113,225,255,.11) 64%,transparent);box-shadow:0 0 22px rgba(83,205,255,.16);opacity:.72;pointer-events:none}
.core-orbit-engine .memory-core{z-index:35;pointer-events:auto;transition:filter .45s ease,transform .45s cubic-bezier(.2,.7,.2,1);filter:drop-shadow(0 0 26px color-mix(in srgb,var(--state-color) 42%,transparent))}
.core-orbit-engine .memory-core:hover{transform:scale(1.045);filter:drop-shadow(0 0 42px color-mix(in srgb,var(--state-color) 58%,transparent))}
.core-orbit-engine .core-heart{background:#f7feff;box-shadow:0 0 7px white,0 0 20px var(--state-color),0 0 52px color-mix(in srgb,var(--state-color) 68%,transparent),0 0 100px rgba(94,77,255,.26);transition:box-shadow .5s ease}
.core-orbit-engine .core-ring-a{border-color:color-mix(in srgb,var(--state-color) 72%,white 10%)}
.core-orbit-engine .core-ring-b{border-color:color-mix(in srgb,var(--state-color) 48%,#9b79ff 52%)}
.core-orbit-engine .core-scan{background:conic-gradient(from 0deg,transparent 0 86%,color-mix(in srgb,var(--state-color) 30%,transparent) 93%,transparent 100%)}
.orbit-plane{position:absolute;left:50%;top:50%;border:1px solid color-mix(in srgb,var(--state-color) 23%,transparent);border-radius:50%;box-shadow:0 0 24px color-mix(in srgb,var(--state-color) 7%,transparent),inset 0 0 22px rgba(71,177,255,.025);pointer-events:none;transform-style:preserve-3d;transition:border-color .5s ease,box-shadow .5s ease}
.orbit-plane::before,.orbit-plane::after{content:"";position:absolute;border-radius:50%;pointer-events:none}.orbit-plane::before{inset:-1px;background:conic-gradient(from 20deg,transparent 0 17%,color-mix(in srgb,var(--state-color) 76%,white 5%) 20%,transparent 23% 60%,rgba(148,121,255,.62) 63%,transparent 66%);mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));opacity:.65}.orbit-plane::after{width:5px;height:5px;left:74%;top:10%;background:var(--state-color);box-shadow:0 0 10px var(--state-color),0 0 24px var(--state-color)}
.orbit-plane-a{width:250px;height:250px;margin:-125px 0 0 -125px;transform:rotateX(67deg) rotateZ(12deg);animation:orbitPlaneA 17s linear infinite}
.orbit-plane-b{width:350px;height:350px;margin:-175px 0 0 -175px;transform:rotateX(71deg) rotateY(8deg) rotateZ(-34deg);border-color:rgba(133,107,255,.16);animation:orbitPlaneB 25s linear infinite reverse}
.orbit-plane-c{width:446px;height:446px;margin:-223px 0 0 -223px;transform:rotateX(73deg) rotateY(-7deg) rotateZ(49deg);border-style:dashed;opacity:.6;animation:orbitPlaneC 39s linear infinite}
.orbit-pulse{position:absolute;left:50%;top:50%;width:190px;height:190px;border-radius:50%;border:1px solid color-mix(in srgb,var(--state-color) 30%,transparent);transform:translate(-50%,-50%) rotateX(70deg);animation:orbitPulse 3.8s ease-out infinite;pointer-events:none}
.orbit-column{position:absolute;left:50%;top:50%;width:116px;height:390px;transform:translate(-50%,-45%);pointer-events:none;opacity:.58;filter:blur(.15px);z-index:1}
.orbit-column span{position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(transparent,color-mix(in srgb,var(--state-color) 12%,transparent) 24%,color-mix(in srgb,var(--state-color) 72%,white 4%) 50%,color-mix(in srgb,var(--state-color) 10%,transparent) 76%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--state-color) 20%,transparent)}
.orbit-column span:nth-child(2){transform:translateX(-34px);opacity:.35}.orbit-column span:nth-child(3){transform:translateX(34px);opacity:.35}
.orbital-node{position:absolute;left:50%;top:50%;z-index:20;display:flex;align-items:center;gap:6px;min-width:62px;height:30px;padding:0 9px;border:1px solid rgba(106,223,255,.2);border-radius:9px;background:linear-gradient(145deg,rgba(6,19,39,.84),rgba(4,9,22,.68));backdrop-filter:blur(9px);box-shadow:0 7px 24px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.04),0 0 14px rgba(58,190,255,.06);color:#91aec0;font:650 .47rem/1 Inter,ui-sans-serif,sans-serif;letter-spacing:.12em;transform:translate3d(-50%,-50%,0);transform-origin:center;will-change:transform,opacity;pointer-events:auto;cursor:pointer;transition:border-color .22s ease,color .22s ease,box-shadow .22s ease,background .22s ease;white-space:nowrap}
.orbital-node i{font-size:13px;color:#6de4ff;filter:drop-shadow(0 0 6px rgba(80,211,255,.4));transition:color .25s ease}.orbital-node span{pointer-events:none}
.orbital-node:hover,.orbital-node:focus-visible,.orbital-node.active{outline:none;color:#e7fbff;border-color:color-mix(in srgb,var(--state-color) 54%,transparent);background:linear-gradient(145deg,rgba(15,47,81,.86),rgba(12,17,44,.74));box-shadow:0 9px 30px rgba(0,0,0,.3),0 0 24px color-mix(in srgb,var(--state-color) 14%,transparent),inset 0 0 18px color-mix(in srgb,var(--state-color) 5%,transparent)}
.orbital-node.active i{color:var(--state-color)}
.orbit-floor{position:absolute;left:50%;top:72%;width:360px;height:112px;transform:translate(-50%,-50%);z-index:0;pointer-events:none;filter:drop-shadow(0 0 18px rgba(58,196,255,.16))}
.orbit-floor span{position:absolute;left:50%;top:50%;border:1px solid rgba(99,218,255,.19);border-radius:50%;transform:translate(-50%,-50%);animation:floorSpin 10s linear infinite}.orbit-floor span:nth-child(1){width:95%;height:78%;border-color:rgba(115,230,255,.13)}.orbit-floor span:nth-child(2){width:72%;height:58%;animation-duration:7s;animation-direction:reverse}.orbit-floor span:nth-child(3){width:48%;height:39%;border-color:rgba(149,113,255,.24);animation-duration:5s}.orbit-floor span:nth-child(4){width:18%;height:15%;background:radial-gradient(ellipse,rgba(102,232,255,.45),rgba(68,123,255,.08) 48%,transparent 72%);border-color:rgba(152,240,255,.46);box-shadow:0 0 25px rgba(49,205,255,.36)}
.core-label{bottom:-4px;z-index:45;pointer-events:none}.core-label b{color:#dffaff;text-shadow:0 0 14px color-mix(in srgb,var(--state-color) 24%,transparent);transition:color .4s ease}.core-label span{max-width:300px;white-space:nowrap}
.core-telemetry{opacity:.24;pointer-events:none;transition:opacity .4s ease}.hero-system:hover .core-telemetry{opacity:.12}
.hero-system.orbit-engaged .float-panel{filter:saturate(1.08);border-color:rgba(94,220,255,.22)}
.hero-system.orbit-engaged .hero-core-zone{filter:drop-shadow(0 0 30px rgba(68,205,255,.08))}

@keyframes orbitPlaneA{to{transform:rotateX(67deg) rotateZ(372deg)}}
@keyframes orbitPlaneB{to{transform:rotateX(71deg) rotateY(8deg) rotateZ(326deg)}}
@keyframes orbitPlaneC{to{transform:rotateX(73deg) rotateY(-7deg) rotateZ(409deg)}}
@keyframes orbitPulse{0%{transform:translate(-50%,-50%) rotateX(70deg) scale(.55);opacity:.7}70%,100%{transform:translate(-50%,-50%) rotateX(70deg) scale(2.15);opacity:0}}
@keyframes orbitAura{0%,100%{transform:scale(.94);opacity:.7}50%{transform:scale(1.07);opacity:1}}
@keyframes floorSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}

@media (max-width:1200px){.hero-core-zone{width:450px;height:450px}.core-orbit-engine{width:430px;height:430px}.orbit-plane-a{width:220px;height:220px;margin:-110px 0 0 -110px}.orbit-plane-b{width:305px;height:305px;margin:-152.5px 0 0 -152.5px}.orbit-plane-c{width:390px;height:390px;margin:-195px 0 0 -195px}.orbit-floor{width:310px}.orbital-node{min-width:56px;height:27px;padding:0 7px;font-size:.42rem}}
@media (max-width:760px){.hero-core-zone{width:360px;height:360px;top:50%}.core-orbit-engine{width:350px;height:350px}.memory-core{width:132px;height:132px}.orbit-plane-a{width:176px;height:176px;margin:-88px 0 0 -88px}.orbit-plane-b{width:246px;height:246px;margin:-123px 0 0 -123px}.orbit-plane-c{width:320px;height:320px;margin:-160px 0 0 -160px}.orbit-floor{width:250px;height:88px}.orbital-node{min-width:0;width:30px;height:30px;padding:0;justify-content:center;border-radius:50%}.orbital-node span{display:none}.orbital-node i{font-size:14px}.core-label{bottom:-18px}.core-label b{font-size:.58rem}.core-label span{font-size:.43rem}.orbit-column{height:280px}.core-telemetry{display:none}}
@media (prefers-reduced-motion:reduce){.orbit-plane,.orbit-pulse,.orbit-floor span,.core-orbit-engine::before{animation:none!important}.orbital-node{transition:none}}


/* ============================================================
   GENESIS 0.4 / CINEMATIC HERO + MEMORY CORE
   ============================================================ */
.hero-system{
    opacity:1;
    isolation:isolate;
    filter:drop-shadow(0 30px 80px rgba(0,0,0,.24));
}
.hero-system::before{
    content:"";
    position:absolute;
    inset:4% -3% 2%;
    z-index:-2;
    pointer-events:none;
    background:
        radial-gradient(circle at 50% 51%,rgba(35,184,255,.11),transparent 27%),
        radial-gradient(circle at 52% 53%,rgba(95,69,255,.075),transparent 45%);
    filter:blur(18px);
}
.hero-depth-grid{
    position:absolute;
    left:7%;
    right:6%;
    bottom:3%;
    height:42%;
    z-index:-1;
    pointer-events:none;
    opacity:.28;
    transform:perspective(640px) rotateX(67deg);
    transform-origin:50% 100%;
    background-image:
        linear-gradient(rgba(73,187,255,.12) 1px,transparent 1px),
        linear-gradient(90deg,rgba(73,187,255,.12) 1px,transparent 1px);
    background-size:38px 38px;
    mask-image:linear-gradient(180deg,transparent,#000 30%,#000);
}
.hero-depth-grid::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse at 50% 80%,rgba(59,212,255,.26),transparent 45%);
}
.hero-links{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:2;
    overflow:visible;
    pointer-events:none;
    opacity:.58;
}
.link-path{
    fill:none;
    stroke:rgba(83,213,255,.20);
    stroke-width:1.1;
    stroke-dasharray:7 12;
    filter:drop-shadow(0 0 5px rgba(69,203,255,.32));
    animation:heroLinkFlow 8s linear infinite;
}
.link-b{animation-delay:-1.6s;stroke:rgba(147,113,255,.22)}
.link-c{animation-delay:-3.1s}
.link-d{animation-delay:-5.4s;stroke:rgba(147,113,255,.18)}
@keyframes heroLinkFlow{to{stroke-dashoffset:-190}}
.orbit-canvas{
    position:absolute;
    inset:-3%;
    width:106%;
    height:106%;
    z-index:6;
    pointer-events:none;
    opacity:.92;
    mix-blend-mode:screen;
}
.orbit-aurora{
    position:absolute;
    left:50%;
    top:51%;
    width:68%;
    height:68%;
    transform:translate(-50%,-50%) rotateX(68deg);
    border-radius:50%;
    z-index:4;
    pointer-events:none;
    background:
        radial-gradient(ellipse at center,transparent 43%,color-mix(in srgb,var(--state-color) 7%,transparent) 48%,transparent 55%),
        conic-gradient(from 70deg,transparent 0 13%,color-mix(in srgb,var(--state-color) 16%,transparent) 18%,transparent 22% 47%,rgba(142,104,255,.10) 52%,transparent 58%);
    filter:blur(6px);
    animation:auroraDrift 11s ease-in-out infinite alternate;
}
@keyframes auroraDrift{
    from{transform:translate(-50%,-50%) rotateX(68deg) rotateZ(-5deg) scale(.96);opacity:.58}
    to{transform:translate(-50%,-50%) rotateX(68deg) rotateZ(7deg) scale(1.06);opacity:.94}
}
.hero-system .hero-core-zone{z-index:8}
.hero-system .float-panel{
    z-index:14;
    backdrop-filter:blur(18px) saturate(1.16);
    transition:
        border-color .42s ease,
        box-shadow .42s ease,
        filter .42s ease,
        background .42s ease,
        transform .38s cubic-bezier(.2,.75,.2,1);
}
.hero-system .float-panel::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background:linear-gradient(110deg,transparent 0 30%,rgba(255,255,255,.05) 42%,transparent 52%);
    transform:translateX(-120%);
    animation:holoSweep 8.5s ease-in-out infinite;
}
.float-b::after{animation-delay:-2.1s!important}
.float-c::after{animation-delay:-4.6s!important}
.float-d::after{animation-delay:-6.8s!important}
@keyframes holoSweep{
    0%,66%{transform:translateX(-125%);opacity:0}
    72%{opacity:1}
    84%,100%{transform:translateX(125%);opacity:0}
}
.hero-system[data-core-state="echo"] .hero-live-panel,
.hero-system[data-core-state="statify"] .hero-stat-panel,
.hero-system[data-core-state="quest"] .hero-action-panel,
.hero-system[data-core-state="vault"] .hero-proof-panel{
    border-color:color-mix(in srgb,var(--state-color,#72e8ff) 52%,transparent);
    box-shadow:0 18px 50px rgba(0,0,0,.28),0 0 34px rgba(65,203,255,.10),inset 0 0 24px rgba(85,205,255,.035);
}
.float-d{
    left:5.5%;
    bottom:6%;
    width:235px;
    animation-delay:-2.2s;
}
.proof-stack{display:grid;gap:7px;margin-top:10px}
.proof-stack>span{
    display:grid;
    grid-template-columns:18px 70px 1fr;
    align-items:center;
    gap:5px;
    padding:6px 7px;
    border:1px solid rgba(88,185,255,.09);
    border-radius:7px;
    background:rgba(4,12,28,.42);
}
.proof-stack i{color:#62dfff;font-size:13px}
.proof-stack b{font-size:.48rem;letter-spacing:.12em;color:#d5f3ff}
.proof-stack small{font-size:.45rem;color:rgba(163,190,213,.56);text-align:right}
.hero-stat-panel .micro-stats span{display:flex;flex-direction:column}
.hero-stat-panel .micro-stats small{
    margin-top:3px;
    color:rgba(153,184,209,.55);
    font-size:.45rem;
    letter-spacing:.07em;
    text-transform:uppercase;
}
.hero-sim-badge{
    position:absolute;
    right:clamp(24px,4vw,70px);
    bottom:85px;
    z-index:20;
    display:flex;
    align-items:center;
    gap:8px;
    padding:7px 10px;
    border:1px solid rgba(79,193,255,.15);
    border-radius:999px;
    background:rgba(3,10,24,.50);
    backdrop-filter:blur(10px);
    color:rgba(166,203,227,.64);
    font-size:.48rem;
    letter-spacing:.14em;
}
.hero-sim-badge span{
    width:6px;height:6px;border-radius:50%;
    background:#58e0ff;
    box-shadow:0 0 12px rgba(78,222,255,.8);
    animation:simPulse 1.8s ease-in-out infinite;
}
@keyframes simPulse{50%{opacity:.35;transform:scale(.75)}}
.hero-system.state-pulse .link-path{
    stroke:rgba(116,231,255,.38);
    filter:drop-shadow(0 0 9px rgba(81,215,255,.58));
}
.hero-system.state-pulse .float-panel{
    animation-duration:5.1s;
}
.core-orbit-engine{
    will-change:transform;
}
.core-orbit-engine[data-state="sense"]{--state-color:#55d7ff}
.core-orbit-engine[data-state="echo"]{--state-color:#aa8dff}
.core-orbit-engine[data-state="statify"]{--state-color:#65e6d2}
.core-orbit-engine[data-state="quest"]{--state-color:#6f95ff}
.core-orbit-engine[data-state="affinity"]{--state-color:#b38bff}
.core-orbit-engine[data-state="vault"]{--state-color:#7edcff}
.core-orbit-engine[data-state="sense"] .core-heart,
.core-orbit-engine[data-state="echo"] .core-heart,
.core-orbit-engine[data-state="statify"] .core-heart,
.core-orbit-engine[data-state="quest"] .core-heart,
.core-orbit-engine[data-state="affinity"] .core-heart,
.core-orbit-engine[data-state="vault"] .core-heart{
    animation:coreStateBeat 1.65s ease-in-out infinite;
}
@keyframes coreStateBeat{
    0%,100%{transform:scale(.92);filter:brightness(1)}
    45%{transform:scale(1.06);filter:brightness(1.25)}
}
.hero-art{
    opacity:.70;
}
.hero-art img{
    transform:rotateY(-3.5deg) rotateX(.8deg) scale(1.015);
}
.vision-window-media{
    transform:none!important;
}
.vision-window-media img{
    transform:none!important;
    object-fit:contain;
}
.vision-window-media:hover img{
    transform:none!important;
}

/* Hero panel text should change without jarring layout shifts. */
.hero-live-panel p,.hero-action-panel p{
    min-height:3.5em;
    transition:opacity .2s ease;
}
.hero-action-panel .progress span{
    width:var(--progress,64%);
    transition:width .7s cubic-bezier(.2,.8,.2,1),background .35s ease,box-shadow .35s ease;
}

/* slightly cinematic boot hand-off */
.boot.hidden + .topbar,
.boot-complete .hero-copy,
.boot-complete .hero-art,
.boot-complete .hero-system{
    animation:genesisArrival .95s cubic-bezier(.2,.78,.2,1) both;
}
.boot-complete .hero-art{animation-delay:.08s}
.boot-complete .hero-system{animation-delay:.14s}
@keyframes genesisArrival{
    from{opacity:0;filter:blur(9px);transform:translateY(10px)}
    to{filter:blur(0)}
}

/* Keep the complete concept poster visible. Never crop readable text by zooming it. */
.vision-window{overflow:visible}
.vision-window-media{
    overflow:hidden;
    aspect-ratio:1.18/1;
}
.vision-window-media img{
    width:100%;
    height:100%;
    object-position:center;
}

/* Phase 1 responsive tuning */
@media (max-width:1200px){
    .float-d{left:1%;bottom:2%;width:210px}
    .hero-links{opacity:.42}
}
@media (max-width:900px){
    .float-d{display:none}
    .hero-links{opacity:.28}
    .hero-depth-grid{opacity:.18}
    .hero-sim-badge{bottom:72px;right:22px}
}
@media (max-width:760px){
    .orbit-canvas{opacity:.72}
    .orbit-aurora{width:80%;height:80%}
    .hero-links,.hero-depth-grid{display:none}
    .hero-system .float-panel::after{display:none}
    .hero-sim-badge{display:none}
    .hero-art{opacity:.40}
}
@media (prefers-reduced-motion:reduce){
    .orbit-aurora,.link-path,.hero-system .float-panel::after,.hero-sim-badge span,
    .core-orbit-engine .core-heart{animation:none!important}
    .orbit-canvas{opacity:.52}
}

/* ============================================================
   GENESIS 0.4.1 / CINEMATIC 3D ORBIT NAVIGATION
   ============================================================ */
.orbit-toggle{
    position:relative;
    overflow:visible;
}
.orbit-toggle-glyph{
    position:relative;
    width:24px;
    height:24px;
    display:grid;
    place-items:center;
    perspective:90px;
    transform-style:preserve-3d;
    filter:drop-shadow(0 0 8px rgba(82,213,255,.26));
}
.orbit-toggle-glyph i{
    position:absolute;
    width:21px;
    height:21px;
    border:1px solid rgba(104,225,255,.55);
    border-radius:50%;
    box-shadow:inset 0 0 7px rgba(78,197,255,.06),0 0 6px rgba(62,203,255,.08);
}
.orbit-toggle-glyph i:nth-child(1){transform:rotateX(68deg);animation:miniOrbitA 5.2s linear infinite}
.orbit-toggle-glyph i:nth-child(2){border-color:rgba(145,111,255,.58);transform:rotateY(66deg);animation:miniOrbitB 4.1s linear infinite reverse}
.orbit-toggle-glyph i:nth-child(3){width:16px;height:16px;border-style:dashed;opacity:.72;transform:rotateX(54deg) rotateY(44deg);animation:miniOrbitC 7s linear infinite}
.orbit-toggle-glyph b{
    position:absolute;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#effdff;
    box-shadow:0 0 5px #fff,0 0 12px rgba(78,220,255,.95),0 0 22px rgba(111,81,255,.44);
    animation:miniCoreBeat 2.1s ease-in-out infinite;
}
.orbit-toggle[aria-expanded="true"]{
    color:#effcff;
    border-color:rgba(104,224,255,.28);
    background:linear-gradient(135deg,rgba(66,192,238,.09),rgba(93,73,218,.055));
    box-shadow:0 0 24px rgba(48,190,244,.08),inset 0 0 16px rgba(73,199,239,.035);
}
.orbit-toggle[aria-expanded="true"] .orbit-toggle-glyph{filter:drop-shadow(0 0 12px rgba(82,222,255,.55))}

.orbit-shell{
    perspective:1400px;
    background:transparent;
}
.orbit-backdrop{
    background:
        radial-gradient(circle at 50% 46%,rgba(22,77,122,.18),transparent 26%),
        radial-gradient(circle at 62% 36%,rgba(88,62,166,.09),transparent 34%),
        rgba(1,5,12,.91);
    backdrop-filter:blur(18px) saturate(125%);
}
.orbit-nav.orbit-nav-3d{
    --pointer-x:50%;
    --pointer-y:50%;
    width:min(790px,92vw,86vh);
    aspect-ratio:1;
    overflow:hidden;
    border:1px solid rgba(103,224,255,.14);
    border-radius:50%;
    background:
        radial-gradient(circle at var(--pointer-x) var(--pointer-y),rgba(73,203,255,.095),transparent 22%),
        radial-gradient(circle at 50% 50%,rgba(9,36,66,.72) 0%,rgba(3,12,28,.83) 45%,rgba(1,5,13,.48) 68%,rgba(1,4,10,.1) 74%,transparent 76%);
    box-shadow:
        0 70px 180px rgba(0,0,0,.65),
        0 0 95px rgba(56,194,255,.055),
        inset 0 0 95px rgba(67,177,226,.035),
        inset 0 0 0 1px rgba(255,255,255,.012);
    transform:translate(-50%,-50%) scale(.72) rotateX(5deg);
    opacity:.7;
    transition:transform .68s cubic-bezier(.16,.82,.18,1),opacity .5s ease,border-color .45s ease;
    transform-style:preserve-3d;
    isolation:isolate;
}
.orbit-shell.open .orbit-nav.orbit-nav-3d{
    transform:translate(-50%,-50%) scale(1) rotateX(0deg);
    opacity:1;
    border-color:rgba(106,226,255,.21);
}
.orbit-nav.orbit-nav-3d::before{
    inset:5.5%;
    border-color:rgba(92,218,255,.10);
    animation:navHaloSpin 48s linear infinite;
    box-shadow:0 0 38px rgba(68,201,255,.04),inset 0 0 26px rgba(68,201,255,.025);
}
.orbit-nav.orbit-nav-3d::after{
    inset:9.5%;
    border:1px dashed rgba(143,111,255,.095);
    animation:navHaloSpinReverse 66s linear infinite;
}
.orbit-nav-canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:3;
    pointer-events:none;
    mix-blend-mode:screen;
}
.orbit-nav-nebula{
    position:absolute;
    z-index:1;
    inset:13%;
    border-radius:50%;
    pointer-events:none;
    background:
        radial-gradient(ellipse at 45% 52%,rgba(61,201,255,.11),transparent 33%),
        radial-gradient(ellipse at 63% 39%,rgba(122,84,255,.075),transparent 27%);
    filter:blur(20px);
    animation:navNebula 10s ease-in-out infinite alternate;
}
.orbit-nav-nebula::before,
.orbit-nav-nebula::after{
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}
.orbit-nav-nebula::before{
    inset:26%;
    background:radial-gradient(circle,rgba(117,230,255,.15),rgba(71,124,255,.035) 44%,transparent 70%);
    filter:blur(8px);
}
.orbit-nav-nebula::after{
    left:50%;top:50%;width:8px;height:8px;
    transform:translate(-50%,-50%);
    background:#effeff;
    box-shadow:0 0 18px #fff,0 0 42px rgba(58,211,255,.7),0 0 100px rgba(105,75,255,.32);
    animation:navBeacon 2.5s ease-in-out infinite;
}
.orbit-nav-stage{
    position:absolute;
    inset:0;
    z-index:6;
    transform-style:preserve-3d;
    pointer-events:none;
}
.orbit-nav-stage .orbit-center,
.orbit-nav-stage .orbit-item{pointer-events:auto}
.orbit-nav-stage .orbit-center{
    left:50%;
    top:50%;
    width:136px;
    height:136px;
    z-index:150!important;
    border:1px solid rgba(109,230,255,.09);
    background:
        radial-gradient(circle at 50% 50%,rgba(167,244,255,.29),rgba(48,131,191,.15) 23%,rgba(13,38,75,.48) 46%,rgba(2,9,22,.82) 67%,transparent 70%);
    box-shadow:0 0 42px rgba(57,205,255,.13),inset 0 0 34px rgba(92,217,255,.06);
    transition:filter .3s ease,transform .3s ease;
}
.orbit-nav-stage .orbit-center:hover,
.orbit-nav-stage .orbit-center:focus-visible{
    outline:none;
    filter:drop-shadow(0 0 29px rgba(76,223,255,.52));
}
.orbit-nav-stage .orbit-center::before,
.orbit-nav-stage .orbit-center::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    border-radius:50%;
    transform:translate(-50%,-50%) rotateX(72deg);
    pointer-events:none;
}
.orbit-nav-stage .orbit-center::before{
    width:185%;height:64%;
    border:1px solid rgba(92,222,255,.12);
    animation:navCenterOrbit 8.5s linear infinite;
}
.orbit-nav-stage .orbit-center::after{
    width:225%;height:82%;
    border:1px solid rgba(146,112,255,.09);
    transform:translate(-50%,-50%) rotateX(67deg) rotateZ(31deg);
    animation:navCenterOrbitReverse 12s linear infinite;
}
.orbit-nav-stage .orbit-center .core-ring-a{inset:9%}
.orbit-nav-stage .orbit-center .core-ring-b{inset:24%}
.orbit-nav-stage .orbit-center .core-ring-c{inset:2%}
.orbit-nav-stage .orbit-center .core-scan{inset:-34%}

.orbit-nav-3d .orbit-item{
    left:0;
    top:0;
    margin:0;
    width:126px;
    height:72px;
    padding:.55rem .62rem;
    display:grid;
    grid-template-columns:30px 1fr;
    grid-template-rows:auto auto;
    column-gap:.48rem;
    align-content:center;
    justify-items:start;
    border:1px solid rgba(103,220,255,calc(.09 + var(--depth,.5) * .11));
    border-radius:15px;
    background:
        linear-gradient(145deg,rgba(8,26,51,calc(.64 + var(--depth,.5) * .19)),rgba(3,10,25,.78));
    backdrop-filter:blur(16px) saturate(130%);
    box-shadow:
        0 14px 38px rgba(0,0,0,.32),
        0 0 22px rgba(48,194,255,calc(.02 + var(--depth,.5) * .05)),
        inset 0 1px rgba(255,255,255,.025);
    color:#88a5b9;
    will-change:transform,opacity,filter;
    transform-origin:center;
    transition:border-color .22s ease,color .22s ease,box-shadow .22s ease,background .22s ease;
}
.orbit-nav-3d .orbit-item::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background:linear-gradient(105deg,transparent 22%,rgba(142,235,255,.08) 48%,transparent 70%);
    transform:translateX(-120%);
    transition:transform .55s ease;
}
.orbit-nav-3d .orbit-item:hover::before,
.orbit-nav-3d .orbit-item:focus-visible::before,
.orbit-nav-3d .orbit-item.active::before{transform:translateX(120%)}
.orbit-nav-3d .orbit-item i{
    grid-row:1/3;
    align-self:center;
    justify-self:center;
    font-size:1.38rem;
    color:rgba(104,222,255,.9);
    filter:drop-shadow(0 0 8px rgba(69,205,255,.18));
    transition:color .22s ease,filter .22s ease,transform .22s ease;
}
.orbit-nav-3d .orbit-item span{
    font-size:.56rem;
    font-weight:720;
    letter-spacing:.1em;
    color:#b8cfdd;
    text-transform:uppercase;
}
.orbit-nav-3d .orbit-item small{
    display:block;
    margin-top:.12rem;
    font-size:.43rem;
    line-height:1.2;
    letter-spacing:.07em;
    color:#58758a;
    text-transform:uppercase;
    white-space:nowrap;
}
.orbit-nav-3d .orbit-item:hover,
.orbit-nav-3d .orbit-item:focus-visible,
.orbit-nav-3d .orbit-item.active{
    outline:none;
    color:white;
    border-color:rgba(113,231,255,.45);
    background:linear-gradient(145deg,rgba(14,50,83,.9),rgba(8,15,38,.9));
    box-shadow:0 18px 52px rgba(0,0,0,.38),0 0 32px rgba(61,206,255,.13),inset 0 0 22px rgba(80,205,255,.035);
}
.orbit-nav-3d .orbit-item:hover i,
.orbit-nav-3d .orbit-item:focus-visible i,
.orbit-nav-3d .orbit-item.active i{
    color:#dffcff;
    filter:drop-shadow(0 0 10px rgba(78,222,255,.7));
    transform:scale(1.08);
}
.orbit-nav-hud{
    position:absolute;
    z-index:210;
    left:50%;
    top:7.5%;
    transform:translateX(-50%);
    width:min(420px,62%);
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:"a b" "c c";
    gap:.28rem 1rem;
    padding:.65rem .9rem;
    border-top:1px solid rgba(102,223,255,.13);
    border-bottom:1px solid rgba(102,223,255,.07);
    color:#5e8299;
    pointer-events:none;
    text-transform:uppercase;
    letter-spacing:.16em;
}
.orbit-nav-hud::before,
.orbit-nav-hud::after{
    content:"";
    position:absolute;
    top:-1px;
    width:52px;
    height:1px;
    background:linear-gradient(90deg,transparent,#72e1ff);
    box-shadow:0 0 12px rgba(82,215,255,.35);
}
.orbit-nav-hud::before{left:0}
.orbit-nav-hud::after{right:0;transform:scaleX(-1)}
.orbit-nav-hud span{grid-area:a;font-size:.47rem;color:#6bdcff}
.orbit-nav-hud b{grid-area:b;font-size:.47rem;color:#d8f7ff;font-weight:620;text-align:right;text-shadow:0 0 12px rgba(70,206,255,.23)}
.orbit-nav-hud small{grid-area:c;font-size:.39rem;color:#48687e}
.orbit-nav-foot{
    position:absolute;
    z-index:210;
    left:50%;
    bottom:6.2%;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:.8rem;
    color:#48687d;
    font-size:.39rem;
    letter-spacing:.14em;
    white-space:nowrap;
    pointer-events:none;
}
.orbit-nav-foot i{width:58px;height:1px;background:linear-gradient(90deg,transparent,rgba(93,220,255,.35),transparent);box-shadow:0 0 7px rgba(72,204,255,.12)}

@keyframes miniOrbitA{to{transform:rotateX(68deg) rotateZ(360deg)}}
@keyframes miniOrbitB{to{transform:rotateY(66deg) rotateZ(360deg)}}
@keyframes miniOrbitC{to{transform:rotateX(54deg) rotateY(44deg) rotateZ(360deg)}}
@keyframes miniCoreBeat{0%,100%{transform:scale(.76);opacity:.72}50%{transform:scale(1.18);opacity:1}}
@keyframes navHaloSpin{to{transform:rotate(360deg)}}
@keyframes navHaloSpinReverse{to{transform:rotate(-360deg)}}
@keyframes navNebula{0%{transform:scale(.94) rotate(-2deg);opacity:.62}100%{transform:scale(1.07) rotate(3deg);opacity:1}}
@keyframes navBeacon{0%,100%{transform:translate(-50%,-50%) scale(.72);opacity:.72}50%{transform:translate(-50%,-50%) scale(1.18);opacity:1}}
@keyframes navCenterOrbit{to{transform:translate(-50%,-50%) rotateX(72deg) rotateZ(360deg)}}
@keyframes navCenterOrbitReverse{to{transform:translate(-50%,-50%) rotateX(67deg) rotateZ(-329deg)}}

@media (max-width:760px){
    .orbit-nav.orbit-nav-3d{width:min(96vw,86vh,620px);border-radius:50%;}
    .orbit-nav-hud{top:6%;width:74%;padding:.5rem .65rem}.orbit-nav-hud small{display:none}
    .orbit-nav-3d .orbit-item{width:86px;height:54px;padding:.4rem;grid-template-columns:22px 1fr;column-gap:.3rem;border-radius:12px}
    .orbit-nav-3d .orbit-item i{font-size:1.02rem}.orbit-nav-3d .orbit-item span{font-size:.44rem}.orbit-nav-3d .orbit-item small{display:none}
    .orbit-nav-stage .orbit-center{width:104px;height:104px}
    .orbit-nav-foot{bottom:4.8%;font-size:.34rem}.orbit-nav-foot span:first-child{display:none}.orbit-nav-foot i{width:34px}
}
@media (max-width:450px){
    .orbit-nav.orbit-nav-3d{width:min(98vw,88vh);}
    .orbit-nav-hud{top:4.5%;width:76%}.orbit-nav-hud span,.orbit-nav-hud b{font-size:.4rem}
    .orbit-nav-3d .orbit-item{width:70px;height:46px;padding:.32rem;grid-template-columns:1fr;grid-template-rows:auto auto;justify-items:center;gap:.1rem}
    .orbit-nav-3d .orbit-item i{grid-row:auto;font-size:.96rem}.orbit-nav-3d .orbit-item span{font-size:.37rem}.orbit-nav-stage .orbit-center{width:90px;height:90px}
}
@media (prefers-reduced-motion:reduce){
    .orbit-toggle-glyph i,.orbit-toggle-glyph b,.orbit-nav-nebula,.orbit-nav-nebula::after,.orbit-nav-stage .orbit-center::before,.orbit-nav-stage .orbit-center::after,.orbit-nav.orbit-nav-3d::before,.orbit-nav.orbit-nav-3d::after{animation:none!important}
}