/* ========== ОСНОВНЫЕ СТИЛИ И СБРОС ========== */

/* Сбрасываем стандартные отступы и padding для всех элементов */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Основные стили для body */
body {
    font-family: 'Inter', 'Arial', sans-serif; /* Шрифты в порядке приоритета */
    line-height: 1.6; /* Межстрочный интервал */
    color: #2c3e50; /* Основной цвет текста */
    background: #ffffff; /* Белый фон */
    overflow-x: hidden; /* Скрываем горизонтальный скролл */
}

/* ========== ЦВЕТОВАЯ ПАЛИТРА ========== */
:root {
    --turquoise: #40e0d0;        /* Основной бирюзовый */
    --turquoise-dark: #20b2aa;   /* Темный бирюзовый */
    --turquoise-light: #afeeee;  /* Светлый бирюзовый */
    --white: #ffffff;            /* Белый */
    --gray-light: #f8f9fa;       /* Светло-серый */
    --gray: #6c757d;             /* Серый */
    --dark: #2c3e50;             /* Темный синий */
}

/* ========== ОСНОВНОЙ КОНТЕЙНЕР ========== */
.container {
    max-width: 1200px;    /* Максимальная ширина контента */
    margin: 0 auto;       /* Центрирование по горизонтали */
    padding: 0 20px;      /* Отступы по бокам */
}

/* ========== HEADER STYLES ========== */
header {
    background: transparent;     /* Прозрачный фон */
    position: fixed;             /* Фиксированное позиционирование */
    width: 100%;                 /* На всю ширину */
    top: 0;                      /* Прижат к верху */
    z-index: 1000;               /* Поверх других элементов */
    backdrop-filter: blur(10px); /* Размытие фона */
    transition: background 0.3s ease; /* Плавное изменение фона */
}

/* Класс для хедера при скролле */
header.scrolled {
    background: var(--white);         /* Белый фон */
    box-shadow: 0 2px 30px rgba(0,0,0,0.08); /* Тень */
}

/* Навигация */
nav {
    display: flex;                  /* Flexbox для выравнивания */
    justify-content: space-between; /* Распределение по краям */
    align-items: center;            /* Вертикальное выравнивание */
    padding: 1.5rem 0;             /* Внутренние отступы */
}

/* Логотип */
.logo {
    font-size: 1.8rem;     /* Размер шрифта */
    font-weight: 700;      /* Жирное начертание */
    color: var(--white);   /* Белый цвет */
    display: flex;         /* Flexbox для иконки и текста */
    align-items: center;   /* Выравнивание по центру */
    gap: 0.5rem;          /* Расстояние между элементами */
    transition: color 0.3s ease; /* Плавное изменение цвета */
}

/* Логотип при скролле */
header.scrolled .logo {
    color: var(--turquoise-dark); /* Бирюзовый цвет */
}

/* Иконка перед логотипом */
.logo::before {
    content: "🏔️";        /* Эмодзи горы */
    font-size: 1.5rem;     /* Размер иконки */
}

/* Навигационные ссылки */
.nav-links {
    display: flex;          /* Flexbox для горизонтального расположения */
    list-style: none;       /* Убираем маркеры списка */
    gap: 2.5rem;           /* Расстояние между ссылками */
}

.nav-links a {
    text-decoration: none;  /* Убираем подчеркивание */
    color: var(--white);    /* Белый цвет */
    font-weight: 500;       /* Средняя жирность */
    transition: color 0.3s ease; /* Плавное изменение цвета */
    position: relative;     /* Для псевдоэлемента */
}

/* Ссылки при скролле */
header.scrolled .nav-links a {
    color: var(--dark);     /* Темный цвет */
}

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

/* Расширение подчеркивания при наведении */
.nav-links a:hover::after {
    width: 100%;           /* На всю ширину */
}

.nav-links a:hover {
    color: var(--turquoise); /* Бирюзовый цвет при наведении */
}

/* Стили для кнопки sample в навигации */
.nav-links .sample-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 20px;
    background: var(--turquoise);
    color: var(--white);
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(64, 224, 208, 0.3);
    position: relative;
    overflow: hidden;
}

.nav-links .sample-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s;
}

.nav-links .sample-button:hover::before {
    left: 100%;
}

.nav-links .sample-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(64, 224, 208, 0.5);
    background: var(--turquoise-dark);
}

/* ========== HERO SECTION STYLES ========== */
.hero {
    height: 100vh;         /* Высота на весь экран */
    display: flex;          /* Flexbox для центрирования */
    align-items: center;    /* Вертикальное центрирование */
    justify-content: center; /* Горизонтальное центрирование */
    text-align: center;     /* Выравнивание текста по центру */
    position: relative;     /* Для позиционирования дочерних элементов */
    overflow: hidden;       /* Скрываем переполнение */
}

/* Фон героя */
.hero-background {
    position: absolute;     /* Абсолютное позиционирование */
    top: 0;                /* Сверху */
    left: 0;               /* Слева */
    width: 100%;           /* На всю ширину */
    height: 100%;          /* На всю высоту */
    z-index: 1;            /* Под контентом */
    background-image: url('up.png'); /* Фоновое изображение */
    background-size: cover; /* Растягиваем на всю область */
    background-position: center; /* Центрируем */
    background-repeat: no-repeat; /* Без повторения */
}

