/* Контент-завод · мини-приложение лид-магнита. Стиль — сайт завода + брендбук v1.0 */ @font-face{font-family:'Onest';font-weight:400;font-display:swap;src:url(fonts/onest-400-cyrillic.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-display:swap;src:url(fonts/onest-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,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:500;font-display:swap;src:url(fonts/onest-500-cyrillic.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:500;font-display:swap;src:url(fonts/onest-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Oswald';font-weight:500;font-display:swap;src:url(fonts/oswald-500-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Oswald';font-weight:500;font-display:swap;src:url(fonts/oswald-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Oswald';font-weight:600;font-display:swap;src:url(fonts/oswald-600-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Oswald';font-weight:600;font-display:swap;src:url(fonts/oswald-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} :root{ --red:#E4102B; --red-l:#FF3B52; --ink:#161A1D; --night:#0B0D0F; --card:#0F1214; --paper:#F5F6F7; --muted:rgba(255,255,255,.72); --dim:rgba(255,255,255,.5); --line:rgba(255,255,255,.12); --ease:cubic-bezier(.2,.7,.2,1); --safe-t:max(env(safe-area-inset-top,0px), calc(var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px))); --safe-b:max(env(safe-area-inset-bottom,0px), var(--tg-safe-area-inset-bottom,0px)); --top-h:56px; --cta-h:88px; --H:Oswald,Impact,sans-serif; --T:Onest,Arial,sans-serif; } *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} html,body{background:var(--night);color:#fff} body{font:400 16px/1.5 var(--T);min-height:100vh;min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none} img,video{display:block;max-width:100%} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} input{font:inherit} [hidden]{display:none!important} em{font-style:normal;color:var(--red-l)} /* фон: сетка + красное свечение из угла (брендбук, «фон с сеткой») */ .bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} .bg .grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse at 20% 10%,#000 10%,transparent 65%);mask-image:radial-gradient(ellipse at 20% 10%,#000 10%,transparent 65%);opacity:.45} .bg .glow{position:absolute;width:640px;height:640px;left:-260px;top:-280px;background:radial-gradient(circle,rgba(228,16,43,.35),transparent 62%);transition:transform 1.2s var(--ease),opacity 1.2s} body[data-screen="build"] .bg .glow{transform:translate(160px,120px) scale(1.15)} body[data-screen="done"] .bg .glow{opacity:.6} /* шапка */ .top{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;gap:12px;padding:calc(var(--safe-t) + 10px) 16px 10px;background:linear-gradient(rgba(11,13,15,.92),rgba(11,13,15,.72));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s} .top.scrolled{border-color:var(--line)} .logo{font:600 16px/1 var(--H);letter-spacing:.08em;display:flex;align-items:center;gap:9px;white-space:nowrap} .logo .mk{width:28px;height:28px;flex:none;display:block} .logo .wm{display:flex;flex-direction:column;gap:4px} .logo .wm b{font:600 16px/1 var(--H);letter-spacing:.06em} .logo .wm small{font:500 8px/1 var(--H);letter-spacing:.3em;color:rgba(255,255,255,.55)} .logo i{width:8px;height:8px;border-radius:50%;background:var(--red-l);animation:pulse 2s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,59,82,.6)}70%{box-shadow:0 0 0 10px rgba(255,59,82,0)}100%{box-shadow:0 0 0 0 rgba(255,59,82,0)}} .back{width:36px;height:36px;margin-left:-8px;border-radius:10px;display:none;place-items:center} .back svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} body.can-back:not(.tg) .back{display:grid} .steps{margin-left:auto;display:flex;gap:5px} .steps i{width:14px;height:3px;border-radius:2px;background:rgba(255,255,255,.18);transition:background .4s,width .4s var(--ease)} .steps i.on{background:var(--red-l);width:22px} .steps i.past{background:rgba(255,59,82,.55)} /* экраны */ main{position:relative;z-index:1;overflow-x:hidden;overflow-x:clip} .scr{display:none;position:relative;padding:calc(var(--safe-t) + var(--top-h) + 22px) 16px calc(var(--cta-h) + var(--safe-b) + 28px);max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh} body.tg .scr{padding-bottom:calc(var(--safe-b) + 32px)} .scr.active{display:block;animation:scrIn .55s var(--ease) both} .scr.active.from-back{animation-name:scrInBack} .scr.leaving{display:block;position:absolute;left:0;right:0;top:0;animation:scrOut .3s ease both;pointer-events:none} @keyframes scrIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}} @keyframes scrInBack{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}} @keyframes scrOut{to{opacity:0;transform:translateX(-18px)}} /* появление элементов внутри экрана */ .scr.active .in{animation:rise .8s var(--ease) both} .d2{animation-delay:.12s!important}.d3{animation-delay:.22s!important}.d4{animation-delay:.32s!important}.d5{animation-delay:.42s!important} @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} /* типографика */ .eyebrow{display:flex;align-items:center;gap:10px;font:500 12px/1 var(--H);letter-spacing:.16em;text-transform:uppercase;color:var(--red-l);margin-bottom:14px} .eyebrow::before{content:"";width:40px;height:3px;background:currentColor;border-radius:2px} .title{font:600 clamp(38px,11vw,48px)/1.02 var(--H);letter-spacing:-.005em;margin:18px 0 16px} .title .ln{display:block;overflow:hidden;padding-bottom:.04em} .title .ln>span{display:block} .scr.active .title .ln>span{animation:lnUp .9s var(--ease) both} .scr.active .title .ln:nth-child(2)>span{animation-delay:.1s} .scr.active .title .ln:nth-child(3)>span{animation-delay:.2s} @keyframes lnUp{from{transform:translateY(105%)}to{transform:none}} .title2{font:600 clamp(32px,9vw,40px)/1.04 var(--H);margin:0 0 10px} .lead{font-size:16px;line-height:1.5;color:var(--muted)} .promise{display:flex;align-items:center;gap:10px;margin:14px 0 0;font:500 13px/1.3 var(--H);letter-spacing:.09em;text-transform:uppercase;color:var(--paper)} .promise .dot{width:7px;height:7px;flex:none;border-radius:50%;background:var(--red-l)} .fine{font-size:13px;line-height:1.45;color:var(--dim);margin-top:16px} .center{text-align:center} /* плашка-анонс */ .plaque{display:inline-flex;align-items:center;gap:10px;padding:9px 14px;border:1px solid rgba(228,16,43,.7);border-radius:10px;background:linear-gradient(90deg,rgba(228,16,43,.18),rgba(228,16,43,.04));box-shadow:0 0 34px -10px rgba(228,16,43,.6);font:500 12px/1 var(--H);letter-spacing:.14em;text-transform:uppercase} .plaque i{width:7px;height:7px;border-radius:50%;background:var(--red-l);animation:pulse 2s infinite} /* кнопки */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 22px;border-radius:12px;background:var(--red);color:#fff;font:500 15px/1 var(--H);letter-spacing:.1em;text-transform:uppercase;box-shadow:0 14px 36px -14px rgba(228,16,43,.75);transition:transform .2s var(--ease),background .2s,box-shadow .2s,opacity .2s;user-select:none} .btn:active{transform:scale(.97)} .btn .arr{transition:transform .25s var(--ease)} .btn:hover .arr{transform:translateX(4px)} .btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.28);box-shadow:none} .btn.block{display:flex;width:100%} .btn.white{background:#fff;color:var(--ink);box-shadow:0 14px 36px -18px rgba(255,255,255,.35)} .btn[disabled]{opacity:.38;box-shadow:none;pointer-events:none} .link-btn{display:block;margin:14px auto 0;padding:10px;font:500 13px/1 var(--H);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-decoration:underline;text-decoration-color:rgba(255,59,82,.6);text-underline-offset:5px} .metka-link{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,59,82,.6);text-underline-offset:3px} /* нижняя панель действия (вне Telegram; в Telegram её роль играет MainButton) */ .cta{position:fixed;left:0;right:0;bottom:0;z-index:25;padding:14px 16px calc(var(--safe-b) + 14px);background:linear-gradient(transparent,rgba(11,13,15,.94) 38%);transition:transform .45s var(--ease),opacity .3s} .cta .btn{max-width:448px;margin:0 auto} .cta.hide{transform:translateY(110%);opacity:0;pointer-events:none} body.tg .cta{display:none} /* ===== 1. приветствие ===== */ .phone{background:#050607;border:1px solid var(--line);border-radius:30px;padding:8px;box-shadow:0 40px 80px -40px rgba(0,0,0,.9),0 0 60px -20px rgba(228,16,43,.35)} .scr9{position:relative;aspect-ratio:9/16;border-radius:23px;overflow:hidden;background:#15181b} .example{position:relative;width:64%;max-width:240px;margin:26px auto 30px} .example .phone{animation:floaty 6s ease-in-out infinite} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} .example figcaption{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;text-align:center;font-size:12.5px;line-height:1.35;color:var(--dim)} .example figcaption .dot{width:6px;height:6px;flex:none;border-radius:50%;background:var(--red-l)} .how{list-style:none;display:grid;gap:10px} .how li{display:flex;gap:16px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 18px} .how b{font:600 30px/1 var(--H);color:var(--red-l);min-width:40px} .how strong{display:block;font:600 19px/1.15 var(--H);letter-spacing:.01em} .how span{display:block;font-size:14px;color:var(--muted);margin-top:3px} /* ===== 2. фото, 3. о себе — общие поля ===== */ .demo-fill{display:block;width:100%;margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:12px;font:500 12px/1 var(--H);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .tips{margin-top:18px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:4px 18px} .tips summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 0;font:500 13px/1.3 var(--H);letter-spacing:.1em;text-transform:uppercase} .tips summary::-webkit-details-marker{display:none} .tips summary::after{content:"+";color:var(--red-l);font-size:22px;line-height:1;transition:transform .3s} .tips[open] summary::after{transform:rotate(45deg)} .tips ul{list-style:none;display:grid;gap:10px;padding-bottom:16px} .tips li{position:relative;padding-left:18px;font-size:14px;line-height:1.45;color:var(--muted)} .tips li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:2px;background:var(--red-l)} .tips li b{color:#fff;font-weight:500} .upbar{margin-top:16px} .upbar i{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden} .upbar u{display:block;height:100%;width:0;background:linear-gradient(90deg,#FF6A7C,#E4102B);transition:width .3s} .upbar span{display:block;margin-top:8px;font-size:13px;color:var(--muted)} .field{margin-top:16px} .field label{display:flex;justify-content:space-between;align-items:baseline;font:500 12px/1 var(--H);letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px} .field label small{font:400 12px/1 var(--T);letter-spacing:0;text-transform:none;color:var(--dim)} .field input{width:100%;height:54px;padding:0 16px;border-radius:14px;background:var(--card);border:1px solid var(--line);color:#fff;font-size:16px;outline:none;transition:border-color .2s,box-shadow .2s} .field input::placeholder{color:rgba(255,255,255,.35)} .field input:focus{border-color:var(--red-l);box-shadow:0 0 0 3px rgba(255,59,82,.18)} .field input.bad{border-color:var(--red-l);box-shadow:0 0 0 3px rgba(255,59,82,.18)} .hint{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-size:12.5px;line-height:1.4;color:var(--dim)} .hint b{font-weight:400;white-space:nowrap} /* ===== 6. сборка ===== */ .machine{position:relative;width:min(62vw,230px);aspect-ratio:1;margin:26px auto 18px} .ring{width:100%;height:100%;transform:rotate(-90deg);overflow:visible} .ring circle{fill:none;stroke-width:6} .ring .trk{stroke:rgba(255,255,255,.08)} .ring .val{stroke:url(#rg);stroke-linecap:round;stroke-dasharray:553;stroke-dashoffset:553;transition:stroke-dashoffset .9s var(--ease);filter:drop-shadow(0 0 10px rgba(228,16,43,.7))} .ring .orb{fill:var(--red-l);stroke:none;transform-origin:100px 100px;animation:orb 2.4s linear infinite;filter:drop-shadow(0 0 6px #FF3B52)} @keyframes orb{to{transform:rotate(360deg)}} .machine::before{content:"";position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle,rgba(228,16,43,.22),transparent 70%);animation:breathe 2.6s ease-in-out infinite} @keyframes breathe{0%,100%{transform:scale(.9);opacity:.6}50%{transform:scale(1.05);opacity:1}} .pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:2px} .pct b{font:600 64px/1 var(--H);font-variant-numeric:tabular-nums} .pct span{font:600 26px/1 var(--H);color:var(--red-l);margin-top:-18px} .stage{display:flex;align-items:center;justify-content:center;gap:10px;min-height:24px;font:500 14px/1.2 var(--H);letter-spacing:.12em;text-transform:uppercase;text-align:center} .stage .dot{width:7px;height:7px;flex:none;border-radius:50%;background:var(--red-l);animation:pulse 1.6s infinite} #stageText{transition:opacity .25s} #stageText.swap{opacity:0} .queue{margin:12px auto 0;width:max-content;max-width:100%;padding:8px 14px;border-radius:10px;border:1px solid var(--line);background:var(--card);font-size:13px;color:var(--muted)} .queue b{font:600 16px/1 var(--H);color:#fff;margin-left:4px} .belt{position:relative;margin:22px -16px 0;height:92px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)} .belt-track{display:flex;gap:8px;width:max-content;animation:beltm 22s linear infinite;padding:4px 0} .belt-track div{width:48px;height:84px;flex:none;border-radius:8px;overflow:hidden;background:#1b1f22;border:1px solid var(--line)} .belt-track img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.7)} @keyframes beltm{to{transform:translateX(-50%)}} .belt .scan{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--red-l);box-shadow:0 0 18px 4px rgba(255,59,82,.55)} .note-chat{margin:16px 0 0;text-align:center;font-size:13px;color:var(--dim)} .warm{margin-top:26px} .warm-h{font:500 12px/1 var(--H);letter-spacing:.14em;text-transform:uppercase;color:var(--red-l);margin-bottom:12px} .warm-view{position:relative;min-height:150px} .wcard{position:absolute;inset:0;display:grid;grid-template-columns:88px 1fr;gap:14px;align-items:center;padding:12px;border-radius:18px;background:var(--card);border:1px solid var(--line);opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease);pointer-events:none} .wcard.on{opacity:1;transform:none;pointer-events:auto} .wcard .wimg{aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:#1b1f22;display:grid;place-items:center} .wcard .wimg img{width:100%;height:100%;object-fit:cover} .wcard .wimg svg{width:34px;height:34px;stroke:var(--red-l);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .wcard b{display:block;font:600 18px/1.15 var(--H)} .wcard p{font-size:13.5px;line-height:1.42;color:var(--muted);margin-top:5px} .warm-dots{display:flex;gap:5px;justify-content:center;margin-top:12px} .warm-dots i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.2);transition:width .4s var(--ease),background .4s} .warm-dots i.on{width:18px;background:var(--red-l)} /* ===== 7. готово ===== */ [data-screen="done"]{text-align:left} .burst{position:absolute;left:50%;top:170px;width:0;height:0;pointer-events:none} .burst i{position:absolute;left:-160px;top:-160px;width:320px;height:320px;border-radius:50%;border:2px solid rgba(255,59,82,.6);opacity:0} .scr.active .burst i{animation:ring 1.6s var(--ease) .2s both} .scr.active .burst i:nth-child(2){animation-delay:.4s} .scr.active .burst i:nth-child(3){animation-delay:.6s} @keyframes ring{0%{opacity:.9;transform:scale(.2)}100%{opacity:0;transform:scale(1.6)}} .flash-screen{position:fixed;inset:0;z-index:40;pointer-events:none;background:radial-gradient(circle at 50% 40%,rgba(255,59,82,.55),rgba(11,13,15,0) 60%);opacity:0} .flash-screen.go{animation:fs 1s ease-out both} @keyframes fs{0%{opacity:0}20%{opacity:1}100%{opacity:0}} [data-screen="done"] .plaque{margin-bottom:14px} .reveal{margin-top:0} .player{margin:18px auto 18px;width:74%;max-width:290px} .scr.active .player{animation:pop 1s var(--ease) .15s both} @keyframes pop{0%{opacity:0;transform:translateY(40px) scale(.86) rotate(-3deg)}60%{opacity:1}100%{opacity:1;transform:none}} .phone.big{border-radius:36px;padding:9px;box-shadow:0 50px 90px -40px rgba(0,0,0,.95),0 0 80px -16px rgba(228,16,43,.55)} .phone.big .scr9{border-radius:28px} .phone video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#15181b} .snd{position:absolute;right:10px;bottom:14px;width:42px;height:42px;border-radius:50%;background:rgba(11,13,15,.7);backdrop-filter:blur(6px);display:grid;place-items:center;z-index:2} .snd svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .snd .w{display:none}.snd.on .w{display:inline}.snd.on .x{display:none} .snd.on{background:var(--red)} .vprog{position:absolute;left:12px;right:12px;top:10px;height:3px;border-radius:2px;background:rgba(255,255,255,.25);overflow:hidden;z-index:2} .vprog i{display:block;height:100%;width:0;background:#fff} /* плеер готового ролика (10.10): крупная кнопка Play по центру, пауза — тапом по ролику */ .pl .pl-shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(11,13,15,.18),rgba(11,13,15,.62));transition:opacity .3s var(--ease)} .bigplay{position:absolute;left:50%;top:50%;width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%;background:var(--red);display:grid;place-items:center;z-index:3;cursor:pointer;-webkit-tap-highlight-color:transparent; box-shadow:0 18px 40px -10px rgba(228,16,43,.85),0 0 0 7px rgba(255,59,82,.16);transition:transform .2s var(--ease),opacity .25s,background .2s} .bigplay svg{width:38px;height:38px;fill:#fff;margin-left:6px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))} .bigplay::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid rgba(255,59,82,.6);animation:bpPulse 2.2s var(--ease) infinite;pointer-events:none} .bigplay:active{transform:scale(.88);background:#c40d24} @media (hover:hover){.bigplay:hover{transform:scale(1.06)}} .bigplay:focus-visible{outline:3px solid #fff;outline-offset:6px} @keyframes bpPulse{0%{transform:scale(.92);opacity:.95}100%{transform:scale(1.4);opacity:0}} .pl-lbl{position:absolute;left:0;right:0;top:calc(50% + 60px);z-index:3;text-align:center;pointer-events:none;font:500 12px/1 var(--H);letter-spacing:.14em;text-transform:uppercase;color:#F5F6F7;text-shadow:0 1px 6px rgba(0,0,0,.6);transition:opacity .25s} .pl-wait{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;z-index:3;opacity:0;pointer-events:none;animation:spin .9s linear infinite;transition:opacity .2s} .pl.playing .pl-shade,.pl.playing .pl-lbl{opacity:0} .pl.playing .bigplay{opacity:0;transform:scale(.6);pointer-events:none} .pl.playing.waiting .pl-wait{opacity:1} .pl:not(.playing) .vprog{opacity:.5} @media (prefers-reduced-motion:reduce){.bigplay::before,.pl-wait{animation:none}.bigplay{transition:none}} .funnel{margin-top:44px} .beat{position:relative;padding:22px 0 22px 58px;border-top:1px solid var(--line)} .beat>b{position:absolute;left:0;top:22px;font:600 34px/1 var(--H);color:var(--red-l)} .beat h3{font:600 26px/1.08 var(--H)} .beat p{font-size:15px;line-height:1.5;color:var(--muted);margin-top:8px} .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px} .tags span{padding:7px 10px;border-radius:7px;background:rgba(255,255,255,.06);border:1px solid var(--line);font:500 11px/1 var(--H);letter-spacing:.12em;text-transform:uppercase} .rv.on .tags span{animation:rise .6s var(--ease) both} .rv.on .tags span:nth-child(2){animation-delay:.08s}.rv.on .tags span:nth-child(3){animation-delay:.16s}.rv.on .tags span:nth-child(4){animation-delay:.24s}.rv.on .tags span:nth-child(5){animation-delay:.32s}.rv.on .tags span:nth-child(6){animation-delay:.4s} .marq{margin:4px -16px 26px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden} .marq-row{display:flex;width:max-content;animation:marq 26s linear infinite} .marq span{display:flex;align-items:center;gap:26px;padding-right:26px;font:500 17px/1 var(--H);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);white-space:nowrap} .marq span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--red)} @keyframes marq{to{transform:translateX(-50%)}} .rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .rv.on{opacity:1;transform:none} .offer{position:relative;overflow:hidden;padding:30px 20px 22px;border-radius:26px;background:linear-gradient(160deg,#1a1f23,#0F1214 60%);border:1px solid rgba(255,59,82,.45);box-shadow:0 0 60px -20px rgba(228,16,43,.6)} .offer-glow{position:absolute;right:-140px;top:-160px;width:360px;height:360px;background:radial-gradient(circle,rgba(228,16,43,.35),transparent 62%);pointer-events:none;animation:breathe 5s ease-in-out infinite} .offer>*:not(.offer-glow){position:relative} .badge{display:inline-block;padding:7px 10px;border-radius:7px;background:var(--red);font:500 11px/1 var(--H);letter-spacing:.14em;text-transform:uppercase} .offer-h{font:600 34px/1.03 var(--H);margin:16px 0 12px} .offer p{font-size:15px;line-height:1.5;color:var(--muted)} .offer-list{list-style:none;display:grid;gap:9px;margin:18px 0 22px} .offer-list li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.4} .offer-list li::before{content:"";position:absolute;left:0;top:.2em;width:16px;height:16px;border-radius:50%;background:rgba(228,16,43,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' stroke='%23FF3B52' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat} .btn.mega{position:relative;overflow:hidden;display:flex;width:100%;min-height:64px;font-size:17px;letter-spacing:.1em;margin-bottom:10px;box-shadow:0 18px 50px -12px rgba(228,16,43,.9);animation:megaPulse 2.4s ease-in-out infinite} .btn.mega::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);animation:shine 3.2s ease-in-out infinite} @keyframes shine{0%,55%{left:-60%}100%{left:130%}} @keyframes megaPulse{0%,100%{box-shadow:0 18px 50px -12px rgba(228,16,43,.9),0 0 0 0 rgba(255,59,82,.45)}50%{box-shadow:0 18px 50px -12px rgba(228,16,43,.9),0 0 0 10px rgba(255,59,82,0)}} .formula{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:13px!important;text-align:center;color:var(--dim)!important} .again{margin-top:22px} /* ===== 2. согласие + фото ===== */ .consent{position:relative;display:flex;gap:14px;align-items:flex-start;margin:20px 0 14px;padding:16px;border-radius:16px;background:var(--card);border:1px solid var(--line);cursor:pointer;transition:border-color .3s,background .3s} .consent input{position:absolute;opacity:0;width:1px;height:1px} .consent .cb{flex:none;width:24px;height:24px;margin-top:1px;border-radius:7px;border:1.5px solid rgba(255,255,255,.4);transition:background .2s,border-color .2s,transform .2s var(--ease)} .consent input:checked+.cb{background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' stroke='%23fff' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;border-color:var(--red);transform:scale(1.06)} .consent input:focus-visible+.cb{box-shadow:0 0 0 3px rgba(255,59,82,.35)} .consent.ok{border-color:rgba(255,59,82,.45);background:linear-gradient(100deg,rgba(228,16,43,.1),transparent 70%),var(--card)} .consent.shake{animation:shake .4s} @keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}} .ctext{font-size:14px;line-height:1.45;color:var(--muted)} .inline-link{display:inline;padding:0;font:inherit;color:#fff;text-decoration:underline;text-decoration-color:rgba(255,59,82,.7);text-underline-offset:3px} .slots{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;gap:10px;transition:opacity .3s} .slots.locked{opacity:.4} .slot{position:relative;min-height:110px;border-radius:16px;overflow:hidden;border:1.5px dashed rgba(255,255,255,.22);background:var(--card);text-align:center;transition:border-color .2s,transform .2s var(--ease)} .slot.main{grid-row:1/3;aspect-ratio:3/4;border-color:rgba(255,59,82,.6);background:radial-gradient(ellipse at 50% 0,rgba(228,16,43,.18),transparent 70%),var(--card)} .slot:active{transform:scale(.98)} .slot-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px} .slot-empty .plus{width:48px;height:48px;border-radius:50%;background:var(--red);display:grid;place-items:center;box-shadow:0 10px 30px -8px rgba(228,16,43,.8);margin-bottom:6px} .slot-empty .plus.sm{width:34px;height:34px;background:rgba(255,255,255,.1);box-shadow:none} .slot-empty .plus svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round} .slot-empty b{font:600 17px/1.1 var(--H);letter-spacing:.02em} .slot:not(.main) .slot-empty b{font-size:14px} .slot-empty small{font-size:12px;color:var(--dim)} .slot.filled{border-style:solid;border-color:var(--line)} .slot.filled.main{border-color:rgba(255,59,82,.6)} .slot .pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:thIn .5s var(--ease) both} @keyframes thIn{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}} .slot .nm{position:absolute;inset:0;display:grid;place-items:center;padding:10px;font-size:11px;color:var(--dim);word-break:break-all} .slot .lbl{position:absolute;left:8px;bottom:8px;padding:5px 7px;border-radius:6px;background:var(--red);font:500 10px/1 var(--H);letter-spacing:.12em;text-transform:uppercase} .slot:not(.main) .lbl{background:rgba(11,13,15,.8)} .slot .rm{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;background:rgba(11,13,15,.8);display:grid;place-items:center;backdrop-filter:blur(6px);z-index:2} .slot .rm svg{width:14px;height:14px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round} .slot .warn{position:absolute;left:0;right:0;top:0;padding:6px 44px 6px 8px;background:rgba(228,16,43,.88);font:500 10px/1.2 var(--H);letter-spacing:.05em;text-transform:uppercase;text-align:left} .slot-hint{margin-top:10px;font-size:13px;color:var(--dim);text-align:center} .slot .vid-badge{position:absolute;right:8px;bottom:8px;display:flex;align-items:center;gap:4px;padding:4px 7px;border-radius:6px;background:rgba(11,13,15,.8);font:500 11px/1 var(--H);letter-spacing:.04em} .slot .vid-badge svg{width:10px;height:10px;fill:#fff} .pick-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px} .pick-btns.one{grid-template-columns:1fr} .pick{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border-radius:14px;border:1.5px solid var(--line);background:var(--card);color:#fff;font:600 15px/1 var(--H);letter-spacing:.02em} .pick svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linejoin:round} .pick:active{transform:scale(.98)} #slots.locked~.pick-btns{opacity:.4} /* ===== 4. шаги ===== */ .suggest{display:flex;align-items:center;gap:14px;width:100%;margin:20px 0 14px;padding:14px 16px;border-radius:16px;text-align:left;border:1px solid rgba(255,59,82,.55);background:linear-gradient(100deg,rgba(228,16,43,.2),rgba(228,16,43,.03) 75%),var(--card);box-shadow:0 0 34px -14px rgba(228,16,43,.7);transition:transform .2s var(--ease),opacity .2s} .suggest:active{transform:scale(.985)} .suggest svg{flex:none;width:30px;height:30px;stroke:var(--red-l);fill:none;stroke-width:1.5;stroke-linejoin:round} .suggest b{display:block;font:600 18px/1.1 var(--H);letter-spacing:.02em} .suggest small{display:block;font-size:13px;color:var(--muted);margin-top:3px} .suggest.busy{pointer-events:none} .suggest.busy svg{animation:spin 1.2s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .shagi{list-style:none;display:grid;gap:10px} .shag{position:relative;display:grid;grid-template-columns:36px 1fr;gap:4px 10px;padding:14px 44px 14px 14px;border-radius:16px;background:var(--card);border:1px solid var(--line);animation:rise .5s var(--ease) both;transition:border-color .2s} .shag:focus-within{border-color:rgba(255,59,82,.55)} .shag .n{grid-row:1/3;font:600 24px/1 var(--H);color:var(--red-l);padding-top:6px} .shag input,.shag textarea{width:100%;background:transparent;border:0;outline:none;color:#fff;font:inherit;resize:none} .shag input{font:600 18px/1.25 var(--H);letter-spacing:.01em;padding:4px 0;border-bottom:1px solid var(--line)} .shag textarea{font-size:14.5px;line-height:1.4;color:var(--muted);padding:6px 0 0;min-height:42px;overflow:hidden} .shag input::placeholder,.shag textarea::placeholder{color:rgba(255,255,255,.3)} .shag .del{position:absolute;right:8px;top:10px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--dim)} .shag .del svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round} .shag .del[disabled]{opacity:.2} .shag.miss{border-color:rgba(255,59,82,.8)} .shag.skel input,.shag.skel textarea{color:transparent;background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.14),rgba(255,255,255,.05));background-size:200% 100%;animation:skel 1.2s linear infinite;border-radius:6px;border:0} .shag.skel input::placeholder,.shag.skel textarea::placeholder{color:transparent} @keyframes skel{from{background-position:200% 0}to{background-position:-200% 0}} .add-step{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:10px;padding:14px;border-radius:14px;border:1.5px dashed rgba(255,255,255,.22);font:500 13px/1 var(--H);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .add-step svg{width:16px;height:16px;stroke:var(--red-l);stroke-width:2;fill:none;stroke-linecap:round} .add-step[disabled]{opacity:.3} /* ===== 5. цвет ===== */ .swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin:20px 0 0} .sw{position:relative;width:100%;max-width:46px;aspect-ratio:1;justify-self:center;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);transition:transform .25s var(--ease),box-shadow .25s} .sw:active{transform:scale(.92)} .sw.on{box-shadow:0 0 0 3px var(--night),0 0 0 5px var(--c),0 0 26px -2px var(--c);transform:scale(1.04)} .sw.on::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' stroke='%23fff' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/45% no-repeat} .sw.light.on::after{filter:invert(1)} .sw small{display:none} .sw-cap{margin:12px 0 0;text-align:center;font:500 12px/1 var(--H);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)} /* один раз на почту: строка-предупреждение и экран почты */ .nisha-hint{margin:10px 0 14px;padding:10px 12px;border-radius:10px;background:var(--card);border:1px solid var(--line);font-size:13.5px;line-height:1.45;color:var(--muted)} .nisha-hint b{color:var(--text,#fff)} .odin-raz{margin:16px 0 0;text-align:center;font-size:13px;line-height:1.45;color:var(--dim)} [data-screen="pochta"] .btn.ghost{margin-top:10px} [data-screen="pochta"] .consent{margin-top:14px} /* ===== 7. готово: форматы и файлы ===== */ .fmt-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:18px 0 0;padding:4px;border-radius:12px;background:var(--card);border:1px solid var(--line)} .fmt-tabs button{padding:11px 4px;border-radius:9px;font:500 12.5px/1 var(--H);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);transition:background .25s,color .25s} .fmt-tabs button.on{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 -2px 0 var(--red-l)} .files{display:grid;gap:8px} .frow{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 12px;border-radius:14px;background:var(--card);border:1px solid var(--line)} .fic{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.06);font:600 13px/1 var(--H);letter-spacing:.06em;color:var(--red-l)} .fnm{flex:1;min-width:0} .fnm b{display:block;font:600 16px/1.1 var(--H);letter-spacing:.02em} .fnm small{display:block;font-size:12.5px;color:var(--dim)} .btn.sm{min-height:42px;padding:0 14px;font-size:12.5px;letter-spacing:.08em;gap:6px} .btn.sm svg{width:16px;height:16px} .codeword{margin-top:14px;padding:22px 20px 20px;border-radius:22px;background:var(--card);border:1px solid var(--line);text-align:center} .cw-word{display:inline-block;margin-bottom:12px;padding:10px 18px;border-radius:10px;border:1px solid rgba(228,16,43,.7);background:linear-gradient(90deg,rgba(228,16,43,.2),rgba(228,16,43,.05));box-shadow:0 0 40px -10px rgba(228,16,43,.7);font:600 30px/1 var(--H);letter-spacing:.16em} .codeword p{font-size:14.5px;line-height:1.5;color:var(--muted);margin-bottom:16px} .codeword p b{color:#fff;font-weight:500} .codeword p b.acc{color:var(--red-l);font-family:var(--H);font-weight:600;letter-spacing:.06em} /* тост */ .toast{position:fixed;left:16px;right:16px;bottom:calc(var(--cta-h) + var(--safe-b) + 6px);z-index:50;max-width:448px;margin:0 auto;padding:13px 16px;border-radius:14px;background:#1c2125;border:1px solid var(--line);border-left:3px solid var(--red-l);font-size:14px;line-height:1.4;box-shadow:0 20px 40px -20px #000;opacity:0;transform:translateY(12px);transition:opacity .3s,transform .3s var(--ease);pointer-events:none} body.tg .toast{bottom:calc(var(--safe-b) + 16px)} .toast.on{opacity:1;transform:none} /* ===================================================================== «ВАУ»-доработка (договор docs/бот_ролик/ВАУ_ДОГОВОР_API.md, раздел 4). Всё новое скрыто, пока сервер не прислал данные, — старый сервер видит прежние экраны. Анимации — только transform/opacity: держат 60 к/с на среднем телефоне. ===================================================================== */ /* ----- 1. приветствие: счётчик и галерея ----- */ .counter{display:flex;align-items:center;gap:10px;width:max-content;max-width:100%;margin:16px 0 0;padding:9px 14px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:13.5px;color:var(--muted)} .counter b{font:600 17px/1 var(--H);color:#fff;letter-spacing:.02em;font-variant-numeric:tabular-nums} .counter-pulse{width:7px;height:7px;flex:none;border-radius:50%;background:var(--red-l);animation:pulse 2s infinite} .scr.active .counter{animation:rise .8s var(--ease) .3s both} .gal{margin:0 -16px 28px} .gal-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:0 16px} .gal-h .eyebrow{margin-bottom:12px;white-space:nowrap} .gal-h small{font-size:12px;color:var(--dim);white-space:nowrap} .gal-row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 16px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch} .gal-row::-webkit-scrollbar{display:none} .gi{position:relative;flex:none;width:104px;aspect-ratio:9/16;border-radius:14px;overflow:hidden;scroll-snap-align:start;background:#15181b;border:1px solid var(--line);text-align:left} .gi img{width:100%;height:100%;object-fit:cover} .gi::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(0,0,0,.85))} .gi span{position:absolute;left:8px;right:8px;bottom:8px;z-index:1;font:500 11px/1.2 var(--H);letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gi i{position:absolute;left:50%;top:44%;z-index:1;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:rgba(228,16,43,.9);display:grid;place-items:center;box-shadow:0 6px 20px -4px rgba(228,16,43,.9)} .gi i::before{content:"";margin-left:3px;border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent} .gi:active{transform:scale(.97)} .scr.active .gi{animation:rise .7s var(--ease) both} .scr.active .gi:nth-child(2){animation-delay:.06s}.scr.active .gi:nth-child(3){animation-delay:.12s}.scr.active .gi:nth-child(4){animation-delay:.18s} /* ----- 2. шаги: голос ----- */ .voice{display:flex;align-items:center;gap:14px;width:100%;margin:-4px 0 14px;padding:13px 16px;border-radius:16px;text-align:left;border:1px solid var(--line);background:var(--card);transition:transform .2s var(--ease),border-color .2s} .voice:active{transform:scale(.985)} .voice svg{flex:none;width:28px;height:28px;stroke:var(--red-l);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .voice b{display:block;font:600 18px/1.1 var(--H);letter-spacing:.02em} .voice small{display:block;font-size:13px;color:var(--muted);margin-top:3px} .voice-wait{display:flex;align-items:center;gap:14px;margin:-4px 0 14px;padding:14px 12px 14px 16px;border-radius:16px;border:1px solid rgba(255,59,82,.55);background:linear-gradient(100deg,rgba(228,16,43,.16),transparent 80%),var(--card);animation:rise .5s var(--ease) both} .eq{flex:none;display:flex;align-items:center;gap:3px;height:28px} .eq i{width:3px;height:100%;border-radius:2px;background:var(--red-l);transform:scaleY(.3);animation:eq 1s ease-in-out infinite} .eq i:nth-child(2){animation-delay:.15s}.eq i:nth-child(3){animation-delay:.3s}.eq i:nth-child(4){animation-delay:.45s}.eq i:nth-child(5){animation-delay:.6s} @keyframes eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}} .vw-t{flex:1;min-width:0} .vw-t b{display:block;font:600 16px/1.15 var(--H);letter-spacing:.02em} .vw-t small{display:block;font-size:12.5px;line-height:1.4;color:var(--muted);margin-top:3px} .vw-x{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--dim)} .vw-x svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round} .shag.fresh{animation:fresh 1.1s var(--ease) both} @keyframes fresh{0%{opacity:0;transform:translateY(14px);border-color:var(--red-l)}40%{opacity:1;border-color:var(--red-l);box-shadow:0 0 30px -10px rgba(228,16,43,.9)}100%{transform:none}} /* ----- 3. цвет и стиль ----- */ .styles{margin-top:22px} .styles-h{font:500 12px/1 var(--H);letter-spacing:.14em;text-transform:uppercase;color:var(--red-l);margin-bottom:10px} .style-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px} .st{position:relative;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:var(--card);border:1.5px solid var(--line);text-align:left;transition:border-color .25s,transform .2s var(--ease),box-shadow .25s} .st:active{transform:scale(.97)} .st.on{border-color:var(--red-l);box-shadow:0 0 26px -10px rgba(228,16,43,.9)} .st .st-img{aspect-ratio:4/3;background:#15181b;overflow:hidden} .st .st-img img{width:100%;height:100%;object-fit:cover;object-position:center 30%} .st-ph{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 14%;background:linear-gradient(160deg,#1c2125,#0B0D0F)} .st-ph.light{background:linear-gradient(160deg,#fff,#E9E6DF)} .st-ph i{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.5)} .st-ph.light i{background:rgba(18,20,22,.55)} .st-ph i:first-child{width:70%;height:6px;background:var(--red-l)} .st-ph i:last-child{width:45%} .st b{display:block;padding:9px 10px 0;font:600 14px/1.15 var(--H);letter-spacing:.03em;text-transform:uppercase} .st small{display:block;padding:3px 10px 10px;font-size:11.5px;line-height:1.35;color:var(--dim)} .st.on::after{content:"";position:absolute;top:7px;right:7px;width:20px;height:20px;border-radius:50%;background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' stroke='%23fff' stroke-width='2.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat} /* живой макет ролика */ .mock{position:relative;width:66%;max-width:250px;margin:26px auto 0} .mock-live{position:absolute;left:50%;top:-12px;z-index:3;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--red);font:500 10px/1 var(--H);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;box-shadow:0 8px 20px -6px rgba(228,16,43,.9)} .mock-live i{width:6px;height:6px;border-radius:50%;background:#fff;animation:blink 1.2s ease-in-out infinite} @keyframes blink{50%{opacity:.25}} .mock-cap{margin-top:12px;text-align:center;font-size:12.5px;color:var(--dim)} .mk{--acc:#E4102B;--mk-bg:#0B0D0F;--mk-ink:#fff;--mk-mute:rgba(255,255,255,.7);--mk-card:#15181b;background:var(--mk-bg);font-family:var(--H);color:var(--mk-ink);transition:background .5s,color .5s} .mk.light{--mk-bg:#F2F0EB;--mk-ink:#121416;--mk-mute:rgba(18,20,22,.66);--mk-card:#fff} .mk-glow{position:absolute;right:-40%;top:-25%;width:100%;aspect-ratio:1;background:radial-gradient(circle,var(--acc),transparent 62%);opacity:.42;transition:background .5s;animation:mkGlow 7s ease-in-out infinite alternate} .mk.light .mk-glow{opacity:.22} @keyframes mkGlow{from{transform:translate(0,0)}to{transform:translate(-14%,10%)}} .mk-bars{position:absolute;left:6%;right:6%;top:3%;z-index:2;display:flex;gap:2px} .mk-bars i{flex:1;height:2px;border-radius:1px;background:rgba(128,128,128,.35);overflow:hidden} .mk-bars u{display:block;height:100%;background:var(--mk-ink);transform:scaleX(0);transform-origin:left} .mk-bars i.past u{transform:scaleX(1)} .mk-bars i.on u{animation:mkFill var(--mk-dur,2.6s) linear forwards} @keyframes mkFill{to{transform:scaleX(1)}} .mk-head{position:absolute;left:8%;right:8%;top:8%;z-index:1} .mk-eb{display:flex;align-items:center;gap:5px;font:500 7px/1 var(--H);letter-spacing:.14em;color:var(--acc);transition:color .4s} .mk-eb i{width:14px;height:2px;background:var(--acc);transition:background .4s} .mk-h{margin-top:6px;font:600 17px/1.02 var(--H);text-transform:uppercase;overflow-wrap:anywhere} .mk-h em{color:var(--acc);transition:color .4s} .mk-line{position:relative;display:flex;justify-content:space-between;margin:10px 0 0;height:10px} .mk-line::before{content:"";position:absolute;left:0;right:0;top:4px;height:1.5px;background:var(--acc);opacity:.85} .mk-line i{position:relative;width:5px;height:5px;margin-top:2px;border-radius:50%;background:var(--mk-ink);transition:background .3s} .mk-line i.past{background:var(--acc)} .mk-line u{position:absolute;left:0;right:5px;top:0;height:10px;z-index:1;transition:transform .7s var(--ease),opacity .3s;will-change:transform;pointer-events:none} .mk-line u::before{content:"";position:absolute;left:-2.5px;top:0;width:10px;height:10px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 1.5px var(--mk-ink),0 0 10px var(--acc)} .mk-stage{position:absolute;left:8%;right:8%;top:31%;bottom:13%;z-index:1} .mk-scene{position:absolute;inset:0;opacity:0;transform:translateX(34%) scale(.94);transition:transform .6s var(--ease),opacity .45s;will-change:transform,opacity;pointer-events:none} .mk-scene.on{opacity:1;transform:none} .mk-scene.off{opacity:0;transform:translateX(-34%) scale(.94)} .mk-card{position:relative;width:64%;aspect-ratio:1;margin:0 auto 9px;border-radius:9px;overflow:hidden;border:1.5px solid var(--acc);box-shadow:0 0 24px -2px var(--acc);background:var(--mk-card);transition:border-color .4s,box-shadow .4s} .mk-card img{width:100%;height:100%;object-fit:cover} .mk-scene.on .mk-card img{animation:mkz 3s ease-out both} @keyframes mkz{from{transform:scale(1.14)}to{transform:scale(1)}} .mk-card b{position:absolute;left:5px;top:5px;padding:3px 5px;border-radius:3px;background:var(--acc);color:#fff;font:600 6px/1 var(--H);letter-spacing:.1em;text-transform:uppercase} .mk-n{font:600 11px/1 var(--H);color:var(--acc);transition:color .4s} .mk-t{margin-top:3px;font:600 14px/1.05 var(--H);text-transform:uppercase;overflow-wrap:anywhere} .mk-p{margin-top:4px;font:400 8px/1.35 var(--T);color:var(--mk-mute)} .mk-scene.on .mk-n{animation:mkUp .55s var(--ease) .12s both} .mk-scene.on .mk-t{animation:mkUp .55s var(--ease) .2s both} .mk-scene.on .mk-p{animation:mkUp .55s var(--ease) .3s both} @keyframes mkUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* заставка: список шагов */ .mk-list{padding:9px 10px;border-radius:9px;border:1.5px solid var(--acc);background:var(--mk-card);box-shadow:0 0 24px -6px var(--acc)} .mk-list li{display:flex;align-items:center;gap:5px;list-style:none;padding:2.5px 0;font:500 8px/1.1 var(--H);letter-spacing:.06em;text-transform:uppercase} .mk-list li i{flex:none;width:11px;height:11px;border-radius:50%;background:var(--acc);color:#fff;font:600 6px/11px var(--H);font-style:normal;text-align:center} .mk-scene.on .mk-list li{animation:mkUp .45s var(--ease) both} .mk-big{margin-top:10px;font:600 13px/1.05 var(--H);text-transform:uppercase} .mk-big em{color:var(--acc)} /* финал: ник и призыв */ .mk-out{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:6%} .mk-out img{width:42%;aspect-ratio:1;border-radius:50%;object-fit:cover;border:2px solid var(--acc);box-shadow:0 0 30px -4px var(--acc);background:var(--mk-card)} .mk-out b{margin-top:9px;font:600 14px/1.05 var(--H);text-transform:uppercase} .mk-out small{margin-top:3px;font:400 8px/1.2 var(--T);color:var(--mk-mute)} .mk-out span{margin-top:10px;padding:5px 9px;border-radius:5px;background:var(--acc);color:#fff;font:600 7px/1 var(--H);letter-spacing:.1em;text-transform:uppercase} .mk-scene.on .mk-out img{animation:mkPop .7s var(--ease) both} .mk-scene.on .mk-out b{animation:mkUp .5s var(--ease) .2s both} .mk-scene.on .mk-out small{animation:mkUp .5s var(--ease) .28s both} .mk-scene.on .mk-out span{animation:mkUp .5s var(--ease) .4s both} @keyframes mkPop{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.06)}100%{transform:none}} .mk-foot{position:absolute;left:8%;right:8%;bottom:5%;z-index:1;display:flex;align-items:center;gap:6px} .mk-foot img{width:20px;height:20px;border-radius:50%;object-fit:cover;border:1px solid var(--acc);background:var(--mk-card)} .mk-foot b{display:block;font:600 8px/1.1 var(--H);letter-spacing:.06em;text-transform:uppercase} .mk-foot small{display:block;font:400 7px/1.2 var(--T);color:var(--mk-mute)} /* ----- 4. сборка-спектакль ----- */ .stage-detail{min-height:21px;margin:8px auto 0;max-width:330px;text-align:center;font-size:14.5px;line-height:1.45;color:var(--muted);transition:opacity .25s,transform .25s} .stage-detail.swap{opacity:0;transform:translateY(4px)} .machine{transition:width .7s var(--ease),margin .7s var(--ease)} .pct b{transition:font-size .7s var(--ease)} body.has-preview .machine{width:min(32vw,120px);margin:6px auto 12px} body.has-preview .pct b{font-size:36px} body.has-preview .pct span{font-size:16px;margin-top:-10px} .reel{margin:20px -16px 0;animation:rise .7s var(--ease) both} .reel-h{display:flex;justify-content:space-between;align-items:baseline;padding:0 16px;margin-bottom:10px;font:500 12px/1 var(--H);letter-spacing:.14em;text-transform:uppercase;color:var(--red-l)} .reel-h b{font:600 13px/1 var(--H);color:var(--muted);letter-spacing:.06em} .reel-track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:6px 16px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-behavior:smooth} .reel-track::-webkit-scrollbar{display:none} .rf{position:relative;flex:none;width:112px;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:#15181b;border:1px solid var(--line);scroll-snap-align:center;animation:rfIn .8s var(--ease) both;transition:border-color 1.2s,box-shadow 1.2s} .rf img{width:100%;height:100%;object-fit:cover} .rf::after{content:"";position:absolute;left:0;right:0;top:0;height:34%;background:linear-gradient(transparent,rgba(255,59,82,.6),transparent);transform:translateY(-100%);animation:rfScan 1s ease-out .25s both;pointer-events:none} .rf small{position:absolute;left:0;right:0;bottom:0;padding:16px 7px 6px;background:linear-gradient(transparent,rgba(0,0,0,.85));font:500 9.5px/1.15 var(--H);letter-spacing:.06em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rf.new{border-color:var(--red-l);box-shadow:0 0 30px -6px rgba(228,16,43,.95)} @keyframes rfIn{0%{opacity:0;transform:translateX(70px) rotate(8deg) scale(.6)}55%{opacity:1}100%{opacity:1;transform:none}} @keyframes rfScan{to{transform:translateY(300%)}} .machine.boom::after{content:"";position:absolute;inset:-8%;border-radius:50%;border:2px solid var(--red-l);animation:ring 1s var(--ease) both} /* ----- 5. готово ----- */ .fs-btn{position:absolute;left:10px;bottom:14px;width:42px;height:42px;border-radius:50%;background:rgba(11,13,15,.7);backdrop-filter:blur(6px);display:grid;place-items:center;z-index:2} .fs-btn svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .btn.story{margin:0 0 14px;background:#fff;color:var(--ink);box-shadow:0 16px 40px -18px rgba(255,255,255,.45)} .btn.story svg{stroke:var(--red);stroke-width:2} .vau{display:grid;gap:12px;margin-top:26px} .vau-h{font:500 12px/1 var(--H);letter-spacing:.14em;text-transform:uppercase;color:var(--red-l);margin-bottom:10px} .ba-view{--x:50%;position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:#15181b;border:1px solid var(--line);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize} .ba-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none} .ba-after{object-position:center 42%} .ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x)) 0 0);-webkit-clip-path:inset(0 calc(100% - var(--x)) 0 0)} .ba-before img{filter:saturate(.9)} .ba-tag{position:absolute;bottom:10px;padding:6px 9px;border-radius:7px;background:rgba(11,13,15,.78);font:500 10.5px/1 var(--H);letter-spacing:.12em;text-transform:uppercase;pointer-events:none} .ba-tag.l{left:10px}.ba-tag.r{right:10px;background:var(--red)} .ba-knob{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 14px rgba(0,0,0,.6);pointer-events:none} .ba-knob i{position:absolute;top:50%;left:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:#fff;box-shadow:0 6px 20px -4px rgba(0,0,0,.7);animation:knob 2.4s ease-in-out infinite} .ba-knob i::before,.ba-knob i::after{content:"";position:absolute;top:50%;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent} .ba-knob i::before{left:8px;border-right:7px solid var(--ink)} .ba-knob i::after{right:8px;border-left:7px solid var(--ink)} @keyframes knob{0%,100%{box-shadow:0 6px 20px -4px rgba(0,0,0,.7),0 0 0 0 rgba(255,255,255,.5)}50%{box-shadow:0 6px 20px -4px rgba(0,0,0,.7),0 0 0 8px rgba(255,255,255,0)}} .hours{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:18px;background:var(--card);border:1px solid var(--line)} .hours-n{flex:none;display:flex;align-items:baseline;gap:2px;font:600 22px/1 var(--H);color:var(--red-l)} .hours-n b{font:600 54px/1 var(--H);color:#fff;font-variant-numeric:tabular-nums} .hours-n span{font:600 22px/1 var(--H);color:var(--red-l)} .hours p{font-size:14px;line-height:1.45;color:var(--muted)} .post{padding:16px;border-radius:18px;background:var(--card);border:1px solid var(--line)} .post-txt{white-space:pre-wrap;font-size:14.5px;line-height:1.5;color:#fff;max-height:220px;overflow:auto;margin-bottom:12px;padding-right:4px;user-select:text;-webkit-user-select:text} .post .btn{min-height:46px} .post .btn.done{border-color:var(--red-l);color:var(--red-l)} .gift,.redo{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border-radius:16px;text-align:left;transition:transform .2s var(--ease)} .gift:active,.redo:active{transform:scale(.985)} .gift{border:1px solid rgba(255,59,82,.55);background:linear-gradient(100deg,rgba(228,16,43,.2),rgba(228,16,43,.03) 75%),var(--card);box-shadow:0 0 34px -14px rgba(228,16,43,.7)} .gift-ic{flex:none;width:44px;height:44px;border-radius:12px;background:var(--red);display:grid;place-items:center} .gift-ic svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .gift b,.redo b{display:block;font:600 18px/1.1 var(--H);letter-spacing:.02em} .gift small,.redo small{display:block;font-size:13px;color:var(--muted);margin-top:3px} .redo{border:1px solid var(--line);background:var(--card)} .redo svg{flex:none;width:26px;height:26px;stroke:var(--red-l);fill:none;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round} .consent.optin{margin:0} /* согласие перед первым шагом: компактно, без лишнего веса */ .sogl{margin-top:22px} .consent.mini{margin:0 0 8px;padding:12px 14px;gap:12px;border-radius:14px} .consent.mini .cb{width:20px;height:20px;border-radius:6px} .consent.mini .ctext{font-size:12.5px;line-height:1.4} .codeword #callBtn{margin-bottom:10px} /* мягкое предложение «Подключить завод» (ведёт в zavod/) */ .soft-zavod{margin-top:30px;padding:20px 18px 18px;border-radius:22px;background:var(--card);border:1px solid var(--line)} .soft-zavod .eyebrow{margin-bottom:12px} .soft-zavod h3{font:600 26px/1.08 var(--H)} .soft-zavod p{font-size:14.5px;line-height:1.5;color:var(--muted);margin:8px 0 16px} /* полноэкранный просмотр */ .theater{position:fixed;inset:0;z-index:60;background:#000;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease both} .theater video{width:100%;height:100%;object-fit:contain;background:#000} .th-x{position:absolute;right:14px;top:calc(var(--safe-t) + 14px);width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);display:grid;place-items:center} .th-x svg{width:18px;height:18px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round} .th-cap{position:absolute;left:16px;right:76px;top:calc(var(--safe-t) + 26px);font:500 13px/1.2 var(--H);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.85)} body.locked{overflow:hidden} /* правка текста — лист снизу */ .sheet{position:fixed;inset:0;z-index:55} .sheet-bg{position:absolute;inset:0;background:rgba(0,0,0,.6);animation:fadeIn .3s ease both} @keyframes fadeIn{from{opacity:0}to{opacity:1}} .sheet-card{position:absolute;left:0;right:0;bottom:0;max-width:480px;max-height:92vh;max-height:92dvh;margin:0 auto;overflow-y:auto;overscroll-behavior:contain;padding:10px 16px calc(var(--safe-b) + 18px);border-radius:24px 24px 0 0;background:#111417;border:1px solid var(--line);border-bottom:0;animation:sheetUp .45s var(--ease) both} @keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}} .sheet-grip{width:40px;height:4px;margin:0 auto 14px;border-radius:2px;background:rgba(255,255,255,.2)} .sheet-h{font:600 28px/1.05 var(--H);margin-bottom:8px} .sheet-sub{font-size:14px;line-height:1.45;color:var(--muted)} .sheet-steps-h{margin:18px 0 10px;font:500 12px/1 var(--H);letter-spacing:.14em;text-transform:uppercase} .sheet .shag{padding-right:14px} .sheet #rzGo{margin-top:16px} /* меньше движения — по настройке телефона */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;scroll-behavior:auto!important} .rv{opacity:1;transform:none} .belt-track,.marq-row{animation:none!important} .btn.mega::after{display:none} .mk-scene{transition:none!important} } /* ===== «первый ролик» (документ 03.10.2026): ниша, смысл, вопросы голосом, сценарий ===== */ .grp-list{display:grid;gap:8px;margin-top:20px} .grp{border-radius:16px;background:var(--card);border:1px solid var(--line);overflow:hidden;transition:border-color .25s} .grp.open{border-color:rgba(255,59,82,.55)} .grp-h{display:flex;align-items:center;gap:10px;width:100%;padding:16px;text-align:left} .grp-h b{flex:1;font:600 19px/1.15 var(--H);letter-spacing:.01em} .grp-h small{font-size:12.5px;color:var(--dim);white-space:nowrap} .grp-h i{width:10px;height:10px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-3px);transition:transform .3s var(--ease)} .grp.open .grp-h i{transform:rotate(-135deg) translateY(-2px)} .grp-b{display:none;flex-wrap:wrap;gap:8px;padding:0 14px 16px} .grp.open .grp-b{display:flex;animation:rise .45s var(--ease) both} .nchip{padding:11px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);font-size:14.5px;line-height:1.25;text-align:left;transition:background .2s,border-color .2s,transform .2s var(--ease)} .nchip:active{transform:scale(.97)} .nchip.on{background:var(--red);border-color:var(--red)} .skel-row{height:56px;border-radius:16px;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.1),rgba(255,255,255,.04));background-size:200% 100%;animation:skel 1.2s linear infinite} .vau-n{position:relative;padding:18px 16px;border-radius:20px;background:linear-gradient(150deg,rgba(228,16,43,.22),rgba(228,16,43,.03) 70%),var(--card);border:1px solid rgba(255,59,82,.5);box-shadow:0 0 50px -22px rgba(228,16,43,.8)} .vau-n-h{font:600 22px/1.15 var(--H)} .vau-n-list{list-style:none;display:grid;gap:8px;margin:14px 0 0} .vau-n-list li{position:relative;padding-left:28px;font-size:15px;line-height:1.35;color:var(--muted);animation:rise .6s var(--ease) both} .vau-n-list li::before{content:"";position:absolute;left:0;top:.12em;width:18px;height:18px;border-radius:50%;background:var(--red)} .vau-n-list li::after{content:"";position:absolute;left:6px;top:calc(.12em + 4px);width:5px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)} .vau-n-list b{font:600 18px/1 var(--H);color:#fff} .vau-n-bol{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)} .vau-n-tag{font:500 11px/1 var(--H);letter-spacing:.14em;text-transform:uppercase;color:var(--red-l)} .vau-n-bol p{margin-top:8px;font-size:15px;line-height:1.45} .vau-n-bol .blur{filter:blur(4.5px);color:var(--muted);user-select:none} .smysly{display:grid;gap:10px;margin-top:18px} .smysl{display:flex;gap:14px;align-items:flex-start;width:100%;padding:16px;border-radius:16px;text-align:left;background:var(--card);border:1px solid var(--line);transition:border-color .2s,background .2s,transform .2s var(--ease)} .smysl:active{transform:scale(.985)} .smysl .rd{flex:none;width:22px;height:22px;margin-top:2px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);transition:border .2s} .smysl.on{border-color:var(--red-l);background:linear-gradient(100deg,rgba(228,16,43,.16),transparent 75%),var(--card)} .smysl.on .rd{border:7px solid var(--red-l)} .sm-t{flex:1;min-width:0} .sm-t b{display:block;font:600 19px/1.15 var(--H)} .sm-t small{display:block;margin-top:5px;font-size:13.5px;line-height:1.4;color:var(--muted)} .sm-tag{display:inline-block;margin-top:9px;padding:5px 8px;border-radius:6px;background:rgba(255,255,255,.07);font:500 10.5px/1 var(--H);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .svoj-b{border-style:dashed} .svoj{margin-top:4px} .ta{width:100%;padding:14px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line);color:#fff;font:400 16px/1.45 var(--T);outline:none;resize:none;transition:border-color .2s,box-shadow .2s} .ta:focus{border-color:var(--red-l);box-shadow:0 0 0 3px rgba(255,59,82,.18)} .ta::placeholder{color:rgba(255,255,255,.35)} .rec-mini{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:10px 14px;border-radius:12px;border:1px solid var(--line);font:500 12px/1 var(--H);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .rec-mini svg{width:18px;height:18px;stroke:var(--red-l);fill:none;stroke-width:1.7;stroke-linecap:round} .rec-mini.on{border-color:var(--red-l);color:#fff} .qdots{display:flex;gap:6px;margin:16px 0 12px} .qdots i{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.14);transition:background .3s} .qdots i.on{background:var(--red-l)} .qdots i.past{background:rgba(255,59,82,.5)} .q-card{position:relative;padding:20px 18px 18px 64px;border-radius:20px;background:var(--card);border:1px solid var(--line)} .q-card.swap{animation:rise .5s var(--ease) both} .q-n{position:absolute;left:18px;top:18px;font:600 30px/1 var(--H);color:var(--red-l)} .q-t{font:600 22px/1.2 var(--H)} .q-hint{margin-top:10px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.05);font-size:13px;line-height:1.4;color:var(--muted)} .rec{display:flex;align-items:center;gap:14px;width:100%;margin-top:14px;padding:14px 16px;border-radius:18px;text-align:left;border:1px solid rgba(255,59,82,.55);background:linear-gradient(100deg,rgba(228,16,43,.2),rgba(228,16,43,.03) 75%),var(--card);transition:transform .2s var(--ease),background .3s} .rec:active{transform:scale(.985)} .rec-ic{flex:none;width:52px;height:52px;border-radius:50%;background:var(--red);display:grid;place-items:center;box-shadow:0 10px 30px -8px rgba(228,16,43,.8)} .rec-ic svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .rec-t{flex:1;min-width:0} .rec-t b{display:block;font:600 18px/1.1 var(--H)} .rec-t small{display:block;margin-top:4px;font-size:13px;color:var(--muted)} .rec-time{font:600 18px/1 var(--H);color:var(--red-l);font-variant-numeric:tabular-nums} .rec.on .rec-ic{animation:pulse 1.4s infinite} .rec.on{background:linear-gradient(100deg,rgba(228,16,43,.38),rgba(228,16,43,.08) 80%),var(--card)} .rec.busy .rec-ic svg{animation:spin 1.2s linear infinite} .scen-fmt{display:flex;align-items:center;gap:10px;margin-top:14px} .scen-fmt .sm-tag{margin:0;background:var(--red);color:#fff} .scen-n{font-size:13px;color:var(--dim)} #scenShagi{margin-top:16px} .zameny{margin-top:14px;padding:14px;border-radius:14px;border:1px solid rgba(245,183,0,.45);background:rgba(245,183,0,.07)} .zameny b{display:block;font:500 12px/1 var(--H);letter-spacing:.14em;text-transform:uppercase;color:#F5B700;margin-bottom:6px} .zameny p{font-size:13.5px;line-height:1.4;color:var(--muted);margin-top:4px} /* готово: сторис, «а ещё завод может…», пробный день, подписка */ .story-hint{margin-top:10px;font-size:13.5px;line-height:1.45;color:var(--muted)} [data-screen="done"] .post{margin-top:18px} .next-row{display:grid;gap:8px;margin-top:22px} .more{margin-top:40px} .more h3,.podp h3{font:600 26px/1.08 var(--H);margin-bottom:14px} .more>p{font-size:15px;line-height:1.5;color:var(--muted);margin-top:14px} .more-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .more-it b{display:block;margin-top:8px;font:600 15px/1.1 var(--H)} .more-it small{display:block;font-size:12px;color:var(--dim);margin-top:2px} .more-pic{position:relative;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:linear-gradient(160deg,#2a1216,#15181b);border:1px solid var(--line)} .more-pic i{position:absolute;left:12%;right:12%;height:9%;border-radius:4px;background:rgba(255,255,255,.22);filter:blur(2px)} .more-pic i:nth-child(1){top:14%;background:var(--red-l)}.more-pic i:nth-child(2){top:32%}.more-pic i:nth-child(3){top:48%;right:30%}.more-pic i:nth-child(4){top:64%;right:45%} .more-pic.reels{background:linear-gradient(160deg,#16222a,#101315)} .more-pic::after{content:"";position:absolute;left:50%;top:72%;width:22px;height:16px;margin-left:-11px;border-radius:4px;border:1.6px solid #fff} #denBox{margin-top:34px} .tarif-den{display:flex;align-items:center;gap:14px;margin:4px 0 18px;padding:14px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--line)} .tarif-den>div{flex:1} .tarif-den b{display:block;font:600 18px/1.1 var(--H)} .tarif-den small{display:block;margin-top:4px;font-size:12.5px;line-height:1.4;color:var(--muted)} .tarif-price{font:600 26px/1 var(--H);color:#fff;white-space:nowrap} .why4{display:grid;gap:12px;margin-bottom:16px} .why4 b{display:block;font:600 16px/1.2 var(--H)} .why4 p{font-size:13.5px!important;line-height:1.45;margin-top:3px} .plan5{margin:0 0 18px} .plan5 ol{padding-left:18px;display:grid;gap:8px;margin-top:10px;font-size:13.5px;line-height:1.45;color:var(--muted)} .plan5 b{color:#fff;font-weight:500} .podp{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)} .tar-cmp{margin:6px 0 4px} .tar-cmp table{width:100%;border-collapse:collapse;margin-top:10px;font-size:13.5px} .tar-cmp th,.tar-cmp td{padding:9px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top} .tar-cmp th{font:500 11px/1.2 var(--H);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)} .tar-cmp td b{font:600 15px/1.2 var(--H)} .tar-cmp td:last-child{white-space:nowrap;text-align:right} #korobkaBtn{margin-top:16px;min-height:52px;font-size:12.5px;letter-spacing:.06em;line-height:1.3;text-align:center;padding:10px 16px} .test-mode{position:fixed;left:50%;bottom:calc(var(--safe-b) + 92px);z-index:40;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:7px 10px 7px 12px;border-radius:10px;background:#F5B700;color:#111;font:500 11px/1 var(--H);letter-spacing:.12em;text-transform:uppercase;box-shadow:0 8px 24px -8px rgba(0,0,0,.6)} body.tg .test-mode{bottom:calc(var(--safe-b) + 14px)} .test-mode button{padding:5px 8px;border-radius:6px;background:#111;color:#F5B700;font:inherit;letter-spacing:.08em} /* ── путь v2 (правки владельца 03.10): приветствие, примеры, имя и ник, тарифы «входит / не входит» ── */ .steps.hide{visibility:hidden} .hi-2{margin-top:10px} .gift-note{display:flex;gap:14px;align-items:flex-start;margin-top:22px;padding:16px;border-radius:18px;background:linear-gradient(160deg,rgba(228,16,43,.16),rgba(15,18,20,.9) 70%);border:1px solid rgba(255,59,82,.45)} .gift-note-ic{flex:none;width:42px;height:42px;border-radius:12px;background:rgba(228,16,43,.2);display:grid;place-items:center} .gift-note-ic svg{width:24px;height:24px;stroke:var(--red-l);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .gift-note b{display:block;font:600 19px/1.15 var(--H)} .gift-note small{display:block;margin-top:5px;font-size:14px;line-height:1.45;color:var(--muted)} [data-screen="welcome"] .counter{margin-top:18px} .pr-h{display:flex;justify-content:space-between;align-items:baseline;margin:22px 0 10px} .pr-h b{font:500 12px/1 var(--H);letter-spacing:.16em;text-transform:uppercase;color:var(--red-l)} .pr-h small{font-size:12px;color:var(--dim)} .pr-row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:2px 16px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch} .pr-row::-webkit-scrollbar{display:none} .pr{position:relative;flex:none;scroll-snap-align:start;text-align:left;display:block} .pr-i{position:relative;display:block;border-radius:14px;overflow:hidden;background:#15181b;border:1px solid var(--line)} .pr.rils{width:118px}.pr.rils .pr-i{aspect-ratio:9/16} .pr.kar{width:150px}.pr.kar .pr-i{aspect-ratio:360/406} .pr img{width:100%;height:100%;object-fit:cover;display:block} .pr-c{display:block;padding:7px 2px 0;font:500 11px/1.2 var(--H)} .pr-c b{display:block;font-weight:600;text-transform:uppercase;letter-spacing:.08em} .pr-c small{display:block;font:400 11.5px/1.25 var(--T);color:var(--dim);margin-top:2px} .pr.play i{position:absolute;left:50%;top:42%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:rgba(228,16,43,.92);box-shadow:0 6px 20px -4px rgba(228,16,43,.9)} .pr.play i::before{content:"";position:absolute;left:15px;top:12px;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent} .pr.play .pr-i{border-color:rgba(255,59,82,.75);box-shadow:0 0 0 1px rgba(255,59,82,.5)} .scr.active .pr{animation:rise .7s var(--ease) both} .scr.active .pr:nth-child(2){animation-delay:.05s}.scr.active .pr:nth-child(3){animation-delay:.1s}.scr.active .pr:nth-child(4){animation-delay:.15s} [data-screen="primery"] .gal{margin-top:22px;margin-bottom:0} .put5{list-style:none;display:flex;flex-wrap:wrap;gap:6px} .put5 li{display:flex;align-items:center;gap:7px;padding:8px 10px 8px 8px;border-radius:10px;background:var(--card);border:1px solid var(--line);font:500 12px/1.1 var(--H);letter-spacing:.06em;text-transform:uppercase} .put5 b{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:rgba(228,16,43,.2);color:var(--red-l);font-weight:600} .titr{margin-top:20px;padding:16px;border-radius:16px;background:var(--card);border:1px dashed rgba(255,255,255,.22)} .titr-l{display:block;font:500 11px/1 var(--H);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:10px} .titr b{display:block;font:600 22px/1.1 var(--H);text-transform:uppercase;letter-spacing:.02em;overflow-wrap:anywhere} .titr small{display:block;margin-top:4px;font-size:14px;color:var(--red-l)} #imyaNote.bad{color:var(--red-l)} .more-pic.img::after{display:none} .more-pic.img img{width:100%;height:100%;object-fit:cover;filter:blur(3px) saturate(.85);transform:scale(1.08)} .tar-blk{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)} .tar-h{font:600 26px/1.08 var(--H);margin-bottom:8px} .tar-p{font-size:14px;line-height:1.5;color:var(--muted);margin-bottom:14px} .tars{display:grid;gap:8px;margin-top:10px} .tar{border-radius:16px;background:var(--card);border:1px solid var(--line);overflow:hidden;transition:border-color .3s} .tar summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 14px 14px 16px} .tar summary::-webkit-details-marker{display:none} .tar summary::after{content:"+";flex:none;color:var(--red-l);font-size:22px;line-height:1;transition:transform .3s} .tar[open] summary::after{transform:rotate(45deg)} .tar-n{flex:1;min-width:0} .tar-n b{font:600 19px/1.1 var(--H)} .tar-n em{display:inline-block;margin-left:8px;padding:4px 7px;border-radius:6px;background:var(--red);font:500 10px/1 var(--H);letter-spacing:.12em;text-transform:uppercase;font-style:normal;color:#fff;vertical-align:3px} .tar-n small{display:block;margin-top:4px;font-size:12.5px;line-height:1.35;color:var(--muted)} .tar-c{flex:none;text-align:right;font:600 18px/1 var(--H);white-space:nowrap} .tar-c small{display:block;margin-top:4px;font:400 11px/1 var(--T);color:var(--dim)} .tar.sovet{border-color:rgba(255,59,82,.7);background:linear-gradient(160deg,rgba(228,16,43,.14),var(--card) 60%);box-shadow:0 0 40px -18px rgba(228,16,43,.8)} /* 14.10.2026: сравнение «распаковка в боте» и «живая с Валерией» под тарифами */ .sravn-b{padding:0 16px 14px} .sravn-o{padding:10px 0;border-top:1px solid var(--line)} .sravn-o>b{display:block;font-size:14px}.sravn-o.live>b{color:var(--red-l)} .sravn-o>small{display:block;opacity:.7;margin:2px 0 4px;font-size:12px} .sravn-o p{margin:6px 0 0;font-size:13px;line-height:1.4}.sravn-o p em{font-style:normal;font-weight:600} .sravn-n{margin:8px 0 0;font-size:12px;opacity:.7} .tar-v{list-style:none;display:grid;gap:0;padding:0 16px 12px} .tar-v li{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line);font-size:13px;line-height:1.3} .tar-v li b{font-weight:500;text-align:right;max-width:46vw} .tar-v i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center} .tar-v i svg{width:13px;height:13px;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} .tar-v .da i{background:rgba(22,163,74,.18)}.tar-v .da i svg{stroke:#3DDC84} .tar-v .net{color:var(--dim)}.tar-v .net i{background:rgba(255,255,255,.06)}.tar-v .net i svg{stroke:rgba(255,255,255,.4)} .tar-go{margin:2px 16px 14px;width:calc(100% - 32px)!important;min-height:48px;font-size:13px} .tar-cmp .tars{margin-bottom:6px} /* тарифы внутри раскрывающегося «Сравнить тарифы» (.tips): гасим оформление списков и заголовков .tips */ .tips .tar summary{font:inherit;letter-spacing:0;text-transform:none;padding:14px 14px 14px 16px;justify-content:flex-start} .tips .tar summary::after{content:"+"} .tips .tar-v{display:grid;gap:0;padding:0 16px 12px} .tips .tar-v li{padding:8px 0;font-size:13px;color:inherit} .tips .tar-v li::before{display:none} .tips .tar-v li b{color:#fff} .tips .tar-v .net,.tips .tar-v .net b{color:var(--dim)} .tips .tar:not([open]) summary::after{transform:none} .consent + .pick-btns{margin:0 0 12px} /* «Готово»: три второстепенные ссылки под роликом; главная кнопка — внизу экрана (совет директоров 04.10) */ .done-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin-top:14px} .done-links .link-btn{margin:0;padding:10px 4px} .done-links .link-btn[hidden]{display:none} .podp .acc{color:var(--red-l);font-family:var(--H);font-weight:600;letter-spacing:.06em} .demo-note{margin-top:14px;padding:10px 12px;border-radius:12px;border:1px dashed rgba(255,59,82,.6);font-size:13px;line-height:1.4;color:var(--muted)} .demo-note[hidden]{display:none} /* ===== правки владельца 09.10: витрина первого экрана, живые примеры, сборка с преимуществами, голос ===== */ /* витрина первого экрана: Reels 9:16 + живые карусели 4:5, листается вбок */ .vit{display:flex;gap:10px;align-items:flex-end;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px 18px;padding:2px 16px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch} .vit::-webkit-scrollbar{display:none} .vit-it{flex:none;scroll-snap-align:start} .vit-m{position:relative;border-radius:14px;overflow:hidden;background:#15181b;border:1px solid var(--line)} .vit-it.rils .vit-m{width:118px;aspect-ratio:9/16;border-color:rgba(255,59,82,.6);box-shadow:0 0 30px -12px rgba(228,16,43,.8)} .vit-it.kar .vit-m{width:168px;aspect-ratio:4/5} .vit-m video,.pr-i video,.pcard-m video{width:100%;height:100%;object-fit:cover;display:block;background:#15181b} .vit figcaption{margin-top:7px;font:500 11px/1.2 var(--H);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)} /* примеры на втором экране: видео вместо картинок */ .pr.kar{width:150px}.pr.kar .pr-i{aspect-ratio:4/5} .pr.live .pr-i::after{content:"";position:absolute;right:8px;top:8px;width:7px;height:7px;border-radius:50%;background:var(--red-l);box-shadow:0 0 0 0 rgba(255,59,82,.6);animation:pulse 2s infinite} .pr-note{margin-top:12px} /* 14.10 (владелец): видео в ряду — на одной горизонтали, сверху и снизу. Причина сдвига: карточка .pr — это