:root {
    --bg-dark: #000000;
    --primary-orange: #FF6B00;
    --secondary-blue: #29abe2;
    --text-white: #ffffff;
}

body {
    margin: 0;
    font-family: 'Inter', -apple-system, sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-white);
    line-height: 1.6;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 40px;  /* Задаем только бока */
    padding-right: 40px; /* Задаем только бока */
    position: relative;
    z-index: 10;
}

.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    text-align: left;
    position: relative;
}

.hero-content { max-width: 800px; }

.hero h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1;
    margin: 0 0 40px 0;
    font-weight: 800;
    text-transform: uppercase;
}
.hero h1 span { color: var(--primary-orange); }

.hero-desc {
    font-size: 1.25rem;
    opacity: 0.9;
    margin-bottom: 50px;
    max-width: 650px;
}

.hero-btns { display: flex; gap: 20px; flex-wrap: wrap; }

.btn-outline {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    padding: 18px 30px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    transition: 0.3s;
}
.btn-outline:hover { border-color: var(--primary-orange); background: rgba(255,107,0,0.1); }
.btn-outline svg { color: var(--primary-orange); }

/* СЕКЦИИ КОНТЕНТА */
section { padding: 100px 0; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; }

.img-box {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.8);
}

.img-box img {
    width: 100%;
    display: block;
    transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1), filter 0.5s ease;
}

.content h2 { font-size: 3rem; line-height: 1.1; margin-bottom: 35px; font-weight: 800; }
.content p { font-size: 1.1rem; opacity: 0.8; margin-bottom: 25px; }

@keyframes float {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(1deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

/* Эффект для всех фото при наведении на контейнер */
.img-box:hover img {
    transform: scale(1.07); /* Приближение */
    animation: float 4s ease-in-out infinite; /* Запуск покачивания */
    filter: brightness(1.1); /* Легкое высветление */
}

/* Добавим индивидуальное свечение для каждой секции */
/* Свечение для фото девушки (голубое) */
#channels .img-box:hover {
    box-shadow: 0 0 50px rgba(41, 171, 226, 0.3);
    transition: 0.5s;
}

/* Свечение для фото мужчины (оранжевое) */
#bots .img-box:hover {
    box-shadow: 0 0 50px rgba(255, 107, 0, 0.3);
    transition: 0.5s;
}

/* ОПТИМИЗАЦИЯ ПОРЯДКА ДЛЯ БЛОКА #bots (ЗЕРКАЛЬНЫЙ ВИД: Content | Image) */
/* Элементы в DOM: img-box (1) и content (2) */
#bots .grid .img-box {
    order: 2; /* Картинка уходит направо */
}
#bots .grid .content {
    order: 1; /* Контент уходит налево */
}
/* КОНЕЦ ОПТИМИЗАЦИИ */

/* ОФОРМЛЕНИЕ СПИСКОВ С SVG */
.feature-list { margin: 40px 0; }
.feature-item { display: flex; gap: 20px; margin-bottom: 30px; align-items: flex-start; }
.icon-wrap {
    flex-shrink: 0; width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 107, 0, 0.1); border-radius: 8px; color: var(--primary-orange);
}
.feature-text b { display: block; font-size: 1.2rem; margin-bottom: 6px; color: #fff; }
.feature-text span { font-size: 1rem; opacity: 0.6; display: block; line-height: 1.4; }

.btn-action {
    display: inline-block; padding: 22px 50px; border-radius: 4px;
    text-decoration: none; font-weight: 800; text-transform: uppercase;
    letter-spacing: 1px; transition: 0.4s;
}
.btn-blue { background: var(--secondary-blue); color: white; }
.btn-orange { background: var(--primary-orange); color: white; }
.btn-action:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.4); }

/* ПОЧЕМУ МЫ (КАРТОЧКИ) */
.why-us {
    position: relative;
    padding: 140px 0;
    /* 1. Делаем сетку ярче (0.12 вместо 0.05) */
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: center center;
    overflow: hidden;
}

/* Затемнение по краям (теперь оно гарантированно под текстом) */
.why-us::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at center, transparent 10%, var(--bg-dark) 90%);
    pointer-events: none;
    z-index: 1; /* Самый нижний слой */
}

