/* =====================================================================
   Tivinaut – Variant 2 "Launch Sequence"
   Editorial, typographic, dark. Night blue ground, amber engine accent,
   cool white-blue secondary. No frameworks.
   ===================================================================== */

:root {
  --bg: #050914;
  --bg-2: #0a1226;
  /* the former --panel / --panel-2 flat fills are gone: every panel is a
     glass surface now, see the --glass-* tokens below */
  --ink: #eef2ff;
  --muted: #a6b1cc;
  --line: rgba(191, 227, 255, 0.14);
  --line-strong: rgba(191, 227, 255, 0.28);
  --amber: #ff9a3c;
  --amber-2: #ff6a1a;
  --amber-ink: #1a0d02;
  --ice: #bfe3ff;
  --ice-2: #7cc4ff;

  --font-head: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --max: 1200px;
  --pad: clamp(20px, 5vw, 72px);
  --header-h: 72px;
  --radius: 22px;

  --rocket-col: 176px;
  --rocket-w: 108px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- liquid glass (see the ".glass" block below) ---- */
  --glass-blur-lg: 22px;
  --glass-blur-md: 18px;
  --glass-blur-sm: 12px;
  --glass-sat: 1.8;
  --glass-tint: rgba(191, 227, 255, 0.07);
  --glass-tint-2: rgba(191, 227, 255, 0.11);
  --glass-tint-amber: rgba(255, 168, 78, 0.12);
  --glass-opaque: rgba(10, 18, 38, 0.85);
  /* edge: bright rim top-left, ice and amber dispersion in the middle, shadow bottom-right */
  --glass-rim: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(191, 227, 255, 0.42) 17%,
    rgba(255, 255, 255, 0.06) 41%,
    rgba(255, 198, 140, 0.24) 62%,
    rgba(255, 255, 255, 0.05) 77%,
    rgba(2, 7, 20, 0.55) 100%
  );
  /* thickness of the glass body: top light line, bottom shadow line, inner lens bands */
  --glass-inset:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(0, 0, 0, 0.26),
    inset 0 10px 22px -14px rgba(255, 255, 255, 0.18),
    inset 0 -16px 28px -20px rgba(3, 8, 22, 0.65);
  --glass-lift: 0 22px 54px -38px rgba(0, 0, 0, 0.95);
  --glass-glow: 0 0 0 1px rgba(191, 227, 255, 0.22), 0 14px 38px -18px rgba(124, 196, 255, 0.4);
}

/* ---------- reset & base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
canvas {
  max-width: 100%;
  display: block;
}

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

h1,
h2,
h3,
p,
ul,
figure {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

button,
select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--ice);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection {
  background: rgba(255, 154, 60, 0.35);
  color: var(--ink);
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  font-size: 24px;
  line-height: 1;
  display: inline-block;
  flex: none;
  user-select: none;
  overflow: hidden;
  max-height: 1em;
}

main {
  position: relative;
  z-index: 1;
}

section[id] {
  scroll-margin-top: var(--header-h);
}

.anchor-top {
  position: absolute;
  top: 0;
}

/* ---------- starfield canvas ---------- */
.starfield {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background: var(--bg);
}

/* ---------- countdown overlay ---------- */
.countdown {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  transition: opacity 320ms ease-in;
}

.js .countdown {
  display: flex;
}

.countdown.is-done {
  opacity: 0;
  pointer-events: none;
}

.countdown-inner {
  display: flex;
  align-items: baseline;
  gap: 0.05em;
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--ice);
  transition: transform 340ms var(--ease-out), opacity 220ms ease-in, filter 340ms ease-out;
}

/* ignition: the final digit flares and rushes towards the viewer as the overlay lifts */
.countdown.is-done .countdown-inner {
  transform: scale(1.35);
  opacity: 0;
  filter: blur(6px);
}

.countdown-t {
  font-size: clamp(2rem, 6vw, 4.5rem);
  color: var(--amber);
  letter-spacing: -0.02em;
}

.countdown-digit {
  font-size: clamp(8rem, 32vw, 22rem);
  display: inline-block;
  min-width: 0.7em;
  text-align: center;
}

.countdown-digit.is-in {
  animation: cd-in 230ms var(--ease-out) both;
}

