/* Общие стили для всей страницы */
body {
    font-family: 'Roboto', sans-serif; /* Шрифт для всего сайта */
    margin: 10; /* Убирает внешние отступы */
    padding: 10; /* Убирает внутренние отступы */
    background: linear-gradient(to bottom, #0A1A2A, #001f3f), /* Фон с градиентом (сверху вниз) */
                repeating-linear-gradient(45deg, rgba(0, 212, 255, 0.1) 0px, rgba(0, 212, 255, 0.1) 2px, transparent 2px, transparent 4px); /* Полосы на фоне под углом 45 градусов */
    background-blend-mode: overlay; /* Режим наложения фона (смешивание градиента и полос) */
    color: #E6E6E6; /* Цвет текста по умолчанию */
    scroll-behavior: smooth; /* Плавная прокрутка при переходе по якорным ссылкам */
}

img {
    background: transparent; /* Прозрачный фон для всех изображений */
}

/* Стили для шапки сайта */
header {
    background: linear-gradient(90deg, #E63946, #1A3C5A); /* Фон шапки с градиентом (слева направо) */
    padding: 15px 20px; /* Внутренние отступы шапки (сверху-снизу и слева-справа) */
    display: flex; /* Расположение элементов в строку */
    justify-content: space-between; /* Распределение элементов по краям (логотип слева, меню справа) */
    align-items: center; /* Выравнивание элементов по вертикали по центру */
    border-bottom: 2px solid #00D4FF; /* Нижняя граница шапки (голубая линия) */
    position: sticky; /* Фиксация шапки при прокрутке */
    top: 0; /* Фиксация в самом верху страницы */
    z-index: 1000; /* Порядок наложения (шапка поверх других элементов) */
    transition: padding 0.3s ease; /* Плавное изменение отступов при прокрутке */
}

header.shrunk {
    padding: 10px 15px; /* Уменьшенные отступы шапки при прокрутке */
}

.logo img {
    max-width: 150px; /* Максимальная ширина логотипа на десктопе */
    display: block; /* Логотип отображается как блочный элемент */
    background: transparent; /* Прозрачный фон для логотипа */
}

.logo a {
    display: block; /* Ссылка на логотип как блочный элемент */
}

nav {
    display: flex; /* Расположение навигации в строку */
    align-items: center; /* Выравнивание элементов навигации по центру */
}

nav ul {
    list-style-type: none; /* Убирает маркеры списка */
    padding: 0; /* Убирает внутренние отступы списка */
    margin: 0; /* Убирает внешние отступы списка */
    display: flex; /* Расположение пунктов меню в строку */
    transition: all 0.3s ease; /* Плавные изменения при открытии/закрытии меню */
}

nav ul li {
    margin-left: 20px; /* Отступ слева между пунктами меню */
}

nav ul li a {
    color: #00D4FF; /* Цвет текста пунктов меню (голубой) */
    text-decoration: none; /* Убирает подчёркивание у ссылок */
    font-weight: 700; /* Жирный шрифт для текста меню */
    text-shadow: 0 0 5px #00D4FF, 0 0 10px #E63946; /* Тень текста (голубая и красная) */
    transition: color 0.3s; /* Плавное изменение цвета текста при наведении */
    display: flex; /* Расположение иконки и текста в строку */
    align-items: center; /* Выравнивание иконки и текста по центру */
}

nav ul li a.active {
    color: #00D4FF; /* Цвет активного пункта меню (голубой) */
    text-shadow: 0 0 5px #00D4FF; /* Тень активного пункта (голубая) */
}

.nav-icon {
    width: 60px; /* Ширина иконок меню */
    height: 60px; /* Высота иконок меню */
    margin-right: 5px; /* Отступ справа от иконки */
    transition: transform 0.3s; /* Плавное увеличение иконки при наведении */
}

nav ul li a:hover {
    color: #E63946; /* Красный цвет текста при наведении */
}

.nav-icon:hover {
    transform: scale(1.1); /* Увеличение иконки на 10% при наведении */
}

/* Гамбургер-меню (для мобильной версии) */
.hamburger {
    display: none; /* Скрыто на десктопе */
    flex-direction: column; /* Расположение полосок гамбургер-меню в столбец */
    cursor: pointer; /* Курсор в виде руки при наведении */
    z-index: 1001; /* Порядок наложения (выше меню) */
}

.hamburger span {
    width: 30px; /* Ширина полосок гамбургер-меню на десктопе */
    height: 3px; /* Высота полосок гамбургер-меню */
    background: #00D4FF; /* Цвет полосок (голубой) */
    margin: 3px 0; /* Отступ между полосками */
    transition: all 0.3s ease; /* Плавные изменения при открытии/закрытии */
}

#nav-toggle {
    display: none; /* Скрытый чекбокс для управления меню */
}

#nav-toggle:checked ~ nav ul {
    transform: translateX(0); /* Открытие меню (сдвиг влево) */
}

#nav-toggle:checked ~ .hamburger span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px); /* Поворот верхней полоски для крестика */
}

#nav-toggle:checked ~ .hamburger span:nth-child(2) {
    opacity: 0; /* Скрытие средней полоски при открытии меню */
}

#nav-toggle:checked ~ .hamburger span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px); /* Поворот нижней полоски для крестика */
}

/* Переключатель языков */
.language-switcher {
    margin-left: 20px; /* Отступ слева от переключателя языков */
    color: #00D4FF; /* Цвет текста переключателя (голубой) */
    font-size: 0.9em; /* Размер шрифта */
}

.language-switcher a {
    color: #00D4FF; /* Цвет ссылок переключателя (голубой) */
    text-decoration: none; /* Убирает подчёркивание у ссылок */
}

.language-switcher a:hover {
    color: #00D4FF; /* Цвет ссылок при наведении (голубой) */
}

