/* FleetCraft — main stylesheet. Rules: DESIGN.md. Raw colour values appear only in :root. */

@font-face {
  font-family: "Space Mono";
  src: url("/fonts/space-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("/fonts/space-mono-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  /* game tokens — keep in sync with fleet-craft/DESIGN_SYSTEM.md */
  --space: #0a0e27;  --panel: #1a1f3a;  --edge: #2d2f4a;
  --cyan: #00d9ff;   --cyan-hi: #00ffff;
  --gold: #ffa500;   --gold-dark: #b8860b;
  --magenta: #ff1493; --magenta-hi: #ff69b4;
  --lime: #00ff41;   --metal: #c0c0c0;   --slate: #708090;
  --naval: #6b7a3f;  --naval-engine: #00a8e8;
  --royal: #9d8259;  --royal-light: #c9b8a0;
  /* web text */
  --text: #e6e9f2;   --text-muted: #a9b1c7;   --text-faint: #8b93ad;
  /* web-only decorative */
  --panel-glass: rgb(26 31 58 / 0.9);
  --star: #e6e9f2;
  --star-warm: #ffd89a;
  --star-cool: #9fe9ff;
  --nebula-a: rgb(58 47 107 / 0.35);
  --nebula-b: rgb(0 217 255 / 0.06);
  --orbit-line: rgb(184 134 11 / 0.35);
  --orbit-line-faint: rgb(184 134 11 / 0.2);
  --cyan-wash: rgb(0 217 255 / 0.1);
  --cyan-line: rgb(0 217 255 / 0.4);
  --gold-wash: rgb(255 165 0 / 0.12);
  --core-glow: radial-gradient(circle, rgb(255 165 0 / 0.38), rgb(184 134 11 / 0.14) 22%, transparent 48%);
  --hex-field: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27.713' height='48'%3E%3Cpath d='M13.856 0 27.713 8v16L13.856 32 0 24V8zm0 32v16' fill='none' stroke='%232d2f4a' stroke-width='1'/%3E%3C/svg%3E");
  /* type */
  --font-display: "Space Mono", ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-display: clamp(2.25rem, 1.6rem + 3.2vw, 4rem);
  --fs-h2: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --fs-h3: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-label: 0.8125rem;
  /* space */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --gutter: var(--sp-4);
  /* shape & motion */
  --border: 2px; --border-thick: 3px; --radius: 0;
  --hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  --chamfer: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  --dur: 200ms; --ease: cubic-bezier(.2, .7, .3, 1);
  --glow-cyan: 0 0 10px rgb(0 217 255 / .5);
  --glow-cyan-strong: 0 0 0 1px var(--cyan-hi), 0 0 16px rgb(0 217 255 / .45);
  --glow-gold: 0 0 24px rgb(255 165 0 / .35);
}

@media (min-width: 40em) {
  :root { --gutter: var(--sp-5); }
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--space);
  color: var(--text);
  font: var(--fs-body)/1.6 var(--font-body);
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-display); letter-spacing: 0.08em; text-transform: uppercase; }
h2 { font-size: var(--fs-h2); letter-spacing: 0.04em; }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 var(--sp-4); max-width: 65ch; }

a { color: var(--cyan); text-underline-offset: 0.2em; }
a:hover { color: var(--cyan-hi); text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--cyan-hi); outline-offset: 3px; }

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

.container {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: 10;
  padding: var(--sp-3) var(--sp-5);
  background: var(--cyan);
  color: var(--space);
  font: 700 var(--fs-label)/1 var(--font-display);
  text-transform: uppercase;
  translate: 0 -200%;
}
.skip-link:focus { translate: 0 0; }

main, .site-header, .site-footer { position: relative; z-index: 1; }

/* ---------- deep space backdrop (fixed, behind everything) ---------- */

