/*
Theme Name: Fuel B2B
Author: Your Company
Version: 1.0
Description: Корпоративная тема для сайта «Эталон» / Топливные карты B2B
*/

/* ==========================================================================
   СОДЕРЖАНИЕ СТИЛЕЙ / TABLE OF CONTENTS
   ==========================================================================
   1. ПЕРЕМЕННЫЕ И БАЗОВЫЕ СТИЛИ (CSS Variables, Reset, Body, Container)
   2. ОБЩИЕ КОМПОНЕНТЫ, КНОПКИ И УТИЛИТЫ (Buttons, Badges, Helpers)
   3. ШАПКА САЙТА (Top Bar, Site Header, Desktop Nav & Dropdown)
   4. МОБИЛЬНОЕ МЕНЮ И ШТОРКА (Hamburger, Overlay, Drawer, Mobile Nav & Actions)
   5. СЕКЦИИ ГЛАВНОЙ СТРАНИЦЫ (FRONT PAGE):
      5.1. Hero-экран (Первый экран, 3D-карта, бейджи, партнеры)
      5.2. Сравнение цен на топливо и расчет экономии
      5.3. Секция «О компании» (Статистика, видео и видео-модалка)
      5.4. Топливная карта (Швейцарский минимализм, крупные номера, сетка преимуществ)
      5.5. Секция «1500+ АЗС» (Интерактивная SVG-карта покрытия)
      5.6. Секция «Топливо оптом» — v2 (.wholesale-v2 / .ws2-*)
   6. ВНУТРЕННИЕ СТРАНИЦЫ:
      6.1. Страница «Контакты» — v2 (.contacts-v2 / .ct2-*) в конце файла;
         старые правила 6.1 (карточки, .req-card, .docs-download-card) разметкой не используются
      6.2. Страницы «Карта АЗС» (Обычная страница и полноэкранный фрейм)
   7. МОДАЛЬНОЕ ОКНО ЗАЯВКИ (LEAD MODAL / POPUP):
      7.1. Каркас модального окна и оверлей
      7.2. Левая колонка (Тёмная)
      7.3. Правая колонка (Форма сбора лида)
      7.4. Валидация и системные ошибки
      7.5. Состояние успешной отправки
      7.6. Мобильная адаптация попапа
   8. ОБЩИЕ МЕДИА-ТОЧКИ (GLOBAL BREAKPOINTS)
   9. ПОДВАЛ САЙТА (SITE FOOTER)
  10. МОБИЛЬНАЯ АДАПТАЦИЯ (СТУПЕНИ 992 / 768 / 576 / 375)
   ========================================================================== */

/* ==========================================================================
   1. ПЕРЕМЕННЫЕ И БАЗОВЫЕ СТИЛИ
   ========================================================================== */
:root {
	--font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Основные фирменные цвета */
    --color-primary: #E42D24;         /* Фирменный красный «Эталон» */
    --color-primary-hover: #C82119;   /* Красный при наведении */
    --color-primary-light: #FFF1EE;   /* Пастельная красная подложка для бейджей */
    
    /* Зеленый акцент (выгода / НДС / кнопки конверсии) */
    --color-success: #16A34A;
    --color-success-hover: #15803D;
    --color-success-bg: #F0FDF4;
    --color-success-border: #BBF7D0;
    
    --btn-gradient: linear-gradient(to bottom right, #e42d24, #ef7016);
    --btn-gradient-hover: linear-gradient(to bottom right, #c7241c, #d95e0c);

    /* Текст и нейтральные фоны */
    --color-text-main: #0F172A;       /* Основной глубокий темный текст */
    --color-text-muted: #64748B;      /* Второстепенный серый текст */
    --color-bg-page: #FFFFFF;
    --color-bg-alt: #F8FAFC;          /* Фоновый цвет секции «О компании» */
    --color-bg-subtle: #F1F5F9;       /* Цвет неактивных табов / подложек */
    --color-border: #E2E8F0;          /* Основной цвет рамок карточек */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    font-family: var(--font-main);
    background-color: var(--color-bg);
    color: var(--color-text-main);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: 1640px;
    margin: 0 auto;
    padding: 0 32px;
}

/* ==========================================================================
   2. ОБЩИЕ КОМПОНЕНТЫ, КНОПКИ И УТИЛИТЫ
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    border-radius: 9999px;
    text-decoration: none;
    transition: all 0.25s ease;
    cursor: pointer;
    outline: none;
    box-sizing: border-box;
}

/* Красная градиентная кнопка "Стать клиентом" */
.btn-primary {
    padding: 12px 28px;
    background: var(--btn-gradient);
    color: #FFFFFF;
    border: 2px solid transparent;
    box-shadow: 0 4px 14px rgba(228, 45, 36, 0.25);
}

.btn-primary:hover {
    background: var(--btn-gradient-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(228, 45, 36, 0.38);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(228, 45, 36, 0.25);
}

/* Зеленая контурная кнопка "Где заправиться?" */
.btn-outline-green {
    background-color: transparent;
    color: #16A34A;
    border: 2px solid #16A34A;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.08);
}

.btn-outline-green:hover {
    background-color: rgba(22, 163, 74, 0.07);
    border-color: #15803D;
    color: #15803D;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.22);
}

.btn-outline-green:active {
    transform: translateY(0);
}

.btn-with-sub {
    padding: 7px 22px;
    gap: 10px;
}

.btn-icon {
    flex-shrink: 0;
    stroke: #16A34A;
    transition: transform 0.2s ease;
}

.btn-outline-green:hover .btn-icon {
    transform: translateY(-1px);
    stroke: #15803D;
}

.btn-text-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
}

.btn-main-text {
    font-size: 17px;
    font-weight: 700;
}

.btn-sub-text {
    font-size: 13px;
    font-weight: 500;
    opacity: 0.85;
}

.btn-sm {
    padding: 9px 22px;
    font-size: 15px;
}

/* Вспомогательные классы отступов и размеров */
.w-100 {
    width: 100%;
}

.mb-12 {
    margin-bottom: 12px;
}

.mb-16 {
    margin-bottom: 16px;
}

/* ==========================================================================
   5.2 (v2). Цены на топливо — крупная цена + калькулятор выгоды
   Добавьте в КОНЕЦ style.css. Всё завёрнуто в .prices-v2, старые стили
   секции (.price-card и др.) можно оставить или позже удалить.
   ========================================================================== */
.fuel-prices-section.prices-v2 {
    --pr-bg: #000;                      /* ваш --color-text-main как фон */
    --pr-ink: #F8FAFC;
    --pr-muted: #A5B1C4;                   /* контраст на --pr-bg ≈ 7.6:1 */
    --pr-line: rgba(165, 177, 196, 0.24);
    --pr-accent: #FF8A3D;                  /* светлый оттенок вашего оранжевого для текста на тёмном */

    padding: 130px 0 100px;
    background: var(--pr-bg);
    color: var(--pr-ink);
    border-top: 0;
}

/* ---------- Шапка ---------- */
.prices-v2 .pr2-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    margin-bottom: 65px;
}


.prices-v2 .pr2-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--pr-muted);
    margin-bottom: 10px;
}

.prices-v2 .pr2-live-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pr-accent);
}
.prices-v2 .pr2-live-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--pr-accent);
    animation: pr2-pulse 2s ease-out infinite;
}
@keyframes pr2-pulse {
    0%   { transform: scale(1);   opacity: .55; }
    100% { transform: scale(3.2); opacity: 0; }
}

.prices-v2 .pr2-title {
    font-size: clamp(30px, 3.2vw, 46px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--pr-ink);
}

.prices-v2 .pr2-subtitle {
    margin-top: 8px;
    max-width: 60ch;
    font-size: 17px;
    line-height: 1.5;
    color: var(--pr-muted);
}

/* ---------- Вкладки (перебивают старые .fuel-tabs) ---------- */
.prices-v2 .fuel-tabs {
    margin-bottom: 35px;
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--pr-line);
    border-radius: 9999px;
}

.prices-v2 .fuel-tab-btn {
    min-height: 44px;
    padding: 10px 22px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--pr-muted);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.prices-v2 .fuel-tab-btn:hover { color: var(--pr-ink); }
.prices-v2 .fuel-tab-btn.active {
    background: var(--pr-ink);
    color: var(--pr-bg);
    box-shadow: none;
}
.prices-v2 .fuel-tab-btn:focus-visible,
.prices-v2 .pr2-range:focus-visible,
.prices-v2 .pr2-calc-btn:focus-visible {
    outline: 3px solid var(--pr-accent);
    outline-offset: 3px;
}

/* ---------- Главная цена + вторичные ---------- */
.prices-v2 .pr2-board {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 56px;
    align-items: end;
    padding-bottom: 44px;
    border-bottom: 1px solid var(--pr-line);
}

.prices-v2 .pr2-label {
    font-size: 16px;
    font-weight: 500;
    color: var(--pr-muted);
    margin-bottom: 8px;
}

.prices-v2 .pr2-hero-value {
    display: flex;
    align-items: baseline;
    gap: 0.14em;
    font-size: clamp(72px, 9.5vw, 148px);
    line-height: 0.95;
    white-space: nowrap;
}

.prices-v2 .pr2-hero-num {
    font-weight: 700;
    letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
    color: var(--pr-ink);
}

.prices-v2 .pr2-hero-num.is-updated { animation: pr2-swap .4s ease-out; }
@keyframes pr2-swap {
    from { opacity: .25; transform: translateY(10px); }
    to   { opacity: 1;   transform: none; }
}

.prices-v2 .pr2-hero-unit {
    font-size: 0.2em;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--pr-muted);
}

.prices-v2 .pr2-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--pr-muted);
}
.prices-v2 .pr2-note svg { flex-shrink: 0; }

.prices-v2 .pr2-side {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.prices-v2 .pr2-stat { padding: 18px 0; }
.prices-v2 .pr2-stat:first-child { padding-top: 0; border-bottom: 1px solid var(--pr-line); }
.prices-v2 .pr2-stat:last-child { padding-bottom: 0; }

.prices-v2 .pr2-stat-value {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: clamp(44px, 4.4vw, 64px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.prices-v2 .pr2-stat-unit {
    font-size: 0.36em;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--pr-muted);
}
.prices-v2 .pr2-stat .pr2-note { margin-top: 10px; }

.prices-v2 .pr2-stat--gain .pr2-stat-value > span:first-child { color: var(--pr-accent); }

/* ---------- Калькулятор ---------- */
.prices-v2 .pr2-calc {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
    margin-top: 44px;
}

.prices-v2 .pr2-calc-row {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.prices-v2 .pr2-calc-label {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--pr-ink);
    max-width: 30ch;
}

.prices-v2 .pr2-calc-liters {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--pr-ink);
}

/* Ползунок */
.prices-v2 .pr2-range {
    --fill: 9%;
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 44px;                 /* область нажатия */
    margin: 0;
    background: transparent;
    cursor: pointer;
}
.prices-v2 .pr2-range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 9999px;
    background: linear-gradient(to right, #EF7016 0, #E42D24 var(--fill), rgba(255,255,255,.16) var(--fill));
}
.prices-v2 .pr2-range::-moz-range-track {
    height: 6px;
    border-radius: 9999px;
    background: rgba(255,255,255,.16);
}
.prices-v2 .pr2-range::-moz-range-progress {
    height: 6px;
    border-radius: 9999px;
    background: linear-gradient(to right, #EF7016, #E42D24);
}
.prices-v2 .pr2-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
    margin-top: -11px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 0;
    box-shadow: 0 0 0 4px rgba(239,112,22,.35), 0 2px 8px rgba(0,0,0,.4);
}
.prices-v2 .pr2-range::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 0;
    box-shadow: 0 0 0 4px rgba(239,112,22,.35), 0 2px 8px rgba(0,0,0,.4);
}

.prices-v2 .pr2-range-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
    font-size: 13px;
    color: var(--pr-muted);
}

.prices-v2 .pr2-calc-caption {
    font-size: 16px;
    font-weight: 500;
    color: var(--pr-muted);
    margin-bottom: 6px;
}

.prices-v2 .pr2-calc-total {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 16px;
    font-size: clamp(44px, 4.4vw, 64px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--pr-accent);
    white-space: nowrap;
}
.prices-v2 .pr2-calc-cur { font-size: 0.6em; font-weight: 600; }

.prices-v2 .pr2-calc-btn {
    padding: 15px 34px;
    min-height: 52px;
}

.prices-v2 .pr2-footnote {
    margin-top: 24px;
    max-width: 110ch;
    font-size: 13px;
    line-height: 1.55;
    color: var(--pr-muted);
}

/* ---------- Адаптив ---------- */
@media (max-width: 992px) {
    .fuel-prices-section.prices-v2 { padding: 80px 0 90px; }

    .prices-v2 .pr2-head { margin-bottom: 44px; }
    .prices-v2 .pr2-board,
    .prices-v2 .pr2-calc { grid-template-columns: 1fr; gap: 40px; }

    .prices-v2 .pr2-board { padding-bottom: 44px; }
    .prices-v2 .pr2-calc { margin-top: 44px; }

    .prices-v2 .pr2-side {
        flex-direction: row;
        gap: 32px;
    }
    .prices-v2 .pr2-stat { flex: 1; padding: 0; }
    .prices-v2 .pr2-stat:first-child {
        border-bottom: 0;
        border-right: 1px solid var(--pr-line);
        padding-right: 32px;
    }
}

@media (max-width: 640px) {
    .fuel-prices-section.prices-v2 { padding: 64px 0 72px; }

    .prices-v2 .fuel-tabs {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border-radius: 9999px;
    }
    .prices-v2 .fuel-tab-btn { padding: 10px 4px; text-align: center; }

    .prices-v2 .pr2-side { flex-direction: column; gap: 0; }
    .prices-v2 .pr2-stat { padding: 24px 0; }
    .prices-v2 .pr2-stat:first-child {
        padding: 0 0 24px;
        border-right: 0;
        border-bottom: 1px solid var(--pr-line);
    }
    .prices-v2 .pr2-stat:last-child { padding-bottom: 0; }

    .prices-v2 .pr2-calc-row { flex-direction: column; gap: 8px; }
    .prices-v2 .pr2-calc-label { font-size: 18px; max-width: none; }
    .prices-v2 .pr2-calc-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .prices-v2 .pr2-live-dot::after,
    .prices-v2 .pr2-hero-num.is-updated { animation: none; }
}

/* ==========================================================================
   5.3 (v2). О компании — крупная типографика, видео, цифры в ряд
   Добавьте в КОНЕЦ style.css (после блока цен). Всё завёрнуто в .about-v2,
   старые .stat-card / .about-grid / .about-title можно оставить или удалить позже.
   Стили видео-модалки (.video-modal-*) не менялись.
   ========================================================================== */
.about-section.about-v2 {
    --ab-ink: #0F172A;
    --ab-body: #475569;        /* контраст на #F8FAFC ≈ 7.2:1 */
    --ab-muted: #64748B;       /* только для крупного текста */
    --ab-line: #CBD5E1;

    padding: 130px 0 120px;
    background: #F8FAFC;
    border-top: 0;
}

/* ---------- Верх: текст + видео ---------- */
.about-v2 .ab2-top {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 80px;
    align-items: stretch;
}

.about-v2 .ab2-title {
    font-size: clamp(34px, 3.6vw, 56px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: var(--ab-ink);
}
.about-v2 .ab2-title-sub {
    display: block;
    margin-top: 6px;
    color: var(--ab-muted);
}

.about-v2 .ab2-lead {
    margin: 28px 0 0;
    max-width: 52ch;
    font-size: 18px;
    line-height: 1.6;
    color: var(--ab-body);
}

.about-v2 .ab2-cta { padding: 15px 34px; min-height: 52px; }
.about-v2 .ab2-cta:focus-visible,
.about-v2 #aboutVideoBox:focus-visible {
    outline: 3px solid #E42D24;
    outline-offset: 4px;
}

/* ---------- Видео (перебивает старую высоту 100% / min-height 520px) ---------- */
.about-v2 .about-video-wrapper.ab2-video {
    height: 100%;
    min-height: 320px;
    aspect-ratio: unset;
    border-radius: 28px;
    box-shadow: 0 30px 60px -20px rgba(15, 23, 42, 0.28);
}
.about-v2 .ab2-video .about-video-el { height: 100%; }


/* Постоянная подпись «Смотреть ролик» (span внутри #aboutVideoBox запрещены старым CSS) */
.about-v2 .ab2-play-pill {
    position: absolute;
    left: 24px;
    bottom: 24px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 24px 8px 8px;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #FFFFFF;
    pointer-events: none;
}
.about-v2 .ab2-play-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--btn-gradient);
    flex-shrink: 0;
}
.about-v2 .ab2-play-icon svg { margin-left: 2px; }
.about-v2 .ab2-play-text { display: flex; flex-direction: column; line-height: 1.25; }
.about-v2 .ab2-play-text strong { font-size: 16px; font-weight: 600; }
.about-v2 .ab2-play-text em { font-style: normal; font-size: 13px; color: #CBD5E1; }

/* На устройствах без мыши плавающий Play не нужен: есть подпись */
@media (hover: none) {
    .about-v2 #aboutVideoBox #videoPlayBtn { display: none !important; }
}

/* ---------- Цифры ---------- */
.about-v2 .ab2-stats {
    display: grid;
    grid-template-columns: max-content 1fr 1fr minmax(max-content, 1fr);
    gap: 0;
    margin: 88px 0 0;
    padding-top: 48px;
    border-top: 1px solid var(--ab-line);
}

.about-v2 .ab2-stat {
    padding: 0 clamp(20px, 2.2vw, 36px);
    border-left: 1px solid var(--ab-line);
}
.about-v2 .ab2-stat:first-child { padding-left: 0; border-left: 0; max-width: 280px; }
.about-v2 .ab2-stat:last-child { padding-right: 0; }

.about-v2 .ab2-stat-num {
    font-size: clamp(34px, 3.8vw, 68px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--ab-ink);
	white-space: nowrap;
}
.about-v2 .ab2-stat-num small {
    font-size: 0.36em;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--ab-muted);
}

