:root {
  --ink: #07051a;
  --ink-soft: #110b2e;
  --paper: #f7f6ff;
  --muted: rgba(247, 246, 255, 0.68);
  --violet: #8e4dff;
  --pink: #f145ff;
  --cyan: #27e8ff;
  --lime: #cfff4d;
  --gold: #ffcc55;
  --glass: rgba(14, 9, 43, 0.54);
  --line: rgba(255, 255, 255, 0.18);
  --page-progress: 0;
  --run-x: 8vw;
  --run-tilt: -2deg;
  --runner-opacity: 0;
  --scroll-energy: 0;
  --mx: 50vw;
  --my: 50vh;
  color-scheme: dark;
  font-family: Inter, "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-snap-type: y proximity; background: var(--ink); }
body { margin: 0; min-width: 320px; color: var(--paper); background: var(--ink); overflow-x: hidden; }
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; }
::selection { color: var(--ink); background: var(--lime); }

.skip-link { position: fixed; z-index: 1000; left: 16px; top: 12px; padding: 12px 16px; border-radius: 999px; color: var(--ink); background: var(--lime); transform: translateY(-160%); transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); }

#fx-canvas { position: fixed; inset: 0; z-index: 20; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; opacity: .72; }
.cursor-light { position: fixed; z-index: 1; left: var(--mx); top: var(--my); width: min(35vw, 620px); aspect-ratio: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(94, 216, 255, .11), transparent 66%); transform: translate(-50%, -50%); transition: width .25s ease; }

.topbar { position: fixed; z-index: 100; inset: 0 0 auto; height: 78px; padding: 0 clamp(20px, 3.1vw, 60px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid rgba(255,255,255,.11); background: linear-gradient(180deg, rgba(7,5,26,.78), rgba(7,5,26,.12)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.wordmark { justify-self: start; display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-weight: 950; font-style: italic; letter-spacing: -.04em; }
.wordmark__sun { width: 22px; aspect-ratio: 1; border-radius: 50%; background: var(--gold); box-shadow: 0 0 24px rgba(255,204,85,.8); position: relative; }
.wordmark__sun::before, .wordmark__sun::after { content: ""; position: absolute; inset: -5px; border: 1px dashed rgba(255,204,85,.7); border-radius: 50%; }
.wordmark__sun::after { inset: 5px; border-style: solid; border-color: var(--paper); }
.nav-links { display: flex; gap: clamp(18px, 2.2vw, 42px); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.nav-links a { position: relative; padding: 10px 0; text-decoration: none; color: rgba(255,255,255,.76); }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 4px; height: 1px; background: var(--lime); transition: right .3s ease; }
.nav-links a:hover::after, .nav-links a:focus-visible::after, .nav-links a.is-active::after { right: 0; }
.nav-links a.is-active { color: white; }
.spark-meter { justify-self: end; display: flex; gap: 4px; align-items: baseline; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; }
.spark-meter__dot { width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 16px var(--gold); }
#spark-count { color: var(--lime); font-size: 16px; }
.page-progress { position: fixed; z-index: 110; left: 0; top: 77px; width: 100%; height: 2px; background: rgba(255,255,255,.08); }
.page-progress span { display: block; width: calc(var(--page-progress) * 100%); height: 100%; background: linear-gradient(90deg, var(--pink), var(--cyan), var(--lime), var(--gold)); box-shadow: 0 0 15px var(--cyan); }

.screen { position: relative; isolation: isolate; min-height: 100svh; height: max(100svh, 56.25vw); max-height: 100svh; overflow: hidden; scroll-snap-align: start; padding: clamp(112px, 11vh, 140px) clamp(26px, 5vw, 96px) clamp(58px, 7vh, 88px); background: var(--ink); }
.screen::before { content: "SCENE " attr(data-scene) "  /  1920 × 1080"; position: absolute; z-index: 8; right: clamp(24px, 3vw, 58px); bottom: 26px; color: rgba(255,255,255,.38); font-size: 9px; letter-spacing: .2em; }
.scene-bg { position: absolute; z-index: -5; inset: -6%; background-size: cover; background-position: center; transform: translate3d(0,0,0) scale(1.04); will-change: transform; }
.scene-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,5,26,.94) 0%, rgba(7,5,26,.52) 43%, rgba(7,5,26,.08) 75%), linear-gradient(180deg, rgba(7,5,26,.2), rgba(7,5,26,.48)); }
.scene-bg--circuit { background-image: url("assets/circuit-bg.webp"); }
.scene-bg--valley { background-image: url("assets/valley-bg.webp"); }
.scene-bg--zoom { background-position: 66% center; transform: scale(1.22); }
.scene-bg--zoom::after { background: linear-gradient(90deg, rgba(7,5,26,.85), rgba(7,5,26,.12) 64%), linear-gradient(180deg, rgba(7,5,26,.12), rgba(7,5,26,.68)); }
.scene-bg--mirror { transform: scaleX(-1) scale(1.06); filter: saturate(.85) hue-rotate(16deg); }
.scene-bg--mirror::after { background: linear-gradient(270deg, rgba(7,5,26,.82), rgba(7,5,26,.28) 60%), linear-gradient(180deg, rgba(7,5,26,.18), rgba(7,5,26,.72)); }
.scene-bg--signal { filter: saturate(1.25) brightness(.75); }
.scene-bg--signal::after { background: radial-gradient(circle at 64% 45%, transparent, rgba(7,5,26,.58) 48%, rgba(7,5,26,.9)), linear-gradient(90deg, rgba(7,5,26,.88), transparent 70%); }

