/* VR Engineer Simulator - Основные стили */  /* Комментарий: заголовок файла стилей */
:root {  /* Объявление CSS переменных для темной темы */
    --bg-primary: #0f0f1a;  /* Основной цвет фона */
    --bg-secondary: #1a1a2e;  /* Вторичный цвет фона */
    --accent-primary: #6C4DFF;  /* Основной акцентный цвет (фиолетовый) */
    --accent-secondary: #4ECDC4;  /* Вторичный акцентный цвет (бирюзовый) */
    --text-primary: #ffffff;  /* Основной цвет текста */
    --text-secondary: #b8b8d0;  /* Вторичный цвет текста */
    --card-bg: rgba(255, 255, 255, 0.05);  /* Фон карточек с прозрачностью */
    --gradient: linear-gradient(135deg, #6C4DFF 0%, #4ECDC4 100%);  /* Градиент от фиолетового к бирюзовому */
    --shadow: 0 10px 30px rgba(108, 77, 255, 0.2);  /* Тень элементов */
    --shadow-hover: 0 20px 40px rgba(108, 77, 255, 0.3);  /* Тень при наведении */
}

.light-theme {  /* Стили для светлой темы */
    --bg-primary: #ffffff;  /* Основной цвет фона (белый) */
    --bg-secondary: #f8f9fa;  /* Вторичный цвет фона (светло-серый) */
    --text-primary: #2d2d3a;  /* Основной цвет текста (темно-серый) */
    --text-secondary: #6c757d;  /* Вторичный цвет текста (серый) */
    --card-bg: rgba(108, 77, 255, 0.05);  /* Фон карточек с легкой прозрачностью */
    --shadow: 0 10px 30px rgba(108, 77, 255, 0.1);  /* Более светлая тень */
    --shadow-hover: 0 15px 35px rgba(108, 77, 255, 0.15);  /* Более светлая тень при наведении */
}

* {  /* Универсальный селектор для всех элементов */
    margin: 0;  /* Убираем внешние отступы */
    padding: 0;  /* Убираем внутренние отступы */
    box-sizing: border-box;  /* Правильная модель размеров (padding и border включаются в ширину/высоту) */
}

html {  /* Стили для корневого элемента HTML */
    scroll-behavior: smooth;  /* Плавная прокрутка при переходе по якорным ссылкам */
    scroll-padding-top: 80px;  /* Отступ при прокрутке к якорям (компенсация фиксированной навигации) */
}

body {  /* Стили для тела документа */
    font-family: 'Inter', sans-serif;  /* Основной шрифт */
    background-color: var(--bg-primary);  /* Цвет фона из CSS переменной */
    color: var(--text-primary);  /* Цвет текста из CSS переменной */
    line-height: 1.6;  /* Межстрочный интервал */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);  /* Плавные переходы с пользовательской timing function */
    overflow-x: hidden;  /* Скрытие горизонтального скролла */
}

/* Навигация */  /* Комментарий: стили навигационной панели */
.navbar {  /* Стили навигационной панели */
    position: fixed;  /* Фиксированное позиционирование */
    top: 0;  /* Прижатие к верху экрана */
    width: 100%;  /* Полная ширина */
    background: rgba(15, 15, 26, 0.95);  /* Полупрозрачный темный фон */
    backdrop-filter: blur(20px);  /* Размытие фона behind элемента */
    -webkit-backdrop-filter: blur(20px);  /* Префикс для Safari */
    z-index: 1000;  /* Высокий z-index поверх других элементов */
    padding: 1rem 0;  /* Внутренние отступы сверху и снизу */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);  /* Полупрозрачная граница снизу */
    transition: all 0.4s ease;  /* Плавные переходы */
}


.light-theme .navbar {  /* Стили навигации в светлой теме */
    background: rgba(255, 255, 255, 0.95);  /* Полупрозрачный белый фон */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);  /* Темная граница */
}

.nav-container {  /* Контейнер навигации */
    display: flex;  /* Flex-контейнер */
    justify-content: space-between;  /* Распределение элементов по краям */
    align-items: center;  /* Выравнивание элементов по центру по вертикали */
    max-width: 1200px;  /* Максимальная ширина */
    margin: 0 auto;  /* Центрирование по горизонтали */
    padding: 0 20px;  /* Внутренние отступы слева и справа */
}

.nav-logo {  /* Стили логотипа */
    display: flex;  /* Flex-контейнер */
    align-items: center;  /* Выравнивание элементов по центру по вертикали */
    gap: 10px;  /* Расстояние между дочерними элементами */
    font-size: 1.5rem;  /* Размер шрифта */
    font-weight: 700;  /* Жирный шрифт */
    color: var(--text-primary);  /* Цвет текста из переменной */
    text-decoration: none;  /* Убираем подчеркивание */
    transition: transform 0.3s ease;  /* Плавное преобразование */
}

.nav-logo:hover {  /* Эффект при наведении на логотип */
    transform: scale(1.05);  /* Увеличение на 5% */
}

.nav-logo i {  /* Иконка в логотипе */
    color: var(--accent-primary);  /* Цвет из переменной */
    font-size: 2rem;  /* Размер иконки */
}

.nav-menu {  /* Контейнер меню навигации */
    display: flex;  /* Flex-контейнер */
    align-items: center;  /* Выравнивание элементов по центру по вертикали */
    gap: 2rem;  /* Расстояние между элементами */
}

.nav-link {  /* Стили ссылок навигации */
    color: var(--text-secondary);  /* Цвет текста из переменной */
    text-decoration: none;  /* Убираем подчеркивание */
    font-weight: 500;  /* Полужирный шрифт */
    transition: all 0.3s ease;  /* Плавные переходы для всех свойств */
    position: relative;  /* Относительное позиционирование для псевдоэлемента */
    padding: 0.5rem 0;  /* Внутренние отступы сверху и снизу */
}

.nav-link:hover {  /* Эффект при наведении на ссылку */
    color: var(--accent-primary);  /* Смена цвета на акцентный */
}

.nav-link::after {  /* Псевдоэлемент для подчеркивания */
    content: '';  /* Обязательное свойство для псевдоэлемента */
    position: absolute;  /* Абсолютное позиционирование относительно родителя */
    bottom: 0;  /* Прижатие к низу */
    left: 0;  /* Прижатие к левому краю */
    width: 0;  /* Начальная ширина (невидима) */
    height: 2px;  /* Высота линии */
    background: var(--gradient);  /* Градиентный фон */
    transition: width 0.3s ease;  /* Плавное изменение ширины */
}

.nav-link:hover::after {  /* Эффект при наведении на ссылку */
    width: 100%;  /* Полная ширина */
}

.theme-toggle {  /* Кнопка переключения темы */
    background: var(--card-bg);  /* Фон из переменной */
    border: none;  /* Без рамки */
    color: var(--text-primary);  /* Цвет иконки */
    padding: 10px;  /* Внутренние отступы */
    border-radius: 50%;  /* Круглая форма */
    cursor: pointer;  /* Курсор-указатель при наведении */
    transition: all 0.3s ease;  /* Плавные переходы */
    display: flex;  /* Flex-контейнер */
    align-items: center;  /* Выравнивание по центру по вертикали */
    justify-content: center;  /* Выравнивание по центру по горизонтали */
}

