/* ===== шрифты ===== */
@font-face{font-family:Unbounded;font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/unbounded-cyrillic-700-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Unbounded;font-weight:900;font-style:normal;font-display:swap;src:url(/assets/fonts/unbounded-cyrillic-900-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Unbounded;font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/unbounded-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Unbounded;font-weight:900;font-style:normal;font-display:swap;src:url(/assets/fonts/unbounded-latin-900-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Onest;font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/onest-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Onest;font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/onest-cyrillic-700-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Onest;font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/onest-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Onest;font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/onest-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ===== токены ===== */
:root{
--ink:#14123F;--blue:#3A2CF5;--lemon:#EFFF4A;--pink:#FF4E98;--paper:#F7F6FF;
--d:'Unbounded',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
--b:'Onest',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
--maxw:1200px;
--gutter:clamp(16px,4.6vw,40px);
--sec:clamp(56px,9vw,104px);
--r:clamp(16px,2.2vw,22px);
--shadow:clamp(4px,.6vw,6px);
--fs-body:clamp(16px,.3vw + 15px,18px);
--fs-lead:clamp(17px,.55vw + 15px,20px);
--ring:rgba(58,44,245,.4);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-gutter:stable;color-scheme:light}
body,h1,h2,h3,p,ul,figure{margin:0}
body{font:400 var(--fs-body)/1.55 var(--b);background:var(--paper);color:var(--ink);overflow-x:clip;min-width:320px;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
button{font-family:inherit;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.hero :focus-visible,.final :focus-visible,.themes :focus-visible,.lb :focus-visible,.top :focus-visible{outline-color:var(--lemon)}

.wrap{width:100%;max-width:calc(var(--maxw) + var(--gutter)*2);margin-inline:auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.narrow{max-width:calc(820px + var(--gutter)*2)}
h1,h2,h3{font-family:var(--d);line-height:1.12;letter-spacing:-.02em;overflow-wrap:break-word}
h2{font-size:clamp(25px,3.4vw + 8px,46px);font-weight:900;max-width:20ch;text-wrap:balance}
.sec{padding-block:var(--sec)}
.alt{background:#fff}
.lead{font-size:var(--fs-lead);max-width:54ch;opacity:.85;margin-top:14px}
.center{text-align:center}
.note{margin-top:22px;font-size:.9em;opacity:.75;max-width:60ch}
.fine{font-size:clamp(13px,.2vw + 12.5px,14.5px);line-height:1.45;opacity:.85;margin-top:14px;max-width:52ch}
.fine.center{margin-inline:auto}

/* ===== кнопки ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;border:0;cursor:pointer;font:900 clamp(15px,.5vw + 13.5px,18px)/1.2 var(--d);background:var(--lemon);color:var(--ink);padding:.95em 1.7em;border-radius:99px;box-shadow:0 var(--shadow) 0 var(--ink);transition:transform .12s,box-shadow .12s;text-align:center;max-width:100%;text-decoration:none}
.btn:active{transform:translateY(var(--shadow));box-shadow:0 0 0 var(--ink)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:0 var(--shadow) 0 var(--ink)}
.btn.big{font-size:clamp(16px,1.2vw + 12px,23px);padding:1.05em 2em}
.pulse{animation:pl 2.4s ease-out infinite}
.hero .pulse,.final .pulse{--ring:rgba(239,255,74,.55)}
@keyframes pl{
0%{box-shadow:0 var(--shadow) 0 var(--ink),0 0 0 0 var(--ring)}
70%,100%{box-shadow:0 var(--shadow) 0 var(--ink),0 0 0 18px transparent}}
.link{background:none;border:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0}
.mini{font:700 14px/1 var(--b);border:0;border-radius:99px;background:var(--lemon);color:var(--ink);padding:9px 16px;cursor:pointer}

@media(hover:hover){
.btn:not(:disabled):hover{transform:translateY(calc(var(--shadow)/2));box-shadow:0 calc(var(--shadow)/2) 0 var(--ink)}
.link:hover{text-decoration-thickness:2px}
}

/* ===== верхняя строка ===== */
.top{background:var(--ink);color:#fff;text-align:center;font-size:clamp(13px,.3vw + 12px,15px);line-height:1.3;padding:calc(9px + env(safe-area-inset-top,0px)) var(--gutter) 9px}
.top b{color:var(--lemon);font-weight:700}

/* ===== hero ===== */
.hero{position:relative;background:var(--blue);color:#fff;padding:clamp(28px,5vw,56px) 0 calc(clamp(48px,8vw,96px) + 18px);overflow:hidden;border-bottom:4px solid var(--ink)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18px;background:var(--lemon);border-top:4px solid var(--ink)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,5vw,48px);align-items:center}
.logo{display:block;font:900 clamp(18px,1vw + 15px,22px)/1 var(--d);margin-bottom:clamp(22px,4vw,36px)}
.hero h1{font-size:clamp(28px,3.9vw + 10px,60px);font-weight:900}
.hero h1 em{font-style:normal;background:var(--lemon);color:var(--ink);padding:0 .12em;border-radius:.14em;display:inline-block;transform:rotate(-2deg);margin-top:.08em}
.hero .lead{color:#fff;opacity:.94;margin:clamp(16px,2.4vw,22px) 0 clamp(20px,3vw,28px)}
.hero .fine{opacity:.85}
.perks{display:flex;gap:8px 20px;flex-wrap:wrap;margin-top:clamp(18px,3vw,26px);list-style:none;padding:0;font-size:clamp(14px,.3vw + 13px,16px)}
.perks li::before{content:"✓ ";color:var(--lemon);font-weight:900}
.fan{position:relative;aspect-ratio:1/1;width:100%;max-width:560px;margin-inline:auto;container-type:inline-size}
.fan img{position:absolute;width:76%;left:12%;height:auto;aspect-ratio:16/9;border:2px solid var(--ink);border-radius:clamp(8px,1.4cqw,14px);box-shadow:0 20px 50px rgba(10,5,80,.5);transition:transform .5s cubic-bezier(.2,.8,.2,1);background:#fff}
.fan img:nth-of-type(1){top:3%;transform:rotate(-8deg) translateX(-8%)}
.fan img:nth-of-type(2){top:31%;transform:rotate(4deg) translateX(10%);z-index:2}
.fan img:nth-of-type(3){top:59%;transform:rotate(-3deg) translateX(-6%);z-index:3}
.sticker{position:absolute;right:0;top:0;z-index:5;width:112px;height:112px;width:clamp(84px,24cqw,140px);height:clamp(84px,24cqw,140px);border-radius:50%;background:var(--pink);color:var(--ink);display:grid;place-content:center;text-align:center;font:900 clamp(24px,7.4cqw,38px)/1 var(--d);transform:rotate(12deg);border:4px solid var(--ink);box-shadow:0 7px 0 var(--ink)}
.sticker small{font:700 clamp(9.5px,2.3cqw,12px)/1.15 var(--b);margin-top:4px}
@media(hover:hover){
.fan:hover img:nth-of-type(1){transform:rotate(-12deg) translate(-16%,-8px)}
.fan:hover img:nth-of-type(2){transform:rotate(6deg) translateX(16%)}
.fan:hover img:nth-of-type(3){transform:rotate(-5deg) translate(-10%,8px)}
}
@media(min-width:900px){
.hero .wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.fan{max-width:none}
}

/* ===== сценарии ===== */
.cards{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(12px,1.6vw,18px);margin-top:clamp(24px,4vw,36px)}
.sc{position:relative;display:block;text-align:left;font:400 clamp(14px,.3vw + 13px,16px)/1.4 var(--b);background:#fff;border:3px solid var(--ink);border-radius:var(--r);padding:clamp(14px,2vw,20px) clamp(44px,5vw,52px) clamp(14px,2vw,20px) clamp(16px,2vw,20px);cursor:pointer;color:var(--ink);box-shadow:5px 5px 0 var(--ink);transition:transform .12s,background .12s,box-shadow .12s;min-width:0}
.sc b{display:block;font:700 clamp(14px,.5vw + 12.5px,16.5px)/1.2 var(--d);margin-bottom:8px;overflow-wrap:break-word}
.sc::after{content:"→";position:absolute;right:clamp(14px,2vw,18px);top:clamp(12px,1.8vw,16px);font:900 20px/1 var(--d);color:var(--blue)}
.sc:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink);background:var(--lemon)}
@media(hover:hover){.sc:hover{background:var(--lemon);transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}}
@media(min-width:560px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.cards{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ===== шаги ===== */
.steps{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,28px);margin-top:clamp(26px,4vw,40px)}
.step{border-top:6px solid var(--blue);padding-top:16px}
.step i{display:block;font:900 clamp(40px,4vw + 18px,56px)/1 var(--d);color:var(--blue);font-style:normal}
.step h3{font-size:clamp(17px,.6vw + 15px,20px);margin:10px 0 8px}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ===== примеры слайдов ===== */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.6vw,16px);margin-top:clamp(24px,4vw,36px)}
.shot{padding:0;border:2px solid var(--ink);border-radius:clamp(8px,1.2vw,12px);overflow:hidden;cursor:zoom-in;background:#fff;transition:transform .2s;display:block;line-height:0;min-width:0}
.shot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
@media(hover:hover){.shot:hover{transform:scale(1.04) rotate(-.6deg)}}
@media(min-width:760px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.grid + .note + .center{margin-top:clamp(26px,4vw,38px)}

/* ===== темы ===== */
.themes{background:var(--ink);color:#fff}
.tgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,2.4vw,24px);margin:clamp(26px,4vw,38px) auto 0;max-width:620px}
.tcard{background:#26235f;border-radius:var(--r);padding:clamp(10px,1.4vw,14px) clamp(10px,1.4vw,14px) clamp(16px,2vw,20px);min-width:0}
.tcard img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px;border:2px solid rgba(255,255,255,.25)}
.tcard figcaption{padding:14px 6px 0}
.tcard b{display:block;font:900 clamp(20px,1vw + 16px,24px)/1.2 var(--d)}
.tcard span{opacity:.85;font-size:.92em}
.tcard.neon{box-shadow:0 0 0 3px #00F0FF,0 0 24px #FF00D4;background:#0b0b1f}
@media(min-width:860px){.tgrid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}}

/* ===== истории ===== */
.vir{background:var(--pink);color:var(--ink);overflow:hidden}
.reels{display:flex;gap:clamp(14px,2vw,22px);overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding:clamp(28px,4vw,40px) var(--gutter) 30px;margin-inline:calc(var(--gutter) * -1);scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);scrollbar-width:thin;scrollbar-color:var(--ink) transparent}
.reels::-webkit-scrollbar{height:8px}
.reels::-webkit-scrollbar-thumb{background:var(--ink);border-radius:9px}
.phone{flex:0 0 clamp(150px,42vw,236px);aspect-ratio:9/16;border-radius:clamp(22px,3vw,30px);border:6px solid var(--ink);position:relative;overflow:hidden;scroll-snap-align:start;background:var(--ink);box-shadow:0 10px 0 var(--ink)}
.phone img{width:100%;height:100%;object-fit:cover;display:block}
.phone::before{content:"";position:absolute;top:8px;left:50%;width:54px;height:6px;margin-left:-27px;border-radius:9px;background:rgba(255,255,255,.7);z-index:2}
.phone::after{content:"";position:absolute;left:12px;right:12px;bottom:9px;height:4px;border-radius:9px;background:linear-gradient(90deg,#fff 34%,rgba(255,255,255,.4) 34%);z-index:2}

/* ===== ограничения ===== */
.lim{border:3px solid var(--ink);border-radius:var(--r);padding:clamp(22px,4vw,36px);background:#fff;box-shadow:clamp(5px,1vw,8px) clamp(5px,1vw,8px) 0 var(--ink)}
.lim ul{margin-top:clamp(16px,2.4vw,22px);padding:0;list-style:none;max-width:64ch;font-size:var(--fs-lead)}
.lim li{margin-bottom:12px;padding-left:34px;position:relative}
.lim li:last-child{margin-bottom:0}
.lim li::before{content:"✕";position:absolute;left:0;top:0;font-weight:900;color:var(--pink)}

/* ===== faq ===== */
details{border-bottom:2px solid var(--ink)}
details:first-of-type{margin-top:clamp(20px,3vw,28px);border-top:2px solid var(--ink)}
summary{font:700 clamp(16px,.5vw + 14.5px,19px)/1.35 var(--b);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:clamp(14px,2vw,18px) 0}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:900 24px/1 var(--d);flex:none;color:var(--blue)}
details[open] summary::after{content:"–"}
details p{padding:0 0 clamp(14px,2vw,18px);max-width:64ch;opacity:.9}
@media(hover:hover){summary:hover{color:var(--blue)}}

/* ===== финал, seo, подвал ===== */
.final{background:var(--blue);color:#fff;text-align:center;padding:clamp(60px,9vw,96px) 0 clamp(68px,10vw,116px)}
.final h2{margin:0 auto 16px;max-width:16ch}
.final p{margin:0 auto clamp(22px,3.4vw,32px);font-size:var(--fs-lead);max-width:48ch}
.seo p{margin-top:16px;opacity:.88}
.seo h2{max-width:24ch}
footer{padding:clamp(24px,4vw,36px) 0 clamp(28px,4vw,40px);font-size:clamp(13px,.2vw + 12.5px,14.5px);text-align:center}
footer p{margin:0 auto 8px;max-width:70ch;opacity:.8}

/* ===== нижняя кнопка на мобильном ===== */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px max(14px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px));background:linear-gradient(rgba(247,246,255,0),var(--paper) 38%);display:none;transform:translateY(115%);visibility:hidden;transition:transform .25s ease,visibility 0s .25s}
.sticky.on{transform:none;visibility:visible;transition:transform .25s ease}
.sticky .btn{width:100%;--ring:rgba(58,44,245,.35)}
@media(max-width:859px){
.sticky{display:block}
footer{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}

/* ===== модалки и лайтбокс ===== */
.modal{position:fixed;inset:0;z-index:100;background:rgba(20,18,63,.82);display:none;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.modal.on{display:grid}
.mc{position:relative;background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:var(--r);padding:clamp(20px,4vw,30px);max-width:480px;width:100%;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;outline:0}
.mc.wide{max-width:640px}
.mc h3{font-size:clamp(18px,1vw + 15px,22px);margin:0 36px 16px 0}
.mc h4{font:700 16px/1.3 var(--b);margin:20px 0 6px}
.mc p,.mc li{font-size:15px;line-height:1.55}
.mc p+p{margin-top:8px}
.mc ul{margin:6px 0 0;padding-left:20px}
.mc li+li{margin-top:4px}
.mc a{color:var(--blue);text-underline-offset:3px;overflow-wrap:anywhere}
.mc code{background:var(--paper);padding:1px 6px;border-radius:6px;font-size:.92em}
.mc .btn{width:100%;margin-top:18px}
.mc .opts+.btn{margin-top:8px}
.x{position:absolute;right:8px;top:6px;width:44px;height:44px;border:0;background:none;font-size:32px;line-height:1;cursor:pointer;color:var(--ink);display:grid;place-items:center;border-radius:50%}
@media(hover:hover){.x:hover{background:var(--paper)}}
.o{display:block;width:100%;text-align:left;font:700 clamp(16px,.3vw + 15px,17px)/1.3 var(--b);border:2px solid var(--ink);background:#fff;color:var(--ink);padding:14px 18px;border-radius:14px;margin-bottom:10px;cursor:pointer;min-height:52px}
.o[aria-checked=true]{background:var(--ink);color:#fff}
@media(hover:hover){.o:not([aria-checked=true]):hover{background:var(--paper)}}
.dk{opacity:.8;text-align:center;margin:16px auto 0}
.lb[hidden]{display:none}
.lb{position:fixed;inset:0;z-index:120;background:rgba(20,18,63,.94);display:grid;place-items:center;padding:56px max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));cursor:zoom-out}
.lb img{max-width:min(1100px,100%);max-height:100%;width:auto;height:auto;border-radius:12px;background:#fff}
.lb .x{color:#fff;top:max(8px,env(safe-area-inset-top,0px));right:max(8px,env(safe-area-inset-right,0px));font-size:36px}
@media(hover:hover){.lb .x:hover{background:rgba(255,255,255,.16)}}

/* ===== 404 ===== */
.nf{padding:clamp(72px,16vw,140px) var(--gutter);text-align:center}
.nf h1{font-size:clamp(26px,5vw + 8px,52px);margin-bottom:16px;font-weight:900}
.nf p{margin-bottom:28px;opacity:.85}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{.top,.sticky,.modal,.lb{display:none!important}}