/* =============================================================================
   landing-rhythm.css — композиционный ритм лендинга
   -----------------------------------------------------------------------------
   Задача файла: убрать монотонность, из-за которой все секции читались как одна
   лента одинаковых плашек. До этого каждая секция была собрана по одному шаблону
   «py-24 → центрированный заголовок одного размера → сетка одинаковых стеклянных
   карточек». Здесь задаются три вещи:

     1) типографическая иерархия заголовков секций (не все кричат одинаково);
     2) разные композиции для разных секций (полоса, асимметрия, список, 1+3);
     3) ранжирование стекла — оно остаётся акцентом на 2–3 поверхностях,
        а не материалом по умолчанию.

   Подключается ПОСЛЕ tailwind.build.css, потому что перебивает утилиты
   (text-center, grid-cols-*, размеры заголовков) на существующей разметке.
   Сборка Tailwind в проекте не автоматизирована, поэтому новые классы пишутся
   обычным CSS, а не утилитами — иначе они просто не попадут в билд.
   ========================================================================== */


/* -----------------------------------------------------------------------------
   0. ПАНЕЛЬ СЕКЦИИ
   -----------------------------------------------------------------------------
   Когда с блока снимаются карточки, содержимое остаётся лежать прямо на фоне,
   а фон у страницы живой: точечная сетка с подсветкой. Текст на ней читается
   как забытый без подложки. Решение не в том, чтобы вернуть коробку каждому
   пункту, а в том, чтобы дать секции ОДНУ общую поверхность: подложка есть,
   а ряда одинаковых карточек нет. Внутри пункты разделяются волосяными
   линиями, как и раньше.
-------------------------------------------------------------------------------*/
.section-panel {
    position: relative;
    border-radius: 24px;
    background: linear-gradient(160deg, var(--sheen-a), var(--sheen-b));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--line2);
    box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-inset);
    padding: 34px 40px;
}
@media (max-width: 767px) {
    .section-panel { padding: 24px 20px; border-radius: 18px; }
}
/* Без блюра прозрачная плёнка на светлой теме выглядит грязно: даём заливку. */
@media (prefers-reduced-transparency: reduce) {
    .section-panel {
        background: var(--proof-bg);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* -----------------------------------------------------------------------------
   1. ЗАГОЛОВКИ СЕКЦИЙ — три уровня громкости
   -----------------------------------------------------------------------------
   Раньше все девять h2 были text-3xl/4xl/5xl по центру. Теперь громкость
   зависит от роли секции: «якорь» (проблема, как это работает) звучит громче
   опорных секций, а FAQ и команда — тише всех.
-------------------------------------------------------------------------------*/
.sec-head {
    margin-bottom: 36px;
    max-width: 900px;
}
.sec-head .section-title {
    /* Unbounded широкий — на больших кеглях нужен отрицательный трекинг,
       иначе строка расползается и теряет плотность. */
    letter-spacing: -0.03em;
    line-height: 1.04;
    text-wrap: balance;
    margin-bottom: 0;
}
.sec-head .sec-sub {
    margin-top: 18px;
    color: var(--muted);
    font-size: clamp(15px, 1.35vw, 18px);
    line-height: 1.65;
    max-width: 56ch;
    text-wrap: pretty;
}

/* Якорные секции: самый крупный кегль, левое выравнивание. Ширина ограничена
   по символам, иначе balance ломает строку в неудачном месте (тире уезжает
   в начало следующей строки) и заголовок съедает пол-экрана. */
.sec-head--anchor .section-title {
    font-size: clamp(2rem, 4vw, 3.5rem);
    /* Ширина в пикселях, а не в ch: ch считается по средней ширине символа, а
       Unbounded заметно шире неё, из-за чего 21ch давали строку на 570px и
       заголовок ломался на три части. */
    max-width: 900px;
    /* balance выравнивает строки по длине и упорно делает три коротких строки
       вместо двух. Ширину задаёт max-width, перенос пусть будет жадным. */
    text-wrap: initial;
}

/* Опорные секции — на ступень тише. */
.sec-head--mid .section-title { font-size: clamp(1.8rem, 3.1vw, 2.75rem); }

/* Служебные секции (FAQ, команда) — тише всех, это уже не заявление. */
.sec-head--quiet .section-title {
    font-size: clamp(1.5rem, 2.2vw, 2.05rem);
    letter-spacing: -0.02em;
}

/* Все заголовки на одной левой линии. Центр пробовался как чередование, но
   на девяти секциях он выпадал подряд у соседей и читался не ритмом, а
   несистемностью: страница будто прыгала вбок. Ритм держат размер и
   композиция самих секций, а не выравнивание. Центрируется только
   финальный призыв, где стоит одна кнопка. */
.sec-head--left   { margin-left: 0; margin-right: auto; text-align: left; }
.sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head--center .sec-sub { margin-left: auto; margin-right: auto; }

/* Второй строкой подзаголовка в «проблемах» идёт h3 — он должен читаться
   как продолжение фразы, а не как отдельный заголовок. */
.sec-head .card-title {
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-top: 10px;
}
.sec-head--anchor .card-title { font-size: clamp(1.4rem, 2.5vw, 2.2rem); }

@media (max-width: 767px) {
    .sec-head { margin-bottom: 36px; text-align: left; }
    .sec-head--center { text-align: left; }
    .sec-head--center .sec-sub { margin-left: 0; }
}

/* -----------------------------------------------------------------------------
   2. ПРИГЛАШЕНИЯ — живое число, пилюли и четыре цифры про результат
   -----------------------------------------------------------------------------
   Раньше здесь была полоса из четырёх статичных чисел про нас
   («проанализировано резюме», «сэкономлено часов»), а над ней плашка со
   Станиславом и зашитым «1 238 приглашений». Человеку важно не это, а
   сработает ли у него, поэтому теперь блок про результат. Макет Ромы v2 от
   19.09.2026 (карточка 70800825), шрифты и цвета сайта.

   Композиция (21.09.2026, после замечания «слева сдвинуто, справа пусто»):
   на широком экране асимметричный сплит: слева стекло с числом, справа
   четыре карточки квадратом 2×2, под ними бегущая строка во всю ширину и
   подпись. Не центр (он тут выглядит как визитка) и не всё слева (пустой
   правый край). На узком экране всё в один столбец: стекло, строка,
   карточки, подпись.

   Секция сама сетка «во всю ширину с контентной колонкой»: крайние
   колонки съедают поля, средняя ограничена той же шириной, что у секций
   ниже (max-w-7xl), бегущая строка растягивается на все колонки. */
.inv-feed {
    /* Фон хиро (холст с авророй) высотой в экран и абсолютно позиционирован:
       он выступает под хиро и без собственного контекста наложения рисовался
       бы поверх числа. Поднимаем блок над ним. */
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(24px, 1fr) minmax(0, 1280px) minmax(24px, 1fr);
    row-gap: 0;
    padding: 0 0 34px;
    overflow: hidden;

    --lg-a: rgba(255,255,255,.13);
    --lg-b: rgba(255,255,255,.035);
    --lg-edge: rgba(255,255,255,.24);
    --lg-edge-in: rgba(255,255,255,.08);
    --lg-hl: rgba(255,255,255,.36);                                  /* блик по верхней кромке */
    --lg-spot: rgba(255,255,255,.24);                                /* пятно света слева сверху */
    --lg-tint: color-mix(in srgb, var(--purple) 26%, transparent);   /* отсвет авроры справа снизу */
    --lg-base: rgba(10,11,30,.42);   /* подложка: яркая аврора не должна просвечивать под серым текстом */
}
[data-theme="light"] .inv-feed {
    --lg-a: rgba(255,255,255,.8);
    --lg-b: rgba(255,255,255,.4);
    --lg-edge: rgba(255,255,255,.95);
    --lg-edge-in: rgba(20,26,63,.06);
    --lg-hl: rgba(255,255,255,1);
    --lg-spot: rgba(255,255,255,1);
    --lg-tint: color-mix(in srgb, var(--cyan) 16%, transparent);
    --lg-base: rgba(255,255,255,.3);
}
.inv-head-panel, .inv-stats, .inv-foot { grid-column: 2; min-width: 0; }
.inv-rows { grid-column: 1 / -1; }
@media (max-width: 639px) {
    .inv-feed { grid-template-columns: minmax(16px, 1fr) minmax(0, 1280px) minmax(16px, 1fr); }
}

/* Стекло шапки — наше, как у секций (.section-panel): плёнка с блюром,
   волосяная рамка, блик по верхней кромке. Поверхность большая, значит
   материал «толще»: блюр сильнее и тень глубже, чем у карточек. */
.inv-head-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 26px 34px 30px 30px;
    border-radius: 28px;
    background: linear-gradient(160deg, var(--sheen-a), var(--sheen-b)), var(--lg-base);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--line2);
    box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-inset);
}
/* Бейдж только с живыми данными: без ответа API его нет, обещать нечего.
   Подложка почти непрозрачная: на светлой авроре прозрачный чип терялся. */
