/* ============================================================================
   Aurevon Interlude — design system (SPEC §5 / CHANGES-v2 §5+§6)
   Cinematic, glassmorphic, mobile-first. CSS only, no remote assets.
   All motion is gated behind prefers-reduced-motion. Transform/opacity only.
   ========================================================================== */

/* Self-hosted display/UI typeface (Sora, OFL). No remote asset — served
   same-origin so it satisfies the strict `font-src 'self'` CSP. This replaces
   the system-ui default (the "I gave up on typography" signal). */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/fonts/sora.woff2") format("woff2");
}

:root {
  /* ==========================================================================
     Aurevon Ventures brand tokens (exact names/values per design-token spec).
     Parent brand: electric blue / black / silver-chrome / white / navy — NOT
     the legacy gold+cyan palette. Legacy variable names below (--gold,
     --gold-hi, --cyan, --bg-0 etc.) are kept as ALIASES pointing at these so
     every existing consumer repaints without a full rewrite of every rule.
     ========================================================================== */
  --bg-void: #05070A;
  --bg-surface: #0B1220;
  --chrome: #C7D2DE;
  --blue-500: #2F6FFF;
  --blue-700: #1B4FCC;
  --blue-300: #6FA8FF;
  --signal-mint: #34E2A6; /* "money" accent ONLY: earnings digits, "+" delta
                              badge, payout-received toast. Never elsewhere. */

  /* Motion (spec durations/easing) */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 400ms;
  --motion-counter: 900ms;
  --ease-standard: cubic-bezier(.2, .7, .2, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);

  /* Type */
  --font-sans: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;

  /* Palette — legacy names aliased to the brand tokens above. */
  --bg-0: var(--bg-void);   /* near-black navy base */
  --bg-1: var(--bg-surface); /* deep navy */
  --panel: var(--bg-surface); /* panel base */
  --navy-2: #101A2C;
  --navy-3: #16233A;

  --gold: var(--blue-500);
  --gold-hi: var(--blue-300);
  --cyan: var(--chrome);    /* silver-chrome accent (formerly "cyan") */

  --ink: #EDF1F7;           /* text */
  --muted: #8C9BB0;         /* muted text */

  --ok: var(--blue-300);    /* success/verified — blue, never mint (mint is
                                reserved strictly for the 3 money moments) */
  --warn: #e6c75a;
  --bad: #ef7d6d;

  /* Glass surfaces */
  --glass: rgba(11, 18, 32, 0.55);
  --glass-2: rgba(16, 26, 44, 0.42);
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.14);

  /* Radii */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* Shadows (layered) */
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
              0 10px 30px -12px rgba(0, 0, 0, 0.65);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, 0.06) inset,
              0 20px 60px -18px rgba(0, 0, 0, 0.8);
  --glow-gold: 0 0 0 1px rgba(47, 111, 255, 0.35),
               0 10px 40px -8px rgba(47, 111, 255, 0.35);
  --glow-cyan: 0 0 30px -6px rgba(111, 168, 255, 0.45);

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);

  --tap: 44px; /* min touch target */
}

* { box-sizing: border-box; }

/* The `hidden` attribute must always win. Without this, class rules that set a
   `display` value (e.g. `.btn { display: inline-flex }`) override the UA
   `[hidden] { display: none }` rule by source order, leaving elements like the
   header "Sign out" button visible while JS believes it is hidden. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html, body {
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.55;
  min-height: 100%;
}

body {
  background-color: var(--bg-0);
  -webkit-overflow-scrolling: touch;     /* momentum scroll on iOS */
  overflow-x: hidden;                    /* no horizontal scroll */
}

/* ---- Drifting gradient-mesh background (fixed, behind everything) -------- */
body::before {
  content: "";
  position: fixed;
  inset: -20vmax;
  z-index: -2;
  background:
    radial-gradient(40vmax 40vmax at 18% 12%, rgba(47, 111, 255, 0.16), transparent 60%),
    radial-gradient(45vmax 45vmax at 85% 20%, rgba(111, 168, 255, 0.14), transparent 60%),
    radial-gradient(50vmax 50vmax at 50% 100%, rgba(111, 168, 255, 0.08), transparent 60%),
    radial-gradient(60vmax 60vmax at 80% 90%, rgba(47, 111, 255, 0.10), transparent 60%);
  background-color: var(--bg-0);
  animation: mesh-drift 36s ease-in-out infinite alternate;
  will-change: transform;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 7, 10, 0) 0%, rgba(5, 7, 10, 0.55) 100%);
}

