html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* --- Кастомный Навбар (Черный) --- */
/* Логотип-ссылка */
.nav-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
}

/* Стили для вашей картинки */
.brand-img {
    height: 55px; /* Задайте нужную вам высоту логотипы */
    width: auto; /* Ширина подстроится автоматически, чтобы не искажать пропорции */
    display: block;
    object-fit: contain; /* Защита от деформации изображения */
}

.custom-navbar {
    background-color: #121212; /* Глубокий черный/темно-серый */
    padding: 20px 40px;
    position: relative;
    z-index: 100;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

/* Логотип */
.nav-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
}

.brand-text {
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 5px;
    font-weight: 600;
}

/* Заглушка под оранжевое лого (если у вас будет картинка, замените код ниже) */
.brand-logo {
    width: 30px;
    height: 40px;
    border: 2px solid #ff4500; /* Временный оранжевый контур */
    position: relative;
}

/* Кнопка-Бургер */
.menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 18px;
    padding: 0;
}

    .menu-toggle .bar {
        width: 100%;
        height: 2px;
        background-color: #ffffff;
        transition: 0.3s;
    }

/* --- Полноэкранное меню (Оранжевое) --- */
.fullscreen-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #F14616; /* Фирменный оранжевый */
    z-index: 999;
    display: flex;
    align-items: center; /* Центрирует список ссылок по вертикали */
    padding-left: 10%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
    transform: translateY(-10%);
}

    /* Класс, который будет добавляться через JS */
    .fullscreen-menu.active {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

.menu-header {
    position: absolute;
    top: 20px;
    left: 40px; /* Выравниваем ровно по сетке основного навбара */
}

/* Переопределяем цвет текста бренда внутри оранжевого меню, если необходимо */
.fullscreen-menu .brand-text {
    color: #ffffff;
}
/* Кнопка закрытия (Крестик) */
.menu-close {
    position: absolute;
    top: 30px;
    right: 40px;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 45px;
    line-height: 1;
    cursor: pointer;
}

/* Контент меню */
.menu-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .menu-links li {
        margin-bottom: 20px;
    }

    .menu-links a {
        font-family: 'Montserrat', sans-serif;
        color: #ffffff;
        font-size: 36px;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 3px;
        transition: opacity 0.2s;
    }

        .menu-links a:hover {
            opacity: 0.7;
        }

/* Фоновый водяной знак Fifth Corner */
.menu-bg-text {
    font-family: 'Montserrat', sans-serif;
    position: absolute;
    right: 15%; /* Отодвигаем от самого края к центру */
    top: 50%;
    transform: translateY(-50%); /* Идеально центрируем по вертикали */
    font-size: 140px; /* Делаем массивным, как на макете */
    font-weight: 800;
    color: rgba(0, 0, 0, 0.06); /* Легкий темный силуэт поверх оранжевого */
    line-height: 0.9;
    letter-spacing: -2px;
    pointer-events: none;
    user-select: none;
    z-index: 1; /* Чтобы текст был под ссылками и кнопкой закрытия */
}

/* Ссылки должны быть поверх фонового текста */
.menu-content {
    position: relative;
    z-index: 2;
}

@media (max-width: 992px) {
    .menu-bg-text {
        font-size: 80px;
        right: 5%;
    }
}

/* Адаптивность под мобилки */
@media (max-width: 768px) {
    .menu-links a {
        font-size: 28px;
    }

    .menu-bg-text {
        font-size: 60px;
    }

    .custom-navbar {
        padding: 15px 20px;
    }

    .menu-close {
        right: 20px;
    }

    .menu-header {
        left: 20px;
        top: 15px;
    }

    .menu-bg-text {
        display: none; /* На совсем маленьких экранах фоновый текст лучше скрыть, чтобы не кашевать */
    }
}

/* --- Кастомный Футер (Темный) --- */
.custom-footer {
    background-color: #111111; /* Такой же глубокий черный, как у навбара */
    color: #888888; /* Приглушенный серый текст для контента */
    font-family: 'Montserrat', sans-serif;
    padding: 60px 20px 30px 20px;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap; /* Чтобы на мобилках колонки переносились */
}

/* Стили для колонок */
.footer-col {
    flex: 1;
    min-width: 250px; /* Защита от слишком сильного сжатия */
    margin-bottom: 30px;
    font-size: 14px;
    line-height: 1.8;
}

    /* Оранжевые заголовки */
    .footer-col h3 {
        color: #f24413; /* Наш фирменный оранжевый */
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 15px;
    }

    .footer-col p {
        margin: 0 0 8px 0;
    }

    /* Ссылки (включая email) */
    .footer-col a {
        color: #888888 !important;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .footer-col a:hover {
            color: #ffffff !important; /* При ховере текст становится белым */
        }

/* Правая колонка с важными ссылками */
.footer-links {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .footer-links a {
        color: #aaaaaa; /* Чуть более светлый серый, как на макете */
        font-weight: 600;
        font-size: 13px;
        letter-spacing: 0.5px;
        margin-bottom: 10px;
    }

/* Нижняя часть с копирайтом */
.footer-bottom {
    max-width: 1200px;
    margin: 20px auto 0 auto;
    padding-top: 25px;
    border-top: 1px solid #222222; /* Очень тонкая, едва заметная линия */
    text-align: center;
    font-size: 12px;
    color: #555555; /* Максимально приглушенный текст для копирайта */
}

/* Адаптивность для планшетов и телефонов */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        align-items: center;
    }

    .footer-col {
        margin-bottom: 40px;
    }
}

/* --- Первая секция (Hero Section) --- */
.hero-section {
    background-color: #111111; /* Такой же глубокий черный цвет фона */
    min-height: 80vh; /* Занимает большую часть высоты экрана */
    display: flex;
    align-items: center; /* Центрирование контента по вертикали */
    padding: 80px 40px;
    box-sizing: border-box;
}

.hero-container {
    max-width: 1400px; /* Ограничиваем ширину текстового блока, как на макете */
    margin: 0 auto; /* Центрируем весь блок на широких экранах */
    text-align: left;
}

/* Стили главного заголовка */
.hero-title {
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    font-size: 54px; /* Большой, массивный шрифт */
    font-weight: 700; /* Жирное начертание */
    line-height: 1.2;
    margin-bottom: 45px; /* Отступ до параграфов */
    letter-spacing: -0.5px;
}

/* Стили описания */
.hero-description {
    max-width: 1000px; /* Текст описания чуть уже заголовка */
    margin-bottom: 50px; /* Отступ до кнопки */
}

    .hero-description p {
        font-family: 'Montserrat', sans-serif;
        color: #aaaaaa; /* Приглушенный серый цвет текста */
        font-size: 16px;
        line-height: 1.6; /* Комфортное межстрочное расстояние */
        margin-bottom: 25px; /* Отступ между абзацами */
        font-weight: 700;
    }

/* Акцентная кнопка */
.btn-discuss {
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    background-color: #f24413; /* Фирменный оранжевый */
    color: #ffffff !important; /* Важно, чтобы бутстрап не перебил цвет */
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 16px 32px; /* Внутренние отступы кнопки */
    border: none;
    transition: background-color 0.2s ease, transform 0.1s ease;
    cursor: pointer;
}

    /* Эффект при наведении на кнопку */
    .btn-discuss:hover {
        background-color: #d6360b; /* Чуть более темный оранжевый при ховере */
    }

    .btn-discuss:active {
        transform: scale(0.98); /* Небольшой эффект нажатия */
    }

