/* ==========================================================================
   1. ЛЮКСОВАЯ ПАЛИТРА ДВУХ ТЕМ (ОПТИМИЗИРОВАННАЯ, БЕЗ СЛЕПЯЩЕГО ЭФФЕКТА)
   ========================================================================== */
:root {
    /* --- МЯГКАЯ СВЕТЛАЯ ТЕМА (APPLE STYLE) --- */
    --bg-main: #f1f5f9;         /* Мягкий пастельный фон защищает глаза */
    --bg-card: #ffffff;         /* Чисто белые плашки контрастируют с фоном */
    --bg-header: rgba(255, 255, 255, 0.85); 
    --card-gradient: rgba(255, 255, 255, 0.98); 
    --border-color: #e2e8f0;    
    --text-bright: #0f172a;     
    --text-muted: #334155;      
    
    /* Объемные мягкие тени Apple-style */
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.03);
    --hover-shadow: 0 20px 25px -5px rgba(99, 102, 241, 0.1), 0 10px 10px -5px rgba(99, 102, 241, 0.04);
    
    /* Лайв-элементы на светлой теме (Красный сочный акцент) */
    --live-color: #ff2a51;
    --live-glow: rgba(255, 42, 81, 0.2);

    /* Тумблер: белый круг, темная рамка */
    --toggle-bg: #ffffff;
    --toggle-border: #0f172a;
    --toggle-circle: #0f172a;

    --ai-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
    --accent-color: #6366f1;    
}

body.dark-theme {
    /* --- КИБЕРСПОРТИВНАЯ ТЕМНАЯ ТЕМА (БЕЗ КРАСНОГО ЦВЕТА) --- */
    --bg-main: #07080a;         
    --bg-card: rgba(15, 18, 25, 0.9); 
    --bg-header: rgba(15, 18, 25, 0.85);
    --card-gradient: rgba(15, 18, 25, 0.98); 
    --border-color: rgba(38, 44, 57, 0.4);
    --text-bright: #ffffff;     
    --text-muted: #94a3b8;      
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    --hover-shadow: 0 15px 30px rgba(168, 85, 247, 0.15);

    /* Лайв-элементы на темной теме горят роскошным ИИ-фиолетом будущего */
    --live-color: #a855f7;
    --live-glow: rgba(168, 85, 247, 0.3);

    /* Тумблер: черный круг, белая рамка */
    --toggle-bg: #07080a;
    --toggle-border: #ffffff;
    --toggle-circle: #ffffff;
    
    --accent-color: #a855f7;
}

/* ==========================================================================
   2. БАЗОВЫЕ НАСТРОЙКИ СКОРОСТИ И ОТСЕЧЕНИЕ БАГОВ
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
    background-color: var(--bg-main);
    color: var(--text-muted);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    /* Оптимизация: анимируем строго фон и текст, размеры и тени не дергаются */
    transition: background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1), color 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

body.no-scroll {
    overflow: hidden !important;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Настройка чистых ссылок-оберток на карточках */
.main-news-card-link, .news-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}
/* ==========================================================================
   3. ШАПКА И ТУМБЛЕР (ЖЕЛЕЗНАЯ ЦЕНТРОВКА ЛОГОТИПА ПИКСЕЛЬ В ПИКСЕЛЬ)
   ========================================================================== */
.main-header {
    background-color: var(--bg-header);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Флекс-контейнер с относительным позиционированием для абсолютного центра */
.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    position: relative; 
}

/* ЛОГОТИП СИТЬ СТРОГО ПО ГЕОМЕТРИЧЕСКОМУ ЦЕНТРУ СТРАНИЦЫ НА ПК */
.logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); 
    z-index: 5;
    display: flex;
    align-items: center;
}

.logo a {
    color: var(--text-bright);
    font-size: 26px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.3s ease;
}

.logo span {
    background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899, #6366f1);
    background-size: 300% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
    animation: flowingGradient 4s linear infinite;
}

@keyframes flowingGradient {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* Тумблер темы слева на ПК */
.header-left-toggle {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
}

.theme-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.theme-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-bright);
    line-height: 1;
    transition: color 0.3s ease;
}

