/* ============================================================
   main.css — дизайн-система и базовая раскладка
   ============================================================ */

/* ---------- Шрифты (Manrope — open-source аналог Circe из umfc-no.ru) ---------- */
/* TODO: подложить .woff2 в /assets/fonts/ — Google Fonts → Manrope → 400/700/800
   До этого fallback на system-ui (SF Pro на macOS/iOS) — выглядит близко по геометрии. */
/*
@font-face {
    font-family: 'Manrope';
    src: url('/assets/fonts/manrope-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Manrope';
    src: url('/assets/fonts/manrope-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Manrope';
    src: url('/assets/fonts/manrope-extrabold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
*/

/* ============================================================
   1. ТОКЕНЫ (CSS-переменные)
   ============================================================ */
:root {
    /* ============================================================
       Палитра — точный бренд-гайд «Мои документы»
       (из присланной картинки + umfc-no.ru)
       ============================================================ */

    /* --- Фоны — тёплый кремовый без розового оттенка
           (повторяет долг-мфц.рф/1/) --- */
    /* --- RGB-составляющие для rgba() — нужны там, где требуется прозрачность тени/border --- */
    --brand-rgb:    86, 35, 18;
    --accent-rgb:   237, 83, 57;
    --text-rgb:     11, 31, 51;

    --color-bg:           #f4ede2;     /* кремовый бежевый, без розового */
    --color-bg-soft:      #ffffff;     /* секции — белые (контраст с фоном страницы) */
    --color-bg-warm:      #faf6ee;     /* промежуточный тон */
    --color-card:         #ffffff;
    --color-card-soft:    #ece5d7;     /* опции квиза — серо-бежевый */

    /* --- Текст (тёмно-СИНИЙ, не чёрный — важно для «солидного» вида) --- */
    --color-text:         #0b1f33;     /* primary, тёмно-синий */
    --color-text-muted:   #526172;     /* secondary, синевато-серый */
    --color-text-soft:    #818c99;     /* hints, плейсхолдеры */
    --color-text-light:   #b2c0d1;     /* placeholder light */
    --color-text-neutral: #888888;     /* нейтральный серый */
    --color-text-inverse: #ffffff;

    /* --- Бренд: коричневые --- */
    --color-brand:        #562312;     /* основной коричневый (для H1/H2) */
    --color-brand-deep:   #553023;     /* alternative deep */
    --color-brand-soft:   #8e6454;     /* средний коричневый, bubble */
    --color-brand-caramel:#c49368;     /* карамель, поддержка */

    /* --- CTA / Accent --- */
    --color-accent:       #ed5339;     /* основной красно-оранжевый — для кнопок/фонов */
    --color-accent-dark:  #da381d;     /* hover */
    --color-accent-text:  #c43017;     /* a11y-вариант для текстовых ссылок (контраст ≥4.6:1 на белом) */
    --color-accent-soft:  #fcebda;     /* фон под иконки */
    --color-accent-light: #ff6a4a;     /* светлый акцент (в градиентах) */
    --color-warm-soft:    #ffe2d3;     /* тёплый бежевый под warn-icon */

    /* --- Info (синий) --- */
    --color-info:         #0581de;
    --color-info-dark:    #056dbb;

    /* --- Состояния --- */
    --color-success:      #0e9a13;
    --color-danger:       #f74129;
    --color-warning:      #ff7a00;

    /* --- Бордеры --- */
    --color-border:       rgba(var(--text-rgb), 0.08);
    --color-border-strong:rgba(var(--text-rgb), 0.16);

    /* --- Радиусы (перешкалировано под фактическое использование карточек 16-24px) --- */
    --radius-xs:   6px;       /* chips, мелкие badges */
    --radius-sm:   10px;      /* inputs, secondary badges */
    --radius-md:   14px;      /* кнопки, small карточки */
    --radius-lg:   20px;      /* основные карточки */
    --radius-xl:   24px;      /* hero card, модалка, большие секции */
    --radius-full: 999px;

    /* --- Тени (мультислойные с brand-tint — даёт мягкий «бренд» эффект,
            как на референсе с книгой МФЦ) --- */
    --shadow-sm: 0 1px 3px rgba(var(--brand-rgb), 0.06);
    --shadow-md: 0 8px 24px rgba(var(--brand-rgb), 0.08), 0 2px 6px rgba(var(--brand-rgb), 0.04);
    --shadow-lg: 0 20px 50px rgba(var(--brand-rgb), 0.12), 0 8px 16px rgba(var(--brand-rgb), 0.06);
    --shadow-cta: 0 8px 20px rgba(var(--accent-rgb), 0.28), 0 2px 6px rgba(var(--accent-rgb), 0.18);

    /* Шкала отступов (base = 4px) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* Контейнер */
    --container-max:   1200px;
    --container-pad:   16px;

    /* Типографика */
    --font-base: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;

    --fs-h1:   clamp(32px, 5vw, 56px);   /* плакатно, как у umfc (54px на десктопе) */
    --fs-h2:   clamp(28px, 4vw, 44px);
    --fs-h3:   clamp(20px, 2.5vw, 24px);
    --fs-body: 16px;
    --fs-sm:   14px;
    --fs-xs:   12px;

    --lh-tight:  1.2;
    --lh-normal: 1.5;
    --lh-loose:  1.7;

    /* Скорости */
    --t-fast: 150ms;
    --t-base: 250ms;
    --t-slow: 400ms;
}

/* ============================================================
   2. БАЗА
   ============================================================ */

/* Универсальные defaults — резиновые картинки, box-sizing, без горизонтального скролла */
*,
*::before,
*::after {
    box-sizing: border-box;
}
html, body {
    overflow-x: hidden;             /* защита от любого случайного горизонтального скролла */
    width: 100%;
    max-width: 100%;
}
/* Резиновые медиа — НО только если CSS не задал явную высоту.
   Иначе лого/иконки с атрибутами width/height ломаются. */
img:not([class]),
video, picture {
    max-width: 100%;
    height: auto;
}
svg { max-width: 100%; }

body {
    margin: 0;
    font-family: var(--font-base);
    font-size: var(--fs-body);
    line-height: var(--lh-normal);
    color: var(--color-text);
    background-color: var(--color-bg);
}