@keyframes cd-in {
  from {
    opacity: 0;
    transform: scale(1.4) translateY(0.04em);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- mission timeline (progress bar with one mark per section) ---------- */
.mission-progress {
  --bar-len: 38vh;
  position: fixed;
  right: 18px;
  top: 50%;
  z-index: 60; /* above the header: on phones the bar runs along the top edge */
  width: 3px;
  height: var(--bar-len);
  transform: translateY(-50%);
  background: rgba(191, 227, 255, 0.12);
  border-radius: 3px;
  overflow: visible;
  pointer-events: none;
}

.mission-progress__fill {
  position: absolute;
  inset: 0;
  transform-origin: top center;
  transform: scaleY(var(--p, 0));
  background: linear-gradient(to bottom, var(--ice-2), var(--amber));
  border-radius: 3px;
  will-change: transform;
}

/* the amber head rides on a transform, never on top/left (no layout per frame) */
.mission-progress::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 12px rgba(255, 154, 60, 0.8);
  transform: translate3d(0, calc(var(--p, 0) * var(--bar-len)), 0);
  will-change: transform;
}

.mission-progress__marks {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --m (0..1) is the section's position on the page, set once per layout pass */
.mark {
  position: absolute;
  left: 50%;
  top: calc(var(--m, 0) * 100%);
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  transition: background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

.mark.is-lit {
  background: var(--ice-2);
  border-color: var(--ice-2);
}

.mark.is-current {
  box-shadow: 0 0 10px 2px rgba(124, 196, 255, 0.55);
}

/* label of the current section, desktop only (hidden with the vertical bar below 900 px) */
.mark span {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translate3d(6px, -50%, 0);
  white-space: nowrap;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  transition: opacity 300ms ease, transform 300ms var(--ease-out);
}

.mark.is-current span {
  opacity: 1;
  transform: translate3d(0, -50%, 0);
}

/* =====================================================================
   Liquid glass
   ---------------------------------------------------------------------
   Every surface that used to be a flat transparent panel is a slab of
   glass over the starfield. Four layers, in painting order:

     1. backdrop-filter  blur + saturate: the field behind the slab goes
        soft and keeps its colour instead of washing out.
     2. background-color the tint (--glass-tint), white-blue, amber on
        Pro surfaces. Carries the readability, so it is never below .06.
     3. ::after          specular: a wide soft highlight from the top
        left plus a thin sheen along the top edge. z-index:-1 keeps it
        under the text (painted after the tint, before in-flow content).
     4. ::before         the rim: a 1.25px gradient ring, masked out in
        the middle (mask-composite: exclude), bright at the top left,
        ice/amber in the flanks, dark at the bottom right. Together with
        the inset shadows in --glass-inset this is the refracted edge.

   Rules that must not be broken:
   * No nested backdrop-filter. An element with backdrop-filter becomes a
     backdrop root: a filtered child only ever sees what is painted
     *inside* the parent, i.e. nothing — it renders as a flat grey blob
     (verified in Chrome). Children of a glass surface therefore use
     .glass--inner (tint + rim + specular, no filter). For the same
     reason the mobile nav is not a separate pane below the header but
     part of the header slab (see the 720px breakpoint).
   * Blur radius comes from the three tokens, never a literal, so the
     720px breakpoint can shrink all of them at once.
   * Everything decorative is a pointer-events:none pseudo element with
     inset:0 and inherited radius, so nothing shifts the layout.
   ===================================================================== */
.glass {
  position: relative;
  isolation: isolate;
  border: 0;
  background-color: var(--glass-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur, var(--glass-blur-md))) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur, var(--glass-blur-md))) saturate(var(--glass-sat));
  box-shadow: var(--glass-inset), var(--glass-lift);
  transition: background-color 260ms ease, box-shadow 260ms ease, transform 220ms var(--ease-out);
}

.glass::before,
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* rim / refracted edge */
.glass::before {
  z-index: 2;
  padding: var(--glass-rim-w, 1.25px);
  background: var(--glass-rim);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* specular highlight, under the content */
.glass::after {
  z-index: -1;
  background:
    radial-gradient(130% 80% at 24% -18%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06) 34%, transparent 62%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.09), transparent 24%);
  opacity: var(--glass-spec, 1);
  transition: opacity 260ms ease;
}

/* strong = thicker slab for the large panels */
.glass--strong {
  --glass-blur: var(--glass-blur-lg);
  --glass-tint: var(--glass-tint-2);
}

.glass--pill {
  border-radius: 999px;
}

/* controls that sit ON a glass slab: no second filter (backdrop root) */
.glass--inner {
  position: relative;
  isolation: isolate;
  background-color: var(--glass-tint-2);
  box-shadow: var(--glass-inset);
  transition: background-color 220ms ease, box-shadow 220ms ease, transform 200ms var(--ease-out);
}

/* interaction: lights up, presses in */
.glass--i {
  cursor: pointer;
}

.glass--i:focus-visible {
  --glass-tint: var(--glass-tint-2);
  --glass-spec: 1;
  box-shadow: var(--glass-inset), var(--glass-lift), var(--glass-glow);
}

/* hover only where a real pointer hovers; on touch the tap-highlight below takes over (a
   touched element would otherwise keep its hover state until the next tap) */
@media (hover: hover) {
  .glass--i:hover {
    --glass-tint: var(--glass-tint-2);
    --glass-spec: 1;
    box-shadow: var(--glass-inset), var(--glass-lift), var(--glass-glow);
  }
}

.glass--i:active {
  --glass-tint: var(--glass-tint-2);
  transform: scale(0.985);
}

/* ---------- header ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--header-h);
  /* one slab across the top; on mobile it grows to swallow the open nav */
  --glass-blur: var(--glass-blur-md);
  /* bars sit over arbitrary content, so they tint with ink instead of
     ice: the nav labels keep their contrast over a blurred headline */
  --glass-tint: rgba(7, 13, 30, 0.4);
  --glass-spec: 0.85;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(191, 227, 255, 0.1);
}

.site-header.is-scrolled {
  --glass-blur: var(--glass-blur-lg);
  --glass-tint: rgba(7, 13, 30, 0.62);
  --glass-spec: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(191, 227, 255, 0.16),
    0 18px 40px -34px rgba(0, 0, 0, 0.95);
}

/* a full-bleed bar has no left/right edge on screen: no ring, just the
   top sheen and the hairline from the box-shadow above */
.glass--bar::before {
  display: none;
}

.header-inner {
  max-width: 1360px;
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  gap: 24px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 60;
  padding: 10px 14px;
  background: var(--amber);
  color: var(--amber-ink);
  border-radius: 8px;
  font-weight: 600;
}

