@import url("./public-rate-tokens.css?v=1");

/* ============================================================
   MK-net rate constructor — design tokens
   ============================================================ */
:root {
    /* Legacy aliases preserve every existing consumer while new code uses --mk-rate-*. */
    --bg: var(--mk-rate-color-canvas);
    --paper: var(--mk-rate-color-surface);
    --paper-2: var(--mk-rate-color-surface-muted);
    --fg: var(--mk-rate-color-text);
    --fg-2: var(--mk-rate-color-text-strong);
    --muted: var(--mk-rate-color-text-muted);
    --muted-2: var(--mk-rate-color-text-subtle);
    --border: var(--mk-rate-color-border);
    --border-strong: var(--mk-rate-color-border-strong);

    --brand: var(--mk-rate-color-action-primary);
    --brand-600: var(--mk-rate-color-action-primary-hover);
    --brand-700: var(--mk-rate-color-action-primary-active);
    --brand-50: var(--mk-rate-color-action-soft);
    --brand-100: var(--mk-rate-color-action-soft-border);

    --accent: var(--mk-rate-color-status-success);
    --accent-50: var(--mk-rate-color-status-success-soft);
    --hit: var(--mk-rate-color-status-highlight);
    --hit-50: var(--mk-rate-color-status-highlight-soft);

    --shadow-l1: var(--mk-rate-shadow-subtle);
    --shadow-l2: var(--mk-rate-shadow-card);
    --shadow-l2-hover: var(--mk-rate-shadow-card-hover);
    --shadow-l3: var(--mk-rate-shadow-float);
    --glow-brand: var(--mk-rate-shadow-focus);
    --glow-brand-soft: var(--mk-rate-shadow-focus-soft);
    --glow-cta: var(--mk-rate-shadow-action);

    /* legacy aliases — не удаляем чтобы не править весь файл */
    --shadow-xs: var(--shadow-l1);
    --shadow-sm: var(--shadow-l2);
    --shadow-md: var(--shadow-l2-hover);
    --shadow-lg: var(--shadow-l3);

    --radius-card: var(--mk-rate-radius-card);
    --radius-lg: var(--mk-rate-radius-panel);
    --radius-input: var(--mk-rate-radius-control);
    --radius-pill: var(--mk-rate-radius-pill);

    --gutter: var(--mk-rate-layout-gutter);
    --ease: var(--mk-rate-motion-standard);

    font-size: 16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Запрещаем горизонтальный скролл и на html, и на body. Двойная защита:
   `clip` — современные браузеры (Chrome 90+, Firefox 81+, Safari 16+), не
   ломает `position: sticky`. Старые Safari / Android-стоковые browsers
   используют fallback `hidden` (определяется через каскад: если браузер
   не понимает `clip`, применит предыдущее значение). */
html, body {
    overflow-x: hidden;
    overflow-x: clip;
    max-width: 100%;
    width: 100%;
    min-width: 0;
}
/* Дополнительная защита для iOS Safari: на body он иногда игнорирует
   overflow-x: hidden, если внутри есть position: fixed-потомки. Дублируем
   клиппинг на основных секциях и main — каждая секция «обрезает» свои
   потомки, что бы внутри ни было. position: relative + isolation: isolate
   на body создаёт независимый stacking-context. */
body {
    position: relative;
    isolation: isolate;
}
main, section, footer {
    overflow-x: hidden;
    overflow-x: clip;
    max-width: 100%;
}
/* Body — flex-column. По умолчанию flex-дети получают min-width: auto, что
   позволяет им «распирать» родителя содержимым (например, длинной строкой
   текста или картинкой). Сбрасываем min-width на 0, чтобы каждый прямой
   ребёнок body сжимался до ширины родителя. */
body > * { min-width: 0; }
/* Плавный скролл по якорным ссылкам (с уважением к prefers-reduced-motion) */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Чтобы при прыжке к якорю sticky-шапка не закрывала контент */
#constructor, #quick-lead, #coverage, #advantages, #faq { scroll-margin-top: 90px; }

body {
    background: #ffffff;
    color: var(--fg);
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: inherit; }

/* ============================================================
   HEADER (бренд + телефон + Чат поддержки) — frosted-glass при скролле
   ============================================================ */
/* Tagline над шапкой — добавляется через ::before, чтобы не править HTML
   на 18 страницах. flex-basis: 100% превращает его в самостоятельную строку
   над брендом, навом и .header-end (за счёт flex-wrap: wrap на header). */
.site-header {
    width: 100%;
    background: rgba(255, 255, 255, .55);
    border-bottom: 1px solid transparent;
    padding: 32px var(--gutter) 22px;        /* +10px сверху на tagline ::before */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: none;
    transition: padding .25s var(--ease),
                background .25s var(--ease),
                border-color .25s var(--ease),
                box-shadow .3s var(--ease),
                backdrop-filter .25s var(--ease);
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
}
.site-header.is-scrolled {
    padding: 16px var(--gutter);
    background: rgba(255, 255, 255, .72);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom-color: rgba(228, 232, 240, .85);
    box-shadow: 0 4px 24px rgba(11, 21, 48, .04);
}
/* Tagline над шапкой — «Интернет провайдер MK-net».
   Показываем ТОЛЬКО на мобильных (≤720px). На десктопе скрыта — там и так
   полная навигация, надпись избыточна. */
.site-header::before {
    display: none;        /* desktop — спрятано */
}
@media (max-width: 720px) {
    .site-header::before {
        content: 'Интернет провайдер MK-net';
        display: block;
        position: absolute;
        top: 8px;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--muted);
        line-height: 1;
        pointer-events: none;
        transition: opacity .18s var(--ease);
    }
    .site-header.is-scrolled::before {
        opacity: 0;
    }
    .site-header.is-mobile-open::before {
        display: none;
    }
}
/* На десктопе сбрасываем top-padding обратно к исходному 22px (мы добавили
   32px в base .site-header под tagline, но десктопу место под tagline не нужно). */
@media (min-width: 721px) {
    .site-header { padding-top: 22px; }
}
.site-header .brand img {
    transition: width .25s var(--ease), height .25s var(--ease);
}
.site-header.is-scrolled .brand img {
    width: 38px; height: 38px;
}
.site-header .brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--fg);
    font-weight: 700;
    letter-spacing: -.01em;
}
.site-header .brand img { width: 48px; height: 48px; display: block; }
.site-header .brand .brand-text {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.05;
    gap: 3px;
}
.site-header .brand .brand-text strong {
    font-size: 19px;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -.015em;
}
.site-header .brand .brand-text small {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: .015em;
}
.header-end {
    display: flex;
    align-items: center;
    gap: 18px;
}

/* ====== Bell с уведомлениями ====== */
.bell-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.bell-btn {
    position: relative;
    width: 40px; height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--fg-2);
    cursor: pointer;
    transition: background .15s var(--ease), color .15s var(--ease);
}
.bell-btn:hover { background: var(--paper-2); color: var(--brand); }
.bell-btn.is-open { background: var(--brand-50); color: var(--brand); }
.bell-btn svg { width: 22px; height: 22px; }

.bell-dot {
    position: absolute;
    top: 8px; right: 9px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #e84a4a;
    box-shadow: 0 0 0 2px #ffffff;
    pointer-events: none;
}
.bell-dot::after {
    /* пульсирующее кольцо */
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: #e84a4a;
    opacity: .55;
    animation: bell-pulse 1.8s ease-out infinite;
}
@keyframes bell-pulse {
    0%   { transform: scale(.9);  opacity: .55; }
    70%  { transform: scale(2.1); opacity: 0; }
    100% { transform: scale(2.1); opacity: 0; }
}
.bell-btn.is-read .bell-dot { display: none; }
@media (prefers-reduced-motion: reduce) {
    .bell-dot::after { animation: none; }
}

/* Панель с уведомлениями */
.bell-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: -8px;
    min-width: 360px;
    max-width: 380px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-l3);
    z-index: 100;
    padding: 6px;
    animation: bell-panel-in .18s var(--ease);
}
.bell-panel[hidden] { display: none; }
.bell-panel::before {
    /* указатель-треугольник к кнопке */
    content: '';
    position: absolute;
    top: -7px; right: 18px;
    width: 12px; height: 12px;
    background: #ffffff;
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
    transform: rotate(45deg);
}
@keyframes bell-panel-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.bell-panel-head {
    padding: 10px 12px 6px;
    border-bottom: 1px solid var(--paper-2);
}
.bell-panel-head h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.bell-item {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 12px;
    align-items: start;
    padding: 12px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--fg);
    transition: background .15s var(--ease);
}
.bell-item + .bell-item { margin-top: 2px; border-top: 1px solid var(--paper-2); border-radius: 0 0 12px 12px; padding-top: 14px; }
.bell-item:hover { background: var(--brand-50); }
.bell-item-icon {
    width: 28px; height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--brand);
    flex-shrink: 0;
}
.bell-item-icon svg { width: 22px; height: 22px; }
.bell-item-icon-tg {
    color: #229ED9;
}
.bell-item-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.bell-item-text strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--fg);
    line-height: 1.3;
}
.bell-item-text p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--muted);
}
.bell-item-cta {
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brand);
}
.bell-item:hover .bell-item-cta { text-decoration: underline; }

/* На мобилке — занимает почти всю ширину viewport */
@media (max-width: 600px) {
    .bell-panel {
        position: fixed;
        top: 70px;
        right: 12px;
        left: 12px;
        min-width: 0;
        max-width: none;
    }
    .bell-panel::before { display: none; }
}
.site-header .nav {
    display: flex; gap: 22px; align-items: center;
}
.site-header .nav a {
    text-decoration: none; color: var(--muted);
    font-size: 14px; font-weight: 500;
    line-height: 1;
    transition: color .2s var(--ease);
}
/* Принудительная одинаковая высота для всех пунктов nav — anchor, dropdown div, button.
   Это гарантирует, что независимо от тонкостей контента (SVG разной высоты,
   текст с разной line-height) все элементы выровнены строго по одной линии. */
.site-header .nav > a,
.site-header .nav > .nav-dropdown,
.site-header .nav-dropdown-btn {
    display: inline-flex;
    align-items: center;
    height: 24px;
    line-height: 1;
}
.site-header .nav a:hover { color: var(--fg); }

/* Вертикальный разделитель между основными разделами и «Абонентам» */
.site-header .nav-sep {
    display: inline-block;
    width: 1px;
    height: 18px;
    background: var(--border);
    flex-shrink: 0;
}

/* Дропдаун «Абонентам» */
.nav-dropdown { position: relative; }
.nav-dropdown-btn {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 500;
    transition: color .2s var(--ease);
}
.nav-dropdown-btn:hover { color: var(--fg); }
.nav-dropdown-btn[aria-expanded="true"] { color: var(--fg); }
.nav-chevron {
    width: 12px; height: 12px;
    color: currentColor;
    flex-shrink: 0;
    transition: transform .2s var(--ease);
}
.nav-dropdown-btn[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
.nav-icon-users { color: #1e88c4; }

.nav-dropdown-panel {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 240px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-l2);
    padding: 6px;
    z-index: 90;
    animation: nav-dropdown-in .15s var(--ease);
}
.nav-dropdown-panel[hidden] { display: none; }
.nav-dropdown-panel::before {
    content: '';
    position: absolute;
    top: -7px; left: 50%;
    margin-left: -6px;
    width: 12px; height: 12px;
    background: #fff;
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
    transform: rotate(45deg);
}
.nav-dropdown-panel a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    margin: 2px 0;
    font-size: 14px;
    color: var(--fg);
    text-decoration: none;
    border-radius: 8px;
    white-space: nowrap;
    transition: background .15s var(--ease), color .15s var(--ease);
}
/* hover — мягкий серый, чтобы не «сливался» с активным пунктом */
.nav-dropdown-panel a:hover { background: #f1f4fa; color: var(--brand); }
/* активный пункт (текущая страница) — без подложки, только цвет и жирный текст */
.nav-dropdown-panel a.is-active:not(.is-primary) {
    color: var(--brand);
    font-weight: 700;
    background: transparent;
}
.dropdown-icon {
    width: 16px; height: 16px;
    flex-shrink: 0;
    color: #8A95AE;
    transition: color .15s var(--ease);
}
.nav-dropdown-panel a:hover .dropdown-icon,
.nav-dropdown-panel a.is-active:not(.is-primary) .dropdown-icon { color: var(--brand); }

/* «Личный кабинет» — оформлен как обычный пункт, но иконка цветная и в подложке */
.nav-dropdown-panel a.is-primary .dropdown-icon-wrap {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--brand-50);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s var(--ease);
}
.nav-dropdown-panel a.is-primary .dropdown-icon-wrap .dropdown-icon {
    width: 15px;
    height: 15px;
    color: var(--brand);
}
.nav-dropdown-panel a.is-primary:hover .dropdown-icon-wrap {
    background: var(--brand);
}
.nav-dropdown-panel a.is-primary:hover .dropdown-icon-wrap .dropdown-icon {
    color: #fff;
}
@keyframes nav-dropdown-in {
    from { opacity: 0; transform: translate(-50%, -6px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Бургер — показывается только когда меню перестаёт помещаться */
.burger-btn {
    display: none;
    width: 40px; height: 40px;
    background: transparent;
    border: 0;
    color: var(--fg);
    cursor: pointer;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    transition: background .15s var(--ease);
}
.burger-btn:hover { background: var(--paper-2); }
.burger-btn svg { width: 24px; height: 24px; }
.burger-btn .burger-close { display: none; }
.site-header.is-mobile-open .burger-btn .burger-open { display: none; }
.site-header.is-mobile-open .burger-btn .burger-close { display: block; }
.site-header .contact {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
    gap: 4px;
}
.site-header .contact-phone {
    display: inline-flex;
    align-items: center;
    color: var(--brand);
    text-decoration: none;
    font-weight: 700;
    font-size: 17px;
    white-space: nowrap;
    gap: 6px;
}
.site-header .contact-phone:hover { text-decoration: underline; }
/* SVG-иконка телефона — на десктопе скрыта (показываем номер текстом).
   На мобильном (≤720px) включается через медиа-запрос ниже. */
.site-header .contact-phone-icon { display: none; width: 20px; height: 20px; }
.site-header .contact-phone-text { display: inline; }

/* ====== Кнопка «Оплата» в шапке (mobile + tablet) ======
   На десктопе скрыта, потому что ссылка «Оплата» уже есть в основной
   нав-панели. На мобильном/планшете (≤1100px) появляется здесь — иначе её
   не достать без открытия бургер-меню.
   Стиль: tertiary — тонкая граница + текстовый цвет, без заливки и тени. */
.header-pay-btn {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    color: var(--fg-2);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    font: inherit;
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease), transform .12s var(--ease);
    box-shadow: none;
}
.header-pay-btn:hover {
    background: var(--paper-2);
    color: var(--fg);
    border-color: var(--border-strong);
}
.header-pay-btn:active { transform: scale(.97); }
.header-pay-btn .pay-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: .7; }
.site-header .contact-links {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.site-header .contact-link {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s var(--ease);
}
.site-header .contact-link:hover { color: var(--brand); }
/* Чат поддержки — Bitrix24 lazy-load в шапке */
.header-chat-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--brand-50);
    color: var(--brand);
    border: 1px solid rgba(25, 85, 246, .14);
    padding: 10px 16px;
    border-radius: 12px;
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    letter-spacing: -.005em;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease), box-shadow .25s var(--ease), color .2s var(--ease);
    box-shadow: none;
}
.header-chat-btn:hover {
    background: rgba(25, 85, 246, .12);
    border-color: rgba(25, 85, 246, .25);
    transform: translateY(-1px);
}
.header-chat-btn:active { transform: scale(.97); }
.header-chat-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(25, 85, 246, .25);
}
.header-chat-btn .chat-icon { width: 16px; height: 16px; flex-shrink: 0; }

/* Состояние «чат открыт» — приглушённая secondary-кнопка */
.header-chat-btn.is-open {
    background: var(--paper-2);
    color: var(--fg);
    box-shadow: none;
    filter: none;
}
.header-chat-btn.is-open:hover {
    background: var(--border);
    transform: translateY(0);
    box-shadow: none;
}

/* Бургер появляется когда основное меню перестаёт помещаться.
   Тогда же показываем кнопку «Оплата» в шапке.
   ============================================================
   Дизайн мобильной шторки (≤1100px):
   - Полноэкранный fullscreen-overlay (position: fixed, inset: 0).
   - Пункты — карточки-плитки (border-radius + hover background, без border-bottom
     «прилипающих к тексту»).
   - «Абонентам» работает как аккордеон: chevron поворачивается на 180°,
     подменю раскрывается inline ниже с отступом слева (indent).
   - Разделитель .nav-sep — горизонтальная полоса с воздухом по 12px сверху/снизу.
   - body.menu-open: position: fixed (lock scroll) + скрываем .summary-mobile
     (нижний sticky-бар конструктора тарифа — не нужен поверх меню).
   ============================================================ */