/* Длинные слова не должны вылазить за viewport на малых экранах */
h1, h2, h3, h4, p {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

h1, h2, h3 {
    line-height: var(--lh-tight);
    font-weight: 800;            /* плакатно, как у umfc */
    color: var(--color-brand);   /* фирменный тёмно-коричневый */
    letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { line-height: var(--lh-normal); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

::selection {
    background: var(--color-accent);
    color: #fff;
}

/* ============================================================
   3. КОНТЕЙНЕР И СЕКЦИЯ
   ============================================================ */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}

.section {
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
}
.section--soft   { background-color: var(--color-bg-soft); }
.section--accent { background-color: var(--color-accent-soft); }
.section--dark   { background-color: var(--color-text); color: var(--color-text-inverse); }

@media (min-width: 768px) {
    :root { --container-pad: 24px; }
    .section { padding-top: var(--space-8); padding-bottom: var(--space-8); }
}

@media (min-width: 1024px) {
    .section { padding-top: var(--space-9); padding-bottom: var(--space-9); }
}

.section-title {
    text-align: center;
    margin-bottom: var(--space-6);
}
.section-title h2 {
    color: var(--color-brand);              /* brand-цвет (заменил inline style="color: var(--color-brand)") */
}
.section-title h2 em {
    color: var(--color-accent);
    font-style: normal;
}
/* Единый brand-divider под каждым h2 секции — короткая оранжевая линия */
.section-title h2::after {
    content: "";
    display: block;
    width: 52px;
    height: 3px;
    background: var(--color-accent);
    border-radius: 2px;
    margin: 14px auto 0;
}
.section-title__sub {
    color: var(--color-text-muted);
    font-size: var(--fs-body);
    margin-top: 18px;
}

/* ============================================================
   ДЕКОР: blob-фигуры (тёплые персиковые пятна на фоне)
   ============================================================ */
.blob {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
    filter: blur(2px);
}
.blob--coral { background: radial-gradient(closest-side, #f7c1a8 0%, rgba(247,193,168,0) 70%); }
.blob--peach { background: radial-gradient(closest-side, #fcd9b8 0%, rgba(252,217,184,0) 70%); }
.blob--red   { background: radial-gradient(closest-side, #f4a78d 0%, rgba(244,167,141,0) 70%); }

/* Hero — без декоративного blob (Тимур убрал розовый фон) */
.hero { position: relative; overflow: hidden; }
.hero > .container { position: relative; z-index: 1; }

/* ============================================================
   ДЕКОР: большая outlined-цифра за блоком (как 01, 02 в боте)
   ============================================================ */
.section-number {
    font-size: clamp(96px, 14vw, 180px);
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 2px var(--color-accent);
    text-stroke: 2px var(--color-accent);
    line-height: 0.9;
    letter-spacing: -0.04em;
    user-select: none;
    pointer-events: none;
}

/* ============================================================
   ДЕКОР: текстовый блок с red left border (как Вызов/Задача в боте)
   ============================================================ */
.text-block {
    border-left: 4px solid var(--color-accent);
    padding-left: var(--space-4);
}
.text-block > h3 {
    color: var(--color-brand);
    margin-bottom: var(--space-2);
}

/* ============================================================
   4. КНОПКИ
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 14px 22px;
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none;             /* для <a class="btn"> — без подчёркивания */
    cursor: pointer;
    border-radius: var(--radius-md);
    transition:
        background-color var(--t-fast) ease,
        transform var(--t-fast) ease,
        box-shadow var(--t-fast) ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
    background-color: var(--color-accent);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-cta);
}
.btn--primary:hover { background-color: var(--color-accent-dark); }

.btn--secondary {
    background-color: var(--color-card);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}
.btn--secondary:hover {
    background-color: var(--color-card-soft);
    border-color: var(--color-border-strong);
}

.btn--ghost {
    background-color: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
}
.btn--ghost:hover { background-color: var(--color-card); }

.btn--lg { padding: 18px 28px; font-size: 17px; }
.btn--block { display: flex; width: 100%; }

/* ============================================================
   5. HEADER
   ============================================================ */
.site-header {
    background-color: rgba(255, 255, 255, 0.92);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: saturate(180%) blur(8px);
    transition: background-color var(--t-base) ease, box-shadow var(--t-base) ease, border-color var(--t-base) ease;
}
/* После скролла Hero — хедер плотнее + тень, CTA визуально проявляется */
.site-header--scrolled {
    background-color: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 24px rgba(var(--brand-rgb), 0.10);
    border-bottom-color: transparent;
}
.site-header--scrolled .header-cta {
    box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.30);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}
.logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    text-decoration: none;
}
.logo__img {
    display: block;
    width: auto;
    height: 64px;                 /* пропорция 1672:941 → ~114px ширина */
    max-width: 100%;
}
@media (max-width: 575px) {
    .logo__img { height: 48px; }
}

/* --- Меню в хедере --- */
.site-nav {
    display: none;
    gap: var(--space-5);
    align-items: center;
    flex: 1 1 auto;
    justify-content: center;
}
.site-nav a {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    transition: color var(--t-fast) ease;
    white-space: nowrap;
}
.site-nav a:hover { color: var(--color-accent-text); }

@media (min-width: 1024px) {
    .site-nav { display: flex; }
}

/* --- Правый блок: телефон + CTA --- */
.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 0 0 auto;
}
.header-phone {
    display: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    line-height: 1.2;
    color: var(--color-text);
    white-space: nowrap;
}
.header-phone__num {
    font-weight: 700;
    font-size: 15px;
}
.header-phone__hours {
    font-size: 11px;
    color: var(--color-text-muted);
    font-weight: 500;
}
.header-phone:hover .header-phone__num { color: var(--color-accent-text); }

@media (min-width: 768px) {
    .header-phone { display: inline-flex; }
}

.header-cta {
    padding: 12px 18px;
    font-size: 14px;
    white-space: nowrap;
}
@media (max-width: 767px) {
    .header-cta {
        padding: 10px 14px;
        font-size: 13px;
    }
}
@media (max-width: 480px) {
    .header-cta { display: none; }
    .logo { font-size: 14px; }
    .logo__sub { display: none; }
}

/* ============================================================
   6. HERO — фото справа абсолютом, контент в нормальном потоке слева,
   features-карточка снизу перекрывает hero на ~70-80px
   ============================================================ */
.hero {
    position: relative;
    overflow: hidden;
    padding: 48px 0 40px;             /* без баннера сверху — добавили дыхание */
    background: linear-gradient(180deg, #f7efe6 0%, #f4ede2 100%);
}
.hero > .container {
    position: relative;
    z-index: 1;
}
.hero .container {
    max-width: 1600px;             /* было 1440 — на 1920 будет меньше пустых полей */
    margin: 0 auto;
    padding: 0 40px;
}
@media (min-width: 1600px) {
    .hero .container { padding: 0 60px; }
}
.hero-banner {
    position: relative;
    z-index: 6;
    margin-bottom: 28px;
}
.hero__grid {
    position: relative;
    display: block;
    min-height: 700px;             /* team-v3.png 1448x1086 — пропорция выше, чем у предыдущей */
}
.hero__content {
    position: relative;
    z-index: 5;
    width: auto;
    max-width: 780px;              /* шире — оффер уходит больше вправо, заполняет пространство */
    padding-bottom: 40px;
    overflow: visible;
}
.hero__title {
    width: auto;
    max-width: 780px;
    margin: 0 0 24px;
    /* Шрифт растёт от 48 до 84px, на широком экране оффер заполняет всю content-колонку */
    font-size: clamp(48px, 5vw, 84px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    font-weight: 800;
    color: var(--color-brand);
    overflow: visible;
}
@media (min-width: 1600px) {
    .hero__content { width: 820px; max-width: 820px; }
    .hero__title { width: 820px; max-width: 820px; }
}
.hero__title em {
    color: var(--color-accent);
    font-style: normal;
}
.hero__lead {
    max-width: 500px;
    margin: 0 0 28px;
    font-size: 20px;
    line-height: 1.45;
    color: var(--color-text-muted);
}
.hero__card {
    width: 500px;
    max-width: 500px;
    margin: 0;
    padding: 26px 28px 30px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(var(--brand-rgb), 0.10);
    border: 1px solid rgba(var(--brand-rgb), 0.04);   /* едва заметная рамка — премиум */
}
.hero__card .btn {
    min-height: 58px;
    gap: 12px;
}
.hero__cta svg {
    width: 22px;
    height: 22px;
    transition: transform var(--t-fast) ease;
}
.hero__cta:hover svg { transform: translateX(4px); }
.hero__media {
    display: block;
    position: absolute;
    z-index: 2;
    right: -40px;
    bottom: 0;
    width: 920px;
    /* height задаёт сам img по пропорции 1448:1086 */
    overflow: visible;
    pointer-events: none;
}
.hero__media img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;                  /* img tied to .hero__media width — не вылазит за родителя */
    max-width: none;
    height: auto;
    display: block;
    object-fit: contain;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    image-rendering: auto;
    /* team-v3.png — RGBA с честной альфой, CSS-маска больше не нужна */
}
/* Старый ::before-градиент больше не нужен — маска делает то же самое,
   но без добавления полупрозрачного слоя поверх лиц команды. */
.hero__media::before {
    display: none !important;
}
.chips {
    position: relative;
    z-index: 6;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 36px;
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-brand);
}
.chip svg {
    width: 16px;
    height: 16px;
    color: var(--color-accent);
}
.hero__features {
    position: relative;
    z-index: 8;
    max-width: 1280px;
    margin: -55px auto 0;
    background: #fff;
    border-radius: 14px;
    padding: 30px 48px;
    box-shadow: 0 20px 50px rgba(var(--brand-rgb), 0.10);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
}
.hero-feature {
    display: flex;
    align-items: center;
    gap: 16px;
}
.hero-feature img {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    object-fit: contain;
}
.hero-feature__title {
    font-size: 18px;
    font-weight: 800;
    color: var(--color-brand);
    line-height: 1.2;
    margin-bottom: 4px;
}
.hero-feature__text {
    font-size: 15px;
    color: var(--color-text-muted);
    line-height: 1.35;
}
/* 1200-1439: 2-колоночный, контент скромный, фото компактнее */
@media (min-width: 1200px) and (max-width: 1439px) {
    .hero__grid { min-height: 620px; }
    .hero__content { width: auto; max-width: 560px; }
    .hero__title {
        width: auto; max-width: 560px;
        font-size: clamp(40px, 4.2vw, 64px);
    }
    .hero__card { width: 100%; max-width: 500px; }
    .hero__media {
        right: -28px;
        width: min(700px, calc(100vw - 620px));
    }
}

/* 1440-1599: проблемный диапазон — много пустоты справа.
   Фото крупнее, content шире, padding контейнера уменьшен. */
@media (min-width: 1440px) and (max-width: 1599px) {
    .hero { padding-top: 36px; padding-bottom: 28px; }
    .hero .container {
        max-width: none;
        padding-left: 40px;
        padding-right: 40px;
    }
    .hero__grid { min-height: 640px; }
    .hero__content {
        max-width: 620px;
        padding-bottom: 24px;
    }
    .hero__title {
        max-width: 620px;
        font-size: clamp(56px, 4.45vw, 68px);
        margin-bottom: 22px;
    }
    .hero__lead {
        max-width: 520px;
        margin-bottom: 24px;
    }
    .hero__media {
        right: -34px;
        bottom: 0;
        width: clamp(820px, 56vw, 900px);
    }
    .chips { margin-bottom: 30px; }
}

/* Защита от горизонтального скролла: hero обрезает выступ фото справа */
.hero {
    overflow: hidden;
    overflow-x: clip;
}
@supports not (overflow: clip) {
    .hero { overflow-x: hidden; }
}

/* На 1199 и меньше переключаемся в single column. Side-by-side больше не пытаемся —
   на маленьких экранах overlap гарантирован. */
@media (max-width: 1199px) {
    .hero { padding: 32px 0 40px; }
    .hero__grid {
        display: grid;
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .hero__content {
        width: 100%;
        max-width: 620px;
        padding-bottom: 0;
    }
    .hero__title {
        width: 100%;
        max-width: 620px;
        font-size: clamp(40px, 5vw, 56px);
    }
    .hero__card {
        width: 100%;
        max-width: 540px;
    }
    .hero__media {
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
        height: auto;
        margin-top: 32px;
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
    }
    .hero__media img {
        position: relative;
        width: 100%;
        height: auto;
    }
    .hero__media::before {
        display: none;
    }
    .hero__features {
        margin-top: 24px;
        grid-template-columns: 1fr;
        padding: 24px;
    }
}
/* ============================================================
   MOBILE HERO (≤ 768px) — отдельная композиция:
   chips сверху → заголовок → лид → фото команды → sticky-карточка снизу.
   Тот же HTML, перестраиваем через CSS.
   ============================================================ */
@media (max-width: 768px) {
    .hero {
        padding: 20px 0 20px;
    }
    .hero .container {
        padding-left: 16px;
        padding-right: 16px;
    }
    .hero__grid {
        display: flex;
        flex-direction: column;
        gap: 0;
        min-height: auto;
    }

    /* Развалить .hero__content на детей — чтобы media можно было вставить
       между lead и card через CSS order. */
    .hero__content {
        display: contents;
    }
    .chips         { order: 1; margin: 0 0 14px; gap: 8px; }
    .hero__title   { order: 2; margin: 0 0 10px; }
    .hero__lead    { order: 3; margin: 0 0 6px; }
    .hero__media   { order: 4; margin: 0 auto 12px !important; }
    .hero__card    { order: 5; margin: 0; }

    .chip {
        padding: 9px 13px;
        font-size: 13px;
        line-height: 1.2;
    }
    .hero__title {
        width: 100%;
        max-width: none;
        font-size: clamp(30px, 7.5vw, 42px);
        line-height: 1.08;
        letter-spacing: -0.025em;
    }
    .hero__lead {
        font-size: 15px;
        line-height: 1.4;
        max-width: none;
    }

    /* Фото команды — компактно, между лидом и карточкой */
    .hero__media {
        display: block;
        position: static;
        right: auto;
        bottom: auto;
        width: 100%;
        height: auto;
        max-width: 320px;
        pointer-events: none;
    }
    .hero__media img {
        position: relative;
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
    .hero__media::before { display: none; }

    /* Карточка — в потоке, сразу под фото. Без fixed: чтобы не было пустоты-резерва. */
    .hero__card {
        position: static;
        width: 100%;
        max-width: none;
        background: #fff;
        border-radius: 20px;
        padding: 16px 18px 18px;
        box-shadow: 0 12px 28px rgba(var(--brand-rgb), 0.08);
        border: 1px solid rgba(var(--accent-rgb), 0.08);
    }
    .hero__bullets {
        gap: 4px;
        margin-bottom: 12px;
    }
    .hero__bullets li {
        gap: 10px;
        padding: 8px 0;
        font-size: 14px;
    }
    .hero__bullets li:not(:last-child) {
        border-bottom: 1px solid rgba(var(--brand-rgb), 0.06);
    }
    .hero__cta {
        padding: 14px 20px;
        font-size: 16px;
        min-height: 52px;
    }

    /* Decor элементы Hero — поменьше и убраны swoosh-линии (на мобиле перебор) */
    .hero .decor--swoosh { display: none; }
    .hero .decor--sparkle-lg {
        width: 56px; height: 56px;
        top: 100px !important;
        right: 16px !important;
    }
    .hero .decor--sparkle {
        width: 36px; height: 36px;
        top: auto !important;
        left: 12px !important;
        bottom: 280px !important;
    }
    .hero .decor--dots {
        width: 80px; height: 80px;
        background-size: 14px 14px;
        top: 8px !important;
        left: 4px !important;
        bottom: auto !important;
    }
}

/* ============================================================
   EXTRA-SMALL экраны (≤ 360px) — старые смартфоны и iPhone SE 1
   Уплотняем всё ещё сильнее, чтобы влезало в 320px.
   ============================================================ */
@media (max-width: 360px) {
    :root { --container-pad: 12px; }
    .container { padding-left: 12px; padding-right: 12px; }

    /* Заголовки Hero и секций — поменьше */
    .hero__title { font-size: 28px !important; line-height: 1.1; }
    .hero__lead  { font-size: 14px; }
    .section-title h2, .legal-guarantees__title,
    .quiz-section--big .quiz-section__head h2,
    .faq__title { font-size: clamp(24px, 7vw, 30px) !important; }

    /* Чипсы — на 320px часто не влезают в один ряд */
    .chips { flex-wrap: wrap; }
    .chip  { font-size: 12px; padding: 8px 10px; }

    /* Карточки кейсов, гарантий, шагов — уменьшение паддингов */
    .case-card, .guarantee-card, .step-arrow,
    .why-mfc__card, .hero__card { padding: 18px 14px; border-radius: 16px; }

    /* Кнопки внутри Hero card */
    .hero__cta { font-size: 15px; padding: 12px 16px; }

    /* Quiz — option-карточки */
    .quiz--big { padding: 24px 16px; }
    .quiz--big .quiz__question { font-size: 17px; }
    .quiz--big .quiz__option-body { padding: 14px 14px; font-size: 14px; gap: 10px; }
    .quiz--big .quiz__option-checkbox { width: 22px; height: 22px; flex: 0 0 22px; }

    /* FAQ */
    .faq__card { padding: 22px 14px; border-radius: 18px; }
    .faq__item summary { padding: 14px 14px; font-size: 14px; }
    .faq__summary-inner { gap: 10px; }
    .faq__num { width: 28px; height: 28px; flex: 0 0 28px; font-size: 13px; }

    /* CTA-final */
    .cta-box { padding: 22px 14px 26px; border-radius: 18px; }
    .cta-box__title { font-size: 22px; }
    .cta-box__text  { font-size: 14px; }

    /* Футер */
    .footer__legal a { font-size: 13px; }
    .footer__copy   { font-size: 12px; }
    .footer__logo-img { height: 52px; }

    /* Decor — почти всё скрываем на 320px чтобы не мешало */
    .decor--swoosh, .decor--sparkle-lg { display: none; }
    .decor--dots { width: 60px; height: 60px; opacity: 0.5; }
    .decor--sparkle { width: 28px; height: 28px; opacity: 0.5; }
}

/* ============================================================
   ДЕКОР-СЛОЙ — sparkles, dots-grid, swoosh-линии.
   Absolute, pointer-events: none, низкий z-index. Заполняет пустоту фоном.
   ============================================================ */
.decor {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    opacity: 0.85;
    color: var(--color-accent);
}
.hero, .why-mfc, .steps, .quiz-section, .cases, .guarantees, .legal-guarantees, .faq, .cta-section {
    position: relative;
    overflow: hidden;          /* декор не вылазит за секцию */
}

/* Универсальный мягкий переход между секциями.
   Каждая секция получает тонкий inset-shadow сверху и снизу: переход цвета сглаживается. */
main > section + section {
    box-shadow:
        inset 0 24px 32px -24px rgba(var(--brand-rgb), 0.04);
}
main > section {
    box-shadow:
        inset 0 -24px 32px -24px rgba(var(--brand-rgb), 0.04);
}
main > section + section {
    /* комбинируем: и сверху и снизу — для предотвращения наследования */
    box-shadow:
        inset 0 24px 32px -24px rgba(var(--brand-rgb), 0.04),
        inset 0 -24px 32px -24px rgba(var(--brand-rgb), 0.04);
}
.decor svg { display: block; width: 100%; height: 100%; }

/* Sparkle — 4-лучевая звезда (orange) */
.decor--sparkle {
    width: 56px;
    height: 56px;
    color: #f5a37a;             /* мягкий оранж — не отвлекает */
    opacity: 0.65;
}
.decor--sparkle-lg {
    width: 92px;
    height: 92px;
    color: #f5a37a;
    opacity: 0.55;
}

/* 3x3 точки */
.decor--dots {
    width: 96px;
    height: 96px;
    background-image: radial-gradient(circle, rgba(var(--accent-rgb), 0.45) 2px, transparent 2.5px);
    background-size: 18px 18px;
    background-position: center;
    opacity: 0.7;
}

/* Тонкая swoosh-линия (одна или пара) */
.decor--swoosh {
    width: 280px;
    height: 280px;
    color: rgba(var(--accent-rgb), 0.35);
    opacity: 0.7;
}
.decor--swoosh svg path { stroke: currentColor; }

/* На мобильных декор делаем мельче, чтобы не загромождать */
@media (max-width: 767px) {
    .decor--sparkle-lg { width: 56px; height: 56px; }
    .decor--swoosh { width: 180px; height: 180px; }
    .decor--dots { width: 72px; height: 72px; background-size: 14px 14px; }
}

/* ============================================================
   7. КАРТОЧКИ (универсально для секций «преимущества», «этапы»)
   ============================================================ */
.cards {
    display: grid;
    gap: var(--space-4);
}
.card {
    background-color: var(--color-card);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-md);    /* мягкая бренд-тень, как на референсе */
    transition: box-shadow var(--t-base) ease, transform var(--t-base) ease;
}
.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}
.card__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background-color: var(--color-accent-soft);
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-3);
}
.card__icon svg { width: 24px; height: 24px; }
.card__title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: var(--space-2);
}
.card__text {
    color: var(--color-text-muted);
    font-size: 15px;
}