.skip-link:focus {
  top: 14px;
}

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
}

.logo-mark {
  width: 34px;
  height: 34px;
  color: var(--ice);
  flex: none;
}

.logo-text {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 1.25rem;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  gap: 28px;
}

.site-nav a {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 0;
  position: relative;
  transition: color 160ms ease;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 2px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease-out);
}

.site-nav a:focus-visible,
.site-nav a:active {
  color: var(--ink);
}

.site-nav a:active::after {
  transform: scaleX(1);
}

@media (hover: hover) {
  .site-nav a:hover {
    color: var(--ink);
  }

  .site-nav a:hover::after {
    transform: scaleX(1);
  }
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
}

.nav-toggle:focus-visible,
.nav-toggle:active {
  background-color: rgba(191, 227, 255, 0.19);
}

@media (hover: hover) {
  .nav-toggle:hover {
    background-color: rgba(191, 227, 255, 0.19);
  }
}

.lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.lang .material-symbols-outlined {
  font-size: 20px;
}

/* a <select> renders no pseudo elements, so it gets the flat inner-glass
   variant: tint plus the inset light/shadow lines, and a real border as
   the rim stand-in */
.lang select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(191, 227, 255, 0.22);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
  cursor: pointer;
}

.lang select:focus-visible,
.lang select:active {
  background-color: rgba(191, 227, 255, 0.17);
  border-color: rgba(191, 227, 255, 0.38);
}

@media (hover: hover) {
  .lang select:hover {
    background-color: rgba(191, 227, 255, 0.17);
    border-color: rgba(191, 227, 255, 0.38);
  }
}

.lang select:disabled {
  cursor: default;
  opacity: 0.85;
}

.lang select option {
  color: #111;
}

/* ---------- typography helpers ---------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
}

.kicker::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--amber);
  flex: none;
}

/* telemetry line: the kicker's dash extends from the left as the section reveals, and the
   label follows with a small lag */
.js .kicker.reveal::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 640ms var(--ease-out);
  transition-delay: calc(var(--d, 0ms) + 120ms);
}

.js .kicker.reveal.is-visible::before {
  transform: none;
}

/* ---------- headline word masks (.split, wrapped by js/scenes.js) ---------- */
/* each word rises out of its own clip; padding/margin pairs keep ascenders and descenders
   inside the clip without changing the line box */
.js .split .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0.1em 0.04em 0.18em;
  margin: -0.1em -0.04em -0.18em;
}

.js .split .wi {
  display: inline-block;
  transform: translate3d(0, 108%, 0);
  transition: transform 820ms var(--ease-out);
  transition-delay: calc(var(--d, 0ms) + var(--wi, 0) * 60ms);
}

.js .split.is-visible .wi {
  transform: none;
}

.section-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 4.1rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin-top: 18px;
}

.section-sub {
  margin-top: 20px;
  max-width: 56ch;
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  color: var(--muted);
}

.section-head {
  max-width: var(--max);
  margin: 0 auto;
  text-align: center;
}

.section-head .section-sub {
  margin-left: auto;
  margin-right: auto;
}

.section-head--left {
  text-align: left;
}

.section-head--left .section-sub {
  margin-left: 0;
}

.footnote {
  font-size: 0.86rem;
  color: var(--muted);
  max-width: 70ch;
}

/* ---------- buttons ---------- */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.btn {
  --glass-blur: var(--glass-blur-sm);
  --glass-tint: rgba(191, 227, 255, 0.1);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 24px;
  border-radius: 999px;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  transition: transform 200ms var(--ease-out), background-color 220ms ease, box-shadow 220ms ease;
}

.btn .material-symbols-outlined {
  font-size: 22px;
}

.btn:focus-visible {
  --glass-tint: rgba(191, 227, 255, 0.17);
  transform: translateY(-2px);
}

@media (hover: hover) {
  .btn:hover {
    --glass-tint: rgba(191, 227, 255, 0.17);
    transform: translateY(-2px);
  }
}

.btn:active {
  --glass-tint: rgba(191, 227, 255, 0.17);
  transform: translateY(-1px) scale(0.985);
}

/* the primary stays amber, but as tinted glass: the field still shows
   through and the rim/specular layers ride on top */
.btn--primary {
  --glass-tint: rgba(255, 154, 60, 0.9);
  --glass-rim: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 226, 186, 0.5) 22%,
    rgba(255, 255, 255, 0.08) 46%,
    rgba(255, 154, 60, 0.35) 66%,
    rgba(60, 22, 2, 0.55) 100%
  );
  color: var(--amber-ink);
  box-shadow: var(--glass-inset), 0 14px 34px -14px rgba(255, 154, 60, 0.7);
}

.btn--primary:focus-visible,
.btn--primary:active {
  --glass-tint: rgba(255, 175, 92, 0.94);
  box-shadow: var(--glass-inset), 0 20px 42px -14px rgba(255, 154, 60, 0.9);
}

@media (hover: hover) {
  .btn--primary:hover {
    --glass-tint: rgba(255, 175, 92, 0.94);
    box-shadow: var(--glass-inset), 0 20px 42px -14px rgba(255, 154, 60, 0.9);
  }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--header-h) + 40px) var(--pad) 120px;
  /* no overflow clip: the planet body and the tether may run on below the hero */
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}

.hero-copy {
  min-width: 0;
}