.inv-live-badge {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--green-ink);
    background: var(--proof-bg);
    border: 1px solid color-mix(in srgb, var(--green) 45%, transparent);
    box-shadow: inset 0 1px 0 var(--glass-inset);
    margin-bottom: 18px;
}
.inv-live-badge[hidden] { display: none; }
.inv-live {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent);
    animation: inv-pulse 1.8s ease-out infinite;
}
@keyframes inv-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); }
    70%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--green) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 0%, transparent); }
}
.inv-head {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.inv-big {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(64px, 8.5vw, 116px);
    line-height: 0.9;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    background: linear-gradient(135deg, var(--cyan), var(--blue) 45%, var(--purple));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.inv-head-text {
    flex: 1 1 260px;
    min-width: 0;
    font-size: clamp(19px, 2vw, 25px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
}
.inv-head-sub {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: var(--muted);
    margin-top: 10px;
    line-height: 1.5;
}

/* Пилюли: событие, а не вакансия из поиска. Галочка, должность, город,
   зелёным «позвали вчера». Свежие первыми, две строки навстречу друг другу,
   бегут на transform, две копии пробега для бесшовного цикла, скорость по
   ширине задаёт скрипт. Пока данных нет, строк нет. Пауз нет: строка
   бежит, что бы ни делал курсор (решение 21.09.2026). */
.inv-rows { display: grid; gap: 12px; margin-top: 22px; }
.inv-rows[hidden] { display: none; }
.inv-row {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.inv-track {
    display: flex;
    width: max-content;
    padding: 6px 0;
}
.inv-track.is-on {
    will-change: transform;
    animation: inv-scroll var(--inv-dur, 60s) linear infinite;
}
.inv-track.is-back { animation-direction: reverse; }
.inv-run { display: flex; align-items: center; flex: none; gap: 12px; padding-right: 12px; }
.inv-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    padding: 11px 18px 11px 12px;
    border-radius: 999px;
    font-size: 16px;
    line-height: 1.25;
    color: var(--text);
    background: color-mix(in srgb, var(--green) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
}
.inv-pill .ic {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--green);
    color: #07261a;
    display: grid;
    place-items: center;
}
.inv-pill .ic svg { width: 14px; height: 14px; }
.inv-pill b { font-weight: 700; }
.inv-pill .city { color: var(--muted); }
.inv-pill .ev { color: var(--green-ink); font-weight: 600; }
@keyframes inv-scroll { to { transform: translateX(-50%); } }

/* Четыре цифры про результат. Карточки, а не полоса: числа разного
   формата («64%», «1 из 24», «2 дня»), и без рамки ряд читается как
   случайный набор. Четвёртая уходит, пока людей в выборке мало; тогда
   последняя нечётная растягивается на обе колонки, пустых клеток нет.

   Материал — жидкое стекло по мотивам Apple: плёнка с блюром и
   насыщением, двойная кромка (внешняя светлая и внутренняя в 1px), пятно
   света в верхнем левом углу, отсвет авроры в нижнем правом и блик по
   верху. Это приближение средствами CSS, а не системный материал Apple.
   Карточки меньше шапки, поэтому материал тоньше: блюр слабее, тень легче. */
.inv-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
}
/* Три карточки (четвёртая скрыта скриптом, класс is-three): третья на обе
   колонки, пустой клетки нет. :last-child здесь не работает: скрытая
   четвёртая всё равно последняя в разметке. */
.inv-stats.is-three .inv-stat:nth-child(3) { grid-column: 1 / -1; }
.inv-stat {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 24px;
    padding: 22px 22px 20px;
    border: 1px solid var(--lg-edge);
    background: linear-gradient(135deg, var(--lg-a), var(--lg-b)), var(--lg-base);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow:
        inset 0 1px 0 var(--lg-hl),
        inset 0 -1px 0 var(--lg-edge-in),
        0 12px 34px var(--drop);
    transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease;
}
.inv-stat::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background:
        radial-gradient(170px 120px at 8% -12%, var(--lg-spot), transparent 70%),
        radial-gradient(200px 130px at 106% 112%, var(--lg-tint), transparent 70%),
        linear-gradient(90deg, var(--lg-edge-in), transparent 40%, var(--lg-edge-in));
    pointer-events: none;
}
.inv-stat::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    border: 1px solid var(--lg-edge-in);
    pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
    .inv-stat:hover {
        transform: translateY(-2px);
        box-shadow:
            inset 0 1px 0 var(--lg-hl),
            inset 0 -1px 0 var(--lg-edge-in),
            0 18px 44px var(--drop-lg);
    }
}
.inv-stat[hidden] { display: none; }
.inv-stat .n {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(26px, 2.4vw, 34px);
    line-height: 1;
    white-space: nowrap;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.inv-stat .t {
    margin-top: 10px;
    color: var(--muted);
    font-size: 14.5px;
    font-weight: 500;         /* на стекле серый текст читается хуже: чуть плотнее */
    line-height: 1.4;
}
.inv-foot {
    margin-top: 16px;
    font-size: 13px;
    color: var(--faint);
}

/* Широкий экран: сплит. Шапка слева, карточки 2×2 справа, одинаковой
   высоты; строка пилюль под ними на всю ширину, подпись под строкой. */
@media (min-width: 900px) {
    .inv-feed {
        grid-template-columns: minmax(24px, 1fr) minmax(0, 640px) 20px minmax(0, 620px) minmax(24px, 1fr);
        grid-template-rows: auto auto auto;
    }
    .inv-head-panel { grid-column: 2; grid-row: 1; }
    .inv-stats { grid-column: 4; grid-row: 1; margin-top: 0; align-content: stretch; }
    .inv-rows { grid-column: 1 / -1; grid-row: 2; margin-top: 26px; }
    .inv-foot { grid-column: 2 / 5; grid-row: 3; }
    .inv-stat { display: flex; flex-direction: column; justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
    .inv-track.is-on { animation: none; }
    .inv-live { animation: none; }
    .inv-stat { transition: none; }
    .inv-stat:hover { transform: none; }
}
/* Без блюра прозрачная плёнка на светлой теме выглядит грязно: даём заливку. */
@media (prefers-reduced-transparency: reduce) {
    .inv-head-panel, .inv-stat {
        background: var(--proof-bg);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .inv-stat::before { display: none; }
}
@media (max-width: 767px) {
    .inv-feed { padding-bottom: 26px; }
    .inv-head-panel { padding: 20px 20px 22px; border-radius: 22px; }
    .inv-head { gap: 12px; }
    .inv-head-text { font-size: 19px; }
    .inv-head-sub { font-size: 14.5px; }
    .inv-pill { font-size: 14px; padding: 9px 14px 9px 10px; gap: 8px; }
    .inv-pill .ic { width: 20px; height: 20px; }
    .inv-pill .ic svg { width: 12px; height: 12px; }
    .inv-row {
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    }
    .inv-stat { padding: 18px 18px 16px; border-radius: 20px; }
    .inv-stat .t { font-size: 14px; }
}
@media (max-width: 420px) {
    .inv-stats { grid-template-columns: 1fr; gap: 10px; }
    .inv-stats.is-three .inv-stat:nth-child(3) { grid-column: auto; }
}

/* -----------------------------------------------------------------------------
   3. PROBLEMS — асимметричная тройка вместо трёх равных колонок
   -----------------------------------------------------------------------------
   Первая карточка шире и выше остальных: «бешеная конкуренция» — главный страх,
   с которого человек начинает читать. Две другие смещены по вертикали, чтобы
   ряд не читался как таблица.
-------------------------------------------------------------------------------*/
.problems-grid {
    display: grid;
    grid-template-columns: 1.28fr 1fr 1fr;
    gap: 28px;
    align-items: start;
}
/* Вертикальный сдвиг («лесенка») убран. Он задумывался как способ уйти от
   таблицы из трёх колонок, но на странице, где все остальные блоки стоят
   ровно, читался как единственный несобранный элемент. Асимметрию держит
   разная ширина колонок, этого достаточно. */

/* Текст внутри карточек — по левому краю. Центрированный текст в карточке
   всегда читается медленнее: глазу негде поймать начало строки. */
.problems-grid .glass-card { text-align: left; }
.problems-grid .glass-card h3 { text-align: left; }
.problems-grid .glass-card p { text-align: left; max-width: 34ch; }

@media (max-width: 1023px) {
    .problems-grid { grid-template-columns: 1fr; gap: 20px; }
    .problems-grid > *:nth-child(2),
    .problems-grid > *:nth-child(3) { margin-top: 0; }
    .problems-grid .glass-card p { max-width: none; }
}

/* -----------------------------------------------------------------------------
   4. SAFETY — список гарантий без карточек
   -----------------------------------------------------------------------------
   Здесь стекло снято намеренно. Три обещания про безопасность не нуждаются в
   поднятии над фоном: это сопроводительный текст, а не самостоятельные объекты.
   Разделители держат ряд, иконки уходят влево к строке.
-------------------------------------------------------------------------------*/
.safety-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}
.safety-item {
    padding: 0 32px;
    border-left: 1px solid var(--line);
    text-align: left;
}
.safety-item:first-child { border-left: 0; padding-left: 0; }
/* Иконка внутри плашки: 56px без опоры выглядели как случайно висящие в
   воздухе картинки. Плашка задаёт им место и вес в строке. */
.safety-item .safety-ic-box {
    width: 76px;
    height: 76px;
    margin-bottom: 22px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--chip-bg);
    border: 1px solid var(--chip-line);
    box-shadow: inset 0 1px 0 var(--chip-inset);
}
.safety-item .safety-ic {
    width: 52px;
    height: 52px;
    display: block;
}
.safety-item h3 {
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    line-height: 1.3;
    margin-bottom: 12px;
    color: var(--text);
    letter-spacing: -0.01em;
}
.safety-item p {
    color: var(--muted);
    line-height: 1.7;
    font-size: 15px;
    max-width: 38ch;
}
@media (max-width: 900px) {
    .safety-row { grid-template-columns: 1fr; }
    .safety-item {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding: 26px 0 0;
    }
    .safety-item:first-child { border-top: 0; padding-top: 0; }
    .safety-item .safety-ic-box { width: 64px; height: 64px; margin-bottom: 16px; border-radius: 16px; }
    .safety-item .safety-ic { width: 44px; height: 44px; }
}

/* -----------------------------------------------------------------------------
   5. HOW IT WORKS — 1 крупный + 3 вместо сетки 2×2
   -----------------------------------------------------------------------------
   Моки шагов разного веса: первый — полноценный интерактив с вводом кода,
   четвёртый — короткий список. В сетке 2×2 они занимали одинаковую площадь,
   и самый содержательный шаг проигрывал. Первый шаг разворачивается на всю
   ширину: мок слева, текст справа. Остальные три идут компактным рядом.
-------------------------------------------------------------------------------*/
.hiw-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.hiw-lead {
    grid-column: 1 / -1;
    margin-bottom: 8px;
}
.hiw-lead .glass-card {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 40px;
    align-items: center;
    padding: 36px;
}
.hiw-lead .hiw-visual { margin-bottom: 0; }
.hiw-lead .hiw-copy { padding-right: 8px; }
.hiw-lead .hiw-copy h3 {
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    letter-spacing: -0.02em;
    line-height: 1.15;
}
/* Текст ведущего шага крупнее, чем в трёх маленьких: он держит целую половину
   широкой карточки и рядом с большим моком иначе читается как подпись. */
.hiw-lead .hiw-copy p {
    max-width: 46ch;
    font-size: clamp(15px, 1.25vw, 17px);
}

@media (max-width: 1023px) {
    .hiw-grid { grid-template-columns: 1fr; gap: 20px; }
    .hiw-lead .glass-card { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
    .hiw-lead .hiw-copy { padding-right: 0; }
}

/* -----------------------------------------------------------------------------
   7. ОБЩЕЕ — цифры, переносы, ритм отступов
-------------------------------------------------------------------------------*/
/* Все счётчики и денежные значения — табличными цифрами, чтобы не прыгали. */
.counter,
.stat-value,
.pricing-price,
.stage b,
.bt-stat {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Висячие строки в заголовках карточек. */
.glass-card h3,
.team-card h3,
.pricing-name { text-wrap: balance; }

/* Оптический ритм секции: низ чуть больше верха, иначе секция «висит».
   Было 88/104, между соседними секциями набегало 192px пустоты и страница
   читалась рыхлой. 64/76 держат воздух, но соседние блоки уже связаны. */
.rhythm-pad { padding-top: 64px; padding-bottom: 76px; }

@media (max-width: 767px) {
    .rhythm-pad { padding-top: 44px; padding-bottom: 52px; }
}

/* -----------------------------------------------------------------------------
   8. ДОСТУПНОСТЬ
   -----------------------------------------------------------------------------
   Reveal-анимация секций (.sa) сдвигает блоки на 50px — для людей с
   вестибулярными нарушениями это неприятно. Под reduced-motion всё показываем
   сразу, без сдвига.
-------------------------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
    .sa {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* -----------------------------------------------------------------------------
   9. PRICING — общая базовая линия у списка характеристик
   -----------------------------------------------------------------------------
   Список атрибутов был прижат вниз карточки (margin-top:auto). В колонке с
   кнопкой он поднимался выше, чем в двух соседних, и ряд читался как съехавший.
   Теперь список стартует на одной высоте во всех трёх колонках, а вниз
   прижимается кнопка — она и должна образовывать нижнюю линию.
-------------------------------------------------------------------------------*/
#pricing .pricing-attrs { margin-top: 26px; margin-bottom: 22px; }
/* auto прижимает кнопку к низу карточки; собственный нижний отступ у списка
   гарантирует зазор, когда прижимать уже нечего. */
#pricing .pricing-cta { margin-top: auto; }

/* Цена — табличными цифрами, чтобы «от 50 000» и «4 990» стояли ровно. */
#pricing .pricing-price {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* -----------------------------------------------------------------------------
   10. НАВИГАЦИЯ И ФОКУС
-------------------------------------------------------------------------------*/
/* Шапка фиксированная, поэтому цель якорной ссылки уезжала ей под низ:
   человек кликал «Как это работает» и попадал на середину заголовка. */
#hero-variant-b,
#stats, #problems, #results, #how-it-works,
#safety, #pricing, #faq, #team {
    scroll-margin-top: 96px;
}

/* Skip-link: не виден, пока на него не встал фокус с клавиатуры. */
.skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 200;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--menu-bg);
    color: var(--text);
    border: 1px solid var(--line2);
    font-size: 14px;
    text-decoration: none;
    transition: top .18s ease;
}
.skip-link:focus-visible {
    top: 12px;
    outline: 2px solid var(--purple);
    outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   11. TEAM — блок выровнен по заголовку, текст по левому краю
   -----------------------------------------------------------------------------
   Сетка была центрирована (margin: 0 auto), а заголовок секции стоит слева:
   левые края не совпадали и блок выглядел случайно поставленным. Ограничение
   ширины остаётся (портретные фото нельзя растягивать), убирается только
   центрирование.
-------------------------------------------------------------------------------*/
/* Текст слева, карточки справа: иначе справа от карточек оставалась пустая
   колонка почти в треть контейнера (карточки портретные и шире 860px их
   растягивать нельзя, лица режет cover). */
#team .team-layout {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto;
    gap: 48px;
    align-items: start;
}
#team .sec-head { margin-bottom: 0; position: sticky; top: 104px; }
#team .team-grid { margin: 0; }
#team .team-card-body,
#team .team-card .card-body { text-align: left; }
#team .team-card-body p { margin-left: 0; margin-right: 0; }

