/* 
====================================================================================================
PROJECT: INFINITY FLOW COMPUTERS (IFC)
COMPONENT: STYLE.CSS - STEP 1 OF 10
MODULE: CORE FOUNDATION & DESIGN TOKENS
VERSION: 4.0.0 (PRODUCTION)
AUTHOR: IFC ENGINEERING TEAM
DATE: 2026-01-30

DESCRIPTION:
Этот файл содержит фундаментальные настройки дизайн-системы.
Мы используем подход "Fluid Design", где все размеры (шрифты, отступы)
рассчитываются математически через функции clamp(), что позволяет
избежать резких скачков (breakpoints) и обеспечивает плавную адаптацию
от iPhone SE до 4K мониторов.

TABLE OF CONTENTS:
1.0 - ROOT VARIABLES (DESIGN TOKENS)
2.0 - THEME ENGINE (DARK & LIGHT MODES)
3.0 - GLOBAL RESET & NORMALIZATION
4.0 - TYPOGRAPHY ENGINE
5.0 - SCROLLBAR & SELECTION STYLES
6.0 - LENIS SCROLL INTEGRATION
====================================================================================================
*/

/* 
==========================================================================
1.0 ROOT VARIABLES (DESIGN TOKENS)
==========================================================================
Здесь определены все "магические числа" дизайна.
Изменение этих переменных автоматически обновит весь сайт.
*/

:root {
    /* 
    ----------------------------------------------------------------------
    1.1 FLUID TYPOGRAPHY SCALE
    Formula: clamp(MIN_SIZE, PREFERRED_VAL + SCALAR, MAX_SIZE)
    ----------------------------------------------------------------------
    */

    /* Микро-текст (Legal, Badges) */
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);

    /* Основной текст (Body) */
    --text-body: clamp(1rem, 0.92rem + 0.4vw, 1.25rem);

    /* Увеличенный текст (Intro, Subtitles) */
    --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);

    /* Заголовки уровня H3 (Card Titles) */
    --text-h3: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);

    /* Заголовки уровня H2 (Section Titles) */
    --text-h2: clamp(2rem, 1.5rem + 2.5vw, 4rem);

    /* Заголовки уровня H1 (Hero Title) */
    --text-h1: clamp(2.5rem, 2rem + 4vw, 6rem);

    /* Дисплейные заголовки (Massive Impact) */
    --text-display: clamp(3.5rem, 8vw, 11rem);

    /* 
    ----------------------------------------------------------------------
    1.2 FLUID SPACING SYSTEM
    Единая система отступов для margin/padding/gap.
    ----------------------------------------------------------------------
    */

    /* Минимальный отступ (4px - 8px) */
    --space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);

    /* Малый отступ (8px - 16px) */
    --space-sm: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);

    /* Средний отступ (16px - 32px) */
    --space-md: clamp(1rem, 0.8rem + 1vw, 2rem);

    /* Большой отступ (32px - 80px) */
    --space-lg: clamp(2rem, 1.5rem + 2.5vw, 5rem);

    /* Секционный отступ (64px - 160px) */
    --space-xl: clamp(4rem, 3rem + 5vw, 10rem);

    /* Глобальная ширина контейнера */
    --container-width: min(92vw, 1600px);

    /* 
    ----------------------------------------------------------------------
    1.3 BRAND PALETTE (STATIC COLORS)
    Цвета, которые не меняются при смене темы.
    ----------------------------------------------------------------------
    */
    --color-black: #000000;
    --color-white: #ffffff;

    /* Акцентные цвета (Brand Identity) */
    --accent-purple: #a855f7;
    /* Purple-500 */
    --accent-cyan: #06b6d4;
    /* Cyan-500 */
    --accent-yellow: #eab308;
    /* Yellow-500 */
    --accent-pink: #ec4899;
    /* Pink-500 */
    --accent-green: #10b981;
    /* Emerald-500 */

    /* Свечение (Glow Effects) - RGBA версии для теней */
    --accent-purple-glow: rgba(168, 85, 247, 0.5);
    --accent-cyan-glow: rgba(6, 182, 212, 0.5);
    --accent-yellow-glow: rgba(234, 179, 8, 0.5);
    --accent-pink-glow: rgba(236, 72, 153, 0.5);
    --accent-green-glow: rgba(16, 185, 129, 0.5);

    /* Эффекты стекла */
    --glass-shine: rgba(255, 255, 255, 0.1);

    /* 
    ----------------------------------------------------------------------
    1.4 ANIMATION CURVES (BEZIER)
    Физика движения интерфейса.
    ----------------------------------------------------------------------
    */
    /* Плавная, естественная анимация */
    --ease-fluid: cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* Пружинистая анимация (для кнопок и ховеров) */
    --ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);

    /* Резкий старт, плавный финиш (для шторок и модалок) */
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);

    /* 
    ----------------------------------------------------------------------
    1.5 Z-INDEX LAYERS (STACKING CONTEXT)
    Управление слоями для предотвращения конфликтов наложения.
    ----------------------------------------------------------------------
    */
    --z-back: -1;
    /* Фоновые элементы, блобы */
    --z-base: 1;
    /* Стандартный контент */
    --z-sticky: 40;
    /* Липкие элементы внутри секций */
    --z-nav: 50;
    /* Навигационная капсула */
    --z-modal: 60;
    /* Модальные окна */
    --z-overlay: 70;
    /* Затемнение фона (Backdrop) */
    --z-loader: 100;
    /* Экран загрузки */
    --z-cursor: 9999;
    /* Кастомный курсор или шторка перехода */
}

/* 
==========================================================================
2.0 THEME ENGINE (OLED DARK vs PAPER LIGHT)
==========================================================================
Мы используем CSS Variables для горячей смены тем без перезагрузки.
*/

/* 
--------------------------------------------------------------------------
2.1 DARK MODE (DEFAULT / OLED OPTIMIZED)
Оптимизировано для глубокого черного цвета, экономит энергию на OLED.
--------------------------------------------------------------------------
*/
body {
    /* Фоны */
    --bg-core: #000000;
    --bg-secondary: #0a0a0a;
    --bg-tertiary: #111111;

    /* Поверхности (Стекло) */
    --bg-surface: rgba(255, 255, 255, 0.03);
    --bg-surface-hover: rgba(255, 255, 255, 0.08);

    /* Текст */
    --text-main: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.6);
    --text-dim: rgba(255, 255, 255, 0.4);
    --text-inverse: #000000;

    /* Границы */
    --border-dim: rgba(255, 255, 255, 0.08);
    --border-medium: rgba(255, 255, 255, 0.15);
    --border-light: rgba(255, 255, 255, 0.25);

    /* Эффекты */
    --glass-blur: blur(20px);
    --shadow-soft: 0 10px 40px -10px rgba(0, 0, 0, 0.8);
    --shadow-hard: 0 20px 50px -12px rgba(0, 0, 0, 1);

    /* Утилиты */
    --logo-filter: brightness(0) invert(1);
    /* Белый логотип */
    --map-filter: grayscale(100%) invert(92%) contrast(83%);
    /* Темная карта */
}

/* 
--------------------------------------------------------------------------
2.2 LIGHT MODE (PAPER / CLEAN)
Активируется добавлением класса .light-mode на body.
--------------------------------------------------------------------------
*/
body.light-mode {
    /* Фоны */
    --bg-core: #ffffff;
    --bg-secondary: #f3f4f6;
    /* Gray-100 */
    --bg-tertiary: #e5e7eb;
    /* Gray-200 */

    --bg-surface: #ffffff;
    --bg-surface-hover: #f9fafb;

    /* Текст (ДЕЛАЕМ ТЕМНЕЕ) */
    --text-main: #111827;
    /* Gray-900 (Почти черный) */
    --text-muted: #4b5563;
    /* Gray-600 (Темно-серый) */
    --text-dim: #6b7280;
    /* Gray-500 (Средне-серый, читаемый) */
    --text-inverse: #ffffff;

    /* Границы (ДЕЛАЕМ ЧЕТЧЕ) */
    --border-dim: rgba(0, 0, 0, 0.1);
    /* 10% черного */
    --border-medium: rgba(0, 0, 0, 0.15);
    --border-light: rgba(0, 0, 0, 0.2);

    /* Эффекты */
    --glass-blur: blur(20px);
    --shadow-soft: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
    --shadow-hard: 0 20px 40px -12px rgba(0, 0, 0, 0.1);

    /* Утилиты */
    --logo-filter: brightness(0);
    /* Черный логотип */
    --map-filter: grayscale(100%) invert(0%) contrast(100%);
    /* Светлая карта */
}

/* 
==========================================================================
3.0 GLOBAL RESET & NORMALIZATION
==========================================================================
Сброс браузерных стилей для кроссбраузерной совместимости.
*/

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* Аппаратное ускорение для плавного рендеринга шрифтов */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Предотвращение случайного выделения на мобильных */
    -webkit-tap-highlight-color: transparent;
}

html {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* Базовый размер шрифта (влияет на rem) */
    font-size: 100%;
    /* Плавный скролл (как фолбек, если JS отключен) */
    scroll-behavior: smooth;
    height: 100%;
}

body {
    background-color: var(--bg-core);
    color: var(--text-main);

    /* Жидкая высота строки */
    line-height: 1.5;

    /* Предотвращение горизонтального скролла */
    overflow-x: hidden;

    /* Плавный переход темы */
    transition: background-color 0.6s var(--ease-fluid), color 0.6s var(--ease-fluid);

    width: 100%;
    /* Dynamic Viewport Height (Фикс для мобильных браузеров с адресной строкой) */
    min-height: 100dvh;

    /* Оптимизация рендеринга текста */
    text-rendering: optimizeLegibility;
}

/* Сброс списков */
ul,
ol {
    list-style: none;
}

/* Сброс ссылок */
a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

/* Сброс кнопок */
button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
}

/* Сброс изображений */
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    display: block;
    max-width: 100%;
}

/* FIX FOR IPHONE SCROLL JUMPING */
body {
    height: auto !important;
    min-height: 100%;
    /* По умолчанию (десктоп) оставляем clip или hidden для Lenis */
    overflow-y: clip;
}

/* ВАЖНО: Разрешаем скролл на тач-устройствах */
@media (pointer: coarse) {

    html,
    body {
        overflow-y: auto !important;
        /* Включаем нативный скролл */
        -webkit-overflow-scrolling: touch;
        /* Инерция для iOS */
    }
}

/* Если Lenis повесил свой класс, убеждаемся, что всё разблокировано */
html.lenis,
html.lenis body {
    height: auto !important;
}

/* 
==========================================================================
4.0 TYPOGRAPHY ENGINE
==========================================================================
Настройка заголовков и текстовых утилит.
*/

/* 
--------------------------------------------------------------------------
4.1 БАЗОВЫЕ ЗАГОЛОВКИ
--------------------------------------------------------------------------
*/
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-main);
    /* Балансировка текста для предотвращения "висячих" слов */
    text-wrap: balance;
}

h1,
.h1 {
    font-size: var(--text-h1);
    letter-spacing: -0.03em;
    font-weight: 800;
}

h2,
.h2 {
    font-size: var(--text-h2);
    letter-spacing: -0.02em;
}

h3,
.h3 {
    font-size: var(--text-h3);
    letter-spacing: -0.01em;
    font-weight: 600;
}

/* 
--------------------------------------------------------------------------
4.2 ТЕХНИЧЕСКАЯ ТИПОГРАФИКА (MONOSPACE)
Используется для бейджей, логов и технических данных.
--------------------------------------------------------------------------
*/
.font-mono {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-variant-ligatures: none;
    letter-spacing: 0.05em;
    /* Чуть шире для читаемости */
}

/* 
--------------------------------------------------------------------------
4.3 ТЕКСТОВЫЕ УТИЛИТЫ
--------------------------------------------------------------------------
*/

/* Гигантский текст (Hero Section) */
.text-display {
    font-size: var(--text-display);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.04em;
    text-transform: uppercase;
}

/* Основной текст (Large) */
.text-body-lg {
    font-size: var(--text-lg);
    line-height: 1.6;
    color: var(--text-muted);
}

/* Основной текст (Small) */
.text-body-sm {
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--text-dim);
}

/* 
--------------------------------------------------------------------------
4.4 ТЕКСТОВЫЕ ГРАДИЕНТЫ
Работают только если браузер поддерживает background-clip: text
--------------------------------------------------------------------------
*/
.text-gradient-purple {
    background: linear-gradient(135deg, #ffffff 0%, var(--accent-purple) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-cyan {
    background: linear-gradient(135deg, #ffffff 0%, var(--accent-cyan) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-gold {
    background: linear-gradient(135deg, #ffffff 0%, var(--accent-yellow) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Эффект "Срезанного" текста (для Hero) */
.clip-text-image {
    background-image: linear-gradient(to bottom, var(--text-main) 50%, rgba(255, 255, 255, 0.2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Override для светлой темы */
body.light-mode .clip-text-image {
    background-image: linear-gradient(to bottom, var(--color-black) 30%, rgba(0, 0, 0, 0.4) 100%);
}

/* 
==========================================================================
5.0 SCROLLBAR & SELECTION STYLES
==========================================================================
Кастомизация системных элементов интерфейса.
*/

/* Цвет выделения текста */
::selection {
    background: rgba(168, 85, 247, 0.3);
    /* Purple tint */
    color: var(--text-main);
}

/* Webkit Scrollbar (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: clamp(6px, 0.5vw, 12px);
}

::-webkit-scrollbar-track {
    background: var(--bg-core);
}

::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 100vw;
    border: 2px solid var(--bg-core);
    /* Создает отступ от края */
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Firefox Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-light) var(--bg-core);
}

/* 
==========================================================================
6.0 LENIS SCROLL INTEGRATION
==========================================================================
Обязательные стили для библиотеки плавного скролла Lenis.
Без этих стилей скролл может "дергаться" или не работать.
*/

html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
    /* Улучшает производительность при скролле над картами */
}

/* 
==========================================================================
END OF STEP 1
==========================================================================
*/

/* 
====================================================================================================
PROJECT: INFINITY FLOW COMPUTERS (IFC)
COMPONENT: STYLE.CSS - STEP 2 OF 10
MODULE: VISUAL ENGINE & GLOBAL UTILITIES
VERSION: 4.0.0 (PRODUCTION)
====================================================================================================
*/

/* 
==========================================================================
7.0 GLASSMORPHISM ENGINE (LIQUID GLASS)
==========================================================================
Набор классов для создания эффекта матового стекла.
Используется в карточках, навигации и модальных окнах.
*/

/* 
--------------------------------------------------------------------------
7.1 BASE GLASS PANEL
Стандартная панель: легкое размытие, тонкая обводка.
--------------------------------------------------------------------------
*/
.glass-panel {
    background: var(--bg-surface);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    /* Safari support */
    border: 1px solid var(--border-dim);
    box-shadow: var(--shadow-soft);

    /* Оптимизация рендеринга */
    transform: translateZ(0);
}

/* Light Mode Override */
body.light-mode .glass-panel {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(0, 0, 0, 0.05);
}

/* 
--------------------------------------------------------------------------
7.2 STRONG GLASS (HIGH CONTRAST)
Для элементов, требующих отделения от фона (Навигация, Модалки).
--------------------------------------------------------------------------
*/
.glass-panel-strong {
    background: rgba(20, 20, 20, 0.6);
    /* Темнее базы */
    backdrop-filter: blur(40px) saturate(180%);
    /* Сильное размытие + Насыщенность */
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Light Mode Override */
body.light-mode .glass-panel-strong {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
}

/* 
--------------------------------------------------------------------------
7.3 INTERACTIVE GLASS (HOVER EFFECTS)
Стекло, реагирующее на наведение. Добавляет блик (Shine).
--------------------------------------------------------------------------
*/
.glass-interactive {
    position: relative;
    overflow: hidden;
    /* Чтобы блик не вылетал за границы */
    transition: all 0.4s var(--ease-fluid);
    will-change: transform, background-color, border-color;
}

/* Эффект блика (Shine) через псевдоэлемент */
.glass-interactive::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Градиентный блик под углом 120 градусов */
    background: linear-gradient(120deg,
            transparent 0%,
            var(--glass-shine) 50%,
            transparent 100%);
    transform: translateX(-100%);
    /* Скрыт слева */
    transition: transform 0.6s var(--ease-out-expo);
    z-index: 1;
    pointer-events: none;
}

/* Триггер анимации при наведении */
.glass-interactive:hover::before {
    transform: translateX(100%);
    /* Пролетает направо */
}

/* Изменение состояния самой панели */
.glass-interactive:hover {
    background: var(--bg-surface-hover);
    border-color: var(--border-light);
    transform: translateY(-2px);
    /* Легкий подъем */
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.2);
}

/* Light Mode Override */
body.light-mode .glass-interactive:hover {
    background: #ffffff;
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.08);
}

/* 
==========================================================================
8.0 ANIMATION LIBRARY (KEYFRAMES & UTILITIES)
==========================================================================
Глобальные анимации, используемые по всему сайту.
*/

/* 
--------------------------------------------------------------------------
8.1 PULSE RING (STATUS INDICATORS)
Используется для зеленых точек статуса (Online/System OK).
--------------------------------------------------------------------------
*/
@keyframes pulse-ring {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }

    100% {
        transform: scale(2.4);
        opacity: 0;
    }
}

.animate-pulse-ring {
    position: relative;
}

.animate-pulse-ring::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: inherit;
    /* Наследует цвет родителя */
    border-radius: 50%;
    z-index: -1;
    animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

/* 
--------------------------------------------------------------------------
8.2 FLOAT Y (LEVITATION)
Мягкое покачивание элементов (Hero Badge, 3D объекты).
--------------------------------------------------------------------------
*/
@keyframes float-y {

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

    50% {
        transform: translateY(-10px);
    }
}

.animate-float {
    animation: float-y 6s ease-in-out infinite;
}

/* 
--------------------------------------------------------------------------
8.3 SPIN SLOW (DECORATIVE)
Медленное вращение для фоновых элементов или иконок загрузки.
--------------------------------------------------------------------------
*/
@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.animate-spin-slow {
    animation: spin-slow 12s linear infinite;
}

/* 
--------------------------------------------------------------------------
8.4 MARQUEE SCROLL (INFINITE LOOP)
Бегущая строка для логотипов партнеров.
--------------------------------------------------------------------------
*/
@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
        /* Сдвиг на половину (дублированный контент) */
    }
}

.animate-marquee {
    display: flex;
    width: max-content;
    /* Ширина по контенту */
    animation: marquee-scroll 30s linear infinite;
    will-change: transform;
    /* Оптимизация GPU */
}

/* Пауза при наведении для доступности */
.animate-marquee:hover {
    animation-play-state: paused;
}

/* 
--------------------------------------------------------------------------
8.5 AURORA FLOAT (BACKGROUND BLOBS)
Сложная анимация для фоновых градиентных пятен.
--------------------------------------------------------------------------
*/
@keyframes aurora-float {
    0% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(30px, -50px) scale(1.1);
    }

    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }

    100% {
        transform: translate(0, 0) scale(1);
    }
}

/* 
--------------------------------------------------------------------------
8.6 ACCESSIBILITY: REDUCED MOTION
Отключение анимаций для пользователей, чувствительных к движению.
--------------------------------------------------------------------------
*/
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .animate-marquee {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* 
==========================================================================
9.0 VISUAL FX UTILITIES
==========================================================================
*/

/* 
--------------------------------------------------------------------------
9.1 NOISE TEXTURE OVERLAY
Добавляет эффект пленочного зерна для "премиальности".
--------------------------------------------------------------------------
*/
.noise-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Пропускает клики */
    z-index: 0;
    opacity: 0.03;
    /* Едва заметный шум */
    /* SVG фильтр шума через Data URI */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* В светлой теме шум должен быть темнее (инверсия) */
body.light-mode .noise-overlay {
    opacity: 0.05;
    filter: invert(1);
}

/* 
--------------------------------------------------------------------------
9.2 GRADIENT BLOBS (ATMOSPHERE)
Размытые цветные пятна на фоне.
--------------------------------------------------------------------------
*/
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    /* Сильное размытие */
    opacity: 0.4;
    z-index: var(--z-back);
    transform: translate3d(0, 0, 0);
    /* Включение GPU */
    animation: aurora-float 20s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}

/* Цветовые вариации */
.blob-purple {
    background: var(--accent-purple);
    width: clamp(300px, 50vw, 800px);
    height: clamp(300px, 50vw, 800px);
}

.blob-cyan {
    background: var(--accent-cyan);
    width: clamp(200px, 40vw, 600px);
    height: clamp(200px, 40vw, 600px);
}

/* OLED Optimization: В темной теме делаем пятна тусклее */
body:not(.light-mode) .blob {
    opacity: 0.25;
    mix-blend-mode: screen;
    /* Лучшее смешивание с черным */
}

/* 
--------------------------------------------------------------------------
9.3 MAGNETIC BUTTON BASE
Базовый стиль для кнопок, притягивающихся к курсору (JS handled).
--------------------------------------------------------------------------
*/
[data-magnet] {
    display: inline-block;
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* 
==========================================================================
STARFIELD ENGINE
==========================================================================
*/
#starfield {
    opacity: 0.6;
    /* Базовая прозрачность в Dark Mode */
    mix-blend-mode: screen;
    /* Чтобы звезды "светились" */
}

/* В светлой теме звезды должны исчезнуть или стать едва заметной пылью */
body.light-mode #starfield {
    opacity: 0;
    /* Полностью скрываем в светлой теме для чистоты */
    /* ИЛИ, если хочешь черную пыль: 
       opacity: 0.2; 
       filter: invert(1); 
       mix-blend-mode: multiply; 
    */
}

/* 
==========================================================================
GLOBAL WATERMARK (GRID PATTERN)
Фоновая сетка из логотипов.
==========================================================================
*/
#global-watermark {
    position: fixed;
    inset: -50%;
    /* Делаем контейнер больше экрана, чтобы при повороте не было пустых углов */
    width: 200%;
    height: 200%;
    z-index: 0;
    /* Самый нижний слой */
    pointer-events: none;

    background-image: url('images/ifc2.svg');
    background-repeat: repeat;
    /* Повторяем логотип (сетка) */

    /* 
       Размер одного логотипа в сетке. 
       Чем больше число, тем больше расстояние между ними.
    */
    background-size: 400px auto;

    /* Поворот сетки для стиля */
    transform: rotate(-20deg);

    /* Плавная смена темы */
    transition: opacity 0.5s ease, filter 0.5s ease;
}

/* 
   DARK MODE (По умолчанию):
   Фон черный. Логотип делаем белым (invert) и ставим прозрачность 3%.
   Визуально это выглядит как "еле заметный серый на черном".
*/
body:not(.light-mode) #global-watermark {
    filter: invert(1);
    opacity: 0.005;
}

/* 
   LIGHT MODE:
   Фон белый. Логотип делаем черным (filter: none) и ставим прозрачность 3%.
   Визуально это выглядит как "еле заметный серый на белом".
*/
body.light-mode #global-watermark {
    filter: none;
    opacity: 0.03;
}

/* 
==========================================================================
10.0 LAYOUT & ACCESSIBILITY UTILITIES
==========================================================================
*/

/* 
--------------------------------------------------------------------------
10.1 CONTAINER FLUID
Ограничитель ширины контента.
--------------------------------------------------------------------------
*/
.container-fluid {
    width: 100%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}

/* 
--------------------------------------------------------------------------
10.2 SCREEN READER ONLY (SR-ONLY)
Скрытие элементов визуально, но доступно для скринридеров.
--------------------------------------------------------------------------
*/
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 
--------------------------------------------------------------------------
10.3 FOCUS VISIBLE
Кастомная обводка фокуса для навигации с клавиатуры.
--------------------------------------------------------------------------
*/
:focus-visible {
    outline: 2px solid var(--accent-purple);
    outline-offset: 4px;
    border-radius: 2px;
}

/* 
--------------------------------------------------------------------------
10.4 RESPONSIVE DISPLAY HELPERS
--------------------------------------------------------------------------
*/
@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }
}

/* 
==========================================================================
11.0 SYSTEM UI: LOADER & TRANSITIONS
==========================================================================
Стили для экрана загрузки и шторки перехода между языками.
*/

/* 
--------------------------------------------------------------------------
11.1 LOADER SCREEN
Полноэкранный оверлей, блокирующий контент до загрузки JS.
--------------------------------------------------------------------------
*/
#loader {
    position: fixed;
    inset: 0;
    z-index: var(--z-loader);
    background-color: var(--bg-core);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overscroll-behavior: none;
    /* Блокировка скролла */
    touch-action: none;
}

/* Контейнер контента лоадера */
#loader .loader-content {
    width: min(90vw, 400px);
    position: relative;
    z-index: 2;
}

/* Логотип (анимируется через GSAP) */
#loader-logo-anim {
    opacity: 0;
    filter: blur(10px);
    transform: scale(0.9);
}

/* Текст статуса (Typewriter effect style) */
#loader-status {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--accent-purple);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Счетчик процентов */
#loader-counter {
    font-variant-numeric: tabular-nums;
    /* Фиксированная ширина цифр */
}

/* 
--------------------------------------------------------------------------
11.2 TRANSITION CURTAIN (UPDATED Z-INDEX)
Шторка для плавного перехода. Должна быть ВЫШЕ мобильного меню.
--------------------------------------------------------------------------
*/
#transition-curtain {
    position: fixed;
    inset: 0;

    /* ВАЖНО: Ставим 100000, чтобы перекрыть мобильное меню (у которого 99999) */
    z-index: 100000 !important;

    background-color: var(--bg-core);
    /* Черный в темной, Белый в светлой */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;

    /* Начальное состояние: скрыт выше экрана */
    transform: translateY(-100%);
    will-change: transform;
}

/* Логотип на шторке */
#transition-logo {
    width: clamp(100px, 15vw, 200px);
    height: auto;
    /* Инверсия цвета в зависимости от темы */
    filter: var(--logo-filter);
}

/* 
==========================================================================
END OF STEP 2
==========================================================================
*/

/* 
====================================================================================================
PROJECT: INFINITY FLOW COMPUTERS (IFC)
COMPONENT: STYLE.CSS - STEP 3 OF 10
MODULE: NAVIGATION ARCHITECTURE (THE CAPSULE)
VERSION: 4.0.0 (PRODUCTION)
====================================================================================================
*/

/* 
==========================================================================
12.0 NAVIGATION CONTAINER (WRAPPER)
==========================================================================
Обертка, которая позиционирует навигацию поверх контента.
*/

#navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;

    /* Z-Index берем из переменных Шага 1 */
    z-index: var(--z-nav);

    /* Отступ сверху для "парящего" эффекта */
    padding-top: var(--space-md);

    /* Анимация скрытия/появления (управляется JS через transform) */
    transition: transform 0.4s var(--ease-fluid), background-color 0.4s ease;

    /* 
       ВАЖНО: pointer-events: none позволяет кликать СКВОЗЬ пустые области навбара.
       Сама капсула вернет pointer-events: auto.
    */
    pointer-events: none;

    /* Центрирование капсулы */
    display: flex;
    justify-content: center;
}

/* 
--------------------------------------------------------------------------
12.1 THE CAPSULE (VISUAL PILL)
Визуальная часть меню. Эффект матового стекла + скругление.
--------------------------------------------------------------------------
*/
.nav-capsule {
    /* Возвращаем кликабельность */
    pointer-events: auto;

    /* Размеры и отступы */
    width: 92%;
    /* Mobile width */
    max-width: 1200px;
    /* Desktop max width */
    padding: 0.75rem 1.5rem;

    /* Flex Layout */
    display: flex;
    align-items: center;
    justify-content: space-between;

    /* Форма пилюли */
    border-radius: 100vw;

    /* GLASSMORPHISM BASE (Dark Mode) */
    background: rgba(15, 15, 15, 0.6);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);

    /* Границы и Тени */
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 4px 24px -1px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    /* Внутреннее свечение */

    /* Анимация при наведении на саму капсулу */
    transition: all 0.4s var(--ease-fluid);

    /* Оптимизация */
    transform: translateZ(0);
    will-change: transform, background-color, box-shadow;

    /* Запрет выделения текста внутри меню */
    user-select: none;
}

/* Адаптив для планшетов и десктопов */
@media (min-width: 768px) {
    .nav-capsule {
        width: 90%;
        padding: 0.75rem 2rem;
    }
}

/* 
   HOVER STATE (THE CAPSULE "BREATHES")
   При наведении капсула становится чуть темнее и поднимается.
*/
.nav-capsule:hover {
    background: rgba(20, 20, 20, 0.8);
    box-shadow:
        0 8px 32px -4px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    transform: translateY(-2px);
}

/* 
   LIGHT MODE OVERRIDE (CAPSULE)
   Светлая тема требует инверсии цветов стекла.
*/
body.light-mode .nav-capsule {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(0, 0, 0, 0.05);
    box-shadow:
        0 4px 24px -1px rgba(0, 0, 0, 0.05),
        0 0 0 1px rgba(255, 255, 255, 0.8) inset;
}

body.light-mode .nav-capsule:hover {
    background: rgba(255, 255, 255, 0.9);
    box-shadow:
        0 8px 32px -4px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.9) inset;
}

/* 
--------------------------------------------------------------------------
12.2 BRAND LOGO
--------------------------------------------------------------------------
*/
.nav-capsule a[aria-label="IFC Home"] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.9;
    transition: opacity 0.3s ease;
    padding: 0.25rem;
    border-radius: 0.5rem;
}

.nav-capsule a[aria-label="IFC Home"]:hover {
    opacity: 1;
}

.nav-capsule a[aria-label="IFC Home"]:focus-visible {
    outline: 2px solid var(--accent-purple);
    outline-offset: 2px;
}

/* Логотип внутри навигации */
.nav-capsule img {
    height: 1.5rem;
    /* 24px Mobile */
    width: auto;
    object-fit: contain;
    /* Фильтр задается глобально в body (--logo-filter), но здесь можно усилить */
    filter: var(--logo-filter);
    transition: filter 0.3s ease;
}

@media (min-width: 768px) {
    .nav-capsule img {
        height: 1.75rem;
        /* 28px Desktop */
    }
}

/* 
==========================================================================
13.0 DESKTOP MENU (LIQUID LINKS)
==========================================================================
Ссылки с эффектом "жидкого" заполнения при наведении.
*/

.nav-link-liquid {
    position: relative;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    letter-spacing: 0.02em;

    padding: 0.625rem 1.25rem;
    /* 10px 20px */
    border-radius: 100vw;

    transition: color 0.3s ease;
    overflow: hidden;
    /* Чтобы фон не вылезал */
    z-index: 1;
}

/* Active / Hover Text Color */
.nav-link-liquid:hover,
.nav-link-liquid.active {
    color: var(--text-main);
}

/* 
   THE LIQUID FILL EFFECT
   Псевдоэлемент, который расширяется при наведении.
*/
.nav-link-liquid::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.1);
    /* Белое свечение в Dark Mode */
    border-radius: 100vw;

    /* Начальное состояние: уменьшен и прозрачен */
    transform: scale(0.8);
    opacity: 0;

    transition: transform 0.3s var(--ease-out-expo), opacity 0.3s ease;
    z-index: -1;
    /* Позади текста */
}

/* Light Mode Fill */
body.light-mode .nav-link-liquid::before {
    background: rgba(0, 0, 0, 0.05);
    /* Черное затенение в Light Mode */
}

/* Trigger Animation */
.nav-link-liquid:hover::before,
.nav-link-liquid.active::before {
    transform: scale(1);
    opacity: 1;
}