/* Наложение для лучшей читаемости */
.hero-overlay {
    position: absolute;     /* Абсолютное позиционирование */
    top: 0;                /* Сверху */
    left: 0;               /* Слева */
    width: 100%;           /* На всю ширину */
    height: 100%;          /* На всю высоту */
    background: linear-gradient( /* Градиент */
        135deg,
        rgba(64, 224, 208, 0.3) 0%,
        rgba(32, 178, 170, 0.5) 50%,
        rgba(175, 238, 238, 0.3) 100%
    );
    z-index: 2;            /* Между фоном и контентом */
}

/* Контент героя */
.hero-content {
    position: relative;    /* Относительное позиционирование */
    z-index: 3;           /* Поверх всего */
    max-width: 800px;     /* Максимальная ширина */
}

/* Заголовок героя */
.hero-content h1 {
    font-size: 4.5rem;    /* Большой размер шрифта */
    font-weight: 800;     /* Очень жирное начертание */
    margin-bottom: 1.5rem; /* Отступ снизу */
    color: var(--white);  /* Белый цвет */
    text-shadow: 0 4px 20px rgba(0,0,0,0.3); /* Тень текста */
    animation: titleGlow 3s ease-in-out infinite alternate; /* Анимация */
}

/* Анимация свечения заголовка */
@keyframes titleGlow {
    0% {
        text-shadow: 0 4px 20px rgba(0,0,0,0.3);
    }
    100% {
        text-shadow: 0 4px 30px rgba(255,255,255,0.4);
    }
}

/* Слоган */
.hero-content .slogan {
    font-size: 2.2rem;    /* Размер шрифта */
    margin-bottom: 2rem;  /* Отступ снизу */
    color: var(--white);  /* Белый цвет */
    font-weight: 300;     /* Светлое начертание */
    letter-spacing: -0.5px; /* Уменьшение межбуквенного расстояния */
    text-shadow: 0 2px 10px rgba(0,0,0,0.3); /* Тень текста */
    animation: slideIn 1s ease-out; /* Анимация появления */
}

/* Описание */
.hero-description {
    font-size: 1.3rem;    /* Размер шрифта */
    color: var(--white);  /* Белый цвет */
    max-width: 600px;     /* Максимальная ширина */
    margin: 0 auto 3rem;  /* Центрирование и отступ */
    line-height: 1.8;     /* Межстрочный интервал */
    text-shadow: 0 2px 8px rgba(0,0,0,0.3); /* Тень текста */
    animation: slideIn 1s ease-out 0.2s both; /* Анимация с задержкой */
}

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

/* Контейнер для кнопок в герое */
.hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Кнопка призыва к действию */
.cta-button {
    display: inline-flex;     /* Flexbox для выравнивания */
    align-items: center;      /* Выравнивание по центру */
    gap: 0.5rem;             /* Расстояние между элементами */
    padding: 18px 35px;      /* Внутренние отступы */
    background: var(--white); /* Белый фон */
    color: var(--turquoise-dark); /* Бирюзовый текст */
    text-decoration: none;    /* Убираем подчеркивание */
    border-radius: 50px;      /* Закругленные углы */
    font-weight: 600;         /* Жирное начертание */
    font-size: 1.1rem;        /* Размер шрифта */
    transition: all 0.3s ease; /* Плавные переходы */
    box-shadow: 0 10px 30px rgba(255,255,255,0.3); /* Тень */
    position: relative;       /* Для псевдоэлемента */
    overflow: hidden;         /* Скрываем переполнение */
    animation: slideIn 1s ease-out 0.4s both; /* Анимация с задержкой */
}

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

/* Движение блика при наведении */
.cta-button:hover::before {
    left: 100%;              /* Вправо за пределы */
}

.cta-button:hover {
    transform: translateY(-3px); /* Поднимаем кнопку */
    box-shadow: 0 15px 40px rgba(255,255,255,0.4); /* Увеличиваем тень */
}

/* Стили для кнопки sample */
.sample-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 15px 30px;
    background: var(--turquoise);
    color: var(--white);
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(64, 224, 208, 0.3);
    position: relative;
    overflow: hidden;
}

.sample-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s;
}

.sample-button:hover::before {
    left: 100%;
}

.sample-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(64, 224, 208, 0.5);
    background: var(--turquoise-dark);
}

/* ========== ABOUT SECTION STYLES ========== */
.about-section {
    padding: 120px 0;        /* Большие отступы сверху и снизу */
    background: linear-gradient(135deg, var(--white) 0%, var(--gray-light) 100%); /* Градиентный фон */
    position: relative;       /* Для позиционирования */
    overflow: hidden;         /* Скрываем переполнение */
}

/* Контейнер about */
.about-container {
    display: grid;           /* CSS Grid для layout */
    grid-template-columns: 1fr 1fr; /* Две колонки */
    gap: 4rem;              /* Расстояние между колонками */
    align-items: center;     /* Выравнивание по вертикали */
}