.hero-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.5rem, 5.6vw, 5.2rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-top: 22px;
  max-width: 13ch;
}

.hero-title .accent {
  color: var(--amber);
}

.hero-sub {
  margin-top: 28px;
  max-width: 52ch;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--muted);
}

.hero .cta-row {
  margin-top: 36px;
}

.hero-note {
  margin-top: 18px;
  font-size: 0.86rem;
  color: var(--muted);
  max-width: 60ch;
}

/* ---------- astronaut in the hero ---------- */
.hero-figure {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}

/* JS writes the departure transform here, so the reveal transform stays untouched */
.astronaut-drift {
  width: min(100%, 460px);
  will-change: transform;
}

.astronaut-float {
  will-change: transform;
  transform-origin: 50% 55%;
  animation: astronaut-float 9s ease-in-out infinite;
}

.astronaut {
  width: 100%;
  height: auto;
  overflow: visible;
}

.astronaut__beacon,
.astronaut__beacon-glow {
  animation: beacon 2.2s ease-in-out infinite;
}

.astronaut__scan {
  animation: visor-scan 4.5s linear infinite;
}

.astronaut__visor-shot {
  opacity: 0;
  transition: opacity 600ms ease;
}

.astronaut.has-shot .astronaut__visor-shot {
  opacity: 1;
}

.astronaut.has-shot .astronaut__visor-fallback {
  display: none;
}

@keyframes astronaut-float {
  0% {
    transform: translate3d(0, 0, 0) rotate(-3deg);
  }
  50% {
    transform: translate3d(0, -18px, 0) rotate(2.5deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(-3deg);
  }
}

@keyframes beacon {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

@keyframes visor-scan {
  0% {
    transform: translateY(-14px);
  }
  100% {
    transform: translateY(90px);
  }
}

.scroll-hint {
  position: absolute;
  left: var(--pad);
  bottom: 34px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.scroll-hint .material-symbols-outlined {
  font-size: 20px;
  transform: rotate(90deg);
  color: var(--amber);
  animation: hint-bob 1.8s ease-in-out infinite;
}

@keyframes hint-bob {
  0%,
  100% {
    transform: rotate(90deg) translateX(0);
  }
  50% {
    transform: rotate(90deg) translateX(6px);
  }
}

/* planet horizon at the bottom of the hero.
   The starfield stands still, so the planet must not scroll up with the page: js/main.js keeps
   .horizon-clip pinned to the screen and lets .horizon shrink, sink and fade while the hero scrolls out.
   Scaling about the limb apex increases the curvature, which reads as the planet receding below. */
.horizon-clip {
  --horizon-run: clamp(260px, 42vh, 460px);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: calc(-1 * var(--horizon-run));
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.horizon {
  --horizon-size: 240vw;
  --horizon-show: clamp(90px, 16vh, 200px);
  position: absolute;
  left: 50%;
  bottom: calc(var(--horizon-show) - var(--horizon-size) + var(--horizon-run));
  width: var(--horizon-size);
  height: var(--horizon-size);
  margin-left: calc(var(--horizon-size) / -2);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0%, #0f1c3a 0%, #0a1226 18%, #060b18 42%, var(--bg) 70%);
  box-shadow:
    0 -2px 0 0 rgba(255, 154, 60, 0.85),
    0 -22px 70px rgba(255, 140, 60, 0.32),
    0 -60px 160px rgba(124, 196, 255, 0.12),
    0 -140px 320px rgba(124, 196, 255, 0.07),
    inset 0 30px 90px -20px rgba(124, 196, 255, 0.12);
  z-index: 1;
  pointer-events: none;
  transform-origin: 50% 0;
  will-change: transform;
}

/* atmosphere: a soft backlit band hovering over the limb, flaring once at ignition */
.horizon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 42%;
  height: 7%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 50% 60%,
    rgba(255, 154, 60, 0.28) 0%,
    rgba(255, 154, 60, 0.12) 22%,
    rgba(124, 196, 255, 0.1) 48%,
    rgba(124, 196, 255, 0) 72%
  );
  opacity: 0.85;
  will-change: opacity, transform;
}

.js .hero.is-live .horizon::before {
  animation: horizon-ignite 1500ms var(--ease-out) both;
}

@keyframes horizon-ignite {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3, 1.45);
  }
  to {
    opacity: 0.85;
    transform: translate(-50%, -50%);
  }
}

/* hero entrance choreography (after countdown) */
.js .hero .reveal-hero {
  opacity: 0;
  transform: translateY(22px);
}

.js .hero.is-live .reveal-hero {
  opacity: 1;
  transform: none;
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}

.js .hero.is-live .reveal-hero:nth-child(2) {
  transition-delay: 90ms;
}

.js .hero.is-live .reveal-hero:nth-child(3) {
  transition-delay: 200ms;
}

.js .hero.is-live .reveal-hero:nth-child(4) {
  transition-delay: 300ms;
}

.js .hero.is-live .reveal-hero:nth-child(5) {
  transition-delay: 380ms;
}

/* the figure is the second child of .hero-inner, so it needs its own delay */
.js .hero.is-live .hero-figure.reveal-hero {
  transition-delay: 260ms;
}

.js .hero.is-live .scroll-hint {
  transition-delay: 700ms;
}

/* ---------- generic reveal ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 760ms var(--ease-out), transform 760ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- mission section ---------- */
.mission {
  position: relative;
  z-index: 1; /* above the planet body running on from the hero */
  padding: clamp(60px, 10vh, 120px) var(--pad) 0;
}