/* --- Адаптивность для мобильных устройств --- */
@media (max-width: 992px) {
    .hero-title {
        font-size: 42px;
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding: 60px 20px;
    }

    .hero-title {
        font-size: 32px;
        margin-bottom: 30px;
    }

    .hero-description p {
        font-size: 15px;
    }

    .btn-discuss {
        width: 100%; /* На мобилках кнопка растягивается на всю ширину */
        text-align: center;
    }
}

/* --- Секция Аккордеона (Benefits) --- */
.benefits-section {
    background-color: #111111; /* Такой же темный фон */
    padding: 100px 40px;
}

.benefits-container {
    max-width: 900px; /* Контентная область чуть уже для фокуса на тексте */
    margin: 0 auto;
}

.benefits-main-title {
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    font-size: 36px;
    font-weight: 400; /* Не слишком жирный, как на макете */
    margin-bottom: 60px;
}

/* Кастомизация структуры аккордеона */
.custom-accordion .accordion-item {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #222222; /* Тонкая разделительная черта между пунктами */
    margin-bottom: 10px;
}

/* Кнопка-заголовок */
.custom-accordion .accordion-button {
    background-color: transparent;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 500;
    padding: 30px 0; /* Увеличиваем вертикальные отступы для воздушности */
    box-shadow: none;
    transition: color 0.3s ease;
}

    /* Состояние, когда пункт раскрыт */
    .custom-accordion .accordion-button:not(.collapsed) {
        background-color: transparent;
        color: #ffffff;
        box-shadow: none;
    }

    /* Полная замена стандартной синей бутстрап-иконки на кастомную оранжевую стрелочку */
    .custom-accordion .accordion-button::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f24413'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        background-size: 1.25rem;
        transition: transform 0.3s ease;
    }

    /* Оранжевая стрелочка переворачивается при раскрытии */
    .custom-accordion .accordion-button:not(.collapsed)::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f24413'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        transform: rotate(-180deg);
    }

/* Контент внутри раскрытого блока */
.custom-accordion .accordion-body {
    padding: 0 0 30px 0; /* Отступ только снизу, чтобы текст не прижимался к следующей линии */
    font-family: 'Montserrat', sans-serif;
    color: #888888; /* Приглушенный серый для описания */
    font-size: 16px;
    line-height: 1.6;
}

/* --- Адаптивность --- */
@media (max-width: 768px) {
    .benefits-section {
        padding: 60px 20px;
    }

    .benefits-main-title {
        font-size: 26px;
        margin-bottom: 40px;
    }

    .custom-accordion .accordion-button {
        font-size: 18px;
        padding: 20px 0;
    }

    .custom-accordion .accordion-body {
        font-size: 14px;
    }
}

/* --- Секция с фоновой картинкой (Logobook) --- */
.logobook-section {
    /* Наложение темного слоя поверх картинки для сохранения читаемости текста */
    background: linear-gradient(rgba(17, 17, 17, 0.85), rgba(17, 17, 17, 0.85)), url('../images/index_cta.png') no-repeat center center;
    background-size: cover;
    background-attachment: scroll; /* Картинка будет скроллиться вместе со страницей */
    padding: 120px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
}

.logobook-container {
    max-width: 900px;
    text-align: center; /* Центрируем контент */
}

/* Заголовок секции */
.logobook-title {
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    font-size: 42px;
    font-weight: 500;
    margin-bottom: 30px;
    letter-spacing: -0.5px;
}

    /* Выделенное оранжевое слово */
    .logobook-title .text-orange {
        color: #f24413; /* Фирменный оранжевый */
    }

/* Описание */
.logobook-text {
    font-family: 'Montserrat', sans-serif;
    color: #cccccc; /* Светло-серый текст, контрастирующий с фоном */
    font-size: 18px;
    line-height: 1.7;
    font-weight: 400;
    max-width: 800px;
    margin: 0 auto;
}

/* --- Адаптивность --- */
@media (max-width: 768px) {
    .logobook-section {
        padding: 80px 20px;
    }

    .logobook-title {
        font-size: 30px;
        margin-bottom: 20px;
    }

    .logobook-text {
        font-size: 15px;
    }
}

/* --- Секция Сетки Услуг (Services Grid) --- */
.services-grid-section {
    background-color: #111111; /* Фирменный темный фон */
    padding: 100px 40px;
}

.services-grid-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Элемент карточки услуги */
.service-card {
    padding: 20px 30px;
    margin-bottom: 40px;
}