.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: rgba(255,255,255,.7); font-size: clamp(9px, .72vw, 12px); font-weight: 800; letter-spacing: .19em; text-transform: uppercase; }
.eyebrow span { display: inline-grid; place-items: center; width: 34px; height: 22px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; color: var(--lime); }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { margin-bottom: 0; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: -.045em; line-height: .82; }
h2 { font-size: clamp(64px, 7.6vw, 146px); }
h2 em { color: transparent; font-style: normal; -webkit-text-stroke: 1.5px rgba(255,255,255,.68); text-shadow: 0 0 45px rgba(39,232,255,.16); }

.hero-copy { position: relative; z-index: 6; width: min(47vw, 860px); align-self: center; margin-top: 10vh; }
.hero-title { display: flex; font-size: clamp(128px, 17vw, 330px); line-height: .68; filter: drop-shadow(0 0 42px rgba(108,70,255,.32)); }
.hero-title span:first-child { color: var(--paper); }
.hero-title span:last-child { color: transparent; -webkit-text-stroke: 2px var(--paper); }
.hero-kicker { position: relative; margin: clamp(28px, 4.3vh, 52px) 0 24px 26%; color: var(--lime); font-size: clamp(24px, 2.15vw, 42px); font-weight: 950; line-height: .94; letter-spacing: -.045em; text-transform: uppercase; }
.hero-kicker::before { content: ""; position: absolute; top: 8px; right: calc(100% + 18px); width: 34%; height: 1px; background: var(--lime); box-shadow: 0 0 12px var(--lime); }
.hero-intro { width: min(500px, 80%); margin: 0 0 32px 26%; color: var(--muted); font-size: clamp(14px, 1vw, 18px); line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-left: 26%; }
.button { min-height: 52px; padding: 0 22px; border: 1px solid var(--line); border-radius: 999px; display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; background: transparent; color: var(--paper); text-decoration: none; cursor: pointer; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease; }
.button--primary { min-width: 205px; border-color: var(--lime); color: var(--ink); background: var(--lime); box-shadow: 0 0 28px rgba(207,255,77,.2); }
.button--primary b { font-size: 20px; }
.button--ghost i { color: var(--cyan); font-size: 9px; font-style: normal; }
.button:hover, .button:focus-visible { transform: translateY(-3px); }
.button--ghost:hover { border-color: var(--cyan); background: rgba(39,232,255,.08); }

