/* ============================================================
   Ambient Agents  ·  ambientagents.net  ·  CogniCluster LLC
   Star-chart mission-control identity. Deep void, fleet amber,
   greenfield cyan, red-team red. System fonts only.
   ============================================================ */

:root {
  --void: #05080f;
  --void-2: #070c16;
  --panel: #0b1220;
  --panel-2: #0d1526;
  --line: #1b2942;
  --line-soft: #14203a;
  --ink: #e9eef7;
  --muted: #8b9cb5;
  --faint: #5b6b85;
  --amber: #ffb648;
  --amber-dim: #c98a2e;
  --cyan: #4fd8c4;
  --cyan-dim: #2b8d80;
  --red: #ff5d5d;
  --red-dim: #a63b3b;
  --blue: #6ea8ff;
  --sans: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  --maxw: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}
::selection { background: rgba(255, 182, 72, 0.28); }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- starfield ---------- */
#stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ---------- shared layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }
section { position: relative; z-index: 1; padding: 110px 0 90px; }
section + section { border-top: 1px solid var(--line-soft); }

.act-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 18px;
}
.act-label::before {
  content: "";
  width: 22px; height: 22px;
  background: var(--amber);
  -webkit-mask: url("assets/synty/sprites/Crests/SPR_SciFiMenus_Crest_Chevron_02.png") center / contain no-repeat;
  mask: url("assets/synty/sprites/Crests/SPR_SciFiMenus_Crest_Chevron_02.png") center / contain no-repeat;
  flex: none;
}
h2 {
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 850;
  letter-spacing: -0.015em;
  line-height: 1.12;
  margin: 0 0 18px;
}
h3 { font-size: 21px; font-weight: 750; margin: 0 0 10px; }
.lede { font-size: 19px; color: #c3cede; max-width: 62ch; }
.lede strong, p strong { color: var(--ink); }
p { color: #b6c2d4; max-width: 68ch; }
.dim { color: var(--muted); }
.small { font-size: 14.5px; }

/* mono chips */
.chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--muted);
  background: rgba(11, 18, 32, 0.7);
  white-space: nowrap;
}
.chip.amber { color: var(--amber); border-color: rgba(255, 182, 72, 0.4); }
.chip.cyan  { color: var(--cyan);  border-color: rgba(79, 216, 196, 0.4); }
.chip.red   { color: var(--red);   border-color: rgba(255, 93, 93, 0.4); }
.chip.blue  { color: var(--blue);  border-color: rgba(110, 168, 255, 0.4); }
.chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }

/* panel with Synty corner brackets */
.panel {
  position: relative;
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 26px 28px;
}
.panel::before, .panel::after {
  content: "";
  position: absolute;
  width: 26px; height: 26px;
  background: var(--amber);
  opacity: 0.85;
  -webkit-mask: url("assets/synty/sprites/General/SPR_SciFiMenus_Indicator_Line_Corner_01.png") center / contain no-repeat;
  mask: url("assets/synty/sprites/General/SPR_SciFiMenus_Indicator_Line_Corner_01.png") center / contain no-repeat;
  pointer-events: none;
}
.panel::before { top: -4px; left: -4px; }
.panel::after  { bottom: -4px; right: -4px; transform: rotate(180deg); }
.panel.cyan::before, .panel.cyan::after { background: var(--cyan); }
.panel.red::before,  .panel.red::after  { background: var(--red); }
.panel.plain::before, .panel.plain::after { display: none; }

/* reveal on scroll */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
  transition-delay: var(--d, 0s);
}
.in-view [data-reveal], [data-reveal].in-view {
  opacity: 1;
  transform: none;
}