.about-v2 .ab2-stat-label {
    margin: 16px 0 0;
    max-width: 24ch;
    font-size: 25px;
    line-height: 1.5;
    color: var(--ab-body);
}



/* ---------- Адаптив ---------- */
@media (max-width: 992px) {
    .about-section.about-v2 { padding: 80px 0 80px; }

    .about-v2 .ab2-top { grid-template-columns: 1fr; gap: 40px; align-items: stretch; }
    .about-v2 .about-video-wrapper.ab2-video { height: auto; aspect-ratio: 16 / 9; min-height: 0; }
    .about-v2 .ab2-lead { margin: 22px 0 0; }

    .about-v2 .ab2-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 32px;
        margin-top: 56px;
        padding-top: 0;
        border-top: 0;
    }
    .about-v2 .ab2-stat,
    .about-v2 .ab2-stat:first-child,
    .about-v2 .ab2-stat:last-child {
        padding: 24px 0 0;
        border-left: 0;
        border-top: 1px solid var(--ab-line);
    }
}

@media (max-width: 520px) {
    .about-section.about-v2 { padding: 60px 0 64px; }

    .about-v2 .about-video-wrapper.ab2-video {
        aspect-ratio: 1 / 1;
        border-radius: 22px;
    }
    .about-v2 .ab2-video .about-video-el { object-position: 72% 50%; }
    .about-v2 .ab2-play-pill { left: 14px; bottom: 14px; }

    .about-v2 .ab2-stats { grid-template-columns: 1fr; gap: 28px; margin-top: 44px; }
    .about-v2 .ab2-stat-num { font-size: 44px; }
}


@media (prefers-reduced-motion: reduce) {
    .about-v2 .about-video-wrapper:hover .about-video-el { transform: none; }
}

/* ==========================================================================
   3. ШАПКА САЙТА (TOP BAR И SITE HEADER)
   ========================================================================== */
/* --- 3.1. Верхняя служебная полоса (Top Bar) --- */
.top-bar {
    background-color: #FFFFFF;
    border-bottom: none;
    font-size: 14px;
    color: var(--color-text-muted);
    padding: 12px 0 12px;
}

.top-bar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 52px;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.top-bar-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.top-bar-item svg {
    stroke: var(--color-text-muted);
    width: 16px;
    height: 16px;
}

.status-online {
    color: var(--color-text-main);
    font-weight: 600;
}

/* Пульсирующая точка статуса процессинга */
.pulse-dot {
    width: 9px;
    height: 9px;
    background-color: var(--color-success);
    border-radius: 50%;
    display: inline-block;
    position: relative;
    flex-shrink: 0;
}

.pulse-dot::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    background-color: var(--color-success);
    opacity: 0.5;
    animation: pulse-ring 1.8s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

@keyframes pulse-ring {
    0% { transform: scale(0.9); opacity: 0.6; }
    50% { transform: scale(2.2); opacity: 0; }
    100% { transform: scale(0.9); opacity: 0; }
}

.top-link {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    transition: color 0.2s;
}

.top-link:hover {
    color: var(--color-text-main);
}

.lk-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: opacity 0.2s;
}

.lk-link svg {
    stroke: var(--color-primary);
    width: 16px;
    height: 16px;
}

.lk-link:hover {
    opacity: 0.85;
}

/* --- 3.2. Основная шапка сайта: Единая плашка меню (Белая заливка) --- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-bottom: none;
    box-shadow: none;
    padding: 0;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header.is-scrolled {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border: none;
    border-bottom: none;
    padding: 15px 0 0 0;
}

/* Меню прячется при скролле вниз, возвращается при скролле вверх */
.site-header.header-hidden {
    transform: translateY(-105%);
}

.header-container {
    max-width: 1640px;
    margin: 0 auto;
    padding: 0 32px;
    box-sizing: border-box;
    width: 100%;
}

/* Единая цельная белая плашка */
.header-nav-plate,
.header-pill-nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #FFFFFF;
    background: #FFFFFF;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 14px 18px 14px 20px;
    box-shadow: 0 8px 28px -4px rgba(15, 23, 42, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    pointer-events: auto;
    width: 100%;
    min-height: 56px;
    box-sizing: border-box;
}

.site-header.is-scrolled .header-nav-plate,
.site-header.is-scrolled .header-pill-nav {
    background-color: #FFFFFF;
    background: #FFFFFF;
    box-shadow: 0 12px 36px -4px rgba(15, 23, 42, 0.12), 0 4px 10px rgba(15, 23, 42, 0.05);
}

/* 1. Логотип (левая колонка плашки) */
.brand-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    transition: opacity 0.2s ease;
    pointer-events: auto;
    flex-shrink: 0;
}

.brand-logo:hover {
    opacity: 0.85;
    transform: none;
    background: transparent;
    box-shadow: none;
}

.site-header.is-scrolled .brand-logo {
    background: transparent;
    border: none;
    box-shadow: none;
}

.logo-img {
    height: 33px;
    width: auto;
    display: block;
}

/* 2. Навигация (прижата к логотипу слева) */
.header-nav {
    display: flex;
    align-items: center;
    margin-left: 26px;
}

.header-nav .nav-list {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.header-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #334155;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    padding: 9px 18px;
    border-radius: 9999px;
    transition: color 0.2s ease;
    white-space: nowrap;
    line-height: 1.2;
}

.header-nav a:hover {
    color: var(--color-primary);
    background: transparent;
}

/* Подчёркивание пунктов меню в стиле футера (scaleX-анимация) */
.header-nav .nav-list > li > a::after {
    content: '';
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 4px;
    height: 1px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-nav .nav-list > li > a:hover::after {
    transform: scaleX(1);
}

/* Выпадающее меню (Услуги) */
.has-dropdown {
    position: relative;
}

.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}

.arrow-icon {
    stroke: #64748B;
    width: 10px;
    height: 6px;
    transition: transform 0.25s ease, stroke 0.2s ease;
}

.has-dropdown:hover .arrow-icon {
    transform: rotate(180deg);
    stroke: var(--color-primary);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    width: 340px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 18px;
    padding: 10px;
    list-style: none;
    box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.06);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.25s ease;
    pointer-events: none;
    z-index: 1050;
}

/* Мостик от случайного схлопывания при переходе курсора */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    height: 18px;
    background: transparent;
}

.has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.dropdown-menu li {
    margin-bottom: 3px;
}

.dropdown-menu li:last-child {
    margin-bottom: 0;
}

.dropdown-menu a {
    display: block;
    padding: 11px 15px;
    border-radius: 12px;
    transition: background-color 0.15s ease, transform 0.15s ease;
    white-space: normal;
}

.dropdown-menu a:hover {
    background: #F8FAFC;
    transform: translateX(3px);
}

.drop-title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-main);
}

.drop-desc {
    display: block;
    font-size: 12.5px;
    color: var(--color-text-muted);
    margin-top: 2px;
    line-height: 1.35;
}

/* 3. Кнопки действий: «Карта АЗС» видна всегда, «Оформить карту» раскрывается после скролла */
.header-actions,
.pill-nav-actions {
    display: inline-flex;
    align-items: center;
    gap: 0; /* пока кнопка одна — зазора нет; появляется вместе со второй при скролле */
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
    transition: gap 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.site-header.is-scrolled .header-actions,
.site-header.is-scrolled .pill-nav-actions {
    gap: 10px;
}

/* Кнопка "Карта АЗС" в плашке — видна всегда */
.pill-btn-map {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    color: #15803D;
    font-size: 14px;
    font-weight: 600;
    padding: 9px 17px;
    border-radius: 9999px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
    line-height: 1.2;
}

.pill-btn-map:hover {
    background: #DCFCE7;
    border-color: #86EFAC;
    color: #166534;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(22, 101, 52, 0.12);
}

.pill-btn-map .pill-btn-icon {
    stroke: #16A34A;
    flex-shrink: 0;
}

/* Кнопка "Оформить карту" в плашке */
.pill-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--btn-gradient);
    border: 1px solid transparent;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    padding: 9px 20px;
    border-radius: 9999px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 3px 12px rgba(228, 45, 36, 0.25);
    transition: all 0.2s ease;
    cursor: pointer;
    line-height: 1.2;
}

.pill-btn-primary:hover {
    background: var(--btn-gradient-hover);
    transform: translateY(-1px);
    box-shadow: 0 5px 18px rgba(228, 45, 36, 0.38);
    color: #FFFFFF;
}

/* Состояние «до скролла»: кнопка схлопнута в 0 (без рамки — иначе 2px торчат за экран),
   но «Карта АЗС» рядом с ней видна всегда */
.pill-btn-primary {
    max-width: 0;
    opacity: 0;
    border-width: 0;
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateX(12px) scale(0.96);
    transition: max-width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.25s ease,
                padding 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header.is-scrolled .pill-btn-primary {
    max-width: 200px;
    opacity: 1;
    border-width: 1px;
    padding-left: 20px;
    padding-right: 20px;
    overflow: visible;
    pointer-events: auto;
    transform: translateX(0) scale(1);
}

/* Иконка ЛК в шапке: на десктопе скрыта, показывается только в бургер-режиме (≤1300px) */
.header-lk-btn {
    display: none;
}

/* ==========================================================================
   4. МОБИЛЬНОЕ МЕНЮ И ШТОРКА (NAV DRAWER)
   ========================================================================== */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 7px;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    z-index: 1001;
    flex-shrink: 0;
    box-sizing: border-box;
    pointer-events: auto;
    transition: all 0.2s ease;
}

.menu-toggle:hover {
    background: transparent;
    border: none;
    transform: none;
}

.menu-toggle:hover .hamburger-line {
    background-color: var(--color-primary);
}

.hamburger-line {
    display: block;
    width: 28px;
    height: 2px;
    background-color: #0F172A;
    border-radius: 2px;
    transition: all 0.25s ease;
}

/* Оверлей (затемнение фона) */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

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

/* Выдвижная шторка меню */
.mobile-menu-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 380px;
    height: 100%;
    background: #FFFFFF;
    box-shadow: -8px 0 30px rgba(15, 23, 42, 0.15);
    z-index: 1999;
    display: flex;
    flex-direction: column;
    transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
}

.mobile-menu-drawer.active {
    right: 0;
}

/* Бургер превращается в крестик, когда шторка открыта (класс вешает app.js).
   Смещение = высота полоски + gap: 2 + 7 = 9px (на ≤768 — 2 + 6 = 8px) */
.menu-toggle.is-active .hamburger-line:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.menu-toggle.is-active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.menu-toggle.is-active .hamburger-line:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* Шторка открыта: она накрывает шапку целиком, над ней остаётся только
   бургер-крестик — плашка становится прозрачной, лого и кнопки гаснут */
body.drawer-open .site-header {
    z-index: 2000;
}

body.drawer-open .header-nav-plate,
body.drawer-open .site-header.is-scrolled .header-nav-plate {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body.drawer-open .brand-logo,
body.drawer-open .header-nav,
body.drawer-open .header-actions {
    opacity: 0;
    pointer-events: none;
}

.mobile-drawer-body {
    padding: 8px 24px 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.mobile-nav-list {
    list-style: none;
    margin-bottom: 32px;
}

.mobile-nav-list li {
    border-bottom: 1px solid #F1F5F9;
}

.mobile-nav-link {
    display: block;
    padding: 14px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-main);
    text-decoration: none;
}

.mobile-sub-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    font-size: 18px;
    font-weight: 600;
    font-family: inherit;
    color: var(--color-text-main);
    background: none;
    border: none;
    cursor: pointer;
}

.mobile-arrow {
    transition: transform 0.25s ease;
    stroke: var(--color-text-muted);
}

.mobile-has-sub.open .mobile-arrow {
    transform: rotate(180deg);
    stroke: var(--color-primary);
}

.mobile-sub-menu {
    list-style: none;
    padding: 0 0 12px 16px;
    display: none;
}

.mobile-has-sub.open .mobile-sub-menu {
    display: block;
}

.mobile-sub-menu li {
    border-bottom: none;
}

.mobile-sub-menu a {
    display: block;
    padding: 8px 0;
    font-size: 16px;
    color: var(--color-text-muted);
    text-decoration: none;
}

.mobile-sub-menu a:hover {
    color: var(--color-primary);
}

.mobile-actions {
    margin-top: auto;
}

/* Кнопка "Где заправиться?" в мобильной шторке */
.mobile-map-btn {
    min-height: 52px;
    padding: 10px 20px;
    justify-content: center;
    border-radius: 9999px;
}

.mobile-map-btn .btn-text-group {
    align-items: flex-start;
}

.mobile-map-btn .btn-main-text {
    font-size: 16px;
    font-weight: 700;
}

.mobile-map-btn .btn-sub-text {
    font-size: 12px;
    opacity: 0.85;
}

/* Красная кнопка в мобилке строго той же высоты */
.mobile-actions .btn-primary {
    min-height: 52px;
    font-size: 16px;
    border-radius: 9999px;
}

/* Плашка входа в Личный кабинет */
.mobile-contacts-box {
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mobile-phone-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 700;
    color: var(--color-text-main);
    text-decoration: none;
}

.mobile-phone-link svg {
    stroke: var(--color-primary);
}

.mobile-lk-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    border-radius: 12px;
    background: #F8FAFC;
    color: var(--color-text-main);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--color-border);
    transition: all 0.2s ease;
}

.mobile-lk-btn svg {
    stroke: var(--color-primary);
}

.mobile-lk-btn:hover {
    background: #FFFFFF;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ==========================================================================
   5. СЕКЦИИ ГЛАВНОЙ СТРАНИЦЫ (FRONT PAGE)
   ========================================================================== */

/* ==========================================================================
   5.0. НОВАЯ ГЛАВНАЯ ШАПКА ПО ЭСКИЗУ 1920 (BENTO HERO 3x2)
   ========================================================================== */
.modern-bento-section {
    position: relative;
    padding: 36px 0 54px 0;
    background: #FFFFFF;
    border-bottom: 1px solid #F1F5F9;
}

.modern-bento-container {
    max-width: 1640px;
    margin: 0 auto;
    padding: 0 32px;
    box-sizing: border-box;
    width: 100%;
}

.modern-bento-grid {
    display: grid;
    grid-template-columns: 1fr 1.32fr 1fr;
    grid-template-rows: minmax(290px, auto) minmax(310px, auto);
    gap: 28px;
    align-items: stretch;
    width: 100%;
}

/* Явная раскладка для 3x2 сетки на десктопе */
.modern-bento-grid > .card-region { grid-column: 1; grid-row: 2; }
.modern-bento-grid > .modern-bento-center-top { grid-column: 2; grid-row: 1; }
.modern-bento-grid > .card-control { grid-column: 3; grid-row: 1; }
.modern-bento-grid > .card-russia { grid-column: 1; grid-row: 1; }
.modern-bento-grid > .modern-bento-center-bottom { grid-column: 2; grid-row: 2; }
.modern-bento-grid > .bento-features-column { grid-column: 3; grid-row: 2; }

/* Общие стили для карточек */
.modern-bento-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 24px;
    padding: 26px 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.modern-bento-card:hover {
    border-color: #CBD5E1;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
}

.bento-card-top {
    margin-bottom: 16px;
}

.bento-card-num {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    color: #0F172A;
    letter-spacing: -0.5px;
}

.bento-card-sub {
    font-size: 19px;
    font-weight: 700;
    color: #334155;
    margin-top: 4px;
}

.bento-card-desc {
    font-size: 13.5px;
    font-weight: 500;
    color: #64748B;
    margin-top: 6px;
    line-height: 1.4;
}

/* 1. Верх-Лево: Бегущие строки брендов Забайкальского края в блоке 150 АЗС */
.card-region .bento-ticker-wrapper {
    margin-top: auto;
    padding-top: 10px;
}

/* 2. Центр-Верх: Главный оффер (одна карта много азс легко) */
.modern-bento-center-top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 12px 16px;
}

/* На десктопе обёртка нейтральна: заголовок и кнопки идут столбцом по центру */
.bento-offer-row {
    display: contents;
}

.modern-bento-title {
    font-size: clamp(52px, 5vw, 76px);
    line-height: 1;
    font-weight: 700;
    color: #0F172A;
    text-transform: lowercase;
    letter-spacing: -2px;
    margin: 0 0 35px 0;
    white-space: nowrap;
}

/* Кнопки в едином стиле сайта (Стать клиентом и Где заправиться) */
.modern-bento-actions {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.modern-bento-actions .btn-primary {
    padding: 13px 32px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 9999px;
    box-shadow: 0 4px 16px rgba(228, 45, 36, 0.3);
}

.modern-bento-actions .btn-outline-green {
    padding: 7px 22px !important;
    border-radius: 9999px;
}

/* 3. Верх-Право: Контроль сотрудников (интерактивные тумблеры + блокировка) */
.card-control {
    position: relative;
    transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.4s ease, 
                box-shadow 0.4s ease, 
                transform 0.25s ease;
}

/* Состояние при блокировке: плавный переход в красный цвет */
.card-control.is-locked {
    background-color: #FEF2F2 !important;
    border-color: #F87171 !important;
    box-shadow: 0 14px 38px rgba(220, 38, 38, 0.16), 0 2px 8px rgba(220, 38, 38, 0.08) !important;
}

.card-control.is-locked .bento-card-num {
    color: #991B1B;
    transition: color 0.3s ease;
}

.card-control.is-locked .bento-card-sub {
    color: #B91C1C;
    transition: color 0.3s ease;
}

/* Бейдж замка справа сверху внутри блока */
.card-lock-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: #FEE2E2;
    color: #DC2626;
    border: 1px solid #FCA5A5;
    border-radius: 9999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    cursor: pointer;
    user-select: none;
    opacity: 0;
    transform: translateY(-8px) scale(0.85);
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), 
                transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color 0.2s ease;
}

