/* ============================================================
   SuppLux — A Smarter Path from Spec to Site
   Ball-driven pathway · levo word reveals · white/blue/black
   day-cycle transits with tech scenery
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --blue:#2f6dff;
  --blue-soft:#8bb7ff;
  --blue-deep:#173bb3;
  --blue-ice:#c7ddff;
  --night:#060b13;
  --night-2:#0b1422;
  --blue-bg:linear-gradient(180deg,#3f75ff 0%,#2462e8 46%,#153fae 100%);
  --blue-bg-2:linear-gradient(180deg,#2a58df 0%,#1a47bf 46%,#0e2f86 100%);
  --ink:#080d17;
  --paper:#f7f9fd;
  --paper-2:#eef3fa;
  --line:rgba(8,13,23,.12);
  --gutter:190px;
  --nav-h:76px;
  --radius:14px;
  --ease:cubic-bezier(.19,1,.22,1);
  --ease-levo:cubic-bezier(.22,.61,.36,1);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--nav-h) + 12px)}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.55;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-synthesis:none;
}
img{max-width:100%;display:block}
a{color:inherit}
main{display:block}
::selection{background:rgba(34,119,255,.22)}

/* ---------- layout: pathway gutter + content ---------- */
.wrap{
  display:grid;
  grid-template-columns:var(--gutter) minmax(0,1fr);
  width:100%;
}
.sec-content{min-width:0;padding-right:clamp(20px,6vw,96px)}
.sec-content > *{max-width:1240px}

/* ---------- global pathway ---------- */
#pathway{
  position:absolute;top:0;left:0;
  width:var(--gutter);
  z-index:25;
  pointer-events:none;
  overflow:visible;
}
.p-track{fill:none;stroke:rgba(34,119,255,.18);stroke-width:1.5;stroke-dasharray:2 16;animation:trackFlow 36s linear infinite}
.p-line{
  fill:none;stroke:var(--blue);stroke-width:2.2;
  filter:drop-shadow(0 0 5px rgba(159,194,255,.6));
}
.pnode text{font-family:var(--font)}
.pnode-ring{
  fill:rgba(34,119,255,.14);stroke:var(--blue);stroke-width:1.5;
  transition:fill .5s var(--ease);
}
.pnode-num{
  fill:var(--blue);font-size:10px;font-weight:700;
  text-anchor:middle;dominant-baseline:central;
  transition:fill .5s var(--ease);
}
.pnode.is-lit .pnode-ring{fill:var(--blue)}
.pnode.is-lit .pnode-num{fill:#fff}
.pnode-halo{
  fill:none;stroke:rgba(34,119,255,.45);stroke-width:1.2;opacity:0;
  transform-box:fill-box;transform-origin:center;
}
.pnode.is-lit .pnode-halo{animation:haloPulse 2.4s var(--ease) infinite}
.pnode.is-lit .pnode-ring{animation:dockPing 2.4s var(--ease) infinite}
@keyframes dockPing{
  0%{stroke-width:1.5;filter:none}
  45%{stroke-width:2.6;filter:drop-shadow(0 0 6px rgba(34,119,255,.8))}
  100%{stroke-width:1.5;filter:none}
}
.pmark{fill:var(--blue)}
@keyframes haloPulse{
  0%{transform:scale(.62);opacity:.75}
  70%{transform:scale(1.75);opacity:0}
  100%{transform:scale(1.75);opacity:0}
}

/* node labels (HTML, positioned by JS) */
#pathway-labels{
  position:absolute;top:0;left:0;
  width:var(--gutter);
  z-index:24;
  pointer-events:none;
}
.plabel{
  position:absolute;
  width:150px;
  font-size:9px;font-weight:700;
  letter-spacing:.16em;line-height:1.7;
  color:#51608a;
  opacity:.75;
  transition:opacity .4s,color .4s;
}
.plabel.is-dark{color:#8ba0cf}
.plabel.is-blue{color:rgba(255,255,255,.82)}
.plabel.is-lit{opacity:1}

/* ---------- the 3D ball ---------- */
#ball{
  position:absolute;left:0;top:0;
  width:46px;height:46px;
  z-index:26;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(circle at 32% 26%,
    #ffffff 0%,#e9f5ff 6%,#b9daff 18%,#6ca5ff 36%,#2f7dff 52%,#174fd8 68%,#0a2a9e 84%,#051a68 94%,#030e42 100%);
  box-shadow:
    inset -10px -12px 24px rgba(0,10,45,.62),
    inset 5px 6px 14px rgba(255,255,255,.5);
  will-change:transform;
}
#ball::after{
  content:"";position:absolute;left:21%;top:14%;
  width:24%;height:20%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,255,255,0) 70%);
}


.ball-sheen{
  position:absolute;inset:-4px;border-radius:50%;
  background:conic-gradient(from 0deg,
    transparent 0 70%,rgba(255,255,255,.38) 82%,transparent 94%);
  animation:ballRoll 3.4s linear infinite;
  opacity:.9;
}
@keyframes ballRoll{to{transform:rotate(360deg)}}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  color:var(--ink);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease);
}
.nav.is-dark{color:#fff}
.nav.is-scrolled{
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-color:rgba(11,12,16,.08);
}
.nav.is-scrolled.is-dark{
  background:rgba(11,12,16,.8);
  border-color:rgba(255,255,255,.08);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:var(--nav-h);
  padding:0 clamp(20px,4vw,56px);
}
.nav-brand{line-height:0}
.nav-brand img{height:24px;width:auto}
.nav-brand .logo-light{display:none}
.nav.is-dark .logo-light{display:block}
.nav.is-dark .logo-dark{display:none}
.nav-links{display:flex;gap:clamp(15px,2.2vw,34px)}
.nav-links a{
  position:relative;
  font-size:14px;font-weight:500;text-decoration:none;
  color:inherit;opacity:.82;
  transition:opacity .3s;
}
.nav-links a:hover{opacity:1}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:1.5px;
  background:currentColor;
  transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-cta{
  padding:10px 20px;border-radius:999px;
  background:var(--blue);color:#fff;
  white-space:nowrap;
  font-size:13.5px;font-weight:600;text-decoration:none;
  transition:background .3s,transform .3s var(--ease),box-shadow .3s;
}
.nav-cta:hover{
  background:var(--blue-deep);
  transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(34,119,255,.32);
}

@keyframes levo-font-in{
  0%{opacity:0;transform:translateY(28px);filter:blur(8px)}
  100%{opacity:1;transform:translateY(0);filter:blur(0)}
}

/* ---------- opening copy reveal ----------
   Each title line is its own mask, and the words inside rise out of it one
   after another. The Earth holds the first beat on its own; the delays that
   space the rest out come from script.js. */
.js [data-words] .w{
  display:inline-block;vertical-align:top;
}
.js [data-words] .wi{
  display:inline-block;
  opacity:0;
  transform:translateY(calc(100% + .42em));
  filter:blur(6px);
  transition:
    opacity 1.05s var(--ease-levo) var(--d,0s),
    transform 1.15s var(--ease-levo) var(--d,0s),
    filter 1.05s var(--ease-levo) var(--d,0s);
  will-change:opacity,transform,filter;
}
.js [data-words].is-in .wi{opacity:1;transform:translateY(0);filter:blur(0)}
.wi.is-accent{color:var(--blue)}
.theme-blue .wi.is-accent,.theme-dark .wi.is-accent{color:#9fc2ff}

.js #hero .chapter-kicker,
.js #hero [data-words],
.js #hero .hero-cta{
  animation:levo-font-in 1.05s cubic-bezier(.22,.61,.36,1) both;
}
.js #hero .chapter-kicker{animation-delay:.08s}
.js #hero .hero-title .hero-line:first-child{animation-delay:.20s}
.js #hero .hero-title .hero-line:nth-child(2){animation-delay:.32s}
.js #hero .hero-sub{animation-delay:.44s}
.js #hero .hero-cta{animation-delay:.56s}
.js #hero [data-words] .wi{
  opacity:1;
  transform:none;
  filter:none;
  transition:none;
}

/* generic reveal (hero / transit copy) */
.js [data-reveal]{
  opacity:0;transform:translateY(28px);filter:blur(8px);
  transition:
    opacity 1.05s var(--ease-levo) var(--d,0s),
    transform 1.05s var(--ease-levo) var(--d,0s),
    filter 1.05s var(--ease-levo) var(--d,0s);
}
.js [data-reveal].is-in{opacity:1;transform:none;filter:blur(0)}

/* ============================================================
   SCROLL-DRIVEN STORYTELLING (chapters)

   Nothing here is timed. script.js writes every value as a pure function of
   scroll position, in this order:

     chapter marker -> label -> headline (one masked line at a time) ->
     the emphasised phrase finishes last -> supporting copy prints word by
     word -> supporting detail -> CTA -> HOLD -> the text gives way.

   The headline masks are the one piece of composition CSS has to do: the
   inner line rides on --rise (1 = out of frame, 0 = seated), and the mask
   keeps a little padding so descenders are never clipped while the layout
   height stays exactly what it was.
   ============================================================ */
.chapter{--syn:0;--exit:0}
/* a column of flex items so the masks' padding and its canceling negative
   margin are honoured literally - the line boxes keep exactly their old
   layout height and the sections do not move by a single pixel */
.js .lines{display:flex;flex-direction:column;align-items:stretch}
.js .ln{
  display:block;
  overflow:hidden;
  /* the mask breathes above and below the line box so ascenders and
     descenders are never trimmed, while the negative margin keeps the
     section's layout height exactly what it was */
  padding:.12em 0 .16em;
  margin:-.12em 0 -.16em;
}
.js .ln-i{
  display:block;
  transform:translate3d(0,calc(var(--rise,1) * (100% + .4em)),0);
  will-change:transform;
}
.js .ln .w{display:inline-block;will-change:filter,opacity,color}
.js .chapter-title .w,.js .finale-title .w{will-change:filter,opacity,color}

/* the message gives way once the Earth has left the node */
.js [data-syncsec] .chapter-copy,
.js [data-syncsec] .chapter-media{opacity:calc(1 - var(--exit,0))}
.js [data-syncsec] .chapter-copy{transform:translate3d(0,calc(var(--exit,0) * -26px),0)}

/* levo crawl: scroll-driven per-word paint-in (blur -> sharp, gray -> colour) */
.js .crawl .w{
  display:inline-block;
  will-change:filter,opacity,color;
}

