:root{--bg:#FFF4EC;--ink:#2A0F3D;--muted:#6B5578;--line:#E9D3E2;--card:#FFFFFF;--pink:#F0357E;--violet:#7B4DFF;--peach:#FFB27F;--onpink:#fff;--word:rgba(42,15,61,.16);
--d:'Unbounded','Arial Black',Arial,sans-serif;--t:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#16082A;--ink:#FFF1E6;--muted:#BCA6CC;--line:#3A2257;--card:#221040;--word:rgba(255,241,230,.15);--pink:#FF5C9A;--violet:#9C7BFF}}
:root[data-theme="dark"]{--bg:#16082A;--ink:#FFF1E6;--muted:#BCA6CC;--line:#3A2257;--card:#221040;--word:rgba(255,241,230,.15);--pink:#FF5C9A;--violet:#9C7BFF}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.1rem/1.6 var(--t);overflow-x:hidden}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:6px}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px;position:relative}
header{display:flex;justify-content:space-between;align-items:center;padding:20px 0;position:relative;z-index:3}
.brand{font:800 1.6rem var(--d);text-decoration:none;color:var(--ink);letter-spacing:-.05em}
.brand i{font-style:normal;color:var(--pink)}
nav{display:flex;gap:20px;align-items:center;font-weight:700;font-size:.95rem}
nav a{color:var(--muted);text-decoration:none}nav a:hover{color:var(--ink)}
.btn{display:inline-block;font:800 .95rem var(--d);background:var(--pink);color:var(--onpink);padding:15px 26px;border-radius:999px;border:0;text-decoration:none;cursor:pointer;transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .25s}
.btn:hover{transform:translateY(-3px) rotate(-1.5deg);box-shadow:0 10px 0 -2px var(--violet)}
nav .btn{padding:11px 20px;font-size:.8rem;color:var(--onpink)}
.hero{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden;margin-top:-76px;padding-top:76px}
#cv{position:absolute;inset:0;width:100%;height:100%}
.hero .wrap{z-index:2;padding-top:30px;padding-bottom:50px}
.k{font:500 1rem var(--t);color:var(--muted);margin:0 0 6px}
h1{font:800 clamp(2.2rem,6.4vw,5rem)/1.02 var(--d);letter-spacing:-.06em;margin:0}
.slot{display:block;height:1.12em;overflow:hidden;color:var(--pink)}
.slot>span{display:block;transition:transform .7s cubic-bezier(.7,0,.2,1)}
.slot>span>span{display:block;height:1.12em;white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.uz{font:700 1.3rem var(--t);margin:18px 0 26px;min-height:1.6em;color:var(--violet)}
.lead{max-width:44ch;color:var(--muted);margin:0 0 28px}
.hero h1,.hero .k,.uz,.lead,.hero .btn{animation:in .9s both cubic-bezier(.2,.8,.2,1)}
.hero .k{animation-delay:.1s}.hero h1{animation-delay:.25s}.uz{animation-delay:.5s}.lead{animation-delay:.65s}.hero .btn{animation-delay:.8s}
@keyframes in{from{opacity:0;transform:translateY(34px) skewY(3deg)}}
.tape{background:var(--ink);color:var(--bg);overflow:hidden;transform:rotate(-1.4deg);margin:10px -20px;padding:16px 0;white-space:nowrap}
.tape div{display:inline-block;font:800 1.5rem var(--d);letter-spacing:-.04em;animation:run 32s linear infinite}
.tape b{color:var(--peach);margin:0 20px}
@keyframes run{to{transform:translateX(-50%)}}
section{padding:84px 0}
h2{font:800 clamp(1.7rem,4vw,3rem)/1.05 var(--d);letter-spacing:-.05em;margin:0 0 14px;max-width:17ch}
.sub{color:var(--muted);max-width:50ch;margin:0 0 36px}
.rv{opacity:0;transform:translateY(40px);transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1)}.rv.on{opacity:1;transform:none}
.bench{background:var(--violet);color:#fff;border-radius:30px;padding:clamp(22px,4vw,48px)}
.sentence{font:700 clamp(1.5rem,4vw,3rem)/1.4 var(--d);letter-spacing:-.05em;display:flex;flex-wrap:wrap;gap:.1em .3em}
.chunk{font:inherit;letter-spacing:inherit;color:inherit;background:none;border:0;padding:0 .1em;cursor:pointer;border-bottom:4px dashed rgba(255,255,255,.45);transition:all .25s}
.chunk:hover{transform:translateY(-4px)}
.chunk[aria-pressed="true"]{background:#fff;color:#2A0F3D;border-radius:10px;border-bottom-color:transparent;transform:rotate(-2deg)}
.out{margin-top:26px;background:rgba(0,0,0,.22);border-radius:20px;padding:22px 26px;display:grid;grid-template-columns:1fr 1fr;gap:16px;animation:pop .45s both}
@keyframes pop{from{opacity:0;transform:scale(.96)}}
.out small{opacity:.7;font-weight:700;display:block}.out strong{font:800 1.25rem/1.2 var(--d);letter-spacing:-.04em}.out p{grid-column:1/-1;margin:0}
.lv{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.lv li{background:var(--card);border:2px solid var(--ink);border-radius:22px;padding:22px;transition:opacity .8s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.lv li:hover{transform:translateY(-8px) rotate(-1.5deg)}
.lv b{font:800 2.4rem var(--d);letter-spacing:-.06em;color:var(--pink);display:block}
.lv span{font:800 1rem var(--d);letter-spacing:-.03em}.lv p{margin:6px 0 0;color:var(--muted);font-size:1rem}
.quiz{background:var(--card);border:2px solid var(--ink);border-radius:26px;padding:clamp(20px,4vw,42px);max-width:740px;box-shadow:10px 10px 0 var(--peach)}
.q{font:700 clamp(1.2rem,2.8vw,1.7rem)/1.3 var(--d);letter-spacing:-.04em;margin:0 0 20px}
.opts{display:grid;gap:10px}
.opt{font:500 1.05rem var(--t);text-align:left;padding:14px 18px;border-radius:14px;border:2px solid var(--line);background:none;color:var(--ink);cursor:pointer;transition:transform .2s}
.opt:hover:not(:disabled){border-color:var(--violet);transform:translateX(6px)}
.opt.r{border-color:#12915A;background:rgba(18,145,90,.16);animation:pop .4s}.opt.w{border-color:#D12D3F;background:rgba(209,45,63,.14);animation:sh .4s}
@keyframes sh{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.why{color:var(--muted);min-height:3em;margin:14px 0 0}.bar{display:flex;justify-content:space-between;align-items:center;font-weight:700;color:var(--muted)}
.cta{background:var(--ink);color:var(--bg);border-radius:34px;padding:clamp(30px,6vw,70px);margin:30px 0 60px}
.cta .btn{background:var(--peach);color:#2A0F3D;margin-top:18px}
footer{padding-bottom:44px;color:var(--muted)}
@media (max-width:720px){nav a:not(.btn){display:none}.out{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}
.ctap{opacity:.85}