/* ==========================================================================
   МОБИЛЬНАЯ ВЕРСТКА И АДАПТИВНОСТЬ (mobile-style.css) – ОЧИЩЕННАЯ ВЕРСИЯ
   ========================================================================== */

/* Базовые элементы бургер-меню (активны на экранах меньше 992px) */
.header__actions-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header__burger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 110;
}

.header__burger span {
    width: 100%;
    height: 2px;
    background-color: var(--text-main);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: left center;
}

.header__burger.active span:nth-child(1) {
    transform: rotate(45deg) translate(2px, -2px);
    background-color: var(--accent-cyan);
}

.header__burger.active span:nth-child(2) {
    width: 0%;
    opacity: 0;
}

.header__burger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(2px, 2px);
    background-color: var(--accent-cyan);
}

/* Контейнер полноэкранного мобильного меню */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(8, 11, 17, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 105;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    border-bottom: 1px solid rgba(0, 242, 254, 0.1);
}

.mobile-menu.active {
    transform: translateY(0);
    opacity: 1;
}

/* Кнопка крестика для закрытия внутри выпадающего меню */
.mobile-menu__close {
    position: absolute;
    top: 24px;
    right: 24px;
    background: transparent;
    border: none;
    color: var(--text-main);
    font-size: 42px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 12px;
    z-index: 107;
    transition: color 0.3s ease, transform 0.3s ease;
}

.mobile-menu__close:hover {
    color: var(--accent-cyan);
    transform: scale(1.1);
    text-shadow: 0 0 12px rgba(0, 242, 254, 0.8);
}

.mobile-menu__nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    width: 100%;
    padding: 24px;
}

/* Стили логотипа в выпадающем меню */
.mobile-menu__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    background-color: #0f1524;
    border-radius: 50%;
    border: 2px solid var(--accent-cyan);
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.5), inset 0 0 10px rgba(0, 242, 254, 0.3);
    margin-bottom: 12px;
    padding: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mobile-menu__logo:hover {
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(0, 242, 254, 0.8), inset 0 0 15px rgba(0, 242, 254, 0.5);
}

