@font-face {
    font-family: 'BagelFatCyrillic';
    /* Если твой файл в формате .otf, поменяй .ttf на .otf */
    src: url('BagelFatOne-Regular-Cyrillic1.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Применяем шрифт ко всем текстовым элементам (чтобы не сломать иконки) */
body, h1, button, a, .btn, .sidebar-nav a {
    font-family: 'BagelFatCyrillic', sans-serif !important;
}

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700&display=swap');

/* Базовые настройки страницы */
body {
    margin: 0;
    padding: 0;
    background-color: #000;
    color: #fff;
    /* Настройки фона (оставляем твои) */
    background-image: url('background.svg');
    background-attachment: fixed !important;
    background-size: cover;
    background-position: center;
    /* Правильные настройки размеров и скролла */
    min-height: 100vh;
    display: block !important; /* Выключаем вредный flex */
    overflow-x: hidden; /* Оставляем табу только на прокрутку влево-вправо */
    /* overflow: hidden; - УДАЛЕНО, чтобы разрешить крутить вниз */
}
    body.page-404 {
        background-color: #000;
        /* Если у тебя есть отдельная картинка для фона 404: */
        background-image: url('background0.svg');
        /* Либо просто сплошной цвет (например, темно-серый), который перебьет фон главной страницы: */



        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

/* Контейнер для центрирования контента */
.content-wrapper {
    height: 100vh;
    display: flex;
    flex-direction: column; /* Выстраиваем элементы в колонку (один под другим) */
    justify-content: center; /* Центрируем по вертикали */
    align-items: center; /* Центрируем по горизонтали */
    gap: 20px; /* Идеальное расстояние между иконками и логотипом */
    position: relative;
    width: 100%;
}

/* Иконки соцсетей */
.social-links {
    position: absolute;
    bottom: 55%;
    left: 50%;
    display: flex;
    transform: translateX(-50%);
    gap: 25px;
    margin-bottom: 10px;
    color: #fff;
    mix-blend-mode: difference;
}

    .social-links a {
        color: #fff;
        font-size: 28px;
        text-decoration: none;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

        .social-links a:hover {
            transform: translateY(-3px);
            opacity: 0.8;
        }

/* Логотип */
.logo {
    
    font-size: 90px;
    margin: 0;
    line-height: 1;
    letter-spacing: 2px;
    text-align: center;
}
.main-logo {
    max-width: 90%; /* Чтобы логотип не вылезал за края на телефонах */
    width: 400px; /* Базовая ширина логотипа (можешь менять под свой вкус) */
    height: auto; /* Сохраняем пропорции */
    color: #fff;
    mix-blend-mode: difference;
}
/* Кнопки действий */
.action-buttons {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}



/* Кнопка открытия меню (в правом верхнем углу) */
.menu-open-btn {
    position: fixed !important;
    top: 30px;
    right: 40px;
    background: none;
    border: none;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    z-index: 50; /* Должна быть под меню, но над контентом */
    transition: transform 0.2s ease, opacity 0.2s ease;
    color: #fff;
    mix-blend-mode: difference;
}

    /* Эффект при наведении (становится чуть темнее) */
    .menu-open-btn:hover {
        transform: scale(1.1);
        background-color: rgba(0, 0, 0, 0.6);
    }

/* Выдвигающаяся панель меню (эффект стекла) */
/* Выдвигающаяся панель меню (эффект темного стекла) */


    /* Класс, который добавляется скриптом для показа меню */
    .sidebar.active {
        right: 0; /* Меню выезжает к правому краю */
    }

/* Кнопка закрытия внутри меню (крестик) */


    .menu-close-btn:hover {
        transform: rotate(90deg); /* Красиво крутим при наведении */
    }

/* Ссылки внутри меню */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 25px; /* Расстояние между ссылками */
}

    .sidebar-nav a {
        color: #fff;
        text-decoration: none;
        font-size: 23px; /* Можно сделать 20px, если все равно будет казаться крупным */
        /* --- НОВЫЕ СТРОКИ --- */
        letter-spacing: 2px; /* Увеличиваем расстояние между буквами */
        font-weight: normal !important; /* Принудительно убираем любые браузерные утолщения */
        -webkit-font-smoothing: antialiased; /* Сглаживание: визуально делает шрифт чуть тоньше и четче */
        -moz-osx-font-smoothing: grayscale;
        /* -------------------- */

        transition: color 0.2s ease, padding-left 0.2s ease;
    }

        /* Анимация при наведении на ссылки меню */
        .sidebar-nav a:hover {
            color: #b0b0b0; /* Цвет становится чуть темнее */
            padding-left: 15px; /* Текст слегка сдвигается вправо */
        }




.btn {
    background-color: #4a4a4a; /* Темно-серый цвет кнопок */
    color: #fff;
    text-decoration: none;
    padding: 10px 30px;
    border-radius: 50px; /* Делает кнопки овальными */

    font-size: 18px;
    letter-spacing: 1px;
    font-weight: normal !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.2s ease;
}

    .btn:hover {
        background-color: #666;
    }


/* =========================================
   СТИЛИ ДЛЯ СТРАНИЦЫ 404
   ========================================= */

/* Гигантские цифры 404 */
.error-code {
    font-size: 180px;
    margin: 0;
    line-height: 1;
    letter-spacing: 5px;
    animation: float 4s ease-in-out infinite;
    /* Та самая динамическая покраска */
    color: #fff;
    mix-blend-mode: difference;
    /* Принудительно отключаем любые тени и обводки, чтобы они не ломали эффект */
    -webkit-text-stroke: 0;
    text-shadow: none;
}

/* Текст под цифрами */
.error-text {
    font-size: 24px;
    margin-top: 10px;
    margin-bottom: 30px;
    text-align: center;
    letter-spacing: 1.5px;
    /* Та самая динамическая покраска */
    color: #fff;
    mix-blend-mode: difference;
    /* Принудительно отключаем любые тени и обводки */
    -webkit-text-stroke: 0;
    text-shadow: none;
}

/* Анимация левитации (парения) */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px); /* Поднимается на 20 пикселей вверх */
    }

    100% {
        transform: translateY(0px);
    }
}