/* ---------- nav ---------- */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(5, 8, 15, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
  height: 58px;
  display: flex;
  align-items: center;
  gap: 26px;
}
.brand {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink);
  white-space: nowrap;
}
.brand b { color: var(--amber); font-weight: 700; }
.brand:hover { text-decoration: none; }
.nav-links { display: flex; gap: 20px; margin-left: auto; align-items: center; }
.nav-links a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
}
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.cta-btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #10131a !important;
  background: var(--amber);
  padding: 9px 18px;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  font-weight: 700;
}
.cta-btn:hover { background: #ffc670; text-decoration: none !important; }

/* ---------- hero ---------- */
#hero {
  padding: 150px 0 70px;
  border-top: none;
  min-height: 94vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
#c-hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
#c-hero.ready { opacity: 1; }
.hero-copy { position: relative; z-index: 2; }
#hero::after {
  /* readability scrim under the copy, over the 3D */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(5,8,15,0.82) 0%, rgba(5,8,15,0.45) 46%, rgba(5,8,15,0.05) 78%);
  pointer-events: none;
}
.hero-crest {
  width: 74px; height: 74px;
  margin-bottom: 26px;
  background: var(--amber);
  -webkit-mask: url("assets/synty/sprites/Crests/SPR_SciFiMenus_Crest_Wings_01.png") center / contain no-repeat;
  mask: url("assets/synty/sprites/Crests/SPR_SciFiMenus_Crest_Wings_01.png") center / contain no-repeat;
}
#hero h1 {
  font-size: clamp(44px, 7vw, 84px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0 0 26px;
  max-width: 13ch;
}
#hero h1 em { font-style: normal; color: var(--amber); }
.hero-sub { font-size: clamp(18px, 2vw, 21px); color: #c3cede; max-width: 58ch; margin-bottom: 34px; }
.hero-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.ghost-btn {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 9px 18px;
  border-radius: 3px;
  background: transparent;
}
.ghost-btn:hover { border-color: var(--amber); color: var(--amber); text-decoration: none; }
.status-ribbon {
  margin-top: 46px;
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
}
.hero-scene { margin-top: 40px; }
.hero-scene svg { width: 100%; height: auto; display: block; }

/* ---------- legend ---------- */
#legend { padding: 60px 0; }
.legend-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 26px;
}
.legend-item {
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: rgba(11, 18, 32, 0.6);
  padding: 14px 14px 12px;
}
.legend-item svg { width: 46px; height: 30px; display: block; margin-bottom: 8px; }
.legend-item .m {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
}
.legend-item .s { font-size: 13.5px; color: var(--muted); line-height: 1.45; }

/* ---------- 3D scene panels ---------- */
.scene3d {
  position: relative;
  margin-top: 44px;
  height: 460px;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background:
    radial-gradient(130% 150% at 50% 0%, rgba(10, 17, 34, 0.55) 0%, rgba(7, 12, 22, 0.8) 70%),
    url("assets/site/backdrop-station.jpg") center / cover;
}
#durable .scene3d {
  /* pure void: the route line, recorder, and planet need the dark */
  background: radial-gradient(130% 150% at 50% 0%, #0a1122 0%, var(--void-2) 70%);
}
.scene3d canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  transition: opacity 1s ease;
}
.scene3d canvas.ready { opacity: 1; }
.scene3d canvas.failed { display: none; }
.overlay-label {
  position: absolute;
  z-index: 3;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--muted);
  background: rgba(5, 8, 15, 0.72);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 4px 10px;
  pointer-events: none;
}
.overlay-label.amber { color: var(--amber); border-color: rgba(255, 182, 72, 0.45); }
.overlay-label.cyan  { color: var(--cyan);  border-color: rgba(79, 216, 196, 0.45); }
.overlay-label.red   { color: var(--red);   border-color: rgba(255, 93, 93, 0.45); }

/* CTA scene: squadron behind the signup panel */
.cta-scene {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  padding: 56px 40px;
  background: radial-gradient(120% 150% at 50% 10%, #0a1122 0%, var(--void-2) 75%);
}
.cta-scene canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  transition: opacity 1s ease;
}
.cta-scene canvas.ready { opacity: 0.9; }
.cta-scene canvas.failed { display: none; }
.cta-scene .signup-panel {
  position: relative;
  z-index: 2;
  max-width: 560px;
  margin: 0 auto 0 4%;
  background: rgba(9, 15, 28, 0.88);
  backdrop-filter: blur(4px);
}
@media (max-width: 1020px) {
  .cta-scene .signup-panel { margin: 0 auto; }
}
.no-webgl .scene3d canvas, .no-webgl #c-hero, .no-webgl .cta-scene canvas { display: none; }

