/* Inter и Onest — вариативные woff2 с Google Fonts, размещены локально:
   внешний CSS fonts.googleapis.com блокировал рендер (~0,8 с на мобильном),
   а подмена шрифта давала CLS 0,29 на карточках. Сабсеты: cyrillic + latin.
   Onest держит заголовки, Inter — весь остальной текст. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  /* до 700: этим весом набраны кнопки, цены и значения характеристик.
     Диапазон в @font-face режет ось wght, а не только выбирает начертание —
     объявишь 300 600, и `font-weight: 700` молча отрисуется шестисотым. */
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/inter-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/onest-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/onest-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Системный fallback с подогнанными метриками: Arial занимает примерно ту же
   ширину строки, что Inter/Onest, — абзацы не прыгают при подмене шрифта */
/* size-adjust посчитан по средней ширине общих глифов (кириллица + латиница)
   Inter/Onest против Arial/Liberation Sans; ascent/descent — hhea шрифтов,
   делённые на size-adjust, дальше подогнано по замеру в браузере.
   Погрешность ширины абзаца — 0,0–0,5 % (замер 10.09.2026 на четырёх строках
   каталога), высота строки сходится точно: строки не переносятся иначе,
   и подмена шрифта не сдвигает макет. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica');
  size-adjust: 106.6%;
  ascent-override: 90.9%;
  descent-override: 22.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Onest Fallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica');
  size-adjust: 104%;
  ascent-override: 93.3%;
  descent-override: 29.3%;
  line-gap-override: 0%;
}

/* ============================================
   БЕРЛИОН — Современная металлобаза
   Design System & Styles
   ============================================ */

/* --- CSS Variables --- */
:root {
    /* было #DD5A0E: белый текст на нём давал 4,02:1 (ниже AA 4,5). #C94F08 — тот же
       оттенок; контраст с белым 5,36:1, на подложках #F4F4F2/#FFF1E7 — 4,9/4,7 (аудит 23.08.2026) */
    --primary: #C94F08;
    --primary-dark: #AD4206;
    --primary-light: #FFF1E7;
    --primary-glow: rgba(201, 79, 8, 0.3);
    --dark: #1B1C1B;
    --dark-800: #222322;
    --dark-700: #33342F;
    --dark-600: #4A4B46;
    --gray-100: #F6F6F5;
    --gray-200: #E6E5E2;
    --gray-300: #D0CFCB;
    --gray-400: #74746E;
    --gray-500: #64645E; /* было #64645E — 4,34:1 на #F4F4F2; теперь 4,8 (AA) */
    --white: #FFFFFF;
    /* Фон страницы: тот же светлый серо-голубой, что у карточки товара
       (--pv-bg в product-v2.css). Белым остаются панели и карточки —
       на этом фоне они читаются как отдельные блоки */
    --page-bg: #F4F4F2;
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.12);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.16);
    --shadow-glow: 0 0 40px rgba(201, 79, 8, 0.15);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --font: Inter, 'Inter Fallback', system-ui, sans-serif;
    --font-heading: Onest, 'Onest Fallback', system-ui, sans-serif;
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- Доступность: пропуск навигации и подписи для скринридеров --- */
/* Ссылка живёт за верхней кромкой экрана и выезжает только при фокусе с
   клавиатуры: мышью её не увидеть, Tab'ом — сразу первой. */
.skip-link {
    position: absolute;
    top: 0;
    left: 1rem;
    z-index: 10001; /* выше прелоадера: он держит 10000 и перекрывал ссылку */
    transform: translateY(-150%);
    padding: 0.75rem 1.25rem;
    background: var(--primary);
    color: var(--white);
    font-family: var(--font);
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    transition: transform 0.2s ease;
}
.skip-link:focus {
    transform: translateY(0);
}
/* Текст только для скринридеров: у полей форм подписи были нарисованы
   placeholder'ом, а он исчезает при вводе и не читается как label. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
/* Фокус у main — служебный, после перехода по skip-link обводку не рисуем */
main:focus {
    outline: none;
}

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Базовая защита узких экранов (320–480 px). Длинные слова — «Онлайн-калькулятор»,
   марки стали, артикулы — на 320 px не влезают в строку и, если их не разрешить
   переносить, растягивают весь документ: появляется горизонтальная прокрутка
   страницы, хотя виноват один заголовок. Картинки и видео ограничиваем шириной
   родителя по той же причине. */
body { overflow-wrap: break-word; }
img, svg, video, canvas { max-width: 100%; }

body {
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--dark);
    background: var(--page-bg);
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
}

b,
strong {
    font-weight: 600;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

img { max-width: 100%; display: block; }

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- Preloader --- */
.preloader {
    position: fixed;
    inset: 0;
    background: var(--dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity 0.5s, visibility 0.5s;
}

.preloader.hidden {
    opacity: 0;
    visibility: hidden;
}

/* заставку в эту сессию уже видели — не показываем и не занимаем ею экран */
.preloader-seen .preloader { display: none; }

.preloader-logo {
    font-size: 48px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 32px;
}

.preloader-logo .logo-o {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: var(--primary);
    border-radius: 50%;
    margin-right: 4px;
    animation: pulse 1s ease-in-out infinite;
}

.preloader-bar {
    width: 200px;
    height: 3px;
    background: var(--dark-700);
    border-radius: 3px;
    overflow: hidden;
}

.preloader-progress {
    width: 0%;
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
    animation: preloaderProgress 1.5s ease-out forwards;
}

@keyframes preloaderProgress {
    to { width: 100%; }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* --- Header --- */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: var(--transition);
}

.header.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-md);
}

.header.is-stuck .header-top {
    max-height: 0;
    opacity: 0;
    padding: 0;
    overflow: hidden;
}

.header-top {
    background: var(--dark);
    color: var(--gray-300);
    font-size: 13px;
    max-height: 50px;
    opacity: 1;
    transition: all 0.4s ease;
    overflow: hidden;
}

.header-top-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 24px;
}

.header-contacts {
    display: flex;
    gap: 24px;
}

.header-contact-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--gray-300);
}

.header-contact-item:hover { color: var(--white); }

.header-schedule {
    display: flex;
    align-items: center;
    gap: 6px;
}

.header-main {
    background: rgba(255, 255, 255, 0.98);
    transition: var(--transition);
}

.header.scrolled .header-main {
    background: transparent;
}

.header-main-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    gap: 24px;
}

/* --- Logo --- */
.logo {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-size: 28px;
    color: var(--dark);
    flex-shrink: 0;
}

.logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: var(--primary);
    color: var(--white);
    border-radius: 50%;
    font-weight: 600;
    font-size: 22px;
    transition: var(--transition);
}

.logo:hover .logo-icon { transform: rotate(360deg); }

.logo-img { height: 38px; width: auto; }
.logo-img--footer { filter: brightness(0) invert(1); }
/* На телефоне логотип высотой 80px шире экрана (426px на 360) — упирался в края.
   Обёртка даёт боковые отступы, картинка ужимается по ширине с сохранением пропорций */
.preloader-logo { box-sizing: border-box; max-width: 100%; padding: 0 32px; display: flex; justify-content: center; }
.preloader-logo-img { height: 80px; width: auto; max-width: 100%; object-fit: contain; filter: brightness(0) invert(1); }

/* --- Navigation --- */
.nav {
    display: flex;
    gap: 4px;
}

.nav-link {
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    color: var(--dark-600);
    transition: var(--transition);
    position: relative;
}

.nav-link:hover {
    color: var(--primary);
    background: var(--primary-light);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: var(--transition);
    transform: translateX(-50%);
    border-radius: 2px;
}

.nav-link:hover::after { width: 60%; }

/* --- Header Actions --- */
.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-phone {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.header-phone__call {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--dark-700);
    transition: var(--transition);
}

.header-phone__call:hover { color: var(--primary); }
.header-phone__call svg { color: var(--primary); flex-shrink: 0; }

.phone-number { font-size: 17px; font-weight: 700; white-space: nowrap; letter-spacing: .2px; }

.header-phone__callback {
    padding: 0;
    background: none;
    border: none;
    border-bottom: 1px dashed currentColor;
    font-family: var(--font);
    font-size: 12px;
    line-height: 1.3;
    color: var(--primary);
    cursor: pointer;
    transition: var(--transition);
}

.header-phone__callback:hover { color: var(--primary-dark); }

.cart-btn {
    position: relative;
    width: 44px;
    height: 44px;
    border: 2px solid var(--gray-200);
    background: var(--white);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    color: var(--dark-600);
}

.cart-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
}

.cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    background: var(--primary);
    color: var(--white);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-bounce);
}

.cart-count.bump { animation: cartBump 0.4s; }

@keyframes cartBump {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

.burger {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    /* 44×44 — минимальная цель для пальца; было 40×32, и промахи по кнопке
       меню на телефоне стоили дороже всего: это единственный вход в навигацию */
    width: 44px;
    height: 44px;
    padding: 0;
}

.burger span {
    width: 24px;
    height: 2px;
    background: var(--dark);
    border-radius: 2px;
    transition: var(--transition);
}

/* --- Cart Sidebar --- */
.cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(4px);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
}

.cart-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ============================================================
   Корзина-спецификация (B2B)
   Панель для снабженца: в строке видно массу и пересчёт в метры/хлысты,
   внизу — масса всей заявки, по ней считается оптовая цена.
   ============================================================ */
.cart {
    position: fixed;
    top: 0;
    right: 0;
    width: 552px;
    max-width: 100vw;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--white);
    color: var(--dark);
    z-index: 2001;
    transform: translateX(102%);
    /* тень с оттенком фирменного синего — нейтральный чёрный выглядит грязно */
    box-shadow: -24px 0 64px rgba(27, 28, 27, 0.14), -1px 0 0 var(--gray-200);
    transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
}
.cart.active { transform: translateX(0); }

/* ---- шапка ---- */
.cart__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--gray-200);
}
.cart__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--dark);
}
.cart__close {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: var(--white);
    color: var(--gray-500);
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.cart__close svg { width: 17px; height: 17px; }
.cart__close:hover { color: var(--dark); border-color: var(--gray-300); background: var(--gray-100); }
.cart__close:active { transform: translateY(1px); }
.cart__close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---- тело ---- */
.cart__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.cart__body::-webkit-scrollbar { width: 4px; }
.cart__body::-webkit-scrollbar-track { background: transparent; }
.cart__body::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 4px; }

/* ---- пустое состояние ---- */
.cart-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 40px 24px;
}
.cart-empty__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 4px;
    border-radius: 13px;
    background: var(--primary-light);
    color: var(--primary);
}
.cart-empty__mark svg { width: 22px; height: 22px; }
.cart-empty__title { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--dark); }
.cart-empty__text { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--gray-500); max-width: 34ch; }
.cart-empty__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--primary);
}
.cart-empty__link svg { width: 15px; height: 15px; transition: transform var(--transition); }
.cart-empty__link:hover svg { transform: translateX(3px); }

/* ---- строка спецификации ---- */
.cart-line {
    position: relative;
    padding: 16px 24px;
    border-bottom: 1px solid var(--gray-200);
    animation: cartLineIn 0.32s cubic-bezier(0.32, 0.72, 0, 1) both;
    transition: background var(--transition);
}

/* подсветка строки под курсором — только заливкой.
   На тач-устройствах не нужна: там :hover «залипает» после тапа */
@media (hover: hover) {
    .cart-line:hover { background: var(--gray-100); }
    .cart-line:hover .cart-line__no { color: var(--primary); }
    .cart-line:hover .cart-line__remove { color: var(--gray-500); }
}
@keyframes cartLineIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cart, .cart-line { transition: none; animation: none; }
}
.cart-line__head { display: flex; align-items: flex-start; gap: 9px; }

/* номер позиции: фиксированная ширина, чтобы наименования шли по одной линии */
.cart-line__no {
    flex-shrink: 0;
    min-width: 17px;
    padding-top: 1px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gray-300);
    font-variant-numeric: tabular-nums;
}
.cart-line__head .cart-line__name { flex: 1; min-width: 0; }
.cart-line__name {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--dark);
    text-wrap: pretty;
}
a.cart-line__name:hover { color: var(--primary); }
.cart-line__remove {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--gray-400);
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
}
.cart-line__remove svg { width: 16px; height: 16px; }
.cart-line__remove:hover { color: #DC2626; background: #FEF2F2; }
.cart-line__remove:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

.cart-line__tier {
    display: inline-block;
    margin-right: 5px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--gray-100);
    color: var(--gray-500);
}
.cart-line__tier--opt { background: #ECFDF5; color: #047857; }

.cart-line__row {
    margin-left: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}

/* счётчик количества */
.cart-qty {
    display: inline-flex;
    align-items: stretch;
    height: 33px;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    overflow: hidden;
    background: var(--white);
}
.cart-qty:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(201, 79, 8, 0.12); }
.cart-qty__step {
    width: 34px;
    border: none;
    background: var(--gray-100);
    color: var(--gray-500);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
}
.cart-qty__step:hover { background: var(--primary-light); color: var(--primary); }
.cart-qty__step:active { transform: translateY(1px); }
.cart-qty__step:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
/* на минимуме уменьшать нечего: отгрузка идёт целыми хлыстами */
.cart-qty__step:disabled { opacity: 0.35; cursor: not-allowed; }
.cart-qty__step:disabled:hover { background: var(--gray-100); color: var(--gray-500); }
.cart-qty__input {
    width: 58px;
    height: 100%;
    border: none;
    text-align: center;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
    font-variant-numeric: tabular-nums;
    background: transparent;
    -moz-appearance: textfield;
}
.cart-qty__input::-webkit-outer-spin-button,
.cart-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-qty__input:focus { outline: none; }
/* Единица измерения — сегментированный переключатель. Активный сегмент
   «поднят» белой подложкой с мягкой тенью, остальные лежат в утопленной
   дорожке: состояние читается без чтения подписей. */
.cart-line__controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.cart-units {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: linear-gradient(180deg, #F4F4F2 0%, #F6F6F5 100%);
    box-shadow: inset 0 1px 2px rgba(27, 28, 27, 0.04);
}
.cart-units__btn {
    min-width: 34px;
    height: 25px;
    padding: 0 8px;
    border: none;
    border-radius: 7px;
    background: transparent;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: var(--gray-500);
    cursor: pointer;
    transition: color var(--transition), background var(--transition), box-shadow var(--transition);
}
.cart-units__btn:hover { color: var(--dark-700); }
.cart-units__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.cart-units__btn.is-active {
    background: var(--white);
    color: var(--dark);
    box-shadow: 0 1px 2px rgba(27, 28, 27, 0.1), 0 0 0 1px rgba(27, 28, 27, 0.04);
    cursor: default;
}
.cart-units__btn.is-active:hover { color: var(--dark); }

.cart-line__sum { text-align: right; flex-shrink: 0; }
.cart-line__total {
    display: block;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 700;
    color: var(--dark);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.cart-line__unit-price {
    display: block;
    white-space: nowrap;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--gray-400);
    font-variant-numeric: tabular-nums;
}

.cart-line__conv {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-left: 26px;
    margin-top: 10px;
    font-variant-numeric: tabular-nums;
}
.cart-line__conv span {
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--gray-100);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--gray-500);
    white-space: nowrap;
    transition: background var(--transition);
}
@media (hover: hover) {
    .cart-line:hover .cart-line__conv span { background: var(--white); }
}

/* подсказка про оптовый порог — главный B2B-смысл панели */
.cart-line__hint {
    margin-left: 26px;
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
    color: #B45309;
}
.cart-line__hint b { font-weight: 700; font-variant-numeric: tabular-nums; }
.cart-line__bar {
    margin-left: 26px;
    height: 3px;
    margin-top: 6px;
    border-radius: 2px;
    background: var(--gray-200);
    overflow: hidden;
}
.cart-line__bar span { display: block; height: 100%; background: #F59E0B; border-radius: 2px; }

/* ---- подвал ---- */
.cart__foot {
    padding: 14px 24px 18px;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-100);
}
.cart-sum {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    margin: 0 0 12px;
}

/* левая колонка — объём заявки */
.cart-sum__side {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cart-sum__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gray-200);
    color: var(--dark-600);
}
.cart-sum__icon svg { width: 21px; height: 21px; }
.cart-sum__side-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cart-sum__count {
    font-size: 15px;
    font-weight: 700;
    color: var(--dark);
    font-variant-numeric: tabular-nums;
}
.cart-sum__weight {
    font-size: 13px;
    color: var(--gray-500);
    font-variant-numeric: tabular-nums;
}
.cart-sum__weight b { font-weight: 700; color: var(--dark-700); }

