/* =====================================================================
   PROJECT: CONSTELLATIONS — Coming-soon site
   NASA-punk design system: deep-space void, signature amber, condensed
   technical type, HUD/console detailing. Vanilla CSS, CSP-safe (no inline).
   Tokens & motifs adapted from the Project: Constellations Design System.
   ===================================================================== */

/* ---------------------------------------------------------------- TOKENS */
:root {
  /* ============ STRICT STARFIELD PALETTE ============
     Only these five hues exist on this site:
       off-white #f4f5f7 · red #cd2435 · orange #e56335 · gold #d4ac63 · navy #2b4d7d
     Every scale below is a shade/tint/blend of one of them. */

  /* Space / background scale — shades of navy #2b4d7d */
  --space-950:#081120; --space-900:#0b1526; --space-850:#0e1a30;
  --space-800:#12213c; --space-750:#162846; --space-700:#1b3052;
  --space-650:#203a63; --space-600:#264472; --space-550:#2b4d7d; --space-500:#3a5c8e;

  /* Lines / borders — navy tints */
  --line-900:#1b2c47; --line-800:#22375a; --line-700:#2b436b; --line-600:#35507f; --line-500:#446291;

  /* Foreground / text — off-white #f4f5f7 blended toward navy */
  --ink-050:#f4f5f7; --ink-100:#e8ebf0; --ink-200:#cdd4de; --ink-300:#a3aebf;
  --ink-400:#7c8aa0; --ink-500:#5f6f8a; --ink-600:#45536e;

  /* Orange — signature accent #e56335 (shades/tints of it) */
  --amber-200:#fac4a8; --amber-300:#f59d74; --amber-400:#f07a48; --amber-500:#e56335;
  --amber-600:#cc5228; --amber-700:#a5401d; --amber-800:#7d2f14; --amber-050:#2a1207;

  /* Gold #d4ac63 + red #cd2435 */
  --gold-300:#e6c98f; --gold-400:#d4ac63; --gold-500:#bd9346;
  --crimson-400:#e0414c; --crimson-500:#cd2435;

  /* HUD accents — remapped INTO the palette:
     info = navy tint · done/success = gold · caution/in-flight = orange · danger = red */
  --scan-400:#7fa3d4; --scan-500:#2b4d7d;
  --oxy-400:var(--gold-400); --oxy-500:var(--gold-500);
  --hazard-400:var(--crimson-400); --caution-400:var(--amber-500); --caution-500:var(--amber-600);

  /* Semantic aliases */
  --bg-root:var(--space-950); --bg-surface:var(--space-800); --bg-panel:var(--space-700);
  --bg-elevated:var(--space-600); --bg-inset:var(--space-900); --bg-amber-wash:var(--amber-050);
  --text-strong:var(--ink-050); --text-body:var(--ink-200); --text-muted:var(--ink-300);
  --text-dim:var(--ink-400); --text-disabled:var(--ink-600); --text-on-amber:#081120;
  --border-subtle:var(--line-900); --border-default:var(--line-700); --border-strong:var(--line-500);
  --accent:var(--amber-500); --accent-hover:var(--amber-400); --accent-press:var(--amber-600);
  --accent-fg:var(--text-on-amber); --accent-muted:var(--amber-700); --accent-warm:var(--gold-400);
  --info:var(--scan-400); --success:var(--oxy-400); --danger:var(--hazard-400); --caution:var(--caution-400);
  --focus-ring:var(--amber-400);

  /* Type */
  --font-display:'Saira Condensed','Oswald','Arial Narrow',sans-serif;
  --font-sans:'Saira',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'Chakra Petch','JetBrains Mono',ui-monospace,monospace;
  --fs-mono-xs:11px; --fs-xs:12px; --fs-sm:13px; --fs-base:15px; --fs-md:17px;
  --fs-lg:20px; --fs-xl:25px; --fs-2xl:32px; --fs-3xl:42px; --fs-4xl:56px; --fs-5xl:74px; --fs-6xl:100px;
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --lh-tight:1.02; --lh-snug:1.12; --lh-heading:1.18; --lh-body:1.55; --lh-relaxed:1.7;
  --tracking-label:0.24em; --tracking-caps:0.14em; --tracking-wide:0.04em; --tracking-tight:-0.015em;
  --label-font:600 var(--fs-mono-xs)/1 var(--font-mono);

  /* Spacing (4px grid) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px;
  --pad-card:var(--space-6);
  --control-sm:30px; --control-md:38px; --control-lg:46px;
  --width-content:720px; --width-page:1240px;
  --gutter:24px;

  /* Effects */
  --radius-xs:2px; --radius-sm:3px; --radius-md:4px; --radius-lg:6px; --radius-pill:999px;
  --chamfer-sm:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  --chamfer-md:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  --chamfer-lg:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
  --shadow-panel:0 2px 14px rgba(0,0,0,.45); --shadow-elevated:0 8px 30px rgba(0,0,0,.55);
  --shadow-overlay:0 24px 60px rgba(0,0,0,.65);
  --glow-amber:0 0 0 1px rgba(229,99,53,.55),0 0 18px rgba(229,99,53,.28);
  --glow-amber-soft:0 0 24px rgba(229,99,53,.22);
  --ring-focus:0 0 0 2px var(--bg-root),0 0 0 4px var(--focus-ring);

  /* Motion */
  --dur-fast:140ms; --dur-med:240ms; --dur-slow:420ms; --dur-cinematic:700ms;
  --ease-out:cubic-bezier(.16,1,.30,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --t-control:color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

/* ------------------------------------------------------------------ BASE */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg-root)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:transparent;color:var(--text-body);
  font:var(--fw-regular) var(--fs-base)/var(--lh-body) var(--font-sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  margin:0;color:var(--text-strong);font-family:var(--font-display);
  font-weight:var(--fw-semibold);line-height:var(--lh-heading);letter-spacing:var(--tracking-tight);
}
p{margin:0;text-wrap:pretty}
a{color:var(--accent);text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--accent-hover)}
img,svg{max-width:100%;display:block}
::selection{background:var(--accent);color:var(--accent-fg)}
:focus-visible{outline:none;box-shadow:var(--ring-focus)}
*{scrollbar-color:var(--line-700) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-700)}
::-webkit-scrollbar-thumb:hover{background:var(--line-500)}

