/* ══════════════════════════════════════════════════════════════════════
   thUMBox — dark-first design system (v2, 2026-07)
   The site language inverts the old Revolut catalogue: black is the canvas,
   white is the punctuation. One accent (cobalt #494fdf, brightened to
   #9ea2ff for small text on black). Display type is General Sans 500 at
   statement sizes with tight tracking; body is Inter; technical microtype
   is JetBrains Mono. Grain, hairlines, ghost numerals, marquees, magnetic
   pills. Motion is progressive enhancement — everything reads as a plain
   static document when JS or the CDN is unavailable, or when the visitor
   prefers reduced motion (html.motion is never set).
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #000000;
  --surface-1: #0a0a0c;
  --surface-2: #111116;
  --surface-3: #191921;
  --hairline: rgba(255, 255, 255, 0.10);
  --hairline-soft: rgba(255, 255, 255, 0.06);
  --hairline-strong: rgba(255, 255, 255, 0.22);
  --text: #f4f4f6;
  --text-mute: rgba(255, 255, 255, 0.64);
  --text-faint: rgba(255, 255, 255, 0.48); /* ≥4.5:1 on black — used on real (small mono) text */
  --accent: #494fdf;          /* brand cobalt — fills, stamps, glows */
  --accent-bright: #5a60f5;
  --accent-text: #9ea2ff;     /* cobalt legible at small sizes on black */
  --on-accent: #ffffff;
  /* light punctuation band */
  --light-bg: #f2f2ef;
  --light-ink: #101013;
  --light-mute: #4e5259;
  --light-hairline: rgba(0, 0, 0, 0.12);
  --r-full: 9999px;
  --r-lg: 20px;
  --r-md: 12px;
  --r-sm: 8px;
  --display: 'General Sans', 'Inter', Arial, sans-serif;
  --sans: 'Inter', Arial, Helvetica, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --wrap: 1280px;
  --pad: 24px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 16px; line-height: 1.5;
  letter-spacing: 0.01em; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--accent); color: var(--on-accent); }
img, svg, video, canvas { max-width: 100%; display: block; }
a { color: inherit; }

/* Lenis smooth-scroll (no-op without JS) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

.wrap { position: relative; z-index: 1; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }

/* ── Film grain — cheap fixed overlay, no blend modes ── */
body::after {
  content: ''; position: fixed; inset: -50%; z-index: 2147483000;
  pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) {
  html.motion body::after { animation: grain 9s steps(6) infinite; }
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-2%, 2%); } 40% { transform: translate(2%, -1%); }
  60% { transform: translate(-1%, -2%); } 80% { transform: translate(1%, 2%); }
}

/* ══ Type scale ══ */
.d1 { font-family: var(--display); font-weight: 500; font-size: clamp(3.2rem, 9vw, 8.75rem); line-height: 0.96; letter-spacing: -0.04em; color: var(--text); }
.d2 { font-family: var(--display); font-weight: 500; font-size: clamp(2.3rem, 5.5vw, 4.6rem); line-height: 1.02; letter-spacing: -0.035em; color: var(--text); }
.d3 { font-family: var(--display); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.12; letter-spacing: -0.025em; color: var(--text); }
.d1 .dim, .d2 .dim, .d3 .dim { color: var(--text-faint); }
.d1 .acc, .d2 .acc, .d3 .acc { color: var(--accent-text); }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.6; color: var(--text-mute); max-width: 58ch; }
.lede strong, .lede .g { color: var(--text); font-weight: 600; }

/* Split-reveal lines: site.js wraps [data-split] into .sl-line > .sl-inner */
.sl-line { display: block; overflow: hidden; padding-bottom: 0.15em; margin-bottom: -0.15em; }
.sl-inner { display: block; will-change: transform; }

/* ── Eyebrow — mono microtype with cobalt tick ── */
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-mute);
}
.eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--accent-text); flex: none; }
.eyebrow .idx { color: var(--accent-text); }

/* ── Ghost section numerals ── */
.sec-num {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(5rem, 13vw, 11rem); line-height: 0.8; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.16);
  user-select: none; pointer-events: none;
}