/* правая колонка — итог и действие; разделитель вертикальный */
.cart-sum__main {
    padding-left: 20px;
    border-left: 1px solid var(--gray-200);
}
.cart-sum__label {
    display: block;
    font-size: 12.5px;
    color: var(--gray-500);
}
.cart-sum__total {
    margin: 2px 0 12px;
    font-family: var(--font-heading);
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: var(--dark);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cart__cta {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--primary);
    color: var(--white);
    font-family: var(--font);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(201, 79, 8, 0.24);
    transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.cart__cta svg { width: 17px; height: 17px; transition: transform var(--transition); }
.cart__cta:hover { background: var(--primary-dark); box-shadow: 0 10px 26px rgba(201, 79, 8, 0.3); }
.cart__cta:hover svg { transform: translateX(3px); }
.cart__cta:active { transform: translateY(1px); }
.cart__cta:focus-visible { outline: 2px solid var(--dark); outline-offset: 2px; }

.cart__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}
.cart__action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 0;
    border: none;
    background: none;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    color: var(--dark-700);
    cursor: pointer;
    transition: color var(--transition);
}
.cart__action svg { width: 15px; height: 15px; }
.cart__action:hover { color: var(--primary); }
.cart__action:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.cart__action--muted { color: var(--gray-400); }
.cart__action--muted:hover { color: #DC2626; }
.cart__action.is-done { color: #047857; }

.cart__share-hint {
    margin: 8px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: #047857;
}

/* кнопки мессенджеров висят выше корзины по z-index и накрывают кнопку
   «Отправить на расчёт» — при открытой панели убираем их с дороги.
   С попапами заявок та же история: на мобильном они ложатся на согласие
   и кнопку отправки, поэтому прячем их и на body.modal-open */
body.cart-open .messenger-buttons,
body.modal-open .messenger-buttons {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition), visibility var(--transition);
}

@media (max-width: 600px) {
    .cart { width: 100vw; }
    .cart__head { padding: 18px 18px 15px; }
    .cart-line { padding: 15px 18px; }
    .cart__foot { padding: 16px 18px 20px; }
    .cart-qty__input { width: 46px; }
    .cart-qty__step { width: 30px; }
    .cart-units__btn { min-width: 28px; padding: 0 5px; }
    .cart-line__controls { gap: 6px; }
    .cart-sum { grid-template-columns: 1fr; gap: 14px; }
    .cart-sum__main { padding-left: 0; border-left: none; padding-top: 14px; border-top: 1px solid var(--gray-200); }
}

/* --- Order Modal --- */
.order-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(6px);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

.order-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.order-modal {
    width: 560px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    padding: 32px;
    color: var(--dark);
    transform: translateY(20px) scale(0.97);
    transition: 0.3s;
}

.order-modal-overlay.active .order-modal {
    transform: translateY(0) scale(1);
}

.order-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.order-modal__title {
    /* заголовки модалок и корзины — <p>, не <h2>/<h3>: иначе на каждой странице
       аутлайн начинался с «Спецификация» и четырёх скрытых попапов до H1 */
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 600;
    margin: 0;
}

.order-modal__subtitle {
    font-size: 14px;
    color: var(--gray-400);
    margin-top: 4px;
}

.order-modal__close {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--gray-100);
    border-radius: 50%;
    color: var(--gray-400);
    font-size: 16px;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.order-modal__close:hover {
    background: var(--gray-200);
    color: var(--dark);
}

/* Order items summary */
.order-items-list {
    background: var(--gray-50, #f9fafb);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
    max-height: 150px;
    overflow-y: auto;
}

.order-items-list::-webkit-scrollbar { width: 3px; }
.order-items-list::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }

.order-item-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--gray-100);
}
.order-item-row:last-child { border-bottom: none; }

.order-item-row-name {
    color: var(--gray-500, #64645E);
    flex: 1;
}
.order-item-row-total {
    font-weight: 600;
    color: var(--dark);
    margin-left: 12px;
    white-space: nowrap;
    align-self: flex-start;
}

.order-item-row-info {
    flex: 1;
    min-width: 0;
}

.order-item-detail {
    font-size: 12px;
    color: var(--gray-400);
    margin-top: 3px;
}

.order-item-secondary {
    color: #74746E;
    margin-left: 4px;
}

.order-item-tier {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
    background: rgba(234, 88, 12, 0.1);
    color: #ea580c;
    text-transform: uppercase;
    vertical-align: middle;
}

.order-item-tier--opt {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.order-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 600;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid var(--gray-200);
}

/* Order form fields */
.order-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.order-form__row {
    display: flex;
    gap: 10px;
}

.order-form__field {
    flex: 1;
}

/* Поля были 47 px при шрифте 14 px — рядом с кнопкой отправки в 52 px они
   выглядели зажатыми, а на iPhone Safari при фокусе на поле мельче 16 px
   принудительно увеличивает страницу, и человек дозаполняет форму в зуме. */
.order-form__input {
    width: 100%;
    min-height: 52px;
    padding: 14px 16px;
    border: 2px solid var(--gray-200);
    border-radius: 10px;
    background: var(--gray-50, #f9fafb);
    color: var(--dark);
    font-size: 16px;
    font-family: var(--font);
    transition: 0.2s;
    box-sizing: border-box;
}

.order-form__input::placeholder {
    color: var(--gray-400);
}

.order-form__input:focus {
    outline: none;
    border-color: var(--primary);
    background: #fff;
}

.order-form__textarea {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--gray-200);
    border-radius: 10px;
    background: var(--gray-50, #f9fafb);
    color: var(--dark);
    font-size: 16px;
    font-family: var(--font);
    resize: vertical;
    min-height: 60px;
    transition: 0.2s;
    box-sizing: border-box;
}

.order-form__textarea:focus {
    outline: none;
    border-color: var(--primary);
    background: #fff;
}

.order-form__upload-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 2px dashed var(--gray-300);
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s;
}

.order-form__upload-row:hover {
    border-color: var(--primary);
    background: rgba(201, 79, 8,0.04);
}

.order-form__upload-row svg { color: var(--gray-400); flex-shrink: 0; }
.order-form__upload-text { font-size: 13px; color: var(--gray-500, #64645E); }
.order-form__upload-formats { font-size: 11px; color: var(--gray-400); }

.order-form__file-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.order-form__submit {
    width: 100%;
    padding: 15px 20px;
    min-height: 54px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: 0.2s;
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.order-form__submit:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(201, 79, 8,0.3);
}

@media (max-width: 600px) {
    .cart-sidebar { width: 100%; right: -100%; }
    .order-modal { padding: 20px; }
    .order-form__row { flex-direction: column; }
}

/* --- Зона загрузки файлов ------------------------------------------------
   Заявка на резку — это обычно несколько файлов сразу (DXF + PDF + XLSX),
   поэтому зона крупная, принимает перетаскивание и показывает каждый файл
   отдельной строкой с возможностью снять лишний. */
.dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 18px 16px;
    border: 2px dashed var(--gray-300);
    border-radius: 12px;
    background: var(--gray-50, #f9fafb);
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--primary); background: rgba(201, 79, 8, .04); }
.dropzone.is-dragover {
    border-color: var(--primary);
    background: rgba(201, 79, 8, .09);
    box-shadow: inset 0 0 0 1px var(--primary);
}
.dropzone__input { display: none; }
.dropzone__icon { width: 26px; height: 26px; color: var(--primary); }
.dropzone__title { font-size: 14px; font-weight: 600; color: var(--dark-700, #33342F); }
.dropzone__hint { font-size: 11.5px; line-height: 1.45; color: var(--gray-400); }

.dropzone__error:empty { display: none; }
.dropzone__error {
    margin-top: 8px; padding: 9px 12px;
    border-radius: 9px; background: #FEF2F2;
    box-shadow: inset 0 0 0 1px #FECACA;
    color: #B91C1C; font-size: 12.5px; line-height: 1.4;
}

.dropzone__list { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.dropzone__file {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 7px 10px; border-radius: 8px; background: var(--gray-100);
    font-size: 12.5px; color: var(--dark-700, #33342F);
}
.dropzone__file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropzone__file-size { color: var(--gray-400); }
.dropzone__file-remove {
    flex-shrink: 0; width: 22px; height: 22px; padding: 0;
    border: none; border-radius: 6px; background: transparent;
    color: var(--gray-400); cursor: pointer; font-size: 13px; line-height: 1;
}
.dropzone__file-remove:hover { background: #FEE2E2; color: #B91C1C; }

/* Способ связи: телефон, MAX или почта — человек выбирает сам.
   Выбор здесь меняет следующее поле, поэтому активный сегмент взят синим:
   белая плашка на почти белом фоне читалась как неактивная, и рядом с синей
   кнопкой отправки было не видно, что выбор вообще сделан. Размеры подогнаны
   под поля формы — 14px и 40 px высоты, чтобы ряд не выглядел приставленным. */
.request-channel {
    display: flex; width: 100%; gap: 4px; padding: 4px;
    border: 1.5px solid var(--gray-200); border-radius: var(--radius-md);
    background: var(--gray-100);
}
.request-channel__btn {
    flex: 1 1 0; min-width: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 0 12px;
    border: 1.5px solid transparent; border-radius: var(--radius-sm);
    background: transparent; font-family: var(--font); font-size: 14px;
    font-weight: 600; color: var(--gray-500); cursor: pointer;
    transition: background .2s cubic-bezier(.4, 0, .2, 1), color .2s ease-out,
                border-color .2s ease-out, box-shadow .2s ease-out;
}
/* Иконка живёт цветом кнопки и не спорит с подписью по весу */
.request-channel__ico {
    width: 17px; height: 17px; flex: 0 0 auto;
    opacity: .75;
}
.request-channel__btn.is-active .request-channel__ico { opacity: 1; }
.request-channel__btn:hover:not(.is-active) {
    color: var(--dark-700); background: rgba(27, 28, 27, .04);
}
/* Кольцо отводим на 2 px: вплотную оно сливалось с рамкой активного сегмента,
   и с клавиатуры было не понять, что подсвечено — выбор или фокус. */
.request-channel__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.request-channel__btn.is-active {
    background: var(--white); border-color: var(--primary);
    color: var(--primary-dark);
    box-shadow: 0 1px 3px rgba(27, 28, 27, .08);
}

/* На телефоне ряд занимает всю ширину: три равные доли по 44 px — иначе
   в 32 px пальцем попадаешь мимо, а «MAX» между соседями теряется. */
/* На телефоне ряд тот же, но цели крупнее: 44 px против 40 — иначе пальцем
   попадаешь мимо. Подписи сохраняем, ужимаем только внутренние отступы. */
@media (max-width: 640px) {
    .request-channel__btn { min-height: 44px; padding: 0 6px; gap: 6px; font-size: 13px; }
    .request-channel__ico { width: 16px; height: 16px; }
}

.order-modal--request { width: 480px; }
.order-modal--request .order-form { display: flex; flex-direction: column; gap: 12px; }

/* --- Ответ на отправленную заявку ---------------------------------------
   Тост живёт пару секунд, а человек только что оставил телефон и ждёт
   подтверждения. Поэтому форма подменяется этим блоком: он остаётся на
   экране и повторяет, когда перезвонят. */
.form-success {
    text-align: center;
    padding: 28px 24px 24px;
    border-radius: 14px;
    background: linear-gradient(180deg, #F0FDF4 0%, #F6F6F5 100%);
    box-shadow: inset 0 0 0 1px #BBF7D0;
    animation: formSuccessIn .28s ease-out;
}
@keyframes formSuccessIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
.form-success__icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #16A34A;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(22, 163, 74, .32);
}
.form-success__icon svg { width: 26px; height: 26px; }
.form-success__title {
    margin: 0 0 6px;
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 700;
    color: var(--dark);
}
.form-success__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--gray-500);
}
.form-success__note {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--gray-400);
}
.form-success__note a { color: var(--primary); font-weight: 600; text-decoration: none; }
.form-success__note a:hover { text-decoration: underline; }
.form-success__btn {
    margin-top: 18px;
    padding: 11px 26px;
    border: none;
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}
.form-success__btn:hover { background: var(--primary-dark); }

/* Отказ тоже объясняем по-человечески и даём телефон, а не системный alert */
.form-error {
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #FEF2F2;
    box-shadow: inset 0 0 0 1px #FECACA;
    color: #B91C1C;
    font-size: 13.5px;
    line-height: 1.45;
}
.form-error a { color: #B91C1C; font-weight: 700; white-space: nowrap; }

/* Окно заказа звонка: полей всего два, широкая модалка выглядела бы пустой */
.order-modal--callback { width: 420px; padding: 28px; }
.order-modal--callback .order-form { display: flex; flex-direction: column; gap: 12px; }
/* явный display перебивает атрибут hidden — без этого отправленная форма
   остаётся на экране под блоком «Заявка принята» */
.order-form[hidden], .quick-order__form[hidden] { display: none; }

/* --- Хлебные крошки (единые для всего сайта) ---------------------------------
   Живут здесь, а не в catalog.css: его грузит только каталог, и на страницах
   вроде /contacts или /uslugi крошки оставались вовсе без стилей — 16px,
   строкой без отступов. Цвета переопределяет только .hero__crumbs (тёмный
   hero), метрика везде одна. */
.breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    /* строка стоит ровно посередине между шапкой и следующим блоком:
       свои отступы задаёт она сама, соседи сверху ничего не добавляют.
       Снизу на 4px меньше — разницу добирает межстрочный отступ заголовка. */
    margin: 16px 0 12px;
    padding: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--gray-400);
}

.breadcrumbs a {
    color: var(--primary);
    font-weight: 500;
    text-decoration: none;
}

.breadcrumbs a:hover { text-decoration: underline; }

.breadcrumb-sep { color: var(--gray-300); }
.breadcrumb-current { color: var(--dark-600); }

/* Отступ снизу зависит от того, что идёт следом. Под блоком с фоном или
   рамкой видно ровно margin, а под заголовком к нему прибавляется его
   межстрочный отступ (~10px у 32px кегля) — поэтому там margin меньше,
   чтобы оптически сверху и снизу было одинаково. */
.catalog-page .breadcrumbs,
.ct-hero__crumbs { margin-bottom: 16px; }
.hero__crumbs { margin-bottom: 14px; }
/* следом идёт заголовок раздела — вычитаем его межстрочный отступ */
.container:has(+ .container .catalog-header) > .breadcrumbs { margin-bottom: 6px; }

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.btn-primary {
    background: var(--primary);
    color: var(--white);
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.btn-glass {
    background: rgba(255, 255, 255, 0.15);
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    color: var(--gray-500);
    border: 1px solid var(--gray-200);
}

.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.btn-lg { padding: 16px 36px; font-size: 16px; border-radius: var(--radius-lg); }
.btn-full { width: 100%; }

/* --- Hero Section --- */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--dark) 0%, #1a1a2e 50%, #16213e 100%);
    color: var(--white);
    overflow: hidden;
    padding-top: 140px;
}

.hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hero-particles {
    position: absolute;
    inset: 0;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--primary);
    border-radius: 50%;
    opacity: 0;
    animation: float 6s infinite;
}

@keyframes float {
    0% { opacity: 0; transform: translateY(100vh) scale(0); }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% { opacity: 0; transform: translateY(-100px) scale(1); }
}

.hero-gradient {
    position: absolute;
    top: -50%;
    right: -20%;
    width: 80%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(201, 79, 8, 0.1) 0%, transparent 60%);
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: rgba(201, 79, 8, 0.15);
    border: 1px solid rgba(201, 79, 8, 0.3);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 28px;
    animation: fadeInUp 0.8s ease;
}

.hero-title {
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 24px;
    animation: fadeInUp 0.8s ease 0.1s both;
}

.text-accent {
    background: linear-gradient(135deg, #C94F08, #2f7cff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: var(--gray-300);
    margin-bottom: 36px;
    max-width: 600px;
    animation: fadeInUp 0.8s ease 0.2s both;
}

.hero-btns {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 64px;
    animation: fadeInUp 0.8s ease 0.3s both;
}

.hero-stats {
    display: flex;
    gap: 32px;
    padding: 28px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    animation: fadeInUp 0.8s ease 0.4s both;
}

.hero-stat {
    display: flex;
    flex-direction: column;
}

.hero-stat-row {
    display: flex;
    align-items: baseline;
    line-height: 1;
}

.hero-stat-number {
    font-size: 36px;
    font-weight: 600;
    color: var(--primary);
    line-height: 1;
}

.hero-stat-plus {
    font-size: 24px;
    font-weight: 600;
    color: var(--primary);
    margin-left: 2px;
}

.hero-stat-label {
    font-size: 13px;
    color: var(--gray-400);
    margin-top: 4px;
}

.hero-stat-divider {
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.hero-scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--gray-400);
    font-size: 12px;
    animation: fadeInUp 1s ease 0.6s both;
}

.scroll-arrow {
    width: 24px;
    height: 40px;
    border: 2px solid var(--gray-500);
    border-radius: 12px;
    position: relative;
}

.scroll-arrow::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    width: 4px;
    height: 8px;
    background: var(--primary);
    border-radius: 2px;
    transform: translateX(-50%);
    animation: scrollBounce 2s infinite;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
    50% { transform: translateX(-50%) translateY(12px); opacity: 0.3; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Section Base --- */
.section {
    padding: 32px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.section-tag {
    display: inline-block;
    padding: 4px 16px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.section-title {
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--dark);
}

.section-desc {
    font-size: 17px;
    color: var(--gray-500);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

/* --- Categories Grid --- */
.categories { background: var(--gray-100); }

.categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 28px 20px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    transition: var(--transition);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary);
    transform: scaleX(0);
    transition: var(--transition);
}

.category-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.category-card:hover::before { transform: scaleX(1); }

.category-icon {
    color: var(--primary);
    transition: var(--transition);
}

.category-card:hover .category-icon { transform: scale(1.1); }

.category-name {
    font-size: 15px;
    font-weight: 600;
}

.category-arrow {
    font-size: 20px;
    color: var(--gray-300);
    transition: var(--transition);
}

.category-card:hover .category-arrow {
    color: var(--primary);
    transform: translateX(4px);
}

.category-card--accent {
    background: linear-gradient(135deg, var(--dark) 0%, #1a1a2e 100%);
    border-color: transparent;
    color: var(--white);
}

.category-card--accent .category-icon { color: #FF6B6B; }
.category-card--accent .category-arrow { color: var(--gray-500); }
.category-card--accent:hover { border-color: var(--primary); }

/* --- Catalog Groups Grid --- */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.catalog-group {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 24px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.catalog-group::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: var(--transition);
}

.catalog-group:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.catalog-group:hover::before {
    transform: scaleX(1);
}

.catalog-group-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--gray-200);
}

.catalog-group-icon {
    flex-shrink: 0;
    width: 84px; /* Larger base */
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    position: relative; /* For the badges */
}

.catalog-group-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.icon-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--dark-800);
    color: var(--white);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    z-index: 2;
    border: 1px solid rgba(255,255,255,0.2);
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.icon-badge--accent {
    background: var(--primary);
}

/* Badge glow on card hover */
.hub-card:hover .icon-badge,
.catalog-group:hover .icon-badge {
    transform: scale(1.15);
    box-shadow: 0 0 12px rgba(201, 79, 8, 0.5), 0 2px 8px rgba(0,0,0,0.2);
    background: var(--primary);
    border-color: rgba(255,255,255,0.5);
}

.catalog-group:hover .catalog-group-icon {
    transform: scale(1.08);
}

.catalog-group-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--dark);
    line-height: 1.3;
}

.catalog-sublist {
    list-style: none;
    padding: 0;
    margin: 0 0 auto 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.catalog-sublist li {
    position: relative;
    padding-left: 16px;
}

.catalog-sublist li::before {
    content: '›';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
}

.catalog-sublist a {
    font-size: 14px;
    color: var(--gray-600);
    text-decoration: none;
    transition: var(--transition);
    line-height: 1.4;
}

.catalog-sublist a:hover {
    color: var(--primary);
}

.catalog-group-link {
    display: inline-block;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--gray-200);
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: var(--transition);
}

