/* =========================================================================
   Rexo Rail — v2 "refined dark". Built to the standard of Linear / Stripe /
   Vercel: restraint, typographic craft, one disciplined accent, tabular money,
   generous 8pt spacing, hairline borders, purposeful motion only.
   ========================================================================= */

:root {
  /* Surfaces — near-black, layered so panels read as raised */
  --bg: #0a0b0f;
  --bg-2: #0c0e13;
  --elev: #12141b;
  --elev-2: #171a22;

  /* Text — crisp, not pure white; tight tonal steps */
  --text: #f5f7fb;
  --text-2: #b3bccb;
  --text-3: #7f8a9c;

  /* Hairlines */
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);

  /* The ONE accent — RAIL blue. Used on CTAs, links, focus, key highlights only. */
  --accent: #428dcc;
  --accent-2: #65a7da;
  --accent-ink: #061024;
  --accent-soft: rgba(66, 141, 204, 0.12);
  --accent-glow: rgba(66, 141, 204, 0.35);

  /* Functional only */
  --pos: #4ade80;
  --brand-navy: #12233f;

  /* Signal & Steel — color grammar: BLUE = the operator (you/Rexo), never a status;
     ASPECTS = the honest state of the money; STEEL = structure. */
  --signal-clear: #4ade80;                        /* green — on time / running / cleared */
  --signal-clear-glow: rgba(74, 222, 128, 0.50);
  --signal-clear-soft: rgba(74, 222, 128, 0.06);
  --signal-approach: #e0a34a;                     /* amber — the one meaningful caution (Chasing) */
  --signal-approach-glow: rgba(224, 163, 74, 0.42);
  --signal-approach-soft: rgba(224, 163, 74, 0.12);
  --signal-stop: #e5484d;                         /* red — reserved; = the chaos you left */
  --signal-stop-soft: rgba(229, 72, 77, 0.06);
  --lunar: #dbe6f2;                               /* live pip / scrubber spark */
  --steel-hi: #171a22;
  --steel-lo: #0f1117;
  --panel: linear-gradient(180deg, #171a22, #0f1117);

  /* Motion — ONE coupling settle everywhere (critically damped, overshoot-free) */
  --ease-couple: cubic-bezier(0.16, 1, 0.3, 1);
  /* Scroll scalar 0 (dusk) → 1 (dawn); JS drives it, reduced-motion pins it */
  --run: 0;

  --font-display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --maxw: 1120px;
  --r: 14px;
  --r-sm: 9px;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 40px 80px -40px rgba(0, 0, 0, 0.8), 0 12px 30px -18px rgba(5, 10, 25, 0.9);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text-2);
  background: transparent;
  line-height: 1.6;
  font-feature-settings: "cv05" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* NIGHTSHIFT — the overnight run, as light. Three fixed layers cross-fade by
   opacity off a single --run (0 dusk -> 1 dawn), driven by scroll. GPU-only,
   sits BEHIND content so text stays crisp. */
.night { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.night span { position: absolute; inset: 0; display: block; will-change: opacity; }
.n-dusk { opacity: clamp(0, calc(1 - var(--run) * 2.9), 1); background:
  radial-gradient(120% 110% at 84% -12%, rgba(78, 60, 128, 0.24), transparent 55%),
  radial-gradient(80% 60% at 3% 6%, rgba(66, 141, 204, 0.16), transparent 60%); }
.n-deep { opacity: clamp(0, calc(var(--run) * 2.1), 1); background:
  linear-gradient(180deg, rgba(20, 34, 74, 0.58), rgba(14, 23, 50, 0.24) 46%, transparent 82%),
  radial-gradient(95% 70% at 50% 30%, rgba(28, 48, 98, 0.30), transparent 68%); }
.n-dawn { opacity: clamp(0, calc((var(--run) - 0.72) * 3.4), 1); background:
  linear-gradient(0deg, rgba(214, 150, 92, 0.13), rgba(214, 150, 92, 0.04) 16%, transparent 32%),
  linear-gradient(0deg, rgba(66, 141, 204, 0.16), transparent 36%); }

h1, h2, h3, h4 { color: var(--text); margin: 0; font-weight: 640; letter-spacing: -0.02em; line-height: 1.08; text-wrap: balance; }
p { margin: 0; }
a { color: var(--accent-2); text-decoration: none; }
svg { display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; }
[id] { scroll-margin-top: 90px; }
.num { font-family: var(--font-mono); font-feature-settings: "tnum" 1; letter-spacing: -0.01em; }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--accent); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 600; transition: top 0.2s; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Eyebrow — quiet mono kicker */
.eyebrow { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); margin: 0 0 18px; display: inline-flex; align-items: center; gap: 9px; }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }

/* ---------------------------------------------------------------- Wordmark */
.wordmark { display: inline-flex; align-items: center; line-height: 1; white-space: nowrap; }
.wordmark img { display: block; width: auto; }
.wm-sm img { height: 26px; }
.site-header .wm-sm img { height: 30px; }
.wm-hero { margin-bottom: 30px; }
.wm-hero img { height: clamp(48px, 6.5vw, 74px); }

/* ---------------------------------------------------------------- Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font); font-weight: 560; font-size: 0.95rem; letter-spacing: -0.01em; padding: 10px 18px; border-radius: var(--r-sm); border: 1px solid transparent; cursor: pointer; transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease; white-space: nowrap; }
.btn-lg { padding: 13px 24px; font-size: 1rem; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 8px 22px -10px var(--accent-glow); }
.btn-primary:hover { background: var(--accent-2); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 12px 28px -10px var(--accent-glow); }
.btn-secondary { background: rgba(255, 255, 255, 0.03); color: var(--text); border-color: var(--line-2); }
.btn-secondary:hover { background: rgba(255, 255, 255, 0.07); border-color: var(--text-3); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { color: var(--text); }
.btn .arrow { transition: transform 0.16s ease; }
.btn:hover .arrow { transform: translateX(2px); }

/* ---------------------------------------------------------------- Header */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(10, 11, 15, 0.7); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid transparent; transition: border-color 0.2s ease, background 0.2s ease; }
.site-header.scrolled { border-color: var(--line); background: rgba(10, 11, 15, 0.85); }
.header-inner { display: flex; align-items: center; gap: 22px; height: 66px; }
.nav-desktop { display: flex; gap: 28px; margin-left: 18px; }
.nav-desktop a { color: var(--text-3); font-weight: 500; font-size: 0.925rem; letter-spacing: -0.01em; transition: color 0.15s ease; }
.nav-desktop a:hover { color: var(--text); }
.header-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.header-login { display: none; }  /* mobile-only login button (desktop uses .header-cta) */
.menu-toggle { display: none; margin-left: auto; width: 42px; height: 42px; border: 1px solid var(--line-2); background: var(--elev); border-radius: 10px; cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.menu-toggle span { width: 18px; height: 1.5px; background: var(--text); border-radius: 2px; transition: 0.2s; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.mobile-nav { display: none; flex-direction: column; gap: 2px; padding: 8px 24px 20px; border-top: 1px solid var(--line); background: rgba(10, 11, 15, 0.97); }
.mobile-nav a:not(.btn) { color: var(--text); font-weight: 500; padding: 13px 2px; border-bottom: 1px solid var(--line); }
.mobile-nav-cta { display: flex; gap: 10px; margin-top: 14px; }
.mobile-nav-cta .btn { flex: 1; }

/* ---------------------------------------------------------------- Hero */
.hero { position: relative; padding: clamp(56px, 9vw, 104px) 0 clamp(48px, 7vw, 80px); }
.hero-grid { display: grid; grid-template-columns: 1fr 1.02fr; gap: clamp(36px, 5vw, 68px); align-items: center; }
.hero-h1 { font-size: clamp(2.5rem, 5.2vw, 3.9rem); font-weight: 640; letter-spacing: -0.035em; line-height: 1.02; color: var(--text); max-width: 15ch; }
.hero-h1 em { font-style: normal; color: var(--accent-2); }
.hero-sub { margin: 22px 0 30px; font-size: clamp(1.08rem, 1.4vw, 1.22rem); font-weight: 400; color: var(--text-2); max-width: 46ch; letter-spacing: -0.01em; }
.hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero-trust { margin-top: 30px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 0.86rem; color: var(--text-3); }
.hero-trust .divider { width: 1px; height: 15px; background: var(--line-2); }
.hero-trust strong { color: var(--text-2); font-weight: 600; }

/* Product visual — live control center (rail-dispatch board) */
.board-wrap { position: relative; min-width: 0; }
.board { position: relative; z-index: 2; min-width: 0; background: linear-gradient(180deg, var(--elev), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.board-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.board-plate { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.board-live { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--lunar); box-shadow: 0 0 0 2px rgba(219, 230, 242, 0.10), 0 0 9px rgba(219, 230, 242, 0.5); animation: dotPulse 3.6s ease-in-out infinite; }
.board-cash { padding: 15px 18px 14px; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 12px; row-gap: 3px; border-bottom: 1px solid var(--line); }
.board-cash-label { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); }
.board-cash-fig { grid-column: 1; font-family: var(--font-mono); font-feature-settings: "tnum" 1; font-size: clamp(1.7rem, 2.7vw, 2.15rem); font-weight: 600; color: var(--text); letter-spacing: -0.02em; }
.board-cash-sub { grid-column: 2; justify-self: end; align-self: end; font-family: var(--font-mono); font-size: 0.72rem; color: var(--pos); white-space: nowrap; }
.board-grid { padding: 4px 0; }
.brow { display: grid; grid-template-columns: minmax(0, 1fr) 104px minmax(0, 0.94fr) minmax(0, 0.6fr); align-items: center; gap: 12px; padding: 10px 18px; }
.brow .c-conn { overflow: hidden; text-overflow: ellipsis; }
.board-grid .brow + .brow { border-top: 1px solid var(--line); }
.brow-head span { font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); }
.brow-head .c-conn { text-align: right; }
.c-line { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.c-line b { font-size: 0.9rem; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.c-line .bamt { font-family: var(--font-mono); font-feature-settings: "tnum" 1; font-style: normal; font-size: 0.74rem; color: var(--text-3); white-space: nowrap; }
.c-status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 0.75rem; white-space: nowrap; }
/* Signal lamps — a two-layer aspect head (inner ring + outer bloom) */
.sdot { position: relative; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--lamp, var(--signal-clear)); box-shadow: 0 0 0 3px var(--lamp-soft, var(--signal-clear-soft)), 0 0 15px var(--lamp-glow, var(--signal-clear-glow)); }
.sdot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--lamp, var(--signal-clear)); opacity: 0; pointer-events: none; }
.sdot.rang::after { animation: signalRing 520ms ease-out; }
.s-go { color: var(--signal-clear); }
.s-go .sdot { --lamp: var(--signal-clear); --lamp-soft: var(--signal-clear-soft); --lamp-glow: var(--signal-clear-glow); }
.s-chase { color: var(--signal-approach); }
.s-chase .sdot { --lamp: var(--signal-approach); --lamp-soft: var(--signal-approach-soft); --lamp-glow: var(--signal-approach-glow); animation: dotPulse 2.2s ease-in-out infinite; }
@keyframes signalRing { from { opacity: 0.7; transform: scale(1); } to { opacity: 0; transform: scale(2.7); } }
/* neutral "waiting" aspect — a dark lamp, not yet lit (Queued / Scheduled) */
.s-wait { color: var(--text-3); }
.s-wait .sdot { --lamp: #454f61; --lamp-soft: rgba(130, 148, 178, 0.10); --lamp-glow: rgba(130, 148, 178, 0.16); animation: none; }
.slabel { display: inline-block; }

/* cash resolve — pending (dim, amber) -> confirmed (crisp, green) */
.board-cash-fig { transition: color 0.4s ease; }
.board-cash.is-pending .board-cash-fig { color: var(--text-3); }
.board-cash.is-pending .board-cash-sub { color: var(--signal-approach); }

/* THE RUN SCRUBBER — pull it to replay last night's logged overnight run */
.scrubber { border-top: 1px solid var(--line); padding: 12px 18px 13px; display: flex; flex-direction: column; gap: 8px; }
.scrub-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.03em; text-transform: uppercase; }
.scrub-stamp { color: var(--text-3); white-space: nowrap; }
.scrub-clock { color: var(--accent-2); font-feature-settings: "tnum" 1; white-space: nowrap; }
.scrub { -webkit-appearance: none; appearance: none; width: 100%; height: 20px; background: transparent; cursor: grab; margin: 0; }
.scrub:active { cursor: grabbing; }
.scrub::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--accent) 0 var(--fill, 100%), var(--line-2) var(--fill, 100%) 100%); }
.scrub::-moz-range-track { height: 3px; border-radius: 3px; background: var(--line-2); }
.scrub::-moz-range-progress { height: 3px; border-radius: 3px; background: var(--accent); }
.scrub::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -7px; width: 17px; height: 17px; border-radius: 50%; background: var(--lunar); border: 3px solid var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), 0 0 14px var(--accent-glow); transition: box-shadow 0.2s ease; }
.scrub::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--lunar); border: 3px solid var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), 0 0 14px var(--accent-glow); }
.scrub:hover::-webkit-slider-thumb, .scrub:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px var(--accent-soft), 0 0 20px var(--accent-glow); }
.scrub:focus-visible { outline: none; }
.scrub.hint::-webkit-slider-thumb { animation: scrubHint 1.6s ease-in-out 2; }
@keyframes scrubHint { 0%, 100% { box-shadow: 0 0 0 4px var(--accent-soft), 0 0 14px var(--accent-glow); } 50% { box-shadow: 0 0 0 8px var(--accent-soft), 0 0 24px var(--accent-glow); } }
.scrub-scale { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.04em; color: var(--text-3); opacity: 0.7; }