/* Focus State */
.nav-link-liquid:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-purple);
}

/* 
==========================================================================
14.0 CONTROLS (LANG, THEME, CONTACT)
==========================================================================
Правая часть капсулы.
*/

/* 
--------------------------------------------------------------------------
14.1 LANGUAGE SWITCHER
--------------------------------------------------------------------------
*/
.lang-btn {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    /* 12px */
    color: var(--text-dim);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Active / Hover State */
.lang-btn.active,
.lang-btn:hover {
    color: var(--text-main);
    /* Неоновое свечение текста в Dark Mode */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* Light Mode Override */
body.light-mode .lang-btn.active,
body.light-mode .lang-btn:hover {
    text-shadow: none;
    font-weight: 700;
    color: var(--color-black);
}

/* Разделитель языков (слэш) */
.lang-separator {
    color: var(--text-dim);
    user-select: none;
}

/* 
--------------------------------------------------------------------------
14.2 THEME TOGGLE BUTTON (SUN / MOON)
--------------------------------------------------------------------------
*/
.theme-toggle-btn {
    position: relative;
    width: 2.25rem;
    /* 36px */
    height: 2.25rem;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
    /* Скрываем иконку при смене */
    transition: background-color 0.3s ease;
}

.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Light Mode Background */
body.light-mode .theme-toggle-btn {
    background: rgba(0, 0, 0, 0.05);
}

body.light-mode .theme-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* Иконки (SVG) */
.dark-icon,
.light-icon {
    position: absolute;
    width: 1rem;
    height: 1rem;
    transform-origin: center;
    transition: transform 0.5s var(--ease-elastic), opacity 0.3s ease;
}

/* Логика анимации (управляется JS классами, но база здесь) */
/* См. script.js: toggleTheme() меняет rotate/scale */

/* 
--------------------------------------------------------------------------
14.3 CONTACT BUTTON (MAGNETIC)
Кнопка "Связаться" с магнитным эффектом.
--------------------------------------------------------------------------
*/
.btn-capsule {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.625rem 1.5rem;
    border-radius: 100vw;

    /* Dark Mode: Белая кнопка, черный текст */
    background-color: var(--color-white);
    color: var(--color-black);

    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;

    /* Тень-свечение */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);

    transition: transform 0.3s var(--ease-elastic), box-shadow 0.3s ease;
}

.btn-capsule:hover {
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.5);
}

/* Light Mode: Черная кнопка, белый текст */
body.light-mode .btn-capsule {
    background-color: var(--color-black);
    color: var(--color-white);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

body.light-mode .btn-capsule:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* 
==========================================================================
15.0 MOBILE MENU (OVERLAY & BURGER)
==========================================================================
*/

/* 
--------------------------------------------------------------------------
15.1 BURGER BUTTON (TRIGGER)
--------------------------------------------------------------------------
*/
#mobile-menu-btn {
    color: var(--text-main);
    opacity: 0.8;
    padding: 0.5rem;
    border-radius: 50%;
    transition: opacity 0.3s ease, background-color 0.3s ease;
}

#mobile-menu-btn:hover {
    opacity: 1;
    background-color: var(--bg-surface-hover);
}

/* 
--------------------------------------------------------------------------
15.2 FULL SCREEN OVERLAY (CONTAINER)
--------------------------------------------------------------------------
*/
#mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 99999 !important;
    /* Поверх всего */

    background-color: #000000;
    /* Dark Mode Default */

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;

    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);

    /* Анимация */
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.5s ease;
}

/* Активное состояние */
#mobile-menu.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* LIGHT MODE: Фон меню */
body.light-mode #mobile-menu {
    background-color: #ffffff;
}

/* 
--------------------------------------------------------------------------
15.3 CLOSE BUTTON (NEW)
--------------------------------------------------------------------------
*/
/* Кнопка закрытия внутри меню */
#mobile-menu button[aria-label="Close Menu"] {
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.3s ease;
}

#mobile-menu button[aria-label="Close Menu"]:hover {
    color: #ffffff;
}

/* LIGHT MODE: Кнопка закрытия */
body.light-mode #mobile-menu button[aria-label="Close Menu"] {
    color: rgba(0, 0, 0, 0.5) !important;
}

body.light-mode #mobile-menu button[aria-label="Close Menu"]:hover {
    color: #000000 !important;
}

/* 
--------------------------------------------------------------------------
15.4 MOBILE LINKS TYPOGRAPHY
--------------------------------------------------------------------------
*/
.mobile-nav-link {
    font-size: clamp(2rem, 8vw, 3rem);
    /* Чуть меньше, чтобы влезло */
    font-weight: 700;
    letter-spacing: -0.03em;
    color: rgba(255, 255, 255, 0.7);
    /* Dark Mode Text */
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s var(--ease-out-expo);
}

.mobile-nav-link:hover {
    color: #ffffff;
    transform: translateX(10px);
}

/* LIGHT MODE: Ссылки */
body.light-mode .mobile-nav-link {
    color: #111827 !important;
    /* Почти черный */
}

body.light-mode .mobile-nav-link:hover {
    color: var(--accent-purple) !important;
}

/* 
--------------------------------------------------------------------------
15.5 LABELS & FOOTER TEXT (NEW)
Текст "Select Language", подписи RU/UZ/EN и версия внизу.
--------------------------------------------------------------------------
*/

/* Общий стиль для мелкого текста в меню */
#mobile-menu span,
#mobile-menu div {
    transition: color 0.3s ease;
}

/* LIGHT MODE: Весь вспомогательный текст делаем темным */
body.light-mode #mobile-menu span.text-gray-600,
/* Select Language */
body.light-mode #mobile-menu span.text-gray-500,
/* RU UZ EN */
body.light-mode #mobile-menu div.text-gray-800

/* Footer Version */
    {
    color: #374151 !important;
    /* Темно-серый */
    font-weight: 600;
}

/* Подписи языков при наведении в светлой теме */
body.light-mode #mobile-menu button:hover span {
    color: #000000 !important;
}

/* 
==========================================================================
FIX: NAVBAR LIGHT MODE (HIGH CONTRAST & BEAUTY)
Красивое меню для светлой темы: четкий текст и акценты.
==========================================================================
*/

/* 1. КАПСУЛА (ФОН МЕНЮ) */
body.light-mode .nav-capsule {
    background: rgba(255, 255, 255, 0.85) !important;
    /* Плотное матовое стекло */
    backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    /* Тонкая серая рамка */
    box-shadow:
        0 4px 20px -5px rgba(0, 0, 0, 0.1),
        /* Мягкая тень */
        0 10px 40px -10px rgba(0, 0, 0, 0.05) !important;
}

/* 2. ССЫЛКИ (ПУНКТЫ МЕНЮ) */
body.light-mode .nav-link-liquid {
    color: #4b5563 !important;
    /* Темно-серый (читаемый) */
    font-weight: 600 !important;
    /* Чуть жирнее */
}

/* Ховер эффект (Наведение) */
body.light-mode .nav-link-liquid:hover {
    color: #000000 !important;
    /* Черный текст */
}

/* Фон при наведении (Жидкий эффект) */
body.light-mode .nav-link-liquid::before {
    background: rgba(168, 85, 247, 0.1) !important;
    /* Легкий фиолетовый фон */
}

/* 3. ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКОВ */
body.light-mode .lang-btn {
    color: #9ca3af !important;
    /* Серый для неактивных */
    font-weight: 500 !important;
}

body.light-mode .lang-separator {
    color: #d1d5db !important;
    /* Светло-серый разделитель */
}

/* Активный язык */
body.light-mode .lang-btn.active {
    color: #000000 !important;
    /* Черный */
    font-weight: 800 !important;
    text-decoration: underline !important;
    text-decoration-color: #a855f7 !important;
    /* Фиолетовое подчеркивание */
    text-underline-offset: 4px !important;
}

/* Ховер на язык */
body.light-mode .lang-btn:hover {
    color: #a855f7 !important;
    /* Фиолетовый при наведении */
}

/* 4. КНОПКА ТЕМЫ (СОЛНЫШКО) */
body.light-mode .theme-toggle-btn {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #f59e0b !important;
    /* Оранжевое солнце */
}

body.light-mode .theme-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.1) !important;
}

/* 5. КНОПКА "CONTACT US" (СВЯЗАТЬСЯ) */
body.light-mode .btn-capsule {
    background-color: #000000 !important;
    /* Черная кнопка */
    color: #ffffff !important;
    /* Белый текст */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

body.light-mode .btn-capsule:hover {
    background-color: #333333 !important;
    /* Темно-серый при наведении */
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(168, 85, 247, 0.4) !important;
    /* Фиолетовое свечение */
}


/* 
==========================================================================
END OF STEP 3
==========================================================================


*/

/* 
====================================================================================================
PROJECT: INFINITY FLOW COMPUTERS (IFC)
COMPONENT: STYLE.CSS - STEP 4 OF 10
MODULE: HERO SECTION ARCHITECTURE
VERSION: 4.0.0 (PRODUCTION)
====================================================================================================
*/

/* 
==========================================================================
16.0 HERO SECTION LAYOUT
==========================================================================
*/

#about {
    position: relative;
    /* 
       Минимальная высота - 100% высоты экрана.
       dvh (dynamic viewport height) решает проблему с адресной строкой на мобильных.
    */
    min-height: 100dvh;

    display: flex;
    align-items: center;
    justify-content: center;

    /* Отступ сверху, чтобы контент не наезжал на навбар */
    padding-top: 5rem;
    padding-bottom: var(--space-xl);

    overflow: hidden;
    /* Обрезаем фоновые блобы */
    z-index: 1;
}

/* 
--------------------------------------------------------------------------
16.1 HERO BACKGROUND (TRANSPARENT)
Фон прозрачный, чтобы была видна глобальная сетка логотипов.
--------------------------------------------------------------------------
*/
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: var(--z-back);
    background-color: transparent;
    /* Прозрачный фон */
    transition: background-color 0.6s var(--ease-fluid);
}

/* Light Mode Override */
body.light-mode .hero-bg {
    background-color: transparent;
    /* Прозрачный фон */
}

/* 
==========================================================================
17.0 HERO TYPOGRAPHY
==========================================================================
*/

.hero-title-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--space-md);

    /* Запрет выделения для эстетики */
    user-select: none;
    cursor: default;
}

/* 
--------------------------------------------------------------------------
17.1 SOLID TEXT (LINE 1: "INFINITY FLOW")
Обновленный стиль: Inter, легкий вес, премиальный вид
--------------------------------------------------------------------------
*/
.hero-text-solid {
    display: block;
    /* Убеждаемся, что используется именно Inter */
    font-family: 'Inter', sans-serif;

    font-size: var(--text-display);

    /* ИЗМЕНЕНИЕ 1: Убираем жирность */
    /* 400 = Обычный (Regular) */
    /* 500 = Средний (Medium) - Рекомендую начать с него */
    font-weight: 500;

    line-height: 0.9;

    /* ИЗМЕНЕНИЕ 2: Чуть увеличиваем расстояние между буквами */
    /* Было -0.04em (слишком тесно для тонкого шрифта), ставим -0.02em */
    letter-spacing: -0.02em;

    color: var(--text-main);
    transition: color 0.5s ease;
    will-change: transform, opacity;
}

/* Вторая строка (если используется Solid стиль) */
.hero-text-solid.text-secondary {
    /* Чуть меньше визуального веса */
    opacity: 0.9;
}

/* Dark Mode: Чистый белый */
body:not(.light-mode) .hero-text-solid {
    color: #ffffff;
}

/* Light Mode: Глубокий черный */
body.light-mode .hero-text-solid {
    color: #000000;
}

/* 
--------------------------------------------------------------------------
17.2 CHROME TEXT EFFECT (OPTIONAL LINE 2)
Эффект металлического градиента. Используется классом .hero-text-chrome
--------------------------------------------------------------------------
*/
.hero-text-chrome {
    font-size: var(--text-display);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.04em;

    /* Базовый цвет (фолбек) */
    color: transparent;

    /* Градиент "Жидкий металл" */
    background-image: linear-gradient(180deg,
            #666666 0%,
            /* Верхний блик */
            #cccccc 45%,
            /* Середина */
            #000000 50%,
            /* Линия горизонта (резкий переход) */
            #333333 60%,
            /* Тень земли */
            #999999 100%
            /* Нижний рефлекс */
        );

    /* Обрезка фона по тексту */
    -webkit-background-clip: text;
    background-clip: text;

    /* Тень для объема */
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.2));
}

/* Chrome Effect for Dark Mode (High Contrast) */
body:not(.light-mode) .hero-text-chrome {
    background-image: linear-gradient(180deg,
            #ffffff 0%,
            /* Яркий белый верх */
            #e5e5e5 45%,
            #404040 50%,
            /* Темно-серый горизонт */
            #000000 51%,
            /* Черный низ */
            #737373 100%
            /* Отражение */
        );
    /* Белое свечение (Glow) чтобы отделить от черного фона */
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.15));
}

/* 
--------------------------------------------------------------------------
17.3 HERO DESCRIPTION
--------------------------------------------------------------------------
*/
.hero-desc-text {
    font-size: var(--text-body);
    /* clamp(1rem... 1.25rem) */
    max-width: 42rem;
    /* ~670px - оптимальная длина строки */
    margin: 0 auto 3rem auto;

    font-weight: 400;
    line-height: 1.6;
    text-align: center;

    color: var(--text-muted);
    transition: color 0.5s ease;
}

/* 
==========================================================================
18.0 APPLE-STYLE BADGES & BUTTONS
==========================================================================
*/

/* 
--------------------------------------------------------------------------
18.1 STATUS BADGE ("Strategic Distributor")
--------------------------------------------------------------------------
*/
.apple-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;

    border-radius: 100px;

    /* Стекло */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);

    transition: all 0.3s ease;
    cursor: default;
}

.apple-badge:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Light Mode Badge */
body.light-mode .apple-badge {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}

/* Текст внутри бейджа */
.badge-text {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* 
--------------------------------------------------------------------------
18.2 PRIMARY BUTTON (Solid) - FIXED
Убрали 'transform' из transition, чтобы не ломать JS-магнит.
--------------------------------------------------------------------------
*/
.apple-btn-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 14px 32px;
    border-radius: 100px;

    /* Dark Mode: Белая кнопка */
    background: #ffffff;
    color: #000000;

    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;

    /* Свечение */
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.15);

    /* ВАЖНО: Убрали 'transform' отсюда! Оставили только box-shadow и цвета */
    transition: box-shadow 0.2s ease, background-color 0.3s ease, color 0.3s ease;

    overflow: hidden;
    will-change: transform;
    /* Оптимизация для JS */
}

.apple-btn-primary:hover {
    /* Scale теперь обрабатывается лучше, либо через JS, либо без конфликтов */
    /* transform: scale(1.03); <- Это можно оставить, но лучше пусть JS рулит */
    box-shadow: 0 0 35px rgba(255, 255, 255, 0.3);
}

/* Light Mode: Черная кнопка */
body.light-mode .apple-btn-primary {
    background: #000000;
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

body.light-mode .apple-btn-primary:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
}

/* 
--------------------------------------------------------------------------
18.3 SECONDARY BUTTON (Ghost)
--------------------------------------------------------------------------
*/
.apple-btn-secondary {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 100px;

    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-muted);

    transition: all 0.3s ease;
}

.apple-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-main);
}

body.light-mode .apple-btn-secondary:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #000000;
}

/* 
==========================================================================
19.0 SCROLL INDICATOR (MOUSE)
==========================================================================
*/
.scroll-indicator-clean {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);

    display: none;
    /* Скрыто на мобильных */
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;

    color: var(--text-dim);
    opacity: 0;
    /* Анимируется через GSAP */
}

@media (min-width: 768px) {
    .scroll-indicator-clean {
        display: flex;
    }
}

.scroll-indicator-clean span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-family: var(--font-mono);
}

/* Линия скролла */
.scroll-indicator-clean .line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, var(--text-dim), transparent);
    position: relative;
    overflow: hidden;
}

/* Бегущая точка внутри линии */
.scroll-indicator-clean .line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to bottom, transparent, var(--text-main), transparent);
    animation: scroll-drop 2s infinite;
}

@keyframes scroll-drop {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(200%);
    }
}

/* 
==========================================================================
20.0 ENTRY ANIMATIONS (GSAP STATES)
==========================================================================
Классы для начального состояния элементов, которые будут анимированы
через script.js при загрузке страницы.
*/

.hero-anim {
    /* Начальное состояние: скрыто и смещено вниз */
    opacity: 0;
    transform: translateY(30px);

    /* Подсказка браузеру для оптимизации */
    will-change: opacity, transform;
}

/* Обертки для эффекта "Reveal" (выезд текста из маски) */
.reveal-text-wrapper {
    overflow: hidden;
    display: block;
}

.reveal-text-inner {
    display: block;
    transform: translateY(100%);
    /* Спрятано внизу */
}

/* 
==========================================================================
END OF STEP 4
==========================================================================
*/

/* 
====================================================================================================
PROJECT: INFINITY FLOW COMPUTERS (IFC)
COMPONENT: STYLE.CSS - STEP 5 OF 10
MODULE: INFINITE MARQUEE ECOSYSTEM
VERSION: 4.0.0 (PRODUCTION)
====================================================================================================
*/

/* 
==========================================================================
21.0 MARQUEE SECTION LAYOUT
==========================================================================
Контейнер для бегущей строки.
*/

.marquee-section {
    position: relative;
    z-index: 20;
    /* Поверх Hero фона, но под модалками */
    width: 100%;
    overflow: hidden;
    /* Скрываем вылетающие элементы */

    padding-top: 3rem;
    padding-bottom: 6rem;

    /* Запрет выделения, так как это интерактивный элемент */
    user-select: none;

    /* Цвет фона наследуется от body, но можно задать явно если нужно */
    background-color: transparent;
}

/* 
--------------------------------------------------------------------------
21.1 SECTION HEADER
Заголовок над лентой ("TRUSTED BY LEADERS").
--------------------------------------------------------------------------
*/
.marquee-header {
    position: relative;
    z-index: 30;
    /* Поверх масок */
    text-align: center;
    margin-bottom: 4rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.marquee-title {
    font-size: clamp(1.5rem, 3vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-main);
    transition: color 0.5s ease;
}

/* Вторая строка заголовка (потускневшая) */
.marquee-title span.opacity-50 {
    color: var(--text-muted);
}

/* 
==========================================================================
22.0 MARQUEE TRACK ANIMATION
==========================================================================
Движущаяся лента.
*/

.marquee-track {
    display: flex;
    align-items: center;

    /* 
       Gap (отступ) между логотипами.
       Адаптивный: меньше на мобильных, больше на десктопе.
    */
    gap: clamp(3rem, 5vw, 8rem);

    /* 
       Ширина по контенту. 
       JS дублирует контент 4 раза, чтобы заполнить широкие экраны.
    */
    width: max-content;

    /* Анимация определена в Шаге 2 (8.4) */
    animation: marquee-scroll 30s linear infinite;

    /* Оптимизация производительности */
    will-change: transform;
    transform: translateZ(0);
}


/* 
==========================================================================
23.0 FADE MASKS (EDGES)
==========================================================================
Градиентные маски по краям, создающие эффект "исчезновения" логотипов.
Используют переменную --bg-core для идеального слияния с фоном.
*/

.marquee-fade-left,
.marquee-fade-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 15%;
    /* Ширина зоны затухания */
    z-index: 25;
    /* Поверх трека, но под хедером */
    pointer-events: none;
    /* ВАЖНО: пропускаем клики сквозь маску */
}

.marquee-fade-left {
    left: 0;
    background: linear-gradient(to right, var(--bg-core) 0%, transparent 100%);
}

.marquee-fade-right {
    right: 0;
    background: linear-gradient(to left, var(--bg-core) 0%, transparent 100%);
}

/* 
==========================================================================
24.0 BRAND ITEMS (LOGOS) - BASE STYLES
==========================================================================
*/

.brand-item {
    display: flex;
    align-items: center;
    justify-content: center;

    /* 1. Фиксируем "коробку" для логотипа */
    height: 80px;
    /* Фиксированная высота контейнера */
    width: 180px;
    /* Фиксированная ширина контейнера */

    /* Базовая прозрачность */
    opacity: 0.4;
    transition: all 0.4s var(--ease-fluid);
    cursor: pointer;
    position: relative;
    z-index: 30;
}

.brand-item img {
    /* 2. Заставляем картинку вписываться в коробку, но не обрезаться */
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;

    transition: transform 0.4s var(--ease-elastic), filter 0.4s ease;

    /* Фильтры для темной/светлой темы (как мы делали ранее) */
}

/* DARK MODE (Белые лого) */
body:not(.light-mode) .brand-item img {
    filter: brightness(0) invert(1);
}

body:not(.light-mode) .brand-item:hover {
    opacity: 1;
}

body:not(.light-mode) .brand-item:hover img {
    filter: brightness(0) invert(1) drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));
}

/* LIGHT MODE (Черные лого) */
body.light-mode .brand-item img {
    filter: brightness(0);
}

body.light-mode .brand-item:hover {
    opacity: 1;
}

body.light-mode .brand-item:hover img {
    filter: brightness(0) drop-shadow(0 5px 15px rgba(0, 0, 0, 0.15));
}

/* 
==========================================================================
25.0 SPECIFIC LOGO ADJUSTMENTS (VISUAL BALANCING)
Здесь мы вручную подгоняем размер каждого логотипа, чтобы они смотрелись ровно.
==========================================================================
*/

/* 1. LUNACY - Увеличиваем значительно */
.brand-item img[src*="Lunacy"] {
    /* Было 0.85 -> Ставим 1.4 */
    transform: scale(2.0);
}

.brand-item:hover img[src*="Lunacy"] {
    transform: scale(2.5);
}


/* 2. OCYPUS - Увеличиваем значительно */
.brand-item img[src*="Ocypus"] {
    /* Было 0.9 -> Ставим 1.5 */
    transform: scale(3.0);
}

.brand-item:hover img[src*="Ocypus"] {
    transform: scale(3.5);
}

/* 3. LOGITECH - Был очень мелким, увеличиваем */
.brand-item img[src*="logitech"] {
    transform: scale(2.0);
}

.brand-item:hover img[src*="logitech"] {
    transform: scale(2.5);
}

/* 4. ASUS - Был очень мелким, увеличиваем */
.brand-item img[src*="ASUS"] {
    transform: scale(2.0);
}

.brand-item:hover img[src*="ASUS"] {
    transform: scale(2.5);
}

/* 5. DELL - Круглый, нужно чуть увеличить для веса */
.brand-item img[src*="Dell"] {
    transform: scale(1.2);
}

.brand-item:hover img[src*="Dell"] {
    transform: scale(1.3);
}

/* 6. AKKO - Был нормальным, чуть уменьшим для баланса с Logitech */
.brand-item img[src*="Akko"] {
    transform: scale(1.25);
}

.brand-item:hover img[src*="Akko"] {
    transform: scale(1.5);
}

/* 7. IO (Куб) - Выглядит нормально, оставляем или чуть увеличиваем */
.brand-item img[src*="IO"] {
    transform: scale(1.1);
}

.brand-item:hover img[src*="IO"] {
    transform: scale(1.2);
}

/* 
==========================================================================
26.0 RESPONSIVE & ACCESSIBILITY
==========================================================================
*/

/* Mobile Tweaks */
@media (max-width: 640px) {
    .marquee-section {
        padding-bottom: 4rem;
    }

    .marquee-track {
        gap: 3rem;
        /* Меньше отступ на мобильных */
        animation-duration: 20s;
        /* Быстрее на маленьких экранах */
    }

    /* На тачскринах нет ховера, поэтому показываем логотипы ярче сразу */
    .brand-item {
        opacity: 0.7;
    }
}

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
    .marquee-track {
        animation: none;
        /* Отключаем скролл */
        flex-wrap: wrap;
        /* Превращаем в сетку */
        justify-content: center;
        width: 100%;
        padding: 2rem 0;
    }

    .marquee-fade-left,
    .marquee-fade-right {
        display: none;
        /* Убираем маски, так как нет движения */
    }
}

/* 
==========================================================================
END OF STEP 5
==========================================================================
*/

/* 
====================================================================================================
PROJECT: INFINITY FLOW COMPUTERS (IFC)
COMPONENT: STYLE.CSS - STEP 6 OF 10
MODULE: ECOSYSTEM BENTO GRID
VERSION: 4.0.0 (PRODUCTION)
====================================================================================================
*/

/* 
==========================================================================
27.0 SECTION LAYOUT & HEADER
==========================================================================
*/

#ecosystem {
    position: relative;
    z-index: 10;
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

/* 
--------------------------------------------------------------------------
27.1 SYSTEM STATUS BADGE (HEADER)
Индикатор "IFC_SYSTEM_CORE_V2" в заголовке секции.
--------------------------------------------------------------------------
*/
.system-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    padding: 0.25rem 0.75rem;
    border-radius: 100vw;

    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);

    margin-bottom: 1.5rem;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.1);
    /* Green glow */

    cursor: help;
    /* Курсор вопроса при наведении */
    user-select: none;
}

/* Пульсирующая точка */
.system-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-green);
    animation: pulse-ring 2s infinite;
}

/* Текст статуса */
.system-status-text {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    /* 12px */
    color: #4ade80;
    /* Green-400 */
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

/* 
--------------------------------------------------------------------------
27.2 GRID CONTAINER (THE BENTO)
Основной контейнер сетки.
--------------------------------------------------------------------------
*/
.grid-bento {
    display: grid;
    /* 
       Mobile First: 2 колонки.
       Desktop: 6 колонок (переопределяется в media queries).
    */
    grid-template-columns: repeat(2, 1fr);

    /* Отступы между карточками (Fluid) */
    gap: var(--space-sm);

    /* Автоматическая высота рядов */
    grid-auto-rows: minmax(clamp(180px, 20vw, 300px), auto);
}

/* Tablet (iPad) Layout */
@media (min-width: 768px) {
    .grid-bento {
        gap: var(--space-md);
        /* На планшетах тоже 2 колонки, но с большими отступами */
    }
}

/* Desktop Layout */
@media (min-width: 1024px) {
    .grid-bento {
        /* 6 колонок для гибкого управления шириной (1/3, 1/2, 2/3, Full) */
        grid-template-columns: repeat(6, 1fr);
    }
}

/* 
==========================================================================
28.0 CARD ARCHITECTURE (BASE)
==========================================================================
Базовые стили для всех карточек в сетке.
*/

article[role="listitem"] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    /* Base Styles */
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-dim);
    border-radius: clamp(1.5rem, 2vw, 2.5rem);
    overflow: hidden;

    /* Animations */
    transition:
        transform 0.4s var(--ease-fluid),
        box-shadow 0.4s var(--ease-fluid),
        border-color 0.3s ease;

    /* Оптимизация производительности */
    will-change: transform, box-shadow;
    transform: translateZ(0);

    /* Включаем Container Queries */
    container-type: inline-size;
    container-name: bento-card;
}

/* --- ВОССТАНОВЛЕНО: Light Mode Override --- */
body.light-mode article[role="listitem"] {
    background-color: #ffffff;

    /* Четкая граница, чтобы отделить карточку от фона */
    border: 1px solid rgba(0, 0, 0, 0.08);
    /* Более контрастная тень */
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.05),
        0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Адаптация контента внутри узких карточек (из нового кода) */
@container bento-card (max-width: 380px) {
    .card-padding {
        padding: 1rem;
    }

    .card-title {
        font-size: 1.25rem;
    }

    .icon-box {
        width: 2.5rem;
        height: 2.5rem;
        margin-bottom: 0.5rem;
    }
}

/* 
   HOVER LIFT EFFECT
   Карточка "всплывает" при наведении.
*/
article[role="listitem"]:hover {
    transform: translateY(-6px);
    z-index: 2;
    /* Выносим на передний план */
    /* Глубокая тень */
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
}

body.light-mode article[role="listitem"]:hover {
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
}

/* Внутренние отступы */
.card-padding {
    padding: var(--space-md);
}

@media (min-width: 1024px) {
    .card-padding {
        padding: var(--space-lg);
    }
}

/* FIX: Темный градиент для заголовка в светлой теме */
body.light-mode #ecosystem h2 span[class*="text-transparent"] {
    /* Меняем светло-зеленый на насыщенный изумрудный и синий */
    background-image: linear-gradient(to right, #059669, #0891b2);
    -webkit-text-fill-color: transparent;
    filter: none;
    /* Убираем светящуюся тень, она грязнит на белом */
}

/* FIX: Цвет основного заголовка */
body.light-mode #ecosystem h2 {
    color: #111827;
    /* Черный вместо белого */
}

/* 
==========================================================================
29.0 COLOR CODING (THEMES & TOUCH OPTIMIZATION)
==========================================================================
*/

/* --- БАЗОВЫЕ СТИЛИ ИКОНОК И БЕЙДЖЕЙ (Без изменений) --- */
.icon-box-green {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: var(--accent-green);
}

.badge-green {
    background: rgba(16, 185, 129, 0.15);
    color: var(--accent-green);
    border: 1px solid rgba(16, 185, 129, 0.1);
}

.icon-box-purple {
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.2);
    color: var(--accent-purple);
}

.badge-purple {
    background: rgba(168, 85, 247, 0.15);
    color: var(--accent-purple);
    border: 1px solid rgba(168, 85, 247, 0.1);
}

.icon-box-yellow {
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.2);
    color: var(--accent-yellow);
}

.icon-box-pink {
    background: rgba(236, 72, 153, 0.1);
    border: 1px solid rgba(236, 72, 153, 0.2);
    color: var(--accent-pink);
}

/* --- ЛОГИКА ДЛЯ МЫШКИ (DESKTOP HOVER) --- */
@media (hover: hover) {
    .theme-green:hover {
        border-color: rgba(16, 185, 129, 0.5);
    }

    .theme-purple:hover {
        border-color: rgba(168, 85, 247, 0.5);
    }

    .theme-blue:hover {
        border-color: rgba(59, 130, 246, 0.5);
    }

    .theme-yellow:hover {
        border-color: rgba(234, 179, 8, 0.5);
    }

    .theme-pink:hover {
        border-color: rgba(236, 72, 153, 0.5);
    }

    /* Подсветка текста только при наведении мышкой */
    .theme-green:hover .card-title {
        color: #d1fae5;
    }

    .theme-purple:hover .card-title {
        color: #f3e8ff;
    }

    .theme-blue:hover .card-title {
        color: #dbeafe;
    }

    .theme-yellow:hover .card-title {
        color: #fef9c3;
    }

    .theme-pink:hover .card-title {
        color: #fce7f3;
    }
}

/* --- ЛОГИКА ДЛЯ ТАЧ-СКРИНОВ (MOBILE/TABLET) --- */
/* Показываем цветные границы сразу, но чуть прозрачнее */
@media (hover: none) {
    .theme-green {
        border-color: rgba(16, 185, 129, 0.3);
    }

    .theme-purple {
        border-color: rgba(168, 85, 247, 0.3);
    }

    .theme-blue {
        border-color: rgba(59, 130, 246, 0.3);
    }

    .theme-yellow {
        border-color: rgba(234, 179, 8, 0.3);
    }

    .theme-pink {
        border-color: rgba(236, 72, 153, 0.3);
    }
}

/* Общие стили иконок (Squircle) */
.icon-box {
    width: clamp(2.5rem, 3vw, 3.5rem);
    height: clamp(2.5rem, 3vw, 3.5rem);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s var(--ease-elastic);
}