.catalog-group-link:hover {
    letter-spacing: 1px;
}

/* Accent card (Нержавейка) */
.catalog-group--accent {
    background: linear-gradient(135deg, var(--dark) 0%, #1a1a2e 100%);
    border-color: transparent;
    color: var(--white);
}

.catalog-group--accent .catalog-group-title {
    color: var(--white);
}

.catalog-group--accent .catalog-group-header {
    border-bottom-color: rgba(255,255,255,0.15);
}

.catalog-group--accent .catalog-group-icon {
    color: #FF6B6B;
}

.catalog-group--accent .catalog-group-icon svg {
    stroke: rgba(255,255,255,0.85);
}

.catalog-group--accent .catalog-sublist a {
    color: rgba(255,255,255,0.7);
}

.catalog-group--accent .catalog-sublist a:hover {
    color: #FF6B6B;
}

.catalog-group--accent .catalog-sublist li::before {
    color: #FF6B6B;
}

.catalog-group--accent .catalog-group-link {
    color: #FF6B6B;
    border-top-color: rgba(255,255,255,0.15);
}

.catalog-group--accent:hover {
    border-color: #FF6B6B;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.product-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition);
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.product-img {
    width: 100%;
    height: 180px;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.product-img svg {
    width: 80px;
    height: 80px;
    color: var(--gray-300);
    transition: var(--transition);
}

.product-card:hover .product-img svg { color: var(--primary); transform: scale(1.1); }

.product-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    background: var(--primary);
    color: var(--white);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

.product-body {
    padding: 16px;
}

.product-name {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-category {
    font-size: 12px;
    color: var(--gray-400);
    margin-bottom: 12px;
}

.product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.product-price {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary);
}

.product-price span { font-size: 13px; font-weight: 500; color: var(--gray-400); }

.add-to-cart-btn {
    width: 40px;
    height: 40px;
    border: 2px solid var(--primary);
    background: var(--white);
    color: var(--primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    flex-shrink: 0;
}

.add-to-cart-btn:hover {
    background: var(--primary);
    color: var(--white);
    transform: scale(1.05);
}

.add-to-cart-btn svg {
    width: 20px;
    height: 20px;
}

/* --- Services --- */
.services { background: var(--gray-100); }

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.service-card {
    padding: 32px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.service-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), #FF6B6B);
    transform: scaleX(0);
    transition: var(--transition);
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.service-card:hover::after { transform: scaleX(1); }

.service-icon {
    width: 300px;
    height: 300px;
    background: transparent;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    margin-bottom: 20px;
    transition: var(--transition);
}

.service-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: var(--transition);
}

.service-card:hover .service-icon img {
    transform: scale(1.08);
}

.service-card h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

.service-card p {
    font-size: 14px;
    color: var(--gray-500);
    line-height: 1.6;
    margin-bottom: 16px;
}

.service-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.service-link:hover { gap: 8px; }

/* --- Why Us --- */
.why-us-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.why-card {
    padding: 32px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    transition: var(--transition);
    position: relative;
}

.why-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}

.why-number {
    font-size: 48px;
    font-weight: 600;
    color: var(--primary-light);
    line-height: 1;
    margin-bottom: 16px;
    transition: var(--transition);
}

.why-card:hover .why-number { color: var(--primary); }

.why-card h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

.why-card p {
    font-size: 14px;
    color: var(--gray-500);
    line-height: 1.6;
}

/* --- Geography --- */
.geography { background: var(--gray-100); }

.geo-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 32px;
    align-items: center;
}

.geo-map {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 40px;
    border: 1px solid var(--gray-200);
}

.geo-map-placeholder svg { width: 100%; height: auto; }

.geo-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.geo-info-item {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    transition: var(--transition);
}

.geo-info-item:hover {
    border-color: var(--primary);
    transform: translateX(4px);
}

.geo-info-icon { font-size: 28px; flex-shrink: 0; }

.geo-info-item strong { font-size: 15px; display: block; margin-bottom: 4px; }
.geo-info-item p { font-size: 13px; color: var(--gray-500); margin: 0; }

/* --- CTA --- */
.cta { padding: 60px 0; }

.cta-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 48px;
    background: linear-gradient(135deg, var(--dark) 0%, #1a1a2e 100%);
    border-radius: var(--radius-xl);
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.cta-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(201, 79, 8, 0.15) 0%, transparent 60%);
}

.cta-content { position: relative; z-index: 1; }
.cta-content h2 { font-size: 28px; font-weight: 600; margin-bottom: 8px; }
.cta-content p { color: var(--gray-300); font-size: 15px; }

.cta-form {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.cta-input {
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    color: var(--white);
    font-family: var(--font);
    font-size: 14px;
    outline: none;
    transition: var(--transition);
    min-width: 200px;
}

.cta-input::placeholder { color: var(--gray-400); }
.cta-input:focus { border-color: var(--primary); background: rgba(255, 255, 255, 0.15); }

/* --- Footer --- */
.footer {
    background: var(--dark);
    color: var(--gray-300);
    padding: 60px 0 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 40px;
}

.footer-brand p {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--gray-400);
}

.footer-cert {
    display: flex;
    gap: 16px;
    margin-top: 16px;
    font-size: 13px;
    color: var(--primary);
    font-weight: 500;
}

.logo--footer .logo-name { color: var(--white); }

.footer-col h4 {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--white);
    margin-bottom: 20px;
}

.footer-col a {
    display: block;
    font-size: 14px;
    color: var(--gray-400);
    margin-bottom: 10px;
    transition: var(--transition);
}

.footer-col a:hover { color: var(--white); transform: translateX(4px); }

.footer-address, .footer-schedule {
    font-size: 14px;
    color: var(--gray-400);
    margin-top: 8px;
    line-height: 1.5;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-top: 1px solid var(--dark-700);
    font-size: 13px;
    color: var(--gray-500);
}

.footer-bottom a { color: var(--gray-400); }
.footer-bottom a:hover { color: var(--white); }

/* --- Modal --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    padding: 20px;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 40px;
    max-width: 500px;
    width: 100%;
    position: relative;
    transform: translateY(20px) scale(0.95);
    transition: var(--transition);
}

.modal-overlay.active .modal {
    transform: translateY(0) scale(1);
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: none;
    background: var(--gray-100);
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover { background: var(--primary-light); color: var(--primary); }

.modal h3 { font-size: 24px; font-weight: 600; margin-bottom: 8px; }
.modal p { color: var(--gray-500); font-size: 14px; margin-bottom: 24px; }

.form-group { margin-bottom: 12px; }

.form-input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-family: var(--font);
    font-size: 14px;
    transition: var(--transition);
    outline: none;
}

.form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }

.form-textarea { min-height: 80px; resize: vertical; }

.order-summary {
    margin: 16px 0;
    padding: 16px;
    background: var(--gray-100);
    border-radius: var(--radius-md);
    font-size: 13px;
    max-height: 150px;
    overflow-y: auto;
}

/* --- Toast --- */
.toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: var(--dark);
    color: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    z-index: 5000;
    transition: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-size: 14px;
    font-weight: 500;
}

.toast.show { transform: translateX(-50%) translateY(0); }

.toast-icon {
    width: 28px;
    height: 28px;
    background: #22C55E;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
}

/* --- Scroll Animations --- */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: 0.6s ease;
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* --- Services Bento Grid (Homepage) --- */
.svc-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 220px 220px;
    gap: 16px;
}

.svc-bento__card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(135deg, #222322 0%, #1B1C1B 100%);
    border: 1px solid rgba(255,255,255,0.06);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    height: 220px;
    max-height: 220px;
}

.svc-bento__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.25);
    border-color: rgba(201, 79, 8, 0.3);
}

.svc-bento__img {
    position: absolute;
    right: -10%;
    bottom: -5%;
    width: 70%;
    height: 90%;
    max-height: 200px;
    object-fit: contain;
    opacity: 0.2;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    filter: brightness(1.5) contrast(1.2);
    pointer-events: none;
}

.svc-bento__card:hover .svc-bento__img {
    opacity: 0.35;
    transform: scale(1.05) translateX(-3%);
}

.svc-bento__body {
    position: relative;
    z-index: 2;
    padding: 24px;
    color: #fff;
}

.svc-bento__title {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 6px;
}

.svc-bento__desc {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.svc-bento__arrow {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    background: rgba(201, 79, 8, 0.2);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    opacity: 0;
    transform: translateX(-8px);
    transition: all 0.3s ease;
}

.svc-bento__card:hover .svc-bento__arrow {
    opacity: 1;
    transform: translateX(0);
}

.svc-bento__arrow svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
    stroke-width: 2;
    fill: none;
}

/* Large card spans 2 columns */
.svc-bento__card--lg {
    grid-column: span 2;
}

.svc-bento__card--lg .svc-bento__img {
    width: 50%;
    right: -5%;
    opacity: 0.25;
}

.svc-bento__card--lg .svc-bento__title {
    font-size: 1.35rem;
}

.svc-bento__card--lg .svc-bento__desc {
    -webkit-line-clamp: 3;
}

/* Color accent per card */
.svc-bento__card:nth-child(1) { background: linear-gradient(135deg, #1E3A5F 0%, #1B1C1B 100%); }
.svc-bento__card:nth-child(2) { background: linear-gradient(135deg, #2D1B4E 0%, #1A1033 100%); }
.svc-bento__card:nth-child(3) { background: linear-gradient(135deg, #3E2723 0%, #1A1210 100%); }
.svc-bento__card:nth-child(4) { background: linear-gradient(135deg, #1B3B2F 0%, #0D1F18 100%); }
.svc-bento__card:nth-child(5) { background: linear-gradient(135deg, #222322 0%, #1B1C1B 100%); }
.svc-bento__card:nth-child(6) { background: linear-gradient(135deg, #3B1E1E 0%, #1A0F0F 100%); }
.svc-bento__card:nth-child(7) { background: linear-gradient(135deg, #1E2D3B 0%, #0F1A24 100%); }

/* Hub link card */
.svc-bento__hub {
    background: linear-gradient(135deg, #1B1C1B 0%, #222322 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    border-radius: 20px;
    padding: 24px;
    transition: all 0.4s ease;
    border: 1px solid rgba(201, 79, 8, 0.3);
}

.svc-bento__hub:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(201, 79, 8, 0.2);
    border-color: rgba(201, 79, 8, 0.6);
}

.svc-bento__hub-icon {
    width: 56px;
    height: 56px;
    background: rgba(201, 79, 8, 0.15);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.svc-bento__hub-icon svg {
    width: 28px;
    height: 28px;
    stroke: #C94F08;
    fill: none;
    stroke-width: 1.5;
}

.svc-bento__hub-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 6px;
}

.svc-bento__hub-desc {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.4;
}

/* --- Stats Bar (Homepage) --- */
.stats-bar {
    background: linear-gradient(135deg, #1B1C1B 0%, #222322 100%);
    padding: 48px 0;
    border-top: 1px solid rgba(201, 79, 8, 0.15);
    border-bottom: 1px solid rgba(201, 79, 8, 0.15);
}

.stats-bar__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    text-align: center;
}

.stats-bar__item {
    position: relative;
}

.stats-bar__item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 15%;
    height: 70%;
    width: 1px;
    background: rgba(201, 79, 8, 0.2);
}

.stats-bar__number {
    font-size: 2.2rem;
    font-weight: 600;
    color: #C94F08;
    line-height: 1;
    margin-bottom: 8px;
}

.stats-bar__label {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.4;
}

/* --- Popular Products Static (Homepage) --- */
.popular-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.popular-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    text-decoration: none;
    display: block;
}

.popular-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.1);
    border-color: var(--primary);
}

.popular-card__img {
    height: 160px;
    max-height: 160px;
    min-height: 160px;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.popular-card__img img {
    max-width: 75%;
    max-height: 120px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.4s ease;
}

.popular-card:hover .popular-card__img img {
    transform: scale(1.1);
}

.popular-card__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    background: var(--primary);
    color: #fff;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

.popular-card__badge--green {
    background: #16A34A;
}

.popular-card__badge--orange {
    background: #EA580C;
}

.popular-card__body {
    padding: 16px;
}

.popular-card__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}

.popular-card__category {
    font-size: 12px;
    color: var(--gray-400);
    margin-bottom: 10px;
}

.popular-card__price {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary);
}

.popular-card__price span {
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-400);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .svc-bento { grid-template-columns: repeat(2, 1fr); }
    .svc-bento__card--lg { grid-column: span 2; }
    .popular-grid { grid-template-columns: repeat(3, 1fr); }
    .stats-bar__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .stats-bar__item:nth-child(2)::after { display: none; }
    .categories-grid { grid-template-columns: repeat(3, 1fr); }
    .catalog-grid { grid-template-columns: repeat(2, 1fr); }
    .products-grid { grid-template-columns: repeat(3, 1fr); }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .why-us-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .geo-content { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .header-top { display: none; }
    .nav { display: none; }
    .nav.active {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--white);
        padding: 16px;
        box-shadow: var(--shadow-lg);
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    }
    .burger { display: flex; }
    .header-phone .phone-number,
    .header-phone__callback { display: none; }
    .header-phone__call { padding: 6px; }
    .header-phone__call svg { width: 24px; height: 24px; }

    .hero { padding-top: 80px; }
    .hero-title { font-size: 32px; }
    .hero-stats { flex-wrap: wrap; gap: 20px; }
    .hero-stat-divider { display: none; }

    .section { padding: 60px 0; }
    .categories-grid { grid-template-columns: repeat(2, 1fr); }
    .catalog-grid { grid-template-columns: 1fr; }
    .products-grid { grid-template-columns: repeat(2, 1fr); }
    .services-grid { grid-template-columns: 1fr; }
    .why-us-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 24px; }

    .svc-bento { grid-template-columns: 1fr 1fr; }
    .svc-bento__card--lg { grid-column: span 2; }
    .popular-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-bar__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .stats-bar__item::after { display: none; }

    .cta-card { flex-direction: column; padding: 32px; }
    .cta-form { width: 100%; }
    .cta-input { width: 100%; min-width: auto; }
}

@media (max-width: 480px) {
    .categories-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .catalog-grid { grid-template-columns: 1fr; gap: 12px; }
    .products-grid { grid-template-columns: 1fr; }
    .popular-grid { grid-template-columns: 1fr; }
    .svc-bento { grid-template-columns: 1fr; }
    .svc-bento__card--lg { grid-column: span 1; }
    .stats-bar__grid { grid-template-columns: 1fr 1fr; }
    .category-card { padding: 20px 12px; }
    .hero-btns { flex-direction: column; }
    .hero-btns .btn { width: 100%; }
}

/* --- Why Us Bento Box Section --- */
.why-us-bento {
    background: var(--gray-100);
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(180px, auto);
    gap: 24px;
}

.bento-card {
    position: relative;
    border-radius: 28px;
    padding: 32px;
    overflow: hidden;
    background: var(--white);
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.bento-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

.bento-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.bento-icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    transition: transform 0.3s;
}

.bento-card:hover .bento-icon-wrap {
    transform: scale(1.05);
}

.bento-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 12px;
    line-height: 1.3;
}

.bento-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0;
    flex-grow: 1;
}

/* Изменения для разных карточек */
.bento-large {
    grid-column: span 2;
    grid-row: span 2;
    padding: 48px;
}

.bento-large h3 {
    font-size: 1.75rem;
    margin-bottom: 16px;
}

.bento-large p {
    font-size: 1.05rem;
    margin-bottom: 24px;
    flex-grow: 0;
}

.bento-list {
    list-style: none;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bento-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
    font-weight: 500;
}

.bento-list li span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    font-size: 12px;
}

.bento-wide {
    grid-column: span 2;
    grid-row: span 1;
}

.bento-header-inline {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    height: 100%;
}

.bento-header-inline .bento-icon-wrap {
    margin-bottom: 0;
    flex-shrink: 0;
}

.bento-header-inline div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.bento-bg-icon {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 240px;
    height: 240px;
    opacity: 0.05;
    z-index: 1;
    pointer-events: none;
    transform: rotate(-15deg);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.bento-card:hover .bento-bg-icon {
    transform: rotate(0) scale(1.1);
}

/* Цветовые схемы для карточек */
.bento-dark {
    background: var(--dark);
    color: var(--white);
}

.bento-dark .bento-icon-wrap {
    background: var(--primary);
    color: var(--white);
}

.bento-dark p {
    color: var(--gray-300);
}

.bento-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(201, 79, 8, 0.15), transparent 40%);
    z-index: 1;
}

.bento-accent {
    background: var(--primary);
    color: var(--white);
}

.bento-accent .bento-icon-wrap {
    background: rgba(255, 255, 255, 0.2);
    color: var(--white);
}

.bento-accent p {
    color: rgba(255, 255, 255, 0.9);
}

.bento-white {
    background: var(--white);
    color: var(--dark);
}

.bento-white .bento-icon-wrap {
    background: var(--primary-light);
    color: var(--primary);
}

.bento-white p, .bento-wide p {
    color: var(--gray-500);
}

.bento-wide {
    background: linear-gradient(to right, #ffffff, #f8f9fa);
    border: 1px solid var(--gray-200);
    box-shadow: none;
}

.bento-wide .bento-icon-wrap {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--white);
    box-shadow: 0 4px 12px rgba(201, 79, 8, 0.2);
}

/* Адаптив для Bento Box */
@media (max-width: 1024px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .bento-large, .bento-wide {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .bento-grid {
        grid-template-columns: 1fr;
    }
    .bento-large, .bento-wide {
        grid-column: span 1;
    }
    .bento-large {
        padding: 32px;
    }
    .bento-header-inline {
        flex-direction: column;
        gap: 16px;
    }
    .bento-wide .bento-icon-wrap {
        margin-bottom: 0;
    }
}

/* --- Messenger Floating Buttons (Telegram и почта) --- */
.messenger-buttons {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999 !important;
}

.msg-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    transition: var(--transition);
}

.msg-btn:hover {
    transform: scale(1.12);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35);
}

.msg-telegram { background: #229ED9; }
.msg-email { background: #6366F1; }


/* === Quick Order Form (shared across pages) === */
.quick-order {
    display: flex;
    flex-direction: column;
    padding: 2rem 2.5rem;
    background: #F4F4F2;
    border: 1px solid #E6E5E2;
    border-radius: 16px;
    margin-bottom: 2rem;
    color: #222322;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.quick-order__header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 1.25rem;
}

/* Иконка вместо эмодзи: эмодзи выпадали из иконочной системы сайта
   и на части систем рендерились «тофу»-квадратом */
.quick-order__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--primary-light);
    color: var(--primary);
}

.quick-order__icon svg { width: 22px; height: 22px; }

.quick-order__heading { min-width: 0; }

.quick-order__title {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 4px;
    color: #222322;
    letter-spacing: -0.01em;
}

.quick-order__desc {
    font-size: 0.9rem;
    color: #64645E;
    margin: 0;
    line-height: 1.4;
}

.quick-order__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quick-order__row {
    display: flex;
    gap: 10px;
}

.quick-order__row--3col {
    display: flex;
    gap: 10px;
}

.quick-order__field {
    flex: 1;
}

/* Переключатель канала связи в форме заявки стоит отдельной строкой над
   полями и не должен растягиваться на всю ширину, как поля ввода.
   Отступ снизу не задаём: у формы свой gap, и margin давал двойной зазор —
   переключатель отрывался от полей, к которым относится. */
.quick-order__field--channel {
    flex: 0 0 auto;
}

.quick-order__input {
    width: 100%;
    padding: 11px 16px;
    border: 1.5px solid #D0CFCB;
    border-radius: 10px;
    background: #F6F6F5;
    color: #222322;
    font-size: 0.9rem;
    font-family: var(--font);
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.quick-order__input::placeholder {
    color: #74746E;
}

.quick-order__input:focus {
    outline: none;
    border-color: #C94F08;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(201, 79, 8, 0.14);
}

.quick-order__textarea {
    width: 100%;
    padding: 11px 16px;
    border: 1.5px solid #D0CFCB;
    border-radius: 10px;
    background: #F6F6F5;
    color: #74746E;
    font-size: 0.85rem;
    font-family: var(--font);
    resize: vertical;
    min-height: 50px;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    line-height: 1.4;
}

.quick-order__textarea.has-content {
    color: #222322;
}

.quick-order__textarea:focus {
    outline: none;
    border-color: #C94F08;
    background: #fff;
    color: #222322;
    box-shadow: 0 0 0 3px rgba(201, 79, 8, 0.14);
}

/* File upload zone */
.quick-order__file-input {
    display: none;
}

.quick-order__upload {
    border: 2px dashed #D0CFCB;
    border-radius: 10px;
    padding: 0.7rem 1rem;
    transition: border-color 0.2s, background 0.2s;
    cursor: pointer;
}

.quick-order__upload:hover,
.quick-order__upload.drag-over {
    border-color: #C94F08;
    background: #e8f1ff;
}

.quick-order__upload--inline .quick-order__upload-content--inline {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.quick-order__upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.quick-order__upload-content svg {
    color: #74746E;
    flex-shrink: 0;
}

.quick-order__upload-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #4A4B46;
}

.quick-order__upload-formats {
    font-size: 0.75rem;
    color: #74746E;
    letter-spacing: 0.03em;
}

/* File list */
.quick-order__file-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.quick-order__file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: #F4F4F2;
    border-radius: 8px;
    font-size: 0.82rem;
}

.quick-order__file-name {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #33342F;
}

.quick-order__file-size {
    color: #74746E;
    font-size: 0.78rem;
}

.quick-order__file-remove {
    background: none;
    border: none;
    color: #74746E;
    cursor: pointer;
    font-size: 1rem;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.2s;
}

.quick-order__file-remove:hover {
    color: #C94F08;
    background: #e8f1ff;
}

.quick-order__consent,
.quick-order__send-copy {
    margin: 8px 0;
}

.quick-order__checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.82rem;
    color: #4B5563;
    cursor: pointer;
    line-height: 1.4;
}

.quick-order__checkbox-label input[type="checkbox"] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: #C94F08;
    cursor: pointer;
}

