:root {
  --bg-color: #0E0E0E;
  --card-bg: #161616; /* Чуть светлее фона, чтобы выделить карточку */
  --accent: #BB86FC;
  --text-main: #FFFFFF;
  --text-sec: #B0B0B0;
}

* {
    box-sizing: border-box; /* Важнейшая строка для ровной верстки */
    -webkit-tap-highlight-color: transparent; /* Убирает синий квадрат при клике на айфоне */
}

body {
    background-color: #0E0E0E;
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
    padding-top: 90px; 
}

/* --- Сетка товаров --- */
/* --- Сетка товаров (Центрированная) --- */
.plugins-grid {
    display: grid;
    /* 🔥 МЕНЯЕМ НА 3 КОЛОНКИ: */
    grid-template-columns: repeat(3, 1fr); 
    
    /* 🔥 Увеличиваем ширину с 800px до 1100px, чтобы влезло 3 карточки */
    max-width: 1100px; 
    
    /* Оставляем твою магию подтягивания вверх */
    margin: -30px auto 50px; 
    
    gap: 30px; 
    padding-bottom: 50px;
    justify-content: center; 
    width: 100%;
    box-sizing: border-box;  
    padding-left: 15px;      
    padding-right: 15px;
}

/* --- АДАПТИВ (Для телефонов) --- */
@media (max-width: 768px) {
    
    .plugins-grid {
        grid-template-columns: repeat(2, 1fr); /* На планшетах будет 2 в ряд */
        max-width: 800px;
    }
    .lang-switch {
        font-size: 0.75rem !important; /* Делаем текст компактнее */
        margin-right: 10px !important; /* Придвигаем вплотную к корзине (было 20px) */
        gap: 4px !important;           /* Уменьшаем пробел между RU | EN */
    }
}

/* --- Контейнер (Обертка всего контента) --- */
.container {
    max-width: 1200px;
    margin: 0 auto; /* ЭТО ГЛАВНОЕ: центрирует весь блок на странице */
    padding: 40px 20px;
    width: 100%;
}

/* Убираем подчеркивание у ссылки-обертки текста */
.card-text-link {
    text-decoration: none;
    color: inherit;
    display: block;
    flex-grow: 1; /* Чтобы ссылка занимала всё свободное место до кнопки */
}