.skip-link{
  position:absolute;left:12px;top:-48px;z-index:200;
  padding:10px 16px;background:var(--accent);color:var(--accent-fg);
  font:600 12px/1 var(--font-mono);letter-spacing:var(--tracking-caps);text-transform:uppercase;
  border-radius:var(--radius-sm);transition:top var(--dur-fast) var(--ease-out);
}
.skip-link:focus{top:12px;color:var(--accent-fg)}

.container{width:100%;max-width:var(--width-page);margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --------------------------------------------------------------- TEXTURES */
.sf-grid{
  background-image:linear-gradient(var(--line-900) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line-900) 1px,transparent 1px);
  background-size:40px 40px;
}
/* Starfield canvas (fixed, behind everything) */
#stars{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
.page-bg{position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%,rgba(229,99,53,.08),transparent 55%),
             linear-gradient(180deg,var(--space-950),var(--space-900) 70%,var(--space-950));}

/* HUD corner ticks — paints all four L-brackets with one pseudo-element */
.hud-ticks{position:relative}
.hud-ticks::after{
  content:"";position:absolute;inset:8px;pointer-events:none;z-index:2;
  --t:linear-gradient(var(--accent),var(--accent));
  background:
    var(--t) 0 0/11px 1px no-repeat,     var(--t) 0 0/1px 11px no-repeat,
    var(--t) 100% 0/11px 1px no-repeat,   var(--t) 100% 0/1px 11px no-repeat,
    var(--t) 0 100%/11px 1px no-repeat,   var(--t) 0 100%/1px 11px no-repeat,
    var(--t) 100% 100%/11px 1px no-repeat,var(--t) 100% 100%/1px 11px no-repeat;
}

/* ---------------------------------------------------------------- KICKER */
.kicker{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap}
.kicker__tick{width:22px;height:1px;background:var(--accent);flex:0 0 auto}
.kicker__idx{font:600 var(--fs-mono-xs)/1 var(--font-mono);color:var(--accent);
  letter-spacing:var(--tracking-caps);font-variant-numeric:tabular-nums}
.kicker__label{font:600 var(--fs-mono-xs)/1 var(--font-mono);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted)}