/* ---------- scene containers ---------- */
.scene {
  margin-top: 44px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: radial-gradient(120% 140% at 50% 0%, #0a1122 0%, var(--void-2) 70%);
  overflow: hidden;
  position: relative;
}
.scene svg { width: 100%; height: auto; display: block; }
.scene-caption {
  border-top: 1px solid var(--line-soft);
  padding: 14px 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  background: rgba(5, 8, 15, 0.55);
}

/* scene svg element classes */
.wp { fill: none; stroke: var(--faint); stroke-width: 1.4; }
.wp.active { stroke: var(--amber); }
.wp.done { fill: rgba(79, 216, 196, 0.14); stroke: var(--cyan); }
.wp.bad { stroke: var(--red); stroke-dasharray: 4 3; }
.edge { fill: none; stroke: #2a3c5e; stroke-width: 1.3; }
.edge.lit { stroke: rgba(255, 182, 72, 0.55); }
.svg-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  fill: var(--muted);
}
.svg-label.amber { fill: var(--amber); }
.svg-label.cyan { fill: var(--cyan); }
.svg-label.red { fill: var(--red); }
.svg-label.big { font-size: 13px; }

/* ---------- two-col rows ---------- */
.row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: center;
}
.row.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.row > .copy { min-width: 0; }

/* ---------- contract card ---------- */
.contract {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.75;
  color: #b6c2d4;
}
.contract .sec { color: var(--amber); letter-spacing: 0.14em; font-size: 11.5px; margin-top: 14px; }
.contract .sec:first-child { margin-top: 0; }
.contract .k { color: var(--faint); }
.contract .v { color: var(--ink); }
.contract .crit { color: var(--cyan); }
.contract .halt { color: var(--red); }

/* fuel gauge */
.gauge { margin-top: 26px; }
.gauge-track {
  height: 14px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #0a101d;
  position: relative;
  overflow: hidden;
}
.gauge-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--cyan-dim), var(--amber) 70%, var(--red) 98%);
}
.in-view .gauge-fill { animation: burn 9s linear infinite; }
@keyframes burn {
  0% { width: 0; }
  55% { width: 80%; }
  62% { width: 80%; }
  88% { width: 100%; }
  100% { width: 100%; }
}
.gauge-mark {
  position: absolute; top: -5px; bottom: -5px; width: 1px;
  background: var(--amber);
}
.gauge-mark.m80 { left: 80%; }
.gauge-mark.m100 { left: calc(100% - 1px); background: var(--red); }
.gauge-legend {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 11px; color: var(--faint);
  margin-top: 6px; letter-spacing: 0.06em;
}
.gauge-events { font-family: var(--mono); font-size: 12px; margin-top: 14px; min-height: 44px; }
.gauge-events .warn { color: var(--amber); opacity: 0; }
.gauge-events .halt { color: var(--red); opacity: 0; display: block; }
.in-view .gauge-events .warn { animation: evt 9s linear infinite; }
.in-view .gauge-events .halt { animation: evt2 9s linear infinite; }
@keyframes evt  { 0%,54% { opacity: 0; } 58%,100% { opacity: 1; } }
@keyframes evt2 { 0%,87% { opacity: 0; } 91%,100% { opacity: 1; } }

/* ---------- terminal ---------- */
.term {
  background: #060a13;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.8;
  padding: 18px 20px;
  color: #b6c2d4;
  overflow-x: auto;
}
.term .ps { color: var(--faint); }
.term .cmd { color: var(--ink); }
.term .ok { color: var(--cyan); }
.term .warn { color: var(--amber); }
.term .err { color: var(--red); }
.term .out { color: var(--muted); }

/* ---------- boundary commands ---------- */
.cmd-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 20px;
}
.cmd-grid .chip { text-align: center; width: 100%; }