.space {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.space__stars {
  position: absolute;
  inset: -400px 0 0;
}
.space__stars--far {
  background-image:
    radial-gradient(1px 1px at 23px 41px, var(--star) 50%, transparent 51%),
    radial-gradient(1px 1px at 87px 173px, var(--star) 50%, transparent 51%),
    radial-gradient(1px 1px at 151px 77px, var(--star-cool) 50%, transparent 51%),
    radial-gradient(1px 1px at 199px 211px, var(--star) 50%, transparent 51%),
    radial-gradient(1px 1px at 47px 229px, var(--star-warm) 50%, transparent 51%),
    radial-gradient(1px 1px at 131px 131px, var(--star) 50%, transparent 51%),
    radial-gradient(1px 1px at 223px 19px, var(--star) 50%, transparent 51%),
    radial-gradient(1px 1px at 9px 113px, var(--star-cool) 50%, transparent 51%);
  background-size: 240px 240px;
  opacity: 0.55;
}
.space__stars--near {
  background-image:
    radial-gradient(1.5px 1.5px at 61px 97px, var(--star) 50%, transparent 51%),
    radial-gradient(2px 2px at 289px 53px, var(--star-warm) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 173px 311px, var(--star) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 353px 241px, var(--star-cool) 50%, transparent 51%),
    radial-gradient(2px 2px at 109px 367px, var(--star) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 251px 167px, var(--star) 50%, transparent 51%);
  background-size: 400px 400px;
  opacity: 0.8;
}
.space__nebula {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 45% at 85% 15%, var(--nebula-a), transparent 70%),
    radial-gradient(ellipse 50% 40% at 10% 80%, var(--nebula-a), transparent 70%),
    radial-gradient(ellipse 40% 30% at 30% 40%, var(--nebula-b), transparent 70%);
}

/* A flight lane: a zero-height line across the viewport, tilted by --tilt (180°+ = right-to-left).
   The craft moves along the lane's x axis, starting off-screen. */
.flight {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--y);
  height: 0;
  transform: rotate(var(--tilt));
}

.flight__craft {
  position: absolute;
  left: 0;
  top: 0;
  translate: -50% -50%;
  transform: translateX(calc(-10vw - 180px));
}

.craft { rotate: 90deg; max-width: none; }   /* sprites are drawn nose-up */

/* All lanes share one 60s cycle, staggered by 15s. A crossing takes 35% of the cycle (21s),
   so a new ship appears every 15s and at most two are on screen at once. */
.flight--1 { --y: 18%; --tilt: -6deg;  --delay: 0s; }
.flight--2 { --y: 70%; --tilt: 186deg; --delay: -15s; }
.flight--3 { --y: 40%; --tilt: 12deg;  --delay: -30s; }
.flight--4 { --y: 85%; --tilt: 176deg; --delay: -45s; }

/* Phones: slightly smaller craft. */
@media (max-width: 39.99em) {
  .flight__craft { scale: 0.8; }
}

/* Reduced motion: no ships at all rather than parked ones. */
@media (prefers-reduced-motion: reduce) {
  .flight { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .space__stars--far  { animation: drift-far 240s linear infinite; }
  .space__stars--near { animation: drift-near 160s linear infinite; }
  .flight__craft { animation: fly 60s linear var(--delay) infinite; }
}

@keyframes drift-far  { to { transform: translateY(240px); } }
@keyframes drift-near { to { transform: translateY(400px); } }

/* Cross the lane in the first 35%, then wait off-screen so the skies never feel crowded. */
@keyframes fly {
  from { transform: translateX(calc(-10vw - 180px)); }
  35%, to { transform: translateX(calc(110vw + 180px)); }
}

/* ---------- header ---------- */

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 44px;
  color: var(--text);
  text-decoration: none;
}
.brand:hover { color: var(--cyan-hi); }
.brand__icon {
  width: 44px;
  height: 44px;
  border: var(--border) solid var(--cyan);
  transition: border-color var(--dur) var(--ease);
}
.brand:hover .brand__icon { border-color: var(--cyan-hi); }
.brand__name {
  font: 700 1.125rem/1 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.brand--small .brand__icon { width: 32px; height: 32px; }
.brand--small .brand__name { font-size: 1rem; }

.nav { display: none; }
.nav__list { display: flex; gap: var(--sp-2); }
.nav a,
.menu__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--sp-3);
  font: 700 var(--fs-label)/1 var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-muted);
  border-bottom: var(--border) solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav a:hover,
