/* ============================================================
   Генераторы. Мир кадра: ночной цех, сигнально-красный корпус,
   тёплый свет, который возвращается.
   ============================================================ */
:root{
  --canvas:#0E1116;
  --panel:#161B22;
  --panel-2:#1C232C;
  --accent:#D8281F;
  --accent-hover:#B31C15;
  --accent-muted:rgba(216,40,31,.22);
  --warm:#F2A93B;
  --text-primary:#ECEFF3;
  --text-secondary:#9AA6B2;
  --text-3:#71808E;
  --hairline:rgba(236,239,243,.10);
  --border-strong:rgba(236,239,243,.24);
  --ok:#3FB96B;

  --f-disp:'Oswald','Golos Text',system-ui,sans-serif;
  --f-body:'Golos Text',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
  --wrap:1180px;
  --gut:clamp(18px,4vw,44px);
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--text-primary);
  font:400 17px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:#fff;padding:12px 18px;border-radius:0 0 10px 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.wrap--narrow{max-width:860px}

/* --- одно окружение на всю страницу: очень медленное тёплое пятно --- */
.env{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 45% at 72% 18%,rgba(242,169,59,.055),transparent 70%),
             radial-gradient(50% 40% at 12% 82%,rgba(216,40,31,.05),transparent 70%);
  animation:envdrift 90s var(--ease) -20s infinite alternate;
}
@keyframes envdrift{to{transform:translate3d(0,-2.5%,0) scale(1.06)}}

/* ============================ ШАПКА САЙТА ============================ */
.nav{position:sticky;top:0;z-index:60;backdrop-filter:blur(14px);background:rgba(14,17,22,.72);border-bottom:1px solid var(--hairline)}
.nav__in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);height:64px;display:flex;align-items:center;gap:26px}
.nav__brand{display:flex;align-items:center;gap:10px;font:700 15px/1 var(--f-disp);letter-spacing:-.01em;text-decoration:none}
.nav__links{display:flex;gap:22px;margin-left:auto;font-size:14.5px}
.nav__links a{color:var(--text-secondary);text-decoration:none;transition:color .2s var(--ease)}
.nav__links a:hover{color:var(--text-primary)}
.nav__tel{font:500 15px/1 var(--f-mono);text-decoration:none;white-space:nowrap}
@media (max-width:860px){.nav__links{display:none}.nav__tel{margin-left:auto}}

/* ============================ СКРАБ-ШАПКА ============================ */
.hero{position:relative;height:400vh;z-index:1}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#0A0D11}
.poster{position:absolute;inset:0;background-size:cover;background-position:50% 50%;transition:opacity .6s var(--ease)}
#hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease);will-change:transform;transform:translateZ(0)}
.stage.video-ready #hero-video{opacity:1}
.stage.video-ready .poster{opacity:0}
.stage.video-failed #hero-video{display:none}

/* слой 1: общий скрим, чтобы ни один кадр не был сырым под текстом */
.scrim{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,18,0) 35%,rgba(10,10,18,.62) 100%)}

.ring{position:absolute;left:50%;bottom:38px;transform:translateX(-50%) rotate(-90deg);width:44px;height:44px;color:rgba(236,239,243,.55)}
.ring circle{transition:stroke-dashoffset .12s linear}

.bands{position:absolute;inset:0;display:block}
.band{
  position:absolute;left:var(--gut);top:50%;transform:translateY(-50%);
  width:min(46ch,44vw);opacity:0;text-shadow:var(--tshadow);
}
/* слой 2: скрим под каждой полосой, дышит вместе с ней и не гасит углы */
.band::before{content:"";position:absolute;inset:-14% -12%;pointer-events:none;border-radius:40px;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 74% 70% at 40% 50%,rgba(5,5,10,.68) 0%,rgba(5,5,10,.44) 46%,rgba(5,5,10,0) 76%)}
.band__h{position:relative;margin:0;font:700 clamp(30px,4.3vw,60px)/1.06 var(--f-disp);letter-spacing:-.01em;text-transform:uppercase}
.band__sub{position:relative;margin:18px 0 0;font-size:clamp(15px,1.35vw,18px);color:#C9D3DC;max-width:34ch}
.band__cta{position:relative;margin-top:26px}
.band .btn{text-shadow:none}
.band--settle{width:min(52ch,48vw)}

.split{display:inline}
.w{display:inline-block;white-space:pre}
.c{display:inline-block}

/* появления, привязанные к прогрессу сборки полосы --k */
[data-fx="drift"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * -26px))}
[data-fx="rise"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 22px))}
[data-fx="rise"] .band__sub{opacity:clamp(0,(var(--k,0) - .5)*3,1);
  transform:translateY(calc((1 - clamp(0,(var(--k,0) - .5)*3,1)) * 14px))}
