/* ============================================================
   ТРАК ПЛЭНЕТ — дизайн-система
   Структура по референсу, палитра красная (бренд #E31E24)
   ============================================================ */

:root{
  /* бренд */
  --red-600:#E31E24;
  --red-700:#C4171D;
  --red-800:#A31217;
  --red-100:#FCEBEC;
  --red-050:#FEF5F5;

  /* нейтральные */
  --ink-900:#17191C;
  --ink-800:#1E2226;
  --ink-600:#3A4046;
  --ink-400:#6E757C;
  --ink-300:#9AA1A7;
  --line:#E2E4E6;
  --surface:#F3F4F4;
  --paper:#FAFAF9;
  --white:#FFFFFF;

  /* статусы */
  --green:#1F8A4C;
  --amber:#C98A12;

  /* типографика */
  --font-display:'Manrope',system-ui,sans-serif;                     /* только hero */
  --font-heading:'Manrope','Montserrat',system-ui,sans-serif;        /* все прочие заголовки */
  --font-text:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* крупные цифры счётчика в hero: по референсу — тяжёлый гротеск
     с коротким флажком у «1» (без нижней засечки) и тугим просветом
     в «5»; из свободных ближе всего Roboto 900 */
  --font-stat:'Roboto',system-ui,sans-serif;

  /* Montserrat имеет настоящий Bold — обводка не нужна */
  --weight-display:800;
  --stroke-display:0;

  /* геометрия */
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:8px;

  --container:1240px;
  --gutter:24px;
  --section-y:96px;

  --shadow-sm:0 2px 10px rgba(23,25,28,.05);
  --shadow-md:0 12px 34px rgba(23,25,28,.08);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-text);
  font-size:16px;
  line-height:1.55;
  color:var(--ink-900);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}

/* ---------- типографика ---------- */
.section__title{
  font-family:var(--font-heading);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(30px,4vw,56px);
  line-height:.95;
  letter-spacing:-.015em;
  color:var(--ink-900);
}
/* две строки: «Пять причин» / «работать с нами» */
.reasons__title span{display:block}
.kicker{
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--red-600);
  margin-bottom:14px;
}

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  font-weight:600;
  font-size:15px;
  line-height:1;
  padding:14px 22px;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}