@keyframes mesh-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2%, -1.5%, 0) scale(1.06); }
  100% { transform: translate3d(-2%, 1.5%, 0) scale(1.04); }
}

a { color: var(--gold-hi); text-decoration: none; transition: color 0.18s ease; }
a:hover { color: var(--gold); text-decoration: none; }

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 28px);
  padding-left: max(clamp(16px, 5vw, 28px), var(--safe-l));
  padding-right: max(clamp(16px, 5vw, 28px), var(--safe-r));
}

/* ============================== TOP NAV =================================== */
header.site {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(11, 18, 32, 0.85), rgba(5, 7, 10, 0.7));
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  padding-top: var(--safe-t);
}
header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.logo {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.10em;
  color: var(--ink);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Animated gradient wordmark accent */
.logo .accent {
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-hi) 35%,
              var(--cyan) 60%, var(--gold-hi) 85%, var(--gold) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: wordmark-shift 8s linear infinite;
}
@keyframes wordmark-shift {
  to { background-position: 220% 0; }
}

nav.main {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2.4vw, 22px);
  flex-wrap: wrap;
  justify-content: flex-end;
}
nav.main a:not(.btn) {
  font-size: 14px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);   /* 44px tap target, not a 20px text sliver */
}
nav.main a:not(.btn):hover { color: var(--ink); }

/* ============================== BUTTONS ================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 12px 24px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  /* blue-700 -> blue-500: keeps white label text at >=4.5:1 across the whole
     chip (white-on-blue-700 is the pre-verified 6.9:1 combo). */
  background: linear-gradient(135deg, var(--blue-700) 0%, var(--blue-500) 100%);
  color: #EDF1F7;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  box-shadow: var(--glow-gold);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease,
    color 0.18s ease, opacity 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(111, 168, 255, 0.6),
              0 14px 44px -8px rgba(47, 111, 255, 0.55),
              var(--glow-cyan);
  color: #FFFFFF;
}
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 2px; }

.btn.ghost {
  background: var(--glass);
  color: var(--blue-300);
  border: 1px solid var(--hairline-strong);
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn.ghost:hover {
  color: var(--ink);
  border-color: rgba(111, 168, 255, 0.5);
  box-shadow: var(--shadow-2), var(--glow-cyan);
}
.btn.small { padding: 8px 16px; font-size: 13px; min-height: 38px; }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: var(--shadow-1); }

/* ============================== HERO ===================================== */
.hero {
  position: relative;
  padding: clamp(56px, 11vw, 110px) 0 clamp(40px, 8vw, 70px);
  text-align: center;
}
.hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 18%;
  width: min(680px, 90%);
  height: 360px;
  transform: translateX(-50%);
  z-index: -1;
  background: radial-gradient(closest-side, rgba(47, 111, 255, 0.22), transparent 70%);
  filter: blur(8px);
  pointer-events: none;
}
.hero h1 {
  font-size: clamp(34px, 7.5vw, 60px);
  line-height: 1.05;
  margin: 0 0 18px;
  letter-spacing: -0.02em;
  font-weight: 800;
  text-wrap: balance;
}
.hero h1 .accent {
  background: linear-gradient(100deg, var(--gold-hi), var(--gold) 45%, var(--cyan));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: wordmark-shift 9s linear infinite;
}
.hero p.lead {
  max-width: 660px;
  margin: 0 auto 32px;
  color: var(--muted);
  font-size: clamp(16px, 2.4vw, 19px);
}
.hero .cta-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================== CARDS / GRID ============================= */
.grid3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 18px;
  padding: clamp(20px, 5vw, 38px) 0 clamp(36px, 8vw, 70px);
}
/* Compact grid for short stat cards (label + one number). Packs 2-3 across even
   on a phone instead of a tall stack of mostly-empty full-width cards. */
.grid-compact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 12px;
  padding: 10px 0;
}
.grid-compact .card { padding: 16px 18px; }
/* Uniform row heights. These cards are label + one number, but the labels wrap
   to two lines at some widths ("Your kickback rate") and one at others ("Paid
   out"), which left neighbouring cards different heights and stranded ragged
   gaps down the phone layout. Equal rows make the set read as one block. */
