/* --- ШРИФТЫ И ПЕРЕМЕННЫЕ --- */
@font-face {
    font-family: 'TT Ricordi Allegria Trl';
    src: url('./fonts/TT_Ricordi_Allegria_Trial_DemiBold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Подключаем обычный (Regular) для текста логотипа или акцентов */
@font-face {
    font-family: 'TT Ricordi Allegria Trl';
    src: url('./fonts/TT_Ricordi_Allegria_Trial_Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Переменные */
:root {
    --color-white: #ffffff;
    --color-dark: #1a1a1a;
    
    /* Переменная для заголовков и ЛОГОТИПА */
    --font-heading: 'TT Ricordi Allegria Trl', serif; 
    
    /* Переменная для обычного текста (Google Fonts) */
    --font-body: 'Onest', sans-serif;
    
    --slide-duration: 5s;
    --container-padding: 20px;
}

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

body {
    font-family: var(--font-body);
    color: var(--color-white);
    background-color: var(--color-dark);
    overflow-x: hidden;
}

/* ЖЕСТКОЕ СКРЫТИЕ СИСТЕМНОГО КУРСОРА */
/* Применяем ко всем элементам (*), чтобы перебить настройки кнопок */
*, *::before, *::after {
    cursor: none !important;
}

/* ВОЗВРАЩАЕМ КУРСОР НА МОБИЛЬНЫХ (ОБЯЗАТЕЛЬНО) */
@media (hover: none) and (pointer: coarse) {
    *, *::before, *::after {
        cursor: auto !important;
    }
    .cursor {
        display: none !important;
    }
}

html {
    scroll-behavior: smooth;
}



/* --- HEADER --- */
.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 20;
    padding: var(--container-padding);
    background: transparent;
}

.header__container {
    display: flex;
    justify-content: flex-start; /* Все слева */
    align-items: center; /* Центрирование по вертикали */
    gap: 30px; /* Отступ между гамбургером и лого */
    width: 100%;
}

/* Логотип ссылка-обертка */
.header__logo {
    display: flex;
    align-items: center; /* Текст и иконка по центру друг относительно друга */
    gap: 12px; /* Расстояние между зерном и текстом */
    text-decoration: none;
    color: var(--color-white);
}

/* 1. НАСТРОЙКА РАЗМЕРА ЛОГОТИПА */
/* Этот селектор выберет и картинку <img>, и код <svg>, если он вставлен инлайном */
.header__logo svg, 
.header__logo img {
    width: 52px;
    height: 52px;
    display: block; /* Убирает лишние отступы снизу */
    object-fit: contain; /* Чтобы картинка не сплющилась */
}

/* 2. НАСТРОЙКА ТЕКСТА "Aroma" */
.header__logo-text {
    /* Применяем тот же шрифт, что и у заголовков */
    font-family: var(--font-heading); 
    /* Размер шрифта (можно чуть увеличить под большую иконку) */
    font-size: 24px; 
    /* Жирность ставим обычную (400) или жирную (700) - как больше нравится */
    font-weight: 400; 
    text-transform: capitalize; /* Первая буква заглавная */
    letter-spacing: 0.02em;
}

/* Гамбургер */
.header__burger {
    background: none; border: none; cursor: pointer;
    display: flex; flex-direction: column; justify-content: center;
    width: 60px; 
}
.header__burger span {
    display: block; width: 100%; height: 2px; background: #fff; margin-bottom: 8px;
}
.header__burger span:last-child { margin-bottom: 0; }

/* --- HERO SECTION --- */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: flex-end; /* Контент прижат к низу секции */
}

.hero__background {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
}
.hero__video { width: 100%; height: 100%; object-fit: cover; }
.hero__overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.7) 100%);
    z-index: 1;
}

/* Обертка контента */
.hero__content-wrapper {
    position: relative;
    width: 100%;
    /* Большой отступ снизу под контент + навигацию */
    padding: 0 var(--container-padding) 120px var(--container-padding);
    z-index: 5;
    display: grid; 
    grid-template-columns: 1fr;
}

/* Слайд */
.hero__slide {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease, visibility 0.8s;
    
    /* СЕТКА СЛАЙДА */
    display: grid;
    /* Пропорции колонок (примерно 55% и 45%) */
    grid-template-columns: 1.2fr 1fr; 
    gap: 40px;
    
    /* ИСПРАВЛЕНИЕ: Выравнивание по ВЕРХНЕМУ краю (Top Alignment) */
    align-items: start; 
    width: 100%;
}

.hero__slide--active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Левая колонка: Заголовок */
.hero__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 76px; /* По ТЗ */
    line-height: 1; /* Уменьшаем высоту строки, чтобы верх букв был ближе к краю блока */
    color: var(--color-white);
    margin: 0;
    /* Небольшая коррекция, чтобы оптически выровнять с мелким текстом справа */
    margin-top: -8px; 
}