/* Заголовок about */
.about-content h2 {
    font-size: 3rem;        /* Размер шрифта */
    font-weight: 700;       /* Жирное начертание */
    margin-bottom: 2rem;    /* Отступ снизу */
    color: var(--dark);     /* Темный цвет */
    position: relative;     /* Для псевдоэлемента */
}

/* Подчеркивание заголовка */
.about-content h2::after {
    content: '';            /* Пустой контент */
    position: absolute;     /* Абсолютное позиционирование */
    bottom: -10px;         /* Снизу от текста */
    left: 0;               /* Слева */
    width: 80px;           /* Ширина линии */
    height: 4px;           /* Высота линии */
    background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark)); /* Градиент */
    border-radius: 2px;     /* Закругленные края */
}

/* Текст about */
.about-text {
    font-size: 1.2rem;      /* Размер шрифта */
    color: var(--gray);     /* Серый цвет */
    line-height: 1.8;       /* Межстрочный интервал */
    margin-bottom: 2rem;    /* Отступ снизу */
}

/* Контейнер для кнопки в about */
.about-button-container {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* Сетка преимуществ */
.about-features {
    display: grid;          /* CSS Grid */
    grid-template-columns: repeat(2, 1fr); /* Две колонки */
    gap: 1.5rem;           /* Расстояние между элементами */
    margin-top: 2rem;      /* Отступ сверху */
}

/* Элемент преимущества */
.feature-item {
    display: flex;          /* Flexbox для выравнивания */
    align-items: flex-start; /* Выравнивание по верху */
    gap: 1rem;             /* Расстояние между иконкой и текстом */
    padding: 1.5rem;       /* Внутренние отступы */
    background: var(--white); /* Белый фон */
    border-radius: 15px;   /* Закругленные углы */
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); /* Тень */
    transition: all 0.3s ease; /* Плавные переходы */
}

/* Эффект при наведении на преимущество */
.feature-item:hover {
    transform: translateY(-5px); /* Поднимаем элемент */
    box-shadow: 0 10px 30px rgba(64, 224, 208, 0.15); /* Тень с бирюзовым оттенком */
}

/* Иконка преимущества */
.feature-icon {
    font-size: 2rem;       /* Размер иконки */
    flex-shrink: 0;        /* Запрещаем сжатие */
    animation: featurePulse 3s ease-in-out infinite; /* Анимация пульсации */
}

/* Анимация пульсации иконки */
@keyframes featurePulse {
    0%, 100% { transform: scale(1); } /* Нормальный размер */
    50% { transform: scale(1.1); }    /* Увеличение */
}

/* Заголовок преимущества */
.feature-content h4 {
    font-size: 1.1rem;     /* Размер шрифта */
    font-weight: 600;      /* Жирное начертание */
    margin-bottom: 0.5rem; /* Отступ снизу */
    color: var(--dark);    /* Темный цвет */
}

/* Текст преимущества */
.feature-content p {
    font-size: 0.9rem;     /* Размер шрифта */
    color: var(--gray);    /* Серый цвет */
    line-height: 1.5;      /* Межстрочный интервал */
}

/* Визуальная часть about (3D модель) */
.about-visual {
    position: relative;     /* Относительное позиционирование */
    height: 500px;         /* Высота */
    border-radius: 20px;   /* Закругленные углы */
    overflow: hidden;      /* Скрываем переполнение */
    box-shadow: 0 20px 50px rgba(0,0,0,0.1); /* Тень */
}

/* ========== DEVELOPMENT SECTION STYLES ========== */
.development-section {
    padding: 120px 0;      /* Большие отступы */
    background: var(--white); /* Белый фон */
    position: relative;     /* Для позиционирования */
    overflow: hidden;       /* Скрываем переполнение */
}

/* Контейнер development */
.development-container {
    display: grid;         /* CSS Grid */
    grid-template-columns: 1fr 1fr; /* Две колонки */
    gap: 4rem;            /* Расстояние между колонками */
    align-items: center;   /* Выравнивание по вертикали */
}

/* Заголовок development */
.development-content h2 {
    font-size: 3rem;      /* Размер шрифта */
    font-weight: 700;     /* Жирное начертание */
    margin-bottom: 2rem;  /* Отступ снизу */
    color: var(--dark);   /* Темный цвет */
    position: relative;   /* Для псевдоэлемента */
}

/* Подчеркивание заголовка */
.development-content h2::after {
    content: '';          /* Пустой контент */
    position: absolute;   /* Абсолютное позиционирование */
    bottom: -10px;       /* Снизу от текста */
    left: 0;             /* Слева */
    width: 80px;         /* Ширина линии */
    height: 4px;         /* Высота линии */
    background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark)); /* Градиент */
    border-radius: 2px;   /* Закругленные края */
}

/* Текст development */
.development-text {
    font-size: 1.2rem;    /* Размер шрифта */
    color: var(--gray);   /* Серый цвет */
    line-height: 1.8;     /* Межстрочный интервал */
    margin-bottom: 2rem;  /* Отступ снизу */
}