.grid-compact { grid-auto-rows: 1fr; }
.grid-compact .card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card,
.panel {
  background: linear-gradient(160deg, var(--glass), var(--glass-2));
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  position: relative;
}
.card {
  padding: 24px;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  overflow: hidden;
}
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 40%, rgba(111, 168, 255, 0.06));
  opacity: 0;
  transition: opacity 0.22s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(47, 111, 255, 0.4);
  box-shadow: var(--shadow-2), 0 18px 50px -14px rgba(47, 111, 255, 0.3),
    var(--glow-cyan);
}
.card:hover::after { opacity: 1; }
.card h3 {
  margin: 0 0 10px;
  font-size: 17px;
  color: var(--gold-hi);
  letter-spacing: 0.01em;
}
.card p { margin: 0; color: var(--muted); font-size: 14.5px; }

.panel {
  padding: clamp(20px, 4vw, 30px);
  margin: 22px 0;
}
.panel h2 {
  margin: 0 0 18px;
  font-size: clamp(21px, 3.2vw, 26px);   /* clear step above the 17px card h3 */
  letter-spacing: -0.01em;
  text-wrap: balance;
}
/* Section heading used outside panels (e.g. the landing "How it works" band). */
.section-title {
  margin: 0 0 6px;
  font-size: clamp(22px, 3.4vw, 28px);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* ============================== FORMS =================================== */
form .field { margin-bottom: 16px; }
label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 500;
}
input, select {
  width: 100%;
  min-height: var(--tap);
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline-strong);
  background: rgba(5, 7, 10, 0.55);
  color: var(--ink);
  font-size: 16px;            /* >=16px avoids iOS input zoom */
  font-family: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
input::placeholder { color: rgba(140, 155, 176, 0.65); }
input:focus, select:focus {
  outline: 2px solid var(--blue-300);
  outline-offset: 1px;
  border-color: var(--blue-300);
  box-shadow: 0 0 0 3px rgba(111, 168, 255, 0.18);
}

/* Live dollar echo under cents-denominated inputs (bid / budget) so an
   advertiser can see that "100" means $1.00 and never fat-finger a 100x error. */
.field-hint {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--gold-hi);
  font-variant-numeric: tabular-nums;
  min-height: 16px;
}

.msg { min-height: 20px; font-size: 13.5px; margin-top: 12px; }
.msg.ok { color: var(--ok); }
.msg.err { color: var(--bad); }

/* ============================== AUTH CARD =============================== */
.auth-card { max-width: 460px; margin: clamp(28px, 7vw, 64px) auto; }
.tabs { display: flex; gap: 8px; margin-bottom: 22px; }
.tabs button {
  flex: 1;
  min-height: var(--tap);
  padding: 11px;
  background: rgba(5, 7, 10, 0.4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.tabs button.active {
  background: linear-gradient(135deg, var(--blue-700), var(--blue-500));
  color: #EDF1F7;
  border-color: transparent;
  box-shadow: var(--glow-gold);
}

/* ============================== TOPBAR / BALANCE ======================== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin: clamp(20px, 5vw, 30px) 0 6px;
}
.topbar h1, .topbar h2 { margin: 0; }
.balance-line { font-size: 15px; color: var(--muted); }
.balance-line strong {
  color: var(--gold-hi);
  font-size: 20px;
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
}

/* ============================== TABLES ================================== */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-sm);
}
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td {
  text-align: left;
  padding: 12px 12px;
  border-bottom: 1px solid var(--hairline);
}
th {
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr { transition: background 0.15s ease; }
tbody tr:hover { background: rgba(111, 168, 255, 0.05); }

.status-pill {
  display: inline-block;
  padding: 3px 12px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  text-transform: capitalize;
  border: 1px solid transparent;
}
.status-pill.active,
.status-pill.paid { background: rgba(78, 224, 166, 0.14); color: var(--ok); border-color: rgba(78, 224, 166, 0.3); }
.status-pill.paused,
.status-pill.requested { background: rgba(230, 199, 90, 0.14); color: var(--warn); border-color: rgba(230, 199, 90, 0.3); }
.status-pill.exhausted,
.status-pill.rejected { background: rgba(239, 125, 109, 0.14); color: var(--bad); border-color: rgba(239, 125, 109, 0.3); }

.row-actions { white-space: nowrap; }
.inline-form { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.inline-form .field { margin-bottom: 0; min-width: 160px; flex: 1 1 160px; }
.inline-form .btn { flex: 0 0 auto; }

/* ============================== FOOTER ================================== */
footer.site {
  border-top: 1px solid var(--hairline);
  margin-top: clamp(48px, 9vw, 80px);
  padding: 28px 0;
  padding-bottom: max(28px, calc(28px + var(--safe-b)));
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.muted { color: var(--muted); }
.empty {
  color: var(--muted);
  font-style: italic;
  text-align: center;
  padding: 28px 18px;
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--r-md);
  margin-top: 6px;
}

/* ============================== STAT HERO (earner) ===================== */
.stat-hero {
  position: relative;
  text-align: center;
  padding: clamp(28px, 7vw, 48px) clamp(18px, 5vw, 34px);
  margin: 22px 0;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(47, 111, 255, 0.10), var(--glass-2));
  border: 1px solid rgba(47, 111, 255, 0.25);
  box-shadow: var(--shadow-2), 0 0 60px -20px rgba(47, 111, 255, 0.4);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  overflow: hidden;
}
.stat-hero .label {
  display: block;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
/* The earnings counter is one of the exactly-three approved uses of
   --signal-mint (money accent) — solid color, not a gradient-clip, so it
   reads as a deliberate "this is your money" signal rather than decoration. */
.stat-hero .big {
  display: block;
  font-size: clamp(44px, 14vw, 76px);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--signal-mint);
}
.stat-hero .sub { margin-top: 12px; color: var(--muted); font-size: 14.5px; }

/* "How to earn" explainer steps */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 14px;
  margin: 10px 0 4px;
}
.step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border-radius: var(--r-md);
  background: rgba(5, 7, 10, 0.4);
  border: 1px solid var(--hairline);
}
.step .n {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--blue-700), var(--blue-500));
  color: #EDF1F7;
  font-weight: 800;
  font-size: 14px;
}
.step .t { font-size: 14px; color: var(--ink); }
.step .t small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }

/* ============================== LOAD REVEALS =========================== */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  animation: reveal-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.reveal.d1 { animation-delay: 0.06s; }
.reveal.d2 { animation-delay: 0.14s; }
.reveal.d3 { animation-delay: 0.22s; }
.reveal.d4 { animation-delay: 0.30s; }
.reveal.d5 { animation-delay: 0.38s; }
@keyframes reveal-in {
  to { opacity: 1; transform: translateY(0); }
}

/* PWA install hint (shown by pwa.js when applicable) */
.install-hint {
  display: none;
  margin-left: 6px;
}

/* ============================== MOBILE ================================= */
@media (max-width: 720px) {
  header.site .wrap { min-height: 56px; }
  .logo { font-size: 17px; letter-spacing: 0.06em; }
  nav.main { gap: 12px; }
  nav.main a:not(.btn) { font-size: 13px; }

  .hero .cta-row { flex-direction: column; align-items: stretch; }
  .hero .cta-row .btn { width: 100%; }

  .inline-form { flex-direction: column; align-items: stretch; }
  /* Reset the row-layout flex basis: in column mode `flex: 1 1 160px` would make
     160px the field HEIGHT (main axis is now vertical), inflating each field to a
     160px block and leaving a large dead gap above the button. */
  .inline-form .field { width: 100%; min-width: 0; flex: 0 0 auto; }
  .inline-form .btn { width: 100%; }

  .topbar { flex-direction: column; align-items: flex-start; }

  /* Tables: let them scroll horizontally inside a momentum container */
  table { font-size: 13px; }
  th, td { padding: 10px 8px; }

  /* Wide tables (.cards-sm) collapse to one card per row instead of crushing
     columns to unreadable widths. Each cell carries its column name via
     data-label so the value stays labelled without the header row. */
  .cards-sm thead { display: none; }
  .cards-sm tr {
    display: block;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: rgba(5, 7, 10, 0.4);
    padding: 4px 14px 8px;
    margin-bottom: 12px;
  }
  .cards-sm td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--hairline);
    text-align: right;
    white-space: normal;
  }
  .cards-sm td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
    flex: 0 0 auto;
  }
  /* First cell = campaign name + brand → full-width card title, no label. */
  .cards-sm td:first-child {
    display: block;
    text-align: left;
    padding-top: 12px;
    border-bottom: 1px solid var(--hairline-strong);
  }
  .cards-sm td:first-child::before { content: none; }
  /* Last cell = row action button → full-width, no empty label row. */
  .cards-sm td:last-child { display: block; border-bottom: none; padding-top: 12px; }
  .cards-sm td:last-child::before { content: none; }
  .cards-sm td:last-child:empty { display: none; }
  .cards-sm td:last-child .btn { width: 100%; }
}

@media (max-width: 380px) {
  .wrap { padding-left: max(14px, var(--safe-l)); padding-right: max(14px, var(--safe-r)); }
  th, td { padding: 9px 6px; }
}