@media (max-width: 1100px) {
    #team .team-layout { grid-template-columns: 1fr; gap: 32px; }
    #team .sec-head { position: static; margin-bottom: 0; }
    #team .team-grid { margin-left: auto; margin-right: auto; }
}

/* -----------------------------------------------------------------------------
   12. ЗОНЫ НАЖАТИЯ
   -----------------------------------------------------------------------------
   Аудит показал несколько целей мельче 40px: бургер рисуется 24x18, кнопка темы
   38x38, ссылки в подвале высотой 21px. Пальцем в такое попадать тяжело
   (Apple HIG просит 44px). Внешний вид не меняем, расширяем только область
   нажатия: у иконок псевдоэлементом, у текстовых кнопок вертикальными полями.
-------------------------------------------------------------------------------*/
.burger { position: relative; }
.burger::after {
    content: "";
    position: absolute;
    /* 24x18 + поля до 44x44 */
    inset: -13px -10px;
}

.theme-btn { position: relative; }
.theme-btn::after {
    content: "";
    position: absolute;
    inset: -3px;
}

/* Логотип в шапке: 36px по высоте, чуть ниже комфортных 44. */
#site-header > div > a:first-child { min-height: 44px; }

/* Зона нажатия расширяется псевдоэлементом, а не высотой самой кнопки: иначе
   кольцо фокуса обводит всю 44-пиксельную область и получается вдвое выше
   текста. Так рамка облегает строку, а палец всё равно попадает. */
