/* ============================================================================
   EntryX Design Foundation
   Источник токенов: DESIGN.md (дизайн-система лендинга MCPG).

   ПРАВИЛА:
   - Все классы с префиксом .ex- . Селекторов по тегам нет — существующая
     вёрстка (bootstrap.min.css, style.css и прочие) не затрагивается.
   - Подключается ПОСЛЕДНИМ в main.blade.php, чтобы при равной специфичности
     выигрывал этот файл.
   - Размеры в px, не в rem: rem зависит от font-size на html, который
     задаётся в старых стилях проекта.
   ============================================================================ */

/* ---- Шрифты, всё локально --------------------------------------------------
   Лендинг MCPG тянет Geist и PT Mono с fonts.googleapis.com. Здесь так нельзя:
   прод в РК, внешние CDN — лишняя точка отказа. Файлы скачаны и лежат
   в public/fonts/geist и public/fonts/pt-mono, отсюда ничего наружу не идёт.

   Geist — variable, один файл на весь диапазон весов 100–900.
   Субсет vietnamese не берём: он тут не нужен.
   Cera Pro (шрифт старого сайта, public/css/fonts.css) остаётся первым
   фолбэком — на случай если Geist не отдастся.                             */
@font-face {
    font-family: 'Geist';
    src: url('../fonts/geist/geist-cyrillic.woff2') format('woff2');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/geist/geist-cyrillic-ext.woff2') format('woff2');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/geist/geist-latin.woff2') format('woff2');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/geist/geist-latin-ext.woff2') format('woff2');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'PT Mono';
    src: url('../fonts/pt-mono/pt-mono-cyrillic.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'PT Mono';
    src: url('../fonts/pt-mono/pt-mono-cyrillic-ext.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: 'PT Mono';
    src: url('../fonts/pt-mono/pt-mono-latin.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'PT Mono';
    src: url('../fonts/pt-mono/pt-mono-latin-ext.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* ---- Цвета: зелёные ---------------------------------------------------
       Решение от 12.08.2026: два зелёных, как в лендинге MCPG.
       Брендбучный #00775A не берём — в коде лендинга его нет ни разу.
       Третий зелёный лендинга (#007a57, текст в футере) свёрнут в --ex-green. */
    --ex-green:              #009879;  /* основной: кнопки, зелёный текст   */
    --ex-green-accent:       #22957A;  /* акценты: точки, цифры, иконки     */
    --ex-green-light:        #c7ea92;  /* светло-зелёный на тёмном фоне     */
    --ex-ink-forest:         #122023;  /* тёмная (вторичная) кнопка         */

    /* ---- Цвета: нейтральные ---------------------------------------------- */
    --ex-page:               #f5f5f5;  /* фон страницы                      */
    --ex-surface:            #ffffff;  /* фон карточки                      */
    --ex-surface-alt:        #f9f9f9;  /* фон карточки FAQ-типа             */
    --ex-nav:                #e9e9e9;  /* плашки, квадраты под иконки       */
    --ex-ink:                #050505;  /* основной текст                    */
    --ex-ink-soft:           #1e1e1f;  /* текст в карточках                 */
    --ex-ink-muted:          #3d3d3d;  /* приглушённый текст                */
    /* На лендинге подписи набраны #888888, но на фоне #f5f5f5 это 3.25:1 —
       мимо WCAG AA. Затемнили до 4.89:1. Решение от 12.08.2026.           */
    --ex-muted:              #6b6b6b;  /* подписи                           */
    --ex-border:             rgba(17, 17, 17, 0.10);
    --ex-border-soft:        rgba(17, 17, 17, 0.05);
    --ex-hairline:           rgba(92, 92, 92, 0.20);

    /* ---- Цвета: направления (из брендбука, совпадают с лендингом) -------- */
    --ex-trade:              #84c713;
    --ex-design:             #ff9d00;
    --ex-digital:            #0072e3;

    /* ---- Шрифты -----------------------------------------------------------
       Оба лежат локально, @font-face объявлены выше. У обоих есть кириллица.
       Cera Pro во втором эшелоне — это шрифт старого сайта, он уже подключён
       через style.css, так что фолбэк ничего не стоит.                      */
    --ex-font-sans: 'Geist', 'Cera Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --ex-font-mono: 'PT Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Courier New', monospace;

    /* ---- Типографика ------------------------------------------------------
       Пары кегль / интерлиньяж / трекинг взяты из DESIGN.md.
       Чем крупнее кегль, тем сильнее отрицательный трекинг.                 */
    --ex-h1-size:            clamp(36px, 2rem + 2.2vw, 60px);
    --ex-h1-lh:              1.05;
    --ex-h1-ls:              -0.05em;
    --ex-h1-weight:          400;

    --ex-h2-size:            clamp(34px, 2rem + 1.1vw, 42px);
    --ex-h2-lh:              1;
    --ex-h2-ls:              -0.05em;
    --ex-h2-weight:          400;

    --ex-h3-size:            clamp(22px, 1.2rem + 0.9vw, 28px);
    --ex-h3-lh:              1.1;
    --ex-h3-ls:              -0.02em;
    --ex-h3-weight:          600;

    --ex-body-size:          16px;
    --ex-body-lh:            1.5;
    --ex-body-ls:            0;

    --ex-lead-size:          20px;
    --ex-lead-lh:            1.4;
    --ex-lead-ls:            -0.025em;

    --ex-caption-size:       14px;
    --ex-caption-lh:         1.43;

    --ex-overline-size:      12.96px;
    --ex-overline-lh:        1.2;
    --ex-overline-ls:        -0.5184px;

    /* ---- Отступы ---------------------------------------------------------- */
    --ex-space-1:            4px;
    --ex-space-2:            8px;
    --ex-space-3:            12px;
    --ex-space-4:            16px;
    --ex-space-5:            20px;
    --ex-space-6:            24px;
    --ex-space-8:            32px;
    --ex-space-10:           40px;
    --ex-space-12:           48px;
    --ex-space-16:           64px;
    --ex-space-20:           80px;
    --ex-space-24:           96px;
    --ex-space-32:           128px;
    --ex-space-40:           160px;

    --ex-section-y:          clamp(64px, 8vw, 128px);
    --ex-container-max:      1640px;
    --ex-container-x:        clamp(16px, 3vw, 32px);

    /* ---- Радиусы ---------------------------------------------------------- */
    --ex-radius-sm:          6px;    /* инпуты, квадраты под иконки          */
    --ex-radius-md:          8px;    /* плашки                               */
    --ex-radius-lg:          12px;   /* контейнеры форм, картинки в карточке */
    --ex-radius-xl:          16px;   /* основной радиус карточки             */
    --ex-radius-2xl:         24px;
    --ex-radius-pill:        9999px; /* кнопки, чипы, точки                  */

    /* ---- Тени -------------------------------------------------------------
       Теней в системе почти нет: глубина делается фоном и границами.        */
    --ex-shadow-md:          0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10);
    --ex-shadow-lg:          0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
    --ex-shadow-xl:          0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --ex-shadow-glow:        0 4px 12px rgba(27, 139, 111, 0.40);

    /* ---- Движение ---------------------------------------------------------- */
    --ex-ease:               cubic-bezier(0.65, 0, 0.35, 1);
    --ex-ease-out:           cubic-bezier(0.22, 1, 0.36, 1);
    --ex-duration:           300ms;
    --ex-duration-slow:      500ms;
}

/* ============================================================================
   Раскладка
   ============================================================================ */

/* Единый контейнер. Своё имя, с bootstrap-овским .container не пересекается. */
.ex-container {
    width: 100%;
    max-width: var(--ex-container-max);
    margin-inline: auto;
    padding-inline: var(--ex-container-x);
    box-sizing: border-box;
}

.ex-container--narrow { max-width: 1200px; }
.ex-container--text   { max-width: 800px; }

/* Вертикальный ритм секции. */
.ex-section {
    padding-block: var(--ex-section-y);
    background-color: var(--ex-page);
}

.ex-section--tight { padding-block: clamp(40px, 5vw, 64px); }
.ex-section--flush { padding-block: 0; }
.ex-section--white { background-color: var(--ex-surface); }
.ex-section--dark  { background-color: var(--ex-ink-forest); color: var(--ex-page); }

/* ============================================================================
   Типографика
   ============================================================================ */

.ex-h1,
.ex-h2,
.ex-h3 {
    margin: 0;
    font-family: var(--ex-font-sans);
    color: var(--ex-ink);
    overflow-wrap: normal;
    word-break: normal;
    /* style.css:87 задаёт h2 { text-transform: uppercase } правилом по тегу.
       Класс его не перебивает — конкурирующего объявления просто нет,
       поэтому сбрасываем явно. Капслок в системе закреплён за .ex-overline,
       заголовки набираются как написаны.                                  */
    text-transform: none;
}

.ex-h1 {
    font-size: var(--ex-h1-size);
    line-height: var(--ex-h1-lh);
    letter-spacing: var(--ex-h1-ls);
    font-weight: var(--ex-h1-weight);
}

.ex-h2 {
    font-size: var(--ex-h2-size);
    line-height: var(--ex-h2-lh);
    letter-spacing: var(--ex-h2-ls);
    font-weight: var(--ex-h2-weight);
}

.ex-h3 {
    font-size: var(--ex-h3-size);
    line-height: var(--ex-h3-lh);
    letter-spacing: var(--ex-h3-ls);
    font-weight: var(--ex-h3-weight);
}

.ex-body {
    margin: 0;
    font-family: var(--ex-font-sans);
    font-size: var(--ex-body-size);
    line-height: var(--ex-body-lh);
    letter-spacing: var(--ex-body-ls);
    font-weight: 400;
    color: var(--ex-ink-soft);
}

.ex-lead {
    margin: 0;
    font-family: var(--ex-font-sans);
    font-size: var(--ex-lead-size);
    line-height: var(--ex-lead-lh);
    letter-spacing: var(--ex-lead-ls);
    font-weight: 400;
    color: var(--ex-ink-soft);
}

.ex-caption {
    margin: 0;
    font-family: var(--ex-font-sans);
    font-size: var(--ex-caption-size);
    line-height: var(--ex-caption-lh);
    color: var(--ex-muted);
}

/* Надзаголовок — самый узнаваемый элемент системы:
   PT Mono, 12.96px, капслок, отрицательный трекинг, зелёная точка 12px. */
.ex-overline {
    display: inline-flex;
    align-items: center;
    gap: var(--ex-space-3);
    margin: 0;
    font-family: var(--ex-font-mono);
    font-size: var(--ex-overline-size);
    line-height: var(--ex-overline-lh);
    letter-spacing: var(--ex-overline-ls);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--ex-ink);
}

.ex-overline::before {
    content: '';
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    border-radius: var(--ex-radius-pill);
    background-color: var(--ex-green-accent);
}

/* Точка без заливки — для варианта на тёмном фоне. */
.ex-overline--light        { color: var(--ex-page); }
.ex-overline--light::before { background-color: var(--ex-green-light); }

/* ============================================================================
   Кнопки

   Паттерн лендинга: кнопка составная — текстовая капсула + круглая капсула
   с иконкой, обе реагируют на наведение по всей группе. Hover инвертирует
   кнопку в белую, зелёный уходит в текст.
   ============================================================================ */

.ex-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 0;
    padding: 0;
    background: none;
    font-family: var(--ex-font-sans);
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.ex-btn__label,
.ex-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ex-radius-pill);
    color: #ffffff;
    /* 16px/500, а не 14px/400 как на лендинге: белый на --ex-green даёт
       3.64:1, и более крупное плотное начертание читается заметно легче.
       Формально WCAG AA это не закрывает — «крупным» текст считается
       от 18.66px bold либо 24px, — но зелёный решили не менять.          */
    font-size: 16px;
    line-height: 1.2;
    font-weight: 500;
    transition: background-color var(--ex-duration) var(--ex-ease),
                color var(--ex-duration) var(--ex-ease);
}

