/* ========== СТИЛИ КВИЗА ========== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background: linear-gradient(135deg, #f0f9ff 0%, #e0e7ff 100%);
            min-height: 100vh;
            padding: 2rem 1rem;
            font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
        }
        
        .quiz-container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 48px;
            overflow: hidden;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            animation: fadeInUp 0.6s ease-out;
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .quiz-header {
            background: linear-gradient(135deg, rgb(59, 130, 246), rgb(139, 92, 246));
            color: white;
            padding: 2rem 2rem;
            text-align: center;
        }
        
        .quiz-header h2 {
            font-size: 1.8rem;
        }
        
        .quiz-progress {
            padding: 0.75rem 2rem;
            background: #f8fafc;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .progress-steps {
            display: flex;
            gap: 8px;
            flex: 1;
        }
        
        .progress-step {
            flex: 1;
            height: 6px;
            background: #cbd5e1;
            border-radius: 10px;
            transition: all 0.3s;
        }
        
        .progress-step.active {
            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
        }
        
        .progress-step.completed {
            background: #3b82f6;
        }
        
        .quiz-counter {
            font-size: 0.85rem;
            color: #475569;
            font-weight: 600;
            background: #e2e8f0;
            padding: 4px 12px;
            border-radius: 40px;
        }
        
        .quiz-body {
            padding: 2rem;
            min-height: 450px;
        }
        
        .quiz-swiper {
            width: 100%;
            overflow: hidden;
        }
        
        .quiz-slide {
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        .quiz-slide.swiper-slide-active {
            opacity: 1;
        }
        
        .quiz-question {
            font-size: 1.5rem;
            font-weight: 800;
            text-align: center;
            margin-top: 1.8rem;
            margin-bottom: 1.8rem;
            color: #0f172a;
            line-height: 1.3;
        }
        
        .quiz-options {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 2rem;
        }
        
        .quiz-option {
            background: #f8fafc;
            border: 2px solid #e2e8f0;
            border-radius: 60px;
            padding: 14px 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 600;
            color: #1e293b;
        }
        
        .quiz-option:hover {
            transform: translateX(8px);
            border-color: #3b82f6;
            background: #eff6ff;
        }
        
        .quiz-option.selected {
            background: linear-gradient(105deg, #3b82f6, #8b5cf6);
            border-color: transparent;
            color: white;
            transform: translateX(8px);
            box-shadow: 0 10px 20px -5px rgba(59,130,246,0.4);
        }
        
        .option-label {
            font-weight: 700;
            margin-bottom: 2px;
        }
        
        .option-desc {
            font-size: 0.7rem;
            opacity: 0.7;
        }
        
        .quiz-option.selected .option-desc {
            opacity: 0.9;
        }
        
        .quiz-nav {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            margin-top: 1rem;
        }
        
        .quiz-nav-btn {
            padding: 12px 24px;
            border-radius: 60px;
            font-weight: 600;
            cursor: pointer;
            transition: 0.2s;
            border: none;
            font-family: inherit;
            font-size: 1rem;
        }
        
        .quiz-nav-prev {
            background: #f1f5f9;
            color: #475569;
        }
        
        .quiz-nav-prev:hover {
            background: #e2e8f0;
            transform: translateX(-3px);
        }
        
        .quiz-nav-next {
            background: linear-gradient(105deg, #3b82f6, #8b5cf6);
            color: white;
            flex: 1;
            justify-content: center;
        }
        
        .quiz-nav-next:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(59,130,246,0.4);
        }
        
        .quiz-results {
            text-align: center;
        }
        
        .quiz-results h3 {
            font-size: 1.8rem;
            margin-bottom: 0.5rem;
            color: #0f172a;
        }
        
        .result-badge {
            display: inline-block;
            background: linear-gradient(135deg, #3b82f6, #8b5cf6);
            color: white;
            padding: 0.3rem 1.2rem;
            border-radius: 60px;
            font-size: 0.85rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
        }
        
        .result-product {
            background: #f8fafc;
            border-radius: 28px;
            padding: 1.8rem;
            margin: 1.5rem 0;
            text-align: left;
            border: 1px solid #e2e8f0;
            transition: all 0.3s;
        }
        
        .result-product:hover {
            box-shadow: 0 10px 30px -10px rgba(0,0,0,0.1);
        }
        
        .result-product h4 {
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
            color: #0f172a;
        }
        
        .result-features {
            margin: 1rem 0;
            padding-left: 0;
            list-style: none;
        }
        
        .result-features li {
            margin: 0.6rem 0;
            color: #475569;
        }
        
        .quiz-lead-form {
            background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
            border-radius: 24px;
            padding: 1.5rem;
            margin-top: 1.5rem;
        }
        
        .quiz-lead-form p {
            font-weight: 700;
            margin-bottom: 1rem;
            color: #0f172a;
        }
        
        .quiz-lead-form input,
        .quiz-lead-form textarea {
            width: 100%;
            padding: 14px 18px;
            margin-bottom: 12px;
            border: 1px solid #cbd5e1;
            border-radius: 60px;
            font-family: inherit;
            font-size: 0.95rem;
            transition: 0.2s;
        }
        
        .quiz-lead-form input:focus,
        .quiz-lead-form textarea:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
        }
        
        .quiz-lead-form textarea {
            border-radius: 24px;
            resize: vertical;
        }
        
        .quiz-submit {
            background: linear-gradient(105deg, #0f172a, #1e293b);
            width: 100%;
            padding: 14px;
            border-radius: 60px;
            font-weight: 700;
            color: white;
            border: none;
            cursor: pointer;
            transition: 0.2s;
            font-size: 1rem;
        }
        
        .quiz-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.2);
        }
        
        .quiz-restart {
            background: transparent;
            border: 2px solid #3b82f6;
            color: #3b82f6;
            padding: 10px 20px;
            border-radius: 60px;
            cursor: pointer;
            margin-top: 1rem;
            font-weight: 600;
            transition: 0.2s;
            width: 100%;
        }
        
        .quiz-restart:hover {
            background: #3b82f6;
            color: white;
        }
        
        @media (max-width: 550px) {
            body {
                padding: 1rem;
            }
            .quiz-body {
                padding: 1.25rem;
            }
            .quiz-question {
                font-size: 1.2rem;
            }
            .quiz-option {
                padding: 10px 14px;
            }
            .option-label {
                font-size: 0.9rem;
            }
            .result-product h4 {
                font-size: 1.2rem;
            }
            .quiz-header h2 {
                font-size: 1.3rem;
            }
        }

/* ===== КНОПКИ С АНИМАЦИЕЙ ПЕРЕЛИВАНИЯ ===== */
.buttons-container {
    display: flex;                         /* Flexbox для кнопок в ряд */
    gap: 12px;                             /* Расстояние между кнопками */
    margin-top: 10px;                      /* Отступ сверху */
    flex-wrap: wrap;                       /* Перенос на новую строку при необходимости */
}