.mission .section-head {
  max-width: 1320px;
}

.mission-grid {
  position: relative;
  display: grid;
  grid-template-columns: var(--rocket-col) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 48px);
  max-width: 1320px;
  margin: 40px auto 0;
}

.rocket-track {
  position: relative;
}

.rocket-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
}

.rocket-fx {
  position: absolute;
  top: 0;
  left: -40px;
  width: calc(100% + 80px);
  height: 100%;
  pointer-events: none;
}

.track {
  position: absolute;
  left: 50%;
  top: calc(var(--header-h) + 40px);
  bottom: 60px;
  width: 2px;
  margin-left: -1px;
  background: repeating-linear-gradient(to bottom, var(--line) 0 6px, transparent 6px 16px);
}

.track-dot {
  position: absolute;
  left: 50%;
  top: calc((5 - var(--i)) / 5 * 100%);
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 2px solid var(--line-strong);
  transition: background-color 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}

.track-dot.is-lit {
  background: var(--amber);
  border-color: var(--amber);
  box-shadow: 0 0 16px rgba(255, 154, 60, 0.75);
}

.rocket-wrap {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--rocket-w);
  margin-left: calc(var(--rocket-w) / -2);
  will-change: transform;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.55));
}

.rocket {
  width: 100%;
  height: auto;
  overflow: visible;
}

.rocket-thrust {
  transform-box: view-box;
  transform-origin: 60px 214px;
  transform: scale(1, 0.8);
}

.rocket-flame {
  transform-box: view-box;
  transform-origin: 60px 214px;
  animation: flame-flicker 170ms ease-in-out infinite alternate;
}

@keyframes flame-flicker {
  from {
    transform: scale(1.04, 0.93);
  }
  to {
    transform: scale(0.95, 1.07);
  }
}

.stages {
  min-width: 0;
}

.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  min-height: 88vh;
  min-height: 88svh;
  padding: 6vh 0;
}

.stage:nth-child(even) .stage-media {
  order: -1;
}

.stage-head {
  display: flex;
  align-items: flex-end;
  gap: 18px;
}

.stage-num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(4.6rem, 10vw, 8.5rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(191, 227, 255, 0.32);
  transition: color 420ms ease, -webkit-text-stroke-color 420ms ease, text-shadow 420ms ease;
}

.stage-icon {
  font-size: 30px;
  color: var(--ice);
  margin-bottom: 0.18em;
  opacity: 0.85;
}

.stage.is-active .stage-num {
  color: var(--amber);
  -webkit-text-stroke-color: transparent;
  text-shadow: 0 0 46px rgba(255, 154, 60, 0.35);
}

.stage-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin-top: 26px;
}

.stage-copy {
  margin-top: 18px;
  max-width: 46ch;
  font-size: clamp(1rem, 1.3vw, 1.14rem);
  color: var(--muted);
}

.stage-note {
  margin-top: 14px;
  font-size: 0.84rem;
  color: var(--muted);
  padding-left: 14px;
  border-left: 2px solid var(--amber);
  max-width: 46ch;
}

.stage-media {
  display: flex;
  justify-content: center;
  min-width: 0;
}

/* ---------- device frames ---------- */
.device {
  position: relative;
  width: 100%;
}

.device .screen {
  position: relative;
  overflow: hidden;
  background: #02040a;
}

/* without a screenshot the screen is a pane of glass in the bezel, so the
   starfield runs on behind it; with one it stays an opaque display */
.device.is-missing .screen {
  background: transparent;
}

.device img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.device--tv {
  max-width: 600px;
}

.device--tv .screen {
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  border: 6px solid #1b2236;
  box-shadow:
    0 0 0 1px rgba(191, 227, 255, 0.1),
    0 40px 90px -40px rgba(0, 0, 0, 0.9),
    0 0 80px -30px rgba(124, 196, 255, 0.25);
}

.device--tv::after {
  content: "";
  display: block;
  width: 34%;
  height: 12px;
  margin: 0 auto;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(#1b2236, #0d1220);
}

.device--phone {
  width: min(250px, 78%);
  margin: 0 auto;
}

.device--phone .screen {
  aspect-ratio: 1080 / 2340;
  border-radius: 36px;
  border: 7px solid #1b2236;
  box-shadow:
    0 0 0 1px rgba(191, 227, 255, 0.12),
    0 40px 90px -40px rgba(0, 0, 0, 0.9),
    0 0 80px -30px rgba(255, 154, 60, 0.18);
}

.device--phone .screen::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 50%;
  width: 34%;
  height: 20px;
  transform: translateX(-50%);
  border-radius: 12px;
  background: #1b2236;
}

/* placeholder while the screenshot file is missing */
.shot-fallback {
  /* darker tint than the other slabs: small type on a busy backdrop */
  --glass-tint: rgba(9, 17, 38, 0.52);
  --glass-blur: var(--glass-blur-md);
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  text-align: center;
  contain: paint;
  /* grid and engine glow ride on top of the tint; the opaque base layer is
     gone so the blurred starfield shows through */
  background-image:
    linear-gradient(rgba(191, 227, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191, 227, 255, 0.06) 1px, transparent 1px),
    radial-gradient(70% 55% at 50% 105%, rgba(255, 154, 60, 0.22), transparent 70%);
  background-size: 24px 24px, 24px 24px, auto;
  background-position: 0 0;
}

