/*+++++++++++_Стили_для_ПК_разрешений_+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++_Стили_для_ПК_разрешений_+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++_Стили_для_ПК_разрешений_+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/* Общие стили для всей страницы */
body {
    font-family: Arial, sans-serif; /* Шрифт по умолчанию */
    margin: 0; /* Убираем внешние отступы */
    padding: 0; /* Убираем внутренние отступы */
    background-color: #f4f4f9; /* Цвет фона страницы */
    color: #333; /* Цвет текста */
    line-height: 1.6; /* Межстрочный интервал */
}

/* Стили для шапки страницы */
header {
    background-color: #0c0c0c; /* Цвет фона шапки */
    padding: 20px; /* Внутренние отступы */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Тень для шапки */
}

/* Контейнер для логотипа и текста в шапке */
.logo-container {
    display: flex; /* Используем flexbox для выравнивания */
    align-items: center; /* Выравнивание элементов по центру по вертикали */
    max-width: 1200px; /* Максимальная ширина контейнера */
    margin: 0 auto; /* Центрирование контейнера */
}

/* Стили для изображения логотипа в шапке */
.logo-container img {
    border-radius: 10px; /* Закругление углов изображения */
    margin-right: 20px; /* Отступ справа от логотипа */
}

/* Стили для текста в шапке (название и подзаголовок) */
.logo-container span {
    color: #fff; /* Цвет текста */
    font-size: 1.2em; /* Размер шрифта */
}

/* Стили для выделенного текста (название компании) в шапке */
.logo-container strong {
    font-size: 1.5em; /* Размер шрифта для названия */
}

/* Стили для основного контента страницы */
main {
    max-width: 1200px; /* Максимальная ширина контента */
    margin: 40px auto; /* Внешние отступы и центрирование */
    padding: 0 20px; /* Внутренние отступы */
}

/* Стили для секции с выбором подписки */
#subscription-section .container {
    background-color: #fff; /* Цвет фона контейнера */
    padding: 30px; /* Внутренние отступы */
    border-radius: 10px; /* Закругление углов */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Тень для контейнера */
    text-align: center; /* Выравнивание текста по центру */
}

/* Стили для заголовка в секции подписки */
h1 {
    font-size: 2em; /* Размер шрифта заголовка */
    margin-bottom: 30px; /* Отступ снизу */
    color: #0a0a0a; /* Цвет заголовка */
}

/* Стили для форм (контейнеров кнопок) */
form {
    display: inline-block; /* Формы располагаются в линию */
    margin: 0 25px; /* Увеличиваем отступы между формами */
}

/* Стили для кнопок */
button {
    background-color: #ff0000; /* Цвет фона кнопки */
    color: #fff; /* Цвет текста кнопки */
    border: 1px solid #ff0000; /* Тонкая рамка */
    padding: 15px 25px; /* Внутренние отступы */
    font-size: 1.2em; /* Размер шрифта */
    border-radius: 5px; /* Закругление углов */
    cursor: pointer; /* Курсор в виде указателя */
    transition: background-color 0.3s ease; /* Плавная смена цвета фона */
    box-sizing: border-box; /* Учитываем padding в ширине */
    text-align: center; /* Выравнивание текста по центру */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Лёгкая тень */
}

/* Стили для маленькой кнопки (слева) */
button.button-small {
    width: 335px; /* Меньшая ширина для кнопки "Подписка на PRO" */
}

/* Стили для большой кнопки (справа) */
button.button-large {
    width: 335px; /* Большая ширина для кнопки "Подписка на PRO_RECURSIVE" */
}

/* Эффект при наведении на кнопку */
button:hover {
    background-color: #0a0a0a; /* Более тёмный оттенок синего */
}

/* Стили для подвала страницы */
footer {
    background-color: #070707; /* Цвет фона подвала */
    color: #fff; /* Цвет текста */
    text-align: center; /* Выравнивание текста по центру */
    padding: 15px 0; /* Внутренние отступы */
    position: fixed; /* Фиксируем подвал внизу страницы */
    bottom: 0; /* Привязка к нижней части */
    width: 100%; /* Ширина на всю страницу */
}

/* Стили для содержимого подвала */
.footer {
    max-width: 1200px; /* Максимальная ширина содержимого */
    margin: 0 auto; /* Центрирование */
    font-size: 0.9em; /* Размер шрифта */
}

/*+++++++++++_Стили_для_ПК_разрешений_+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++_Стили_для_ПК_разрешений_+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++_Стили_для_ПК_разрешений_+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/**************************************************************************************************************************************/