.btn--primary{background:var(--red-600);color:#fff}
.btn--primary:hover{background:var(--ink-900)}

.btn--dark{background:var(--ink-900);color:#fff}
.btn--dark:hover{background:var(--ink-800)}

.btn--ghost{
  background:transparent;
  border-color:var(--line);
  color:var(--ink-900);
}
.btn--ghost:hover{border-color:var(--ink-300);background:var(--surface)}

/* нейтральная кнопка: в шапке много красного, «Получить КП» не акцентируем */
.btn--gray{
  background:var(--surface);
  border-color:var(--line);
  color:var(--ink-900);
}
.btn--gray:hover{background:#E8EAEB;border-color:var(--ink-300)}

.btn--sm{padding:11px 16px;font-size:14px}
.btn--lg{padding:17px 28px;font-size:16px}
.btn--block{width:100%}

/* ---------- поля ---------- */
.field{display:block}
.field__label{
  display:block;
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-400);
  margin-bottom:7px;
}
.field__input{
  width:100%;
  font:inherit;
  color:var(--ink-900);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:14px 16px;
  transition:border-color .18s ease;
}
.field__input::placeholder{color:var(--ink-300)}
.field__input:focus{outline:none;border-color:var(--red-600)}
.field__note{
  font-size:12px;
  color:var(--ink-400);
  line-height:1.5;
  margin-top:10px;
}
.field__note a{color:var(--ink-600);text-decoration:underline}

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{
  background:var(--ink-900);
  color:rgba(255,255,255,.72);
  font-size:13px;
}
.topbar__in{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:38px;
  flex-wrap:nowrap;
}

/* Разделы о компании живут в той же строке, что и адрес. Отдельная вторая
   строка утяжеляла шапку, поэтому всё ужато в одну: сначала ссылки,
   затем адрес, почта и соцсети. */
.topbar__nav{
  display:flex;
  align-items:center;
  gap:14px;
  flex:0 0 auto;
  min-width:0;
}
.topbar__nav a{
  font-size:12.5px;
  line-height:1.2;
  white-space:nowrap;
  color:rgba(255,255,255,.66);
  transition:color .18s ease;
}
.topbar__nav a:hover{color:#fff}
.topbar__nav a.is-active{color:#fff;font-weight:600}
.topbar__sep{width:1px;height:12px;background:rgba(255,255,255,.18)}
.topbar__spacer{flex:1}
/* город и адрес — кнопка выбора города (открывает модальное окно) */
.topbar__geo{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:0;
  padding:0;
  border:0;
  background:none;
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
  transition:color .18s ease;
}
.topbar__geo:hover{color:#fff}
.topbar__geo > span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.topbar__geo svg{
  flex:0 0 auto;
  width:9px;
  height:9px;
  opacity:.65;
  transition:opacity .18s ease,transform .18s ease;
}
.topbar__geo:hover svg{opacity:1;transform:translateY(1px)}
.topbar__link{color:rgba(255,255,255,.72);white-space:nowrap;transition:color .18s}
.topbar__link:hover{color:#fff}
/* мессенджеры — сразу за почтой. Одноцветные силуэты: цвет берётся из
   currentColor (как у соседнего текста), при наведении — красный. */
.topbar__soc{display:flex;align-items:center;gap:8px;flex:0 0 auto;color:rgba(255,255,255,.72)}
.topbar__soc-link{
  display:block;
  flex:0 0 auto;
  width:18px;
  height:18px;
  background:currentColor;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
  transition:color .18s ease;
}
.topbar__soc-link:hover{color:var(--red-600)}
.topbar__soc-link--tg{
  -webkit-mask-image:url("../assets/img/social/telegram-mono.svg");
  mask-image:url("../assets/img/social/telegram-mono.svg");
}
.topbar__soc-link--max{
  -webkit-mask-image:url("../assets/img/social/max-mono.svg");
  mask-image:url("../assets/img/social/max-mono.svg");
}
/* телефон в топбаре — только для мобильных, где он уходит из шапки */
.topbar__phone{display:none;color:#fff;font-weight:700;letter-spacing:.01em;white-space:nowrap}

/* Однострочный топбар: по мере сужения первым уходит адрес (он есть
   в подвале и на странице контактов), разделы превращаются в ленту. */
/* на планшете оставляем только город — обрезанная улица выглядела хуже */
@media (max-width:1024px){
  .topbar__geo-addr{display:none}
}
/* ниже 900 адрес уступает место разделам: он есть в подвале и на контактах */
@media (max-width:900px){
  .topbar__geo{display:none}
}
@media (max-width:820px){
  .topbar__geo{display:none}
  .topbar__in{min-height:34px;gap:10px}
  .topbar__nav{
    flex:1 1 auto;
    gap:18px;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    /* затухание справа — подсказка, что ленту можно листать */
    -webkit-mask-image:linear-gradient(to right,#000 88%,transparent);
    mask-image:linear-gradient(to right,#000 88%,transparent);
  }
  .topbar__nav::-webkit-scrollbar{display:none}
  .topbar__nav a{flex:0 0 auto;font-size:12px}
}

/* ============================================================
   HEADER
   ============================================================ */
/* шапка липкая: якорные переходы иначе прячут заголовок секции под ней */
section[id]{scroll-margin-top:88px}

.header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header__in{
  display:flex;
  align-items:center;
  gap:20px;
  min-height:74px;
}

.logo{display:inline-flex;align-items:center;flex:0 0 auto;position:relative}
.logo__img{width:auto;height:38px;display:block;position:relative;z-index:1;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.logo--footer .logo__img{height:34px}

/* пар из ноздрей быка */
.logo__steam{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:300px;
  height:300px;
  z-index:0;
  pointer-events:none;
}
.logo.snorting .logo__img{transform:scale(1.04) translateY(1px)}

/* ---------- акцентная кнопка Каталог ---------- */
.catalog-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  background:var(--red-600);
  color:#fff;
  border:0;
  border-radius:var(--radius-sm);
  padding:13px 20px;
  font-size:15px;
  font-weight:600;
  transition:background-color .18s ease;
}
.catalog-btn:hover{background:var(--ink-900)}
.catalog-btn__burger{display:flex;flex-direction:column;gap:3px;width:16px}
.catalog-btn__burger i{display:block;height:2px;background:#fff;border-radius:1px}
.catalog-btn__burger i:nth-child(2){width:70%}
.catalog-btn:active,
.catalog-btn[aria-expanded="true"]{background:var(--ink-900)}

/* ---------- мега-меню: рейка категорий + витрина раздела ---------- */
.megamenu{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:100%;
  width:min(1240px, calc(100vw - 32px));
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:0 24px 64px rgba(23,25,28,.14);
  z-index:60;
  overflow:hidden;
}
.megamenu[hidden]{display:none}

/* Панель — две зоны: слева вертикальный список категорий, справа витрина.
   Вертикальный список нужен, чтобы соседние пункты шли друг за другом:
   при сетке в два ряда переход с верхней плитки на нижнюю прыгал через
   восемь категорий и менял всю витрину целиком. */
.megamenu__panel{
  display:grid;
  grid-template-columns:290px minmax(0,1fr);
  align-items:stretch;
}

/* рейл: пять обобщённых групп вместо семнадцати категорий. Пунктов мало,
   поэтому каждый тянется на равную долю высоты рейла (flex:1) и заполняет
   левую колонку целиком — пустой полосы бумаги внизу больше нет. */
.megamenu__rail{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:9px 9px;
  background:var(--paper);
  border-right:1px solid var(--line);
}
.megamenu__cat{
  position:relative;
  flex:1 1 0;
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  min-width:0;
  padding:10px 12px;
  text-align:left;
  background:transparent;
  border:1px solid transparent;
  border-radius:10px;
  font-size:15px;
  font-weight:500;
  line-height:1.18;
  color:var(--ink-600);
  transition:background-color .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease;
}
/* Названия групп длинные («Спецтехника и Спецтранспорт»), а пунктов всего
   пять — обрезка многоточием тут только мешает, поэтому разрешаем две строки. */
.megamenu__cat span{
  min-width:0;
  white-space:normal;
  overflow-wrap:break-word;
}
/* активная плитка и наведение — красная заливка, белый текст и белая иконка */
.megamenu__cat:hover,
.megamenu__cat.is-active{
  background:var(--red-600);
  border-color:var(--red-600);
  color:#fff;
  font-weight:600;
  box-shadow:0 6px 18px rgba(227,30,36,.22);
}
.megamenu__cat-icon{
  width:60px;
  height:30px;
  object-fit:contain;
  flex:0 0 auto;
  opacity:1;
  transition:opacity .16s ease,filter .16s ease;
}
.megamenu__cat:hover .megamenu__cat-icon,
.megamenu__cat.is-active .megamenu__cat-icon{
  opacity:1;
  filter:brightness(0) invert(1);
}

/* содержимое */
/* Высота фиксированная: рейл из пяти пунктов растянут на всю колонку, и если
   панель будет подстраиваться под каждую категорию, кнопки слева начнут
   менять размер при наведении. Длинные списки прокручиваются внутри. */
.megamenu__content{
  position:relative;
  padding:24px 26px 22px;
  height:452px;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-gutter:stable;
}
.megamenu__pane{display:none;opacity:0;transform:translateX(14px)}
/* Панель группы — не сетка: сверху идут кнопки категорий, под ними витрина
   выбранной категории. Сетку держит уже .mm-tab. */
.megamenu__pane.is-active{
  display:block;
  animation:paneIn .22s cubic-bezier(.2,.8,.2,1) forwards;
}
.megamenu__pane.is-back{animation-name:paneInBack}
@keyframes paneIn{
  from{opacity:0;transform:translateX(14px)}
  to{opacity:1;transform:none}
}
@keyframes paneInBack{
  from{opacity:0;transform:translateX(-14px)}
  to{opacity:1;transform:none}
}

/* ---- кнопки категорий внутри выбранной группы ---- */
.mm-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding-bottom:20px;
  margin-bottom:20px;
  border-bottom:1px solid var(--line);
}
.mm-chip{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 15px 9px 12px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:999px;
  font-size:13.5px;
  font-weight:600;
  line-height:1;
  color:var(--ink-600);
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease;
}
.mm-chip:hover{
  border-color:var(--red-600);
  color:var(--red-600);
}
.mm-chip.is-active{
  background:var(--red-600);
  border-color:var(--red-600);
  color:#fff;
  box-shadow:0 6px 16px rgba(227,30,36,.22);
}
.mm-chip__icon{
  width:40px;
  height:20px;
  object-fit:contain;
  flex:0 0 auto;
  transition:filter .16s ease;
}
/* иконка белеет только на красной плашке: у неактивной кнопки при наведении
   фон остаётся белым, и invert сделал бы иконку невидимой */
.mm-chip.is-active .mm-chip__icon{filter:brightness(0) invert(1)}
.mm-chip.is-active:hover{color:#fff}

/* ---- витрина выбранной категории ---- */
.mm-tab{display:none}
.mm-tab.is-active{
  display:grid;
  grid-template-columns:minmax(0,1fr) 268px;
  grid-template-rows:auto auto;
  column-gap:34px;
  row-gap:0;
  align-items:start;
  animation:tabIn .18s ease both;
}
@keyframes tabIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

/* display:contents — чтобы заголовок, группы и карточка стали прямыми
   элементами грида вкладки, а обёртка .mm-tab__main не мешала раскладке */
.mm-pane__main,
.mm-tab__main{display:contents}
.megamenu__pane-head{grid-column:1/-1;grid-row:1;margin-bottom:18px}
.megamenu__pane-head h3{
  font-family:var(--font-heading);
  font-weight:800;
  text-transform:uppercase;
  font-size:26px;
  line-height:.98;
  letter-spacing:-.01em;
  color:var(--ink-900);
  margin-bottom:9px;
}
.mm-pane__spec{display:flex;flex-wrap:wrap;gap:6px}
.mm-pane__spec span{
  font-size:11.5px;
  font-weight:600;
  color:var(--ink-600);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px 10px;
  white-space:nowrap;
}

.megamenu__groups{display:grid;gap:28px 30px;grid-column:1;grid-row:2;align-content:start}
.megamenu__groups[data-cols="1"]{grid-template-columns:minmax(0,1fr)}
.megamenu__groups[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.megamenu__groups[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.megamenu__group{
  display:flex;
  flex-direction:column;
  gap:9px;
  min-width:0;
}
.megamenu__group h4{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-400);
  padding-bottom:6px;
  margin-bottom:3px;
  border-bottom:1px solid var(--line);
}
.megamenu__group a{
  font-size:13px;
  line-height:1.3;
  color:var(--ink-600);
  transition:color .14s ease;
}
.megamenu__group a:hover{color:var(--red-600)}

/* карточка-акцент справа: фото категории + счётчик + переход.
   Высоту не тянем — при вертикальном рейле панель высокая, и растянутая
   карточка превращает кадр в вертикальную полоску. Стоит по нижнему краю. */
.mm-card{
  grid-column:2;
  grid-row:2;
  align-self:start;
  display:flex;
  flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.mm-card:hover{
  border-color:var(--red-600);
  box-shadow:0 10px 26px rgba(227,30,36,.13);
}
.mm-card__media{
  position:relative;
  flex:0 0 auto;
  aspect-ratio:16/9;
  display:block;
  overflow:hidden;
  background:#fff;
}
.mm-card__media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.mm-card:hover .mm-card__media img{transform:scale(1.05)}
.mm-card__body{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px 15px 14px;
  background:var(--red-050);
  border-top:1px solid rgba(227,30,36,.16);
}
.mm-card__count{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--red-700);
}
.mm-card__cta{
  display:block;
  font-size:13px;
  font-weight:700;
  color:var(--ink-900);
}
.mm-card__cta span{display:inline-block;margin-left:4px;transition:transform .16s ease}
.mm-card__cta:hover span{transform:translateX(3px)}

/* нижняя полоса */
.megamenu__foot{
  border-top:1px solid var(--line);
  background:var(--surface);
}
.megamenu__foot-in{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:24px;
  padding:12px 26px;
}
.megamenu__all-foot{
  font-size:13px;
  font-weight:600;
  color:var(--red-600);
}
.megamenu__all-foot:hover{color:var(--red-700)}
.megamenu__link{
  font-size:13px;
  color:var(--ink-600);
}
.megamenu__link:hover{color:var(--red-600)}

/* зазор 24 вернули: из меню ушла «Техника в наличии», место освободилось */
.nav{display:flex;align-items:center;gap:24px;flex:1}
.nav__link{
  font-size:14px;
  font-weight:500;
  color:var(--ink-600);
  transition:color .18s;
  white-space:nowrap;
}
.nav__link:hover{color:var(--red-600)}

.header__actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.header__phone{
  font-weight:700;
  font-size:16px;
  color:var(--ink-900);
  white-space:nowrap;
}
.header__phone:hover{color:var(--red-600)}

.burger{
  display:none;
  width:42px;height:42px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:transparent;
  padding:11px 10px;
}
.burger span{
  display:block;height:2px;background:var(--ink-900);border-radius:2px;
}
.burger span+span{margin-top:5px}

/* ============================================================
   HERO — заголовок переплетён с машиной
   ============================================================ */
.hero{padding:44px 0 0;background:var(--white)}

.hero__stage{
  position:relative;
  min-height:640px;
  container-type:inline-size;
}

.hero__since{
  position:absolute;
  right:0;
  top:0;
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--ink-400);
  z-index:4;
}

.hero__title{margin:0}

.hero__word{
  position:absolute;
  font-family:var(--font-display);
  font-weight:800;
  /* обводка тем же цветом — добирает вес до «плакатного». В em, чтобы
     на мобильном, где кегль мельче, она не превращала буквы в кляксу */
  -webkit-text-stroke:.031em currentColor;
  text-transform:uppercase;
  font-size:7.6vw;              /* запасной вариант */
  line-height:.88;
  letter-spacing:-.035em;
  color:var(--ink-900);
  white-space:nowrap;
  z-index:1;
}

/* пропорционально ширине контейнера: заголовок масштабируется вместе с машиной */
@supports (font-size:1cqw){
  .hero__word{font-size:8.2cqw}
}

.hero__word--a{right:0;top:.3em}
.hero__word--b{right:0;top:1.2em;color:var(--red-600)}
.hero__word--c{right:0;top:2.1em}

.hero__machine-wrap{
  position:absolute;
  left:54%;
  bottom:-2%;
  transform:translateX(calc(-50% - 55px));
  width:66%;
  max-width:none;
  z-index:3;
  pointer-events:none;
}

/* контактная тень встроена в само изображение — свои эффекты не нужны */
.hero__machine{
  position:relative;
  width:100%;
  max-width:none;
  height:auto;
  display:block;
  z-index:1;
}

.hero__intro{
  position:absolute;
  left:0;
  top:38%;
  width:19.5%;
  min-width:190px;
  max-width:260px;
  z-index:2;
}
.hero__lead{
  font-size:15.3px;      /* было 14px: +1 pt */
  font-weight:600;
  line-height:1.42;
  color:var(--ink-900);
  padding-left:14px;
  border-left:2px solid var(--red-600);
  margin-bottom:20px;
}

.hero__bubble{
  position:absolute;
  left:2%;
  bottom:15%;
  max-width:230px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:14px 18px;
  box-shadow:var(--shadow-md);
  z-index:4;
}
.hero__bubble b{
  display:block;
  font-family:var(--font-heading);
  font-size:24px;
  text-transform:uppercase;
  line-height:1;
  color:var(--ink-900);
}
.hero__bubble span{
  display:block;
  font-size:12px;
  line-height:1.4;
  color:var(--ink-400);
  margin-top:6px;
}

.hero__note{
  position:absolute;
  bottom:0;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--ink-400);
  z-index:4;
}
.hero__note b{color:var(--ink-900);font-weight:600;display:block}
.hero__note--left{left:0;bottom:2%}
.hero__note--right{right:0;bottom:14%}

/* ---------- счётчик-слайдер (бывшая плашка «24 часа») ---------- */
/* Цифры не пересчитываются по одной, а «прокручиваются»: в окне высотой 1em
   лежит столбик 00…N, дорожка уезжает вверх на N em с сильным ease-out —
   набегает быстро, у цели замедляется. */
.hero-stat{
  position:absolute;
  left:0;
  bottom:0;
  /* 300 px: подпись «ЛЕТ НА РЫНКЕ СПЕЦТЕХНИКИ» при 19 px занимает 291 px
     и должна оставаться в одну строку — иначе блок скачет по высоте */
  width:min(300px,26%);
  z-index:4;
}
.hero-stat__inner{
  transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .45s ease;
}
.hero-stat.is-out .hero-stat__inner{transform:translateX(-28px);opacity:0}

.hero-stat__num{
  position:relative;
  display:inline-block;
  font-family:var(--font-stat);
  font-weight:900;
  font-size:190px;
  line-height:1;
  /* цифры стоят вплотную, без просвета. Отрицательный трекинг снимает
     естественные боковые просветы у всех пар («23», «20»), а «1» в Roboto
     сидит в своей ширине очень узко — ей добавлен отдельный минус в правиле
     .hero-stat__track i ниже */
  letter-spacing:-.05em;
  color:var(--red-600);
  font-variant-numeric:tabular-nums;
}
.hero-stat__window{
  display:block;
  /* окно ровно по капители: в em-боксе сверху висит пустота (у Roboto
     0.12em до верха цифр), из-за неё блок занимал больше места, чем видно
     глазом, и цифры не доходили до кнопки */
  height:.74em;
  overflow:hidden;
}
.hero-stat__track{
  display:block;
  will-change:transform;
  transition:transform 1.5s cubic-bezier(.16,.9,.24,1);
}
/* каждая цифра занимает ровно свою капитель (.74em) — в ленте они стоят
   вплотную, и в окне во время прокрутки нет белой полосы между числами */
.hero-stat__track span{
  display:block;
  height:.74em;
  line-height:.74em;
}
/* «1» в Roboto 900 занимает полную ширину цифры, хотя её штрих вдвое уже:
   без этого минуса между «1» и следующей цифрой остаётся дыра в 0.2em */
.hero-stat__track i{
  font-style:normal;
  margin-right:-.155em;
}
/* знак процента — надстрочный, справа от числа */
.hero-stat__pct{
  position:absolute;
  left:100%;
  top:.06em;
  /* цифры выросли и упираются в кран: процент жмётся к числу вплотную */
  margin-left:2px;
  font-size:.21em;
  font-weight:900;
  letter-spacing:0;
  line-height:1;
  opacity:0;
  transition:opacity .3s ease;
}
.hero-stat.has-pct .hero-stat__pct{opacity:1}

.hero-stat__label{
  margin:6px 0 0;
  /* подпись остаётся в Inter: у Roboto в проекте нет кириллицы */
  font-family:var(--font-text);
  font-weight:800;
  font-size:19px;
  line-height:1.06;
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:var(--red-600);
}
.hero-stat__text{
  margin:9px 0 0;
  font-size:12.5px;
  line-height:1.45;
  /* два ряда по высоте всегда: пояснения разной длины (1 и 2 строки), без
     этого блок скачет на 18 px и цифры на разных слайдах стоят на разной
     высоте — а они должны упираться в кнопку одинаково */
  min-height:2.9em;
  color:var(--ink-400);
}
/* подпись и пояснение появляются только после того, как число доехало */
.hero-stat__label,
.hero-stat__text{
  opacity:0;
  transform:translateY(8px);
  transition:opacity .45s ease,transform .45s ease;
}
.hero-stat.is-done .hero-stat__label{opacity:1;transform:none;transition-delay:.05s}
.hero-stat.is-done .hero-stat__text{opacity:1;transform:none;transition-delay:.16s}

/* ============================================================
   ВИДЖЕТ ТТХ АВТОКРАНА (300×300, правый нижний угол hero)
   ============================================================ */
.spec-widget{
  position:absolute;
  right:0;
  bottom:0;
  width:300px;
  height:300px;
  padding-left:20px;
  z-index:5;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .5s ease,transform .5s ease;
  pointer-events:none;
}
.spec-widget.is-shown{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

.spec-widget__head{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.spec-widget__tag{
  font-size:9px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--red-600);
  background:var(--red-050);
  border-radius:3px;
  padding:2px 5px;
}
.spec-widget__model{
  font-size:11px;
  font-weight:600;
  color:var(--ink-400);
  letter-spacing:.02em;
}

.spec-widget__stage{
  position:relative;
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
}

/* SVG-профиль */
.spec-boom{
  width:100%;
  height:auto;
  display:block;
  flex:0 0 auto;
}

/* компактный график */
.spec-chart{
  width:100%;
  height:auto;
  display:block;
  margin-top:2px;
  flex:0 0 auto;
}
.spec-chart-label{
  font-family:var(--font-text);
  font-size:7px;
  font-weight:600;
  fill:var(--ink-400);
}

/* кривая вычерчивается по мере выдвижения */
.spec-curve{
  stroke-dasharray:1;
  stroke-dashoffset:1;
  transition:stroke-dashoffset 2s cubic-bezier(.32,.72,.24,1);
}
.spec-widget.is-shown .spec-curve{stroke-dashoffset:0}

/* точки появляются вслед за кривой */
.spec-point{
  opacity:0;
  transition:opacity .3s ease;
}
.spec-point--a{transition-delay:.2s}
.spec-point--b{transition-delay:1s}
.spec-point--c{transition-delay:1.8s}
.spec-widget.is-shown .spec-point{opacity:1}

.spec-arc-label{
  font-family:var(--font-text);
  font-size:8px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  fill:var(--ink-300);
}

/* группа стрелы: база в (34,131), поворот ровно 45° вокруг неё */
.spec-boom-group{
  transform:translate(34px, 131px) rotate(-45deg);
  transform-origin:0 0;
}

/* секции выезжают друг из друга по оси стрелы — форма трапеций не искажается */
.spec-sec{
  transition:transform 2s cubic-bezier(.32,.72,.24,1);
}
.spec-sec--1{transform:translateX(0);transition-delay:0s}
.spec-sec--2{transform:translateX(-83px);transition-delay:0s}
.spec-sec--3{transform:translateX(-138px);transition-delay:.08s}
.spec-sec--4{transform:translateX(-173px);transition-delay:.16s}

.spec-widget.is-shown .spec-sec--1{transform:translateX(0)}
.spec-widget.is-shown .spec-sec--2{transform:translateX(0)}
.spec-widget.is-shown .spec-sec--3{transform:translateX(0)}
.spec-widget.is-shown .spec-sec--4{transform:translateX(0)}

/* оголовок едет вместе с концевой секцией */
.spec-tip{
  transform:translateX(-173px);
  transition:transform 2s cubic-bezier(.32,.72,.24,1) .16s;
}
.spec-widget.is-shown .spec-tip{transform:translateX(0)}

/* метки стыков проявляются, когда секции уже выдвинуты */
.spec-joint{
  opacity:0;
  transition:opacity .35s ease 1.55s;
}
.spec-widget.is-shown .spec-joint{opacity:1}

.spec-base{opacity:.9}

/* метрики */
.spec-widget__metrics{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  padding-top:10px;
  border-top:1px solid var(--line);
}
.spec-metric{min-width:0}
.spec-metric__val{
  display:block;
  font-size:17px;
  font-weight:700;
  line-height:1.1;
  color:var(--ink-900);
  white-space:nowrap;
}
.spec-metric__val small{
  font-size:12px;
  font-weight:700;
  color:var(--red-600);
  margin-left:1px;
}
.spec-metric span{
  display:block;
  font-size:10px;
  line-height:1.25;
  color:var(--ink-400);
  margin-top:2px;
}

.spec-widget__link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:10px;
  font-size:11px;
  font-weight:500;
  color:var(--ink-600);
  transition:color .18s ease;
}
.spec-widget__link:hover{color:var(--red-600)}
.spec-dot{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--green);
  flex:0 0 auto;
}
.spec-arrow{
  color:var(--red-600);
  font-weight:700;
  transition:transform .18s ease;
}
.spec-widget__link:hover .spec-arrow{transform:translateX(3px)}
.hero__chevrons{width:56px;height:auto;color:var(--red-600);flex:0 0 auto}
.hero__leader{
  width:64px;
  height:1px;
  background:var(--line);
  flex:0 0 auto;
  margin-top:9px;
}

.hero__transition{
  text-align:center;
  padding:56px 0 8px;
  border-top:1px solid var(--line);
  margin-top:44px;
}
.hero__transition-title{
  font-family:var(--font-heading);
  font-weight:600;
  text-transform:uppercase;
  font-size:clamp(22px,2.6vw,34px);
  line-height:1.05;
  letter-spacing:-.01em;
  color:var(--ink-900);
}
.hero__transition-text{
  margin:12px auto 0;
  max-width:560px;
  font-size:14px;
  color:var(--ink-400);
}

/* ============================================================
   STATS
   ============================================================ */
.stats{background:var(--ink-900);color:#fff}
.stats__in{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  padding:30px 0;
}
.stats__item b{
  display:block;
  font-family:var(--font-heading);
  font-size:34px;
  line-height:1;
  color:var(--red-600);
}
.stats__item span{
  display:block;
  font-size:13px;
  color:rgba(255,255,255,.62);
  margin-top:6px;
}

/* ============================================================
   СЕКЦИИ
   ============================================================ */
.section{padding:var(--section-y) 0}
.section--tint{background:var(--surface)}

.section__head{max-width:760px;margin-bottom:48px}
.section__head--center{margin-left:auto;margin-right:auto;text-align:center}
.section__sub{
  margin-top:16px;
  font-size:16px;
  color:var(--ink-400);
  max-width:560px;
}
.section__head--center .section__sub{margin-left:auto;margin-right:auto}
.section__foot{display:flex;justify-content:center;margin-top:44px}

/* ============================================================
   КАТАЛОГ — карточки (главная)
   Сетка 4 в ряд: 17 разделов + баннер «весь каталог» на три колонки.
   Карточка по референсу: название сверху, фото, пояснение, кнопка.
   ============================================================ */
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.cards--3{grid-template-columns:repeat(3,1fr)}
.cards--4{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}

.card{
  display:flex;
  flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  overflow:hidden;
  color:inherit;
  text-decoration:none;
  transition:box-shadow .2s ease,border-color .2s ease;
}
.card:hover{
  box-shadow:var(--shadow-md);
  border-color:transparent;
}

/* название над фото: фиксированная высота в две строки, чтобы фото
   во всех карточках ряда стояли на одной линии */
.card__head{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:15px 12px 0;
  text-align:center;
}
.card__title{
  font-family:var(--font-heading);
  font-size:15px;
  line-height:1.18;
  font-weight:600;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--ink-900);
}

.card__media{
  display:block;
  margin-top:12px;
  aspect-ratio:16/9;
  background:var(--surface);
  overflow:hidden;
}
.card__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .35s ease;
}
.card:hover .card__media img{transform:scale(1.04)}

.card__desc{
  flex:1;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:12px 16px 0;
  font-size:13px;
  line-height:1.45;
  color:var(--ink-400);
  text-align:center;
}

.card__cta{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:14px;
  height:40px;
  border-radius:var(--radius-sm);
  background:var(--surface);
  font-size:13px;
  font-weight:500;
  color:var(--ink-600);
  transition:background-color .18s ease,color .18s ease;
}
.card:hover .card__cta{background:var(--red-600);color:#fff}

/* тёмный баннер на три колонки — закрывает пятый ряд сетки */
/* ============================================================
   ЛИД-МАГНИТ В СЕТКЕ КАТАЛОГА
   17 карточек не делятся на 4 — последний ряд занимает форма.
   ============================================================ */
.lead-card{
  position:relative;
  grid-column:span 3;
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:36px;
  align-items:center;
  padding:32px 36px;
  background:var(--ink-900);
  border-radius:var(--radius-md);
  overflow:hidden;
  color:#fff;
}
/* красное свечение в правом верхнем углу — карточка читается как акцент */
.lead-card::before{
  content:"";
  position:absolute;
  top:-160px;
  right:-60px;
  width:420px;
  height:420px;
  background:radial-gradient(circle,rgba(227,30,36,.34) 0%,rgba(227,30,36,0) 66%);
  pointer-events:none;
}
.lead-card__copy{position:relative;z-index:1}
.lead-card__kicker{
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.lead-card__title{
  margin-top:9px;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:32px;
  line-height:1.05;
  letter-spacing:-.015em;
  text-transform:uppercase;
}
.lead-card__text{
  margin-top:12px;
  max-width:48ch;
  font-size:14.5px;
  line-height:1.55;
  color:rgba(255,255,255,.66);
}
.lead-card__phone{
  margin-top:16px;
  font-size:13px;
  color:rgba(255,255,255,.5);
}
.lead-card__phone a{
  color:#fff;
  font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.35);
}
.lead-card__phone a:hover{color:#FF7A7E;border-color:transparent}
.lead-card__form{
  position:relative;
  z-index:1;
  display:grid;
  gap:10px;
}
.lead-card__input{
  width:100%;
  min-width:0;
  height:48px;
  padding:0 16px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.07);
  color:#fff;
  font-family:inherit;
  font-size:15px;
  transition:border-color .18s ease,background-color .18s ease;
}
.lead-card__input::placeholder{color:rgba(255,255,255,.42)}
.lead-card__input:focus{
  outline:none;
  border-color:var(--red-600);
  background:rgba(255,255,255,.11);
}
.lead-card__form .btn{height:48px}
.lead-card__note{
  font-size:11.5px;
  line-height:1.45;
  color:rgba(255,255,255,.45);
}
.lead-card__note a{text-decoration:underline}

/* ============================================================
   «ВОЗНИКЛИ ВОПРОСЫ ПО ТЕХНИКЕ?»
   Донорский consult_form_block: фото офиса во всю ширину, слева
   текст и телефон, справа карточка с формой.
   ============================================================ */
.ask{
  position:relative;
  overflow:hidden;
  background:var(--ink-900);
  color:#fff;
}
.ask__bg{position:absolute;inset:0;z-index:0}
.ask__bg img{width:100%;height:100%;object-fit:cover}
.ask__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    rgba(15,17,20,.96) 0%,
    rgba(15,17,20,.94) 42%,
    rgba(15,17,20,.72) 68%,
    rgba(15,17,20,.52) 100%);
}
.ask__in{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) 420px;
  gap:64px;
  align-items:center;
  padding-top:76px;
  padding-bottom:76px;
}
.ask .kicker{color:#FF7A7E}
.ask__title{
  font-family:var(--font-heading);
  font-weight:var(--weight-display);
  text-transform:uppercase;
  font-size:clamp(30px,4vw,52px);
  line-height:.96;
  letter-spacing:-.015em;
  color:#fff;
}
.ask__text{
  margin-top:18px;
  font-size:16px;
  line-height:1.55;
  color:rgba(255,255,255,.72);
  max-width:520px;
}
.ask__list{
  display:grid;
  gap:12px;
  margin-top:26px;
  max-width:520px;
}
.ask__list li{
  position:relative;
  padding-left:28px;
  font-size:15px;
  line-height:1.45;
  color:rgba(255,255,255,.88);
}
.ask__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:5px;
  width:14px;
  height:8px;
  border-left:2px solid #FF7A7E;
  border-bottom:2px solid #FF7A7E;
  transform:rotate(-45deg);
}
.ask__contacts{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:32px;
}
.ask__phone{
  font-family:var(--font-heading);
  font-weight:var(--weight-display);
  font-size:clamp(24px,2.6vw,32px);
  line-height:1;
  letter-spacing:-.02em;
  color:#fff;
  transition:color .18s ease;
}
.ask__phone:hover{color:#FF7A7E}
.ask__hours{font-size:13px;color:rgba(255,255,255,.55)}

.ask__form{
  display:grid;
  gap:14px;
  padding:32px;
  background:#fff;
  border-radius:var(--radius-lg);
  box-shadow:0 24px 60px rgba(0,0,0,.3);
  color:var(--ink-900);
}
.ask__form-title{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:20px;
  line-height:1.2;
  letter-spacing:-.01em;
  margin-bottom:2px;
}
.ask__form .field__label{color:var(--ink-400)}
.ask__form .field__note{color:var(--ink-400)}
.ask__form .field__note a{color:var(--ink-600)}

/* ============================================================
   «ПОДБЕРЁМ СПЕЦТЕХНИКУ» — текст, цифры, клиенты
   Донор: seo-text + index_numbers_block + index_clients_block.
   ============================================================ */
/* фон секции равен фону ролика: пиксели по краям кадра — ровно rgb(253,253,253),
   поэтому «студийный» задник машины растворяется в секции без шва */
#fit{background:#FDFDFD}

.fit__head{max-width:800px}
/* размер — как у остальных заголовков секций (.section__title),
   отличается только цветом */
.fit__title{
  font-family:var(--font-heading);
  font-weight:var(--weight-display);
  text-transform:uppercase;
  font-size:clamp(30px,4vw,56px);
  line-height:.95;
  letter-spacing:-.015em;
  color:var(--red-600);
}
.fit__sub{
  margin-top:18px;
  font-size:18px;
  font-weight:500;
  line-height:1.45;
  color:var(--ink-900);
  max-width:620px;
}

.fit__media{
  position:relative;
  margin:0;
}
/* на главной вместо фото теперь ролик, но старый вариант с картинкой
   остался на служебной странице site/product/index.html — не ломаем её */
.fit__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.fit__media figcaption{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:40px 22px 16px;
  font-size:12px;
  font-weight:500;
  letter-spacing:.02em;
  color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.72));
}

/* ============================================================
   «ПОДБОР И ПОСТАВКА» — пять шагов поверх автокрана
   Ролик лежит фоном: 75% ширины секции, прижат вправо и липнет
   под шапкой. Слева поверх него едут карточки этапов —
   полупрозрачные, с размытием: машина видна сквозь них.
   Время ролика ведёт js/fit-flow.js (прогресс + инерция).
   ============================================================ */
.fit-flow{position:relative;margin-top:clamp(20px,2.6vw,44px)}

/* фон-слой на всю высоту потока: absolute + sticky внутри.
   Если липким сделать сам .fit-flow__bg, он занял бы первый экран
   и отодвинул карточки вниз */
.fit-flow__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.fit-flow__bg-in{
  position:sticky;
  top:74px;
  height:calc(100vh - 74px);
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.fit-flow__video{
  display:block;
  width:75%;
  /* ролик 1920×1080: до 1600 px показываем пиксель в пиксель,
     выше — уже апскейл, поэтому потолок */
  max-width:1600px;
  height:auto;
  aspect-ratio:16/9;
  object-fit:contain;
  background:transparent;
  pointer-events:none;
}

/* карточки поверх ролика */
.fit-flow__in{position:relative;z-index:1}
.fit-flow__steps{
  display:flex;
  flex-direction:column;
  gap:clamp(18px,2.4vw,36px);
  padding:clamp(28px,5vw,72px) 0;
}
.fit-step{display:block}
/* «средняя» прозрачность + размытие: под карточкой угадывается машина,
   но текст остаётся читаемым даже поверх красного борта */
.fit-step__body{
  max-width:460px;
  padding:clamp(20px,2vw,28px) clamp(20px,2.2vw,30px);
  border-radius:20px;
  background:rgba(255,255,255,.55);
  /* на белом фоне ролика полупрозрачная заливка не видна — силуэт карточки
     держат тонкий контур и тень, иначе обрезка крана читается как баг */
  border:1px solid rgba(23,25,28,.07);
  box-shadow:0 30px 80px rgba(23,25,28,.13), 0 2px 10px rgba(23,25,28,.05);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
}
.fit-step__top{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.fit-step__num{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:13px;
  letter-spacing:.04em;
  color:var(--red-600);
}
.fit-step__name{
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-400);
}
.fit-step__title{
  font-family:var(--font-heading);
  font-weight:var(--weight-display);
  text-transform:uppercase;
  font-size:clamp(20px,2.05vw,27px);
  line-height:1.04;
  letter-spacing:-.01em;
  color:var(--ink-900);
}
.fit-step__text{
  margin-top:14px;
  font-size:15px;
  line-height:1.62;
  color:var(--ink-600);
}
.fit-step__list{
  margin:16px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
}
.fit-step__list li{
  position:relative;
  padding-left:18px;
  font-size:14px;
  line-height:1.45;
  color:var(--ink-600);
}
.fit-step__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--red-600);
}
.fit-step__tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:16px;
}
.fit-step__tags span{
  padding:5px 11px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  font-size:12.5px;
  line-height:1.2;
  color:var(--ink-600);
}
.fit-step__cta{margin-top:22px}

@media (max-width:980px){
  /* одна колонка: ролик прилипает под шапкой, карточки едут под ним.
     Здесь фон-слой снова в потоке — absolute+sticky на телефоне
     не нужен, экран и так занят роликом */
  .fit-flow__bg{
    position:sticky;
    inset:auto;
    top:74px;
    z-index:2;
    padding-bottom:10px;
    background:#FDFDFD;
  }
  .fit-flow__bg-in{
    position:static;
    height:auto;
    display:block;
  }
  .fit-flow__video{width:100%;max-height:36vh;margin:0 auto}
  /* мягкая шторка: карточки уходят под ролик, а не режутся по кромке */
  .fit-flow__bg::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-52px;
    height:52px;
    background:linear-gradient(180deg,#FDFDFD 0%,rgba(253,253,253,.92) 32%,rgba(253,253,253,0) 100%);
    pointer-events:none;
  }
  .fit-flow__in{position:relative;z-index:1}
  .fit-flow__steps{padding:clamp(20px,4vw,32px) 0}
  .fit-step__body{
    max-width:none;
    /* на телефоне ролик сверху, а не под карточками: размытие не нужно */
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    background:rgba(255,255,255,.92);
    box-shadow:0 12px 34px rgba(23,25,28,.07);
  }
  .fit-step__title{font-size:clamp(20px,5vw,26px)}
}

.fit__clients{
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:40px;
  align-items:center;
  margin-top:44px;
  padding-top:32px;
  border-top:1px solid var(--line);
}
.fit__clients-title{
  font-family:var(--font-heading);
  font-weight:var(--weight-display);
  text-transform:uppercase;
  font-size:22px;
  line-height:1.1;
  letter-spacing:-.01em;
}
.fit__clients-text{
  margin-top:8px;
  font-size:14px;
  line-height:1.5;
  color:var(--ink-400);
}
.fit__logos{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.fit__logos li{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1 1 0;
  min-width:0;
}
.fit__logos img{
  height:46px;
  width:auto;
  max-width:100%;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.68;
  transition:filter .2s ease,opacity .2s ease;
}
.fit__logos li:hover img{filter:grayscale(0);opacity:1}

@media (max-width:1100px){
  .ask__in{grid-template-columns:minmax(0,1fr) 380px;gap:40px;padding-top:56px;padding-bottom:56px}
}

@media (max-width:980px){
  .fit__top{grid-template-columns:1fr;gap:32px}
  .fit__media .fit__video{max-height:420px}
  .fit__clients{grid-template-columns:1fr;gap:24px;align-items:start}
}

@media (max-width:820px){
  .ask__in{grid-template-columns:1fr;gap:32px;padding-top:48px;padding-bottom:48px}
  .ask__bg::after{
    background:linear-gradient(180deg,rgba(15,17,20,.94) 0%,rgba(15,17,20,.88) 100%);
  }
  .ask__form{padding:24px}
  .fit__logos{gap:16px;flex-wrap:wrap}
  .fit__logos li{flex:0 0 calc(33.333% - 11px)}
  .fit__logos img{height:40px}
}

/* на планшете форма ещё не в столбик, но уже широкая — поля встают в ряд */
@media (max-width:820px) and (min-width:641px){
  .ask__form{grid-template-columns:1fr 1fr}
  .ask__form-title,
  .ask__form .btn,
  .ask__form .field__note{grid-column:1/-1}
}

@media (max-width:640px){
  .fit__sub{font-size:17px}
  .fit__logos img{height:36px}
}

/* ============================================================
   УСЛУГИ
   ============================================================ */
.service{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.service__media{aspect-ratio:16/10;overflow:hidden;background:var(--surface)}
.service__media img{width:100%;height:100%;object-fit:cover}
.service__title{
  font-family:var(--font-heading);
  font-weight:600;
  text-transform:uppercase;
  font-size:20px;
  line-height:1.15;
  padding:20px 22px 0;
  color:var(--ink-900);
}
.service__text{
  font-size:14px;
  color:var(--ink-400);
  line-height:1.55;
  padding:10px 22px 24px;
}

/* ============================================================
   О КОМПАНИИ — зигзаг с фотографиями
   ============================================================ */
.why{display:grid;gap:24px}
.why__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  align-items:stretch;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.why__row--rev .why__media{order:2}

.why__media{position:relative;min-height:280px;background:var(--surface)}
.why__media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.why__num{
  position:absolute;
  left:20px;top:20px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:46px;height:46px;
  background:var(--red-600);
  color:#fff;
  border-radius:var(--radius-sm);
  font-family:var(--font-heading);
  font-size:19px;
  font-weight:600;
}
.why__body{
  padding:44px 48px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.why__title{
  font-family:var(--font-heading);
  font-weight:600;
  text-transform:uppercase;
  font-size:clamp(22px,2.4vw,30px);
  line-height:1.05;
  color:var(--ink-900);
}
.why__body p{
  margin-top:14px;
  font-size:15px;
  line-height:1.6;
  color:var(--ink-600);
}

/* ============================================================
   ОТЗЫВЫ
   ============================================================ */
.reviews{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.review{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:26px 26px 30px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.review__head{display:flex;align-items:center;gap:12px}
.review__avatar{
  width:42px;height:42px;
  border-radius:50%;
  background:var(--red-100);
  flex:0 0 auto;
  position:relative;
}
.review__avatar::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(227,30,36,.25);
}
.review__name{
  display:block;
  font-size:15px;
  font-weight:600;
  color:var(--ink-900);
}
.review__geo{
  display:block;
  font-size:12px;
  color:var(--ink-400);
  margin-top:2px;
}
.review__text{
  font-size:14px;
  line-height:1.6;
  color:var(--ink-600);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:56px;
  align-items:start;
}
.faq__chevrons{
  width:120px;
  height:auto;
  color:var(--red-600);
  margin-bottom:24px;
}
.faq__list{display:grid;gap:12px}

.acc{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.acc[open]{border-color:var(--ink-300)}
.acc__q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 24px;
  font-size:16px;
  font-weight:600;
  color:var(--ink-900);
  cursor:pointer;
  list-style:none;
}
.acc__q::-webkit-details-marker{display:none}
.acc__mark{
  position:relative;
  width:14px;height:14px;
  flex:0 0 auto;
}
.acc__mark::before,
.acc__mark::after{
  content:"";
  position:absolute;
  background:var(--red-600);
  border-radius:2px;
  transition:transform .2s ease,opacity .2s ease;
}
.acc__mark::before{left:0;top:6px;width:14px;height:2px}
.acc__mark::after{left:6px;top:0;width:2px;height:14px}
.acc[open] .acc__mark::after{transform:scaleY(0);opacity:0}

.acc__a{
  padding:0 24px 22px;
  font-size:15px;
  line-height:1.6;
  color:var(--ink-600);
}

/* ============================================================
   CTA
   ============================================================ */
.cta{padding:0 0 var(--section-y)}
.cta__box{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  color:var(--ink-900);
}
.cta__copy{padding:52px 56px}
.cta__title{
  font-family:var(--font-heading);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(26px,3.4vw,44px);
  line-height:.98;
  letter-spacing:-.01em;
}
.cta__list{
  display:grid;
  gap:10px;
  margin:22px 0 28px;
}
.cta__list li{
  position:relative;
  padding-left:26px;
  font-size:15px;
  color:var(--ink-600);
}
.cta__list li::before{
  content:"";
  position:absolute;
  left:0;top:8px;
  width:12px;height:7px;
  border-left:2px solid var(--red-600);
  border-bottom:2px solid var(--red-600);
  transform:rotate(-45deg);
}
.cta__form{display:grid;gap:14px;max-width:400px}
.cta__form .field__label{color:var(--ink-400)}
.cta__form .field__note{color:var(--ink-400)}
.cta__form .field__note a{color:var(--ink-600)}
.cta__media{position:relative;min-height:420px;background:var(--red-800)}
.cta__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ============================================================
   FOOTER
   Бренд-блок + четыре колонки ссылок (по донору), под «Популярным» —
   логотип делового объединения кластеров, в нижней полосе — соцсети.
   ============================================================ */
.footer{
  background:var(--surface);
  border-top:1px solid var(--line);
  padding:56px 0 0;
}
.footer__in{
  display:grid;
  grid-template-columns:1.5fr .8fr .85fr 1fr 1.15fr;
  gap:36px;
  padding-bottom:40px;
}

/* --- бренд --- */
.logo--footer{margin-bottom:18px}
.footer__about{
  font-size:13.5px;
  line-height:1.62;
  color:var(--ink-400);
  max-width:290px;
}
.footer__contact{
  display:grid;
  gap:6px;
  justify-items:start;
  margin-top:18px;
}
.footer__phone{
  font-family:var(--font-heading);
  font-size:21px;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.2;
  color:var(--ink-900);
}
.footer__phone:hover{color:var(--red-600)}
.footer__phone--sm{
  font-size:13.5px;
  font-weight:600;
  letter-spacing:0;
  color:var(--ink-600);
}
.footer__mail{
  font-size:14px;
  font-weight:600;
  color:var(--ink-900);
  border-bottom:1px solid var(--line);
  padding-bottom:1px;
}
.footer__mail:hover{color:var(--red-600);border-color:transparent}
.footer__hours{
  margin-top:2px;
  font-size:12.5px;
  line-height:1.55;
  color:var(--ink-400);
}
.footer__btn{margin-top:14px}
.footer__req{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:11.5px;
  line-height:1.6;
  color:var(--ink-300);
  max-width:290px;
}

/* --- колонки ссылок --- */
.footer__title{
  font-family:var(--font-heading);
  font-weight:600;
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:.06em;
  color:var(--ink-900);
  margin-bottom:16px;
}
.footer__list{display:grid;gap:9px;font-size:13.5px;line-height:1.4;color:var(--ink-600)}
.footer__list a{transition:color .15s ease}
.footer__list a:hover{color:var(--red-600)}
.footer__more{color:var(--red-600);font-weight:600}
.footer__more:hover{color:var(--red-700)}

/* --- партнёрский логотип --- */
.footer__cluster{
  display:block;
  width:100%;
  max-width:214px;
  margin-top:22px;
  opacity:.9;
  transition:opacity .15s ease;
}
.footer__cluster:hover{opacity:1}
.footer__cluster img{width:100%;height:auto}

/* --- нижняя полоса --- */
.footer__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding-top:22px;
  padding-bottom:26px;
  border-top:1px solid var(--line);
  font-size:12.5px;
  color:var(--ink-400);
}
.footer__legal{display:grid;gap:5px}
.footer__copy{font-weight:600;color:var(--ink-600)}
.footer__oferta{font-size:11.5px;line-height:1.5;color:var(--ink-300);max-width:640px}
.footer__docs{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px}
.footer__docs a{border-bottom:1px solid transparent}
.footer__docs a:hover{color:var(--red-600);border-color:currentColor}
.footer__social{display:flex;gap:8px;flex:0 0 auto}
.footer__soc{
  display:block;
  width:36px;
  height:36px;
  border-radius:8px;
  overflow:hidden;
  opacity:.85;
  transition:opacity .15s ease,transform .15s ease;
}
.footer__soc:hover{opacity:1;transform:translateY(-2px)}
.footer__soc img{width:100%;height:100%}

/* --- кнопка «наверх» --- */
.to-top{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:70;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--white);
  color:var(--ink-900);
  box-shadow:0 6px 20px rgba(23,25,28,.12);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s,background .15s ease,color .15s ease,border-color .15s ease;
}
.to-top.is-on{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--red-600);border-color:var(--red-600);color:#fff}

/* ============================================================
   MODAL
   ============================================================ */
.modal[hidden]{display:none}
.modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(23,25,28,.55);
}
.modal__panel{
  position:relative;
  z-index:1;
  width:100%;
  max-width:420px;
  /* окно выросло (появились мессенджеры) — на низких экранах прокручиваем */
  max-height:calc(100vh - 40px);
  overflow-y:auto;
  background:var(--white);
  border-radius:var(--radius-lg);
  padding:36px 32px 32px;
  box-shadow:0 30px 80px rgba(23,25,28,.28);
}
.modal__close{
  position:absolute;
  top:14px;right:16px;
  width:34px;height:34px;
  border:0;background:transparent;
  font-size:26px;line-height:1;
  color:var(--ink-400);
  border-radius:var(--radius-sm);
}
.modal__close:hover{background:var(--surface);color:var(--ink-900)}
.modal__title{
  font-family:var(--font-heading);
  font-weight:700;
  text-transform:uppercase;
  font-size:28px;
  line-height:1;
  color:var(--ink-900);
}
.modal__text{
  font-size:14px;
  color:var(--ink-400);
  margin:10px 0 22px;
}
.modal form{display:grid;gap:14px}

/* ---------- мессенджеры в модальном окне ----------
   кроме телефона можно сразу написать в соцсети */
.modal__soc{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.modal__soc-label{
  display:block;
  margin-bottom:10px;
  font-size:12.5px;
  color:var(--ink-400);
  text-align:center;
}
.modal__soc-list{display:flex;gap:8px}
.modal__soc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:1 1 0;
  gap:7px;
  height:42px;
  padding:0 8px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--white);
  color:var(--ink-600);
  font-size:12.5px;
  font-weight:600;
  transition:border-color .16s ease,background-color .16s ease,color .16s ease;
}
.modal__soc-btn:hover{
  border-color:var(--red-600);
  background:var(--red-050);
  color:var(--red-600);
}
.modal__soc-ico{
  flex:0 0 auto;
  width:18px;
  height:18px;
  background:currentColor;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
}
.modal__soc-ico--tg{
  -webkit-mask-image:url("../assets/img/social/telegram-mono.svg");
  mask-image:url("../assets/img/social/telegram-mono.svg");
}
.modal__soc-ico--max{
  -webkit-mask-image:url("../assets/img/social/max-mono.svg");
  mask-image:url("../assets/img/social/max-mono.svg");
}

/* ---------- выбор города ---------- */
.modal__panel--city{max-width:660px}
.city-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
}
.city-item{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--white);
  color:var(--ink-900);
  transition:border-color .16s ease,background-color .16s ease;
}
.city-item:hover{border-color:var(--red-600);background:var(--red-050)}
.city-item__name{
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  transition:color .16s ease;
}
.city-item:hover .city-item__name{color:var(--red-600)}
.city-item__meta{
  font-size:11.5px;
  line-height:1.35;
  color:var(--ink-400);
}
.city-item.is-main{border-color:rgba(227,30,36,.35)}
.city-item.is-main .city-item__meta{color:var(--red-600);font-weight:600}