/* Правая колонка: Текст + Кнопка */
.hero__col-right {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.hero__desc {
    font-family: var(--font-body);
    font-size: 22px; /* По ТЗ */
    font-weight: 400;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
    max-width: 100%;
}

/* Кнопка */
.btn-text {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--color-white);
    padding: 14px 28px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    text-decoration: none;
}
.btn-text:hover { background: rgba(255, 255, 255, 0.25); border-color: #fff; }

/* Навигация */
.hero__progress {
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;
    padding: 0 var(--container-padding);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.hero__progress-line {
    flex: 1; height: 3px; background: rgba(255, 255, 255, 0.2);
    cursor: pointer; position: relative; overflow: hidden;
}
.hero__progress-line .fill { width: 0%; height: 100%; background: #fff; display: block; }
.hero__progress-line--active .fill { animation: fillBar var(--slide-duration) linear forwards; }
.hero__progress-line--visited .fill { width: 100%; }

@keyframes fillBar { from { width: 0%; } to { width: 100%; } }

/* АДАПТИВ */
@media (max-width: 1024px) {
    .hero__title { font-size: 56px; margin-top: 0; }
    .hero__desc { font-size: 18px; }
}

@media (max-width: 768px) {
    .hero__slide {
        grid-template-columns: 1fr; /* Одна колонка */
        gap: 20px;
    }
    .hero__title { font-size: 40px; margin-top: 0; }
    .hero__desc { font-size: 16px; max-width: 100%; }
    .hero__content-wrapper { padding-bottom: 90px; }
}

/* --- PRODUCTS SECTION --- */
.products {
    position: relative;
    width: 100%;
    min-height: 100vh;
    /* 1. ОТСТУПЫ 42px */
    padding: 42px 0 0 0; 
    color: var(--color-white);
    background: var(--color-dark);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Прижимаем контент к низу секции */
}

/* Фон секции */
.products__bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;
}
.products__bg-img {
    width: 100%; height: 100%; object-fit: cover;
    object-position: center bottom; 
}
.products__overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

/* Контейнер */
.products__container {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0 var(--container-padding);
    margin: 0 auto;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    /* Добавляем отступ снизу, чтобы пачка не прилипала к самому краю экрана браузера */
    padding-bottom: 0; 
}

/* Заголовок секции */
.products__main-title {
    font-family: var(--font-heading);
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 30px;
    margin-top: 0;
}

/* Табы */
.products__tabs {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}

.products__tab-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: var(--color-white);
    padding: 12px 30px;
    font-family: var(--font-body);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 5px;
}
.products__tab-btn:hover { border-color: #fff; }
.products__tab-btn--active {
    background: #fff;
    color: var(--color-dark);
    border-color: #fff;
}

/* Обертка контента */
.products__content-wrapper {
    position: relative;
    flex-grow: 1;
    display: flex;
    /* Выравниваем обертку так, чтобы пачка стояла внизу */
    align-items: flex-end; 
}

/* Карточка товара */
.product-card {
    display: none;
    width: 100%;
    grid-template-columns: 1fr auto 1fr; /* Center auto под размер картинки */
    gap: 40px;
    
    /* 3. ВЫРАВНИВАНИЕ ТЕКСТА ПО ВЕРХУ ПАЧКИ */
    /* Сама сетка выравнивает элементы по верху (start) */
    align-items: start; 
    
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
}

.product-card--active { display: grid; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- ЛЕВАЯ КОЛОНКА --- */
.product-card__col-left {
    padding-top: 40px;
    
    /* 2. ДЕЛАЕМ КОЛОНКУ ГИБКОЙ */
    display: flex;
    flex-direction: column;
    /* Высота колонки растягивается на высоту соседа (пачки - 790px) */
    height: 100%; 
    /* Минимальная высота, чтобы верстка не сжалась, если пачка не прогрузилась */
    min-height: 790px; 
}

.product-card__title {
    font-family: var(--font-heading);
    font-size: 42px;
    margin-bottom: 10px;
    line-height: 1.1;
}

.product-card__subtitle {
    font-family: var(--font-heading);
    font-size: 26px;
    color: #ffffff;
    margin-bottom: 30px;
    font-style: normal;
}

.product-card__desc {
    font-family: var(--font-body);
    font-weight:100; 
    font-size: 18px; 
    line-height: 1.6;
    margin-bottom: 40px;
}

/* 4. КНОПКА (24px) */
.btn-primary {
    display: block;
    width: 100%;
    background: #fff;
    color: #000;
    border: none;
    border-radius: 5px;
    padding: 12px 0; 
    margin-top: auto; 
    margin-bottom: 42px; 
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: 0.3s;
    font-family: var(--font-body);
    text-decoration: none;
}
.btn-primary:hover { background: #e6e6e6; }

/* --- ЦЕНТР (ПАЧКА) --- */
.product-card__col-center {
    position: relative;
    display: flex;
    justify-content: center;
    align-self: end; 
    margin-bottom: 0;
    padding-bottom: 0;
    z-index: 10;
}

.product-card__img {
    height: 790px;
    width: auto;
    max-width: none;
    object-fit: contain;
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.6));
    display: block;
}

/* --- ПРАВАЯ КОЛОНКА --- */
.product-card__col-right {
    /* Тоже отступ сверху для выравнивания */
    padding-top: 40px; 
}

.product-spec {
    margin-bottom: 30px;
    padding-left: 0;
}

.product-spec h4 {
    font-family: var(--font-heading); 
    font-size: 24px; 
    letter-spacing: 0.05em;
    color: rgb(255, 255, 255);
    margin-bottom: 8px;
    font-weight: 400; 
}

.product-spec p {
    font-family: var(--font-body);
    font-weight: 100; 
    font-size: 18px; 
    line-height: 1.5;
    margin-bottom: 5px;
}
.product-spec strong { font-weight: 600; color: #fff; }

/* АДАПТИВ (Подгоняем под высоту 790px, чтобы не ломалось на ноутбуках) */
@media (max-width: 1440px) {
     /* --- 1. СТРУКТУРА (Резиновая пачка и сетка) --- */
     .product-card {
        grid-template-columns: 1fr 1.8fr 1fr; /* Центральная колонка резиновая */
        align-items: stretch; 
        gap: 20px;
    }

    .product-card__col-center {
        align-self: end;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        height: 100%;
        min-width: 0; 
    }

    .product-card__img {
        width: 100%; 
        height: auto; 
        max-height: 85vh; 
        object-fit: contain;
    }

    .product-card__col-left, 
    .product-card__col-right {
        padding-top: 20px; 
    }
    
    .product-card__col-right {
        align-self: start;
    }


    /* --- 2. ШРИФТЫ (Уменьшение на 4px) --- */
    
    /* Заголовок секции: 48px -> 44px */
    .products__main-title {
        font-size: 44px;
        margin-bottom: 20px;
    }

    /* Табы: 18px -> 14px */
    .products__tab-btn {
        font-size: 14px;
        padding: 10px 20px; /* Чуть уменьшил отступы кнопки */
    }

    /* Название кофе: 42px -> 38px */
    .product-card__title { 
        font-size: 38px; 
    }

    /* Подзаголовок: 22px -> 18px */
    .product-card__subtitle { 
        font-size: 18px; 
        margin-bottom: 20px;
    }

    /* Описание слева: 18px -> 14px */
    .product-card__desc {
        font-size: 14px;
        margin-bottom: 30px;
    }

    /* Заголовки справа (Профиль вкуса и т.д.): 22px -> 18px */
    .product-spec h4 {
        font-size: 18px;
    }

    /* Текст характеристик справа: 18px -> 14px */
    .product-spec p {
        font-size: 14px;
    }

    /* Кнопка: 24px -> 20px */
    .btn-primary {
        font-size: 20px; 
        padding: 15px 0; 
        margin-bottom: 42px; /* Отступ от низа сохраняем */
    }
}

@media (max-width: 1024px) {
     /* 1. УБИРАЕМ ЛИШНЮЮ ВЫСОТУ СЕКЦИИ */
     .products {
        min-height: auto; /* Секция больше не пытается занять весь экран */
        height: auto;
        padding-bottom: 60px; /* Возвращаем небольшой отступ снизу для воздуха */
    }

    /* 2. СЕТКА: ВЫРАВНИВАНИЕ ПО ВЕРХУ */
    .product-card {
        /* Grid-сетка выравнивает все колонки по верху */
        align-items: start; 
        /* Можно немного перераспределить ширину: картинке меньше места */
        grid-template-columns: 1fr 1fr 1fr; 
    }

    /* 3. ЛЕВАЯ КОЛОНКА: СБРОС ВЫСОТЫ */
    .product-card__col-left {
        display: block; /* Убираем flex, чтобы кнопка вела себя обычно */
        height: auto;
        min-height: 0; /* Убираем фиксацию 790px */
        padding-top: 0; /* Убираем лишний отступ сверху */
    }

    /* 4. КНОПКА: ПРИЖИМАЕМ К ТЕКСТУ */
    .btn-primary {
        /* Кнопка теперь идет сразу за текстом с фиксированным отступом */
        margin-top: 30px; 
        margin-bottom: 0; /* Убираем отступ 42px от низа, он тут не нужен */
        font-size: 18px;
    }

    /* 5. ПАЧКА КОФЕ: ПРИЖАТА К ВЕРХУ */
    .product-card__col-center {
        /* Отменяем прижатие к низу */
        align-self: start; 
        display: block;
        margin: 0;
        padding: 0;
    }

    .product-card__img {
        /* Делаем пачку компактнее на этом разрешении */
        max-height: 400px; 
        width: 100%;
        margin: 0 auto; /* Центрируем, если она меньше колонки */
    }
    
    /* 6. ПРАВАЯ КОЛОНКА */
    .product-card__col-right {
        padding-top: 0; /* Тоже убираем верхний отступ */
    }

    /* Уменьшаем отступы в текстах для компактности */
    .product-card__desc { margin-bottom: 20px; }
    .product-card__subtitle { margin-bottom: 15px; }
    .products__main-title { margin-bottom: 30px; }
}

@media (max-width: 950px) {
    
    /* 1. СЕКЦИЯ */
    .products {
        height: auto;
        min-height: auto;
        padding-bottom: 100px; /* Место под кнопку */
        overflow: visible;
    }

    /* 2. БАЗОВОЕ СОСТОЯНИЕ КАРТОЧКИ (Скрыто) */
    .product-card {
        display: none; /* !ВАЖНО: По умолчанию скрываем все */
    }

    /* 3. АКТИВНАЯ КАРТОЧКА (Показана + Flex колонка) */
    .product-card--active {
        display: flex;       /* Показываем только активную */
        flex-direction: column;
        position: relative;
        padding-bottom: 80px; 
        gap: 30px;
        
        /* Анимация появления */
        animation: fadeIn 0.5s ease forwards;
    }

    /* 4. ПОРЯДОК БЛОКОВ */
    .product-card__col-left {
        order: 1;
        display: block;
        padding: 0;
        height: auto;
    }

    .product-card__col-center {
        order: 2;
        align-self: center;
        margin: 0;
        display: block;
    }
    
    .product-card__col-right {
        order: 3;
        padding: 0;
    }

    /* 5. КНОПКА */
    .btn-primary {
        display: block; 
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
    }
    
    /* Убираем псевдо-кнопку, если она была */
    .product-card__col-right::after { content: none; }

    /* Картинка */
    .product-card__img {
        max-height: 350px;
        width: auto;
        margin: 0 auto;
    }
    
    /* Шрифты для мобилки */
    .products__main-title { font-size: 32px; }
    .product-card__title { font-size: 32px; }
    .products__tabs { flex-wrap: wrap; }
    .products__tab-btn { flex: 1; text-align: center; }
}

/* --- FEATURES SECTION --- */
.features {
    position: relative;
    width: 100%;
    padding: 42px 0;
    /* 1. БЕЛЫЙ ФОН */
    background-color: #ffffff; 
    /* Цвет текста заголовков меняем на темный */
    color: var(--color-dark); 
}

.features__container {
    max-width: 100%;
    padding: 0 var(--container-padding);
    margin: 0 auto;
}

/* Заголовок блока */
.features__header {
    margin-bottom: 50px;
    max-width: 800px;
}

.features__title {
    font-family: var(--font-heading);
    font-size: 48px;
    margin-bottom: 20px;
    line-height: 1.1;
    /* Явно задаем темный цвет */
    color: var(--color-dark); 
}

.features__subtitle {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 20px;
    line-height: 1.5;
    /* Темно-серый цвет для подзаголовка */
    color: #4a4a4a; 
}

/* СЕТКА */
.features__grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 30px;
}

/* КАРТОЧКА */
.feature-card {
    position: relative;
    width: 100%;
    min-height: 500px;
    border-radius: 12px;
    overflow: hidden;
    padding: 40px;
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    
    cursor: default;
    
    /* Текст внутри карточки должен оставаться белым, так как там темный фон */
    color: #ffffff; 
}

/* Фоновые слои */
.feature-card__bg,
.feature-card__bg-hover {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    transition: opacity 0.6s ease;
    z-index: 0;
}
.feature-card__bg { opacity: 1; }
.feature-card__bg-hover { opacity: 0; }

/* Затемнение (Градиент) */
.feature-card__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.4) 50%, rgba(0,0,0,0) 100%);
    z-index: 1;
    pointer-events: none;
}

