/* Общие стили */
body {
    margin: 0; padding: 0; font-family: 'Roboto', sans-serif;
    color: #fff; /* Цвет текста по умолчанию (для темных секций) */
    overflow-x: hidden; /* Скрываем горизонтальную прокрутку */
    position: relative; /* Требуется для позиционирования ::before */
}

 /* Анимированный градиентный фон */
 body::before {
     content: '';
     position: fixed; /* Фиксируем фон */
     top: 0; left: 0; right: 0; bottom: 0;
     background: linear-gradient(135deg, #007bff, #00c6ff, #9d4edd, #d00000, #ff7f50); /* Градиент */
     background-size: 400% 400%;
     animation: gradientAnimation 25s ease infinite; /* Чуть медленнее анимация */
     z-index: -1; /* Отображаем позади контента */
 }
 @keyframes gradientAnimation {
     0% { background-position: 0% 50%; }
     50% { background-position: 100% 50%; }
     100% { background-position: 0% 50%; }
 }

.container {
    max-width: 1200px; margin: 0 auto; padding: 0 20px; /* Центрирование и отступы по бокам */
}
section {
     padding: 80px 0; /* Отступы между секциями */
     text-align: center; /* Центрирование содержимого секций */
     position: relative; /* Для z-index контента */
     z-index: 1; /* Убедимся, что контент поверх фона */
}
 /* Чередование фонов секций */
 #hero { /* Герой - первый, фон от body::before */
      background-color: transparent;
      padding-top: calc(80px + 40px); /* Уменьшил отступ сверху для ПК версии */
      min-height: calc(100vh - 80px); /* Высота минус высота шапки */
      display: flex;
      align-items: center;
      justify-content: center;
 }
 #services { background-color: rgba(255, 255, 255, 0.98); color: #333; box-shadow: 0 0 20px rgba(0,0,0,0.2); }
 #about { background-color: rgba(0, 0, 0, 0.8); color: #fff; }
 #catalog-section { background-color: rgba(255, 255, 255, 0.98); color: #333; box-shadow: 0 0 20px rgba(0,0,0,0.2); padding: 60px 0; }
 #waf-section { background-color: rgba(240, 255, 245, 0.98); color: #333; } /* Светло-зеленый фон для WAF */
 #bot-constructor-section { /* ИЗМЕНЕНИЕ: Новый блок */
    background-color: rgba(0, 0, 0, 0.8); /* Темный фон, чтобы текст был светлым */
    color: #fff;
 }


h2, h3 {
     font-weight: 700;
     color: inherit; /* Наследует цвет от родителя (секции) */
}
 /* Тени для текста на темном фоне */
 #hero h1, #hero p,
 #about h2, #about p,
 #bot-constructor-section h2, #bot-constructor-section p { /* ИЗМЕНЕНИЕ: добавлена #bot-constructor-section */
     text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
 }
 /* Убираем тени на светлом фоне (WAF тоже светлый) */
 #services h2, #services h3, #services p,
 #catalog-section h2, #catalog-section p,
 #catalog-section .catalog-cta,
 #waf-section h2, #waf-section p, #waf-section h3, #waf-section h4 {
     text-shadow: none;
 }
 /* Тень для футера (на темном фоне, но без сильного контраста) */
 footer p {
     text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
 }


p {
    font-weight: 300;
    line-height: 1.6;
     color: inherit; /* Наследует цвет */
}

/* Шапка (Header) */
header {
    background-color: rgba(0, 0, 0, 0.8);
    padding: 15px 0;
    position: sticky; /* Фиксированная шапка при скролле */
    top: 0;
    z-index: 10; /* Высокий z-index, чтобы быть поверх всего */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
header .container {
    display: flex;
    justify-content: space-between; /* Распределяем элементы по краям */
    align-items: center;
    flex-wrap: wrap; /* Перенос элементов на новую строку при сужении */
}
.logo {
    font-size: 1.8em;
    font-weight: 900;
    color: #00c6ff;
    text-decoration: none;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
     margin-right: 20px; /* Отступ справа от лого */
}
nav {
    flex-grow: 1; /* Меню занимает все доступное место */
    text-align: left; /* Выравнивание меню по левому краю после лого */
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Элементы меню в строку */
    flex-wrap: wrap; /* Перенос элементов меню при сужении */
    gap: 20px; /* Расстояние между пунктами меню */
}
nav ul li {
    margin: 0;
}
nav a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: 1.1em;
    transition: color 0.3s ease;
    white-space: nowrap; /* Запрет переноса слов в меню */
}
nav a:hover {
    color: #00c6ff;
}
header .language-switcher {
    display: none;
}

