/* ============================================================================
   ГЕРОЙ-СЕКЦИЯ (HERO SECTION)
   Основная секция с призывом к действию на главной странице
   ============================================================================ */

/* ----------------------------------------------------------------------------
   БАЗОВЫЕ СТИЛИ ДЛЯ ГЕРОЙ-СЕКЦИИ
   ---------------------------------------------------------------------------- */
.hero {
    /* Позиционирование и размеры */
    position: relative;           /* Для абсолютного позиционирования дочерних элементов */
    min-height: 100vh;            /* Минимальная высота - весь экран */
    min-height: 100dvh;           /* Современное свойство для мобильных браузеров */
    
    /* Flexbox для центрирования контента */
    display: flex;
    align-items: center;          /* Вертикальное центрирование */
    justify-content: center;      /* Горизонтальное центрирование */
    
    /* Оформление */
    overflow: hidden;             /* Скрываем выходящий за пределы контент */
    color: white;                 /* Базовый цвет текста */
    text-align: center;           /* Центрирование текста по умолчанию */
    
    /* ★ ФОНОВОЕ ОФОРМЛЕНИЕ ★ */
    background-color: #0C5C75;    /* Основной фоновый цвет для всех устройств */
    
    /* Свойства фона (активируются при наличии background-image) */
    background-size: cover;       /* Картинка растягивается на весь блок */
    background-position: center center; /* Картинка центрируется */
    background-repeat: no-repeat; /* Запрет повторения картинки */
    
    /* Оптимизация для iOS */
    -webkit-overflow-scrolling: touch; /* Плавный скролл на iOS */
}

/* ----------------------------------------------------------------------------
   АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ (до 768px)
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .hero {
        /* ★ ДОБАВЛЯЕМ ФОНОВУЮ КАРТИНКУ ТОЛЬКО НА МОБИЛЬНЫХ ★ */
        /* background-image: url("/static/img/hero/hero-bg.jpg");*/
        
        /* Оптимизация для производительности на мобильных */
        background-attachment: scroll;  /* Отключаем fixed для плавности */
        -webkit-backface-visibility: hidden; /* Убираем мерцание */
        -webkit-transform: translateZ(0);     /* Аппаратное ускорение */
        transform: translateZ(0);             /* Аппаратное ускорение */
        will-change: transform;               /* Оптимизация анимаций */
    }
}

/* ----------------------------------------------------------------------------
   АДАПТИВНОСТЬ ДЛЯ ОЧЕНЬ МАЛЕНЬКИХ ЭКРАНОВ (до 360px)
   ---------------------------------------------------------------------------- */
@media (max-width: 360px) {
    .hero {
        /* Гарантируем полное покрытие картинкой */
        background-size: cover;
        background-position: center center;
    }
}

/* ----------------------------------------------------------------------------
   ЛАНДШАФТНАЯ ОРИЕНТАЦИЯ НА МОБИЛЬНЫХ
   ---------------------------------------------------------------------------- */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: 120vh;        /* Увеличиваем высоту для ландшафтного режима */
        background-size: cover;
        background-position: center 30%; /* Сдвигаем картинку вверх */
    }
}

/* ----------------------------------------------------------------------------
   ПОДДЕРЖКА RETINA-ЭКРАНОВ (высокая плотность пикселей)
   ---------------------------------------------------------------------------- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero {
        /* Для Retina-экранов можно использовать изображение в 2x разрешении */
        /* background-image: url("/static/img/hero/hero-bg@2x.jpg"); */
    }
}

/* ============================================================================
   КОНТЕЙНЕРЫ И ОБЕРТКИ
   ============================================================================ */

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

/* ----------------------------------------------------------------------------
   КОНТЕНТ ГЕРОЙ-СЕКЦИИ
   ---------------------------------------------------------------------------- */
.hero-content {
    display: flex;
    flex-direction: column;      /* Вертикальное расположение на мобильных */
    align-items: center;         /* Центрирование по горизонтали */
    gap: 2rem;                   /* Расстояние между элементами */
    padding: 4rem 1rem;          /* Внутренние отступы */
    
    /* Защита от перекрытия системными элементами (iOS) */
    padding-top: max(4rem, env(safe-area-inset-top));
    padding-bottom: max(4rem, env(safe-area-inset-bottom));
    
    z-index: 1;                  /* Контент поверх фона и оверлея */
}