article:hover .icon-box {
    transform: scale(1.1) rotate(5deg);
}

/* 
==========================================================================
30.0 LOGISTICS CARD SPECIALS (SVG MAP)
==========================================================================
Самая сложная карточка с анимированным путем.
*/

/* 
   ANIMATED DASH LINE
   Эффект "бегущих муравьев" по SVG пути.
*/
.animate-dash {
    stroke-dasharray: 10;
    /* Длина штриха */
    stroke-dashoffset: 100;
    /* Начальное смещение */
    animation: dash-flow 3s linear infinite;
    opacity: 0.6;
}

@keyframes dash-flow {
    to {
        stroke-dashoffset: 0;
        /* Сдвигаем к нулю для движения */
    }
}

/* 
   ROUTE DATA LIST (Right side of Logistics card)
   Техническая информация справа.
*/
.route-data {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: rgba(59, 130, 246, 0.6);
    /* Blue dim */
}

.route-row {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}

.theme-blue svg {
    mask-image: linear-gradient(to right, transparent 0%, black 40%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 40%);
    opacity: 0.4;
    pointer-events: none;
}

/* ДОБАВЛЕНО: Скрываем детали маршрута на узких экранах */
@media (max-width: 640px) {
    .theme-blue svg {
        opacity: 0.2;
        /* Делаем карту совсем тусклой на мобильном */
    }

    /* Скрываем правую колонку с данными маршрута, чтобы не перегружать */
    .route-data {
        display: none;
    }
}

/* 
==========================================================================
31.0 TYPOGRAPHY & HOVER EFFECTS
==========================================================================
*/

.card-title {
    font-size: var(--text-h3);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: var(--space-sm);
    color: var(--text-main);
    transition: color 0.3s ease;
}

.card-desc {
    font-size: var(--text-body);
    color: var(--text-muted);
    line-height: 1.5;
    transition: color 0.3s ease;
}

/* 
   TEXT HIGHLIGHTS ON HOVER
   При наведении заголовок окрашивается в цвет темы (светлый оттенок).
*/
.theme-green:hover .card-title {
    color: #d1fae5;
}

/* Emerald 100 */
.theme-purple:hover .card-title {
    color: #f3e8ff;
}

/* Purple 100 */
.theme-blue:hover .card-title {
    color: #dbeafe;
}

/* Blue 100 */
.theme-yellow:hover .card-title {
    color: #fef9c3;
}

/* Yellow 100 */
.theme-pink:hover .card-title {
    color: #fce7f3;
}

/* Pink 100 */

/* Light Mode Text Hover (Darker colors for contrast) */
body.light-mode .theme-green:hover .card-title {
    color: #065f46;
}

body.light-mode .theme-purple:hover .card-title {
    color: #581c87;
}

body.light-mode .theme-blue:hover .card-title {
    color: #1e40af;
}

body.light-mode .theme-yellow:hover .card-title {
    color: #854d0e;
}

body.light-mode .theme-pink:hover .card-title {
    color: #9d174d;
}

/* 
   GRADIENT OVERLAYS
   Фоновый градиент, появляющийся при наведении.
*/
.card-gradient-overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 0;
}

article:hover .card-gradient-overlay {
    opacity: 1;
}

/* Specific Gradients */
.grad-green {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, transparent 60%);
}

.grad-purple {
    background: linear-gradient(225deg, rgba(168, 85, 247, 0.15) 0%, transparent 60%);
}

.grad-blue {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.15) 0%, transparent 60%);
}

.grad-pink {
    background: linear-gradient(45deg, rgba(236, 72, 153, 0.15) 0%, transparent 60%);
}

/* Light Mode Gradients (Subtler) */
body.light-mode .grad-green {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, transparent 60%);
}

body.light-mode .grad-purple {
    background: linear-gradient(225deg, rgba(168, 85, 247, 0.05) 0%, transparent 60%);
}

/* FIX: Текст описания в светлой теме */
body.light-mode .card-desc {
    color: #4b5563;
    /* Gray-600 - Читаемый серый */
    font-weight: 500;
    /* Чуть жирнее для контраста */
}

/* FIX: Иконки в светлой теме (делаем фон темнее) */
body.light-mode .icon-box-green {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

body.light-mode .icon-box-purple {
    background: rgba(168, 85, 247, 0.15);
    color: #7c3aed;
}

body.light-mode .icon-box-yellow {
    background: rgba(234, 179, 8, 0.15);
    color: #b45309;
}

body.light-mode .icon-box-pink {
    background: rgba(236, 72, 153, 0.15);
    color: #be185d;
}

/* FIX: Карточка логистики (Синяя) */
body.light-mode .theme-blue .card-title {
    color: #1e40af;
    /* Темно-синий заголовок */
}

body.light-mode .theme-blue .card-desc {
    border-left-color: #3b82f6;
    /* Яркая линия слева */
    color: #374151;
    /* Темный текст */
}

/* 
==========================================================================
FIX: LIGHT MODE CONTRAST (HIGH VISIBILITY)
Добавьте этот блок в конец style.css или в секцию 31.0
==========================================================================
*/

/* 1. Заголовки карточек: Делаем почти черными и жирными */
body.light-mode .card-title {
    color: #111827 !important;
    /* Gray-900 (Почти черный) */
    font-weight: 800 !important;
    /* Extra Bold */
    letter-spacing: -0.03em;
}

/* 2. Описание: Делаем темно-серым (вместо бледного) */
body.light-mode .card-desc {
    color: #374151 !important;
    /* Gray-700 (Темно-серый) */
    font-weight: 600 !important;
    /* Semi Bold для читаемости */
    line-height: 1.5;
}

/* 3. Иконки: Делаем цвета насыщенными (не пастельными) */
body.light-mode .icon-box-green {
    color: #15803d;
    background: #dcfce7;
    border-color: #86efac;
}

body.light-mode .icon-box-purple {
    color: #7e22ce;
    background: #f3e8ff;
    border-color: #d8b4fe;
}

body.light-mode .icon-box-yellow {
    color: #a16207;
    background: #fef9c3;
    border-color: #fde047;
}

body.light-mode .icon-box-pink {
    color: #be185d;
    background: #fce7f3;
    border-color: #f9a8d4;
}

/* 4. Карточка Логистики (Синяя): Исправляем "45 Дней" */
body.light-mode .theme-blue h3 {
    color: #1e3a8a !important;
    /* Темно-синий */
}

body.light-mode .theme-blue h3 span.text-blue-500 {
    color: #2563eb !important;
    /* Ярко-синий */
}

body.light-mode .theme-blue h4 {
    color: #1e40af !important;
    /* Синий подзаголовок */
}

body.light-mode .theme-blue .card-desc {
    border-left-color: #2563eb !important;
    /* Яркая линия слева */
}

/* 5. Технические данные справа (маршрут) */
body.light-mode .route-data {
    color: #4b5563 !important;
    /* Темно-серый текст маршрута */
    font-weight: 600;
}

body.light-mode .route-row {
    border-bottom-color: #cbd5e1 !important;
    /* Видимые линии разделители */
}

/* 6. Бейджи (Margin Guard, White Import) */
body.light-mode article .rounded-full {
    font-weight: 800 !important;
    border-width: 1px;
}

/* Зеленый бейдж */
body.light-mode .badge-green {
    color: #14532d !important;
    background: #dcfce7 !important;
    border-color: #16a34a !important;
}

/* Фиолетовый бейдж */
body.light-mode .badge-purple {
    color: #581c87 !important;
    background: #f3e8ff !important;
    border-color: #9333ea !important;
}

/* ==========================================================================FIX: LIGHT MODE HIGH CONTRAST (ECOSYSTEM SECTION) Вставьте этот блок в конец style.css==========================================================================*/

/* 1. Заголовок секции "Архитектура Рыночного Доминирования" */
body.light-mode #ecosystem-heading {
    color: #111827;
    /* Почти черный */
}

/* Градиентный текст заголовка (делаем темнее и насыщеннее) */
body.light-mode #ecosystem-heading span[class*="text-transparent"] {
    background-image: linear-gradient(to right, #059669, #0891b2);
    /* Emerald-600 to Cyan-600 */
    -webkit-text-fill-color: transparent;
    filter: none;
    /* Убираем свечение, оно размывает текст на белом */
}

/* Описание под заголовком */
body.light-mode header p[class*="text-gray-400"] {
    color: #4b5563;
    /* Gray-600 (Темно-серый) */
    /* Линия сверху */
}

/* 2. Карточки: Заголовки (H3) */
body.light-mode .card-title {
    color: #0f172a !important;
    /* Slate-900 (Насыщенный черный) */
    font-weight: 800 !important;
    /* Extra Bold */
}

/* 3. Карточки: Описание (P) */
body.light-mode .card-desc {
    color: #334155 !important;
    /* Slate-700 (Темно-серый, высокий контраст) */
    font-weight: 500;
    /* Medium вес для лучшей читаемости */
}

/* 4. Иконки и Бейджи (Делаем фон темнее, текст ярче) */

/* Green (Profit) */
body.light-mode .icon-box-green {
    background: #dcfce7;
    color: #166534;
    border-color: #86efac;
}

body.light-mode .badge-green {
    background: #f0fdf4;
    color: #14532d;
    border-color: #bbf7d0;
}

/* Purple (Legal) */
body.light-mode .icon-box-purple {
    background: #f3e8ff;
    color: #6b21a8;
    border-color: #d8b4fe;
}

body.light-mode .badge-purple {
    background: #faf5ff;
    color: #581c87;
    border-color: #e9d5ff;
}

/* Yellow (Service) */
body.light-mode .icon-box-yellow {
    background: #fef9c3;
    color: #854d0e;
    border-color: #fde047;
}

/* Pink (Marketing) */
body.light-mode .icon-box-pink {
    background: #fce7f3;
    color: #9d174d;
    border-color: #f9a8d4;
}

/* 5. Карточка Логистики (Синяя - Самая сложная) */
body.light-mode .theme-blue h3 {
    color: #1e3a8a !important;
    /* Темно-синий (900) */
}

body.light-mode .theme-blue h3 span.text-blue-500 {
    color: #2563eb !important;
    /* Ярко-синий (600) */
}

body.light-mode .theme-blue h4 {
    color: #1e40af !important;
    /* Синий (800) */
}

body.light-mode .theme-blue .card-desc {
    border-left-color: #2563eb !important;
    /* Яркая линия */
    color: #334155 !important;
}

/* Технические данные справа (маршрут) */
body.light-mode .route-data {
    color: #475569 !important;
    /* Slate-600 */
    font-weight: 600;
}

body.light-mode .route-row {
    border-bottom-color: #cbd5e1 !important;
    /* Видимые линии */
}

body.light-mode .text-blue-400 {
    color: #2563eb !important;
    /* Ярко-синий для статуса ARRIVED */
}

/* 6. Обводка карточек (чтобы не сливались с белым фоном) */
body.light-mode article[role="listitem"] {
    border: 1px solid #e2e8f0;
    /* Slate-200 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

/* 
==========================================================================
32.0 COLUMN SPANS (UTILITIES)
Управление шириной карточек в сетке.
==========================================================================
*/

/* Mobile/Tablet Default: Span 2 (Full Width) or Span 1 (Half Width) */
.col-span-2 {
    grid-column: span 1;
}

/* На мобилке это половина */
.col-span-3 {
    grid-column: span 2;
}

/* На мобилке это полная ширина */
.col-span-6 {
    grid-column: span 2;
}

/* На мобилке это полная ширина */

/* Desktop Overrides (1024px+) */
@media (min-width: 1024px) {
    .col-span-2 {
        grid-column: span 2;
    }

    /* 2 из 6 (1/3) */
    .col-span-3 {
        grid-column: span 3;
    }

    /* 3 из 6 (1/2) */
    .col-span-6 {
        grid-column: span 6;
    }

    /* 6 из 6 (Full) */
}

/* 
==========================================================================
FIX: ECOSYSTEM LIGHT MODE (HIGH CONTRAST & VISIBILITY)
Исправление невидимого текста в карточках для светлой темы
==========================================================================
*/

/* 1. Главный заголовок секции (Архитектура...) */
body.light-mode #ecosystem h2 {
    color: #111827 !important;
    /* Почти черный */
    text-shadow: none !important;
}

/* Градиентная часть заголовка (делаем темнее и насыщеннее) */
body.light-mode #ecosystem h2 span.text-transparent {
    background-image: linear-gradient(to right, #059669, #0891b2) !important;
    /* Emerald to Cyan */
    -webkit-text-fill-color: transparent !important;
    filter: none !important;
}

/* 2. Заголовки карточек (H3) - Делаем черными и жирными */
body.light-mode #ecosystem article h3 {
    color: #0f172a !important;
    /* Slate-900 */
    font-weight: 800 !important;
}

/* 3. Описание карточек (P) - Делаем темно-серым */
body.light-mode #ecosystem article p {
    color: #334155 !important;
    /* Slate-700 */
    font-weight: 600 !important;
    /* Жирнее для читаемости */
    line-height: 1.6 !important;
}

/* 4. Жирный текст внутри описания (теги <b> из JS) */
body.light-mode #ecosystem article p b {
    color: #000000 !important;
    /* Абсолютно черный */
    font-weight: 900 !important;
}

/* 
   5. СПЕЦИАЛЬНАЯ КАРТОЧКА ЛОГИСТИКИ (СИНЯЯ) 
   Там цифра "45" и маршрут были белыми. Исправляем.
*/
/* Большая цифра "45" */
body.light-mode #ecosystem .theme-blue h3 span:first-child {
    color: #1e3a8a !important;
    /* Темно-синий */
}

/* Слово "Дней" */
body.light-mode #ecosystem .theme-blue h3 span.text-blue-500 {
    color: #2563eb !important;
    /* Ярко-синий */
}

/* Подзаголовок "Квантовый скачок..." */
body.light-mode #ecosystem .theme-blue h4 {
    color: #1e40af !important;
    /* Синий */
    font-weight: 700 !important;
}

/* Линия слева от текста */
body.light-mode #ecosystem .theme-blue p {
    border-left-color: #2563eb !important;
}

/* 
   6. ИКОНКИ И БЕЙДЖИ (Делаем ярче на белом фоне)
*/
body.light-mode #ecosystem .icon-box-green,
body.light-mode #ecosystem .badge-green {
    background-color: #dcfce7 !important;
    color: #166534 !important;
    border-color: #86efac !important;
}

body.light-mode #ecosystem .icon-box-purple,
body.light-mode #ecosystem .badge-purple {
    background-color: #f3e8ff !important;
    color: #6b21a8 !important;
    border-color: #d8b4fe !important;
}

/* 7. Обводка карточек (чтобы не сливались с фоном) */
body.light-mode #ecosystem article {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

/* 
==========================================================================
END OF STEP 6
==========================================================================
*/
/* 
====================================================================================================
PROJECT: INFINITY FLOW COMPUTERS (IFC)
COMPONENT: STYLE.CSS - STEP 7 OF 10
MODULE: EXCLUSIVE HUB (THE TRINITY)
VERSION: 4.0.0 (PRODUCTION)
====================================================================================================
*/

/* 
====================================================================================================
PROJECT: INFINITY FLOW COMPUTERS (IFC)
COMPONENT: STYLE.CSS - STEP 7 OF 10
MODULE: EXCLUSIVE HUB (THE TRINITY) - ULTIMATE EDITION
VERSION: 5.0.0 (HIGH FIDELITY & RESPONSIVE)
LINES: ~650
====================================================================================================
*/

/* 
==========================================================================
33.0 SECTION LAYOUT & ATMOSPHERE
==========================================================================
*/

#exclusive-hub {
    position: relative;
    z-index: 20;
    width: 100%;

    /* Fluid Padding: Больше воздуха на больших экранах */
    padding-top: clamp(4rem, 8vh, 10rem);
    padding-bottom: clamp(4rem, 8vh, 10rem);

    /* Предотвращение переполнения */
    overflow: hidden;

    /* Плавный переход фона при смене темы */
    transition: background-color 0.5s ease;
}

/* 
   DECORATIVE BACKGROUND ELEMENTS
   Фоновые элементы, создающие глубину секции.
*/
#exclusive-hub::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;

    /* Тонкая сетка на фоне */
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 100px 100px;

    mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 80%);

    pointer-events: none;
    z-index: -1;
}

/* Light Mode Background Fix */
body.light-mode #exclusive-hub::before {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
}

/* 
==========================================================================
33.1 HUB HEADER COMPONENTS
==========================================================================
*/

/* 
   BADGE: "EXCLUSIVE RIGHTS"
   Сложный стиль с внутренней тенью и блюром.
*/
.hub-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;

    padding: 0.6rem 1.5rem;
    margin-bottom: var(--space-md);

    /* Glassmorphism */
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 100vw;

    box-shadow:
        0 4px 20px -5px rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);

    user-select: none;
    cursor: default;

    transition: all 0.3s ease;
}

.hub-badge:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

/* Light Mode Badge */
body.light-mode .hub-badge {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow:
        0 4px 15px -5px rgba(0, 0, 0, 0.05),
        inset 0 0 0 1px rgba(255, 255, 255, 1);
}

/* 
   HEADER TYPOGRAPHY
   Адаптивные размеры шрифтов для заголовка.
*/
.hub-title {
    font-size: clamp(2.5rem, 8vw, 7rem);
    /* Fluid Size */
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: #000000;

    margin-bottom: var(--space-md);
    text-align: center;

    /* Градиентный текст (опционально, если поддерживается) */
    background: linear-gradient(180deg, var(--text-main) 20%, rgba(255, 255, 255, 0.5) 100%);
    -webkit-background-clip: text;
    background-clip: text;

    will-change: transform, opacity;
}

/* Light Mode Title */
body.light-mode .hub-title {
    color: #000000;
    background: none;
    -webkit-text-fill-color: initial;
}


/* 
==========================================================================
CATALOG CTA SECTION STYLES
==========================================================================
*/

/* Медленная прокрутка фонового текста */
@keyframes marquee-slow {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.animate-marquee-slow {
    animation: marquee-slow 60s linear infinite;
    will-change: transform;
}

/* LIGHT MODE ADAPTATION (FIX) */
body.light-mode .animate-marquee-slow .text-white {
    color: #000000 !important;
    opacity: 0.05;
}

body.light-mode .group.relative.inline-flex {
    border-color: rgba(0, 0, 0, 0.2) !important;
}

body.light-mode .group.relative.inline-flex:hover {
    border-color: #000000 !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
}

body.light-mode .group span[data-i18n="cta_button"] {
    color: #000000 !important;
}

body.light-mode .group svg {
    color: #000000 !important;
}

/* 
==========================================================================
34.0 TRINITY CARD ARCHITECTURE (THE CORE)
==========================================================================
*/

.card-trinity {
    position: relative;
    display: flex;
    flex-direction: column;

    /* 
       FLUID HEIGHT SYSTEM
       Карточки меняют высоту в зависимости от устройства для идеальных пропорций.
    */
    height: 500px;
    /* Mobile Default */

    /* Base Appearance */
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-dim);
    border-radius: 2rem;

    /* Clipping & Overflow */
    overflow: hidden;
    isolation: isolate;
    /* Создает новый контекст наложения */

    /* Interaction */
    cursor: pointer;

    /* Performance Optimization */
    transform: translateZ(0);
    will-change: transform, box-shadow, border-color;

    /* Transitions */
    transition:
        border-color 0.4s ease,
        transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
        box-shadow 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 
   RESPONSIVE HEIGHTS
   Тонкая настройка высоты карточек.
*/
@media (min-width: 640px) {
    .card-trinity {
        height: 600px;
    }
}

@media (min-width: 1024px) {
    .card-trinity {
        height: 650px;
        border-radius: 2.5rem;
    }
}

@media (min-width: 1440px) {
    .card-trinity {
        height: 750px;
        border-radius: 3rem;
    }
}

@media (min-width: 1920px) {
    .card-trinity {
        height: 850px;
    }
}

/* 
   LIGHT MODE CARD BASE
*/
body.light-mode .card-trinity {
    background-color: #ffffff;
    border-color: #e5e7eb;
    /* Slate-200 */
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.02),
        0 10px 15px -3px rgba(0, 0, 0, 0.02);
}

/* 
   HOVER STATE (CONTAINER)
   Подъем карточки и усиление теней.
*/
.card-trinity:hover {
    transform: translateY(-12px) scale(1.005);
    z-index: 10;
    /* Тень берется из переменных бренда (см. ниже) */
}

/* 
==========================================================================
35.0 BRAND SPECIFIC THEMES (VARIABLES)
==========================================================================
*/

/* OCYPUS (Yellow/Gold) */
.card-trinity[aria-controls="modal-ocypus"] {
    --brand-color: #F5D450;
    --brand-glow: rgba(245, 212, 80, 0.4);
    --brand-bg-tint: rgba(245, 212, 80, 0.05);
}

/* IO (Cyan/Neon) */
.card-trinity[aria-controls="modal-io"] {
    --brand-color: #00E5FF;
    --brand-glow: rgba(0, 229, 255, 0.4);
    --brand-bg-tint: rgba(0, 229, 255, 0.05);
}

/* LUNACY (Magenta/Pink) */
.card-trinity[aria-controls="modal-lunacy"] {
    --brand-color: #FF00FF;
    --brand-glow: rgba(255, 0, 255, 0.4);
    --brand-bg-tint: rgba(255, 0, 255, 0.05);
}

/* Применение переменных при ховере */
.card-trinity:hover {
    border-color: var(--brand-color);
    box-shadow:
        0 20px 50px -10px var(--brand-glow),
        0 0 0 1px var(--brand-color) inset;
    /* Внутренняя обводка */
}

/* Light Mode Hover Adjustments */
body.light-mode .card-trinity:hover {
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.15),
        0 0 0 1px var(--brand-color) inset;
}

/* 
==========================================================================
36.0 INTERNAL ANIMATIONS & LAYOUT
==========================================================================
*/

/* 
--------------------------------------------------------------------------
36.1 LOGO CONTAINER (CENTERED & ANIMATED)
--------------------------------------------------------------------------
*/
.trinity-logo-container {
    position: absolute;
    inset: 0;
    /* Full width/height */

    display: flex;
    align-items: center;
    justify-content: center;

    padding: var(--space-lg);
    z-index: 10;

    /* Сложная кривая Безье для "дорогой" анимации */
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

/* 
   HOVER LOGO MOVEMENT
   Логотип уезжает вверх на 35% от высоты карточки.
*/
.card-trinity:hover .trinity-logo-container {
    transform: translateY(-35%);
}

/* 
--------------------------------------------------------------------------
36.2 LOGO IMAGE STYLING
--------------------------------------------------------------------------
*/
.logo-trinity {
    /* Адаптивный размер логотипа */
    width: clamp(140px, 40%, 300px);
    height: auto;
    object-fit: contain;

    /* Dark Mode: White Logo */
    filter: brightness(0) invert(1) drop-shadow(0 0 20px rgba(255, 255, 255, 0.1));

    transition:
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.3s ease;
}

/* 
   HOVER LOGO SCALE
   Уменьшаем логотип, чтобы освободить место для текста.
*/
.card-trinity:hover .logo-trinity {
    transform: scale(0.65);
    /* Убираем тень при уменьшении для чистоты */
    filter: brightness(0) invert(1);
}

/* Light Mode Logo Logic */
body.light-mode .logo-trinity {
    filter: brightness(0);
    /* Pure Black */
}

body.light-mode .card-trinity:hover .logo-trinity {
    filter: brightness(0);
}

/* 
--------------------------------------------------------------------------
36.3 CONTENT CONTAINER (SLIDE UP REVEAL)
--------------------------------------------------------------------------
*/
.trinity-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;

    padding: 2.5rem;
    z-index: 20;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    /* Начальное состояние: Скрыто внизу */
    transform: translateY(100%);
    opacity: 0;

    /* Анимация выезда */
    transition:
        transform 0.6s cubic-bezier(0.19, 1, 0.22, 1),
        opacity 0.4s ease;

    /* Градиент под текстом для читаемости */
    background: linear-gradient(to top, var(--bg-secondary) 0%, rgba(0, 0, 0, 0) 100%);
}

/* Light Mode Gradient */
body.light-mode .trinity-content {
    background: linear-gradient(to top, #ffffff 20%, rgba(255, 255, 255, 0) 100%);
}

/* HOVER REVEAL */
.card-trinity:hover .trinity-content {
    transform: translateY(0);
    opacity: 1;
    transition-delay: 0.1s;
    /* Небольшая задержка после начала движения лого */
}

/* 
--------------------------------------------------------------------------
36.4 BACKGROUND GLOW EFFECT
--------------------------------------------------------------------------
*/
.trinity-bg-glow {
    position: absolute;
    inset: 0;

    /* Градиент сверху вниз цвета бренда */
    background: radial-gradient(circle at 50% 0%,
            var(--brand-color) 0%,
            transparent 60%);

    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    mix-blend-mode: screen;
    /* Красивое смешивание с черным */
    z-index: 1;
}

.card-trinity:hover .trinity-bg-glow {
    opacity: 0.15;
    /* Легкое свечение */
}

/* Light Mode Glow */
body.light-mode .trinity-bg-glow {
    mix-blend-mode: multiply;
    opacity: 0;
}

body.light-mode .card-trinity:hover .trinity-bg-glow {
    opacity: 0.05;
    /* Очень слабое в светлой теме */
}

/* 
==========================================================================
37.0 TYPOGRAPHY & INTERACTIVE ELEMENTS
==========================================================================
*/

/* 
   BRAND TAG (e.g. "Pro Gaming Gear")
*/
.trinity-tag {
    align-self: flex-start;
    display: inline-block;

    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;

    color: var(--brand-color);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);

    padding: 0.35rem 0.85rem;
    border-radius: 6px;
    margin-bottom: 1rem;

    /* Stagger Animation Setup */
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

/* Light Mode Tag */
body.light-mode .trinity-tag {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #111827;
}

/* 
   CARD TITLE (H3)
*/
.title-trinity {
    font-size: clamp(1.5rem, 2vw, 2.25rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--text-main);
    margin-bottom: 0.75rem;

    /* Stagger Animation Setup */
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

/* Light Mode Title */
body.light-mode .title-trinity {
    color: #000000;
}

/* 
   CARD DESCRIPTION (P)
*/
.desc-trinity {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 2rem;

    /* Ограничение количества строк (опционально) */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;

    /* Stagger Animation Setup */
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

/* Light Mode Description */
body.light-mode .desc-trinity {
    color: #4b5563;
    font-weight: 500;
}

/* 
   ACTION BUTTON
*/
.btn-trinity {
    width: 100%;
    padding: 1.1rem;

    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;

    color: var(--text-main);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.1em;

    cursor: pointer;
    overflow: hidden;
    position: relative;

    /* Stagger Animation Setup */
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

/* Button Hover Effect */
.btn-trinity:hover {
    background-color: var(--brand-color);
    border-color: var(--brand-color);
    color: #000000;
    /* Всегда черный текст на цветном фоне */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

/* Light Mode Button */
body.light-mode .btn-trinity {
    background: #111827;
    color: #ffffff;
    border: none;
}

body.light-mode .btn-trinity:hover {
    background-color: var(--brand-color);
    color: #000000;
}

/* 
   STAGGERED ANIMATION DELAYS
   Элементы появляются по очереди при наведении на карточку.
*/
.card-trinity:hover .trinity-tag {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

.card-trinity:hover .title-trinity {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.15s;
}

.card-trinity:hover .desc-trinity {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

.card-trinity:hover .btn-trinity {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.25s;
}

/* 
==========================================================================
38.0 MOBILE & TOUCH OPTIMIZATIONS
==========================================================================
*/

/* 
   TOUCH DEVICES (Tablets & Phones)
   На устройствах без мыши (hover: none) мы показываем контент сразу.
*/
@media (hover: none) {

    /* Логотип всегда поднят */
    .trinity-logo-container {
        transform: translateY(-30%);
        padding-top: 4rem;
    }

    .logo-trinity {
        transform: scale(0.75);
    }

    /* Контент всегда виден */
    .trinity-content {
        transform: translateY(0);
        opacity: 1;
        padding: 1.5rem;
        /* Более плотный градиент для читаемости */
        background: linear-gradient(to top, var(--bg-secondary) 40%, transparent 100%);
    }

    /* Light Mode Mobile Gradient */
    body.light-mode .trinity-content {
        background: linear-gradient(to top, #ffffff 40%, transparent 100%);
    }

    /* Отключаем задержки анимации */
    .trinity-tag,
    .title-trinity,
    .desc-trinity,
    .btn-trinity {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0s;
    }

    /* Кнопка более заметна по умолчанию */
    .btn-trinity {
        background-color: var(--bg-core);
        border-color: var(--border-light);
    }

    body.light-mode .btn-trinity {
        background-color: #000000;
        color: #ffffff;
    }
}

/* 
   SMALL MOBILE SCREENS (< 480px)
   Дополнительная адаптация для узких экранов.
*/
@media (max-width: 480px) {
    .card-trinity {
        height: 450px;
        border-radius: 1.5rem;
    }

    .trinity-logo-container {
        transform: translateY(-25%);
    }

    .logo-trinity {
        width: 160px;
    }

    .title-trinity {
        font-size: 1.5rem;
    }

    .desc-trinity {
        font-size: 0.85rem;
        -webkit-line-clamp: 2;
        /* Меньше текста */
        margin-bottom: 1rem;
    }

    .trinity-content {
        padding: 1.25rem;
    }
}

/* 
==========================================================================
39.0 ACCESSIBILITY & PRINT
==========================================================================
*/

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {

    .card-trinity,
    .trinity-logo-container,
    .trinity-content,
    .logo-trinity {
        transition: none !important;
        transform: none !important;
    }

    .trinity-content {
        opacity: 1;
        position: static;
        /* Статичное позиционирование */
        background: var(--bg-secondary);
    }

    .trinity-logo-container {
        position: static;
        height: 200px;
    }

    .card-trinity:hover {
        transform: none;
        box-shadow: none;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: more) {
    .card-trinity {
        border: 2px solid currentColor;
    }

    .trinity-tag,
    .btn-trinity {
        border: 2px solid currentColor;
        background: transparent;
        color: currentColor;
    }
}

/* 
==========================================================================
FIX: TRINITY SECTION LIGHT MODE (CLEAN & DARK TEXT)
Убираем сетку и делаем текст черным.
==========================================================================
*/

/* 1. УБИРАЕМ ФОНОВУЮ СЕТКУ (КВАДРАТИКИ) */
#exclusive-hub::before {
    display: none !important;
}

/* 2. ЗАГОЛОВОК "THE TRINITY" */
body.light-mode .hub-title {
    color: #000000 !important;
    /* Глубокий черный */
    background: none !important;
    /* Убираем градиент */
    -webkit-text-fill-color: initial !important;
    /* Убираем прозрачность текста */
    text-shadow: none !important;
    font-weight: 900 !important;
}

/* 3. ОПИСАНИЕ ПОД ЗАГОЛОВКОМ */
body.light-mode #exclusive-hub p {
    color: #374151 !important;
    /* Темно-серый, читаемый */
    font-weight: 600 !important;
    /* Чуть жирнее */
}

/* 4. БЕЙДЖ "EXCLUSIVE RIGHTS" */
body.light-mode .hub-badge {
    background-color: #f3f4f6 !important;
    /* Серый фон */
    border: 1px solid #d1d5db !important;
    /* Темная рамка */
    box-shadow: none !important;
}

body.light-mode .hub-badge span {
    color: #000000 !important;
    /* Черный текст внутри бейджа */
    font-weight: 700 !important;
}

/* 5. ЛИНИЯ РАЗДЕЛИТЕЛЬ */
body.light-mode #exclusive-hub .border-t {
    border-top-color: #d1d5db !important;
    /* Видимая серая линия */
}


/* 
   LIGHT MODE TITLE FIX
   Принудительно делаем текст черным, отключая градиенты и прозрачность.
*/
body.light-mode #exclusive-hub .hub-title {
    color: #000000 !important;
    /* Черный цвет */
    background: none !important;
    /* Убираем фон-градиент */
    -webkit-background-clip: border-box !important;
    /* Отключаем обрезку по тексту */
    background-clip: border-box !important;
    -webkit-text-fill-color: #000000 !important;
    /* Заливаем текст черным (самое важное!) */
    opacity: 1 !important;
}

/* 
==========================================================================
FIX: TRINITY SECTION - LIGHT MODE VISIBILITY
Делаем текст черным в светлой теме
==========================================================================
*/

/* 1. Заголовок "THE TRINITY" */
body.light-mode #trinity-heading {
    color: #000000 !important;
    /* Глубокий черный */
    background: none !important;
    /* Убираем градиент */
    -webkit-text-fill-color: initial !important;
    /* Отключаем прозрачность */
    opacity: 1 !important;
}

/* 2. Описание под заголовком */
body.light-mode #exclusive-hub p {
    color: #374151 !important;
    /* Темно-серый (читаемый) */
    font-weight: 600 !important;
    /* Жирнее */
    border-top-color: #d1d5db !important;
    /* Линия-разделитель */
}

/* 3. Бейдж "EXCLUSIVE DISTRIBUTION RIGHTS" */
body.light-mode .hub-badge {
    background-color: #f3f4f6 !important;
    /* Серый фон */
    border: 1px solid #d1d5db !important;
    box-shadow: none !important;
}

body.light-mode .hub-badge span {
    color: #000000 !important;
    /* Черный текст */
    font-weight: 700 !important;
}

/* 4. Исправление карточек брендов в светлой теме */
body.light-mode .card-trinity {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

body.light-mode .title-trinity {
    color: #000000 !important;
}

body.light-mode .desc-trinity {
    color: #4b5563 !important;
}

/*  311775880
==========================================================================
END OF STEP 7
==========================================================================
*/
/* 
==========================================================================
END OF STEP 7
==========================================================================
*/

/* 
====================================================================================================
PROJECT: INFINITY FLOW COMPUTERS (IFC)
COMPONENT: STYLE.CSS - STEP 8 OF 10
MODULE: MODALS & B2B FORM ENGINE
VERSION: 4.0.0 (PRODUCTION)
====================================================================================================
*/

/* 
==========================================================================
38.0 MODAL WINDOW ARCHITECTURE
==========================================================================
*/

/* 
--------------------------------------------------------------------------
38.1 BACKDROP OVERLAY
Затемнение фона при открытии модалки.
--------------------------------------------------------------------------
*/
.modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: -1;
    /* Находится внутри контейнера модалки, позади контента */
    transition: opacity 0.5s ease;
}

/* 
--------------------------------------------------------------------------
38.2 MODAL CONTENT CONTAINER
Карточка с контентом.
--------------------------------------------------------------------------
*/
.modal-content {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

    /* Mobile: Full Screen */
    min-height: 100vh;
    border-radius: 0;

    background-color: #0a0a0a;
    /* Deep dark base */
    border: 1px solid var(--border-dim);
    box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.8);

    /* Animation State: Управляется JS (opacity/scale) */
    transform-origin: center center;
    transition: all 0.5s var(--ease-elastic);

    overflow: hidden;
}

/* Desktop: Rounded Card */
@media (min-width: 768px) {
    .modal-content {
        min-height: auto;
        border-radius: 3rem;
        margin-top: 5vh;
        margin-bottom: 5vh;
    }
}

/* Light Mode Modal */
body.light-mode .modal-content {
    background-color: #ffffff;
    border-color: var(--border-light);
    box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.15);
}

/* 
--------------------------------------------------------------------------
38.3 CLOSE BUTTON
--------------------------------------------------------------------------
*/
.modal-close-btn {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    z-index: 50;

    width: 3rem;
    height: 3rem;
    border-radius: 50%;

    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;

    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-close-btn:hover {
    background: white;
    color: black;
    transform: rotate(90deg);
}

/* Light Mode Close Button */
body.light-mode .modal-close-btn {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.1);
    color: black;
}

body.light-mode .modal-close-btn:hover {
    background: black;
    color: white;
}

/* 
==========================================================================
39.0 MODAL INTERNAL LAYOUT
==========================================================================
*/

/* 
--------------------------------------------------------------------------
39.1 MODAL HERO HEADER
Верхняя часть модалки с логотипом и градиентом.
--------------------------------------------------------------------------
*/
.modal-hero {
    position: relative;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Радиальный градиент для фокуса */
    background: radial-gradient(circle at center, #1a1a1a 0%, #000000 100%);
}

@media (min-width: 768px) {
    .modal-hero {
        height: 400px;
    }
}

body.light-mode .modal-hero {
    background: radial-gradient(circle at center, #f3f4f6 0%, #ffffff 100%);
}

/* 
--------------------------------------------------------------------------
39.2 FEATURE CARDS (GRID)
Иконки с описанием внутри модалки.
--------------------------------------------------------------------------
*/
.modal-feature-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1.5rem;
    padding: 1.5rem;
    transition: background 0.3s ease;
}

.modal-feature-card:hover {
    background: rgba(255, 255, 255, 0.05);
}

body.light-mode .modal-feature-card {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.05);
}

/* 
--------------------------------------------------------------------------
39.3 SPECS LIST (RIGHT COLUMN)
Список характеристик.
--------------------------------------------------------------------------
*/
.modal-specs-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-dim);
}