.card-control.is-locked .card-lock-badge {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    animation: lockBadgePulse 2.2s infinite;
}

.card-lock-badge:hover {
    background: #FECDD3;
    transform: scale(1.04);
}

@keyframes lockBadgePulse {
    0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
    70% { box-shadow: 0 0 0 7px rgba(220, 38, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

.lock-badge-icon {
    flex-shrink: 0;
}

/* Список тумблеров */
.bento-toggles-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
}

.bento-toggle-item {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    padding: 6px 10px;
    margin: 0 -10px;
    border-radius: 12px;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.18s ease, transform 0.12s ease;
}

.bento-toggle-item:hover {
    background-color: rgba(241, 245, 249, 0.85);
}

.card-control.is-locked .bento-toggle-item:hover {
    background-color: rgba(254, 226, 226, 0.6);
}

.bento-toggle-item:active {
    transform: scale(0.97);
}

/* Переключатель (Switch track) */
.bento-switch {
    width: 44px;
    height: 26px;
    border-radius: 9999px;
    background-color: #CBD5E1;
    position: relative;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
    flex-shrink: 0;
}

.bento-toggle-item.active .bento-switch {
    background-color: #16A34A;
    box-shadow: 0 0 10px rgba(22, 163, 74, 0.35);
}

/* Кнопка тумблера (Knob) с физикой отскока iOS */
.bento-knob {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #FFFFFF;
    position: absolute;
    top: 3px;
    left: 3px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bento-toggle-item:active .bento-knob {
    width: 23px;
}

.bento-toggle-item.active .bento-knob {
    transform: translateX(18px);
}

.bento-toggle-label {
    font-size: 14px;
    font-weight: 600;
    color: #0F172A;
    line-height: 1.25;
    transition: color 0.2s ease, font-weight 0.2s ease;
}

.bento-toggle-item:not(.active) .bento-toggle-label {
    color: #64748B;
    font-weight: 500;
}

/* Разделитель перед тумблером блокировки */
.bento-toggle-divider {
    height: 1px;
    background: #E2E8F0;
    margin: 4px 0;
    transition: background-color 0.3s ease;
}

.card-control.is-locked .bento-toggle-divider {
    background: #FECDD3;
}

/* 4. Особый тумблер: Заблокировать */
.toggle-lock .bento-switch {
    background-color: #CBD5E1;
}

.toggle-lock.active .bento-switch {
    background-color: #EF4444;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.38);
}

.toggle-lock .lock-knob {
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-lock .knob-icon {
    transition: all 0.2s ease;
}

.toggle-lock .lock-icon-closed {
    display: none;
    color: #DC2626;
}

.toggle-lock .lock-icon-open {
    display: block;
    color: #64748B;
}

.toggle-lock.active .lock-icon-closed {
    display: block;
}

.toggle-lock.active .lock-icon-open {
    display: none;
}

.toggle-lock .lock-label {
    font-weight: 700;
    color: #334155;
}

.toggle-lock.active .lock-label {
    color: #DC2626;
    font-weight: 700;
}

/* Бегущие строки брендов (Блок 150 АЗС Забайкальский край) */
.bento-ticker-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    padding: 6px 0;
}

.bento-ticker-row {
    display: flex;
    overflow: hidden;
    user-select: none;
    width: 100%;
    contain: paint;
}

.bento-ticker-track {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    width: max-content;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.bento-pill {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 6px 13px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 9999px;
    font-size: 12.5px;
    font-weight: 600;
    color: #1E293B;
    transform: translate3d(0, 0, 0);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.bento-pill.highlight {
    background: #E42D24;
    border-color: #E42D24;
    color: #FFFFFF;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(228, 45, 36, 0.28);
}

.bento-pill.highlight:hover {
    background: #CC231B;
    border-color: #CC231B;
}

@keyframes bentoScrollLeft {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes bentoScrollRight {
    0% {
        transform: translate3d(-50%, 0, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

.row-left .bento-ticker-track {
    animation: bentoScrollLeft 36s linear infinite;
}

.row-right .bento-ticker-track {
    animation: bentoScrollRight 40s linear infinite;
}

.row-left-fast .bento-ticker-track {
    animation: bentoScrollLeft 32s linear infinite;
}

.bento-ticker-row:hover .bento-ticker-track,
.bento-ticker-row:active .bento-ticker-track,
.bento-ticker-row:focus-within .bento-ticker-track {
    animation-play-state: paused;
}

/* ==========================================================================
   4. Низ-Лево: 1500+ АЗС Россия (Карта РФ)
   ========================================================================== */
.card-russia {
    justify-content: flex-start;
}

.card-russia .bento-card-top {
    margin-bottom: 12px;
}

.bento-map-container {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
}

.bento-russia-map-box {
    position: relative;
    width: 100%;
    aspect-ratio: 1676 / 866;
    overflow: hidden;
    border-radius: 14px;
    background: radial-gradient(ellipse at 50% 55%, rgba(241, 245, 249, 0.65) 0%, rgba(255, 255, 255, 0) 72%);
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.bento-russia-map-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(15, 23, 42, 0.04));
    transition: filter 0.3s ease, transform 0.3s ease;
    user-select: none;
    -webkit-user-drag: none;
}

.bento-russia-map-box:hover .bento-russia-map-img {
    filter: drop-shadow(0 6px 16px rgba(228, 45, 36, 0.1));
    transform: scale(1.01);
}

/* 5. Центр-Низ: Увеличенная топливная карта «Эталон» */
.modern-bento-center-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
}

.modern-card-showcase {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 520px;
    perspective: 1000px;
}

.modern-card-img {
    max-width: 500px;
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.18), 0 6px 18px rgba(15, 23, 42, 0.08);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}

.modern-card-img:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 32px 65px rgba(15, 23, 42, 0.24), 0 10px 24px rgba(15, 23, 42, 0.12);
}

/* 6. Низ-Право: 3 отдельных блока преимуществ */
.bento-features-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    justify-content: space-between;
}

.bento-feature-card {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 20px;
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
    transition: all 0.25s ease;
    box-sizing: border-box;
}

.bento-feature-card:hover {
    border-color: #CBD5E1;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
}

.feature-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vat-icon {
    background: rgba(22, 163, 74, 0.1);
    color: #16A34A;
}

.contract-icon {
    background: rgba(2, 132, 199, 0.1);
    color: #0284C7;
}

.credit-icon {
    background: rgba(234, 88, 12, 0.1);
    color: #EA580C;
}

.feature-card-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.feature-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.2;
    letter-spacing: -0.2px;
}

.feature-card-desc {
    font-size: 13px;
    font-weight: 500;
    color: #64748B;
    margin-top: 3px;
    line-height: 1.35;
}

/* --- Адаптивность для планшетов (<= 1180px) --- */
@media (max-width: 1180px) {
    /* Одна линия: карта слева, заголовок и кнопки справа, всё по центру */
    .modern-bento-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto;
        align-items: stretch;
        column-gap: 20px;
        row-gap: 40px;
    }

    .modern-bento-grid > .modern-bento-center-top,
    .modern-bento-grid > .modern-bento-center-bottom {
        display: contents;
    }

    .modern-bento-grid .bento-offer-row {
        grid-column: 2;
        grid-row: 1 / span 2;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-self: center;
        justify-self: start;
        max-width: 100%;
    }

    .modern-bento-grid .modern-card-showcase {
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: center;
        justify-self: end;
        width: 100%;
        max-width: 440px;
    }

    .modern-bento-grid .modern-bento-title {
        margin-top: auto;
        text-align: left;
        margin-bottom: 24px;
    }

    .modern-bento-grid .modern-bento-actions {
        justify-content: flex-start;
        margin-bottom: auto;
    }

    .modern-bento-grid > .card-region {
        grid-column: 1;
        grid-row: 3;
    }

    .modern-bento-grid > .card-control {
        grid-column: 2;
        grid-row: 3;
    }

    .modern-bento-grid > .card-russia {
        grid-column: 1;
        grid-row: 4;
    }

    .modern-bento-grid > .bento-features-column {
        grid-column: 2;
        grid-row: 4;
    }

    .modern-card-img {
        max-width: 100%;
    }
}

/* --- Адаптивность для мобильных (<= 768px) --- */
@media (max-width: 768px) {
    .modern-bento-section {
        padding: 24px 0 38px 0;
    }

    .modern-bento-container {
        padding: 0 16px;
    }

    .modern-bento-grid {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .modern-bento-grid > .modern-bento-center-top {
        display: flex;
        order: 1;
        padding: 10px 0;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .modern-bento-grid > .modern-bento-center-top .bento-offer-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-bottom: 0;
    }

    .modern-bento-grid .modern-bento-title {
        text-align: center;
    }

    .modern-bento-grid .modern-bento-title,
    .modern-bento-grid .modern-bento-actions {
        grid-column: auto;
        grid-row: auto;
        align-self: auto;
        justify-self: auto;
        width: auto;
        max-width: 100%;
        margin-top: 0;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .modern-bento-grid > .modern-bento-center-top .modern-bento-title {
        margin-bottom: 20px;
    }

    .modern-bento-grid > .modern-bento-center-bottom {
        display: flex;
        order: 2;
        padding: 8px 0 16px 0;
        justify-content: center;
    }

    .modern-bento-grid .modern-card-showcase {
        grid-column: auto;
        grid-row: auto;
        align-self: auto;
        justify-self: auto;
        width: auto;
        max-width: 320px;
        justify-content: center;
        margin-bottom: 0;
    }

    .modern-bento-grid > .card-region {
        order: 3;
    }

    .modern-bento-grid > .card-control {
        order: 4;
    }

    .modern-bento-grid > .card-russia {
        order: 5;
    }

    .modern-bento-grid > .bento-features-column {
        order: 6;
        gap: 10px;
    }

    .modern-bento-title {
        font-size: 55px;
        margin-bottom: 20px;
        white-space: normal;
    }

    .modern-bento-actions {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .modern-bento-actions .btn {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }

    .modern-bento-card {
        padding: 20px 18px;
        border-radius: 20px;
        min-height: auto;
    }

    .bento-card-num {
        font-size: 26px;
    }

    .bento-card-sub {
        font-size: 17px;
    }

    .modern-card-img {
        max-width: 320px;
    }
}


/* --- 5.1. Hero экран (Главная страница) --- */
.hero-section {
    position: relative;
    padding: 90px 0 80px 0;
    overflow: hidden;
    background: radial-gradient(circle at 85% 25%, rgba(228, 45, 36, 0.04) 0%, transparent 65%);
}

.hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;
    min-height: 600px;
}

/* --- Левая колонка: Текст и плашки --- */
.hero-content {
    max-width: 720px;
}

.hero-title {
    font-size: 54px;
    line-height: 1.15;
    font-weight: 800;
    color: var(--color-text-main);
    letter-spacing: -1px;
    margin-bottom: 24px;
}

.text-accent {
    color: var(--color-primary);
}

.hero-desc {
    font-size: 20px;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin-bottom: 32px;
}

.hero-tags-list {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.hero-tag {
    font-size: 16px;
    font-weight: 600;
    color: #1E293B;
    background: #FFFFFF;
    border: 1.5px solid var(--color-border);
    padding: 10px 22px;
    border-radius: 9999px;
    transition: all 0.2s ease;
}

.hero-tag:hover {
    border-color: #CBD5E1;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}

/* --- Правая колонка: 3D-сцена и орбиты --- */
.hero-visual {
    position: relative;
    width: 100%;
    height: 640px; /* Было 580px — даем больше пространства по вертикали */
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
}

.visual-orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(203, 213, 225, 0.7);
    pointer-events: none;
    z-index: 1;
}

.orbit-1 {
    width: 580px;  /* Было 520px */
    height: 580px;
}

.orbit-2 {
    width: 760px;  /* Было 680px */
    height: 760px;
    border: 1px solid rgba(226, 232, 240, 0.6);
}

/* --- Разделение слоев карты: Float + 3D Tilt --- */
.hero-card-float {
    position: relative;
    z-index: 3;
    animation: cardIdleFloat 5s ease-in-out infinite alternate;
    pointer-events: none;
}

.hero-card-3d {
    transform-style: preserve-3d;
    will-change: transform;
    pointer-events: auto;
}

.hero-card-img {
    width: 530px; /* Карта становится заметно массивнее и детальнее */
    height: auto;
    display: block;
    user-select: none;
    pointer-events: none;
    image-rendering: auto;
    -webkit-font-smoothing: subpixel-antialiased;
    filter: drop-shadow(0 28px 40px rgba(15, 23, 42, 0.22));
}

@keyframes cardIdleFloat {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-12px) rotate(0.8deg);
    }
    100% {
        transform: translateY(6px) rotate(-0.8deg);
    }
}

/* --- Парящие бейджи вокруг карты --- */
.floating-badge {
    position: absolute;
    z-index: 4;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 16px 32px -4px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.04);
    border-radius: 14px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform 0.2s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.2s;
    white-space: nowrap;
}

.floating-badge:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 20px 40px -4px rgba(15, 23, 42, 0.18);
}

.badge-icon-box {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.badge-icon-box.green  { background: #DCFCE7; color: #16A34A; }
.badge-icon-box.orange { background: #FFF1EE; color: var(--color-primary); }
.badge-icon-box.blue   { background: #E0F2FE; color: #0284C7; }
.badge-icon-box.purple { background: #F3E8FF; color: #9333EA; }

.badge-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-main);
}

.badge-sub {
    display: block;
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.badge-top-right    { top: 25px; right: -10px; }
.badge-top-left     { top: 50px; left: -20px; }
.badge-bottom-left  { bottom: 50px; left: -10px; }
.badge-bottom-right { bottom: 25px; right: 0px; }

/* --- 5.1. Секция партнеров "Нам доверяют" (Бегущая карусель) --- */
.partners-section {
    position: relative;
    padding: 38px 0 46px 0;
    background: #FFFFFF;
    border-bottom: 1px solid #F1F5F9;
    overflow: hidden;
}

.partners-section .hero-partners-block {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    overflow: hidden;
}

.hero-partners-block {
    margin-top: 80px;
    padding-top: 48px;
    border-top: 1px solid var(--color-border);
    overflow: hidden;
}

.partners-title {
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    color: #94A3B8;
    margin-bottom: 32px;
    text-align: center;
}

.partners-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 12px 0;
    /* Мягкие полупрозрачные края слева и справа */
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.partners-track {
    display: flex;
    width: max-content;
    animation: partnersMarquee 32s linear infinite;
    will-change: transform;
}

/* При наведении или касании — карусель плавно останавливается (тормозит) */
.partners-marquee:hover .partners-track,
.partners-marquee:active .partners-track,
.partners-marquee:focus-within .partners-track {
    animation-play-state: paused;
}

@keyframes partnersMarquee {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

.partners-group {
    display: flex;
    align-items: center;
    gap: 56px;
    padding-right: 56px;
    flex-shrink: 0;
}

.partner-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    opacity: 0.68;
    filter: grayscale(100%);
    transition: opacity 0.25s ease, filter 0.25s ease, transform 0.25s ease;
    cursor: pointer;
    flex-shrink: 0;
}

.partner-item:hover {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.12);
}

.partner-item img {
    max-height: 58px;
    max-width: 180px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

@media (max-width: 768px) {
    .partners-group {
        gap: 36px;
        padding-right: 36px;
    }
    .partner-item img {
        max-height: 44px;
        max-width: 140px;
    }
}

/* --- Адаптивность Hero-секции --- */
@media (max-width: 1200px) {
    .hero-title { font-size: 44px; }
    .hero-card-img { width: 380px; }
    .badge-top-left { left: 0; }
    .badge-top-right { right: 0; }
}

@media (max-width: 992px) {
    .hero-section {
        padding: 60px 0 50px 0;
    }
    .hero-partners-block {
        margin-top: 50px;
        padding-top: 32px;
    }
    .hero-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .hero-content {
        text-align: center;
        max-width: 100%;
    }
    .hero-tags-list {
        justify-content: center;
    }
    .hero-visual {
        height: 500px;
    }
}

@media (max-width: 600px) {
    .hero-title { font-size: 32px; }
    .hero-card-img { width: 280px; }
    .orbit-1, .orbit-2 { display: none; }
    .floating-badge {
        position: static;
        width: 100%;
        margin-bottom: 10px;
    }
    .hero-visual {
        display: flex;
        flex-direction: column;
        height: auto;
        gap: 14px;
    }
    .partner-item {
        flex: 1 1 90px;
    }
}

/* --- 5.2. Секция сравнения цен на топливо --- */
.fuel-prices-section {
    padding: 130px 0 140px 0;
    background-color: #FFFFFF;
    border-top: 1px solid var(--color-border);
}

.prices-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 48px;
    gap: 24px;
    flex-wrap: wrap;
}

.prices-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    background: #F8FAFC;
    border: 1px solid var(--color-border);
    padding: 4px 14px;
    border-radius: 9999px;
    margin-bottom: 12px;
}

.section-title {
    font-size: 34px;
    font-weight: 800;
    color: var(--color-text-main);
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.section-subtitle {
    font-size: 16px;
    color: var(--color-text-muted);
    margin-top: 6px;
}

/* Переключатели табов */
.fuel-tabs {
    display: inline-flex;
    gap: 6px;
    background: #F1F5F9;
    padding: 5px;
    border-radius: 9999px;
    flex-wrap: nowrap;
}

.tab-label-short {
    display: none;
}

.tab-label-full {
    display: inline;
}

.fuel-tab-btn {
    border: none;
    background: transparent;
    padding: 9px 20px;
    border-radius: 9999px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.fuel-tab-btn.active {
    background: #FFFFFF;
    color: var(--color-text-main);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

/* Сетка карточек */
.prices-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.price-card {
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.price-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
}

.price-card-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 12px;
}

.price-card-value {
    font-size: 48px;
    font-weight: 800;
    color: var(--color-text-main);
    line-height: 1.1;
    margin-bottom: 16px;
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}

.price-card-value small {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
    display: inline-block;
    flex-shrink: 0;
}

.price-card-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-muted);
    padding-top: 14px;
    border-top: 1px solid #F1F5F9;
}

/* Акцентная карточка экономии */
.price-card.economy-card {
    background: #F0FDF4;
    border-color: #BBF7D0;
}

.price-card.economy-card .price-card-value.highlight {
    color: var(--color-success);
    font-size: clamp(34px, 2.4vw, 44px);
}

.price-card.economy-card .price-card-footer {
    border-top-color: #DCFCE7;
    color: #15803D;
}

.price-card.economy-card .price-card-footer svg {
    stroke: var(--color-success);
}

.prices-bottom-note {
    margin-top: 20px;
    font-size: 13px;
    color: #94A3B8;
    line-height: 1.5;
}

/* Адаптив */
@media (max-width: 992px) {
    .fuel-prices-section {
        padding: 80px 0 90px 0;
    }
    .prices-grid {
        grid-template-columns: 1fr;
    }
    .prices-header {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 36px;
    }
}

@media (max-width: 640px) {
    .fuel-prices-section {
        padding: 60px 0 70px 0;
    }

    .prices-header {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 28px;
        gap: 20px;
    }

    /* Мобильный segmented switch на 3 равных сектора */
    .fuel-tabs {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
        padding: 4px;
        border-radius: 14px;
        background: #F1F5F9;
        box-sizing: border-box;
    }

    .fuel-tab-btn {
        width: 100%;
        padding: 11px 4px;
        font-size: 15px;
        font-weight: 700;
        border-radius: 10px;
        text-align: center;
        white-space: nowrap;
    }

    .tab-label-full {
        display: none;
    }

    .tab-label-short {
        display: inline;
    }
}

.economy-main-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.economy-main-row .price-card-value {
    margin-bottom: 0;
}

/* Кнопка сбоку */
.btn-economy-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    background: var(--color-success);
    color: #FFFFFF !important;
    font-size: 13.5px;
    font-weight: 700;
    border-radius: 9999px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.22);
    transition: all 0.2s ease;
}

.btn-economy-action:hover {
    background: var(--color-success-hover);
    box-shadow: 0 6px 16px rgba(22, 163, 74, 0.32);
    transform: translateY(-1px);
}

.btn-economy-action svg {
    transition: transform 0.2s ease;
}

.btn-economy-action:hover svg {
    transform: translateX(3px);
}

/* Адаптив для мобильных экранов */
@media (max-width: 640px) {
    .economy-main-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .btn-economy-action {
        width: 100%;
        padding: 12px 20px;
        font-size: 15px;
    }
}

/* --- 5.3. Секция «О компании» (Выравнивание в одну линию + Видео) --- */
.about-section {
    padding: 130px 0 140px 0;
    background-color: #F8FAFC;
    border-top: 1px solid var(--color-border);
}

/* Сетка растягивается строго по высоте обеих колонок */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: stretch; /* Ровный верх и ровный низ */
}