/* Оранжевый крупный номер */
.service-num {
    font-family: 'Montserrat', sans-serif;
    color: #f24413; /* Фирменный оранжевый */
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

/* Заголовок услуги */
.service-title {
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 25px;
}

/* Описание услуги */
.service-text {
    font-family: 'Montserrat', sans-serif;
    color: #777777; /* Приглушенный серый, как на макете */
    font-size: 14px;
    line-height: 1.7;
    font-weight: 400;
}

/* --- Адаптивность --- */
@media (max-width: 768px) {
    .services-grid-section {
        padding: 60px 20px;
    }

    .service-card {
        padding: 10px 10px;
        margin-bottom: 30px;
    }

    .service-num {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .service-title {
        font-size: 16px;
        margin-bottom: 15px;
    }
}

/* --- Секция Процесса Работы (How We Work) --- */
.process-section {
    background-color: #111111; /* Наш стандартный темный фон */
    padding: 100px 40px;
}

.process-container {
    max-width: 900px; /* Ограничиваем ширину для аккуратного выравнивания */
    margin: 0 auto;
}

/* Главный заголовок */
.process-main-title {
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    font-size: 36px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 60px;
}

/* Общий контейнер шагов с оранжевой линией слева */
.process-timeline {
    border-left: 2px solid #f24413; /* Фирменная вертикальная линия */
    padding-left: 40px; /* Отступ текста от линии */
    margin-left: 5px; /* Легкий сдвиг от края контейнера */
}

/* Блок отдельного шага */
.process-step {
    margin-bottom: 55px; /* Большое расстояние между этапами */
    position: relative;
}

    /* Убираем нижний отступ у последнего шага */
    .process-step:last-child {
        margin-bottom: 0;
    }

/* Заголовок шага */
.step-title {
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

/* Описание шага */
.step-text {
    font-family: 'Montserrat', sans-serif;
    color: #666666; /* Приглушенный темный оттенок серого текста */
    font-size: 14px;
    line-height: 1.7;
    font-weight: 400;
    max-width: 750px; /* Ограничиваем длину строк для удобства чтения */
}

/* --- Адаптивность --- */
@media (max-width: 768px) {
    .process-section {
        padding: 60px 20px;
    }

    .process-main-title {
        font-size: 28px;
        margin-bottom: 40px;
    }

    .process-timeline {
        padding-left: 25px; /* Уменьшаем отступ на мобильных устройствах */
    }

    .step-title {
        font-size: 16px;
    }

    .step-text {
        font-size: 13px;
    }
}

/* --- Кастомная линия-разделитель секций --- */
.section-divider {
    height: 1px;
    background-color: #2C2C2C; /* Очень темный серый цвет, как на макете */
    border: none;
    margin: 0; /* Обнуляем марджины, чтобы контролировать их по месту */
    width: 100%;
    opacity: 1 !important;
}

/* --- СТИЛИ ДЛЯ СТРАНИЦЫ ABOUT --- */

/* Общий контейнер контента страницы для выравнивания */
.about-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Секция 1: Описание студии */
.about-hero {
    background-color: #ffffff;
    padding: 90px 0 60px 0;
}

.about-main-title {
    font-family: 'Montserrat', sans-serif;
    color: #111111;
    font-size: 38px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 35px;
}

.text-orange-italic {
    color: #f24413;
    font-style: italic;
}

.about-subtitle {
    font-family: 'Montserrat', sans-serif;
    color: #666666;
    font-size: 15px;
    line-height: 1.8;
    max-width: 900px;
}

/* Обертка для секций с ломаным геометрическим фоном, как на макете ABOUT.svg */
.geometric-bg-wrapper {
    position: relative;
    background-color: #ffffff;
    overflow: hidden; /* Чтобы углы треугольников не вылезали за пределы экрана */
    z-index: 1;
}

/* Общие свойства для слоев треугольников */
.triangle-layer {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Уводим на задний план под текст */
    pointer-events: none; /* Чтобы линии не мешали выделять текст */
}

    /* Первый крупный скошенный полигон сверху-слева направо-вниз */
    .triangle-layer.tl-1 {
        background-color: #f7f7f7;
        top: 0;
        /* Рисуем полигон по координатам X Y */
        clip-path: polygon(0 15%, 50% 40%, 0% 65%);
        opacity: 0.8;
    }

    /* Второй встречный треугольник, создающий пересечение по центру */
    .triangle-layer.tl-2 {
        background-color: #f3f3f3;
        top: 20%;
        clip-path: polygon(100% 25%, 50% 50%, 100% 75%);
        opacity: 0.6;
    }

/* Гарантируем, что контент секций будет находиться выше фоновых полигонов */
.standards-section,
.middle-quote-section {
    position: relative;
    z-index: 2;
}

/* Секции стандартов (01 и 02) */
.standards-section {
    padding: 60px 0;
}

.standards-num-title {
    display: block;
    font-family: 'Montserrat', sans-serif;
    color: #f24413;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 40px;
    text-transform: uppercase;
}

.standard-row {
    border-bottom: 1px solid #eaeaea;
    padding: 30px 0;
}

    .standard-row:last-child {
        border-bottom: none;
    }

    .standard-row h3 {
        font-family: 'Montserrat', sans-serif;
        color: #111111;
        font-size: 22px;
        font-weight: 600;
        margin-bottom: 15px;
    }

    .standard-row p {
        font-family: 'Montserrat', sans-serif;
        color: #555555;
        font-size: 14px;
        line-height: 1.7;
        max-width: 650px;
        margin: 0;
    }

/* Секция 3: Большая цитата по центру */
.middle-quote-section {
    padding: 80px 0;
}

.middle-quote {
    font-family: 'Montserrat', sans-serif;
    color: #111111;
    font-size: 32px;
    font-style: italic;
    font-weight: 500;
}

/* Секция 5: Инфографика Why Choose Us */
.why-choose-us-section {
    background-color: #ffffff;
    padding: 100px 0;
}

.why-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #111111;
    margin-bottom: 20px;
}

.why-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #888888;
    line-height: 1.6;
}

/* Контейнер для кастомного волнообразного таймлайна */
.infographic-curve-container {
    position: relative;
    padding-top: 40px;
}

    /* Имитация плавной оранжевой линии на фоне элементов */
    .infographic-curve-container::before {
        content: '';
        position: absolute;
        top: 120px;
        left: 0;
        width: 100%;
        height: 4px;
        background: #f24413;
        border-radius: 2px;
        z-index: 1;
    }

.info-step {
    position: relative;
    z-index: 2;
    margin-bottom: 50px;
    padding-left: 30px;
}

.step-dot {
    position: absolute;
    left: 0;
    top: 80px; /* Выравнивание точки ровно по горизонтальной линии */
    width: 14px;
    height: 14px;
    background-color: #ffffff;
    border: 3px solid #f24413;
    border-radius: 50%;
    z-index: 3;
}

/* Огромные цифры 1, 2, 3 на фоне шагов */
.bg-digit {
    font-family: 'Oswald', sans-serif;
    font-size: 130px;
    font-weight: 700;
    color: #f0f0f0;
    position: absolute;
    right: 10px;
    top: -50px;
    z-index: -1;
    line-height: 1;
    user-select: none;
}

.info-step h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #111111;
    margin-bottom: 15px;
}

.info-step p {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: #666666;
    line-height: 1.6;
    max-width: 500px;
}

/* Смещения шагов по вертикали для создания эффекта волны, как в ABOUT.svg */
@media (min-width: 992px) {
    .infographic-curve-container {
        display: flex;
        justify-content: space-between;
    }

        .infographic-curve-container::before {
            top: 160px;
        }

    .info-step {
        width: 30%;
        margin-bottom: 0;
        padding-left: 0;
    }

    .step-dot {
        left: 20px;
        top: 155px;
    }
    /* Эффект волны вверх-вниз */
    .step-pos-1 {
        transform: translateY(0);
    }

    .step-pos-2 {
        transform: translateY(40px);
    }

    .step-pos-3 {
        transform: translateY(-20px);
    }
}

/* Секция 6: Нижний призыв к действию (CTA) */
.cta-standards-section {
    background-color: #ffffff;
    text-align: center;
    padding: 100px 0 120px 0;
    border-top: 1px solid #f5f5f5;
}

    .cta-standards-section h2 {
        font-family: 'Oswald', sans-serif;
        font-size: 38px;
        font-weight: 500;
        color: #f24413;
        letter-spacing: 1px;
        margin-bottom: 25px;
    }

    .cta-standards-section p {
        font-family: 'Montserrat', sans-serif;
        font-size: 16px;
        color: #111111;
        line-height: 1.7;
        margin-bottom: 40px;
    }

/* Оранжевая кнопка */
.btn-explore {
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    background-color: #f24413;
    color: #ffffff !important;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 15px 35px;
    border: none;
    transition: background-color 0.2s;
}

    .btn-explore:hover {
        background-color: #d6360b;
    }

/* --- Мобильная адаптивность --- */
@media (max-width: 768px) {
    .about-main-title {
        font-size: 26px;
    }

    .middle-quote {
        font-size: 22px;
    }

    .cta-standards-section h2 {
        font-size: 26px;
    }

    .bg-digit {
        font-size: 90px;
        top: -30px;
    }
}

/* --- ИНВЕРСИЯ НАВБАРА И ФУТЕРА ДЛЯ СВЕТЛЫХ СТРАНИЦ --- */

/* Стили для навбара внутри светлой страницы */
body.page-light .custom-navbar {
    background-color: #ffffff !important;
    border-bottom: 1px solid #eaeaea;
}

    /* Перекрашиваем ссылки в навбаре в темный цвет */
    body.page-light .custom-navbar .nav-link {
        color: #111111 !important;
    }

        body.page-light .custom-navbar .nav-link:hover {
            color: #f24413 !important; /* Оранжевый при наведении */
        }