/* 2. ИСПРАВЛЯЕМ ЗАГОЛОВОК */
.why-us h2 {
    position: relative;
    z-index: 5; /* Выводим поверх затемнения */
    text-align: center;
    font-size: 3.2rem;
    margin-bottom: 80px;
    font-weight: 800;
}

.why-us .cards {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    /* Даем огромный запас для теней и увеличения */
    padding: 50px 30px;
    /* Убираем отрицательные отступы, если они были,
       и центрируем сетку */
    max-width: 100%;
    margin: 0 auto;
    overflow: visible;
}

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.card {
    background: rgba(10, 10, 10, 0.8); /* Чуть плотнее фон, чтобы сетка не мешала тексту */
    border: 1px solid rgba(255,255,255,0.06);
    padding: 50px 40px;
    border-radius: 8px;
    text-align: center;
    position: relative; /* Важно для позиционирования сканера */
    overflow: hidden; /* Чтобы луч не вылетал за границы карточки */
    transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(10px);
}

/* Сам луч сканера */
.card::after {
    content: '';
    position: absolute;
    top: -100%; /* Начальная позиция выше карточки */
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(255, 107, 0, 0.1), /* Мягкое оранжевое свечение */
        var(--primary-orange),  /* Яркая линия луча */
        transparent
    );
    opacity: 0.4;
    z-index: 1;
    animation: scanning 4s linear infinite;
}

/* Задержки для каждой карточки, чтобы они сканировались не одновременно */
.card:nth-child(1)::after { animation-delay: 0s; }
.card:nth-child(2)::after { animation-delay: 1.3s; }
.card:nth-child(3)::after { animation-delay: 2.6s; }

/* Анимация движения луча */
@keyframes scanning {
    0% { top: -100%; }
    30% { top: 100%; }
    100% { top: 100%; } /* Пауза внизу перед новым циклом */
}

/* Усиление эффекта при наведении */
.card:hover {
    transform: translateY(-15px) scale(1.03);
    border-color: var(--primary-orange);
    background: rgba(255, 107, 0, 0.08);
    box-shadow: 0 20px 40px rgba(255, 107, 0, 0.15);
}

.card:hover::after {
    opacity: 0.8; /* Луч становится ярче при наведении */
    animation-duration: 2s; /* Сканирование ускоряется */
}
.card h3 { color: var(--primary-orange); margin-bottom: 25px; font-size: 1.6rem; }
.card p { opacity: 0.7; font-size: 1.05rem; }

/* ПОДВАЛ (FOOTER)  */
footer {
    padding: 150px 0 100px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    background-color: #000; /* Чистый черный фон */
    overflow: hidden; /* Чтобы свечение не выходило за границы */
}

/* Создаем сам неоновый горизонт через псевдоэлемент */
footer::after {
    content: '';
    position: absolute;
    bottom: -100px; /* Немного приподняли */
    left: 50%;
    transform: translateX(-50%);
    width: 100%; /* Расширили на всю ширину */
    height: 250px;
    /* 1. Увеличили прозрачность с 0.15 до 0.6 */
    background: radial-gradient(ellipse at center, rgba(255, 107, 0, 0.6) 0%, transparent 75%);
    /* 2. Чуть уменьшили блюр, чтобы центр был плотнее */
    filter: blur(50px);
    z-index: 1;
    animation: horizonBreathe 6s ease-in-out infinite;
    pointer-events: none;
}

/* Добавим еще одно маленькое голубое свечение для интереса */
footer::before {
    content: '';
    position: absolute;
    top: -1px; /* Прямо на верхней линии разделителя */
    left: 30%;
    width: 40%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--secondary-blue), transparent);
    box-shadow: 0 0 20px var(--secondary-blue);
    opacity: 0.3;
    z-index: 2;
}

.footer-logo { font-size: 3.5rem; font-weight: 900; color: var(--primary-orange); margin-bottom: 20px; }
.footer-contacts a { color: white; text-decoration: none; display: block; margin: 15px 0; font-size: 1.4rem; }