@media (min-width: 640px)  { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .cards--4 { grid-template-columns: repeat(4, 1fr); } }

/* ============================================================
   8. УСЛОВИЯ (списки «подходит / не подходит»)
   ============================================================ */
.conditions__grid {
    display: grid;
    gap: var(--space-5);
}
.conditions__col h3 {
    border-left: 4px solid currentColor;
    padding-left: var(--space-3);
    margin-bottom: var(--space-4);
}
@media (min-width: 768px) {
    .conditions__grid { grid-template-columns: 1fr 1fr; }
}
.cond-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.cond-list li {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    background-color: var(--color-card);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
}
.cond-list__marker {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}
.cond-list__marker--yes { background-color: var(--color-success); }
.cond-list__marker--no  { background-color: var(--color-danger); }
.cond-list__marker svg {
    width: 12px;
    height: 12px;
    color: #fff;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ============================================================
   ПОЧЕМУ МФЦ — 3 фичи в белой карточке (та же стилистика что hero__features,
   но как самостоятельная секция, не подтянутая через margin-top)
   ============================================================ */
.why-mfc {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
}
.why-mfc .section-title {
    margin-bottom: var(--space-5);
}
.why-mfc__card {
    background: #fff;
    border-radius: 14px;
    padding: 28px 36px;
    box-shadow: 0 20px 50px rgba(var(--brand-rgb), 0.10);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    max-width: 1280px;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .why-mfc__card {
        grid-template-columns: repeat(3, 1fr);
        gap: 36px;
        padding: 32px 48px;
    }
}

/* Старая утилита .features-row (без белой обёртки) — оставлена на случай,
   если понадобится тот же layout без карточки. */
.features-row {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .features-row {
        grid-template-columns: 1fr 1fr 1fr;
        gap: var(--space-6);
    }
}

/* ============================================================
   КОМУ ПОДХОДИТ — 2 колонки (Подходит / Не подходит)
   ============================================================ */
.conditions-cols {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .conditions-cols { grid-template-columns: 1fr 1fr; }
}
.conditions-col__title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}
.conditions-col__title--yes { color: var(--color-success); }
.conditions-col__title--no  { color: var(--color-danger); }

