/* Сброс стандартных отступов и паддингов для всех элементов */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box; /* Паддинги и бордеры не увеличивают общую ширину элемента */
        }

        /* Определение CSS-переменных для цветовой палитры и анимаций */
        :root {
            /* Неоновые цвета в стиле киберпанк */
            --neon-blue: #00f3ff;      /* Яркий голубой неон - основной акцент */
            --neon-pink: #ff00ff;       /* Яркий розовый неон - для контраста */
            --neon-green: #00ff9d;      /* Зеленый неон - для дополнительных акцентов */
            --neon-purple: #aa66ff;      /* Фиолетовый неон */
            --neon-cyan: #00b4ff;        /* Голубой неон */
            --dark-bg: #0a0818;           /* Основной темный фон */
            --darker-bg: #070612;         /* Более темный фон для глубины */
            --text-light: rgba(255, 255, 255, 0.92); /* Полупрозрачный белый для текста */
            --transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Плавная анимация с нелинейным ускорением */
        }

        /* Стили для body - темный фон на всю страницу */
        body {
            background: var(--dark-bg);  /* Используем переменную темного фона */
            font-family: 'Segoe UI', sans-serif; /* Основной шрифт */
            min-height: 100vh;            /* Минимальная высота на весь экран */
            display: flex;                 /* Используем flexbox */
            flex-direction: column;        /* Элементы располагаются вертикально */
        }

        /* Демо-контент для примера */
        .demo-content {
            flex: 1;                      /* Занимает все доступное пространство */
            padding: 100px 40px 40px;      /* Отступы сверху, по бокам, снизу */
            text-align: center;            /* Текст по центру */
            background: linear-gradient(135deg, rgba(10, 8, 24, 0.97), rgba(7, 6, 18, 0.99)); /* Градиентный фон */
        }

        .demo-content h1 {
            color: var(--neon-blue);       /* Неоново-голубой цвет */
            font-family: 'Orbitron', sans-serif; /* Шрифт Orbitron для киберпанк-стиля */
            font-size: 2.5rem;              /* Размер шрифта 40px */
            text-shadow: 0 0 20px var(--neon-blue); /* Свечение текста */
            margin-bottom: 20px;             /* Отступ снизу */
        }

        .demo-content p {
            color: var(--text-light);       /* Светлый цвет текста */
            font-size: 1.2rem;               /* Размер шрифта */
            opacity: 0.8;                     /* Немного прозрачный */
        }

        /* ===== ОСНОВНЫЕ СТИЛИ ФУТЕРА ===== */
        .footer {
            background: rgba(13, 10, 31, 0.98); /* Полупрозрачный темно-синий фон */
            border-top: 2px solid transparent;    /* Прозрачная граница сверху для градиента */
            border-image: linear-gradient(90deg, var(--neon-blue), var(--neon-pink), var(--neon-blue)); /* Градиент для границы */
            border-image-slice: 1;                 /* Растягиваем градиент на всю границу */
            position: relative;                     /* Для позиционирования псевдоэлементов */
            overflow: hidden;                        /* Скрываем выходящие за пределы элементы */
            backdrop-filter: blur(15px);             /* Размытие фона (эффект матового стекла) */
            margin-top: auto;                        /* Прижимаем к низу страницы */
        }

        /* Псевдоэлемент для создания неоновых бликов по углам */
        .footer::before {
            content: '';                           /* Обязательное свойство */
            position: absolute;                     /* Абсолютное позиционирование внутри футера */
            top: 0;                                 /* Прижимаем к верху */
            left: 0;                                /* Прижимаем к левому краю */
            right: 0;                               /* Прижимаем к правому краю */
            bottom: 0;                              /* Прижимаем к низу */
            background: 
                radial-gradient(circle at 0% 0%, rgba(0, 243, 255, 0.1) 0%, transparent 50%), /* Голубой блик в левом верхнем углу */
                radial-gradient(circle at 100% 100%, rgba(255, 0, 255, 0.1) 0%, transparent 50%); /* Розовый блик в правом нижнем углу */
            pointer-events: none;                    /* Элемент не реагирует на клики мыши */
        }

        /* Псевдоэлемент для анимированного свечения */
        .footer::after {
            content: '';                            /* Обязательное свойство */
            position: absolute;                      /* Абсолютное позиционирование */
            top: -50%;                               /* Выходим за пределы сверху */
            left: -50%;                              /* Выходим за пределы слева */
            width: 200%;                             /* Удвоенная ширина для анимации */
            height: 200%;                            /* Удвоенная высота для анимации */
            background: linear-gradient(              /* Градиент для свечения */
                45deg,
                transparent 30%,                      /* Прозрачный участок */
                rgba(0, 243, 255, 0.03) 50%,         /* Полупрозрачный неоновый участок */
                transparent 70%                       /* Прозрачный участок */
            );
            animation: footerGlow 15s linear infinite; /* Бесконечная анимация свечения */
        }

        /* Анимация движения неонового свечения */
        @keyframes footerGlow {
            0% { transform: translateX(-30%) translateY(-30%) rotate(0deg); } /* Начальное положение */
            100% { transform: translateX(30%) translateY(30%) rotate(10deg); } /* Конечное положение со смещением и поворотом */
        }

        /* Контейнер для контента футера */
        .footer-content {
            max-width: 1400px;              /* Максимальная ширина контейнера */
            margin: 0 auto;                  /* Центрирование по горизонтали */
            padding: 4rem 40px 0;             /* Внутренние отступы: сверху 4rem, по бокам 40px, снизу 0 */
            position: relative;                /* Относительное позиционирование для z-index */
            z-index: 1;                        /* Выше псевдоэлементов с анимацией */
        }

        /* Сетка для разделов футера */
        .footer-grid {
            display: grid;                             /* Используем CSS Grid */
            grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr; /* 5 колонок разной ширины: 2 части, 1, 1, 1, 1.5 части */
            gap: 2.5rem;                                /* Расстояние между колонками */
            margin-bottom: 3rem;                        /* Отступ снизу до нижней части */
        }

        /* Отдельная секция в сетке */
        .footer-section {
            display: flex;                      /* Flex-контейнер */
            flex-direction: column;              /* Элементы располагаются вертикально */
        }

        /* Логотип в футере */
        .footer-logo {
            display: flex;                      /* Flex для расположения картинки и текста в ряд */
            align-items: center;                 /* Выравнивание по центру вертикали */
            gap: 12px;                           /* Расстояние между картинкой и текстом */
            margin-bottom: 1.5rem;                /* Отступ снизу */
            text-decoration: none;                /* Убираем подчеркивание ссылки */
            transition: var(--transition);        /* Плавная анимация */
        }

        .footer-logo:hover {
            transform: translateY(-3px);          /* Легкий подъем при наведении */
        }

        /* Изображение логотипа */
        .footer-logo-img {
            height: 45px;                          /* Фиксированная высота */
            width: auto;                            /* Ширина автоматически */
            filter: drop-shadow(0 0 15px var(--neon-blue)); /* Неоновое свечение */
            transition: var(--transition);          /* Плавность изменения свечения */
        }

        .footer-logo:hover .footer-logo-img {
            filter: drop-shadow(0 0 25px var(--neon-blue)); /* Усиление свечения при наведении */
        }

        /* Текстовая часть логотипа - SKY.IT */
        .footer-logo-text {
            text-shadow: 0 0 15px var(--neon-blue); /* Свечение текста */
            color: var(--neon-blue);                 /* Неоново-голубой цвет */
            font-size: 2rem;                          /* Размер шрифта 32px */
            font-weight: 100;                         /* Жирное начертание */
            letter-spacing: 2px;                       /* Межбуквенный интервал */
            background: linear-gradient(90deg, var(--neon-blue), var(--neon-cyan)); /* Градиент для текста */
            -webkit-background-clip: text;             /* Обрезаем фон по контуру текста (для WebKit) */
            -webkit-text-fill-color: transparent;      /* Делаем текст прозрачным, виден только фон */
            background-clip: text;                      /* Стандартное свойство для обрезки фона */
            font-family: 'Montserrat', sans-serif;      /* Используем Montserrat для логотипа */
        }


