/* ============================================================================
   SoSoFlows · shared design system (sf.css)  ·  v1
   Obsidian + violet/cyan. One system across every page. Mobile-first.
   Display/body = Geist · data/numbers = Geist Mono. Green ONLY for P&L/success.
   ============================================================================ */

:root{
  /* ground */
  --bg:        #07080d;
  --bg-2:      #0a0c13;
  --surface:   #0e1019;
  --surface-2: #14161f;
  --surface-3: #1a1d28;
  --line:      rgba(255,255,255,.07);
  --line-2:    rgba(255,255,255,.12);

  /* ink */
  --text:  #eef1f6;
  --dim:   #9aa3b8;
  --faint: #69718a;

  /* brand */
  --violet:    #7c5cff;
  --violet-2:  #9a82ff;
  --cyan:      #22d3ee;
  --cyan-2:    #5fe0f5;
  --grad: linear-gradient(100deg, var(--violet) 0%, var(--cyan) 100%);

  /* semantic (green = P&L/success ONLY) */
  --good: #16c784;
  --bad:  #ea3943;
  --warn: #ffb547;

  /* glow */
  --glow-violet: 0 0 0 1px rgba(124,92,255,.18), 0 18px 50px -16px rgba(124,92,255,.32);
  --glow-cyan:   0 0 0 1px rgba(34,211,238,.16), 0 18px 50px -18px rgba(34,211,238,.26);
  --shadow:      0 14px 40px -18px rgba(0,0,0,.7);

  /* type */
  --sans: 'Geist','Geist Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono: 'Geist Mono','SF Mono',ui-monospace,'JetBrains Mono',Menlo,monospace;

  /* scale */
  --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-xl: 26px;
  --pad: clamp(16px,4vw,22px);
  --maxw: 1180px;
}

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:15.5px; line-height:1.6;
  font-feature-settings:'ss01','cv01'; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* ambient ground: soft dual-glow, fixed, behind everything */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 600px at 12% -8%, rgba(124,92,255,.16), transparent 60%),
    radial-gradient(820px 560px at 100% 0%, rgba(34,211,238,.10), transparent 55%),
    radial-gradient(700px 700px at 50% 120%, rgba(124,92,255,.06), transparent 60%);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:rgba(124,92,255,.32)}
:focus-visible{outline:2px solid var(--cyan); outline-offset:2px; border-radius:6px}

/* ---- layout ---- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.sec{ padding:clamp(40px,8vw,76px) 0; }
.sec-tight{ padding:clamp(26px,5vw,44px) 0; }
.grid{ display:grid; gap:14px; }
@media(min-width:680px){ .g-2{grid-template-columns:repeat(2,1fr)} }
@media(min-width:920px){ .g-3{grid-template-columns:repeat(3,1fr)} .g-4{grid-template-columns:repeat(4,1fr)} }
.row{ display:flex; align-items:center; gap:12px; }
.between{ justify-content:space-between; }
.wrap-gap{ flex-wrap:wrap; }

/* ---- type ---- */
h1,h2,h3{ margin:0; font-weight:700; letter-spacing:-.03em; line-height:1.08; text-wrap:balance; }
.display{ font-size:clamp(34px,6.2vw,62px); font-weight:800; letter-spacing:-.04em; }
.h2{ font-size:clamp(24px,3.6vw,38px); font-weight:700; }
.h3{ font-size:clamp(18px,2.4vw,23px); font-weight:600; }
.lead{ color:var(--dim); font-size:clamp(15.5px,1.9vw,19px); line-height:1.6; max-width:62ch; }
.eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); }
.muted{ color:var(--dim); } .faint{ color:var(--faint); }
.grad-txt{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.kbd,code.inline{ font-family:var(--mono); font-size:.86em; background:var(--surface-2); border:1px solid var(--line); padding:1px 6px; border-radius:6px; color:var(--cyan-2); }

/* ---- nav ---- */
.nav{ position:sticky; top:0; z-index:50; background:rgba(7,8,13,.72); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.nav-in{ max-width:var(--maxw); margin:0 auto; padding:11px var(--pad); display:flex; align-items:center; gap:18px; }
.brand{ display:flex; align-items:center; gap:9px; font-weight:700; letter-spacing:-.02em; font-size:16px; }
.brand .dot{ width:22px; height:22px; border-radius:7px; background:var(--grad); box-shadow:var(--glow-violet); flex:0 0 auto; }
.nav-links{ display:none; gap:4px; margin-left:6px; }
.nav-links a{ color:var(--dim); font-size:13.5px; font-weight:500; padding:7px 11px; border-radius:9px; transition:.15s; }
.nav-links a:hover{ color:var(--text); background:var(--surface-2); }
.nav-links a.on{ color:var(--text); background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line); }
.nav-cta{ margin-left:auto; }
.nav-burger{ margin-left:auto; display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--text); cursor:pointer; }
@media(min-width:880px){ .nav-links{display:flex} .nav-burger{display:none} .nav-cta{margin-left:14px} }
/* mobile drawer */
.drawer{ position:fixed; inset:0; z-index:60; background:rgba(5,6,11,.6); backdrop-filter:blur(6px); display:none; }
.drawer.open{ display:block; }
.drawer-panel{ position:absolute; top:0; right:0; height:100%; width:min(82vw,330px); background:var(--bg-2); border-left:1px solid var(--line); padding:18px; display:flex; flex-direction:column; gap:6px; }
.drawer-panel a{ padding:13px 12px; border-radius:11px; color:var(--dim); font-weight:500; }
.drawer-panel a:hover{ background:var(--surface-2); color:var(--text); }