/* ============================================================
   9. КЕЙСЫ v2 — 1 крупный + 3 маленьких (по референсу Тимура)
   ============================================================ */
.cases-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 1024px) {
    .cases-grid {
        grid-template-columns: 1.45fr 1fr;
        gap: 18px;                          /* было 24 — теперь собраннее */
    }
}

/* --- Главный кейс (крупный, слева) --- */
.case-main {
    position: relative;
    overflow: hidden;
    background: #fff;
    border-radius: 28px;
    padding: 36px 32px;
    box-shadow: 0 24px 60px rgba(var(--brand-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.08);
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: center;
}
@media (min-width: 768px) {
    .case-main {
        grid-template-columns: 1fr 1fr;       /* фото получает равную долю — стало крупнее */
        padding: 44px 0 44px 40px;            /* убираем правый padding — фото уходит к краю */
        gap: 24px;
        overflow: hidden;                      /* «вылет» документов внутри карточки */
    }
}

.case-main__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-accent-soft, #ffe2d3);
    color: var(--color-accent);
    font-weight: 700;
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 999px;
    letter-spacing: 0.01em;
    /* uppercase убран — текст длинный («Дело с большой суммой долга»),
       в обычном регистре читается лучше */
}
.case-main__badge svg { width: 14px; height: 14px; }

.case-main__sum {
    font-size: clamp(34px, 3.6vw, 54px);
    font-weight: 800;
    color: var(--color-accent);
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 22px 0 16px;
    white-space: nowrap;              /* сумма не должна разбиваться на 2 строки */
}
.case-main__title {
    font-size: clamp(20px, 1.7vw, 24px);
    font-weight: 800;
    color: var(--color-brand);
    line-height: 1.25;
    margin: 0 0 14px;
    max-width: 22ch;
}
.case-main__text {
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-text-muted);
    margin: 0 0 28px;
    max-width: 38ch;
}

/* Фичи — 4 равные колонки, одинаковый размер у всех элементов */
.case-main__features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 28px;
    max-width: 460px;
}
@media (max-width: 575px) {
    .case-main__features { grid-template-columns: repeat(2, 1fr); max-width: 100%; }
}
.case-feature {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    min-width: 0;
    text-align: left;
}
.case-feature img,
.case-feature__icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    object-fit: contain;
    background: var(--color-accent-soft, #ffe2d3);
    padding: 10px;
    flex: 0 0 56px;
}
.case-feature__icon {
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.case-feature__icon svg { width: 22px; height: 22px; }
.case-feature__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.case-feature strong {
    display: block;
    color: var(--color-brand);
    font-weight: 800;
    font-size: 15px;
    line-height: 1.2;
    word-break: keep-all;
}
.case-feature span {
    display: block;
    color: var(--color-text-muted);
    font-size: 13px;
    line-height: 1.4;
}

.case-main__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 12px;
    background: linear-gradient(180deg, #ff6a4a 0%, #ed5339 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 14px 28px rgba(var(--accent-rgb), 0.28);
    transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.case-main__cta svg { width: 16px; height: 16px; transition: transform var(--t-fast) ease; }
.case-main__cta:hover { transform: translateY(-1px); box-shadow: 0 18px 36px rgba(var(--accent-rgb), 0.34); }
.case-main__cta:hover svg { transform: translateX(4px); }

.case-main__photo {
    position: relative;
    display: flex;
    align-items: flex-end;             /* фото прижимаем вниз — даёт визуальный «вес» */
    justify-content: flex-end;
    align-self: stretch;
    margin: -10px -10px -20px 0;       /* документы чуть «вылазят» за карточку справа/снизу */
}
.case-main__photo img {
    width: 100%;
    max-width: 680px;                  /* было 520 — +30% масштаб */
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 30px 50px rgba(var(--brand-rgb), 0.14));
}
@media (max-width: 1023px) {
    .case-main__photo { margin: 0; justify-content: center; }
    .case-main__photo img { max-width: 480px; }
}
@media (max-width: 767px) {
    .case-main__photo { order: -1; }
    .case-main__photo img { max-width: 340px; }
}

/* --- Малые кейсы (справа, 3 штуки) --- */
.cases-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
@media (min-width: 1024px) {
    /* На десктопе мини-кейсы равномерно заполняют высоту большого кейса */
    .cases-side {
        align-self: stretch;
    }
    .cases-side .case-mini { flex: 1 1 0; min-height: 0; }
}
@media (max-width: 1023px) and (min-width: 640px) {
    /* На планшете — 3 колонки в ряд */
    .cases-side { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

.case-mini {
    position: relative;
    background: #fff;
    border-radius: 22px;
    padding: 22px 26px;
    box-shadow: 0 16px 40px rgba(var(--brand-rgb), 0.07);
    border: 1px solid rgba(var(--accent-rgb), 0.06);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: center;
    transition: transform var(--t-base) ease, box-shadow var(--t-base) ease;
}
.case-mini:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 52px rgba(var(--brand-rgb), 0.10);
}
.case-mini__body { min-width: 0; }
.case-mini__sum {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-accent);
    line-height: 1.1;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}
.case-mini__text {
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-text-muted);
    margin: 0 0 14px;
}
.case-mini__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-brand);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: color var(--t-fast) ease;
}
.case-mini__cta svg {
    width: 14px;
    height: 14px;
    color: var(--color-accent);
    transition: transform var(--t-fast) ease;
}
.case-mini__cta:hover { color: var(--color-accent-text); }
.case-mini__cta:hover svg { transform: translateX(3px); }

.case-mini__icon {
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    border-radius: 16px;
    background: var(--color-accent-soft, #ffe2d3);
    padding: 8px;                       /* было 14px — иконка стала крупнее внутри */
    object-fit: contain;
}

.cases-grid__disclaimer {
    margin: 32px auto 0;
    max-width: 640px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 1.5;
}

/* Mobile-адаптация — порядок и компактность */
@media (max-width: 575px) {
    .case-main { padding: 26px 22px; }
    .case-main__features { gap: 12px 14px; margin-bottom: 22px; }
    .case-feature strong { font-size: 14px; }
    .case-feature span { font-size: 12px; }
    .case-mini { padding: 20px 22px; grid-template-columns: 1fr 64px; gap: 14px; }
    .case-mini__icon { width: 64px; height: 64px; flex: 0 0 64px; padding: 6px; }
}

/* ============================================================
   10. ЭТАПЫ (нумерованные шаги)
   ============================================================ */
/* ============================================================
   ETAPS v2 — стрелочные карточки со SVG-иконками (по референсу Тимура)
   ============================================================ */
.steps-v2 .section-title { margin-bottom: var(--space-6); }

.step-arrows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .step-arrows { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .step-arrows { grid-template-columns: repeat(5, 1fr); gap: 12px; } }

.step-arrow {
    position: relative;
    background: #fff;
    border-radius: 18px;
    padding: 22px 24px 24px;
    box-shadow: 0 12px 30px rgba(var(--brand-rgb), 0.06), 0 2px 6px rgba(var(--brand-rgb), 0.04);
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
    transition: transform var(--t-base) ease, box-shadow var(--t-base) ease;
}
.step-arrow:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(var(--brand-rgb), 0.10);
}

