/* 1. первый экран: стол сверху, линия скана */
.h{min-height:100svh;display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;padding:120px var(--pole) 60px}
.h .krosh{font-size:14px;color:var(--mute)}.h .krosh a:hover{color:var(--acid)}
.h h1{margin:22px 0 26px}
.h .fakty{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.h .fakty span{border:1px solid var(--line);border-radius:99px;padding:8px 16px;font-weight:600;font-size:15px;background:rgba(18,18,22,.6)}
.h .cena{display:flex;align-items:baseline;gap:14px;margin-top:30px;flex-wrap:wrap}
.h .cena b{font:900 clamp(56px,6vw,96px)/.8 var(--zag);color:var(--acid)}
.foto{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:8/5;border:1px solid var(--line)}
.foto img{width:100%;height:100%;object-fit:cover}
.foto .sk{position:absolute;left:0;right:0;height:2px;background:var(--acid);box-shadow:0 0 18px 3px rgba(204,255,0,.6);top:0;animation:sk 5s var(--ease) infinite}
@keyframes sk{0%{top:0;opacity:0}10%{opacity:1}80%{opacity:1}100%{top:100%;opacity:0}}
.foto figcaption{position:absolute;left:16px;bottom:14px;font-size:13px;color:rgba(237,235,230,.75)}
@media (max-width:960px){.h{grid-template-columns:1fr;padding-top:100px;gap:32px;min-height:0}}

/* 2. расписание недель — горизонтальный путь с закреплением */
.ned{position:relative;height:320vh}
.ned .lip{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.ned .lip>.wrap{width:100%}
.ned .trek{display:flex;gap:28px;padding:0 var(--pole);will-change:transform;margin-top:40px}
.ned .st{flex:none;width:min(560px,78vw);min-height:380px;padding:36px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;position:relative}
.ned .st .kogda{font:900 clamp(64px,7vw,112px)/.8 var(--zag);color:rgba(237,235,230,.18)}
.ned .st.den{background:var(--acid);color:var(--ink);border-color:var(--acid)}
.ned .st.den .kogda{color:var(--ink)}
.ned .st h3{font:800 38px/1 var(--zag)}
.ned .st p{margin-top:12px;color:rgba(237,235,230,.82)}
.ned .st.den p{color:rgba(8,8,10,.8)}
.ned .lin{height:2px;background:var(--line);margin:34px var(--pole) 0;position:relative}
.ned .lin i{position:absolute;left:0;top:0;height:2px;background:var(--acid);width:var(--p,0%)}
@media (max-width:760px){.ned{height:auto}.ned .lip{position:static;height:auto;padding:88px 0}.ned .trek{flex-direction:column;transform:none!important}.ned .st{width:auto;min-height:0;padding:24px}.ned .lin{display:none}}

/* 3. циферблат: 3 часа по частям */
.cif{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:48px}
.cif svg{width:100%;max-width:560px;height:auto;margin:0 auto}
.cif .seg{cursor:pointer;transition:opacity .3s}
.cif .seg path{transition:stroke .3s}
.cif .spisok{display:grid;gap:0}
.cif .spisok button{display:grid;grid-template-columns:110px 1fr;gap:16px;text-align:left;padding:18px 0;border-top:1px solid var(--line);min-height:56px;align-items:baseline}
.cif .spisok button:last-child{border-bottom:1px solid var(--line)}
.cif .spisok b{font:800 26px var(--zag);color:var(--mute)}
.cif .spisok span{font-weight:600}
.cif .spisok small{display:block;font-weight:400;color:var(--mute);font-size:15px;margin-top:4px;max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.cif .spisok button.akt b{color:var(--acid)}
.cif .spisok button.akt small{max-height:6em}
@media (max-width:860px){.cif{grid-template-columns:1fr;gap:28px}.cif svg{max-width:320px}.cif .spisok button{grid-template-columns:84px 1fr}}

/* 4. роли */
.roli{display:grid;grid-template-columns:auto 1fr;gap:56px;margin-top:48px}
.roli .vkl{display:flex;flex-direction:column;gap:4px}
.roli .vkl button{font:800 clamp(34px,3.6vw,56px)/1.05 var(--zag);text-align:left;color:rgba(237,235,230,.24);min-height:48px;transition:color .3s}
.roli .vkl button[aria-selected=true]{color:var(--bone)}
.roli .vkl button[aria-selected=true]::after{content:" ←";color:var(--acid)}
.roli .zadachi{list-style:none;display:grid;gap:14px;align-content:start}
.roli .zadachi li{display:flex;gap:16px;align-items:flex-start;font-size:20px;padding:18px 22px;border-radius:16px;background:rgba(18,18,22,.75);border:1px solid var(--line);opacity:0;transform:translateX(20px);animation:vhod .6s var(--ease) forwards}
.roli .zadachi li svg{flex:none;margin-top:4px}
@keyframes vhod{to{opacity:1;transform:none}}
@media (max-width:760px){.roli{grid-template-columns:1fr;gap:20px}.roli .vkl{flex-direction:row;overflow-x:auto;gap:18px;scrollbar-width:none;margin:0 calc(var(--pole)*-1);padding:0 var(--pole)}.roli .vkl button{font-size:30px;white-space:nowrap}.roli .vkl button[aria-selected=true]::after{content:""}.roli .vkl button[aria-selected=true]{border-bottom:3px solid var(--acid)}.roli .zadachi li{font-size:17px;padding:14px 16px}}

/* 5. план зала: 15 мест */
.zal{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;margin-top:44px}
.zal svg{width:100%;height:auto}
.zal .mesto{cursor:pointer}
.zal .mesto circle{fill:rgba(237,235,230,.08);stroke:rgba(237,235,230,.3);stroke-width:2;transition:fill .25s,stroke .25s}
.zal .mesto.zan circle{fill:#CCFF00;stroke:#CCFF00}
.zal .mesto:hover circle{stroke:#CCFF00}
.zal .schet{display:grid;gap:22px}
.zal .schet .bol{font:900 clamp(72px,8vw,136px)/.8 var(--zag)}
.zal .schet .bol small{font:600 17px var(--tekst);display:block;color:var(--mute);margin-top:12px}
.zal input[type=range]{width:100%;accent-color:#CCFF00;height:44px}
@media (max-width:860px){.zal{grid-template-columns:1fr}}

/* 6. документ с вымаркой */
.vym{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:start;margin-top:44px}
.list{background:var(--bone);color:var(--ink);border-radius:14px;padding:40px 44px;font-size:17px;line-height:1.75;position:relative;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5);transform:rotate(-1deg)}
.list .shap{font:800 26px var(--zag);margin-bottom:14px}
.list .pd{position:relative;white-space:nowrap}
.list .pd .z{display:none}
.list .pd .o{transition:background .45s,color .45s;border-radius:3px;padding:0 2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.list .pd .m{display:none;font-weight:700;color:var(--viol)}
.list.chist .pd .o{background:#08080A;color:transparent}
.list.obezl .pd .o{display:none}.list.obezl .pd .m{display:inline}
.list .luch2{position:absolute;left:0;right:0;height:2px;background:var(--acid);box-shadow:0 0 14px 2px rgba(204,255,0,.8);top:-4px;opacity:0}
.list.idet .luch2{animation:sk 1s var(--ease)}
.vym .rezh{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.vym .rezh button{min-height:48px;padding:0 18px;border-radius:99px;border:1.5px solid rgba(237,235,230,.35);font-weight:700}
.vym .rezh button[aria-pressed=true]{background:var(--acid);color:var(--ink);border-color:var(--acid)}
@media (max-width:860px){.vym{grid-template-columns:1fr}.list{padding:26px 22px;font-size:15px;transform:none}.list .pd{white-space:normal}}

/* 7. что уносит — галочки по нарастанию */
.unos{margin-top:40px;counter-reset:u}
.unos li{list-style:none;display:grid;grid-template-columns:90px 1fr;gap:20px;align-items:center;padding:26px 0;border-top:1px solid var(--line)}
.unos li:last-child{border-bottom:1px solid var(--line)}
.unos li b{font:800 clamp(28px,3vw,44px)/1 var(--zag)}
.unos li p{color:var(--mute);margin-top:6px;max-width:60ch}
.unos li:nth-child(2){padding-left:6%}.unos li:nth-child(3){padding-left:12%}
@media (max-width:760px){.unos li{grid-template-columns:56px 1fr;gap:14px}.unos li:nth-child(n){padding-left:0}.unos svg{width:52px}}

/* 8. очно / онлайн — две половины */
.dve{display:flex;gap:12px;margin-top:44px;height:440px}
.dve>div{flex:1;border-radius:var(--r);padding:36px;display:flex;flex-direction:column;justify-content:space-between;transition:flex 0.7s var(--ease);overflow:hidden;position:relative}
.dve>div:hover{flex:1.7}
.dve .och{background:var(--bone);color:var(--ink)}
.dve .onl{background:var(--viol)}
.dve h3{font:900 clamp(56px,6vw,104px)/.8 var(--zag);text-transform:uppercase}
.dve p{max-width:34ch;font-size:17px}
.dve .och p{color:rgba(8,8,10,.75)}
.dve svg{position:absolute;right:-20px;top:-20px;width:260px;opacity:.9}
@media (max-width:760px){.dve{flex-direction:column;height:auto}.dve>div{min-height:300px;padding:26px}.dve svg{width:180px}}

/* 9. последний экран */
.bezh{overflow:hidden;border-top:2px solid var(--acid);border-bottom:2px solid var(--acid);padding:18px 0;margin-top:20px;white-space:nowrap}
.bezh div{display:inline-block;font:800 clamp(30px,3.4vw,52px)/1 var(--zag);text-transform:uppercase;animation:beg 30s linear infinite}
.bezh span{margin:0 26px}.bezh .k{color:var(--acid)}
@keyframes beg{to{transform:translateX(-50%)}}
.kon{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;margin-top:56px;align-items:start}
.kon details{border-top:1px solid var(--line)}.kon details:last-of-type{border-bottom:1px solid var(--line)}
.kon summary{list-style:none;cursor:pointer;padding:20px 0;min-height:56px;font:700 24px/1.1 var(--zag);display:flex;justify-content:space-between;gap:16px}
.kon summary::-webkit-details-marker{display:none}
.kon summary::after{content:"+";color:var(--acid);font:400 28px var(--tekst)}
.kon details[open] summary::after{content:"−"}
.kon details p{padding-bottom:20px;color:#d9d7d2}
.kon .zapis{padding:36px;display:grid;gap:18px}
@media (max-width:860px){.kon{grid-template-columns:1fr}.kon .zapis{padding:24px}}

/* H1: ключ целиком в заголовке, длинные части — мелкой строкой */
.h1-pre,.h1-pod{display:block;font:700 clamp(24px,2.3vw,34px)/1.12 var(--zag);text-transform:none;letter-spacing:0;color:var(--bone);max-width:30ch}
.h1-pre{margin-bottom:14px}
.h1-pod{margin-top:16px}