/* ══════════════════════════════════════════════════════════════
   «Твой репетитор» — главная страница (новый дизайн)
   Подключается только на главной (build.js → meta.css).
   Общие токены, шапка/подвал и блоки нового дизайна (заголовки секций,
   появление, фон первого экрана, финальный призыв) — в site.css.
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════ HERO ══════════════════════════════ */
.hero { position: relative; isolation: isolate; padding: calc(70px + clamp(36px, 6vw, 76px)) 0 clamp(56px, 7vw, 100px); }
.hero__inner { max-width: 1240px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); display: flex; flex-direction: column; align-items: center; text-align: center; }

.hero__title { margin-top: 26px; max-width: 1060px; font-size: clamp(40px, 7.4vw, 92px); font-weight: 700; letter-spacing: -.048em; line-height: .98; }
.hero__title .w { display: inline-block; animation: wordIn 1s var(--ease-out) both; animation-delay: calc(.12s + var(--i) * .075s); }
.hero__lead { margin-top: 26px; max-width: 700px; font-size: clamp(16.5px, 1.7vw, 20px); line-height: 1.55; color: var(--text-secondary); animation: fadeUp .9s var(--ease-out) .65s both; }
.hero__lead b { color: var(--ink); font-weight: 700; }
.hero__ctas { position: relative; z-index: 3; margin-top: 34px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; animation: fadeUp .9s var(--ease-out) .8s both; }

