/* Подключение шрифта Lato */
@font-face {
    font-family: 'Lato'; /* Имя шрифта для Lato (выбери любое) */
    src: url('/static/fonts/Lato/Lato-Regular.woff2') format('woff2'); /* Путь к файлу Lato Regular */
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('/static/fonts/Lato/Lato-Bold.woff2') format('woff2'); /* Путь к файлу Lato Bold */
    font-weight: bold; /* Для жирного начертания */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SpaceMono'; /* Имя шрифта для Space Mono (выбери любое) */
    src: url('/static/fonts/Space_Mono/SpaceMono-Regular.woff2') format('woff2'); /* Путь к файлу Space Mono Regular */
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SpaceMono';
    src: url('/static/fonts/Space_Mono/SpaceMono-Bold.woff2') format('woff2'); /* Путь к файлу Space Mono Bold */
    font-weight: bold; /* Для жирного начертания */
    font-style: normal;
    font-display: swap;
}

/* Подключение шрифта Lato (уже должно быть, оставляем как есть) */
@font-face {
    font-family: 'Lato';
    src: url('/static/fonts/Lato/Lato-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('/static/fonts/Lato/Lato-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* Подключение шрифта Space Mono (уже должно быть, оставляем как есть) */
@font-face {
    font-family: 'SpaceMono';
    src: url('/static/fonts/Space_Mono/SpaceMono-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SpaceMono';
    src: url('/static/fonts/Space_Mono/SpaceMono-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


/* Подключение шрифта DegularDemo - Regular */
@font-face {
    font-family: 'DegularDemo'; /* Имя шрифта DegularDemo */
    src: url('/static/fonts/Degular/DegularDemo-Regular.woff2') format('woff2'); /* Путь к DegularDemo-Regular.woff2 */
    font-weight: normal; /*  Нормальное начертание (400) */
    font-style: normal;
    font-display: swap;
}

/* Подключение шрифта DegularDemo - Bold */
@font-face {
    font-family: 'DegularDemo';
    src: url('/static/fonts/Degular/DegularDemo-Bold.woff2') format('woff2'); /* Путь к DegularDemo-Bold.woff2 */
    font-weight: bold; /* Жирное начертание (700) */
    font-style: normal;
    font-display: swap;
}

/* Подключение шрифта DegularDemo - Black */
@font-face {
    font-family: 'DegularDemo';
    src: url('/static/fonts/Degular/DegularDemo-Black.woff2') format('woff2'); /* Путь к DegularDemo-Black.woff2 */
    font-weight: 900; /* Черное начертание (900 или Black) */
    font-style: normal;
    font-display: swap;
}


/* Подключение шрифта DegularDemo - Italic (Regular Italic) */
@font-face {
    font-family: 'DegularDemo';
    src: url('/static/fonts/Degular/DegularDemo-MediumItalic.woff2') format('woff2'); /* Путь к DegularDemo-RegularItalic.woff2 */
    font-weight: normal; /* Нормальное начертание */
    font-style: italic; /* Курсив */
    font-display: swap;
}

/* Подключение шрифта DegularDemo - Bold Italic */
@font-face {
    font-family: 'DegularDemo';
    src: url('/static/fonts/Degular/DegularDemo-BoldItalic.woff2') format('woff2'); /* Путь к DegularDemo-BoldItalic.woff2 */
    font-weight: bold; /* Жирное начертание */
    font-style: italic; /* Курсив */
    font-display: swap;
}

/* Подключение шрифта DegularDemo - Black Italic */
@font-face {
    font-family: 'DegularDemo';
    src: url('/static/fonts/Degular/DegularDemo-BlackItalic.woff2') format('woff2'); /* Путь к DegularDemo-BlackItalic.woff2 */
    font-weight: 900; /* Черное начертание */
    font-style: italic; /* Курсив */
    font-display: swap;
}

/*====================================================================================================================*/
html {
    height: 100%; /* Это может быть полезно, но попробуем без него сначала */
}

body {
    font-family: 'SpaceMono', monospace;
    background-color: #0B0B0B; /* Темно-серый фон */
    color: #fff; /* Белый текст по умолчанию */
    transition: background-color 0.3s ease, color 0.3s ease; /* Плавная анимация фона и текста */
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.wrapper {
    flex: 1;
}

.container {
    max-width: 1200px; /* Максимальная ширина контента */
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* Шапка */
.header {
    background-color: transparent; /* Фон шапки совпадает с основным фоном */
    padding: 30px 0; /* Увеличим вертикальный отступ шапки */
    transition: padding 0.3s ease; /* Плавная анимация padding */
}

.header-container {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: flex-direction 0.3s ease;
    gap: 100px;
    background-color: #222; /* Возвращаем фон меню */
    border-radius: 50px; /* Закругленные края меню */
    padding: 0px 40px; /* Внутренние отступы меню */
}

.logo-container {
    display: flex; /* Используем flexbox для выравнивания картинки и текста по горизонтали */
    align-items: center; /* Выравниваем элементы по вертикальному центру */
    justify-content: space-between;
}

.logo-image {
    width: 30px; /* Задай желаемую ширину картинки */
    margin-right: 10px; /* Отступ между картинкой и текстом */
    border-radius: 5px; /* Можно добавить скругление для картинки, если хочешь */
    display: block; /* Убираем нижний отступ, который может быть у inline-элементов */
}

.logo-text {
    font-family: 'SpaceMono', monospace;
    font-size: 40px; /* Размер текста "Roader" (можно оставить как было или изменить) */
    font-weight: bold; /* Жирный шрифт (можно оставить как было или изменить) */
    color: #7FEE64; /* Цвет текста (можно оставить как было или изменить) */
    transition: color 0.3s ease; /* Плавная анимация цвета (можно оставить как было или изменить) */
}

.logo {
    font-size: 28px; /* Увеличим размер логотипа */
    font-weight: bold;
    color: #7FEE64; /* Акцентный зеленый логотип */
    transition: color 0.3s ease; /* Плавная анимация цвета */
}

/* Меню навигации (снова добавляем плашку) */
.navigation {
    background-color: #222; /* Возвращаем фон меню */
    border-radius: 50px; /* Закругленные края меню */
    padding: 20px 40px; /* Внутренние отступы меню */
    display: inline-block; /* Меню не на всю ширину */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Анимация фона и тени */
}



.navigation .nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    transition: flex-direction 0.3s ease; /* Плавная анимация flex-direction */
}

.navigation .nav-item {
    margin-left: 25px; /* Увеличим отступ между пунктами меню */
    transition: margin-left 0.3s ease; /* Плавная анимация margin */
}

.navigation .nav-item:first-child {
    margin-left: 0; /* Убрать отступ слева у первого пункта меню */
}



.navigation .nav-link {
    text-decoration: none;
    color: #ddffdc; /* Белые ссылки навигации */
    font-size: medium;
    font-weight: 700; /* Полужирный шрифт для ссылок меню */
    padding: 10px 15px; /* Отступы для ссылок, чтобы было удобнее нажимать */
    border-radius: 30px; /* Закругление для ссылок, чтобы при наведении выделять фон */
    transition: color 0.3s ease, background-color 0.3s ease; /* Плавное изменение цвета и фона */
}

.navigation .nav-link:hover {
    color: #0B0B0B; /* Темный текст при наведении */
    background-color: #7FEE64; /* Акцентный зеленый фон при наведении */
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.header-buttons .button {
    margin-left: 1px;
    transition: margin-left 0.3s ease; /* Плавная анимация margin */
}


/* Основной контент и Hero Section */
.main-content {
    padding-top: 80px; /* Увеличим верхний отступ основного контента */
    transition: padding 0.3s ease; /* Плавная анимация padding */
}

.hero-section {
    text-align: center;
    padding-top: 100px; /* Увеличим верхний отступ hero секции */
    transition: padding 0.3s ease; /* Плавная анимация padding */
}

.hero-container {
    max-width: 800px; /* Ограничиваем ширину hero контента */
    margin: 0 auto; /* Центрируем hero контент */
    transition: max-width 0.3s ease; /* Плавная анимация max-width */
}

.hero-title {
    font-family: 'DegularDemo', "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 3.5em; /* Увеличим размер заголовка */
    font-weight: normal;
    margin-bottom: 25px; /* Увеличим нижний отступ заголовка */
    color: #7FEE64; /* Акцентный зеленый заголовок */
    transition: font-size 0.3s ease, color 0.3s ease; /* Плавная анимация размера шрифта и цвета */
}

.hero-subtitle {
    font-size: 1.6em; /* Увеличим размер подзаголовка */
    color: #DDFFDC; /* Более светлый серый подзаголовок */
    line-height: 1.7; /* Увеличим межстрочный интервал */
    margin-bottom: 50px; /* Увеличим нижний отступ подзаголовка */
    transition: font-size 0.3s ease; /* Плавная анимация размера шрифта */
}

.hero-buttons .button {
    margin: 15px; /* Увеличим отступ для мобильной версии */
    transition: margin 0.3s ease, flex-basis 0.3s ease; /* Плавная анимация margin и flex-basis */
}


/* Кнопки - закругленные, упрощенное наведение */
.button {
    display: inline-block;
    padding: 14px 30px; /* Увеличим padding кнопок */
    border: none;
    border-radius: 50px; /* Полностью закругленные кнопки */
    font-size: 1.1em; /* Увеличим размер шрифта на кнопках */
    font-weight: 600; /* Полужирный шрифт на кнопках */
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; /* Плавная анимация только цвета фона и текста */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Небольшая тень для кнопок */
}

.button-primary {
    background-color: #7FEE64; /* Акцентный зеленый основной фон кнопки */
    color: #0B0B0B; /* Темный текст на основной кнопке */
}

.button-primary:hover {
    background-color: #65D64D; /* Немного темнее при наведении */
    color: #fff; /* Белый текст при наведении  */
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.button-secondary {
    background-color: transparent;
    color: #7FEE64; /* Акцентный зеленый цвет текста для второстепенной кнопки */
    border: 2px solid #7FEE64; /* Акцентная зеленая рамка */
}

.button-secondary:hover {
    background-color: #7FEE64; /* Возвращаем заливку цветом для вторичной кнопки при наведении */
    color: #0B0B0B; /* Темный текст при наведении */
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}


/* Подвал */
.footer {
    background-color: #0B0B0B; /* Фон подвала совпадает с основным фоном */
    padding: 30px 0; /* Увеличим вертикальный отступ подвала */
    text-align: center;
    border-top: 1px solid #333; /* Разделительная линия сверху подвала */
    transition: padding 0.3s ease; /* Плавная анимация padding */
}

.footer-text {
    color: #999; /* Светло-серый текст подвала */
    font-size: 1em;
    transition: font-size 0.3s ease; /* Плавная анимация размера шрифта */
}

.video-background {
    position: fixed; /* Фиксированное позиционирование - видео всегда на фоне и не прокручивается */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden; /*  Скрываем все, что выходит за границы контейнера (если видео больше окна) */
    z-index: -1; /*  Размещаем видео позади всего остального контента (отрицательный z-index) */
}

/* Стили для самого видео-элемента */
.video-bg__video {
    position: absolute; /* Абсолютное позиционирование внутри контейнера video-background */
    top: 50%;
    left: 50%;
    min-width: 100%; /* Минимальная ширина 100% - видео всегда покрывает ширину контейнера */
    min-height: 100%; /* Минимальная высота 100% - видео всегда покрывает высоту контейнера */
    width: auto;     /* Автоматическая ширина, чтобы сохранить пропорции видео */
    height: auto;    /* Автоматическая высота, чтобы сохранить пропорции видео */
    z-index: -1;     /*  На всякий случай, еще раз уводим видео на задний план */
    transform: translateX(-50%) translateY(-50%); /* Центрируем видео по горизонтали и вертикали */
}

/*  Дополнительно:  Можно добавить полупрозрачный оверлей, чтобы текст на фоне видео лучше читался */
.video-background::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.4); /* Полупрозрачный черный цвет (можно настроить прозрачность) */
    z-index: 1; /*  Оверлей поверх видео, но под основным контентом (z-index: -1 для видео, 1 для оверлея, основной контент должен быть с z-index: auto или выше) */
}

.auth-container {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
}

.profile-section {
    padding: 80px 0;
    text-align: center;
}

.profile-container {
    max-width: 600px;
    margin: 0 auto;
    background: #222;
    padding: 30px;
    border-radius: 10px;
}

.profile-title {
    font-family: 'DegularDemo', sans-serif;
    font-size: 2.5em;
    color: #7FEE64;
    margin-bottom: 20px;
}

.profile-info {
    margin-bottom: 30px;
}

.profile-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
}

.profile-name, .profile-email {
    font-family: 'SpaceMono', monospace;
    font-size: 1.2em;
    color: #DDFFDC;
}

.profile-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0B0B0B;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.loader.hidden {
    opacity: 0;
    pointer-events: none;
}

.loader-route {
    width: 30vh;
    height: 30vh;
    filter: drop-shadow(0 0 5px #d263ee); /* Светящийся эффект для маршрута */
}

.loader-route path {
    stroke-dasharray: 200; /* Длина маршрута для анимации */
    stroke-dashoffset: 100;
    animation: drawRoute 2s linear infinite; /* Плавное "рисование" маршрута */
}

.loader-dot {
    filter: drop-shadow(0 0 5px #d263ee); /* Светящийся эффект для точек */
    animation: pulseColor 2s infinite; /* Плавная смена цвета */
}

/* Смещение анимации для каждой точки */
.loader-dot:nth-child(4) { animation-delay: 1s; }
.loader-dot:nth-child(3) { animation-delay: 0.5s; }
.loader-dot:nth-child(2) { animation-delay: 0.1s; }

/* Анимация маршрута */
@keyframes drawRoute {
    0% { stroke-dashoffset: 200; }
    50% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -200; }
}

/* Анимация смены цвета точек */
@keyframes pulseColor {
    0% { fill: #7FEE64; }
    50% { fill: #ffffcc; } /* Красный цвет в середине */
    100% { fill: #7FEE64; }
}

/* Анимация вращения */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* Медиа запросы для мобильных устройств */
@media (max-width: 768px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .main-content {
        padding-top: 10px;
    }

    .header {
        padding: 20px 0; /* Меньше padding для шапки на мобильных */
    }

    .header-container {
        display: flow;
        flex-direction: column; /* Вертикальное расположение элементов шапки на мобильных */
        align-items: center; /* Центрирование элементов шапки по вертикали */
        background-color: transparent;
    }

    .logo {
        margin-bottom: 10px; /* Отступ логотипа от навигации на мобильных */
        font-size: 28px; /* Логотип чуть больше на мобильных */
    }


    .navigation {
        background-color: #222; /* Меню остается темным */
        border-radius: 50px;
        padding: 10px 25px; /* Увеличиваем отступы для мобильных */
        width: -webkit-fill-available;
        display: inline-block; /* Меню не на всю ширину */
    }

    .navigation:hover {
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); /* Меньше тень при наведении на мобильных */
        transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
    }


    .navigation .nav-list {
        flex-direction: column; /* Переводим элементы меню в вертикальное положение */
        align-items: center; /* Центрируем элементы */
        text-align: center; /* Центрируем текст меню */
    }

    .navigation .nav-item {
        margin-top: 20px; /* Отступ сверху */
        margin-bottom: 20px; /* Отступ снизу */
        margin-left: 0; /* Убираем отступ слева для пунктов меню на мобильных */
    }

    .navigation .nav-link {
        padding: 12px 130px; /* Увеличиваем padding для удобства касания */
        font-size: 1.1em; /* Чуть больше шрифт для меню на мобильных */
        border-radius: 30px; /* Закругление для ссылок */
    }


    .header-buttons {
        margin-top: 20px; /* Отступ кнопок от навигации на мобильных */
    }

    .header-buttons .button {
        margin-left: 0;
        margin-top: 10px; /* Отступ сверху между кнопками */
        width: 100%; /* Кнопки на всю ширину */
        box-sizing: border-box;
    }



    .main-content {
        padding-bottom: 50px;
    }

    .hero-section {
        padding-top: 70px; /* Меньше padding для hero секции на мобильных */
        padding-bottom: 70px;
    }

    .hero-container {
        max-width: 95%; /* Hero контент занимает почти всю ширину экрана на мобильных */
    }

    .hero-title {
        font-size: 2.5em; /* Меньше размер заголовка на мобильных */
        margin-bottom: 20px;
    }

    .hero-subtitle {
        font-size: 1.3em; /* Меньше размер подзаголовка на мобильных */
        margin-bottom: 35px;
    }

    .hero-buttons {
        display: flex;
        flex-direction: column; /* Кнопки в колонку на мобильных */
        align-items: center; /* Центрирование кнопок */
    }

    .hero-buttons .button {
        margin: 10px 0; /* Отступ сверху и снизу для кнопок hero на мобильных */
        flex-basis: 100%; /* Кнопки занимают всю ширину контейнера */
    }


    .button {
        padding: 16px 32px; /* Чуть больше padding для кнопок на мобильных для удобства касания */
        font-size: 1.2em; /* Немного больше шрифт на кнопках на мобильных */
        border-radius: 50px; /* Полностью закругленные кнопки */
    }

    .footer {
        padding: 20px 0; /* Меньше padding для подвала на мобильных */
    }

    .footer-text {
        font-size: 1.1em; /* Чуть больше шрифт текста подвала на мобильных */
    }

    .logo-container {
        display: flex; /* Используем flexbox для выравнивания картинки и текста по горизонтали */
        align-items: center; /* Выравниваем элементы по вертикальному центру */
    }

    .logo-image {
        width: 4rem; /* Задай желаемую ширину картинки */
        margin-right: 10px; /* Отступ между картинкой и текстом */
        border-radius: 5px; /* Можно добавить скругление для картинки, если хочешь */
        display: block; /* Убираем нижний отступ, который может быть у inline-элементов */
    }

    .logo-text {
        font-family: 'DegularDemo', sans-serif;
        font-size: 56px; /* Размер текста "Roader" (можно оставить как было или изменить) */
        font-weight: bold; /* Жирный шрифт (можно оставить как было или изменить) */
        color: #7FEE64; /* Цвет текста (можно оставить как было или изменить) */
        transition: color 0.3s ease; /* Плавная анимация цвета (можно оставить как было или изменить) */
    }
}