:root {
    --accent-color: #e07a8c;
    --ozon-blue: #005bff;
    --ozon-pink: #f91155;
    --white: #ffffff;
    
    /* Новые цвета для Дзен-стиля */
    --zen-bg: #f9f8f6; /* Очень мягкий, теплый светло-серый */
    --zen-sage: #e3ebe3; /* Приглушенный цвет шалфея */
    --zen-text-dark: #2c3e2c; /* Темно-зеленый для акцентов */
}

body {
    font-family: 'Montserrat', sans-serif;
    color: #333;
}


/* =========================================
   СЕКЦИЯ HERO (Главный экран)
   ========================================= */

.hero {
    position: relative;
    min-height: 100vh; /* Это критически важно! */
    display: flex; /* Добавляем flexbox, чтобы align-items-center работал для дочерних элементов */
    align-items: center; /* Центрируем содержимое по вертикали */
    
    background-image: url('../assets/images/hero-bg-desktop.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden; /* Скрываем возможное переполнение контента, если что-то вылезет за границы */
}

.hero__overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%);
    z-index: 1;
}


/* =========================================
   СТИЛИ ДЛЯ ЗАГОЛОВКА H1
   ========================================= */
.hero__title {
    color: var(--white); /* Делаем заголовок белым */
    font-size: 3.1rem; /* Размер шрифта для больших экранов */
    line-height: 1.1; /* Межстрочный интервал для плотности */
    font-weight: 300; /* Более тонкое начертание, как на примере */
    margin-bottom: 1.5rem !important; /* Устанавливаем отступ снизу, переопределяя mb-4 из Bootstrap */
}

/* Стили для жирной части заголовка */
.hero__title .fw-bold {
    font-weight: 600 !important; /* Делаем жирнее, переопределяя стандартный Bootstrap */
}

/* Адаптация заголовка для мобильных устройств */
@media (max-width: 767.98px) {
    .hero__title {
        font-size: 2.2rem; /* Уменьшаем размер заголовка на маленьких экранах */
        line-height: 1.2;
        margin-top: 1.5rem;
    }
}

/* =========================================
   СТИЛИ ДЛЯ ПОДЗАГОЛОВКА P
   ========================================= */
.hero__subtitle {
    color: var(--white); /* Подзаголовок также белый */
    font-size: 1.2rem; /* Размер шрифта для больших экранов */
    line-height: 1.5; /* Межстрочный интервал */
    font-weight: 400; /* Нормальное начертание */
    margin-bottom: 3rem !important; /* Увеличиваем отступ снизу, переопределяя mb-5 из Bootstrap */
    max-width: 450px; /* Ограничиваем ширину подзаголовка, чтобы он не был слишком длинным на больших экранах и не прилипал к краю картинки */
}

/* Адаптация подзаголовка для мобильных устройств */
@media (max-width: 767.98px) {
    .hero__subtitle {
        font-size: 1rem; /* Уменьшаем размер подзаголовка на маленьких экранах */
        line-height: 1.4;
        max-width: 90%; /* Ограничиваем ширину на мобильных для лучшей читаемости */
    }
}

/* =========================================
   СТИЛИ ДЛЯ БЛОКА ХАРАКТЕРИСТИК (hero__features)
   ========================================= */
.hero__features {
    margin-top: 4rem !important; /* Увеличиваем отступ сверху, чтобы блок был ниже кнопок */
    font-size: 0.95rem; /* Размер шрифта для текста характеристик */
    font-weight: 400; /* Нормальное начертание */
    color: var(--white); /* Цвет текста белый */
    position: relative; /* Нужно для правильного позиционирования разделителей */
    
    /* Убедимся, что flex-wrap и gap-4 работают */
    display: flex; 
    flex-wrap: wrap; 
    gap: 2rem; /* Увеличиваем стандартный gap-4 до 2rem для лучшего расстояния */
}

.feature-item {
    position: relative; /* Нужно для позиционирования псевдоэлемента-разделителя */
    padding-left: 1.5rem; /* Отступ слева для разделителя */
}

/* Вертикальный разделитель между элементами */
.feature-item:not(:first-child)::before {
    content: ''; /* Обязателен для псевдоэлементов */
    position: absolute;
    left: 0; /* Размещаем разделитель в начале padding-left */
    top: 50%; /* Центрируем по вертикали */
    transform: translateY(-50%); /* Точная вертикальная центровка */
    width: 3px; /* Толщина разделителя */
    height: 80%; /* Высота разделителя */
    background-color: var(--accent-color); /* Полупрозрачный белый цвет */
}

/* =========================================
   АДАПТАЦИЯ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ (hero__features)
   ========================================= */
@media (max-width: 767.98px) {
    .hero__features {
        flex-direction: column; /* Характеристики в столбик на мобильных */
        gap: 1rem !important; /* Меньший отступ между пунктами */
        margin-top: 2.5rem !important; /* Меньший отступ сверху */
        font-size: 0.85rem; /* Меньший размер шрифта */
        margin-bottom: 1.5rem;
    }
    
    .feature-item {
        padding-left: 0; /* Убираем отступ, так как разделители будут скрыты */
    }

    .feature-item::before {
        display: none; /* Скрываем вертикальные разделители на мобильных */
    }
}



/* --- БЛОК 2: СРАВНЕНИЕ --- */

.bg-light-zen {
    background-color: var(--zen-bg);
}