.quick-order__checkbox-label a {
    color: #C94F08;
    text-decoration: underline;
}

.quick-order__checkbox-label a:hover {
    color: #1767d6;
}

.quick-order__btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 24px !important;
    font-size: 1rem;
    font-weight: 600;
}

@media (max-width: 600px) {
    .quick-order {
        padding: 1.2rem 1rem;
    }
    .quick-order__row,
    .quick-order__row--3col {
        flex-direction: column;
    }
}

/* Подтверждение добавления: кнопка корзины в шапке коротко пульсирует */
.cart-btn--pulse {
    animation: cartBtnPulse 0.55s ease-out 2;
    border-color: var(--primary);
    color: var(--primary);
}
@keyframes cartBtnPulse {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(201, 79, 8, 0.45); }
    45%  { transform: scale(1.12); box-shadow: 0 0 0 10px rgba(201, 79, 8, 0); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(201, 79, 8, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .cart-btn--pulse { animation: none; }
}

/* ==========================================================================
   ГЛАВНАЯ СТРАНИЦА — премиальный редизайн (2026-08)
   Блок самодостаточный и лежит в конце файла: правила выше по файлу
   (включая старые @media) он перекрывает намеренно, поэтому собственный
   адаптив объявлен в КОНЦЕ этого блока.
   ========================================================================== */

/* --- Hero --- */
.hero--home {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 190px 0 56px;
    background: var(--dark);
    color: var(--white);
    overflow: hidden;
}

.hero--home .hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 50%;
    transform: scale(1.02);
    /* Кадр со склада слегка «поднимаем» — под тёмной шторкой он иначе сереет */
    filter: contrast(1.1) saturate(1.08) brightness(1.04);
}

/* Затемнение слева направо — под текст; сверху — под прозрачную шапку */
.hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(8, 13, 25, 0.95) 0%, rgba(8, 13, 25, 0.86) 32%, rgba(8, 13, 25, 0.46) 62%, rgba(8, 13, 25, 0.24) 100%),
        linear-gradient(180deg, rgba(8, 13, 25, 0.72) 0%, rgba(8, 13, 25, 0.08) 30%, rgba(8, 13, 25, 0.42) 100%);
}

.hero__glow {
    position: absolute;
    top: -30%;
    left: -10%;
    width: 70%;
    height: 130%;
    background: radial-gradient(ellipse at center, rgba(201, 79, 8, 0.22) 0%, transparent 62%);
    pointer-events: none;
}

.hero--home .hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hero__body {
    max-width: 820px;
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px 8px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 100px;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(8px);
    margin-bottom: 26px;
}

.hero__eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22C55E;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
}

.hero__title {
    font-family: var(--font-heading);
    font-size: clamp(34px, 4.4vw, 60px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin-bottom: 22px;
}

.hero__title em {
    font-style: normal;
    background: linear-gradient(120deg, #6BA6FF 0%, #C94F08 60%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero__lead {
    font-size: 18px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.78);
    max-width: 620px;
    margin-bottom: 32px;
}

/* Поиск в hero */
.hero-search {
    /* backdrop-filter создаёт свой контекст наложения, поэтому поднимаем сам блок:
       иначе выпадашка уезжает под .hero__stats (тоже с backdrop-filter, ниже по DOM) */
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 660px;
    padding: 8px 8px 8px 18px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    backdrop-filter: blur(14px);
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.hero-search:focus-within {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(201, 79, 8, 0.7);
    box-shadow: 0 0 0 4px rgba(201, 79, 8, 0.16);
}

.hero-search__ico {
    display: flex;
    color: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
}

.hero-search__input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--white);
    font-family: var(--font);
    font-size: 16px;
    padding: 12px 4px;
}

.hero-search__input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.hero-search__btn {
    flex-shrink: 0;
    border: 0;
    cursor: pointer;
    padding: 13px 30px;
    border-radius: 100px;
    background: var(--primary);
    color: var(--white);
    font-family: var(--font);
    font-size: 15px;
    font-weight: 600;
    transition: var(--transition);
}

.hero-search__btn:hover {
    background: var(--primary-dark);
    box-shadow: 0 8px 24px rgba(201, 79, 8, 0.4);
}

.hero-search__results {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    z-index: 40;
    max-height: 380px;
    overflow-y: auto;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(8, 13, 25, 0.35);
    padding: 6px;
}

.hero-search--open .hero-search__results { display: block; }

.hero-search__row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 14px;
    border: 0;
    background: transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    font-family: var(--font);
    color: var(--dark);
    transition: background 0.15s;
}

.hero-search__row:hover,
.hero-search__row.is-active {
    background: var(--primary-light);
}

.hero-search__row-ico {
    display: flex;
    color: var(--primary);
    flex-shrink: 0;
}

.hero-search__row-body { flex: 1; min-width: 0; }

.hero-search__row-name {
    display: block;
    font-size: 14.5px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-search__row-name mark {
    background: rgba(201, 79, 8, 0.16);
    color: inherit;
    border-radius: 3px;
    padding: 0 1px;
}

.hero-search__row-sub {
    display: block;
    font-size: 12px;
    color: var(--gray-500);
    margin-top: 1px;
}

.hero-search__row-price {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}

.hero-search__row-price span {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--gray-500);
}

.hero-search__msg {
    padding: 16px;
    text-align: center;
    font-size: 14px;
    color: var(--gray-500);
}

/* Быстрые ссылки */
.hero__chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.hero__chips-label {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.55);
    margin-right: 2px;
}

.hero__chip {
    padding: 7px 15px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    font-size: 13.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}

.hero__chip:hover {
    background: rgba(201, 79, 8, 0.9);
    border-color: transparent;
    color: var(--white);
    transform: translateY(-1px);
}

.hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.hero__cta .btn { cursor: pointer; }

/* Полоса цифр */
.hero__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-top: 58px;
    padding: 26px 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(14px);
}

.hero__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.hero__stat:last-child { border-right: 0; }

.hero__stat-val {
    display: flex;
    align-items: baseline;
    font-family: var(--font-heading);
    font-size: clamp(28px, 2.6vw, 38px);
    font-weight: 600;
    line-height: 1;
    color: var(--white);
    font-variant-numeric: tabular-nums;
}

.hero__stat-plus,
.hero__stat-unit {
    font-size: 0.62em;
    color: var(--primary);
    margin-left: 3px;
}

.hero__stat-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 9px;
    line-height: 1.35;
}

/* --- Полоса доверия --- */
.trust-strip {
    background: var(--white);
    border-bottom: 1px solid var(--gray-200);
    padding: 44px 0;
}

.trust-strip__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.trust-strip__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-right: 20px;
    border-right: 1px solid var(--gray-200);
}

.trust-strip__item:last-child { border-right: 0; }

.trust-strip__ico {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--primary-light);
    color: var(--primary);
}

.trust-strip__ico svg { width: 22px; height: 22px; }

.trust-strip__item h3 {
    font-family: var(--font);
    font-size: 15px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 4px;
    line-height: 1.3;
}

.trust-strip__item p {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--gray-500);
}

/* --- Заголовки секций --- */
.section-header--split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    text-align: left;
}

.section-header--split .section-desc { margin: 0; max-width: 640px; }
.section-header--center { text-align: center; }
.section-header--center .section-desc { margin-left: auto; margin-right: auto; }
.section-header .section-desc a { color: var(--primary); font-weight: 600; }
.section-header .section-desc a:hover { text-decoration: underline; }

.section-header__link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border: 1px solid var(--gray-200);
    border-radius: 100px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--dark);
    white-space: nowrap;
}

.section-header__link:hover {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--white);
    box-shadow: 0 8px 20px rgba(201, 79, 8, 0.25);
}

.section-tag--light {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
}

/* --- Каталог --- */
.section--catalog { background: var(--white); }

.cat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.cat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 24px 22px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 20px;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.cat-card:hover {
    transform: translateY(-4px);
    border-color: rgba(201, 79, 8, 0.4);
    box-shadow: 0 18px 44px rgba(27, 28, 27, 0.1);
}

/* Кликабельна вся карточка; ссылки списка лежат выше по z-index */
.cat-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

/* Клик по пустому месту карточки уводит в категорию: содержимое пропускает
   курсор насквозь на .cat-card__overlay, лежащий ниже по z-index */
.cat-card > *:not(.cat-card__overlay) {
    position: relative;
    z-index: 2;
    pointer-events: none;
}

/* …кроме списка подразделов — он остаётся кликабельным.
   Селектор с потомком: у правила выше специфичность (0,2,0),
   и одного .cat-card__list (0,1,0) не хватает, чтобы его перебить. */
.cat-card > .cat-card__list { pointer-events: auto; }

.cat-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.cat-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 18px;
    background: var(--gray-100);
    transition: background var(--transition);
}

.cat-card:hover .cat-card__icon { background: var(--primary-light); }

.cat-card__icon img {
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.cat-card__price {
    font-size: 12.5px;
    color: var(--gray-500);
    background: var(--gray-100);
    border-radius: 100px;
    padding: 6px 12px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.cat-card__price b {
    font-weight: 700;
    color: var(--dark);
    font-size: 13.5px;
}

.cat-card__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}

.cat-card__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 18px;
    /* без flex-grow: список обнимает содержимое, поэтому кнопка, привязанная
       к его нижнему краю, всегда стоит на строке последнего пункта.
       Вниз карточку растягивает подвал своим margin-top: auto. */
}

.cat-card__list a {
    display: block;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--gray-500);
    padding-left: 13px;
    position: relative;
}

.cat-card__list a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gray-300);
    transition: var(--transition);
}

.cat-card__list a:hover { color: var(--primary); }
.cat-card__list a:hover::before { background: var(--primary); }

/* нижняя строка карточки: «Все позиции» слева, кнопка раскрытия справа.
   Кнопка живёт здесь, а не отдельной строкой, — иначе карточки без неё
   оказывались короче соседних и в сетке появлялись пустоты. */
.cat-card__foot {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--gray-200);
}

.cat-card__more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
}

.cat-card__more svg { transition: transform var(--transition); }
.cat-card:hover .cat-card__more svg { transform: translateX(4px); }

/* --- Услуги --- */
.section--services { background: var(--gray-100); }

.svc-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.svc-card {
    display: flex;
    flex-direction: column;
    padding: 24px 22px;
    background: var(--white);
    border: 1px solid transparent;
    border-radius: 18px;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.svc-card:hover {
    transform: translateY(-3px);
    border-color: rgba(201, 79, 8, 0.35);
    box-shadow: 0 14px 34px rgba(27, 28, 27, 0.08);
}

.svc-card__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--primary-light);
    color: var(--primary);
    margin-bottom: 16px;
    transition: var(--transition);
}

.svc-card__ico svg { width: 24px; height: 24px; }

.svc-card:hover .svc-card__ico {
    background: var(--primary);
    color: var(--white);
}

.svc-card h3 {
    font-family: var(--font);
    font-size: 15.5px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 6px;
    line-height: 1.3;
}

.svc-card p {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--gray-500);
}

.svc-card--all {
    background: var(--dark);
    border-color: var(--dark);
}

.svc-card--all h3 { color: var(--white); }
.svc-card--all p { color: var(--gray-400); }

.svc-card--all .svc-card__ico {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
}

.svc-card--all:hover .svc-card__ico { background: var(--primary); }

/* --- Как мы работаем --- */
.section--process {
    background: var(--dark);
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.section--process::before {
    content: "";
    position: absolute;
    top: -40%;
    right: -10%;
    width: 60%;
    height: 160%;
    background: radial-gradient(ellipse at center, rgba(201, 79, 8, 0.18) 0%, transparent 62%);
    pointer-events: none;
}

.section--process .container { position: relative; z-index: 2; }
.section--process .section-title { color: var(--white); }
.section--process .section-desc { color: rgba(255, 255, 255, 0.65); }

.process-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    counter-reset: step;
}

.process-step {
    position: relative;
    padding: 30px 26px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    transition: var(--transition);
}

.process-step:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(201, 79, 8, 0.5);
    transform: translateY(-3px);
}

/* Соединительная линия между шагами */
.process-step::after {
    content: "";
    position: absolute;
    top: 50px;
    right: -12px;
    width: 12px;
    height: 1px;
    background: rgba(255, 255, 255, 0.16);
}

.process-step:last-child::after { display: none; }

.process-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 18px;
    box-shadow: 0 8px 20px rgba(201, 79, 8, 0.3);
}

.process-step h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 9px;
}

.process-step p {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.65);
}

.process-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 32px;
    padding: 26px 32px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
}

.process-cta p {
    font-size: 17px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

.process-cta .btn { cursor: pointer; }

/* --- Bento: фото-карточка --- */
.bento-photo {
    position: relative;
    padding: 0;
    overflow: hidden;
    background: var(--dark);
}

.bento-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.bento-photo:hover img { transform: scale(1.06); }

.bento-photo__overlay {
    position: relative;
    z-index: 2;
    margin-top: auto;
    padding: 90px 28px 28px;
    background: linear-gradient(180deg, transparent 0%, rgba(8, 13, 25, 0.55) 22%, rgba(8, 13, 25, 0.9) 52%, rgba(8, 13, 25, 0.97) 100%);
}

/* Иконка в широкой bento-карточке не должна растягиваться по высоте текста */
.bento-header-inline .bento-icon-wrap {
    flex-shrink: 0;
    align-self: flex-start;
    width: 64px;
    height: 64px;
}

.bento-photo__overlay h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 8px;
}

.bento-photo__overlay p {
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
}

/* --- Отрасли --- */
.industries {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 32px;
    padding: 24px 28px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 20px;
}

.industries__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
}

.industries__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.industries__list li {
    padding: 7px 15px;
    border-radius: 100px;
    background: var(--gray-100);
    font-size: 13.5px;
    color: var(--gray-500);
}

/* --- География --- */
.geography { background: var(--gray-100); }

.geo-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 24px;
    padding: 32px;
    margin-bottom: 24px;
}

.geo-panel__map { min-width: 0; }

#d3-map-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 420px;
}

#map-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--gray-500);
}

#map-loader svg {
    width: 36px;
    height: 36px;
    animation: geoSpin 2s linear infinite;
    transform-origin: center;
}

.geo-panel__side {
    display: flex;
    flex-direction: column;
}

.geo-panel__title {
    font-size: 17px;
    font-weight: 600;
    color: var(--dark);
    line-height: 1.3;
    margin-bottom: 18px;
}

.geo-tk {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.geo-tk__item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 14px;
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    background: var(--gray-100);
    transition: var(--transition);
}