/* ---- buttons ---- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 18px; border-radius:11px; font-family:var(--sans); font-size:14.5px; font-weight:600; letter-spacing:-.01em; cursor:pointer; border:1px solid transparent; transition:transform .12s, box-shadow .2s, background .2s; white-space:nowrap; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--grad); color:#0a0a12; box-shadow:var(--glow-violet); }
.btn-primary:hover{ box-shadow:0 0 0 1px rgba(124,92,255,.4), 0 22px 56px -14px rgba(124,92,255,.5); }
.btn-ghost{ background:var(--surface); color:var(--text); border-color:var(--line-2); }
.btn-ghost:hover{ background:var(--surface-2); border-color:var(--line-2); }
.btn-sm{ min-height:34px; padding:0 12px; font-size:13px; border-radius:9px; }
.btn-lg{ min-height:50px; padding:0 24px; font-size:16px; }

/* ---- cards ---- */
.card{ background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--pad); box-shadow:var(--shadow); }
.card-hover{ transition:transform .18s, border-color .2s, box-shadow .2s; }
.card-hover:hover{ transform:translateY(-3px); border-color:var(--line-2); box-shadow:0 22px 50px -22px rgba(0,0,0,.8); }
.card-glow{ box-shadow:var(--glow-violet); border-color:rgba(124,92,255,.25); }

/* ---- stat tile ---- */
.stat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; }
.stat .k{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.stat .v{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:clamp(22px,3.4vw,30px); font-weight:600; letter-spacing:-.03em; margin-top:6px; }
.stat .s{ color:var(--dim); font-size:12.5px; margin-top:3px; }

/* ---- chips / pills / badges ---- */
.chip{ display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); font-size:12.5px; font-weight:500; color:var(--dim); }
.chip .led{ width:7px; height:7px; border-radius:50%; background:var(--good); box-shadow:0 0 0 3px rgba(22,199,132,.18); }
.chip-live .led{ animation:pulse 2s ease-in-out infinite; }
.tag{ display:inline-flex; padding:3px 9px; border-radius:7px; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.04em; }
.tag-long{ color:var(--good); background:rgba(22,199,132,.12); }
.tag-short{ color:var(--bad); background:rgba(234,57,57,.12); }
.tag-hold{ color:var(--warn); background:rgba(255,181,71,.12); }
.tag-v{ color:var(--violet-2); background:rgba(124,92,255,.14); }
.tag-c{ color:var(--cyan-2); background:rgba(34,211,238,.12); }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.4} }

.pos{color:var(--good)} .neg{color:var(--bad)}

/* ---- section head ---- */
.sh{ margin-bottom:clamp(20px,3vw,30px); }
.sh .eyebrow{ display:block; margin-bottom:10px; }
.sh p{ margin:.5em 0 0; }

/* ---- table ---- */
.tbl-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); -webkit-overflow-scrolling:touch; }
table.tbl{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:480px; }
table.tbl th{ text-align:left; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); font-weight:600; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--bg-2); position:sticky; top:0; }
table.tbl td{ padding:11px 14px; border-bottom:1px solid var(--line); }
table.tbl td.num{ text-align:right; }
table.tbl tr:last-child td{ border-bottom:0; }
table.tbl tbody tr:hover{ background:var(--surface); }

/* ---- divider / footer ---- */
.hr{ height:1px; background:var(--line); border:0; margin:0; }
.footer{ border-top:1px solid var(--line); padding:34px 0 44px; color:var(--dim); font-size:13.5px; }
.footer a{ color:var(--dim); } .footer a:hover{ color:var(--text); }
.footer-links{ display:flex; flex-wrap:wrap; gap:16px 22px; }

/* ---- reveal motion ---- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} .chip-live .led{animation:none} }

/* ---- marquee tape ---- */
.tape{ overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-2); }
.tape-track{ display:inline-flex; gap:26px; padding:9px 0; white-space:nowrap; animation:tape 38s linear infinite; }
.tape:hover .tape-track{ animation-play-state:paused; }
.tape .ti{ font-family:var(--mono); font-size:12.5px; color:var(--dim); }
@keyframes tape{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){ .tape-track{animation:none} }

/* utilities */
.center{text-align:center} .mt-0{margin-top:0} .mt-1{margin-top:8px} .mt-2{margin-top:16px} .mt-3{margin-top:24px}
.hide{display:none}