/* ============================================================
   Главная v2 (ТЗ маркетинга 05.08.2026, разделы 2.6, 3, 4).
   Файл намеренно назван на zz-: addCSS сортирует по имени файла,
   и этот слой должен побеждать styles.css.
   Тема одна, тёмная (решение 05.08.2026). Светлые токены ТЗ 3.3 не заводим.
   Все новые классы с префиксом v2-, чтобы не пересекаться со старым styles.css.

   Токены объявлены на .v2, а не на :root: styles.css уже держит свой --line
   (#E7E7E0, светлый) и тёмная тема тарифов им пользуется - глобальный оверрайд
   перекрасил бы нетронутые блоки. Каждая переработанная секция получает класс
   .v2, вложенные элементы наследуют переменные.
   ============================================================ */

.v2 {
    /* --- общие (ТЗ 3.1) --- */
    --acid: #C8FF4D;      /* единственный громкий цвет: роли и лимит по ТЗ 5.5 */
    --indigo: #4D7FFF;    /* линия пути, знак «+» в цифрах, мелкие акценты */
    --indigo-lt: #6E94FF; /* иконки, eyebrow, единицы измерения */
    --role: #6B70A8;      /* подпись роли, слово «Раньше» в результатах */
    --wire: #3A3F7A;      /* кривые схемы в блоке ролей */
    --maxw: 1200px;
    --node: 44px;         /* кружок шага в пути заказа FBS */
    --dot: 14px;          /* точка рейла в «Как мы работаем» */
    --rail: 2px;          /* толщина линии пути */

    /* --- тёмная тема (ТЗ 3.2) --- */
    --bg: #000025;
    --card: #14163F;
    --card-2: #191C4A;
    --line: #23254F;
    --line-soft: rgba(255, 255, 255, .10);
    --text: #FFFFFF;
    --text-muted: #8B92C9;
    --text-mid: #A6ABD8;
}

/* --- единый ритм страницы (ТЗ 2.6): контейнер 1200, отступы секции 60/40.
       Исключение одно: первый экран, 52/56 (задаётся в его собственных стилях). --- */
.v2-container {
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: 32px;
}
.v2-section {
    padding-block: 60px;
}
@media (max-width: 560px) {
    .v2-container { padding-inline: 18px; }
    .v2-section { padding-block: 40px; }
}

/* --- заголовок секции (ТЗ 4): строка 1 серифным курсивом, строка 2 жирным
       Manrope с градиентом. color задан ДО градиента и обнуляется только в
       @supports: без поддержки background-clip текст остался бы невидимым. --- */
.v2-h2 {
    margin: 0;
    font-weight: 400;
}
.v2-h2 i,
.v2-h2 .v2-h2__serif {
    display: block;
    font-family: 'Source Serif 4', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    color: var(--text);
}
.v2-h2 b,
.v2-h2 .v2-h2__grad {
    display: block;
    font-family: Manrope, sans-serif;
    font-weight: 800;
    color: var(--text);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .v2-h2 b,
    .v2-h2 .v2-h2__grad {
        background: linear-gradient(90deg, var(--text), var(--indigo));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}

/* eyebrow: только текст, без линии и маркера (ТЗ 4) */
.v2-eyebrow {
    display: block;
    font-family: Manrope, sans-serif;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--indigo-lt);
}

/* крупные цифры не дребезжат по ширине (ТЗ 4) */
.v2-num { font-variant-numeric: tabular-nums; }

/* при reduced-motion переходы и анимации глушатся (ТЗ 2.4) */
@media (prefers-reduced-motion: reduce) {
    [class^="v2-"], [class^="v2-"]::before, [class^="v2-"]::after,
    [class*=" v2-"], [class*=" v2-"]::before, [class*=" v2-"]::after {
        transition: none !important;
        animation: none !important;
    }
}