/* Главный баннер */
.hero {
    background: linear-gradient(180deg, rgba(230, 57, 70, 0.8), rgba(26, 60, 90, 0.8)), /* Градиент фона (сверху вниз) */
                repeating-linear-gradient(0deg, rgba(0, 212, 255, 0.2) 0px, rgba(0, 212, 255, 0.2) 1px, transparent 1px, transparent 3px); /* Полосы на фоне (вертикальные) */
    background-blend-mode: overlay; /* Режим наложения фона */
    background-size: cover; /* Растягивание фона на всю ширину */
    background-attachment: fixed; /* Фиксация фона при прокрутке */
    color: #E6E6E6; /* Цвет текста */
    padding: 180px 20px; /* Внутренние отступы (сверху-снизу и слева-справа) */
    padding-top: 100px; /* Дополнительный отступ сверху, чтобы учесть высоту шапки */
    text-align: center; /* Выравнивание текста по центру */
    position: relative; /* Позиционирование для дочерних элементов */
    border-bottom: 2px solid #E63946; /* Нижняя граница (красная линия) */
    transition: padding 0.3s ease; /* Плавное изменение отступов */
}

.hero.shrunk {
    padding: 40px 20px; /* Уменьшенные отступы при прокрутке */
}

.hero h1 {
    font-size: 2.5em; /* Размер шрифта заголовка */
    margin-bottom: 20px; /* Отступ снизу от заголовка */
    text-shadow: 0 0 10px #00D4FF, 0 0 20px #E63946; /* Тень текста (голубая и красная) */
    line-height: 1.4; /* Межстрочный интервал */
}

.hero p {
    font-size: 1.2em; /* Размер шрифта текста */
    margin-bottom: 20px; /* Отступ снизу от текста */
    line-height: 1.6; /* Межстрочный интервал */
}

.cta-button {
    background: linear-gradient(45deg, #E63946, #00D4FF); /* Фон кнопки с градиентом (под углом 45 градусов) */
    color: #E6E6E6; /* Цвет текста кнопки */
    padding: 12px 25px; /* Внутренние отступы кнопки */
    text-decoration: none; /* Убирает подчёркивание у ссылки */
    border-radius: 5px; /* Скругление углов кнопки */
    font-weight: 700; /* Жирный шрифт текста кнопки */
    text-shadow: 0 0 5px #000; /* Тень текста (чёрная) */
    box-shadow: 0 0 10px #E63946, 0 0 20px #00D4FF; /* Тень кнопки (красная и голубая) */
    transition: transform 0.3s; /* Плавное увеличение кнопки при наведении */
    display: inline-block; /* Отображение как блочный элемент */
    margin-top: 20px; /* Отступ сверху от кнопки */
}

.cta-button:hover {
    transform: scale(1.05); /* Увеличение кнопки на 5% при наведении */
}

/* Инфографика в главном баннере */
.hero-infographic {
    margin-top: 20px; /* Отступ сверху от инфографики */
    display: flex; /* Расположение элементов в строку */
    justify-content: center; /* Выравнивание содержимого по центру */
    gap: 20px; /* Расстояние между элементами инфографики */
}

.hero-infographic div {
    background: transparent; /* Прозрачный фон блока */
    padding: 10px; /* Внутренние отступы блока */
    border-radius: 5px; /* Скругление углов блока */
    border: 1px solid #00D4FF; /* Граница блока (голубая) */
    display: flex; /* Расположение содержимого в строку */
    align-items: center; /* Выравнивание содержимого по центру */
    justify-content: center; /* Выравнивание содержимого по центру */
    gap: 10px; /* Расстояние между иконкой и текстом */
    box-shadow: 0 0 10px #00D4FF; /* Тень блока (голубая) */
}

.hero-infographic img {
    width: 100px; /* Ширина иконок в главном баннере */
    height: 100px; /* Высота иконок в главном баннере */
    background: transparent; /* Прозрачный фон иконок */
    transition: transform 0.3s; /* Плавное увеличение иконки при наведении */
}

.hero-infographic img:hover {
    transform: scale(1.1); /* Увеличение иконки на 10% при наведении */
}

/* Услуги */
#services {
    padding: 50px 20px; /* Внутренние отступы секции (сверху-снизу и слева-справа) */
    text-align: center; /* Выравнивание текста по центру */
    background: rgba(10, 26, 42, 0.9), /* Фон секции (тёмно-синий с прозрачностью) */
                repeating-linear-gradient(45deg, rgba(230, 57, 70, 0.1) 0px, rgba(230, 57, 70, 0.1) 2px, transparent 2px, transparent 4px); /* Полосы на фоне */
    background-blend-mode: overlay; /* Режим наложения фона */
    display: flex; /* Расположение элементов в строку */
    flex-wrap: wrap; /* Перенос элементов на новую строку при нехватке места */
    justify-content: center; /* Выравнивание элементов по центру */
    gap: 20px; /* Расстояние между элементами */
    padding-top: 20px; /* Отступ сверху для десктопной версии */
}

#services h2 {
    color: #E63946; /* Цвет заголовка (красный) */
    margin-bottom: 30px; /* Отступ снизу от заголовка */
    text-shadow: 0 0 10px #E63946; /* Тень заголовка (красная) */
    width: 100%; /* Ширина заголовка (на всю доступную ширину) */
    font-size: 2em; /* Размер шрифта заголовка */
    line-height: 1.4; /* Межстрочный интервал */
}

.service {
    width: 30%; /* Ширина блока услуги */
    min-height: 350px; /* Минимальная высота блока */
    background: rgba(0, 0, 0, 0.5); /* Фон блока (чёрный с прозрачностью) */
    padding: 10px; /* Внутренние отступы блока */
    border-radius: 10px; /* Скругление углов блока */
    border: 1px solid #00D4FF; /* Граница блока (голубая) */
    box-shadow: 0 0 15px #00D4FF; /* Тень блока (голубая) */
    display: flex; /* Расположение содержимого в столбец */
    flex-direction: column; /* Направление содержимого (сверху вниз) */
    justify-content: space-between; /* Распределение содержимого (между верхом и низом) */
    box-sizing: border-box; /* Учёт границ и отступов в размерах блока */
    text-align: center; /* Выравнивание текста по центру */
    opacity: 0; /* Начальная прозрачность (для анимации) */
    transform: translateY(50px); /* Начальное смещение вниз (для анимации) */
    transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.3s ease; /* Плавные изменения при появлении и наведении */
}