.hero-visual { position: absolute; z-index: 4; right: 0; bottom: -5%; width: min(55vw, 960px); height: 98%; display: grid; place-items: end center; pointer-events: none; }
.hero-character { position: relative; z-index: 2; width: min(52vw, 790px); height: 98%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 40px 40px rgba(0,0,0,.58)); animation: hero-float 4.8s ease-in-out infinite; }
.hero-halo { position: absolute; z-index: 0; right: 10%; top: 5%; width: min(39vw, 660px); aspect-ratio: 1; border: 1px solid rgba(255,204,85,.5); border-radius: 50%; box-shadow: 0 0 0 36px rgba(255,204,85,.05), 0 0 0 80px rgba(255,204,85,.025), inset 0 0 72px rgba(255,204,85,.13); animation: halo-spin 14s linear infinite; }
.hero-halo::before, .hero-halo::after { content: ""; position: absolute; inset: 12%; border: 1px dashed rgba(39,232,255,.45); border-radius: inherit; }
.hero-halo::after { inset: 33%; border-color: rgba(241,69,255,.55); }
.orbit-label { position: absolute; z-index: 4; color: rgba(255,255,255,.72); font-size: 9px; font-weight: 900; letter-spacing: .18em; line-height: 1.35; }
.orbit-label--top { top: 17%; right: 4%; }
.orbit-label--bottom { right: 9%; bottom: 21%; }

.aurora { position: absolute; z-index: -2; filter: blur(35px); border-radius: 50%; opacity: .33; animation: breathe 7s ease-in-out infinite; }
.aurora--one { left: -12vw; top: 15vh; width: 36vw; height: 28vw; background: var(--violet); }
.aurora--two { right: 8vw; bottom: -14vh; width: 32vw; height: 24vw; background: var(--cyan); animation-delay: -3s; }
.speed-field { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; opacity: calc(.25 + var(--scroll-energy) * .5); }
.speed-field i { position: absolute; left: -28%; width: clamp(150px, 20vw, 420px); height: 1px; background: linear-gradient(90deg, transparent, rgba(39,232,255,.8), transparent); box-shadow: 0 0 8px currentColor; animation: speed-line calc(3.4s - var(--scroll-energy) * 2.4s) linear infinite; }
.speed-field i:nth-child(1) { top: 20%; animation-delay: -.2s; }
.speed-field i:nth-child(2) { top: 31%; width: 28vw; color: var(--pink); animation-delay: -1.5s; }
.speed-field i:nth-child(3) { top: 46%; width: 16vw; color: var(--lime); animation-delay: -2.2s; }
.speed-field i:nth-child(4) { top: 61%; width: 34vw; animation-delay: -.8s; }
.speed-field i:nth-child(5) { top: 72%; color: var(--gold); animation-delay: -2.8s; }
.speed-field i:nth-child(6) { top: 84%; width: 24vw; color: var(--pink); animation-delay: -1.1s; }
.scroll-cue { position: absolute; z-index: 8; left: 5vw; bottom: 28px; display: flex; align-items: center; gap: 16px; color: rgba(255,255,255,.56); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }
.scroll-cue i { width: 70px; height: 1px; overflow: hidden; background: rgba(255,255,255,.2); }
.scroll-cue i::after { content: ""; display: block; width: 42%; height: 100%; background: var(--lime); animation: cue 1.7s ease-in-out infinite; }

