@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@keyframes page-appear {
    0% {
        transform: scale(2);
        filter: blur(40px);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        transform: scale(1);
        filter: blur(0px);
        opacity: 1;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden;
    overflow-block: hidden;
}

/* ИЗМЕНЕННЫЕ СТИЛИ ДЛЯ html, body */
html {
    /* Главный контейнер, разрешаем прокрутку, если контент выходит за 100% высоты */
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100%;
}

body {
    /* Сбрасываем все, что может мешать */
    height: auto;
    min-height: 100%;
    /* Важно! Убираем overflow с body, чтобы его контролировал html */
    overflow: visible; 
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Цвет затемнения (черный с 60% прозрачности) */
    background-color: rgba(22, 22, 22, 0.6); 
    /* Должен быть выше видео (-1) и ниже контента (1) */
    z-index: 0; 
    pointer-events: none; 
}

/* ФИНАЛЬНОЕ ИСПРАВЛЕНИЕ: МАКСИМАЛЬНЫЙ ЗАПАС ДЛЯ ПРОКРУТКИ */
.background-video {
    position: fixed;
    /* Центрируем, привязывая края к центру */
    top: 50%;
    left: 50%;
    
    /* ДЕЛАЕМ ВИДЕО ОЧЕНЬ БОЛЬШИМ, чтобы оно гарантированно покрыло все сдвиги */
    width: 400vw;
    height: 400vh; 
    object-fit: cover; /* Сохраняем пропорции, используя этот огромный размер как минимальный */
    
    /* Базовое центрирование */
    transform: translate(-50%, -50%);
    
    z-index: -1;
    filter: brightness(60%);
}

.main-content {
    position: relative;
    z-index: 1;
    width: 100%;
    color: white;
    height: auto;
    min-height: 100vh;
    /* Возвращено затемнение */
    animation: page-appear .5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    transform-origin: center center;
    padding-top: 20px; 
}

/* ---------------------------------- */
/* СТИЛИ ХЕДЕРА С СТЕКЛОМОРФИЗМОМ И ПОДСВЕТКОЙ КУРСОРА */
/* ---------------------------------- */
header{
    width: 90%;
    max-width: 1190px;
    margin: 20px auto 0 auto;
    padding: 15px 30px;
    /* СТЕКЛОМОРФИЗМ */
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    border: 3px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    
    /* НАСТРОЙКИ ДЛЯ ЭФФЕКТА СПОТЛАЙТА */
    position: relative;
    overflow: hidden;
    z-index: 10;
    
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Элемент подсветки, который будет следовать за курсором */
.header__spotlight {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0; 
    transition: opacity 0.5s ease;
    z-index: 1;
}

/* При наведении делаем элемент подсветки видимым */
header:hover .header__spotlight {
    opacity: 1; 
}

.header-logo {
    font-size: 2.3rem;
    font-weight: 700;
    position: relative;
    user-select: none;
    z-index: 2; /* Убеждаемся, что логотип виден поверх подсветки */
}

/* ---------------------------------- */
/* СТИЛИ ТЕСТОВОГО КОНТЕНТА ДЛЯ ПРОКРУТКИ */
/* ---------------------------------- */
.content-cards {
    width: 90%;
    max-width: 1190px;
    margin: 40px auto;
    padding: 20px;
    text-align: center;
}

.test-heading {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 5px;
}

.test-subheading {
    font-size: 1.2rem;
    opacity: 0.8;
    margin-bottom: 30px;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

.test-card {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 30px;
    border-radius: 10px;
    font-weight: 500;
    transition: transform 0.3s ease;
}

.test-card:hover {
    transform: translateY(-5px);
    background-color: rgba(255, 255, 255, 0.2);
}

header .nav-links {
    display: flex;
    gap: 80px;
}

header .nav-links .nav-link {
    /* Ваши исходные стили */
    text-decoration: none;
    color: white;
    font-size: 20px;
    font-weight: 400;
    transition: color 0.3s ease; /* Изменяем transition для фокусировки на цвете */

    /* Добавляем стили для анимации линии */
    position: relative; /* Необходим для позиционирования псевдоэлемента */
    overflow: hidden; /* Скрывает линию за пределами элемента до наведения */
}

/* Создаем псевдоэлемент, который будет линией */
header .nav-links .nav-link::after {
    content: '';
    position: absolute;
    width: 100%; /* Ширина линии */
    height: 2px; /* Толщина линии */
    bottom: 0; /* Расположение под текстом */
    left: 0;
    background-color: white; /* Цвет линии */
    transform: scaleX(0); /* Изначально линия невидима (ширина 0) */
    transform-origin: bottom right; /* Точка отсчета для появления (справа налево) */
    transition: transform 0.3s ease-out; /* Анимация transform */
}

/* При наведении */
header .nav-links .nav-link:hover {
    color: white; /* Можно изменить цвет текста при наведении */
}

/* Анимируем появление линии при наведении */
header .nav-links .nav-link:hover::after {
    transform: scaleX(1); /* Линия становится полностью видимой */
    transform-origin: bottom left; /* Точка отсчета для исчезновения (слева направо) */
}

.promo-image{
  animation: glow 2s infinite alternate;
  transform: translateX(-70px);
  position: relative;
  bottom: 65px;
}

@media screen and (min-width: 1920px) {
  .promo-image {
    transform: translateX(0);
    bottom: 50px;
  }
}


@keyframes glow {
  0% { filter: drop-shadow(0 0 2px #bebebe); }
  100% { filter: drop-shadow(0 0 5px #616161); }
}


/* ---------------------------------- */
/* СТИЛЬ ДЛЯ ИНФОРМАЦИОННОЙ КАРТОЧКИ (info-textes) */
/* ---------------------------------- */

.promo-content-section {
    display: flex;
    align-items: center;
    /* Устанавливаем, чтобы элементы выстраивались слева */
    justify-content: flex-start; 
    margin: 80px auto 0 auto;
    /* Даем 100% ширины, чтобы max-width сработал корректно */
    width: 100%; 
    max-width: 1190px;
    gap: 40px;
    /* overflow: hidden; - Оставляем */
    overflow: hidden; 
    box-sizing: border-box;
    /* Убираем padding-left, который мы добавляли ранее */
    padding-left: 0; 
}

/* Анимация для плавного появления текста - ОСТАВЛЯЕМ КАК ЕСТЬ */
@keyframes text-fade-in {
    100% {
        opacity: 1;
        transform: translateY(-90px); 
    }
}

.promo-content-section .info-textes {
    /* ... Стили глассморфизма и анимации остаются ... */
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    /* Плавное появление - Оставляем */
    opacity: 0;
    transform: translateY(-80px);
    animation: text-fade-in 1s 0.3s forwards;

    /* Размер и отступы */
    box-sizing: border-box; 
    /* ВОЗВРАЩАЕМ padding, он не является причиной обреза */
    padding: 40px; 

    /* НОВЫЙ РАСЧЕТ ШИРИНЫ */
    /* Занимает всю доступную ширину, но не больше 600px */
    width: 100%; 
    max-width: 600px;
    
    /* ФИКС: Используем margin для отступа и авто-сжатия */
    /* 48px слева, auto справа, 0 сверху/снизу */
    /* margin-right: auto; гарантирует, что элемент не будет выходить за границу */
    margin-left: 48px; 
    margin-right: auto; 
    margin-top: 0;
    margin-bottom: 0;
    
    /* Важное свойство для Flex-элементов, чтобы они могли сжиматься */
    flex-shrink: 1;
}



.promo-content-section .info-textes .title{
    font-size: 2.5rem;
    font-weight: 800;
    width: 600px;
    margin-bottom: 10px;
    color: #ffffff; 
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
}

.promo-content-section .info-textes .text{
    font-size: 1.4rem;
    opacity: 0.9; 
    width: 100%; 
    line-height: 1.6; 
}

/* ---------------------------------------------------- */
/* ✨ ОЧЕНЬ КРАСИВЫЙ SCROLLBAR: Cyber-Glass Effect */
/* ---------------------------------------------------- */
/* Переменные для легкости настройки */
:root {
    --glass-border: rgba(0, 0, 0, 0.1); /* Тонкая граница */
    --thumb-base: rgba(10, 10, 10, 0.5); /* Почти невидимый ползунок */
    --neon-glow: #FFFFFF; /* Чистый белый неоновый цвет */
    --track-bg: rgba(0, 0, 0, 0.3); /* Темный фон для контраста */
}

/* 1. Общий вид скроллбара (полосы) */
html::-webkit-scrollbar {
    width: 6px; /* ⬅️ Сделаем его ОЧЕНЬ ТОНКИМ, чтобы он был минималистичным */
    background: transparent;
}

/* 2. Стили для ползунка (thumb) */
html::-webkit-scrollbar-thumb {
    /* Базовый ползунок: почти прозрачный, с тонким эффектом стекла */
    background-color: var(--thumb-base); 
    border-radius: 3px; /* Острые края для футуризма */
    border-left: 1px solid var(--glass-border); /* Тонкая вертикальная линия */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Пружинистая анимация */
}

/* 3. Стили для ползунка при наведении (hover) - МАКСИМАЛЬНЫЙ ЭФФЕКТ */
html::-webkit-scrollbar-thumb:hover {
    /* Становится ярким, непрозрачным и светится */
    background-color: var(--neon-glow); 
    /* Мощное неоновое свечение */
    box-shadow: 
        0 0 5px var(--neon-glow), /* Основное свечение */
        0 0 15px rgba(255, 255, 255, 0.7); /* Широкий ореол */
    border-left: 1px solid var(--neon-glow); /* Граница сливается со свечением */
    width: 8px; /* Ползунок немного расширяется при наведении */
}

/* 4. Стиль для неиспользуемой части полосы скроллбара (track) */
html::-webkit-scrollbar-track {
    background: var(--track-bg); 
    border-radius: 3px;
}

/* ---------------------------------- */
/* СТИЛИ ДЛЯ БЕСКОНЕЧНОГО СКРОЛЛА ЛОГОТИПА (LOGO MARQUEE) */
/* ---------------------------------- */

.logo-marquee {
    margin: 100px auto; 
    width: 100%;
    /* СКРЫВАЕМ ПОВТОРЯЮЩУЮСЯ ЧАСТЬ */
    overflow: hidden; 
    position: relative;
    bottom: 90px;
}

.logo-marquee--reverse{
    position: relative;
    bottom: 160px;
}

/* 1. Контейнер, который содержит все логотипы и анимируется */
.marquee-content {
    /* Это критически важно! Ширина контейнера равна сумме ширин всего его содержимого */
    width: max-content;
    display: flex;
    
    /* Запускаем анимацию прокрутки влево */
    animation: marquee-scroll-left 125s linear infinite; /* 25s - скорость */
}

/* 2. Стиль самого логотипа (элемент) */
.marquee-item {
    flex-shrink: 0; 
    height: 60px; 
    width: auto; 
    opacity: 0.8;
    
    /* Добавляем небольшой отступ между логотипами */
    margin-right: 50px; 
}

/* 3. Ключевые кадры для движения ВЛЕВО */
@keyframes marquee-scroll-left {
    0% {
        /* Начинаем с 0 */
        transform: translateX(0%);
    }
    100% {
        /* Перемещаемся ровно на ширину ПЕРВОГО НАБОРА логотипов (т.е. на -50% от общей ширины marquee-content) */
        transform: translateX(-50%);
    }
}

/* ---------------------------------- */
/* СТИЛИ ДЛЯ ВТОРОЙ ПРОКРУТКИ ВПРАВО */
/* ---------------------------------- */

/* 1. Класс для внутреннего контейнера второй прокрутки */
.marquee-content--reverse {
    /* Наследует все стили от .marquee-content (width: max-content, display: flex) */
    width: max-content;
    display: flex;
    
    /* Заменяем анимацию на движение ВПРАВО */
    animation: marquee-scroll-right 125s linear infinite; 
    
    /* Опционально: можно добавить небольшую задержку, чтобы они не начинали одновременно */

}

/* 2. Ключевые кадры для движения ВПРАВО */
@keyframes marquee-scroll-right {
    0% {
        /* Начальная точка: Сдвигаем контент влево на ширину ОДНОГО НАБОРА (т.е. на -50%) */
        transform: translateX(-50%); 
    }
    100% {
        /* Конечная точка: Возвращаемся в 0. Контент прокручивается вправо.
           При перезапуске он мгновенно телепортируется назад в -50%. */
        transform: translateX(0%); 
    }
}

/* ... (Existing styles above this section remain unchanged) ... */

/* ---------------------------------- */
/* STYLES FOR THE ABOUT US SECTION */
/* ---------------------------------- */

.about-us {
    width: 90%;
    max-width: 1190px;
    margin: 40px auto;
    padding: 20px;
    text-align: center;
    color: white;
    position: relative;
    bottom: 90px;
}

/* FIX: Added proper styling for the title */
.about-us-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 30px; /* Space below the title */
}

@keyframes appear{
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.blocks .block {
    padding: 20px 40px;
    width: 90%;
    height: auto; 
    min-height: 85px; 
    margin: 20px auto;
    border-radius: 15px;
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: background-color 0.3s ease, transform 0.3s ease; 
    transition-delay: var(--delay, 0s);
    
    /* СДЕЛАТЬ СКРЫТЫМ И ГОТОВЫМ К АНИМАЦИИ */
    opacity: 0;
    transform: translateY(70px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* СТИЛИ ДЛЯ ЗАДЕРЖКИ АНИМАЦИИ (STAGGERING) */
.blocks .block:nth-child(1) { --delay: 0.0s; }
.blocks .block:nth-child(2) { --delay: 0.1s; }
.blocks .block:nth-child(3) { --delay: 0.2s; }
.blocks .block:nth-child(4) { --delay: 0.3s; }
.blocks .block:nth-child(5) { --delay: 0.4s; }
.blocks .block:nth-child(6) { --delay: 0.5s; }
.blocks .block:nth-child(7) { --delay: 0.6s; }
.blocks .block:nth-child(8) { --delay: 0.7s; }
.blocks .block:nth-child(9) { --delay: 0.8s; }

/* КЛАСС, КОТОРЫЙ БУДЕТ ДОБАВЛЯТЬСЯ ЧЕРЕЗ JS */
.blocks .block.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.blocks .block:hover {
    transform: translateY(-5px);
    background-color: rgba(255, 255, 255, 0.2);
}

.blocks .block .block-info{
    /* FIX: Use Flexbox for correct button positioning */
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    cursor: pointer; 
}

.blocks .block .block-info .block-title{
    font-size: 1.4rem;
    font-weight: 400;
    margin: 0; 
    padding: 10px 0; 
    text-align: left;
    flex-grow: 1; 
}

.blocks .block .block-info .show-block-text{
    /* FIX: No fixed margins, No rotation transition */
    font-size: 1rem;
    background-color: transparent;
    border: none;
    outline: none;
    color: white;
    font-size: 45px;
    cursor: pointer;
    line-height: 1; 
    padding: 0;
    margin-left: 20px; 
    transition: none; /* Removed rotation animation */
}

.blocks .block .block-text{
    margin-top: 15px; 
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1); 
    font-size: 1.1rem;
    /* Accordion effect using max-height */
    max-height: 0; 
    overflow: hidden;
    transition: max-height 0.4s ease-out, opacity 0.4s ease-out; 
    opacity: 0;
    text-align: left;
    line-height: 1.6;
}

/* Class added when block is open */
.blocks .block .block-text.is-open {
    max-height: 500px; 
    opacity: 1;
}

/* Class removed: .show-block-text.is-open-btn is no longer needed/used */

/* ---------------------------------- */
/* СТИЛИ ДЛЯ ФОРМЫ (CUSTOM QUESTION FORM) */
/* ---------------------------------- */

.contact-form-section {
    width: 90%;
    max-width: 600px; /* Ограничиваем ширину для лучшей читаемости формы */
    margin: 80px auto 120px auto; /* Центрируем и добавляем отступы */
    text-align: center;
    color: white;
}

.contact-form-section .form-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.contact-form-section .form-subtitle {
    font-size: 1.2rem;
    opacity: 0.8;
    margin-bottom: 30px;
}

/* Стили стеклянного контейнера формы */
.glass-form {
    padding: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5); 
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px);
    text-align: left;
}

.form-group {
    margin-bottom: 20px;
}

.glass-form label {
    display: block;
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 8px;
    opacity: 0.9;
}

.glass-form input[type="text"],
.glass-form input[type="email"],
.glass-form textarea {
    width: 100%;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.3); /* Темный фон внутри полей */
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: white;
    font-size: 1rem;
    transition: border-color 0.3s ease, background-color 0.3s ease;
    resize: vertical; /* Разрешить вертикальное изменение размера для textarea */
    box-sizing: border-box; /* Важно для padding */
}

.glass-form input:focus,
.glass-form textarea:focus {
    outline: none;
    border-color: #64b5f6; /* Неоновый акцент при фокусе */
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 5px rgba(100, 181, 246, 0.5);
}

.glass-form .submit-btn {
    width: 100%;
    padding: 15px;
    margin-top: 10px;
    background-color: white; 
    color: #1a1a1a; 
    border: none;
    border-radius: 8px;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
}

.glass-form .submit-btn:hover {
    background-color: #f0f0f0;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.form-message {
    margin-top: 20px;
    font-size: 1rem;
    text-align: center;
    opacity: 0; /* Изначально скрыто */
    transition: opacity 0.5s ease;
}

.form-message.success {
    color: #4caf50; /* Зеленый для успеха */
    opacity: 1;
}

.form-message.error {
    color: #f44336; /* Красный для ошибки */
    opacity: 1;
}

/* ---------------------------------- */
/* СТИЛИ ДЛЯ РАЗДЕЛИТЕЛЯ MARQUEE (после формы) */
/* ---------------------------------- */

/* 1. ОБЩИЕ СТИЛИ ДЛЯ ВСЕХ MARQUEE */
.logo-marquee,
.logo-marquee--reverse,
.logo-marquee--projects {
    /* **КРИТИЧЕСКОЕ ИЗМЕНЕНИЕ:** Устанавливаем 100% ширины */
    width: 130%; 
    /* Убираем ограничения родителя (main-content), 
       если они мешают, через absolute/fixed, но проще через 100% */
    
    /* Дополнительные стили, которые уже были, но без max-width */
    margin: 100px 0; /* Убираем 'auto' и ставим 0 по бокам */
    overflow: hidden; 
    position: relative;
    bottom: auto; 
    right: 200px;
}

/* СТИЛИ ДЛЯ РАЗДЕЛИТЕЛЯ ПОСЛЕ ФОРМЫ */
.logo-marquee--projects {
    margin: 60px 0 100px 0; /* Устанавливаем отступы сверху/снизу и 0 по бокам */
}

/* Убедитесь, что .main-content не ограничивает marquee: */     

/* ---------------------------------- */
/* СТИЛИ ДЛЯ СЕКЦИИ ПРОЕКТОВ */
/* ---------------------------------- */

.projects-section {
    width: 90%;
    max-width: 1190px;
    margin: 0 auto 120px auto; 
    text-align: center;
    color: white;
}

.projects-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 5px;
}

.projects-subtitle {
    font-size: 1.2rem;
    opacity: 0.8;
    margin-bottom: 60px;
}

/* Стили карточки проекта (контейнер) */
.project-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 80px;
    padding: 30px;
    background-color: rgba(255, 255, 255, 0.05); /* Легкий фон */
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Переворачиваем порядок для каждой второй карточки */
.project-card--reverse {
    flex-direction: row-reverse;
}

/* Блок с информацией */
.project-details {
    flex: 1;
    max-width: 50%;
    text-align: left;
    padding: 20px;
}

.project-image-wrapper {
    flex: 1;
    max-width: 50%;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}

.project-image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.project-image-wrapper:hover .project-image {
    transform: scale(1.05);
}

.project-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.project-logo {
    width: 60px;
    height: 60px;
    margin-right: 20px;
    object-fit: contain;
    border-radius: 10px;
}

.project-name {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    color: #ffffff; /* Яркий акцентный цвет */
}

.project-description {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 30px;
    opacity: 0.9;
}

.download-button {
    display: inline-block;
    padding: 12px 30px;
    background-color: white; 
    color: #1a1a1a; 
    text-decoration: none;
    border-radius: 8px;
    outline: none;
    border:  none;
    font-size: 1.1rem;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.download-button:hover {
    background-color: #e0e0e0;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.download-button--secondary {
    /* Дополнительный стиль для другой кнопки, если нужно */
    background-color: #ffffff;
    color: #1a1a1a;
}

.download-button--secondary:hover {
    background-color: #b9b9b9;
}

/* ---------------------------------- */
/* МЕДИА-ЗАПРОСЫ ДЛЯ АДАПТИВНОСТИ */
/* ---------------------------------- */

@media (max-width: 900px) {
    .project-card, .project-card--reverse {
        flex-direction: column; /* Складываем в колонку на мобильных */
        text-align: center;
        padding: 20px;
    }

    .project-details, .project-image-wrapper {
        max-width: 100%;
        padding: 0;
        margin-bottom: 20px;
    }
    
    .project-header {
        justify-content: center; /* Центрируем заголовок и логотип */
        margin-bottom: 20px;
    }
    
    .project-name {
        font-size: 1.8rem;
    }

    .project-description {
        text-align: center;
    }
}

/* ---------------------------------- */
/* СТИЛИ ДЛЯ АНИМАЦИИ ПОЯВЛЕНИЯ ПРИ СКРОЛЛЕ */
/* ---------------------------------- */

/* 1. БАЗОВЫЕ ПРАВИЛА (Скрытое состояние для всех анимируемых элементов) */
/* Это применяется к Блокам FAQ, Форме и Карточкам Проектов */
.about-us .blocks .block,
.glass-form, /* Анимируем контейнер формы */
.project-card {
    /* Увеличенный Y-СДВИГ: 70px для драматизма */
    opacity: 0;
    transform: translateY(70px); 
    
    /* ОБЩАЯ ДЛИТЕЛЬНОСТЬ: 0.8s, мягкое движение */
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); 

    /* Переменная для задержки (используется для эффекта домино) */
    transition-delay: var(--delay, 0s); 
}

/* 2. ВИДИМОЕ СОСТОЯНИЕ (Класс добавляется через JS) */
.about-us .blocks .block.is-visible,
.glass-form.is-visible,
.project-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 3. ЗАДЕРЖКА АНИМАЦИИ ДЛЯ БЛОКОВ FAQ (СТАГГЕРИНГ) */
/* Вам нужно убедиться, что эти стили есть в вашем файле */
.about-us .blocks .block:nth-child(1) { --delay: 0.0s; }
.about-us .blocks .block:nth-child(2) { --delay: 0.1s; }
.about-us .blocks .block:nth-child(3) { --delay: 0.2s; }
.about-us .blocks .block:nth-child(4) { --delay: 0.3s; }
.about-us .blocks .block:nth-child(5) { --delay: 0.4s; }
.about-us .blocks .block:nth-child(6) { --delay: 0.5s; }
.about-us .blocks .block:nth-child(7) { --delay: 0.6s; }
.about-us .blocks .block:nth-child(8) { --delay: 0.7s; }
.about-us .blocks .block:nth-child(9) { --delay: 0.8s; }

/* 4. ЗАДЕРЖКА АНИМАЦИИ ДЛЯ КАРТОЧЕК ПРОЕКТОВ */
.projects-section .project-card:nth-child(2) { --delay: 0.0s; } /* Заголовок идет первым, поэтому здесь child(2) */
.projects-section .project-card:nth-child(3) { --delay: 0.2s; }
.projects-section .project-card:nth-child(4) { --delay: 0.4s; }

/* ---------------------------------- */
/* СТИЛИ ДЛЯ ФИНАЛЬНОГО РАЗДЕЛИТЕЛЯ MARQUEE */
/* ---------------------------------- */

.logo-marquee--final {
    margin: 80px 0;
    /* Убедитесь, что анимация обратной прокрутки активирована */
    bottom: auto; 
}


/* ---------------------------------- */
/* СТИЛИ ДЛЯ СЕКЦИИ КОНТАКТНЫХ ССЫЛОК */
/* ---------------------------------- */

.contact-links-section {
    width: 90%;
    max-width: 1190px;
    margin: 0 auto 120px auto; 
    text-align: center;
    color: white;
}

.contact-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 5px;
}

.contact-subtitle {
    font-size: 1.2rem;
    opacity: 0.8;
    margin-bottom: 40px;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.contact-link-card {
    display: block;
    text-decoration: none;
    color: white;
    padding: 30px;
    border-radius: 15px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
    
    /* Начальное скрытое состояние для анимации */
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.3s ease;
    transition-delay: var(--delay, 0s); /* Используем для стаггеринга */
}

.contact-link-card:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

.contact-link-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.card-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 15px;
}

.card-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.card-text {
    font-size: 0.9rem;
    opacity: 0.7;
}

/* ---------------------------------- */
/* СТИЛИ ДЛЯ FOOTER (ПОДВАЛА) */
/* ---------------------------------- */

.site-footer {
    background-color: rgba(0, 0, 0, 0.6); /* Темный, полупрозрачный фон */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 50px 0 20px 0;
    color: white;
    width: 100%;
    margin-top: 0%;
}

.footer-content {
    width: 90%;
    max-width: 1190px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-logo .header-logo {
    font-size: 2rem;
}

.footer-nav {
    display: flex;
    gap: 30px;
}

.footer-nav-link {
    color: white;
    text-decoration: none;
    font-size: 1rem;
    opacity: 0.8;
    transition: opacity 0.3s ease, color 0.3s ease;
}

.footer-nav-link:hover {
    opacity: 1;
    color: #4dc4ff; /* Активируем лазурный акцент */
}

.footer-social .social-icon {
    color: white;
    text-decoration: none;
    margin-left: 20px;
    font-size: 1rem;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.footer-social .social-icon:hover {
    opacity: 1;
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    font-size: 0.85rem;
    opacity: 0.6;
}

/* ---------------------------------- */
/* МЕДИА-ЗАПРОСЫ ДЛЯ FOOTER */
/* ---------------------------------- */

@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
    }

    .footer-logo {
        margin-bottom: 20px;
    }

    .footer-nav {
        margin-bottom: 20px;
    }

    .footer-social {
        margin-top: 10px;
    }
    
    .footer-social .social-icon {
        margin: 0 10px;
    }
}   

.card-icon {
    font-size: 3rem; /* Сделает иконку Font Awesome большой */
    display: block;
    margin-bottom: 15px;
}

/* ========================================================= */
/* MAX-WIDTH 900PX: ПЛАНШЕТЫ И НОУТБУКИ */
/* ========================================================= */
@media (max-width: 900px) {

    /* --- ГЛАВНЫЙ КОНТЕНТ --- */
    .main-content {
        padding-top: 50px; /* Уменьшаем верхний отступ */
    }

    /* --- ЗАГОЛОВОК (HEADER) --- */
    .header-logo {
        font-size: 1.8rem;
    }

    /* --- ГЛАВНЫЙ БАННЕР (HERO) --- */
    .main-banner .text-group .title {
        font-size: 3rem; /* Чуть уменьшаем главный заголовок */
    }
    
    .main-banner .text-group .text {
        font-size: 1.1rem;
    }

    /* --- FAQ БЛОКИ --- */
    .about-us .blocks .block {
        padding: 20px 25px;
        min-height: auto;
    }
    
    .about-us .blocks .block .block-info .block-title {
        font-size: 1.2rem;
    }

    /* --- ФОРМА КОНТАКТОВ --- */
    .contact-form-section {
        max-width: 90%;
        margin: 60px auto;
    }

    /* --- СЕКЦИЯ ПРОЕКТОВ --- */
    /* Эти стили вы уже добавили, но на всякий случай, они должны быть здесь: */
    .project-card, .project-card--reverse {
        flex-direction: column; /* Складываем в колонку */
        text-align: center;
    }

    .project-details, .project-image-wrapper {
        max-width: 100%;
        padding: 0;
        margin-bottom: 20px;
    }
    
    .project-header {
        justify-content: center;
        margin-bottom: 20px;
    }
    
    .project-description {
        text-align: center;
    }
    
    /* --- КОНТАКТНЫЕ ССЫЛКИ (GRID) --- */
    .contact-grid {
        /* При 900px grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
           уже хорошо работает, но можно уменьшить минимальную ширину: */
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    /* --- ФУТЕР --- */
    .footer-content {
        flex-direction: column;
        text-align: center;
    }

    .footer-nav {
        margin: 20px 0;
    }
    
    .footer-social .social-icon {
        margin: 0 10px;
    }
}

/* ========================================================= */
/* MAX-WIDTH 550PX: МОБИЛЬНЫЕ ТЕЛЕФОНЫ */
/* ========================================================= */
@media (max-width: 550px) {
    
    /* --- ГЛАВНЫЙ БАННЕР (HERO) --- */
    .main-banner .text-group .title {
        font-size: 2.5rem; /* Еще уменьшаем */
    }

    .main-banner .text-group .text {
        font-size: 1rem;
    }
    
    .button-group {
        flex-direction: column; /* Кнопки друг под другом */
        gap: 15px;
    }
    
    .main-banner .button-group .btn {
        width: 100%;
        padding: 15px;
    }
    
    /* --- СЕКЦИЯ FAQ --- */
    .about-us .about-us-title {
        font-size: 2rem;
    }
    
    .about-us .blocks .block {
        padding: 15px 20px;
    }
    
    .about-us .blocks .block .block-info .block-title {
        font-size: 1.1rem;
    }
    
    .about-us .blocks .block .block-text .text {
        font-size: 1rem;
    }

    /* --- ФОРМА КОНТАКТОВ --- */
    .contact-form-section .form-title {
        font-size: 2rem;
    }

    .glass-form {
        padding: 25px;
    }
    
    /* --- СЕКЦИЯ ПРОЕКТОВ --- */
    .projects-title {
        font-size: 2.5rem;
    }
    
    .project-header {
        flex-direction: column;
    }

    .project-logo {
        margin-right: 0;
        margin-bottom: 10px;
    }
    
    /* --- КОНТАКТНЫЕ ССЫЛКИ (GRID) --- */
    .contact-grid {
        /* Делаем каждую карточку на полную ширину */
        grid-template-columns: 1fr; 
    }
    
    /* --- ФУТЕР --- */
    .footer-nav {
        flex-direction: column;
        gap: 15px;
    }
    
    .footer-social {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .footer-social .social-icon {
        margin: 0;
    }
}

/* ========================================================= */
/* MIN-WIDTH 1440PX: БОЛЬШИЕ ДЕСКТОПЫ И 4K */
/* ========================================================= */
@media (min-width: 1440px) {

    /* --- ОСНОВНЫЕ КОНТЕЙНЕРЫ --- */
    /* Увеличиваем максимальную ширину для всех секций, чтобы использовать больше места */
    .about-us,
    .projects-section,
    .contact-form-section,
    .contact-links-section,
    .footer-content {
        max-width: 1400px; /* Увеличиваем с 1190px до 1400px */
    }

    /* --- ГЛАВНЫЙ БАННЕР (HERO) --- */
    .main-banner .text-group .title {
        font-size: 4.5rem; /* Немного увеличиваем для лучшей видимости */
    }

    .main-banner .text-group .text {
        font-size: 1.4rem;
    }

    /* --- FAQ БЛОКИ --- */
    .about-us .about-us-title {
        font-size: 3rem;
    }
    
    .about-us .blocks .block .block-info .block-title {
        font-size: 1.5rem;
    }
    
    .about-us .blocks .block .block-text .text {
        font-size: 1.1rem;
    }

    /* --- СЕКЦИЯ ПРОЕКТОВ --- */
    .projects-title {
        font-size: 3.5rem;
    }

    .project-name {
        font-size: 2.2rem;
    }

    /* --- ФОРМА КОНТАКТОВ --- */
    .contact-form-section {
        max-width: 700px; /* Фиксируем форму, чтобы не растягивалась слишком сильно */
    }
    
    /* --- ФУТЕР --- */
    .footer-nav-link {
        font-size: 1.05rem;
    }
}

/* ================================== */
/* СТИЛИ ДЛЯ ОТДЕЛЬНОЙ СТРАНИЦЫ ПРОЕКТА */
/* ================================== */

/* 1. СЕКЦИЯ ГЕРОЯ ПРОЕКТА */
.project-hero {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 30px; /* Отступ от хедера */
    color: white;
    /* ФОН (Можно добавить уникальное фоновое изображение для каждой игры) */
}

.hero-content {
    max-width: 800px;
    padding: 40px;
    /* Стиль "стекла" */
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    
    /* УДАЛЕНЫ OPACITY И TRANSLATEY */
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: var(--delay, 0s);
}

.project-hero-logo {
    width: 120px;
    height: 120px;
    margin-bottom: 20px;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.project-hero-title {
    font-size: 4rem;
    font-weight: 900;
    margin-bottom: 10px;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

.project-hero-tagline {
    font-size: 1.5rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

.project-hero-button {
    /* Используем стили download-button с главной страницы */
    font-size: 1.3rem;
    padding: 15px 40px;
}

/* 2. СЕКЦИЯ ДЕТАЛЕЙ ПРОЕКТА (FAQ-Style Blocks) */

.project-details-section {
    width: 90%;
    max-width: 1190px;
    margin: 80px auto; 
    padding: 0;
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(45%, 1fr)); /* Две колонки на больших экранах */
    gap: 30px;
}

/* Стили для отдельных блоков деталей (похоже на FAQ-блок) */
.detail-block {
    padding: 30px;
    /* Стеклянный стиль */
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: background-color 0.3s ease, transform 0.3s ease; 
    text-align: left;
    color: white;
    
    /* УДАЛЕНЫ OPACITY И TRANSLATEY */
    transition: all 0.3s;
}

.detail-block:hover {
    transform: translateY(-5px);
    background-color: rgba(255, 255, 255, 0.2);
}

.detail-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.detail-title i {
    margin-right: 15px;
    font-size: 2rem;
    color: #ffffff; /* Акцентный цвет */
}

.detail-text,
.detail-list {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-left: 0;
    padding-left: 0;
    list-style: none; /* Убираем стандартные маркеры */
}

.detail-list li {
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
}

.detail-list li:before {
    content: "•"; /* Кастомный маркер */
    color: white; 
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

/* 3. СЕКЦИЯ ГАЛЕРЕИ МЕДИА */

.media-gallery-section {
    width: 90%;
    max-width: 1190px;
    margin: 80px auto 120px auto;
    text-align: center;
    color: white;
}

.gallery-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 40px;
    /* УДАЛЕНЫ OPACITY И TRANSLATEY */
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: var(--delay, 0s);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    /* УДАЛЕНЫ OPACITY И TRANSLATEY */
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: var(--delay, 0s);
}

.gallery-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
}

.gallery-image:hover {
    transform: scale(1.03);
}

/* МЕДИА-ЗАПРОСЫ ДЛЯ СТРАНИЦЫ ПРОЕКТА */
@media (max-width: 768px) {
    .project-hero-title {
        font-size: 3rem;
    }

    .project-hero-tagline {
        font-size: 1.2rem;
    }

    .hero-content {
        padding: 20px;
    }

    .details-grid {
        grid-template-columns: 1fr; /* Одна колонка на мобильных */
    }

    .detail-block {
        padding: 20px;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================================= */
/* RESPONSIVE ADAPTATION FOR BIGGER AND SMALLER SCREENS */
/* ========================================================= */

/* ========================================================= */
/* MAX-WIDTH 900PX: TABLETS AND SMALL LAPTOPS */
/* ========================================================= */
@media (max-width: 900px) {
    /* --- MAIN CONTENT --- */
    .main-content {
        padding-top: 50px; /* Reduce top padding */
    }

    /* --- HEADER --- */
    .header-logo {
        font-size: 1.8rem;
    }

    header .nav-links {
        gap: 40px; /* Reduce gap between nav links */
    }

    header .nav-links .nav-link {
        font-size: 18px; /* Slightly smaller font */
    }

    /* --- PROMO SECTION --- */
    .promo-content-section {
        flex-direction: column; /* Stack image and text vertically */
        gap: 30px; /* Increase gap for better spacing */
        margin: 100px auto 0 auto; /* Increase top margin to avoid overlap with header */
    }

    .promo-content-section .info-textes {
        margin-left: 0;
        padding: 25px 30px;
        max-width: 100%;
        text-align: center; /* Center text on smaller screens */
    }

    .promo-content-section .info-textes .title {
        font-size: 2rem;
    }

    .promo-content-section .info-textes .text {
        font-size: 1.2rem;
    }

    .promo-image {
        transform: translateX(0); /* Center the image */
        bottom: 0;
        margin: 0 auto;
        animation: none; /* Disable glow animation on smaller screens for simplicity */
    }

    /* --- ABOUT US SECTION --- */
    .about-us .about-us-title {
        font-size: 2rem;
    }

    .about-us .blocks .block {
        padding: 20px 25px;
        min-height: auto;
    }

    .about-us .blocks .block .block-info .block-title {
        font-size: 1.2rem;
    }

    /* --- CONTACT FORM --- */
    .contact-form-section {
        max-width: 90%;
        margin: 60px auto;
    }

    .contact-form-section .form-title {
        font-size: 2rem;
    }

    .glass-form {
        padding: 30px;
    }

    /* --- PROJECTS SECTION --- */
    .projects-section .project-card,
    .projects-section .project-card--reverse {
        flex-direction: column; /* Stack vertically */
        text-align: center;
        padding: 20px;
    }

    .projects-section .project-details,
    .projects-section .project-image-wrapper {
        max-width: 100%;
        padding: 0;
        margin-bottom: 20px;
    }

    .projects-section .project-header {
        justify-content: center;
        margin-bottom: 20px;
    }

    .projects-section .project-name {
        font-size: 1.8rem;
    }

    .projects-section .project-description {
        text-align: center;
    }

    /* --- CONTACT LINKS --- */
    .contact-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Adjust grid */
    }

    /* --- FOOTER --- */
    .footer-content {
        flex-direction: column;
        text-align: center;
    }

    .footer-logo .header-logo {
        font-size: 1.8rem;
    }

    .footer-nav {
        margin-bottom: 20px;
    }

    .footer-social .social-icon {
        margin: 0 10px;
    }

    /* --- PROJECT HERO --- */
    .project-hero-title {
        font-size: 3rem;
    }

    .project-hero-tagline {
        font-size: 1.2rem;
    }

    .hero-content {
        padding: 20px;
    }

    .details-grid {
        grid-template-columns: 1fr; /* Single column */
    }

    .detail-block {
        padding: 20px;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================================= */
/* MAX-WIDTH 550PX: MOBILE PHONES */
/* ========================================================= */
@media (max-width: 550px) {
    /* --- MAIN CONTENT --- */
    .main-content {
        padding-top: 30px;
    }

    /* --- HEADER --- */
    header {
        padding: 10px 20px;
        margin: 10px auto 0 auto; /* Reduce header margin */
    }

    .header-logo {
        font-size: 1.5rem;
    }

    header .nav-links {
        gap: 20px;
        flex-wrap: wrap; /* Allow wrapping if needed */
    }

    header .nav-links .nav-link {
        font-size: 16px;
    }

    /* --- PROMO SECTION --- */
    .promo-content-section {
        gap: 20px; /* Smaller gap on mobile */
        margin: 80px auto 0 auto; /* Adjust top margin for mobile */
    }

    .promo-content-section .info-textes {
        padding: 20px;
    }

    .promo-content-section .info-textes .title {
        font-size: 1.8rem;
    }

    .promo-content-section .info-textes .text {
        font-size: 1rem;
    }

    .promo-image {
        width: 80%; /* Make image smaller on mobile */
        max-width: 300px; /* Limit max width */
    }

    /* --- ABOUT US SECTION --- */
    .about-us .about-us-title {
        font-size: 1.8rem;
    }

    .about-us .blocks .block {
        padding: 15px 20px;
        margin: 15px auto;
    }

    .about-us .blocks .block .block-info .block-title {
        font-size: 1.1rem;
    }

    .about-us .blocks .block .block-text .text {
        font-size: 1rem;
    }

    /* --- CONTACT FORM --- */
    .contact-form-section .form-title {
        font-size: 1.8rem;
    }

    .contact-form-section .form-subtitle {
        font-size: 1rem;
    }

    .glass-form {
        padding: 20px;
    }

    .form-group label {
        font-size: 1rem;
    }

    .glass-form input[type="text"],
    .glass-form input[type="email"],
    .glass-form textarea {
        padding: 12px;
        font-size: 0.9rem;
    }

    .glass-form .submit-btn {
        padding: 12px;
        font-size: 1.1rem;
    }

    /* --- PROJECTS SECTION --- */
    .projects-title {
        font-size: 2.2rem;
    }

    .projects-subtitle {
        font-size: 1rem;
    }

    .project-header {
        flex-direction: column;
    }

    .project-logo {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .project-name {
        font-size: 1.6rem;
    }

    .project-description {
        font-size: 1rem;
    }

    .download-button {
        padding: 10px 25px;
        font-size: 1rem;
    }

    /* --- CONTACT LINKS --- */
    .contact-title {
        font-size: 2.5rem;
    }

    .contact-subtitle {
        font-size: 1rem;
    }

    .contact-grid {
        grid-template-columns: 1fr; /* Single column */
        gap: 20px;
    }

    .contact-link-card {
        padding: 20px;
    }

    .card-icon {
        font-size: 2.5rem;
    }

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

    .card-text {
        font-size: 0.85rem;
    }

    /* --- FOOTER --- */
    .site-footer {
        padding: 30px 0 10px 0;
    }

    .footer-content {
        padding-bottom: 20px;
    }

    .footer-logo .header-logo {
        font-size: 1.5rem;
    }

    .footer-nav {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 15px;
    }

    .footer-nav-link {
        font-size: 0.9rem;
    }

    .footer-social {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .footer-social .social-icon {
        margin: 0;
        font-size: 0.9rem;
    }

    .footer-bottom {
        padding-top: 15px;
        font-size: 0.75rem;
    }

    /* --- PROJECT HERO --- */
    .project-hero-title {
        font-size: 2.5rem;
    }

    .project-hero-tagline {
        font-size: 1rem;
    }

    .hero-content {
        padding: 15px;
    }

    .project-hero-logo {
        width: 100px;
        height: 100px;
    }

    .project-hero-button {
        font-size: 1.1rem;
        padding: 12px 30px;
    }

    .detail-block {
        padding: 15px;
    }

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

    .detail-text,
    .detail-list {
        font-size: 1rem;
    }

    .gallery-title {
        font-size: 2rem;
    }
}

/* ========================================================= */
/* MIN-WIDTH 1440PX: LARGE DESKTOPS AND 4K */
/* ========================================================= */
@media (min-width: 1440px) {
    /* --- MAIN CONTAINERS --- */
    .about-us,
    .projects-section,
    .contact-form-section,
    .contact-links-section,
    .footer-content,
    .project-details-section,
    .media-gallery-section {
        max-width: 1400px; /* Increase max-width for larger screens */
    }

    /* --- HEADER --- */
    .header-logo {
        font-size: 2.5rem;
    }

    header .nav-links .nav-link {
        font-size: 22px;
    }

    /* --- PROMO SECTION --- */
    .promo-content-section .info-textes .title {
        font-size: 3rem;
    }

    .promo-content-section .info-textes .text {
        font-size: 1.5rem;
    }

    /* --- ABOUT US SECTION --- */
    .about-us .about-us-title {
        font-size: 3rem;
    }

    .about-us .blocks .block .block-info .block-title {
        font-size: 1.6rem;
    }

    .about-us .blocks .block .block-text .text {
        font-size: 1.2rem;
    }

    /* --- PROJECTS SECTION --- */
    .projects-title {
        font-size: 3.5rem;
    }

    .projects-subtitle {
        font-size: 1.3rem;
    }

    .project-name {
        font-size: 2.3rem;
    }

    .project-description {
        font-size: 1.2rem;
    }

    /* --- CONTACT FORM --- */
    .contact-form-section {
        max-width: 700px; /* Keep form narrower */
    }

    .contact-form-section .form-title {
        font-size: 2.8rem;
    }

    .glass-form {
        padding: 50px;
    }

    /* --- CONTACT LINKS --- */
    .contact-title {
        font-size: 3.5rem;
    }

    .contact-subtitle {
        font-size: 1.3rem;
    }

    .contact-link-card {
        padding: 35px;
    }

    .card-icon {
        font-size: 4rem;
    }

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

    .card-text {
        font-size: 1rem;
    }

    /* --- FOOTER --- */
    .footer-logo .header-logo {
        font-size: 2.2rem;
    }

    .footer-nav-link {
        font-size: 1.1rem;
    }

    /* --- PROJECT HERO --- */
    .project-hero-title {
        font-size: 5rem;
    }

    .project-hero-tagline {
        font-size: 1.8rem;
    }

    .hero-content {
        padding: 50px;
    }

    .project-hero-logo {
        width: 140px;
        height: 140px;
    }

    .project-hero-button {
        font-size: 1.4rem;
        padding: 16px 45px;
    }

    .detail-block {
        padding: 35px;
    }

    .detail-title {
        font-size: 2rem;
    }

    .detail-text,
    .detail-list {
        font-size: 1.2rem;
    }

    .gallery-title {
        font-size: 3rem;
    }

    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Larger grid items */
    }
}

.modal {
    display: none; /* Скрыто по умолчанию */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Полупрозрачный черный фон */
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 2em;
    text-align: center;
}

/* Стили для закрытия модального окна при клике на фон */
.modal-content {
    padding: 20px;
    background-color: rgba(0, 0, 0, 0); /* прозрачный */
    cursor: pointer;
}

.our-story {
    width: 90%;
    max-width: 1190px;
    margin: 40px auto;
    padding: 20px;
    text-align: center;
    color: white;
    position: relative;
    bottom: 90px;
}

.our-story-div{
    padding: 20px 40px;
    width: 90%;
    height: auto; 
    min-height: 85px; 
    margin: 20px auto;
    border-radius: 15px;
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: background-color 0.3s ease, transform 0.3s ease; 
    transition-delay: var(--delay, 0s);
    
}

.our-story-div:hover {
    transform: translateY(-5px);
    background-color: rgba(255, 255, 255, 0.2);
}


.our-story-div{
    font-size: 1.2rem;
    line-height: 1.6;
    text-align: left;
}

/* Добавьте это, чтобы заголовок истории соответствовал стилю about-us-title */
.our-story-div h3.story-section-title {
    /* Используем те же стили, что и для аккордеона, чтобы обеспечить считывание истории */
    font-size: 1.8rem;
    font-weight: 700;
    margin-top: 30px;
    margin-bottom: 15px;
    text-align: left; /* Важно для длинного текста */
    color: #ffffff;
}

/* Применяем стили из аккордеона к основному тексту для хорошей читаемости */
.our-story-div p.our-story-text {
    font-size: 1.1rem;
    opacity: 0.9;
    line-height: 1.6;
    margin-bottom: 15px; /* Отступ между параграфами */
    text-align: left;
}

/* Стили для разделительной линии (аналог --- в вашем тексте) */
.story-separator {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin: 40px 0;
}

/* Стили для списка в секции Play-Test */
.story-list {
    font-size: 1.1rem;
    opacity: 0.9;
    line-height: 1.6;
    margin: 10px 0 15px 20px;
    text-align: left;
}

/* ---------------------------------- */
/* STYLES FOR DONATION SECTION */
/* ---------------------------------- */

/* Убеждаемся, что контейнер для опций центрирован */
.donation-container {
    text-align: center; /* Центрирует текст внутри стеклянного блока */
}

.donation-options {
    margin-bottom: 30px;
}

/* Общий стиль для всех донатных кнопок */
.donation-button {
    display: inline-block;
    padding: 15px 35px;
    margin: 10px 0;
    border-radius: 10px;
    font-size: 1.3rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    /* Эффект свечения */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1); 
}

/* 1. Primary Button (Buy Us a Coffee) - Яркий акцент */
.primary-donation-btn {
    color: #000000; /* Черный текст для контраста */
    background: white; /* Яркий желтый (типичный для "кофе") */
}

.primary-donation-btn:hover {
    background: #ffffff; /* Белый фон при наведении */
    border-color: #ffffff;
    transform: translateY(-3px) scale(1.02);
    /* Добавляем кибер-неоновое свечение */
}

/* 2. Secondary Button (Patreon/Alternative) - Менее яркий, в стеклянном стиле */
.secondary-donation-btn {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1); /* Прозрачный стеклянный фон */
    border: 2px solid rgba(255, 255, 255, 0.4);
    font-size: 1.1rem;
    padding: 10px 25px;
}

.secondary-donation-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: #ffffff;
    transform: scale(1.05);
}


/* Текст альтернативных опций */
.alternative-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    margin: 20px 0 10px 0;
}

/* Информационный текст (Note) */
.donation-info {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ---------------------------------- */
/* ⚡ MODAL WINDOW STYLES (Azure Studios Style) */
/* ---------------------------------- */

/* КРИТИЧЕСКИЙ БЛОК ДЛЯ МОДАЛЬНОГО ОКНА */
.modal-overlay {
    display: none; 
    
    /* КЛЮЧЕВОЕ ИЗМЕНЕНИЕ: position: absolute для следования за прокруткой */
    position: fixed; 
    
    /* top, left, width, height будут установлены через JavaScript при открытии */
    left: 0;
    width: 100%;
    
    z-index: 990; 
    
    /* ЦЕНТРИРОВАНИЕ (ВАЖНО! Оно центрирует контент внутри оверлея) */
    align-items: center;      
    justify-content: center;  
    
    background-color: rgba(0, 0, 0, 0.7); 
    backdrop-filter: blur(5px);
}

.modal-overlay.is-open {
    display: flex;
    visibility: visible;
    opacity: 1;
    /* Высокий z-index, чтобы перекрывать контент страницы */
    z-index: 999; 
    transition: opacity 0.3s ease;
}

/* Стили для контейнера модального окна (использует .glass-form) */
.modal-content {
    position: relative;
    max-width: 450px; /* Уменьшаем ширину */
    width: 90%;
    padding: 30px; /* Чуть меньше паддинг */
    text-align: left;
    z-index: 1001;
    color: white;
}

.no-scroll {
    overflow: hidden;
}

.modal-title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 20px;
    text-align: center;
}

/* Кнопка закрытия */
.close-modal-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    background: none;
    border: none;
    color: white;
    font-size: 30px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.close-modal-btn:hover {
    opacity: 1;
}

/* Стили для инпутов в стиле Azure/Glass */
.glass-input {
    width: 100%;
    padding: 12px 15px;
    margin-top: 5px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.3); /* Тонкая стеклянная граница */
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.08); /* Очень легкий стеклянный фон */
    color: white;
    font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.glass-input:focus {
    outline: none;
    border-color: #ffffff; /* Неоновый эффект при фокусе */
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

/* Placeholder (красивый английский) */
.glass-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Стили для лейблов */
.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

/* Сообщение об ошибке */
.error-message {
    color: #ff6b6b; /* Красный цвет ошибки */
    font-size: 0.9rem;
    margin-top: -10px;
    margin-bottom: 10px;
    text-align: center;
    visibility: hidden;
}

/* Стили для шаблона карты */
.payment-note {
    text-align: center;
    color: #ffdd00;
    font-weight: 700;
    margin-bottom: 20px;
}
.split-group {
    display: flex;
    gap: 20px;
}
.split-item {
    flex: 1;
}
.disabled-btn {
    opacity: 0.6;
    cursor: not-allowed;
}
.hidden-payment {
    display: none;
}