@media (max-width:560px){
  .city-list{gap:5px}
  .city-item{padding:8px 10px}
  .city-item__name{font-size:12.5px}
  .city-item__meta{font-size:10.5px}
}

/* ============================================================
   ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ
   ============================================================ */
.card,.prod,.service,.review,.why__row,.reasons__card{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s ease,transform .5s ease;
}
.card.is-visible,.prod.is-visible,.service.is-visible,.review.is-visible,
.why__row.is-visible,.reasons__card.is-visible{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion:reduce){
  .card,.prod,.service,.review,.why__row,.reasons__card{
    opacity:1;transform:none;transition:none;
  }
  html{scroll-behavior:auto}
}

/* ============================================================
   ПОЛОСА «В НАЛИЧИИ» — интерактивные вкладки
   ============================================================ */
.stockbar{
  margin-top:36px;
  border-top:1px solid var(--line);
  padding-top:22px;
  position:relative;
  z-index:5;
}
/* ссылка стоит над иконками — правым краем по сетке */
.stockbar__foot{
  display:flex;
  justify-content:flex-end;
  margin-bottom:14px;
}
.stockbar__footlink{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:500;
  color:var(--ink-400);
  transition:color .16s ease;
  white-space:nowrap;
}
.stockbar__footlink:hover{color:var(--red-600)}