/* Шаги разработки */
.development-steps {
    display: flex;         /* Flexbox */
    flex-direction: column; /* Вертикальное направление */
    gap: 1.5rem;          /* Расстояние между шагами */
    margin-top: 2rem;     /* Отступ сверху */
}

/* Отдельный шаг */
.development-step {
    display: flex;         /* Flexbox для выравнивания */
    align-items: flex-start; /* Выравнивание по верху */
    gap: 1rem;            /* Расстояние между номером и текстом */
    padding: 1.5rem;      /* Внутренние отступы */
    background: var(--gray-light); /* Светло-серый фон */
    border-radius: 15px;  /* Закругленные углы */
    transition: all 0.3s ease; /* Плавные переходы */
}

/* Эффект при наведении на шаг */
.development-step:hover {
    transform: translateX(5px); /* Сдвиг вправо */
    box-shadow: 0 10px 30px rgba(64, 224, 208, 0.1); /* Тень */
}

/* Номер шага */
.step-number {
    width: 40px;          /* Ширина */
    height: 40px;         /* Высота */
    background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark)); /* Градиент */
    border-radius: 50%;   /* Круг */
    display: flex;        /* Flexbox для центрирования */
    align-items: center;  /* Вертикальное центрирование */
    justify-content: center; /* Горизонтальное центрирование */
    font-size: 1.2rem;    /* Размер шрифта */
    font-weight: 700;     /* Жирное начертание */
    color: var(--white);  /* Белый цвет */
    flex-shrink: 0;       /* Запрещаем сжатие */
}

/* Заголовок шага */
.step-content h4 {
    font-size: 1.1rem;    /* Размер шрифта */
    font-weight: 600;     /* Жирное начертание */
    margin-bottom: 0.5rem; /* Отступ снизу */
    color: var(--dark);   /* Темный цвет */
}

/* Текст шага */
.step-content p {
    font-size: 0.9rem;    /* Размер шрифта */
    color: var(--gray);   /* Серый цвет */
    line-height: 1.5;     /* Межстрочный интервал */
}

/* Визуальная часть development */
.development-visual {
    position: relative;    /* Относительное позиционирование */
    height: 500px;        /* Высота */
    border-radius: 20px;  /* Закругленные углы */
    overflow: hidden;     /* Скрываем переполнение */
    box-shadow: 0 20px 50px rgba(0,0,0,0.1); /* Тень */
}

.development-visual img {
    width: 100%;          /* На всю ширину */
    height: 100%;         /* На всю высоту */
    object-fit: cover;    /* Растягиваем с сохранением пропорций */
}

/* ========== TEAM SECTION STYLES ========== */
.team-section {
    padding: 120px 0;     /* Большие отступы */
    background: var(--white); /* Белый фон */
    text-align: center;   /* Выравнивание текста по центру */
}

.team-section h2 {
    font-size: 3rem;      /* Размер шрифта */
    font-weight: 700;     /* Жирное начертание */
    margin-bottom: 4rem;  /* Отступ снизу */
    color: var(--dark);   /* Темный цвет */
    position: relative;   /* Для псевдоэлемента */
}

/* Подчеркивание заголовка команды */
.team-section h2::after {
    content: '';          /* Пустой контент */
    position: absolute;   /* Абсолютное позиционирование */
    bottom: -15px;       /* Снизу от текста */
    left: 50%;           /* По центру */
    transform: translateX(-50%); /* Сдвиг для точного центрирования */
    width: 80px;         /* Ширина линии */
    height: 4px;         /* Высота линии */
    background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark)); /* Градиент */
    border-radius: 2px;   /* Закругленные края */
}

/* Сетка команды */
.team-grid {
    display: grid;        /* CSS Grid */
    grid-template-columns: repeat(5, 1fr); /* 5 колонок */
    gap: 1.5rem;         /* Расстояние между карточками */
    margin-top: 3rem;    /* Отступ сверху */
}

/* Карточка члена команды */
.team-member {
    background: var(--white); /* Белый фон */
    border-radius: 20px; /* Закругленные углы */
    padding: 2rem 1.5rem; /* Внутренние отступы */
    box-shadow: 0 10px 40px rgba(0,0,0,0.05); /* Тень */
    transition: all 0.3s ease; /* Плавные переходы */
    position: relative;   /* Для позиционирования */
    overflow: hidden;     /* Скрываем переполнение */
    display: flex;        /* Flexbox */
    flex-direction: column; /* Вертикальное направление */
    align-items: center;  /* Выравнивание по центру */
    height: 100%;         /* На всю высоту */
    border: 1px solid rgba(64, 224, 208, 0.1); /* Бирюзовая рамка */
}

/* Эффект при наведении на карточку */
.team-member:hover {
    transform: translateY(-10px); /* Поднимаем карточку */
    box-shadow: 0 20px 50px rgba(64, 224, 208, 0.15); /* Тень с бирюзовым оттенком */
}

