/* styles.css */

/* Сброс отступов и базовые настройки */

html {
    scroll-behavior: smooth;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.globe-phrase, .cursor-glow, .service-item {
    will-change: transform, opacity;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.5;
    background-color: #000 !important;
}



/* Header */
/* styles.css */
/* Хедер */
.header {
    background-color: #060606;
    /* тот же чёрный фон, что в секции */
    padding: 20px 0;
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #FFFFFF;
}

/* Стили кнопки «Попробовать» в хедере */
.btn--try {
    background-color: #087647;
    /* зелёный акцент */
    color: #FFFFFF;
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 16px;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.nav__list {
    display: flex;
    list-style: none;
    gap: 20px;
}

.nav__list a {
    text-decoration: none;
    color: #333;
    font-size: 16px;
}

.btn {
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

.btn--primary {
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0;
    background: #0077cc;
    color: #fff;
    width: 45%;
    z-index: 5;
}

.btn--secondary {
    background: #eee;
    color: #333;
}

.btn--login {
    background: transparent;
    color: #0077cc;
}

/* Hero */
.hero {
    background: #f5f5f5;
    padding: 60px 0;
    text-align: center;
}

.hero__title {
    font-size: 48px;
    margin-bottom: 20px;
}

.hero__subtitle {
    font-size: 24px;
    margin-bottom: 40px;
}

.form--contact {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 400px;
    margin: 0 auto;
}

.form__title {
    font-size: 20px;
    margin-bottom: 10px;
}

.form--contact input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

.form__actions {
    display: flex;
    gap: 10px;
}

.form__note {
    font-size: 12px;
    color: #666;
    margin-top: 10px;
}

/* CTA */
.cta {
    background: #fff;
    padding: 40px 0;
    text-align: center;
}

.cta__title {
    font-size: 32px;
    margin-bottom: 20px;
}

/* Features */
.features__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    padding: 40px 0;
}

.feature-card {
    background: #fff;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-align: center;
}

.feature-card h3,
.feature-card h4 {
    font-size: 18px;
}

/* Services */
.services__list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 40px 0;
}

.service-item {
    height: 100px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

/* Footer */
.footer {
    background: #333;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}

/* styles.css */
/* Секция-обёртка */
/* Обновленный CSS для глобуса и секции */
.optimization-section {
    position: relative;
    /* Добавляем для позиционирования дочерних элементов */
    background-color: #000;
    height: 712px;
    /* Такая же высота как у карточки */
    overflow: hidden;
    /* Скрываем все, что выходит за границы */
}


.optimization-card {
    position: relative;
    /* Для позиционирования текста поверх глобуса */
    z-index: 2;
    /* Текст поверх глобуса */
    width: 100%;
    max-width: 1200px;
    height: 712px;
    margin: 0 auto;
    background: linear-gradient(135deg,
    rgba(50, 50, 50, 0.7) 0%,
    rgba(0, 0, 0, 0.7) 48%,
    rgba(37, 34, 34, 0.7) 100%);
    background-blend-mode: overlay;
    border-radius: 16px;
    color: #fff;
}


/* Заголовки внутри карточки */
.optimization-card__headlines {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.optimization-card__title,
.optimization-card__subtitle {
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    line-height: 0.8;
    letter-spacing: 0;
    margin: 0;
    position: absolute;
    text-transform: uppercase;
    z-index: 5;
}

.optimization-card__title {
    top: 40px;
    left: 40px;
    font-size: 100px;
}

.optimization-card__subtitle {
    bottom: 40px;
    right: 40px;
    font-size: 80px;
    text-align: right;
}

.optimization-card__tagline {
    position: absolute;
    bottom: 120px;
    left: 40px;
    max-width: 600px;
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    opacity: 0.7;
    margin: 0;
    z-index: 5;
    text-transform: uppercase;
}

@media (max-width: 1160px) {
    .optimization-card__subtitle {
        bottom: 40px;
        right: 40px;
        font-size: 75px;
        text-align: right;
    }
}

@media (max-width: 1200px) {
    .optimization-card__subtitle {
        bottom: 40px;
        right: 40px;
        font-size: 60px;
        text-align: right;

    }

    .optimization-card__title {
        font-size: 65px;
    }
}

@media (max-width: 900px) {
    .optimization-card__subtitle {
        bottom: 40px;
        right: 40px;
        font-size: 50px;
        text-align: right;
    }
}





@media (max-width: 992px) {
    .optimization-section {
        height: auto;
        /* лучше подстраивать под контент */
        padding: 20px 16px;
        overflow: hidden;
    }

    .optimization-card__title {
        top: 20px;
        left: 20px;
        font-size: 34px;
    }

    .optimization-card__tagline {

        left: 20px;
        font-size: 14px;
        line-height: 1.2;
    }

    .optimization-card__subtitle {
        bottom: 30vh;
        /* 1/3 от высоты экрана */
        right: 20px;
        font-size: 34px;
        text-align: right;
        position: absolute;
        /* важно, если не задано */
    }

    .optimization-card__text {
        font-size: 14px;
        line-height: 1.5;
        text-align: center;
        margin: 16px auto;
        max-width: 90%;
    }

    .optimization-section .btn--primary {
        width: 90%;
        display: block;
        position: absolute;
        bottom: 40px;
        left: 50%;                     /* центр по горизонтали */
        transform: translateX(-50%);
        align-self: center;
        padding: 15px 32px;
        border-radius: 4px;
        cursor: pointer;
    }

    .btn.btn--primary:active{
        transform: translateX(-50%) scale(0.95);
        transition: transform 0.1s ease;
    }

    .btn.btn--try:active,
    .btn.btn--submit:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }

    .optimization-section {
        padding: 0;
    }



    /* если у тебя есть какие-то .phrase или .label, размещаем по центру */
    .phrase {
        font-size: 12px;
        padding: 4px 8px;
    }
}

/* Всплывающие фразы над глобусом */
.globe-phrase {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%) scale(0.8);
    /* изначально чуть уменьшен */
    padding: 8px 12px;
    background: rgba(32, 29, 29, 0.9);
    /* тёмный прямоугольник */
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    /* по умолчанию скрыт */
    transition:
        opacity 0.5s ease,
        transform 0.5s ease;
    /* плавный фейд и масштаб */
    box-shadow:
        0 0 8px 2px rgba(0, 255, 174, 0.4),
            /* узкое, яркое первичное свечение */
        0 0 16px 4px rgba(0, 255, 174, 0.2),
            /* более размыт, чуть полупрозрачен */
        0 0 32px 8px rgba(0, 255, 174, 0.1);
    z-index: 10;
    /* поверх канваса */

}

/* активный (показанный) статус */
.globe-phrase.show {
    opacity: 1;
    /* виден */
    transform: translate(-50%, -50%) scale(1);
    /* нормальный размер */
}

/* Для телефонов */
@media (max-width: 480px) {
    .globe-phrase {
        font-size: 12px;
        padding: 4px 8px;
    }
}

/* Для планшетов */
@media (min-width: 481px) and (max-width: 1024px) {
    .globe-phrase {
        font-size: 14px;
    }
}

/* Для десктопов */
@media (min-width: 1025px) {
    .globe-phrase {
        font-size: 16px;
    }
}


/* Добавляем в ваш styles.css */
#globe-container {
    position: relative;
    /* чтобы абсолютные .globe-phrase позиционировались внутри него */
}

#phrase-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}




/* Кнопка */
.btn--primary {
    position: absolute;
    bottom: 40px;
    left: 40px;

    background-color: #087647;
    color: #FFFFFF;
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 16px;
    padding: 15px 32px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}


/* ===========================
   Секция «Какие услуги мы предоставляем»
   =========================== */

/* ===========================
   Секция «Какие услуги мы предоставляем»
   =========================== */

/* Фон и отступы секции */
.services-section {
    background-color: #000;
    padding: 80px 0;
    color: #fff;
}

.services__list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 40px 0;
}