.site-footer__link,
.site-footer__social {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 3px 6px;
    margin: 0 -6px;
}
.site-footer__link::after,
.site-footer__social::after {
    content: "";
    position: absolute;
    inset: -12px -4px;
}

/* «читать далее» внутри отзыва: ссылка в потоке текста, поле сверху и снизу
   не должно раздвигать строку, поэтому расширяем область отрицательным полем. */
#results .bubble-more {
    padding: 10px 4px;
    margin: -10px -4px;
}

/* Крестик модалки отзывов: 38px по ширине не хватало до комфортного нажатия. */
.reviews-close {
    min-width: 44px;
    min-height: 44px;
}

/* Кнопка «наверх» фиксирована в 2rem от низа. На iPhone там живёт домашний
   индикатор, и кнопка попадает под него. Поднимаем на величину безопасной зоны. */
#scroll-top-btn {
    bottom: calc(var(--scroll-top-bottom, 2rem) + env(safe-area-inset-bottom, 0px));
}

/* На узком экране круг в 48px ложился поверх текста карточек и накрывал
   строку целиком. Уменьшаем до 40px и прижимаем ближе к краю: кнопка
   остаётся в комфортных 40px для пальца, но перекрывает заметно меньше. */
@media (max-width: 767px) {
    #scroll-top-btn {
        width: 40px;
        height: 40px;
        right: 1rem;
    }
    #scroll-top-btn svg { width: 17px; height: 17px; }
}