.feature-card:hover .feature-card__bg { opacity: 0; }
.feature-card:hover .feature-card__bg-hover { opacity: 1; }

/* Контент карточки */
.feature-card__content {
    position: relative;
    z-index: 2;
    
    /* 3. ОГРАНИЧЕНИЕ ШИРИНЫ ТЕКСТА */
    /* Текст занимает 55% ширины карточки, оставляя место справа для картинки */
    max-width: 55%; 
}

.feature-card__title {
    font-family: var(--font-heading);
    font-size: 32px;
    margin-bottom: 20px;
    line-height: 1.2;
    color: #ffffff; /* Принудительно белый */
}

.feature-card__desc {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
}


/* АДАПТИВ */
@media (max-width: 1024px) {
    .features__title { font-size: 36px; }
    .features__subtitle { font-size: 18px; }
    
    .feature-card { min-height: 400px; padding: 30px; }
    .feature-card__title { font-size: 26px; }
    
    /* На планшетах можно дать тексту чуть больше места, если картинка позволяет */
    .feature-card__content { max-width: 65%; }
}

@media (max-width: 768px) {
    .features__grid { grid-template-columns: 1fr; gap: 20px; }
    .features__title { font-size: 28px; }
    .feature-card { min-height: 350px; }
    
    /* На телефоне текст может занимать почти всю ширину */
    .feature-card__content { max-width: 100%; }
    /* Но усиливаем затемнение, чтобы текст читался везде */
    .feature-card__overlay { background: rgba(0,0,0,0.5); }
}