/* --------------------------------------------------------------- BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:var(--control-md);padding:0 18px;
  font:var(--fw-semibold) 12.5px/1 var(--font-mono);letter-spacing:var(--tracking-caps);
  text-transform:uppercase;color:var(--text-strong);background:transparent;
  border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;
  white-space:nowrap;user-select:none;transition:var(--t-control)}
.btn__ico{display:inline-flex;width:16px;height:16px;flex:0 0 auto}
.btn__ico svg{width:16px;height:16px;stroke-width:2}
.btn--lg{height:var(--control-lg);padding:0 26px;font-size:14px;gap:10px}
.btn--sm{height:var(--control-sm);padding:0 12px;font-size:11px;gap:6px}
/* Primary = Starfield gold (their BUY NOW); secondary = off-white outline (WATCH TRAILER) */
.btn--primary{background:var(--gold-400);color:#081120;border-color:transparent}
.btn--primary:hover{background:var(--gold-300);color:#081120;box-shadow:0 0 22px rgba(212,172,99,.30)}
.btn--primary:active{background:var(--gold-500);transform:translateY(1px)}
.btn--secondary{background:transparent;color:var(--ink-050);border-color:rgba(244,245,247,.55)}
.btn--secondary:hover{color:#081120;border-color:var(--ink-050);background:var(--ink-050)}
.btn--secondary:active{background:var(--ink-100);transform:translateY(1px)}
.btn--ghost{background:transparent;color:var(--ink-300);border-color:transparent}
.btn--ghost:hover{color:var(--ink-100);background:rgba(255,255,255,.05)}

/* ---------------------------------------------------------------- BADGES */
.badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;
  font:var(--fw-semibold) 10.5px/1 var(--font-mono);letter-spacing:var(--tracking-caps);
  text-transform:uppercase;white-space:nowrap;border:1px solid var(--border-default);
  border-radius:var(--radius-xs);color:var(--ink-200);background:rgba(255,255,255,.05)}
.badge__dot{width:6px;height:6px;border-radius:50%;flex:0 0 auto;background:currentColor;position:relative}
/* Chakra Petch caps ride ~1.5px high in their em box, and the tracking adds a
   trailing space after the last letter — nudge down, trim the tail. */
.badge__label{position:relative;top:1.5px;margin-right:-0.14em}
.badge--amber{color:var(--amber-300);background:rgba(229,99,53,.12);border-color:rgba(229,99,53,.45)}
.badge--info{color:var(--scan-400);background:rgba(127,163,212,.12);border-color:rgba(127,163,212,.40)}
.badge--success{color:var(--oxy-400);background:rgba(212,172,99,.12);border-color:rgba(212,172,99,.40)}
.badge--caution{color:var(--caution-400);background:rgba(229,99,53,.12);border-color:rgba(229,99,53,.40)}
.badge--danger{color:var(--hazard-400);background:rgba(224,65,76,.12);border-color:rgba(224,65,76,.42)}
.badge--pulse .badge__dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;
  background:currentColor;opacity:.5;animation:sf-pulse 1.6s var(--ease-in-out) infinite}

/* ------------------------------------------------------------------ STAT */
.stat{display:flex;flex-direction:column;gap:6px}
.stat__label{font:var(--label-font);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-dim)}
.stat__row{display:flex;align-items:baseline;gap:8px}
.stat__value{font:var(--fw-semibold) var(--fs-3xl)/.9 var(--font-mono);color:var(--text-strong);
  font-variant-numeric:tabular-nums;letter-spacing:-0.01em}
.stat--accent .stat__value{color:var(--accent)}
.stat__unit{font:var(--fw-medium) var(--fs-md)/1 var(--font-mono);color:var(--text-muted);
  text-transform:uppercase;letter-spacing:var(--tracking-wide)}

/* ----------------------------------------------------------------- PANEL */
.panel{position:relative;padding:1px;background:var(--border-default);
  clip-path:var(--chamfer-md);box-shadow:var(--shadow-panel)}
.panel--glow{box-shadow:var(--glow-amber-soft)}
.panel__inner{position:relative;background:var(--bg-panel);clip-path:var(--chamfer-md);padding:var(--pad-card)}

/* Feature panel */
.feature__ico{display:inline-flex;width:30px;height:30px;color:var(--accent);margin-bottom:16px}
.feature__ico svg{width:30px;height:30px;stroke-width:1.6}
.feature h3{font:var(--fw-semibold) 20px/1.1 var(--font-display);text-transform:uppercase;
  letter-spacing:-0.01em;margin:0 0 8px}
.feature p{font:var(--fw-regular) 13.5px/1.6 var(--font-sans);color:var(--text-muted);margin:0}

/* ------------------------------------------------------------------ CARD */
.card{display:flex;flex-direction:column;background:var(--bg-panel);
  border:1px solid var(--border-default);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-panel);
  transition:transform var(--dur-med) var(--ease-out),box-shadow var(--dur-med) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.card--interactive:hover{border-color:var(--accent);transform:translateY(-3px);
  box-shadow:var(--shadow-elevated),var(--glow-amber-soft)}