/* Строка-итог в карточках без кнопки: занимает то же место, что кнопка в
   тарифе Авроры, и несёт довод, которого нет в характеристиках. */
#pricing .pricing-note {
    margin-top: auto;
    padding-top: 4px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
    max-width: 30ch;
}

/* Список занимает всю ширину секции: ограничить его и прижать влево значило бы
   оставить справа пустую колонку. Длинными строками страдают только ответы,
   поэтому мера чтения задаётся тексту ответа, а не всему списку. */
#faq .faq-list { max-width: none; margin: 0; }
#faq .a-inner { max-width: 78ch; }

/* -----------------------------------------------------------------------------
   13. ТЕКСТ НА ГРАДИЕНТЕ
   -----------------------------------------------------------------------------
   Утилита .text-white в проекте переопределена на цвет текста темы: так
   работают тёмные заголовки в разметке. Но у кнопок, залитых фирменным
   градиентом, текст обязан оставаться белым в обеих темах, иначе в светлой
   «Вход» и «Кабинет» получают почти чёрную подпись на синем. Токен --on-grad
   для этого и заведён.
-------------------------------------------------------------------------------*/
/* .auth-btn покрывает и «Вход», и «Кабинет»: перечисление id пропускало
   вторую кнопку, и в светлой теме «Кабинет» выходил с тёмной подписью.
   Селектор с body обязателен: правило .text-white тоже идёт через body, и
   у одного класса специфичности против него не хватает. */