.about-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Распределяет пространство между текстом и плашками */
}

.about-text-top {
    margin-bottom: 36px;
}

.section-tag {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-primary);
    background: #FFF1EE;
    padding: 6px 14px;
    border-radius: 9999px;
    margin-bottom: 14px;
}

.about-title {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-text-main);
    letter-spacing: -0.5px;
    margin-bottom: 16px;
}

.about-lead {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0;
}

/* --- Сетка плашек (2х2) --- */
.about-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: auto; /* Прижимает сетку к низу колонки */
}

.stat-card {
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 145px;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
}

/* Акцентная карточка (Стиль референса: ровный плотный тон) */
.stat-card.stat-card-accent {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #FFFFFF;
    box-shadow: 0 8px 24px rgba(228, 45, 36, 0.22);
}

/* Вторая мягкая акцентная карточка для баланса */
.stat-card.stat-card-subtle {
    background: var(--color-bg-subtle);
    border-color: var(--color-border);
}

/* Одинаковая планка под цифры (никакой пляски) */
.stat-number {
    font-family: inherit;
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    color: #0F172A;
    letter-spacing: -1px;
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}

.stat-card.stat-card-accent .stat-number {
    color: #FFFFFF;
}

.stat-unit {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: normal;
    color: inherit;
    opacity: 0.9;
}

.stat-label {
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.45;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-top: 18px;
}

.stat-card.stat-card-accent .stat-label {
    color: rgba(255, 255, 255, 0.94);
}

/* --- Видео-колонка: высота строго по сетке --- */
.about-video-wrapper {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    height: 100%;
    min-height: 520px;
    box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.16);
    background: #0F172A;
    cursor: pointer; /* Делаем кликабельным */
    z-index: 1;
}

.about-video-el {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.92);
    pointer-events: none !important; /* КРИТИЧНО: мышь проходит сквозь видео к контейнеру */
    transition: transform 0.4s ease, filter 0.4s ease;
}

.about-video-wrapper:hover .about-video-el {
    transform: scale(1.02);
    filter: brightness(0.85);
}

.video-play-cursor {
    position: absolute;
    width: 72px;
    height: 72px;
    background: var(--color-primary, #E42D24);
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 50;
    box-shadow: 0 12px 30px rgba(228, 45, 36, 0.45);
    
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(0.6);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.2s cubic-bezier(0.2, 0, 0.2, 1);
}

.video-play-cursor svg {
    display: block;
    fill: #FFFFFF;
    margin-left: 3px; /* Оптический баланс вершины треугольника */
}

/* Показываем при наведении на контейнер напрямую через CSS */
.about-video-wrapper:hover .video-play-cursor,
.about-video-wrapper.is-hovered .video-play-cursor {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* Полное подавление системного текста/псевдоэлементов старой темы внутри видео */
#aboutVideoBox span,
#aboutVideoBox .screen-reader-text,
#aboutVideoBox::before,
#aboutVideoBox::after,
.video-play-cursor::before,
.video-play-cursor::after {
    content: none !important;
    display: none !important;
}

/* При этом наш круг со стрелкой оставляем видимым */
#aboutVideoBox #videoPlayBtn {
    display: flex !important;
}

/* Контейнер кликабелен поверх видео: z-index и pointer-events оптимизированы в базовых правилах выше */

/* Модальное окно — максимальный z-index */
.video-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.75); /* Мягкое полупрозрачное затемнение фона */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 999999 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.video-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.video-modal-container {
    position: relative;
    width: 100%;
    max-width: 920px; /* Аккуратный большой размер плеера */
    border-radius: 20px;
    background: #000000;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.6);
    transform: scale(0.95);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-modal-close {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #FFFFFF;
    color: #0F172A;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.video-modal-close:hover {
    background: var(--color-primary, #E42D24);
    color: #FFFFFF;
    transform: scale(1.08);
}

.video-modal-close svg {
    display: block;
    pointer-events: none;
}

/* Плеер 16:9 с аккуратным скруглением углов */
.video-modal-inner {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* Соотношение 16:9 */
    border-radius: 20px;
    overflow: hidden;
    background: #000000;
}

.video-modal-inner video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    outline: none;
    border: none;
}

/* Мобильная адаптация кнопки закрытия */
@media (max-width: 640px) {
    .video-modal-close {
        top: 12px;
        right: 12px;
        width: 36px;
        height: 36px;
        background: rgba(15, 23, 42, 0.7);
        color: #FFFFFF;
    }
}


/* Адаптив */
@media (max-width: 992px) {
    .about-section {
        padding: 80px 0 90px 0;
    }
    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .about-video-wrapper {
        height: 400px;
        min-height: auto;
        cursor: pointer;
    }
    .about-stats-grid {
        margin-top: 24px;
    }
}

@media (max-width: 600px) {
    .about-section {
        padding: 60px 0 70px 0;
    }
    .about-title { font-size: 28px; }
    .about-stats-grid { grid-template-columns: 1fr; }
    .about-video-wrapper { height: 280px; }
    .stat-number { font-size: 34px; }
}

/* --- 5.4. Секция «Топливная карта» (Карточки в два ряда со смещением, sticky-карта справа) --- */
.card-features-section {
    padding: 80px 0 130px 0;
    background-color: #FFFFFF;
    border-top: 1px solid var(--color-border);
    position: relative;
}

/* Двухколоночный макет: слева 2 ряда карточек, справа sticky-карта */
.editorial-sticky-layout {
    display: grid;
    grid-template-columns: 1fr 480px;
    gap: 52px;
    align-items: start;
    position: relative;
}

/* Левая часть: 2 ряда (колонки) карточек со смещением высоты */
.editorial-cards-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    align-items: start;
}

.editorial-cards-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Правый ряд карточек смещен ниже ("один ряд чуть выше другого") */
.editorial-cards-col.col-right {
    margin-top: 56px;
}

/* Карточка преимущества с анимацией появления при скролле */
.editorial-card-item {
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 24px;
    padding: 38px 34px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
    box-sizing: border-box;

    /* Начальное состояние для плавной анимации появления по скроллу */
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.25s ease, 
                box-shadow 0.25s ease;
    will-change: opacity, transform;
}

/* Состояние после прокрутки до карточки */
.editorial-card-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.editorial-card-item.is-visible:hover {
    transform: translateY(-4px);
    border-color: #CBD5E1;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}

/* Каскадная микро-задержка для правого ряда карточек */
.editorial-cards-col.col-right .editorial-card-item {
    transition-delay: 0.12s;
}

/* Крупный номер 01 / 02 */
.editorial-card-num {
    display: block;
    font-size: 50px;
    font-weight: 800;
    color: #E2E8F0;
    line-height: 1;
    letter-spacing: -0.04em;
    margin-bottom: 18px;
    font-variant-numeric: tabular-nums;
    user-select: none;
    transition: color 0.25s ease;
}

.editorial-card-item:hover .editorial-card-num {
    color: #CBD5E1;
}

.editorial-card-title {
    font-size: 21px;
    font-weight: 700;
    color: var(--color-text-main);
    line-height: 1.3;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}

.editorial-card-desc {
    font-size: 15px;
    color: var(--color-text-muted);
    line-height: 1.65;
    margin: 0;
}

/* Правая колонка: фиксированная при скролле (Sticky) карта */
.editorial-sticky-aside {
    position: sticky;
    top: 100px;
    align-self: start;
    box-sizing: border-box;
}

.editorial-sticky-card {
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 28px;
    padding: 40px 36px;
    box-shadow: 0 12px 36px -8px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Визуал карты: крупный, во всю ширину контента */
.sticky-card-visual {
    margin: 0 0 28px 0;
    text-align: center;
    perspective: 1000px;
    width: 100%;
}

.sticky-card-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 20px 30px rgba(15, 23, 42, 0.16));
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

.editorial-sticky-card:hover .sticky-card-img {
    transform: translateY(-4px) scale(1.02);
    filter: drop-shadow(0 24px 36px rgba(228, 45, 36, 0.22));
}

.sticky-card-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--color-text-main);
    line-height: 1.25;
    margin-bottom: 14px;
    letter-spacing: -0.02em;
}

.sticky-card-desc {
    font-size: 15px;
    color: var(--color-text-muted);
    line-height: 1.65;
    margin-bottom: 22px;
}

.sticky-card-perks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 0;
    border-top: 1px solid #F1F5F9;
    border-bottom: 1px solid #F1F5F9;
    margin-bottom: 26px;
}

.sticky-perk-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-main);
}

.perk-check {
    color: var(--color-success);
    font-weight: 800;
    font-size: 15px;
}

.sticky-cta-btn {
    width: 100%;
    padding: 16px 26px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* --- Адаптивность --- */
@media (max-width: 1366px) {
    .editorial-sticky-layout {
        grid-template-columns: 1fr 420px;
        gap: 36px;
    }
    .editorial-sticky-card {
        padding: 32px 28px;
    }
    .editorial-card-item {
        padding: 32px 26px;
    }
}

@media (max-width: 1024px) {
    .card-features-section {
        padding: 70px 0 90px 0;
    }
    .editorial-sticky-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .editorial-sticky-aside {
        position: relative;
        top: auto;
        order: -1;
        max-width: 520px;
        margin: 0 auto;
        width: 100%;
    }
    .editorial-cards-columns {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .editorial-cards-col.col-right {
        margin-top: 36px;
    }
}

@media (max-width: 680px) {
    .card-features-section {
        padding: 60px 0 70px 0;
    }
    .editorial-cards-columns {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .editorial-cards-col.col-right {
        margin-top: 0;
    }
    .editorial-card-item {
        padding: 26px 20px;
        border-radius: 20px;
    }
    .editorial-card-num {
        font-size: 38px;
        margin-bottom: 12px;
    }
    .editorial-card-title {
        font-size: 18px;
    }
    .editorial-card-desc {
        font-size: 14px;
    }
    .editorial-sticky-card {
        padding: 28px 20px;
        border-radius: 22px;
    }
    .sticky-card-title {
        font-size: 20px;
    }
}

/* --- 5.5. Секция «1500+ АЗС» (Текст поверх карты покрытия) --- */
.coverage-section {
    padding: 130px 0 110px 0;
    background: transparent;
    border: none;
    position: relative;
    overflow: hidden; /* Обрезает увеличенную карту по краям */
}

/* Заголовок поверх карты */
.coverage-header {
    text-align: center;
    position: relative;
    z-index: 10;
}

/* Ненавязчивая подсказка о скролле карты */
.map-scroll-hint {
    display: none; /* Скрыта на десктопе */
}

/* Скролл-контейнер для мобильных */
.map-scroll-wrapper {
    width: 100%;
    position: relative;
}

.coverage-title {
    font-size: clamp(56px, 7.5vw, 120px);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -3px;
    color: #000000;
    margin: 0 0 14px 0;
}

.coverage-subtitle {
    font-size: clamp(24px, 3.8vw, 56px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -1px;
    color: #000000;
    margin: 0;
}

/* Контейнер карты подтягивается наверх под заголовок */
.map-container {
    position: relative;
    width: 100%;
    max-width: 1500px;
    margin: -7vw auto 0 auto;
    text-align: center;
    overflow: visible; /* Чтобы SVG не резался внутри контейнера */
    
    /* Точка зума — центр по горизонтали и чуть выше по вертикали */
    transform-origin: center 40%;
    will-change: transform;
    transform: translate3d(0, 0, 0) scale(1);
    
    /* Мягкое сглаживание между кадрами скролла */
    transition: transform 0.1s cubic-bezier(0.2, 0.8, 0.4, 1);
}


.map-container::-webkit-scrollbar {
    display: none;
}

/* Размеры SVG карты */

.map-container svg {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    height: auto;
    min-width: 1050px;
    max-width: 100%;
}

/* Ссылки и интерактивные круги */
.map-container svg a {
    cursor: pointer;
    outline: none;
}

.map-container svg circle {
    cursor: pointer;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), 
                fill 0.2s ease, 
                filter 0.25s ease;
}

.map-container svg a:hover circle {
    fill: #FF5249 !important;
    transform: scale(1.24);
    filter: drop-shadow(0 6px 14px rgba(228, 45, 36, 0.5));
}

.map-container svg a path {
    pointer-events: none;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.map-container svg a:hover path {
    transform: scale(1.08);
}

/* Мобильная адаптация карты АЗС: горизонтальный скролл и подсказка */
@media (max-width: 1024px) {
    .coverage-section {
        padding: 80px 0 70px 0;
        overflow: hidden;
    }

    /* Подсказка о возможности скролла карты */
    .map-scroll-hint {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #FFFFFF;
        border: 1px solid var(--color-border);
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
        border-radius: 9999px;
        padding: 7px 18px;
        font-size: 13px;
        font-weight: 600;
        color: var(--color-text-muted);
        margin: 18px auto 0 auto;
        pointer-events: auto;
        user-select: none;
        transition: opacity 0.4s ease;
        animation: hintFloat 2s ease-in-out infinite alternate;
    }

    .map-scroll-hint svg {
        stroke: var(--color-primary);
        flex-shrink: 0;
    }

    .map-scroll-hint .hint-arrow {
        font-size: 13px;
        font-weight: 800;
        color: var(--color-primary);
    }

    @keyframes hintFloat {
        0% { transform: translateY(0); }
        100% { transform: translateY(-2px); }
    }

    /* Полноэкранный горизонтальный свайп-контейнер */
    .map-scroll-wrapper {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 10px 0 20px 0;
        touch-action: pan-x;
    }

    .map-scroll-wrapper::-webkit-scrollbar {
        display: none;
    }

    .map-container {
        margin-top: 10px;
        width: 1200px;
        min-width: 1200px;
        max-width: none;
        transform: none !important; /* На тачах отключаем вертикальный LERP для стабильности свайпа */
    }

    .map-container svg {
        min-width: 1200px;
        width: 1200px;
    }
}

@media (max-width: 768px) {
    .coverage-section {
        padding: 60px 0 50px 0;
    }
    
    .coverage-title {
        font-size: 52px;
        letter-spacing: -1.5px;
    }

    .coverage-subtitle {
        font-size: 24px;
        letter-spacing: -0.5px;
    }

    .map-scroll-hint {
        font-size: 12px;
        padding: 6px 14px;
        margin-top: 14px;
    }
}

/* --- Анимация появления меток (Каскадный Pop-up) --- */

/* Начальное состояние: точки скрыты и уменьшены в 0 */
.map-container svg a {
    opacity: 0;
    transform: scale(0);
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity 0.4s ease, 
                transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Состояние при появлении секции на экране */
.coverage-section.is-visible .map-container svg a {
    opacity: 1;
    transform: scale(1);
}

/* Поочередная задержка (stagger) для каждой из точек */
.coverage-section.is-visible .map-container svg a:nth-of-type(1) { transition-delay: 0.05s; }
.coverage-section.is-visible .map-container svg a:nth-of-type(2) { transition-delay: 0.12s; }
.coverage-section.is-visible .map-container svg a:nth-of-type(3) { transition-delay: 0.19s; }
.coverage-section.is-visible .map-container svg a:nth-of-type(4) { transition-delay: 0.26s; }
.coverage-section.is-visible .map-container svg a:nth-of-type(5) { transition-delay: 0.33s; }
.coverage-section.is-visible .map-container svg a:nth-of-type(6) { transition-delay: 0.40s; }
.coverage-section.is-visible .map-container svg a:nth-of-type(7) { transition-delay: 0.47s; }
.coverage-section.is-visible .map-container svg a:nth-of-type(8) { transition-delay: 0.54s; }
.coverage-section.is-visible .map-container svg a:nth-of-type(9) { transition-delay: 0.61s; }
.coverage-section.is-visible .map-container svg a:nth-of-type(10) { transition-delay: 0.68s; }
.coverage-section.is-visible .map-container svg a:nth-of-type(11) { transition-delay: 0.75s; }
.coverage-section.is-visible .map-container svg a:nth-of-type(12) { transition-delay: 0.82s; }
.coverage-section.is-visible .map-container svg a:nth-of-type(13) { transition-delay: 0.89s; }
.coverage-section.is-visible .map-container svg a:nth-of-type(14) { transition-delay: 0.96s; }

@keyframes map-pulse-ring {
    0% {
        r: 37.5px;
        opacity: 0.8;
    }
    100% {
        r: 58px;
        opacity: 0;
    }
}

/* --- 5.6. Секция «Быстрая доставка» с бензовозом и бегущей строкой --- */
.delivery-hero-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: clamp(80px, 11vw, 180px) 0 clamp(70px, 9vw, 150px) 0;
    background-color: transparent;
    user-select: none;
}

/* Фоновое мягкое свечение по центру (фирменный градиент) */
.delivery-bg-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(243, 107, 23, 0.38) 50%, #FFFFFF 100%);
}

.delivery-track-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

/* Бегущие строки (Marquee) */
.delivery-marquee {
    position: relative;
    width: 160vw;
    margin-left: -30vw;
    overflow: visible;
    white-space: nowrap;
    display: flex;
    will-change: transform;
}

.delivery-marquee-inner {
    display: flex;
    width: max-content;
    will-change: transform;
}

.delivery-marquee-chunk {
    display: flex;
    align-items: center;
    gap: clamp(32px, 4vw, 72px);
    padding-right: clamp(32px, 4vw, 72px);
    flex-shrink: 0;
}

.delivery-marquee-chunk h2 {
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
    font-size: clamp(48px, 9.5vw, 140px);
    line-height: 0.95;
    letter-spacing: -0.04em;
    text-transform: lowercase;
    display: inline-block;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Верхняя строка: Черный текст (движение справа налево) */
.delivery-marquee--dark {
    z-index: 4;
}

.delivery-marquee--dark .delivery-marquee-chunk h2 {
    font-weight: 700;
    color: #0A0A0A;
}

.delivery-marquee--dark .delivery-marquee-inner {
    animation: deliveryMarqueeLeft 50s linear infinite;
}

/* Нижняя строка: Оранжевый текст (движение слева направо, за бензовозом) */
.delivery-marquee--orange {
    z-index: 1;
    margin-top: clamp(8px, 1.5vw, 24px);
}

.delivery-marquee--orange .delivery-marquee-chunk h2 {
    font-weight: 800;
    color: #EF6300;
}

.delivery-marquee--orange .delivery-marquee-inner {
    animation: deliveryMarqueeRight 55s linear infinite;
}

/* Бесконечные анимации бегущих строк */
@keyframes deliveryMarqueeLeft {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes deliveryMarqueeRight {
    0% {
        transform: translate3d(-50%, 0, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

/* Сцена бензовоза: накладывается поверх оранжевого текста */
.delivery-truck-stage {
    position: relative;
    z-index: 2;
    pointer-events: none;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: clamp(-200px, -17vw, -70px);
}

.delivery-truck-mover {
    display: block;
    width: min(1550px, 98vw);
    max-width: none;
    will-change: transform;
}

.delivery-truck-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.13));
}

/* Адаптив для планшетов и мобильных устройств */
@media (max-width: 1024px) {
    .delivery-hero-section {
        padding: 70px 0 80px 0;
    }
    .delivery-truck-mover {
        width: 106vw;
    }
    .delivery-truck-stage {
        margin-top: clamp(-130px, -15vw, -55px);
    }
}

@media (max-width: 768px) {
    .delivery-hero-section {
        padding: 50px 0 60px 0;
    }
    .delivery-marquee-chunk h2 {
        font-size: clamp(38px, 11vw, 64px);
    }
    .delivery-truck-stage {
        margin-top: clamp(-95px, -14vw, -45px);
    }
    .delivery-truck-mover {
        width: 115vw;
    }
    .delivery-truck-img {
        filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.11));
    }
}

/* ==========================================================================
   6. ВНУТРЕННИЕ СТРАНИЦЫ
   ========================================================================== */
/* --- 6.1. Страница «Контакты» --- */
.contacts-page {
    padding: 64px 0 100px 0;
    background-color: var(--color-bg);
}

.page-header {
    margin-bottom: 40px;
}

.page-title {
    font-size: 40px;
    font-weight: 800;
    color: var(--color-text-main);
    letter-spacing: -0.5px;
}

.page-subtitle {
    font-size: 18px;
    color: var(--color-text-muted);
    margin-top: 8px;
}

/* Сетка карточек контактов */
.contacts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

.contact-card {
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 28px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.contact-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -6px rgba(15, 23, 42, 0.08);
}

.contact-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #FFF1EE;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-info {
    display: flex;
    flex-direction: column;
}

.contact-label {
    font-size: 14px;
    color: var(--color-text-muted);
    font-weight: 500;
}

.contact-val {
    font-size: 19px;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 4px 0;
}

.contact-val.link {
    text-decoration: none;
    transition: color 0.2s;
}

.contact-val.link:hover {
    color: var(--color-primary);
}

.contact-sub {
    font-size: 14px;
    color: var(--color-text-muted);
}

/* Карта */
.map-wrapper {
    margin-bottom: 56px;
}

.map-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 16px;
}

.section-title,
.map-header .section-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text-main);
}

