/* ---------- Tokens (matched to the game's Constants.swift) ---------- */
:root {
  --bg:          #0d0d18;
  --bg-deep:     #07070f;
  --bg-panel:    #161628;
  --bg-panel-2:  #1c1c30;
  --ink:         #f2f2f5;
  --ink-dim:     #b7b7c6;
  --ink-muted:   #7c7c90;
  --line:        #2a2a42;

  --planet:      #59bf8c;
  --planet-line: #264033;
  --creature-line: #262633;
  --coral:       #f28c8c;
  --periwinkle:  #8cb3f2;
  --golden:      #f2cc73;
  --lavender:    #bf8ce6;
  --mint:        #80d9cc;
  --peach:       #f2a673;
  --pulse:       #f27366;
  --sun:         #ffd94d;
  --phasing:     #8c66d9;

  --radius:      14px;
  --radius-lg:   22px;
  --max:         1100px;

  --font-sans:   "Avenir Next", "AvenirNext-Bold", -apple-system,
                 BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
                 Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
}
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  position: relative;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Cosmos: nebula + parallax stars + meteor shower ---------- */
.cosmos {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(1200px 800px at 50% -10%, #1a1d3c 0%, transparent 60%),
              radial-gradient(900px 700px at 90% 110%, #1d1338 0%, transparent 60%),
              var(--bg);
}

/* Soft nebula blobs */
.nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  will-change: transform;
}
.nebula-a {
  width: 520px; height: 520px;
  top: -120px; left: -100px;
  background: radial-gradient(circle, #4d3a8a 0%, transparent 65%);
  animation: nebula-drift-a 32s ease-in-out infinite alternate;
}
.nebula-b {
  width: 600px; height: 600px;
  bottom: -180px; right: -160px;
  background: radial-gradient(circle, #1f5a6e 0%, transparent 65%);
  animation: nebula-drift-b 38s ease-in-out infinite alternate;
}
@keyframes nebula-drift-a {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(60px, 40px) scale(1.08); }
}
@keyframes nebula-drift-b {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-50px, -30px) scale(1.05); }
}

/* Star layers — three depths. Each layer is a tiled background of dots
   generated by SVG data URIs. JS adds parallax via translateY. */
.stars {
  position: absolute;
  top: -10vh; left: 0;
  width: 100%;
  height: 130vh;
  background-repeat: repeat;
  will-change: transform;
}
.stars-far {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><g fill='%23ffffff'><circle cx='15' cy='30' r='0.6' opacity='0.55'/><circle cx='80' cy='12' r='0.5' opacity='0.45'/><circle cx='150' cy='40' r='0.6' opacity='0.5'/><circle cx='200' cy='90' r='0.5' opacity='0.45'/><circle cx='35' cy='110' r='0.6' opacity='0.55'/><circle cx='110' cy='150' r='0.5' opacity='0.45'/><circle cx='180' cy='180' r='0.6' opacity='0.5'/><circle cx='60' cy='200' r='0.5' opacity='0.4'/></g></svg>");
  opacity: 0.85;
}
.stars-mid {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><g fill='%23ffffff'><circle cx='40' cy='25' r='0.9' opacity='0.7'/><circle cx='160' cy='70' r='1' opacity='0.85'/><circle cx='260' cy='30' r='0.8' opacity='0.65'/><circle cx='90' cy='160' r='0.9' opacity='0.75'/><circle cx='220' cy='200' r='1' opacity='0.85'/><circle cx='300' cy='150' r='0.8' opacity='0.6'/><circle cx='30' cy='260' r='0.9' opacity='0.7'/><circle cx='180' cy='290' r='1' opacity='0.8'/></g></svg>");
  opacity: 0.9;
}
.stars-near {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='460' height='460'><g fill='%23ffffff'><circle cx='60' cy='80' r='1.4' opacity='0.95'/><circle cx='240' cy='50' r='1.2' opacity='0.85'/><circle cx='400' cy='160' r='1.4' opacity='0.9'/><circle cx='80' cy='270' r='1.3' opacity='0.85'/><circle cx='320' cy='340' r='1.4' opacity='0.95'/><circle cx='150' cy='400' r='1.2' opacity='0.8'/></g></svg>");
  opacity: 1;
}