.theme-toggle {
    background-color: var(--toggle-bg);
    border: 2px solid var(--toggle-border);
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.theme-toggle:focus { outline: none; }

.theme-circle {
    width: 12px;
    height: 12px;
    background-color: var(--toggle-circle);
    border-radius: 50%;
    display: block;
    transition: background-color 0.3s ease;
}

/* Меню навигации справа на ПК */
.nav-menu {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
}

.nav-menu ul {
    display: flex;
    list-style: none;
    gap: 35px;
    align-items: center;
}

.nav-menu a {
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.2s ease;
}

.nav-menu a:hover { color: var(--accent-color); }

.menu-toggle { display: none; }

/* ==========================================================================
   4. ГЛАВНЫЙ СЕО БЛОК И ГЛЯНЦЕВАЯ HERO-КАРТОЧКА
   ========================================================================== */
.hero-seo-title {
    padding-top: 30px;
}

.main-title {
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 20px;
    text-transform: uppercase;
    color: var(--text-bright);
    border-left: 5px solid var(--accent-color);
    padding-left: 12px;
    letter-spacing: -0.5px;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.hero-section {
    padding: 15px 0;
}

.main-news-card {
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,0.01) 0%, var(--card-gradient) 100%), url('img/hero-main.webp') no-repeat center center / cover;
    padding: 100px 30px 35px 30px; 
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
    transition: border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.main-news-card-link:hover .main-news-card { 
    border-color: rgba(168, 85, 247, 0.4);
}

.news-badge {
    position: absolute;
    top: 25px;
    left: 25px;
    background: var(--ai-gradient);
    color: #ffffff;
    padding: 6px 16px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: 6px;
}

.news-title-hero {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-bright);
    line-height: 1.3;
    transition: color 0.3s ease;
}

/* ФИКС СЛИВАЮЩЕГОСЯ ТЕКСТА: При ховере заголовок горит чистым контрастным белым */
.main-news-card-link:hover .news-title-hero { 
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); 
}

.news-excerpt { 
    color: var(--text-muted); 
    margin-top: 10px; 
    max-width: 800px; 
    font-size: 14px; 
    transition: color 0.3s ease; 
}

.news-date { color: #94a3b8; font-size: 11px; margin-top: 12px; display: block; }
/* ==========================================================================
   5. ЛАЙВ-ВИДЖЕТ НЕЙРОСЕТЕЙ (ОПТИМИЗИРОВАННЫЙ, БЕЗ КРАСНОГО НА ТЕМНОЙ)
   ========================================================================== */
.top-live-section {
    margin-bottom: 30px;
}

.top-live-section .live-widget-box {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--card-shadow);
    transition: background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.live-widget-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.live-widget-header h2 {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--text-bright);
}

.live-pulse {
    width: 8px;
    height: 8px;
    background-color: var(--live-color);
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 0 var(--live-glow);
    animation: livePulseAnimation 1.6s infinite;
    transition: background-color 0.3s ease;
}

@keyframes livePulseAnimation {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 var(--live-glow); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(168, 85, 247, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 var(--live-glow); }
}

.live-news-wrapper {
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.live-news-wrapper.collapsed { max-height: 165px; }
.live-news-wrapper.expanded { max-height: 900px; }

.live-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 8px;
    border-bottom: 1px solid var(--border-color);
}

.live-item:last-child { border-bottom: none; }
.live-time { font-size: 11px; color: var(--live-color); font-weight: 700; white-space: nowrap; transition: color 0.3s ease; }
.live-text { font-size: 13px; color: var(--text-muted); line-height: 1.5; }

.live-expand-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--border-color);
    gap: 4px;
}

.live-expand-btn:hover { color: var(--accent-color); }
.arrow-icon { color: var(--live-color); transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), color 0.3s ease; }
.live-expand-btn.active .arrow-icon { transform: rotate(180deg); }

/* ==========================================================================
   6. СЕТКА КАТЕГОРИЙ И КИНЕМАТОГРАФИЧНЫЙ ФОРМАТ 16:9
   ========================================================================== */
.main-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 10px 0;
}

.section-title {
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    margin: 30px 0 15px 0;
    color: var(--text-bright);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 6px;
}

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