.modal-specs-label {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.modal-specs-value {
    color: var(--text-main);
    font-weight: 600;
    font-family: var(--font-mono);
}

/* 
==========================================================================
40.0 B2B SECTION LAYOUT
==========================================================================
*/

#b2b {
    position: relative;
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
    overflow: hidden;
}

/* 
   SPOTLIGHT CARD (FORM CONTAINER)
   Эффект "прожектора" и стекла для формы.
*/
.spotlight-card {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-dim);
    border-radius: 2rem;
    padding: 2rem;
    box-shadow: var(--shadow-hard);
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .spotlight-card {
        padding: 3rem;
        border-radius: 3rem;
    }
}

/* Light Mode Spotlight */
body.light-mode .spotlight-card {
    background: #ffffff;
    border-color: var(--border-light);
    box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.1);
}

/* 
==========================================================================
41.0 APPLE-STYLE FORM INPUTS
==========================================================================
Инпуты с плавающим лейблом (Floating Label).
*/

/* 
--------------------------------------------------------------------------
41.1 INPUT GROUP WRAPPER
--------------------------------------------------------------------------
*/
.apple-input-group {
    position: relative;
    margin-bottom: var(--space-md);
}

/* 
--------------------------------------------------------------------------
41.2 THE INPUT FIELD
Прозрачный фон, только нижняя граница.
--------------------------------------------------------------------------
*/
.apple-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-light);
    border-radius: 0;
    /* Remove default radius */

    color: var(--text-main);
    font-size: 1rem;
    padding: 1rem 0 0.5rem 0;

    outline: none;
    transition: border-color 0.3s ease;
}

/* Fix for Chrome Autofill Background */
.apple-input:-webkit-autofill,
.apple-input:-webkit-autofill:hover,
.apple-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-main);
    -webkit-box-shadow: 0 0 0px 1000px var(--bg-core) inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* 
--------------------------------------------------------------------------
41.3 THE FLOATING LABEL
Лейбл, который "улетает" вверх при фокусе.
--------------------------------------------------------------------------
*/
.apple-label {
    position: absolute;
    left: 0;
    top: 1rem;
    /* Aligned with input text */

    color: var(--text-dim);
    font-size: 1rem;
    pointer-events: none;
    /* Allow clicking through to input */

    transform-origin: left top;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
}

/* 
   ACTIVE STATE (Focus or Has Value)
   :not(:placeholder-shown) требует наличия placeholder=" " в HTML.
*/
.apple-input:focus~.apple-label,
.apple-input:not(:placeholder-shown)~.apple-label {
    transform: translateY(-1.4rem) scale(0.85);
    color: var(--accent-purple);
}

/* 
--------------------------------------------------------------------------
41.4 ANIMATED BOTTOM LINE
Линия, которая расширяется при фокусе.
--------------------------------------------------------------------------
*/
.apple-input-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: var(--accent-purple);
    transition: width 0.4s var(--ease-out-expo);
}

.apple-input:focus~.apple-input-line {
    width: 100%;
}

/* Validation Error State */
.apple-input:invalid:not(:placeholder-shown) {
    border-bottom-color: #ef4444;
}

.apple-input:invalid:not(:placeholder-shown)~.apple-label {
    color: #ef4444;
}

/* 
==========================================================================
42.0 SYSTEM STATUS WIDGET (TERMINAL STYLE)
==========================================================================
Виджет слева от формы, показывающий статус системы.
*/

.system-widget {
    background: #050505;
    border: 1px solid var(--border-dim);
    border-radius: 1rem;
    padding: 1.5rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    position: relative;
    overflow: hidden;
}

/* Light Mode Widget */
body.light-mode .system-widget {
    background: #ffffff;
    border-color: var(--border-light);
    box-shadow: var(--shadow-soft);
}

/* 
   SCANLINE ANIMATION
   Эффект старого монитора.
*/
.scanline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            transparent 50%,
            rgba(0, 0, 0, 0.1) 51%,
            transparent 100%);
    background-size: 100% 4px;
    pointer-events: none;
    opacity: 0.3;
}

/* Status Rows */
.status-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed var(--border-dim);
}

.status-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.status-key {
    color: var(--text-dim);
}

.status-val {
    color: var(--text-main);
}

.status-val.online {
    color: var(--accent-green);
}

.status-val.busy {
    color: var(--accent-yellow);
}

/* 
==========================================================================
43.0 CUSTOM CHECKBOX
==========================================================================
*/

.custom-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;

    background-color: transparent;
    border: 1px solid var(--border-medium);
    border-radius: 4px;

    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.custom-checkbox:checked {
    background-color: var(--accent-purple);
    border-color: var(--accent-purple);
}

/* Checkmark Icon (CSS Only) */
.custom-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-checkbox:focus-visible {
    outline: 2px solid var(--accent-purple);
    outline-offset: 2px;
}

/* 
--------------------------------------------------------------------------
43.1 B2B LIGHT MODE OVERRIDES (FIX)
Специальные стили для светлой темы: черная кнопка и контрастный текст.
--------------------------------------------------------------------------
*/

/* 1. Левая колонка: Заголовки и Текст */
body.light-mode #b2b h2 {
    color: #000000 !important;
}

body.light-mode #b2b h2 span.text-transparent {
    background-image: linear-gradient(to right, #7c3aed, #0891b2) !important;
    -webkit-text-fill-color: transparent !important;
}

body.light-mode #b2b p {
    color: #374151 !important;
    /* Темно-серый */
    border-left-color: #d1d5db !important;
}

/* 2. Блок "Ваши привилегии" (список) */
body.light-mode #b2b .bg-white\/5 {
    background-color: #f3f4f6 !important;
    /* Светло-серый фон */
    border: 1px solid #e5e7eb !important;
}

body.light-mode #b2b .bg-white\/5 h4 {
    color: #111827 !important;
    /* Черный заголовок */
    border-bottom-color: #d1d5db !important;
}

body.light-mode #b2b .bg-white\/5 ul li {
    color: #4b5563 !important;
    /* Темный текст */
}

/* 3. Форма и Поля ввода */
body.light-mode .spotlight-card {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.1) !important;
}

body.light-mode #b2b input,
body.light-mode #b2b textarea {
    color: #000000 !important;
    /* Черный текст ввода */
    border-bottom-color: #9ca3af !important;
}

body.light-mode #b2b label {
    color: #6b7280 !important;
}

/* Активный лейбл (фиолетовый) */
body.light-mode #b2b input:focus~label,
body.light-mode #b2b input:not(:placeholder-shown)~label,
body.light-mode #b2b textarea:focus~label,
body.light-mode #b2b textarea:not(:placeholder-shown)~label {
    color: #7c3aed !important;
    font-weight: 700 !important;
}

/* Чекбокс */
body.light-mode #b2b input[type="checkbox"] {
    border-color: #6b7280 !important;
}

body.light-mode #b2b label[for="privacy"] {
    color: #4b5563 !important;
}

/* 
   4. КНОПКА "ОТПРАВИТЬ ЗАЯВКУ" (BLACK BUTTON)
*/
body.light-mode #b2b button[type="submit"] {
    background-color: #000000 !important;
    /* Черный фон */
    color: #ffffff !important;
    /* Белый текст */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
}

body.light-mode #b2b button[type="submit"]:hover {
    background-color: #333333 !important;
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3) !important;
}

/* 
==========================================================================
END OF STEP 8
==========================================================================
*/

/* 
====================================================================================================
PROJECT: INFINITY FLOW COMPUTERS (IFC)
COMPONENT: STYLE.CSS - STEP 9 OF 10
MODULE: FAQ SYSTEM & GLOBAL FOOTER
VERSION: 4.0.0 (PRODUCTION)
====================================================================================================
*/

/* 
==========================================================================
44.0 FAQ ACCORDION SYSTEM
==========================================================================
Использует трюк с grid-template-rows для анимации height: auto.
*/

/* 
--------------------------------------------------------------------------
44.1 FAQ SECTION LAYOUT
--------------------------------------------------------------------------
*/
/* 
--------------------------------------------------------------------------
44.1 FAQ SECTION LAYOUT (TRANSPARENT)
Фон прозрачный, чтобы была видна глобальная сетка.
--------------------------------------------------------------------------
*/
#faq {
    position: relative;
    background-color: transparent !important;
    /* Убираем заливку */
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
    overflow: hidden;
}

/* Light Mode Override */
body.light-mode #faq {
    background-color: transparent !important;
    /* Прозрачный и в светлой теме */
}

/* 
--------------------------------------------------------------------------
44.2 FAQ CARD CONTAINER
--------------------------------------------------------------------------
*/
.faq-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-dim);
    border-radius: 1.5rem;
    overflow: hidden;
    transition: all 0.3s ease;

    /* Для корректного скругления при анимации */
    transform: translateZ(0);
}

.faq-card:hover {
    border-color: var(--border-light);
    background-color: var(--bg-surface-hover);
}

/* Light Mode Override */
body.light-mode .faq-card {
    background-color: var(--color-white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

/* 
--------------------------------------------------------------------------
44.3 TRIGGER BUTTON (HEADER)
Кнопка, открывающая аккордеон.
--------------------------------------------------------------------------
*/
.faq-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    outline: none;
}

.faq-question {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-main);
    padding-right: 1rem;
    transition: color 0.3s ease;
}

/* 
--------------------------------------------------------------------------
44.4 ICON ANIMATION (+ to X)
--------------------------------------------------------------------------
*/
.faq-icon-box {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 1px solid var(--border-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-purple);
    transition: all 0.3s ease;
}

.faq-card:hover .faq-icon-box {
    border-color: var(--accent-purple);
    background-color: rgba(168, 85, 247, 0.1);
}

.accordion-icon {
    font-size: 1.5rem;
    line-height: 1;
    transition: transform 0.4s var(--ease-elastic);
}

/* 
   ACTIVE STATE (Applied via JS class 'active' on parent) 
*/
.faq-card.active .faq-icon-box {
    background-color: var(--accent-purple);
    color: white;
    border-color: var(--accent-purple);
}

.faq-card.active .accordion-icon {
    transform: rotate(45deg);
    /* Превращает + в x */
}

/* 
--------------------------------------------------------------------------
44.5 CONTENT ANIMATION (THE MAGIC TRICK)
Анимируем grid-template-rows от 0fr до 1fr.
--------------------------------------------------------------------------
*/
.accordion-content {
    display: grid;
    /* По умолчанию закрыто */
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s var(--ease-out-expo);
}

/* 
   КРИТИЧЕСКОЕ ИСПРАВЛЕНИЕ:
   Обращаемся к первому вложенному div (который содержит padding и border).
   Скрываем его содержимое, когда высота строки равна 0.
*/
.accordion-content>div {
    overflow: hidden;
}

/* Состояние "Открыто" */
.faq-card.active .accordion-content {
    grid-template-rows: 1fr;
}

/* Анимация текста */
.faq-answer {
    padding: 0 var(--space-md) var(--space-md) var(--space-md);
    color: var(--text-muted);
    font-size: var(--text-body);
    line-height: 1.6;

    /* Текст прозрачный и сдвинут вниз, пока нет класса .active */
    opacity: 1;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Когда карточка активна — показываем текст с задержкой */
.faq-card.active .faq-answer {
    opacity: 1;
    transform: translateY(0);
    /* Ждем, пока аккордеон чуть раскроется, прежде чем показать текст */
    transition-delay: 0.15s;
}

/* 
==========================================================================
45.0 GLOBAL FOOTER LAYOUT (SEAMLESS)
Убрали границы и фон для бесшовного перехода.
==========================================================================
*/

#footer {
    position: relative;
    background-color: transparent;
    /* Прозрачный фон для сетки */

    /* ВАЖНО: Убираем верхнюю границу */
    border-top: none;

    padding-top: var(--space-xl);
    padding-bottom: var(--space-lg);
    overflow: hidden;
}

/* Light Mode Footer */
body.light-mode #footer {
    background-color: transparent;

    /* ВАЖНО: Убираем границу и в светлой теме */
    border-top: none;
}

/* 
--------------------------------------------------------------------------
45.1 FOOTER MARQUEE (BACKGROUND)
Гигантский текст на фоне.
--------------------------------------------------------------------------
*/
.footer-marquee {
    opacity: 0.03;
    font-family: var(--font-mono);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    /* Анимация движения (опционально, если нужно движение) */
    /* animation: marquee-scroll 60s linear infinite; */
}

body.light-mode .footer-marquee {
    opacity: 0.05;
    color: #000000;
}

/* 
--------------------------------------------------------------------------
45.2 FOOTER LINKS
--------------------------------------------------------------------------
*/
.footer-link {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: var(--text-main);
}

/* 
==========================================================================
46.0 MAP INTEGRATION (DARK MODE HACK)
==========================================================================
Инверсия цветов стандартной карты Google Maps для соответствия теме.
*/

.map-container {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-dim);
    height: 100%;
    min-height: 300px;
}

/* 
   THE FILTER TRICK 
   - grayscale(100%): Убирает цвета.
   - invert(92%): Превращает белые дороги в черные.
   - contrast(83%): Смягчает контраст.
*/
.map-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: var(--map-filter);
    /* Переменная из Шага 1 */
    opacity: 0.7;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.map-container:hover .map-iframe {
    opacity: 1;
    /* При наведении можно чуть вернуть цвет, если нужно */
    /* filter: grayscale(100%) invert(92%) contrast(90%); */
}

/* Light Mode Map: Сброс фильтров */
body.light-mode .map-iframe {
    opacity: 0.8;
}

body.light-mode .map-container:hover .map-iframe {
    opacity: 1;
}

/* 
==========================================================================
47.0 SYSTEM LOG WIDGET (<DETAILS>)
==========================================================================
Технический блок в самом низу футера.
*/

/* Убираем стандартный треугольник details */
details>summary {
    list-style: none;
}

details>summary::-webkit-details-marker {
    display: none;
}

/* Summary Styling */
.sys-summary {
    cursor: pointer;
    padding: 0.5rem 0;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    transition: color 0.2s ease;
}

.sys-summary:hover {
    color: var(--accent-green);
}

/* 
   CONTENT ANIMATION (SWEEP IN)
   Анимация появления содержимого details.
*/
details[open] summary~* {
    animation: sweep-in 0.3s ease-in-out;
}

@keyframes sweep-in {
    0% {
        opacity: 0;
        transform: translateX(-10px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Data Grid Layout */
.sys-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
    padding-left: 1rem;
    border-left: 1px dashed var(--border-dim);
    margin-top: 1rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
}

@media (min-width: 768px) {
    .sys-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 
==========================================================================
48.0 RESPONSIVE FOOTER ADJUSTMENTS
==========================================================================
*/

@media (max-width: 1024px) {

    /* На планшетах карта становится ниже контактов */
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .map-container {
        height: 300px;
    }
}

@media (max-width: 640px) {
    #footer {
        padding-top: var(--space-lg);
    }

    .footer-title {
        font-size: 2.5rem;
        /* Меньше шрифт на мобильных */
    }
}


/* 
==========================================================================
FIX: FAQ SECTION LIGHT MODE (HIGH CONTRAST)
Исправление невидимого текста в вопросах и ответах
==========================================================================
*/

/* 1. Фон секции */


/* 2. Заголовки секции (Operational Architecture) */
body.light-mode #faq h2 {
    color: #000000 !important;
    /* Черный заголовок */
}

body.light-mode #faq p {
    color: #4b5563 !important;
    /* Темно-серый подзаголовок */
}

/* 3. Карточка вопроса */
body.light-mode .faq-card {
    background-color: #f9fafb !important;
    /* Очень светло-серый фон карточки */
    border: 1px solid #e5e7eb !important;
    /* Четкая рамка */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

/* Ховер эффект */
body.light-mode .faq-card:hover {
    background-color: #ffffff !important;
    border-color: #7c3aed !important;
    /* Фиолетовая рамка при наведении */
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
}

/* 4. ТЕКСТ ВОПРОСА (ГЛАВНОЕ ИСПРАВЛЕНИЕ) */
body.light-mode .faq-question {
    color: #111827 !important;
    /* Глубокий черный цвет */
    font-weight: 700 !important;
    /* Жирный шрифт для читаемости */
}

/* 5. Иконка плюса */
body.light-mode .faq-icon-box {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
    color: #7c3aed !important;
    /* Фиолетовый плюс */
}

/* Активная иконка (когда открыто) */
body.light-mode .faq-card.active .faq-icon-box {
    background-color: #7c3aed !important;
    color: #ffffff !important;
    border-color: #7c3aed !important;
}

/* 6. Текст ответа (выпадающий) */
body.light-mode .faq-answer {
    color: #374151 !important;
    /* Темно-серый текст */
}

/* Внутренние блоки в ответах (HTML контент из JS) */
body.light-mode .faq-answer .bg-white\/5 {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
}

/* Жирный текст внутри ответов */
body.light-mode .faq-answer h4,
body.light-mode .faq-answer b,
body.light-mode .faq-answer strong {
    color: #000000 !important;
}

/* Исправление для списков (где был белый текст) */
body.light-mode .faq-answer li span.text-white {
    color: #111827 !important;
}

/* 
==========================================================================
FIX: FOOTER SECTION - LIGHT MODE VISIBILITY
Исправление цветов в футере для светлой темы
==========================================================================
*/

/* 1. Заголовок "Давайте строить бизнес вместе" */
/* Первая часть (белая в оригинале) -> Черная */
body.light-mode #footer h2 span:first-child {
    color: #000000 !important;
}

/* Вторая часть (градиент) -> Темный градиент */
body.light-mode #footer h2 span.text-transparent {
    background-image: linear-gradient(to right, #4b5563, #111827) !important;
    -webkit-text-fill-color: transparent !important;
}

/* 2. Бейдж "Готовы к сотрудничеству" */
body.light-mode #footer .inline-flex {
    background-color: #f3f4f6 !important;
    /* Серый фон */
    border-color: #d1d5db !important;
    /* Рамка */
}

body.light-mode #footer .inline-flex span {
    color: #1f2937 !important;
    /* Темный текст */
}

/* 3. Контакты (Слева) */
/* Номер телефона */
body.light-mode #footer a[href^="tel"] span {
    color: #111827 !important;
    /* Черный */
    font-weight: 700 !important;
}

/* Email */
body.light-mode #footer a[href^="mailto"] {
    color: #111827 !important;
    /* Черный */
    font-weight: 700 !important;
}

/* Адрес и мелкие подписи */
body.light-mode #footer address p,
body.light-mode #footer p[class*="text-gray-500"] {
    color: #4b5563 !important;
    /* Темно-серый */
}

/* Иконки соцсетей (Instagram, Telegram) */
body.light-mode #footer a[aria-label="Instagram"],
body.light-mode #footer a[aria-label="Telegram"] {
    color: #4b5563 !important;
    /* Серые иконки */
    background-color: transparent !important;
}

body.light-mode #footer a[aria-label="Instagram"]:hover,
body.light-mode #footer a[aria-label="Telegram"]:hover {
    color: #000000 !important;
    /* Черные при наведении */
    background-color: #e5e7eb !important;
}

/* 4. Карта сайта (Справа) */
/* Заголовок "КАРТА САЙТА" */
body.light-mode #footer h4 {
    color: #111827 !important;
    font-weight: 800 !important;
}

/* Ссылки меню */
body.light-mode #footer nav ul li a {
    color: #374151 !important;
    /* Темно-серый */
    font-weight: 600 !important;
}

body.light-mode #footer nav ul li a:hover {
    color: #7c3aed !important;
    /* Фиолетовый при наведении */
}

/* 5. Нижняя полоска (Copyright) */
body.light-mode #footer .border-t {
    border-top-color: #e5e7eb !important;
    /* Видимая линия */
}

/* Текст копирайта и legal-ссылки */
body.light-mode #footer .text-gray-500,
body.light-mode #footer .text-gray-600,
body.light-mode #footer .text-gray-700 {
    color: #6b7280 !important;
}

/* 6. Системный лог (внизу раскрывающийся) */
body.light-mode #footer details summary {
    color: #374151 !important;
}

body.light-mode #footer details {
    color: #4b5563 !important;
}

/* 
==========================================================================
END OF STEP 9
==========================================================================
*/

/* 
====================================================================================================
PROJECT: INFINITY FLOW COMPUTERS (IFC)
COMPONENT: STYLE.CSS - STEP 10 OF 10
MODULE: FINAL POLISH, PRINT & ACCESSIBILITY
VERSION: 4.0.0 (PRODUCTION)
====================================================================================================
*/

/* 
==========================================================================
49.0 PRINT STYLES (PROFESSIONAL TOUCH)
==========================================================================
Оптимизация для печати на бумаге или сохранения в PDF.
Скрываем навигацию, анимации и темный фон. Экономим чернила.
*/

@media print {

    /* 
    ----------------------------------------------------------------------
    49.1 GLOBAL PRINT RESET
    ----------------------------------------------------------------------
    */
    *,
    *::before,
    *::after {
        background: transparent !important;
        color: #000000 !important;
        /* Только черный текст */
        box-shadow: none !important;
        text-shadow: none !important;
        filter: none !important;
        /* Убираем инверсию логотипов */
        transition: none !important;
        /* Убираем анимации */
        animation: none !important;
    }

    body {
        background-color: #ffffff !important;
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
    }

    /* 
    ----------------------------------------------------------------------
    49.2 HIDE INTERACTIVE ELEMENTS
    Скрываем то, что бесполезно на бумаге.
    ----------------------------------------------------------------------
    */
    #navbar,
    /* Навигация */
    #mobile-menu,
    /* Мобильное меню */
    #loader,
    /* Экран загрузки */
    #transition-curtain,
    /* Шторка */
    .theme-toggle-btn,
    /* Кнопка темы */
    .lang-btn,
    /* Языки */
    .scroll-indicator-clean,
    /* Скролл */
    .hero-anim,
    /* Анимации входа */
    .video-bg,
    /* Видео фоны */
    .noise-overlay,
    /* Шум */
    .blob,
    /* Цветные пятна */
    .modal-backdrop,
    /* Модалки */
    .modal-close-btn,
    /* Кнопки закрытия */
    button

    /* Все кнопки */
        {
        display: none !important;
    }

    /* 
    ----------------------------------------------------------------------
    49.3 LAYOUT ADJUSTMENTS
    ----------------------------------------------------------------------
    */
    section {
        page-break-inside: avoid;
        /* Не разрывать секции посередине */
        padding: 0 !important;
        margin-bottom: 2cm;
    }

    h1,
    h2,
    h3 {
        page-break-after: avoid;
        /* Заголовок не должен оставаться один внизу страницы */
        color: #000 !important;
    }

    /* Hero Section */
    #about {
        min-height: auto !important;
        padding-top: 0 !important;
    }

    .hero-title-wrapper {
        margin-bottom: 1cm;
    }

    /* 
    ----------------------------------------------------------------------
    49.4 LINK HANDLING
    Показываем URL ссылок, чтобы их можно было прочитать с бумаги.
    ----------------------------------------------------------------------
    */
    a {
        text-decoration: underline;
        color: #000 !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        font-weight: normal;
    }

    /* Исключаем внутренние ссылки и javascript */
    a[href^="#"]::after,
    a[href^="javascript"]::after {
        content: "";
    }

    /* 
    ----------------------------------------------------------------------
    49.5 SPECIFIC COMPONENT FIXES
    ----------------------------------------------------------------------
    */
    /* Marquee: Превращаем в сетку */
    .marquee-track {
        display: flex;
        flex-wrap: wrap;
        gap: 1cm;
        justify-content: center;
    }

    .brand-item {
        opacity: 1 !important;
        filter: none !important;
    }

    .brand-item img {
        filter: grayscale(100%) !important;
        /* Черно-белые логотипы */
    }

    /* Bento Grid */
    .grid-bento {
        display: block;
        /* Grid плохо печатается, лучше блоками */
    }

    article[role="listitem"] {
        border: 1px solid #ccc !important;
        margin-bottom: 1cm;
        page-break-inside: avoid;
    }


}

/* 
==========================================================================
50.0 SAFARI & IOS OPTIMIZATIONS
==========================================================================
Исправление специфических багов Apple-устройств.
*/

/* 
--------------------------------------------------------------------------
50.1 NOTCH SUPPORT (SAFE AREA)
Учет "челки" и закругленных углов экрана.
--------------------------------------------------------------------------
*/
@supports (padding-top: env(safe-area-inset-top)) {
    #navbar {
        padding-top: calc(var(--space-md) + env(safe-area-inset-top));
    }

    #mobile-menu {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    #footer {
        padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom));
    }
}

/* 
--------------------------------------------------------------------------
50.2 IOS TAP HIGHLIGHT
Убираем серый фон при нажатии на ссылки в iOS.
--------------------------------------------------------------------------
*/
a,
button,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

/* 
--------------------------------------------------------------------------
50.3 MOMENTUM SCROLLING
Включаем инерционный скролл для блоков с overflow.
--------------------------------------------------------------------------
*/
.modal-content,
.accordion-content {
    -webkit-overflow-scrolling: touch;
}

/* 
--------------------------------------------------------------------------
50.4 SAFARI 100VH FIX
Используем -webkit-fill-available для корректной высоты.
--------------------------------------------------------------------------
*/
@supports (-webkit-touch-callout: none) {
    .min-h-screen {
        min-height: -webkit-fill-available;
    }
}

/* 
==========================================================================
51.0 ACCESSIBILITY (A11Y)
==========================================================================
*/

/* 
--------------------------------------------------------------------------
51.1 HIGH CONTRAST MODE
Для пользователей с нарушениями зрения.
--------------------------------------------------------------------------
*/
@media (prefers-contrast: more) {
    :root {
        --text-muted: #000000;
        --border-dim: #000000;
        --bg-surface: #ffffff;
    }

    /* Убираем прозрачность */
    .glass-panel,
    .nav-capsule,
    .modal-content {
        backdrop-filter: none !important;
        background: white !important;
        border: 2px solid black !important;
    }

    /* Усиливаем текст */
    .text-gray-400,
    .text-gray-500 {
        color: #000000 !important;
    }

    /* Явные границы кнопок */
    button,
    .btn-primary,
    .btn-secondary {
        border: 2px solid black !important;
    }
}