/* живой индикатор наличия: зелёная точка с расходящимся кольцом.
   Привлекает взгляд к строке «96 машин в наличии» */
.live-dot{
  position:relative;
  flex:0 0 auto;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#1FBF5B;
}
.live-dot::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:#1FBF5B;
  animation:live-ring 2.2s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes live-ring{
  0%{transform:scale(1);opacity:.7}
  70%,100%{transform:scale(2.9);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .live-dot::after{animation:none;opacity:0}
}

.stockbar__tabs{
  display:grid;
  grid-template-columns:repeat(10,1fr);
  gap:10px;
}

.stocktab{position:relative}

.stocktab__btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  width:100%;
  height:100%;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:14px 8px 12px;
  font-size:11px;
  font-weight:500;
  line-height:1.25;
  text-align:center;
  color:var(--ink-900);
  transition:border-color .16s ease,background-color .16s ease;
}
.stocktab__icon{
  width:100%;
  height:30px;
  object-fit:contain;
  display:block;
}
.stocktab__btn span{display:block}
.stocktab__btn:hover,
.stocktab.is-open .stocktab__btn{
  border-color:var(--red-600);
  background:var(--red-050);
}

/* панель со списком */
.stocktab__panel{
  position:absolute;
  left:0;
  top:calc(100% + 8px);
  width:390px;
  max-width:calc(100vw - 48px);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:0 20px 48px rgba(23,25,28,.14);
  padding:8px;
  display:none;
  z-index:20;
}
/* мостик над панелью: не даёт меню закрыться, пока курсор идёт от иконки вниз */
.stocktab__panel::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-12px;
  height:12px;
}
.stocktab.is-open .stocktab__panel{display:block}