.geo-tk__item:hover {
    background: var(--white);
    border-color: rgba(201, 79, 8, 0.35);
    box-shadow: 0 8px 20px rgba(27, 28, 27, 0.08);
    transform: translateX(3px);
}

.geo-tk__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 5px;
    border-radius: 11px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

.geo-tk__logo img { width: 100%; height: 100%; object-fit: contain; }

.geo-tk__logo--pec,
.geo-tk__logo--kit {
    border: 0;
    color: var(--white);
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1px;
}

.geo-tk__logo--pec { background: linear-gradient(135deg, #1565C0, #0D47A1); }
.geo-tk__logo--kit { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }

.geo-tk__body { display: flex; flex-direction: column; min-width: 0; }
.geo-tk__body b { font-size: 14px; font-weight: 600; color: var(--dark); }
.geo-tk__body i { font-style: normal; font-size: 12px; color: var(--gray-400); }

.geo-panel__note {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--gray-400);
    margin-top: 16px;
}

.geo-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.geo-card {
    padding: 28px 26px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 20px;
    transition: var(--transition);
}

.geo-card:hover {
    border-color: rgba(201, 79, 8, 0.35);
    box-shadow: 0 14px 34px rgba(27, 28, 27, 0.08);
    transform: translateY(-3px);
}

.geo-card__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: var(--primary-light);
    color: var(--primary);
    margin-bottom: 16px;
}

.geo-card__ico svg { width: 26px; height: 26px; }

.geo-card h3 {
    font-family: var(--font);
    font-size: 16px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 8px;
}

.geo-card p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--gray-500);
}

/* --- FAQ --- */
.section--faq { background: var(--gray-100); }

.faq-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: 40px;
    /* stretch, а не start: колонки выравниваются по высоте, и у sticky-карточки
       появляется ход внутри своей колонки, когда аккордеон раскрыт */
    align-items: stretch;
}

/* Карточка поддержки слева — визуальный якорь секции и точка входа в заявку */
.faq-aside__inner {
    position: sticky;
    top: calc(var(--header-h, 85px) + 20px);
    display: flex;
    flex-direction: column;
    padding: 36px 32px;
    background: var(--dark);
    color: var(--white);
    border-radius: 26px;
    overflow: hidden;
}

.faq-aside__inner::before {
    content: "";
    position: absolute;
    top: -40%;
    left: -25%;
    width: 90%;
    height: 150%;
    background: radial-gradient(ellipse at center, rgba(201, 79, 8, 0.26) 0%, transparent 62%);
    pointer-events: none;
}

.faq-aside__inner > * { position: relative; z-index: 2; }

/* section-tag внутри flex-колонки иначе растягивается на всю ширину карточки */
.faq-aside__inner > .section-tag,
.order-block__aside > .section-tag { align-self: flex-start; }

.faq-aside__title {
    font-size: 27px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 16px 0 12px;
}

.faq-aside__text {
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 24px;
}

.faq-aside__contacts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 22px;
}

.faq-aside__contact {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition);
}

.faq-aside__contact:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(201, 79, 8, 0.55);
    transform: translateX(3px);
}

.faq-aside__contact-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(201, 79, 8, 0.2);
    color: #6BA6FF;
}

.faq-aside__contact-ico svg { width: 19px; height: 19px; }

.faq-aside__contact-body { display: flex; flex-direction: column; min-width: 0; }

.faq-aside__contact-body b {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--white);
}

.faq-aside__contact-body i {
    font-style: normal;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 1px;
}

.faq-aside__btn {
    justify-content: center;
    width: 100%;
    cursor: pointer;
}

/* .faq-list есть ещё на ~30 страницах категорий (со своими стилями в catalog.css),
   поэтому правило скоупим строго на главную */
.section--faq .faq-list {
    display: flex;
    flex-direction: column;
    /* gap работает как минимум: если список короче карточки слева, space-between
       добирает разницу зазорами, и низ колонок сходится сам */
    justify-content: space-between;
    gap: 10px;
    height: 100%;
}

.section--faq .faq-item {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.section--faq .faq-item:hover { border-color: var(--gray-300); }

.section--faq .faq-item[open] {
    border-color: rgba(201, 79, 8, 0.35);
    box-shadow: 0 10px 30px rgba(27, 28, 27, 0.06);
}

.section--faq .faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 19px 24px;
    cursor: pointer;
    font-family: var(--font);
    font-size: 15.5px;
    font-weight: 600;
    color: var(--dark);
    list-style: none;
}

.section--faq .faq-item summary::-webkit-details-marker { display: none; }
.section--faq .faq-item summary::marker { content: ""; }

.faq-item__sign {
    position: relative;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--gray-100);
    transition: var(--transition);
}

.faq-item__sign::before,
.faq-item__sign::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 1.8px;
    border-radius: 2px;
    background: var(--primary);
    transform: translate(-50%, -50%);
    transition: var(--transition);
}

.faq-item__sign::after { transform: translate(-50%, -50%) rotate(90deg); }

.section--faq .faq-item[open] .faq-item__sign { background: var(--primary); }
.section--faq .faq-item[open] .faq-item__sign::before,
.section--faq .faq-item[open] .faq-item__sign::after { background: var(--white); }
.section--faq .faq-item[open] .faq-item__sign::after { transform: translate(-50%, -50%) rotate(0deg); }

.faq-item__body {
    padding: 0 24px 20px;
    font-size: 14.5px;
    line-height: 1.72;
    color: var(--gray-500);
}

.faq-item__body a { color: var(--primary); font-weight: 500; }
.faq-item__body a:hover { text-decoration: underline; }

/* --- Блок «Заявка»: тёмная колонка с оффером + форма быстрого заказа --- */
.section--order { background: var(--gray-100); }

.order-block {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(27, 28, 27, 0.07);
}

.order-block__aside {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 44px 40px;
    background: var(--dark);
    color: var(--white);
    overflow: hidden;
}

.order-block__aside::before {
    content: "";
    position: absolute;
    top: -35%;
    right: -30%;
    width: 90%;
    height: 150%;
    background: radial-gradient(ellipse at center, rgba(201, 79, 8, 0.28) 0%, transparent 62%);
    pointer-events: none;
}

.order-block__aside > * { position: relative; z-index: 2; }

.order-block__title {
    font-size: 27px;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -0.01em;
    margin: 16px 0 14px;
}

.order-block__text {
    font-size: 14.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.66);
    margin-bottom: 26px;
}

.order-block__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
}

.order-block__list li {
    position: relative;
    padding-left: 30px;
    font-size: 14.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.9);
}

.order-block__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(201, 79, 8, 0.22);
    /* галочка внутри кружка */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236BA6FF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 12px 12px;
    background-position: center;
    background-repeat: no-repeat;
}

.order-block__contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.order-block__contact {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 600;
    color: var(--white);
}

.order-block__contact svg { width: 18px; height: 18px; color: var(--primary); }
.order-block__contact:hover { color: #6BA6FF; }

.order-block__form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 36px 40px;
    min-width: 0;
}

/* Внутри блока карточку рисует .order-block__form — у самой формы фон снимаем */
.order-block__form .quick-order {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    padding: 0;
}

/* --- О компании / SEO-текст --- */
.about-co { background: var(--white); }

/* Заголовок нижнего SEO-блока не должен спорить с заголовками витрин выше */
.about-co .section-title {
    font-size: clamp(22px, 2.2vw, 30px);
    max-width: 720px;
}

.about-co__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 2.1fr);
    gap: 48px;
    align-items: start;
}

/* Утверждение о компании — ведущий элемент колонки, поэтому крупнее текста тем */
.about-co__lead {
    font-size: 17px;
    line-height: 1.65;
    color: var(--dark);
    padding-bottom: 24px;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 4px;
}

/* Справочные данные: строки-разделители вместо залитой плашки.
   Плашка делала наименее важный блок самым тяжёлым объектом секции. */
.about-co__facts {
    display: flex;
    flex-direction: column;
}

.about-co__fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid var(--gray-200);
}

.about-co__fact:last-child { border-bottom: 0; }

.about-co__fact dt {
    font-size: 13.5px;
    color: var(--gray-500);
    white-space: nowrap;
}

.about-co__fact dd {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--dark);
    text-align: right;
}

/* Колонки по содержимому, а не поровну: ассортимент вдвое длиннее соседей
   и при равных долях давал рваный низ секции */
.about-co__cols {
    display: grid;
    grid-template-columns: 1.45fr 1fr 1fr;
    gap: 36px;
}

.about-co__col {
    padding-top: 16px;
    border-top: 2px solid var(--gray-200);
    transition: border-color var(--transition);
}

.about-co__col:hover { border-top-color: var(--primary); }

/* Заголовок темы должен находиться прищуренным взглядом — отсюда вес и размер */
.about-co__col h3 {
    font-family: var(--font);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--dark);
    margin-bottom: 12px;
}

.about-co__col p {
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--gray-500);
}

.about-co__col a { color: var(--primary); }
.about-co__col a:hover { text-decoration: underline; }

/* ==========================================================================
   Адаптив главной — только в конце блока, иначе десктопные правила выше
   перекроют медиазапросы (равная специфичность).
   ========================================================================== */

@media (max-width: 1200px) {
    .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .geo-panel { grid-template-columns: minmax(0, 1fr) 280px; }
}

@media (max-width: 1024px) {
    .hero--home { min-height: auto; padding: 150px 0 48px; }
    .hero__lead { font-size: 17px; }
    .hero__stats { grid-template-columns: repeat(2, 1fr); gap: 22px 4px; margin-top: 44px; }
    .hero__stat:nth-child(2) { border-right: 0; }

    .trust-strip__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .trust-strip__item:nth-child(2) { border-right: 0; }

    .section-header--split { flex-direction: column; align-items: flex-start; gap: 20px; }

    .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .process-step::after { display: none; }

    .geo-panel { grid-template-columns: minmax(0, 1fr); }
    .geo-cards { grid-template-columns: minmax(0, 1fr); }

    .bento-photo { min-height: 260px; }

    .faq-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .section--faq .faq-list { height: auto; justify-content: flex-start; }
    .faq-aside__inner { position: static; padding: 30px 28px; }
    .faq-aside__contacts { flex-direction: row; flex-wrap: wrap; }
    .faq-aside__contact { flex: 1 1 260px; }

    .order-block { grid-template-columns: minmax(0, 1fr); }
    .order-block__aside { padding: 36px 32px; }
    .order-block__form { padding: 32px; }

    .about-co__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .about-co__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
    .about-co__col--wide { grid-column: span 2; }
}

@media (max-width: 768px) {
    .hero--home { padding: 104px 0 36px; }
    .hero__img { object-position: 68% 50%; }
    .hero__scrim {
        background:
            linear-gradient(180deg, rgba(8, 13, 25, 0.86) 0%, rgba(8, 13, 25, 0.62) 42%, rgba(8, 13, 25, 0.9) 100%);
    }
    .hero__eyebrow { font-size: 12.5px; padding: 7px 15px 7px 12px; margin-bottom: 18px; }
    .hero__title { font-size: 27px; line-height: 1.15; margin-bottom: 16px; }
    .hero__lead { font-size: 15px; line-height: 1.55; margin-bottom: 22px; }

    /* На телефоне поле было просто плейсхолдером в стеклянной рамке — не читалось
       как строка поиска. Само поле делаем белым с тёмным текстом и лупой внутри,
       кнопка «Найти» под ним */
    .hero-search {
        flex-wrap: wrap;
        border-radius: 18px;
        padding: 10px;
        gap: 10px;
    }
    .hero-search__ico {
        display: flex;
        position: absolute;
        left: 24px;
        top: 23px;
        color: var(--gray-500);
        pointer-events: none;
    }
    .hero-search__input {
        flex: 1 1 100%;
        padding: 13px 14px 13px 42px;
        font-size: 15px;
        background: var(--white);
        color: var(--dark);
        border-radius: 12px;
        box-shadow: inset 0 0 0 1px rgba(27, 28, 27, .08);
    }
    .hero-search__input::placeholder { color: var(--gray-500); }
    .hero-search__btn { flex: 1 1 100%; padding: 12px 20px; border-radius: 12px; }
    .hero-search__results { border-radius: var(--radius-md); max-height: 300px; }

    .hero__chips { gap: 7px; margin-top: 14px; }
    .hero__chips-label { display: none; }
    .hero__chip { font-size: 12.5px; padding: 6px 13px; }

    .hero__cta { margin-top: 22px; gap: 10px; }
    .hero__cta .btn { width: 100%; justify-content: center; }

    .hero__stats { padding: 20px 4px; margin-top: 32px; border-radius: var(--radius-lg); }
    .hero__stat { padding: 0 10px; }
    .hero__stat-label { font-size: 11.5px; }

    .trust-strip { padding: 32px 0; }
    .trust-strip__grid { grid-template-columns: 1fr; gap: 18px; }
    .trust-strip__item { border-right: 0; padding-right: 0; }

    .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .cat-card { padding: 20px 16px 18px; border-radius: 16px; }
    .cat-card__icon { width: 50px; height: 50px; border-radius: 13px; }
    .cat-card__icon img { width: 34px; height: 34px; }
    .cat-card__head { gap: 10px; margin-bottom: 12px; }
    .cat-card__title { font-size: 16px; }
    .cat-card__list a { font-size: 12.5px; }

    .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .svc-card { padding: 18px 16px; border-radius: 15px; }
    .svc-card__ico { width: 40px; height: 40px; margin-bottom: 12px; }
    .svc-card h3 { font-size: 14.5px; }
    .svc-card p { font-size: 12.5px; }

    .process-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .process-step { padding: 24px 22px; }
    .process-cta { flex-direction: column; align-items: stretch; text-align: center; padding: 22px; }
    .process-cta .btn { width: 100%; justify-content: center; }

    .industries { flex-direction: column; align-items: flex-start; padding: 20px; }

    .geo-panel { padding: 18px; border-radius: 18px; }
    #d3-map-wrapper { min-height: 300px; }

    .section--faq .faq-item summary { padding: 16px 18px; font-size: 14.5px; gap: 14px; }
    .faq-item__body { padding: 0 18px 18px; font-size: 13.5px; }
    .faq-aside__inner { padding: 24px 20px; border-radius: 20px; }
    .faq-aside__title { font-size: 22px; margin: 14px 0 10px; }
    .faq-aside__text { font-size: 13.5px; margin-bottom: 18px; }
    .faq-aside__contacts { flex-direction: column; gap: 8px; }
    .faq-aside__contact { flex: 1 1 auto; }

    .order-block { border-radius: 20px; }
    .order-block__aside { padding: 26px 20px; }
    .order-block__title { font-size: 21px; margin: 14px 0 12px; }
    .order-block__text { font-size: 13.5px; margin-bottom: 20px; }
    .order-block__list { gap: 10px; margin-bottom: 22px; }
    .order-block__list li { font-size: 13.5px; }
    .order-block__contacts { flex-direction: column; gap: 12px; padding-top: 20px; }
    .order-block__form { padding: 24px 20px; }

    .about-co__lead { font-size: 15.5px; padding-bottom: 18px; }
    .about-co__fact { flex-direction: column; gap: 3px; align-items: flex-start; padding: 11px 0; }
    .about-co__fact dd { text-align: left; }
    .about-co__cols { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    /* сбрасываем span из планшетного правила: при одной колонке он создаёт
       неявную вторую нулевой ширины, и соседние колонки схлопываются в букву */
    .about-co__col--wide { grid-column: auto; }
    .about-co__col { padding-top: 14px; }
}

@media (max-width: 560px) {
    /* Каталог на телефоне — компактные плитки в 2 колонки: иконка, название и цена.
       Подпункты прячем: в одну колонку со списками блок вырастал втрое (3400px против 1700px),
       а сами подразделы открываются одним тапом на странице категории. */
    .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .cat-card { padding: 16px 14px 14px; }
    .cat-card__list { display: none; }
    .cat-card__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 10px;
    }
    .cat-card__icon { width: 46px; height: 46px; border-radius: 12px; }
    .cat-card__icon img { width: 32px; height: 32px; }
    .cat-card__title { font-size: 14.5px; margin-bottom: 12px; }
    .cat-card__price { font-size: 11px; padding: 5px 9px; }
    .cat-card__price b { font-size: 12px; }
    .cat-card__more { font-size: 12.5px; }
    .cat-card__foot { padding-top: 10px; }

    .svc-grid { gap: 10px; }
    .svc-card { padding: 15px 13px; }
    .svc-card p { display: none; }
    .svc-card__ico { width: 36px; height: 36px; border-radius: 11px; margin-bottom: 10px; }
    .svc-card__ico svg { width: 20px; height: 20px; }
    .svc-card h3 { font-size: 13.5px; }

    .hero__stats { grid-template-columns: repeat(2, 1fr); }
    .hero__stat-val { font-size: 24px; }
    .hero__stat { padding: 0 6px; }
    .hero__stat-label { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero__img,
    .bento-photo img { transition: none; }
    .cat-card:hover,
    .svc-card:hover,
    .geo-card:hover,
    .process-step:hover { transform: none; }
}

/* ==========================================================================
   СТРАНИЦА КОНТАКТОВ — премиальный редизайн (2026-08)
   Как и блок главной, лежит в конце файла; свой адаптив — в конце блока.
   ========================================================================== */

/* --- Hero: контакты и карта одной тёмной панелью --- */
.ct-hero {
    /* фон совпадает с .ct-team ниже — стык секций не читается полосой */
    background: var(--gray-100);
    /* 131px — ровно высота шапки: дальше строку крошек отбивает её
       собственный margin, одинаково со всеми страницами */
    padding: 131px 0 56px;
}

.ct-hero__panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
    background: var(--dark);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 24px 60px -20px rgba(27, 28, 27, 0.45);
    /* единственный авторский момент на странице: expo-out из видимого по умолчанию */
    animation: ctPanelIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes ctPanelIn {
    from { opacity: 0; transform: translateY(16px); }
}

.ct-hero__panel::before {
    content: "";
    position: absolute;
    top: -35%;
    left: -12%;
    width: 72%;
    height: 170%;
    background: radial-gradient(ellipse at center, rgba(201, 79, 8, 0.3) 0%, transparent 62%);
    pointer-events: none;
}

/* Фирменный знак — фактура панели, а не иллюстрация: уходит за нижний край */
.ct-hero__mark {
    position: absolute;
    left: -76px;
    bottom: -132px;
    width: 420px;
    height: 491px;
    background: url("/images/logo-mark.svg") center / contain no-repeat;
    opacity: 0.14;
    pointer-events: none;
}

.ct-hero__body {
    position: relative;
    z-index: 2;
    padding: 48px 44px 40px;
    min-width: 0;
}

.ct-hero__title {
    font-size: clamp(30px, 3.2vw, 44px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--white);
    margin-bottom: 16px;
}

.ct-hero__lead {
    /* 62ch по метрике основного шрифта давало ~77 реальных знаков — сузили до ~70 */
    max-width: 560px;
    font-size: 16px;
    line-height: 1.65;
    /* вторичный текст на цветной подложке тонируем от её тона, а не в серый */
    color: #A9B8CE;
}

/* Контакты — сетка со строками-разделителями. Никаких вложенных карточек. */
.ct-hero__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 34px 0 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ct-line {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    grid-template-areas:
        "ico label"
        "ico value"
        "ico note";
    column-gap: 14px;
    padding: 20px 26px 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ct-line:nth-child(2n) {
    padding-left: 28px;
    padding-right: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.ct-line__ico {
    grid-area: ico;
    align-self: start;
    margin-top: 3px;
    color: var(--primary);
    transition: color var(--transition);
}

.ct-line__ico svg { width: 22px; height: 22px; }

.ct-line__label {
    grid-area: label;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #8296B4;
    margin-bottom: 7px;
}

.ct-line__value {
    grid-area: value;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--white);
    transition: color var(--transition);
}

.ct-line__note {
    grid-area: note;
    font-size: 13px;
    line-height: 1.45;
    color: #93A6C0;
    margin-top: 6px;
}

a.ct-line:hover .ct-line__value,
a.ct-line:hover .ct-line__ico { color: #6BA6FF; }

.ct-hero__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.ct-messenger {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 20px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--white);
    transition: var(--transition);
}

.ct-messenger svg { width: 18px; height: 18px; color: var(--primary); }

.ct-messenger:hover {
    background: var(--primary);
    border-color: transparent;
    color: var(--white);
}

.ct-messenger:hover svg { color: var(--white); }

/* Третичное действие: уводит к форме, а не в мессенджер, — поэтому отдельной
   строкой по левому краю, а не прижатым вправо остатком предыдущей */
/* Стиль писался для ссылки, а элемент стал кнопкой (попап вместо перехода) —
   браузер подставил свои фон, рамку, отступы и шрифт, и текстовая ссылка
   превратилась в белый прямоугольник посреди тёмного блока. Гасим дефолты. */
.ct-hero__spec {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.2;
    color: #6BA6FF;
    cursor: pointer;
}
.ct-hero__spec:hover { color: #8FBEFF; }
.ct-hero__spec:focus-visible { outline: 2px solid #6BA6FF; outline-offset: 3px; border-radius: 4px; }

.ct-hero__spec svg { transition: transform var(--transition); }
.ct-hero__spec:hover svg { transform: translateX(4px); }

.ct-hero__map {
    position: relative;
    z-index: 2;
    min-height: 100%;
    background: var(--dark-800);
}

.ct-hero__map iframe {
    width: 100%;
    height: 100%;
    min-height: 520px;
    border: 0;
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .ct-hero__panel { animation: none; }
}

/* --- Менеджеры --- */
.ct-team { background: var(--gray-100); }

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.team-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 22px;
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.team-card:hover {
    transform: translateY(-4px);
    border-color: rgba(201, 79, 8, 0.4);
    box-shadow: 0 20px 46px rgba(27, 28, 27, 0.1);
}

.team-card__photo {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--gray-100);
}

.team-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.team-card:hover .team-card__photo img { transform: scale(1.05); }

/* Плашка специализации поверх нижнего края фото */
.team-card__spec {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 9px 14px;
    border-radius: 12px;
    background: rgba(8, 13, 25, 0.72);
    backdrop-filter: blur(10px);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--white);
}

.team-card__body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 20px 20px 18px;
}

.team-card__name {
    font-size: 18px;
    font-weight: 600;
    color: var(--dark);
    letter-spacing: -0.01em;
    margin-bottom: 3px;
}

.team-card__role {
    font-size: 13px;
    color: var(--gray-500);
    margin-bottom: 16px;
}

.team-card__groups {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
}

.team-card__groups a {
    display: inline-block;
    padding: 5px 11px;
    border-radius: 100px;
    background: var(--gray-100);
    font-size: 12px;
    color: var(--gray-500);
    transition: var(--transition);
}

.team-card__groups a:hover {
    background: var(--primary-light);
    color: var(--primary);
}

.team-card__contacts {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--gray-200);
}