/* Иконка бургер-меню (если используется стандартная Bootstrap) */
body.page-light .menu-toggle {
    filter: invert(1); /* Инвертируем белый бургер в черный */
}


/* Стили для футера внутри светлой страницы */
body.page-light footer {
    background-color: #ffffff !important;
    color: #888888 !important;
    border-top: 1px solid #eaeaea;
}

    /* Текст и копирайт в футере */
    body.page-light footer .footer-text,
    body.page-light footer .copyright {
        color: #888888 !important;
    }

    /* Ссылки в футере (политика конфиденциальности и т.д.) */
    body.page-light footer a {
        color: #888888 !important;
    }

        body.page-light footer a:hover {
            color: #f24413 !important;
        }

/* --- Специфические стили для точного графика-волны --- */
.why-choose-us-section {
    background-color: #ffffff;
    padding: 120px 0;
    overflow: hidden;
}

.why-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 34px;
    font-weight: 800;
    color: #111111;
    margin-bottom: 25px;
    letter-spacing: -0.5px;
}

/* Оболочка графика */
.infographic-wave-wrapper {
    position: relative;
    width: 100%;
    height: 480px; /* Высота пространства для маневра волны */
}

/* Адаптивный SVG слой */
.wave-svg {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1;
    pointer-events: none;
}

/* Общий класс для блоков шагов */
.wave-step {
    position: absolute;
    z-index: 2;
    width: 260px;
}

/* Внутренняя карточка контента */
.step-card {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Белый маркер-переключатель с тенью на линии */
.step-marker {
    width: 34px;
    height: 34px;
    background: #ffffff;
    border-radius: 10px; /* Слегка скругленные углы, как на макете */
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.08);
    position: relative;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* Маленькая серая точка внутри маркера */
    .step-marker::after {
        content: '';
        width: 8px;
        height: 8px;
        background-color: #b0b0b0;
        border-radius: 50%;
    }

/* Огромные фоновые цифры 1, 2, 3 */
.step-bg-num {
    font-family: 'Montserrat', sans-serif;
    font-size: 140px;
    font-weight: 700;
    color: #f1f1f1; /* Едва заметный серый тон */
    position: absolute;
    z-index: -1;
    line-height: 0.8;
    user-select: none;
}

.wave-step h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #111111;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wave-step p {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    color: #777777;
    line-height: 1.6;
    margin: 0;
}

/* --- ТОЧНОЕ ПОЗИЦИОНИРОВАНИЕ НА ТОЧКАХ ИЗГИБА (Десктоп) --- */

/* Шаг 1: Первая впадина волны */
.wave-step.step-1 {
    left: 12%;
    top: 100px;
}

    .wave-step.step-1 .step-marker {
        margin-left: 20px;
    }

    .wave-step.step-1 .step-bg-num {
        right: -20px;
        top: -20px;
    }

/* Шаг 2: Средняя точка (перегиб) */
.wave-step.step-2 {
    left: 48%;
    top: 155px;
}

    .wave-step.step-2 .step-marker {
        margin-left: 15px;
    }

    .wave-step.step-2 .step-bg-num {
        right: -30px;
        top: -10px;
    }

/* Шаг 3: Верхний пик волны справа */
.wave-step.step-3 {
    right: 0%;
    top: -10px;
}

    .wave-step.step-3 .step-marker {
        margin-left: 45px;
    }

    .wave-step.step-3 .step-bg-num {
        right: 20px;
        top: -30px;
    }


/* --- АДАПТИВНОСТЬ ДЛЯ ЭКРАНОВ (Планшеты и Мобильные) --- */
@media (max-width: 1200px) {
    .infographic-wave-wrapper {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 50px;
        padding-top: 30px;
    }

    /* Скрываем SVG-линию на мобилках, чтобы вёрстка выстроилась в аккуратный вертикальный список */
    .wave-svg {
        display: none;
    }

    .wave-step {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
    }

    .step-marker {
        margin-left: 0 !important;
    }

    .step-bg-num {
        right: 20px !important;
        top: -10px !important;
        font-size: 110px;
    }

    .wave-step p {
        max-width: 600px;
    }
}

/* Главный холст-контейнер */
.wave-visual-container {
    position: relative;
    width: 100%;
    height: 650px; /* Увеличили высоту, так как заголовок теперь тоже внутри */
}

/* Позиционируем заголовок в верхний левый угол */
.why-header-block {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 340px;
    z-index: 3; /* Чтобы был поверх картинки, если они пересекутся */
}

.why-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 34px;
    font-weight: 800;
    color: #111111;
    margin-bottom: 20px;
}

.why-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #888888;
    line-height: 1.7;
    margin: 0;
}

/* Корректируем положение картинки-линии, опускаем её чуть ниже заголовка */
.wave-background-image {
    position: absolute;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1;
    pointer-events: none;
}

/* Базовый класс для шагов текста */
.wave-text-block {
    position: absolute;
    z-index: 2;
    width: 260px;
}

/* Огромные цифры на фоне */
.step-bg-num {
    font-family: 'Montserrat', sans-serif;
    font-size: 140px;
    font-weight: 700;
    color: #f1f1f1;
    position: absolute;
    z-index: -1;
    line-height: 0.8;
    user-select: none;
}


/* ==========================================================================
   КОНСТРУКТОР ТВОИХ ТОЧЕК (Крути эти проценты под изгибы cringe_line.png)
   ========================================================================== */

.wave-text-block.step-1 {
    left: 7%;
    top: 470px; /* Подстраивай высоту относительно новой позиции линии */
}

    .wave-text-block.step-1 .step-bg-num {
        right: 0px;
        top: -20px;
    }

.wave-text-block.step-2 {
    left: 46%;
    top: 350px;
}

    .wave-text-block.step-2 .step-bg-num {
        right: 0px;
        top: -30px;
    }

.wave-text-block.step-3 {
    left: 80%;
    top: 140px;
}

    .wave-text-block.step-3 .step-bg-num {
        right: 0px;
        top: -30px;
    }