/* ── Section scaffolding ── */
.sec { padding: clamp(96px, 12vw, 168px) 0; position: relative; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head .eyebrow { margin-bottom: 20px; }
.sec-head .sec-num { margin-bottom: -6px; flex: none; }
@media (max-width: 760px) { .sec-head .sec-num { display: none; } }
.hairline-top { border-top: 1px solid var(--hairline); }

/* ── Buttons — magnetic pills ── */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-weight: 600; font-size: 15px; line-height: 1;
  padding: 17px 30px; border-radius: var(--r-full); text-decoration: none;
  cursor: pointer; border: 1px solid transparent; white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.btn-solid { background: #ffffff; color: #000000; border-color: #ffffff; }
.btn-solid:hover { background: var(--accent-bright); border-color: var(--accent-bright); color: #ffffff; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--hairline-strong); }
.btn-ghost:hover { border-color: #ffffff; }
.btn-acc { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn-acc:hover { background: var(--accent-bright); border-color: var(--accent-bright); }
.btn .ar { transition: transform .25s; }
.btn:hover .ar { transform: translateX(4px); }

/* ── Mono chips / tags ── */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em;
  padding: 10px 16px; border-radius: var(--r-full);
  border: 1px solid var(--hairline); color: var(--text-mute);
  transition: border-color .2s, color .2s;
}
.chip:hover { border-color: var(--hairline-strong); color: var(--text); }
.chip.live { border-color: var(--accent); background: rgba(73, 79, 223, 0.16); color: var(--accent-text); }
.chip .st { font-size: 10px; opacity: 0.65; }

/* ── Cards ── */
.card {
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: 32px 30px;
  transition: border-color .25s, background .25s, transform .25s;
}
.card:hover { border-color: var(--hairline-strong); }
.card-k { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 16px; }
.card-t { font-family: var(--display); font-weight: 500; font-size: 1.4rem; letter-spacing: -0.02em; margin-bottom: 10px; color: var(--text); }
.card-d { font-size: 0.97rem; color: var(--text-mute); line-height: 1.6; }
.card-d strong { color: var(--text); font-weight: 600; }
.card.acc { background: var(--accent); border-color: var(--accent); }
.card.acc .card-k { color: rgba(255,255,255,0.75); }
.card.acc .card-t, .card.acc .card-d { color: #ffffff; }
.card.acc .card-d strong { color: #ffffff; }

/* ── Row list — big editorial index rows ── */
.rows { border-top: 1px solid var(--hairline); }
.row {
  display: grid; grid-template-columns: 72px minmax(0, 1.1fr) minmax(0, 1.6fr) 48px;
  align-items: center; gap: 28px; padding: 38px 8px;
  border-bottom: 1px solid var(--hairline); text-decoration: none;
  transition: background .25s, padding .25s;
}
a.row:hover { background: var(--surface-1); padding-left: 20px; padding-right: 0; }
.row-i { font-family: var(--mono); font-size: 13px; color: var(--text-faint); letter-spacing: 0.1em; }
.row-t { font-family: var(--display); font-weight: 500; font-size: clamp(1.4rem, 2.6vw, 2.1rem); letter-spacing: -0.025em; color: var(--text); }
.row-t .tag { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); border: 1px solid rgba(158,162,255,0.4); border-radius: var(--r-full); padding: 5px 10px; vertical-align: middle; margin-left: 14px; white-space: nowrap; }
.row-d { font-size: 0.98rem; color: var(--text-mute); line-height: 1.6; }
.row-d strong { color: var(--text); font-weight: 600; }
.row-ar { font-size: 22px; color: var(--text-faint); transition: transform .25s, color .25s; justify-self: end; }
a.row:hover .row-ar { transform: translateX(6px); color: var(--accent-text); }
@media (max-width: 860px) {
  .row { grid-template-columns: 40px 1fr 32px; }
  .row-d { grid-column: 2 / 3; }
  .row-ar { grid-row: 1; grid-column: 3; }
}

/* ── Marquee — duplicated track, CSS-driven ── */
.marquee { overflow: hidden; padding: clamp(40px, 6vw, 72px) 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); position: relative; }
.marquee-track { display: flex; gap: 0; width: max-content; will-change: transform; }
html.motion .marquee-track { animation: marquee var(--marquee-dur, 38s) linear infinite; }
.marquee-seg { display: flex; align-items: center; flex: none; }
.marquee-seg span {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2.6rem, 7vw, 6.5rem); line-height: 1; letter-spacing: -0.03em;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.34);
  padding: 0 28px; white-space: nowrap;
}
.marquee-seg span.fill { color: var(--text); -webkit-text-stroke: 0; }
.marquee-seg .sep { color: var(--accent-text); -webkit-text-stroke: 0; font-size: clamp(1.4rem, 3vw, 2.6rem); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── Spec table — mono technical sheet ── */
.spec { border-top: 1px solid var(--hairline); font-family: var(--mono); }
.spec-row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 24px; padding: 18px 8px; border-bottom: 1px solid var(--hairline-soft); }
.spec-row .k { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); padding-top: 3px; }
.spec-row .v { font-size: 14px; color: var(--text); line-height: 1.55; }
.spec-row .v .m { color: var(--text-mute); }
@media (max-width: 640px) { .spec-row { grid-template-columns: 1fr; gap: 6px; } }

/* ── Stat cells ── */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); }
@media (max-width: 880px) { .stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .stats { grid-template-columns: 1fr; } }
.stat { padding: 36px 30px 40px; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.stat-k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 18px; }
.stat-v { font-family: var(--display); font-weight: 500; font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -0.03em; color: var(--text); margin-bottom: 12px; }
.stat-v.acc { color: var(--accent-text); }
.stat-d { font-size: 0.92rem; color: var(--text-mute); line-height: 1.55; }