/* Стрелочный хвостик справа — на десктопе у первых 4 карточек */
@media (min-width: 1100px) {
    .step-arrow:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 50%;
        right: -10px;
        width: 22px;
        height: 22px;
        background: #fff;
        transform: translateY(-50%) rotate(45deg);
        border-top-right-radius: 4px;
        box-shadow: 4px -4px 12px rgba(var(--brand-rgb), 0.04);
        z-index: 1;
    }
}

/* Тонкая оранжевая линия снизу — фирменный акцент референса */
.step-arrow::before {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 0;
    height: 3px;
    background: var(--color-accent);
    border-radius: 3px;
    opacity: 0.85;
}

.step-arrow__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

/* Outlined-цифра — крупная, оранжевая, контур */
.step-arrow__num {
    font-size: 38px;
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--color-accent);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1, "salt" 0, "ss01" 0, "ss02" 0;
}

.step-arrow__icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
}

.step-arrow__title {
    font-size: 18px;
    font-weight: 800;
    color: var(--color-brand);
    line-height: 1.25;
    margin: 0;
}

.step-arrow__text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-muted);
    margin: 0;
}

/* Старый .steps__grid оставлен для совместимости (не используется в новом блоке) */
.steps__grid {
    display: grid;
    gap: var(--space-4);
}
.step {
    background-color: var(--color-card);
    border-radius: var(--radius-lg);
    padding: var(--space-7) var(--space-5) var(--space-5);
    position: relative;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
/* Большая outlined-цифра в правом верхнем углу карточки.
   Используем явные строки (не counter), и отключаем font-feature-settings,
   чтобы system-ui fallback не подставлял stylistic alternates (звёздочки на «02»). */
.step::before {
    content: "";
    position: absolute;
    top: -10px;
    right: 8px;
    font-size: 96px;
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 2px var(--color-accent);
    line-height: 1;
    letter-spacing: 0;
    opacity: 0.45;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1, "salt" 0, "ss01" 0, "ss02" 0;
    font-family: var(--font-base);
}
.step:nth-child(1)::before { content: "01"; }
.step:nth-child(2)::before { content: "02"; }
.step:nth-child(3)::before { content: "03"; }
.step:nth-child(4)::before { content: "04"; }
.step:nth-child(5)::before { content: "05"; }
.step__title { font-weight: 700; margin-bottom: var(--space-2); }
.step__text  { color: var(--color-text-muted); font-size: 14px; }

@media (min-width: 768px)  { .steps__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .steps__grid { grid-template-columns: repeat(5, 1fr); } }

/* ============================================================
   11. ГАРАНТИИ
   ============================================================ */
.guarantees__grid {
    display: grid;
    gap: var(--space-4);
}
.guarantee {
    background-color: var(--color-card);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    box-shadow: var(--shadow-md);
}
.guarantee__icon {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    color: var(--color-accent);
    background-color: var(--color-accent-soft);
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.guarantee__icon svg { width: 28px; height: 28px; }
.guarantee__title { font-weight: 700; }
.guarantee__text  { font-size: 14px; color: var(--color-text-muted); }
@media (min-width: 768px) { .guarantees__grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   FAQ v2 — split: иллюстрация слева, нумерованный аккордеон справа
   (по референсу Тимура — оранжевые кружочки-номера, плюс/минус)
   ============================================================ */
.faq { padding-top: var(--space-7); padding-bottom: var(--space-8); }

.faq__card {
    background: var(--color-bg-warm);
    border-radius: 28px;
    padding: 40px 32px;
    display: grid;
    gap: 32px;
    grid-template-columns: 1fr;
    align-items: stretch;          /* колонки одинаковой высоты — «размер в размер» */
    box-shadow: 0 24px 60px rgba(var(--brand-rgb), 0.05);
}
@media (min-width: 900px) {
    .faq__card {
        grid-template-columns: 1fr 1.6fr;
        padding: 56px 56px;
        gap: 56px;
    }
}

.faq__side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;                  /* тянемся на всю высоту колонки */
}
.faq__title {
    font-size: clamp(36px, 4vw, 56px);
    line-height: 1.05;
    margin: 0;
    color: var(--color-brand);
    font-weight: 800;
    letter-spacing: -0.02em;
}
.faq__divider {
    display: block;
    width: 56px;
    height: 4px;
    background: var(--color-accent);
    border-radius: 4px;
    margin: 20px 0 18px;
}
.faq__sub {
    color: var(--color-text-muted);
    font-size: 16px;
    line-height: 1.5;
    max-width: 36ch;
    margin: 0 0 28px;
}
.faq__illustration {
    width: 100%;
    max-width: 360px;
    height: auto;
    align-self: center;
    margin-top: auto;              /* прижимает иллюстрацию к низу колонки → колонка тянется на высоту аккордеона */
    /* Лёгкая натуральная тень от пузырей через CSS */
    filter: drop-shadow(0 14px 24px rgba(var(--brand-rgb), 0.10));
}
@media (min-width: 900px) {
    .faq__illustration {
        align-self: flex-start;
        margin-left: -8px;
        max-width: 380px;          /* чуть крупнее на десктопе — заполняет пустое место */
    }
}

.faq__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.faq__item {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(var(--brand-rgb), 0.05);
    overflow: hidden;
    transition: box-shadow var(--t-fast) ease;
}
.faq__item[open] {
    box-shadow: 0 14px 32px rgba(var(--brand-rgb), 0.08);
}
.faq__item summary {
    list-style: none;
    cursor: pointer;
    padding: 20px 22px;
    display: block;                /* НЕ grid! grid на summary вылезает дубль-маркером */
    -webkit-tap-highlight-color: transparent;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::marker { content: ""; }
/* Grid-layout — на внутреннем span, а не на summary */
.faq__summary-inner {
    display: grid;
    grid-template-columns: 40px 1fr 32px;
    align-items: center;
    gap: 18px;
}

/* Оранжевый кружок-номер */
.faq__num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex: 0 0 36px;
}
.faq__item[open] .faq__num {
    background: var(--color-accent);
    color: #fff;
}

.faq__q {
    font-weight: 700;
    font-size: 17px;
    color: var(--color-brand);
    line-height: 1.3;
}

/* Кнопка плюс/минус — круглая контур, оранжевая */
.faq__toggle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--color-accent);
    position: relative;
    flex: 0 0 32px;
    transition: background var(--t-fast) ease;
}
.faq__toggle::before,
.faq__toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--color-accent);
    border-radius: 1px;
    transition: opacity var(--t-fast) ease, background var(--t-fast) ease;
}
.faq__toggle::before { /* горизонталь */
    width: 14px;
    height: 2px;
    transform: translate(-50%, -50%);
}
.faq__toggle::after  { /* вертикаль */
    width: 2px;
    height: 14px;
    transform: translate(-50%, -50%);
}
.faq__item[open] .faq__toggle {
    background: var(--color-accent);
}
.faq__item[open] .faq__toggle::before,
.faq__item[open] .faq__toggle::after { background: #fff; }
.faq__item[open] .faq__toggle::after { opacity: 0; }   /* остается только минус */

.faq__body {
    padding: 0 22px 22px 80px;     /* 80px = 22 + 36 (num) + 18 (gap) + 4 */
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1.55;
}
@media (max-width: 600px) {
    .faq__item summary { padding: 16px 18px; }
    .faq__summary-inner { grid-template-columns: 32px 1fr 28px; gap: 12px; }
    .faq__num { width: 32px; height: 32px; flex: 0 0 32px; font-size: 14px; }
    .faq__toggle { width: 28px; height: 28px; flex: 0 0 28px; }
    .faq__toggle::before { width: 12px; }
    .faq__toggle::after { height: 12px; }
    .faq__q { font-size: 15px; }
    .faq__body { padding: 0 18px 18px 62px; font-size: 14px; }
}

/* ============================================================
   12. FAQ (старые стили — оставлены для совместимости, не используются)
   ============================================================ */
.faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.faq__item {
    background-color: var(--color-card);
    border-radius: var(--radius-md);
    padding: 0 var(--space-4);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.faq__item summary {
    list-style: none;
    cursor: pointer;
    padding: var(--space-4) 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    -webkit-tap-highlight-color: transparent;
}
.faq__item summary::-webkit-details-marker { display: none; }
/* ВТОРОЙ "+" УБИТ — это был legacy-плюсик через ::after, дублирующий наш .faq__toggle */
.faq__item summary::after {
    content: none !important;
    display: none !important;
}
.faq__item[open] summary::after {
    content: none !important;
    display: none !important;
}

.faq__body {
    padding-bottom: var(--space-4);
    color: var(--color-text-muted);
    line-height: var(--lh-loose);
}

/* ============================================================
   13. ФИНАЛЬНЫЙ CTA
   ============================================================ */
.cta-final {
    text-align: center;
}
.cta-final__title {
    margin-bottom: var(--space-3);
}
.cta-final__text {
    color: var(--color-text-muted);
    margin-bottom: var(--space-5);
    max-width: 50ch;
    margin-left: auto;
    margin-right: auto;
}

/* 14. ФУТЕР — стили перенесены ниже (в финальный блок).
   Старые правила удалены, чтобы не перебивать. */

/* ============================================================
   15. THANKS
   ============================================================ */
.thanks-page {
    padding: var(--space-9) 0;
    text-align: center;
}
.thanks-page__icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-5);
    color: var(--color-success);
    background-color: rgba(31, 122, 58, 0.08);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.thanks-page__icon svg { width: 40px; height: 40px; }
.thanks-page__title { margin-bottom: var(--space-3); }
.thanks-page__lead  {
    color: var(--color-text-muted);
    font-size: 18px;
    margin-bottom: var(--space-6);
    max-width: 50ch;
    margin-left: auto; margin-right: auto;
}
.thanks-page__next {
    background-color: var(--color-card);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin: var(--space-6) auto;
    max-width: 600px;
    text-align: left;
}
.thanks-page__next ol {
    margin: var(--space-3) 0 0;
    padding-left: var(--space-5);
    color: var(--color-text-muted);
    line-height: var(--lh-loose);
}

/* ============================================================
   17. КОМПОНЕНТЫ ИЗ МАКЕТА «ПАЛИТРА ПРАВА» (split-layouts + stat)
   ============================================================ */

/* Hero-banner, hero__features, hero-feature, chip — определены выше в блоке "6. HERO".
   Здесь оставлен только .hero-banner__icon, который нужен для иконки предупреждения. */
.hero-banner__icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    color: var(--color-accent);
}
@media (max-width: 480px) {
    .hero-banner { font-size: 13px; padding: 12px 14px; }
}

