/* Основные стили */
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            line-height: 1.6;
            background-color: #121212;
            color: #ffffff;
        }
        header {
            background: #000000;
            padding: 40px 20px;
            text-align: center;
        }
        header h1 {
            margin: 0;
            font-size: 3em;
            font-weight: bold;
        }
        header p {
            margin-top: 10px;
            font-size: 1.2em;
            color: #cccccc;
        }
        .links-block {
            background-color: #ffffff; /* Белый фон для блока */
            color: #000000; /* Чёрный текст */
            padding: 20px; /* Внутренние отступы */
            text-align: center; /* Центровка текста */
            margin: 30px auto; /* Отступы сверху и снизу, выравнивание по центру */
            max-width: 900px; /* Максимальная ширина блока */
            border-radius: 8px; /* Закруглённые углы */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Лёгкая тень для объёма */
        }
        .links-block h2 {
            margin-bottom: 20px; /* Расстояние между заголовком и кнопками */
            font-size: 1.5em; /* Размер шрифта */
            color: #000000; /* Чёрный текст */
        }
        .links-block a {
            margin: 10px 0; /* Отступы сверху и снизу для вертикального расположения */
            text-decoration: none; /* Убираем подчеркивание */
            background: #000000; /* Чёрный фон кнопки */
            color: #ffffff; /* Белый текст */
            padding: 12px 25px; /* Внутренние отступы */
            border-radius: 8px; /* Закруглённые углы */
            font-size: 1em; /* Размер текста */
            font-weight: bold; /* Жирный текст */
            display: block; /* Делаем кнопки блочными, чтобы они были на разных строках */
            transition: all 0.3s ease; /* Плавный переход при наведении */
            max-width: 200px; /* Ограничение ширины кнопок */
            margin-left: auto; /* Центровка кнопок */
            margin-right: auto; /* Центровка кнопок */
        }
        .links-block a:hover {
            background: #333333; /* Более светлый фон при наведении */
            transform: translateY(-2px); /* Лёгкое поднятие при наведении */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Тень при наведении */
        }
        .intro {
            text-align: center;
            margin: 30px auto;
            max-width: 900px;
        }
        .features-how-it-works {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            margin: 30px auto;
            max-width: 900px;
        }
        .features, .how-it-works {
            flex: 1;
            background-color: #000000;
            color: #ffffff;
            padding: 20px;
            border-radius: 8px;
        }
        .features h2, .how-it-works h2 {
            text-align: center;
            color: #ffffff;
        }
        .features ul, .how-it-works ul {
            margin: 20px auto;
            text-align: left;
        }
        .features li, .how-it-works li {
            margin-bottom: 10px;
        }
        .monthly-plans {
            margin: 30px auto;
            max-width: 900px;
            text-align: center;
        }
        .monthly-plans h2 {
            font-size: 2em;
            margin-bottom: 20px;
        }
        .monthly-plans p {
            font-size: 1em;
            margin-bottom: 20px;
        }
        .monthly-plans .columns {
            display: flex;
            justify-content: space-between;
            gap: 20px;
        }
        .monthly-plans .column {
            flex: 1;
            background-color: #1c1c1c;
            color: #ffffff;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
        }
        .monthly-plans .column h3 {
            font-size: 1.5em;
            margin-bottom: 15px;
        }
        .monthly-plans .column a {
            text-decoration: none;
            background: #ffffff;
            color: #000000;
            padding: 10px 20px;
            border-radius: 5px;
            font-size: 1.1em;
            display: inline-block;
            margin-top: 15px;
        }
        .monthly-plans .column a:hover {
            background: #cccccc;
        }
        .cta {
            text-align: center;
            margin: 30px auto;
            padding: 30px;
            border-radius: 10px;
            background-color: #1c1c1c;
            max-width: 900px;
        }
        .cta a {
            text-decoration: none;
            background: #ffffff;
            color: #000000;
            padding: 10px 20px;
            border-radius: 5px;
            font-size: 1.2em;
            margin: 5px;
            display: inline-block;
        }
        .cta a:hover {
            background: #cccccc;
        }
        footer {
            text-align: center;
            background: #1c1c1c;
            color: #ffffff;
            padding: 20px;
            max-width: 900px;
            margin: 20px auto;
            border-radius: 8px;
        }
        footer a {
            color: #ffffff;
            text-decoration: underline;
        }
        footer a:hover {
            color: #cccccc;
        }
        /* Стили для всплывающей формы */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 1000;
            justify-content: center;
            align-items: center;
            animation: fadeIn 0.3s ease-in-out;
        }
        .modal.active {
            display: flex;
        }
        .modal-content {
            background: #1c1c1c;
            color: #ffffff;
            padding: 20px;
            border-radius: 8px;
            max-width: 400px;
            width: 90%;
            position: relative;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            animation: slideDown 0.3s ease-out;
        }
        .modal-content h3 {
            text-align: center;
            margin-bottom: 20px;
            font-size: 1.8em;
        }
        .close-modal {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 1.5em;
            cursor: pointer;
            color: #ffffff;
            background: none;
            border: none;
            padding: 5px;
            border-radius: 50%;
            transition: background-color 0.3s ease;
        }
        .close-modal:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }
        .modal-content form label {
            display: block;
            margin-bottom: 8px;
            font-size: 1em;
        }
        .modal-content form input,
        .modal-content form textarea,
        .modal-content form select {
            width: 100%;
            margin-bottom: 15px;
            padding: 10px;
            border: 1px solid #444;
            border-radius: 5px;
            background-color: #2a2a2a;
            color: #fff;
            font-size: 1em;
        }
        .modal-content form input:focus,
        .modal-content form textarea:focus,
        .modal-content form select:focus {
            border-color: #888;
            outline: none;
        }
        .modal-content form button {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 5px;
            background-color: #00bfff;
            color: #ffffff;
            font-size: 1.2em;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .modal-content form button:hover {
            background-color: #009acd;
        }

        /* Анимации */
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        @keyframes slideDown {
            from {
                transform: translateY(-50px);
            }
            to {
                transform: translateY(0);
            }
        }
        .columns {
            display: flex;
            flex-wrap: wrap; /* Позволяет колонкам переноситься на следующую строку */
            gap: 16px; /* Отступы между колонками */
            justify-content: center; /* Центровка по горизонтали */
            align-items: center; /* Центровка по вертикали */
            min-height: 100vh; /* Устанавливаем минимальную высоту на весь экран */
            box-sizing: border-box; /* Учитываем отступы и границы */
        }

        .column {
            flex: 1 1 250px; /* Базовая ширина 250px, растягивается при большем пространстве */
            max-width: 300px; /* Максимальная ширина */
            min-width: 200px; /* Минимальная ширина */
            box-sizing: border-box; /* Учитывать padding в ширине */
            display: flex;
            flex-direction: column; /* Расположение элементов внутри колонки вертикально */
            align-items: center; /* Выравнивание содержимого по центру */
            border: 1px solid #ccc; /* Для наглядности граница */
            padding: 16px; /* Внутренний отступ */
        }

        @media (max-width: 768px) {
            .columns {
                justify-content: center; /* Центровка колонок при переносе на новую строку */
                align-items: center; /* Центровка всех колонок по вертикали */
            }

            .column {
                flex: 1 1 100%; /* Колонки занимают всю ширину при узком экране */
                max-width: 100%; /* Не больше 100% ширины родителя */
            }
        }
        .links-columns {
            display: flex; /* Горизонтальное расположение колонок */
            justify-content: space-between; /* Пространство между колонками */
            gap: 20px; /* Расстояние между колонками */
            margin-top: 20px;
            flex-wrap: wrap; /* Разрешаем колонкам переноситься на новую строку */
        }

        .links-column {
            flex: 1; /* Равномерное распределение ширины колонок */
            min-width: 250px; /* Минимальная ширина колонки */
            max-width: 400px; /* Максимальная ширина колонки */
            background-color: #f9f9f9; /* Светлый фон для колонок */
            color: #000; /* Черный текст */
            padding: 20px; /* Внутренние отступы */
            border-radius: 8px; /* Закругленные углы */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Легкая тень */
            text-align: center; /* Центровка текста */
            display: flex; /* Flexbox для центрирования содержимого */
            flex-direction: column; /* Вертикальное расположение внутри колонки */
            align-items: center; /* Центрирование по горизонтали */
        }

        .links-column h3 {
            margin-bottom: 15px; /* Отступ снизу от заголовка */
            font-size: 1.3em; /* Размер заголовка */
            color: #000; /* Цвет заголовка */
        }

        .links-column a {
            display: block; /* Ссылки в отдельной строке */
            text-decoration: none; /* Убираем подчеркивание */
            background-color: #000; /* Темный фон */
            color: #fff; /* Белый текст */
            padding: 10px 20px; /* Внутренние отступы для кнопок */
            border-radius: 6px; /* Закругленные углы */
            margin: 10px 0; /* Отступ между ссылками */
            font-size: 1em; /* Размер текста */
            font-weight: bold; /* Жирный текст */
            transition: background-color 0.3s ease; /* Плавный переход */
            width: 200px; /* Фиксированная ширина кнопок */
            text-align: center; /* Текст по центру кнопок */
        }

        .links-column a:hover {
            background-color: #333; /* Фон при наведении */
        }

        /* Медиа-запросы для малых экранов */
        @media (max-width: 768px) {
            .links-columns {
                flex-direction: column; /* Переключаем колонки в вертикальный режим */
                align-items: center; /* Центровка всех колонок по горизонтали */
            }

            .links-column {
                max-width: 100%; /* Колонки занимают всю ширину */
            }
        }