.ex-btn__label { padding: 12px 16px; white-space: nowrap; }
.ex-btn__icon  { position: relative; width: 42px; height: 42px; flex: 0 0 42px; overflow: hidden; }

/* Стрелок в круге две: первая уезжает вправо, вторая одновременно приезжает
   слева — так сделано на лендинге (DESIGN.md §7). Разметка: два одинаковых
   <svg> подряд, см. resources/views/site/partials/ex_arrow.blade.php.
   inset:0 + margin:auto центруют иконку, не занимая при этом transform. */
.ex-btn__icon svg {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 17px;
    height: 17px;
    fill: currentColor;
}

/* Уменьшенная кнопка — для карточек товара, где полноразмерная не помещается.
   Кегль тоже подняли (14px вместо 13px), вес держим 500 от базового правила. */
.ex-btn--sm .ex-btn__label { padding: 8px 12px; font-size: 14px; }
.ex-btn--sm .ex-btn__icon  { width: 34px; height: 34px; flex: 0 0 34px; }
.ex-btn--sm .ex-btn__icon svg { width: 14px; height: 14px; }

/* Кнопка на всю ширину — в формах (DESIGN.md §7.5). */
.ex-btn--block { display: flex; width: 100%; }
.ex-btn--block .ex-btn__label { flex: 1 1 auto; justify-content: center; }

/* --- Primary: зелёная заливка --------------------------------------------- */
.ex-btn-primary .ex-btn__label,
.ex-btn-primary .ex-btn__icon {
    background-color: var(--ex-green);
}

.ex-btn-primary:hover .ex-btn__label,
.ex-btn-primary:hover .ex-btn__icon,
.ex-btn-primary:focus-visible .ex-btn__label,
.ex-btn-primary:focus-visible .ex-btn__icon {
    background-color: #ffffff;
    color: var(--ex-green);
}

/* --- Secondary: тёмная заливка. Hover уводит в зелёный primary, не в свой -- */
.ex-btn-secondary .ex-btn__label,
.ex-btn-secondary .ex-btn__icon {
    background-color: var(--ex-ink-forest);
}

.ex-btn-secondary:hover .ex-btn__label,
.ex-btn-secondary:hover .ex-btn__icon,
.ex-btn-secondary:focus-visible .ex-btn__label,
.ex-btn-secondary:focus-visible .ex-btn__icon {
    background-color: #ffffff;
    color: var(--ex-green);
}

/* На белой подложке инвертированная кнопка сливается с фоном —
   для таких мест добавляем эту модификацию, она рисует контур на hover. */
.ex-btn--on-white:hover .ex-btn__label,
.ex-btn--on-white:hover .ex-btn__icon,
.ex-btn--on-white:focus-visible .ex-btn__label,
.ex-btn--on-white:focus-visible .ex-btn__icon {
    box-shadow: inset 0 0 0 1px var(--ex-border);
}

/* --- Состояния ------------------------------------------------------------- */
.ex-btn:focus-visible { outline: 2px solid var(--ex-green-accent); outline-offset: 3px; }
.ex-btn:active        { transform: scale(0.98); }

.ex-btn[disabled],
.ex-btn.is-disabled {
    pointer-events: none;
    opacity: 0.4;
}

/* Полёт стрелки при наведении. Вторая копия ждёт за левым краем круга
   и въезжает на место первой. */
.ex-btn__icon svg { transition: transform var(--ex-duration-slow) var(--ex-ease); }
.ex-btn__icon svg + svg { transform: translateX(-200%); }

.ex-btn:hover .ex-btn__icon svg,
.ex-btn:focus-visible .ex-btn__icon svg { transform: translateX(200%); }

.ex-btn:hover .ex-btn__icon svg + svg,
.ex-btn:focus-visible .ex-btn__icon svg + svg { transform: translateX(0); }

/* Если копия одна — оставляем прежнее поведение, круг просто пустеет.
   Так не ломается разметка, написанная до появления второй копии. */
.ex-btn__icon svg:only-child { transform: none; }
.ex-btn:hover .ex-btn__icon svg:only-child { transform: translateX(200%); }