.menu__list a:hover { color: var(--cyan-hi); border-bottom-color: var(--cyan); }

.menu { position: relative; }
.menu__toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sp-4);
  border: var(--border) solid var(--cyan);
  background: var(--panel);
  color: var(--cyan);
  font: 700 var(--fs-label)/1 var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.menu__toggle::-webkit-details-marker { display: none; }
.menu[open] .menu__toggle { border-color: var(--cyan-hi); color: var(--cyan-hi); }
.menu__list {
  position: absolute;
  right: 0;
  top: calc(100% + var(--sp-2));
  z-index: 5;
  min-width: 12rem;
  padding: var(--sp-2);
  background: var(--panel);
  border: var(--border) solid var(--edge);
}
.menu__list a { display: flex; }

@media (min-width: 40em) {
  .nav { display: block; }
  .menu { display: none; }
}

/* ---------- shared components ---------- */

.panel {
  background: var(--panel-glass);
  border: var(--border) solid var(--edge);
  padding: var(--sp-5);
}
.panel--chamfer { clip-path: var(--chamfer); }
.panel__title {
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: var(--sp-2);
  border-bottom: 1px dashed var(--cyan-line);
}

.eyebrow {
  margin: 0 0 var(--sp-2);
  font: 700 var(--fs-label)/1.3 var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
}

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--cyan);
  background: var(--cyan-wash);
  color: var(--text);
  font: 700 var(--fs-label)/1.5 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.chip--tick { border-left: var(--border) solid var(--gold); }

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
}
@media (prefers-reduced-motion: no-preference) {
  .status-dot { animation: pulse 2.4s ease-in-out infinite; }
}
@keyframes pulse { 50% { opacity: 0.35; } }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--sp-3) var(--sp-5);
  border: var(--border) solid;
  font: 700 var(--fs-label)/1 var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn--primary { background: var(--cyan); border-color: var(--cyan-hi); color: var(--space); }
.btn--primary:hover,
.btn--primary:focus-visible { background: var(--cyan-hi); color: var(--space); box-shadow: var(--glow-cyan-strong); }
.btn--secondary { background: var(--panel); border-color: var(--cyan); color: var(--cyan); }
.btn--secondary:hover,
.btn--secondary:focus-visible { background: var(--edge); border-color: var(--cyan-hi); color: var(--cyan-hi); box-shadow: var(--glow-cyan); }

.section {
  padding-block: clamp(var(--sp-7), 8vw, var(--sp-9));
}
.section__lede { color: var(--text-muted); margin-bottom: var(--sp-6); }
.section h2 + .modes,
.section h2 + .features { margin-top: var(--sp-6); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  overflow: clip;
  padding-block: var(--sp-4) var(--sp-8);
}
.hero__inner {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}
.hero__copy { position: relative; z-index: 1; padding: var(--sp-6) var(--sp-5); }
.hero__copy .chip { margin-bottom: var(--sp-5); }
.hero__title { margin-bottom: var(--sp-5); font-size: clamp(2rem, 1.5rem + 2.4vw, 3.25rem); }
.hero__title-accent { display: block; color: var(--gold); }
.hero__lede { color: var(--text-muted); margin-bottom: var(--sp-6); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.hero__scroll {
  display: block;
  width: max-content;
  margin: var(--sp-6) auto 0;
  padding: var(--sp-3);
  font: 700 var(--fs-label)/1 var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-muted);
}
.hero__scroll::after { content: " ↓"; color: var(--cyan); }

/* The solar system. Sizes are in cqi (percent of the system's width) so it scales as one piece. */
.system {
  position: relative;
  order: -1;
  width: min(100%, 28rem);
  aspect-ratio: 1;
  margin-inline: auto;
  container-type: inline-size;
}
.system::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: var(--core-glow);
}

.system__sun {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24cqi;
  aspect-ratio: 1;
  translate: -50% -50%;
  overflow: hidden;
}
.system__sun-sheet { width: 300%; max-width: none; }   /* 3×3 animation sheet */