.section-heading { position: relative; z-index: 5; width: 52vw; }
.section-heading p:last-child { width: min(480px, 80%); margin: 28px 0 0 20%; color: var(--muted); font-size: clamp(14px, 1vw, 18px); line-height: 1.6; }
.mission-card { position: absolute; z-index: 7; right: 5vw; top: 19vh; width: min(340px, 24vw); padding: 22px; }
.glass-card { border: 1px solid rgba(255,255,255,.2); border-radius: 22px; background: rgba(9,6,29,.48); box-shadow: 0 18px 50px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.14); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.mission-card__label { color: var(--cyan); font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.mission-card strong { display: block; margin: 13px 0 18px; font-size: clamp(18px, 1.5vw, 28px); letter-spacing: -.03em; }
.mission-card__line { height: 3px; background: rgba(255,255,255,.12); }
.mission-card__line i { display: block; width: calc(var(--page-progress) * 100%); height: 100%; background: linear-gradient(90deg, var(--pink), var(--lime)); box-shadow: 0 0 16px var(--pink); }
.mission-card small { display: block; margin-top: 14px; color: rgba(255,255,255,.48); font-size: 8px; letter-spacing: .12em; }
.tunnel-rings { position: absolute; z-index: -1; right: -8vw; bottom: -18vw; width: 62vw; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; transform: perspective(600px) rotateX(66deg); }
.tunnel-rings i { position: absolute; inset: calc(var(--i, 1) * 10%); border: 1px solid rgba(39,232,255,.18); border-radius: 50%; }
.tunnel-rings i:nth-child(1) { --i: 1; }
.tunnel-rings i:nth-child(2) { --i: 2; }
.tunnel-rings i:nth-child(3) { --i: 3; }
.tunnel-rings i:nth-child(4) { --i: 4; }
.track { position: absolute; z-index: 2; left: -5%; right: -5%; bottom: 10.5vh; height: 5px; transform: rotate(-.7deg); background: linear-gradient(90deg, transparent, rgba(39,232,255,.35) 8%, rgba(255,255,255,.65) 48%, rgba(207,255,77,.5) 84%, transparent); box-shadow: 0 0 18px rgba(39,232,255,.55); }
.track::before, .track::after { content: ""; position: absolute; top: 14px; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(241,69,255,.36), transparent); }
.track::after { top: -16px; }
.track i { position: absolute; top: -7px; left: 0; width: 180px; height: 18px; border-radius: 50%; background: var(--cyan); filter: blur(18px); animation: track-light 3s linear infinite; }
.side-note { position: absolute; z-index: 4; right: 4vw; bottom: 16vh; color: rgba(255,255,255,.42); font-size: 9px; letter-spacing: .2em; writing-mode: vertical-rl; }

