:root {
        --blue: #2D0AF0;
        --red: #FF144D;
        --primary-blue: #003366;
        --secondary-blue: #0056b3;
        --accent-blue: #007bff;
        --dark-blue: #002244;
        --light-gray: #f8f9fa;
        --medium-gray: #F8F8F8;
        --text-dark: #333333;
        --white: #ffffff;
        --red-accent: #FF144D;
        --purple-block: #2D0AF0;
        --black: #000;
        --dark: #151416;
        --c-text-main: #151416;
        --c-accent: #E40046;
        --c-blue: #4061A6;
        --c-white: #FFFFFF;
        --font-main: 'Stolzl Book', 'Stolzl', sans-serif;
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* --- ПОДКЛЮЧЕНИЕ ШРИФТОВ STOLZL --- */

    /* 1. Light (300) */
    @font-face {
        font-family: 'Stolzl';
        src: url('fonts/Stolzl-Light.woff2') format('woff2');
        font-weight: 300;
        font-style: normal;
        font-display: swap;
    }

    /* 2. Book (350) - Часто используется как чуть более тонкий основной текст */
    @font-face {
        font-family: 'Stolzl';
        src: url('fonts/Stolzl-Book.woff2') format('woff2');
        font-weight: 350;
        font-style: normal;
        font-display: swap;
    }

    /* 3. Regular (400) - Основной текст */
    @font-face {
        font-family: 'Stolzl';
        src: url('fonts/Stolzl-Regular.woff2') format('woff2');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    /* 4. Medium (500) - Подзаголовки */
    @font-face {
        font-family: 'Stolzl';
        src: url('fonts/Stolzl-Medium.woff2') format('woff2');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
    }

    /* 5. Bold (700) - Жирные заголовки и кнопки */
    @font-face {
        font-family: 'Stolzl';
        src: url('fonts/Stolzl-Bold.woff2') format('woff2');
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }

    /* 6. ExtraBold (800) - Трюк для совместимости с прошлым CSS */
    /* Так как у вас нет файла ExtraBold, мы направим вес 800 на файл Bold */
    @font-face {
        font-family: 'Stolzl';
        src: url('fonts/Stolzl-Bold.woff2') format('woff2');
        font-weight: 800;
        font-style: normal;
        font-display: swap;
    }


    html, body {
        font-family: 'Stolzl', Arial, sans-serif;
        -webkit-font-smoothing: antialiased; /* Улучшает рендеринг на Mac/iOS */
        -moz-osx-font-smoothing: grayscale;
    }

    /* Наследуем шрифт для элементов форм, так как браузеры часто сбрасывают его */
    button, input, textarea, select {
        font-family: inherit;
    }



    body {
        line-height: 1.6;
        color: var(--c-text-main);
        background-color: var(--white);
        font-weight: 350;
    }


    /* Контейнер по ТЗ */
    .container {
        max-width: 1200px;
        padding: 0 20px; /* Слева справа 20px */
        margin: 0 auto;
        width: 100%;
        box-sizing: border-box;
    }


    section {
        padding: 80px 0;
    }

    /* --- ОСНОВНЫЕ СТИЛИ ХЕДЕРА --- */
    .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100px;
        /*padding: 20px 0;*/
        background-color: var(--c-white);
        /*box-shadow: 0 4px 15px rgba(0,0,0,0.05);*/
        /*transition: background-color 0.3s ease, box-shadow 0.3s ease;*/
		border-bottom:1px solid #E9E9E9;
		transition: background-color 0.3s ease, border-bottom 1px ease;

        z-index: 2500;
    }

	.header .container {
		height: 100%;
	}


    /*
       Состояние "Прозрачное/Инвертированное" применяется ТОЛЬКО если:
       1. У хедера есть класс .header--inverted
       2. НЕТ класса .is-scrolled (мы на самом верху)
       3. НЕТ наведения мыши (:hover)
    */
    .header.header--inverted:not(.is-scrolled) {
        background-color: transparent; /* Прозрачный фон */
        box-shadow: none;              /* Убираем тень */
		border-bottom: none;
    }

    .header.header--inverted:not(.is-scrolled) .root-item {
        color: var(--c-white);
    }


    /* Белый логотип (фильтром) */
    .header.header--inverted:not(.is-scrolled) .logo-img {
        filter: brightness(0) invert(1);
    }


    .nav {
        display: flex;
        align-items: center;
    }


    /* Стили для логотипа */
    .logo {
        margin-right: auto; /* Толкает меню и ЛК вправо */
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    .logo-img {
        width: 211px;
        height: 60px;
        object-fit: contain;
        display: block;
        transition: filter 0.3s ease;
    }

    /* Стили для личного кабинета */
    .personal-cabinet {
        margin-left: 16px; /* ТЗ: Отступ от бургера */
        flex-shrink: 0;
        z-index: 1002;
        position: relative;
    }

    .cabinet-link {
        display: block;
        text-decoration: none;
        transition: transform 0.3s ease;
    }

    .cabinet-link:hover {
        transform: translateY(-2px);
    }

    .cabinet-circle {
        width: 32px;
        height: 32px;
        background-color: var(--c-blue);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: transform 0.3s ease;
    }

    .cabinet-link:hover .cabinet-circle {
        transform: scale(1.05);
    }

    .user-icon {
        transition: transform 0.3s ease;
    }


.section-content {
    padding: 0 32px;
}

    /* --- АДАПТИВНОСТЬ --- */

    /* При ширине < 1200px: Скрываем меню, оставляем бургер, лого и ЛК */
    @media (max-width: 1199px) {
        .main-menu {
            display: none;
        }

        .mobile-menu-container {
            margin-left: 0; /* Бургер прижимается, т.к. меню исчезло */
        }
    }

    /* Для совсем маленьких экранов уменьшаем лого, чтобы все влезло */
    @media (max-width: 480px) {
        .logo-img {
            width: 150px;
            height: auto;
        }
        .cabinet-circle {
            width: 36px;
            height: 36px;
        }
        /* Между бургером и ЛК */
        .personal-cabinet {
            margin-left: 10px;
        }
    }


    /* Остальные стили (преимущества, калькулятор, техника, новости, футер) остаются без изменений */
    /* Кнопки */
    .btn {
        display: inline-block;
        padding: 15px 35px;
        background: var(--accent-blue);
        color: var(--white);
        text-decoration: none;
        border-radius: 8px;
        font-weight: 600;
        font-size: 16px;
        transition: all 0.3s ease;
        border: 2px solid var(--accent-blue);
        text-align: center;
    }

    .btn:hover {
        background: transparent;
        color: var(--accent-blue);
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

    .btn-outline {
        background: transparent;
        border: 2px solid var(--white);
        color: var(--white);
    }

    .btn-outline:hover {
        background: var(--white);
        color: var(--primary-blue);
    }

    /* Сетки - адаптивные */
    .grid {
        display: grid;
        gap: 40px;
    }

    /* 1920px - 4 колонки */
    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 1280px - планшетный вид */
    @media (max-width: 1280px) {
        .grid-4 {
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
        }
        
        .grid-3 {
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
        }
        
        .grid-2 {
            grid-template-columns: 1fr;
            gap: 30px;
        }

    }

    /* 767px и меньше - мобильный вид */
    @media (max-width: 767px) {
        .grid-4,
        .grid-3,
        .grid-2 {
            grid-template-columns: 1fr;
            gap: 20px;
        }

    }






    /* Анимации */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .fade-in-up {
        animation: fadeInUp 0.6s ease-out;
    }

    @media (max-width: 767px) {

        .btn {
            padding: 12px 25px;
            font-size: 14px;
            width: 100%;
            max-width: 300px;
        }


    }


    /* Основной контейнер секции */
    .nvt-feedback-section {
        position: relative;
        margin: 100px 40px;
        overflow: hidden;
        color: #ffffff;
        background: url('/local/templates/novatek/images/form_bg.png'),  linear-gradient(105deg, #2d4585 0%, #1e8bc2 100%);
        background-size: 100%;
        background-repeat: no-repeat;
        border-radius: 20px;
    }

    /* Декоративный паттерн (точки) слева */
    .nvt-feedback-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;



        background-size: 20px 20px;
        pointer-events: none;
        z-index: 1;
    }

    /* Ограничитель ширины (контейнер) */
    .nvt-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 15px;
        position: relative;
        z-index: 2;

    }

    /* Обертка Flex для колонок */
    .nvt-feedback-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    /* ----- Левая колонка (Форма) ----- */
    .nvt-form-column {
        width: 100%;
        max-width: 500px; /* Ограничиваем ширину формы */
        flex-shrink: 0;
    }

    /* Заголовки */
    .nvt-title {
        font-size: 46px;
        font-weight: 500;
        margin-bottom: 16px;
        line-height: 1.2;
    }

    .nvt-subtitle {
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 40px;
    }

    /* Поля ввода */
    .nvt-form-group {
        margin-bottom: 15px;
    }

    .nvt-form-group label {
        display: block;
        font-size: 16px;
        margin-bottom: 4px;
        color: #fff;
    }

    .nvt-form-group label .required {
        color: #ff4d4d; /* Красная звездочка */
    }

    .nvt-form-group input,
    .nvt-form-group textarea {
        width: 100%;
        background-color: #F8F9FB;
        border: 1px solid transparent;
        border-radius: 6px;
        padding: 12px 15px;
        font-size: 14px;
        color: #333;
        outline: none;
        transition: border-color 0.3s;
        box-sizing: border-box; /* Важно для отступов */
    }

    .nvt-form-group input::placeholder,
    .nvt-form-group textarea::placeholder {
        color: #B0B0B0;
    }

    .nvt-form-group input:focus,
    .nvt-form-group textarea:focus {
        border-color: #2d4585;
    }

    .nvt-form-group textarea {
        height: 100px;
        resize: vertical;
    }

    /* Чекбокс */
    .nvt-checkbox-wrapper {
        display: flex;
        align-items: center;
        margin-bottom: 25px;
        font-size: 13px;
    }

    .nvt-checkbox {
        margin-right: 10px;
        width: 16px;
        height: 16px;
        cursor: pointer;
        accent-color: #2d4585; /* Цвет галочки в современных браузерах */
    }

    .nvt-checkbox-wrapper label {
        cursor: pointer;
        user-select: none;
    }

    /* Кнопка отправки */
    .nvt-submit-btn {
        width: 100%;
        background-color: #3c5685; /* Темно-синий цвет плашки */
        color: #fff;
        border: none;
        border-radius: 25px; /* Скругление кнопки */
        padding: 14px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.3s;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    .nvt-submit-btn:hover {
        background-color: #4a6699;
    }

    /* ----- Правая колонка (Картинка) ----- */
    .nvt-image-column {
        flex-grow: 1;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        position: relative;
        /* Сдвигаем картинку, чтобы она наезжала как на макете */
        margin-left: -50px;
        margin-top: -80px; /* Чтобы заправка уходила вверх */
    }

    .nvt-hero-image {
        max-width: 120%; /* Позволяем картинке быть большой */
        height: auto;
        object-fit: contain;
        /* Если картинка обрезана снизу, можно добавить: */
        /* margin-bottom: -60px; */
    }

    /* ----- Адаптивность (Mobile) ----- */
    @media (max-width: 991px) {
        .nvt-feedback-wrapper {
            flex-direction: column;
        }

        .nvt-form-column {
            max-width: 100%;
            margin-bottom: 40px;
        }

        .nvt-image-column {
            width: 100%;
            margin: 0;
            justify-content: center;
        }

        .nvt-hero-image {
            max-width: 100%;
        }

        .nvt-title {
            font-size: 28px;
        }
    }

    textarea {
        resize: none !important;
    }