/* Twinkle for the "near" stars only — using a layered keyframe via filter */
.stars-near { animation: twinkle 4.5s ease-in-out infinite; }
.stars-mid  { animation: twinkle 6.5s ease-in-out infinite 1s; }
@keyframes twinkle {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.45); }
}

/* Meteor shower */
.meteor-shower {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.meteor {
  position: absolute;
  top: var(--top, 20%);
  left: -150px;
  width: 140px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #fff, #fff);
  border-radius: 2px;
  opacity: 0;
  transform: rotate(18deg);
  filter: drop-shadow(0 0 6px #c8d4ff);
  animation: meteor-streak var(--duration, 7s) linear infinite;
  animation-delay: var(--delay, 0s);
}
.meteor::after {
  content: "";
  position: absolute;
  right: 0; top: -1.5px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 2px #c8d4ff;
}
@keyframes meteor-streak {
  0%   { transform: translate(0, 0) rotate(18deg);            opacity: 0; }
  3%   { opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translate(120vw, 38vh) rotate(18deg);     opacity: 0; }
}

/* ---------- Header ---------- */
.site-header {
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px 24px;
  padding-right: max(24px, env(safe-area-inset-right));
  padding-left:  max(24px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.brand-mark {
  width: 40px; height: 40px;
  border-radius: 22%;
  background: url('/icon.png') center/cover no-repeat;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.18), 0 2px 8px rgba(0, 0, 0, 0.35);
  flex: 0 0 auto;
}
.brand-mark.small { width: 30px; height: 30px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 1px 4px rgba(0, 0, 0, 0.3); }
.brand-name { font-size: 1.05rem; }
.site-nav { display: flex; gap: 22px; }
.site-nav a {
  color: var(--ink-dim);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}
.site-nav a:hover { color: var(--ink); text-decoration: none; }
.site-nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--planet);
}

/* ---------- Hero ---------- */
.hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: 16px 24px 56px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}
.hero-copy h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.05;
  margin: 0 0 20px;
  letter-spacing: -0.01em;
}
.hero-copy .tagline {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--ink-dim);
  max-width: 52ch;
  margin: 0 0 28px;
}
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.cta {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 12px 20px;
  border-radius: var(--radius);
  font-weight: 700;
  line-height: 1.1;
  transition: transform 120ms ease, background 120ms ease, color 120ms ease, box-shadow 200ms ease;
}
.cta:hover { text-decoration: none; transform: translateY(-1px); }
.cta.primary {
  background: var(--ink);
  color: #0e0e18;
  padding: 10px 22px;
  box-shadow: 0 6px 24px -8px #ffffff66;
}
.cta.primary:hover { box-shadow: 0 10px 30px -8px #ffffff88; }
.cta.primary .cta-sub { font-size: 0.72rem; font-weight: 600; opacity: 0.7; }
.cta.primary .cta-main { font-size: 1.1rem; font-weight: 800; }
.cta.ghost {
  border: 1px solid var(--line);
  color: var(--ink-dim);
  padding: 14px 20px;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.cta.ghost:hover { color: var(--ink); border-color: var(--ink-dim); }
.meta { color: var(--ink-muted); font-size: 0.85rem; margin: 10px 0 0; }

/* Hero visual */
.hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
}
.hero-svg {
  width: 100%;
  max-width: 480px;
  height: auto;
  filter: drop-shadow(0 30px 50px #0009);
}

/* Hero SVG animations */
.planet-group { transform-origin: 240px 240px; animation: planet-spin 7s linear infinite; }
.moon-group   { transform-origin: 240px 240px; animation: moon-orbit 14s linear infinite; }
.orbit-ring   { animation: orbit-pulse 6s ease-in-out infinite; }

@keyframes planet-spin { to { transform: rotate(-360deg); } }
@keyframes moon-orbit  { to { transform: rotate(360deg); } }
@keyframes orbit-pulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.6; }
}

