/* =========================================================================
   ВТА — основной стиль. Свёрстано по макетам из папки «скрины».
   Golos Text (ParaType, SIL OFL) — свободная замена с полной кириллицей.
   ========================================================================= */

/* ---------- Шрифты (локально, без обращений к Google) ---------- */
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/golos-400-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/golos-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/golos-500-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/golos-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/golos-600-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/golos-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/golos-700-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/golos-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/golos-800-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/golos-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Токены ---------- */
:root{
  --ink:#1e1e1e;          /* чёрный блоков и текста */
  --ink-70:#4a4a4a;       /* основной текст абзацев */
  --ink-55:#6b6b6b;       /* вторичный, проходит 4.5:1 на белом */
  --paper:#fff;
  --red:#e42a26;          /* фирменный красный логотипа */
  --red-dark:#c01f1b;
  --band:#f2f2f2;         /* серая полоса «свяжитесь с нами» */
  --line:#d8d8d8;
  --line-dark:#3a3a3a;

  --wrap:1200px;
  --gutter:clamp(1rem,3.2vw,2rem);
  --radius:8px;
  --radius-sm:5px;

  --step-hero:clamp(2rem,5.6vw,4.25rem);
  --step-h2:clamp(1.5rem,3.2vw,2.5rem);
  --step-h3:clamp(1.125rem,1.7vw,1.4375rem);
  --step-lead:clamp(1rem,1.2vw,1.125rem);
  --step-body:1rem;
  --step-small:0.9375rem;
  --step-tiny:0.8125rem;

  --space-2:1rem;
  --space-3:1.5rem;
  --space-4:2rem;
  --space-5:3rem;
  --space-6:4rem;
  --space-7:clamp(3rem,5.5vw,5.25rem);

  --ease-out:cubic-bezier(.23,1,.32,1);
}

/* ---------- Сброс ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Golos Text',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:var(--step-body);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:.75rem 1.25rem}
.skip:focus{left:0}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- Типографика ---------- */
.h-display,.h-sec,.card-t,.tile-t{
  text-transform:uppercase;font-weight:500;letter-spacing:-.015em;
  overflow-wrap:break-word;hyphens:auto;
}
.h-display{font-size:var(--step-hero);line-height:1.02}
.h-sec{font-size:var(--step-h2);line-height:1.08;margin-bottom:var(--space-5)}
.card-t,.tile-t{font-size:var(--step-h3);line-height:1.2;font-weight:600}

.lead{font-size:var(--step-lead);color:var(--ink-70);line-height:1.5}

.prose{max-width:70ch;color:var(--ink-70)}
.prose>*+*{margin-top:1em}
.prose h2{font-size:var(--step-h2);text-transform:uppercase;font-weight:500;color:var(--ink);line-height:1.1;margin-top:1.8em}
.prose h3{font-size:var(--step-h3);text-transform:uppercase;font-weight:600;color:var(--ink);margin-top:1.6em}
.prose ul li{position:relative;padding-left:1.25rem}
.prose ul li+li{margin-top:.4rem}
.prose ul li::before{content:"";position:absolute;left:0;top:.6em;width:.45rem;height:2px;background:var(--red)}
.prose ol{counter-reset:n}
.prose ol li{position:relative;padding-left:2rem;counter-increment:n}
.prose ol li+li{margin-top:.4rem}
.prose ol li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;font-weight:700;color:var(--red);font-size:var(--step-small)}
.prose a{color:var(--red-dark)}
.prose strong{color:var(--ink);font-weight:600}