.theme-toggle:hover {  /* Эффект при наведении на кнопку темы */
    transform: rotate(30deg);  /* Поворот на 30 градусов */
    background: var(--accent-primary);  /* Смена фона на акцентный */
}

.mobile-menu-btn {  /* Кнопка мобильного меню */
    display: none;  /* Скрыта по умолчанию (показывается только на мобильных) */
    background: none;  /* Прозрачный фон */
    border: none;  /* Без рамки */
    color: var(--text-primary);  /* Цвет иконки */
    font-size: 1.5rem;  /* Размер иконки */
    cursor: pointer;  /* Курсор-указатель */
    padding: 5px;  /* Внутренние отступы */
    border-radius: 5px;  /* Закругленные углы */
    transition: background 0.3s ease;  /* Плавный переход фона */
}

.mobile-menu-btn:hover {  /* Эффект при наведении на кнопку мобильного меню */
    background: var(--card-bg);  /* Смена фона */
}

/* Основные компоненты */  /* Комментарий: стили основных компонентов */
.container {  /* Основной контейнер для ограничения ширины контента */
    max-width: 1200px;  /* Максимальная ширина */
    margin: 0 auto;  /* Центрирование по горизонтали */
    padding: 0 20px;  /* Внутренние отступы слева и справа */
}

.section-title {  /* Заголовок секции */
    font-size: 2.5rem;  /* Размер шрифта */
    text-align: center;  /* Выравнивание текста по центру */
    margin-bottom: 1rem;  /* Отступ снизу */
    background: var(--gradient);  /* Градиентный фон */
    -webkit-background-clip: text;  /* Обрезка фона по тексту (для Webkit браузеров) */
    -webkit-text-fill-color: transparent;  /* Прозрачный текст (для Webkit браузеров) */
    background-clip: text;  /* Обрезка фона по тексту */
}

.section-subtitle {  /* Подзаголовок секции */
    text-align: center;  /* Выравнивание текста по центру */
    color: var(--text-secondary);  /* Цвет текста из переменной */
    margin-bottom: 3rem;  /* Отступ снизу */
    font-size: 1.1rem;  /* Размер шрифта */
    max-width: 600px;  /* Максимальная ширина */
    margin-left: auto;  /* Автоматический отступ слева */
    margin-right: auto;  /* Автоматический отступ справа */
}

/* Кнопки */  /* Комментарий: стили кнопок */
.hero-btn {  /* Стили кнопок героя */
    padding: 15px 30px;  /* Внутренние отступы */
    border: none;  /* Без рамки */
    border-radius: 50px;  /* Закругленные углы (овальная форма) */
    font-weight: 600;  /* Жирный шрифт */
    cursor: pointer;  /* Курсор-указатель */
    transition: all 0.3s ease;  /* Плавные переходы */
    font-size: 1rem;  /* Размер шрифта */
    text-decoration: none;  /* Убираем подчеркивание */
    display: inline-flex;  /* Flex-контейнер в строке */
    align-items: center;  /* Выравнивание по центру по вертикали */
    gap: 0.5rem;  /* Расстояние между элементами */
    justify-content: center;  /* Выравнивание по центру по горизонтали */
}

.hero-btn.primary {  /* Основная кнопка */
    background: var(--gradient);  /* Градиентный фон */
    color: white;  /* Белый текст */
    box-shadow: var(--shadow);  /* Тень из переменной */
}

.hero-btn.primary:hover {  /* Эффект при наведении на основную кнопку */
    transform: translateY(-2px);  /* Сдвиг вверх на 2px */
    box-shadow: var(--shadow-hover);  /* Увеличенная тень */
}

.hero-btn.secondary {  /* Вторичная кнопка */
    background: transparent;  /* Прозрачный фон */
    color: var(--text-primary);  /* Цвет текста из переменной */
    border: 2px solid var(--accent-primary);  /* Рамка акцентного цвета */
}

.hero-btn.secondary:hover {  /* Эффект при наведении на вторичную кнопку */
    background: var(--accent-primary);  /* Заливка акцентным цветом */
    color: white;  /* Белый текст */
    transform: translateY(-2px);  /* Сдвиг вверх на 2px */
}

/* Герой секция */  /* Комментарий: стили герой-секции */
.hero {  /* Стили герой-секции */
    min-height: 100vh;  /* Минимальная высота на весь экран */
    display: flex;  /* Flex-контейнер */
    align-items: center;  /* Выравнивание дочерних элементов по центру по вертикали */
    padding: 120px 0 50px;  /* Внутренние отступы (сверху, слева/справа, снизу) */
    position: relative;  /* Относительное позиционирование */
    overflow: hidden;  /* Скрытие переполнения */
}

.hero-content {  /* Контент герой-секции */
    flex: 1;  /* Занимает доступное пространство */
    max-width: 600px;  /* Максимальная ширина */
    z-index: 2;  /* z-index поверх других элементов */
}

.hero-title {  /* Заголовок героя */
    font-size: 3.5rem;  /* Размер шрифта */
    font-weight: 700;  /* Жирный шрифт */
    margin-bottom: 1.5rem;  /* Отступ снизу */
    margin-left: 20px;
    background: var(--gradient);  /* Градиентный фон */
    -webkit-background-clip: text;  /* Обрезка фона по тексту (для Webkit) */
    -webkit-text-fill-color: transparent;  /* Прозрачный текст (для Webkit) */
    background-clip: text;  /* Обрезка фона по тексту */
    line-height: 1.2;  /* Межстрочный интервал */
}

.hero-subtitle {  /* Подзаголовок героя */
    font-size: 1.2rem;  /* Размер шрифта */
    color: var(--text-secondary);  /* Цвет текста из переменной */
    margin-bottom: 2rem;  /* Отступ снизу */
    margin-left: 20px;
    line-height: 1.8;  /* Межстрочный интервал */
}

.hero-buttons {  /* Контейнер кнопок героя */
    display: flex;  /* Flex-контейнер */
    gap: 1rem;  /* Расстояние между кнопками */
    margin-bottom: 2rem;  /* Отступ снизу */
    margin-left: 20px;
    flex-wrap: wrap;  /* Перенос на новую строку при нехватке места */
}

.hero-visual {  /* Визуальная часть героя */
    flex: 1;  /* Занимает доступное пространство */
    position: relative;  /* Относительное позиционирование */
    height: 500px;  /* Высота */
    display: flex;  /* Flex-контейнер */
    align-items: center;  /* Выравнивание по центру по вертикали */
    justify-content: center;  /* Выравнивание по центру по горизонтали */
}

.floating-card {  /* Плавающие карточки */
    position: absolute;  /* Абсолютное позиционирование */
    background: var(--card-bg);  /* Фон из переменной */
    padding: 20px;  /* Внутренние отступы */
    border-radius: 20px;  /* Закругленные углы */
    text-align: center;  /* Выравнивание текста по центру */
    backdrop-filter: blur(10px);  /* Размытие фона behind элемента */
    border: 1px solid rgba(255, 255, 255, 0.1);  /* Полупрозрачная рамка */
    animation: float 3s ease-in-out infinite;  /* Анимация плавания */
    box-shadow: var(--shadow);  /* Тень из переменной */
    transition: all 0.3s ease;  /* Плавные переходы */
}