.hero__chans { position: relative; margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; animation: fadeUp .9s var(--ease-out) 1s both; }
.hero__chans-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-right: 4px; }
.hero__chans:hover, .hero__chans:focus-within { z-index: 4; }
.chan { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 6px; border-radius: 12px; background: rgba(255, 255, 255, .7); border: 1px solid rgba(26, 26, 31, .07); font-size: 13.5px; font-weight: 600; color: var(--ink); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.chan:hover { color: var(--ink); background: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.chan__ic { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: -.3px; flex-shrink: 0; }
.chan__ic svg { width: 15px; height: 15px; }
.chan__ic--logo { background: none; border-radius: 0; }
.chan__ic--logo svg { width: 100%; height: 100%; }
.chan__ic--web { background: var(--accent); }
/* Стрелка «перейти» в плашке и подсказка над ней */
.chan--static { cursor: default; }
.chan--static:hover { color: var(--ink); background: rgba(255, 255, 255, .7); transform: none; box-shadow: none; }
.chan--static::before, .chan--static::after { display: none; }
.chan__go { width: 13px; height: 13px; margin-left: -3px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .35; transition: opacity .2s ease, transform .2s ease, color .2s ease; }
.chan:hover .chan__go, .chan:focus-visible .chan__go { opacity: 1; color: var(--accent); transform: translate(1px, -1px); }
@media (hover: hover) {
  .chan::before, .chan::after { position: absolute; left: 50%; pointer-events: none; opacity: 0; transition: opacity .18s ease, transform .18s ease; }
  .chan::after { content: attr(data-tip); bottom: calc(100% + 9px); transform: translate(-50%, 4px); padding: 6px 10px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; box-shadow: var(--shadow-md); }
  .chan::before { content: ''; bottom: calc(100% + 4px); width: 10px; height: 10px; margin-left: -5px; border-radius: 2px; background: var(--ink); transform: translateY(4px) rotate(45deg); }
  .chan:hover::after, .chan:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
  .chan:hover::before, .chan:focus-visible::before { opacity: 1; transform: translateY(0) rotate(45deg); }
}

/* ─── Сцена с тремя живыми демо ─── */
.stage { position: relative; max-width: 1440px; margin: clamp(52px, 7vw, 88px) auto 0; padding-inline: clamp(18px, 3vw, 40px); perspective: 1800px; }
.stage__glow { position: absolute; left: 8%; right: 8%; top: 12%; bottom: -8%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(232, 115, 74, .26), rgba(99, 102, 241, .10) 55%, transparent); filter: blur(30px); }
.stage__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 26px); transform-origin: 50% 0; transform: rotateX(calc(var(--tilt, 0) * 16deg)) scale(calc(1 - var(--tilt, 0) * .05)); will-change: transform; }
.reveal-ready .stage__row { --tilt: 1; }
.demo-card { margin: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; animation: cardIn 1.1s var(--ease-out) both; animation-delay: calc(1s + var(--i) * .14s); }
@keyframes cardIn { from { opacity: 0; transform: translateY(60px) scale(.96); } to { opacity: 1; transform: none; } }
.demo-card__cap { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 14.5px; color: var(--text-secondary); white-space: nowrap; }
.demo-card__cap b { color: var(--ink); font-weight: 700; }
.demo-card__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent); }
.demo-card__dot--o { color: var(--tutor); background: var(--tutor); }
.demo-card__dot--i { color: var(--student); background: var(--student); }
.demo-card__dot--g { color: var(--parent); background: var(--parent); }
.demo-frame { position: relative; aspect-ratio: 1; border-radius: 22px; overflow: hidden; background: #f6f5f1; box-shadow: 0 40px 80px -30px rgba(26, 26, 31, .35), 0 12px 24px -12px rgba(26, 26, 31, .12), 0 0 0 1px rgba(26, 26, 31, .07); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.demo-frame::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
.demo-card:hover .demo-frame { transform: translateY(-6px); box-shadow: 0 50px 90px -30px rgba(26, 26, 31, .4), 0 16px 30px -12px rgba(26, 26, 31, .14), 0 0 0 1px rgba(26, 26, 31, .08); }
.stage__dots { display: none; }

/* ══════════════ ЖИВЫЕ ДЕМО (перенесены из инвестпитча) ══════════════
   Каждое демо — «окно» 482×482, масштабируется под карточку через --ds. */
.demo { position: absolute; left: 0; top: 0; width: 482px; height: 482px; transform-origin: 0 0; transform: scale(var(--ds, 1)); overflow: hidden; background: #f6f5f1; font-family: var(--font-sans); color: #1a1a1f; text-align: left; line-height: normal; letter-spacing: 0; }
.demo s { text-decoration: none; }
.demo em { font-style: normal; }
.demo .d-hd { height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 16px; }
.demo .d-ttl { font-size: 17px; font-weight: 600; letter-spacing: -.2px; white-space: nowrap; }
.demo .d-seg { position: relative; display: flex; background: rgba(0, 0, 0, .06); border-radius: 10px; padding: 3px; }
.demo .d-seg b { position: relative; z-index: 1; font-size: 14px; font-weight: 500; padding: 6px 12px; color: #6b6d7b; transition: color .3s; }
.demo .d-seg b.on { color: #1a1a1f; }
.demo .d-seg i { position: absolute; top: 3px; bottom: 3px; left: 0; width: 74px; background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); transition: transform .45s cubic-bezier(.3, .7, .2, 1), width .45s; }
.demo .d-vw { position: absolute; left: 10px; top: 52px; display: flex; gap: 24px; transition: transform .65s cubic-bezier(.6, 0, .2, 1); }
.demo .d-sf { flex: none; width: 462px; height: 420px; background: #fff; border-radius: 12px; border: 1px solid rgba(0, 0, 0, .07); position: relative; overflow: hidden; }
.demo .d-cur { position: absolute; left: 0; top: 0; z-index: 20; opacity: 0; transition: transform .75s cubic-bezier(.5, 0, .2, 1), opacity .3s; transform: translate(420px, 440px); }
.demo .d-cur svg { display: block; transition: scale .12s; transform-origin: 0 0; }
.demo .d-cur.pr svg { scale: .82; }
.demo .d-rp { position: absolute; left: 0; top: 0; z-index: 19; pointer-events: none; }
.demo .d-rp i { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; background: rgba(232, 115, 74, .4); opacity: 0; }
.demo .d-rp.go i { animation: dmRipple .55s ease-out; }
@keyframes dmRipple { 0% { opacity: .9; scale: .2; } 100% { opacity: 0; scale: 1.5; } }
.demo .d-toast { position: absolute; left: 50%; top: 10px; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .14), 0 1px 3px rgba(0, 0, 0, .06); transform: translateY(-90px); transition: transform .55s cubic-bezier(.3, 1.4, .5, 1); z-index: 8; }
.demo .d-toast.in { transform: none; }
.demo .d-toast p { font-size: 14.5px; font-weight: 600; }
.demo .d-toast s { display: block; font-size: 13px; color: #6b6d7b; margin-top: 1px; }
.demo .d-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }

/* — Менеджмент: заявка → подтверждение → «проведено» и оплата → аналитика.
   Цвета статусов — как в приложении (design.md): оранжевый — запланировано,
   зелёный — проведено, блёклый оранж — прошло и ждёт отметки,
   индиго-пунктир — заявка. Время и деньги — моноширинным. — */
.demo--mgmt .d-toast { width: 350px; margin-left: -175px; }
.demo--mgmt .d-ic { background: rgba(99, 102, 241, .13); }
.demo--mgmt .m-dh { position: absolute; top: 0; height: 34px; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #8b8d9a; border-bottom: 1px solid rgba(0, 0, 0, .07); }
.demo--mgmt .m-dh b, .demo--mgmt .m-dh em { font: 600 13px var(--font-mono); letter-spacing: 0; color: #1a1a1f; }
.demo--mgmt .m-dh em { background: #e8734a; color: #fff; border-radius: 6px; padding: 1px 5px; }
.demo--mgmt .m-tm { position: absolute; left: 0; width: 40px; font: 10.5px var(--font-mono); color: #a0a2b1; text-align: right; padding-right: 5px; }
.demo--mgmt .m-hl { position: absolute; left: 40px; right: 0; border-top: 1px solid rgba(0, 0, 0, .05); }
.demo--mgmt .m-vl { position: absolute; top: 34px; bottom: 0; border-left: 1px solid rgba(0, 0, 0, .05); }
.demo--mgmt .m-bk { position: absolute; width: 76px; height: 62px; border-radius: 8px; padding: 6px; border-left: 3px solid #e8734a; background: rgba(232, 115, 74, .12); transition: transform .45s cubic-bezier(.3, 1.5, .5, 1), opacity .35s, box-shadow .5s, background-color .45s, border-color .45s; }
.demo--mgmt .m-bk p { font-size: 12.5px; font-weight: 600; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; transition: color .3s; }
.demo--mgmt .m-bk s { display: flex; align-items: center; font: 11px var(--font-mono); color: #6b6d7b; margin-top: 3px; white-space: nowrap; overflow: hidden; transition: color .3s; }
.demo--mgmt .m-bk.dn { background: rgba(16, 185, 129, .13); border-color: #10b981; }
.demo--mgmt .m-bk.pn { background: rgba(232, 115, 74, .05); border-color: rgba(232, 115, 74, .4); }
.demo--mgmt .m-bk.pn p, .demo--mgmt .m-bk.pn s { color: #9a9ca8; }
.demo--mgmt .m-bk.rq { background: rgba(99, 102, 241, .08); border-color: #6366f1; background-image: linear-gradient(90deg, rgba(99, 102, 241, .55) 50%, transparent 0), linear-gradient(90deg, rgba(99, 102, 241, .55) 50%, transparent 0), linear-gradient(rgba(99, 102, 241, .55) 50%, transparent 0); background-size: 8px 1.5px, 8px 1.5px, 1.5px 8px; background-position: 0 0, 0 100%, 100% 0; background-repeat: repeat-x, repeat-x, repeat-y; }
.demo--mgmt .m-bk.x { border-left: 0; padding-left: 8px; background: repeating-linear-gradient(45deg, rgba(0, 0, 0, .06) 0 5px, rgba(0, 0, 0, .02) 5px 10px); }
.demo--mgmt .m-bk.x p, .demo--mgmt .m-bk.x s { color: #6b6d7b; }
.demo--mgmt .m-bk.b { border-color: #4a4c57; background: repeating-linear-gradient(45deg, rgba(0, 0, 0, .06) 0 5px, rgba(0, 0, 0, .02) 5px 10px); }
.demo--mgmt .m-ck { flex: none; width: 0; height: 13px; margin-right: 0; border-radius: 50%; background: #10b981; display: flex; align-items: center; justify-content: center; transform: scale(0); transition: transform .4s cubic-bezier(.3, 1.8, .5, 1), width .3s, margin .3s; }
.demo--mgmt .m-bk.dn .m-ck { width: 13px; margin-right: 4px; transform: scale(1); }
.demo--mgmt .m-in { flex: none; display: flex; width: 14px; color: #4f46e5; overflow: hidden; transition: width .3s, opacity .3s; }
.demo--mgmt .m-bk:not(.rq) .m-in { width: 0; opacity: 0; }
.demo--mgmt .m-bk .m-ac, .demo--mgmt .m-bk.rq .m-rq { display: inline; }
.demo--mgmt .m-bk .m-rq, .demo--mgmt .m-bk.rq .m-ac { display: none; }
.demo--mgmt .m-bk.rq s { color: #4f46e5; }
.demo--mgmt .m-bk.hid { transform: scale(.4); opacity: 0; }
.demo--mgmt .m-bk.glow { box-shadow: 0 0 0 3px rgba(232, 115, 74, .35), 0 6px 16px rgba(232, 115, 74, .3); }
.demo--mgmt .m-bk.rq.glow { box-shadow: 0 0 0 3px rgba(99, 102, 241, .3), 0 6px 16px rgba(99, 102, 241, .28); }
.demo--mgmt .m-nl { position: absolute; height: 2px; background: #e8734a; }
.demo--mgmt .m-nl::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #e8734a; }
/* Карточка заявки над блоком в сетке */
.demo--mgmt .m-pop { position: absolute; left: 150px; top: 206px; z-index: 4; width: 226px; padding: 12px 12px 10px; border-radius: 14px; background: #fff; box-shadow: 0 16px 36px rgba(26, 26, 31, .18), 0 0 0 1px rgba(0, 0, 0, .05); opacity: 0; transform: translateY(8px) scale(.96); transform-origin: 80% 100%; transition: opacity .3s, transform .4s cubic-bezier(.3, 1.4, .5, 1); pointer-events: none; }
.demo--mgmt .m-pop.in { opacity: 1; transform: none; }
.demo--mgmt .m-pop p { font-size: 14px; font-weight: 600; }
.demo--mgmt .m-pop s { display: block; margin-top: 2px; font-size: 12px; color: #6b6d7b; }
.demo--mgmt .m-pop div { display: flex; gap: 6px; margin-top: 10px; }
.demo--mgmt .m-pop span { flex: 1; text-align: center; font-size: 13px; font-weight: 600; padding: 8px 0; border-radius: 10px; }
.demo--mgmt .m-no { background: rgba(0, 0, 0, .05); color: #1a1a1f; }
.demo--mgmt .m-yes { background: #e8734a; color: #fff; }
.demo--mgmt .m-ov { position: absolute; inset: 0; background: rgba(26, 26, 31, .2); opacity: 0; transition: opacity .4s; z-index: 5; }
.demo--mgmt .m-ov.on { opacity: 1; }
/* Карточка занятия: шапка, «Оплата» и кнопка «Занятие проведено» */
.demo--mgmt .m-sh { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 24px 24px 0 0; padding: 10px 18px 18px; box-shadow: 0 -10px 30px rgba(0, 0, 0, .14); transform: translateY(290px); transition: transform .5s cubic-bezier(.3, 1, .4, 1); z-index: 6; }
.demo--mgmt .m-sh.up { transform: none; }
.demo--mgmt .m-hb { width: 38px; height: 4px; border-radius: 2px; background: rgba(0, 0, 0, .14); margin: 0 auto 12px; }
.demo--mgmt .m-h4 { font-size: 20px; font-weight: 600; letter-spacing: -.2px; }
.demo--mgmt .m-sb { font-size: 13.5px; color: #6b6d7b; margin-top: 3px; }
.demo--mgmt .m-sb span { font: 12.5px var(--font-mono); }
.demo--mgmt .m-pay { margin: 12px 0; padding: 0 12px; border-radius: 14px; border: 1px solid rgba(0, 0, 0, .08); }
.demo--mgmt .m-pr { display: flex; align-items: center; gap: 10px; height: 44px; font-size: 14px; }
.demo--mgmt .m-pr > span { font-weight: 600; }
.demo--mgmt .m-pr b { margin-left: auto; font: 600 15px var(--font-mono); }
.demo--mgmt .m-pr em { display: grid; justify-items: end; }
.demo--mgmt .m-pr em span { grid-area: 1 / 1; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; transition: opacity .3s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.demo--mgmt .m-wt { background: rgba(245, 158, 11, .15); color: #92600a; }
.demo--mgmt .m-pd { background: rgba(16, 185, 129, .14); color: #059669; opacity: 0; transform: scale(.7); }
.demo--mgmt .m-pay.paid .m-wt { opacity: 0; transform: scale(.7); }
.demo--mgmt .m-pay.paid .m-pd { opacity: 1; transform: none; }
.demo--mgmt .m-way { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s cubic-bezier(.4, 0, .2, 1), opacity .35s; }
.demo--mgmt .m-pay.open .m-way { max-height: 76px; opacity: 1; }
.demo--mgmt .m-way s { display: block; font-size: 12px; color: #6b6d7b; }
.demo--mgmt .m-way div { display: flex; gap: 6px; padding: 6px 0 12px; }
.demo--mgmt .m-way span { flex: 1; text-align: center; font-size: 13px; font-weight: 600; padding: 8px 0; border-radius: 10px; border: 1.5px solid rgba(0, 0, 0, .1); transition: background .3s, border-color .3s, color .3s; }
.demo--mgmt .m-way span.on { background: #e8734a; border-color: #e8734a; color: #fff; }
.demo--mgmt .m-bt { height: 46px; border-radius: 13px; background: #e8734a; color: #fff; font-size: 15.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background .35s; position: relative; }
.demo--mgmt .m-bt.ok { background: #10b981; }
.demo--mgmt .m-pl { position: absolute; right: 30px; bottom: 262px; padding: 4px 12px; border-radius: 999px; background: #fff; box-shadow: 0 8px 20px rgba(16, 185, 129, .3); font: 600 19px var(--font-mono); color: #059669; opacity: 0; z-index: 7; }
.demo--mgmt .m-pl.go { animation: dmPlus 1.3s ease-out; }
@keyframes dmPlus { 0% { opacity: 0; transform: translateY(10px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-46px); } }
/* Аналитика: доход считается по оплаченному, график линией, последняя неделя — пунктиром */
.demo--mgmt .m-an { padding: 16px; }
.demo--mgmt .m-per { font-size: 13px; color: #6b6d7b; }
.demo--mgmt .m-kp { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; margin-top: 10px; }
.demo--mgmt .m-kp > div { background: #f6f5f1; border-radius: 12px; padding: 11px 13px; }
.demo--mgmt .m-kp s { font-size: 12.5px; color: #6b6d7b; white-space: nowrap; }
.demo--mgmt .m-kp p { font: 600 27px var(--font-mono); letter-spacing: -1px; margin-top: 2px; white-space: nowrap; }
.demo--mgmt .m-rev { color: #e8734a; }
.demo--mgmt .m-cht { margin-top: 14px; font-size: 13.5px; font-weight: 600; }
.demo--mgmt .m-ch { display: block; margin-top: 4px; overflow: visible; }
.demo--mgmt .m-ch-g { stroke: rgba(0, 0, 0, .06); stroke-width: 1; fill: none; }
.demo--mgmt .m-ch-a { fill: rgba(232, 115, 74, .12); opacity: 0; transition: opacity .8s .7s; }
.demo--mgmt .m-ch-l { stroke: #e8734a; stroke-width: 3; fill: none; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.5, 0, .2, 1) .2s; }
.demo--mgmt .m-ch-d { stroke: #e8734a; stroke-width: 2.5; stroke-dasharray: 5 5; fill: none; opacity: 0; transition: opacity .4s 1.2s; }
.demo--mgmt .m-ch circle { fill: #e8734a; opacity: 0; transition: opacity .3s; }
.demo--mgmt .m-ch circle:nth-of-type(2) { transition-delay: .45s; }
.demo--mgmt .m-ch circle:nth-of-type(3) { transition-delay: .7s; }
.demo--mgmt .m-ch circle:nth-of-type(4) { transition-delay: .95s; }
.demo--mgmt .m-ch circle:nth-of-type(5) { transition-delay: 1.3s; }
.demo--mgmt .m-ch .m-ch-o { fill: #fff; stroke: #e8734a; stroke-width: 2; }
.demo--mgmt .m-an.in .m-ch-a, .demo--mgmt .m-an.in .m-ch-d, .demo--mgmt .m-an.in .m-ch circle { opacity: 1; }
.demo--mgmt .m-an.in .m-ch-l { stroke-dashoffset: 0; }
.demo--mgmt .m-lb { display: flex; margin-top: 2px; }
.demo--mgmt .m-lb span { flex: 1; text-align: center; font: 11px var(--font-mono); color: #a0a2b1; }
.demo--mgmt .m-rk { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; background: rgba(232, 115, 74, .1); border-radius: 12px; padding: 10px 13px; font-size: 14.5px; font-weight: 600; opacity: 0; transform: translateY(10px); transition: .5s; }
.demo--mgmt .m-rk.in { opacity: 1; transform: none; }
.demo--mgmt .m-rk span { display: flex; gap: 6px; }
.demo--mgmt .m-rk i { font-style: normal; font-size: 12.5px; background: #fff; color: #c2603a; border-radius: 20px; padding: 4px 10px; }

/* — Обучение: конструктор задания → проверка глазами ученика → выдача со сроком — */
.demo--learn .d-ttl { font-size: 16px; }
.demo--learn .d-seg b { padding: 6px 11px; }
.demo--learn .d-toast { width: 330px; margin-left: -165px; }
.demo--learn .d-ic { background: rgba(16, 185, 129, .14); }
.demo--learn .l-sc { padding: 12px; transition: transform .6s cubic-bezier(.4, 0, .2, 1); }
.demo--learn .l-q { border: 1px solid rgba(0, 0, 0, .08); border-radius: 14px; padding: 12px 13px; background: #fff; }
.demo--learn .l-q + .l-q { margin-top: 10px; }
.demo--learn .l-qh { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; color: #4f46e5; }
.demo--learn .l-qh span { font-weight: 500; color: #6b6d7b; }
.demo--learn .l-qt { font-size: 15.5px; margin-top: 6px; line-height: 1.3; }
.demo--learn .l-fx { margin-top: 8px; background: #f6f5f1; border-radius: 10px; padding: 8px; text-align: center; font: italic 500 21px var(--font-sans); letter-spacing: -.2px; }
.demo--learn .l-op { display: flex; align-items: center; gap: 10px; height: 40px; margin-top: 6px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(0, 0, 0, .08); font-size: 15px; transition: background .35s, border-color .35s, box-shadow .35s; }
.demo--learn .l-rd { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #c9c7c0; transition: .3s; display: flex; align-items: center; justify-content: center; }
.demo--learn .l-rd svg { opacity: 0; transition: opacity .2s; }
/* Верный вариант в редакторе — зелёный кружок с галочкой */
.demo--learn .l-op.key { background: rgba(16, 185, 129, .08); border-color: rgba(16, 185, 129, .4); }
.demo--learn .l-op.key .l-rd { border-color: #10b981; background: #10b981; }
.demo--learn .l-op.key .l-rd svg { opacity: 1; }
.demo--learn .l-ky { margin-left: auto; font-size: 12px; font-weight: 600; color: #059669; }
.demo--learn .l-tf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.demo--learn .l-tf s { font-size: 13px; color: #6b6d7b; }
.demo--learn .l-sw { display: flex; padding: 3px; border-radius: 10px; background: rgba(0, 0, 0, .06); }
.demo--learn .l-sw span { padding: 6px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; color: #6b6d7b; transition: background .3s, color .3s, box-shadow .3s; }
.demo--learn .l-sw span.on { background: #10b981; color: #fff; box-shadow: 0 2px 8px rgba(16, 185, 129, .35); }
.demo--learn .l-q2 { overflow: hidden; max-height: 0; opacity: 0; margin-top: 0 !important; padding-top: 0; padding-bottom: 0; border-width: 0; transition: max-height .6s cubic-bezier(.4, 0, .2, 1), opacity .4s, margin .5s, padding .5s; }
.demo--learn .l-q2.in { max-height: 170px; opacity: 1; margin-top: 10px !important; padding-top: 12px; padding-bottom: 12px; border-width: 1px; }
.demo--learn .l-ft { position: absolute; left: 0; right: 0; bottom: 0; height: 62px; padding: 0 12px; display: flex; align-items: center; gap: 10px; background: linear-gradient(rgba(255, 255, 255, 0), #fff 30%); z-index: 2; }
.demo--learn .l-gh { font-size: 14px; font-weight: 600; color: #4f46e5; padding: 9px 13px; border-radius: 10px; background: rgba(99, 102, 241, .1); }
.demo--learn .l-rdy { margin-left: auto; display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: #059669; }
.demo--learn .l-pb { font-size: 14.5px; font-weight: 600; color: #fff; background: #e8734a; padding: 10px 20px; border-radius: 11px; box-shadow: 0 6px 16px -6px rgba(232, 115, 74, .7); }
/* Превью «Как ученик»: ответы не сохраняются, проверка — по кнопке */
.demo--learn .l-note { font-size: 12.5px; line-height: 1.35; color: #4f46e5; background: rgba(99, 102, 241, .08); border-radius: 10px; padding: 8px 11px; margin-bottom: 10px; }
.demo--learn .l-pt { opacity: 0; transform: scale(.8); transition: opacity .3s, transform .35s cubic-bezier(.3, 1.6, .5, 1); color: #059669 !important; font-weight: 600 !important; }
.demo--learn .d-sf.chk .l-pt { opacity: 1; transform: none; }
.demo--learn .l-op.sel { background: rgba(232, 115, 74, .08); border-color: #e8734a; }
.demo--learn .l-op.sel .l-rd { border-color: #e8734a; background: #e8734a; }
.demo--learn .l-op.sel .l-rd svg { opacity: 1; }
.demo--learn .l-op.ok { background: rgba(16, 185, 129, .1); border-color: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, .14); }
.demo--learn .l-op.ok .l-rd { border-color: #10b981; background: #10b981; }
.demo--learn .l-op.ok .l-rd svg { opacity: 1; }
.demo--learn .l-row { display: flex; gap: 8px; }
.demo--learn .l-row .l-op { flex: 1; justify-content: center; }
.demo--learn .l-pc { font: 500 13px var(--font-sans); color: #6b6d7b; }
.demo--learn .l-ck { margin-left: auto; font-size: 14.5px; font-weight: 600; color: #fff; background: #e8734a; padding: 10px 18px; border-radius: 11px; }
.demo--learn .l-res { position: absolute; left: 12px; right: 12px; bottom: 10px; display: flex; align-items: center; gap: 12px; background: #10b981; color: #fff; border-radius: 16px; padding: 11px 16px; box-shadow: 0 12px 28px rgba(16, 185, 129, .35); transform: translateY(90px) scale(.9); transition: transform .6s cubic-bezier(.3, 1.5, .5, 1); z-index: 4; }
.demo--learn .l-res.in { transform: none; }
.demo--learn .l-res p { font: 600 24px var(--font-mono); }
.demo--learn .l-res s { font-size: 14px; opacity: .95; line-height: 1.25; }
/* Окно «Выдать домашнее задание» */
.demo--learn .l-ov { position: absolute; inset: 0; z-index: 6; background: rgba(26, 26, 31, .22); opacity: 0; transition: opacity .35s; }
.demo--learn .l-ov.on { opacity: 1; }
.demo--learn .l-dlg { position: absolute; left: 50%; top: 104px; z-index: 7; width: 320px; margin-left: -160px; padding: 16px; border-radius: 18px; background: #fff; box-shadow: 0 24px 50px rgba(26, 26, 31, .25); opacity: 0; transform: translateY(16px) scale(.96); transition: opacity .3s, transform .45s cubic-bezier(.3, 1.3, .5, 1); }
.demo--learn .l-dlg.in { opacity: 1; transform: none; }
.demo--learn .l-dlg > b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.2px; }
.demo--learn .l-fr { margin-top: 12px; }
.demo--learn .l-fr s { display: block; font-size: 12.5px; color: #6b6d7b; margin-bottom: 6px; }
.demo--learn .l-who { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; border-radius: 10px; background: #f6f5f1; font-size: 14.5px; font-weight: 500; }
.demo--learn .l-who i { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: normal 600 11px var(--font-sans); color: #fff; background: linear-gradient(135deg, #8b8df5, #6366f1); }
.demo--learn .l-dd { display: flex; gap: 6px; }
.demo--learn .l-dd span { flex: 1; text-align: center; padding: 8px 0; border-radius: 10px; border: 1.5px solid rgba(0, 0, 0, .1); font-size: 13.5px; font-weight: 500; transition: .3s; }
.demo--learn .l-dd span.on { background: rgba(232, 115, 74, .1); border-color: #e8734a; color: #c2603a; font-weight: 600; }
.demo--learn .l-go { margin-top: 14px; height: 44px; border-radius: 12px; background: #e8734a; color: #fff; font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; }

/* — Инструменты: доска со звонком внутри, как в приложении: плавающие плашки,
   светлая панель звонка справа, панель инструментов снизу по центру — */
.demo--tools { background: #fff; }
.demo--tools .t-bd { position: absolute; inset: 0; background-color: #fdfcfa; background-image: linear-gradient(rgba(99, 102, 241, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 102, 241, .07) 1px, transparent 1px); background-size: 22px 22px; }
.demo--tools .t-sc { position: absolute; left: 0; top: 0; width: 482px; height: 482px; transform: translate(-24px, -20px) scale(.9); transform-origin: 0 0; }
.demo--tools svg.t-pl { position: absolute; left: 52px; top: 58px; overflow: visible; }
.demo--tools .t-ax { stroke: #1a1a1f; stroke-width: 2; fill: none; stroke-linecap: round; }
.demo--tools .t-pa { stroke: #6366f1; stroke-width: 4.5; fill: none; stroke-linecap: round; }
.demo--tools .t-dot { transform-box: fill-box; transform-origin: center; transition: transform .4s cubic-bezier(.3, 1.8, .5, 1); }
.demo--tools .t-cir { stroke: #e8734a; stroke-width: 3.5; fill: none; stroke-linecap: round; }
.demo--tools .t-fm { position: absolute; left: 148px; top: 190px; font: 500 20px var(--font-sans); color: #4f46e5; white-space: nowrap; }
.demo--tools .t-fm i { display: inline-block; width: 2px; height: 21px; background: #4f46e5; margin-left: 2px; vertical-align: -3px; animation: dmBlink .8s infinite; }
@keyframes dmBlink { 50% { opacity: .25; } }
.demo--tools .t-tk { position: absolute; font: 12px var(--font-mono); color: #6b6d7b; }
.demo--tools .t-fade { transition: opacity .45s; }
.demo--tools .t-fade.off { opacity: 0; }
/* Курсоры участников — стрелка и имя в плашке */
.demo--tools .t-cu, .demo--tools .t-pen { position: absolute; left: 0; top: 0; z-index: 5; opacity: 0; }
.demo--tools .t-cu { transition: transform .9s cubic-bezier(.5, 0, .2, 1), opacity .3s; }
.demo--tools .t-pen { transition: opacity .25s; }
.demo--tools .t-cu svg, .demo--tools .t-pen svg { display: block; }
.demo--tools .t-cu p, .demo--tools .t-pen p { position: absolute; left: 14px; top: 17px; font-size: 12px; font-weight: 600; color: #fff; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.demo--tools .t-cu p { background: #6366f1; }
.demo--tools .t-pen p { background: #e8734a; }
.demo--tools .t-st { position: absolute; left: 338px; top: 290px; width: 116px; min-height: 84px; padding: 11px 12px; background: #fde9df; border-radius: 6px; box-shadow: 0 8px 18px rgba(194, 96, 58, .14); font-size: 14px; line-height: 1.3; font-weight: 600; color: #7a3a1f; transition: transform .5s cubic-bezier(.3, 1.7, .5, 1), opacity .3s; }
.demo--tools .t-st.hid { transform: scale(.3); opacity: 0; }
/* Плавающие плашки сверху */
.demo--tools .t-top { position: absolute; left: 10px; top: 10px; z-index: 4; display: flex; align-items: center; gap: 4px; padding: 4px 12px 4px 4px; border-radius: 14px; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .09), 0 0 0 1px rgba(0, 0, 0, .05); }
.demo--tools .t-x { width: 28px; height: 28px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #6b6d7b; }
.demo--tools .t-on { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #059669; }
.demo--tools .t-on i { width: 8px; height: 8px; border-radius: 50%; background: #10b981; }
.demo--tools .t-ppl { position: absolute; right: 10px; top: 10px; z-index: 4; display: flex; padding: 4px; border-radius: 14px; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .09), 0 0 0 1px rgba(0, 0, 0, .05); }
.demo--tools .t-ppl b { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 600; box-shadow: 0 0 0 2px #fff; }
.demo--tools .t-ppl b + b { margin-left: -6px; }
/* Звонок — светлая полупрозрачная панель */
.demo--tools .t-cl { position: absolute; right: 10px; top: 52px; z-index: 4; width: 160px; padding: 8px; border-radius: 16px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 14px 34px rgba(26, 26, 31, .16), 0 0 0 1px rgba(0, 0, 0, .05); }
.demo--tools .t-ch { display: flex; align-items: center; gap: 6px; padding: 2px 4px 0; font-size: 12px; color: #6b6d7b; white-space: nowrap; }
.demo--tools .t-ch i { width: 7px; height: 7px; border-radius: 50%; background: #e5484d; animation: dmBlink 1.4s infinite; }
.demo--tools .t-tm { font: 600 12.5px var(--font-mono); color: #1a1a1f; }
.demo--tools .t-ct { display: flex; justify-content: center; gap: 8px; margin: 8px 0; }
.demo--tools .t-ct b { width: 30px; height: 30px; border-radius: 50%; background: rgba(0, 0, 0, .06); color: #1a1a1f; display: flex; align-items: center; justify-content: center; }
.demo--tools .t-ct b.t-end { background: #e5484d; }
.demo--tools .t-tl { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.demo--tools .t-v { position: relative; width: 144px; height: 81px; border-radius: 10px; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, #2b2c45, #24243a); }
.demo--tools .t-v.t-me { width: 72px; height: 41px; background: linear-gradient(150deg, #3a2c28, #2a2326); }
.demo--tools .t-av { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 600; transition: box-shadow .3s; }
.demo--tools .t-me .t-av { width: 22px; height: 22px; font-size: 9px; }
.demo--tools .t-av.sp { box-shadow: 0 0 0 3px rgba(232, 115, 74, .45), 0 0 16px 4px rgba(232, 115, 74, .55); }
.demo--tools .t-v s { position: absolute; left: 6px; bottom: 3px; font-size: 10.5px; color: rgba(255, 255, 255, .85); }
.demo--tools .t-me s { font-size: 9px; left: 4px; bottom: 1px; }
/* Панель инструментов снизу по центру: активный инструмент — оранжевый */
.demo--tools .t-tb { position: absolute; left: 50%; bottom: 10px; z-index: 4; display: flex; align-items: center; gap: 3px; padding: 5px; border-radius: 16px; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .1), 0 0 0 1px rgba(0, 0, 0, .05); transform: translateX(-50%); white-space: nowrap; }
.demo--tools .t-tb b { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #6b6d7b; }
.demo--tools .t-tb b.on { background: rgba(232, 115, 74, .12); color: #e8734a; }
.demo--tools .t-tb u { width: 16px; height: 16px; margin: 0 3px; border-radius: 50%; }
.demo--tools .t-tb u.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor; color: #6366f1; }
.demo--tools .t-sep { width: 1px; height: 20px; margin: 0 5px; background: rgba(0, 0, 0, .1); }

/* ══════════════ ВСЁ В ОДНОМ: сервисы сходятся в платформу ══════════════ */
/* Сцена проигрывается сама, когда раздел появился на экране: home.js плавно ведёт --p от 0 до 1
   (раньше --p шёл от прокрутки и раздел приходилось долго листать) */
.conv { position: relative; --p: 0; }
.conv__sticky { position: relative; height: 100vh; max-height: 860px; min-height: 620px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 90px clamp(18px, 4vw, 40px) 40px; }
.conv__head { position: relative; z-index: 3; text-align: center; max-width: 860px; }
.conv__strike { position: relative; white-space: nowrap; }
.conv__strike::after { content: ''; position: absolute; left: -2%; right: -2%; top: 54%; height: .09em; border-radius: .05em; background: var(--tutor); transform-origin: left; transform: scaleX(clamp(0, (var(--p) - .52) * 6, 1)); }
.conv__after { margin: 18px auto 0; max-width: 560px; font-size: clamp(16.5px, 1.6vw, 19px); line-height: 1.55; color: var(--text-secondary); opacity: clamp(0, (var(--p) - .58) * 5, 1); transform: translateY(calc((1 - clamp(0, (var(--p) - .58) * 5, 1)) * 14px)); }
.conv__after b { color: var(--ink); }
.conv__field { position: relative; width: min(1100px, 100%); flex: 1; min-height: 300px; max-height: 480px; container-type: size; }
.conv__chip {
  --k: clamp(0, (var(--p) - .1 - var(--d)) / .45, 1);
  --e: calc(var(--k) * var(--k) * (3 - 2 * var(--k)));
  position: absolute; left: 50%; top: 50%; z-index: 1;
  transform: translate(-50%, -50%) translate(calc(var(--x) * var(--xs, 1) * 1cqw * (1 - var(--e))), calc(var(--y) * 1cqh * (1 - var(--e)))) rotate(calc(var(--r) * 1deg * (1 - var(--e)))) scale(calc(1 - .6 * var(--e)));
  opacity: calc(1 - clamp(0, (var(--e) - .72) * 3.6, 1));
}
.conv__chip > span { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px 10px 10px; border-radius: 14px; background: #fff; border: 1px solid rgba(26, 26, 31, .07); box-shadow: 0 10px 30px -12px rgba(26, 26, 31, .22), 0 1px 2px rgba(0, 0, 0, .04); font-size: 14.5px; font-weight: 600; white-space: nowrap; animation: floaty 6s ease-in-out infinite; animation-delay: calc(var(--d) * -30s); }
.conv__chip i { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--c, rgba(26, 26, 31, .06)); color: var(--ct, var(--ink)); flex-shrink: 0; }
.conv__chip i svg { width: 16px; height: 16px; }
.conv__chip--more > span { background: transparent; border-style: dashed; border-color: rgba(26, 26, 31, .2); box-shadow: none; color: var(--text-secondary); padding: 10px 16px; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.conv__core {
  --g: clamp(0, (var(--p) - .5) / .25, 1);
  position: absolute; left: 50%; top: 50%; z-index: 2;
  transform: translate(-50%, -50%) scale(calc(.86 + .22 * var(--g)));
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.conv__logo { position: relative; width: 104px; height: 104px; border-radius: 30px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 30px 60px -20px rgba(232, 115, 74, calc(.25 + .4 * var(--g))), 0 0 0 1px rgba(26, 26, 31, .06); }
.conv__logo img { width: 72px; height: 72px; border-radius: 20px; display: block; }
.conv__logo::before, .conv__logo::after { content: ''; position: absolute; inset: -14px; border-radius: 40px; border: 2px solid rgba(232, 115, 74, .35); opacity: var(--g); animation: ringPulse 2.6s ease-out infinite; }
.conv__logo::after { animation-delay: 1.3s; }
@keyframes ringPulse { 0% { transform: scale(.9); opacity: calc(var(--g) * .9); } 100% { transform: scale(1.5); opacity: 0; } }
.conv__name { font-size: 15px; font-weight: 700; letter-spacing: -.01em; opacity: calc(.4 + .6 * var(--g)); }
.conv__caps { position: absolute; z-index: 3; left: 0; right: 0; top: calc(50% + 92px); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 760px; margin: 0 auto; list-style: none; }
.conv__caps li { --q: clamp(0, (var(--p) - .66 - var(--i) * .025) * 9, 1); display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .8); border: 1px solid rgba(26, 26, 31, .07); font-size: 14px; font-weight: 600; opacity: var(--q); transform: translateY(calc((1 - var(--q)) * 16px)) scale(calc(.9 + .1 * var(--q))); }
.conv__caps li svg { color: var(--parent-t); }

/* ══════════════ ПРОБЛЕМА: цифры и «было → стало» ══════════════ */
.pain { padding: clamp(80px, 10vw, 140px) 0 clamp(70px, 8vw, 110px); position: relative; }
.pain__head { max-width: 780px; }
.stats { margin-top: clamp(36px, 5vw, 56px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.stat { padding: clamp(24px, 3vw, 34px); border-radius: 24px; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-xs); overflow: hidden; }
.stat__num { font-family: var(--font-mono); font-size: clamp(46px, 6vw, 72px); font-weight: 600; letter-spacing: -.05em; line-height: 1; color: var(--ink); white-space: nowrap; }
.stat__num small { font-family: var(--font-sans); font-size: .42em; letter-spacing: -.01em; margin-right: .18em; color: var(--text-secondary); font-weight: 600; }
.stat__num small.stat__suf { margin: 0 0 0 .14em; }
.stat__num--danger { color: var(--danger); }
.stat p { margin-top: 14px; font-size: 15.5px; line-height: 1.55; color: var(--text-secondary); }
.stat__bar { margin-top: 20px; height: 6px; border-radius: 6px; background: rgba(26, 26, 31, .06); overflow: hidden; }
.stat__bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #f59e6c, var(--danger)); transform-origin: left; transform: scaleX(0); transition: transform 1.4s var(--ease-out) .3s; }
.stats.is-visible .stat__bar i, .no-js-bar .stat__bar i { transform: scaleX(1); }

.ba { margin-top: clamp(56px, 7vw, 90px); border-radius: 30px; background: #fff; border: 1px solid var(--border); box-shadow: 0 40px 80px -40px rgba(26, 26, 31, .2); overflow: hidden; }
.ba__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: clamp(22px, 3vw, 32px) clamp(20px, 3vw, 36px); border-bottom: 1px solid var(--border-divider); }
.ba__head h3 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; letter-spacing: -.03em; }
.ba__switch { position: relative; display: none; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 14px; background: rgba(26, 26, 31, .06); }
.ba.is-live .ba__switch { display: grid; }
.ba__switch button { position: relative; z-index: 1; height: 40px; padding: 0 16px; border: 0; background: none; border-radius: 10px; font: 600 14px var(--font-sans); color: var(--text-secondary); cursor: pointer; white-space: nowrap; transition: color .3s; }
.ba__switch button[aria-pressed="true"] { color: var(--ink); }
.ba__switch i { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 10px; background: #fff; box-shadow: var(--shadow-sm); transition: transform .5s var(--ease-spring); }
.ba.is-after .ba__switch i { transform: translateX(100%); }
.ba__rows { list-style: none; padding: clamp(16px, 2.4vw, 26px) clamp(16px, 3vw, 36px); display: grid; gap: 10px; }
.ba__flip { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
.ba__cell { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 14px 18px; border-radius: 16px; font-size: 16px; line-height: 1.4; }
.ba__cell i { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.ba__cell--bad { background: rgba(220, 38, 38, .05); color: var(--text-secondary); }
.ba__cell--bad i { background: var(--danger-soft); color: var(--danger); }
.ba__cell--good { background: rgba(16, 185, 129, .08); color: var(--ink); font-weight: 600; }
.ba__cell--good i { background: rgba(16, 185, 129, .16); color: var(--parent-t); }
.ba__arrow { color: var(--tutor); display: inline-flex; }
/* Режим «переворот» (включает JS) */
.ba.is-live .ba__row { perspective: 1000px; }
.ba.is-live .ba__flip { grid-template-columns: 1fr; gap: 0; transform-style: preserve-3d; transition: transform .9s var(--ease-spring); transition-delay: calc(var(--i) * .1s); }
.ba.is-live .ba__cell { grid-area: 1 / 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.ba.is-live .ba__cell--good { transform: rotateX(180deg); }
.ba.is-live .ba__arrow { display: none; }
.ba.is-live.is-after .ba__flip { transform: rotateX(180deg); }
/* После переворота — «было → стало» рядом (класс .is-both ставит home.js) */
.ba.no-anim .ba__flip { transition: none !important; }
.ba.is-live.is-both .ba__flip { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; transform: none; transition: none; }
.ba.is-live.is-both .ba__cell { grid-area: auto; }
.ba.is-live.is-both .ba__cell--good { transform: none; animation: baGood .6s var(--ease-out) both; }
.ba.is-live.is-both .ba__cell--bad { animation: baBad .6s var(--ease-out) both; animation-delay: calc(var(--i) * .07s); }
.ba.is-live.is-both .ba__arrow { display: inline-flex; animation: baBad .5s var(--ease-out) both; animation-delay: calc(.15s + var(--i) * .07s); }
@keyframes baGood { from { transform: translateX(-24px); } to { transform: none; } }
@keyframes baBad { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.ba__sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; padding: 22px clamp(16px, 3vw, 36px) 26px; background: var(--bg); border-top: 1px solid var(--border-divider); text-align: center; font-size: 15.5px; color: var(--text-secondary); }
.ba__sum b { font-family: var(--font-mono); font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; letter-spacing: -.03em; color: var(--parent-t); }
.ba__sum small { flex-basis: 100%; font-size: 12.5px; color: var(--text-muted); }
.ba__sum b small { flex-basis: auto; font-family: var(--font-sans); font-size: .62em; font-weight: 700; color: inherit; }

/* ══════════════ СЦЕНАРИЙ НА ТРОИХ ══════════════ */
.scn { padding: clamp(80px, 10vw, 140px) 0 clamp(60px, 8vw, 110px); background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .7) 18%, rgba(255, 255, 255, .7) 82%, transparent); scroll-margin-top: 20px; }

.scn__grid { margin-top: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 90px); align-items: start; }
.scn__visual { position: sticky; top: calc(50vh - 330px); display: flex; justify-content: center; }
.scn__steps { position: relative; list-style: none; padding: 6vh 0 30vh 0; --sp: 0; }
.scn__steps::before, .scn__steps::after { content: ''; position: absolute; left: 23px; top: calc(6vh + 24px); width: 2px; height: var(--len, 0px); border-radius: 2px; }
.scn__steps::before { background: rgba(26, 26, 31, .08); }
.scn__steps::after { background: linear-gradient(var(--tutor), var(--student), var(--parent)); transform-origin: top; transform: scaleY(var(--sp)); transition: transform .6s var(--ease-out); }
.scn__step { position: relative; z-index: 1; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 20px; min-height: 30vh; padding: 0 0 24px; cursor: pointer; transition: opacity .5s ease; }
.reveal-ready .scn__step { opacity: .38; }
.reveal-ready .scn__step.is-active { opacity: 1; }
.scn__n { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 600 17px var(--font-mono); color: var(--rc); background: #fff; border: 2px solid color-mix(in srgb, var(--rc) 30%, transparent); transition: all .45s var(--ease-spring); }
.scn__step.is-active .scn__n { background: var(--rc); color: #fff; border-color: var(--rc); transform: scale(1.08); box-shadow: 0 10px 24px -8px var(--rc); }
.scn__step h3 { margin-top: 8px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.scn__step p { margin-top: 10px; max-width: 440px; font-size: 16.5px; line-height: 1.6; color: var(--text-secondary); }
.scn__who { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--rt, var(--rc)); background: color-mix(in srgb, var(--rc) 12%, transparent); }
.scn__who::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--rc); }
.scn__step[data-role="tutor"] { --rc: var(--tutor); --rt: var(--tutor-t); }
.scn__step[data-role="student"] { --rc: var(--student); --rt: var(--student-t); }
.scn__step[data-role="parent"] { --rc: var(--parent); --rt: var(--parent-t); }
.scn__step[data-role="all"] { --rc: #7a7c8a; --rt: #5c5e6b; }
.reveal-ready .scn[data-filter="tutor"] .scn__step:not([data-role="tutor"]):not([data-role="all"]),
.reveal-ready .scn[data-filter="student"] .scn__step:not([data-role="student"]):not([data-role="all"]),
.reveal-ready .scn[data-filter="parent"] .scn__step:not([data-role="parent"]):not([data-role="all"]) { opacity: .14; filter: grayscale(1); }

/* — Телефон — */
.phone3 { position: relative; width: 322px; height: 660px; flex-shrink: 0; border-radius: 54px; padding: 11px; background: linear-gradient(145deg, #2c2c35, #0f0f14 40%, #1d1d24); box-shadow: 0 60px 110px -40px rgba(26, 26, 31, .55), 0 30px 50px -30px rgba(232, 115, 74, .35), inset 0 0 0 1.5px rgba(255, 255, 255, .08); }
.phone3::before { content: ''; position: absolute; inset: -40px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(232, 115, 74, .22), rgba(99, 102, 241, .12) 60%, transparent); filter: blur(10px); }
.phone3__screen { position: relative; width: 100%; height: 100%; border-radius: 44px; overflow: hidden; background: #efe9df; font-family: var(--font-sans); color: var(--ink); text-align: left; }
.phone3__island { position: absolute; z-index: 30; top: 11px; left: 50%; width: 98px; height: 29px; margin-left: -49px; border-radius: 20px; background: #050507; }
.phone3__status { position: absolute; z-index: 29; top: 0; left: 0; right: 0; height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 4px 30px 0 34px; font-size: 14px; font-weight: 600; pointer-events: none; }
.phone3__status > span:first-child { transition: opacity .3s ease; }
.phone3__screen:has(.scr--lock.is-on) .phone3__status > span:first-child { opacity: 0; }
.phone3__status span:last-child { display: inline-flex; gap: 5px; align-items: center; }
.scr { position: absolute; inset: 0; display: flex; flex-direction: column; padding-top: 50px; opacity: 0; transform: translateY(14px) scale(.97); transition: opacity .45s ease, transform .6s var(--ease-out); pointer-events: none; }
.scr.is-on { opacity: 1; transform: none; }
.ph-head { display: flex; align-items: center; gap: 10px; padding: 6px 14px 10px; background: rgba(255, 255, 255, .92); border-bottom: 1px solid rgba(0, 0, 0, .06); }
.ph-av { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; color: #fff; font-size: 13px; font-weight: 700; }
.ph-av img { width: 100%; height: 100%; display: block; }
.ph-av--t { background: linear-gradient(135deg, #f39a76, #e8734a); }
.ph-av--s { background: linear-gradient(135deg, #8b8df5, #6366f1); }
.ph-name { font-size: 14.5px; font-weight: 700; line-height: 1.2; }
.ph-sub { font-size: 12px; color: var(--text-muted); }
.ph-sub--on { color: var(--parent-t); }
.ph-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 14px 12px; overflow: hidden; background-color: #efe9df; background-image: radial-gradient(rgba(26, 26, 31, .05) 1px, transparent 1px); background-size: 16px 16px; }
.msg { max-width: 86%; padding: 9px 12px; border-radius: 16px 16px 16px 5px; background: #fff; font-size: 13.5px; line-height: 1.42; box-shadow: 0 1px 1px rgba(0, 0, 0, .06); }
.msg b { font-weight: 700; }
.msg--out { align-self: flex-end; border-radius: 16px 16px 5px 16px; background: linear-gradient(135deg, #ef8158, #e8734a); color: #fff; }
.sys { align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(16, 185, 129, .14); color: var(--parent-t); font-size: 12.5px; font-weight: 700; }
.scr.is-on .pop { animation: popIn .55s var(--ease-spring) both; animation-delay: var(--d, 0s); }
@keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
.tap { position: relative; }
.tap::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(26, 26, 31, .22); opacity: 0; pointer-events: none; }
.scr.is-on .tap::after { animation: tapRing .6s ease-out both; animation-delay: var(--t, 1s); }
@keyframes tapRing { 0% { opacity: .9; transform: scale(.2); } 100% { opacity: 0; transform: scale(1.6); } }

/* Мини-приложение поверх чата: всплывает шторкой, как в мессенджере.
   Без анимации (reduced motion) шторка стоит открытой — это главный кадр шага. */
.ma { position: absolute; left: 0; right: 0; bottom: 0; top: 62px; z-index: 5; display: flex; flex-direction: column; border-radius: 22px 22px 0 0; background: #f6f5f1; box-shadow: 0 -18px 40px -12px rgba(26, 26, 31, .35); overflow: hidden; }
.scr.is-on .ma { animation: maUp .5s var(--ease-out) var(--in, 1s) both, maDown .45s ease-in var(--out, 99s) forwards; }
@keyframes maUp { from { transform: translateY(105%); } to { transform: none; } }
@keyframes maDown { from { transform: none; } to { transform: translateY(105%); } }
.ma__bar { flex: none; display: grid; grid-template-columns: 26px 1fr 26px; align-items: center; height: 44px; padding: 0 12px; background: #fff; border-bottom: 1px solid rgba(0, 0, 0, .06); font-size: 14px; }
.ma__bar span { font-size: 15px; color: var(--text-secondary); }
.ma__bar b { text-align: center; font-weight: 700; white-space: nowrap; }
/* Кнопки под сообщением бота */
.bot { align-self: stretch; display: flex; flex-direction: column; gap: 4px; }
.bot .msg { max-width: none; }
.kb { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.kb span { display: flex; align-items: center; justify-content: center; height: 34px; padding: 0 4px; border-radius: 10px; background: rgba(255, 255, 255, .75); font-size: 11.5px; font-weight: 700; color: #1d8fcf; white-space: nowrap; box-shadow: 0 1px 1px rgba(0, 0, 0, .05); }
.tap2::before { content: ''; position: absolute; left: 50%; top: 50%; z-index: 2; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(26, 26, 31, .22); opacity: 0; pointer-events: none; }
.scr.is-on .tap2::before { animation: tapRing .6s ease-out both; animation-delay: var(--t2, 2s); }

/* экран 1 — приглашение */
.lnk { max-width: 90%; border-radius: 16px 16px 16px 5px; background: #fff; overflow: hidden; box-shadow: 0 1px 1px rgba(0, 0, 0, .06); }
.lnk__top { display: flex; align-items: center; gap: 10px; padding: 12px 12px 0; }
.lnk__top img { width: 34px; height: 34px; border-radius: 10px; display: block; }
.lnk__top b { display: block; font-size: 13.5px; }
.lnk__top span { display: block; font: 11.5px var(--font-mono); color: var(--telegram); }
.lnk p { padding: 8px 12px 12px; font-size: 13px; line-height: 1.4; color: var(--text-secondary); }
.lnk__btn { display: flex; align-items: center; justify-content: center; height: 40px; border-top: 1px solid rgba(0, 0, 0, .06); font-size: 14px; font-weight: 700; color: var(--telegram); }
.inv { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 16px; text-align: center; }
.inv__av { width: 56px; height: 56px; font-size: 18px; }
.inv__t { margin-top: 4px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.inv__s { margin-bottom: 8px; padding: 3px 10px; border-radius: 999px; background: rgba(232, 115, 74, .12); color: var(--tutor-t); font-size: 12px; font-weight: 700; }
.inv__btn { align-self: stretch; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border-radius: 13px; background: #fff; border: 1px solid rgba(26, 26, 31, .08); font-size: 13.5px; font-weight: 700; }
.inv__btn i { width: 26px; height: 26px; display: inline-flex; flex-shrink: 0; }
.inv__btn i svg { width: 100%; height: 100%; }
.inv__web { margin: 2px 0 4px; font-size: 13px; font-weight: 700; color: var(--text-secondary); }
/* экран 2 — запись в мини-приложении */
.scr--app { background: #f6f5f1; }
.bk { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }
.bk__l { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 13px; font-weight: 700; }
.bk__l span { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: #fff; font: 600 11px var(--font-mono); }
.bk__days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.bk__days span { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 0 7px; border-radius: 12px; background: #fff; border: 1.5px solid rgba(26, 26, 31, .08); }
.bk__days em { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--text-muted); }
.bk__days b { font: 600 17px var(--font-mono); }
.bk__days s { font-size: 10.5px; color: var(--text-secondary); text-decoration: none; }
.bk__times { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bk__times span { text-align: center; padding: 10px 0; border-radius: 10px; background: #fff; border: 1.5px solid rgba(26, 26, 31, .08); font: 600 13.5px var(--font-mono); }
.scr.is-on .bk-pick, .scr.is-on .bk-pick em, .scr.is-on .bk-pick s { animation: pick .35s ease forwards; animation-delay: var(--t, 1s); }
.scr.is-on .bk-pick em, .scr.is-on .bk-pick s { animation-name: pickTx; }
@keyframes pick { to { background: var(--tutor); border-color: var(--tutor); color: #fff; box-shadow: 0 6px 14px -4px rgba(232, 115, 74, .6); } }
@keyframes pickTx { to { color: #fff; } }
.bk__sum { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bk__sum div { padding: 9px 11px; border-radius: 12px; background: #fff; }
.bk__sum s { display: block; font-size: 11.5px; color: var(--text-secondary); text-decoration: none; }
.bk__sum b { font: 600 14px var(--font-mono); }
.bk__go { margin-top: 6px; display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 13px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 8px 18px -8px rgba(232, 115, 74, .7); }
.bk__ok { position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 16px 14px; border-radius: 20px; background: #fff; box-shadow: 0 20px 40px -16px rgba(26, 26, 31, .35); text-align: center; }
.bk__ring { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(232, 115, 74, .12); color: var(--accent); }
.bk__ok b { margin-top: 4px; font-size: 16px; font-weight: 700; }
.bk__ok p { font-size: 12.5px; line-height: 1.4; color: var(--text-secondary); }
/* Уведомление мессенджера сверху экрана */
.ban { position: absolute; left: 8px; right: 8px; top: 44px; z-index: 6; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; padding: 10px 11px; border-radius: 18px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 14px 30px -10px rgba(26, 26, 31, .35); }
.ban .note__ic { width: 30px; height: 30px; }
.ban b { display: block; font-size: 12px; font-weight: 700; }
.ban p { margin-top: 1px; font-size: 12.5px; line-height: 1.35; }
.scr.is-on .ban { animation: banIn .6s var(--ease-spring) var(--d, 3s) both; }
@keyframes banIn { from { opacity: 0; transform: translateY(-120%); } to { opacity: 1; transform: none; } }
/* экран 3 — напоминания на заблокированном экране */
.scr--lock { background: linear-gradient(165deg, #fbd9c7 0%, #eadcf5 52%, #cfe9df 100%); }
.lock__time { margin-top: 8px; text-align: center; font-size: 56px; font-weight: 600; letter-spacing: -.04em; line-height: 1; color: rgba(26, 26, 31, .82); }
.lock__date { margin-top: 6px; text-align: center; font-size: 14.5px; font-weight: 600; color: rgba(26, 26, 31, .6); }
.notes { margin-top: 14px; padding: 0 10px; display: flex; flex-direction: column; gap: 8px; }
.note { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 9px; align-items: start; padding: 10px 11px; border-radius: 18px; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 6px 16px -8px rgba(26, 26, 31, .25); }
.note__ic { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.note__ic--logo { background: none; border-radius: 0; }
.note__ic--logo svg { width: 100%; height: 100%; }
.note b { display: block; font-size: 12px; font-weight: 700; }
.note p { font-size: 12.5px; line-height: 1.35; margin-top: 1px; }
.note em { font-size: 11px; color: var(--text-muted); }
.note--alt { background: rgba(255, 255, 255, .5); }
.note__to { align-self: center; margin-top: 2px; padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, .5); font-size: 11.5px; font-weight: 700; color: rgba(26, 26, 31, .62); }
.chans { position: absolute; left: 10px; right: 10px; bottom: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; font-size: 11.5px; font-weight: 700; color: rgba(26, 26, 31, .66); }
.chans span { display: inline-flex; align-items: center; gap: 5px; }
.chans i { width: 18px; height: 18px; display: inline-flex; }
.chans i svg { width: 100%; height: 100%; }
.chans__web { border-radius: 5px; background: var(--accent); color: #fff; padding: 2px; }
/* экран 4 — отмена по правилам */
.cx { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.cx__t { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.cx__s { margin-top: -6px; font: 12.5px var(--font-mono); color: var(--text-secondary); }
.cx__rs { display: flex; flex-wrap: wrap; gap: 6px; }
.cx__rs span { padding: 7px 11px; border-radius: 999px; background: #fff; border: 1.5px solid rgba(26, 26, 31, .08); font-size: 12.5px; font-weight: 600; }
.scr.is-on .rs-pick { animation: pickInk .35s ease forwards; animation-delay: var(--t, 1s); }
@keyframes pickInk { to { background: var(--ink); border-color: var(--ink); color: #fff; } }
.rule { display: grid; grid-template-columns: 20px 1fr; gap: 8px; padding: 10px 11px; border-radius: 12px; background: rgba(245, 158, 11, .13); color: #8a5a06; font-size: 12.5px; line-height: 1.45; }
.rule svg { margin-top: 1px; }
.cx__note { display: grid; grid-template-columns: 20px 1fr; gap: 8px; padding: 10px 11px; border-radius: 12px; background: rgba(26, 26, 31, .05); color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
.cx__note svg { margin-top: 1px; }
.cx .sys { margin-top: 2px; }
.sheet__btns { display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px; }
.sheet__btns span { display: flex; align-items: center; justify-content: center; height: 42px; border-radius: 12px; font-size: 13.5px; font-weight: 700; }
.sheet__keep { background: rgba(26, 26, 31, .06); color: var(--ink); }
.sheet__go { background: var(--danger); color: #fff; }
/* экран 5 — занятие: звонок прямо в доске */
.scr--lesson { background: #fdfcfa; }
.lesson__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px 8px; }
.lesson__pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 12px; background: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .08), 0 0 0 1px rgba(0, 0, 0, .05); font-size: 12px; font-weight: 700; color: var(--parent-t); }
.lesson__pill b { width: 22px; height: 22px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-secondary); }
.lesson__pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--parent); }
.live { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .08), 0 0 0 1px rgba(0, 0, 0, .05); color: var(--text-secondary); font: 600 11.5px var(--font-mono); }
.live i { width: 7px; height: 7px; border-radius: 50%; background: #e5484d; animation: dmBlink 1.4s infinite; }
.lesson__vids { display: grid; grid-template-columns: 1.6fr 1fr; gap: 8px; padding: 0 12px; align-items: end; }
.vid { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; border: 2px solid #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .12); display: flex; align-items: center; justify-content: center; }
.vid span { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700; }
.vid em { position: absolute; left: 8px; bottom: 5px; font-size: 11px; color: rgba(255, 255, 255, .85); }
.vid--a { background: linear-gradient(150deg, #3a2c28, #2a2326); }
.vid--a span { width: 28px; height: 28px; font-size: 11px; background: linear-gradient(135deg, #f39a76, #e8734a); box-shadow: 0 0 0 3px rgba(232, 115, 74, .45), 0 0 14px 3px rgba(232, 115, 74, .5); }
.vid--b { background: linear-gradient(150deg, #2b2c45, #24243a); }
.vid--b span { background: linear-gradient(135deg, #8b8df5, #6366f1); }
.board { position: relative; flex: 1; margin: 10px 12px 12px; border-radius: 16px; border: 1px solid rgba(0, 0, 0, .06); background-color: #fdfcfa; background-image: linear-gradient(rgba(99, 102, 241, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 102, 241, .07) 1px, transparent 1px); background-size: 18px 18px; overflow: hidden; }
.board svg { position: absolute; left: 6px; top: 12px; width: 260px; height: 210px; }
.board__ax { stroke: var(--ink); stroke-width: 1.8; fill: none; stroke-linecap: round; }
.board__curve { stroke: var(--student); stroke-width: 4; fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.scr.is-on .board__curve { animation: drawCurve 1.8s cubic-bezier(.6, 0, .3, 1) .5s both; }
@keyframes drawCurve { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.board__f { position: absolute; right: 14px; top: 14px; font: 500 15px var(--font-sans); color: var(--student-t); white-space: nowrap; }
.board__roots { position: absolute; left: 22px; top: 232px; font: 500 16px var(--font-sans); color: var(--tutor-t); white-space: nowrap; }
.scr.is-on .board__roots { animation: fadeInUp .5s ease 2.2s both; }
.board__note { position: absolute; right: 12px; top: 226px; width: 100px; padding: 9px 10px; border-radius: 6px; background: #fde9df; box-shadow: 0 8px 16px rgba(194, 96, 58, .14); font-size: 12.5px; line-height: 1.3; font-weight: 600; color: #7a3a1f; }
.board__tb { position: absolute; left: 50%; bottom: 10px; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 13px; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .1), 0 0 0 1px rgba(0, 0, 0, .05); transform: translateX(-50%); }
.board__tb b { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.board__tb b.on { background: rgba(232, 115, 74, .12); color: var(--accent); }
.board__tb u { width: 14px; height: 14px; margin: 0 3px; border-radius: 50%; }
.board__tb u.on { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #6366f1; }
/* экран 6 — оплата */
.ma .bill { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 14px; }
.bill__row, .bill__sum { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.bill__row { padding: 8px 0; color: var(--text-secondary); border-bottom: 1px dashed rgba(26, 26, 31, .1); }
.bill__row b, .bill__sum b { font-family: var(--font-mono); color: var(--ink); white-space: nowrap; }
.bill__row b { font-family: var(--font-sans); }
.bill__sum { align-items: baseline; padding: 4px 0 8px; font-weight: 700; font-size: 14px; }
.bill__sum b { font-size: 24px; letter-spacing: -.03em; }
.bill__h { margin-top: 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.bill__bank { margin: 6px 0 2px; display: flex; align-items: center; justify-content: center; gap: 7px; height: 38px; border-radius: 11px; background: #fff; border: 1px solid rgba(26, 26, 31, .08); font-size: 13px; font-weight: 700; }
.bill__chk { align-self: flex-start; margin-top: 10px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 10px; background: rgba(16, 185, 129, .12); color: var(--parent-t); font-size: 12.5px; font-weight: 700; }
.bill__btn { position: relative; margin-top: 10px; display: grid; height: 44px; border-radius: 13px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 8px 18px -8px rgba(232, 115, 74, .7); }
.bill__btn > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 6px; }
.bill__ok { opacity: 0; }
.scr.is-on .bill__pay { animation: fadeOut .2s ease forwards; animation-delay: calc(var(--t, 1s) + .2s); }
.scr.is-on .bill__ok { animation: fadeInUp .35s ease forwards; animation-delay: calc(var(--t, 1s) + .3s); }
@keyframes fadeOut { to { opacity: 0; transform: translateY(-8px); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bill__st { align-self: center; margin-top: 10px; padding: 5px 12px; border-radius: 999px; background: rgba(245, 158, 11, .15); color: #92600a; font-size: 12px; font-weight: 700; }
/* экран 7 — родитель видит */
.scr--parent { background: #f6f5f1; }
.par { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; }
.par__head { display: flex; align-items: center; gap: 10px; padding: 4px 2px 6px; }
.par__head b { display: block; font-size: 16px; font-weight: 700; }
.par__head span:not(.ph-av) { font-size: 12.5px; color: var(--text-muted); }
.pc { padding: 12px 13px; border-radius: 16px; background: #fff; border: 1px solid rgba(0, 0, 0, .05); }
.pc__t { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); }
.pc__t em { padding: 2px 8px; border-radius: 999px; background: rgba(16, 185, 129, .13); color: var(--parent-t); font-size: 11px; letter-spacing: 0; text-transform: none; }
.pc__sch { margin-top: 8px; display: flex; gap: 6px; }
.pc__sch span { flex: 1; padding: 8px 10px; border-radius: 10px; background: rgba(232, 115, 74, .1); border-left: 3px solid var(--tutor); font: 600 13px var(--font-mono); }
.pc__sch b { font-family: var(--font-sans); margin-right: 4px; }
.pc p { margin-top: 7px; font-size: 13px; line-height: 1.45; }
.pc__l { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.pc__hw { margin-top: 8px; display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; border-radius: 10px; background: var(--bg); font-size: 12.5px; font-weight: 600; }
.pc__hw em { color: var(--parent-t); font-size: 12px; }
.pc__tag { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 10px 4px 8px; border-radius: 999px; background: rgba(245, 158, 11, .15); color: #7c5205; font-size: 12px; font-weight: 700; }
.pc__kpi { margin-top: 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pc__kpi div { padding: 8px 9px; border-radius: 10px; background: var(--bg); }
.pc__kpi b { display: block; font: 600 17px var(--font-mono); letter-spacing: -.02em; }
.pc__kpi s { display: block; font-size: 10.5px; color: var(--text-secondary); text-decoration: none; }
.pc--pay { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--text-secondary); }
.pc--pay b { color: var(--parent-t); }

/* ══════════════ АДАПТИВ ══════════════ */
@media (max-width: 1100px) {
  .scn__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); }
  .phone3 { transform: scale(.9); transform-origin: top center; }
}
@media (max-width: 960px) {
  .stats { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  /* Демо — горизонтальная лента со снапом */
  .stage { perspective: none; padding-inline: 0; }
  .stage__row { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 7vw 18px; transform: none !important; scrollbar-width: none; }
  .stage__row::-webkit-scrollbar { display: none; }
  .demo-card { flex: 0 0 86vw; max-width: 440px; scroll-snap-align: center; }
  .stage__dots { display: flex; justify-content: center; gap: 8px; margin-top: 6px; }
  .stage__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(26, 26, 31, .18); transition: all .3s ease; }
  .stage__dots i.is-on { width: 22px; border-radius: 4px; background: var(--tutor); }

  /* Сценарий — телефон сверху, шаги лентой */
  .scn__grid { grid-template-columns: 1fr; gap: 20px; }
  .scn__visual { position: relative; top: 0; height: 540px; }
  .phone3 { transform: scale(.8); transform-origin: top center; }
  .scn__steps { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 7vw 12px; margin-inline: calc(-1 * clamp(18px, 4vw, 40px)); scrollbar-width: none; }
  .scn__steps::-webkit-scrollbar { display: none; }
  .scn__steps::before, .scn__steps::after { display: none; }
  .scn__step { flex: 0 0 82vw; max-width: 380px; min-height: 0; scroll-snap-align: center; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 18px; border-radius: 20px; background: #fff; border: 1px solid var(--border); opacity: .55; }
  .scn__n { width: 40px; height: 40px; font-size: 15px; }
  .scn__step h3 { margin-top: 4px; font-size: 21px; }
  .scn__step p { font-size: 15px; }

  .conv__field { max-height: 400px; }
  .conv__chip > span { font-size: 12.5px; padding: 7px 12px 7px 7px; gap: 7px; border-radius: 12px; }
  .conv__chip i { width: 22px; height: 22px; }
  .conv__chip i svg { width: 13px; height: 13px; }
  .conv__logo { width: 84px; height: 84px; border-radius: 24px; }
  .conv__logo img { width: 58px; height: 58px; border-radius: 16px; }
  .conv__chip--wide { display: none; }
  .conv__field { --xs: .86; }
  .conv__caps { top: calc(50% + 74px); }
}
@media (max-width: 640px) {
  .hero__title { letter-spacing: -.042em; }
  .hero__ctas { flex-direction: column; align-items: stretch; width: 100%; max-width: 360px; }
  .hero__ctas > * { width: 100%; }
  .hero__ctas .sb-wrap, .hero__ctas .sb-trigger, .hero__ctas .btn { width: 100%; justify-content: center; }
  .hero__chans-label { flex-basis: 100%; margin: 0 0 2px; }
  .ba__switch { width: 100%; }
  .ba__switch button { padding: 0 8px; font-size: 13px; }
  .ba__cell { font-size: 15px; min-height: 60px; padding: 12px 14px; }
  .ba.is-live.is-both .ba__flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .ba.is-live.is-both .ba__arrow { display: none; }
  .ba.is-live.is-both .ba__cell { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; font-size: 13.5px; }
  .ba.is-live.is-both .ba__cell i { width: 28px; height: 28px; border-radius: 8px; }
  .conv__caps { gap: 6px; padding: 0 4px; }
  .conv__caps li { font-size: 12.5px; padding: 6px 10px; gap: 5px; }
  .conv__caps li svg { width: 13px; height: 13px; }
}
@media (max-width: 380px) {
  .scn__visual { height: 490px; }
  .phone3 { transform: scale(.72); }
}

/* «Всё в одном» без JS — статичная раскладка вместо сцены */
html:not(.reveal-ready) .conv { height: auto; }
html:not(.reveal-ready) .conv__sticky { position: relative; height: auto; min-height: 0; padding-block: clamp(70px, 9vw, 120px); }
html:not(.reveal-ready) .conv__after { opacity: 1; transform: none; }
html:not(.reveal-ready) .conv__field { container-type: normal; flex: none; height: auto; min-height: 0; max-height: none; margin-top: 36px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 900px; }
html:not(.reveal-ready) .conv__core { position: static; transform: none; width: 100%; margin-bottom: 14px; }
html:not(.reveal-ready) .conv__core .conv__logo::before, html:not(.reveal-ready) .conv__core .conv__logo::after { display: none; }
html:not(.reveal-ready) .conv__chip { position: static; transform: none; opacity: 1; }
html:not(.reveal-ready) .conv__chip > span { animation: none; }
html:not(.reveal-ready) .conv__chip--wide { display: block; }
html:not(.reveal-ready) .conv__caps { position: static; width: 100%; margin-top: 22px; }
html:not(.reveal-ready) .conv__caps li { opacity: 1; transform: none; }
html:not(.reveal-ready) .conv__strike::after { transform: none; }
html:not(.reveal-ready) .roles { display: none; }

/* Уважение к «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
  .conv { height: auto; }
  .conv__sticky { position: relative; height: auto; min-height: 0; padding-block: clamp(70px, 9vw, 120px); }
  .conv__after { opacity: 1; transform: none; }
  .conv__field { container-type: normal; flex: none; height: auto; min-height: 0; max-height: none; margin-top: 36px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 900px; }
  .conv__core { position: static; transform: none; width: 100%; margin-bottom: 14px; }
  .conv__core .conv__logo::before,   .conv__core .conv__logo::after { display: none; }
  .conv__chip { position: static; transform: none; opacity: 1; }
  .conv__chip > span { animation: none; }
  .conv__chip--wide { display: block; }
  .conv__caps { position: static; width: 100%; margin-top: 22px; }
  .conv__caps li { opacity: 1; transform: none; }
  .conv__strike::after { transform: none; }
  .stage__row { transform: none !important; }
  .ba.is-both .ba__cell, .ba.is-both .ba__arrow { animation: none !important; }
  .scr .pop, .scr .board__curve, .scr .ma, .scr .ban, .scr .bk-pick, .scr .bk-pick em, .scr .bk-pick s, .scr .rs-pick, .scr .bill__pay, .scr .bill__ok, .scr .board__roots { animation: none !important; }
}
/* ─── Финал главной: ссылки на разделы сайта вместо ещё одного призыва ─── */
.final__links { margin: 40px auto 0; max-width: 1000px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; text-align: left; }
.final__link { display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 22px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); color: #fff; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.final__link:hover { color: #fff; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .32); transform: translateY(-2px); }
.final__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.final__link-t { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.final__link-t svg { flex: none; color: var(--accent); transition: transform .2s ease; }
.final__link:hover .final__link-t svg { transform: translateX(3px); }
.final__link-d { font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .66); }
@media (max-width: 960px) { .final__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .final__links { grid-template-columns: 1fr; margin-top: 28px; } }
@media (prefers-reduced-motion: reduce) { .final__link, .final__link-t svg { transition: none; } .final__link:hover { transform: none; } }