#background-video {
    position: fixed; /* Закрепляем видео на экране */
    top: 0;
    left: 0;
    width: 100%; /* Растягиваем на всю ширину */
    height: 100%; /* Растягиваем на всю высоту */
    object-fit: cover; /* Масштабируем видео, чтобы оно заполнило экран без искажений */
    z-index: -1; /* Устанавливаем видео на задний план, чтобы элементы поверх него не перекрывались */
    overflow: hidden; /* Убираем лишнюю прокрутку, если видео выходит за границы */
}

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Убираем горизонтальную прокрутку */
}

/* Стиль для кнопки "Скачать Rust" */
.custom-download-btn {
    display: inline-block;
    background-color: #FFD700; /* Желтый цвет */
    color: #000;
    padding: 12px 24px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 50px;
    text-align: center;
    margin-left: 20px; /* Расстояние от других элементов */
    text-decoration: none;
    transition: all 0.3s ease;
    position: fixed;
    top: 20px; /* Закрепление кнопки в верхнем правом углу */
    right: 20px; /* Расположение по горизонтали */
    z-index: 1001; /* Чтобы кнопка была поверх других элементов */
}

/* Анимация для кнопки */
.custom-download-btn:hover {
    background-color: #FFCC00; /* Светлый желтый при наведении */
    color: #1b4a6b;
    transform: scale(1.1); /* Увеличение кнопки при наведении */
}

/* При нажатии на кнопку */
.custom-download-btn:active {
    transform: translateY(2px); /* Маленький эффект нажатия */
}

/* При фокусе на кнопке */
.custom-download-btn:focus {
    outline: none;
}


/* Стиль для логотипа */
.log2 {
    height: 40px; /* Устанавливаем высоту логотипа */
    width: auto; /* Ширина автоматически подстраивается */
    margin-left: -15px; /* Сдвигаем логотип влево на 45px (вы можете изменить это значение) */
    vertical-align: middle; /* Выравнивание по центру по вертикали */
    position: fixed; /* Фиксируем логотип в верхней части экрана */
    top: 20px; /* Устанавливаем отступ от верха экрана 20px */
}


/* Контейнер для логотипа */
.logo-container {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9995;
}

/* Стили для логотипа */
.logo {
    width: 1100px;
    height: auto;
    transition: transform 0.3s ease; /* Плавный переход для обратного эффекта */
}


body {
    margin: 0;
    padding: 0;
    font-family: 'Pangolin', sans-serif;
    height: 200vh;  /* Делаем высоту body больше, чтобы была прокрутка */
    position: relative; /* Убираем flex и позиционируем body */
    overflow-y: auto; /* Включаем прокрутку по вертикали */
    overflow-x: hidden; /* Скрыть горизонтальную прокрутку */
    box-sizing: border-box; /* Учитываем отступы и границы в общей ширине элементов */
}

header {
    position: absolute;
    top: 20px;  /* Отступ сверху */
    left: 20px; /* Отступ слева */
}

h1 {
    font-family: 'Pangolin', sans-serif;
    font-size: 40px;
    color: #00ff99;
    margin: 0;
    padding: 20px 0;
    text-shadow: 0 0 8px #00ff99;
}

.download-button {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute; /* Абсолютное позиционирование для точного размещения */
    bottom: calc(100vh + 100px); /* Размещаем кнопку на 100vh выше с отступом 100px */
    left: 50%; /* Центрируем кнопку по горизонтали */
    transform: translateX(-50%); /* Сдвигаем кнопку на 50% ширины влево для точного выравнивания */
}

.download-link {
    display: inline-block;
    padding: 15px 30px; /* Размер кнопки */
    font-size: 30px; /* Размер текста */
    color: white; /* Цвет текста */
    background-color: #d54a4d; /* Цвет фона кнопки (красный) */
    text-decoration: none;
    border-radius: 10px;
    text-align: center;
    position: relative; /* Для работы с псевдоэлементами */
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; /* Плавный переход */
    box-shadow: 0 0 0px rgba(0.31 0.49 0.10 1.00); /* Начальный эффект свечения */
    z-index: 1; /* Ставим кнопку поверх свечения */
}