/* --- SUBSCRIPTION SECTION --- */
.subscription {
    position: relative;
    width: 100%;
    padding: 80px 0;
    /* Светлый фон, чтобы белая карточка выделялась */
    background-color: #ffffff; 
    color: var(--color-dark);
}

.subscription__container {
    width: 100%; 
    padding: 0 var(--container-padding);
    margin: 0 auto;
}

/* Заголовок */
.subscription__header {
    margin-bottom: 50px;
}
.subscription__title {
    font-family: var(--font-heading);
    font-size: 48px;
    margin-bottom: 20px;
    line-height: 1.1;
}
.subscription__subtitle {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 20px;
    line-height: 1.5;
    color: #4a4a4a;
    max-width: 800px;
    margin-bottom: 0;
}
.subscription__cta {
    font-family: var(--font-body);
    font-size: 20px;
    color: var(--color-dark);
    font-weight: 500;
    
    /* Отступ сверху (красная галочка на скриншоте) */
    margin-top: 30px; 
}

/* Переключатель (Табы) */
.subscription__tabs {
    display: flex;
    justify-content: center;
    background: #000;
    width: fit-content;
    padding: 5px;
    border-radius: 6px;
    margin: 0 auto 30px auto; 
}

.sub-tab-btn {
    background: transparent;
    color: #fff;
    border: none;
    padding: 10px 40px;
    font-family: var(--font-body);
    font-size: 18px;
    cursor: pointer;
    border-radius: 4px;
    transition: 0.3s;
}

.sub-tab-btn--active {
    background: #fff;
    color: #000;
    font-weight: 500;
}

/* Контент тарифа */
.subscription__content {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 80px; 
    align-items: center;
    animation: fadeIn 0.5s ease forwards;
}

.subscription__content--active {
    display: grid;
}

/* --- КАРТОЧКА С ИНФО --- */
.subscription__card {
    background: #fff;
    padding: 50px;
    border-radius: 5px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08); 
    display: flex;
    flex-direction: column;
    width: 100%;    
    max-width: 650px;
}


.sub-card__title {
    font-family: var(--font-heading);
    font-size: 36px;
    margin-bottom: 10px;
}

.sub-card__desc {
    font-family: var(--font-body);
    font-size: 16px;
    margin-bottom: 30px;
    color: #666;
}

.sub-detail {
    margin-bottom: 20px;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
}
.sub-detail strong {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    color: #000;
}

.sub-card__price {
    font-family: var(--font-heading); /* Шрифт цены как у заголовков */
    font-size: 32px;
    margin-top: 20px;
    margin-bottom: 30px;
    font-weight: 400;
}

/* Черная кнопка */
.btn-black {
    background: #000;
    color: #fff;
    border: none;
    padding: 18px 0;
    border-radius: 5px; /* Скругление по ТЗ */
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    transition: background 0.3s;
}
.btn-black:hover {
    background: #333;
}

/* --- ВИЗУАЛ (КОРОБКА) --- */
.subscription__visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Стрелка */
.subscription__arrow {
    position: absolute;
    top: 50%;
    width: 200px; 
    left: -80px; 
    z-index: 20; 
    transform: translateY(-50%) rotate(-10deg);
    pointer-events: none;
    filter: drop-shadow(2px 2px 0px rgba(255,255,255,0.5));
}

/* Обертка коробки для эффекта Hover */
.box-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 /1; 
    overflow: hidden; 
    cursor: pointer;
    margin: 0 auto;
    border-radius: 10px;
}

.box-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center; 
    transition: opacity 0.5s ease;
}

/* Логика смены картинок */
.box-closed {
    opacity: 1;
    z-index: 2;
}
.box-open {
    opacity: 0;
    z-index: 3;
}

/* При наведении на обертку */
.box-wrapper:hover .box-closed { opacity: 0; }
.box-wrapper:hover .box-open { opacity: 1; }


@media (max-width: 1440px) {
    /* Чуть уменьшаем ширину карточки, чтобы влезла */
    .subscription__card {
        max-width: 550px; 
    }
    
    /* Уменьшаем отступ между колонками */
    .subscription__content {
        gap: 40px;
    }

    /* 1. СТРЕЛКА: Уменьшаем её на этом этапе */
    .subscription__arrow {
        width: 150px; /* Было 200px */
        left: -50px;  /* Пододвигаем ближе */
    }
}