.mobile-menu__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mobile-menu__link {
    font-family: var(--font-mono);
    color: var(--text-main);
    text-decoration: none;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.mobile-menu__link:hover {
    color: var(--accent-cyan);
    text-shadow: 0 0 10px rgba(0, 242, 254, 0.6);
}

body.no-scroll {
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Планшетная и мобильная адаптация (Экран меньше 992px)
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    .header__container {
        padding: 0 16px;
    }

    .nav {
        display: none;
    }

    .header__burger {
        display: flex;
    }

    .header__actions-wrapper {
        position: relative;
        left: -16px;
    }

    .hero {
        padding-top: 140px;
        padding-bottom: 60px;
    }

    .hero__container {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .badge {
        justify-content: center;
    }

    .hero__actions {
        justify-content: center;
    }

    .diagnostic-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: max-content;
        margin: 16px 0;
        text-align: left;
    }

    .diagnostic-benefit {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 16px;
        font-weight: 500;
        color: var(--text-main);
        margin: 6px 0;
    }

    .tech-circuit {
        margin: 0 auto;
        max-width: 340px;
    }

    .services {
        padding: 60px 0;
    }

    .services__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .contacts {
        padding: 60px 0;
    }

    .contacts__wrapper {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .contacts__info {
        padding: 32px;
    }

    .contacts__map-panel {
        padding: 0 14px 14px;
        width: 100%;
        height: 400px;
    }

    .contacts__map-panel iframe {
        width: 100%;
        height: 100%;
        border-radius: 8px;
    }

    /* Кибер-блок */
    .cyber-preventive__grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .cyber-preventive__content {
        align-items: center;
        text-align: center;
    }
    .cyber-preventive__title {
        font-size: 36px;
    }
    .cyber-graphic-wrapper {
        max-width: 380px;
    }
}

/* --------------------------------------------------------------------------
   Смартфоны (максимум 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }

    .hero__title {
        font-size: 34px;
    }

    .hero__text {
        font-size: 16px;
    }

    .services__grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        padding: 24px;
    }

    .contacts {
        padding: 48px 0;
    }

    .contacts__info {
        padding: 24px 20px;
    }

    .contact-item__icon svg {
        width: 20px;
        height: 20px;
    }

    .contact-item__label {
        font-size: 11px;
    }

    .contact-item__value {
        font-size: 13px;
    }

    .contacts__map-panel {
        height: 350px;
    }

    .footer {
        padding: 24px 0;
    }

    .footer__container {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .footer p {
        font-size: 12px;
        order: 2;
    }

    .developer-credits {
        order: 1;
        flex-direction: column;
        gap: 8px;
    }

    .developer-credits__text {
        font-size: 10px;
    }

    .developer-credits__brand {
        padding: 5px 10px;
    }

    .cyber-preventive {
        padding: 60px 0;
    }
}

/* --------------------------------------------------------------------------
   Малые мобильные устройства (максимум 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .header__container {
        height: 70px;
    }

    .logo {
        font-size: 20px;
    }

    .btn--header {
        padding: 8px 12px;
        font-size: 11px;
    }

    .btn--header span {
        display: none;
    }

    .btn--header svg {
        margin: 0;
        width: 18px;
        height: 18px;
    }

    .hero__content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .hero__title {
        font-size: 28px;
    }

    .hero__actions {
        flex-direction: column;
        width: 100%;
        gap: 12px;
        position: relative;
        left: -13px;
    }

    .hero__actions .btn {
        width: 100%;
        justify-content: center;
    }

    .hero-slogan-widget {
        max-width: 100%;
        padding: 12px;
        position: relative;
        left: -15px;
    }

    /* Добавьте это правило для смещения текста слогана */
    .slogan-shifted {
        margin-left: -39px;
    }

    .mobile-menu__link {
        font-size: 18px;
    }

    .diagnostic-container {
        margin: 12px 0 20px 0;
    }

    .cyber-preventive__title {
        font-size: 28px;
    }
    .cyber-check-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* --------------------------------------------------------------------------
   Ультра-малые экраны (максимум 360px)
   -------------------------------------------------------------------------- */
/* Специальная адаптация для очень узких экранов (360px) */
@media (max-width: 360px) {
    .hero {
        padding: 100px 0;
        overflow: hidden; /* Предотвращает появление горизонтального скролла */
    }

    .hero__container {
        padding: 0 10px; /* Уменьшаем боковые отступы */
    }

    .hero__title {
        font-size: 24px; /* Уменьшаем заголовок, чтобы он не переносился слишком часто */
        line-height: 1.2;
    }

    .hero__text {
        font-size: 14px;
        margin-bottom: 5px;
    }

    /* Уменьшаем графику визуально, не меняя сам SVG */
    .hero__visual {
        max-width: 100%;
        margin-top: 20px;
        transform: scale(0.85); /* Масштабируем SVG, качество остается идеальным */
        transform-origin: center center;
    }

    /* Подтягиваем кнопки, чтобы они влезли на экран */
    .hero__actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        align-items: center;
    }

    .btn {
        width: 100%;
        max-width: 300px; /* Ограничиваем максимальную ширину кнопок */
        padding: 12px 15px;
        font-size: 13px; /* Немного уменьшаем шрифт для лучшей вмещаемости */
        text-align: center;
        white-space: nowrap; /* Запрещаем перенос текста внутри кнопки */
        overflow: hidden;
        text-overflow: ellipsis; /* Если текст все же не влезет, добавится многоточие */
        transform: scale(0.95); /* Легкое масштабирование, чтобы кнопка гарантированно не задевала края */
    }
}

    /*!* Подправляем сдвиг слогана, чтобы он не уходил за границы *!*/
    /*.slogan-shifted {*/
    /*    margin-left: -63px;*/
    /*    font-size: 0.9rem;*/
    /*}*/
    /* Адаптация виджета слогана для 360px */
    .hero-slogan-widget {
        display: flex;
        align-items: center;
        gap: 10px;
        transform: scale(0.85); /* Масштабируем весь блок целиком */
        transform-origin: left center; /* Фиксируем левую часть */
        margin-left: 5px; /* Минимальный сдвиг, чтобы скомпенсировать масштаб */
        width: calc(100% + 40px); /* Позволяет блоку занимать нужное пространство */
    }

    .slogan-shifted {
        margin-left: -10px; /* Убираем жесткий отрицательный отступ */
        font-size: 0.9rem;
        text-align: left;
    }

    .slogan-widget__graphic {
        flex-shrink: 0; /* Запрещаем иконке сжиматься */
    }


/* Исправление выравнивания секции профилактики на мобильных */
@media (max-width: 992px) {
    .cyber-preventive__content {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Прижимает всё содержимое к левому краю */
        text-align: left;        /* Гарантирует, что текст выровнен слева */
        width: 100%;
    }

    .cyber-preventive__title,
    .cyber-preventive__lead,
    .cyber-preventive__text-block,
    .cyber-preventive__checklist {
        text-align: left;
        margin-left: 0;
        margin-right: auto;
    }

    .cyber-check-item {
        justify-content: flex-start; /* Иконки выравниваются по левому краю */
        text-align: left;
    }

    .cyber-btn {
        margin-left: 0; /* Убираем центрирование кнопки */
    }
}



/* Дополнительная коррекция для очень маленьких экранов (смартфоны) */
@media (max-width: 480px) {
    .hero__title {
        font-size: 1.75rem;
    }

    .hero__visual {
        max-width: 280px;
    }
}


/* --------------------------------------------------------------------------
   Малые мобильные устройства (максимум 480px)
   -------------------------------------------------------------------------- */
/* Универсальный фикс для сверхмалых экранов */

/* Исправление смещения влево на очень узких экранах */
@media (max-width: 480px) {
    /* 1. Гарантируем, что контейнер не пытается расшириться за пределы экрана */
    .hero__container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        overflow: hidden; /* Обрезает всё, что случайно вылезает за экран */
    }

    /* 2. Ограничиваем размер сложной графики, чтобы она не ломала верстку */
    .hero__visual {
        width: 100%;
        max-width: 320px; /* Принудительно ограничиваем ширину SVG */
        margin: 20px auto;
        display: flex;
        justify-content: center;
    }

    .tech-circuit {
        width: 100% !important;
        height: auto !important;
    }

    /* 3. Центрируем элементы внутри контента */
    .hero__content {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* 4. Центрируем виджет слогана */
    .hero-slogan-widget {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-left: 0;
    }

    .slogan-shifted {
        margin-left: 0;
        margin-top: 15px;
    }
}

@media (max-width: 420px) {
    .hero__title {
        font-size: 1.8rem; /* Чуть меньше для маленьких смартфонов */
    }

    .hero-slogan-widget {
        flex-direction: column; /* Складываем виджет в столбик на узких экранах */
        text-align: center;
        padding: 12px;
    }

    .slogan-shifted {
        padding-left: 0;
        margin-top: 10px;
    }

    .btn {
        width: 100%; /* Кнопки на всю ширину на мобильных */
        justify-content: center;
    }
}

/* Исправление центрирования для 360px - 375px и выше */
@media (max-width: 480px) {
    /* Центрируем основной контент секции */
    .hero__content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
    }

    /* Сбрасываем любые отрицательные отступы у слогана и добавляем отступ 11px слева */
    .hero-slogan-widget {
        display: flex;
        flex-direction: column;
        align-items: center; /* Центрирует элементы внутри виджета */
        margin: 0 auto 20px auto !important; /* Центрируем сам блок */
        padding: 0 0 0 5px !important;      /* Добавляем ровно 11px отступа слева */
    }

    /* Обнуляем отступ у текста, чтобы он не сдвигался дважды */
    .slogan-shifted {
        margin-left: 0 !important;
        text-align: center;
    }

    /* Исправление кнопок */
    .hero__actions {
        display: flex;
        flex-direction: column; /* Кнопки друг под другом на узких экранах */
        gap: 12px;
        width: 100%;
        align-items: center;
    }

    .hero__actions .btn {
        width: 90%; /* Кнопки занимают 90% ширины экрана */
        justify-content: center;
        margin: 15px;
    }
}

