/* Wildfire Games — hand-authored static site. One stylesheet, no build step. */

/* ---------- fonts (self-hosted, no external requests) ---------- */
@font-face {
  font-family: 'Unbounded';
  src: url('/fonts/unbounded-latin.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('/fonts/outfit-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Luckiest Guy';
  src: url('/fonts/luckiest-guy-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --bg: #140D0A;
  --bg-raised: #1F1512;
  --ember: #FF6B35;
  --ember-deep: #C93E0F;
  --flame-hot: #FFC24B;
  --text: #F2E9E4;
  --text-dim: #A8968D;

  --edge: 1px solid rgb(255 107 53 / 0.15);
  --radius: 12px;
  --display: 'Unbounded', system-ui, sans-serif;
  --body: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1120px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
}

/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 1.06rem;
  line-height: 1.65;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: var(--ember); text-decoration: none; }
a:hover { color: var(--flame-hot); }
:focus-visible {
  outline: 2px solid var(--flame-hot);
  outline-offset: 3px;
  border-radius: 4px;
}
h1, h2, h3 { font-family: var(--display); line-height: 1.1; margin: 0 0 0.6em; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800; }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 600; }
p { margin: 0 0 1.1em; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- site chrome ---------- */
:root { --nav-h: 60px; }
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(20 13 10 / 0.82);
  backdrop-filter: blur(10px);
  border-bottom: var(--edge);
}
.site-nav .wrap {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 60px;
  flex-wrap: wrap;
}
.wordmark {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.94rem;
  color: var(--text);
  line-height: 1.2;
}
.wordmark:hover { color: var(--flame-hot); }
.site-nav ul {
  list-style: none;
  display: flex;
  gap: clamp(0.9rem, 3vw, 1.75rem);
  margin: 0 0 0 auto;
  padding: 0;
  font-size: 0.95rem;
}
.site-nav a:not(.wordmark) { color: var(--text-dim); }
.site-nav a:not(.wordmark):hover,
.site-nav a[aria-current='page'] { color: var(--text); }
@media (max-width: 540px) {
  :root { --nav-h: 87px; } /* the nav wraps to two rows down here */
  .site-nav .wrap { justify-content: center; min-height: 0; padding-top: 0.6rem; }
  .site-nav ul { margin: 0 auto; width: 100%; justify-content: center; padding-bottom: 0.6rem; }
}

.site-footer {
  border-top: var(--edge);
  background: var(--bg-raised);
  padding: 3rem 0 2.5rem;
  color: var(--text-dim);
  font-size: 0.95rem;
  text-align: center;
}
.site-footer p { margin: 0.3rem 0; }
.site-footer .footer-links {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}

/* ---------- buttons + badges ---------- */
.btn {
  display: inline-block;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--ember-deep), var(--ember));
  color: #fff;
  border: 1px solid rgb(255 194 75 / 0.35);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.btn:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -12px var(--ember);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: var(--edge);
}
.btn-ghost:hover { color: var(--flame-hot); border-color: rgb(255 107 53 / 0.5); }

.store-badges { display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: center; }
.store-badges img { height: 46px; width: auto; }
.store-badges a { display: block; transition: transform 200ms ease, filter 200ms ease; border-radius: 8px; }
.store-badges a:hover { transform: translateY(-2px); filter: brightness(1.1); }

