/* 1. первый экран с печатью */
.h{min-height:100svh;padding:118px 0 56px;display:flex;align-items:center}
.h>.wrap{width:100%;display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center}
.pech{position:relative;width:min(420px,80vw);aspect-ratio:1;justify-self:center}
.pech svg{width:100%;height:100%}
.pech .kol{transform-origin:50% 50%;animation:vrash 28s linear infinite}
@keyframes vrash{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.pech .kol{animation:none}}
@media (max-width:860px){.h>.wrap{grid-template-columns:1fr}.pech{width:260px}}
@media (max-width:520px){.h .d1{font-size:13.5vw}}

/* 2. лицо школы */
.lico{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center;margin-top:20px}
.ramka{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:linear-gradient(180deg,rgba(108,75,255,.35),rgba(8,8,10,.9));border:1px solid var(--line)}
.ramka svg{position:absolute;inset:auto 0 0 0;width:100%;height:88%}
.ramka .skan{position:absolute;left:0;right:0;height:2px;background:var(--acid);box-shadow:0 0 22px 4px rgba(204,255,0,.55);top:10%;animation:skan 3.4s ease-in-out infinite alternate}
@keyframes skan{to{top:90%}}
@media (prefers-reduced-motion:reduce){.ramka .skan{animation:none;top:50%}}
.ramka .shtamp{position:absolute;left:18px;bottom:18px;right:18px;padding:12px 16px;border-radius:12px;background:rgba(8,8,10,.82);font-size:14px;color:var(--mute)}
.lico .imya{font:900 clamp(56px,7vw,120px)/.82 var(--zag);text-transform:uppercase}
.lico .rol{display:inline-block;margin-top:22px;padding:10px 16px;border-radius:99px;background:var(--acid);color:var(--ink);font-weight:700}
.lico .pusto{margin-top:28px;display:grid;gap:10px}
.lico .pusto div{height:14px;border-radius:7px;background:rgba(237,235,230,.08);position:relative;overflow:hidden}
.lico .pusto div:nth-child(2){width:86%}.lico .pusto div:nth-child(3){width:64%}
.lico .pusto div::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(237,235,230,.12),transparent);animation:mel 2.4s linear infinite;transform:translateX(-100%)}
@keyframes mel{to{transform:translateX(100%)}}
@media (max-width:860px){.lico{grid-template-columns:1fr;gap:32px}.ramka{max-width:360px}}

/* 3. команда: точки по размеру группы */
.gr{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:center;margin-top:44px}
.gr .pere{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}
.gr .pere button{min-height:52px;padding:0 22px;border-radius:99px;border:1px solid var(--line);font:800 22px var(--zag)}
.gr .pere button[aria-pressed=true]{background:var(--bone);color:var(--ink)}
.pole{position:relative;aspect-ratio:16/10;border-radius:var(--r);border:1px solid var(--line);background:rgba(8,8,10,.6)}
.pole i{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:var(--bone);transition:left .7s var(--ease),top .7s var(--ease),opacity .4s,transform .4s}
.pole i.ved{background:var(--acid);width:44px;height:44px;margin:-22px 0 0 -22px;box-shadow:0 0 0 8px rgba(204,255,0,.18)}
.pole i.net{opacity:0;transform:scale(.3)}
.pole .podp{position:absolute;left:18px;bottom:14px;font-size:14px;color:var(--mute)}
@media (max-width:860px){.gr{grid-template-columns:1fr;gap:28px}.pole i{width:22px;height:22px;margin:-11px 0 0 -11px}.pole i.ved{width:32px;height:32px;margin:-16px 0 0 -16px}}