[data-fx="rise"] .band__cta{opacity:clamp(0,(var(--k,0) - .68)*4,1);
  transform:translateY(calc((1 - clamp(0,(var(--k,0) - .68)*4,1)) * 14px))}
[data-fx="scatter"] .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px)))
            rotate(calc((1 - var(--kc))*var(--jr,0deg)))}
/* «фокус»: строка приходит из лёгкой расфокусировки в резкость.
   Размытие статичное на подложке, анимируется только прозрачность и масштаб. */
[data-fx="focus"] .band__h{position:relative}
[data-fx="focus"] .band__h .nosplit{display:block;transform:scale(calc(.955 + .045*var(--k,1)));
  transform-origin:0 50%}
[data-fx="focus"] .band__h::before{content:attr(data-ghost);position:absolute;inset:0;
  filter:blur(9px);opacity:calc(1 - var(--k,1));pointer-events:none}

.band__sub,.band__cta{transition:none}

/* --- статичная шапка --- */
.statichero{position:absolute;inset:0;display:none;flex-direction:column;justify-content:center;
  padding:0 var(--gut);text-shadow:var(--tshadow)}
.statichero h1{margin:0 0 16px;font:700 clamp(30px,7.6vw,46px)/1.08 var(--f-disp);letter-spacing:-.005em;max-width:15ch;text-transform:uppercase}
.statichero p{margin:0 0 26px;font-size:16px;color:#C9D3DC;max-width:38ch}
.statichero .btn{align-self:flex-start;text-shadow:none}
body.static-hero .hero{height:88vh}
body.static-hero .stage{height:88vh}
body.static-hero .bands,body.static-hero .ring{display:none}
body.static-hero .statichero{display:flex}
body.static-hero .poster{opacity:1}
body.static-hero #hero-video{display:none}

/* ============================ КНОПКИ ============================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:11px;border:1px solid transparent;
  font:500 15.5px/1 var(--f-body);text-decoration:none;cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn--accent{background:var(--accent);color:#fff}
.btn--accent:hover{background:var(--accent-hover)}
.btn--ghost{background:transparent;color:var(--text-primary);border-color:var(--border-strong)}
.btn--ghost:hover{border-color:var(--text-primary)}
.btn--block{width:100%}
button.btn{font-family:var(--f-body)}
@media (pointer:coarse){.btn{min-height:44px}}

/* ============================ РАЗДЕЛЫ ============================ */
.sec{position:relative;z-index:1;padding:clamp(64px,9vw,120px) 0;border-top:1px solid var(--hairline);background:var(--canvas)}
.kicker{margin:0 0 14px;font:500 12.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.h2{margin:0 0 26px;font:700 clamp(26px,3.3vw,42px)/1.14 var(--f-disp);letter-spacing:-.022em;max-width:20ch}
.lede{margin:0;font-size:clamp(16px,1.35vw,18.5px);line-height:1.62;color:var(--text-secondary);max-width:62ch}
.note{margin:14px 0 0;font-size:13.5px;color:var(--text-3);max-width:70ch}
.fine{margin:12px 0 0;font-size:13px;color:var(--text-3)}

/* появление раздела */
.sec>.wrap>*{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.sec.in>.wrap>*{opacity:1;transform:none}
.sec.in>.wrap>*:nth-child(2){transition-delay:.07s}
.sec.in>.wrap>*:nth-child(3){transition-delay:.14s}
.sec.in>.wrap>*:nth-child(4){transition-delay:.2s}
.sec.in>.wrap>*:nth-child(5){transition-delay:.26s}
/* задержки снимаем после входа, иначе наведение будет тормозить навсегда */
.sec.in>.wrap>*:nth-child(n){transition-delay:0s}

/* --- настоящая цифра --- */
.power__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:center}
@media (max-width:900px){.power__grid{grid-template-columns:1fr}}
.oneline{width:100%;height:auto}
.oneline__p{stroke:var(--accent);stroke-width:2;fill:none;stroke-linecap:round}
.oneline__d{fill:var(--accent)}
.oneline__b{fill:none;stroke:var(--border-strong);stroke-width:1.5}
.oneline__t{fill:var(--text-3);font:400 11px var(--f-mono)}

.stats{list-style:none;margin:clamp(32px,5vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:820px){.stats{grid-template-columns:1fr}}
.stat{position:relative;padding:24px;border:1px solid var(--hairline);border-radius:14px;background:var(--panel);overflow:hidden}
.stat__n{display:block;font:700 clamp(30px,3.6vw,44px)/1 var(--f-disp);letter-spacing:-.02em;color:var(--text-primary)}
.stat span{display:block;margin-top:10px;font-size:14.5px;color:var(--text-secondary);max-width:30ch}
.stat__bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:linear-gradient(90deg,var(--accent),transparent);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1s var(--ease-out) .2s}
.sec.in .stat__bar{transform:scaleX(1)}

/* --- подбор --- */
.pick{border:1px solid var(--hairline);border-radius:16px;background:var(--panel);padding:clamp(20px,3vw,30px)}
.pick__bar{height:3px;background:rgba(236,239,243,.08);border-radius:2px;overflow:hidden;margin-bottom:22px}
.pick__bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .35s var(--ease)}
.q__n{margin:0 0 6px;font:500 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.q__h{margin:0 0 18px;font:700 clamp(19px,2.1vw,25px)/1.2 var(--f-disp);letter-spacing:-.015em}
.q__opts{display:grid;gap:9px}
.opt{text-align:left;padding:15px 17px;border:1px solid var(--hairline);border-radius:11px;background:var(--panel-2);
  color:var(--text-primary);font:400 15.5px/1.4 var(--f-body);cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
.opt:hover{border-color:var(--accent);background:#20272F}
.opt.is-on{border-color:var(--accent);background:#20272F}
.res{display:grid;grid-template-columns:210px 1fr;gap:24px;align-items:start}
@media (max-width:640px){.res{grid-template-columns:1fr}}
.res img{border-radius:12px;background:#0A0D11}
.res__range{margin:0 0 8px;font-size:14.5px;color:var(--text-secondary)}
.res__range b{color:var(--text-primary)}
.res__n{margin:0 0 4px;font:700 clamp(20px,2.2vw,26px)/1.15 var(--f-disp);letter-spacing:-.015em}
.res__p{margin:0 0 18px;font:500 15px/1 var(--f-mono);color:var(--text-secondary)}
.glead{display:grid;gap:9px;max-width:360px}

/* --- линейка --- */
.fleet{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:1024px){.fleet{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.fleet{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;border:1px solid var(--hairline);border-radius:16px;background:var(--panel);overflow:hidden;
  transition:border-color .25s var(--ease),transform .25s var(--ease)}
.card:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.card__pic{background:#0A0D11;padding:12px}
.card__pic img{aspect-ratio:831/563;object-fit:contain;width:100%;height:auto}
.card__b{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.card__brand{margin:0 0 6px;font:500 10px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary)}
.card__kw{margin:0;font:500 12px/1 var(--f-mono);letter-spacing:.1em;color:var(--accent)}
.card__n{margin:6px 0 8px;font:700 21px/1.1 var(--f-disp);letter-spacing:-.015em}
.card__l{margin:0 0 14px;font-size:14px;line-height:1.5;color:var(--text-secondary);flex:1}
.card__spec{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0 0 16px;font-size:13.5px}
.card__spec dt{color:var(--text-3)}
.card__spec dd{margin:0;color:var(--text-secondary);font-family:var(--f-mono);font-size:12.5px}
.card__foot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.card__p{margin:0;font:700 22px/1.1 var(--f-disp);letter-spacing:-.02em}
.card__p small{display:block;margin-top:3px;font:400 11.5px/1 var(--f-body);color:var(--text-3);letter-spacing:0}
.stock{font:500 12px/1 var(--f-mono);padding:5px 10px;border-radius:999px;white-space:nowrap}
.stock--yes{background:rgba(63,185,107,.14);color:#66D391}
.stock--low{background:rgba(242,169,59,.15);color:var(--warm)}
.stock--no{background:rgba(236,239,243,.08);color:var(--text-3)}
.stock--ask{background:rgba(236,239,243,.06);color:var(--text-3)}

/* --- честно --- */
.honest{display:grid;gap:14px}
.hcard{border-left:3px solid var(--accent);background:rgba(216,40,31,.06);padding:20px 22px;border-radius:0 14px 14px 0}
.hcard h3{margin:0 0 8px;font:700 18px/1.25 var(--f-disp);letter-spacing:-.012em}
.hcard p{margin:0;font-size:15px;line-height:1.6;color:var(--text-secondary)}

/* --- ошибки --- */
.miss{counter-reset:m;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px 34px}
@media (max-width:820px){.miss{grid-template-columns:1fr}}
.miss li{counter-increment:m;position:relative;padding-left:46px;font-size:15.5px;line-height:1.55;color:var(--text-secondary)}
.miss li b{color:var(--text-primary);font-weight:500}
.miss li::before{content:counter(m,decimal-leading-zero);position:absolute;left:0;top:2px;
  font:500 13px/1 var(--f-mono);color:var(--accent);border:1px solid var(--accent-muted);border-radius:8px;padding:6px 7px}

/* --- вопросы --- */
.faq{display:grid;gap:2px;border:1px solid var(--hairline);border-radius:14px;overflow:hidden}
.fq{background:var(--panel)}
.fq+.fq{border-top:1px solid var(--hairline)}
.fq summary{cursor:pointer;padding:18px 22px;font:500 16.5px/1.4 var(--f-body);list-style:none;
  display:flex;justify-content:space-between;gap:16px;transition:background .2s var(--ease)}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:"+";font:400 20px/1 var(--f-mono);color:var(--accent);transition:transform .25s var(--ease)}
.fq[open] summary::after{transform:rotate(45deg)}
.fq summary:hover{background:var(--panel-2)}
.fq>div{padding:0 22px 20px}
.fq p{margin:0;font-size:15px;line-height:1.6;color:var(--text-secondary);max-width:64ch}

/* --- форма --- */
.leadcard{border:1px solid var(--hairline);border-radius:18px;background:var(--panel);padding:clamp(24px,4vw,44px)}
.lf{display:grid;gap:14px;margin-top:24px;max-width:460px}
.fld__l{display:block;margin-bottom:7px;font:500 12.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.req{color:var(--accent)}
.inp{width:100%;padding:14px 16px;border-radius:11px;border:1px solid var(--border-strong);background:#0F1419;
  color:var(--text-primary);font:400 16px/1.45 var(--f-body);transition:border-color .2s var(--ease)}
.inp::placeholder{color:var(--text-3)}
.inp:focus{outline:none;border-color:var(--accent)}
textarea.inp{resize:vertical;min-height:88px}
.fld--hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lf__err{font-size:13.5px;color:#FF8A80}
.lf__err a{color:#FF8A80}
.lf__ok,.lf__done{padding:18px 20px;border-radius:12px;background:rgba(63,185,107,.1);border:1px solid rgba(63,185,107,.3);font-size:15.5px}

/* --- подвал --- */
.foot{position:relative;z-index:1;border-top:1px solid var(--hairline);padding:44px 0;background:var(--canvas)}
.foot__in{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
@media (max-width:760px){.foot__in{grid-template-columns:1fr}}
.foot p{margin:0 0 6px;font-size:14.5px;color:var(--text-secondary)}
.foot a{color:var(--text-primary);text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot__co{font-family:var(--f-disp);font-weight:700;color:var(--text-primary)!important}
.foot__legal{font-size:13px!important;color:var(--text-3)!important;max-width:56ch}

/* --- липкая полоса на телефонах --- */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:10px;
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  background:rgba(14,17,22,.94);border-top:1px solid var(--hairline);backdrop-filter:blur(12px)}
.sticky .btn{flex:1}
@media (max-width:860px){.sticky{display:flex}body{padding-bottom:76px}}
@media (max-height:560px){.sticky{display:none}body{padding-bottom:0}.ring{display:none}}

/* ============================ ВЫКЛЮЧЕННЫЕ АНИМАЦИИ ============================ */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0s!important}
  .sec>.wrap>*{opacity:1!important;transform:none!important}
  .stat__bar{transform:scaleX(1)!important}
  .band{opacity:1}
  .oneline__p{stroke-dashoffset:0!important}
}
body.pinned .sec>.wrap>*{opacity:1;transform:none}
body.pinned .stat__bar{transform:scaleX(1)}

/* кольцо прогресса исчезает, как только видео пришло */
.ring{transition:opacity .5s var(--ease)}
.ring.done{opacity:0;pointer-events:none}
.stage.video-failed .ring{opacity:0}

/* Статичная шапка стоит поверх стоп-кадра, а он местами ярко-красный.
   Свой скрим слева, чтобы заголовок читался при любом кадрировании. */
body.static-hero .stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(8,10,14,.88) 0%,rgba(8,10,14,.72) 38%,rgba(8,10,14,.28) 68%,rgba(8,10,14,.42) 100%)}
body.static-hero .statichero{z-index:2}

/* --- пять категорий --- */
.cats{list-style:none;margin:clamp(28px,4vw,44px) 0 0;padding:0;display:grid;gap:10px}
.cat a{display:grid;grid-template-columns:minmax(0,21rem) 1fr auto;gap:8px 24px;align-items:baseline;
  padding:20px 22px;border:1px solid var(--hairline);border-radius:13px;background:var(--panel);
  text-decoration:none;transition:border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease)}
.cat a:hover{border-color:var(--accent);background:var(--panel-2);transform:translateX(3px)}
.cat__n{font:700 18px/1.2 var(--f-disp);letter-spacing:-.02em;white-space:nowrap}
.cat__d{color:var(--text-secondary);font-size:15px}
.cat__p{font:500 15px/1 var(--f-mono);color:var(--accent);white-space:nowrap}
@media (max-width:760px){
  .cat a{grid-template-columns:1fr;gap:5px}
  .cat__p{margin-top:4px}
}

/* --- каталог остальной техники --- */
.tbl-wrap{margin-top:clamp(24px,3.5vw,40px);overflow-x:auto;border:1px solid var(--hairline);border-radius:14px;background:var(--panel)}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px;min-width:640px}
.tbl th,.tbl td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--hairline);vertical-align:baseline}
.tbl thead th{font:500 12px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);white-space:nowrap}
.tbl tbody th{font:500 15px/1.35 var(--f-body);color:var(--text-primary);white-space:nowrap}
.tbl td{color:var(--text-secondary)}
.tbl td:last-child{font-family:var(--f-mono);font-size:13.5px;color:var(--text-primary);white-space:nowrap}
.tbl__g th{background:rgba(216,40,31,.08);font:500 12px/1 var(--f-mono)!important;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent)!important;padding-top:15px;padding-bottom:15px}
.tbl tbody tr:not(.tbl__g):hover{background:var(--panel-2)}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.res--nophoto{grid-template-columns:1fr}
.res__d{margin:0 0 16px;font-size:15px;line-height:1.55;color:var(--text-secondary);max-width:46ch}

/* --- строка фактов --- */
.facts{list-style:none;margin:clamp(26px,3.5vw,38px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hairline);
  border:1px solid var(--hairline);border-radius:14px;overflow:hidden}
@media (max-width:820px){.facts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.facts{grid-template-columns:1fr}}
.facts li{background:var(--panel);padding:20px 22px}
.facts b{display:block;font:700 clamp(21px,2.2vw,27px)/1.1 var(--f-disp);letter-spacing:-.02em;color:var(--text-primary)}
.facts span{display:block;margin-top:7px;font-size:14px;line-height:1.45;color:var(--text-secondary)}
.foot__inn{font-family:var(--f-mono);font-size:13px!important;color:var(--text-3)!important;letter-spacing:.02em}
@media (max-width:760px){.cat__n{white-space:normal}}

/* карточка категории: у мачты настоящая съёмка, поэтому кадр заполняется целиком */
.card__pic--photo{padding:0;background:#0A0D11}
.card__pic--photo img{object-fit:cover;aspect-ratio:760/515;border-radius:0}

/* полный список позиций прячется под раскрывашку: карточки важнее таблицы */
.full{margin-top:clamp(22px,3vw,34px)}
.full>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:9px;
  padding:12px 20px;border:1px solid var(--border-strong);border-radius:11px;background:transparent;
  font:500 15px/1 var(--f-body);transition:border-color .2s var(--ease),background .2s var(--ease)}
.full>summary::-webkit-details-marker{display:none}
.full>summary::after{content:"+";font:400 18px/1 var(--f-mono);color:var(--accent);transition:transform .25s var(--ease)}
.full[open]>summary::after{transform:rotate(45deg)}
.full>summary:hover{border-color:var(--accent);background:var(--panel)}
.full .tbl-wrap{margin-top:16px}

/* ============================================================
   РЕДИЗАЙН 27.08.2026: продающая вертикаль по генераторам.
   Ниже — только новые блоки. Токены и сетка прежние.
   ============================================================ */

/* --- строка доверия под первым экраном --- */
.band__trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin:22px 0 0;padding:0;list-style:none}
.band__trust li{position:relative;font:500 13px/1.3 var(--f-mono);letter-spacing:.02em;color:#C9D3DC;text-shadow:var(--tshadow)}
.band__trust li+li::before{content:"";position:absolute;left:-12px;top:50%;width:3px;height:3px;border-radius:50%;background:var(--text-3);transform:translateY(-50%)}
.statichero__eyebrow{margin:0 0 10px;font:500 11.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--warm)}
.statichero__h{margin:0 0 16px;font:700 clamp(28px,7.2vw,42px)/1.1 var(--f-disp);letter-spacing:-.005em;max-width:16ch;text-transform:uppercase}

/* --- марки --- */
.marks{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.mark{padding:34px 34px 34px 0}
.mark+.mark{padding-left:34px;border-left:1px solid var(--hairline)}
.mark__n{margin:0 0 10px;font:700 15px/1 var(--f-mono);letter-spacing:.08em;color:var(--text-primary)}
.mark__d{margin:0;color:var(--text-secondary);max-width:44ch}

/* --- конфигуратор: подсказки и мультивыбор --- */
.q__hint{margin:-6px 0 16px;font-size:14.5px;line-height:1.5;color:var(--text-3);max-width:56ch}
.q__next{margin-top:20px;padding:12px 24px;border:1px solid var(--border-strong);background:transparent;color:var(--text-primary);
  font:500 15px/1 var(--f-body);cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease)}
.q__next:hover{border-color:var(--accent);background:var(--accent-muted)}
.res__notes{margin:16px 0 20px;padding:0 0 0 18px;color:var(--text-secondary);font-size:15px}
.res__notes li{margin:0 0 6px}

/* --- каталог по диапазонам --- */
.rng{margin:0 0 56px}
.rng__h{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:0 20px;
  padding:0 0 16px;margin:0 0 24px;border-bottom:1px solid var(--hairline)}
.rng__t{margin:0;font:700 clamp(21px,2.4vw,28px)/1.1 var(--f-disp);letter-spacing:-.01em;white-space:nowrap}
.rng__d{margin:0;color:var(--text-secondary);font-size:15px}
.rng__c{margin:0;font:500 12px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);white-space:nowrap}
.rng__cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.card--ask{display:flex;align-items:stretch;background:linear-gradient(160deg,rgba(216,40,31,.06),transparent 60%)}
.card--ask .card__b{display:flex;flex-direction:column;justify-content:space-between;width:100%}
.card__p--ask{font-size:19px;color:var(--text-secondary)}
.card__kw small{display:block;margin-top:2px;font:400 12.5px/1 var(--f-mono);color:var(--text-3);letter-spacing:.02em}
.card__btns{display:flex;gap:10px;margin-top:14px}
.card__btns .btn{flex:1}

/* --- сравнение --- */
.tablewrap{overflow-x:auto;border:1px solid var(--hairline);background:var(--panel)}
.ctab{width:100%;border-collapse:collapse;min-width:640px;font-size:15px}
.ctab th,.ctab td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--hairline);vertical-align:top}
.ctab thead th{font:700 14px/1.2 var(--f-disp);letter-spacing:.01em;color:var(--text-primary);background:var(--panel-2);white-space:nowrap}
.ctab tbody th{font:500 14.5px/1.35 var(--f-body);color:var(--text-secondary);white-space:nowrap}
.ctab td{font-variant-numeric:tabular-nums;color:var(--text-primary)}
.ctab tr:last-child th,.ctab tr:last-child td{border-bottom:0}
.ask-cell{color:var(--text-3);font-style:normal}
.cta-line{margin:26px 0 0}