@media (max-width: 968px) {
    .grid { grid-template-columns: 1fr; gap: 50px; }
    .hero { text-align: center; }
    .hero-btns { justify-content: center; }

    /* ИСПРАВЛЕНИЕ: В мобильной версии возвращаем порядок к стандартному DOM: img-box (1), content (2) */
    #bots .grid .img-box,
    #bots .grid .content {
        order: 0; /* Сбрасываем order, чтобы использовать порядок в HTML */
    }

    /* Исправляем карточки для мобилок */
    .why-us .cards {
        grid-template-columns: 1fr;
    }

    .why-us h2 { font-size: 2.2rem; }
    .content h2 { font-size: 2.2rem; }

    footer { background-size: 250px; }
}

@keyframes horizonBreathe {
    0%, 100% {
        opacity: 0.6; /* Было 0.5 */
        transform: translateX(-50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.2); /* Чуть больше раздувается */
    }
}

/* СТИЛИ ДЛЯ БЛОКА-МАНИФЕСТА */
.manifesto-box {
    position: relative;
    max-width: 700px;
    margin: 0 auto 60px; /* Отступ снизу */
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 5px solid var(--primary-orange); /* Оранжевый акцент слева */
    background: rgba(10, 10, 10, 0.7);
    border-radius: 4px;
    text-align: left;
    transition: 0.5s;
    z-index: 5;
    box-shadow: 0 0 10px rgba(255, 107, 0, 0.1);
}

.manifesto-box p {
    font-size: 1.2rem;
    line-height: 1.5;
    opacity: 1; /* Делаем текст полностью видимым */
    margin: 0; /* Убираем лишние отступы */
}

.manifesto-box:hover {
    border-color: var(--primary-orange);
    box-shadow: 0 0 25px rgba(255, 107, 0, 0.3);
}

.manifesto-box strong {
    color: var(--primary-orange);
    font-weight: 800;
}

/* Контейнер для всей анимации */
.hero-animation {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    overflow: hidden;
    z-index: 1; /* Чтобы было за текстом */
}

/* 1. ЦИФРОВАЯ ПЫЛЬ (Частицы) */
.digital-dust {
    position: absolute;
    width: 100%; height: 100%;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255, 107, 0, 0.15) 1px, transparent 1px),
        radial-gradient(circle at 80% 70%, rgba(41, 171, 226, 0.15) 1px, transparent 1px);
    background-size: 100px 100px;
    animation: dustMove 20s linear infinite;
}

@keyframes dustMove {
    from { transform: translateY(0); }
    to { transform: translateY(-100px); }
}

/* Канвас на задний план */
#constellationCanvas {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
}

/* 2. САМОЛЕТ */
.plane-container {
    position: absolute;
    width: 40px;
    height: 40px;
    z-index: 2;
    animation: planeMove 20s ease-in-out infinite;
    transform-origin: center center;
}

.plane-body {
    position: relative;
    width: 100%;
    height: 100%;
    transform: rotate(45deg); /* Базовый поворот носом вперед */
}

.tg-plane {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
}

/* Оставляем ту же анимацию самолета и цветов, что была раньше */
@keyframes planeMove {
    0%   { left: 10%; top: 20%; transform: rotate(-10deg); }
    25%  { left: 80%; top: 30%; transform: rotate(20deg); }
    45%  { transform: rotate(150deg); }
    50%  { left: 50%; top: 80%; transform: rotate(180deg); }
    75%  { left: 20%; top: 60%; transform: rotate(230deg); }
    90%  { transform: rotate(340deg); }
    100% { left: 10%; top: 20%; transform: rotate(350deg); }
}

/* Чтобы текст был поверх анимации */
.hero .container {
    position: relative;
    z-index: 10;
}

footer .container {
    position: relative;
    z-index: 10; /* Текст будет выше свечения */
}

footer .hero-animation {
    opacity: 1.6; /* Сделаем анимацию в подвале чуть приглушеннее, чтобы не мешала читать контакты */
    pointer-events: none; /* Чтобы канвас не перехватывал клики по ссылкам */
}

/* Разрешаем канвасу в футере видеть мышь для созвездий,
   но саму обертку делаем прозрачной для кликов */
#constellationFooter {
    pointer-events: all;
}