/* screen-reader-only summary (board is now a labelled group, not an image) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.c-next { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-2); white-space: nowrap; }
.c-conn { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-2); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flip { display: inline-block; transform-origin: center; backface-visibility: hidden; }
.flip.flipping { animation: flipFig 0.42s ease; }
.board-ticker { display: flex; align-items: stretch; border-top: 1px solid var(--accent-soft); background: rgba(66, 141, 204, 0.09); overflow: hidden; white-space: nowrap; }
.ticker-badge { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; font-family: var(--font-mono); font-size: 0.73rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: #fff; background: var(--accent); box-shadow: 6px 0 20px -9px var(--accent-glow); animation: trainPulse 2.8s ease-in-out infinite; }
.ticker-badge svg { width: 16px; height: 16px; flex: none; }
.ticker-viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; display: flex; align-items: center; }
.ticker-track { display: inline-block; white-space: nowrap; font-family: var(--font-mono); font-size: 0.79rem; letter-spacing: 0.05em; color: var(--accent-2); padding: 11px 16px; will-change: transform; animation: ticker 24s linear infinite; }
.ticker-track .good { color: var(--pos); font-weight: 500; }

/* Legend — the five parts; click to light that part of the board */
.board-legend { margin-top: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.legend-label { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-3); }
.legend-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.legend-tag { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.01em; color: var(--text-2); background: var(--elev); border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px; cursor: pointer; transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; }
.legend-tag:hover { color: var(--text); border-color: var(--line-2); }
.legend-tag[aria-pressed="true"] { color: #fff; background: var(--accent); border-color: var(--accent); box-shadow: 0 8px 20px -8px var(--accent-glow); }
.legend-def { max-width: 62ch; min-height: 2.7em; margin: 0 auto; color: var(--text-2); font-size: 1rem; line-height: 1.5; letter-spacing: -0.01em; }

/* Lit state — highlight one part, dim the rest */
.board.dim span,
.board.dim .board-head,
.board.dim .board-cash,
.board.dim .board-ticker { opacity: 0.26; transition: opacity 0.3s ease, color 0.3s ease; }
.board.dim .hot,
.board.dim .hot span { opacity: 1; }
.board.dim .c-line.hot b,
.board.dim .c-status.hot,
.board.dim .c-conn.hot,
.board.dim .brow-head span.hot { color: var(--accent-2); }
.board.lit-frame { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-glow), var(--shadow); }