.service-item {
    height: 100px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

/* Заголовок секции */
.services-section__title,
.why-us-section__title,
.marquee-section__title,
.contact-section__title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 44px;
    line-height: 0.9;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #FAFAFA;
    display: inline-block;
    margin-left: 40%;
    margin-bottom: 40px;
    text-align: left;

}

.contact-section__title_1,
.privacy-title{
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 44px;
    line-height: 0.9;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #FAFAFA;
    display: inline-block;
    margin-bottom: 40px;
    text-align: left;
}

@media (max-width: 1000px) {
    .privacy-title,
    .contact-section__title_1 {
        font-size: 36px;
    }
}

@media (max-width: 800px) {
    .privacy-title,
    .contact-section__title_1 {
        font-size: 32px;
    }
}

@media (max-width: 500px) {
    .privacy-title,
    .contact-section__title_1 {
        font-size: 26px;
    }
}



@media (max-width: 888px) {

    .services-section__title,
    .why-us-section__title,
    .marquee-section__title,
    .contact-section__title {

        font-size: 38px;

    }
}

@media (max-width: 660px) {

    .services-section__title,
    .why-us-section__title,
    .marquee-section__title,
    .contact-section__title {

        font-size: 30px;

    }
}

@media (max-width: 500px) {

    .services-section__title,
    .why-us-section__title,
    .marquee-section__title,
    .contact-section__title {
        margin-left: 5%;
        font-size: 24px;

    }
}