/* ----------------------------------------------------------------------------
   ТЕКСТОВАЯ ОБЛАСТЬ
   ---------------------------------------------------------------------------- */
.hero-text {
    max-width: 700px;            /* Ограничение ширины для лучшей читаемости */
}

/* ============================================================================
   ТИПОГРАФИКА И ТЕКСТ
   ============================================================================ */

/* ----------------------------------------------------------------------------
   ЗАГОЛОВКИ
   ---------------------------------------------------------------------------- */
.hero-title {
    display: block;              /* Блочное отображение */
    margin-bottom: 1rem;         /* Отступ снизу */
    text-align: left;          /* Центрирование текста */
}

.hero-title-main {
    display: block;
    font-size: 2.5rem;          /* Базовый размер шрифта */
    font-weight: 400;           /* Нормальное начертание */
    letter-spacing: 1px;        /* Межбуквенный интервал */
    color: white;               /* Цвет текста */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Тень для лучшей читаемости */
}

.hero-title-accent {
    display: block;
    font-size: 3.5rem;          /* Увеличенный размер */
    font-weight: 800;           /* Жирное начертание */
    letter-spacing: -1px;       /* Уменьшенный межбуквенный интервал */
    margin-top: 0.5rem;         /* Отступ сверху */
    
    /* Градиентный текст */
    background: linear-gradient(135deg, #e8ebec, #e3ecef);
    -webkit-background-clip: text;  /* Обрезаем фон по тексту */
    -webkit-text-fill-color: transparent; /* Прозрачный цвет текста */
    background-clip: text;           /* Стандартное свойство */
    
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Тень текста */
}

/* ----------------------------------------------------------------------------
   ПОДЗАГОЛОВОК
   ---------------------------------------------------------------------------- */
.hero-subtitle {
    font-size: 1.25rem;         /* Размер шрифта */
    margin-bottom: 1rem;        /* Отступ снизу */
    color: #e0e0e0;             /* Светло-серый цвет */
    font-weight: 300;           /* Светлое начертание */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* Легкая тень */
}

/* ----------------------------------------------------------------------------
   ОСНОВНОЙ ТЕКСТ
   ---------------------------------------------------------------------------- */
.hero-description {
    font-size: 1.1rem;          /* Размер шрифта */
    margin-bottom: 2rem;        /* Отступ снизу */
    line-height: 1.7;           /* Межстрочный интервал */
    color: #f0f0f0;             /* Очень светло-серый цвет */
    max-width: 600px;           /* Ограничение ширины */
    margin-left: auto;          /* Автоматические отступы для центрирования */
    margin-right: auto;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* Легкая тень */
}

/* ============================================================================
   ФИЧИ-БЛОКИ (особенности)
   ============================================================================ */

.hero-features {
    display: flex;
    justify-content: center;    /* Центрирование по горизонтали */
    gap: 2rem;                  /* Расстояние между элементами */
    margin-bottom: 2.5rem;      /* Отступ снизу */
    flex-wrap: wrap;            /* Перенос на новую строку при нехватке места */
}

.hero-feature {
    display: flex;
    flex-direction: column;     /* Вертикальное расположение */
    align-items: center;        /* Центрирование по горизонтали */
    gap: 0.5rem;                /* Расстояние между иконкой и текстом */
    min-width: 120px;           /* Минимальная ширина элемента */
}

.feature-icon {
    font-size: 1.8rem;          /* Размер иконки */
}

.feature-text {
    font-size: 0.9rem;          /* Размер текста */
    font-weight: 500;           /* Среднее начертание */
    text-align: center;         /* Центрирование текста */
}

/* ============================================================================
   КНОПКИ И ПРИЗЫВЫ К ДЕЙСТВИЮ
   ============================================================================ */

.hero-actions {
    display: flex;
    gap: 1.5rem;                /* Расстояние между кнопками */
    justify-content: center;    /* Центрирование кнопок */
    flex-wrap: wrap;            /* Перенос на новую строку */
}

/* ----------------------------------------------------------------------------
   БАЗОВЫЙ СТИЛЬ КНОПКИ
   ---------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.5rem;    /* Внутренние отступы */
    border: none;              /* Убираем стандартную рамку */
    border-radius: 8px;        /* Скругление углов */
    text-align: center;
    text-decoration: none;     /* Убираем подчеркивание */
    font-size: 1rem;           /* Размер шрифта */
    font-weight: 600;          /* Жирное начертание */
    cursor: pointer;           /* Курсор-указатель */
    transition: all 0.3s ease; /* Плавные переходы */
    line-height: 1.5;          /* Межстрочный интервал */
    white-space: nowrap;       /* Запрет переноса текста */
    
    /* Оптимизация для мобильных */
    -webkit-tap-highlight-color: transparent; /* Убираем подсветку при тапе */
    touch-action: manipulation;               /* Улучшение обработки касаний */
}