/* =========================================
   СТИЛИ ДЛЯ СТРАНИЦЫ АКТЁРОВ
   ========================================= */




/* Обертка для всей страницы актеров */
.actors-page-wrapper {
    width: 100%;
    height: 100vh;
    padding: 60px 40px;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden; /* Защита от вылетов контента внутри этой страницы */
    position: relative;
}

/* Заголовок страницы */
.page-title {
    text-align: center;
    font-size: 60px;
    
    margin-bottom: 50px;
    letter-spacing: 3px;
    color: #fff;
    mix-blend-mode: difference;
}

/* Сетка (ровно 2 колонки) */
.actors-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 карточки в ряд */
    gap: 40px; /* Расстояние между карточками */
    width: 100%; /* Сетка всегда сжимается под размер экрана */
    max-width: 1400px;
    margin: 0 auto; /* Центрируем сетку на экране */
    box-sizing: border-box;
}

/* Сама карточка */
.actor-card {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 20px;
    /* Убрали "filter" из transition */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

    /* АНИМАЦИЯ: При наведении карточка всплывает */
    .actor-card:hover {
        transform: translateY(-12px) scale(1.02);
        /* ПОЛНОСТЬЮ УДАЛИЛИ строку filter: drop-shadow(...) */
    }

/* Блок с текстом (Эффект темного стекла) */
.actor-info {
    flex: 1;
    background: rgba(15, 15, 15, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    padding: 30px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* --- МАГИЧЕСКИЙ ФИКС ДЛЯ РАЗМЫТИЯ --- */
    transform: translateZ(0); /* Заставляет видеокарту держать размытие включенным */
    will-change: transform, backdrop-filter;
    transition: box-shadow 0.4s ease; /* Добавили плавность для новой тени */
}
.actor-card:hover .actor-info {
    box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.7);
}
    .actor-info h2 {
        margin-top: 0;
        font-size: 36px;
        letter-spacing: 2px;
        margin-bottom: 15px;
    }

    .actor-info p {
        /* --- Твой новый закругленный шрифт --- */
        font-family: 'M PLUS Rounded 1c', sans-serif !important;
        font-weight: 700 !important; /* Делаем его Bold */
        /* ------------------------------------- */

        font-size: 18px; /* Можно чуть поиграть с размером, если текст будет слишком крупным */
        line-height: 1.6;
        letter-spacing: 0.5px;
        margin-bottom: 25px;
    }

.actor-role {
    /* Используем тот же самый скругленный шрифт */
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-weight: 700 !important; /* Обычная толщина, чтобы не перегружать */

    font-size: 12px; /* Размер чуть меньше основного текста */
    

    margin-top: -7px; /* Притягиваем должность ближе к нику */
    margin-bottom: 15px; /* Отступ до основного описания */
    letter-spacing: 0.5px;
}




/* Иконки соцсетей внутри карточки */
.actor-socials {
    display: flex;
    gap: 15px;
    margin-top: auto; /* Прижимает соцсети к низу текстового блока */
}

    .actor-socials a {
        color: #fff;
        font-size: 24px;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

        .actor-socials a:hover {
            transform: translateY(-3px) scale(1.1);
            opacity: 0.8;
        }

/* Блок с картинкой персонажа */
/* Блок с белой плашкой для фото */
.actor-image {
    position: relative;
    width: 250px;
    height: 320px;
    background-color: #fff;
    border-radius: 30px; 
    flex-shrink: 0;
    clip-path: inset(-100% 0 0 0 round 30px);
    
    /* Добавили плавность для новой тени */
    transition: box-shadow 0.4s ease; 
}

    /* Сама картинка персонажа */
    .actor-image img {
        position: absolute;
        bottom: 0; /* Идеально прижимаем к низу */
        left: 0;
        width: 100%; /* Ширина ровно по белой плашке */
        height: auto; /* ДИНАМИЧНАЯ ВЫСОТА: подстроится под любую картинку */
        min-height: 100%; /* Но не меньше самой плашки */
        object-fit: cover;
        object-position: bottom center;
        /* --- ВОТ ОНА, ДИНАМИЧНАЯ МАСКА ТОЛЬКО СНИЗУ --- */
        /* Верхние углы 0 (прямые, пусть вылезают), нижние по 30px (как у плашки) */
        /* ---------------------------------------------- */

        transform-origin: bottom center;
        transition: transform 0.4s ease;
    }

/* АНИМАЦИЯ: При наведении на карточку персонаж чуть увеличивается */

.actor-card:hover .actor-image {
    transform: rotate(3deg);
    transition: transform 0.4s ease; /* Не забудь добавить плавность контейнеру, если ее там нет */
}
/* Адаптивность: на телефонах делаем 1 карточку в ряд */
@media (max-width: 1250px) {
    .actors-grid {
        grid-template-columns: 1fr; /* Перестраиваем в 1 колонку */
    }

    .actor-card {
        /* Меняем направление: картинка будет сверху, текст снизу */
        flex-direction: column-reverse;
        align-items: center;
        width: 100%;
        max-width: 600px; /* Чтобы на одну колонку карточка не растягивалась во весь гигантский экран */
        margin: 0 auto;
    }

    .actor-image {
        width: 100%;
        max-width: 280px; /* Картинка на ноутбуках/телефонах будет аккуратного размера */
        height: 350px;
    }

    .actor-info {
        width: 100%;
        box-sizing: border-box;
    }
}


@media (max-width: 768px) {
    /* 1. Уменьшаем отступы по краям и делаем отступ сверху для кнопки меню */
    .actors-page-wrapper {
        padding: 80px 15px 40px 15px; /* 80px сверху спасут от наезда на бургер-меню */
    }

    /* 2. Уменьшаем гигантский заголовок */
    .page-title {
        font-size: 36px; /* Было 60px */
        margin-bottom: 30px;
    }

    /* 3. Центрируем саму карточку и не даем ей вылезать */
    .actor-card {
        width: 100%;
        max-width: 100%;
        gap: 10px; /* Уменьшаем расстояние между картинкой и текстом */
    }

    /* 4. Белая плашка с картинкой */
    .actor-image {
        width: 100%;
        max-width: 240px; /* Делаем чуть уже для мобилок */
        height: 280px; /* И чуть ниже */
    }

    /* 5. Текстовый блок (стекло) */
    .actor-info {
        width: 100%;
        box-sizing: border-box; /* КРИТИЧЕСКИ ВАЖНО: не дает блоку стать шире экрана из-за padding */
        padding: 20px; /* Делаем внутренние отступы меньше (было 30px) */
        border-radius: 20px; /* Чуть меньше закругление */
    }

        /* 6. Уменьшаем шрифты внутри карточки */
        .actor-info h2 {
            font-size: 26px; /* Имя */
            margin-bottom: 5px;
        }

    .actor-role {
        font-size: 12px; /* Должность */
    }

    .actor-info p {
        font-size: 14px; /* Основной текст */
        margin-bottom: 15px;
    }

    /* 7. Иконки соцсетей */
    .actor-socials {
        justify-content: center; /* Центрируем иконки на телефоне */
    }
}

/* =========================================
   СТРАНИЦА ШОУ
   ========================================= */

.shows-page-wrapper {
    width: 100%;
    height: 100vh;
    padding: 60px 40px;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Список всех шоу */
.shows-list {
    display: flex;
    flex-direction: column;
    gap: 60px; /* Большое расстояние между разными шоу */
    max-width: 1200px;
    margin: 0 auto;
}

/* Сама карточка (эффект стекла) */
.show-card {
    display: flex;
    align-items: center;
    gap: 40px;
    background: rgba(15, 15, 15, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 40px; /* Сильное закругление всей карточки */
    padding: 30px;
    transform: translateZ(0); /* Фикс для размытия (как у актеров) */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

    .show-card:hover {
        transform: translateY(-5px) translateZ(0);
        box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.6);
    }

/* --- КОНТЕЙНЕР ПЛЕЕРА С ЗАКРУГЛЕНИЕМ --- */
.show-video {
    flex: 1.2; /* Плеер занимает чуть больше места, чем текст */
    aspect-ratio: 16 / 9; /* Идеальные пропорции видео */
    border-radius: 20px; /* ЗАКРУГЛЕНИЕ ПЛЕЕРА */
    overflow: hidden; /* Обрезает углы у iframe внутри */
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
    background-color: #000; /* Черный фон, пока грузится видео */
}

    /* Сам плеер YouTube */
    .show-video iframe {
        width: 100%;
        height: 100%;
        border: none;
    }

/* Текстовая часть */
.show-info {

    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Логотип шоу (вместо заголовка текстом) */
.show-logo {
    max-width: 250px; /* Подстрой под размер своих лого из фигмы */
    height: auto;
    margin-bottom: 25px;
}

.show-info p {
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-weight: 700 !important; /* Делаем его Bold */
    /* ------------------------------------- */

    font-size: 18px; /* Можно чуть поиграть с размером, если текст будет слишком крупным */
    line-height: 1.6;
    letter-spacing: 0.5px;
    margin-bottom: 25px;
}

/* Кнопки под шоу */
.show-actions {
    display: flex;
    gap: 15px;
}

.btn-small {
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-weight: 700 !important;
    background-color: #fff;
    color: #000;
    text-decoration: none;
    padding: 10px 25px;
    border-radius: 30px;
    font-size: 14px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

    .btn-small:hover {
        transform: scale(1.05);
    }

.btn-outline {
    background-color: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

    .btn-outline:hover {
        border-color: #fff;
        background-color: rgba(255, 255, 255, 0.1);
    }

/* =========================================
   АДАПТИВНОСТЬ ДЛЯ ШОУ (ноутбуки и телефоны)
   ========================================= */
@media (max-width: 1000px) {
    .show-card {
        flex-direction: column; /* Видео сверху, текст снизу */
        padding: 20px;
        gap: 25px;
    }

    .show-video {
        width: 100%;
    }

    .show-info {
        width: 100%;
        align-items: center; /* Центрируем текст на мобилках */
        text-align: center;
    }
}
/* =========================================
   СТРАНИЦА "О НАС" (ССЫЛКИ И QR)
   ========================================= */

.about-page-wrapper {
    width: 100%;
    height: 100vh; /* Делаем жесткую высоту экрана, как на других страницах */
    padding: 80px 20px 40px 20px; /* Аккуратные отступы для телефона */
    box-sizing: border-box;
    /* ВАЖНО: Включаем прокрутку вниз */
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* Сетка для двух больших карточек */
.links-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    width: 100%;
    max-width: 1400px;
    /* МАГИЯ ЗДЕСЬ: margin: auto отцентрирует блок на ПК, 
       а на телефоне позволит контенту нормально скроллиться вниз */
    margin: auto;
}

/* Сама стеклянная панель */
.link-card {
    background: rgba(25, 25, 25, 0.85); /* Темный фон как на макете */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 50px; /* Сильное закругление */
    padding: 50px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.5);
}

/* Заголовок и логотип */
.link-card-title {
    font-size: 42px;
    color: #fff;
    margin-bottom: 40px;
    margin-top: 0;
    letter-spacing: 2px;
}

.link-card-logo {
    max-width: 250px;
    margin-bottom: 40px;
}

/* Контейнер для QR-кодов */
.qr-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
    width: 100%;
    flex-wrap: wrap; /* Чтобы на телефонах они могли перенестись на новую строку */
}

/* Белая плашка с QR (теперь это ссылка!) */
.qr-item {
    position: relative;
    background: #fff;
    padding: 15px;
    border-radius: 20px;
    display: block;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}

    /* Анимация при наведении на QR */
    .qr-item:hover {
        transform: translateY(-10px) scale(1.05);
        box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.6);
    }

/* Черный кружок с иконкой над QR */
.qr-icon {
    position: absolute;
    top: -20px; /* Вылезает наверх */
    left: 50%;
    transform: translateX(-50%); /* Центруем по горизонтали */
    width: 44px;
    height: 44px;
    background: #111; /* Темный цвет кружка */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    border: 3px solid rgba(25, 25, 25, 0.85); /* Рамка в цвет стеклянного фона, чтобы "отрезать" белый фон */
}

/* Картинка самого кода */
.qr-item img {
    width: 110px;
    height: 110px;
    object-fit: contain;
    display: block;
}

/* Текст описания */
.link-card-desc {
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px;
    line-height: 1.6;
    color: #ddd;
    max-width: 400px;
    margin-bottom: 30px;
}

/* Кнопки Follow / Watch */
.link-card-btn {
    background-color: rgba(255, 255, 255, 0.3); /* Полупрозрачный серый */
    color: #fff;
    text-decoration: none;
    padding: 12px 40px;
    border-radius: 30px;
    font-size: 24px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    /* Если у тебя есть класс твоего круглого шрифта, добавь его сюда. Например: */
    /* font-family: 'ТвойКруглыйШрифт', sans-serif; */
}

    .link-card-btn:hover {
        background-color: rgba(255, 255, 255, 0.5);
        transform: scale(1.05);
    }

/* =========================================
   АДАПТИВНОСТЬ (до 1000px и до 768px)
   ========================================= */
@media (max-width: 1100px) {
    /* На средних экранах ставим панели друг под другом */
    .links-grid {
        grid-template-columns: 1fr;
    }

    .about-page-wrapper {
        padding-top: 80px;
        
    }
}

@media (max-width: 768px) {
    .link-card {
        padding: 40px 20px;
        border-radius: 30px;
    }

    .link-card-title {
        font-size: 32px;
    }

    .qr-container {
        gap: 20px;
        row-gap: 40px; /* Отступ между рядами, если QR перенесутся вниз */
    }

    .qr-item img {
        width: 90px;
        height: 90px;
    }

    .link-card-desc {
        font-size: 14px;
    }
}

/* =========================================
   СТРАНИЦА ВАКАНСИЙ (FAQ)
   ========================================= */

.vacancies-page-wrapper {
    width: 100%;
    height: 100vh; /* ВАЖНО: Жесткая высота, чтобы работал скролл! */
    padding: 60px 40px 40px 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto; /* Включаем прокрутку */
    overflow-x: hidden;
    /* Убедись, что тут НЕТ z-index, иначе динамический цвет логотипа сломается! */
}
.dynamic-logo {
    font-size: 80px;
    margin-top: 0;
    margin-bottom: 40px;
    letter-spacing: 4px;
    /* Магия перекрашивания на фоне */
    color: #fff;
    mix-blend-mode: difference;
    /* Отключаем тени, чтобы они не ломали эффект */
    -webkit-text-stroke: 0;
    text-shadow: none;
}

/* Сетка для карточек */
.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Текст описания (ТОЧЬ-В-ТОЧЬ КАК У АКТЕРОВ) */


/* Сама стеклянная карточка */
.faq-card {
    background: rgba(15, 15, 15, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 2px solid rgba(255, 255, 255, 0.05);
    border-radius: 40px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.5);
    transform: translateZ(0); /* Фикс размытия при наведении */
    transition: transform 0.3s ease;
}

    .faq-card:hover {
        transform: translateY(-5px);
    }

/* Логотип текстом (шрифтом Bagel Fat) */
.faq-logo {
    font-size: 50px;
    color: #fff;
    margin-bottom: 25px;
    letter-spacing: 2px;
}

/* Фейковая поисковая строка */
/* Фейковая поисковая строка */
.faq-search-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background-color: #fff;
    color: #000;
    width: 100%;
    max-width: 400px;
    padding: 10px 20px;
    /* --- ВОТ ОН, ФИКС --- */
    box-sizing: border-box; /* Теперь padding не увеличивает общую ширину */
    /* -------------------- */

    border-radius: 30px;
    margin-bottom: 25px;
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px;
}

/* Текст описания */


/* Текст описания (ТОЧЬ-В-ТОЧЬ КАК У АКТЕРОВ) */
.faq-text {
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px;
    line-height: 1.6;
    letter-spacing: 0.5px;
    color: #fff; /* Сделали чисто белым, как у актеров */
    margin-bottom: 30px;
    flex-grow: 1;
}
/* Контейнер для кнопок */
.faq-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
}

/* Кнопки как на макете */
.btn-faq {
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-weight: 700 !important;
    background-color: #4a4a4a;
    color: #fff;
    text-decoration: none;
    padding: 10px 30px;
    border-radius: 30px;
    font-size: 18px;
    letter-spacing: 1.5px;
    transition: transform 0.2s ease, background-color 0.2s ease;
    /* Если кнопки у тебя в CSS используют другой шрифт, оставь так. 
       Если нужен пухлый, то Bagel Fat наследуется автоматически из общего body */
}

    .btn-faq:hover {
        transform: scale(1.05);
        background-color: #666;
    }

/* Выделяем кнопку телеграма цветом */
.tg-btn {
    background-color: #2AABEE; /* Фирменный цвет ТГ */
}
.sss-btn {
    background-color: #999999; /* Фирменный цвет ТГ */
}

    .tg-btn:hover {
        background-color: #2298d6;
    }

/* Специально выделяем последнюю карточку (по желанию) */
.contact-card {
    border: 2px solid rgba(42, 171, 238, 0.3); /* Легкая синяя рамка */
}

/* =========================================
   АДАПТИВНОСТЬ ДЛЯ ТЕЛЕФОНОВ
   ========================================= */

@media (max-width: 900px) {
    .faq-grid {
        grid-template-columns: 1fr;
    }

    .faq-card {
        padding: 30px 20px;
    }

    /* Делаем полосочки компактнее на телефоне */
    .faq-search-bar {
        font-size: 13px; /* Шрифт чуть меньше */
        padding: 8px 15px; /* Уменьшаем толщину полоски */
        gap: 10px; /* Придвигаем лупу ближе к тексту */
    }
}
/* =========================================
   ЛЕНТА НОВОСТЕЙ (ВЫЕЗЖАЕТ СЛЕВА)
   ========================================= */

/* Кнопка открытия новостей (круглая кнопка с колокольчиком слева) */
.news-open-btn {
    position: fixed;
    top: 30px;
    left: 30px; /* Прижали к левому краю */
    background: rgba(15, 15, 15, 0.8);
    backdrop-filter: blur(10px);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 24px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 100;
    transition: transform 0.2s ease, background 0.2s ease;
}

.news-open-btn:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.2);
}