/* ---------------------------------------------------------------- Sections */
.section { padding: clamp(72px, 11vw, 132px) 0; position: relative; }
.section-line { border-top: 1px solid var(--line); }

.section-head { max-width: 640px; margin-bottom: clamp(40px, 6vw, 64px); }
.section-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 640; letter-spacing: -0.03em; }
.lead { margin-top: 18px; font-size: clamp(1.06rem, 1.3vw, 1.2rem); color: var(--text-2); max-width: 56ch; letter-spacing: -0.01em; }

/* Problem */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.card { position: relative; background: var(--panel); padding: 30px 28px; overflow: hidden; transition: background 0.18s ease; }
/* faint red-lantern pool at the base — the chaos you're leaving behind */
.card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 82% at 50% 122%, var(--signal-stop-soft), transparent 60%); pointer-events: none; }
.card > * { position: relative; }
.card:hover { background: linear-gradient(180deg, #1a1e27, #111319); }
.card-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-2); margin-bottom: 20px; }
.card-ico svg { width: 21px; height: 21px; }
.card h3 { font-size: 1.16rem; font-weight: 600; margin-bottom: 10px; letter-spacing: -0.02em; }
.card p { color: var(--text-2); font-size: 0.96rem; }

/* Features */
.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 48px; }
.feature { display: flex; gap: 16px; }
.feat-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-2); }
.feat-ico svg { width: 22px; height: 22px; }
.feat-body h3 { font-size: 1.12rem; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.02em; }
.feat-body p { color: var(--text-2); font-size: 0.96rem; }
.feat-body p .pain { color: var(--text-3); }