/* Кнопка-гамбургер для мобильного меню */
.hamburger-menu {
    display: none; /* Скрываем на ПК */
    font-size: 1.8em;
    color: #fff;
    cursor: pointer;
    z-index: 20; /* Выше, чем меню */
    position: absolute;
    right: 20px; /* Отступ справа */
    top: 50%;
    transform: translateY(-50%);
}

/* Мобильное меню (выдвижное) */
.mobile-nav {
    display: none; /* Изначально скрыто */
    position: fixed;
    top: 0;
    right: -300px; /* Скрыто за пределами экрана */
    width: 250px; /* Ширина меню */
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
    z-index: 15; /* Поверх контента, но под кнопкой */
    transition: right 0.3s ease-out;
    padding-top: 80px; /* Отступ для лого/закрытия */
    box-sizing: border-box;
}
.mobile-nav.active {
    right: 0; /* Выдвигаем меню */
}
.mobile-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Расстояние между пунктами */
}
.mobile-nav ul li a {
    display: block;
    padding: 10px 20px;
    color: #fff;
    text-decoration: none;
    font-size: 1.2em;
    transition: background-color 0.3s ease;
}
.mobile-nav ul li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #00c6ff;
}
.close-menu {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2em;
    color: #fff;
    cursor: pointer;
}


/* Секция Героя (Hero) */
#hero h1 {
    font-size: 3.5em; margin-bottom: 20px; font-weight: 900; line-height: 1.2;
    padding-top: 0; /* Уменьшаем отступ сверху заголовка для ПК */
}
#hero p {
    font-size: 1.5em; font-weight: 300; margin-bottom: 40px;
}
.cta-button {
    display: inline-block;
    background-color: #00c6ff; color: #000; padding: 15px 30px;
    font-size: 1.2em; font-weight: 700; text-decoration: none; border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.cta-button:hover {
    background-color: #00b0e0;
    transform: translateY(-3px);
}

/* Секция Сервисов */
#services h2 { margin-bottom: 50px; }
.services-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px; text-align: left;
}
.service-item {
     background-color: rgba(255, 255, 255, 0.98); padding: 30px; border-radius: 8px;
     box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease;
     color: #333;
     display: flex; flex-direction: column; align-items: flex-start;
}
 .service-item:hover {
     transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.2);
 }
.service-item h3 {
     margin-top: 0; margin-bottom: 10px; color: #007bff; flex-grow: 1; word-wrap: break-word; width: 100%;
}
 .service-item p {
     margin-bottom: 0; color: #555; flex-grow: 1; word-wrap: break-word; width: 100%;
 }
 .service-icon {
     font-size: 2.5em; color: #007bff; margin-bottom: 15px; width: 100%; text-align: center;
 }