body .auth-btn,
#scroll-top-btn,
.cta-primary,
.hero-cta-main,
[style*="linear-gradient(135deg,var(--cyan),var(--purple))"] {
    color: var(--on-grad);
}
/* Аватары в отзывах — тоже кружки с заливкой градиентом. */
#results .review-card .ava { color: var(--on-grad); }

/* -----------------------------------------------------------------------------
   14. RESULTS — средний кейс разворачивается на две строки
   -----------------------------------------------------------------------------
   Три истории шли одной и той же строкой «текст | визуал | отзыв», и к третьей
   глаз читал по инерции. Средняя раскрывается: сверху заголовок и таймлайн,
   снизу отзыв во всю ширину. Ритм ломается ровно один раз, в середине секции,
   и сам отзыв виден целиком, а не обрезанным в узкой колонке.
-------------------------------------------------------------------------------*/
#results .res-block--feature {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    grid-template-areas:
        "text viz"
        "review review";
    align-items: center;
    gap: 26px 40px;
    padding: 34px 34px 30px;
}
#results .res-block--feature .part.text   { grid-area: text; }
#results .res-block--feature .part.viz    { grid-area: viz; }
#results .res-block--feature .part.review { grid-area: review; }
#results .res-block--feature .vdiv        { display: none; }
#results .res-block--feature .part.review .review-card {
    width: 100%;
    border-top: 1px solid var(--line);
    padding-top: 22px;
    border-radius: 0;
    background: none;
}
#results .res-block--feature .bt { font-size: clamp(1.35rem, 2.2vw, 1.9rem); }