.floating-card:nth-child(1) {  /* Первая карточка */
    top: 10%;  /* Позиция сверху */
    left: 5%;  /* Позиция слева */
    animation-delay: 0s;  /* Задержка анимации */
}

.floating-card:nth-child(2) {  /* Вторая карточка */
    top: 50%;  /* Позиция сверху */
    right: 5%;  /* Позиция справа */
    animation-delay: 0.5s;  /* Задержка анимации */
}

.floating-card:nth-child(3) {  /* Третья карточка */
    bottom: 20%;  /* Позиция снизу */
    left: 15%;  /* Позиция слева */
    animation-delay: 1s;  /* Задержка анимации */
}

.floating-card:nth-child(4) {  /* Четвертая карточка */
    top: 20%;  /* Позиция сверху */
    right: 20%;  /* Позиция справа */
    animation-delay: 1.5s;  /* Задержка анимации */
}

.floating-card i {  /* Иконки в карточках */
    font-size: 2rem;  /* Размер иконки */
    color: var(--accent-primary);  /* Цвет из переменной */
    margin-bottom: 10px;  /* Отступ снизу */
}

.floating-card h3 {  /* Заголовки в карточках */
    font-size: 1.1rem;  /* Размер шрифта */
    margin-bottom: 5px;  /* Отступ снизу */
    color: var(--text-primary);  /* Цвет текста из переменной */
}

@keyframes float {  /* Анимация плавания */
    0%, 100% {  /* Начало и конец анимации */
        transform: translateY(0px) rotate(0deg);  /* Исходное положение */
    }
    50% {  /* Середина анимации */
        transform: translateY(-20px) rotate(5deg);  /* Подъем на 20px и поворот на 5 градусов */
    }
}

/* Секции */  /* Комментарий: стили основных секций */
.features {  /* Секция возможностей */
    padding: 100px 0;  /* Внутренние отступы сверху и снизу */
    background: var(--bg-secondary);  /* Фон из переменной */
}

.features-grid {  /* Сетка карточек возможностей */
    display: grid;  /* Grid-контейнер */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));  /* Автоматические колонки минимальной шириной 300px */
    gap: 2rem;  /* Расстояние между элементами */
    margin-top: 3rem;  /* Отступ сверху */
}

.feature-card {  /* Карточка возможности */
    background: var(--card-bg);  /* Фон из переменной */
    padding: 2.5rem;  /* Внутренние отступы */
    border-radius: 20px;  /* Закругленные углы */
    text-align: center;  /* Выравнивание текста по центру */
    transition: all 0.3s ease;  /* Плавные переходы */
    border: 1px solid rgba(255, 255, 255, 0.1);  /* Полупрозрачная рамка */
    backdrop-filter: blur(10px);  /* Размытие фона */
    position: relative;  /* Относительное позиционирование */
    overflow: hidden;  /* Скрытие переполнения */
}

.feature-card::before {  /* Псевдоэлемент для эффекта свечения */
    content: '';  /* Обязательное свойство */
    position: absolute;  /* Абсолютное позиционирование */
    top: 0;  /* Прижатие к верху */
    left: -100%;  /* Начальная позиция слева за пределами элемента */
    width: 100%;  /* Полная ширина */
    height: 100%;  /* Полная высота */
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);  /* Градиент для эффекта свечения */
    transition: left 0.5s ease;  /* Плавное изменение позиции */
}

.feature-card:hover::before {  /* Эффект при наведении на карточку */
    left: 100%;  /* Конечная позиция справа за пределами элемента */
}

.feature-card:hover {  /* Эффект при наведении на карточку */
    transform: translateY(-10px);  /* Сдвиг вверх на 10px */
    box-shadow: var(--shadow-hover);  /* Увеличенная тень */
}

.feature-icon {  /* Контейнер иконки */
    width: 80px;  /* Ширина */
    height: 80px;  /* Высота */
    background: var(--gradient);  /* Градиентный фон */
    border-radius: 50%;  /* Круглая форма */
    display: flex;  /* Flex-контейнер */
    align-items: center;  /* Выравнивание по центру по вертикали */
    justify-content: center;  /* Выравнивание по центру по горизонтали */
    margin: 0 auto 1.5rem;  /* Внешние отступы (сверху, по бокам auto, снизу) */
    transition: transform 0.3s ease;  /* Плавное преобразование */
}

.feature-card:hover .feature-icon {  /* Эффект иконки при наведении на карточку */
    transform: scale(1.1) rotate(10deg);  /* Увеличение на 10% и поворот на 10 градусов */
}

.feature-icon i {  /* Иконка */
    font-size: 2rem;  /* Размер иконки */
    color: white;  /* Белый цвет */
}

.feature-card h3 {  /* Заголовок карточки */
    font-size: 1.5rem;  /* Размер шрифта */
    margin-bottom: 1rem;  /* Отступ снизу */
    color: var(--text-primary);  /* Цвет текста из переменной */
}

.feature-card p {  /* Текст карточки */
    color: var(--text-secondary);  /* Цвет текста из переменной */
    margin-bottom: 1.5rem;  /* Отступ снизу */
    line-height: 1.6;  /* Межстрочный интервал */
}

.feature-btn {  /* Кнопка в карточке */
    background: none;  /* Прозрачный фон */
    border: none;  /* Без рамки */
    color: var(--accent-primary);  /* Цвет текста из переменной */
    font-weight: 600;  /* Жирный шрифт */
    cursor: pointer;  /* Курсор-указатель */
    display: flex;  /* Flex-контейнер */
    align-items: center;  /* Выравнивание по центру по вертикали */
    gap: 0.5rem;  /* Расстояние между элементами */
    margin: 0 auto;  /* Центрирование по горизонтали */
    transition: all 0.3s ease;  /* Плавные переходы */
    text-decoration: none;  /* Убираем подчеркивание */
}

.feature-btn:hover {  /* Эффект при наведении на кнопку */
    gap: 1rem;  /* Увеличение расстояния между текстом и иконкой */
    color: var(--accent-secondary);  /* Смена цвета на вторичный акцентный */
}

/* Интерактивная секция */  /* Комментарий: стили интерактивной секции */
.interactive-section {  /* Стили интерактивной секции */
    padding: 100px 0;  /* Внутренние отступы сверху и снизу */
}

.interactive-controls {  /* Контейнер кнопок управления */
    display: flex;  /* Flex-контейнер */
    justify-content: center;  /* Выравнивание по центру по горизонтали */
    gap: 1rem;  /* Расстояние между кнопками */
    margin-bottom: 3rem;  /* Отступ снизу */
    flex-wrap: wrap;  /* Перенос на новую строку при нехватке места */
}