.stocktab__item{
  display:grid;
  grid-template-columns:1fr auto;
  gap:2px 14px;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  transition:background-color .14s ease;
}
.stocktab__item:hover{background:var(--surface)}
.stocktab__item b{
  font-size:13px;
  font-weight:600;
  color:var(--ink-900);
  line-height:1.3;
}
.stocktab__item span{
  grid-column:1;
  font-size:12px;
  color:var(--ink-400);
}
.stocktab__item i{
  grid-column:2;
  grid-row:1/3;
  align-self:center;
  font-style:normal;
  font-size:13px;
  font-weight:600;
  color:var(--red-600);
  white-space:nowrap;
}
.stocktab__more{
  display:block;
  margin-top:6px;
  padding:11px 12px;
  border-top:1px solid var(--line);
  font-size:13px;
  font-weight:600;
  color:var(--red-600);
}
.stocktab__more:hover{color:var(--red-700)}

/* ============================================================
   ПОЧЕМУ ТРАК ПЛЭНЕТ — пять причин на фоне производства
   ============================================================ */
/* Нижнего отступа нет: полоса с фоном упирается прямо в серую секцию
   «Техника в наличии», без белой прокладки между ними. Воздух под полосой
   даёт уже верхний padding самой серой секции. */
.reasons{padding:var(--section-y) 0 0}