.shadowed {
    filter: url(#inset-shadow);
}


#globe-container {
    position: absolute;
    top: -5vh;
    right: 5vw;
    width: 60vw;
    height: 60vw;
    max-width: 800px;
    max-height: 800px;
    pointer-events: none;
}

@media (max-width: 768px) {
    #globe-container {
        top: 7vh;
        right: 0;
        width: 90vw;
        height: 90vw;
    }
}

/* Для средних экранов (планшеты) */
@media (min-width: 769px) and (max-width: 1024px) {
    #globe-container {
        top: -30px;
        right: 50px;
        width: 70vw;
        height: 70vw;
    }
}

/* Для больших экранов (десктопы) */
@media (min-width: 1025px) {
    #globe-container {
        top: -50px;
        right: 100px;
        width: 800px;
        height: 800px;
    }
}

.ellipse-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    /* или 100% */
    height: 100%;
    /* или 100% */
    pointer-events: none;
    z-index: 1;
}

#ellipse-canvas {
    display: block;
    width: 100%;
    height: 100%;
}


.ellipse-bg {
    z-index: 1;
    /* под глобусом */
}

#globe-container {
    z-index: 2;
    /* поверх орбит */
}

/* Список карточек */
.services-list {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.services-list li.service-item {
    display: grid;
    grid-template-columns: 4fr 3fr 3fr;
    padding: 15px 15px;
    /* вместо align-items: center; */
    align-items: start;
    /* теперь все элементы «прижаты» к верху */
    position: relative;
    background-color: #060606;
    border: 1px solid #252525;
    border-radius: 10px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Номер пункта */
.service-item__number {
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: 26px;
    line-height: 1;
    letter-spacing: 1px;
    color: rgba(255, 255, 255);
    align-self: start;
    opacity: 0.3;
    margin-top: 0;
    margin-bottom: 8px;
}

/* Контент: название + описание */
.service-item__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.service-item__name {
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 1px;
    color: #fff;
}

.service-item__desc {
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.6);
}

/* Блок иконки (два SVG друг на друге) */
.service-item__icon {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-color: #212121;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: none;
    cursor: pointer;
    transition: all 0.3s ease;
    /* Анимация для фона */
}

.service-item__icon svg {
    width: 24px;
    height: 24px;
    fill: rgba(250, 250, 250, 0.6);
    /* Цвет стрелки по умолчанию */
    transition: all 0.3s ease;
    /* Анимация для стрелки */
    transform: rotate(0deg);
    /* Начальное положение */
}


/* Состояние при наведении */
.service-item:hover .service-item__icon {
    background-color: #FAFAFA;
    /* Белый фон при hover */
}

.service-item:hover .service-item__icon svg {
    fill: #111;
    /* Черная стрелка при hover */
    transform: rotate(-90deg);
    /* Поворот на -90 градусов */
}

.service-item:hover {
    background-color: #005C40 !important;
    /* Зеленый фон при наведении */
    border-color: #005C40 !important;
    /* Зеленая граница для согласованности */
}

.service-item:hover .service-item__number {
    color: #FAFAFA !important;
    /* Белый цвет номера */
    opacity: 1 !important;
    /* Убираем прозрачность */
}

@media (max-width: 1280px) {
    .service-item__name{
        font-size: 19px;
    }
}
@media (max-width: 1080px) {
    .service-item__name{
        font-size: 18px;
    }
}
@media (max-width: 768px) {

    .service-item {
        height: auto;
    }
    /* Убираем номера полностью */
    .service-item__number {
        display: none !important;
    }

    /* Меняем структуру карточки */
    .services-list li.service-item {
        display: block;
        padding: 16px 15px;
        position: relative;
        background-color: #060606;
        border: 1px solid #252525;
        border-radius: 10px;
        margin-bottom: 12px;
    }

    /* Позиционируем стрелку */
    .service-item__icon {
        pointer-events: none;
        position: absolute;
        right: 15px;
        top: 0;
        bottom: 0;
        margin: auto 0;
        width: 40px;
        height: 40px;
        background-color: #212121;
    }
    .service-item__icon svg {
        transition: transform 0.3s ease, fill 0.3s ease;
        transform: rotate(0deg); /* Исходное положение */
    }

    /* Сдвигаем контент вправо от стрелки */
    .service-item__content {
        margin-left: 5px; /* 30px иконка + 15px отступ */
        padding-right: 15px;
        max-width: 90%;
    }

    /* Настройки текста */
    .service-item__name {
        font-size: 16px;
        line-height: 1.3;
    }

    .service-item__desc {
        max-height: 0;
        overflow: hidden;
        font-size: 14px;
        margin-top: 0;
        transition: all 0.3s ease;
    }

    /* Убираем hover-эффекты для мобильных */
    .service-item:hover {
        background-color: #060606 !important;
        border-color: #252525 !important;
    }

    .service-item:hover .service-item__icon {
        background-color: #212121 !important;
    }

    .service-item:hover .service-item__icon svg {
        fill: rgba(250, 250, 250, 0.6) !important;
        transform: none !important;
    }

    /* Активное состояние карточки */
    .services-list li.service-item.active {
        background-color: #005C40 !important;
        border-color: #005C40 !important;
    }

    /* Активное состояние иконки */
    .services-list li.service-item.active .service-item__icon {
        background-color: #FAFAFA !important;
    }

    .services-list li.service-item.active .service-item__icon svg {
        fill: #111 !important;
    }

    .service-item.active .service-item__icon svg {
        fill: #111 !important;
        transform: rotate(-90deg) !important;
    }

    .service-item:not(.active):hover .service-item__icon svg {
        transform: rotate(90deg);
    }

    /* Показ описания */
    .services-list li.service-item.active .service-item__desc {
        max-height: 200px;
        opacity: 1;
        margin-top: 8px;
    }
}


/* styles.css */
/* Почему нас выбирают */
.why-us-section {
    background-color: #000;
    color: #fff;
    padding: 80px 0;
}

.why-us-section__subtitle,
.marquee-section__subtitle {
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: 0;

    color: #FAFAFA;

    display: inline-block;
    /* чтобы margin-left работал от самого текста */
    margin-left: 40%;
    /* сдвигаем начало текста на 40% ширины родителя */
    margin-bottom: 40px;
    /* ваш отступ */
    text-align: left;

    opacity: 0.6;
}

@media (max-width: 800px) {

    .why-us-section__subtitle,
    .marquee-section__subtitle {

        font-size: 15px;
    }
}

@media (max-width: 660px) {

    .why-us-section__subtitle,
    .marquee-section__subtitle {

        font-size: 14px;
    }
}

@media (max-width: 500px) {

    .why-us-section__subtitle,
    .marquee-section__subtitle {

        margin-left: 5%;
    }
}

/* Сетка карточек: 37fr / 37fr / 26fr */
.why-us-grid {
    scroll-behavior: smooth;
    display: grid;
    grid-template-columns: 37fr 37fr 26fr;
    grid-template-rows: auto auto;
    gap: 24px;
    scrollbar-width: none; /* Скрыть для Firefox */
    -ms-overflow-style: none; /* Скрыть для IE/Edge */
}
.why-us-grid::-webkit-scrollbar {
    display: none; /* Скрыть для Chrome/Safari */
}

/* Распределение карточек */
.why-us-card:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}