/* Twinkling stars inside the hero */
.tw { animation: tw 3s ease-in-out infinite; }
.tw-1 { animation-duration: 3.2s; animation-delay: 0s; }
.tw-2 { animation-duration: 4.4s; animation-delay: 0.6s; }
.tw-3 { animation-duration: 5.1s; animation-delay: 1.4s; }
@keyframes tw {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}

/* Hero game-loop: 14s cycle, synced with the moon's 14s orbit so the moon is
   at its bottom crossing exactly when the 5th launch arrives there. Four
   creatures launch at 1.5s intervals and land on the rim (y=368 tangent:
   planet center y=240 + planet_r 110 + creature_r 18). The 5th launch hits
   the moon at y=415 (moon's orbit radius 175 below center) and the rim
   clears — a full game loop. */
.launcher-slot { transform: translate(240px, 490px); opacity: 0; }
.launcher-a { animation: launch-land     14s 0s   infinite cubic-bezier(.3,.1,.6,1); }
.launcher-b { animation: launch-land     14s 1.5s infinite cubic-bezier(.3,.1,.6,1); }
.launcher-c { animation: launch-land     14s 3s   infinite cubic-bezier(.3,.1,.6,1); }
.launcher-d { animation: launch-land     14s 4.5s infinite cubic-bezier(.3,.1,.6,1); }
.launcher-e { animation: launch-hit-moon 14s 6s   infinite cubic-bezier(.3,.1,.6,1); }

/* Flight + land (~1.5s): launcher (y=490) → tangent (y=368). A single-frame
   squash at the moment of impact, then the flying creature hands off directly
   to its rim-slot counterpart (which appears at the same instant and position).
   Handoff must be tight — any overlap shows up as two creatures at once. */
@keyframes launch-land {
  0%     { transform: translate(240px, 490px) scale(1, 1);       opacity: 0; }
  1%     { transform: translate(240px, 490px) scale(1, 1);       opacity: 1; }
  10.6%  { transform: translate(240px, 368px) scale(1, 1);       opacity: 1; }
  10.7%  { transform: translate(240px, 368px) scale(1.2, 0.85);  opacity: 1; }
  10.72% { transform: translate(240px, 368px) scale(1, 1);       opacity: 0; }
  100%   { transform: translate(240px, 490px) scale(1, 1);       opacity: 0; }
}

/* Hit-moon (~1s): launcher (y=490) → moon crossing (y=415) at 7.1% so it
   arrives at t=7s (moon's bottom crossing). Then a gradual two-stage
   death-pop (scale 1 → 1.3 → 1.7, opacity 1 → 0) over ~0.8s. */
@keyframes launch-hit-moon {
  0%   { transform: translate(240px, 490px) scale(1);    opacity: 0; }
  1%   { transform: translate(240px, 490px) scale(1);    opacity: 1; }
  7.1% { transform: translate(240px, 415px) scale(1);    opacity: 1; }
  10%  { transform: translate(240px, 415px) scale(1.3);  opacity: 0.7; }
  13%  { transform: translate(240px, 415px) scale(1.7);  opacity: 0; }
  100% { transform: translate(240px, 415px) scale(1);    opacity: 0; }
}

/* Rim creatures: fade in at the moment their launcher-slot lands (10.7/
   21.4/32.1/42.9% = 1.5/3/4.5/6s). After the collision they clear in a
   subtle cascade — rim-1 first, each next one a fraction later — so the
   reset feels like a chain reaction rather than a hard cut. */