.control-btn {  /* Стили кнопок управления */
    padding: 15px 30px;  /* Внутренние отступы */
    border: 0.5px solid var(--accent-primary);  /* Рамка акцентного цвета */
    background: transparent;  /* Прозрачный фон */
    color: var(--text-primary);  /* Цвет текста из переменной */
    border-radius: 50px;  /* Закругленные углы (овальная форма) */
    cursor: pointer;  /* Курсор-указатель */
    transition: all 0.3s ease;  /* Плавные переходы */
    display: flex;  /* Flex-контейнер */
    align-items: center;  /* Выравнивание по центру по вертикали */
    gap: 0.5rem;  /* Расстояние между элементами */
    font-weight: 500;  /* Полужирный шрифт */
}

.control-btn.active,  /* Активная кнопка */
.control-btn:hover {  /* Эффект при наведении на кнопку */
    background: var(--gradient);  /* Градиентный фон */
    border-color: transparent;  /* Прозрачная рамка */
    color: white;  /* Белый текст */
    transform: translateY(-2px);  /* Сдвиг вверх на 2px */
}

.interactive-content {  /* Контейнер контента */
    position: relative;  /* Относительное позиционирование */
    min-height: 300px;  /* Минимальная высота */
}

.content-item {  /* Элемент контента */
    display: none;  /* Скрыт по умолчанию */
    animation: fadeInUp 0.6s ease;  /* Анимация появления */
}

.content-item.active {  /* Активный элемент */
    display: block;  /* Отображение */
}

.target-audience-card {  /* Карточка целевой аудитории */
    background: var(--card-bg);  /* Фон из переменной */
    padding: 2rem;  /* Внутренние отступы */
    border-radius: 20px;  /* Закругленные углы */
    border: 1px solid rgba(255, 255, 255, 0.1);  /* Полупрозрачная рамка */
    backdrop-filter: blur(10px);  /* Размытие фона */
}

.target-audience-card h3 {  /* Заголовок карточки */
    font-size: 1.5rem;  /* Размер шрифта */
    margin-bottom: 1rem;  /* Отступ снизу */
    color: var(--accent-primary);  /* Цвет текста из переменной */
    display: flex;  /* Flex-контейнер */
    align-items: center;  /* Выравнивание по центру по вертикали */
    gap: 0.5rem;  /* Расстояние между элементами */
}

.target-audience-card p {  /* Текст карточки */
    color: var(--text-secondary);  /* Цвет текста из переменной */
    margin-bottom: 1.5rem;  /* Отступ снизу */
    line-height: 1.6;  /* Межстрочный интервал */
}

.target-audience-card ul {  /* Список в карточке */
    list-style: none;  /* Убираем стандартные маркеры списка */
}

.target-audience-card li {  /* Элементы списка */
    color: var(--text-secondary);  /* Цвет текста из переменной */
    margin-bottom: 0.5rem;  /* Отступ снизу */
    display: flex;  /* Flex-контейнер */
    align-items: center;  /* Выравнивание по центру по вертикали */
    gap: 0.5rem;  /* Расстояние между элементами */
}

.target-audience-card li i {  /* Иконки в списке */
    color: var(--accent-primary);  /* Цвет из переменной */
}

.features-cards {  /* Контейнер карточек особенностей */
    display: grid;  /* Grid-контейнер */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  /* Автоматические колонки минимальной шириной 250px */
    gap: 1.5rem;  /* Расстояние между элементами */
}

.feature-highlight {  /* Карточка особенности */
    background: var(--card-bg);  /* Фон из переменной */
    padding: 1.5rem;  /* Внутренние отступы */
    border-radius: 15px;  /* Закругленные углы */
    text-align: center;  /* Выравнивание текста по центру */
    border: 1px solid rgba(255, 255, 255, 0.1);  /* Полупрозрачная рамка */
    transition: transform 0.3s ease;  /* Плавное преобразование */
}

.feature-highlight:hover {  /* Эффект при наведении на карточку */
    transform: translateY(-5px);  /* Сдвиг вверх на 5px */
}

.feature-highlight h3 {  /* Заголовок карточки */
    font-size: 1.2rem;  /* Размер шрифта */
    margin-bottom: 0.5rem;  /* Отступ снизу */
    color: var(--text-primary);  /* Цвет текста из переменной */
}

.feature-highlight p {  /* Текст карточки */
    color: var(--text-secondary);  /* Цвет текста из переменной */
    font-size: 0.9rem;  /* Размер шрифта */
}

@keyframes fadeInUp {  /* Анимация появления снизу вверх */
    from {  /* Начальное состояние */
        opacity: 0;  /* Полная прозрачность */
        transform: translateY(30px);  /* Сдвиг вниз на 30px */
    }
    to {  /* Конечное состояние */
        opacity: 1;  /* Полная непрозрачность */
        transform: translateY(0);  /* Исходная позиция */
    }
}

/* Галерея */  /* Комментарий: стили галереи */
.gallery-section {  /* Секция галереи */
    padding: 100px 0;  /* Внутренние отступы сверху и снизу */
    background: var(--bg-secondary);  /* Фон из переменной */
}

.gallery-container {  /* Контейнер галереи */
    position: relative;  /* Относительное позиционирование */
    border-radius: 20px;  /* Закругленные углы */
    overflow: hidden;  /* Скрытие переполнения */
    box-shadow: var(--shadow);  /* Тень из переменной */
    margin-bottom: 2rem;  /* Отступ снизу */
}

.gallery-track {  /* Дорожка галереи (для слайдера) */
    display: flex;  /* Flex-контейнер */
    margin: auto;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);  /* Плавное преобразование с пользовательской timing function */
}

.gallery-item {  /* Элемент галереи */
    flex: 0 0 100%;  /* Не растягивается, не сжимается, базовая ширина 100% */
    display: flex;  /* Flex-контейнер */
    flex-direction: column;  /* Вертикальное направление */
    background: var(--card-bg);  /* Фон из переменной */
    border-radius: 20px;  /* Закругленные углы */
    overflow: hidden;  /* Скрытие переполнения */
    border: 1px solid rgba(255, 255, 255, 0.1);  /* Полупрозрачная рамка */
    opacity: 0;  /* Полная прозрачность */
    transform: scale(0.95);  /* Уменьшение на 5% */
    transition: opacity 0.5s ease, transform 0.5s ease;  /* Плавные переходы с пользовательской timing function */
    position: absolute;  /* Абсолютное позиционирование */
    width: 100%;  /* Полная ширина */
    height: 100%;  /* Полная высота */
}
.gallery-item:not(.active) {
    opacity: 0;
    transform: translateX(20px);
}
.gallery-item.active {  /* Активный элемент галереи */
    opacity: 1;  /* Полная непрозрачность */
    transform: translateX(0);  /* Нормальный размер */
    position: relative;  /* Относительное позиционирование */
}

.gallery-image {  /* Контейнер изображения */
    height: 400px;  /* Высота */
    position: relative;  /* Относительное позиционирование */
    overflow: hidden;  /* Скрытие переполнения */
    flex-shrink: 0;  /* Запрет на сжатие */
}

