/* StreamersOnline — 2026 design system. Editorial fintech: cream, ink, gold. */
:root{--bg:#FAF8F4;--ink:#0E0D0B;--ink2:#3A3630;--muted:#7A7468;--line:#EAE3D6;--line2:#F1ECE2;--panel:#FFFFFF;--gold:#C99229;--goldD:#8A6212;--gold2:#2D1B00;--soft:#F5F0E6;--green:#0C7A4B;--greenBg:#EAF6F0;--red:#B33030;--redBg:#FBEDED;--sh-sm:0 1px 2px rgba(20,15,5,.05);--sh:0 1px 3px rgba(20,15,5,.05),0 12px 32px -12px rgba(20,15,5,.14);--sh-lg:0 2px 6px rgba(20,15,5,.06),0 32px 64px -24px rgba(20,15,5,.22);--r:16px;--r-lg:22px;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.55;font-feature-settings:"cv11","ss01";text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(1000px 500px at 85% -10%,rgba(201,146,41,.08),transparent 60%),radial-gradient(800px 400px at -10% 20%,rgba(12,122,75,.04),transparent 55%)}
a{color:inherit;text-decoration:none}
::selection{background:rgba(201,146,41,.25)}
button{font-family:inherit}
.site{min-height:100vh;position:relative;z-index:1}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px;position:relative;z-index:1}

/* ---------- TOP BAR ---------- */
.topbar{max-width:1120px;margin:0 auto;padding:20px 22px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:5}
.logo,.brand{font-weight:850;letter-spacing:-.035em;font-size:21px}
.logo b,.brand b{color:var(--gold)}
.logo:after{content:"";display:inline-block;width:8px;height:8px;background:var(--gold);border-radius:50%;margin-left:7px;box-shadow:0 0 0 4px rgba(201,146,41,.15)}
.navlinks{display:flex;gap:6px;align-items:center;color:var(--muted);font-size:14px;font-weight:550}
.navlinks a{padding:8px 13px;border-radius:999px;transition:all .25s var(--ease)}
.navlinks a:hover{color:var(--ink);background:var(--soft)}

/* ---------- TYPE ---------- */
h1{font-family:Fraunces,Georgia,"Times New Roman",serif;font-weight:560;letter-spacing:-.035em;line-height:1.02;font-size:clamp(40px,6.2vw,68px);text-wrap:balance}
h1 em,h1 i{font-style:italic;color:var(--goldD)}
h2{font-family:Fraunces,Georgia,serif;font-weight:560;letter-spacing:-.025em;line-height:1.06;font-size:clamp(28px,4vw,42px);text-wrap:balance}
h3{font-size:19px;font-weight:700;letter-spacing:-.015em;line-height:1.25}
.lead{font-size:clamp(17px,2vw,20px);color:var(--ink2);max-width:56ch;font-weight:420}
.sub{color:var(--muted);font-size:15.5px;font-weight:420}
.plain{color:var(--ink2);font-size:16px}
.fine{color:var(--muted);font-size:12.5px;line-height:1.6}
.micro,.tiny{color:var(--muted);font-size:11.5px;letter-spacing:.01em}

/* ---------- PILLS / EYEBROW ---------- */
.eyebrow,.pill{display:inline-flex;align-items:center;gap:6px;width:max-content;border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:7px 13px;color:var(--gold2);font-size:11.5px;font-weight:750;text-transform:uppercase;letter-spacing:.09em;box-shadow:var(--sh-sm)}
.pill{background:var(--soft)}
.success{background:var(--greenBg);color:var(--green);border-color:rgba(12,122,75,.25)}