/* Аналитика (37%) */
.why-us-card:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}

/* Интеграция (37%) */
.why-us-card:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
}

/* Расширение (26%) */

.why-us-card:nth-child(4) {
    grid-column: 1;
    grid-row: 2;
}

/* Выявление (26%) */
.why-us-card:nth-child(5) {
    grid-column: 2;
    grid-row: 2;
}

/* Настраиваемые (37%) */
.why-us-card:nth-child(6) {
    grid-column: 3;
    grid-row: 2;
}

/* Полные (37%) */

/* Стили самой карточки */
.why-us-card {
    position: relative;
    background: linear-gradient(135deg,
    #111111 0%,
    #212121 48%,
    #121212 100%);
;
    height: 270px;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);

    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

/* Заголовок карточки */
.why-us-card h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    /* SemiBold */
    font-size: 20px;
    line-height: 1;
    /* 100% */
    letter-spacing: 0.3px;
    margin-bottom: 12px;
}

.why-us-card p {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    /* Regular */
    font-size: 16px;
    line-height: 1.2;
    /* 120% */
    letter-spacing: 0;
    /* 0% */
    margin: 0;
    color: #FAFAFA;
    opacity: 0.6;
}

.why-us-card svg {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

@media (max-width: 1280px) {
    .why-us-card h3 {
        font-size: 19px;
    }

    .why-us-card p {
        font-size: 15px;
    }

    .why-us-card svg {
        width: 110px;
        height: auto;
    }
}

@media (max-width: 1080px) {
    .why-us-card h3 {
        font-size: 18px;
    }

    .why-us-card p {
        font-size: 14px;
    }

    .why-us-card svg {
        width: 80px;
        height: auto;
    }
}

@media (max-width: 500px) {
    .why-us-card h3 {
        font-size: 16px;
    }

    .why-us-card p {
        font-size: 14px;
    }

    .why-us-card svg {
        width: 80px;
        height: 80px;
    }
}


.why-us-card:hover {
    transform: scale(1.05) translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
    z-index: 2;
}

/* Адаптив: на узких экранах — по одной/две карточки в ряд */
@media (max-width: 800px) {
    .why-us-grid {
        display: flex;
        overflow-x: auto;
        gap: 16px;
        padding: 0 16px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .why-us-card {
        flex: 0 0 80%;
        scroll-snap-align: start;
        min-width: 260px;
        height: 220px;
    }
    .why-us-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* Отключаем grid-area, чтобы не ломало */
    .why-us-card:nth-child(1),
    .why-us-card:nth-child(2),
    .why-us-card:nth-child(3),
    .why-us-card:nth-child(4),
    .why-us-card:nth-child(5),
    .why-us-card:nth-child(6) {
        grid-area: unset;
    }
}



.marquee-section {
    position: relative;
    overflow: hidden;
    background-color: #000;
    padding: 80px 0;
    color: #fff;

}

.cursor-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    /* диаметр светящегося круга */
    height: 150px;
    border-radius: 50%;
    pointer-events: none;
    /* чтобы не мешать кликам по контенту */

    /* полупрозрачный зелёный свет */
    background: rgba(4, 125, 86, 0.9);

    /* блюр для расплывчатости */
    filter: blur(40px);
    -webkit-filter: blur(40px);

    /* изначально скрыт */
    opacity: 0;
    transition: opacity 0.2s ease;
    transform: translate(-50%, -50%);
    /* центр круга под курсором */
    mix-blend-mode: screen;
    /* для более «мягкого» свечения на тёмном фоне */

    will-change: transform, opacity;
    backface-visibility: hidden;
    contain: layout style;
}

@media (max-width: 768px) {
    .cursor-glow{
        display: none !important;
    }

}

.marquee-section:hover .cursor-glow {
    opacity: 1;
}

/* контейнер */
.marquee {
    width: 100%;
    max-width: 100%;
    padding: 16px 0;
}

.fade-top,
.fade-bottom {
    position: absolute;
    left: 0;
    right: 0;
    height: 80px;
    pointer-events: none;
    z-index: 2;
}

.fade-left,
.fade-right {
    position: absolute;
    left: 0;
    right: 0;
    width: 80px;
    pointer-events: none;
    z-index: 2;
}

.fade-top {
    top: 0;
    background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0) 100%);
}