.card__body{display:flex;flex-direction:column;gap:10px;padding:var(--pad-card)}
.card__kicker{font:var(--label-font);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--accent)}
.card__title{margin:0;font:var(--fw-semibold) var(--fs-lg)/1.15 var(--font-display);
  letter-spacing:var(--tracking-tight);color:var(--text-strong)}
.card__text{font:var(--fw-regular) var(--fs-sm)/1.6 var(--font-sans);color:var(--text-muted)}
.card__footer{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:4px;padding-top:12px;border-top:1px solid var(--border-subtle)}
.card__meta{display:flex;align-items:center;gap:6px;font:600 11px/1 var(--font-mono);
  color:var(--text-dim);letter-spacing:.08em}

/* ------------------------------------------------------------------- NAV */
/* Light nav — bethesda.net Starfield signature: off-white bar, dark type, gold CTA */
.nav{position:sticky;top:0;z-index:50;height:64px;
  background:var(--ink-050);
  border-bottom:1px solid rgba(8,17,32,.14)}
.nav__inner{display:flex;align-items:center;gap:28px;height:100%}
.nav__brand{display:flex;align-items:center;gap:11px}
.nav__brand:hover{color:inherit}
.brand__logo{width:38px;height:38px;flex:0 0 auto}
.footer__brand-row .brand__logo{width:30px;height:30px}
.brand__stack{display:flex;flex-direction:column;line-height:1}
.brand__kick{font:600 9px/1 var(--font-mono);letter-spacing:.34em;color:var(--amber-600);text-transform:uppercase}
.brand__name{font:600 16px/1.1 var(--font-display);letter-spacing:.02em;color:#101b2d;
  text-transform:uppercase;margin-top:3px}
.nav__links{display:flex;align-items:center;gap:4px;margin-left:6px}
.nav__link{padding:8px 12px;font:600 11px/1 var(--font-mono);letter-spacing:var(--tracking-caps);
  text-transform:uppercase;color:#101b2d;border-bottom:2px solid transparent}
.nav__link:hover{color:var(--amber-600)}
.nav__actions{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav .badge--amber{color:var(--amber-700);background:rgba(229,99,53,.08);border-color:rgba(229,99,53,.5)}
/* footer reuses .brand__* on dark — keep the name light there */
.footer__brand-name{color:var(--text-strong)}

/* ------------------------------------------------------------------ HERO */
.hero{position:relative;overflow:hidden;
  background-image:url(../img/bg-deepspace.webp);background-size:cover;background-position:center 30%}
/* warm dusty-dawn wash (Starfield hero mood) over the base image */
.hero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(58,36,22,.42),transparent 44%,rgba(8,17,32,.62)),
             radial-gradient(78% 78% at 80% 4%,rgba(233,132,70,.34),transparent 54%),
             radial-gradient(120% 120% at 26% 42%,transparent 40%,rgba(8,17,32,.82) 100%)}
.hero__inner{position:relative;max-width:var(--width-page);margin-inline:auto;
  padding:104px var(--gutter) 88px}
.hero__title{margin:22px 0 0;font:600 clamp(48px,8.5vw,104px)/0.92 var(--font-display);
  letter-spacing:-0.01em;text-transform:uppercase;color:var(--text-strong);max-width:16ch;text-wrap:balance}
.hero__title .accent{color:var(--accent)}
.hero__lede{margin:24px 0 0;font:var(--fw-regular) 18px/1.6 var(--font-sans);
  color:var(--text-body);max-width:56ch}
.hero__cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.hero__spec-label{margin-top:60px}
.hero__stats{display:flex;gap:52px;margin-top:20px;flex-wrap:wrap}

/* ------------------------------------------------ SPECTRUM (Starfield motif) */
/* Stacked star-class lines: red -> orange -> tan -> gold -> teal. The single
   most recognizable Starfield brand device; used as a full-bleed divider. */
.spectrum{height:10px;width:100%;border:0;display:block;
  background:linear-gradient(180deg,
    #cd2435 0 25%, #e56335 25% 50%, #d4ac63 50% 75%, #2b4d7d 75% 100%);
  box-shadow:0 1px 22px rgba(229,99,53,.28)}
.spectrum--slim{height:6px;box-shadow:none}

/* --------------------------------------------------------------- SECTION */
.section{max-width:var(--width-page);margin-inline:auto;padding:80px var(--gutter)}
.section--band{background:var(--space-900);border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);max-width:none;padding:0}
.section--band > .section__wrap{max-width:var(--width-page);margin-inline:auto;padding:80px var(--gutter)}
.section__head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.section__title{margin:18px 0 0;font:600 var(--fs-3xl)/1 var(--font-display);
  letter-spacing:-0.01em;text-transform:uppercase;color:var(--text-strong);max-width:18ch}