.service.visible {
    opacity: 1; /* Полная видимость при появлении */
    transform: translateY(0); /* Возврат в исходное положение */
}

.service:hover {
    transform: translateY(-5px); /* Подъём блока на 5px при наведении */
    box-shadow: 0 5px 20px #00D4FF; /* Увеличенная тень при наведении */
}

.service img.icon {
    max-width: 200px; /* Максимальная ширина иконки */
    width: 100%; /* Ширина иконки (на всю доступную ширину блока) */
    height: 200px; /* Высота иконки */
    object-fit: contain; /* Сохранение пропорций иконки */
    transition: transform 0.3s; /* Плавное увеличение иконки при наведении */
    margin: 0 auto; /* Центрирование иконки */
    display: block; /* Отображение иконки как блочного элемента */
}

.service img.icon:hover {
    transform: scale(1.1); /* Увеличение иконки на 10% при наведении */
}

.service h3 {
    margin: 10px 0; /* Отступы сверху и снизу от заголовка */
    flex-grow: 1; /* Растяжение заголовка для равномерного распределения */
}

.service p {
    margin: 10px 0; /* Отступы сверху и снизу от текста */
    flex-grow: 1; /* Растяжение текста для равномерного распределения */
    line-height: 1.6; /* Межстрочный интервал */
}

/* Кейсы */
#cases {
    padding: 50px 20px; /* Внутренние отступы секции */
    text-align: center; /* Выравнивание текста по центру */
    background: rgba(10, 26, 42, 0.9), /* Фон секции */
                repeating-linear-gradient(45deg, rgba(230, 57, 70, 0.1) 0px, rgba(230, 57, 70, 0.1) 2px, transparent 2px, transparent 4px); /* Полосы на фоне */
    background-blend-mode: overlay; /* Режим наложения фона */
    padding-top: 20px; /* Отступ сверху для десктопной версии */
}

#cases h2 {
    color: #E63946; /* Цвет заголовка */
    margin-bottom: 30px; /* Отступ снизу от заголовка */
    text-shadow: 0 0 10px #E63946; /* Тень заголовка */
    font-size: 2em; /* Размер шрифта заголовка */
    line-height: 1.4; /* Межстрочный интервал */
}

.cases-container {
    display: flex; /* Расположение кейсов в строку */
    flex-wrap: wrap; /* Перенос кейсов на новую строку */
    justify-content: center; /* Выравнивание кейсов по центру */
    gap: 30px; /* Расстояние между кейсами */
    max-width: 1200px; /* Максимальная ширина контейнера */
    margin: 0 auto; /* Центрирование контейнера */
}

.case {
    width: 45%; /* Ширина блока кейса */
    margin: 0; /* Убирает внешние отступы */
    background: rgba(0, 0, 0, 0.5); /* Фон блока */
    padding: 20px; /* Внутренние отступы блока */
    border-radius: 10px; /* Скругление углов блока */
    border: 1px solid #00D4FF; /* Граница блока */
    box-shadow: 0 0 15px #00D4FF; /* Тень блока */
    opacity: 0; /* Начальная прозрачность */
    transform: translateY(50px); /* Начальное смещение вниз */
    transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.3s ease; /* Плавные изменения */
    box-sizing: border-box; /* Учёт границ в размерах */
}

.case.visible {
    opacity: 1; /* Полная видимость при появлении */
    transform: translateY(0); /* Возврат в исходное положение */
}

.case:hover {
    transform: translateY(-5px); /* Подъём блока при наведении */
    box-shadow: 0 5px 20px #00D4FF; /* Увеличенная тень при наведении */
}

.case img.icon {
    max-width: 160px; /* Максимальная ширина иконки кейса */
    transition: transform 0.3s; /* Плавное увеличение иконки */
}

.case img.icon:hover {
    transform: scale(1.1); /* Увеличение иконки на 10% при наведении */
}

.case p {
    line-height: 1.6; /* Межстрочный интервал текста */
}

/* О нас */
#about {
    padding: 50px 20px; /* Внутренние отступы секции */
    text-align: center; /* Выравнивание текста по центру */
    background: rgba(10, 26, 42, 0.9), /* Фон секции */
                repeating-linear-gradient(45deg, rgba(230, 57, 70, 0.1) 0px, rgba(230, 57, 70, 0.1) 2px, transparent 2px, transparent 4px); /* Полосы на фоне */
    background-blend-mode: overlay; /* Режим наложения фона */
    padding-top: 20px; /* Отступ сверху для десктопной версии */
}

#about h2 {
    color: #E63946; /* Цвет заголовка */
    text-shadow: 0 0 10px #E63946; /* Тень заголовка */
    font-size: 2em; /* Размер шрифта заголовка */
    line-height: 1.4; /* Межстрочный интервал */
}

#about p {
    line-height: 1.6; /* Межстрочный интервал текста */
}

.about-infographic {
    margin-top: 20px; /* Отступ сверху от инфографики */
    display: flex; /* Расположение элементов в строку */
    justify-content: center; /* Выравнивание элементов по центру */
    gap: 20px; /* Расстояние между элементами */
    flex-wrap: wrap; /* Перенос элементов на новую строку */
}

.about-infographic div {
    background: rgba(0, 0, 0, 0.5); /* Фон блока */
    padding: 10px; /* Внутренние отступы блока */
    border-radius: 5px; /* Скругление углов блока */
    border: 1px solid #00D4FF; /* Граница блока */
    display: flex; /* Расположение содержимого в строку */
    align-items: center; /* Выравнивание содержимого по центру */
    justify-content: center; /* Выравнивание содержимого по центру */
    gap: 10px; /* Расстояние между иконкой и текстом */
    box-shadow: 0 0 10px #00D4FF; /* Тень блока */
    width: 250px; /* Ширина блока */
    min-height: 100px; /* Минимальная высота блока */
}