.gallery-image img {  /* Изображение */
    width: 100%;  /* Полная ширина */
    height: 100%;  /* Полная высота */
    object-fit: auto;  /* Заполнение контейнера с сохранением пропорций */
    object-position: center;  /* Позиция по центру */
    transition: transform 0.5s ease;  /* Плавное преобразование */
    flex: 0 0 100%;
}

.gallery-item:hover .gallery-image img {  /* Эффект изображения при наведении на элемент галереи */
    transform: scale(1.05);  /* Увеличение на 5% */
}

.image-overlay {  /* Наложение на изображение */
    position: absolute;  /* Абсолютное позиционирование */
    top: 0;  /* Прижатие к верху */
    left: 0;  /* Прижатие к левому краю */
    right: 0;  /* Прижатие к правому краю */
    bottom: 0;  /* Прижатие к низу */
    background: linear-gradient(135deg, rgba(108, 77, 255, 0.9) 0%, rgba(78, 205, 196, 0.9) 100%);  /* Градиентное наложение */
    display: flex;  /* Flex-контейнер */
    align-items: center;  /* Выравнивание по центру по вертикали */
    justify-content: center;  /* Выравнивание по центру по горизонтали */
    opacity: 0;  /* Полная прозрачность */
    transition: opacity 0.3s ease;  /* Плавное изменение прозрачности */
}

.gallery-image:hover .image-overlay {  /* Эффект при наведении на изображение */
    opacity: 1;  /* Полная непрозрачность */
}

.zoom-btn {  /* Кнопка увеличения */
    background: white;  /* Белый фон */
    border: none;  /* Без рамки */
    width: 50px;  /* Ширина */
    height: 50px;  /* Высота */
    border-radius: 50%;  /* Круглая форма */
    cursor: pointer;  /* Курсор-указатель */
    color: var(--accent-primary);  /* Цвет иконки из переменной */
    font-size: 1.2rem;  /* Размер иконки */
    transition: all 0.3s ease;  /* Плавные переходы */
    display: flex;  /* Flex-контейнер */
    align-items: center;  /* Выравнивание по центру по вертикали */
    justify-content: center;  /* Выравнивание по центру по горизонтали */
}

.zoom-btn:hover {  /* Эффект при наведении на кнопку увеличения */
    transform: scale(1.1);  /* Увеличение на 10% */
    background: var(--accent-primary);  /* Смена фона на акцентный */
    color: white;  /* Белая иконка */
}

.gallery-content {  /* Контент галереи */
    padding: 1.5rem;  /* Внутренние отступы */
    flex-grow: 1;  /* Занимает доступное пространство */
    display: flex;  /* Flex-контейнер */
    flex-direction: column;  /* Вертикальное направление */
    justify-content: center;  /* Выравнивание по центру по вертикали */
}

.gallery-content h3 {  /* Заголовок элемента */
    font-size: 1.3rem;  /* Размер шрифта */
    margin-bottom: 0.5rem;  /* Отступ снизу */
    color: var(--text-primary);  /* Цвет текста из переменной */
}

.gallery-content p {  /* Текст элемента */
    color: var(--text-secondary);  /* Цвет текста из переменной */
    margin-bottom: 1rem;  /* Отступ снизу */
    line-height: 1.6;  /* Межстрочный интервал */
}

.gallery-controls {  /* Управление галереей */
    display: flex;  /* Flex-контейнер */
    justify-content: center;  /* Выравнивание по центру по горизонтали */
    gap: 1rem;  /* Расстояние между кнопками */
    margin-top: 2rem;  /* Отступ сверху */
}

.gallery-prev,  /* Кнопка "назад" */
.gallery-next {  /* Кнопка "вперед" */
    background: var(--accent-primary);  /* Фон из переменной */
    border: none;  /* Без рамки */
    width: 50px;  /* Ширина */
    height: 50px;  /* Высота */
    border-radius: 50%;  /* Круглая форма */
    cursor: pointer;  /* Курсор-указатель */
    color: white;  /* Белый цвет */
    font-size: 1.2rem;  /* Размер иконки */
    transition: all 0.3s ease;  /* Плавные переходы */
    display: flex;  /* Flex-контейнер */
    align-items: center;  /* Выравнивание по центру по вертикали */
    justify-content: center;  /* Выравнивание по центру по горизонтали */
}

.gallery-prev:hover,  /* Эффект при наведении на кнопку "назад" */
.gallery-next:hover {  /* Эффект при наведении на кнопку "вперед" */
    transform: scale(1.1);  /* Увеличение на 10% */
    background: var(--gradient);  /* Градиентный фон */
}

.gallery-indicators {  /* Индикаторы галереи */
    display: flex;  /* Flex-контейнер */
    justify-content: center;  /* Выравнивание по центру по горизонтали */
    gap: 0.5rem;  /* Расстояние между индикаторами */
    margin-top: 1rem;  /* Отступ сверху */
}

.gallery-indicator {  /* Элемент индикатора */
    width: 12px;  /* Ширина */
    height: 12px;  /* Высота */
    border-radius: 50%;  /* Круглая форма */
    background: var(--text-secondary);  /* Цвет из переменной */
    border: none;  /* Без рамки */
    cursor: pointer;  /* Курсор-указатель */
    transition: all 0.3s ease;  /* Плавные переходы */
}

.gallery-indicator.active {  /* Активный индикатор */
    background: var(--accent-primary);  /* Цвет из переменной */
    transform: scale(1.2);  /* Увеличение на 20% */
}

/* CTA секция */  /* Комментарий: стили секции призыва к действию */
.cta-section {  /* Секция призыва к действию */
    padding: 100px 0;  /* Внутренние отступы сверху и снизу */
    text-align: center;  /* Выравнивание текста по центру */
    background: linear-gradient(135deg, rgba(108, 77, 255, 0.1) 0%, rgba(78, 205, 196, 0.1) 100%);  /* Градиентный фон с прозрачностью */
}

.cta-section h2 {  /* Заголовок секции */
    font-size: 2.5rem;  /* Размер шрифта */
    margin-bottom: 1rem;  /* Отступ снизу */
    color: var(--text-primary);  /* Цвет текста из переменной */
}

.cta-section p {  /* Текст секции */
    color: var(--text-secondary);  /* Цвет текста из переменной */
    margin-bottom: 2rem;  /* Отступ снизу */
    font-size: 1.1rem;  /* Размер шрифта */
    max-width: 600px;  /* Максимальная ширина */
    margin-left: auto;  /* Автоматический отступ слева */
    margin-right: auto;  /* Автоматический отступ справа */
}

.cta-button {  /* Кнопка CTA */
    padding: 20px 40px;  /* Внутренние отступы */
    background: var(--gradient);  /* Градиентный фон */
    border: none;  /* Без рамки */
    border-radius: 50px;  /* Закругленные углы (овальная форма) */
    color: white;  /* Белый текст */
    font-size: 1.2rem;  /* Размер шрифта */
    font-weight: 600;  /* Жирный шрифт */
    cursor: pointer;  /* Курсор-указатель */
    transition: all 0.3s ease;  /* Плавные переходы */
    display: inline-flex;  /* Flex-контейнер в строке */
    align-items: center;  /* Выравнивание по центру по вертикали */
    gap: 0.5rem;  /* Расстояние между элементами */
    text-decoration: none;  /* Убираем подчеркивание */
    box-shadow: var(--shadow);  /* Тень из переменной */
}