/* Анимация увеличения и свечения при наведении */
.download-link:hover {
    transform: scale(1.1);  /* Увеличиваем кнопку */
    background-color: #4f7e19;  /* Зеленый цвет фона при наведении */
    box-shadow: 0 0 10px 3px rgba(40, 167, 69, 1); /* Свечение вокруг кнопки зеленым цветом */
}

/* Эффект при нажатии */
.download-link:active {
    transform: scale(1.05);  /* Немного уменьшаем кнопку при нажатии */
}


/* Стиль для кнопок навигации */
.nav-buttons {
    display: flex; /* Используем flexbox для горизонтального расположения */
    flex-direction: row; /* Располагаем элементы по горизонтали */
    position: fixed; /* Закрепляем навигацию на экране */
    top: 20px; /* Отступ от верхнего края страницы */
    left: 150px; /* Отступ от левого края */
    z-index: 9999; /* Высокий z-index, чтобы кнопки были сверху */
    gap: 10px; /* Отступы между кнопками */
}

/* Стиль для каждой кнопки */
.nav-buttons a {
    background-color: #FFD700; /* Желтый фон для кнопок */
    color: #000; /* Черный цвет текста */
    padding: 10px 20px; /* Отступы для кнопок */
    font-size: 16px; /* Размер текста */
    font-weight: bold; /* Жирный шрифт */
    border-radius: 10px; /* Скругленные края */
    text-decoration: none; /* Убираем подчеркивание */
    transition: all 0.3s ease; /* Плавный переход для анимации */
}

/* Эффект при наведении на кнопки */
.nav-buttons a:hover {
    background-color: #FFCC00; /* Светлый желтый цвет при наведении */
    color: #d13438; /* Меняем цвет текста на красный (#d54a4d) */
    transform: scale(1.1); /* Увеличиваем при наведении */
}

/* Эффект при нажатии на кнопку */
.nav-buttons a:active {
    transform: translateY(2px); /* Эффект нажатия */
}



/* Контейнер для иконок */
.social-icons {
    display: flex;
    gap: 15px;
    justify-content: center;
    position: fixed;
    top: 20px; /* Отступ сверху */
    right: 250px; /* Отступ справа */
    z-index: 10; /* Чтобы иконки были поверх других элементов */
}

/* Общие стили для ссылок-иконок */
.social-icon {
    display: inline-block;
    width: 40px; /* Размер иконки */
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: grayscale(1); /* Изначально серый цвет */
    transition: transform 0.3s, filter 0.3s;
}

/* Иконка VK */
.social-icon.vk {
    background-image: url('images/vk-icon.png'); /* Укажите путь к иконке VK */
    order: 1;
}

/* Иконка Discord */
.social-icon.discord {
    background-image: url('images/discord-icon.png'); /* Укажите путь к иконке Discord */
    order: 2;
}

/* Иконка YouTube */
.social-icon.youtube {
    background-image: url('images/youtube-icon.png'); /* Укажите путь к иконке YouTube */
    order: 4;
}

.social-icon.telegram {
    background-image: url('images/telegram-icon.png'); /* Путь к иконке Telegram */
    order: 3;
    
}


/* Анимация при наведении */
.social-icon:hover {
    filter: grayscale(0); /* Убираем серый цвет */
    transform: scale(1.2); /* Легкое увеличение */
}

