/* Сайт «Сонар Пульс» — блоки нижней части: подписи в «Одной системе», главное УТП с подсветкой, «Для кого»,
   «Как подключаем», «Вопросы» и кульминация «Пульсом управляет ИИ» с Сонар Хабом. Дополняет stil.css и sceny.css. */

/* ───────── «Одна система»: подписи и главное УТП ───────── */
.repl li{align-items:start;row-gap:3px}
.repl li>span,.repl li>i{padding-top:1px}
.repl small{grid-column:1/-1;font:400 13px/1.4 var(--f-b);color:var(--text-2)}
.keyline{position:relative;display:flex;align-items:center;gap:12px;margin-top:22px;padding:15px 18px;border-radius:16px;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);background:color-mix(in srgb,var(--b600) 13%,transparent);font:600 16.5px/1.35 var(--f-d);color:var(--text);isolation:isolate}
.keyline .dot{flex:none}
.keyline>i{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden}
.keyline>i::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 22%,color-mix(in srgb,var(--accent) 26%,transparent) 50%,transparent 78%);transform:translateX(-100%);animation:sheen 5.6s ease-in-out infinite}
.keyline::after{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 34%,transparent),0 0 36px 0 color-mix(in srgb,var(--b500) 42%,transparent);opacity:.3;pointer-events:none;animation:breath 4.2s ease-in-out infinite alternate}
@keyframes sheen{0%,30%{transform:translateX(-100%)}72%,100%{transform:translateX(100%)}}
@keyframes breath{to{opacity:1}}

/* ───────── «Для кого» ───────── */
.sg>p{position:relative;margin-top:10px;font:400 14.5px/1.5 var(--f-b);color:var(--text-2)}

/* ───────── «Как подключаем» ───────── */
.how{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:44px;align-items:start}
.how h2{font:600 clamp(30px,3.4vw,46px)/1.1 var(--f-d);letter-spacing:-.015em;text-wrap:balance}
.how-t>p{margin-top:18px;font:400 clamp(16px,1.35vw,19px)/1.55 var(--f-b);color:var(--text-2);text-wrap:pretty}
.how-t .note{margin-top:18px;font-size:13.5px;line-height:1.5}
.steps{display:grid;margin:6px 0 0;padding:0;list-style:none;counter-reset:st}
.steps li{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);gap:18px;padding-bottom:26px;counter-increment:st}
.steps li:last-child{padding-bottom:0}
.steps li::before{content:counter(st);position:relative;z-index:1;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 48%,transparent);background:var(--base);font:600 15px/1 var(--f-d);color:var(--accent)}
.steps li:not(:last-child)::after{content:"";position:absolute;left:17.5px;top:36px;bottom:0;width:1px;background:color-mix(in srgb,var(--accent) 26%,transparent)}
.steps h3{padding-top:7px;font:600 17px/1.3 var(--f-d)}
.steps p{margin-top:6px;font:400 14.5px/1.5 var(--f-b);color:var(--text-2)}

/* ───────── «Вопросы» ───────── */
.faq{display:grid;gap:10px;max-width:880px;margin-top:40px}
.faq details{border-radius:18px;border:1px solid var(--bd-s);background:color-mix(in srgb,var(--card) 55%,transparent);transition:border-color .3s}
.faq details[open]{border-color:var(--bd)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;font:600 17px/1.3 var(--f-d);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:9px;height:9px;margin-top:-5px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .3s var(--e-out),margin-top .3s var(--e-out)}
.faq details[open] summary::after{margin-top:4px;transform:rotate(-135deg)}
.faq p{max-width:740px;padding:0 22px 20px;font:400 15px/1.55 var(--f-b);color:var(--text-2)}