.rim-slot { opacity: 0; animation-duration: 14s; animation-iteration-count: infinite; animation-timing-function: ease-out; }
.rim-1 { animation-name: rim-1; }
.rim-2 { animation-name: rim-2; }
.rim-3 { animation-name: rim-3; }
.rim-4 { animation-name: rim-4; }
@keyframes rim-1 { 0%, 10.71% { opacity: 0; } 10.72% { opacity: 1; } 53% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes rim-2 { 0%, 21.42% { opacity: 0; } 21.43% { opacity: 1; } 54% { opacity: 1; } 59%, 100% { opacity: 0; } }
@keyframes rim-3 { 0%, 32.13% { opacity: 0; } 32.14% { opacity: 1; } 55% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes rim-4 { 0%, 42.85% { opacity: 0; } 42.86% { opacity: 1; } 56% { opacity: 1; } 61%, 100% { opacity: 0; } }

/* ---------- Features ---------- */
.features {
  max-width: var(--max);
  margin: 0 auto;
  padding: 48px 24px 32px;
}
.features h2 {
  font-size: clamp(1.6rem, 3vw, 2rem);
  margin: 0 0 28px;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.feature {
  background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.feature:hover {
  transform: translateY(-3px);
  border-color: #3b3b5e;
  box-shadow: 0 18px 40px -20px #000;
}
.feature h3 { margin: 12px 0 6px; font-size: 1.05rem; }
.feature p { margin: 0; color: var(--ink-dim); font-size: 0.95rem; }
.feature-icon {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: linear-gradient(160deg, #22243c, #1a1b2e);
  border: 1px solid var(--line);
  position: relative;
}
.feature-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background-repeat: no-repeat;
  background-position: center;
}
.icon-tap::after    { background-image: radial-gradient(circle at 50% 50%, var(--coral) 0 4px, transparent 5px); background-size: 22px 22px; }
.icon-levels::after { background: linear-gradient(var(--golden),var(--golden)) center 30%/14px 3px no-repeat, linear-gradient(var(--golden),var(--golden)) center 50%/10px 3px no-repeat, linear-gradient(var(--golden),var(--golden)) center 70%/16px 3px no-repeat; }
.icon-daily::after  { background: radial-gradient(circle at 50% 50%, var(--mint) 0 4px, transparent 5px); }
.icon-haptic::after { background: radial-gradient(circle, var(--periwinkle) 0 3px, transparent 4px), radial-gradient(circle, transparent 0 6px, var(--periwinkle) 7px 8px, transparent 9px), radial-gradient(circle, transparent 0 10px, var(--periwinkle) 11px 12px, transparent 13px); background-size: 22px 22px; background-position: center; background-repeat: no-repeat; }
.icon-medal::after  { background: radial-gradient(circle at 50% 60%, var(--golden) 0 6px, transparent 7px); }
.icon-pocket::after { background: linear-gradient(var(--periwinkle), var(--periwinkle)) center/16px 12px no-repeat; border-radius: 4px; }

/* ---------- Mechanics ---------- */
.mechanics {
  max-width: var(--max);
  margin: 0 auto;
  padding: 56px 24px 56px;
}
.mechanics-heading { max-width: 720px; margin: 0 0 32px; }
.mechanics-heading h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.mechanics-heading .lead { color: var(--ink-dim); margin: 0; font-size: 1.02rem; }
.mechanics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.mechanic {
  background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.mechanic::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 60% at 50% 0%, #ffffff10, transparent 60%);
}
.mechanic:hover {
  transform: translateY(-4px);
  border-color: #3b3b5e;
  box-shadow: 0 24px 50px -22px #000;
}
.mechanic-art {
  background: radial-gradient(circle at 50% 45%, #0f1228 0%, #0a0a18 70%);
  border: 1px solid var(--line);
  border-radius: 14px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.mechanic-art svg { width: 100%; height: 100%; display: block; }
.mechanic-body { padding: 4px 4px 0; }
.mechanic-tag {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--planet);
  background: #59bf8c1c;
  padding: 3px 8px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.mechanic-body h3 { margin: 0 0 6px; font-size: 1.05rem; }
.mechanic-body p { margin: 0; color: var(--ink-dim); font-size: 0.94rem; }

/* Mechanic mini-SVG animations */
.m-spin-slow { animation: planet-spin 18s linear infinite; }
.m-orbit-fast { animation: moon-orbit 6s linear infinite; }
.m-orbit-slow { animation: moon-orbit 11s linear infinite; }
.m-phase {
  transform-origin: 0 0;
  animation: phase-sweep 5s ease-in-out infinite;
}
@keyframes phase-sweep {
  0%   { transform: translateX(-22px); }
  45%  { transform: translateX(0); }
  55%  { transform: translateX(0); }
  100% { transform: translateX(22px); }
}

/* Crossing meteors mini */
.m-meteor {
  animation-name: m-meteor-fly;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.m-meteor-a { animation-duration: 2.6s; animation-delay: 0s;   }
.m-meteor-b { animation-duration: 3.4s; animation-delay: 0.9s; }
.m-meteor-c { animation-duration: 2.9s; animation-delay: 1.7s; }
@keyframes m-meteor-fly {
  0%   { transform: translate(-20px, 30px); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translate(220px, 150px); opacity: 0; }
}

/* Spin-changes: planet body alternates direction with creature on rim, arrows fade in/out */
.m-spin-reversing { animation: spin-reverse 6s ease-in-out infinite; }
@keyframes spin-reverse {
  0%   { transform: rotate(0deg); }
  40%  { transform: rotate(140deg); }
  50%  { transform: rotate(140deg); }
  90%  { transform: rotate(-20deg); }
  100% { transform: rotate(0deg); }
}
.m-arc-cw  { animation: arc-cw  6s ease-in-out infinite; }
.m-arc-ccw { animation: arc-ccw 6s ease-in-out infinite; }
@keyframes arc-cw  { 0%, 35% { opacity: 0.85; } 40%, 100% { opacity: 0; } }
@keyframes arc-ccw { 0%, 45% { opacity: 0; } 55%, 95% { opacity: 0.85; } 100% { opacity: 0; } }

/* Pulse rings — matches PulseRingNode's 4-phase cycle:
   telegraph (windup) → emit (deadly) → fade → cooldown.
   Telegraph: a faint ring starts just outside the planet surface and contracts
   onto it, brightening as it does — the player's warning.
   Emit: a bright ring at the planet surface expands outward at speed.
   Fade: continues expanding while fading out. Cooldown: invisible. */
.m-pulse-telegraph,
.m-pulse-emit {
  transform-origin: 90px 90px;
  animation-duration: 2.4s;
  animation-iteration-count: infinite;
  opacity: 0;
}
.m-pulse-telegraph { animation-name: m-pulse-telegraph; animation-timing-function: linear;   }
.m-pulse-emit      { animation-name: m-pulse-emit;      animation-timing-function: ease-out; }

@keyframes m-pulse-telegraph {
  0%   { transform: scale(1.22); opacity: 0.3; }
  24%  { transform: scale(1);    opacity: 1;   }
  25%  { transform: scale(1);    opacity: 0;   }
  100% { transform: scale(1);    opacity: 0;   }
}

@keyframes m-pulse-emit {
  0%, 25% { transform: scale(1);    opacity: 0; }
  26%     { transform: scale(1);    opacity: 1; }
  55%     { transform: scale(1.78); opacity: 1; }
  65%     { transform: scale(1.94); opacity: 0; }
  100%    { transform: scale(1);    opacity: 0; }
}

/* Eclipse: shadow sweeps across sun, dim rectangle pulses */
.m-eclipse-shadow {
  transform-origin: 148px 36px;
  animation: m-eclipse-shadow 5s ease-in-out infinite;
}
@keyframes m-eclipse-shadow {
  0%   { transform: translateX(-50px); }
  40%  { transform: translateX(0); }
  60%  { transform: translateX(0); }
  100% { transform: translateX(50px); }
}
.m-eclipse-dim {
  opacity: 0;
  animation: m-eclipse-dim 5s ease-in-out infinite;
}
@keyframes m-eclipse-dim {
  0%, 30%   { opacity: 0; }
  45%, 55%  { opacity: 1; }
  70%, 100% { opacity: 0; }
}

/* ---------- Pitch quote ---------- */
.pitch {
  max-width: var(--max);
  margin: 0 auto;
  padding: 32px 24px 88px;
}
.pitch-card {
  margin: 0;
  padding: 44px 32px;
  background: linear-gradient(160deg, #1c1c30, #161626);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--planet);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.pitch-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 200px at 0% 0%, #59bf8c1c, transparent 70%);
  pointer-events: none;
}
.pitch-card h2 {
  margin: 0 0 24px;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  color: var(--ink);
  position: relative;
}
.pitch-card .cta-row {
  justify-content: center;
  position: relative;
}

/* ---------- Prose (privacy + support) ---------- */
.prose {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}
.prose h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 12px 0 8px; }
.prose h2 { font-size: 1.2rem; margin: 32px 0 8px; color: var(--ink); }
.prose h3 { font-size: 1.02rem; margin: 22px 0 6px; color: var(--ink); }
.prose p, .prose li { color: var(--ink-dim); }
.prose a { color: var(--planet); text-decoration: underline; text-decoration-color: #2d6b4d; }
.prose a:hover { text-decoration-color: var(--planet); }
.prose .updated { color: var(--ink-muted); font-size: 0.9rem; margin: 0 0 18px; }
.contact-card {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin: 24px 0 12px;
}
.contact-label { color: var(--ink-muted); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }
.contact-email { display: inline-block; font-size: 1.25rem; font-weight: 700; color: var(--ink); max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.contact-hint { margin: 12px 0 0; color: var(--ink-dim); font-size: 0.95rem; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: #07070fcc;
  backdrop-filter: blur(6px);
}
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px 24px 12px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-name { font-weight: 800; }
.footer-by { font-size: 0.85rem; color: var(--ink-muted); }
.footer-by a { color: var(--ink-dim); }
.footer-nav { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-nav a { color: var(--ink-dim); font-size: 0.9rem; }
.footer-copy { max-width: var(--max); margin: 0 auto; padding: 4px 24px 28px; color: var(--ink-muted); font-size: 0.8rem; }

/* ---------- Scroll reveal (only active when JS sets .js on <html>) ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms ease, transform 700ms ease;
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js .reveal[data-reveal="fade-in"]  { transform: none; }
.js .reveal[data-reveal="scale-in"] { transform: scale(0.96); }
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 20px 24px 56px;
  }
  .hero-visual { order: -1; min-height: 0; }
  .hero-svg { max-width: 320px; }
  .site-header { padding: 18px 20px; gap: 10px 20px; }
  .site-nav { gap: 14px; }
  .mechanic-art { height: 160px; }
}
@media (max-width: 640px) {
  .site-header { justify-content: center; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-name { font-size: 1rem; }
  .site-nav {
    width: 100%;
    gap: 10px 18px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .site-nav a { font-size: 0.9rem; padding: 2px 0; }
}
@media (max-width: 480px) {
  .site-header { padding: 14px 16px; gap: 8px 14px; }
  .brand-mark { width: 30px; height: 30px; }
  .brand-name { font-size: 0.95rem; }
  .site-nav { gap: 8px 14px; }
  .site-nav a { font-size: 0.85rem; }
  .hero { padding: 16px 20px 48px; }
  .features, .pitch, .prose, .mechanics { padding-left: 20px; padding-right: 20px; }
  .cta.primary { padding: 10px 18px; }
  .nebula-a { width: 360px; height: 360px; }
  .nebula-b { width: 420px; height: 420px; }
}
@media (max-width: 360px) {
  .site-header { padding: 12px 14px; }
  .brand { gap: 8px; }
  .brand-name { font-size: 0.9rem; }
  .site-nav { gap: 6px 12px; }
  .site-nav a { font-size: 0.8rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .meteor { display: none; }
}