@media (max-width: 900px) {
    #results .res-block--feature {
        grid-template-columns: 1fr;
        grid-template-areas: "text" "viz" "review";
        gap: 20px;
        padding: 24px 20px;
    }
}

/* -----------------------------------------------------------------------------
   15. ПОДВАЛ — ссылка на сообщество и аккуратный фокус
   -----------------------------------------------------------------------------
   Кнопки «Оферта» и «Политика» после закрытия модалки по Escape оставались с
   браузерной рамкой по всей высоте кликабельной области: она у них 44px ради
   пальца, и рамка получалась вдвое выше текста. Рисуем собственное кольцо по
   строке.
-------------------------------------------------------------------------------*/
.site-footer__social {
    gap: 7px;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s ease;
}
.site-footer__social:hover { color: var(--link); }
.site-footer__social svg { flex: none; opacity: .85; }

.site-footer__link,
.site-footer__social {
    border-radius: 8px;
    outline: none;
}
.site-footer__link:focus-visible,
.site-footer__social:focus-visible {
    /* Кольцо рисуем тенью, а не outline: тень повторяет скругление и не
       обводит всю 44-пиксельную зону нажатия прямоугольником. */
    box-shadow: 0 0 0 2px var(--bg0), 0 0 0 4px color-mix(in srgb, var(--purple) 60%, transparent);
    color: var(--text);
}

@media (max-width: 767px) {
    .site-footer__links { flex-wrap: wrap; justify-content: center; gap: 0.75rem 1rem; }
}