/* Приводим виджет слогана к стандартам блока .badge */
@media (max-width: 480px) {
    .hero-slogan-widget {
        display: flex;
        flex-direction: row;        /* Оставляем строку, как у .badge */
        align-items: center;        /* Центрируем по вертикали */
        justify-content: flex-start; /* Выравнивание по левому краю, как у .badge */
        gap: 12px;                  /* Отступ между иконкой и текстом */

        width: 100%;                /* Блок занимает всю ширину */
        padding: 8px 12px;          /* Внутренние отступы как у .badge */
        margin: 15px 0;             /* Внешние отступы */

        /* Если нужно добавить фон или рамку как у .badge */
        /* background: rgba(255, 255, 255, 0.03); */
        /* border-radius: 8px; */
    }

    .slogan-shifted {
        margin-left: 0;             /* Убираем лишние сдвиги */
        text-align: left;           /* Выравнивание текста по левому краю */
        flex: 1;                    /* Позволяет тексту занимать оставшееся место */
    }

    /* Обеспечиваем одинаковые отступы для badge и виджета */
    .badge {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 20px;
        width: 100%;
        padding: 0 10px; /* Убедитесь, что здесь тот же padding, что и у слогана */
    }
}
@media (max-width: 480px) {
    /* 1. Настройка отступа между кнопками (14px) */
    .hero__actions {
        display: flex;
        flex-direction: column;
        gap: 14px !important; /* Устанавливаем ровно 14px */
        width: 100%;
        margin-top: 14px;      /* Отступ от виджета слогана к кнопкам */
    }

    /* 2. Убираем лишние margin у кнопок, чтобы gap работал корректно */
    .hero__actions .btn {
        width: 90%;
        margin: 0 !important;
    }

    /*!* 3. Минимизация отступов для SVG-анимации (hero__visual) *!*/
    /*.hero__visual {*/
    /*    margin: 10px auto 10px auto !important; !* Уменьшаем отступ сверху и снизу до 10px *!*/
    /*    max-width: 260px; !* Немного уменьшаем размер для очень маленьких экранов *!*/
    /*}*/

    /* Дополнительно: уменьшаем отступ под виджетом слогана, если нужно */
    .hero-slogan-widget {
        margin-bottom: 14px !important;
    }
}
/* Смещение всего контейнера слогана на 17px вправо на мобильных экранах */
/* Исправленное отображение виджета слогана на мобильных экранах */
/* Исправленный и оптимизированный виджет слогана для мобильных */
@media (max-width: 480px) {
    .hero-slogan-widget {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important; /* Изменили на flex-start, чтобы текст не прыгал */
        justify-content: flex-start !important;

        width: 100% !important;
        padding: 5px 10px !important; /* Уменьшили вертикальный padding */
        margin: 5px 0 !important;

        box-sizing: border-box !important;
        overflow: visible !important;
        min-height: 40px; /* Даем блоку минимальную высоту для 2-х строк */
    }

    .slogan-shifted {
        margin-left: 12px !important; /* Чуть больше отступ от иконки */
        text-align: left !important;

        word-wrap: break-word !important;
        word-break: break-word !important; /* Дополнительно для корректного переноса */
        white-space: normal !important;

        flex: 1 !important;
        font-size: 13px !important;      /* Немного уменьшили шрифт для читаемости */
        line-height: 1.2 !important;    /* Уменьшили интервал между строками */
    }

    .slogan-widget__graphic {
        flex-shrink: 0 !important;
        width: 40px !important;         /* Немного уменьшили иконку */
        height: 40px !important;
        margin-top: 2px;                /* Центрируем визуально относительно текста */
    }
}