/* --- АДАПТИВ (ПЛАНШЕТЫ - 1024px и меньше) --- */
@media (max-width: 1024px) {
    
 
    .subscription__content--active {
        display: flex;         
        flex-direction: column; 
        gap: 40px;
    }

    /* БЛОК С КАРТИНКОЙ (Визуал) */
    .subscription__visual {
        order: 1; 
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* БЛОК С ТЕКСТОМ (Карточка) */
    .subscription__card {
        order: 2; /* СТАВИМ ВТОРЫМ (СНИЗУ) */
        width: 100%;
        max-width: 650px; 
        margin: 0 auto;   
    }

    /* Коробка внутри */
    .box-wrapper {
        max-width: 420px; 
        aspect-ratio: 1 / 0.65; 
        overflow: hidden; 
    }
    .box-img {
        transform: scale(1.1); 
    }

    /* СКРЫВАЕМ СТРЕЛКУ */
    .subscription__arrow {
        display: none;
    }
}

@media (max-width: 768px) {
    .subscription__title { font-size: 28px; }
    
    /* Табы на всю ширину */
    .subscription__tabs { width: 100%; }
    .sub-tab-btn { flex: 1; padding: 12px 0; }
    
    .subscription__arrow { display: none; /* На мобилках стрелку часто убирают, если мешает */ }
}

/* --- STORIES SECTION (GRID LAYOUT) --- */
.stories {
    position: relative;
    width: 100%;
    /* Автоматическая высота по контенту */
    min-height: 100vh; 
    padding: 100px 0;
    overflow: hidden;
    color: #fff;
    display: flex;
    justify-content: center;

    /* --- ГРАДИЕНТНЫЙ ФОН --- */
    /* Центр: #000000 (Черный) - чтобы текст читался */
    /* Середина: #1a1a1a (Темно-серый) - мягкий переход */
    /* Края: #555555 (Серый) - светлое свечение по бокам */
    background: radial-gradient(
        circle at center, 
        #000000 0%, 
        #000000 15%, 
        #1c1c1c 50%, 
        #666666 100%
    );
    perspective: 1000px;
}

/* --- СЛОИ ПАРАЛЛАКСА --- */

/* 1. Декоративный слой (Задний) */
.stories__decor-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Выше фона (0), но ниже контента (2) */
    pointer-events: none; /* Чтобы не мешали кликать на активные фото */
    
    display: flex;
    justify-content: center;
    padding: 100px 0; /* Такой же паддинг как у секции */
}

/* 2. Основной слой (Передний) */
#mainLayer {
    z-index: 5; /* Поверх декора */
}

/* --- СТИЛИ ДЕКОРАТИВНЫХ ЭЛЕМЕНТОВ --- */

/* Настраиваем гриды декора так же, как основные */
.stories__decor-layer .stories__container {
    /* Тот же контейнер, чтобы размеры совпадали */
    width: 100%;
    max-width: 1400px;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
}

.stories__spacer {
    height: 150px; /* Место, где на переднем плане стоит текст */
}

/* Элемент декора */
.story-decor-item {
    width: 100%;
    max-width: 250px;
    aspect-ratio: 1/1;
    opacity: 0.15; /* Едва заметные (как просили) */
    filter: grayscale(100%) blur(1px); /* Ч/Б и легкое размытие для глубины */
    border-radius: 8px;
    overflow: hidden;
}

.story-decor-item img {
    width: 100%; height: 100%; object-fit: cover;
}

/* --- ПОЗИЦИОНИРОВАНИЕ ДЕКОРА (Красные квадраты) --- */
/* Смещаем декор относительно основной сетки */

/* Верхний ряд декора */
.stories__grid--decor-top .story-decor-item:nth-child(1) { transform: translate(-50px, 50px); }
.stories__grid--decor-top .story-decor-item:nth-child(2) { transform: translate(30px, -40px); }
.stories__grid--decor-top .story-decor-item:nth-child(3) { transform: translate(-30px, 60px); }
.stories__grid--decor-top .story-decor-item:nth-child(4) { transform: translate(40px, -20px); }

/* Нижний ряд декора */
.stories__grid--decor-bottom .story-decor-item:nth-child(1) { transform: translate(30px, -50px); }
.stories__grid--decor-bottom .story-decor-item:nth-child(2) { transform: translate(-40px, 40px); }
.stories__grid--decor-bottom .story-decor-item:nth-child(3) { transform: translate(20px, -60px); }
.stories__grid--decor-bottom .story-decor-item:nth-child(4) { transform: translate(-50px, 30px); }



/* Контейнер: Вертикальная колонка */
.stories__container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1400px;
    padding: 0 40px;
    margin: 0 auto;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px; /* Расстояние между Грид-Текст-Грид */
}

/* ТЕКСТ ПО ЦЕНТРУ */
.stories__center-text {
    text-align: center;
    /* БЫЛО: max-width: 800px; */
    /* СТАЛО: Даем больше места, чтобы текст влез в одну строку */
    max-width: 1200px; 
    z-index: 10;
    position: relative;
}
.stories__title {
    font-family: var(--font-heading);
    font-size: 64px;
    margin-bottom: 20px;
    text-shadow: 0 4px 20px rgba(0,0,0,0.8);
}
.stories__subtitle {
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 300;
}

/* --- СЕТКИ С ФОТО --- */
.stories__grid {
    display: grid;
    /* 4 колонки равной ширины */
    grid-template-columns: repeat(4, 1fr); 
    width: 100%;
    /* Большое расстояние между фото по горизонтали */
    gap: 40px; 
    /* Чтобы движение мышкой было плавным */
    transition: transform 0.1s linear; 
    /* will-change помогает браузеру оптимизировать рендеринг */
    will-change: transform; 
}

/* ЭЛЕМЕНТ ФОТО */
.story-item {
    position: relative; /* Для тултипа */
    width: 100%;
    aspect-ratio: 1/1; /* Квадрат */
    max-width: 250px;
    margin: 0 auto; /* Центрирование в ячейке */
    cursor: pointer;
    transition: transform 0.3s ease;
    z-index: 5;
}

.story-img {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    filter: brightness(0.9);
}

.story-item:hover {
    transform: scale(1.05);
    z-index: 20;
}

/* --- ШАХМАТНЫЙ ПОРЯДОК (СМЕЩЕНИЕ) --- */
/* Смещаем каждый четный элемент вниз, чтобы создать "волну" */
.story-item:nth-child(even) {
    margin-top: 160px; /* Опускаем фото 2 и 4 */
}




/* --- ТУЛТИПЫ (Остаются такими же, как были) --- */
.story-tooltip {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    
    /* Прижимаем вплотную к правому краю фото */
    left: 100%; 
    /* Убираем любые отступы, если были */
    margin-left: 0; 
    
    width: 350px;
    
    /* Цвет фона как на скриншоте (светло-серый) */
    background: #e6e6e6; 
    color: #1a1a1a;
    padding: 25px;
    
    /* ИСПРАВЛЕНИЕ: Скругление 5px */
    border-radius: 5px; 
    
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    transition: opacity 0.3s ease;
    pointer-events: none;
    display: flex; 
    flex-direction: column; 
    gap: 10px;
    z-index: 100;
    
    /* Выравнивание текста влево */
    text-align: left; 
}

