/* =========================================================
   LA2STAR — CUSTOM CSS
   Навигация, баннер, логотип и огненная кнопка
   ========================================================= */


/* =========================================================
   1. ШРИФТ МЕНЮ
   ========================================================= */

.navigation .menu__item {
    font-family: Georgia, "Times New Roman", serif;
}


/* =========================================================
   2. НАВИГАЦИЯ — БОЛЬШИЕ ЭКРАНЫ
   ========================================================= */

@media (min-width: 1200px) {

    .navigation {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        height: 5.4rem !important;
    }

    /* Левая часть */

    .navigation__box_side_left {
        margin: 0 !important;
        padding-left: 2.5rem !important;
        justify-content: flex-start;
    }

    /* Центральное меню */

    .navigation__menu {
        flex-grow: 0;
        justify-self: center;
    }

    .navigation .menu__list {
        gap: 0 !important;
        justify-content: center;
    }

    .navigation .menu__dot {
        display: none;
    }

    /* Пункты меню */

    .navigation .menu__item {
        font-size: 1.5rem;
        letter-spacing: 0.02em;
        padding: 1.9rem 1.55rem 1.2rem;
    }

    /* Активный пункт */

    .navigation .menu__item_current {
        color: #ffd98a;
        text-shadow: 0 0 14px rgba(255, 170, 60, 0.7);
    }

    .navigation .menu__item_current:after {
        opacity: 1 !important;
        filter: blur(0.55rem) !important;
        height: 0.35rem !important;
        top: auto !important;
        bottom: 0.55rem;
        transform: translateX(-50%) !important;
    }

    /* Правая часть */

    .navigation__box_side_right {
        margin: 0 !important;
        padding-right: 2.5rem !important;
        justify-self: end;
    }

    .navigation__auth {
        margin-left: 1.8rem;
        padding-left: 1.8rem;
    }

    .navigation .auth__btn {
        font-size: 1.2rem;
    }

    .navigation .auth .btn {
        --btn-w: 11rem;
        --btn-h: 2.9rem;
        --btn-fs: 1.15rem;
    }

    .navigation .lang {
        font-size: 1.1rem;
    }
}


/* =========================================================
   3. НАВИГАЦИЯ — НОУТБУКИ
   ========================================================= */

@media (min-width: 1200px) and (max-width: 1500px) {

    .navigation .menu__item {
        font-size: 1.2rem;
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }
}


/* =========================================================
   4. HERO — ОБЩЕЕ ЦЕНТРИРОВАНИЕ
   ========================================================= */

header[data-section="hero"] .container[data-container="hero"] {
    display: flex;
    justify-content: center;
    width: 100%;
}

header[data-section="hero"] .hero {
    display: flex;
    justify-content: center;
    width: 100%;
}

header[data-section="hero"] .hero__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
}


/* =========================================================
   5. ЛОГОТИП
   ========================================================= */

header[data-section="hero"] .hero__logotype {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
}