/* --- Адаптивность для мобилок --- */
@media (max-width: 1200px) {
    .wave-visual-container {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .why-header-block,
    .wave-text-block {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .wave-background-image {
        display: none; /* Отключаем картинку на мобилках, чтобы текст читался вертикально */
    }

    .step-bg-num {
        right: 10px !important;
        top: -10px !important;
        font-size: 110px;
    }
}

/* --- СТИЛИ СТРАНИЦЫ SERVICES --- */

.services-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 25px;
}

/* Секция 1: Брутальный Hero */
.services-hero-section {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../images/hero_services.png') no-repeat center center;
    background-size: cover;
    padding: 160px 0 100px 0;
    display: flex;
    align-items: center;
}

.hero-card-overlay {
    background-color: rgba(26, 26, 26, 0.85);
    backdrop-filter: blur(10px);
    max-width: 800px;
    padding: 40px;
    border: 1px solid #222222;
    margin: 0 auto;
    text-align: center;
}

    .hero-card-overlay h1 {
        font-family: 'Montserrat', sans-serif;
        font-size: 26px;
        font-weight: 600;
        color: #ffffff;
        margin-bottom: 20px;
        letter-spacing: 0.5px;
    }

        .hero-card-overlay h1 span {
            color: #f24413;
        }

    .hero-card-overlay p {
        font-family: 'Montserrat', sans-serif;
        font-size: 13px;
        color: #aaaaaa;
        line-height: 1.8;
        margin: 0;
    }

/* Секция 2: Заголовок */
.services-title-section {
    background-color: #0b0b0b;
    padding: 100px 0 60px 0;
}

.section-glitch-title {
    font-family: 'Oswald', sans-serif;
    font-size: 32px;
    font-weight: 500;
    color: #ffffff;
    letter-spacing: 3px;
}

/* Секция 3: Карточки / ряды услуг */
.service-item-section {
    background-color: #0b0b0b;
    padding: 80px 0;
}

.service-main-name {
    font-family: 'Oswald', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.service-tag {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #f24413;
    letter-spacing: 1px;
    margin-bottom: 25px;
}

.service-desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: #888888;
    line-height: 1.7;
    margin-bottom: 30px;
}

/* Списки параметров внутри услуг */
.service-details-box h4 {
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.service-details-box .sub-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    color: #777777;
    line-height: 1.6;
    margin-bottom: 15px;
}

.service-details-box ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

    .service-details-box ul li {
        font-family: 'Montserrat', sans-serif;
        font-size: 13px;
        color: #666666;
        position: relative;
        padding-left: 15px;
        margin-bottom: 6px;
    }

        .service-details-box ul li::before {
            content: "+";
            position: absolute;
            left: 0;
            top: -1px;
            color: #555555;
            font-weight: bold;
        }

/* Обертка изображений макетов */
.service-image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .service-image-wrapper img {
        width: 100%;
        height: auto;
        filter: grayscale(10%);
        transition: filter 0.3s;
    }

    .service-image-wrapper:hover img {
        filter: grayscale(0%);
    }

/* Линия-разделитель для темной темы */
hr.section-divider {
    background-color: #161616 !important;
    height: 1px;
    border: none;
    margin: 0;
}

/* Секция 4: Оранжевая форма подписки (CTA) */
.services-cta-section {
    background-color: #0b0b0b;
    padding: 120px 0;
    border-top: 1px solid #161616;
}

.cta-banner-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.6;
    letter-spacing: 1px;
    margin-bottom: 50px;
}

.newsletter-form-inline {
    max-width: 650px;
    margin: 0 auto;
    width: 100%;
}

.input-newsletter-field {
    flex-grow: 1;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #333333;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: #ffffff;
    padding: 12px 10px;
    width: 100%;
    letter-spacing: 1px;
    transition: border-color 0.2s;
}

    .input-newsletter-field:focus {
        outline: none;
        border-color: #f24413;
    }

.btn-join-system {
    font-family: 'Oswald', sans-serif;
    background-color: #f24413;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 13px 40px;
    border: none;
    white-space: nowrap;
    transition: background-color 0.2s;
    margin-top: 20px;
}

@media (min-width: 576px) {
    .btn-join-system {
        margin-top: 0;
        margin-left: 20px;
    }
}

.btn-join-system:hover {
    background-color: #d6360b;
}

/* Адаптивность */
@media (max-width: 768px) {
    .hero-card-overlay {
        padding: 25px;
    }

        .hero-card-overlay h1 {
            font-size: 18px;
        }

    .cta-banner-text {
        font-size: 18px;
    }

    .section-glitch-title {
        font-size: 24px;
    }
}

.card-grey {
    background-color: #242424;
}

/* --- СТИЛИ СТРАНИЦЫ PORTFOLIO --- */

.portfolio-page-wrapper {
    background-color: #ffffff;
    min-height: 100vh;
}

.portfolio-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 25px;
}

.portfolio-container-narrow {
    max-width: 850px;
    margin: 0 auto;
    padding: 0 25px;
}

/* Секция 1: Заголовок */
.portfolio-hero-title {
    padding: 150px 0 70px 0;
}

    .portfolio-hero-title h1 {
        font-family: 'Oswald', sans-serif;
        font-size: 42px;
        font-weight: 500;
        color: #f24413; /* Фирменный оранжевый заголовок */
        letter-spacing: 2px;
    }

/* Секции категорий */
.portfolio-category-section {
    padding: 90px 0;
}

.category-text-block h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #111111;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

.category-text-block p {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: #666666;
    line-height: 1.8;
    margin-bottom: 35px;
}

/* Кнопка LEARN MORE */
.btn-portfolio-action {
    display: inline-block;
    background-color: #f24413;
    color: #ffffff !important;
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 10px 35px;
    text-decoration: none;
    transition: background-color 0.2s;
}

    .btn-portfolio-action:hover {
        background-color: #d6360b;
    }

/* --- МАГИЯ CSS GRID ДЛЯ СЕТКИ ИЗОБРАЖЕНИЙ --- */
.portfolio-grid-layout {
    display: grid;
    gap: 15px;
    width: 100%;
}

    /* Вариант А: Большая картинка СЛЕВА, две маленькие СПРАВА */
    .portfolio-grid-layout.layout-left {
        grid-template-columns: 1.3fr 1fr;
        grid-template-rows: 1fr 1fr;
    }

        .portfolio-grid-layout.layout-left .grid-img-main {
            grid-column: 1 / 2;
            grid-row: 1 / 3;
        }

    /* Вариант Б: Большая картинка СПРАВА, две маленькие СЛЕВА */
    .portfolio-grid-layout.layout-right {
        grid-template-columns: 1fr 1.3fr;
        grid-template-rows: 1fr 1fr;
    }

        .portfolio-grid-layout.layout-right .grid-img-main {
            grid-column: 2 / 3;
            grid-row: 1 / 3;
        }

    /* Элементы сетки */
    .portfolio-grid-layout div {
        overflow: hidden;
        background-color: #f7f7f7;
    }

    .portfolio-grid-layout img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.4s ease;
    }

    .portfolio-grid-layout div:hover img {
        transform: scale(1.03); /* Легкий интерактивный зум при наведении */
    }

/* Линии разделители */
hr.portfolio-divider {
    border: none;
    border-top: 1px solid #eeeeee !important;
    margin: 0;
}

/* Секция 5: Нижний манифест */
.portfolio-footer-manifest {
    padding: 120px 0 140px 0;
    background-color: #ffffff;
}

    .portfolio-footer-manifest h2 {
        font-family: 'Montserrat', sans-serif;
        font-size: 28px;
        font-weight: 600;
        color: #111111;
        margin-bottom: 40px;
        letter-spacing: -0.5px;
    }

    .portfolio-footer-manifest p {
        font-family: 'Montserrat', sans-serif;
        font-size: 14px;
        color: #555555;
        line-height: 1.8;
        margin-bottom: 25px;
    }

/* Большая кнопка цен */
.btn-fixed-packages {
    display: inline-block;
    background-color: #f24413;
    color: #ffffff !important;
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 15px 35px;
    text-decoration: none;
    transition: background-color 0.2s;
}

    .btn-fixed-packages:hover {
        background-color: #d6360b;
    }