.story-item:hover .story-tooltip {
    opacity: 1; visibility: visible; pointer-events: auto;
}

/* Стили текста тултипа... (копируем из прошлого ответа или оставляем) */
.story-tooltip__tag {  
    font-family: var(--font-body);
    font-weight: 600;
    color: #444;
    font-size: 16px;
    
    /* ДОБАВЛЯЕМ ЛИНИЮ ПОД ХЕШТЕГОМ */
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 10px;
    margin-bottom: 5px;
}
.story-tooltip__author 
{  font-family: var(--font-body);
    font-size: 20px; 
    font-weight: 700;
    color: #000;
    margin-bottom: -5px; /* Чуть плотнее к тексту */ 
}
.story-tooltip__text 
{ font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.4;
    color: #333; 
}
.story-tooltip__close { display: none; }
.story-tooltip__role {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
}

/* Позиционирование тултипов (CSS фоллбэк) */
/* По умолчанию открываем вправо */
.story-tooltip { left: 100%; }

/* Для последних двух в ряду открываем влево, чтобы не ушли за экран */
.story-item:nth-child(3) .story-tooltip,
.story-item:nth-child(4) .story-tooltip {
    left: auto;
    right: 100%;
}


/* --- АДАПТИВ --- */
@media (max-width: 1024px) {
    .stories__grid {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки на планшете */
        gap: 60px 30px; /* Больше отступ по вертикали */
    }
    
    .story-item:nth-child(even) {
        margin-top: 60px; /* Чуть меньше смещение */
    }
    
    .stories__center-text { margin: 40px 0; }
    
    /* Тултипы на весь экран (мобильная логика) */
    .story-item:hover .story-tooltip {
        position: fixed; top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 90%; max-width: 400px;
        z-index: 9999;
    }
    .story-tooltip__close { display: block; position: absolute; top: 10px; right: 10px; border: none; background: transparent; font-size: 20px;}
    .stories__decor-layer {
        display: none; /* Убираем декор на планшетах для производительности и чистоты */
    }
    
    .story-tooltip {
        display: none !important; 
    }
 
}

@media (max-width: 600px) {
    /* 1. Уменьшаем отступы по краям экрана, чтобы дать больше места фото */
    .stories__container { 
        padding: 0 15px; 
        gap: 30px; /* Отступ между блоками фото и текстом */
    }

    /* 2. Сжимаем сетку */
    .stories__grid { 
        /* Расстояние между фото */
        gap: 15px; 
    }

    /* 3. Делаем фото резиновыми */
    .story-item {
        /* Картинка займет всю ширину своей колонки, но не больше 150px */
        width: 100%; 
        max-width: 150px; 
        
        /* Центрируем в ячейке */
        margin-left: auto;
        margin-right: auto;
    }


    /* Уменьшаем "шахматный" сдвиг, чтобы не было дыр */
    .story-item:nth-child(even) { 
        margin-top: 30px; 
    }

    /* Уменьшаем заголовок */
    .stories__title { 
        font-size: 32px; 
    }
    
    .stories__subtitle {
        font-size: 16px;
    }

    .story-tooltip {
        display: none !important; 
    }
}

/* --- FAQ SECTION --- */
.faq {
    position: relative;
    width: 100%;
    padding: 100px 0;
    background-color: #f9f9f9; /* Светлый фон, чтобы белые плашки выделялись */
    color: var(--color-dark);
}

.faq__container {
    width: 100%; 
    padding: 0 var(--container-padding);
    margin: 0 auto;
}

.faq__title {
    font-family: var(--font-heading);
    font-size: 48px;
    margin-bottom: 50px;
    line-height: 1.1;
    
    /* ИСПРАВЛЕНИЕ: Строго влево */
    text-align: left; 
    
    /* На всякий случай задаем ширину, чтобы он занял всё место */
    width: 100%; 
}

/* Список вопросов */
.faq__list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    
    /* ДОБАВЛЯЕМ ОГРАНИЧЕНИЕ СЮДА */
    width: 100%;
    max-width: 1000px; 
    
 
    margin: 0 auto;
}

/* Карточка вопроса */
.faq__item {
    background: #ffffff;
    border-radius: 5px; /* По ТЗ */
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); /* Легкая тень */
    overflow: hidden; /* Чтобы контент не вылезал при анимации */
    transition: box-shadow 0.3s ease;
}

.faq__item:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* Кнопка вопроса (Заголовок) */
.faq__question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 30px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 600; /* Жирный текст вопроса */
    color: #000;
    transition: color 0.3s ease;
}

/* Иконка (Плюс / Крестик) */
.faq__icon {
    position: relative;
    width: 24px;
    height: 24px;
    flex-shrink: 0; /* Чтобы иконка не сжималась */
    margin-left: 20px;
    transition: transform 0.3s ease; /* Анимация вращения */
}

/* Рисуем полоски плюса */
.faq__icon::before,
.faq__icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #000;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

/* Горизонтальная полоска */
.faq__icon::before {
    width: 100%;
    height: 2px;
}

/* Вертикальная полоска */
.faq__icon::after {
    width: 2px;
    height: 100%;
}

/* Блок с ответом */
.faq__answer {
    max-height: 0; /* Скрыто */
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease;
    background-color: #fff;
}

.faq__text {
    padding: 0 30px 30px 30px; /* Отступы внутри ответа */
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: #4a4a4a;
    font-weight: 400;
    max-width: 90%;
}

/* --- АКТИВНОЕ СОСТОЯНИЕ (Открытый вопрос) --- */
.faq__item.active .faq__icon {
    transform: rotate(45deg); /* Плюс превращается в крестик (X) */
}

.faq__item.active .faq__answer {
    max-height: 500px; /* Достаточная высота для открытия (JS уточнит это значение) */
    opacity: 1;
}

/* АДАПТИВ */
@media (max-width: 768px) {
    .faq__title { font-size: 32px; }
    .faq__question { padding: 20px; font-size: 16px; }
    .faq__text { padding: 0 20px 20px 20px; }
}