.section__intro{margin:16px 0 0;font:var(--fw-regular) 16px/1.65 var(--font-sans);
  color:var(--text-muted);max-width:60ch}
.grid{display:grid;gap:18px;margin-top:40px}
.grid--features{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* --------------------------------------------------------------- SHOWCASE */
.showcase{position:relative;overflow:hidden;border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);
  background-image:url(../img/bg-nebula.webp);background-size:cover;background-position:center}
.showcase::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,17,32,.92),rgba(8,17,32,.55) 70%,rgba(8,17,32,.75))}
.showcase__inner{position:relative;max-width:var(--width-page);margin-inline:auto;
  padding:120px var(--gutter)}
.showcase__title{margin:20px 0 0;font:600 clamp(34px,5vw,58px)/1.0 var(--font-display);
  text-transform:uppercase;letter-spacing:-0.01em;color:var(--text-strong);max-width:16ch}
.showcase__sub{margin:22px 0 0;font:var(--fw-regular) 17px/1.65 var(--font-sans);
  color:var(--text-body);max-width:52ch}

/* --------------------------------------------------------- STATUS / ROADMAP */
.status-list{display:grid;gap:12px;margin-top:40px}
.status-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;
  padding:20px 24px;background:var(--bg-panel);border:1px solid var(--border-default);border-radius:var(--radius-lg)}
.status-row__idx{font:600 var(--fs-mono-xs)/1 var(--font-mono);color:var(--text-dim);
  letter-spacing:var(--tracking-caps);font-variant-numeric:tabular-nums}
.status-row__name{font:var(--fw-semibold) var(--fs-lg)/1.1 var(--font-display);
  text-transform:uppercase;letter-spacing:-0.01em;color:var(--text-strong)}
.status-row__note{font:var(--fw-regular) 13.5px/1.5 var(--font-sans);color:var(--text-muted);margin-top:3px}

/* --------------------------------------------------------------- CTA BAND */
.cta{max-width:var(--width-page);margin-inline:auto;padding:84px var(--gutter)}
.cta__panel{position:relative;overflow:hidden;padding:60px 48px;
  background-image:url(../img/bg-nebula.webp);background-size:cover;background-position:center}
.cta__panel::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,21,38,.94),rgba(11,21,38,.55))}
.cta__content{position:relative;max-width:52ch}
.cta__title{margin:18px 0 14px;font:600 clamp(36px,5vw,52px)/0.98 var(--font-display);
  text-transform:uppercase;letter-spacing:-0.01em;color:var(--text-strong)}
.cta__text{margin:0 0 30px;font:var(--fw-regular) 16px/1.6 var(--font-sans);color:var(--text-body)}
.cta__actions{display:flex;gap:14px;flex-wrap:wrap}