/* THE DEPARTURE — the board's five lines, expanded into the product */
.dep-list { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; gap: 1px; background: var(--line); }
.dep { background: var(--panel); display: grid; grid-template-columns: 132px minmax(0, 0.9fr) minmax(0, 1.55fr); align-items: center; gap: 26px; padding: 23px 28px; transition: background 0.18s ease; }
.dep:hover { background: linear-gradient(180deg, #1a1e27, #111319); }
.dep-lamp { justify-self: start; font-size: 0.78rem; }
.dep-name { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.dep-name h3 { font-size: 1.14rem; font-weight: 600; letter-spacing: -0.02em; }
.dep-chip { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.01em; color: var(--text-2); background: var(--elev); border: 1px solid var(--line); border-radius: 7px; padding: 3px 9px; white-space: nowrap; }
.dep-copy { color: var(--text-2); font-size: 0.97rem; min-width: 0; }
.dep-note { display: block; margin-top: 8px; font-size: 0.85rem; color: var(--text-3); }
.dep.dep-live { box-shadow: inset 3px 0 0 var(--accent); }
.dep-foot { margin-top: 18px; text-align: center; color: var(--text-3); font-size: 0.92rem; }
/* shadow-ledger board tweaks */
.board-cash-fig.board-cash-text { font-family: var(--font); font-size: 1.22rem; font-weight: 600; color: var(--signal-clear); letter-spacing: -0.01em; }
.illus-tag { font-style: normal; color: var(--text-3); }

/* How it's built — custom, wired, monitored */
.built-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.built-grid-4 { grid-template-columns: repeat(2, 1fr); }
.pillar-micro { margin-top: 14px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.01em; color: var(--text-3); }
.pillar { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 30px 28px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045); transition: border-color 0.18s ease, background 0.18s ease; }
.pillar:hover { border-color: var(--line-2); background: linear-gradient(180deg, #1b1f28, #12141b); }
.pillar-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-2); margin-bottom: 20px; }
.pillar-ico svg { width: 23px; height: 23px; }
.pillar h3 { font-size: 1.16rem; font-weight: 600; margin-bottom: 10px; letter-spacing: -0.02em; }
.pillar p { color: var(--text-2); font-size: 0.96rem; }
.pillar strong { color: var(--text); font-weight: 600; }

/* Value */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.value { background: var(--bg); padding: 32px 28px; }
.value-num { font-family: var(--font-mono); font-size: 0.82rem; color: var(--accent-2); letter-spacing: 0.04em; }
.value h3 { font-size: 1.2rem; font-weight: 600; margin: 16px 0 10px; letter-spacing: -0.02em; }
.value p { color: var(--text-2); font-size: 0.96rem; }

/* CTA */
.cta { position: relative; overflow: hidden; text-align: center; padding: clamp(80px, 11vw, 130px) 0; border-top: 1px solid var(--line); }
.cta::before { content: ""; position: absolute; left: 50%; top: -40%; transform: translateX(-50%); width: 820px; height: 820px; background: radial-gradient(closest-side, rgba(66, 141, 204, 0.14), transparent 70%); pointer-events: none; }
.cta-inner { max-width: 640px; margin: 0 auto; position: relative; z-index: 2; }
.cta-inner h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 640; letter-spacing: -0.035em; }
.cta-inner p { margin: 18px auto 32px; color: var(--text-2); font-size: 1.14rem; max-width: 46ch; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta-note { margin-top: 26px; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--text-3); text-transform: uppercase; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 56px 0 34px; color: var(--text-3); position: relative; z-index: 2; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 44px; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.footer-tag { margin-top: 16px; color: var(--text-3); font-size: 0.94rem; max-width: 40ch; }
.footer-col h4 { color: var(--text-2); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 15px; font-weight: 600; }
.footer-col { display: flex; flex-direction: column; gap: 11px; }
.footer-col a { color: var(--text-3); font-size: 0.94rem; }
.footer-col a:hover { color: var(--text); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 24px; font-size: 0.88rem; flex-wrap: wrap; }
.footer-bottom p { color: var(--text-2); }
.footer-bottom .fine { color: var(--text-3); }

/* Reveal — the COUPLING settle: rows arrive head-to-tail like cars coupling */
html.js .reveal { opacity: 0; transform: translateY(15px); transition: opacity 0.52s ease, transform 0.52s var(--ease-couple); transition-delay: calc(var(--i, 0) * 70ms); }
html.js .dep.reveal { transform: translateX(-20px); }  /* couple in from the left, head to tail */
html.js .reveal.in { opacity: 1; transform: none; }

/* --------------------------------------- Throw the switch (interactive illustration) */
.switcher { margin: 42px 0 10px; padding: 26px 26px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); position: relative; overflow: hidden; }
.switcher::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 82% at 12% 0%, rgba(66, 141, 204, 0.09), transparent 62%); pointer-events: none; }
.switcher-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; }
.switcher-kick { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-2); }
.switcher-illus { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }
.switcher-sub { margin: 11px 0 24px; color: var(--text-2); max-width: 62ch; font-size: 0.98rem; position: relative; }
.switcher-stage { display: grid; grid-template-columns: minmax(230px, 288px) 1fr; gap: 32px; align-items: center; position: relative; }

