@media (min-width: 760px) {
    .hero { grid-template-columns: 1.05fr .95fr; }
    .hero-actions { grid-template-columns: 1fr 1fr; }
    .section-grid { grid-template-columns: repeat(3, 1fr); }
    .split-section { grid-template-columns: .9fr 1.1fr; }
    .site-footer { grid-template-columns: 1fr auto; align-items: center; }
}

@media (min-width: 920px) {
    .desktop-nav { display: flex; }
    .theme-toggle.theme-toggle-desktop { display: inline-flex; }
    .menu-toggle { display: none; }
    .mobile-menu { display: none !important; }
}

@media (max-width: 480px) {
    .site-header,
    .site-footer,
    .site-main {
        width: min(100% - 22px, var(--container));
        width: min(
            var(--container),
            calc(
                100%
                - max(11px, env(safe-area-inset-left), env(safe-area-inset-right))
                - max(11px, env(safe-area-inset-left), env(safe-area-inset-right))
            )
        );
    }
    .brand-name { font-size: 15px; }
    /*
     * Header actions are duplicated in the public mobile menu. Keep the
     * compact header readable without hiding .btn-small across the entire
     * application (administrative actions must remain available).
     */
    .site-header .header-dashboard-link,
    .site-header .header-login-link,
    .site-header .header-logout-form,
    .site-header .header-actions > .btn-small {
        display: none;
    }
    .hero h1 { font-size: 43px; }
    .premium-card { padding: 18px; }
}

@media (max-width: 360px) {
    .site-header {
        gap: 8px;
        padding-right: 10px;
        padding-left: 10px;
    }

    .brand {
        gap: 7px;
        padding: 3px;
    }

    .header-actions {
        gap: 8px;
    }

    .site-header .language-switcher a {
        min-width: 32px;
        padding-right: 6px;
        padding-left: 6px;
    }
}

@media (min-width: 481px) and (max-width: 560px) {
    .site-header {
        gap: 8px;
        padding-right: 10px;
        padding-left: 10px;
    }

    .brand {
        gap: 7px;
        padding: 3px;
    }

    .brand-name {
        font-size: 14px;
    }

    .header-actions {
        gap: 6px;
    }

    .site-header .language-switcher a {
        min-width: 32px;
        padding-right: 6px;
        padding-left: 6px;
    }

    .site-header .btn-small {
        padding: 8px 9px;
        font-size: 12px;
    }
}
/* =========================================================
   Мобильная главная — девушка на заднем плане
   ========================================================= */

/* =========================================================
   Главный экран на телефоне
   Девушка справа и выше, текст слева
   ========================================================= */

@media (max-width: 759px) {
    .hero {
        
        display: block;
        isolation: isolate;
        overflow: hidden;

        min-height: 850px;
        padding: 30px 20px 4px;

        
    }

    .hero-copy {
        position: relative;
        z-index: 4;
        min-width: 0;
        
    }

    /* Небольшой золотой заголовок сверху */
    .hero .eyebrow {
        position: relative;
        z-index: 4;

        max-width: 65%;
        margin: 0 0 22px;

        font-size: 13px;
        line-height: 1.3;
        letter-spacing: 0.2em;
    }

    /* Главный заголовок */
    .hero h1 {
        position: relative;
        z-index: 4;

        width: 72%;
        max-width: 72%;
        margin: 0;

        font-size: clamp(43px, 11.5vw, 54px);
        line-height: 0.93;
        letter-spacing: -0.035em;

        /*
         * Запрещаем разрывать слова:
         * Казахстана больше не превратится в Казахстан + а
         */
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }

    /* Описание под заголовком */
    .hero-text {
        position: relative;
        z-index: 4;

        width: 59%;
        max-width: 59%;
        margin-top: 26px;

        font-size: 15px;
        line-height: 1.5;

        overflow-wrap: normal;
        word-break: normal;
    }

    /*
     * Правая часть desktop-версии превращается
     * в фоновый слой главного экрана.
     */
    .hero-visual {
        position: absolute;
        inset: 0;
        z-index: 1;

        min-height: 0;

        border: 0;
        border-radius: 0;
        background: transparent;

        overflow: hidden;
        pointer-events: none;
    }

    /*
     * Затемнение слева для читаемости текста.
     * Справа девушка остаётся более светлой.
     */
    .hero-visual::after {
        content: "";

        position: absolute;
        inset: 0;
        z-index: 2;

        background:
            linear-gradient(
                90deg,
                rgba(5, 5, 5, 1) 0%,
                rgba(5, 5, 5, 0.97) 25%,
                rgba(5, 5, 5, 0.78) 48%,
                rgba(5, 5, 5, 0.22) 73%,
                rgba(5, 5, 5, 0.05) 100%
            ),
            linear-gradient(
                180deg,
                rgba(5, 5, 5, 0.03) 56%,
                rgba(5, 5, 5, 0.88) 100%
            );
    }

    /*
     * Самое главное изменение:
     * девушка теперь привязана к верхней части,
     * а не ко дну секции.
     */
    .hero-woman {
        position: absolute;

        top: 95px;
        right: -34%;
        bottom: auto;
        z-index: 1;

        width: 125%;
        max-width: none;
        height: auto;

        object-fit: contain;
        object-position: right top;

        opacity: 0.96;

        pointer-events: none;
        user-select: none;

        filter:
            drop-shadow(0 0 36px rgba(201, 148, 56, 0.18))
            drop-shadow(0 20px 36px rgba(0, 0, 0, 0.6));
    }

    /* Логотип-орбита и карточка Discovery на телефоне не нужны */
    .hero-orbit,
    .hero-card {
        display: none;
    }

    /*
     * Кнопки располагаются поверх изображения,
     * но уже после текстового блока.
     */
    .hero-actions {
        position: relative;
        z-index: 4;

        display: grid;
        grid-template-columns: minmax(0, 1fr);

        width: 100%;
        max-width: 100%;
        margin-top: 34px;
        gap: 12px;
    }

    .hero-actions .btn {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        white-space: normal;
        text-align: center;
    }

    .hero-pills {
        position: relative;
        z-index: 4;

        display: flex;
        flex-wrap: wrap;

        width: 100%;
        max-width: 100%;
        margin-top: 28px;
        gap: 10px;
    }

    .hero-pills span {
        max-width: 100%;
        white-space: normal;
    }
}

@media (max-width: 480px) {
    .hero {
        min-height: 525px;
        padding-right: 18px;
        padding-left: 18px;
    }

    .hero-copy {
        
    }

    .hero h1 {
        width: 74%;
        max-width: 74%;

        font-size: clamp(42px, 11.3vw, 49px);
    }

    .hero-text {
        width: 61%;
        max-width: 61%;

        font-size: 14px;
        line-height: 1.48;
    }

    .hero-woman {
        top: 90px;
        right: -39%;
        width: 132%;
    }
}