/* sprintBANK hub v2 — Direction-B tokens, light product-led */
:root{--bg:#F7F8FC;--bg2:#EFF1F8;--card:#fff;--ink:#141821;--muted:#5B6378;--line:#E6E8F0;--hover:#FAFAFF;
--indigo:#5A4FE8;--indigo-d:#4A3FD6;--indigo-tint:#EEF0FF;--good:#0E7048;--good-bg:#E7F6EE;--good-ln:#9FD8B8;
--bz-ink:#8A5A12;--bz-bg:#FBF0DD;--chip-bg:#EEF1F6;--chip-ink:#54607a;
--glow-brand:rgba(90,79,232,.20);--glow-good:rgba(18,154,99,.16);--glow-bz:rgba(185,121,27,.16);
--shadow:0 1px 2px rgba(20,24,31,.05),0 12px 30px -14px rgba(20,24,31,.22);
--shadow-lg:0 2px 6px rgba(20,24,31,.06),0 30px 60px -18px rgba(90,79,232,.25)}
[data-theme="dark"]{--bg:#080B13;--bg2:#0C1120;--card:#111726;--ink:#EEF1F8;--muted:#95A0B8;--line:#212A3E;--hover:#151C2C;
--indigo:#8B7CFF;--indigo-d:#A99CFF;--indigo-tint:#1A1E36;--good:#34D399;--good-bg:#0E2A22;--good-ln:#1F6E52;
--bz-ink:#FBBF57;--bz-bg:#2A2011;--chip-bg:#0C1120;--chip-ink:#95A0B8;
--glow-brand:rgba(139,124,255,.28);--glow-good:rgba(52,211,153,.22);--glow-bz:rgba(251,191,87,.18);
--shadow:0 1px 2px rgba(0,0,0,.5),0 14px 34px -14px rgba(0,0,0,.65);
--shadow-lg:0 2px 6px rgba(0,0,0,.5),0 34px 66px -18px rgba(139,124,255,.28)}
*{box-sizing:border-box}@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,-apple-system,sans-serif;line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;background-image:radial-gradient(60% 60% at 88% -8%,var(--glow-brand) 0%,transparent 60%),radial-gradient(55% 55% at -5% 8%,var(--glow-good) 0%,transparent 55%)}
h1,h2,h3,.logo,.eyebrow,.ringLabel{font-family:'Poppins',sans-serif}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
a{color:var(--indigo);text-decoration:none}a:hover{text-decoration:underline}
/* header */
header.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar{display:flex;align-items:center;gap:18px;padding-top:14px;padding-bottom:14px}
.logo{font-weight:800;letter-spacing:-.01em;font-size:21px;color:var(--ink)}
.logo .b{color:var(--indigo)}.logo:hover{text-decoration:none}
nav.main{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap}
nav.main a{color:var(--muted);font-weight:600;font-size:14px;padding:6px 2px}
@media (max-width:560px){nav.main{gap:2px 10px}nav.main a{font-size:13px;padding:8px 4px}}
nav.main a:hover{color:var(--ink);text-decoration:none}
nav.main a[aria-current="page"]{color:var(--indigo)}
nav.main a.appcta{color:#fff;background:var(--indigo);font-weight:700;padding:8px 14px;border-radius:10px;align-self:center}
nav.main a.appcta:hover{color:#fff;background:var(--indigo-d)}
[data-theme="dark"] nav.main a.appcta{background:#5A4FE8}
.theme-btn{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:9px 13px;min-height:40px;cursor:pointer;font-size:14px}
/* buttons — pills */
.btn{display:inline-block;background:var(--indigo);color:#fff;font-weight:700;padding:14px 26px;border-radius:14px;border:0;cursor:pointer;font-size:15.5px;box-shadow:0 8px 22px -8px var(--glow-brand);transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.btn:hover{background:var(--indigo-d);text-decoration:none;transform:translateY(-2px);box-shadow:0 14px 30px -8px var(--glow-brand)}
[data-theme="dark"] .btn{background:#5A4FE8}
[data-theme="dark"] .btn:hover{background:#4A3FD6}
.btn:focus-visible,.btn.ghost:focus-visible{outline:2px solid var(--indigo);outline-offset:3px}
.btn.ghost{background:var(--card);color:var(--indigo);border:1.5px solid var(--indigo)}
.btn.ghost:hover{background:var(--indigo-tint)}
.btn.big{padding:16px 30px;font-size:16.5px}
.fine{color:var(--muted);font-size:13.5px;margin-top:12px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
/* legacy hero (inner pages) */
.hero{padding:64px 0 36px}
h1{font-size:clamp(32px,5vw,46px);line-height:1.1;letter-spacing:-.025em;margin:0 0 16px;font-weight:800}
.sub{color:var(--muted);font-size:clamp(16px,2.2vw,19px);max-width:44em;margin:0 0 24px}
/* v2 hero */
.hero2{padding:56px 0 30px}
.heroGrid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.hero2 h1{font-size:clamp(38px,5.6vw,62px);line-height:1.04;letter-spacing:-.03em}
.hl{position:relative;white-space:nowrap}
.hl::after{content:"";position:absolute;left:-2%;right:-2%;bottom:6%;height:38%;background:color-mix(in srgb,var(--indigo) 22%,transparent);border-radius:6px;z-index:-1;transform:rotate(-1deg)}
.heroCanvas{position:relative;border-radius:26px;padding:34px 26px;background:radial-gradient(120% 120% at 20% 0%,var(--indigo-tint) 0%,transparent 55%),radial-gradient(100% 100% at 100% 100%,color-mix(in srgb,var(--good-bg) 70%,transparent) 0%,transparent 50%),var(--card);border:1px solid var(--line);box-shadow:var(--shadow-lg);overflow:hidden}
.heroCanvas::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:22px 22px;opacity:.35;pointer-events:none}
.cluster{position:relative;display:flex;flex-direction:column;gap:16px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow)}
.panel.tilt1{transform:rotate(-1.2deg)}.panel.tilt2{transform:rotate(.9deg)}
/* readiness ring */
.ringRow{display:flex;align-items:center;gap:18px}
.ring{--p:78;width:96px;height:96px;border-radius:50%;flex:0 0 auto;background:conic-gradient(var(--good) calc(var(--p)*1%),var(--chip-bg) 0);display:grid;place-items:center}
.ring>div{width:72px;height:72px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-weight:800;font-size:20px}
.ringLabel{font-weight:800;font-size:17px;margin:0 0 2px}
.ringSub{color:var(--muted);font-size:13.5px;margin:0}
.readyTag{display:inline-block;margin-top:8px;background:var(--good-bg);color:var(--good);font-weight:700;font-size:12px;padding:3px 10px;border-radius:999px}
/* mini question card */
.qcard .qtxt{font-weight:600;font-size:14.5px;margin:0 0 12px;line-height:1.45}
.opt{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13.5px;color:var(--muted);margin-bottom:8px}
.opt.correct{border-color:var(--good-ln);background:var(--good-bg);color:var(--ink)}
.opt .mk{font-weight:800;color:var(--good);flex:0 0 auto}
.expl{font-size:12.5px;color:var(--muted);border-left:3px solid var(--good-ln);padding:2px 0 2px 10px;margin-top:10px}
/* chips */
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{background:var(--chip-bg);color:var(--chip-ink);font-weight:700;font-size:12.5px;padding:7px 12px;border-radius:999px;border:1px solid var(--line)}
.chip.acc{background:var(--indigo-tint);color:var(--indigo)}
/* proof band */
.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:34px 0 8px}
.proof .p{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px 22px;box-shadow:var(--shadow)}
.proof .p b{display:block;font-size:17px;letter-spacing:-.01em;margin-bottom:4px}
.proof .p span{color:var(--muted);font-size:14px}
/* cards (products) */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin:28px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.card h2,.card h3{margin:10px 0 8px;font-size:21px;letter-spacing:-.015em}
.card p{color:var(--muted);font-size:15px;margin:0 0 16px}
.badge{display:inline-block;font-size:12px;font-weight:700;padding:4px 11px;border-radius:999px}
.badge.live{background:var(--good-bg);color:var(--good)}
.badge.dev{background:var(--indigo-tint);color:var(--indigo)}
.badge.soon{background:var(--bz-bg);color:var(--bz-ink)}
/* legacy feat grid (inner pages) */
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:24px 0}
.feat .card{padding:18px}.feat h3{font-size:16px;margin:0 0 6px}.feat p{font-size:14px;margin:0}
/* bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin:26px 0}
.bento .bx{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow)}
.bx.w3{grid-column:span 3}.bx.w2{grid-column:span 2}.bx.w4{grid-column:span 4}.bx.w6{grid-column:span 6}
.bx h3{margin:0 0 6px;font-size:17px;letter-spacing:-.01em}
.bx p{margin:0;color:var(--muted);font-size:14px}
.bx .ico{font-size:20px;margin-bottom:10px;display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--indigo-tint)}
/* Brilliant cues — colored product tiles + eyebrow (v0.4) */
.cards .card{--accent:var(--indigo);position:relative;overflow:hidden}
.cards .card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--accent)}
.cards .card:has(.badge.live){--accent:var(--good)}
.cards .card:has(.badge.dev){--accent:var(--indigo)}
.cards .card:has(.badge.soon){--accent:var(--bz-ink)}
.cards .card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 30px 60px -20px color-mix(in srgb,var(--accent) 30%,transparent)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--indigo);background:var(--indigo-tint);border:1px solid var(--line);padding:6px 13px;border-radius:999px;margin-bottom:18px}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px var(--good-bg)}
@media(prefers-reduced-motion:no-preference){.eyebrow .dot{animation:sbpulse 2.4s ease-in-out infinite}}
@keyframes sbpulse{0%,100%{box-shadow:0 0 0 3px var(--good-bg)}50%{box-shadow:0 0 0 6px transparent}}
a:focus-visible,nav.main a:focus-visible,.opt:focus-visible,.theme-btn:focus-visible{outline:2px solid var(--indigo);outline-offset:2px;border-radius:6px}
.bx.spot{background:linear-gradient(135deg,var(--indigo-tint),var(--card) 70%)}
/* screenshots */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:26px 0}
.shotFrame{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:10px;box-shadow:var(--shadow);transition:transform .15s ease}
.shotFrame:hover{transform:translateY(-3px)}
.shotFrame img{width:100%;display:block;border-radius:10px;border:1px solid var(--line)}
.shotFrame figcaption{font-size:13px;color:var(--muted);padding:10px 6px 4px;text-align:center}
/* strip / notice / checks */
.strip{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px 24px;margin:30px 0;display:flex;gap:16px;align-items:center;flex-wrap:wrap;box-shadow:var(--shadow)}
.strip img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.strip p{margin:0;font-size:15px}.strip .who{color:var(--muted);font-size:13px}
section{padding:8px 0 28px}
h2.sec{font-size:clamp(22px,3vw,30px);letter-spacing:-.02em;margin:30px 0 8px}
.lead{color:var(--muted);max-width:46em}
.notice{background:var(--indigo-tint);border:1px solid color-mix(in srgb,var(--indigo) 25%,var(--line));border-left:4px solid var(--indigo);border-radius:14px;padding:16px 18px;font-size:14.5px;max-width:none;box-shadow:var(--shadow)}
ul.checks{padding-left:0;list-style:none;max-width:46em}
ul.checks li{padding:8px 0 8px 32px;position:relative;color:var(--ink);font-size:15px}
ul.checks li::before{content:"✓";position:absolute;left:2px;top:6px;color:var(--good);font-weight:800;background:var(--good-bg);width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px}
/* CTA banner */
.ctaBanner{background:linear-gradient(135deg,#5A4FE8,#4A3FD6);border-radius:24px;padding:40px 34px;margin:40px 0 10px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;box-shadow:var(--shadow-lg)}
.ctaBanner h2{margin:0 0 6px;font-size:clamp(22px,3.4vw,32px);letter-spacing:-.02em;color:#fff}
.ctaBanner p{margin:0;color:#E9E7FF;font-size:15px}
.ctaBanner .btn{background:#fff;color:#4A3FD6}
.ctaBanner .btn:hover{background:#F0F1FF}
/* Banner is pinned to the light indigo ramp in both themes, so the focus ring
   must be too: var(--indigo) is #5A4FE8 in light = the gradient start = 1:1. */
.ctaBanner .btn:focus-visible{outline-color:#fff}
/* forms */
form.capture{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px;max-width:520px;margin:20px 0;box-shadow:var(--shadow)}
form.capture label{display:block;font-weight:600;font-size:14px;margin:12px 0 6px}
form.capture input,form.capture select{width:100%;padding:12px 13px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-family:inherit;font-size:16px}
form.capture button{margin-top:16px}
.hp{display:none}
/* footer */
footer.site{border-top:1px solid var(--line);margin-top:52px;padding:28px 0 44px;color:var(--muted);font-size:13px}
footer.site .links{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:12px}
footer.site .footTop{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start;margin-bottom:16px}
footer.site .footTop .links{margin-bottom:0}
footer.site .links a:hover{color:var(--ink)}
.socials{display:flex;gap:12px}
.socials a{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;color:var(--muted);transition:color .12s,border-color .12s,transform .12s}
.socials a:hover{color:var(--indigo);border-color:var(--indigo);transform:translateY(-2px);text-decoration:none}
.socials svg{display:block}
footer.site .links a{color:var(--muted)}
.disc{font-size:12px;color:var(--muted);max-width:60em}
table.simple{border-collapse:collapse;width:100%;max-width:640px;font-size:14px}
table.simple td,table.simple th{border:1px solid var(--line);padding:8px 10px;text-align:left}
/* responsive */
@media(max-width:880px){.heroGrid{grid-template-columns:1fr;gap:28px}.bento{grid-template-columns:repeat(2,1fr)}.bx.w3,.bx.w2,.bx.w4{grid-column:span 2}.bx.w6{grid-column:span 2}.hero2{padding:38px 0 20px}}
@media(max-width:520px){.bento{grid-template-columns:1fr}.bx.w3,.bx.w2,.bx.w4,.bx.w6{grid-column:span 1}}
/* app showcase (PMP page) */
.appShow{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin:26px 0}
.appShow .panel{padding:20px}
.tagRow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tag{font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--indigo-tint);color:var(--indigo)}
.tag.mut{background:var(--chip-bg);color:var(--chip-ink);letter-spacing:.04em}
.why{border-left:3px solid var(--good-ln);padding:4px 0 4px 12px;margin-top:12px}
.why b{display:block;font-size:11.5px;letter-spacing:.05em;color:var(--good);margin-bottom:2px}
.why p{margin:0;font-size:13px;color:var(--muted)}
.why.bad{border-color:#F0B6C1}
.why.bad b{color:#C2334D}
[data-theme="dark"] .why.bad{border-color:#7A2A3A}
[data-theme="dark"] .why.bad b{color:#F0667F}
.statRow{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:10px 2px;font-size:14px}
.statRow:last-of-type{border-bottom:0}
.statRow b{font-size:14px}
.statRow span{color:var(--muted)}
.mpair{display:flex;align-items:center;gap:10px;border:1.5px solid var(--good-ln);background:var(--good-bg);border-radius:12px;padding:10px 12px;font-size:13px;margin-bottom:8px}
.mpair .arr{color:var(--good);font-weight:800}
.mnote{font-size:12.5px;color:var(--muted);margin-top:10px}
/* v0.3 — interactive quiz + svg icons */
.bx .ico svg,.tag svg{display:block}
.bx .ico{color:var(--indigo)}
[data-quiz] .opt{cursor:pointer;transition:border-color .12s ease,background .12s ease}
[data-quiz] .opt:hover{border-color:var(--indigo);background:var(--indigo-tint)}
[data-quiz].answered .opt{cursor:default}
[data-quiz].answered .opt:hover{border-color:var(--line);background:transparent}
[data-quiz].answered .opt.correct:hover{border-color:var(--good-ln);background:var(--good-bg)}
.opt.wrong{border-color:#F0B6C1;background:#FBE9EC;color:var(--ink)}
[data-theme="dark"] .opt.wrong{border-color:#7A2A3A;background:#341520}
.opt.wrong .mk{color:#C2334D}
[data-theme="dark"] .opt.wrong .mk{color:#F0667F}
[data-quiz] .expl{display:none}
[data-quiz].answered .expl{display:block}
.qhint{font-size:11.5px;font-weight:800;letter-spacing:.06em;color:var(--indigo);margin:0 0 10px}
.qfoot{display:none;margin-top:12px;font-size:13.5px}
[data-quiz].answered .qfoot{display:block}