/* ---------------------------------------------------------------- FOOTER */
/* Single divider: the spectrum stripe itself, flush at the footer's top edge */
.footer{background:var(--space-900);padding:0 0 32px}
.footer > .spectrum{margin-bottom:52px}
.footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:32px}
.footer__brand-row{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.footer__brand-name{font:600 15px/1 var(--font-display);letter-spacing:.02em;
  color:var(--text-strong);text-transform:uppercase}
.footer__tagline{font:var(--fw-regular) 12.5px/1.6 var(--font-sans);color:var(--text-dim);max-width:32ch}
.footer__col{display:flex;flex-direction:column;gap:11px}
.footer__col-h{font:600 10px/1 var(--font-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted)}
.footer__link{font:var(--fw-regular) 13px/1 var(--font-sans);color:var(--text-dim)}
.footer__link:hover{color:var(--amber-300)}
.footer__legal{max-width:var(--width-page);margin:36px auto 0;padding-top:20px;
  border-top:1px solid var(--border-subtle);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer__copy{font:var(--fw-regular) 11px/1.5 var(--font-mono);color:var(--ink-500);letter-spacing:.04em;max-width:70ch}
.footer__flag{font:var(--fw-regular) 11px/1 var(--font-mono);color:var(--ink-500);
  letter-spacing:var(--tracking-caps);text-transform:uppercase}

/* ------------------------------------------------------------- DOC PAGES */
.doc-wrap{padding-block:56px 96px}
.doc-hero{max-width:var(--width-content);margin-inline:auto;margin-bottom:44px}
.back-link{display:inline-flex;align-items:center;gap:8px;margin-bottom:26px;
  font:600 11px/1 var(--font-mono);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-dim)}
.back-link:hover{color:var(--amber-300)}
.back-link svg{width:15px;height:15px;stroke-width:2}
.doc-hero .eyebrow{font:600 var(--fs-mono-xs)/1 var(--font-mono);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.doc-hero h1{font:600 var(--fs-4xl)/1 var(--font-display);text-transform:uppercase;letter-spacing:-0.01em}
.doc-layout{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:48px;
  max-width:var(--width-page);margin-inline:auto}
.doc{max-width:var(--width-content);font-size:var(--fs-base)}
.doc h2{font:600 var(--fs-xl)/1.15 var(--font-display);text-transform:uppercase;letter-spacing:-0.01em;
  color:var(--text-strong);margin:40px 0 12px;padding-top:12px}
.doc h2:first-of-type{margin-top:12px}
.doc p{margin:0 0 14px;color:var(--text-body);line-height:1.7}
.doc ul{margin:0 0 16px;padding-left:20px;color:var(--text-body);line-height:1.7}
.doc li{margin-bottom:8px}
.doc li::marker{color:var(--accent)}
.doc strong{color:var(--text-strong);font-weight:var(--fw-semibold)}
.doc code{font:500 13px/1.4 var(--font-mono);background:var(--bg-inset);color:var(--amber-300);
  padding:2px 6px;border-radius:var(--radius-xs);border:1px solid var(--border-subtle)}
.doc .muted{color:var(--text-muted)}
.doc .callout{border:1px solid rgba(229,99,53,.32);background:var(--amber-050);
  border-radius:var(--radius-md);padding:16px 18px;color:var(--text-body);margin:0 0 16px}
.doc .see-also{margin-top:32px;padding-top:20px;border-top:1px solid var(--border-subtle)}
.toc{position:sticky;top:88px;align-self:start;border-left:1px solid var(--border-subtle);padding-left:20px}
.toc__title{font:600 10px/1 var(--font-mono);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted);margin:0 0 14px}
.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;counter-reset:toc}
.toc li{counter-increment:toc}
.toc a{font:var(--fw-regular) 12.5px/1.4 var(--font-sans);color:var(--text-dim);display:flex;gap:8px}
.toc a::before{content:counter(toc,decimal-leading-zero);font:600 10px/1.4 var(--font-mono);color:var(--accent)}
.toc a:hover{color:var(--amber-300)}

/* --------------------------------------------------------- REVEAL / MOTION */
@keyframes sf-fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes sf-pulse{0%,100%{opacity:1}50%{opacity:.4}}
html.js .reveal{opacity:0}
html.js .reveal.is-visible{animation:sf-fade-up var(--dur-slow) var(--ease-out) both}
html.js .stagger.is-visible > *{animation:sf-fade-up var(--dur-slow) var(--ease-out) both}
html.js .stagger.is-visible > *:nth-child(1){animation-delay:.04s}
html.js .stagger.is-visible > *:nth-child(2){animation-delay:.10s}
html.js .stagger.is-visible > *:nth-child(3){animation-delay:.16s}
html.js .stagger.is-visible > *:nth-child(4){animation-delay:.22s}
html.js .stagger.is-visible > *:nth-child(5){animation-delay:.28s}
html.js .stagger.is-visible > *:nth-child(6){animation-delay:.34s}