/* --- Текстовая ссылка с подчёркиванием ------------------------------------- */
.ex-link {
    position: relative;
    display: inline-flex;
    padding-bottom: 2px;
    color: inherit;
    text-decoration: none;
}

.ex-link::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 320ms var(--ex-ease-out);
}

.ex-link:hover::after,
.ex-link:focus-visible::after { transform: scaleX(1); }

/* Ссылка внутри абзаца. Подчёркивание постоянное: цветом .ex-link от текста
   не отличается, и без линии её в тексте просто не видно. */
.ex-link--inline::after { transform: scaleX(1); }

/* ============================================================================
   Карточка
   Общий знаменатель системы: белый фон, радиус 16px, padding 24px, без тени.
   ============================================================================ */

.ex-card {
    display: flex;
    flex-direction: column;
    gap: var(--ex-space-4);
    padding: var(--ex-space-6);
    border-radius: var(--ex-radius-xl);
    background-color: var(--ex-surface);
    box-sizing: border-box;
}

.ex-card__media {
    overflow: hidden;
    border-radius: var(--ex-radius-lg);
    background-color: var(--ex-nav);
}

.ex-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ex-card__title {
    margin: 0;
    font-family: var(--ex-font-sans);
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.025em;
    font-weight: 500;
    color: var(--ex-ink);
}

.ex-card__text {
    margin: 0;
    font-size: var(--ex-body-size);
    line-height: var(--ex-body-lh);
    color: var(--ex-ink-muted);
}

/* Модификации */
.ex-card--link      { color: var(--ex-ink); text-decoration: none; }
.ex-card--bordered  { border: 1px solid var(--ex-border-soft); }
.ex-card--shadow    { box-shadow: var(--ex-shadow-md); }
.ex-card--alt       { background-color: var(--ex-surface-alt); border: 1px solid #ffffff; box-shadow: var(--ex-shadow-md); }
.ex-card--hoverable { transition: border-color var(--ex-duration-slow) var(--ex-ease); }
.ex-card--hoverable:hover { border-color: var(--ex-border); }

/* Карточка-статистика: подпись сверху, крупная зелёная цифра снизу. */
.ex-card--stat { justify-content: space-between; min-height: 188px; }

.ex-card__stat {
    font-size: clamp(48px, 4vw, 64px);
    line-height: 1.2;
    font-weight: 600;
    color: var(--ex-green-accent);
}

/* Подпись к цифре — по DESIGN.md §3: 20px / 24.6px / −0.05em. */
.ex-card__stat-label {
    margin: 0;
    font-size: 20px;
    line-height: 1.23;
    letter-spacing: -0.05em;
    color: var(--ex-ink-soft);
}

/* ============================================================================
   Мелкие утилиты, нужные фундаменту
   ============================================================================ */

.ex-chip {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding-inline: var(--ex-space-3);
    border: 1px solid rgba(17, 17, 17, 0.15);
    border-radius: var(--ex-radius-pill);
    background-color: var(--ex-surface);
    font-family: var(--ex-font-mono);
    font-size: 12px;
    line-height: 1.2;
    color: var(--ex-ink);
}

/* Единственный ребёнок .general-container из layout'а.

   Две задачи. Первая — гасить заданный старыми стилями gap: 70px между
   секциями (см. комментарий в pages/home-v2.blade.php).

   Вторая — перебить наследование от body. style.css:68-73 задаёт
   body { font-family: "Cera Pro"; letter-spacing: 0.75px; color: #181f20 },
   и всё, что внутри фундамента не объявляет шрифт явно (.ex-card__text,
   .ex-tile__title, .ex-product__title, .ex-project__title, .ex-logo__name
   и другие), наследовало Cera Pro с положительным трекингом — вперемешку
   с Geist у соседних элементов. Префикс .ex- защищает от коллизий классов,
   но не от наследования: перекрывать надо здесь, на общем предке.        */
.ex-page {
    width: 100%;
    font-family: var(--ex-font-sans);
    line-height: var(--ex-body-lh);
    letter-spacing: normal;
    color: var(--ex-ink);
}

/* Фокус с клавиатуры.

   reset.css:28 задаёт :focus { outline: 0 }, style.css:37 — a:focus
   { outline: none }. Браузерное кольцо погашено на весь сайт, поэтому
   каждому интерактивному элементу фундамента кольцо возвращаем сами.
   У .ex-btn и .ex-tile свои правила выше, здесь — остальные.

   На .ex-project отрицательный offset: кольцо снаружи спорило бы
   со скруглением 16px и уезжало за край карточки.                        */
.ex-card--link:focus-visible,
.ex-contact:focus-visible,
.ex-product__title a:focus-visible,
.ex-logo:focus-visible {
    outline: 2px solid var(--ex-green-accent);
    outline-offset: 3px;
}

.ex-project:focus-visible {
    outline: 2px solid var(--ex-green-light);
    outline-offset: -4px;
}

/* Та же история с цветом: a:hover (0,1,1) перебивает .ex-card--link (0,1,0)
   и красит карточку-ссылку в #181f20 из style.css. */
.ex-card--link:hover,
.ex-card--link:focus { color: var(--ex-ink); }

.ex-stack   { display: flex; flex-direction: column; gap: var(--ex-space-4); }
.ex-stack-8 { display: flex; flex-direction: column; gap: var(--ex-space-8); }
.ex-row     { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ex-space-4); }

.ex-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--ex-space-6);
}

/* Модификаторы с ЯВНЫМ числом колонок.

   Через auto-fit тут не выходит: контейнер 1640px, и minmax(230px, 1fr)
   раскладывает .ex-grid--4 в шесть колонок вместо четырёх. auto-fit задаёт
   минимум, а не максимум, поэтому на широком экране он всегда переливается.
   Ставим брейкпоинты руками — предсказуемо и без сюрпризов на 4K.       */
.ex-grid--2,
.ex-grid--3,
.ex-grid--4 { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 560px) {
    .ex-grid--3,
    .ex-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
    .ex-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ex-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
    .ex-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ex-grid--tight { gap: var(--ex-space-4); }

.ex-divider { height: 1px; margin: 0; border: 0; background-color: var(--ex-hairline); }

/* --- Шапка и подвал под общую ширину ---------------------------------------
   Они сидят на бутстраповском .container (max-width 1320px на xxl), а секции
   нового дизайна — на .ex-container (1640px). На широком экране логотип и меню
   заметно уже контента, стыка не получается.

   Скоуп узкий, только прямые дети <header> и <footer>: .container используется
   по всему сайту, включая портал и каталог, глобально его трогать нельзя.
   Специфичность (0,2,0) перебивает и бутстрап, и style.css:56-67 с его
   padding-left/right: 0.                                                    */
.header > .container,
footer > .container {
    max-width: var(--ex-container-max);
    padding-right: var(--ex-container-x);
    padding-left: var(--ex-container-x);
}

/* Пропорции медиа-блоков. Вешаются на .ex-card__media / .ex-product__media. */
.ex-media--1x1  { aspect-ratio: 1 / 1; }
.ex-media--4x3  { aspect-ratio: 4 / 3; }
.ex-media--3x2  { aspect-ratio: 3 / 2; }
.ex-media--16x9 { aspect-ratio: 16 / 9; }

/* ============================================================================
   Инверсия на тёмном фоне

   Типографика фундамента жёстко задаёт цвет (.ex-h1 → --ex-ink), поэтому
   на тёмной подложке её надо переопределить. Класс контекстный: вешается
   на секцию, дальше работает на всё содержимое.
   ============================================================================ */

.ex-invert .ex-h1,
.ex-invert .ex-h2,
.ex-invert .ex-h3,
.ex-invert .ex-card__title { color: var(--ex-page); }

.ex-invert .ex-body,
.ex-invert .ex-lead        { color: rgba(245, 245, 245, 0.82); }
.ex-invert .ex-caption,
.ex-invert .ex-card__text  { color: rgba(245, 245, 245, 0.62); }
.ex-invert .ex-card        { background-color: rgba(255, 255, 255, 0.06); }
.ex-invert .ex-card--bordered { border-color: rgba(255, 255, 255, 0.12); }
.ex-invert .ex-card__stat  { color: var(--ex-green-light); }
.ex-invert .ex-chip        { background-color: transparent; border-color: rgba(255, 255, 255, 0.22); color: var(--ex-page); }
.ex-invert .ex-icon-box    { background-color: rgba(255, 255, 255, 0.10); }
.ex-invert .ex-contact__value { color: var(--ex-page); }
.ex-invert .ex-divider     { background-color: rgba(255, 255, 255, 0.14); }

/* ============================================================================
   Герой

   .ex-section красит фон и не умеет фоновой картинкой, поэтому герой —
   отдельный блок, а не модификация секции. Контент прижат к низу:
   так фото читается сверху, а текст ложится на самую тёмную часть градиента.
   ============================================================================ */

.ex-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(520px, 76vh, 840px);
    overflow: hidden;
    background-color: var(--ex-ink-forest);
}