/* --- почему не только цена --- */
.whygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1px;background:var(--hairline);
  border:1px solid var(--hairline)}
.why{padding:28px 26px;background:var(--canvas)}
.why h3{margin:0 0 10px;font:700 17px/1.25 var(--f-disp);letter-spacing:-.005em}
.why p{margin:0;color:var(--text-secondary);font-size:15px}
.whynote{margin-top:28px;padding:24px 26px;border-left:2px solid var(--accent);background:var(--panel)}
.whynote p{margin:0;color:var(--text-secondary)}
.whynote b{color:var(--text-primary);font-weight:500}

/* --- стоимость владения --- */
.tco__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fld__hint{margin:6px 0 0;font-size:13.5px;line-height:1.45;color:var(--text-3)}
.tco__out{margin:26px 0 0;padding:24px;border:1px solid var(--border-strong);background:var(--panel)}
.tco__list{margin:0;display:grid;gap:14px}
.tco__list div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding-bottom:12px;border-bottom:1px solid var(--hairline)}
.tco__list div:last-child{padding-bottom:0;border-bottom:0}
.tco__list dt{margin:0;color:var(--text-secondary);font-size:15px}
.tco__list dd{margin:0;font:700 19px/1 var(--f-disp);letter-spacing:-.01em;color:var(--text-primary);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.tco__warn{margin:18px 0 0;font-size:14px;line-height:1.5;color:var(--text-3)}

/* --- порядок работы --- */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;margin:0;padding:0;list-style:none;
  background:var(--hairline);border:1px solid var(--hairline)}