/* --- АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ --- */
@media (max-width: 991px) {
    .portfolio-grid-layout {
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto auto !important;
    }

        .portfolio-grid-layout .grid-img-main {
            grid-column: 1 / 3 !important;
            grid-row: auto !important;
        }

        .portfolio-grid-layout .grid-img-sub-1,
        .portfolio-grid-layout .grid-img-sub-2 {
            grid-column: auto !important;
            grid-row: auto !important;
        }

    .portfolio-hero-title h1 {
        font-size: 32px;
    }

    .portfolio-footer-manifest h2 {
        font-size: 22px;
    }

    .portfolio-category-section {
        padding: 50px 0;
    }
}

/* --- СТИЛИ СТРАНИЦЫ ЦЕН И ПАКЕТОВ --- */

.prices-page-wrapper {
    background-color: #111111; /* Темная тема */
    min-height: 100vh;
    padding-bottom: 60px;
}

.prices-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 25px;
}

.prices-container-narrow {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 25px;
}

/* Секция 1: Заголовок */
.prices-hero-section {
    padding: 160px 0 60px 0;
}

.pricing-main-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 36px;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 1px;
    margin-bottom: 25px;
}

.pricing-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #aaaaaa;
    line-height: 1.8;
    font-weight: 300;
}

/* Секция 2: Сетка карточек */
.pricing-cards-section {
    padding: 40px 0 80px 0;
}

/* Базовая карточка тарифа */
.price-card {
    background-color: #111111;
    border: 1px solid #1a1a1a;
    padding: 40px 30px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    transition: transform 0.3s, border-color 0.3s;
}

    .price-card:hover {
        border-color: #262626;
        transform: translateY(-5px);
    }

/* Элементы внутри карточки */
.package-number {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.package-short-desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    color: #666666;
    line-height: 1.7;
    margin-bottom: 30px;
    min-height: 80px; /* Чтобы выровнять высоту описаний */
}

.package-cost {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #f24413; /* Оранжевая цена */
    margin-bottom: 25px;
}

/* Списки фич */
.package-features-list {
    list-style: none;
    padding-left: 0;
    margin-top: 35px;
    margin-bottom: 0;
    border-top: 1px solid #1a1a1a;
    padding-top: 30px;
}

    .package-features-list li {
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        color: #888888;
        line-height: 1.6;
        position: relative;
        padding-left: 24px;
        margin-bottom: 18px;
    }

        /* Кастомные галочки (через векторный пустой круг или иконку) */
        .package-features-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 3px;
            width: 13px;
            height: 13px;
            border: 1px solid #f24413;
            border-radius: 50%;
        }

        /* Мягкая галочка внутри кружка */
        .package-features-list li::after {
            content: "✓";
            position: absolute;
            left: 3px;
            top: -1px;
            font-size: 9px;
            color: #f24413;
        }

/* Кнопки */
.btn-price-action {
    display: block;
    width: 100%;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 13px 10px;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* Стиль кнопки: Контурная */
.btn-outline-style {
    border: 1px solid #333333;
    color: #ffffff !important;
}

    .btn-outline-style:hover {
        border-color: #f24413;
        background-color: #f24413;
    }

/* СТИЛИ ДЛЯ ВЫДЕЛЕННОЙ КАРТОЧКИ (02 / BRAND IDENTITY) */
.featured-card {
    border: 1px solid #222222;
    background-color: #121212;
    transform: scale(1.02); /* Слегка больше остальных */
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

    .featured-card:hover {
        border-color: #f24413;
    }

/* Оранжевая плашка сверху */
.badge-most-popular {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #f24413;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 4px 16px;
    white-space: nowrap;
}

/* Стиль кнопки: Залитая оранжевая */
.btn-solid-style {
    background-color: #f24413;
    color: #ffffff !important;
    border: 1px solid #f24413;
}

    .btn-solid-style:hover {
        background-color: #d6360b;
        border-color: #d6360b;
    }

.featured-card .package-features-list li {
    color: #aaaaaa; /* Чуть ярче текст у важного тарифа */
}

/* Секция 3: Информационные блоки */
.pricing-manifests-section {
    padding: 60px 0 100px 0;
}

.manifest-block {
    margin-bottom: 100px;
}

    .manifest-block h2 {
        font-family: 'Montserrat', sans-serif;
        font-size: 22px;
        font-weight: 600;
        color: #f24413; /* Оранжевые подзаголовки манифестов */
        letter-spacing: 0.5px;
        margin-bottom: 25px;
    }

    .manifest-block .text-orange {
        color: #f24413;
    }

    .manifest-block h2:not(.text-orange) {
        color: #ffffff; /* Белый заголовок для контрактов */
    }

    .manifest-block p {
        font-family: 'Montserrat', sans-serif;
        font-size: 14px;
        color: #888888;
        line-height: 1.8;
        text-align: left;
    }

.end-manifest h2 {
    font-size: 24px;
    color: #ffffff !important;
    letter-spacing: 1px;
    font-weight: 500;
    margin-bottom: 0;
}

/* --- АДАПТИВНОСТЬ --- */
@media (max-width: 1200px) {
    .featured-card {
        transform: scale(1) !important; /* Убираем увеличение на мелких экранах */
    }
}

@media (max-width: 768px) {
    .pricing-main-title {
        font-size: 28px;
    }

    .manifest-block h2 {
        font-size: 18px;
    }

    .manifest-block {
        margin-bottom: 60px;
    }
}

/* --- СТИЛИ СТРАНИЦЫ БЛОГА (JOURNAL) --- */

.blog-page-wrapper {
    background-color: #ffffff; /* Светлый фон */
    min-height: 100vh;
}

.blog-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 25px;
}

/* Суженный контейнер для удобного чтения текстовых статей */
.blog-container-article {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 25px;
}

/* Шапка блога */
.blog-hero-section {
    padding: 150px 0 60px 0;
}

.blog-main-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 38px;
    color: #111111;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.blog-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #888888;
    font-weight: 300;
}

/* Секции постов */
.blog-post-section {
    padding: 60px 0;
}

.post-meta {
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #888888;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.post-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #111111;
    line-height: 1.4;
    margin-bottom: 30px;
    letter-spacing: -0.5px;
}

.post-lead {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #444444;
    line-height: 1.8;
    font-weight: 500;
    margin-bottom: 40px;
}

.post-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #555555;
    line-height: 1.8;
    margin-bottom: 25px;
}

/* Список причин внутри первого поста */
.post-reasons-list {
    margin: 40px 0;
    border-top: 1px solid #eeeeee;
}

.reason-item {
    display: flex;
    align-items: flex-start;
    padding: 30px 0;
    border-bottom: 1px solid #eeeeee;
}

.reason-arrow {
    font-size: 16px;
    color: #bcbcbc;
    margin-right: 25px;
    margin-top: 2px;
}

.reason-content h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #222222;
    margin-bottom: 10px;
}

.reason-content p {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: #666666;
    line-height: 1.7;
    margin-bottom: 0;
}

.post-conclusion {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-style: italic;
    color: #333333;
    line-height: 1.8;
    margin-top: 30px;
}

/* --- МОДУЛЬ ОДНОЙ СПЛОШНОЙ КАРТИНКИ ПО ЦЕНТРУ --- */
.post-single-image-wrapper {
    width: 100%;
    margin: 45px 0;
}

    .post-single-image-wrapper img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
    }