.about-infographic img {
    width: 100px; /* Ширина иконок в разделе "О нас" */
    height: 100px; /* Высота иконок в разделе "О нас" */
    transition: transform 0.3s; /* Плавное увеличение иконки */
}

.about-infographic img:hover {
    transform: scale(1.1); /* Увеличение иконки на 10% при наведении */
}

.florian-image {
    max-width: 300px; /* Максимальная ширина изображения Флориана */
    border: 2px solid #00D4FF; /* Граница изображения (голубая) */
    border-radius: 10px; /* Скругление углов изображения */
    margin-top: 20px; /* Отступ сверху */
    display: block; /* Отображение как блочного элемента */
    margin-left: auto; /* Центрирование слева */
    margin-right: auto; /* Центрирование справа */
}

/* Блог */
#blog, #blog-post {
    padding: 50px 20px; /* Внутренние отступы секции */
    text-align: center; /* Выравнивание текста по центру */
    background: rgba(10, 26, 42, 0.9), /* Фон секции */
                repeating-linear-gradient(45deg, rgba(230, 57, 70, 0.1) 0px, rgba(230, 57, 70, 0.1) 2px, transparent 2px, transparent 4px); /* Полосы на фоне */
    background-blend-mode: overlay; /* Режим наложения фона */
    padding-top: 0px; /* Отступ сверху для десктопной версии */
}

#blog h2, #blog-post h1 {
    color: #E63946; /* Цвет заголовка */
    margin-bottom: 30px; /* Отступ снизу от заголовка */
    text-shadow: 0 0 10px #E63946; /* Тень заголовка */
    font-size: 2em; /* Размер шрифта заголовка */
    line-height: 1.4; /* Межстрочный интервал */
    padding-top: 0px; /* Отступ сверху для десктопной версии */
}

/* Посты блога на главной странице */
#blog {
    display: flex; /* Расположение постов в столбец */
    flex-direction: column; /* Направление постов (сверху вниз) */
    align-items: center; /* Выравнивание постов по центру */
    gap: 40px; /* Расстояние между постами */
    padding-top: 20px; /* Отступ сверху для десктопной версии */
}

.blog-post {
    background: rgba(0, 0, 0, 0.5); /* Фон поста */
    padding: 20px; /* Внутренние отступы поста */
    border-radius: 10px; /* Скругление углов поста */
    border: 1px solid #00D4FF; /* Граница поста */
    box-shadow: 0 0 15px #00D4FF; /* Тень поста */
    margin: 0; /* Убирает внешние отступы */
    width: 100%; /* Ширина поста (на всю доступную ширину) */
    max-width: 600px; /* Максимальная ширина поста */
    box-sizing: border-box; /* Учёт границ в размерах */
}

.blog-post p {
    line-height: 1.6; /* Межстрочный интервал текста */
}

/* Инфографика внутри постов блога */
.blog-infographic {
    margin: 20px 0; /* Отступы сверху и снизу от инфографики */
    display: flex; /* Расположение элементов в строку */
    flex-wrap: wrap; /* Перенос элементов на новую строку */
    justify-content: space-between; /* Распределение элементов по ширине */
    gap: 20px; /* Расстояние между элементами */
    max-width: 100%; /* Максимальная ширина инфографики */
    padding: 0 20px; /* Отступы слева и справа */
    box-sizing: border-box; /* Учёт отступов в размерах */
}

/* Общие стили для элементов инфографики */
.blog-infographic div {
    background: rgba(0, 0, 0, 0.5); /* Полупрозрачный черный фон элемента */
    padding: 10px; /* Внутренние отступы элемента */
    border-radius: 5px; /* Скругление углов элемента */
    border: 1px solid #00D4FF; /* Граница элемента (голубая) */
    display: flex; /* Flexbox для содержимого */
    align-items: center; /* Выравнивание содержимого по центру вертикально */
    justify-content: center; /* Выравнивание содержимого по центру горизонтально */
    gap: 7px; /* Расстояние между иконкой и текстом */
    box-shadow: 0 0 10px #00D4FF; /* Тень элемента (голубая) */
    box-sizing: border-box; /* Учитывает границы и отступы в ширине */
    flex: 1 1 100%; /* Базовая ширина элемента (30%) */
    min-width: 200px; /* Минимальная ширина элемента */
    max-width: 380px; /* Максимальная ширина элемента */
    min-height: 130px; /* Минимальная высота элемента */
    overflow: hidden; /* Предотвращает вылезание текста за пределы */
}

/* Уменьшаем текст внутри элементов инфографики */
.blog-infographic div h3 {
    font-size: 0.8em; /* Размер заголовка в элементе */
    margin: 0; /* Убирает отступы от заголовка */
    word-wrap: break-word; /* Перенос слов при длинном тексте */
    max-height: 4.2em; /* Ограничение высоты текста (3 строки) */
}

.blog-infographic div p {
    font-size: 0.7em; /* Размер текста в элементе */
    margin: 0; /* Убирает отступы от текста */
    line-height: 1.2; /* Межстрочный интервал текста */
    word-wrap: break-word; /* Перенос слов при длинном тексте */
    max-height: 8em; /* Ограничение высоты текста (5 строк) */
    overflow: hidden; /* Скрывает лишний текст */
}

.blog-infographic img {
    width: 80px; /* Ширина иконки в инфографике */
    height: 80px; /* Высота иконки в инфографике */
    transition: transform 0.3s; /* Плавное увеличение иконки при наведении */
}

.blog-infographic img:hover {
    transform: scale(1.1); /* Увеличение иконки на 10% при наведении */
}

/* Для страниц с 5 шагами (digital-transformation) */
.blog-infographic.steps {
    justify-content: space-between; /* Равномерное распределение шагов */
    flex-wrap: wrap; /* Перенос шагов на новую строку */
}