.flow__i{position:relative;padding:26px 24px 52px;background:var(--canvas)}
.flow__n{display:block;margin-bottom:12px;font:700 13px/1 var(--f-mono);letter-spacing:.06em;color:var(--text-3)}
.flow__i h3{margin:0 0 8px;font:700 17px/1.25 var(--f-disp);letter-spacing:-.005em}
.flow__i p{margin:0;color:var(--text-secondary);font-size:14.5px}
.flow__tag{position:absolute;left:24px;bottom:22px;font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.flow__i--own .flow__tag{color:var(--ok)}
.flow__i--part .flow__tag{color:var(--warm)}

/* --- сценарии --- */
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--hairline);
  border:1px solid var(--hairline)}
.case{padding:26px 24px;background:var(--canvas);display:flex;flex-direction:column}
.case h3{margin:0 0 10px;font:700 17px/1.2 var(--f-disp);letter-spacing:-.005em}
.case p{margin:0;color:var(--text-secondary);font-size:14.5px}
.case__kw{margin-top:auto;padding-top:16px;font:500 13px/1 var(--f-mono)!important;letter-spacing:.03em;color:var(--warm)!important}

/* --- FAQ --- */
.faq{border-top:1px solid var(--hairline)}
.fq{border-bottom:1px solid var(--hairline)}
.fq summary{padding:20px 40px 20px 0;cursor:pointer;position:relative;list-style:none;
  font:500 17px/1.35 var(--f-body);color:var(--text-primary)}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;
  border-right:1.5px solid var(--text-3);border-bottom:1.5px solid var(--text-3);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s var(--ease)}