.ex-hero__bg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Градиент, а не сплошная заливка: верх кадра остаётся читаемым. */
.ex-hero__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(5, 5, 5, 0.30) 0%,
        rgba(5, 5, 5, 0.55) 52%,
        rgba(5, 5, 5, 0.88) 100%);
}

.ex-hero__inner {
    position: relative;
    width: 100%;
    padding-block: clamp(56px, 7vw, 104px);
}

.ex-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    gap: var(--ex-space-10);
}

.ex-hero__content { display: flex; flex-direction: column; gap: var(--ex-space-6); max-width: 900px; }
.ex-hero__actions { display: flex; flex-wrap: wrap; gap: var(--ex-space-3); margin-top: var(--ex-space-2); }

/* Колонка коротких фактов справа — на узком экране уходит под текст. */
.ex-hero__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--ex-space-6);
}

.ex-hero__fact { display: flex; flex-direction: column; gap: var(--ex-space-1); }
.ex-hero__fact-value { font-size: 32px; line-height: 1.1; letter-spacing: -0.04em; font-weight: 600; color: var(--ex-green-light); }
.ex-hero__fact-label { font-size: 14px; line-height: 1.4; color: rgba(245, 245, 245, 0.72); }

@media (min-width: 1100px) {
    .ex-hero__grid  { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
    .ex-hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================================
   Шапка секции: надзаголовок + H2 слева, кнопка «смотреть все» справа
   ============================================================================ */

.ex-sect-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ex-space-6);
    margin-bottom: var(--ex-space-10);
}

.ex-sect-head__text { display: flex; flex-direction: column; gap: var(--ex-space-4); max-width: 820px; }

/* ============================================================================
   Плитка направления — карточка-ссылка целиком

   На лендинге карточка услуги при наведении заливается зелёным
   (hover:bg-button-primary, 300 мс) — повторяем этот приём.
   ============================================================================ */

.ex-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--ex-space-6);
    min-height: 264px;
    padding: var(--ex-space-6);
    box-sizing: border-box;
    border: 1px solid var(--ex-border-soft);
    border-radius: var(--ex-radius-xl);
    background-color: var(--ex-surface);
    color: var(--ex-ink);
    text-decoration: none;
    transition: background-color var(--ex-duration) var(--ex-ease),
                border-color var(--ex-duration) var(--ex-ease),
                color var(--ex-duration) var(--ex-ease);
}

.ex-tile:hover,
.ex-tile:focus-visible { background-color: var(--ex-green); border-color: var(--ex-green); color: #ffffff; }
.ex-tile:focus-visible { outline: 2px solid var(--ex-green-accent); outline-offset: 3px; }

.ex-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--ex-radius-md);
    background-color: var(--ex-nav);
    transition: background-color var(--ex-duration) var(--ex-ease);
}

/* object-fit обязателен: иконки в наборе с разными viewBox (map.svg — 14×18),
   жёсткий квадрат без него растягивает их по одной оси. */
.ex-tile__icon img { width: 24px; height: 24px; object-fit: contain; }
.ex-tile:hover .ex-tile__icon { background-color: rgba(255, 255, 255, 0.20); }

.ex-tile__body  { display: flex; flex-direction: column; gap: var(--ex-space-2); }
.ex-tile__title { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -0.025em; font-weight: 500; }

/* Пока плитки стоят в ряд, резервируем заголовку две строки: они разной длины
   («Дилерам» против «Квартирные и технические двери»), и без резерва описание
   длинной плитки съезжает вниз — тексты соседей перестают идти по одной линии.
   В столбик (мобильные) резерв не нужен, там он дал бы лишнюю пустоту. */
@media (min-width: 560px) {
    .ex-tile__title { min-height: calc(22px * 1.2 * 2); }
}
.ex-tile__text  { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ex-ink-muted); transition: color var(--ex-duration) var(--ex-ease); }
.ex-tile:hover .ex-tile__text { color: rgba(255, 255, 255, 0.86); }

/* ============================================================================
   Карточка товара с ценой

   Корзины на сайте нет (см. CLAUDE.md), поэтому низ карточки — цена
   и кнопка-заявка, а не «купить».
   ============================================================================ */

.ex-product {
    display: flex;
    flex-direction: column;
    gap: var(--ex-space-4);
    height: 100%;
    padding: var(--ex-space-4);
    box-sizing: border-box;
    border: 1px solid var(--ex-border-soft);
    border-radius: var(--ex-radius-xl);
    background-color: var(--ex-surface);
    transition: border-color var(--ex-duration) var(--ex-ease);
}

.ex-product:hover { border-color: var(--ex-border); }

.ex-product__media {
    overflow: hidden;
    border-radius: var(--ex-radius-lg);
    background-color: var(--ex-page);
}

/* contain, а не cover: фото замков — вырезанные объекты на светлом фоне,
   обрезать их по краю нельзя. */
.ex-product__media img { display: block; width: 100%; height: 100%; object-fit: contain; }

.ex-product__body  { display: flex; flex-direction: column; gap: var(--ex-space-2); flex: 1 1 auto; }
.ex-product__title { margin: 0; font-size: 16px; line-height: 1.35; font-weight: 500; color: var(--ex-ink); }
.ex-product__title a { color: inherit; text-decoration: none; }
.ex-product__title a:hover { text-decoration: underline; }

.ex-product__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ex-space-3);
    margin-top: auto;
}

.ex-product__price      { display: flex; flex-direction: column; gap: 2px; }
.ex-product__price-note { font-family: var(--ex-font-mono); font-size: 11px; line-height: 1.2; text-transform: uppercase; letter-spacing: -0.04em; color: var(--ex-muted); }
.ex-product__price-value{ font-size: 20px; line-height: 1.2; letter-spacing: -0.025em; font-weight: 600; color: var(--ex-ink); }
.ex-product__price-value--empty { font-size: 15px; font-weight: 400; color: var(--ex-muted); }

/* ============================================================================
   Лента партнёров

   Логотипов застройщиков в репозитории нет — плашка умеет и картинку,
   и просто название текстом. Когда логотипы появятся, разметка не меняется.
   ============================================================================ */

.ex-logos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--ex-space-4);
}

.ex-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 104px;
    padding: var(--ex-space-4);
    box-sizing: border-box;
    border: 1px solid var(--ex-border-soft);
    border-radius: var(--ex-radius-lg);
    background-color: var(--ex-surface);
}

/* Логотипы выравниваем по высоте, а не по ширине — иначе узкие
   вытягиваются, а широкие проваливаются. */
.ex-logo img {
    max-width: 100%;
    max-height: 48px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.62;
    transition: filter var(--ex-duration) var(--ex-ease), opacity var(--ex-duration) var(--ex-ease);
}

.ex-logo:hover img { filter: none; opacity: 1; }

.ex-logo__name {
    margin: 0;
    text-align: center;
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: -0.025em;
    font-weight: 500;
    color: var(--ex-ink-muted);
}

/* ============================================================================
   Карточка реализованного объекта — фото с подписью поверх
   ============================================================================ */