.fade-bottom {
    bottom: 0;
    background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%);
}

.fade-left {
    left: 0;
    background: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0) 100%);
}

.fade-right {
    right: 0;
    background: linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0) 100%);
}

/* порядок слоёв: marquee__inner ниже всех масок */
.cursor-glow {
    z-index: 1;
}

.marquee__inner {
    z-index: 0;
}

/* общий стиль для всех трёх рядов */
.marquee__inner,
.marquee__inner_1,
.marquee__inner_2 {
    margin-top: 10px;
    display: flex;
    gap: 12px;
    /* чтобы всё влезало в одну строку и дублировалось */
    flex-wrap: nowrap;
    min-width: 100%;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.marquee__inner {
    animation: marquee-scroll 20s linear infinite;
    animation-delay: 0s;
}

/* второй ряд — стартует уже через 8 секунд своего цикла */
.marquee__inner_1 {
    animation: marquee-scroll 25s linear infinite reverse;
    /* отрицательная задержка «отматывает» анимацию вперёд на 8 секунд */
    animation-delay: -8s;
}

/* третий ряд — сразу на полпути своего цикла */
.marquee__inner_2 {
    animation: marquee-scroll 30s linear infinite;
    animation-delay: -15s;
}


/* сами элементы */
.marquee__item {
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 16px;
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 20px;
    color: #fafafa;
    white-space: nowrap;
    opacity: 0.8;
}

/* ключевые кадры — прокрутка влево ровно на 50% ширины содержимого */
@keyframes marquee-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}