/* ==========================================================================
   МОБИЛЬНАЯ ВЕРСТКА И АДАПТИВНОСТЬ (mobile-style.css) – ПОЛНОСТЬЮ ОЧИЩЕННАЯ ВЕРСИЯ
   ========================================================================== */

/* Базовые элементы бургер-меню (активны на экранах меньше 992px) */
.header__actions-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header__burger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 110;
}

.header__burger span {
    width: 100%;
    height: 2px;
    background-color: var(--text-main);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: left center;
}

.header__burger.active span:nth-child(1) {
    transform: rotate(45deg) translate(2px, -2px);
    background-color: var(--accent-cyan);
}

.header__burger.active span:nth-child(2) {
    width: 0%;
    opacity: 0;
}

.header__burger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(2px, 2px);
    background-color: var(--accent-cyan);
}

/* Контейнер полноэкранного мобильного меню */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(8, 11, 17, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 105;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    border-bottom: 1px solid rgba(0, 242, 254, 0.1);
}

.mobile-menu.active {
    transform: translateY(0);
    opacity: 1;
}

/* Кнопка крестика для закрытия внутри выпадающего меню */
.mobile-menu__close {
    position: absolute;
    top: 24px;
    right: 24px;
    background: transparent;
    border: none;
    color: var(--text-main);
    font-size: 42px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 12px;
    z-index: 107;
    transition: color 0.3s ease, transform 0.3s ease;
}