header[data-section="hero"] .hero__logotype .logotype {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

header[data-section="hero"] .hero__logotype .logotype__img {
    display: block;
    max-width: 100%;
    height: auto;
}


/* =========================================================
   6. ЗАГОЛОВОК И ПОДЗАГОЛОВОК
   ========================================================= */

header[data-section="hero"] .hero__title,
header[data-section="hero"] .hero__subtitle {
    text-align: center;
}


/* =========================================================
   7. КОНТЕЙНЕР КНОПКИ
   ========================================================= */

header[data-section="hero"] .hero__btns {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
    margin-top: 1rem;
}


```css
/* LA2STAR — кнопка с огненной рамкой */

header[data-section="hero"] .hero__btns a.btn-la2star {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 320px !important;
    height: 100px !important;
    min-height: 100px !important;
    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    text-decoration: none !important;
    overflow: visible !important;
    isolation: isolate;
}

/* Изображение рамки */

header[data-section="hero"] .hero__btns .btn-la2star__image {
    position: absolute !important;
    inset: 0 !important;

    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;

    object-fit: fill !important;
    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: none !important;
    z-index: 0 !important;
}

/* Надпись поверх рамки */

header[data-section="hero"] .hero__btns a.btn-la2star span {
    position: relative !important;
    z-index: 1 !important;

    color: #fff0bd !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 21px !important;
    font-weight: bold !important;
    text-transform: uppercase;

    text-shadow:
        0 0 4px #ff8c00,
        0 0 10px #ff4500,
        1px 2px 3px #240700;
}

/* Эффект наведения */

header[data-section="hero"] .hero__btns a.btn-la2star:hover {
    transform: scale(1.04);
    filter: brightness(1.2)
            drop-shadow(0 0 10px rgba(255, 100, 0, .7));
}

header[data-section="hero"] .hero__btns a.btn-la2star:active {
    transform: scale(.98);
}

/* Мобильная версия */

@media (max-width: 767px) {
    header[data-section="hero"] .hero__btns a.btn-la2star {
        width: 280px !important;
        height: 88px !important;
        min-height: 88px !important;
    }

    header[data-section="hero"] .hero__btns a.btn-la2star span {
        font-size: 18px !important;
    }
}

header[data-section="hero"] .hero__btns a.btn-la2star {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

header[data-section="hero"] .hero__btns .btn-la2star__image {
    display: block !important;
    mix-blend-mode: normal;
}

/* Новая кнопка LA2STAR без старого оформления */
header[data-section="hero"] .hero__btns a.btn-la2star {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 320px !important;
    height: 105px !important;
    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;

    text-decoration: none !important;
    overflow: visible !important;
    isolation: isolate;
}

/* Убираем старые декоративные рамки */
header[data-section="hero"] .hero__btns a.btn-la2star::before,
header[data-section="hero"] .hero__btns a.btn-la2star::after {
    content: none !important;
    display: none !important;
}

/* Изображение огненной рамки */
header[data-section="hero"] .hero__btns .btn-la2star__image {
    position: absolute !important;
    inset: 0 !important;

    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;

    object-fit: fill !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    pointer-events: none !important;
    z-index: 0 !important;
}

/* Надпись поверх рамки */
header[data-section="hero"] .hero__btns a.btn-la2star span {
    position: relative !important;
    z-index: 1 !important;

    color: #fff0bd !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 21px !important;
    font-weight: bold !important;
    text-transform: uppercase;
    text-shadow: 0 0 4px #ff8c00, 0 0 10px #ff4500;
}

/* Эффект наведения */
header[data-section="hero"] .hero__btns a.btn-la2star:hover {
    transform: scale(1.04);
    filter: brightness(1.15) drop-shadow(0 0 8px rgba(255, 100, 0, .7));
}

@media (max-width: 767px) {
    header[data-section="hero"] .hero__btns a.btn-la2star {
        width: 280px !important;
        height: 92px !important;
    }

    header[data-section="hero"] .hero__btns a.btn-la2star span {
        font-size: 18px !important;
    }
}

/* Кнопка регистрации в шапке */
.navigation__auth .auth__btn_registration {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 200px !important;
    height: 58px !important;
    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;

    text-decoration: none !important;
    overflow: visible !important;
    isolation: isolate;
}

/* Отключаем старую рамку */
.navigation__auth .auth__btn_registration::before,
.navigation__auth .auth__btn_registration::after {
    content: none !important;
    display: none !important;
}

/* Изображение огненной рамки */
.navigation__auth .auth__btn_registration_image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: fill !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Текст поверх изображения */
.navigation__auth .auth__btn_registration span {
    position: relative !important;
    z-index: 1 !important;
    color: #fff0bd !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 14px !important;
    font-weight: bold !important;
    text-transform: uppercase;
    text-shadow: 0 0 4px #ff8c00, 0 0 8px #ff4500;
}

.navigation__auth .auth__btn_registration:hover {
    transform: scale(1.04);
    filter: brightness(1.15) drop-shadow(0 0 6px rgba(255, 100, 0, .6));
}

@media (max-width: 767px) {
    .navigation__auth .auth__btn_registration {
        width: 160px !important;
        height: 48px !important;
    }
}

/* ==========================================
   LA2STAR — DARK FANTASY THEME
   Мягкое свечение и комфортная яркость
   ========================================== */

/* 1. Затемняем фоновое видео */
header[data-section="hero"] .hero-video-bg {
    filter: brightness(0.78) saturate(0.95);
    transition: filter 0.6s ease;
}

/* Мягкое затемнение всей области Hero */
header[data-section="hero"] {
    position: relative;
    isolation: isolate;
}

header[data-section="hero"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(8, 5, 8, 0.25) 0%,
        rgba(12, 5, 7, 0.12) 45%,
        rgba(5, 3, 5, 0.48) 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* Контент располагается над затемнением */
header[data-section="hero"] > .container,
header[data-section="hero"] > .sound-btn {
    position: relative;
    z-index: 1;
}

/* 2. Огненная кнопка — меньше яркости */
header[data-section="hero"] .hero__btns a.btn-la2star {
    background: linear-gradient(
        180deg,
        #392017 0%,
        #21100d 50%,
        #120a09 100%
    ) !important;


    transition:
        transform 0.2s ease,
        filter 0.2s ease,
        box-shadow 0.2s ease;
}

/* 3. Приглушаем само изображение рамки */
header[data-section="hero"] .hero__btns .btn-la2star__image {
    filter: brightness(0.68) saturate(0.78) !important;
}

/* 4. Спокойный золотой текст */
header[data-section="hero"] .hero__btns a.btn-la2star span {
    color: #f0d6a0 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95) !important;
}

/* 5. Ненавязчивое наведение */
header[data-section="hero"] .hero__btns a.btn-la2star:hover {
    transform: scale(1.02);
    filter: brightness(1.04);
    box-shadow: 0 3px 12px rgba(130, 54, 18, 0.25) !important;
}

/* 6. Не увеличиваем яркость при нажатии */
header[data-section="hero"] .hero__btns a.btn-la2star:active {
    transform: scale(0.99);
}

/* 7. Убираем резкие переходы для пользователей,
   предпочитающих уменьшенную анимацию */
@media (prefers-reduced-motion: reduce) {
    header[data-section="hero"] .hero-video-bg,
    header[data-section="hero"] .hero__btns a.btn-la2star {
        transition: none !important;
    }
}

/* 8. На небольших экранах немного усиливаем затемнение */
@media (max-width: 767px) {
    header[data-section="hero"] .hero-video-bg {
        filter: brightness(0.48) saturate(0.75);
    }
}

/* LA2STAR: убираем прямоугольную подложку кнопки */
header[data-section="hero"] .hero__btns a.btn-la2star {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Убираем прямоугольник и тень при наведении */
header[data-section="hero"] .hero__btns a.btn-la2star:hover,
header[data-section="hero"] .hero__btns a.btn-la2star:active {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Сохраняем затемнение самой огненной рамки */
header[data-section="hero"] .hero__btns .btn-la2star__image {
    filter: brightness(0.68) saturate(0.78) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Исправление размера кнопки в Chrome и на разных экранах */
header[data-section="hero"] .hero__btns {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

header[data-section="hero"] .hero__btns a.btn-la2star {
    display: inline-flex !important;
    position: relative !important;

    width: min(320px, 82vw) !important;
    height: auto !important;
    aspect-ratio: 2133 / 704;
    min-height: 0 !important;

    flex: 0 1 auto !important;
    padding: 0 !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;

    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

header[data-section="hero"] .hero__btns .btn-la2star__image {
    position: absolute !important;
    inset: 0 !important;

    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;

    object-fit: fill !important;
}

header[data-section="hero"] .hero__btns a.btn-la2star span {
    font-size: clamp(14px, 1.3vw, 21px) !important;
}

@media (max-width: 767px) {
    header[data-section="hero"] .hero__btns a.btn-la2star {
        width: min(280px, 82vw) !important;
    }

    header[data-section="hero"] .hero__btns a.btn-la2star span {
        font-size: 16px !important;
    }
}