/* 
--------------------------------------------------------------------------
51.2 FOCUS MANAGEMENT
Улучшаем видимость фокуса для навигации с клавиатуры.
--------------------------------------------------------------------------
*/
:focus-visible {
    outline: 3px solid var(--accent-purple);
    outline-offset: 4px;
    border-radius: 4px;
    z-index: 100;
    /* Фокус всегда сверху */
}

/* Скрываем фокус для мыши, оставляем для клавиатуры */
:focus:not(:focus-visible) {
    outline: none;
}

/* 
==========================================================================
52.0 DEBUG UTILITIES (DEV ONLY)
==========================================================================
Классы для проверки верстки. Удалить в финальном минифицированном CSS,
но полезно оставить в исходниках.
*/

.debug-grid {
    background-size: 100px 100px;
    background-image:
        linear-gradient(to right, rgba(255, 0, 0, 0.1) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 1px, transparent 1px);
}

.debug-outlines * {
    outline: 1px solid rgba(255, 0, 0, 0.2) !important;
}

/* 
==========================================================================
53.0 SCROLL PADDING (ANCHOR FIX)
==========================================================================
Предотвращает перекрытие заголовков фиксированным навбаром при клике на якорь.
*/

html {
    /* Высота навбара + отступ */
    scroll-padding-top: 120px;
}

@media (max-width: 768px) {
    html {
        scroll-padding-top: 100px;
    }
}

/* 
==========================================================================
54.0 FINAL Z-INDEX CHECK
==========================================================================
Сводная таблица слоев для проверки (Reference).
*/

/*
    -1      : Backgrounds, Blobs, Noise
    1       : Base Content
    10      : Ecosystem Section (Relative)
    20      : Marquee, Exclusive Hub
    30      : Marquee Header
    40      : Sticky Elements
    50      : Navbar (Capsule)
    60      : Modals
    70      : Modal Backdrop
    100     : Loader
    9999    : Transition Curtain, Mobile Menu, Cursor
*/

/* 
==========================================================================
END OF STYLE.CSS
PROJECT COMPLETE.
==========================================================================
*/







/* ==========================================================================
   ECOSYSTEM BENTO - PREMIER UPGRADE
   ========================================================================== */

/* 1. Заголовок секции */
#ecosystem-heading {
    letter-spacing: -0.05em !important;
    line-height: 0.95;
}

#ecosystem-heading span.text-transparent {
    filter: drop-shadow(0 0 30px rgba(34, 197, 94, 0.3));
    background-image: linear-gradient(to right, #4ade80, #2dd4bf, #22d3ee) !important;
}

/* 2. Базовая карточка (Bento Box) */
#ecosystem article[role="listitem"] {
    background: rgba(255, 255, 255, 0.015) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 2.5rem !important;
    /* Очень мягкие углы */
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow:
        0 20px 40px -15px rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

#ecosystem article[role="listitem"]:hover {
    transform: translateY(-12px) scale(1.01);
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Иконки в карточках */
#ecosystem .icon-box {
    border-radius: 1.25rem !important;
    width: 3.5rem;
    height: 3.5rem;
    transition: all 0.5s ease;
}

#ecosystem article:hover .icon-box {
    transform: rotate(-10deg) scale(1.1);
}


/* Зеленая (Щит) */
#ecosystem article:has(.text-green-400):hover {
    box-shadow: 0 30px 60px -15px rgba(34, 197, 94, 0.15), inset 0 0 40px rgba(34, 197, 94, 0.05);
    border-color: rgba(34, 197, 94, 0.3) !important;
}

/* Фиолетовая (Безопасность) */
#ecosystem article:has(.text-purple-400):hover {
    box-shadow: 0 30px 60px -15px rgba(168, 85, 247, 0.15), inset 0 0 40px rgba(168, 85, 247, 0.05);
    border-color: rgba(168, 85, 247, 0.3) !important;
}

/* Синяя (2 часа) */
#ecosystem article:has(.text-blue-500):hover {
    box-shadow: 0 30px 60px -15px rgba(59, 130, 246, 0.15), inset 0 0 40px rgba(59, 130, 246, 0.05);
    border-color: rgba(59, 130, 246, 0.3) !important;
}

/* 3. Спецэффект для числа "24" */
#ecosystem .text-4xl.md\:text-7xl {
    font-size: clamp(3.5rem, 8vw, 6rem) !important;
    font-weight: 900;
    letter-spacing: -0.06em;
    background: linear-gradient(135deg, #fff 30%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 10px 20px rgba(59, 130, 246, 0.3));
}

/* Блоки брендов (AKKO, OCYPUS...) */
#ecosystem .bg-white\/5.p-2.rounded {
    border-radius: 1rem !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: all 0.3s ease;
}

#ecosystem .bg-white\/5.p-2.rounded:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    transform: scale(1.05);
}

/* Списки с точками/галочками */
#ecosystem ul li b {
    color: #fff !important;
    font-weight: 700;
}

#ecosystem .font-mono {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--text-dim);
}


/* --- LIGHT MODE ECOSYSTEM --- */

html.light-mode #ecosystem {
    background-color: #ffffff !important;
}

html.light-mode #ecosystem article[role="listitem"] {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

html.light-mode #ecosystem article[role="listitem"]:hover {
    box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.1) !important;
}

html.light-mode #ecosystem .text-white,
html.light-mode #ecosystem h3 {
    color: #111827 !important;
}

html.light-mode #ecosystem .bg-white\/5.p-2.rounded {
    background: #f3f4f6 !important;
    border-color: #e5e7eb !important;
}

html.light-mode #ecosystem-heading span.text-transparent {
    filter: none;
    background-image: linear-gradient(to right, #16a34a, #0d9488, #0891b2) !important;
}

html.light-mode #ecosystem ul li b {
    color: #000 !important;
}

/* ==========================================================================
   GIANT CATALOG CTA - ULTIMATE VIBE
   ========================================================================== */

/* 1. Общий фон секции (Эффект прожектора) */
section:has(.animate-marquee-slow) {
    background: radial-gradient(circle at center, rgba(168, 85, 247, 0.08) 0%, transparent 70%);
}

/* 2. Фоновый бегущий текст (OFFICIAL CATALOG) */
.animate-marquee-slow span {
    font-family: 'Inter', sans-serif !important;
    letter-spacing: -0.05em;
    /* Эффект матового стекла для букв */
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.05);
    color: transparent !important;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
    -webkit-background-clip: text;
    background-clip: text;
}

/* 3. Верхний лейбл (Прямой доступ к складу) */
[data-i18n="cta_label"] {
    font-weight: 800 !important;
    letter-spacing: 0.6em !important;
    /* Ультра-широкий трекинг для премиальности */
    text-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
    font-size: 11px !important;
}

/* 4. ГИГАНТСКАЯ КНОПКА (THE PORTAL) */
.group.relative.inline-flex.items-center.justify-center.px-12.py-8 {
    border-radius: 100vw !important;
    /* Идеальная пилюля */
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow:
        0 30px 60px -12px rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Эффект при наведении на кнопку */
.group.relative.inline-flex:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(168, 85, 247, 0.5) !important;
    transform: scale(1.05) translateY(-5px);
    box-shadow:
        0 50px 100px -20px rgba(168, 85, 247, 0.2),
        0 0 30px rgba(168, 85, 247, 0.15);
}

/* Текст внутри кнопки */
[data-i18n="cta_button"] {
    font-size: clamp(2rem, 5vw, 4.5rem) !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
    transition: all 0.5s ease;
}

.group:hover [data-i18n="cta_button"] {
    letter-spacing: 0.02em !important;
    /* Текст слегка "раздвигается" при наведении */
}

/* Иконка стрелки */
.group svg {
    width: clamp(2rem, 4vw, 3.5rem) !important;
    height: auto;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

/* 5. Нижний текст (PDF ВЕРСИЯ...) */
[data-i18n="cta_sub"] {
    letter-spacing: 0.4em !important;
    opacity: 0.4;
    font-weight: 500;
}

/* --- LIGHT MODE ADAPTATION --- */

html.light-mode section:has(.animate-marquee-slow) {
    background: radial-gradient(circle at center, rgba(124, 58, 237, 0.05) 0%, transparent 70%);
}

html.light-mode .animate-marquee-slow span {
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.03);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.01));
    -webkit-background-clip: text;
}

html.light-mode .group.relative.inline-flex.items-center.justify-center.px-12.py-8 {
    background: rgba(0, 0, 0, 0.02) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

html.light-mode [data-i18n="cta_button"],
html.light-mode .group svg {
    color: #111827 !important;
}

html.light-mode .group.relative.inline-flex:hover {
    background: #000 !important;
}

html.light-mode .group.relative.inline-flex:hover [data-i18n="cta_button"],
html.light-mode .group.relative.inline-flex:hover svg {
    color: #fff !important;
}

/* ==========================================================================
   THE TRINITY (EXCLUSIVE HUB) - ELITE DESIGN UPGRADE
   ========================================================================== */

/* 1. Заголовок и общая атмосфера */
#exclusive-hub {
    background: radial-gradient(circle at 50% -20%, rgba(168, 85, 247, 0.15) 0%, transparent 50%);
}

#trinity-heading {
    font-size: clamp(3.5rem, 10vw, 8rem) !important;
    font-weight: 900 !important;
    letter-spacing: -0.06em !important;
    background: linear-gradient(to bottom, #fff 50%, rgba(255, 255, 255, 0.2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5));
}

/* 2. Карточки Trinity - Базовая архитектура */
.card-trinity {
    border-radius: 3rem !important;
    /* Ультра-мягкие углы */
    background: #080808 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    overflow: hidden;
    position: relative;
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8);
}

/* Эффект внутренней глубины (Inner Glow) */
.card-trinity::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: none;
    z-index: 5;
    transition: opacity 0.5s ease;
}

/* 3. Индивидуальные цвета брендов при наведении */

/* OCYPUS - Золото */
.card-trinity[aria-controls="modal-ocypus"]:hover {
    border-color: rgba(245, 212, 80, 0.4) !important;
    box-shadow: 0 40px 100px -20px rgba(245, 212, 80, 0.15);
}

.card-trinity[aria-controls="modal-ocypus"] .trinity-bg-glow {
    background: radial-gradient(circle at 50% 100%, rgba(245, 212, 80, 0.2), transparent 70%);
}

/* IO - Неоновый Циан */
.card-trinity[aria-controls="modal-io"]:hover {
    border-color: rgba(0, 229, 255, 0.4) !important;
    box-shadow: 0 40px 100px -20px rgba(0, 229, 255, 0.15);
}

.card-trinity[aria-controls="modal-io"] .trinity-bg-glow {
    background: radial-gradient(circle at 50% 100%, rgba(0, 229, 255, 0.2), transparent 70%);
}

/* LUNACY - Розовый неон */
.card-trinity[aria-controls="modal-lunacy"]:hover {
    border-color: rgba(255, 0, 255, 0.4) !important;
    box-shadow: 0 40px 100px -20px rgba(255, 0, 255, 0.15);
}

.card-trinity[aria-controls="modal-lunacy"] .trinity-bg-glow {
    background: radial-gradient(circle at 50% 100%, rgba(255, 0, 255, 0.2), transparent 70%);
}

/* 4. Анимация логотипа и контента */
.logo-trinity {
    filter: brightness(0) invert(1) grayscale(1) opacity(0.8);
    transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
    transform: scale(1);
}

.card-trinity:hover .logo-trinity {
    filter: brightness(0) invert(1) grayscale(0) opacity(1);
    transform: scale(0.85) translateY(-20px);
}

/* Выезд описания снизу */
.trinity-content {
    background: linear-gradient(to top, #000 30%, transparent) !important;
    padding: 3rem 2rem !important;
}

.btn-trinity {
    border-radius: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s ease !important;
}

.card-trinity:hover .btn-trinity {
    background: #fff !important;
    color: #000 !important;
}

/* 5. LIGHT MODE ADAPTATION */
html.light-mode .card-trinity {
    background: #fff !important;
    border-color: rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);
}

html.light-mode .logo-trinity {
    filter: brightness(0) opacity(0.7);
}

html.light-mode .card-trinity:hover .logo-trinity {
    filter: brightness(0) opacity(1);
}

html.light-mode .trinity-content {
    background: linear-gradient(to top, #fff 50%, transparent) !important;
}

html.light-mode #trinity-heading {
    background: linear-gradient(to bottom, #111827 40%, #6b7280 100%);
    -webkit-background-clip: text;
}


/* ==========================================================================
   B2B PARTNER PORTAL - ELITE INTERFACE
   ========================================================================== */

/* 1. Заголовок и вводный текст */
#b2b h2 {
    font-weight: 900 !important;
    letter-spacing: -0.05em !important;
    line-height: 0.95;
}

#b2b h2 span.text-transparent {
    background-image: linear-gradient(135deg, #a855f7 0%, #06b6d4 100%) !important;
    filter: drop-shadow(0 10px 20px rgba(168, 85, 247, 0.3));
}

/* 2. Блок "Ваши привилегии" */
#b2b .bg-white\/5.p-4.rounded-xl {
    background: rgba(255, 255, 255, 0.015) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 2rem !important;
    padding: 2rem !important;
    box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.02);
}

#b2b ul li {
    transition: transform 0.3s ease;
}

#b2b ul li:hover {
    transform: translateX(5px);
}

/* 3. Виджет системного статуса (HUD) */
#b2b .bg-\[#0a0a0a\].font-mono {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 1.5rem !important;
    backdrop-filter: blur(15px);
}

#b2b dt {
    color: #6b7280 !important;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
}

#b2b dd {
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* 4. ГЛАВНАЯ ФОРМА (Spotlight Card) */
.spotlight-card {
    border-radius: 3rem !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    box-shadow:
        0 50px 100px -20px rgba(0, 0, 0, 0.6),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.spotlight-card:hover {
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 60px 120px -20px rgba(0, 0, 0, 0.8);
}

/* Инпуты (Apple Style) */
.apple-input {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 1.5rem 0 0.75rem 0 !important;
    transition: all 0.4s ease !important;
}

.apple-input:focus {
    border-bottom-color: #a855f7 !important;
}

.apple-label {
    font-size: 0.9rem !important;
    color: #4b5563 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.apple-input:focus~.apple-label,
.apple-input:not(:placeholder-shown)~.apple-label {
    color: #a855f7 !important;
    transform: translateY(-1.5rem) scale(0.8) !important;
}

/* Кнопка отправки */
#b2b button[type="submit"] {
    border-radius: 1.25rem !important;
    height: 4rem;
    font-size: 0.9rem !important;
    letter-spacing: 0.2em !important;
    background: #fff !important;
    color: #000 !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#b2b button[type="submit"]:hover {
    transform: scale(1.02) translateY(-3px);
    background: #a855f7 !important;
    color: #fff !important;
    box-shadow: 0 20px 40px rgba(168, 85, 247, 0.4);
}

/* 5. LIGHT MODE ADAPTATION */
html.light-mode #b2b {
    background-color: #ffffff !important;
}

html.light-mode .spotlight-card {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.05);
}

html.light-mode .apple-input {
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
    color: #000 !important;
}

html.light-mode #b2b .bg-white\/5.p-4.rounded-xl {
    background: #f9fafb !important;
    border-color: #e5e7eb !important;
}

html.light-mode #b2b button[type="submit"] {
    background: #000 !important;
    color: #fff !important;
}

html.light-mode #b2b button[type="submit"]:hover {
    background: #7c3aed !important;
}

/* ==========================================================================
   FAQ ACCORDION - ELITE ARCHITECTURE UPGRADE
   ========================================================================== */

/* 1. Заголовок и вводный текст */
#faq h2 {
    font-weight: 800 !important;
    letter-spacing: -0.04em !important;
    background: linear-gradient(to bottom, #ffffff 60%, rgba(255, 255, 255, 0.4));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#faq p.text-gray-400 {
    font-weight: 300;
    letter-spacing: 0.01em;
    line-height: 1.6;
}

/* 2. Сама карточка FAQ (Стеклянная панель) */
.faq-card {
    border-radius: 1.5rem !important;
    background: rgba(255, 255, 255, 0.01) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    margin-bottom: 1rem;
    overflow: hidden;
}

.faq-card:hover {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(168, 85, 247, 0.3) !important;
    transform: translateY(-4px) scale(1.005);
}

/* Активное состояние (когда открыто) */
.faq-card.active {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(168, 85, 247, 0.4) !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
}

/* 3. Триггер (Кнопка вопроса) */
.faq-trigger {
    padding: 1.75rem 2rem !important;
}

.faq-question {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.9);
}

/* 4. Иконка переключения (Элегантный круг) */
.faq-icon-box {
    width: 2.5rem !important;
    height: 2.5rem !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.faq-card.active .faq-icon-box {
    background: #a855f7;
    border-color: #a855f7;
    transform: rotate(45deg);
    /* Плюс превращается в крестик */
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.5);
}

.faq-card.active .accordion-icon {
    color: #fff !important;
}

/* 5. Ответ (Контент) */
.faq-answer {
    padding: 0 2rem 2rem 2rem !important;
    font-size: 1rem !important;
    line-height: 1.7 !important;
    color: #9ca3af !important;
    font-weight: 300;
}

/* Стилизация блоков внутри ответа (если есть списки или акценты) */
.faq-answer b,
.faq-answer strong {
    color: #fff !important;
    font-weight: 600;
}

.faq-answer .bg-white\/5 {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 1rem;
    padding: 1.25rem !important;
    margin-top: 1rem;
}

/* 6. LIGHT MODE ADAPTATION */
html.light-mode #faq {
    background-color: #ffffff !important;
}

html.light-mode #faq h2 {
    background: linear-gradient(to bottom, #111827 60%, #6b7280);
    -webkit-background-clip: text;
}

html.light-mode .faq-card {
    background: #f9fafb !important;
    border-color: rgba(0, 0, 0, 0.05) !important;
    backdrop-filter: none;
}

html.light-mode .faq-card:hover {
    background: #ffffff !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
}

html.light-mode .faq-card.active {
    background: #ffffff !important;
    border-color: #7c3aed !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.05);
}

html.light-mode .faq-question {
    color: #111827 !important;
}

html.light-mode .faq-icon-box {
    background: #fff;
    border-color: #e5e7eb;
}

html.light-mode .faq-answer {
    color: #4b5563 !important;
}

html.light-mode .faq-answer b {
    color: #111827 !important;
}

html.light-mode .faq-answer .bg-white\/5 {
    background: #f3f4f6 !important;
    border-color: #e5e7eb !important;
}

/* ==========================================================================
   GLOBAL FOOTER - FINAL COMMAND CENTER VIBE
   ========================================================================== */

/* 1. Заголовок и Главный CTA */
#footer h2 {
    font-size: clamp(3rem, 8vw, 6rem) !important;
    font-weight: 900 !important;
    letter-spacing: -0.06em !important;
    line-height: 0.9;
}

#footer h2 span.text-transparent {
    background-image: linear-gradient(to right, #ffffff 0%, #a855f7 50%, #06b6d4 100%) !important;
    filter: drop-shadow(0 10px 20px rgba(168, 85, 247, 0.2));
}

/* Кнопка "BECOME A PARTNER" */
#footer a[aria-label*="Partner"] {
    background: #ffffff !important;
    color: #000000 !important;
    border-radius: 100vw !important;
    padding: 1.25rem 2.5rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#footer a[aria-label*="Partner"]:hover {
    transform: scale(1.1) translateY(-5px);
    background: #a855f7 !important;
    color: #ffffff !important;
    box-shadow: 0 20px 40px rgba(168, 85, 247, 0.4);
}

#footer a[aria-label*="Partner"] div {
    background: #000 !important;
    /* Кружок со стрелкой */
    color: #fff !important;
}

/* 2. Сетка контактов и Карта */
#footer .grid-cols-1.lg\:grid-cols-12 {
    gap: 4rem !important;
}

/* Интерактивная карта (Планшет) */
#footer .map-container,
#footer iframe {
    border-radius: 2.5rem !important;
    /* Углы как у iPad */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.8);
    transition: all 0.6s ease;
}

#footer .lg\:col-span-5:hover .map-container {
    transform: scale(1.02) rotateX(2deg);
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* 3. Типографика контактов */
#footer a[href^="tel"] span {
    font-size: clamp(1.5rem, 3vw, 2.5rem) !important;
    font-family: var(--font-mono);
    font-weight: 800 !important;
    letter-spacing: -0.05em;
    background: linear-gradient(135deg, #fff, #9ca3af);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#footer a[href^="mailto"] {
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--accent-cyan) !important;
}

/* Социальные иконки */
#footer a[aria-label="Instagram"],
#footer a[aria-label="Telegram"] {
    width: 3.5rem !important;
    height: 3.5rem !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 1rem !important;
    transition: all 0.4s var(--ease-elastic);
}

#footer a[aria-label="Instagram"]:hover,
#footer a[aria-label="Telegram"]:hover {
    background: #fff !important;
    color: #000 !important;
    transform: translateY(-5px) rotate(-8deg);
}

/* 4. Карта сайта (Links) */
#footer nav ul li a {
    font-size: 1.1rem !important;
    font-weight: 600;
    transition: all 0.3s ease;
}

#footer nav ul li a:hover {
    padding-left: 10px;
    color: #fff !important;
}

/* 5. Нижняя панель (Legal) */
#footer .border-t.border-white\/10 {
    margin-top: 4rem;
    padding-top: 2rem;
}

#footer .text-gray-500,
#footer .text-gray-600 {
    font-size: 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* 6. LIGHT MODE ADAPTATION */
html.light-mode #footer {
    background-color: #ffffff !important;
}

html.light-mode #footer h2 {
    background: linear-gradient(to bottom, #111827 40%, #6b7280 100%);
    -webkit-background-clip: text;
}

html.light-mode #footer a[aria-label*="Partner"] {
    background: #000 !important;
    color: #fff !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

html.light-mode #footer a[href^="tel"] span {
    background: #111827;
    -webkit-background-clip: text;
}

html.light-mode #footer .map-container {
    background: #f3f4f6;
    border-color: rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.05);
}

html.light-mode #footer a[aria-label="Instagram"],
html.light-mode #footer a[aria-label="Telegram"] {
    background: #f3f4f6 !important;
    border-color: #e5e7eb !important;
    color: #111827 !important;
}

/* ==========================================================================
   HERO SECTION (INDEX) - APPLE ULTIMATE POLISH & LIGHT MODE FIX
   ========================================================================== */

/* 1. Общий фон и контейнер */
#about {
    background-color: var(--bg-core) !important;
    transition: background-color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

/* 2. Типографика: INFINITY FLOW COMPUTERS */
.hero-text-solid {
    font-size: clamp(3.5rem, 10vw, 8.5rem) !important;
    /* Делаем крупнее и массивнее */
    font-weight: 900 !important;
    letter-spacing: -0.06em !important;
    /* Фирменный "сжатый" стиль Apple */
    line-height: 0.85 !important;
    text-transform: uppercase;
    /* Эффект литого металла в темной теме */
    background: linear-gradient(to bottom, #ffffff 40%, rgba(255, 255, 255, 0.4) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
}

.hero-text-solid.text-secondary {
    opacity: 0.8;
}

/* 3. Описание под заголовком */
.hero-desc-text {
    font-size: clamp(1rem, 2vw, 1.25rem) !important;
    max-width: 700px !important;
    line-height: 1.6 !important;
    font-weight: 300 !important;
    color: var(--text-muted) !important;
    margin: 2rem auto 4rem auto !important;
    text-wrap: balance;
}

/* 4. Бейдж "Стратегический дистрибьютор" */
.apple-badge {
    padding: 0.6rem 1.2rem !important;
    border-radius: 100vw !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(12px);
    transition: all 0.4s ease;
}

.apple-badge .badge-text {
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    font-size: 10px !important;
}

/* 5. Кнопки (CTA) */
.apple-btn-primary {
    padding: 1.25rem 2.5rem !important;
    border-radius: 100vw !important;
    font-weight: 800 !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.05em !important;
    background: #fff !important;
    color: #000 !important;
    box-shadow: 0 20px 40px -10px rgba(255, 255, 255, 0.2) !important;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.apple-btn-primary:hover {
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 30px 60px -10px rgba(255, 255, 255, 0.4) !important;
}

.apple-btn-secondary {
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    transition: all 0.3s ease;
}

.apple-btn-secondary:hover {
    color: #fff !important;
    transform: translateX(5px);
}

/* 6. Индикатор скролла */
.scroll-indicator-clean span {
    font-size: 9px !important;
    letter-spacing: 0.4em !important;
    font-weight: 700;
    opacity: 0.5;
}

/* ==========================================================================
   LIGHT MODE FIX (Специфично для Hero)
   ========================================================================== */

html.light-mode #about {
    background-color: #ffffff !important;
}

/* Текст в светлом режиме */
html.light-mode .hero-text-solid {
    background: linear-gradient(to bottom, #111827 40%, #6b7280 100%);
    -webkit-background-clip: text;
    filter: none;
}

html.light-mode .hero-desc-text {
    color: #4b5563 !important;
}

/* Бейдж в светлом режиме */
html.light-mode .apple-badge {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

html.light-mode .apple-badge .badge-text {
    color: #111827 !important;
}

/* Кнопки в светлом режиме */
html.light-mode .apple-btn-primary {
    background: #000 !important;
    color: #fff !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.2) !important;
}

html.light-mode .apple-btn-secondary:hover {
    color: #000 !important;
}

/* Скрываем звезды в светлом режиме (чтобы не мусорили на белом) */
html.light-mode #starfield {
    opacity: 0 !important;
}

/* Фоновый водяной знак (как в about) для вайба */
#about::before {
    content: 'IFC';
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 25vw;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.02);
    z-index: -1;
    pointer-events: none;
    transition: color 0.5s ease;
}

html.light-mode #about::before {
    color: rgba(0, 0, 0, 0.03);
}

/* ==========================================================================
   PERFECT HERO SECTION (CLEAN & SYNCED)
   ========================================================================== */

/* 1. Общий контейнер — строго следует теме */
#about {
    background-color: var(--bg-core) !important;
    color: var(--text-main) !important;
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* 2. Главный заголовок (Ультра-премиум типографика) */
.hero-text-solid {
    display: block;
    color: var(--text-main) !important;
    font-weight: 800 !important;
    letter-spacing: -0.05em !important;
    /* Плотный "эппловский" шрифт */
    line-height: 0.9 !important;
    text-transform: uppercase;
}

/* Вторая строка заголовка чуть прозрачнее */
.hero-text-solid.text-secondary {
    opacity: 0.7;
}

/* 3. Описание (Четкий контраст) */
.hero-desc-text {
    color: var(--text-muted) !important;
    font-weight: 400;
    line-height: 1.6;
    max-width: 650px;
    margin: 2.5rem auto !important;
}

/* 4. Кнопки (Синхронизация цветов) */

/* Главная кнопка: Белая в черном / Черная в белом */
.apple-btn-primary {
    background-color: var(--text-main) !important;
    color: var(--bg-core) !important;
    border-radius: 100vw !important;
    padding: 1.2rem 2.5rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.2);
}

.apple-btn-primary:hover {
    transform: scale(1.05) translateY(-3px);
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.3);
}

/* Вторая кнопка (Факты) */
.apple-btn-secondary {
    color: var(--text-muted) !important;
    font-weight: 600;
    transition: color 0.3s ease;
}

.apple-btn-secondary:hover {
    color: var(--text-main) !important;
}

/* 5. Бейдж (Мягкое стекло) */
.apple-badge {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-dim) !important;
    backdrop-filter: blur(12px);
    border-radius: 100vw !important;
    padding: 0.5rem 1rem !important;
}

.apple-badge .badge-text {
    color: var(--text-dim) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em;
}

/* 6. Светлый режим (Дополнительные фиксы) */
html.light-mode #about {
    /* Чтобы текст не был серым на белом */
    --text-main: #000000;
    --text-muted: #4b5563;
}

html.light-mode .hero-text-solid {
    color: #000000 !important;
}

/* Индикатор скролла в светлом режиме */
html.light-mode .scroll-indicator-clean span {
    color: #9ca3af !important;
}

html.light-mode .scroll-indicator-clean .line {
    background: #e5e7eb !important;
}

/* Скрываем звезды, если они мешают на белом */
html.light-mode #starfield {
    opacity: 0 !important;
    visibility: hidden;
}

/* Убираем лишние водяные знаки, если они создают кашу */
#about::before {
    display: none !important;
}

/* ==========================================================================
   LIGHT MODE FIX: MARQUEE SECTION
   ========================================================================== */

/* 1. Фон секции и контейнера */
html.light-mode .marquee-section {
    background-color: #ffffff !important;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* 2. Заголовок и лейблы */
html.light-mode .marquee-title {
    color: #111827 !important;
    /* Глубокий черный */
}

html.light-mode .marquee-title span.opacity-50 {
    color: #6b7280 !important;
    /* Серый текст */
    opacity: 0.6 !important;
}

html.light-mode .marquee-section .apple-badge {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

html.light-mode .marquee-section .badge-text {
    color: #4b5563 !important;
}

/* 3. ЛОГОТИПЫ (ИНВЕРСИЯ В ЧЕРНЫЙ) */
html.light-mode .brand-item img {
    /* brightness(0) делает логотип полностью черным */
    filter: brightness(0) !important;
    opacity: 0.4;
    transition: all 0.4s ease;
}

html.light-mode .brand-item:hover img {
    opacity: 1;
    filter: brightness(0) drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1)) !important;
}

/* 4. ГРАДИЕНТНЫЕ МАСКИ ПО БОКАМ (Чтобы затухание было белым) */
html.light-mode .marquee-fade-left {
    background: linear-gradient(to right, #ffffff 0%, transparent 100%) !important;
}

html.light-mode .marquee-fade-right {
    background: linear-gradient(to left, #ffffff 0%, transparent 100%) !important;
}

/* Исправляем индикатор скролла, если он наезжает */
html.light-mode .scroll-indicator-clean .line::after {
    background: linear-gradient(to bottom, transparent, #000, transparent) !important;
}

/* ==========================================================================
   ULTRA AESTHETIC LIGHT MODE PATCH (ECOSYSTEM SECTION)
   ========================================================================== */

html.light-mode #ecosystem {
    background-color: #f5f5f7 !important;
    /* Светло-серый фон как на сайте Apple */
}

/* 1. ГЛАВНЫЕ ЗАГОЛОВКИ (Глубокий черный антрацит) */
html.light-mode #ecosystem-heading {
    color: #1d1d1f !important;
}

html.light-mode #ecosystem h3.card-title {
    color: #1d1d1f !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
}

/* 2. ТЕКСТЫ ОПИСАНИЙ (Улучшенная читаемость) */
html.light-mode #ecosystem p,
html.light-mode #ecosystem .text-gray-400,
html.light-mode #ecosystem .text-gray-500 {
    color: #424245 !important;
    /* Более насыщенный серый */
    font-weight: 500;
}

/* 3. ИКОНКИ И АКЦЕНТЫ (Делаем их сочнее) */

/* Зеленый (Щит) */
html.light-mode .icon-box-green {
    background: #e8f5e9 !important;
    color: #1b5e20 !important;
    /* Глубокий лесной зеленый */
    border-color: #c8e6c9 !important;
}