/* --- FOOTER SECTION --- */
.footer {
    width: 100%;
    background-color: #1a1a1a; /* Темный фон (почти черный) */
    color: #fff;
    padding: 80px 0 30px 0;
    font-family: var(--font-body);
}

.footer__container {
    width: 100%;
    padding: 0 var(--container-padding);
    margin: 0 auto;
}

/* Сетка: Слева инфо, Справа форма */
.footer__main-grid {
    display: grid;
    grid-template-columns: 1fr 0.8fr; /* Левая часть чуть шире */
    gap: 80px;
    margin-bottom: 80px; /* Отступ до нижней линии */
}

/* --- ЛЕВАЯ КОЛОНКА --- */
.footer__title {
    font-family: var(--font-heading);
    font-size: 48px;
    margin-bottom: 30px;
    line-height: 1.1;
}

.footer__desc {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 40px;
    opacity: 0.9;
    max-width: 500px;
}

.footer__block {
    margin-bottom: 30px;
}

.footer__label {
    display: block;
    font-size: 18px;
    font-weight: 600; /* Полужирный для заголовков полей */
    margin-bottom: 10px;
    color: #fff;
}

.footer__phone {
    display: block;
    font-size: 24px;
    color: #fff;
    text-decoration: none;
    margin-bottom: 5px;
}

.footer__note {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6); /* Серый текст */
}
.footer__note--inline {
    margin-left: 5px;
}

.footer__link {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    transition: border-color 0.3s;
}
.footer__link:hover { border-color: #fff; }

.footer__address {
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255,255,255,0.9);
}

/* --- КНОПКИ МЕССЕНДЖЕРОВ --- */
.footer__messengers {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.btn-messenger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    
    background: #fff;
    color: #000;
    
    padding: 12px 25px;
    border-radius: 5px; /* Скругление 5px по ТЗ */
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    
    transition: all 0.3s ease;
}

.btn-messenger__icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    transition: filter 0.3s ease;
}

/* HOVER ЭФФЕКТ МЕССЕНДЖЕРОВ */
.btn-messenger:hover {
    background: #000; /* Черный фон */
    color: #fff;      /* Белый текст */
    /* Добавляем белую обводку, чтобы кнопка не слилась с фоном */
    outline: none; 
    border: none;
}

/* Магия: инвертируем черную иконку в белую фильтром */
.btn-messenger:hover .btn-messenger__icon {
    filter: invert(1); 
}


/* --- ПРАВАЯ КОЛОНКА (ФОРМА) --- */
.footer__form-wrapper {
    background: #1f1f1f; /* Чуть светлее основного фона, как на макете */
    padding: 50px;
    border-radius: 5px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    height: fit-content;
    box-shadow: 0 0px 40px rgba(255, 255, 255, 0.2); 
}

.footer__form-title {
    font-family: var(--font-heading);
    font-size: 36px;
    margin-bottom: 30px;
}

.footer__form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Поля ввода (только линия снизу) */
.footer__input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.4);
    padding: 15px 0;
    
    color: #fff;
    font-family: var(--font-body);
    font-size: 16px;
    border-radius: 0; /* Убираем стандартные стили */
    
    transition: border-color 0.3s;
}

.footer__input::placeholder {
    color: rgba(255,255,255,0.5);
}

.footer__input:focus {
    outline: none;
    border-bottom-color: #fff;
}

/* Кнопка отправки */
.footer__submit {
    margin-top: 20px;
    background: #fff;
    color: #000;
    border: none;
    padding: 18px 0;
    border-radius: 5px;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
}
.footer__submit:hover {
    background: #000; /* Черный фон */
    color: #fff;      /* Белый текст */
    outline: none;    /* Без обводки */
}


/* --- НИЖНЯЯ ЧАСТЬ (COPYRIGHT) --- */
.footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 14px;
    color: rgba(255,255,255,0.6);
}

.footer__copyright p {
    margin-bottom: 8px;
}
.footer__copyright p:last-child { margin-bottom: 0; }

.footer__links {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    text-align: right;
}

.footer__links a {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    transition: color 0.3s;
}
.footer__links a:hover { color: #fff; }


/* --- АДАПТИВ --- */
@media (max-width: 1024px) {
    .footer__main-grid {
        grid-template-columns: 1fr; /* Одна колонка */
        gap: 60px;
    }
    
    .footer__form-wrapper {
        padding: 30px;
    }
}

@media (max-width: 768px) {
    .footer__title { font-size: 36px; }
    
    .footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }
    
    .footer__links {
        align-items: flex-start;
        text-align: left;
    }
}

/* Стили кастомного курсора */
.cursor {
    position: fixed;
    top: 0;
    left: 0;
    
    /* 1. СТАНДАРТНЫЙ РАЗМЕР (Маленький) */
    width: 30px; 
    height: 30px;
    
    /* 2. СТИЛЬ КАК БЫЛ ПРИ HOVER (Прозрачный и стеклянный) */
    background: rgba(255, 255, 255, 0.2); 
    
    /* Размытие фона */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    
    /* Центрирование */
    transform: translate(-50%, -50%);
    
    /* Плавность */
    transition: width 0.3s ease, height 0.3s ease, background 0.3s ease;
    
    /* SVG фильтр искажения */
    filter: url(#liquidFilter); 
    
    /* Легкая тень, чтобы его было видно */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

/* Состояние при наведении на ссылки и кнопки */
.cursor--hover {
    /* 3. ПРОСТО УВЕЛИЧИВАЕМ РАЗМЕР */
    width: 60px;
    height: 60px;
    
    /* Фон оставляем почти таким же, можно чуть-чуть прозрачнее */
    background: rgba(255, 255, 255, 0.15);
    
    /* Чуть меньше блюра на большом круге, чтобы текст читался */
    backdrop-filter: blur(3px);
}

/* Скрываем кастомный курсор на тач-устройствах (телефоны/планшеты) */
@media (hover: none) and (pointer: coarse) {
    .cursor {
        display: none;
    }
    body {
        cursor: auto;
    }
}

/* Темная версия курсора (для белых фонов) */
.cursor.cursor--dark {
    background: rgba(0, 0, 0, 0.1); /* Очень легкий черный */
    box-shadow: none;
    border: 1px solid rgba(0,0,0,0.05); /* Еле заметная граница */
}

/* При наведении на кнопки внутри светлой секции */
.cursor.cursor--dark.cursor--hover {
    background: rgba(0, 0, 0, 0.05); /* Еще прозрачнее при увеличении */
}

/* --- FULLSCREEN MENU --- */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9990; /* Ниже курсора (9999), но выше всего остального */
    
    /* Скрываем по умолчанию */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    
    display: flex; /* Сетка для разделения на панель и фон */
}

/* Активное состояние (Открыто) */
.menu-overlay.active {
    visibility: visible;
    opacity: 1;
}

/* 1. ЛЕВАЯ БЕЛАЯ ПАНЕЛЬ */
.menu-panel {
    width: 60%; /* Половина экрана, как на макете */
    height: 100%;
    background-color: #ffffff;
    
    transform: translateX(-100%); /* Сдвинута влево за экран */
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); /* Плавная анимация */
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 80px; /* Отступы внутри меню */
    
    position: relative;
    z-index: 2;
}