/* inner radius of the bezel = screen radius minus border width, so the
   glass rim is not clipped by the frame */
.device--tv .shot-fallback {
  border-radius: 8px;
}

.device--phone .shot-fallback {
  border-radius: 29px;
}

.shot-fallback .material-symbols-outlined {
  font-size: 44px;
  color: var(--ice);
  opacity: 0.9;
}

.shot-label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
}

.shot-res {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.shot-pending {
  margin-top: 6px;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
}

.device.is-missing img {
  display: none;
}

.device.is-missing .shot-fallback {
  display: flex;
}

.device--phone .shot-fallback .material-symbols-outlined {
  font-size: 38px;
}

.device--phone .shot-label {
  font-size: 0.88rem;
}

/* ---------- engine strip ---------- */
.engine {
  padding: clamp(80px, 14vh, 160px) var(--pad);
}

.engine-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}

.chips {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* six chips can share the viewport, so they stay on the small blur */
.chip {
  --glass-blur: var(--glass-blur-sm);
  --glass-lift: 0 14px 30px -26px rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  contain: paint;
}

.chip .material-symbols-outlined {
  color: var(--amber);
}

.chip p {
  font-size: 0.94rem;
  font-weight: 500;
}

/* ---------- pricing ---------- */
.pricing {
  padding: clamp(80px, 14vh, 160px) var(--pad);
}

.plans {
  max-width: 980px;
  margin: 56px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.plan {
  position: relative;
  padding: 34px 34px 38px;
  border-radius: var(--radius);
  contain: paint;
}

/* the two cards drift in from opposite sides (js/scenes.js, data-scene="dock"); docked, Pro
   lights up and a ring pulses once between them */
.plans {
  position: relative;
}

.dock-pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: 2px solid rgba(255, 196, 130, 0.9);
  box-shadow: 0 0 24px rgba(255, 154, 60, 0.6);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transform: scale(0.3);
}

.js .plans.is-docked .dock-pulse {
  animation: dock-pulse 760ms var(--ease-out) both;
}

@keyframes dock-pulse {
  0% {
    opacity: 0.9;
    transform: scale(0.3);
  }
  100% {
    opacity: 0;
    transform: scale(5);
  }
}

.plan--pro {
  transition: box-shadow 700ms ease;
}

.plans.is-docked .plan--pro {
  box-shadow:
    var(--glass-inset),
    0 0 0 1px rgba(255, 154, 60, 0.32),
    0 0 46px -6px rgba(255, 154, 60, 0.45),
    0 50px 120px -70px rgba(255, 154, 60, 0.8);
}

.plan--pro {
  --glass-tint: var(--glass-tint-amber);
  --glass-rim: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 205, 150, 0.6) 20%,
    rgba(255, 154, 60, 0.16) 45%,
    rgba(255, 154, 60, 0.4) 66%,
    rgba(42, 16, 2, 0.6) 100%
  );
  box-shadow:
    var(--glass-inset),
    0 0 0 1px rgba(255, 154, 60, 0.15),
    0 50px 120px -70px rgba(255, 154, 60, 0.6);
}

.plan--pro::after {
  background:
    radial-gradient(130% 80% at 24% -18%, rgba(255, 236, 214, 0.22), rgba(255, 200, 150, 0.07) 34%, transparent 62%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.1), transparent 24%);
}

.plan-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.plan--pro .plan-name {
  color: var(--amber);
}

.plan-price {
  margin-top: 14px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.plan-amount {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  letter-spacing: -0.03em;
  line-height: 1;
}

.plan-period {
  color: var(--muted);
  font-size: 0.95rem;
}

.plan-list {
  margin-top: 26px;
  display: grid;
  gap: 12px;
}

.plan-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.96rem;
}

.plan-list .material-symbols-outlined {
  font-size: 20px;
  color: var(--ice);
  margin-top: 2px;
}

.plan--pro .plan-list .material-symbols-outlined {
  color: var(--amber);
}

.table-wrap {
  max-width: 980px;
  margin: 40px auto 0;
  border-radius: var(--radius);
  overflow: hidden;
}

.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.compare th,
.compare td {
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  text-align: left;
}

.compare thead th {
  border-top: 0;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(191, 227, 255, 0.04);
}

.compare thead th.is-pro {
  color: var(--amber);
}

.compare th[scope="row"] {
  font-weight: 500;
  color: var(--ink);
}

.compare td {
  width: 22%;
  color: var(--muted);
}

.compare td .material-symbols-outlined {
  font-size: 20px;
  vertical-align: -5px;
}

.compare td.is-yes .material-symbols-outlined {
  color: var(--ice);
}

.compare td:last-child.is-yes .material-symbols-outlined {
  color: var(--amber);
}

.compare td.is-no .material-symbols-outlined {
  color: rgba(166, 177, 204, 0.45);
}

.compare td .cell-text {
  margin-left: 6px;
  color: var(--ink);
}

.compare td.is-no .cell-text {
  color: var(--muted);
}

@media (hover: hover) {
  .compare tbody tr:hover {
    background: rgba(191, 227, 255, 0.04);
  }
}

/* the rows unfold one after another once the table slab is on screen (--i from js/scenes.js) */
.js .table-wrap.reveal tbody tr {
  opacity: 0;
  transform: translate3d(-14px, 0, 0);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
  transition-delay: calc(140ms + var(--i, 0) * 45ms);
}

