:root{--ink:#0e1a2b;--ink2:#1b2b44;--paper:#f6f7fb;--card:#fff;--line:#dfe4ee;--muted:#55627a;--indigo:#4b3fe0;--sky:#2a8bf2;--mint:#14b88f;--cta:#ffc43d;--cta-h:#ffd266;--r:20px;--w:1080px}
@media(prefers-color-scheme:dark){:root{--paper:#0b1422;--card:#122036;--line:#233350;--muted:#9fb0cc;--ink:#eaf0fb;--ink2:#cdd8ec}.hero,.dark,.foot{--ink:#eaf0fb}}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:12px}
body{font:17px/1.65 "DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);overflow-x:hidden;padding-bottom:78px}
h1,h2,h3{font-family:"Bricolage Grotesque","DM Sans",system-ui,sans-serif;line-height:1.12;letter-spacing:-.02em}
h1{font-size:clamp(2.2rem,7.5vw,4rem);font-weight:800}
h2{font-size:clamp(1.7rem,5vw,2.6rem);font-weight:700;margin-bottom:.6em}
h3{font-size:1.2rem;font-weight:700;margin-bottom:.35em}
p{margin-bottom:1em}
.wrap{max-width:var(--w);margin:0 auto;padding:0 20px}
section{padding:64px 0}
.lead{font-size:1.15rem;color:var(--muted);max-width:60ch}
.center{text-align:center}.center .lead{margin:0 auto 1em}
.tag{display:inline-block;font-weight:700;font-size:.85rem;letter-spacing:.04em;color:var(--indigo);background:rgba(75,63,224,.1);padding:6px 14px;border-radius:99px;margin-bottom:18px}
.btn{display:inline-block;background:var(--cta);color:#14161c;font-weight:800;font-size:1.1rem;letter-spacing:.02em;text-decoration:none;padding:18px 34px;border-radius:14px;box-shadow:0 8px 24px rgba(255,196,61,.35);transition:transform .15s,background .15s;text-align:center}
.btn:hover{background:var(--cta-h);transform:translateY(-2px)}
.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.btn.alt{background:transparent;color:var(--ink);border:2px solid var(--line);box-shadow:none}
.note{font-size:.92rem;color:var(--muted);margin-top:14px}
.hero{background:radial-gradient(900px 400px at 85% -10%,rgba(75,63,224,.35),transparent),linear-gradient(180deg,#0e1a2b,#16284a);color:#fff;padding:56px 0 64px}
.hero .lead,.hero .note{color:#b9c6e0}
.hero .tag{background:rgba(255,255,255,.12);color:#cfd6ff}
.hero-grid{display:grid;gap:40px;align-items:center}
.cover{aspect-ratio:3/4;max-width:320px;margin:0 auto;border-radius:18px;padding:28px 24px;background:linear-gradient(160deg,#4b3fe0,#1d2e63 60%,#0e1a2b);box-shadow:0 30px 60px rgba(0,0,0,.45);display:flex;flex-direction:column;justify-content:space-between;color:#fff;transform:rotate(2deg)}
.cover small{font-size:.7rem;letter-spacing:.12em;opacity:.8}
.cover b{font-family:"Bricolage Grotesque",sans-serif;font-size:1.9rem;line-height:1.05}
.cover span{font-size:.8rem;opacity:.85}
.strip{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;margin-top:30px;max-width:460px}
.strip i{aspect-ratio:1;border-radius:6px;background:var(--w1);opacity:0;animation:pop .35s forwards}
.strip i[data-w="1"]{background:#5b7bff}.strip i[data-w="2"]{background:#8a6bff}.strip i[data-w="3"]{background:#2fc4e8}.strip i[data-w="4"]{background:#ffc43d}
@keyframes pop{to{opacity:1}}
.cap{font-size:.85rem;color:#b9c6e0;margin-top:8px}
.grid{display:grid;gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.card p{color:var(--muted);margin:0;font-size:.98rem}
.card .ic{font-size:1.6rem;display:block;margin-bottom:10px}
.dark{background:var(--ink2);background:linear-gradient(180deg,#0e1a2b,#16284a);color:#fff}
.dark .lead,.dark .card p{color:#b9c6e0}
.dark .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.dark h2,.dark h3{color:#fff}
.week{border-left:5px solid var(--c);}
.week .d{font-weight:700;font-size:.9rem;color:var(--c)}
.week ul{margin:12px 0 0 18px;color:var(--muted);font-size:.95rem}
.flow{display:grid;gap:18px}
.flow>div{border-radius:var(--r);padding:26px}
.bad{background:rgba(220,80,80,.1);border:1px solid rgba(220,80,80,.3)}
.good{background:rgba(20,184,143,.1);border:1px solid rgba(20,184,143,.4)}
.flow b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:1.15rem;margin-bottom:6px}
.eq{font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(1.2rem,4vw,1.8rem);font-weight:800;text-align:center;margin:20px 0 0}
.yes li,.no li{list-style:none;padding:8px 0 8px 32px;position:relative}
.yes li:before{content:"✓";position:absolute;left:0;color:var(--mint);font-weight:800}
.no li:before{content:"✕";position:absolute;left:0;color:#d65050;font-weight:800}
.checks{columns:1;padding:0}
.checks li{list-style:none;padding:8px 0 8px 32px;position:relative;break-inside:avoid}
.checks li:before{content:"✓";position:absolute;left:0;color:var(--mint);font-weight:800}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.chips span{background:var(--card);border:1px solid var(--line);border-radius:99px;padding:8px 16px;font-size:.92rem}
.ph{aspect-ratio:3/4;border:2px dashed var(--line);border-radius:var(--r);display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;color:var(--muted);font-size:.9rem;background:var(--card)}
.ph img{width:100%;height:100%;object-fit:cover;border-radius:16px}
details{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:12px}
summary{cursor:pointer;font-weight:700;padding:18px 22px;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";font-size:1.4rem;line-height:1;color:var(--indigo)}
details[open] summary:after{content:"–"}
details p{padding:0 22px;color:var(--muted)}
.final{text-align:center}
.foot{background:#0b1422;color:#9fb0cc;padding:44px 0;font-size:.88rem}
.foot a{color:#cfd6ff}
.foot p{max-width:80ch}
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(14,26,43,.94);backdrop-filter:blur(8px);transform:translateY(110%);transition:transform .25s}
.sticky.on{transform:none}
.sticky .btn{display:block;padding:15px}
.ty{min-height:100vh;display:flex;align-items:center;padding:40px 0}
.ty .card{text-align:center;padding:40px 24px;max-width:640px;margin:0 auto}
.ty .btn{display:block;font-size:1.25rem;padding:22px}
@media(min-width:760px){
body{padding-bottom:0}.sticky{display:none}
.hero-grid{grid-template-columns:1.25fr .75fr}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.flow{grid-template-columns:1fr 1fr}.checks{columns:2;column-gap:40px}
section{padding:92px 0}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.strip i{opacity:1}}