.menu-overlay.active .menu-panel {
    transform: translateX(0); /* Выезжает на место */
}

/* 2. ПРАВАЯ ЧАСТЬ (БЛЮР) */
.menu-backdrop {
    width: 50%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* Темная подложка */
    backdrop-filter: blur(15px);    /* Эффект стекла */
    -webkit-backdrop-filter: blur(15px);
    
    opacity: 0;
    transition: opacity 0.6s ease;
    cursor: pointer; /* Чтобы было понятно, что можно кликнуть для закрытия */
    
    position: relative;
}

.menu-overlay.active .menu-backdrop {
    opacity: 1;
}

/* 3. КНОПКА ЗАКРЫТИЯ */
.menu-close {
    position: absolute;
    z-index: 10;
    
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.05); /* Легкая обводка для красоты */
    color: #000;
    
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease, background 0.3s;
}

.menu-close:hover {
    transform: translateY(-50%) rotate(90deg); /* Вращение при наведении */
}

/* --- ТИПОГРАФИКА МЕНЮ --- */
.menu-nav {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 80px;
}

.menu-link {
    text-decoration: none;
    color: #000;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: opacity 0.3s;
}

.menu-link:hover {
    opacity: 0.6;
}

/* Номер (/ 01 /) */
.menu-num {
    font-family: var(--font-body); /* Onest */
    font-size: 14px;
    color: #999;
    font-weight: 400;
    letter-spacing: 0.05em;
}

/* Текст ссылки */
.menu-text {
    font-family: var(--font-heading); /* TT Ricordi */
    font-size: 58px; /* Крупно, как в примере */
    font-weight: 400;
    line-height: 1;
}

/* Футер меню */
.menu-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: var(--font-body);
}

.menu-footer a {
    color: #999;
    text-decoration: none;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.3s;
    width: fit-content;
}

.menu-footer a:hover {
    color: #000;
}

/* --- АДАПТИВ --- */

@media (min-width: 1025px) {
    .menu-close {
        top: 50%;
        /* Сдвигаем вправо за пределы панели */
        right: -30px; 
        transform: translateY(-50%);
    }
    .menu-close:hover {
        transform: translateY(-50%) rotate(90deg);
    }
}
@media (max-width: 1024px) {
    .menu-panel {
        width: 100%; /* На планшете меню шире */
        padding: 0 40px;
    }
    .menu-backdrop {  display: none; }
    .menu-text { font-size: 48px; }
    
    /* Кнопку закрытия перемещаем внутрь белой панели на мобилках */
    .menu-close {
        top: 30px;
        right: 30px;
        /* Сброс трансформации, так как здесь не нужно центрирование по Y */
        transform: none; 
        
        background: #f5f5f5; /* Чуть серый фон, чтобы выделялась на белом */
    }
    
    .menu-close:hover {
        background: #e0e0e0;
        transform: rotate(90deg);
    }
}

@media (max-width: 600px) {
    .menu-panel { width: 100%; }
    .menu-backdrop { display: none; } /* Фон скрыт, но кнопка теперь в панели, так что она останется! */
    .menu-text { font-size: 42px; }
    
    /* Корректируем положение кнопки для маленьких экранов */
    .menu-close {
        top: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
    }
}

/* --- КНОПКА "НАВЕРХ" --- */
.scroll-top-btn {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 9000; /* Выше контента, но ниже меню (9990) и курсора (9999) */
    
    width: 50px;
    height: 50px;
    border-radius: 50%;
    
    background: #fff;
    color: #000;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    cursor: pointer;
    
    /* Скрыта по умолчанию */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px); /* Смещена вниз */
    
    transition: all 0.4s ease;
}

/* Активное состояние (когда проскроллили) */
.scroll-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Hover эффект */
.scroll-top-btn:hover {
    background: #000;
    color: #fff;
    transform: translateY(-5px); /* Легкий подскок */
}

/* АДАПТИВ */
@media (max-width: 600px) {
    .scroll-top-btn {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
    }
}

/* --- ГЛОБАЛЬНОЕ МОБИЛЬНОЕ ОКНО ОТЗЫВА --- */
.mobile-review-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999; /* Самый верхний слой */
    
    background: rgba(0, 0, 0, 0.85); /* Затемнение фона */
    backdrop-filter: blur(5px);
    
    /* Центрирование карточки */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Скрыто по умолчанию */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.mobile-review-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-review-card {
    position: relative;
    width: 90%;
    max-width: 350px; /* Ограничение ширины */
    background: #fff;
    color: #000;
    padding: 40px 25px 25px 25px;
    border-radius: 5px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.mobile-review-overlay.active .mobile-review-card {
    transform: translateY(0);
}

.mobile-review-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #333;
    padding: 5px;
}

/* Копируем стили текста из обычного тултипа, чтобы они работали здесь */
.mobile-review-content .story-tooltip__tag {
    font-weight: 600; color: #444; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 10px;
}
.mobile-review-content .story-tooltip__author {
    font-size: 22px; font-weight: 700; color: #000;
}
.mobile-review-content .story-tooltip__role {
    font-size: 14px; color: #666; margin-bottom: 10px;
}
.mobile-review-content .story-tooltip__text {
    font-size: 16px; line-height: 1.5;
}
/* Скрываем кнопку закрытия внутри контента, так как у нас есть своя сверху */
.mobile-review-content .story-tooltip__close {
    display: none;
}