.ex-project {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--ex-radius-xl);
    background-color: var(--ex-nav);
    color: #ffffff;
    text-decoration: none;
}

.ex-project__media { aspect-ratio: 4 / 3; }

.ex-project__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--ex-duration-slow) var(--ex-ease);
}

.ex-project:hover .ex-project__media img { transform: scale(1.04); }

.ex-project__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 5, 5, 0) 42%, rgba(5, 5, 5, 0.82) 100%);
}

.ex-project__body {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ex-space-1);
    padding: var(--ex-space-6);
}

/* Цвет задан на самой подписи, а не наследуется от <a>: style.css:78-82
   объявляет a:hover, a:focus, a:active { color: #181f20 } со специфичностью
   (0,1,1), и она бьёт .ex-project (0,1,0). Без этого название ЖК при
   наведении чернело на чёрном градиенте. */
.ex-project__title { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -0.025em; font-weight: 500; color: #ffffff; }
.ex-project__meta  { margin: 0; font-family: var(--ex-font-mono); font-size: 12px; line-height: 1.3; text-transform: uppercase; letter-spacing: -0.04em; color: rgba(245, 245, 245, 0.76); }

/* ============================================================================
   Формы

   Спека из DESIGN.md §9: фон поля — цвет страницы, граница 1px,
   радиус 6px, на фокусе граница чернеет.
   ============================================================================ */

.ex-form {
    display: flex;
    flex-direction: column;
    gap: var(--ex-space-6);
    padding: var(--ex-space-6);
    box-sizing: border-box;
    border-radius: var(--ex-radius-lg);
    background-color: var(--ex-surface);
}

.ex-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--ex-space-6); }

.ex-field { display: flex; flex-direction: column; gap: var(--ex-space-2); }
.ex-label { font-family: var(--ex-font-sans); font-size: 16px; line-height: 1.4; font-weight: 500; color: var(--ex-ink); }
.ex-label__req { color: var(--ex-green); }

.ex-input,
.ex-textarea {
    width: 100%;
    padding: 12px;
    box-sizing: border-box;
    border: 1px solid #e5e7eb;
    border-radius: var(--ex-radius-sm);
    background-color: var(--ex-page);
    font-family: var(--ex-font-sans);
    font-size: 16px;
    line-height: 1.5;
    color: var(--ex-ink);
    transition: border-color var(--ex-duration) var(--ex-ease);
}

.ex-input::placeholder,
.ex-textarea::placeholder { color: var(--ex-muted); }

.ex-input:focus,
.ex-textarea:focus { outline: none; border-color: var(--ex-ink); }

.ex-textarea { min-height: 140px; resize: vertical; }

.ex-field.is-error .ex-input,
.ex-field.is-error .ex-textarea { border-color: #d92d20; }
.ex-field__error { font-size: 14px; line-height: 1.43; color: #d92d20; }
.ex-field__hint  { font-size: 14px; line-height: 1.43; color: var(--ex-muted); }

.ex-check { display: flex; align-items: flex-start; gap: var(--ex-space-3); }
.ex-check input { flex: 0 0 18px; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--ex-green); }
.ex-check__text { font-size: 14px; line-height: 1.43; color: var(--ex-muted); }

/* ============================================================================
   Контакты
   ============================================================================ */

.ex-contact-list { display: flex; flex-direction: column; gap: var(--ex-space-4); }

.ex-contact { display: flex; align-items: center; gap: var(--ex-space-3); color: inherit; text-decoration: none; }
.ex-contact__text  { display: flex; flex-direction: column; gap: 2px; }
.ex-contact__label { font-family: var(--ex-font-mono); font-size: 11px; line-height: 1.2; text-transform: uppercase; letter-spacing: -0.04em; color: var(--ex-muted); }
.ex-contact__value { font-size: 16px; line-height: 1.4; color: var(--ex-ink); }

/* Квадрат под иконку — 40×40, как в контактах лендинга (DESIGN.md §7.4). */
.ex-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: var(--ex-radius-sm);
    background-color: var(--ex-nav);
    transition: transform var(--ex-duration) var(--ex-ease);
}

.ex-icon-box img { width: 20px; height: 20px; object-fit: contain; }
.ex-contact:active .ex-icon-box { transform: scale(0.95); }

.ex-map { overflow: hidden; border-radius: var(--ex-radius-lg); background-color: var(--ex-nav); }
.ex-map iframe { display: block; width: 100%; height: 100%; border: 0; }

@media (prefers-reduced-motion: reduce) {
    .ex-btn__label,
    .ex-btn__icon,
    .ex-btn__icon svg,
    .ex-link::after,
    .ex-card--hoverable,
    .ex-tile,
    .ex-product,
    .ex-logo img,
    .ex-project__media img,
    .ex-icon-box {
        transition-duration: 1ms;
    }
    .ex-btn:hover .ex-btn__icon svg,
    .ex-btn:hover .ex-btn__icon svg:only-child { transform: none; }
    .ex-btn__icon svg + svg { transform: none; opacity: 0; }
    .ex-project:hover .ex-project__media img { transform: none; }
}

/* ============================================================================
   КАТЕГОРИЯ КАТАЛОГА: описание и пустое состояние

   Каталог пока в старом дизайне (редизайн — блок 4 плана), поэтому блоки
   самодостаточные: свои отступы, свои кнопки. На составную разметку
   .ex-btn с __label и __icon здесь не опираемся.

   Цвета ссылкам задаём явно: в style.css живёт правило
   a:hover, a:focus, a:active { color: #181f20 } со специфичностью (0,1,1),
   которое перебивает голый класс и чернит белый текст на кнопке.
   ============================================================================ */

.ex-category-intro {
    max-width: 72ch;
    margin: 0 0 8px;
    font-family: var(--ex-font-sans);
    color: var(--ex-ink-muted);
    font-size: var(--ex-body-size);
    line-height: var(--ex-body-lh);
    letter-spacing: 0;
}

.ex-category-intro p { margin: 0 0 12px; }
.ex-category-intro p:last-child { margin-bottom: 0; }

.ex-category-empty {
    max-width: 72ch;
    padding: 28px;
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-xl);
    background: var(--ex-surface);
    font-family: var(--ex-font-sans);
    color: var(--ex-ink-muted);
    letter-spacing: 0;
}

.ex-category-empty__title {
    margin: 0 0 8px;
    color: var(--ex-ink);
    font-size: 20px;
    line-height: 1.3;
    font-weight: 500;
    /* style.css поднимает h2 в капс; здесь заголовок — параграф,
       но текст-трансформ обнуляем на всякий случай. */
    text-transform: none;
}

.ex-category-empty p { margin: 0; }

.ex-category-empty__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.ex-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: var(--ex-radius-pill);
    font-family: var(--ex-font-sans);
    font-size: 16px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 0;
    text-decoration: none;
    transition: background-color var(--ex-duration) var(--ex-ease),
                color var(--ex-duration) var(--ex-ease);
}

.ex-cta--solid,
.ex-cta--solid:hover,
.ex-cta--solid:focus,
.ex-cta--solid:active {
    background: var(--ex-green);
    color: #ffffff;
}

.ex-cta--solid:hover { background: var(--ex-green-accent); }

.ex-cta--ghost,
.ex-cta--ghost:hover,
.ex-cta--ghost:focus,
.ex-cta--ghost:active {
    border: 1px solid var(--ex-green);
    color: var(--ex-green);
    background: transparent;
}

.ex-cta--ghost:hover { background: rgba(0, 152, 121, 0.08); }

/* Фокус с клавиатуры: reset.css гасит outline у всего подряд, возвращаем. */
.ex-cta:focus-visible {
    outline: 2px solid var(--ex-green-accent);
    outline-offset: 2px;
}

/* Пара кнопок в шапке секции — когда категорий две и обе равнозначные. */
.ex-sect-head__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