/* ---------- themes ---------- */
.theme-light{background:var(--paper);color:var(--ink)}
.theme-dark{background:var(--ink);color:#f2f4fa}
.theme-blue{background:var(--blue-bg);color:#fff}
.theme-blue.pattern-radar{background:var(--blue-bg-2)}

.chapter,.hero{position:relative;overflow:hidden}
.chapter::before,.hero .hero-grid{
  content:"";position:absolute;inset:0;
  pointer-events:none;z-index:0;
}
.chapter-copy,.chapter-media,.finale-inner{position:relative;z-index:1}

/* section tech patterns — every background different */
.pattern-circuit::before{
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),
    radial-gradient(circle at 22% 34%,rgba(255,255,255,.18) 1.5px,transparent 2.6px),
    radial-gradient(circle at 74% 62%,rgba(255,255,255,.15) 1.5px,transparent 2.6px);
  background-size:64px 64px,64px 64px,150px 150px,190px 190px;
}
.pattern-constellation::before{
  background-image:
    radial-gradient(rgba(93,149,255,.42) 1px,transparent 2.1px),
    radial-gradient(rgba(93,149,255,.26) 1px,transparent 2.1px),
    radial-gradient(ellipse at 82% 18%,rgba(34,119,255,.18),transparent 62%);
  background-size:96px 96px,58px 58px,100% 100%;
}
.pattern-diag::before{
  background-image:
    repeating-linear-gradient(45deg,rgba(11,12,16,.035) 0 1px,transparent 1px 26px),
    radial-gradient(circle at 14% 84%,rgba(34,119,255,.08),transparent 55%);
}
.pattern-radar::before{
  background-image:
    radial-gradient(circle,transparent 0 90px,rgba(255,255,255,.1) 91px 92px,transparent 93px),
    radial-gradient(circle,transparent 0 180px,rgba(255,255,255,.08) 181px 182px,transparent 183px),
    radial-gradient(circle,transparent 0 270px,rgba(255,255,255,.06) 271px 272px,transparent 273px),
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:640px 640px,640px 640px,640px 640px,64px 64px,64px 64px;
  background-position:82% 55%,82% 55%,82% 55%,0 0,0 0;
}
.pattern-starfield::before{
  background-image:
    radial-gradient(rgba(159,194,255,.5) 1px,transparent 1.7px),
    radial-gradient(rgba(159,194,255,.3) 1px,transparent 1.7px),
    radial-gradient(ellipse at 50% 108%,rgba(34,119,255,.32),transparent 62%);
  background-size:64px 64px,38px 38px,100% 100%;
}

/* ---------- hero (landing) ---------- */
/* split stage: copy left, the SuppLux X + traveling sphere right */
.hero{
  min-height:100vh;
  min-height:100svh;
  display:flex;align-items:center;
  padding:calc(var(--nav-h) + 28px) 0 44px;
}
.hero .wrap{display:block;width:100%}
.hero .sec-gutter{display:none}
.hero .sec-content{min-width:0;padding:0}
.hero .sec-content > *{max-width:none}
.hero-inner{
  display:grid;
  grid-template-columns:minmax(0,560px) minmax(0,580px);
  justify-content:center;align-items:center;
  gap:clamp(28px,4.5vw,56px);
  padding:0 clamp(24px,5vw,72px);
}
.hero-copy{position:relative;z-index:5;text-align:left}
.hero-grid{
  background-image:
    linear-gradient(rgba(11,12,16,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,12,16,.045) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(130% 95% at 70% 10%,#000 22%,transparent 70%);
  mask-image:radial-gradient(130% 95% at 70% 10%,#000 22%,transparent 70%);
}
.hero-glow{
  position:absolute;right:-220px;top:-260px;
  width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,rgba(34,119,255,.13),transparent 62%);
  pointer-events:none;
}
.eyebrow{
  display:inline-block;position:relative;
  margin:0 0 24px;
  padding:0 19px;
  font-size:11px;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--blue);
}
.eyebrow::before{
  content:"";position:absolute;left:0;top:50%;
  width:7px;height:7px;border-radius:50%;
  transform:translateY(-50%);
  background:var(--blue);
  box-shadow:0 0 0 5px rgba(34,119,255,.14);
}
.hero-title{
  margin:0;max-width:none;
  font-size:clamp(40px,4.5vw,60px);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.04em;
}
.hero-title .hero-line{display:block}
.hero-sub{
  margin:20px 0 0;max-width:46ch;
  font-size:clamp(16px,1.45vw,20px);
  line-height:1.5;
  color:#4b5468;
}
.hero-cta{
  display:flex;gap:14px;margin-top:26px;flex-wrap:wrap;justify-content:flex-start;
  position:relative;z-index:30;
}

/* ---------- hero mark: the SuppLux X with the sphere at its heart ---------- */
.hero-mark{
  position:relative;z-index:2;
  width:100%;max-width:580px;
  aspect-ratio:458/449;
  margin-inline:auto;
  pointer-events:none;
  transition:opacity .5s linear;
}
.hero-x{
  position:absolute;inset:0;width:100%;height:100%;
  overflow:visible;
}
.blade{
  fill:#0b0c10;
  transform-origin:229px 224.5px;
  animation:bladeIn 1.5s var(--ease-levo) both;
}
.blade-l{animation-delay:.15s}
.blade-r{animation-delay:.42s}
@keyframes bladeIn{
  from{transform:scale(.34);opacity:0}
  to{transform:scale(1);opacity:1}
}
.flow{fill:none;stroke:none}
.energy .dot-halo{fill:rgba(207,228,255,.35)}
.energy .dot-core{fill:#cfe4ff}
.hero-glow-orb{
  position:absolute;left:50%;top:50%;
  width:320px;height:320px;margin:-160px 0 0 -160px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(34,119,255,.26),rgba(34,119,255,.1) 46%,transparent 70%);
  animation:orbBreathe 3.8s ease-in-out infinite;
}
@keyframes orbBreathe{
  0%,100%{transform:scale(1);opacity:.72}
  50%{transform:scale(1.14);opacity:1}
}
/* script.js anchors the traveling sphere to the center of this slot */
.hero-ball-slot{
  position:absolute;left:50%;top:50%;
  width:190px;height:190px;margin:-95px 0 0 -95px;
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 26px;
  border:1px solid transparent;border-radius:999px;
  font-size:15px;font-weight:600;line-height:1;text-decoration:none;
  white-space:nowrap;
  transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease),box-shadow .3s;
}
.btn-ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.btn-solid{background:var(--blue);color:#fff}
.btn-solid:hover{
  background:var(--blue-deep);
  transform:translateY(-2px);
  box-shadow:0 16px 38px rgba(34,119,255,.32);
}
.btn-ghost{border-color:rgba(11,12,16,.22);color:var(--ink)}
.btn-ghost:hover{background:rgba(34,119,255,.08);border-color:rgba(34,119,255,.55)}
.theme-dark .btn-ghost,.theme-blue .btn-ghost{border-color:rgba(255,255,255,.3);color:#fff}
.theme-dark .btn-ghost:hover,.theme-blue .btn-ghost:hover{background:rgba(34,119,255,.2);border-color:rgba(159,194,255,.7)}

/* ============================================================
   TRANSITS · white ⇄ blue ⇄ black, tech scenery
   ============================================================ */
.transit{
  position:relative;
  height:125vh;
  --t:0;
}
.transit-sticky{
  position:sticky;top:0;
  height:100vh;
  overflow:hidden;
}
.sky-base,.sky-layer,.transit-horizon,.transit-grid{
  position:absolute;inset:0;
}
.transit--wb .sky-base{background:#ffffff}
.transit--bk .sky-base{background:var(--blue-bg)}
.transit--kw .sky-base{background:#0b0c10}

.sky-layer{opacity:0;z-index:2;will-change:opacity}
.sky-white{background:#ffffff}
.sky-blue{background:var(--blue-bg)}
.sky-dusk{background:linear-gradient(180deg,#7a5cff 0%,#4327b8 55%,#101a38 100%)}
.sky-black{background:#0b0c10}

.transit-celestial{
  position:absolute;inset:0;
  width:100%;height:100%;
  z-index:3.5;
}
.orb{fill:#9fc2ff}
.sun{fill:#ffd27a;opacity:0}
.moon{fill:#e9eefb;opacity:0}
.stars{fill:#dfe8ff}

/* tech horizon: glowing line + perspective grid floor */
.transit-horizon{
  z-index:3;
  top:56vh;height:44vh;
  background:radial-gradient(60% 9% at 50% 0%,rgba(159,194,255,.5),transparent 72%);
  will-change:opacity;
}
.transit-grid{
  z-index:3;
  top:58vh;height:42vh;
  background-image:
    linear-gradient(rgba(159,194,255,.3) 1px,transparent 1px),
    linear-gradient(90deg,rgba(159,194,255,.3) 1px,transparent 1px);
  background-size:72px 40px;
  transform:perspective(620px) rotateX(64deg);
  transform-origin:top;
  will-change:opacity;
}
.transit-particles{
  position:absolute;inset:0;z-index:3;
  pointer-events:none;
  opacity:0;will-change:opacity;
}
.transit-particles::before{
  content:"";position:absolute;left:12%;top:38%;
  width:4px;height:4px;border-radius:50%;
  background:#9fc2ff;
  box-shadow:
    180px 40px 0 rgba(159,194,255,.8),380px -60px 0 rgba(159,194,255,.7),
    620px 90px 0 rgba(159,194,255,.8),860px -30px 0 rgba(159,194,255,.7),
    1080px 60px 0 rgba(159,194,255,.8),1280px -70px 0 rgba(159,194,255,.7);
  animation:particleFloat 7s ease-in-out infinite alternate;
}
.transit-particles::after{
  content:"";position:absolute;left:26%;top:56%;
  width:3px;height:3px;border-radius:50%;
  background:#cfe2ff;
  box-shadow:
    260px -30px 0 rgba(207,226,255,.7),540px 50px 0 rgba(207,226,255,.65),
    900px -50px 0 rgba(207,226,255,.7),1180px 40px 0 rgba(207,226,255,.6);
  animation:particleFloat 9s ease-in-out infinite alternate-reverse;
}
@keyframes particleFloat{
  from{transform:translateY(14px)}
  to{transform:translateY(-14px)}
}

/* WHITE → BLUE */
.transit--wb .sky-white{opacity:calc(1 - var(--t)*1.4)}
.transit--wb .sky-blue{opacity:clamp(0,calc(var(--t)*1.7 - .5),1)}
.transit--wb .sky-dusk{opacity:min(calc(var(--t)*3.4),calc((1 - var(--t))*1.8),.35)}
.transit--wb .stars{opacity:min(calc(var(--t)*2),calc((1 - var(--t))*1.2),.5)}
.transit--wb .orb{
  transform:translateY(calc(var(--t)*42vh));
  opacity:min(calc(var(--t)*2.6),calc((1 - var(--t))*1.4),1);
}
.transit--wb .sun{
  transform:translateY(calc(var(--t)*34vh));
  opacity:min(calc(var(--t)*3),calc((1 - var(--t))*1.2),1);
}
.transit--wb .transit-horizon{opacity:min(calc(var(--t)*2.2),calc((1 - var(--t))*1.6),.9)}
.transit--wb .transit-grid{opacity:clamp(0,calc(var(--t)*1.9 - .4),1)}
.transit--wb .transit-particles{opacity:min(calc(var(--t)*2.4),calc((1 - var(--t))*1.3),.9)}

/* BLUE → BLACK */
.transit--bk .sky-blue{opacity:calc(1 - var(--t)*1.3)}
.transit--bk .sky-dusk{opacity:min(calc(var(--t)*2.8),calc((1 - var(--t))*2.8),1)}
.transit--bk .sky-black{opacity:clamp(0,calc(var(--t)*1.8 - .75),1)}
.transit--bk .orb{
  transform:translateY(calc(var(--t)*46vh));
  opacity:calc(1 - var(--t)*1.15);
}
.transit--bk .moon{
  transform:translateY(calc((.9 - var(--t))*40vh));
  opacity:clamp(0,calc(var(--t)*1.9 - .85),1);
}
.transit--bk .stars{opacity:clamp(0,calc(var(--t)*1.9 - .9),1)}
.transit--bk .transit-horizon{opacity:calc(1 - var(--t)*.9)}
.transit--bk .transit-grid{opacity:calc(1 - var(--t)*1.15)}
.transit--bk .transit-particles{opacity:calc(1 - var(--t)*1.3)}

/* BLACK → WHITE */
.transit--kw .sky-black{opacity:calc(1 - var(--t)*1.5)}
.transit--kw .sky-dusk{opacity:min(calc(var(--t)*2.6),calc((1 - var(--t))*2.6),1)}
.transit--kw .sky-blue{opacity:min(calc(var(--t)*3.2 - .15),calc((1 - var(--t))*2.2),1)}
.transit--kw .sky-white{opacity:clamp(0,calc(var(--t)*1.7 - .6),1)}
.transit--kw .moon{
  transform:translateY(calc(var(--t)*-30vh));
  opacity:calc(1 - var(--t)*1.5);
}
.transit--kw .stars{opacity:calc(1 - var(--t)*1.8)}
.transit--kw .sun{
  transform:translateY(calc((1 - var(--t))*44vh));
  opacity:clamp(0,calc(var(--t)*1.9 - .4),1);
}
.transit--kw .orb{
  transform:translateY(calc((.9 - var(--t))*36vh));
  opacity:min(calc(var(--t)*3 - .1),calc((1 - var(--t))*1.6),.95);
}
.transit--kw .transit-horizon{opacity:min(calc(var(--t)*2.4),calc((1 - var(--t))*2.4),.9)}
.transit--kw .transit-grid{opacity:min(calc(var(--t)*2.4),calc((1 - var(--t))*1.8),.8)}
.transit--kw .transit-particles{opacity:min(calc(var(--t)*2.2),calc((1 - var(--t))*2.2),.9)}



/* ---------- chapters ---------- */
.chapter{
  min-height:66vh;
  display:flex;align-items:center;
  padding:clamp(64px,9vh,104px) 0;
}
.chapter .wrap{width:100%}
.chapter-grid{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(36px,5.5vw,88px);
  align-items:center;
}
.chapter-kicker{
  margin:0 0 20px;
  font-size:12px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--blue);
}
.theme-blue .chapter-kicker{color:#cfe2ff}
.chapter-title{
  margin:0;
  font-size:clamp(34px,4.2vw,62px);
  font-weight:650;
  line-height:1.04;
  letter-spacing:-.035em;
}
.chapter-lede{
  margin:22px 0 0;
  max-width:46ch;
  font-size:clamp(15.5px,1.3vw,18px);
}
.theme-light .chapter-lede{color:#4b5468}
.theme-dark .chapter-lede{color:#a9b3c9}
.theme-blue .chapter-lede{color:#dbe7ff}
.chapter-points{
  margin:26px 0 0;
  padding:0;
  list-style:none;
  display:grid;gap:12px;
  font-size:15px;font-weight:500;
}
.chapter-points li{position:relative;padding-left:22px}
.chapter-points li::before{
  content:"";position:absolute;left:0;top:8px;
  width:8px;height:8px;
  background:var(--blue);
  transform:rotate(45deg);
}
.theme-dark .chapter-points li{color:#cdd5e4}
.theme-blue .chapter-points li{color:#eaf1ff}

/* video slot */
.chapter-media{margin:0}
.video-stage{
  position:relative;
  aspect-ratio:16/9;
  border-radius:var(--radius);
  overflow:hidden;
  background:#eef2fb;
  border:1px solid var(--line);
}
.theme-dark .video-stage{background:#0e1424;border-color:#1c2742}
.theme-blue .video-stage{background:#0f2b7d;border-color:rgba(159,194,255,.35)}
.scene,.scene-video{position:absolute;inset:0;width:100%;height:100%}
.scene-video{object-fit:cover;border:0}
.play{
  position:absolute;left:50%;top:50%;
  width:62px;height:62px;margin:-31px 0 0 -31px;
  border:0;border-radius:50%;
  background:var(--blue);color:#fff;
  display:grid;place-items:center;
  cursor:pointer;
  transition:transform .3s var(--ease),background .3s;
}
.play:hover{transform:scale(1.07);background:var(--blue-deep)}
.play svg{width:22px;height:22px;fill:#fff;margin-left:3px}
.play::after{
  content:"";position:absolute;inset:-8px;
  border-radius:50%;
  border:1.5px solid rgba(34,119,255,.55);
  animation:playPulse 2.2s var(--ease) infinite;
}
@keyframes playPulse{
  0%{transform:scale(.75);opacity:.9}
  75%{transform:scale(1.35);opacity:0}
  100%{transform:scale(1.35);opacity:0}
}
.hud-chip{
  position:absolute;top:12px;left:12px;
  padding:6px 11px;
  border-radius:999px;
  font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:#0b0c10;
  border:1px solid rgba(11,12,16,.18);
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.theme-dark .hud-chip{
  color:#cdd8ee;
  border-color:rgba(205,216,238,.25);
  background:rgba(11,12,16,.35);
}
.theme-blue .hud-chip{
  color:#eaf1ff;
  border-color:rgba(234,241,255,.3);
  background:rgba(15,43,125,.4);
}
.video-cap{
  display:flex;gap:10px;
  margin-top:12px;
  font-size:13.5px;
}
.video-cap::before{
  content:"";flex:none;
  width:8px;height:8px;margin-top:5px;
  background:var(--blue);
}
.theme-light .video-cap{color:#56627f}
.theme-dark .video-cap{color:#8b97b1}
.theme-blue .video-cap{color:#cfe2ff}

/* scene micro-animations */
.scan{animation:scanY 3.6s linear infinite}
@keyframes scanY{0%{transform:translateY(0)}100%{transform:translateY(404px)}}
.scan-dot{fill:#9fc2ff;animation:dotBlink 3.6s linear infinite}
@keyframes dotBlink{0%,12%{opacity:1}50%,100%{opacity:.25}}
.match-link{animation:dashFlow 1.6s linear infinite}
@keyframes dashFlow{to{stroke-dashoffset:-28}}
.match-dot{fill:var(--blue);animation:dotFlow 1.6s linear infinite}
@keyframes dotFlow{
  0%{transform:translateX(0);opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{transform:translateX(144px);opacity:0}
}
.badge{
  transform-box:fill-box;transform-origin:center;
  animation:badgePulse 3s ease-in-out infinite;
}
@keyframes badgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.seal{
  transform-box:fill-box;transform-origin:center;
  animation:sealSpin 14s linear infinite;
}
@keyframes sealSpin{to{transform:rotate(360deg)}}
.route-line{animation:dashFlow 2.4s linear infinite}
.truck{animation:truckMove 7s ease-in-out infinite}
@keyframes truckMove{
  0%{transform:translate(180px,190px)}
  100%{transform:translate(500px,96px)}
}

/* ghost numbers */
.ghost{
  position:absolute;right:1%;bottom:-6%;
  z-index:0;
  font-size:clamp(150px,22vw,360px);
  font-weight:800;
  line-height:1;
  letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:1px rgba(34,119,255,.15);
  user-select:none;pointer-events:none;
  transform:translateY(calc(var(--par,0)*1px));
}
.theme-dark .ghost{-webkit-text-stroke:1px rgba(93,149,255,.14)}
.theme-blue .ghost{-webkit-text-stroke:1px rgba(255,255,255,.13)}

/* ---------- finale ---------- */
.finale-title{
  margin:0;max-width:15ch;
  font-size:clamp(40px,5.4vw,80px);
  font-weight:700;
  line-height:1.03;
  letter-spacing:-.04em;
}
.finale-copy{
  margin:24px 0 0;max-width:44ch;
  font-size:clamp(16px,1.4vw,19px);
  color:#a9b3c9;
}
.cta-actions{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap}

/* ---------- footer ---------- */
.footer{
  border-top:1px solid rgba(255,255,255,.1);
  padding:56px 0 40px;
  color:#f2f4fa;
}
.footer-top{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
}
.footer-logo{height:32px;width:auto}
.footer-top p{margin:0;font-size:15px;color:#8b97b1;max-width:34ch}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:32px;
  margin-top:46px;
  max-width:760px;
}
.footer-col{display:grid;gap:10px;align-content:start}
.footer-head{
  margin:0 0 6px;
  font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:#8b97b1;
}
.footer-col a{font-size:14.5px;text-decoration:none;color:#cdd5e4;width:max-content}
.footer-col a:hover{color:#9fc2ff}
.footer-bottom{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:46px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:13px;color:#7d879d;
}

/* ---------- locator ---------- */
.locator{
  position:fixed;left:24px;bottom:26px;z-index:90;
  display:flex;align-items:center;gap:12px;
  opacity:0;transform:translateY(10px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),color .4s;
  pointer-events:none;
  font-size:12px;color:#2a3143;
}
.locator.is-visible{opacity:1;transform:none}
.locator.is-dark{color:#cdd5e4}
.locator-num{color:var(--blue);font-weight:700}
.locator-name{font-weight:600}
.locator-bar{
  width:110px;height:2px;border-radius:2px;
  background:rgba(11,12,16,.14);
  overflow:hidden;
}
.locator.is-dark .locator-bar{background:rgba(255,255,255,.18)}
.locator-bar i{display:block;height:100%;width:0;background:var(--blue)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  :root{--gutter:150px}
  .chapter-grid{gap:40px}
  .plabel{width:120px}
}
@media (max-width:860px){
  :root{--gutter:48px}
  .nav-links{display:none}
  .chapter-grid{grid-template-columns:1fr;gap:36px}
  .chapter{min-height:0;padding:72px 0}
  .chapter-media{max-width:560px}
  .transit{height:100vh}
  .transit-title{font-size:clamp(32px,8.5vw,48px)}
  .ghost{right:-2%;font-size:44vw}
  .hero{padding:calc(var(--nav-h) + 20px) 0 48px}
  .hero-inner{grid-template-columns:1fr;gap:26px;justify-items:center}
  .hero-copy{text-align:center;max-width:560px}
  .hero-cta{justify-content:center;margin-top:22px}
  .hero-mark{max-width:min(360px,84vw)}
  .hero-glow-orb{width:230px;height:230px;margin:-115px 0 0 -115px}
  .footer-grid{grid-template-columns:1fr;gap:24px}
  .locator{display:none}
  .plabel{display:none}
  #ball{width:32px;height:32px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .transit{display:none}
  .js [data-words] .wi{opacity:1;transform:none;filter:none}
  .js [data-reveal]{opacity:1;transform:none;filter:none}
  .js [data-sync]{opacity:1;transform:none;filter:none}
  .js .ln-i{transform:none!important}
  .js [data-syncsec] .chapter-copy,
  .js [data-syncsec] .chapter-media{opacity:1!important;transform:none!important}
  .blade{animation:none}
  .energy{display:none}
  .hero-glow-orb{animation:none}
  .p-line{filter:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ============================================================
   V2 - CENTERED TRIP CORRIDOR - station route + hero logo
   ============================================================ */
:root{--corridor:clamp(250px,20vw,390px)}

#pathway-corridor{position:fixed;top:0;bottom:0;left:50%;width:var(--corridor);transform:translateX(-50%);pointer-events:none;z-index:0}

#pathway,#pathway-labels{width:100vw}

/* station signage beside the track */
.plabel{
  width:auto;max-width:240px;
  padding:8px 14px 8px 24px;
  border-radius:999px;
  font-size:9.5px;font-weight:700;
  letter-spacing:.18em;line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:#33406b;
  border:1px solid rgba(11,12,16,.14);
  background:rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 12px 30px rgba(11,12,16,.1);
  opacity:0;
  transition:opacity .45s var(--ease),color .4s,background .4s,border-color .4s,box-shadow .4s;
}
.plabel::before{
  content:"";position:absolute;left:11px;top:50%;
  width:7px;height:7px;margin-top:-3.5px;border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 4px rgba(34,119,255,.16);
}
.plabel::after{
  content:"";position:absolute;top:50%;right:-11px;
  width:11px;height:1.5px;
  background:rgba(34,119,255,.55);
}
.plabel.is-right::after{right:auto;left:-11px}
.plabel.is-below::after{left:50%;right:auto;top:-11px;width:1.5px;height:11px}
.plabel.is-lit{opacity:1}
.plabel.is-dark{color:#b9c7e6;background:rgba(13,18,32,.58);border-color:rgba(159,194,255,.28)}
.plabel.is-blue{color:#eaf1ff;background:rgba(15,43,125,.55);border-color:rgba(159,194,255,.35)}
.plabel.is-dark::before,.plabel.is-blue::before{background:#9fc2ff;box-shadow:0 0 0 4px rgba(159,194,255,.18)}

/* station nodes on the route */
.pnode-ticks{
  fill:none;stroke:rgba(34,119,255,.5);stroke-width:1;
  stroke-dasharray:2.5 4.5;
  transform-box:fill-box;transform-origin:center;
  opacity:.6;
}
.pnode.is-lit .pnode-ticks{stroke:rgba(159,194,255,.95);opacity:1;animation:ticksSpin 16s linear infinite}
@keyframes ticksSpin{to{transform:rotate(360deg)}}
.pnode-num{font-size:10.5px}
.pnode.is-blue .pnode-ring{stroke:#dce9ff;fill:rgba(207,226,255,.16)}
.pnode.is-blue .pnode-num{fill:#dce9ff}
.pnode.is-dark .pnode-ring{stroke:#9fc2ff;fill:rgba(159,194,255,.12)}
.pnode.is-dark .pnode-num{fill:#9fc2ff}
.pnode.is-lit .pnode-num{fill:#fff}

/* ball motion trail + docking ripple */
#ball-trail{
  position:absolute;left:0;top:0;z-index:25;
  width:64px;height:64px;border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,rgba(34,119,255,.55),rgba(34,119,255,.18) 45%,transparent 68%);
  filter:blur(6px);
  opacity:0;
  will-change:transform;
}
#ball::before{
  content:"";position:absolute;inset:-2px;border-radius:50%;
  border:2px solid rgba(34,119,255,.75);
  opacity:0;
}
#ball.is-docked::before{animation:dockRipple 1.7s var(--ease) infinite}
@keyframes dockRipple{
  0%{transform:scale(.92);opacity:.85}
  75%{transform:scale(2);opacity:0}
  100%{transform:scale(2);opacity:0}
}

/* bigger nav logo with entrance */
.nav-brand img{height:34px;width:auto;animation:navLogoIn .9s var(--ease) .1s both}
.nav-brand{display:flex;align-items:center}
@keyframes navLogoIn{
  from{opacity:0;transform:translateY(-16px) scale(.96);filter:blur(7px)}
  to{opacity:1;transform:none;filter:blur(0)}
}



/* chapters: content split around the centered corridor */
.chapter .wrap{display:block}
.chapter .sec-gutter{display:none}
.chapter .sec-content{
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--corridor) minmax(0,1fr);
  column-gap:clamp(24px,3.6vw,60px);
  align-items:center;
  width:100%;
  padding:0 clamp(24px,4.5vw,76px);
}
.chapter .sec-content > *{max-width:none}
.chapter-grid{display:contents}
.chapter-copy{grid-column:1;grid-row:2;min-width:0}
.chapter-media{grid-column:3;grid-row:2;min-width:0}
.chapter-grid.is-flip .chapter-copy{grid-column:3}
.chapter-grid.is-flip .chapter-media{grid-column:1}

/* finale: centred end-of-trip statement under the last node */
#finale .sec-content{display:block;padding:0 clamp(24px,6vw,96px)}
#finale .finale-inner{max-width:660px;margin:0 auto;text-align:center}
#finale .chapter-kicker{margin:0 0 22px}
#finale .cta-actions{justify-content:center}

/* trip HUD */
.locator-tag{
  font-size:10px;font-weight:800;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--blue);
  border-right:1px solid rgba(11,12,16,.18);
  padding-right:12px;
}
.locator.is-dark .locator-tag{border-color:rgba(255,255,255,.22);color:#9fc2ff}
.locator-name{white-space:nowrap}

/* footer logo */
.footer-logo{height:40px}

/* responsive corridor */
@media (max-width:1320px){
  :root{--corridor:clamp(230px,21vw,320px)}
}
@media (max-width:860px){
  .chapter .sec-content{display:block;padding:0 clamp(20px,6vw,44px)}
  .chapter-copy,.chapter-media{max-width:560px}
  .chapter-media{margin-top:36px}
  .nav-brand img{height:28px}
}


@media (max-width:860px){
}

/* ============================================================
   V3 - full-page nodes + integrated sky morph (no empty pages)
   ============================================================ */
.hero{min-height:100vh;min-height:100svh}
.chapter{min-height:100vh;min-height:100svh}

/* the top-left logo is the big one */
.nav-brand img{height:40px;width:auto}

/* fixed sky veil - lives between section backgrounds and content */
#sky{
  position:fixed;inset:0;z-index:6;
  pointer-events:none;
  opacity:0;
  will-change:opacity;
}
#sky .sky-base,#sky .sky-layer,#sky .transit-horizon,#sky .transit-grid{position:absolute;inset:0}
#sky.is-wb .sky-base{background:#07101a}   /* hero -> spec: melts out of the dark */
#sky.is-wb2 .sky-base{background:#ffffff}
#sky.is-bk .sky-base{background:var(--blue-bg)}
#sky.is-kw .sky-base{background:#0b0c10}
#sky.is-bk2 .sky-base{background:var(--blue-bg-2)}
#sky.is-wb .sky-blue,#sky.is-bk .sky-blue{background:var(--blue-bg)}
#sky.is-wb2 .sky-blue,#sky.is-bk2 .sky-blue{background:var(--blue-bg-2)}

/* page content floats above the sky veil */
.hero .sec-content,.chapter .sec-content{position:relative;z-index:10}
.chapter-copy,.chapter-media,.finale-inner{z-index:10}



/* ---------- sky morph types ---------- */
#sky.is-wb .sky-white{opacity:calc(1 - var(--t)*1.4)}
#sky.is-wb .sky-white{background:#07101a}
#sky.is-wb .sky-blue{opacity:clamp(0,calc(var(--t)*1.7 - .5),1)}
#sky.is-wb .sky-dusk{opacity:min(calc(var(--t)*3.4),calc((1 - var(--t))*1.8),.35)}
#sky.is-wb .stars{opacity:min(calc(var(--t)*2),calc((1 - var(--t))*1.2),.5)}
#sky.is-wb .orb{transform:translateY(calc(var(--t)*42vh));opacity:min(calc(var(--t)*2.6),calc((1 - var(--t))*1.4),1)}
#sky.is-wb .sun{transform:translateY(calc(var(--t)*34vh));opacity:min(calc(var(--t)*3),calc((1 - var(--t))*1.2),1)}
#sky.is-wb .transit-horizon{opacity:min(calc(var(--t)*2.2),calc((1 - var(--t))*1.6),.9)}
#sky.is-wb .transit-grid{opacity:min(calc(var(--t)*1.9 - .4),calc((1 - var(--t))*1.6),1)}
#sky.is-wb .transit-particles{opacity:min(calc(var(--t)*2.4),calc((1 - var(--t))*1.3),.9)}

#sky.is-bk .sky-blue{opacity:calc(1 - var(--t)*1.3)}
#sky.is-bk .sky-dusk{opacity:min(calc(var(--t)*2.8),calc((1 - var(--t))*2.8),1)}
#sky.is-bk .sky-black{opacity:clamp(0,calc(var(--t)*1.8 - .75),1)}
#sky.is-bk .orb{transform:translateY(calc(var(--t)*46vh));opacity:calc(1 - var(--t)*1.15)}
#sky.is-bk .moon{transform:translateY(calc((.9 - var(--t))*40vh));opacity:clamp(0,calc(var(--t)*1.9 - .85),1)}
#sky.is-bk .stars{opacity:clamp(0,calc(var(--t)*1.9 - .9),1)}
#sky.is-bk .transit-horizon{opacity:calc(1 - var(--t)*1.4)}
#sky.is-bk .transit-grid{opacity:calc(1 - var(--t)*1.15)}
#sky.is-bk .transit-particles{opacity:calc(1 - var(--t)*1.3)}

#sky.is-kw .sky-black{opacity:calc(1 - var(--t)*1.5)}
#sky.is-kw .sky-dusk{opacity:min(calc(var(--t)*2.6),calc((1 - var(--t))*2.6),1)}
#sky.is-kw .sky-blue{opacity:min(calc(var(--t)*3.2 - .15),calc((1 - var(--t))*2.2),1)}
#sky.is-kw .sky-white{opacity:clamp(0,calc(var(--t)*1.7 - .6),1)}
#sky.is-kw .moon{transform:translateY(calc(var(--t)*-30vh));opacity:calc(1 - var(--t)*1.5)}
#sky.is-kw .stars{opacity:calc(1 - var(--t)*1.8)}
#sky.is-kw .sun{transform:translateY(calc((1 - var(--t))*44vh));opacity:clamp(0,calc(var(--t)*1.9 - .4),1)}
#sky.is-kw .orb{transform:translateY(calc((.9 - var(--t))*36vh));opacity:min(calc(var(--t)*3 - .1),calc((1 - var(--t))*1.6),.95)}
#sky.is-kw .transit-horizon{opacity:min(calc(var(--t)*2.4),calc((1 - var(--t))*2.4),.9)}
#sky.is-kw .transit-grid{opacity:min(calc(var(--t)*2.4),calc((1 - var(--t))*1.8),.8)}
#sky.is-kw .transit-particles{opacity:min(calc(var(--t)*2.2),calc((1 - var(--t))*2.2),.9)}

/* QUOTE → DELIVER · white → blue-2 (radar) */
#sky.is-wb2 .sky-white{opacity:calc(1 - var(--t)*1.4)}
#sky.is-wb2 .sky-blue{opacity:clamp(0,calc(var(--t)*1.7 - .5),1)}
#sky.is-wb2 .sky-dusk{opacity:min(calc(var(--t)*3.4),calc((1 - var(--t))*1.8),.35)}
#sky.is-wb2 .stars{opacity:min(calc(var(--t)*2),calc((1 - var(--t))*1.2),.5)}
#sky.is-wb2 .orb{transform:translateY(calc(var(--t)*42vh));opacity:min(calc(var(--t)*2.6),calc((1 - var(--t))*1.4),1)}
#sky.is-wb2 .sun{transform:translateY(calc(var(--t)*34vh));opacity:min(calc(var(--t)*3),calc((1 - var(--t))*1.2),1)}
#sky.is-wb2 .transit-horizon{opacity:min(calc(var(--t)*2.2),calc((1 - var(--t))*1.6),.9)}
#sky.is-wb2 .transit-grid{opacity:min(calc(var(--t)*1.9 - .4),calc((1 - var(--t))*1.6),1)}
#sky.is-wb2 .transit-particles{opacity:min(calc(var(--t)*2.4),calc((1 - var(--t))*1.3),.9)}

/* DELIVER → FINALE · blue-2 (radar) → black */
#sky.is-bk2 .sky-blue{opacity:calc(1 - var(--t)*1.3)}
#sky.is-bk2 .sky-dusk{opacity:min(calc(var(--t)*2.8),calc((1 - var(--t))*2.8),1)}
#sky.is-bk2 .sky-black{opacity:clamp(0,calc(var(--t)*1.8 - .75),1)}
#sky.is-bk2 .orb{transform:translateY(calc(var(--t)*46vh));opacity:calc(1 - var(--t)*1.15)}
#sky.is-bk2 .moon{transform:translateY(calc((.9 - var(--t))*40vh));opacity:clamp(0,calc(var(--t)*1.9 - .85),1)}
#sky.is-bk2 .stars{opacity:clamp(0,calc(var(--t)*1.9 - .9),1)}
#sky.is-bk2 .transit-horizon{opacity:calc(1 - var(--t)*1.4)}
#sky.is-bk2 .transit-grid{opacity:calc(1 - var(--t)*1.15)}
#sky.is-bk2 .transit-particles{opacity:calc(1 - var(--t)*1.3)}

/* ---------- seamless page seams · color melts into the next page (no hard line) ---------- */
/* the opening is deep space again, so this seam melts out of the hero's own
   #07101a instead of white - no band, just a gradient */
#spec{background-image:linear-gradient(180deg,#07101a 0%,rgba(7,16,26,0) 44vh),var(--blue-bg)}
#match{background-image:linear-gradient(180deg,#1746c4 0%,rgba(23,70,196,0) 30vh)}
#quote{background-image:linear-gradient(180deg,#0b0c10 0%,rgba(11,12,16,0) 30vh)}
#deliver{background-image:linear-gradient(180deg,#ffffff 0%,rgba(255,255,255,0) 30vh),var(--blue-bg-2)}
#finale{background-image:linear-gradient(180deg,#0f36a8 0%,rgba(15,54,168,0) 30vh)}

@media (max-width:860px){
  .nav-brand img{height:30px}
  .chapter{min-height:0}
}
/* ============================================================
   V4 - station headers, stat strips, route motion, next hints,
   hero trip legend, finale dots
   ============================================================ */

/* route line drift */
@keyframes trackFlow{to{stroke-dashoffset:-1296}}

/* bigger station labels on the route */
.plabel{font-size:10px;letter-spacing:.12em}


/* station header row above each chapter */
.chapter-top{
  grid-column:1 / -1;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin:0 0 clamp(28px,4.5vh,48px);
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}
.theme-dark .chapter-top{border-color:rgba(255,255,255,.12)}
.theme-blue .chapter-top{border-color:rgba(255,255,255,.18)}
.station-chip{
  display:inline-flex;align-items:center;gap:9px;flex:none;
  padding:8px 15px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue);background:rgba(34,119,255,.07);border:1px solid rgba(34,119,255,.28);
}
.station-chip::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:currentColor;box-shadow:0 0 9px currentColor;
}
.theme-dark .station-chip{color:#9fc2ff;background:rgba(34,119,255,.1);border-color:rgba(93,149,255,.32)}
.theme-blue .station-chip{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28)}
.chapter-top-meta{
  font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  opacity:.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* per-chapter stat strip */
.chapter-stats{
  display:flex;margin-top:30px;max-width:430px;
  border-top:1px solid var(--line);padding-top:20px;
}
.theme-dark .chapter-stats{border-color:rgba(255,255,255,.12)}
.theme-blue .chapter-stats{border-color:rgba(255,255,255,.18)}
.stat{flex:1;min-width:0;padding-right:22px;border-right:1px solid var(--line)}
.stat + .stat{padding-left:22px;border-right:0}
.theme-dark .stat{border-color:rgba(255,255,255,.12)}
.theme-blue .stat{border-color:rgba(255,255,255,.18)}
.stat-num{
  display:block;
  font-size:clamp(24px,2.1vw,31px);font-weight:700;letter-spacing:-.02em;line-height:1.1;
  color:var(--ink);
}
.theme-dark .stat-num,.theme-blue .stat-num{color:#fff}
.stat-label{
  display:block;margin-top:5px;
  font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#7c87a1;
}
.theme-dark .stat-label{color:#8b97b1}
.theme-blue .stat-label{color:#cfe2ff}

/* video corner brackets */
.video-stage::before,.video-stage::after{
  content:"";position:absolute;width:24px;height:24px;z-index:4;pointer-events:none;
  border:2px solid var(--blue);
}
.video-stage::before{top:9px;left:9px;border-right:0;border-bottom:0;border-radius:8px 0 0 0}
.video-stage::after{bottom:9px;right:9px;border-left:0;border-top:0;border-radius:0 0 8px 0}
.theme-dark .video-stage::before,.theme-dark .video-stage::after{border-color:rgba(93,149,255,.8)}
.theme-blue .video-stage::before,.theme-blue .video-stage::after{border-color:rgba(255,255,255,.65)}

/* next-station hint, bottom right of each chapter */
.chapter[data-next]::after{
  content:attr(data-next);
  position:absolute;right:clamp(24px,4.5vw,76px);bottom:24px;z-index:10;
  font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  opacity:.5;pointer-events:none;
}
.theme-light .chapter[data-next]::after{color:#56627f}
.theme-dark .chapter[data-next]::after{color:#8b97b1}
.theme-blue .chapter[data-next]::after{color:rgba(255,255,255,.72)}

/* finale station dots */
.trip-dots{display:flex;justify-content:center;gap:10px;margin-top:36px}
.trip-dots i{
  width:8px;height:8px;border-radius:50%;
  background:var(--blue);box-shadow:0 0 12px rgba(34,119,255,.75);
}
.trip-dots i:nth-child(even){background:#9fc2ff}
@keyframes tripIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ============================================================
   LANDING — one pinned cinematic stage, two compositions.
   Everything here is scoped to #hero and the WebGL Earth stage;
   the downstream chapters/nodes/footer are deliberately untouched.
   ============================================================ */

/* ---------- the real 3D Earth: transparent canvas, whole viewport ---------- */
#earth-stage{
  position:fixed;inset:0;
  z-index:26;                   /* above the pathway line, like the old sphere */
  pointer-events:none;
}
#earth-stage canvas{background:transparent}

/* The route sphere is now purely a position anchor that the WebGL globe
   follows; all of the existing docking / trail / label logic still reads it. */
#ball{
  background:none;box-shadow:none;border:0;
  opacity:0;
}
#ball::before,#ball::after{display:none}

/* Graceful degradation: no WebGL, no globe — keep a quiet sphere so the
   pathway still reads as a journey instead of an empty line. */
.no-earth #ball{
  opacity:1;
  background:radial-gradient(circle at 34% 28%,
    #4d7fd4 0%,#28518f 38%,#14305e 68%,#081a36 100%);
}

/* ---------- hero: 300vh of scroll driving one pinned 100vh stage ---------- */
#hero{
  min-height:300vh;
  min-height:300svh;
  display:block;
  padding:0;
  /* NOT overflow:hidden — that would make #hero a scroll container and
     silently break the sticky pin below. */
  overflow:visible;
  --hero-sky:1;
  background:#07101a;
  color:#f4f7fb;
}
#hero .hero-grid,#hero .hero-glow,#hero .hero-x,
#hero .hero-glow-orb,#hero .hero-mark{display:none}

/* Scroll-driven sky: high-atmosphere daylight in stage 1, deep space by
   stage 2. Opacity is driven from script.js via --hero-sky. */
#hero::before{
  content:"";
  position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:var(--hero-sky);
  background:
    radial-gradient(ellipse 84% 58% at 90% 0%,rgba(206,220,232,.52),transparent 62%),
    radial-gradient(ellipse 76% 66% at 0% 4%,rgba(21,105,177,.72),transparent 64%),
    linear-gradient(180deg,#16394f 0%,#102331 44%,#07101a 100%);
}

#hero .wrap{
  position:sticky;top:0;
  width:100%;
  height:100vh;height:100svh;
  display:block;
  z-index:27;
}
#hero .sec-gutter{display:none}
#hero .sec-content{position:relative;height:100%;min-width:0;padding:0}
#hero .sec-content > *{max-width:none}

/* ---------- stage 1 ---------- */
#hero .hero-inner{
  position:absolute;inset:0;z-index:30;
  display:block;
  padding:max(calc(var(--nav-h) + 44px),25.5vh) clamp(24px,5vw,72px) 0;
  text-align:center;
  transform-origin:50% 20%;
  will-change:opacity,transform;
}
#hero .hero-copy{
  position:relative;z-index:30;
  max-width:1180px;margin:0 auto;
  text-align:center;
}
#hero .hero-title{
  margin:0 auto;max-width:none;
  display:flex;flex-direction:column;
  font-size:clamp(46px,6.55vw,112px);
  font-weight:650;
  line-height:.87;
  letter-spacing:-.035em;
  color:#fff;
}
#hero .hero-title .hero-line{
  display:block;
  overflow:hidden;
  padding:.2em 0;
  margin:-.2em 0;
}
#hero .hero-title .hero-line + .hero-line{margin-top:-.18em}
#hero .hero-sub{
  margin:clamp(22px,3.2vh,36px) auto 0;
  max-width:62ch;
  font-size:clamp(15.5px,1.36vw,22px);
  font-weight:400;
  line-height:1.5;
  color:rgba(236,243,250,.82);
}
#hero .hero-cta{
  justify-content:center;
  margin-top:clamp(22px,3.4vh,36px);
}
#hero .btn-solid{
  min-height:52px;padding:0 29px;
  border:1px solid rgba(255,255,255,.62);
  border-radius:999px;
  background:transparent;color:#fff;
  font-size:clamp(14px,1.1vw,18px);font-weight:600;letter-spacing:0;
  box-shadow:none;
}
#hero .btn-solid:hover{
  background:#fff;color:#0c1824;border-color:#fff;
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(0,0,0,.3);
}
#hero .btn-solid .btn-ic{stroke-width:1.4}

/* ---------- stage 2 ---------- */
/* Sits in the same pinned wrap as stage 1, so the two compositions read as
   one environment transforming rather than two stacked pages. */
#hero .hero-vision{
  /* headline clears the stage-2 globe, matching the reference spacing */
  position:absolute;left:50%;top:84vh;
  width:min(1160px,calc(100% - 48px));
  transform:translateX(-50%);
  z-index:29;
  text-align:center;
  opacity:0;
  pointer-events:none;
  will-change:opacity,transform;
}
#hero .hero-vision h2{
  margin:0;
  font-size:clamp(38px,4.4vw,64px);
  font-weight:650;
  line-height:.92;
  letter-spacing:-.042em;
  color:#fff;
}
#hero .hero-vision p{
  margin:clamp(10px,1.5vh,18px) auto 0;
  max-width:54ch;
  font-size:clamp(14.5px,1.24vw,20px);
  font-weight:400;
  line-height:1.6;
  color:rgba(236,243,250,.74);
}
/* scroll-synced masked word reveal (transforms written by script.js) */
#hero .hero-vision .w{
  display:inline-block;
  overflow:hidden;
  vertical-align:bottom;
}
#hero .hero-vision .wi{
  display:inline-block;
  will-change:transform,opacity;
}

/* ---------- mobile / tablet: same narrative, adapted framing ---------- */
@media (max-width:1024px){
  #hero .hero-vision{top:70vh}
}
@media (max-width:700px){
  #hero{min-height:280vh;min-height:280svh}
  #hero .hero-inner{padding-top:max(calc(var(--nav-h) + 30px),20vh)}
  #hero .hero-title{font-size:clamp(40px,11.4vw,62px);line-height:.92}
  #hero .hero-sub{max-width:36ch;font-size:15.5px}
  #hero .hero-vision{top:72vh}
  #hero .hero-vision h2{font-size:clamp(42px,12vw,64px)}
  #hero .hero-vision p{font-size:14.5px;max-width:40ch}
}

@media (prefers-reduced-motion:reduce){
  #hero .hero-inner{transform:none!important}
  #hero .hero-vision{transform:translateX(-50%)!important}
}
html,body{overflow-x:clip}
/* route artwork opacity: the landing fades it in (--path-reveal) and the finale
   Stage 2 takes it away again (--path-out) */
#pathway,#pathway-labels,#ball-trail{opacity:calc(var(--path-reveal,1) * var(--path-out,1))}
body.landing-active .locator{opacity:0!important}
section[id],footer[id]{scroll-margin-top:var(--nav-h)}
h1,h2,h3{text-wrap:balance}
a:focus-visible,button:focus-visible{
  outline:2px solid #9fc2ff;
  outline-offset:4px;
}

/* ============================================================
   FINALE - three beats, one section, no route.

   Beat 1  .finale-grid    the closing statement: words in the left
                           column, the Earth's dock well on the right
   Beat 2  .finale-return  a screen of scroll where the same Earth
                           moves to the centre and becomes the
                           closing half-globe
   Beat 3  .finale-footer  the foot of the site on its own black band,
                           sized so the lit limb stays above it

   Nothing is pinned and nothing overlaps: the statement is laid out
   beside the Earth's dock instead of under it, and the pathway has
   already faded out while the Earth was still travelling in, so the
   only thing drawn on this stage is the Earth itself.
   ============================================================ */
#finale{
  display:block;padding:0;height:auto;min-height:0;
  /* the colour only: the melt from station 04's blue in is set with the other
     page seams at the bottom of this file (a bare `background` shorthand here
     would wipe that gradient out and leave a hard line across the screen) */
  background-color:#07090f;color:#f2f4fa;
  --finale-t:0;
}
#finale .ghost{top:8vh;right:2%;bottom:auto}

/* --- beat 1: the closing statement ---------------------------- */
#finale .finale-stage{
  position:relative;
  display:flex;align-items:center;
  min-height:100vh;min-height:100svh;
  padding:clamp(76px,11vh,116px) 0 clamp(64px,9vh,96px);
}

/* The penultimate page is a scroll-reading stage.  The composition stays
   fixed while its copy resolves, then releases only after a short hold. */
#finale .finale-stage{
  display:block;
  min-height:250vh;min-height:250svh;
  padding:0;
}
#finale .finale-pin{
  position:sticky;top:0;
  display:grid;
  grid-template-rows:1fr auto 1fr;
  align-items:center;
  width:100%;height:100vh;height:100svh;
  padding:var(--fin-pad) clamp(20px,4vw,64px);
  overflow:hidden;
}
#finale .sec-content{position:relative;z-index:36}
#finale .finale-grid{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  align-items:center;
  gap:clamp(24px,4vw,72px);
  width:100%;
}
#finale .finale-copyblock{
  max-width:620px;
  margin:0;
  min-width:0;
  text-align:left;
}
#finale .chapter-kicker{margin:0 0 20px}
#finale .finale-title{
  margin:0;max-width:17ch;text-align:left;
  font-size:clamp(34px,4.2vw,62px);
  font-weight:650;line-height:1.04;letter-spacing:-.035em;
  color:#f4f7fb;
}
#finale .finale-copy{
  margin:22px 0 0;max-width:44ch;text-align:left;
  font-size:clamp(15.5px,1.3vw,18px);line-height:1.6;
  color:#a9b3c9;
}
/* ---------- the closing call to action, redrawn --------------
   Not two pills: one underlined statement-scale link that carries the arrow
   itself, and the address as a plain link on its own line, so the pair reads
   as a decision rather than a form. */
#finale .finale-cta{
  margin:clamp(28px,4.2vh,44px) 0 0;
  display:grid;
  justify-items:start;
  gap:14px;
}
#finale .finale-cta-main{
  position:relative;
  display:inline-flex;align-items:center;gap:14px;
  padding:0 0 12px;
  font-size:clamp(19px,1.75vw,26px);
  font-weight:600;letter-spacing:-.01em;
  color:#f4f7fb;text-decoration:none;
  border-bottom:1px solid rgba(159,194,255,.55);
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
#finale .finale-cta-main svg{
  width:clamp(19px,1.7vw,24px);height:auto;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .45s var(--ease);
}
#finale .finale-cta-main:hover{color:#9fc2ff;border-color:#9fc2ff}
#finale .finale-cta-main:hover svg{transform:translateX(6px)}
#finale .finale-cta-mail{
  font-size:13px;letter-spacing:.02em;
  color:#8b97b1;text-decoration:none;
  transition:color .35s var(--ease);
}
#finale .finale-cta-mail:hover{color:#cdd5e4}
#finale .trip-dots{margin-top:clamp(22px,3vh,34px);justify-content:flex-start}
/* The well the Earth stands in: the right half of the split, sized so the
   planet is already a large object when this page is read. Space only. */
#finale .finale-globe{
  position:relative;
  min-height:clamp(300px,52vh,520px);
}

/* --- beat 2: the return --------------------------------------- */
#finale .finale-return{height:100vh;height:100svh}

/* --- beat 3: the foot of the site ----------------------------- */
.finale-footer{
  position:relative;z-index:40;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(22px,4vw,64px);
  align-items:start;
  padding:clamp(30px,4.4vh,50px) clamp(24px,5vw,76px) clamp(24px,3.2vh,36px);
  background:#07090f;
  border-top:1px solid rgba(159,194,255,.14);
  color:#e2e8f4;
}
.finale-footer-brand{display:grid;gap:12px;align-content:start}
.finale-footer-brand p{margin:0;max-width:32ch;color:#8b97b1;font-size:13.5px;line-height:1.5}
.finale-footer .footer-logo{height:30px;width:auto}
.finale-footer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,40px)}
.finale-footer-grid .footer-col{display:grid;gap:8px;align-content:start}
.finale-footer-grid .footer-head{
  margin:0 0 6px;font-size:10px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:#5d95ff;
}
.finale-footer-grid a{width:max-content;max-width:100%;color:#cdd5e4;text-decoration:none;font-size:13px}
.finale-footer-grid a:hover{color:#9fc2ff}
.finale-footer-bottom{
  grid-column:1/-1;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:clamp(16px,2.4vh,28px);padding-top:14px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:12px;color:#8b97b1;
}

@media (max-width:980px){
  #finale .finale-grid{grid-template-columns:minmax(0,1fr);gap:26px}
  #finale .finale-globe{order:-1;min-height:0;height:30vh}
  #finale .finale-copyblock{max-width:560px}
  #finale .finale-return{height:118vh;height:118svh}
  .finale-footer{grid-template-columns:minmax(0,1fr);gap:26px}
  .finale-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .finale-footer-bottom{margin-top:20px}
}

/* ============================================================
   LANDING - starfield + instrumentation on the deep-space sky.

   Four star layers of different density and size (fixed to the viewport, so
   the sky holds still while the Earth travels through it) plus a very quiet
   technical register: a fine grid that only firms up once the globe has pulled
   back, and a HUD horizon low in frame. Alpha is kept low throughout so the
   headline stays the brightest thing on screen.
   ============================================================ */
#hero .hero-grid{
  display:block;
  z-index:0;
  opacity:1;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.85) 1px,transparent 1.7px),
    radial-gradient(circle,rgba(226,238,255,.42) 1px,transparent 1.5px),
    radial-gradient(circle,rgba(159,194,255,.55) 1.3px,transparent 2.1px),
    radial-gradient(circle,rgba(255,255,255,.26) 1px,transparent 1.4px);
  background-size:120px 120px,70px 70px,260px 260px,44px 44px;
  background-position:13px 21px,37px 11px,58px 39px,7px 3px;
  background-attachment:fixed;
  background-repeat:repeat;
  animation:heroStarDrift 300s linear infinite;
}
/* an almost imperceptible drift so the sky reads as space, not a backdrop */
@keyframes heroStarDrift{
  from{background-position:13px 21px,37px 11px,58px 39px,7px 3px}
  to{background-position:253px 21px,177px 11px,578px 39px,91px 3px}
}
/* the instrument register: fine grid, bottom-weighted, coming forward only as
   the globe pulls back into the route */
#hero::after{
  content:"";
  position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:calc(.10 + .44 * (1 - var(--hero-sky)));
  background-image:
    linear-gradient(rgba(159,194,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(159,194,255,.05) 1px,transparent 1px),
    linear-gradient(rgba(159,194,255,.10) 1px,transparent 1px);
  background-size:72px 72px,72px 72px,360px 360px;
  background-position:center bottom;
  background-attachment:fixed;
  -webkit-mask-image:linear-gradient(180deg,transparent 0 38%,#000 92%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0 38%,#000 92%,#000 100%);
}
@media (max-width:860px){
  #hero .hero-grid{
    background-size:110px 110px,64px 64px,220px 220px,40px 40px;
    animation:none;
  }
}
@media (prefers-reduced-motion:reduce){
  #hero .hero-grid{animation:none}
}

/* ============================================================
   FINALE - rebuilt: three bands and a proper foot.

   band 1  statement left, a small fact list right
   band 2  the well the Earth is already growing through
   band 3  the handover sentence left, the call to action right
   then    the second screen, and the foot of the site underneath

   New class names (fin-*) on purpose: the whole previous finale design is
   retired, nothing of it is reused.
   ============================================================ */
#finale .finale-stage{align-items:center;padding:clamp(62px,8vh,92px) 0 clamp(42px,6vh,64px)}
#finale .fin-band{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(24px,4.5vw,72px);
  align-items:start;
  width:100%;
  max-width:1240px;margin:0 auto;
}
#finale .fin-band--head{padding-bottom:clamp(10px,2vh,26px)}
#finale .fin-band--foot{align-items:end;padding-top:clamp(10px,2vh,26px)}
#finale .fin-mark{min-width:0}
#finale .chapter-kicker{margin:0 0 18px;letter-spacing:.26em}
#finale .finale-title{
  margin:0;max-width:16ch;text-align:left;
  font-size:clamp(30px,3.5vw,52px);
  font-weight:650;line-height:1.05;letter-spacing:-.035em;
  color:#f6f8fc;
}
#finale .finale-copy{
  margin:0;max-width:52ch;text-align:left;
  font-size:clamp(15px,1.22vw,17.5px);line-height:1.62;
  color:#a9b3c9;
}
/* the fact list replaces the old station dots */
#finale .fin-facts{list-style:none;margin:0;padding:0;display:grid;gap:14px;min-width:0}
#finale .fin-facts li{
  display:grid;gap:5px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(159,194,255,.16);
}
#finale .fin-facts-k{
  font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:#5d95ff;
}
#finale .fin-facts-v{font-size:14.5px;color:#dbe3f3}
/* the well - space only */
#finale .fin-well{height:clamp(170px,25vh,260px)}
/* the call to action */
#finale .fin-act{display:grid;gap:12px;justify-items:start;min-width:0}
#finale .fin-act-main{
  display:inline-flex;align-items:center;gap:12px;
  padding-bottom:10px;
  font-size:clamp(18px,1.65vw,25px);font-weight:600;letter-spacing:-.01em;
  color:#f6f8fc;text-decoration:none;
  border-bottom:1px solid rgba(159,194,255,.5);
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
#finale .fin-act-main svg{
  width:clamp(18px,1.6vw,23px);height:auto;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .45s var(--ease);
}
#finale .fin-act-main:hover{color:#9fc2ff;border-color:#9fc2ff}
#finale .fin-act-main:hover svg{transform:translateX(6px)}
#finale .fin-act-note{margin:0;max-width:34ch;font-size:13px;line-height:1.6;color:#8b97b1}
#finale .fin-act-note a{color:#cdd5e4;text-decoration:none;border-bottom:1px solid rgba(205,213,228,.35)}
#finale .fin-act-note a:hover{color:#9fc2ff;border-color:#9fc2ff}

/* ---------- color refinement: cobalt, ice, and deep navy ---------- */
body{
  color:var(--ink);
  background:var(--paper);
}
::selection{background:rgba(47,109,255,.22)}

.theme-light{background:var(--paper);color:var(--ink)}
.theme-dark{background:var(--night);color:#f5f8ff}
.theme-blue{background:var(--blue-bg);color:#fff}

.p-track{stroke:rgba(47,109,255,.18)}
.p-line{stroke:var(--blue);filter:drop-shadow(0 0 5px rgba(139,183,255,.58))}
.pnode-ring{fill:rgba(47,109,255,.13);stroke:var(--blue)}
.pnode-num,.pmark,.locator-num{fill:var(--blue);color:var(--blue)}
.plabel{color:#586985}
.plabel.is-dark{color:#98afd7}
.plabel.is-blue{color:rgba(244,248,255,.84)}
.wi.is-accent{color:var(--blue)}
.theme-blue .wi.is-accent,.theme-dark .wi.is-accent{color:var(--blue-ice)}

.nav.is-dark{color:#f7faff}
.nav-cta{
  border-color:rgba(8,13,23,.09);
  background:rgba(247,249,253,.78);
}
.nav.is-dark .nav-cta{
  border-color:rgba(199,221,255,.14);
  background:rgba(6,11,19,.78);
}
.nav-cta{background:var(--blue);color:#fff}
.nav-cta:hover,.btn-solid:hover{box-shadow:0 16px 38px rgba(35,87,215,.30)}

.chapter::before,.hero .hero-grid{
  background:
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px),
    radial-gradient(circle at 22% 34%,rgba(199,221,255,.16) 1.5px,transparent 2.6px),
    radial-gradient(circle at 74% 62%,rgba(139,183,255,.14) 1.5px,transparent 2.6px);
}
.theme-light::before{
  background:
    repeating-linear-gradient(45deg,rgba(8,13,23,.032) 0 1px,transparent 1px 26px),
    radial-gradient(circle at 14% 84%,rgba(47,109,255,.075),transparent 55%);
}
.theme-dark::before{
  background:
    radial-gradient(rgba(139,183,255,.34) 1px,transparent 2.1px),
    radial-gradient(rgba(139,183,255,.18) 1px,transparent 2.1px),
    radial-gradient(ellipse at 82% 18%,rgba(47,109,255,.14),transparent 62%);
}
.theme-blue::before{
  background:
    radial-gradient(circle,transparent 0 90px,rgba(255,255,255,.10) 91px 92px,transparent 93px),
    radial-gradient(circle,transparent 0 180px,rgba(199,221,255,.08) 181px 182px,transparent 183px),
    radial-gradient(circle,transparent 0 270px,rgba(199,221,255,.055) 271px 272px,transparent 273px),
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
}

.chapter-kicker,.station-chip{color:var(--blue)}
.theme-blue .chapter-kicker,.theme-blue .stat-label,.theme-blue .video-cap{color:var(--blue-ice)}
.chapter-lede{color:#4d5b72}
.theme-dark .chapter-lede{color:#aebbd2}
.theme-blue .chapter-lede{color:#e6f0ff}
.theme-dark .chapter-points li{color:#d4dded}
.theme-blue .chapter-points li{color:#f0f6ff}
.video-stage{background:#eef3fa}
.theme-dark .video-stage{background:#0b1422;border-color:#1c2a46}
.theme-blue .video-stage{background:#102f80;border-color:rgba(199,221,255,.32)}
.play{background:var(--blue);color:#fff}
.video-ui{border-color:rgba(47,109,255,.50)}
.theme-dark .video-ui{color:#d9e3f5;border-color:rgba(217,227,245,.24);background:rgba(6,11,19,.40)}
.theme-blue .video-ui{color:#f0f6ff;border-color:rgba(240,246,255,.28);background:rgba(11,43,120,.38)}
.stat-num{color:var(--ink)}
.stat-label{color:#74829a}

#sky.is-wb .sky-base,#sky.is-kw .sky-base,.sky-black{background:var(--night)}
#sky.is-wb2 .sky-base,.sky-white,.transit--wb .sky-base{background:var(--paper)}
.sky-dusk{background:linear-gradient(180deg,#5d74d7 0%,#27429d 52%,#0b1422 100%)}

#spec{background-image:linear-gradient(180deg,var(--night) 0%,rgba(6,11,19,0) 44vh),var(--blue-bg)}
#match{background-image:linear-gradient(180deg,#153fae 0%,rgba(21,63,174,0) 30vh)}
#quote{background-image:linear-gradient(180deg,var(--night) 0%,rgba(6,11,19,0) 30vh)}
#deliver{background-image:linear-gradient(180deg,var(--paper) 0%,rgba(247,249,253,0) 30vh),var(--blue-bg-2)}
#finale{background-image:linear-gradient(180deg,#0e2f86 0%,rgba(14,47,134,0) 30vh)}

#hero{
  background:var(--night);
  color:#f7faff;
}
#hero::before{
  background:
    radial-gradient(ellipse 84% 58% at 90% 0%,rgba(199,221,255,.44),transparent 62%),
    radial-gradient(ellipse 76% 66% at 0% 4%,rgba(47,109,255,.46),transparent 64%),
    linear-gradient(180deg,#10283c 0%,#0b1725 45%,var(--night) 100%);
}
#hero .hero-title,#hero .hero-vision h2{color:#f9fbff}
#hero .hero-sub{color:rgba(233,240,251,.84)}
#hero .hero-vision p{color:rgba(218,229,245,.76)}
#hero .btn-solid{border-color:rgba(199,221,255,.56);color:#f9fbff}
#hero .btn-solid:hover{background:#f9fbff;color:#0b1422;border-color:#f9fbff}

#finale{
  background-color:#060a11;
}
#finale .finale-title,#finale .fin-title,#finale .fin-act-main{color:#f7faff}
#finale .finale-copy,#finale .fin-copy{color:#aebbd2}
#finale .fin-facts{border-color:rgba(199,221,255,.16)}
#finale .fin-facts-k,.finale-footer-grid h4,.fin-foot-col h4{color:#8bb7ff}
#finale .fin-facts-v{color:#e0e9f8}
#finale .finale-cta-main,#finale .fin-act-main{border-bottom-color:rgba(139,183,255,.52)}
#finale .finale-cta-main:hover,#finale .fin-act-main:hover{color:var(--blue-ice);border-color:var(--blue-ice)}
#finale .finale-cta-mail,#finale .fin-act-note,.fin-foot-brand p,.finale-footer-brand p,.finale-footer-bottom,.fin-foot-bottom{color:#93a1b8}
#finale .fin-act-note a,.finale-footer-grid a,.fin-foot-col a{color:#d8e3f5}
#finale .fin-act-note a:hover,.finale-footer-grid a:hover,.fin-foot-col a:hover{color:var(--blue-ice)}

.finale-footer{
  background:#060a11;
  border-top-color:rgba(139,183,255,.15);
}
.fin-foot{
  background:rgba(6,10,17,.30);
  border-top-color:rgba(139,183,255,.18);
}

/* ---------- the foot ---------- */
.fin-foot{
  position:relative;z-index:40;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(22px,4vw,64px);
  align-items:start;
  padding:clamp(30px,4.2vh,48px) clamp(24px,5vw,76px) clamp(22px,3vh,32px);
  /* 70% transparent background; footer content stays fully opaque. */
  background:rgba(7,9,15,.30);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  backdrop-filter:blur(14px) saturate(1.15);
  border-top:1px solid rgba(159,194,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  color:#e2e8f4;
}
.fin-foot-brand{display:grid;gap:12px;align-content:start}
.fin-foot-brand p{margin:0;max-width:32ch;color:#8b97b1;font-size:13.5px;line-height:1.5}
.fin-foot .footer-logo{height:30px;width:auto}
.fin-foot-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,40px)}
.fin-foot-col{display:grid;gap:8px;align-content:start}
.fin-foot-head{
  margin:0 0 6px;font-size:10px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:#5d95ff;
}
.fin-foot-col a{width:max-content;max-width:100%;color:#cdd5e4;text-decoration:none;font-size:13px}
.fin-foot-col a:hover{color:#9fc2ff}
.fin-foot-bottom{
  grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:clamp(16px,2.2vh,26px);padding-top:14px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:12px;color:#8b97b1;
}
@media (max-width:980px){
  #finale .fin-band{grid-template-columns:minmax(0,1fr);gap:22px}
  #finale .fin-facts{gap:10px}
  .fin-foot{grid-template-columns:minmax(0,1fr);gap:24px}
  .fin-foot-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============================================================
   FINALE v2 — the closing page, rebuilt around the Earth.

   band 1 (top)     the statement, left · the fact list, right
   band 2 (middle)  the well: the one place the Earth ever stands
   band 3 (bottom)  the handover line, left · the call to action, right
   then             the return screen (the Earth grows through it) and
                    the foot of the site — the last page of the trip.

   The three bands are one centred grid with equal padding above and
   below, so the well — and the globe docked in it — lands on the exact
   centre of the viewport. Each band reserves its middle column for the
   globe, so no line of copy can ever reach across the planet, and the
   route itself stops at station 04 (script.js): the Earth travels the
   last leg of the trip on its own.
   ============================================================ */
#finale{
  /* the seam out of station 04: same #0f36a8 the blue page ends on, melting
     into the closing black over the same 30vh every other page seam uses */
  background-color:#07090f;
  background-image:linear-gradient(180deg,#0f36a8 0%,rgba(15,54,168,0) 30vh);
}

#finale .sec-content{display:block;padding:0}

#finale .finale-stage{
  position:relative;
  display:grid;
  grid-template-rows:1fr auto 1fr;
  align-items:center;
  min-height:100vh;min-height:100svh;
  padding:var(--fin-pad) clamp(20px,4vw,64px);
  /* equal above and below: the middle row, and therefore the globe, is
     pinned to the middle of the screen at every viewport height */
  --fin-pad:clamp(84px,10vh,132px);
  --fin-gap:clamp(340px,36vw,560px);
}
/* the two wrappers are scaffolding, not layout: the three bands are the
   grid's three rows (head / the Earth's well / foot) */
#finale .finale-stage .wrap,
#finale .finale-stage .sec-content{display:contents}

/* one band = [copy] [reserved for the Earth] [copy] */
#finale .fin-band{
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--fin-gap) minmax(0,1fr);
  column-gap:clamp(16px,2.4vw,40px);
  align-items:center;
  width:100%;max-width:1420px;margin:0 auto;
}
#finale .fin-band > *:first-child{grid-column:1;min-width:0}
#finale .fin-band > *:last-child{grid-column:3;min-width:0}
#finale .fin-band--head{padding-bottom:clamp(12px,2.4vh,32px)}
#finale .fin-band--foot{padding-top:clamp(12px,2.4vh,32px)}

/* the well: as tall as the globe is wide when the page is read, so the
   Earth sits in a hole in the layout rather than on top of it */
#finale .fin-well{height:clamp(300px,42vh,500px)}

#finale .fin-mark{min-width:0}
#finale .chapter-kicker{margin:0 0 16px;letter-spacing:.26em}
#finale .finale-title{
  margin:0;max-width:16ch;text-align:left;
  font-size:clamp(28px,3.15vw,50px);
  font-weight:650;line-height:1.05;letter-spacing:-.035em;
  color:#f6f8fc;
}
#finale .fin-facts{
  list-style:none;margin:0;padding:0;
  display:grid;gap:12px;min-width:0;max-width:320px;
}
#finale .fin-facts li{
  display:grid;gap:4px;padding-bottom:11px;
  border-bottom:1px solid rgba(159,194,255,.16);
}
#finale .fin-facts-k{
  font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:#5d95ff;
}
#finale .fin-facts-v{font-size:14.5px;color:#dbe3f3}
#finale .finale-copy{
  margin:0;max-width:44ch;text-align:left;
  font-size:clamp(15px,1.2vw,17.5px);line-height:1.62;
  color:#a9b3c9;
}

@media (max-width:1080px){
  #finale .finale-stage{--fin-gap:clamp(240px,25vw,340px)}
  #finale .finale-title{font-size:clamp(26px,3.6vw,42px)}
}

/* stacked: one column per band, the globe still dead centre between them */
@media (max-width:880px){
  #finale .finale-stage{
    --fin-pad:clamp(92px,12vh,140px);
    grid-template-rows:1fr auto 1fr;
  }
  #finale .fin-band{grid-template-columns:minmax(0,1fr);row-gap:18px;align-items:start}
  #finale .fin-band > *:first-child{grid-column:1}
  #finale .fin-band > *:last-child{grid-column:1}
  #finale .fin-facts{max-width:none;gap:9px}
  /* stacked, the copy is under and over the globe rather than beside it, so
     the page keeps a taller hole: that is the room the closing statement is
     read in before the handover line comes up towards the Earth */
  #finale .fin-well{height:clamp(240px,42vh,440px)}
  #finale .finale-stage{min-height:270vh;min-height:270svh}
}

/* Final cascade authority for the finale reading hold.  Earlier finale rules
   define the composition; these rules turn that composition into a pinned
   penultimate screen without changing its layout. */
#finale{overflow:visible}
#finale .finale-stage{
  display:block;
  min-height:250vh;min-height:250svh;
  padding:0;
}
#finale .finale-pin{
  position:sticky;top:0;
  display:grid;
  grid-template-rows:1fr auto 1fr;
  align-items:center;
  width:100%;height:100vh;height:100svh;
  padding:clamp(64px,7vh,84px) clamp(20px,4vw,64px);
  overflow:hidden;
}
#finale .finale-pin .fin-well{height:clamp(220px,34vh,340px)}
@media (max-width:880px){
  #finale .finale-stage{min-height:270vh;min-height:270svh}
  #finale .finale-pin{padding:clamp(76px,9vh,98px) clamp(20px,5vw,36px)}
  #finale .finale-pin .fin-well{height:clamp(180px,28vh,280px)}
}

/* ---------- final color authority: color-only polish ---------- */
#hero,#sky.is-wb .sky-base,#sky.is-kw .sky-base,.sky-black{
  background:var(--night);
}
#hero::before{
  background:
    radial-gradient(ellipse 84% 58% at 90% 0%,rgba(199,221,255,.44),transparent 62%),
    radial-gradient(ellipse 76% 66% at 0% 4%,rgba(47,109,255,.46),transparent 64%),
    linear-gradient(180deg,#10283c 0%,#0b1725 45%,var(--night) 100%);
}
#hero .hero-title,#hero .hero-vision h2{color:#f9fbff}
#hero .hero-sub{color:rgba(233,240,251,.84)}
#hero .hero-vision p{color:rgba(218,229,245,.76)}
#hero .btn-solid{border-color:rgba(199,221,255,.56);color:#f9fbff}
#hero .btn-solid:hover{background:#f9fbff;color:#0b1422;border-color:#f9fbff}

#sky.is-wb2 .sky-base,.sky-white,.transit--wb .sky-base{background:var(--paper)}
.sky-dusk{background:linear-gradient(180deg,#5d74d7 0%,#27429d 52%,#0b1422 100%)}

#spec{background-image:linear-gradient(180deg,var(--night) 0%,rgba(6,11,19,0) 44vh),var(--blue-bg)}
#match{background-image:linear-gradient(180deg,#153fae 0%,rgba(21,63,174,0) 30vh)}
#quote{background-image:linear-gradient(180deg,var(--night) 0%,rgba(6,11,19,0) 30vh)}
#deliver{background-image:linear-gradient(180deg,var(--paper) 0%,rgba(247,249,253,0) 30vh),var(--blue-bg-2)}
#finale{
  background-color:#060a11;
  background-image:linear-gradient(180deg,#0e2f86 0%,rgba(14,47,134,0) 30vh);
}

.chapter-kicker,.station-chip{color:var(--blue)}
.theme-blue .chapter-kicker,.theme-blue .stat-label,.theme-blue .video-cap{color:var(--blue-ice)}
.chapter-lede{color:#4d5b72}
.theme-dark .chapter-lede{color:#aebbd2}
.theme-blue .chapter-lede{color:#e6f0ff}
.theme-dark .chapter-points li{color:#d4dded}
.theme-blue .chapter-points li{color:#f0f6ff}
.video-stage{background:#eef3fa}
.theme-dark .video-stage{background:#0b1422;border-color:#1c2a46}
.theme-blue .video-stage{background:#102f80;border-color:rgba(199,221,255,.32)}
.play{background:var(--blue);color:#fff}
.video-ui{border-color:rgba(47,109,255,.50)}
.theme-dark .video-ui{color:#d9e3f5;border-color:rgba(217,227,245,.24);background:rgba(6,11,19,.40)}
.theme-blue .video-ui{color:#f0f6ff;border-color:rgba(240,246,255,.28);background:rgba(11,43,120,.38)}
.stat-num{color:var(--ink)}
.stat-label{color:#74829a}

#finale .finale-title,#finale .fin-title,#finale .fin-act-main{color:#f7faff}
#finale .finale-copy,#finale .fin-copy{color:#aebbd2}
#finale .fin-facts li{border-bottom-color:rgba(199,221,255,.16)}
#finale .fin-facts-k,.finale-footer-grid h4,.fin-foot-col h4{color:#8bb7ff}
#finale .fin-facts-v{color:#e0e9f8}
#finale .finale-cta-main,#finale .fin-act-main{border-bottom-color:rgba(139,183,255,.52)}
#finale .finale-cta-main:hover,#finale .fin-act-main:hover{color:var(--blue-ice);border-color:var(--blue-ice)}
#finale .finale-cta-mail,#finale .fin-act-note,.fin-foot-brand p,.finale-footer-brand p,.finale-footer-bottom,.fin-foot-bottom{color:#93a1b8}
#finale .fin-act-note a,.finale-footer-grid a,.fin-foot-col a{color:#d8e3f5}
#finale .fin-act-note a:hover,.finale-footer-grid a:hover,.fin-foot-col a:hover{color:var(--blue-ice)}

.finale-footer{
  background:#060a11;
  border-top-color:rgba(139,183,255,.15);
}
.fin-foot{
  background:rgba(6,10,17,.30);
  border-top-color:rgba(139,183,255,.18);
  color:#e8eef8;
}

/* ---------- pointer atmosphere ---------- */
@media (pointer:fine) and (prefers-reduced-motion:no-preference){
  .cursor-fx{
    position:fixed;left:0;top:0;
    width:34px;height:34px;
    margin:-17px 0 0 -17px;
    z-index:80;
    pointer-events:none;
    opacity:0;
    transform:translate3d(-100px,-100px,0);
    transition:opacity .18s var(--ease);
    mix-blend-mode:screen;
    will-change:transform,opacity;
  }
  .cursor-fx.is-visible{opacity:1}
  .cursor-fx::before{
    content:"";position:absolute;inset:-24px;border-radius:50%;
    background:radial-gradient(circle,rgba(139,183,255,.22),rgba(47,109,255,.12) 38%,transparent 70%);
    filter:blur(4px);
    transform:scale(.92);
    transition:transform .28s var(--ease),opacity .28s var(--ease);
  }
  .cursor-fx::after{
    content:"";position:absolute;inset:6px;border-radius:50%;
    border:1px solid rgba(199,221,255,.72);
    box-shadow:
      0 0 18px rgba(139,183,255,.46),
      inset 0 0 10px rgba(47,109,255,.22);
    opacity:.72;
    transition:transform .28s var(--ease),border-color .28s var(--ease);
  }
  .cursor-fx-core{
    position:absolute;left:50%;top:50%;
    width:4px;height:4px;border-radius:50%;
    background:#f7fbff;
    box-shadow:0 0 12px rgba(199,221,255,.9);
    transform:translate(-50%,-50%);
  }
  .cursor-fx.is-hot::before{transform:scale(1.42);opacity:.95}
  .cursor-fx.is-hot::after{transform:scale(1.26);border-color:#fff}
  .cursor-spark{
    position:fixed;
    width:5px;height:5px;
    margin:-2.5px 0 0 -2.5px;
    z-index:79;
    pointer-events:none;
    border-radius:50%;
    background:rgba(199,221,255,.95);
    box-shadow:0 0 14px rgba(139,183,255,.68);
    animation:cursorSpark .68s var(--ease) forwards;
    will-change:transform,opacity;
  }
  @keyframes cursorSpark{
    0%{opacity:.9;transform:translate3d(0,0,0) scale(1)}
    100%{opacity:0;transform:translate3d(var(--dx),var(--dy),0) scale(.18)}
  }
}