@media (max-width: 1100px) {
    .burger-btn { display: inline-flex; }
    .header-pay-btn { display: inline-flex; }

    /* Полноэкранное меню. z-index 40 < шапки (50), чтобы X-крестик в шапке
       оставался поверх и тапабельным.
       Анимация: display: none нельзя transition'ить, поэтому держим .nav
       всегда в DOM (display: flex) и плавно меняем opacity + transform +
       visibility. visibility ставится с delay = duration, чтобы клики не
       проваливались в скрытый элемент. */
    .site-header .nav {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        background: #ffffff;
        padding: 84px 14px 28px;
        z-index: 40;
        box-shadow: none;
        max-height: none;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        /* «Закрытое» состояние: невидимо, сдвинуто вверх + слегка scaled.
           Эта связка делает раскрытие «softer» — как будто полотно выезжает
           сверху с micro-bounce. */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-16px) scale(.985);
        transform-origin: top center;
        pointer-events: none;
        transition: opacity .32s cubic-bezier(.22, .61, .36, 1),
                    transform .38s cubic-bezier(.22, 1.2, .36, 1),
                    visibility 0s linear .38s;
        will-change: opacity, transform;
    }
    .site-header.is-mobile-open .nav {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
        pointer-events: auto;
        transition: opacity .28s cubic-bezier(.22, .61, .36, 1),
                    transform .42s cubic-bezier(.22, 1.2, .36, 1),
                    visibility 0s linear 0s;
    }
    /* Stagger-анимация пунктов меню — каждый пункт «вплывает» с задержкой,
       создаёт эффект «листинга». */
    .site-header.is-mobile-open .nav > * {
        animation: nav-item-in .32s var(--ease) both;
    }
    .site-header.is-mobile-open .nav > *:nth-child(1) { animation-delay: .04s; }
    .site-header.is-mobile-open .nav > *:nth-child(2) { animation-delay: .08s; }
    .site-header.is-mobile-open .nav > *:nth-child(3) { animation-delay: .12s; }
    .site-header.is-mobile-open .nav > *:nth-child(4) { animation-delay: .16s; }
    .site-header.is-mobile-open .nav > *:nth-child(5) { animation-delay: .20s; }
    .site-header.is-mobile-open .nav > *:nth-child(6) { animation-delay: .24s; }
    .site-header.is-mobile-open .nav > *:nth-child(7) { animation-delay: .28s; }
    @keyframes nav-item-in {
        from { opacity: 0; transform: translateX(-12px); }
        to   { opacity: 1; transform: translateX(0); }
    }

    /* Аккордеон-анимация подменю «Абонентам»: max-height + opacity transition.
       hidden-атрибут переопределяется через max-height: 0 + opacity: 0 вместо
       display: none — это позволяет анимировать переход. */
    .site-header.is-mobile-open .nav-dropdown-panel {
        max-height: 600px;        /* достаточно для всех пунктов */
        overflow: hidden !important;
        transition: max-height .35s var(--ease),
                    opacity .25s var(--ease),
                    padding .35s var(--ease);
    }
    .site-header.is-mobile-open .nav-dropdown-panel[hidden] {
        display: flex !important;  /* перебиваем hidden's display: none */
        max-height: 0 !important;
        opacity: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        pointer-events: none !important;
    }
    /* Stagger у items подменю — после раскрытия гармошки */
    .site-header.is-mobile-open .nav-dropdown-panel:not([hidden]) a {
        animation: nav-sub-item-in .28s var(--ease) both;
    }
    .site-header.is-mobile-open .nav-dropdown-panel:not([hidden]) a:nth-child(1) { animation-delay: .08s; }
    .site-header.is-mobile-open .nav-dropdown-panel:not([hidden]) a:nth-child(2) { animation-delay: .12s; }
    .site-header.is-mobile-open .nav-dropdown-panel:not([hidden]) a:nth-child(3) { animation-delay: .16s; }
    .site-header.is-mobile-open .nav-dropdown-panel:not([hidden]) a:nth-child(4) { animation-delay: .20s; }
    .site-header.is-mobile-open .nav-dropdown-panel:not([hidden]) a:nth-child(5) { animation-delay: .24s; }
    @keyframes nav-sub-item-in {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    /* Уважение к prefers-reduced-motion */
    @media (prefers-reduced-motion: reduce) {
        .site-header.is-mobile-open .nav > *,
        .site-header.is-mobile-open .nav-dropdown-panel:not([hidden]) a {
            animation: none;
        }
        .site-header.is-mobile-open .nav-dropdown-panel {
            transition: none;
        }
    }

    /* Пункты меню — карточки-плитки. Без border-bottom: разделение через gap + bg-hover. */
    .site-header.is-mobile-open .nav > a,
    .site-header.is-mobile-open .nav-dropdown-btn {
        width: 100%;
        padding: 14px 14px;
        font-size: 16.5px;
        font-weight: 500;
        color: var(--fg);
        background: transparent;
        border: 0;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 14px;
        height: auto;
        line-height: 1.3;
        text-align: left;
        text-decoration: none;
        transition: background .15s var(--ease), color .15s var(--ease);
    }
    .site-header.is-mobile-open .nav > a:hover,
    .site-header.is-mobile-open .nav > a:active,
    .site-header.is-mobile-open .nav-dropdown-btn:hover,
    .site-header.is-mobile-open .nav-dropdown-btn:active {
        background: var(--paper-2);
    }
    .site-header.is-mobile-open .nav .nav-icon {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        /* Цвет НЕ переопределяем — он приходит из .nav-icon-flat / .nav-icon-home
           и т.д. (см. ниже), чтобы каждая иконка была своего цвета. */
    }
    /* Цветовая палитра для иконок в мобильном меню — без подложек, чистый SVG. */
    .site-header.is-mobile-open .nav .nav-icon-flat     { color: #3b7eff; }   /* Для квартир — голубой */
    .site-header.is-mobile-open .nav .nav-icon-home     { color: #16a37b; }   /* Для домов — зелёный */
    .site-header.is-mobile-open .nav .nav-icon-business { color: #8a64d2; }   /* Для организаций — фиолетовый */
    .site-header.is-mobile-open .nav .nav-icon-users    { color: #f08d63; }   /* Абонентам — персиковый */
    .site-header.is-mobile-open .nav .nav-icon-pay      { color: #e85ba6; }   /* Оплата — розовый */
    /* Активный пункт (текущая страница) — лёгкая брендовая подложка. */
    .site-header.is-mobile-open .nav > a.is-active {
        background: var(--brand-50);
        color: var(--brand);
        font-weight: 600;
    }
    .site-header.is-mobile-open .nav > a.is-active .nav-icon { color: var(--brand); }
    /* Старая «inset-полоска» от прежнего дизайна — выключаем. */
    .site-header.is-mobile-open .nav > a.is-active::after { display: none; }
    .site-header.is-mobile-open .nav > a.is-active {
        box-shadow: none;  /* было: inset 3px 0 0 var(--brand) */
    }

    /* Разделитель: горизонтальная полоска с отступами сверху/снизу
       (раньше был nav-sep: display: none и подразделители прилипали к пунктам). */
    .site-header.is-mobile-open .nav-sep {
        display: block;
        width: calc(100% - 28px);
        height: 1px;
        background: var(--paper-2);
        margin: 12px 14px;
        flex: 0 0 auto;
    }

    /* Аккордеон «Абонентам» — обёртка занимает всю ширину, ВСЕГДА block-level. */
    .site-header.is-mobile-open .nav-dropdown {
        width: 100% !important;
        position: relative !important;
        display: block !important;
    }
    .site-header.is-mobile-open .nav-dropdown-btn {
        cursor: pointer;
        display: flex !important;        /* не inline-flex — block-level flex, чтобы подменю снизу было «правильно ниже» */
        width: 100% !important;
    }
    .site-header.is-mobile-open .nav-dropdown-btn > span:not(.nav-chevron) {
        flex: 0 1 auto;
    }
    .site-header.is-mobile-open .nav-dropdown-btn .nav-chevron {
        margin-left: auto;
        width: 16px;
        height: 16px;
        color: var(--muted);
        transition: transform .2s var(--ease);
        flex-shrink: 0;
    }
    /* Когда подменю открыто (aria-expanded=true) — chevron смотрит вверх */
    .site-header.is-mobile-open .nav-dropdown-btn[aria-expanded="true"] .nav-chevron {
        transform: rotate(180deg);
    }

    /* Подменю-аккордеон. КАЖДОЕ свойство — !important, потому что десктоп-стиль
       (position: absolute; left: 50%; transform: translateX(-50%)) очень
       специфичный и без force-override не сбрасывается на отдельных страницах
       (видимо, sw-cache или порядок загрузки CSS на старых страницах). */
    .site-header.is-mobile-open .nav-dropdown-panel {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        inset: auto !important;
        transform: none !important;
        animation: none !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 4px 0 8px 18px !important;     /* indent слева для визуальной иерархии */
        margin: 0 !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        clear: both !important;
        float: none !important;
        z-index: auto !important;
    }
    .site-header.is-mobile-open .nav-dropdown-panel:not([hidden]) {
        display: block !important;
    }
    .site-header.is-mobile-open .nav-dropdown-panel[hidden] {
        display: none !important;
    }
    .site-header.is-mobile-open .nav-dropdown-panel::before { display: none !important; }
    .site-header.is-mobile-open .nav-dropdown-panel a {
        display: flex !important;
        width: 100% !important;
        padding: 11px 14px !important;
        margin: 2px 0 !important;
        font-size: 15px;
        font-weight: 500;
        color: var(--muted);
        gap: 12px;
        border-radius: 10px;
        white-space: normal;
        text-align: left;
        background: transparent;
        text-decoration: none;
    }
    .site-header.is-mobile-open .nav-dropdown-panel a:hover {
        background: var(--paper-2) !important;
        color: var(--fg) !important;
    }
    .site-header.is-mobile-open .nav-dropdown-panel a.is-active:not(.is-primary) {
        background: var(--brand-50) !important;
        color: var(--brand) !important;
        font-weight: 600;
    }
    .site-header.is-mobile-open .nav-dropdown-panel a.is-active:not(.is-primary) .dropdown-icon {
        color: var(--brand);
    }
    .site-header.is-mobile-open .nav-dropdown-panel a .dropdown-icon {
        width: 20px;
        height: 20px;
        /* Цвет иконки — задаём через :nth-child ниже, чтобы каждая своя. */
    }
    /* Цвет иконок подменю — без серого override (#8A95AE), каждая своя:
       Личный кабинет / Цифровое ТВ / Как настроить / Полезные статьи / Новости компании. */
    .site-header.is-mobile-open .nav-dropdown-panel a:nth-child(1) .dropdown-icon { color: #3b7eff; }   /* Личный кабинет — синий */
    .site-header.is-mobile-open .nav-dropdown-panel a:nth-child(2) .dropdown-icon { color: #16a37b; }   /* Цифровое ТВ — зелёный */
    .site-header.is-mobile-open .nav-dropdown-panel a:nth-child(3) .dropdown-icon { color: #8a64d2; }   /* Как настроить — фиолетовый */
    .site-header.is-mobile-open .nav-dropdown-panel a:nth-child(4) .dropdown-icon { color: #ff7a4f; }   /* Полезные статьи — оранжевый */
    .site-header.is-mobile-open .nav-dropdown-panel a:nth-child(5) .dropdown-icon { color: #e0529c; }   /* Новости компании — розовый */

    /* «Личный кабинет» — БЕЗ брендовой подложки на мобиле (по запросу пользователя).
       На десктопе подложка остаётся (см. правила без .is-mobile-open выше). */
    .site-header.is-mobile-open .nav-dropdown-panel a.is-primary {
        color: var(--fg) !important;
    }
    .site-header.is-mobile-open .nav-dropdown-panel a.is-primary .dropdown-icon-wrap {
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        border-radius: 0 !important;
        padding: 0 !important;
        display: inline-flex;
    }
    .site-header.is-mobile-open .nav-dropdown-panel a.is-primary .dropdown-icon-wrap .dropdown-icon {
        width: 20px !important;
        height: 20px !important;
        /* Цвет — из :nth-child(1) выше (#3b7eff синий). */
    }
    .site-header.is-mobile-open .nav-dropdown-panel a.is-primary:hover .dropdown-icon-wrap {
        background: transparent !important;
    }

    /* Блокируем скролл body когда шторка открыта.
       НЕ используем `overflow: hidden` на body без position:fixed — это бы сломало
       sticky-шапку. Здесь position:fixed + явно фиксируем header (см. ниже). */
    body.menu-open {
        position: fixed;
        left: 0;
        right: 0;
        width: 100%;
        overflow: hidden;
    }
    /* Мобильный sticky-footer конструктора тарифа («Соберите тариф») —
       прячем поверх открытого меню, чтобы не светился сквозь. */
    body.menu-open .summary-mobile {
        display: none !important;
    }
    /* Bitrix24 floating widget — если был виден через .chat-visible — тоже прячем */
    body.menu-open .b24-widget-button-position-bottom-right {
        display: none !important;
    }

    /* ШАПКА во время открытого меню: фиксируем явно position: fixed (не sticky).
       Sticky не работает, когда body — position: fixed (нет scroll-context). */
    .site-header.is-mobile-open {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: #ffffff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: 1px solid var(--border);
        z-index: 50;
    }
    /* КРИТИЧНО: .nav (position: fixed; z-index: 40) — потомок .site-header.
       Создаёт собственный stacking-context. Без явного z-index у .brand и
       .header-end (которые static) они окажутся ПОД .nav и покроются её белым
       фоном — кнопка-X и логотип «исчезают». Вытаскиваем их вперёд через
       position: relative; z-index: 60 (выше nav's 40). */
    .site-header.is-mobile-open .brand,
    .site-header.is-mobile-open .header-end {
        position: relative;
        z-index: 60;
    }
    /* «Оплата» — тонко выделенная CTA, прижатая к НИЗУ шторки.
       Класс .nav-pay-cta проставляет JS (см. include.js → patchSiteHeader).
       margin-top: auto — flex-column свойство, прибивает элемент к концу
       вертикального flex-контейнера (т.е. ко дну меню). */
    .site-header.is-mobile-open .nav > a.nav-pay-cta {
        margin-top: auto;
        padding: 14px 16px !important;
        background: var(--brand-50);
        color: var(--brand) !important;
        font-weight: 600;
        font-size: 16px;
        justify-content: center;
        gap: 10px;
        border-radius: 12px;
        border: 1px solid rgba(25, 85, 246, .15);
        box-shadow: none;
        transition: background .15s var(--ease), border-color .15s var(--ease);
    }
    .site-header.is-mobile-open .nav > a.nav-pay-cta:hover,
    .site-header.is-mobile-open .nav > a.nav-pay-cta:active {
        background: rgba(25, 85, 246, .12) !important;
        border-color: rgba(25, 85, 246, .28);
        color: var(--brand) !important;
    }
    .site-header.is-mobile-open .nav > a.nav-pay-cta .nav-icon {
        color: var(--brand);
        width: 20px;
        height: 20px;
    }
    /* Когда пользователь УЖЕ на /pay/ — приглушаем (просто индикатор). */
    .site-header.is-mobile-open .nav > a.nav-pay-cta.is-active {
        background: var(--paper-2) !important;
        color: var(--fg) !important;
        border-color: var(--border);
        font-weight: 600;
    }
    .site-header.is-mobile-open .nav > a.nav-pay-cta.is-active .nav-icon {
        color: var(--muted);
    }
    .site-header.is-mobile-open .nav > a.nav-pay-cta.is-active::after { display: none; }
}

@media (max-width: 720px) {
    .header-end { gap: 8px; }
    /* На мобиле все управляющие элементы — круглые иконки 40×40 (как у bell-btn).
       Текстовые лейблы скрываются, лишь иконки. */
    .header-chat-btn .chat-btn-label { display: none; }
    .header-chat-btn { padding: 9px; border-radius: 50%; width: 40px; height: 40px; justify-content: center; }
    .header-chat-btn .chat-icon { width: 20px; height: 20px; }
    /* Телефон → икон-кнопка */
    .site-header .contact { display: contents; }                 /* убираем wrapper, чтобы .contact-phone жил прямо во flex-родителе */
    .site-header .contact-phone {
        width: 40px; height: 40px;
        border-radius: 50%;
        background: transparent;
        justify-content: center;
        padding: 0;
        gap: 0;
        transition: background .15s var(--ease), color .15s var(--ease);
    }
    .site-header .contact-phone:hover { background: var(--paper-2); text-decoration: none; }
    .site-header .contact-phone-icon { display: block; }
    .site-header .contact-phone-text { display: none; }
    .site-header .contact-links { display: none; }
    /* «Оплатить» — компактнее (иконка + короткий текст) */
    .header-pay-btn { padding: 8px 12px; font-size: 13px; }
}
@media (max-width: 380px) {
    /* Совсем узкие экраны: «Оплатить» теряет текст, остаётся карточка-иконка */
    .header-pay-btn { padding: 9px; }
    .header-pay-btn .pay-btn-label { display: none; }
    .header-end { gap: 6px; }
}

/* (Бывший блок «inset-полоска для .is-active» удалён — новый дизайн использует
   мягкую брендовую подложку прямо в селекторе .nav > a.is-active выше.) */

/* === Bitrix24 widget — скрыт по умолчанию, показываем по клику нашей кнопки.
   Прячем ТОЛЬКО плавающую кнопку (внешний контейнер). Внутренности и попапы
   (consent-диалог «Принимаю / Не принимаю», окно чата) — НЕ трогаем: иначе
   при display:block !important Bitrix24 их позиционирование ломается. */
.b24-widget-button-position-bottom-right {
    display: none !important;
}
body.chat-visible .b24-widget-button-position-bottom-right {
    display: block !important;
}
@media (max-width: 540px) {
    /* «MK-net Провайдер» скрываем заранее — иначе при наличии Оплатить +
       4-х иконок (bell/phone/chat/burger) шапка не помещается. */
    .site-header .brand .brand-text { display: none; }
}
@media (max-width: 480px) {
    .site-header { padding: 26px var(--gutter) 14px; }   /* +12px сверху на tagline */
    .site-header.is-scrolled { padding: 12px var(--gutter); }
    .site-header .brand img { width: 40px; height: 40px; }
    .site-header.is-scrolled .brand img { width: 34px; height: 34px; }
    .header-end { gap: 10px; }
    .site-header .contact-links { display: none; }
}

/* ============================================================
   PAGE LAYOUT
   ============================================================ */
.wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}
main {
    padding: clamp(48px, 7vw, 96px) 0 clamp(48px, 7vw, 96px);
}
.page-head {
    margin: 0 0 28px;
}
.page-head .kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    background: #ffffff;
    border: 1px solid var(--border);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
}
.page-head .kicker .dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
    animation: pulse 2.4s ease-in-out infinite;
}
/* На мобиле — менее «пилюлеподобные» надзаголовки:
   радиус скругления меньше, точка перед текстом скрыта.
   Раннинг-строки (.home-marquee-pulse) сохраняют свои пульсы — они трогаются
   ниже отдельно (этих правил их не касаются). */
@media (max-width: 720px) {
    .page-head .kicker { border-radius: 8px; padding: 5px 10px; gap: 6px; }
    .page-head .kicker .dot { display: none; }
}

/* Цветная иконка раздела в надзаголовке (рендерится JS-ом в include.js).
   На десктопе скрыта (там надзаголовок и так пилюлевидный, иконка избыточна). */
.kicker-icon {
    display: none;
}
.kicker-icon svg { display: block; }
@media (max-width: 720px) {
    .kicker-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px; height: 22px;
        flex-shrink: 0;
        background: transparent;       /* без подложки — только сам цветной значок */
    }
    .kicker-icon svg { width: 22px; height: 22px; }
    .kicker-icon-flat     { color: #3b7eff; }   /* квартиры */
    .kicker-icon-home     { color: #16a37b; }   /* частный сектор */
    .kicker-icon-business { color: #8a64d2; }   /* юр лица */
}
.page-head .kicker-accent {
    color: var(--brand);
    font-weight: 800;
}
.page-head h1, .page-head h2 {
    margin: 14px 0 6px;
    font-size: clamp(26px, 3.2vw, 38px);
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--fg);
}

/* ============================================================
   HERO (первый экран — над конструктором)
   ============================================================ */
.hero {
    position: relative;
    padding: clamp(56px, 8vw, 110px) 0 clamp(88px, 11vw, 160px);
    background: #ffffff;
}
.hero-wrap {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(24px, 4vw, 64px);
    align-items: center;
}
@media (max-width: 980px) {
    .hero-wrap { grid-template-columns: 1fr; gap: 24px; }
    .hero-illust { display: none; }
}

/* === Надзаголовок-pill с анимацией городов === */
.hero-cities {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 22px;
    padding: 7px 16px 7px 14px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.2;
}
.hero-cities-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--brand);
    animation: pulse 2.4s ease-in-out infinite;
    flex-shrink: 0;
}
.hero-cities-text {
    white-space: normal;
}
.hero-cities-text strong {
    color: var(--brand);
    font-weight: 800;
}
/* На мобиле — менее «пилюлеподобный» надзаголовок городов: радиус меньше,
   пульсирующая точка скрыта. Бегущие строки (.home-marquee-pulse) — НЕ
   трогаются, у них своя сущность и пульсация остаётся. */
@media (max-width: 720px) {
    .hero-cities {
        border-radius: 8px;
        padding: 6px 12px;
        gap: 6px;
    }
    .hero-cities-dot { display: none; }
}

/* === H1 — массивный с градиентом на слове === */
.hero-title {
    margin: 0 0 26px;
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(32px, 5.2vw, 64px);
    font-weight: 900;
    letter-spacing: -.025em;
    line-height: 1.05;
    text-transform: uppercase;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    padding-right: .15em; /* запас под последний глиф при background-clip:text */

    /* Медленное переливание: сиреневый ↔ тёмно-синий */
    background: linear-gradient(
        90deg,
        #1a2456 0%,
        #443a86 30%,
        #9b87da 50%,
        #443a86 70%,
        #1a2456 100%
    );
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: hero-title-shift 14s linear infinite;
}
@keyframes hero-title-shift {
    0%   { background-position: 0% 50%; }
    100% { background-position: -220% 50%; }
}
@media (max-width: 600px) {
    .hero-title { font-size: clamp(30px, 8vw, 48px); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-title { animation: none; background-position: 30% 50%; }
}

/* === Список преимуществ === */
.hero-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.hero-bullets li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.5;
    color: var(--fg-2);
}
.hero-bullets li::before {
    content: '—';
    color: var(--brand);
    font-weight: 700;
    flex-shrink: 0;
}
.hero-bullets li strong {
    color: var(--fg);
    font-weight: 700;
}

/* === CTA + дисклеймер === */
.hero-cta {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
    width: 100%;
}
.hero-cta-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    width: 100%;
    max-width: 680px;
}
@media (max-width: 720px) {
    .hero-cta-buttons { grid-template-columns: 1fr; }
}

/* Базовая кнопка-карточка — одна строка: иконка + заголовок + стрелка */
.hero-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    border-radius: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
    text-align: left;
    border: 1.5px solid transparent;
    font: inherit;
}
.hero-cta-btn:hover { transform: translateY(-2px); }
.hero-cta-btn-icon {
    width: 20px; height: 20px;
    flex-shrink: 0;
}
.hero-cta-btn-title {
    flex: 1;
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
    white-space: nowrap;
}
.hero-cta-btn-arrow {
    width: 18px; height: 18px;
    flex-shrink: 0;
    transition: transform .2s var(--ease);
}
.hero-cta-btn:hover .hero-cta-btn-arrow { transform: translateX(4px); }

/* Primary — «Оставить заявку»: фирменный градиент, белый текст */
.hero-cta-btn-primary {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 100%);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(25,85,246,.15), 0 10px 28px rgba(25,85,246,.28), 0 20px 50px rgba(25,85,246,.18);
}
.hero-cta-btn-primary:hover {
    filter: brightness(1.05);
    box-shadow: 0 2px 4px rgba(25,85,246,.20), 0 14px 36px rgba(25,85,246,.32), 0 24px 60px rgba(25,85,246,.22);
}

/* Secondary — «Собрать тариф»: белый фон, брендовый акцент */
.hero-cta-btn-secondary {
    background: #ffffff;
    color: #0B1530;
    border-color: #d8e3ff;
    box-shadow: 0 1px 2px rgba(11,21,48,.04), 0 4px 14px rgba(11,21,48,.06);
}
.hero-cta-btn-secondary:hover {
    border-color: var(--brand);
    box-shadow: 0 2px 4px rgba(11,21,48,.06), 0 8px 22px rgba(25,85,246,.14);
}
.hero-cta-btn-secondary .hero-cta-btn-icon,
.hero-cta-btn-secondary .hero-cta-btn-arrow { color: var(--brand); }

.hero-fineprint {
    margin: 0;
    font-size: 12.5px;
    color: var(--muted);
    max-width: 42ch;
    line-height: 1.5;
}

/* === Иллюстрация === */
.hero-illust {
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-illust img {
    width: 100%;
    height: auto;
    max-width: 680px;
    display: block;
}
@media (max-width: 980px) {
    .hero-illust { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-cities-stack > span { animation: none; opacity: 1; }
    .hero-cities-stack > span:not(:first-child) { display: none; }
}
.page-head .lead {
    margin: 0;
    font-size: 17px;
    color: var(--muted);
    max-width: 720px;
}

/* ============================================================
   LAYOUT 65 / 35
   ============================================================ */
.layout {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}
.layout > * { min-width: 0; }
@media (max-width: 980px) {
    .layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* ============================================================
   STEP HERO IMAGE (только в шаге 1, по ширине карточки)
   ============================================================ */
.step-hero {
    margin: -26px -26px 22px;
    background: #eaf0ff;
    border-top-left-radius: var(--radius-card);
    border-top-right-radius: var(--radius-card);
    overflow: hidden;
    line-height: 0;
}
.step-hero img {
    display: block;
    width: 100%;
    height: auto;
}

/* ============================================================
   STEP (карточка-шаг)
   ============================================================ */
.step {
    background: linear-gradient(180deg, #fff 0%, #fcfdff 100%);
    border: 1px solid #e7ecf5;
    border-radius: var(--radius-card);
    padding: 26px;
    box-shadow: var(--shadow-l2);
    margin-bottom: 18px;
    /* Отступ для scrollIntoView — чтобы заголовок шага не залезал под sticky-шапку */
    scroll-margin-top: 96px;
    transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}
@media (max-width: 720px) {
    .step { scroll-margin-top: 76px; }
}
.step.is-active { border-color: #d8e3ff; }
.step.attention {
    animation: step-attention .9s var(--ease) 1;
}
@keyframes step-attention {
    0%   { box-shadow: var(--shadow-l2); }
    35%  { box-shadow: 0 0 0 6px rgba(25, 85, 246, .18), var(--shadow-l2-hover); border-color: var(--brand); }
    100% { box-shadow: var(--shadow-l2); }
}
.step:not(.is-visible) { display: none; }
.step.is-visible {
    animation: step-reveal .35s var(--ease) both;
}
@keyframes step-reveal {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.step.is-active { box-shadow: var(--shadow-sm); }
.step.is-locked .step-body { opacity: .55; pointer-events: none; }

.step-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.step-num {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--brand-50);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    transition: background .2s var(--ease), color .2s var(--ease);
}
.step.is-done .step-num {
    background: var(--accent);
    color: #fff;
}
.step-title {
    flex: 1;
    min-width: 0;
}
.step-title h2 {
    margin: 0 0 2px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.005em;
    color: var(--fg);
}
.step-title p {
    margin: 0;
    color: var(--muted);
    font-size: 13.5px;
}
.step-summary {
    color: var(--muted);
    font-size: 13.5px;
    text-align: right;
    min-width: 0;
}
@media (max-width: 600px) {
    .step-summary {
        font-size: 12px;
        max-width: 50%;
        line-height: 1.3;
    }
}
.step-summary strong {
    color: var(--fg);
    font-weight: 600;
}

/* Подзаголовок подгруппы внутри шага (например, «Wi-Fi роутер» и «IPTV-приставка») */
.subgroup-title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.options + .subgroup-title {
    margin-top: 22px;
}

/* ============================================================
   OPTIONS GRID
   ============================================================ */
.options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.options.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.options.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) {
    .options.cols-3, .options.cols-2 { grid-template-columns: 1fr; }
}

.option {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 18px 16px;
    background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
    border: 1.5px solid #e7ecf5;
    border-radius: 16px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: transform .18s var(--ease), border-color .2s var(--ease),
                box-shadow .25s var(--ease), background .2s var(--ease);
    min-height: 100%;
    box-shadow: var(--shadow-l1);
    overflow: hidden;
}
/* Компактные карточки тарифов/опций на мобиле — меньше padding, меньше радиус,
   плотнее текст. Кнопка «Выбрать» внизу тоже компактнее. */
@media (max-width: 600px) {
    .step {
        padding: 16px 14px;
        margin-bottom: 12px;
        border-radius: 18px;
    }
    .step-head { gap: 10px; margin-bottom: 12px; }
    .step-num { width: 28px; height: 28px; font-size: 13px; }
    .step-title h2 { font-size: 16.5px; }
    .step-title p { font-size: 12.5px; }
    .options { gap: 8px; }
    .option {
        padding: 12px 14px 12px;
        border-radius: 14px;
        gap: 4px;
    }
    .option-name { font-size: 14.5px; }
    .option-sub { font-size: 12.5px; line-height: 1.35; }
    .option-price { font-size: 14.5px; padding-top: 6px; }
    .option-price small { font-size: 11.5px; }
    .option-pick { padding-top: 10px; }
    .option-pick::before {
        padding: 8px 12px;
        font-size: 12.5px;
        border-radius: 9px;
    }
}
.option::before {
    /* лёгкий highlight сверху, чтобы карточка «дышала» */
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse 60% 40% at 50% -10%, rgba(25, 85, 246, .04), transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s var(--ease);
}
.option:hover {
    transform: translateY(-3px);
    border-color: #d0dcf5;
    box-shadow: var(--shadow-l2-hover);
}
.option:hover::before { opacity: 1; }
.option:active { transform: scale(.985); }
.option.is-selected {
    border-color: var(--brand);
    background: linear-gradient(180deg, #f3f7ff 0%, #fff 100%);
    box-shadow: var(--glow-brand);
    transform: translateY(-2px);
}
.option.is-selected::before {
    opacity: 1;
    background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(25, 85, 246, .12), transparent 70%);
}
/* «ХИТ» — выделить даже без выбора, средний уровень контраста */
.option:has(.badge-hit):not(.is-selected) {
    background: linear-gradient(180deg, #fafcff 0%, #fff 100%);
    border-color: #d8e3ff;
    box-shadow: var(--shadow-l2);
}
.option.is-selected .option-check { opacity: 1; transform: scale(1); }
.option-name {
    font-weight: 700;
    font-size: 15.5px;
    color: var(--fg);
    letter-spacing: -.005em;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.option-sub {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.4;
    /* Описание тарифа растягивается на всё свободное место по высоте — так
       цена и кнопка «Выбрать» оказываются у нижнего края карточки и
       выровнены между разными карточками в ряду. */
    flex: 1 1 auto;
}
.option-price {
    padding-top: 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--fg);
    white-space: nowrap;
}

/* === Кнопка «Выбрать» / «Выбрано» в самом низу карточки === */
.option-pick {
    margin-top: auto;
    padding-top: 14px;
    /* визуально это «кнопка», но фактически — span внутри карточки:
       button.option у роутера/IP/приставки, div.option у тарифа */
}
.option-pick::before {
    content: 'Выбрать';
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    background: #ffffff;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--fg-2);
    line-height: 1.2;
    transition: background .2s var(--ease), color .2s var(--ease),
                border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.option:hover .option-pick::before {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--brand-50);
}
.option.is-selected .option-pick::before {
    content: '✓  Выбрано';
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(25, 85, 246, .15), 0 6px 18px rgba(25, 85, 246, .22);
}
.option-price small {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--muted);
}
.option-price.is-free { color: var(--accent); }

/* Шаг 1 «Скорость интернета» — список перков (что входит в&nbsp;тариф) */
.option-perks {
    list-style: none;
    padding: 0;
    margin: 6px 0 4px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12.5px;
    color: var(--fg-2);
    line-height: 1.35;
}
.option-perks li {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.option-perks li::before {
    content: '';
    width: 5px; height: 5px;
    background: var(--accent);
    border-radius: 50%;
    flex-shrink: 0;
    transform: translateY(-2px);
}
[data-step="tariff"] .option-sub {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.4;
}

/* Шаг 1 «Выберите тариф» — цена крупнее (×1.5), жирнее, monthly emphasis */
[data-step="tariff"] .option-price {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.02em;
    padding-top: 14px;
    line-height: 1;
    background: linear-gradient(180deg, var(--fg) 0%, var(--fg-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
[data-step="tariff"] .option.is-selected .option-price {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-700) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}
[data-step="tariff"] .option-price small {
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    -webkit-text-fill-color: var(--muted);
    margin-left: 2px;
    letter-spacing: 0;
}
.option-extra {
    font-size: 12px;
    color: var(--muted);
}
/* ===== Конструктор: табы тарифа и переключатель ТВ-сервиса ===== */
.tariff-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 14px;
    background: #F0F3F8;
    border-radius: 14px;
}
.tariff-tab {
    flex: 1;
    padding: 10px 12px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.tariff-tab.is-active {
    background: #ffffff;
    color: var(--brand);
    box-shadow: 0 1px 3px rgba(11, 21, 48, .12);
}
.tariff-services {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    margin-bottom: 14px;
    border: 1.5px solid #E5EAF3;
    border-radius: 999px;
}
.tariff-services[hidden] { display: none; }
.tariff-service {
    padding: 6px 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.tariff-service.is-active {
    background: var(--brand);
    color: #ffffff;
}
.tariff-tab:focus-visible,
.tariff-service:focus-visible,
.option:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
.step-note {
    margin: -4px 0 12px;
    font-size: 13px;
    color: var(--muted);
}
.option .option-extra { display: block; margin-top: 4px; }

/* === Карточка тарифа: растянутая радиокнопка + строка онлайн-кинотеатра ===
   Карточка тарифа — div.option; выбор — прозрачная .option-hit на всю
   карточку, «что это?» лежит поверх неё (кнопку в кнопку вкладывать нельзя). */
.option-hit {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    font: inherit;
    cursor: pointer;
}
/* Базовое кольцо фокуса — на самой .option-hit; браузеры с :has() (см. ниже)
   переносят его на всю карточку и здесь его гасят. Без этого фолбэк
   (Firefox ESR 115, Safari < 15.4, где :has() не поддерживается) остаётся
   вовсе без индикатора фокуса — регресс WCAG 2.4.7. */
.option-hit:focus-visible { outline: 2px solid var(--brand); outline-offset: -3px; }
@supports selector(:has(*)) {
    .option-hit:focus-visible { outline: none; }
    .option:has(.option-hit:focus-visible) {
        outline: 2px solid var(--brand);
        outline-offset: 2px;
    }
}
/* Строка кинотеатра забирает свободную высоту вместо описания: остаётся
   под «скорость · каналы», а цена и «Выбрать» — у нижнего края. */
.option:has(.option-addon) .option-sub { flex: 0 0 auto; }
.option-addon {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--fg);
}
.option-addon > svg {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    color: var(--brand);
}
.option-addon-text {
    min-width: 0;
    overflow-wrap: anywhere;
}
.option-addon-info {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 0;
    border-radius: 999px;
    background: var(--brand-50);
    color: var(--brand);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    vertical-align: 1px;
    margin-left: 2px;
    /* Пилюля раздувает строчный бокс — без отрицательного margin-block
       иконка кинотеатра съезжает на ~3.5px вверх, когда пилюля делит
       первую строку с текстом (узкие карточки на телефоне). */
    margin-block: -2px;
    cursor: pointer;
    transition: background .15s var(--ease), color .15s var(--ease);
}
/* Область нажатия пилюли больше её видимого размера (иначе ~21px — ниже
   44px-рекомендации), но не крупнее самой карточки: псевдоэлемент уже
   позиционирован (z-index:2 как у .option-addon-info) и лежит выше .option-hit. */
.option-addon-info::after {
    content: '';
    position: absolute;
    inset: -6px -4px;
    border-radius: inherit;
}
.option-addon-info svg { width: 12px; height: 12px; flex: none; }
.option-addon-info:hover,
.option-addon-info[aria-expanded="true"] {
    background: var(--brand);
    color: #fff;
}
.option-addon-info:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
/* Нажатие на «что это?» не «вдавливает» карточку, как выбор тарифа. */
.option:has(.option-addon-info:active):not(.is-selected),
.option:has(.option-channels:active):not(.is-selected) { transform: translateY(-3px); }
/* «+280 каналов» у тарифов «Смотрёшки»: кнопка-ссылка поверх .option-hit, открывает список каналов. */
.option-channels {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--brand);
    white-space: nowrap;
    text-decoration: underline dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    cursor: pointer;
}
.option-channels::after {
    content: '';
    position: absolute;
    inset: -6px -4px;
}
.option-channels:hover { text-decoration-style: solid; }
.option-channels:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 4px;
}

/* === Поповер «что это?» (верхний слой; без Popover API — fixed над шапкой) === */
.addon-popover {
    position: fixed;
    inset: auto;
    margin: 0;
    z-index: 70;
    width: min(320px, calc(100vw - 32px));
    padding: 14px 16px 12px;
    overflow: visible;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    color: var(--fg-2);
    box-shadow: var(--shadow-l3);
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
}
.addon-popover:not([data-placed]) { visibility: hidden; }
.addon-popover::before {
    content: '';
    position: absolute;
    left: calc(var(--arrow-x, 50%) - 6px);
    width: 12px;
    height: 12px;
    background: #fff;
    border: 1px solid var(--border);
    transform: rotate(45deg);
}
.addon-popover[data-side="bottom"]::before { top: -7px; border-right: 0; border-bottom: 0; }
.addon-popover[data-side="top"]::before { bottom: -7px; border-left: 0; border-top: 0; }
/* Клампинг мог сдвинуть поповер так, что стрелке некуда указывать — без
   top/bottom и display её псевдоэлемент остаётся на статической позиции
   и рисуется поверх заголовка. */
.addon-popover[data-side="none"]::before { display: none; }
.addon-popover-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
/* На сильном zoom (200–400%) поповер целиком между шапкой и плашкой может не
   влезать — тогда высоту ограничивает тело (заголовок и крестик остаются на
   месте, текст скроллится). --addon-body-max выставляет placeAddonPopover(),
   none — когда места достаточно и тело растёт свободно. */
.addon-popover-body {
    max-height: var(--addon-body-max, none);
    overflow: auto;
}
.addon-popover-title {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--fg);
}
.addon-age {
    flex: none;
    padding: 0 4px;
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--muted);
}
.addon-popover-close {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin: -4px -6px -4px auto;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted-2);
    cursor: pointer;
}
.addon-popover-close svg { width: 16px; height: 16px; }
.addon-popover-close:hover { background: var(--paper-2); color: var(--fg); }
.addon-popover-close:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.addon-popover p { margin: 0 0 6px; }
.addon-popover .addon-popover-fine {
    margin: 8px 0 0;
    font-size: 11.5px;
    color: var(--muted-2);
}
@media (max-width: 600px) {
    .addon-popover { width: calc(100vw - 32px); }
}
@media (prefers-reduced-motion: no-preference) {
    .addon-popover[data-placed] { animation: addon-popover-in .16s var(--ease); }
}
@keyframes addon-popover-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}
@media (max-width: 600px) {
    .tariff-tab { font-size: 14px; padding: 9px 8px; }
}
.option-check {
    position: absolute;
    top: 12px; right: 12px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.option-check svg { width: 13px; height: 13px; stroke: #fff; stroke-width: 2.6; }

/* badge */
.badge-hit {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: var(--radius-pill);
    background: var(--hit-50);
    color: var(--hit);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.badge-best {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: var(--radius-pill);
    background: var(--brand-50);
    color: var(--brand);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ============================================================
   TOOLTIP
   ============================================================ */
.tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--paper-2);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    cursor: help;
    margin-left: 4px;
    transition: background .15s var(--ease), color .15s var(--ease);
    flex-shrink: 0;
}
.tip:hover { background: var(--brand-50); color: var(--brand); }
.tip[data-tip]::after,
.tip[data-tip]::before {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s var(--ease), transform .15s var(--ease);
    z-index: 200;
}
.tip[data-tip]::after {
    content: attr(data-tip);
    transform: translate(-50%, 4px);
    width: max-content;
    max-width: 240px;
    padding: 10px 12px;
    background: var(--paper);
    color: var(--fg);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    text-align: left;
    white-space: normal;
}
.tip[data-tip]::before {
    content: '';
    transform: translate(-50%, 4px);
    border: 6px solid transparent;
    border-top-color: var(--paper);
    margin-bottom: -2px;
    bottom: calc(100% + 4px);
    filter: drop-shadow(0 1px 0 var(--border));
}
.tip[data-tip]:hover::after,
.tip[data-tip]:hover::before,
.tip[data-tip]:focus::after,
.tip[data-tip]:focus::before {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ============================================================
   SUMMARY (sticky right)
   ============================================================ */
.summary {
    position: sticky;
    top: 90px;
    background: linear-gradient(180deg, #fff 0%, #fafcff 100%);
    border: 1px solid #dde7ff;
    border-radius: var(--radius-lg);
    padding: 26px;
    box-shadow: var(--shadow-l3);
    position: sticky;
    overflow: hidden;
}
.summary::before {
    /* мягкое свечение сверху */
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse 80% 30% at 50% 0%, rgba(25, 85, 246, .06), transparent 70%);
    pointer-events: none;
}
.summary > * { position: relative; z-index: 1; }
@media (max-width: 980px) {
    .summary { position: static; display: none; }
}

/* ============================================================
   MOBILE STICKY BAR (видна только на узких экранах)
   ============================================================ */
.summary-mobile {
    display: none;
}
@media (max-width: 980px) {
    .summary-mobile {
        display: flex;
        position: fixed;
        /* Воздушная плашка: отступы со всех сторон, скруглённые углы.
           Так в mobile Chrome/Safari при анимации URL-бара не видно «пустого»
           прямоугольника снизу — плашка сама окружена воздухом и выглядит
           как отдельная карточка, а не часть полноэкранного футера. */
        left: 12px;
        right: 12px;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        z-index: 60;
        padding: 11px 14px;
        background: rgba(255, 255, 255, .94);
        backdrop-filter: saturate(160%) blur(14px);
        -webkit-backdrop-filter: saturate(160%) blur(14px);
        border: 1px solid var(--border);
        border-radius: 16px;
        box-shadow: 0 1px 2px rgba(11, 21, 48, .04),
                    0 8px 24px rgba(11, 21, 48, .10),
                    0 20px 48px rgba(11, 21, 48, .06);
        align-items: center;
        gap: 12px;
    }
    main { padding-bottom: 110px; } /* запас под плашку (с учётом её bottom-offset) */
}
.sm-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.sm-price {
    font-size: 20px;
    font-weight: 800;
    color: var(--fg);
    letter-spacing: -.01em;
    white-space: nowrap;
    transition: color .25s var(--ease);
}
.sm-price.is-flash { color: var(--brand); }
.sm-price small {
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    margin-left: 2px;
}
.sm-sub {
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sm-cta {
    flex-shrink: 0;
    border: 0;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 100%);
    color: #fff;
    font: inherit; font-weight: 700; font-size: 14px;
    padding: 12px 18px;
    border-radius: 12px;
    cursor: pointer;
    transition: filter .2s var(--ease), transform .1s var(--ease), box-shadow .2s var(--ease);
    box-shadow: 0 1px 2px rgba(25, 85, 246, .12), 0 8px 22px rgba(25, 85, 246, .35);
    white-space: nowrap;
}
.sm-cta:hover { filter: brightness(1.06); }
.sm-cta:active { transform: scale(.97); }
.sm-cta:disabled,
.sm-cta.is-pseudo-disabled {
    background: var(--paper-2);
    color: var(--muted);
    box-shadow: none;
    filter: none;
    transform: none;
}
.sm-cta:disabled { cursor: not-allowed; }
/* «Соберите тариф» (тариф ещё не собран) — пастельно-синяя подложка вместо серой.
   Это всё ещё «secondary»-вариант кнопки (без brand-glow свечения), но яснее
   намекает, что это интерактивный элемент, а не disabled. */
.sm-cta.is-pseudo-disabled {
    cursor: pointer;
    background: var(--brand-50);
    color: var(--brand);
    border: 1px solid rgba(25, 85, 246, .18);
    font-weight: 600;
}
.sm-cta.is-pseudo-disabled:hover {
    background: rgba(25, 85, 246, .12);
    border-color: rgba(25, 85, 246, .28);
    color: var(--brand);
}
.summary-promo {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
}
.summary-promo .price {
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1;
    white-space: nowrap;
    background: linear-gradient(135deg, var(--accent) 0%, #14b67c 60%, #0aa168 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 4px 24px rgba(22, 163, 123, .15);
}
.summary-promo .price-strike {
    font-size: 17px;
    color: var(--muted);
    text-decoration: line-through;
    white-space: nowrap;
}
.summary-promo-sub {
    font-size: 13.5px;
    color: var(--accent);
    font-weight: 600;
    margin: 0 0 18px;
}
.summary-monthly {
    border-top: 1px dashed var(--border);
    padding-top: 16px;
    margin-bottom: 14px;
}
.summary-monthly-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}
.summary-monthly-row .label {
    color: var(--muted);
    font-size: 13.5px;
}
.summary-monthly-row .value {
    font-size: 22px;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -.01em;
    white-space: nowrap;
    transition: color .25s var(--ease);
}
.summary-monthly-row .value.is-flash { color: var(--brand); }
.summary-monthly-hint {
    margin: 0;
    color: var(--muted-2);
    font-size: 12.5px;
}

.summary-list {
    list-style: none;
    margin: 18px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.summary-list li {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    gap: 10px;
    align-items: baseline;
    font-size: 14px;
    color: var(--fg);
}
.summary-list li.is-empty { color: var(--muted-2); }
.summary-list .ic-bullet {
    color: var(--brand);
    font-size: 12px;
    line-height: 1.2;
}
.summary-list .li-name { color: var(--muted); }
.summary-list .li-name strong {
    color: var(--fg);
    font-weight: 600;
}
.summary-list .li-price {
    font-weight: 600;
    color: var(--fg);
    white-space: nowrap;
}
.summary-list .li-price.is-free { color: var(--accent); }

.summary-upfront {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 16px;
}
.summary-upfront-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}
.summary-upfront-row .label {
    color: var(--muted);
    font-size: 13.5px;
}
.summary-upfront-row .value {
    font-size: 18px;
    font-weight: 700;
    color: var(--fg);
    white-space: nowrap;
}
.summary-upfront-detail {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12.5px;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.summary-upfront-detail li {
    display: flex; justify-content: space-between; gap: 10px;
}

.btn-cta {
    position: relative;
    width: 100%;
    border: 0;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 100%);
    color: #fff;
    font: inherit;
    font-weight: 700;
    font-size: 16px;
    padding: 16px 22px;
    border-radius: 14px;
    cursor: pointer;
    transition: transform .12s var(--ease), box-shadow .25s var(--ease), filter .2s var(--ease);
    box-shadow: var(--glow-cta);
    letter-spacing: -.005em;
    overflow: hidden;
}
.btn-cta::before {
    /* highlight сверху */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,.15), transparent);
    pointer-events: none;
}
.btn-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-cta:active { transform: scale(.985) translateY(0); }
.btn-cta:disabled,
.btn-cta.is-pseudo-disabled {
    background: var(--paper-2);
    color: var(--muted);
    box-shadow: none;
    filter: none; transform: none;
}
.btn-cta:disabled { cursor: not-allowed; }
.btn-cta.is-pseudo-disabled { cursor: pointer; }
.btn-cta.is-pseudo-disabled:hover {
    background: var(--border);
    color: var(--fg);
    transform: translateY(-1px);
    filter: none;
}
.btn-cta:disabled::before,
.btn-cta.is-pseudo-disabled::before { display: none; }

.summary-foot {
    margin: 22px 0 0;
    text-align: center;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.5;
}

/* ============================================================
   BUSINESS PAGE (/business/) — стили под отдельную страницу B2B
   ============================================================ */
/* Активный раздел: брендовая подчёркивающая линия + цвет.
   font-weight НЕ меняем (оставляем 500) — иначе текст становится шире
   и соседние пункты прыгают при переключении. */
/* Только для верхнеуровневых ссылок (прямые дети .nav) — иначе подчёркивание
   и обнуление padding утекают на активный пункт внутри дропдауна «Абонентам». */
.site-header .nav > .is-active {
    color: var(--brand);
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin: 0;
    position: relative;
}
.site-header .nav > .is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 3px;
    background: var(--brand);
    border-radius: 2px 2px 0 0;
    /* View Transitions API: одно и то же имя в шапке на всех страницах →
       при переходе между страницами полоска плавно «переезжает». */
    view-transition-name: nav-active-underline;
}
.site-header .nav > .is-active:hover { color: var(--brand); }

/* Плавные кросс-страничные переходы в браузерах, поддерживающих
   View Transitions API (Chrome 126+, Edge 126+, Safari TP).
   В Firefox и старых браузерах работает обычная мгновенная смена страницы. */
@view-transition { navigation: auto; }
/* Длительность анимаций по умолчанию */
::view-transition-old(nav-active-underline),
::view-transition-new(nav-active-underline) {
    animation-duration: .35s;
    animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}

/* Иконки в nav-ссылках */
.site-header .nav a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.nav-icon {
    width: 16px; height: 16px;
    flex-shrink: 0;
    transition: color .15s var(--ease);
}
.nav-icon-flat      { color: #1955f6; }
.nav-icon-business  { color: #4d8cff; }
.nav-icon-home      { color: #16a37b; }
.nav-icon-about     { color: #9b7ad9; }
.nav-icon-contacts  { color: #ff7a4f; }
.nav-icon-cabinet   { color: #8b5cf6; }
.nav-icon-pay       { color: #f59e0b; }
.site-header .nav a:hover .nav-icon { filter: brightness(1.05); }

/* ============================================================
   HOME PAGE (/home/) — частный сектор; мягкий тонированный фон под цвет иллюстрации
   ============================================================ */
.page-home { background: #ffffff; }
.page-home .hero { background: #ffffff; }

.page-home .hero-wrap {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}
@media (max-width: 980px) {
    .page-home .hero-wrap { grid-template-columns: 1fr; }
    .page-home .hero-illust { display: none; }
}
.page-home .hero-title {
    font-size: clamp(24px, 3.6vw, 40px);
    letter-spacing: -.015em;
    line-height: 1.1;
    padding-right: .15em;
}
@media (max-width: 600px) {
    .page-home .hero-title { font-size: clamp(22px, 6vw, 30px); }
}
.page-home .hero-illust img { max-width: 540px; }
.page-home .hero-cta a.btn-cta {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
}

/* Intro */
.home-intro {
    background: transparent;
    padding: clamp(28px, 4vw, 56px) 0 clamp(20px, 3vw, 40px);
}
.home-intro-includes {
    margin-top: 22px;
    max-width: 720px;
    background: #ffffff;
    border: 1px solid #e7ecf5;
    border-radius: 16px;
    padding: 22px 26px;
    box-shadow: var(--shadow-l1);
}
.home-intro-includes h3 {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--fg);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.home-intro-includes ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14.5px;
    color: var(--fg-2);
}
.home-intro-includes li {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.home-intro-includes li::before {
    content: '';
    width: 6px; height: 6px;
    background: var(--accent);
    border-radius: 50%;
    flex-shrink: 0;
    transform: translateY(-2px);
}

/* ============================================================
   MARQUEE — бегущая строка с подключёнными населёнными пунктами
   ============================================================ */
.home-marquee-section {
    background: #ffffff;
    padding: clamp(24px, 3vw, 40px) 0 clamp(20px, 2.5vw, 32px);
    border-top: 1px solid #eef1f7;
    border-bottom: 1px solid #eef1f7;
}
.home-marquee-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: clamp(14px, 1.4vw, 18px);
}
.home-marquee-pulse {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #16a37b;
    flex-shrink: 0;
}
.home-marquee-pulse::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: rgba(22, 163, 123, .35);
    animation: home-marquee-pulse 2s ease-out infinite;
}
@keyframes home-marquee-pulse {
    0%   { transform: scale(.9); opacity: .55; }
    70%  { transform: scale(2.4); opacity: 0; }
    100% { transform: scale(2.4); opacity: 0; }
}
.home-marquee-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}
.home-marquee {
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.home-marquee-track {
    display: inline-flex;
    width: max-content;
    animation: home-marquee-scroll 45s linear infinite;
    will-change: transform;
}
.home-marquee-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-shrink: 0;
}
/* Пустой список (районы на главной ещё грузятся из каталога) держит высоту
   одной строки теми же метриками шрифта, что и пункт, — секция не прыгает. */
.home-marquee-list:empty::before { content: '\00a0'; }
.home-marquee-list li,
.home-marquee-list:empty::before {
    position: relative;
    padding: 0 32px;
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: clamp(18px, 1.8vw, 24px);
    font-weight: 700;
    color: #2A3656;
    letter-spacing: -.01em;
    white-space: nowrap;
    line-height: 1;
}
.home-marquee-list li::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand);
    opacity: .35;
}
@keyframes home-marquee-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .home-marquee-track { animation: none; }
    .home-marquee-list { flex-wrap: wrap; }
    .home-marquee {
        -webkit-mask-image: none;
                mask-image: none;
    }
    .home-marquee-pulse::after { animation: none; }
}

/* ============================================================
   TARIFFS — premium SaaS-style block для частного сектора
   ============================================================ */
.home-tariffs {
    position: relative;
    background: #F5F7FB;
    padding: clamp(56px, 7vw, 104px) 0 clamp(48px, 6vw, 88px);
    overflow: hidden;
}
.home-tariffs .section-head {
    text-align: left;
    margin-bottom: clamp(36px, 4.5vw, 60px);
}
.home-tariffs .section-head h2 { margin-left: 0; margin-right: 0; }
.home-tariffs .section-head p {
    margin-left: 0; margin-right: 0;
    font-size: 16px;
}
/* мягкое голубоватое свечение под рекомендуемой карточкой */
.home-tariffs::before {
    content: '';
    position: absolute;
    top: 28%;
    left: 50%;
    width: min(900px, 70%);
    height: 480px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(25, 85, 246, .10) 0%, rgba(25, 85, 246, 0) 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}
.home-tariffs > .wrap { position: relative; z-index: 1; }

.home-tariffs-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(18px, 1.6vw, 26px);
    align-items: stretch;
}
@media (max-width: 980px) { .home-tariffs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .home-tariffs-grid { grid-template-columns: 1fr; } }

/* ============================================================
   TARIFF CARD — полный редизайн (v.2)
   Композиция:
     [ ⚡  СЕМЕЙНЫЙ ]                  [Хит]
     100  Мбит/с
     ────                              ← accent stripe цвета тарифа
     Описание сценария…
     999 ₽ / мес
     ≈ 33 ₽ в день
     [ Выбрать                     ]
   - Иконка БЕЗ подложки — только цветной SVG
   - Тэг в одну строку с иконкой, того же цвета
   - Скорость — большая цифра, под ней «Мбит/с» меньшим муед-цветом
   - Accent-stripe: 4px×40px полоса цвета тарифа — визуально объединяет
     карточку через цветовой акцент
   - is-hit: brand-окантовка + soft glow + filled CTA
   ============================================================ */
.home-tariff {
    position: relative;
    background: #FFFFFF;
    border: 1px solid #E5EAF3;
    border-radius: 20px;
    padding: 26px 24px 22px;
    box-shadow:
        0 1px 2px rgba(11, 21, 48, .03),
        0 6px 18px rgba(11, 21, 48, .04);
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto 1fr auto auto auto;  /* usage = 1fr → CTA прижата к низу */
    grid-template-areas:
        "icon  tag"
        "speed speed"
        "usage usage"
        "price price"
        "perday perday"
        "cta   cta";
    column-gap: 10px;
    row-gap: 0;
    align-items: start;
    overflow: hidden;     /* для color-ribbon ::before на верху карточки */
    transition: transform .25s var(--ease),
                box-shadow .25s var(--ease),
                border-color .25s var(--ease);
}
.home-tariff-icon  { grid-area: icon; }
.home-tariff-tag   { grid-area: tag; align-self: center; }
.home-tariff-speed { grid-area: speed; }
.home-tariff-usage { grid-area: usage; }
.home-tariff-price { grid-area: price; }
.home-tariff-perday{ grid-area: perday; }
.home-tariff-cta   { grid-area: cta; }
/* Цветная «лента» по верху карточки — главный визуальный акцент тарифа. */
.home-tariff::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #E5EAF3;          /* fallback серый, перебивается per-tariff ниже */
    z-index: 1;
}
.home-tariff:has(.home-tariff-icon-basic)::before  { background: #4d8cff; }
.home-tariff:has(.home-tariff-icon-family)::before { background: #16a37b; }
.home-tariff:has(.home-tariff-icon-speed)::before  { background: #e08a0a; }
.home-tariff:has(.home-tariff-icon-max)::before    { background: #8b5cf6; }
.home-tariff:hover {
    transform: translateY(-3px);
    box-shadow:
        0 2px 4px rgba(11, 21, 48, .04),
        0 18px 36px rgba(11, 21, 48, .08);
    border-color: #D5DEEC;
}

/* Рекомендуемый («Хит») — мягкая brand-окантовка + soft glow.
   ВНУТРИ контента CTA-кнопка тоже усилена (filled). */
.home-tariff.is-hit {
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFCFF 100%);
    border-color: rgba(25, 85, 246, .35);
    box-shadow:
        0 2px 6px rgba(25, 85, 246, .07),
        0 14px 32px rgba(25, 85, 246, .12);
    z-index: 2;
}
.home-tariff.is-hit:hover {
    box-shadow:
        0 4px 10px rgba(25, 85, 246, .10),
        0 22px 44px rgba(25, 85, 246, .18);
}

/* Хит-бейдж в правом верхнем углу — brand-fill, чтобы был заметен */
.home-tariff-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--brand);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(25, 85, 246, .25);
    z-index: 2;
}

/* HEADER ROW: иконка + тэг — в одну строку. Без подложек, чистый цвет. */
.home-tariff-icon {
    display: inline-flex;
    align-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    flex-shrink: 0;
    transition: transform .25s var(--ease);
}
.home-tariff-icon svg {
    width: 28px;
    height: 28px;
    stroke-width: 1.8;
}
.home-tariff:hover .home-tariff-icon { transform: scale(1.08) rotate(-3deg); }

.home-tariff-tag {
    display: inline-flex;
    align-items: center;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0;
    /* color приходит per-tariff: см. ниже */
    color: var(--muted);
}

/* Wrap иконку+тэг в одну строку через flex: они идут как siblings,
   но визуально образуют одну «полосу» через `display: contents` на парент-обёртке.
   Поскольку HTML: <span class="icon"></span><span class="tag"></span>...,
   делаем оба inline-flex и тэг с margin-left. Они флоутируют по строке. */
.home-tariff-icon, .home-tariff-tag {
    vertical-align: middle;
}

/* Цвета по тарифам — применяются и к иконке, и к тэгу через :has() */
.home-tariff-icon-basic  { color: #4d8cff; }   /* светло-синий */
.home-tariff-icon-family { color: #16a37b; }   /* зелёный */
.home-tariff-icon-speed  { color: #f59e0b; }   /* янтарный */
.home-tariff-icon-max    { color: #8b5cf6; }   /* пурпурный */
.home-tariff:has(.home-tariff-icon-basic)  .home-tariff-tag { color: #4d8cff; }
.home-tariff:has(.home-tariff-icon-family) .home-tariff-tag { color: #16a37b; }
.home-tariff:has(.home-tariff-icon-speed)  .home-tariff-tag { color: #e08a0a; }
.home-tariff:has(.home-tariff-icon-max)    .home-tariff-tag { color: #8b5cf6; }

/* SPEED — большая цифра. Под ней идёт «Мбит/с» как сабтайтл. */
.home-tariff-speed {
    margin: 22px 0 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: inherit;
}
.home-tariff-speed-num {
    font-family: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1;
    color: var(--fg);
}
.home-tariff-speed-unit {
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
}

/* (Старый accent stripe через ::after удалён — заменён color-ribbon ::before
   на верху карточки выше. Это надёжнее: position не зависит от высоты внутренних
   элементов и работает идентично на любом размере.) */

/* Описание сценария */
.home-tariff-usage {
    margin: 22px 0 22px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
    min-height: 66px;
}
@media (max-width: 980px) { .home-tariff-usage { min-height: 0; } }

/* Цена */
.home-tariff-price {
    margin: 0 0 2px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 6px;
}
.home-tariff-price strong {
    font-family: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 34px;
    font-weight: 800;
    color: var(--fg);
    letter-spacing: -.02em;
    line-height: 1;
}
.home-tariff-period {
    font-size: 14px;
    color: var(--muted);
    font-weight: 500;
    white-space: nowrap;
}
.home-tariff-perday {
    margin: 4px 0 22px;
    color: var(--muted-2);
    font-size: 12px;
    font-weight: 500;
}

/* CTA — outline default. На is-hit заполняется brand. */
.home-tariff-cta {
    margin-top: auto;
    padding: 13px 18px;
    background: var(--brand-50);
    color: var(--brand);
    border: 1px solid rgba(25, 85, 246, .18);
    border-radius: 12px;
    font-weight: 600;
    font-size: 14.5px;
    text-decoration: none;
    text-align: center;
    transition: background .2s var(--ease), color .2s var(--ease),
                border-color .2s var(--ease), box-shadow .2s var(--ease),
                transform .15s var(--ease);
}
.home-tariff-cta:hover {
    background: var(--brand);
    color: #ffffff;
    border-color: var(--brand);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(25, 85, 246, .28);
}
/* На «Хит» тарифе CTA сразу заполнена — визуальный hint для выбора */
.home-tariff.is-hit .home-tariff-cta {
    background: var(--brand);
    color: #ffffff;
    border-color: var(--brand);
    box-shadow: 0 4px 14px rgba(25, 85, 246, .25);
}
.home-tariff.is-hit .home-tariff-cta:hover {
    background: var(--brand-600);
    border-color: var(--brand-600);
    box-shadow: 0 8px 22px rgba(25, 85, 246, .35);
}

@media (prefers-reduced-motion: reduce) {
    .home-tariff,
    .home-tariff-icon,
    .home-tariff-cta { transition: none; }
    .home-tariff:hover { transform: none; }
}

/* === Мобильная вариация (≤540px) === */
@media (max-width: 540px) {
    .home-tariffs-grid { gap: 12px; }
    .home-tariff {
        padding: 18px 18px 16px;
        border-radius: 16px;
        box-shadow: 0 1px 2px rgba(11, 21, 48, .03), 0 6px 14px rgba(11, 21, 48, .04);
    }
    .home-tariff-badge {
        top: 12px; right: 12px;
        font-size: 9px;
        padding: 3px 8px;
    }
    .home-tariff-icon { width: 26px; height: 26px; }
    .home-tariff-icon svg { width: 24px; height: 24px; }
    .home-tariff-tag {
        font-size: 11.5px;
    }
    .home-tariff-speed { margin-top: 14px; gap: 6px; }
    .home-tariff-speed-num { font-size: 32px; }
    .home-tariff-speed-unit { font-size: 13px; }
    .home-tariff-usage {
        margin: 16px 0 16px;
        font-size: 13px;
        line-height: 1.45;
    }
    .home-tariff-price strong { font-size: 26px; }
    .home-tariff-period { font-size: 13px; }
    .home-tariff-perday { margin: 3px 0 16px; font-size: 11px; }
    .home-tariff-cta {
        padding: 11px 16px;
        font-size: 14px;
        border-radius: 11px;
    }
}

/* === Компактная info-карточка под тарифами === */
.home-info-card {
    margin: clamp(28px, 3.5vw, 44px) auto 0;
    max-width: 920px;
    background: #ffffff;
    border: 1px solid #E5EAF3;
    border-radius: 20px;
    padding: clamp(22px, 2.8vw, 32px) clamp(22px, 3vw, 36px);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(18px, 2.4vw, 26px);
    align-items: start;
    box-shadow:
        0 1px 2px rgba(11, 21, 48, .04),
        0 8px 20px rgba(11, 21, 48, .04);
}
@media (max-width: 560px) {
    .home-info-card {
        grid-template-columns: 1fr;
        text-align: left;
    }
}
.home-info-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--brand-50);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.home-info-icon svg { width: 26px; height: 26px; }
.home-info-text h3 {
    margin: 0 0 8px;
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #0B1530;
    letter-spacing: -.005em;
    line-height: 1.3;
}
.home-info-lead {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #4A5575;
}
.home-info-bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}
.home-info-bullets li {
    position: relative;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.5;
    color: #6B7891;
}
.home-info-bullets li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 8px;
    width: 5px;
    height: 5px;
    background: var(--brand);
    border-radius: 50%;
    opacity: .85;
}
.home-info-bullets a {
    color: var(--brand);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px dashed rgba(25, 85, 246, .35);
    transition: border-color .15s var(--ease);
}
.home-info-bullets a:hover { border-color: var(--brand); }

/* Fiber advantages */
.fiber-advantages {
    background: #ffffff;
    padding: clamp(40px, 6vw, 80px) 0;
}
.fiber-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 22px);
}
@media (max-width: 1100px) { .fiber-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .fiber-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .fiber-grid { grid-template-columns: 1fr; gap: 10px; } }

.fiber-card {
    background: linear-gradient(180deg, #fff 0%, #fafbff 100%);
    border: 1px solid #eef1f7;
    border-radius: 18px;
    padding: 22px;
    box-shadow: var(--shadow-l1);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform .2s var(--ease), box-shadow .25s var(--ease);
}
.fiber-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-l2-hover); }
.fiber-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    flex-shrink: 0;
}
.fiber-icon svg { width: 40px; height: 40px; }
.fiber-card h3 {
    margin: 4px 0 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -.005em;
}
.fiber-card p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--muted);
}
/* анимации иконок: pulse / rotate / float */
.fiber-icon-speed    { color: #16a37b; animation: fiber-pulse 3.5s ease-in-out infinite; }
.fiber-icon-ping     { color: #4d8cff; animation: fiber-spin   18s linear infinite; }
.fiber-icon-services { color: #e85ba6; animation: fiber-float  4s   ease-in-out infinite; }
.fiber-icon-security { color: #f08d63; animation: fiber-pulse 3.5s  ease-in-out infinite; }
.fiber-icon-price    { color: #9b7ad9; animation: fiber-float  4s   ease-in-out infinite; }
@keyframes fiber-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}
@keyframes fiber-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}
@keyframes fiber-spin {
    from { transform: rotate(0); }
    to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .fiber-icon-speed, .fiber-icon-ping, .fiber-icon-services,
    .fiber-icon-security, .fiber-icon-price { animation: none; }
}

/* Компактные карточки на мобиле — в стиле .adv-card на главной:
   иконка слева, заголовок + текст справа. */
@media (max-width: 600px) {
    .fiber-card {
        display: grid;
        grid-template-columns: 30px 1fr;
        grid-template-areas:
            "icon title"
            "icon desc";
        column-gap: 20px;
        row-gap: 6px;
        padding: 16px 18px;
        border-radius: 16px;
        gap: 0;     /* gap внутри flex был для column-layout, в grid не нужен */
    }
    .fiber-card .fiber-icon {
        grid-area: icon;
        align-self: start;
        width: 28px;
        height: 28px;
        margin: 3px 0 0;
    }
    .fiber-card .fiber-icon svg { width: 28px; height: 28px; }
    .fiber-card h3 {
        grid-area: title;
        margin: 0;
        font-size: 15.5px;
        line-height: 1.25;
    }
    .fiber-card p {
        grid-area: desc;
        font-size: 13px;
        line-height: 1.5;
        margin: 0;
    }
}

/* Town CTA */
.town-cta-section {
    background: transparent;
    padding: clamp(28px, 4vw, 56px) 0 clamp(40px, 6vw, 80px);
}
.town-cta {
    background: #fdfdfd;
    border: 1px solid #eaeef6;
    border-radius: 24px;
    padding: clamp(24px, 3vw, 40px) clamp(24px, 4vw, 48px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(22px, 3vw, 48px);
    align-items: center;
    box-shadow: var(--shadow-l1);
    overflow: hidden;
}
@media (max-width: 800px) {
    .town-cta { grid-template-columns: 1fr; }
    .town-cta-illust { order: -1; max-width: 420px; margin: 0 auto; }
}
.town-cta-illust img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 540px;
    margin: 0 auto;
}
.town-cta h2 {
    margin: 0 0 10px;
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: clamp(22px, 2.4vw, 32px);
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--fg);
    line-height: 1.2;
}
.town-cta-text p {
    margin: 0 0 10px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--fg-2);
}
.town-cta-text p:last-of-type { margin-bottom: 18px; }
.town-cta-note { color: var(--muted) !important; }
.town-cta-btn {
    width: auto;
    text-decoration: none;
    white-space: nowrap;
    padding: 14px 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Home form section использует .biz-form-section + .biz-form — ничего не меняем */
.page-home .biz-form-section { background: transparent; }
.page-home .biz-form { background: #ffffff; }

/* Hero на B2B-странице — заголовок «Интернет для организаций» длиннее одного слова,
   шрифт меньше + текстовой колонке отдаём больше места */
.page-business .hero-wrap {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}
@media (max-width: 980px) {
    .page-business .hero-wrap { grid-template-columns: 1fr; }
    .page-business .hero-illust { display: none; }
}
.page-business .hero-title {
    font-size: clamp(28px, 5vw, 56px);
    letter-spacing: -.02em;
    line-height: 1.05;
}
@media (max-width: 600px) {
    .page-business .hero-title { font-size: clamp(26px, 7vw, 38px); }
}
.page-business .hero-illust img {
    max-width: 540px;
}
.page-business .hero-cta a.btn-cta {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
}

/* TRUST BAND — 4 числовых факта */
.trust {
    background: #f7f9fd;
    padding: clamp(28px, 4vw, 48px) 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.trust-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    text-align: center;
}
@media (max-width: 700px) {
    .trust-row { grid-template-columns: repeat(2, 1fr); }
}
.trust-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}
.trust-num {
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: 800;
    color: var(--brand);
    letter-spacing: -.015em;
    line-height: 1;
}
.trust-label {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.35;
    max-width: 18ch;
}
.trust-note {
    margin: clamp(20px, 3vw, 32px) auto 0;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
    max-width: 760px;
    line-height: 1.5;
}

/* TARIFFS — 4 карточки */
.biz-tariffs {
    background: #fff;
    padding: clamp(40px, 6vw, 80px) 0;
}
.biz-tariffs-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, 1.8vw, 20px);
}
@media (max-width: 980px) { .biz-tariffs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .biz-tariffs-grid { grid-template-columns: 1fr; } }

.biz-tariff {
    background: linear-gradient(180deg, #fff 0%, #fafbff 100%);
    border: 1px solid #eef1f7;
    border-radius: 20px;
    padding: 26px 22px 22px;
    box-shadow: var(--shadow-l1);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform .2s var(--ease), box-shadow .25s var(--ease), border-color .2s var(--ease);
}
.biz-tariff:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-l2-hover);
    border-color: #d8e3ff;
}
.biz-tariff h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.005em;
    color: var(--fg);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 1.5em;
}
.biz-tariff h3 .badge-hit { font-size: 10.5px; padding: 0 7px; height: 18px; }
.biz-tariff-place {
    margin: 0;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.4;
    min-height: 2.5em;
}
.biz-tariff-speed {
    margin-top: 4px;
    font-size: 26px;
    font-weight: 800;
    color: var(--fg);
    letter-spacing: -.02em;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-700) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.biz-tariff-price {
    font-size: 16px;
    color: var(--muted);
}
.biz-tariff-price strong {
    font-size: 20px;
    color: var(--fg);
    font-weight: 800;
}
.biz-tariff-cta {
    margin-top: auto;
    padding: 11px 16px;
    background: var(--brand-50);
    color: var(--brand);
    border: 1px solid rgba(25, 85, 246, .15);
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    text-align: center;
    transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.biz-tariff-cta:hover {
    background: rgba(25, 85, 246, .12);
    border-color: rgba(25, 85, 246, .3);
    color: var(--brand);
}

.biz-tariffs-note {
    margin: clamp(20px, 3vw, 32px) auto 0;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
    max-width: 720px;
    line-height: 1.5;
}

/* Компактные и лёгкие карточки тарифов организаций на мобиле. */
@media (max-width: 540px) {
    .biz-tariffs-grid { gap: 12px; }
    .biz-tariff {
        padding: 16px 18px 14px;
        border-radius: 18px;
        gap: 6px;
        box-shadow: 0 1px 2px rgba(11, 21, 48, .03), 0 6px 14px rgba(11, 21, 48, .04);
    }
    .biz-tariff h3 { font-size: 16.5px; font-weight: 700; min-height: 0; }
    .biz-tariff-place { font-size: 12px; min-height: 0; }
    .biz-tariff-speed { font-size: 22px; font-weight: 700; margin-top: 2px; }
    .biz-tariff-price { font-size: 14px; }
    .biz-tariff-price strong { font-size: 17px; font-weight: 700; }
    .biz-tariff-cta {
        padding: 10px 14px;
        font-size: 13px;
        border-radius: 10px;
        margin-top: 6px;
    }
}

/* EXTRAS — 4 услуги */
.biz-extras {
    background: #f7f9fd;
    padding: clamp(40px, 6vw, 80px) 0;
}
.biz-extras-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px);
}
@media (max-width: 980px) { .biz-extras-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .biz-extras-grid { grid-template-columns: 1fr; } }

.biz-extra-card {
    background: #fff;
    border: 1px solid #eef1f7;
    border-radius: 20px;
    padding: 22px;
    box-shadow: var(--shadow-l1);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform .2s var(--ease), box-shadow .25s var(--ease);
}
.biz-extra-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-l2-hover); }
.biz-extra-card h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--fg);
}
.biz-extra-card p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--muted);
}
.biz-extra-card .biz-extra-price {
    margin-top: auto;
    font-weight: 600;
    color: var(--fg);
}
/* Компактные карточки доп. услуг на мобиле — иконка слева, текст справа.
   .biz-extra-card использует те же классы иконок (.adv-icon), что и .adv-card,
   поэтому стилизуем аналогично. */