/* Сама выезжающая панель новостей */


/* Класс, который добавляется через JS при клике (панель выезжает) */
.news-sidebar.active {
    left: 0; 
}

/* Кнопка-крестик для закрытия панели */


.news-close-btn:hover {
    transform: rotate(90deg) scale(1.1);
}

/* Заголовок внутри панели */
.news-title {
    font-size: 32px;
    color: #fff;
    margin-top: 0;
    margin-bottom: 30px;
    text-align: center;
}

/* Внутренний контейнер, где прокручиваются посты */
.news-container {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 10px;
}

/* --- КАРТОЧКА ПОСТА (СТИЛЬ ПОД КАНАЛ TG) --- */
.news-post {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
}

/* Дата поста */
.post-date {
    font-size: 12px;
    color: #2AABEE; /* Фирменный цвет Telegram */
    margin-bottom: 10px;
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
}

/* Картинка или видео внутри поста */


/* Текст поста */
.post-text {
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-size: 14px;
    color: #fff;
    line-height: 1.5;
    margin: 0;
    white-space: pre-wrap; /* Чтобы сохранялись абзацы и переносы строк как в ТГ */
}
/* =========================================
   ОБЩИЕ СТИЛИ ДЛЯ ОБЕИХ ПАНЕЛЕЙ (МЕНЮ И НОВОСТИ)
   ========================================= */
