/* =========================================================
   Блоки новой структуры: главная-хаб, переходы между страницами,
   страница приложений. Подключается после flux.css.
   ========================================================= */

/* ---------- три направления на главной ---------- */
.hub{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
.hub>*{min-width:0}
.hub__card{position:relative;display:flex;flex-direction:column;gap:14px;padding:34px 30px 30px;border-radius:var(--r);
  background:var(--card);border:1px solid var(--line);color:inherit;text-decoration:none;overflow:hidden;isolation:isolate;
  transition:transform .5s var(--ease),border-color .3s}
.hub__card:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--acc,var(--lime));transform-origin:left;transform:scaleX(.18);transition:transform .6s var(--ease)}
.hub__card:after{content:"";position:absolute;width:320px;height:320px;right:-140px;top:-160px;border-radius:50%;background:radial-gradient(var(--acc,var(--lime)),transparent 65%);opacity:.12;z-index:-1;transition:opacity .5s,transform .8s var(--ease)}
.hub__card:hover{transform:translateY(-8px);border-color:var(--acc,var(--lime))}
.hub__card:hover:before{transform:scaleX(1)}
.hub__card:hover:after{opacity:.22;transform:scale(1.2)}
.hub__card--site{--acc:var(--lime)}
.hub__card--auto{--acc:var(--violet)}
.hub__card--app{--acc:var(--pink)}
.hub__top{display:flex;justify-content:space-between;align-items:center}
.hub__n{font:700 12px 'JetBrains Mono',monospace;color:var(--muted);letter-spacing:.06em}
.hub__badge{font:700 11px Onest;letter-spacing:.08em;text-transform:uppercase;padding:6px 11px;border-radius:999px;background:var(--acc);color:#fff}
[data-theme="dark"] .hub__card--site .hub__badge{color:#07060b}
.hub__ico{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;background:color-mix(in srgb,var(--acc) 14%,transparent);color:var(--acc)}
.hub__ico .ic{width:28px;height:28px}
/* =========================================================
   Мини-истории в карточках «Три задачи»: курсор реально нажимает кнопки.
   Один цикл = 9 секунд, подписи снизу объясняют каждый шаг.
   ========================================================= */
.hs{position:relative;height:270px;border-radius:18px;background:var(--bg2);border:1px solid var(--line);overflow:hidden;font-size:11px;line-height:1.3;color:var(--ink);--T:9s;margin-top:2px}
.hs__p{position:absolute;inset:0}
.hs__cur{position:absolute;z-index:8;width:16px;height:20px;left:80%;top:86%;opacity:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.hs__tap{position:absolute;z-index:7;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:color-mix(in srgb,var(--acc) 40%,transparent);opacity:0;pointer-events:none}
.hs__cap{position:relative;height:22px;margin-top:10px;font:600 13.5px/22px Onest}
.hs__cap span{position:absolute;inset:0;display:flex;align-items:center;gap:8px;opacity:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs__cap em{flex:none;width:22px;height:22px;border-radius:50%;background:var(--acc);color:#fff;font:700 11px/22px Onest;font-style:normal;text-align:center}
[data-theme="dark"] .hub__card--site .hs__cap em{color:#07060b}

/* --- сайт: поиск → открыл сайт → пролистал → «Записаться» → заявка. Цикл 15 с --- */
.hs--site{--T:15s}
.hs--site .hs__p1{animation:sP1 var(--T) infinite}
@keyframes sP1{0%,27%{opacity:1}30%,97%{opacity:0}100%{opacity:1}}
.hs-q{position:absolute;left:6%;right:6%;top:22px;height:36px;display:flex;align-items:center;gap:7px;padding:0 12px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:12.5px;box-shadow:0 6px 16px -10px rgba(20,18,30,.3)}
.hs-q .ic{flex:none;width:14px;height:14px;color:var(--muted)}
.hs-q span{white-space:nowrap;animation:sType var(--T) steps(18) infinite}
@keyframes sType{0%,2%{clip-path:inset(0 100% 0 0)}13%,100%{clip-path:inset(0 0 0 0)}}
.hs-r{position:absolute;left:6%;right:6%;height:46px;padding:0 10px;border-radius:10px;display:flex;flex-direction:column;justify-content:center;gap:3px;opacity:0;animation:sRes var(--T) ease infinite}
.hs-r1{top:76px;animation:sRes var(--T) ease infinite,sHi var(--T) ease infinite}
.hs-r2{top:132px}
.hs-r b{font-size:12.5px;color:var(--acc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-r i{font-style:normal;font-size:10px;color:var(--muted)}
.hs-r2 b,.hs-r2 i{height:7px;border-radius:4px;background:var(--line);width:72%}
.hs-r2 i{width:42%}
@keyframes sRes{0%,14%{opacity:0;transform:translateY(5px)}17%,100%{opacity:1;transform:none}}
@keyframes sHi{0%,21%,28%,100%{background:transparent}22%,27%{background:color-mix(in srgb,var(--acc) 16%,transparent)}}

/* сам сайт внутри карточки: шапка стоит, страница листается */
.hs--site .hs__p2{opacity:0;background:var(--card);animation:sP2 var(--T) var(--ease) infinite}
@keyframes sP2{0%,27%{opacity:0;transform:translateY(10px)}31%,95%{opacity:1;transform:none}99%,100%{opacity:0}}
.hs-nav{position:absolute;z-index:2;left:0;right:0;top:0;height:32px;display:flex;align-items:center;justify-content:space-between;padding:0 6%;background:var(--card);border-bottom:1px solid var(--line)}
.hs-nav b{font:800 11px Unbounded;letter-spacing:-.02em}
.hs-nav b span{color:var(--acc)}
.hs-nav i{font-style:normal;font-size:10px;color:var(--muted)}
.hs-view{position:absolute;left:0;right:0;top:32px;bottom:0;overflow:hidden}
.hs-page{padding:12px 6% 8px;animation:sScroll var(--T) cubic-bezier(.45,0,.2,1) infinite}
@keyframes sScroll{0%,36%{transform:none}44%,49%{transform:translateY(-32%)}58%,100%{transform:translateY(calc(-100% + 238px))}}
.hs-hero{display:flex;gap:10px;align-items:stretch}
.hs-hero>div:first-child{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.hs-h{font:700 13px/1.15 Unbounded;letter-spacing:-.02em}
.hs-hero p{font-size:10px;color:var(--muted)}
.hs-stars{font-size:10px;color:#f5a623;letter-spacing:1px}
.hs-stars em{font-style:normal;margin-left:5px;color:var(--muted);letter-spacing:0}
.hs-img{flex:none;width:36%;height:84px;border-radius:10px;background:center/cover var(--bg2)}
.hs-sec{margin:12px 0 5px;font:700 10px Onest;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hs-row{display:flex;justify-content:space-between;gap:6px;padding:4px 0;border-bottom:1px dashed var(--line);font-size:10.5px}
.hs-row b{color:var(--acc);white-space:nowrap}
.hs-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.hs-gal i{height:46px;border-radius:8px;background:center/cover var(--bg2)}
.hs-rev{margin-top:10px;padding:8px 10px;border-radius:10px;background:var(--bg2);font-size:10px;font-style:italic}
.hs-rev em{display:block;margin-top:2px;font-style:normal;color:var(--muted)}
.hs-cta{margin-top:10px;height:38px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-left:10px;border-radius:12px;background:color-mix(in srgb,var(--acc) 12%,transparent)}
.hs-cta span{display:flex;flex-direction:column;font-size:9.5px;color:var(--muted);line-height:1.2}
.hs-cta span b{font-size:10.5px;color:var(--ink)}
.hs-btn{flex:none;width:40%;height:30px;border-radius:999px;background:var(--acc);color:#fff;font:700 11.5px Onest;display:grid;place-items:center;animation:sBtn var(--T) infinite}
[data-theme="dark"] .hs--site .hs-btn{color:#07060b}
@keyframes sBtn{0%,64%,68%,100%{transform:scale(1)}66%{transform:scale(.86)}}

.hs-toast{position:absolute;z-index:6;left:7%;right:7%;top:8%;display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:12px;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--acc);box-shadow:0 14px 30px -12px rgba(20,18,30,.45);opacity:0;animation:sToast var(--T) var(--ease) infinite}
.hs-toast i{font-style:normal;font-size:17px}
.hs-toast span{display:flex;flex-direction:column;font-size:10.5px;color:var(--muted)}
.hs-toast b{font-size:12px;color:var(--ink)}
@keyframes sToast{0%,69%{opacity:0;transform:translateY(-130%)}73%,93%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateY(-130%)}}
.hs--site .hs__cur{animation:sCur var(--T) var(--ease) infinite}
@keyframes sCur{0%,14%{left:80%;top:90%;opacity:0}15%{left:80%;top:90%;opacity:1}20%,25%{left:40%;top:41%;opacity:1}28%{left:40%;top:41%;opacity:0}58%{left:55%;top:60%;opacity:0}60%{left:55%;top:60%;opacity:1}64%,67%{left:76%;top:90%;opacity:1}71%,100%{left:76%;top:90%;opacity:0}}
.hs--site .hs__tap1{left:40%;top:41%;animation:sTap1 var(--T) ease-out infinite}
.hs--site .hs__tap2{left:76%;top:90%;animation:sTap2 var(--T) ease-out infinite}
@keyframes sTap1{0%,22%{opacity:0;transform:scale(.3)}23%{opacity:1;transform:scale(.4)}29%,100%{opacity:0;transform:scale(1.7)}}
@keyframes sTap2{0%,65%{opacity:0;transform:scale(.3)}66%{opacity:1;transform:scale(.4)}72%,100%{opacity:0;transform:scale(1.7)}}
.hs--site~.hs__cap .c1{animation:sC1 15s infinite}
.hs--site~.hs__cap .c2{animation:sC2 15s infinite}
.hs--site~.hs__cap .c3{animation:sC3 15s infinite}
@keyframes sC1{0%,27%{opacity:1;transform:none}30%,97%{opacity:0;transform:translateY(-6px)}100%{opacity:1}}
@keyframes sC2{0%,29%{opacity:0;transform:translateY(6px)}32%,63%{opacity:1;transform:none}66%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes sC3{0%,65%{opacity:0;transform:translateY(6px)}68%,95%{opacity:1;transform:none}98%,100%{opacity:0}}

/* --- автоматизация: сообщение ночью → бот → запись в списке --- */
.hs__chat{position:absolute;inset:0;animation:aChat var(--T) var(--ease) infinite}
@keyframes aChat{0%,58%{opacity:1;transform:none}63%,95%{opacity:.12;transform:scale(.96)}100%{opacity:1}}
.hs-top{position:absolute;left:0;right:0;top:0;height:16%;display:flex;align-items:center;justify-content:space-between;padding:0 5%;background:var(--card);border-bottom:1px solid var(--line);font-size:10.5px}
.hs-top b i{display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:#34c759}
.hs-top span{color:var(--muted)}
.hs-m,.hs-b{position:absolute;max-width:72%;padding:5px 9px;font-size:11px;opacity:0}
.hs-m{right:5%;border-radius:12px 12px 3px 12px;background:var(--acc);color:#fff}
.hs-b{left:5%;border-radius:12px 12px 12px 3px;background:var(--card);border:1px solid var(--line)}
.hs-m1{top:20%;animation:aM1 var(--T) ease infinite}
@keyframes aM1{0%,5%{opacity:0;transform:translateY(6px)}9%,100%{opacity:1;transform:none}}
.hs-dots{position:absolute;left:5%;top:36%;display:flex;gap:3px;padding:8px 10px;border-radius:12px;background:var(--card);border:1px solid var(--line);opacity:0;animation:aDots var(--T) infinite}
.hs-dots i{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:dotb .9s ease-in-out infinite}
.hs-dots i:nth-child(2){animation-delay:.15s}.hs-dots i:nth-child(3){animation-delay:.3s}
@keyframes dotb{50%{transform:translateY(-3px)}}
@keyframes aDots{0%,11%{opacity:0}13%,19%{opacity:1}21%,100%{opacity:0}}
.hs-b1{top:36%;animation:aB1 var(--T) ease infinite}
@keyframes aB1{0%,20%{opacity:0;transform:translateY(6px)}23%,100%{opacity:1;transform:none}}
.hs-chip{position:absolute;top:52%;width:20%;height:14%;border-radius:999px;border:1.5px solid var(--acc);background:var(--card);color:var(--acc);font:700 10.5px Onest;display:grid;place-items:center;opacity:0;animation:aChip var(--T) ease infinite}
.hs-ch1{left:5%}.hs-ch2{left:28%;animation:aChip var(--T) ease infinite,aChipOn var(--T) ease infinite}.hs-ch3{left:51%}
@keyframes aChip{0%,23%{opacity:0;transform:scale(.8)}27%,100%{opacity:1;transform:none}}
@keyframes aChipOn{0%,34%{background:var(--card);color:var(--acc)}36%,100%{background:var(--acc);color:#fff}}
.hs-m2{top:69%;animation:aM2 var(--T) ease infinite}
@keyframes aM2{0%,38%{opacity:0;transform:translateY(6px)}41%,100%{opacity:1;transform:none}}
.hs-b2{top:83%;animation:aB2 var(--T) ease infinite}
@keyframes aB2{0%,46%{opacity:0;transform:translateY(6px)}49%,100%{opacity:1;transform:none}}
.hs-crm{position:absolute;z-index:5;left:7%;right:7%;top:50%;padding:12px 14px;border-radius:14px;background:var(--card);border:1px solid var(--line);box-shadow:0 20px 40px -18px rgba(20,18,30,.45);opacity:0;transform:translateY(-30%);animation:aCrm var(--T) var(--ease) infinite}
@keyframes aCrm{0%,59%{opacity:0;transform:translateY(-20%)}64%,94%{opacity:1;transform:translateY(-50%)}99%,100%{opacity:0;transform:translateY(-50%)}}
.hs-crm small{font:600 9.5px Onest;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hs-crm__row{position:relative;display:flex;justify-content:space-between;align-items:center;margin:8px 0;padding:8px 10px;border-radius:10px;background:var(--bg2)}
.hs-crm__row span{display:flex;flex-direction:column;font-size:10.5px;color:var(--muted)}
.hs-crm__row b{font-size:12.5px;color:var(--ink)}
.hs-crm__row em{position:absolute;right:10px;font:700 10px Onest;font-style:normal;padding:4px 9px;border-radius:999px}
.hs-st1{background:var(--line);color:var(--muted);animation:st1 var(--T) infinite}
.hs-st2{background:#34c759;color:#fff;opacity:0;animation:st2 var(--T) var(--ease) infinite}
@keyframes st1{0%,70%{opacity:1}73%,100%{opacity:0}}
@keyframes st2{0%,70%{opacity:0;transform:scale(.5)}75%,100%{opacity:1;transform:none}}
.hs-crm p{font-size:10.5px;color:var(--muted)}
.hs--auto .hs__cur{animation:auCur var(--T) var(--ease) infinite}
@keyframes auCur{0%,24%{left:82%;top:88%;opacity:0}26%{left:82%;top:88%;opacity:1}33%,37%{left:38%;top:59%;opacity:1}42%,100%{left:38%;top:59%;opacity:0}}
.hs--auto .hs__tap1{left:38%;top:59%;animation:aTap var(--T) ease-out infinite}
@keyframes aTap{0%,34%{opacity:0;transform:scale(.3)}35%{opacity:1;transform:scale(.4)}42%,100%{opacity:0;transform:scale(1.7)}}
.hs--auto{--T:12s}
.hs--auto~.hs__cap .c1{animation:aC1 12s infinite}
.hs--auto~.hs__cap .c2{animation:aC2 12s infinite}
.hs--auto~.hs__cap .c3{animation:aC3 12s infinite}
.hs--auto~.hs__cap .c4{animation:aC4 12s infinite}
@keyframes aC1{0%,11%{opacity:1;transform:none}13%,98%{opacity:0;transform:translateY(-6px)}100%{opacity:1}}
@keyframes aC2{0%,12%{opacity:0;transform:translateY(6px)}14%,32%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes aC3{0%,33%{opacity:0;transform:translateY(6px)}35%,57%{opacity:1;transform:none}59%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes aC4{0%,58%{opacity:0;transform:translateY(6px)}60%,95%{opacity:1;transform:none}98%,100%{opacity:0}}

/* --- приложение цветочного магазина: меню → каталог → корзина → бонусы → поздравление. Цикл 18 с ---
   Телефон фиксированного размера (экран 128 px), поэтому точки касаний заданы в пикселях. */
.hs--app{--T:18s;--fx:#e2467f;background:radial-gradient(60% 70% at 50% 40%,color-mix(in srgb,var(--pink) 16%,transparent),transparent 70%),var(--bg2)}
.hs-ph{position:absolute;left:50%;top:12px;width:168px;height:300px;margin-left:-84px;transform:scale(1.14);transform-origin:50% 0;border-radius:24px;border:4px solid #15131c;background:#fff;overflow:hidden;color:#2a1d25;box-shadow:0 24px 40px -20px rgba(20,18,30,.55)}
.fx{position:absolute;inset:0;background:#fff}
.fx-home{background:linear-gradient(160deg,#ffd6e6,#d9ccff);animation:fxHome var(--T) infinite}
@keyframes fxHome{0%,8%{opacity:1}10%,97%{opacity:0}100%{opacity:1}}
.fx-clock{position:absolute;left:0;right:0;top:8px;text-align:center;font:700 9px Onest}
.fx-home i,.fx-home b{position:absolute;width:26px;height:26px;border-radius:8px}
.fx-home i{background:rgba(42,29,37,.1)}
.fx-icon{background:var(--fx);color:#fff;font-size:15px;display:grid;place-items:center;box-shadow:0 5px 12px -4px var(--fx);animation:fxIcon var(--T) infinite}
@keyframes fxIcon{0%,5%,8%,100%{transform:scale(1)}6.5%{transform:scale(.8)}}

.fx-app{opacity:0;animation:fxApp var(--T) var(--ease) infinite}
@keyframes fxApp{0%,8%{opacity:0;transform:scale(.6)}11%,42%{opacity:1;transform:none}44%,100%{opacity:0}}
.fx-hd{position:absolute;z-index:3;left:0;right:0;top:0;height:28px;display:flex;align-items:center;gap:5px;padding:0 7px;background:#fff;border-bottom:1px solid #f1e6ec}
.fx-hd b{flex:1;font:800 8.5px Unbounded;letter-spacing:.02em;color:var(--fx)}
.fx-burger{position:relative;flex:none;width:12px;height:1.6px;background:#2a1d25;border-radius:2px}
.fx-burger:before,.fx-burger:after{content:"";position:absolute;left:0;width:12px;height:1.6px;background:#2a1d25;border-radius:2px}
.fx-burger:before{top:-4px}.fx-burger:after{top:4px}
.fx-bon{flex:none;padding:3px 6px;border-radius:999px;background:#fff1cc;color:#a86a00;font:700 7.5px Onest}
.fx-cart{position:relative;flex:none;width:16px;height:16px}
.fx-cart svg{width:16px;height:16px}
.fx-cnt{position:absolute;right:-5px;top:-4px;width:11px;height:11px;border-radius:50%;background:var(--fx);color:#fff;font:700 7px/11px Onest;text-align:center;opacity:0;animation:fxCnt var(--T) var(--ease) infinite}
.fx-cnt em{position:absolute;inset:0;font-style:normal}
.fx-cnt .q1{animation:fxQ1 var(--T) infinite}.fx-cnt .q2{opacity:0;animation:fxQ2 var(--T) infinite}
@keyframes fxCnt{0%,35%{opacity:0;transform:scale(0)}36.5%{opacity:1;transform:scale(1.35)}38%,38.4%{transform:scale(1)}39.5%{transform:scale(1.35)}41%,100%{opacity:1;transform:scale(1)}}
@keyframes fxQ1{0%,38.4%{opacity:1}38.5%,100%{opacity:0}}
@keyframes fxQ2{0%,38.4%{opacity:0}38.5%,100%{opacity:1}}
.fx-body{position:absolute;left:0;right:0;top:28px;bottom:0;overflow:hidden}
.fx-scroll{animation:fxScroll var(--T) cubic-bezier(.45,0,.2,1) infinite}
@keyframes fxScroll{0%,29%{transform:none}33%,100%{transform:translateY(-70px)}}
.fx-ban{height:48px;margin:6px 6px 0;padding:8px;border-radius:10px;background:center/cover #f5c6d6;color:#fff;display:flex;flex-direction:column;justify-content:flex-end}
.fx-ban small{font-size:6.5px;opacity:.9}
.fx-ban b{font:800 9px/1.1 Unbounded}
.fx-cats{height:40px;margin-top:8px;overflow:hidden}
.fx-cats__in{display:flex;gap:6px;padding:0 6px;width:max-content;animation:fxCats var(--T) cubic-bezier(.45,0,.2,1) infinite}
@keyframes fxCats{0%,23%{transform:none}29%,100%{transform:translateX(-58px)}}
.fx-cats span{width:30px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:6px;white-space:nowrap}
.fx-cats i{width:28px;height:28px;border-radius:50%;background:center/cover #f5c6d6;box-shadow:0 0 0 1.5px #fff,0 0 0 2.5px #f5c6d6}
.fx-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px 6px 0}
.fx-card{position:relative;height:76px;padding:3px;border-radius:9px;background:#fff;box-shadow:0 3px 10px -4px rgba(42,29,37,.25);display:flex;flex-direction:column;gap:1px}
.fx-card i{height:44px;border-radius:7px;background:center/cover #f5c6d6}
.fx-card b{font-size:6.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-card span{font:700 7px Onest;color:var(--fx)}
.fx-card em{position:absolute;right:4px;bottom:4px;width:16px;height:16px;border-radius:50%;background:#fbe3ec;color:var(--fx);font:700 11px/16px Onest;font-style:normal;text-align:center}
.fx-card em.p1{animation:fxP1 var(--T) infinite}.fx-card em.p2{animation:fxP2 var(--T) infinite}
@keyframes fxP1{0%,34.9%{background:#fbe3ec;color:var(--fx);transform:none}35%{transform:scale(.8)}36%,100%{background:var(--fx);color:#fff;transform:none}}
@keyframes fxP2{0%,37.9%{background:#fbe3ec;color:var(--fx);transform:none}38%{transform:scale(.8)}39%,100%{background:var(--fx);color:#fff;transform:none}}
.fx-menu{position:absolute;z-index:4;left:0;top:0;bottom:0;width:74%;padding:12px 10px;background:#fff;box-shadow:12px 0 30px -10px rgba(42,29,37,.4);display:flex;flex-direction:column;gap:7px;transform:translateX(-105%);animation:fxMenu var(--T) var(--ease) infinite}
@keyframes fxMenu{0%,12.5%{transform:translateX(-105%)}14.5%,20%{transform:none}22.5%,100%{transform:translateX(-105%)}}
.fx-menu b{font:800 10px Unbounded}
.fx-menu small{margin:-4px 0 4px;font:700 7px Onest;color:#a86a00}
.fx-menu span{padding:5px 0;border-bottom:1px solid #f4ecf0;font-size:8px}

.fx-bag{padding-top:28px;opacity:0;animation:fxBag var(--T) var(--ease) infinite}
@keyframes fxBag{0%,42%{opacity:0;transform:translateX(100%)}45%,57%{opacity:1;transform:none}59%,100%{opacity:0;transform:none}}
.fx-hd--t b{text-align:center;color:#2a1d25;font-size:8px}
.fx-hd--t span{width:12px;font-size:13px}
.fx-it,.fx-use,.fx-sum,.fx-go{margin:6px 6px 0}
.fx-it{height:28px;display:flex;align-items:center;gap:6px}
.fx-it i{flex:none;width:28px;height:28px;border-radius:7px;background:center/cover #f5c6d6}
.fx-it span{display:flex;flex-direction:column;font:700 7px Onest;color:var(--fx)}
.fx-it span b{font-weight:600;color:#2a1d25}
.fx-use{height:32px;display:flex;align-items:center;justify-content:space-between;padding:0 7px;border-radius:9px;background:#fff6dd;font-size:7px;line-height:1.3}
.fx-use b{color:#a86a00}
.fx-sw{position:relative;width:22px;height:13px;border-radius:999px;background:#ddd;animation:fxSw var(--T) infinite}
.fx-sw:after{content:"";position:absolute;left:2px;top:2px;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);animation:fxSwK var(--T) var(--ease) infinite}
@keyframes fxSw{0%,48.4%{background:#ddd}48.5%,100%{background:#34c759}}
@keyframes fxSwK{0%,48.4%{transform:none}49.5%,100%{transform:translateX(9px)}}
.fx-bag .fx-sum{margin-top:8px;height:18px;display:flex;justify-content:space-between;align-items:center;font-size:8px}
.fx-sum b{display:grid;font:800 9px Unbounded}
.fx-sum b span{grid-area:1/1}
.fx-sum .s0{animation:fxQ1b var(--T) infinite}.fx-sum .s1{opacity:0;animation:fxQ2b var(--T) var(--ease) infinite;color:var(--fx)}
@keyframes fxQ1b{0%,48.9%{opacity:1}49%,100%{opacity:0}}
@keyframes fxQ2b{0%,48.9%{opacity:0;transform:translateY(4px)}50%,100%{opacity:1;transform:none}}
.fx-bag .fx-go{margin-top:8px;height:26px;border-radius:999px;background:var(--fx);color:#fff;font:700 8px/26px Onest;text-align:center;animation:fxGo var(--T) infinite}
@keyframes fxGo{0%,53.5%,55.5%,100%{transform:none}54.5%{transform:scale(.92)}}

.fx-ok{opacity:0;display:flex;flex-direction:column;align-items:center;padding:26px 8px 0;gap:4px;text-align:center;animation:fxOk var(--T) var(--ease) infinite}
@keyframes fxOk{0%,57%{opacity:0;transform:scale(.9)}60%,96%{opacity:1;transform:none}99%,100%{opacity:0}}
.fx-check{width:34px;height:34px;border-radius:50%;background:#34c759;color:#fff;font:800 17px/34px Onest;font-style:normal;margin-bottom:4px}
.fx-ok>b{font:800 9.5px Unbounded}
.fx-ok>small{font-size:7px;color:#8a7a84}
.fx-plus{margin-top:10px;width:100%;padding:9px 6px;border-radius:12px;background:linear-gradient(135deg,var(--fx),#8b5cff);color:#fff;display:flex;flex-direction:column;gap:2px;animation:fxPlus var(--T) var(--ease) infinite}
@keyframes fxPlus{0%,61%{opacity:0;transform:scale(.6)}64%{opacity:1;transform:scale(1.08)}67%,100%{opacity:1;transform:none}}
.fx-plus small,.fx-plus em{font-size:6.5px;opacity:.9;font-style:normal}
.fx-plus b{font:800 15px Unbounded;letter-spacing:-.02em}

.fx-push{position:absolute;z-index:6;left:4px;right:4px;top:5px;display:flex;gap:5px;padding:6px;border-radius:11px;background:rgba(255,255,255,.97);box-shadow:0 10px 24px -8px rgba(42,29,37,.5);font-size:6.8px;line-height:1.3;opacity:0;animation:fxPush var(--T) var(--ease) infinite}
.fx-push>i{flex:none;width:18px;height:18px;border-radius:5px;background:var(--fx);color:#fff;font-size:11px;font-style:normal;display:grid;place-items:center}
.fx-push span{display:flex;flex-direction:column}
.fx-push b{font-size:7px}
.fx-push em{font-style:normal}.fx-push u{text-decoration:none;font-weight:800;color:var(--fx)}
@keyframes fxPush{0%,75%{opacity:0;transform:translateY(-120%)}78%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateY(-120%)}}

.fx-tap{position:absolute;z-index:7;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:rgba(226,70,127,.45);opacity:0;pointer-events:none;animation:fxTap var(--T) ease-out infinite}
@keyframes fxTap{0%{opacity:1;transform:scale(.4)}5%{opacity:0;transform:scale(1.7)}100%{opacity:0}}
.fx-t1{left:63px;top:43px;animation-delay:1.1s}
.fx-t2{left:13px;top:14px;animation-delay:2.2s}
.fx-t3{left:65px;top:132px;animation-delay:6.3s}
.fx-t4{left:142px;top:132px;animation-delay:6.84s}
.fx-t5{left:145px;top:14px;animation-delay:7.38s}
.fx-t6{left:136px;top:118px;animation-delay:8.7s}
.fx-t7{left:80px;top:181px;animation-delay:9.75s}
.hs--app~.hs__cap .c1{animation:pC1 18s infinite}
.hs--app~.hs__cap .c2{animation:pC2 18s infinite}
.hs--app~.hs__cap .c3{animation:pC3 18s infinite}
.hs--app~.hs__cap .c4{animation:pC4 18s infinite}
@keyframes pC1{0%,32%{opacity:1;transform:none}34%,98%{opacity:0;transform:translateY(-6px)}100%{opacity:1}}
@keyframes pC2{0%,33%{opacity:0;transform:translateY(6px)}35%,56%{opacity:1;transform:none}58%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes pC3{0%,57%{opacity:0;transform:translateY(6px)}59%,74%{opacity:1;transform:none}76%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes pC4{0%,75%{opacity:0;transform:translateY(6px)}77%,95%{opacity:1;transform:none}98%,100%{opacity:0}}

/* мини-ролик стартует с начала, только когда карточка появилась на экране */
.hub__card:not(.play) :is(.hs,.hs__cap) :is(*,*:before,*:after){animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.hs *,.hs__cap *{animation:none!important}.hs__cap .c1{opacity:1}.fx-app{opacity:1}}

/* живые мини-иллюстрации вместо иконок */
.hub__art{display:block;width:100%;height:auto;max-height:130px;color:var(--acc);margin:4px 0 2px;overflow:visible}
.hub__art .st{fill:none;stroke:currentColor;stroke-width:1.6}
.hub__art .fr{fill:currentColor;fill-opacity:.06;stroke:currentColor;stroke-opacity:.45;stroke-width:1.4}
.hub__art .f{fill:currentColor}
.hub__art .f2{fill:currentColor;fill-opacity:.28}
.hub__art .f3{fill:currentColor;fill-opacity:.12}
.hub__art .ink{fill:var(--ink)}
.hub__art .paper{fill:var(--card)}
.a-cur{animation:aCur 4.5s var(--ease) infinite}
@keyframes aCur{0%,12%{transform:translate(150px,104px)}45%,70%{transform:translate(64px,96px)}100%{transform:translate(150px,104px)}}
.a-btn{transform-box:fill-box;transform-origin:center;animation:aBtn 4.5s infinite}
@keyframes aBtn{0%,46%,56%,100%{transform:scale(1)}50%{transform:scale(.9)}}
.a-ping{transform-box:fill-box;transform-origin:center;animation:aPing 4.5s infinite;opacity:0}
@keyframes aPing{0%,48%{opacity:0;transform:scale(.6)}52%{opacity:.5}70%,100%{opacity:0;transform:scale(1.8)}}
.a-spin{transform-box:fill-box;transform-origin:center;animation:spin 8s linear infinite}
.a-blink{animation:aBlink 3.2s infinite}
@keyframes aBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.a-blink{transform-box:fill-box;transform-origin:center}
.a-in{animation:aIn 5s var(--ease) infinite}
.a-in2{animation:aIn 5s var(--ease) infinite 1.2s}
@keyframes aIn{0%,8%{opacity:0;transform:translateY(8px)}18%,80%{opacity:1;transform:none}92%,100%{opacity:0}}
.a-badge{transform-box:fill-box;transform-origin:center;animation:aBadge 2.4s var(--ease) infinite}
@keyframes aBadge{0%,60%,100%{transform:scale(1)}70%{transform:scale(1.35)}80%{transform:scale(.92)}}
.a-float{animation:aFloat 5s ease-in-out infinite}
@keyframes aFloat{50%{transform:translateY(-5px)}}
@media(prefers-reduced-motion:reduce){.hub__art *{animation:none!important}}

.hub__card h3{font:800 clamp(24px,2.4vw,32px)/1.05 Unbounded;letter-spacing:-.03em}
.hub__card .goal{font-size:17px;font-weight:600;line-height:1.35}
.hub__card p{color:var(--muted);font-size:15px}
.hub__card ul{list-style:none;display:grid;gap:9px;font-size:15px;color:#cfccd9}
.hub__card li{position:relative;padding-left:24px}
.hub__card li:before{content:"✓";position:absolute;left:0;color:var(--acc);font-weight:800}
.hub__if{font-size:14px;padding:12px 14px;border-radius:14px;background:var(--bg2);border:1px dashed var(--line)}
.hub__if b{color:var(--ink)}
.hub__price{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.hub__price b{display:block;font:800 24px Unbounded;letter-spacing:-.03em}
.hub__price small{color:var(--muted);font-size:13px}
.hub__go{flex:none;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:#fff;font-size:20px;transition:transform .4s var(--ease)}
[data-theme="dark"] .hub__card--site .hub__go{color:#07060b}
.hub__card:hover .hub__go{transform:rotate(-45deg)}

/* ---------- о нас ---------- */
.ab{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,5vw,64px);margin-top:56px;align-items:stretch}
.ab>*{min-width:0}
.ab__intro{display:flex;flex-direction:column;gap:20px}
.ab__big{font:700 clamp(22px,2.4vw,34px)/1.25 Unbounded;letter-spacing:-.03em}
.ab__p{color:var(--muted);font-size:17px;max-width:600px}
.ab__run{margin-top:auto;overflow:hidden;padding:14px 0;border-block:1px solid var(--line);-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ab__run-in{display:flex;align-items:center;gap:18px;width:max-content;animation:abRun 26s linear infinite;font:700 clamp(18px,1.8vw,24px) Unbounded;letter-spacing:-.02em;white-space:nowrap}
.ab__run-in i{font-style:normal;color:var(--lime);font-size:.7em}
@keyframes abRun{to{transform:translateX(-50%)}}
.ab__nums{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ab__n{position:relative;overflow:hidden;padding:22px;border-radius:22px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-end;gap:6px;transition:transform .5s var(--ease),border-color .3s}
.ab__n:hover{transform:translateY(-4px);border-color:var(--lime)}
.ab__n:after{content:"";position:absolute;width:180px;height:180px;right:-70px;top:-80px;border-radius:50%;background:radial-gradient(var(--lime),transparent 65%);opacity:.12;pointer-events:none}
.ab__n b{font:800 clamp(40px,4.4vw,64px)/.95 Unbounded;letter-spacing:-.05em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.ab__n b span{font:inherit}
.ab__n>span{font-size:14px;color:var(--muted);line-height:1.4}
.ab__n--big{grid-row:span 2;background:radial-gradient(90% 70% at 100% 0%,color-mix(in srgb,var(--lime) 20%,transparent),transparent 70%),var(--card)}
.ab__n--big b{font-size:clamp(72px,8vw,120px)}
.ab__n--wide{grid-column:span 2;flex-direction:row;align-items:center;justify-content:flex-start;gap:18px}
.ab__n--wide b{font-size:clamp(34px,3.4vw,48px)}

.ab__flow{margin-top:28px;padding:30px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.ab__flow-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 20px}
.ab__flow-h b{font:700 clamp(19px,1.8vw,24px) Unbounded;letter-spacing:-.02em}
.ab__flow-h span{color:var(--lime);font-weight:700}
.ab__steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:28px}
.ab__steps>*{min-width:0}
.ab__line{position:absolute;left:calc((100% - 54px) / 8);right:calc((100% - 54px) / 8);top:47px;height:3px;border-radius:3px;background:var(--line)}
.ab__line i{position:absolute;inset:0;border-radius:inherit;background:var(--lime);box-shadow:0 0 10px var(--lime);transform-origin:left;transform:scaleX(0);transition:transform 2.4s var(--ease)}
.ab__flow.in .ab__line i{transform:scaleX(1)}
.ab__s{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.ab__s p{max-width:260px}
.ab__s em{font:700 12px 'JetBrains Mono',monospace;font-style:normal;color:var(--muted);letter-spacing:.04em;height:18px}
.ab__dot{position:relative;z-index:1;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;margin-bottom:8px;background:var(--bg2);border:2px solid var(--line);font:800 16px Unbounded;color:var(--muted);transition:background .5s,border-color .5s,color .5s,transform .5s var(--ease),box-shadow .5s}
.ab__flow.in .ab__dot{background:var(--lime);border-color:var(--lime);color:#07060b;transform:scale(1.06);box-shadow:0 0 0 7px color-mix(in srgb,var(--lime) 16%,transparent)}
.ab__flow.in .ab__s:nth-of-type(2) .ab__dot{transition-delay:.6s}
.ab__flow.in .ab__s:nth-of-type(3) .ab__dot{transition-delay:1.2s}
.ab__flow.in .ab__s:nth-of-type(4) .ab__dot{transition-delay:1.8s}
.ab__dot svg{width:24px;height:12px}
.ab__s b{font:700 17px/1.2 Unbounded;letter-spacing:-.02em}
.ab__s p{font-size:14px;color:var(--muted)}
[data-theme="light"] .ab__flow.in .ab__dot{color:#fff}
[data-theme="light"] :is(.ab__n,.ab__flow){box-shadow:0 1px 2px rgba(20,18,30,.04),0 14px 34px -22px rgba(20,18,30,.22)}
@media(max-width:1000px){.ab{grid-template-columns:1fr}}
@media(max-width:760px){
  .ab__flow{padding:24px 18px}
  .ab__steps{grid-template-columns:1fr;gap:18px}
  .ab__s{display:grid;grid-template-columns:44px 1fr;column-gap:14px;row-gap:2px;text-align:left;align-items:start}
  .ab__s p{max-width:none}
  .ab__s em{grid-column:2;height:auto}
  .ab__dot{grid-column:1;grid-row:1/4;margin:0}
  .ab__s b,.ab__s p{grid-column:2}
  .ab__line{left:21px;right:auto;top:22px;bottom:22px;width:3px;height:auto}
  .ab__line i{transform:scaleY(0);transform-origin:top}
  .ab__flow.in .ab__line i{transform:scaleY(1)}
}
@media(max-width:520px){.ab__n{padding:18px 16px}.ab__n--wide{flex-direction:column;align-items:flex-start;gap:6px}}
@media(prefers-reduced-motion:reduce){.ab__run-in{animation:none}}.principles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}
.principles>*{min-width:0}
.principles div{position:relative;overflow:hidden;isolation:isolate;padding:26px 24px;border-radius:22px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;gap:8px;transition:transform .5s var(--ease),border-color .3s,box-shadow .4s}
.principles div:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--lime) 18%,transparent),transparent 70%);opacity:0;transition:opacity .4s}
.principles div:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--lime) 60%,transparent);box-shadow:0 24px 50px -30px color-mix(in srgb,var(--lime) 70%,transparent)}
.principles div:hover:before{opacity:1}
.principles .ic{width:52px;height:52px;padding:13px;box-sizing:border-box;border-radius:16px;color:var(--lime);background:color-mix(in srgb,var(--lime) 13%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lime) 30%,transparent);margin-bottom:10px;transition:transform .5s var(--ease),background .3s,color .3s}
.principles div:hover .ic{transform:rotate(-8deg) scale(1.08);background:var(--lime);color:var(--on-lime,#07060b)}
[data-theme="light"] .principles div:hover .ic{color:#fff}
.principles b{font:700 17px/1.25 Unbounded;letter-spacing:-.01em}
.principles span{font-size:14px;color:var(--muted)}
@media(max-width:1000px){.about{grid-template-columns:1fr}.principles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.principles{grid-template-columns:1fr}.about__nums div{padding:20px 16px}}
[data-theme="light"] :is(.principles div,.about__nums){box-shadow:0 1px 2px rgba(20,18,30,.04),0 14px 34px -22px rgba(20,18,30,.22)}

/* ---------- «Не обещаем — показываем»: три живых примера ---------- */
.wk{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:18px;margin-top:56px}
.wk>*{min-width:0}
.wk__c{display:flex;flex-direction:column;border-radius:var(--r);background:var(--card);border:1px solid var(--line);overflow:hidden}
.wk__stage{position:relative;height:330px;display:grid;place-items:center;padding:22px;overflow:hidden;background:var(--bg2)}
.wk__stage--site{place-items:stretch;grid-template-rows:1fr auto;gap:12px}
.wk__stage--app{background:radial-gradient(60% 60% at 50% 45%,color-mix(in srgb,var(--pink) 22%,transparent),transparent 70%),var(--bg2)}
.wk__stage--bot{background:radial-gradient(60% 60% at 50% 45%,color-mix(in srgb,var(--violet) 22%,transparent),transparent 70%),var(--bg2)}
.wk__browser{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--card);min-height:0}
.wk__bar{height:30px;flex:none;display:flex;align-items:center;gap:6px;padding:0 12px;border-bottom:1px solid var(--line)}
.wk__bar i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.wk__bar span{margin-left:8px;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk__view{position:relative;flex:1;overflow:hidden;background:#fff}
.wk__view iframe{position:absolute;left:0;top:0;width:1440px;border:0;transform-origin:0 0}
.wk__chips{display:flex;gap:6px;flex-wrap:wrap}
.wk__chips button{padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--muted);font:600 13px Onest;cursor:pointer;transition:.2s}
.wk__chips button.on{background:var(--lime);border-color:var(--lime);color:#fff}
[data-theme="dark"] .wk__chips button.on{color:#07060b}
/* 3D: телефон экраном к нам, чуть боком, за ним — задняя крышка второго */
.wk__stage--app{perspective:1000px}
.wk__duo{position:relative;width:160px;height:290px;transform-style:preserve-3d;animation:wkSway 8s ease-in-out infinite}
@keyframes wkSway{0%,100%{transform:rotateY(0) translateY(0)}50%{transform:rotateY(-7deg) translateY(-6px)}}
.wk__phone{position:absolute;left:9px;top:0;width:142px;height:288px;border-radius:32px;padding:5px;background:linear-gradient(135deg,#3a3845,#15131c 40%,#2a2833);transform:rotateY(18deg) rotateX(3deg);transform-style:preserve-3d;
  box-shadow:-7px 4px 0 -1px #0b0a10,-7px 4px 2px -1px rgba(255,255,255,.08),0 40px 60px -25px rgba(139,92,255,.55),0 20px 30px -20px rgba(0,0,0,.6)}
.wk__phone:before{content:"";position:absolute;z-index:3;left:50%;top:11px;width:40px;height:11px;margin-left:-20px;border-radius:999px;background:#07060b}
.wk__phone:after{content:"";position:absolute;z-index:3;inset:5px;border-radius:27px;background:linear-gradient(115deg,rgba(255,255,255,.18),transparent 32%);pointer-events:none}
.wk__shots{position:relative;width:100%;height:100%;border-radius:27px;overflow:hidden;background:#07060b}
.wk__shots img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .9s ease}
.wk__shots img.on{opacity:1}
@media(prefers-reduced-motion:reduce){.wk__duo{animation:none}}

/* бот: переписка идёт сама, как в настоящем чате. Цикл 24 с */
.wk-bot{--T:24s}
.wk-bot .chatbox__body{gap:0;animation:wbBody var(--T) infinite}
@keyframes wbBody{0%{opacity:0}2%,94%{opacity:1}98%,100%{opacity:0}}
.bm{flex:none;display:flex;flex-direction:column;max-height:0;opacity:0;overflow:hidden}
.wk-bot .msg{opacity:1;transform:none;transition:none}
.bm>*{margin-top:7px}
.bm1{animation:bm1 var(--T) var(--ease) infinite}@keyframes bm1{0%,3%{max-height:0;opacity:0}5%,100%{max-height:140px;opacity:1}}
.bm2{animation:bm2 var(--T) var(--ease) infinite}@keyframes bm2{0%,7%{max-height:0;opacity:0}8.5%,13%{max-height:60px;opacity:1}14%,100%{max-height:0;opacity:0}}
.bm3{animation:bm3 var(--T) var(--ease) infinite}@keyframes bm3{0%,13.5%{max-height:0;opacity:0}15.5%,100%{max-height:140px;opacity:1}}
.bm4{animation:bm4 var(--T) var(--ease) infinite}@keyframes bm4{0%,17%{max-height:0;opacity:0}19%,100%{max-height:60px;opacity:1}}
.bm5{animation:bm5 var(--T) var(--ease) infinite}@keyframes bm5{0%,28%{max-height:0;opacity:0}30%,100%{max-height:140px;opacity:1}}
.bm6{animation:bm6 var(--T) var(--ease) infinite}@keyframes bm6{0%,31%{max-height:0;opacity:0}32.5%,37%{max-height:60px;opacity:1}38%,100%{max-height:0;opacity:0}}
.bm7{animation:bm7 var(--T) var(--ease) infinite}@keyframes bm7{0%,37.5%{max-height:0;opacity:0}39.5%,100%{max-height:140px;opacity:1}}
.bm8{animation:bm8 var(--T) var(--ease) infinite}@keyframes bm8{0%,42%{max-height:0;opacity:0}44%,61%{max-height:60px;opacity:1}62.5%,100%{max-height:0;opacity:0}}
.bm9{animation:bm9 var(--T) var(--ease) infinite}@keyframes bm9{0%,62%{max-height:0;opacity:0}64.5%,100%{max-height:160px;opacity:1}}
.wk-typing{display:inline-flex;gap:4px;padding:10px 12px;border-radius:14px 14px 14px 4px;background:var(--card);border:1px solid var(--line)}
.wk-typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:dotb .9s ease-in-out infinite}
.wk-typing i:nth-child(2){animation-delay:.15s}.wk-typing i:nth-child(3){animation-delay:.3s}
.wk-slots{display:flex;align-items:flex-start;gap:6px}
.wk-slots span{flex:none;height:auto;line-height:1.2;padding:6px 12px;border-radius:999px;border:1.5px solid var(--violet);color:var(--violet);font:700 12px Onest;background:var(--card)}
.wk-slots .sel{animation:wbPick var(--T) infinite}
@keyframes wbPick{0%,25%{background:var(--card);color:var(--violet);transform:none}26%{transform:scale(.88)}27%,100%{background:var(--violet);color:#fff;transform:none}}
.wk-wait{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:color-mix(in srgb,var(--violet) 12%,transparent);color:var(--muted);font-size:12px}
.wk-wait i{width:12px;height:12px;border-radius:50%;border:2px solid color-mix(in srgb,var(--violet) 30%,transparent);border-top-color:var(--violet);animation:spin .8s linear infinite}
.wk-ok{border:1px solid #34c759!important;box-shadow:0 0 0 3px rgba(52,199,89,.15)}
@media(prefers-reduced-motion:reduce){.wk-bot *{animation:none!important}.bm{max-height:none;opacity:1}.bm2,.bm6,.bm8{display:none}}
.wk__stage--bot{grid-template-rows:100%}
.wk__chat{max-width:280px;font-size:13px;height:100%;display:flex;flex-direction:column}
.wk__chat .chatbox__top{padding:10px 14px}
.wk__chat .chatbox__body{flex:1;min-height:0;padding:12px;gap:7px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.wk__chat .msg{font-size:12.5px;padding:8px 11px}
.wk__b{display:flex;flex-direction:column;gap:6px;padding:22px 24px 24px;flex:1}
.wk__b small{font:600 12px Onest;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.wk__b b{font:700 20px/1.2 Unbounded;letter-spacing:-.02em}
.wk__b span{color:var(--muted);font-size:14px}
.wk__go{margin-top:auto;padding-top:12px;font:700 15px Onest;color:var(--lime)}
.wk__go .arr{display:inline-block;transition:transform .3s var(--ease)}
.wk__c:hover .wk__go .arr{transform:translateX(5px)}
@media(max-width:1080px){.wk{grid-template-columns:1fr 1fr}.wk__c:first-child{grid-column:1/-1}}
@media(max-width:700px){.wk{grid-template-columns:1fr}.wk__stage{height:300px}}

/* ---------- «С чего начать — зависит от вас» ---------- */
.pick{display:grid;gap:10px;margin-top:48px}
.pick__row{display:grid;grid-template-columns:1fr 260px 44px;align-items:center;gap:20px;padding:20px 22px 20px 26px;border-radius:20px;background:var(--card);border:1px solid var(--line);color:inherit;text-decoration:none;transition:transform .35s var(--ease),border-color .3s}
.pick__row:hover{transform:translateX(6px);border-color:var(--lime)}
.pick__s{font-size:17px;line-height:1.4}
.pick__a{display:flex;flex-direction:column;gap:2px;padding-left:18px;border-left:3px solid var(--acc,var(--muted))}
.pick__a b{font:700 17px Unbounded;letter-spacing:-.02em}
.pick__a small{font-size:13px;color:var(--muted)}
.pick__a--site{--acc:var(--lime)}.pick__a--auto{--acc:var(--violet)}.pick__a--app{--acc:var(--pink)}
.pick__row>.arr{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--bg2);font-size:18px;transition:background .3s,color .3s,transform .3s var(--ease)}
.pick__row:hover>.arr{background:var(--lime);color:#fff;transform:rotate(-45deg)}
.pick__row--ask{border-style:dashed;background:transparent}
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:28px;font-size:15px}
.flow__t{color:var(--muted);margin-right:4px}
.flow__s{padding:9px 15px;border-radius:999px;background:var(--card);border:1px solid var(--line)}
.flow__s b{color:var(--lime)}
.flow i{font-style:normal;color:var(--muted)}
@media(max-width:760px){
  .pick__row{grid-template-columns:1fr 36px;gap:12px 14px;padding:18px}
  .pick__s{grid-column:1/-1;font-size:16px}
  .pick__a{padding-left:12px}
  .pick__row>.arr{width:36px;height:36px}
  .flow{flex-direction:column;align-items:flex-start}
  .flow i{transform:rotate(90deg);margin-left:18px}
}

/* ---------- цепочка «одна система»: клиент идёт по шагам ---------- */
.chain{margin-top:40px;padding:32px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);--T:8s}
.chain{position:relative;overflow:hidden;border-color:color-mix(in srgb,var(--lime) 40%,var(--line));background:radial-gradient(70% 90% at 0% 0%,color-mix(in srgb,var(--lime) 12%,transparent),transparent 60%),radial-gradient(60% 80% at 100% 100%,color-mix(in srgb,var(--pink) 10%,transparent),transparent 60%),var(--card)}
.chain__k{display:inline-block;margin-bottom:12px;padding:6px 12px;border-radius:999px;background:var(--lime);color:#07060b;font:700 11px Onest;letter-spacing:.12em;text-transform:uppercase}
[data-theme="light"] .chain__k{color:#fff}
.chain__t{font:800 clamp(22px,2.6vw,36px)/1.15 Unbounded;letter-spacing:-.03em;max-width:900px}
.chain__hl{color:var(--lime)}
.chain__track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px}
.chain__line{position:absolute;left:calc((100% - 48px) / 8);right:calc((100% - 48px) / 8);top:28px;height:3px;margin-top:-1.5px;border-radius:3px;background:var(--line)}
.chain__line:before{content:"";position:absolute;left:0;top:0;bottom:0;border-radius:inherit;background:var(--lime);box-shadow:0 0 12px var(--lime),0 0 3px var(--lime);animation:chFill var(--T) var(--ease) infinite}
.chain__dot{position:absolute;top:50%;left:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--ink);border:3px solid var(--card);box-shadow:0 0 0 4px color-mix(in srgb,var(--lime) 35%,transparent);animation:chDot var(--T) var(--ease) infinite}
@keyframes chDot{0%,10%{left:0;opacity:1}25%,35%{left:33.333%}50%,60%{left:66.666%}72%,76%{left:100%;opacity:1}78%{left:100%;opacity:0}79%,97%{left:0;opacity:0}100%{left:0;opacity:1}}
@keyframes chFill{0%,10%{width:0;opacity:1}25%,35%{width:33.333%}50%,60%{width:66.666%}72%,92%{width:100%;opacity:1}97%{width:100%;opacity:0}98%,100%{width:0;opacity:0}}
.chain__n{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;min-width:0}
.chain__ico{position:relative;z-index:1;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin-bottom:8px;background:var(--bg2);border:2px solid var(--line);color:var(--muted);animation:chOn var(--T) var(--ease) infinite}
.chain__ico .ic{width:24px;height:24px}
.chain__n small{font:700 11px Onest;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.chain__n b{font:700 16px/1.2 Unbounded;letter-spacing:-.02em}
.chain__n p{font-size:14px;color:var(--muted);max-width:230px}
/* пройденные шаги горят зелёным, пока клиент не вернётся к началу */
.chain{--on:#07060b}
[data-theme="light"] .chain{--on:#fff}
.chain__n1 .chain__ico{animation-name:chOn1}.chain__n2 .chain__ico{animation-name:chOn2}.chain__n3 .chain__ico{animation-name:chOn3}.chain__n4 .chain__ico{animation-name:chOn4}
@keyframes chOn1{0%,92%{background:var(--lime);border-color:var(--lime);color:var(--on);transform:scale(1.08);box-shadow:0 0 0 7px color-mix(in srgb,var(--lime) 20%,transparent),0 0 24px color-mix(in srgb,var(--lime) 55%,transparent)}94%{background:var(--bg2);border-color:var(--line);color:var(--muted);transform:none;box-shadow:none}96%,100%{background:var(--lime);border-color:var(--lime);color:var(--on);transform:scale(1.08);box-shadow:0 0 0 7px color-mix(in srgb,var(--lime) 20%,transparent),0 0 24px color-mix(in srgb,var(--lime) 55%,transparent)}}
@keyframes chOn2{0%,24%,94%,100%{background:var(--bg2);border-color:var(--line);color:var(--muted);transform:none;box-shadow:none}26%,92%{background:var(--lime);border-color:var(--lime);color:var(--on);transform:scale(1.08);box-shadow:0 0 0 7px color-mix(in srgb,var(--lime) 20%,transparent),0 0 24px color-mix(in srgb,var(--lime) 55%,transparent)}}
@keyframes chOn3{0%,49%,94%,100%{background:var(--bg2);border-color:var(--line);color:var(--muted);transform:none;box-shadow:none}51%,92%{background:var(--lime);border-color:var(--lime);color:var(--on);transform:scale(1.08);box-shadow:0 0 0 7px color-mix(in srgb,var(--lime) 20%,transparent),0 0 24px color-mix(in srgb,var(--lime) 55%,transparent)}}
@keyframes chOn4{0%,71%,94%,100%{background:var(--bg2);border-color:var(--line);color:var(--muted);transform:none;box-shadow:none}73%,92%{background:var(--lime);border-color:var(--lime);color:var(--on);transform:scale(1.08);box-shadow:0 0 0 7px color-mix(in srgb,var(--lime) 20%,transparent),0 0 24px color-mix(in srgb,var(--lime) 55%,transparent)}}
.chain__bk{display:none}
/* возврат: линия идёт от последнего шага обратно к «Сайту» */
.chain__loop{margin:18px 12.5% 12px;height:34px;border:2px dashed var(--line);border-top:0;border-radius:0 0 26px 26px;position:relative}
.chain__ret{position:absolute;inset:0 -2px -2px;border:3px solid var(--lime);border-top:0;border-radius:0 0 26px 26px;clip-path:inset(0 0 0 100%);animation:chRet var(--T) linear infinite;box-shadow:0 6px 18px -8px var(--lime)}
@keyframes chRet{0%,77%{clip-path:inset(0 0 0 100%);opacity:1}80%{clip-path:inset(0 0 0 97%)}92%{clip-path:inset(0 0 0 0)}97%{clip-path:inset(0 0 0 0);opacity:1}100%{clip-path:inset(0 0 0 0);opacity:0}}
.chain__rdot{position:absolute;z-index:2;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 5px color-mix(in srgb,var(--lime) 30%,transparent),0 0 18px var(--lime);left:100%;top:0;opacity:0;animation:chRdot var(--T) linear infinite}
@keyframes chRdot{0%,76%{left:100%;top:0;opacity:0}77%{left:100%;top:0;opacity:1}80%{left:calc(100% - 4px);top:100%}83%{left:calc(100% - 26px);top:100%}89%{left:26px;top:100%}92%{left:4px;top:100%}95%{left:0;top:0;opacity:1}97%,100%{left:0;top:0;opacity:0}}
.chain__loop span{position:absolute;z-index:3;left:50%;bottom:-11px;transform:translateX(-50%);padding:0 12px;background:var(--card);font:700 13px Onest;color:var(--ink);white-space:nowrap;border-radius:999px}
@media(max-width:760px){
  .chain{padding:24px 18px}
  .chain__track{grid-template-columns:1fr;gap:0}
  .chain__n{display:grid;grid-template-columns:56px 1fr;grid-template-rows:auto auto 1fr;column-gap:14px;row-gap:2px;align-items:start;text-align:left;height:118px}
  .chain__ico{grid-row:1/4;margin:0}
  .chain__n p{max-width:none}
  .chain__line{left:28px;right:auto;top:28px;bottom:calc(118px - 28px);width:3px;height:auto;margin:0 0 0 -1.5px}
  .chain__line:before{right:0;width:auto!important;height:0;animation-name:chFillV}
  .chain__dot{left:50%!important;top:0;margin:-9px 0 0 -9px;animation-name:chDotV}
  .chain__loop{margin:6px 0 0;height:auto;border:0}
  .chain__ret,.chain__rdot{display:none}
  .chain__bk{display:block;position:absolute;left:-13px;width:13px;top:28px;bottom:calc(118px - 28px)}
  .chain__back{position:absolute;inset:0;border:3px solid var(--lime);border-right:0;border-radius:16px 0 0 16px;box-shadow:-2px 0 10px -2px var(--lime);clip-path:inset(100% 0 0 0);animation:chBack var(--T) linear infinite}
  .chain__bdot{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px color-mix(in srgb,var(--lime) 30%,transparent),0 0 14px var(--lime);opacity:0;animation:chBackDot var(--T) linear infinite}
  .ab__line{display:none}
  .ab__s:not(:last-of-type):after{content:"";position:absolute;left:20.5px;top:44px;bottom:-18px;width:3px;border-radius:3px;background:var(--line)}
  .ab__s:not(:last-of-type):before{content:"";position:absolute;z-index:1;left:20.5px;top:44px;bottom:-18px;width:3px;border-radius:3px;background:var(--lime);transform:scaleY(0);transform-origin:top;transition:transform .6s var(--ease)}
  .ab__flow.in .ab__s:before{transform:scaleY(1)}
  .ab__flow.in .ab__s:nth-of-type(2):before{transition-delay:.6s}
  .ab__flow.in .ab__s:nth-of-type(3):before{transition-delay:1.2s}
  .chain__loop span{position:static;transform:none;padding:0;white-space:normal;display:block}
}
@keyframes chDotV{0%,10%{top:0;opacity:1}25%,35%{top:33.333%}50%,60%{top:66.666%}72%,76%{top:100%;opacity:1}78%{top:100%;opacity:0}79%,97%{top:0;opacity:0}100%{top:0;opacity:1}}
@keyframes chFillV{0%,10%{height:0;opacity:1}25%,35%{height:33.333%}50%,60%{height:66.666%}72%,92%{height:100%;opacity:1}97%{height:100%;opacity:0}98%,100%{height:0;opacity:0}}
/* мобильный возврат: линия уходит влево от последнего шага и поднимается к первому */
@keyframes chBack{0%,77%{clip-path:inset(100% 0 0 0);opacity:1}92%,97%{clip-path:inset(0 0 0 0);opacity:1}100%{clip-path:inset(0 0 0 0);opacity:0}}
@keyframes chBackDot{0%,76%{top:100%;left:100%;opacity:0}77%{top:100%;left:100%;opacity:1}80%{top:100%;left:0}90%{top:0;left:0}94%{top:0;left:100%;opacity:1}96%,100%{top:0;left:100%;opacity:0}}
@media(prefers-reduced-motion:reduce){.chain *{animation:none!important}}

/* ---------- сравнение «Только соцсети / Свой сайт» ---------- */
.cmp2{margin-top:48px;display:grid;gap:10px}
.cmp2__head,.cmp2__row{display:grid;grid-template-columns:220px 1fr 1fr;gap:10px}
.cmp2__tag{padding:12px 20px;border-radius:14px;font:700 15px Onest;text-align:center}
.cmp2__tag--no{background:color-mix(in srgb,#e5484d 12%,var(--card));color:#d13a40}
.cmp2__tag--yes{background:var(--lime);color:#fff}
[data-theme="dark"] .cmp2__tag--yes{color:#07060b}
.cmp2__row>div{padding:18px 20px;border-radius:16px;font-size:15px;line-height:1.45;display:flex;align-items:center}
.cmp2__k{gap:12px;font-weight:700;background:transparent}
.cmp2__k .ic{flex:none;width:36px;height:36px;padding:8px;border-radius:11px;background:var(--card);border:1px solid var(--line);color:var(--lime);box-sizing:border-box}
.cmp2__no{background:var(--card);border:1px solid var(--line);color:var(--muted)}
.cmp2__no:before{content:"✕";flex:none;width:22px;color:#d13a40;font-weight:800}
.cmp2__yes{background:color-mix(in srgb,var(--lime) 10%,var(--card));border:1px solid color-mix(in srgb,var(--lime) 35%,transparent);font-weight:600}
.cmp2__yes:before{content:"✓";flex:none;width:22px;color:var(--lime);font-weight:800}
@media(max-width:760px){
  .cmp2__head{display:none}
  .cmp2{gap:14px}
  .cmp2__row{grid-template-columns:1fr;gap:6px;padding:16px;border-radius:20px;background:var(--card);border:1px solid var(--line)}
  .cmp2__row>div{padding:12px 14px;align-items:flex-start;text-align:left}
  .cmp2__k{padding:2px 2px 6px!important;font-size:16px;align-items:center!important}
  .cmp2__no{background:var(--bg2);border:0}
  .cmp2__no:before,.cmp2__yes:before{margin-top:1px}
}

/* ---------- окупаемость ---------- */
.payback{margin-top:28px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 30px;border-radius:var(--r);
  background:linear-gradient(120deg,color-mix(in srgb,var(--lime) 14%,var(--card)),var(--card) 70%);border:1px solid color-mix(in srgb,var(--lime) 35%,transparent)}
.payback__t{display:flex;flex-direction:column;gap:8px;max-width:760px}
.payback__t b{font:700 clamp(20px,2.2vw,28px)/1.2 Unbounded;letter-spacing:-.02em}
.payback__t span{color:var(--muted);font-size:16px}
.payback .btn{flex:none}
@media(max-width:760px){.payback{flex-direction:column;align-items:flex-start;padding:24px}}

/* ---------- «Все примеры»: мягкий блик, чтобы кнопку заметили ---------- */
.sc-info__cta .btn--ghost{position:relative;overflow:hidden}
.sc-info__cta .btn--ghost:before{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--lime) 35%,transparent),transparent);animation:shine 3.2s ease-in-out infinite;pointer-events:none}
@keyframes shine{0%,55%{left:-60%}100%{left:130%}}
.sc-info__cta .btn--ghost .arr{animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(4px)}}

/* ---------- почему без сайта нельзя ---------- */
.reasons{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:56px}
.reasons>*{min-width:0}
.reason{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;padding:30px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.reason__n{grid-row:span 3;font:800 clamp(38px,4vw,56px)/1 Unbounded;letter-spacing:-.05em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.reason h3{font:700 clamp(19px,1.7vw,23px)/1.2 Unbounded;letter-spacing:-.02em}
.reason p{color:var(--muted);font-size:15px}
.reason .ex{font-size:14px;margin-top:6px;padding-left:12px;border-left:3px solid var(--lime);color:var(--ink)}
.reasons__sum{margin-top:28px;font:700 clamp(20px,2.2vw,28px)/1.3 Unbounded;letter-spacing:-.02em;max-width:900px}

/* ---------- лестница: ссылки ---------- */
a.ladder__s{color:inherit;text-decoration:none;transition:border-color .3s,transform .4s var(--ease),box-shadow .3s}
a.ladder__s:hover{border-color:var(--lime)}
a.ladder__s:hover i{color:var(--lime);border-color:var(--lime)}

/* ---------- два перехода внизу страницы ---------- */
.next2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.next2>*{min-width:0}
.next2__c{display:flex;flex-direction:column;gap:14px;padding:30px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);color:inherit;text-decoration:none;transition:transform .4s var(--ease),border-color .3s}
.next2__c:hover{transform:translateY(-6px);border-color:var(--lime)}
.next2__c small{font:600 12px Onest;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.next2__c b{font:700 clamp(20px,2vw,26px)/1.15 Unbounded;letter-spacing:-.02em}
.next2__c ul{list-style:none;display:grid;gap:8px;color:var(--muted);font-size:15px}
.next2__c li{position:relative;padding-left:20px}
.next2__c li:before{content:"—";position:absolute;left:0;color:var(--lime)}
.next2__go{margin-top:auto;padding-top:10px;font:700 15px Onest;color:var(--lime)}

/* ---------- витрина: «Хочу такой же» и «Все примеры» в одном ряду ---------- */
@media(max-width:700px){
  .sc-info__cta{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .sc-info__cta .btn{justify-content:center;padding:14px 10px;font-size:14px;gap:8px}
}

/* ---------- страница приложений ---------- */
.apps--page{margin-top:56px}
.appsit{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:48px}
.appsit>*{min-width:0}
.appsit div{padding:24px;border-radius:22px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.appsit b{font:700 17px/1.25 Unbounded;letter-spacing:-.01em}
.appsit span{font-size:14px;color:var(--muted)}
.appsit .ic{width:26px;height:26px;color:var(--lime);margin-bottom:6px}

/* ---------- адаптив ---------- */
@media(max-width:1080px){
  .hub{grid-template-columns:1fr;max-width:640px}
  .appsit{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .reasons,.next2{grid-template-columns:1fr}
  .reason{grid-template-columns:1fr;padding:24px}
  .reason__n{grid-row:auto}
  .hub__card{padding:28px 22px 24px}
}
@media(max-width:520px){.appsit{grid-template-columns:1fr}}

/* светлая тема: списки внутри карточек */
[data-theme="light"] .hub__card ul{color:#48455a}
[data-theme="light"] :is(.reason,.next2__c,.appsit div){box-shadow:0 1px 2px rgba(20,18,30,.04),0 14px 34px -22px rgba(20,18,30,.22)}

/* =========================================================
   Страницы раздела «Автоматизация» и «Приложения»
   ========================================================= */
/* строка навигации по разделу внизу страницы */
.subnav-s{padding:0 0 clamp(40px,6vw,80px)}
.subnav{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:18px 20px;border-radius:20px;background:var(--card);border:1px solid var(--line)}
.subnav b{margin-right:6px;font:700 13px Onest;color:var(--muted)}
.subnav a,.subnav span{padding:9px 15px;border-radius:999px;font:600 14px Onest;border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:.2s}
.subnav a:hover{border-color:var(--lime);color:var(--lime)}
.subnav span.on{background:var(--lime);border-color:var(--lime);color:#07060b}
[data-theme="light"] .subnav span.on{color:#fff}

/* поиск в каталоге */
.fsearch{display:flex;align-items:center;gap:10px;max-width:560px;padding:0 18px;height:52px;border-radius:999px;background:var(--card);border:1.5px solid var(--line);transition:border-color .2s}
.fsearch:focus-within{border-color:var(--lime)}
.fsearch .ic{flex:none;width:20px;height:20px;color:var(--muted)}
.fsearch input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--ink);font:500 16px Onest;outline:none}
.fgroup>b{min-width:92px}

/* живая переписка бота на странице ботов */
.botdemo{height:470px;display:grid;place-items:center;padding:24px;border-radius:var(--r);background:radial-gradient(60% 60% at 50% 45%,color-mix(in srgb,var(--violet) 20%,transparent),transparent 70%),var(--bg2);border:1px solid var(--line)}
.botdemo .wk__chat{width:100%;max-width:340px}

/* пример экрана учёта клиентов */
.crmx{padding:18px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);box-shadow:0 30px 60px -35px rgba(20,18,30,.45);display:flex;flex-direction:column;gap:8px}
.crmx__top{display:flex;justify-content:space-between;align-items:baseline;padding:2px 4px 8px;border-bottom:1px solid var(--line)}
.crmx__top b{font:700 16px Unbounded;letter-spacing:-.02em}
.crmx__top span{font-size:13px;color:var(--muted)}
.crmx__row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--bg2);opacity:0;transform:translateY(8px);animation:crmIn .6s var(--ease) forwards}
.crmx__row:nth-of-type(3){animation-delay:.15s}.crmx__row:nth-of-type(4){animation-delay:.3s}.crmx__row:nth-of-type(5){animation-delay:.45s}
@keyframes crmIn{to{opacity:1;transform:none}}
.crmx__row>i{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--violet) 18%,transparent);color:var(--violet);font:700 12px Onest;font-style:normal}
.crmx__row>span{flex:1;min-width:0;display:flex;flex-direction:column;font-size:13px;color:var(--muted);line-height:1.35}
.crmx__row>span b{font-size:14.5px;color:var(--ink)}
.crmx .st{flex:none;padding:5px 10px;border-radius:999px;font:700 11.5px Onest;font-style:normal;white-space:nowrap}
.st--ok{background:rgba(52,199,89,.16);color:#1f9d45}
.st--call{background:rgba(255,159,10,.16);color:#c77700}
.st--back{background:color-mix(in srgb,var(--violet) 16%,transparent);color:var(--violet)}
.st--new{background:var(--pink);color:#fff}
.crmx__row--new{box-shadow:inset 0 0 0 1.5px var(--pink);animation:crmIn .6s var(--ease) .45s forwards,crmPulse 2.4s ease-in-out 1.2s infinite}
@keyframes crmPulse{50%{box-shadow:inset 0 0 0 1.5px var(--pink),0 0 0 6px color-mix(in srgb,var(--pink) 15%,transparent)}}
.crmx__sum{display:flex;justify-content:space-between;gap:10px;padding:10px 4px 2px;font-size:13px;color:var(--muted)}
.crmx__sum b{margin-left:6px;font:700 15px Unbounded;color:var(--ink)}
@media(max-width:520px){.crmx__row{flex-wrap:wrap}.crmx__row>span{flex-basis:calc(100% - 48px)}.crmx .st{margin-left:48px}}

/* большая анимация приложения на странице приложений */
.appdemo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center;margin-top:48px}
.appdemo__stage{padding:24px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.appdemo .hs{height:450px}
.appdemo .hs-ph{transform:scale(1.4)}
.appdemo__steps{list-style:none;counter-reset:a;display:grid;gap:14px}
.appdemo__steps li{counter-increment:a;position:relative;padding:20px 22px 20px 70px;border-radius:20px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.appdemo__steps li:before{content:counter(a);position:absolute;left:20px;top:20px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--pink);color:#fff;font:700 14px Unbounded}
.appdemo__steps b{font:700 17px/1.25 Unbounded;letter-spacing:-.02em}
.appdemo__steps span{font-size:15px;color:var(--muted)}
@media(max-width:900px){.appdemo{grid-template-columns:1fr}}
@media(max-width:420px){.appdemo .hs{height:400px}.appdemo .hs-ph{transform:scale(1.2)}}

/* список наших приложений */
.exl{list-style:none;display:grid;gap:14px;margin-bottom:24px}
.exl li{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.exl b{font:700 17px/1.25 Unbounded;letter-spacing:-.02em}
.exl span{font-size:15px;color:var(--muted)}