/* ============================== REDUCED MOTION ========================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  body::before { animation: none; }
  .reveal { opacity: 1; transform: none; }
  .logo .accent, .hero h1 .accent, .stat-hero .big {
    animation: none;
    background-position: 0 0;
  }
}

/* Small utilities (replace inline style attributes so the strict CSP,
   which disallows inline styles, applies cleanly). */
.m0 { margin: 0; }
.fs-13 { font-size: 13px; }
.mt-14 { margin: 14px 0 0; }

/* ============================================================================
   LANDING — two-lane restructure (audience chooser, business/earn lanes,
   trust, FAQ) + scroll-reveal, stat counters, motion cursor. All motion is
   gated behind prefers-reduced-motion and (for JS behaviors) also in home.js.
   ========================================================================== */

/* ---- Audience chooser (two side-by-side cards in the hero) --------------- */
.audience-chooser {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 18px;
  max-width: 860px;
  margin: 4px auto 0;
  text-align: left;
}
.audience-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 26px 22px;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--glass), var(--glass-2));
  border: 1px solid var(--hairline-strong);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  color: var(--ink);
  position: relative;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.audience-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.audience-card.biz::after {
  background: linear-gradient(140deg, transparent 40%, rgba(47, 111, 255, 0.12));
}
.audience-card.earn::after {
  background: linear-gradient(140deg, transparent 40%, rgba(111, 168, 255, 0.12));
}
.audience-card:hover { transform: translateY(-5px); }
.audience-card:hover::after { opacity: 1; }
.audience-card:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 3px; }
.audience-card.biz:hover {
  border-color: rgba(47, 111, 255, 0.55);
  box-shadow: var(--shadow-2), 0 20px 55px -16px rgba(47, 111, 255, 0.4);
}
.audience-card.earn:hover {
  border-color: rgba(111, 168, 255, 0.55);
  box-shadow: var(--shadow-2), 0 20px 55px -16px rgba(111, 168, 255, 0.4);
}
.ac-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.audience-card.biz .ac-kicker { color: var(--gold); }
.audience-card.earn .ac-kicker { color: var(--cyan); }
.ac-title {
  font-size: clamp(20px, 3.2vw, 24px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.ac-sub { color: var(--muted); font-size: 14.5px; }
.ac-go {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 700;
}
.audience-card.biz .ac-go { color: var(--gold-hi); }
.audience-card.earn .ac-go { color: var(--cyan); }

/* ---- Animated stat band -------------------------------------------------- */
.stat-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
  gap: 14px;
  max-width: 860px;
  margin: 30px auto 0;
}
.stat-counter {
  padding: 16px 12px;
  border-radius: var(--r-md);
  background: rgba(5, 7, 10, 0.4);
  border: 1px solid var(--hairline);
  text-align: center;
}
.stat-counter .num {
  display: block;
  font-size: clamp(26px, 5vw, 34px);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(100deg, var(--gold-hi), var(--gold) 50%, var(--cyan));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.stat-counter .lbl {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* ---- Audience lanes ------------------------------------------------------ */
.lane {
  padding: clamp(34px, 7vw, 58px) 0;
  border-top: 1px solid var(--hairline);
}
.lane .kicker {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.lane .kicker-gold { color: var(--gold); }
.lane .kicker-cyan { color: var(--cyan); }
.lane .section-title { margin-bottom: 10px; }
.lane .lane-lead {
  max-width: 640px;
  font-size: clamp(15px, 2.2vw, 17px);
  margin: 0 0 22px;
}
.lane .steps { margin: 4px 0 20px; }
.lane .cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
/* Accent the step numbers per lane */
.lane-earn .step .n {
  background: linear-gradient(135deg, var(--blue-300), var(--chrome));
  color: #05070A;
}
.lane-biz { position: relative; }
.lane-biz .step { border-color: rgba(47, 111, 255, 0.22); }
.lane-earn .step { border-color: rgba(111, 168, 255, 0.22); }

/* ---- Pricing strip ------------------------------------------------------- */
.pricing-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin: 0 0 24px;
  padding: 14px 20px;
  border-radius: var(--r-pill);
  background: rgba(47, 111, 255, 0.08);
  border: 1px solid rgba(47, 111, 255, 0.28);
  font-size: 15px;
  color: var(--muted);
}
.pricing-strip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
/* Separator sits in normal flow (not absolutely positioned) so a wrap point
   never leaves a dangling leading "·" at the start of a new line. */
.pricing-strip span:not(:last-child)::after {
  content: "·";
  margin-left: 16px;
  color: rgba(47, 111, 255, 0.5);
}
.pricing-strip strong {
  color: var(--gold-hi);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ---- Trust grid ---------------------------------------------------------- */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 16px;
  margin-top: 6px;
}
.trust-item {
  padding: 20px;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--glass), var(--glass-2));
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-1);
}
.trust-item h3 {
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--cyan);
  letter-spacing: 0.01em;
}
.trust-item p { margin: 0; color: var(--muted); font-size: 14px; }

