/* ===== Мобильная вёрстка: правки UX-аудита ===== */

/* Шапка: логотип и бургер не прилипают к верхнему краю экрана */
@media (max-width: 991.98px) {
    .site-header {
        padding-top: 16px;
    }

    /* Тап-зона бургера — не меньше 44x44 (визуальный размер не меняется) */
    .burger-menu {
        padding: 8px;
        margin: -8px;
    }
}

/* Тарифы: на телефонах один тариф в ряд + читаемые размеры текста
   (в две колонки карточка сжималась до 116–144px, список — до 6px) */
@media (max-width: 575.98px) {
    .tariffs-section .col-6 {
        width: 100%;
    }

    .tariff-card {
        padding: 20px;
    }

    .tariff-card-title {
        font-size: 17px;
        line-height: 1.35;
    }

    .tariff-card-price {
        font-size: 26px;
    }

    .tariff-card-list li {
        font-size: 13px;
        line-height: 1.45;
    }

    .tariff-deadline {
        font-size: 13px;
    }

    .btn-tariff {
        font-size: 14px;
        padding: 10px 24px;
    }
}

/* Bootstrap 4: колонку тарифа надо расширять через flex-basis и max-width */
@media (max-width: 575.98px) {
    .tariffs-section .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Бургер: явные размеры тап-зоны 46x46 при прежнем визуале */
@media (max-width: 991.98px) {
    .burger-menu {
        width: 46px;
        height: 46px;
        padding: 8px;
        margin: -8px;
        box-sizing: border-box;
    }
}

/* ===== Логотипы: закреплённый бейдж слева, карусель справа ===== */
.logos-carousel-wrapper {
    display: flex;
    align-items: center;
    gap: 30px;
}

.logo-pinned {
    flex: 0 0 auto;
}

.logos-carousel-wrapper .carousel {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 575.98px) {
    .logos-carousel-wrapper {
        gap: 12px;
    }
}

/* ===== Бесконечная лента слайдеров (включается, когда элементы не помещаются) ===== */
.ribbon-viewport {
    overflow: hidden;
    padding: 10px 0;
}

.ribbon-track {
    display: flex;
    align-items: center;
    gap: 40px;
    width: max-content;
}

.ribbon-track.ribbon-static {
    width: 100%;
    justify-content: space-around;
}

.ribbon-track.ribbon-run {
    animation: ribbon-move var(--ribbon-duration, 40s) linear infinite;
    will-change: transform;
}

.ribbon-track.ribbon-run:hover {
    animation-play-state: paused;
}

@keyframes ribbon-move {
    from { transform: translateX(0); }
    to   { transform: translateX(var(--ribbon-shift, -50%)); }
}

@media (max-width: 767.98px) {
    .ribbon-track {
        gap: 24px;
    }
}

/* ===== Якорное меню: липкая шапка и поведение прокрутки ===== */

/* z-index выше затемнения body.menu-open::before (1000), чтобы бургер и
   выезжающая панель (локальные z-index 1001/1002) оставались кликабельны */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1010;
}

/* Штатный фон шапки прозрачный (сквозь неё виден декоративный фон первого
   экрана), поэтому при прокрутке подкладываем белый — иначе контент
   просвечивает под прилипшей шапкой. Класс ставит js/menu.js */
.site-header.is-stuck {
    background: #fff;
    box-shadow: 0 4px 20px rgba(13, 32, 65, 0.08);
}

/* Компактная прилипшая шапка: штатно 133px на десктопе (24px паддинги
   .header-right.p-4 + 39px снизу) — белая полоса съедала экран при чтении
   тарифов. --header-h пересчитает ResizeObserver в menu.js, якоря и
   scroll-spy подстроятся сами */
.site-header {
    transition: padding 0.25s ease, box-shadow 0.25s ease;
}