.map-note {
    font-size: 15px;
    color: var(--color-text-muted);
}

.map-iframe-container {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
}

.map-iframe-container iframe {
    display: block;
}

/* Блок реквизитов */
.requisites-modern {
    max-width: 820px;
    margin-top: 48px;
}

.req-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 20px;
    flex-wrap: wrap;
}

.req-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--color-text-main);
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.req-subtitle {
    font-size: 15px;
    color: var(--color-text-muted);
    margin-top: 6px;
}

/* Кнопка копирования */
.btn-copy {
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    padding: 10px 22px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
    transition: all 0.2s ease;
}

.btn-copy:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(228, 45, 36, 0.12);
}

.btn-copy.copied {
    border-color: #16A34A;
    background: #F0FDF4;
    color: #16A34A;
}

/* Контейнер карточек */
.req-cards-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.req-card {
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.req-card:hover {
    border-color: #CBD5E1;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.req-card-label {
    font-size: 13px;
    color: var(--color-text-muted);
    font-weight: 500;
    margin-bottom: 2px;
}

.req-card-value {
    font-size: 17px;
    color: var(--color-text-main);
    line-height: 1.35;
}

.req-card-value.bold {
    font-weight: 700;
}

.req-card-sub {
    font-size: 14px;
    color: var(--color-text-muted);
    margin-top: 3px;
}

.req-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

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

.highlight-card {
    background: #FFF7F5;
    border-color: #FED7D2;
}

.highlight-text {
    color: var(--color-primary);
}

/* Двухколоночный макет низа страницы контактов */
.contacts-bottom-layout {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50% на 50% */
    gap: 36px;
    align-items: start;
    margin-top: 48px;
}

.contacts-bottom-layout .requisites-modern {
    max-width: 100%;
    margin-top: 0; /* Убираем лишний верхний отступ внутри сетки */
}

/* Правая карточка: скачивание документов */
.docs-download-card {
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
}

.doc-badge {
    display: inline-block;
    padding: 4px 12px;
    background: #FFF1EE;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 700;
    border-radius: 9999px;
    margin-bottom: 14px;
}

.doc-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--color-text-main);
    margin-bottom: 8px;
    line-height: 1.25;
}

.doc-desc {
    font-size: 15px;
    color: var(--color-text-muted);
    margin-bottom: 24px;
    line-height: 1.45;
}

.doc-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.doc-file-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    text-decoration: none;
    color: var(--color-text-main);
    transition: all 0.2s ease;
}

.doc-file-item:hover {
    border-color: var(--color-primary);
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

.doc-file-icon {
    width: 44px;
    height: 44px;
    background: #FEE2E2;
    color: #DC2626;
    font-weight: 800;
    font-size: 13px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.doc-file-icon.doc-word {
    background: #DBEAFE;
    color: #2563EB;
}

.doc-file-info {
    display: flex;
    flex-direction: column;
}

.doc-file-info strong {
    font-size: 15px;
    font-weight: 600;
}

.doc-file-info span {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.doc-cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
    font-size: 15px;
    color: var(--color-text-muted);
    flex-wrap: wrap;
    gap: 12px;
}

/* .btn-sm перенесен в раздел 2 (Общие кнопки) */

/* --- 6.2. Страницы карты АЗС --- */
/* Обычная страница карты АЗС */
.map-page {
    padding: 56px 0 90px 0;
    background-color: var(--color-bg);
}

.map-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-outline-map {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-main);
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 9999px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-outline-map:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
}

/* Информационная подсказка */
.map-info-banner {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 12px 20px;
    background: #F8FAFC;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.map-info-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--color-text-muted);
}

.map-info-item .info-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-success);
    display: inline-block;
}

.map-info-item svg {
    stroke: var(--color-text-muted);
    flex-shrink: 0;
}

/* Обертка фрейма */
.map-frame-wrapper {
    width: 100%;
    height: 720px; /* Оптимальная рабочая высота на десктопе */
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.08);
    background: #FFFFFF;
}

.gas-map-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Полноэкранная страница карты АЗС (без скролла) */
body.page-template-page-map {
    height: 100vh;
    height: 100dvh; /* Динамическая высота экрана (с учетом мобильных баров) */
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
}

/* Шапка не сжимается */
body.page-template-page-map .site-header,
body.page-template-page-map .top-bar {
    flex-shrink: 0;
}

/* Скрываем подвал на странице карты */
body.page-template-page-map footer,
body.page-template-page-map .site-footer {
    display: none !important;
}

/* Контейнер фрейма автоматически забирает ровно ВСЕ свободное место до низа */
.map-fullscreen-page {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    display: flex;
}

/* Сам iframe */
.map-fullscreen-iframe {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    display: block;
    flex: 1;
}

/* Корректировка для мобильных устройств (учитываем высоту мобильной шапки) */
@media (max-width: 1300px) {
    .map-fullscreen-page {
        height: calc(100vh - 61px);
    }
}

/* --- 6.3. Страница «Топливо оптом» (.wholesale-page) --- */
.wholesale-page {
    padding: 40px 0 90px;
    background-color: var(--color-bg);
}

.page-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--color-text-muted);
    margin-bottom: 28px;
}

.page-breadcrumbs a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.page-breadcrumbs a:hover {
    color: var(--color-primary);
}

.crumb-sep {
    color: #CBD5E1;
}

.wholesale-page {
    overflow-x: clip;
}

/* 1. Hero-карточка опта */
.opt-hero-card {
    display: grid;
    grid-template-columns: 1.2fr 0.95fr;
    gap: 40px;
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 32px;
    padding: 52px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.04);
    margin-bottom: 70px;
    align-items: center;
}

.opt-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    color: #15803D;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 9999px;
    margin-bottom: 20px;
}

.opt-hero-title {
    font-size: clamp(32px, 3.4vw, 46px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--color-text-main);
    margin-bottom: 18px;
}

.opt-hero-desc {
    font-size: clamp(16px, 1.2vw, 18px);
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: 32px;
}

.opt-hero-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.opt-hero-btn {
    padding: 14px 30px;
    font-size: 16px;
    gap: 10px;
}

.opt-hero-aside {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.opt-base-visual {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: #1E293B;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1);
}

.opt-base-img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
}

.opt-base-badge {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 6px 16px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 8px;
}

.opt-hero-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: #F8FAFC;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 18px 20px;
    text-align: center;
    gap: 12px;
}

.opt-fact-col strong {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-main);
}

.opt-fact-col span {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* 2. Каталог номенклатуры */
.opt-products-section {
    margin-bottom: 80px;
}

.opt-section-header {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 48px;
}

.opt-sec-badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.opt-sec-title {
    font-size: clamp(28px, 2.8vw, 38px);
    font-weight: 700;
    color: var(--color-text-main);
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}

.opt-sec-subtitle {
    font-size: 16px;
    color: var(--color-text-muted);
    line-height: 1.55;
}

.opt-products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.opt-product-card {
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 24px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.opt-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
    border-color: #CBD5E1;
}

.opt-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 10px;
}

.product-status-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 9999px;
    background: #DCFCE7;
    color: #15803D;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.product-status-pill.pill-gray {
    background: #F1F5F9;
    color: #64748B;
}

.product-class {
    font-size: 12px;
    font-weight: 600;
    color: #94A3B8;
}

.product-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 12px;
    line-height: 1.3;
}

.product-desc {
    font-size: 14px;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: 20px;
}

.product-features {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    color: #334155;
    border-top: 1px dashed var(--color-border);
    padding-top: 16px;
    flex-grow: 1;
}

.product-features li strong {
    color: var(--color-text-main);
}

.product-action {
    margin-top: auto;
}

.product-action .btn {
    width: 100%;
}

/* 3. Баннер автопарка */
.opt-fleet-banner {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    border-radius: 32px;
    padding: 56px;
    color: #FFFFFF;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
    margin-bottom: 80px;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.16);
}

.opt-fleet-title {
    font-size: clamp(28px, 2.8vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 16px;
}

.opt-fleet-desc {
    font-size: 16px;
    color: #94A3B8;
    line-height: 1.6;
    margin-bottom: 32px;
}

.opt-fleet-specs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.fleet-spec-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    padding: 16px 20px;
}

.spec-num {
    font-size: 18px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 4px;
}

.spec-label {
    font-size: 12px;
    color: #94A3B8;
    line-height: 1.35;
}

.opt-truck-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.35));
}

/* 4. Отрасли (Интерактивный слайдер в стиле референса) */
.opt-industries-section {
    margin-bottom: 90px;
    position: relative;
}

.opt-slider-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    text-align: left;
    margin: 0 0 36px;
    max-width: 100%;
}

.opt-header-text {
    max-width: 760px;
}

.opt-header-text .opt-sec-badge {
    margin-bottom: 8px;
}

.opt-header-text .opt-sec-title {
    margin-bottom: 10px;
}

.opt-slider-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.opt-nav-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #E2E8F0;
    color: #1E293B;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.opt-nav-btn:hover {
    background: #0F172A;
    color: #FFFFFF;
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
}

.opt-nav-btn:active {
    transform: scale(0.95);
}

.opt-nav-btn:disabled,
.opt-nav-btn.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
    background: #F1F5F9;
    color: #94A3B8;
}

/* Трек слайдера и карточки */
.opt-slider-container {
    position: relative;
    /* Вылет слайдера вправо до самого края экрана (как в референсе) */
    margin-right: calc(50% - 50vw);
    padding-right: max(32px, calc(50vw - 50% + 32px));
    width: auto;
}

.opt-slider-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding: 6px 4px 24px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.opt-slider-track::-webkit-scrollbar {
    display: none;
}

.opt-slider-track.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
}

.industry-slide-card {
    flex: 0 0 340px;
    width: 340px;
    min-width: 340px;
    height: 480px;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    scroll-snap-align: start;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
    cursor: pointer;
    background: #0F172A;
}

.industry-slide-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 42px rgba(15, 23, 42, 0.18);
}

.slide-card-bg-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.slide-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.industry-slide-card:hover .slide-card-img {
    transform: scale(1.06);
}

.slide-card-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg, 
        transparent 0%, 
        transparent 38%, 
        rgba(15, 23, 42, 0.45) 62%, 
        rgba(15, 23, 42, 0.94) 100%
    );
    pointer-events: none;
}

.slide-card-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px 24px;
    color: #FFFFFF;
}

.slide-card-bottom {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.slide-card-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: #FFFFFF;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

.slide-card-desc {
    font-size: 13.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

/* Адаптивность слайдера */
@media (max-width: 1200px) {
    .industry-slide-card {
        flex: 0 0 310px;
        width: 310px;
        min-width: 310px;
        height: 460px;
    }
}

@media (max-width: 860px) {
    .opt-slider-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    
    .opt-slider-nav {
        align-self: flex-start;
    }

    .industry-slide-card {
        flex: 0 0 280px;
        width: 280px;
        min-width: 280px;
        height: 440px;
    }
    
    .opt-slider-track {
        gap: 18px;
    }

    .slide-card-title {
        font-size: 22px;
    }
}

@media (max-width: 580px) {
    .opt-industries-section {
        margin-bottom: 60px;
    }

    .industry-slide-card {
        flex: 0 0 78vw;
        width: 78vw;
        min-width: 260px;
        height: 420px;
    }

    .slide-card-content {
        padding: 24px 20px 22px;
    }

    .slide-card-title {
        font-size: 21px;
    }
}

/* 5. Шаги работы */
.opt-steps-card {
    background: #F8FAFC;
    border: 1px solid var(--color-border);
    border-radius: 28px;
    padding: 44px 48px;
    margin-bottom: 80px;
}

.opt-steps-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--color-text-main);
    text-align: center;
    margin-bottom: 36px;
}

.opt-steps-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

.opt-step-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.step-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--btn-gradient);
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    box-shadow: 0 4px 14px rgba(228, 45, 36, 0.25);
}

.step-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 6px;
}

.step-text {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.45;
}