/* ----------------------------------------------------------------------------
   ПЕРВИЧНАЯ КНОПКА
   ---------------------------------------------------------------------------- */
.btn-primary {
    background: linear-gradient(135deg, #056486, #0A7FA3); /* Градиентный фон */
    color: white;               /* Цвет текста */
}

.btn-primary:hover {
    background: linear-gradient(135deg, #0A7FA3, #056486); /* Инвертированный градиент */
    transform: translateY(-2px); /* Легкий подъем */
    box-shadow: 0 8px 20px rgba(5, 100, 134, 0.3); /* Тень при наведении */
}

/* ----------------------------------------------------------------------------
   КНОПКА С ОБВОДКОЙ
   ---------------------------------------------------------------------------- */
.btn-outline {
    background: transparent;    /* Прозрачный фон */
    border: 2px solid white;   /* Белая рамка */
    color: white;              /* Белый текст */
}

.btn-outline:hover {
    background: white;          /* Белый фон при наведении */
    color: #056486;            /* Темно-синий текст */
    transform: translateY(-2px); /* Легкий подъем */
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2); /* Светлая тень */
}

/* ----------------------------------------------------------------------------
   РАЗМЕРЫ КНОПОК
   ---------------------------------------------------------------------------- */
.btn-xl {
    padding: 1.2rem 2.5rem;    /* Увеличенные отступы */
    font-size: 1.2rem;         /* Увеличенный шрифт */
}

.btn-sm {
    padding: 0.6rem 1.2rem;    /* Уменьшенные отступы */
    font-size: 0.9rem;         /* Уменьшенный шрифт */
}

/* ----------------------------------------------------------------------------
   ИКОНКИ В КНОПКАХ
   ---------------------------------------------------------------------------- */
.btn-icon {
    margin-right: 0.5rem;      /* Отступ справа от иконки */
    font-size: 1.2rem;         /* Размер иконки */
}

/* ============================================================================
   КАРТОЧКА БЫСТРОЙ ЗАПИСИ
   ============================================================================ */

.hero-image {
    width: 100%;               /* Занимает всю ширину контейнера */
    max-width: 400px;          /* Максимальная ширина */
}

.hero-card {
    background: rgba(255, 255, 255, 0.92); /* Полупрозрачный белый фон */
    backdrop-filter: blur(10px);           /* Размытие фона под карточкой */
    -webkit-backdrop-filter: blur(10px);   /* Поддержка в Safari */
    border-radius: 16px;       /* Сильное скругление углов */
    padding: 1.8rem;           /* Внутренние отступы */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); /* Тень для глубины */
    text-align: left;          /* Выравнивание текста по левому краю */
    color: #1a1a1a;            /* Темный цвет текста */
    
    /* Анимация появления */
    opacity: 0;
    transform: translateY(20px);
    animation: slideUp 0.8s ease-out 0.5s forwards;
}