.js .table-wrap.reveal.is-visible tbody tr {
  opacity: 1;
  transform: none;
}

.pricing .footnote {
  margin: 18px auto 0;
  text-align: center;
}

/* ---------- platforms ---------- */
.platforms {
  padding: clamp(80px, 14vh, 160px) var(--pad);
}

/* constellation: the SVG sits under the cards and connects their centres; --len is the path
   length and --draw (0..1) the drawn share, both written by js/scenes.js (scrubbed by scroll) */
.constellation {
  --len: 4000;
  --draw: 0;
  position: relative;
  max-width: var(--max);
  margin: 48px auto 0;
}

.constellation-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.constellation-line,
.constellation-glow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len);
  stroke-dashoffset: calc(var(--len) * (1 - var(--draw)));
}

.constellation-line {
  stroke: var(--ice);
  stroke-width: 1.5;
  opacity: 0.85;
}

.constellation-glow {
  stroke: var(--ice-2);
  stroke-width: 7;
  opacity: 0.22;
}

.platform-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.platform {
  padding: 26px 24px 28px;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 14px;
  contain: paint;
}

.platform:nth-child(2) {
  --d: 90ms;
}

.platform:nth-child(3) {
  --d: 180ms;
}

.platform:nth-child(4) {
  --d: 270ms;
}

.platform .material-symbols-outlined {
  font-size: 34px;
  color: var(--amber);
}

.platform h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.platform p {
  margin-top: 6px;
  font-size: 0.92rem;
  color: var(--muted);
}

.platforms .footnote {
  margin: 22px auto 0;
  text-align: center;
}

.platforms .footnote + .footnote {
  margin-top: 8px;
}

/* ---------- launch (final CTA) ---------- */
.launch {
  padding: clamp(80px, 16vh, 180px) var(--pad);
  position: relative;
}

/* light cone behind the final CTA, scaled open by js/scenes.js while the section enters */
.launch-cone {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(900px, 120vw);
  height: 70%;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  background: radial-gradient(closest-side, rgba(255, 154, 60, 0.2), rgba(255, 154, 60, 0.06) 55%, transparent);
  pointer-events: none;
}

/* liftoff: at the end of the page the primary button pulses once */
.is-liftoff .launch .btn--primary {
  animation: liftoff-pulse 900ms var(--ease-out) both;
}

@keyframes liftoff-pulse {
  0% {
    box-shadow: var(--glass-inset), 0 0 0 0 rgba(255, 154, 60, 0.75), 0 14px 34px -14px rgba(255, 154, 60, 0.7);
  }
  100% {
    box-shadow: var(--glass-inset), 0 0 0 26px rgba(255, 154, 60, 0), 0 14px 34px -14px rgba(255, 154, 60, 0.7);
  }
}

.launch-inner {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.launch .section-title {
  font-size: clamp(2.8rem, 7vw, 6rem);
}

.launch .cta-row {
  margin-top: 36px;
  justify-content: center;
}

/* ---------- footer ---------- */
.site-footer {
  --glass-blur: var(--glass-blur-sm);
  --glass-tint: rgba(7, 13, 30, 0.46);
  position: relative;
  z-index: 1;
  padding: 40px var(--pad) 48px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 24px 40px -34px rgba(255, 255, 255, 0.2);
}

.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  gap: 14px;
  font-size: 0.84rem;
  color: var(--muted);
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  margin-bottom: 4px;
}

.footer-brand .logo-mark {
  width: 28px;
  height: 28px;
}