/* 6. Финальный конверсионный блок */
.opt-cta-section {
    margin-bottom: 40px;
}

.opt-cta-box {
    background: #FFFFFF;
    border: 2px solid #E2E8F0;
    border-radius: 32px;
    padding: 56px;
    display: grid;
    grid-template-columns: 1.25fr 0.85fr;
    gap: 48px;
    align-items: center;
    box-shadow: 0 16px 44px rgba(15, 23, 42, 0.05);
}

.opt-cta-title {
    font-size: clamp(26px, 2.6vw, 36px);
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 14px;
    line-height: 1.22;
}

.opt-cta-desc {
    font-size: 16px;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: 28px;
}

.opt-cta-contacts {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cta-contact-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cta-lbl {
    font-size: 12px;
    color: #94A3B8;
}

.cta-phone {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}

.cta-mail {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-main);
    text-decoration: none;
}

.opt-form-card {
    background: #F8FAFC;
    border: 1px solid var(--color-border);
    border-radius: 24px;
    padding: 36px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.opt-form-heading {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-main);
}

.opt-form-guarantee {
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.4;
    margin: 0;
}

/* Адаптивность страницы опта */
@media (max-width: 1024px) {
    .opt-hero-card,
    .opt-fleet-banner,
    .opt-cta-box {
        grid-template-columns: 1fr;
        padding: 36px 28px;
        gap: 32px;
    }

    .opt-products-grid,
    .opt-industries-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .opt-steps-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 640px) {
    .opt-hero-card,
    .opt-fleet-banner,
    .opt-cta-box {
        padding: 28px 20px;
        border-radius: 24px;
    }

    .opt-products-grid,
    .opt-industries-grid,
    .opt-steps-row {
        grid-template-columns: 1fr;
    }

    .opt-hero-facts {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* ==========================================================================
   7. МОДАЛЬНОЕ ОКНО ЗАЯВКИ (LEAD POPUP / MODAL)
   ========================================================================== */
/* --- 7.1. Каркас модального окна и оверлей --- */
.lead-modal-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lead-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.lead-modal-container {
    position: relative;
    width: 100%;
    max-width: 1060px;
    background: #FFFFFF;
    border-radius: 28px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    transform: scale(0.94) translateY(20px);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

/* Кнопка закрытия (на белом фоне) */
.lead-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    color: #64748B;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    transition: all 0.2s ease;
}

.lead-modal-close:hover {
    background: #E2E8F0;
    color: #0F172A;
    transform: rotate(90deg);
}

.lead-modal-grid {
    display: grid;
    grid-template-columns: 1.05fr 1.2fr;
    min-height: 640px;
}

/* --- 7.2. Левая колонка (Тёмная) --- */
.lead-card-left {
    background: linear-gradient(175deg, #161B22 0%, #0D1117 100%);
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    color: #FFFFFF;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.lead-top-contacts {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lead-phone-link {
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    line-height: 1;
    transition: opacity 0.2s ease;
}

.lead-phone-link:hover {
    opacity: 0.85;
}

.lead-phone-link .phone-code {
    font-size: 16px;
    font-weight: 700;
    color: #94A3B8;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.lead-phone-link .phone-number {
    font-size: clamp(40px, 4.2vw, 54px);
    font-weight: 800;
    letter-spacing: -1.5px;
    color: #FFFFFF;
}

/* Почта в тёмной колонке — белая с лёгким свечением */
.lead-email-link {
    display: inline-block;
    font-size: 19px;
    font-weight: 800;
    color: #F8FAFC !important;
    text-decoration: none !important;
    letter-spacing: -0.2px;
    transition: color 0.2s ease;
}

.lead-email-link:hover {
    color: var(--color-primary, #E42D24) !important;
    text-decoration: underline !important;
}

/* Слоган внизу */
.lead-left-slogan {
    margin-top: auto;
    padding-top: 36px;
    margin-bottom: 24px;
}

.lead-left-slogan h3 {
    font-size: clamp(26px, 2.7vw, 38px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
    color: #FFFFFF;
    margin: 0;
}

.lead-left-slogan .accent-text {
    color: var(--color-primary, #E42D24);
}

/* Футер со ссылками на МАКС и ВК */
.lead-left-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 18px;
}

.lead-social-links {
    display: flex;
    gap: 10px;
}

.social-link-item {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #21262D;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #FFFFFF !important;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.social-link-item:hover {
    background: var(--color-primary, #E42D24);
    border-color: var(--color-primary, #E42D24);
    transform: translateY(-2px);
}

.lead-guarantee-note {
    font-size: 11px;
    font-weight: 700;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- 7.3. Правая колонка (Форма сбора заявки) --- */
.lead-card-right {
    padding: 56px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #FFFFFF;
}

/* Поля формы */
.form-fields-stack {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 28px;
}

.form-underline-group {
    position: relative;
    width: 100%;
}

/* Инпуты на белом фоне */
.form-underline-group input {
    width: 100%;
    padding: 14px 0 10px 0;
    background: transparent;
    border: none;
    border-bottom: 2px solid #E2E8F0;
    color: #0F172A;
    font-size: 18px;
    font-weight: 600;
    outline: none;
    transition: border-color 0.2s ease;
}

.form-underline-group label {
    position: absolute;
    left: 0;
    top: 14px;
    font-size: 16px;
    color: #94A3B8;
    pointer-events: none;
    transition: all 0.2s ease;
}

/* Поднятый лейбл при фокусе и вводе */
.form-underline-group input:focus,
.form-underline-group input:not(:placeholder-shown) {
    border-bottom-color: var(--color-primary, #E42D24);
}

.form-underline-group input:focus + label,
.form-underline-group input:not(:placeholder-shown) + label {
    top: -14px;
    font-size: 12px;
    font-weight: 800;
    color: var(--color-primary, #E42D24);
}

/* Чекбокс согласия 152-ФЗ на светлом фоне */
.form-consent-box {
    margin-bottom: 24px;
}

.consent-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.consent-checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.custom-check-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 6px;
    border: 1.5px solid #CBD5E1;
    background: #F8FAFC;
    position: relative;
    margin-top: 2px;
    transition: all 0.2s ease;
}

.consent-checkbox-label input:checked ~ .custom-check-icon {
    background: var(--color-primary, #E42D24);
    border-color: var(--color-primary, #E42D24);
}

.consent-checkbox-label input:checked ~ .custom-check-icon::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.consent-text {
    font-size: 12px;
    line-height: 1.45;
    color: #64748B;
}

.consent-text a {
    color: #0F172A;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: #CBD5E1;
    text-underline-offset: 2px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.consent-text a:visited {
    color: #0F172A;
}

.consent-text a:hover,
.consent-text a:focus {
    color: var(--color-primary, #E42D24);
    text-decoration-color: var(--color-primary, #E42D24);
}

/* Кнопка отправки */
.lead-submit-btn {
    width: 100%;
    height: 60px;
    background: var(--color-primary, #E42D24);
    color: #FFFFFF;
    border: none;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(228, 45, 36, 0.35);
    transition: all 0.25s ease;
}

.lead-submit-btn:hover {
    background: #D8251C;
    box-shadow: 0 12px 30px rgba(228, 45, 36, 0.5);
    transform: translateY(-2px);
}

/* --- 7.4. Валидация и системные ошибки --- */
/* 1. Плашка серверной ошибки */
.form-server-alert {
    display: none;
    align-items: center;
    gap: 10px;
    background: #FEF2F2;
    border: 1.5px solid #F87171;
    color: #991B1B;
    padding: 12px 16px;
    border-radius: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 22px;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.1);
    animation: fadeInError 0.25s ease-in-out;
}

/* 2. Текст ошибок под полями ввода */
.field-error-msg {
    display: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 11.5px;
    font-weight: 600;
    color: #DC2626 !important; /* Насыщенный системный красный */
    margin-top: 6px;
    line-height: 1.35;
    letter-spacing: -0.2px;
}

/* Показ ошибки при добавлении класса has-error */
.form-underline-group.has-error .field-error-msg,
.form-consent-box.has-error .field-error-msg {
    display: block;
    animation: fadeInError 0.2s ease-in-out;
}

/* 3. Подсветка самой линии инпута */
.form-underline-group.has-error input {
    border-bottom-color: #DC2626 !important;
}

/* Метка над полем */
.form-underline-group.has-error label {
    color: #DC2626 !important;
}

/* 4. Ошибка чекбокса согласия 152-ФЗ */
.form-consent-box.has-error .custom-check-icon {
    border-color: #DC2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}

.consent-error {
    margin-left: 32px;
    margin-top: 6px;
}

/* Анимация проявления */
@keyframes fadeInError {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- 7.5. Состояние успешной отправки --- */
.lead-success-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 420px;
    animation: fadeInSuccess 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lead-success-state h3 {
    color: #0F172A !important;
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.lead-success-state p {
    color: #64748B !important;
    font-size: 16px;
    line-height: 1.55;
    max-width: 380px;
    margin: 0 auto;
}

@keyframes fadeInSuccess {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* --- 7.6. Мобильная адаптация модального окна --- */
@media (max-width: 860px) {
    .lead-modal-grid {
        grid-template-columns: 1fr;
        max-height: 90vh;
        overflow-y: auto;
    }

    .lead-card-left {
        padding: 36px 24px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .lead-left-slogan {
        margin-top: 28px;
        padding-top: 0;
        margin-bottom: 20px;
    }

    .lead-left-slogan h3 {
        font-size: 24px;
    }

    .lead-card-right {
        padding: 36px 24px;
    }

    .form-fields-stack {
        gap: 24px;
    }
}

/* ==========================================================================
   8. ЧЕТКИЕ МЕДИА-ТОЧКИ (GLOBAL BREAKPOINTS)
   ========================================================================== */
/* До 1300px переключаем шапку на бургер: ниже этого порога кнопки при скролле
   (301px) уже не влезают рядом с меню и наползают на него */
@media (max-width: 1300px) {
    .top-bar {
        display: none; /* Верхняя полоса полностью скрывается */
    }

    /* Мобильная шапка — цельная «матовая» полоса на всю ширину:
       полупрозрачный фон + blur того, что под ним. Отступы контейнера
       обнулены, внутренними отступами рулит сама плашка */
    .header-container {
        padding: 0;
    }

    .site-header.is-scrolled {
        padding-top: 0;
    }

    .header-nav-plate,
    .header-pill-nav,
    .site-header.is-scrolled .header-nav-plate,
    .site-header.is-scrolled .header-pill-nav {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        background-color: rgba(255, 255, 255, 0.65);
        background: rgba(255, 255, 255, 0.65);
        -webkit-backdrop-filter: blur(14px) saturate(1.3);
        backdrop-filter: blur(14px) saturate(1.3);
        border: none;
        border-radius: 0;
        box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.06);
        padding: 12px 16px;
        min-height: 62px;
    }

    /* Кнопки прижаты к правому краю, бургер — последний в DOM — сидит за ними
       (порядок как на макете: «Карта АЗС», человек, бургер) */
    .header-actions,
    .pill-nav-actions {
        margin-left: auto;
    }

    .header-nav,
    .pill-nav-actions,
    .header-action {
        display: none;
    }

    .menu-toggle {
        display: flex; /* Гарантированный показ кнопки */
        margin-left: 10px;
    }

    /* «Карта АЗС» в мобильной полосе — простой текст, без пилюли и пина.
       Правый паддинг срезан до 2px: иначе текст уезжает от иконки ЛК (у круга
       и так 9px воздушной зазора по бокам glyph) */
    .pill-btn-map {
        background: transparent;
        border: none;
        color: #0F172A;
        padding: 8px 2px;
    }

    .pill-btn-map .pill-btn-icon {
        display: none;
    }

    .pill-btn-map:hover {
        background: transparent;
        border: none;
        color: var(--color-primary);
        transform: none;
        box-shadow: none;
    }

    /* Иконка ЛК — видна только здесь */
    .header-lk-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        margin-left: 0;
        border-radius: 50%;
        color: #0F172A;
        text-decoration: none;
        flex-shrink: 0;
        transition: color 0.2s ease, background-color 0.2s ease;
    }

    .header-lk-btn:hover {
        color: var(--color-primary);
        background: rgba(15, 23, 42, 0.06);
    }

    /* Контент шторки стартует под зоной крестика (высота полосы 64px + 8px) */
    .mobile-drawer-body {
        padding-top: 72px;
    }

    .top-bar-right .address-item {
        display: none;
    }
}

/* До 1150px кнопки в шапке остаются: замер показал, что лого+бургер+301px кнопок
   помещаются вплоть до 700px (плашка 642px против нужных 520px) */

/* Планшеты: сетки в 1 колонку */
@media (max-width: 1024px) {
    .contacts-grid {
        grid-template-columns: 1fr;
    }
    .contacts-bottom-layout {
        grid-template-columns: 1fr;
    }
    .requisites-modern {
        max-width: 100%;
    }
    .map-frame-wrapper {
        height: 600px;
    }
}


@media (max-width: 992px) {
    .site-header {
        padding: 0;
    }

    .logo-img {
        height: 30px; /* Чуть компактнее логотип под мобильный экран */
    }

    .top-bar {
        padding: 8px 0;
        font-size: 12px;
    }

    .top-bar-item {
        gap: 6px;
    }

    .lk-link {
        font-size: 13px;
    }
}


/* Смартфоны: «Оформить карту» в шапке уже не помещается рядом с «Карта АЗС»
   (замер: на 480px кнопка вылезает за плашку на 75px), остаётся только «Карта АЗС» */
@media (max-width: 520px) {
    .header-actions .pill-btn-primary,
    .pill-nav-actions .pill-btn-primary {
        display: none;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }
    .header-container {
        padding: 0; /* Матовая полоса идёт от края до края, отступы — внутри плашки */
    }
    .site-header {
        padding: 0;
    }
    .header-nav-plate,
    .header-pill-nav,
    .site-header.is-scrolled .header-nav-plate,
    .site-header.is-scrolled .header-pill-nav {
        padding: 10px 14px;
        min-height: 58px;
    }
    .brand-logo {
        padding: 0;
    }
    .logo-img {
        height: 28px;
    }
    .menu-toggle {
        width: 34px;
        height: 34px;
        padding: 0;
        gap: 6px; /* 34 - (3×2 + 2×6) = 16, чётное — линии попадают на пиксельную сетку */
    }
    .hamburger-line {
        width: 24px;
    }
    /* Морфинг в крестик на мобильной сетке: смещение 2px + gap 6px = 8px */
    .menu-toggle.is-active .hamburger-line:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .menu-toggle.is-active .hamburger-line:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
    /* Полоса шапки на ≤768 — 58px, контент шторки начинается под крестиком */
    .mobile-drawer-body {
        padding-top: 66px;
    }
    .req-grid-2,
    .req-grid-3 {
        grid-template-columns: 1fr;
    }
    .req-header-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .map-page {
        padding: 24px 0 48px 0;
    }
    
    .map-frame-wrapper {
        height: 520px;
        border-radius: 14px;
    }

    .map-info-banner {
        gap: 12px;
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 600px) {
    .top-bar {
        font-size: 12px;
    }
    .top-bar-right .top-bar-item:not(.lk-item) {
        display: none;
    }
}

/* ==========================================================================
   9. ПОДВАЛ САЙТА (SITE FOOTER)
   ==========================================================================
   Весь футер стилизован в footer-v2.css (.footer-v2.site-footer).
   От v1 остался только нижний зелёный отблеск — его footer-v2.css не определяет. */
.site-footer::after {
    content: '';
    position: absolute;
    bottom: -150px;
    left: -100px;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(22, 163, 74, 0.03) 0%, transparent 70%);
    pointer-events: none;
}


/* ==========================================================================
   5.4 (v2). Топливная карта — белая тема, крупная типографика, строки фич
   Добавлено в КОНЕЦ style.css (после всех существующих стилей).
   Всё завёрнуто в .cf-v2 — оригинальная .card-features-section не затронута.
   ========================================================================== */

/* Цветовые переменные блока (белая тема) */
.card-features-section.cf-v2 {
    --cf-bg: #FFFFFF;
    --cf-ink: #0F172A;
    --cf-muted: #64748B;
    --cf-line: #E2E8F0;
    --cf-accent: #EF7016;
    --cf-accent-light: rgba(239, 112, 22, 0.10);
    --cf-card-bg: #F8FAFC;
    --cf-card-border: #E2E8F0;
    --cf-num-color: #E2E8F0;

    padding: 80px 0 100px;
    background: var(--cf-bg);
    color: var(--cf-ink);
    border-top: 1px solid var(--cf-line);
}

/* -------------------- Шапка -------------------- */
.cf-v2 .cfv2-head {
    margin-bottom: 56px;
}

.cf-v2 .cfv2-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--cf-muted);
    margin-bottom: 18px;
}

.cf-v2 .cfv2-tag-dot {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cf-accent);
    flex-shrink: 0;
}

.cf-v2 .cfv2-tag-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--cf-accent);
    animation: cfv2-pulse 2.2s ease-out infinite;
}

@keyframes cfv2-pulse {
    0%   { transform: scale(1);   opacity: .5; }
    100% { transform: scale(3.4); opacity: 0; }
}

.cf-v2 .cfv2-title {
    font-size: clamp(36px, 4.2vw, 62px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--cf-ink);
    margin-bottom: 16px;
}

.cf-v2 .cfv2-subtitle {
    font-size: 18px;
    line-height: 1.5;
    color: var(--cf-muted);
    max-width: 54ch;
}

/* -------------------- Основной layout -------------------- */
.cf-v2 .cfv2-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 60px;
    align-items: start;
}

/* -------------------- Список преимуществ -------------------- */
.cf-v2 .cfv2-features {
    display: flex;
    flex-direction: column;
}

.cf-v2 .cfv2-feature-item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 24px;
    align-items: start;
    padding: 28px 0;
    border-bottom: 1px solid var(--cf-line);

    /* Начальное состояние для анимации появления */
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.cf-v2 .cfv2-feature-item:first-child {
    border-top: 1px solid var(--cf-line);
}

/* Каскадная задержка для плавного последовательного появления */
.cf-v2 .cfv2-feature-item:nth-child(1) { transition-delay: 0.00s; }
.cf-v2 .cfv2-feature-item:nth-child(2) { transition-delay: 0.07s; }
.cf-v2 .cfv2-feature-item:nth-child(3) { transition-delay: 0.14s; }
.cf-v2 .cfv2-feature-item:nth-child(4) { transition-delay: 0.21s; }
.cf-v2 .cfv2-feature-item:nth-child(5) { transition-delay: 0.28s; }
.cf-v2 .cfv2-feature-item:nth-child(6) { transition-delay: 0.35s; }

.cf-v2 .cfv2-feature-item.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.cf-v2 .cfv2-feature-item:hover .cfv2-feat-num {
    color: var(--cf-accent);
}

/* Большой номер */
.cf-v2 .cfv2-feat-num {
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.06em;
    color: var(--cf-num-color);
    font-variant-numeric: tabular-nums;
    user-select: none;
    padding-top: 4px;
    transition: color 0.25s ease;
}

/* Тело: заголовок + описание */
.cf-v2 .cfv2-feat-body {
    padding-top: 6px;
}

.cf-v2 .cfv2-feat-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--cf-ink);
    margin-bottom: 10px;
}

.cf-v2 .cfv2-feat-desc {
    font-size: 15px;
    line-height: 1.65;
    color: var(--cf-muted);
    margin: 0;
}

/* -------------------- Sticky aside (карта) -------------------- */
.cf-v2 .cfv2-aside {
    position: sticky;
    top: 100px;
    align-self: start;
}

.cf-v2 .cfv2-card {
    background: var(--cf-card-bg);
    border: 1px solid var(--cf-card-border);
    border-radius: 28px;
    padding: 36px 30px;

    /* Чистая тень для белой темы */
    box-shadow: 0 12px 36px -8px rgba(15, 23, 42, 0.08);
}

/* Изображение карты */
.cf-v2 .cfv2-card-visual {
    position: relative;
    margin-bottom: 28px;
}

.cf-v2 .cfv2-card-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 32px rgba(15, 23, 42, 0.16));
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.4s ease;
}

.cf-v2 .cfv2-card:hover .cfv2-card-img {
    transform: translateY(-5px) scale(1.02);
    filter: drop-shadow(0 24px 40px rgba(239, 112, 22, 0.22));
}

/* Декоративное свечение под картой */
.cf-v2 .cfv2-card-glow {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 40px;
    border-radius: 50%;
    background: rgba(239, 112, 22, 0.15);
    filter: blur(18px);
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.cf-v2 .cfv2-card:hover .cfv2-card-glow {
    opacity: 1.3;
}

/* Статистика (3 цифры в ряд) */
.cf-v2 .cfv2-card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--cf-line);
}

.cf-v2 .cfv2-card-stat {
    padding: 0 12px;
    text-align: center;
    border-right: 1px solid var(--cf-line);
}

.cf-v2 .cfv2-card-stat:first-child { padding-left: 0; }
.cf-v2 .cfv2-card-stat:last-child  { padding-right: 0; border-right: 0; }

.cf-v2 .cfv2-stat-val {
    display: block;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--cf-ink);
    line-height: 1.1;
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
}

.cf-v2 .cfv2-stat-lbl {
    font-size: 12px;
    font-weight: 500;
    color: var(--cf-muted);
    line-height: 1.4;
}

/* Список бонусов */
.cf-v2 .cfv2-perks {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
}

.cf-v2 .cfv2-perk {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--cf-ink);
    line-height: 1.4;
}

.cf-v2 .cfv2-perk-check {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--cf-accent-light);
    color: var(--cf-accent);
    font-size: 12px;
    font-weight: 800;
}

/* CTA кнопка */
.cf-v2 .cfv2-cta-btn {
    width: 100%;
    padding: 15px 22px 15px 28px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
}

.cf-v2 .cfv2-cta-btn svg {
    flex-shrink: 0;
}

/* -------------------- Адаптивность -------------------- */
@media (max-width: 1200px) {
    .cf-v2 .cfv2-layout {
        grid-template-columns: 1fr 360px;
        gap: 44px;
    }
}

@media (max-width: 1024px) {
    .card-features-section.cf-v2 {
        padding: 70px 0 80px;
    }
    .cf-v2 .cfv2-layout {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .cf-v2 .cfv2-aside {
        position: relative;
        top: auto;
        order: -1;
        max-width: 480px;
        margin: 0 auto;
        width: 100%;
    }
    .cf-v2 .cfv2-feat-num {
        font-size: 34px;
    }
}

@media (max-width: 680px) {
    .card-features-section.cf-v2 {
        padding: 60px 0 70px;
    }
    .cf-v2 .cfv2-head {
        margin-bottom: 36px;
    }
    .cf-v2 .cfv2-feature-item {
        grid-template-columns: 54px 1fr;
        gap: 16px;
        padding: 22px 0;
    }
    .cf-v2 .cfv2-feat-num {
        font-size: 26px;
    }
    .cf-v2 .cfv2-feat-title {
        font-size: 17px;
    }
    .cf-v2 .cfv2-feat-desc {
        font-size: 14px;
    }
    .cf-v2 .cfv2-card {
        padding: 26px 20px;
        border-radius: 22px;
    }
    .cf-v2 .cfv2-stat-val {
        font-size: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cf-v2 .cfv2-tag-dot::after { animation: none; }
    .cf-v2 .cfv2-feature-item {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ==========================================================================
   5.6 (v2). ТОПЛИВО ОПТОМ: светлая тема, два экрана при прокрутке
   Добавьте в КОНЕЦ style.css. Всё завёрнуто в .wholesale-v2, старые стили не затронуты.
   ========================================================================== */
.wholesale-v2 {
    --ws-ink: #0F172A;
    --ws-body: #475569;        /* контраст на белом и #F8FAFC ≥ 7:1 */
    --ws-muted: #64748B;       /* только крупный текст */
    --ws-line: #CBD5E1;
    --ws-accent: #E42D24;
    --ws-pad: 120px;

    position: relative;
    color: var(--ws-body);
}

/* Экраны: flex-контейнеры, поэтому .container обязан быть width:100%,
   иначе он сжимается по контенту и уезжает от общей сетки */
.wholesale-v2 .ws2-screen {
    display: flex;
    align-items: center;
}
.wholesale-v2 .ws2-screen > .container { width: 100%; }

/* Одна и та же двухколоночная сетка на обоих экранах */
.wholesale-v2 .ws2-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 80px;
    align-items: start;
}

.wholesale-v2 .ws2-title {
    margin: 0;
    font-size: clamp(32px, 3.2vw, 48px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--ws-ink);
}

.wholesale-v2 a:focus-visible {
    outline: 3px solid var(--ws-accent);
    outline-offset: 3px;
}

/* ==========================================================================
   ЭКРАН 1. ЧТО ПОСТАВЛЯЕМ
   ========================================================================== */
.wholesale-v2 .ws2-screen-supply {
    padding: var(--ws-pad) 0 calc(var(--ws-pad) + 32px);
}

.wholesale-v2 .ws2-supply-info .ws2-title { max-width: 16ch; }

.wholesale-v2 .ws2-lead {
    margin: 26px 0 32px;
    max-width: 52ch;
    font-size: 18px;
    line-height: 1.6;
}

.wholesale-v2 .ws2-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ws-ink);
    text-decoration: none;
    border-bottom: 1.5px solid var(--ws-ink);
    transition: color .2s ease, border-color .2s ease;
}
.wholesale-v2 .ws2-link svg { transition: transform .2s ease; }
.wholesale-v2 .ws2-link:hover { color: var(--ws-accent); border-color: var(--ws-accent); }
.wholesale-v2 .ws2-link:hover svg { transform: translateX(4px); }

/* Список топлива строками */
.wholesale-v2 .ws2-fuel-list { border-top: 1px solid var(--ws-line); }

.wholesale-v2 .ws2-fuel-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    padding: 26px 0;
    border-bottom: 1px solid var(--ws-line);
}

.wholesale-v2 .ws2-fuel-name {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--ws-ink);
}
.wholesale-v2 .ws2-fuel-desc {
    margin: 0;
    max-width: 52ch;
    font-size: 15px;
    line-height: 1.55;
}

/* Статус: смысл несут и слово, и форма точки (не только цвет) */
.wholesale-v2 .ws2-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    padding-top: 6px;
    white-space: nowrap;
    font-size: 14px;
}
.wholesale-v2 .ws2-status-dot {
    box-sizing: border-box;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}
.wholesale-v2 .ws2-status-in-stock .ws2-status-dot { background: var(--ws-ink); }
.wholesale-v2 .ws2-status-in-stock .ws2-status-text { color: var(--ws-ink); font-weight: 600; }
.wholesale-v2 .ws2-status-on-demand .ws2-status-dot { border: 1.5px solid #94A3B8; background: transparent; }
.wholesale-v2 .ws2-status-on-demand .ws2-status-text { color: var(--ws-body); font-weight: 500; }

/* ==========================================================================
   ЭКРАН 2. КАК ДОСТАВЛЯЕМ (наезжает на экран 1 скруглённым краем)
   ========================================================================== */
.wholesale-v2 .ws2-screen-delivery {
    position: relative;
    z-index: 2;
    margin-top: -32px;
    padding: var(--ws-pad) 0;
    background: #FFFFFF;
    border-radius: 32px 32px 0 0;
    box-shadow: 0 -20px 60px rgba(15, 23, 42, 0.10);
}

/* Цифры: строки с линиями, номер слева, подпись справа */
.wholesale-v2 .ws2-d-title { margin-bottom: 40px; }

.wholesale-v2 .ws2-stats { margin: 0; border-top: 1px solid var(--ws-line); }

.wholesale-v2 .ws2-stat {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: baseline;
    gap: 20px;
    padding: 24px 0;
    border-bottom: 1px solid var(--ws-line);
}

.wholesale-v2 .ws2-stat-num {
    margin: 0;
    font-size: clamp(34px, 3.4vw, 52px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--ws-ink);
}
.wholesale-v2 .ws2-stat-num small {
    font-size: 0.4em;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--ws-muted);
}
.wholesale-v2 .ws2-stat-label {
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
}

.wholesale-v2 .ws2-delivery-grid { align-items: stretch; row-gap: 64px; }
.wholesale-v2 .ws2-d-cta { margin-top: 40px; }
.wholesale-v2 .ws2-cta { padding: 16px 36px; min-height: 52px; }

/* Фото: тянется на всю высоту левой колонки, поэтому верхний ряд всегда ровный */
.wholesale-v2 .ws2-col-right { display: flex; flex-direction: column; }

.wholesale-v2 .ws2-media {
    position: relative;
    flex: 1 1 auto;
    min-height: 340px;
    overflow: hidden;
    border-radius: 28px;
    background: #E2E8F0;
    box-shadow: 0 24px 50px -18px rgba(15, 23, 42, 0.28);
}
.wholesale-v2 .ws2-media-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}
.wholesale-v2 .ws2-media:hover .ws2-media-img { transform: scale(1.03); }