@keyframes slideUp {
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* ----------------------------------------------------------------------------
   ЗАГОЛОВОК КАРТОЧКИ
   ---------------------------------------------------------------------------- */
.hero-card-header {
    margin-bottom: 1.5rem;     /* Отступ снизу */
}

.hero-card-title {
    font-size: 1.5rem;         /* Размер шрифта */
    font-weight: 700;          /* Жирное начертание */
    margin-bottom: 0.3rem;     /* Небольшой отступ снизу */
    color: #056486;            /* Синий цвет текста */
}

.hero-card-subtitle {
    font-size: 0.95rem;        /* Размер шрифта */
    color: #666;               /* Серый цвет текста */
    margin: 0;                 /* Убираем отступы */
}

/* ----------------------------------------------------------------------------
   СОДЕРЖИМОЕ КАРТОЧКИ
   ---------------------------------------------------------------------------- */
.hero-card-content {
    margin-bottom: 1.8rem;     /* Отступ снизу */
}

.hero-card-item {
    display: flex;
    align-items: center;       /* Вертикальное выравнивание */
    gap: 0.8rem;               /* Расстояние между иконкой и текстом */
    margin-bottom: 1rem;       /* Отступ снизу */
}

.hero-card-item:last-child {
    margin-bottom: 0;          /* Убираем отступ у последнего элемента */
}

.card-item-icon {
    font-size: 1.5rem;         /* Размер иконки */
    color: #056486;            /* Синий цвет иконки */
    min-width: 30px;           /* Фиксированная ширина для выравнивания */
    text-align: center;        /* Центрирование иконки */
}

.card-item-text {
    font-size: 1rem;           /* Размер шрифта */
    font-weight: 500;          /* Среднее начертание */
    color: #333;               /* Темный цвет текста */
}

/* ----------------------------------------------------------------------------
   ФУТЕР КАРТОЧКИ
   ---------------------------------------------------------------------------- */
.hero-card-footer {
    text-align: center;        /* Центрирование содержимого */
}

/* ============================================================================
   ИНДИКАТОР ПРОКРУТКИ
   ============================================================================ */

.hero-scroll {
    position: absolute;        /* Абсолютное позиционирование */
    bottom: 0.1rem;            /* Отступ от нижнего края */
    left: 50%;                 /* Позиционирование по центру */
    transform: translateX(-50%); /* Точное центрирование */
    z-index: 1;                /* Поверх других элементов */
    
    /* Учет безопасной зоны на iOS */
    bottom: max(0.1rem, env(safe-area-inset-bottom));
}

.scroll-indicator {
    display: flex;
    flex-direction: column;    /* Вертикальное расположение */
    align-items: center;       /* Центрирование по горизонтали */
    gap: 0.5rem;               /* Расстояние между элементами */
    color: white;              /* Цвет текста */
    animation: bounce 2s infinite; /* Анимация подпрыгивания */
}

.scroll-text {
    font-size: 0.85rem;        /* Размер шрифта */
    font-weight: 500;          /* Среднее начертание */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* Тень текста */
}

.scroll-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;               /* Ширина круга */
    height: 40px;              /* Высота круга */
    border: 2px solid white;  /* Белая рамка */
    border-radius: 50%;        /* Круглая форма */
    color: white;              /* Цвет стрелки */
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { 
        transform: translateY(0); 
    }
    40% { 
        transform: translateY(-10px); 
    }
    60% { 
        transform: translateY(-5px); 
    }
}

/* ============================================================================
   ДОПОЛНИТЕЛЬНЫЕ ЭЛЕМЕНТЫ
   ============================================================================ */

/* ----------------------------------------------------------------------------
   ФОНОВОЕ ИЗОБРАЖЕНИЕ (альтернативный вариант)
   ---------------------------------------------------------------------------- */
.hero-background {
    position: absolute;        /* Абсолютное позиционирование */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;               /* Под основным контентом */
}

.hero-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;         /* Заполнение всего пространства */
    
    /* Анимация появления */
    opacity: 0;
    animation: fadeInBg 1.5s ease-out forwards;
    
    /* Оптимизация для мобильных */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
}

@keyframes fadeInBg {
    to { 
        opacity: 1; 
    }
}

/* ----------------------------------------------------------------------------
   ПЕРЕКРЫВАЮЩИЙ СЛОЙ (ОВЕРЛЕЙ)
   ---------------------------------------------------------------------------- */
.hero-overlay {
    position: absolute;        /* Абсолютное позиционирование */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Градиентный оверлей для улучшения читаемости текста */
    background: linear-gradient(135deg, rgba(0, 55, 86, 0.95), rgba(0, 55, 86, 0.95));
    
    z-index: -1;               /* Между фоном и контентом */
}

/* ============================================================================
   АДАПТИВНОСТЬ ДЛЯ ПЛАНШЕТОВ И ДЕСКТОПОВ (от 769px)
   ============================================================================ */