/* ---------- BUTTONS ---------- */
.btn,.bigBtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ink);color:#FFF;border:1px solid var(--ink);border-radius:999px;padding:13px 24px;font-size:15px;font-weight:650;letter-spacing:-.01em;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;box-shadow:var(--sh-sm);white-space:nowrap}
.btn:hover,.bigBtn:hover{transform:translateY(-2px);box-shadow:0 6px 20px -6px rgba(14,13,11,.4);background:#1C1A16}
.btn:active,.bigBtn:active{transform:translateY(0)}
.bigBtn{padding:17px 32px;font-size:17px;background:linear-gradient(180deg,#171512,#0E0D0B);box-shadow:0 2px 4px rgba(20,15,5,.1),0 14px 30px -10px rgba(20,15,5,.35),inset 0 1px 0 rgba(255,255,255,.08)}
.btn.ghost,.ghost{background:transparent;color:var(--ink2);border:1px solid var(--line);box-shadow:none;font-weight:600}
.btn.ghost:hover,.ghost:hover{background:var(--panel);border-color:#D9CFBC;color:var(--ink);box-shadow:var(--sh-sm)}

/* ---------- HERO ---------- */
.hero{max-width:1120px;margin:0 auto;padding:76px 22px 56px;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(330px,.88fr);gap:52px;align-items:center;position:relative;z-index:1}
.heroCopy{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.heroV2 h1,.v2 h1{font-size:clamp(42px,6.6vw,72px)}
.ctaRow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:4px}
.quickStrip{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:13px;font-weight:550;margin-top:6px}
.quickStrip>*{display:flex;align-items:center;gap:6px}

/* ---------- CARDS ---------- */
.card,.heroCard,.agentCard,.resultCard,.reportCard,.agentPanel,.moneyPanel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--sh);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.heroCard{padding:28px;box-shadow:var(--sh-lg);border-radius:26px;position:relative;overflow:hidden}
.heroCard::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.card:hover{transform:translateY(-2px);box-shadow:var(--sh-lg)}
.reportCard,.resultCard{border-radius:var(--r)}
.reportTop{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:14px;border-bottom:1px dashed var(--line);margin-bottom:6px}
.reportRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line2);font-size:14.5px}
.reportRow:last-child{border-bottom:none}
.reportRow b{font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ---------- AGENT ORB ---------- */
.agentOrb{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#F5D98B,var(--gold) 55%,#8A6212);box-shadow:0 6px 18px -4px rgba(201,146,41,.55),inset 0 2px 6px rgba(255,255,255,.5);position:relative;animation:orb 4.5s var(--ease) infinite}
.agentOrb::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(201,146,41,.3);animation:ring 4.5s var(--ease) infinite}
@keyframes orb{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes ring{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
@media (prefers-reduced-motion:reduce){.agentOrb,.agentOrb::after{animation:none}}

/* ---------- STATS / STEPS ---------- */
.stat{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;background:var(--soft);border:1px solid var(--line2);border-radius:12px;margin:7px 0;font-size:14px;font-weight:550}
.stat b{font-variant-numeric:tabular-nums}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.steps .card{padding:24px}
.row{display:flex;gap:16px;flex-wrap:wrap}

/* ---------- DEMO / UPLOAD ---------- */
.demoPage{max-width:760px;margin:0 auto;padding:40px 22px}
.demoHero{text-align:center;padding:36px 0 20px}
.demoGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.uploadBox,.fakeUpload{border:1.5px dashed #D9CFBC;background:var(--panel);border-radius:var(--r);padding:30px 22px;text-align:center;cursor:pointer;transition:all .25s var(--ease)}
.uploadBox:hover,.fakeUpload:hover{border-color:var(--gold);background:#FFFDF8;box-shadow:var(--sh)}
.err{color:var(--red);background:var(--redBg);border:1px solid rgba(179,48,48,.25);border-radius:10px;padding:10px 14px;font-size:13.5px;font-weight:550}

/* ---------- SECTIONS ---------- */
.audiences{display:flex;gap:8px;flex-wrap:wrap}
.audiences .pill{text-transform:none;letter-spacing:0;font-weight:600;font-size:13px;color:var(--ink2)}
.faqGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.seoBlock{color:var(--muted);font-size:13px;line-height:1.7;max-width:72ch}
.wide{grid-column:1/-1}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){.hero{grid-template-columns:1fr;padding-top:52px;gap:36px}.heroCard{max-width:560px}}
@media (min-width:681px) and (max-width:1024px){.steps{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.steps{grid-template-columns:1fr}.faqGrid{grid-template-columns:1fr}.demoGrid{grid-template-columns:1fr}}
@media (max-width:680px){.topbar{padding:16px}.navlinks{gap:2px;font-size:13px}.navlinks a{padding:7px 9px}.hero{padding:44px 18px 36px}.bigBtn{width:100%;justify-content:center}.ctaRow{width:100%}.card,.heroCard{padding:20px;border-radius:var(--r)}}
@media (prefers-color-scheme:dark){:root{--bg:#121110;--ink:#F2EEE6;--ink2:#CFC9BE;--muted:#9B948A;--line:#2B2823;--line2:#232019;--panel:#1A1815;--soft:#201D18;--gold:#D8A73E;--goldD:#E4BA5C;--gold2:#F0DFC0;--greenBg:#12261C;--redBg:#2A1414;--sh-sm:0 1px 2px rgba(0,0,0,.4);--sh:0 1px 3px rgba(0,0,0,.4),0 12px 32px -12px rgba(0,0,0,.6);--sh-lg:0 2px 6px rgba(0,0,0,.5),0 32px 64px -24px rgba(0,0,0,.7)}body::before{background:radial-gradient(1000px 500px at 85% -10%,rgba(216,167,62,.07),transparent 60%)}.btn,.bigBtn{background:var(--gold);border-color:var(--gold);color:#1A1509}.btn:hover,.bigBtn:hover{background:#E4BA5C}}