.section-title {
    font-weight: 300;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    color: #222;
    letter-spacing: -0.5px;
}

.section-subtitle {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* Карточки */
.comparison-card {
    background: var(--white);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.problem-card {
    background-color: transparent;
    border: 1px dashed #ccc;
}

/* Делаем фото старого коврика немного бесцветным, чтобы подчеркнуть, что это "прошлое" */
.problem-card .grayscale-img {
    filter: grayscale(70%) opacity(85%);
}

/* Карточка нашего коврика слегка увеличена для акцента на Desktop */
.solution-card {
    position: relative;
    z-index: 2;
    transform: scale(1.03); 
}

.bg-accent {
    background-color: var(--accent-color);
    color: var(--white);
}

/* Списки внутри карточек */
.comparison-list li {
    font-size: 0.9rem;
    margin-bottom: 0.8rem;
}

.comparison-list i {
    font-size: 1.2rem;
    margin-right: 0.7rem;
}


.zen-success {
    color: #558b6e !important; /* Приглушенный зеленый (шалфей) вместо кислотного */
}

/* Акцентный бокс внизу */
.accent-box {
    background-color: var(--zen-sage);
    color: var(--zen-text-dark);
    border: 1px solid rgba(255,255,255, 0.6);
}

/* Кастомное соотношение сторон 5:7 для вертикальных фото инфографики маркетплейсов */
.ratio-5x7 {
    --bs-aspect-ratio: 140%; /* 7 разделить на 5 = 1.4 (или 140%) */
}

/* Адаптив для мобилок */
@media (max-width: 768px) {
    .solution-card {
        transform: scale(1); /* Убираем увеличение на мобильных, чтобы не ломать верстку */
    }
    
    .comparison-list li {
        font-size: 0.95rem;
    }
}

/* --- БЛОК 3: ШОППЕР --- */

.shopper-features li {
    display: flex;
    align-items: center;
    font-size: 1.05rem;
    color: #444;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.shopper-features li:last-child {
    border-bottom: none;
}

/* Декоративный круг под фотографией для объема (японский минимализм) */
.shopper-section {
    overflow: hidden; 
}

/* Обновленный круг: идеальная позиция для вертикальной картинки 1080х1350 */
.bg-shape {
    width: 95%; /* Размер круга чуть меньше ширины колонки */
    aspect-ratio: 1 / 1;
    background-color: var(--zen-sage);
    border-radius: 50%;
    
    /* МАГИЯ ТУТ: Привязываем круг к НИЖНЕМУ ПРАВОМУ углу */
    top: auto;      /* ОБЯЗАТЕЛЬНО отключаем привязку к верху */
    bottom: 5%;     /* Приподнимаем немного от самого низа */
    right: -15%;    /* Красиво выдвигаем вправо из-за картинки */
    
    opacity: 0.8;
    z-index: 0;
}


/* На мобильных телефонах выравниваем текст по левому краю для читаемости */
@media (max-width: 768px) {
    .shopper-features li {
        font-size: 0.95rem;
    }
}

/* Адаптив круга для мобильных экранов */
@media (max-width: 768px) {
    .bg-shape {
        width: 85%;
        bottom: 0%;   /* На телефонах опускаем в самый низ картинки */
        right: -10%;
    }
}

/* --- БЛОК 4: ХАРАКТЕРИСТИКИ --- */

.feature-box {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid transparent;
}

/* Эффект легкого "всплывания" карточек при наведении мышкой */
.feature-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.05) !important;
    border-color: rgba(224, 122, 140, 0.2); /* Легкий розовый контур при наведении */
}

/* --- БЛОК 5: ФИНАЛЬНЫЕ КНОПКИ CTA --- */

.btn-wb {
    background: linear-gradient(90deg, #cb11ab 0%, #481173 100%);
    color: white !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
}

.btn-wb:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(203, 17, 171, 0.3);
}

/* --- Исправленная кнопка Ozon --- */
.btn-ozon {
    background-color: #005bff !important; /* Фирменный синий цвет Ozon напрямую */
    color: #ffffff !important; /* Принудительно белый текст */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
}

.btn-ozon:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 91, 255, 0.3);
    color: #ffffff !important; /* Чтобы текст не менял цвет при наведении */
    background-color: #005bff !important;
}

/* --- БЛОК 5: ОТЗЫВЫ --- */
.review-card {
    border: 1px solid transparent;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Легкое поднятие карточки при наведении */
.review-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(224, 122, 140, 0.15); /* Очень легкий розовый контур */
}

/* Иконка кавычек на фоне */
.bi-quote {
    color: #f0f0f0;
    z-index: 0;
}

/* Золотой цвет для звезд */
.text-warning {
    color: #ffc107 !important;
    letter-spacing: 2px;
}

.text-accent {
    color: var(--accent-color);
}

.final-cta {
    border-top: 1px solid #f0f0f0;
}

/* Стили для Cookie-банера */
.cookie-notice {
    position: fixed;
    bottom: -100px; /* Изначально спрятан */
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px); /* Эффект матового стекла */
    z-index: 9999;
    border-top: 1px solid #eee;
    transition: bottom 0.5s ease-in-out;
}

.cookie-notice.show {
    bottom: 0; /* Плавно выезжает */
}

/* На мобильных устройствах делаем текст чуть меньше */
@media (max-width: 768px) {
    .cookie-notice p {
        font-size: 0.75rem;
        text-align: center;
    }
}