/* NextGrade AI · моушен: блоки школы и студии поверх ng.css (те же токены, без новых цветов) */

/* ——— навигация: активный пункт ——— */
.nav-links a.is-here{color:var(--ink);box-shadow:inset 0 -1.5px 0 currentColor}
[data-theme=dark] .nav-links a.is-here{color:var(--on-ink)}
.hero .actions{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:28px}

/* ——— работы: сетка роликов, превью играют без звука, когда видны ——— */
.works{position:relative;padding:var(--sec) 0;background-color:var(--ink);background-image:radial-gradient(circle at center,#151515 1.1px,transparent 1.4px);background-size:32px 32px}
.works .aside{color:var(--on-ink-2)}
.wgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:start}
.work{grid-column:span 4;display:flex;flex-direction:column;gap:14px;color:var(--on-ink)}
.work--wide{grid-column:span 8}
.work--half{grid-column:span 6}
.work--tall{grid-column:span 3}
.work .shot{position:relative;border-radius:16px;overflow:hidden;background:#111;aspect-ratio:16/9;border:1px solid #1F1F1F}
.work--tall .shot{aspect-ratio:9/16}
.work video,.work img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.work .shot .label{position:absolute;left:14px;top:12px;z-index:1;color:#BDBDBD;background:rgba(8,8,8,.62);padding:6px 9px;border-radius:8px;backdrop-filter:blur(6px)}
.work h3{font:500 22px/28px var(--f-head);color:var(--on-ink)}
.work p{font-size:15px;line-height:22px;color:var(--on-ink-2)}
.work .tool{font:500 11px/16px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-min)}
@media (max-width:1100px){.work,.work--wide,.work--half{grid-column:span 6}.work--tall{grid-column:span 4}}
@media (max-width:640px){.wgrid{grid-template-columns:repeat(2,1fr)}.work,.work--wide,.work--half{grid-column:span 2}.work--tall{grid-column:span 1}.work h3{font-size:18px;line-height:24px}.work--tall p{display:none}}

/* ——— шаги: программа курса и «как работаем» ——— */
.steps{padding:var(--sec) 0}
.slist{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:48px var(--gap);counter-reset:s}
.slist--4{grid-template-columns:repeat(4,1fr)}
.sitem{position:relative;padding-top:28px;border-top:1px solid var(--line);counter-increment:s}
.sitem::before{content:counter(s,decimal-leading-zero);display:block;margin-bottom:18px;font:500 12px/16px var(--f-mono);letter-spacing:.16em;color:var(--text-min)}
.sitem h3{font:500 26px/32px var(--f-head);color:var(--ink)}
.sitem p{margin-top:12px;font-size:16px;line-height:24px;color:var(--text-min);max-width:380px}
.sitem .when{display:inline-block;margin-top:16px;font:500 11px/16px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--tag);padding:6px 10px;border-radius:8px}
[data-theme=dark] .sitem{border-color:#2A2A2A}
[data-theme=dark] .sitem h3{color:var(--on-ink)}
[data-theme=dark] .sitem p{color:var(--on-ink-2)}
@media (max-width:1100px){.slist,.slist--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.slist,.slist--4{grid-template-columns:1fr;gap:36px}.sitem h3{font-size:22px;line-height:28px}}

/* ——— мостик между школой и студией ——— */
.bridge{padding:88px 0}
.bridge-in{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:end}
.bridge .text-l{margin-top:24px;color:var(--on-ink-2);max-width:560px}
.bridge .btns{display:flex;flex-wrap:wrap;gap:16px;justify-content:flex-end}
@media (max-width:900px){.bridge-in{grid-template-columns:1fr;gap:32px}.bridge .btns{justify-content:flex-start}}

/* ——— запись на встречу ——— */
.book{padding:var(--sec) 0}
.book-grid{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
.book-copy .text-l{margin-top:24px;max-width:460px}
.book-copy ul{margin-top:28px;list-style:none;display:grid;gap:12px}
.book-copy li{display:flex;gap:12px;font-size:16px;line-height:24px;color:var(--text)}
.book-copy li::before{content:"";flex:none;width:6px;height:6px;margin-top:9px;border-radius:50%;background:var(--ink)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:32px;border-radius:20px;background:var(--paper);border:1px solid var(--line)}
.form .full{grid-column:1/-1}
.form label{display:flex;flex-direction:column;gap:8px;font:500 12px/16px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-min)}
.form input,.form textarea,.form select{font:400 17px/24px var(--f-text);color:var(--ink);background:var(--paper-cool);border:1px solid transparent;border-radius:12px;padding:14px 16px;text-transform:none;letter-spacing:0;transition:border-color var(--t-base)}
.form textarea{min-height:120px;resize:vertical}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--ink)}
.form fieldset{border:0;min-width:0}
.form legend{margin-bottom:8px;font:500 12px/16px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-min)}
.form .seg{display:flex;flex-wrap:wrap;gap:8px}
.form .seg label{display:inline-flex;flex-direction:row;position:relative}
.form .seg input{position:absolute;opacity:0;pointer-events:none}
.form .seg span{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:99px;background:var(--paper-cool);font:400 15px/1 var(--f-text);letter-spacing:0;text-transform:none;color:var(--text);cursor:pointer;transition:background var(--t-base),color var(--t-base)}
.form .seg input:checked+span{background:var(--ink);color:var(--paper)}
.form .seg input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.form .btn{justify-self:start}
.form .note{grid-column:1/-1;font-size:14px;line-height:20px;color:var(--text-min)}
.form .done{grid-column:1/-1;display:none;padding:16px 18px;border-radius:12px;background:var(--ink);color:var(--paper)}
.form.is-sent .done{display:block}
@media (max-width:1100px){.book-grid{grid-template-columns:1fr;gap:40px}}
@media (max-width:640px){.form{grid-template-columns:1fr;padding:20px}}

