/* 1. первый экран: профессия в заголовке меняется */
.p-hero{min-height:100svh;padding-bottom:56px;display:flex;flex-direction:column}
.p-hero h1{font-size:clamp(72px,9vw,148px);margin-top:26px}
.p-hero h1 .smena{display:block;font-size:.34em;line-height:1.1;margin-top:.3em;color:var(--mute);max-width:30ch}
.p-hero h1 .smena [data-p]{color:var(--bone);transition:color .4s}
.p-hero h1 .smena [data-p].on{color:var(--acid)}
@keyframes mig{50%{opacity:0}}
.prof-v{display:flex;gap:8px;flex-wrap:wrap;margin-top:34px}
.prof-v button{min-height:48px;padding:0 22px;border-radius:999px;border:1px solid var(--line);font:600 16px var(--tekst);transition:all .3s}
.prof-v button[aria-pressed="true"]{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.p-hero .niz{margin-top:auto;padding-top:48px;display:grid;grid-template-columns:1fr 1.3fr auto;gap:32px;align-items:end;border-top:1px solid var(--line);margin-top:56px;padding-top:28px}
.p-hero .niz .cn{font:800 clamp(36px,3.6vw,56px)/.9 var(--zag)}
@media (max-width:900px){.p-hero h1{font-size:15vw}.p-hero h1 .smena{font-size:.42em}.p-hero .niz{grid-template-columns:1fr;gap:18px}.prof-v button{flex:1 1 40%}}

/* 2. карта навыков */
.karta-b{display:grid;grid-template-columns:280px 1fr;gap:40px;align-items:start}
.karta-b .bok{position:sticky;top:110px}
.karta{position:relative;border-radius:var(--r);border:1px solid var(--line);background:rgba(12,12,16,.85);padding:20px}
.karta svg{width:100%;height:auto;display:block}
.karta .uz text{font:600 17px var(--tekst);fill:var(--bone)}
.karta .uz rect{fill:#17171c;stroke:rgba(237,235,230,.18);transition:all .3s}
.karta .uz.on rect{fill:rgba(204,255,0,.12);stroke:var(--acid)}
.karta .uz{cursor:pointer}
.karta .yadro circle{fill:var(--ink);stroke:rgba(204,255,0,.35);stroke-width:1.5;transition:all .3s}
.karta .yadro.on circle{fill:var(--acid);stroke:var(--acid)}
.karta .yadro text{font:800 24px var(--zag);fill:var(--bone);text-anchor:middle}
.karta .yadro.on text{fill:var(--ink)}
.karta path.sv{fill:none;stroke:rgba(237,235,230,.14);stroke-width:1.5;transition:stroke .3s}
.karta path.sv.on{stroke:var(--acid);stroke-width:2.5;stroke-dasharray:6 6;animation:beg 1s linear infinite}
@keyframes beg{to{stroke-dashoffset:-12}}
.karta .podp{position:absolute;right:24px;bottom:18px;font-size:13px;color:var(--mute)}
.karta-m{display:block;padding:4px 6px 10px}
.karta-m .kp{display:none}.karta-m .kp.on{display:block}
.karta-m h3{font:700 18px/1.3 var(--tekst);color:var(--acid)}
.karta-m .zd{display:none;list-style:none}
@media (max-width:900px){
 .karta-b{grid-template-columns:1fr;gap:24px}.karta-b .bok{position:static}
 .karta svg{display:none}.karta .podp{position:static;display:block;margin-top:14px}
 .karta-m{padding:0}.karta-m h3{margin-bottom:12px}
 .karta-m .zd{display:grid;gap:10px}
 .karta-m li{display:grid;gap:8px;text-align:left;padding:16px;border-radius:14px;border:1px solid var(--line);background:#17171c;min-height:44px}
 .karta-m li b{font:700 18px var(--tekst)}
 .karta-m .teg{display:flex;gap:6px;flex-wrap:wrap}
 .karta-m .teg span{font-size:13px;padding:4px 10px;border-radius:99px;border:1px solid rgba(204,255,0,.4);color:var(--acid)}
}

/* 3. обезличивание: строки закрашиваются */
.obezl{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.list-d{background:var(--bone);color:var(--ink);border-radius:6px;padding:44px 40px;font-size:17px;line-height:1.75;transform:rotate(-1.5deg);box-shadow:0 30px 80px rgba(0,0,0,.45);position:relative}
.list-d h4{font:800 26px/1 var(--zag);margin-bottom:18px;text-transform:uppercase}
.list-d .zk{position:relative;white-space:nowrap}
.list-d .zk::after{content:"";position:absolute;left:-3px;right:-3px;top:.1em;bottom:.05em;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.list-d.zakr .zk::after{transform:scaleX(1)}
.list-d.zakr .zk:nth-of-type(2)::after{transition-delay:.25s}.list-d.zakr .zk:nth-of-type(3)::after{transition-delay:.5s}.list-d.zakr .zk:nth-of-type(4)::after{transition-delay:.75s}.list-d.zakr .zk:nth-of-type(5)::after{transition-delay:1s}
.list-d .shtamp{position:absolute;right:-14px;bottom:-18px}
.obezl .pravila{display:grid;gap:0;margin-top:28px;border-top:1px solid var(--line)}
.obezl .pravila p{padding:16px 0;border-bottom:1px solid var(--line);display:flex;gap:16px}
.obezl .pravila p::before{content:"";flex:none;width:22px;height:14px;background:var(--bone);border-radius:2px;margin-top:5px}
@media (max-width:900px){.obezl{grid-template-columns:1fr;gap:40px}.list-d{padding:28px 22px;font-size:15px}.list-d .shtamp{right:6px}}

/* 4. программа-конвейер */
.konv-wrap{position:relative}
.konv{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding-top:70px}
.konv .lenta-k{position:absolute;left:0;right:0;top:30px;height:18px;border-radius:9px;background:repeating-linear-gradient(90deg,rgba(237,235,230,.12) 0 18px,transparent 18px 30px);background-size:30px 100%;animation:konv 1.2s linear infinite}
@keyframes konv{to{background-position:30px 0}}
.konv .gruz{position:absolute;top:8px;left:0;width:62px;height:44px;border-radius:8px;background:var(--acid);display:grid;place-items:center;font:800 15px var(--zag);color:var(--ink);transform:translateX(var(--gx,0px));box-shadow:0 8px 24px rgba(204,255,0,.3)}
.stanc{padding:28px 26px 0 0;border-left:1px solid var(--line);padding-left:22px;position:relative}
.stanc::before{content:"";position:absolute;left:-7px;top:-26px;width:14px;height:14px;border-radius:50%;background:var(--ink);border:2px solid var(--mute)}
.stanc.on::before{background:var(--acid);border-color:var(--acid)}
.stanc .n{font:900 18px var(--zag);color:var(--mute);letter-spacing:.1em}
.stanc h3{font:800 clamp(28px,2.6vw,40px)/.95 var(--zag);margin:12px 0}
.stanc p{color:#cfcdc8;font-size:16px}
.stanc .vyh{margin-top:18px;display:inline-block;font-size:13px;padding:6px 12px;border-radius:8px;background:rgba(108,75,255,.25);color:#cfc6ff}
@media (max-width:900px){.konv{grid-template-columns:1fr;padding:0 0 0 34px}.konv .lenta-k{left:8px;right:auto;top:0;bottom:0;width:10px;height:auto;background:repeating-linear-gradient(180deg,rgba(237,235,230,.14) 0 14px,transparent 14px 24px);animation:none}.konv .gruz{display:none}.stanc{border-left:0;padding:0 0 36px}.stanc::before{left:-33px;top:6px}}

/* 5. результат — папки */
.papki{position:relative}
.papki .yarl{display:flex;gap:0;align-items:flex-end;padding-left:24px}
.papki .yarl button{min-height:52px;padding:0 26px;border-radius:14px 14px 0 0;margin-right:-8px;font:700 16px var(--tekst);background:#1b1b21;border:1px solid var(--line);border-bottom:0;color:var(--mute);position:relative}
.papki .yarl button[aria-selected="true"]{background:var(--bone);color:var(--ink);z-index:2;min-height:60px}
.papki .telo{background:var(--bone);color:var(--ink);border-radius:0 var(--r) var(--r) var(--r);padding:44px;min-height:320px;display:grid;grid-template-columns:1fr 1.2fr;gap:44px;position:relative;z-index:1}
.papki .telo h3{font:900 clamp(40px,4.4vw,70px)/.88 var(--zag);text-transform:uppercase}
.papki .telo ul{list-style:none;display:grid;gap:0}
.papki .telo li{padding:14px 0;border-bottom:1px solid rgba(8,8,10,.15);display:flex;justify-content:space-between;gap:16px;font-size:17px}
.papki .telo li span{color:#666;font-size:14px;white-space:nowrap}
.papki .telo .melko{color:#555;margin-top:18px}
@media (max-width:760px){.papki .yarl{padding-left:0;overflow-x:auto;scrollbar-width:none}.papki .yarl button{padding:0 16px;font-size:14px;flex:none}.papki .telo{grid-template-columns:1fr;padding:24px;gap:20px;border-radius:0 0 var(--r) var(--r)}.papki .telo li{flex-direction:column;gap:2px}}

/* 6. формат — паспорт с отточиями */
.pasport{display:grid;grid-template-columns:1fr 1.4fr;gap:56px;align-items:start}
.pasport dl{display:grid;gap:0}
.pasport .str{display:flex;align-items:baseline;gap:12px;padding:18px 0}
.pasport dt{font:700 clamp(22px,2vw,30px)/1 var(--zag);white-space:nowrap}
.pasport .str::after{content:"";order:2;flex:1;border-bottom:2px dotted rgba(237,235,230,.25);transform:translateY(-6px)}
.pasport dd{order:3;font-size:17px;text-align:right;max-width:44ch}
.pasport dd.ut{color:var(--acid)}
@media (max-width:860px){.pasport{grid-template-columns:1fr;gap:24px}.pasport .str{flex-wrap:wrap;border-bottom:1px solid var(--line);padding:14px 0;gap:4px}.pasport .str::after{display:none}.pasport dd{text-align:left;flex-basis:100%;max-width:none}}

/* 7. вопросы — колонкой с липким заголовком */
.vopr-p{display:grid;grid-template-columns:1fr 1.6fr;gap:56px}
.vopr-p .lip{position:sticky;top:110px;align-self:start}
.vopr-p .sp{counter-reset:q}
.vopr-p .q{padding:30px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:64px 1fr;gap:10px 18px}
.vopr-p .q::before{counter-increment:q;content:"0" counter(q);font:900 32px/1 var(--zag);color:transparent;-webkit-text-stroke:1px var(--acid);grid-row:span 2}
.vopr-p .q h3{font:800 clamp(24px,2.2vw,32px)/1.05 var(--zag)}
.vopr-p .q p{color:#cfcdc8}
.vopr-p .ramka{color:var(--acid)}
@media (max-width:860px){.vopr-p{grid-template-columns:1fr;gap:20px}.vopr-p .lip{position:static}.vopr-p .q{grid-template-columns:44px 1fr}.vopr-p .q::before{font-size:24px}}

/* 8. финал — уравнение */
.uravn{padding:110px 0 120px;text-align:center}
.uravn .ur{display:flex;justify-content:center;align-items:center;gap:.3em;flex-wrap:wrap;font:900 clamp(48px,7vw,120px)/.9 var(--zag);text-transform:uppercase}
.uravn .ur .zn{color:var(--acid);font-weight:400}
.uravn .ur .ot{color:var(--ink);background:var(--acid);padding:.05em .25em;border-radius:.12em}
.uravn .knopki{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:44px}
@media (max-width:760px){.uravn{padding:80px 0;text-align:left}.uravn .ur{justify-content:flex-start;font-size:15vw}.uravn .knopki{justify-content:flex-start}.uravn .knopki .knopka{width:100%;justify-content:center}}