/* 3. МОДАЛЬНОЕ ОКНО (GLASSMORHISM)      */
.modal-backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.85); /* Затемненный фон */
  display: none; /* Скрыто по умолчанию */
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
    background: rgba(10, 10, 10, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 40px;
    width: 90%; /* Сделаем его 90% для мобилок */
    max-width: 450px;
    position: relative;
    box-shadow: 0 0 50px rgba(255, 107, 0, 0.3), 0 20px 60px rgba(0, 0, 0, 0.9);

    /* ЭФФЕКТИВНЫЙ ФИКС ДЛЯ МОБИЛОК: Скролл внутри */
    max-height: 90vh; /* Максимальная высота 90% от экрана */
    overflow-y: auto;

    /* ДОБАВЛЕН ФИКС: Скрываем горизонтальную прокрутку */
    overflow-x: hidden;

    /* Эффект матового стекла */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ДОБАВЛЕН ФИКС: Перенос очень длинных слов */
.modal-content p, .modal-content label {
  overflow-wrap: break-word; /* Современная альтернатива word-break: break-all/break-word */
}

.modal-close-btn {
  position: absolute;
  top: 15px; right: 15px;
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  opacity: 0.5;
  transition: 0.3s;
}

.modal-close-btn:hover {
  color: var(--primary-orange);
  opacity: 1;
}

.modal-content h2 { font-size: 2rem; margin-top: 0; }
.modal-desc { opacity: 0.7; margin-bottom: 30px; }

/* Стили для инпутов, селектов и лейблов */
.modal-content label {
  display: block;
  font-size: 0.9rem;
  opacity: 0.8;
  margin-top: 20px;
  margin-bottom: 8px;
  font-weight: 700;
}

.modal-content input[type="text"],
.modal-content select {
  width: 100%;
  padding: 15px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: var(--text-white);
  transition: border-color 0.3s, box-shadow 0.3s;
  -webkit-appearance: none; /* Для стилизации select */
  appearance: none;
}

.modal-content select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FF6B00%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
}

.modal-content input[type="text"],
.modal-content select {
  width: 100%;
  padding: 15px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: var(--text-white);
  transition: border-color 0.3s, box-shadow 0.3s;
  -webkit-appearance: none; /* Для стилизации select */
  appearance: none;

  /* ДОБАВЛЕН ФИКС: Убеждаемся, что поля могут сжиматься */
  min-width: 0;
}

/* Стили для переключателя контакта */
.contact-toggle {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.contact-toggle input[type="radio"] {
  display: none;
}

.contact-toggle label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 15px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: 0.3s;
  flex-grow: 1;
  opacity: 0.7;
  margin: 0; /* Переопределяем лейблы */
}

.contact-toggle label svg {
margin-right: 5px;
width: 22px; /* Увеличили */
height: 22px; /* Увеличили */
}

.contact-toggle label:hover {
  border-color: var(--primary-orange);
  opacity: 1;
}

.contact-toggle input[type="radio"]:checked + label {
  background: var(--secondary-blue);
  border-color: var(--secondary-blue);
  color: white;
  opacity: 1;
  box-shadow: 0 0 10px rgba(41, 171, 226, 0.4);
}

.modal-content select option {
background: #111; /* Темный фон для выпадающих опций */
color: var(--text-white);
padding: 10px;
}

/* Кнопка отправки и политика */
.modal-submit-btn {
  width: 100%;
  margin-top: 30px;
  padding: 18px 0;
}

.privacy-text {
  text-align: center;
  font-size: 0.8rem;
  opacity: 0.6;
  margin-top: 15px;
}

.privacy-text a {
  color: var(--secondary-blue);
  text-decoration: none;
  font-weight: 700;
  transition: color 0.3s;
}
.privacy-text a:hover {
  color: var(--primary-orange);
}
/* Стили для окна успеха */
.success-icon-anim {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    animation: scaleIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.success-icon-anim svg {
    filter: drop-shadow(0 0 15px rgba(255, 107, 0, 0.4));
}

@keyframes scaleIn {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Дополнительный класс для центрирования контента */
.modal-content[style*="text-align: center"] {
    display: flex;
    flex-direction: column;
    align-items: center;
}