.call-btn, .maxi-btn {
    flex: 1;                               /* Равномерное распределение пространства */
    padding: 14px 12px;                    /* Внутренние отступы */
    border-radius: 40px;                   /* Сильное скругление углов */
    text-align: center;                    /* Центрирование текста */
    color: #ffffff;                        /* Белый цвет текста */
    text-decoration: none;                 /* Убираем подчеркивание ссылок */
    font-weight: 700;                     /* Жирное начертание */
    font-size: 15px;                       /* Размер шрифта */
    position: relative;                    /* Относительное позиционирование */
    overflow: hidden;                      /* Обрезаем выступающее содержимое */
    cursor: pointer;                       /* Курсор-указатель */
    border: none;                          /* Без рамки */
    transition: all 0.3s ease;             /* Плавные переходы */
    background-size: 200% 200%;            /* Размер фона для анимации */
    z-index: 1;                            /* Слой */
}

/* Постоянное переливание для call-btn */
.call-btn {
    
    background: #003d76;                   /* Темно-синий фон */
    background-size: 300% 300%;            /* Размер для анимации */
    animation: gradientFlow 3s ease infinite reverse, softPulse 2.5s ease-in-out infinite; /* Две анимации одновременно */
}

/* Постоянное переливание для maxi-btn */
.maxi-btn {
background: #003d76;                       /* Темно-синий фон */
background-size: 300% 300%;                /* Размер для анимации */
animation: gradientFlow 3s ease infinite reverse, softPulse 2.5s ease-in-out infinite; /* Две анимации одновременно */
}

/* Анимация градиента */
@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;       /* Начало: градиент слева */
    }
    50% {
        background-position: 100% 50%;     /* Середина: градиент справа */
    }
    100% {
        background-position: 0% 50%;       /* Конец: возврат в начало */
    }
}

/* Пульсация тени */
@keyframes softPulse {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Начальная тень */
    }
    50% {
        box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 255, 255, 0.3); /* Усиленная тень */
    }
}

/* Эффект блика */
.call-btn::before, .maxi-btn::before {
    content: '';                           /* Пустое содержимое */
    position: absolute;                    /* Абсолютное позиционирование */
    top: -50%;                             /* Выход за верхнюю границу */
    left: -100%;                           /* Выход за левую границу */
    width: 200%;                           /* Двойная ширина кнопки */
    height: 200%;                          /* Двойная высота кнопки */
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,         /* Прозрачный слева */
        rgba(255, 255, 255, 0.4) 50%,      /* Полупрозрачный белый в центре */
        rgba(255, 255, 255, 0) 100%        /* Прозрачный справа */
    );
    transform: rotate(25deg);              /* Наклон для эффекта */
    animation: shineMove 4s ease-in-out infinite; /* Бесконечная анимация */
    pointer-events: none;                  /* Запрет взаимодействия */
    z-index: 2;                            /* Слой поверх кнопки */
    border-radius: 40px;                   /* Скругление углов */
}

@keyframes shineMove {
    0% {
        left: -100%;                       /* Начало: блик слева за пределами кнопки */
    }
    50% {
        left: 100%;                        /* Середина: блик справа за пределами кнопки */
    }
    100% {
        left: -100%;                       /* Конец: возврат */
    }
}

/* Эффект при наведении */
.call-btn:hover, .maxi-btn:hover {
    transform: translateY(-3px);           /* Подъем при наведении */
    animation: gradientFlow 1s ease infinite, softPulse 0.8s ease-in-out infinite; /* Ускоренные анимации */
}

.call-btn:active, .maxi-btn:active {
    transform: translateY(1px);            /* Опускание при клике */
    transition: transform 0.1s ease;       /* Быстрая анимация */
}

.pagination {
    display: flex;                         /* Flexbox для центрирования точек */
    justify-content: center;               /* Центрирование по горизонтали */
    margin-top: 15px;                      /* Отступ сверху */
    gap: 8px;                              /* Расстояние между точками */
}