/* Фон идёт во всю ширину экрана — сплошной полосой от края до края,
   без обёртки .container и без скруглений. Внутренние отступы повторяют
   сетку сайта: max(gutter, (100% − container)/2 + gutter), поэтому карточки
   стоят ровно по той же вертикали, что и контент соседних секций. */
.reasons__frame{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  /* Высота — ровно как была до перехода на всю ширину: плашка жила по ширине
     контейнера с пропорцией 1920/1071, т.е. (min(экран,1240) − 2·gutter)/1.7927.
     Теперь ширина полная, а высота считается по той же формуле. min-height,
     а не height: на узком десктопе карточки выше формулы — тогда секция
     подрастает на пару десятков пикселей вместо того, чтобы обрезать их. */
  min-height:calc(min(100vw - 2 * var(--gutter), var(--container) - 2 * var(--gutter)) / 1.7927);
  background:#EEF0F1;
}
.reasons__bg{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  /* кадр широкий (1696×624): при нехватке высоты режем правый край с цехом,
     а не тягач — он слева и должен оставаться целиком */
  object-position:left center;
  pointer-events:none;
}
.reasons__in{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,74.5%);
  grid-template-rows:auto 1fr;
  gap:22px;
  align-items:start;
  height:100%;
  padding:30px max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))) 34px;
}
.reasons__head{grid-column:1 / -1;max-width:640px}
.reasons__title{
  font-family:var(--font-heading);
  font-weight:var(--weight-display,800);
  text-transform:uppercase;
  font-size:clamp(28px,3.4vw,44px);
  line-height:.98;
  letter-spacing:-.015em;
  color:var(--ink-900);
}

/* Сетка 3×2: красная карточка занимает первый столбец целиком,
   остальные четыре встают в оставшиеся ячейки по порядку. */
.reasons__grid{
  grid-column:2;
  grid-row:2;
  align-self:end;
  display:grid;
  grid-template-columns:1.12fr 1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:14px;
}
.reasons__card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:20px 18px 20px;
  background:var(--white);
  border-radius:14px;
  box-shadow:0 4px 16px rgba(23,25,28,.07);
  transition:transform .26s cubic-bezier(.2,.8,.2,1),box-shadow .26s ease,background-color .26s ease;
}
.reasons__card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(23,25,28,.16);
}

.reasons__card--accent{
  grid-column:1;
  grid-row:1 / span 2;
  align-self:end;
  background:var(--red-600);
  box-shadow:0 12px 34px rgba(196,18,28,.26);
}
/* мягкий блик в углу — чтобы большая красная плоскость не выглядела плоской */
.reasons__card--accent::after{
  content:'';
  position:absolute;
  right:-50px;
  top:-50px;
  width:190px;
  height:190px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.2),rgba(255,255,255,0) 68%);
  pointer-events:none;
}
.reasons__card--accent:hover{
  background:var(--red-700);
  box-shadow:0 22px 48px rgba(196,18,28,.34);
}