/* --- Hero буллеты в карточке --- */
.hero__bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.hero__bullets li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text);
    font-size: 15px;
}
.hero__bullets svg {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    color: var(--color-accent);
    padding: 4px;
    border-radius: var(--radius-sm);
    background-color: var(--color-accent-soft);
    box-sizing: content-box;
}

/* --- Круглая плашка-иконка (для секции «Почему МФЦ выгоднее») --- */
.icon-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-color: var(--color-bg-soft);
    color: var(--color-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
}
.icon-circle svg { width: 32px; height: 32px; }

/* --- PNG-иконки из «Макет МФЦ»: уже с персиковой плашкой --- */
.card__png-icon {
    width: 88px;
    height: 88px;
    margin-bottom: var(--space-4);
    object-fit: contain;
}
.stat-card__png-icon {
    width: 104px;
    height: 104px;
    margin: 0 auto var(--space-4);
    object-fit: contain;
    display: block;
}

/* --- Карточка преимуществ с иконкой сверху --- */
.card--icon-top {
    text-align: left;
}

/* ============================================================
   SPLIT-LAYOUT секции
   ============================================================ */
.split-grid {
    display: grid;
    gap: var(--space-6);
}
@media (min-width: 900px) {
    .split-grid--1-2  { grid-template-columns: 1fr 2fr;     }
    .split-grid--2-1  { grid-template-columns: 2fr 1fr;     }
    .split-grid--1-1  { grid-template-columns: 1fr 1fr;     }
    .split-grid--1-15 { grid-template-columns: 1fr 1.5fr;   }
    .split-grid--15-1 { grid-template-columns: 1.5fr 1fr;   }
}

/* Список «Подходит / Не подходит» 2 колонками внутри split-правой части */
.cond-cols {
    display: grid;
    gap: var(--space-4);
}
@media (min-width: 640px) { .cond-cols { grid-template-columns: 1fr 1fr; } }

/* --- Этапы как вертикальный нумерованный список --- */
.step-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.step-list__item {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}
.step-list__num {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    background-color: var(--color-accent);
    color: #fff;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
.step-list__title { font-weight: 700; color: var(--color-brand); margin-bottom: 2px; }
.step-list__text  { color: var(--color-text-muted); font-size: 14px; line-height: 1.5; }

/* ============================================================
   LEGAL GUARANTEES — переделка по референсу Тимура (mfc_legal_guarantees_assets)
   4 карточки в ряд + плашка снизу с весами.
   ============================================================ */
.legal-guarantees {
    padding: 96px 0;
    /* Базовый фон — точно такой же как у соседних секций (bg страницы),
       чтобы переходы были бесшовные. Декоративность — через мягкие радиальные
       пятна accent (но они еле заметны, не дают резкого контраста). */
    background:
        radial-gradient(ellipse 70% 50% at 8% 14%, rgba(var(--accent-rgb), 0.07), transparent 65%),
        radial-gradient(ellipse 70% 50% at 92% 14%, rgba(var(--accent-rgb), 0.06), transparent 65%),
        radial-gradient(ellipse 60% 40% at 50% 100%, rgba(var(--accent-rgb), 0.04), transparent 70%),
        var(--color-bg);                          /* совпадает с cases и FAQ — никакой границы */
}

.legal-guarantees__head {
    text-align: center;
    margin-bottom: 56px;
}
.legal-guarantees__title {
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-brand);
    margin: 0 0 14px;
    letter-spacing: -0.02em;
}
.legal-guarantees__line {
    display: inline-block;
    width: 52px;
    height: 3px;
    background: var(--color-accent);
    border-radius: 2px;
    margin: 0 auto 20px;
}
.legal-guarantees__sub {
    font-size: clamp(16px, 1.4vw, 20px);
    color: var(--color-text-muted);
    margin: 0;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.45;
}

/* Сетка карточек: 1 → 2 → 4 */
.guarantees-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .guarantees-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
    .guarantees-grid { grid-template-columns: repeat(4, 1fr); gap: 28px; }
}

.guarantee-card {
    position: relative;
    overflow: hidden;
    background: #fff;
    border-radius: 28px;
    padding: 36px 24px 32px;
    text-align: center;
    box-shadow: 0 18px 45px rgba(var(--brand-rgb), 0.07);
    border: 1px solid rgba(var(--accent-rgb), 0.06);
    transition: transform var(--t-base) ease, box-shadow var(--t-base) ease;
}
.guarantee-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 26px 60px rgba(var(--brand-rgb), 0.10);
}
/* Декоративные точки в углу карточки */
.guarantee-card::after {
    content: "";
    position: absolute;
    width: 78px;
    height: 78px;
    opacity: 0.22;
    background-image: radial-gradient(rgba(var(--accent-rgb), 0.7) 1.5px, transparent 2px);
    background-size: 16px 16px;
    right: 18px;
    bottom: 18px;
    pointer-events: none;
}
.guarantee-card__icon {
    width: 88px;
    height: 88px;
    object-fit: contain;
    display: block;
    margin: 0 auto 22px;
}
.guarantee-card__value {
    font-size: clamp(36px, 3.4vw, 52px);
    line-height: 1;
    font-weight: 800;
    color: var(--color-brand);
    letter-spacing: -0.01em;
    margin-bottom: 14px;
}
/* Маленький ромб-разделитель под цифрой */
.guarantee-card__divider {
    display: block;
    width: 8px;
    height: 8px;
    margin: 0 auto 14px;
    background: var(--color-accent);
    border-radius: 1px;
    transform: rotate(45deg);
}
.guarantee-card__label {
    font-size: 16px;
    line-height: 1.4;
    color: var(--color-text-muted);
}

/* Плашка снизу с весами */
.legal-note {
    margin-top: 32px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(var(--accent-rgb), 0.14);
    box-shadow: 0 14px 34px rgba(var(--brand-rgb), 0.06);
    border-radius: 24px;
    padding: 20px 28px;
    display: flex;
    align-items: center;
    gap: 18px;
}
.legal-note__badge {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    object-fit: contain;
    display: block;
}
.legal-note__check {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(var(--accent-rgb), 0.28);
}
.legal-note__check svg { width: 16px; height: 16px; }
.legal-note__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.legal-note__text strong {
    color: var(--color-brand);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4;
}
.legal-note__text span {
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 1.45;
}

@media (max-width: 767px) {
    .legal-guarantees { padding: 64px 0; }
    .legal-guarantees__head { margin-bottom: 36px; }
    .guarantee-card { padding: 28px 20px 24px; border-radius: 22px; }
    .guarantee-card__icon { width: 72px; height: 72px; margin-bottom: 16px; }
    .legal-note {
        flex-direction: column;
        text-align: center;
        padding: 22px 20px;
        gap: 14px;
    }
    .legal-note__text { align-items: center; }
}

/* --- CTA-final (split: текст слева, фото юстиции справа) --- */
.cta-final {
    position: relative;
    overflow: hidden;
    background-color: var(--color-bg-soft);
    border-radius: var(--radius-xl);
    margin: var(--space-7) var(--container-pad);
    padding: var(--space-7) var(--space-6);
}
.cta-final .container { padding: 0; }
.cta-final__grid {
    display: grid;
    gap: var(--space-5);
    align-items: center;
}
.cta-final__media img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    display: block;
}
@media (min-width: 900px) {
    .cta-final { padding: var(--space-8) var(--space-7); }
    .cta-final__grid { grid-template-columns: 1.1fr 1fr; gap: var(--space-7); }
}
@media (max-width: 899px) {
    .cta-final__content { text-align: center; }
}

/* --- placeholder ASSET (с ярлычком) --- */
.asset-placeholder {
    position: relative;
    background:
        repeating-linear-gradient(45deg,
            rgba(var(--accent-rgb), 0.08) 0,
            rgba(var(--accent-rgb), 0.08) 10px,
            rgba(var(--accent-rgb), 0.04) 10px,
            rgba(var(--accent-rgb), 0.04) 20px);
    border: 2px dashed var(--color-accent);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-brand);
    text-align: center;
    padding: var(--space-5);
    min-height: 360px;
}
.asset-placeholder__code {
    font-size: 24px;
    font-weight: 800;
    color: var(--color-accent);
    margin-bottom: var(--space-2);
}
.asset-placeholder__name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: var(--space-2);
}
.asset-placeholder__hint {
    font-size: 13px;
    color: var(--color-text-muted);
}