/* ---- FAQ accordion ------------------------------------------------------- */
.faq { margin-top: 6px; }
.faq details {
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: rgba(5, 7, 10, 0.4);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.faq details[open] {
  border-color: rgba(111, 168, 255, 0.35);
  background: rgba(11, 18, 32, 0.5);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 48px 16px 18px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  position: relative;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--cyan);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after {
  content: "−";
  transform: translateY(-50%) rotate(180deg);
}
.faq summary:focus-visible { outline: 2px solid var(--blue-300); outline-offset: -2px; }
.faq details p {
  margin: 0;
  padding: 0 18px 18px;
  color: var(--muted);
  font-size: 14.5px;
}

/* ---- Scroll reveal (JS-gated via html.js so content is never permanently
   hidden if the deferred script fails to run) ----------------------------- */
html.js .scroll-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}
html.js .scroll-reveal.in {
  opacity: 1;
  transform: none;
}

/* ---- Custom motion cursor (instantiated by home.js only on fine-pointer,
   motion-OK devices; elements are appended to <body>) --------------------- */
.motion-cursor-dot,
.motion-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.25s ease;
}
/* Dot rules retained but unused — home.js no longer instantiates the dot, so
   the cursor reads as a single faint ring (softened per design review). */
.motion-cursor-dot {
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: var(--gold-hi);
}
/* Softened: a small, thin, low-opacity ring with gentle size easing. It should
   read as a faint premium accent, never a gimmick. The native cursor is never
   hidden (no `cursor: none`), so the system pointer always leads. */
.motion-cursor-ring {
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 1px solid rgba(111, 168, 255, 0.32);
  transition: opacity 0.3s ease, width 0.28s ease, height 0.28s ease,
    margin 0.28s ease, border-color 0.28s ease, background 0.28s ease;
}
.motion-cursor-dot.on { opacity: 1; }
/* Faint at rest — barely noticed. */
.motion-cursor-ring.on { opacity: 0.32; }
/* Subtle, small enlargement over interactive elements — no big jump. */
.motion-cursor-ring.big {
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-color: rgba(111, 168, 255, 0.5);
  background: rgba(111, 168, 255, 0.05);
}

@media (max-width: 720px) {
  .lane .cta-row { flex-direction: column; align-items: stretch; }
  .lane .cta-row .btn { width: 100%; }
  .pricing-strip { justify-content: center; }
}

/* JS-driven landing behaviors must also be neutralised for reduced motion.
   The counters/cursor are gated in home.js; these rules cover the CSS side so
   scroll-reveal content is shown immediately and no transition runs. */
@media (prefers-reduced-motion: reduce) {
  html.js .scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .motion-cursor-dot,
  .motion-cursor-ring { display: none !important; }
  .stat-counter .num { background-position: 0 0; }
}

/* ============================================================================
   PRODUCT DEMO — "AI is thinking → the sponsored slot surfaces"
   A compact faux AI-assistant panel that loops the Interlude moment.

   Layering model:
   - DEFAULT (this file, no `.demo-live`)  = the static composed state shown
     with JS disabled OR under prefers-reduced-motion: user prompt + a short
     answer + the Sponsored slot visible, plus the caption above. This is the
     accessible/no-JS baseline and is NOT gated behind `html.js`, so it also
     survives the "script ran but demo threw" case.
   - LIVE (`.demo-panel.demo-live[data-state=…]`, added by home.js only when
     motion is allowed) = the animated loop. Visibility is driven purely by the
     `data-state` attribute; every transition is transform/opacity only.

   Zero-CLS: `.demo-stage` and `.demo-slot` reserve fixed height, so elements
   fade/rise in and out without ever shifting layout.
   ========================================================================== */
.demo-band {
  padding: clamp(30px, 6vw, 56px) 0 clamp(30px, 6vw, 52px);
  border-top: 1px solid var(--hairline);
}
.demo-head { text-align: center; max-width: 640px; margin: 0 auto 22px; }
.demo-head .kicker { justify-content: center; }
.demo-caption {
  margin: 10px auto 0;
  font-size: clamp(14px, 2.1vw, 15.5px);
  max-width: 560px;
}