.news-card {
    background-color: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
    transition: border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.news-card-link:hover .news-card {
    border-color: rgba(168, 85, 247, 0.4);
    box-shadow: var(--hover-shadow);
}

.news-img {
    width: 100%;
    height: auto; 
    aspect-ratio: 16 / 9; 
    object-fit: cover;
    border-bottom: 1px solid var(--border-color);
}

body.dark-theme .news-img { background: linear-gradient(135deg, #10121a 0%, #07080a 100%); }

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

.card-body h3 { font-size: 15px; font-weight: 700; line-height: 1.4; margin-bottom: 10px; color: var(--text-bright); transition: color 0.3s ease; }
.news-card-link:hover h3 { color: var(--accent-color); }
.card-date { font-size: 11px; color: #94a3b8; }

/* ==========================================================================
   7. СЕО ПОДВАЛ (FOOTER)
   ========================================================================== */
.main-footer {
    background-color: var(--bg-card);
    border-top: 1px solid var(--border-color);
    padding: 35px 0;
    margin-top: 50px;
    font-size: 13px;
    color: var(--text-muted);
}

.footer-flex { display: flex; flex-direction: column; gap: 15px; }
.seo-text { border-top: 1px solid var(--border-color); padding-top: 15px; font-size: 11px; line-height: 1.7; text-align: justify; }

/* ==========================================================================
   8. ЖЕЛЕЗНЫЙ МОБИЛЬНЫЙ АДАПТИВ (ТУМБЛЕР СЛЕВА, ЛОГО ЦЕНТР, ГАМБУРГЕР СПРАВА)
   ========================================================================== */
@media (max-width: 1060px) {
    .header-flex {
        display: grid;
        grid-template-columns: 1fr auto 1fr; 
        align-items: center;
        height: 65px;
    }

    /* Логотип строго по центру мобильного экрана */
    .logo {
        grid-column: 2;
        position: static;
        transform: none;
        justify-self: center;
    }
    
    .logo a { font-size: 20px; }

    /* Тумблер улетает влево */
    .header-left-toggle {
        grid-column: 1;
        justify-self: start;
    }

    .theme-label { display: none !important; } 

    /* Гамбургер встает в правый край */
    .menu-toggle {
        display: flex !important;
        grid-column: 3;
        justify-self: end;
        background: transparent;
        border: none;
        flex-direction: column;
        justify-content: space-between;
        width: 22px;
        height: 15px;
        cursor: pointer;
        outline: none;
        -webkit-tap-highlight-color: transparent;
    }
    
    .menu-toggle span {
        width: 100%;
        height: 2px;
        background-color: var(--text-bright);
        border-radius: 4px;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    /* Полноэкранная навигация */
    .nav-menu {
        position: fixed;
        top: 65px;
        right: -100%;
        width: 100%;
        height: calc(100vh - 65px);
        background-color: var(--bg-card);
        padding: 50px 30px;
        box-shadow: 0 15px 35px rgba(0,0,0,0.1);
        transform: translate3d(0, 0, 0);
        transition: right 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        border-top: 1px solid var(--border-color);
        z-index: 99;
    }

    .nav-menu.active { right: 0; }
    .nav-menu ul { flex-direction: column; align-items: center; gap: 35px; width: 100%; }
    .nav-menu a { font-size: 18px; font-weight: 700; text-transform: uppercase; }

    .menu-toggle.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .menu-toggle.active span:nth-child(2) { opacity: 0; }
    .menu-toggle.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

    .main-news-card {
        padding: 130px 20px 25px 20px;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background-color: var(--bg-card);
    }
    
    .main-header { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: var(--bg-card); } 
    .category-grid { grid-template-columns: 1fr; gap: 15px; }
    .main-title { font-size: 22px; }
    .news-title-hero { font-size: 18px; }
    .live-news-wrapper.collapsed { max-height: 160px; }
}
/* ==========================================================================
   💎 PREMIUM ОФОРМЛЕНИЕ СТРАНИЦЫ СТАТЬИ (УБИРАЕМ УЗКИЙ КРИНЖ)
   ========================================================================= */
/* Расширяем контейнер статьи до дорогого журнального формата */
main.container[style*="max-width: 800px"] {
    max-width: 1000px !important;
    padding: 50px 20px !important;
}

/* Наваливаем хай-тек стиля на заголовки внутри статьи */
.article-content h2 {
    font-size: 24px;
    font-weight: 800;
    margin: 45px 0 20px 0;
    color: var(--text-bright);
    border-left: 5px solid var(--accent-color);
    padding-left: 15px;
    transition: color 0.3s ease, border-color 0.3s ease;
}

/* Освежаем абзацы текста, чтобы они дышали */
.article-content p {
    margin-bottom: 22px;
    font-size: 16px;
    color: var(--text-muted);
    transition: color 0.3s ease;
}

/* Улучшаем плашки плюсов и минусов, чтобы они не были зажатыми */
.pros-cons-grid {
    gap: 25px !important;
    margin: 40px 0 !important;
}

.pros-cons-grid > div {
    padding: 25px !important;
    transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

/* Тюнинг реферальной кнопки, чтобы она выглядела как кнопка за 1000$ */
.article-content a[href*="http"] {
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease !important;
}

.article-content a[href*="http"]:hover {
    transform: scale(1.04) translateY(-2px) !important;
    box-shadow: var(--hover-shadow) !important;
}

/* Адаптив под мобилки: на смартфонах блоки встанут в один ряд */
@media (max-width: 768px) {
    main.container[style*="max-width: 800px"] {
        padding: 30px 15px !important;
    }
    .article-content h2 {
        font-size: 20px;
        margin: 35px 0 15px 0;
    }
}
/* Плавный переход для нового СЕО-блока на главной */
.seo-longread-section h2, 
.seo-longread-section h3, 
.seo-longread-section p, 
.seo-longread-section li {
    transition: color 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
/* ==========================================================================
   🎯 ФИКС СЕО-СКРОЛЛА: ЗАГОЛОВКИ БОЛЬШЕ НЕ ЗАЛЕТАЮТ ПОД ШАПКУ
   ========================================================================== */
.section-title {
    /* Даем жесткий запас по высоте с учетом нашей шапки 70px + 20px воздуха */
    scroll-margin-top: 90px; 
}

/* Наваливаем плавности самому скроллу страницы, чтобы экран не прыгал как бешеный */
html {
    scroll-behavior: smooth;
}
/* ==========================================================================
   📂 УЛЬТРА-ГЛЯНЦЕВОЕ ВЫПАДАЮЩЕЕ МЕНЮ (ПОЯВЛЯЕТСЯ СТРОГО ПО ОТДЕЛЬНОСТИ)
   ========================================================================== */
/* Специфический маркер для стрелочки рядом со словом */
.drop-arrow {
    font-size: 9px;
    margin-left: 2px;
    display: inline-block;
    transition: transform 0.2s ease;
}

/* Делаем родительский элемент относительным, чтобы под ним ровно вставал блок */
.nav-menu ul li.dropdown {
    position: relative;
    padding: 10px 0; /* Расширяем зону невидимого моста, чтоб меню не закрывалось */
}

/* Оформляем внутренний выкатной блок ссылок */
.nav-menu .dropdown-content {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px); /* Мягкое смещение вниз по дефолту */
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    min-width: 280px;
    padding: 12px;
    box-shadow: var(--card-shadow);
    display: block;
    
    /* Скрываем наглухо до наведения мышки */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    
    /* Врубаем аппаратное ускорение и изолированный транзишн */
    will-change: opacity, transform;
    transition: opacity 0.25s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.25s cubic-bezier(0.25, 1, 0.5, 1),
                background-color 0.3s ease,
                border-color 0.3s ease;
}

/* Сетки внутри выпадающего списка перестраиваем в вертикальный ряд */
.nav-menu .dropdown-content li {
    width: 100%;
    margin: 0;
    padding: 0;
}

.nav-menu .dropdown-content a {
    display: block;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-transform: none; /* Убираем капс внутри выкатного меню, чтоб читалось дорого */
    letter-spacing: 0;
    color: var(--text-muted);
    transition: background-color 0.2s ease, color 0.2s ease;
}
/* МЕХАНИКА АКТИВАЦИИ: Появляется строго та плашка, на которую навели мышку */
.nav-menu ul li.dropdown:hover .dropdown-content {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0); /* Плавно всплывает вверх на свое место */
}

/* При наведении переворачиваем стрелочку у конкретного пункта */
.nav-menu ul li.dropdown:hover .drop-arrow {
    transform: rotate(180deg);
    color: var(--accent-color);
}

/* Дорогие ховеры для ссылок внутри глянцевой плашки */
.nav-menu .dropdown-content a:hover {
    background-color: rgba(99, 102, 241, 0.05);
    color: var(--accent-color);
}

body.dark-theme .nav-menu .dropdown-content a:hover {
    background-color: rgba(168, 85, 247, 0.1);
}

/* ==========================================================================
   📱 АДАПТИВ ПОД МОБИЛКИ: ОТКЛЮЧАЕМ ХОВЕРЫ ДЛЯ СМАРТФОНОВ
   ========================================================================== */
@media (max-width: 1060px) {
    /* На мобилках выстраиваем списки просто друг за другом внутри гамбургера */
    .nav-menu .dropdown-content {
        position: static;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        box-shadow: none;
        border: none;
        background: transparent;
        padding-left: 20px;
        padding-top: 5px;
        padding-bottom: 0;
        min-width: auto;
        display: block;
    }
    
    .nav-menu ul li.dropdown {
        width: 100%;
        text-align: center;
        padding: 5px 0;
    }
    
    .nav-menu .dropdown-content a {
        font-size: 14px;
        padding: 6px 0;
        color: var(--text-muted);
    }
    
    .drop-arrow {
        display: none; /* Прячем стрелочку на мобилках, там меню раскрыто сразу */
    }
}
/* ==========================================================================
   🛠 ФИКС ГОРИЗОНТАЛЬНОГО СКРОЛЛА ДЛЯ ВНУТРЕННИХ СТАТЕЙ (ВЫЖИГАЕМ ЛАГИ)
   ========================================================================== */
/* Жестко запрещаем внутреннему контенту статьи вылетать за рамки смартфона */
.article-content {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden; /* Обрезаем любые невидимые вылеты */
}

/* Перестраиваем сетку плюсов и минусов на мобилках в один ровный вертикальный ряд */
@media (max-width: 1060px) {
    /* Находим наш блок сеток внутри статей */
    .pros-cons-grid {
        grid-template-columns: 1fr !important; /* Было 2 колонки, стал 1 вертикальный ряд */
        gap: 15px !important;
        margin: 25px 0 !important;
        width: 100% !important;
    }

    /* Исправляем отступы самого контейнера на смартфонах, чтоб убрать микро-люфт экрана */
    main.container[style*="max-width: 1000px"],
    main.container[style*="max-width: 800px"] {
        padding: 25px 15px !important;
        width: 100% !important;
        overflow-x: hidden;
    }
}
/* ==========================================================================
   🎯 ФИНАЛЬНЫЙ ТЕХЛИД-ФИКС: ВЫРАВНИВАЕМ ПОДКАТЕГОРИИ НА МОБИЛКАХ ПО ЦЕНТРУ
   ========================================================================== */
@media (max-width: 1060px) {
    /* Полностью сбрасываем ПК-центрирование, которое ломало мобильную верстку */
    .nav-menu .dropdown-content {
        position: static !important;
        transform: none !important; /* Убираем сдвиг влево наглухо */
        left: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 0 0 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important; /* Делаем аккуратный отступ между ссылками */
    }

    /* Выравниваем пункты меню строго по центру под своими заголовками */
    .nav-menu .dropdown-content li {
        width: 100% !important;
        text-align: center !important;
    }

    .nav-menu .dropdown-content a {
        display: inline-block !important;
        font-size: 14px !important;
        padding: 5px 10px !important;
        color: var(--text-muted) !important;
        text-align: center !important;
    }
}
/* ==========================================================================
   📦 PREMIUM ГЛЯНЦЕВОЕ ВСПЛЫВАЮЩЕЕ ОКНО-ЗАГЛУШКА (MODAL WINDOW)
   ========================================================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.3s;
}

body.dark-theme .modal-overlay {
    background-color: rgba(0, 0, 0, 0.7);
}

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

.modal-box {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 35px 30px;
    border-radius: 20px;
    max-width: 450px;
    width: 90%;
    text-align: center;
    box-shadow: var(--card-shadow);
    transform: translateY(20px) scale(0.95);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-overlay.active .modal-box {
    transform: translateY(0) scale(1);
}

.modal-icon {
    font-size: 40px;
    margin-bottom: 15px;
    animation: rotateGear 4s linear infinite;
    display: inline-block;
}

@keyframes rotateGear {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.modal-box h3 {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-bright);
    margin-bottom: 12px;
    text-transform: uppercase;
}

.modal-box p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 25px;
}

#modal-close-btn {
    background: var(--ai-gradient);
    color: #ffffff;
    border: none;
    padding: 12px 30px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 10px;
    cursor: pointer;
    width: 100%;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#modal-close-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.3);
}
/* ==========================================================================
   ❓ ШЕЛКОВЫЕ СТИЛИ ДЛЯ ИНТЕЛЛЕКТУАЛЬНОГО БЛОКА FAQ
   ========================================================================== */
.faq-item {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    overflow: hidden;
    width: 100%;
    transition: border-color 0.3s ease;
}

.faq-item:hover { border-color: rgba(99, 102, 241, 0.3); }
body.dark-theme .faq-item:hover { border-color: rgba(168, 85, 247, 0.4); }

.faq-trigger {
    width: 100%;
    background: transparent;
    border: none;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: left;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.faq-trigger span {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-bright);
    padding-right: 15px;
    transition: color 0.2s ease;
}

.faq-trigger:hover span { color: var(--accent-color); }

.faq-arrow {
    font-size: 12px;
    color: var(--accent-color);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    background-color: rgba(0,0,0,0.005);
}

.faq-content p {
    padding: 0 20px 20px 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-muted);
}

/* Стили для активного состояния (поворот стрелки) */
.faq-item.active .faq-arrow {
    transform: rotate(180deg);
}
/* ==========================================================================
   🚀 ОБНОВЛЕННАЯ ПАРЯЩАЯ КНОПКА «НАВЕРХ» (ИДЕАЛЬНЫЙ ЦЕНТР И ПРАВЫЙ ФЛАНГ)
   ========================================================================== */
.scroll-top-btn {
    position: fixed;
    /* Спускаем кнопку ровно на 60% от верха экрана (чуть ниже середины) */
    top: 60%; 
    right: 30px;
    width: 46px;
    height: 46px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-bright);
    font-size: 14px;
    font-weight: bold;
    border-radius: 50%;
    cursor: pointer;
    
    /* ЖЕЛЕЗНАЯ ЦЕНТРОВКА ТРЕУГОЛЬНИКА ПИКСЕЛЬ В ПИКСЕЛЬ */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important; /* Выжигаем внутренние отступы шрифта, чтоб не косило */
    line-height: 1 !important;
    
    box-shadow: var(--card-shadow);
    z-index: 98;
    
    /* Скрываем кнопку на старте страницы */
    opacity: 0;
    visibility: hidden;
    transform: translateX(20px) scale(0.8); /* Выплывает сбоку с легким увеличением */
    
    /* Аппаратное ускорение на 120 FPS */
    will-change: opacity, transform;
    transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
                background-color 0.3s ease, 
                border-color 0.3s ease, 
                color 0.3s ease;
}

/* Эффект появления от JS */
.scroll-top-btn.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) scale(1);
}

/* Дорогой пружинящий ховер */
.scroll-top-btn:hover {
    color: #ffffff;
    background: var(--ai-gradient);
    border-color: transparent;
    transform: scale(1.1); /* Слегка увеличивается при наведении */
    box-shadow: var(--hover-shadow);
}

/* Идеальный мобильный адаптив, чтоб не перекрывала контент на смартфонах */
@media (max-width: 768px) {
    .scroll-top-btn {
        top: 65%; /* На мобилках спускаем чуть ниже под палец */
        right: 15px; /* Прижимаем ближе к краю экрана */
        width: 40px;
        height: 40px;
        font-size: 12px;
    }
}
/* Ровное центрирование блока контактов */
.header-contacts-box {
    margin-left: 40px; 
    display: flex !important;
    align-items: center !important;
}

/* Идеальная посадка конверта строго по визуальному центру */
.header-contacts-box a {
    display: flex !important;
    align-items: center !important; 
    justify-content: center !important;
    gap: 7px !important;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1 !important; 
    transition: color 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ТОЧЕЧНЫЙ УДАР: Сдвигаем только саму иконку на 1.5 пикселя вниз для оптического центра */
.header-contacts-box a svg {
    transform: translateY(1px) !important;
}

.header-contacts-box a:hover {
    color: var(--accent-color);
}
/* ==========================================================================
   📞 premium ВЫРАВНИВАНИЕ КОНТАКТОВ ДЛЯ ПК И МОБИЛЬНОГО БУРГЕРА
   ========================================================================== */
/* Базовый стиль блока на ПК */
.header-contacts-box {
    margin-left: 40px; /* Твой сдвиг вправо от тумблера */
    display: flex !important;
    align-items: center !important;
}

.header-contacts-box a {
    display: flex !important;
    align-items: center !important; 
    justify-content: center !important;
    gap: 7px !important;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1 !important; 
    transition: color 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Оптический сдвиг иконки-конверта вниз на ПК */
.header-contacts-box a svg {
    transform: translateY(1px) !important;
}

.header-contacts-box a:hover {
    color: var(--accent-color);
}

/* ==========================================================================
   📱 ЖЕСТКИЙ СЕО-ПЕРЕХОД ДЛЯ СМАРТФОНОВ И СВЕРНУТЫХ ОКЕН (1060px)
   ========================================================================== */
@media (max-width: 1060px) {
    /* 1. Намертво вырезаем оригинальный блок из верхней узкой шапки на мобилке */
    .header-header .header-contacts-box,
    .main-header .header-contacts-box {
        display: none !important;
    }

    /* 2. Превращаем этот же блок на мобилках в полноценный, крупный пункт меню,
       который спускается в самый низ вылетающей шторки бургера! */
    .nav-menu .header-contacts-box {
        display: flex !important;
        width: 100% !important;
        margin: 25px 0 0 0 !important; /* Делаем сочный благородный отступ сверху */
        justify-content: center !important;
        border-top: 1px solid var(--border-color); /* Аккуратная глянцевая линия-разделитель */
        padding-top: 20px !important;
    }

    .nav-menu .header-contacts-box a {
        font-size: 18px !important; /* Размер один в один как у Трендов и Видео */
        font-weight: 700 !important;
        text-transform: uppercase !important;
        color: var(--text-bright) !important;
        gap: 10px !important;
    }

    /* На мобилке сбрасываем ПК-сдвиг конверта, чтоб иконка стояла идеально ровно */
    .nav-menu .header-contacts-box a svg {
        transform: none !important;
        width: 20px !important; /* Делаем иконку чуть крупнее под размер мобильного шрифта */
        height: 20px !important;
    }
}
/* ==========================================================================
   ✉️ ГРАМОТНОЕ ОФОРМЛЕНИЕ КОНТАКТОВ В ШАПКЕ И БУРГЕРЕ
   ========================================================================== */
/* По дефолту скрываем бургерный пункт контактов на ПК-версии */
.burger-contacts {
    display: none !important;
}

/* На ПК-версии шапки задаем стили нашему блоку, который ты скинул на скрине */
.header-contacts-box {
    margin-left: 40px; 
    display: flex !important;
    align-items: center !important;
}
.header-contacts-box a svg {
    transform: translateY(1px) !important; /* Оптический сдвиг иконки вниз */
}

/* ==========================================================================
   📱 НЕУБИВАЕМЫЙ ЦЕНТРИРОВАННЫЙ МОБИЛЬНЫЙ БУРГЕР ДЛЯ AIQUARK (ФИНАЛ)
   ========================================================================== */
/* По дефолту скрываем бургерный пункт контактов на ПК-версии */
.burger-contacts-final {
    display: none !important;
}

/* На ПК-версии шапки держим твой ровный блок с SVG-конвертом */
.header-contacts-box {
    margin-left: 40px; 
    display: flex !important;
    align-items: center !important;
}
.header-contacts-box a svg {
    transform: translateY(1px) !important;
}

@media (max-width: 1060px) {
    /* 1. Намертво вырезаем оригинальный блок контактов из верхней узкой шапки на мобилке */
    .header-header .header-contacts-box,
    .main-header .header-contacts-box {
        display: none !important;
    }
    
    /* Настраиваем плотность и скролл шторки меню */
    .main-header .nav-menu {
        position: fixed !important;
        top: 65px !important;
        right: -100% !important;
        width: 100% !important;
        height: calc(100vh - 65px) !important;
        background-color: var(--bg-card) !important;
        padding: 25px 20px 30px 20px !important; /* Ужали верхний отступ, чтобы поднять меню к шапке */
        box-shadow: 0 15px 35px rgba(0,0,0,0.2) !important;
        transform: translate3d(0, 0, 0) !important;
        transition: right 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
        z-index: 99 !important;
        overflow-y: auto !important;
    }

    .main-header .nav-menu.active {
        right: 0 !important;
    }

    /* Главная вертикальная ось списка — выравниваем ВСЁ строго по центру */
    .nav-menu ul {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important; /* Выжигаем маркеры списков */
    }

    /* Компактный вертикальный шаг между блоками 12px */
    .nav-menu ul li {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 0 12px 0 !important; /* Меню красиво и плотно сядет кверху */
        padding: 0 !important;
        list-style-type: none !important;
    }

    /* КРУПНЫЕ заголовки категорий (ВИДЕО, ГРАФИКА, ТЕКСТ) */
    .nav-menu ul li.dropdown > a {
        font-size: 19px !important; /* Наш сочный крупный размер */
        font-weight: 800 !important;
        text-transform: uppercase !important;
        color: var(--text-bright) !important;
        letter-spacing: 0.5px !important;
        display: inline-block !important;
        margin-bottom: 3px !important;
    }

    /* Блоки подкатегорий (обзоры нейросетей) садятся кучно */
    .nav-menu .dropdown-content {
        position: static !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 2px 0 4px 0 !important;
        display: block !important;
        text-align: center !important;
    }

    .nav-menu .dropdown-content li {
        margin-bottom: 4px !important;
    }

    .nav-menu .dropdown-content a {
        display: inline-block !important;
        font-size: 15px !important; /* Крупный читаемый размер подкатегорий */
        font-weight: 600 !important;
        color: var(--text-muted) !important;
        text-transform: none !important;
        padding: 2px 0 !important;
    }

    .drop-arrow {
        display: none !important;
    }

    /* 🔥 КРУПНЫЕ ТРЕНДЫ С ОГОНЬКОМ ПО ЦЕНТРУ */
    .nav-menu ul li > a[href*="trends"] {
        font-size: 19px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        color: var(--text-bright) !important;
        display: inline-block !important;
        margin-top: 50px !important;
        margin-right: 12px !important;
    }
}
/* ==========================================================================
   ⚙️ ТЕХЛИД-ФИКС: РАЗДЕЛЕНИЕ КОНТАКТОВ НА ПК И МОБИЛЬНЫЙ БУРГЕР
   ========================================================================== */
/* 1. На ПК наглухо скрываем дублирующий пункт из главного меню */
.mobile-only-contacts {
    display: none !important;
}

/* 2. Настраиваем поведение на смартфонах и при сжатии окна (1060px) */
@media (max-width: 1060px) {
    /* Скрываем блок с SVG-конвертом, который у нас на ПК стоял у темы, чтобы не жал логотип */
    .header-contacts-box {
        display: none !important;
    }

    /* Проявляем и идеально центрируем наш пункт внутри бургер-меню */
    .nav-menu ul li.mobile-only-contacts {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        list-style: none !important; /* Убираем точку-маркер раз и навсегда */
        list-style-type: none !important;
        margin-top: 15px !important; /* Делаем аккуратный отступ под Трендами */
    }

    /* Делаем шрифт крупным и сочным, один в один как у Трендов на мобилке */
    .nav-menu ul li.mobile-only-contacts a {
        font-size: 19px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        color: var(--text-bright) !important;
        display: inline-block !important;
        margin-top: 70px !important;
    }
}
/* ==========================================================================
   🎯 ТЕХЛИД-ФИКС: ЗАЩИТА ОТ ОБРЕЗКИ ДЛИННЫХ СЛОВ НА СМАРТФОНАХ
   ========================================================================== */
@media (max-width: 1060px) {
    /* Автоматический перенос длинных слов по слогам, чтобы ничего не резалось */
    main h1, .article-content h1, .article-content h2 {
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        word-break: keep-all !important;
        hyphens: auto !important; /* Включает аккуратный перенос по слогам */
    }
}

@media (max-width: 480px) {
    /* На совсем маленьких телефонах чуть-чуть уменьшаем размер главного H1, чтоб смотрелось дорого */
    main h1 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }
}