/* ─────────────────────────────────────────────────────────────
   gruzchiki_hub.css — стили шаблона «Хаб Грузчики» (gruzchiki_hub.php).
   Общие хаб-компоненты (отзывы, FAQ, кейсы, финальный CTA, сетка .hub)
   берутся из pereezd_hub.css (подключается ПЕРЕД этим файлом; body несёт
   класс .pereezd-hub-page). Здесь — только специфика грузчиков (.gruz-*)
   и точечные переопределения под макет Figma cR8HaFdEeIVI64fFUtBywm.

   Секции наполняются по мере реализации (Задачи 2, 5–7).
   ───────────────────────────────────────────────────────────── */

/* ─── Самохост Roboto (woff2, @fontsource) ───────────────────────────
   Чтобы шрифт грузился и рендерился ОДИНАКОВО на всех устройствах, без
   зависимости от Google Fonts (правка ТЗ). Веса 400 и 700; субсеты
   cyrillic / latin-ext / latin. Google-Roboto из layout убран. */
@font-face { font-family:'Roboto'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/fonts/roboto/roboto-cyrillic-400-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Roboto'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/fonts/roboto/roboto-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Roboto'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/fonts/roboto/roboto-latin-400-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Roboto'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/fonts/roboto/roboto-cyrillic-700-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Roboto'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/fonts/roboto/roboto-latin-ext-700-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Roboto'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/fonts/roboto/roboto-latin-700-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* Вариативный Roboto (ось веса 100–900) — ТОЛЬКО для подзаголовка hero, чтобы
   задать промежуточный вес 350: 300 оказался слишком тонким, 400 — «жирным». */
@font-face { font-family:'Roboto Var'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('/fonts/roboto/roboto-cyrillic-wght-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Roboto Var'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('/fonts/roboto/roboto-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Roboto Var'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('/fonts/roboto/roboto-latin-wght-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* Сглаживание как в Figma (grayscale AA) — иначе браузер (особенно macOS/iOS)
   рисует текст субпиксельно и он выглядит «жирнее» макета (правка ТЗ). */
.gruzchiki-hub-page {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ══════════════════════════════════════════════════════════════
   HERO грузчиков (Figma 1:170) — градиент + SVG-иллюстрации, без фото.
   ══════════════════════════════════════════════════════════════ */
.gruzchiki-hub-page .gruz-hero { position: relative; }

.gruzchiki-hub-page .gruz-hero__inner {
    position: relative;
    margin-top: 205px;   /* клиренс под фикс-шапкой сайта (как в pereezd_hub) */
    padding: 64px;
    min-height: 457px;
    border-radius: 8px;
    overflow: hidden;
    /* Фон (Figma 1:170): чистый зелёный градиент. */
    background: linear-gradient(252.82deg, #2f9d36 8.886%, #145d3a 95.245%);
}

/* Точечная сетка (Figma 1:191 «Frame»: x580 y232, 376×309, opacity 10%) —
   привязана к координатам макета (сверху-справа), ЗА иллюстрацией; низ обрезается
   панелью. Экспорт Frame.svg пустой (паттерн-заливка не выгрузилась) → воссоздаём. */
.gruzchiki-hub-page .gruz-hero__inner::after {
    content: '';
    position: absolute;
    top: 232px;
    right: 180px;
    width: 376px;
    height: 309px;
    background: radial-gradient(rgba(233, 247, 223, 0.95) 1.5px, transparent 1.9px) 0 0 / 23px 23px;
    opacity: 0.14;
    z-index: 0;
    pointer-events: none;
}

.gruzchiki-hub-page .gruz-hero__content {
    position: relative;
    z-index: 2;
    max-width: 620px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
}
/* Карточка контента (заголовок/описание/кнопки). На десктопе прозрачна —
   layout как раньше; на мобиле получает полупрозрачный фон (см. медиа ≤767). */
.gruzchiki-hub-page .gruz-hero__card {
    align-self: stretch;
    display: flex; flex-direction: column; gap: 24px; align-items: flex-start;
}

/* Заголовок — Montserrat Medium 64, белый, без uppercase/подчёркивания site.css. */
.gruzchiki-hub-page .gruz-hero__title {
    margin: 0;
    padding: 0;
    font-family: Montserrat, Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 64px;
    line-height: 1.0;
    color: #fff;
    text-transform: none;
    text-align: left;
}
.gruzchiki-hub-page .gruz-hero__title::after { content: none; display: none; }

/* Описание (подзаголовок hero). Промежуточный вес 350 через вариативный Roboto
   (300 был слишком тонким, 400 — «жирным»). Применяется и к вложенному <p>. */
.gruzchiki-hub-page .gruz-hero__desc {
    max-width: 554px;
    color: #fff;
    font-family: 'Roboto Var', Roboto, Helvetica, Arial, sans-serif;
    font-weight: 350;
    font-size: 18px;
    line-height: 1.3;
}
.gruzchiki-hub-page .gruz-hero__desc p { margin: 0; font-weight: inherit; }

/* Плашки — стиль наследуется от .hub-hero__badge (pereezd_hub.css). */
.gruzchiki-hub-page .gruz-hero__badges { margin: 0; }

/* Кнопки-мессенджеры (Figma 1:178/1:183). */
.gruzchiki-hub-page .gruz-hero__messengers { display: flex; gap: 27px; flex-wrap: wrap; }
.gruzchiki-hub-page .gruz-hero__msg {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 41px; width: 220px; border-radius: 60px;
    color: #fff; font-family: Roboto, Helvetica, Arial, sans-serif;
    font-weight: 700; font-size: 14px; letter-spacing: 0.42px; text-transform: uppercase;
    text-decoration: none; transition: opacity .2s ease;
}
.gruzchiki-hub-page .gruz-hero__msg:hover,
.gruzchiki-hub-page .gruz-hero__msg:focus { opacity: .92; color: #fff; text-decoration: none; }
.gruzchiki-hub-page .gruz-hero__msg-icon { width: 26px; height: 26px; display: block; }
.gruzchiki-hub-page .gruz-hero__msg--max { background: linear-gradient(90deg, #67e8f9 0%, #a78bfa 100%); }
.gruzchiki-hub-page .gruz-hero__msg--tg  { background: linear-gradient(180deg, #00afea 0%, #00bfff 100%); }
/* Произвольный HTML под кнопками мессенджеров (админка ОТП, messenger_extra_html). */
.gruzchiki-hub-page .gruz-hero__discount { margin-top: 4px; color: #fff; font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.4; }

/* Иллюстрация грузчиков справа (Figma 1:192, 719×517, left 477 top -23). */
.gruzchiki-hub-page .gruz-hero__illustration {
    position: absolute; right: 0; top: 0; bottom: 0;
    width: 63%; pointer-events: none; z-index: 1;
}
.gruzchiki-hub-page .gruz-hero__scene {
    position: absolute; right: 0; bottom: 0;
    height: 100%; width: auto; max-width: none;
    object-fit: cover; object-position: right bottom;
}

/* Декоративный union (бледно-жёлтые арки, Figma 1:187: x969 y308, 168×222).
   ВНУТРИ панели: правый край ≈ на 2px за краем, низ на 74px ниже панели —
   обрезается overflow:hidden, видна только верхушка арок на зелёном фоне. */
.gruzchiki-hub-page .gruz-hero__union {
    position: absolute; right: -2px; bottom: -74px; width: 168px; height: 222px;
    pointer-events: none; z-index: 0;
}

/* Предупреждение админу об отсутствии поддержки фоновых картинок. */
.gruzchiki-hub-page .gruz-hero__admin-warning {
    background: #fff3cd; color: #664d03; border: 1px solid #ffe69c;
    border-radius: 6px; padding: 10px 14px; font-size: 13px; line-height: 1.4;
    max-width: 620px;
}

/* Планшет: чистый вариант без иллюстрации/декора. */
@media (max-width: 991px) {
    .gruzchiki-hub-page .gruz-hero__inner { margin-top: 80px; padding: 40px; min-height: 0; }
    .gruzchiki-hub-page .gruz-hero__content { max-width: 100%; }
    .gruzchiki-hub-page .gruz-hero__title { font-size: 48px; }
    .gruzchiki-hub-page .gruz-hero__illustration,
    .gruzchiki-hub-page .gruz-hero__union { display: none; }
    .gruzchiki-hub-page .gruz-hero__inner::after { content: none; }
}

/* Телефон (Figma mobile 1:172): иллюстрация грузчиков и точки — ЗА контентом,
   кнопки-мессенджеры столбиком на всю ширину, крупный заголовок в 3 строки. */
@media (max-width: 767px) {
    .gruzchiki-hub-page .gruz-hero__inner { padding: 32px; }
    .gruzchiki-hub-page .gruz-hero__content { gap: 15px; }
    .gruzchiki-hub-page .gruz-hero__title { font-size: 48px; }
    /* Полупрозрачная плашка контента (Figma m 1:177: rgba(15,80,44,.4), radius 16).
       Лёгкий стеклянный блюр — иллюстрация грузчиков остаётся видимой (как в макете,
       не «матовое стекло»), плюс светлая обводка-эффект по краю карточки (правка ТЗ). */
    .gruzchiki-hub-page .gruz-hero__card {
        background: rgba(15, 80, 44, 0.4); border-radius: 16px; padding: 16px 12px;
        /* Лёгкое размытие: иллюстрация грузчиков остаётся РАЗБОРЧИВОЙ сквозь плашку
           (как в макете), но края чуть смягчены, чтобы белый текст читался. */
        backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
        border: 1px solid rgba(255, 255, 255, 0.25);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }
    /* Бейдж — как в desktop-версии (стеклянная тёмная плашка .hub-hero__badge),
       НЕ лаймовый вариант макета (правка ТЗ). Стиль наследуется из pereezd_hub.css. */
    .gruzchiki-hub-page .gruz-hero__messengers { flex-direction: column; gap: 16px; width: 100%; }
    .gruzchiki-hub-page .gruz-hero__msg { width: 100%; }

    .gruzchiki-hub-page .gruz-hero__illustration {
        display: block; left: 0; right: 0; top: auto; bottom: 0; width: 100%; height: 62%;
        opacity: 0.9;
    }
    .gruzchiki-hub-page .gruz-hero__scene {
        left: 50%; right: auto; transform: translateX(-50%); height: 100%; width: auto;
    }
    .gruzchiki-hub-page .gruz-hero__inner::after {
        content: ''; top: 157px; left: 45px; right: auto; bottom: auto; width: 376px; height: 309px;
    }
}
@media (max-width: 389px) {
    .gruzchiki-hub-page .gruz-hero__title { font-size: 40px; }
}

/* Шапка секции «Реальные проекты» (Figma 1:507): КЕЙСЫ + H2 + лид, всё слева. */
.gruzchiki-hub-page .gruz-cases__head { text-align: left; margin-bottom: 24px; }
.gruzchiki-hub-page .gruz-cases__head .gruz-h2 { margin: 10px 0 0; }
/* Подзаголовок-лид под H2 «Реальные проекты» (Figma 1:511) — прижат влево. */
.gruzchiki-hub-page .gruz-cases__lead {
    max-width: 100%;
    margin: 10px 0 0;
    text-align: left;
    color: rgba(29, 29, 29, 0.6);
    font-size: 18px;
    line-height: 1.3;
}

/* Видео-карточка кейсов: у .cenron фикс. высота 270px (videomag.php). С доп.
   описанием (showDescription) на мобиле карточка шире → превью выше → описание
   не влезает и вылезает за низ блока. Даём авто-высоту; min-height сохраняет
   прежний вид, где контент помещается. Только для грузчики-хаба (pereezd без описания). */
.gruzchiki-hub-page .hub-cases__panel .cenron {
    height: auto; min-height: 270px; padding-bottom: 14px;
}

/* ══════════════════════════════════════════════════════════════
   «ДЛЯ КОГО НУЖНЫ ГРУЗЧИКИ» — табы (Figma 1:195 / 1:687 / 1:780)
   ══════════════════════════════════════════════════════════════ */
.gruzchiki-hub-page .gruz-pretitle {
    margin: 0;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 2.1px;
    color: #2e5b35;
    text-transform: uppercase;
}
.gruzchiki-hub-page .gruz-audience__head { margin-bottom: 24px; }
.gruzchiki-hub-page .gruz-audience__h2 {
    margin: 10px 0 0;
    font-family: Montserrat, Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 1.5;
    color: #1d1d1d;
    text-transform: none;
    text-align: left;
}
.gruzchiki-hub-page .gruz-audience__h2::after { content: none; display: none; }
.gruzchiki-hub-page .gruz-audience__sub {
    margin: 10px 0 0;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 1.3;
    color: rgba(29, 29, 29, 0.6);
}

.gruzchiki-hub-page .gruz-audience__tabs {
    display: flex;
    gap: 10px;
    border-bottom: 2px solid #d7d7d7;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.gruzchiki-hub-page .gruz-audience__tab {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 4px 16px;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 24px;
    line-height: 1.5;
    color: #333;
    cursor: pointer;
    transition: color .2s, border-color .2s;
}
.gruzchiki-hub-page .gruz-audience__tab.is-active {
    color: #2e5b35;
    border-bottom-color: #2e5b35;
}

.gruzchiki-hub-page .gruz-audience__panel { display: none; }
.gruzchiki-hub-page .gruz-audience__panel.is-active {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.gruzchiki-hub-page .gruz-audience__cols {
    display: flex;
    gap: 20px;
    align-items: stretch;
}
.gruzchiki-hub-page .gruz-audience__cols > * { flex: 1 1 0; min-width: 0; }

.gruzchiki-hub-page .gruz-audience__card {
    background: #f5f7f8;
    border-radius: 8px;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.gruzchiki-hub-page .gruz-audience__card-title { font-family: Roboto, sans-serif; font-size: 18px; line-height: 1.3; color: #333; }
.gruzchiki-hub-page .gruz-audience__card-text { margin: 0; font-family: Roboto, sans-serif; font-size: 14px; line-height: 1.5; color: #333; }
.gruzchiki-hub-page .gruz-audience__greenbox {
    margin-top: auto;
    background: rgba(148, 193, 33, 0.2);
    border: 1px solid #94c121;
    border-radius: 4px;
    padding: 10px 20px;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 2.1px;   /* акцентная разрядка как у меток (Figma) */
    color: #2e5b35;
}

.gruzchiki-hub-page .gruz-audience__services {
    background: #f5f7f8;
    border-radius: 8px;
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}
.gruzchiki-hub-page .gruz-audience__service { display: flex; align-items: center; gap: 10px; }
.gruzchiki-hub-page .gruz-audience__service-ico { width: 24px; height: 24px; flex-shrink: 0; object-fit: contain; }
.gruzchiki-hub-page .gruz-audience__service span {
    font-family: Roboto, sans-serif; font-weight: 700; font-size: 14px; line-height: 1.5;
    letter-spacing: 2.1px; color: rgba(29, 29, 29, 0.6);
}

.gruzchiki-hub-page .gruz-audience__prices { display: flex; flex-direction: column; gap: 20px; justify-content: center; }
.gruzchiki-hub-page .gruz-audience__price { background: #f5f7f8; border-radius: 8px; padding: 8px 24px; }
.gruzchiki-hub-page .gruz-audience__price-label {
    display: block; font-family: Roboto, sans-serif; font-weight: 700; font-size: 14px; line-height: 1.5;
    letter-spacing: 2.1px; color: rgba(29, 29, 29, 0.6);
}
.gruzchiki-hub-page .gruz-audience__price-value {
    display: block; font-family: Roboto, sans-serif; font-weight: 700; font-size: 18px; line-height: 1.3; color: #2e5b35;
}

.gruzchiki-hub-page .gruz-audience__table-wrap { overflow-x: auto; max-width: 100%; min-width: 0; }
.gruzchiki-hub-page .gruz-audience__panel { min-width: 0; }
.gruzchiki-hub-page .gruz-audience__table {
    width: 100%; border-collapse: collapse; background: #fff;
    border-radius: 4px; overflow: hidden;
}
.gruzchiki-hub-page .gruz-audience__table th {
    background: #333; color: #fff; font-family: Roboto, sans-serif; font-weight: 700; font-size: 18px; line-height: 1.3;
    padding: 10px; text-align: left;
}
.gruzchiki-hub-page .gruz-audience__table th.gruz-audience__col-price { text-align: center; width: 120px; }
.gruzchiki-hub-page .gruz-audience__table td {
    padding: 10px; font-family: Roboto, sans-serif; font-size: 14px; line-height: 1.5; color: #333;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.2); vertical-align: middle;
}
.gruzchiki-hub-page .gruz-audience__table tr:last-child td { border-bottom: none; }
.gruzchiki-hub-page .gruz-audience__td-name { white-space: nowrap; }
/* Цена — зелёная (#2e5b35). Селектор с `td.` перебивает общее правило
   `.gruz-audience__table td { color:#333 }` (иначе цена рендерилась серой). */
.gruzchiki-hub-page .gruz-audience__table td.gruz-audience__td-price {
    font-weight: 700; color: #2e5b35; text-align: right; width: 120px; white-space: nowrap;
}

.gruzchiki-hub-page .gruz-audience__note {
    background: #f6fce9; border-left: 2px solid #94c121; border-radius: 4px;
    padding: 24px 16px; font-family: Roboto, sans-serif; font-style: italic; font-size: 14px; line-height: 1.5;
    color: rgba(29, 29, 29, 0.6);
}

.gruzchiki-hub-page .gruz-audience__cta {
    align-self: center;
    appearance: none; border: none; cursor: pointer;
    background: #ffdd2d; border-radius: 60px; height: 41px; padding: 0 24px;
    font-family: Roboto, sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.42px;
    text-transform: uppercase; color: #333;
    transition: filter .2s;
}
.gruzchiki-hub-page .gruz-audience__cta:hover { filter: brightness(0.95); }

@media (max-width: 991px) {
    /* Общие заголовки секций на мобиле = стиль H2_mob (Figma mobile):
       Montserrat Regular 400, 28/1.5 — НЕ Medium 500 (правка ТЗ: «шрифт не
       соответствует макету»). Лид-подзаголовок = Roboto 18 (как H4 в макете). */
    .gruzchiki-hub-page .gruz-h2 { font-size: 28px; line-height: 1.5; font-weight: 400; }
    .gruzchiki-hub-page .gruz-sub { font-size: 18px; }

    .gruzchiki-hub-page .gruz-audience__h2 { font-size: 28px; line-height: 1.5; font-weight: 400; }
    .gruzchiki-hub-page .gruz-audience__sub { font-size: 16px; }
    .gruzchiki-hub-page .gruz-audience__cols { flex-direction: column; }
    /* Табы — одна строка с горизонтальным скроллом (как в макете mobile). */
    .gruzchiki-hub-page .gruz-audience__tabs {
        flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .gruzchiki-hub-page .gruz-audience__tabs::-webkit-scrollbar { display: none; }
    /* Шрифт вкладок = Roboto 20 (Figma H3_mob). Подчёркивание активной вкладки —
       через inset box-shadow: negative-margin у скролл-контейнера обрезается
       (overflow-x:auto делает и overflow-y:auto), а inset-тень — нет. */
    .gruzchiki-hub-page .gruz-audience__tab {
        font-size: 20px; padding: 4px 16px; white-space: nowrap; flex-shrink: 0;
        border-bottom: none; margin-bottom: 0;
    }
    .gruzchiki-hub-page .gruz-audience__tab.is-active { box-shadow: inset 0 -2px 0 #2e5b35; }
}
@media (max-width: 575px) {
    .gruzchiki-hub-page .gruz-audience__table td { font-size: 14px; padding: 8px; }
}

/* Общие заголовки секций */
.gruzchiki-hub-page .gruz-h2 {
    margin: 10px 0 0;
    font-family: Montserrat, Helvetica, Arial, sans-serif;
    font-weight: 500; font-size: 40px; line-height: 1.5; color: #1d1d1d;
    text-transform: none; text-align: left;
}
.gruzchiki-hub-page .gruz-h2::after { content: none; display: none; }
.gruzchiki-hub-page .gruz-sub {
    margin: 10px 0 0; font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 18px; line-height: 1.3; color: rgba(29, 29, 29, 0.6);
}

/* ── СЦЕНАРИИ (Figma 1:293) ── */
.gruzchiki-hub-page .gruz-scenarios { padding: 32px 15px; }
.gruzchiki-hub-page .gruz-scenarios__grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.gruzchiki-hub-page .gruz-scenarios__card {
    flex: 1 1 340px; min-width: 280px; padding: 24px;
    display: flex; flex-direction: column; gap: 8px;
}
.gruzchiki-hub-page .gruz-scenarios__card-head { display: flex; align-items: center; gap: 8px; min-height: 64px; }
.gruzchiki-hub-page .gruz-scenarios__ico { width: 73px; height: 64px; flex-shrink: 0; object-fit: contain; }
.gruzchiki-hub-page .gruz-scenarios__card-title { font-family: Roboto, sans-serif; font-size: 18px; line-height: 1.3; color: #000; }
.gruzchiki-hub-page .gruz-scenarios__card-text { margin: 0; font-family: Roboto, sans-serif; font-size: 14px; line-height: 1.5; color: #000; }

/* Телефон (Figma m 1:290): сетка 2 колонки, иконка НАД заголовком. */
@media (max-width: 767px) {
    .gruzchiki-hub-page .gruz-scenarios__grid { gap: 28px 16px; }
    .gruzchiki-hub-page .gruz-scenarios__card { flex: 1 1 calc(50% - 8px); min-width: 0; padding: 0; }
    .gruzchiki-hub-page .gruz-scenarios__card-head { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 0; }
    /* Иконка — как в макете mobile (73×64), не уменьшаем.
       Заголовок карточки = H4 (Roboto 18/1.3) как в макете — НЕ уменьшаем до 16
       (правка ТЗ: размер заголовка относительно подзаголовка). Наследуется из базы. */
}

/* ── СКОРОСТЬ И ГАРАНТИИ (Figma 1:304) ── */
.gruzchiki-hub-page .gruz-speed { display: flex; gap: 24px; align-items: stretch; padding: 32px 15px; }
.gruzchiki-hub-page .gruz-speed__intro {
    flex: 0 0 461px; max-width: 461px; background: #f5f7f8; border-radius: 16px; padding: 20px;
    display: flex; flex-direction: column; gap: 10px;
}
.gruzchiki-hub-page .gruz-speed__pretitle { color: #94c121; }
.gruzchiki-hub-page .gruz-speed__h2 {
    margin: 0; font-family: Montserrat, sans-serif; font-weight: 500; font-size: 40px; line-height: 1.5; color: #333;
    text-transform: none; text-align: left;
}
.gruzchiki-hub-page .gruz-speed__h2::after { content: none; display: none; }
.gruzchiki-hub-page .gruz-speed__sub { margin: 0; font-family: Roboto, sans-serif; font-size: 18px; line-height: 1.3; color: rgba(29, 29, 29, 0.6); }
.gruzchiki-hub-page .gruz-speed__cards {
    flex: 1 1 0; min-width: 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; align-items: start;
}
.gruzchiki-hub-page .gruz-speed__card {
    min-width: 0; border-top: 3px solid #94c121; padding-top: 12px;
    display: flex; flex-direction: column; gap: 10px;
}
.gruzchiki-hub-page .gruz-speed__stat { min-height: 90px; display: flex; flex-direction: column; justify-content: center; }
.gruzchiki-hub-page .gruz-speed__big { font-family: Montserrat, sans-serif; font-weight: 700; font-size: 40px; line-height: 1.3; color: #333; }
.gruzchiki-hub-page .gruz-speed__label { font-family: Roboto, sans-serif; font-weight: 700; font-size: 18px; line-height: 1.3; color: #333; }
.gruzchiki-hub-page .gruz-speed__mid { font-family: Roboto, sans-serif; font-weight: 700; font-size: 24px; line-height: 1.4; color: #333; overflow-wrap: break-word; }
.gruzchiki-hub-page .gruz-speed__desc { margin: 0; font-family: Roboto, sans-serif; font-size: 14px; line-height: 1.5; color: #333; }

/* ── ДОВЕРИЕ И ОПЫТ (Figma 1:323) ── */
.gruzchiki-hub-page .gruz-trust { padding: 32px 15px; }
.gruzchiki-hub-page .gruz-trust__inner {
    background: linear-gradient(144.5deg, #2e5b35 0%, #223d2e 90.5%);
    border-radius: 16px; padding: 32px 20px; color: #fff;
}
.gruzchiki-hub-page .gruz-trust__pretitle {
    margin: 0; font-family: Roboto, sans-serif; font-weight: 700; font-size: 14px; line-height: 1.5;
    letter-spacing: 2.1px; text-transform: uppercase; color: #fff;
}
.gruzchiki-hub-page .gruz-trust__h2 {
    margin: 10px 0 0; max-width: 520px;
    font-family: Montserrat, sans-serif; font-weight: 500; font-size: 40px; line-height: 1.5; color: #fff;
    text-transform: none; text-align: left;
}
.gruzchiki-hub-page .gruz-trust__h2::after { content: none; display: none; }
.gruzchiki-hub-page .gruz-trust__sub { margin: 10px 0 0; max-width: 600px; font-family: Roboto, sans-serif; font-size: 18px; line-height: 1.3; color: #d7d7d7; }
.gruzchiki-hub-page .gruz-trust__cards { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.gruzchiki-hub-page .gruz-trust__card {
    flex: 1 1 200px; min-width: 190px; min-height: 196px; background: rgba(255, 255, 255, 0.1);
    border: 1px solid #d7d7d7; border-radius: 16px; padding: 24px 20px;
    display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
}
.gruzchiki-hub-page .gruz-trust__big { font-family: Roboto, sans-serif; font-weight: 700; font-size: 40px; line-height: 1.15; color: #fff; }
.gruzchiki-hub-page .gruz-trust__text { margin: 0; font-family: Roboto, sans-serif; font-size: 18px; line-height: 1.3; color: #f5f7f8; }

/* Телефон (Figma m 1:344): карточки доверия в один столбец и КОМПАКТНЫЕ —
   заголовок и текст рядом, без большого зазора и min-height. */
@media (max-width: 767px) {
    .gruzchiki-hub-page .gruz-trust__cards { gap: 16px; }
    .gruzchiki-hub-page .gruz-trust__card {
        flex-basis: 100%; min-width: 0; min-height: 0;
        justify-content: flex-start; gap: 8px; padding: 20px;
    }
    .gruzchiki-hub-page .gruz-trust__big { font-size: 22px; }
    .gruzchiki-hub-page .gruz-trust__text { font-size: 15px; }
}

/* ── НАШ ТАКЕЛАЖНЫЙ ПАРК (Figma 1:342) ── */
.gruzchiki-hub-page .gruz-fleet-wrap { padding: 32px 15px; }
.gruzchiki-hub-page .gruz-fleet {
    background: #f5f7f8; border-radius: 16px; padding: 32px 20px;
    display: flex; flex-direction: column; gap: 24px;
}
.gruzchiki-hub-page .gruz-fleet__title { margin: 0; font-family: Roboto, sans-serif; font-size: 24px; line-height: 1.5; color: #2e5b35; }
.gruzchiki-hub-page .gruz-fleet__sub { margin: 0; font-family: Roboto, sans-serif; font-size: 18px; line-height: 1.3; color: rgba(29, 29, 29, 0.6); }
.gruzchiki-hub-page .gruz-fleet__grid { display: flex; flex-wrap: wrap; gap: 20px; }
.gruzchiki-hub-page .gruz-fleet__card {
    flex: 1 1 180px; min-width: 170px; min-height: 100px; background: #fff;
    border: 1px solid #d7d7d7; border-radius: 8px; padding: 24px;
    display: flex; flex-direction: column; gap: 8px; justify-content: center;
}
.gruzchiki-hub-page .gruz-fleet__card-head { display: flex; align-items: center; gap: 8px; }
.gruzchiki-hub-page .gruz-fleet__ico { width: 32px; height: 28px; flex-shrink: 0; object-fit: contain; }
.gruzchiki-hub-page .gruz-fleet__name { font-family: Roboto, sans-serif; font-weight: 700; font-size: 14px; line-height: 1.5; color: #1d1d1d; }
.gruzchiki-hub-page .gruz-fleet__meta { font-family: Roboto, sans-serif; font-size: 14px; line-height: 1.5; color: rgba(29, 29, 29, 0.6); }

@media (max-width: 991px) {
    .gruzchiki-hub-page .gruz-h2, .gruzchiki-hub-page .gruz-speed__h2, .gruzchiki-hub-page .gruz-trust__h2 { font-size: 28px; font-weight: 400; line-height: 1.5; }
    .gruzchiki-hub-page .gruz-speed { flex-direction: column; }
    .gruzchiki-hub-page .gruz-speed__intro { flex-basis: auto; max-width: none; }
}

/* ── ГЕОГРАФИЯ (Figma 1:355) ── */
.gruzchiki-hub-page .gruz-geo { padding: 32px 15px; }
.gruzchiki-hub-page .gruz-geo__body { display: flex; gap: 20px; align-items: flex-start; margin-top: 16px; }
.gruzchiki-hub-page .gruz-geo__left { flex: 1 1 480px; min-width: 280px; }
.gruzchiki-hub-page .gruz-geo__text { margin: 0 0 24px; font-family: Roboto, sans-serif; font-size: 18px; line-height: 1.3; color: rgba(29, 29, 29, 0.6); max-width: 538px; }
.gruzchiki-hub-page .gruz-geo__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gruzchiki-hub-page .gruz-geo__tag {
    display: inline-block; padding: 2px 10px; background: #f5f7f8; border: 1px solid #d7d7d7; border-radius: 4px;
    font-family: Roboto, sans-serif; font-size: 14px; line-height: 1.5; color: #2e5b35; text-decoration: none;
}
.gruzchiki-hub-page a.gruz-geo__tag:hover { background: #e6ebe7; border-color: #2e5b35; }
.gruzchiki-hub-page .gruz-geo__dot { color: #2e5b35; }
.gruzchiki-hub-page .gruz-geo__more { font-family: Roboto, sans-serif; font-size: 14px; color: rgba(29, 29, 29, 0.6); }
.gruzchiki-hub-page .gruz-geo__map { flex: 1 1 480px; min-width: 280px; }
.gruzchiki-hub-page .gruz-geo__map img { display: block; width: 100%; max-width: 560px; height: auto; margin-left: auto; }

/* ── ПРОЦЕСС РАБОТЫ (Figma 1:476) — серые карточки, номер бледно-серый,
   заголовок тёмно-зелёный, пунктирные связки между карточками ── */
.gruzchiki-hub-page .gruz-process { padding: 32px 15px; }
.gruzchiki-hub-page .gruz-process__steps { position: relative; display: flex; gap: 12px; margin-top: 32px; align-items: stretch; }
/* Волнистая пунктирная связка (Figma 1:480) — одна кривая за карточками;
   непрозрачные карточки перекрывают её, оставляя пунктир только в зазорах. */
.gruzchiki-hub-page .gruz-process__line {
    position: absolute; left: 3.3%; top: 20px; width: 93.8%; height: 82px;
    z-index: 0; pointer-events: none;
}
.gruzchiki-hub-page .gruz-process__step {
    flex: 1 1 0; min-width: 0; position: relative; z-index: 1;
    background: #f5f7f8; border-radius: 8px; padding: 16px 10px;
    display: flex; flex-direction: column; gap: 12px;
}
.gruzchiki-hub-page .gruz-process__num {
    font-family: Montserrat, sans-serif; font-weight: 500; font-size: 40px; line-height: 1.2; color: #d7d7d7;
    margin-bottom: 8px;
}
/* 24px на макетных ширинах (десктоп и мобайл 450px — там «Подтверждение» влезает).
   На телефонах уже 450px плавно уменьшаем 24→18px, чтобы длинное слово оставалось
   в одну строку и не переносило последнюю букву (clamp по ширине вьюпорта). */
.gruzchiki-hub-page .gruz-process__step-title { margin: 0; font-family: Roboto, sans-serif; font-weight: 700; font-size: clamp(18px, calc(18px + 6 * (100vw - 360px) / 90), 24px); line-height: 1.5; color: #0f502c; overflow-wrap: break-word; }
.gruzchiki-hub-page .gruz-process__step-text { margin: 0; font-family: Roboto, sans-serif; font-size: 14px; line-height: 1.5; color: rgba(29, 29, 29, 0.6); }

/* Телефон (Figma m 1:492): шаги процесса — сетка 2 колонки (2,2,1).
   Карточки шире секции (в макете ряд карточек full-bleed, а шапка — с отступом),
   поэтому тянем ряд отрицательными полями до ширины карточки 212px как в макете —
   чтобы длинный заголовок «Подтверждение» (24px) помещался в строку. */
@media (max-width: 767px) {
    .gruzchiki-hub-page .gruz-process__steps { gap: 24px 16px; margin-left: -10px; margin-right: -10px; }
    .gruzchiki-hub-page .gruz-process__step { flex: 1 1 calc(50% - 8px); min-width: 0; }
    /* Заголовок шага «Заявка/Расчёт…» = 24px (Roboto Bold) как в макете mobile —
       НЕ уменьшаем до 18 (правка ТЗ). Наследуется из базы. */
}

/* ── ГАРАНТИИ (Figma 1:556) ── */
.gruzchiki-hub-page .gruz-guarantees { padding: 32px 15px 40px; }
.gruzchiki-hub-page .gruz-guarantees__cards { display: flex; gap: 20px; margin-top: 20px; align-items: stretch; }
.gruzchiki-hub-page .gruz-guarantees__card { flex: 1 1 0; min-width: 0; border: 1px solid #f4f4f4; border-radius: 16px; }
.gruzchiki-hub-page .gruz-guarantees__checklist { padding: 32px 24px; display: flex; flex-direction: column; gap: 11px; justify-content: center; }
.gruzchiki-hub-page .gruz-guarantees__check { display: flex; align-items: center; gap: 10px; }
.gruzchiki-hub-page .gruz-guarantees__check-ico { width: 24px; height: 24px; flex-shrink: 0; }
.gruzchiki-hub-page .gruz-guarantees__check span { font-family: Roboto, sans-serif; font-size: 14px; line-height: 1.5; color: #000; }
.gruzchiki-hub-page .gruz-guarantees__contract { padding: 48px 24px; display: flex; gap: 20px; align-items: flex-start; }
.gruzchiki-hub-page .gruz-guarantees__pdf-ico { width: 40px; height: 40px; flex-shrink: 0; }
.gruzchiki-hub-page .gruz-guarantees__contract-body { display: flex; flex-direction: column; gap: 11px; align-items: flex-start; }
.gruzchiki-hub-page .gruz-guarantees__contract-title { font-family: Roboto, sans-serif; font-weight: 700; font-size: 24px; line-height: 1.5; color: #333; }
.gruzchiki-hub-page .gruz-guarantees__contract-sub { margin: 0; font-family: Roboto, sans-serif; font-size: 18px; line-height: 1.3; color: rgba(29, 29, 29, 0.6); }
.gruzchiki-hub-page .gruz-guarantees__download {
    display: inline-flex; align-items: center; gap: 8px; height: 41px; padding: 0 24px;
    border: 1px solid rgba(29, 29, 29, 0.6); border-radius: 60px;
    font-family: Roboto, sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.42px;
    text-transform: uppercase; color: rgba(29, 29, 29, 0.6); text-decoration: none; transition: all .2s;
}
.gruzchiki-hub-page a.gruz-guarantees__download:hover { border-color: #2e5b35; color: #2e5b35; }
.gruzchiki-hub-page .gruz-guarantees__download-ico { width: 24px; height: 24px; }
.gruzchiki-hub-page .gruz-guarantees__download--disabled { opacity: 0.55; cursor: default; }

/* Процесс: ниже 1200px переходим на 2 колонки (широкие карточки), а не держим
   5 в ряд — иначе на ~1000–1150px карточки узкие и «Подтверждение» (24px) снова
   переносит последнюю букву. В 2 колонки карточки заведомо широкие → одна строка. */
@media (max-width: 1199px) {
    .gruzchiki-hub-page .gruz-process__steps { flex-wrap: wrap; }
    .gruzchiki-hub-page .gruz-process__step { flex: 0 1 calc(50% - 8px); min-width: 0; }
    .gruzchiki-hub-page .gruz-process__line { display: none; }
}

@media (max-width: 991px) {
    .gruzchiki-hub-page .gruz-geo__body { flex-direction: column; align-items: stretch; }
    /* В колонке flex-basis 480px превращается в min-height → большие пустоты.
       Сбрасываем, чтобы блоки занимали высоту по контенту. */
    .gruzchiki-hub-page .gruz-geo__left,
    .gruzchiki-hub-page .gruz-geo__map { flex: 0 0 auto; }
    .gruzchiki-hub-page .gruz-geo__map img { margin: 0 auto; }
    .gruzchiki-hub-page .gruz-guarantees__cards { flex-direction: column; }
    .gruzchiki-hub-page .gruz-guarantees__contract { padding: 32px 24px; }
}

/* ══════════════════════════════════════════════════════════════
   Финальный CTA «БЫСТРЫЙ РАСЧЕТ» (Figma 1:662) — зелёный градиент,
   телефон-плашка + мессенджеры.
   ══════════════════════════════════════════════════════════════ */
.gruzchiki-hub-page .gruz-calc { padding: 32px 15px 48px; }
.gruzchiki-hub-page .gruz-calc__inner {
    position: relative; overflow: hidden;
    border-radius: 8px; padding: 28px 36px;
    display: flex; flex-direction: column; align-items: center; gap: 20px;
    text-align: center;
    /* Фоновый паттерн (Figma 1:663 pattern0): точный тайл 288×213 из макета —
       фон #2E5B35 + лаймовые (#94C121) грузо-иконки, всё под opacity 0.1,
       поверх зелёного градиента (241.2°, #2f9d36 8.886% → #145d3a 95.245%). */
    background:
        url('/image/gruzchiki_hub/moving-pattern.svg') 0 0 / 288px 213px repeat,
        linear-gradient(241.2deg, #2f9d36 8.886%, #145d3a 95.245%);
}
.gruzchiki-hub-page .gruz-calc__head { display: flex; flex-direction: column; gap: 4px; }
.gruzchiki-hub-page .gruz-calc__pretitle {
    margin: 0; font-family: Roboto, Helvetica, Arial, sans-serif; font-weight: 700; font-size: 14px;
    line-height: 1.5; letter-spacing: 2.1px; text-transform: uppercase; color: #fff;
}
.gruzchiki-hub-page .gruz-calc__title {
    margin: 0; font-family: Montserrat, Helvetica, Arial, sans-serif; font-weight: 700; font-size: 36px;
    line-height: 1.2; color: #fff; text-transform: none; text-align: center;
}
.gruzchiki-hub-page .gruz-calc__title::after { content: none; display: none; }
.gruzchiki-hub-page .gruz-calc__sub {
    margin: 0; font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 24px;
    line-height: 1.5; color: #fff;
}
.gruzchiki-hub-page .gruz-calc__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.gruzchiki-hub-page .gruz-calc__msgs { display: flex; gap: 10px; }
.gruzchiki-hub-page .gruz-calc__phone {
    display: inline-flex; align-items: center; gap: 5px; height: 50px; padding: 0 32px;
    background: #ffe500; border-radius: 24px; text-decoration: none;
    font-family: 'Inter', Roboto, Helvetica, Arial, sans-serif; font-weight: 700; font-size: 26px;
    text-transform: uppercase; color: #333; white-space: nowrap; transition: filter .2s;
}
.gruzchiki-hub-page .gruz-calc__phone:hover, .gruzchiki-hub-page .gruz-calc__phone:focus { filter: brightness(0.96); color: #333; text-decoration: none; }
.gruzchiki-hub-page .gruz-calc__phone-ico { display: block; width: 26px; height: 26px; }
/* Кнопки-мессенджеры (Figma 1:676 / 1:678): одинаковые жёлтые плашки #FFE500,
   border-radius 24, внутри тёмная иконка 26×26 (#333). TG и MAX идентичны. */
.gruzchiki-hub-page .gruz-calc__msg {
    display: inline-flex; align-items: center; justify-content: center;
    width: 50px; height: 50px; border-radius: 24px; transition: filter .2s;
}
.gruzchiki-hub-page .gruz-calc__msg--tg { background: #ffe500; }
.gruzchiki-hub-page .gruz-calc__msg--max { background: #ffe500; }
.gruzchiki-hub-page .gruz-calc__msg:hover, .gruzchiki-hub-page .gruz-calc__msg:focus { filter: brightness(0.96); }
.gruzchiki-hub-page .gruz-calc__msg-ico { width: 26px; height: 26px; display: block; }

@media (max-width: 767px) {
    /* Скорость: 2×2 сетка статов на телефоне (как в макете mobile 1:325). */
    .gruzchiki-hub-page .gruz-speed__cards { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
    /* Большие числа «2 часа»/«24/7» = 40px (Montserrat Bold) как в макете mobile —
       НЕ уменьшаем до 34 (правка ТЗ). Наследуется из базы. */
    .gruzchiki-hub-page .gruz-calc__actions { flex-direction: column; }
    /* «Нужно понять стоимость?» = Montserrat Bold 28/1.5; переносится в 2 строки
       за счёт padding карточки 28/36 (как в макете mobile 1:678). Подзаголовок =
       Roboto Regular 20 (H3_mob) (правка ТЗ). */
    .gruzchiki-hub-page .gruz-calc__title { font-size: 28px; line-height: 1.5; }
    .gruzchiki-hub-page .gruz-calc__sub { font-size: 20px; }
    .gruzchiki-hub-page .gruz-calc__phone { font-size: 20px; padding: 0 24px; }
    .gruzchiki-hub-page .gruz-calc__inner { padding: 28px 36px; }
}