/* aiditorium.kz — токены как в приложении (in-aiditorium, src/app.css): светлая и тёмная темы по устройству,
   устройства в демо всегда тёмные (пульт и эфир в приложении тоже тёмные). */
:root{color-scheme:light;--bg:#f4f4f5;--surface:#fff;--fill:rgb(0 0 0/.05);--fill-2:rgb(0 0 0/.09);--sep:rgb(0 0 0/.09);--label:#1c1c1c;--label-2:#636366;--label-3:#a3a3a3;--accent:#5b54f0;--primary:#1d1d1f;--on-primary:#fff;--shadow:0 0 0 1px rgb(0 0 0/.06),0 1px 2px rgb(0 0 0/.04);
  --g1:#4f46e5;--g2:#9333ea;--g3:#0e7490;--g4:#db2777}
/* тёмная тема страницы пока отключена (2026-10-19): всегда светлая; устройства в демо — тёмные своими токенами */
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:64px}
body{background:var(--bg);color:var(--label);font:16px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue","Noto Sans",Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
svg{display:block;flex:none}
.w{width:min(1180px,100% - 32px);margin:0 auto}
@media(min-width:720px){.w{width:min(1180px,100% - 48px)}}

/* шапка */
.top{position:sticky;top:0;z-index:20;background:var(--bg);background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px)}
.top .w{display:flex;align-items:center;gap:10px;height:56px}
.logo{font-size:18px;font-weight:700;letter-spacing:-.02em;margin-right:auto}.logo span{color:var(--accent)}
.langs{display:flex;gap:2px;padding:3px;border-radius:9px;background:var(--fill)}
.langs a{font-size:12px;font-weight:600;letter-spacing:.03em;padding:5px 9px;border-radius:6px;color:var(--label-2)}
.langs a[aria-current]{background:var(--surface);color:var(--label);box-shadow:var(--shadow)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;border-radius:12px;font-weight:600;font-size:15px;white-space:nowrap;transition:opacity .15s,background .15s}
.btn.primary{background:var(--primary);color:var(--on-primary)}.btn.primary:hover{opacity:.86}
.btn.gray{background:var(--fill);color:var(--label)}.btn.gray:hover{background:var(--fill-2)}
.btn.ghost{height:34px;padding:0 12px;border-radius:9px}.btn.ghost:hover{background:var(--fill)}

/* первый экран */
.hero{text-align:center;padding:clamp(36px,6vw,72px) 0 clamp(28px,4vw,44px)}
.hero h1{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.6vw,18px);font-weight:inherit}
.brand{display:block;font-size:clamp(58px,11vw,150px);font-weight:700;letter-spacing:-.018em;line-height:1;padding:0 .06em .08em;
  background:linear-gradient(90deg,var(--g1),var(--g2),var(--g3),var(--g4),var(--g1));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 9s linear infinite}
.brand.off{animation-play-state:paused}
@keyframes shine{to{background-position:300% 0}}
.tagline{display:block;font-size:clamp(19px,2.6vw,30px);font-weight:600;letter-spacing:-.015em;color:var(--label);text-wrap:balance}