.footer-brand .logo-text {
  font-size: 1.05rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.footer-links a {
  color: var(--ink);
  font-weight: 500;
  padding: 4px 0;
}

.footer-links a:active {
  color: var(--amber);
}

@media (hover: hover) {
  .footer-links a:hover {
    color: var(--amber);
  }
}

.footer-tmdb {
  font-size: 0.78rem;
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1100px) {
  :root {
    --rocket-col: 124px;
    --rocket-w: 84px;
  }
}

@media (max-width: 900px) {
  :root {
    --rocket-col: 72px;
    --rocket-w: 52px;
  }

  .mission-progress {
    --bar-len: 100vw;
    right: 0;
    left: 0;
    top: 0;
    width: auto;
    height: 3px;
    transform: none;
    border-radius: 0;
  }

  .mission-progress__fill {
    transform-origin: left center;
    transform: scaleX(var(--p, 0));
  }

  .mission-progress::after {
    left: 0;
    top: 50%;
    margin: -4.5px 0 0 -4.5px;
    transform: translate3d(calc(var(--p, 0) * var(--bar-len)), 0, 0);
  }

  .mark {
    left: calc(var(--m, 0) * 100%);
    top: 50%;
  }

  .mark span {
    display: none;
  }

  .stage {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding: 9vh 0;
    gap: 34px;
  }

  .stage:nth-child(even) .stage-media {
    order: 0;
  }

  .engine-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .engine-media {
    order: -1;
  }

  .platform-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rocket-fx {
    left: -20px;
    width: calc(100% + 40px);
  }

  .track {
    top: calc(var(--header-h) + 24px);
    bottom: 40px;
  }

  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .hero-figure {
    order: -1;
    justify-content: flex-start;
  }

  .astronaut-drift {
    width: min(54vw, 260px);
  }
}

@media (max-width: 720px) {
  /* phones carry the blur over an animated canvas: every radius drops */
  :root {
    --glass-blur-lg: 16px;
    --glass-blur-md: 13px;
    --glass-blur-sm: 10px;
  }

  .site-nav {
    display: none;
  }

  /* the open nav is part of the header slab, not a pane below it: a
     second backdrop-filter inside a filtered parent sees an empty
     backdrop root and renders grey. So the slab grows instead. */
  .site-header.is-open {
    height: auto;
    --glass-tint: rgba(7, 13, 30, 0.72);
  }

  /* the nav wraps onto a second flex line instead of floating out of the
     header box, so the slab grows with it */
  .site-header.is-open .header-inner {
    height: auto;
    flex-wrap: wrap;
    row-gap: 0;
  }

  .site-header.is-open .logo {
    min-height: var(--header-h);
  }

  .site-header.is-open .site-nav {
    order: 3;
    /* full bleed: the basis grows by the inner padding it is pulled out by */
    flex: 0 0 calc(100% + var(--pad) * 2);
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 calc(-1 * var(--pad));
    padding: 8px var(--pad) 16px;
    border-top: 1px solid rgba(191, 227, 255, 0.12);
  }

  .site-header.is-open .site-nav a {
    padding: 12px 0;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .header-inner {
    gap: 12px;
  }

  .plans {
    grid-template-columns: minmax(0, 1fr);
  }

  .plan {
    padding: 28px 24px 30px;
  }

  .chips {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero {
    padding-bottom: 110px;
  }

  .hero-title {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .compare thead {
    display: none;
  }

  .compare,
  .compare tbody,
  .compare tr,
  .compare th,
  .compare td {
    display: block;
  }

  .compare tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    padding: 12px 16px 14px;
  }

  .compare tr:first-child {
    border-top: 0;
  }

  .compare th[scope="row"] {
    grid-column: 1 / -1;
    border-top: 0;
    padding: 0 0 6px;
    font-weight: 600;
  }

  .compare td {
    width: auto;
    border-top: 0;
    padding: 0;
  }

  .compare td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-head);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 2px;
  }

  .compare td:last-child::before {
    color: var(--amber);
  }
}

@media (max-width: 560px) {
  :root {
    --rocket-col: 52px;
    --rocket-w: 40px;
  }

  .astronaut-drift {
    width: min(50vw, 200px);
  }

  .mission-grid {
    gap: 12px;
  }

  .stage-head {
    gap: 12px;
  }

  .stage-icon {
    font-size: 26px;
  }

  .device--phone {
    width: min(220px, 82%);
  }
}

@media (max-width: 420px) {
  .platform-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .lang .material-symbols-outlined {
    display: none;
  }
}

/* =====================================================================
   Reduced motion: static presentation
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js .countdown {
    display: none;
  }

  .js .hero .reveal-hero,
  .js .reveal,
  .js .split .wi,
  .js .table-wrap.reveal tbody tr {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .kicker.reveal::before {
    transform: none;
    transition: none;
  }

  /* scrubbed scenes: js/scenes.js clears its inline styles, this covers the load-time case */
  [data-scene] > *,
  .hero-copy,
  .astronaut-drift,
  .launch-cone {
    transform: none !important;
    opacity: 1 !important;
  }

  .dock-pulse {
    display: none;
  }

  .constellation {
    --draw: 1 !important;
  }

  .plan--pro,
  .mark,
  .mark span {
    transition: none;
  }

  .is-liftoff .launch .btn--primary {
    animation: none;
  }

  .rocket-flame,
  .scroll-hint .material-symbols-outlined,
  .astronaut-float,
  .astronaut__beacon,
  .astronaut__beacon-glow,
  .js .hero.is-live .horizon::before {
    animation: none;
  }

  .countdown,
  .countdown-inner {
    transition: none;
  }

  .astronaut__scan {
    display: none;
  }

  .rocket-thrust {
    transform: scale(1, 0.7);
  }

  .track-dot,
  .stage-num,
  .btn,
  .glass,
  .glass--inner,
  .glass::after,
  .site-nav a::after {
    transition: none;
  }

  .glass--i:active {
    transform: none;
  }
}

/* =====================================================================
   Glass fallbacks
   Both paths drop the filter and pay for it with an opaque tint, so the
   text keeps its contrast. They sit at the end of the file on purpose:
   the component rules above only ever set --glass-tint, so a plain
   background-color here wins on source order.
   ===================================================================== */
@supports not ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
  .glass {
    background-color: var(--glass-opaque);
  }

  .site-header {
    background-color: rgba(5, 9, 20, 0.82);
  }

  .site-header.is-scrolled {
    background-color: rgba(5, 9, 20, 0.96);
  }

  .btn--primary {
    background-color: var(--amber);
  }

  .plan--pro {
    background-color: rgba(46, 26, 8, 0.88);
  }

  .shot-fallback {
    background-color: #0b1428;
  }

  .site-footer {
    background-color: rgba(5, 9, 20, 0.9);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glass {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: var(--glass-opaque);
  }

  .glass::after {
    opacity: 0.4;
  }

  .site-header {
    background-color: rgba(5, 9, 20, 0.88);
  }

  .site-header.is-scrolled {
    background-color: rgba(5, 9, 20, 0.97);
  }

  .btn--primary {
    background-color: var(--amber);
  }

  .plan--pro {
    background-color: rgba(46, 26, 8, 0.9);
  }

  .shot-fallback {
    background-color: #0b1428;
  }

  .site-footer {
    background-color: rgba(5, 9, 20, 0.92);
  }
}