/* -----------------------------------------------------------------------------
   16. ИЛЛЮСТРАЦИИ «ПРОБЛЕМ» ПОД СВЕТЛУЮ ТЕМУ
   -----------------------------------------------------------------------------
   Исходные картинки нарисованы под тёмный фон и в светлой теме читались как
   три тёмных прямоугольника. Рядом лежат осветлённые версии (гамма поднимает
   тени, света почти не трогает, поэтому стеклянные объекты сохраняют рисунок).
   Показывается та, что подходит теме. Это подгонка существующих файлов, а не
   замена нарисованными заново.
-------------------------------------------------------------------------------*/
.img-light-only { display: none; }
[data-theme="light"] .img-dark-only { display: none; }
[data-theme="light"] .img-light-only { display: block; }

/* -----------------------------------------------------------------------------
   17. ТАРИФЫ — метки характеристик и карточка Авроры по темам
   -----------------------------------------------------------------------------
   Кружки перед «Скорость» и «Объём» были залиты белым с прозрачностью 8%:
   на тёмной карточке это читалось, на светлой кружок исчезал вместе со
   знаком. Берём цвет из токенов темы.
-------------------------------------------------------------------------------*/
#pricing .pricing-mk {
    background: var(--card2);
    border: 1px solid var(--line);
    color: var(--muted);
}
/* Внутри выделенной карточки фон градиентный, там нужна светлая метка. */
#pricing .pricing-card--win .pricing-mk {
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}

/* Карточка Авроры была залита одним градиентом в обеих темах и в светлой
   выглядела чужеродно: рядом белые карточки, а она в полную насыщенность.
   Первая попытка была осветлить градиент, но она провалила контраст: белый
   текст на выбеленном фоне давал 3.2 при норме 4.5 для мелких строк. Поэтому
   светлая версия не бледнее, а глубже и синее: бирюзовая часть, самая светлая
   и самая проблемная для белого текста, из градиента уходит. Контраст белого
   на этих стопах 4.8 и 6.9. */
[data-theme="light"] #pricing .pricing-card--win {
    background: linear-gradient(150deg, #3f6ae6, #4b46d6 55%, #5a3fd0);
    box-shadow: 0 16px 44px rgba(63, 106, 230, .32), inset 0 1px 0 rgba(255, 255, 255, .3);
}
/* Полупрозрачный белый ещё сильнее просаживал мелкие строки: на светлой теме
   подписи внутри карточки идут в полную непрозрачность. */
[data-theme="light"] #pricing .pricing-card--win .pricing-attr .lab,
[data-theme="light"] #pricing .pricing-card--win .pricing-price small {
    color: #fff;
}

/* -----------------------------------------------------------------------------
   18. КНОПКА ВХОДА / КАБИНЕТА
   -----------------------------------------------------------------------------
   В разметке лежат обе кнопки, видимую выбирает атрибут data-auth на <html>.
   Он ставится инлайновым скриптом в <head> по локальному флагу, то есть до
   первой отрисовки: вошедший человек больше не видит «Вход», который через
   секунду превращается в «Кабинет». Ответ /api/auth/me приходит позже и, если
   подсказка устарела, переключает атрибут.
-------------------------------------------------------------------------------*/
.auth-btn--in { display: none; }
[data-auth="in"] .auth-btn--out { display: none; }
[data-auth="in"] .auth-btn--in { display: inline-flex; }

/* Пока состояние неизвестно (скрипт не выполнился, JS выключен), показываем
   «Вход»: для гостя это верно, а вошедшего ссылка на вход всё равно приведёт
   в кабинет. */
html:not([data-auth]) .auth-btn--in { display: none; }

/* =============================================================================
   Фирменный скролл лендинга.

   Тот же ползунок, что на внутренних страницах (правило-близнец лежит в
   partials/header.html — у лендинга своя шапка, поэтому оно продублировано
   здесь; правя одно, правь и второе). Цвет — бренд с прозрачностью, а не в
   полную силу: сплошной фиолетовый на светлом фоне читался чернильной чертой.
   Стандартные scrollbar-width/-color — основной набор, ::-webkit-* — запасной
   для браузеров, где стандартных свойств ещё нет. Только pointer:fine: на
   тач-экранах полоса системная.
   ========================================================================== */
html{--sb-thumb:rgba(139,92,246,.58);--sb-thumb-h:rgba(139,92,246,.82)}
html[data-theme="light"]{--sb-thumb:rgba(109,74,199,.34);--sb-thumb-h:rgba(109,74,199,.54)}
@media(pointer:fine){
  html{scrollbar-width:thin;scrollbar-color:var(--sb-thumb) transparent}
  ::-webkit-scrollbar{width:12px;height:12px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-corner{background:transparent}
  ::-webkit-scrollbar-thumb{
    border-radius:99px;min-height:44px;
    border:4px solid transparent;background-clip:content-box;
    background-color:var(--sb-thumb)
  }
  ::-webkit-scrollbar-thumb:hover{background-color:var(--sb-thumb-h);border-width:3px}
}