/* -------------------------------------------------------------- RESPONSIVE */
@media (max-width:900px){
  :root{--gutter:20px}
  .doc-layout{grid-template-columns:minmax(0,1fr);gap:0}
  .toc{display:none}
  .footer__top{grid-template-columns:1fr 1fr}
  .status-row{grid-template-columns:auto 1fr;gap:8px 16px}
  .status-row__badge{grid-column:2;justify-self:start}
}
@media (max-width:640px){
  .nav__links{display:none}
  .nav__actions .badge{display:none}
  .hero__inner{padding:84px var(--gutter) 68px}
  .hero__stats{gap:32px}
  .section{padding:60px var(--gutter)}
  .section--band > .section__wrap{padding:60px var(--gutter)}
  .showcase__inner{padding:88px var(--gutter)}
  .cta__panel{padding:44px 26px}
  .footer__top{grid-template-columns:1fr}
  .stat__value{font-size:var(--fs-2xl)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  html.js .reveal{opacity:1}
  html.js .stagger.is-visible > *{animation:none}
}

@media print{
  #stars,.page-bg,.nav__actions,.cta,.showcase{display:none}
  body{background:#fff;color:#000}
  *{box-shadow:none!important}
}

/* ===================================================================
   ROADMAP — homepage main focus (latest milestone + phase tracker/tabs)
   =================================================================== */
.rm{padding-top:64px}
.rm .section__head{align-items:flex-end}
.rm__intro{max-width:52ch}

/* --- Latest-milestone marquee --- */
.rm-milestone{margin-top:0}
.rm-milestone__inner{padding:28px 30px;
  background:linear-gradient(180deg,rgba(229,99,53,.10),rgba(229,99,53,.02) 44%,transparent),var(--bg-panel)}
.rm-milestone__head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.rm-milestone__date{font:600 var(--fs-mono-xs)/1 var(--font-mono);letter-spacing:var(--tracking-caps);color:var(--gold-300)}
.rm-milestone__title{font:600 clamp(22px,3.2vw,30px)/1.08 var(--font-display);text-transform:uppercase;
  letter-spacing:-0.01em;color:var(--ink-050);max-width:22ch}
.rm-milestone__body{margin-top:12px;font:var(--fw-regular) 15px/1.62 var(--font-sans);color:var(--text-body);max-width:74ch}
.rm-milestone__body em{color:var(--ink-050);font-style:normal;font-weight:500}
.rm-milestone__next{margin-top:20px;padding-top:18px;border-top:1px solid rgba(229,99,53,.20)}
.rm-next__label{display:block;margin-bottom:12px;font:600 var(--fs-mono-xs)/1 var(--font-mono);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--amber-300)}
.rm-nextlist{margin:0;padding:0;list-style:none;display:grid;gap:10px;counter-reset:rmn}
.rm-nextlist li{position:relative;padding-left:34px;counter-increment:rmn;
  font:var(--fw-regular) 14px/1.5 var(--font-sans);color:var(--ink-100)}
.rm-nextlist li::before{content:counter(rmn,decimal-leading-zero);position:absolute;left:0;top:0;
  width:22px;height:20px;display:grid;place-items:center;font:600 11px/1 var(--font-mono);
  color:var(--amber-400);border:1px solid rgba(229,99,53,.4)}

/* --- Flight-plan head + legend --- */
.rm-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-top:52px}
.rm-legend{display:flex;gap:18px;flex-wrap:wrap}
.rm-legend__item{display:inline-flex;align-items:center;gap:8px;font:600 var(--fs-mono-xs)/1 var(--font-mono);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-dim)}
.rm-legend .rm-pip{margin-top:0}

/* --- Timeline (every phase, numbered spine) --- */
.rm-timeline{position:relative;margin-top:30px;display:grid;gap:20px}
.rm-timeline::before{content:"";position:absolute;left:27px;top:10px;bottom:10px;width:1px;
  background:linear-gradient(180deg,var(--oxy-500),var(--amber-600) 38%,var(--line-700) 60%,var(--line-800))}
.rm-phase{display:grid;grid-template-columns:56px minmax(0,1fr);gap:clamp(14px,2.4vw,26px);align-items:start}
.rm-phase__rail{display:flex;justify-content:center}
.rm-phase__node{position:relative;z-index:1;display:grid;place-items:center;width:54px;height:54px;
  background:var(--space-850);border:1px solid var(--border-default);clip-path:var(--chamfer-md);
  font:700 16px/1 var(--font-mono);color:var(--text-dim);font-variant-numeric:tabular-nums}
.rm-phase.is-done .rm-phase__node{color:var(--oxy-400);border-color:rgba(212,172,99,.45)}
.rm-phase.is-active .rm-phase__node{color:var(--amber-400);border-color:var(--accent);box-shadow:var(--glow-amber)}
.rm-phase.is-queued .rm-phase__node{color:var(--ink-500)}
.rm-phase.is-active .rm-phase__panel{background:var(--accent);box-shadow:var(--glow-amber),var(--shadow-panel)}
.rm-phase.is-active .rm-phase__panel .rm-panel__inner{background:linear-gradient(180deg,rgba(229,99,53,.06),transparent 32%),var(--space-750)}
.rm-here{display:block;margin-bottom:8px;font:600 var(--fs-mono-xs)/1 var(--font-mono);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--amber-400)}

/* --- Phase panel body (shared by every timeline card) --- */
.rm-panel__inner{padding:26px 28px}
.rm-panel__top{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap}
.rm-panel__idx{font:600 var(--fs-mono-xs)/1 var(--font-mono);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-dim)}
.rm-panel__title{margin:9px 0 0;font:600 clamp(22px,3vw,28px)/1.05 var(--font-display);
  text-transform:uppercase;letter-spacing:-0.01em;color:var(--text-strong)}
