/* ============================================================
   AlgoProven — BRAND SYSTEM V3.1
   Dark control-room · near-black + mint LED · RuleGate traffic-light
   (mint = ALLOW, amber = REDUCE, raspberry = BLOCK). IBM Plex Sans/Mono.
   Loaded AFTER each page's inline <style> — these rules always win.
   ============================================================ */

@import url('/fonts.css?v=32');

/* ---- Fade transitions: header is NEVER in these selectors — always visible ---- */
body>.wrap>*:not(header),
body>*:not(.wrap){
  opacity:var(--pg-o,1);
  transition:opacity var(--pg-dur,0s) ease;
}

/* ---- V3.1 Palette — near-black surfaces + mint LED + traffic-light semantics ---- */
:root{
  /* Surfaces (handoff tokens) */
  --bg:#0a0b0e;            /* page background */
  --bg-panel:#0b0f14;      /* large panels, hero shell, dashboard shell */
  --bg-card:#0e141b;       /* cards, meters, topbar */
  --bg-inset:#0a0e13;      /* inset blocks (code lines, stat chips) */
  --ink:#0B1117;           /* brand ink; app-icon bg; theme-color */
  /* legacy surface aliases → new values */
  --bg-soft:#0b0f14;
  --bg-elevated:#0e141b;
  --panel:#0e141b;
  --panel-2:#0b0f14;
  --panel-3:#0e141b;

  /* Borders (translucent white, handoff) */
  --line:rgba(255,255,255,.08);
  --line-soft:rgba(255,255,255,.07);
  --border-row:rgba(255,255,255,.06);
  --border-hair:rgba(255,255,255,.04);
  --overlay-chip:rgba(255,255,255,.06);

  /* Text ramp (handoff) */
  --text:#e6edf3;
  --text-soft:#c7d1db;
  --text-muted:#9aa4b0;
  --text-dim:#8b98a5;
  --text-faint:#6b7480;
  --logo-ink:#F6F5F1;      /* off-white — "Proven"/"Algo" on dark */

  /* Brand + RuleGate traffic-light */
  --mint:#00E676;          /* ALLOW · positive P&L · pass-lock · brand accent */
  --amber:#FFB020;         /* REDUCE · warning */
  --raspberry:#F31260;     /* BLOCK · negative P&L · exits */
  --cyan:#45c8dd;          /* neutral progress (min-days) — not a verdict */

  --accent:var(--mint);
  --accent-hover:#00C85E;
  --accent-2:var(--mint);
  --accent-2-hover:#00C85E;
  --accent-ink:#04120c;    /* text on mint button */

  /* Semantic states */
  --success:var(--mint);
  --warning:var(--amber);
  --danger:var(--raspberry);

  /* Atmosphere */
  --glow-green:rgba(0,230,118,0.10);
  --glow-cyan:rgba(0,230,118,0.06);

  /* Backward-compat aliases (old pages keep working) */
  --txt:var(--text);
  --mut:var(--text-muted);
  --acc:var(--mint);
  --green:var(--mint);
  --blue:var(--cyan);
  --red:var(--raspberry);
  --acc2:var(--mint);
  --warn:var(--amber);
  --pan2:var(--bg-panel);
  --ln:var(--line);

  --display:'IBM Plex Sans',-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --wordmark:'Plus Jakarta Sans','Segoe UI',sans-serif;

  color-scheme:dark;
}

/* ---- Base ---- */
*{box-sizing:border-box}
body{
  background:
    radial-gradient(900px 420px at 8% -12%,rgba(0,230,118,.06) 0%,transparent 60%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text);
  font:16px/1.6 var(--display);
  margin:0;
  min-height:100vh;
}
.wrap{max-width:1000px;margin:0 auto;padding:0 24px}

/* ---- Type ---- */
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.01em;line-height:1.18}
h1{font-size:clamp(28px,4vw,40px);font-weight:700}
h2{font-size:clamp(20px,2.5vw,26px);font-weight:600}
h3{font-size:18px;font-weight:600}
h4{font-weight:500}
.badge,.eyebrow,.tg2,.spec-k,.stat,.mono,code,.step,.upd,.lbl,th,.bt,.tag{font-family:var(--mono)}

/* ---- Header ---- */
header{
  position:sticky;top:0;z-index:200;
  background:transparent;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:16px 0;
  border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
}
html{scroll-padding-top:84px}
.logo,.logo:link,.logo:visited{
  color:var(--text);text-decoration:none;
  display:inline-flex;align-items:center;white-space:nowrap;
}
.logo img{height:24px;width:auto;display:block}
nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
nav a{color:var(--text-muted);text-decoration:none;font-size:13px;white-space:nowrap;font-family:var(--display)}
nav a:hover,nav a.on{color:var(--text)}
nav a.nav-cta{
  background:var(--mint);color:var(--accent-ink);border:1px solid var(--mint);
  border-radius:8px;padding:6px 14px;font-weight:600;font-size:13px;
  transition:opacity .15s;flex-shrink:0;
}
nav a.nav-cta:hover{opacity:.88;color:var(--accent-ink)}
.badge{font-size:12px;color:var(--text-muted);border:1px solid var(--line);padding:4px 10px;border-radius:20px;white-space:nowrap}

@media (max-width:680px){
  header{padding:10px 0;min-height:0}
  nav{flex-wrap:nowrap;overflow-x:auto;gap:15px;max-width:100%;scrollbar-width:none;-ms-overflow-style:none}
  nav::-webkit-scrollbar{display:none}
}

/* ---- Footer ---- */
footer{border-top:1px solid var(--line);padding:24px 0;margin-top:56px;color:var(--text-muted);font-size:13px;text-align:center}
footer a{color:var(--text-muted)}

/* ---- Buttons — solid mint primary (handoff) ---- */
button{
  font-family:inherit;cursor:pointer;
  background:var(--mint);color:var(--accent-ink);border:1px solid var(--mint);
  padding:14px 24px;border-radius:11px;font-weight:600;font-size:16px;
  transition:opacity .12s;
}
button:hover{opacity:.88}

/* ---- Form controls — prevent browser light-mode white hover ---- */
input:hover,select:hover,textarea:hover{background:var(--bg-card)!important}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--mint)!important;background:var(--bg-card)!important}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,
select:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px var(--bg-card) inset!important;
  -webkit-text-fill-color:var(--text)!important;
  transition:background-color 5000s!important;
}

/* Outline / secondary variant (ghost) */
.btn-secondary{
  background:transparent!important;
  color:var(--text)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:none!important;
}
.btn-secondary:hover{
  color:var(--text)!important;
  border-color:rgba(255,255,255,.28)!important;
  opacity:.9;box-shadow:none!important;
}

/* ---- Mobile: keep only signal ---- */
@media (max-width:680px){
  .mob-hide{display:none!important}
  .hero p.note:not(#waitlist-note){display:none}
  .flow{display:none}
  .desk-band,.b2b{display:none}
  .legend{display:none}
}