.reasons__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  margin-bottom:14px;
  border-radius:12px;
  background:var(--red-050);
  color:var(--red-600);
  transition:background-color .26s ease,color .26s ease;
}
.reasons__icon svg{width:24px;height:24px;display:block}
.reasons__card:hover .reasons__icon{background:var(--red-600);color:#fff}
.reasons__card--accent .reasons__icon{background:rgba(255,255,255,.16);color:#fff}
.reasons__card--accent:hover .reasons__icon{background:#fff;color:var(--red-600)}

.reasons__name{
  font-family:var(--font-heading);
  font-weight:700;
  text-transform:uppercase;
  font-size:14.5px;
  line-height:1.16;
  letter-spacing:.008em;
  color:var(--ink-900);
  margin-bottom:9px;
}
.reasons__text{
  font-size:13.5px;
  line-height:1.5;
  color:var(--ink-600);
}
.reasons__card--accent .reasons__name{font-size:15px;line-height:1.14;color:#fff;margin-bottom:10px}
.reasons__card--accent .reasons__text{font-size:13.5px;color:rgba(255,255,255,.88);max-width:58ch}

/* красная карточка не тянется на две строки: высота по контенту,
   прижата к низу колонки — как на референсе */
.reasons__lead{display:flex;flex-direction:column}
.reasons__tail{display:flex;flex-direction:column}
.reasons__amount{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:clamp(22px,2vw,30px);
  line-height:1;
  letter-spacing:-.02em;
  white-space:nowrap;
  color:#fff;
  margin:0 0 12px;
}
.reasons__amount-cap{
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
  margin-bottom:5px;
}

/* ссылка прижата к низу высокой красной карточки */
.reasons__link{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.26);
  font-size:13.5px;
  font-weight:700;
  color:#fff;
}
.reasons__link span:last-child{transition:transform .2s ease}
.reasons__link:hover span:last-child{transform:translateX(4px)}

/* ============================================================
   ТЕХНИКА В НАЛИЧИИ
   ============================================================ */
.stock{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}

/* Карточка товара: фото 3:2 с плашкой «в наличии», название, три
   характеристики с точечным заполнителем, внизу цена и кнопка. */
.prod{
  display:flex;
  flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  overflow:hidden;
  transition:box-shadow .2s ease,border-color .2s ease;
}
.prod:hover{box-shadow:var(--shadow-md);border-color:transparent}
/* иначе display:flex перебьёт пользовательское [hidden]{display:none} */
.prod[hidden]{display:none}
.prod__media{
  position:relative;
  display:block;
  aspect-ratio:3/2;
  background:#fff;
  overflow:hidden;
}
.prod__media img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.prod:hover .prod__media img{transform:scale(1.03)}
.prod__badge{
  position:absolute;
  top:11px;
  left:11px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--green);
  background:var(--white);
  border-radius:4px;
  padding:4px 7px 5px;
  box-shadow:0 1px 4px rgba(23,25,28,.1);
}

.prod__body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:14px 15px 15px;
}
.prod__title{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:14px;
  line-height:1.3;
  letter-spacing:-.003em;
  color:var(--ink-900);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  /* три строки всегда — иначе характеристики и цена в сетке пляшут */
  min-height:calc(14px * 1.3 * 3);
}
.prod__title a{color:inherit;text-decoration:none}
.prod__title a:hover{color:var(--red-600)}

.prod__specs{display:grid;gap:5px;margin-top:11px}
.prod__spec{display:flex;align-items:baseline;font-size:12px;line-height:1.3;min-width:0}
.prod__spec-name{
  color:var(--ink-400);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:62%;
}
.prod__spec-dots{
  flex:1;
  border-bottom:1px dotted #D3D6D9;
  margin:0 5px;
  transform:translateY(-3px);
}
.prod__spec-val{color:var(--ink-900);font-weight:600;white-space:nowrap}

.prod__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:auto;
  padding-top:13px;
  border-top:1px solid var(--line);
}
.prod__price{
  font-family:var(--font-heading);
  font-size:16px;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--ink-900);
  white-space:nowrap;
}
.prod__btn{
  flex:0 0 auto;
  font-size:12px;
  font-weight:600;
  color:var(--ink-600);
  border:1px solid var(--line);
  border-radius:8px;
  padding:7px 12px;
  white-space:nowrap;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.prod__btn:hover{background:var(--ink-900);border-color:var(--ink-900);color:#fff}

/* кнопка «показать ещё» и счётчик под сеткой */
.stock__more{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-top:32px;
}
.stock__counter{
  font-size:12.5px;
  color:var(--ink-400);
}

/* ============================================================
   АДАПТИВ
   ============================================================ */
/* На ноутбучных ширинах отдаём рейлу меньше места — иначе четыре кнопки
   категорий в самой длинной группе не влезают в одну строку. */
@media (max-width:1280px){
  .megamenu__panel{grid-template-columns:250px minmax(0,1fr)}
  .megamenu__cat{font-size:14px;gap:11px}
  .megamenu__cat-icon{width:52px;height:26px}
}

@media (max-width:1100px){
  :root{--section-y:72px}

  .nav{display:none}
  .burger{display:block}
  .header__in{gap:16px;justify-content:space-between}
  /* на планшете топбар иначе ломается на две строки — почту убираем, она есть в футере */
  .topbar__link{display:none}

  .catalog-btn{padding:11px 16px;font-size:14px}
  .megamenu{width:calc(100vw - 24px)}
  .megamenu__panel{grid-template-columns:262px minmax(0,1fr)}
  .megamenu__rail{padding:8px}
  .megamenu__cat{font-size:13px;padding:8px 9px;gap:10px}
  .megamenu__cat-icon{width:48px;height:24px}
  .mm-chip{font-size:12.5px;padding:8px 14px 8px 11px;gap:8px}
  .mm-chip__icon{width:36px;height:18px}
  .mm-tab.is-active{grid-template-columns:minmax(0,1fr)}
  /* [data-cols] — иначе базовые правила для 2–3 колонок перебивают медиазапрос */
  .megamenu__groups[data-cols]{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
  .megamenu__content{padding:18px 20px 14px}
  .megamenu__foot-in{gap:16px;padding:10px 20px}
  .mm-card{display:none}

  /* узкая плашка: cover по высокой сетке зумил бы кадр и резал тягач,
     поэтому фон становится полосой сверху, а карточки идут в 2 колонки */
  .reasons__frame{display:block;min-height:0;background:var(--white)}
  .reasons__bg{position:static;height:auto;aspect-ratio:2.4;object-position:left center}
  .reasons__in{
    grid-template-columns:minmax(0,1fr);grid-template-rows:auto;height:auto;gap:22px;
    padding:28px max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))) 30px;
  }
  .reasons__head{grid-column:1;max-width:560px}
  .reasons__grid{grid-column:1;grid-row:auto;align-self:auto}
  .reasons__grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .reasons__card--accent{grid-column:1 / -1;grid-row:auto;align-self:auto}

  .stockbar__tabs{grid-template-columns:repeat(5,1fr);gap:10px}
  .stocktab__panel{width:340px}
  .stocktab__icon{height:38px}


  .hero__stage{min-height:0;padding-bottom:16px}
  .hero__since{position:static;display:block;margin-bottom:18px}
  .hero__title{margin-bottom:8px}
  .hero__word{position:static;display:block;font-size:9.4cqw;white-space:normal;line-height:.92}
  .hero__word--b,.hero__word--c{right:auto;top:auto}
  .hero__machine-wrap{
    position:static;
    transform:none;
    width:100%;
    margin:8px 0 0;
  }
  .hero__intro{position:static;width:auto;max-width:none;min-width:0;margin-top:20px}
  .hero__bubble{position:static;margin-top:16px;max-width:280px}
  .hero__note{position:static;margin-top:14px}
  .hero-stat{position:static;width:auto;max-width:300px;margin-top:26px}
  .hero-stat__num{font-size:128px}
  .hero__note--right{margin-top:10px}
  .hero__leader{display:none}
  .hero__transition{padding-top:36px;margin-top:32px}

  .cards,.cards--3{grid-template-columns:repeat(2,1fr)}
  .cards--4{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .lead-card{grid-column:span 1;grid-template-columns:minmax(0,1fr);gap:18px;padding:24px}
  .lead-card__title{font-size:24px}
  .lead-card__text{max-width:none}
  .stock{grid-template-columns:repeat(3,minmax(0,1fr))}
  .why__row{grid-template-columns:1fr}
  .why__row--rev .why__media{order:0}
  .why__media{min-height:240px}
  .why__body{padding:32px}
  .reviews{grid-template-columns:1fr}
  .faq{grid-template-columns:1fr;gap:32px}
  .cta__box{grid-template-columns:1fr}
  .cta__copy{padding:40px}
  .cta__media{min-height:280px}
  .footer__in{grid-template-columns:1fr 1fr}
  .stats__in{grid-template-columns:repeat(2,1fr);gap:24px}
}

/* 1101–1240: меню ещё видно, но шапка уже не помещается вместе с иконкой
   поиска — уводим его в бургер раньше, иначе появляется горизонтальный скролл */
@media (max-width:1240px){
  .nav{display:none}
  .burger{display:block}
  .header__in{gap:16px;justify-content:space-between}
  .topbar__link{display:none}
}

@media (max-width:1180px){
  .footer__in{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px}
  /* бренд на всю ширину тремя колонками: лого+описание / контакты / реквизиты */
  .footer__brand{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    align-items:start;
    gap:22px 36px;
  }
  .footer__brand .logo--footer{grid-area:1/1;margin-bottom:0}
  .footer__about{grid-area:2/1;max-width:none}
  .footer__contact{grid-area:1/2/span 2/span 1;margin-top:0}
  .footer__req{grid-area:1/3;margin-top:0;padding-top:0;border-top:0;max-width:none}
}

@media (max-width:820px){
  /* на телефоне счётчик-слайдер с цифрами съедает пол-экрана и отодвигает
     кнопку «Смотреть технику» — в мобильной версии он не нужен */
  .hero-stat{display:none}
  .footer{padding-top:44px}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:16px}
  .footer__brand{grid-template-columns:1fr 1fr;gap:18px 24px}
  .footer__brand .logo--footer{grid-area:1/1/span 1/span 2}
  .footer__about{grid-area:2/1}
  .footer__contact{grid-area:2/2/span 2/span 1;margin-top:0}
  .footer__req{grid-area:3/1}
  .reasons__bg{aspect-ratio:2}
  .reasons__in{
    gap:18px;
    padding:24px max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))) 26px;
  }
  .cards--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .stock{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  /* на узком экране вертикальный рейл съедает половину ширины панели —
     возвращаем полосу групп сверху. Пять пунктов ложатся в сетку 2×3 */
  .megamenu__panel{display:block}
  /* рейл ушёл наверх — фиксированная высота контента больше не нужна,
     панель снова растёт по содержимому */
  .megamenu__content{height:auto;overflow:visible;scrollbar-gutter:auto}
  .megamenu__rail{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:auto;
    gap:3px;
    padding:7px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .megamenu__cat{
    flex:none;
    align-items:center;
    gap:9px;
    padding:8px 9px;
    font-size:12px;
  }
  .megamenu__cat span{
    white-space:normal;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow-wrap:break-word;
  }
  .megamenu__cat-icon{width:34px;height:17px}
}

@media (max-width:640px){
  :root{--gutter:16px;--section-y:56px}

  /* футер: две узкие колонки ссылок, бренд на всю ширину */
  .footer__in{gap:26px 18px;padding-bottom:30px}
  .footer__brand{grid-template-columns:1fr;gap:0}
  .footer__brand .logo--footer{grid-area:auto;margin-bottom:16px}
  .footer__about{grid-area:auto}
  .footer__contact{grid-area:auto;margin-top:16px}
  .footer__req{grid-area:auto;margin-top:18px}
  .footer__title{font-size:12px;margin-bottom:12px}
  .footer__list{font-size:12.5px;gap:8px}
  .footer__about{font-size:12.5px}
  .footer__phone{font-size:19px}
  .footer__req{font-size:11px}
  .footer__cluster{max-width:180px;margin-top:18px}
  .footer__bottom{padding-bottom:22px}
  .footer__social{gap:6px}
  .footer__soc{width:32px;height:32px;border-radius:7px}
  .to-top{right:14px;bottom:14px;width:40px;height:40px}

  /* мега-меню на телефоне: две колонки, мелкие иконки, прокрутка по высоте */
  .megamenu{max-height:80vh;overflow-y:auto}
  /* полоса групп на 390px иначе занимает пол-панели — поджимаем плитку */
  .megamenu__rail{padding:5px;gap:2px}
  .megamenu__cat{padding:6px 7px;gap:7px;font-size:11px}
  .megamenu__cat-icon{width:28px;height:14px}
  .mm-chips{gap:6px;padding-bottom:14px;margin-bottom:14px}
  .mm-chip{padding:8px 13px 8px 10px;font-size:12px;gap:7px}
  .mm-chip__icon{width:32px;height:16px}
  .megamenu__groups[data-cols]{grid-template-columns:minmax(0,1fr);gap:16px}
  .megamenu__pane-head h3{font-size:22px}
  .megamenu__content{padding:16px 14px 14px}
  .megamenu__foot-in{gap:8px 16px;padding:10px 14px}
  .reasons__grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .reasons__card{padding:20px 18px}
  .reasons__bg{aspect-ratio:1.7}

  .topbar__item,.topbar__sep{display:none}
  .topbar__link{display:none}
  .topbar__phone{display:inline-block}
  /* топбар в одну строку: адрес ужимается, телефон прижат вправо */
  .topbar{font-size:12px}
  .topbar__in{gap:10px;min-height:34px;flex-wrap:nowrap}
  .topbar__geo{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* шапка на телефоне: лого + Каталог + бургер. Телефон переехал в топбар,
     иначе строка не влезает в 390 px и бургер уезжает за экран */
  .header__in{gap:8px}
  .logo__img{height:32px}
  .header__phone{display:none}
  .header__actions{gap:8px}
  .header__actions .btn--sm{display:none}

  .hero{padding-top:28px}
  .hero__word{font-size:clamp(34px,11vw,54px)}
  .hero__lead{font-size:16.3px}
  .hero__intro .btn{width:100%;justify-content:center}
  .hero__bubble{max-width:none}
  .hero-stat__num{font-size:104px}

  .cards,.cards--3{grid-template-columns:1fr}
  /* на телефоне 17 карточек в столбик — это семь экранов, оставляем две
     колонки и убираем пояснение: в 170 px оно нечитаемо */
  .cards--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .card__head{min-height:32px;padding:10px 8px 0}
  .card__title{font-size:13px}
  .card__media{margin-top:10px}
  .card__desc{display:none}
  .card__cta{margin:10px;height:34px;font-size:12px}
  .lead-card{padding:16px;gap:14px}
  .lead-card__kicker{font-size:9.5px;letter-spacing:.12em}
  .lead-card__title{font-size:16px;line-height:1.1}
  .lead-card__text{margin-top:8px;font-size:11.5px;line-height:1.45}
  .lead-card__phone{display:none}
  .lead-card__input{height:38px;padding:0 10px;font-size:12.5px}
  .lead-card__form .btn{height:38px;font-size:11.5px;padding:0 6px}
  .lead-card__note{font-size:9.5px}
  .stock{grid-template-columns:1fr;gap:12px}
  .prod__title{min-height:0}
  .stockbar__tabs{grid-template-columns:repeat(2,1fr)}
  .stocktab__panel{width:calc(100vw - 32px);max-width:none;left:50%;transform:translateX(-50%)}
  .section__head{margin-bottom:32px}

  .cta__copy{padding:28px 22px}

  .stats__in{grid-template-columns:1fr 1fr}
}

/* ============================================================
   ТИПОГРАФИКА ЗАГОЛОВКОВ
   Bebas Neue из проекта убран: у него нет кириллицы, и hero
   фактически рисовался системным Arial Narrow. Hero и остальные
   заголовки теперь на Manrope 800 — у него настоящий жирный вес,
   обводка-имитация не нужна.
   ============================================================ */

/* --- ВСЕ ПРОЧИЕ ЗАГОЛОВКИ: Montserrat Bold --- */
.section__title,
.megamenu__pane-head h3,
.hero__transition-title,
.card__title,
.ask__title,
.fit__title,
.service__title,
.why__title,
.cta__title,
.footer__title,
.modal__title,
.reasons__title,
.stockbar__count b{
  font-family:var(--font-heading);
  font-weight:var(--weight-display);
  font-synthesis-weight:auto;
  -webkit-text-stroke:0;
}

/* мелкие акцентные подписи */
.hero__bubble b,
.why__num,
.stats__item b{
  font-family:var(--font-heading);
  font-weight:800;
  -webkit-text-stroke:0;
}

/* ============================================================
   СХЕМА ГВХ В ВИДЖЕТЕ — компактный режим
   Показываем только графику: кран, кривые, сетку, точки.
   Подписи осей и цифры скрыты — они нечитаемы в 300px,
   данные выдаёт всплывающая подсказка при наведении.
   ============================================================ */

.spec-widget__stage{
  position:relative;
  flex:1;
  min-height:0;
  background:#FAFAFA;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  overflow:hidden;
}
.spec-widget__stage svg#crane-svg{
  display:block;
  width:100%;
  height:100%;
  user-select:none;
}

/* --- скрываем всё, что нечитаемо в мелком масштабе --- */
.spec-widget .axis-num,
.spec-widget .axis-num-y,
.spec-widget .axis-title,
.spec-widget .load-val,
.spec-widget .boom-callout-text,
.spec-widget .boom-callout-sub,
.spec-widget .stage-group .load-val{
  display:none !important;
}

/* --- точки: увеличиваем зону наведения, вид не меняем --- */
.spec-widget .point-dot{
  pointer-events:all;
  stroke:transparent;
  stroke-width:42;          /* в единицах SVG: ~11px на экране */
  fill:#18181b;
  transition:fill .15s ease;
}
.spec-widget .point-dot:hover{fill:var(--red-600);}

/* --- чипы вылета --- */
.spec-widget__chips{
  display:flex;
  gap:4px;
  padding-top:8px;
  flex:0 0 auto;
}
.spec-chip{
  flex:1;
  min-width:0;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink-600);
  border-radius:5px;
  padding:5px 2px;
  font-family:var(--font-text);
  font-size:10px;
  font-weight:500;
  line-height:1.15;
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.spec-chip:hover{background:#E9EBEC;}
.spec-chip.is-active{
  background:var(--red-050);
  color:var(--red-600);
  border-color:var(--red-600);
  font-weight:600;
}

/* затемнение неактивных секций */
.spec-widget .stage-group.dimmed{opacity:.13 !important;}
.spec-widget .stage-group{transition:opacity .25s ease;}

/* всплывающая подсказка */
.spec-widget .tooltip{
  position:fixed;
  pointer-events:none;
  background:rgba(23,25,28,.95);
  color:#fff;
  padding:7px 10px;
  border-radius:6px;
  font-family:var(--font-text);
  font-size:11px;
  line-height:1.45;
  box-shadow:0 6px 18px rgba(0,0,0,.24);
  opacity:0;
  transform:translate(-50%,-118%);
  transition:opacity .12s ease;
  z-index:9999;
}
.spec-widget .tooltip.visible{opacity:1;}
.spec-widget .tooltip strong{
  display:block;
  font-size:11.5px;
  margin-bottom:3px;
}
.spec-widget .tooltip b{color:#fff;font-weight:600;}

/* ============================================================
   СХЕМА ГВХ: КОМПЕНСАЦИЯ МАСШТАБА
   Чертёж 1120x960 сжат до ~280px (масштаб 0.25), из-за чего
   штрихи 1.2-2.4px становятся субпиксельными и исчезают.
   non-scaling-stroke держит толщину в экранных пикселях,
   поэтому линии читаются при любом масштабе.
   ============================================================ */
.spec-widget #crane-layer *,
.spec-widget #charts-layer *,
.spec-widget #grid-layer *,
.spec-widget #axes-layer *,
.spec-widget #callouts-layer *{
  vector-effect:non-scaling-stroke;
}

/* контур крана делаем заметнее: 1.4px в экранных пикселях */
.spec-widget #crane-layer path,
.spec-widget #crane-layer line,
.spec-widget #crane-layer rect,
.spec-widget #crane-layer polygon,
.spec-widget #crane-layer polyline,
.spec-widget #crane-layer circle{
  stroke-width:1.4;
}

/* ходовая часть и рама — чуть жирнее, это силуэт */
.spec-widget #crane-layer path[fill]:not([fill="none"]){
  stroke-width:1.1;
}