/* --- Сама Карточка --- */
.plugin-card {
    /* Полупрозрачный темный фон (меняй 0.4 на 0.2, если хочешь прозрачнее) */
    background: rgba(25, 25, 30, 0.4) !important; 
    
    /* Эффект матового стекла (размывает ноды, пролетающие сзади) */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* Для Safari (Mac/iPhone) */
    
    /* Тонкая глянцевая рамка по краям, чтобы карточка не сливалась с фоном */
    border: 1px solid rgba(255, 255, 255, 0.06) !important; 
    
    /* Мягкая тень для отделения от фона */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    
    border-radius: 16px; /* Твое скругление (оставь как было, если нужно другое) */
    overflow: hidden;
    
    /* Плавность при наведении */
    transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* --- Стили для активной кнопки (В КОРЗИНЕ) --- */
.btn-in-cart {
    background-color: #BB86FC !important; /* Насильно красим в фиолетовый */
    color: #0E0E0E !important; /* Черный текст */
    border-color: #BB86FC;
    opacity: 0.8; /* Чуть приглушаем, чтобы показать, что действие выполнено */
}

.btn-in-cart:hover {
    opacity: 1; /* При наведении становится яркой */
    background-color: #a370db !important; /* Чуть другой оттенок */
}

.plugin-card:hover {
    transform: translateY(-5px);
    border-color: #BB86FC;
}

.card-image {
    display: block;
    width: 100%;
    
    /* ГЛАВНОЕ ИЗМЕНЕНИЕ: Делаем квадрат */
    aspect-ratio: 1 / 1; 
    
    background: #111;
    border-bottom: 1px solid #222;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Картинка заполнит квадрат и обрежет лишнее по бокам */
    transition: transform 0.3s ease;
    display: block;
}

.card-content {
    padding: 16px; /* Уменьшили внутренние отступы (было 20px) */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* --- Шапка (Название + Цена) --- */
/* --- ЗАГОЛОВОК И ЦЕНА (В ОДНУ СТРОКУ) --- */
.card-header {
    display: flex;
    justify-content: space-between; /* Разносим по краям: слева название, справа цена */
    align-items: center; /* Центрируем по вертикали */
    margin-bottom: 12px;
}

/* --- Цена в рамочке --- */
.card-price-badge {
    background: transparent; /* Убрали фон */
    border: none;            /* Убрали рамку */
    padding: 0;              /* Убрали отступы */
    
    font-size: 24px;         /* Сделали крупнее */
    font-weight: 700;        /* Жирный шрифт */
    color: #fff;             /* Чисто белая цена */
    letter-spacing: 0.5px;
}

/* --- КНОПКА "В КОРЗИНУ" (СТРОГАЯ) --- */
.btn-add-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 0;
    
    /* Темный стиль */
    background: #141414;     /* Почти черный фон */
    border: 1px solid #333;  /* Темно-серая рамка */
    border-radius: 8px;
    
    color: #888;             /* Серый текст (неактивный вид) */
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Эффект при наведении */
.btn-add-cart:hover {
    background: #1a1a1a;     /* Чуть светлее фон */
    border-color: #666;      /* Рамка становится светлее */
    color: #fff;             /* Текст загорается белым */
}

/* Чтобы иконка корзины внутри кнопки тоже меняла цвет */
.btn-add-cart svg {
    margin-right: 8px;
    stroke: currentColor;    /* Цвет иконки берется из цвета текста */
    width: 18px;
    height: 18px;
}

.card-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.card-price {
    font-size: 1.2rem;
    font-weight: 600;
    color: #BB86FC;
    margin-bottom: 15px;
}


.card-features li {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --- Описание товара (вместо списка) --- */
/* --- Описание --- */
.card-desc {
    font-size: 0.85rem;
    color: #B0B0B0;
    line-height: 1.4;
    margin-bottom: 15px;
    
    /* Ограничение строк */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 2.4em; /* Высота под 2 строки текста */
}

.btn-container {
    margin-top: auto; /* Прижимает кнопку к низу */
    width: 100%;
}

/* Эффект при наведении НА САМУ КНОПКУ */
.btn-buy:hover,
.plugin-card:hover .btn-buy:hover { 
    background: #1a1a1a;     /* Чуть светлее фон */
    border-color: #666;      /* Рамка светлеет */
    color: #fff;             /* Текст становится белым */
}

/* --- Кнопка (ИСПРАВЛЕННАЯ: ТЕМНАЯ) --- */
.btn-buy {
    display: flex; /* Чтобы иконка и текст центрировались */
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 0;
    
    /* ТЕМНЫЙ СТИЛЬ */
    background: #141414;     /* Почти черный фон */
    border: 1px solid #333;  /* Темно-серая рамка */
    color: #888;             /* Серый текст */
    
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

/* УБИРАЕМ фиолетовый фон при наведении на карточку */
.plugin-card:hover .btn-buy {
    background: #141414; /* Оставляем темным */
    color: #888;         /* Оставляем серым (пока не наведешь на саму кнопку) */
    border-color: #333;
}


/* Эффект нажатия (чтобы чувствовалось клик) */
.btn-buy:active {
    transform: scale(0.98);
}

.cart-badge {
    background-color: #BB86FC; /* Твой брендовый цвет */
    color: #000;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px; /* Овальная форма */
    margin-left: 5px;
    vertical-align: middle; /* Выравнивание по центру строки */
}



/* --- Глобальный фикс отступа --- */
body {
    /* ВАЖНО: Так как хедер fixed и высотой 70px, 
       нужно сдвинуть контент вниз, иначе хедер закроет заголовок */
    padding-top: 90px; 
}

/* --- НАВИГАЦИЯ --- */
.main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: rgba(14, 14, 14, 0.95); /* Чуть плотнее фон для читаемости */
    backdrop-filter: blur(12px);
    z-index: 9999 !important; /* Всегда поверх нод, карточек и модалок */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    
}

.nav-container {
    max-width: 1200px; /* Синхронизировал ширину с твоим контейнером */
    margin: 0 auto;
    padding: 0 20px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* --- Логотип --- */
.logo a {
    display: flex;
    align-items: center;
    height: 100%;
    text-decoration: none;
}

.logo img {
    height: 32px;
    width: auto;
    display: block;
}

/* Скрываем второе лого по умолчанию (если нет JS логики скролла) 
   Если логика есть — убери display: none */
.logo-scrolled {
    display: none; 
}

/* --- Ссылки меню (Центр) --- */
.nav-links {
    display: flex;
    gap: 30px; /* Расстояние между ссылками */
}

.nav-links a {
    text-decoration: none;
    color: #B0B0B0; /* Светло-серый */
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.nav-links a:hover {
    color: #FFFFFF; /* При наведении белый */
}

/* --- Правая часть (Войти) --- */
.nav-auth {
    display: flex;
    align-items: center;
}

.login-link {
    text-decoration: none;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 6px;
    transition: all 0.2s;
}

.login-link:hover {
    border-color: #333; /* Легкая рамка при наведении */
    background: rgba(255, 255, 255, 0.05);
}

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

/* Ссылка на корзину */
.nav-cart {
    text-decoration: none;
    color: #B0B0B0; /* Серый цвет */
    margin-right: 20px; /* Отступ от кнопки кабинета */
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.2s;
}

.nav-cart:hover {
    color: #FFFFFF;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* Кнопка Личный кабинет */
.btn-cabinet {
    text-decoration: none;
    background-color: #BB86FC; /* Брендовый фиолетовый */
    color: #0E0E0E; /* Черный текст для контраста */
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(187, 134, 252, 0.2);
}

.btn-cabinet:hover {
    background-color: #FFFFFF; /* При наведении белая */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

/* --- ОБЕРТКА КОРЗИНЫ --- */
.cart-wrapper {
    position: relative; /* Чтобы выпадающее меню позиционировалось относительно кнопки */
    display: inline-block;
    padding-bottom: 10px; /* "Мостик", чтобы мышка не теряла фокус при переходе к меню */
    margin-bottom: -10px; /* Компенсация отступа */
    margin-right: 20px;
}

/* --- ВЫПАДАЮЩЕЕ МЕНЮ (Скрыто по умолчанию) --- */
.cart-dropdown {
    display: none; /* Скрыто */
    position: absolute;
    top: 100%; /* Сразу под кнопкой */
    right: 0; /* Прижато к правому краю */
    width: 320px; /* Ширина меню */
    background-color: #161616; /* Темный фон */
    border: 1px solid #333;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    z-index: 3000 !important;
    padding: 15px;
    cursor: default; /* Курсор обычный */
}

/* Показываем меню при наведении на обертку */
.cart-wrapper:hover .cart-dropdown {
    display: block;
    animation: fadeIn 0.2s ease-in-out;
}

/* Анимация появления */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- ЭЛЕМЕНТ В СПИСКЕ --- */
.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #2A2A2A;
}

.dropdown-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Картинка товара */
.dropdown-item img {
    width: 50px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    background: #000;
}

/* Инфо о товаре */
.item-info {
    flex-grow: 1;
}

.item-title {
    font-size: 0.9rem;
    color: #FFF;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.item-price {
    font-size: 0.85rem;
    color: #BB86FC;
}

/* Кнопка удаления (крестик) */
.item-remove {
    color: #666;
    text-decoration: none;
    font-size: 1.5rem;
    line-height: 1;
    transition: color 0.2s;
    padding: 0 5px;
}

.item-remove:hover {
    color: #FF5555; /* Красный при наведении */
}

/* --- ПОДВАЛ МЕНЮ (ИТОГО + КНОПКА) --- */
.dropdown-footer {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #333;
}

.dropdown-total {
    display: flex;
    justify-content: space-between;
    color: #B0B0B0;
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.dropdown-total span {
    color: #FFF;
    font-weight: bold;
}

.btn-checkout {
    display: block;
    width: 100%;
    box-sizing: border-box; /* <--- ВОТ ЭТО ЛЕЧИТ ВЫЛЕЗАНИЕ */
    background-color: #BB86FC;
    color: #000;
    text-align: center;
    padding: 12px; /* Чуть увеличил для удобства */
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
    transition: background 0.2s;
    margin-top: 10px; /* Отступ от "Итого" */
}

.btn-checkout:hover {
    background-color: #FFF;
}

/* Сообщение если пусто */
.empty-cart-msg {
    text-align: center;
    color: #777;
    padding: 20px 0;
    font-size: 0.9rem;
}

/* --- Летящая картинка --- */
.flying-img {
    position: fixed;
    z-index: 9999; /* Поверх всего */
    border-radius: 50%; /* Превращаем в круг */
    opacity: 0.9;
    pointer-events: none; /* Чтобы сквозь нее можно было кликать */
    box-shadow: 0 0 15px rgba(187, 134, 252, 0.5); /* Фиолетовый шлейф */
    transition: all 0.8s cubic-bezier(0.2, 1, 0.3, 1); /* Плавная анимация полета */
}

/* --- Летящий фиолетовый шар --- */
/* --- Летящий фиолетовый шар с Motion Blur --- */
/* --- Летящий шарик (Без размытия) --- */
.flying-particle {
    position: fixed;
    z-index: 2500 !important;
    background-color: #BB86FC; /* Цвет кнопки */
    border-radius: 50%;
    pointer-events: none;
    
    /* Простое свечение (тень), без блюра самой фигуры */
    box-shadow: 0 0 10px rgba(187, 134, 252, 0.6); 
    
    opacity: 1;

    /* 1.0s - оптимальная скорость для четкого объекта */
    transition: all 1.0s cubic-bezier(0.2, 1, 0.3, 1);
}

/* --- МОДАЛЬНОЕ ОКНО (Overlay) --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Полупрозрачный фон */
    backdrop-filter: blur(10px); /* Красивое размытие фона */
    z-index: 99999 !important; /* Очень большое число */
    
    /* Скрыто по умолчанию */
    visibility: hidden;
    opacity: 0;
    
    /* Плавное появление фона */
    transition: opacity 0.4s ease, visibility 0.4s ease;
    
    display: flex;
    justify-content: center;
    align-items: center;
    overscroll-behavior: none;
}

.alert {
    z-index: 10000 !important;
}

/* Состояние: Открыто */
.modal-overlay.active {
    visibility: visible;
    opacity: 1;
}

/* --- САМО ОКНО --- */
.modal-window {
    background: #0E0E0E;
    width: 1100px; /* БЫЛО 900px -> СТАЛО 1100px (чтобы видео были крупнее) */
    max-width: 95%;
    max-height: 90vh;
    border: 1px solid #333;
    border-radius: 20px;
    position: relative;
    box-shadow: 0 30px 60px rgba(0,0,0,0.7);
    overflow: hidden;
    
    /* Анимация */
    transform: scale(0.95) translateY(20px);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.4s ease;
}

/* Когда активно - увеличиваем до 100% */
.modal-overlay.active .modal-window {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Скроллбар внутри окна, если контента много */
.modal-scroll-container {
    padding: 40px;
    overflow-y: auto;
    max-height: 90vh;
    box-sizing: border-box;
    overscroll-behavior: contain;
}

/* Крестик */
.modal-close {
    position: absolute;
    top: 20px;
    right: 25px;
    background: transparent;
    border: none;
    color: #777;
    font-size: 2.5rem;
    cursor: pointer;
    z-index: 10;
    line-height: 1;
    transition: color 0.2s;
}
.modal-close:hover { color: #FFF; }

/* --- ВЕРХНЯЯ ЧАСТЬ (COMPACT VIEW) --- */
.modal-top {
    display: grid;
    /* БЫЛО: 350px 1fr -> СТАЛО: 260px 1fr (Картинка меньше) */
    grid-template-columns: 260px 1fr; 
    gap: 30px; /* БЫЛО: 40px -> Сдвинули ближе */
    margin-bottom: 30px; /* Отступ снизу до описания */
}

/* Левая колонка (Картинка) */
.modal-left-col img {
    width: 100%;
    aspect-ratio: 1 / 1; 
    object-fit: cover;
    border-radius: 12px;
    /* Тень чуть мягче для маленького размера */
    box-shadow: 0 5px 20px rgba(0,0,0,0.4); 
}

/* Правая колонка (Инфо) */
.modal-right-col {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Центрируем по вертикали относительно картинки */
}

.modal-title {
    font-size: 2rem; /* БЫЛО: 2.5rem -> Уменьшили заголовок */
    font-weight: 800;
    color: #FFF;
    margin-bottom: 5px; /* Меньше отступ */
    line-height: 1.1;
}

.modal-price-block {
    margin-bottom: 20px; /* БЫЛО: 25px */
}

.current-price {
    font-size: 1.8rem; /* БЫЛО: 2rem -> Уменьшили цену */
    color: #BB86FC;
    font-weight: bold;
}

.modal-features-list {
    margin-bottom: 20px; /* БЫЛО: 30px */
    list-style: none; /* Убирает точки */
    padding-left: 0;  /* Убирает лишний отступ слева */
}

.modal-features-list li {
    font-size: 0.95rem; /* Чуть компактнее текст */
    color: #CCC;
    margin-bottom: 6px;
}

/* Кнопка в модалке */
.modal-btn-main {
    background: #BB86FC;
    color: #0E0E0E;
    text-align: center;
    padding: 12px; /* БЫЛО: 16px -> Сделали кнопку чуть тоньше */
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    width: 100%; 
}

.modal-btn-main:hover {
    background: #1a1a1a !important; /* Строгий темный фон */
    color: #FFFFFF !important;      /* Светлый текст */
    box-shadow: none !important;    /* Полностью убираем свечение */
    transform: translateY(-2px);    /* Оставляем легкое поднятие для тактильности */
}

/* Состояние "В корзине" для модалки */
.modal-btn-main.btn-in-cart {
    background: #222;
    color: #FFF;
    border: 1px solid #333;
}

/* --- НИЖНЯЯ ЧАСТЬ (Описание + Видео) --- */
.modal-bottom {
    border-top: 1px solid #222;
    padding-top: 30px;
}

.modal-section-title {
    font-size: 1.2rem;
    color: #FFF;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
}

.modal-desc-text {
    font-size: 1.05rem;
    color: #BBB;
    line-height: 1.7;
    margin-bottom: 40px;
    white-space: pre-line; /* Сохраняет абзацы из базы данных */
}

/* Видео контейнер */
.modal-video-wrapper {
    margin-top: 20px;
}

/* Адаптивный iframe (16:9) */
.video-responsive {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
}

.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* --- АДАПТИВ МОДАЛКИ (ОБНОВЛЕННЫЙ) --- */
@media (max-width: 800px) {
    .modal-top {
        grid-template-columns: 1fr; /* Одна колонка */
        gap: 20px;
        text-align: center; /* На телефоне центрируем всё */
    }
    
    .modal-left-col img {
        height: 200px; /* БЫЛО: 250px -> Делаем компактнее на мобиле */
        width: 200px;  /* Квадрат по центру */
        margin: 0 auto; 
    }
    
    .modal-right-col {
        align-items: center; /* Центрируем кнопку */
    }

    .modal-title { font-size: 1.8rem; }
    .modal-btn-main { width: 100%; max-width: 300px; }
}

/* --- ГАЛЕРЕЯ В МОДАЛКЕ --- */

/* Сетка: 2 колонки, на мобилках 1 */
.modal-gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Две колонки */
    gap: 20px; /* УМЕНЬШИЛИ отступ (было 40px), чтобы сами видео стали шире */
    margin-top: 30px;
}

.gallery-item {
    display: flex;
    flex-direction: column;
}

/* Медиа блок (Видео или Картинка) */
.gallery-media {
    width: 100%;
    /* ВАЖНО: Меняем 16/9 на 4/3 (они станут выше и квадратнее) */
    aspect-ratio: 4 / 3; 
    background: #000;
    border-radius: 12px; /* Чуть больше скругление */
    overflow: hidden;
    border: 1px solid #333;
    margin-bottom: 15px;
    position: relative; /* Для позиционирования видео внутри */
}

.gallery-media img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Картинка заполняет весь блок 4:3 */
}

.gallery-media iframe {
    width: 100%;
    height: 100%;
    /* Если видео с YouTube (16:9), оно будет с черными полосами сверху/снизу. 
       Это нормально для плеера. Если хочешь растянуть — добавь object-fit: cover (но обрежет края) */
}

/* Подпись под блоком */
.gallery-caption {
    color: #999;
    font-size: 1rem; /* Чуть крупнее текст */
    text-align: center;
    line-height: 1.5;
    padding: 0 10px;
}

/* Адаптив: на телефонах одна колонка */
@media (max-width: 800px) {
    .modal-gallery-grid {
        grid-template-columns: 1fr;
    }
}

/* --- СТИЛИЗАЦИЯ СКРОЛЛА (Dark Gray) --- */

/* 1. Webkit (Chrome, Safari, Edge) */
.modal-scroll-container::-webkit-scrollbar {
    width: 6px; /* Тонкий */
}

/* Фон (трек) */
.modal-scroll-container::-webkit-scrollbar-track {
    background: transparent; /* Полностью прозрачный фон трека */
    margin: 20px 0;
}

/* Сам ползунок (бегунок) */
.modal-scroll-container::-webkit-scrollbar-thumb {
    background-color: #363636; /* Твой темно-серый цвет */
    border-radius: 4px;
    border: 1px solid #0E0E0E; /* Тонкая обводка под цвет фона для "отлипания" */
}

/* При наведении делаем чуть светлее, чтобы было видно взаимодействие */
.modal-scroll-container::-webkit-scrollbar-thumb:hover {
    background-color: #555555; 
}

/* 2. Firefox */
.modal-scroll-container {
    scrollbar-width: thin;
    scrollbar-color: #363636 transparent;
}


/* --- Шапка магазина (Заголовок + Описание) --- */
.shop-header {
    text-align: center;
    /* Убираем нижний отступ в 0 */
    padding: 80px 20px 0px;
    
    max-width: 700px; 
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 10;
    margin-top: 80px !important;
}

.page-title {
    font-size: 2.5rem; /* Крупный заголовок */
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 15px; /* Небольшой отступ до описания */
    letter-spacing: -1px; /* Чуть плотнее буквы */
}

.page-subtitle {
    font-size: 1rem;
    color: #B0B0B0; /* Светло-серый цвет */
    line-height: 1.6; /* Межстрочный интервал для читаемости */
}

/* Стиль для текста "(в разработке)" */
.dev-status {
    color: #666; /* Более темный серый, чтобы не отвлекало */
    font-size: 0.9em;
}

/* Адаптив для телефонов */
@media (max-width: 600px) {
    .page-title {
        font-size: 2rem;
    }
    .page-subtitle {
        font-size: 0.9rem;
        padding: 0 10px; /* Отступы по бокам, чтобы текст не прилипал к краям экрана */
    }
}

/* --- ЛИНИЯ ЗАГРУЗКИ (Под хедером) --- */
/* --- ЛИНИЯ ЗАГРУЗКИ (ИСПРАВЛЕНИЕ) --- */
.header-loader {
    position: fixed;
    top: 70px; /* Под хедером */
    left: 0;
    width: 100%;
    height: 3px; 
    background-color: transparent; 
    
    /* ГЛАВНОЕ ИЗМЕНЕНИЕ: */
    /* Было 2000. Ставим 990, чтобы она была НИЖЕ меню (1000), но ВЫШЕ контента */
    z-index: 990 !important; 
    
    overflow: hidden;
    pointer-events: none;
    opacity: 0; 
    transition: opacity 0.3s ease;
}

/* Сама "волна" */
.header-loader::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%; /* Длина волны */
    height: 100%;
    
    /* Градиент: Прозрачно - Ярко Фиолетовый - Прозрачно */
    background: linear-gradient(
        90deg, 
        transparent 0%, 
        #BB86FC 50%, 
        transparent 100%
    );
    
    /* Размытие для эффекта свечения */
    box-shadow: 0 0 10px #BB86FC; 
    
    transform: translateX(-150%); /* Спрятана слева */
}

/* Класс запуска анимации */
.header-loader.loading {
    opacity: 1;
}

.header-loader.loading::after {
    animation: loaderWave 1.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes loaderWave {
    0% {
        transform: translateX(-150%);
    }
    50% {
        /* Замедляется в центре */
        transform: translateX(50%);
    }
    100% {
        transform: translateX(250%);
    }
}

/* --- ГЛОБАЛЬНЫЙ СКРОЛЛ (Весь сайт) --- */

/* 1. Webkit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 10px; /* Ширина основного скролла */
    background-color: #0E0E0E; /* Подложка в цвет фона сайта */
}

/* Дорожка (фон скролла) */
::-webkit-scrollbar-track {
    background-color: #0E0E0E; 
}

/* Ползунок */
::-webkit-scrollbar-thumb {
    background-color: #363636; /* Твой темно-серый цвет */
    border-radius: 10px; /* Закругленные края */
    border: 2px solid #0E0E0E; /* Отступ, чтобы скролл не слипался с краем */
}

/* При наведении */
::-webkit-scrollbar-thumb:hover {
    background-color: #555555; /* Чуть светлее, когда тянешь */
}

/* 2. Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: #363636 #0E0E0E; /* ползунок фон */
}

/* Оставляем обрезку по бокам только для body, чтобы не ломать скролл */
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden; 
    position: relative;
    margin: 0;
    padding: 0;
}

/* А магниты вешаем на html */
html {
    scroll-behavior: smooth;
    scroll-snap-type: y proximity; /* Мягкий магнитный скролл */
}

/* --- КНОПКА ПРОФИЛЯ (Двухэтажная) --- */

.profile-btn {
    display: flex;
    flex-direction: column; /* Текст друг под другом */
    justify-content: center;
    align-items: flex-start; /* Выравнивание по левому краю */
    
    padding: 6px 14px; /* Внутренние отступы */
    background-color: transparent;
    border: 1px solid #333; /* Темная рамка */
    border-radius: 8px; /* Скругление */
    
    text-decoration: none;
    transition: all 0.3s ease;
    min-width: 140px; /* Минимальная ширина, чтобы смотрелось солидно */
}

/* Почта (верхняя строка) */
.profile-email {
    font-size: 0.9rem;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 2px; /* Отступ до нижнего текста */
    
    /* Если почта очень длинная, обрезаем с троеточием */
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* "Личный кабинет" (нижняя строка) */
.profile-subtext {
    font-size: 0.75rem; /* Мелкий текст */
    color: #888; /* Серый цвет */
    font-weight: 400;
}

/* Эффект при наведении */
.profile-btn:hover {
    border-color: #BB86FC; /* Рамка становится фиолетовой */
    background-color: rgba(187, 134, 252, 0.05); /* Едва заметный фиолетовый фон */
}

.profile-btn:hover .profile-subtext {
    color: #BB86FC; /* Нижний текст тоже становится фиолетовым */
}

/* --- БЛОК ГАРАНТИЙ (В модалке) --- */
.modal-guarantee {
    display: flex;
    align-items: flex-start; /* Иконка сверху, если текст длинный */
    gap: 15px; /* Отступ между иконкой и текстом */
    
    margin-top: 30px; /* Отступ от видео/описания сверху */
    padding: 20px;
    
    background-color: rgba(255, 255, 255, 0.03); /* Очень легкий фон */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Тонкая рамка */
    border-radius: 12px;
}

/* Иконка */
.guarantee-icon svg {
    display: block;
    width: 24px;
    height: 24px;
    /* Цвет берется из SVG (stroke="#BB86FC"), но можно переопределить тут */
}

/* Текстовая часть */
.guarantee-text h3 {
    margin: 0 0 5px 0; /* Отступ снизу заголовка */
    font-size: 0.95rem;
    font-weight: 600;
    color: #FFFFFF;
}

.guarantee-text p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #A0A0A0; /* Серый текст описания */
}

/* Ссылка внутри текста */
.guarantee-text a {
    color: #BB86FC;
    text-decoration: none;
    border-bottom: 1px dashed rgba(187, 134, 252, 0.5); /* Пунктирное подчеркивание */
    transition: all 0.2s;
}

.guarantee-text a:hover {
    color: #fff;
    border-bottom-color: #fff;
}

/* --- БЛОК ДОВЕРИЯ (На главной странице) --- */
.shop-trust-block {
    max-width: 600px; 
    /* 🔥 Увеличили верхний отступ (было 20px, стало 150px), чтобы дать место для головы */
    margin: 80px auto 80px;
    text-align: center; 
    padding: 20px 30px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 100%); 
    border: 1px solid rgba(255, 255, 255, 0.08); 
    border-radius: 16px;
    position: relative;
    z-index: 10;
    margin-top: 40px;
}

/* =========================================
   НИКИТА НАД БЛОКОМ ДОВЕРИЯ (ЦЕНТР)
   ========================================= */

.trust-portrait {
    position: absolute;
    bottom: 100%; 
    left: 50%;     
    width: 320px; /* Чуть меньше, чтобы смотрелось аккуратно */
    
    /* Сдвигаем влево на 50% (строго по центру) и опускаем вниз на 35px, чтобы руки легли на блок */
    transform: translate(-50%, 37px); 
    
    filter: brightness(0.6) contrast(1.05);
    z-index: 5; 
    pointer-events: none; 
}

/* Иконка */
/* Иконка */
.trust-icon {
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    
    /* Сделали подложку иконки чуть компактнее (было 60х60) */
    width: 50px;
    height: 50px;
    background-color: rgba(187, 134, 252, 0.1); 
    border-radius: 50%;
    
    /* Уменьшили дыру между иконкой и текстом (было 20px) */
    margin-bottom: 12px; 
}

.trust-icon svg {
    width: 24px;
    height: 24px;
}

/* Текст */
.trust-content h3 {
    /* Уменьшили отступ под заголовком (было 10px) */
    margin: 0 0 5px 0;
    font-size: 1.15rem; 
    font-weight: 700;
    color: #FFFFFF;
}

.trust-content p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #A0A0A0; 
}

/* Ссылка в тексте */
.trust-content a {
    color: #BB86FC;
    text-decoration: none;
    border-bottom: 1px solid rgba(187, 134, 252, 0.3);
    transition: all 0.3s;
}

.trust-content a:hover {
    color: #fff;
    border-color: #fff;
}

/* --- HERO SECTION (Author) --- */
.author-hero {
    display: flex;
    align-items: center;
    gap: 60px;
    
    max-width: 1000px;
    /* БЫЛО: margin: 80px auto 100px; */
    /* СТАЛО: 140px сверху, чтобы не прилипало к хедеру */
    margin: 40px auto 100px; 
    
    padding: 0 20px;
}

/* --- ФОТО (Слева) --- */
.hero-image {
    flex: 0 0 400px;
    width: 400px;
    height: 400px;
    
    position: relative; /* Обязательно для позиционирования свечения */
    z-index: 0; /* Создаем контекст наложения, чтобы свечение могло уйти назад */
    
    /* Мы убрали старую статичную тень (box-shadow), чтобы она не спорила со свечением */
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px; 
    
    position: relative; 
    z-index: 1;
    
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    /* 🔥 НОВОЕ: Отключаем перетаскивание и выделение */
    -webkit-user-drag: none; /* Запрещает тянуть картинку */
    user-select: none;       /* Запрещает выделять её синим цветом */
    pointer-events: none;    /* Запрещает кликать (даже правой кнопкой мыши) */
}

/* --- АНИМИРОВАННЫЙ ГРАДИЕНТ ПОЗАДИ ФОТО --- */
/* --- АНИМИРОВАННЫЙ ГРАДИЕНТ (Обновление) --- */
/* --- ПЯТНО 1 (Фиолетовое яркое) --- */
.hero-image::before {
    width: 300px;
    height: 300px;
    top: -20%;
    left: -20%;
    /* Градиент от яркого к прозрачному */
    background: radial-gradient(circle, #BB86FC 0%, rgba(187, 134, 252, 0) 70%);
    /* Анимация: имя, время, бесконечно, плавно, туда-сюда */
    animation: move-blob-1 12s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}

/* Определение анимации вращения */
@keyframes spin-glow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* --- ТЕКСТ (Справа) --- */
.hero-content {
    flex: 1; /* Занимает всё оставшееся место */
    text-align: left; /* Выравнивание влево */
}

/* Профессия (маленький надзаголовок) */
.hero-role {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    color: #BB86FC; /* Фиолетовый акцент */
    margin-bottom: 10px;
}

/* Имя (Огромный заголовок) */
.hero-name {
    font-size: 3.5rem; /* Очень крупно */
    font-weight: 800;
    line-height: 1.1;
    color: #FFFFFF;
    margin: 0 0 25px 0;
}

/* Описание */
.hero-bio p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #B0B0B0;
    max-width: 500px; /* Чтобы строки не были слишком длинными */
    margin-bottom: 30px;
}

/* Ссылки (Кнопки соцсетей) */
.hero-socials {
    display: flex;
    gap: 20px;
}

.social-link {
    font-size: 1rem;
    font-weight: 500;
    color: #FFFFFF;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255, 0.2);
    padding-bottom: 2px;
    transition: all 0.3s;
}

.social-link:hover {
    color: #BB86FC;
    border-color: #BB86FC;
}

/* --- ОБЩИЕ СТИЛИ ДЛЯ ПЯТЕН (Градиентные круги) --- */
.hero-image::before,
.hero-image::after {
    content: '';
    position: absolute;
    border-radius: 50%; /* Делаем их круглыми */
    filter: blur(60px); /* Очень сильное размытие для мягкости */
    opacity: 0.3; /* Полупрозрачность */
    z-index: -1; /* Уводим назад */
    will-change: transform; /* Оптимизация для анимации */
}

/* --- ПЯТНО 2 (Темно-синее/фиолетовое) --- */
.hero-image::after {
    width: 350px;
    height: 350px;
    bottom: -30%;
    right: -30%;
    background: radial-gradient(circle, #4c1d95 0%, rgba(76, 29, 149, 0) 70%);
    /* Другая анимация и время для хаотичности */
    animation: move-blob-2 15s infinite alternate-reverse cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- АДАПТИВ (Мобильные) --- */
@media (max-width: 900px) {
    .author-hero {
        display: flex;
        flex-direction: column; /* Элементы друг под другом */
        align-items: center;    /* Центрируем детей по горизонтали */
        justify-content: center;
        text-align: center;     /* Центрируем текст */
        
        /* 🔥 УБИРАЕМ GAP, чтобы он не сдвигал контент */
        gap: 0; 
        
        margin-top: 60px;
        margin-left: auto;      /* Центрируем сам блок */
        margin-right: auto;
        
        padding: 0 20px;        /* Отступы от краев экрана */
        box-sizing: border-box; /* Чтобы padding не расширял блок */
        width: 100%;            /* Занимаем всю ширину */
        max-width: 100%;
    }
    
    .hero-image {
        /* Размеры для телефона */
        flex: 0 0 auto;       
        width: 280px;
        height: 280px;
        
        /* 🔥 ВМЕСТО GAP ДЕЛАЕМ ОТСТУП СНИЗУ */
        margin: 0 auto 40px auto !important; /* 40px вниз до текста */
        
        display: block;
        position: relative;
        left: 0;
        top: 0;
    }
    
    .hero-content {
        width: 100%;          /* Контент на всю ширину */
        padding: 0;           /* Убираем любые внутренние отступы */
        margin: 0;            /* Убираем внешние отступы */
        
        display: flex;
        flex-direction: column;
        align-items: center;  /* Центрируем кнопки и соцсети */
    }

    /* Имя чуть меньше, чтобы влезало */
    .hero-name {
        font-size: 2.5rem;
        word-wrap: break-word;
        line-height: 1.2;
    }
    
    /* Описание тоже центрируем */
    .hero-bio p {
        margin-left: auto;
        margin-right: auto;
    }
}

/* --- ФИКС ПЯТЕН НА ТЕЛЕФОНЕ --- */
@media (max-width: 900px) {
    /* 1. Усмиряем пятна, чтобы они не растягивали экран */
    .hero-image::before,
    .hero-image::after {
        width: 100% !important;  /* Не больше самой картинки */
        height: 100% !important;
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        margin: auto !important; /* Центрируем под картинкой */
        
        /* Уменьшаем размах анимации, чтобы не вылезало */
        animation: pulse-mobile 4s infinite alternate !important;
    }
}

/* Спокойная анимация для мобилок (просто дышит, не летает по сторонам) */
@keyframes pulse-mobile {
    0% { transform: scale(0.9); opacity: 0.3; }
    100% { transform: scale(1.1); opacity: 0.5; }
}

/* --- ЛОКАЦИЯ (Под именем) --- */
.hero-location {
    display: flex;
    align-items: center; /* Выравниваем иконку и текст по центру */
    gap: 8px; /* Отступ между иконкой и текстом */
    
    margin-bottom: 25px; /* Отступ снизу до описания */
    
    font-size: 1rem;
    font-weight: 500;
    color: #888; /* Спокойный серый цвет */
    
    width: fit-content; /* Чтобы блок занимал место только по ширине текста */
    cursor: default; /* Курсор остается стрелкой */
}

/* Стили иконки */
.hero-location svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Пружинистая анимация */
}

/* При наведении на блок локации иконка подпрыгивает */
.hero-location:hover svg {
    transform: translateY(-5px); 
    stroke: #fff; /* Иконка становится белой (по желанию) */
}

/* --- АНИМАЦИИ ДВИЖЕНИЯ --- */
/* Пятно 1 плавает по диагонали и дышит */
@keyframes move-blob-1 {
    0% {
        transform: translate(0, 0) scale(1);
    }
    100% {
        transform: translate(80px, 60px) scale(1.1);
    }
}

/* Пятно 2 плавает в другую сторону */
@keyframes move-blob-2 {
    0% {
        transform: translate(0, 0) scale(1);
    }
    100% {
        transform: translate(-100px, -50px) scale(1.2);
    }
}

.hero-location:hover span {
    color: #ccc; /* Текст чуть светлеет */
    transition: color 0.3s;
}


/* --- СТИЛИ ДЛЯ МАГАЗИНА (SHOP) --- */
.shop-header {
    text-align: center;
    padding: 60px 20px 40px;
}
.shop-header h1 { font-size: 42px; margin-bottom: 10px; color: #fff; }
.shop-header p { color: #888; font-size: 18px; }


.plugin-card {
    background: #111;
    border: 1px solid #333;
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.2s, border-color 0.2s;
}
.plugin-card:hover {
    transform: translateY(-5px);
    border-color: #555;
}

.plugin-preview {
    height: 180px;
    background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
    display: flex; align-items: center; justify-content: center;
    color: #333; font-weight: 700; font-size: 40px;
}

.plugin-info { padding: 20px; }
.plugin-info h3 { margin: 0 0 5px; color: #fff; font-size: 18px; }
.plugin-desc { color: #666; font-size: 13px; height: 40px; overflow: hidden; }

.plugin-footer {
    margin-top: 15px;
    display: flex; justify-content: space-between; align-items: center;
}
.plugin-footer .price { font-size: 18px; font-weight: 700; color: #bb86fc; }




/* --- СТИЛИ ДЛЯ СПИСКА В КОРЗИНЕ (CART) --- */
.nav-cart { color: #ccc; font-size: 14px; margin-right: 20px; font-weight: 600; }
.cart-count { background: #bb86fc; color: #000; padding: 2px 6px; border-radius: 10px; font-size: 10px; vertical-align: middle; }

/* Блок списка товаров (похож на user-data-box) */
.cart-summary-box {
    background: #161616;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 20px;
}

.cart-item-row {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 15px; margin-bottom: 15px;
    border-bottom: 1px solid #222;
}
.cart-item-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.item-details { display: flex; flex-direction: column; }
.item-name { color: #fff; font-weight: 600; font-size: 16px; }
.item-type { color: #666; font-size: 12px; }

.item-right { display: flex; align-items: center; gap: 15px; }
.item-price { color: #fff; font-weight: 700; }
.remove-btn { color: #444; text-decoration: none; font-size: 20px; line-height: 1; transition: 0.2s; }
.remove-btn:hover { color: #ff5555; }

.cart-total-row {
    margin-top: 20px; padding-top: 20px; border-top: 2px solid #222;
    display: flex; justify-content: space-between; align-items: center;
    color: #fff; font-size: 18px; font-weight: 700;
}
.total-price { color: #bb86fc; font-size: 24px; }

/* --- КНОПКА СКРОЛЛА ВНИЗ --- */
.scroll-down-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 20px; 
    margin-bottom: 50px;
    
    position: relative;
    z-index: 10;
}

.scroll-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    
    width: 50px;
    height: 50px;
    
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%; /* Круглая */
    background: rgba(255, 255, 255, 0.02); /* Почти прозрачная */
    
    cursor: pointer;
    transition: all 0.3s ease;
    
    /* Анимация прыжка */
    animation: bounce 2s infinite;
}

.scroll-btn svg {
    transition: transform 0.3s ease;
}

/* При наведении */
.scroll-btn:hover {
    border-color: #BB86FC; /* Фиолетовая рамка */
    background: rgba(187, 134, 252, 0.1); /* Легкое свечение */
    box-shadow: 0 0 15px rgba(187, 134, 252, 0.3);
}

.scroll-btn:hover svg {
    transform: translateY(-2px); /* Теперь стрелка тянется вверх */
}

/* Анимация подпрыгивания */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* Плавный скролл для всей страницы */
html {
    scroll-behavior: smooth;
}

/* --- СТРАНИЦА ПУСТОЙ КОРЗИНЫ (FIX) --- */

.empty-cart-screen {
    /* 1. Растягиваем на весь экран */
    height: 100vh; 
    width: 100%;
    
    /* 2. Компенсируем padding-top: 90px у body */
    margin-top: -90px; 
    
    /* 3. Центрируем контент */
    display: flex;
    align-items: center;
    justify-content: center;
    
    background: #0E0E0E; /* На всякий случай фон */
}

.empty-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* Небольшая анимация появления */
    animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Иконка */
.empty-icon {
    margin-bottom: 25px;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #222;
}

.empty-icon svg {
    stroke: #333;
    transition: stroke 0.3s ease;
}

/* Эффект при наведении на иконку */
.empty-content:hover .empty-icon svg {
    stroke: #BB86FC; /* Загорается фиолетовым */
}
.empty-content:hover .empty-icon {
    border-color: rgba(187, 134, 252, 0.2);
}

/* Тексты */
.empty-content h1 {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 10px 0;
}

.empty-content p {
    font-size: 1rem;
    color: #666;
    margin: 0 0 30px 0;
}

/* Кнопка */
.empty-btn {
    background: #BB86FC;
    color: #000;
    padding: 12px 30px;
    font-size: 1rem;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 700;
    transition: transform 0.2s, box-shadow 0.2s;
}

.empty-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(187, 134, 252, 0.4);
    background: #fff;
}

/* --- НОВЫЙ ФУТЕР (FIXED) --- */
.main-footer {
    background: #0E0E0E; /* Цвет как у фона сайта */
    padding: 80px 20px 60px; /* Чуть больше воздуха сверху/снизу */
    border-top: 1px solid #222; 
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

/* Сетка для колонок */
.footer-grid {
    max-width: 1200px; /* Растягиваем на ширину сайта (было 600px) */
    width: 100%;
    margin: 0 auto;
    
    display: grid;
    grid-template-columns: 1fr 1fr; /* Две колонки по краям */
    gap: 40px; 
}

/* Левая колонка */
.footer-col {
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: left;
}

/* Правая колонка - выравниваем вправо для красоты, раз мы растянули футер */
.footer-col:last-child {
    text-align: right; 
    align-items: flex-end; /* Ссылки прижаты к правому краю */
}

/* Ссылки */
.footer-col a {
    color: #888;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s ease, transform 0.2s;
    display: inline-block;
    width: fit-content; 
}

.footer-col a:hover {
    color: #bb86fc;
    transform: translateX(5px);
}

/* Правая колонка при наведении сдвигается влево (навстречу) */
.footer-col:last-child a:hover {
    transform: translateX(-5px);
}

/* Копирайт */
.footer-copyright {
    max-width: 1200px;
    margin: 60px auto 0; /* Отступ сверху */
    padding-top: 20px;
    border-top: 1px dashed #222;
    color: #444;
    font-size: 12px;
    text-align: left; /* Можно тоже выровнять по сетке */
}

/* Адаптив для телефонов */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr; /* Одна колонка */
        gap: 40px;
        text-align: left; /* Возвращаем выравнивание влево */
    }
    
    .section-divider {
        margin: 50px auto 0; /* То же самое для телефонов */
        max-width: 80%;
    }
    
    .footer-col:last-child {
        text-align: left;
        align-items: flex-start;
    }
    
    .footer-col:last-child a:hover {
        transform: translateX(5px); /* Возвращаем анимацию вправо */
    }
    
    .shop-trust-block {
        margin-top: 80px; /* Было 100px, сделали еще компактнее */
    }
}

/* --- МОИ ПЛАГИНЫ (В КАБИНЕТЕ) --- */
.plugins-section {
    margin-bottom: 40px;
    animation: fadeIn 0.5s ease;
}

.section-title {
    font-size: 18px;
    color: #888;
    margin-bottom: 15px;
    font-weight: 500;
}



.my-plugin-card {
    background: #1A1A1A;
    border: 1px solid #333;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s, border-color 0.2s;
    display: flex;
    flex-direction: column;
}

.my-plugin-card:hover {
    transform: translateY(-3px);
    border-color: #555;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.plugin-preview {
    width: 100%;
    aspect-ratio: 16/9; /* Соотношение сторон видео */
    background: #000;
    overflow: hidden;
}

.plugin-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.my-plugin-card:hover .plugin-preview img {
    transform: scale(1.05);
}

.plugin-details {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.plugin-name {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 15px;
}

.btn-download {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px;
    background: #2a2a2a;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
}

.btn-download:hover {
    background: #BB86FC;
    color: #000;
}

.btn-download svg {
    width: 16px;
    height: 16px;
}

/* --- ФИКС ОТСТУПОВ НА СТРАНИЦАХ --- */

/* Добавляет отступ для заголовков на страницах типа Корзины */
.page-header-fix {
    margin-top: 60px; /* Дополнительный отступ вниз от хедера */
    margin-bottom: 30px;
}

/* Если у тебя на странице корзины заголовок лежит просто в h1 или h2 */
.cart-container h1, 
.cart-page-title {
    padding-top: 40px; /* Принудительно толкаем вниз */
}


/* --- ИНТЕРАКТИВНЫЙ БЛОК (SIDE-BY-SIDE + BOTTOM TABS) --- */
.interactive-demo-box {
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.demo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #222;
}
.demo-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* СЕТКА: Слева Видео (1.4 части), Справа Меню (1 часть) */
.demo-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr; 
    gap: 20px;
    align-items: stretch; /* Растягиваем по высоте */
}

/* 1. ЛЕВАЯ КОЛОНКА (ЭКРАН) */
.demo-left {
    display: flex;
    flex-direction: column;
}

/* Сам блок "Try it live" */
.demo-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #BB86FC; /* Фиолетовый текст */
    background: rgba(187, 134, 252, 0.1); /* Полупрозрачный фон */
    padding: 4px 12px;
    border-radius: 20px; /* Овальная форма */
    border: 1px solid rgba(187, 134, 252, 0.2); /* Тонкая рамка */
}

/* Пульсирующая точка */
.pulse-dot {
    width: 6px;
    height: 6px;
    background-color: #BB86FC;
    border-radius: 50%;
    box-shadow: 0 0 0 rgba(187, 134, 252, 0.7);
    animation: pulse-purple 2s infinite;
}

/* Анимация пульсации */
@keyframes pulse-purple {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(187, 134, 252, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(187, 134, 252, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(187, 134, 252, 0);
    }
}

.demo-screen {
    width: 100%;
    aspect-ratio: 16 / 9; /* Видео 16:9 */
    background: #000;
    border: 1px solid #333;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.demo-placeholder-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #444;
    font-size: 0.8rem;
}

/* 2. ПРАВАЯ КОЛОНКА (УПРАВЛЕНИЕ) */
.demo-right {
    display: flex;
    flex-direction: column;
    height: 100%; /* Обязательно */
}

/* Верхняя часть правой колонки (Скролл настроек) */
/* 2. Блок с контентом должен занимать всё свободное место (кроме вкладок снизу) */
.controls-content {
    flex-grow: 1;  /* Растягиваемся */
    height: 100%;  /* Занимаем всю высоту */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Чтобы ничего не вылезало */
}

/* Заглушки настроек */
.control-group {
    display: flex; flex-direction: column; gap: 8px;
}
.fake-label { font-size: 0.75rem; color: #888; font-weight: 600; }
.fake-slider-full { height: 4px; background: #333; border-radius: 2px; width: 100%; position: relative; }
.fake-slider-full::after { content:''; position: absolute; left: 70%; top: -3px; width: 10px; height: 10px; background: #666; border-radius: 50%; }

.fake-checkboxes-row { display: flex; gap: 10px; }
.fake-chk { 
    font-size: 0.75rem; color: #666; display: flex; align-items: center; gap: 6px; 
}
.fake-chk::before { content:''; width: 12px; height: 12px; background: #222; border: 1px solid #444; border-radius: 3px; }
.fake-chk.checked { color: #BBB; }
.fake-chk.checked::before { background: #BB86FC; border-color: #BB86FC; }


/* НИЖНИЕ ВКЛАДКИ (TABS) */
.demo-tabs-bottom {
    display: flex;
    border-top: 1px solid #2a2a2a;
    background: #0E0E0E;
}

.tab-btn {
    flex: 1; /* Равномерная ширина */
    text-align: center;
    padding: 10px 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-bottom: 2px solid transparent; /* Для активного состояния */
}

.tab-btn:hover {
    color: #FFF;
    background: rgba(255,255,255,0.03);
}

/* Активная вкладка */
.tab-btn.active {
    color: #FFF;
    background: #1a1a1a;
    border-bottom-color: #BB86FC; /* Подсветка снизу */
}
.tab-btn svg { opacity: 0.6; }
.tab-btn.active svg { opacity: 1; stroke: #BB86FC; }

/* --- АДАПТИВ СТЕНДА --- */
@media (max-width: 800px) {
    .demo-grid {
        grid-template-columns: 1fr; /* Одна колонка на телефоне */
    }
    
    .demo-right {
        /* На телефоне делаем фиксированную высоту для меню, 
           чтобы оно не было бесконечным */
        min-height: 200px; 
    }
}











/* --- СТИЛЬ ИНТЕРФЕЙСА SHOCK (КАК НА СКРИНШОТЕ) --- */
/* --- СТИЛЬ ИНТЕРФЕЙСА SHOCK (ОБНОВЛЕННЫЙ) --- */
/* --- СТИЛЬ ИНТЕРФЕЙСА SHOCK --- */
/* --- СТИЛЬ ИНТЕРФЕЙСА SHOCK (ВКЛАДКА USER) --- */
.shock-menu-list {
    height: 100%;
    display: flex;
    flex-direction: column;
    
    /* 1. Прижимаем к верху, чтобы работал padding-top */
    justify-content: flex-start; 
    align-items: center;
    
    /* 2. Задаем большой отступ сверху (как в Motion) */
    padding-top: 50px; 
    padding-bottom: 20px;
    
    gap: 20px; /* Расстояние между чекбоксами */
}

.shock-checkbox {
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    user-select: none;
    
    /* 🔥 Фиксируем ширину, чтобы они стояли ровно */
    width: 160px; /* Подбери значение, чтобы влезало самое длинное слово */
}

/* Скрываем стандартный инпут */
.shock-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Квадратик чекбокса */
.shock-checkbox .box {
    width: 32px;
    height: 32px;
    background-color: #131313; /* Очень темный фон внутри квадрата */
    border: 2px solid #000000; /* Черная обводка */
    border-radius: 5px;        /* Аккуратное скругление */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    flex-shrink: 0; /* Чтобы квадрат не сжимался */
}

/* Галочка (SVG) */
.shock-checkbox .box svg {
    width: 22px;
    height: 22px;
    color: #FFFFFF; /* Чисто белая галочка */
    opacity: 0;     /* Скрыта по умолчанию */
    transform: scale(0.8);
    transition: all 0.15s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Эффект при наведении */
.shock-checkbox:hover .box {
    border-color: #444; /* Рамка чуть светлеет */
}

/* --- СОСТОЯНИЕ: ВКЛЮЧЕНО (CHECKED) --- */
.shock-checkbox input:checked ~ .box {
    background-color: #131313; /* Фон остается темным */
    border-color: #000000;     /* Рамка остается черной */
}

.shock-checkbox input:checked ~ .box svg {
    opacity: 1;          /* Показываем галочку */
    transform: scale(1); /* Небольшая анимация увеличения */
}

/* Текст (Лейбл) */
.shock-checkbox .label {
    font-family: 'Inter', sans-serif;
    font-size: 1.15rem; /* Крупный размер как на скрине */
    font-weight: 700;   /* Жирный шрифт */
    color: #9E9E9E;     /* Серый цвет неактивного текста */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.2s ease;
}

/* Если чекбокс активен — текст становится белым */
.shock-checkbox input:checked ~ .label {
    color: #FFFFFF;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.15); /* Легкое свечение */
}

/* При наведении текст тоже чуть светлеет */
.shock-checkbox:hover .label {
    color: #D0D0D0;
}

/* --- ВИДЕО ПЛЕЕР --- */
.demo-video-player {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Видео заполнит весь блок без черных полос */
    border-radius: 8px;
}


/* --- СТИЛИ ДЛЯ ВКЛАДКИ MOTION (ИСПРАВЛЕННЫЕ) --- */

/* Контейнер центрируем по высоте */
#panel-motion {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.motion-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    
    /* Если justify-content: center не срабатывает из-за высоты,
       мы просто выравниваем всё по верху (flex-start) и толкаем паддингом */
    justify-content: flex-start; 
    align-items: center;
    
    width: 100%;
    box-sizing: border-box;
    
    /* 🔥 ВОТ ЗДЕСЬ ОТСТУП СВЕРХУ */
    padding-top: 50px;  /* Было 20px, стало 80px */
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    
    gap: 40px; /* Расстояние между группами START и END */
}
/* Строка (Лейбл + Сетка) */
.motion-group {
    display: flex;
    align-items: flex-end; /* Выравниваем по низу (по кнопкам) */
    gap: 15px;
    width: 100%;
    justify-content: center;
}

.group-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #666; /* Цвет текста START/END */
    width: 50px;
    text-align: right;
    letter-spacing: 0.5px;
    padding-bottom: 8px; /* Чуть поднять относительно низа */
}

/* Сетка кнопок */
.arrows-grid {
    display: flex; /* Используем flex, чтобы кнопки слиплись */
    background: transparent; /* 🔥 УБРАЛИ ТЕМНЫЙ ФОН */
    border: none; /* Убрали рамку вокруг всего блока */
}

.arrow-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    position: relative;
    width: 60px; /* Ширина одной кнопки */
}

/* Картинка стрелки */
.arrow-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    margin-bottom: 8px; /* Расстояние от стрелки до кнопки */
    opacity: 0.8;
    transition: all 0.2s;
    /* Убрали filter: drop-shadow */
}

/* --- 🔥 ИСПРАВЛЕННЫЕ ПОВОРОТЫ (Если исходник смотрит ВНИЗ) --- */
.arrow-icon.down  { transform: rotate(0deg); }   /* Вниз (как есть) */
.arrow-icon.up    { transform: rotate(180deg); } /* Вверх (разворот) */
.arrow-icon.left  { transform: rotate(90deg); }  /* Влево */
.arrow-icon.right { transform: rotate(-90deg); } /* Вправо */


/* Кнопка с текстом */
.arrow-btn {
    background: #141414; /* Темно-серый фон */
    color: #666;         /* Серый текст */
    font-size: 0.75rem;
    font-weight: 700;
    padding: 8px 0;
    width: 100%;
    text-align: center;
    border: 1px solid #000; /* Черная рамка */
    border-right: none;     /* Убираем правую границу, чтобы слипались */
    transition: all 0.2s;
}

/* Возвращаем правую границу последнему элементу */
.arrow-item:last-child .arrow-btn {
    border-right: 1px solid #000;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.arrow-item:first-child .arrow-btn {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

/* --- HOVER --- */
.arrow-item:hover .arrow-icon { opacity: 1; transform: scale(1.1); }
/* Важно: сохраняем поворот при ховере! */
.arrow-item:hover .arrow-icon.up { transform: rotate(180deg) scale(1.1); }
.arrow-item:hover .arrow-icon.left { transform: rotate(90deg) scale(1.1); }
.arrow-item:hover .arrow-icon.right { transform: rotate(-90deg) scale(1.1); }

.arrow-item:hover .arrow-btn {
    color: #999;
    background: #1f1f1f;
}

/* --- ACTIVE (ВЫБРАНО) --- */
.arrow-item.active .arrow-icon {
    opacity: 1;
    /* Убрали свечение */
}

.arrow-item.active .arrow-btn {
    background: #080808; /* 🔥 ТЕМНО-ЧЕРНЫЙ ФОН */
    color: #FFFFFF;      /* 🔥 БЕЛЫЙ ТЕКСТ */
    border-color: #000;
}

/* --- ВАЖНЫЙ ФИКС ДЛЯ ВКЛАДОК --- */
.tab-pane {
    height: 100%;           /* Занимаем всю высоту родителя */
    display: none;          /* Скрыто по умолчанию */
    flex-direction: column; /* Выстраиваем контент в колонку */
}

.tab-pane.active {
    display: flex;          /* Показываем как флекс, чтобы работало растягивание */
}


/* --- ЛОАДЕР ВИДЕО (СПИННЕР) --- */

/* Убедимся, что родительский блок относительно позиционирован */
.demo-screen {
    position: relative;
    /* Остальные стили demo-screen остаются как были */
}

/* Контейнер лоадера - перекрывает весь экран */
.video-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(17, 17, 17, 0.8); /* Полупрозрачный темный фон */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5; /* Поверх видео, но под элементами управления если бы они были */
    
    /* По умолчанию скрыт */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Само крутящееся кольцо */
.spinner-ring {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(187, 134, 252, 0.2); /* Тусклый фиолетовый */
    border-top-color: #BB86FC; /* Яркий фиолетовый (цвет темы) */
    border-radius: 50%;
    animation: video-spinner 1s linear infinite;
}

/* Анимация вращения */
@keyframes video-spinner {
    to { transform: rotate(360deg); }
}

/* 🔥 МАГИЧЕСКИЙ КЛАСС: Когда он добавлен родителю, лоадер появляется */
.loading-container.is-loading .video-loader {
    opacity: 1;
    pointer-events: all;
}

/* --- СКРИНШОТЫ ИНТЕРФЕЙСА ПЛАГИНА --- */

.plugin-screenshots-section {
    margin-bottom: 30px;
}

/* Сетка для 3 картинок в ряд */
.screenshots-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 равные колонки */
    gap: 20px; /* Расстояние между картинками */
}

/* Карточка отдельного скриншота */
.screenshot-item {
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 6px; /* Небольшая рамка вокруг картинки */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Сама картинка */
.screenshot-item img {
    width: 100%;
    height: auto;
    border-radius: 4px; /* Внутреннее скругление */
    object-fit: contain; /* Чтобы вертикальные скрины не обрезались */
}

/* Эффект парения при наведении */
.screenshot-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    border-color: #444;
}

/* --- АДАПТИВНОСТЬ (МОБИЛЬНЫЕ УСТРОЙСТВА) --- */
@media (max-width: 768px) {
    .screenshots-grid {
        /* На телефоне делаем горизонтальный свайп вместо 3 колонок */
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 15px; /* Отступ для скроллбара */
        gap: 15px;
    }
    
    .screenshot-item {
        flex: 0 0 85%; /* Картинка занимает 85% ширины экрана */
        scroll-snap-align: center; /* Центруется при свайпе */
    }
    
    /* Прячем системный скроллбар для красоты (WebKit) */
    .screenshots-grid::-webkit-scrollbar {
        height: 6px;
    }
    .screenshots-grid::-webkit-scrollbar-track {
        background: #111;
        border-radius: 10px;
    }
    .screenshots-grid::-webkit-scrollbar-thumb {
        background: #333;
        border-radius: 10px;
    }
}


/* =========================================
   ФОНОВЫЕ НОДЫ (ГЕНЕРАЦИЯ И ДРЕЙФ)
   ========================================= */

.fusion-rig {
    position: absolute;
    top: 0; left: 0; 
    width: 100%; 
    height: 100%; /* Растягиваем на всю длину скролла */
    pointer-events: none; 
    
    /* 🔥 ГЛАВНЫЙ ФИКС: Было -1, поэтому пряталось за фоном */
    z-index: 0;          
    
    overflow: hidden;
}

.floating-node {
    position: absolute;
    will-change: transform;
    backface-visibility: hidden;
    /* Анимация дрейфа. Длительность задаст JS */
    animation: drift-node ease-in-out infinite;
}

/* --- 3 ПЛАНА ГЛУБИНЫ (DoF) --- */

/* Дальний план (мелкие, темные, размытые) */
/* --- 3 ПЛАНА ГЛУБИНЫ (DoF) --- */

/* Дальний план (мелкие, темные, сильно размытые) */
.node--bg {
    width: 120px; 
    filter: blur(6px) brightness(0.4); 
    opacity: 0.2;
}

/* 🔥 Средний план (Раньше был 0px blur, теперь слегка размыт) */
.node--mid {
    width: 200px; 
    filter: blur(3px) brightness(0.5); /* Добавили размытие 3px */
    opacity: 0.4; /* Сделали прозрачнее, чтобы не перебивали текст */
}

/* Передний план (очень близко, огромные, сильно размытые) */
.node--fg {
    width: 320px; 
    filter: blur(12px) brightness(0.7); 
    opacity: 0.25;
}

/* --- АНИМАЦИЯ ДРЕЙФА (Траектория задается через JS) --- */
@keyframes drift-node {
    0%, 100% { 
        transform: translate(0px, 0px) rotate(0deg); 
    }
    33% { 
        transform: translate(var(--dx1), var(--dy1)) rotate(var(--rot1)); 
    }
    66% { 
        transform: translate(var(--dx2), var(--dy2)) rotate(var(--rot2)); 
    }
}

/* Скрываем на телефонах, чтобы не грузить систему */
@media (max-width: 768px) {
    .fusion-rig { display: none; }
}

/* Внутренняя картинка ноды (для отскока от мыши) */
/* Внутренняя картинка ноды (для отскока от мыши) */
/* Внутренняя картинка ноды (для отскока от мыши) */
.node-image {
    width: 100%;
    height: auto;
    display: block;
    will-change: transform;
    
    /* 🔥 БЫЛО 1.5s, СТАЛО 3s. Теперь она плавает как тяжелый объект в космосе */
    transition: transform 3s cubic-bezier(0.2, 0.9, 0.3, 1); 
    
    outline: 1px solid transparent; 
    transform: translateZ(0); 
    clip-path: inset(2px); 
}

/* --- ПРИПОДНИМАЕМ КОНТЕНТ НАД ФОНОМ --- */

.shop-header,
.container,
.shop-trust-block,
.main-footer {
    position: relative;
    z-index: 10; /* Ставим контент выше, чем ноды (у которых z-index 0) */
}

/* =========================================
   ФОТО АВТОРА НАД ФУТЕРОМ (СТАТИЧНОЕ И ЗАТЕМНЕННОЕ)
   ========================================= */

.footer-portrait {
    position: absolute;
    bottom: 100%; 
    left: 8%;     
    width: 380px; 
    height: auto;
    
    /* 🔥 1. ПОДНЯЛИ ВЫШЕ: было 60px, стало 30px */
    /* (Если нужно еще выше - ставь 15px или 0px. Если нужно опустить - ставь 45px) */
    transform: translateY(45px); 
    
    /* 🔥 2. ЗАТЕМНЕНИЕ: 0.6 означает 60% от оригинальной яркости */
    /* (Добавил еще каплю контраста, чтобы в тенях фото не стало "серым") */
    filter: brightness(0.6) contrast(1.05);
    
    z-index: 5; 
    pointer-events: none; 
    
    /* Анимация "дыхания" полностью удалена */
}

/* Адаптивность для телефонов */
@media (max-width: 768px) {
    .footer-portrait {
        width: 220px;       
        left: -20px;        
        
        /* На телефоне тоже приподнимаем (было 35px, стало 15px) */
        transform: translateY(15px);
        
        /* На телефоне тоже применяем затемнение */
        filter: brightness(0.6) contrast(1.05);
    }
}


/* =========================================
   ИНТЕРАКТИВНОЕ ОБЛАЧКО СООБЩЕНИЙ В ФУТЕРЕ
   ========================================= */

/* Облачко (теперь позиционируется от центра) */
.portrait-speech-bubble {
    position: absolute;
    bottom: 100%;
    left: calc(50% + 120px); 
    transform: translateY(-70px) scale(0.8);
    transform-origin: bottom left; 
    
    background: rgba(25, 25, 30, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(187, 134, 252, 0.3); 
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    
    /* 🔥 ИЗМЕНЕНИЯ ЗДЕСЬ: Меньше отступ сверху/снизу (10px), больше по бокам (24px) */
    padding: 10px 24px;
    border-radius: 16px;
    border-bottom-left-radius: 4px; 
    z-index: 6;
    
    /* 🔥 ИЗМЕНЕНИЯ ЗДЕСЬ: Увеличиваем ширину */
    max-width: 320px;   /* Было 250px. Даем тексту растянуться в длину */
    width: max-content; /* Заставляет облачко тянуться за текстом в одну строку, если это возможно */
    
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Хвостик облачка */
.portrait-speech-bubble::before {
    content: '';
    position: absolute;
    bottom: -6px;
    left: -1px;
    width: 15px;
    height: 15px;
    background: rgba(25, 25, 30, 0.85);
    border-bottom: 1px solid rgba(187, 134, 252, 0.3);
    border-left: 1px solid rgba(187, 134, 252, 0.3);
    border-bottom-left-radius: 4px;
    transform: skewY(-30deg);
    z-index: -1;
}

.bubble-text {
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
    
    /* 🔥 НОВОЕ: Отключаем выделение текста */
    -webkit-user-select: none; /* Для Safari и мобильных браузеров */
    user-select: none;         /* Стандартное правило */
    cursor: default;           /* Чтобы курсор мыши не превращался в "палочку" для текста */
}

/* Класс для показа облачка */
.portrait-speech-bubble.is-visible {
    opacity: 1;
    transform: translateY(-70px) scale(1);
}

/* Адаптив для телефонов */
@media (max-width: 768px) {
    .shop-trust-block {
        margin-top: 100px; 
    }
    .trust-portrait {
        width: 200px;       
        transform: translate(-50%, 15px);
    }
    .portrait-speech-bubble {
        left: calc(50% + 20px); 
        transform: translateY(-40px) scale(0.8);
        
        /* 🔥 ИЗМЕНЕНИЯ ЗДЕСЬ: Тоже делаем шире и тоньше для телефонов */
        max-width: 240px; /* Было 180px */
        padding: 8px 16px;
    }
    .portrait-speech-bubble.is-visible {
        transform: translateY(-40px) scale(1);
    }
}



/* =========================================
   ОБЛАЧКО ДЛЯ ВЕРХНЕГО ФОТО (ГЕРОЙ)
   ========================================= */
.hero-speech-bubble {
    position: absolute;
    top: -30px;
    right: -100px; /* Выступает за правый край фото */
    transform: translateY(20px) scale(0.8);
    transform-origin: bottom left; /* Растет от хвостика */

    background: rgba(25, 25, 30, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(187, 134, 252, 0.3);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);

    padding: 10px 20px;
    border-radius: 16px;
    border-bottom-left-radius: 4px; /* Острый угол для хвостика */
    z-index: 10;
    
    max-width: 250px;
    width: max-content; /* Тянется по ширине текста */

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

/* Хвостик облачка, указывающий на голову */
.hero-speech-bubble::before {
    content: '';
    position: absolute;
    bottom: -6px;
    left: -1px;
    width: 15px;
    height: 15px;
    background: rgba(25, 25, 30, 0.85);
    border-bottom: 1px solid rgba(187, 134, 252, 0.3);
    border-left: 1px solid rgba(187, 134, 252, 0.3);
    border-bottom-left-radius: 4px;
    transform: skewY(-30deg);
    z-index: -1;
}

.hero-speech-bubble.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Адаптив: на телефонах фото стоит по центру, поэтому облачко смещаем */
@media (max-width: 900px) {
    .hero-speech-bubble {
        top: -60px;
        right: auto;
        left: 50%; /* Центрируем */
        transform: translateX(-50%) translateY(20px) scale(0.8);
        transform-origin: bottom center;
    }
    /* Хвостик делаем снизу по центру */
    .hero-speech-bubble::before {
        left: 50%;
        bottom: -7px;
        transform: translateX(-50%) rotate(-45deg);
        border-left: none;
        border-top: 1px solid rgba(187, 134, 252, 0.3); /* Рамка сверху, т.к. повернули */
    }
    .hero-speech-bubble.is-visible {
        transform: translateX(-50%) translateY(0) scale(1);
    }
}



/* =========================================
   ПОЛНОЭКРАННЫЙ СКРОЛЛ (БЕЗ ПОЛЗУНКА)
   ========================================= */

/* Прячем скроллбар на компьютерах (т.к. мы будем скроллить скриптом) */
@media (min-width: 901px) {
    html::-webkit-scrollbar {
        display: none; /* Для Chrome/Safari */
    }
    html {
        scrollbar-width: none; /* Для Firefox */
        scroll-behavior: smooth;
    }
}


/* =========================================
   БОКОВАЯ НАВИГАЦИЯ (ТОЧКИ)
   ========================================= */
.side-nav-dots {
    position: fixed;
    right: 30px; /* Отступ от правого края экрана */
    top: 50%;
    transform: translateY(-50%); /* Идеальное центрирование по вертикали */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Расстояние между точками */
    z-index: 999; /* Поверх всех карточек и нод */
}

.nav-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Эффект при наведении мышкой */
.nav-dot:hover {
    background-color: rgba(187, 134, 252, 0.6);
    transform: scale(1.2);
}

/* Активная точка */
.nav-dot.active {
    background-color: #BB86FC;
    transform: scale(1.4);
    box-shadow: 0 0 10px rgba(187, 134, 252, 0.6);
}

/* На мобильных телефонах прячем точки, т.к. там обычный скролл */
@media (max-width: 900px) {
    .side-nav-dots {
        display: none;
    }
}



/* =========================================
   ЛИДЕРБОРД (ТОП ПОЛЬЗОВАТЕЛЕЙ)
   ========================================= */
.leaderboard-section {
    max-width: 600px;
    margin: 0 auto 100px;
    padding: 0 20px;
    position: relative;
    z-index: 10;
}

.leaderboard-header {
    text-align: center;
    margin-bottom: 25px;
}

.leaderboard-header h2 {
    font-size: 1.8rem;
    color: #fff;
    margin: 0 0 10px 0;
}

.leaderboard-header p {
    color: #A0A0A0;
    font-size: 0.95rem;
    margin: 0;
}

.leaderboard-card {
    background: rgba(25, 25, 30, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 10px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.lb-row {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-radius: 12px;
    margin-bottom: 5px;
    transition: background 0.3s ease;
}

.lb-row:last-child {
    margin-bottom: 0;
}

.lb-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* Выделение авторизованного пользователя */
.lb-row.is-me {
    background: rgba(187, 134, 252, 0.08);
    border: 1px solid rgba(187, 134, 252, 0.2);
}

.lb-rank {
    width: 40px;
    font-weight: bold;
    color: #BB86FC;
    font-size: 1.1rem;
}

.lb-user {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.lb-avatar {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #BB86FC 0%, #7c4dff 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #fff;
    font-size: 1.1rem;
    text-transform: uppercase;
}

.lb-name {
    color: #fff;
    font-weight: 500;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lb-badge {
    background: #BB86FC;
    color: #000;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.lb-stats {
    text-align: right;
}

.lb-level {
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
}

.lb-xp {
    color: #A0A0A0;
    font-size: 0.8rem;
    margin-top: 2px;
}

.lb-empty {
    text-align: center;
    padding: 30px;
    color: #A0A0A0;
}

/* Добавляем блок лидерборда в магнитный скролл */
.leaderboard-section {
    scroll-snap-align: center;
}


/* =========================================
   КНОПКА КУПЛЕННОГО ТОВАРА
   ========================================= */
.btn-buy.btn-purchased {
    background: rgba(255, 255, 255, 0.08);
    color: #A0A0A0;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: none;
}

.btn-buy.btn-purchased:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    transform: translateY(-2px);
}

/* =========================================
   ОТКЛЮЧАЕМ CSS-МАГНИТЫ НА ПК (ЧТОБЫ НЕ МЕШАЛИ JS С КРОЛЛУ)
   ========================================= */
@media (min-width: 901px) {
    html, body {
        scroll-snap-type: none !important;
    }
    
    .author-hero, 
    #shop-start, 
    .main-footer, 
    .leaderboard-section {
        scroll-snap-align: none !important;
    }
}



/* =========================================
   АНИМАЦИЯ ПОЯВЛЕНИЯ ПРИ ЗАГРУЗКЕ (КАСКАД)
   ========================================= */

/* Сама анимация: выезд снизу вверх + проявление */
@keyframes cascadeFadeUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Исходно прячем главные блоки первого экрана */
.main-nav,
.author-hero,
.side-nav-dots,
.scroll-down-wrapper {
    opacity: 0;
    /* Используем cubic-bezier для премиальной плавности "замедления" в конце анимации */
    animation: cascadeFadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Расставляем задержки, чтобы элементы появлялись по очереди сверху вниз */
.main-nav {
    animation-delay: 0.1s; /* Шапка появляется почти сразу */
}

.author-hero {
    animation-delay: 0.3s; /* Затем твоя визитка */
}

.side-nav-dots {
    animation-delay: 0.5s; /* Боковые точки навигации */
}

.scroll-down-wrapper {
    animation-delay: 0.7s; /* В самом конце - стрелочка вниз */
}



/* =========================================
   РАСШИРЕННОЕ ОПИСАНИЕ ПЛАГИНА
   ========================================= */
.plugin-long-desc {
    padding-top: 20px;
    color: #ccc;
    font-size: 15px;
    line-height: 1.6;
}

.plugin-long-desc p {
    margin-bottom: 15px;
}

.desc-feature-img {
    width: 100%;
    max-width: 560px; /* Ограничиваем ширину, чтобы превью стали меньше */
    aspect-ratio: 16 / 9; /* Задаем идеальное киношное соотношение сторон */
    max-height: none; /* Убираем старый лимит высоты */
    object-fit: cover; /* Видео и картинки будут аккуратно заполнять рамку без искажений */
    
    border-radius: 12px;
    display: block; /* Обязательно для центрирования */
    margin: 40px auto 20px auto; /* auto по бокам выровняет превью ровно по центру */
    
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.plugin-long-desc .desc-feature-img:first-child {
    margin-top: 10px; /* Для самой первой картинки отступ поменьше */
}

.desc-heading {
    color: #fff;
    font-size: 1.4rem;
    margin-bottom: 15px;
    font-weight: 600;
}

/* Стилизация списков (галочки вместо точек) */
.desc-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 20px;
}

.desc-list li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 8px;
}

.desc-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #BB86FC;
    font-weight: bold;
}

/* Две колонки для эффектов */
.desc-two-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.03);
    padding: 20px;
    border-radius: 12px;
}

/* Две колонки для обычного списка (на широких экранах) */
@media (min-width: 600px) {
    .columns-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: x 10px;
    }
}

.desc-conclusion {
    background: linear-gradient(135deg, rgba(187, 134, 252, 0.1) 0%, rgba(124, 77, 255, 0.05) 100%);
    border-left: 4px solid #BB86FC;
    padding: 20px;
    border-radius: 0 12px 12px 0;
    margin-top: 30px;
    font-size: 1.1rem;
    color: #fff;
}

/* =========================================
   СЕТКА ДЛЯ ПРЕИМУЩЕСТВ (2 КОЛОНКИ)
   ========================================= */

/* Картинка для главного интро-блока */
.desc-intro-block .desc-feature-img {
    width: 100%;
    max-width: 560px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Сама сетка */
.desc-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 равные колонки */
    gap: 25px; /* Расстояние между карточками */
    margin-bottom: 30px;
}

/* Оформление карточки */
.desc-feature-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column; /* Чтобы контент выстраивался друг под другом */
    transition: transform 0.3s ease, background 0.3s ease;
}

.desc-feature-card:hover {
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-5px); /* Легкое поднятие при наведении */
}

/* Картинка/видео внутри карточки */
.desc-card-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 20px;
    background-color: #111; /* Фон на время загрузки видео */
}

/* Адаптивность: на мобильных телефонах делаем 1 колонку */
@media (max-width: 768px) {
    .desc-features-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================
   ВИДЕО С YOUTUBE В ОПИСАНИИ
   ========================================= */
.desc-youtube-wrapper {
    margin-top: 60px;
    margin-bottom: 20px;
    width: 100%;
}

.desc-youtube-iframe {
    width: 100%;
    aspect-ratio: 16 / 9; /* Автоматически держит киношные пропорции */
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    background-color: #000; /* Черный фон на долю секунды, пока грузится плеер */
    display: block;
}


/* --- СТИЛИ ДЛЯ ПОДСКАЗКИ (TOOLTIP) --- */
.info-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.info-tooltip-text {
    visibility: hidden;
    width: 260px;
    background-color: #28282E;
    color: #ccc;
    text-align: center;
    border-radius: 8px;
    padding: 12px 16px;
    position: absolute;
    z-index: 100;
    bottom: 130%; /* Поднимаем над иконкой */
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    font-size: 0.8rem;
    line-height: 1.5;
    font-weight: normal; /* Убираем жирность от заголовка H2 */
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    pointer-events: none; /* Чтобы мышка не цеплялась за саму подсказку */
}

/* Треугольный хвостик вниз */
.info-tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: #28282E transparent transparent transparent;
}

/* Анимация при наведении */
.info-tooltip:hover .info-tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Подсветка самой иконки при наведении */
.info-tooltip:hover svg {
    stroke: #BB86FC;
}







/* =========================================
   СТИЛЬ ИНТЕРФЕЙСА HIGHLIGHTER
   ========================================= */

/* Контейнер списка со скроллом */
.highlighter-menu-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px 20px; /* Отступы внутри меню */
    
    /* Убрали height: 100% и overflow-y, чтобы меню раздвигало сетку */
    scrollbar-width: thin;
    scrollbar-color: #444 transparent;
}

/* Стилизация скроллбара для Chrome/Safari */
.highlighter-menu-list::-webkit-scrollbar {
    width: 4px;
}
.highlighter-menu-list::-webkit-scrollbar-thumb {
    background-color: #444;
    border-radius: 4px;
}

/* Сама опция (Label) */
.hl-option {
    position: relative; /* 🔥 КРИТИЧЕСКИ ВАЖНО: удерживает инпут внутри себя */
    display: block;
    cursor: pointer;
    user-select: none;
}


/* Скрываем стандартный кружочек радио-кнопки */
.hl-radio {
    position: absolute;
    top: 50%;  /* 🔥 Прячем ровно по центру картинки */
    left: 50%;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
    pointer-events: none;
}

/* Контейнер картинки и текста */
.hl-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* Картинка (Стилизованный текст эффекта) */
.hl-item img {
    height: 35px; /* Подстрой высоту под свои картинки */
    width: auto;
    object-fit: contain;
    opacity: 0.5; /* Затемняем неактивные */
    transition: opacity 0.3s ease, filter 0.3s ease;
    filter: grayscale(100%); /* Делаем неактивные серыми */
}

/* Кнопка-пилюля под текстом */
.hl-pill {
    width: 80%; /* Занимает 80% ширины колонки */
    max-width: 200px;
    padding: 6px 0;
    text-align: center;
    
    border: 1px solid #333; /* Темная рамка как на макете */
    border-radius: 20px;    /* Форма пилюли */
    background: transparent;
    
    color: #666;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* --- АКТИВНОЕ СОСТОЯНИЕ (ВЫБРАННЫЙ ЭФФЕКТ) --- */

/* 1. Картинка загорается цветом */
.hl-radio:checked + .hl-item img {
    opacity: 1;
    filter: grayscale(0%);
}

/* 2. Пилюля загорается цветом темы */
.hl-radio:checked + .hl-item .hl-pill {
    border-color: #BB86FC; /* Твоя фиолетовая рамка */
    color: #FFFFFF;        /* Белый текст */
    background: rgba(187, 134, 252, 0.1); /* Легкое свечение внутри */
    box-shadow: 0 0 15px rgba(187, 134, 252, 0.15); /* Внешнее свечение */
}

/* Невидимый чекбокс (было .hl-radio) */
.hl-checkbox {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
    pointer-events: none;
}

/* 1. Картинка загорается цветом */
.hl-checkbox:checked + .hl-item img {
    opacity: 1;
    filter: grayscale(0%);
}

/* 2. Пилюля загорается цветом темы */
.hl-checkbox:checked + .hl-item .hl-pill {
    border-color: #BB86FC; 
    color: #FFFFFF;        
    background: rgba(187, 134, 252, 0.1); 
    box-shadow: 0 0 15px rgba(187, 134, 252, 0.15); 
}






/* =========================================
   КАСТОМНОЕ ВЫДЕЛЕНИЕ ТЕКСТА
   ========================================= */
::selection {
    background-color: #BB86FC; /* Твой фирменный фиолетовый */
    color: #0E0E0E; /* Темный цвет текста для хорошего контраста */
}

/* Для поддержки старых версий браузера Firefox */
::-moz-selection {
    background-color: #BB86FC;
    color: #0E0E0E;
}


/* =========================================
   АДАПТИВ ДЛЯ ТЕЛЕФОНОВ (до 768px)
   ========================================= */
@media (max-width: 768px) {
    /* 1. ЖЕСТКО УБИВАЕМ ГОРИЗОНТАЛЬНЫЙ СКРОЛЛ */
    html, body {
        overflow-x: hidden !important;
        width: 100vw;
    }
    
    /* 8. СКРЫВАЕМ ПРЫГАЮЩУЮ СТРЕЛКУ */
    .scroll-down-wrapper {
        display: none !important;
    }

    /* 2. СКРЫВАЕМ ВСЕ ОБЛАЧКА С СООБЩЕНИЯМИ */
    .portrait-speech-bubble,
    .hero-speech-bubble, /* Если верхнее облачко называется так */
    .bubble-wrapper {    /* На случай других оберток */
        display: none !important;
    }

    /* 3. ЧИНИМ ШАПКУ И КНОПКУ "ВОЙТИ" */
    .main-header {
        padding: 10px 15px !important; /* Уменьшаем боковые отступы в шапке */
        gap: 10px !important;
    }
    .header-logo {
        font-size: 1.2rem !important; /* Чуть уменьшаем логотип */
    }
    /* Делаем кнопку "Войти" и иконку корзины компактнее */
    .btn-login, .login-btn, .header-btn {
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
        min-width: auto !important;
    }

    /* 4. ВИЗИТКА (АВТОР) - ПЕРЕСТРАИВАЕМ В КОЛОНКУ */
    .author-hero {
        flex-direction: column !important;
        text-align: center !important;
        margin: 40px auto 40px !important;
        gap: 20px !important;
        padding: 0 15px !important;
    }
    .hero-image {
        width: 180px !important; /* Уменьшаем твое фото */
        height: 180px !important;
        margin: 0 auto !important;
    }
    .hero-content h1 {
        font-size: 2rem !important;
        text-align: center !important;
    }
    .hero-content p {
        text-align: center !important;
    }

    /* 5. МАГАЗИН: СЕТКА В ОДИН СТОЛБЕЦ */
    .plugins-grid {
        grid-template-columns: 1fr !important; /* Товары встают друг под другом */
        max-width: 100% !important;
        padding: 0 15px !important;
        margin-top: 20px !important;
    }
    
    .plugin-card .card-image {
        aspect-ratio: 16 / 9 !important; /* На телефоне лучше смотрятся горизонтальные превью */
    }

    /* 6. БЛОК ДОВЕРИЯ (Без фото и выше) */
    .shop-trust-block {
        margin: 20px 15px 40px !important; /* Уменьшили верхний отступ с 40px до 20px */
        padding: 20px 15px !important;
        text-align: center !important;
    }
    .trust-portrait {
        display: none !important; /* Полностью скрываем фото над блоком */
    }

    /* 7. ТОЧКИ НАВИГАЦИИ (Справа) - скрываем, на телефоне они мешают */
    .scroll-nav {
        display: none !important;
    }
}

/* В твоем файле style.css найди или добавь это: */
.card-image img, 
.card-image .card-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Заполняет весь квадрат без искажений */
    display: block;
    transition: transform 0.4s ease;
}

/* Эффект увеличения при наведении (работает и для видео, и для картинки) */
.plugin-card:hover .card-image img,
.plugin-card:hover .card-image .card-video {
    transform: scale(1.05);
}



/* =========================================
   СТИЛЬ ИНТЕРФЕЙСА SHOCK (ВКЛАДКА STYLE - ПИЛЮЛИ)
   ========================================= */
.shock-style-option {
    display: block;
    width: 100%;
    max-width: 140px; /* Уменьшили ширину (было 200px) */
    cursor: pointer;
    user-select: none;
}

/* Прячем стандартный кружочек радио-кнопки */
.shock-style-option input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Внешний вид кнопки-пилюли */
/* Внешний вид кнопки-пилюли */
/* Внешний вид кнопки-пилюли */
.shock-style-pill {
    width: 100%;
    padding: 6px 0; /* 🔥 Снова увеличили отступы (было 5px) */
    text-align: center;
    border: 1px solid #333; 
    border-radius: 18px; /* Чуть добавили скругления под новую высоту */
    background: transparent;
    color: #666; 
    font-size: 0.85rem; 
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

/* Эффект при наведении мышкой (остается таким же) */
.shock-style-option:hover .shock-style-pill {
    border-color: #555;
    color: #BBB;
}

/* АКТИВНОЕ СОСТОЯНИЕ (Выбранный эффект) */
/* АКТИВНОЕ СОСТОЯНИЕ (Выбранный эффект) */
/* АКТИВНОЕ СОСТОЯНИЕ (Выбранный эффект) */
/* АКТИВНОЕ СОСТОЯНИЕ (Выбранный эффект) */
/* АКТИВНОЕ СОСТОЯНИЕ (Выбранный эффект) */
.shock-style-option input:checked + .shock-style-pill {
    border-color: #BB86FC !important; 
    color: #FFFFFF !important; 
    background: rgba(187, 134, 252, 0.1) !important; 
    box-shadow: 0 0 15px rgba(187, 134, 252, 0.3) !important; 
}

/* Уменьшаем отступы только во вкладке Style */
#panel-style .shock-menu-list {
    padding-top: 5px;  /* 🔥 Убрали верхний отступ почти в ноль */
    gap: 10px;         /* Расстояние между кнопками */
}

/* =========================================
   СЕТКА ДЛЯ ВКЛАДКИ STYLE (2 КОЛОНКИ)
   ========================================= */
#panel-style .shock-menu-list {
    padding-top: 5px; /* Тот самый маленький отступ сверху */
    display: flex;
    flex-direction: row; /* Выстраиваем колонки в ряд */
    justify-content: center; /* Центрируем всю конструкцию */
    align-items: flex-start; /* Прижимаем к верху */
    gap: 15px; /* Расстояние между левой и правой колонкой */
    width: 100%;
}

/* Настройки для каждой колонки внутри */
.style-col {
    display: flex;
    flex-direction: column; /* Кнопки внутри колонки идут сверху вниз */
    gap: 10px; /* Вертикальный отступ между кнопками */
    width: 100%;
    max-width: 140px; /* Ширина колонки равна ширине нашей кнопки */
}



/* =========================================
   БЛОК ДОСТУПНОСТИ (EDIT & FUSION)
   ========================================= */
.availability-block {
    margin-top: 50px;
    padding-top: 30px;
}

.availability-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.availability-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 20px;
    transition: transform 0.3s ease, background 0.3s ease;
}

.availability-card:hover {
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-3px);
}

.availability-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.availability-icon img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 15px;
}

.availability-text h4 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
    color: #FFF;
    font-weight: 600;
}

.availability-text p {
    margin: 0;
    font-size: 0.85rem;
    color: #999;
    line-height: 1.5;
}

/* Адаптив для телефонов */
@media (max-width: 600px) {
    .availability-grid {
        grid-template-columns: 1fr; /* На телефоне в одну колонку */
    }
}


/* =========================================
   МИНИ-БЛОК ПРЕИМУЩЕСТВ (ГАРАНТИИ)
   ========================================= */
.features-container {
    padding-top: 0; /* Убираем верхний отступ, чтобы блок был ближе к товарам */
    margin-top: -20px; /* Слегка подтягиваем наверх */
    max-width: 1000px; /* Чуть шире сетки товаров для красивого баланса */
}

.features-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 30px;
}

.feat-item {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1; /* Все 3 блока занимают равное место */
}

.feat-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: rgba(187, 134, 252, 0.08); /* Очень легкий фиолетовый фон */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background 0.3s ease;
}

.feat-item:hover .feat-icon {
    transform: translateY(-3px);
    background: rgba(187, 134, 252, 0.15);
}

.feat-text h4 {
    color: #FFFFFF;
    font-size: 1rem;
    margin: 0 0 5px 0;
    font-weight: 600;
}

.feat-text p {
    color: #A0A0A0;
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.4;
}

/* Адаптив для телефонов и небольших экранов */
@media (max-width: 900px) {
    .features-wrapper {
        flex-direction: column; /* Выстраиваем друг под другом */
        gap: 25px;
        padding: 25px 20px;
    }
    
    .feat-item {
        align-items: flex-start;
    }
}

/* =========================================
   РАЗДЕЛИТЕЛЬ СЕКЦИЙ (Линия)
   ========================================= */
.section-divider {
    width: 100%;
    max-width: 800px; /* Делаем линию не на весь экран, а по ширине контента */
    height: 1px;
    margin: 80px auto; /* Большие отступы сверху и снизу (воздух) */
    
    /* Градиент: прозрачный -> фиолетовый -> прозрачный */
    background: linear-gradient(90deg, transparent 0%, rgba(187, 134, 252, 0.4) 50%, transparent 100%);
    
    /* Легкое неоновое свечение, чтобы линия не выглядела скучно */
    box-shadow: 0 0 15px rgba(187, 134, 252, 0.2);
}

/* На телефонах делаем отступы поменьше */
@media (max-width: 768px) {
    .section-divider {
        margin: 50px auto;
        max-width: 80%; /* На телефоне линия будет занимать 80% ширины экрана */
    }
}

/* =========================================
   РАЗДЕЛИТЕЛЬ СЕКЦИЙ (Анимированный пунктир)
   ========================================= */
.section-divider {
    width: 100%;
    max-width: 800px; 
    height: 3px; /* Толщина линии */
    margin: 80px auto; /* Отступы сверху и снизу */
    
    /* Создаем пунктир с помощью градиента */
    background-image: repeating-linear-gradient(
        to right, 
        rgba(187, 134, 252, 0.4) 0px, 
        rgba(187, 134, 252, 0.4) 15px, /* Длина самого штриха */
        transparent 15px, 
        transparent 30px /* Длина пустого пробела */
    );
    background-size: 30px 100%;
    
    /* Магия: делаем так, чтобы края плавно растворялись в прозрачность */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    
    /* Запускаем бесконечную анимацию */
    animation: moveDashes 2s linear infinite;
}

/* Сама анимация движения вправо */
@keyframes moveDashes {
    from { background-position: 0 0; }
    to { background-position: 30px 0; } /* Сдвигаем ровно на один шаг, чтобы зациклить */
}

/* На телефонах делаем отступы поменьше */
@media (max-width: 768px) {
    .section-divider {
        margin: 50px auto;
        max-width: 80%; 
    }
}

/* =========================================
   БЕЙДЖИ ДЛЯ ТОВАРОВ (ХИТ / НОВИНКА)
   ========================================= */
.product-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 6px 12px;
    border-radius: 6px; /* Чуть острее углы, смотрится строже */
    font-size: 0.65rem; /* Немного уменьшили текст */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px; /* Чуть больше воздуха между буквами */
    z-index: 10;
    
    /* Эффект матового стекла */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none; 
}

/* Строгий стиль для ХИТА (в цвет бренда) */
.badge-hit {
    background: rgba(187, 134, 252, 0.08); /* Едва заметный фиолетовый фон */
    color: #BB86FC;
    border: 1px solid rgba(187, 134, 252, 0.3); /* Тонкая рамка */
}

/* Минималистичный стиль для НОВИНКИ (Монохром) */
.badge-new {
    background: rgba(255, 255, 255, 0.03); /* Почти прозрачный темный фон */
    color: #CCCCCC; /* Светло-серый текст */
    border: 1px solid rgba(255, 255, 255, 0.15); /* Тонкая белая рамка */
}

/* =========================================
   УВЕДОМЛЕНИЯ (ОШИБКИ И УСПЕХ)
   ========================================= */
.auth-alert {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 20px;
    text-align: center;
    
    /* Эффект матового стекла */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Иконка внутри алерта */
.auth-alert svg {
    flex-shrink: 0;
}

/* Приглушенный красный для ошибок */
.alert-error {
    background: rgba(255, 61, 0, 0.05); 
    border: 1px solid rgba(255, 61, 0, 0.2);
    color: #ff6b4a; 
}

/* Фирменный фиолетовый для успеха */
.alert-success {
    background: rgba(187, 134, 252, 0.05); 
    border: 1px solid rgba(187, 134, 252, 0.2);
    color: #BB86FC; 
}

/* Круглая аватарка для кабинета */
.cab-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c4dff, #BB86FC);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(187, 134, 252, 0.2);
}

/* Маленький значок статуса (как в ТГ) */
.status-badge-mini {
    width: 22px;
    height: 22px;
    object-fit: contain;
    margin-left: 8px;
    vertical-align: middle;
    filter: drop-shadow(0 0 6px rgba(187, 134, 252, 0.4));
    cursor: help;
}


/* === ВСПЛЫВАЮЩИЕ ПОДСКАЗКИ (ТУЛТИПЫ) ДЛЯ НАГРАД === */
.tooltip-wrapper {
    position: relative;
    display: inline-flex;
}

.tooltip-wrapper .tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    background-color: #161616;
    color: #fff;
    text-align: center;
    border-radius: 8px;
    padding: 10px 12px;
    z-index: 999;
    bottom: 100%;
    left: 50%;
    /* Сдвигаем чуть вниз по умолчанию для эффекта выплывания */
    transform: translateX(-50%) translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    border: 1px solid #333;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.6);
    pointer-events: none; /* Чтобы плашка не перекрывала курсор */
}

/* Маленький треугольник-хвостик, указывающий на иконку */
.tooltip-wrapper .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

/* Эффект при наведении */
.tooltip-wrapper:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    /* Плашка поднимается на свое место */
    transform: translateX(-50%) translateY(0);
}

/* ==========================================================
   🔥 ФИКСЫ: ПЕРЕКРЫТИЕ ТЕКСТА И МОБИЛЬНАЯ ВЕРСИЯ 🔥
========================================================== */

/* 1. Спасаем текст "Бесплатные обновления" от перекрытия облачком Никиты */
.features-container {
    position: relative;
    z-index: 20 !important; /* Жестко вытаскиваем блок поверх всех остальных элементов */
}

/* На всякий случай запрещаем тексту скрываться */
.features-wrapper .feat-item, 
.features-wrapper .feat-text p {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 2. Адаптация под мобильные устройства (Экраны меньше 768px) */
@media (max-width: 768px) {
    /* Скрываем значок DaVinci в заголовке, чтобы не ломать верстку */
    .page-title img[src*="davinci.png"] {
        display: none !important;
    }
    
    /* Скрываем кнопку "Поддержать" в мобильной шапке */
    .btn-support-header {
        display: none !important;
    }

    /* =========================================
       ФИКС НАЛОЖЕНИЯ КОМЬЮНИТИ НА ТЕЛЕФОНАХ 
       (Абсолютно резкая смена)
       ========================================= */
       
    .community-slider {
        display: block !important; 
    }

    /* Полностью вырезаем неактивные слайды */
    .community-slide:not(.active) {
        display: none !important;
        opacity: 0 !important;
    }

    /* Активный слайд показываем мгновенно */
    .community-slide.active {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition: none !important;
        animation: none !important; /* Убиваем анимации */
    }

    /* Строчки внутри появляются мгновенно вместе со слайдом */
    .community-slide .lb-row,
    .community-slide.active .lb-row,
    .community-slide:not(.active) .lb-row {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
        transition-delay: 0s !important; /* Убиваем каскадные задержки */
        transition-duration: 0s !important;
    }
}

/* Стили кнопки в шапке */
        /* Стили кнопки в шапке (Приглушенный, стильный вариант) */
        /* Стили кнопки в шапке (Строгий монохромный вариант) */
        /* Стили кнопки в шапке (Строгий серый вариант) */
        .btn-support-header {
            background: transparent;
            color: #888; /* Базовый серый текст */
            border: 1px solid #333; /* Темно-серая рамка */
            padding: 6px 14px;
            border-radius: 8px;
            font-size: 0.85rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        /* Эффект при наведении (Просто чуть светлее текст и рамка) */
        .btn-support-header:hover {
            background: rgba(255, 255, 255, 0.02); /* Почти невидимый фон для объема */
            color: #ccc; /* Светло-серый текст */
            border-color: #666; /* Средне-серая рамка */
            box-shadow: none; /* Никакого свечения */
        }
        
        /* Стили кастомного ползунка */
        .support-slider {
            -webkit-appearance: none;
            width: 100%;
            height: 6px;
            background: #333;
            border-radius: 4px;
            outline: none;
        }
        .support-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #BB86FC;
            cursor: pointer;
            box-shadow: 0 0 15px rgba(187, 134, 252, 0.6);
            transition: transform 0.1s;
        }
        .support-slider::-webkit-slider-thumb:hover {
            transform: scale(1.15);
        }

        /* 🔥 СТИЛИ ДЛЯ БЛОКА "ПОДЕЛИТЬСЯ" */
        .share-link-box {
            display: flex;
            align-items: center;
            background: #111;
            border: 1px solid #333;
            border-radius: 8px;
            overflow: hidden;
            transition: 0.2s;
        }
        .share-link-box:focus-within {
            border-color: #BB86FC;
            box-shadow: 0 0 10px rgba(187,134,252,0.2);
        }
        .share-link-box input {
            flex-grow: 1;
            background: transparent;
            border: none;
            color: #ccc;
            padding: 14px 15px;
            font-size: 0.9rem;
            outline: none;
            user-select: all;
        }
        .share-link-box .btn-copy {
            background: #222;
            border: none;
            border-left: 1px solid #333;
            color: #BB86FC;
            padding: 0 16px;
            align-self: stretch; /* Растягиваем кнопку на всю высоту */
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: 0.2s;
        }
        .share-link-box .btn-copy:hover {
            background: #BB86FC;
            color: #000;
        }

        /* =========================================
   ЖИВОЕ КОМЬЮНИТИ (ТАЙМЕР + КАСКАД)
   ========================================= */

/* --- 1. ЛИНИЯ ТАЙМЕРА (Идеально внутри карточки) --- */
.leaderboard-card {
    position: relative; 
}

.community-timer-bar {
    position: absolute;
    top: 0; 
    left: 50%; /* Сдвигаем в центр */
    transform: translateX(-50%); /* Точное центрирование */
    
    /* Делаем полоску короче карточки (отступаем по 30px от краев) */
    width: calc(100% - 60px); 
    height: 2px;
    background: transparent;
    
    /* У самой полоски делаем аккуратные мягкие края */
    border-radius: 2px; 
    overflow: hidden;
    z-index: 5;
}

.timer-progress {
    height: 100%;
    background: #BB86FC;
    width: 0%;
    box-shadow: 0 0 10px rgba(187, 134, 252, 0.8);
}

.timer-progress.animate {
    animation: fillTimer 5s linear forwards;
}

@keyframes fillTimer {
    0% { width: 0%; }
    100% { width: 100%; }
}

/* --- 2. СЕТКА СЛАЙДОВ (Без display: none!) --- */
/* --- 2. СЕТКА СЛАЙДОВ (Без display: none!) --- */
.community-slider {
    display: grid; /* Накладываем списки друг на друга */
    position: relative; /* Включаем позиционирование */
    z-index: 10; /* Поднимаем весь список с тултипами ПОВЕРХ полоски таймера (у которой z-index: 5) */
}

.community-slide {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    /* Плавное затухание всего холста */
    transition: opacity 0.8s ease, visibility 0.8s;
    pointer-events: none; 
}

.community-slide.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* --- 3. МАГИЯ ПООЧЕРЕДНОГО ПОЯВЛЕНИЯ (КАСКАД) --- */

/* Исходное состояние: строчки спрятаны внизу */
.community-slide .lb-row {
    opacity: 0;
    transform: translateY(15px) scale(0.98);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Когда слайд показывается - строчки выплывают */
.community-slide.active .lb-row {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Раздаем задержку для каждой строчки, чтобы они выходили по очереди */
.community-slide.active .lb-row:nth-child(1) { transition-delay: 0.1s; }
.community-slide.active .lb-row:nth-child(2) { transition-delay: 0.25s; }
.community-slide.active .lb-row:nth-child(3) { transition-delay: 0.4s; }
.community-slide.active .lb-row:nth-child(4) { transition-delay: 0.55s; }
.community-slide.active .lb-row:nth-child(5) { transition-delay: 0.7s; }

/* Когда слайд уходит - строчки уплывают наверх ОДНОВРЕМЕННО и быстро */
.community-slide:not(.active) .lb-row {
    transition-delay: 0s !important; /* Убираем задержку при исчезновении */
    transition-duration: 0.4s;
    opacity: 0;
    transform: translateY(-15px) scale(0.98);
}


/* --- Стили для выбора токенов --- */
.token-packages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.token-pkg {
    position: relative;
    background: #131313;
    border: 2px solid #333;
    border-radius: 12px;
    padding: 16px 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
}

.token-pkg:hover {
    background: #181818; 
    border-color: rgba(187, 134, 252, 0.4); /* Фиолетовая рамка при наведении */
}

/* Активный фиксированный пакет */
.token-pkg.active {
    border-color: #BB86FC;
    background: rgba(187, 134, 252, 0.05);
    box-shadow: 0 4px 15px rgba(187, 134, 252, 0.15);
}

.pkg-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #BB86FC;
    color: #121212;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 8px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    text-transform: uppercase;
}

.pkg-title {
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.token-pkg.active .pkg-title, 
.token-flexible-box.active .pkg-title {
    color: #BB86FC;
}

.pkg-tokens {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}

.pkg-tokens span {
    font-size: 0.8rem;
    font-weight: 400;
    color: #888;
    display: block;
}

.pkg-price {
    font-size: 1.1rem;
    font-weight: bold;
    color: #BB86FC;
}

/* Блок гибкого тарифа */
.token-flexible-box {
    background: #131313;
    border: 2px solid #333;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.2s ease;
}

.token-flexible-box.active {
    border-color: #BB86FC;
    background: rgba(187, 134, 252, 0.05);
    box-shadow: 0 4px 15px rgba(187, 134, 252, 0.15);
}

.flex-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.flex-header .pkg-tokens { margin-bottom: 0; text-align: left;}
.flex-header .pkg-tokens span { display: inline; }

/* Мобильная адаптация: выстраиваем пакеты друг под другом, если экран узкий */
@media (max-width: 600px) {
    .token-packages-grid {
        grid-template-columns: 1fr;
    }
}


/* Увеличиваем карточки тарифов */
.token-packages-grid.large-cards {
    gap: 20px; /* Больше отступ между карточками */
}

.large-cards .token-pkg {
    display: flex;
    flex-direction: column;
    padding: 30px 20px;
    min-height: 320px; /* Задаем минимальную высоту, чтобы все были одинаковыми */
}

.large-cards .pkg-header {
    margin-bottom: 20px;
}

.large-cards .pkg-price {
    font-size: 1.5rem;
    margin-top: auto; /* Прижимает цену к самому низу карточки */
}

/* Оформление списка возможностей внутри тарифа */
.pkg-features {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    text-align: left;
    color: #999;
    font-size: 0.9rem;
    line-height: 1.6;
}

.pkg-features li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 8px;
}

/* Выделяем первый пункт (заголовок списка) */
.pkg-features li:first-child {
    padding-left: 0;
    color: #fff;
    margin-bottom: 12px;
    font-weight: 500;
}

.pkg-features li:first-child::before {
    display: none;
}

/* Галочки для остальных пунктов */
.pkg-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #BB86FC;
    font-weight: bold;
}

.pkg-features strong {
    color: #fff;
}

/* Кнопка перехода в чат-бот в модалке */
.btn-bot-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(187, 134, 252, 0.08); /* Очень легкий фиолетовый фон */
    color: #BB86FC;
    border: 1px solid rgba(187, 134, 252, 0.2);
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-bot-link:hover {
    background: rgba(187, 134, 252, 0.15);
    border-color: rgba(187, 134, 252, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(187, 134, 252, 0.1);
}



/* === ШИРОКИЙ БАННЕР ДЛЯ ТОКЕНОВ === */
.ai-banner-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(145deg, #1E1E24 0%, #15151A 100%);
    border: 1px solid rgba(187, 134, 252, 0.2);
    border-radius: 20px;
    padding: 30px 40px;
    
    /* 🔥 НОВЫЕ СТРОЧКИ: Ограничиваем ширину и центрируем */
    max-width: 850px; 
    margin: 40px auto 0 auto; 
    
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Легкое свечение при наведении */
.ai-banner-card:hover {
    border-color: rgba(187, 134, 252, 0.5);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(187, 134, 252, 0.1);
}

.ai-banner-left {
    max-width: 60%;
}

.ai-banner-badge {
    display: inline-block;
    background: rgba(187, 134, 252, 0.15);
    color: #BB86FC;
    font-size: 0.85rem;
    font-weight: bold;
    padding: 6px 12px;
    border-radius: 8px;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

.ai-banner-title {
    margin: 0 0 10px 0;
    font-size: 1.8rem;
    color: #ffffff;
}

.ai-banner-desc {
    margin: 0;
    color: #999;
    font-size: 1.05rem;
    line-height: 1.5;
}

.ai-banner-right {
    display: flex;
    align-items: center;
    gap: 30px;
}

.ai-banner-price-block {
    text-align: right;
}

.price-label {
    display: block;
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.price-value {
    display: block;
    font-size: 1.6rem;
    font-weight: bold;
    color: #BB86FC;
}

/* Адаптация под мобильные устройства */
@media (max-width: 900px) {
    .ai-banner-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 25px;
        gap: 25px;
    }
    
    .ai-banner-left {
        max-width: 100%;
    }
    
    .ai-banner-right {
        width: 100%;
        justify-content: space-between;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        padding-top: 20px;
    }
    
    .ai-banner-price-block {
        text-align: left;
    }
}

/* === МИНИМАЛИСТИЧНЫЙ AI БЛОК === */
/* === МИНИМАЛИСТИЧНЫЙ AI БЛОК === */
/* === РЕГИСТРИРУЕМ ПЕРЕМЕННУЮ ДЛЯ ВРАЩЕНИЯ (Если еще не добавил) === */
/* === РЕГИСТРИРУЕМ ПЕРЕМЕННУЮ === */
@property --border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: true; /* 🔥 ИЗМЕНИЛИ НА TRUE */
}

/* === МИНИМАЛИСТИЧНЫЙ AI БЛОК С БЕГУЩЕЙ ГРАДИЕНТНОЙ РАМКОЙ === */
/* === МИНИМАЛИСТИЧНЫЙ AI БЛОК С ПРЕМИАЛЬНОЙ РАМКОЙ === */
/* === МИНИМАЛИСТИЧНЫЙ AI БЛОК С ПРЕМИАЛЬНОЙ РАМКОЙ === */
/* === МИНИМАЛИСТИЧНЫЙ AI БЛОК С ПРЕМИАЛЬНОЙ РАМКОЙ === */
/* === МИНИМАЛИСТИЧНЫЙ AI БЛОК С ПРЕМИАЛЬНОЙ РАМКОЙ === */
/* === МИНИМАЛИСТИЧНЫЙ AI БЛОК С ПРЕМИАЛЬНОЙ РАМКОЙ === */
/* === МИНИМАЛИСТИЧНЫЙ AI БЛОК === */
/* === МИНИМАЛИСТИЧНЫЙ AI БЛОК === */
.ai-minimal-card {
    border-radius: 24px;
    padding: 60px 40px;
    
    /* 🔥 ИСПРАВЛЕНИЕ ОТСТУПА: 
       50px - сверху
       auto - по бокам (для центрирования)
       120px - СНИЗУ (Увеличь это число, если нужно еще больше места) */
    margin: 50px auto 120px auto; 
    
    max-width: 800px;
    text-align: center;
    cursor: pointer;
    position: relative;
    z-index: 1; 
    background-color: transparent; 
    border: none; 
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* 🔥 ТОНКОЕ МЯГКОЕ СВЕЧЕНИЕ (След рамки) */
/* 🔥 ТОНКОЕ МЯГКОЕ СВЕЧЕНИЕ (Внешний след) */
/* 🔥 ТОНКОЕ МЯГКОЕ СВЕЧЕНИЕ (Внешний след) */
/* 🔥 СЛОЙ -1: РЕЗКАЯ ОБВОДКА (Основная линия) */
/* 🔥 СЛОЙ -1: РЕЗКАЯ ОБВОДКА (Основная линия) */
.ai-minimal-card::before {
    content: "";
    position: absolute;
    inset: -3px; 
    border-radius: 27px; 
    
    background: conic-gradient(
        from var(--border-angle), 
        transparent 0%, 
        rgba(193, 153, 223, 0.05) 15%, /* #C199DF: плавный старт */
        rgba(193, 153, 223, 0.9)  30%, /* #C199DF: светло-фиолетовый */
        rgba(77, 81, 222, 0.9)    45%, /* #4D51DE: фиолетово-синий */
        rgba(67, 92, 229, 0.9)    60%, /* #435CE5: глубокий синий */
        rgba(83, 114, 216, 0.9)   75%, /* #5372D8: мягкий синий */
        rgba(83, 114, 216, 0.05)  85%, /* #5372D8: плавный финиш */
        transparent 100%
    );
    
    z-index: -1;
    animation: spinBorderLight 6s linear infinite;
    pointer-events: none;
}

/* 🔥 СЛОЙ -2: МЯГКОЕ СВЕЧЕНИЕ (Размытый фон) */
.ai-minimal-card::after {
    content: "";
    position: absolute;
    inset: -3px; 
    border-radius: 27px; 
    
    background: conic-gradient(
        from var(--border-angle), 
        transparent 0%, 
        rgba(193, 153, 223, 0.05) 15%, 
        rgba(193, 153, 223, 0.9)  30%, 
        rgba(77, 81, 222, 0.9)    45%, 
        rgba(67, 92, 229, 0.9)    60%, 
        rgba(83, 114, 216, 0.9)   75%, 
        rgba(83, 114, 216, 0.05)  85%, 
        transparent 100%
    );
    
    filter: blur(8px);
    opacity: 0.7; /* Регулируй яркость свечения, если нужно */
    
    z-index: -2;
    animation: spinBorderLight 6s linear infinite;
    pointer-events: none;
}


/* Эффект при наведении */
/* Эффект при наведении (База карточки) */
/* Эффект при наведении (Сама карточка) */
/* Эффект при наведении (Сама карточка) */
.ai-minimal-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6); 
}

/* === КЛЮЧЕВЫЕ КАДРЫ ВРАЩЕНИЯ (Если еще не добавил) === */
@keyframes spinBorderLight {
    to {
        --border-angle: 360deg;
    }
}

/* === ФОНОВОЕ ВИДЕО (АНИМАЦИЯ ПОЛЕТА) === */
/* === ФОНОВОЕ ВИДЕО (АНИМАЦИЯ ПОЛЕТА) === */
.ai-bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px; 
    height: 300px;
    margin-top: -150px; 
    margin-left: -150px;
    object-fit: cover;
    z-index: 0;
    opacity: 1; 
    pointer-events: none;

    
    animation: orbitSphere 20s linear infinite; 
}

/* === 🔥 МАТОВОЕ СТЕКЛО С ШУМОМ === */
.ai-glass-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1; 
    background: rgba(14, 14, 14, 0.4);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    background-image: url("..."); /* Твоя длинная ссылка на SVG шум */
    pointer-events: none;
    
    /* 🔥 ДОБАВИЛИ: Скругляем стекло, чтобы оно повторяло форму карточки (24px минус 3px рамка) */
    border-radius: 21px; 
}

/* === КОНТЕНТ (ТЕКСТ) === */
.ai-min-content {
    position: relative;
    /* Поднимаем текст на самый верх, чтобы он не размывался */
    z-index: 2; 
}

/* === УВЕЛИЧЕННАЯ КРУГОВАЯ ТРАЕКТОРИЯ === */
@keyframes orbitSphere {
    0% { 
        /* 🔥 Увеличили радиус: теперь шар летает гораздо шире (было 120px) */
        transform: rotate(0deg) translateX(240px) rotate(0deg); 
    }
    100% { 
        transform: rotate(360deg) translateX(240px) rotate(-360deg); 
    }
}

/* Логотип по центру */
.ai-min-logo {
    display: block;
    margin: 0 auto 25px auto;
    max-height: 50px;
    filter: drop-shadow(0 0 10px rgba(187, 134, 252, 0.2));
}

/* Заголовок */
.ai-min-title {
    color: #FFFFFF;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

/* Описание */
.ai-min-desc {
    color: #888888;
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto 30px auto;
}

/* Вторичная кнопка */
/* Вторичная кнопка (Внутри AI карточки) */
.ai-min-btn {
    display: inline-block;
    
    /* --- ШРИФТ: Делаем широким и жирным --- */
    color: #FFFFFF;
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px; /* Максимальная ширина для премиального вида */
    
    /* --- ФОРМА --- */
    padding: 16px 32px;
    border-radius: 12px;
    
    /* --- СТИЛЬ: Темное стекло --- */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    /* 🔥 ЭФФЕКТ СТЕКЛА: Размывает видео за кнопкой для читаемости */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

/* Эффект при наведении на карточку или саму кнопку */
.ai-minimal-card:hover .ai-min-btn,
.ai-min-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

.ai-minimal-card:hover .ai-min-btn {
    background: rgba(187, 134, 252, 0.15);
    border-color: rgba(187, 134, 252, 0.4);
}

/* Адаптация для мобилок */
@media (max-width: 768px) {
    .ai-minimal-card {
        padding: 40px 20px;
        margin: 30px 15px;
    }
    .ai-min-title { font-size: 1.5rem; }
    .ai-min-desc { font-size: 1rem; }
}


/* === БЛОК ПРЕИМУЩЕСТВ В МОДАЛКЕ AI === */
.ai-benefits-section {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05); /* Легкий разделитель над блоком */
}

.ai-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.ai-benefit-card {
    background: #131313; 
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    padding: 20px 16px;
    text-align: left;
    transition: all 0.3s ease;
}

.ai-benefit-card:hover {
    background: #181818;
    border-color: rgba(187, 134, 252, 0.2);
    transform: translateY(-2px);
}

.benefit-icon {
    color: #BB86FC; /* Фирменный фиолетовый */
    margin-bottom: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(187, 134, 252, 0.1);
    padding: 10px;
    border-radius: 12px;
}

.benefit-title {
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.benefit-desc {
    color: #888888;
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
}

/* Мобильная адаптация: выстраиваем карточки друг под другом */
@media (max-width: 768px) {
    .ai-benefits-grid {
        grid-template-columns: 1fr;
    }
}


/* === НОВАЯ ОБЕРТКА ФОНА === */
/* ОБЕРТКА ФОНА (Где лежит видео шара и матовое стекло) */
/* === ОБЕРТКА ФОНА (Где лежит видео шара и матовое стекло) === */
.ai-bg-wrapper {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 24px; 
    overflow: hidden; 
    
    /* Слой 0 лежит ПОВЕРХ слоев -1 и -2 (градиентов) */
    z-index: 0;
    pointer-events: none;
    
    /* 🔥 2. ПЕРЕНОСИМ ЧЕРНЫЙ ФОН СЮДА! Он закроет всю "внутрянку" градиента */
    background-color: #0E0E0E; 
}

/* === ИСПРАВЛЕНИЕ ДЕРГАННОЙ АНИМАЦИИ === */
/* Найди свой старый @keyframes spinBorderLight и замени на этот. 
   Мы жестко задаем 0% и 100%, чтобы браузер не "терял" кадры */
@keyframes spinBorderLight {
    0% {
        --border-angle: 0deg;
    }
    100% {
        --border-angle: 360deg;
    }
}

/* === КНОПКА AI HELPER В ШАПКЕ (С ВИДЕО-ФОНОМ) === */
.btn-ai-header {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* Делаем форму пилюли и вытягиваем кнопку */
    padding: 8px 24px; 
    border-radius: 10px; 
    
    text-decoration: none;
    overflow: hidden; 
    
    /* Убрали обводку и сделали черную подложку почти прозрачной */
    border: none; 
    background: rgba(0, 0, 0, 0.15); 
    
    /* Мягкое внешнее свечение вместо жесткой рамки 
    box-shadow: 0 4px 15px rgba(187, 134, 252, 0.15);*/
    transition: all 0.3s ease;
    min-height: 38px;
}

/* === САМО ВИДЕО ВНУТРИ КНОПКИ === */
.btn-ai-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300%; 
    height: 300%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    
    mix-blend-mode: screen; 
    /* Сделали видео ярче, чтобы градиент сочно смотрелся по умолчанию */
    opacity: .1; 
    transition: opacity 0.3s ease;
}

/* === КОНТЕНТ (ТОЛЬКО ТЕКСТ) === */
.btn-ai-content {
    position: relative;
    z-index: 1; 
    display: flex;
    align-items: center;
    
    /* Текст всегда белый, как на скриншоте */
    color: white; 
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    
    /* Мягкая, но плотная тень, чтобы белый текст читался поверх светлого видео */
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0,0,0,0.6); 
    transition: transform 0.3s ease;
}

/* === ЭФФЕКТЫ ПРИ НАВЕДЕНИИ === */
.btn-ai-header:hover {
    transform: translateY(-2px); 
    box-shadow: 0 6px 20px rgba(187, 134, 252, 0.3); /* Усиливаем свечение */
}

.btn-ai-header:hover .btn-ai-video {
    opacity: 1; /* Видео разгорается на максимум */
}

.btn-ai-header:hover .btn-ai-content {
    transform: scale(1.02); /* Текст чуть-чуть подается вперед */
}

/* Скрываем кнопку ИИ в шапке на мобильных устройствах (ширина экрана менее 768px) */
@media (max-width: 768px) {
    .btn-ai-header {
        display: none !important;
    }
}

/* === ПЛАВНЫЕ ФИОЛЕТОВЫЕ КРУГИ ИЗ ЦЕНТРА ТЕКСТА === */

.nav-cart {
    position: relative;
    white-space: nowrap !important;
    /* Критически важно: разрешаем волне выходить за пределы кнопки */
    overflow: visible !important; 
    z-index: 10; /* Поднимаем кнопку, чтобы волна была поверх шапки */
}

/* 1. Создаем невидимую точку ровно по центру кнопки */
.nav-cart::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: transparent;
    pointer-events: none;
    z-index: -1;
}

/* 2. Анимация: огромный круг с мягким размытием, который медленно тает */
/* 2. Анимация: четкий круг, который медленно расширяется и растворяется */
/* 3. Анимация: увеличиваем радиус, чтобы она гарантированно заполняла высоту хедера */
/* 4. Анимация волны */
@keyframes trueTextRipple {
    0% { box-shadow: 0 0 0 0 rgba(187, 134, 252, 0); }
    20% { box-shadow: 0 0 0 0 rgba(187, 134, 252, 0.2); }
    100% { box-shadow: 0 0 0 300px rgba(187, 134, 252, 0); }
}

/* 5. Подсветка текста самой кнопки */
.nav-cart.cart-text-highlight {
    color: #BB86FC !important;
    transition: color 0.8s ease;
}

/* 4. Запуск (5 секунд, 2 медленные волны) */
.nav-cart.cart-wave-highlight::before {
    animation: trueTextRipple 2.5s cubic-bezier(0.2, 0.4, 0.3, 1) 2;
}

.nav-cart.cart-wave-highlight {
    color: #BB86FC !important;
    transition: color 0.8s ease;
}

/* 2. Специальный контейнер, который обрезает ТОЛЬКО волну */
.ripple-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Обрезает волну строго по краям хедера */
    pointer-events: none;
    z-index: 0; /* Лежит под всем содержимым хедера */
}

/* 3. Сама точка волны (будет создаваться скриптом ровно под кнопкой) */
.header-ripple {
    position: absolute;
    width: 2px;
    height: 2px;
    background: transparent;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    /* 2 волны по 2.5 секунды */
    animation: trueTextRipple 2.5s cubic-bezier(0.2, 0.4, 0.3, 1) 2;
}

/* Стили для широкого блока в модалке токенов */
        .ai-benefit-card--wide {
            grid-column: 1 / -1; /* Растягиваем на все колонки */
            display: flex !important;
            flex-direction: row !important;
            align-items: center;
            text-align: left;
            gap: 20px;
            padding: 20px !important;
        }

        .ai-benefit-card.highlight-benefit {
            border-color: rgba(187, 134, 252, 0.4) !important;
            background: linear-gradient(145deg, rgba(187, 134, 252, 0.15) 0%, rgba(0, 0, 0, 0.2) 100%) !important;
            box-shadow: 0 4px 20px rgba(187, 134, 252, 0.15);
        }

        .ai-benefit-card.highlight-benefit .benefit-icon {
            background: #BB86FC;
            color: #121212;
            flex-shrink: 0;
        }

        /* Адаптация для мобилок */
        @media (max-width: 768px) {
            .ai-benefit-card--wide {
                flex-direction: column !important;
                text-align: center;
                gap: 12px;
            }
        }



/* --- СТИЛИ ДЛЯ НОВОГО БОНУСА (ПЛАШКА) --- */
        /* Делаем обертку бонуса активной для клика */
        .product-bonus-wrapper {
            position: relative;
            cursor: pointer; /* Показываем палец при наведении */
            display: flex;
            justify-content: flex-end;
            z-index: 10; /* Чтобы ссылка была выше основного клика карточки */
            text-decoration: none !important;
        }

        /* Убираем возможные синие рамки или подчеркивания у ссылки */
        .product-bonus-wrapper:focus, 
        .product-bonus-wrapper:active {
            outline: none;
            text-decoration: none;
        }

        /* Подсветка плашки при наведении */
        .product-bonus-wrapper:hover .product-bonus-pill {
            background: rgba(187, 134, 252, 0.2);
            border-color: rgba(187, 134, 252, 0.4);
            transform: translateY(-1px);
        }

        /* --- Всплывающая подсказка (Большая карточка) --- */
        .bonus-tooltip {
            position: absolute;
            bottom: 100%;
            right: 0;
            margin-bottom: 12px; /* Чуть отодвинули от плашки */
            background: #1e1e20;
            border-radius: 14px;
            width: 280px; /* Сделали тултип широким */
            box-shadow: 0 15px 40px rgba(0,0,0,0.8);
            opacity: 0;
            visibility: hidden;
            transform: translateY(8px) scale(0.95);
            transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
            z-index: 20;
            overflow: hidden; /* Чтобы видео не вылезало за скругления */
            text-align: left;
            display: flex;
            flex-direction: column;
            transform-origin: bottom right; /* Анимация появления из правого нижнего угла */
        }

        /* Контейнер для большого видео */
        /* Контейнер для большого видео */
        .tooltip-video-wrapper {
            width: 100%;
            height: 190px; /* Уменьшили общую высоту шапки */
            
            /* 🔥 Убрали жесткий фон #121212, теперь тут прозрачность, 
               чтобы видео смешивалось с основным фоном тултипа */
            background: transparent; 
            
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px 0;
        }

        /* Само видео (сфера) */
        .tooltip-video-header {
            height: 300px; /* Сделали саму сферу гораздо компактнее */
            width: 300px;
            object-fit: contain; /* Чтобы сфера не обрезалась */
            
            /* 🔥 Режим наложения: делает черный цвет прозрачным */
            mix-blend-mode: screen; 
            
            /* Слегка вытягиваем контраст, чтобы "съесть" серый шум по краям видео,
               и добавляем яркости, чтобы сфера светилась */
            filter: contrast(1.4) brightness(1.1);
            -webkit-filter: contrast(1.4) brightness(1.1);
        }

        /* Текстовый блок тултипа */
        .tooltip-content {
            padding: 18px;
        }

        /* --- Стили для логотипа в тултипе --- */
        .tooltip-logo {
            height: 35px; /* Аккуратная высота под размер текста */
            width: auto;
            object-fit: contain;
            display: block;
            margin-bottom: 10px; /* Отступ до текста описания */
            margin-left: -5px;
            /* Если логотип темный и сливается с фоном, можно добавить фильтр: */
            /* filter: brightness(0) invert(1); */
        }

        .tooltip-desc {
            font-size: 12px;
            color: #a0a0a0;
            line-height: 1.5;
            font-weight: 400;
        }

        /* --- Стрелочка --- */
        .bonus-tooltip::after {
            content: '';
            position: absolute;
            top: 100%;
            right: 20px; /* Позиция стрелочки над плашкой */
            border-width: 7px;
            border-style: solid;
            border-color: #1e1e20 transparent transparent transparent;
        }

        .bonus-tooltip::before {
            content: '';
            position: absolute;
            top: 100%;
            right: 19px;
            border-width: 8px;
            border-style: solid;
            border-color: rgba(187, 134, 252, 0.2) transparent transparent transparent;
        }

        /* Анимация появления */
        .product-bonus-wrapper:hover .bonus-tooltip {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
        }


        /* --- Иконка искр в бонусе --- */
        /* --- Иконка искр в бонусе (Перекрашиваем в фиолетовый) --- */
        /* --- Иконка искр в бонусе (Исправленный фиолетовый цвет) --- */
        /* --- Иконка искр в бонусе (Точный фиолетовый цвет #BB86FC) --- */
        /* --- Иконка искр в бонусе (Чистый вариант без фильтров) --- */
        .bonus-spark-icon {
            height: 12px;
            width: auto;
            object-fit: contain;
            margin-left: 0px;
            vertical-align: middle;
            
            /* 🔥 Мы убрали все фильтры, теперь иконка будет такой, какой ты её сохранишь в PNG */
            
            /* Оставляем только легкую анимацию для "живости" */
            animation: sparkHover 3s ease-in-out infinite alternate;
        }

        @keyframes sparkHover {
            0% { transform: translateY(0px) scale(1); }
            100% { transform: translateY(-1px) scale(1.05); }
        }

        /* --- Твоя иконка подарка в бонусе --- */
        .bonus-gift-icon {
            height: 13px; /* Оптимальный размер под шрифт 10px */
            width: auto;
            object-fit: contain;
            vertical-align: middle;
            margin-left: 4px; /* Отступ от текста "токенов" */
            
            /* Если иконка не покрашена в ФШ, можно добавить легкий фильтр яркости */
            /* filter: brightness(1.1); */
            
            /* Оставляем ту же легкую анимацию для акцента */
            animation: giftBounce 3s ease-in-out infinite alternate;
        }

        @keyframes giftBounce {
            0% { transform: translateY(0px) rotate(0deg); }
            100% { transform: translateY(-1px) rotate(3deg); }
        }

        /* --- Анимированная видео-иконка в бонусе --- */
        /* --- Увеличенная видео-иконка в бонусе --- */
        /* --- Фикс фона видео-иконки: убираем темное пятно --- */

        /* Адаптируем плашку под увеличенное видео */
        /* --- Обновленная плашка: всегда яркая --- */
        /* --- Анимированная иконка (MP4 с черным фоном) --- */
        /* --- Анимированная иконка (Хак с растворением краев) --- */
        .bonus-video-icon {
            height: 26px; 
            width: 26px;
            object-fit: cover;
            vertical-align: middle;
            margin-left: -2px;
            
            /* Оставляем базовое наложение */
            mix-blend-mode: screen; 
            
            /* 🔥 СЕКРЕТНОЕ ОРУЖИЕ: Радиальная маска */
            /* Делает центр видимым, а края видео плавно уводит в 100% прозрачность. 
               Никаких квадратных границ больше не будет! */
            -webkit-mask-image: radial-gradient(circle, black 45%, transparent 75%);
            mask-image: radial-gradient(circle, black 45%, transparent 75%);
            
            /* Возвращаем только легкую яркость для самих искр */
            filter: brightness(1.2);
        }

        /* --- Плашка --- */
        /* --- Премиальная серая плашка --- */
        .product-bonus-pill {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 10.5px;
            
            /* Делаем текст нейтральным серым, чтобы он не кричал */
            color: #aaa; 
            font-weight: 500; 
            
            /* Еле заметный стеклянный фон и очень тонкая светлая рамка */
            background: rgba(255, 255, 255, 0.04) !important;
            border: 1px solid rgba(255, 255, 255, 0.05) !important;
            
            height: 26px; 
            padding: 0 4px 0 8px !important; 
            border-radius: 6px;
            letter-spacing: 0.3px;
            transition: all 0.2s ease;
            white-space: nowrap;
        }

        /* При наведении плашка просто становится чуть светлее */
        .product-bonus-wrapper:hover .product-bonus-pill {
            background: rgba(255, 255, 255, 0.08) !important;
            border-color: rgba(255, 255, 255, 0.1) !important;
            color: #fff; /* Текст слегка "загорается" */
            transform: translateY(-1px);
        }

        /* Поправка для мобилок, чтобы не было слишком крупно */
        @media (max-width: 768px) {
            .bonus-video-icon {
                height: 22px;
                width: 22px;
            }
            .product-bonus-pill {
                height: 24px;
            }
        }


        /* --- ЛОАДЕР ДЛЯ ВИДЕО ПРЕВЬЮ --- */
        .media-loader {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* 🔥 Меняем цвет фона лоадера */
        background: #0E0E0E; 
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
        transition: opacity 0.3s ease;
    }

        /* Красивое светящееся кольцо */
        .spinner-ring {
            width: 34px;
            height: 34px;
            /* Полупрозрачный белый (серый) для основы кольца */
            border: 3px solid rgba(255, 255, 255, 0.1); 
            /* Светло-серый для бегущей части */
            border-top-color: #888888; 
            border-radius: 50%;
            /* Сделали анимацию кручения более ровной (linear) и чуть спокойнее */
            animation: spinRing 1s linear infinite; 
            
            /* 🔥 Убрали drop-shadow, чтобы не было лишнего неонового свечения */
        }

        @keyframes spinRing {
            to { transform: rotate(360deg); }
        }

        /* --- ОЧЕНЬ ПЛАВНОЕ ПОЯВЛЕНИЕ ВИДЕО --- */
        /* --- ОЧЕНЬ ПЛАВНОЕ ПОЯВЛЕНИЕ ВИДЕО --- */
        .lazy-video {
            opacity: 0;
            /* 🔥 ИСПРАВЛЕНИЕ: Прописываем обе анимации через запятую и ставим !important, 
               чтобы зум при наведении не убивал плавное появление */
            transition: opacity 1.5s ease-in-out, transform 0.4s ease !important;
            position: relative;
            z-index: 2; /* Видео ложится поверх лоадера */
        }

        .lazy-video.is-loaded {
            opacity: 1;
        }

        /* --- Обертка для маленького видео в плашке --- */
        .bonus-video-wrapper {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            margin-left: -2px; /* Перенесли отступ с самого видео на обертку */
        }
        
        .bonus-video-wrapper .bonus-video-icon {
            margin-left: 0; /* Убираем лишний отступ */
            position: absolute;
            top: 0;
            left: 0;
        }

        /* --- Миниатюрный лоадер (уменьшен в размерах) --- */
        .mini-loader .spinner-ring {
            width: 16px;
            height: 16px;
            border-width: 2px;
        }


        /* --- Умные уведомления (Social Proof) --- */
/* --- Сама плашка уведомления (Строгий дизайн) --- */
/* --- Сама плашка уведомления (Строгий дизайн) --- */
/* --- Системная телеметрия (Social Proof) --- */
.sales-toast {
    pointer-events: none; /* Полностью некликабельно, как просили в ТЗ */
    background: #121214; 
    border: 1px solid rgba(255, 255, 255, 0.05); /* Еще тоньше обводка */
    border-radius: 8px; /* Чуть строже углы */
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); 
    width: 320px; 
    box-sizing: border-box;
    
    transform: translateX(120%);
    opacity: 0;
    /* Увеличили время анимации до 1 секунды (очень плавное появление) */
    transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sales-toast.show {
    transform: translateX(0);
    opacity: 1;
}

/* --- Иконка тоже стала строже --- */
.toast-icon {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    background: #BB86FC;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(187, 134, 252, 0.5);
}

.toast-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toast-title {
    font-size: 12px; /* Чуть меньше шрифт, это же просто статус */
    font-weight: 600;
    color: #e0e0e0;
}

.toast-time {
    font-size: 10px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Крестик закрытия --- */
.toast-close {
    background: none;
    border: none;
    color: #555;
    cursor: pointer;
    
    /* 🔥 МАГИЯ: auto автоматически отталкивает крестик максимально вправо */
    margin-left: auto; 
    
    padding: 0;
    display: flex;
    transition: color 0.2s;
    
    /* Чтобы крестик не сплющило, если текст будет слишком длинным */
    flex-shrink: 0; 
}

.toast-close:hover { color: #fff; }

/* Адаптация для мобилок: выезжает снизу по центру */
/* --- Отключаем умные уведомления на мобильных устройствах --- */
@media (max-width: 768px) {
    .toast-container {
        display: none !important;
    }
}

/* --- Контейнер для уведомлений --- */
/* --- Контейнер для уведомлений --- */
.toast-container {
    position: fixed;
    /* 🔥 Опускаем ниже хедера */
    top: 110px; 
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none; 
}






/* --- Блок онлайн посетителей --- */
.online-widget {
    position: fixed;
    top: 110px; /* Аккуратно под хедером */
    right: 20px;
    z-index: 9998;
    background: #121214;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px; /* Делаем плашку округлой */
    padding: 6px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    pointer-events: none; /* Пропускает клики сквозь себя */
    
    /* Плавное появление */
    opacity: 0;
    transform: translateY(-10px);
    animation: fadeInDown 0.5s ease forwards 0.5s;
}

@keyframes fadeInDown {
    to { opacity: 1; transform: translateY(0); }
}

/* Пульсирующая зеленая точка */
.online-dot {
    width: 8px;
    height: 8px;
    background-color: #4cd964; 
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(76, 217, 100, 0.5);
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(76, 217, 100, 0.5); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(76, 217, 100, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(76, 217, 100, 0); }
}

.online-text {
    color: #888;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.online-text span {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

/* 🔥 Опускаем контейнер уведомлений ниже, чтобы не было нахлеста! */
.toast-container {
    top: 160px !important; 
}

/* Отключаем онлайн-блок на мобилках, чтобы не занимать экран */
@media (max-width: 768px) {
    .online-widget { display: none !important; }
}


/* --- ПЛАШКА БОНУСНЫХ ТОКЕНОВ В МОДАЛКАХ --- */

.plugin-bonus-wrapper {
    margin-bottom: 25px; 
    width: 100%;
}

.plugin-bonus-wrapper > a {
    text-decoration: none; 
    margin: 0; 
    display: block; 
    width: 100%; 
    box-sizing: border-box;
}

.plugin-bonus-box {
    display: flex; 
    align-items: center; 
    gap: 14px; 
    padding: 14px 16px; 
    width: 100%; 
    border-radius: 10px; 
    background: rgba(187, 134, 252, 0.08); 
    border: 1px solid rgba(187, 134, 252, 0.2); 
    box-sizing: border-box;
    transition: background 0.3s ease, border-color 0.3s ease;
}

/* Эффект наведения (ховер) */
.plugin-bonus-box:hover {
    background: rgba(187, 134, 252, 0.12);
    border-color: rgba(187, 134, 252, 0.4);
}

.plugin-bonus-icon {
    width: 44px; /* Чуть увеличили сам контейнер */
    height: 44px; 
    border-radius: 50%; 
    overflow: hidden; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-shrink: 0; 
    box-shadow: 0 0 12px rgba(187, 134, 252, 0.3);
    background: transparent; /* Обязательно прозрачный фон для смешивания */
}

.plugin-bonus-icon video {
    width: 100%; 
    height: 100%; 
    object-fit: cover;
    mix-blend-mode: screen; /* 🔥 МАГИЯ: удаляет черный фон! */
    transform: scale(1.7);  /* 🔥 Увеличиваем видео внутри контейнера, чтобы шар казался больше */
}

.plugin-bonus-text {
    display: flex; 
    flex-direction: column; 
    text-align: left; 
    flex: 1; 
    min-width: 0;
}

.plugin-bonus-text .bonus-title {
    font-weight: 700; 
    font-size: 15px; 
    color: #fff; 
    line-height: 1.3; 
    white-space: normal;
}

.plugin-bonus-text .bonus-desc {
    font-size: 13px; 
    color: #a1a1aa; 
    font-weight: 400; 
    margin-top: 4px; 
    line-height: 1.4; 
    white-space: normal;
}


/* Убираем черный фон у мини-лоадеров в плашках */
.media-loader.mini-loader {
    background: transparent !important;
}

/* На всякий случай делаем сам спиннер чуть поменьше, чтобы он аккуратно смотрелся в кнопке */
.media-loader.mini-loader .spinner-ring {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.payment-methods { display: flex; flex-direction: column; gap: 12px; margin-bottom: 25px; margin-top: 15px;}
.payment-method-card { display: flex; align-items: center; gap: 15px; background: #131313; border: 2px solid #2a2a2c; border-radius: 12px; padding: 16px; cursor: pointer; transition: 0.2s; }
.payment-method-card:hover { border-color: #4a4a4c; }
.payment-method-card input[type="radio"] { width: 18px; height: 18px; accent-color: #BB86FC; cursor: pointer; }
.payment-method-card .method-title { font-weight: 600; color: #fff; display: block; font-size: 1.05rem; }
.payment-method-card .method-desc { color: #888; font-size: 0.85rem; margin-top: 3px; display: block; }
.payment-method-card.active { border-color: #BB86FC; background: rgba(187, 134, 252, 0.05); }

.lang-tag {
    font-size: 10px;
    background: #ff3b30; /* Красный цвет для привлечения внимания */
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


.support-fab-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 15px;
}

.support-fab {
    background: #BB86FC;
    color: #000;
    border: none;
    padding: 12px 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 700;
    /* Убрали тень здесь */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.support-fab:hover {
    transform: scale(1.05) translateY(-2px);
    /* Убрали тень при наведении */
}

.support-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    pointer-events: none;
    transition: all 0.3s ease;
}

.support-menu.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.support-item {
    background: rgba(30, 30, 32, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    text-decoration: none;
    padding: 12px 18px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    white-space: nowrap;
    transition: 0.2s;
}

.support-item:hover {
    background: rgba(187, 134, 252, 0.1);
    border-color: #BB86FC;
    transform: translateX(-5px);
}

.support-intro {
    background: rgba(30, 30, 32, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: #a1a1aa; /* Приглушенный цвет текста */
    padding: 12px 15px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.4;
    max-width: 220px; /* Чтобы текст не растягивался слишком широко */
    text-align: left;
    margin-bottom: 5px; /* Небольшой отступ до первой кнопки */
}

/* Выделение акцента, если захочешь (опционально) */
.support-intro b {
    color: #BB86FC;
}

/* Скрываем кнопку поддержки на мобильных устройствах */
@media (max-width: 768px) {
    .support-fab-container {
        display: none !important;
    }
}

/* Выравнивание кнопок строго по низу карточки */
.plugin-card {
    display: flex;
    flex-direction: column;
    height: 100%; /* Убеждаемся, что карточка тянется на всю высоту ячейки сетки */
}

.card-content {
    display: flex;
    flex-direction: column;
    flex: 1; /* Заставляет контент растянуться и занять всё свободное место */
}

.btn-container {
    margin-top: auto; /* 🔥 Главная магия: автоматически выталкивает блок с кнопками в самый низ */
}


/* ==========================================
   Кнопка Free-версии (Ghost Button - Subtle Green)
   ========================================== */
.btn-free-ghost {
    position: relative;
    display: block;
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    color: #81C784; /* Мягкий, приглушенный пастельно-зеленый цвет */
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.5px;
    background: rgba(76, 175, 80, 0.02); /* Едва уловимый зеленый фон */
    border: 1px solid transparent;
    overflow: hidden;
    transition: all 0.3s ease;
    
    /* Запускаем анимацию мягкой зеленой пульсации */
    animation: softGreenPulse 3s infinite ease-in-out; 
}

/* Дыхание с легким зеленым оттенком */
@keyframes softGreenPulse {
    0% { background: rgba(76, 175, 80, 0.01); }
    50% { background: rgba(76, 175, 80, 0.06); } /* Чуть заметное свечение */
    100% { background: rgba(76, 175, 80, 0.01); }
}

/* Эффект при наведении (Hover) */
.btn-free-ghost:hover {
    color: #4CAF50; /* Более сочный классический зеленый */
    background: rgba(76, 175, 80, 0.1); /* Легкая зеленая подложка */
    border: 1px solid rgba(76, 175, 80, 0.3); /* Аккуратная рамка */
    animation: none; /* При наведении пульсация замирает */
}


/* ==========================================
   МОДАЛЬНОЕ ОКНО FREE-ВЕРСИИ
   ========================================== */

/* Темный фон позади модалки с эффектом размытия */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75); /* Темная полупрозрачная заливка */
    backdrop-filter: blur(8px); /* Дорогой эффект размытия заднего плана */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

/* Класс, который показывает модалку (добавляется через JS) */
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Сама карточка модального окна */
.modal-overlay .modal-card {
    background: #18181A; /* Темный фон в стиле твоего сайта */
    border: 1px solid rgba(255, 255, 255, 0.05); /* Легкая граница для объема */
    border-radius: 16px;
    padding: 40px;
    width: 90%;
    max-width: 420px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7); /* Глубокая тень */
    transform: translateY(20px) scale(0.95); /* Эффект появления снизу */
    transition: all 0.3s ease;
}

/* Анимация карточки при открытии */
.modal-overlay.active .modal-card {
    transform: translateY(0) scale(1);
}

/* ==========================================
   СТИЛИ ДЛЯ ПОЛЯ ВВОДА ПОЧТЫ
   ========================================== */
.key-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.3); /* Темный фон внутри инпута */
    border: 1px solid #3f3f46; /* Спокойная серая рамка */
    color: #ffffff; /* Белый текст */
    padding: 16px;
    border-radius: 10px;
    font-size: 15px;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

/* Цвет плейсхолдера (подсказки "Ваш Email") */
.key-input::placeholder {
    color: #a1a1aa;
}

/* Когда пользователь кликнул в поле (Focus) */
.key-input:focus {
    border-color: #BB86FC; /* Загорается твоим фирменным фиолетовым */
    background: rgba(187, 134, 252, 0.05); /* Легкая фиолетовая подсветка внутри */
    box-shadow: 0 0 0 3px rgba(187, 134, 252, 0.1); /* Мягкое свечение вокруг */
}

/* ==========================================
   КНОПКА ЗАКРЫТИЯ (КРЕСТИК)
   ========================================== */
.modal-close {
    transition: all 0.2s ease;
}

.modal-close:hover {
    color: #ffffff !important;
    transform: scale(1.1);
}


/* ==========================================
   БУРГЕР-МЕНЮ И АДАПТИВ ШАПКИ
   ========================================== */

/* Скрываем кнопку бургера на ПК */
.burger-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    margin-left: 10px;
}

/* Стили самого выезжающего меню */
.mobile-menu-drawer {
    position: fixed;
    top: 0;
    right: -100%; /* Спрятано за правым краем */
    width: 85%;
    max-width: 350px;
    height: 100vh;
    background: #121214;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 10000;
    transition: right 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
}

.mobile-menu-drawer.active {
    right: 0; /* Выезжает */
}

/* Темный фон позади меню */
.mobile-menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-menu-backdrop.active {
    opacity: 1;
    visibility: visible;
}

/* Внутренности меню */
.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mobile-close-btn {
    background: none;
    border: none;
    color: #888;
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
}

.mobile-menu-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mobile-menu-section {
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mobile-section-title {
    color: #666;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    display: block;
}

.mobile-lang-switch {
    display: flex;
    gap: 15px;
    font-size: 1.2rem;
}

.mobile-lang-switch a {
    color: #888;
    text-decoration: none;
}

.mobile-lang-switch a.active {
    color: #BB86FC;
    font-weight: bold;
}

.mobile-profile-link {
    display: block;
    text-decoration: none;
}

.mobile-profile-link .mp-email {
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 5px;
    word-break: break-all;
}

.mobile-profile-link .mp-cabinet {
    color: #BB86FC;
    font-size: 0.95rem;
}

/* ==========================================
   ПРАВИЛА ДЛЯ МОБИЛОК (Убираем лишнее из шапки)
   ========================================== */
@media (max-width: 768px) {
    /* Показываем бургер */
    .burger-btn {
        display: block;
    }
    
    /* Скрываем десктопные элементы в шапке */
    .nav-auth .lang-switch,
    .nav-auth .nav-profile,
    .btn-support-header {
        display: none !important;
    }
    
    /* Корректируем расположение логотипа и корзины */
    .nav-auth {
        gap: 5px;
    }
}


.mobile-support-btn {
                    background: rgba(255,255,255,0.03); 
                    border: 1px solid #3f3f46; 
                    color: #fff !important; 
                    padding: 14px; 
                    border-radius: 12px; 
                    font-weight: 500; 
                    text-decoration: none !important; 
                    display: flex; 
                    align-items: center; 
                    gap: 10px; 
                    font-size: 1rem; 
                    transition: background 0.2s, border-color 0.2s;
                    /* Убиваем синее выделение на корню */
                    -webkit-tap-highlight-color: transparent !important;
                    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
                    outline: none !important;
                    user-select: none; /* Запрет на выделение текста долгим тапом */
                }
                
                /* Вместо синего цвета делаем красивое высветление при нажатии */
                .mobile-support-btn:active, 
                .mobile-support-btn:focus {
                    outline: none !important;
                    background: rgba(255,255,255,0.08); 
                }


@media (max-width: 768px) {
    
    /* ... твои старые правила для мобилок ... */

    /* 🔥 ПОЛНОСТЬЮ ОТКЛЮЧАЕМ ВЫПАДАЮЩУЮ КОРЗИНУ НА МОБИЛКАХ 🔥 */
    .cart-wrapper:hover .cart-dropdown,
    .cart-dropdown,
    .cart-wrapper .cart-dropdown {
        display: none !important;
    }

}



/* --- ЗОНА ОТЗЫВОВ (ТЕМНАЯ ТЕМА) --- */
.reviews-cloud-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
    height: 320px; /* 🔥 Было 280, сделали 320 */
    overflow: hidden;
    background: transparent;
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.cloud-card {
    position: absolute;
    top: 0; 
    left: 0;
    background: #161616; /* 🔥 Вернули премиальный темный фон */
    border: 1px solid rgba(255, 255, 255, 0.05); /* 🔥 Добавили тонкую рамку */
    border-radius: 16px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 15px;
    width: max-content;
    max-width: 350px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    cursor: default;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    z-index: 1;
    will-change: transform;
}

.cloud-card:hover {
    z-index: 10;
    /* Легкая подсветка твоим фирменным фиолетовым вместо белого */
    border-color: rgba(187, 134, 252, 0.4); 
    box-shadow: 0 10px 30px rgba(187, 134, 252, 0.1);
}

.cloud-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.03); /* 🔥 Темный кружок для иконки */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cloud-body {
    color: #a1a1aa; /* 🔥 Серый текст, чтобы не бил по глазам */
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.4;
    font-style: italic;
}

/* --- КАРТОЧКИ --- */
.cloud-card {
    position: absolute;
    top: 0; 
    left: 0;
    background: #161616;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 15px;
    width: max-content;
    max-width: 350px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    cursor: pointer;
    
    /* 🔥 ИСПРАВЛЕНИЕ 1: Убрали transform из transition, чтобы не ломать скрипт */
    transition: box-shadow 0.3s ease, margin-top 0.3s ease;
    
    z-index: 1;
    will-change: transform;
}

.cloud-card:hover {
    z-index: 10;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    
    /* 🔥 ИСПРАВЛЕНИЕ 2: Используем margin-top вместо transform для эффекта "поднятия" при наведении */
    margin-top: -2px; 
}

.cloud-body {
    color: #a1a1aa;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.4;
    font-style: italic;
    
    /* 🔥 Обрезаем текст максимум до 3 строк с троеточием в конце */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- МОДАЛЬНОЕ ОКНО --- */
.review-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(5px);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.review-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.review-modal-content {
    background: #161616;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 30px 40px;
    width: 90%;
    max-width: 500px;
    position: relative;
    transform: translateY(20px);
    transition: transform 0.3s ease;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
}

.review-modal-overlay.active .review-modal-content {
    transform: translateY(0);
}

.review-modal-close {
    position: absolute;
    top: 15px; right: 20px;
    background: none; border: none;
    color: #666; font-size: 28px;
    cursor: pointer; transition: color 0.2s;
    outline: none;
}

.review-modal-close:hover { color: #fff; }

.review-modal-header {
    margin-bottom: 20px;
    display: flex; align-items: center; justify-content: center;
}

.review-modal-header img {
    width: 48px; height: 48px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 50%;
    padding: 10px;
}

.review-modal-text {
    color: #fff;
    font-size: 1.1rem;
    line-height: 1.6;
    text-align: center;
    font-style: italic;
}

/* --- ЗАГОЛОВОК ОТЗЫВОВ --- */
.reviews-wrapper {
    margin: 10px 0 40px 0; /* Отступы сверху и снизу от других блоков */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.reviews-main-title {
    color: #fff;
    font-size: 2.2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 10px; /* Отступ до летающих облаков */
    letter-spacing: -0.5px;
}

/* На мобильных экранах делаем шрифт чуть меньше */
@media (max-width: 768px) {
    .reviews-main-title {
        font-size: 1.8rem;
    }
    .reviews-wrapper {
        margin: 50px 0 20px 0;
    }
}

.review-modal-footer {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Тонкая линия разделитель */
    color: #71717a; /* Приглушенный серый цвет, чтобы не отвлекать от отзыва */
    font-size: 0.85rem;
    text-align: center;
    line-height: 1.4;
}

.cloud-icon-img {
    width: 24px; 
    height: 24px; 
    object-fit: contain;
}

.modal-source-link {
    display: inline-block;
    margin-top: 8px;
    color: #BB86FC; /* Твой фирменный фиолетовый */
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease, transform 0.3s ease;
}

.modal-source-link:hover {
    color: #fff;
    transform: translateX(3px); /* Легкий сдвиг вправо при наведении */
}


/* --- УНИВЕРСАЛЬНЫЙ ЛОАДЕР ДЛЯ ВИДЕО --- */
.video-spinner {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Легкое затемнение, пока грузится */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
    z-index: 10;
    border-radius: inherit; /* Подстраивается под скругления карточки */
}

/* Класс, который будет добавлять скрипт при загрузке */
.video-spinner.is-loading {
    opacity: 1;
    visibility: visible;
}

.video-spinner .spinner-ring {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: #BB86FC;
    border-radius: 50%;
    animation: spin-ring 1s linear infinite;
}

@keyframes spin-ring {
    to { transform: rotate(360deg); }
}


/* =========================================
   СТИЛИ ДЛЯ ПРЕМИУМ-БАНДЛА (ID 5 - КАРУСЕЛЬ)
========================================= */

.plugin-card-bundle {
    grid-column: 1 / -1; 
    padding: 0; 
    background: linear-gradient(145deg, #161618, #0E0E0E); 
    border: 1px solid rgba(187,134,252,0.4); 
    box-shadow: 0 10px 40px rgba(187,134,252,0.1); 
    overflow: hidden;
}

.bundle-card-inner {
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    min-height: 400px; /* Увеличили высоту для огромных иконок */
    padding: 40px 50px;
}

.bundle-text-col {
    flex: 1; 
    z-index: 2;
}

.bundle-price-row {
    display: flex; 
    align-items: center; 
    gap: 25px; 
    flex-wrap: wrap;
}

.bundle-card-graphics {
    flex: 1.2; 
    position: relative; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    height: 100%;
    /* Добавляем настоящую 3D-перспективу */
    perspective: 1000px; 
}

/* --- КОНТЕЙНЕРЫ КАРУСЕЛИ --- */
.bundle-carousel-item {
    position: absolute;
    width: 150px; /* Иконки стали значительно больше! */
    border-radius: 20px;
    will-change: transform, opacity, filter, z-index;
}

.bundle-carousel-item img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.8);
    display: block;
}

/* ЛОГИКА КАРУСЕЛИ: 
  Длится 12 секунд. Каждая иконка стоит на месте 3 секунды, затем за 1 секунду перелетает.
  Используем translateZ для 3D-эффекта и scale для изменения размера.
*/
@keyframes carouselPos1 {
    0%, 25% { transform: translateX(0) translateZ(50px) scale(1.3); z-index: 10; filter: brightness(1); opacity: 1; }
    33.33%, 58.33% { transform: translateX(180px) translateZ(-50px) scale(0.85); z-index: 5; filter: brightness(0.3); opacity: 0.7; }
    66.66%, 91.66% { transform: translateX(-180px) translateZ(-50px) scale(0.85); z-index: 5; filter: brightness(0.3); opacity: 0.7; }
    100% { transform: translateX(0) translateZ(50px) scale(1.3); z-index: 10; filter: brightness(1); opacity: 1; }
}
@keyframes carouselPos2 {
    0%, 25% { transform: translateX(180px) translateZ(-50px) scale(0.85); z-index: 5; filter: brightness(0.3); opacity: 0.7; }
    33.33%, 58.33% { transform: translateX(-180px) translateZ(-50px) scale(0.85); z-index: 5; filter: brightness(0.3); opacity: 0.7; }
    66.66%, 91.66% { transform: translateX(0) translateZ(50px) scale(1.3); z-index: 10; filter: brightness(1); opacity: 1; }
    100% { transform: translateX(180px) translateZ(-50px) scale(0.85); z-index: 5; filter: brightness(0.3); opacity: 0.7; }
}
@keyframes carouselPos3 {
    0%, 25% { transform: translateX(-180px) translateZ(-50px) scale(0.85); z-index: 5; filter: brightness(0.3); opacity: 0.7; }
    33.33%, 58.33% { transform: translateX(0) translateZ(50px) scale(1.3); z-index: 10; filter: brightness(1); opacity: 1; }
    66.66%, 91.66% { transform: translateX(180px) translateZ(-50px) scale(0.85); z-index: 5; filter: brightness(0.3); opacity: 0.7; }
    100% { transform: translateX(-180px) translateZ(-50px) scale(0.85); z-index: 5; filter: brightness(0.3); opacity: 0.7; }
}

/* Применяем анимацию карусели с красивой кривой ускорения */
.c-item-1 { animation: carouselPos1 12s infinite cubic-bezier(0.4, 0, 0.2, 1); }
.c-item-2 { animation: carouselPos2 12s infinite cubic-bezier(0.4, 0, 0.2, 1); }
.c-item-3 { animation: carouselPos3 12s infinite cubic-bezier(0.4, 0, 0.2, 1); }

/* --- ВНУТРЕННЕЕ ДЫХАНИЕ (ЛЕВИТАЦИЯ) --- */
/* Работает поверх карусели, чтобы картинки всегда "жили" */
@keyframes innerFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
.inner-float-1 { animation: innerFloat 4s ease-in-out infinite; }
.inner-float-2 { animation: innerFloat 5s ease-in-out infinite 0.5s; }
.inner-float-3 { animation: innerFloat 6s ease-in-out infinite 1s; }

/* --- МОБИЛЬНАЯ АДАПТАЦИЯ --- */
@media (max-width: 900px) {
    .bundle-card-inner {
        flex-direction: column !important;
        text-align: center;
        padding: 30px 20px !important;
    }
    .bundle-text-col {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .bundle-price-row {
        justify-content: center !important;
    }
    .bundle-card-graphics {
        min-height: 280px !important;
        margin-top: 30px;
        width: 100%;
    }
    /* На мобилках делаем разлет по X меньше, чтобы не вылезали за экран */
    @keyframes carouselPos1 {
        0%, 25% { transform: translateX(0) translateZ(30px) scale(1.15); z-index: 10; filter: brightness(1); opacity: 1; }
        33.33%, 58.33% { transform: translateX(95px) translateZ(-30px) scale(0.8); z-index: 5; filter: brightness(0.3); opacity: 0.7; }
        66.66%, 91.66% { transform: translateX(-95px) translateZ(-30px) scale(0.8); z-index: 5; filter: brightness(0.3); opacity: 0.7; }
        100% { transform: translateX(0) translateZ(30px) scale(1.15); z-index: 10; filter: brightness(1); opacity: 1; }
    }
    @keyframes carouselPos2 {
        0%, 25% { transform: translateX(95px) translateZ(-30px) scale(0.8); z-index: 5; filter: brightness(0.3); opacity: 0.7; }
        33.33%, 58.33% { transform: translateX(-95px) translateZ(-30px) scale(0.8); z-index: 5; filter: brightness(0.3); opacity: 0.7; }
        66.66%, 91.66% { transform: translateX(0) translateZ(30px) scale(1.15); z-index: 10; filter: brightness(1); opacity: 1; }
        100% { transform: translateX(95px) translateZ(-30px) scale(0.8); z-index: 5; filter: brightness(0.3); opacity: 0.7; }
    }
    @keyframes carouselPos3 {
        0%, 25% { transform: translateX(-95px) translateZ(-30px) scale(0.8); z-index: 5; filter: brightness(0.3); opacity: 0.7; }
        33.33%, 58.33% { transform: translateX(0) translateZ(30px) scale(1.15); z-index: 10; filter: brightness(1); opacity: 1; }
        66.66%, 91.66% { transform: translateX(95px) translateZ(-30px) scale(0.8); z-index: 5; filter: brightness(0.3); opacity: 0.7; }
        100% { transform: translateX(-95px) translateZ(-30px) scale(0.8); z-index: 5; filter: brightness(0.3); opacity: 0.7; }
    }
}


/* Стили для иконок в методах оплаты */
.payment-method-card {
    display: flex;
    align-items: center;
    gap: 15px; /* Отступ между иконкой и текстом */
    padding: 20px;
    border: 1px solid #333;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #1a1a1a;
    margin-bottom: 12px;
}

.payment-method-card.active {
    border-color: #BB86FC;
    background: rgba(187, 134, 252, 0.05);
}

.method-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
}

.method-icon svg {
    width: 24px;
    height: 24px;
    fill: #BB86FC; /* Цвет иконок под твой бренд */
}

.method-info {
    display: flex;
    flex-direction: column;
}

.method-title {
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
}

.method-desc {
    font-size: 12px;
    color: #888;
}

/* Контейнер для анимации внутри карточки */
.payment-method-card {
    position: relative;
    overflow: hidden; 
    z-index: 1;
}

/* Слой с летающими иконками */
/* Слой с летающими иконками */
.bg-fly-container {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 0;
    /* Уменьшили базовую прозрачность (было 0.35) */
    opacity: 0.2; 
    transition: opacity 0.4s ease;
}

/* При выборе карточки фон становится активным, но не "кричит" (было 0.8) */
.payment-method-card.active .bg-fly-container {
    opacity: 0.8; 
}

/* Сама летающая картинка */
.fly-icon {
    position: absolute;
    object-fit: contain;
    /* Запас слева больше, так как картинки стали крупными */
    left: -100px; 
    animation: fly-right linear infinite;
    /* filter здесь больше не пишем, им управляет PHP для каждой картинки отдельно! */
}

@keyframes fly-right {
    /* Добавили больше амплитуды вращения для крупных иконок */
    0% { left: -100px; transform: translateY(0px) rotate(-20deg); }
    50% { transform: translateY(-15px) rotate(0deg); }
    100% { left: 110%; transform: translateY(0px) rotate(20deg); }
}

/* Текст и основная иконка поверх свечения */
.method-icon, .method-info {
    position: relative;
    z-index: 2;
}

/* Обертка для картинки и текста товара */
.item-info-wrapper {
    display: flex;
    align-items: center;
    gap: 15px; /* Отступ между картинкой и текстом */
}

/* Стили самой картинки товара */
.cart-item-image {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    object-fit: cover; /* Чтобы картинка не сплющивалась */
    background: #1a1a1a; /* Легкий фон под прозрачные PNG */
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Заглушка, если у товара в базе нет картинки */
.cart-item-image-placeholder {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background: #222;
    border: 1px dashed #444;
}









/* ========================================== */
/* СТИЛИ ДЛЯ БЕГУЩЕЙ СТРОКИ НОВОСТЕЙ          */
/* ========================================== */
.news-ticker-wrapper {
    width: 100%;
    background: rgba(187, 134, 252, 0.05); 
    border-top: 1px solid rgba(187, 134, 252, 0.1);
    border-bottom: 1px solid rgba(187, 134, 252, 0.1);
    overflow: hidden;
    padding: 10px 0; /* Чуть уменьшил внутренние отступы для минимализма */
    margin-top: 70px; 
    
    /* 🔥 УМЕНЬШАЕМ ОТСТУП ЗДЕСЬ */
    margin-bottom: -90px; 
    
    user-select: none; 
}

.news-ticker-track {
    display: flex;
    width: max-content;
    /* Время, за которое пролетает ОДИН блок новостей */
    animation: ticker-slide 20s linear infinite;
}

.ticker-group {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* Не даем тексту сжиматься */
}

.news-ticker-wrapper:hover .news-ticker-track {
    animation-play-state: paused;
}

.ticker-item {
    color: #e0e0e0;
    font-size: 14px;
    letter-spacing: 0.3px;
    font-weight: 400;
    white-space: nowrap;
}

.ticker-separator {
    color: #444;
    padding: 0 40px;
    font-size: 14px;
}

@keyframes ticker-slide {
    0% { transform: translateX(0); }
    /* Так как у нас ровно 10 групп, сдвиг на 10% = сдвигу ровно на 1 группу.
       Это делает цикл бесконечным и абсолютно бесшовным! */
    100% { transform: translateX(-10%); } 
}