.mobile-menu__close:hover {
    color: var(--accent-cyan);
    transform: scale(1.1);
    text-shadow: 0 0 12px rgba(0, 242, 254, 0.8);
}

.mobile-menu__nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    width: 100%;
    padding: 24px;
}

/* Стили логотипа в выпадающем меню */
.mobile-menu__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    background-color: #0f1524;
    border-radius: 50%;
    border: 2px solid var(--accent-cyan);
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.5), inset 0 0 10px rgba(0, 242, 254, 0.3);
    margin-bottom: 12px;
    padding: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mobile-menu__logo:hover {
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(0, 242, 254, 0.8), inset 0 0 15px rgba(0, 242, 254, 0.5);
}

.mobile-menu__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mobile-menu__link {
    font-family: var(--font-mono);
    color: var(--text-main);
    text-decoration: none;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.mobile-menu__link:hover {
    color: var(--accent-cyan);
    text-shadow: 0 0 10px rgba(0, 242, 254, 0.6);
}

body.no-scroll {
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Планшетная и мобильная адаптация (Экран меньше 992px)
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    .header__container {
        padding: 0 16px;
    }

    .nav {
        display: none;
    }

    .header__burger {
        display: flex;
    }

    .header__actions-wrapper {
        position: relative;
        left: -16px;
    }

    .hero {
        padding-top: 140px;
        padding-bottom: 60px;
    }

    .hero__container {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .badge {
        justify-content: center;
    }

    .hero__actions {
        justify-content: center;
    }

    .diagnostic-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: max-content;
        margin: 16px 0;
        text-align: left;
    }

    .diagnostic-benefit {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 16px;
        font-weight: 500;
        color: var(--text-main);
        margin: 6px 0;
    }

    .tech-circuit {
        margin: 0 auto;
        max-width: 340px;
    }

    .services {
        padding: 60px 0;
    }

    .services__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .contacts {
        padding: 60px 0;
    }

    .contacts__wrapper {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .contacts__info {
        padding: 32px;
    }

    .contacts__map-panel {
        padding: 0 14px 14px;
        width: 100%;
        height: 400px;
    }

    .contacts__map-panel iframe {
        width: 100%;
        height: 100%;
        border-radius: 8px;
    }

    /* Кибер-блок */
    .cyber-preventive__grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .cyber-preventive__content {
        align-items: center;
        text-align: center;
    }
    .cyber-preventive__title {
        font-size: 36px;
    }
    .cyber-graphic-wrapper {
        max-width: 380px;
    }
}

/* --------------------------------------------------------------------------
   Смартфоны (максимум 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }

    .hero__title {
        font-size: 34px;
    }

    .hero__text {
        font-size: 16px;
    }

    .services__grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        padding: 24px;
    }

    .contacts {
        padding: 48px 0;
    }

    .contacts__info {
        padding: 24px 20px;
    }

    .contact-item__icon svg {
        width: 20px;
        height: 20px;
    }

    .contact-item__label {
        font-size: 11px;
    }

    .contact-item__value {
        font-size: 13px;
    }

    .contacts__map-panel {
        height: 350px;
    }

    .footer {
        padding: 24px 0;
    }

    .footer__container {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .footer p {
        font-size: 12px;
        order: 2;
    }

    .developer-credits {
        order: 1;
        flex-direction: column;
        gap: 8px;
    }

    .developer-credits__text {
        font-size: 10px;
    }

    .developer-credits__brand {
        padding: 5px 10px;
    }

    .cyber-preventive {
        padding: 60px 0;
    }
}

/* --------------------------------------------------------------------------
   Малые мобильные устройства (максимум 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .header__container {
        height: 70px;
    }

    .logo {
        font-size: 20px;
    }

    .btn--header {
        padding: 8px 12px;
        font-size: 11px;
    }

    .btn--header span {
        display: none;
    }

    .btn--header svg {
        margin: 0;
        width: 18px;
        height: 18px;
    }

    .hero__content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .hero__title {
        font-size: 28px;
    }

    .hero__actions {
        flex-direction: column;
        width: 100%;
        gap: 12px;
        position: relative;
        left: -13px;
    }

    .hero__actions .btn {
        width: 100%;
        justify-content: center;
    }

    .mobile-menu__link {
        font-size: 18px;
    }

    .diagnostic-container {
        margin: 12px 0 20px 0;
    }

    .cyber-preventive__title {
        font-size: 28px;
    }
    .cyber-check-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* --------------------------------------------------------------------------
   Ультра-малые экраны (максимум 360px)
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
    .hero {
        padding: 100px 0;
        overflow: hidden;
    }

    .hero__container {
        padding: 0 10px;
    }

    .hero__title {
        font-size: 24px;
        line-height: 1.2;
    }

    .hero__text {
        font-size: 14px;
        margin-bottom: 5px;
    }

    .hero__visual {
        max-width: 100%;
        margin-top: 20px;
        transform: scale(0.85);
        transform-origin: center center;
    }

    .hero__actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        align-items: center;
    }

    .btn {
        width: 100%;
        max-width: 300px;
        padding: 12px 15px;
        font-size: 13px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transform: scale(0.95);
    }
}

/* Исправление выравнивания секции профилактики на мобильных */
@media (max-width: 992px) {
    .cyber-preventive__content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        width: 100%;
    }

    .cyber-preventive__title,
    .cyber-preventive__lead,
    .cyber-preventive__text-block,
    .cyber-preventive__checklist {
        text-align: left;
        margin-left: 0;
        margin-right: auto;
    }

    .cyber-check-item {
        justify-content: flex-start;
        text-align: left;
    }

    .cyber-btn {
        margin-left: 0;
    }
}

/* ==========================================================================
   ЕДИНЫЕ, КОРРЕКТНЫЕ СТИЛИ ДЛЯ СЛОГАНА НА ВСЕХ МОБИЛЬНЫХ ЭКРАНАХ
   (без старых конфликтующих правил)
   ========================================================================== */

@media (max-width: 768px) {
    .hero-slogan-widget {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 15px 0 !important;
        padding: 10px 16px !important;
        background: rgba(15, 21, 36, 0.6) !important;
        border: 1px solid rgba(0, 242, 254, 0.25) !important;
        border-radius: 16px !important;
        backdrop-filter: blur(12px) !important;
        box-sizing: border-box !important;
        gap: 14px !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
        position: relative !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
    }

    .slogan-widget__graphic {
        flex-shrink: 0 !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        filter: drop-shadow(0 0 4px rgba(0,242,254,0.5)) !important;
    }

    .slogan-widget__graphic svg {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
    }

    .slogan-shifted {
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        flex: 1 !important;
        width: auto !important;
        white-space: normal !important;
        word-break: break-word !important;
        transform: none !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
    }

    .slogan-phrase {
        display: block !important;
        font-size: 18px !important;
        line-height: 1.35 !important;
        margin-bottom: 4px !important;
        white-space: normal !important;
        font-family: var(--font-mono, monospace) !important;
        color: #ffffff !important;
        font-weight: 500 !important;
        letter-spacing: 0.3px !important;
        text-shadow: 0 0 2px rgba(0,0,0,0.3) !important;
        transform: none !important;
    }

    .slogan-highlight {
        background: linear-gradient(90deg, #00f2fe 0%, #10b981 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        font-weight: 700 !important;
        text-shadow: none !important;
    }
}

/* Дополнительная коррекция для экранов ≤ 480px (чуть уменьшаем, но оставляем комфортным) */
@media (max-width: 480px) {
    .hero-slogan-widget {
        padding: 8px 12px !important;
        gap: 10px !important;
    }
    .slogan-phrase {
        font-size: 14px !important;
    }
    .slogan-widget__graphic {
        width: 34px !important;
        height: 34px !important;
    }
}

/* Очень узкие экраны (360px) – минимальное уменьшение */
@media (max-width: 360px) {
    .hero-slogan-widget {
        padding: 6px 10px !important;
        gap: 8px !important;
    }
    .slogan-phrase {
        font-size: 14px !important;
    }
    .slogan-widget__graphic {
        width: 30px !important;
        height: 30px !important;
    }
}

/* ============================================================
   ФИНАЛЬНАЯ КОРРЕКЦИЯ КНОПОК НА ВСЕХ МОБИЛЬНЫХ ЭКРАНАХ
   ============================================================ */

@media (max-width: 480px) {
    /* Гарантируем, что контейнер кнопок центрирован */
    .hero__actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        gap: 14px !important;
        margin-top: 24px !important;
        margin-bottom: 0 !important;
        /* Убираем любые смещения */
        position: static !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }

    /* Сами кнопки: центрируем и убираем лишние отступы */
    .hero__actions .btn {
        width: auto !important;
        min-width: 220px !important;
        max-width: 280px !important;
        margin: 0 auto !important;
        text-align: center !important;
        justify-content: center !important;
        display: inline-flex !important;
        position: static !important;
        left: auto !important;
        transform: none !important;
    }

    /* Убираем влияние других блоков на смещение */
    .hero__content {
        align-items: center !important;
        text-align: center !important;
    }
}

/* Для экранов 360px и меньше – чуть уменьшаем кнопки */
@media (max-width: 360px) {
    .hero__actions .btn {
        min-width: 180px !important;
        font-size: 13px !important;
        padding: 10px 16px !important;
    }
}

/* ============================================================
   ФИНАЛЬНАЯ КОРРЕКЦИЯ ТАБЛИЦЫ ПРАЙС-ЛИСТА НА МОБИЛЬНЫХ ЭКРАНАХ
   ============================================================ */

@media (max-width: 768px) {
    /* Родительский контейнер с прокруткой */
    .prices__table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 0 -16px !important;
        padding: 0 16px !important;
        width: auto !important;
    }

    /* Сама таблица */
    .prices__table {
        min-width: 600px !important;
        width: 100% !important;
        border-collapse: collapse !important;
    }

    /* Ячейки таблицы */
    .prices__table th,
    .prices__table td {
        padding: 12px 16px !important;
        font-size: 13px !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    /* Первая колонка (наименование услуги) – шире */
    .prices__table th:first-child,
    .prices__table td:first-child {
        min-width: 220px !important;
    }

    /* Вторая колонка (срок) */
    .prices__table th:nth-child(2),
    .prices__table td:nth-child(2) {
        min-width: 100px !important;
    }

    /* Третья колонка (цена) */
    .prices__table th:nth-child(3),
    .prices__table td:nth-child(3) {
        min-width: 110px !important;
        white-space: nowrap !important;
    }

    /* Цена – жирный шрифт */
    .price-val {
        font-weight: 700 !important;
        font-size: 14px !important;
    }
}

/* Дополнительная коррекция для очень маленьких экранов (≤ 480px) */
@media (max-width: 480px) {
    .prices__table-wrapper {
        margin: 0 -12px !important;
        padding: 0 12px !important;
    }

    .prices__table th,
    .prices__table td {
        padding: 10px 12px !important;
        font-size: 12px !important;
    }

    .prices__table th:first-child,
    .prices__table td:first-child {
        min-width: 180px !important;
    }

    .price-val {
        font-size: 13px !important;
    }
}