/* ============================================================================
   СТРАНИЦА КАТАЛОГА

   Две колонки: фильтры слева, товары справа. Ширина левой колонки — 280px,
   как на лендинге у боковых панелей; на планшете и уже колонки схлопываются
   в одну, а фильтры уезжают в мобильную шторку (её показывает старый
   catalog.js по классам .filters_butn / .sort_mobile — их не трогаем).
   ============================================================================ */

.ex-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--ex-space-5, 24px);
    font-family: var(--ex-font-sans);
    font-size: var(--ex-caption-size);
    line-height: var(--ex-caption-lh);
    letter-spacing: 0;
    color: var(--ex-muted);
}

.ex-crumbs a,
.ex-crumbs a:hover,
.ex-crumbs a:focus {
    color: var(--ex-muted);
    text-decoration: none;
}

.ex-crumbs a:hover { color: var(--ex-green); }
.ex-crumbs [aria-current] { color: var(--ex-ink); }

.ex-catalog-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ex-space-5, 24px);
    margin-bottom: var(--ex-space-6, 32px);
}

.ex-catalog-head__text { flex: 1 1 420px; min-width: 0; }

.ex-catalog-head__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

/* style.css поднимает все h1/h2 в капс: заголовок каталога держим как есть. */
.ex-page .ex-h1 { text-transform: none; }

.ex-catalog {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: var(--ex-space-6, 32px);
    align-items: start;
}

.ex-catalog__main { min-width: 0; }

@media (max-width: 1024px) {
    .ex-catalog { grid-template-columns: minmax(0, 1fr); }
}

/* --- Скин для бутстраповского аккордеона фильтров ------------------------- */

.ex-filters .accordion-item {
    border: 0;
    border-bottom: 1px solid var(--ex-border-soft);
    background: transparent;
}

.ex-filters .accordion-button {
    padding: 14px 0;
    background: transparent;
    box-shadow: none;
    font-family: var(--ex-font-sans);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ex-ink);
    text-transform: none;
}

.ex-filters .accordion-body { padding: 0 0 16px; }

.ex-filters .form-check-label {
    font-family: var(--ex-font-sans);
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--ex-ink-muted);
}

.ex-filter-cat {
    display: block;
    padding: 6px 0;
    font-family: var(--ex-font-sans);
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--ex-ink-muted);
    text-decoration: none;
}

.ex-filter-cat:hover,
.ex-filter-cat:focus { color: var(--ex-green); }
.ex-filter-cat.is-current { color: var(--ex-green); font-weight: 500; }

/* --- Мелочи карточки и пагинация ----------------------------------------- */

.ex-product__meta {
    margin: 0;
    font-family: var(--ex-font-sans);
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--ex-muted);
}

.ex-pagination {
    margin-top: var(--ex-space-6, 32px);
    font-family: var(--ex-font-sans);
}

.ex-pagination .pagination { gap: 4px; }

/* В каталоге заголовок карточки — h2 (он же второй уровень на странице),
   а в style.css:87 висит h2 { text-transform: uppercase }. Гасим здесь,
   а не в разметке: тег выбран по смыслу, а не по внешнему виду. */
.ex-product__title,
.ex-category-empty__title,
.ex-h2 { text-transform: none; }

/* ============================================================================
   КАРТОЧКА ТОВАРА

   Слева галерея (fancybox, старая разметка), справа колонка решения:
   цена, установка, две кнопки и опт. Ниже — описание и характеристики
   в две колонки на широком экране.
   ============================================================================ */

.ex-product-page {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
}

@media (max-width: 900px) {
    .ex-product-page { grid-template-columns: minmax(0, 1fr); }
}

.ex-product-page__title { margin: 0 0 4px; text-transform: none; }

.ex-product-page__cat {
    margin: 0 0 20px;
    font-family: var(--ex-font-sans);
    font-size: 14px;
    letter-spacing: 0;
    color: var(--ex-muted);
}

.ex-price {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 24px;
    border-radius: var(--ex-radius-lg);
    background: var(--ex-surface-alt);
    border: 1px solid var(--ex-border-soft);
}

.ex-price__value {
    font-family: var(--ex-font-sans);
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-weight: 600;
    color: var(--ex-ink);
}

.ex-price__value--empty { font-size: 22px; font-weight: 500; color: var(--ex-ink-muted); }

.ex-price__note {
    font-family: var(--ex-font-sans);
    font-size: 14px;
    letter-spacing: 0;
    color: var(--ex-muted);
}

.ex-product-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

/* Оптовый блок — карточка-ссылка, а не третья кнопка в ряд:
   у него другой адресат и другой разговор. */
.ex-bulk {
    display: block;
    margin-top: 20px;
    padding: 16px 20px;
    border: 1px dashed var(--ex-green);
    border-radius: var(--ex-radius-lg);
    text-decoration: none;
    transition: background-color var(--ex-duration) var(--ex-ease);
}

.ex-bulk:hover { background: rgba(0, 152, 121, 0.06); }

.ex-bulk__title,
.ex-bulk__text { display: block; font-family: var(--ex-font-sans); letter-spacing: 0; }

.ex-bulk__title { font-size: 16px; font-weight: 500; color: var(--ex-green); }
.ex-bulk__text  { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--ex-ink-muted); }

.ex-product-page__variants { margin-top: 24px; }

.ex-product-page__points {
    display: inline-block;
    margin-top: 20px;
    font-family: var(--ex-font-sans);
    font-size: 14px;
    letter-spacing: 0;
    color: var(--ex-ink-muted);
}

.ex-product-page__points:hover,
.ex-product-page__points:focus { color: var(--ex-green); }

.ex-product-page__desc,
.ex-product-page__specs { margin-top: clamp(32px, 5vw, 64px); }

.ex-prose {
    max-width: 80ch;
    font-family: var(--ex-font-sans);
    font-size: var(--ex-body-size);
    line-height: var(--ex-body-lh);
    letter-spacing: 0;
    color: var(--ex-ink-muted);
}

.ex-prose p { margin: 0 0 12px; }
.ex-prose p:last-child { margin-bottom: 0; }

.ex-specs {
    margin: 16px 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 0 clamp(24px, 4vw, 56px);
}

.ex-specs__row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ex-border-soft);
    font-family: var(--ex-font-sans);
    font-size: 15px;
    line-height: 1.45;
    letter-spacing: 0;
}

.ex-specs__row dt {
    flex: 0 0 auto;
    max-width: 55%;
    color: var(--ex-muted);
    font-weight: 400;
}

.ex-specs__row dd {
    margin: 0 0 0 auto;
    text-align: right;
    color: var(--ex-ink);
}

/* ============================================================================
   ШАПКА ВНУТРЕННЕЙ СТРАНИЦЫ
   ============================================================================ */

.ex-lead {
    font-family: var(--ex-font-sans);
    font-size: var(--ex-lead-size);
    line-height: var(--ex-lead-lh);
    letter-spacing: var(--ex-lead-ls);
    color: var(--ex-ink-muted);
}

.ex-page-head__lead { max-width: 68ch; margin: 12px 0 0; }

/* h1 в style.css тоже уходит в капс — гасим на новых страницах. */
.ex-page .ex-h1,
.ex-page h1.ex-h1 { text-transform: none; }

/* Фигура с подписью — на странице «О компании». */
.ex-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ex-figure img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--ex-radius-lg);
}

.ex-figure figcaption {
    font-family: var(--ex-font-sans);
    font-size: 14px;
    line-height: 1.45;
    letter-spacing: 0;
    color: var(--ex-ink-muted);
}

/* ============================================================================
   КАРУСЕЛЬ (квартирные двери на главной)

   Прокрутка нативная, на scroll-snap: свайп пальцем и инерция достаются
   бесплатно и работают одинаково на всех тачскринах. Скрипт добавляет
   только стрелки — public/js/entryx-carousel.js.
   ============================================================================ */

.ex-carousel {
    position: relative;
    margin-bottom: var(--ex-space-8, 48px);
}