/* =========================================
   ОБЩИЕ СТИЛИ ДЛЯ ОБЕИХ ПАНЕЛЕЙ (МЕНЮ И НОВОСТИ)
   ========================================= */
.sidebar, .news-sidebar {
    position: fixed;
    top: 0;
    width: 350px;
    height: 100vh;
    background: rgba(15, 15, 15, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 1000;
    padding: 80px 40px 30px 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    transition: left 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), right 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* --- БРОНЕБОЙНЫЙ ФИКС ДЛЯ СТЕКЛА --- */
    transform: translateZ(0);
    clip-path: inset(0 0 0 0); /* Жёстко обрезает любые эффекты ровно по границам блока */
}

/* --- Индивидуальные настройки сторон --- */
/* Правое меню */
.sidebar {
    right: -350px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

    .sidebar.active {
        right: 0;
    }

/* Левые новости */
.news-sidebar {
    left: -350px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

    .news-sidebar.active {
        left: 0;
    }

/* =========================================
   ОБЩИЕ СТИЛИ ДЛЯ КНОПОК ЗАКРЫТИЯ (КРЕСТИКИ)
   ========================================= */
.sidebar, .news-sidebar {
    position: fixed;
    top: 20px; /* Отступ сверху (парящий эффект) */
    width: 300px; /* Аккуратная ширина из твоего дизайна */
    height: calc(100vh - 40px); /* Высота с учетом отступов сверху и снизу */
    background: rgba(0, 0, 0, 0.85); /* Твой плотный черный */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    padding: 30px;
    box-sizing: border-box;
    /* Плавная анимация выезда для обеих панелей */
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1), right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Правое меню (Навигация) */
.sidebar {
    right: -320px; /* Прячем за край с запасом */
    border-radius: 30px 0 0 30px; /* Закругляем только левые углы */
    border-right: none; /* Убираем рамку там, где прилегает к краю экрана */
}

    .sidebar.active {
        right: 0;
    }

/* Левое меню (Новости TG) */
.news-sidebar {
    left: -320px; /* Прячем за край с запасом */
    border-radius: 0 30px 30px 0; /* ЗЕРКАЛЬНО: Закругляем только правые углы */
    border-left: none; /* Убираем рамку там, где прилегает к краю экрана */
}

    .news-sidebar.active {
        left: 0;
    }


/* =========================================
   ОБЩИЕ СТИЛИ ДЛЯ КНОПОК ЗАКРЫТИЯ (КРЕСТИКИ)
   ========================================= */
.menu-close-btn, .news-close-btn {
    align-self: flex-end; /* Твоя настройка: прижимаем вправо */
    background: none;
    border: none;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    margin-bottom: 40px;
    transition: transform 0.2s ease;
}

    .menu-close-btn:hover, .news-close-btn:hover {
        transform: rotate(90deg) scale(1.1);
    }



/* =========================================
   ОБНОВЛЕНИЕ ДЛЯ ПАНЕЛИ НОВОСТЕЙ (ШИРИНА И СКРОЛЛ)
   ========================================= */

/* 1. Делаем панель новостей шире (переопределяем старые 300px) */
/* 1. Бронебойная фиксация к левому краю */
.news-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: -420px !important; /* Прячем ровно на её ширину */
    margin: 0 !important; /* Убиваем любые случайные отступы */
    height: 100vh !important; /* Растягиваем от потолка до пола */
    width: 420px !important;
    max-width: 100% !important; /* На телефонах она займет 100% ширины, а не уедет за край */
    border-radius: 0 20px 20px 0 !important; /* Скругляем ТОЛЬКО правые углы, левые плотно прилегают */
    transform: none !important; /* Отключаем возможные конфликты с другими анимациями */
}

    .news-sidebar.active {
        left: 0 !important;
    }

/* 2. Кастомный скроллбар для ленты новостей */
.news-container {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Аккуратное расстояние между постами */
}

    .news-container::-webkit-scrollbar {
        width: 6px; /* Тонкая и аккуратная полоска */
    }

    .news-container::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05); /* Едва заметная дорожка */
        border-radius: 10px;
    }

    .news-container::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2); /* Полупрозрачный ползунок */
        border-radius: 10px;
    }

        .news-container::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.5); /* Становится ярче при наведении */
        }