.cta-button:hover {  /* Эффект при наведении на кнопку CTA */
    transform: translateY(-3px);  /* Сдвиг вверх на 3px */
    box-shadow: var(--shadow-hover);  /* Увеличенная тень */
}

.cta-badges {  /* Контейнер бейджей */
    display: flex;  /* Flex-контейнер */
    justify-content: center;  /* Выравнивание по центру по горизонтали */
    gap: 2rem;  /* Расстояние между элементами */
    margin-top: 3rem;  /* Отступ сверху */
    flex-wrap: wrap;  /* Перенос на новую строку при нехватке места */
}

.badge {  /* Стили бейджа */
    display: flex;  /* Flex-контейнер */
    align-items: center;  /* Выравнивание по центру по вертикали */
    gap: 0.5rem;  /* Расстояние между элементами */
    color: var(--text-secondary);  /* Цвет текста из переменной */
    font-weight: 500;  /* Полужирный шрифт */
}

.badge i {  /* Иконка в бейдже */
    color: var(--accent-primary);  /* Цвет из переменной */
}

/* Футер */  /* Комментарий: стили футера */
.footer {  /* Стили футера */
    background: var(--bg-secondary);  /* Фон из переменной */
    padding: 50px 0 20px;  /* Внутренние отступы (сверху, слева/справа, снизу) */
    border-top: 1px solid rgba(255, 255, 255, 0.1);  /* Верхняя граница */
}

.footer-content {  /* Контейнер содержимого футера */
    display: grid;  /* Grid-контейнер */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  /* Автоматические колонки минимальной шириной 250px */
    gap: 2rem;  /* Расстояние между элементами */
    margin-bottom: 2rem;  /* Отступ снизу */
}

.footer-section h3 {  /* Заголовок секции футера */
    color: var(--text-primary);  /* Цвет текста из переменной */
    margin-bottom: 1rem;  /* Отступ снизу */
    font-size: 1.5rem;  /* Размер шрифта */
}

.footer-section h4 {  /* Подзаголовок секции */
    color: var(--text-primary);  /* Цвет текста из переменной */
    margin-bottom: 1rem;  /* Отступ снизу */
    font-size: 1.2rem;  /* Размер шрифта */
}

.footer-section p {  /* Текст в футере */
    color: var(--text-secondary);  /* Цвет текста из переменной */
    margin-bottom: 1rem;  /* Отступ снизу */
    line-height: 1.6;  /* Межстрочный интервал */
}

.footer-section i {  /* Иконки в футере */
    color: var(--accent-primary);  /* Цвет из переменной */
    margin-right: center;  /* Отступ справа */
    width: 20px;  /* Фиксированная ширина */
    text-align: center;  /* Выравнивание по центру */
}

.social-links {  /* Социальные ссылки */
    display: flex;  /* Flex-контейнер */
    gap: 1rem;  /* Расстояние между элементами */
    margin-top: 1rem;  /* Отступ сверху */
}

.social-links a {  /* Ссылки социальных сетей */
    display: flex;  /* Flex-контейнер */
    align-items: center;  /* Выравнивание по центру по вертикали */
    justify-content: center;  /* Выравнивание по центру по горизонтали */
    width: 40px;  /* Ширина */
    height: 40px;  /* Высота */
    background: var(--card-bg);  /* Фон из переменной */
    border-radius: 50%;  /* Круглая форма */
    color: var(--text-primary);  /* Цвет иконки */
    text-decoration: none;  /* Убираем подчеркивание */
    transition: all 0.3s ease;  /* Плавные переходы */
}

.social-links a:hover {  /* Эффект при наведении на социальную ссылку */
    background: var(--gradient);  /* Градиентный фон */
    transform: translateY(-3px);  /* Сдвиг вверх на 3px */
}

.language-selector {  /* Контейнер выбора языка */
    display: flex;  /* Flex-контейнер */
    align-items: center;  /* Выравнивание по центру по вертикали */
    gap: 0.5rem;  /* Расстояние между элементами */
    margin-top: 1rem;  /* Отступ сверху */
}

.language-selector select {  /* Выпадающий список */
    background: var(--card-bg);  /* Фон из переменной */
    border: 1px solid rgba(255, 255, 255, 0.1);  /* Рамка */
    color: var(--text-primary);  /* Цвет текста */
    padding: 5px 10px;  /* Внутренние отступы */
    border-radius: 5px;  /* Закругленные углы */
    cursor: pointer;  /* Курсор-указатель */
}

.subscribe-form {  /* Форма подписки */
    display: flex;  /* Flex-контейнер */
    gap: 0.5rem;  /* Расстояние между элементами */
    margin-top: 1rem;  /* Отступ сверху */
}

.subscribe-form input {  /* Поле ввода */
    flex: 1;  /* Занимает доступное пространство */
    padding: 12px 15px;  /* Внутренние отступы */
    border: 1px solid rgba(255, 255, 255, 0.1);  /* Рамка */
    background: var(--card-bg);  /* Фон из переменной */
    color: var(--text-primary);  /* Цвет текста */
    border-radius: 25px;  /* Закругленные углы */
    font-size: 1rem;  /* Размер шрифта */
    transition: all 0.3s ease;  /* Плавные переходы */
}

.subscribe-form input:focus {  /* Эффект при фокусе на поле ввода */
    outline: none;  /* Убираем стандартный контур */
    border-color: var(--accent-primary);  /* Цвет рамки при фокусе */
    box-shadow: 0 0 0 2px rgba(108, 77, 255, 0.2);  /* Тень при фокусе */
}

.subscribe-form button {  /* Кнопка подписки */
    padding: 12px 20px;  /* Внутренние отступы */
    background: var(--card-bg);  /* Фон из переменной */
    border: none;  /* Без рамки */
    border-radius: 25px;  /* Закругленные углы */
    color: white;  /* Белый текст */
    cursor: pointer;  /* Курсор-указатель */
    transition: all 0.3s ease;  /* Плавные переходы */
    display: flex;  /* Flex-контейнер */
    align-items: center;  /* Выравнивание по центру по вертикали */
    gap: 0.5rem;  /* Расстояние между элементами */
    white-space: nowrap;  /* Запрет переноса текста */
    font-size: 1rem;  /* Размер шрифта */
}

.subscribe-form button:hover {  /* Эффект при наведении на кнопку подписки */
    background: var(--gradient);  /* Градиентный фон */
    transform: translateY(-2px);  /* Сдвиг вверх на 2px */
}

.footer-bottom {  /* Нижняя часть футера */
    text-align: center;  /* Выравнивание текста по центру */
    padding-top: 2rem;  /* Внутренний отступ сверху */
    border-top: 1px solid rgba(255, 255, 255, 0.1);  /* Верхняя граница */
    color: var(--text-secondary);  /* Цвет текста из переменной */
}