.energy-orb { --orb: 70px; position: absolute; z-index: 14; width: var(--orb); aspect-ratio: 1; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; padding: 0; display: grid; place-items: center; color: white; background: radial-gradient(circle at 35% 28%, white 0 5%, var(--gold) 8%, #ff8a00 24%, var(--pink) 48%, #672df7 68%, #0be5ff 83%); box-shadow: 0 0 15px #fff, 0 0 38px rgba(255,204,85,.72), inset -12px -14px 20px rgba(6,3,30,.45); cursor: pointer; animation: orb-float 2.8s ease-in-out infinite, orb-spin 5s linear infinite; transition: opacity .4s ease, transform .45s cubic-bezier(.2,.9,.25,1.4), filter .4s ease; }
.energy-orb::before, .energy-orb::after { content: ""; position: absolute; inset: -9px; border: 1px dashed rgba(255,255,255,.4); border-radius: inherit; animation: halo-spin 7s linear infinite; }
.energy-orb::after { inset: -18px; border-color: rgba(39,232,255,.18); animation-direction: reverse; }
.energy-orb span { font-size: 10px; font-weight: 950; letter-spacing: .06em; text-shadow: 0 1px 6px #290242; }
.energy-orb:hover, .energy-orb:focus-visible { filter: brightness(1.25); outline: 2px solid var(--lime); outline-offset: 8px; }
.energy-orb.is-collected { opacity: 0; transform: scale(2.8) rotate(90deg) !important; filter: brightness(2) blur(10px); pointer-events: none; }
.orb--hero-1 { --orb: 58px; left: 51%; top: 23%; animation-delay: -.6s; }
.orb--hero-2 { --orb: 42px; right: 7%; top: 44%; animation-delay: -1.7s; }
.orb--sprint-1 { left: 18%; bottom: 22%; }
.orb--sprint-2 { left: 38%; bottom: 19%; --orb: 56px; }
.orb--sprint-3 { left: 59%; bottom: 26%; --orb: 82px; }
.orb--sprint-4 { left: 81%; bottom: 20%; --orb: 48px; }
.orb--lore-1 { left: 12%; bottom: 12%; --orb: 48px; }
.orb--lore-2 { right: 13%; bottom: 18%; --orb: 62px; }
.orb--road-1 { left: 15%; bottom: 9%; --orb: 44px; }
.orb--road-2 { left: 48%; bottom: 10%; --orb: 64px; }
.orb--road-3 { right: 12%; bottom: 13%; --orb: 50px; }
.orb--signal { right: 13%; top: 24%; --orb: 80px; }

.screen--lore { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 3vw; }
.screen--lore .scene-bg::after { background: linear-gradient(90deg, rgba(7,5,26,.9) 0%, rgba(7,5,26,.48) 48%, rgba(7,5,26,.14)), linear-gradient(180deg, rgba(7,5,26,.28), rgba(7,5,26,.6)); }
.lore-copy { position: relative; z-index: 5; width: min(700px, 100%); }
.lore-copy h2 { font-size: clamp(58px, 6.1vw, 118px); }
.lore-copy > p:not(.eyebrow) { width: min(640px, 88%); color: var(--muted); font-size: clamp(13px, .94vw, 18px); line-height: 1.6; }
.lore-copy .lore-lead { margin: 28px 0 16px 10%; color: white; font-size: clamp(16px, 1.2vw, 23px); line-height: 1.48; }
.lore-copy blockquote { margin: 26px 0 0 10%; padding: 14px 0 14px 22px; border-left: 2px solid var(--lime); color: var(--lime); font-size: clamp(15px, 1.12vw, 21px); font-weight: 750; font-style: italic; line-height: 1.4; }
.lore-visual { position: absolute; z-index: 3; right: 2vw; bottom: -10%; width: min(51vw, 860px); height: 102%; display: grid; place-items: center; pointer-events: none; }
.lore-visual img { position: relative; z-index: 2; width: 83%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 38px 35px rgba(0,0,0,.55)); animation: hero-float 5.4s ease-in-out infinite reverse; }
.orbital-grid { position: absolute; width: 70%; aspect-ratio: 1; border: 1px solid rgba(39,232,255,.23); border-radius: 50%; box-shadow: 0 0 0 60px rgba(142,77,255,.04), 0 0 0 120px rgba(39,232,255,.025); }
.orbital-grid::after { content: ""; position: absolute; inset: 13%; border: 1px dashed rgba(207,255,77,.28); border-radius: inherit; animation: halo-spin 16s linear infinite; }
.mood-tag { position: absolute; z-index: 4; padding: 8px 12px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; background: rgba(7,5,26,.48); font-size: 9px; font-weight: 900; letter-spacing: .14em; backdrop-filter: blur(10px); }
.mood-tag--one { top: 24%; left: 7%; transform: rotate(-8deg); }
.mood-tag--two { right: 5%; bottom: 27%; transform: rotate(7deg); }
.lore-facts { position: absolute; z-index: 6; left: 5vw; right: 5vw; bottom: 4.5vh; display: grid; grid-template-columns: repeat(3, 1fr); max-width: 51vw; border-top: 1px solid rgba(255,255,255,.18); }
.lore-facts > div { display: grid; grid-template-columns: 36px 1fr; padding: 16px 18px 0 0; border-right: 1px solid rgba(255,255,255,.14); }
.lore-facts > div:last-child { border-right: 0; padding-left: 18px; }
.lore-facts span { grid-row: 1 / 3; color: var(--cyan); font-size: 9px; }
.lore-facts strong { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.lore-facts p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }

.screen--roadmap { padding-top: clamp(104px, 10vh, 126px); }
.roadmap-head { position: relative; z-index: 5; display: flex; align-items: end; justify-content: space-between; }
.roadmap-head h2 { font-size: clamp(58px, 5.7vw, 110px); }
.roadmap-grid { position: relative; z-index: 6; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: clamp(26px, 4vh, 48px); }
.road-card { min-height: min(43vh, 460px); padding: clamp(18px, 1.6vw, 30px); border: 1px solid rgba(255,255,255,.14); border-radius: 26px; background: linear-gradient(145deg, rgba(20,12,54,.66), rgba(7,5,26,.4)); box-shadow: inset 0 1px rgba(255,255,255,.08); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); transition: transform .35s ease, border-color .35s ease, background .35s ease; }
.road-card:hover { transform: translateY(-10px); border-color: rgba(39,232,255,.5); background: linear-gradient(145deg, rgba(34,19,80,.78), rgba(7,5,26,.5)); }
.road-card.is-live { border-color: rgba(207,255,77,.42); box-shadow: 0 0 42px rgba(207,255,77,.06), inset 0 1px rgba(255,255,255,.14); }
.road-card__number { color: rgba(255,255,255,.34); font-size: 11px; }
.road-card__state { float: right; padding: 5px 8px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: var(--cyan); font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.road-card.is-live .road-card__state { color: var(--ink); background: var(--lime); }
.road-card h3 { margin: clamp(34px, 5vh, 64px) 0 18px; font-size: clamp(24px, 2.1vw, 40px); text-transform: uppercase; letter-spacing: -.04em; }
.road-card p { min-height: 70px; color: var(--muted); font-size: clamp(12px, .82vw, 15px); line-height: 1.5; }
.road-card ul { margin: 24px 0 0; padding: 16px 0 0; border-top: 1px solid rgba(255,255,255,.12); list-style: none; color: rgba(255,255,255,.72); font-size: 10px; line-height: 2; letter-spacing: .09em; text-transform: uppercase; }
.road-card li::before { content: "✦"; margin-right: 8px; color: var(--gold); }

.screen--signal { display: flex; align-items: center; }
.signal-sun { position: absolute; z-index: -1; left: 55%; top: 50%; width: min(56vw, 900px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle, white 0 3%, #fff2bb 6%, var(--gold) 16%, rgba(255,150,41,.33) 34%, transparent 68%); filter: blur(.2px); opacity: .64; animation: sun-pulse 4s ease-in-out infinite; }
.signal-content { position: relative; z-index: 6; width: min(63vw, 1050px); }
.signal-content h2 { font-size: clamp(70px, 8.3vw, 160px); }
.signal-content > p:not(.eyebrow) { width: min(520px, 54%); margin: 28px 0; color: var(--muted); line-height: 1.6; }
.signal-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.mega-ca, .social-link { min-height: 66px; border: 1px solid rgba(255,255,255,.22); border-radius: 18px; display: flex; align-items: center; justify-content: space-between; background: rgba(7,5,26,.54); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); cursor: pointer; text-decoration: none; transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.mega-ca { min-width: 300px; padding: 0 22px; }
.mega-ca span { font-size: clamp(15px, 1.2vw, 22px); font-weight: 900; }
.mega-ca i { color: var(--lime); font-size: 8px; font-style: normal; letter-spacing: .12em; }
.social-link { min-width: 180px; padding: 0 18px; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.social-link b { color: var(--cyan); font-size: 20px; }
.mega-ca:hover, .social-link:hover, .mega-ca:focus-visible, .social-link:focus-visible { transform: translateY(-4px); border-color: var(--cyan); background: rgba(39,232,255,.08); }
.signal-character { position: absolute; z-index: 3; right: -5vw; bottom: -25%; width: min(48vw, 780px); height: 102%; pointer-events: none; }
.signal-character img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)); transform: rotate(-12deg); }
.final-note { position: absolute; z-index: 7; left: 5vw; bottom: 25px; margin: 0; color: rgba(255,255,255,.48); font-size: 9px; letter-spacing: .2em; }

.runner-layer { position: fixed; z-index: 52; left: 0; right: 0; bottom: 5.4vh; height: clamp(120px, 19vh, 205px); pointer-events: none; opacity: var(--runner-opacity); transition: opacity .45s ease; will-change: opacity; }
.runner-wrap { position: absolute; left: var(--run-x); bottom: 0; width: clamp(190px, 21vw, 400px); height: 100%; transform: translateX(-18%) rotate(var(--run-tilt)); transform-origin: 50% 80%; animation: runner-bob calc(.42s - var(--scroll-energy) * .16s) ease-in-out infinite alternate; will-change: left, transform; }
.runner-wrap img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: contain; object-position: center; filter: drop-shadow(0 12px 20px rgba(0,0,0,.55)); }
.runner-shadow { position: absolute; z-index: 0; left: 23%; right: 14%; bottom: -4px; height: 15px; border-radius: 50%; background: rgba(0,0,0,.72); filter: blur(8px); animation: shadow-bob .4s ease-in-out infinite alternate; }
.runner-trail { position: absolute; left: 0; bottom: 27%; width: calc(var(--run-x) + 2vw); height: 42%; overflow: hidden; }
.runner-trail i { position: absolute; right: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--cyan)); box-shadow: 0 0 15px currentColor; opacity: calc(.4 + var(--scroll-energy) * .6); transform-origin: right center; animation: trail-wave .55s ease-in-out infinite alternate; }
.runner-trail i:nth-child(1) { top: 15%; color: var(--cyan); }
.runner-trail i:nth-child(2) { top: 36%; color: var(--pink); animation-delay: -.18s; transform: scaleX(.78); }
.runner-trail i:nth-child(3) { top: 57%; color: var(--lime); animation-delay: -.3s; transform: scaleX(.62); }
.runner-trail i:nth-child(4) { top: 77%; color: var(--gold); animation-delay: -.42s; transform: scaleX(.48); }