/* Разделительная черта */
hr.blog-divider {
    border: none;
    border-top: 1px solid #eeeeee !important;
    max-width: 780px;
    margin: 0 auto;
}

/* --- СЕКЦИЯ ПОДПИСКИ (CTA БАННЕР ВНИЗУ) --- */
.blog-subscribe-cta {
    padding: 80px 0 120px 0;
}

.subscribe-banner-box {
    /* Подключаем фоновое изображение вместо черного цвета */
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('../images/blog_email.png') no-repeat center center;
    background-size: cover;
    padding: 60px 50px;
    border: 1px solid #1a1a1a;
    position: relative;
}

    .subscribe-banner-box h2 {
        font-family: 'Montserrat', sans-serif;
        font-size: 22px;
        font-weight: 600;
        color: #ffffff;
        letter-spacing: 0.5px;
        margin-bottom: 15px;
    }

    .subscribe-banner-box p {
        font-family: 'Montserrat', sans-serif;
        font-size: 13px;
        color: #888888;
        line-height: 1.7;
        margin-bottom: 0;
        max-width: 550px;
    }

/* Поля формы инпута */
.input-group-custom {
    display: flex;
    align-items: center;
    border: 1px solid #333333; /* Рамка теперь идет вокруг всей группы */
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.4); /* Легкое затемнение внутри */
    margin-bottom: 20px;
}

    .input-group-custom input {
        flex-grow: 1;
        background: transparent;
        border: none;
        color: #ffffff;
        font-family: 'Montserrat', sans-serif;
        font-size: 13px;
        padding: 12px 15px;
    }

        .input-group-custom input:focus {
            outline: none;
        }

    .input-group-custom button {
        background-color: #ffffff;
        color: #111111;
        border: none;
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        font-weight: 500;
        text-transform: none; /* Текст "Subscribe" с большой буквы, не капс */
        letter-spacing: 0.5px;
        padding: 10px 30px;
        transition: background-color 0.2s, color 0.2s;
    }

        .input-group-custom button:hover {
            background-color: #e6e6e6;
            color: #000000;
        }