/* ---------- council ---------- */
.council {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 40px;
}
.council .panel { padding: 20px 22px; }
.council h4 {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.council .blue-side h4 { color: var(--blue); }
.council .red-side h4 { color: var(--red); }
.council ul { margin: 0; padding-left: 18px; color: #b6c2d4; font-size: 15px; }
.council li { margin: 6px 0; }
.judge-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* ---------- voyages ---------- */
.voyage {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 44px;
  min-height: 460px;
  display: flex;
  align-items: stretch;
}
.voyage .bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.5;
}
.voyage.green .bg { background-image: url("assets/site/backdrop-station.jpg"); background-position: 72% center; }
.voyage.brown .bg { background-image: url("assets/site/backdrop-wreck.jpg"); background-position: center 30%; }
.voyage .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(5, 8, 15, 0.94) 0%, rgba(5, 8, 15, 0.82) 42%, rgba(5, 8, 15, 0.25) 100%);
}
.voyage .scanlines {
  position: absolute; inset: 0;
  background: url("assets/synty/sprites/FX/SPR_SciFiMenus_FX_Scanlines.png") repeat;
  background-size: 480px;
  opacity: 0.05;
  pointer-events: none;
}
.voyage .content {
  position: relative;
  z-index: 2;
  padding: 46px 48px;
  max-width: 640px;
}
.voyage h3 { font-size: 26px; }
.voyage .tagline {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.voyage.green .tagline { color: var(--cyan); }
.voyage.brown .tagline { color: var(--amber); }
.voyage ol { color: #b6c2d4; padding-left: 20px; font-size: 15.5px; }
.voyage li { margin: 8px 0; }
.voyage li::marker { font-family: var(--mono); color: var(--faint); font-size: 12px; }

/* ---------- comparison ---------- */
.compare-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 44px;
}
.compare-card {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  padding: 22px 24px;
}
.compare-card .head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.compare-card h3 { font-size: 18px; margin: 0; }
.compare-card p { font-size: 14.5px; margin: 8px 0; max-width: none; }
.compare-card .best { color: #b6c2d4; }
.compare-card .best b, .compare-card .short b, .compare-card .move b {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
}
.compare-card .best b { color: var(--cyan); }
.compare-card .short b { color: var(--red); }
.compare-card .move b { color: var(--amber); }
.holes { margin-top: 60px; }
.holes-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 26px;
  counter-reset: hole;
}
.hole {
  border: 1px solid var(--line-soft);
  border-top: 2px solid var(--amber);
  border-radius: 4px;
  background: rgba(11, 18, 32, 0.6);
  padding: 16px 16px 14px;
  counter-increment: hole;
}
.hole::before {
  content: "0" counter(hole);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
  letter-spacing: 0.14em;
  display: block;
  margin-bottom: 8px;
}
.hole h4 { margin: 0 0 6px; font-size: 15px; }
.hole p { font-size: 13px; color: var(--muted); margin: 0; }
.honest {
  margin-top: 56px;
  border-left: 2px solid var(--cyan);
  padding: 6px 0 6px 24px;
}
.honest p { margin: 8px 0; font-size: 15.5px; }
.honest .k { color: var(--cyan); font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }

/* ---------- red-team log ---------- */
.log { margin-top: 44px; display: flex; flex-direction: column; gap: 14px; }
.log-entry {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(9, 14, 26, 0.8);
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 20px;
}
.log-entry .meta { font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: 0.08em; line-height: 1.9; }
.log-entry .sev { display: block; font-weight: 700; letter-spacing: 0.14em; }
.log-entry .sev.crit { color: var(--red); }
.log-entry .sev.high { color: var(--amber); }
.log-entry h4 { margin: 0 0 6px; font-size: 16.5px; }
.log-entry p { font-size: 14.5px; margin: 4px 0; max-width: none; }
.log-entry .fix { color: #b6c2d4; }
.log-entry .fix b { color: var(--cyan); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; font-weight: 600; }
.verdict {
  margin: 40px 0;
  padding: 30px 34px;
  text-align: center;
}
.verdict blockquote {
  margin: 0;
  font-size: clamp(19px, 2.4vw, 25px);
  font-weight: 650;
  line-height: 1.45;
  color: var(--ink);
  max-width: 30ch;
  margin: 0 auto;
}
.verdict blockquote em { color: var(--amber); font-style: normal; }
.verdict .src { font-family: var(--mono); font-size: 11.5px; color: var(--faint); margin-top: 14px; letter-spacing: 0.1em; }
.invariant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px;
  margin-top: 20px;
}
.invariant-grid .chip { width: 100%; text-align: center; white-space: normal; overflow-wrap: anywhere; }

/* ---------- alpha / status ---------- */
.status-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 40px;
}
.status-cols h4 {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.status-cols .now h4 { color: var(--cyan); }
.status-cols .later h4 { color: var(--faint); }
.status-cols ul { margin: 0; padding: 0; list-style: none; }
.status-cols li {
  font-size: 14.5px;
  color: #b6c2d4;
  padding: 7px 0 7px 22px;
  position: relative;
  border-bottom: 1px dashed var(--line-soft);
}
.status-cols li:last-child { border-bottom: none; }
.status-cols .now li::before {
  content: "▸"; position: absolute; left: 2px; color: var(--cyan);
}
.status-cols .later li { color: var(--muted); }
.status-cols .later li::before {
  content: "…"; position: absolute; left: 2px; color: var(--faint);
}
.killbox {
  margin-top: 18px;
  border: 1px dashed rgba(255, 182, 72, 0.5);
  border-radius: 5px;
  padding: 18px 22px;
  font-size: 15px;
  color: #c3cede;
}
.killbox b { color: var(--amber); font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; display: block; margin-bottom: 6px; }

/* signup */
#signup { margin-top: 64px; }
.signup-panel { padding: 40px 44px; }
.signup-form { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.signup-form input[type="email"] {
  flex: 1 1 320px;
  background: #060a13;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
  padding: 12px 16px;
  outline: none;
}
.signup-form input[type="email"]:focus { border-color: var(--amber); }
.signup-note { font-size: 13px; color: var(--faint); margin-top: 14px; font-family: var(--mono); }
.signup-msg { font-family: var(--mono); font-size: 13.5px; margin-top: 16px; display: none; }
.signup-msg.ok { color: var(--cyan); display: block; }
.signup-msg.err { color: var(--amber); display: block; }

/* ---------- footer ---------- */
footer {
  border-top: 1px solid var(--line-soft);
  padding: 44px 0 60px;
  position: relative;
  z-index: 1;
}
.foot-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--muted);
}
.foot-inner .col { max-width: 44ch; }
footer a { color: var(--muted); }
footer a:hover { color: var(--ink); }