.fq[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.fq summary:hover{color:var(--warm)}
.fq__a{padding:0 0 22px}
.fq__a p{margin:0;color:var(--text-secondary);max-width:68ch}

@media (max-width:820px){
  .marks{grid-template-columns:1fr}
  .mark{padding:26px 0}
  .mark+.mark{padding-left:0;border-left:0;border-top:1px solid var(--hairline)}
  .rng__h{grid-template-columns:1fr;gap:8px}
  .rng__c{grid-row:1}
  .tco__grid{grid-template-columns:1fr}
  .tco__list div{flex-direction:column;gap:4px}
  .tco__list dd{font-size:21px}
}

/* правки после первой визуальной проверки каталога */
#ranges{margin-top:44px}
.rng__cards .card--ask{grid-column:1/-1}
.card--ask .card__b{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:8px 40px;align-items:start}
.card--ask .card__brand{grid-column:1}
.card--ask .card__kw{grid-column:1;grid-row:2}
.card--ask .card__n{grid-column:1;grid-row:3;margin-top:6px}
.card--ask .card__l{grid-column:2;grid-row:1/4;margin:0;align-self:center}
.card--ask .card__foot{grid-column:1;grid-row:4;margin-top:16px}
.card--ask .card__btns{grid-column:2;grid-row:4;margin-top:16px;align-self:end}
.card--ask .card__btns .btn{flex:0 0 auto;min-width:220px}
@media (max-width:760px){
  .card--ask .card__b{grid-template-columns:1fr;gap:6px}
  .card--ask .card__l,.card--ask .card__foot,.card--ask .card__btns,
  .card--ask .card__brand,.card--ask .card__kw,.card--ask .card__n{grid-column:1;grid-row:auto}
  .card--ask .card__btns .btn{flex:1;min-width:0}
}

/* CTA в нижней панели не должен переноситься на две строки: на 390 px
   «Подобрать генератор» ломался пополам и выглядел как брак вёрстки. */
.sticky .btn{white-space:nowrap;font-size:14.5px;padding:14px 12px}
.sticky .btn--ghost{flex:0 0 auto;padding:14px 18px}

/* ============================ ЭКРАН ЗАГРУЗКИ ============================
   Держится, пока грузится ролик шапки, но не дольше шести секунд: дальше
   сайт открывается в любом случае, а видео подхватывается по готовности. */
.preload{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  background:var(--canvas);transition:opacity .4s var(--ease),visibility .4s var(--ease)}
.preload.is-off{opacity:0;visibility:hidden;pointer-events:none}
.preload__in{display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 24px;text-align:center}
.preload__t{margin:0;font:700 17px/1 var(--f-disp);letter-spacing:.01em;color:var(--text-primary);text-transform:uppercase}
.preload__bar{width:min(220px,60vw);height:2px;background:var(--hairline);overflow:hidden}
.preload__bar i{display:block;width:100%;height:100%;background:var(--accent);
  transform:scaleX(.02);transform-origin:0 50%;transition:transform .2s linear}
.preload__s{margin:0;font:400 12.5px/1 var(--f-mono);letter-spacing:.06em;color:var(--text-3)}
@media (prefers-reduced-motion:reduce){
  .preload{transition:none}
  .preload__bar i{transition:none}
}

/* Карточка без фотографии: завод ИСТОК прислал прайс и остатки, но не фото.
   Чужие снимки не подставляем, поэтому карточка живёт на типографике. */
.card--nophoto .card__b{padding-top:26px}
.card--nophoto{background:linear-gradient(165deg,rgba(242,169,59,.05),transparent 55%)}
.card--nophoto .card__n{font-size:19px;word-break:break-word}
.marks{grid-template-columns:repeat(3,1fr)}
.mark{padding:34px 26px 34px 0}
.mark+.mark{padding-left:26px}
@media (max-width:980px){
  .marks{grid-template-columns:1fr}
  .mark{padding:26px 0}
  .mark+.mark{padding-left:0;border-left:0;border-top:1px solid var(--hairline)}
}

/* Ссылка на сайт производителя в карточке марки: и доверие для человека,
   и внешний авторитетный источник, который учитывают AI-поисковики. */
.mark__src{margin:-4px 0 10px;font:400 13px/1 var(--f-mono)}
.mark__src a{color:var(--text-3);text-decoration:none;border-bottom:1px solid var(--hairline);transition:color .2s var(--ease)}
.mark__src a:hover{color:var(--warm)}

/* ── Постоянный слой первого экрана (CRO, 28.08.2026) ───────────────────
   Проверка «понятно ли за 5 секунд, что продают» провалилась: на первом
   экране был только город и лозунг «Пока есть сеть, работают все».
   Товар, география и кнопка теперь видны сразу, поверх любого кадра. */
/* Секция начинается под шапкой, поэтому её низ уходит за экран на высоту
   шапки: отступ снизу считаем от неё, иначе кнопка обрезается. */
.hero__persist{position:absolute;inset:auto 0 0 0;z-index:3;pointer-events:none;
  display:flex;flex-direction:column;gap:16px;
  padding:70px var(--gut) calc(64px + 30px);
  background:linear-gradient(to top,rgba(6,8,11,.9) 0%,rgba(6,8,11,.62) 45%,rgba(6,8,11,0) 100%)}
/* Кадр с ночным городом светлый снизу: без подложки подпись тонет в огнях.
   Градиент на самом слое, а не на псевдоэлементе: с z-index:-1 подложка
   уезжала под видео и не работала. */
.hero__eyebrow{margin:0;font:500 12.5px/1.4 var(--f-mono);letter-spacing:.1em;
  text-transform:uppercase;color:#C9D3DC;text-shadow:var(--tshadow)}
.hero__act{display:flex;align-items:center;gap:18px;flex-wrap:wrap;pointer-events:auto}
.hero__act .btn{text-shadow:none}
.hero__tel{font:500 16px/1 var(--f-mono);color:#ECEFF3;text-decoration:none;
  text-shadow:var(--tshadow);white-space:nowrap}
.hero__tel:hover{color:var(--warm)}
/* у последней полосы своя пара кнопок — прячем дубль, чтобы не спорили */
.hero__persist.is-hidden{opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
body.static-hero .hero__persist{display:none}
@media (max-width:640px){
  /* На телефоне действия уже есть в нижней панели: кнопка и телефон в слое
     дублировали их, получалось три призыва подряд. Оставляем только строку
     с товаром — она и решает задачу «понятно, что продают». */
  .hero__persist{inset:auto 0 calc(64px + 86px) 0;gap:10px;padding-top:56px}
  .hero__persist .hero__act{display:none}
  .hero__eyebrow{font-size:11px}
}

/* ── Правки по критике дизайна (28.08.2026) ─────────────────────────────
   Нарушалась эвристика «свобода действий»: ошибся на шаге конфигуратора —
   спасала только перезагрузка страницы. И результат не показывал, из чего
   сложился расчёт, то есть проверить его было нечем. */
.q__back{margin-top:18px;padding:9px 0;border:0;background:none;cursor:pointer;
  font:400 14.5px/1 var(--f-body);color:var(--text-3);
  border-bottom:1px solid transparent;transition:color .2s var(--ease),border-color .2s var(--ease)}
.q__back::before{content:"← "}
.q__back:hover{color:var(--text-primary);border-bottom-color:var(--hairline)}
.res__sum{margin:0 0 14px;font:400 14.5px/1.5 var(--f-body);color:var(--text-3)}
.res__again{margin-left:8px;padding:0;border:0;background:none;cursor:pointer;
  font:500 14.5px/1 var(--f-body);color:var(--warm);border-bottom:1px solid currentColor}
.res__again:hover{color:var(--text-primary)}