.demo-panel {
  max-width: 560px;
  margin: 0 auto;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--glass), var(--glass-2));
  border: 1px solid var(--hairline-strong);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  overflow: hidden;
}

/* Faux app chrome */
.demo-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px clamp(14px, 4vw, 18px);
  border-bottom: 1px solid var(--hairline);
  background: rgba(5, 7, 10, 0.35);
}
.demo-avatar {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--blue-700), var(--blue-500));
  color: #EDF1F7;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.demo-app {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-right: auto;
}
.demo-lights { display: inline-flex; gap: 6px; }
.demo-lights i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hairline-strong);
}

.demo-thread { padding: clamp(14px, 4vw, 20px); }

/* User prompt bubble (always visible in every state) */
.demo-user {
  max-width: 82%;
  margin-left: auto;
  padding: 10px 14px;
  border-radius: 14px 14px 4px 14px;
  background: linear-gradient(135deg, rgba(47, 111, 255, 0.22), rgba(111, 168, 255, 0.12));
  border: 1px solid var(--hairline-strong);
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.4;
}

/* Assistant response region — fixed reserved height, zero layout shift. */
.demo-response { margin-top: 16px; }

/* Stage holds the thinking indicator AND the answer, cross-faded in place.
   Both children are absolutely positioned, so the reserved height is set here
   and sized to fit the (taller) answer at 320px without overflowing. */
.demo-stage {
  position: relative;
  min-height: clamp(70px, 21vw, 78px);
}
.demo-thinking,
.demo-answer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
.demo-thinking {
  bottom: 0;                  /* fill the stage so the row centers vertically */
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;                 /* hidden in the composed/no-JS baseline */
  transition: opacity 0.3s ease;
}
.demo-thinking-label { font-size: 13.5px; color: var(--muted); }
.demo-dots { display: inline-flex; gap: 5px; }
.demo-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  opacity: 0.5;
  animation: demo-pulse 1.2s ease-in-out infinite;
}
.demo-dots i:nth-child(2) { animation-delay: 0.18s; }
.demo-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes demo-pulse {
  0%, 100% { opacity: 0.28; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-2px); }
}
.demo-answer {
  opacity: 1;                 /* visible in the composed/no-JS baseline */
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.demo-answer p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink);
}

/* Sponsored slot — reserved height below the stage, independent of it. */
.demo-slot {
  margin-top: 14px;
  min-height: clamp(104px, 30vw, 118px);
}
.demo-sponsor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: linear-gradient(150deg, rgba(47, 111, 255, 0.12), rgba(11, 18, 32, 0.5));
  border: 1px solid rgba(47, 111, 255, 0.3);
  box-shadow: var(--shadow-1);
  opacity: 1;                 /* visible in the composed/no-JS baseline */
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.demo-sponsor-badge {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: rgba(47, 111, 255, 0.18);
  border: 1px solid rgba(47, 111, 255, 0.4);
  color: var(--gold-hi);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.demo-sponsor-brand {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
}
.demo-sponsor-line {
  flex: 1 1 100%;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.35;
}
.demo-verified {
  flex: 1 1 100%;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ok);
}
.demo-verified svg { flex: 0 0 auto; }

/* ---- LIVE (animated) mode — visibility keyed off data-state -------------- */
.demo-panel.demo-live .demo-answer { opacity: 0; transform: translateY(6px); }
.demo-panel.demo-live .demo-sponsor { opacity: 0; transform: translateY(10px); }

/* thinking indicator shows while generating (thinking + sponsor states) */
.demo-panel.demo-live[data-state="thinking"] .demo-thinking,
.demo-panel.demo-live[data-state="sponsor"] .demo-thinking { opacity: 1; }

/* the money moment: sponsored slot elegantly surfaces during the wait */
.demo-panel.demo-live[data-state="sponsor"] .demo-sponsor {
  opacity: 1;
  transform: none;
}

/* answer appears, sponsor gracefully recedes */
.demo-panel.demo-live[data-state="answer"] .demo-answer,
.demo-panel.demo-live[data-state="done"] .demo-answer {
  opacity: 1;
  transform: none;
}

@media (max-width: 380px) {
  .demo-user { max-width: 88%; }
}

/* Reduced motion: home.js never enters live mode, so the composed static state
   above stands. Kill the dot pulse for anyone who still renders it. */
@media (prefers-reduced-motion: reduce) {
  .demo-dots i { animation: none; opacity: 0.6; }
}

/* ============================================================================
   PERSISTENT TAB SHELL — replaces the endless-scroll pattern on earn.html and
   dashboard.html. Follows the WAI-ARIA Tabs pattern (roving tabindex, wired by
   /tabs.js). Reduced motion is handled by the global `*` rule above.
   ========================================================================== */