@media (max-width: 600px) {
    .biz-extras-grid { gap: 10px; }
    .biz-extra-card {
        display: grid;
        grid-template-columns: 30px 1fr;
        grid-template-areas:
            "icon title"
            "icon desc";
        column-gap: 20px;
        row-gap: 6px;
        padding: 16px 18px;
        border-radius: 16px;
        gap: 0;
    }
    .biz-extra-card .adv-icon {
        grid-area: icon;
        align-self: start;
        width: 28px;
        height: 28px;
        margin: 3px 0 0;
    }
    .biz-extra-card .adv-icon svg { width: 28px; height: 28px; }
    .biz-extra-card h3 {
        grid-area: title;
        font-size: 15.5px;
        line-height: 1.25;
    }
    .biz-extra-card p {
        grid-area: desc;
        font-size: 13px;
        line-height: 1.5;
    }
    .biz-extra-card .biz-extra-price { grid-area: auto / 2; }
}

/* PROCESS — 2 этапа + картинка справа */
.biz-process {
    background: #fff;
    padding: clamp(40px, 6vw, 80px) 0;
}
.biz-process-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 60px);
    align-items: center;
}
@media (max-width: 900px) {
    .biz-process-wrap { grid-template-columns: 1fr; }
    .biz-process-illust { order: -1; max-width: 360px; margin: 0 auto; }
}
.biz-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: bizstep;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.biz-steps li {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 16px;
    align-items: start;
}
.biz-steps-n {
    width: 44px; height: 44px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 100%);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(25, 85, 246, .22);
}
.biz-steps h3 {
    margin: 6px 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -.005em;
}
.biz-steps p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--muted);
}
.biz-process-illust img {
    width: 100%;
    max-width: 480px;
    height: auto;
    display: block;
    margin: 0 auto;
    /* картинка с почти-белым фоном; multiply сливает её с белой подложкой секции */
    mix-blend-mode: multiply;
}