@media (min-width: 769px) {
    .hero {
        text-align: left;      /* Выравнивание текста по левому краю */
        background-attachment: fixed; /* Эффект параллакса на десктопе */
    }
    
    .hero-content {
        flex-direction: row;   /* Горизонтальное расположение */
        align-items: center;   /* Вертикальное центрирование */
        justify-content: space-between; /* Распределение пространства */
        gap: 3rem;             /* Увеличенное расстояние */
        padding: 2rem 1rem;    /* Уменьшенные отступы */
    }
    
    .hero-text {
        max-width: 600px;      /* Увеличенная максимальная ширина */
        text-align: left;      /* Выравнивание по левому краю */
    }
    
    /* Увеличенные размеры шрифтов */
    .hero-title-main {
        font-size: 2.8rem;
    }
    
    .hero-title-accent {
        font-size: 4rem;
    }
    
    .hero-subtitle {
        font-size: 1.3rem;
    }
    
    .hero-description {
        font-size: 1.15rem;
    }
    
    /* Изменение выравнивания */
    .hero-features {
        justify-content: flex-start; /* Выравнивание по левому краю */
    }
    
    .hero-actions {
        justify-content: flex-start; /* Выравнивание по левому краю */
    }
    
    /* Размеры карточки */
    .hero-image {
        max-width: 350px;
    }
    
    .hero-card {
        padding: 2rem;         /* Увеличенные отступы */
    }
}

/* ============================================================================
   АДАПТИВНОСТЬ ДЛЯ БОЛЬШИХ ЭКРАНОВ (от 1024px)
   ============================================================================ */

@media (min-width: 1024px) {
    /* Дополнительное увеличение шрифтов */
    .hero-title-main {
        font-size: 3rem;
    }
    
    .hero-title-accent {
        font-size: 4.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.4rem;
    }
    
    .hero-description {
        font-size: 1.2rem;
    }
    
    .hero-image {
        max-width: 400px;      /* Максимальная ширина карточки */
    }
}

/* ============================================================================
   АДАПТИВНОСТЬ ДЛЯ МАЛЕНЬКИХ МОБИЛЬНЫХ (до 480px)
   ============================================================================ */

@media (max-width: 480px) {
    .hero-content {
        padding: 3rem 1rem;    /* Уменьшенные отступы */
        gap: 1.5rem;           /* Уменьшенное расстояние между элементами */
    }
    
    /* Уменьшенные размеры шрифтов */
    .hero-title-main {
        font-size: 2rem;
    }
    
    .hero-title-accent {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .hero-description {
        font-size: 1rem;
    }
    
    /* Компактное отображение фичей */
    .hero-features {
        gap: 1.2rem;           /* Уменьшенное расстояние */
    }
    
    .hero-feature {
        min-width: 100px;      /* Уменьшенная минимальная ширина */
    }
    
    .feature-text {
        font-size: 0.8rem;     /* Уменьшенный размер текста */
    }
    
    /* Вертикальное расположение кнопок */
    .hero-actions {
        flex-direction: column; /* Вертикальное расположение */
        align-items: center;    /* Центрирование */
        gap: 1rem;              /* Расстояние между кнопками */
    }
    
    .btn-xl {
        width: 100%;           /* Полная ширина */
        max-width: 300px;      /* Но не более 300px */
        padding: 1rem;         /* Стандартные отступы */
    }
    
    /* Размеры карточки */
    .hero-image {
        max-width: 90%;        /* 90% от ширины экрана */
    }
    
    .hero-card {
        padding: 1.5rem;       /* Уменьшенные отступы */
    }
    
    .hero-card-title {
        font-size: 1.3rem;     /* Уменьшенный размер заголовка */
    }
    
    .card-item-text {
        font-size: 0.95rem;    /* Уменьшенный размер текста */
    }
    
    .btn-sm {
        padding: 0.5rem 1rem;  /* Компактные отступы */
    }
    
    /* Оптимизация производительности на мобильных */
    .hero-card {
        backdrop-filter: blur(5px);        /* Уменьшенное размытие */
        -webkit-backdrop-filter: blur(5px); /* Для Safari */
    }
}

/* ============================================================================
   АДАПТИВНОСТЬ ДЛЯ ОЧЕНЬ МАЛЕНЬКИХ ЭКРАНОВ (до 320px)
   ============================================================================ */

@media (max-width: 320px) {
    /* Минимальные размеры шрифтов */
    .hero-title-main {
        font-size: 1.8rem;
    }
    
    .hero-title-accent {
        font-size: 2.2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .hero-description {
        font-size: 0.9rem;
    }
    
    /* Компактные фичи */
    .hero-feature {
        min-width: 90px;       /* Минимальная ширина */
    }
    
    .feature-text {
        font-size: 0.75rem;    /* Минимальный размер текста */
    }
}