/* Второй ряд на всю ширину: четыре преимущества в колонках */
.wholesale-v2 .ws2-perks {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 40px;
    margin-top: 0;
    border-bottom: 0;
}

.wholesale-v2 .ws2-perk {
    display: block;
    gap: 0;
    padding: 28px 0 0;
    border-top: 1px solid var(--ws-line);
}

.wholesale-v2 .ws2-perk-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: rgba(228, 45, 36, 0.08);
    color: var(--ws-accent);
}

.wholesale-v2 .ws2-perk-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ws-ink);
}
.wholesale-v2 .ws2-perk-desc {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
}

.wholesale-v2 .ws2-industries {
    grid-column: 1 / -1;
    margin: -24px 0 0;
    padding-top: 28px;
    border-top: 1px solid var(--ws-line);
    font-size: 16px;
    line-height: 1.65;
}

/* ==========================================================================
   ДВА ПРОКРУТА: экран 1 «прилипает», экран 2 наезжает на него.
   Только на десктопе и только если высота окна достаточна (иначе низ списка
   был бы закрыт). Во всех остальных случаях экраны идут друг за другом.
   ========================================================================== */
@media (min-width: 993px) and (min-height: 800px) {
    .wholesale-v2 .ws2-screen-supply {
        position: sticky;
        top: 0;
        z-index: 1;
        min-height: 100vh;
    }
    .wholesale-v2 .ws2-screen-delivery { min-height: 100vh; }
}

/* ==========================================================================
   АДАПТИВ
   ========================================================================== */
@media (max-width: 1200px) {
    .wholesale-v2 .ws2-grid { gap: 56px; }
    .wholesale-v2 .ws2-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 36px; }
}

@media (max-width: 992px) {
    .wholesale-v2 { --ws-pad: 80px; }

    .wholesale-v2 .ws2-screen-delivery {
        margin-top: -28px;
        border-radius: 28px 28px 0 0;
    }
    .wholesale-v2 .ws2-screen-supply { padding-bottom: calc(var(--ws-pad) + 28px); }

    .wholesale-v2 .ws2-grid { grid-template-columns: 1fr; gap: 40px; }
    .wholesale-v2 .ws2-supply-info .ws2-title { max-width: 20ch; }

    /* Экран 2: порядок блоков на планшете и телефоне:
       заголовок, цифры, фото, преимущества, отрасли, кнопка */
    .wholesale-v2 .ws2-delivery-grid { gap: 0; }
    .wholesale-v2 .ws2-col-left,
    .wholesale-v2 .ws2-col-right { display: contents; }

    .wholesale-v2 .ws2-d-title   { order: 1; margin-bottom: 32px; }
    .wholesale-v2 .ws2-stats     { order: 2; }
    .wholesale-v2 .ws2-media     { order: 3; margin-top: 48px; flex: none; min-height: 0; }
    .wholesale-v2 .ws2-media-img { position: static; height: auto; aspect-ratio: 2 / 1; }
    .wholesale-v2 .ws2-perks     { order: 4; margin-top: 40px; }
    .wholesale-v2 .ws2-industries{ order: 5; margin: 36px 0 0; }
    .wholesale-v2 .ws2-d-cta     { order: 6; margin-top: 40px; padding-top: 0; }

    .wholesale-v2 .ws2-delivery-grid { display: flex; flex-direction: column; align-items: stretch; }
}

@media (max-width: 640px) {
    .wholesale-v2 { --ws-pad: 60px; }

    .wholesale-v2 .ws2-screen-delivery {
        margin-top: -24px;
        border-radius: 24px 24px 0 0;
    }
    .wholesale-v2 .ws2-screen-supply { padding-bottom: calc(var(--ws-pad) + 24px); }

    .wholesale-v2 .ws2-lead { font-size: 17px; }
    .wholesale-v2 .ws2-fuel-row { padding: 22px 0; }
    .wholesale-v2 .ws2-fuel-name { font-size: 20px; }

    .wholesale-v2 .ws2-stat { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
    .wholesale-v2 .ws2-stat-num { font-size: 44px; }

    .wholesale-v2 .ws2-media { border-radius: 22px; margin-top: 40px; }
    .wholesale-v2 .ws2-media-img { aspect-ratio: 4 / 3; }

    .wholesale-v2 .ws2-perks { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .wholesale-v2 .ws2-fuel-row { flex-direction: column; gap: 10px; }
    .wholesale-v2 .ws2-status { padding-top: 0; }
    .wholesale-v2 .ws2-cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .wholesale-v2 .ws2-media-img,
    .wholesale-v2 .ws2-link svg { transition: none; }
    .wholesale-v2 .ws2-media:hover .ws2-media-img,
    .wholesale-v2 .ws2-link:hover svg { transform: none; }
}

/* ==========================================================================
   10. МОБИЛЬНАЯ АДАПТАЦИЯ (СТУПЕНИ 992 / 768 / 576 / 375)
   Только переопределение изменившихся свойств; десктопные правила выше
   остаются как есть.
   ========================================================================== */

/* ---------- Ноутбук / горизонтальный планшет ---------- */
@media (max-width: 992px) {
    .page-title {
        font-size: 32px;
        letter-spacing: -0.3px;
    }
}

/* Цифры об «Эталоне» в 4 колонки держатся только с 1366px:
   993–1150px колонки «1fr» не сжимаются ниже неразрывных чисел («500 000+ л»)
   и сетка распирала страницу горизонтальным скроллом;
   1151–1365px числа ломались переносом («10 000 +»).
   До 1365px показываем тот же вид в 2 колонки, что и на планшете. */
@media (min-width: 993px) and (max-width: 1365px) {
    .about-v2 .ab2-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 32px;
        margin-top: 56px;
        padding-top: 0;
        border-top: 0;
    }
    .about-v2 .ab2-stat,
    .about-v2 .ab2-stat:first-child,
    .about-v2 .ab2-stat:last-child {
        padding: 24px 0 0;
        border-left: 0;
        border-top: 1px solid var(--ab-line);
    }
}

/* ---------- Планшет ---------- */
@media (max-width: 768px) {
    /* Бегущая строка «быстрая доставка»: 64px съедает всю ширину экрана */
    .delivery-marquee-chunk h2 {
        font-size: clamp(30px, 9vw, 48px);
    }

    /* Цифры об «Эталоне» в одну колонку: в 256px колонке подпись отрывается от числа */
    .about-v2 .ab2-stats {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-top: 44px;
    }

    /* Калькулятор: подписи и цифры в столбик, иначе «5 000 л» улетает к правому краю */
    .prices-v2 .pr2-side { flex-direction: column; gap: 0; }
    .prices-v2 .pr2-stat { padding: 24px 0; }
    .prices-v2 .pr2-stat:first-child {
        padding: 0 0 24px;
        border-right: 0;
        border-bottom: 1px solid var(--pr-line);
    }
    .prices-v2 .pr2-stat:last-child { padding-bottom: 0; }
    .prices-v2 .pr2-calc-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .prices-v2 .pr2-calc-label { font-size: 18px; max-width: none; }
    .prices-v2 .pr2-calc-btn { width: 100%; }
}

/* ---------- Мобильные ---------- */
@media (max-width: 576px) {
    .page-title { font-size: 28px; }
    .page-subtitle { font-size: 16px; }

    /* «Схема проезда» и подпись к ней — друг под друга */
    .map-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

/* ---------- Маленькие смартфоны ---------- */
@media (max-width: 375px) {
    .page-title { font-size: 26px; }

    /* Статистика карточки: 100px на колонку */
    .cf-v2 .cfv2-card-stat { padding: 0 8px; }
    .cf-v2 .cfv2-stat-val { font-size: 17px; }

    /* Форма заявки: 24px полей съедают четверть экрана */
    .lead-modal-overlay { padding: 12px; }
    .lead-card-left,
    .lead-card-right { padding: 24px 16px; }
}

/* ---------- 11. Загрузка цен: плавающие точки, пока ждут live-данные ---------- */
.price-loading {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    min-width: 4.5ch;
}
.price-loading i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.35;
    animation: price-dot-bounce 1.2s infinite ease-in-out;
}
.price-loading i:nth-child(2) { animation-delay: 0.15s; }
.price-loading i:nth-child(3) { animation-delay: 0.3s; }
@keyframes price-dot-bounce {
    0%, 60%, 100% { transform: translateY(0);    opacity: 0.35; }
    30%           { transform: translateY(-5px); opacity: 1; }
}

/* ==========================================================================
   6.9 Архив новостей (page-news.php) — грид карточек 3 в ряд
   ========================================================================== */
.news-archive-page {
    padding: 64px 0 100px 0;
    background-color: var(--color-bg-page);
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 40px;
}

.news-card {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 28px;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.news-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -6px rgba(15, 23, 42, 0.08);
}

.news-card-date {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    margin-bottom: 10px;
}

.news-card-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.3px;
    color: var(--color-text-main);
    margin: 0 0 12px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card:hover .news-card-title {
    color: var(--color-primary);
}

.news-card-teaser {
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-text-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-pagination {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 40px;
}

.news-pagination a,
.news-pagination span.current,
.news-pagination .page-numbers.dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-main);
    text-decoration: none;
    background: #FFFFFF;
}

