/* =============================================================================
   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. STATS — полоса вместо четырёх стеклянных карточек
   -----------------------------------------------------------------------------
   Четыре одинаковые карточки с иконками отнимали внимание у хиро, стоящего
   прямо над ними. Цифры сами по себе достаточно сильные, коробки им не нужны:
   хватает волосяных разделителей и табличных цифр.
-------------------------------------------------------------------------------*/
.stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}
.stats-strip .stat-item {
    padding: 4px 28px;
    border-left: 1px solid var(--line);
}
.stats-strip .stat-item:first-child {
    border-left: 0;
    padding-left: 0;
}
.stats-strip .stat-label {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
    letter-spacing: 0.01em;
}
.stats-strip .stat-num {
    margin-top: 10px;
    font-family: var(--font-display);
    font-size: clamp(26px, 3.4vw, 42px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--text);
    /* Счётчики анимируются от нуля — без табличных цифр строка дёргается
       по ширине на каждом кадре. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
/* Две колонки: разделители остаются вертикальными между парами и
   горизонтальными между рядами. */
@media (max-width: 900px) and (min-width: 521px) {
    .stats-strip { grid-template-columns: repeat(2, 1fr); }
    .stats-strip .stat-item:nth-child(odd) { border-left: 0; padding-left: 0; }
    .stats-strip .stat-item:nth-child(-n+2) { padding-top: 0; }
    .stats-strip .stat-item:nth-child(n+3) { padding-top: 22px; border-top: 1px solid var(--line); }
}
/* Один столбец. Раньше этот блок соседствовал с правилом для двух колонок:
   на узком экране применялись оба, и у третьего с четвёртым пунктом
   складывались два разных верхних отступа. Ряд визуально «плыл» —
   расстояния между пунктами получались разной высоты. Диапазоны разведены. */
@media (max-width: 520px) {
    .stats-strip { grid-template-columns: 1fr; }
    .stats-strip .stat-item {
        border-left: 0;
        padding: 18px 0 0;
        border-top: 1px solid var(--line);
    }
    .stats-strip .stat-item:first-child { padding-top: 0; border-top: 0; }
}

/* -----------------------------------------------------------------------------
   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; }
}

/* -----------------------------------------------------------------------------
   6. HERO — плашка результата вынесена из первого экрана
   -----------------------------------------------------------------------------
   Внутри хиро было пять текстовых блоков: заголовок, лид, кнопка, подпись под
   кнопкой и плашка с аватарами и цифрами. Плашка переехала под хиро отдельной
   полосой — первый экран стал держать одно сообщение вместо трёх.
-------------------------------------------------------------------------------*/
.proof-band {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 16px;
    /* .hero-proof — inline-flex, поэтому центрируется флексом контейнера,
       а не auto-полями. */
    display: flex;
    justify-content: center;
}
.proof-band .hero-proof {
    /* Воздух между кнопкой и плашкой держала подпись «10 откликов бесплатно».
       Её убрали, и плашка подъехала к кнопке вплотную: два разных объекта
       читались как один блок. Отступ теперь свой, у полосы. */
    margin-top: 40px;
    max-width: 780px;
}
@media (max-width: 767px) {
    .proof-band .hero-proof { margin-top: 28px; }
}
@media (max-width: 640px) {
    .proof-band .hero-proof { width: 100%; }
}

/* -----------------------------------------------------------------------------
   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» и «от 2 900» стояли ровно. */
#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
   для этого и заведён.
-------------------------------------------------------------------------------*/
#regBtn,
#regBtnMobile,
#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;
}