/* 1. первый экран: заголовок ступенями + снимок лестницы */
.n-hero{min-height:100svh;padding-bottom:64px}
.n-hero .ryad{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-top:28px}
.n-hero h1{display:grid;gap:0;font-size:clamp(64px,6.8vw,112px)}
.n-hero h1 span{display:block}
.n-hero h1 span:nth-child(2){padding-left:.9em}
.n-hero h1 span:nth-child(3){padding-left:1.8em;color:var(--acid)}
.n-hero h1 .h1-pod{padding-left:0;margin-top:.3em;font:800 clamp(24px,2.3vw,36px)/1.05 var(--zag);text-transform:none;letter-spacing:0;color:var(--bone);max-width:24ch}
.n-hero .foto{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.n-hero .foto img{width:100%;height:auto;aspect-ratio:8/5;object-fit:cover}
.n-hero .foto .vy{position:absolute;left:58%;top:30%;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;transform:translateX(-100%);padding-right:22px}
.n-hero .foto .vy::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--acid);box-shadow:0 0 0 6px rgba(204,255,0,.25);position:absolute;right:0}
.n-hero .niz{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center;margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.n-hero .niz .cn{font:800 clamp(40px,4vw,64px)/.9 var(--zag)}
@media (max-width:900px){.n-hero .ryad{grid-template-columns:1fr}.n-hero h1{font-size:15vw}.n-hero h1 span:nth-child(3){padding-left:.9em}.n-hero h1 .h1-pod{font-size:24px}.n-hero .niz{grid-template-columns:1fr;gap:18px}}

/* 2. для кого: барабан с продолжением фразы */
.baraban{display:flex;align-items:baseline;gap:.25em;flex-wrap:wrap;font:800 clamp(44px,6vw,96px)/1 var(--zag)}
.baraban .okno{display:inline-block;height:1.1em;overflow:hidden;position:relative;vertical-align:bottom}
.baraban .lenta-b{display:flex;flex-direction:column;transition:transform .8s var(--ease)}
.baraban .lenta-b span{height:1.1em;line-height:1.1em;color:var(--acid);white-space:nowrap}
.baraban-niz{display:flex;gap:28px;flex-wrap:wrap;align-items:center;margin-top:36px}
.baraban-niz .tochki-b{display:flex;gap:8px}
.baraban-niz .tochki-b button{width:44px;height:44px;display:grid;place-items:center}
.baraban-niz .tochki-b button::after{content:"";width:10px;height:10px;border-radius:50%;background:rgba(237,235,230,.25);transition:background .3s,transform .3s}
.baraban-niz .tochki-b button[aria-current="true"]::after{background:var(--acid);transform:scale(1.4)}
@media (max-width:760px){.baraban{font-size:11vw}.baraban .lenta-b span{white-space:normal;height:2.2em;line-height:1.1em}.baraban .okno{height:2.2em;width:100%}}

/* 3. ступени: программа идёт вверх по диагонали */
.lestnica{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:0 18px;padding-top:20px}
.lestnica svg.put{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.st{position:relative;padding:22px 0 0;border-top:3px solid var(--acid);grid-row:1}
.st .nom{font:900 72px/.8 var(--zag);color:transparent;-webkit-text-stroke:1.5px rgba(237,235,230,.5)}
.st h3{font:800 clamp(24px,2.1vw,32px)/.95 var(--zag);margin-top:14px}
.st p{font-size:15px;color:#cfcdc8;margin-top:10px}
.st:nth-child(2){grid-column:1;margin-top:600px}
.st:nth-child(3){grid-column:2;margin-top:480px}
.st:nth-child(4){grid-column:3;margin-top:360px}
.st:nth-child(5){grid-column:4;margin-top:240px}
.st:nth-child(6){grid-column:5;margin-top:120px}
.st:nth-child(7){grid-column:6;margin-top:0}
.st.tut{border-top-color:var(--bone)}
.st.tut .nom{color:var(--acid);-webkit-text-stroke:0}
@media (max-width:960px){
 .lestnica{grid-template-columns:1fr;padding-left:40px}
 .lestnica .st{grid-row:auto;grid-column:1!important;margin-top:0!important;border-top:0;border-left:3px solid var(--acid);padding:20px 0 28px 22px}
 .lestnica .st:nth-child(n){order:0}
 .lestnica svg.put{display:none}
}

/* 4. тренажёр: собрать запрос */
.trenazher{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.trenazher .lev{padding:32px;display:flex;flex-direction:column;gap:22px}
.chasti{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chast{min-height:64px;border-radius:14px;border:1.5px dashed rgba(237,235,230,.3);padding:12px 16px;text-align:left;display:flex;flex-direction:column;gap:2px;transition:all .3s}
.chast b{font:800 22px/1 var(--zag)}
.chast span{font-size:13px;color:var(--mute)}
.chast[aria-pressed="true"]{border-style:solid;border-color:var(--acid);background:rgba(204,255,0,.08)}
.sborka{font-size:19px;line-height:1.5;min-height:150px;padding:20px;border-radius:14px;background:#0b0b0e;border:1px solid var(--line)}
.sborka mark{background:none;color:var(--acid)}
.trenazher .prav{padding:32px;background:var(--bone);color:var(--ink);border-radius:var(--r);display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.shkala4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.shkala4 i{height:14px;border-radius:4px;background:rgba(8,8,10,.12);transition:background .4s}
.shkala4 i.on{background:var(--ink)}
.trenazher .prav .ocenka{font:900 clamp(44px,4.6vw,72px)/.9 var(--zag)}
.trenazher .prav .otv{font-size:18px;color:#333;min-height:84px}
@media (max-width:860px){.trenazher{grid-template-columns:1fr}.trenazher .lev,.trenazher .prav{padding:22px}}

/* 5. где ошибается: скан размечает ответ */
.oshibki{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:center}
.otvet-ii{position:relative;padding:36px;border-radius:var(--r);background:rgba(18,18,22,.9);border:1px solid var(--line);overflow:hidden}
.otvet-ii .vopros{display:inline-block;background:var(--viol);padding:10px 16px;border-radius:14px 14px 4px 14px;margin-bottom:22px;font-weight:600}
.otvet-ii p.t{font-size:clamp(19px,1.6vw,23px);line-height:1.6}
.otvet-ii .o{position:relative;transition:background .4s,color .4s;border-radius:4px}
.otvet-ii.razm .o{background:rgba(204,255,0,.18);color:var(--acid);box-shadow:0 2px 0 var(--acid)}
.otvet-ii .luch{position:absolute;left:0;right:0;height:2px;background:var(--acid);box-shadow:0 0 18px 3px rgba(204,255,0,.5);top:0;opacity:0}
.otvet-ii.skan .luch{animation:luch 1.6s var(--ease) forwards}
@keyframes luch{0%{top:0;opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
.zametki{list-style:none;display:grid;gap:18px;counter-reset:z}
.zametki li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;opacity:.25;transform:translateX(20px);transition:all .6s var(--ease)}
.razm-z li{opacity:1;transform:none}
.razm-z li:nth-child(2){transition-delay:.15s}.razm-z li:nth-child(3){transition-delay:.3s}
.zametki li::before{counter-increment:z;content:counter(z);width:44px;height:44px;border-radius:50%;border:2px solid var(--acid);color:var(--acid);display:grid;place-items:center;font:800 22px var(--zag)}
.zametki b{display:block;font:800 26px/1 var(--zag);margin-bottom:4px}
@media (max-width:860px){.oshibki{grid-template-columns:1fr;gap:28px}.otvet-ii{padding:22px}}

/* 6. формат: перетаскиваемая граница */
.razrez-f{position:relative;height:440px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);user-select:none;touch-action:pan-y}
.razrez-f .pol{position:absolute;inset:0;padding:40px;display:flex;flex-direction:column;justify-content:space-between}
.razrez-f .pol.a{background:var(--ink2)}
.razrez-f .pol.b{background:var(--acid);color:var(--ink);clip-path:inset(0 0 0 var(--x,50%));align-items:flex-end;text-align:right}
.razrez-f .pol h3{font:900 clamp(44px,5.4vw,88px)/.86 var(--zag);text-transform:uppercase}
.razrez-f .pol p{max-width:34ch;font-size:17px}
.razrez-f .ruchka{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:var(--bone);transform:translateX(-1px);cursor:ew-resize}
.razrez-f .ruchka button{position:absolute;top:50%;left:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--bone);color:var(--ink);font:700 20px var(--tekst);display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.4);cursor:ew-resize}
@media (max-width:760px){.razrez-f{height:auto;display:grid;border:0;overflow:visible}.razrez-f .pol{position:relative;inset:auto;padding:24px;gap:28px;border-radius:var(--r)}.razrez-f .pol.b{clip-path:none;align-items:flex-start;text-align:left;margin-top:-1px}.razrez-f .pol h3{font-size:14vw}.razrez-f .ruchka{display:none}.razrez-f .pol.a{z-index:2}.razrez-f .pol.a::after{content:"или";position:absolute;left:24px;bottom:-22px;z-index:2;background:var(--bone);color:var(--ink);font:700 14px/44px var(--tekst);padding:0 18px;border-radius:22px}}

/* 7. результат: веер карточек */
.veer-b{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:center}
.veer{position:relative;height:440px}
.kartochka{position:absolute;left:50%;bottom:20px;width:230px;height:320px;margin-left:-115px;border-radius:20px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;transform-origin:50% 120%;transform:rotate(calc(var(--i)*3deg));transition:transform .7s var(--ease);border:1px solid var(--line);background:var(--ink2)}
.vidno .kartochka,.veer:hover .kartochka{transform:rotate(calc(var(--i)*14deg)) translateY(-10px)}
.kartochka:nth-child(odd){background:#17171c}
.kartochka.top{background:var(--acid);color:var(--ink)}
.kartochka b{font:800 30px/.95 var(--zag)}
.kartochka span{font-size:14px;opacity:.75}
.kartochka i{font:800 46px/1 var(--zag);font-style:normal;opacity:.35}
@media (max-width:860px){.veer-b{grid-template-columns:1fr}.veer{height:400px}.veer{height:340px}.kartochka{width:150px;height:220px;margin-left:-75px;padding:16px}.kartochka b{font-size:24px}.vidno .kartochka{transform:rotate(calc(var(--i)*9deg)) translateY(-6px)}}

/* 8. вопросы: лесенкой */
.vopr-l details{border-top:1px solid var(--line);margin-left:calc(var(--i)*48px);transition:margin .4s}
.vopr-l summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;min-height:76px;padding:16px 0;font:700 clamp(24px,2.4vw,36px)/1.05 var(--zag)}
.vopr-l summary::-webkit-details-marker{display:none}
.vopr-l summary::after{content:"↗";font:400 26px var(--tekst);color:var(--acid);transition:transform .4s var(--ease);flex:none}
.vopr-l details[open] summary::after{transform:rotate(90deg)}
.vopr-l details p{padding:0 0 26px;color:#cfcdc8;max-width:60ch}
.vopr-l .ramka{color:var(--acid)}
@media (max-width:760px){.vopr-l details{margin-left:calc(var(--i)*10px)}}

/* 9. последняя ступень: заявка */
.verh-st{padding:100px 0 0;overflow:hidden}
.verh-st .sty{display:grid;grid-template-columns:repeat(4,1fr) 1.5fr;align-items:end;gap:0}
.verh-st .sty div{background:rgba(237,235,230,.06);border-top:2px solid rgba(237,235,230,.25);grid-row:2}
.verh-st .sty div:nth-child(2){height:70px}.verh-st .sty div:nth-child(3){height:140px}.verh-st .sty div:nth-child(4){height:210px}.verh-st .sty div:nth-child(5){height:280px}
.verh-st .sty .poslednyaya{grid-column:5;grid-row:1/3;min-height:420px;background:var(--acid);color:var(--ink);border:0;padding:32px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;border-radius:24px 24px 0 0}
.verh-st .poslednyaya .d3{font-size:clamp(34px,3vw,48px)}
.verh-st .poslednyaya .knopka{background:var(--ink);color:var(--bone);align-self:flex-start}
.verh-st .sty .tekst{grid-column:1/5;grid-row:1;align-self:start;padding-bottom:40px;background:none;border:0;height:auto}
@media (max-width:860px){.verh-st .sty{grid-template-columns:repeat(4,1fr)}.verh-st .sty .tekst{grid-column:1/-1}.verh-st .sty .poslednyaya{grid-column:1/-1;grid-row:2;min-height:0}.verh-st .sty div:nth-child(-n+5):not(.tekst){grid-row:3}}