/* Первые три элемента в верхнем ряду */
.blog-infographic.steps div:nth-child(-n+3) {
    flex: 1 1 40%; /* Ширина первых трех шагов (30%) */
    min-width: 200px; /* Минимальная ширина шага */
    max-width: 350px; /* Максимальная ширина шага */
}

/* Последние два элемента в нижнем ряду */
.blog-infographic.steps div:nth-child(n+4) {
    flex: 1 1 30%; /* Ширина последних двух шагов (30%) */
    min-width: 210px; /* Минимальная ширина шага */
    max-width: 350px; /* Максимальная ширина шага */
}

/* Контейнер для нижнего ряда */
.blog-infographic.steps div:nth-child(4),
.blog-infographic.steps div:nth-child(5) {
    margin-left: auto; /* Центрирование слева */
    margin-right: auto; /* Центрирование справа */
}

/* Контакты */
#contact {
    padding: 50px 20px; /* Внутренние отступы секции */
    text-align: center; /* Выравнивание текста по центру */
    background: rgba(10, 26, 42, 0.9), /* Фон секции */
                repeating-linear-gradient(45deg, rgba(230, 57, 70, 0.1) 0px, rgba(230, 57, 70, 0.1) 2px, transparent 2px, transparent 4px); /* Полосы на фоне */
    background-blend-mode: overlay; /* Режим наложения фона */
    padding-top: 20px; /* Отступ сверху для десктопной версии */
}

#contact h2 {
    color: #E63946; /* Цвет заголовка */
    text-shadow: 0 0 10px #E63946; /* Тень заголовка */
    font-size: 2em; /* Размер шрифта заголовка */
    line-height: 1.4; /* Межстрочный интервал */
}

#contact p {
    line-height: 1.6; /* Межстрочный интервал текста */
}

#contact form {
    max-width: 500px; /* Максимальная ширина формы */
    margin: 20px auto; /* Центрирование формы */
}

#contact input, #contact textarea {
    width: 100%; /* Ширина полей формы (на всю доступную ширину) */
    padding: 10px; /* Внутренние отступы полей */
    margin: 10px 0; /* Отступы сверху и снизу */
    border: 1px solid #00D4FF; /* Граница полей (голубая) */
    border-radius: 5px; /* Скругление углов полей */
    background: rgba(0, 0, 0, 0.5); /* Фон полей (чёрный с прозрачностью) */
    color: #E6E6E6; /* Цвет текста в полях */
    box-sizing: border-box; /* Учёт границ в размерах */
}

#contact textarea {
    height: 100px; /* Высота текстового поля */
}

#contact .checkbox-container {
    display: flex; /* Расположение чекбокса и текста в строку */
    align-items: flex-start; /* Выравнивание по верхнему краю */
    justify-content: flex-start; /* Выравнивание по левому краю */
    margin: 10px 0; /* Отступы сверху и снизу */
    text-align: left; /* Выравнивание текста по левому краю */
    max-width: 500px; /* Максимальная ширина контейнера */
    margin-left: auto; /* Центрирование слева */
    margin-right: auto; /* Центрирование справа */
}

#contact .checkbox-container input {
    width: auto; /* Автоматическая ширина чекбокса */
    margin-right: 10px; /* Отступ справа от чекбокса */
    margin-top: 3px; /* Отступ сверху для выравнивания */
}

#contact .checkbox-container label {
    font-size: 0.9em; /* Размер шрифта текста чекбокса */
}

#contact ul {
    list-style-type: none; /* Убирает маркеры списка */
    padding: 0; /* Убирает внутренние отступы списка */
    margin: 0 auto; /* Центрирование списка */
    display: flex; /* Расположение элементов в строку */
    flex-wrap: wrap; /* Перенос элементов на новую строку */
    justify-content: center; /* Выравнивание элементов по центру */
    align-items: center; /* Выравнивание элементов по центру */
    gap: 20px; /* Расстояние между элементами */
    max-width: 600px; /* Максимальная ширина списка */
}

#contact ul li {
    display: flex; /* Расположение иконки и текста в строку */
    align-items: center; /* Выравнивание по центру */
    justify-content: center; /* Выравнивание по центру */
    gap: 10px; /* Расстояние между иконкой и текстом */
    margin: 10px 0; /* Отступы сверху и снизу */
    width: 100%; /* Ширина элемента (на всю доступную ширину) */
    max-width: 300px; /* Максимальная ширина элемента */
}

#contact ul img {
    width: 60px; /* Ширина иконок в списке */
    height: 60px; /* Высота иконок в списке */
    transition: transform 0.3s; /* Плавное увеличение иконки */
}

#contact ul img:hover {
    transform: scale(1.1); /* Увеличение иконки на 10% при наведении */
}