/* ---------- ship + scene animations ---------- */
.exhaust { animation: exhaust 0.9s ease-in-out infinite alternate; }
@keyframes exhaust { from { opacity: 0.35; } to { opacity: 0.95; } }

.drift-a { animation: drift-a 14s ease-in-out infinite alternate; }
.drift-b { animation: drift-b 17s ease-in-out infinite alternate; }
.drift-c { animation: drift-c 12s ease-in-out infinite alternate; }
@keyframes drift-a { from { transform: translate(0, 0) rotate(14deg); } to { transform: translate(60px, -26px) rotate(2deg); } }
@keyframes drift-b { from { transform: translate(0, 0) rotate(-20deg); } to { transform: translate(-48px, 30px) rotate(-6deg); } }
@keyframes drift-c { from { transform: translate(0, 0) rotate(160deg); } to { transform: translate(38px, 22px) rotate(184deg); } }

.rogue { animation: rogue 7s ease-in infinite; }
@keyframes rogue {
  0% { transform: translate(0, 0) rotate(18deg); opacity: 1; }
  72% { transform: translate(340px, 96px) rotate(24deg); opacity: 1; }
  76% { transform: translate(352px, 100px) rotate(24deg); opacity: 0; }
  100% { transform: translate(352px, 100px) rotate(24deg); opacity: 0; }
}
.impact { animation: impact 7s ease-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes impact {
  0%, 71% { opacity: 0; transform: scale(0.4); }
  76% { opacity: 1; transform: scale(1); }
  92%, 100% { opacity: 0; transform: scale(1.7); }
}

/* long-haul timeline (coordinated 20s loop) */
.lh-scout { animation: lh-scout 20s linear infinite; }
@keyframes lh-scout {
  0% { transform: translate(0, 0); }
  40% { transform: translate(690px, -36px); }
  60% { transform: translate(690px, -36px); }
  100% { transform: translate(30px, 14px); }
}
.lh-carrier1 { animation: lh-carrier1 20s linear infinite; }
@keyframes lh-carrier1 {
  0%, 42% { opacity: 1; }
  47%, 100% { opacity: 0; }
}
.lh-static { animation: lh-static 20s linear infinite; transform-origin: center; transform-box: fill-box; }
@keyframes lh-static {
  0%, 41% { opacity: 0; }
  43% { opacity: 1; }
  46% { opacity: 0.5; }
  48%, 100% { opacity: 0; }
}
.lh-carrier2 { animation: lh-carrier2 20s linear infinite; }
@keyframes lh-carrier2 {
  0%, 52% { opacity: 0; }
  60%, 100% { opacity: 1; }
}
.lh-beam { animation: lh-beam 20s linear infinite; }
@keyframes lh-beam {
  0%, 53% { opacity: 0; }
  56%, 66% { opacity: 0.9; }
  70%, 100% { opacity: 0; }
}
.lh-report { animation: lh-report 20s linear infinite; }
@keyframes lh-report {
  0%, 93% { opacity: 0; }
  97%, 100% { opacity: 1; }
}

/* harbormaster loop (12s) */
.hb-good { animation: hb-good 12s linear infinite; }
@keyframes hb-good {
  0% { transform: translate(0, 0); opacity: 0; }
  6% { opacity: 1; }
  38% { transform: translate(360px, 0); opacity: 1; }
  46% { transform: translate(430px, 0); opacity: 1; }
  54%, 100% { transform: translate(470px, 0); opacity: 0; }
}
.hb-cargo { animation: hb-cargo 12s linear infinite; }
@keyframes hb-cargo {
  0%, 46% { opacity: 0; transform: translate(0, 0); }
  50% { opacity: 1; }
  62% { opacity: 1; transform: translate(126px, -20px); }
  66%, 100% { opacity: 0; transform: translate(126px, -20px); }
}
.hb-bad { animation: hb-bad 12s linear infinite; }
@keyframes hb-bad {
  0%, 48% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  54% { opacity: 1; }
  76% { transform: translate(360px, 0) rotate(0deg); opacity: 1; }
  82% { transform: translate(392px, 34px) rotate(30deg); opacity: 1; }
  94% { transform: translate(420px, 120px) rotate(38deg); opacity: 1; }
  97%, 100% { transform: translate(420px, 120px) rotate(38deg); opacity: 0; }
}
.hb-shield { animation: hb-shield 12s linear infinite; transform-origin: center; transform-box: fill-box; }
@keyframes hb-shield {
  0%, 74% { opacity: 0; transform: scale(0.9); }
  79% { opacity: 1; transform: scale(1.05); }
  86%, 100% { opacity: 0; transform: scale(1.15); }
}
.hb-parked { animation: hb-parked 12s linear infinite; }
@keyframes hb-parked {
  0%, 92% { opacity: 0; }
  96%, 100% { opacity: 1; }
}

/* kill-switch squadron */
.kill-ship { transition: opacity 0.5s, filter 0.5s; }
.killed .kill-ship { opacity: 0.22; filter: grayscale(1); }
.killed .kill-ship.k1 { transition-delay: 0.1s; }
.killed .kill-ship.k2 { transition-delay: 0.3s; }
.killed .kill-ship.k3 { transition-delay: 0.5s; }
.killed .kill-ship.k0 { transition-delay: 0.9s; }
.kill-tag { opacity: 0; transition: opacity 0.4s 1.3s; font-family: var(--mono); font-size: 11px; fill: var(--red); }
.killed .kill-tag { opacity: 1; }

/* greenfield modules lighting up */
.gf-mod { opacity: 0.18; transition: opacity 0.8s; }
.in-view .gf-mod.g1 { opacity: 1; transition-delay: 0.4s; }
.in-view .gf-mod.g2 { opacity: 1; transition-delay: 1.1s; }
.in-view .gf-mod.g3 { opacity: 1; transition-delay: 1.8s; }
.in-view .gf-mod.g4 { opacity: 1; transition-delay: 2.5s; }

/* dashes flowing along supply lines */
.flow { stroke-dasharray: 6 8; animation: flow 1.6s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -14; } }