/* демо */
.demo{padding-bottom:clamp(64px,9vw,120px);overflow-x:clip;overflow-y:visible;padding-top:12px;margin-top:-12px}
.stage{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) 120px 308px;align-items:center}
.stage::before{content:"";position:absolute;inset:-4% -2%;-webkit-mask-image:radial-gradient(closest-side,#000 60%,transparent);mask-image:radial-gradient(closest-side,#000 60%,transparent);z-index:-1;pointer-events:none;background:radial-gradient(45% 55% at 32% 50%,rgb(91 84 240/.16),transparent 70%),radial-gradient(30% 50% at 88% 50%,rgb(168 85 247/.14),transparent 70%)}
.dev{position:relative;min-width:0}
.flash{animation:flash .9s ease-out}
.stage.paused *,.stage.paused *::before,.stage.paused *::after{animation-play-state:paused!important}
@keyframes flash{0%{outline:0 solid rgb(139 133 255/0);outline-offset:0}20%{outline:4px solid rgb(139 133 255/.55);outline-offset:2px}100%{outline:4px solid rgb(139 133 255/0);outline-offset:14px}}

.dk,.con,.ph,.rec{--bg:#161618;--surface:#1f1f22;--fill:rgb(255 255 255/.07);--fill-2:rgb(255 255 255/.12);--sep:rgb(255 255 255/.08);--label:#ececec;--label-2:#a3a3a3;--label-3:#858589;--accent:#8b85ff;--accent-soft:rgb(139 133 255/.18);--accent-strong:#655df0;--primary:#ececec;--on-primary:#000;--success:#30d158;--danger:#ff453a;--warning:#ff9f0a;color:var(--label);color-scheme:dark}

/* общее для устройств */
.cb{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 13px;border-radius:9px;background:var(--fill);font-weight:600;font-size:13.5px;white-space:nowrap;transition:background .15s,opacity .15s}
.cb:hover{background:var(--fill-2)}.cb[disabled]{opacity:.35;cursor:default}.cb[disabled]:hover{background:var(--fill)}
.cb.pri{background:var(--primary);color:var(--on-primary)}.cb.pri:hover{background:var(--primary);opacity:.88}
.cb.ic{width:36px;padding:0}.cb.sm{height:30px;padding:0 10px;font-size:12.5px;border-radius:8px}.cb.ic.sm{width:30px;padding:0}
.cb[aria-pressed=true]{background:var(--accent-soft);color:var(--accent)}
.cb.acc{background:var(--accent-strong);color:#fff}
.tag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:12px;font-size:12px;font-weight:600;background:var(--fill);white-space:nowrap}
.tag i{position:relative;width:7px;height:7px;border-radius:50%;background:var(--label-3)}
.tag.on{background:rgb(255 69 58/.16);color:#ff6b61}.tag.on i{background:#ff453a}
.tag.on i::after{content:"";position:absolute;inset:-4px;border-radius:50%;background:rgb(255 69 58/.3);animation:rec 1.6s ease-in-out infinite}
@keyframes rec{0%,100%{transform:scale(.4);opacity:0}50%{transform:scale(1);opacity:1}}
.tag.warn{background:rgb(255 159 10/.16);color:var(--warning)}
.meta{display:inline-flex;align-items:center;gap:6px;color:var(--label-2);font-size:12.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.sp{flex:1}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* слайд */
.sl{container-type:inline-size;aspect-ratio:16/9;width:100%;border-radius:12px;background:#0b0b0d;color:#fff;overflow:hidden;position:relative;box-shadow:0 0 0 1px rgb(255 255 255/.07)}
.sl .in{position:absolute;inset:0;padding:6cqw 7cqw;display:flex;flex-direction:column;justify-content:center;font-size:3.3cqw;line-height:1.35}
.sl .in.poll{justify-content:flex-start;padding:4.4cqw 6cqw 3cqw}
.sl .acc{width:8cqw;height:.9cqw;border-radius:1cqw;background:var(--accent);margin-bottom:4cqw}
.sl .h{font-size:7.4cqw;line-height:1.08;letter-spacing:-.02em;font-weight:700;text-wrap:balance}
.sl .sub{margin-top:2.6cqw;font-size:3.8cqw;color:#a3a3a3}
.sl .h2{font-size:5.6cqw;line-height:1.12;letter-spacing:-.015em;font-weight:700;margin-bottom:3.6cqw}
.sl ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:2.4cqw;font-size:4cqw;color:#e8e8e8}
.sl li{display:flex;gap:2.6cqw;align-items:center}.sl li::before{content:"";width:1.5cqw;height:1.5cqw;border-radius:50%;background:var(--accent);flex:none}
.sl .bd{display:inline-flex;align-items:center;gap:1.4cqw;font-size:2.8cqw;font-weight:600;color:#a3a3a3;margin-bottom:1.8cqw}.sl .bd svg{width:3.4cqw;height:3.4cqw}
.sl .q{font-size:4.4cqw;line-height:1.18;font-weight:700;letter-spacing:-.01em;margin-bottom:2.6cqw;text-wrap:balance}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:1.6cqw}
.opt{position:relative;display:flex;align-items:center;gap:2cqw;min-height:11.5cqw;padding:1.6cqw 2.4cqw;border-radius:2cqw;background:rgb(255 255 255/.08);font-size:3.3cqw;line-height:1.2;text-align:left;overflow:hidden;color:#fff;transition:background .15s,transform .1s}
.opt .fb{position:absolute;inset:0 auto 0 0;background:rgb(255 255 255/.1);transition:width .45s cubic-bezier(.2,.8,.2,1)}
.opt .ltr{position:relative;width:5cqw;height:5cqw;border-radius:50%;background:rgb(255 255 255/.14);display:grid;place-items:center;font-size:2.7cqw;font-weight:700;flex:none}
.opt .tx{position:relative;flex:1}.opt .pc{position:relative;font-weight:700;font-variant-numeric:tabular-nums}.opt .pc.n{color:#a3a3a3;font-weight:600}
.opt.me{background:var(--accent-strong)}.opt.me .ltr{background:rgb(255 255 255/.28)}.opt.me .fb{background:rgb(255 255 255/.18)}
.opt.right{box-shadow:inset 0 0 0 .5cqw #30d158}.opt.right .ltr{background:#30d158;color:#000}
.sl.tap .opt:hover{background:rgb(255 255 255/.15)}.sl.tap .opt.me:hover{background:var(--accent-strong)}.sl.tap .opt:active{transform:scale(.98)}

/* пульт */
.con{display:grid;grid-template-columns:minmax(0,1fr) 216px;grid-template-rows:auto auto auto;background:var(--bg);border-radius:20px;overflow:hidden;box-shadow:0 0 0 1px rgb(0 0 0/.1),0 0 0 1px rgb(255 255 255/.06) inset,0 30px 70px -36px rgb(0 0 0/.55);font-size:13.5px}
.c-bar .cb{flex:none}.c-bar{grid-area:1/1/2/3;display:flex;align-items:center;gap:10px;height:50px;padding:0 12px 0 14px;border-bottom:1px solid var(--sep)}
.c-main{grid-area:2/1/3/2;padding:14px 14px 4px;min-width:0}
.c-note{display:flex;gap:6px;align-items:baseline;min-height:38px;padding:10px 2px 6px;color:var(--label-2);font-size:13px;line-height:1.35}
.c-note span{color:var(--label-3)}.c-note b{color:var(--label);font-weight:600;font-variant-numeric:tabular-nums}
.c-ctl{grid-area:3/1/4/2;display:flex;align-items:center;gap:8px;padding:10px 14px 12px}
.c-side{grid-area:2/2/4/3;border-left:1px solid var(--sep);display:flex;flex-direction:column;padding:12px;gap:8px;min-height:0}
.c-side .lbl{font-size:12px;font-weight:600;color:var(--label-2);display:flex;align-items:center;gap:6px}
.c-side .lbl em{font-style:normal;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--danger);color:#fff;font-size:11px;display:inline-grid;place-items:center}
.rqs{display:flex;flex-direction:column;gap:6px;flex:1}
.rq{display:flex;align-items:center;gap:8px;padding:8px;border-radius:11px;background:var(--surface)}.rq.new{animation:pop .3s cubic-bezier(.32,.72,0,1)}
@keyframes pop{from{transform:scale(.94);opacity:0}}
.rq .k{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none}
.rq.hand .k{background:rgb(255 159 10/.16);color:var(--warning)}.rq.help .k{background:rgb(255 69 58/.16);color:var(--danger)}
.rq.mine{box-shadow:inset 0 0 0 1px var(--accent)}
.rq div{min-width:0;flex:1}.rq b{display:block;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rq div span{display:block;font-size:11px;color:var(--label-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rq .cb{flex:none;padding:0 8px;font-size:11.5px;height:28px}
.none{color:var(--label-3);font-size:12.5px;padding:18px 4px;text-align:center}
.code{display:flex;align-items:baseline;justify-content:space-between;padding:10px 12px;border-radius:11px;background:var(--surface)}
.code span{font-size:11.5px;color:var(--label-2)}.code b{font-size:22px;font-weight:700;letter-spacing:.14em;font-variant-numeric:tabular-nums}
.mic{display:inline-flex;align-items:center;gap:2px;height:24px;padding:0 8px;border-radius:12px;background:var(--fill);color:var(--success)}
.mic svg{margin-right:3px}.mic b{width:2.5px;height:10px;border-radius:2px;background:currentColor;animation:eq 1s ease-in-out infinite;transform-origin:50% 50%}
.mic b:nth-child(3){animation-delay:-.3s}.mic b:nth-child(4){animation-delay:-.6s}.mic b:nth-child(5){animation-delay:-.15s}
@keyframes eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

/* телефон */
/* iPhone: титановая рамка, чёрный безель, Dynamic Island, статус-бар, боковые кнопки, полоска «домой» */
.ph{position:relative;display:flex;flex-direction:column;width:100%;max-width:300px;aspect-ratio:9/19.4;margin:0 auto;padding:3.5px;border-radius:58px;
  background:linear-gradient(150deg,#77777d 0%,#2b2b2f 18%,#1a1a1d 45%,#3a3a3f 75%,#8a8a90 100%);
  box-shadow:0 0 0 1px rgb(0 0 0/.55),inset 0 0 0 1px rgb(255 255 255/.22),inset 0 0 2px 2px rgb(0 0 0/.35),0 50px 90px -40px rgb(0 0 0/.75),0 18px 30px -18px rgb(0 0 0/.5)}
.ph .hb{position:absolute;width:3px;border-radius:2px;background:linear-gradient(90deg,#2a2a2e,#6c6c72 60%,#3a3a3e)}
.ph .act{left:-2.5px;top:17%;height:5%}.ph .vu{left:-2.5px;top:25%;height:9%}.ph .vd{left:-2.5px;top:36%;height:9%}
.ph .pw{right:-2.5px;top:29%;height:14%}
.bz{flex:1;min-height:0;display:flex;flex-direction:column;padding:9px;border-radius:54.5px;background:#000;box-shadow:inset 0 0 0 1px rgb(255 255 255/.06)}
.scr{position:relative;background:var(--bg);border-radius:46px;flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;font-size:13.5px;isolation:isolate}
.scr .ov{border-radius:inherit}
.sbar{position:absolute;inset:0 0 auto;z-index:30;height:50px;display:flex;align-items:center;justify-content:space-between;padding:4px 24px 0 34px;color:var(--label);pointer-events:none}
.sbar .tm{font-size:15px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.sbar .st{display:flex;align-items:center;gap:5px}
.scr:has(.ov.sig) .sbar{color:#fff}
.isl{position:absolute;z-index:31;top:11px;left:50%;width:31%;height:30px;transform:translateX(-50%);border-radius:20px;background:#000;box-shadow:inset 0 0 0 1px rgb(255 255 255/.04)}
.isl::after{content:"";position:absolute;right:13px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2b3a5c,#0b0f1a 70%)}
.home{position:absolute;z-index:30;bottom:7px;left:50%;width:36%;height:5px;transform:translateX(-50%);border-radius:3px;background:rgb(255 255 255/.8);pointer-events:none}
.scr:has(.ov.sig) .home{background:rgb(255 255 255/.9)}
.p-hd{display:flex;align-items:center;gap:8px;padding:54px 18px 8px}
.p-hd b{font-size:14px;font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:4px 12px 12px;min-height:0}
.p-pos{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--label-2);font-size:12.5px;font-variant-numeric:tabular-nums;min-height:30px}
.p-pos .cb{background:transparent}.p-pos .cb:hover{background:var(--fill)}.p-pos .cb.acc{background:var(--accent-strong)}
.p-sent{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--success);font-size:12.5px;font-weight:600}
.cap{height:62px;padding:10px 12px;border-radius:12px;background:var(--surface);font-size:14px;line-height:1.4;display:flex;align-items:flex-start;gap:9px;overflow:hidden}
.cap svg{color:var(--label-3);margin-top:2px}
.cap span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.p-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:8px 8px 24px;border-top:1px solid var(--sep)}
.p-bar button{display:grid;place-items:center;height:48px;border-radius:14px;color:var(--label-2);transition:background .15s,color .15s,transform .1s}
.p-bar button:hover{background:var(--fill)}.p-bar button:active{transform:scale(.94)}
.p-bar button[aria-pressed=true]{background:var(--fill);color:var(--label)}
.p-bar .hand[aria-pressed=true]{color:var(--warning)}.p-bar .help[aria-pressed=true]{color:var(--danger)}.p-bar .slow[aria-pressed=true]{color:var(--accent)}
.p-bar .ai{color:var(--accent)}.p-bar .ai:hover{background:var(--accent-soft)}
.p-bar button[disabled]{opacity:.3;cursor:default}.p-bar button[disabled]:hover{background:none}
.ov{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:56px 28px 36px;text-align:center;animation:fade .2s ease-out;background:var(--bg)}
@keyframes fade{from{opacity:0}}
.ovt{font-size:21px;line-height:1.2;letter-spacing:-.02em;font-weight:700;text-wrap:balance}
.ov p:not(.ovt):not(.big){color:var(--label-2)}
.ov.focus svg{color:var(--accent)}
.ov.sig{color:#fff}.ov.sig.hand{background:#e8900a}.ov.sig.help{background:#e02d3c}.ov.sig.taken{background:#1f8a3b}
.ov .big{font-size:88px;line-height:1;font-weight:800;letter-spacing:-.04em}
.ov.sig .cb{margin-top:8px;background:rgb(255 255 255/.22);color:#fff;height:40px;padding:0 16px}.ov.sig .cb:hover{background:rgb(255 255 255/.32)}
.toast{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);z-index:4;padding:8px 14px;border-radius:10px;background:var(--surface);box-shadow:0 10px 30px -10px rgb(0 0 0/.7),0 0 0 1px var(--sep);font-size:12.5px;font-weight:600;white-space:nowrap;animation:fade .2s}
.sheet{position:absolute;inset:auto 0 0;z-index:6;max-height:84%;display:flex;flex-direction:column;background:var(--surface);border-radius:24px 24px 46px 46px;box-shadow:0 -12px 40px -10px rgb(0 0 0/.7);animation:up .3s cubic-bezier(.32,.72,0,1)}
@keyframes up{from{transform:translateY(40px);opacity:0}}
.sh{display:flex;align-items:center;gap:10px;padding:16px 12px 10px 18px}.sh b{font-size:16px;font-weight:700;flex:1}
.sc{overflow:auto;padding:2px 14px 12px;display:flex;flex-direction:column;gap:8px;min-height:0;overscroll-behavior:contain}
.mode{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:var(--fill);text-align:left;transition:background .15s}
.mode:hover{background:var(--fill-2)}.mode b{display:block;font-size:14px;font-weight:600}.mode small{font-size:12px;color:var(--label-2)}
.mode .k{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);flex:none}
.msg{max-width:90%;padding:9px 12px;border-radius:14px;font-size:13.5px;line-height:1.42}
.msg.you{align-self:flex-end;background:var(--accent-strong);color:#fff;border-bottom-right-radius:5px}
.msg.ai{align-self:flex-start;background:var(--fill);border-bottom-left-radius:5px}
.caret{display:inline-block;width:2px;height:1em;background:var(--accent);vertical-align:-2px;margin-left:1px;animation:fade .6s steps(1) infinite alternate}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{height:30px;padding:0 12px;border-radius:15px;box-shadow:0 0 0 1px var(--sep);font-size:12.5px;font-weight:600}.chips button:hover{background:var(--fill)}
.ask{display:flex;align-items:center;gap:8px;margin:0 14px 26px;padding:0 6px 0 12px;height:40px;border-radius:12px;background:var(--fill);color:var(--label-3);font-size:13px}
.ask span{flex:1}.ask i{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--accent);color:#fff;opacity:.5}

/* узкие экраны: пульт сверху, телефон под ним, связь — вертикальная */
@media(max-width:480px){.hero{padding:22px 0 22px}.hero h1{gap:8px}}

/* тарифы */
.sec{padding-bottom:clamp(64px,9vw,112px)}
.sec h2{font-size:clamp(28px,3.6vw,40px);letter-spacing:-.025em;font-weight:700;margin-bottom:22px}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{display:flex;flex-direction:column;padding:22px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow)}
.card h3{font-size:20px;font-weight:700;letter-spacing:-.01em}
.card .for{color:var(--label-2);font-size:14px;margin-top:2px}
.card .price{font-size:16px;font-weight:600;margin-top:14px}
.card ul{list-style:none;padding:0;margin:14px 0 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.card li{display:flex;gap:9px;font-size:14px;line-height:1.4}
.card li svg{width:16px;height:16px;color:var(--accent);margin-top:2px}
.card .btn{width:100%}
.more{margin-top:16px;font-size:15px}.more a{color:var(--accent);font-weight:600}

/* вопросы */
.faq{max-width:780px}
.faq details{border-bottom:1px solid var(--sep)}
.faq summary{list-style:none;display:flex;align-items:center;gap:16px;padding:18px 0;font-size:17px;font-weight:600;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font:inherit;letter-spacing:inherit;margin:0}
.faq summary::after{content:"";width:9px;height:9px;margin:0 4px 0 auto;border-right:2px solid var(--label-2);border-bottom:2px solid var(--label-2);transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s;flex:none}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{padding:0 0 18px;color:var(--label-2);font-size:15.5px;max-width:680px}

footer{border-top:1px solid var(--sep);padding:24px 0 40px;font-size:13px;color:var(--label-2)}
footer .w{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
footer a:hover{color:var(--label)}footer .c{margin-right:auto}
/* «Уменьшить движение»: без крупных движений — перелива логотипа, наезда и масштаба сцен, выезда устройств, бегущего луча,
   прыжков кнопок; смена содержимого, плавные появления и полоски прогресса остаются */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .brand,.link .bm,.link .pa,.link .pb,.tapfx,.mcur.clk svg,.mcur.clk::after,.s-run,.tag.on i::after,.mic b,.seat.hand::after,.seat.help::after{animation:none!important}
  .scene,.stage.pre .dev,.stage.pre .link,.md,.sheet,.rq.new,.seat.pop{transform:none!important;animation:none!important}
  .btn:hover,.btn:active,.cb:active{transform:none!important}
}

/* пальцем — крупнее зоны нажатия */
@media(pointer:coarse){
  .langs a,.btn.ghost{min-height:40px;display:inline-flex;align-items:center}
  .cb,.cb.ic{min-height:44px}.cb.ic{min-width:44px}.langs a,.btn.ghost{min-height:44px}
  .cb.sm,.cb.ic.sm{min-height:40px;min-width:40px}.rq .cb{height:36px}.chips button{height:38px}
}

/* слайды: визуал */
.sl .in>*{position:relative}
.t-title .art{position:absolute;inset:0;background:radial-gradient(55% 85% at 88% 18%,rgb(139 133 255/.5),transparent 62%),radial-gradient(45% 70% at 100% 100%,rgb(94 234 212/.28),transparent 62%),radial-gradient(40% 60% at 60% 110%,rgb(255 143 200/.18),transparent 60%)}
.t-net{display:grid!important;grid-template-columns:1.25fr .75fr;align-items:center;gap:3cqw}
.t-net .h2{font-size:5cqw;margin-bottom:3cqw}
.sl ol{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1.9cqw;font-size:3.35cqw;line-height:1.25;color:#e8e8e8;counter-reset:n}
.sl ol li{display:flex;align-items:center;gap:2.4cqw}
.sl ol li::before{counter-increment:n;content:counter(n);width:4.6cqw;height:4.6cqw;border-radius:50%;background:rgb(139 133 255/.22);color:#cfccff;font-size:2.5cqw;font-weight:700;display:grid;place-items:center;flex:none}
.net{width:100%;height:auto}
.net line{stroke:rgb(255 255 255/.14);stroke-width:.7}
.net circle{fill:#1d1d24;stroke:#8b85ff;stroke-width:1.5}
.net .n1{fill:#8b85ff}
.net .n0{animation:glow 2.2s ease-in-out infinite}.net .n2{animation:glow 2.2s ease-in-out infinite -1.1s}
@keyframes glow{0%,100%{opacity:.35}50%{opacity:1}}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:1.8cqw}
.tiles div{display:flex;align-items:center;gap:2.4cqw;padding:3cqw;border-radius:2.2cqw;background:rgb(255 255 255/.06);font-size:3.3cqw;line-height:1.2}
.tiles svg{width:5cqw;height:5cqw;color:#a29dff;flex:none}

/* лента слайдов в пульте */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.th{position:relative;border-radius:8px;overflow:hidden;opacity:.6;transition:opacity .15s,box-shadow .15s}
.th:hover{opacity:.9}.th.cur{opacity:1;box-shadow:0 0 0 2px var(--accent)}
.th .sl{border-radius:8px;pointer-events:none}.th .net circle{animation:none}
.th i{position:absolute;left:5px;bottom:4px;font-style:normal;font-size:10px;font-weight:700;color:rgb(255 255 255/.7)}

/* зал */
.seats{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.seat{position:relative;aspect-ratio:1;border-radius:6px;display:grid;place-items:center;font-size:9.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--label-2);background:var(--fill-2);transition:background .3s,color .3s,transform .15s}
.seat:hover{transform:scale(1.08)}
.seat.off{background:transparent;color:var(--label-3);box-shadow:inset 0 0 0 1px var(--sep);opacity:.6}
.seat.ans{background:rgb(139 133 255/.42);color:#fff}
.seat.ok{background:#25a84a;color:#fff}.seat.no{background:rgb(255 69 58/.32);color:#ffd5d2}
.seat.hand{background:#e8900a;color:#fff}.seat.help{background:#e02d3c;color:#fff}
.seat.hand::after,.seat.help::after{content:"";position:absolute;inset:-3px;border-radius:8px;border:2px solid currentColor;opacity:0;animation:ring 1.4s ease-out infinite}
.seat.hand::after{color:#e8900a}.seat.help::after{color:#e02d3c}
@keyframes ring{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.25);opacity:0}}
.seat.me{box-shadow:inset 0 0 0 1.5px #fff}
.seat.sl-w::before{content:"";position:absolute;top:2px;right:2px;width:5px;height:5px;border-radius:50%;background:var(--warning)}
.seat.pop{animation:spop .45s cubic-bezier(.32,.72,0,1)}
@keyframes spop{0%{transform:scale(1.35)}100%{transform:none}}

/* телефон: спикер и прогресс */
.p-hd{padding-bottom:2px}
.p-sp{display:flex;align-items:center;gap:10px;padding:4px 18px 10px}
.p-sp .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff;background:linear-gradient(135deg,#5b54f0,#a855f7);flex:none}
.p-sp .nm{display:flex;flex-direction:column;line-height:1.2;min-width:0}.p-sp b{font-size:13px;font-weight:600}.p-sp small{font-size:11px;color:var(--label-2)}
.p-sp .mic{margin-left:auto}
.p-prog{display:flex;gap:4px;padding:0 18px 4px}
.p-prog i{flex:1;height:3px;border-radius:2px;background:var(--fill-2);transition:background .3s}
.p-prog i.done{background:rgb(139 133 255/.5)}.p-prog i.cur{background:var(--accent)}.p-prog i.view{box-shadow:0 0 0 1.5px #fff}
.p-sent.no{color:#ff8a80}
@media(max-width:360px){.top .w{gap:6px}.logo{font-size:16px}.langs a{padding:5px 6px}.btn.ghost{padding:0 8px}}

/* доступность и отклик (ui-ux-pro-max: focus-states, skip-links, touch, press-feedback) */
:root{interpolate-size:allow-keywords}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.btn:focus-visible,.cb:focus-visible{border-radius:12px}
main:focus{outline:0}
.skip{position:fixed;left:12px;top:-60px;z-index:50;padding:10px 16px;border-radius:10px;background:var(--primary);color:var(--on-primary);font-weight:600;font-size:14px;transition:top .15s}
.skip:focus{top:10px}
a,button,summary{touch-action:manipulation}
p,li{text-wrap:pretty}

/* кнопка регистрации в шапке */
.btn.primary.sm{height:34px;padding:0 14px;border-radius:9px;font-size:14px}
@media(max-width:640px){.top .btn.primary.sm{display:none}}

/* рекомендуемый тариф */
.card.pick{box-shadow:0 0 0 2px var(--accent),0 18px 40px -24px rgb(91 84 240/.55)}
.card li{font-size:15px}

/* FAQ: плавное раскрытие там, где браузер умеет */
.faq details::details-content{block-size:0;overflow:clip;transition:block-size .25s cubic-bezier(.2,.8,.2,1),content-visibility .25s allow-discrete}
.faq details[open]::details-content{block-size:auto}
.faq summary:hover h3{color:var(--accent)}

/* мобильные: основной текст не мельче 16px */
@media(max-width:480px){.faq details p{font-size:16px}.faq summary{font-size:16.5px}}

/* ───── демо: сцена шире остального контента ───── */
.w.demo{width:min(1320px,100% - 32px)}
@media(min-width:720px){.w.demo{width:min(1320px,100% - 48px)}}
.stage::before{inset:-8% -4%;background:radial-gradient(42% 52% at 34% 48%,rgb(91 84 240/.18),transparent 70%),radial-gradient(26% 46% at 90% 50%,rgb(168 85 247/.16),transparent 70%)}

/* ───── MacBook 16:10: пульт в окне браузера, свёрстан в 1100×712 и уменьшен под экран (--k из demo.js) ───── */
.mac{position:relative;padding-bottom:22px}
.lid{--k:.78;position:relative;margin:0 22px;padding:2px;border-radius:20px 20px 9px 9px;
  background:linear-gradient(180deg,#5a5a60 0%,#2a2a2e 7%,#1c1c1f 60%,#2c2c30 100%);
  box-shadow:0 0 0 1px rgb(0 0 0/.55),inset 0 1px 0 rgb(255 255 255/.22),0 34px 60px -34px rgb(0 0 0/.6)}
.bzl{position:relative;padding:calc(17px * var(--k)) calc(17px * var(--k)) calc(20px * var(--k));border-radius:18px 18px 7px 7px;background:#050506;box-shadow:inset 0 0 0 1px rgb(255 255 255/.05)}
.cam{position:absolute;z-index:3;top:calc(17px * var(--k));left:50%;width:15%;height:calc(24px * var(--k));transform:translateX(-50%);border-radius:0 0 7px 7px;background:#050506}
.cam::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#3b4c78,#0a0e18 70%);box-shadow:0 0 0 1.5px #0d0d10}
.scrn{position:relative;aspect-ratio:1100/712;border-radius:8px 8px 3px 3px;overflow:hidden;background:#161618;isolation:isolate}
.scrn::after{content:"";position:absolute;inset:0;z-index:20;pointer-events:none;background:linear-gradient(118deg,rgb(255 255 255/.045),rgb(255 255 255/.012) 32%,transparent 52%)}
.vp{position:absolute;left:0;top:0;width:1100px;height:712px;display:flex;flex-direction:column;transform:scale(var(--k));transform-origin:0 0}
.scrn:not(.fit) .vp{visibility:hidden}
.vp>[data-dev=speaker]{flex:1;min-height:0;display:flex}
.vp .con{flex:1;min-height:0;border-radius:0;box-shadow:none}
.vp .con{grid-template-columns:minmax(0,1fr) 260px;grid-template-rows:auto 1fr auto}
.vp .c-main{display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;column-gap:18px;row-gap:12px;padding:14px 24px 0}
.vp .c-main>.sl{grid-column:1/-1}
.vp .strip{grid-row:2;grid-column:1;grid-template-columns:repeat(4,124px);margin:0}
.vp .c-note{grid-row:2;grid-column:2;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;min-height:0;padding:0 0 0 18px;border-left:1px solid var(--sep);font-size:14px}
.vp .c-ctl{padding:10px 24px 12px}
.mbar{display:flex;align-items:center;gap:10px;height:24px;flex:none;padding:0 16px;background:#0c0c0e;color:#d8d8dc;font-size:12.5px;font-weight:500}
.mbar b{font-weight:700}
.tb{position:relative;display:flex;align-items:center;gap:14px;height:38px;flex:none;padding:0 14px;background:linear-gradient(#232326,#1d1d20);border-bottom:1px solid rgb(255 255 255/.07);color:#8e8e93}
.tl{display:flex;gap:8px}.tl i{width:12px;height:12px;border-radius:50%;background:#ff5f57;box-shadow:inset 0 0 0 .5px rgb(0 0 0/.25)}.tl i:nth-child(2){background:#febc2e}.tl i:nth-child(3){background:#28c840}
.tb .nav{display:flex;gap:8px;align-items:center}.tb .nav.r{margin-left:auto}
.url{position:absolute;left:50%;transform:translateX(-50%);width:min(40%,360px);display:flex;align-items:center;justify-content:center;gap:6px;height:26px;border-radius:7px;background:rgb(255 255 255/.07);color:#d1d1d6;font-size:13px;font-weight:500}
.url svg{color:#8e8e93}
.hinge{display:block;position:relative;height:5px;margin:0 calc(22px + 2%);background:linear-gradient(180deg,#000,#26262a 70%,#3a3a3f);border-radius:0 0 4px 4px}
.base{display:block;position:relative;height:12px;border-radius:3px 3px 16px 16px/3px 3px 11px 11px;
  background:linear-gradient(180deg,#77777e 0,#45454b 14%,#26262a 55%,#141416 100%);box-shadow:inset 0 1px 0 rgb(255 255 255/.35),inset 0 -1px 0 rgb(0 0 0/.6)}
.base::before{content:"";position:absolute;top:0;left:50%;width:14%;height:4px;transform:translateX(-50%);border-radius:0 0 7px 7px;background:linear-gradient(180deg,#18181b,#38383d)}
.mac::after{content:"";position:absolute;z-index:-1;left:6%;right:6%;bottom:2px;height:24px;border-radius:50%;background:radial-gradient(closest-side,rgb(0 0 0/.45),transparent);filter:blur(6px)}
.ph::after{content:"";position:absolute;z-index:-1;left:12%;right:12%;bottom:-22px;height:30px;border-radius:50%;background:radial-gradient(closest-side,rgb(0 0 0/.4),transparent);filter:blur(6px)}
.scr::after{content:"";position:absolute;inset:0;z-index:40;pointer-events:none;border-radius:inherit;background:linear-gradient(118deg,rgb(255 255 255/.05),rgb(255 255 255/.012) 34%,transparent 55%)}

/* отклик устройства на синхронизацию — мягкое свечение рамки */
.lid.flash,.ph.flash{animation:none}
.lid::after,.ph::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;
  box-shadow:0 0 0 1.5px rgb(139 133 255/.75),0 0 40px 2px rgb(139 133 255/.4)}
.lid.flash::after,.ph.flash::before{animation:glow2 1s cubic-bezier(.2,.8,.2,1)}
@keyframes glow2{30%{opacity:1}100%{opacity:0}}

/* ───── канал синхронизации: тонкая линия между разъёмами, по ней бежит луч с хвостом ───── */
.link{position:relative;align-self:center;height:2px;margin:0 -4px 0 -22px;clip-path:inset(-14px 0)}
.link::before{content:"";position:absolute;inset:0 4px;border-radius:1px;background:var(--fill-2)}
.link .bm{position:absolute;top:0;left:0;width:60%;height:2px;border-radius:1px;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgb(139 133 255/.35) 45%,var(--accent) 85%,#fff);transform:translateX(-100%)}
.link .bm::after{content:"";position:absolute;right:-7px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;
  background:radial-gradient(circle,#fff 0 18%,rgb(139 133 255/.85) 38%,rgb(139 133 255/0) 70%)}
.link .bm::before{content:"";position:absolute;inset:-5px 0 -5px 30%;border-radius:6px;background:linear-gradient(90deg,transparent,rgb(139 133 255/.35));filter:blur(5px)}
.link .idle{animation:beamIdle 5s cubic-bezier(.55,0,.45,1) infinite 1.8s}
@keyframes beamIdle{0%{transform:translateX(-100%);opacity:0}5%{opacity:.5}30%{opacity:.5}36%{transform:translateX(167%);opacity:0}100%{transform:translateX(167%);opacity:0}}
.link.to-p .ev{animation:beamR 1s cubic-bezier(.55,0,.35,1)}
.link.to-s .ev{animation:beamL 1s cubic-bezier(.55,0,.35,1)}
.link.to-p .idle,.link.to-s .idle{visibility:hidden}
@keyframes beamR{0%{transform:translateX(-100%);opacity:0}10%,82%{opacity:1}100%{transform:translateX(167%);opacity:0}}
@keyframes beamL{0%{transform:translateX(167%) scaleX(-1);opacity:0}10%,82%{opacity:1}100%{transform:translateX(-100%) scaleX(-1);opacity:0}}
.link .pa,.link .pb{position:absolute;z-index:1;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px var(--fill-2)}
.link .pa{left:0}.link .pb{right:0}
.link.to-p .pb,.link.to-s .pa{animation:port 1s ease-out}
@keyframes port{55%{background:var(--accent);box-shadow:inset 0 0 0 2px var(--accent),0 0 14px 3px rgb(139 133 255/.8)}}

/* ───── появление сцены ───── */
.stage.pre .dev,.stage.pre .link{opacity:0}
.stage.pre .dev-s{transform:translateY(36px) scale(.96)}
.stage.pre .dev-p{transform:translate(28px,36px) rotate(2deg)}
.stage.pre .link{transform:scaleX(.2)}
.stage.show .dev,.stage.show .link{transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
.stage.show .dev-p{transition-delay:.15s}.stage.show .link{transition-delay:.45s}

/* ───── кнопки устройств: объём и отклик ───── */
.cb{box-shadow:inset 0 1px 0 rgb(255 255 255/.06);transition:background .15s,opacity .15s,transform .12s}
.cb:active:not([disabled]){transform:scale(.95)}
.cb.pri,.cb.acc{box-shadow:inset 0 1px 0 rgb(255 255 255/.2),0 4px 14px -6px rgb(101 93 240/.7)}
.c-ctl .next{background:var(--accent-strong);color:#fff;box-shadow:inset 0 1px 0 rgb(255 255 255/.22),0 6px 18px -8px rgb(101 93 240/.9)}
.c-ctl .next:hover{background:#7069f5}.c-ctl .next[disabled]:hover{background:var(--accent-strong)}
.p-bar button{position:relative}
.p-bar button[aria-pressed=true]::after{content:"";position:absolute;bottom:5px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor}

/* ───── кнопки страницы ───── */
.btn{transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background .15s,opacity .15s}
.btn:active{transform:scale(.97)}
.btn.primary{box-shadow:inset 0 1px 0 rgb(255 255 255/.16),0 1px 2px rgb(0 0 0/.18),0 10px 24px -12px rgb(0 0 0/.5)}
.btn.primary:hover{opacity:1;transform:translateY(-1px);box-shadow:inset 0 1px 0 rgb(255 255 255/.16),0 0 0 1px rgb(91 84 240/.35),0 14px 32px -12px rgb(91 84 240/.7)}
.btn.primary:active{transform:scale(.97)}
.btn.gray{box-shadow:inset 0 0 0 1px var(--sep)}
.btn .ar{transition:transform .2s cubic-bezier(.2,.8,.2,1)}.btn:hover .ar{transform:translateX(3px)}

/* ───── до 1180px: та же сцена компактно — ноутбук почти на всю ширину, телефон стоит перед ним справа внизу
   (телефон свёрстан в обычном размере и уменьшен на --pk из demo.js), канал между ними не нужен ───── */
@media(max-width:1180px){
  .stage{display:block;position:relative;padding-bottom:2%}
  .dev-s{width:84%}
  .lid{margin:0 3%}.hinge{margin:0 5%}
  .link{display:none}
  .dev-p{position:absolute;right:0;bottom:0;width:300px;scale:var(--pk,.4);transform-origin:100% 100%}
  .stage.pre .dev-p{transform:translate(18px,24px)}
}
/* тени устройств не обрезаются по краю демо: горизонтальный обрез — по ширине страницы */
main{overflow-x:clip}
.demo{overflow-x:visible}


/* ───── автопоказ: курсор на ноутбуке; на телефоне кнопка сама вдавливается ───── */
.mcur{position:absolute;z-index:60;left:0;top:0;pointer-events:none}
.mcur{opacity:0;transition:opacity .3s;filter:drop-shadow(0 2px 3px rgb(0 0 0/.45))}
.mcur svg{display:block;margin:-2px 0 0 -3px;transform-origin:3px 2px}
.mcur.on{opacity:1}
.mcur.clk svg{animation:mclk .28s ease-out}
@keyframes mclk{40%{transform:scale(.82)}}
.mcur::after{content:"";position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;background:rgb(255 255 255/.5);opacity:0;transform:scale(.3)}
.mcur.clk::after{animation:mring .45s ease-out}
@keyframes mring{0%{opacity:.8;transform:scale(.3)}100%{opacity:0;transform:scale(1.2)}}
.tapfx{animation:tapfx .34s ease-out}
.hov{filter:brightness(1.25);box-shadow:0 0 0 2px rgb(139 133 255/.55)!important;transition:filter .15s,box-shadow .15s}
@keyframes tapfx{0%{transform:scale(1)}40%{transform:scale(.9);filter:brightness(1.35);box-shadow:0 0 0 0 rgb(139 133 255/.55)}100%{transform:scale(1);box-shadow:0 0 0 12px rgb(139 133 255/0)}}

/* ───── документы: /privacy, /offer, /terms ───── */
.legal{padding:clamp(24px,4vw,48px) 0 clamp(56px,8vw,96px)}
.docs{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:12px;background:var(--fill);width:max-content;max-width:100%;margin-bottom:clamp(28px,4vw,44px)}
.docs a{padding:8px 14px;border-radius:9px;font-size:14px;font-weight:600;color:var(--label-2);transition:background .15s,color .15s}
.docs a:hover{color:var(--label)}
.docs a[aria-current]{background:var(--surface);color:var(--label);box-shadow:var(--shadow)}
.doc{max-width:72ch;font-size:16px;line-height:1.65;color:var(--label)}
.doc h1{font-size:clamp(30px,4vw,44px);line-height:1.1;letter-spacing:-.025em;font-weight:700;margin-bottom:10px;text-wrap:balance}
.doc h1+p{color:var(--label-2);font-size:14px;margin-bottom:28px}
.doc h2{font-size:21px;line-height:1.3;letter-spacing:-.01em;font-weight:700;margin:40px 0 12px;scroll-margin-top:72px}
.doc h3{font-size:17px;font-weight:700;margin:24px 0 8px}
.doc p{margin:0 0 14px}
.doc ul{margin:0 0 14px;padding-left:22px}.doc li{margin:4px 0}.doc li::marker{color:var(--label-3)}
.doc strong{font-weight:650}
.doc a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.doc .tw{overflow-x:auto;margin:0 0 16px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--sep)}
.doc table{border-collapse:collapse;width:100%;font-size:14.5px;line-height:1.45}
.doc th,.doc td{padding:10px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--sep)}
.doc th{font-weight:650;background:var(--fill)}.doc tr:last-child td{border-bottom:0}
footer a[aria-current]{color:var(--label)}
@media(max-width:560px){.docs{width:100%}.docs a{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:8px 6px;font-size:13px;line-height:1.25}}
@media print{.top,.docs,footer,.skip{display:none}.doc{max-width:none;color:#000}.doc a{color:#000}}

/* ───── сюжет демо: главы «Лекция» → «Проектор» → «После занятия» ───── */
.chap{display:flex;justify-content:center;gap:clamp(14px,3vw,40px);margin:0 auto clamp(20px,3vw,34px)}
.chap button{display:flex;flex-direction:column;gap:9px;min-width:clamp(92px,13vw,168px);padding:6px 0;font-size:15px;font-weight:600;color:var(--label-2);transition:color .2s}
.chap button:hover,.chap button[aria-selected=true]{color:var(--label)}
.chap i{display:block;height:3px;border-radius:2px;background:var(--fill-2);overflow:hidden}
/* вкладки глав — явно нажимаемые: курсор-рука, большая зона нажатия, на наведении дорожка ярче и толще, нажатие — лёгкое
   «вдавливание», с клавиатуры — кольцо фокуса */
.chap button{position:relative;z-index:1;cursor:pointer;padding:10px 6px;border-radius:10px;-webkit-tap-highlight-color:transparent;transition:color .2s,transform .12s ease-out}
.chap i{transition:background .2s,transform .2s;transform-origin:50% 50%}
@media(hover:hover){.chap button:hover i{background:rgb(91 84 240/.25);transform:scaleY(1.5)}}
.chap button:active{transform:scale(.97)}
.chap button:focus-visible{outline:2px solid var(--accent);outline-offset:0;border-radius:10px}
.chap b{display:block;width:0;height:100%;border-radius:inherit;background:var(--accent)}
.chap .done b{width:100%;opacity:.4;transition:width .3s ease-out,opacity .3s}
/* полоска идёт по длине главы до 98% и ждёт там её конца; глава закончилась — .done дотягивает до 100% */
.chap .run b{animation:chfill var(--d,20000ms) linear forwards}
.story.hold .chap .run b{animation-play-state:paused}
@keyframes chfill{to{width:98%}}
.scenes{position:relative;transition:height .55s cubic-bezier(.2,.8,.2,1)}
.scene{position:absolute;top:0;left:0;right:0;min-width:0;opacity:0;visibility:hidden;transform:translateY(14px) scale(.985);
  transition:opacity .5s ease,transform .7s cubic-bezier(.2,.8,.2,1),visibility 0s linear .5s}
.scene.on{position:relative;opacity:1;visibility:visible;transform:none;transition-delay:0s}
@media(max-width:480px){.chap button{min-width:0;flex:1;font-size:13.5px}.chap{gap:10px}}

/* ───── глава «Проектор»: только экран — со свечением вокруг ───── */
.hall{position:relative;isolation:isolate;max-width:1100px;margin:0 auto;padding:clamp(8px,2vw,24px) 0}
.spill{position:absolute;z-index:-1;inset:-6% -4%;background:radial-gradient(50% 50% at 50% 50%,rgb(124 116 255/.22),transparent 72%);filter:blur(10px)}
.pj{position:relative;width:100%;aspect-ratio:16/9;padding:.45%;border-radius:12px;background:linear-gradient(#2a2a30,#121215);
  box-shadow:0 0 0 1px rgb(255 255 255/.1),0 40px 90px -30px rgb(0 0 0/.6),0 24px 80px -20px rgb(139 133 255/.4),0 0 160px 10px rgb(91 84 240/.14)}
.pj-in{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:8px;background:#050507;color:#fff;container-type:inline-size;font-family:inherit}
.pj-top{position:relative;flex:1;min-height:0}
.pj-cap{flex:none;display:flex;flex-direction:column;gap:.5cqw;padding:1.2cqw 5cqw 1.9cqw;border-top:1px solid rgb(255 255 255/.07);background:linear-gradient(rgb(255 255 255/.02),transparent)}
.pj-cap p{display:flex;align-items:baseline;gap:1.4cqw;margin:0;font-size:2cqw;line-height:1.3;color:#c9c9d1;white-space:nowrap;overflow:hidden}
.pj-cap p:first-child{color:#fff;font-weight:600}
.pj-cap .lc{flex:none;padding:.2cqw .65cqw;border-radius:.55cqw;background:rgb(139 133 255/.18);color:#b9b5ff;font-size:1.15cqw;font-weight:700;letter-spacing:.06em}
.pj-cap .tx{overflow:hidden;text-overflow:ellipsis}
.pj-cap .tx.in{animation:capin .45s ease-out}
@keyframes capin{from{opacity:0;transform:translateY(.4em)}}
.pj-code{position:absolute;top:2.6cqw;right:2.6cqw;display:flex;flex-direction:column;align-items:flex-end;gap:.2cqw;font-size:1.15cqw;color:#8e8e96;transition:opacity .4s}
.pj-code b{font-size:2.5cqw;letter-spacing:.12em;color:#fff;font-variant-numeric:tabular-nums}
.hall[data-mode=join] .pj-code{opacity:0}
.md{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.97);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.hall[data-mode=join] [data-m=join],.hall[data-mode=slide] [data-m=slide],.hall[data-mode=task] [data-m=task],.hall[data-mode=quiz] [data-m=quiz],.hall[data-mode=brk] [data-m=brk]{opacity:1;transform:none}
.md>.sl{width:64%;border-radius:1cqw;box-shadow:0 0 0 1px rgb(255 255 255/.06)}
/* вход: код крупно, ссылка, QR */
.md-join{gap:7cqw}
.j-l{display:flex;flex-direction:column;align-items:flex-start;gap:.8cqw}
.j-lb{font-size:1.7cqw;color:#9a9aa2;font-weight:600}
.j-code{font-size:10cqw;line-height:1;font-weight:800;letter-spacing:.1em;font-variant-numeric:tabular-nums;background:linear-gradient(90deg,#fff,#cfccff);-webkit-background-clip:text;background-clip:text;color:transparent}
.j-ln{display:flex;align-items:center;gap:1.2cqw;font-size:2cqw;color:#a9a4ff;font-weight:600}
.j-ln i{font-style:normal;padding:.2cqw .8cqw;border-radius:.8cqw;background:rgb(255 255 255/.08);color:#c9c9d1;font-size:1.5cqw;font-variant-numeric:tabular-nums}
.j-n{display:flex;align-items:center;gap:.8cqw;margin-top:1cqw;font-size:2.2cqw;color:#c9c9d1}.j-n svg{width:2.4cqw;height:2.4cqw}
.j-n b{font-variant-numeric:tabular-nums;color:#fff}
.j-qr{padding:1.3cqw;border-radius:1.6cqw;background:#fff;box-shadow:0 0 50px rgb(139 133 255/.35)}
.qr{display:block;width:17cqw;height:17cqw;fill:#0b0b10}
/* пошаговое задание и таймер */
.md-task,.md-brk{flex-direction:column;gap:1cqw;text-align:center}
.t-tm{position:absolute;top:2.6cqw;left:2.6cqw;display:flex;align-items:center;gap:.8cqw;padding:.6cqw 1.3cqw;border-radius:5cqw;background:rgb(255 159 10/.14);color:#ffb340;font-size:2cqw;font-weight:700;font-variant-numeric:tabular-nums}
.t-tm svg{width:2cqw;height:2cqw}
.t-bd{display:flex;align-items:center;gap:.8cqw;padding:.5cqw 1.4cqw;border-radius:5cqw;background:rgb(139 133 255/.16);color:#b9b5ff;font-size:1.5cqw;font-weight:700}
.t-bd svg{width:1.8cqw;height:1.8cqw}
.t-h{margin:.6cqw 0 0;font-size:3cqw;font-weight:700;letter-spacing:-.01em}
.t-big{display:flex;align-items:baseline;gap:1cqw;margin:.8cqw 0 0}
.t-big b{font-size:8cqw;line-height:1;font-weight:800;font-variant-numeric:tabular-nums}
.t-big small{font-size:2.6cqw;color:#9a9aa2}
.t-all{margin:0;font-size:1.8cqw;color:#9a9aa2}
.t-bar{display:block;width:40cqw;height:.7cqw;margin-top:1.2cqw;border-radius:1cqw;background:rgb(255 255 255/.1);overflow:hidden}
.t-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#8b85ff,#30d158);transition:width .4s ease}
.b-t{margin:0;font-size:3cqw;font-weight:600;color:#c9c9d1}
.b-n{font-size:15cqw;line-height:1;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.md-brk .t-bar i{width:100%;background:#8b85ff;transition:width 1s linear}
@media(max-width:700px){
  .pj{aspect-ratio:4/3.6}
  .md>.sl{width:80%}
  .pj-cap{gap:1cqw;padding:2cqw 4cqw 3cqw}
  .pj-cap p{white-space:normal;font-size:3.4cqw;line-height:1.28;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  .pj-cap .lc{font-size:2.2cqw;margin-right:1.5cqw}
  .pj-code{font-size:2cqw}.pj-code b{font-size:3.8cqw}
  .md-join{gap:5cqw}.j-code{font-size:13cqw}.j-lb{font-size:2.6cqw}.j-ln{font-size:3cqw}.j-ln i{font-size:2.4cqw}.j-n{font-size:3.2cqw}.qr{width:24cqw;height:24cqw}
  .t-tm{font-size:3cqw}.t-tm svg{width:3cqw;height:3cqw}.t-bd{font-size:2.6cqw}.t-h{font-size:4.2cqw}.t-big b{font-size:12cqw}.t-big small{font-size:4cqw}.t-all{font-size:3cqw}.t-bar{width:60cqw;height:1.2cqw}
  .b-t{font-size:4.6cqw}.b-n{font-size:20cqw}
}

/* ───── глава «После занятия»: запись сессии на ноутбуке ───── */
.after{position:relative;max-width:1040px;margin:0 auto}
.rec{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--bg);color:var(--label);font-size:13.5px}
.r-bar{display:flex;align-items:center;gap:12px;height:54px;flex:none;padding:0 18px;border-bottom:1px solid var(--sep)}
.r-ttl{display:flex;flex-direction:column;line-height:1.25}.r-ttl b{font-size:15px;font-weight:700}.r-ttl small{font-size:12px;color:var(--label-2)}
.r-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 340px}
.r-left{display:flex;flex-direction:column;gap:12px;min-width:0;padding:16px 20px}
.r-st{position:relative}
.r-sl{transition:opacity .22s}.r-sl.sw{opacity:0}
.r-cap{position:absolute;left:50%;bottom:5%;width:max-content;max-width:88%;margin:0;padding:6px 12px;transform:translateX(-50%);border-radius:8px;background:rgb(0 0 0/.75);color:#fff;font-size:15px;line-height:1.35;text-align:center}
.r-pl{display:flex;align-items:center;gap:12px}
.r-pp{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--primary);color:var(--on-primary)}
.r-pp svg{fill:currentColor}
.r-t{font-size:12.5px;color:var(--label-2);font-variant-numeric:tabular-nums}
.r-sk{position:relative;flex:1;height:6px;border-radius:3px;background:var(--fill-2)}
.r-sk .fl{position:absolute;left:0;top:0;bottom:0;width:var(--p);border-radius:3px;background:var(--accent)}
.r-sk .kn{position:absolute;top:50%;left:var(--p);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgb(0 0 0/.5)}
.r-sk .mk{position:absolute;top:-3px;width:2px;height:12px;margin-left:-1px;border-radius:1px;background:var(--label-3)}
.r-sk.jump .fl{transition:width .45s cubic-bezier(.2,.8,.2,1)}.r-sk.jump .kn{transition:left .45s cubic-bezier(.2,.8,.2,1)}
.r-sp{padding:3px 8px;border-radius:7px;background:var(--fill);font-size:12px;font-weight:700}
.r-th{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.r-right{display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--sep)}
.r-tabs{display:flex;flex:none;gap:2px;margin:14px 14px 8px;padding:3px;border-radius:10px;background:var(--fill)}
.r-tabs button{flex:1;height:32px;border-radius:8px;font-size:13px;font-weight:600;color:var(--label-2);transition:background .2s,color .2s}
.r-tabs [aria-selected=true]{background:var(--surface);color:var(--label);box-shadow:0 1px 2px rgb(0 0 0/.35)}
.r-pane{flex:1;min-height:0;overflow-y:auto;padding:2px 10px 14px;scrollbar-width:none}
.r-pane::-webkit-scrollbar{display:none}
.r-pane[hidden]{display:none}
.tl{display:flex;gap:10px;width:100%;padding:8px 10px;border-radius:10px;text-align:left;font-size:13.5px;line-height:1.4;color:var(--label-2);transition:background .25s,color .25s}
.tl:hover{background:var(--fill)}
.tl time{flex:none;width:40px;padding-top:1px;font-size:11.5px;color:var(--label-3);font-variant-numeric:tabular-nums}
.tl.cur{background:var(--accent-soft);color:var(--label)}.tl.cur time{color:var(--accent)}
.s-ask{display:grid;place-items:center;height:100%;min-height:120px}
.s-run{display:flex;align-items:center;justify-content:center;gap:8px;height:100%;min-height:120px;margin:0;color:var(--accent);font-weight:600;animation:srun 1.2s ease-in-out infinite}
@keyframes srun{50%{opacity:.45}}
.s-doc h4{margin:14px 4px 6px;font-size:14px;font-weight:700}.s-doc h4:first-child{margin-top:4px}
.s-doc ul{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.s-doc li{position:relative;padding:0 4px 0 18px;font-size:13.5px;line-height:1.45}
.s-doc li::before{content:"";position:absolute;left:6px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.s-doc h4,.s-doc li{transition:opacity .3s,transform .3s}.s-doc .s-hid{opacity:0;transform:translateY(4px)}
.tc{display:inline-flex;align-items:center;height:20px;margin-left:2px;padding:0 6px;border-radius:6px;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;vertical-align:1px}
.tc:hover{background:rgb(139 133 255/.3)}

/* ───── выбор языка: один значок, список языков их же названиями ───── */
.lng{position:relative}
.lng summary{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;color:var(--label-2);cursor:pointer;list-style:none;transition:background .15s,color .15s}
.lng summary::-webkit-details-marker{display:none}
.lng summary:hover,.lng[open] summary{background:var(--fill);color:var(--label)}
.lng-m{position:absolute;right:0;top:calc(100% + 8px);z-index:40;display:flex;flex-direction:column;min-width:190px;padding:6px;border-radius:14px;background:var(--surface);
  box-shadow:0 0 0 1px var(--sep),0 20px 44px -14px rgb(0 0 0/.35);animation:lngin .16s ease-out}
@keyframes lngin{from{opacity:0;transform:translateY(-4px)}}
.lng-m a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;border-radius:9px;font-size:15px;color:var(--label)}
.lng-m a:hover{background:var(--fill)}
.lng-m a[aria-current]{font-weight:600}
.lng-m a[aria-current]::after{content:"";width:14px;height:8px;margin-top:-4px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
@media(pointer:coarse){.lng summary{width:44px;height:44px}.lng-m a{padding:12px}}

/* слоган: «AI» — тем же переливом, что и логотип */
.tagline .ai{background:linear-gradient(90deg,var(--g1),var(--g2),var(--g3),var(--g4),var(--g1));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 9s linear infinite;font-weight:800}
.brand.off+.tagline .ai{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.tagline .ai{animation:none}}

/* ───── переключатель аудиторий «Спикерам / Организаторам» (nav.bs-aud): две ссылки, белый бегунок под текущей.
   Бегунок стоит в той же ячейке сетки, что и текущая ссылка, — при переходе между страницами его переносит view transition.
   Уже 900px — второй строкой шапки во всю ширину (подписи и кнопки в одну строку не помещаются). ───── */
/* Шапка — сетка 1fr auto 1fr: переключатель стоит ровно по центру и на одном месте на обеих страницах (справа кнопки разной
   ширины: «Начать бесплатно» / «Оставить заявку»). Уже 960px — переключатель второй строкой во всю ширину (длинные подписи kk/ky + кнопки справа). */
.top .w{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:10px}
.logo{margin-right:0;justify-self:start}
.top-r{justify-self:end;display:flex;align-items:center;gap:10px;min-width:0}
@media(max-width:360px){.top-r{gap:6px}}
.bs-aud{position:relative;display:grid;grid-template-columns:auto auto;align-items:center;margin:0 auto;padding:3px;border-radius:11px;background:var(--fill)}
.bs-aud a{grid-row:1;position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:7px;height:32px;padding:0 13px;border-radius:8px;font-size:14px;font-weight:600;color:var(--label-2);white-space:nowrap;min-width:0;transition:color .2s}
.bs-aud a:nth-of-type(1){grid-column:1}.bs-aud a:nth-of-type(2){grid-column:2}
.bs-aud a span{overflow:hidden;text-overflow:ellipsis}
.bs-aud a:hover,.bs-aud a[aria-current]{color:var(--label)}
.bs-aud-th{grid-row:1;grid-column:1;align-self:stretch;border-radius:8px;background:var(--surface);box-shadow:var(--shadow),0 1px 3px rgb(0 0 0/.08);view-transition-name:bs-aud-th}
.bs-aud-th.r{grid-column:2}
@media(max-width:959px){
  .top .w{grid-template-columns:minmax(0,1fr) auto;height:auto;row-gap:0;padding-bottom:8px}
  .top .w>.logo{line-height:56px}
  .bs-aud{grid-row:2;grid-column:1/-1;width:100%;grid-template-columns:1fr 1fr}
  .bs-aud a{height:34px;padding:0 8px;font-size:13.5px}
  html{scroll-padding-top:112px}
}
/* 720–959px: вторая строка, но не во всю ширину — по центру */
@media(min-width:720px) and (max-width:959px){.bs-aud{width:min(100%,520px);justify-self:center}}
@media(pointer:coarse){.bs-aud a{min-height:40px}}
@media(max-width:420px){.bs-aud a{gap:5px;padding:0 6px;font-size:13px}.bs-aud a svg{width:14px;height:14px}}
@media(max-width:380px){.bs-aud a svg{display:none}}
/* длинные подписи (kk «Ұйымдастырушыларға», uz, ky): на узком — без значков, чуть плотнее, чтобы не обрезались */
@media(max-width:440px){:is(:lang(kk),:lang(uz),:lang(ky)) .bs-aud a{padding:0 4px;font-size:12.5px;letter-spacing:-.01em}:is(:lang(kk),:lang(uz),:lang(ky)) .bs-aud a svg{display:none}}
@media(max-width:359px){:is(:lang(kk),:lang(uz),:lang(ky)) .bs-aud{grid-template-columns:auto minmax(0,1fr)}}

/* ───── плавный переход между страницами (Спикерам ⇄ Организаторам, смена языка) ───── */
/* Свои имена: подложка переключателя, бегунок, обе подписи (рисуются ПОСЛЕ бегунка — он не закрывает текст), правая часть
   шапки и слоган. Тексты разной ширины не растягиваются (снимки в своём размере) и сменяются «старое гаснет — новое
   проявляется», без наложения двух строк. */
@view-transition{navigation:auto}
.top{view-transition-name:bs-top}
.brand{view-transition-name:bs-brand}
.bs-aud{view-transition-name:bs-aud}
.bs-aud a:nth-of-type(1){view-transition-name:bs-aud-1}
.bs-aud a:nth-of-type(2){view-transition-name:bs-aud-2}
.top-r{view-transition-name:bs-top-r}
.tagline{view-transition-name:bs-tagline}
::view-transition-group(bs-aud-th){animation-duration:.42s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}
::view-transition-old(bs-top-r),::view-transition-new(bs-top-r){inset:0 0 auto auto;inline-size:auto;block-size:auto}
::view-transition-old(bs-tagline),::view-transition-new(bs-tagline){inset:0 0 auto 0;margin:0 auto;inline-size:auto;block-size:auto}
::view-transition-old(bs-tagline),::view-transition-old(bs-top-r){animation:bs-vt-out .14s ease-in both}
::view-transition-new(bs-tagline),::view-transition-new(bs-top-r){animation:bs-vt-in .24s ease-out .12s both}
::view-transition-group(bs-tagline),::view-transition-group(bs-top-r){animation-duration:.36s}
@keyframes bs-vt-out{to{opacity:0}}
@keyframes bs-vt-in{from{opacity:0}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ───── страница организаторов: мелочи вёрстки, которые строит build.mjs ───── */
/* zh: заголовки и подписи рвутся только между словами (<wbr> в src/events/zh.json), не посреди слова */
html[lang=zh] .bs-org :is(.bs-pain-tx,.bs-nums,.bs-more,.bs-plans h2,.bs-band h2,#faq-h){word-break:keep-all;overflow-wrap:anywhere}
/* надпись над сеткой «И ещё» */
.bs-eyebrow{margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--label-2)}
/* телефон: между демо и тарифом — без пустой полосы */
@media(max-width:719px){.bs-org .bs-demo{padding-bottom:40px}}
/* словарь в колонке «Программа» (kit bsProgram): пусто — ссылка цветом, как в приложении; «+ N из программы» — строкой ниже */
.bs-gl .bs-gl-e{color:var(--accent);white-space:normal;line-height:1.35}
.bs-gl .bs-gl-p{margin-top:2px;color:var(--label-3)}