.team-card__contact {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: var(--gray-500);
    min-width: 0;
}

.team-card__contact svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--primary); }

.team-card__contact span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-card__contact b { font-weight: 600; color: var(--dark); }
.team-card__contact:hover { color: var(--primary); }

/* --- Инженер --- */
.ct-engineer { background: var(--gray-100); padding-top: 0; }

.engineer-card {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    background: var(--dark);
    border-radius: 28px;
    overflow: hidden;
    color: var(--white);
}

.engineer-card__photo {
    position: relative;
    min-height: 100%;
    background: var(--dark-800);
}

.engineer-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}

/* Плавный стык фото с тёмной панелью */
.engineer-card__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 55%, rgba(27, 28, 27, 0.85) 100%);
}

.engineer-card__body {
    position: relative;
    padding: 44px 44px 40px;
    overflow: hidden;
}

.engineer-card__body::before {
    content: "";
    position: absolute;
    top: -40%;
    right: -20%;
    width: 80%;
    height: 160%;
    background: radial-gradient(ellipse at center, rgba(201, 79, 8, 0.24) 0%, transparent 62%);
    pointer-events: none;
}

.engineer-card__body > * { position: relative; z-index: 2; }

.engineer-card__name {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 16px 0 6px;
}

.engineer-card__role {
    font-size: 14px;
    font-weight: 500;
    color: var(--primary);
    margin-bottom: 16px;
}

.engineer-card__text {
    font-size: 14.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.68);
    margin-bottom: 26px;
}

.engineer-card__list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    margin-bottom: 28px;
}

.engineer-card__list li { display: flex; align-items: flex-start; gap: 12px; }

.engineer-card__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: rgba(201, 79, 8, 0.2);
    color: #6BA6FF;
}

.engineer-card__ico svg { width: 18px; height: 18px; }

.engineer-card__list span:last-child {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
}

.engineer-card__list b {
    font-size: 14px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 3px;
}

.engineer-card__contacts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.engineer-card__contact {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--white);
}

.engineer-card__contact svg { width: 18px; height: 18px; color: var(--primary); }
.engineer-card__contact:hover { color: #6BA6FF; }
.engineer-card__contact b { font-weight: 600; color: #6BA6FF; }

.engineer-card__calc {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 11px 22px;
    border-radius: 100px;
    background: var(--primary);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--white);
}

.engineer-card__calc:hover {
    background: var(--primary-dark);
    box-shadow: 0 8px 22px rgba(201, 79, 8, 0.4);
}

/* --- Склады --- */
.ct-warehouses { background: var(--white); }

.wh-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.wh-card {
    padding: 30px 28px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 22px;
    transition: var(--transition);
}

.wh-card:hover {
    transform: translateY(-3px);
    border-color: rgba(201, 79, 8, 0.4);
    box-shadow: 0 16px 38px rgba(27, 28, 27, 0.08);
}

.wh-card__num {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 100px;
    background: var(--gray-100);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 16px;
}

.wh-card h3 {
    font-family: var(--font);
    font-size: 20px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 10px;
}

.wh-card__addr {
    font-size: 14px;
    line-height: 1.6;
    color: var(--gray-500);
    margin-bottom: 20px;
}

.wh-card__meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 18px;
    border-top: 1px solid var(--gray-200);
}

.wh-card__meta > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
}

.wh-card__meta dt { font-size: 13px; color: var(--gray-500); }
.wh-card__meta dd { font-size: 13.5px; font-weight: 600; color: var(--dark); text-align: right; }

/* Круглосуточный склад выделяем акцентом */
.wh-card--accent { border-color: rgba(201, 79, 8, 0.4); background: linear-gradient(180deg, var(--primary-light) 0%, var(--white) 55%); }
.wh-card--accent .wh-card__num { background: var(--white); color: var(--primary); }

/* --- Реквизиты --- */
.ct-req { background: var(--gray-100); }

.req-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    align-items: start;
}

.req-panel {
    padding: 32px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 22px;
}

.req-panel__title {
    font-family: var(--font);
    font-size: 17px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 16px;
}

.req-panel__title--mt { margin-top: 28px; }

.req-list { display: flex; flex-direction: column; }

.req-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 0;
    border-bottom: 1px solid var(--gray-200);
}

.req-row:last-child { border-bottom: 0; padding-bottom: 0; }

.req-row dt {
    flex-shrink: 0;
    font-size: 13.5px;
    color: var(--gray-500);
}

.req-row dd {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--dark);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.req-row dd a { color: var(--primary); }
.req-row dd a:hover { text-decoration: underline; }

/* ==========================================================================
   Адаптив страницы контактов
   ========================================================================== */

@media (max-width: 1200px) {
    .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .engineer-card { grid-template-columns: 320px minmax(0, 1fr); }
    .engineer-card__body { padding: 36px; }
}

@media (max-width: 1024px) {
    .ct-hero { padding: 131px 0 44px; }
    .ct-hero__panel { grid-template-columns: minmax(0, 1fr); }
    .ct-hero__body { padding: 38px 34px 34px; }
    .ct-hero__map { min-height: 340px; }
    .ct-hero__map iframe { min-height: 340px; }
    .ct-hero__mark { left: -90px; bottom: -150px; width: 360px; height: 421px; }

    .engineer-card { grid-template-columns: minmax(0, 1fr); }
    .engineer-card__photo { aspect-ratio: 16 / 9; min-height: 0; }
    .engineer-card__photo img { object-position: center 22%; }
    .engineer-card__photo::after {
        background: linear-gradient(180deg, transparent 45%, rgba(27, 28, 27, 0.9) 100%);
    }

    .wh-grid { grid-template-columns: minmax(0, 1fr); }
    .req-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
    .ct-hero { padding: 84px 0 32px; }
    .ct-hero__panel { border-radius: 20px; }
    .ct-hero__body { padding: 26px 20px 24px; }
    .ct-hero__title { font-size: 26px; margin-bottom: 12px; }
    .ct-hero__lead { font-size: 14.5px; }

    /* Одна колонка: разделители остаются только горизонтальные */
    .ct-hero__grid { grid-template-columns: minmax(0, 1fr); margin: 24px 0 22px; }
    .ct-line { padding: 16px 0; }
    .ct-line:nth-child(2n) { padding-left: 0; border-left: 0; }
    .ct-line__value { font-size: 17px; }
    .ct-line__note { font-size: 12.5px; }

    .ct-hero__foot { gap: 10px; }
    .ct-messenger { flex: 1 1 auto; justify-content: center; padding: 11px 16px; font-size: 13.5px; }
    .ct-hero__spec { width: 100%; justify-content: center; }

    .ct-hero__map iframe { min-height: 280px; }
    .ct-hero__mark { left: -60px; bottom: -110px; width: 260px; height: 304px; }

    /* На телефоне карточка горизонтальная: портрет 3:4 слева, данные справа.
       Полноширинное фото пришлось бы резать в ландшафт и срезать лицо. */
    .team-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .team-card { flex-direction: row; align-items: stretch; }
    .team-card__photo { flex: 0 0 128px; aspect-ratio: 3 / 4; }
    .team-card__photo img { object-position: center 12%; }
    .team-card__spec {
        left: 8px;
        right: 8px;
        bottom: 8px;
        padding: 6px 9px;
        border-radius: 9px;
        font-size: 10.5px;
        line-height: 1.25;
    }
    .team-card__body { padding: 16px 16px 14px; }
    .team-card__name { font-size: 16.5px; }
    .team-card__role { font-size: 12.5px; margin-bottom: 12px; }
    .team-card__groups { gap: 5px; margin-bottom: 14px; }
    .team-card__groups a { font-size: 11.5px; padding: 4px 9px; }
    .team-card__contacts { gap: 7px; padding-top: 12px; }
    .team-card__contact { font-size: 12.5px; }

    .engineer-card { border-radius: 20px; }
    .engineer-card__body { padding: 26px 20px; }
    .engineer-card__name { font-size: 24px; margin: 14px 0 5px; }
    .engineer-card__text { font-size: 13.5px; margin-bottom: 22px; }
    .engineer-card__list { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 22px; }
    .engineer-card__contacts { flex-direction: column; align-items: stretch; gap: 14px; }
    .engineer-card__calc { margin-left: 0; justify-content: center; }

    .wh-card { padding: 22px 20px; border-radius: 18px; }
    .req-panel { padding: 22px 20px; border-radius: 18px; }
    .req-row { flex-direction: column; gap: 4px; padding: 11px 0; }
    .req-row dd { text-align: left; }
}

/* ==========================================================================
   СТРАНИЦА УСЛУГ — дополняет систему главной, своих цветов не вводит
   ========================================================================== */

/* Hero без поиска — компактнее домашнего */
.hero--compact { min-height: 0; padding: 150px 0 52px; }
.hero--compact .hero__body { max-width: 720px; }

/* Крошки в тёмном hero — те же метрики, что и везде, меняются только цвета:
   на фото и градиенте синий и серый не читаются. */
.hero__crumbs a { color: rgba(255, 255, 255, 0.62); }
.hero__crumbs a:hover { color: var(--white); }
.hero__crumbs .breadcrumb-sep { color: rgba(255, 255, 255, 0.35); }
.hero__crumbs .breadcrumb-current { color: rgba(255, 255, 255, 0.9); }

/* Текстовое значение в полосе цифр (НАКС) — под ту же метрику, что и числа */
.hero__stat-text {
    font-family: var(--font-heading);
    font-size: 0.86em;
    letter-spacing: 0.01em;
}

/* Второй заголовок внутри секции: сверху воздуха меньше, чем у первого */
.section-header--tight { margin-top: 56px; }

/* Три колонки: 5 и 6 услуг в четырёхколоночной сетке главной давали рваные
   ряды (4+1 и 4+2), плюс карточка здесь несёт описание, а не только навигацию */
.svc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --- Карточка услуги: та же .svc-card, плюс строка техпараметра --- */
.svc-card__spec {
    display: inline-block;
    align-self: flex-start;
    padding: 5px 11px;
    margin-bottom: 14px;
    border-radius: 100px;
    background: var(--gray-100);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--gray-500);
    font-variant-numeric: tabular-nums;
    transition: var(--transition);
}

.svc-card:hover .svc-card__spec { background: var(--primary-light); color: var(--primary); }

.svc-card__more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    padding-top: 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--primary);
}

.svc-card__more svg { transition: transform var(--transition); }
.svc-card:hover .svc-card__more svg { transform: translateX(4px); }

/* Описание услуги не должно прижимать «Подробнее» к тексту вплотную */
.section--services .svc-card p { margin-bottom: 4px; }

/* --- Гид по методам + оборудование --- */
.section--guide { background: var(--white); }

.usl-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--gray-200);
    border-radius: 20px;
}

.usl-table {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.usl-table th,
.usl-table td {
    padding: 15px 18px;
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
    vertical-align: top;
}

.usl-table thead th {
    background: var(--gray-100);
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--dark);
    white-space: nowrap;
}

.usl-table tbody th {
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--dark);
    white-space: nowrap;
}

.usl-table tbody td {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--gray-500);
}

.usl-table tbody tr:last-child th,
.usl-table tbody tr:last-child td { border-bottom: 0; }

.usl-table tbody tr:hover th,
.usl-table tbody tr:hover td { background: var(--gray-100); }

.usl-rig__title {
    font-family: var(--font);
    font-size: 17px;
    font-weight: 600;
    color: var(--dark);
    margin: 44px 0 4px;
}

.usl-rig {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
}

.usl-rig__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 0;
    border-bottom: 1px solid var(--gray-200);
}

.usl-rig__row dt {
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
    white-space: nowrap;
}

.usl-rig__row dd {
    font-size: 13px;
    color: var(--gray-500);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* --- Процесс из пяти шагов --- */
.process-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ==========================================================================
   Адаптив страницы услуг
   ========================================================================== */

@media (max-width: 1200px) {
    .process-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .svc-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
    .hero--compact { padding: 124px 0 44px; }
    .usl-rig { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
    .section-header--tight { margin-top: 44px; }
}

@media (max-width: 768px) {
    .hero--compact { padding: 100px 0 32px; }
    .hero--compact .hero__cta .btn { width: 100%; justify-content: center; }

    .process-grid--5 { grid-template-columns: minmax(0, 1fr); }
    .section-header--tight { margin-top: 36px; }

    .usl-table-wrap { border-radius: 16px; }
    .usl-table th, .usl-table td { padding: 12px 14px; }
    .usl-rig__title { font-size: 16px; margin-top: 32px; }
    .usl-rig__row { flex-direction: column; gap: 3px; padding: 12px 0; }
    .usl-rig__row dd { text-align: left; }
}

@media (max-width: 560px) {
    /* На телефоне у карточек услуг описание остаётся: оно и есть содержание,
       в отличие от главной, где карточки — только навигация */
    .svc-grid, .svc-grid--3 { grid-template-columns: minmax(0, 1fr); }
    .svc-card p { display: block; }
    .svc-card__spec { font-size: 11px; margin-bottom: 10px; }
}

/* ==========================================================================
   ВНУТРЕННЯЯ СТРАНИЦА УСЛУГИ — продолжение системы главной и /uslugi.
   Собственных цветов и шрифтов не вводит, только новые раскладки.
   ========================================================================== */

/* --- Возможности: фото участка + строки параметров --- */
.svc-caps {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 44px;
    align-items: start;
}

.svc-caps__media {
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
}

.svc-caps__media img {
    display: block;
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.svc-caps__media figcaption {
    padding: 13px 18px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--gray-500);
    border-top: 1px solid var(--gray-200);
}

/* Параметры идут одной колонкой: рядом с фото двухколоночная сетка ломала ритм */
.svc-caps__list { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
.svc-caps__list .usl-rig__row:first-child { padding-top: 0; }

/* Пояснение под таблицей сравнения */
.usl-table__note {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--gray-500);
}

.usl-table__note b { color: var(--dark); font-weight: 600; }

/* --- Карточка-факт: та же .svc-card, но не ссылка --- */
.svc-card--static { cursor: default; }
.svc-card--static:hover { transform: none; box-shadow: none; border-color: var(--gray-200); }
.svc-card--static:hover .svc-card__spec { background: var(--primary-light); color: var(--primary); }
.svc-card--static p { margin-bottom: 0; }

/* На белом фоне карточка-факт теряет границу — возвращаем её рамкой */
.svc-card--bordered { border-color: var(--gray-200); }

/* --- Заметки технолога: текст без карточек, разделители вместо плашек --- */
.svc-notes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 56px;
    row-gap: 4px;
}

.svc-note {
    padding: 22px 0 20px;
    border-top: 1px solid var(--gray-200);
}

.svc-note h3 {
    font-family: var(--font);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--dark);
    margin-bottom: 10px;
}