/*+++++++++++_Стили для мобильных устройств (ширина до 768px)_++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++_Стили для мобильных устройств (ширина до 768px)_++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++_Стили для мобильных устройств (ширина до 768px)_++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/* Общие стили для всей страницы */
html, body {
    height: 100%; /* Страница занимает минимум всю высоту экрана */
    margin: 0; /* Убираем внешние отступы */
    padding: 0; /* Убираем внутренние отступы */
}

body {
    font-family: Arial, sans-serif; /* Шрифт по умолчанию */
    background-color: #f4f4f9; /* Цвет фона страницы */
    color: #333; /* Цвет текста */
    line-height: 1.6; /* Межстрочный интервал */
    display: flex; /* Используем flexbox для размещения подвала внизу */
    flex-direction: column; /* Элементы располагаются вертикально */
    min-height: 100vh; /* Минимальная высота — вся высота экрана */
}

/* Стили для шапки страницы */
header {
    background-color: #0c0c0c; /* Цвет фона шапки */
    padding: 20px; /* Внутренние отступы */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Тень для шапки */
}

/* Контейнер для логотипа и текста в шапке */
.logo-container {
    display: flex; /* Используем flexbox для выравнивания */
    align-items: center; /* Выравнивание элементов по центру по вертикали */
    max-width: 1200px; /* Максимальная ширина контейнера */
    margin: 0 auto; /* Центрирование контейнера */
}

/* Стили для изображения логотипа в шапке */
.logo-container img {
    border-radius: 10px; /* Закругление углов изображения */
    margin-right: 20px; /* Отступ справа от логотипа */
}

/* Стили для текста в шапке (название и подзаголовок) */
.logo-container span {
    color: #fff; /* Цвет текста */
    font-size: 1.2em; /* Размер шрифта */
}

/* Стили для выделенного текста (название компании) в шапке */
.logo-container strong {
    font-size: 1.5em; /* Размер шрифта для названия */
}

/* Стили для основного контента страницы */
main {
    max-width: 1200px; /* Максимальная ширина контента */
    margin: 40px auto; /* Внешние отступы и центрирование */
    padding: 0 20px; /* Внутренние отступы */
    flex: 1 0 auto; /* Контент растягивается, чтобы подвал был внизу */
}

/* Стили для секции с выбором подписки */
#subscription-section .container {
    background-color: #fff; /* Цвет фона контейнера */
    padding: 30px; /* Внутренние отступы */
    border-radius: 10px; /* Закругление углов */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Тень для контейнера */
    text-align: center; /* Выравнивание текста по центру */
}

/* Стили для заголовка в секции подписки */
h1 {
    font-size: 2em; /* Размер шрифта заголовка */
    margin-bottom: 30px; /* Отступ снизу */
    color: #0a0a0a; /* Цвет заголовка */
}

/* Стили для форм (контейнеров кнопок) */
form {
    display: inline-block; /* Формы располагаются в линию */
    margin: 0 25px; /* Увеличиваем отступы между формами */
}

/* Стили для кнопок */
button {
    background-color: #ff0000; /* Цвет фона кнопки */
    color: #fff; /* Цвет текста кнопки */
    border: 1px solid #ff0000; /* Тонкая рамка */
    padding: 15px 25px; /* Внутренние отступы */
    font-size: 1.2em; /* Размер шрифта */
    border-radius: 5px; /* Закругление углов */
    cursor: pointer; /* Курсор в виде указателя */
    transition: background-color 0.3s ease; /* Плавная смена цвета фона */
    box-sizing: border-box; /* Учитываем padding в ширине */
    text-align: center; /* Выравнивание текста по центру */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Лёгкая тень */
}

/* Стили для маленькой кнопки (слева) */
button.button-small {
    width: 335px; /* Меньшая ширина для кнопки "Подписка на PRO" */
}

/* Стили для большой кнопки (справа) */
button.button-large {
    width: 335px; /* Большая ширина для кнопки "Подписка на PRO_RECURSIVE" */
}

/* Эффект при наведении на кнопку */
button:hover {
    background-color: #0a0a0a; /* Более тёмный оттенок синего */
}

/* Стили для подвала страницы */
footer {
    flex-shrink: 0; /* Подвал не сжимается */
    background-color: #070707; /* Чёрный фон подвала */
    color: #fff; /* Цвет текста */
    text-align: center; /* Выравнивание текста по центру */
    padding: 15px 0; /* Внутренние отступы */
    width: 100%; /* Ширина на всю страницу */
}