.orbit {
  position: absolute;
  inset: var(--inset);
  border: 1px dashed var(--orbit-line);
  border-radius: 50%;
  transform: rotate(var(--phase));
}
.orbit__body {
  position: absolute;
  left: 50%;
  top: 0;
  width: calc(var(--size) * 1cqi);
  translate: -50% -50%;
  rotate: calc(var(--phase) * -1);   /* stays upright while the ring turns */
}
.orbit__body img { width: 100%; }

.orbit--1 { --inset: 35%;   --size: 6;  --period: 50s;  --phase: 40deg; }
.orbit--2 { --inset: 28%;   --size: 8;  --period: 80s;  --phase: 210deg; }
.orbit--3 { --inset: 21.5%; --size: 5.5; --period: 120s; --phase: 120deg; }
.orbit--belt { --inset: 15%; --period: 200s; --phase: 0deg; border-style: dotted; border-color: var(--orbit-line-faint); }
.orbit--5 { --inset: 9%;    --size: 13; --period: 260s; --phase: 300deg; }
.orbit--6 { --inset: 2%;    --size: 10; --period: 360s; --phase: 75deg; }

/* A moon circling the earth-like planet on orbit 2. */
.orbit__body--host { overflow: visible; }
.moon-orbit {
  position: absolute;
  inset: -38%;
  border: 1px dotted var(--orbit-line-faint);
  border-radius: 50%;
}
.moon-orbit__body {
  position: absolute;
  left: 50%;
  top: 0;
  width: 3cqi;
  translate: -50% -50%;
}
.moon-orbit__body img { width: 100%; }

.belt-rock { position: absolute; inset: 0; rotate: var(--at); }
.belt-rock img {
  position: absolute;
  left: 50%;
  top: var(--jitter, 0%);
  width: calc(var(--size) * 1cqi);
  translate: -50% -50%;
}
.belt-rock--1 { --at: 20deg;  --size: 4;   --jitter: 1%; }
.belt-rock--2 { --at: 85deg;  --size: 3.4; --jitter: -1.5%; }
.belt-rock--3 { --at: 150deg; --size: 4.2; --jitter: 0.5%; }
.belt-rock--4 { --at: 205deg; --size: 3;   --jitter: -1%; }
.belt-rock--5 { --at: 260deg; --size: 2.8; --jitter: 1.5%; }
.belt-rock--6 { --at: 320deg; --size: 2.5; --jitter: -0.5%; }

@media (prefers-reduced-motion: no-preference) {
  .system__sun-sheet { animation: sun-frames 1.35s step-end infinite; }
  .orbit { animation: orbit var(--period) linear infinite; }
  .orbit__body { animation: counter-orbit var(--period) linear infinite; }
  .moon-orbit { animation: spin 14s linear infinite; }
  .moon-orbit__body { animation: spin 14s linear infinite reverse; }
}

@keyframes orbit {
  from { transform: rotate(var(--phase)); }
  to   { transform: rotate(calc(var(--phase) + 1turn)); }
}
@keyframes counter-orbit {
  from { rotate: calc(var(--phase) * -1); }
  to   { rotate: calc(var(--phase) * -1 - 1turn); }
}
@keyframes spin { to { rotate: 1turn; } }
@keyframes sun-frames {
  0%     { transform: translate(0, 0); }
  11.11% { transform: translate(-33.333%, 0); }
  22.22% { transform: translate(-66.667%, 0); }
  33.33% { transform: translate(0, -33.333%); }
  44.44% { transform: translate(-33.333%, -33.333%); }
  55.55% { transform: translate(-66.667%, -33.333%); }
  66.66% { transform: translate(0, -66.667%); }
  77.77% { transform: translate(-33.333%, -66.667%); }
  88.88%, 100% { transform: translate(-66.667%, -66.667%); }
}

@media (min-width: 64em) {
  .hero { padding-block: var(--sp-6) var(--sp-7); }
  .hero__inner {
    grid-template-columns: minmax(0, 36rem) minmax(0, 1fr);
    min-height: min(78svh, 46rem);
  }
  .system {
    order: 0;
    width: min(50rem, 56vw);
    margin-inline: -4rem -8rem;   /* let the outer orbits bleed past the column */
    justify-self: center;
  }
}

/* ---------- game modes ---------- */