/* Фото члена команды */
.member-photo {
    width: 120px;         /* Ширина */
    height: 120px;        /* Высота */
    border-radius: 50%;   /* Круг */
    margin: 0 auto 1.5rem; /* Центрирование и отступ */
    overflow: hidden;     /* Скрываем переполнение */
    border: 4px solid var(--turquoise-light); /* Бирюзовая рамка */
    background: var(--gray-light); /* Серый фон если нет фото */
    display: flex;        /* Flexbox для центрирования */
    align-items: center;  /* Вертикальное центрирование */
    justify-content: center; /* Горизонтальное центрирование */
    font-size: 2.5rem;    /* Размер эмодзи */
    color: var(--turquoise); /* Бирюзовый цвет */
    flex-shrink: 0;       /* Запрещаем сжатие */
}

.member-photo img {
    width: 100%;          /* На всю ширину */
    height: 100%;         /* На всю высоту */
    object-fit: cover;    /* Растягиваем с сохранением пропорций */
}

/* Имя члена команды */
.member-name {
    font-size: 1.2rem;    /* Размер шрифта */
    font-weight: 600;     /* Жирное начертание */
    margin-bottom: 0.5rem; /* Отступ снизу */
    color: var(--dark);   /* Темный цвет */
    text-align: center;   /* Выравнивание по центру */
}

/* Роль члена команды */
.member-role {
    font-size: 0.95rem;   /* Размер шрифта */
    color: var(--turquoise-dark); /* Бирюзовый цвет */
    margin-bottom: 1rem;  /* Отступ снизу */
    font-weight: 500;     /* Средняя жирность */
    text-align: center;   /* Выравнивание по центру */
}

/* Обязанности члена команды */
.member-responsibility {
    font-size: 0.85rem;   /* Размер шрифта */
    color: var(--gray);   /* Серый цвет */
    line-height: 1.5;     /* Межстрочный интервал */
    text-align: center;   /* Выравнивание по центру */
    flex-grow: 1;         /* Занимает все доступное пространство */
    display: flex;        /* Flexbox для центрирования */
    align-items: center;  /* Вертикальное центрирование */
}

/* ========== CAROUSEL SECTION STYLES ========== */
.carousel-section {
    padding: 120px 0;     /* Большие отступы */
    background: linear-gradient(135deg, var(--gray-light) 0%, var(--white) 100%); /* Градиентный фон */
    position: relative;    /* Для позиционирования */
    overflow: hidden;      /* Скрываем переполнение */
}

.carousel-section h2 {
    text-align: center;   /* Выравнивание по центру */
    font-size: 3rem;      /* Размер шрифта */
    font-weight: 700;     /* Жирное начертание */
    margin-bottom: 4rem;  /* Отступ снизу */
    color: var(--dark);   /* Темный цвет */
    position: relative;   /* Для псевдоэлемента */
}

/* Подчеркивание заголовка карусели */
.carousel-section h2::after {
    content: '';          /* Пустой контент */
    position: absolute;   /* Абсолютное позиционирование */
    bottom: -15px;       /* Снизу от текста */
    left: 50%;           /* По центру */
    transform: translateX(-50%); /* Сдвиг для точного центрирования */
    width: 80px;         /* Ширина линии */
    height: 4px;         /* Высота линии */
    background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark)); /* Градиент */
    border-radius: 2px;   /* Закругленные края */
}

/* Контейнер карусели */
.carousel-container {
    position: relative;   /* Для позиционирования кнопок */
    max-width: 900px;     /* Максимальная ширина */
    margin: 0 auto;       /* Центрирование */
    overflow: hidden;     /* Скрываем переполнение */
    border-radius: 20px;  /* Закругленные углы */
    box-shadow: 0 20px 50px rgba(0,0,0,0.1); /* Тень */
}

/* Карусель */
.carousel {
    display: flex;        /* Flexbox для горизонтального расположения */
    transition: transform 0.5s ease-in-out; /* Плавное перемещение */
}

/* Слайд карусели */
.carousel-slide {
    min-width: 100%;      /* Ширина на весь контейнер */
    position: relative;   /* Для позиционирования подписи */
}

.carousel-slide img {
    width: 100%;          /* На всю ширину */
    height: 500px;        /* Фиксированная высота */
    object-fit: cover;    /* Растягиваем с сохранением пропорций */
    display: block;       /* Блочный элемент */
}

/* Подпись слайда */
.carousel-caption {
    position: absolute;   /* Абсолютное позиционирование */
    bottom: 0;           /* Снизу */
    left: 0;             /* Слева */
    right: 0;            /* Справа */
    background: linear-gradient(transparent, rgba(0,0,0,0.7)); /* Градиентный фон */
    color: var(--white);  /* Белый текст */
    padding: 2rem;       /* Внутренние отступы */
    text-align: center;   /* Выравнивание по центру */
}

.carousel-caption h3 {
    font-size: 1.5rem;   /* Размер шрифта */
    margin-bottom: 0.5rem; /* Отступ снизу */
    font-weight: 600;    /* Жирное начертание */
}

.carousel-caption p {
    font-size: 1rem;     /* Размер шрифта */
    opacity: 0.9;        /* Полупрозрачный */
}