/* Стили для содержимого подвала */
.footer {
    max-width: 1200px; /* Максимальная ширина содержимого */
    margin: 0 auto; /* Центрирование */
    font-size: 0.9em; /* Размер шрифта */
}

/*=========== Стили для мобильных устройств (ширина до 768px) ===========*/
@media (max-width: 768px) {
    /* Общие стили для страницы */
    body {
        line-height: 1.8; /* Уменьшаем межстрочный интервал */
        background-color: #f4f4f9; /* Цвет фона страницы */
    }

    /* Стили для шапки */
    header {
        background-color: #0c0c0c; /* Чёрный фон шапки, как в ПК-версии */
        padding: 15px; /* Уменьшаем отступы */
    }

    /* Контейнер для логотипа и текста в шапке */
    .logo-container {
        flex-direction: row; /* Располагаем элементы горизонтально */
        align-items: center; /* Центрируем элементы по вертикали */
        justify-content: space-between; /* Логотип слева, текст справа */
        text-align: left; /* Текст выравниваем по левому краю */
        padding-left: 15px; /* Добавляем отступ слева, чтобы сместить вправо */
    }

    /* Стили для изображения логотипа */
    .logo-container img {
        width: 50px; /* Уменьшаем размер логотипа */
        height: 50px;
        margin-right: 10px; /* Добавляем небольшой отступ справа */
        margin-bottom: 0; /* Убираем отступ снизу */
    }

    /* Стили для текста в шапке */
    .logo-container span {
        font-size: 0.9em; /* Уменьшаем размер шрифта для мобильных */
        color: #fff; /* Белый цвет текста */
        flex: 1; /* Текст занимает оставшееся пространство */
    }

    /* Стили для выделенного текста (название компании) */
    .logo-container strong {
        font-size: 1.1em; /* Уменьшаем размер шрифта */
    }

    /* Стили для основного контента */
    main {
        margin: 20px auto; /* Уменьшаем внешние отступы */
        padding: 0 10px; /* Уменьшаем внутренние отступы */
    }

    /* Стили для секции с выбором подписки */
    #subscription-section .container {
        padding: 15px; /* Уменьшаем внутренние отступы */
        margin: 0 auto; /* Центрируем контейнер */
    }

    /* Стили для заголовка */
    h1 {
        font-size: 1.5em; /* Уменьшаем размер шрифта заголовка */
        margin-bottom: 15px; /* Уменьшаем отступ снизу */
        color: #0a0a0a; /* Чёрный цвет заголовка, как в ПК-версии */
    }

    /* Стили для форм (контейнеров кнопок) */
    form {
        display: block; /* Формы располагаются друг под другом */
        margin: 8px auto; /* Уменьшаем вертикальные отступы и центрируем */
        text-align: center; /* Центрируем форму */
    }

    /* Стили для кнопок */
    button {
        background-color: #ff0000; /* Красный цвет кнопки, как в ПК-версии */
        border: 1px solid #ff0000; /* Тонкая красная рамка */
        padding: 10px 15px; /* Уменьшаем внутренние отступы */
        font-size: 1em; /* Уменьшаем размер шрифта */
        width: 100%; /* Кнопка на всю ширину контейнера */
        max-width: 320px; /* Увеличиваем максимальную ширину для пропорциональности */
    }

    /* Стили для маленькой кнопки (слева) */
    button.button-small {
        width: 100%; /* Кнопка на всю ширину контейнера */
        max-width: 320px; /* Увеличиваем максимальную ширину */
    }

    /* Стили для большой кнопки (справа) */
    button.button-large {
        width: 100%; /* Кнопка на всю ширину контейнера */
        max-width: 320px; /* Увеличиваем максимальную ширину */
    }

    /* Эффект при наведении на кнопку */
    button:hover {
        background-color: #0a0a0a; /* Чёрный цвет при наведении, как в ПК-версии */
    }

    /* Стили для подвала */
    footer {
        background-color: #070707; /* Чёрный фон подвала, как в ПК-версии */
        padding: 10px 0; /* Уменьшаем отступы */
        position: relative; /* Убираем фиксацию, чтобы подвал не перекрывал контент */
    }

    /* Стили для содержимого подвала */
    .footer {
        font-size: 0.8em; /* Уменьшаем размер шрифта */
        max-width: 100%; /* Убираем ограничение ширины для мобильных */
        padding: 0 10px; /* Добавляем небольшие отступы по бокам */
    }
}

/*+++++++++++_Стили для мобильных устройств (ширина до 768px)_++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++_Стили для мобильных устройств (ширина до 768px)_++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++_Стили для мобильных устройств (ширина до 768px)_++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/