.news-pagination a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.news-pagination span.current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #FFFFFF;
}

.news-pagination .news-page-info {
    margin-left: auto;
    font-size: 14px;
    color: var(--color-text-muted);
}

@media (max-width: 992px) {
    .news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .news-card {
        padding: 24px;
    }

    .news-card-title {
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    .news-archive-page {
        padding: 40px 0 64px 0;
    }

    .news-grid {
        grid-template-columns: 1fr;
        margin-top: 28px;
    }

    .news-card-title {
        font-size: 19px;
    }

    .news-pagination .news-page-info {
        width: 100%;
        margin-left: 0;
        text-align: center;
    }
}

/* ==========================================================================
   6.10 Страница отдельной новости (single.php) — текст слева, список справа
   ========================================================================== */
.news-single-page {
    padding: 64px 0 100px 0;
    background-color: var(--color-bg-page);
}

.news-single-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 56px;
    align-items: start;
}

.news-single-main {
    min-width: 0;
}

.news-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
    margin-bottom: 28px;
}

.news-back:hover {
    color: var(--color-primary);
}

.news-back svg {
    flex-shrink: 0;
}

.news-single-date {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    margin-bottom: 12px;
}

.news-single-title {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: var(--color-text-main);
    margin: 0 0 32px 0;
}

.news-single-content {
    font-size: 17px;
    line-height: 1.75;
    color: var(--color-text-main);
}

.news-single-content p {
    margin: 0 0 20px 0;
}

.news-single-content a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.news-single-content a:hover {
    color: var(--color-primary-hover);
}

.news-single-content h2,
.news-single-content h3 {
    font-weight: 700;
    line-height: 1.3;
    margin: 36px 0 16px 0;
}

.news-single-content h2 {
    font-size: 26px;
}

.news-single-content h3 {
    font-size: 21px;
}

.news-single-content ul,
.news-single-content ol {
    margin: 0 0 20px 0;
    padding-left: 24px;
}

.news-single-content li {
    margin-bottom: 8px;
}

.news-single-content img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    margin: 8px 0 24px 0;
}

.news-single-content blockquote {
    margin: 28px 0;
    padding: 4px 0 4px 24px;
    border-left: 4px solid var(--color-primary);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.5;
}

/* --- Боковой список «Другие новости» --- */
.news-sidebar {
    position: sticky;
    top: 96px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    background: #FFFFFF;
}

.news-sidebar-heading {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0 0 8px 0;
}

.news-sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.news-sidebar-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
}

.news-sidebar-item:last-child {
    border-bottom: none;
}

.news-sidebar-date {
    display: block;
    font-size: 13px;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    margin-bottom: 2px;
}

.news-sidebar-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text-main);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-sidebar-title:hover {
    color: var(--color-primary);
}

.news-sidebar-all {
    display: inline-block;
    margin-top: 14px;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}

.news-sidebar-all:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 992px) {
    .news-single-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .news-sidebar {
        position: static;
    }
}

@media (max-width: 768px) {
    .news-single-page {
        padding: 40px 0 64px 0;
    }

    .news-single-title {
        font-size: 27px;
        letter-spacing: -0.3px;
        margin-bottom: 24px;
    }

    .news-single-content {
        font-size: 16px;
    }
}

/* Оптическая выравнировка страниц новостей: левый край контента
   совпадает с логотипом в плашке шапки (53px), а не с её рамкой (32px).
   Только десктоп: на мобильных плашка во всю ширину без внутреннего отступа. */
@media (min-width: 993px) {
    .news-archive-page > .container,
    .news-single-page > .container {
        padding-left: 53px;
        padding-right: 53px;
    }
}


/* ==========================================================================
   6.1 (v2). СТРАНИЦА «КОНТАКТЫ» — светлая тема, строки с разделителями
   Тот же язык, что у .prices-v2 / .about-v2 / .ws2-screen-supply, но без
   тёмного фона. Старые правила раздела 6.1 (.contact-card, .req-card,
   .docs-download-card и др.) новой разметкой не используются.
   ========================================================================== */
.contacts-v2 {
    --ct-ink: #0F172A;
    --ct-body: #475569;        /* контраст на белом ≥ 7:1 */
    --ct-muted: #64748B;       /* только для подписей */
    --ct-line: #CBD5E1;
    --ct-accent: #E42D24;
    --ct-pad: 96px;

    background: #FFFFFF;
    color: var(--ct-body);
    padding-top: 64px;
}

/* Хлебные крошки — как на страницах новостей */

/* Боковые отступы — оптическая выравнировка страниц новостей: край контента
   по логотипу в плашке шапки (53px), а не по рамке контейнера (32px).
   Только десктоп: на мобильных плашка во всю ширину без внутреннего отступа. */
@media (min-width: 993px) {
    .contacts-v2 .ct2-screen > .container,
    .contacts-v2 .ct2-crumbs {
        padding-left: 53px;
        padding-right: 53px;
    }
}

/* Экраны: flex-контейнеры, поэтому .container обязан быть width:100% */
.contacts-v2 .ct2-screen {
    display: flex;
    align-items: center;
}
.contacts-v2 .ct2-screen > .container { width: 100%; }

/* Одна и та же сетка на всех трёх экранах */
.contacts-v2 .ct2-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 80px;
    align-items: start;
}

/* padding-top у самого экрана = 0: сверху уже отдаёт .contacts-v2 (64px,
   как у .news-archive-page), дальше крошки (mb 28) и .page-header (mb 40) —
   заголовок и первый блок встают на те же Y, что в новостях */
.contacts-v2 .ct2-screen-contacts {
    padding: 0 0 calc(var(--ct-pad) + 32px);
}

/* Контакты: строки, а не карточки */
.contacts-v2 .ct2-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--ct-line);
}

.contacts-v2 .ct2-contact {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid var(--ct-line);
}

.contacts-v2 .ct2-contact-link {
    display: block;
    text-decoration: none;
}
.contacts-v2 .ct2-contact-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ct-muted);
}

.contacts-v2 .ct2-contact-val {
    display: block;
    font-size: clamp(26px, 2.2vw, 34px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--ct-ink);
    transition: color .2s ease;
}

.contacts-v2 .ct2-contact-val--text { cursor: default; }
.contacts-v2 .ct2-contact-val--sm { font-size: clamp(22px, 1.8vw, 28px); }

.contacts-v2 .ct2-contact-sub {
    display: block;
    margin-top: 6px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ct-body);
}

.contacts-v2 .ct2-contact-arrow {
    flex-shrink: 0;
    margin-top: 8px;
    color: var(--ct-line);
    transition: color .2s ease, transform .2s ease;
}

.contacts-v2 .ct2-contact:has(.ct2-contact-link):hover .ct2-contact-val { color: var(--ct-accent); }
.contacts-v2 .ct2-contact:has(.ct2-contact-link):hover .ct2-contact-arrow {
    color: var(--ct-accent);
    transform: translate(3px, -3px);
}

.contacts-v2 .ct2-contact-link:focus-visible {
    outline: 3px solid var(--ct-accent);
    outline-offset: 4px;
    border-radius: 6px;
}

/* Карта */
.contacts-v2 .ct2-map {
    margin: 0;
    padding: 0;
}

.contacts-v2 .ct2-map iframe {
    display: block;
    width: 100%;
    height: clamp(360px, 52vh, 620px);
    border: 1px solid var(--ct-line);
    border-radius: 28px;
    box-shadow: 0 24px 50px -18px rgba(15, 23, 42, .28);
}

.contacts-v2 .ct2-map-note {
    margin-top: 16px;
    font-size: 15px;
    color: var(--ct-muted);
}

/* ---------- Экраны 2 и 3: реквизиты и документы ---------- */
.contacts-v2 .ct2-screen-req,
.contacts-v2 .ct2-screen-docs {
    position: relative;
    z-index: 2;
    margin-top: -32px;
    padding: var(--ct-pad) 0;
    background: #FFFFFF;
    border-radius: 32px 32px 0 0;
    box-shadow: 0 -20px 60px rgba(15, 23, 42, .10);
}

.contacts-v2 .ct2-screen-req {
    margin-bottom: -32px; /* верхний край экрана документов наезжает на реквизиты */
}

.contacts-v2 .ct2-sec-head { padding-top: 0; }

.contacts-v2 .ct2-sec-title {
    margin: 0;
    font-size: clamp(32px, 3.2vw, 48px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--ct-ink);
}

.contacts-v2 .ct2-sec-sub {
    margin: 20px 0 0;
    max-width: 42ch;
    font-size: 17px;
    line-height: 1.6;
    color: var(--ct-body);
}

/* Отступ от шапки до первой строки делает только border-top сетки */
.contacts-v2 .ct2-copy-wrap {
    margin: 40px 0 0;
}

.contacts-v2 .btn-copy {
    background: #FFFFFF;
    border: 1px solid var(--ct-line);
    color: var(--ct-ink);
    padding: 13px 26px;
    min-height: 48px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 9999px;
    box-shadow: none;
}

.contacts-v2 .btn-copy:hover {
    border-color: var(--ct-accent);
    color: var(--ct-accent);
    transform: none;
    box-shadow: none;
}

.contacts-v2 .btn-copy:focus-visible {
    outline: 3px solid var(--ct-accent);
    outline-offset: 3px;
}

.contacts-v2 .btn-copy.copied {
    border-color: var(--color-success);
    background: var(--color-success-bg);
    color: var(--color-success);
}

/* Строки реквизитов: подпись слева, значение справа (как цифры в ws2-stat) */
.contacts-v2 .ct2-req-list {
    margin: 0;
    border-top: 1px solid var(--ct-line);
}

.contacts-v2 .ct2-req {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: baseline;
    gap: 24px;
    padding: 22px 0;
    border-bottom: 1px solid var(--ct-line);
}

.contacts-v2 .ct2-req-label {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--ct-muted);
}

.contacts-v2 .ct2-req-val {
    margin: 0;
    font-size: clamp(18px, 1.3vw, 21px);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    color: var(--ct-ink);
}

.contacts-v2 .ct2-req-val--strong { font-weight: 700; }
.contacts-v2 .ct2-req-val--accent { font-weight: 700; color: var(--ct-accent); }

/* Значения с data-copy: кликом копируются в буфер */
.contacts-v2 .ct2-req-val[data-copy] {
    cursor: pointer;
    transition: color .2s ease;
}
.contacts-v2 .ct2-req-val[data-copy]:hover { color: var(--ct-accent); }
.contacts-v2 .ct2-req-val[data-copy]:focus-visible {
    outline: 2px solid var(--ct-accent);
    outline-offset: 3px;
    border-radius: 4px;
}
.contacts-v2 .ct2-req-val.is-copied { color: var(--color-success); }

.contacts-v2 .ct2-req-sub {
    grid-column: 2;
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ct-body);
}

/* Документы */
.contacts-v2 .ct2-docs-cta {
    margin: 32px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ct-body);
}

.contacts-v2 .ct2-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ct-ink);
    text-decoration: none;
    border-bottom: 1.5px solid var(--ct-ink);
    transition: color .2s ease, border-color .2s ease;
}
.contacts-v2 .ct2-link svg { transition: transform .2s ease; }
.contacts-v2 .ct2-link:hover {
    color: var(--ct-accent);
    border-color: var(--ct-accent);
}
.contacts-v2 .ct2-link:hover svg { transform: translateX(4px); }
.contacts-v2 .ct2-link:focus-visible {
    outline: 3px solid var(--ct-accent);
    outline-offset: 4px;
}

.contacts-v2 .ct2-docs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--ct-line);
}

.contacts-v2 .ct2-doc-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 24px;
    padding: 26px 0;
    border-bottom: 1px solid var(--ct-line);
    text-decoration: none;
    color: var(--ct-ink);
    transition: color .2s ease;
}

.contacts-v2 .ct2-doc-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contacts-v2 .ct2-doc-name {
    font-size: clamp(18px, 1.4vw, 21px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.015em;
}

.contacts-v2 .ct2-doc-meta {
    font-size: 14px;
    line-height: 1.45;
    color: var(--ct-muted);
}

.contacts-v2 .ct2-doc-ext {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    flex-shrink: 0;
}
.contacts-v2 .ct2-doc-ext--doc {
    background: #EFF6FF;
    color: #2563EB;
}

.contacts-v2 .ct2-doc-icon { color: var(--ct-muted); transition: transform .2s ease, color .2s ease; }

.contacts-v2 .ct2-doc-link:hover { color: var(--ct-accent); }
.contacts-v2 .ct2-doc-link:hover .ct2-doc-icon {
    color: var(--ct-accent);
    transform: translateY(3px);
}
.contacts-v2 .ct2-doc-link:focus-visible {
    outline: 3px solid var(--ct-accent);
    outline-offset: 4px;
}

/* ---------- Адаптив ---------- */
/* Шапка секции «Реквизиты» / «Документы» прилипает под меню и остаётся
   видимой, пока по правой колонке прокручиваются строки */
@media (min-width: 993px) {
    .contacts-v2 .ct2-sec-head {
        position: sticky;
        top: 96px;
    }
}

@media (max-width: 1200px) {
    .contacts-v2 .ct2-grid { gap: 56px; }
}

@media (max-width: 992px) {
    .contacts-v2 { --ct-pad: 72px; }

    .contacts-v2 .ct2-grid { grid-template-columns: 1fr; gap: 40px; }

    .contacts-v2 .ct2-screen-req,
    .contacts-v2 .ct2-screen-docs {
        margin-top: -28px;
        border-radius: 28px 28px 0 0;
    }
    .contacts-v2 .ct2-screen-req { margin-bottom: -28px; }
    .contacts-v2 .ct2-screen-contacts { padding: 0 0 calc(var(--ct-pad) + 28px); }

    .contacts-v2 .ct2-map iframe { height: 420px; }
    .contacts-v2 .ct2-contact-val { font-size: 28px; }
}

/* Как у .news-archive-page на 768px: верхний отступ страницы 40px вместо 64px */
@media (max-width: 768px) {
    .contacts-v2 { padding-top: 40px; }
}

@media (max-width: 640px) {
    .contacts-v2 { --ct-pad: 56px; }

    .contacts-v2 .ct2-screen-req,
    .contacts-v2 .ct2-screen-docs {
        margin-top: -24px;
        border-radius: 24px 24px 0 0;
    }
    .contacts-v2 .ct2-screen-req { margin-bottom: -24px; }
    .contacts-v2 .ct2-screen-contacts { padding: 0 0 calc(var(--ct-pad) + 24px); }

    .contacts-v2 .ct2-contact { padding: 20px 0; }
    .contacts-v2 .ct2-contact-val { font-size: 24px; }
    .contacts-v2 .ct2-contact-val--sm { font-size: 20px; }
    .contacts-v2 .ct2-contact-arrow { display: none; }

    .contacts-v2 .ct2-map iframe {
        height: 320px;
        border-radius: 22px;
    }

    .contacts-v2 .btn-copy { width: 100%; }

    .contacts-v2 .ct2-req { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
    .contacts-v2 .ct2-req-sub { grid-column: 1; }

    .contacts-v2 .ct2-doc-link { column-gap: 16px; padding: 22px 0; }
    .contacts-v2 .ct2-doc-ext { width: 44px; height: 44px; border-radius: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .contacts-v2 * { transition: none; }
}

/* ==========================================================================
   Страница Политики конфиденциальности
   ========================================================================== */
.privacy-policy-page {
    background-color: var(--color-bg-page, #FFFFFF) !important;
}

@media (max-width: 640px) {
    .privacy-policy-page {
        padding: 32px 0 64px !important;
    }
    .privacy-policy-card {
        padding: 24px 18px !important;
        border-radius: 12px !important;
    }
}