/* Страницы функций */  /* Комментарий: стили для отдельных страниц функций */
.feature-detail-hero {  /* Герой-секция страницы функции */
    background: linear-gradient(135deg, rgba(108, 77, 255, 0.1) 0%, rgba(78, 205, 196, 0.1) 100%);  /* Градиентный фон */
    padding: 140px 0 80px;  /* Внутренние отступы */
    text-align: center;  /* Выравнивание текста по центру */
    margin-top: 70px;  /* Внешний отступ сверху (компенсация фиксированной навигации) */
}

.feature-steps {  /* Секция шагов */
    padding: 80px 0;  /* Внутренние отступы сверху и снизу */
}

.step-card {  /* Карточка шага */
    background: var(--card-bg);  /* Фон из переменной */
    padding: 2.5rem;  /* Внутренние отступы */
    border-radius: 20px;  /* Закругленные углы */
    margin-bottom: 2rem;  /* Внешний отступ снизу */
    border: 1px solid rgba(255, 255, 255, 0.1);  /* Полупрозрачная рамка */
    backdrop-filter: blur(10px);  /* Размытие фона */
    transition: all 0.3s ease;  /* Плавные переходы */
}

.step-card:hover {  /* Эффект при наведении на карточку шага */
    transform: translateY(-5px);  /* Сдвиг вверх на 5px */
    box-shadow: var(--shadow-hover);  /* Увеличенная тень */
}

.step-card h3 {  /* Заголовок карточки */
    font-size: 1.5rem;  /* Размер шрифта */
    margin-bottom: 1rem;  /* Отступ снизу */
    color: var(--accent-primary);  /* Цвет текста из переменной */
    display: flex;  /* Flex-контейнер */
    align-items: center;  /* Выравнивание по центру по вертикали */
    gap: 0.5rem;  /* Расстояние между элементами */
}

.step-card p {  /* Текст карточки */
    color: var(--text-secondary);  /* Цвет текста из переменной */
    line-height: 1.7;  /* Межстрочный интервал */
}

.learning-modules {  /* Контейнер модулей обучения */
    display: grid;  /* Grid-контейнер */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  /* Автоматические колонки минимальной шириной 250px */
    gap: 1.5rem;  /* Расстояние между элементами */
    margin: 2rem 0;  /* Внешние отступы сверху и снизу */
}

.module-card {  /* Карточка модуля */
    background: var(--bg-secondary);  /* Фон из переменной */
    padding: 1.5rem;  /* Внутренние отступы */
    border-radius: 15px;  /* Закругленные углы */
    text-align: center;  /* Выравнивание текста по центру */
    transition: transform 0.3s ease;  /* Плавное преобразование */
    border: 1px solid rgba(255, 255, 255, 0.1);  /* Полупрозрачная рамка */
}

.module-card:hover {  /* Эффект при наведении на карточку модуля */
    transform: translateY(-5px);  /* Сдвиг вверх на 5px */
}

.module-card i {  /* Иконка модуля */
    font-size: 2rem;  /* Размер иконки */
    color: var(--accent-primary);  /* Цвет из переменной */
    margin-bottom: 1rem;  /* Отступ снизу */
}

.module-card h4 {  /* Заголовок модуля */
    font-size: 1.2rem;  /* Размер шрифта */
    margin-bottom: 0.5rem;  /* Отступ снизу */
    color: var(--text-primary);  /* Цвет текста из переменной */
}

.module-card p {  /* Текст модуля */
    color: var(--text-secondary);  /* Цвет текста из переменной */
    font-size: 0.9rem;  /* Размер шрифта */
}

.code-example {  /* Пример кода */
    background: var(--bg-secondary);  /* Фон из переменной */
    padding: 1.5rem;  /* Внутренние отступы */
    border-radius: 10px;  /* Закругленные углы */
    margin: 1rem 0;  /* Внешние отступы сверху и снизу */
    font-family: 'Courier New', monospace;  /* Моноширинный шрифт для кода */
    border-left: 4px solid var(--accent-primary);  /* Акцентная линия слева */
    overflow-x: auto;  /* Горизонтальная прокрутка при необходимости */
}

.back-button {  /* Кнопка "Назад" */
    display: inline-flex;  /* Flex-контейнер в строке */
    align-items: center;  /* Выравнивание по центру по вертикали */
    gap: 0.5rem;  /* Расстояние между элементами */
    color: var(--accent-primary);  /* Цвет текста из переменной */
    text-decoration: none;  /* Убираем подчеркивание */
    font-weight: 600;  /* Жирный шрифт */
    margin-top: 2rem;  /* Внешний отступ сверху */
    transition: all 0.3s ease;  /* Плавные переходы */
}

.back-button:hover {  /* Эффект при наведении на кнопку "Назад" */
    gap: 1rem;  /* Увеличение расстояния между текстом и иконкой */
    color: var(--accent-secondary);  /* Смена цвета на вторичный акцентный */
}

/* Адаптивность */  /* Комментарий: медиа-запросы для адаптивного дизайна */
@media (max-width: 768px) {  /* Медиа-запрос для планшетов и мобильных устройств */
    .hero {  /* Адаптация герой-секции */
        flex-direction: column;  /* Вертикальное направление */
        text-align: center;  /* Выравнивание текста по центру */
        padding: 100px 0 30px;  /* Внутренние отступы */
    }
    
    .hero-title {  /* Адаптация заголовка */
        font-size: 2.5rem;  /* Уменьшенный размер шрифта */
    }
    
    .hero-subtitle {  /* Адаптация подзаголовка */
        font-size: 1.1rem;  /* Уменьшенный размер шрифта */
    }
    
    .hero-visual {  /* Адаптация визуальной части */
        height: 300px;  /* Уменьшенная высота */
        margin-top: 2rem;  /* Внешний отступ сверху */
    }
    
    .floating-card {  /* Адаптация плавающих карточек */
        position: relative;  /* Относительное позиционирование */
        margin: 1rem auto;  /* Внешние отступы и центрирование */
        width: 90%;  /* Ширина 90% */
        animation: none;  /* Отключение анимации */
        opacity: 1;  /* Полная непрозрачность */
        transform: none;  /* Без преобразований */
        top: auto !important;  /* Сброс позиции сверху */
        left: auto !important;  /* Сброс позиции слева */
        right: auto !important;  /* Сброс позиции справа */
        bottom: auto !important;  /* Сброс позиции снизу */
    }
    
    .floating-card:hover {  /* Эффект при наведении на мобильных */
        transform: scale(1.02);  /* Небольшое увеличение */
    }
    
    .nav-menu {  /* Адаптация меню навигации */
        position: fixed;  /* Фиксированное позиционирование */
        top: 70px;  /* Позиция сверху (ниже навигации) */
        left: -100%;  /* Скрытие за левым краем */
        width: 100%;  /* Полная ширина */
        height: calc(100vh - 70px);  /* Высота минус высота навигации */
        background: var(--bg-primary);  /* Фон из переменной */
        flex-direction: column;  /* Вертикальное направление */
        padding: 2rem;  /* Внутренние отступы */
        transition: left 0.3s ease;  /* Плавное изменение позиции */
        z-index: 999;  /* Высокий z-index */
    }
    
    .nav-menu.active {  /* Активное меню */
        left: 0;  /* Отображение */
    }
    
    .mobile-menu-btn {  /* Кнопка мобильного меню */
        display: block;  /* Отображение */
    }
    
    .hero-buttons {  /* Адаптация кнопок героя */
        flex-direction: column;  /* Вертикальное направление */
        align-items: center;  /* Выравнивание по центру */
    }
    
    .hero-btn {  /* Адаптация кнопок */
        width: 100%;  /* Полная ширина */
        max-width: 250px;  /* Максимальная ширина */
    }
    
    .interactive-controls {  /* Адаптация кнопок управления */
        flex-direction: column;  /* Вертикальное направление */
        align-items: center;  /* Выравнивание по центру */
    }
    
    .control-btn {  /* Адаптация кнопок */
        width: 100%;  /* Полная ширина */
        max-width: 250px;  /* Максимальная ширина */
        justify-content: center;  /* Выравнивание по центру по горизонтали */
    }
    
    .gallery-image {  /* Адаптация изображений галереи */
        height: 300px;  /* Уменьшенная высота */
    }
    
    .cta-badges {  /* Адаптация бейджей */
        flex-direction: column;  /* Вертикальное направление */
        align-items: center;  /* Выравнивание по центру */
        gap: 1rem;  /* Расстояние между элементами */
    }
    
    .footer-content {  /* Адаптация футера */
        grid-template-columns: 1fr;  /* Одна колонка */
        text-align: center;  /* Выравнивание текста по центру */
    }
    
    .social-links {  /* Адаптация социальных ссылок */
        justify-content: center;  /* Выравнивание по центру по горизонтали */
    }
    
    .subscribe-form {  /* Адаптация формы подписки */
        flex-direction: column;  /* Вертикальное направление */
    }
    
    .section-title {  /* Адаптация заголовков секций */
        font-size: 2rem;  /* Уменьшенный размер шрифта */
    }
    
    .features-grid {  /* Адаптация сетки возможностей */
        grid-template-columns: 1fr;  /* Одна колонка */
    }
    
    .feature-card {  /* Адаптация карточек возможностей */
        padding: 2rem;  /* Уменьшенные внутренние отступы */
    }
}