/* Дисклеймер приватности */
.form-check-privacy {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

    .form-check-privacy input {
        margin-top: 3px;
        accent-color: #f24413;
    }

    .form-check-privacy label {
        font-family: 'Montserrat', sans-serif;
        font-size: 10px;
        color: #555555;
        line-height: 1.5;
    }

/* --- АДАТИВНОСТЬ --- */
@media (max-width: 768px) {
    .blog-main-title {
        font-size: 28px;
    }

    .post-title {
        font-size: 18px;
    }

    .subscribe-banner-box {
        padding: 25px;
    }

        .subscribe-banner-box h2 {
            font-size: 18px;
        }
}

.pricing-cards-section {
    padding: 60px 0 100px 0;
    overflow: hidden;
}

.pricing-slider-track-wrapper {
    width: 100%;
    padding: 40px 0;
}

.pricing-slider-track {
    display: flex;
    gap: 30px;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

/* Обертка карточки */
.slider-card-item {
    flex: 0 0 380px;
    width: 380px;
    /* Плавный переход для всех изменяемых свойств */
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease, visibility 0.4s ease;
    opacity: 1;
    transform: scale(0.92);
}

    /* Центральный увеличенный элемент */
    .slider-card-item.active-center {
        transform: scale(1.06) !important;
        z-index: 5;
    }

.price-card {
    background-color: #111111;
    border: 1px solid #1a1a1a;
    padding: 40px 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

/* Оранжевые стрелки */
.slider-custom-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    width: 60px;
    height: 60px;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
    padding: 0;
}

    .slider-custom-btn.prev {
        left: -80px;
    }

    .slider-custom-btn.next {
        right: -80px;
    }

    .slider-custom-btn svg {
        width: 36px;
        height: 36px;
    }

    .slider-custom-btn:hover svg {
        stroke: #d6360b;
    }

    .slider-custom-btn:active {
        transform: translateY(-50%) scale(0.9);
    }

@media (max-width: 1400px) {
    .slider-custom-btn.prev {
        left: -20px;
    }

    .slider-custom-btn.next {
        right: -20px;
    }
}

@media (max-width: 768px) {
    .slider-card-item {
        flex: 0 0 300px;
        width: 300px;
    }

    .pricing-slider-track {
        gap: 15px;
    }
}

/* --- СТИЛИ СТРАНИЦЫ КОНТАКТОВ (CONTACT.svg) --- */

.contact-page-section {
    background-color: #0b0b0b; /* Ультра-темный фон студии */
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    padding: 100px 0 140px 0;
}

/* Главный заголовок по центру */
.contact-main-header h1 {
    font-size: 64px;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 90px;
    letter-spacing: -1px;
}

.contact-grid-wrapper {
    max-width: 1100px;
    margin: 0 auto !important;
}

/* Левая карточка */
.discuss-project-card {
    background-color: #121212;
    border: 1px solid #1a1a1a;
    padding: 60px 50px;
    border-radius: 4px;
}

.card-box-title {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 25px;
    letter-spacing: -0.5px;
}

.card-box-text {
    font-size: 14px;
    line-height: 1.6;
    color: #999999;
    margin-bottom: 50px;
}

/* Контактные элементы */
.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.contact-info-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.contact-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

    .contact-icon-box svg {
        width: 20px;
        height: 20px;
    }

.contact-link-value {
    font-size: 14px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

    .contact-link-value:hover {
        color: #f24413;
    }

.contact-address-value {
    font-size: 14px;
    line-height: 1.6;
    color: #ffffff;
    font-weight: 500;
}

/* Правая сторона: Форма с линиями ввода */
.contact-inputs-form {
    padding-left: 20px;
}

.input-line-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 45px;
    position: relative;
}

    .input-line-group label {
        font-size: 11px;
        font-weight: 700;
        color: #ffffff;
        letter-spacing: 1px;
        margin-bottom: 12px;
    }

    .input-line-group input {
        background: transparent;
        border: none;
        border-bottom: 1px solid #333333;
        color: #ffffff;
        font-size: 15px;
        padding: 8px 0;
        width: 100%;
        transition: border-color 0.3s ease;
    }

    .input-line-group textarea {
        background: transparent;
        border: none;
        border-bottom: 1px solid #333333;
        color: #ffffff;
        font-size: 15px;
        padding: 8px 0;
        width: 100%;
        resize: none;
        transition: border-color 0.3s ease;
    }

        .input-line-group textarea::placeholder {
            color: #444444;
        }

        /* Эффект фокуса на линиях */
        .input-line-group input:focus,
        .input-line-group textarea:focus {
            outline: none;
            border-bottom-color: #f24413;
        }

/* Оранжевая кнопка отправки */
.form-submit-wrapper {
    margin-top: 50px;
    display: flex;
    justify-content: flex-end; /* Сдвиг кнопки вправо по макету */
}

.btn-contact-submit {
    background-color: #f24413;
    color: #ffffff;
    border: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 16px 40px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

    .btn-contact-submit:hover {
        background-color: #d6360b;
    }

    .btn-contact-submit:active {
        transform: scale(0.98);
    }

/* --- АДАПТИВНОСТЬ --- */
@media (max-width: 991.98px) {
    .contact-main-header h1 {
        font-size: 44px;
        margin-bottom: 50px;
    }

    .contact-inputs-form {
        padding-left: 0;
        margin-top: 20px;
    }

    .form-submit-wrapper {
        justify-content: start; /* На мобильных кнопка выравнивается по левому краю */
    }
}

/* Кастомизация текстового поля и его скроллбара */
.input-line-group textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid #333333;
    color: #ffffff;
    font-size: 15px;
    padding: 8px 0;
    width: 100%;
    resize: none; /* Запрещаем ручное растягивание за угол */
    overflow-y: auto; /* Скролл появляется только при необходимости */
    transition: border-color 0.3s ease;
    /* Скроллбар для Firefox */
    scrollbar-width: thin;
    scrollbar-color: #333333 #0b0b0b;
}

    /* Скроллбар для Chrome, Safari, Edge и Opera */
    .input-line-group textarea::-webkit-scrollbar {
        width: 6px; /* Делаем его очень тонким */
    }

    /* Путь (трек) скроллбара */
    .input-line-group textarea::-webkit-scrollbar-track {
        background: #0b0b0b; /* Полностью сливается с фоном страницы */
    }

    /* Ползунок скроллбара */
    .input-line-group textarea::-webkit-scrollbar-thumb {
        background-color: #333333; /* Темно-серый аккуратный ползунок */
        border-radius: 10px;
    }

        /* Ползунок при наведении */
        .input-line-group textarea::-webkit-scrollbar-thumb:hover {
            background-color: #f24413; /* При наведении становится оранжевым в стилистике бренда */
        }

/* --- СТИЛИ СТРАНИЦЫ PRIVACY POLICY (Privacy Policy.svg) --- */

.privacy-policy-section {
    background-color: #ffffff; /* Светлый чистый фон по макету */
    color: #111111;
    font-family: 'Montserrat', sans-serif;
    padding: 100px 0;
}

.privacy-container {
    max-width: 900px; /* Ограниченная ширина контента для комфортного чтения */
    margin: 0 auto;
}

/* Заголовок страницы */
.privacy-main-title {
    font-size: 48px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

/* Даты */
.privacy-dates {
    margin-bottom: 40px;
}

    .privacy-dates p {
        font-size: 13px;
        color: #666666;
        margin: 4px 0;
    }

/* Линия-разделитель */
.privacy-divider {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 40px 0;
}

/* Общие стили текста */
.privacy-body-content p {
    font-size: 14px;
    line-height: 1.7;
    color: #222222;
    margin-bottom: 20px;
}

.privacy-body-content a {
    color: #f24413; /* Фирменный оранжевый акцент на ссылках */
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

    .privacy-body-content a:hover {
        color: #d6360b;
        text-decoration: underline;
    }

/* Стили подсекций / блоков заголовков */
.privacy-section-item {
    margin-bottom: 45px;
}

    .privacy-section-item h2 {
        font-size: 18px;
        font-weight: 700;
        color: #000000;
        margin-top: 30px;
        margin-bottom: 20px;
        letter-spacing: -0.2px;
    }

    .privacy-section-item h3 {
        font-size: 15px;
        font-weight: 700;
        color: #111111;
        margin-top: 25px;
        margin-bottom: 15px;
    }

    /* Списки */
    .privacy-section-item ul {
        padding-left: 20px;
        margin-bottom: 25px;
    }

        .privacy-section-item ul li {
            font-size: 14px;
            line-height: 1.7;
            color: #222222;
            margin-bottom: 8px;
            list-style-type: square; /* Классический квадратный или круглый маркер */
        }

            .privacy-section-item ul li strong {
                color: #000000;
            }

/* Адаптивность для мобильных экранов */
@media (max-width: 768px) {
    .privacy-policy-section {
        padding: 60px 0;
    }

    .privacy-main-title {
        font-size: 32px;
    }

    .privacy-body-content p,
    .privacy-section-item ul li {
        font-size: 13.5px;
        line-height: 1.6;
    }
}

/* --- СТИЛИ ДЛЯ ЮРИДИЧЕСКИХ СТРАНИЦ (Return and Payment Policy) --- */

.legal-policy-section {
    background-color: #ffffff; /* Светлый фон из макета */
    color: #111111;
    font-family: 'Montserrat', sans-serif;
    padding: 100px 0;
}

.legal-container {
    max-width: 900px;
    margin: 0 auto;
}

/* Заголовок страницы */
.legal-main-title {
    font-size: 48px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

/* Даты */
.legal-dates {
    margin-bottom: 40px;
}

    .legal-dates p {
        font-size: 13px;
        color: #666666;
        margin: 4px 0;
    }

/* Разделитель */
.legal-divider {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 40px 0;
}

/* Контент */
.legal-body-content p {
    font-size: 14px;
    line-height: 1.7;
    color: #222222;
    margin-bottom: 20px;
}

.legal-body-content a {
    color: #f24413;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

    .legal-body-content a:hover {
        color: #d6360b;
        text-decoration: underline;
    }

/* Блоки разделов */
.legal-section-item {
    margin-bottom: 45px;
}

    .legal-section-item h2 {
        font-size: 18px;
        font-weight: 700;
        color: #000000;
        margin-top: 30px;
        margin-bottom: 20px;
        letter-spacing: -0.2px;
    }

    /* Списки условий */
    .legal-section-item ul {
        padding-left: 20px;
        margin-bottom: 25px;
    }

        .legal-section-item ul li {
            font-size: 14px;
            line-height: 1.7;
            color: #222222;
            margin-bottom: 8px;
            list-style-type: square;
        }

/* Адаптивный дизайн */
@media (max-width: 768px) {
    .legal-policy-section {
        padding: 60px 0;
    }

    .legal-main-title {
        font-size: 32px;
    }

    .legal-body-content p,
    .legal-section-item ul li {
        font-size: 13.5px;
        line-height: 1.6;
    }
}

/* Контейнер для всплывающих уведомлений */
.toast-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 380px;
    width: 100%;
}

/* Базовые стили плашки */
.toast-notification {
    background-color: #ffffff;
    color: #111111;
    padding: 16px 20px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    border-left: 4px solid #333;
    animation: toastSlideIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    position: relative;
}

/* Цветовые схемы под тип уведомления */
.toast-success {
    border-left-color: #28a745; /* Зеленый */
}

.toast-danger {
    border-left-color: #dc3545; /* Красный */
}

/* Иконки */
.toast-icon {
    font-size: 18px;
    font-weight: bold;
}

.toast-success .toast-icon {
    color: #28a745;
}

.toast-danger .toast-icon {
    color: #dc3545;
}

/* Текст сообщения */
.toast-message {
    flex-grow: 1;
    line-height: 1.4;
    font-weight: 500;
}

/* Кнопка закрытия (крестик) */
.toast-close-btn {
    background: none;
    border: none;
    color: #999999;
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s ease;
}

    .toast-close-btn:hover {
        color: #333333;
    }

/* Анимация появления справа налево */
@keyframes toastSlideIn {
    from {
        transform: translateX(120%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Класс для плавного исчезновения через JS */
.toast-fade-out {
    animation: toastFadeByTime 0.5s ease forwards;
}

@keyframes toastFadeByTime {
    to {
        transform: translateY(20px);
        opacity: 0;
    }
}