/* COVERAGE */
.biz-coverage {
    background: #f7f9fd;
    padding: clamp(40px, 6vw, 80px) 0;
}
.biz-coverage-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px);
    margin-bottom: 18px;
}
@media (max-width: 800px) { .biz-coverage-grid { grid-template-columns: 1fr; } }
.biz-coverage-col {
    background: #fff;
    border: 1px solid #eef1f7;
    border-radius: 16px;
    padding: 22px;
    box-shadow: var(--shadow-l1);
}
.biz-coverage-col h3 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: var(--fg);
}
.biz-coverage-col p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--muted);
}
.biz-coverage-note {
    margin: 0;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
}
.biz-coverage-note a { color: var(--brand); font-weight: 600; }

/* FORM */
.biz-form-section {
    background: #fff;
    padding: clamp(40px, 6vw, 80px) 0;
}
/* Раскладка: форма слева, иллюстрация справа */
.biz-form-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
}
.biz-form-wrap .biz-form-illust {
    order: 2;
    /* смещаем картинку вниз на половину высоты section-head, чтобы её центр
       совпадал с центром самой формы, а не всей текстовой колонки */
    margin-top: clamp(40px, 6vw, 90px);
}
.biz-form-wrap .biz-form-text   { order: 1; min-width: 0; }
.biz-form-wrap .biz-form-text .biz-form { max-width: none; margin: 0; }
.biz-form-wrap .biz-form-text .biz-thanks { margin: 0; }
.biz-form-illust img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 520px;
    margin: 0 auto;
}
@media (max-width: 900px) {
    .biz-form-wrap { grid-template-columns: 1fr; gap: 12px; }
    .biz-form-wrap .biz-form-illust {
        max-width: 320px;
        margin: 0 auto;
        order: 0;
    }
}

.biz-form {
    max-width: 820px;
    margin: 0 auto;
    background: linear-gradient(180deg, #fff 0%, #fafbff 100%);
    border: 1px solid #eef1f7;
    border-radius: 22px;
    padding: 32px;
    box-shadow: var(--shadow-l2);
}
.biz-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 600px) { .biz-form-grid { grid-template-columns: 1fr; } }
.biz-form-grid .field-full { grid-column: 1 / -1; }
.biz-submit {
    width: 100%;
    margin-top: 8px;
}
.biz-thanks {
    max-width: 540px;
    margin: 0 auto;
    text-align: center;
    background: linear-gradient(180deg, #fff 0%, #f5f9ff 100%);
    border: 1px solid #d8e3ff;
    border-radius: 22px;
    padding: 36px 28px;
    box-shadow: var(--shadow-l2);
}
.biz-thanks .thanks-icon { margin: 0 auto 14px; }
.biz-thanks h3 { margin: 0 0 8px; font-size: 22px; font-weight: 800; }
.biz-thanks p { margin: 0; color: var(--muted); font-size: 15px; }

/* ============================================================
   AUDIENCES — две карточки (частный дом + бизнес)
   ============================================================ */
.audiences {
    background: #ffffff;
    padding: clamp(40px, 6vw, 80px) 0 clamp(48px, 7vw, 96px);
}
.audiences-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 2.5vw, 28px);
}
@media (max-width: 800px) {
    .audiences-grid { grid-template-columns: 1fr; }
}

.audience-card {
    position: relative;
    background: linear-gradient(180deg, #fff 0%, #fafbff 100%);
    border: 1px solid #eef1f7;
    border-radius: 22px;
    padding: 32px 30px 28px;
    box-shadow: var(--shadow-l1);
    transition: transform .2s var(--ease), box-shadow .25s var(--ease), border-color .2s var(--ease);
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
}
.audience-card::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 240px; height: 240px;
    background: radial-gradient(circle at 70% 30%, rgba(25, 85, 246, .06), transparent 60%);
    pointer-events: none;
}
.audience-card > * { position: relative; z-index: 1; }
.audience-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-l2-hover);
    border-color: #d8e3ff;
}
.audience-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    flex-shrink: 0;
}
.audience-icon svg { width: 44px; height: 44px; }
.audience-icon-private  { color: #16a37b; }
.audience-icon-business { color: var(--brand); }

.audience-card h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--fg);
}
.audience-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--muted);
}
.audience-bullets {
    list-style: none;
    padding: 0;
    margin: 4px 0 4px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 14px;
    color: var(--fg-2);
}
.audience-bullets li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    line-height: 1.4;
}
.audience-bullets li::before {
    content: '';
    width: 5px; height: 5px;
    background: var(--brand);
    border-radius: 50%;
    flex-shrink: 0;
    transform: translateY(-2px);
}

.audience-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 12px 18px;
    background: var(--brand);
    color: #fff;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14.5px;
    text-decoration: none;
    align-self: flex-start;
    transition: filter .15s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease);
    box-shadow: 0 1px 2px rgba(25, 85, 246, .15), 0 6px 18px rgba(25, 85, 246, .22);
}
.audience-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.audience-cta:active { transform: scale(.98); }
.audience-cta svg { width: 14px; height: 14px; }

/* Компактные карточки на мобиле — меньше воздуха, мельче шрифты, иконка слева от h3. */
@media (max-width: 600px) {
    .audience-card {
        padding: 18px 18px 16px;
        border-radius: 16px;
        gap: 10px;
    }
    .audience-card::before {
        width: 180px;
        height: 180px;
    }
    .audience-card h3 {
        font-size: 17px;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    /* Иконку «впихиваем» внутрь h3 через grid-перемещение
       (структурно остаётся как `<span class="audience-icon">` перед `<h3>`). */
    .audience-icon {
        width: 30px;
        height: 30px;
    }
    .audience-icon svg { width: 30px; height: 30px; }
    .audience-card p {
        font-size: 13.5px;
        line-height: 1.5;
    }
    .audience-bullets {
        font-size: 13px;
        gap: 5px;
        margin: 2px 0;
    }
    .audience-bullets li::before { width: 4px; height: 4px; }
    .audience-cta {
        padding: 11px 14px;
        font-size: 13.5px;
        gap: 6px;
    }
    .audience-cta svg { width: 12px; height: 12px; }
}

/* ============================================================
   ADVANTAGES — сетка 3×3 с цветными иконками
   ============================================================ */
.advantages {
    background: #ffffff;
    padding: clamp(40px, 6vw, 80px) 0 clamp(48px, 7vw, 96px);
}
.advantages-head {
    margin: 0 0 clamp(28px, 4vw, 48px);
}
.advantages-head h2 {
    margin: 0;
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--fg);
    max-width: 900px;
}
.advantages-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px);
}
@media (max-width: 980px) {
    .advantages-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .advantages-grid { grid-template-columns: 1fr; gap: 10px; }
}

.adv-card {
    background: linear-gradient(180deg, #fff 0%, #fafbff 100%);
    border: 1px solid #eef1f7;
    border-radius: 22px;
    padding: 28px 26px;
    box-shadow: var(--shadow-l1);
    transition: transform .2s var(--ease), box-shadow .25s var(--ease), border-color .2s var(--ease);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.adv-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-l2-hover);
    border-color: #dde7ff;
}
.adv-card h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.005em;
    color: var(--fg);
}
.adv-card p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--muted);
}

/* === Иконки преимуществ — без подложек, только цветной SVG === */
.adv-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    margin-bottom: 4px;
    flex-shrink: 0;
}
.adv-icon svg { width: 36px; height: 36px; }

/* Компактные карточки на мобиле: иконка слева, заголовок + текст справа.
   Так помещается в 1.5 раза больше карточек на экране без потери читаемости. */
@media (max-width: 600px) {
    .adv-card {
        display: grid;
        grid-template-columns: 30px 1fr;
        grid-template-areas:
            "icon title"
            "icon desc";
        column-gap: 20px;     /* воздух между иконкой и текстом */
        row-gap: 6px;          /* воздух между заголовком и описанием */
        padding: 16px 18px;    /* нормальные внутренние отступы */
        border-radius: 16px;
    }
    .adv-card .adv-icon {
        grid-area: icon;
        align-self: start;
        width: 28px;
        height: 28px;
        margin: 3px 0 0;       /* лёгкая поднастройка по baseline заголовка */
    }
    .adv-card .adv-icon svg { width: 28px; height: 28px; }
    .adv-card h3 {
        grid-area: title;
        font-size: 15.5px;
        line-height: 1.25;
        margin: 0;
    }
    .adv-card p {
        grid-area: desc;
        font-size: 13px;
        line-height: 1.5;
        margin: 0;
    }
}