/* 3. Улучшаем отображение картинок */
.post-media {
    width: 100%;
    height: auto; /* Горизонтальные картинки теперь не будут сплющиваться */
     /* Ограничиваем высоту для слишком длинных вертикальных фото */
    object-fit: cover;
    border-radius: 15px;
    margin-bottom: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Добавляем легкую тень для объема */
}
@media (max-width: 500px) {
    .news-sidebar, .sidebar {
        width: 100%;
        top: 0;
        height: 100vh;
        border-radius: 0;
    }

    .news-sidebar {
        left: -100%;
    }

    .sidebar {
        right: -100%;
    }
}
.news-section {
    display: block !important;
    position: relative !important; /* Оставляем, как есть */
    clear: both;
    max-width: 800px;
    /* --- ИСПРАВЛЕНИЕ: Поднимаем новости выше --- */
    margin-top: -300px; /* <--- Изменяй это число, чтобы поднять выше или ниже (например, -200px) */
    margin-bottom: 0px; /* Убираем нижний margin */
    margin-left: auto; /* Центрируем по горизонтали */
    margin-right: auto;
    /* Добавляем z-index, чтобы новости были ПОВЕРХ фоновых клякс */
    
    /* Сохраняем padding, если тебе нравятся внутренние отступы */
    padding: 80px 20px;
}

.news-header h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 30px;
    
    color: #fff;
    mix-blend-mode: difference;
}

/* Контейнер теперь не нуждается в собственном скроллбаре, он просто тянется вниз */
.news-container {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Расстояние между постами */
}

/* Стили самой карточки новости (оставляем твой "стеклянный" стиль) */
.news-card {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Обязательно для Apple Safari */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    overflow: hidden; /* Обрезает всё, что выходит за границы скруглений */
    transform: translateZ(0); /* Включает аппаратное ускорение видеокарты для этого блока */
}

/* Стили для картинок в ленте */
    .post-media {
    width: 100%;
    height: auto;
    border-radius: 15px;
    margin-bottom: 20px;
    object-fit: cover;
}