/* Модальное окно */
.modal {
    display: none; /* Скрыто по умолчанию */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* Полупрозрачный чёрный фон */
    z-index: 2000; /* Поверх всех элементов */
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: linear-gradient(45deg, #1A3C5A, #E63946); /* Градиентный фон */
    padding: 20px;
    border-radius: 10px;
    border: 2px solid #00D4FF; /* Голубая граница */
    box-shadow: 0 0 15px #00D4FF; /* Голубая тень */
    max-width: 500px;
    width: 90%;
    text-align: center;
    color: #E6E6E6;
}

.modal-infographic {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.modal-infographic img {
    width: 80px;
    height: 80px;
    transition: transform 0.3s;
}

.modal-infographic img:hover {
    transform: scale(1.1);
}

.modal-infographic h3 {
    font-size: 1.5em;
    margin: 0;
    text-shadow: 0 0 10px #00D4FF;
}

.modal-infographic p {
    font-size: 1.1em;
    margin: 5px 0 0;
    line-height: 1.6;
}

.modal-close {
    margin-top: 20px;
}

/* Стили для контейнера карты (обновлено, строка 462) */
.map-container {
    position: relative; /* Позиционирование: относительное, для корректного размещения .map-fallback */
    width: 703px; /* Ширина контейнера: фиксированная, как в исходном дизайне */
    height: 442px; /* Высота контейнера: возвращаем исходное значение из URL карты */
    margin: 20px auto; /* Отступы: 20px сверху и снизу, центрирование по горизонтали */
    overflow: visible; /* Переполнение: видимое, чтобы iframe карты не обрезался */
}

/* Стили для iframe карты */
.map-container iframe {
    width: 100% !important; /* Ширина iframe: на всю ширину контейнера */
    height: 100% !important; /* Высота iframe: на всю высоту контейнера */
    border: none; /* Граница: убираем рамку вокруг iframe */
    display: block !important; /* Отображение: блочный элемент, чтобы гарантировать видимость */
}

/* Стили для запасного текста, если карта не загрузилась (строка 472) */
.map-fallback {
    position: absolute; /* Позиционирование: абсолютное, внутри .map-container */
    top: 0; /* Положение сверху: 0, чтобы покрыть весь контейнер */
    left: 0; /* Положение слева: 0, чтобы покрыть весь контейнер */
    width: 100%; /* Ширина: на всю ширину контейнера */
    height: 100%; /* Высота: на всю высоту контейнера */
    background: rgba(0, 0, 0, 0.8); /* Фон: полупрозрачный чёрный для затемнения */
    color: #E6E6E6; /* Цвет текста: светло-серый */
    display: none; /* Отображение: скрыто по умолчанию */
    justify-content: center; /* Выравнивание по горизонтали: по центру */
    align-items: center; /* Выравнивание по вертикали: по центру */
    padding: 20px; /* Внутренние отступы: 20px со всех сторон */
    box-sizing: border-box; /* Модель коробки: учитываем padding в размерах */
    text-align: center; /* Выравнивание текста: по центру */
    font-size: 1.1em; /* Размер шрифта: чуть больше стандартного */
    line-height: 1.6; /* Межстрочный интервал: для лучшей читаемости */
}

/* Адаптивность карты для мобильных устройств */
@media (max-width: 768px) {
    .map-container {
        width: 100%; /* Ширина: на всю ширину экрана для мобильных */
        height: 300px; /* Высота: уменьшаем для мобильных устройств */
    }
}

/* Подвал */
footer {
    background: linear-gradient(90deg, #1A3C5A, #E63946); /* Фон подвала с градиентом */
    color: #E6E6E6; /* Цвет текста подвала */
    text-align: center; /* Выравнивание текста по центру */
    padding: 15px 0; /* Внутренние отступы подвала */
    border-top: 2px solid #00D4FF; /* Верхняя граница подвала */
}

.social-share {
    margin-top: 10px; /* Отступ сверху от иконок соцсетей */
}

.social-share img {
    width: 50px; /* Ширина иконок соцсетей */
    height: 50px; /* Высота иконок соцсетей */
    margin: 0 10px; /* Отступы слева и справа от иконок */
    transition: transform 0.3s; /* Плавное увеличение иконки */
}

.social-share img:hover {
    transform: scale(1.1); /* Увеличение иконки на 10% при наведении */
}

/* Кнопка "Наверх" */
.to-top {
    position: fixed; /* Фиксированное положение кнопки */
    bottom: 80px; /* Отступ снизу */
    right: 10px; /* Отступ справа */
    background: #E63946; /* Фон кнопки (красный) */
    color: #E6E6E6; /* Цвет текста кнопки */
    padding: 10px 15px; /* Внутренние отступы кнопки */
    border-radius: 50%; /* Скругление углов (круглая кнопка) */
    text-decoration: none; /* Убирает подчёркивание у ссылки */
    font-size: 1.2em; /* Размер шрифта кнопки */
    box-shadow: 0 0 10px #E63946; /* Тень кнопки */
    display: none; /* Скрыто по умолчанию */
    transition: opacity 0.3s ease; /* Плавное появление/исчезновение */
}

.to-top.visible {
    display: block; /* Показ кнопки, когда она видима */
}

/* Уведомление о cookie */
.cookie-notice {
    position: fixed; /* Фиксированное положение уведомления */
    bottom: 20px; /* Отступ снизу */
    left: 20px; /* Отступ слева */
    right: 20px; /* Отступ справа */
    background: rgba(0, 0, 0, 0.8); /* Фон уведомления (чёрный с прозрачностью) */
    color: #E6E6E6; /* Цвет текста уведомления */
    padding: 15px; /* Внутренние отступы уведомления */
    border-radius: 5px; /* Скругление углов уведомления */
    border: 1px solid #00D4FF; /* Граница уведомления */
    box-shadow: 0 0 10px #00D4FF; /* Тень уведомления */
    display: flex; /* Расположение содержимого в строку */
    justify-content: space-between; /* Распределение содержимого по краям */
    align-items: center; /* Выравнивание содержимого по центру */
    z-index: 1000; /* Порядок наложения (поверх других элементов) */
}

.cookie-notice p {
    margin: 0; /* Убирает отступы у текста */
    font-size: 0.9em; /* Размер шрифта текста */
    line-height: 1.6; /* Межстрочный интервал */
}

.cookie-notice button {
    background: #00D4FF; /* Фон кнопки (голубой) */
    color: #000; /* Цвет текста кнопки */
    border: none; /* Убирает границу кнопки */
    padding: 5px 15px; /* Внутренние отступы кнопки */
    border-radius: 5px; /* Скругление углов кнопки */
    cursor: pointer; /* Курсор в виде руки */
    transition: background 0.3s; /* Плавное изменение фона */
}

.cookie-notice button:hover {
    background: #E63946; /* Фон кнопки при наведении (красный) */
    color: #E6E6E6; /* Цвет текста при наведении */
}

/* Адаптивность для экранов до 1024px (обновлено, строка 536) */
@media (max-width: 1024px) {
    .service, .case {
        width: 45%; /* Ширина блоков услуг и кейсов */
        min-height: 400px; /* Минимальная высота блоков */
    }

    .hero-infographic, .about-infographic {
        flex-direction: column; /* Расположение элементов в столбец */
        align-items: center; /* Выравнивание элементов по центру */
        justify-content: center; /* Выравнивание элементов по центру */
    }

    .case {
        width: 48%; /* Ширина кейсов */
    }

    .map-container {
        width: 100%; /* Ширина карты (на всю доступную ширину) */
        max-width: 703px; /* Максимальная ширина карты */
        height: 400px; /* Высота карты */
    }

    /* Инфографика на планшетах */
    .blog-infographic div {
        flex: 1 1 45%; /* Гибкая ширина блока (около 45%) */
        max-width: 45%; /* Максимальная ширина блока */
    }

    .blog-infographic.steps div:nth-child(-n+3),
    .blog-infographic.steps div:nth-child(n+4) {
        flex: 1 1 45%; /* Гибкая ширина блока */
        max-width: 45%; /* Максимальная ширина блока */
    }
}

/* Адаптивность для экранов от 769px до 1024px (добавлено, строка 548) */
@media (min-width: 769px) and (max-width: 1024px) {
    .map-container {
        height: 400px; /* Высота карты для промежуточных разрешений */
    }

    .map-fallback {
        font-size: 1em; /* Размер шрифта текста для промежуточных разрешений */
    }
}

/* Адаптивность для экранов до 768px (мобильная версия, обновлено, строка 584) */
@media (max-width: 768px) {
    header {
        flex-direction: row; /* Расположение элементов в строку */
        justify-content: space-between; /* Распределение элементов по краям */
        padding: 10px; /* Внутренние отступы шапки */
        background: linear-gradient(90deg, #E63946, #1A3C5A); /* Фон шапки */
        background-blend-mode: normal; /* Режим наложения фона */
    }

    #home, #services, #cases, #about, #blog, #contact {
        padding-top: 20px; /* Отступ сверху для мобильной версии */
    }

    header.shrunk {
        padding: 5px 10px; /* Уменьшенные отступы при прокрутке */
    }

    .logo img {
        max-width: 120px; /* Максимальная ширина логотипа */
    }

    .hamburger {
        display: flex; /* Показ гамбургер-меню */
        position: absolute; /* Абсолютное позиционирование */
        top: 40px; /* Отступ сверху (ниже переключателя языков) */
        right: 25px; /* Отступ справа */
    }

    .hamburger span {
        width: 25px; /* Ширина полосок гамбургер-меню (пропорционально логотипу) */
        height: 2px; /* Высота полосок */
        background: #00D4FF; /* Цвет полосок */
        margin: 3px 0; /* Отступ между полосками */
        transition: all 0.3s ease; /* Плавные изменения */
    }

    #nav-toggle:checked ~ .hamburger {
        top: 15px; /* Поднимаем кнопку закрытия выше */
    }

    nav ul {
        position: fixed; /* Фиксированное положение меню */
        top: 0; /* Расположение сверху */
        right: 0; /* Расположение справа */
        height: 100%; /* Высота меню (на всю высоту экрана) */
        width: 250px; /* Ширина меню */
        background: #1A3C5A; /* Фон меню */
        flex-direction: column; /* Расположение пунктов в столбец */
        align-items: center; /* Выравнивание пунктов по центру */
        justify-content: center; /* Выравнивание пунктов по центру */
        transform: translateX(100%); /* Начальное смещение вправо (скрыто) */
        transition: transform 0.3s ease; /* Плавное открытие/закрытие */
        z-index: 1000; /* Порядок наложения */
    }

    nav ul li {
        margin: 20px 0; /* Отступы между пунктами меню */
    }

    nav ul li:first-child {
        margin-top: 50px; /* Отступ сверху для первого пункта меню */
    }

    nav ul li a {
        font-size: 1.2em; /* Размер шрифта пунктов меню */
    }

    .language-switcher {
        position: absolute; /* Абсолютное позиционирование */
        top: 20px; /* Отступ сверху */
        right: 60px; /* Отступ справа */
    }

    .hero {
        background: linear-gradient(180deg, rgba(230, 57, 70, 0.8), rgba(26, 60, 90, 0.8)), /* Градиент фона */
                    repeating-linear-gradient(0deg, rgba(0, 212, 255, 0.2) 0px, rgba(0, 212, 255, 0.2) 1px, transparent 1px, transparent 3px); /* Полосы на фоне */
        background-blend-mode: overlay; /* Режим наложения фона */
    }

    .hero h1 {
        font-size: 2em; /* Размер шрифта заголовка */
    }

    .service, .case {
        width: 100%; /* Ширина блоков (на всю доступную ширину) */
        min-height: 450px; /* Минимальная высота блоков */
    }

    .cases-container {
        flex-direction: column; /* Расположение кейсов в столбец */
        align-items: center; /* Выравнивание кейсов по центру */
    }

    .case {
        width: 90%; /* Ширина кейсов */
        max-width: 500px; /* Максимальная ширина кейсов */
    }

    .cookie-notice {
        flex-direction: column; /* Расположение содержимого в столбец */
        gap: 10px; /* Расстояние между элементами */
        text-align: center; /* Выравнивание текста по центру */
    }

    .map-container {
        width: 100%; /* Ширина карты */
        max-width: 703px; /* Максимальная ширина карты */
        height: 350px; /* Высота карты */
        display: flex; /* Расположение содержимого в строку */
        justify-content: center; /* Выравнивание содержимого по центру */
        align-items: center; /* Выравнивание содержимого по центру */
        overflow: hidden; /* Скрытие лишнего содержимого */
    }

    .map-container iframe, .map-container script {
        width: 100%; /* Ширина карты */
        transform: none; /* Убирает трансформации */
    }

    .map-fallback {
        font-size: 0.9em; /* Уменьшенный размер шрифта текста на мобильных */
        padding: 15px; /* Уменьшенные отступы */
    }

    .about-infographic div {
        width: 90%; /* Ширина блоков инфографики */
        max-width: 280px; /* Максимальная ширина блоков */
    }

    .blog-infographic div {
        flex: 1 1 100%; /* Гибкая ширина блока (на всю ширину) */
        max-width: 100%; /* Максимальная ширина блока */
    }

    .blog-infographic.steps div:nth-child(-n+3),
    .blog-infographic.steps div:nth-child(n+4) {
        flex: 1 1 100%; /* Гибкая ширина блока */
        max-width: 100%; /* Максимальная ширина блока */
    }

    .blog-infographic img {
        width: 60px; /* Ширина иконок */
        height: 60px; /* Высота иконок */
    }

    .florian-image {
        display: block !important; /* Принудительный показ изображения */
        margin: 20px auto; /* Центрирование изображения */
    }

    .#contact ul li {
        width: 90%; /* Ширина элементов списка */
        max-width: 280px; /* Максимальная ширина элементов списка */
    }

    #blog {
        gap: 30px; /* Расстояние между постами */
    }

    .blog-post {
        width: 90%; /* Ширина поста */
        max-width: 500px; /* Максимальная ширина поста */
    }
}