/* ——— телефон: длинные слова в заголовке первого экрана не должны уходить за край ——— */
@media (max-width:640px){.hero-title{font-size:clamp(28px,9.6vw,52px)}.hero-title .sub{width:auto;white-space:normal}.faq-head .h2 span{white-space:normal}}

/* ——— работы на главной: три ролика — большой слева, два справа друг над другом ——— */
.wgrid--3 .work--wide{grid-row:span 2}
@media (max-width:1100px){.wgrid--3 .work--wide{grid-column:1/-1;grid-row:auto}}

/* ——— наш путь: видеогенерация против картинок и 3D в проекте + живая сцена ——— */
.path{padding:var(--sec) 0}
.path-grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--gap);align-items:stretch}
.vs{display:grid;grid-template-columns:1fr 1fr;border-radius:20px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.vs-col{padding:32px}
.vs-col .label{margin-bottom:28px}
.vs ul{list-style:none;display:grid;gap:20px}
.vs li{position:relative;padding-left:28px;font-size:17px;line-height:25px;color:var(--text-min)}
.vs li::before{content:"";position:absolute;left:0;top:12px;width:12px;height:1.5px;background:currentColor}
.vs-col--ours li{color:var(--on-ink)}
.vs-col--ours li::before{top:7px;width:12px;height:6px;background:none;border:solid currentColor;border-width:0 0 1.5px 1.5px;transform:rotate(-45deg)}
.scene{position:relative;margin:0;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background-color:var(--ink);background-image:radial-gradient(circle at center,#1C1C1C 1.1px,transparent 1.4px);background-size:24px 24px;color:var(--on-ink)}
.scene figcaption{position:absolute;left:20px;top:18px;right:20px;color:var(--on-ink-min)}
.scene-stage{position:relative;flex:1;min-height:280px;display:grid;place-items:center;perspective:900px}
.cube{--s:120px;--h:calc(var(--s) / 2);position:relative;width:var(--s);height:var(--s);transform-style:preserve-3d;transform:rotateX(var(--rx,-18deg)) rotateY(var(--ry,35deg))}
.cube i{position:absolute;inset:0;border:1.5px solid var(--paper);background-color:rgba(251,251,251,.05);background-image:linear-gradient(#2A2A2A 1px,transparent 1px),linear-gradient(90deg,#2A2A2A 1px,transparent 1px);background-size:20px 20px;background-position:-1px -1px}
.cube i:nth-child(1){transform:translateZ(var(--h));background-color:rgba(251,251,251,.12)}
.cube i:nth-child(2){transform:rotateY(180deg) translateZ(var(--h))}
.cube i:nth-child(3){transform:rotateY(90deg) translateZ(var(--h))}
.cube i:nth-child(4){transform:rotateY(-90deg) translateZ(var(--h))}
.cube i:nth-child(5){transform:rotateX(90deg) translateZ(var(--h));background-color:rgba(251,251,251,.2)}
.cube i:nth-child(6){transform:rotateX(-90deg) translateZ(var(--h))}
.scene-floor{position:absolute;left:50%;top:calc(50% + 96px);width:150px;height:18px;margin-left:-75px;border-radius:50%;background:radial-gradient(closest-side,rgba(251,251,251,.14),transparent)}
.scene-panel{display:grid;gap:2px;padding:14px 20px 16px;background:#0E0E0E;box-shadow:inset 0 1px 0 #222}
.scene-row{display:grid;grid-template-columns:80px 1fr 48px;align-items:center;gap:14px;min-height:36px;font:500 11px/16px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-ink-min)}
.scene-row b{grid-column:2/4;font-weight:500;color:var(--on-ink);letter-spacing:.06em}
.scene-row output{text-align:right;color:var(--on-ink)}
.scene input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:20px;background:transparent;cursor:pointer}
.scene input[type=range]::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:#333}
.scene input[type=range]::-moz-range-track{height:2px;border-radius:2px;background:#333}
.scene input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-6px;border-radius:50%;background:var(--paper)}
.scene input[type=range]::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--paper)}
.scene input[type=range]:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
@media (max-width:1100px){.path-grid{grid-template-columns:1fr}}
@media (max-width:640px){.vs{grid-template-columns:1fr}.vs-col{padding:24px 20px}.vs li{font-size:16px;line-height:24px}.scene-stage{min-height:240px}.cube{--s:100px}.scene-floor{top:calc(50% + 82px)}}

/* ——— где пригодятся ролики ——— */
.uses{padding:var(--sec) 0}
.use-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.use{display:flex;flex-direction:column;min-width:0;min-height:380px;padding:28px;border-radius:20px;background:var(--paper)}
.use-top{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:48px}
.fmt{display:flex;align-items:flex-end;gap:6px;height:40px}
.fmt i{display:block;border:1.5px solid var(--ink);border-radius:4px;transition:background var(--t-mid) var(--ease-out)}
.fmt .r169{width:48px;height:27px}.fmt .r916{width:23px;height:40px}.fmt .r11{width:30px;height:30px}
.use:hover .fmt i{background:var(--ink)}
.use h3{font:500 26px/32px var(--f-head);color:var(--ink)}
.use p{margin-top:12px;font-size:16px;line-height:24px;color:var(--text-min)}
.use .use-tool{margin-top:auto;padding-top:24px;font:500 11px/16px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.more-title{margin:80px 0 28px}
.more{display:grid;grid-template-columns:repeat(4,1fr);gap:36px var(--gap)}
.more-item{padding-top:20px;border-top:1px solid var(--line)}
.more-item h4{font:500 19px/26px var(--f-head);color:var(--ink)}
.more-item p{margin-top:8px;font-size:15px;line-height:22px;color:var(--text-min)}
@media (max-width:1100px){.use-grid,.more{grid-template-columns:repeat(2,1fr)}.use{min-height:340px}}
@media (max-width:640px){.use-grid,.more{grid-template-columns:1fr}.use{min-height:0;padding:24px 20px}.use-top{margin-bottom:28px}.use h3{font-size:22px;line-height:28px}.use .key{white-space:normal}.more-title{margin-top:56px}.more{gap:24px}}

/* ——— как собирается ролик: шесть слоёв на одной шкале времени, бегунок идёт по всем сразу ——— */
.layers{padding:var(--sec) 0;background-color:var(--ink);background-image:radial-gradient(circle at center,#151515 1.1px,transparent 1.4px);background-size:32px 32px}
.layers .aside{color:var(--on-ink-2)}
.tl{--cols:220px minmax(0,1fr) 280px;position:relative;padding:0 0 8px;border-radius:20px;background:#0B0B0B;box-shadow:inset 0 0 0 1px #1F1F1F}
.tl-ruler,.tl-row,.tl-ph{display:grid;grid-template-columns:var(--cols);gap:0 28px;padding:0 28px}
.tl-ruler>div{grid-column:2;display:flex;justify-content:space-between;padding:18px 0 12px;font:500 11px/16px var(--f-mono);letter-spacing:.12em;color:#5A5A5A}
.tl-row{align-items:center;min-height:88px;box-shadow:inset 0 1px 0 #181818}
.tl-name{display:flex;align-items:baseline;gap:14px}
.tl-name .n{font:500 11px/16px var(--f-mono);letter-spacing:.14em;color:var(--on-ink-min)}
.tl-name h3{font:500 20px/26px var(--f-head);color:var(--on-ink)}
.tl-track{position:relative;display:flex;gap:4px;height:46px}
.clip{position:relative;flex:var(--w,1) 1 0;min-width:0;display:flex;align-items:center;padding:0 12px;border-radius:8px;background:#1A1A1A;box-shadow:inset 0 0 0 1px #2C2C2C;font:500 11px/14px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#C4C4C4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform-origin:left center;transform:scaleX(0);transition:transform .9s var(--ease-out) calc(var(--i,0) * .12s + .15s)}
.tl.in .clip{transform:none}
.clip--idea{background:var(--paper);color:var(--ink);box-shadow:none}
.clip--keys{align-items:flex-start;padding-top:9px}
.clip--keys::before,.clip--keys::after{content:"";position:absolute;bottom:8px;width:6px;height:6px;background:var(--paper);transform:rotate(45deg)}
.clip--keys::before{left:14px}.clip--keys::after{right:14px}
.clip--wave{padding:0}
.wave{position:absolute;inset:7px 10px;display:flex;align-items:center;gap:2px}
.wave i{flex:1;min-width:1px;height:calc(var(--h) * 1%);border-radius:1px;background:#444}
.clip--wave .clip-t{position:relative;margin-left:10px;padding:3px 7px;border-radius:5px;background:#1A1A1A;box-shadow:0 0 0 8px #1A1A1A}
.tl-track--sfx,.tl-track--out{flex-direction:column;justify-content:center}
.tl-track--sfx .clip{flex:none;height:22px}
.tl-track--sfx i{position:absolute;left:var(--x);bottom:3px;width:2px;height:13px;border-radius:2px;background:var(--paper)}
.tl-track--out .clip{flex:1 1 0}
.tl-who{font-size:14px;line-height:20px;color:var(--on-ink-2)}
.tl-who b{font-weight:500;color:var(--on-ink)}
.tl-who p+p{margin-top:3px}
.tl-ph{position:absolute;inset:0;pointer-events:none}
.tl-ph span{grid-column:2;position:relative}
.tl-ph span::before,.tl-ph span::after{content:"";position:absolute;left:0;animation:ph 9s linear infinite paused}
.tl-ph span::before{top:46px;bottom:10px;width:1.5px;margin-left:-.75px;background:var(--paper)}
.tl-ph span::after{top:38px;width:11px;height:10px;margin-left:-5.5px;background:var(--paper);clip-path:polygon(0 0,100% 0,100% 55%,50% 100%,0 55%)}
.tl.in .tl-ph span::before,.tl.in .tl-ph span::after{animation-play-state:running}
@keyframes ph{from{left:0}to{left:100%}}
.is-static .tl-ph span::before,.is-static .tl-ph span::after{animation:none;left:38%}
@media (prefers-reduced-motion:reduce){.tl-ph{display:none}.clip{transition:none;transform:none}}
@media (max-width:1100px){.tl{--cols:190px minmax(0,1fr)}.tl-ph{display:none}.tl-row{padding-top:16px;padding-bottom:16px;row-gap:12px}.tl-who{grid-column:2;display:flex;flex-wrap:wrap;gap:4px 20px}.tl-who p+p{margin-top:0}}
@media (max-width:640px){.tl{--cols:minmax(0,1fr)}.tl-ruler,.tl-row{gap:10px 0;padding-left:16px;padding-right:16px}.tl-ruler>div{grid-column:1}.tl-who{grid-column:1;flex-direction:column;gap:2px}.tl-name h3{font-size:18px;line-height:24px}.tl-ph{display:none}.clip{padding:0 8px;letter-spacing:.06em}.wave{gap:1px}.wave i{min-width:0}}

/* ——— пакет: оффер с листом ожидания + шесть инструментов ——— */
.pack{padding:var(--sec) 0}
.pack-grid{display:grid;grid-template-columns:5fr 7fr;gap:var(--gap);align-items:start}
.offer{position:sticky;top:32px;padding:36px;border-radius:24px}
.offer h3{margin-top:20px;font:500 36px/42px var(--f-head);color:var(--on-ink)}
.offer ul{margin-top:28px;list-style:none;display:grid;gap:14px}
.offer li{display:flex;gap:14px;font-size:16px;line-height:24px;color:var(--on-ink-2)}
.offer li::before{content:"";flex:none;width:11px;height:6px;margin-top:7px;border:solid var(--paper);border-width:0 0 1.5px 1.5px;transform:rotate(-45deg)}
.pack-form{margin-top:36px;padding-top:28px;box-shadow:inset 0 1px 0 #262626}
.pack-form .note{font-size:15px;line-height:22px;color:var(--on-ink-2)}
.pack-row{margin-top:16px;display:flex;gap:8px}
.pack-row input{flex:1;min-width:0;height:56px;padding:0 22px;border-radius:99px;border:1px solid #2C2C2C;background:#141414;color:var(--on-ink);font:400 17px/1 var(--f-text)}
.pack-row input::placeholder{color:#6A6A6A}
.pack-row input:focus{outline:none;border-color:var(--paper)}
.pack-form .done{display:none;margin-top:16px;padding:14px 18px;border-radius:12px;background:var(--paper);color:var(--ink)}
.pack-form.is-sent .pack-row{display:none}
.pack-form.is-sent .done{display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kit{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.kit-item{padding:28px;border-radius:20px;background:var(--paper-cool)}
.kit-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--ink);color:var(--on-ink)}
.kit-ico .ico{width:26px;height:26px}
.kit-item h4{margin-top:28px;font:500 22px/28px var(--f-head);color:var(--ink)}
.kit-item p{margin-top:10px;font-size:15px;line-height:22px;color:var(--text-min)}
@media (max-width:1100px){.pack-grid{grid-template-columns:1fr}.offer{position:static}}
@media (max-width:640px){.offer{padding:28px 20px}.offer h3{font-size:28px;line-height:34px}.pack-row{flex-direction:column}.pack-row input{flex:none}.pack-row .btn{justify-content:center}.kit{grid-template-columns:1fr}.kit-item{padding:24px 20px}.kit-item h4{margin-top:20px}}

/* ——— ролики других авторов: галерея рядами, высота ряда подбирается по пропорциям (flex-grow = пропорция ролика);
   на планшете и телефоне — лента, листается вбок. Разметку собирает tools/галерея-примеров.py ——— */
.ex-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin:112px 0 32px}
.ex-head .label{margin-bottom:20px}
.ex-head h3{max-width:680px;font:500 28px/34px var(--f-head);color:var(--on-ink)}
.ex-note{max-width:340px;font-size:15px;line-height:22px;color:var(--on-ink-2)}
.gal{display:grid;gap:48px}
.gal-row{display:flex;gap:var(--gap);align-items:flex-start}
.ex{--ar:1.7778;flex:var(--ar) 1 0;min-width:0;display:flex;flex-direction:column;gap:12px;color:var(--on-ink)}
.ex .shot{position:relative;aspect-ratio:var(--ar);border-radius:16px;overflow:hidden;background:#111;border:1px solid #1F1F1F}
.ex video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ex .shot .label{position:absolute;left:12px;top:12px;z-index:1;color:#BDBDBD;background:rgba(8,8,8,.62);padding:6px 9px;border-radius:8px;backdrop-filter:blur(6px)}
.ex .tool{margin-top:4px;font:500 11px/16px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-min)}
.ex h3{font:500 22px/28px var(--f-head);color:var(--on-ink)}
.ex .credit{font-size:14px;line-height:20px;color:var(--on-ink-2)}
@media (max-width:1100px){
  .ex-head{flex-direction:column;align-items:flex-start;margin-top:88px}
  .gal{--rh:280px;display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--pad);margin:0 calc(var(--pad) * -1);padding:0 var(--pad) 20px;scrollbar-width:thin;scrollbar-color:#3A3A3A transparent}
  .gal-row{display:contents}
  .ex{flex:none;width:max(220px,calc(var(--rh) * var(--ar)));scroll-snap-align:start}
  .ex .shot{aspect-ratio:auto;height:var(--rh)}
}
@media (max-width:640px){.ex-head{margin-top:64px;gap:16px}.ex-head h3{font-size:22px;line-height:28px}.gal{--rh:240px}.ex{width:max(200px,calc(var(--rh) * var(--ar)))}.ex h3{font-size:18px;line-height:24px}}

/* ——— студия: день заказа на шкале 10:00–19:00 (9 часов), бегунок «сейчас» идёт по дню ——— */
.day{padding:var(--sec) 0;background-color:var(--ink);background-image:radial-gradient(circle at center,#151515 1.1px,transparent 1.4px);background-size:32px 32px}
.day .aside{color:var(--on-ink-2)}
.dayline{padding:24px 28px 20px;border-radius:20px;background:#0B0B0B;box-shadow:inset 0 0 0 1px #1F1F1F}
.dl-hours{position:relative;height:18px;margin:0 0 14px;font:500 11px/16px var(--f-mono);letter-spacing:.1em;color:#5A5A5A}
.dl-hours span{position:absolute;left:calc(var(--h) / 9 * 100%);transform:translateX(-50%)}
.dl-hours span:first-child{transform:none}.dl-hours span:last-child{transform:translateX(-100%)}
.dl-track{position:relative;height:84px}
.dl-seg{position:absolute;top:0;height:48px;left:calc(var(--a) / 9 * 100%);width:calc((var(--b) - var(--a)) / 9 * 100% - 4px);display:flex;align-items:center;padding:0 12px;border-radius:8px;font:500 11px/14px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform-origin:left center;transform:scaleX(0);transition:transform .9s var(--ease-out)}
.dl-seg:nth-child(2){transition-delay:.15s}.dl-seg:nth-child(3){transition-delay:.3s}.dl-seg:nth-child(4){transition-delay:.45s}
.dayline.in .dl-seg{transform:none}
.dl-seg--you{background:var(--paper);color:var(--ink)}
.dl-seg--agent{background:repeating-linear-gradient(135deg,#1A1A1A 0 8px,#141414 8px 16px);box-shadow:inset 0 0 0 1px #2C2C2C;color:#C4C4C4}
.dl-pin{position:absolute;top:56px;left:calc(var(--a) / 9 * 100%);padding-left:14px;font:500 11px/16px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink);white-space:nowrap}
.dl-pin::before{content:"";position:absolute;left:-4px;top:3px;width:8px;height:8px;background:var(--paper);transform:rotate(45deg)}
.dl-pin--end{transform:translateX(-100%);padding:0 14px 0 0}.dl-pin--end::before{left:auto;right:-4px}
.dl-now{position:absolute;top:-38px;height:96px;left:0;width:1.5px;margin-left:-.75px;background:#FF5A36;animation:dlnow 14s linear infinite paused}
.dl-now::before{content:"сейчас";position:absolute;top:-2px;left:6px;font:500 10px/12px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#FF5A36}
.dayline.in .dl-now{animation-play-state:running}
@keyframes dlnow{from{left:0}to{left:100%}}
.is-static .dl-now{animation:none;left:calc(6.5 / 9 * 100%)}
.dl-legend{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:4px;font-size:14px;line-height:20px;color:var(--on-ink-2)}
.dl-legend span{display:inline-flex;align-items:center;gap:10px}
.dl-key{display:inline-block;width:22px;height:12px;border-radius:3px}
.dl-key--you{background:var(--paper)}.dl-key--agent{background:repeating-linear-gradient(135deg,#2A2A2A 0 4px,#161616 4px 8px);box-shadow:inset 0 0 0 1px #3A3A3A}
.dsteps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-top:var(--gap)}
.dstep{display:flex;flex-direction:column;padding:28px;border-radius:20px;background:#111;box-shadow:inset 0 0 0 1px #1F1F1F}
.dstep .when{align-self:flex-start;font:500 11px/16px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--paper);padding:6px 10px;border-radius:8px}
.dstep h3{margin-top:24px;font:500 24px/30px var(--f-head);color:var(--on-ink)}
.dstep>p{margin-top:10px;font-size:15px;line-height:22px;color:var(--on-ink-2)}
.dstep dl{margin-top:auto;padding-top:22px;display:grid;grid-template-columns:auto 1fr;gap:8px 12px;font-size:14px;line-height:20px}
.dstep dt{font:500 11px/20px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-min)}
.dstep dd{color:var(--on-ink)}
@media (prefers-reduced-motion:reduce){.dl-seg{transition:none;transform:none}.dl-now{display:none}}
@media (max-width:1100px){.dsteps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.dayline{padding:18px 16px 16px}.dl-hours span:nth-child(even){display:none}.dl-pin{display:none}.dl-track{height:52px}.dl-now{height:64px}.dl-seg{font-size:0;padding:0}.dsteps{grid-template-columns:1fr}.dstep{padding:24px 20px}.dstep h3{font-size:22px;line-height:28px}}

/* ——— студия: сравнение со студией и генератором; на телефоне строки складываются в карточки ——— */
.cmp-sec{padding:var(--sec) 0}
.cmp{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.cmp th,.cmp td{padding:20px 24px;text-align:left;vertical-align:top;font-size:16px;line-height:24px;box-shadow:inset 0 -1px 0 var(--line)}
.cmp thead th{font:500 20px/26px var(--f-head);color:var(--ink);padding-top:24px}
.cmp thead td{box-shadow:inset 0 -1px 0 var(--line)}
.cmp tbody th{width:22%;font:500 11px/24px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-min)}
.cmp td{color:var(--text-min)}
.cmp .o{background:var(--ink);color:var(--on-ink);box-shadow:inset 0 -1px 0 #222}
.cmp thead .o{color:var(--on-ink);border-radius:20px 20px 0 0}
.cmp tbody tr:last-child .o{border-radius:0 0 20px 20px;box-shadow:none}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{box-shadow:none}
.cmp-cta{margin-top:40px}
@media (max-width:900px){
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto}
  .cmp thead{display:none}
  .cmp tbody{display:grid;gap:16px}
  .cmp tr{padding:20px;border-radius:20px;background:var(--paper-cool)}
  .cmp tbody th,.cmp td,.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{padding:0;box-shadow:none}
  .cmp tbody th{width:auto;margin-bottom:12px;color:var(--ink)}
  .cmp td{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:6px 0}
  .cmp td::before{content:attr(data-o);font:500 11px/24px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-min)}
  .cmp .o,.cmp tbody tr:last-child .o{margin-top:8px;padding:10px 12px;border-radius:12px}
  .cmp .o::before{color:var(--on-ink-min)}
}

/* ——— логотип NextGrade Motion: NEXT ──◆ MOTION / GRADE (знак направления бренда). ◆ — ключевой кадр:
   при загрузке и при наведении едет по линии, за ним проявляется MOTION. Макет — Figma «бренд-бук v1», узел 350:4 ——— */
.lg--motion .ln{position:relative;width:1.45em;margin-bottom:.02em;animation:lg-key .9s var(--ease-out) .25s both}
.lg--motion .ln::after{content:"";position:absolute;right:-.13em;top:50%;width:.24em;height:.24em;margin-top:-.12em;background:inherit;transform:rotate(45deg)}
.lg--motion .dir{margin-left:.16em;animation:lg-word .5s var(--ease-out) .85s both}
.logo:hover .lg--motion .ln{animation:lg-key2 .9s var(--ease-out) both}
.logo:hover .lg--motion .dir{animation:lg-word2 .5s var(--ease-out) .5s both}
@keyframes lg-key{from{width:.2em}to{width:1.45em}}
@keyframes lg-key2{from{width:.2em}to{width:1.45em}}
@keyframes lg-word{from{opacity:0}to{opacity:1}}
@keyframes lg-word2{from{opacity:.2}to{opacity:1}}
.is-static .lg--motion .ln,.is-static .lg--motion .dir{animation:none}
@media (prefers-reduced-motion:reduce){.lg--motion .ln,.lg--motion .dir{animation:none!important}}

/* ——— первый экран: портрет в стекле (рисует ng.js из data-portrait) и его «след» — смаз в движении.
   Слои: холст (фон, портрет, стекло) → след, сдвинут влево и плывёт → копия головы поверх следа, чтобы след был ЗА головой ——— */
.hero-ghost,.hero-head{position:absolute;top:var(--pt);width:var(--pw);height:var(--ph);pointer-events:none;opacity:0;transition:opacity 1.2s var(--ease-out) .6s}
.hero-ghost{left:calc(var(--pl) - var(--pw) * .2);mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40%),linear-gradient(#000 52%,transparent 80%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 40%),linear-gradient(#000 52%,transparent 80%);mask-composite:intersect}
.hero-ghost img{position:absolute;inset:0;width:100%;height:100%;max-width:none;animation:ghost-drift 7s var(--ease-io) infinite alternate}
.hero-head{left:var(--pl);background:url(portrait.webp) 0 0/100% 100% no-repeat;transition-delay:0s;
  -webkit-mask-image:linear-gradient(#000 60%,transparent 70%);mask-image:linear-gradient(#000 60%,transparent 70%)}
.hero.has-portrait .hero-ghost{opacity:.5}
.hero.has-portrait .hero-head{opacity:1}
@keyframes ghost-drift{from{transform:translateX(-6%)}to{transform:translateX(5%)}}
.is-static .hero-ghost img{animation:none;transform:translateX(-2%)}
@media (prefers-reduced-motion:reduce){.hero-ghost img{animation:none}}
@media (max-width:760px){.hero.has-portrait .hero-ghost{opacity:.4}}
/* рядом с портретом заголовок первого экрана чуть меньше, чтобы портрет был крупнее (только компьютер) */
@media (min-width:761px){.hero[data-portrait] .hero-title{font-size:clamp(48px,5.6vw,96px)}}
/* зона головы на портрете: курсор ИИ сюда не летает (data-avoid) */
.hero-face{position:absolute;left:calc(var(--pl) + var(--pw) * .15);top:calc(var(--pt) + var(--ph) * .15);width:calc(var(--pw) * .67);height:calc(var(--ph) * .51);pointer-events:none}
/* на сером фоне с портретом светлый подзаголовок первого экрана сливается — делаем его темнее (контраст ≥ 4,5:1 к самому светлому месту фона) */
.hero[data-portrait] .hero-title .fade-paper{background:none;-webkit-text-fill-color:#4F4F4F;color:#4F4F4F}

/* ——— первый экран с портретом — раскладка по референсу: большой текстовый блок слева сверху (заголовок в одну строку,
   под ним две колонки: серая и чёрная), внизу кнопка слева и ссылка-подпись ближе к центру ——— */
.hero[data-portrait] .hero-copy{margin-top:clamp(28px,6vh,80px);margin-bottom:0}
.hero-lead{display:grid;grid-template-columns:repeat(2,minmax(0,290px));gap:36px;margin-top:32px;font:500 19px/26px var(--f-text);color:var(--ink)}
.hero-lead .muted{color:#555}
.hero-foot{position:relative;margin-top:auto;margin-bottom:clamp(32px,6.5vh,72px);display:flex;align-items:flex-end;gap:32px}
.hero-aside{margin-left:clamp(64px,14vw,280px);display:grid;gap:6px;font-size:15px;line-height:20px;color:#555}
.hero-aside b{display:flex;align-items:center;gap:12px;font:500 22px/28px var(--f-head);color:var(--ink)}
.hero-aside svg{width:18px;height:18px;transition:transform var(--t-base) var(--ease-out)}
.hero-aside:hover svg{transform:translateX(4px)}
@media (max-width:1280px){.hero-aside{margin-left:8px}.hero-lead{grid-template-columns:repeat(2,minmax(0,240px));gap:28px}}
@media (max-width:760px){
  .hero[data-portrait] .hero-copy{margin-top:clamp(32px,9vh,96px)}
  .hero-lead{grid-template-columns:1fr;gap:10px;margin-top:20px;font-size:17px;line-height:24px}
  .hero-foot{margin-top:28px;margin-bottom:0;flex-direction:column;align-items:flex-start;gap:20px}
  .hero-aside{margin-left:0}
  .hero-aside b{font-size:19px;line-height:24px}
}

/* ——— шапка едет за экраном: закреплена сверху; наверху страницы прозрачная, при прокрутке — матовая подложка.
   Выравнивание по .wrap (1440 + поля), место под шапку в первом экране — отступом .hero-in ——— */
html{scroll-padding-top:96px}
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:0 max(var(--pad),calc((100% - 1440px) / 2 + var(--pad)));transition:background var(--t-mid),box-shadow var(--t-mid),backdrop-filter var(--t-mid)}
.nav.is-stuck{background:rgba(251,251,251,.9);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 1px 0 rgba(8,8,8,.08)}
.hero-in{padding-top:88px}
@media (max-width:900px){.hero-in{padding-top:72px}html{scroll-padding-top:80px}
  /* размытие у шапки делает её «коробкой» для выпадающего меню (position:fixed) — на телефоне вместо него плотная подложка */
  .nav.is-stuck,.nav.open{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(251,251,251,.97)}
  .nav.open,.nav.open .nav-links{background:var(--paper)}}

/* ——— логотипы инструментов: лента под первым экраном (едет по кругу, на наведении стоит) и строки в блоке «Наш путь».
   Все логотипы одноцветные: чёрные на светлом, белые на тёмном ——— */
.stack{padding:26px 0;background:var(--paper);box-shadow:inset 0 1px 0 #E2E2E2,inset 0 -1px 0 #E2E2E2}
.stack .wrap{display:flex;align-items:center;gap:40px}
.stack .label{flex:none}
.marquee{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq-track{display:flex;width:max-content;animation:mq 38s linear infinite}
.mq-group{display:flex;align-items:center;gap:52px;padding-right:52px}
.marquee:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.is-static .mq-track{animation:none}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}}
.lg-chip{display:inline-flex;align-items:center;gap:12px;font:500 13px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#353535;white-space:nowrap}
.lg-chip img{height:22px;width:auto;filter:grayscale(1) brightness(0);opacity:.85}
.lg-chip i{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.6}
.lg-chip--s{gap:8px;font-size:11px;letter-spacing:.1em;padding:7px 10px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--line)}
.lg-chip--s img{height:15px}
[data-theme=dark] .lg-chip{color:var(--on-ink)}
[data-theme=dark] .lg-chip img{filter:grayscale(1) brightness(0) invert(1)}
[data-theme=dark] .lg-chip--s{box-shadow:inset 0 0 0 1px #2E2E2E}
.vs-logos{display:flex;flex-wrap:wrap;gap:8px;margin:-10px 0 28px}
.cmp-logos{margin:14px 0 0;gap:6px}
@media (max-width:760px){.stack .wrap{flex-direction:column;align-items:stretch;gap:16px}.stack{padding:22px 0}.mq-group{gap:36px;padding-right:36px}.lg-chip{font-size:12px}.lg-chip img{height:20px}}