/* ───────── Кульминация: «Пульсом управляет ИИ» ───────── */
.apex{position:relative;z-index:1;margin-top:clamp(96px,12vw,150px);padding:clamp(92px,10vw,144px) 24px clamp(64px,7vw,96px);overflow:hidden;isolation:isolate;text-align:center}
.apex-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--b600) 30%,var(--base)) 0%,color-mix(in srgb,var(--b600) 10%,var(--base)) 44%,var(--base) 100%)}
.apex-bg::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent) 28%,#fff 50%,var(--accent) 72%,transparent);transform:scaleX(0);opacity:.95}
.apex-bg::after{content:"";position:absolute;left:50%;top:-300px;width:1200px;height:600px;margin-left:-600px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--b500) 58%,transparent),transparent);opacity:0}
.apex.in .apex-bg::before{transform:scaleX(1);transition:transform 1.2s var(--e-out)}
.apex.in .apex-bg::after{opacity:.95;transition:opacity 1.5s ease .15s}
.apex-bg .grid{position:absolute;inset:0;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:48px 48px;-webkit-mask:radial-gradient(60% 46% at 50% 22%,#000,transparent 78%);mask:radial-gradient(60% 46% at 50% 22%,#000,transparent 78%)}
.apex-bg .sonar{top:250px;z-index:0}
.burst{position:absolute;left:50%;top:250px;width:0;height:0}
.burst i{position:absolute;left:-270px;top:-270px;width:540px;height:540px;border-radius:50%;border:1.5px solid var(--accent);box-shadow:0 0 44px 0 color-mix(in srgb,var(--b500) 55%,transparent),inset 0 0 44px 0 color-mix(in srgb,var(--b500) 30%,transparent);opacity:0}
.apex.in .burst i{animation:pr 2.8s var(--e-out) both;animation-delay:calc(var(--n)*.24s + .1s)}
.apex-in{position:relative;max-width:1120px;margin:0 auto}
.apex h2{margin-top:24px;font:600 clamp(34px,5.8vw,80px)/1.03 var(--f-d);letter-spacing:-.025em;text-wrap:balance}
.apex-sub{max-width:700px;margin:24px auto 0;font:400 clamp(16px,1.4vw,20px)/1.55 var(--f-b);color:var(--text-2);text-wrap:pretty}
.rise{opacity:0;transform:translateY(22px)}
.apex.in .rise{opacity:1;transform:none;transition:opacity .7s var(--e-out) var(--d,0s),transform .8s var(--e-out) var(--d,0s)}
.talk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:52px;text-align:left}
.tc{display:grid;gap:12px;align-content:start;padding:22px;border-radius:24px;background:var(--card);border:1px solid var(--bd);box-shadow:var(--shadow)}
.tc header{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.tc header b{font:600 19px/1.2 var(--f-d)}
.tc header span{font:400 13px/1.3 var(--f-b);color:var(--muted)}
.tc .me{justify-self:end;display:flex;align-items:flex-start;gap:9px;max-width:90%;padding:10px 14px;border-radius:16px 16px 4px 16px;background:var(--b600);color:#fff;font:400 15px/1.4 var(--f-b)}
.tc .me svg{flex:none;margin-top:2px;opacity:.9}
.tc .ai{display:grid;gap:10px;padding:14px 16px;border-radius:16px 16px 16px 4px;background:color-mix(in srgb,var(--base) 55%,transparent);border:1px solid var(--bd-s);font:400 15px/1.5 var(--f-b);color:var(--text-2)}
.tc .ai b{font-weight:600;color:var(--text)}
.tc .ai .mut{font-size:13px;line-height:1.45;color:var(--muted)}
.was{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;padding:10px 12px;border-radius:12px;background:var(--hover);font:400 13px/1.3 var(--f-b)}
.was span{color:var(--muted)}
.was i{font-style:normal;color:var(--text-2);text-decoration:line-through;text-decoration-color:var(--muted)}
.was b{font:600 16px/1 var(--f-d)!important;color:var(--accent)!important}
.lnk{display:flex;flex-wrap:wrap;gap:6px}
.lnk span{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:9px;border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);background:color-mix(in srgb,var(--accent) 9%,transparent);font:500 13px/1 var(--f-b);color:var(--accent)}
.lnk span::after{content:"↗";font-size:12px;opacity:.85}
.hubkit{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;gap:30px;align-items:center;margin-top:16px;padding:28px 30px;border-radius:24px;border:1px solid color-mix(in srgb,var(--accent) 36%,transparent);background:linear-gradient(120deg,color-mix(in srgb,var(--b600) 24%,var(--card)),var(--card) 62%);text-align:left}
.hubkit h3{font:600 clamp(22px,2.2vw,28px)/1.15 var(--f-d);letter-spacing:-.01em;text-wrap:balance}
.hubkit p{margin-top:10px;font:400 15px/1.55 var(--f-b);color:var(--text-2)}
.hubkit .models{margin-top:14px}
.hk-list{display:grid;gap:10px;margin:0;padding:0;list-style:none;font:400 14.5px/1.4 var(--f-b);color:var(--text-2)}
.hk-list li{position:relative;padding-left:24px}
.hk-list li::before{content:"";position:absolute;left:2px;top:5px;width:10px;height:6px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.apex+.final{margin-top:0}

/* ───────── Узкие экраны ───────── */
@media (max-width:1060px){.links{display:none}}
@media (max-width:899px){
  .how{grid-template-columns:minmax(0,1fr);gap:28px}
  .faq summary{padding:16px 18px;font-size:16px}
  .faq p{padding:0 18px 18px}
  .apex{padding:76px 16px 56px}
  .talk{grid-template-columns:minmax(0,1fr);margin-top:36px}
  .tc{padding:18px}
  .hubkit{grid-template-columns:minmax(0,1fr);gap:20px;padding:22px 20px}
  .hubkit .btn{width:100%}
  .burst,.apex-bg .sonar{top:170px}
}
@media (prefers-reduced-motion:reduce){
  .keyline>i::before,.keyline::after{animation:none}
  .burst{display:none}
  .rise{opacity:1;transform:none}
}

/* ───────── Луч большого сонара: вращается внутри неподвижной маски ─────────
   Маска гасит луч у центра и ниже окна — иначе яркий клин ложится на следующий блок. */
.sonar .sweep{background:none;animation:none;-webkit-mask:radial-gradient(closest-side,transparent 0,transparent 27%,#000 43%,#000 50%,transparent 76%),linear-gradient(to bottom,#000 0,#000 59%,transparent 70%);mask:radial-gradient(closest-side,transparent 0,transparent 27%,#000 43%,#000 50%,transparent 76%),linear-gradient(to bottom,#000 0,#000 59%,transparent 70%);-webkit-mask-composite:source-in;mask-composite:intersect}
.sonar .sweep::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 45deg,transparent 0deg,transparent 285deg,color-mix(in srgb,var(--accent) 7%,transparent) 318deg,color-mix(in srgb,var(--accent) 24%,transparent) 356deg,color-mix(in srgb,var(--accent) 46%,transparent) 360deg);animation:spin 8s linear infinite}
.sonar .sweep::after{animation:beamline 8s linear infinite}
@keyframes beamline{from{transform:rotate(45deg)}to{transform:rotate(405deg)}}
@media (prefers-reduced-motion:reduce){.sonar .sweep::before,.sonar .sweep::after{animation:none}}

/* ───────── Круг полного цикла проявляется, пока большой сонар растворяется (прозрачность задаёт scena.js) ───────── */
.ring{transform-origin:50% 50%}

/* ───────── Сетка и свечение — по всей странице, как на aisonar.ru (Денис 12.11: «клетка должна остаться») ─────────
   У каждого блока свой участок клетки с мягкой круглой маской и пятно свечения; стороны чередуются. */
.sec::before,.final::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:50%;top:-60px;width:min(1560px,100vw);height:700px;margin-left:calc(min(1560px,100vw)/-2);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:48px 48px;-webkit-mask:radial-gradient(46% 52% at var(--gx,24%) 44%,#000,transparent 80%);mask:radial-gradient(46% 52% at var(--gx,24%) 44%,#000,transparent 80%)}
.sec::after{content:"";position:absolute;z-index:-1;pointer-events:none;left:calc(50% + var(--bx,-700px));top:var(--by,-80px);width:780px;height:620px;border-radius:50%;background:radial-gradient(closest-side,var(--bc,var(--glow-1)) 0%,color-mix(in oklab,var(--bc,var(--glow-1)) 62%,transparent) 38%,color-mix(in oklab,var(--bc,var(--glow-1)) 20%,transparent) 70%,transparent 100%);opacity:calc(var(--glow-a)*.5)}
#sistema{--gx:26%;--bx:-760px;--by:40px}
#nabor{--gx:76%;--bx:40px;--bc:var(--glow-3)}
#signaly{--gx:24%;--bx:-720px;--bc:var(--glow-2)}
#dlya-kogo{--gx:74%;--bx:20px}
#podklyuchenie{--gx:22%;--bx:-740px;--bc:var(--glow-3)}
#voprosy{--gx:70%;--bx:0px;--bc:var(--glow-2)}
.final::before{top:auto;bottom:0;--gx:50%;-webkit-mask:radial-gradient(60% 70% at 50% 80%,#000,transparent 78%);mask:radial-gradient(60% 70% at 50% 80%,#000,transparent 78%)}
@media (max-width:899px){
  .sec::after{left:calc(50% - 390px);opacity:calc(var(--glow-a)*.4)}
}

/* ───────── «Частые вопросы» — последний блок страницы (Денис 12.11), после заявки ───────── */
#voprosy{padding-bottom:clamp(72px,8vw,112px)}
.final+#voprosy{padding-top:clamp(56px,6vw,88px)}
.faq-more{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:26px;font:400 15px/1.5 var(--f-b);color:var(--text-2)}

/* ───────── Вход в «А теперь главное» без полосы и резкой границы (Денис 12.11: «грубый и резкий переход») ─────────
   Фон блока — купол свечения вокруг заголовка, а не прямоугольник: он начинается выше блока и гаснет маской сверху и снизу.
   Сверху в блок входит тонкая линия-сигнал, от её конца расходятся волны. */
.apex{--pt:clamp(92px,10vw,144px);padding-top:var(--pt);overflow-x:clip;overflow-y:visible}
.apex-bg{inset:-220px 0 0;background:radial-gradient(ellipse 88% 620px at 50% 470px,color-mix(in srgb,var(--b600) 40%,transparent) 0%,color-mix(in srgb,var(--b600) 18%,transparent) 52%,transparent 100%);-webkit-mask:linear-gradient(to bottom,transparent 0,#000 320px,#000 calc(100% - 240px),transparent 100%);mask:linear-gradient(to bottom,transparent 0,#000 320px,#000 calc(100% - 240px),transparent 100%)}
.apex-bg::before{content:none}
.apex-bg::after{top:190px;width:1100px;height:560px;margin-left:-550px}
.apex-bg .grid{-webkit-mask:radial-gradient(58% 540px at 50% 470px,#000,transparent 80%);mask:radial-gradient(58% 540px at 50% 470px,#000,transparent 80%)}
.apex-bg .sonar,.burst{top:470px}
.apex.in .burst i{animation-delay:calc(var(--n)*.24s + .6s)}
.apex-in::before{content:"";position:absolute;left:50%;top:calc(-1*var(--pt) - 64px);width:1px;height:calc(var(--pt) + 56px);background:linear-gradient(to bottom,transparent 0,color-mix(in srgb,var(--accent) 50%,transparent) 55%,var(--accent) 100%);transform-origin:50% 0;transform:scaleY(0);pointer-events:none}
.apex.in .apex-in::before{transform:scaleY(1);transition:transform .9s var(--e-out)}
@media (max-width:899px){
  .apex{--pt:76px}
  .apex-bg .sonar,.burst{top:390px}
  .apex-bg::after{top:150px;width:760px;margin-left:-380px}
}
@media (prefers-reduced-motion:reduce){.apex-in::before{transform:none}}

/* ───────── Блоки проявляются по мере прокрутки (класс ставит scena.js; без скрипта всё видно сразу) ───────── */
.rv{opacity:0;transform:translateY(18px)}
.rv.in{opacity:1;transform:none;transition:opacity .7s var(--e-out),transform .8s var(--e-out)}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* подвал: продукты без своей страницы — текстом, не ссылкой */
.foot nav span{color:var(--text-2);font-weight:400}

/* ───────── Блок заявки без сонара (Денис 12.11: «в конце его вообще уберём… только сетка с цветовыми акцентами») ───────── */
.final::before{top:0;bottom:auto;height:100%;-webkit-mask:radial-gradient(56% 46% at 50% 48%,#000,transparent 80%);mask:radial-gradient(56% 46% at 50% 48%,#000,transparent 80%)}
.final::after{content:"";position:absolute;z-index:-1;pointer-events:none;left:50%;top:50%;width:820px;height:480px;margin:-240px 0 0 -410px;border-radius:50%;background:radial-gradient(closest-side,var(--glow-3) 0%,color-mix(in oklab,var(--glow-3) 58%,transparent) 40%,color-mix(in oklab,var(--glow-3) 18%,transparent) 72%,transparent 100%);opacity:calc(var(--glow-a)*.42)}

/* ───────── Пульс заявки: заголовок и три кнопки по очереди мягко загораются и гаснут, по кругу ─────────
   Круг — 8 секунд, по 2 секунды на шаг. Кнопки в покое одинаковые, «горит» одна — как главная кнопка.
   Навели мышь на кнопки — пульс останавливается, горит та, на которой курсор. Без движения — первая кнопка главная, как раньше. */
@media (prefers-reduced-motion:no-preference){
  .final>h2{animation:puls-h 8s ease-in-out infinite}
  .final .cta .btn{background:var(--glass);color:var(--text);border-color:var(--bd);box-shadow:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:puls-b 8s ease-in-out infinite}
  .final .cta .btn:nth-child(1){animation-delay:2s}
  .final .cta .btn:nth-child(2){animation-delay:4s}
  .final .cta .btn:nth-child(3){animation-delay:6s}
  .final:has(.cta:hover)>h2,.final .cta:hover .btn,.final:has(.cta :focus-visible)>h2,.final .cta:has(:focus-visible) .btn{animation:none}
  .final .cta .btn:hover,.final .cta .btn:focus-visible{background:var(--b600);color:#fff;border-color:transparent;box-shadow:0 0 0 1px rgba(196,181,253,.45),0 0 18px 2px rgba(167,139,250,.45),0 10px 36px -6px rgba(139,92,246,.55)}
}
@keyframes puls-h{
  0%,27%,100%{text-shadow:0 0 0 transparent;transform:none}
  8%{text-shadow:0 0 26px color-mix(in srgb,var(--b400) 78%,transparent),0 0 72px color-mix(in srgb,var(--b500) 48%,transparent);transform:scale(1.018)}
  17%{text-shadow:0 0 22px color-mix(in srgb,var(--b400) 60%,transparent),0 0 60px color-mix(in srgb,var(--b500) 34%,transparent);transform:scale(1.012)}
}
@keyframes puls-b{
  0%,27%,100%{background:var(--glass);color:var(--text);border-color:var(--bd);box-shadow:0 0 0 0 transparent;transform:none}
  8%{background:var(--b600);color:#fff;border-color:transparent;box-shadow:0 0 0 1px rgba(196,181,253,.45),0 0 24px 4px rgba(167,139,250,.5),0 10px 36px -6px rgba(139,92,246,.55);transform:scale(1.035)}
  17%{background:var(--b600);color:#fff;border-color:transparent;box-shadow:0 0 0 1px rgba(196,181,253,.38),0 0 18px 2px rgba(167,139,250,.4),0 10px 32px -8px rgba(139,92,246,.5);transform:scale(1.02)}
}

/* ───────── Карточки и шаги оживают под курсором (Денис 12.11: «более живое ощущение… эффект движения, чуть-чуть подсветки») ─────────
   Карточка приподнимается, рамка и тень берут её цвет, угловое свечение растёт, а под указателем идёт мягкое пятно света
   (координаты --mx / --my ставит scena.js) — как «свет за курсором» на sonar-speech.ru. Только для устройств с мышью. */
.sg,.facts article{transition:transform .45s var(--e-out),border-color .35s ease,box-shadow .45s var(--e-out)}
.sg::before{transition:transform .6s var(--e-out),opacity .45s ease;opacity:.8}
.sg::after,.facts article::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--c,var(--accent)) 16%,transparent),transparent 70%)}
.facts article{position:relative;overflow:hidden}
.sg li::before{transition:background-color .35s ease,box-shadow .35s ease}
.steps li{transition:transform .4s var(--e-out)}
.steps li::before{transition:background-color .35s ease,color .35s ease,border-color .35s ease,box-shadow .45s var(--e-out)}
.steps h3,.facts article>b,.facts h3{transition:color .35s ease}
@media (hover:hover){
  .sg:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--c) 52%,transparent);box-shadow:0 22px 48px -24px color-mix(in srgb,var(--c) 60%,transparent),0 0 0 1px color-mix(in srgb,var(--c) 16%,transparent)}
  .sg:hover::before{transform:scale(1.45);opacity:1}
  .sg:hover::after,.facts article:hover::after{opacity:1}
  .sg:hover li::before{background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}
  .facts article:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 42%,transparent);box-shadow:0 20px 44px -24px color-mix(in srgb,var(--b500) 60%,transparent)}
  .steps li:hover{transform:translateX(6px)}
  .steps li:hover::before{background:var(--b600);border-color:transparent;color:#fff;box-shadow:0 0 0 5px color-mix(in srgb,var(--b500) 22%,transparent),0 0 22px 2px color-mix(in srgb,var(--b500) 50%,transparent)}
  .steps li:hover h3{color:var(--accent)}
}
@media (prefers-reduced-motion:reduce){
  .sg:hover,.facts article:hover,.steps li:hover{transform:none}
}

/* ───────── Окно после подъёма ещё немного стоит на месте (Денис 13.11: «платформа по сути пролистывается») ─────────
   К 60 % высоты экрана, за которые окно встаёт, добавлено 24 % «стоянки»: случайный лишний прокрут окно не уносит. */
.page:not([data-still]) .track{height:calc(100vh - var(--nav-h) + 84vh)}

/* ───────── «Одна система»: блок замирает, строки зажигаются по шагам (Денис 13.11, вариант «Шаг за шагом») ─────────
   Заголовок уезжает как обычно; список с кругом закрепляются по центру экрана. Высоту дорожки, отступ сверху и длину
   шага считает scena.js (--stage-h, --stage-top, --steps-len). На телефоне и при «уменьшить движение» — обычный список. */
.steptrack{position:relative;margin-top:30px}
.page:not([data-still]) .steptrack{height:calc(var(--stage-h,560px) + var(--steps-len,150vh))}
.page:not([data-still]) .stepstage{position:sticky;top:var(--stage-top,120px)}
.stepstage .repl{margin-top:10px}
.stepno{display:none;height:18px;font:500 12px/18px var(--f-m);letter-spacing:.06em;color:var(--muted)}
.stepno b{font-weight:600;color:var(--accent)}
.page:not([data-still]) .stepno{display:block}
.repl li{position:relative;z-index:0;transform-origin:0 50%;transition:opacity .45s ease,transform .55s var(--e-out)}
.repl li::before{content:"";position:absolute;z-index:-1;inset:0 -16px;border-radius:14px;background:linear-gradient(90deg,color-mix(in srgb,var(--b600) 24%,transparent),color-mix(in srgb,var(--b600) 7%,transparent) 72%,transparent);box-shadow:inset 2px 0 0 var(--accent),0 0 34px -10px color-mix(in srgb,var(--b500) 60%,transparent);opacity:0;transition:opacity .45s ease}
/* приглушаем только «что у других» и подписи неактивных строк; правая часть — «наше» — яркая всегда (Денис 13.11:
   «а то сливается, что у других и что у нас») */
.repl li>span,.repl li>i,.repl li>small{transition:opacity .28s ease,color .28s ease}
.repl.stepping li:not(.on)>span,.repl.stepping li:not(.on)>i{opacity:.42}
.repl.stepping li:not(.on)>small{opacity:.5}
.repl.stepping li.on{opacity:1;transform:scale(1.045)}
.repl.stepping li.on::before{opacity:1}
.repl.stepping li.on>span{color:var(--text-2)}
.repl.stepping li.on small{color:var(--text)}
/* круг в ручном режиме: луч указывает на шаг строки, шаг горит, остальные приглушены */
.ring .nd{transition:opacity .45s ease}
.ring .nd::before{transition:background-color .35s ease,transform .5s var(--e-out),box-shadow .5s var(--e-out)}
.ring.manual .beam{animation:none;transform:rotate(var(--bang,0deg));transition:transform .75s var(--e-out)}
.ring.manual .nd::before,.ring.manual .nd::after,.ring.manual .nd b{animation:none}
.ring.manual .nd{opacity:.42}
.ring.manual .nd.lit{opacity:1}
.ring.manual .nd.lit::before{background:var(--accent);transform:scale(1.6);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 20%,transparent),0 0 18px 3px color-mix(in srgb,var(--accent) 55%,transparent)}
.ring.manual .nd.lit b{color:var(--accent)}

/* ───────── «Автонабор» оживает сам: счётчик и факты загораются по очереди (класс .lit ставит scena.js) ───────── */
.calc{transition:border-color .45s ease,box-shadow .6s var(--e-out)}
.calc.lit{border-color:color-mix(in srgb,var(--accent) 50%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent),0 24px 60px -26px color-mix(in srgb,var(--b500) 70%,transparent)}
.calc-r b{transition:color .4s ease}
.calc.lit .calc-r b{color:var(--accent)}
.facts article.lit{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 46%,transparent);box-shadow:0 20px 44px -24px color-mix(in srgb,var(--b500) 62%,transparent)}
.facts article.lit::after{opacity:1}
.facts article.lit h3{color:var(--accent)}
@media (prefers-reduced-motion:reduce){.repl li,.ring .nd{transition:none}}
/* Строки не раздвигаются (Денис 13.11: «строка должна просто увеличиться и встать на место, чтобы всё остальное
   не скакало»): подписи видны у всех строк, текущая только увеличивается и подсвечивается. Если блок не помещается
   на экране по высоте, scena.js ставит .nopin — блок не замирает, строки подсвечиваются по ходу прокрутки. */
.stepstage .repl li{padding:9px 0}
.page:not([data-still]) .steptrack.nopin{height:auto}
.page:not([data-still]) .steptrack.nopin .stepstage{position:static}
.page:not([data-still]) .steptrack.nopin .stepno{display:none}

/* ───────── «Автонабор»: плашка в фокусе увеличивается и подсвечивается по ходу прокрутки (Денис 13.11) ─────────
   Класс .lit ставит scena.js по положению блока на экране; остальные плашки слегка приглушаются. */
.calc{transition:transform .55s var(--e-out),opacity .45s ease,border-color .45s ease,box-shadow .6s var(--e-out)}
.facts article{transition:transform .55s var(--e-out),opacity .45s ease,border-color .35s ease,box-shadow .45s var(--e-out)}
.calc.lit{transform:scale(1.025)}
.facts article.lit{transform:scale(1.04)}
.dial.focus .calc:not(.lit),.dial.focus .facts article:not(.lit){opacity:.6}
.facts article.lit>b{color:var(--text)}
@media (hover:hover){.dial.focus .facts article:hover,.dial.focus .calc:hover{opacity:1}}
@media (prefers-reduced-motion:reduce){.calc.lit,.facts article.lit{transform:none}}

/* блок с шагами отзывается быстрее (Денис 13.11: «тяжело листается») */
.repl li{transition:opacity .28s ease,transform .36s var(--e-out)}
.repl li::before{transition:opacity .28s ease}
.ring.manual .beam{transition:transform .5s var(--e-out)}
.ring .nd{transition:opacity .3s ease}

/* светлая тема: приглушение мягче — на светлом фоне бледный текст терялся (проверка 13.11) */
:root[data-theme="light"] .repl.stepping li:not(.on)>span,:root[data-theme="light"] .repl.stepping li:not(.on)>i{opacity:.62}
:root[data-theme="light"] .repl.stepping li:not(.on)>small{opacity:.7}
:root[data-theme="light"] .ring.manual .nd:not(.lit){opacity:.62}
:root[data-theme="light"] .dial.focus .calc:not(.lit),:root[data-theme="light"] .dial.focus .facts article:not(.lit){opacity:.76}