/* Адаптивность для экранов до 480px */
@media (max-width: 480px) {
    .hero {
        padding: 40px 10px; /* Уменьшенные отступы баннера */
    }

    .hero h1 {
        font-size: 1.5em; /* Уменьшенный размер шрифта заголовка */
    }

    .hero p {
        font-size: 1em; /* Уменьшенный размер шрифта текста */
    }

    .cta-button {
        padding: 10px 20px; /* Уменьшенные отступы кнопки */
    }

    .florian-image {
        max-width: 200px; /* Уменьшенная ширина изображения Флориана */
    }

    .service {
        min-height: 500px; /* Увеличенная минимальная высота блоков услуг */
    }

    .cookie-notice {
        padding: 10px; /* Уменьшенные отступы уведомления */
    }

    .cookie-notice p {
        font-size: 0.8em; /* Уменьшенный размер шрифта текста */
    }

    .cookie-notice button {
        padding: 5px 10px; /* Уменьшенные отступы кнопки */
        font-size: 0.9em; /* Уменьшенный размер шрифта кнопки */
    }

    .map-container {
        height: 300px; /* Уменьшенная высота карты для маленьких экранов */
    }

    .map-fallback {
        font-size: 0.8em; /* Уменьшенный размер шрифта текста */
        padding: 10px; /* Уменьшенные отступы */
    }
}