/* ============================================================
   16. УТИЛИТЫ
   ============================================================ */
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0 !important; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* fade-in: применяем opacity:0 только когда JS подтвердил готовность через .js-ready
   на <html>. Если JS не загрузился (file://, ошибка модулей, отключённый JS) —
   контент остаётся видимым по дефолту. */
.js-ready .fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--t-slow) ease, transform var(--t-slow) ease;
}
.js-ready .fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .js-ready .fade-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ============================================================
   18. ОБНОВЛЕНИЯ ПО МАКЕТУ Mockupv2 (21 мая)
   ============================================================ */

/* --- Section title слева (не центрированный) --- */
.section-title--left {
    text-align: left;
}
.section-title--left h2 {
    color: var(--color-brand);
}
.section-title--left .section-title__sub {
    margin-top: var(--space-2);
}

/* --- «Как проходит процедура»: split (список + фото юстиции) --- */
.steps-split {
    display: grid;
    gap: var(--space-6);
    align-items: center;
    background-color: var(--color-card);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-md);
}
@media (min-width: 900px) {
    .steps-split {
        grid-template-columns: 1.1fr 1fr;
        gap: var(--space-7);
        padding: var(--space-6) var(--space-7);
    }
}
.steps-split__media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-md);
}
/* Список нумерованных шагов внутри split — переопределяем дефолтный step-list */
.steps-split .step-list { gap: var(--space-3); }
.steps-split .step-list__item {
    align-items: center;
    background-color: var(--color-bg-warm);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    gap: var(--space-4);
}
.steps-split .step-list__num {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    font-size: 14px;
    margin-top: 0;
}
.steps-split .step-list__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.35;
}
@media (max-width: 899px) {
    .steps-split__media { order: -1; }   /* фото сверху на мобайле */
}

/* --- CTA Final с чек-листами + щит --- */
.cta-final--checks {
    background-color: var(--color-bg-warm);
}
.cta-final--checks .cta-final__grid {
    grid-template-columns: 1fr;
    align-items: center;
}
@media (min-width: 900px) {
    .cta-final--checks .cta-final__grid {
        grid-template-columns: 1.4fr 1fr;
    }
}
.cta-final__lead {
    color: var(--color-text-muted);
    margin: var(--space-3) 0 var(--space-5);
    font-size: 17px;
    line-height: 1.5;
    max-width: 46ch;
    text-align: left;             /* не центрируем — на десктопе сирота-«долгов» больше не появится */
}
@media (max-width: 899px) {
    .cta-final__lead {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
}

.cta-final__checks {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
}
@media (max-width: 899px) {
    .cta-final__checks { justify-content: center; }
}
.cta-final__checks li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
}
/* Круглая оранжевая «таблетка» под чекмарком — премиум-look */
.cta-final__checks svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    color: #fff;
    background: var(--color-accent);
    border-radius: 50%;
    padding: 6px;
    box-sizing: content-box;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.25);
}

.cta-final__shield {
    display: flex;
    justify-content: center;
    align-items: center;
}
.cta-final__shield svg {
    width: 100%;
    max-width: 220px;
    height: auto;
    filter: drop-shadow(0 16px 36px rgba(var(--accent-rgb), 0.30));
}
@media (max-width: 899px) {
    .cta-final__shield { order: -1; }
    .cta-final__shield svg { max-width: 160px; }
}

/* ============================================================
   CTA-SECTION — премиальная финальная карточка перед футером
   Щит справа, бейджи + кнопка слева, плашка «данные защищены».
   ============================================================ */
.cta-section {
    padding: 90px 0;
    background: var(--color-bg);
}
@media (max-width: 575px) {
    .cta-section { padding: 64px 0; }
}

.cta-box {
    position: relative;
    overflow: hidden;
    min-height: 360px;
    display: grid;
    grid-template-columns: 0.56fr 0.44fr;
    align-items: center;
    gap: 40px;
    padding: 64px 72px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 72% 45%, rgba(var(--accent-rgb), 0.12) 0%, rgba(var(--accent-rgb), 0) 34%),
        linear-gradient(180deg, #fff8f4 0%, #ffffff 100%);
    border: 1px solid rgba(var(--brand-rgb), 0.08);
    box-shadow: 0 24px 70px rgba(var(--brand-rgb), 0.08);
}
/* Декоративные кольца — внутри визуальной колонки, центрированы по центру щита.
   (см. .cta-box__visual::before/::after ниже) */

.cta-box__content {
    position: relative;
    z-index: 2;
}
.cta-box__title {
    max-width: 620px;
    margin: 0 0 22px;
    font-size: clamp(32px, 3.4vw, 50px);
    line-height: 1.08;
    letter-spacing: -0.035em;
    font-weight: 800;
    color: var(--color-brand);
}
.cta-box__text {
    max-width: 560px;
    margin: 0 0 30px;
    font-size: 19px;
    line-height: 1.45;
    color: var(--color-text-muted);
}

.cta-box__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 22px;
    margin-bottom: 34px;
}
.cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text);
    font-weight: 700;
    font-size: 15px;
}
.cta-badge__icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 22px rgba(var(--accent-rgb), 0.28);
}
.cta-badge__icon svg { width: 14px; height: 14px; }

.cta-box__actions {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.cta-box__button {
    min-width: 230px;
    height: 62px;
    padding: 0 32px;
    border: 0;
    cursor: pointer;
    border-radius: 12px;
    background: linear-gradient(180deg, #ff6a4a 0%, #ed5339 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-decoration: none;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.01em;
    box-shadow: 0 16px 34px rgba(var(--accent-rgb), 0.28);
    transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.cta-box__button svg {
    width: 20px;
    height: 20px;
    transition: transform var(--t-fast) ease;
}
.cta-box__button:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 44px rgba(var(--accent-rgb), 0.34);
}
.cta-box__button:hover svg { transform: translateX(4px); }
.cta-box__time {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-muted);
    font-size: 14px;
}
.cta-box__time svg {
    width: 16px;
    height: 16px;
    color: var(--color-accent);
    flex: 0 0 16px;
}

.cta-box__visual {
    position: relative;
    z-index: 2;
    min-height: 460px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    isolation: isolate;            /* кольца ::before/::after уходят за щит через z-index: -1 */
}
/* Кольца — концентрические, центр совпадает с центром щита.
   Используем top:calc(50% - padding-bottom/2) — щит центрирован над плашкой. */
.cta-box__visual::before,
.cta-box__visual::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(50% - 50px);          /* выше центра визуала, чтобы совпасть с центром щита (плашка отнимает низ) */
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}
.cta-box__visual::before {
    width: 380px;
    height: 380px;
    margin-left: -190px;
    margin-top: -190px;
    border: 1px solid rgba(var(--accent-rgb), 0.16);
}
.cta-box__visual::after {
    width: 560px;
    height: 560px;
    margin-left: -280px;
    margin-top: -280px;
    border: 1px solid rgba(var(--accent-rgb), 0.10);
}
.cta-box__shield {
    width: min(280px, 70%);
    height: auto;
    display: block;
    filter: drop-shadow(0 26px 44px rgba(var(--accent-rgb), 0.22));
}
/* Плашка «Ваши данные защищены» — внизу-по центру визуальной колонки,
   с небольшим overlap на щит. Не выезжает за пределы карточки. */
/* Плашка — теперь часть flex-flow визуала, не absolute. Не вылезет за пределы. */
.cta-box__notice {
    max-width: 280px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(var(--accent-rgb), 0.14);
    box-shadow: 0 16px 36px rgba(var(--brand-rgb), 0.08);
    backdrop-filter: blur(10px);
    color: var(--color-text);
    font-size: 13px;
    line-height: 1.35;
}
.cta-box__notice strong {
    display: block;
    font-weight: 800;
    color: var(--color-brand);
    margin-bottom: 2px;
}
.cta-box__notice-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--color-accent-soft, #ffe2d3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
}
.cta-box__notice-icon svg { width: 18px; height: 18px; }

/* Адаптивка CTA */
@media (max-width: 991px) {
    .cta-box {
        grid-template-columns: 1fr;
        padding: 36px 24px 40px;
        text-align: left;
        gap: 24px;
    }
    .cta-box__visual {
        order: -1;
        min-height: 360px;
        padding: 0;
    }
    /* Кольца на мобиле — поменьше, в пределах визуала */
    .cta-box__visual::before {
        width: 280px; height: 280px;
        margin-left: -140px; margin-top: -140px;
        top: calc(50% - 40px);
    }
    .cta-box__visual::after {
        width: 420px; height: 420px;
        margin-left: -210px; margin-top: -210px;
        top: calc(50% - 40px);
    }
    .cta-box__shield { width: 200px; margin-top: 0; }
    .cta-box__notice {
        max-width: 320px;
        font-size: 13px;
    }
    .cta-box__title { font-size: clamp(28px, 7vw, 38px); }
    .cta-box__text { font-size: 16px; margin-bottom: 24px; }
    .cta-box__badges {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 28px;
    }
    .cta-badge { width: 100%; font-size: 14px; }
    .cta-box__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .cta-box__button { width: 100%; }
    .cta-box__time { justify-content: center; }
}
@media (max-width: 575px) {
    .cta-box {
        padding: 28px 18px 34px;
        border-radius: 22px;
        gap: 18px;
    }
    .cta-box__visual { min-height: 320px; }
    .cta-box__visual::before {
        width: 240px; height: 240px;
        margin-left: -120px; margin-top: -120px;
    }
    .cta-box__visual::after {
        width: 360px; height: 360px;
        margin-left: -180px; margin-top: -180px;
    }
    .cta-box__shield { width: 170px; }
    .cta-box__notice {
        max-width: 260px;
        padding: 10px 14px;
        font-size: 13px;
    }
    .cta-box__title { font-size: 26px; }
}

