/* theme-cyber.css — re-skins the marketing site to the app's "Cyber" identity.
 *
 * Source of truth: the app's own themes.css
 *   html[data-theme="cyber"]{ --accent:#00f5ff; --bg:#04060f; --bg2:#07091a;
 *                             --bg3:#0a0e1f; --text:#c8d8f0; --text2:#3d5575 }
 * Cyber is the app's DEFAULT theme (index.html sets --accent-rgb:0,245,255),
 * and it's the theme shown in the dashboard screenshot the site ships.
 *
 * This file only re-points the tokens styles.css already uses. It rewrites no
 * layout and no components — remove the <link> and the site reverts exactly.
 *
 * Two deliberate departures from the app, both for the web context:
 *   1. --muted is lightened. The app's --text2 (#3d5575) is a dense-UI label
 *      colour; on marketing body copy over #04060f it lands near 3:1 and fails
 *      WCAG AA for text. Body copy uses a lighter blue-grey; #3d5575 is kept
 *      for decorative --faint labels only.
 *   2. Scanlines are far subtler than the app's. The app's own spec calls the
 *      CRT overlay "signature to Cyber" but calms it elsewhere so it reads
 *      "fintech-grade, not gamer" — a sales page needs that restraint more,
 *      not less.
 */

:root{
  /* ---- surfaces: straight from the app's cyber theme ---- */
  --bg:#04060f; --bg2:#07091a; --panel:#0a0e1f; --panel2:#0d1426; --raise:#111a2e;

  /* ---- accent-tinted hairlines, the way the app draws panel borders ---- */
  --line:rgba(0,245,255,.13); --line2:rgba(0,245,255,.26);

  /* ---- accent: electric cyan replaces teal-green as the primary ---- */
  --teal:#00f5ff; --teal2:#00c2d4;
  --cyan:#00f5ff;
  /* money-trail.js reads its lane colours from these vars. FUNDS uses
     --green; the old mint fought the cyan, so it now takes the app's own
     teal accent (#2dd4bf from themes.css) — cool, on-palette, still
     distinguishable from the cyan INSIDERS lane. */
  --green:#2dd4bf;
  --violet:#818cf8;          /* app's indigo accent */
  --gold:#e8b339;            /* app's amber accent */
  --red:#fb7185;

  /* ---- type ---- */
  --ink:#dce9fb;
  --muted:#8ba3c7;           /* lightened for AA on body copy (see note above) */
  --faint:#3d5575;           /* app's --text2, decorative labels only */
  --display:'Orbitron',var(--head),sans-serif;
}

/* ---- ambient wash: cyan/indigo instead of teal/blue ---- */
body::before{
  background:
    radial-gradient(1000px 700px at 12% -8%, rgba(0,245,255,.10), transparent 60%),
    radial-gradient(900px 700px at 100% 8%, rgba(129,140,248,.07), transparent 55%) !important;
}

/* ---- signature CRT scanlines, heavily restrained ---- */
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(180deg,
    rgba(0,245,255,.022) 0px, rgba(0,245,255,.022) 1px, transparent 1px, transparent 3px);
}
@media (prefers-reduced-motion:reduce){ body::after{ display:none } }

/* ---- terminal chrome: Orbitron for the eyebrow/kicker labels ---- */
.hero .eyebrow, .kicker, .sec-label, .eyebrow{
  font-family:var(--display); font-weight:600; letter-spacing:.22em;
}

/* ---- data reads like the app: monospace + locked columns ---- */
.stat b, .stat-num, .num, table td, table th, .bar i + span, .price, .pill, .badge{
  font-family:var(--mono); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}

/* ---- panels glow at the edge like the app's GridStack panels ---- */
.card, .panel, .scene, .box{
  border-color:var(--line2);
  box-shadow:0 0 0 1px rgba(0,245,255,.04), 0 18px 50px rgba(0,0,0,.55);
}

/* ---- primary CTA: cyan, with the app's neon lift ---- */
.btn-primary{
  background:linear-gradient(180deg,#00f5ff,#00c2d4) !important;
  color:#04060f !important; font-weight:700;
  box-shadow:0 0 24px rgba(0,245,255,.28), 0 8px 24px rgba(0,0,0,.5);
}
.btn-primary:hover{ box-shadow:0 0 34px rgba(0,245,255,.42), 0 10px 28px rgba(0,0,0,.55); }

/* ---- the gradient word in the H1 rides the app's accent pair ---- */
.hero h1 .g{
  /* background-image, NOT the `background` shorthand: the shorthand resets
     background-clip, and with !important it resets it to border-box at
     !important priority — which paints the gradient as a solid block over the
     glyphs instead of clipping it to them. */
  background-image:linear-gradient(100deg,#00f5ff,#7ef7ff 55%,#818cf8) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  color:transparent !important;
}