/* Адаптивность для экранов от 769px */
@media (min-width: 769px) {
    .cookie-notice {
        max-width: 400px; /* Максимальная ширина уведомления */
        left: 20px; /* Отступ слева */
        right: auto; /* Убирает отступ справа */
        padding: 10px; /* Уменьшенные отступы */
    }

    .cookie-notice p {
        font-size: 0.8em; /* Уменьшенный размер шрифта текста */
    }

    .cookie-notice button {
        padding: 5px 10px; /* Уменьшенные отступы кнопки */
        font-size: 0.9em; /* Уменьшенный размер шрифта кнопки */
    }
}

/* Стили для кнопки "Назад" */
.back-button {
    position: fixed; /* Фиксированное положение кнопки */
    bottom: 20px; /* Отступ снизу */
    left: 20px; /* Отступ слева */
    background: #00D4FF; /* Фон кнопки (голубой) */
    color: #000; /* Цвет текста кнопки (черный) */
    padding: 10px 20px; /* Внутренние отступы кнопки */
    border-radius: 5px; /* Скругление углов кнопки */
    text-decoration: none; /* Убирает подчёркивание у ссылки */
    font-weight: 700; /* Жирный шрифт текста кнопки */
    box-shadow: 0 0 10px #00D4FF; /* Тень кнопки (голубая) */
    transition: background 0.3s ease, transform 0.3s ease; /* Плавное изменение фона и увеличение */
}

.back-button:hover {
    background: #E63946; /* Фон кнопки при наведении (красный) */
    color: #E6E6E6; /* Цвет текста при наведении */
    transform: scale(1.05); /* Увеличение кнопки на 5% при наведении */
}

/* === Стили для кнопок в уведомлении о cookie (кнопки одна над другой) === */
.cookie-notice {
    flex-direction: column;
    align-items: flex-start;
    max-width: 380px;
    left: 20px;
    right: auto;
}
.cookie-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
}
.cookie-buttons button {
    width: 100%;
    padding: 8px 15px;
    white-space: nowrap;
}
/* Кнопка "Отказаться" — прозрачная с голубой рамкой */
.cookie-notice button.cookie-reject {
    background: transparent;
    border: 1px solid #00D4FF;
    color: #00D4FF;
}
.cookie-notice button.cookie-reject:hover {
    background: #E63946;
    border-color: #E63946;
    color: #E6E6E6;
}
/* На мобильных — на всю ширину экрана */
@media (max-width: 768px) {
    .cookie-notice {
        max-width: none;
        left: 10px;
        right: 10px;
    }
}

/* Стили для бегущей строки о VPN */
.vpn-marquee {
    position: fixed; /* Фиксированное положение строки */
    top: 0; /* Расположение вверху страницы */
    left: 0; /* Отступ слева */
    width: 100%; /* Ширина на всю страницу */
    background: #ffcc00; /* Желтый фон */
    color: #000; /* Черный текст */
    padding: 10px; /* Внутренние отступы */
    z-index: 10000; /* Поверх всех элементов */
    font-size: 1em; /* Размер шрифта текста */
    text-align: center; /* Выравнивание текста по центру */
}

.vpn-marquee marquee {
    width: 100%; /* Ширина бегущей строки */
    font-weight: 700; /* Жирный шрифт текста */
}

/* Адаптивность для бегущей строки на мобильных устройствах */
@media (max-width: 768px) {
    .vpn-marquee {
        font-size: 0.9em; /* Уменьшенный размер шрифта на мобильных */
        padding: 8px; /* Уменьшенные отступы */
    }
}