.sw-throat { display: flex; flex-direction: column; gap: 20px; }
.sw-car { position: relative; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(180deg, var(--steel-hi), var(--steel-lo)); padding: 15px 16px; box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.8); transition: border-color 0.4s ease, box-shadow 0.4s ease; }
.sw-car[data-state="ok"] { border-color: rgba(74, 222, 128, 0.42); box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.16), 0 12px 34px -22px rgba(74, 222, 128, 0.5); }
.sw-car[data-state="held"] { border-color: rgba(224, 163, 74, 0.46); box-shadow: 0 0 0 1px rgba(224, 163, 74, 0.16), 0 12px 34px -22px rgba(224, 163, 74, 0.5); }
.sw-car-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sw-car-vendor { font-weight: 600; color: var(--text); font-size: 1.02rem; }
.sw-car-amt { font-family: var(--font-mono); font-size: 1rem; color: var(--text); font-variant-numeric: tabular-nums; }
.sw-car-sub { margin-top: 6px; font-family: var(--font-mono); font-size: 0.77rem; color: var(--text-3); letter-spacing: 0.01em; transition: color 0.4s ease; }
.sw-car[data-state="ok"] .sw-car-sub { color: var(--text-2); }
.sw-car[data-state="held"] .sw-car-sub { color: var(--signal-approach); }
.sw-stamp { margin-top: 12px; display: none; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.73rem; letter-spacing: 0.05em; text-transform: uppercase; }
.sw-car[data-state="ok"] .sw-stamp, .sw-car[data-state="held"] .sw-stamp { display: inline-flex; animation: swStamp 0.42s var(--ease-couple); }
.sw-car[data-state="ok"] .sw-stamp { color: var(--signal-clear); }
.sw-car[data-state="held"] .sw-stamp { color: var(--signal-approach); }
.sw-stamp::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }
@keyframes swStamp { from { opacity: 0; transform: scale(0.92) translateY(4px); } to { opacity: 1; transform: none; } }