/* Индивидуальные цвета при наведении */
.social-icon.vk:hover {
    filter: grayscale(0) drop-shadow(0 0 5px #4a76a8); /* Голубой эффект */
}

.social-icon.discord:hover {
    filter: grayscale(0) drop-shadow(0 0 5px #5865f2); /* Фиолетовый эффект */
}

.social-icon.youtube:hover {
    filter: grayscale(0) drop-shadow(0 0 5px #ff0000); /* Красный эффект */
}

.social-icon.telegram:hover {
    filter: grayscale(0) drop-shadow(0 0 5px #0088cc); /* Синий эффект для Telegram */
}


.smoke-background {
    position: fixed; /* Сделаем фиксированным элементом */
    top: 0; /* Начинается с самого верха */
    left: 0;
    width: 100%; /* Ширина на весь экран */
    height: 85px; /* Высота полоски */
    background: linear-gradient(to bottom, 
        rgba(10, 10, 30, 0.8) 0%, 
        rgba(10, 10, 30, 0.7) 25%, 
        rgba(10, 10, 30, 0.5) 50%, 
        rgba(10, 10, 30, 0.3) 75%, 
        rgba(10, 10, 30, 0) 100%
    ); /* Плавный темно-синий с черным оттенком */
    z-index: -1; /* Размещаем за иконками */
    opacity: 0; /* Скрываем по умолчанию */
    transition: opacity 0.3s ease-in-out; /* Плавное появление */
}

.show-smoke {
    opacity: 1; /* Показываем полоску */
}

/* Контейнер для видео */
.video-container {
    width: 800px; /* Увеличена ширина контейнера */
    height: 450px; /* Высота увеличена пропорционально (16:9) */
    overflow: hidden; /* Скрывает лишнее содержимое */
    position: absolute; /* Позиционирование относительно ближайшего родителя с position: relative */
    top: 55%; /* Смещение на 55% от верха экрана */
    left: 50%; /* Центровка по горизонтали */
    transform: translateX(10%); /* Сдвиг на 10% вправо */
    border-radius: 10px; /* Скругленные углы */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Тень вокруг видео */
}

/* Видео */
.video-container video {
    width: 100%; /* Масштабирование видео по ширине контейнера */
    height: 100%; /* Масштабирование по высоте контейнера */
    object-fit: cover; /* Видео обрезается или масштабируется */
    border-radius: inherit; /* Наследует скругление от контейнера */
}


/* Контейнер профиля */
.profile-container {
    display: flex; /* Используем flexbox для выравнивания элементов */
    align-items: center; /* Вертикальное выравнивание */
    background-color: #FFD700; /* Желтый фон для контейнера */
    color: #000;
    padding: 8px 30px; /* Увеличиваем ширину кнопки профиля */
    font-size: 18px;
    font-weight: bold;
    border-radius: 50px; /* Круглые края */
    text-decoration: none;
    transition: all 0.3s ease;
    position: fixed;
    top: 20px; /* Расположение в верхнем правом углу */
    right: 50px; /* Сдвигаем кнопку немного левее от края экрана */
    z-index: 9999; /* Высокий z-index, чтобы быть наверху */
    cursor: pointer;
}

/* Эффект при наведении на профиль */
.profile-container:hover {
    background-color: #FFCC00; /* Светлый желтый цвет при наведении */
    transform: scale(1.1); /* Увеличение при наведении */
}

/* Эффект при нажатии на профиль */
.profile-container:active {
    transform: translateY(2px); /* Эффект нажатия */
}

/* Стиль для аватара */
.user-avatar {
    width: 30px; /* Размер аватара */
    height: 30px;
    border-radius: 50%; /* Круглый аватар */
    margin-right: 10px; /* Отступ справа от аватара */
}

/* Стиль для имени пользователя */
.username {
    margin-right: 10px; /* Отступ справа от имени */
}

/* Контейнер с информацией профиля (по умолчанию скрыт) */
/* Контейнер с информацией профиля (по умолчанию скрыт) */
.profile-info-container {
    display: none; /* Изначально скрыт */
    position: fixed;
    top: 80px;
    right: 40px;
    background-color: #FFD700;
    color: #000;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    width: auto;
    min-width: 160px;
    box-sizing: border-box;
    z-index: 99999;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out; /* Анимация для слайда */
}

/* Показываем меню с анимацией */
.profile-info-container.show {
    display: flex; /* Показываем контейнер */
    max-height: 500px; /* Ограничиваем максимальную высоту */
}


/* Стили для Steam ID */
.profile-info-container p {
    margin: 0; /* Убираем отступы */
    padding: 5px 0; /* Отступы сверху и снизу для Steam ID */
    text-align: center; /* Выравнивание по центру */
    font-size: 16px; /* Размер текста для Steam ID */
}

/* Кнопка "Выйти" */
.logout-button {
    background-color: #ff4c4c;
    padding: 6px 12px;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 14px;
    display: inline-block;
    align-self: center; /* Центрируем кнопку по горизонтали */
    margin: 0; /* Убираем отступы */
}

/* Эффект наведения на кнопку "Выйти" */
.logout-button:hover {
    background-color: #e04040;
}

/*Стиль полоски и текста снизу экрана*/
.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 10px;
    font-size: 14px;
    margin: 0; /* Убедитесь, что нет внешних отступов */
}

/* Стилизация самой полосы прокрутки */
::-webkit-scrollbar {
    width: 12px; /* Ширина полосы прокрутки */
    border-radius: 10px; /* Скругление углов полосы прокрутки */
}

/* Стилизация ползунка прокрутки */
::-webkit-scrollbar-thumb {
    background-color: #d54a4d; /* Бледно-красный цвет ползунка */
    border-radius: 10px; /* Скругление углов ползунка */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Лёгкая тень вокруг ползунка */
}

/* Стилизация трека (фона) полосы прокрутки */
::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* Цвет фона полосы прокрутки */
    border-radius: 10px; /* Скругление углов трека */
}

/* Стиль для контейнера видео */
.video-container {
    width: 800px;
    height: 450px;
    overflow: hidden;
    position: absolute;
    top: 55%; /* Позиция видео */
    left: 50%;
    transform: translateX(10%);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    text-align: center;
}

/* Стиль для контейнера иконок */
.icon-container {
    display: flex;
    justify-content: center; /* Центрируем иконки по горизонтали */
    gap: 50px;
    padding: 20px 0;
    position: absolute;
    top: 85%; /* Смещаем иконки ниже видео */
    left: 75%; /* Сдвигаем контейнер иконок правее */
    transform: translateX(-50%);
    z-index: 1000;
}

/* Стиль для каждой иконки */
.icon-item {
    text-align: center;
}

/* Изменяем размер иконок */
.icon {
    width: 80px; /* Увеличиваем размер иконок */
    height: auto;
    margin-bottom: 15px; /* Увеличиваем отступ между иконкой и текстом */
}

/* Изменяем размер текста */
.icon-item p {
    color: white;
    font-size: 20px; /* Увеличиваем размер текста */
    margin: 0;
}


.feature {
    position: absolute;
    bottom: 5vh; /* Подняли текст еще ниже */
    left: 10%; /* Сместили текст правее на 15% */
    font-family: 'Pangolin', sans-serif;
    color: white;
    padding: 0; /* Убрали внутренние отступы */
    max-width: 600px; /* Ограничение ширины */
    width: 100%; /* Занимает всю доступную ширину */
}

.feature-title {
    font-size: 2.2rem; /* Увеличили размер заголовка */
    margin-bottom: 20px; /* Увеличили отступ под заголовком */
    text-align: center; /* Выравнивание по центру */
    color: #ffcc00; /* Цвет заголовка */
    width: 100%; /* Заголовок будет занимать всю ширину родителя */
    margin: 0; /* Убираем отступы */
    position: relative; /* Для будущих изменений, если понадобятся */
    display: flex; /* Flexbox для центрирования */
    justify-content: center; /* Центрируем заголовок по горизонтали */
    padding: 10px; /* Внутренние отступы для контейнера */
    background-color: rgba(50, 50, 50, 0.6); /* Темно-серый фон с большей прозрачностью */
    border-radius: 10px; /* Скругленные углы */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Легкая тень для выделения */
}

.feature-grid {
    display: block; /* Сделали блок, чтобы элементы шли один за другим */
    margin-top: 20px; /* Добавили отступ сверху */
}

.feature-item {
    display: flex;
    align-items: center;
    font-size: 1.5rem; /* Размер текста */
    margin-bottom: 10px; /* Отступы между пунктами */
    padding: 20px; /* Увеличили отступы внутри рамки */
    border: 3px solid rgba(255, 255, 255, 0.5); /* Увеличили ширину рамки и повысили прозрачность */
    border-radius: 10px; /* Сделали углы более округлыми */
    width: 110%; /* Увеличили ширину рамки */
    margin-left: -5%; /* Сместили рамку влево, чтобы она не выходила за пределы контейнера */
    transition: transform 0.3s ease-in-out; /* Плавная анимация при изменении размера */
}

/* Анимация увеличения текста при наведении */
.feature-item:hover {
    transform: scale(1.1); /* Увеличиваем размер на 10% */
}

.checkmark {
    color: limegreen; /* Цвет галочки */
    margin-right: 10px; /* Отступ от текста */
    font-size: 1.8rem; /* Размер галочки */
}



/* --- БАЗА ДЛЯ АДАПТИВА --- */
* { box-sizing: border-box; }
img, video { max-width: 100%; height: auto; display: block; }

/* --- ПЛАНШЕТЫ (до 992px) --- */
@media (max-width: 992px) {
  .nav-buttons { flex-wrap: wrap; gap: 8px; }
  .social-icons { right: 16px; gap: 10px; }
  .logo { width: 70vw; } /* уменьшить большой логотип */
}

/* --- ТЕЛЕФОНЫ (до 768px) --- */
@media (max-width: 768px) {
  /* Страница — вертикальная колонка, всё по центру */
  body {
    height: auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Общие правила для всех блоков */
  .nav-buttons,
  .logo-container,
  .download-button,
  .video-container,
  .icon-container,
  .feature,
  .footer,
  .social-icons,
  .log2 {
    position: static !important;
    transform: none !important;
    left:auto!important; right:auto!important; top:auto!important; bottom:auto!important;
    width: 92vw;
    margin: 0 auto 12px !important;
  }

  /* Порядок сверху вниз */
  .nav-buttons     {
    order: -30 !important;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    margin-top: 30px !important;
  }
  .logo-container  {
    order: -29 !important;
    text-align:center;
  }
  .download-button {
  order: -28 !important;
  display: flex;
  justify-content: center;
}

/* стили для самой кнопки внутри контейнера */
.download-button a {
  font-size: 19px;
  padding: 12px 23px;
  border-radius: 10px;
  display: inline-block;
}


  /* Видео под кнопкой скачать — вернули прежний размер */
.video-container {
  order: -27 !important;
  width: 95%;           /* как на ПК — по всей ширине */
  max-width: 900px;      /* ограничиваем, чтобы не растягивалось слишком */
  margin: 20px auto 8px !important; /* добавили нижний отступ, чтобы не прилипал */
  height: auto !important;
}

.video-container video {
  width: 100%;
  height: auto;
  object-fit: cover;     /* сохраняем пропорции и обрезаем лишнее */
}

  /* Центрируем логотип */
  .logo {
    width: 80vw;
    max-width: 480px;
    height: auto;
    display: block;
    margin: 0 auto; /* чтобы не уходил влево */
  }

  /* Иконки в сетку */
  .icon-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    justify-content: center;
    padding: 0 12px;
  }
  .icon { width: 56px; }
  .icon-item p { font-size: 16px; }

  /* Блок преимуществ */
  .feature {
    max-width: 92vw;
    padding: 0;
  }
  .feature-title {
    font-size: 1.4rem;
    padding: 8px 10px;
  }
  .feature-grid {
    display: block;
    margin-top: 12px;
  }
  .feature-item {
    width: 100%;
    margin: 0 0 10px 0;
    padding: 12px;
    font-size: 1rem;
    transform: none;
  }

  /* Подвал */
  .footer {
    margin-top: 15px;
  }

  /* Скрыть лишние элементы */
  .custom-download-btn { display: none !important; } /* скрываем дубликат кнопки */
  .log2 { display: none !important; }                /* скрываем верхний логотип */
}