/* Кнопки карусели */
.carousel-btn {
    position: absolute;   /* Абсолютное позиционирование */
    top: 50%;            /* По вертикали по центру */
    transform: translateY(-50%); /* Сдвиг для точного центрирования */
    background: rgba(255,255,255,0.8); /* Полупрозрачный белый фон */
    border: none;        /* Без рамки */
    width: 50px;         /* Ширина */
    height: 50px;        /* Высота */
    border-radius: 50%;  /* Круг */
    font-size: 1.5rem;   /* Размер стрелок */
    cursor: pointer;     /* Курсор указатель */
    display: flex;       /* Flexbox для центрирования */
    align-items: center; /* Вертикальное центрирование */
    justify-content: center; /* Горизонтальное центрирование */
    transition: all 0.3s ease; /* Плавные переходы */
    z-index: 10;         /* Поверх слайдов */
}

/* Эффект при наведении на кнопки */
.carousel-btn:hover {
    background: var(--white); /* Белый фон */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Тень */
}

/* Кнопка "назад" */
.carousel-btn.prev {
    left: 20px;          /* Слева */
}

/* Кнопка "вперед" */
.carousel-btn.next {
    right: 20px;         /* Справа */
}

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

/* Отдельный индикатор */
.indicator {
    width: 12px;         /* Ширина */
    height: 12px;        /* Высота */
    border-radius: 50%;  /* Круг */
    background: var(--gray); /* Серый цвет */
    cursor: pointer;     /* Курсор указатель */
    transition: all 0.3s ease; /* Плавные переходы */
}

/* Активный индикатор */
.indicator.active {
    background: var(--turquoise); /* Бирюзовый цвет */
    transform: scale(1.2);        /* Увеличение */
}

/* ========== DOWNLOAD SECTION STYLES ========== */
.download-section {
    padding: 120px 0;    /* Большие отступы */
    background: linear-gradient(135deg, var(--turquoise-light) 0%, var(--turquoise) 50%, var(--turquoise-dark) 100%); /* Градиентный фон */
    text-align: center;  /* Выравнивание по центру */
    color: var(--white); /* Белый текст */
    position: relative;  /* Для псевдоэлемента */
    overflow: hidden;    /* Скрываем переполнение */
}

/* Фоновое изображение с прозрачностью */
.download-section::before {
    content: '';         /* Пустой контент */
    position: absolute;  /* Абсолютное позиционирование */
    top: 0;             /* Сверху */
    left: 0;            /* Слева */
    width: 100%;        /* На всю ширину */
    height: 100%;       /* На всю высоту */
    background: url('up.png') center/cover no-repeat; /* Фоновое изображение */
    opacity: 0.1;       /* Полупрозрачное */
    z-index: 1;         /* Под контентом */
}

/* Контейнер download */
.download-container {
    position: relative;  /* Для позиционирования поверх псевдоэлемента */
    z-index: 2;         /* Поверх фона */
    max-width: 800px;   /* Максимальная ширина */
    margin: 0 auto;     /* Центрирование */
}

.download-section h2 {
    font-size: 3rem;    /* Размер шрифта */
    font-weight: 700;   /* Жирное начертание */
    margin-bottom: 1.5rem; /* Отступ снизу */
    text-shadow: 0 2px 10px rgba(0,0,0,0.2); /* Тень текста */
}

/* Подзаголовок */
.download-section .subtitle {
    font-size: 1.5rem;  /* Размер шрифта */
    margin-bottom: 2rem; /* Отступ снизу */
    opacity: 0.9;       /* Полупрозрачный */
}

/* Описание загрузки */
.download-description {
    font-size: 1.2rem;  /* Размер шрифта */
    margin-bottom: 3rem; /* Отступ снизу */
    line-height: 1.7;   /* Межстрочный интервал */
    opacity: 0.9;       /* Полупрозрачный */
}

/* Сетка особенностей загрузки */
.download-features {
    display: grid;      /* CSS Grid */
    grid-template-columns: repeat(3, 1fr); /* 3 колонки */
    gap: 2rem;         /* Расстояние между элементами */
    margin-bottom: 3rem; /* Отступ снизу */
}

/* Элемент особенности */
.download-feature {
    background: rgba(255,255,255,0.1); /* Полупрозрачный белый фон */
    backdrop-filter: blur(10px); /* Размытие фона */
    padding: 2rem;     /* Внутренние отступы */
    border-radius: 15px; /* Закругленные углы */
    transition: all 0.3s ease; /* Плавные переходы */
}

/* Эффект при наведении на особенность */
.download-feature:hover {
    transform: translateY(-5px); /* Поднимаем элемент */
    background: rgba(255,255,255,0.15); /* Более светлый фон */
}

/* Иконка особенности */
.download-feature-icon {
    font-size: 3rem;   /* Размер иконки */
    margin-bottom: 1rem; /* Отступ снизу */
    display: block;    /* Блочный элемент */
}

.download-feature h4 {
    font-size: 1.3rem; /* Размер шрифта */
    margin-bottom: 0.5rem; /* Отступ снизу */
    font-weight: 600;  /* Жирное начертание */
}