/* scanline sweep for survey */
.sweep { animation: sweep 6s ease-in-out infinite alternate; }
@keyframes sweep { from { transform: translateX(0); } to { transform: translateX(300px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .gauge-fill { width: 100% !important; }
  .gauge-events .warn, .gauge-events .halt { opacity: 1 !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .legend-grid, .holes-grid { grid-template-columns: repeat(3, 1fr); }
  .row, .row.flip { grid-template-columns: 1fr; gap: 30px; }
  .cmd-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .chip { white-space: normal; }
  section { padding: 76px 0 64px; }
  .nav-links a:not(.cta-btn) { display: none; }
  .nav-inner { gap: 12px; }
  nav .cta-btn { white-space: nowrap; padding: 7px 12px; font-size: 11px; }
  .legend-grid, .holes-grid { grid-template-columns: repeat(2, 1fr); }
  .compare-grid, .council, .judge-strip, .status-cols { grid-template-columns: 1fr; }
  .log-entry { grid-template-columns: 1fr; gap: 8px; }
  .voyage .content { padding: 32px 26px; }
  .signup-panel { padding: 28px 24px; }
  .scene3d { height: 340px; }
  .cta-scene { padding: 32px 16px; }
  .overlay-label { font-size: 10px; padding: 3px 7px; }
}