.tabshell { margin: 18px 0 0; }
.tabshell-list {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 22px;
}
.tabshell-tab {
  flex: 0 0 auto;
  min-height: var(--tap);
  padding: 10px 18px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--motion-base) var(--ease-standard),
    border-color var(--motion-base) var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tabshell-tab:hover { color: var(--ink); }
.tabshell-tab[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--blue-500);
}
.tabshell-tab:focus-visible {
  outline: 2px solid var(--blue-300);
  outline-offset: 2px;
}
.tabshell-panel:focus-visible {
  outline: 2px solid var(--blue-300);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .tabshell-tab { transition: none; }
}
/* The wallet's four tabs overran a 390px viewport by a few pixels, so "Privacy"
   sat half-clipped at the edge. The list scrolls (overflow-x above), but a tab
   sheared off mid-word reads as broken rather than as "there is more here", and
   nothing else signalled the overflow. Tightening the horizontal padding on
   narrow screens lets all four fit; the scroll remains as the safety net for
   any future fifth tab or a larger text-size preference. */
@media (max-width: 420px) {
  .tabshell-tab { padding-left: 12px; padding-right: 12px; }
}

/* ============================================================================
   MONEY MOMENTS — mint (--signal-mint) is reserved for EXACTLY three spots:
   the earnings counter digits (.stat-hero .big, styled above), the "+" delta
   badge below, and the payout-received toast. Nowhere else in the app.
   ========================================================================== */
.balance-delta {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: rgba(52, 226, 166, 0.14);
  border: 1px solid rgba(52, 226, 166, 0.4);
  color: var(--signal-mint);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: translateY(4px) scale(0.9);
  transition: opacity var(--motion-base) var(--ease-standard),
    transform var(--motion-base) var(--ease-standard);
  pointer-events: none;
  vertical-align: middle;
}
.balance-delta.show { opacity: 1; transform: none; }

/* ---- Payout-received toast (mint glow + scale pop) ---------------------- */
.toast-region {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  width: min(92vw, 380px);
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, rgba(52, 226, 166, 0.16), var(--glass-2));
  border: 1px solid rgba(52, 226, 166, 0.45);
  box-shadow: var(--shadow-2), 0 0 40px -10px rgba(52, 226, 166, 0.55);
  color: var(--ink);
  font-size: 14px;
  opacity: 0;
  transform: scale(0.92) translateY(8px);
  transition: opacity var(--motion-slow) var(--ease-pop),
    transform var(--motion-slow) var(--ease-pop);
}
.toast.show { opacity: 1; transform: none; }
.toast strong { color: var(--signal-mint); font-variant-numeric: tabular-nums; }
.toast:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity 0.001ms; }
  .balance-delta { transition: opacity 0.001ms; }
}

/* ============================================================================
   HERO CODE-PARTICLE MOTIF (index.html) — small drifting glyphs in blue/chrome
   around the hero headline. Kept OFF mint deliberately: the signal-color rule
   above restricts mint to exactly the 3 money moments, so decorative motion
   elsewhere stays blue/chrome/white. Static positions defined in CSS; no JS
   needed. The global `*` reduced-motion rule already halts the drift.
   ========================================================================== */
.hero-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.hero-particle {
  position: absolute;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600;
  color: var(--blue-300);
  opacity: 0.32;
  animation: particle-drift 14s ease-in-out infinite;
}
.hero-particle.chrome { color: var(--chrome); }
.hero-particle.p1 { top: 8%;  left: 6%;  font-size: 22px; animation-delay: 0s; }
.hero-particle.p2 { top: 18%; left: 88%; font-size: 17px; animation-delay: 1.4s; }
.hero-particle.p3 { top: 65%; left: 4%;  font-size: 26px; animation-delay: 2.8s; }
.hero-particle.p4 { top: 75%; left: 92%; font-size: 19px; animation-delay: .7s; }
.hero-particle.p5 { top: 38%; left: 14%; font-size: 15px; animation-delay: 3.6s; }
.hero-particle.p6 { top: 12%; left: 50%; font-size: 16px; animation-delay: 2.1s; }
.hero-particle.p7 { top: 82%; left: 46%; font-size: 20px; animation-delay: 4.4s; }
.hero-particle.p8 { top: 50%; left: 80%; font-size: 14px; animation-delay: 1.9s; }
@keyframes particle-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(6px, -16px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-particle { animation: none; }
}