.download-feature p {
    font-size: 0.95rem; /* Размер шрифта */
    opacity: 0.9;      /* Полупрозрачный */
}

/* Контейнер для кнопок в download */
.download-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 2rem;
}

/* Кнопка скачивания */
.download-button {
    display: inline-flex; /* Flexbox для выравнивания */
    align-items: center;  /* Выравнивание по центру */
    gap: 1rem;           /* Расстояние между элементами */
    padding: 20px 40px;  /* Внутренние отступы */
    background: var(--white); /* Белый фон */
    color: var(--turquoise-dark); /* Бирюзовый текст */
    text-decoration: none; /* Убираем подчеркивание */
    border-radius: 50px;  /* Закругленные углы */
    font-weight: 700;     /* Жирное начертание */
    font-size: 1.3rem;    /* Размер шрифта */
    transition: all 0.3s ease; /* Плавные переходы */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); /* Тень */
    position: relative;   /* Для псевдоэлемента */
    overflow: hidden;     /* Скрываем переполнение */
}

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

/* Движение блика при наведении */
.download-button:hover::before {
    left: 100%;          /* Вправо за пределы */
}

.download-button:hover {
    transform: translateY(-5px); /* Поднимаем кнопку */
    box-shadow: 0 15px 40px rgba(0,0,0,0.3); /* Увеличиваем тень */
}

/* Специальный стиль для кнопки sample в download секции */
.download-sample-button {
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255,255,255,0.3);
}

.download-sample-button:hover {
    background: rgba(255,255,255,0.3);
    border-color: rgba(255,255,255,0.5);
}

/* Примечание к загрузке */
.download-note {
    margin-top: 2rem;    /* Отступ сверху */
    font-size: 0.9rem;   /* Размер шрифта */
    opacity: 0.7;        /* Полупрозрачный */
}

/* ========== STATS SECTION STYLES ========== */
.stats {
    padding: 80px 0;     /* Отступы */
    background: linear-gradient(135deg, var(--turquoise-light) 0%, var(--white) 100%); /* Градиентный фон */
}

/* Сетка статистики */
.stats-grid {
    display: grid;       /* CSS Grid */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Адаптивные колонки */
    gap: 2rem;          /* Расстояние между элементами */
    text-align: center;  /* Выравнивание по центру */
}

/* Элемент статистики */
.stat-item {
    padding: 2rem;      /* Внутренние отступы */
    animation: statCount 2s ease-out; /* Анимация появления */
}

/* Число статистики */
.stat-number {
    font-size: 3rem;    /* Размер шрифта */
    font-weight: 800;   /* Очень жирное начертание */
    color: var(--turquoise-dark); /* Бирюзовый цвет */
    margin-bottom: 0.5rem; /* Отступ снизу */
}

/* Подпись статистики */
.stat-label {
    font-size: 1.1rem;  /* Размер шрифта */
    color: var(--dark); /* Темный цвет */
    font-weight: 600;   /* Жирное начертание */
}

/* ========== BENEFITS SECTION STYLES ========== */
.benefits {
    padding: 120px 0;   /* Большие отступы */
    background: var(--white); /* Белый фон */
}

.benefits-grid {
    display: grid;      /* CSS Grid */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Адаптивные колонки */
    gap: 2rem;         /* Расстояние между элементами */
}

/* Элемент преимущества */
.benefit-item {
    display: flex;      /* Flexbox для выравнивания */
    align-items: flex-start; /* Выравнивание по верху */
    gap: 1.5rem;       /* Расстояние между иконкой и текстом */
    padding: 2rem;     /* Внутренние отступы */
    background: var(--gray-light); /* Светло-серый фон */
    border-radius: 15px; /* Закругленные углы */
    transition: all 0.3s ease; /* Плавные переходы */
}

/* Эффект при наведении на преимущество */
.benefit-item:hover {
    transform: translateX(10px); /* Сдвиг вправо */
    background: var(--white);    /* Белый фон */
    box-shadow: 0 10px 30px rgba(64, 224, 208, 0.1); /* Тень */
}

/* Иконка преимущества */
.benefit-icon {
    font-size: 2.5rem; /* Размер иконки */
    flex-shrink: 0;    /* Запрещаем сжатие */
    animation: benefitSpin 4s linear infinite; /* Анимация вращения */
}

/* Анимация вращения иконки */
@keyframes benefitSpin {
    0% { transform: rotate(0deg); }   /* Начальный угол */
    100% { transform: rotate(360deg); } /* Конечный угол */
}

.benefit-content h4 {
    font-size: 1.3rem; /* Размер шрифта */
    font-weight: 600;  /* Жирное начертание */
    margin-bottom: 0.5rem; /* Отступ снизу */
    color: var(--dark); /* Темный цвет */
}

.benefit-content p {
    color: var(--gray); /* Серый цвет */
    line-height: 1.6;   /* Межстрочный интервал */
}