@media (min-width: 992px) {
    .header-right {
        transition: padding 0.25s ease;
    }

    .site-header.is-stuck {
        padding-bottom: 10px;
    }

    /* p-4 Bootstrap с !important — перебиваем той же важностью, файл позже */
    .site-header.is-stuck .header-right {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

@media (max-width: 991.98px) {
    .site-header.is-stuck {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

/* Шапка: логотип чуть крупнее (148→172px по ширине, пропорции viewBox),
   гарантированный воздух между логотипом и меню */
@media (min-width: 992px) {
    .logo-link svg {
        width: 172px;
        height: 34px;
    }

    .header-inner {
        gap: 40px;
    }
}

/* На 1200–1439px межпунктовый шаг меню (штатно 56px) был больше зазора
   до логотипа (37px) — меню «прилипало». Сжимаем шаги, освобождая центр */
@media (min-width: 1200px) and (max-width: 1439px) {
    .main-menu .menu {
        gap: 40px;
    }

    .header-right {
        gap: 40px;
    }
}

/* Заголовки секций не прячутся под липкой шапкой при переходе по якорю.
   --header-h выставляет js/menu.js по фактической высоте шапки */
#solution,
#tariffs,
#how,
#cases,
#faq,
#about,
#calculate,
#callback {
    scroll-margin-top: calc(var(--header-h, 96px) + 8px);
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Телефон в мобильной панели меню (блок скрыт на десктопе через d-lg-none родителя) */
.mobile-menu-phone {
    display: block;
    width: 100%;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: -0.03em;
    color: #0D2041;
    text-decoration: none;
    padding: 14px 0;
    border-top: 1px solid #E5E5E5;
}

/* Блокировка прокрутки фона при открытом мобильном меню */
body.menu-open {
    overflow: hidden;
}

/* ===== Подвал: дизайн-аудит ===== */

/* Навигация: читаемый кегль и полноценные тап-зоны.
   Штатно 12px на десктопе, на телефонах каскад до 9px при зонах 11px */
.footer-nav ul li a {
    font-size: 14px;
    display: inline-block;
    padding: 6px 0;
}

@media (max-width: 768px) {
    .footer-nav ul li a {
        padding: 8px 0;
    }
}

/* Контраст на синем фоне: 0.7 давал 3.5:1, 0.8 — 4.1:1 (WCAG AA требует 4.5:1) */
.footer-nav h4 {
    color: rgba(255, 255, 255, 0.92);
}

.footer-text {
    color: rgba(255, 255, 255, 0.92);
}

/* ===== Итерация 1 конверсионного аудита (авг 2026) ===== */

/* Траст-строка на первом экране: пилюли в стиле .tariff-tab/.info-tag
   (радиус 30px, Inter 500, кегль 12px — визуальный язык сайта) */
.hero-trust {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 14px;
}

.hero-trust-item {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 30px;
    background: #F6F6F6;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 110%;
    letter-spacing: -0.02em;
    color: #0D2041;
    white-space: nowrap;
}

.hero-trust-item--accent {
    background: rgba(2, 94, 242, 0.08);
    color: #025EF2;
    font-weight: 600;
}

@media (min-width: 1440px) {
    .hero-trust-item {
        font-size: 13px;
        padding: 9px 18px;
    }
}

@media (max-width: 380px) {
    .hero-trust-item {
        font-size: 11px;
        padding: 7px 12px;
    }
}

/* Телефон в шапке (показывается только на десктопе через d-none d-lg-inline-flex).
   Кегль = пунктам меню (14px), вес 600 отличает его от навигации */
.header-phone {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.02em;
    color: #0D2041;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.header-phone:hover {
    color: #005AF3;
    text-decoration: none;
}

/* ===== Единая система кнопок =====
   До правки: веса 400/500/700, два синих (#005AF3 и #025EF2), у «Заказать» —
   контурный стиль. Теперь: один синий #005AF3, hover #0040b3 (как у .btn-calc
   в page.css), вес 600 у всех. Два размера: L — самостоятельные CTA
   (.btn-calc, .btn-callback), M — кнопки внутри карточек (.btn-tariff, .info-btn) */
.btn-calc,
.btn-callback,
.info-btn,
.btn-tariff {
    font-weight: 600;
}

/* Кнопка «Заказать» в тарифах — основная (заливная), а не контурная.
   Инверсия при hover карточки (белая кнопка на синей карточке) остаётся
   из page.css: у тех правил специфичность выше */
.btn-tariff {
    background: #005AF3;
    color: #FFFFFF;
    font-size: 13px;
}

.btn-tariff:hover {
    background: #0040b3;
    color: #FFFFFF;
}

.info-btn {
    font-size: 13px;
}

/* CTA после кейсов */
.cases-cta {
    text-align: center;
    margin-top: 48px;
}

.cases-cta-text {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 140%;
    letter-spacing: -0.02em;
    color: #0D2041;
    margin: 0 auto 20px;
    max-width: 640px;
}

@media (max-width: 575.98px) {
    .cases-cta {
        margin-top: 28px;
    }

    .cases-cta-text {
        font-size: 15px;
    }
}

/* Ссылки внутри ответов FAQ */
.faq-answer a {
    color: #005AF3;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Реквизиты в подвале: мельче копирайта, контраст сохранён (0.92) */
.footer-requisites {
    font-size: 12px;
}

/* ===== Типографика: аудит шрифтов (авг 2026) ===== */

/* Десктоп 992–1439px: H1 был 32px — мельче большинства H2 (36–48px),
   иерархия перевёрнута; лестница H2 разнобойная (24/32/36/48).
   Приводим: H1 44px, все H2 — 36px. На ≥1440 штатная шкала (H1 72px) не тронута */
@media (min-width: 992px) and (max-width: 1439px) {
    .hero-title {
        font-size: 44px;
    }

    .section-title,
    .advantages-title,
    .tabs-main-title,
    .tariffs-title,
    .stages-title,
    .info-title,
    .faq-title,
    .stats-title,
    .partners-title,
    .contact-title {
        font-size: 36px;
        line-height: 110%;
    }

    /* Оффер первого экрана читался 14px — мельче текста кейсов (18px) */
    .hero-description,
    .hero-subtext {
        font-size: 16px;
        line-height: 140%;
    }

    /* Карточки проблем: текст 12px при просторных карточках */
    .card-title {
        font-size: 16px;
    }

    .card-text {
        font-size: 14px;
        line-height: 145%;
    }
}

/* Декоративный номер карточки «[ 01 ]» был 8px во всех вьюпортах */
.card-number {
    font-size: 12px;
}

/* Подпись под формой обратного звонка: 11–12px на синем фоне */
.footer-subscribe p {
    font-size: 13px;
    line-height: 150%;
}

/* ===== «О нас»: карточка про ИИ и вайбкодинг ===== */

/* Мобильный каскад секции задаёт колонкам flex 0 0 50% — возвращаем
   полноширинную колонку под карточку */
.stats-section .row > .col-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

.ai-card {
    background: #F6F6F6;
    border-radius: 20px;
    padding: 32px;
    margin-top: 24px;
}

.ai-card-title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 120%;
    letter-spacing: -0.03em;
    color: #0D2041;
    margin: 0 0 14px;
}

.ai-card-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 150%;
    letter-spacing: -0.02em;
    color: #4B5563;
    margin: 0;
    max-width: 900px;
}

.ai-card-text + .ai-card-text {
    margin-top: 10px;
}

@media (max-width: 575.98px) {
    .ai-card {
        padding: 20px;
        border-radius: 16px;
    }

    .ai-card-title {
        font-size: 18px;
    }

    .ai-card-text {
        font-size: 14px;
    }
}

/* Мобильные размеры: каскад Битрикса давил тексты до 8–12px.
   Нижняя граница читаемости: основной текст 13–14px, ярлыки 11–12px */
@media (max-width: 575.98px) {
    .hero-description,
    .hero-subtext {
        font-size: 14px;
        line-height: 145%;
    }

    .section-title,
    .advantages-title,
    .tabs-main-title,
    .tariffs-title,
    .stages-title,
    .info-title,
    .faq-title,
    .stats-title,
    .partners-title,
    .contact-title {
        font-size: 22px;
        line-height: 115%;
    }

    .card-text {
        font-size: 13px;
        line-height: 145%;
    }

    .advantages-subtitle {
        font-size: 14px;
        line-height: 140%;
    }

    .tab-item .tab-title {
        font-size: 13px;
    }

    .tab-content-list li {
        font-size: 13px;
        line-height: 145%;
    }

    .tariff-tab {
        font-size: 12px;
    }

    /* «Как работаем» на телефоне: штатная абсолютная раскладка «по кругу»
       давала карточки 85px высотой с текстом 9px, обрезкой и наложением
       [05] на соседние. Раскладываем колонкой в DOM-порядке [01]→[05],
       декоративный круг с центральной иконкой скрываем */
    .stages-wrapper {
        height: auto;
    }

    .stages-bg,
    .stages-center-icon {
        display: none;
    }

    .stages-cards {
        position: static;
    }

    .stage-card {
        position: static;
        width: 100%;
        height: auto;
        margin: 0 0 12px;
        /* нейтрализуем орбитальные сдвиги десктопной анимации */
        transform: none !important;
    }

    .stage-card h4 {
        font-size: 14px;
    }

    .stage-card p {
        font-size: 13px;
        line-height: 140%;
    }

    .info-subtitle {
        font-size: 18px;
    }

    .info-text {
        font-size: 14px;
        line-height: 145%;
    }

    .info-tag {
        font-size: 11px;
    }

    .faq-question h4 {
        font-size: 15px;
        line-height: 130%;
    }

    .faq-answer p {
        font-size: 14px;
        line-height: 145%;
    }

    .stats-text {
        font-size: 13px;
    }
}