html.light-mode .badge-green {
    background: #1d1d1f !important;
    /* Инверсия: черный бейдж */
    color: #ffffff !important;
}

/* Фиолетовый (Безопасность) */
html.light-mode .icon-box-purple {
    background: #f3e8ff !important;
    color: #6b21a8 !important;
    /* Насыщенный пурпур */
    border-color: #e9d5ff !important;
}

html.light-mode .badge-purple {
    background: #6b21a8 !important;
    color: #ffffff !important;
}

/* Синий (2 часа) */
html.light-mode #ecosystem .text-blue-500,
html.light-mode #ecosystem .text-blue-400 {
    color: #0066cc !important;
    /* Яркий королевский синий */
}

/* 4. КАРТОЧКА "2 часа" (Логистика) */
html.light-mode #ecosystem article:has(.text-blue-500) {
    background: #ffffff !important;
}

/* Большая цифра 24 */
html.light-mode #ecosystem .text-4xl.md\:text-7xl {
    background: linear-gradient(135deg, #1d1d1f 0%, #0066cc 100%) !important;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Линии курьерской доставки */
html.light-mode #ecosystem .border-l.border-blue-500\/30 {
    border-left-color: rgba(0, 102, 204, 0.2) !important;
}

html.light-mode #ecosystem .bg-blue-500 {
    background-color: #0066cc !important;
}

/* 5. КНОПКИ БРЕНДОВ (AKKO, OCYPUS и др.) */
html.light-mode #ecosystem .bg-white\/5.p-2.rounded {
    background-color: #f5f5f7 !important;
    /* Матовый серый */
    border: 1px solid #d2d2d7 !important;
    transition: all 0.3s ease;
}

html.light-mode #ecosystem .bg-white\/5.p-2.rounded:hover {
    background-color: #e8e8ed !important;
    transform: translateY(-2px);
}

html.light-mode #ecosystem .bg-white\/5.p-2.rounded b {
    color: #1d1d1f !important;
}

/* 6. ЭФФЕКТ КАРТОЧЕК (BENTO) */
html.light-mode #ecosystem article[role="listitem"] {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    /* Фирменная мягкая тень Apple */
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.02),
        0 10px 40px -10px rgba(0, 0, 0, 0.06) !important;
}

html.light-mode #ecosystem article[role="listitem"]:hover {
    box-shadow:
        0 30px 60px -12px rgba(0, 0, 0, 0.12),
        0 18px 36px -18px rgba(0, 0, 0, 0.15) !important;
}

/* 7. ИСПРАВЛЕНИЕ МЕЛКИХ ИКОНОК (Emoji/SVG) */
html.light-mode #ecosystem .text-yellow-400 {
    color: #f57c00 !important;
}

/* Оранжевый вместо бледно-желтого */
html.light-mode #ecosystem .text-pink-400 {
    color: #d81b60 !important;
}

/* ==========================================================================
   FIX: LOGISTICS CARD "BLUE BLOCK" ERROR
   ========================================================================== */

html.light-mode #ecosystem .text-4xl.md\:text-7xl {
    /* 1. Сбрасываем "кирпич" */
    background: none !important;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
    color: #1d1d1f !important;
    /* Возвращаем чистый черный по умолчанию */
}

/* 2. Применяем градиент ТОЛЬКО к цифрам внутри, а не к обертке */
html.light-mode #ecosystem .text-4xl.md\:text-7xl span[data-i18n="eco1_c3_title_val"] {
    background: linear-gradient(135deg, #1d1d1f 0%, #0066cc 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block;
    /* Важно для корректного клипа */
}

/* 3. Слово "Часа" или "Hours" делаем просто синим без сложных эффектов */
html.light-mode #ecosystem .text-4xl.md\:text-7xl .text-blue-500 {
    background: none !important;
    -webkit-text-fill-color: initial !important;
    color: #0066cc !important;
}

/* 4. Исправляем фоновую карту (SVG), которая могла вылезти вперед */
html.light-mode #ecosystem article svg {
    z-index: 0 !important;
    opacity: 0.15 !important;
}

html.light-mode #ecosystem article .relative.z-10 {
    z-index: 10 !important;
}

/* ==========================================================================
   FINAL CONTRAST FIX: LIGHT MODE VISIBILITY
   ========================================================================== */

html.light-mode #ecosystem {
    /* Основной текст описаний во всех карточках */
    color: #1d1d1f !important;
}

/* 1. Мелкие списки в карточках (Мониторинг, Блокировка и т.д.) */
html.light-mode #ecosystem ul li,
html.light-mode #ecosystem .text-gray-400,
html.light-mode #ecosystem .text-gray-500 {
    color: #424245 !important;
    /* Глубокий серый */
    font-weight: 500 !important;
}

/* Жирный текст внутри списков */
html.light-mode #ecosystem b,
html.light-mode #ecosystem strong {
    color: #000000 !important;
    font-weight: 700 !important;
}

/* 2. Карточка "2 часа" — Исправление невидимых меток */
/* Текст "SLA PROTOCOL ACTIVATED" */
html.light-mode #ecosystem .text-blue-400 {
    color: #0055b3 !important;
    /* Темно-синий */
    font-weight: 700 !important;
}

/* Таймлайн (ORDER CHECK, PACKING, DISPATCH) — Самое невидимое место */
html.light-mode #ecosystem .font-mono.text-blue-200,
html.light-mode #ecosystem .font-mono.text-blue-300\/60 {
    color: #515154 !important;
    /* Заменяем бледный голубой на читаемый серый */
}

html.light-mode #ecosystem .text-gray-500 {
    color: #86868b !important;
    /* Время (15 min, 2 hours) */
}

/* Статус "ARRIVED" и города на карте */
html.light-mode #ecosystem .text-blue-400.font-bold {
    color: #0066cc !important;
    opacity: 1 !important;
}

/* 3. Бейджи (MARGIN GUARD, WHITE IMPORT) */
html.light-mode #ecosystem .bg-green-900\/20,
html.light-mode #ecosystem .bg-purple-900\/20 {
    background-color: #1d1d1f !important;
    /* Делаем их темными плашками */
    color: #ffffff !important;
    /* Текст внутри — белый */
    border: none !important;
}

/* 4. Кнопки брендов (AKKO, OCYPUS и др.) */
html.light-mode #ecosystem .bg-white\/5.p-2.rounded {
    background-color: #f5f5f7 !important;
    border-color: #d2d2d7 !important;
}

html.light-mode #ecosystem .bg-white\/5.p-2.rounded span.text-gray-500 {
    color: #6e6e73 !important;
    /* Категории под названиями брендов */
}

/* 5. Карточка "Инъекция роста" — Эмодзи и пункты */
html.light-mode #ecosystem article:last-child span {
    color: #1d1d1f !important;
}

/* 6. Карточка "Сервис" — мелкий текст внизу */
html.light-mode #ecosystem .text-\[10px\].text-gray-500 {
    color: #86868b !important;
    font-weight: 600 !important;
    border-top-color: #d2d2d7 !important;
}

/* 7. Общий фикс иконок (чтобы не были бледными) */
html.light-mode #ecosystem .icon-box svg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* ==========================================================================
   CLEAN LIGHT MODE: CATALOG CTA (NO SPOTS, BLACK BUTTON)
   ========================================================================== */

/* 1. ПОЛНОСТЬЮ УДАЛЯЕМ ПЯТНО И ДЕЛАЕМ ЧИСТЫЙ БЕЛЫЙ ФОН */
html.light-mode section:has(.animate-marquee-slow) {
    background: #ffffff !important;
    /* Идеально белый фон */
}

/* 2. КНОПКА: СТРОГИЙ ЧЕРНЫЙ ЦВЕТ */
html.light-mode section:has(.animate-marquee-slow) .group.relative.inline-flex {
    background-color: #000000 !important;
    /* Кнопка становится черной */
    border: none !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.2) !important;
    /* Мягкая тень для объема */
    opacity: 1 !important;
}

/* 3. ТЕКСТ ВНУТРИ КНОПКИ И СТРЕЛКА: БЕЛЫЙ ЦВЕТ */
html.light-mode section:has(.animate-marquee-slow) [data-i18n="cta_button"],
html.light-mode section:has(.animate-marquee-slow) .group svg {
    color: #ffffff !important;
    /* Текст и стрелка — белые */
}

/* 4. ХОВЕР: КНОПКА ЧУТЬ СВЕТЛЕЕТ ПРИ НАВЕДЕНИИ */
html.light-mode section:has(.animate-marquee-slow) .group.relative.inline-flex:hover {
    background-color: #1d1d1f !important;
    /* Угольно-черный Apple */
    transform: scale(1.05) translateY(-3px) !important;
}

/* 5. ФОНОВЫЙ ТЕКСТ "OFFICIAL CATALOG" (Делаем его едва заметным серым контуром) */
html.light-mode .animate-marquee-slow span {
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.05) !important;
    color: transparent !important;
    background: none !important;
}

/* 6. ИСПРАВЛЕНИЕ МЕЛКИХ НАДПИСЕЙ */
html.light-mode section:has(.animate-marquee-slow) [data-i18n="cta_label"] {
    color: #86868b !important;
    /* Серый текст сверху */
    text-shadow: none !important;
}

html.light-mode section:has(.animate-marquee-slow) [data-i18n="cta_sub"] {
    color: #86868b !important;
    /* Серый текст снизу */
}

/* ==========================================================================
   FORCE BLACK BUTTON: CATALOG CTA LIGHT MODE
   ========================================================================== */

/* 1. Фон секции — убираем любые градиенты */
html.light-mode section:has(.animate-marquee-slow) {
    background: #ffffff !important;
}

/* 2. КНОПКА: Принудительный черный цвет без прозрачности */
html.light-mode section:has(.animate-marquee-slow) .group.relative.inline-flex {
    background-color: #000000 !important;
    /* Радикальный черный */
    background: #000000 !important;
    /* Убираем градиенты */
    backdrop-filter: none !important;
    /* Убираем размытие (оно дает "молоко") */
    border: none !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    /* Тень для глубины */
    opacity: 1 !important;
}

/* 3. ТЕКСТ В КНОПКЕ: Принудительный белый */
html.light-mode section:has(.animate-marquee-slow) .group [data-i18n="cta_button"] {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    /* Убираем прозрачность от градиентов */
    opacity: 1 !important;
}

/* 4. СТРЕЛКА: Принудительный белый */
html.light-mode section:has(.animate-marquee-slow) .group svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    opacity: 1 !important;
}

/* 5. ХОВЕР: Кнопка чуть светлеет, чтобы чувствовался клик */
html.light-mode section:has(.animate-marquee-slow) .group.relative.inline-flex:hover {
    background-color: #1d1d1f !important;
    /* Темно-серый Apple */
    transform: scale(1.05) translateY(-3px) !important;
}

/* 6. ФОНОВЫЙ ТЕКСТ "OFFICIAL CATALOG" (Делаем его совсем бледным контуром) */
html.light-mode .animate-marquee-slow span {
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.05) !important;
    background: none !important;
}

/* ==========================================================================
   NUCLEAR FIX: CATALOG BUTTON LIGHT MODE
   ========================================================================== */

/* 1. Фон всей секции — строго белый */
html.light-mode #catalog-cta {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* 2. Сама кнопка (ссылка) — радикально черная */
html.light-mode #catalog-cta a.group {
    background-color: #000000 !important;
    background: #000000 !important;
    border: none !important;
    backdrop-filter: none !important;
    /* Убирает молочный эффект */
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3) !important;
}

/* 3. Текст внутри кнопки — чисто белый */
html.light-mode #catalog-cta a.group span[data-i18n="cta_button"] {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    /* Убивает градиенты */
    opacity: 1 !important;
}

/* 4. Стрелка в кнопке — чисто белая */
html.light-mode #catalog-cta a.group svg {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* 5. Убираем лишние слои свечения, которые могут мешать */
html.light-mode #catalog-cta .bg-purple-500\/20.blur-3xl,
html.light-mode #catalog-cta .bg-white.opacity-0 {
    display: none !important;
    opacity: 0 !important;
}

/* 6. Тексты вокруг кнопки (Серые) */
html.light-mode #catalog-cta [data-i18n="cta_label"],
html.light-mode #catalog-cta [data-i18n="cta_sub"] {
    color: #86868b !important;
    text-shadow: none !important;
}

/* 7. Фоновый текст (Контурный) */
html.light-mode #catalog-cta .animate-marquee-slow span {
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.05) !important;
    color: transparent !important;
    background: none !important;
}

/* 8. Состояние при наведении */
html.light-mode #catalog-cta a.group:hover {
    background-color: #1d1d1f !important;
    /* Чуть светлее черный */
    transform: scale(1.05) translateY(-5px) !important;
}

/* ==========================================================================
   ULTIMATE LIGHT MODE FIX: CATALOG BUTTON (USING EXACT PATH)
   ========================================================================== */

/* 1. Очищаем фон всей секции (убираем темные градиенты и пятна) */
html.light-mode body>section.relative.py-32.md\:py-48 {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* 2. Делаем кнопку радикально черной (игнорируем все Tailwind классы) */
html.light-mode body>section.relative.py-32.md\:py-48>div.relative.z-10>a {
    background-color: #000000 !important;
    background: #000000 !important;
    border: none !important;
    opacity: 1 !important;
    /* Отключаем эффекты стекла, которые создавали "молоко" */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3) !important;
}

/* 3. Делаем текст внутри кнопки чисто белым */
html.light-mode body>section.relative.py-32.md\:py-48>div.relative.z-10>a span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    /* Убивает любые градиенты на буквах */
    opacity: 1 !important;
}

/* 4. Делаем стрелку чисто белой */
html.light-mode body>section.relative.py-32.md\:py-48>div.relative.z-10>a svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    opacity: 1 !important;
}

/* 5. Прячем внутренние слои (градиенты и блюры), которые пачкали кнопку */
html.light-mode body>section.relative.py-32.md\:py-48>div.relative.z-10>a div {
    display: none !important;
    opacity: 0 !important;
}

/* 6. Ховер-эффект: кнопка чуть светлеет при наведении */
html.light-mode body>section.relative.py-32.md\:py-48>div.relative.z-10>a:hover {
    background-color: #1d1d1f !important;
    /* Цвет Apple Space Gray */
    transform: scale(1.05) translateY(-5px) !important;
}

/* 7. Делаем фоновый текст "OFFICIAL CATALOG" видимым контуром */
html.light-mode .animate-marquee-slow span {
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.05) !important;
    color: transparent !important;
    background: none !important;
}

/* 8. Подписи "ПРЯМОЙ ДОСТУП" и "PDF ВЕРСИЯ" */
html.light-mode body>section.relative.py-32.md\:py-48 [data-i18n="cta_label"],
html.light-mode body>section.relative.py-32.md\:py-48 [data-i18n="cta_sub"] {
    color: #86868b !important;
    text-shadow: none !important;
}

/* ==========================================================================
   FIXED LIGHT MODE: CATALOG BUTTON (TEXT VISIBLE & SOLID BLACK)
   ========================================================================== */

/* 1. Чистый белый фон секции */
html.light-mode body>section.relative.py-32.md\:py-48 {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* 2. Кнопка: Монолитный черный */
html.light-mode body>section.relative.py-32.md\:py-48>div.relative.z-10>a {
    background-color: #000000 !important;
    background: #000000 !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3) !important;
    opacity: 1 !important;
}

/* 3. СКРЫВАЕМ ТОЛЬКО ДЕКОРАТИВНЫЕ СЛОИ (absolute), чтобы не мешали черному цвету */
html.light-mode body>section.relative.py-32.md\:py-48>div.relative.z-10>a>div.absolute {
    display: none !important;
}

/* 4. ПРОЯВЛЯЕМ КОНТЕНТНЫЙ СЛОЙ (тот, где текст и стрелка) */
html.light-mode body>section.relative.py-32.md\:py-48>div.relative.z-10>a>div.relative {
    display: flex !important;
    /* Возвращаем видимость тексту */
    opacity: 1 !important;
    visibility: visible !important;
}

/* 5. Текст и Стрелка — Чисто белый */
html.light-mode body>section.relative.py-32.md\:py-48>div.relative.z-10>a span,
html.light-mode body>section.relative.py-32.md\:py-48>div.relative.z-10>a svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}

/* 6. Ховер: кнопка чуть светлеет */
html.light-mode body>section.relative.py-32.md\:py-48>div.relative.z-10>a:hover {
    background-color: #1d1d1f !important;
    transform: scale(1.05) translateY(-5px) !important;
}

/* 7. Фоновый текст "OFFICIAL CATALOG" (Тонкий серый контур) */
html.light-mode .animate-marquee-slow span {
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.05) !important;
    color: transparent !important;
    background: none !important;
}

/* 8. Мелкие подписи вокруг */
html.light-mode body>section.relative.py-32.md\:py-48 [data-i18n="cta_label"],
html.light-mode body>section.relative.py-32.md\:py-48 [data-i18n="cta_sub"] {
    color: #86868b !important;
    text-shadow: none !important;
}

/* ==========================================================================
   FINAL DEADLY FIX: CATALOG BUTTON (SOLID BLACK)
   ========================================================================== */

/* 1. Убираем фон у самой секции */
html.light-mode body>section.relative.py-32.md\:py-48 {
    background-color: #ffffff !important;
}

/* 2. КНОПКА (Ссылка <a>) - Принудительный черный монолит */
html.light-mode body>section.relative.py-32.md\:py-48>div.relative.z-10.text-center>a {
    background-color: #000000 !important;
    /* ЧЕРНЫЙ ФОН */
    background: #000000 !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3) !important;
    opacity: 1 !important;
}

/* 3. УБИРАЕМ ВСЕ ВНУТРЕННИЕ СЛОИ (Те самые div-ы, которые дают молоко) */
html.light-mode body>section.relative.py-32.md\:py-48>div.relative.z-10.text-center>a div.absolute {
    display: none !important;
    /* Выключаем градиенты и свечения внутри */
}

/* 4. ТЕКСТОВЫЙ КОНТЕЙНЕР (relative z-10) - Делаем видимым */
html.light-mode body>section.relative.py-32.md\:py-48>div.relative.z-10.text-center>a div.relative.z-10 {
    display: flex !important;
    background: transparent !important;
    opacity: 1 !important;
}

/* 5. ТЕКСТ И СТРЕЛКА - ПРИНУДИТЕЛЬНЫЙ БЕЛЫЙ */
html.light-mode body>section.relative.py-32.md\:py-48>div.relative.z-10.text-center>a span,
html.light-mode body>section.relative.py-32.md\:py-48>div.relative.z-10.text-center>a svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    /* Отключает любые прозрачные эффекты букв */
    opacity: 1 !important;
}

/* 6. ХОВЕР - Чтобы кнопка реагировала */
html.light-mode body>section.relative.py-32.md\:py-48>div.relative.z-10.text-center>a:hover {
    background-color: #1d1d1f !important;
    /* Темно-серый при наведении */
    transform: scale(1.05) translateY(-5px) !important;
}

/* 7. ФОНОВЫЙ ТЕКСТ "OFFICIAL CATALOG" */
html.light-mode .animate-marquee-slow span {
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.05) !important;
    color: transparent !important;
}


/* ==========================================================================
   PERFECT LIGHT MODE: CATALOG BUTTON (WHITE IDLE -> BLACK HOVER)
   ========================================================================== */

/* 1. Фон секции — чисто белый */
html.light-mode body>section.relative.py-32.md\:py-48 {
    background-color: #ffffff !important;
}

/* 2. КНОПКА В СПОКОЙНОМ СОСТОЯНИИ (БЕЛАЯ С ЧЕРНЫМ ТЕКСТОМ) */
html.light-mode body>section.relative.py-32.md\:py-48>div.relative.z-10.text-center>a {
    background-color: #ffffff !important;
    /* Белый фон */
    background: #ffffff !important;
    border: 1px solid #000000 !important;
    /* Тонкая черная рамка, чтобы кнопка не терялась */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
    /* Легкая тень */
    opacity: 1 !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Текст и стрелка в покое — ЧЕРНЫЕ */
html.light-mode body>section.relative.py-32.md\:py-48>div.relative.z-10.text-center>a span,
html.light-mode body>section.relative.py-32.md\:py-48>div.relative.z-10.text-center>a svg {
    color: #000000 !important;
    fill: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    opacity: 1 !important;
}

/* 3. КНОПКА ПРИ НАВЕДЕНИИ (ИНВЕРСИЯ В ЧЕРНЫЙ) */
html.light-mode body>section.relative.py-32.md\:py-48>div.relative.z-10.text-center>a:hover {
    background-color: #000000 !important;
    /* Меняем фон на черный */
    background: #000000 !important;
    border-color: #000000 !important;
    transform: scale(1.05) translateY(-5px) !important;
    box-shadow: 0 25px 50px -10px rgba(0, 0, 0, 0.3) !important;
}

/* Текст и стрелка при наведении — БЕЛЫЕ */
html.light-mode body>section.relative.py-32.md\:py-48>div.relative.z-10.text-center>a:hover span,
html.light-mode body>section.relative.py-32.md\:py-48>div.relative.z-10.text-center>a:hover svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* 4. СКРЫВАЕМ ЛИШНИЕ СЛОИ */
html.light-mode body>section.relative.py-32.md\:py-48>div.relative.z-10.text-center>a div.absolute {
    display: none !important;
}

html.light-mode body>section.relative.py-32.md\:py-48>div.relative.z-10.text-center>a div.relative.z-10 {
    display: flex !important;
    background: transparent !important;
}

/* 5. ФОНОВЫЙ ТЕКСТ "OFFICIAL CATALOG" */
html.light-mode .animate-marquee-slow span {
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.05) !important;
    color: transparent !important;
}

/* ==========================================================================
   LIGHT MODE FIX: THE TRINITY (EXCLUSIVE HUB)
   ========================================================================== */

/* 1. ПРИНУДИТЕЛЬНО БЕЛЫЙ ФОН СЕКЦИИ */
html.light-mode #exclusive-hub {
    background-color: #ffffff !important;
    background-image: none !important;
    /* Убираем темные градиенты */
}

/* 2. ЗАГОЛОВОК "THE TRINITY" (Делаем черным) */
html.light-mode #trinity-heading {
    color: #111827 !important;
    /* Глубокий черный */
    background: none !important;
    -webkit-text-fill-color: initial !important;
    filter: none !important;
    opacity: 1 !important;
}

/* 3. ОПИСАНИЕ ПОД ЗАГОЛОВКОМ */
html.light-mode #exclusive-hub p {
    color: #4b5563 !important;
    /* Темно-серый */
    border-top-color: rgba(0, 0, 0, 0.1) !important;
}

/* 4. КАРТОЧКИ БРЕНДОВ (Делаем их заметными на белом фоне) */
html.light-mode .card-trinity {
    background-color: #f9fafb !important;
    /* Очень светло-серый для объема */
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.05),
        0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

/* Эффект при наведении на карточку в светлом режиме */
html.light-mode .card-trinity:hover {
    background-color: #ffffff !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1) !important;
    border-color: var(--brand-color) !important;
    /* Рамка цвета бренда */
}

/* 5. ЛОГОТИПЫ (ИНВЕРСИЯ В ЧЕРНЫЙ) */
html.light-mode .logo-trinity {
    filter: brightness(0) !important;
    /* Делаем логотипы черными */
    opacity: 0.8;
}

html.light-mode .card-trinity:hover .logo-trinity {
    opacity: 1;
}

/* 6. БЕЙДЖ "EXCLUSIVE DISTRIBUTION RIGHTS" */
html.light-mode .hub-badge {
    background-color: #f3f4f6 !important;
    border: 1px solid #d1d5db !important;
    box-shadow: none !important;
}

html.light-mode .hub-badge span {
    color: #111827 !important;
    font-weight: 700 !important;
}

/* 7. КНОПКИ ВНУТРИ КАРТОЧЕК */
html.light-mode .btn-trinity {
    background-color: #111827 !important;
    color: #ffffff !important;
    border: none !important;
}

html.light-mode .card-trinity:hover .btn-trinity {
    background-color: var(--brand-color) !important;
    color: #000000 !important;
}

/* 8. ГРАДИЕНТ ПОД ТЕКСТОМ ВНУТРИ КАРТОЧКИ */
html.light-mode .trinity-content {
    background: linear-gradient(to top, #ffffff 40%, transparent) !important;
}

/* ==========================================================================
   B2B PORTAL - ULTRA SEXY LIGHT MODE PATCH
   ========================================================================== */

html.light-mode #b2b {
    background-color: #fbfbfd !important;
    /* Чистый фон Apple */
}

/* 1. ЗАГОЛОВОК (Глубокий градиент) */
html.light-mode #b2b h2 {
    color: #1d1d1f !important;
}

html.light-mode #b2b h2 span.text-transparent {
    background-image: linear-gradient(135deg, #7c3aed 0%, #0071e3 100%) !important;
    filter: drop-shadow(0 4px 10px rgba(124, 58, 237, 0.2));
    -webkit-background-clip: text;
}

/* 2. БЛОК ПРИВИЛЕГИЙ (Чистое стекло) */
html.light-mode #b2b .bg-white\/5.p-4.rounded-xl {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05) !important;
}

html.light-mode #b2b .bg-white\/5.p-4.rounded-xl h4 {
    color: #86868b !important;
    border-bottom-color: #f5f5f7 !important;
}

html.light-mode #b2b ul li span {
    color: #1d1d1f !important;
    /* Текст внутри списка */
}

html.light-mode #b2b ul li b {
    color: #000000 !important;
}

/* 3. ФОРМА (Центральный объект) */
html.light-mode .spotlight-card {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.03) !important;
    /* Сложная "дорогая" тень Apple */
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.02),
        0 4px 12px rgba(0, 0, 0, 0.02),
        0 20px 60px -10px rgba(0, 0, 0, 0.08) !important;
}

/* Инпуты */
html.light-mode .apple-input {
    border-bottom-color: #d2d2d7 !important;
    color: #1d1d1f !important;
    font-weight: 600;
}

html.light-mode .apple-input:focus {
    border-bottom-color: #7c3aed !important;
}

html.light-mode .apple-label {
    color: #86868b !important;
}

html.light-mode .apple-input:focus~.apple-label,
html.light-mode .apple-input:not(:placeholder-shown)~.apple-label {
    color: #7c3aed !important;
}

/* 4. КНОПКА ОТПРАВКИ (Black Obsidian) */
html.light-mode #b2b button[type="submit"] {
    background: #000000 !important;
    color: #ffffff !important;
    border-radius: 1rem !important;
    height: 4.5rem;
    font-weight: 800 !important;
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html.light-mode #b2b button[type="submit"]:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 25px 50px -10px rgba(0, 0, 0, 0.3) !important;
    background: #1d1d1f !important;
}

/* 5. СИСТЕМНЫЙ ВИДЖЕТ (Нижний черный блок) */
/* Мы оставим его темным, но сделаем "стеклянным", чтобы он выглядел как элитный девайс на столе */
html.light-mode #b2b .bg-\[#0a0a0a\] {
    background: rgba(10, 10, 10, 0.95) !important;
    backdrop-filter: blur(20px);
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html.light-mode #b2b dt {
    color: #4b5563 !important;
    /* Серый текст внутри черного блока */
}

/* 6. ЧЕКБОКС И МЕЛКИЕ ТЕКСТЫ */
html.light-mode #b2b label[for="privacy"] {
    color: #424245 !important;
    font-weight: 500;
}

html.light-mode #b2b .text-\[10px\].font-mono.text-gray-400 {
    color: #86868b !important;
    font-weight: 700;
}

/* ==========================================================================
   ULTRA AESTHETIC LIGHT MODE PATCH (FOOTER SECTION)
   ========================================================================== */

html.light-mode #footer {
    background-color: #ffffff !important;
}

/* 1. ЗАГОЛОВОК (Убираем контуры, делаем солидный черный) */
html.light-mode #footer h2 span:first-child {
    color: #1d1d1f !important;
    -webkit-text-stroke: 0px !important;
    /* Убираем обводку */
}

html.light-mode #footer h2 span.text-transparent {
    background-image: linear-gradient(to right, #1d1d1f 0%, #424245 100%) !important;
    filter: none;
}

/* 2. КНОПКА "СТАТЬ ПАРТНЕРОМ" (Black Pearl) */
html.light-mode #footer a[aria-label*="Partner"] {
    background-color: #000000 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}

html.light-mode #footer a[aria-label*="Partner"]:hover {
    background-color: #1d1d1f !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25) !important;
    transform: translateY(-5px) scale(1.03);
}

html.light-mode #footer a[aria-label*="Partner"] div {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* 3. КАРТА (Стиль Apple Maps) */
html.light-mode #footer .map-container {
    background: #f5f5f7 !important;
    border-color: rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.05) !important;
}

html.light-mode #footer iframe {
    filter: grayscale(100%) contrast(90%) opacity(0.8) !important;
    /* Светлая чистая карта */
}

/* 4. КОНТАКТЫ (Четкость и контраст) */
html.light-mode #footer a[href^="tel"] span {
    color: #1d1d1f !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
}

html.light-mode #footer a[href^="mailto"] {
    color: #0066cc !important;
    /* Фирменный синий Link-color */
}

html.light-mode #footer address p {
    color: #424245 !important;
    font-weight: 500;
}

/* Социальные иконки */
html.light-mode #footer a[aria-label="Instagram"],
html.light-mode #footer a[aria-label="Telegram"] {
    background-color: #f5f5f7 !important;
    border-color: #d2d2d7 !important;
    color: #1d1d1f !important;
}

html.light-mode #footer a[aria-label="Instagram"]:hover,
html.light-mode #footer a[aria-label="Telegram"]:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* 5. КАРТА САЙТА (SITEMAP) */
html.light-mode #footer h4 {
    color: #86868b !important;
    /* Светло-серый заголовок секции */
}

html.light-mode #footer nav ul li a {
    color: #1d1d1f !important;
    font-weight: 700 !important;
}

html.light-mode #footer nav ul li a:hover {
    color: #0066cc !important;
}

/* 6. ФОНОВЫЙ ТЕКСТ (MARQUEE) */
html.light-mode .footer-marquee {
    color: rgba(0, 0, 0, 0.02) !important;
    /* Едва заметный след */
}

/* 7. НИЖНЯЯ ПАНЕЛЬ (LEGAL) */
html.light-mode #footer .border-t.border-white\/10 {
    border-top-color: #f5f5f7 !important;
}

html.light-mode #footer .text-gray-500,
html.light-mode #footer .text-gray-600,
html.light-mode #footer .text-gray-700 {
    color: #86868b !important;
    font-weight: 600;
}

html.light-mode #footer a[href*="COPYRIGHT"] {
    color: #ff3b30 !important;
    /* Красный акцент для защиты прав */
}

/* 8. СИСТЕМНЫЙ ЛОГ (DETAILS) */
html.light-mode #footer details summary div {
    color: #d2d2d7 !important;
}

html.light-mode #footer details summary div:hover {
    color: #1d1d1f !important;
}

/* ==========================================================================
   PURE WHITE LIGHT MODE: ECOSYSTEM (NO MILK VIBE)
   ========================================================================== */

/* 1. ПРИНУДИТЕЛЬНО КРИСТАЛЬНО БЕЛЫЙ ФОН */
html.light-mode,
html.light-mode body,
html.light-mode #ecosystem,
html.light-mode main {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* 2. КАРТОЧКИ: Белое на белом с "дорогой" тенью */
html.light-mode article[role="listitem"] {
    background-color: #ffffff !important;
    /* Ультра-тонкая граница, чтобы карточка не сливалась */
    border: 1px solid #f2f2f2 !important;
    /* Тень в стиле последних версий iOS: очень мягкая и глубокая */
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.01),
        0 20px 40px -12px rgba(0, 0, 0, 0.05) !important;
    backdrop-filter: none !important;
    /* Убираем блюр, он дает "молочность" на белом */
}

