/* 1. первый экран: живой редактор */
.vk-hero{min-height:100svh;padding-bottom:72px}
.vk-hero .ryad{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center;margin-top:28px}
.vk-hero h1{font-size:clamp(72px,7.4vw,120px)}
.vk-hero h1 .pre{display:block;font-size:.36em;line-height:1;margin-bottom:.12em;color:var(--bone);letter-spacing:0}
.vk-hero h1 small{display:block;font-size:.3em;line-height:1;margin-top:14px;color:var(--acid);letter-spacing:0}
.vk-hero .fakty{display:flex;gap:24px;flex-wrap:wrap;margin-top:30px;align-items:flex-end}
.vk-hero .fakty .chislo{font-size:clamp(60px,6vw,96px)}
.vk-hero .fakty p{font-size:16px;color:#cfcdc8;line-height:1.35}
.vk-hero .knopki{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.red{background:#0b0b0e;border:1px solid var(--line);border-radius:20px;overflow:hidden;font-size:15px;outline:1px solid rgba(108,75,255,.35);outline-offset:10px}
.red .vkl{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);color:var(--mute);font-size:13px}
.red .vkl i{width:10px;height:10px;border-radius:50%;background:rgba(237,235,230,.15)}
.red .vkl span{margin-left:12px;padding:5px 12px;border-radius:8px;background:rgba(237,235,230,.06);color:var(--bone)}
.red .zapros{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:flex-start;min-height:76px}
.red .zapros b{flex:none;font:700 12px var(--tekst);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--acid);border-radius:6px;padding:4px 8px;margin-top:2px}
.red .telo{display:grid;grid-template-columns:1.15fr 1fr;min-height:330px}
.kod{padding:16px 0;border-right:1px solid var(--line);font:500 15px/1.75 var(--tekst);font-variant-numeric:tabular-nums;white-space:pre;overflow:hidden}
.kod div{padding:0 16px 0 0;display:flex}
.kod div::before{content:attr(data-n);width:40px;flex:none;text-align:right;padding-right:14px;color:rgba(138,138,147,.5)}
.kod .t{color:#9d86ff}.kod .a{color:var(--mute)}.kod .s{color:var(--acid)}.kod .x{color:var(--bone)}
.kursor{display:inline-block;width:2px;height:1.1em;background:var(--acid);vertical-align:-3px;animation:mig 1s steps(1) infinite}
@keyframes mig{50%{opacity:0}}
.pred{padding:18px;background:var(--bone);color:var(--ink);display:flex;flex-direction:column;gap:10px}
.pred>*{opacity:0;transform:translateY(8px);transition:all .45s var(--ease)}
.pred>.est{opacity:1;transform:none}
.pred .adr{font-size:12px;color:#666;border:1px solid rgba(0,0,0,.12);border-radius:99px;padding:4px 10px;align-self:flex-start;opacity:1;transform:none}
.pred h4{font:800 30px/1 var(--zag)}
.pred .pole{border:1.5px solid rgba(0,0,0,.2);border-radius:10px;padding:10px 12px;font-size:14px;color:#777}
.pred .kn{background:var(--ink);color:var(--acid);border-radius:99px;padding:11px;text-align:center;font-weight:700;font-size:14px}
.pred .gotovo{font-size:13px;color:#333;display:flex;gap:8px;align-items:center}
@media (max-width:980px){.vk-hero .ryad{grid-template-columns:1fr}.red .telo{grid-template-columns:1fr}.kod{border-right:0;border-bottom:1px solid var(--line);font-size:13px;min-height:220px}.vk-hero h1{font-size:15.5vw}}

/* 2. лист ожидания: пять мест */
.mesta-b{display:grid;grid-template-columns:auto 1fr;gap:64px;align-items:center}
.mesta-b .schet{font:900 clamp(140px,20vw,320px)/.75 var(--zag);letter-spacing:-.03em}
.mesta-b .schet span{color:var(--mute);font-size:.5em}
.krugi{display:flex;gap:16px;margin:8px 0 28px;flex-wrap:wrap}
.krugi i{width:clamp(56px,7vw,104px);aspect-ratio:1;border-radius:50%;border:2.5px dashed rgba(237,235,230,.35);display:grid;place-items:center;font:800 28px var(--zag);color:var(--mute);font-style:normal;animation:dysh 3s var(--ease) infinite;animation-delay:calc(var(--i)*.25s)}
@keyframes dysh{50%{border-color:rgba(204,255,0,.8);transform:scale(1.04)}}
@media (max-width:760px){.mesta-b{grid-template-columns:1fr;gap:20px}.krugi{gap:10px}.krugi i{width:56px;font-size:22px}}

/* 3. для кого: большой переключатель */
.pereklyuch{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:44px}
.pereklyuch button{font:800 clamp(28px,3.4vw,52px)/1 var(--zag);color:var(--mute);min-height:56px;transition:color .3s}
.pereklyuch button[aria-pressed="true"]{color:var(--bone)}
.tumbler{width:96px;height:52px;border-radius:99px;background:rgba(237,235,230,.12);position:relative;flex:none}
.tumbler::after{content:"";position:absolute;top:6px;left:6px;width:40px;height:40px;border-radius:50%;background:var(--acid);transition:transform .45s var(--ease)}
.tumbler.pr::after{transform:translateX(44px);background:var(--bone)}
.dlya-t{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:start}
.dlya-t .bol{font:700 clamp(30px,3.2vw,48px)/1.08 var(--zag)}
.dlya-t ul{list-style:none;display:grid;gap:14px}
.dlya-t li{display:flex;gap:14px;align-items:flex-start;font-size:18px}
.dlya-t li svg{width:28px;flex:none;margin-top:3px}
.dlya-t.smena>*{animation:vv .5s var(--ease)}
@keyframes vv{from{opacity:0;transform:translateY(14px)}}
@media (max-width:860px){.dlya-t{grid-template-columns:1fr;gap:28px}.tumbler{order:-1}}

/* 4. программа: история коммитов */
.vetka{position:relative;display:grid;gap:0;padding-left:120px}
.vetka svg.liniya{position:absolute;left:0;top:0;width:110px;height:100%;overflow:visible}
.vetka .kom{position:relative;padding:34px 0;display:grid;grid-template-columns:150px 1fr;gap:28px;border-top:1px solid var(--line)}
.vetka .kom:last-child{border-bottom:1px solid var(--line)}
.vetka .kom .nom{font:600 13px var(--tekst);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding-top:10px}
.vetka .kom .nom b{display:block;font:900 64px/.9 var(--zag);color:var(--bone);letter-spacing:0;margin-top:6px}
.vetka .kom h3{font:800 clamp(34px,3.6vw,54px)/.95 var(--zag)}
.vetka .kom p{margin-top:12px;max-width:52ch;color:#cfcdc8}
.vetka .kom .izm{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.vetka .kom .izm span{font-size:13px;padding:5px 10px;border-radius:6px;background:rgba(204,255,0,.1);color:var(--acid)}
.vetka .kom.sliyanie h3{color:var(--acid)}
@media (max-width:760px){.vetka{padding-left:44px}.vetka svg.liniya{width:36px}.vetka .kom{grid-template-columns:1fr;gap:6px;padding:26px 0}.vetka .kom .nom b{font-size:44px;display:inline;margin-left:8px}}

/* 5. стек: слои расходятся */
.stek{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.sloi{position:relative;height:520px;perspective:1400px}
.sloy{position:absolute;left:50%;top:50%;width:min(420px,80vw);height:200px;margin:-100px 0 0 calc(min(420px,80vw)/-2);border-radius:24px;transform:rotateX(58deg) rotateZ(-38deg) translateZ(var(--z,0px));transition:transform 1s var(--ease);display:flex;align-items:flex-end;padding:22px;font:800 28px/1 var(--zag);border:1px solid var(--line)}
.sloy:nth-child(1){background:rgba(108,75,255,.55);--z0:-90px}
.sloy:nth-child(2){background:rgba(18,18,22,.95);--z0:0px}
.sloy:nth-child(3){background:var(--acid);color:var(--ink);--z0:90px}
.sloi .sloy{--z:calc(var(--z0)*.15)}
.sloi.raz .sloy{--z:calc(var(--z0)*1.6)}
.sloi:hover .sloy{--z:calc(var(--z0)*2)}
.stek dl{display:grid;gap:22px}
.stek dt{font:800 30px/1 var(--zag);display:flex;gap:12px;align-items:center}
.stek dt i{width:16px;height:16px;border-radius:5px;flex:none}
.stek dd{color:#cfcdc8;margin-top:6px;max-width:46ch}
@media (max-width:860px){.stek{grid-template-columns:1fr;gap:12px}.sloi{height:440px;margin-bottom:24px}.sloy{width:72vw;margin-left:-36vw;height:140px;margin-top:-70px;font-size:22px}.sloi.raz .sloy{--z:calc(var(--z0)*1.2)}}

/* 6. результат: проект выезжает в интернет */
.vykl{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:center}
.brauzer{border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#0b0b0e}
.brauzer .adr{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:14px;color:var(--mute)}
.brauzer .adr span{flex:1;padding:7px 14px;border-radius:99px;background:rgba(237,235,230,.06);color:var(--bone)}
.brauzer .ekr{padding:28px;display:grid;gap:18px}
.etapy-v{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.etapy-v div{height:10px;border-radius:5px;background:rgba(237,235,230,.1);overflow:hidden}
.etapy-v div i{display:block;height:100%;width:0;background:var(--acid);transition:width .9s var(--ease)}
.etapy-n{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;font-size:14px;color:var(--mute)}
.etapy-n span.on{color:var(--bone)}
.brauzer .proekt{border-radius:14px;background:var(--bone);color:var(--ink);padding:24px;display:grid;gap:10px;min-height:190px;align-content:start}
.brauzer .proekt b{font:800 34px/1 var(--zag)}
.brauzer .proekt .stroka{height:12px;border-radius:6px;background:rgba(8,8,10,.12)}
@media (max-width:860px){.vykl{grid-template-columns:1fr;gap:28px}}

/* 7. цена: деление и точки рынка */
.delenie{display:flex;align-items:center;gap:clamp(14px,2vw,32px);flex-wrap:wrap;font:900 clamp(56px,7vw,120px)/.9 var(--zag)}
.delenie .op{color:var(--mute);font-weight:700}
.delenie .rez{color:var(--acid)}
.delenie small{display:block;font:400 14px var(--tekst);color:var(--mute);margin-top:6px}
.tochki{position:relative;height:150px;margin-top:64px;border-top:1px solid rgba(237,235,230,.2)}
.tochki .t{position:absolute;top:-8px;width:16px;height:16px;border-radius:50%;margin-left:-8px;background:var(--viol)}
.tochki .t.my{background:var(--acid);width:24px;height:24px;top:-12px;margin-left:-12px;box-shadow:0 0 0 8px rgba(204,255,0,.15)}
.tochki .p{position:absolute;top:26px;font-size:14px;color:#cfcdc8;max-width:200px}
.tochki .p b{display:block;font:800 22px var(--zag);color:var(--bone)}
.tochki .os{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;font-size:12px;color:var(--mute)}
@media (max-width:760px){.tochki{height:250px}.tochki .p{max-width:110px;font-size:13px}.tochki .p.niz{top:120px}}

/* 8. открытый урок: шаги ставятся сами */
.urok{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.urok .lev{padding:36px;background:var(--viol);border-radius:var(--r);display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:420px}
.urok .lev .d3{max-width:12ch}
.urok ol{list-style:none;padding:12px 36px;border-radius:var(--r);background:var(--ink2);border:1px solid var(--line)}
.urok li{display:flex;gap:16px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line);font-size:18px;color:var(--mute);transition:color .4s}
.urok li:last-child{border-bottom:0}
.urok li svg{width:34px;flex:none}
.urok li svg path{stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset .6s var(--ease)}
.urok li.on{color:var(--bone)}.urok li.on svg path{stroke-dashoffset:0}
@media (max-width:860px){.urok{grid-template-columns:1fr}.urok .lev{min-height:0;padding:26px}.urok ol{padding:6px 22px}}

/* 9. вопросы: как список задач */
.zadachi{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:rgba(18,18,22,.8)}
.zadachi .sh{display:flex;gap:24px;padding:16px 24px;border-bottom:1px solid var(--line);font-size:14px;color:var(--mute)}
.zadachi .sh b{color:var(--bone)}
.zadachi details{border-bottom:1px solid var(--line)}
.zadachi details:last-child{border-bottom:0}
.zadachi summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:28px 1fr auto;gap:16px;align-items:center;padding:20px 24px;min-height:72px}
.zadachi summary::-webkit-details-marker{display:none}
.zadachi summary:hover{background:rgba(237,235,230,.03)}
.zadachi .st{width:20px;height:20px;border-radius:50%;border:2px solid var(--acid);position:relative}
.zadachi details[open] .st{background:var(--acid)}
.zadachi .zg{font-weight:600;font-size:19px}
.zadachi .zg small{display:block;font-weight:400;font-size:13px;color:var(--mute);margin-top:4px}
.zadachi .yarl{font-size:12px;padding:4px 10px;border-radius:99px;border:1px solid var(--line);color:var(--mute);white-space:nowrap}
.zadachi details p{padding:0 24px 24px 68px;color:#cfcdc8;max-width:70ch}
.zadachi .ramka{color:var(--acid)}
@media (max-width:760px){.zadachi .yarl{display:none}.zadachi summary{grid-template-columns:24px 1fr;padding:18px 16px}.zadachi details p{padding:0 16px 20px 56px}.zadachi .sh{padding:14px 16px}}

/* 10. заявка: командная строка */
.komanda{padding:120px 0 180px}
.komanda .stroka-k{display:flex;align-items:center;gap:18px;flex-wrap:wrap;font:900 clamp(56px,8.6vw,140px)/.9 var(--zag);text-transform:uppercase}
.komanda .stroka-k .pr{color:var(--acid)}
.komanda .knopki{display:flex;gap:14px;flex-wrap:wrap;margin-top:44px;align-items:center}
@media (max-width:760px){.komanda .stroka-k{font-size:15vw}}