.toast { position: fixed; z-index: 300; left: 50%; bottom: 28px; padding: 13px 18px; border: 1px solid rgba(207,255,77,.45); border-radius: 999px; color: var(--ink); background: var(--lime); box-shadow: 0 12px 38px rgba(0,0,0,.32), 0 0 24px rgba(207,255,77,.24); font-size: 10px; font-weight: 950; letter-spacing: .12em; transform: translate(-50%, 120px); transition: transform .45s cubic-bezier(.16,1,.3,1); }
.toast.is-visible { transform: translate(-50%, 0); }
.noscript { position: fixed; z-index: 999; left: 20px; right: 20px; bottom: 20px; margin: 0; padding: 14px; border-radius: 12px; color: var(--ink); background: var(--lime); text-align: center; }

.reveal { opacity: 0; transform: translateY(34px); transition: opacity .85s ease, transform .85s cubic-bezier(.16,1,.3,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.road-card:nth-child(2) { transition-delay: .08s; }
.road-card:nth-child(3) { transition-delay: .16s; }
.road-card:nth-child(4) { transition-delay: .24s; }

@keyframes hero-float { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-16px) rotate(1deg); } }
@keyframes halo-spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { opacity: .52; transform: scale(1.12); } }
@keyframes speed-line { from { transform: translateX(0); } to { transform: translateX(155vw); } }
@keyframes cue { 0% { transform: translateX(-110%); } 50%,100% { transform: translateX(260%); } }
@keyframes orb-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes orb-spin { 50% { box-shadow: 0 0 12px #fff, 0 0 48px rgba(241,69,255,.78), inset -12px -14px 20px rgba(6,3,30,.45); } }
@keyframes track-light { from { transform: translateX(-15vw); } to { transform: translateX(115vw); } }
@keyframes sun-pulse { 50% { opacity: .78; transform: translate(-50%,-50%) scale(1.05); } }
@keyframes runner-bob { from { translate: 0 0; scale: 1 .97; } to { translate: 0 -6px; scale: 1.015 1; } }
@keyframes shadow-bob { to { transform: scaleX(.78); opacity: .55; } }
@keyframes trail-wave { to { translate: 0 5px; filter: blur(1px); } }

@media (max-width: 1100px) {
  .screen { padding-inline: 36px; }
  .topbar { grid-template-columns: 1fr auto; }
  .nav-links { display: none; }
  .hero-copy { width: 62vw; }
  .hero-visual { right: -10vw; width: 64vw; }
  .hero-title { font-size: 18vw; }
  .hero-kicker, .hero-intro, .hero-actions { margin-left: 12%; }
  .section-heading { width: 68vw; }
  .mission-card { width: 280px; }
  .roadmap-grid { grid-template-columns: repeat(2, 1fr); }
  .road-card { min-height: 270px; }
  .screen--roadmap { height: auto; max-height: none; min-height: 100svh; }
  .lore-copy { width: 58vw; }
  .lore-visual { right: -8vw; width: 60vw; }
  .lore-facts { max-width: 62vw; }
}

@media (max-width: 720px), (orientation: portrait) and (max-width: 900px) {
  html { scroll-snap-type: none; }
  .topbar { height: 64px; padding-inline: 18px; }
  .wordmark { font-size: 14px; }
  .wordmark__sun { width: 18px; }
  .spark-meter { font-size: 8px; }
  .page-progress { top: 63px; }
  .screen { height: auto; max-height: none; min-height: 100svh; padding: 98px 22px 80px; }
  .screen::before { right: 18px; bottom: 16px; }
  .scene-bg { inset: -3%; }
  .hero-copy { width: 100%; margin-top: 0; }
  .hero-title { font-size: clamp(92px, 29vw, 150px); }
  .hero-kicker { margin-top: 34px; margin-left: 0; }
  .hero-kicker::before { display: none; }
  .hero-intro, .hero-actions { margin-left: 0; width: 92%; }
  .hero-visual { position: relative; right: auto; bottom: -70px; width: 100%; height: 54vh; margin-top: -30px; }
  .hero-character { width: 100%; height: 100%; }
  .hero-halo { width: 86vw; right: 0; top: 5%; }
  .orbit-label { display: none; }
  .scroll-cue { display: none; }
  h2 { font-size: clamp(60px, 18vw, 94px); }
  .section-heading { width: 100%; }
  .section-heading p:last-child { width: 88%; margin-left: 0; }
  .mission-card { position: relative; top: auto; right: auto; width: 100%; margin-top: 30px; }
  .track { bottom: 10vh; }
  .side-note { display: none; }
  .energy-orb { --orb: 46px; }
  .orb--hero-1 { left: 70%; top: 32%; }
  .orb--hero-2 { display: none; }
  .orb--sprint-1 { left: 14%; }
  .orb--sprint-2 { left: 36%; }
  .orb--sprint-3 { left: 61%; }
  .orb--sprint-4 { left: 82%; }
  .screen--lore { display: block; padding-bottom: 0; }
  .lore-copy { width: 100%; }
  .lore-copy .lore-lead, .lore-copy blockquote { margin-left: 0; }
  .lore-copy > p:not(.eyebrow) { width: 100%; }
  .lore-visual { position: relative; right: auto; bottom: -42px; width: 100%; height: 58vh; }
  .lore-facts { position: relative; left: auto; right: auto; bottom: auto; max-width: none; grid-template-columns: 1fr; margin-top: 30px; padding-bottom: 40px; }
  .lore-facts > div, .lore-facts > div:last-child { padding: 12px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .roadmap-grid { grid-template-columns: 1fr; }
  .road-card { min-height: 0; }
  .road-card h3 { margin-top: 32px; }
  .road-card p { min-height: 0; }
  .screen--signal { min-height: 1050px; align-items: start; }
  .signal-content { width: 100%; }
  .signal-content > p:not(.eyebrow) { width: 100%; }
  .signal-actions { display: grid; }
  .mega-ca, .social-link { min-width: 0; width: 100%; }
  .signal-character { right: -30%; bottom: -12%; width: 110vw; height: 58%; opacity: .78; }
  .signal-sun { left: 64%; width: 110vw; }
  .runner-layer { bottom: 4vh; height: 120px; }
  .runner-wrap { width: 210px; }
  #fx-canvas { opacity: .5; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  #fx-canvas, .runner-trail, .cursor-light { display: none; }
}