/* 4. принципы: просьба → ответ */
.chat{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;margin-top:44px}
.chat .pr{display:flex;flex-direction:column;gap:8px}
.chat .pr button{text-align:left;padding:18px 22px;border-radius:20px 20px 20px 6px;background:rgba(18,18,22,.85);border:1px solid var(--line);font-size:17px;min-height:56px;transition:background .25s,color .25s,transform .25s}
.chat .pr button[aria-pressed=true]{background:var(--bone);color:var(--ink);transform:translateX(10px)}
.chat .otv{border-radius:var(--r);background:var(--viol);padding:36px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:380px}
.chat .otv .kto{font:700 13px var(--tekst);letter-spacing:.18em;text-transform:uppercase;opacity:.75}
.chat .otv .t{font:800 clamp(30px,3.2vw,48px)/1.02 var(--zag)}
.chat .otv .pr2{font-size:16px;opacity:.85;max-width:46ch}
.chat .otv .t span{display:inline-block;animation:vsp .45s var(--ease) both}
@keyframes vsp{from{opacity:0;transform:translateY(12px)}}
@media (max-width:860px){.chat{grid-template-columns:1fr}.chat .pr button[aria-pressed=true]{transform:none}.chat .otv{min-height:300px;padding:24px}}

/* 5. манифест по словам */
.manif{font:900 clamp(40px,5.6vw,92px)/.95 var(--zag);text-transform:uppercase;max-width:18ch;list-style:none;display:grid;gap:.25em}
.h h1 .h1-pre{display:block;font-size:.34em;line-height:1;margin-bottom:.14em;color:var(--bone)}
.h h1 .h1-pod{display:block;margin-top:.14em;font-size:.34em;line-height:1;color:var(--bone)}
.manif span{opacity:.14;transition:opacity .3s}
.manif span.on{opacity:1}
.manif span.k.on{color:var(--acid)}

/* 6. чего не делаем */
.ne{margin-top:40px}
.ne li{list-style:none;display:flex;gap:24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.ne li b{font:800 clamp(30px,4vw,62px)/1 var(--zag);position:relative;display:inline-block}
.ne li b::after{content:"";position:absolute;left:-4px;right:-4px;top:54%;height:.12em;background:var(--acid);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.ne li.on b::after{transform:scaleX(1)}
.ne li.on b{color:var(--mute)}
.ne li span{font-size:15px;color:var(--mute);margin-left:auto;max-width:30ch;text-align:right}
@media (max-width:760px){.ne li{flex-direction:column;gap:8px}.ne li span{margin:0;text-align:left}}

/* 7. реквизиты чеком */
.chek-z{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.chek{background:var(--bone);color:var(--ink);padding:36px 32px 48px;max-width:440px;justify-self:center;width:100%;position:relative;transform:rotate(-1.5deg);font-size:15px;
 -webkit-mask:radial-gradient(10px at 50% 100%,transparent 98%,#000) 50% 100%/20px 100% repeat-x;mask:radial-gradient(10px at 50% 100%,transparent 98%,#000) 50% 100%/20px 100% repeat-x}
.chek h3{font:900 34px/.9 var(--zag);text-transform:uppercase;text-align:center;padding-bottom:16px;border-bottom:2px dashed rgba(8,8,10,.4)}
.chek dl{display:grid;grid-template-columns:auto 1fr;gap:14px 18px;margin-top:20px}
.chek dt{color:rgba(8,8,10,.55)}
.chek dd{font-weight:600;text-align:right}
.chek dd a{text-decoration:underline;text-underline-offset:3px}
.chek .zag2{margin-top:22px;padding-top:16px;border-top:2px dashed rgba(8,8,10,.4);text-align:center;font:800 18px var(--zag);letter-spacing:.06em}
@media (max-width:860px){.chek-z{grid-template-columns:1fr;gap:32px}.chek{padding:28px 20px 44px}.chek dl{grid-template-columns:1fr;gap:2px}.chek dd{text-align:left;margin-bottom:10px}}

/* 8. история знака */
.znak-z{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.znak-z svg{width:100%;max-width:560px;height:auto}
.etapy{display:flex;gap:8px;margin-top:24px;flex-wrap:wrap}
.etapy button{min-height:48px;padding:0 18px;border-radius:99px;border:1px solid var(--line);font-weight:600}
.etapy button[aria-pressed=true]{background:var(--acid);color:var(--ink);border-color:var(--acid)}
@media (max-width:860px){.znak-z{grid-template-columns:1fr;gap:28px}}

/* 9. призыв */
.priz{padding:clamp(80px,10vw,150px) 0}
.priz .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.priz h2{font:900 clamp(60px,9vw,150px)/.82 var(--zag);text-transform:uppercase}