/* Цвет = currentColor у SVG. Чистая визуальная семантика без рамок и теней. */
.adv-icon-emerald { color: #16a37b; }
.adv-icon-rose    { color: #f15a7d; }
.adv-icon-coral   { color: #ff7a4f; }
.adv-icon-peach   { color: #f08d63; }
.adv-icon-pink    { color: #e85ba6; }
.adv-icon-sky     { color: #2e9af0; }
.adv-icon-blue    { color: #3b7eff; }
.adv-icon-violet  { color: #8a64d2; }
/* Внутренние «подсветки» (например, белая галочка в щите) переопределяются inline-stroke в SVG */

/* ============================================================
   ОБЩЕЕ — заголовки секций
   ============================================================ */
.section-head {
    margin: 0 0 clamp(28px, 4vw, 48px);
}
.section-head h2 {
    margin: 0 0 6px;
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--fg);
    max-width: 900px;
}
.section-head p {
    margin: 0;
    color: var(--muted);
    font-size: 17px;
    max-width: 700px;
}

/* Header с CTA-кнопкой справа (используется в .reviews) */
.section-head-with-cta {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(16px, 2.5vw, 32px);
}
.section-head-with-cta .section-head-text { flex: 1; min-width: 0; }
@media (max-width: 720px) {
    .section-head-with-cta { flex-direction: column; align-items: flex-start; }
}

/* CTA «Оставить отзыв на Яндексе» */
.reviews-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: #ffffff;
    border: 1px solid #e5eaf3;
    border-radius: 14px;
    text-decoration: none;
    color: var(--fg);
    box-shadow: 0 1px 2px rgba(11,21,48,.04), 0 6px 16px rgba(11,21,48,.04);
    transition: transform .15s var(--ease), box-shadow .25s var(--ease), border-color .2s var(--ease);
    flex-shrink: 0;
}
.reviews-cta:hover {
    transform: translateY(-2px);
    border-color: #fcb1a0;
    box-shadow: 0 2px 4px rgba(252, 63, 29, .08), 0 12px 28px rgba(252, 63, 29, .14);
}
.reviews-cta-logo {
    width: 32px; height: 32px;
    flex-shrink: 0;
    background: #fc3f1d;
    color: #ffffff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-weight: 800;
    font-size: 17px;
    line-height: 1;
}
.reviews-cta-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.2;
}
.reviews-cta-text strong {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -.005em;
}
.reviews-cta-text small {
    font-size: 12px;
    color: var(--muted-2);
    font-weight: 500;
}
.reviews-cta-arrow {
    width: 16px; height: 16px;
    color: var(--muted-2);
    flex-shrink: 0;
    transition: color .15s var(--ease), transform .2s var(--ease);
}
.reviews-cta:hover .reviews-cta-arrow {
    color: #fc3f1d;
    transform: translate(2px, -2px);
}

/* ============================================================
   ОТЗЫВЫ — masonry-like сетка карточек
   ============================================================ */
.reviews {
    background: #ffffff;
    padding: clamp(40px, 6vw, 80px) 0 clamp(48px, 7vw, 96px);
}
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px);
}
@media (max-width: 980px) {
    .reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .reviews-grid { grid-template-columns: 1fr; }
}

.review-card {
    background: linear-gradient(180deg, #fff 0%, #fafbff 100%);
    border: 1px solid #eef1f7;
    border-radius: 18px;
    padding: 20px 22px 20px;
    box-shadow: var(--shadow-l1);
    transition: transform .2s var(--ease), box-shadow .25s var(--ease), border-color .2s var(--ease);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.review-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-l2-hover);
    border-color: #dde7ff;
}
.review-card .stars {
    color: #f5b50a;
    font-size: 15px;
    letter-spacing: .15em;
    line-height: 1;
}
.review-card blockquote {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--fg-2);
}

/* ====== Шапка карточки отзыва: аватар + имя + источник ====== */
.review-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--paper-2);
}
.review-author {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.review-author strong {
    color: var(--fg);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.25;
    letter-spacing: -.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.review-author-noavatar strong { font-size: 14px; }

/* Аватар — кружок с инициалом, мягкие пастельные палитры */
.review-avatar {
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    user-select: none;
}
.review-avatar-amber   { background: linear-gradient(135deg, #fff4d6 0%, #ffe7a8 100%); color: #b97307; }
.review-avatar-emerald { background: linear-gradient(135deg, #d6f5e8 0%, #a7e6c8 100%); color: #126b50; }
.review-avatar-blue    { background: linear-gradient(135deg, #dde7ff 0%, #b8cbff 100%); color: #1955f6; }
.review-avatar-rose    { background: linear-gradient(135deg, #ffe1ea 0%, #ffc1d3 100%); color: #c92e58; }
.review-avatar-purple  { background: linear-gradient(135deg, #ece4ff 0%, #cbb8f6 100%); color: #6432c2; }
.review-avatar-teal    { background: linear-gradient(135deg, #d0f0f0 0%, #9cdada 100%); color: #0c6b6b; }

/* Источник отзыва — мини-логотип платформы + текст */
.review-source {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--muted-2);
    font-weight: 500;
    letter-spacing: -.005em;
}
.review-source-logo {
    width: 14px; height: 14px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    border-radius: 3px;
    line-height: 1;
}
/* Яндекс — красная плашка с «Я» */
.review-source-logo-yandex {
    background: #fc3f1d;
    color: #ffffff;
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
}
/* МК-NET — брендовая плашка с «M» */
.review-source-logo-mknet {
    background: var(--brand);
    color: #ffffff;
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
}
/* Цвета текста источника — приглушённые, чтобы не отвлекали */
.review-source-google strong,
.review-source-yandex strong,
.review-source-mknet strong { color: var(--fg); }

/* ============================================================
   FAQ — accordion на native <details>
   ============================================================ */
.faq {
    background: #ffffff;
    padding: clamp(40px, 6vw, 80px) 0 clamp(48px, 7vw, 96px);
}
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 900px;
}

.faq-item {
    background: linear-gradient(180deg, #fff 0%, #fafbff 100%);
    border: 1px solid #eef1f7;
    border-radius: 16px;
    overflow: hidden;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.faq-item:hover { border-color: #d8e3ff; }
.faq-item[open] {
    border-color: #d0dcf5;
    box-shadow: var(--shadow-l1);
}
.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    font-size: 16px;
    font-weight: 600;
    color: var(--fg);
    letter-spacing: -.005em;
    user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '';
    flex-shrink: 0;
    width: 24px; height: 24px;
    background: var(--brand-50);
    color: var(--brand);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%231955f6' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 6px;
    transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.faq-item[open] summary::after {
    transform: rotate(180deg);
}
.faq-item summary:hover { color: var(--brand-600); }

.faq-answer {
    padding: 0 22px 18px;
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.55;
}
.faq-answer p { margin: 0 0 8px; }
.faq-answer p:last-child { margin-bottom: 0; }

/* ============================================================
   FOOTER (как у mknet.biz)
   ============================================================ */
.site-footer {
    background: #0b1530;
    color: #aab3c8;
    padding: 44px 0 28px;
    margin-top: 40px;
}
.site-footer a {
    color: inherit;
    text-decoration: none;
    transition: color .2s var(--ease);
}
.site-footer a:hover { color: #fff; }
.footer-cols {
    display: grid;
    grid-template-columns: 1.1fr 1.4fr 1fr;
    gap: 56px;
    margin-bottom: 32px;
    align-items: start;
}
@media (max-width: 980px) {
    .footer-cols { grid-template-columns: 1fr 1fr; gap: 32px; }
    .footer-col-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .footer-cols { grid-template-columns: 1fr; gap: 28px; }
}
.footer-logo {
    margin-bottom: 18px;
}
.footer-logo img { width: 56px; height: 56px; display: block; border-radius: 12px; }
.footer-about {
    font-size: 14px; line-height: 1.7; color: #aab3c8; margin: 0;
}
.footer-about strong { color: #fff; font-weight: 600; }

.footer-links {
    list-style: none; padding: 0; margin: 0 0 22px;
    display: flex; flex-direction: column; gap: 12px;
}
.footer-links a {
    color: #fff;
    font-size: 15px;
    font-weight: 400;
}
.footer-disclaimer {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: #6c7794;
}

.footer-col-contacts { display: flex; flex-direction: column; gap: 18px; }
.footer-row {
    display: flex; align-items: flex-start; gap: 12px;
}
.footer-icon {
    flex-shrink: 0;
    width: 22px; height: 22px;
    display: inline-flex;
    align-items: center; justify-content: center;
    color: #fff;
}
.footer-icon svg { width: 100%; height: 100%; }
.footer-row-body {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 14px;
    line-height: 1.4;
    color: #aab3c8;
}
.footer-row-body strong { color: #fff; font-weight: 600; font-size: 15px; }
.footer-phone {
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
    white-space: nowrap;
}
.footer-phone:hover { text-decoration-color: var(--brand); color: #fff; }

/* Адрес ведёт на Яндекс.Карты с меткой: у офиса есть посетители, и «где вы»
   должно открываться в один тап, а не копироваться руками. */
/* `.site-footer a` — селектор специфичнее одного класса, поэтому адресу нужен
   такой же вес, иначе он остаётся серым и без подчёркивания. */
.site-footer .footer-address {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(255, 255, 255, .35);
    transition: text-decoration-color .15s ease;
}
.site-footer .footer-address:hover { text-decoration-color: var(--brand); }

.footer-social {
    display: flex; gap: 10px; margin-top: 4px;
}
.footer-social a {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.22);
    color: #fff;
    display: inline-flex;
    align-items: center; justify-content: center;
    transition: border-color .2s var(--ease), background .2s var(--ease), transform .15s var(--ease);
}
.footer-social a:hover {
    border-color: #fff;
    background: rgba(255,255,255,.08);
    transform: translateY(-1px);
}
.footer-social svg { width: 18px; height: 18px; }
.footer-bot {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-top: 18px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    color: #6c7794;
    font-size: 12.5px;
}

/* ============================================================
   MODAL
   ============================================================ */
.modal {
    position: fixed; inset: 0;
    background: rgba(11, 21, 48, .55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 16px;
}
.modal.is-open { display: flex; animation: modalFadeIn .25s var(--ease); }
@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.modal-card {
    background: var(--paper);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 460px;
    padding: 28px;
    box-shadow: var(--shadow-lg);
    animation: modalSlideUp .3s var(--ease);
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);   /* iOS: без панели браузера */
    overflow-y: auto;
    position: relative;
}
@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(20px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-card h3 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.01em;
}
.modal-card p.modal-lead {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 14px;
}

/* Заголовок модалки с иконкой молнии слева */
.modal-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}
.modal-title-row h3 { margin: 0; }
.modal-title-icon {
    flex-shrink: 0;
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
}
.modal-title-icon svg { width: 28px; height: 28px; }

/* Сноска про согласие на ПДн под submit-кнопкой */
.form-policy-note {
    margin: 14px 0 0;
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}
.form-policy-note a {
    color: var(--brand);
    text-decoration: underline;
    text-decoration-color: rgba(25, 85, 246, .35);
    text-underline-offset: 2px;
    cursor: pointer;
}
.form-policy-note a:hover {
    color: var(--brand-700);
    text-decoration-color: var(--brand);
}

/* Модалка политики обработки ПДн — большая, с iframe-PDF внутри */
.modal-card-policy {
    max-width: 900px;
    width: 100%;
    padding: 28px 24px 20px;
}
.modal-card-policy .modal-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 32px; height: 32px;
    border: 0;
    background: var(--paper-2);
    color: var(--muted);
    border-radius: 50%;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}
.modal-card-policy .modal-close:hover { background: var(--border); color: var(--fg); }
.modal-card-policy h3 {
    margin: 0 0 14px;
    font-size: 19px;
    font-weight: 700;
    padding-right: 40px;
}
.policy-frame {
    width: 100%;
    height: 70vh;
    border-radius: 12px;
    overflow: hidden;
    background: var(--paper-2);
    border: 1px solid var(--border);
}
.policy-frame:empty::before {
    content: 'Загружается…';
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--muted);
    font-size: 13.5px;
}
.policy-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.policy-fallback {
    margin: 12px 0 0;
    text-align: center;
    color: var(--muted-2);
    font-size: 12.5px;
}
.policy-fallback a { color: var(--brand); }
.modal-recap {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 13.5px;
    color: var(--fg);
}
.modal-recap:empty { display: none; }   /* заявка без тарифа — без пустой плашки */
.modal-recap-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.modal-recap-row + .modal-recap-row { margin-top: 4px; }
.modal-recap-row > span:first-child { min-width: min-content; }   /* подпись переносится по словам, но уже слова не сжимается */
.modal-recap-row .v-nowrap { flex-shrink: 0; white-space: nowrap; }   /* «1 000 ₽» не рвётся */
/* Длинное имя тарифа переносится внутри плашки, а не уходит за край модалки. */
.modal-recap-row .v { min-width: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-2);
}
.field input, .field textarea {
    border: 1.5px solid var(--border);
    border-radius: var(--radius-input);
    padding: 12px 14px;
    font: inherit;
    font-size: 15px;
    color: var(--fg);
    background: var(--paper);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
    width: 100%;
    font-family: inherit;
}
.field textarea {
    resize: vertical;
    min-height: 56px;
    line-height: 1.4;
}
.field .hint {
    font-size: 12px;
    color: var(--muted);
    margin-top: -2px;
}
.field .lookup-status {
    font-size: 12px;
    color: var(--muted-2);
    min-height: 0;
}
.field .lookup-status:empty { display: none; }

/* === DaData suggest dropdown === */
.field-suggest { position: relative; }
.suggest-dropdown {
    position: absolute;
    top: calc(100% - 4px);
    left: 0; right: 0;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-l2-hover);
    max-height: 280px;
    overflow-y: auto;
    z-index: 220;
    padding: 4px;
}
.suggest-dropdown[hidden] { display: none; }
.suggest-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    font: inherit;
    color: var(--fg);
    font-size: 14px;
    line-height: 1.35;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s var(--ease);
}
.suggest-item:hover, .suggest-item[aria-selected="true"] {
    background: var(--brand-50);
    color: var(--brand-700);
}
.suggest-item .sg-muted { color: var(--muted); }

/* === Phones — список с кнопкой «+ Добавить» и × у дополнительных === */
.phones {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.phone-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.phone-row .masked-input { flex: 1; min-width: 0; }
.phone-row .phone-remove {
    flex-shrink: 0;
    width: 38px;
    border: 1.5px solid var(--border);
    background: var(--paper);
    color: var(--muted);
    border-radius: var(--radius-input);
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    line-height: 1;
    transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.phone-row .phone-remove:hover {
    color: #dc2626;
    border-color: #dc2626;
    background: #fee2e2;
}
.phone-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--brand);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: color .15s var(--ease);
    align-self: flex-start;
}
.phone-add:hover { color: var(--brand-700); }
.phone-add[hidden] { display: none; }
.phone-add span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--brand-50);
    color: var(--brand);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
}
/* «+»-иконка — теперь SVG (раньше был текстовый символ «+»,
   который смещался вниз из-за асимметричных font-метрик «+»). */
.phone-add span svg {
    width: 11px;
    height: 11px;
    display: block;
}

/* === Masked input (telephone with persistent overlay) === */
.masked-input {
    position: relative;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-input);
    background: var(--paper);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.masked-input:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(25, 85, 246, .12);
}
.masked-input.is-error {
    border-color: #dc2626;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, .12);
}
/* Правило применяется ТОЛЬКО к rate'овским маскам (телефон в модалке заявки и
   быстром лиде). На странице формы (body.page-form) — input должен оставаться
   видимым, потому что там противоположный дизайн: input показывает текст,
   а overlay подсвечивает только placeholder снизу. */
body:not(.page-form) .masked-input input {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    caret-color: var(--fg);
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    font-size: 15px;
    font-family: inherit;
}
.masked-input input:focus { outline: none; }
.mask-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    padding: 12px 14px;
    font: inherit;
    font-size: 15px;
    font-family: inherit;
    line-height: 1.5;
    z-index: 1;
    white-space: pre;
    color: transparent;
    display: flex;
    align-items: center;
}
.mask-typed { color: var(--fg); }
.mask-rest  { color: var(--muted-2); }

/* Хук для детекта браузерного autofill (Chrome/Edge):
   :-webkit-autofill применяет короткую анимацию, JS слушает animationstart
   и переформатирует значение, чтобы оно отобразилось в .mask-typed. */
@keyframes mknet-autofill-on { from {} to {} }
.masked-input input:-webkit-autofill {
    animation-name: mknet-autofill-on;
    animation-duration: 0.001s;
    /* Скрываем жёлтый фон autofill, иначе он перекрывает overlay */
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    transition: background-color 99999s ease-in-out 0s;
}

/* === Thanks-screen extras === */
.modal-thanks .thanks-lead {
    color: var(--muted);
    margin: 0 0 18px;
}
.thanks-section {
    margin-top: 18px;
    padding: 18px;
    background: linear-gradient(180deg, #f7fafe 0%, #fbfcff 100%);
    border: 1px solid var(--border);
    border-radius: 16px;
    text-align: left;
}
.thanks-section h4 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -.005em;
}
.thanks-section .thanks-section-sub {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.45;
}
.thanks-section .field { margin-bottom: 10px; }
.thanks-section .modal-actions { margin-top: 10px; }
.extras-saved {
    margin: 8px 0 0;
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
}

/* Bot section */
.thanks-bot {
    background: linear-gradient(135deg, #eaf5fc 0%, #f7fbfe 60%, #fff 100%);
    border-color: #d3e8f7;
}
.thanks-bot .bot-head {
    display: flex;
    gap: 14px;
    margin-bottom: 14px;
}
.thanks-bot .bot-icon {
    flex-shrink: 0;
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #229ED9;
}
.thanks-bot .bot-icon svg { width: 28px; height: 28px; }
.thanks-bot .bot-head h4 { margin: 4px 0 2px; }

.btn-tg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
    color: #fff;
    text-decoration: none;
    padding: 13px 20px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 15px;
    transition: filter .2s var(--ease), transform .15s var(--ease), box-shadow .25s var(--ease);
    box-shadow: 0 1px 2px rgba(34, 158, 217, .15), 0 8px 22px rgba(34, 158, 217, .28);
}
.btn-tg:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-tg:active { transform: scale(.985); }
.btn-tg svg { width: 16px; height: 16px; flex-shrink: 0; }

.thanks-close {
    width: 100%;
    margin-top: 16px;
}
.field input:focus, .field textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(25, 85, 246, .12);
}
.field input.is-error, .field textarea.is-error {
    border-color: #dc2626;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, .12);
}
.field-error {
    color: #dc2626;
    font-size: 12.5px;
    min-height: 0;
}
.field-error:empty { display: none; }

.modal-actions {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-top: 24px;             /* было 8px — увеличили отступ от «Добавить ещё телефон» */
    flex-wrap: wrap;
}
/* Крестик в правом верхнем углу основной модалки заявки.
   Стиль аналогичен .modal-card-policy .modal-close, но используется в обычной .modal-card. */
.modal .modal-card > .modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border: 0;
    background: var(--paper-2);
    color: var(--muted);
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s var(--ease), color .15s var(--ease);
    z-index: 2;
}
.modal .modal-card > .modal-close:hover {
    background: var(--border);
    color: var(--fg);
}
.modal .modal-card > .modal-close:active { transform: scale(.94); }
/* Чтобы заголовок не залезал под крестик */
.modal .modal-card > .modal-title-row { padding-right: 44px; }
.modal-actions > * { min-width: 0; }
.btn-secondary {
    background: var(--paper-2);
    color: var(--fg);
    border: 0;
    padding: 14px 18px;
    border-radius: 12px;
    cursor: pointer;
    font: inherit; font-weight: 600; font-size: 14.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: background .15s var(--ease);
}
.btn-secondary:hover { background: var(--border); }
.modal-actions .btn-secondary { flex: 0 0 auto; }
.modal-actions .btn-cta {
    flex: 1 1 180px;
    min-width: 0;
    padding: 14px 18px;
    font-size: 15px;
}

@media (max-width: 420px) {
    .modal { padding: 12px; }
    .modal-card {
        padding: 22px 18px;
        border-radius: 20px;
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
    }
    .modal-actions {
        flex-direction: column;
    }
    .modal-actions .btn-secondary,
    .modal-actions .btn-cta {
        width: 100%;
        flex-basis: auto;
    }
}

/* THANK YOU */
.thanks-icon {
    width: 64px; height: 64px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--accent-50);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent);
}
.thanks-icon svg { width: 36px; height: 36px; }
.modal-thanks { text-align: center; }
.modal-thanks h3 { margin-bottom: 8px; }
.modal-thanks p { color: var(--muted); margin: 0 0 18px; }

/* form/index.html подключает rate.css после app.css ради общей шапки/футера.
   Возвращаем модалкам формы их собственный карточный шаблон, чтобы общий
   rate-modal не прятал их и не сжимал legal-карточки до 460px. */
body.page-form .modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 1rem;
}
body.page-form .modal.hidden { display: none !important; }
body.page-form .modal-card {
    background: #fff;
    border-radius: var(--radius);
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    box-shadow: none;
    animation: none;
    position: static;
}
@media (max-width: 420px) {
    body.page-form .modal { padding: 0.75rem; }
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .55; transform: scale(.92); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ============================================================
   INFO-HERO — компактный хедер на страницах /help/ и /news/
   ============================================================ */
.info-hero {
    background: linear-gradient(180deg, #f3f7ff 0%, #ffffff 100%);
    padding: clamp(36px, 5vw, 64px) 0 clamp(28px, 4vw, 44px);
    border-bottom: 1px solid #eef1f7;
}
.info-hero .hero-cities { margin-bottom: 16px; }
.info-title {
    margin: 0 0 14px;
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.08;
    color: #0B1530;
}
.info-lead {
    margin: 0;
    max-width: 760px;
    font-size: clamp(15px, 1.4vw, 17px);
    line-height: 1.55;
    color: #4A5575;
}
.info-lead a { color: var(--brand); font-weight: 600; text-decoration: none; }
.info-lead a:hover { text-decoration: underline; }

/* ============================================================
   HELP — оглавление и секции с инструкциями
   ============================================================ */
/* Tabs: горизонтальный navigation для help-секций */
.help-tabs-nav {
    position: sticky;
    top: 72px;
    z-index: 30;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid #eef1f7;
    padding: 14px 0;
}
.help-tabs-nav .wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.help-tabs-lede {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}
/* Плоский ряд из пяти и более кнопок не читается: непонятно, что с чем рядом.
   Подписи групп отвечают на вопрос «а это вообще про что» до чтения кнопок. */
.help-tab-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    align-items: center;
}
.help-tab-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.help-tab-group__label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8d97ad;
    white-space: nowrap;
}
.help-tab-groups { row-gap: 10px; }
.help-tab {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #eef1f7;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: #4A5575;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
    white-space: nowrap;
}
.help-tab:hover { background: var(--brand-50); color: var(--brand); }
.help-tab.is-active {
    background: var(--brand-50);
    color: var(--brand);
}
.help-tab svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke-width: 2;
    /* Цвет иконки задаётся индивидуально через data-tab, не наследуется от текста */
}
/* Цветные иконки по разделам — остаются цветными и в неактивном, и в активном состоянии */
.help-tab[data-tab="mercusys"] svg { color: #4d8cff; }
.help-tab[data-tab="tplink"]   svg { color: #16a37b; }
.help-tab[data-tab="iptv-pc"]  svg { color: #f59e0b; }
.help-tab[data-tab="iptv-tv"]  svg { color: #8b5cf6; }
.help-tab[data-tab="pppoe"]    svg { color: #f43f72; }
@media (max-width: 720px) {
    .help-tab-groups {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .help-tab-groups::-webkit-scrollbar { display: none; }
    .help-tab-group { flex-shrink: 0; }
    .help-tab { padding: 9px 12px; font-size: 13px; flex-shrink: 0; }
}
.help-tab-panel[hidden] { display: none; }

/* Figure (скриншот) внутри шага инструкции — small thumbnail size */
.help-figure {
    margin: 14px 0 0;
    background: #ffffff;
    border: 1px solid #E5EAF3;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(11, 21, 48, .04);
    max-width: 280px;
}
.help-figure img {
    display: block;
    width: 100%;
    height: auto;
}
.help-figure figcaption {
    padding: 8px 14px;
    font-size: 12.5px;
    color: var(--muted);
    background: #F5F7FB;
    border-top: 1px solid #E5EAF3;
}
/* Сетка миниатюр — компактные 3 в ряд */
.help-figures-grid {
    margin: 14px 0 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: 880px;
}
.help-figures-grid .help-figure {
    margin: 0;
    max-width: 100%;
}
@media (max-width: 720px) {
    .help-figures-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .help-figures-grid { grid-template-columns: 1fr; }
    .help-figure { max-width: 100%; }
}
/* Увеличенный вариант (×2) — для скриншотов веб-интерфейсов, где важна читаемость текста */
.help-figure.is-lg { max-width: 560px; }
.help-figures-grid.is-lg { max-width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.help-figures-grid.is-lg .help-figure { max-width: 100%; }

/* ---- Выбор модели роутера ---- */
/* Абонент смотрит на наклейку снизу роутера и ищет свою строку: список моделей
   отвечает «эта инструкция про меня» раньше, чем начнутся шаги. */
.help-models {
    margin: 0 0 26px;
    padding: 18px 20px;
    background: #F5F7FB;
    border: 1px solid #E5EAF3;
    border-radius: 16px;
}
.help-models h3 {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
}
.help-models-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}
.help-models-list li {
    display: grid;
    gap: 3px;
    padding-left: 14px;
    border-left: 2px solid var(--brand-100);
}
.help-models-list strong { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.help-models-list span { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.help-models-list code { font-size: 12.5px; }

/* Раздел без скриншотов не должен выглядеть недоделанным молча. */
.help-pending {
    margin: 0 0 22px;
    padding: 10px 14px;
    background: #FFF8EC;
    border: 1px solid #F0DFBD;
    border-radius: 12px;
    font-size: 13.5px;
    color: #8a6a23;
}

.help-code {
    margin: 8px 0;
    padding: 12px 14px;
    background: #10172a;
    border-radius: 10px;
    overflow-x: auto;
    font-size: 13px;
    line-height: 1.6;
}
.help-code code {
    background: none;
    padding: 0;
    color: #dfe5f5;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: pre;
}
kbd {
    display: inline-block;
    padding: 1px 6px;
    background: #fff;
    border: 1px solid #cfd6e4;
    border-bottom-width: 2px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}

/* ---- Просмотр скриншота во весь экран ---- */
.help-figure.is-zoomable { cursor: zoom-in; }
.help-figure.is-zoomable:hover { border-color: #d8e3ff; }
.help-figure.is-zoomable:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

html.lb-open { overflow: hidden; }

.lb {
    position: fixed; inset: 0; z-index: 200;
    display: grid;
    /* minmax(0,…): строка с auto-минимумом растягивалась под картинку,
       и max-height у неё переставал действовать — изображение обрезалось. */
    grid-template-rows: auto minmax(0, 1fr) auto;
    background: rgba(9, 14, 28, .97);
}
.lb[hidden] { display: none; }
.lb-bar {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 10px 14px;
}
.lb-count {
    margin-right: auto;
    color: rgba(255, 255, 255, .7);
    font-size: 14px; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.lb-btn {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border: 0; border-radius: 12px;
    color: #fff; background: rgba(255, 255, 255, .1);
    cursor: pointer;
}
.lb-btn:hover { background: rgba(255, 255, 255, .2); }
.lb-btn svg { width: 22px; height: 22px; }

/* Абсолютное позиционирование вместо grid-центрирования: у grid-элемента
   max-height в процентах разрешается против неопределённой высоты трека, и
   большая картинка вылезала за экран. Здесь containing block задан явно. */
.lb-stage {
    position: relative;
    min-height: 0; padding: 0 14px;
    overflow: hidden;
}
.lb-img {
    position: absolute; inset: 0; margin: auto;
    width: auto; height: auto;
    max-width: 100%; max-height: 100%;
    border-radius: 10px;
    background: #fff;
    cursor: zoom-in;
    /* Пока масштаб 1×, касания не перехватываем — работает нативный пинч. */
    touch-action: pinch-zoom;
    transition: transform .18s ease-out;
    will-change: transform;
}
.lb.is-zoomed .lb-img { cursor: grab; touch-action: none; transition: none; }
.lb.is-zoomed .lb-img:active { cursor: grabbing; }

.lb-caption {
    margin: 0;
    padding: 12px max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom));
    color: rgba(255, 255, 255, .8);
    font-size: 14px; line-height: 1.45; text-align: center;
}
.lb-caption[hidden] { display: none; }

.lb-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    display: grid; place-items: center;
    width: 48px; height: 48px;
    border: 0; border-radius: 999px;
    color: #fff; background: rgba(255, 255, 255, .12);
    cursor: pointer; z-index: 1;
}
.lb-nav:hover { background: rgba(255, 255, 255, .24); }
.lb-nav[hidden] { display: none; }
.lb-nav svg { width: 26px; height: 26px; }
.lb-prev { left: max(8px, env(safe-area-inset-left)); }
.lb-next { right: max(8px, env(safe-area-inset-right)); }

@media (max-width: 560px) {
    .lb-nav { width: 42px; height: 42px; }
    .lb-stage { padding: 0 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .lb-img { transition: none; }
}
@media (max-width: 720px) {
    .help-figures-grid.is-lg { grid-template-columns: 1fr; }
}

/* ============================================================
   ARTICLES — список статей и страницы статей
   ============================================================ */
.articles-list-section {
    background: #ffffff;
    padding: clamp(36px, 4.5vw, 60px) 0;
    border-bottom: 1px solid #eef1f7;
}
.articles-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 1.8vw, 22px);
}
@media (max-width: 900px) { .articles-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .articles-grid { grid-template-columns: 1fr; } }

.article-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #E5EAF3;
    border-radius: 20px;
    text-decoration: none;
    overflow: hidden;
    transition: transform .2s var(--ease), box-shadow .25s var(--ease), border-color .2s var(--ease);
    box-shadow: 0 1px 2px rgba(11, 21, 48, .04), 0 8px 18px rgba(11, 21, 48, .04);
}
.article-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(11, 21, 48, .05), 0 18px 36px rgba(11, 21, 48, .08);
    border-color: #d8e3ff;
}
.article-card-thumb {
    aspect-ratio: 5 / 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eaf2ff 0%, #f5f9ff 100%);
    color: var(--brand);
}
.article-card-thumb-green {
    background: linear-gradient(135deg, #e6f7f0 0%, #f5fbf8 100%);
    color: #16a37b;
}
.article-card-thumb-purple {
    background: linear-gradient(135deg, #f1ecfd 0%, #f8f5fe 100%);
    color: #8b5cf6;
}
.article-card-thumb svg {
    width: 44%;
    height: 64%;
    max-width: 72px;
    max-height: 64px;
}
.article-card-body {
    padding: clamp(18px, 2vw, 24px);
    display: flex;
    flex-direction: column;
    flex: 1;
}
.article-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.article-card-tag {
    display: inline-block;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 500;
    border-radius: 999px;
    background: #F0F3F8;
    color: #6B7891;
    line-height: 1.3;
}
.article-card-body h2 {
    margin: 0 0 10px;
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #0B1530;
    letter-spacing: -.005em;
    line-height: 1.3;
}
.article-card-body p {
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #6B7891;
    flex: 1;
}
.article-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid #eef1f7;
    font-size: 13px;
}
.article-card-meta {
    color: #8A95AE;
    font-weight: 500;
    font-size: 12.5px;
}
.article-card-cta {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--brand);
}
.article-card:hover .article-card-cta { text-decoration: underline; }

/* Дополнительные оттенки превью карточек */
.article-card-thumb-amber  { background: linear-gradient(135deg, #fff4e0 0%, #fffaf2 100%); color: #f59e0b; }
.article-card-thumb-teal   { background: linear-gradient(135deg, #e0f5f5 0%, #f3fbfb 100%); color: #0ea5b3; }
.article-card-thumb-rose   { background: linear-gradient(135deg, #ffe9ee 0%, #fff5f7 100%); color: #f43f72; }
.article-card-thumb-red    { background: linear-gradient(135deg, #fde5e5 0%, #fef3f3 100%); color: #ef4444; }
.article-card-thumb-blue   { background: linear-gradient(135deg, #eaf2ff 0%, #f5f9ff 100%); color: #4d8cff; }

/* Раскрытая статья */
.article-content {
    background: #ffffff;
    padding: clamp(40px, 5vw, 72px) 0;
    border-bottom: 1px solid #eef1f7;
    scroll-margin-top: 90px;
}
.article-content-alt { background: #F5F7FB; }
.article-content .wrap { max-width: 760px; }
.article-head {
    margin-bottom: clamp(24px, 3vw, 36px);
}
.article-tag {
    display: inline-block;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 999px;
    background: #F0F3F8;
    color: #6B7891;
    margin-bottom: 14px;
}
.article-tag-feature { background: #F0F3F8; color: #6B7891; }
.article-tag-event   { background: #F0F3F8; color: #6B7891; }
.article-tag-info    { background: #F0F3F8; color: #6B7891; }
.article-head h2 {
    margin: 0 0 14px;
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: #0B1530;
}
.article-lead {
    margin: 0;
    font-size: clamp(16px, 1.5vw, 18px);
    line-height: 1.55;
    color: #4A5575;
}
.article-body { color: #2A3656; }
.article-body h3 {
    margin: 28px 0 12px;
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: #0B1530;
    letter-spacing: -.005em;
}
.article-body p {
    margin: 0 0 14px;
    font-size: 15.5px;
    line-height: 1.65;
    color: #2A3656;
}
.article-body ul,
.article-body ol {
    margin: 0 0 14px;
    padding-left: 24px;
    font-size: 15.5px;
    line-height: 1.65;
    color: #2A3656;
}
.article-body li + li { margin-top: 6px; }
.article-body a { color: var(--brand); font-weight: 600; }
.article-body strong { color: #0B1530; }

.article-callout {
    margin: 24px 0;
    padding: 18px 22px;
    background: linear-gradient(135deg, #eaf2ff 0%, #f7faff 100%);
    border: 1px solid #d8e3ff;
    border-radius: 14px;
    font-size: 14.5px;
    line-height: 1.55;
    color: #2A3656;
}
.article-callout-cta {
    width: auto;
    padding: 12px 22px;
    font-size: 15px;
    text-decoration: none;
    display: inline-block;
}

.article-table-wrap {
    margin: 0 0 18px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.article-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: #ffffff;
    border: 1px solid #E5EAF3;
    border-radius: 12px;
    overflow: hidden;
}
.article-table th,
.article-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid #E5EAF3;
    border-right: 1px solid #E5EAF3;
    vertical-align: top;
    color: #2A3656;
}
.article-table th:last-child,
.article-table td:last-child { border-right: 0; }
.article-table tr:last-child td { border-bottom: 0; }
.article-table th {
    background: #F5F7FB;
    font-weight: 700;
    color: #0B1530;
    font-size: 13px;
    letter-spacing: -.005em;
}
.article-back {
    margin: 28px 0 0;
    font-size: 14px;
}
.article-back a {
    color: var(--muted);
    text-decoration: none;
    font-weight: 500;
}
.article-back a:hover { color: var(--brand); }

/* Отдельная страница статьи (article-single) */
.article-single {
    background: #ffffff;
    padding: clamp(28px, 4vw, 56px) 0 clamp(40px, 5vw, 72px);
}
.article-single .wrap { max-width: 760px; }
.article-back-link {
    margin: 0 0 18px;
    font-size: 13.5px;
}
.article-back-link a {
    color: var(--muted);
    text-decoration: none;
    font-weight: 500;
    transition: color .15s ease;
}
.article-back-link a:hover { color: var(--brand); }

.article-single-head { margin-bottom: clamp(24px, 3vw, 36px); }
.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}
.article-single-head h1 {
    margin: 0 0 12px;
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: #0B1530;
}
.article-meta {
    margin: 0 0 16px;
    font-size: 13px;
    color: #8A95AE;
    font-weight: 500;
}

/* Дополнительные цвета тегов — слегка муторнее, чтобы не перетягивать внимание */
.article-tag-amber,
.article-tag-teal,
.article-tag-rose,
.article-tag-red,
.article-tag-purple { background: #F0F3F8; color: #6B7891; }

/* Связанные статьи в конце */
.article-related {
    margin-top: clamp(32px, 4vw, 48px);
    padding-top: clamp(24px, 3vw, 36px);
    border-top: 1px solid #eef1f7;
}
.article-related h4 {
    margin: 0 0 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}
.article-related-list {
    display: grid;
    gap: 10px;
}
.article-related-list a {
    display: block;
    padding: 12px 16px;
    background: #F5F7FB;
    border: 1px solid #eef1f7;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 600;
    color: #0B1530;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.article-related-list a:hover {
    background: var(--brand-50);
    border-color: #d8e3ff;
    color: var(--brand);
}

.help-section {
    background: #ffffff;
    padding: clamp(40px, 5vw, 72px) 0;
}
.help-section-alt { background: #F5F7FB; }
.help-section .section-head h2 {
    font-size: clamp(24px, 3vw, 36px);
}
.help-section .section-head p {
    max-width: 720px;
}
.help-section code {
    display: inline-block;
    padding: 1px 6px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: .92em;
    background: rgba(25, 85, 246, .08);
    color: var(--brand);
    border-radius: 4px;
}

/* Шаги */
.help-steps {
    display: grid;
    gap: clamp(14px, 1.6vw, 20px);
}
.help-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(16px, 1.8vw, 22px);
    padding: clamp(20px, 2.4vw, 28px);
    background: #ffffff;
    border: 1px solid #E5EAF3;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(11,21,48,.04), 0 6px 16px rgba(11,21,48,.04);
}
.help-section-alt .help-step { background: #ffffff; }
.help-step-num {
    width: 36px; height: 36px;
    flex-shrink: 0;
    background: var(--brand);
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 4px 10px rgba(25, 85, 246, .25);
}
.help-step-body h3 {
    margin: 4px 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: #0B1530;
    letter-spacing: -.005em;
}
.help-step-body p,
.help-step-body ul,
.help-step-body ol {
    margin: 0 0 8px;
    font-size: 14.5px;
    line-height: 1.55;
    color: #4A5575;
}
.help-step-body ul,
.help-step-body ol { padding-left: 22px; }
.help-step-body li + li { margin-top: 4px; }
.help-step-body p:last-child,
.help-step-body ul:last-child,
.help-step-body ol:last-child { margin-bottom: 0; }
@media (max-width: 540px) {
    .help-step { grid-template-columns: 1fr; }
    .help-step-num { width: 30px; height: 30px; font-size: 14px; }
}

/* Сетка карточек (IPTV на ПК) */
.help-grid {
    display: grid;
    gap: clamp(14px, 1.6vw, 20px);
}
.help-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .help-grid-3 { grid-template-columns: 1fr; } }
.help-card {
    background: #ffffff;
    border: 1px solid #E5EAF3;
    border-radius: 18px;
    padding: clamp(20px, 2.2vw, 26px);
    box-shadow: 0 1px 2px rgba(11,21,48,.04), 0 6px 16px rgba(11,21,48,.04);
}
.help-card h3 {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 700;
    color: #0B1530;
    letter-spacing: -.005em;
}
.help-card-list {
    margin: 0;
    padding-left: 22px;
    font-size: 14px;
    line-height: 1.55;
    color: #4A5575;
}
.help-card-list li + li { margin-top: 6px; }
.help-card-list a { color: var(--brand); font-weight: 600; }

/* Accordion */
.help-accordion {
    display: grid;
    gap: 10px;
}
.help-accordion .faq-item {
    background: #ffffff;
    border: 1px solid #E5EAF3;
    border-radius: 14px;
    padding: 0;
    box-shadow: 0 1px 2px rgba(11,21,48,.03);
}
.help-accordion .faq-item summary {
    padding: 16px 20px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: #0B1530;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.help-accordion .faq-item summary::-webkit-details-marker { display: none; }
.help-accordion .faq-item summary::after {
    content: '+';
    display: inline-block;
    width: 22px; height: 22px;
    line-height: 20px;
    text-align: center;
    background: var(--brand-50);
    color: var(--brand);
    border-radius: 50%;
    font-weight: 700;
    flex-shrink: 0;
    transition: transform .2s var(--ease);
}
.help-accordion .faq-item[open] summary::after { content: '−'; }
.help-accordion .faq-answer {
    padding: 0 20px 18px;
    font-size: 14.5px;
    line-height: 1.6;
    color: #4A5575;
}
.help-accordion .faq-answer p,
.help-accordion .faq-answer ul,
.help-accordion .faq-answer ol { margin: 0 0 8px; }
.help-accordion .faq-answer p:last-child,
.help-accordion .faq-answer ul:last-child,
.help-accordion .faq-answer ol:last-child { margin-bottom: 0; }
.help-accordion .faq-answer ul,
.help-accordion .faq-answer ol { padding-left: 22px; }
.help-accordion .faq-answer code {
    display: inline-block;
    padding: 1px 6px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: .92em;
    background: rgba(25, 85, 246, .08);
    color: var(--brand);
    border-radius: 4px;
}

/* CTA в конце help-страницы */
.help-cta {
    background: #ffffff;
    padding: clamp(36px, 4.5vw, 64px) 0 clamp(48px, 6vw, 80px);
}
.help-cta-card {
    background: linear-gradient(135deg, #eaf2ff 0%, #f7faff 60%, #ffffff 100%);
    border: 1px solid #d8e3ff;
    border-radius: 22px;
    padding: clamp(22px, 2.8vw, 36px);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: clamp(18px, 2vw, 28px);
    align-items: center;
    box-shadow: var(--shadow-l1);
}
.help-cta-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: var(--brand);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 18px rgba(25, 85, 246, .28);
}
.help-cta-icon svg { width: 26px; height: 26px; }
.help-cta-text h3 {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: #0B1530;
}
.help-cta-text p {
    margin: 0;
    font-size: 14px;
    color: #4A5575;
    line-height: 1.5;
}
.help-cta-actions {
    display: inline-flex;
    gap: 10px;
    flex-shrink: 0;
}
.help-cta-actions .btn-cta {
    width: auto;
    padding: 12px 22px;
    font-size: 15px;
    text-decoration: none;
}
.help-cta-actions .btn-secondary {
    padding: 12px 18px;
    font-size: 14.5px;
    text-decoration: none;
}
@media (max-width: 800px) {
    .help-cta-card { grid-template-columns: 1fr; text-align: left; }
    .help-cta-actions { width: 100%; flex-direction: column; }
    .help-cta-actions .btn-cta,
    .help-cta-actions .btn-secondary { width: 100%; text-align: center; }
}

/* ============================================================
   IPTV — карточки скачивания плеера для разных ОС
   ============================================================ */
.iptv-os-grid {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
@media (max-width: 900px) { .iptv-os-grid { grid-template-columns: 1fr; } }
.iptv-os-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #E5EAF3;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(11,21,48,.04);
}
.iptv-os-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
}
.iptv-os-icon svg { width: 26px; height: 26px; }
.iptv-os-icon-win   { background: #e8f0fe; color: #1955f6; }
.iptv-os-icon-linux { background: #fff4e0; color: #f59e0b; }
.iptv-os-icon-mac   { background: #f1f4f9; color: #4A5575; }
.iptv-os-card h4 {
    margin: 0 0 6px;
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: 15.5px;
    font-weight: 700;
    color: #0B1530;
    letter-spacing: -.005em;
}
.iptv-os-desc {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.5;
    color: #6B7891;
    flex: 1;
}
.iptv-download-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.iptv-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 10px;
    background: var(--brand);
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s var(--ease), transform .12s var(--ease), box-shadow .2s var(--ease);
    box-shadow: 0 4px 10px rgba(25, 85, 246, .18);
}
.iptv-download-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.iptv-download-btn svg { width: 15px; height: 15px; }
.iptv-download-btn-sec {
    background: var(--brand-50);
    color: var(--brand);
    box-shadow: none;
}
.iptv-download-btn-sec:hover { background: rgba(25, 85, 246, .14); }

/* ============================================================
   NEWS — список карточек новостей
   ============================================================ */
.news-list-section {
    background: #ffffff;
    padding: clamp(40px, 5vw, 72px) 0 clamp(48px, 6vw, 88px);
}
.news-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 1.8vw, 22px);
}
@media (max-width: 900px) { .news-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .news-list { grid-template-columns: 1fr; } }

.news-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #E5EAF3;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(11,21,48,.04), 0 8px 18px rgba(11,21,48,.04);
    transition: transform .2s var(--ease), box-shadow .25s var(--ease), border-color .2s var(--ease);
}
.news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(11,21,48,.05), 0 18px 36px rgba(11,21,48,.08);
    border-color: #d8e3ff;
}
.news-card-thumb {
    aspect-ratio: 5 / 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eaf2ff 0%, #f5f9ff 100%);
    color: var(--brand);
}
.news-card-thumb svg {
    width: 44%;
    height: 64%;
    max-width: 72px;
    max-height: 64px;
}
.news-card-thumb-feature { background: linear-gradient(135deg, #e6f7f0 0%, #f5fbf8 100%); color: #16a37b; }
.news-card-thumb-info    { background: linear-gradient(135deg, #f1ecfd 0%, #f8f5fe 100%); color: #8b5cf6; }
.news-card-thumb-connect { background: linear-gradient(135deg, #eaf2ff 0%, #f5f9ff 100%); color: var(--brand); }
.news-card-thumb-infra   { background: linear-gradient(135deg, #e0f5f5 0%, #f3fbfb 100%); color: #0ea5b3; }

.news-card-body {
    padding: clamp(18px, 2vw, 24px);
    display: flex;
    flex-direction: column;
    flex: 1;
}
.news-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.news-card-tag {
    display: inline-block;
    padding: 3px 9px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 999px;
    background: var(--brand-50);
    color: var(--brand);
    line-height: 1.3;
}
.news-card-tag-feature { background: rgba(22, 163, 123, .12); color: #16a37b; }
.news-card-tag-info    { background: rgba(139, 92, 246, .12); color: #8b5cf6; }
.news-card-tag-connect { background: rgba(25, 85, 246, .12); color: var(--brand); }
.news-card-tag-infra   { background: rgba(14, 165, 179, .12); color: #0ea5b3; }

.news-card-title {
    margin: 0 0 10px;
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #0B1530;
    letter-spacing: -.005em;
    line-height: 1.3;
}
.news-card-desc {
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #6B7891;
    flex: 1;
}
.news-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid #eef1f7;
    font-size: 13px;
}
.news-card-date {
    font-size: 12.5px;
    color: #8A95AE;
    font-weight: 500;
}
.news-card-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
    border-bottom: 1px dashed rgba(25, 85, 246, .35);
    transition: border-color .15s ease;
    align-self: flex-start;
}
.news-card-link:hover { border-color: var(--brand); }

/* Раскрывающийся список цен в новостях об изменении тарифов: карточка остаётся
   компактной в сетке, а полный прайс доступен по клику и с клавиатуры. */
.news-card-more {
    margin: 0 0 14px;
}
.news-card-more > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--brand);
    cursor: pointer;
    list-style: none;
    border-bottom: 1px dashed rgba(25, 85, 246, .35);
    transition: border-color .15s ease;
}
.news-card-more > summary::-webkit-details-marker { display: none; }
.news-card-more > summary::after { content: "▾"; font-size: 11px; }
.news-card-more[open] > summary::after { content: "▴"; }
.news-card-more > summary:hover { border-color: var(--brand); }
.news-card-more > summary:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
    border-radius: 4px;
}
.news-card-prices {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    gap: 6px;
    font-size: 13px;
    line-height: 1.4;
    color: #6B7891;
}
.news-card-prices li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid #eef1f7;
}
.news-card-prices li:last-child { padding-bottom: 0; border-bottom: 0; }
.news-card-prices strong {
    flex-shrink: 0;
    white-space: nowrap;
    font-weight: 700;
    color: #0B1530;
}

.news-cta {
    max-width: 880px;
    margin: clamp(28px, 3.5vw, 44px) auto 0;
    text-align: center;
}
.news-cta p {
    margin: 0 0 16px;
    font-size: 15px;
    color: #4A5575;
}
.news-cta-actions {
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.news-cta-actions .btn-cta,
.news-cta-actions .btn-secondary {
    width: auto;
    padding: 12px 22px;
    font-size: 14.5px;
    text-decoration: none;
}

/* ============================================================
   QUICK LEAD — быстрая заявка после блока преимуществ
   ============================================================ */
.quick-lead-section {
    background: #ffffff;
    padding: clamp(48px, 6vw, 80px) 0;
    border-top: 1px solid #eef1f7;
}
.quick-lead-head {
    max-width: 880px;
    margin: 0 0 clamp(24px, 3vw, 36px);
}
.quick-lead-head h2 {
    margin: 0 0 12px;
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: clamp(22px, 3vw, 36px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: #0B1530;
}
.quick-lead-accent {
    background: linear-gradient(90deg, #1955f6 0%, #8b5cf6 60%, #c026d3 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.quick-lead-bolt {
    display: inline-block;
    transform: translateY(-2px);
    filter: drop-shadow(0 2px 6px rgba(245, 158, 11, .35));
}
.quick-lead-head p {
    margin: 0;
    font-size: clamp(14.5px, 1.5vw, 16px);
    line-height: 1.55;
    color: #4A5575;
}
.quick-lead-head p strong { color: #0B1530; font-weight: 700; }
.quick-lead-head p a {
    color: #4A5575;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(74, 85, 117, .4);
    transition: color .15s var(--ease), text-decoration-color .15s var(--ease);
}
.quick-lead-head p a:hover { color: var(--brand); text-decoration-color: var(--brand); }

/* Карточка-pill с формой */
.quick-lead-card {
    background: #ffffff;
    border: 1.5px solid #e7ebff;
    border-radius: 22px;
    padding: clamp(32px, 3.5vw, 48px) clamp(18px, 2.2vw, 28px) clamp(22px, 2.6vw, 32px);
    box-shadow: 0 1px 2px rgba(11,21,48,.04), 0 8px 24px rgba(11,21,48,.05);
}
.quick-lead-fields {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr auto;
    gap: 14px;
    align-items: start;
}
@media (max-width: 900px) {
    .quick-lead-fields { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .quick-lead-fields { grid-template-columns: 1fr; gap: 12px; }
}
.quick-lead-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.quick-lead-field > input,
.quick-lead-field .masked-input {
    width: 100%;
    box-sizing: border-box;
}
.quick-lead-field input {
    font: inherit;
    font-size: 15px;
    padding: 16px 18px;
    background: #f4f6fb;
    border: 1px solid transparent;
    border-radius: 14px;
    color: #0B1530;
    transition: background .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
    width: 100%;
    box-sizing: border-box;
}
.quick-lead-field input::placeholder { color: #8A95AE; }
.quick-lead-field input:hover { background: #eef2f8; }
.quick-lead-field input:focus {
    outline: none;
    background: #ffffff;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(25, 85, 246, .14);
}
.quick-lead-field .masked-input { position: relative; display: block; }
.quick-lead-field .masked-input input { padding-left: 18px; }
.quick-lead-field .masked-input.is-error input,
.quick-lead-field.is-error input {
    border-color: rgba(239, 68, 68, .5);
    background: rgba(239, 68, 68, .06);
}
.quick-lead-field .field-error {
    margin-top: 2px;
    font-size: 12px;
    color: #b91c1c;
    min-height: 0;
}
.quick-lead-field .field-error:empty { display: none; }

/* Кнопка отправки */
.quick-lead-submit {
    width: auto;
    padding: 16px 28px;
    font-size: 15px;
    background: linear-gradient(135deg, #1955f6 0%, #8b5cf6 100%);
    box-shadow: 0 4px 14px rgba(89, 65, 246, .25);
    white-space: nowrap;
}
.quick-lead-submit:disabled {
    cursor: wait;
    opacity: .72;
}
.quick-lead-submit-error,
.form-submit-error {
    margin: 12px 0 0;
    color: #b91c1c;
    font-size: 13px;
}
@media (max-width: 560px) {
    .quick-lead-submit { width: 100%; }
}

/* DaData suggest dropdown поверх поля адреса */
.quick-lead-field .suggest-dropdown {
    position: absolute;
    z-index: 5;
    left: 0; right: 0;
    margin-top: 4px;
}

.quick-lead-policy {
    margin: 14px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #8A95AE;
}
.quick-lead-policy a {
    color: var(--brand);
    text-decoration: none;
    border-bottom: 1px dashed rgba(25, 85, 246, .35);
}
.quick-lead-policy a:hover { border-color: var(--brand); }

/* ====== Спасибо-блок (заменяет форму) ====== */
.quick-lead-thanks {
    padding: clamp(22px, 2.5vw, 32px);
    background: #ffffff;
    border: 1.5px solid #e7ebff;
    border-radius: 22px;
    box-shadow: 0 1px 2px rgba(11,21,48,.04), 0 8px 24px rgba(11,21,48,.05);
}
.quick-thanks-head {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 18px;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eef1f7;
}
.quick-thanks-icon {
    width: 56px; height: 56px;
    background: rgba(22, 163, 123, .12);
    color: #16a37b;
    border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
}
.quick-thanks-icon svg { width: 28px; height: 28px; }
.quick-thanks-head h3 {
    margin: 0 0 4px;
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #0B1530;
}
.quick-thanks-head p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: #4A5575;
}

.quick-thanks-extras {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(18px, 2.5vw, 28px);
}
@media (max-width: 900px) {
    .quick-thanks-extras { grid-template-columns: 1fr; }
}
.quick-thanks-block { display: flex; flex-direction: column; }
.quick-thanks-block h4 {
    margin: 0 0 6px;
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: 15.5px;
    font-weight: 700;
    color: #0B1530;
}
.quick-thanks-sub {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #6B7891;
}
.quick-thanks-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto auto;
    gap: 8px;
    align-items: stretch;
}
@media (max-width: 720px) {
    .quick-thanks-row { grid-template-columns: 1fr 1fr; }
    .quick-thanks-row .btn-cta,
    .quick-thanks-row .btn-secondary { grid-column: span 1; }
}
@media (max-width: 480px) {
    .quick-thanks-row { grid-template-columns: 1fr; }
}
.quick-thanks-row .field { min-width: 0; position: relative; display: flex; }

/* Единая высота инпутов и кнопок: 44px box-sizing border-box, одинаковый радиус, шрифт */
.quick-thanks-row input,
.quick-thanks-row .btn-cta,
.quick-thanks-row .btn-secondary {
    height: 44px;
    box-sizing: border-box;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    line-height: 1;
    padding: 0 16px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.quick-thanks-row input {
    background: #f4f6fb;
    border: 1px solid transparent;
    width: 100%;
    justify-content: flex-start;
}
.quick-thanks-row input:focus {
    outline: none;
    background: #ffffff;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(25, 85, 246, .14);
}
.quick-thanks-row .btn-cta,
.quick-thanks-row .btn-secondary {
    width: auto;
    font-weight: 600;
}
/* Сбросить «highlight»-полосу btn-cta — она конфликтует с центрированным flex */
.quick-thanks-row .btn-cta::before { display: none; }
.quick-extras-saved {
    margin: 8px 0 0;
    color: #16a37b;
    font-size: 13.5px;
    font-weight: 600;
}

/* Telegram-блок справа */
.quick-thanks-bot {
    padding: 16px 18px;
    background: #f3f7ff;
    border: 1px solid #e1ebff;
    border-radius: 14px;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.quick-thanks-bot-icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #229ed9 0%, #2dabe6 100%);
    color: #ffffff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.quick-thanks-bot-icon svg { width: 22px; height: 22px; }
.quick-thanks-bot-text { flex: 1; min-width: 160px; }
.quick-thanks-bot-text h4 { margin: 0 0 2px; font-size: 14px; }
.quick-thanks-bot-text .quick-thanks-sub { margin: 0; font-size: 12.5px; }
.quick-thanks-bot .btn-tg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    background: linear-gradient(135deg, #229ed9 0%, #2dabe6 100%);
    color: #ffffff;
    border-radius: 10px;
    text-decoration: none;
    transition: filter .15s var(--ease), transform .12s var(--ease);
}
.quick-thanks-bot .btn-tg:hover { filter: brightness(1.05); transform: translateY(-1px); }
.quick-thanks-bot .btn-tg svg { width: 14px; height: 14px; }

/* Утилита */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   COVERAGE — зона охвата провайдера
   ============================================================ */
.coverage-section {
    background: #ffffff;
    padding: clamp(48px, 6vw, 88px) 0;
    border-top: 1px solid #eef1f7;
}
.coverage-head {
    max-width: 760px;
    margin: 0 0 clamp(28px, 3.5vw, 44px);
}
.coverage-head h2 {
    margin: 0 0 10px;
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: #0B1530;
}
.coverage-head p {
    margin: 0;
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 1.55;
    color: #4A5575;
    max-width: 640px;
}

.coverage-grid {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: clamp(24px, 3vw, 40px);
    align-items: stretch;
}
@media (max-width: 900px) { .coverage-grid { grid-template-columns: 1fr; gap: 24px; } }

/* Правая колонка: карта */
.coverage-map {
    background: #ffffff;
    border: 1px solid #E5EAF3;
    border-radius: 20px;
    padding: 14px;
    box-shadow: 0 1px 2px rgba(11,21,48,.04), 0 8px 24px rgba(11,21,48,.06);
    display: flex;
    align-items: center;
    justify-content: center;
}
.coverage-map img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

/* Левая колонка: проверка адреса + кнопка полного списка */
.coverage-check {
    padding: clamp(24px, 3vw, 32px);
    background: #ffffff;
    border: 1px solid #E5EAF3;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(11,21,48,.04), 0 8px 24px rgba(11,21,48,.06);
    display: flex;
    flex-direction: column;
}
.coverage-check-head { margin-bottom: 18px; }
.coverage-check-head h3 {
    margin: 0 0 6px;
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 700;
    color: #0B1530;
}
.coverage-check-head p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: #4A5575;
}
/* Поле и кнопка — в одну колонку: input сверху, кнопка снизу на всю ширину */
.coverage-check-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.coverage-check-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.coverage-check-input-wrap svg {
    position: absolute;
    left: 14px;
    width: 18px; height: 18px;
    color: #8A95AE;
    pointer-events: none;
}
.coverage-check-input-wrap input {
    font: inherit;
    font-size: 15px;
    padding: 13px 14px 13px 42px;
    border: 1px solid #d8dee9;
    border-radius: 12px;
    background: #ffffff;
    color: #0B1530;
    width: 100%;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.coverage-check-input-wrap input::placeholder { color: #A9B2C5; }
.coverage-check-input-wrap input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(25, 85, 246, .14);
}
/* Анимированная иллюстрация поиска (лупа над пин-точкой) */
.coverage-search-illust {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    margin: 18px 0 8px;
    min-height: 150px;
}
.coverage-search-illust svg {
    width: 100%;
    max-width: 230px;
    height: auto;
    display: block;
    overflow: visible;
}
/* Скрываем иллюстрацию, когда есть результат проверки (чтобы не отвлекала) */
.coverage-check:has(.coverage-check-result:not(:empty)) .coverage-search-illust {
    display: none;
}

/* === Лупа: плавно качается влево-вправо вокруг центра кольца === */
.cov-lens {
    transform-origin: 0 0;
    transform-box: fill-box;
    animation: cov-lens-sway 4.5s ease-in-out infinite;
}
@keyframes cov-lens-sway {
    0%   { transform: rotate(-9deg); }
    50%  { transform: rotate(9deg); }
    100% { transform: rotate(-9deg); }
}

/* === Локационный пин: пульсирует и приподнимается === */
.cov-pin {
    transform-origin: 0 0;
    transform-box: fill-box;
    animation: cov-pin-pulse 2.4s ease-in-out infinite;
}
@keyframes cov-pin-pulse {
    0%, 100% { transform: scale(1) translateY(0); }
    50%      { transform: scale(1.12) translateY(-3px); }
}

/* === Радар-кольца: расходятся волной === */
.cov-ring {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: cov-ring-pulse 3s ease-out infinite;
}
.cov-ring-2 { animation-delay: 1.5s; }
@keyframes cov-ring-pulse {
    0%   { transform: scale(0.45); opacity: 0; }
    18%  { opacity: 0.65; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* === Точки-карта: лёгкое мерцание === */
.cov-map-dots circle {
    animation: cov-dot-twinkle 4s ease-in-out infinite;
}
.cov-map-dots circle:nth-child(2) { animation-delay: .4s; }
.cov-map-dots circle:nth-child(3) { animation-delay: .8s; }
.cov-map-dots circle:nth-child(4) { animation-delay: 1.2s; }
.cov-map-dots circle:nth-child(5) { animation-delay: 1.6s; }
.cov-map-dots circle:nth-child(6) { animation-delay: 2.0s; }
.cov-map-dots circle:nth-child(7) { animation-delay: 2.4s; }
.cov-map-dots circle:nth-child(8) { animation-delay: 2.8s; }
@keyframes cov-dot-twinkle {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
}

/* Респект к prefers-reduced-motion — выключаем анимацию */
@media (prefers-reduced-motion: reduce) {
    .cov-lens, .cov-pin, .cov-ring, .cov-map-dots circle { animation: none; }
}

/* Кнопка «Проверить» — приглушённая, на всю ширину под полем */
.coverage-check-submit.btn-cta {
    width: 100%;
    padding: 13px 22px;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--brand-50);
    color: var(--brand);
    border: 1px solid rgba(25, 85, 246, .16);
    box-shadow: none;
    transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .12s var(--ease);
}
.coverage-check-submit.btn-cta::before { display: none; }
.coverage-check-submit.btn-cta:hover {
    background: rgba(25, 85, 246, .12);
    border-color: rgba(25, 85, 246, .28);
    color: var(--brand);
    filter: none;
    transform: translateY(-1px);
}
.coverage-check-submit.btn-cta:active { transform: scale(.98); }

/* Результат проверки */
.coverage-check-result { margin-top: 16px; }
.coverage-check-result:empty { display: none; }
.coverage-check-result.is-empty { padding: 14px 16px; background: #fff; border: 1px solid #E5EAF3; border-radius: 12px; color: #6B7891; font-size: 13.5px; }
.coverage-check-result .coverage-result-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 700;
    color: #0B1530;
}
.coverage-check-result .coverage-result-head svg { width: 22px; height: 22px; }
.coverage-check-result.is-success { padding: 18px 22px; background: rgba(22, 163, 123, .08); border: 1px solid rgba(22, 163, 123, .25); border-radius: 14px; }
.coverage-check-result.is-success .coverage-result-head { color: #126b50; }
.coverage-check-result.is-success .coverage-result-head svg { color: #16a37b; }
.coverage-check-result.is-pending { padding: 18px 22px; background: rgba(245, 158, 11, .08); border: 1px solid rgba(245, 158, 11, .25); border-radius: 14px; }
.coverage-check-result.is-pending .coverage-result-head { color: #92590a; }
.coverage-check-result.is-pending .coverage-result-head svg { color: #f59e0b; }
.coverage-check-result p { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: #3a4863; }
.coverage-check-result p:last-of-type { margin-bottom: 14px; }
.coverage-check-result em { font-style: normal; font-weight: 600; color: #0B1530; }
.coverage-check-result .coverage-result-matches {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: grid;
    gap: 6px;
}
.coverage-check-result .coverage-result-matches li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 9px 14px;
    background: #ffffff;
    border-radius: 10px;
    font-size: 13.5px;
}
/* Варианты адреса из каталога: выбор дома подтверждает подключение */
.coverage-check-result .coverage-result-matches li.is-choice { padding: 0; overflow: hidden; }
.coverage-check-result .coverage-result-match-button {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 9px 14px;
    border: 0;
    background: #ffffff;
    color: #0B1530;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.coverage-check-result .coverage-result-match-button:hover { background: var(--brand-50); }
.coverage-result-place { color: #0B1530; font-weight: 600; }
.coverage-result-area { color: #8A95AE; font-size: 12px; }
.coverage-result-more { font-size: 12.5px; color: #8A95AE; margin: 0 0 12px; }
.coverage-result-cta { margin-bottom: 12px; color: #126b50; font-weight: 600; }
.coverage-result-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.coverage-result-actions .btn-cta,
.coverage-result-actions .btn-secondary {
    width: auto;
    padding: 11px 18px;
    font-size: 14px;
    text-decoration: none;
}
.coverage-check-result .btn-cta {
    width: auto;
    padding: 11px 18px;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

/* Тихая кнопка «полный список адресов» — внизу карточки проверки */
.coverage-show-all {
    align-self: flex-start;
    margin-top: auto;
    padding-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 0;
    color: #6B7891;
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: color .15s var(--ease);
}
.coverage-show-all svg {
    width: 16px; height: 16px;
    color: #A9B2C5;
    transition: color .15s var(--ease);
}
.coverage-show-all span {
    border-bottom: 1px dashed rgba(107, 120, 145, .35);
    line-height: 1.4;
    transition: border-color .15s var(--ease);
}
.coverage-show-all:hover { color: var(--brand); }
.coverage-show-all:hover svg { color: var(--brand); }
.coverage-show-all:hover span { border-bottom-color: rgba(25, 85, 246, .5); }

/* ============================================================
   COVERAGE — Модалка с полным списком
   ============================================================ */
.coverage-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(11, 21, 48, .55);
    z-index: 1000;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: cm-fadeIn .2s ease;
}
.coverage-modal {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: cm-fadeIn .2s ease;
}
.coverage-modal[hidden],
.coverage-modal-backdrop[hidden] { display: none !important; }
body.coverage-modal-open { overflow: hidden; }

@keyframes cm-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.coverage-modal-card,
.channels-modal-card {
    width: 100%;
    max-width: 720px;
    max-height: 86vh;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(11, 21, 48, .25);
    display: flex;
    flex-direction: column;
    animation: cm-slideUp .25s ease;
}
@keyframes cm-slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.coverage-modal-head,
.channels-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid #eef1f7;
}
.coverage-modal-head-text,
.channels-modal-head-text { flex: 1; }
.coverage-modal-head h3,
.channels-modal-head h2 {
    margin: 0 0 4px;
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: #0B1530;
    line-height: 1.3;
}
.coverage-modal-head-text p,
.channels-modal-head-text p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: #6B7891;
}
.coverage-modal-close,
.channels-modal-close {
    width: 36px; height: 36px;
    background: #F5F7FB;
    border: 0;
    border-radius: 10px;
    color: #4A5575;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background .15s var(--ease), color .15s var(--ease);
}
.coverage-modal-close:hover,
.channels-modal-close:hover { background: #e7ecf3; color: #0B1530; }
.coverage-modal-close svg,
.channels-modal-close svg { width: 20px; height: 20px; }

.coverage-modal-filter,
.channels-modal-filter {
    position: relative;
    padding: 14px 24px;
    border-bottom: 1px solid #eef1f7;
}
.coverage-modal-filter svg,
.channels-modal-filter svg {
    position: absolute;
    top: 50%; left: 38px;
    transform: translateY(-50%);
    width: 18px; height: 18px;
    color: #8A95AE;
    pointer-events: none;
}
.coverage-modal-filter input,
.channels-modal-filter input {
    font: inherit;
    font-size: 14.5px;
    width: 100%;
    padding: 10px 14px 10px 38px;
    border: 1px solid #d8dee9;
    border-radius: 10px;
    background: #ffffff;
    box-sizing: border-box;
}
.coverage-modal-filter input:focus,
.channels-modal-filter input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(25, 85, 246, .14);
}

/* Тело модалки: 3 секции районов одна под другой */
.coverage-modal-body,
.channels-modal-body {
    overflow-y: auto;
    flex: 1;
    padding: 8px 24px 4px;
}
.coverage-modal-region,
.channels-modal-group {
    padding: 14px 0;
    border-bottom: 1px solid #eef1f7;
}
.coverage-modal-region:last-child,
.channels-modal-group:last-child { border-bottom: 0; }
.coverage-modal-region-head,
.channels-modal-group-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}
.coverage-modal-region-head h4,
.channels-modal-group-head h3 {
    margin: 0;
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #0B1530;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.coverage-modal-region-count,
.channels-modal-group-count {
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    background: var(--brand);
    padding: 2px 8px;
    border-radius: 999px;
    line-height: 1.4;
}
.coverage-modal-region-list,
.channels-modal-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 16px;
}
@media (max-width: 600px) {
    .coverage-modal-region-list,
    .channels-modal-list { grid-template-columns: 1fr; }
}
.coverage-modal-region-list li {
    position: relative;
    padding: 5px 0 5px 14px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #4A5575;
}
.coverage-modal-region-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--brand);
    opacity: .45;
}

.coverage-modal-empty-state,
.channels-modal-empty-state {
    margin: 0;
    padding: 28px 24px;
    text-align: center;
    color: #5B6680;   /* 5,7:1 на белом — читается */
    font-size: 14px;
}

.coverage-modal-foot,
.channels-modal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 24px 20px;
    border-top: 1px solid #eef1f7;
    flex-wrap: wrap;
}
.coverage-modal-foot > *,
.channels-modal-foot > * { min-width: 0; }
.coverage-modal-foot p,
.channels-modal-foot p {
    margin: 0;
    font-size: 13px;
    color: #6B7891;
    flex: 1;
    min-width: 200px;
}
.coverage-modal-foot .btn-cta,
.channels-modal-foot .btn-cta {
    width: auto;
    padding: 10px 18px;
    font-size: 14px;
    text-decoration: none;
}
@media (max-width: 520px) {
    .coverage-modal { padding: 12px; }
    .coverage-modal-card,
    .channels-modal-card {
        max-height: calc(100vh - 24px);
        border-radius: 18px;
    }
    .coverage-modal-head,
    .channels-modal-head {
        padding: 18px 18px 14px;
    }
    .coverage-modal-filter,
    .channels-modal-filter {
        padding: 12px 18px;
    }
    .coverage-modal-filter svg,
    .channels-modal-filter svg {
        left: 32px;
    }
    .coverage-modal-body,
    .channels-modal-body {
        padding: 8px 18px 4px;
    }
    .coverage-modal-foot,
    .channels-modal-foot {
        align-items: stretch;
        flex-direction: column;
        padding: 14px 18px calc(18px + env(safe-area-inset-bottom));
    }
    .coverage-modal-foot p,
    .channels-modal-foot p {
        min-width: 0;
    }
    .coverage-modal-foot .btn-cta,
    .channels-modal-foot .btn-cta {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* === Окно «Каналы тарифа» (<dialog>): общий вид — правила модалки улиц выше === */
.channels-modal {
    width: min(720px, calc(100% - 40px));
    max-width: none;
    max-height: none;
    margin: auto;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
    color: inherit;
}
.channels-modal::backdrop {
    background: rgba(11, 21, 48, .55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
/* Закрытое окно скрыто и там, где <dialog> не поддерживается (там это обычный элемент). */
.channels-modal:not([open]) { display: none; }
/* Без showModal: тот же вид поверх страницы. display — только у открытого окна,
   иначе закрытое осталось бы на экране. */
.channels-modal.is-fallback[open] {
    position: fixed;
    inset: 0;
    z-index: 1001;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(11, 21, 48, .55);
}
html.channels-modal-open,
html.lead-modal-open { overflow: hidden; }
/* Пока страница заблокирована, место под полосу прокрутки остаётся — без сдвига. */
html.channels-modal-open,
html.lead-modal-open { scrollbar-gutter: stable; }
/* Ссылка в подсказке «канала нет» (например, на /iptv/) — видна как ссылка. */
.channels-modal-empty-state a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
/* Телефон в горизонтальной ориентации: окну каналов — вся высота, подпись в подвале прячем. */
@media (max-height: 500px) {
    .channels-modal-card { max-height: calc(100dvh - 16px); }
    .channels-modal-head { padding-top: 12px; padding-bottom: 8px; }
    .channels-modal-filter { padding-top: 8px; padding-bottom: 8px; }
    .channels-modal-foot { padding-top: 8px; padding-bottom: 10px; }
    .channels-modal-foot p { display: none; }
}
/* Нет совпадений: список скрыт, сообщение сразу под поиском, подвал на месте. */
.channels-modal-card.is-empty .channels-modal-body { display: none; }
.channels-modal-card.is-empty .channels-modal-status { flex: 1 1 auto; }
/* iOS увеличивает страницу при фокусе на поле мельче 16px — в модалках и поиске каналов 16px. */
@media (max-width: 600px) {
    .modal .field input,
    .modal .field textarea,
    body:not(.page-form) .modal .masked-input input,   /* сильнее правила маски (0,2,2) */
    .modal .mask-overlay,                              /* маска того же размера, что поле */
    .channels-modal-filter input { font-size: 16px; }
}
/* Safari не делает скролл-контейнер фокусируемым сам по себе — tabindex=0 на теле окна. */
.channels-modal-body:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.channels-modal-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 4px 0;
    font-size: 13.5px;
    line-height: 1.4;
    color: #4A5575;
}
.channels-modal-list li img {
    flex: none;
    width: 32px;
    height: 18px;
    object-fit: contain;
    border-radius: 3px;
    background: #F5F7FB;
}
.channels-modal-group[hidden],
.channels-modal-list li[hidden],
.channels-modal-empty-state[hidden] { display: none; }
@media (max-width: 600px) {
    .channels-modal { width: calc(100% - 16px); }
    .channels-modal.is-fallback[open] { padding: 8px; }
    .channels-modal-card {
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
    }
}
@media (prefers-reduced-motion: reduce) {
    .channels-modal-card { animation: none; }
}

/* ============================================================
   PAY — страница оплаты (СБП + Сбербанк Онлайн)
   ============================================================ */
.page-pay { background: #ffffff; }

.pay-hero-section {
    background: #ffffff;
    padding: clamp(36px, 5vw, 64px) 0 clamp(40px, 5vw, 64px);
    border-bottom: 1px solid #eef1f7;
}
.pay-hero-head {
    max-width: 760px;
    margin: 0 0 clamp(24px, 3vw, 36px);
}
.pay-title {
    margin: 0 0 14px;
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    color: #0B1530;
}
.pay-lead {
    margin: 0;
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 1.55;
    color: #4A5575;
    max-width: 640px;
}

.pay-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}
@media (max-width: 900px) {
    .pay-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* Правая колонка — иллюстрация + плюсы */
.pay-illustration-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
}
.pay-illustration {
    display: block;
    margin: 0 auto 20px;
    max-width: 360px;
}
.pay-illustration img {
    display: block;
    width: 100%;
    height: auto;
}
@media (max-width: 900px) { .pay-illustration { max-width: 260px; } }

.pay-perks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
    align-self: center;
}
.pay-perks li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14.5px;
    color: #0B1530;
    font-weight: 500;
}
.pay-perks svg {
    width: 18px; height: 18px;
    flex-shrink: 0;
    color: #16a37b;
}

/* Левая колонка — карточка-форма */
.pay-card {
    background: #ffffff;
    border: 1px solid #E5EAF3;
    border-radius: 20px;
    padding: clamp(22px, 2.5vw, 32px);
    box-shadow: 0 1px 2px rgba(11, 21, 48, .04), 0 12px 36px rgba(11, 21, 48, .08);
}
.pay-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid #eef1f7;
}
.pay-card-badge {
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pay-card-badge img,
.pay-card-badge picture {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}
.pay-card-badge img { object-fit: contain; }
.pay-card-head-text h2 {
    margin: 0 0 2px;
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #0B1530;
    letter-spacing: -.01em;
}
.pay-card-head-text p {
    margin: 0;
    font-size: 13.5px;
    color: #6B7891;
}

/* Поля формы */
.pay-form { display: flex; flex-direction: column; gap: 14px; }
.pay-field { display: flex; flex-direction: column; gap: 6px; }
.pay-field label {
    font-size: 13px;
    font-weight: 600;
    color: #0B1530;
}
.pay-contract-control {
    position: relative;
}
.pay-field .pay-contract-control input {
    min-width: 0;
    padding-right: 116px;
}
.pay-contract-check {
    position: absolute;
    top: 50%;
    right: 7px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid #d8dee9;
    border-radius: 12px;
    background: #F5F7FB;
    color: #4A5575;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.pay-contract-check:hover {
    background: #ffffff;
    border-color: #b8c2d6;
    color: var(--brand);
}
.pay-contract-check:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
.pay-contract-check:disabled {
    cursor: wait;
    opacity: .7;
}
.pay-field input {
    font: inherit;
    font-size: 16px;
    padding: 13px 14px;
    border: 1px solid #d8dee9;
    border-radius: 12px;
    background: #ffffff;
    color: #0B1530;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
    width: 100%;
    box-sizing: border-box;
}
.pay-field input::placeholder { color: #A9B2C5; }
.pay-field input:hover { border-color: #b8c2d6; }
.pay-field input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(25, 85, 246, .14);
}
.pay-field-hint {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #8A95AE;
}
.pay-field-hint a {
    color: var(--brand);
    text-decoration: none;
    border-bottom: 1px dashed rgba(25, 85, 246, .35);
}
.pay-field-hint a:hover { border-color: var(--brand); }

/* ФИО абонента, подтянутое по whois — серым под полем договора. */
.pay-fio-hint {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: #5B6577;
    font-weight: 600;
    font-style: italic;
}
.pay-fio-hint:empty { display: none; }
.pay-fio-hint.is-unresolved {
    color: #6B7891;
    font-weight: 500;
    font-style: normal;
}

/* Преднастройки сумм */
.pay-presets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 2px;
}
.pay-preset {
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 6px;
    background: #F5F7FB;
    color: #4A5575;
    border: 1px solid #E5EAF3;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .12s var(--ease);
}
.pay-preset:hover {
    background: #ffffff;
    border-color: #d8e3ff;
    color: var(--brand);
    transform: translateY(-1px);
}
.pay-preset.is-active {
    background: var(--brand-50);
    border-color: rgba(25, 85, 246, .3);
    color: var(--brand);
}

/* Ошибка */
.pay-error {
    display: none;
    padding: 10px 14px;
    background: rgba(239, 68, 68, .08);
    border: 1px solid rgba(239, 68, 68, .25);
    border-radius: 10px;
    color: #b91c1c;
    font-size: 13.5px;
    line-height: 1.4;
}
.pay-error span { display: block; }

/* Кнопка оплаты */
.pay-submit {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    text-decoration: none;
    font-size: 16px;
    padding: 15px 22px;
}
.pay-submit svg { width: 20px; height: 20px; flex-shrink: 0; }
.pay-submit.is-loading {
    opacity: .7;
    pointer-events: none;
}
.pay-submit.is-loading::before {
    content: '';
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: pay-spin .8s linear infinite;
}
.pay-submit.is-loading svg { display: none; }
@keyframes pay-spin { to { transform: rotate(360deg); } }

/* Скрытые элементы (управляются JS) */
.policy-data-warning--text { display: none; }

/* ============================================================
   PAY — секция инструкций (Вариант 2 Сбербанк)
   ============================================================ */
.pay-instructions-section {
    background: #ffffff;
    padding: clamp(48px, 6vw, 80px) 0;
    border-top: 1px solid #eef1f7;
}
.section-head-pay { max-width: 760px; margin: 0 0 clamp(24px, 3vw, 36px); }
.section-eyebrow {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand);
}
.section-head-pay h2 {
    margin: 0 0 10px;
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: clamp(22px, 2.8vw, 32px);
    font-weight: 700;
    color: #0B1530;
    letter-spacing: -.01em;
}
.section-head-pay .section-sub {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: #4A5575;
    max-width: 640px;
}

.pay-sber-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}
@media (max-width: 900px) {
    .pay-sber-grid { grid-template-columns: 1fr; gap: 28px; }
}
.pay-sber-illust {
    display: flex;
    justify-content: center;
    align-items: center;
}
.pay-sber-illust svg {
    width: 100%;
    max-width: 360px;
    height: auto;
    filter: drop-shadow(0 12px 32px rgba(11, 21, 48, .12));
}

.pay-steps {
    display: grid;
    gap: 12px;
}
.pay-step {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 18px;
    padding: 18px 22px;
    background: #ffffff;
    border: 1px solid #E5EAF3;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(11, 21, 48, .03);
    align-items: start;
}
.pay-step-num {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand);
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    box-shadow: 0 4px 12px rgba(25, 85, 246, .25);
}
.pay-step-body h3 {
    margin: 4px 0 4px;
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #0B1530;
}
.pay-step-body p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: #4A5575;
}
.pay-step-body p a { color: var(--brand); }
@media (max-width: 600px) {
    .pay-step { grid-template-columns: 1fr; gap: 8px; padding: 16px 18px; }
    .pay-step-num { width: 30px; height: 30px; font-size: 14px; }
}

/* ============================================================
   PAY — помощь / договор
   ============================================================ */
.pay-help-section {
    background: #ffffff;
    padding: clamp(40px, 5vw, 64px) 0 clamp(48px, 6vw, 80px);
    border-top: 1px solid #eef1f7;
}
.pay-help-card {
    max-width: 760px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 22px;
    padding: clamp(22px, 2.5vw, 32px);
    background: #ffffff;
    border: 1px solid #E5EAF3;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(11,21,48,.04), 0 6px 16px rgba(11,21,48,.04);
}
.pay-help-icon {
    width: 56px; height: 56px;
    color: var(--brand);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pay-help-icon svg { width: 36px; height: 36px; }
.pay-help-text h3 {
    margin: 0 0 8px;
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #0B1530;
}
.pay-help-text p {
    margin: 0 0 16px;
    font-size: 14.5px;
    line-height: 1.55;
    color: #4A5575;
}
.pay-help-text p a { color: var(--brand); }
.pay-help-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.pay-help-actions .btn-cta,
.pay-help-actions .btn-secondary {
    width: auto;
    padding: 12px 18px;
    font-size: 14px;
    text-decoration: none;
}

/* ============================================================
   SITE PAGES — documents, licences, contacts, terms, vacancies
   Shared public-information pages. The rules are namespaced so existing
   landing, help and article layouts remain unchanged.
   ============================================================ */
.site-page-main {
    flex: 1 0 auto;
    padding: 0;
}
.site-page-skip {
    position: fixed;
    z-index: 1100;
    top: 12px;
    left: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--brand);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform .15s var(--ease);
}
.site-page-skip:focus { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .site-page-skip { transition: none; }
}
.site-page .info-hero {
    background: #ffffff;
    padding: clamp(40px, 5vw, 72px) 0 clamp(36px, 4vw, 56px);
}
.site-page .info-hero__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(220px, .54fr);
    gap: clamp(28px, 6vw, 88px);
    align-items: center;
}
.site-page .info-hero__copy { min-width: 0; }
.site-page .info-hero__art {
    width: min(100%, 390px);
    justify-self: end;
}
.site-page .info-hero__art picture,
.site-page .info-hero__art img {
    display: block;
    width: 100%;
    height: auto;
}
.site-page .info-title,
.site-page-section-head h2,
.site-page-legal-layout h2 {
    text-wrap: balance;
}
.site-page .info-lead,
.site-page-document-body > span,
.site-page-contact-card p,
.site-page-vacancy-card li,
.site-page-details dd {
    text-wrap: pretty;
}
.site-page-section {
    padding: clamp(44px, 6vw, 80px) 0;
    background: #ffffff;
    border-bottom: 1px solid #eef1f7;
}
.site-page-section--tinted {
    background: #ffffff;
}
.site-page-section-head {
    max-width: 760px;
    margin: 0 0 clamp(24px, 3vw, 36px);
}
/* Юридический текст страницы сайта: политики и согласия */
.site-page-prose {
    max-width: 760px;
    color: #3a4863;
    font-size: 15px;
    line-height: 1.6;
}
.site-page-prose h2 {
    margin: 28px 0 10px;
    color: #0B1530;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}
.site-page-prose h2:first-child { margin-top: 0; }
.site-page-prose p,
.site-page-prose ul { margin: 0 0 12px; }
.site-page-prose ul { padding-left: 20px; }
.site-page-prose a { color: var(--brand); }
.site-page-kicker {
    margin: 0 0 8px;
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.site-page-section-head h2,
.site-page-legal-layout h2 {
    margin: 0;
    color: #0B1530;
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: clamp(24px, 3.1vw, 38px);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.12;
}

.site-page-document-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.site-page-document-grid--licenses {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.site-page-document-card {
    min-width: 0;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px;
    padding: clamp(18px, 2vw, 24px);
    border: 1px solid #E5EAF3;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: var(--shadow-l2);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
}
.site-page-document-card:hover {
    border-color: rgba(25, 85, 246, .35);
    box-shadow: var(--shadow-l2-hover);
}
@media (prefers-reduced-motion: no-preference) {
    .site-page-document-card:hover { transform: translateY(-2px); }
}
.site-page-document-card:focus-visible,
.site-page-messenger-list a:focus-visible,
.site-page-contact-link:focus-visible,
.site-page-contact-list a:focus-visible {
    outline: 3px solid rgba(25, 85, 246, .28);
    outline-offset: 3px;
}
.site-page-document-icon,
.site-page-contact-icon,
.site-page-vacancy-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
}
.site-page-document-icon svg,
.site-page-contact-icon svg,
.site-page-vacancy-icon svg {
    width: 30px;
    height: 30px;
}
.site-page-document-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.site-page-document-type {
    width: fit-content;
    padding: 2px 7px;
    border: 1px solid rgba(25, 85, 246, .24);
    border-radius: var(--radius-pill);
    color: var(--brand);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
    line-height: 1.25;
}
.site-page-document-body strong {
    color: #0B1530;
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.28;
}
.site-page-document-body > span:last-child {
    color: #4A5575;
    font-size: 13.5px;
    line-height: 1.5;
}
.site-page-document-arrow {
    color: var(--brand);
    font-size: 20px;
    line-height: 1;
}

.site-page-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.site-page-contact-card,
.site-page-details-card,
.site-page-note-card,
.site-page-vacancy-card {
    min-width: 0;
    border: 1px solid #E5EAF3;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: var(--shadow-l2);
}
.site-page-contact-card {
    padding: clamp(20px, 2.4vw, 28px);
}
.site-page-contact-card h3,
.site-page-note-card h3 {
    margin: 15px 0 7px;
    color: #0B1530;
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
}
.site-page-contact-card p,
.site-page-note-card p {
    margin: 0;
    color: #4A5575;
    font-size: 14px;
    line-height: 1.55;
}
.site-page-contact-link,
.site-page-contact-list a {
    color: var(--brand);
    font-weight: 700;
    text-decoration: none;
}
.site-page-contact-card > .site-page-contact-link {
    display: inline-block;
    margin-top: 18px;
    font-size: 17px;
}
.site-page-contact-card p .site-page-contact-link {
    display: inline;
}
.site-page-contact-list {
    display: grid;
    gap: 8px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}
.site-page-contact-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 8px;
    align-items: baseline;
    font-size: 14px;
}
.site-page-contact-list span {
    color: #6B7891;
    font-size: 12px;
}
.site-page-contact-hours {
    display: grid;
    gap: 8px;
    margin: 18px 0 0;
}
.site-page-contact-hours div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 12px;
    color: #4A5575;
    font-size: 13px;
}
.site-page-contact-hours dt,
.site-page-contact-hours dd { margin: 0; }
.site-page-contact-hours dd { color: #0B1530; font-weight: 700; }
.site-page-messenger-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.site-page-messenger-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 56px;
    padding: 15px 18px;
    border: 1px solid #E5EAF3;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: var(--shadow-l1);
    color: #0B1530;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .15s var(--ease), color .15s var(--ease);
}
.site-page-messenger-list a:hover {
    border-color: rgba(25, 85, 246, .35);
    color: var(--brand);
}
.site-page-details-card { padding: clamp(20px, 3vw, 32px); }
.site-page-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 40px;
    margin: 0;
}
.site-page-details div { min-width: 0; }
.site-page-details dt {
    margin: 0 0 4px;
    color: #6B7891;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.site-page-details dd {
    margin: 0;
    color: #0B1530;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
}

.site-page-legal-layout {
    display: grid;
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
    gap: clamp(24px, 5vw, 72px);
    align-items: start;
}
.site-page-quote {
    margin: 0;
    padding: 0 0 0 clamp(20px, 3vw, 34px);
    border-left: 3px solid var(--brand);
}
.site-page-quote p {
    margin: 0;
    color: #273653;
    font-size: clamp(16px, 1.65vw, 19px);
    font-weight: 500;
    line-height: 1.65;
    text-wrap: pretty;
}
.site-page-note-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: clamp(36px, 5vw, 64px);
    padding: clamp(20px, 3vw, 30px);
}
.site-page-note-card h3 { margin-top: 0; }
.site-page-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}
.site-page-actions .btn-cta,
.site-page-actions .btn-secondary,
.site-page-note-card--vacancies .btn-secondary,
.site-page-vacancy-action {
    width: auto;
    min-height: 44px;
    padding: 12px 18px;
    font-size: 14px;
    text-decoration: none;
}

.site-page-vacancy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.site-page-vacancy-card {
    display: flex;
    flex-direction: column;
    padding: clamp(20px, 2.6vw, 30px);
}
.site-page-vacancy-card:last-child { grid-column: 1 / -1; }
.site-page-vacancy-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.site-page-vacancy-head h3 {
    margin: 0;
    color: #0B1530;
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: clamp(20px, 2.1vw, 25px);
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.2;
}
.site-page-vacancy-salary {
    margin: 7px 0 0;
    color: var(--brand);
    font-size: 14px;
    font-weight: 700;
}
.site-page-vacancy-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.site-page-vacancy-columns h4 {
    margin: 0 0 8px;
    color: #0B1530;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.site-page-vacancy-columns ul {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0 0 0 18px;
    color: #4A5575;
    font-size: 13.5px;
    line-height: 1.5;
}
.site-page-vacancy-columns li::marker { color: var(--brand); }
.site-page-vacancy-conditions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 22px 0 20px;
}
.site-page-vacancy-conditions span {
    padding: 5px 9px;
    border: 1px solid #DDE5F1;
    border-radius: var(--radius-pill);
    color: #4A5575;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
}
.site-page-vacancy-action { align-self: flex-start; margin-top: auto; }
.site-page-note-card--vacancies { margin-top: 16px; }

@media (max-width: 980px) {
    .site-page-document-grid--licenses,
    .site-page-contact-grid { grid-template-columns: 1fr; }
    .site-page-messenger-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-page-legal-layout { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .site-page .info-hero__layout { grid-template-columns: 1fr; }
    .site-page .info-hero__art {
        max-width: 260px;
        justify-self: start;
        margin-top: 4px;
    }
    .site-page-section { padding: 40px 0; }
    .site-page-document-grid,
    .site-page-vacancy-grid,
    .site-page-vacancy-columns,
    .site-page-details { grid-template-columns: 1fr; }
    .site-page-vacancy-card:last-child { grid-column: auto; }
    .site-page-document-card { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; border-radius: 16px; }
    .site-page-document-icon { width: 34px; height: 34px; }
    .site-page-document-icon svg { width: 27px; height: 27px; }
    .site-page-note-card { align-items: stretch; flex-direction: column; gap: 18px; border-radius: 16px; }
    .site-page-actions { justify-content: stretch; flex-direction: column; }
    .site-page-actions .btn-cta,
    .site-page-actions .btn-secondary,
    .site-page-note-card--vacancies .btn-secondary,
    .site-page-vacancy-action { width: 100%; justify-content: center; }
}
@media (max-width: 460px) {
    .site-page-messenger-list { grid-template-columns: 1fr; }
    .site-page-contact-hours div { flex-direction: column; gap: 1px; }
}
@media (max-width: 600px) {
    .pay-help-card { grid-template-columns: 1fr; }
    .pay-help-actions .btn-cta,
    .pay-help-actions .btn-secondary { width: 100%; text-align: center; }
}

/* ============================================================
   IPTV PAGE (/iptv/) — цифровое ТВ «Смотрёшка»
   Контент — со старой stat.mk-net.ru; блоки — из «Для домов»
   (hero, .fiber-card, .town-cta, .tariff-tabs), карточки тарифов свои.
   ============================================================ */
.page-iptv { background: #ffffff; }
.page-iptv .hero-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
@media (max-width: 980px) {
    .page-iptv .hero-wrap { grid-template-columns: 1fr; }
}
.page-iptv main { padding: 0; }   /* общий отступ main — под страницы-формы */
.page-iptv section[id] { scroll-margin-top: 90px; }   /* якоря не прячутся под липкой шапкой */
.page-iptv .hero-title {
    font-size: clamp(26px, 3.8vw, 46px);
    letter-spacing: -.015em;
    line-height: 1.08;
}
@media (max-width: 600px) {
    .page-iptv .hero-title { font-size: clamp(24px, 7vw, 32px); }
}
.page-iptv .hero-illust img { max-width: 620px; }
.page-iptv .hero-cta .btn-cta { width: auto; padding: 16px 44px; }

/* Где работает приложение «Смотрёшка» */
.iptv-platforms-label,
.town-cta-text .iptv-apps .iptv-platforms-label {
    margin: 0 0 2px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}
.iptv-platforms {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--fg-2);
}
.iptv-platforms li { white-space: nowrap; }
/* Точка — в конце пункта: строка может ею закончиться, но не начаться. */
.iptv-platforms li:not(:last-child)::after { content: '·'; margin: 0 8px; color: var(--muted-2); font-weight: 400; }

/* Секции — белые, с тонким разделителем */
.iptv-section {
    padding: clamp(48px, 7vw, 96px) 0;
    border-top: 1px solid #eef1f7;
}
.iptv-section .section-head h2 { max-width: 760px; }

/* Преимущества: 3 × 2 карточки .fiber-card */
.iptv-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 22px);
}
@media (max-width: 900px) { .iptv-benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .iptv-benefits-grid { grid-template-columns: 1fr; gap: 10px; } }
.iptv-icon-air      { color: #16a37b; }
.iptv-icon-net      { color: #4d8cff; }
.iptv-icon-epg      { color: #e85ba6; }
.iptv-icon-archive  { color: #f08d63; }
.iptv-icon-anywhere { color: #9b7ad9; }
.iptv-icon-screens  { color: #3b7eff; }

/* «5 экранов» — CTA-плашка */
.iptv-screens {
    margin-top: clamp(20px, 3vw, 32px);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px clamp(16px, 2.5vw, 28px);
    padding: clamp(20px, 2.5vw, 28px) clamp(20px, 3vw, 36px);
    background: #F5F7FB;
    border-radius: 20px;
}
.iptv-screens-num {
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: clamp(48px, 6vw, 72px);
    font-weight: 900;
    line-height: 1;
    color: var(--brand);
}
.iptv-screens-text {
    flex: 1 1 280px;
    margin: 0;
    max-width: 560px;
    font-size: clamp(17px, 1.8vw, 21px);
    font-weight: 700;
    line-height: 1.35;
    color: var(--fg);
}
.iptv-screens-btn { width: auto; margin-left: auto; padding: 14px 32px; }
@media (max-width: 600px) {
    .iptv-screens { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
    .iptv-screens-btn { grid-column: 1 / -1; justify-self: start; margin-left: 0; }
}

/* Тарифы */
.iptv-tabs { max-width: 440px; margin-bottom: clamp(20px, 2.5vw, 28px); }
.iptv-tariff-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 22px);
}
.iptv-panel[hidden] { display: none; }
.iptv-note { margin: 16px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.iptv-tariff-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .iptv-tariff-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .iptv-tariff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .iptv-tariff-grid, .iptv-tariff-grid-4 { grid-template-columns: 1fr; gap: 12px; } }
/* Планшет, две колонки: третья карточка пакетов — во всю ширину, а не половинка. */
@media (min-width: 601px) and (max-width: 900px) {
    .iptv-tariff-grid > .iptv-tariff:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.iptv-tariff {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    --iptv-card-pad-top: 24px;
    --iptv-card-pad-x: 22px;
    padding: var(--iptv-card-pad-top) var(--iptv-card-pad-x) 20px;
    background: #ffffff;
    border: 1px solid #E5EAF3;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(11, 21, 48, .04), 0 8px 18px rgba(11, 21, 48, .04);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.iptv-tariff:hover {
    transform: translateY(-3px);
    border-color: #d8e3ff;
    box-shadow: 0 2px 4px rgba(11, 21, 48, .04), 0 18px 36px rgba(11, 21, 48, .08);
}
.iptv-tariff-name {
    margin: 0 0 12px;
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.2;
    color: var(--fg);
}
.iptv-tariff-speed,
.iptv-tariff-count {
    margin: 0 0 4px;
    font-size: 14px;
    color: var(--muted);
}
.iptv-tariff-speed strong {
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--fg);
}
.iptv-tariff-count strong { font-size: 18px; font-weight: 800; color: var(--fg); }
.iptv-tariff-addon {
    margin: 0 0 6px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    color: #7c55c9;
}
/* «Список каналов» — кнопка-ссылка, как «+N каналов» в конструкторе */
.iptv-tariff-list {
    margin: 2px 0 0;
    padding: 0;
    background: none;
    border: 0;
    border-bottom: 1px dotted currentColor;
    color: var(--brand);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}
.iptv-tariff-list:hover { border-bottom-style: solid; }
/* Нажимать удобно пальцем: область кнопки больше текста. */
.iptv-tariff-list { position: relative; }
.iptv-tariff-list::after { content: ''; position: absolute; inset: -12px -8px; }
.iptv-tariff-price {
    margin: auto 0 0;
    padding-top: 18px;
    font-size: 14px;
    color: var(--muted);
}
.iptv-tariff-price strong {
    margin-right: 4px;
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--fg);
}
/* Строка над ценой (Хит 300): цены карточек в ряду стоят на одной линии. */
.iptv-tariff-extra { margin: auto 0 0; padding-top: 18px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.iptv-tariff-extra + .iptv-tariff-price { margin-top: 0; padding-top: 6px; }
.iptv-tariff-cta {
    align-self: stretch;
    margin-top: 16px;
    padding: 12px 18px;
    background: var(--brand-50);
    color: var(--brand);
    border: 1px solid rgba(25, 85, 246, .18);
    border-radius: 12px;
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.iptv-tariff-cta:hover {
    background: var(--brand);
    color: #ffffff;
    border-color: var(--brand);
    box-shadow: 0 6px 16px rgba(25, 85, 246, .28);
}
.iptv-tariff-list:focus-visible,
.iptv-tariff-cta:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}
.iptv-addon-content { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.iptv-subhead {
    margin: clamp(36px, 5vw, 56px) 0 clamp(16px, 2vw, 22px);
    font-family: "Onest", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--fg);
}
/* Иконка тарифа перед названием: без подложки, пастельные цвета. */
.iptv-tariff-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 12px;
}
.iptv-tariff-head .iptv-tariff-name { margin: 0; }
.iptv-tariff-icon { flex: none; width: 26px; height: 26px; }
.iptv-tariff-icon.is-mint { color: #3cc4a1; }
.iptv-tariff-icon.is-coral { color: #ff8a66; }
.iptv-tariff-icon.is-amber { color: #f2ae34; }
.iptv-tariff-icon.is-lavender { color: #a38af5; }
.iptv-tariff-icon.is-rose { color: #f47a9e; }
.iptv-tariff-icon.is-sky { color: #55a7f3; }

/* Шапки тематических пакетов (иллюстрации) и онлайн-кинотеатров (логотип на фирменном
   фоне партнёра) — от края до края карточки. */
.iptv-pack,
.iptv-addon { overflow: hidden; }
.iptv-pack-cover,
.iptv-addon-cover {
    align-self: stretch;
    margin: calc(-1 * var(--iptv-card-pad-top)) calc(-1 * var(--iptv-card-pad-x)) 18px;
}
.iptv-pack-cover { display: block; aspect-ratio: 2 / 1; max-height: 260px; background: #f5f7fb; }
.iptv-pack-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.iptv-addon-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 5 / 2;
    max-height: 160px;
    background: #111113;
}
.iptv-addon-cover img { width: 62%; max-width: 190px; height: auto; }
.iptv-addon-cover.is-amediateka { background: radial-gradient(120% 100% at 50% 130%, rgba(255, 255, 255, .12), transparent 60%), #111113; }
.iptv-addon-cover.is-start { background: radial-gradient(120% 100% at 50% 130%, rgba(157, 113, 252, .45), transparent 62%), #14161a; }
.iptv-addon-cover.is-premier { background: radial-gradient(120% 100% at 50% 130%, rgba(253, 221, 45, .28), transparent 62%), #0f0f10; }
.iptv-addon-cover.is-smotreshka { background: radial-gradient(120% 100% at 50% 130%, rgba(255, 193, 37, .30), transparent 62%), #000000; }

@media (prefers-reduced-motion: reduce) {
    .iptv-tariff, .iptv-tariff-cta, .iptv-video-play-pill { transition: none; }
    .iptv-tariff:hover, .iptv-video-play:hover .iptv-video-play-pill { transform: none; }
}

/* Кинотеатр и финал — карточки .town-cta; кнопки не растягиваем */
.iptv-cta-card .town-cta-btn { width: auto; }
.iptv-final .iptv-apps { margin: 0 0 20px; }

/* Схема подключения */
.iptv-scheme-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
}
@media (max-width: 800px) {
    .iptv-scheme-grid { grid-template-columns: 1fr; }
    .iptv-scheme-illust { max-width: 460px; margin: 0 auto; }
}
.iptv-scheme-illust img { display: block; width: 100%; height: auto; max-width: 600px; }
.iptv-devices {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
@media (max-width: 420px) { .iptv-devices { grid-template-columns: 1fr; } }
@media (min-width: 801px) and (max-width: 1023px) { .iptv-devices { grid-template-columns: 1fr; } }
.iptv-scheme-note { margin: -8px 0 20px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.iptv-devices li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid #E5EAF3;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(11, 21, 48, .04), 0 8px 18px rgba(11, 21, 48, .04);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--fg);
}
.iptv-devices svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--brand); }
.iptv-scheme-btn { width: auto; padding: 14px 32px; }

/* Видео интерфейса: обложка-иллюстрация, файл грузится по нажатию */
.iptv-video {
    position: relative;
    max-width: 646px;   /* 644 px видео + рамка: без растягивания */
    margin: 0 auto;
    aspect-ratio: 644 / 432;
    overflow: hidden;
    background: #F5F7FB;
    border: 1px solid #E5EAF3;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(11, 21, 48, .04), 0 8px 18px rgba(11, 21, 48, .04);
}
.iptv-video-player {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent;
}
.iptv-video.is-playing .iptv-video-player { background: #000000; }
.iptv-video-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 0 22px;
    background: transparent;
    border: 0;
    border-radius: inherit;
    font: inherit;
    cursor: pointer;
}
.iptv-video-play-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px 12px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 100%);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 10px 28px rgba(25, 85, 246, .28);
    transition: transform .15s var(--ease);
}
.iptv-video-play-pill svg { width: 18px; height: 18px; }
.iptv-video-play:hover .iptv-video-play-pill { transform: translateY(-2px); }
.iptv-video-desc { max-width: 646px; margin: 12px auto 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); text-align: center; }
/* Кнопка и плеер во всю рамку с overflow:hidden — кольцо фокуса внутрь. */
.iptv-video-play:focus-visible,
.iptv-video-player:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: -4px;
}

/* ТВ-каналы: логотипы первых каналов по номеру */
.iptv-logos {
    list-style: none;
    margin: 0 0 clamp(20px, 3vw, 32px);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 12px;
}
.iptv-logos li { display: flex; justify-content: center; }
.iptv-logos img {
    display: block;
    width: 96px;
    height: 54px;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(11, 21, 48, .06), 0 4px 12px rgba(11, 21, 48, .06);
}
.iptv-channels-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.iptv-channels-actions .btn-cta { width: auto; padding: 14px 32px; }
.iptv-channels-all { padding: 14px 24px; }
@media (max-width: 600px) {
    .iptv-logos { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px; }
    .iptv-logos img { width: 76px; height: auto; aspect-ratio: 16 / 9; }
    .iptv-channels-actions { flex-direction: column; }
    .iptv-channels-actions .btn-cta,
    .iptv-channels-actions .btn-secondary { width: 100%; min-height: 52px; }
}