/* ── Light punctuation band ── */
.band-light { position: relative; background: var(--light-bg); color: var(--light-ink); }
.band-light::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; background: var(--light-bg); z-index: -1; }
.band-light .d1, .band-light .d2, .band-light .d3 { color: var(--light-ink); }
.band-light .lede { color: var(--light-mute); }
.band-light .lede strong, .band-light .lede .g { color: var(--light-ink); }
.band-light .eyebrow { color: var(--light-mute); }
.band-light .eyebrow::before { background: var(--accent); }
.band-light .btn-solid { background: #000; color: #fff; border-color: #000; }
.band-light .btn-solid:hover { background: var(--accent); border-color: var(--accent); }
.band-light .btn-ghost { color: var(--light-ink); border-color: rgba(0,0,0,0.3); }
.band-light .btn-ghost:hover { border-color: #000; }
.band-light .sec-num { -webkit-text-stroke-color: rgba(0, 0, 0, 0.18); }

/* ── Nav ── */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s, backdrop-filter .3s;
}
.site-nav.scrolled { background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--hairline-soft); }
.site-nav .bar { display: flex; justify-content: space-between; align-items: center; height: 76px; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.brandmark { font-family: var(--display); font-weight: 600; font-size: 21px; letter-spacing: -0.02em; color: var(--text); text-decoration: none; }
.brandmark .th, .brandmark .ox { font-weight: 400; color: var(--text-mute); }
.site-nav nav { display: flex; gap: 28px; align-items: center; font-size: 14px; font-weight: 500; letter-spacing: 0.01em; }
.site-nav nav a { color: var(--text-mute); text-decoration: none; transition: color .15s; }
.site-nav nav a:hover, .site-nav nav a.active { color: var(--text); }
.site-nav a.nav-cta { background: #fff; color: #000; padding: 11px 22px; border-radius: var(--r-full); font-weight: 600; text-decoration: none; font-size: 14px; }
.site-nav a.nav-cta:hover { background: var(--accent-bright); color: #fff; }
/* mobile: burger + bar-level Reserve; links open as a full-screen overlay */
.nav-burger, .nav-cta-bar { display: none; }
html.menu-open, html.menu-open body { overflow: hidden; }
@media (max-width: 900px) {
  .site-nav .bar { justify-content: flex-start; gap: 14px; }
  .site-nav .brandmark { margin-right: auto; }
  .nav-cta-bar { display: inline-block; }
  .nav-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 44px; height: 44px; padding: 11px; background: none; border: 0;
    cursor: pointer; position: relative; z-index: 61;
  }
  .nav-burger span { display: block; height: 2px; width: 100%; background: var(--text); transition: transform .25s; }
  .site-nav.menu-open .nav-burger span:first-child { transform: translateY(4px) rotate(45deg); }
  .site-nav.menu-open .nav-burger span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .site-nav nav {
    display: none; position: fixed; inset: 0; z-index: 60; background: #000;
    flex-direction: column; justify-content: center; align-items: flex-start;
    gap: 4px; padding: 96px var(--pad) 48px;
  }
  .site-nav.menu-open nav { display: flex; }
  .site-nav nav a { font-family: var(--display); font-weight: 500; font-size: 2rem; letter-spacing: -0.02em; color: var(--text); padding: 10px 0; }
  .site-nav nav a.nav-cta { margin-top: 32px; font-size: 15px; }
}
/* pages without a full-bleed dark hero push content below the fixed bar */
.nav-offset { padding-top: 76px; }

/* ── Page hero (interior pages) ── */
.page-hero { padding: clamp(120px, 16vw, 200px) 0 clamp(56px, 8vw, 96px); }
.page-hero .eyebrow { margin-bottom: 28px; }
.page-hero .d1 { max-width: 12ch; margin-bottom: 32px; }
.page-hero .lede { margin-bottom: 40px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Horizontal scroll panel ── */
html.motion .hscroll-wrap { overflow: hidden; }
html.motion .hscroll-track { display: flex; flex-wrap: nowrap; width: max-content; gap: 20px; will-change: transform; }
.hscroll-progress { height: 2px; background: var(--hairline); border-radius: var(--r-full); margin-top: 32px; overflow: hidden; }
.hscroll-progress .bar { display: block; height: 100%; width: 0%; background: var(--accent-text); border-radius: var(--r-full); }
@media (max-width: 720px) { .hscroll-progress { display: none; } }

/* ── FAQ / accordion-ish rows (static, no JS needed) ── */
.qa { border-top: 1px solid var(--hairline); }
.qa-item { padding: 30px 8px; border-bottom: 1px solid var(--hairline); }
.qa-q { font-family: var(--display); font-weight: 500; font-size: 1.15rem; letter-spacing: -0.015em; color: var(--text); margin-bottom: 10px; }
.qa-a { font-size: 0.97rem; color: var(--text-mute); line-height: 1.62; max-width: 72ch; }
.qa-a strong { color: var(--text); }

/* ── Footer ── */
.site-foot { border-top: 1px solid var(--hairline); padding: clamp(64px, 8vw, 104px) 0 48px; position: relative; }
.foot-grid { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; margin-bottom: clamp(56px, 8vw, 96px); }
.fb-pillar { font-size: 1rem; color: var(--text-mute); max-width: 30ch; line-height: 1.55; margin-top: 18px; }
.fb-pillar .g { color: var(--text); font-weight: 600; }
.foot-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.foot-col .col-h { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 18px; }
.foot-col a { display: block; font-size: 0.95rem; color: var(--text-mute); text-decoration: none; margin-bottom: 12px; transition: color .15s; }
.foot-col a:hover { color: var(--text); }
.foot-mark {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(4rem, 14.5vw, 13.5rem); line-height: 0.9; letter-spacing: -0.045em;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.22);
  user-select: none; white-space: nowrap; margin-bottom: 40px;
  transition: color .6s;
}
.foot-mark:hover { color: rgba(255, 255, 255, 0.06); }
.foot-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--text-faint); padding-top: 28px; border-top: 1px solid var(--hairline-soft); }