/* ---------- hero (home) ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  padding: 5rem 0 4rem;
}
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* layered ember glow rising from the bottom */
.hero::before {
  background:
    radial-gradient(120% 70% at 50% 118%, rgb(201 62 15 / 0.85) 0%, rgb(201 62 15 / 0.28) 38%, transparent 68%),
    radial-gradient(70% 46% at 22% 112%, rgb(255 107 53 / 0.45) 0%, transparent 62%),
    radial-gradient(70% 46% at 80% 112%, rgb(255 194 75 / 0.28) 0%, transparent 60%);
}
.hero::after {
  background: radial-gradient(90% 40% at 50% 130%, rgb(255 194 75 / 0.5) 0%, transparent 55%);
  mix-blend-mode: screen;
  opacity: 0.7;
}
.hero-inner { position: relative; z-index: 2; }
.hero h1 {
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 0.35em;
  background: linear-gradient(165deg, var(--flame-hot) 8%, var(--ember) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .tagline {
  font-size: clamp(1.1rem, 2.4vw, 1.45rem);
  font-weight: 500;
  margin-bottom: 0.4em;
}
.hero .supporting {
  color: var(--text-dim);
  max-width: 46ch;
  margin-inline: auto;
}
.scroll-cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  translate: -50% 0;
  z-index: 2;
  color: var(--text-dim);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.scroll-cue::after {
  content: '';
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--ember), transparent);
  animation: cue 2.4s ease-in-out infinite;
}
@keyframes cue { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* ember particles */
.embers { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.embers i {
  position: absolute;
  bottom: -12px;
  left: var(--x);
  width: var(--s, 3px);
  height: var(--s, 3px);
  border-radius: 50%;
  background: var(--flame-hot);
  box-shadow: 0 0 10px 3px rgb(255 107 53 / 0.85);
  opacity: 0;
  animation: rise var(--t) linear var(--d) infinite;
}
@keyframes rise {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0; }
  12%  { opacity: 0.9; }
  70%  { opacity: 0.7; }
  100% { transform: translate3d(var(--dx, 20px), -78vh, 0) scale(0.35); opacity: 0; }
}

/* ---------- sections + game cards (home) ---------- */
.section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section-head { max-width: 60ch; margin-bottom: 2.5rem; }
.section-head p { color: var(--text-dim); margin: 0; }
.eyebrow {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 0.9rem;
  display: block;
}

.game-grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.game-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-raised);
  border: var(--edge);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.game-card:hover,
.game-card:focus-within {
  transform: translateY(-4px);
  border-color: rgb(255 107 53 / 0.5);
  box-shadow: 0 18px 46px -22px var(--ember);
}
.game-card__art {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0b0f1a;
}
.game-card__art img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.game-card__art.is-pixel {
  display: grid;
  place-items: center;
  background:
    radial-gradient(70% 90% at 50% 50%, #1b2440 0%, #080b16 70%),
    #080b16;
}
.game-card__art.is-pixel img {
  width: auto;
  height: 52%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 24px rgb(90 160 255 / 0.45));
}
.game-card__body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.9rem; flex: 1; }
.game-card__body h3 { margin: 0; }
.game-card__body p { color: var(--text-dim); margin: 0; flex: 1; }
.game-card__foot { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.pill {
  display: inline-block;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--flame-hot);
  border: 1px solid rgb(255 194 75 / 0.3);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
}