/* кривые грузоподъёмности — 2px, они главный акцент */
.spec-widget #charts-layer path{
  stroke-width:2;
}

/* сетка — тонкая, но различимая */
.spec-widget #grid-layer line,
.spec-widget #grid-layer path{
  stroke-width:.6;
  opacity:.75;
}

/* точки: заливка + тонкий контур, зона наведения отдельно */
.spec-widget .point-dot{
  stroke:transparent;
  stroke-width:42;
  vector-effect:none;
}

/* ============================================================
   ПЕРЕМЕННЫЕ ДЛЯ СХЕМЫ ГВХ
   Скрипт схемы рисует через var(--ink-dark) и др. Без этих
   определений stroke становится невалидным и линии не рисуются.
   ============================================================ */
.spec-widget{
  --ink-dark:#18181b;      /* линии чертежа крана */
  --grid-line:#e5e7eb;     /* клеточка */
  --grid-border:#9ca3af;   /* контур сетки */
  --curve-stroke:#E31E24;  /* кривые — наш красный */
  --accent:#E31E24;
  --bg-card:#ffffff;
}
/* ============================================================
   ТТХ АВТОКРАНА В HERO — прозрачная таблица, правый нижний угол.
   Живёт в «коридоре» правее крана: самая правая непрозрачная точка
   фото на x≈922 из 1192, поэтому 240 px не наезжают на машину.
   ============================================================ */
.hero-spec{
  position:absolute;
  right:0;
  bottom:0;
  z-index:5;
  width:240px;
  pointer-events:auto;   /* родитель .hero__slides клики не ловит */
  display:flex;
  flex-direction:column;
  gap:9px;
}

/* подпись «на фото» — ссылка на страницу этой машины */
.hero-spec__cap{
  display:inline-flex;
  align-items:center;
  gap:8px;
  align-self:flex-end;
  white-space:nowrap;
  text-decoration:none;
}
.hero-spec__badge{
  display:inline-flex;
  align-items:center;
  padding:3px 7px 4px;
  border-radius:5px;
  background:var(--red-600);
  color:#fff;
  font-family:var(--font-text);
  font-size:9px;
  font-weight:700;
  line-height:1;
  letter-spacing:.055em;
  text-transform:uppercase;
  transition:background .18s ease;
}
.hero-spec__model{
  font-family:var(--font-text);
  font-size:10.5px;
  font-weight:500;
  line-height:1;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--ink-400);
  transition:color .18s ease;
}
.hero-spec__arrow{
  font-size:12px;
  line-height:1;
  color:var(--red-600);
  transition:transform .18s ease;
}
.hero-spec__cap:hover .hero-spec__model{color:var(--ink-900)}
.hero-spec__cap:hover .hero-spec__badge{background:var(--ink-900)}
.hero-spec__cap:hover .hero-spec__arrow{transform:translateX(3px)}
.hero-spec__cap:focus-visible{outline:2px solid var(--red-600);outline-offset:5px;border-radius:6px}

/* сама таблица: без фона, рамки и тени — только волосяные линейки */
.hero-spec__card{
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  background:none;
  border:0;
  box-shadow:none;
}
.hero-spec__list{
  margin:0;
  padding:0;
  flex:1;
  display:grid;
  grid-auto-rows:1fr;
}
.hero-spec__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:3px 0;
  border-bottom:1px solid var(--line);
}
.hero-spec__row:last-child{border-bottom:0}
.hero-spec__row dt{
  font-size:10.5px;
  line-height:1.2;
  color:var(--ink-400);
}
.hero-spec__row dd{
  margin:0;
  font-size:11.5px;
  line-height:1.2;
  font-weight:700;
  color:var(--ink-900);
  white-space:nowrap;
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}

/* ============================================================
   СЛАЙДЕР ТЕХНИКИ В HERO
   Машина «приезжает» из правой точки (scale 0 → 1), затем справа
   выезжает таблица ТТХ. Держится 10 с и уходит обратно вправо.
   Классы ставит js/main.js: .is-on — слайд в кадре,
   .is-active — собранный вид (машина на месте, карточка выехала).
   ============================================================ */
.hero__slides{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;   /* ловит только .hero-spec */
}
.hero__slide{
  position:absolute;
  inset:0;
  visibility:hidden;
}
.hero__slide.is-on{visibility:visible}

/* машина: въезд и выезд масштабом от правого края.
   Задержка .45s в базовом правиле — это выход: сначала уезжает
   карточка, и только потом сжимается машина. */
.hero__slide .hero__machine-wrap{
  scale:0;
  opacity:0;
  transform-origin:100% 60%;
  /* выход: сначала уезжает карточка, машина сжимается с задержкой .45s.
     Гасим прозрачность только в самом конце — иначе фейд съедает зум. */
  transition:scale .85s cubic-bezier(.5,0,.75,0) .45s,
             opacity .25s ease 1.05s;
}
.hero__slide.is-active .hero__machine-wrap{
  scale:1;
  opacity:1;
  transition:scale 1.1s cubic-bezier(.2,.8,.35,1),
             opacity .55s ease .05s;
}

/* карточка ТТХ: приходит через 1 с после старта машины, уходит первой */
.hero__slide .hero-spec{
  opacity:0;
  translate:34px 0;
  transition:opacity .38s ease,
             translate .38s cubic-bezier(.55,0,.85,.3);
}
.hero__slide.is-active .hero-spec{
  opacity:1;
  translate:0 0;
  transition:opacity .5s ease 1.1s,
             translate .5s cubic-bezier(.2,.86,.26,1) 1.1s;
}

@media (max-width:1100px){
  /* на узком экране слайды разворачиваются в общий поток:
     display:contents отдаёт машину и карточку прямо в flex-колонку stage,
     а порядок задаётся order — карточка остаётся последней */
  .hero__stage{display:flex;flex-direction:column}
  .hero__slides,.hero__slide{display:contents}
  .hero__slide:not(.is-on){display:none}
  .hero__since{order:1}
  .hero__title{order:2}
  .hero__machine-wrap{order:3}
  .hero__intro{order:4}
  .hero-stat{order:5}

  .hero-spec{
    position:relative;
    order:6;
    width:100%;
    max-width:320px;
    margin:16px 0 0;
    gap:8px;
  }
  /* на телефоне слайд не выезжает, а подменяется: сдвиг вправо
     у неактивной карточки растягивал бы страницу в ширину */
  .hero__slide .hero-spec{translate:0 0}
}
/* на телефоне таблица занимает всю колонку — значения встают
   по той же правой границе, что и абзацы над ней */
@media (max-width:480px){
  .hero-spec{max-width:none}
}
/* ============================================================
   УЗКИЕ ТЕЛЕФОНЫ (≤380px)
   В 320 px лого + «Каталог» + бургер не влезают в строку —
   поджимаем шапку, чтобы не появлялся горизонтальный скролл.
   ============================================================ */
@media (max-width:380px){
  .header__in{gap:8px}
  .logo__img{height:26px}
  .catalog-btn{padding:9px 10px;font-size:12px;gap:6px}
  .catalog-btn__burger{width:14px}
  .burger{width:38px;height:38px;padding:9px 9px}
}

/* ============================================================
   КАТАЛОГ НА ГЛАВНОЙ — живой фон
   Красно-оранжевый градиент медленно «дышит» (12 с, alternate).
   Карточки остаются белыми: на тёмном фоне они читаются как плитки,
   а при наведении под ними появляется глубокая тень.
   ============================================================ */
#catalog{
  position:relative;
  color:#fff;
  background-color:#080101;
  background-image:
    radial-gradient(circle at 90% 15%, rgba(255,115,50,.85) 0%, transparent 35%),
    radial-gradient(circle at 50% 45%, #d91b11 0%, #6e0804 45%, transparent 75%),
    linear-gradient(135deg, #050000 0%, #2b0303 35%, #b8140b 70%, #0a0101 100%);
  background-size:200% 200%;
  background-repeat:no-repeat;
  animation:gradientShift 12s ease-in-out infinite alternate;
}

@keyframes gradientShift{
  0%{background-position:0% 80%}
  50%{background-position:100% 20%}
  100%{background-position:30% 100%}
}

/* надзаголовок и заголовок секции — белые */
#catalog .kicker{color:#fff}
#catalog .section__title{color:#fff}
#catalog .section__sub{color:rgba(255,255,255,.74)}

/* карточки категорий: белые, с тенью под собой при наведении */
#catalog .card{
  box-shadow:0 2px 6px rgba(0,0,0,.18);
  transition:box-shadow .24s ease,transform .24s ease,border-color .24s ease;
}
#catalog .card:hover{
  box-shadow:0 26px 54px -8px rgba(0,0,0,.5),0 8px 18px rgba(0,0,0,.28);
  border-color:transparent;
  transform:translateY(-3px);
}
#catalog .card:focus-visible{
  box-shadow:0 26px 54px -8px rgba(0,0,0,.5);
  outline:2px solid #fff;
  outline-offset:3px;
}

/* тёмная карточка-консультация отделяется от фона светлой обводкой */
#catalog .lead-card{border:1px solid rgba(255,255,255,.14)}

@media (prefers-reduced-motion:reduce){
  #catalog{animation:none}
}