/* Эффект при наведении на карточку */
html.light-mode article[role="listitem"]:hover {
    transform: translateY(-8px) scale(1.01) !important;
    border-color: #e5e5e5 !important;
    box-shadow:
        0 40px 80px -20px rgba(0, 0, 0, 0.08) !important;
}

/* 3. ТИПОГРАФИКА: Максимальная четкость */
html.light-mode #ecosystem-heading {
    color: #000000 !important;
    /* Радикально черный для контраста */
}

html.light-mode #ecosystem h3.card-title {
    color: #111111 !important;
    font-weight: 800 !important;
}

html.light-mode #ecosystem p {
    color: #4b4b4d !important;
    /* Темный графит */
}

/* 4. ЦВЕТОВЫЕ АКЦЕНТЫ (Более сочные) */
/* Синий в карточке 2 часа */
html.light-mode #ecosystem .text-blue-500 {
    color: #0071e3 !important;
    /* Apple Blue */
}

html.light-mode #ecosystem .bg-blue-500 {
    background-color: #0071e3 !important;
}

/* Зеленый */
html.light-mode .icon-box-green {
    background-color: #f2fcf5 !important;
    color: #00802b !important;
}

/* 5. ИСПРАВЛЕНИЕ МЕЛКИХ ПЛАНОВЫХ ЛИНИЙ (Сетка на фоне) */
html.light-mode #ecosystem svg pattern path {
    stroke: rgba(0, 0, 0, 0.03) !important;
    /* Едва заметная сетка */
}

/* Скрываем водяные знаки, которые могут давать серый оттенок */
html.light-mode #global-watermark {
    opacity: 0.02 !important;
}

/* ==========================================================================
   FIX: BLACK ARTIFACT ON SCROLL (LIGHT MODE REVEAL)
   ========================================================================== */

/* 1. Гарантируем, что всё пространство за карточками — идеально белое */
html.light-mode,
html.light-mode body {
    background-color: #ffffff !important;
}

/* 2. Принудительно закрашиваем фон секций, чтобы при анимации появления (opacity)
      сквозь них не просвечивал темный фон страницы */
html.light-mode section,
html.light-mode main {
    background-color: #ffffff !important;
    position: relative;
    z-index: 1;
}

/* 3. Полностью отключаем звездное небо в светлом режиме. 
      Если оно остается хотя бы на 1%, оно будет давать "грязь" при анимации */
html.light-mode #starfield {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* 4. Убираем водяной знак или делаем его едва заметным, 
      чтобы он не создавал темных пятен при наложении слоев */
html.light-mode #global-watermark {
    opacity: 0.01 !important;
    filter: grayscale(1) brightness(1.5) !important;
}

/* 5. Оптимизация анимации появления (GSAP) */
/* Убеждаемся, что карточки рендерятся на белом слое */
html.light-mode article[role="listitem"] {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
}

/* 6. Исправляем "черную дыру" внизу страницы (футер) */
html.light-mode #footer {
    background-color: #ffffff !important;
}

/* ==========================================================================
   ULTRA-PREMIUM LIGHT MODE NAVBAR (APPLE STYLE)
   ========================================================================== */

html.light-mode .nav-capsule {
    /* Чистое белое стекло с высокой насыщенностью */
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(25px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(200%) !important;

    /* Тончайшая "ювелирная" грань */
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    outline: 1px solid rgba(0, 0, 0, 0.03) !important;
    /* Внешний микро-контур */

    /* Многослойная тень для эффекта парения */
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.01),
        0 10px 40px -10px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.8) !important;
    /* Внутренний блик сверху */
}

/* 1. ССЫЛКИ МЕНЮ (Делаем текст более "звонким") */
html.light-mode .nav-link-liquid {
    color: #1d1d1f !important;
    /* Фирменный черный Apple */
    font-weight: 500 !important;
    transition: all 0.3s ease;
}

html.light-mode .nav-link-liquid:hover {
    color: #000000 !important;
    background: rgba(0, 0, 0, 0.04) !important;
    /* Очень нежная подложка при наведении */
}

/* 2. ЛОГОТИП (Максимальная четкость) */
html.light-mode .nav-capsule img {
    filter: brightness(0) !important;
    /* Радикально черный логотип */
    opacity: 0.9;
}

/* 3. КНОПКА "СВЯЗАТЬСЯ" (Инверсия для сексуальности) */
html.light-mode .btn-capsule {
    background-color: #000000 !important;
    /* Черная кнопка на белом навигаторе */
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html.light-mode .btn-capsule:hover {
    background-color: #1d1d1f !important;
    transform: scale(1.05) translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

/* 4. ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКОВ И ТЕМЫ */
html.light-mode .lang-btn {
    color: #86868b !important;
    /* Благородный серый */
}

html.light-mode .lang-btn.active {
    color: #000000 !important;
    font-weight: 800 !important;
}

html.light-mode .theme-toggle-btn {
    background: rgba(0, 0, 0, 0.03) !important;
    border: 1px solid rgba(0, 0, 0, 0.02) !important;
}

html.light-mode .theme-toggle-btn svg {
    color: #f5a623 !important;
    /* Сочный оранжевый для солнца */
}

/* Микро-разделитель */
html.light-mode .lang-separator {
    color: #d2d2d7 !important;
}

/* ==========================================================================
   MOBILE & TOUCH OPTIMIZATION (ELITE EDITION)
   ========================================================================== */

/* 1. СЕКСУАЛЬНОЕ МОБИЛЬНОЕ МЕНЮ (OVERLAY) */
#mobile-menu {
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    background-color: rgba(0, 0, 0, 0.95) !important;
    /* В темной теме */
}

/* В светлой теме мобильное меню — чистое белое облако */
html.light-mode #mobile-menu {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

html.light-mode .mobile-nav-link {
    color: #1d1d1f !important;
    font-weight: 800 !important;
}

/* Кнопка закрытия в светлом меню */
html.light-mode #mobile-menu button[aria-label="Close Menu"] {
    color: #000 !important;
}

/* 2. АДАПТИВНАЯ ТИПОГРАФИКА (Чтобы заголовки не ломались) */
@media (max-width: 640px) {

    h1,
    .hero-text-solid {
        font-size: 3.2rem !important;
        /* Идеально для ширины телефона */
        letter-spacing: -0.04em !important;
    }

    h2,
    #ecosystem-heading {
        font-size: 2.5rem !important;
        line-height: 1.1 !important;
    }

    /* Уменьшаем отступы в секциях для мобилок */
    section {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
}

/* 3. ОПТИМИЗАЦИЯ BENTO GRID (Экосистема) */
@media (max-width: 768px) {
    .grid-bento {
        grid-template-columns: 1fr !important;
        /* На мобилках строго 1 колонка */
        gap: 1rem !important;
    }

    article[role="listitem"] {
        border-radius: 2rem !important;
        padding: 1.5rem !important;
    }

    /* Скрываем сложные визуальные эффекты (карту) на слабых мобилках для FPS */
    #ecosystem article svg {
        opacity: 0.1 !important;
    }
}

/* 4. TRINITY CARDS НА ТАЧ-ЭКРАНАХ */
/* На телефонах нет ховера, поэтому контент должен быть виден сразу или по тапу */
@media (hover: none) {
    .card-trinity .trinity-content {
        opacity: 1 !important;
        transform: translateY(0) !important;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 40%, transparent) !important;
    }

    html.light-mode .card-trinity .trinity-content {
        background: linear-gradient(to top, rgba(255, 255, 255, 0.95) 40%, transparent) !important;
    }

    .logo-trinity {
        transform: scale(0.7) translateY(-30px) !important;
    }
}

/* 5. УДОБСТВО КЛИКА (SAFE TOUCH AREAS) */
button,
a,
.lang-btn {
    min-height: 44px;
    /* Стандарт Apple для пальцев */
    display: inline-flex;
    align-items: center;
}

/* 6. КНОПКА КАТАЛОГА ДЛЯ МОБИЛОК */
@media (max-width: 480px) {
    [data-i18n="cta_button"] {
        font-size: 1.5rem !important;
        letter-spacing: 0 !important;
    }

    .group.relative.inline-flex.items-center.justify-center.px-12.py-8 {
        padding: 1.5rem 2rem !important;
        width: 100%;
        /* На всю ширину экрана */
    }
}

/* Ультра-премиальный заголовок */
.text-display-giant {
    font-size: clamp(3.5rem, 12vw, 10.5rem);
    font-weight: 900;
    letter-spacing: -0.07em;
    /* Максимально плотный трекинг Apple */
    line-height: 0.8;
    text-transform: uppercase;

    /* Градиент "Жидкий металл" */
    background: linear-gradient(180deg,
            #ffffff 30%,
            #a1a1a1 70%,
            #4b4b4b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    /* Тень для объема, чтобы текст "выпирал" из экрана */
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5));
    will-change: transform, opacity;
}

/* Эффект для светлой темы (строгий черный сатин) */
body.light-mode .text-display-giant {
    background: linear-gradient(180deg,
            #1d1d1f 0%,
            #434343 100%);
    -webkit-background-clip: text;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
}

/* Анимация при скролле для всей шапки */
#brands .hero-anim {
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Улучшение читаемости для расширенных описаний брендов */
.desc-trinity ul {
    margin-top: 1rem;
    padding-top: 1rem;
}

.desc-trinity li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    line-height: 1.4;
}

/* Убираем ограничение строк, если оно было */
.card-trinity:hover .desc-trinity {
    -webkit-line-clamp: unset !important;
    display: block !important;
}

/* Добавьте это в конец style.css для страховки */
body:not(.lenis-stopped):not(:has(#mobile-menu.is-open)) {
    overflow-y: auto !important;
}

/* Специально для Андроида в Chrome */
@media screen and (max-width: 768px) {

    html,
    body {
        overflow-x: hidden;
        overflow-y: auto;
    }
}

/* LIGHT MODE: GROWTH INJECTION CENTERPIECE */
html.light-mode article:has(.icon-box-pink) {
    background-color: #ffffff !important;
    border-color: rgba(236, 72, 153, 0.1) !important;
}

html.light-mode .icon-box-pink {
    background-color: #fdf2f8 !important;
    /* Очень нежный розовый фон */
    color: #db2777 !important;
    /* Насыщенный розовый для иконки (Pink-600) */
    border-color: #fbcfe8 !important;
    /* Pink-200 */
    box-shadow: 0 10px 20px -5px rgba(219, 39, 119, 0.1) !important;
}

html.light-mode article:has(.icon-box-pink) h3 {
    color: #111827 !important;
    /* Черный заголовок */
}

html.light-mode article:has(.icon-box-pink) .text-pink-400 {
    color: #db2777 !important;
    /* Розовая подпись под заголовком */
}

html.light-mode article:has(.icon-box-pink) .card-desc {
    color: #374151 !important;
    /* Темно-серый текст */
}

/* Ховер в светлом режиме */
html.light-mode article:has(.icon-box-pink):hover {
    border-color: #db2777 !important;
    box-shadow: 0 20px 40px -10px rgba(219, 39, 119, 0.15) !important;
}

/* --- BRAND SLABS STYLES --- */
.brand-slab {
    position: relative;
    overflow: hidden;
}

/* Эффект свечения точки при наведении */
.brand-slab::before {
    content: '';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.brand-slab:hover::before {
    opacity: 1;
}

/* Цвета точек */
.group\/akko:hover::before {
    background: #a855f7;
    box-shadow: 0 0 10px #a855f7;
}

.group\/ocy:hover::before {
    background: #eab308;
    box-shadow: 0 0 10px #eab308;
}

.group\/io:hover::before {
    background: #06b6d4;
    box-shadow: 0 0 10px #06b6d4;
}

.group\/lun:hover::before {
    background: #ec4899;
    box-shadow: 0 0 10px #ec4899;
}

/* LIGHT MODE: Тюнинг для белого фона */
html.light-mode .brand-slab {
    background-color: #f3f4f6 !important;
    /* Gray-100 */
    border-color: rgba(0, 0, 0, 0.05) !important;
}

html.light-mode .brand-slab b {
    color: #111827 !important;
    /* Насыщенный черный */
}

html.light-mode .brand-slab span {
    color: #6b7280 !important;
    /* Gray-500 */
}

/* Сочные цвета при наведении в Белом режиме */
html.light-mode .group\/akko:hover {
    background-color: #f3e8ff !important;
    border-color: #a855f7 !important;
}

html.light-mode .group\/akko:hover b {
    color: #7e22ce !important;
}

html.light-mode .group\/ocy:hover {
    background-color: #fef9c3 !important;
    border-color: #eab308 !important;
}

html.light-mode .group\/ocy:hover b {
    color: #a16207 !important;
}

html.light-mode .group\/io:hover {
    background-color: #e0f2fe !important;
    border-color: #06b6d4 !important;
}

html.light-mode .group\/io:hover b {
    color: #0891b2 !important;
}

html.light-mode .group\/lun:hover {
    background-color: #fce7f3 !important;
    border-color: #ec4899 !important;
}

html.light-mode .group\/lun:hover b {
    color: #be185d !important;
}


/* Эффект для иконки Бриллианта */
.icon-box svg path {
    transition: stroke-width 0.3s ease, filter 0.3s ease;
}

article:hover .icon-box svg {
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.4));
}

article:hover .icon-box svg path {
    stroke-width: 2px;
}

/* Настройка для Белого режима */
html.light-mode article:has(b:contains("AKKO")) .icon-box {
    background: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.03) !important;
}

html.light-mode .icon-box div[class*="bg-gradient"] {
    opacity: 0.05 !important;
    /* Делаем фон очень нежным в светлой теме */
}

/* Чтобы градиент на иконке был сочнее в светлой теме */
html.light-mode #gem-gradient stop:nth-child(1) {
    stop-color: #7e22ce;
}

html.light-mode #gem-gradient stop:nth-child(2) {
    stop-color: #0891b2;
}

html.light-mode #gem-gradient stop:nth-child(3) {
    stop-color: #be185d;

}


/* ==========================================================================
   ULTIMATE FIX: CATALOG BUTTON LIGHT MODE (BLACK & WHITE)
   ========================================================================== */

/* 1. Делаем саму кнопку полностью черной */
html.light-mode section:has(.animate-marquee-slow) a.group {
    background-color: #000000 !important;
    background: #000000 !important;
    /* Убирает любые фоновые градиенты */
    border: none !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3) !important;
    /* Глубокая тень для объема */
    opacity: 1 !important;
    backdrop-filter: none !important;
    /* Убирает размытие, которое дает эффект "молока" */
}

/* 2. Делаем текст внутри кнопки чисто белым */
html.light-mode section:has(.animate-marquee-slow) a.group span[data-i18n="cta_button"] {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    /* Принудительно отключает прозрачность градиентов */
    opacity: 1 !important;
}

/* 3. Делаем стрелку внутри кнопки чисто белой */
html.light-mode section:has(.animate-marquee-slow) a.group svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    opacity: 1 !important;
}

/* 4. Скрываем декоративные внутренние слои, которые могут давать засветы */
html.light-mode section:has(.animate-marquee-slow) a.group div.absolute {
    display: none !important;
}

/* 5. Эффект при наведении (кнопка чуть светлеет) */
html.light-mode section:has(.animate-marquee-slow) a.group:hover {
    background-color: #1d1d1f !important;
    /* Темно-серый Apple стиль */
    transform: scale(1.05) translateY(-5px) !important;
}

/* 6. Подписи "ПРЯМОЙ ДОСТУП" и "ЖИВЫЕ ОСТАТКИ" делаем четкими серыми */
html.light-mode section:has(.animate-marquee-slow) [data-i18n="cta_label"],
html.light-mode section:has(.animate-marquee-slow) [data-i18n="cta_sub"] {
    color: #86868b !important;
    text-shadow: none !important;
}

/* 7. Фоновый текст "OFFICIAL CATALOG" делаем едва заметным контуром */
html.light-mode .animate-marquee-slow span {
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.05) !important;
    color: transparent !important;
    background: none !important;
}

/* ==========================================================================
   LIGHT MODE ICONS ADAPTATION (PREMIER CONTRAST)
   ========================================================================== */

html.light-mode #ecosystem .icon-box {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03) !important;
    border-width: 1px !important;
}

/* 1. ЩИТ (Зеленая иконка) */
html.light-mode .icon-box-green {
    background-color: #f0fdf4 !important;
    /* Мятный фон */
    color: #166534 !important;
    /* Темно-зеленая иконка (контраст) */
    border-color: #bbf7d0 !important;
    /* Светло-зеленая рамка */
}

/* 2. RMA / СЕРВИС (Желтая иконка) */
html.light-mode .icon-box-yellow {
    background-color: #fffbeb !important;
    /* Светло-желтый фон */
    color: #92400e !important;
    /* Насыщенный янтарный для иконки */
    border-color: #fef3c7 !important;
    /* Рамка */
}

/* 3. МЕГАФОН (Огромная розовая иконка) */
html.light-mode .icon-box-pink {
    background-color: #fdf2f8 !important;
    /* Нежно-розовый фон */
    color: #9d174d !important;
    /* Малиновая иконка */
    border-color: #fbcfe8 !important;
    /* Розовая рамка */
}

/* 4. БРИЛЛИАНТ (Селекция - Градиентная иконка) */
/* В светлом режиме градиент внутри SVG должен стать темнее */
html.light-mode #gem-gradient stop:nth-child(1) {
    stop-color: #7e22ce;
}

/* Deep Purple */
html.light-mode #gem-gradient stop:nth-child(2) {
    stop-color: #0891b2;
}

/* Deep Cyan */
html.light-mode #gem-gradient stop:nth-child(3) {
    stop-color: #be185d;
}

/* Deep Pink */

html.light-mode article:has(.brand-slab) .icon-box {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

/* 5. ГИБКОСТЬ (Фиолетовая иконка) */
html.light-mode .icon-box-purple {
    background-color: #f5f3ff !important;
    /* Лавандовый фон */
    color: #5b21b6 !important;
    /* Насыщенный фиолетовый для иконки */
    border-color: #ddd6fe !important;
    /* Фиолетовая рамка */
}

/* 6. 24 ЧАСА (Синяя точка и акценты) */
html.light-mode .text-blue-400 {
    color: #1d4ed8 !important;
    /* Темно-синий (Royal Blue) */
}

html.light-mode .bg-blue-500 {
    background-color: #2563eb !important;
    /* Яркий синий для точки */
}

html.light-mode .border-blue-500\/30 {
    border-color: rgba(37, 99, 235, 0.2) !important;
}

/* 7. ОБЩИЕ ЗАГОЛОВКИ КАРТОЧЕК */
html.light-mode #ecosystem h3 {
    color: #111827 !important;
    /* Почти черный для всех H3 в бенто */
}

/* 8. ИНДИКАТОРЫ (Бейджи) */
html.light-mode .badge-green {
    background-color: #166534 !important;
    /* Темная плашка */
    color: #ffffff !important;
    /* Белый текст на ней */
}

html.light-mode .badge-purple {
    background-color: #5b21b6 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   FORCED VISIBILITY: LIGHT MODE ICONS FIX
   ========================================================================== */

html.light-mode #ecosystem .icon-box {
    /* 1. Вытаскиваем на самый верхний слой внутри карточки */
    position: relative !important;
    z-index: 50 !important;

    /* 2. Отключаем режимы наложения, которые делают иконки невидимыми на белом */
    mix-blend-mode: normal !important;

    /* 3. Гарантируем видимость */
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    /* Убеждаемся, что контейнер не схлопнулся */
}

html.light-mode #ecosystem .icon-box svg {
    /* 4. Принудительно задаем размер, если он слетел */
    width: 24px !important;
    height: 24px !important;
    opacity: 1 !important;
}

/* Фикс для средних/больших иконок (Мегафон и Бриллиант) */
html.light-mode .icon-box-pink svg,
html.light-mode .icon-box-pink+div svg,
html.light-mode article:has(.brand-slab) .icon-box svg {
    width: 32px !important;
    height: 32px !important;
}

/* 5. ЦВЕТОВОЙ КОНТРАСТ (Чтобы не были белыми на белом) */

/* Щит (Зеленая) */
html.light-mode .icon-box-green svg {
    color: #166534 !important;
    stroke: #166534 !important;
}

/* Сервис (Желтая) */
html.light-mode .icon-box-yellow svg {
    color: #92400e !important;
    stroke: #92400e !important;
}

/* Мегафон (Розовая) */
html.light-mode .icon-box-pink svg {
    color: #9d174d !important;
    stroke: #9d174d !important;
}

/* Гибкость (Фиолетовая) */
html.light-mode .icon-box-purple svg {
    color: #5b21b6 !important;
    stroke: #5b21b6 !important;
}

/* Бриллиант (Селекция) */
/* Если бриллиант пропал, значит градиент внутри SVG был белым */
html.light-mode #gem-gradient stop {
    stop-opacity: 1 !important;
}

/* 6. УДАЛЯЕМ ТЕМНЫЕ ОВЕРЛЕИ, КОТОРЫЕ МОГУТ ПЕРЕКРЫВАТЬ */
html.light-mode article .card-gradient-overlay {
    z-index: 1 !important;
}

html.light-mode article>div.relative.z-10 {
    z-index: 10 !important;
    /* Контент выше фона */
}

/* ==========================================================================
   ULTIMATE LIGHT MODE SCALE & GLOW FIX
   ========================================================================== */

html.light-mode #ecosystem .icon-box {
    /* 1. Увеличиваем базовый размер коробок */
    width: 3.5rem !important;
    /* Было меньше, теперь как в темной теме */
    height: 3.5rem !important;
    border-radius: 1.25rem !important;

    /* 2. Добавляем мягкое "цветное" свечение, чтобы иконка казалась больше */
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 3. Масштабируем сами SVG внутри коробок */
html.light-mode #ecosystem .icon-box svg {
    width: 1.75rem !important;
    height: 1.75rem !important;
    stroke-width: 2px !important;
    /* Делаем линии четче */
}

/* 4. СПЕЦИАЛЬНЫЙ РАЗМЕР ДЛЯ МЕГАФОНА (Инъекция Роста) */
/* В огромной карточке иконка должна быть гигантской */
html.light-mode .icon-box-pink {
    width: 5rem !important;
    /* w-20 */
    height: 5rem !important;
    box-shadow: 0 15px 30px -5px rgba(219, 39, 119, 0.25) !important;
}

html.light-mode .icon-box-pink svg {
    width: 2.5rem !important;
    /* Большой мегафон */
    height: 2.5rem !important;
}

/* 5. ЦВЕТНЫЕ ТЕНИ ДЛЯ ОБЪЕМА (Вместо темного свечения) */
html.light-mode .icon-box-green {
    box-shadow: 0 10px 20px -5px rgba(22, 101, 52, 0.2) !important;
}

html.light-mode .icon-box-purple {
    box-shadow: 0 10px 20px -5px rgba(91, 33, 182, 0.2) !important;
}

html.light-mode .icon-box-yellow {
    box-shadow: 0 10px 20px -5px rgba(146, 64, 14, 0.2) !important;
}

/* 6. КАРТОЧКА СЕЛЕКЦИИ (Бриллиант) */
html.light-mode article:has(.brand-slab) .icon-box {
    width: 3.5rem !important;
    height: 3.5rem !important;
    background: #ffffff !important;
    box-shadow: 0 10px 20px -5px rgba(124, 58, 237, 0.2) !important;
}

html.light-mode article:has(.brand-slab) .icon-box svg {
    width: 2rem !important;
    height: 2rem !important;
}

/* 7. ЭФФЕКТ ПРИ НАВЕДЕНИИ (Scale up) */
html.light-mode article:hover .icon-box {
    transform: scale(1.1) rotate(-5deg) !important;
    box-shadow: 0 20px 40px -10px currentColor !important;
}

/* ==========================================================================
   FORCE BLACK CATALOG BUTTON (LIGHT MODE ONLY)
   ========================================================================== */

html.light-mode #catalog-btn-main {
    background-color: #000000 !important;
    /* Чистый черный фон */
    background: #000000 !important;
    border: none !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    /* Убираем эффект стекла (белое молоко) */
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3) !important;
}

/* Красим текст внутри и стрелку в белый */
html.light-mode #catalog-btn-main span,
html.light-mode #catalog-btn-main svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    /* Убивает прозрачность */
    opacity: 1 !important;
}

/* Скрываем внутренние слои свечения, которые мешают черному цвету */
html.light-mode #catalog-btn-main div.absolute {
    display: none !important;
}

/* Ховер: кнопка чуть светлеет при наведении */
html.light-mode #catalog-btn-main:hover {
    background-color: #1d1d1f !important;
    /* Темно-серый при наведении */
    transform: scale(1.05) translateY(-5px) !important;
}

/* Делаем фоновый текст "OFFICIAL CATALOG" серым контуром */
html.light-mode section:has(#catalog-btn-main) .animate-marquee-slow span {
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.05) !important;
    color: transparent !important;
}

/* ФИКС СТРЕЛКИ В КАТАЛОГЕ ДЛЯ БЕЛОГО РЕЖИМА */
html.light-mode #catalog-btn-main svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
    opacity: 1 !important;

    /* Этот фильтр — самый надежный способ сделать черную иконку белой */
    filter: brightness(0) invert(1) !important;
}

/* Убеждаемся, что при наведении стрелка остается белой */
html.light-mode #catalog-btn-main:hover svg {
    filter: brightness(0) invert(1) !important;
    transform: scale(1.1) translateX(5px) !important;
    /* Добавим небольшой эффект движения */
}

/* ФИКС ГЛАВНОЙ КНОПКИ HERO В БЕЛОМ РЕЖИМЕ */
html.light-mode #hero-btn-main {
    background-color: #000000 !important;
    /* Черный фон кнопки */
    background: #000000 !important;
    color: #ffffff !important;
    /* Белый цвет для всего внутри */

    display: inline-flex !important;
    /* Чтобы кнопка не схлопывалась в кружок */
    align-items: center !important;
    justify-content: center !important;

    padding: 14px 32px !important;
    /* Возвращаем нормальные размеры */
    border-radius: 100vw !important;
    border: none !important;

    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3) !important;
    opacity: 1 !important;
}

/* Принудительно делаем текст внутри белым */
html.light-mode #hero-btn-main span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-weight: 800 !important;
}

/* Делаем иконку стрелки белой */
html.light-mode #hero-btn-main svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    filter: brightness(0) invert(1) !important;
    /* Гарантированный белый */
    margin-left: 8px !important;
}

/* Эффект при наведении */
html.light-mode #hero-btn-main:hover {
    background-color: #1d1d1f !important;
    /* Темно-серый при ховере */
    transform: scale(1.05) translateY(-2px) !important;
}

/* ==========================================================================
   FIX: EXCLUSIVE HUB CONTENT OVERLAP (THE TRINITY)
   ========================================================================== */

/* 1. Увеличиваем подъем логотипа, чтобы освободить место для заголовка */
.card-trinity:hover .trinity-logo-container {
    transform: translateY(-45%) !important;
    /* Было -35% */
}

/* 2. Делаем логотип значительно меньше при ховере, чтобы он стал "иконкой" сверху */
.card-trinity:hover .logo-trinity {
    transform: scale(0.45) !important;
    /* Было 0.65 */
    opacity: 0.7;
    /* Слегка приглушаем, чтобы акцент был на тексте */
}

/* 3. Улучшаем градиентную подложку, чтобы текст всегда читался */
.trinity-content {
    background: linear-gradient(to top,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.9) 50%,
            transparent 100%) !important;
    padding-top: 5rem !important;
    /* Добавляем "воздуха" сверху текста */
}

/* 4. СПЕЦИАЛЬНЫЙ ФИКС ДЛЯ МОБИЛОК (Экран как на скриншоте) */
@media (hover: none) {

    /* На мобилках логотип сразу должен быть наверху */
    .trinity-logo-container {
        transform: translateY(-38%) !important;
        padding-top: 2rem !important;
    }

    .logo-trinity {
        transform: scale(0.5) !important;
        opacity: 0.8 !important;
    }

    /* Контент прижимаем плотнее к низу, но даем отступ от лого */
    .trinity-content {
        padding: 1.5rem !important;
        padding-top: 4rem !important;
        background: linear-gradient(to top, #000 60%, transparent 100%) !important;
    }

    /* Уменьшаем заголовок на мобилках, чтобы не лез на лого */
    .title-trinity {
        font-size: 1.75rem !important;
        margin-bottom: 0.5rem !important;
    }
}

/* Фикс для Светлой темы (Light Mode) */
body.light-mode .trinity-content {
    background: linear-gradient(to top,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0.95) 50%,
            transparent 100%) !important;
}

/* ==========================================================================
   FIX: EXCLUSIVE HUB CONTENT OVERLAP (THE TRINITY)
   ========================================================================== */

/* 1. Увеличиваем подъем логотипа, чтобы освободить место для заголовка */
.card-trinity:hover .trinity-logo-container {
    transform: translateY(-45%) !important;
    /* Было -35% */
}

/* 2. Делаем логотип значительно меньше при ховере, чтобы он стал "иконкой" сверху */
.card-trinity:hover .logo-trinity {
    transform: scale(0.45) !important;
    /* Было 0.65 */
    opacity: 0.7;
    /* Слегка приглушаем, чтобы акцент был на тексте */
}

/* 3. Улучшаем градиентную подложку, чтобы текст всегда читался */
.trinity-content {
    background: linear-gradient(to top,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.9) 50%,
            transparent 100%) !important;
    padding-top: 5rem !important;
    /* Добавляем "воздуха" сверху текста */
}

/* 4. СПЕЦИАЛЬНЫЙ ФИКС ДЛЯ МОБИЛОК (Экран как на скриншоте) */
@media (hover: none) {

    /* На мобилках логотип сразу должен быть наверху */
    .trinity-logo-container {
        transform: translateY(-38%) !important;
        padding-top: 2rem !important;
    }

    .logo-trinity {
        transform: scale(0.5) !important;
        opacity: 0.8 !important;
    }

    /* Контент прижимаем плотнее к низу, но даем отступ от лого */
    .trinity-content {
        padding: 1.5rem !important;
        padding-top: 4rem !important;
        background: linear-gradient(to top, #000 60%, transparent 100%) !important;
    }

    /* Уменьшаем заголовок на мобилках, чтобы не лез на лого */
    .title-trinity {
        font-size: 1.75rem !important;
        margin-bottom: 0.5rem !important;
    }
}

/* Фикс для Светлой темы (Light Mode) */
body.light-mode .trinity-content {
    background: linear-gradient(to top,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0.95) 50%,
            transparent 100%) !important;
}

/* ==========================================================================
   ULTIMATE LOGO FIX: FLY TO TOP
   ========================================================================== */

/* 1. Контейнер логотипа: поднимаем гораздо выше */
.card-trinity:hover .trinity-logo-container {
    /* -42% отправит логотип почти к самому верхнему краю карточки */
    transform: translateY(-42%) !important;
}

/* 2. Само лого: уменьшаем до состояния маленькой иконки (30% от оригинала) */
.card-trinity:hover .logo-trinity {
    transform: scale(0.3) !important;
    /* Уменьшаем сильнее: было 0.65 -> стало 0.3 */
    opacity: 0.9;
    /* Делаем чуть четче */
    filter: brightness(0) invert(1) drop-shadow(0 0 15px var(--brand-color));
}