.ex-carousel__track {
    display: flex;
    gap: var(--ex-space-4, 16px);
    overflow-x: auto;
    /* overflow-y обязателен. При overflow-x: auto браузер сам поднимает
       overflow-y до auto, трек становится вертикально прокручиваемым и
       съедает колесо мыши: страница не листается, пока курсор над каруселью. */
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-left: 0;
    /* Полосу прокрутки прячем: листают стрелками и пальцем, а на десктопе
       она резала бы нижний край карточек. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
}

.ex-carousel__track::-webkit-scrollbar { display: none; }

.ex-carousel__item {
    flex: 0 0 auto;
    width: clamp(220px, 24vw, 300px);
    scroll-snap-align: start;
}

/* Стрелки. На узких экранах их не показываем совсем — там листают пальцем,
   а кнопки поверх карточек только мешают. */
.ex-carousel__nav {
    position: absolute;
    top: 40%;
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-pill);
    background: var(--ex-surface);
    color: var(--ex-ink);
    box-shadow: var(--ex-shadow-md);
    cursor: pointer;
    transition: opacity var(--ex-duration) var(--ex-ease),
                background-color var(--ex-duration) var(--ex-ease);
}

.ex-carousel__nav svg { width: 20px; height: 20px; }
.ex-carousel__nav:hover { background: var(--ex-page); }
.ex-carousel__nav:disabled { opacity: 0.35; cursor: default; }
.ex-carousel__nav--prev { left: -22px; }
.ex-carousel__nav--next { right: -22px; }

.ex-carousel__nav:focus-visible {
    outline: 2px solid var(--ex-green-accent);
    outline-offset: 2px;
}

@media (min-width: 1024px) {
    .ex-carousel.is-scrollable .ex-carousel__nav { display: flex; }
}

/* --- Карточка двери ------------------------------------------------------- */

.ex-door {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
}

.ex-door__media {
    display: block;
    overflow: hidden;
    border-radius: var(--ex-radius-lg);
    background: var(--ex-surface);
    aspect-ratio: 3 / 4;
}

.ex-door__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--ex-duration-slow) var(--ex-ease-out);
}

.ex-door:hover .ex-door__media img { transform: scale(1.04); }

.ex-door__body { display: flex; flex-direction: column; gap: 2px; }

.ex-door__title,
.ex-door__price { font-family: var(--ex-font-sans); letter-spacing: 0; }

.ex-door__title {
    font-size: 15px;
    line-height: 1.35;
    font-weight: 500;
    color: var(--ex-ink);
    text-transform: none;
}

.ex-door__price { font-size: 14px; color: var(--ex-muted); }

.ex-door:hover .ex-door__title,
.ex-door:focus-visible .ex-door__title { color: var(--ex-green); }

.ex-door:focus-visible {
    outline: 2px solid var(--ex-green-accent);
    outline-offset: 4px;
    border-radius: var(--ex-radius-lg);
}

.ex-doors-brands { margin-top: var(--ex-space-6, 32px); }

/* --- Карточка товара целиком кликабельна ---------------------------------- */

/* Растянутая ссылка: заголовок накрывает своим ::after всю карточку, поэтому
   клик в любое место открывает товар. Вкладывать <a> в <a> нельзя, а кнопка
   «Заявка» должна остаться отдельной ссылкой — поднимаем её над накладкой. */
.ex-product { position: relative; }

.ex-product__title a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.ex-product__foot .ex-btn,
.ex-product__foot .ex-cta {
    position: relative;
    z-index: 2;
}

/* Наведение на любую часть карточки подсвечивает заголовок — иначе неочевидно,
   что кликается вся карточка, а не только надпись. */
.ex-product:hover .ex-product__title a { color: var(--ex-green); }

/* ============================================================================
   ВИДЕО В ГЕРОЕ

   Лежит поверх картинки, ровно теми же размерами. Картинка остаётся под ним
   и работает подложкой: пока ролик качается или если он не запустился —
   герой всё равно выглядит правильно.
   ============================================================================ */

.ex-hero__video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Чтобы на мобильном ролик не перекрывался системными контролами
       и не ловил тапы — он декоративный. */
    pointer-events: none;
}

/* «Меньше движения» — прячем видео и оставляем кадр.
   Скрываем через display, а не opacity: так браузер не грузит 23 МБ впустую. */
@media (prefers-reduced-motion: reduce) {
    .ex-hero__video { display: none; }
}

/* ============================================================================
   ШАПКА И ПОДВАЛ — ПРИВОДИМ К ДИЗАЙН-СИСТЕМЕ

   Разметку не трогаем: шапка и подвал общие для всего сайта, включая портал
   дилеров, и переписывать их — отдельная задача с отдельными рисками.
   Здесь только внешний слой: шрифт, цвета, кнопки.

   Селекторы намеренно с `header`/`footer` впереди: правила старого style.css
   идут по классам вроде `.butn` и без этого перебивают наши.
   ============================================================================ */

header,
header input,
header button,
footer,
footer input,
footer button {
    font-family: var(--ex-font-sans);
    letter-spacing: 0;
}

/* --- Меню ----------------------------------------------------------------- */

/* Цвет пунктов меню задан в header.css правилом
   `.navbar-light .navbar-nav .nav-link` — это три класса. Селектор из двух
   классов и тега его не перебивает, сколько бы ниже по файлу он ни стоял,
   поэтому здесь тот же путь плюс тег header. */
header .navbar-light .navbar-nav .nav-link,
header .navbar-nav .nav-item .nav-link {
    font-family: var(--ex-font-sans);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--ex-ink-muted);
    transition: color var(--ex-duration) var(--ex-ease);
}

header .nav-link:hover,
header .nav-link:focus,
header .nav-item.active .nav-link {
    color: var(--ex-green);
}

/* Выпадающий список категорий */
header .nav-item--open { border-radius: var(--ex-radius-md); }
header .nav-item--open .nav-link { font-size: 14px; }

/* --- Телефон и почта ------------------------------------------------------ */

header .header__contact .tel {
    font-size: 17px;
    font-weight: 500;
    color: var(--ex-ink);
}

header .header__contact .email {
    font-size: 14px;
    color: var(--ex-muted);
}

header .header__contact .tel:hover,
header .header__contact .email:hover { color: var(--ex-green); }

/* --- Кнопки шапки --------------------------------------------------------- */

/* Обе кнопки были лаймовым градиентом из старой темы — он не из нашей палитры
   и рядом с зелёным #009879 выглядит как чужой элемент. */
header .butn,
header .butn_header,
header a.butn:hover {
    /* Шрифт задаём здесь же: правило .butn из style.css с "Cera Pro" — это
       класс, и селектор по тегу (header button) его не перебивает. */
    font-family: var(--ex-font-sans);
    letter-spacing: 0;
    padding: 12px 20px;
    border-radius: var(--ex-radius-pill);
    background: var(--ex-green);
    background-image: none;
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    border: 1px solid var(--ex-green);
    transition: background-color var(--ex-duration) var(--ex-ease),
                color var(--ex-duration) var(--ex-ease);
}

header .butn:hover,
header .butn_header:hover {
    background: var(--ex-green-accent);
    background-image: none;
    border-color: var(--ex-green-accent);
    color: #ffffff;
}

/* «Стать партнером» — вторичное действие, поэтому контурная. */
header .butn.butn_reg,
header .butn.butn_reg:hover {
    background: transparent;
    background-image: none;
    color: var(--ex-green);
    border: 1px solid var(--ex-green);
}

header .butn.butn_reg:hover { background: rgba(0, 152, 121, 0.08); }

header .butn:focus-visible,
header .butn_header:focus-visible {
    outline: 2px solid var(--ex-green-accent);
    outline-offset: 2px;
}

/* Бургер был лаймовый — перерисовываем тем же зелёным, что и всё остальное.
   Иконка инлайновая: отдельный файл ради смены цвета заводить незачем. */
header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='%23009879'%3E%3Crect x='1' y='7' width='30' height='2.45' rx='1.225'/%3E%3Crect x='7' y='15' width='24' height='2.45' rx='1.225'/%3E%3Crect x='18' y='23' width='13' height='2.45' rx='1.225'/%3E%3C/g%3E%3C/svg%3E");
}