/* Секция О Проекте */
 #about p {
     max-width: 800px; margin: 0 auto;
     font-size: 1.2em; font-weight: 300; color: #eee;
 }
 .highlight {
     font-weight: 500;
     color: #00c6ff;
 }
  .project-name-highlight { font-weight: 700; color: #00c6ff; }
 .former-name-lowlight { font-weight: 400; opacity: 0.8; }


/* Секция Каталога */
#catalog-section h2 { margin-bottom: 20px; }
#catalog-section p { max-width: 800px; margin: 0 auto 30px; font-size: 1.2em;}
.catalog-cta {
    display: inline-block;
    background-color: #ffc107; color: #212529; padding: 15px 30px;
    font-size: 1.2em; font-weight: 700; text-decoration: none; border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.catalog-cta:hover { background-color: #e0a800; transform: translateY(-3px); }


/* Секция WAF */
#waf-section h2 {
    margin-bottom: 20px;
    color: #212529;
}
#waf-section .waf-intro {
    max-width: 800px;
    margin: 0 auto 40px;
    font-size: 1.2em;
    color: #495057;
}
#waf-section .waf-intro .highlight {
    color: #28a745; /* Зеленый цвет для акцента */
    font-weight: 500;
}
#waf-section .waf-features-title {
    margin-top: 50px;
    margin-bottom: 30px;
    font-size: 1.8em;
    color: #212529;
}
.waf-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 2 или 3 колонки, зависит от ширины */
    gap: 25px;
    text-align: left;
    margin-top: 40px; /* Отступ после заголовка модулей */
    margin-bottom: 50px; /* Отступ перед кнопкой */
}
.waf-feature-item {
    background-color: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 100, 0, 0.08);
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: flex-start;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.waf-feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 100, 0, 0.12);
}
.waf-feature-icon {
    font-size: 1.8em;
    color: #007bff; /* Синий цвет для иконок, как в скриншоте */
    margin-right: 20px;
    margin-top: 3px;
    flex-shrink: 0;
}
.waf-feature-content h4 {
    margin: 0 0 5px 0;
    font-size: 1.2em;
    font-weight: 700;
    color: #212529;
}
.waf-feature-content p {
    margin: 0;
    font-size: 0.95em;
    color: #6c757d;
    line-height: 1.5;
}
/* Стили для кнопки "Получить защиту бесплатно" как на скриншоте "Чат поддержки" */
.waf-cta {
    display: inline-flex; /* Используем flex для выравнивания иконки и текста */
    align-items: center; /* Центрируем по вертикали */
    justify-content: center; /* Центрируем по горизонтали */
    background-color: #007bff; /* Яркий синий цвет */
    color: #fff;
    padding: 15px 40px;
    font-size: 1.2em;
    font-weight: 600; /* Чуть тоньше, чем 700, но все равно жирный */
    text-decoration: none;
    border-radius: 50px; /* Полностью скругленные углы */
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 6px 15px rgba(0, 123, 255, 0.4); /* Мягкая тень */
}
.waf-cta:hover {
    background-color: #0056b3; /* Более темный синий при наведении */
    transform: translateY(-3px); /* Эффект приподнятия */
    box-shadow: 0 8px 20px rgba(0, 123, 255, 0.5); /* Усиленная тень */
}
.waf-cta i { /* Стиль для иконки внутри кнопки */
    margin-right: 10px; /* Отступ справа от иконки */
    font-size: 1.3em; /* Чуть больше иконка */
}

/* === ИЗМЕНЕНИЕ: Стили для секции конструктора ботов === */
#bot-constructor-section h2 {
    margin-bottom: 20px;
    color: #fff;
}
#bot-constructor-section p {
    max-width: 800px;
    margin: 0 auto 40px;
    font-size: 1.2em;
    color: #eee;
}
#bot-constructor-section .highlight {
    color: #8200ff; /* Фиолетовый акцент для бота */
    font-weight: 500;
}
/* Кнопка "Создать первого бота" */
.bot-constructor-cta {
    display: inline-flex; /* Flex для выравнивания иконки и текста */
    align-items: center;
    justify-content: center;
    background-color: #663399; /* Фирменный фиолетовый для Telegram-бота */
    color: #fff;
    padding: 15px 40px;
    font-size: 1.2em;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px; /* Полностью скругленные углы */
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 6px 15px rgba(102, 51, 153, 0.4); /* Мягкая тень */
}
.bot-constructor-cta:hover {
    background-color: #52297A; /* Темнее при наведении */
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(102, 51, 153, 0.5); /* Усиленная тень */
}
.bot-constructor-cta i {
    margin-right: 10px;
    font-size: 1.3em;
}