.svc-note p {
    font-size: 14px;
    line-height: 1.75;
    color: var(--gray-500);
}

.svc-note a { color: var(--primary); }
.svc-note a:hover { text-decoration: underline; }
.svc-note b { color: var(--dark); font-weight: 600; }

/* --- SEO-блок услуги: связный текст + боковая карточка-справка.
   Отличается от «О компании» на главной: без плиточных колонок,
   заголовок живёт внутри текстовой колонки, справка закреплена сбоку. --- */
.svc-seo { background: var(--white); }

.svc-seo__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

.svc-seo__title {
    font-family: var(--font-heading);
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--dark);
    margin-bottom: 18px;
    max-width: 660px;
}

.svc-seo__lead {
    font-size: 17px;
    line-height: 1.7;
    color: var(--dark);
    padding-bottom: 26px;
    border-bottom: 1px solid var(--gray-200);
}

.svc-seo__block { padding-top: 26px; }

.svc-seo__block h3 {
    font-family: var(--font);
    font-size: 16px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 10px;
}

.svc-seo__block p {
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--gray-500);
}

.svc-seo__block p + p { margin-top: 12px; }
.svc-seo__block a { color: var(--primary); }
.svc-seo__block a:hover { text-decoration: underline; }
.svc-seo__lead a { color: var(--primary); }
.svc-seo__lead a:hover { text-decoration: underline; }

.svc-seo__card {
    position: sticky;
    top: calc(var(--header-h, 137px) + 20px);
    padding: 28px 28px 22px;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 20px;
}

.svc-seo__card-title {
    font-family: var(--font);
    font-size: 15px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 6px;
}

.svc-seo__fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid var(--gray-200);
}

.svc-seo__fact dt {
    font-size: 13.5px;
    color: var(--gray-500);
}

.svc-seo__fact dd {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--dark);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.svc-seo__links {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 8px;
}

.svc-seo__links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    border-bottom: 1px solid var(--gray-200);
}

.svc-seo__links a:last-child { border-bottom: 0; }
.svc-seo__links a svg { flex-shrink: 0; transition: transform var(--transition); }
.svc-seo__links a:hover svg { transform: translateX(4px); }

/* ==========================================================================
   Адаптив внутренней страницы услуги
   ========================================================================== */

@media (max-width: 1024px) {
    .svc-caps { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .svc-caps__media img { height: 260px; }
    .svc-seo__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .svc-seo__card { position: static; }
    .svc-notes { column-gap: 36px; }
}

@media (max-width: 768px) {
    .svc-notes { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
    .svc-caps__media img { height: 210px; }
    .svc-seo__lead { font-size: 16px; }
    .svc-seo__card { padding: 22px 20px 18px; border-radius: 16px; }
    .svc-seo__fact { flex-direction: column; gap: 3px; }
    .svc-seo__fact dd { text-align: left; }
}

/* ==========================================================================
   Якорь на блок каталога главной (/#categories) — отступ под фиксированный хедер
   ========================================================================== */

#categories { scroll-margin-top: 92px; }

@media (max-width: 768px) {
    #categories { scroll-margin-top: 72px; }
}

/* ==========================================================================
   Полосы подменю в шапке — товарные группы (.cat-nav) и услуги (.svc-nav).
   Оформление у них общее и лежит здесь: catalog.css грузят только страницы
   каталога, а поисковая часть .cat-nav остаётся там же
   ========================================================================== */

.cat-nav,
.svc-nav {
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    border-bottom: 2px solid var(--gray-200);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.cat-nav::-webkit-scrollbar,
.svc-nav::-webkit-scrollbar { display: none; }

.cat-nav-inner,
.svc-nav-inner {
    display: flex;
    align-items: center;
    gap: 0;
    white-space: nowrap;
    padding: 0;
    position: relative;
}

.cat-nav-link,
.svc-nav-link {
    padding: 12px 14px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--dark-600);
    transition: var(--transition);
    flex-shrink: 0;
}

.cat-nav-link:hover,
.svc-nav-link:hover {
    color: var(--primary);
    background: var(--primary-light);
}

/* Активный пункт — только цветом и насыщенностью, без подчёркивания */
.cat-nav-link--active,
.svc-nav-link--active {
    color: var(--primary);
    font-weight: 600;
}

/* Полоса добавляет высоты шапке — компенсируем отступом hero страниц услуг.
   181px = высота шапки с полосой: дальше строку крошек отбивает её margin */
.hero--compact { padding-top: 181px; }

@media (max-width: 768px) {
    .hero--compact { padding-top: 129px; }
}

@media (max-width: 768px) {
    .cat-nav-link,
    .svc-nav-link { padding: 10px 12px 12px; font-size: 12.5px; }
}

/* ============================================================
   Каталог на главной: раскрытие подкатегорий в карточке
   Видно пять строк — подкатегории, затем популярные размеры.
   Остальное открывается кнопкой в нижней строке карточки.
   ============================================================ */

/* Содержимое карточки пропускает клик насквозь на .cat-card__overlay.
   Нижней строке интерактивность не нужна, а кнопке — нужна, иначе
   нажатие на «Ещё» перехватывает оверлей и уводит на страницу категории. */
.cat-card__list .cat-card__toggle { pointer-events: auto; }

.cat-card__item--extra[hidden] { display: none; }

/* кнопка встаёт на строку последнего видимого пункта: позиционируется по
   нижнему краю списка и выключена из потока, поэтому высоту не добавляет */
.cat-card__list--togglable { position: relative; }
.cat-card__toggle-row {
    position: absolute;
    right: 0;
    bottom: 0;
    line-height: 1;
}
/* Отступ под кнопку нужен той строке, рядом с которой она стоит:
   в свёрнутом виде это пункт с индексом VISIBLE, в раскрытом — последний пункт
   списка (кнопка всегда последний li, поэтому он предпоследний ребёнок). */
.cat-card__item--row-end a,
.cat-card__list--togglable > li:nth-last-child(2) a { padding-right: 92px; }

/* популярные размеры: полый маркер, чтобы отличались от подкатегорий */
.cat-card__item--pop a::before {
    background: transparent;
    border: 1.5px solid var(--gray-300);
    width: 6px;
    height: 6px;
    top: 7px;
}
.cat-card__item--pop a:hover::before { background: transparent; border-color: var(--primary); }

.cat-card__toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 3px 9px 3px 8px;
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    background: var(--gray-100);
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-500);
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.cat-card__toggle:hover {
    color: var(--primary);
    border-color: rgba(201, 79, 8, 0.4);
    background: var(--primary-light);
}
.cat-card__toggle svg { transition: transform var(--transition); }
.cat-card__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* на узком экране список подразделов скрыт целиком — прятать нечего */
@media (max-width: 560px) {
    .cat-card__toggle { display: none; }
}

/* ==========================================================================
   Узкие экраны: 320–479 px
   Правки собраны из обхода страниц на реальных ширинах — что не влезало,
   что было мельче пальца и что читалось хуже 12 px.
   ========================================================================== */
@media (max-width: 767px) {
    .ct-hero { padding-top: 70px; }
    .hero--compact { padding-top: 115px; }
}

@media (max-width: 479px) {
    /* Три сегмента канала на 320 px делят 270 px: подписи упирались в края
       кнопок и обрезались на пять пикселей. */
    .request-channel__btn { font-size: 12.5px; padding: 0 4px; gap: 5px; }
    .request-channel__ico { width: 15px; height: 15px; }

    /* Подписи мельче 12 px на телефоне уже не читаются с руки */
    .hero__stat-label,
    .svc-card__spec,
    .ct-line__label,
    .team-card__spec,
    .dropzone__hint,
    .cart__share-hint { font-size: 12px; }
}

/* «Прислать спецификацию» — текстовая кнопка высотой в строку: пальцем
   попасть в 17 px трудно, добавляем вертикальный запас без видимого фона. */
.ct-hero__spec { padding: 7px 0; }

/* Шапка на 320–479 px. Логотип занимал 202 px и не сжимался, отступы съедали
   ещё 48 — при доступных 272 ряд разъезжался на 374, и корзина уходила за
   правый край, а кнопка меню пропадала вовсе. */
@media (max-width: 479px) {
    .header-main .container {
        padding-left: 12px;
        padding-right: 12px;
        gap: 8px;
    }
    .logo { flex-shrink: 1; min-width: 0; font-size: 22px; gap: 2px; }
    .logo-img { height: 30px; }
    .header-actions { gap: 4px; }
    .header-top .container { padding-left: 12px; padding-right: 12px; }
}

/* Промежуточная ступень: на 480–639 px ряд ещё помещается, но впритык —
   снимаем запас за счёт отступов, не трогая размер логотипа. */
@media (min-width: 480px) and (max-width: 639px) {
    .header-main .container { padding-left: 16px; padding-right: 16px; gap: 12px; }
    .header-actions { gap: 8px; }
}

/* ==========================================================================
   Почта в шапке и кнопка копирования
   ========================================================================== */
.header-contact-item--mail { display: inline-flex; align-items: center; gap: 6px; }
.header-contact-mail { display: inline-flex; align-items: center; gap: 8px; color: inherit; }

.copy-btn {
    position: relative;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    color: var(--gray-500);
    cursor: pointer;
    transition: color .2s, background .2s, border-color .2s;
}
.copy-btn:hover { color: var(--primary); background: var(--primary-light); }
.copy-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.copy-btn svg { width: 16px; height: 16px; }
/* Галочка подменяет иконку на секунду: без ответа непонятно, сработало ли */
.copy-btn__done { display: none; }
.copy-btn.is-copied { color: #16A34A; background: rgba(22, 163, 74, .1); }
.copy-btn.is-copied .copy-btn__ico { display: none; }
.copy-btn.is-copied .copy-btn__done { display: block; }

/* Вторая строка блока телефона: заказ звонка, разделитель и почта */
.header-phone__row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.header-phone__sep {
    width: 1px;
    height: 12px;
    background: var(--gray-300);
    flex: 0 0 auto;
}

.header-mail {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.header-mail__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    border-radius: 8px;
    /* Подпись мельче номера: телефон остаётся главным контактом, почта —
       вторым, наравне с «Заказать звонок» */
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-500);
    transition: color .2s;
}
.header-mail__link:hover { color: var(--primary); }
.header-mail__link svg { color: var(--primary); flex: 0 0 auto; }

/* Шапка плотная: ниже 1280 px адрес сворачивается в иконку, копирование
   продолжает работать */
@media (max-width: 1279px) {
    .header-mail__text { display: none; }
}
/* На телефоне в шапке уже четыре цели (логотип, звонок, корзина, меню),
   а строка «Заказать звонок» скрыта целиком — адрес остаётся в подвале
   и на странице контактов */
@media (max-width: 767px) {
    .header-phone__row { display: none; }
}

/* ==========================================================================
   Шапка: редизайн
   Задача — деловой вид без визуального шума. Что поменялось и почему:
   • меньше высоты и веса у логотипа: он был самым тяжёлым пятном и спорил
     с телефоном, хотя вести должен телефон — это B2B, звонят чаще, чем кликают;
   • активный пункт меню держится подчёркиванием, а не только цветом: цвет один
     на все состояния читается как ссылка, а не как «вы здесь»;
   • «Заказать звонок» лишился пунктирного подчёркивания — приём из 2000-х,
     который дешевит весь правый блок;
   • контакты собраны в одну группу с ровной вертикальной осью;
   • граница вместо тени в покое: тень под неподвижной шапкой выглядит
     тяжёлой, а при скролле она возвращается и отделяет контент.
   ========================================================================== */

/* --- Ярусы и рамка --- */
.header-top {
    border-bottom: 1px solid rgba(230, 229, 226, .7);
}

/* Дата цен — единственный «живой» показатель в шапке, поэтому чуть заметнее
   соседей: покупатель проверяет свежесть прайса прежде, чем звонить. */
.header-contact-item--fresh { color: var(--dark-600); font-weight: 600; }
.header-contact-item--fresh svg { color: #16A34A; opacity: 1; }

/* Ниже 1280 px в полосе остаются адрес и дата цен: строка узкая, а условие
   отгрузки повторяется на страницах доставки и в карточках. */
@media (max-width: 1279px) {
    .header-contact-item--ship { display: none; }
}
@media (max-width: 1023px) {
    .header-contacts { gap: 16px; }
}
.header-top-inner { min-height: 38px; }
.header-contact-item,
.header-schedule {
    font-size: 12.5px;
    letter-spacing: .01em;
    color: var(--gray-500);
}
.header-contact-item svg,
.header-schedule svg { opacity: .75; }

.header.scrolled {
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 1px 0 rgba(27, 28, 27, .06), 0 8px 24px rgba(27, 28, 27, .06);
}
.header-main-inner { min-height: 68px; }

/* --- Логотип --- */
.logo { font-size: 25px; letter-spacing: -.01em; }
.logo-img { height: 34px; }

/* --- Навигация --- */
.nav { gap: 2px; }
.nav-link {
    position: relative;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 500;
    color: var(--dark-600);
}
.nav-link:hover { color: var(--dark); background: transparent; }
/* Тонкая линия под активным пунктом: «вы здесь» должно читаться формой,
   а не только цветом — цветом на сайте помечены все ссылки подряд. */
.nav-link--active { color: var(--dark); font-weight: 600; }
.nav-link--active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    /* У .nav-link::after уже есть width: 0 и центрирование через transform —
       это анимация подчёркивания при наведении. Для активного пункта линия
       должна стоять всегда, поэтому сбрасываем и ширину, и сдвиг. */
    width: auto;
    transform: none;
    height: 2px;
    border-radius: 2px;
    background: var(--primary);
}

/* --- Контакты --- */
.header-phone { gap: 3px; }
.phone-number { font-size: 18px; letter-spacing: -.01em; color: var(--dark); }
.header-phone__call { gap: 9px; }
.header-phone__call svg { width: 18px; height: 18px; }

.header-phone__callback {
    border-bottom: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gray-500);
    transition: color .2s;
}
.header-phone__callback:hover { color: var(--primary); }
.header-phone__row { gap: 10px; }
.header-phone__sep { height: 11px; background: var(--gray-200); }
.header-mail__link { font-size: 12.5px; font-weight: 600; color: var(--gray-500); }
.header-mail__link svg { width: 14px; height: 14px; opacity: .9; }
.copy-btn { width: 26px; height: 26px; border-radius: 7px; }
.copy-btn svg { width: 14px; height: 14px; }

/* --- Корзина --- */
.cart-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--gray-200);
    background: #fff;
    box-shadow: none;
    transition: border-color .2s, background .2s;
}
.cart-btn:hover { border-color: var(--primary); background: var(--primary-light); }

/* --- Полоса категорий --- */
.cat-nav { border-bottom: 1px solid rgba(230, 229, 226, .8); }
.cat-nav-link {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--dark-600);
}
.cat-nav-link:hover { color: var(--dark); }
.cat-nav-link--active { color: var(--primary); font-weight: 600; }

/* Светлых состояний у шапки нет: основная полоса белая и на главной тоже —
   проверено на живой странице. Раньше здесь стоял блок «шапка поверх героя»,
   он красил текст в белый и делал его невидимым на белом фоне. */

/* ==========================================================================
   Шапка по макету: полоса с опытом/адресом/режимом сверху, ниже — логотип,
   меню, поиск, телефон, «Получить КП» и корзина.
   ========================================================================== */