/* ---------- prose pages (contact, privacy, 404) ---------- */
.page-head {
  padding: clamp(3rem, 8vw, 5.5rem) 0 1rem;
  border-bottom: var(--edge);
  background:
    radial-gradient(80% 100% at 50% 0%, rgb(201 62 15 / 0.22) 0%, transparent 70%);
}
.page-head h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 0.3em;
}
.page-head p { color: var(--text-dim); max-width: 62ch; margin: 0 0 2rem; }
.prose { max-width: 72ch; padding: clamp(2.5rem, 6vw, 4rem) 0 4rem; }
.prose h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-top: 2.4em; }
.prose h2:first-of-type { margin-top: 0; }
.prose h3 { margin-top: 1.8em; font-size: 1.1rem; }
.prose ul { padding-left: 1.2rem; color: var(--text-dim); }
.prose li { margin-bottom: 0.5rem; }
.prose .meta { color: var(--text-dim); font-size: 0.9rem; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

.centred { min-height: 66svh; display: grid; place-items: center; text-align: center; }

/* ---------- shared: scroll-snap screenshot gallery ---------- */
.shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.shot {
  padding: 0;
  border: 3px solid rgb(0 0 0 / 0.6);
  border-radius: var(--radius);
  background: #000;
  cursor: zoom-in;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.45);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.shot:nth-child(odd) { transform: rotate(-1.2deg); }
.shot:nth-child(even) { transform: rotate(1.1deg); }
.shot:nth-child(3) { transform: rotate(0.6deg); }
.shot:nth-child(4) { transform: rotate(-0.8deg); }
.shot:hover, .shot:focus-visible {
  transform: rotate(0deg) scale(1.03);
  box-shadow: 0 10px 26px rgb(0 0 0 / 0.6);
  z-index: 1;
  position: relative;
}
.shot img { display: block; width: 100%; border-radius: calc(var(--radius) - 3px); }
@media (max-width: 560px) { .shots { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .shot, .shot:nth-child(n) { transform: none; transition: none; }
}
.shot-viewer {
  border: 3px solid rgb(0 0 0 / 0.6);
  border-radius: var(--radius);
  padding: 0;
  background: #000;
  max-width: min(1100px, 92vw);
}
.shot-viewer::backdrop { background: rgb(0 0 0 / 0.8); }
.shot-viewer img { display: block; width: 100%; }

/* ---------- Overrun hero: the parallax stage, full bleed ---------- */
.px-stage {
  position: relative;
  overflow: hidden;
  /* Full viewport minus the sticky nav, like Orbit Drift's hero. */
  height: calc(100svh - var(--nav-h));
  min-height: 420px;
  background: url('/img/overrun/parallax-0.jpg') center / cover no-repeat;
}
.px-scene {
  /* Square scene: never narrower than the viewport, and tall enough that the
     band still lands inside it on a portrait phone. Every offset below is a
     fraction of this one length, so the composition holds at any size. */
  --scene: max(100vw, 130svh);
  position: absolute;
  left: 50%;
  translate: -50% 0;
  /* Anchored from the BOTTOM: the band ends at ~83% of the scene, which is what
     fixes the survivor's crop and keeps the road under him; how much sky and
     building shows above is then whatever the viewport is tall enough for.
     A short, very wide viewport can't fit the whole composition (a square scene
     as wide as the screen only shows stage-height/scene-width of itself), so
     the second term pulls the band up until it starts at 64% of the scene at
     the latest — trading a little of the survivor's crop for the buildings. */
  bottom: calc(-1 * max(
    var(--scene) * 0.167,
    var(--scene) * 0.64 - (100svh - var(--nav-h))
  ));
  width: var(--scene);
  aspect-ratio: 1 / 1;
}
.px-scene img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}
/* Baseline = the composition Adam approved (what used to be the END of the old
   scroll travel), since at the top of the page the rest state is what everyone
   sees. JS animates transform only, so `top` is safe for the baseline. */
.px-scene img:nth-child(1) { top: -2.1%; }
.px-scene img:nth-child(2) { top: -8.5%; }
.px-scene img:nth-child(3),
.px-scene img:nth-child(5) { top: 2.5%; }
.px-scene img:nth-child(4) { top: -2.5%; }
/* Survivor: the stage's bottom edge crops him at roughly 60% of his height —
   head, shoulder and the arm with the pistol, nothing more. */
.px-scene img:nth-child(6) { top: 8%; }
/* A portrait viewport only shows a narrow slice of the (much wider) square
   scene, so the survivor is nudged in from the left edge to stay in frame —
   the narrower the slice, the bigger the nudge has to be. */
@media (max-width: 820px) { .px-scene img:nth-child(6) { left: 12%; } }
@media (max-width: 540px) { .px-scene img:nth-child(6) { left: 16%; } }

/* hero overlay: logo up top, cue at the foot */
.px-hero-title {
  position: absolute;
  top: clamp(1.5rem, 6svh, 4rem);
  left: 50%;
  translate: -50% 0;
  z-index: 2;
  margin: 0;
  padding: 2.6rem 3rem;
  /* Soft scrim: the logo lands on sky, brickwork or a wall of zombies depending
     on the viewport, and needs to read on all three. Radii stay at 50% so the
     gradient has faded out before the box edge clips it into a visible seam. */
  background: radial-gradient(50% 50% at 50% 50%, rgb(10 5 3 / 0.45) 0%, rgb(10 5 3 / 0.22) 48%, transparent 70%);
  pointer-events: none;
}
.px-hero-title .overrun-logo { width: clamp(240px, 40vw, 800px); max-width: 80vw; margin: 0; }
.px-stage .scroll-cue {
  color: #fff;
  text-shadow: 0 2px 6px rgb(0 0 0 / 0.65);
}
.px-stage .scroll-cue::after { background: linear-gradient(#fff, transparent); }

/* =========================================================
   OVERRUN — the existing page design, re-implemented cleanly
   ========================================================= */
.overrun-border {
  height: 2rem;
  background-image: url('/img/overrun/overrun-border.png');
  background-repeat: repeat-x;
  background-size: auto 2rem;
  position: relative;
  z-index: 3;
}
.overrun-border--top { margin-bottom: -2rem; }
.roadmap > .overrun-border--top { position: absolute; top: 0; left: 0; right: 0; margin: 0; }
.overrun-content {
  background-image: url('/img/overrun/overrun-bg.jpg');
  background-repeat: repeat;
  background-position: center;
  color: #fff;
  text-shadow: 2px 2px 0 rgb(0 0 0 / 0.35);
  padding: 3rem 0 3.5rem;
}
.overrun-content h1,
.overrun-content h2,
.overrun-content h3 {
  font-family: 'Luckiest Guy', var(--display);
  font-weight: 400;
  text-shadow: 4px 4px 0 rgb(0 0 0 / 0.35);
  letter-spacing: 0.01em;
}
.overrun-logo {
  width: min(720px, 100%);
  margin: 0 auto 1.5rem;
  filter: drop-shadow(0 6px 0 rgb(0 0 0 / 0.3));
}
.overrun-tagline {
  text-align: center;
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  max-width: 68ch;
  margin: 0 auto 2.5rem;
}
.overrun-split {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 900px) { .overrun-split { grid-template-columns: 1fr; } }
.overrun-download h2 { text-align: center; font-size: clamp(1.5rem, 3vw, 2rem); }
.overrun-download .store-badges { justify-content: center; margin-bottom: 1.5rem; }

/* roadmap */
.roadmap {
  background-image: url('/img/overrun/pavement.png');
  background-repeat: repeat;
  padding: 3rem 0 0;
  position: relative;
  color: #fff;
  text-shadow: 2px 2px 0 rgb(0 0 0 / 0.35);
}
.roadmap-road {
  background-image: url('/img/overrun/road.png');
  background-repeat: repeat-y;
  background-size: 100% auto;
  padding: 3rem clamp(1rem, 4vw, 3rem);
  position: relative;
}
.roadmap h2 { text-align: center; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.roadmap ol { list-style: none; margin: 0; padding: 0; }
.roadmap-item {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  align-items: start;
}
.roadmap-marker {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  overflow: hidden;
}
.roadmap-marker img { width: 4rem; }
/* The ring is always there; only the green tick checks itself off on scroll.
   Both halves are the same 128px frame, so the tick lands exactly on the ring.
   JS gates .pop-ready, so no-JS and reduced-motion readers always see the ticks. */
.roadmap-tick { position: absolute; top: 0; left: 0; }
.roadmap-tick.pop-ready { scale: 0; }
.roadmap-tick.pop-in { animation: tick-pop 480ms cubic-bezier(0.34, 1.56, 0.5, 1) forwards; }
@keyframes tick-pop {
  0% { scale: 0; }
  70% { scale: 1.18; }
  100% { scale: 1; }
}
.roadmap-marker img.roadmap-car { width: auto; height: 3.5rem; margin: 0.5rem 0; }
.roadmap-marker::after {
  content: '';
  flex: 1;
  width: 0.5rem;
  background: #fff;
  box-shadow: 3px 0 0 rgb(0 0 0 / 0.5);
}
.roadmap-item:last-child .roadmap-marker::after { display: none; }
.roadmap-body { padding: 0.5rem 0 1.5rem; min-width: 0; }
.roadmap-body h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); margin-bottom: 0.4em; }
.roadmap-body ul { padding-left: 1.1rem; margin: 0; }
.roadmap-body li { margin-bottom: 0.25rem; }
.roadmap-outro { text-align: center; font-size: 1.15rem; margin: 0; }

/* =========================================================
   ORBIT DRIFT — deep space, cool blues against the ember accent
   ========================================================= */
.od {
  --od-bg: #060912;
  --od-deep: #0C1226;
  --od-blue: #4FA8FF;
  --od-violet: #9A6BFF;
  background: var(--od-bg);
}
.od .starfield {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 20px 30px, rgb(255 255 255 / 0.9) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 130px 90px, rgb(180 210 255 / 0.75) 50%, transparent 51%),
    radial-gradient(1px 1px at 70px 160px, rgb(255 255 255 / 0.55) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 190px 210px, rgb(255 194 75 / 0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 240px 60px, rgb(255 255 255 / 0.45) 50%, transparent 51%);
  background-size: 280px 260px, 280px 260px, 280px 260px, 280px 260px, 280px 260px;
  opacity: 0.85;
}
.od-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  padding: 5rem 0 4rem;
  background:
    radial-gradient(120% 80% at 50% 108%, rgb(154 107 255 / 0.35) 0%, transparent 62%),
    radial-gradient(90% 60% at 12% -10%, rgb(79 168 255 / 0.28) 0%, transparent 60%),
    var(--od-bg);
}
.od-hero .wrap { position: relative; z-index: 2; }
.od-hero h1 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.5rem, 7vw, 5rem);
  letter-spacing: -0.01em;
  margin-bottom: 0.3em;
  background: linear-gradient(170deg, #CFE6FF 5%, var(--od-blue) 48%, var(--od-violet) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.od-hero .tagline { font-size: clamp(1.1rem, 2.4vw, 1.45rem); font-weight: 500; }
.od-hero .supporting { color: #93A4C4; max-width: 48ch; margin-inline: auto; }
.od-ship {
  width: clamp(84px, 13vw, 150px);
  margin: 0 auto 2rem;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 26px rgb(79 168 255 / 0.65));
  animation: bob 5s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-14px) rotate(1.5deg); }
}
.od-body { position: relative; color: #C9D6EC; }
.od-body .wrap { position: relative; z-index: 2; }
.od-body h2 { color: var(--text); }
.od-drift {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.od-drift img {
  position: absolute;
  image-rendering: pixelated;
  will-change: transform;
  opacity: 0.9;
}
.od-drift .far   { opacity: 0.42; filter: blur(0.5px); }
.od-drift .mid   { opacity: 0.72; }
/* narrow screens have no margins for the drift to live in — drop it back to texture */
@media (max-width: 900px) { .od-drift { opacity: 0.25; } }
.od-section { padding: clamp(4rem, 9vw, 7rem) 0; position: relative; }
.od-section + .od-section { border-top: 1px solid rgb(79 168 255 / 0.12); }
.od-lede { font-size: clamp(1.1rem, 2vw, 1.3rem); max-width: 60ch; }

.od-features {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-top: 2.5rem;
}
.od-feature {
  background: rgb(12 18 38 / 0.75);
  border: 1px solid rgb(79 168 255 / 0.18);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: transform 200ms ease, border-color 200ms ease;
}
.od-feature:hover { transform: translateY(-4px); border-color: rgb(79 168 255 / 0.45); }
.od-feature h3 { color: var(--text); margin-bottom: 0.4em; }
.od-feature p { margin: 0; color: #93A4C4; font-size: 0.98rem; }
.od-feature img {
  width: 44px;
  height: 44px;
  image-rendering: pixelated;
  margin-bottom: 1rem;
  filter: drop-shadow(0 0 12px rgb(79 168 255 / 0.4));
}
.od-cta {
  text-align: center;
  padding-block: clamp(5rem, 11vw, 8.5rem);
  background:
    radial-gradient(100% 120% at 50% 100%, rgb(154 107 255 / 0.3) 0%, transparent 65%);
}
.od-cta .pill { color: var(--od-blue); border-color: rgb(79 168 255 / 0.35); }
/* the whole CTA is one rhythm: nothing hugs anything */
.od-cta .wrap { display: grid; justify-items: center; gap: clamp(1.1rem, 2.6vw, 1.75rem); }
.od-cta h2, .od-cta p { margin: 0; }
.od-cta .od-lede { max-width: 58ch; }
.od-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  margin-top: clamp(0.75rem, 2vw, 1.5rem);
}

/* screenshot collage — reuses .shots/.shot, tiles are placeholders until real shots exist */
.od-shots { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); margin-top: 2.5rem; }
.shot--soon {
  aspect-ratio: 16 / 9;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.5rem;
  padding: 1rem;
  cursor: default;
  text-align: center;
  background:
    radial-gradient(80% 100% at 50% 30%, rgb(27 36 64 / 0.9) 0%, #070B16 72%),
    #070B16;
}
.shot--soon:hover { transform: none; box-shadow: 0 4px 14px rgb(0 0 0 / 0.45); }
.shots .shot--soon img {
  width: auto;
  height: clamp(34px, 5vw, 48px);
  image-rendering: pixelated;
  filter: drop-shadow(0 0 16px rgb(79 168 255 / 0.45));
}
.shot-cap {
  font-family: ui-monospace, 'SFMono-Regular', 'Consolas', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--od-blue);
}
.shot-sub { font-size: 0.86rem; line-height: 1.35; color: #7F8FAE; max-width: 26ch; }

/* roadmap flight path — one vertical rail, list-driven: a milestone is one <li>,
   the line is that <li>'s ::before (above its node) and ::after (below it) */
.flightpath {
  --node: 56px;
  --rail: 28px;            /* rail x = node centre = --node / 2 */
  list-style: none;
  margin: clamp(2rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  max-width: 780px;
}
.fp-step {
  position: relative;
  display: grid;
  grid-template-columns: var(--node) 1fr;
  column-gap: clamp(1rem, 2.5vw, 1.75rem);
  padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.fp-step:last-child { padding-bottom: 0; }
.fp-step::before,
.fp-step::after {
  content: '';
  position: absolute;
  left: calc(var(--rail) - 1px);
  width: 2px;
  /* ahead of the ship: dashed and faded */
  background: repeating-linear-gradient(to bottom, #4A5878 0 6px, transparent 6px 15px);
  opacity: 0.7;
}
.fp-step::before { top: 0; height: var(--rail); }
.fp-step::after { top: var(--rail); bottom: 0; }
.fp-step:first-child::before, .fp-step:last-child::after { display: none; }
/* behind the ship: solid and lit */
.fp-step.is-done::before,
.fp-step.is-done::after,
.fp-step.is-next::before {
  background: var(--od-blue);
  opacity: 0.85;
}
.fp-planet {
  grid-column: 1;
  grid-row: 1;
  width: var(--node);
  height: var(--node);
  object-fit: contain;
  image-rendering: pixelated;
  border-radius: 50%;
  /* the disc hides the rail passing behind the node */
  background: radial-gradient(closest-side, var(--od-bg) 70%, transparent 100%);
  opacity: 0.5;
  filter: grayscale(0.5);
}
.fp-step.is-done .fp-planet,
.fp-step.is-next .fp-planet {
  opacity: 1;
  filter: drop-shadow(0 0 14px rgb(79 168 255 / 0.5));
  box-shadow: 0 0 0 1px rgb(79 168 255 / 0.22), 0 0 26px rgb(79 168 255 / 0.18);
}
.fp-step.is-next .fp-planet {
  box-shadow: 0 0 0 1px rgb(255 194 75 / 0.3), 0 0 28px rgb(255 194 75 / 0.2);
}
.fp-ship {
  position: absolute;
  left: calc(var(--rail) - 20px);
  top: calc(var(--node) + 8px);
  width: 40px;
  height: 40px;
  rotate: 180deg;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 18px rgb(255 194 75 / 0.6));
}
.fp-info {
  grid-column: 2;
  display: grid;
  justify-items: start;
  gap: 0.55rem;
  background: rgb(12 18 38 / 0.6);
  border: 1px solid rgb(79 168 255 / 0.14);
  border-radius: var(--radius);
  padding: clamp(0.9rem, 2vw, 1.2rem) clamp(1rem, 2.4vw, 1.5rem);
}
.fp-step.is-next .fp-info {
  border-color: rgb(255 194 75 / 0.32);
  box-shadow: 0 0 40px -14px rgb(255 194 75 / 0.7);
}
.fp-title { font-size: clamp(1rem, 1.6vw, 1.15rem); margin: 0; }
.fp-desc { margin: 0; font-size: 0.95rem; line-height: 1.5; color: #93A4C4; }
.fp-step:not(.is-done):not(.is-next) .fp-title { color: #A7B6D2; }
.fp-state {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: #6E7FA6;
  border: 1px solid rgb(110 127 166 / 0.4);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
}
.fp-step.is-done .fp-state { color: var(--od-blue); border-color: rgb(79 168 255 / 0.45); }
.fp-step.is-next .fp-state { color: var(--flame-hot); border-color: rgb(255 194 75 / 0.45); }
@media (max-width: 560px) {
  .flightpath { --node: 44px; --rail: 22px; }
  .fp-step { column-gap: 0.85rem; }
  .fp-ship { width: 32px; height: 32px; left: calc(var(--rail) - 16px); }
}

/* ---------- motion opt-out ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .embers { display: none; }
  .od-ship, .scroll-cue::after { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}