/* Подвал (Footer) */
footer {
    background-color: rgba(0, 0, 0, 0.9); color: #ccc; padding: 30px 20px;
    text-align: center; font-size: 0.9em;
}
 footer .container { display: flex; flex-direction: column; align-items: center; gap: 15px; }
 footer nav ul { gap: 15px; }
 footer nav a { color: #ccc; font-weight: 400; font-size: 1em; }
 footer nav a:hover { color: #fff; }

/* --- Плавающий переключатель языков --- */
.floating-language-switcher {
    position: fixed; bottom: 20px; right: 20px; z-index: 100; text-align: right;
}
.language-button {
    background-color: rgba(0, 0, 0, 0.7); color: #fff; border: 1px solid #fff;
    border-radius: 5px; padding: 10px 15px; font-size: 1.1em; cursor: pointer;
    display: flex; align-items: center; transition: background-color 0.3s ease, border-color 0.3s ease;
}
 .language-button i { margin-right: 8px; font-size: 1.2em; }
.language-button:hover { background-color: rgba(0, 0, 0, 0.9); border-color: #00c6ff; }
.language-list {
    position: absolute; bottom: calc(100% + 10px); right: 0;
    background-color: rgba(0, 0, 0, 0.8); border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
     min-width: 150px;
}
.language-list.show { opacity: 1; visibility: visible; }
.language-list ul { list-style: none; margin: 0; padding: 10px 0; }
.language-list li { margin: 0; padding: 0; }
.language-list li a {
    display: block; padding: 10px 15px; color: #fff; text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease; text-align: left;
}
.language-list li a:hover { background-color: rgba(255, 255, 255, 0.1); color: #00c6ff; }
.language-list li a.active { font-weight: 700; color: #00c6ff; }


/* --- Cookie Consent Banner --- */
.cookie-banner {
    position: fixed; bottom: 0; left: 0; right: 0;
    background-color: rgba(0, 0, 0, 0.9); color: #fff;
    padding: 15px 20px; font-size: 0.9em; line-height: 1.4;
    z-index: 50; /* Ниже, чем плавающая кнопка языка */
    display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
    gap: 15px;
    transform: translateY(100%); /* Скрыто снизу по умолчанию */
    transition: transform 0.4s ease-out; /* Анимация появления */
}
 .cookie-banner.show {
     transform: translateY(0); /* Показываем баннер */
 }

.cookie-banner p {
     margin: 0; flex-grow: 1; color: #ccc; /* Текст баннера */
     text-shadow: none; /* Убираем тень текста */
}
 .cookie-banner p a.cookie-link { /* Ссылка внутри параграфа */
     color: #00c6ff; text-decoration: underline;
     transition: color 0.2s ease;
 }
 .cookie-banner p a.cookie-link:hover { color: #fff; }


.cookie-banner button {
    background-color: #28a745; color: white; padding: 8px 15px;
    border: none; border-radius: 4px; cursor: pointer; font-size: 1em; font-weight: 500;
    transition: background-color 0.3s ease; flex-shrink: 0; /* Кнопка не сжимается */
}
 .cookie-banner button:hover { background-color: #218838; }


/* Адаптивность */
@media (max-width: 900px) {
    /* Уменьшаем отступы для планшетов */
    section {
        padding: 60px 0;
    }
    #hero {
        padding-top: calc(80px + 20px); /* Уменьшил отступ сверху для планшетов */
        min-height: auto; /* Позволяем высоте подстраиваться под контент */
    }
    #hero h1 {
        font-size: 2.8em;
    }
    #hero p {
        font-size: 1.3em;
    }
    nav ul {
        gap: 15px; /* Уменьшаем расстояние между пунктами меню */
    }
    nav a {
        font-size: 1em;
    }
}

@media (max-width: 768px) {
    /* Мобильная версия */
    header .container {
        flex-wrap: nowrap; /* Запрещаем перенос элементов в шапке */
        justify-content: space-between;
        position: relative; /* Для позиционирования гамбургера */
    }
    nav {
        display: none; /* Скрываем основное меню на мобильных */
    }
    .hamburger-menu {
        display: block; /* Показываем кнопку-гамбургер */
    }
    .mobile-nav {
        display: block; /* Показываем мобильное меню, изначально скрытое */
    }

    #hero {
        padding-top: 40px; /* Уменьшаем расстояние между шапкой и заголовком на мобильных */
        min-height: auto;
        align-items: flex-start; /* Выравниваем по верху */
        text-align: left; /* Выравниваем текст по левому краю */
        padding-bottom: 40px; /* Немного отступа снизу */
    }

    #hero .container {
        padding-top: 20px; /* Дополнительный отступ внутри контейнера */
        padding-left: 20px;
        padding-right: 20px;
    }

    #hero h1 {
        font-size: 2.0em; /* Уменьшаем шрифт заголовка на мобильных */
        margin-top: 0; /* Убираем лишний отступ сверху */
        margin-bottom: 15px;
        line-height: 1.3;
    }
    #hero p {
        font-size: 1.1em; /* Немного уменьшаем подзаголовок */
        margin-bottom: 30px;
    }
    .cta-button {
        padding: 12px 25px;
        font-size: 1.1em;
    }

    .services-grid {
        grid-template-columns: 1fr; /* Одна колонка на мобильных */
    }
    .service-item {
        padding: 20px;
    }
     .service-item h3 {
        font-size: 1.2em; /* Уменьшаем шрифт заголовков услуг */
    }
    .service-item p {
        font-size: 0.95em; /* Уменьшаем шрифт описаний услуг */
    }

    /* Адаптивность для WAF блока */
    .waf-features-grid {
        grid-template-columns: 1fr; /* Одна колонка на мобильных */
    }
    .waf-feature-item {
        padding: 20px;
    }
    .waf-feature-icon {
        font-size: 1.5em;
        margin-right: 15px;
    }
    .waf-feature-content h4 {
        font-size: 1.1em;
    }
    .waf-feature-content p {
        font-size: 0.9em;
    }
    .waf-cta {
        padding: 12px 30px;
        font-size: 1.1em;
    }

    /* ИЗМЕНЕНИЕ: Адаптивность для конструктора ботов */
    #bot-constructor-section p {
        font-size: 1.1em;
    }
    .bot-constructor-cta {
        padding: 12px 30px;
        font-size: 1.1em;
    }


     /* Адаптация cookie баннера */
     .cookie-banner {
         flex-direction: column; /* В столбец на узких экранах */
         text-align: center;
         gap: 10px;
         padding: 10px 15px; /* Меньше паддинга */
         font-size: 0.85em; /* Меньше шрифт */
     }
      .cookie-banner p { width: 100%; } /* Текст на всю ширину */

     /* Адаптация плавающего переключателя */
     .floating-language-switcher {
         bottom: calc(20px + 15px*2 + 0.9em*2 + 10px); /* Примерная высота текста+кнопки+отступов */
         right: 15px; /* Отступ справа для мобильных */
     }
}
@media (max-width: 480px) {
    /* Дальнейшие корректировки для совсем маленьких экранов */
    .logo {
        font-size: 1.5em;
    }
    #hero h1 {
        font-size: 1.8em; /* Еще меньше шрифт заголовка */
    }
    #hero p {
        font-size: 1em; /* Еще меньше подзаголовок */
    }
    .cta-button {
        padding: 10px 20px;
        font-size: 1em;
    }
    section {
        padding: 40px 0;
    }
     .floating-language-switcher {
          bottom: calc(10px + 10px*2 + 0.85em*2 + 5px); /* Корректируем под уменьшенный баннер */
          right: 10px; /* Еще меньше отступ */
     }
     .cookie-banner {
         padding: 8px 10px;
         font-size: 0.8em;
         gap: 8px;
     }
     .cookie-banner button {
         padding: 6px 12px;
         font-size: 0.9em;
     }
     .mobile-nav {
         width: 200px; /* Еще меньше ширина мобильного меню */
     }
}
/* === НОВЫЕ СТИЛИ: Секция Live-чата === */
#live-chat-section {
    background-color: rgba(255, 255, 255, 0.98);
    color: #333;
    padding: 80px 0;
}
#live-chat-section h2 {
    margin-bottom: 20px;
    color: #333;
    text-shadow: none;
}
#live-chat-section p {
    max-width: 800px;
    margin: 0 auto 40px;
    font-size: 1.2em;
    color: #555;
    text-shadow: none;
}
.live-chat-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, #3a0ca3 0%, #7209b7 100%); /* Фиолетовый градиент */
    color: #fff;
    padding: 15px 40px;
    font-size: 1.2em;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 6px 15px rgba(114, 9, 183, 0.4);
}
.live-chat-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(114, 9, 183, 0.5);
}
.live-chat-cta i {
    margin-right: 12px;
    font-size: 1.3em;
}