@media (max-width: 480px) {  /* Медиа-запрос для мобильных устройств */
    .hero-title {  /* Адаптация заголовка */
        font-size: 2rem;  /* Уменьшенный размер шрифта */
    }
    
    .section-title {  /* Адаптация заголовков секций */
        font-size: 1.8rem;  /* Уменьшенный размер шрифта */
    }
    
    .gallery-image {  /* Адаптация изображений галереи */
        height: 250px;  /* Уменьшенная высота */
    }
    
    .container {  /* Адаптация контейнера */
        padding: 0 15px;  /* Уменьшенные внутренние отступы */
    }
}

/* Утилиты */  /* Комментарий: вспомогательные классы */
.fade-in {  /* Класс для анимации появления */
    animation: fadeInUp 0.6s ease;  /* Анимация появления */
}

.sr-only {  /* Скрытие элемента с сохранением доступности (Screen Reader Only) */
    position: absolute;  /* Абсолютное позиционирование */
    width: 1px;  /* Минимальная ширина */
    height: 1px;  /* Минимальная высота */
    padding: 0;  /* Без внутренних отступов */
    margin: -1px;  /* Отрицательный отступ */
    overflow: hidden;  /* Скрытие переполнения */
    clip: rect(0, 0, 0, 0);  /* Обрезка */
    white-space: nowrap;  /* Запрет переноса текста */
    border: 0;  /* Без рамки */
}

/* Предотвращение горизонтального скролла */  /* Комментарий: предотвращение горизонтального скролла */
html, body {  /* Применение к корневым элементам */
    max-width: 100%;  /* Максимальная ширина */
    overflow-x: hidden;  /* Скрытие горизонтального скролла */
}

/* Улучшение доступности */  /* Комментарий: улучшение доступности для пользователей с клавиатурой */
.nav-link:focus,  /* Фокус на ссылках навигации */
button:focus,  /* Фокус на кнопках */
.hero-btn:focus,  /* Фокус на кнопках героя */
.control-btn:focus {  /* Фокус на кнопках управления */
    outline: 2px solid var(--accent-primary);  /* Контур акцентного цвета */
    outline-offset: 2px;  /* Отступ контура */
}

/* Улучшение читаемости текста */  /* Комментарий: улучшение читаемости текста */
p, li {  /* Применение к параграфам и элементам списка */
    line-height: 1.6;  /* Межстрочный интервал */
}
/* Видео контейнер */
.video-container {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow);
    margin: 3rem 0;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.video-container video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
}

/* Адаптивность для видео */
@media (max-width: 768px) {
    .video-container {
        margin: 2rem 0;
        border-radius: 15px;
    }
    
    .video-container video {
        border-radius: 15px;
    }
}

@media (max-width: 480px) {
    .video-container {
        margin: 1.5rem 0;
        border-radius: 10px;
    }
    
    .video-container video {
        border-radius: 10px;
    }
}
/* Убираем контур после нажатия на кнопки */
.nav-link:focus,
button:focus,
.hero-btn:focus,
.control-btn:focus,
.theme-toggle:focus,
.feature-btn:focus,
.gallery-prev:focus,
.gallery-next:focus,
.zoom-btn:focus,
.cta-button:focus,
.subscribe-form button:focus {
    outline: none;
}
/* Стили для кнопки разработчиков в футере */
.dev-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 20px;
    background: var(--card-bg);
    color: darkgray;
    text-decoration: none;
    border-radius: 20px;
    font-weight:500 ;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.dev-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}





















/* Секция системных требований */
.requirements-section {
    padding: 100px 0;
    background: var(--bg-primary);
}

.requirements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.requirements-card {
    background: var(--card-bg);
    padding: 2rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    position: relative;
}

.requirements-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.requirements-card.recommended {
    border: 2px solid var(--accent-primary);
    position: relative;
}

.recommended-badge {
    position: absolute;
    top: -10px;
    right: 20px;
    background: var(--gradient);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.requirements-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.requirements-header i {
    font-size: 2rem;
    color: var(--accent-primary);
}

.requirements-header h3 {
    font-size: 1.3rem;
    color: var(--text-primary);
    margin: 0;
}

.requirements-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.requirement-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.requirement-label {
    color: var(--text-secondary);
    font-weight: 500;
    flex-shrink: 0;
}

.requirement-value {
    color: var(--text-primary);
    font-weight: 600;
    text-align: auto;
    flex: 1;
}

.requirements-note {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(108, 77, 255, 0.1);
    padding: 1.5rem;
    border-radius: 15px;
    margin-top: 2rem;
    border-left: 4px solid var(--accent-primary);
}

.requirements-note i {
    color: var(--accent-primary);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.requirements-note p {
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* Адаптивность для системных требований */
@media (max-width: 768px) {
    .requirements-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .requirements-card {
        padding: 1.5rem;
    }
    
    .requirement-item {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
    
    .requirement-value {
        text-align: left;
    }
    
    .requirements-note {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .requirements-header {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    .requirements-header h3 {
        font-size: 1.1rem;
    }
}