.rm-panel__sub{margin:10px 0 0;font:var(--fw-regular) 14.5px/1.55 var(--font-sans);color:var(--text-muted);max-width:60ch}
.rm-progress{display:flex;align-items:center;gap:14px;margin:22px 0 6px}
.rm-progress__track{position:relative;flex:1;height:7px;background:var(--bg-inset);
  border:1px solid var(--border-subtle);overflow:hidden;clip-path:var(--chamfer-sm)}
.rm-progress__fill{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--oxy-500),var(--oxy-400));box-shadow:0 0 12px rgba(212,172,99,.4);
  transition:width var(--dur-cinematic) var(--ease-out)}
.rm-progress__fill--amber{background:linear-gradient(90deg,var(--amber-600),var(--amber-400));box-shadow:0 0 12px rgba(229,99,53,.45)}
.rm-progress__fill--none{background:var(--line-600);box-shadow:none}
/* widths via attribute selector so bars are correct even with JS disabled */
.rm-progress__fill[data-fill="62"]{width:62%}
.rm-progress__fill[data-fill="75"]{width:75%}
.rm-progress__fill[data-fill="86"]{width:86%}
.rm-progress__fill[data-fill="100"]{width:100%}
.rm-progress__pct{min-width:46px;text-align:right;font:600 14px/1 var(--font-mono);color:var(--text-body);font-variant-numeric:tabular-nums}
.rm-readout{margin:0;font:600 var(--fs-mono-xs)/1.4 var(--font-mono);letter-spacing:var(--tracking-caps);
  text-transform:uppercase;color:var(--text-dim)}
.rm-items{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.rm-items li{display:grid;grid-template-columns:14px 1fr;gap:12px;align-items:start;
  font:var(--fw-regular) 14px/1.55 var(--font-sans);color:var(--text-body)}
.rm-items b{color:var(--ink-050);font-weight:500}
.rm-pip{width:10px;height:10px;margin-top:5px;border-radius:50%;flex:0 0 auto}
.rm-pip--done{background:var(--oxy-400);box-shadow:0 0 7px rgba(212,172,99,.4)}
.rm-pip--flight{background:var(--caution-400);box-shadow:0 0 7px rgba(229,99,53,.35)}
.rm-pip--gate{width:8px;height:8px;margin-top:6px;background:transparent;border:1.5px solid var(--crimson-400)}
.rm-pip--open{width:8px;height:8px;margin-top:6px;background:transparent;border:1.5px solid var(--line-500)}
.rm-tag{display:inline-block;margin-left:4px;padding:2px 7px;font:600 9px/1.5 var(--font-mono);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;border-radius:var(--radius-xs);vertical-align:1px}
.rm-tag--flight{color:var(--caution-400);background:rgba(229,99,53,.10);border:1px solid rgba(229,99,53,.3)}
.rm-tag--gate{color:var(--crimson-400);background:rgba(205,36,53,.10);border:1px solid rgba(205,36,53,.38)}

/* --- Mission-status close --- */
.rm-status{margin-top:30px}
.rm-status__inner{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:center;padding:26px 30px}
.rm-status__verdict h3{margin:8px 0 8px;font:600 20px/1.1 var(--font-display);text-transform:uppercase;letter-spacing:-0.01em;color:var(--ink-050)}
.rm-status__verdict p{font:var(--fw-regular) 14px/1.6 var(--font-sans);color:var(--text-muted);max-width:52ch}
.rm-status__tests{display:grid;gap:11px}
.rm-status__row{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding-bottom:10px;border-bottom:1px solid var(--border-subtle)}
.rm-status__row:last-child{border-bottom:0;padding-bottom:0}
.rm-status__row span{font:600 var(--fs-mono-xs)/1 var(--font-mono);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-dim)}
.rm-status__row b{font:600 15px/1.2 var(--font-display);color:var(--ink-050);text-align:right;font-variant-numeric:tabular-nums}
.rm-status__row b.g{color:var(--oxy-400)}

@media (max-width:640px){
  .rm{padding-top:44px}
  .rm-milestone__inner,.rm-panel__inner,.rm-status__inner{padding:22px 20px}
  .rm-timeline::before{display:none}
  .rm-phase{grid-template-columns:1fr;gap:0}
  .rm-phase__rail{justify-content:flex-start;margin-bottom:12px}
  .rm-phase__node{width:auto;height:auto;padding:6px 12px;clip-path:none;border-radius:var(--radius-xs);font-size:14px;letter-spacing:.08em}
  .rm-phase__node::before{content:"PHASE ";font-size:10px;letter-spacing:.16em;color:var(--ink-500)}
  .rm-status__inner{grid-template-columns:1fr;gap:18px}
}