.footer-slogan {
    color: var(--neon-pink); /* Делаем розовым, чтобы выделялся */
    font-size: 1.3rem;         /* Немного уменьшаем размер */
    font-weight: 400;        /* Обычная жирность */
    letter-spacing: 1px;      /* Небольшой интервал между буквами */
    font-family: 'Segoe UI', sans-serif; /* Оставляем основной шрифт */
    display: block;           /* Чтобы слоган был на новой строке */
    margin-top: -2px;          /* Небольшой отступ сверху */
    opacity: 0.9;             /* Делаем чуть ярче, чем обычный текст */
    text-shadow: 0 0 8px var(--neon-pink); /* Добавляем розовое свечение */
}








        /* Описание компании */
        .footer-description {
            color: var(--text-light);               /* Светлый цвет текста */
            line-height: 1.7;                        /* Межстрочный интервал */
            margin-bottom: 2rem;                      /* Отступ снизу */
            font-size: 1rem;                          /* Размер шрифта */
            opacity: 0.8;                             /* Немного прозрачный */
            max-width: 300px;                         /* Максимальная ширина */
        }

        /* Блок социальных ссылок */
        .social-links {
            display: flex;                           /* Flex-контейнер */
            gap: 1rem;                               /* Расстояние между иконками */
            flex-wrap: wrap;                          /* Перенос на новую строку при необходимости */
        }

        /* Отдельная социальная ссылка */
        .social-link {
            display: flex;                            /* Flex для центрирования иконки */
            align-items: center;                       /* Центрирование по вертикали */
            justify-content: center;                    /* Центрирование по горизонтали */
            width: 45px;                                /* Фиксированная ширина */
            height: 45px;                               /* Фиксированная высота */
            background: rgba(255, 255, 255, 0.05);      /* Полупрозрачный белый фон */
            border-radius: 50%;                          /* Круглая форма */
            color: var(--neon-blue);                     /* Неоново-голубой цвет иконки */
            text-decoration: none;                       /* Убираем подчеркивание */
            transition: var(--transition);               /* Плавная анимация */
            font-size: 1.3rem;                            /* Размер иконки */
            border: 1px solid rgba(0, 243, 255, 0.2);     /* Неоновая граница */
            position: relative;                            /* Для псевдоэлемента */
            overflow: hidden;                              /* Скрываем выходящий за границы блик */
        }

        /* Блик для социальной ссылки */
        .social-link::before {
            content: '';                                 /* Псевдоэлемент */
            position: absolute;                           /* Абсолютное позиционирование */
            top: 0;                                       /* Прижимаем к верху */
            left: -100%;                                  /* Прячем слева */
            width: 100%;                                  /* Ширина как у ссылки */
            height: 100%;                                 /* Высота как у ссылки */
            background: linear-gradient(90deg, transparent, rgba(0, 243, 255, 0.2), transparent); /* Бегущий блик */
            transition: left 0.6s ease;                   /* Плавное перемещение */
        }

        .social-link:hover::before {
            left: 100%;                                   /* При наведении блик пробегает по ссылке */
        }

        .social-link:hover {
            background: linear-gradient(135deg, var(--neon-blue), var(--neon-pink)); /* Градиентный фон */
            color: white;                                 /* Белый цвет иконки */
            transform: translateY(-5px) scale(1.1);        /* Подъем и увеличение */
            box-shadow: 0 5px 20px rgba(0, 243, 255, 0.5); /* Неоновое свечение */
            border-color: transparent;                     /* Прозрачная граница */
        }

        /* Заголовки секций */
        .footer-title {
            color: var(--neon-blue);                       /* Неоново-голубой цвет */
            font-size: 1.3rem;                              /* Размер шрифта */
            margin-bottom: 1.8rem;                           /* Отступ снизу */
            font-weight: 700;                                /* Жирный */
            font-family: 'Orbitron', sans-serif;             /* Шрифт Orbitron для заголовков */
            position: relative;                               /* Для псевдоэлемента с подчеркиванием */
            padding-bottom: 12px;                             /* Внутренний отступ снизу */
            text-shadow: 0 0 10px rgba(0, 243, 255, 0.5);     /* Свечение текста */
        }

        /* Декоративное подчеркивание заголовка */
        .footer-title::after {
            content: '';                                      /* Псевдоэлемент */
            position: absolute;                                /* Абсолютное позиционирование */
            bottom: 0;                                         /* Прижимаем к низу */
            left: 0;                                           /* Выравнивание по левому краю */
            width: 50px;                                       /* Ширина подчеркивания */
            height: 3px;                                       /* Толщина */
            background: linear-gradient(90deg, var(--neon-blue), var(--neon-pink)); /* Градиент */
            border-radius: 2px;                                /* Скругленные края */
            box-shadow: 0 0 10px var(--neon-blue);             /* Неоновое свечение */
        }

        /* Список ссылок в секциях */
        .footer-links {
            list-style: none;                                 /* Убираем маркеры списка */
            padding: 0;                                       /* Убираем внутренние отступы */
            margin: 0;                                        /* Убираем внешние отступы */
        }

        .footer-links li {
            margin-bottom: 0.9rem;                            /* Отступ между пунктами списка */
        }

        .footer-links a {
            color: var(--text-light);                          /* Светлый цвет текста */
            text-decoration: none;                             /* Убираем подчеркивание */
            transition: var(--transition);                     /* Плавная анимация */
            font-size: 1rem;                                   /* Размер шрифта */
            display: flex;                                      /* Flex для иконки и текста */
            align-items: center;                                /* Выравнивание по центру вертикали */
            opacity: 0.8;                                       /* Немного прозрачный */
            position: relative;                                 /* Для анимации смещения */
            padding-left: 0;                                    /* Начальный отступ слева */
        }

        .footer-links a i {
            margin-right: 10px;                                /* Отступ иконки от текста */
            color: var(--neon-blue);                            /* Неоново-голубой цвет иконки */
            font-size: 0.9rem;                                  /* Размер иконки */
            transition: var(--transition);                      /* Плавная анимация */
            opacity: 0.7;                                       /* Немного прозрачная */
        }


        .footer-links a:hover i {
            opacity: 1;                                          /* Иконка становится непрозрачной */
            transform: scale(1.2);                               /* Увеличиваем иконку */
            color: var(--neon-pink);                             /* Меняем цвет на розовый */
        }

        /* Блок контактной информации */
        .contact-info {
            margin-bottom: 2rem;                                 /* Отступ снизу */
        }

        /* Отдельный контактный элемент */
        .contact-item {
            display: flex;                                       /* Flex для иконки и текста */
            align-items: center;                                 /* Выравнивание по центру вертикали */
            gap: 12px;                                           /* Расстояние между иконкой и текстом */
            margin-bottom: 1.2rem;                               /* Отступ снизу */
            color: var(--text-light);                            /* Светлый цвет текста */
            font-size: 1rem;                                     /* Размер шрифта */
            opacity: 0.8;                                         /* Немного прозрачный */
            transition: var(--transition);                       /* Плавная анимация */
            padding: 8px 12px;                                   /* Внутренние отступы */
            border-radius: 10px;                                 /* Скругленные углы */
            background: rgba(255, 255, 255, 0.02);               /* Едва заметный фон */
            border: 1px solid transparent;                        /* Прозрачная граница */
        }

        .contact-item:hover {
            opacity: 1;                                           /* Полная непрозрачность */
            background: rgba(0, 243, 255, 0.05);                  /* Неоновый фон */
            border-color: rgba(0, 243, 255, 0.2);                 /* Появление неоновой границы */
            transform: translateX(5px);                           /* Смещение вправо */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);            /* Тень */
        }

        .contact-item i {
            color: var(--neon-blue);                              /* Неоново-голубой цвет иконки */
            width: 20px;                                          /* Фиксированная ширина */
            text-align: center;                                   /* Центрирование иконки */
            font-size: 1.2rem;                                    /* Размер иконки */
            filter: drop-shadow(0 0 5px var(--neon-blue));        /* Свечение иконки */
        }

        .contact-item span {
            flex: 1;                                              /* Занимает все доступное пространство */
        }

        /* Нижняя часть футера */
        .footer-bottom {
            border-top: 1px solid rgba(0, 243, 255, 0.15);       /* Тонкая неоновая граница сверху */
            padding: 1.8rem 0;                                    /* Внутренние отступы сверху и снизу */
            position: relative;                                   /* Для z-index */
            backdrop-filter: blur(10px);                          /* Размытие фона */
        }

        /* Контейнер для нижней части */
        .footer-bottom-content {
            display: flex;                                        /* Flex-контейнер */
            justify-content: space-between;                       /* Распределение по краям */
            align-items: center;                                  /* Выравнивание по центру вертикали */
            max-width: 1400px;                                    /* Максимальная ширина */
            margin: 0 auto;                                        /* Центрирование */
            padding: 0 40px;                                      /* Внутренние отступы по бокам */
        }

        /* Блок копирайта */
        .copyright {
            color: var(--text-light);                             /* Светлый цвет текста */
            opacity: 0.6;                                          /* Полупрозрачный */
            font-size: 0.95rem;                                    /* Размер шрифта */
            display: flex;                                         /* Flex для иконки и текста */
            align-items: center;                                   /* Выравнивание по центру */
            gap: 8px;                                              /* Расстояние между иконкой и текстом */
        }

        .copyright i {
            color: var(--neon-pink);                               /* Розовый цвет сердечка */
            animation: heartBeat 1.5s ease infinite;               /* Анимация биения сердца */
        }

        /* Анимация бьющегося сердца */
        @keyframes heartBeat {
            0%, 100% { transform: scale(1); }                     /* Обычный размер */
            50% { transform: scale(1.1); color: var(--neon-blue); } /* Увеличение и смена цвета */
        }

        /* Ссылки в нижней части футера */
        .footer-bottom-links {
            display: flex;                                         /* Flex-контейнер */
            gap: 2rem;                                             /* Расстояние между ссылками */
        }

        .footer-bottom-links a {
            color: var(--text-light);                              /* Светлый цвет текста */
            text-decoration: none;                                 /* Убираем подчеркивание */
            font-size: 0.95rem;                                    /* Размер шрифта */
            transition: var(--transition);                         /* Плавная анимация */
            opacity: 0.6;                                           /* Полупрозрачный */
            position: relative;                                    /* Для псевдоэлемента */
            padding: 5px 0;                                        /* Внутренние отступы сверху и снизу */
        }

        .footer-bottom-links a::after {
            content: '';                                           /* Псевдоэлемент для подчеркивания */
            position: absolute;                                    /* Абсолютное позиционирование */
            bottom: 0;                                             /* Прижимаем к низу */
            left: 0;                                               /* Выравнивание по левому краю */
            width: 0;                                              /* Начальная ширина 0 */
            height: 2px;                                           /* Толщина подчеркивания */
            background: linear-gradient(90deg, var(--neon-blue), var(--neon-pink)); /* Градиент */
            transition: width 0.3s ease;                           /* Плавное расширение */
        }

        .footer-bottom-links a:hover {
            opacity: 1;                                            /* Полная непрозрачность */
            color: var(--neon-blue);                               /* Неоновый цвет текста */
        }

        .footer-bottom-links a:hover::after {
            width: 100%;                                           /* Подчеркивание расширяется на всю ширину */
        }

        /* ===== АДАПТИВНОСТЬ ===== */
        /* Для экранов шириной до 1200px */
        @media (max-width: 1200px) {
            .footer-grid {
                grid-template-columns: 1.5fr 1fr 1fr 1fr; /* Меняем сетку на 4 колонки */
                gap: 2rem;                               /* Уменьшаем расстояние между колонками */
            }
        }

        /* Для экранов шириной до 992px */
        @media (max-width: 992px) {
            .footer-grid {
                grid-template-columns: 1fr 1fr 1fr;      /* Меняем сетку на 3 колонки */
                gap: 2rem;
            }
            
            .footer-content {
                padding: 3rem 30px 0;                     /* Уменьшаем отступы */
            }
            
            .footer-bottom-content {
                padding: 0 30px;                          /* Уменьшаем отступы по бокам */
            }
        }

        /* Для экранов шириной до 768px */
        @media (max-width: 768px) {
            .footer-grid {
                grid-template-columns: 1fr 1fr;          /* Меняем сетку на 2 колонки */
                gap: 2rem;
            }
            
            .footer-content {
                padding: 2.5rem 20px 0;                   /* Еще уменьшаем отступы */
            }
            
            .footer-bottom-content {
                flex-direction: column;                    /* Элементы располагаются вертикально */
                gap: 1.2rem;                               /* Расстояние между элементами */
                text-align: center;                        /* Текст по центру */
                padding: 0 20px;                           /* Отступы по бокам */
            }
            
            .footer-bottom-links {
                flex-direction: row;                       /* Ссылки в ряд */
                flex-wrap: wrap;                           /* Перенос при необходимости */
                justify-content: center;                   /* Центрирование */
                gap: 1.2rem;                               /* Расстояние между ссылками */
            }
            
            .footer-logo-text {
                font-size: 1.8rem;                         /* Уменьшаем логотип */
            }
            
            .footer-description {
                max-width: 100%;                           /* Описание на всю ширину */
            }
        }

        /* Для экранов шириной до 576px (мобильные телефоны) */
        @media (max-width: 576px) {
            .footer-grid {
                grid-template-columns: 1fr;                /* Одна колонка */
                gap: 2rem;
            }
            
            .footer-section {
                text-align: center;                         /* Текст по центру */
                align-items: center;                         /* Элементы по центру */
            }
            
            .footer-title::after {
                left: 50%;                                   /* Центрируем подчеркивание */
                transform: translateX(-50%);                 /* Смещаем на половину ширины */
            }
            
            .footer-links a {
                justify-content: center;                     /* Центрируем ссылки */
            }
            
            .contact-item {
                width: 100%;                                 /* На всю ширину */
                justify-content: flex-start;                 /* Выравнивание по левому краю */
                text-align: left;                            /* Текст по левому краю */
            }
            
            .footer-bottom-links {
                flex-direction: column;                      /* Ссылки в колонку */
                gap: 0.8rem;                                 /* Уменьшаем расстояние */
            }
            
            .social-links {
                justify-content: center;                     /* Центрируем соцсети */
            }
        }