/* 3. Контент: опускаем чуть ниже, чтобы он не догнал логотип */
.card-trinity:hover .trinity-content {
    transform: translateY(0) !important;
    /* Увеличиваем прозрачный градиент сверху, чтобы текст не сливался */
    background: linear-gradient(to top,
            rgba(0, 0, 0, 1) 20%,
            rgba(0, 0, 0, 0.8) 70%,
            transparent 100%) !important;
}

/* 4. ФИКС ДЛЯ МОБИЛОК (Твой случай на скрине) */
@media (hover: none) {

    /* Сразу ставим логотип в "красный круг" */
    .trinity-logo-container {
        transform: translateY(-40%) !important;
        padding-top: 1rem !important;
    }

    .logo-trinity {
        transform: scale(0.35) !important;
        /* На мобилках чуть крупнее для читаемости */
    }

    /* Прижимаем текст ниже, чтобы между лого и заголовком было пространство */
    .trinity-content {
        transform: translateY(0) !important;
        padding-top: 6rem !important;
        /* Создаем дырку для логотипа */
        background: linear-gradient(to top, #000 70%, transparent 100%) !important;
    }
}

/* ==========================================================
   LIGHT MODE: HIGH CONTRAST TEXT FOR TRINITY CARDS
   ========================================================== */
html.light-mode .card-trinity {
    background-color: #ffffff !important;
}

/* Делаем заголовок "Вершина Инженерии" глубоким черным */
html.light-mode .title-trinity {
    color: #000000 !important;
    -webkit-text-fill-color: initial !important;
    /* Убираем градиент если был */
    opacity: 1 !important;
}

/* Делаем описание и пункты технологий темно-серыми/черными */
html.light-mode .desc-trinity,
html.light-mode .desc-trinity b,
html.light-mode .desc-trinity p,
html.light-mode .desc-trinity li,
html.light-mode .desc-trinity span {
    color: #1a1a1a !important;
    opacity: 1 !important;
}

/* Фон контента в светлой теме — плотный белый градиент */
html.light-mode .trinity-content {
    background: linear-gradient(to top,
            rgba(255, 255, 255, 1) 30%,
            rgba(255, 255, 255, 0.9) 70%,
            transparent 100%) !important;
}

/* Бейджи технологий (TDP, FDB) в светлой теме */
html.light-mode .trinity-content .bg-white\/5 {
    background-color: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* ==========================================================
   ULTIMATE WHITE LIQUID GLASS: ECOSYSTEM CARDS
   ========================================================== */

html.light-mode #ecosystem article[role="listitem"] {
    /* 1. Кристально белый фон с эффектом глубины */
    background-color: rgba(255, 255, 255, 0.95) !important;
    background: #ffffff !important;

    /* 2. Эффект размытия за карточкой (если под ней есть декор) */
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;

    /* 3. РАМКА LIQUID GLASS (Многослойный эффект) */
    border: 1px solid rgba(255, 255, 255, 1) !important;
    /* Основная белая грань */
    outline: 1px solid rgba(0, 0, 0, 0.03) !important;
    /* Внешний микро-контур для четкости */

    /* Внутреннее свечение и внешняя "умная" тень */
    box-shadow:
        0 10px 40px -10px rgba(0, 0, 0, 0.05),
        /* Мягкое парение */
        inset 0 1px 1px 0 rgba(255, 255, 255, 1),
        /* Блик на верхней грани (эффект стекла) */
        inset 0 -1px 2px 0 rgba(0, 0, 0, 0.02) !important;
    /* Легкое оседание снизу */

    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Эффект при наведении (Карточка становится "живой") */
html.light-mode #ecosystem article[role="listitem"]:hover {
    transform: translateY(-8px) scale(1.005) !important;
    background-color: #ffffff !important;

    /* Усиливаем свечение рамки при наведении */
    border-color: rgba(255, 255, 255, 1) !important;
    box-shadow:
        0 30px 60px -15px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(255, 255, 255, 1) inset !important;
}

/* 4. ТИПОГРАФИКА: Принудительный черный для читаемости на белом */
html.light-mode #ecosystem h3,
html.light-mode #ecosystem h2,
html.light-mode #ecosystem .card-title,
html.light-mode #ecosystem b,
html.light-mode #ecosystem strong {
    color: #000000 !important;
    -webkit-text-fill-color: initial !important;
    opacity: 1 !important;
}

html.light-mode #ecosystem p,
html.light-mode #ecosystem .card-desc,
html.light-mode #ecosystem span:not(.icon-box) {
    color: #4b5563 !important;
    /* Темно-серый антрацит */
    opacity: 1 !important;
}

/* 5. ИСПРАВЛЕНИЕ ВНУТРЕННИХ ПЛАШЕК (AKKO, OCYPUS и др.) */
html.light-mode #ecosystem .bg-white\/5 {
    background-color: #f8fafc !important;
    /* Светлый матовый фон */
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* 6. ИКОНКИ (Чтобы не терялись на белом) */
html.light-mode #ecosystem .icon-box {
    background-color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.03) !important;
}

/* ==========================================================
   FINAL RESCUE: ECOSYSTEM WHITE LIQUID GLASS (ULTIMATE)
   ========================================================== */

/* 1. ПРИНУДИТЕЛЬНО БЕЛЫЙ ФОН И СТЕКЛЯННАЯ РАМКА ДЛЯ КАРТОЧЕК */
html.light-mode #ecosystem article,
html.light-mode #ecosystem article[role="listitem"] {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(25px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;

    /* Эффект жидкого стекла на рамке */
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    outline: 1px solid rgba(0, 0, 0, 0.05) !important;

    /* Сложная тень: внешнее парение + внутренний стеклянный блик */
    box-shadow:
        0 15px 35px -5px rgba(0, 0, 0, 0.05),
        inset 0 1px 2px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 2px 0 rgba(0, 0, 0, 0.02) !important;

    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 2. ТЕКСТ: ИСПРАВЛЯЕМ НЕВИДИМОСТЬ (ДЕЛАЕМ ЧЕРНЫМ) */
html.light-mode #ecosystem h2,
html.light-mode #ecosystem h3,
html.light-mode #ecosystem h4,
html.light-mode #ecosystem p,
html.light-mode #ecosystem b,
html.light-mode #ecosystem strong,
html.light-mode #ecosystem li,
html.light-mode #ecosystem span:not(.icon-box) {
    color: #000000 !important;
    /* Чистый черный для максимального контраста */
    -webkit-text-fill-color: #000000 !important;
    /* Убиваем градиенты */
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Описание делаем чуть мягче, но всё равно темным (антрацит) */
html.light-mode #ecosystem .card-desc,
html.light-mode #ecosystem .text-gray-400,
html.light-mode #ecosystem .text-gray-500 {
    color: #1a1a1b !important;
}

/* 3. ИКОНКИ И БЕЙДЖИ (ЧТОБЫ НЕ БЫЛИ БЛЕДНЫМИ) */
html.light-mode #ecosystem .icon-box {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important;
}

/* 4. ВНУТРЕННИЕ ПЛАШКИ (Бренды: AKKO, OCYPUS и т.д.) */
html.light-mode #ecosystem .bg-white\/5 {
    background-color: #f3f4f6 !important;
    /* Светло-серый фон как в iOS */
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* 5. ХОВЕР-ЭФФЕКТ: КАРТОЧКА СВЕТИТСЯ */
html.light-mode #ecosystem article:hover {
    background: #ffffff !important;
    transform: translateY(-10px) scale(1.01) !important;
    box-shadow:
        0 30px 60px -12px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(255, 255, 255, 1) inset !important;
}

/* 6. СПЕЦИАЛЬНО ДЛЯ КАРТОЧКИ "24 ЧАСА" */
html.light-mode #ecosystem .theme-blue h3 span,
html.light-mode #ecosystem .text-blue-500,
html.light-mode #ecosystem .text-blue-400 {
    color: #0066cc !important;
    /* Классический Apple Blue */
}

html.light-mode #ecosystem .border-blue-500\/30 {
    border-color: rgba(0, 102, 204, 0.2) !important;
}

/* ==========================================================
   PREMIUM LIQUID GLASS LIGHT MODE: ECOSYSTEM
   ========================================================== */

/* 1. КАРТОЧКИ: Эффект "запотевшего" цветного стекла */
html.light-mode #ecosystem article,
html.light-mode #ecosystem article[role="listitem"] {
    /* Фон: очень легкий градиент от белого к жемчужному */
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(248, 250, 252, 0.85) 100%) !important;

    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;

    /* РАМКА LIQUID GLASS: Белый блик + тончайший контур */
    border: 1px solid rgba(255, 255, 255, 1) !important;
    outline: 1px solid rgba(0, 0, 0, 0.04) !important;

    /* ТЕНЬ: Цветное "умное" свечение */
    box-shadow:
        0 20px 40px -15px rgba(0, 0, 0, 0.05),
        inset 0 1px 2px 0 rgba(255, 255, 255, 1) !important;

    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 2. ТИПОГРАФИКА: Вместо черного — глубокий "полуночный" синий и градиенты */
html.light-mode #ecosystem h3,
html.light-mode #ecosystem .card-title {
    color: #1e293b !important;
    /* Slate-800 */
    font-weight: 800 !important;
    background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
    -webkit-background-clip: text !important;
    background-clip: text;
    -webkit-text-fill-color: transparent !important;
}

/* Описание: мягкий графитовый цвет */
html.light-mode #ecosystem p,
html.light-mode #ecosystem .card-desc {
    color: #475569 !important;
    /* Slate-600 */
    font-weight: 500 !important;
}

/* 3. ИКОНКИ: Делаем их "леденцовыми" (Candy Glass) */
html.light-mode #ecosystem .icon-box {
    background: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 1) !important;
    box-shadow:
        0 10px 20px -5px rgba(0, 0, 0, 0.08),
        inset 0 0 15px rgba(255, 255, 255, 1) !important;
}

/* 4. ЦВЕТОВЫЕ АКЦЕНТЫ ПРИ НАВЕДЕНИИ (Градиентные тени) */

/* Зеленая карточка (Щит) */
html.light-mode #ecosystem article:has(.icon-box-green):hover {
    border-color: #10b981 !important;
    box-shadow: 0 30px 60px -12px rgba(16, 185, 129, 0.15) !important;
}

/* Желтая карточка (Сервис) */
html.light-mode #ecosystem article:has(.icon-box-yellow):hover {
    border-color: #f59e0b !important;
    box-shadow: 0 30px 60px -12px rgba(245, 158, 11, 0.15) !important;
}

/* Розовая (Инъекция роста) */
html.light-mode #ecosystem article:has(.icon-box-pink):hover {
    border-color: #ec4899 !important;
    box-shadow: 0 30px 60px -12px rgba(236, 72, 153, 0.15) !important;
}

/* Фиолетовая (Безопасность) */
html.light-mode #ecosystem article:has(.icon-box-purple):hover {
    border-color: #a855f7 !important;
    box-shadow: 0 30px 60px -12px rgba(168, 85, 247, 0.15) !important;
}

/* 5. ВНУТРЕННИЕ ПЛАШКИ (Бренды) - Эффект мягкого шелка */
html.light-mode #ecosystem .bg-white\/5 {
    background: rgba(0, 0, 0, 0.02) !important;
    border: 1px solid rgba(0, 0, 0, 0.03) !important;
    backdrop-filter: blur(5px);
}

html.light-mode #ecosystem .bg-white\/5 b {
    color: #1e293b !important;
    -webkit-text-fill-color: initial !important;
}

/* 6. КАРТОЧКА 24 ЧАСА: Сочный синий градиент */
html.light-mode #ecosystem .theme-blue h3 span[data-i18n="eco1_c3_title_val"] {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

html.light-mode #ecosystem .text-blue-500,
html.light-mode #ecosystem .text-blue-400 {
    color: #2563eb !important;
    font-weight: 700;
}

/* ==========================================================
   ULTIMATE LIGHT MODE HEADLINE: ECOSYSTEM SECTION
   ========================================================== */

/* 1. ПЕРВАЯ СТРОКА ("Архитектура") - Глубокий матовый черный */
html.light-mode #ecosystem-heading {
    color: #0f172a !important;
    /* Очень глубокий темно-синий */
    letter-spacing: -0.04em !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
    opacity: 1 !important;
}

/* 2. ГРАДИЕНТНАЯ СТРОКА ("Рыночного Доминирования") */
html.light-mode #ecosystem-heading span.text-transparent {
    /* Делаем градиент сочным, но читаемым: от темного изумруда к глубокому циану */
    background-image: linear-gradient(135deg, #047857 0%, #0891b2 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;

    /* Мягкое цветное свечение под текстом */
    filter: drop-shadow(0 4px 15px rgba(5, 150, 105, 0.15)) !important;
}

/* 3. ВЕРХНЯЯ ПЛАШКА (IFC_SYSTEM_CORE_V2) - Эффект парящего стекла */
html.light-mode #ecosystem header div.inline-flex {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.03),
        inset 0 1px 1px rgba(255, 255, 255, 1) !important;
    backdrop-filter: blur(10px) !important;
}

/* Текст внутри плашки */
html.light-mode #ecosystem header div.inline-flex span.font-mono {
    color: #1b5e20 !important;
    /* Темно-зеленый код */
    font-weight: 700 !important;
}

/* Пульсирующая точка */
html.light-mode #ecosystem header div.inline-flex span.bg-green-500 {
    background-color: #10b981 !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

/* 4. ПОДЗАГОЛОВОК (Описание под заголовком) */
html.light-mode #ecosystem header p {
    color: #475569 !important;
    /* Мягкий серый сланец */
    border-top-color: rgba(0, 0, 0, 0.06) !important;
    font-weight: 500;
}

/* ==========================================================
   ENHANCED TYPOGRAPHY: ECOSYSTEM LIGHT MODE (LARGER FONTS)
   ========================================================== */

/* 1. ГЛАВНЫЙ ЗАГОЛОВОК СЕКЦИИ */
html.light-mode #ecosystem-heading {
    /* Делаем еще массивнее для эффекта Apple */
    font-size: clamp(2.8rem, 6vw, 5.8rem) !important;
    line-height: 1.0 !important;
    margin-bottom: 2rem !important;
}

/* 2. ЗАГОЛОВКИ ВНУТРИ КАРТОЧЕК (Bento Titles) */
html.light-mode #ecosystem article h3,
html.light-mode #ecosystem .card-title {
    font-size: 1.85rem !important;
    /* Увеличили с ~1.5rem */
    letter-spacing: -0.02em !important;
    margin-bottom: 1rem !important;
    line-height: 1.2 !important;
}

/* 3. ОСНОВНОЙ ТЕКСТ ОПИСАНИЯ */
html.light-mode #ecosystem article p,
html.light-mode #ecosystem .card-desc {
    font-size: 1.15rem !important;
    /* Увеличили: теперь текст "читается", а не "всматривается" */
    line-height: 1.6 !important;
    font-weight: 500 !important;
}

/* 4. СПИСКИ И ТЕХНИЧЕСКИЕ ПУНКТЫ */
html.light-mode #ecosystem article li,
html.light-mode #ecosystem article span:not(.icon-box) {
    font-size: 1.05rem !important;
    /* Было ~0.875rem */
    line-height: 1.5 !important;
}

/* Жирный текст (Акценты) */
html.light-mode #ecosystem b,
html.light-mode #ecosystem strong {
    font-weight: 800 !important;
    font-size: 1.1rem !important;
}

/* 5. КАРТОЧКА "24 ЧАСА" (Цифры) */
html.light-mode #ecosystem .theme-blue h3 span[data-i18n="eco1_c3_title_val"] {
    font-size: 5rem !important;
    /* Делаем цифру 24 по-настоящему гигантской */
    font-weight: 900 !important;
}

html.light-mode #ecosystem .theme-blue h3 span.text-blue-500 {
    font-size: 2.5rem !important;
    /* Слово "Часа" */
}

/* 6. ПУНКТЫ ТЕХНОЛОГИЙ (ВНУТРИ СЕРЫХ БЛОКОВ) */
html.light-mode #ecosystem .bg-white\/5 b {
    font-size: 1.0rem !important;
    letter-spacing: 0.02em;
}

html.light-mode #ecosystem .bg-white\/5 span {
    font-size: 0.9rem !important;
}

/* 7. ОТСТУПЫ (Даем крупному тексту больше воздуха) */
html.light-mode #ecosystem article {
    padding: 3rem !important;
    /* Увеличиваем внутренний отступ карточек */
}

@media (max-width: 768px) {
    html.light-mode #ecosystem article {
        padding: 1.5rem !important;
        /* На мобилках чуть меньше */
    }

    html.light-mode #ecosystem article h3 {
        font-size: 1.5rem !important;
    }
}

/* ==========================================================
   THE TRINITY: ULTIMATE LUXURY GRADIENT & EFFECT (LIGHT MODE)
   ========================================================== */

/* 1. ГЛАВНЫЙ ЗАГОЛОВОК: Эффект "Черного Жемчуга" */
html.light-mode #trinity-heading {
    /* Дорогой градиент: глубокий антрацит -> графит -> сталь */
    background: linear-gradient(135deg, #050505 0%, #1a1a1b 40%, #4b4b4d 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;

    font-size: clamp(3.5rem, 9vw, 7.5rem) !important;
    font-weight: 900 !important;
    letter-spacing: -0.06em !important;
    line-height: 0.85 !important;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1)) !important;
    opacity: 1 !important;
}

/* 2. ВЕРХНИЙ БЕЙДЖ (Exclusive Distribution Rights) */
html.light-mode #exclusive-hub div.hub-badge {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.05),
        inset 0 1px 1px #fff !important;
}

html.light-mode #exclusive-hub div.hub-badge span {
    color: #1a1a1b !important;
    font-weight: 800 !important;
    letter-spacing: 0.3em !important;
}

/* 3. ОПИСАНИЕ ПОД ЗАГОЛОВКОМ (Чистота и воздух) */
html.light-mode #exclusive-hub p:not(.desc-trinity) {
    font-size: 1.25rem !important;
    color: #4b5563 !important;
    /* Slate-600 */
    line-height: 1.6 !important;
    font-weight: 400 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    max-width: 800px !important;
    margin-left: auto;
    margin-right: auto;
}

/* 4. КАРТОЧКИ: ТИПОГРАФИКА (КРУПНЕЕ И ДОРОЖЕ) */

/* Заголовок в карточке */
html.light-mode .card-trinity .title-trinity {
    font-size: 2.2rem !important;
    /* Увеличили размер */
    font-weight: 900 !important;
    letter-spacing: -0.03em !important;
    /* Градиент в заголовках карточек */
    background: linear-gradient(135deg, #000000 0%, #334155 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Описание в карточке */
html.light-mode .card-trinity .desc-trinity {
    font-size: 1.1rem !important;
    /* Было 0.95 */
    color: #334155 !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
}

/* Кнопка "ИССЛЕДОВАТЬ БРЕНД" */
html.light-mode .card-trinity .btn-trinity {
    background-color: #000000 !important;
    color: #ffffff !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    height: 4.5rem !important;
    /* Делаем кнопку массивнее */
    border-radius: 1.25rem !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
}

/* 5. ЭФФЕКТ ПРИ НАВЕДЕНИИ НА КАРТОЧКУ (LUXURY GLOW) */
html.light-mode .card-trinity:hover {
    background: #ffffff !important;
    /* Очень мягкая, многослойная тень Apple */
    box-shadow:
        0 40px 80px -20px rgba(0, 0, 0, 0.12),
        0 20px 40px -15px rgba(0, 0, 0, 0.08) !important;
}

/* 6. ЛОГОТИПЫ ВНУТРИ КАРТОЧЕК */
html.light-mode .card-trinity .logo-trinity {
    filter: brightness(0) !important;
    /* Идеально черный */
    opacity: 0.85;
}

html.light-mode .card-trinity:hover .logo-trinity {
    opacity: 1;
    filter: brightness(0) drop-shadow(0 10px 20px rgba(0, 0, 0, 0.05)) !important;
}

/* ==========================================================
   EXPANDED B2B SECTION: PREMIUM SIDE-BY-SIDE
   ========================================================== */

/* 1. ОБЩИЕ ПРАВИЛА ДЛЯ LIGHT MODE */
html.light-mode #b2b {
    background-color: #ffffff !important;
}

/* Заголовок в светлом режиме */
html.light-mode #b2b h2 {
    color: #0f172a !important;
    /* Midnight Navy */
}

/* Описание */
html.light-mode #b2b p.text-xl {
    color: #475569 !important;
    /* Slate-600 */
}

/* 2. КАРТОЧКА ПРИВИЛЕГИЙ (Светлая тема) */
html.light-mode #b2b .bg-white\/5.p-8 {
    background: rgba(248, 250, 252, 0.8) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
}

html.light-mode #b2b .bg-white\/5 b {
    color: #1e293b !important;
}

html.light-mode #b2b .bg-white\/5 span {
    color: #64748b !important;
}

/* 3. ФОРМА LIQUID GLASS (Светлая тема) */
html.light-mode #b2b .spotlight-card {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid #ffffff !important;
    outline: 1px solid rgba(0, 0, 0, 0.03) !important;
    box-shadow:
        0 40px 80px -20px rgba(0, 0, 0, 0.08),
        inset 0 1px 2px rgba(255, 255, 255, 1) !important;
}

/* Инпуты в светлом режиме */
html.light-mode #b2b .apple-input {
    border-bottom-color: #e2e8f0 !important;
    color: #0f172a !important;
    font-weight: 600;
}

html.light-mode #b2b .apple-input:focus {
    border-bottom-color: #7c3aed !important;
}

html.light-mode #b2b .apple-label {
    color: #94a3b8 !important;
}

/* Кнопка в светлом режиме */
html.light-mode #partner-form button[type="submit"] {
    background-color: #000000 !important;
    color: #ffffff !important;
    box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.25) !important;
}

html.light-mode #partner-form button[type="submit"]:hover {
    background-color: #1e293b !important;
}

/* 4. ТИПОГРАФИКА ДЛЯ ГИГАНТСКОГО ЗАГОЛОВКА */
#b2b h2 {
    letter-spacing: -0.06em !important;
}

/* 5. АДАПТИВНОСТЬ */
@media (max-width: 1024px) {
    #b2b .grid {
        grid-template-columns: 1fr !important;
        gap: 5rem !important;
    }

    #b2b h2 {
        font-size: 3.5rem !important;
    }

    #b2b .lg\:col-span-7 {
        margin-top: 2rem;
    }
}

/* ==========================================================
   B2B PRIVILEGES LABEL: SOLID BLACK FIX
   ========================================================== */

html.light-mode #b2b h4[data-i18n="b2b_priv_title"],
html.light-mode #b2b .lg\:col-span-5 h4 {
    /* Чистый черный цвет */
    color: #000000 !important;

    /* Ультра-жирный шрифт для премиального вида */
    font-weight: 900 !important;

    /* Делаем линию под заголовком чуть заметнее в светлом режиме */
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;

    /* Межбуквенный интервал для стиля Apple */
    letter-spacing: 0.25em !important;
    opacity: 1 !important;
}

/* Также сделаем названия самих привилегий (Оптовые цены и т.д.) чернее */
html.light-mode #b2b ul li b {
    color: #000000 !important;
    font-weight: 800 !important;
}

/* Гарантируем центрирование текста в кнопке во всех темах */
#partner-form button[type="submit"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Фикс для Light Mode */
html.light-mode #partner-form button[type="submit"] {
    background-color: #000000 !important;
    /* Делаем кнопку черной */
    color: #ffffff !important;
    /* Текст белым */
}

/* ==========================================================
   B2B BUTTON: BLACK & WHITE INVERSION (LIGHT MODE)
   ========================================================== */

html.light-mode #partner-form button[type="submit"] {
    background-color: #000000 !important;
    /* В покое — черная */
    color: #ffffff !important;
    /* Текст — белый */
    border: 2px solid #000000 !important;
    /* Рамка всегда есть, но она черная */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative;
    overflow: hidden;
}

/* ЭФФЕКТ ПРИ НАВЕДЕНИИ */
html.light-mode #partner-form button[type="submit"]:hover {
    background-color: #ffffff !important;
    /* Становится белой */
    color: #000000 !important;
    /* Текст становится черным */
    border-color: #000000 !important;
    /* Края — черные */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-2px);
}

/* ОТКЛЮЧАЕМ СИНИЙ ГРАДИЕНТ В СВЕТЛОЙ ТЕМЕ */
html.light-mode #partner-form button .absolute.inset-0 {
    display: none !important;
}

/* Гарантируем центрирование текста */
#partner-form button[type="submit"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ==========================================================
   GLOBAL BACKGROUND WATERMARK (IFC2 PATTERN)
   ========================================================== */

#global-watermark {
    position: fixed;
    /* Делаем контейнер больше экрана, чтобы при повороте не было пустых углов */
    inset: -50%;
    width: 200%;
    height: 200%;
    z-index: 0;
    /* Самый нижний слой */
    pointer-events: none;
    /* Пропускает клики сквозь себя */

    /* Путь к твоему логотипу */
    background-image: url('images/ifc2.svg');
    background-repeat: repeat;

    /* РАЗМЕР: 400px - расстояние между логотипами в сетке */
    background-size: 400px auto;

    /* ПОВОРОТ: Делаем сетку динамичной */
    transform: rotate(-20deg);

    /* Плавная смена темы */
    transition: opacity 0.5s ease, filter 0.5s ease;
}

/* --- DARK MODE (По умолчанию) --- */
body:not(.light-mode) #global-watermark {
    /* Инвертируем черный логотип в белый и делаем ПОЧТИ прозрачным (0.5%) */
    filter: invert(1);
    opacity: 0.005;
}

/* --- LIGHT MODE (Светлая тема) --- */
body.light-mode #global-watermark {
    /* Оставляем логотип черным и делаем чуть виднее (3%), так как белый фон ярче */
    filter: none;
    opacity: 0.03;
}

/* Гарантируем, что секции имеют z-index выше, чтобы текст был поверх */
section,
main,
header,
footer {
    position: relative;
    z-index: 10;
}

/* ==========================================================
   APPLE-STYLE FOOTER & MAP PREMIER UPGRADE (LIGHT MODE)
   ========================================================== */

/* 1. ГЛАВНЫЙ ЗАГОЛОВОК: Инновационный градиент */
html.light-mode #footer h2 {
    /* Градиент от глубокого индиго к яркому циану и фиолетовому */
    background: linear-gradient(135deg, #0f172a 0%, #2563eb 40%, #7c3aed 70%, #db2777 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;

    font-size: clamp(3rem, 8vw, 6rem) !important;
    font-weight: 900 !important;
    letter-spacing: -0.06em !important;
    line-height: 0.9 !important;
    filter: drop-shadow(0 4px 10px rgba(37, 99, 235, 0.1)) !important;
}

/* 2. КАРТА: Эффект iPad Display (Liquid Glass) */
html.light-mode #footer .map-container {
    border-radius: 3.5rem !important;
    /* Очень мягкие углы */
    background: #ffffff !important;
    padding: 10px !important;
    /* Внутренняя рамка корпуса */
    border: 1px solid rgba(0, 0, 0, 0.05) !important;

    /* Глубокая "воздушная" тень Apple */
    box-shadow:
        0 40px 100px -20px rgba(0, 0, 0, 0.15),
        0 20px 40px -15px rgba(0, 0, 0, 0.05) !important;

    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html.light-mode #footer .map-container:hover {
    transform: scale(1.02) translateY(-10px) !important;
}

/* Настройка самой карты внутри */
html.light-mode #footer .map-iframe {
    border-radius: 3rem !important;
    filter: grayscale(100%) contrast(90%) brightness(1.05) !important;
    /* Чистый серый стиль карт Apple */
    opacity: 0.9;
}

/* 3. КОНТАКТЫ (Телефоны и ссылки) */
html.light-mode #footer a[href^="tel"] span {
    color: #1d1d1f !important;
    font-weight: 800 !important;
    font-size: 2.2rem !important;
    letter-spacing: -0.04em !important;
    transition: color 0.3s ease;
}

html.light-mode #footer a[href^="tel"]:hover span {
    color: #0066cc !important;
    /* Фирменный синий Apple */
}

html.light-mode #footer a[href^="mailto"] {
    color: #0066cc !important;
    font-weight: 700 !important;
    border-bottom: 2px solid rgba(0, 102, 204, 0.1);
}

/* 4. СОЦИАЛЬНЫЕ ИКОНКИ (Instagram/Telegram) */
html.light-mode #footer a[aria-label="Instagram"],
html.light-mode #footer a[aria-label="Telegram"] {
    background-color: #f5f5f7 !important;
    /* Светло-серый фон кнопок */
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    color: #1d1d1f !important;
    width: 4rem !important;
    height: 4rem !important;
    border-radius: 1.25rem !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html.light-mode #footer a[aria-label]:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
    transform: translateY(-5px) rotate(-5deg) !important;
}

/* 5. КНОПКА СТАТЬ ПАРТНЕРОМ */
html.light-mode #footer a.group.bg-white {
    background-color: #000000 !important;
    color: #ffffff !important;
    height: 4.5rem !important;
    padding: 0 2.5rem !important;
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.2) !important;
}

html.light-mode #footer a.group.bg-white:hover {
    background-color: #1d1d1f !important;
    transform: scale(1.05) translateY(-2px) !important;
}

/* 6. КАРТА САЙТА (SITEMAP) */
html.light-mode #footer h4 {
    color: #86868b !important;
    /* Серый текст заголовков */
    letter-spacing: 0.15em !important;
    font-weight: 700 !important;
}

html.light-mode #footer nav a {
    color: #1d1d1f !important;
    font-weight: 600 !important;
    font-size: 1.25rem !important;
}

/* ==========================================================
   APPLE MAPS SEAMLESS INTEGRATION (NO BORDERS)
   ========================================================== */

html.light-mode #footer .map-container {
    /* 1. Убираем всё лишнее */
    border: none !important;
    outline: none !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;

    /* 2. Эффект "Наливания" (Бесшовное растворение краев) */
    /* Маска делает центр карты видимым, а края плавно уводит в прозрачность */
    -webkit-mask-image: radial-gradient(circle at center,
            black 40%,
            rgba(0, 0, 0, 0.8) 70%,
            transparent 95%);
    mask-image: radial-gradient(circle at center,
            black 40%,
            rgba(0, 0, 0, 0.8) 70%,
            transparent 95%);

    /* 3. Парение за счет очень мягкой цветной тени (без контура) */
    filter: drop-shadow(0 20px 50px rgba(37, 99, 235, 0.1));

    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: visible !important;
}

/* Настройка самой карты внутри */
html.light-mode #footer .map-iframe {
    border: none !important;
    /* Стиль Apple Maps: чистый, светлый, серебристый */
    filter: grayscale(1) contrast(0.9) brightness(1.1) !important;
    opacity: 0.85;
    transform: scale(1.05);
    /* Чуть увеличим, чтобы маска не съела важное */
    transition: all 0.6s ease;
}

/* При наведении карта оживает */
html.light-mode #footer .map-container:hover .map-iframe {
    opacity: 1;
    filter: grayscale(0.5) contrast(1) brightness(1) !important;
    transform: scale(1.1);
}

/* Убираем черные элементы управления Google, если они есть */
html.light-mode #footer .map-container iframe {
    mix-blend-mode: multiply;
    /* Позволяет карте "впитать" цвет фона футера */
}

/* Дополнительный декор: мягкое свечение под картой */
html.light-mode #footer .map-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.15) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}