/* ---------- Шапка ---------- */
.head{position:sticky;top:0;z-index:60;padding-top:clamp(.5rem,1.2vw,.875rem);pointer-events:none}
.head__inner{
  pointer-events:auto;display:flex;align-items:center;gap:var(--space-3);
  background:var(--ink);color:#fff;border-radius:var(--radius);
  padding:.75rem clamp(1rem,1.8vw,1.5rem);min-height:56px;
}
.brand{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;padding-right:.5rem;text-decoration:none;color:#fff}
.brand .logo{display:block}
.nav{display:none;margin-inline:auto}
@media (min-width:900px){.nav{display:block}}
.nav__list{display:flex;gap:clamp(1rem,2.2vw,2rem);align-items:center}
.nav__list a{text-decoration:none;font-size:var(--step-tiny);color:#dcdcdc;display:inline-flex;align-items:center;min-height:44px;text-transform:none}
.nav__list .current-menu-item>a,.nav__list a[aria-current="page"]{color:#fff}
.burger{display:inline-flex;align-items:center;gap:.5rem;background:none;border:0;cursor:pointer;padding:.5rem;min-height:44px}
.burger__lines{display:grid;gap:5px;width:28px}
.burger__lines i{display:block;height:2px;background:#fff;border-radius:1px}
@media (hover:hover) and (pointer:fine){
  .nav__list a:hover{color:var(--red);transition:color 160ms ease}
  .burger:hover .burger__lines i{background:var(--red)}
}

.head__side{margin-left:auto;display:flex;align-items:center;gap:clamp(.5rem,1.2vw,1rem);flex:0 0 auto}
.head__tel{
  display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:0 .6rem;
  text-decoration:none;font-size:var(--step-small);font-weight:600;
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.head__tel span{display:none}
@media (min-width:760px){.head__tel{padding:0}.head__tel svg{display:none}.head__tel span{display:inline}}
.head__max{
  display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:0 .75rem;
  border:1px solid #3d3d3d;border-radius:var(--radius-sm);
  text-decoration:none;font-size:var(--step-tiny);font-weight:600;letter-spacing:.03em;
  transition:border-color 180ms ease,color 180ms ease;
}
.head__max span{display:none}
@media (min-width:560px){.head__max span{display:inline}}
@media (hover:hover) and (pointer:fine){
  .head__tel:hover{color:var(--red)}
  .head__max:hover{border-color:#fff;color:#fff}
}

/* Кнопка MAX в подвале */
.foot__max{
  display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 1rem;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  text-decoration:none;font-size:var(--step-small);font-weight:600;
  transition:border-color 180ms ease,background-color 180ms ease,color 180ms ease;
}
@media (hover:hover) and (pointer:fine){
  .foot__max:hover{background:var(--ink);border-color:var(--ink);color:#fff}
}

/* ---------- Полноэкранное меню ---------- */
.mega{
  position:fixed;inset:0;z-index:80;
  background:var(--ink);color:#fff;overflow-y:auto;
  display:flex;flex-direction:column;
}
.mega[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){
  .mega{animation:mega-in 240ms var(--ease-out)}
  @keyframes mega-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
}
.mega__bar{
  display:flex;align-items:center;justify-content:space-between;
  padding-block:clamp(1rem,2vw,1.5rem);flex:0 0 auto;
}
.mega__logo{color:#fff;display:block}
.mega__close{
  width:48px;height:48px;display:grid;place-items:center;
  background:none;border:1px solid #3d3d3d;border-radius:var(--radius);
  color:#fff;cursor:pointer;transition:border-color 180ms ease,background-color 180ms ease;
}
.mega__close:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.mega__close:hover{border-color:#fff;background:#2a2a2a}}

.mega__inner{
  display:grid;gap:var(--space-5);
  padding-bottom:var(--space-6);flex:1 1 auto;align-content:start;
}
@media (min-width:900px){
  .mega__inner{grid-template-columns:minmax(0,1.55fr) minmax(260px,.45fr);gap:var(--space-6)}
}

.mega__list{display:grid;gap:clamp(.75rem,1.6vw,1.25rem)}
.mega__item{border-top:1px solid #333;padding-top:clamp(.75rem,1.6vw,1.125rem)}
.mega__link{
  display:flex;align-items:baseline;gap:clamp(.75rem,1.6vw,1.25rem);
  text-decoration:none;color:#fff;
}
.mega__num{
  font-size:var(--step-tiny);color:#9a9a9a;font-variant-numeric:tabular-nums;
  flex:0 0 auto;padding-top:.2em;
}
.mega__name{
  font-size:clamp(1.5rem,3.4vw,2.75rem);line-height:1.05;
  text-transform:uppercase;font-weight:500;letter-spacing:-.02em;
  transition:color 160ms ease;
}
@media (hover:hover) and (pointer:fine){.mega__link:hover .mega__name{color:var(--red)}}

.mega__sub{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;margin-top:.5rem;padding-left:calc(var(--step-tiny) + 1.9rem)}
.mega__sub a{
  display:inline-flex;align-items:center;min-height:36px;
  font-size:var(--step-small);color:#a9a9a9;text-decoration:none;
}
@media (hover:hover) and (pointer:fine){.mega__sub a:hover{color:#fff}}

.mega__side{display:grid;gap:.5rem;align-content:start}
.mega__label{font-size:var(--step-tiny);text-transform:uppercase;letter-spacing:.08em;color:#9a9a9a}
.mega__tel{font-size:1.5rem;font-weight:600;text-decoration:none;font-variant-numeric:tabular-nums;min-height:44px;display:flex;align-items:center}
.mega__mail{font-size:var(--step-lead);color:#c4c4c4;text-decoration:none;min-height:44px;display:flex;align-items:center}
@media (hover:hover) and (pointer:fine){.mega__tel:hover,.mega__mail:hover{color:var(--red)}}
.mega__stock{
  display:grid;gap:.25rem;margin-top:var(--space-3);padding:var(--space-3);
  border:1px solid #3d3d3d;border-radius:var(--radius);text-decoration:none;
  transition:border-color 180ms ease;
}
.mega__stock b{font-size:2rem;line-height:1;font-weight:500;font-variant-numeric:tabular-nums}
.mega__stock span{font-size:var(--step-tiny);color:#9a9a9a;line-height:1.4}
@media (hover:hover) and (pointer:fine){.mega__stock:hover{border-color:#fff}}
.mega__cta{margin-top:var(--space-3);justify-self:start}

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:46px;padding:.75rem 1.65rem;border-radius:var(--radius-sm);
  font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  text-decoration:none;text-align:center;border:1px solid transparent;cursor:pointer;
  transition:background-color 180ms ease,color 180ms ease,border-color 180ms ease,transform 140ms var(--ease-out);
}
.btn:active{transform:scale(.98)}
.btn--red{background:var(--red);color:#fff;border-color:var(--red);min-height:54px;font-size:1rem}
.btn--black{background:var(--ink);color:#fff;border-color:var(--ink);min-height:54px;font-size:1rem}
.btn--white{background:#fff;color:var(--ink);border-color:#fff;min-height:54px;font-size:1rem}
.btn--outline{background:transparent;color:var(--ink);border-color:#b9b9b9;border-width:1.5px}
.btn--outline-light{background:transparent;color:#fff;border-color:rgb(255 255 255 / .45)}
.btn--wide{width:100%;min-height:62px;font-size:1.0625rem;letter-spacing:.05em}
@media (hover:hover) and (pointer:fine){
  .btn--red:hover{background:var(--red-dark);border-color:var(--red-dark)}
  .btn--black:hover{background:#000;border-color:#000}
  .btn--white:hover{background:var(--red);border-color:var(--red);color:#fff}
  .btn--outline:hover{background:var(--ink);border-color:var(--ink);color:#fff}
  .btn--outline-light:hover{border-color:#fff;background:rgb(255 255 255 / .1)}
}

/* ---------- Секции ---------- */
.section{padding-block:var(--space-7)}
.section--tight{padding-block:var(--space-6)}

/* ---------- Герой ---------- */
.hero{padding-top:var(--space-5)}
.hero__head{position:relative;margin-bottom:var(--space-4)}
.hero__title{margin:0}
/* Три строки, как в макете: первая короткая — рядом с ней слева помещается лид. */
.hero__title span{display:block}
.hero__intro{font-size:var(--step-lead);color:var(--ink-70);max-width:44ch;margin-top:var(--space-3)}
/* На широком экране лид уходит в левый верхний угол, заголовок прижимается вправо — как в макете. */
@media (min-width:900px){
  .hero__title{text-align:right}
  .hero__intro{position:absolute;top:.35em;left:0;margin-top:0;max-width:38ch;font-size:var(--step-small)}
}
.hero__media{position:relative;border-radius:var(--radius);overflow:hidden}
.hero__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.hero__ph{display:block;width:100%;aspect-ratio:4/3;background:linear-gradient(135deg,#2a2a2a,#6a6a6a)}
@media (min-width:700px){
  .hero__media img,.hero__ph{aspect-ratio:16/7}
}
.hero__cta{position:absolute;left:clamp(1rem,2.5vw,2rem);bottom:clamp(1rem,2.5vw,2rem)}
@media (max-width:559px){
  .hero__cta{left:1rem;right:1rem}
  .hero__cta .btn{width:100%}
}

/* ---------- Заголовок внутренней страницы ---------- */
.phead{padding-block:var(--space-5) var(--space-4)}
.phead__title{
  margin:0;font-size:var(--step-hero);line-height:1.02;
  text-transform:uppercase;font-weight:500;letter-spacing:-.015em;
  overflow-wrap:break-word;hyphens:auto;
}
/* Вторая строка с отступом — как в макетах внутренних страниц. */
.phead__title .l2{display:block;padding-left:2.5em}
@media (max-width:699px){.phead__title .l2{padding-left:0}}
.phead__lede{margin-top:var(--space-3);max-width:60ch}

/* ---------- Карточки «что мы предлагаем» ---------- */
.tiles{display:grid;gap:var(--space-2);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:860px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}}
.tile{
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-4);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.25rem,2.1vw,2rem);min-height:190px;text-decoration:none;
}
/* Квадрат: заголовок сверху, кнопка прижата к низу — как в макете.
   align-self:start обязателен: иначе растягивание grid-элемента спорит
   с aspect-ratio и колонка схлопывается. */
@media (min-width:860px){.tile{aspect-ratio:1;min-height:0;align-self:start}}
.tile-t{margin:0}
.tile{color:inherit}
.tile .btn{align-self:flex-start}
@media (hover:hover) and (pointer:fine){
  .tile{transition:border-color 200ms ease,transform 200ms var(--ease-out),box-shadow 200ms ease}
  .tile:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 6px 20px rgb(30 30 30 / .07)}
  .tile:hover .btn--outline{background:var(--ink);border-color:var(--ink);color:#fff}
}

/* ---------- Красные карточки (системы) ---------- */
.reds{display:grid;gap:var(--space-2);grid-template-columns:1fr}
@media (min-width:700px){.reds{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}}
.red-card{
  background:var(--red);color:#fff;border-radius:var(--radius);
  padding:clamp(1.5rem,2.2vw,2rem);min-height:180px;
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-4);
  text-decoration:none;
}
.red-card .card-t{margin:0}
@media (hover:hover) and (pointer:fine){
  .red-card{transition:background-color 180ms ease}
  .red-card:hover{background:var(--red-dark)}
}

/* ---------- Чёрные карточки (как мы помогаем) ---------- */
.blacks{display:grid;gap:var(--space-2);grid-template-columns:1fr}
@media (min-width:760px){.blacks{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}}
.black-card{
  background:var(--ink);color:#fff;border-radius:var(--radius);
  padding:clamp(1.5rem,2.2vw,2.25rem);
  display:flex;flex-direction:column;gap:var(--space-3);text-decoration:none;min-height:240px;
}
.black-card .card-t{margin:0}
.black-card p{font-size:1rem;line-height:1.5;color:#c9c9c9;flex:1}
.black-card .btn{align-self:flex-start}
@media (hover:hover) and (pointer:fine){
  .black-card{transition:background-color 200ms ease,transform 200ms var(--ease-out)}
  .black-card:hover{background:#000;transform:translateY(-2px)}
}

/* Карусель на узких экранах — как в мобильном макете */
@media (max-width:759px){
  .blacks{
    grid-auto-flow:column;grid-auto-columns:78%;
    overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:.75rem;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .blacks::-webkit-scrollbar{display:none}
  .blacks>*{scroll-snap-align:start}
}

/* Полоса-индикатор под рядом карточек */
.railbar{height:3px;background:var(--line);border-radius:2px;margin-top:var(--space-3);overflow:hidden}
@media (min-width:760px){.railbar{display:none}}
.railbar i{display:block;height:100%;width:33%;background:var(--ink);border-radius:2px;will-change:transform}

/* ---------- Плитки областей применения ---------- */
.areas{display:grid;gap:var(--space-2);grid-template-columns:1fr}
@media (min-width:700px){.areas{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}}
.area{
  display:flex;align-items:stretch;justify-content:space-between;gap:var(--space-3);
  background:var(--ink);color:#fff;border-radius:var(--radius);overflow:hidden;min-height:74px;
}
.area span{align-self:center;padding:1rem 0 1rem clamp(1rem,1.8vw,1.5rem);font-size:var(--step-h3);text-transform:uppercase;font-weight:600;line-height:1.15}
.area img{width:42%;object-fit:cover;flex:0 0 auto}
.area__ph{width:42%;flex:0 0 auto;background:linear-gradient(135deg,#3a3a3a,#5f5f5f)}

/* ---------- «Почему выбирают нас» ---------- */
.why{display:grid;gap:var(--space-4);grid-template-columns:1fr}
@media (min-width:900px){.why{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--space-6);align-items:start}}
.why__media img,.why__ph{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.why__ph{display:block;background:linear-gradient(135deg,#2a2a2a,#6a6a6a)}
.why__list{display:grid}
.why__item{padding-block:var(--space-4);border-top:1px solid var(--line)}
.why__item:first-child{border-top:0;padding-top:0}
.why__item h3{font-size:var(--step-h3);text-transform:uppercase;font-weight:600;margin-bottom:.6rem;line-height:1.15}
.why__item p{font-size:1rem;line-height:1.55;color:var(--ink-70);max-width:52ch}
/* В макете пункты гаснут книзу. Ослабляем мягко: ниже 4.5:1 текст уходить не должен. */
.why__item:nth-child(2) h3,.why__item:nth-child(3) h3{color:var(--ink-55)}
.why__item:nth-child(3) p{color:var(--ink-55)}

/* ---------- Блок «Свяжитесь с нами» ---------- */
.contactband{background:var(--band);border-radius:var(--radius)}
.contactband__inner{display:grid;gap:var(--space-4);padding:clamp(1.75rem,4vw,3.5rem)}
@media (min-width:820px){.contactband__inner{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--space-6);align-items:start}}
.contactband .h-sec{margin-bottom:var(--space-4)}
.contactband__contacts{display:grid;gap:.5rem;font-size:1.25rem;font-weight:600}
.contactband__contacts a{text-decoration:none;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;min-height:44px}
@media (hover:hover) and (pointer:fine){.contactband__contacts a:hover{color:var(--red)}}

/* ---------- Формы ---------- */
.lead-form .field{margin-bottom:.875rem}
.field{display:grid;gap:.35rem}
.field label{font-size:var(--step-tiny);color:var(--ink-55)}
.field input,.field textarea{
  font:inherit;font-size:var(--step-small);color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:.9rem 1.1rem;min-height:52px;width:100%;transition:border-color 160ms ease,box-shadow 160ms ease;
}
.field textarea{min-height:112px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#9a9a9a}
.field input:focus,.field textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgb(30 30 30 / .07)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--red)}
.lead__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lead__note{font-size:var(--step-tiny);color:var(--ink-55);margin-bottom:.75rem}
.lead__status{font-size:var(--step-small);margin-top:.6rem}
.lead__status[data-state="error"]{color:var(--red-dark);font-weight:500}
.lead__status[data-state="ok"]{color:#0a7d32;font-weight:500}

/* ---------- Финальный призыв ---------- */
.finale{padding-top:var(--space-7)}
.finale__title{margin:0 0 var(--space-4);hyphens:none}
.finale__title .a{display:block;text-align:right}
.finale__title .b{display:block;color:var(--ink-55)}
@media (max-width:699px){.finale__title .a{text-align:left}}
.finale__shots{display:grid;gap:var(--space-2);grid-template-columns:1fr}
@media (min-width:700px){.finale__shots{grid-template-columns:repeat(2,minmax(0,1fr))}}
.finale__shots img,.finale__ph{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius)}
.finale__ph{display:block;background:linear-gradient(135deg,#2a2a2a,#6a6a6a)}

/* ---------- Таблицы ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.spec{width:100%;border-collapse:collapse;font-size:var(--step-small);min-width:32rem}
.spec caption{text-align:left;padding-bottom:.6rem;color:var(--ink-55);font-size:var(--step-small)}
.spec th,.spec td{padding:.8rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.spec thead th{font-size:var(--step-tiny);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-55);font-weight:600;border-bottom:2px solid var(--ink)}
.spec tbody th{font-weight:600;width:36%}
.spec td{font-variant-numeric:tabular-nums;color:var(--ink-70)}
.ba td:last-child{color:var(--red-dark);font-weight:600}

/* ---------- Карточки каталога и кейсов ---------- */
.grid{display:grid;gap:var(--space-2)}
.grid--3{grid-template-columns:1fr}
@media (min-width:620px){.grid--3{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}}
@media (min-width:980px){.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){.grid--4{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}}
@media (min-width:1040px){.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}}

.card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;height:100%;background:#fff}
.card__link{display:flex;flex-direction:column;height:100%;text-decoration:none}
.card__media{position:relative;background:var(--band)}
.card__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.card__ph{display:block;width:100%;aspect-ratio:4/3;background:linear-gradient(135deg,#e6e6e6,#f4f4f4)}
/* Заглушка с обозначением типа: осмысленное состояние вместо пустого прямоугольника. */
.card__ph--code{display:grid;place-items:center;position:relative}
.card__ph--code::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,rgb(30 30 30 / .035) 0 2px,transparent 2px 9px)}
.card__ph--code b{position:relative;font-size:clamp(1.125rem,1.6vw,1.375rem);font-weight:700;
  text-transform:uppercase;letter-spacing:.02em;color:#a8a8a8}
.card__body{padding:clamp(1.125rem,1.7vw,1.5rem);display:flex;flex-direction:column;gap:.6rem;flex:1}
.card__code{font-size:var(--step-tiny);text-transform:uppercase;letter-spacing:.05em;color:var(--red-dark);font-weight:600}
.card__title{font-size:var(--step-h3);text-transform:uppercase;font-weight:600;line-height:1.15;margin:0;overflow-wrap:break-word;hyphens:auto}
.card__spec{font-size:var(--step-small);color:var(--ink-55);font-variant-numeric:tabular-nums;margin-top:auto}
.card--tool .card__title{font-size:clamp(1rem,1.25vw,1.125rem);line-height:1.2}
.card__metric{position:absolute;left:0;bottom:0;background:var(--red);color:#fff;padding:.6rem .9rem;border-radius:0 var(--radius) 0 0;max-width:85%}
.card__metric b{display:block;font-size:1.25rem;font-weight:600;line-height:1}
.card__metric span{display:block;font-size:var(--step-tiny);text-transform:uppercase;letter-spacing:.03em;margin-top:.15rem}
@media (hover:hover) and (pointer:fine){
  .card{transition:border-color 180ms ease}
  .card:hover{border-color:var(--ink)}
  .card__media img{transition:transform 400ms var(--ease-out)}
  .card:hover .card__media img{transform:scale(1.03)}
}

/* Двухколоночная сетка и текстовая ссылка «Подробнее» */
.grid--2{grid-template-columns:1fr}
@media (min-width:700px){.grid--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}}
.lead-text{font-size:var(--step-lead);color:var(--ink-70);line-height:1.5;max-width:56ch}
.link-more{
  display:inline-flex;align-items:center;gap:.4rem;min-height:44px;
  font-size:var(--step-tiny);font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  text-decoration:none;color:var(--red-dark);
}
.link-more::after{content:"→";transition:transform 180ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.link-more:hover::after{transform:translateX(4px)}}

/* ---------- Фильтры каталога ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--space-4)}
.chip{
  display:inline-flex;align-items:center;min-height:40px;padding:.4rem 1rem;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;
  font-size:var(--step-small);cursor:pointer;text-decoration:none;color:inherit;
}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
@media (hover:hover) and (pointer:fine){.chip:hover{border-color:var(--ink)}}
.filters__empty{width:100%;color:var(--ink-55);font-size:var(--step-small)}

/* ---------- Галерея ---------- */
.gallery{display:grid;gap:var(--space-2);grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-sm);background:var(--band)}

/* ---------- Хлебные крошки ---------- */
.crumbs{padding-top:var(--space-3)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.3rem .5rem;font-size:var(--step-tiny);color:var(--ink-55)}
.crumbs li+li::before{content:"/";margin-right:.5rem;color:var(--line)}
.crumbs a{text-decoration:none}
.crumbs [aria-current]{color:var(--ink)}
@media (hover:hover) and (pointer:fine){.crumbs a:hover{color:var(--red)}}

/* ---------- Модальное окно ---------- */
.modal{border:0;padding:0;width:min(560px,calc(100vw - 2rem));border-radius:var(--radius);background:#fff;color:var(--ink)}
.modal::backdrop{background:rgb(30 30 30 / .6)}
.modal__inner{padding:clamp(1.25rem,3vw,2rem);position:relative}
.modal__close{position:absolute;top:.5rem;right:.5rem;width:44px;height:44px;display:grid;place-items:center;background:none;border:0;cursor:pointer}
.modal__title{font-size:var(--step-h2);text-transform:uppercase;font-weight:500;line-height:1.1;margin:0 0 .5rem;padding-right:3rem}
.modal__text{color:var(--ink-55);font-size:var(--step-small);margin-bottom:var(--space-3)}
@media (hover:hover) and (pointer:fine){.modal__close:hover{color:var(--red)}}

/* ---------- Постраничная навигация ---------- */
.pager{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--space-5)}
.pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 .75rem;border:1px solid var(--line);border-radius:var(--radius-sm);text-decoration:none;font-size:var(--step-small)}
.pager .page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- Подвал ---------- */
.foot{padding-top:var(--space-6);padding-bottom:var(--space-4)}
.foot__cols{display:grid;gap:var(--space-5);grid-template-columns:1fr;font-size:var(--step-small);color:var(--ink-70);line-height:1.6}
@media (min-width:700px){.foot__cols{grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr) minmax(0,1fr)}}
.foot a{text-decoration:none}
@media (hover:hover) and (pointer:fine){.foot a:hover{color:var(--red)}}
.foot__cols ul{display:grid;gap:.4rem}
.foot__contacts{display:grid;gap:.35rem;margin-bottom:var(--space-3)}
.foot__phone{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:clamp(1.375rem,2.2vw,1.75rem);font-weight:600;letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;font-variant-numeric:tabular-nums;
}
.foot__mail{
  display:inline-flex;align-items:center;min-height:40px;
  font-size:var(--step-lead);font-weight:500;color:var(--ink);text-decoration:none;
}
.foot__addr{max-width:34ch}
@media (hover:hover) and (pointer:fine){
  .foot__phone:hover,.foot__mail:hover{color:var(--red)}
}
.foot__cols a,.foot__cols li{display:inline-flex;align-items:center;min-height:28px}
@media (max-width:899px){
  .foot__cols ul{gap:.15rem}
  .foot__cols a{min-height:44px}
}
.foot__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--line)}
.foot__logo{color:var(--ink)}
.foot__copy{font-size:var(--step-tiny);color:var(--ink-55);width:100%}

/* ---------- Появление при прокрутке ---------- */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{opacity:0;transform:translateY(8px)}
  .js [data-reveal].is-in{
    opacity:1;transform:none;
    transition:opacity 320ms var(--ease-out),transform 320ms var(--ease-out);
    transition-delay:var(--reveal-delay,0ms);
  }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

@media print{.head,.mega,.contactband,.foot,.modal,.filters{display:none!important}body{color:#000}}

/* =========================================================================
   Интерактивная схема систем
   ========================================================================= */
.dgm{background:var(--ink);color:#fff;padding-block:var(--space-7)}
.dgm__head{margin-bottom:var(--space-5);max-width:62ch}
.dgm__title{color:#fff;margin-bottom:var(--space-3)}
.dgm__lede{color:#b4b4b4;font-size:var(--step-lead)}

.dgm__tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--space-4)}
.dgm__tab{
  display:grid;gap:.15rem;text-align:left;cursor:pointer;
  background:transparent;border:1.5px solid #3d3d3d;border-radius:var(--radius);
  padding:.75rem 1.25rem;min-height:56px;
  transition:border-color 180ms ease,background-color 180ms ease;
}
.dgm__tab b{font-size:var(--step-small);font-weight:600;text-transform:uppercase;letter-spacing:.02em}
.dgm__tab span{font-size:var(--step-tiny);color:#9a9a9a}
.dgm__tab[aria-selected="true"]{background:#fff;border-color:#fff;color:var(--ink)}
.dgm__tab[aria-selected="true"] span{color:#5c5c5c}
.dgm__tab:active{transform:scale(.99)}
@media (hover:hover) and (pointer:fine){
  .dgm__tab:hover{border-color:#7a7a7a}
  .dgm__tab[aria-selected="true"]:hover{border-color:#fff}
}

.dgm__panel{display:grid;gap:var(--space-4)}
.dgm__panel[hidden]{display:none}
@media (min-width:960px){
  .dgm__panel{grid-template-columns:minmax(0,1.55fr) minmax(260px,.45fr);gap:var(--space-5);align-items:start}
}

.dgm__stage{background:#151515;border:1px solid #333;border-radius:var(--radius);padding:clamp(.75rem,1.5vw,1.25rem)}
.dgm__svg{width:100%;height:auto;display:block}
.dgm__lbl{fill:#c9c9c9;font-size:15px;font-family:inherit}
.dgm__note{fill:#8a8a8a;font-size:14px;font-family:inherit}

.dgm__key{display:flex;gap:1.25rem;margin-top:.75rem;font-size:var(--step-tiny);color:#9a9a9a}
.dgm__key li{display:flex;align-items:center;gap:.4rem}
.dgm__sw{width:18px;height:3px;border-radius:2px;display:block}
.dgm__sw--fluid{background:#fff}
.dgm__sw--chip{background:var(--red)}

.dgm__text{color:#c4c4c4;font-size:1rem;line-height:1.55;margin-bottom:var(--space-3)}
.dgm__specs{display:grid;gap:0;margin-bottom:var(--space-4)}
.dgm__specs div{display:flex;justify-content:space-between;gap:1rem;padding-block:.7rem;border-bottom:1px solid #333}
.dgm__specs dt{color:#9a9a9a;font-size:var(--step-small)}
.dgm__specs dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;font-size:var(--step-small)}

/* Движение потока: пунктир бежит по направлению течения */
@media (prefers-reduced-motion:no-preference){
  .dgm__flow{stroke-dasharray:16 12;animation:dgm-flow 1.1s linear infinite}
}
@keyframes dgm-flow{to{stroke-dashoffset:-28}}

/* =========================================================================
   Внутренняя страница: текст + закреплённая панель параметров
   ========================================================================= */
.withaside{display:grid;gap:var(--space-5)}
@media (min-width:1000px){
  .withaside{grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:var(--space-6);align-items:start}
}
.withaside__lede{margin-bottom:var(--space-4);max-width:64ch}
/* Текст шире: 70ch в колонке 1200px оставляли полстраницы пустой */
.withaside__main .prose{max-width:none}
.withaside__main .prose .table-wrap{margin-block:1.25em}

.panel{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.5rem,2.2vw,2.125rem);
}
@media (min-width:1000px){
  .panel{position:sticky;top:calc(56px + 1.75rem)}
}
.panel__label{
  font-size:var(--step-tiny);text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-55);margin-bottom:.75rem;
}
.panel__label--sep{margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--line)}
.panel__specs{display:grid;margin:0}
.panel__specs div{display:flex;justify-content:space-between;gap:1rem;padding-block:.7rem;border-bottom:1px solid var(--line)}
.panel__specs div:last-child{border-bottom:0}
.panel__specs dt{color:var(--ink-55);font-size:var(--step-small)}
.panel__specs dd{margin:0;font-weight:600;font-size:var(--step-small);text-align:right;font-variant-numeric:tabular-nums}
.panel__note{margin-top:.75rem;font-size:var(--step-tiny);color:var(--ink-55);line-height:1.5}
.panel__tel{
  display:flex;align-items:center;min-height:44px;
  font-size:1.375rem;font-weight:600;text-decoration:none;font-variant-numeric:tabular-nums;
}
@media (hover:hover) and (pointer:fine){.panel__tel:hover{color:var(--red)}}
.panel__cta{margin-top:.75rem}
.panel__hint{margin-top:.75rem;font-size:var(--step-tiny);color:var(--ink-55);line-height:1.5}

/* =========================================================================
   Блоки из макетов
   ========================================================================= */

/* Чёрные карточки с крупными числами */
.stats{display:grid;gap:var(--space-2);grid-template-columns:1fr;margin-bottom:var(--space-5)}
@media (min-width:700px){.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}}
.stat{background:var(--ink);color:#fff;border-radius:var(--radius);padding:clamp(1.5rem,2.8vw,2.5rem)}
.stat__label{font-size:var(--step-tiny);color:#9a9a9a;margin-bottom:clamp(1rem,2vw,1.75rem)}
.stat__value{display:flex;align-items:baseline;flex-wrap:wrap;gap:.35rem}
.stat__value b{font-size:clamp(2.5rem,5.5vw,4rem);font-weight:500;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat__pre{font-size:var(--step-small);color:#9a9a9a}
.stat__unit{font-size:var(--step-small);color:#9a9a9a;margin-right:.4rem}

/* Нумерованный аккордеон */
.acc{margin-bottom:var(--space-5)}
.acc__head{display:grid;gap:.5rem;margin-bottom:var(--space-4)}
@media (min-width:760px){.acc__head{grid-template-columns:minmax(0,.55fr) minmax(0,1fr);align-items:end;gap:var(--space-4)}}
.acc__eyebrow{font-size:var(--step-small);color:var(--ink-55);line-height:1.35}
.acc__title{margin:0}
.acc__item{border-top:1px solid var(--line)}
.acc__item:last-child{border-bottom:1px solid var(--line)}
.acc__row{
  width:100%;display:flex;align-items:center;gap:clamp(1rem,2.5vw,2.5rem);
  background:none;border:0;cursor:pointer;text-align:left;
  padding:clamp(1.25rem,2vw,1.75rem) 0;min-height:68px;
}
.acc__row--static{cursor:default}
.acc__num{font-size:var(--step-small);color:var(--ink-55);font-variant-numeric:tabular-nums;flex:0 0 auto;width:2ch}
.acc__name{flex:1;font-size:var(--step-h3);text-transform:uppercase;font-weight:600;line-height:1.2}
.acc__arrow{flex:0 0 auto;color:var(--ink-55);display:grid;place-items:center;transition:transform 200ms var(--ease-out),color 180ms ease}
.acc__row[aria-expanded="true"] .acc__arrow{transform:rotate(90deg);color:var(--red)}
@media (hover:hover) and (pointer:fine){
  .acc__row:hover .acc__name{color:var(--red);transition:color 160ms ease}
  .acc__row:hover .acc__arrow{color:var(--red)}
}
.acc__body{padding:0 0 var(--space-3) calc(2ch + clamp(1rem,2.5vw,2.5rem));color:var(--ink-70);max-width:70ch}
.acc__body[hidden]{display:none}
.acc__body ul{display:grid;gap:.35rem;margin-top:.5rem}
.acc__body li{position:relative;padding-left:1.1rem}
.acc__body li::before{content:"";position:absolute;left:0;top:.62em;width:.4rem;height:2px;background:var(--red)}

.black-card__metric{display:grid;gap:.15rem;padding-bottom:var(--space-2);border-bottom:1px solid #3a3a3a}
.black-card__metric b,.black-card__metric span{display:block}
.black-card__metric b{font-size:1.75rem;line-height:1;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.black-card__metric span{font-size:var(--step-tiny);color:#9a9a9a;text-transform:uppercase;letter-spacing:.04em}

/* Плитка-фото с подписью */
.phototile{
  position:relative;display:block;border-radius:var(--radius);overflow:hidden;
  text-decoration:none;color:#fff;background:var(--ink);min-height:280px;
}
.phototile img,.phototile__ph{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
.phototile__ph{background:linear-gradient(135deg,#2f2f2f,#5a5a5a)}
.phototile__body{
  position:relative;display:flex;flex-direction:column;gap:var(--space-3);
  justify-content:flex-end;min-height:280px;
  padding:clamp(1.25rem,2.2vw,1.75rem);
  background:linear-gradient(to top,rgb(15 15 15 / .92) 0%,rgb(15 15 15 / .72) 45%,rgb(15 15 15 / 0) 100%);
}
.phototile__title{font-size:var(--step-h2);text-transform:uppercase;font-weight:500;line-height:1.08}
.phototile .btn{align-self:stretch;justify-content:center}
@media (hover:hover) and (pointer:fine){
  .phototile img{transition:transform 500ms var(--ease-out)}
  .phototile:hover img{transform:scale(1.04)}
}

/* Белая карточка технических возможностей */
.speccard{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.25rem,2.2vw,2rem);background:#fff;
  display:flex;flex-direction:column;justify-content:center;min-height:280px;
}
.speccard__title{font-size:var(--step-tiny);text-transform:uppercase;letter-spacing:.07em;color:var(--ink-55);margin-bottom:var(--space-4)}
.speccard__label{font-size:var(--step-tiny);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-55);margin-top:var(--space-3)}
.speccard__label:first-of-type{margin-top:0}
.speccard__line{font-size:clamp(1.25rem,2.2vw,1.75rem);font-weight:500;line-height:1.3;font-variant-numeric:tabular-nums}

/* Шахматка «фото — характеристики» */
.checker{display:grid;gap:var(--space-2);grid-template-columns:1fr}
@media (min-width:820px){.checker{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}}

/* Красный баннер «Заполни анкету» */
.anketa{
  background:var(--red);color:#fff;border-radius:var(--radius);
  padding:clamp(1.5rem,3vw,2.5rem);display:grid;gap:var(--space-4);
  margin-block:var(--space-5);
}
.anketa__title{font-size:var(--step-h2);text-transform:uppercase;font-weight:500;line-height:1.12}
.anketa .btn{justify-self:stretch}
@media (min-width:760px){
  .anketa{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-5)}
  .anketa .btn{justify-self:end}
}

/* Сетка нумерованных плиток */
.ngrid{display:grid;gap:var(--space-2);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){.ngrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1060px){.ngrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ngrid__cell{background:var(--band);border-radius:var(--radius);padding:clamp(1.25rem,2vw,1.75rem);display:grid;gap:var(--space-4);align-content:start}
.ngrid__num{font-size:var(--step-tiny);color:var(--ink-55);font-variant-numeric:tabular-nums}
.ngrid__cell p{font-size:var(--step-small);text-transform:uppercase;font-weight:500;line-height:1.35}
/* Сдвиг по вертикали — как в макете */
@media (min-width:760px){
  .ngrid__cell:nth-child(3n+2){margin-top:var(--space-4)}
  .ngrid__cell:nth-child(3n){margin-top:var(--space-5)}
}

/* Красная навигация между системами */
.pn{
  display:flex;align-items:stretch;justify-content:space-between;gap:2px;
  margin-block:var(--space-5);border-radius:var(--radius);overflow:hidden;
}
.pn__link{
  flex:1;display:flex;align-items:center;gap:.75rem;justify-content:center;
  background:var(--red);color:#fff;text-decoration:none;
  padding:1rem 1.25rem;min-height:56px;
  font-size:var(--step-small);font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  transition:background-color 180ms ease;
}
.pn__link--prev{justify-content:flex-start}
.pn__link--next{justify-content:flex-end}
@media (hover:hover) and (pointer:fine){.pn__link:hover{background:var(--red-dark)}}

/* Тёмная панель с этапами */
.steps{background:var(--ink);color:#fff;border-radius:var(--radius);padding:clamp(1.5rem,3vw,2.5rem);margin-bottom:var(--space-5)}
.steps__grid{display:grid;gap:var(--space-3);margin-bottom:var(--space-5)}
@media (min-width:820px){.steps__grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--space-5);align-items:start}}
.steps__text{color:#b4b4b4;font-size:var(--step-small);line-height:1.6}
.steps__title{color:#fff;margin:0}
.steps__line{display:grid;gap:var(--space-3);margin-bottom:var(--space-4)}
@media (min-width:620px){.steps__line{grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--space-2)}}
.steps__line li{display:grid;gap:.5rem;position:relative;padding-top:var(--space-3)}
.steps__line li::before{content:"";position:absolute;top:calc(var(--space-3) / 2 - 1px);left:0;right:0;height:1px;background:#3d3d3d}
.steps__line b{
  width:44px;height:44px;border-radius:50%;border:1.5px solid #5a5a5a;
  display:grid;place-items:center;font-size:var(--step-small);font-variant-numeric:tabular-nums;
}
.steps__line span{font-size:var(--step-tiny);color:#b4b4b4;line-height:1.4}

/* Складские остатки: точка входа к файлу, без таблицы на сайте */
.stockget{display:grid;gap:var(--space-4)}
@media (min-width:860px){.stockget{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--space-6);align-items:start}}
.stockget__lede .h-sec{margin-bottom:var(--space-3)}
.stockget__media img,.stockget__ph{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius);margin-bottom:var(--space-2)}
.stockget__ph{display:block;background:linear-gradient(135deg,#2a2a2a,#6a6a6a)}
.stockget__hint{margin-top:.75rem;font-size:var(--step-tiny);color:var(--ink-55);line-height:1.5}

/* Заглушка вместо фотографии */
.ph{
  display:grid;place-items:center;width:100%;border-radius:var(--radius);
  position:relative;overflow:hidden;
}
.ph--light{background:linear-gradient(135deg,#e6e6e6,#f4f4f4)}
.ph--dark{background:linear-gradient(135deg,#2c2c2c,#3d3d3d)}
.ph::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,rgb(30 30 30 / .04) 0 2px,transparent 2px 9px);
}
.ph--dark::after{background:repeating-linear-gradient(135deg,rgb(255 255 255 / .05) 0 2px,transparent 2px 9px)}
.ph b{
  position:relative;font-size:var(--step-tiny);font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;text-align:center;padding:0 1rem;
}
.ph--light b{color:#9a9a9a}
.ph--dark b{color:#8a8a8a}

/* Проходная схема кейса */
.bore{margin-block:var(--space-4)}
.bore__track{display:grid;gap:var(--space-3);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){.bore__track{grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--space-2)}}
.bore__step{display:grid;gap:.5rem;justify-items:center;text-align:center;position:relative;padding-top:var(--space-2)}
@media (min-width:760px){
  .bore__step:not(:last-child)::after{
    content:"";position:absolute;top:calc(var(--space-2) + 50px);right:-1rem;width:2rem;height:1px;background:var(--line);
  }
}
.bore__disc{display:grid;place-items:center;width:100px;height:100px;border-radius:50%;background:var(--band)}
.bore__disc i{display:block;background:var(--ink);border-radius:50%}
.bore__step b{font-size:var(--step-small);font-weight:600;font-variant-numeric:tabular-nums}
.bore__tool{font-size:var(--step-tiny);color:var(--ink-55);line-height:1.35}

/* Карточка станка: номер, модель, фото, две кнопки */
.machines{display:grid;gap:var(--space-3);grid-template-columns:1fr}
@media (min-width:820px){.machines{grid-template-columns:repeat(2,minmax(0,1fr))}}
.machine{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.25rem,2vw,1.75rem);display:flex;flex-direction:column;gap:var(--space-3);
}
.machine__head{display:flex;gap:var(--space-3);align-items:flex-start}
.machine__num{font-size:var(--step-tiny);color:var(--ink-55);font-variant-numeric:tabular-nums;flex:0 0 auto;padding-top:.25em}
.machine__desc{margin-top:.5rem;font-size:var(--step-small);color:var(--ink-70);line-height:1.5}
.machine__media img,.machine__media .ph{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius-sm)}
.machine__actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto}
.machine__actions .btn{flex:1 1 auto}
@media (hover:hover) and (pointer:fine){
  .machine{transition:border-color 200ms ease,transform 200ms var(--ease-out)}
  .machine:hover{border-color:var(--ink);transform:translateY(-2px)}
}

/* Текст + иллюстрация в две колонки */
.withaside__media img,.withaside__media .ph{width:100%;border-radius:var(--radius);object-fit:cover}

/* Главный результат в панели кейса */
.panel__metric{display:grid;gap:.2rem;padding-bottom:var(--space-3);margin-bottom:var(--space-3);border-bottom:1px solid var(--line)}
.panel__metric b{font-size:2rem;line-height:1;font-weight:500;letter-spacing:-.02em;color:var(--red-dark);font-variant-numeric:tabular-nums}
.panel__metric span{font-size:var(--step-tiny);color:var(--ink-55);text-transform:uppercase;letter-spacing:.04em}

/* Кадр инструмента на карточке */
.toolshot{margin-bottom:var(--space-4)}
.toolshot img,.toolshot .ph{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);background:var(--band)}

/* Заглушка внутри плитки отрасли занимает правую половину */
.area .ph{width:42%;flex:0 0 auto;border-radius:0;aspect-ratio:auto!important}

/* Плитки на 404 содержат абзац — квадрат им не подходит */
.grid--2 .tile{aspect-ratio:auto;min-height:190px}

/* Согласие на обработку персональных данных */
.consent{display:flex;gap:.6rem;align-items:flex-start;margin-bottom:var(--space-3)}
.consent input{
  flex:0 0 auto;width:20px;height:20px;margin-top:.1rem;
  accent-color:var(--red);cursor:pointer;
}
.consent label{font-size:var(--step-tiny);color:var(--ink-55);line-height:1.5;cursor:pointer}
.consent a{color:var(--ink);text-decoration:underline;text-underline-offset:.15em}
.consent input[aria-invalid="true"]{outline:2px solid var(--red);outline-offset:2px}
.band .consent label,.contactband .consent label{color:var(--ink-55)}
@media (hover:hover) and (pointer:fine){.consent a:hover{color:var(--red)}}

/* Нумерованная сетка: квадраты, а не разновысотные прямоугольники */
@media (min-width:560px){
  .ngrid__cell{aspect-ratio:1;align-self:start;overflow:hidden}
}

/* Уведомление о cookie */
.cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:var(--ink);color:#dcdcdc;
  box-shadow:0 -8px 30px rgb(30 30 30 / .18);
}
.cookie[hidden]{display:none}
.cookie__inner{
  display:grid;gap:var(--space-3);align-items:center;
  padding-block:var(--space-3);
}
@media (min-width:760px){.cookie__inner{grid-template-columns:1fr auto;gap:var(--space-4)}}
.cookie__text{font-size:var(--step-small);line-height:1.5;max-width:80ch}
.cookie__text a{color:#fff;text-decoration:underline;text-underline-offset:.15em}
.cookie .btn{justify-self:start}
@media (min-width:760px){.cookie .btn{justify-self:end}}
@media (prefers-reduced-motion:no-preference){
  .cookie{animation:cookie-in 260ms var(--ease-out)}
  @keyframes cookie-in{from{transform:translateY(100%)}to{transform:none}}
}