.modes { display: grid; gap: var(--sp-5); }
.mode { display: grid; gap: var(--sp-5); align-content: start; }
/* Game screenshots are roughly 6:5; cover-crop the small difference. */
.mode__art {
  aspect-ratio: 6 / 5;
  background: var(--space);
  border: var(--border) solid var(--edge);
  overflow: hidden;
}
.mode__art img { width: 100%; height: 100%; object-fit: cover; }
.mode .chips { margin-top: var(--sp-4); }

@media (min-width: 64em) {
  .modes { grid-template-columns: 1fr 1fr; }
}

/* ---------- shipyard ---------- */

.hulls {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.hull { display: flex; flex-direction: column; }
.hull p { color: var(--text-muted); flex: 1; }
.hull__art {
  display: grid;
  place-items: center;
  height: 160px;
  margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-5);
  background: var(--space) var(--hex-field);
  border-bottom: var(--border) solid var(--edge);
}
.hull__art img { width: 128px; height: 128px; }

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3) var(--sp-4);
  margin: 0;
}
.stats div { border-top: 1px solid var(--edge); padding-top: var(--sp-2); }
.stats dt {
  font: 700 0.8125rem/1.2 var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}
.stats dd {
  margin: 0;
  font: 700 1rem/1.4 var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* ---------- fleet styles ---------- */

.styles {
  display: grid;
  gap: var(--sp-5) var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
}
.style { text-align: center; }
.style__art {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 10rem;
  aspect-ratio: 1 / 1.1547;
  margin-inline: auto;
  clip-path: var(--hex);
  background: var(--edge);
  transition: background-color var(--dur) var(--ease);
}
.style__art::before {
  content: "";
  position: absolute;
  inset: var(--border);
  clip-path: var(--hex);
  background: var(--panel) var(--hex-field);
}
.style__art img { position: relative; width: 72%; }
.style:hover .style__art { background: var(--cyan); }
.style__name {
  margin: var(--sp-3) auto 0;
  font: 700 var(--fs-label)/1.3 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}

@media (prefers-reduced-motion: no-preference) {
  .style__art img { transition: transform 300ms var(--ease); }
  .style:hover .style__art img { transform: translateY(-4px) scale(1.06); }
}

/* ---------- play your way ---------- */

.features {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.feature { display: flex; gap: var(--sp-4); align-items: flex-start; }
.feature p { margin: 0; color: var(--text-muted); }
.feature__title {
  font-size: 1.0625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-2);
}
.feature__hex {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  height: 74px;
  clip-path: var(--hex);
  background: var(--cyan);
}
.feature__hex::before {
  content: "";
  position: absolute;
  inset: var(--border);
  clip-path: var(--hex);
  background: var(--space);
}
.feature__hex img { position: relative; width: 40px; height: 40px; }

/* ---------- launch CTA ---------- */

.cta {
  display: grid;
  gap: var(--sp-5);
  justify-items: start;
  padding: var(--sp-6) var(--sp-5);
  background:
    radial-gradient(ellipse at 0% 50%, var(--gold-wash), transparent 60%),
    var(--panel-glass);
  border-color: var(--gold-dark);
}
.cta__icon {
  width: 128px;
  height: 128px;
  border: var(--border-thick) solid var(--gold);
  box-shadow: var(--glow-gold);
}
.cta__body p:not(.eyebrow) { color: var(--text-muted); }

@media (min-width: 40em) {
  .cta { grid-template-columns: auto 1fr; align-items: center; padding: var(--sp-7); }
}

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--edge);
  background: var(--space);
  padding-block: var(--sp-7);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.site-footer__inner { display: grid; gap: var(--sp-3); justify-items: start; }
.site-footer p { margin: 0; }
.site-footer__legal { color: var(--text-faint); }

/* ---------- 404 ---------- */

.lost { padding-block: var(--sp-9); }
.lost__inner { display: grid; justify-items: center; text-align: center; }
.lost__inner p { margin-inline: auto; color: var(--text-muted); }
.lost__comet { width: 160px; margin-bottom: var(--sp-5); }
.lost h1 { font-size: var(--fs-h2); }