/* --- FOOTER: трёхколоночная сетка --- */
/* ============================================================
   FOOTER — минималистичный, в цвет сайта.
   Лого + 3 правовые ссылки + копирайт. Всё, что не нужно — убрано.
   ============================================================ */
.site-footer {
    background-color: var(--color-bg);                  /* бежевый — в цвет сайта */
    color: var(--color-text);
    padding: 56px 0 36px;
    font-size: 15px;
    line-height: 1.55;
    border-top: 1px solid rgba(var(--brand-rgb), 0.10);
}
.site-footer a {
    text-decoration: none;
    color: var(--color-brand);                          /* тёмно-коричневый — контрастный к фону */
    font-weight: 600;
    transition: color var(--t-fast) ease;
}
.site-footer a:hover { color: var(--color-accent-text); }

.footer__inner {
    display: flex;
    flex-direction: column;
    gap: 22px;
    align-items: center;
    text-align: center;
}
@media (min-width: 768px) {
    .footer__inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }
}

.footer__logo {
    display: inline-flex;
    align-items: center;
}
.footer__logo-img {
    display: block;
    width: auto;
    height: 80px;                              /* крупнее — в пропорцию с сайтом */
    max-width: 100%;
}
@media (max-width: 767px) {
    .footer__logo-img { height: 64px; }
}

.footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    justify-content: center;
    align-items: center;
}
.footer__legal a {
    font-size: 15px;
    color: var(--color-brand);
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;                 /* a11y: тач-таргет ≥44px */
    padding: 10px 8px;
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    outline: none;
}
.footer__legal a:hover { color: var(--color-accent-text); }
.footer__legal a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.footer__legal-trigger {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.footer__copy {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(var(--brand-rgb), 0.10);
    text-align: center;
    font-size: 14px;
    color: var(--color-text);                  /* было soft — теперь чётко читаемый */
    font-weight: 500;
}

/* Зачистка — удаляю классы старого футера, если они вдруг где-то останутся */
.footer__brand-col,
.footer__reviews,
.footer__col,
.footer__contacts,
.footer__contact,
.footer__bottom { display: none; }

/* ============================================================
   MODAL — универсальный поп-ап (используется для Реквизитов)
   ============================================================ */
.modal[hidden] { display: none; }
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: modalIn var(--t-base) ease;
}
@keyframes modalIn { from { opacity: 0; } to { opacity: 1; } }

.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(var(--brand-rgb), 0.45);
    backdrop-filter: blur(4px);
}

.modal__dialog {
    position: relative;
    background: #fff;
    border-radius: 22px;
    padding: 36px 32px 32px;
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 30px 80px rgba(var(--brand-rgb), 0.25);
    animation: dialogIn var(--t-base) cubic-bezier(.2, .9, .3, 1.1);
}
@keyframes dialogIn {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    border: 0;
    background: var(--color-bg-warm);
    border-radius: 50%;
    color: var(--color-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-fast) ease, color var(--t-fast) ease;
}
.modal__close:hover { background: var(--color-accent); color: #fff; }
.modal__close svg { width: 20px; height: 20px; }

.modal__title {
    font-size: 26px;
    line-height: 1.15;
    margin: 0 0 12px;
    color: var(--color-brand);
    font-weight: 800;
    letter-spacing: -0.02em;
}
.modal__divider {
    display: block;
    width: 44px;
    height: 3px;
    background: var(--color-accent);
    border-radius: 2px;
    margin-bottom: 24px;
}

/* Список реквизитов */
.requisites {
    margin: 0 0 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.requisites__row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 16px;
    align-items: start;
}
.requisites__row dt {
    color: var(--color-text-muted);
    font-size: 13px;
    line-height: 1.5;
    padding-top: 1px;
}
.requisites__row dd {
    margin: 0;
    color: var(--color-brand);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}
.requisites__row dd a {
    color: var(--color-brand);
    text-decoration: none;
    border-bottom: 1px dashed rgba(var(--brand-rgb), 0.3);
}
.requisites__row dd a:hover {
    color: var(--color-accent-text);
    border-bottom-color: var(--color-accent-text);
}

.modal__action {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 12px;
    background: var(--color-bg-warm);
    color: var(--color-brand);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    transition: background var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-fast) ease;
}
.modal__action svg { width: 16px; height: 16px; }
.modal__action:hover {
    background: var(--color-accent);
    color: #fff;
    transform: translateY(-1px);
}

/* Блокируем скролл фона когда модалка открыта */
body.has-modal-open { overflow: hidden; }

/* ============================================================
   UNIFIED CHECKMARK — единый паттерн «оранжевый круг + белая галочка».
   Применяется везде где раньше были разные варианты галок.
   ============================================================ */
.chip svg,
.hero__bullets li svg,
.why-mfc__card .hero-feature .check-mark,
.cta-final__checks li svg,
.legal-note__check {
    /* стандарты приведены в самих компонентах ниже */
}

/* Универсальный класс — оранжевый кружок с белым SVG-чекмарком 28×28 */
.check {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(var(--accent-rgb), 0.25);
}
.check svg { width: 14px; height: 14px; display: block; }
.check--sm { width: 22px; height: 22px; flex: 0 0 22px; box-shadow: 0 6px 14px rgba(var(--accent-rgb), 0.22); }
.check--sm svg { width: 11px; height: 11px; }

/* Принудительная стилизация существующих SVG-галочек в чипсах и булитах Hero —
   переводим их в единый паттерн без правки HTML */
.chip {
    background: var(--color-card);
    border-radius: 999px;
    padding: 10px 16px 10px 10px;     /* меньше слева — там круг с галочкой */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text);
    box-shadow: 0 6px 16px rgba(var(--brand-rgb), 0.06);
}
.chip svg {
    width: 14px;
    height: 14px;
    color: #fff;
    background: var(--color-accent);
    border-radius: 50%;
    padding: 4px;
    box-sizing: content-box;
    box-shadow: 0 6px 14px rgba(var(--accent-rgb), 0.22);
    flex: 0 0 14px;
}

.hero__bullets li svg {
    width: 14px;
    height: 14px;
    color: #fff;
    background: var(--color-accent);
    border-radius: 50%;
    padding: 6px;
    box-sizing: content-box;
    box-shadow: 0 6px 14px rgba(var(--accent-rgb), 0.22);
    flex: 0 0 14px;
}

/* ============================================================
   STICKY CTA (мобиль): плавающая кнопка «Пройти тест»
   Появляется после скролла Hero, скрывается на квизе.
   ============================================================ */
.sticky-cta {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 80;
    height: 56px;
    border: 0;
    cursor: pointer;
    border-radius: 14px;
    background: linear-gradient(180deg, #ff6a4a 0%, #ed5339 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 800;
    box-shadow: 0 14px 28px rgba(var(--accent-rgb), 0.32), 0 2px 8px rgba(var(--brand-rgb), 0.12);
    animation: stickyIn .25s ease;
}
.sticky-cta[hidden] { display: none; }
.sticky-cta svg { width: 18px; height: 18px; transition: transform var(--t-fast) ease; }
.sticky-cta:hover svg { transform: translateX(3px); }
@keyframes stickyIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* На десктопе sticky CTA не нужен — JS его и так скрывает, но дублируем CSS на всякий случай */
@media (min-width: 769px) {
    .sticky-cta { display: none !important; }
}

@media (max-width: 575px) {
    .modal__dialog { padding: 28px 22px 24px; border-radius: 18px; }
    .modal__title { font-size: 22px; }
    .requisites__row { grid-template-columns: 90px 1fr; gap: 12px; }
    .requisites__row dd { font-size: 14px; }
}

.footer__reviews {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    line-height: 1.35;
}
.footer__reviews svg { width: 34px; height: 34px; flex: 0 0 34px; }
.footer__reviews-text strong { color: var(--color-accent); font-weight: 700; }
.footer__reviews-text span { color: #fff; }

/* 2-3. Меню колонки */
.footer__col {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: 4px;
}
.footer__col a {
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    font-weight: 500;
}

/* 4. Контакты */
.footer__contacts {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.footer__contact {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.footer__contact-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 200, 130, 0.42);
    color: rgba(255, 200, 130, 0.95);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.footer__contact-icon svg { width: 18px; height: 18px; }
.footer__contact-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.footer__contact-label {
    color: rgba(255, 200, 130, 0.95);
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.footer__contact-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #20c97a;
    color: #fff;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
}
.footer__contact-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}
.footer__contact-value {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
}
.footer__contact-hint {
    color: rgba(255, 255, 255, 0.48);
    font-size: 13px;
}

/* Старые стили футера (для тёмного фона) удалены —
   актуальные находятся выше, в блоке «FOOTER — минималистичный». */