/* ============================================================
   Theatre Command — the landing page only.

   Built to the geometry of a 1440 x 900 reference frame: 60px gutters, the
   feature card at x=1120..1380, the stat rail top at y=737. Everything is
   stated in those pixels and holds its proportions on the way down.

   Loaded from web/pages/index.html alone, which is why it is free to restyle
   the shared header and override the site's palette tokens.
   ============================================================ */

:root {
  --bg: #121317;
  --ink: #FFFFFF;
  --body: #B9BDC2;
  --muted: #8C9198;
  --acid: #B8FF4F;

  --glass: rgba(255, 255, 255, .055);
  --line: rgba(255, 255, 255, .14);
  --r-card: 18px;
  --r-pill: 999px;
  --gutter: 60px;

  --f: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* site.css puts padding:76px 0 and a rule on every <section>; this page lays
   its own sections out, so that is cleared first */
section { padding: 0; border-bottom: none; }

html, body { background: var(--bg); }
body {
  background-image: none;
  color: var(--ink);
  font-family: var(--f);
}

/* This hero is a dark photograph in either theme, so the page keeps its own
   colours when the site is switched to light — site.css defines those tokens
   at [data-theme="light"], which outranks a bare :root, so they are restated
   here rather than merely set above. The toggle still works everywhere else. */
:root[data-theme="light"] {
  --void: #121317;
  --ink: #FFFFFF;
  --dim: #B9BDC2;
  --faint: #8C9198;
  --edge: rgba(255, 255, 255, .14);
}
:root[data-theme="light"] body { background: var(--bg); color: var(--ink); }
:root[data-theme="light"] .brand b,
:root[data-theme="light"] .copy h1,
:root[data-theme="light"] .feature h2,
:root[data-theme="light"] .rail .v,
:root[data-theme="light"] .feature .foot,
:root[data-theme="light"] .sec h2,
:root[data-theme="light"] .tile h3,
:root[data-theme="light"] .close h2 { color: #FFFFFF; }
:root[data-theme="light"] .copy .sub,
:root[data-theme="light"] .feature p,
:root[data-theme="light"] .rail .k,
:root[data-theme="light"] .sec .lede,
:root[data-theme="light"] .tile p { color: var(--body); }
:root[data-theme="light"] nav.main a { color: #D3D6DA; }

.wrapx { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------------------------------------------------------- header
   Absolute over the stage, and pinned to both edges — left alone it shrinks
   to its own content and the nav collapses onto the wordmark. */
header.site {
  position: absolute;
  left: 0; right: 0;
  height: 80px;
  background: transparent;
  backdrop-filter: none;
  border-bottom: none;
}
header.site .bar {
  position: relative;
  max-width: 1440px;
  padding: 0 var(--gutter);
  height: 80px;
  gap: 0;
}
.brand { gap: 8px; }
.brand svg { display: none; }
.brand b {
  font-family: var(--f);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .055em;
  color: var(--ink);
}
.brand::after {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--acid);
}

/* the links take the slack on both sides so they centre between the wordmark
   and the actions; there is no wrapper element to centre, and the auth slot
   is injected into this same nav at runtime */
nav.main { margin-left: 0; flex: 1 1 auto; gap: 34px; }
nav.main a {
  font-family: var(--f);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #D3D6DA;
  white-space: nowrap;
}
nav.main a:first-of-type { margin-left: auto; }
nav.main a:last-of-type { margin-right: auto; }
nav.main a:hover, nav.main a.on { color: var(--ink); }

nav.main .btn, nav.main .btn.pri {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--acid);
  border-radius: var(--r-pill);
  background: none;
  color: var(--acid);
  font-family: var(--f);
  font-size: 15px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  padding: 9px 20px;
}
nav.main .btn::after { content: "→"; font-size: 14px; }
nav.main .btn:hover, nav.main .btn.pri:hover { background: var(--acid); color: #101216; }
.themeBtn { border: 1px solid var(--line); border-radius: var(--r-pill);
  color: var(--muted); margin-left: 14px; }
.themeBtn:hover { color: var(--acid); border-color: var(--acid); }

/* ---------------------------------------------------------- the stage */
.stage {
  position: relative;
  height: 900px;
  min-height: 760px;
  overflow: hidden;
  isolation: isolate;
}

/* the photograph, held to greyscale and pushed down so the light sits behind
   the airframe rather than on it */
.stage .shot {
  position: absolute; inset: 0;
  /* the photo and the stage share an aspect ratio, so 'cover' cannot move the
     airframe — it is scaled past the frame and pulled up instead */
  background: url('/assets/jet.jpg?v=690b18f579') no-repeat 50% 100% / auto 150%;
  filter: grayscale(1) contrast(1.02) brightness(.92);
  z-index: -2;
}
/* the light behind the subject, then the fall-off to the page colour */
.stage::before,
.stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.stage::before {
  background:
    radial-gradient(46% 44% at 52% 40%, rgba(214, 222, 230, .30), transparent 70%),
    radial-gradient(80% 66% at 52% 44%, rgba(150, 162, 174, .16), transparent 72%);
}
.stage::after {
  background:
    linear-gradient(180deg, rgba(18,19,23,.92) 0%, rgba(18,19,23,.30) 22%, transparent 42%),
    linear-gradient(0deg, var(--bg) 2%, rgba(18,19,23,.55) 16%, transparent 40%),
    radial-gradient(80% 80% at 50% 48%, transparent 44%, rgba(18,19,23,.70));
}

.stage .frame {
  position: relative;
  height: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------------------------------------------------------- hero copy
   Positions read off the reference: eyebrow baseline 198, headline 225,
   sub 500, button 605. */
.copy { position: absolute; left: var(--gutter); top: 191px; width: 560px; }
.eyebrow {
  font-size: 12px; font-weight: 600;
  letter-spacing: .085em; text-transform: uppercase;
  color: var(--acid);
  margin: 0 0 14px;
}
.copy h1 {
  font-family: var(--f);
  font-size: 82px;
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.032em;
  color: var(--ink);
  margin: 0;
}
.copy .sub {
  position: absolute; top: 318px; left: 0;
  width: 268px;
  font-size: 16px; line-height: 1.5;
  color: var(--body);
  margin: 0;
}
.copy .cta { position: absolute; top: 424px; left: 0; }

.pill {
  display: inline-flex; align-items: center; gap: 16px;
  height: 46px; padding: 0 6px 0 26px;
  border-radius: var(--r-pill);
  background: #101216;
  color: #FFFFFF;
  font-family: var(--f); font-size: 15px; font-weight: 500;
  transition: .16s;
}
.pill:hover { background: var(--acid); color: #101216; text-decoration: none; }
.pill .arrow {
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 50%; background: var(--acid); color: #101216;
  display: grid; place-items: center; font-size: 15px;
}
.pill:hover .arrow { background: #101216; color: var(--acid); }

/* ---------------------------------------------------------- feature card
   x = 1120..1380 in the reference, so 260 wide against the 60px gutter. */
.feature {
  position: absolute; right: var(--gutter); top: 188px;
  width: 260px;
  border-radius: var(--r-card);
  background: var(--glass);
  border: 1px solid var(--line);
  backdrop-filter: blur(16px);
  padding: 20px;
}
.feature .eyebrow { font-size: 11px; margin-bottom: 10px; }
.feature h2 {
  font-family: var(--f); font-size: 19px; font-weight: 600;
  letter-spacing: -.012em; color: var(--ink); margin: 0 0 9px;
}
.feature p { font-size: 14px; line-height: 1.45; color: var(--body); margin: 0 0 16px; }
.feature .thumb { display: block; border-radius: 11px; overflow: hidden; }
.feature .thumb img { width: 100%; height: 224px; object-fit: cover; object-position: 30% 40%; display: block; }
.feature .foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 14px; font-weight: 500; color: var(--ink);
}
.feature .foot:hover { text-decoration: none; }
.feature .foot em { font-style: normal; color: var(--acid); font-size: 16px; }

/* ---------------------------------------------------------- stat rail
   Top edge at y=737 in the reference, spanning gutter to gutter. */
.rail {
  position: absolute; left: var(--gutter); right: var(--gutter); top: 737px;
  border-radius: var(--r-card);
  background: var(--glass);
  border: 1px solid var(--line);
  backdrop-filter: blur(16px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.rail .cell { display: flex; align-items: center; gap: 18px; padding: 32px 30px; }
.rail .cell + .cell { border-left: 1px solid var(--line); }
.rail .ring {
  width: 44px; height: 44px; flex: 0 0 auto;
  border: 1px solid var(--acid); border-radius: 50%;
  display: grid; place-items: center;
}
.rail .ring svg { width: 20px; height: 20px; stroke: var(--acid); fill: none;
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.rail .v { font-size: 26px; font-weight: 700; letter-spacing: -.022em;
  color: var(--ink); line-height: 1.15; display: block; }
.rail .k { font-size: 13px; color: var(--body); display: block; }

/* ---------------------------------------------------------- below the fold
   The reference stops at the fold; the rest keeps to its vocabulary. */
.sec { max-width: 1440px; margin: 0 auto; padding: 120px var(--gutter) 0; }
/* "How it works" in the header lands here: the section's own top padding
   clears the sticky bar, and a little margin keeps the heading off its edge */
#model { scroll-margin-top: 20px; }
.sec h2 {
  font-size: 44px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05;
  color: var(--ink); margin: 0 0 14px; max-width: 18ch;
}
.sec .lede { font-size: 16px; line-height: 1.55; color: var(--body); margin: 0 0 44px; max-width: 52ch; }

.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tile {
  border-radius: var(--r-card);
  background: var(--glass); border: 1px solid var(--line);
  padding: 24px; display: flex; flex-direction: column;
}
.tile h3 { font-size: 18px; font-weight: 600; letter-spacing: -.012em;
  color: var(--ink); margin: 0 0 9px; }
.tile p { font-size: 14px; line-height: 1.5; color: var(--body); margin: 0 0 20px; }
.tile svg.fig { width: 100%; height: auto; display: block; margin-top: auto; }
.tile svg.fig text { font-family: var(--f-mono); font-size: 11px; letter-spacing: .05em; }

.plate { max-width: 1440px; margin: 0 auto; padding: 120px var(--gutter) 0; }
.plate figure { margin: 0; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line); }
.plate img { width: 100%; height: auto; display: block; }
.plate figcaption { font-size: 13px; color: var(--muted); margin-top: 14px; }

.close { text-align: center; padding: 130px var(--gutter) 150px; }
.close h2 { font-size: 52px; font-weight: 700; letter-spacing: -.032em;
  line-height: 1.04; color: var(--ink); margin: 0 0 28px; }

footer.site { border-top: 1px solid var(--line); margin-top: 0; }
/* the footer keeps to the landing's own grid, so its left edge lines up with
   the hero copy and the sections above it rather than a narrower column */
footer.site .wrap { max-width: 1440px; padding: 0 var(--gutter); }
footer.site nav a { font-family: var(--f); text-transform: none; letter-spacing: 0; font-size: 14px; }
.credit { font-size: 12px; color: #6B7076; margin-top: 14px; }

/* ---------------------------------------------------------- scaling down
   The hero is positioned to a 1440 frame, so below that it becomes flow. */
@media (max-width: 1180px) {
  :root { --gutter: 32px; }
  .stage { height: auto; min-height: 0; padding: 128px 0 34px; }
  .stage .frame { height: auto; }
  .copy { position: static; width: auto; max-width: 620px; }
  .copy h1 { font-size: clamp(44px, 7vw, 82px); }
  .copy .sub { position: static; width: auto; max-width: 44ch; margin: 26px 0 0; }
  .copy .cta { position: static; display: inline-flex; margin-top: 26px; }
  .feature { position: static; width: auto; max-width: 420px; margin: 40px 0 0; }
  .rail { position: static; margin-top: 40px; grid-template-columns: repeat(2, 1fr); }
  .rail .cell:nth-child(3) { border-left: none; }
  .rail .cell:nth-child(n+3) { border-top: 1px solid var(--line); }
  .sec h2, .close h2 { font-size: clamp(28px, 4.4vw, 44px); }
  .trio { grid-template-columns: 1fr; }
  .sec, .plate { padding-top: 80px; }
}
@media (max-width: 720px) {
  :root { --gutter: 20px; }
  header.site .bar { height: 68px; }
  nav.main { position: static; }
  .rail { grid-template-columns: 1fr; }
  .rail .cell + .cell { border-left: none; border-top: 1px solid var(--line); }
  .close { padding: 90px 20px 110px; }
}

/* .tile p and .eyebrow are both class-level, but `.tile p` also matches the
   element, so it outranks the accent colour — restated for the tiles. */
.tile .eyebrow { color: var(--acid); font-size: 11px; margin-bottom: 12px; }

/* ============================================================
   MOTION

   One orchestrated arrival, then the page settles. The only thing
   that keeps moving afterwards is the photograph, drifting slowly
   enough that you notice the frame is alive without it asking for
   attention. Every animation ends on an identity transform, so the
   measured layout is unchanged once it has played.
   ============================================================ */

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes riseWide {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes lift {
  from { opacity: 0; transform: translateY(30px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
/* a slow parallax breath on the photograph — 150% background height
   leaves room to travel without ever exposing an edge */
@keyframes drift {
  from { background-position: 50% 100%; background-size: auto 150%; }
  to   { background-position: 50% 92%;  background-size: auto 158%; }
}
/* the studio light strengthens as the frame settles, then holds */
@keyframes lamp {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.stage .shot {
  animation: lamp 1400ms ease-out both,
             drift 26s ease-in-out 1200ms infinite alternate;
}
.stage::before { animation: lamp 1800ms ease-out 200ms both; }

.copy .eyebrow      { animation: rise 620ms cubic-bezier(.22,.7,.3,1) 260ms both; }
.copy h1 span       { display: block; animation: riseWide 780ms cubic-bezier(.22,.7,.3,1) both; }
.copy h1 span:nth-child(1) { animation-delay: 340ms; }
.copy h1 span:nth-child(2) { animation-delay: 440ms; }
.copy .sub          { animation: rise 700ms cubic-bezier(.22,.7,.3,1) 620ms both; }
.copy .cta          { animation: rise 700ms cubic-bezier(.22,.7,.3,1) 720ms both; }
.feature            { animation: lift 860ms cubic-bezier(.22,.7,.3,1) 560ms both; }
.rail               { animation: lift 860ms cubic-bezier(.22,.7,.3,1) 780ms both; }

/* the CTA's arrow leans into a hover rather than just recolouring */
.pill .arrow { transition: background .16s, color .16s, transform .22s cubic-bezier(.22,.7,.3,1); }
.pill:hover .arrow { transform: translateX(3px); }
.feature .foot em { transition: transform .22s cubic-bezier(.22,.7,.3,1); display: inline-block; }
.feature .foot:hover em { transform: translateX(4px); }

/* the tiles' diagrams draw themselves once, when they are first seen —
   the stroke is the mechanism, so watching it drawn is the explanation.
   .is-drawn is set by the observer in the page script. */
.tile .fig [data-draw] {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
}
.tile.is-drawn .fig [data-draw] {
  animation: draw 1100ms cubic-bezier(.4,.5,.2,1) both;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* a route that is dashed by design keeps its dash pattern and travels
   instead — the dashes run the length of the leg like a track being flown */
.tile .fig [data-march] { stroke-dashoffset: var(--len); }
.tile.is-drawn .fig [data-march] { animation: draw 1300ms linear both; }

.tile .fig [data-fade] { opacity: 0; }
.tile.is-drawn .fig [data-fade] { animation: lamp 700ms ease-out 760ms both; }

@media (prefers-reduced-motion: reduce) {
  .stage .shot, .stage::before,
  .copy .eyebrow, .copy h1 span, .copy .sub, .copy .cta,
  .feature, .rail { animation: none; opacity: 1; transform: none; }
  .stage .shot { background-position: 50% 100%; background-size: auto 150%; }
  .tile .fig [data-draw], .tile .fig [data-march] { stroke-dasharray: none; stroke-dashoffset: 0; }
  .tile .fig [data-fade] { opacity: 1; }
  .pill:hover .arrow, .feature .foot:hover em { transform: none; }
}

/* the copy layer sits above the traffic */
.stage .frame { z-index: 2; }


/* ============================================================
   AESTHETIC PASS

   The page was grey-on-grey: a desaturated photograph on a neutral
   charcoal ground, with the accent appearing in five small places and
   nothing anywhere with any depth. Greyscale was the mistake — the
   photograph is a night ramp shot, and stripped of colour it reads as
   mud rather than atmosphere.

   So: the photograph is duotoned into deep navy and cold cyan rather
   than grey, the ground goes blue-black to match, light is layered
   instead of flat, the panels get real glass, and the display face
   becomes the squared technical one the simulator already uses.
   ============================================================ */

:root {
  --bg: #070A12;                 /* blue-black, not neutral charcoal */
  --ink: #F2F6FA;
  --body: #9FB0C4;
  --muted: #6B7C92;
  --acid: #C8FF4D;
  --ice:  #6FE3F5;               /* the cold second accent the photo is lit with */

  --glass: linear-gradient(180deg, rgba(140, 190, 220, .085), rgba(120, 170, 210, .028));
  --line: rgba(160, 205, 230, .16);
  --f-disp: 'Chakra Petch', var(--f);
}
:root[data-theme="light"] { --bg: #070A12; --ink: #F2F6FA; --body: #9FB0C4; }

body { background: var(--bg); }

/* ---------------------------------------------------------- the photograph
   Greyscale first so the duotone has a clean ramp to map onto, then a colour
   layer blended over it: shadows to deep navy, highlights to cold cyan. The
   blend is contained by the filter's own stacking context. */
.stage .shot {
  filter: grayscale(1) contrast(1.30) brightness(.74);
}
.stage .shot::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(158deg, #0A1730 0%, #10344B 46%, #1C6070 78%, #2E8497 100%);
  mix-blend-mode: color;
  opacity: .92;
}
/* a cold rim of light behind the airframe, and a warm one low and left so the
   frame is lit from two sides instead of evenly washed */
.stage::before {
  background:
    radial-gradient(38% 36% at 53% 34%, rgba(150, 225, 245, .30), transparent 72%),
    radial-gradient(62% 54% at 53% 42%, rgba(70, 150, 190, .20), transparent 74%),
    radial-gradient(40% 40% at 16% 82%, rgba(200, 255, 77, .07), transparent 70%);
}
.stage::after {
  background:
    linear-gradient(180deg, rgba(7,10,18,.94) 0%, rgba(7,10,18,.32) 24%, transparent 44%),
    linear-gradient(0deg, var(--bg) 1%, rgba(7,10,18,.62) 18%, transparent 44%),
    radial-gradient(82% 82% at 50% 46%, transparent 40%, rgba(7,10,18,.86));
}

/* ---------------------------------------------------------- grain
   A single fixed film grain over everything. Flat dark pages band and look
   plastic; a little noise gives the gradients somewhere to hide. */
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------- type
   Chakra Petch is already loaded for the simulator: squared, technical, and
   actually characterful where Plex Sans was only competent. */
.copy h1, .sec h2, .close h2 {
  font-family: var(--f-disp);
  font-weight: 700;
  letter-spacing: -.005em;
}
.copy h1 { font-size: 86px; line-height: .95; }
.copy h1 span:nth-child(2) { color: var(--ice); }
.feature h2, .tile h3, .rail .v { font-family: var(--f-disp); letter-spacing: 0; }
.eyebrow { font-family: var(--f-disp); letter-spacing: .16em; }

/* ---------------------------------------------------------- glass
   A lit top edge and a real drop shadow, so the panels sit above the
   photograph instead of being holes cut in it. */
.feature, .rail, .tile, .plate figure {
  background: var(--glass);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(190, 235, 255, .14),
              0 30px 70px -34px rgba(0, 0, 0, .95);
}
.feature, .rail { backdrop-filter: blur(20px) saturate(1.25); }
.feature .thumb img, .plate img { filter: saturate(1.1) contrast(1.04); }

/* the accent earns its place: the rings and the CTA arrow actually emit */
.rail .ring { box-shadow: 0 0 22px -6px var(--acid), inset 0 0 12px -8px var(--acid); }
.pill .arrow { box-shadow: 0 0 18px -4px var(--acid); }
.pill { border: 1px solid rgba(200, 255, 77, .22); background: rgba(10, 16, 26, .82); }
.eyebrow { text-shadow: 0 0 18px rgba(200, 255, 77, .35); }

/* ---------------------------------------------------------- traffic
   Smaller, colder, fewer of them — they were reading as clip art at that size. */

/* ------------------------------------------------------- aesthetic pass, 2
   The first pass got three things wrong and they are worth naming: the
   duotone washed out because the blend was not isolated to the photograph,
   the display face is wider than Plex so the headline broke to three lines,
   and a cyan headline line plus a lime accent meant two accents competing
   for the same job. */

/* the photograph is its own stacking context, so the colour layer blends
   with the image and nothing behind it */
.stage .shot {
  isolation: isolate;
  background-position: 50% 42%;
  background-size: auto 128%;
  filter: grayscale(1) contrast(1.42) brightness(.66);
}
.stage .shot::after {
  background: linear-gradient(152deg, #0A1226 0%, #0E2E4B 40%, #17607A 74%, #35A0B4 100%);
  mix-blend-mode: color;
  opacity: 1;
}
/* a second, lighter pass on the highlights only, so the rim reads as cold
   light rather than a flat tint */
.stage .shot::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(52% 46% at 50% 34%, rgba(120, 220, 250, .28), transparent 70%);
  mix-blend-mode: screen;
  z-index: 1;
}
@keyframes drift {
  from { background-position: 50% 42%; background-size: auto 128%; }
  to   { background-position: 50% 36%; background-size: auto 136%; }
}

/* one accent, not two: the headline is white and the lime does the pointing */
.copy h1 { font-size: 74px; line-height: .96; }
.copy h1 span:nth-child(2) { color: var(--ink); }
.copy { width: 640px; }

/* Those two sizes are for the 1440 frame, and sitting after the scaling-down
   rules above they won on every screen: a 640px copy block and a 74px
   headline on a 390px phone cut "the whole war" and the line under it off
   at the right edge. Below the frame the copy flows again, and the headline
   scales with the screen. */
@media (max-width: 1180px) {
  .copy { width: auto; max-width: 620px; }
  .copy h1 { font-size: clamp(36px, 10.4vw, 74px); line-height: .98; }
}


/* ------------------------------------------------------- aesthetic pass, 3
   The airframe was cropped so tight it read as an abstract metal shape, and
   its lower half was a pale mass the copy had to sit on top of. Pull back to
   show the whole aircraft, crush the exposure so it reads as a dark object
   under a cold light, and bed the copy on a real gradient rather than on
   whatever the photograph happened to be doing there. */

.stage .shot {
  background-position: 50% 44%;
  background-size: auto 106%;
  filter: grayscale(1) contrast(1.55) brightness(.44);
}
.stage .shot::after {
  background: linear-gradient(150deg, #050B18 0%, #0A2337 42%, #10485E 76%, #1E7B90 100%);
}
.stage .shot::before {
  background: radial-gradient(46% 40% at 50% 30%, rgba(130, 225, 255, .34), transparent 72%);
}
@keyframes drift {
  from { background-position: 50% 44%; background-size: auto 106%; }
  to   { background-position: 50% 39%; background-size: auto 113%; }
}

/* a bed for the copy: dark on the left, falling away to nothing by centre */
.stage::after {
  background:
    linear-gradient(90deg, rgba(5,8,16,.90) 0%, rgba(5,8,16,.62) 24%, transparent 52%),
    linear-gradient(180deg, rgba(5,8,16,.92) 0%, rgba(5,8,16,.26) 22%, transparent 42%),
    linear-gradient(0deg, var(--bg) 1%, rgba(5,8,16,.66) 17%, transparent 42%),
    radial-gradient(84% 84% at 52% 44%, transparent 42%, rgba(5,8,16,.88));
}


/* below the fold inherits the hero's light, so the sections are not flat */
.sec, .plate, .close { position: relative; }
.sec::before {
  content: "";
  position: absolute; inset: -80px 0 auto;
  height: 420px;
  pointer-events: none;
  background: radial-gradient(52% 100% at 22% 0%, rgba(60, 150, 190, .10), transparent 72%);
}
.tile:hover { border-color: rgba(200, 255, 77, .28); }
.tile { transition: border-color .2s; }


/* ------------------------------------------------------- edge to edge
   The photograph was sized by the stage's height (auto 106%), which at the
   1440 frame is a hair wider than the screen - and on anything wider than
   about 1570px stops short of both edges, leaving the airframe in a lit
   column between two dark bands. It now keeps that framing wherever it
   already covers the width, and past that point grows with the width
   instead, so the photograph always runs edge to edge.

   The slow breath moves from background-size to a transform: same
   movement, done by the compositor instead of a repaint every frame, and
   it never has to agree with the sizing rule above. */
@media (min-width: 1181px) {
  .stage .shot { background-size: max(100%, 1568px) auto; }
}
.stage .shot { transform-origin: 50% 36%; }
@keyframes drift {
  from { transform: none; }
  to   { transform: scale(1.066) translateY(-1.2%); }
}

/* the light spilling into the first section was a box as wide as the
   content column, so on a wide screen its left edge showed as a hard
   vertical line under the stat rail; it now spans the window, lit from
   the same point */
.sec::before {
  left: calc(50% - 50vw); right: calc(50% - 50vw);
  background: radial-gradient(760px 420px at calc(50% - 403px) 0%, rgba(60, 150, 190, .10), transparent 72%);
  /* and it fades in from nothing rather than starting at full strength on a
     line under the rail */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 150px);
          mask-image: linear-gradient(180deg, transparent 0, #000 150px);
}


/* ============================================================
   THE HOMEPAGE IN DAYLIGHT

   The page used to keep its dark photograph in either theme, so the
   theme switch in the header did nothing here - the one page where a
   visitor is most likely to try it. It now has a light reading of its
   own: the same airframe, printed as a pale steel duotone on a cool
   paper ground; ink headlines; the lime kept for the things you press,
   and a deeper olive wherever it has to be read as text or line.
   ============================================================ */
:root[data-theme="light"] {
  --bg: #EEF2F6;
  --ink: #0B1220;
  --body: #475569;
  --muted: #64748B;
  --acid: #4F8A10;              /* the accent as ink and line on paper */
  --lime: #B7EB3A;              /* the accent as a fill */
  --ice: #0B7F96;
  --glass: linear-gradient(180deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .52));
  --line: rgba(20, 40, 70, .12);
  /* the site's own tokens, which the header and footer read */
  --void: #EEF2F6; --dim: #3D4B61; --faint: #67768E; --edge: #C7D1DF;
}
:root[data-theme="light"] body { background: var(--bg); color: var(--ink); }
:root[data-theme="light"] body::after { opacity: .03; }

/* header */
:root[data-theme="light"] .brand b { color: var(--ink); }
:root[data-theme="light"] .brand::after { background: var(--lime); box-shadow: 0 0 0 1px rgba(79,138,16,.35); }
:root[data-theme="light"] nav.main a { color: #334155; }
:root[data-theme="light"] nav.main a:hover,
:root[data-theme="light"] nav.main a.on { color: var(--ink); }
:root[data-theme="light"] nav.main .btn,
:root[data-theme="light"] nav.main .btn.pri { border-color: var(--acid); color: var(--acid); }
:root[data-theme="light"] nav.main .btn:hover,
:root[data-theme="light"] nav.main .btn.pri:hover { background: var(--lime); border-color: var(--lime); color: #0E1A00; }
:root[data-theme="light"] .themeBtn { border-color: var(--line); color: var(--muted); }
:root[data-theme="light"] .themeBtn:hover { color: var(--acid); border-color: var(--acid); }

/* the photograph: pale steel instead of night blue */
:root[data-theme="light"] .stage .shot { filter: grayscale(1) contrast(1.08) brightness(1.2); }
:root[data-theme="light"] .stage .shot::after {
  background: linear-gradient(150deg, #F5F8FB 0%, #DCE5EE 40%, #B4C6D6 76%, #93AABE 100%);
  mix-blend-mode: color;
}
:root[data-theme="light"] .stage .shot::before {
  background: radial-gradient(46% 40% at 50% 30%, rgba(255, 255, 255, .42), transparent 72%);
  mix-blend-mode: screen;
}
:root[data-theme="light"] .stage::before {
  background:
    radial-gradient(38% 36% at 53% 34%, rgba(255, 255, 255, .38), transparent 72%),
    radial-gradient(40% 40% at 16% 82%, rgba(183, 235, 58, .10), transparent 70%);
}
/* the bed the copy sits on, in paper rather than night */
:root[data-theme="light"] .stage::after {
  background:
    linear-gradient(90deg, rgba(238,242,246,.95) 0%, rgba(238,242,246,.70) 26%, transparent 54%),
    linear-gradient(180deg, rgba(238,242,246,.92) 0%, rgba(238,242,246,.24) 22%, transparent 42%),
    linear-gradient(0deg, var(--bg) 1%, rgba(238,242,246,.66) 17%, transparent 42%),
    radial-gradient(84% 84% at 52% 44%, transparent 44%, rgba(238,242,246,.82));
}

/* copy */
:root[data-theme="light"] .copy h1,
:root[data-theme="light"] .feature h2,
:root[data-theme="light"] .rail .v,
:root[data-theme="light"] .feature .foot,
:root[data-theme="light"] .sec h2,
:root[data-theme="light"] .tile h3,
:root[data-theme="light"] .close h2 { color: var(--ink); }
:root[data-theme="light"] .copy .sub,
:root[data-theme="light"] .feature p,
:root[data-theme="light"] .rail .k,
:root[data-theme="light"] .sec .lede,
:root[data-theme="light"] .tile p { color: var(--body); }
:root[data-theme="light"] .eyebrow { color: var(--acid); text-shadow: none; }

/* the pill: ink capsule, lime disc */
:root[data-theme="light"] .pill { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
:root[data-theme="light"] .pill .arrow { background: var(--lime); color: #0E1A00; box-shadow: 0 0 0 1px rgba(79,138,16,.25); }
:root[data-theme="light"] .pill:hover { background: var(--lime); color: #0E1A00; border-color: var(--lime); }
:root[data-theme="light"] .pill:hover .arrow { background: var(--ink); color: var(--lime); }

/* glass on paper */
:root[data-theme="light"] .feature,
:root[data-theme="light"] .rail,
:root[data-theme="light"] .tile,
:root[data-theme="light"] .plate figure {
  background: var(--glass);
  border-color: var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95),
              0 26px 60px -32px rgba(25, 40, 65, .32);
}
:root[data-theme="light"] .feature,
:root[data-theme="light"] .rail { backdrop-filter: blur(20px) saturate(1.3); }
:root[data-theme="light"] .feature .foot { border-top-color: var(--line); }
:root[data-theme="light"] .feature .foot em { color: var(--acid); }
:root[data-theme="light"] .rail .cell + .cell { border-color: var(--line); }
:root[data-theme="light"] .rail .ring { border-color: var(--acid);
  box-shadow: 0 0 16px -6px rgba(123, 186, 30, .8), inset 0 0 10px -8px var(--acid); }
:root[data-theme="light"] .rail .ring svg { stroke: var(--acid); }
:root[data-theme="light"] .tile:hover { border-color: rgba(79, 138, 16, .35); }
:root[data-theme="light"] .sec::before {
  background: radial-gradient(760px 420px at calc(50% - 403px) 0%, rgba(11, 127, 150, .07), transparent 72%);
}
:root[data-theme="light"] .plate figcaption,
:root[data-theme="light"] .credit { color: var(--muted); }
/* the diagrams were drawn in light-on-dark greys; on paper they need ink */
:root[data-theme="light"] .tile svg.fig [stroke="#5A5F66"] { stroke: #7C8796; }
:root[data-theme="light"] .tile svg.fig [stroke="#3A3E44"] { stroke: #B6C0CC; }
:root[data-theme="light"] .tile svg.fig [fill="#8C9198"] { fill: #5B6677; }
:root[data-theme="light"] .tile svg.fig rect[fill="#FFFFFF"] { fill: var(--ink); }
:root[data-theme="light"] .tile svg.fig path[fill="#FFFFFF"] { fill: var(--ink); fill-opacity: .06; }
:root[data-theme="light"] footer.site { border-top-color: var(--line); }
/* below the 1440 frame the copy runs the full width of the screen, so its
   bed has to as well - on paper a pale bed that stops halfway leaves the
   right half of a sentence sitting on the airframe */
@media (max-width: 1180px) {
  :root[data-theme="light"] .stage::after {
    background:
      linear-gradient(90deg, rgba(238,242,246,.93) 0%, rgba(238,242,246,.78) 58%, rgba(238,242,246,.52) 100%),
      linear-gradient(180deg, rgba(238,242,246,.92) 0%, rgba(238,242,246,.24) 22%, transparent 42%),
      linear-gradient(0deg, var(--bg) 1%, rgba(238,242,246,.66) 17%, transparent 42%);
  }
}


/* ============================================================
   WHO GIVES THE ORDERS

   The AI commander, in the How it works section: the free version, and
   bring your own. It wears the colours the war screen gives a player's own
   model - violet into cyan - which nothing else on the page uses, so the
   one block about choosing your own mind reads as its own thing.
   ============================================================ */
#ai { scroll-margin-top: 90px; }
.brains {
  margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 36px;
  align-items: center; padding: 34px; border-radius: var(--r-card); border: 1px solid transparent;
  background: linear-gradient(var(--bg), var(--bg)) padding-box,
              linear-gradient(115deg, rgba(139, 92, 246, .75), rgba(34, 211, 238, .6)) border-box;
  box-shadow: 0 0 60px -28px rgba(139, 92, 246, .8);
}
.brains .eyebrow { background: linear-gradient(100deg, #A78BFA, #22D3EE); -webkit-background-clip: text;
  background-clip: text; color: transparent; text-shadow: none; font-size: 11px; margin-bottom: 12px; }
.brains h3 { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); margin: 0 0 12px; }
.bCopy > p { font-size: 15px; line-height: 1.6; color: var(--body); margin: 0 0 18px; max-width: 58ch; }
.bCopy .bFine { font-size: 13px; color: var(--muted); }
.bMakers { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.bMakers li { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 12.5px;
  letter-spacing: .02em; height: 36px; padding: 0 14px 0 11px; border-radius: 999px; color: var(--ink); background: var(--glass);
  box-shadow: 0 0 0 1px var(--line); transition: box-shadow .15s ease-out, transform .15s ease-out; }
.bMakers li:hover { box-shadow: 0 0 0 1px rgba(167, 139, 250, .6), 0 10px 24px -14px rgba(139, 92, 246, .9); transform: translateY(-1px); }
.bMakers .aiLogo { width: 18px; height: 18px; flex: 0 0 auto; }
.brains .aiLogo.mono { color: var(--ink); }
.bWho span .aiLogo { width: 15px; height: 15px; margin-right: 6px; vertical-align: -3px; }
.bFree .aiLogo { width: 15px; height: 15px; }
.bDuel { position: relative; padding: 18px; border-radius: 16px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)); }
.bTop { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.bBadge { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px;
  font-family: var(--f-disp); font-size: 10px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: #C4B5FD;
  border: 1.5px solid transparent;
  background: linear-gradient(#10131A, #10131A) padding-box, linear-gradient(100deg, #8B5CF6, #22D3EE) border-box;
  box-shadow: 0 0 22px -7px rgba(139, 92, 246, .9); }
.bBadge i { width: 7px; height: 7px; border-radius: 50%; background: #5FE39A; box-shadow: 0 0 8px #5FE39A; }
.bKey { font-family: var(--f-disp); font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  padding: 5px 8px; border-radius: 999px; color: #fff; background: linear-gradient(100deg, #8B5CF6, #22D3EE); }
.bRow { padding: 14px; border-radius: 12px; border: 1px solid var(--line); }
.bRow.blue { background: linear-gradient(180deg, rgba(79, 209, 224, .08), transparent); box-shadow: inset 3px 0 0 #4FD1E0; }
.bRow.red { background: linear-gradient(180deg, rgba(255, 92, 77, .08), transparent); box-shadow: inset 3px 0 0 #FF5C4D; }
.bWho { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.bWho b { font-family: var(--f-disp); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.bRow.blue .bWho b { color: #4FD1E0; } .bRow.red .bWho b { color: #FF5C4D; }
.bWho span { font-family: var(--f-mono); font-size: 13px; font-weight: 600;
  background: linear-gradient(100deg, #A78BFA, #22D3EE); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bRow p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.bMix { display: flex; height: 6px; border-radius: 999px; overflow: hidden; gap: 2px; }
.bMix i { width: var(--w); background: var(--c); }
.bVs { text-align: center; margin: 8px 0; font-family: var(--f-disp); font-size: 10px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted); }
.bLegend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 11.5px; color: var(--muted); }
.bLegend span { display: inline-flex; align-items: center; gap: 6px; }
.bLegend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.bFree { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 12.5px; color: var(--muted);
  display: flex; align-items: center; gap: 10px; }
.bFree span { font-family: var(--f-disp); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #FFB020; padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(255, 176, 32, .5); }
@media (max-width: 1180px) {
  .brains { grid-template-columns: 1fr; padding: 26px; gap: 26px; }
}
@media (max-width: 720px) {
  .brains { padding: 20px; }
  .brains h3 { font-size: 24px; }
}
:root[data-theme="light"] .brains { background: linear-gradient(var(--bg), var(--bg)) padding-box,
  linear-gradient(115deg, rgba(124, 58, 237, .7), rgba(8, 145, 178, .6)) border-box; box-shadow: 0 0 50px -26px rgba(124, 58, 237, .6); }
:root[data-theme="light"] .brains .eyebrow { background: linear-gradient(100deg, #6D28D9, #0E7490); -webkit-background-clip: text; background-clip: text; }
:root[data-theme="light"] .brains h3 { color: var(--ink); }
:root[data-theme="light"] .bDuel { background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .55)); }
:root[data-theme="light"] .bBadge { color: #6D28D9; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(100deg, #7C3AED, #0891B2) border-box; }
:root[data-theme="light"] .bWho span { background: linear-gradient(100deg, #6D28D9, #0E7490); -webkit-background-clip: text; background-clip: text; }
:root[data-theme="light"] .bRow.blue .bWho b { color: #0B7F96; } :root[data-theme="light"] .bRow.red .bWho b { color: #C0392B; }
:root[data-theme="light"] .bFree span { color: #9A6100; border-color: rgba(154, 97, 0, .45); }