/* ========== CTA SECTION STYLES ========== */
.cta-section {
    padding: 100px 0;   /* Большие отступы */
    background: linear-gradient(135deg, var(--turquoise-light) 0%, var(--turquoise) 50%, var(--turquoise-dark) 100%); /* Градиентный фон */
    text-align: center; /* Выравнивание по центру */
    color: var(--white); /* Белый текст */
    position: relative; /* Для позиционирования */
    overflow: hidden;   /* Скрываем переполнение */
}

.cta-section h2 {
    font-size: 3rem;    /* Размер шрифта */
    font-weight: 700;   /* Жирное начертание */
    margin-bottom: 1rem; /* Отступ снизу */
    position: relative; /* Для z-index */
    z-index: 2;         /* Поверх фона */
}

.cta-section p {
    font-size: 1.2rem;  /* Размер шрифта */
    margin-bottom: 3rem; /* Отступ снизу */
    opacity: 0.9;       /* Полупрозрачный */
    max-width: 600px;   /* Максимальная ширина */
    margin-left: auto;  /* Центрирование */
    margin-right: auto; /* Центрирование */
    position: relative; /* Для z-index */
    z-index: 2;         /* Поверх фона */
}

/* Контейнер для кнопок в CTA */
.cta-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Вторичная кнопка CTA */
.cta-button.secondary {
    background: var(--white); /* Белый фон */
    color: var(--turquoise-dark); /* Бирюзовый текст */
    box-shadow: 0 10px 30px rgba(255,255,255,0.2); /* Тень */
    position: relative; /* Для z-index */
    z-index: 2;         /* Поверх фона */
}

.cta-button.secondary:hover {
    box-shadow: 0 15px 40px rgba(255,255,255,0.3); /* Увеличенная тень */
}

/* ========== FOOTER STYLES ========== */
footer {
    background: var(--dark); /* Темный фон */
    color: var(--white);     /* Белый текст */
    padding: 4rem 0 2rem;   /* Отступы */
}

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

.footer-column h4 {
    font-size: 1.3rem;     /* Размер шрифта */
    margin-bottom: 1.5rem; /* Отступ снизу */
    color: var(--turquoise-light); /* Светло-бирюзовый цвет */
}

/* Ссылки футера */
.footer-links {
    list-style: none;      /* Убираем маркеры списка */
}

.footer-links li {
    margin-bottom: 0.8rem; /* Отступ между ссылками */
}

.footer-links a {
    color: var(--gray);    /* Серый цвет */
    text-decoration: none; /* Убираем подчеркивание */
    transition: color 0.3s ease; /* Плавное изменение цвета */
}

.footer-links a:hover {
    color: var(--turquoise); /* Бирюзовый цвет при наведении */
}

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

/* ========== RESPONSIVE STYLES ========== */

/* Планшеты и маленькие ноутбуки */
@media (max-width: 1200px) {
    .team-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 колонки вместо 5 */
        gap: 2rem;
    }
    
    .about-container {
        grid-template-columns: 1fr; /* Одна колонка */
        gap: 3rem;
    }
    
    .development-container {
        grid-template-columns: 1fr; /* Одна колонка */
        gap: 3rem;
    }
    
    .download-features {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки вместо 3 */
    }
}

/* Планшеты */
@media (max-width: 992px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки вместо 3 */
        gap: 2rem;
    }
    
    .about-features {
        grid-template-columns: 1fr; /* Одна колонка */
    }
    
    .download-features {
        grid-template-columns: 1fr; /* Одна колонка */
    }
}

/* Мобильные устройства */
@media (max-width: 768px) {
    /* Уменьшаем размеры шрифтов для мобильных */
    .hero-content h1 {
        font-size: 2.8rem;
    }
    
    .hero-content .slogan {
        font-size: 1.6rem;
    }
    
    .carousel-section h2 {
        font-size: 2.2rem;
    }
    
    .download-section h2 {
        font-size: 2.2rem;
    }
    
    .download-section .subtitle {
        font-size: 1.2rem;
    }
    
    /* Скрываем навигационные ссылки на мобильных */
    .nav-links {
        display: none;
    }
    
    /* Адаптируем сетки для мобильных */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .team-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    /* Адаптируем карточки команды */
    .team-member {
        min-height: 350px;
        padding: 2rem 1rem;
    }
    
    .member-photo {
        width: 100px;
        height: 100px;
    }
    
    /* Уменьшаем заголовки */
    .about-content h2 {
        font-size: 2.5rem;
    }
    
    .about-visual {
        height: 400px;
    }
    
    .development-content h2 {
        font-size: 2.5rem;
    }
    
    .development-visual {
        height: 400px;
    }
    
    /* Адаптируем карусель */
    .carousel-slide img {
        height: 400px;
    }
    
    .carousel-caption {
        padding: 1.5rem;
    }
    
    .carousel-caption h3 {
        font-size: 1.3rem;
    }
    
    .carousel-caption p {
        font-size: 0.9rem;
    }
    
    .carousel-btn {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    
    /* Адаптируем кнопки для мобильных */
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .download-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .sample-button, .cta-button, .download-button {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    
    .nav-links .sample-button {
        width: auto;
        margin: 0.5rem 0;
    }
}