: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;
    grid-template-columns: 1fr 1fr; 
    max-width: 800px; 
    
    /* 🔥 МАГИЯ ЗДЕСЬ: -30px тянет карточки наверх, навстречу тексту */
    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: 1fr; /* Одна колонка */
        max-width: 400px;
        width: 100%; /* Гарантируем, что не вылезет */
    }
    .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;
}

/* --- Логотип --- */
.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);
}