/* styles.css */
/* Секция «Оставьте информацию…» */
.contact-section {
    background-color: #000;
    color: #fff;
}

.contact-form-info::placeholder {
    color: rgba(250, 250, 250, 0.2);
}

/* Внутренняя сетка: две колонки */
.contact-section__inner {
    display: grid;
    grid-template-columns: 4fr 7fr;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

.contact-section__inner_1 {
    display: grid;
    grid-template-columns: 7fr 4fr;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Контактные данные */
.contact-info__item {
    margin-bottom: 24px;
}

.contact-info__label {
    display: block;
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.1;
    margin-bottom: 4px;
    letter-spacing: 0;
}

.contact-info__value {
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #fafafa;
    text-decoration: none;
    line-height: 1.2;
    letter-spacing: 0;
    opacity: 0.6;
}

.contact-info__value address {
    font-style: normal;
}

@media (max-width: 768px) {
    .contact-section__inner {
        grid-template-columns: 1fr; /* Одна колонка */
        grid-template-rows: auto auto; /* Две строки */
        gap: 30px;
    }

    .contact-section__inner_1 {
        grid-template-columns: 1fr; /* Одна колонка */
        grid-template-rows: auto auto; /* Две строки */
        gap: 30px;
    }

    /* Форма будет под контактами */
    .contact-info {
        order: 2; /* Перемещаем контакты вниз */
    }

    .contact-form {
        order: 1; /* Форма будет сверху */
    }
}

/* Форма */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-form__row {
    top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.contact-form input {
    width: 100%;
    padding: 12px 16px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #fff;
    background-color: #121212;
    border: 1px solid #121212;
    border-radius: 7px;
}

.contact-form input::placeholder {
    color: rgba(250, 250, 250, 0.2);
}

/* Кнопка */
.btn--submit {
    margin-top: 8px;
    padding: 14px;
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 16px;
    background-color: #087647;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* общий контейнер для чекбокса и текста */
/* Basic styling for the checkbox container */
.checkbox-container {
    display: block;
    position: relative;
    padding-left: 24px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #FAFAFA;
    opacity: 0.3;
    user-select: none;
}

.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    border: 2px solid #FAFAFA;
    border-radius: 4px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25) inset;
    background-color: transparent;
}

.checkbox-container input:checked ~ .checkmark {
    border-color: #4CAF50;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}

.checkbox-container .checkmark:after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #4CAF50;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Styling for the policy link */
.policy-link {
    color: #fafafa;
    /* A green color for the link, adjust to your brand */
    opacity: 1;
    text-decoration: underline;
    /* Underline the link */
    font-weight: 500;
    /* Make it a bit bolder if desired */
}

.policy-link:hover {
    text-decoration: none;
    /* Remove underline on hover */
}

/* Адаптив */
@media (max-width: 900px) {
    .contact-section__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-section__inner_1 {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-form__row {
        grid-template-columns: 1fr;
    }
}

/* styles.css */
/* CTA-секция «Работайте эффективно…» */
.cta-section {
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 0;

}

.cta-section__inner {
    max-width: 90%;
    height: 550px;
    margin: 0 auto;
    text-align: center;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #00100a;

    background-image:
        url("/images/banner_back.png");
    background-blend-mode: screen;
    background-size: cover;
}

/* Малый прытекст */
.cta-section__pretitle {
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: #FFFFFF;
    margin-bottom: 16px;
    opacity: 0.5;
}

/* Заголовок */
.cta-section__title {
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: 80px;
    text-align: center;
    margin-bottom: 40px;
    letter-spacing: 0;
    color: #FFFFFF;
    line-height: 0.8;
    text-transform: uppercase;
}

@media (max-width: 768px) {

    .cta-section__inner {
        height: 316px;
    }

    .cta-section__title {
        font-size: 34px;
        margin-bottom: 40px;
    }

    .cta-section__pretitle {

        opacity: 0;
    }
}

/* Кнопка «Попробовать» */
.btn--try {
    background-color: #005c40;
    color: #FFFFFF;
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 16px;
    padding: 12px 32px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* styles.css */
/* Футер */
.site-footer {
    background-color: #000;
    /* или #060606 по вашему макету */
    color: #fafafa;
    padding-top: 60px;
}

.site-footer__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Брендинг */
.footer-brand__logo {
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0;
    margin-bottom: 12px;
    color: #fafafa;
}

.footer-brand__tagline {
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.16px;
    color: #fafafa;
    opacity: 0.6;
    margin: 0;
}

/* Навигация в футере */
.footer-nav__title {
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 12px;
    line-height: 1.1;
    color: #fff;
    text-transform: uppercase;
}

.footer-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-nav__list li {
    margin-bottom: 8px;
}

.footer-nav__list a {
    font-family: Roboto, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    color: #fafafa;
    text-decoration: none;
    opacity: 0.6;
}

.footer-nav__list a:hover {
    opacity: 1;
}

/* Нижний бар с копирайтом */
.site-footer__bottom {
    padding: 16px 20px;
    text-align: left;
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 14px;
    opacity: 0.6;
}

@media (max-width: 768px) {


    /* Брендинг */
    .footer-brand__logo {
        font-size: 16px;
    }

    .footer-brand__tagline {
        font-size: 14px;
        line-height: 1.2;
    }

    /* Навигация в футере */
    .footer-nav__title {
        font-family: Inter, sans-serif;
        font-weight: 500;
        font-size: 14px;
        margin-bottom: 12px;
        line-height: 1.1;
        color: #fff;
        text-transform: uppercase;
    }

    .footer-nav__list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .footer-nav__list li {
        margin-bottom: 8px;
    }

    .footer-nav__list a {
        font-family: Roboto, sans-serif;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0;
        color: #fafafa;
        text-decoration: none;
        opacity: 0.6;
    }

    .footer-nav__list a:hover {
        opacity: 1;
    }

    /* Нижний бар с копирайтом */
    .site-footer__bottom {
        padding: 16px 20px;
        text-align: left;
        font-family: Inter, sans-serif;
        font-weight: 400;
        font-size: 14px;
        opacity: 0.6;
    }
}

.privacy-section {
    background-color: #000;
    color: #fafafa;
    padding: 80px 20px;
}

.privacy-list {
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #fafafa;
    opacity: 0.6;
}

.privacy-list li {
    margin-bottom: 20px;
}

.privacy-list ol {
    margin-top: 10px;
}

/* Прелоадер — фон на весь экран */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000; /* тёмный фон */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.6s ease;
}

/* Индикатор загрузки (круг) */
.spinner {
    width: 50px;
    height: 50px;
    border: 6px solid #087647;         /* зелёный контур */
    border-top: 6px solid transparent; /* верхняя часть — прозрачная */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.privacy-list {
    list-style: none;
    counter-reset: none;
}
.privacy-list li {
    list-style: none;
}

.privacy-titles {
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: 16px;
    text-align: center;
    padding: 20px 0;
    text-transform: uppercase;
}

.logo_link{
    text-decoration: none;
}

.why-us-grid.dragging {
    cursor: grabbing;
    user-select: none;
}

@media (min-width: 769px) {
    .btn.btn--primary:active,
    .btn.btn--try:active,
    .btn.btn--submit:active{
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }


}
.auth-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* высота на весь экран */
    background-color: #000; /* фон страницы (если нужен) */
}

.auth-container {
    background-color: #111;
    padding: 40px;
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 0 30px rgba(0, 92, 64, 0.3);
    border: 1px solid #005C40;
}

.auth-container h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 30px;
    line-height: 0.9;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #FAFAFA;
    display: inline-block;
    text-align: center;
}

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

.form-group label {
    display: block;
    font-size: 14px;
    margin-bottom: 6px;
    color: #aaa;
}

.form-group input {
    width: 100%;
    padding: 12px 14px;
    background-color: #222;
    border: 1px solid #333;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    transition: border 0.2s ease;
}

.form-group input:focus {
    outline: none;
    border-color: #004933;
}

.btn-primary {
    background-color: #005C40;
    border: none;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    padding: 14px 20px;
    width: 100%;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.1s ease;
}

.btn-primary:active {
    transform: scale(0.96);
}

.auth-footer {
    margin-top: 20px;
    text-align: center;
    font-size: 13px;
    color: #888;
}

@media (max-width: 480px) {
    .auth-container {
        margin: 0 16px;
        padding: 30px 20px;
    }
}

.dashboard-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    background-color: #001e2b;
    color: #fff;
}

.user-menu {
    display: flex;
    gap: 10px;
    align-items: center;
}

.dashboard-content {
    display: flex;
    flex: 1;
}

.sidebar {
    width: 220px;
    background-color: #f4f4f4;
    padding: 20px;
}

.sidebar nav ul {
    list-style: none;
    padding: 0;
}

.sidebar nav li {
    margin-bottom: 10px;
}

.main-content {
    flex: 1;
    padding: 30px;
    background-color: #fff;
}

.dashboard-footer {
    padding: 15px 30px;
    background-color: #eee;
    text-align: center;
}