.header-top-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.header-contacts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.header-top__sep { width: 1px; height: 14px; background: var(--line-soft, #E6E5E2); flex: 0 0 auto; }
.header-contact-item--trust { color: var(--dark-700); font-weight: 600; }
.header-contact-item--trust svg { color: var(--primary); opacity: 1; }

.header-top__actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.header-top__callback {
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    transition: color .2s;
}
.header-top__callback:hover { color: var(--primary-dark); }
.header-top__callback:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }

.header-main-inner { display: flex; align-items: center; gap: 20px; }

/* Поиск занимает свободное место между меню и контактами: он тут главный
   рабочий инструмент — на складе ищут по размеру, а не листают разделы. */
.header-search {
    position: relative;
    flex: 1 1 240px;
    min-width: 0;
    max-width: 340px;
    display: flex;
    align-items: center;
}
.header-search__input {
    width: 100%;
    min-height: 44px;
    padding: 0 42px 0 16px;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: var(--gray-100);
    font-family: var(--font);
    font-size: 14.5px;
    color: var(--dark);
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.header-search__input::placeholder { color: var(--gray-400); }
.header-search__input:focus {
    outline: none;
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(201, 79, 8, .14);
}
.header-search__ico {
    position: absolute;
    right: 14px;
    display: inline-flex;
    color: var(--gray-400);
    pointer-events: none;
}
.header-search__results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 60;
    display: none;
    max-height: 60vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
}
.header-search--open .header-search__results { display: block; }

.header-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.header-actions .header-phone__call { gap: 8px; }
.header-actions .phone-number { font-size: 17px; font-weight: 700; color: var(--dark); white-space: nowrap; }

.header-kp {
    min-height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 10px;
    background: var(--primary);
    font-family: var(--font);
    font-size: 14.5px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s, box-shadow .2s;
}
.header-kp:hover { background: var(--primary-dark); box-shadow: 0 8px 20px rgba(201, 79, 8, .25); }
.header-kp:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Ниже 1400 px пунктов меню и поиска в строку уже не помещается: сначала
   уходит поиск в полосу категорий (там есть своя лупа), потом меню в бургер. */
@media (max-width: 1399px) {
    .header-main-inner { gap: 14px; }
    .header-search { max-width: 220px; flex-basis: 180px; }
    .nav-link { padding: 10px 10px; font-size: 14.5px; }
    .nav-link--active::after { left: 10px; right: 10px; }
}
@media (max-width: 1199px) {
    .header-search { display: none; }
}
@media (max-width: 1023px) {
    .header-contact-item--trust { display: none; }
    .header-top__sep { display: none; }
}
@media (max-width: 768px) {
    .header-kp { display: none; }
    .header-actions .phone-number { display: none; }
    .header-actions .header-phone__call { padding: 6px; }
}

/* Верхняя полоса светлая, как в макете: раньше она была залита --dark, и на
   главной поверх тёмного героя читалась как чёрная плашка — шапка выглядела
   двумя разными сайтами, склеенными по горизонтали. */
.header-top {
    background: var(--gray-100);
    color: var(--gray-500);
    border-bottom: 1px solid var(--gray-200);
    max-height: 60px;
}
.header-top .header-contact-item,
.header-top .header-schedule,
.header-top .header-mail__link { color: var(--gray-500); }
.header-top .header-contact-item--trust { color: var(--dark-700); }
.header-top__sep { background: var(--gray-300); }

/* Воздуха больше: полоса и основная строка выше, элементы внутри не липнут
   друг к другу. Прежние 38 и 68 px делали шапку плотной, как панель админки. */
.header-top-inner { min-height: 46px; }
.header-main-inner { min-height: 84px; gap: 24px; }
.header-contacts { gap: 18px; }
.header-top__actions { gap: 18px; }
.header-actions { gap: 16px; }
.nav { gap: 4px; }
.nav-link { padding: 12px 16px; }
.nav-link--active::after { left: 16px; right: 16px; }
.header-search__input { min-height: 46px; }
.header-kp { min-height: 46px; padding: 0 22px; }
.cart-btn { width: 46px; height: 46px; }

@media (max-width: 1399px) {
    .header-main-inner { gap: 16px; }
    .nav-link { padding: 12px 11px; }
    .nav-link--active::after { left: 11px; right: 11px; }
}
@media (max-width: 767px) {
    .header-main-inner { min-height: 68px; gap: 10px; }
}

/* Поиск в шапке разворачивается влево до логотипа. Меню уезжает не display:none,
   а сжатием ширины с прозрачностью — иначе строка дёргалась бы скачком, а так
   поле «отодвигает» пункты и на их месте оказывается ввод. */
.header-search { transition: max-width .34s cubic-bezier(.4, 0, .2, 1), flex-basis .34s cubic-bezier(.4, 0, .2, 1); }
.header-main-inner .nav {
    overflow: hidden;
    transition: max-width .34s cubic-bezier(.4, 0, .2, 1), opacity .22s ease, margin .34s ease;
    /* Число — только точка, из которой едет анимация схлопывания: max-width
       обязателен, из auto в 0 переход не считается. Держим с запасом над
       фактической шириной меню (778px на Inter): 760 хватало на Manrope,
       и после смены шрифта у «Погрузчики» отрезало последнюю букву. */
    max-width: 820px;
    opacity: 1;
}
.header-main-inner.search-open .nav {
    max-width: 0;
    opacity: 0;
    margin-left: -24px;
    pointer-events: none;
}
.header-main-inner.search-open .header-search {
    max-width: 100%;
    flex-basis: 100%;
}
.header-main-inner.search-open .header-search__input {
    background: #fff;
    border-color: var(--primary);
}

/* Прокрутка выключена — уважаем настройку системы */
@media (prefers-reduced-motion: reduce) {
    .header-search,
    .header-main-inner .nav { transition: none; }
}

/* ==========================================================================
   О компании
   Страница собрана из фактуры, а не из обещаний, поэтому и приёмы взяты у
   каталога: «паспорт базы» повторяет таблицу параметров карточки товара, а
   маршрут металла пронумерован потому, что переделы действительно идут в
   этом порядке. Тёмная панель героя и синее свечение — те же, что на
   контактах: страницы соседние по смыслу и не должны выглядеть чужими.
   ========================================================================== */

.ab-hero {
    background: var(--gray-100);
    /* 131px — высота шапки, дальше крошки отбивает их собственный отступ */
    padding: 131px 0 56px;
}

.ab-hero__crumbs { margin-bottom: 16px; }

.ab-hero__panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
    gap: 48px;
    padding: 56px;
    background: var(--dark);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 24px 60px -20px rgba(27, 28, 27, 0.45);
}

.ab-hero__panel::before {
    content: "";
    position: absolute;
    top: -40%;
    right: -10%;
    width: 62%;
    height: 165%;
    background: radial-gradient(ellipse at center, rgba(201, 79, 8, 0.28) 0%, transparent 62%);
    pointer-events: none;
}

/* Фирменный знак работает фактурой панели, а не картинкой: уходит за край */
.ab-hero__mark {
    position: absolute;
    left: -84px;
    bottom: -140px;
    width: 400px;
    height: 468px;
    background: url("/images/logo-mark.svg") center / contain no-repeat;
    opacity: 0.1;
    pointer-events: none;
}

.ab-hero__body { position: relative; z-index: 2; }

.ab-hero__eyebrow {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-400);
}

.ab-hero__title {
    margin: 0 0 20px;
    font-family: var(--font-heading);
    font-size: clamp(32px, 3.6vw, 52px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--white);
}

.ab-hero__title em {
    display: block;
    font-style: normal;
    color: var(--gray-300);
}

.ab-hero__lead {
    max-width: 30em;
    margin: 0 0 32px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--gray-300);
}

.ab-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Паспорт базы: таблица параметров, как в карточке сортамента --- */

.ab-passport {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 24px 28px 8px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(6px);
}

.ab-passport__cap {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray-400);
}

.ab-passport__row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: baseline;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ab-passport__key {
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-400);
}

.ab-passport__val { margin: 0; }

.ab-passport__val b {
    display: block;
    font-family: var(--font-heading);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--white);
}

.ab-passport__val span {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--gray-400);
}

/* --- Общая шапка секций --- */

.ab-head { max-width: 46em; margin: 0 0 36px; }

.ab-head__title {
    margin: 0 0 12px;
    font-family: var(--font-heading);
    font-size: clamp(24px, 2.4vw, 34px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--dark);
}

.ab-head__lead {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--gray-500);
}

.ab-head--light .ab-head__title { color: var(--white); }
.ab-head--light .ab-head__lead { color: var(--gray-400); }

/* --- Маршрут металла --- */

.ab-route { padding: 64px 0; background: var(--white); }

.ab-route__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.ab-route__step {
    position: relative;
    padding-top: 26px;
    /* ось одинакова на всех тактах: подсветка первого читалась как
       незаконченный прогресс-бар. Акцент несёт срок под заголовком */
    border-top: 2px solid var(--gray-200);
}


.ab-route__num {
    position: absolute;
    top: -13px;
    left: 0;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    background: var(--white);
    border: 2px solid var(--gray-200);
    border-radius: 50%;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-500);
}

.ab-route__title {
    margin: 0 0 4px;
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 600;
    color: var(--dark);
}

.ab-route__time {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--primary);
}

.ab-route__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--gray-500);
}

/* --- Отрасли --- */

.ab-industries { padding: 64px 0; background: var(--gray-100); }

.ab-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

.ab-card {
    padding: 28px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.ab-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.ab-card__title {
    margin: 0 0 6px;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    color: var(--dark);
}

.ab-card__spec {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--primary);
}

.ab-card__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--gray-500);
}

/* Врезка для частного застройщика: тот же макет, другая роль читателя */
.ab-private {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-top: 20px;
    padding: 28px 32px;
    background: var(--primary-light);
    border-radius: var(--radius-lg);
}

.ab-private__title {
    margin: 0 0 8px;
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 600;
    color: var(--dark);
}

.ab-private__text {
    max-width: 52em;
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--dark-700);
}

.ab-private__btn { flex: 0 0 auto; }

/* --- Переделы --- */

.ab-works { padding: 64px 0; background: var(--white); }

.ab-works__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

.ab-work {
    padding-left: 20px;
    border-left: 2px solid var(--gray-200);
}

.ab-work__title {
    margin: 0 0 6px;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    color: var(--dark);
}

.ab-work__spec {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--primary);
}

.ab-work__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--gray-500);
}

.ab-works__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
    font-size: 15px;
    font-weight: 600;
    color: var(--primary);
    transition: gap var(--transition);
}

.ab-works__more:hover { gap: 14px; }

/* --- Правила работы --- */

.ab-rules {
    padding: 64px 0;
    background: var(--dark);
}

.ab-rules__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.ab-rule {
    padding: 28px;
    background: var(--dark);
}

.ab-rule__title {
    margin: 0 0 10px;
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--white);
}

.ab-rule__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--gray-400);
}

/* --- Куда дальше --- */

.ab-next { padding: 64px 0; background: var(--gray-100); }

.ab-next__title {
    margin: 0 0 24px;
    font-family: var(--font-heading);
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 600;
    color: var(--dark);
}

.ab-next__links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.ab-next__link {
    display: block;
    padding: 24px 26px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition), transform var(--transition);
}

.ab-next__link:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.ab-next__name {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 600;
    color: var(--dark);
}

.ab-next__note {
    display: block;
    font-size: 14px;
    line-height: 1.5;
    color: var(--gray-500);
}

/* --- Адаптив --- */

/* Шесть отраслей: ряды 3+3. auto-fit на широком контейнере давал рваный 4+2 */
@media (min-width: 600px) {
    .ab-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1025px) {
    .ab-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
    .ab-hero__panel { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 40px; }
    .ab-route__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
}

@media (max-width: 767px) {
    .ab-hero { padding: 104px 0 40px; }
    .ab-hero__panel { padding: 28px 22px; border-radius: 20px; }
    .ab-hero__mark { display: none; }
    .ab-hero__cta .btn { width: 100%; justify-content: center; }
    .ab-passport { padding: 20px 20px 4px; }
    .ab-passport__row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 0; }
    .ab-route,
    .ab-industries,
    .ab-works,
    .ab-rules,
    .ab-next { padding: 44px 0; }
    .ab-route__list { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .ab-private { flex-direction: column; align-items: flex-start; padding: 24px; }
    .ab-private__btn { width: 100%; justify-content: center; }
    .ab-card { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .ab-next__link,
    .ab-works__more { transition: none; }
}

/* ============================================================
   КАРТОЧКИ УСЛУГ С ФОТО (/uslugi)
   Верх — кадр с производства, низ — белый информационный блок.
   При наведении фото проясняется, а снизу проявляются три
   ключевых параметра; соседние карточки слегка приглушаются.
   ============================================================ */

.svc-grid--photo {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.svc-card--photo {
    position: relative;
    height: 310px;
    padding: 0;
    overflow: hidden;
    border-color: var(--gray-200);
    background: var(--white);
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1),
                border-color 280ms cubic-bezier(0.22, 1, 0.36, 1),
                opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
                filter 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.svc-card--photo:hover,
.svc-card--photo:focus-visible {
    transform: translateY(-5px);
    border-color: rgba(201, 79, 8, 0.45);
    box-shadow: 0 18px 40px rgba(27, 28, 27, 0.12), 0 0 0 3px rgba(201, 79, 8, 0.14);
    outline: none;
}

/* --- Фотография --- */
.svc-card__media {
    position: relative;
    display: block;
    height: 172px;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--dark);
}

.svc-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.82) contrast(1.02) brightness(0.94);
    transform: scale(1.005);
    transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1),
                filter 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

.svc-card--photo:hover .svc-card__img,
.svc-card--photo:focus-visible .svc-card__img {
    transform: scale(1.04);
    filter: saturate(1.06) contrast(1.06) brightness(1.04);
}

/* Холодная сине-графитовая вуаль по умолчанию */
.svc-card__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(28, 56, 100, 0.42) 0%, rgba(12, 24, 48, 0.5) 100%);
    transition: opacity 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

.svc-card--photo:hover .svc-card__veil,
.svc-card--photo:focus-visible .svc-card__veil { opacity: 0; }

/* Тёмная подложка под характеристиками */
.svc-card__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 13, 25, 0) 30%, rgba(8, 13, 25, 0.62) 68%, rgba(8, 13, 25, 0.88) 100%);
    opacity: 0;
    transition: opacity 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.svc-card--photo:hover .svc-card__shade,
.svc-card--photo:focus-visible .svc-card__shade { opacity: 1; }

/* --- Бейдж поверх фото --- */
.svc-card--photo .svc-card__spec {
    position: absolute;
    top: 12px;
    left: 12px;
    margin: 0;
    padding: 5px 11px;
    background: rgba(8, 13, 25, 0.58);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.94);
    font-size: 11.5px;
    transition: opacity 250ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
}

.svc-card--photo:hover .svc-card__spec,
.svc-card--photo:focus-visible .svc-card__spec {
    opacity: 0;
    transform: translateY(-6px);
    background: rgba(8, 13, 25, 0.58);
    color: rgba(255, 255, 255, 0.94);
}

/* --- Три ключевые характеристики --- */
.svc-card__facts {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.svc-card__fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--white);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 300ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.svc-card--photo:hover .svc-card__fact,
.svc-card--photo:focus-visible .svc-card__fact {
    opacity: 1;
    transform: translateY(0);
}

/* Строки проявляются одна за другой — эффект спокойный, без прыжков */
.svc-card--photo:hover .svc-card__fact:nth-child(2),
.svc-card--photo:focus-visible .svc-card__fact:nth-child(2) { transition-delay: 50ms; }

.svc-card--photo:hover .svc-card__fact:nth-child(3),
.svc-card--photo:focus-visible .svc-card__fact:nth-child(3) { transition-delay: 100ms; }

.svc-card__fact-k {
    color: rgba(255, 255, 255, 0.66);
    letter-spacing: 0.01em;
}

.svc-card__fact-v {
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* --- Информационный блок --- */
.svc-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 16px 20px 18px;
}

.svc-card--photo h3 {
    font-size: 15.5px;
    margin-bottom: 5px;
}

.svc-card--photo p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 0;
}

.svc-card--photo .svc-card__more { padding-top: 12px; }

/* Курсор на одной услуге — остальные уходят на второй план */
.svc-grid--photo:has(.svc-card--photo:hover) .svc-card--photo:not(:hover),
.svc-grid--photo:has(.svc-card--photo:focus-visible) .svc-card--photo:not(:focus-visible) {
    opacity: 0.72;
    filter: saturate(0.75);
}

@media (max-width: 1024px) {
    .svc-grid--photo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}

/* На тач-устройствах наведения нет: параметры показываем сразу,
   соседние карточки не приглушаем */
@media (hover: none), (max-width: 767px) {
    .svc-card--photo { height: auto; }
    .svc-card__media { height: 158px; }
    .svc-card__img { filter: saturate(0.95) contrast(1.03) brightness(1); }
    .svc-card__veil { opacity: 0.45; }
    .svc-card__shade { opacity: 1; }
    .svc-card__fact { opacity: 1; transform: none; }
    .svc-card__fact:nth-child(3) { display: none; }
    .svc-card--photo .svc-card__spec { opacity: 0; }
    .svc-grid--photo:has(.svc-card--photo:hover) .svc-card--photo:not(:hover) {
        opacity: 1;
        filter: none;
    }
}

@media (max-width: 767px) {
    .svc-grid--photo { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .svc-card--photo p { display: -webkit-box; }
    .svc-card__body { padding: 14px 18px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .svc-card--photo,
    .svc-card__img,
    .svc-card__veil,
    .svc-card__shade,
    .svc-card__fact,
    .svc-card--photo .svc-card__spec { transition: none; }
    .svc-card--photo:hover .svc-card__img { transform: none; }
}

/* ==========================================================================
   ЕДИНЫЙ ФОН СТРАНИЦ
   Раньше секции чередовали белый и #F6F6F5, а каталог стоял на голубоватом
   градиенте — из-за этого страницы отличались друг от друга оттенком.
   Теперь весь сайт стоит на одном фоне карточки товара (--page-bg), а белыми
   остаются карточки, панели и таблицы: на сером они читаются как отдельные
   блоки, а не сливаются с полосой секции.
   Тёмные секции (hero, «Как мы работаем») не трогаем — они держат ритм.
   ========================================================================== */

.trust-strip,
.section--catalog,
.section--services,
.section--order,
.section--faq,
.section--guide,
.svc-seo,
.why-us-bento,
.geography,
.about-co,
.ct-hero,
.ct-team,
.ct-engineer,
.ct-warehouses,
.ct-req,
.ab-hero,
.ab-route,
.ab-industries,
.ab-works,
.ab-next,
.calc-header {
    background: var(--page-bg);
}

/* Блоки, которые раньше выделялись светло-серым на белом: на новом фоне
   оттенки почти совпали, поэтому переводим их в белый — так они остаются
   отдельными панелями, как карточки в макете товара */
.svc-seo__card,
.svc-caps__media,
.usl-table-wrap,
.price-preview__scroll,
.cat-seo-text table {
    background: var(--white);
}

/* ==========================================================================
   Шапка на телефоне: без горизонтального скролла
   На 320–389 px строка «логотип + действия» была шире экрана (~381 px):
   мобильные правила выше по файлу (логотип 30 px, зазоры 4 px) перебивались
   более поздними базовыми (логотип 34 px, зазоры 16 px), а ссылка «позвонить»
   без номера и без иконки оставалась пустым 12-пиксельным элементом.
   Здесь: иконка трубки вместо скрытого номера, зазоры меньше, логотип может
   сжиматься по ширине, сохраняя пропорции.
   ========================================================================== */
.header-phone__icon { display: none; }
@media (max-width: 768px) {
    .header-phone__icon { display: block; width: 22px; height: 22px; color: var(--primary); }
    .header-actions .header-phone__call { padding: 6px; }
}
@media (max-width: 479px) {
    .header-main-inner { gap: 8px; }
    .header-actions { gap: 6px; }
    .logo { flex: 0 1 auto; min-width: 0; }
    .logo-img { height: auto; max-height: 30px; max-width: 100%; }
}

/* Ссылки в тексте: отличаться от абзаца одним цветом недостаточно (контраст
   синего с серым текстом 1,6:1) — подчёркиваем (аудит 23.08.2026, a11y) */
.about-co__cols p a,
.seo-text p a,
.pv-desc p a,
.faq-answer a,
main p > a:not([class]) {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}