/* ── Status LED (built by site.js only under motion + fine pointer):
      a single cobalt square that lazily drifts toward the pointer —
      "the agent is on". Native cursor is kept. ── */
.led-dot {
  position: fixed; top: 0; left: 0; width: 9px; height: 9px;
  margin: -5px 0 0 -5px; border-radius: 2px;
  background: var(--accent-bright);
  box-shadow: 0 0 10px rgba(90, 96, 245, 0.85), 0 0 26px rgba(73, 79, 223, 0.4);
  pointer-events: none; z-index: 2147483001; opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  html.motion .led-dot { animation: led-breathe 2.8s ease-in-out infinite; }
}
@keyframes led-breathe {
  0%, 100% { box-shadow: 0 0 10px rgba(90, 96, 245, 0.85), 0 0 26px rgba(73, 79, 223, 0.4); }
  50% { box-shadow: 0 0 6px rgba(90, 96, 245, 0.55), 0 0 14px rgba(73, 79, 223, 0.25); }
}

/* Utility */
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; } .mt-64 { margin-top: 64px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 980px) { .grid-4 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ══ Light sections — one class flips the token set; components adapt.
      Used from the deep-dive through the FAQ to break up the black. ══ */
.light {
  --bg: var(--light-bg);
  --surface-1: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #e9e9e4;
  --hairline: rgba(0, 0, 0, 0.12);
  --hairline-soft: rgba(0, 0, 0, 0.07);
  --hairline-strong: rgba(0, 0, 0, 0.30);
  --text: #101013;
  --text-mute: rgba(16, 16, 19, 0.70);
  --text-faint: rgba(16, 16, 19, 0.60); /* ≥4.5:1 on the light bg */
  --accent-text: #3a40c4;
  background: var(--bg);
  color: var(--text);
}
.light .d1, .light .d2, .light .d3, .light .card-t, .light .row-t { color: var(--text); }
.light .sec-num { -webkit-text-stroke: 1px rgba(0, 0, 0, 0.20); }
.light .hud { color: #157347; }
.light .marquee-seg span { -webkit-text-stroke: 1px rgba(0, 0, 0, 0.34); }
.light .marquee-seg span.fill, .light .marquee-seg .sep { -webkit-text-stroke: 0; }
.light .btn-solid { background: #101013; color: #ffffff; border-color: #101013; }