.sw-lever { display: flex; align-items: center; gap: 15px; background: none; border: 0; cursor: pointer; padding: 6px 0; text-align: left; }
.sw-lever-slot { position: relative; width: 22px; height: 56px; border-radius: 999px; background: var(--steel-lo); border: 1px solid var(--line); box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.6); flex: none; }
.sw-lever-arm { position: absolute; left: 50%; bottom: 9px; width: 6px; height: 42px; border-radius: 6px; background: linear-gradient(180deg, #8f9cb0, #59647a); transform-origin: bottom center; transform: translateX(-50%) rotate(-34deg); transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }
.sw-lever-knob { position: absolute; top: -7px; left: 50%; width: 15px; height: 15px; border-radius: 50%; transform: translateX(-50%); background: radial-gradient(circle at 35% 30%, #d2dbe8, #6f7c90); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
.sw-lever.thrown .sw-lever-arm { transform: translateX(-50%) rotate(32deg); }
.sw-lever-txt { font-weight: 600; color: var(--text); font-size: 0.98rem; }
.sw-lever:hover .sw-lever-txt { color: var(--accent-2); }
.sw-lever:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 8px; }

.sw-yard { min-width: 0; }
.sw-rail { position: relative; height: 3px; border-radius: 3px; background: var(--line); margin: 4px 6px 22px; }
.sw-rail-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--accent)); transition: width 0.85s var(--ease-couple); }
.sw-puck { position: absolute; top: 50%; left: 2%; width: 12px; height: 12px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 4px rgba(66, 141, 204, 0.16), 0 0 16px var(--accent-glow); transform: translate(-50%, -50%); transition: left 0.85s var(--ease-couple); }
.sw-puck.ok { background: var(--signal-clear); box-shadow: 0 0 0 4px var(--signal-clear-soft), 0 0 16px var(--signal-clear-glow); }
.sw-puck.held { background: var(--signal-approach); box-shadow: 0 0 0 4px var(--signal-approach-soft), 0 0 16px var(--signal-approach-glow); }
.sw-sidings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sw-siding { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--steel-lo); opacity: 0.6; transition: opacity 0.35s ease, border-color 0.35s ease, background 0.35s ease, transform 0.35s var(--ease-couple); }
.sw-sid-txt { display: flex; flex-direction: column; line-height: 1.24; min-width: 0; }
.sw-siding b { font-size: 0.85rem; color: var(--text); font-weight: 600; }
.sw-siding span { font-family: var(--font-mono); font-size: 0.71rem; color: var(--text-3); }
.sw-siding.hit { opacity: 1; transform: translateY(-2px); }
.sw-siding.hit:not(.sw-siding-held) { border-color: rgba(74, 222, 128, 0.5); background: linear-gradient(180deg, rgba(74, 222, 128, 0.08), var(--steel-lo)); }
.sw-siding.sw-siding-held.hit { border-color: rgba(224, 163, 74, 0.5); background: linear-gradient(180deg, rgba(224, 163, 74, 0.08), var(--steel-lo)); }
.sw-siding.hit:not(.sw-siding-held) b, .sw-siding.hit:not(.sw-siding-held) span { color: var(--signal-clear); }
.sw-siding.sw-siding-held.hit b, .sw-siding.sw-siding-held.hit span { color: var(--signal-approach); }
.sw-result { margin: 22px 2px 0; font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.65; color: var(--text-2); min-height: 3.3em; }

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .board-wrap { max-width: 560px; }
}
@media (max-width: 860px) { .nav-desktop, .header-cta { display: none; } .header-inner { gap: 12px; } .header-login { display: inline-flex; margin-left: auto; } .menu-toggle { display: flex; margin-left: 0; } .mobile-nav:not([hidden]) { display: flex; } }
@media (max-width: 720px) {
  .cards-3 { grid-template-columns: 1fr; }
  .dep { grid-template-columns: 1fr; gap: 12px; padding: 22px 20px; }
  .dep-name { flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
  .built-grid { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr; gap: 34px; }
  .values { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
  .switcher { padding: 22px 18px; }
  .switcher-stage { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 600px) {
  .brow { grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; padding: 10px 14px; }
  .brow .c-next, .brow-head .c-next { display: none; }
  .board-head, .board-cash { padding-left: 14px; padding-right: 14px; }
  .board-time { display: none; }
  .board-cash-sub { grid-column: 1 / -1; justify-self: start; }
  .sw-rail { display: none; }
  .sw-sidings { grid-template-columns: repeat(2, 1fr); }
  .sw-result { min-height: 0; }
}
@media (max-width: 520px) { .header-inner { height: 58px; } .hero-actions .btn, .cta-actions .btn { flex: 1 1 auto; } }

/* Board motion */
@keyframes dotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes trainPulse { 0%, 100% { box-shadow: 6px 0 16px -10px var(--accent-glow); filter: brightness(1); } 50% { box-shadow: 11px 0 32px -3px var(--accent-glow); filter: brightness(1.2); } }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes flipFig { 0% { transform: rotateX(0deg); opacity: 1; } 45% { transform: rotateX(88deg); opacity: 0.2; } 55% { transform: rotateX(-88deg); opacity: 0.2; } 100% { transform: rotateX(0deg); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  html { --run: 0.5; }  /* pin a fixed mid-night; no scroll-driven light */
}