/* --- Подвал --------------------------------------------------------------- */

footer h3,
footer h4 { font-family: var(--ex-font-sans); text-transform: none; }

footer h4 {
    font-size: 15px;
    font-weight: 500;
    color: var(--ex-ink);
}

/* Лаймовый градиент на телефоне и WhatsApp меняем на обычный тёмный текст:
   градиент был из старой темы и в новой палитре ни с чем не рифмуется. */
footer .text-grad {
    background-image: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: var(--ex-ink);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

footer .tel:hover .text-grad { color: var(--ex-green); }

footer .nav__item a,
footer .container_documents a,
footer .email {
    font-family: var(--ex-font-sans);
    letter-spacing: 0;
    font-size: 14px;
    color: var(--ex-ink-muted);
    transition: color var(--ex-duration) var(--ex-ease);
}

footer .nav__item a:hover,
footer .container_documents a:hover,
footer .email:hover { color: var(--ex-green); }

footer .address--foot p {
    font-size: 14px;
    color: var(--ex-muted);
    margin: 0 0 2px;
}

footer .copyright p {
    font-size: 13px;
    color: var(--ex-muted);
}

header a:focus-visible,
footer a:focus-visible {
    outline: 2px solid var(--ex-green-accent);
    outline-offset: 2px;
}

/* Инлайновые иконки направлений: красятся текстом карточки, поэтому на
   зелёном ховере становятся белыми вместе с заголовком. */
.ex-icon {
    width: 24px;
    height: 24px;
    display: block;
    color: var(--ex-green);
    transition: color var(--ex-duration) var(--ex-ease);
}

.ex-tile:hover .ex-icon,
.ex-tile:focus-visible .ex-icon { color: #ffffff; }

/* ============================================================================
   КНОПКИ ПУБЛИЧНОЙ ЧАСТИ

   Старая тема красит .butn лаймовым градиентом (#679f1a → #b8e510) и набирает
   Cera Pro. Приводим к дизайн-системе: зелёный #009879, Geist, пилюля.

   Scope .ex-site — этот класс стоит только на body публичного макета.
   У дилерского портала свой макет, и трогать его нам нельзя.
   ============================================================================ */

.ex-site .butn,
.ex-site a.butn,
.ex-site button.butn,
.ex-site .butn--foot,
.ex-site .butn__open,
.ex-site .butn-white {
    font-family: var(--ex-font-sans);
    letter-spacing: 0;
    font-size: 15px;
    font-weight: 500;
    padding: 14px 24px;
    border-radius: var(--ex-radius-pill);
    border: 1px solid var(--ex-green);
    background: var(--ex-green);
    background-image: none;
    color: #ffffff;
    text-transform: none;
    transition: background-color var(--ex-duration) var(--ex-ease),
                border-color var(--ex-duration) var(--ex-ease),
                color var(--ex-duration) var(--ex-ease);
}

.ex-site .butn:hover,
.ex-site a.butn:hover,
.ex-site button.butn:hover,
.ex-site .butn--foot:hover,
.ex-site .butn__open:hover {
    background: var(--ex-green-accent);
    background-image: none;
    border-color: var(--ex-green-accent);
    color: #ffffff;
}

/* Белая кнопка «Войти» в блоке для дилеров — вторичное действие. */
.ex-site .butn-white,
.ex-site .butn-white:hover {
    background: #ffffff;
    background-image: none;
    color: var(--ex-green);
}

.ex-site .butn-white:hover { background: rgba(0, 152, 121, 0.08); }

/* Сброс фильтров — текстовая ссылка, не кнопка. */
.ex-site .butn-reset,
.ex-site .butn-reset:hover {
    font-family: var(--ex-font-sans);
    font-size: 14px;
    letter-spacing: 0;
    color: var(--ex-muted);
    background: none;
}

.ex-site .butn-reset:hover { color: var(--ex-green); }

.ex-site .butn:focus-visible,
.ex-site .butn-white:focus-visible {
    outline: 2px solid var(--ex-green-accent);
    outline-offset: 2px;
}

/* Поля форм — тем же шрифтом, что и всё остальное. */
.ex-site .input input,
.ex-site .input label,
.ex-site input::placeholder {
    font-family: var(--ex-font-sans);
    letter-spacing: 0;
}

/* Кнопка «Стать партнером».

   В header.css её рамка нарисована не бордером, а парой псевдоэлементов:
   ::before заливает лаймовым градиентом, ::after кладёт белый прямоугольник
   на 2px внутрь. Обычные правила такую рамку не перебивают — гасим оба слоя
   и рисуем нормальную контурную кнопку. */
.ex-site header .butn.butn_reg::before,
.ex-site header .butn.butn_reg::after { display: none; }

.ex-site header .butn.butn_reg,
.ex-site header .butn.butn_reg:hover {
    background: transparent;
    background-image: none;
    color: var(--ex-green);
    border: 1px solid var(--ex-green);
}

.ex-site header .butn.butn_reg:hover { background: rgba(0, 152, 121, 0.08); }

/* Лаймовый градиент в тексте (.text-grad) остался в блоках старой вёрстки —
   «Личный кабинет», заголовки секций. Меняем на фирменный зелёный. */
.ex-site .text-grad {
    background-image: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: var(--ex-green);
}

/* В подвале телефон крупный и тёмный — там зелёный ни к чему. */
.ex-site footer .text-grad { color: var(--ex-ink); }

/* ============================================================================
   БЕГУЩИЕ ЛОГОТИПЫ ПАРТНЁРОВ

   Две ленты навстречу друг другу, как в блоке «Сотрудничество» на
   mcpg.kz/mcpg-trade. Там это GSAP, здесь чистый CSS — поведение то же,
   а библиотеку ради одного блока тянуть не пришлось.

   Как держится бесшовность: внутри дорожки две одинаковые группы логотипов,
   и анимация сдвигает дорожку ровно на 50% её ширины, то есть на длину одной
   группы. В конце цикла кадр совпадает с началом, стыка не видно.
   ============================================================================ */

.ex-marquee {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: var(--ex-space-6, 32px);
}

.ex-marquee__row {
    overflow: hidden;
    /* Края растворяются в фоне: лента не обрывается, а уходит за экран. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ex-marquee__track {
    display: flex;
    width: max-content;
    will-change: transform;
}

.ex-marquee__group {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-right: 16px;
}

.ex-marquee__track--left  { animation: ex-marquee-left  48s linear infinite; }
.ex-marquee__track--right { animation: ex-marquee-right 48s linear infinite; }

/* Наведение притормаживает ленту, чтобы можно было рассмотреть логотип —
   так же ведёт себя оригинал на лендинге. */
.ex-marquee__row:hover .ex-marquee__track { animation-duration: 160s; }

@keyframes ex-marquee-left {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes ex-marquee-right {
    from { transform: translate3d(-50%, 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

.ex-marquee__item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 224px;
    height: 128px;
    padding: 16px 24px;
    border-radius: var(--ex-radius-lg);
    background: var(--ex-surface);
    border: 1px solid var(--ex-border-soft);
}

.ex-marquee__item img {
    width: auto;
    max-width: 100%;
    object-fit: contain;
    /* Логотипы разноцветные и на белой плитке пестрят. Приглушаем, а на
       наведении показываем в родном цвете. */
    filter: grayscale(1);
    opacity: 0.75;
    transition: filter var(--ex-duration) var(--ex-ease),
                opacity var(--ex-duration) var(--ex-ease);
}

.ex-marquee__item:hover img {
    filter: grayscale(0);
    opacity: 1;
}

@media (max-width: 640px) {
    .ex-marquee__item { width: 168px; height: 96px; padding: 12px 18px; }
    .ex-marquee__item img { max-height: 44px; }
}

/* «Меньше движения» — ленты замирают. Логотипы при этом видны, просто
   не едут; горизонтальную прокрутку оставляем пальцем. */
@media (prefers-reduced-motion: reduce) {
    .ex-marquee__track { animation: none; }
    .ex-marquee__row { overflow-x: auto; }
}