/* ============================================================
   AI CULTURE — базовые стили
   На этом этапе: переменные, reset, типографика, контейнер,
   минимальная навигация. Оформление секций — позже.
   ============================================================ */


/* ---------- 0. ЛОКАЛЬНЫЕ ШРИФТЫ ----------
   Oswald — для имён Anna & Irina и названий модулей программы.
   SSFBreakthrough — основной шрифт для всего остального текста. */
@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald.ttf') format('truetype');
    font-weight: 100 900;       /* TTF может содержать всю variable-ось */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SSFBreakthrough';
    src: url('../fonts/SSFBreakthrough-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* ---------- 1. ПЕРЕМЕННЫЕ ---------- */
:root {
    /* Палитра */
    --color-bg:          #E8EAF0;
    --color-bg-dark:     #1A1D26;
    --color-metal-blue:  #B8C5D6;
    --color-metal-light: #D4DCE6;
    --color-text:        #1A1D26;
    --color-text-muted:  #6B7280;
    --color-accent:      #FF1F1F;
    --color-accent-blue: #5eaaff;
    --color-white:       #FFFFFF;

    /* Шрифты — все базовые "роли" указывают на SSFBreakthrough.
       Исключение — --font-oswald, его используют только Anna & Irina
       и .module-title. */
    --font-display: 'SSFBreakthrough', sans-serif;
    --font-blur:    'SSFBreakthrough', sans-serif;
    --font-ui:      'SSFBreakthrough', sans-serif;
    --font-body:    'SSFBreakthrough', sans-serif;
    --font-oswald:  'Oswald', sans-serif;

    /* Сетка / контейнер */
    --container-max: 1440px;
    --container-pad: clamp(20px, 4vw, 64px);

    /* Высота навигации (понадобится для scroll-padding).
       24px padding × 2 + ~32px высота капсул = ~80px */
    --nav-height: 80px;

    /* Z-индексы (порядок один на проект, не плодим магические числа) */
    --z-base:    1;
    --z-content: 10;
    --z-nav:     100;
    --z-overlay: 1000;
}


/* ---------- 2. RESET ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    /* Отступ при якорной прокрутке, чтобы нав не перекрывал заголовок секции */
    scroll-padding-top: var(--nav-height);
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

ul, ol {
    list-style: none;
}


/* ---------- 3. УТИЛИТЫ ---------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}


/* ============================================================
   4. НАВИГАЦИЯ (стиль реф. 9 — капсулы прямо на фоне hero)
   ============================================================ */

.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav);
    /* Дефолт: НЕТ подложки, нет blur — капсулы лежат на фоне */
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: background-color 0.35s ease, backdrop-filter 0.35s ease;
}

/* При скролле появляется тёмная полупрозрачная подложка с blur,
   чтобы капсулы оставались читаемыми на светлых секциях ниже */
.nav.is-scrolled {
    background: rgba(26, 29, 38, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 24px clamp(20px, 4vw, 48px);
}

/* --- Лого (PNG-картинка вместо текста) ---
   PNG прозрачная (1835×225, аспект ~8.16:1), сам логотип белый —
   ложится на тёмный hero-фон. height задаёт визуальный размер,
   width auto держит аспект. */
.nav__logo {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.nav__logo img {
    display: block;
    height: 14px;
    width: auto;
    /* Лого визуально выглядит обрезанным сверху из-за плотного
       bbox после кропа — сдвигаем его на 4px вниз. */
    margin-top: 4px;
    /* Подсветка по контуру каждой буквы — drop-shadow следует
       альфа-каналу PNG, поэтому свечение точно повторяет форму
       букв (включая внутренние замкнутые области как у "A", "U").
       Идёт медленный pulse по 4 направлениям света с тёплыми/
       холодными слоями + расширение radius'а — создаёт эффект
       перетекающего по контуру свечения. Цикл 9s, 4 фазы. */
    animation: logoContourGlow 9s ease-in-out infinite;
}

@keyframes logoContourGlow {
    0%, 100% {
        filter:
            drop-shadow( 0  0 1px  rgba(255, 255, 255, 0.85))
            drop-shadow( 0  0 4px  rgba(255, 255, 255, 0.25));
    }
    25% {
        filter:
            drop-shadow( 1px 0 2px rgba(255, 255, 255, 1))
            drop-shadow( 3px 0 8px rgba(255, 255, 255, 0.5))
            drop-shadow( 0   0 14px rgba(184, 197, 214, 0.35));
    }
    50% {
        filter:
            drop-shadow( 0 1px 2px rgba(255, 255, 255, 1))
            drop-shadow( 0 3px 8px rgba(255, 255, 255, 0.5))
            drop-shadow( 0  0 14px rgba(184, 197, 214, 0.35));
    }
    75% {
        filter:
            drop-shadow(-1px 0 2px rgba(255, 255, 255, 1))
            drop-shadow(-3px 0 8px rgba(255, 255, 255, 0.5))
            drop-shadow( 0   0 14px rgba(184, 197, 214, 0.35));
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav__logo img { animation: none; }
}

/* --- Меню из капсул --- */
.nav__menu {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav__link {
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    font-family: var(--font-ui);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-white);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;

    /* По реф. 9 — только тонкая обводка, никаких заливок и теней */
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 3px;

    transition: all 0.3s ease;
}

.nav__link:hover {
    border-color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.08);
}

/* --- Бургер --- */
.nav__burger {
    display: none;
    width: 28px;
    height: 22px;
    flex-direction: column;
    justify-content: space-between;
}

.nav__burger span {
    display: block;
    width: 100%;
    height: 1px;
    background: var(--color-white);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* На светлом фоне (когда нет .is-scrolled и hero ушёл) бургер
   становится тёмным — но в нашей раскладке нав почти всегда
   либо на тёмном hero, либо .is-scrolled с тёмной подложкой,
   так что белая полоска работает в обоих случаях. */


/* ---------- 5. БАЗОВЫЕ ВЫСОТЫ СЕКЦИЙ (временные) ---------- */
/* Чтобы каркас можно было увидеть и проскроллить.
   Будет переопределено при наполнении секций. */
section {
    min-height: 60vh;
    padding-block: clamp(60px, 10vh, 120px);
}



/* ============================================================
   6. HERO
   Композиция: фон + 5 квадратных окошек-фрагментов + tagline +
   боковое описание + крупное название "AI CULTURE"
   ============================================================ */

.hero {
    /* Статичная картинка (для окошек-фрагментов и postera видео)
       и градиент-фолбэк на случай если ничего не загрузится. */
    --hero-img:
        url("../images/hero-bg.webp");
    --hero-fallback:
        radial-gradient(ellipse 70% 65% at 50% 38%, rgba(74, 85, 104, 0.55) 0%, transparent 65%),
        radial-gradient(ellipse 50% 45% at 30% 75%, rgba(26, 29, 38, 0.85) 0%, transparent 60%),
        linear-gradient(160deg, #1A1D26 0%, #2A3042 25%, #6B7280 55%, #B8C5D6 85%, #8B97A8 100%);

    position: relative;
    z-index: 1;             /* над .bg-canvas (z-index 0) */
    min-height: 100vh;
    padding-top: var(--nav-height);
    padding-block: 0;
    overflow: hidden;
    color: var(--color-white);
    /* background-color убран — bg-canvas с орбами должен быть виден
       за hero; раньше тут был var(--color-bg-dark) "deep fallback".
       isolation: isolate тоже снят — он создавал stacking context,
       что мешало z-index'ам взаимодействовать с body-level фоном. */
    background-color: transparent;
}

/* --- .frame — обёртка вокруг видео.
   Десктоп: passthrough — frame занимает всю секцию (absolute inset:0),
   видео внутри 100% × 100%, без видимой рамки/dot/corners.
   Мобила (см. @media ниже): frame получает border, glow-shadow,
   угловые скобки и мигающий dot. */
.frame {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.frame video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* На десктопе угловые скобки и dot скрыты — рамка пассивная. */
.frame-dot,
.frame-corner-bl,
.frame-corner-br {
    display: none;
}

/* .hero-image (mobile fallback) — скрыт на десктопе. */
.hero-image {
    display: none;
}

/* --- Тёмный градиент-overlay поверх видео ---
   Лежит между видео (z=0) и окошками (z=5),
   чуть сильнее снизу — чтобы заголовок и описание оставались читаемыми. */
.hero::before {
    content: none;          /* overlay убран — видео идёт без затемнения */
}


/* --- Окошки-фрагменты --- */
.hero__windows {
    position: absolute;
    inset: 0;
    z-index: 5;             /* окошки — над overlay (1), под текстом (10) */
    pointer-events: none;
}

.hero__window {
    position: absolute;
    aspect-ratio: 1 / 1;    /* строго квадратные */
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
        0 8px 28px rgba(26, 29, 38, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    /* Тот же фон, но сильно увеличенный — каждое окошко
       показывает макро-кадр конкретной детали через background-position */
    background:
        var(--hero-img) no-repeat,
        var(--hero-fallback);
    /* size/position задаются на каждом окошке индивидуально */
    opacity: 1;             /* непрозрачные — окошки как реальные "вырезки" */

    /* Стартовый трансформ через переменную, чтобы анимация
       (animations.css) могла подхватить --rotate в keyframes */
    transform: rotate(var(--rotate, 0deg));
}

/* Хаотичное распределение по всей площади hero (стиль реф. 01).
   Координаты в % от hero-контейнера. Лёгкие повороты для естественности.
   Размеры через clamp() — на узких экранах ужимаются к ~60% десктопных.

   Каждое окошко выставляет свой набор CSS-переменных:
     --rotate        — финальный наклон (живёт и в статике, и в keyframes)
     --appear-delay  — стартовая задержка появления
     --float-d       — длительность цикла колебания
     --float-y       — амплитуда колебания (одна сторона, итого ±float-y)
     --blink-delay   — смещение момента "моргания" внутри 10s-цикла
   Анимации описаны в css/animations.css. */

/* Раскладка 3+2: три окошка слева от лица, два — справа.
   Центральная зона (~30%–72% по горизонтали) и блок описания
   справа (~38–52%, 73–95%) свободны.
   Анимационные параметры (delay/float/blink) сохранены прежние. */

/* W1 — крупное (280px), ЛЕВЫЙ ВЕРХ — оправа очков Gentle Monster */
.hero__window--1 {
    top: 12%;  left: 3%;
    width: clamp(168px, 20vw, 280px);
    background-size: 450%;
    background-position: 38% 38%;
    --rotate: -1.5deg;
    --appear-delay: 0s;
    --float-d: 5s;
    --float-y: 6px;
    --blink-delay: 2s;
}

/* W2 — 170px, ЛЕВЫЙ ЦЕНТР — губы */
.hero__window--2 {
    top: 50%;  left: 2%;
    width: clamp(102px, 12vw, 170px);
    background-size: 600%;
    background-position: 50% 70%;
    --rotate: -2deg;
    --appear-delay: 0.15s;
    --float-d: 6s;
    --float-y: 8px;
    --blink-delay: 5s;
}

/* W3 — 130px, ЛЕВЫЙ НИЗ — серебряная серьга-blob */
.hero__window--3 {
    top: 73%;  left: 14%;
    width: clamp(78px, 9vw, 130px);
    background-size: 700%;
    background-position: 38% 60%;
    --rotate: 1deg;
    --appear-delay: 0.30s;
    --float-d: 4.5s;
    --float-y: 5px;
    --blink-delay: 8s;
}

/* W4 — 220px, ПРАВЫЙ ВЕРХ — серёжка + ухо (другой ракурс) */
.hero__window--4 {
    top: 14%;  left: 80%;
    width: clamp(132px, 15vw, 220px);
    background-size: 500%;
    background-position: 35% 55%;
    --rotate: 2deg;
    --appear-delay: 0.45s;
    --float-d: 5.5s;
    --float-y: 7px;
    --blink-delay: 1s;
}

/* W5 — 150px, ПРАВЫЙ НИЗ — воротник бордовой кожаной куртки */
.hero__window--5 {
    top: 72%;  left: 78%;
    width: clamp(90px, 10vw, 150px);
    background-size: 550%;
    background-position: 55% 90%;
    --rotate: -1.5deg;
    --appear-delay: 0.60s;
    --float-d: 4s;
    --float-y: 5px;
    --blink-delay: 7s;
}

/* --- Tagline сверху по центру --- */
.hero__tagline {
    position: absolute;
    top: calc(var(--nav-height) + 28px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;

    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}

/* --- Боковой блок описания (стиль реф. 06) --- */
.hero__description {
    position: absolute;
    top: 38vh;
    right: clamp(24px, 5vw, 64px);
    width: clamp(220px, 22vw, 320px);
    z-index: 10;

    font-family: var(--font-body);
    font-weight: 300;
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.92);
    text-align: right;
}

.hero__description p {
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    padding-right: 16px;
}

/* --- Огромное название (стиль NEONOVA) ---
   Italiana + контурные буквы + многослойное холодное свечение.
   Внутри буквы прозрачные — сквозь них просвечивает фон. */
.hero__title {
    position: absolute;
    bottom: clamp(40px, 8vh, 96px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;

    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(80px, 12vw, 200px);
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;

    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.9);
    text-shadow:
        0 0   10px rgba(255, 255, 255, 0.9),
        0 0   20px rgba(255, 255, 255, 0.7),
        0 0   40px rgba(232, 234, 240, 0.5),
        0 0   80px rgba(184, 197, 214, 0.3),
        0 0  120px rgba(184, 197, 214, 0.2);
}


/* ============================================================
   7. SECTION HEADERS — переиспользуемые блюр-заголовок и метка
   (фирменный приём, реф. 8 — DAZED).
   Каждая контентная секция использует пару:
     <span class="section-blur" aria-hidden="true">TEXT</span>
     <h2 class="section-label">TEXT</h2>
   ============================================================ */

.section-blur {
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    z-index: 1;
    pointer-events: none;

    font-family: var(--font-blur);
    font-size: clamp(120px, 20vw, 300px);
    line-height: 0.9;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-accent);
    text-align: center;

    filter: blur(10px);
    opacity: 0.85;
}

.section-label {
    position: relative;
    z-index: 5;
    margin: 80px 0 0;

    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-align: center;
}


/* ============================================================
   8. ABOUT US — секция о преподавателях
   Три слоя на белом фоне:
     z=1  .about-blur-title — спрей-краска "ABOUT US" сверху секции
     z=2  .about-content    — чёткий текст и кнопки в центре
     z=3  .about-girls      — PNG c альфа-каналом, поверх всего
   Девушки физически перекрывают блюр и часть контента по краям —
   это намеренная композиция, без blend-mode и без хитростей.
   ============================================================ */

.about-section {
    position: relative;
    /* overflow: hidden;  ← ВРЕМЕННО снято для проверки размеров блюра.
                          Восстановить, когда подтвердите, что буквы
                          именно той ширины, что нужно. */
    min-height: 100vh;
    background: #FFFFFF;
    padding: 0;
}

/* --- Слой 1: блюр-надпись из 3 копий, СВЕРХУ секции ---
   Контейнер — общий класс .blur-section-title (используется в About,
   Audience и далее). Размер шрифта задаётся per-секция через .X-blur-title.
   Якорь высоты — --core (relative); --outer/--middle лежат поверх него
   через position: absolute. Без этого контейнер имел бы 0 высоты. */
.blur-section-title {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1;
    pointer-events: none;
    text-align: center;
    overflow: visible;     /* буквы могут немного выходить за края */
}

.blur-layer {
    width: 100%;
    text-align: center;
    white-space: nowrap;

    font-family: var(--font-blur);
    font-weight: 400;
    /* font-size — задаётся per-секция: см. .about-blur-title / .audience-blur-title */
    letter-spacing: 0.02em;
    line-height: 0.85;
    color: var(--color-accent);
}

.blur-layer--outer,
.blur-layer--middle {
    position: absolute;
    top: 0;
    left: 0;
}

.blur-layer--core {
    position: relative;     /* анкор высоты для контейнера */
}

.blur-layer--outer  { filter: blur(28px); opacity: 0.55; }
.blur-layer--middle { filter: blur(14px); opacity: 0.75; }
.blur-layer--core   { filter: blur(5px);  opacity: 0.95; }

/* Размеры шрифта per-секция (только About — Audience использует PNG) */
.about-blur-title .blur-layer { font-size: clamp(280px, 42vw, 600px); }

/* Audience-секция использует готовое PNG-изображение
   (см. .audience-blur-image ниже) — CSS-блюр и SVG-фильтры
   spray-particles больше не применяются. SVG-фильтры в <body>
   оставлены для возможного использования в Program / Pricing / FAQ. */

/* --- Слой 2: контент по центру ---
   z-index: 5 — поверх .about-girls (z=3); раньше блюр заголовок был
   на z=1 и контент был z=2, теперь блюра нет и контент должен быть
   виден поверх девушек. */
.about-content {
    position: relative;
    z-index: 5;

    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    padding: 100px 24px;

    text-align: center;
}

.about-sublabel {
    margin: 0 0 24px;
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.about-names {
    margin: 0 0 32px;
    font-family: var(--font-oswald);
    font-weight: 500;
    font-size: clamp(40px, 5vw, 72px);
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--color-text);
}

.about-description {
    max-width: 380px;
    margin: 0 auto 40px;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text);
}

.about-instagram {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* --- Слой 3: девушки ПОВЕРХ всего (PNG с альфа-каналом) ---
   pointer-events: none — клики проходят к кнопкам в .about-content. */
.about-girls {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    z-index: 3;
    pointer-events: none;
    user-select: none;
}


/* --- Stagger-reveal: при входе секции в viewport ---
   Существующий IO добавляет .is-visible на элемент с .reveal.
   Базовый эффект .reveal на уровне секции отключаем — белый фон
   должен быть виден сразу. */
.about-section.reveal {
    opacity: 1;
    transform: none;
    transition: none;
}

@media (prefers-reduced-motion: no-preference) {
    .about-blur-title,
    .about-sublabel,
    .about-names,
    .about-description,
    .about-instagram,
    .about-girls {
        opacity: 0;
    }

    .about-blur-title   { transition: opacity 1s ease 0s; }

    .about-girls        { transform: scale(0.97);
                          transition: opacity 1s ease 0.2s,
                                      transform 1s ease 0.2s; }

    .about-sublabel     { transition: opacity 0.6s ease 0.3s; }

    .about-names        { transform: scale(0.95);
                          transition: opacity 0.8s ease 0.5s,
                                      transform 0.8s ease 0.5s; }

    .about-description  { transition: opacity 0.6s ease 0.7s; }

    .about-instagram    { transform: translateY(20px);
                          transition: opacity 0.6s ease 0.9s,
                                      transform 0.6s ease 0.9s; }

    /* Финальные состояния */
    .about-section.is-visible .about-blur-title,
    .about-section.is-visible .about-sublabel,
    .about-section.is-visible .about-description { opacity: 1; }
    .about-section.is-visible .about-girls       { opacity: 1; transform: scale(1); }
    .about-section.is-visible .about-names       { opacity: 1; transform: scale(1); }
    .about-section.is-visible .about-instagram   { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   9. INSTAGRAM-BTN — кнопка-капсула в "тёмном" варианте
   (используется в About Us)
   ============================================================ */

.instagram-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;

    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;

    background: transparent;
    border: 1px solid var(--color-text);
    border-radius: 3px;

    transition: background-color 0.3s ease, color 0.3s ease;
}

.instagram-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.instagram-btn:hover {
    background: var(--color-text);
    color: var(--color-white);
}


/* ============================================================
   10. AUDIENCE — секция "Кому подойдёт"
   Двухуровневый заголовок (FOR WHO? блюр + ДЛЯ КОГО? чёткий)
   и 4 вертикальные карточки 3:4 с фоновыми изображениями.
   ============================================================ */

.audience {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    /* padding-top: 0 — PNG прижимается к самой шапке секции.
       padding-sides: 0 — фраза и коллаж сами держат боковые отступы,
       чтобы крайние фото "разъезжались" к самим краям viewport.
       padding-bottom: 80px — минимальный зазор до тёмной секции PRICING. */
    padding: 0 0 80px;
    background: #FFFFFF;
}

/* ============================================================
   SECTION-HEADER — переиспользуемый заголовок секций
   Большой полупрозрачный фон-текст (с filter: noise-blur)
   + стопка из двух стилей шрифтов + горизонтальная линейка
   с подписью. Контент меняется через .section-header__bg-text /
   __line1 / __line2 / __rule-text per-page.
   ============================================================ */
.section-header {
    padding: 0 1.6rem 2rem;
    position: relative;
    overflow: visible;
    margin-top: 0;
}

/* Большой фоновой текст — размывается SVG-фильтром noise-blur,
   маска линейная (фейд вниз). top: -1.5rem поднимает текст выше
   границы секции, left/right -0.2rem дают edge-to-edge. */
.section-header__bg-text {
    position: absolute;
    top: -1.5rem;
    left: -0.2rem;
    right: -0.2rem;
    width: 100%;
    font-family: 'Oswald', sans-serif;
    font-size: clamp(4.5rem, 26vw, 10rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: rgba(79, 127, 232, 0.18);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    line-height: 0.9;
    filter: url(#noise-blur);
    -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
            mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}

.section-header__inner {
    position: relative;
    z-index: 1;
    padding-top: 3.5rem;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* "Кому" — тонкое, синее, курсив */
.section-header__line1 {
    font-family: 'Oswald', sans-serif;
    font-size: 3.4rem;
    font-weight: 200;
    font-style: italic;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #4F7FE8;
    display: block;
}

/* "подойдёт?" — жирное, тёмное */
.section-header__line2 {
    font-family: 'Oswald', sans-serif;
    font-size: 3.4rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #0d0d0d;
    display: block;
}

/* Горизонтальная линейка: точка + линия + малая подпись */
.section-header__rule {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 1.4rem;
}

.section-header__rule-line {
    flex: 1;
    height: 1px;
    background: #4F7FE8;
    opacity: 0.35;
}

.section-header__rule-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #4F7FE8;
    flex-shrink: 0;
}

.section-header__rule-text {
    font-family: 'Manrope', sans-serif;
    font-size: 0.48rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #4F7FE8;
    opacity: 0.7;
    white-space: nowrap;
}


/* ============================================================
   PAIN-TEXT — нумерованный текстовый блок секции "Кому подойдёт"
   01 / линия / "Для тех, кто <strong>...</strong>" + параграф.
   3 экземпляра, перемежаются с .audience-collage-mini.
   ============================================================ */
.pain-text {
    padding: 0 1.6rem;
    margin-top: 2rem;
    position: relative;
}

.pain-text__header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.pain-text__num-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    padding-top: 0.15rem;
}

.pain-text__num {
    font-family: 'Oswald', sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1;
    color: #4F7FE8;
    letter-spacing: -0.02em;
}

.pain-text__num-line {
    width: 1.5px;
    height: 2.8rem;
    background: linear-gradient(to bottom, #4F7FE8, transparent);
}

.pain-text__title {
    font-family: 'Oswald', sans-serif;
    font-size: 1.1rem;
    font-weight: 300;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #0d0d0d;
    line-height: 1.2;
    padding-top: 0.2rem;
    margin: 0;
}

.pain-text__title strong {
    font-weight: 600;
    color: #0d0d0d;
}

.pain-text__body {
    font-size: 0.79rem;
    font-weight: 400;
    line-height: 1.85;
    color: #444;
    padding-left: 2.6rem;
    margin-top: 0.6rem;
}


/* ============================================================
   AUDIENCE-COLLAGE-MINI — 2 фото между pain-text-блоками.
   Вертикальная стопка с асимметрией: одно фото 4/5 шире,
   второе 1/1 уже; их align-self чередуется flex-end / flex-start
   в зависимости от варианта (--variant-1 или --variant-2).
   ============================================================ */
.audience-collage-mini {
    width: 100%;
    margin-top: 2rem;
    padding: 0 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.audience-collage-mini__big {
    width: 72%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.audience-collage-mini__small {
    width: 55%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.audience-collage-mini img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* Variant 1: big справа, small слева */
.audience-collage-mini--variant-1 .audience-collage-mini__big {
    align-self: flex-end;
}
.audience-collage-mini--variant-1 .audience-collage-mini__small {
    align-self: flex-start;
}

/* Variant 2: small справа, big слева (зеркало) */
.audience-collage-mini--variant-2 .audience-collage-mini__small {
    align-self: flex-end;
}
.audience-collage-mini--variant-2 .audience-collage-mini__big {
    align-self: flex-start;
}


/* ============================================================
   AUDIENCE-PHOTO-SOLO — финальное одиночное фото секции,
   уведено к левому краю (55% ширины с отступом 1.6rem).
   ============================================================ */
.audience-photo-solo {
    width: 55%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    margin-top: 2rem;
    margin-left: 1.6rem;
}

.audience-photo-solo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}


/* ============================================================
   PROGRAM section — список модулей курса (из program_final.html)
   .modules-list содержит 5 module-card + module-photos между ними
   + 1 module-card--bonus (тёмный, анимированные blob-градиенты)
   + bonus-materials (список с ✦-буллетами).
   Цвет акцента — синий (#4F7FE8), такой же как в section-header.
   ============================================================ */

.modules-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 1.6rem;
    margin-top: 0.6rem;
}

/* --- Карточка модуля --- */
.module-card {
    padding: 0.7rem 0;
    border-bottom: none;
    position: relative;
}

.module-card__top {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.module-card__num {
    font-family: 'Oswald', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    flex-shrink: 0;
    color: #4F7FE8;
}

.module-card__tag {
    font-family: 'Manrope', sans-serif;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.8;
    color: #4F7FE8;
}

.module-card__line {
    width: 2rem;
    height: 2px;
    margin-bottom: 0.7rem;
    opacity: 0.6;
    background: #4F7FE8;
}

.module-card__title {
    font-family: 'Oswald', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #0d0d0d;
    line-height: 1.2;
    margin-bottom: 0.55rem;
}

.module-card__text {
    font-family: 'Manrope', sans-serif;
    font-size: 0.92rem;
    line-height: 1.8;
    color: #555;
}

/* --- Бонусный модуль: тёмная карточка с blob-градиентами --- */
.module-card--bonus {
    position: relative;
    background: #060d1f;
    border-radius: 12px;
    padding: 1.4rem 1.2rem;
    margin-top: 1.4rem;
    overflow: hidden;
}

.module-card--bonus::before,
.module-card--bonus::after,
.module-card--bonus .bonus-blob3 {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(35px);
    opacity: 0.55;
    pointer-events: none;
}

.module-card--bonus::before {
    width: 160px;
    height: 160px;
    background: #1e3fc2;
    top: -40px;
    left: -30px;
    animation: blob1 9s ease-in-out infinite;
}

.module-card--bonus::after {
    width: 130px;
    height: 130px;
    background: #2d57e8;
    bottom: -30px;
    right: -20px;
    animation: blob2 11s ease-in-out infinite;
}

.module-card--bonus .bonus-blob3 {
    width: 100px;
    height: 100px;
    background: #0a1a5c;
    filter: blur(28px);
    opacity: 0.7;
    top: 40%;
    left: 35%;
    animation: blob3 13s ease-in-out infinite;
}

.module-card--bonus > * {
    position: relative;
    z-index: 1;
}

.module-card--bonus .module-card__title {
    color: #fff;
    margin-top: 1.6rem;
}

.module-card--bonus .module-card__text {
    color: rgba(255, 255, 255, 0.9);
}

/* Металлический шиммер на ★ и подписи "Бонусный модуль" */
.module-card__num--metal,
.module-card__tag--metal {
    background: linear-gradient(135deg, #b0b8c8, #e8ecf2, #ffffff, #9aa4b4, #d0d8e4, #b0b8c8);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: metalShine 3s linear infinite;
}

.module-card__num--metal {
    font-size: 1.4rem;
    line-height: 1;
}

/* Анимации для бонусного модуля */
@keyframes metalShine {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

@keyframes blob1 {
    0%, 100% { transform: translate(0%, 0%) scale(1); }
    33%      { transform: translate(30%, -20%) scale(1.2); }
    66%      { transform: translate(-15%, 25%) scale(0.9); }
}

@keyframes blob2 {
    0%, 100% { transform: translate(0%, 0%) scale(1); }
    33%      { transform: translate(-25%, 20%) scale(0.85); }
    66%      { transform: translate(20%, -30%) scale(1.15); }
}

@keyframes blob3 {
    0%, 100% { transform: translate(0%, 0%) scale(1); }
    50%      { transform: translate(15%, 20%) scale(1.1); }
}


/* --- Фото между модулями: 4:5 + 1:1, с чередованием выравнивания --- */
.module-photos {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem 0;
    position: relative;
}

.module-photos__img {
    overflow: hidden;
    background: #e0e0e0;
    flex-shrink: 0;
}

.module-photos__img--45 {
    width: 68%;
    aspect-ratio: 4 / 5;
    align-self: flex-end;
}

/* <img> внутри .module-photos__img — заполняет контейнер с object-fit cover */
.module-photos__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* <video> внутри .module-photos__img — заполняет контейнер
   так же, как картинка. Чёрный фон-фолбэк до загрузки. */
.module-photos__img video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    background: #000;
}

/* Модификатор --videos: оба .module-photos__img внутри становятся
   одинаковой формы 16:9, ровно друг под другом — без align-self
   offset и без асимметрии 4:5 / 1:1. */
.module-photos--videos .module-photos__img {
    width: 100%;
    aspect-ratio: 16 / 9;
    align-self: stretch;
    margin-left: 0;
    margin-right: 0;
}

/* Самостоятельная картинка между модулями — без обёртки и без
   фиксированного aspect-ratio. Тянется на всю ширину контейнера,
   высота — пропорционально натуральному соотношению.
   Отрицательный margin-bottom -80px подтягивает следующий блок
   вверх — заголовок модуля визуально оказывается на нижней
   части картинки (на уровне руки). */
.module-photo-standalone {
    display: block;
    width: 100%;
    height: auto;
    margin: 0.3rem 0 -80px;
    position: relative;
    z-index: 1;
}

/* Модуль, идущий сразу после картинки, без верхнего padding —
   его заголовок встаёт прямо в зону нижней части фото. z-index:2
   чтобы текст лежал поверх картинки. */
.module-photo-standalone + .module-card {
    padding-top: 0;
    position: relative;
    z-index: 2;
}

/* Модификатор --no-overlap: картинка стоит чисто над следующим
   модулем, без наезда. Использую для IMG_6079 между 04 и 05. */
.module-photo-standalone--no-overlap {
    margin-bottom: 0;
}
.module-photo-standalone--no-overlap + .module-card {
    padding-top: 0.7rem;   /* стандартный padding модуля */
}

/* Модификатор --bleed-right: картинка выходит за правый padding
   контейнера .modules-list (1.6rem) и упирается в правый край
   viewport. max-width: none нужен чтобы перебить глобальное
   img { max-width: 100% }, иначе calc срезается. */
.module-photo-standalone--bleed-right {
    width: calc(100% + 1.6rem);
    max-width: none;
    margin-right: -1.6rem;
}

/* Модификатор --bleed-left: зеркальный — картинка упирается в
   левый край viewport, выходя за левый padding .modules-list. */
.module-photo-standalone--bleed-left {
    width: calc(100% + 1.6rem);
    max-width: none;
    margin-left: -1.6rem;
}

.module-photos__img--11 {
    width: 52%;
    aspect-ratio: 1 / 1;
    align-self: flex-start;
    margin-left: 1.6rem;
}

/* Зеркальный вариант (для чётных модулей: 02, 04) */
.module-photos--alt .module-photos__img--45 {
    align-self: flex-start;
    margin-left: 1.6rem;
}

.module-photos--alt .module-photos__img--11 {
    align-self: flex-end;
    margin-left: 0;
    margin-right: 1.6rem;
}


/* --- Бонусные материалы: список под бонусным модулем --- */
.bonus-materials {
    margin: 0;
    padding: 1.4rem 0 0;
}

.bonus-materials__header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.6rem;
}

.bonus-materials__num {
    font-family: 'Oswald', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    color: #4F7FE8;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

.bonus-materials__tag {
    font-family: 'Manrope', sans-serif;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #4F7FE8;
    opacity: 0.8;
}

.bonus-materials__line {
    width: 2rem;
    height: 2px;
    background: #4F7FE8;
    opacity: 0.6;
    margin-bottom: 0.7rem;
}

.bonus-materials__title {
    font-family: 'Oswald', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #0d0d0d;
    line-height: 1.2;
    margin-bottom: 0.8rem;
}

.bonus-materials__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    margin: 0;
}

.bonus-materials__list li {
    font-family: 'Manrope', sans-serif;
    font-size: 0.92rem;
    font-weight: 400;
    color: #555;
    line-height: 1.4;
    padding: 0.55rem 0 0.55rem 1.2rem;
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.bonus-materials__list li:last-child {
    border-bottom: none;
}

.bonus-materials__list li::before {
    content: '✦';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.45rem;
    color: #4F7FE8;
    opacity: 0.7;
}


/* --- Контейнер двух заголовков ---
   Сделан absolute, чтобы PNG-надпись не была обрезана боковым
   padding'ом секции и легла edge-to-edge.
   Высоту не задаём — оба ребёнка тоже absolute, контейнер
   реально не занимает места в flow. */
.audience-titles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
}

/* Блюр-контейнер прижимается к самому верху .audience-titles */
.audience-titles .blur-section-title {
    top: 0;
}

/* PNG-изображение "FOR WHO?" внутри блюр-контейнера —
   растягивается на всю ширину секции (без max-width). */
.audience-blur-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    user-select: none;
    -webkit-user-drag: none;
}

/* --- Передний слой: чёткая русская надпись (поверх PNG) ---
   left: 50% + translateX(-50%) + width: auto = точное центрирование
   по реальной ширине контента (а не по 100% контейнера). */
.audience-russian-title {
    position: absolute;
    top: clamp(80px, 11vw, 200px);
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    z-index: 3;
    pointer-events: none;
    margin: 0;

    font-family: 'SSFBreakthrough', sans-serif;
    font-weight: 400;          /* Archivo Black уже жирный по дефолту */
    font-size: clamp(80px, 14vw, 200px);
    letter-spacing: -0.02em;
    line-height: 0.9;
    color: var(--color-text);
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

/* --- Заголовок-фраза: слова под буквами FOR WHOM ---
   Каждое слово абсолютно позиционировано через left в %, чтобы
   его центр (transform: translateX(-50%)) попадал точно под нужную
   букву PNG-надписи. Контейнер relative с фиксированной высотой —
   абсолютные слова не схлопывают его в нулевую высоту. */
.audience-phrase {
    position: relative;
    z-index: 5;

    width: 100%;
    height: 60px;
    margin: clamp(380px, 44vw, 720px) 0 60px;
    padding: 0;
}

.phrase-word {
    position: absolute;
    top: 0;

    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(20px, 1.8vw, 28px);
    letter-spacing: 0.02em;
    color: var(--color-text);
    white-space: nowrap;

    /* центр слова попадает на left-позицию */
    transform: translateX(-50%);
}

/* Позиции под буквами FOR WHOM:
   мы → F (5%), создаем → R (26%), культуру → между FOR и WHOM (48%),
   через → H (70%), нейросети → M (92%) */
.phrase-word--1 { left: 5%;  }
.phrase-word--2 { left: 26%; }
.phrase-word--3 { left: 48%; }
.phrase-word--4 { left: 70%; }
.phrase-word--5 { left: 92%; }

/* --- Editorial-коллаж: 5 колонок на flexbox ---
   Контейнер на всю ширину viewport, justify-content: space-between
   разъезжает колонки от левого до правого края.
   Каждая колонка имеет фиксированную ширину = ширине своего фото.
   Фото внутри колонки занимает 100% (заполняет колонку без пустот). */
.audience-collage {
    position: relative;
    z-index: 5;

    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 60px 80px;

    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
}

.collage-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
}

/* Ширина каждой колонки = ширине фото внутри неё.
   Фото и текст заполняют 100% этой ширины. */
.collage-col--1 { width: 280px; }
.collage-col--2 { width: 360px; }
.collage-col--3 { width: 520px; align-items: center; margin-top: 60px; }
.collage-col--4 { width: 360px; }
.collage-col--5 { width: 220px; }

/* --- Фото ---
   width: 100% — фотка заполняет всю ширину своей колонки.
   Не кликабельные, без cursor:pointer и без hover-эффектов. */
.collage-photo {
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    background-color: var(--color-bg-dark);
}

.collage-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.collage-photo--small  { aspect-ratio: 4 / 5; }
.collage-photo--medium { aspect-ratio: 4 / 5; }
.collage-photo--large  { aspect-ratio: 3 / 4; }

/* --- Текст ---
   margin: 0 убирает дефолтные браузерные отступы у <p>. */
.collage-text {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: var(--color-text);
}


/* --- Stagger reveal --- */
.audience.reveal {
    opacity: 1;
    transform: none;
    transition: none;
}

@media (prefers-reduced-motion: no-preference) {
    .audience .blur-section-title,
    .audience-russian-title,
    .phrase-word,
    .collage-photo,
    .collage-text {
        opacity: 0;
    }

    .audience .blur-section-title { transition: opacity 1s ease-out 0s; }

    .audience-russian-title {
        /* translateX(-50%) — центрирование, translateY(20px) — старт анимации */
        transform: translateX(-50%) translateY(20px);
        transition: opacity 0.8s ease 0.4s,
                    transform 0.8s ease 0.4s;
    }

    /* Слова фразы: fade + translateY(10px), 0.5s, 0.1s между словами,
       старт после появления заголовка (~0.5s).
       translateX(-50%) сохраняем — это центрирование слова под буквой. */
    .phrase-word {
        transform: translateX(-50%) translateY(10px);
        transition: opacity 0.5s ease,
                    transform 0.5s ease;
    }
    .phrase-word:nth-child(1) { transition-delay: 0.5s; }
    .phrase-word:nth-child(2) { transition-delay: 0.6s; }
    .phrase-word:nth-child(3) { transition-delay: 0.7s; }
    .phrase-word:nth-child(4) { transition-delay: 0.8s; }
    .phrase-word:nth-child(5) { transition-delay: 0.9s; }

    /* Элементы коллажа: fade + translateY(20px), 0.7s, 0.15s между ними.
       Старт после фразы (~1.0s). Порядок — слева направо, в колонке сверху вниз. */
    .collage-photo,
    .collage-text {
        transform: translateY(20px);
        transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                    transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .collage-col--1 .collage-text  { transition-delay: 1.00s; }
    .collage-col--1 .collage-photo { transition-delay: 1.15s; }
    .collage-col--2 .collage-photo { transition-delay: 1.30s; }
    .collage-col--2 .collage-text  { transition-delay: 1.45s; }
    .collage-col--3 .collage-photo { transition-delay: 1.60s; }
    .collage-col--4 .collage-photo { transition-delay: 1.75s; }
    .collage-col--4 .collage-text  { transition-delay: 1.90s; }
    .collage-col--5 .collage-photo { transition-delay: 2.05s; }

    .audience.is-visible .blur-section-title { opacity: 1; }
    .audience.is-visible .audience-russian-title {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    .audience.is-visible .phrase-word {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    .audience.is-visible .collage-photo,
    .audience.is-visible .collage-text {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ============================================================
   11. PRICING — секция "Тарифы"
   Тёмный фон, спрей-надпись PRICING (CSS-блюр) + чёткая ТАРИФЫ
   поверх. Ниже 3 карточки тарифов: SOLO, TOGETHER (выделена),
   VIP. Стили блюра — общие .blur-section-title / .blur-layer-* из
   секции 8 (About). Размер шрифта блюра задаётся per-секция.
   ============================================================ */

.pricing {
    position: relative;
    /* overflow: hidden — клипуем всё выше/ниже границ секции,
       включая ту часть bg-text "ТАРИФЫ" которая раньше визуально
       заезжала на белый program сверху. */
    overflow: hidden;
    min-height: auto;
    /* padding-bottom уменьшен ещё (84 → 56px). */
    padding: 0 0 56px;
    background: var(--color-bg-dark);
}

/* --- Контейнер заголовка ---
   position: relative с фиксированной высотой — занимает место
   в потоке, ниже него идёт grid карточек. */
.pricing-titles {
    position: relative;
    width: 100%;
    height: clamp(260px, 32vw, 420px);
    margin-bottom: 100px;
}

/* Размер шрифта блюра (Bebas Neue) per-секция */
.pricing-blur-title .blur-layer { font-size: clamp(180px, 28vw, 380px); }

/* Чёткая русская "ТАРИФЫ" поверх блюра, белая на тёмном фоне */
.pricing-russian-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    z-index: 3;
    pointer-events: none;

    font-family: 'SSFBreakthrough', sans-serif;
    font-weight: 400;
    font-size: clamp(80px, 14vw, 200px);
    letter-spacing: -0.02em;
    line-height: 0.9;
    color: var(--color-white);
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

/* --- Сетка тарифов ---
   3 равных колонки, align-items: stretch чтобы карточки тянулись
   к высоте самой высокой (TOGETHER с большим списком). */
.pricing-grid {
    position: relative;
    z-index: 5;

    max-width: 1380px;
    margin: 0 auto;
    padding: 0 60px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}

/* --- Базовая карточка ---
   flex column → подвал (.pricing-card__button) прижимается к низу
   через margin-top: auto на самой кнопке. */
.pricing-card {
    position: relative;

    display: flex;
    flex-direction: column;

    padding: 48px 36px;

    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--color-metal-blue);
    border-radius: 4px;

    transition: transform 0.4s ease,
                border-color 0.4s ease,
                background-color 0.4s ease,
                box-shadow 0.4s ease;
}

.pricing-card:hover {
    transform: translateY(-6px);
    border-color: rgba(184, 197, 214, 0.6);
    background: rgba(255, 255, 255, 0.04);
}

/* --- Выделенная карточка (TOGETHER) — красный акцент --- */
.pricing-card--featured {
    border-color: var(--color-accent);
    background: rgba(255, 31, 31, 0.03);
}

.pricing-card--featured:hover {
    border-color: var(--color-accent);
    background: rgba(255, 31, 31, 0.06);
    box-shadow: 0 20px 60px rgba(255, 31, 31, 0.15);
}

/* Бейдж "ПОПУЛЯРНЫЙ" над выделенной карточкой */
.pricing-card__badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);

    padding: 6px 16px;
    background: var(--color-accent);
    color: var(--color-white);
    border-radius: 2px;

    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
}

/* --- Шапка карточки: имя тарифа + краткое описание --- */
.pricing-card__header {
    margin-bottom: 32px;
}

.pricing-card__name {
    margin: 0 0 12px;
    font-family: var(--font-display);   /* Italiana */
    font-weight: 400;
    font-size: 42px;
    letter-spacing: 0.04em;
    color: var(--color-white);
}

.pricing-card__tagline {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 300;
    font-style: italic;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.6);
}

/* --- Цена с разделителем снизу --- */
.pricing-card__price {
    display: flex;
    align-items: baseline;
    gap: 6px;

    margin-bottom: 36px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(184, 197, 214, 0.2);
}

.pricing-card__price-value {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 56px;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--color-white);
}

.pricing-card__price-currency {
    font-family: var(--font-display);
    font-size: 32px;
    color: rgba(255, 255, 255, 0.6);
}

/* --- Список фич ---
   flex: 1 — список занимает всё свободное место, кнопка ниже
   прижимается к низу через margin-top: auto. */
.pricing-card__features {
    list-style: none;
    margin: 0 0 40px;
    padding: 0;
    flex: 1;

    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pricing-card__features li {
    position: relative;
    padding-left: 24px;

    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

/* CSS-галочка перед фичей (две линии под углом, пересечение) */
.pricing-card__features li::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    width: 12px;
    height: 6px;

    border-left: 1.5px solid var(--color-accent);
    border-bottom: 1.5px solid var(--color-accent);
    transform: rotate(-45deg);
}

/* Фича "Всё из предыдущего тарифа" — белая, жирная, с разделителем снизу */
.pricing-card__feature--all {
    margin-bottom: 6px;
    padding-bottom: 14px;
    border-bottom: 1px dashed rgba(184, 197, 214, 0.2);

    color: var(--color-white) !important;
    font-weight: 500 !important;
}

/* Фича-исключение: серая, перечёркнутая (например "без обратной связи") */
.pricing-card__feature--off {
    color: rgba(255, 255, 255, 0.35) !important;
    text-decoration: line-through;
}

.pricing-card__feature--off::before {
    border-color: rgba(255, 255, 255, 0.25) !important;
}

/* --- Кнопка ВЫБРАТЬ ---
   margin-top: auto прижимает кнопку к низу карточки независимо
   от того, сколько фич в списке выше. */
.pricing-card__button {
    margin-top: auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 16px 32px;

    background: transparent;
    border: 1px solid var(--color-white);
    border-radius: 3px;
    color: var(--color-white);
    text-decoration: none;
    cursor: pointer;

    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2em;

    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease;
}

.pricing-card__button:hover {
    background: var(--color-white);
    color: var(--color-bg-dark);
}

.pricing-card__button--featured {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.pricing-card__button--featured:hover {
    background: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-accent);
}


/* ============================================================
   PRICING — НОВАЯ СТРУКТУРА (из pricing_section.html)
   Тёмный фон с blob-градиентами, 2 тарифа SOLO/VIP с
   зачёркиванием старой цены, контакт-блок и тикер отзывов.
   Старые .pricing-card* правила выше становятся мёртвым кодом.
   ============================================================ */

/* Тёмный фон секции (был var(--color-bg-dark) #1A1D26 — оставляем
   как fallback, но накладываем более глубокий синий из источника). */
#pricing {
    background: #060d1f;
}

/* Анимированные blob-фоны позади контента секции */
.pricing-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.pricing-bg__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.45;
}
.pricing-bg__blob--1 {
    width: 380px;
    height: 380px;
    background: #1e3fc2;
    top: -100px;
    left: -80px;
    animation: blob1 11s ease-in-out infinite;
}
.pricing-bg__blob--2 {
    width: 320px;
    height: 320px;
    background: #2d57e8;
    bottom: 10%;
    right: -80px;
    animation: blob2 14s ease-in-out infinite;
}
.pricing-bg__blob--3 {
    width: 280px;
    height: 280px;
    background: #0a1a5c;
    top: 40%;
    left: 10%;
    animation: blob3 17s ease-in-out infinite;
}

/* Контент секции поднят над blob'ами */
.pricing > .section-header,
.pricing > .pricing-wrap,
.pricing > .contact-block,
.pricing > .reviews-section {
    position: relative;
    z-index: 1;
}

/* --- Тёмная адаптация section-header внутри pricing --- */
.pricing .section-header__line2 {
    color: #ffffff;
}
.pricing .section-header__rule-line {
    background: rgba(255, 255, 255, 0.25);
    opacity: 1;
}
.pricing .section-header__rule-text {
    color: rgba(255, 255, 255, 0.5);
    opacity: 1;
}

/* Scoped override для bg-text "ТАРИФЫ":
   - top: 0 — bg-text начинается у самого верха pricing-секции,
     никакого пустого пространства между предыдущим блоком и
     заголовком;
   - line-height: 1.3 — line-box больше глифа, верхняя перекладина
     "Т" гарантированно внутри line-box и не клипуется
     overflow:hidden;
   - left/right: 0, width: 100% — bg-text растянут по всей ширине
     pricing-секции (= viewport), доходит до правой границы экрана;
   - font-size 24vw — текст "ТАРИФЫ" заполняет ширину почти целиком,
     с минимальным bleed справа (упирается в край). */
.pricing .section-header__bg-text {
    left: 0;
    right: 0;
    /* top: 0 — глиф ещё выше за границу секции (~31px клипуется),
       солидные буквы "ТАРИФЫ" максимально близко к началу
       pricing-блока без потери верха перекладины "Т". */
    top: 0;
    width: 100%;
    font-size: clamp(4.5rem, 26vw, 9.5rem);
    line-height: 1;
    letter-spacing: 0.02em;
}

/* В FAQ-секции почти убираем боковой padding section-header,
   чтобы длинная строка "задаваемые вопросы" поместилась
   в одну строку при увеличенном font-size. */
.faq .section-header {
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}

/* line2 "задаваемые вопросы" длиннее остальных секций (18 знаков
   в одну строку при font 3.4rem не умещается). Подбираем шрифт
   так, чтобы фраза была максимально крупной, но всё ещё в одну
   строку. letter-spacing 0 и компактный clamp дают bigger feel.
   margin-left: 0.6rem — компенсация italic-наклона line1 "Часто",
   чтобы визуально буква "З" начиналась там же где буква "Ч". */
.faq .section-header__line2 {
    font-size: clamp(1.9rem, 7.8vw, 3.4rem);
    letter-spacing: 0;
    white-space: nowrap;
    margin-left: 0.6rem;
}

/* Scoped override для bg-text "ВОПРОСЫ" в секции FAQ:
   "ВОПРОСЫ" — 7 букв (на 1 длиннее ТАРИФЫ), при 26vw текст шире
   viewport. Уменьшаем font до 20vw — слово целиком умещается
   в ширину страницы. */
.faq .section-header__bg-text {
    left: 0;
    right: 0;
    /* top: -1rem — глиф ещё выше (~41px клипуется),
       солидные буквы "ВОПРОСЫ" максимально близко к концу
       прошлого блока. */
    top: -1rem;
    width: 100%;
    font-size: clamp(3.5rem, 20vw, 7.5rem);
    line-height: 1;
    letter-spacing: 0.02em;
}

/* --- Wrapper для тарифов --- */
.pricing-wrap {
    padding: 0 1.6rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    margin-top: 3rem;
}

/* --- Карточка тарифа --- */
.plan {
    border-radius: 16px;
    padding: 1.6rem 1.4rem;
    position: relative;
    overflow: visible;
}
.plan--solo {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.plan--vip {
    background: rgba(79, 127, 232, 0.08);
    border: 1px solid rgba(79, 127, 232, 0.4);
}

/* Бейдж "★ Популярный" на VIP */
.plan__badge {
    position: absolute;
    top: -0.65rem;
    left: 1.2rem;
    background: linear-gradient(135deg, #1a2a4a, #0d1a35);
    border: 1px solid rgba(120, 150, 220, 0.35);
    font-family: 'Manrope', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
}
.plan__badge-text {
    background: linear-gradient(135deg, #b0b8c8, #e8ecf2, #ffffff, #9aa4b4, #d0d8e4, #b0b8c8);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: metalShine 3s linear infinite;
}

.plan__top {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.plan__tag {
    font-family: 'Manrope', sans-serif;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    display: block;
    margin-bottom: 0.3rem;
}
.plan--vip .plan__tag {
    color: rgba(79, 127, 232, 0.7);
}

.plan__name {
    font-family: 'Oswald', sans-serif;
    font-size: 3rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #fff;
    line-height: 1;
    display: block;
    margin-bottom: 0.5rem;
}
.plan--vip .plan__name {
    color: #4F7FE8;
}

.plan__desc {
    font-family: 'Manrope', sans-serif;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.plan__price-row {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
}
.plan__price-new {
    font-family: 'Oswald', sans-serif;
    font-size: 3rem;
    font-weight: 200;
    font-style: italic;
    color: #fff;
    line-height: 1;
    letter-spacing: 0.04em;
}
.plan--vip .plan__price-new {
    color: #4F7FE8;
}
.plan__price-old {
    font-family: 'Oswald', sans-serif;
    font-size: 1.1rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.25);
    text-decoration: none;
    align-self: flex-end;
    padding-bottom: 0.35rem;
    position: relative;
}
/* Анимация зачёркивания старой цены — линия растягивается, замирает,
   исчезает и повторяется. */
.plan__price-old::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 0%;
    height: 1px;
    background: rgba(255, 255, 255, 0.4);
    animation: strikethrough 2s ease-in-out infinite;
}
@keyframes strikethrough {
    0%   { width: 0%;   left: 0; opacity: 1; }
    60%  { width: 100%; left: 0; opacity: 1; }
    80%  { width: 100%; left: 0; opacity: 0; }
    81%  { width: 0%;   left: 0; opacity: 0; }
    100% { width: 0%;   left: 0; opacity: 0; }
}

.plan__divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 1.2rem 0;
}
.plan__divider--vip {
    background: rgba(79, 127, 232, 0.25);
}

.plan__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0;
    margin: 0;
}
.plan__item {
    font-family: 'Manrope', sans-serif;
    font-size: 0.82rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}
.plan__item-text {
    flex: 1;
}
.plan__highlight {
    color: #ffffff;
}
.plan__item--highlight {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
}
.plan__icon {
    font-size: 0.4rem;
    color: #4F7FE8;
    display: inline;
    margin-right: 0.4rem;
    vertical-align: middle;
}

.plan__access {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.plan__access-label {
    font-family: 'Manrope', sans-serif;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #4F7FE8;
    opacity: 0.8;
}
.plan__access-val {
    font-family: 'Manrope', sans-serif;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
}

.plan__btn {
    display: block;
    width: 100%;
    margin-top: 1.4rem;
    padding: 0.9rem;
    border: none;
    border-radius: 10px;
    font-family: 'Oswald', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
}
.plan__btn--solo {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.plan__btn--vip {
    background: #4F7FE8;
    color: #fff;
}


/* --- Контактный блок: вопросы по оплате --- */
.contact-block {
    margin: 1rem 1.6rem;
    padding: 1.6rem 1.4rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    text-align: center;
}
.contact-block__title {
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    font-style: italic;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.4rem;
    display: block;
}
.contact-block__sub {
    font-family: 'Manrope', sans-serif;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1.5;
    margin-bottom: 1.4rem;
    display: block;
}
.contact-block__btns {
    display: flex;
    gap: 0.8rem;
}
.contact-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 0.5rem;
    border-radius: 10px;
    font-family: 'Manrope', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: opacity 0.2s;
}
.contact-btn:hover {
    opacity: 0.8;
}
.contact-btn--tg {
    background: rgba(79, 127, 232, 0.15);
    border: 1px solid rgba(79, 127, 232, 0.35);
    color: rgba(255, 255, 255, 0.8);
}
.contact-btn--ig {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
}
.contact-btn__svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.7;
}


/* --- Отзывы-тикер --- */
.reviews-section {
    margin-top: 2rem;
}
.reviews-ticker {
    overflow: hidden;
    padding: 0.5rem 0 2rem;
}
.reviews-ticker__track {
    display: flex;
    gap: 1rem;
    width: max-content;
    animation: reviewsScroll 40s linear infinite;
}
.reviews-ticker__track:hover {
    animation-play-state: paused;
}
@keyframes reviewsScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Карточка отзыва */
.rcard {
    width: 280px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 1.2rem;
}
.rcard__stars {
    display: block;
    margin-bottom: 0.7rem;
}
.rcard__stars-inner {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    background: linear-gradient(135deg, #b0b8c8, #e8ecf2, #ffffff, #9aa4b4, #d0d8e4, #b0b8c8);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: metalShine 3s linear infinite;
}
.rcard__text {
    font-family: 'Manrope', sans-serif;
    font-size: 0.75rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.85);
}


/* ============================================================
   КОНЕЦ нового PRICING-блока
   ============================================================ */


/* --- Stagger reveal ---
   Базовый класс .reveal на секции (.pricing.reveal) уже даёт
   общий fade-in от animations.css. Здесь мы перебиваем его,
   чтобы карточки и заголовок появлялись по очереди. */
.pricing.reveal {
    opacity: 1;
    transform: none;
    transition: none;
}

@media (prefers-reduced-motion: no-preference) {
    .pricing .blur-section-title,
    .pricing-russian-title,
    .pricing-card {
        opacity: 0;
    }

    .pricing .blur-section-title { transition: opacity 1s ease-out 0s; }

    /* "ТАРИФЫ": fade + лёгкий scale 0.95 → 1, старт после блюра */
    .pricing-russian-title {
        transform: translate(-50%, -50%) scale(0.95);
        transition: opacity 0.8s ease 0.3s,
                    transform 0.8s ease 0.3s;
    }

    /* Карточки: fade + translateY(40 → 0), 0.7s, шаг 0.2s */
    .pricing-card {
        transform: translateY(40px);
        transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                    transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .pricing-grid .pricing-card:nth-child(1) { transition-delay: 0.6s; }
    .pricing-grid .pricing-card:nth-child(2) { transition-delay: 0.8s; }
    .pricing-grid .pricing-card:nth-child(3) { transition-delay: 1.0s; }

    .pricing.is-visible .blur-section-title { opacity: 1; }
    .pricing.is-visible .pricing-russian-title {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    .pricing.is-visible .pricing-card {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ============================================================
   12. FAQ — секция "Вопросы"
   Светлый фон, спрей-надпись FAQ + чёткая ВОПРОСЫ. Аккордеон
   на нативных <details>/<summary> — без JavaScript.
   ============================================================ */

.faq {
    position: relative;
    overflow: hidden;
    min-height: auto;
    padding: 0 0 120px;
    background: var(--color-white);
}

/* --- Контейнер заголовка (по аналогии с .pricing-titles) --- */
.faq-titles {
    position: relative;
    width: 100%;
    height: clamp(260px, 32vw, 420px);
    margin-bottom: 80px;
}

/* Размер шрифта блюра per-секция */
.faq-blur-title .blur-layer { font-size: clamp(220px, 32vw, 460px); }

/* Чёткая русская "ВОПРОСЫ" поверх блюра, тёмная на белом фоне */
.faq-russian-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    z-index: 3;
    pointer-events: none;

    font-family: 'SSFBreakthrough', sans-serif;
    font-weight: 400;
    font-size: clamp(80px, 14vw, 200px);
    letter-spacing: -0.02em;
    line-height: 0.9;
    color: var(--color-text);
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

/* --- Аккордеон ---
   <details>/<summary> — нативный аккордеон, без JS.
   Один пункт = одна горизонтальная линия сверху и снизу. */
.faq-list {
    position: relative;
    z-index: 5;

    max-width: 980px;
    margin: 0 auto;
    padding: 0 60px;
}

.faq-item {
    border-bottom: 1px solid var(--color-metal-blue);
}

.faq-item:first-child {
    border-top: 1px solid var(--color-metal-blue);
}

/* --- Вопрос (summary) ---
   list-style: none + ::-webkit-details-marker { display: none }
   убирают дефолтный треугольник в Chrome/Safari/Firefox. */
.faq-question {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 32px;
    align-items: center;

    padding: 32px 0;
    list-style: none;
    cursor: pointer;

    transition: padding 0.3s ease;
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-number {
    min-width: 40px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 20px;
    letter-spacing: 0.05em;
    color: #4F7FE8;     /* синий, как у "Часто" в заголовке */
}

.faq-text {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: var(--color-text);
    transition: color 0.3s ease;
}

/* --- Иконка плюс/минус ---
   Два псевдоэлемента — горизонтальная и вертикальная линии,
   образуют "+". При open вертикальная скрывается → "−". */
.faq-icon {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.faq-icon::before,
.faq-icon::after {
    content: "";
    position: absolute;
    background: #4F7FE8;     /* синий плюсик, как у "Часто" в заголовке */
    transition: transform 0.3s ease,
                opacity 0.3s ease,
                background-color 0.3s ease;
}

.faq-icon::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 1.5px;
    transform: translateY(-50%);
}

.faq-icon::after {
    top: 0;
    left: 50%;
    width: 1.5px;
    height: 100%;
    transform: translateX(-50%);
}

/* Раскрытое состояние: вертикальная линия исчезает с поворотом,
   горизонтальная окрашивается в красный. */
.faq-item[open] .faq-icon::after {
    opacity: 0;
    transform: translateX(-50%) rotate(90deg);
}

.faq-item[open] .faq-icon::before {
    background: var(--color-accent);
}

/* --- Hover на вопросе --- */
.faq-question:hover .faq-text {
    color: var(--color-accent);
}

.faq-question:hover .faq-icon::before,
.faq-question:hover .faq-icon::after {
    background: var(--color-accent);
}

/* --- Ответ ---
   padding-left: 72px (40 номер + 32 gap) — текст ответа выравнен
   под текст вопроса, не под номер.
   animation запускается при появлении блока (когда [open] добавлен). */
.faq-answer {
    max-width: 800px;
    padding: 0 0 32px 72px;
    animation: faqFadeIn 0.4s ease;
}

.faq-answer p {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text);
}

@keyframes faqFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* --- Stagger reveal ---
   Базовый класс .reveal на секции (.faq.reveal) уже даёт
   общий fade-in от animations.css. Здесь перебиваем — заголовок
   и пункты появляются по очереди. */
.faq.reveal {
    opacity: 1;
    transform: none;
    transition: none;
}

@media (prefers-reduced-motion: no-preference) {
    .faq .blur-section-title,
    .faq-russian-title,
    .faq-item {
        opacity: 0;
    }

    .faq .blur-section-title { transition: opacity 1s ease-out 0s; }

    /* "ВОПРОСЫ": fade + scale 0.95 → 1, старт после блюра */
    .faq-russian-title {
        transform: translate(-50%, -50%) scale(0.95);
        transition: opacity 0.8s ease 0.3s,
                    transform 0.8s ease 0.3s;
    }

    /* Пункты аккордеона: fade + translateY(20 → 0), 0.5s, шаг 0.08s */
    .faq-item {
        transform: translateY(20px);
        transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .faq-list .faq-item:nth-child(1) { transition-delay: 0.55s; }
    .faq-list .faq-item:nth-child(2) { transition-delay: 0.63s; }
    .faq-list .faq-item:nth-child(3) { transition-delay: 0.71s; }
    .faq-list .faq-item:nth-child(4) { transition-delay: 0.79s; }
    .faq-list .faq-item:nth-child(5) { transition-delay: 0.87s; }
    .faq-list .faq-item:nth-child(6) { transition-delay: 0.95s; }
    .faq-list .faq-item:nth-child(7) { transition-delay: 1.03s; }
    .faq-list .faq-item:nth-child(8) { transition-delay: 1.11s; }

    .faq.is-visible .blur-section-title { opacity: 1; }
    .faq.is-visible .faq-russian-title {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    .faq.is-visible .faq-item {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ============================================================
   13. PROGRAM — секция "Программа курса"
   Editorial-вёрстка: 5 модулей, у каждого — своя композиция
   двух фотографий и текста. Большой полупрозрачный номер модуля
   как декор. Стили блюра и аккордеон-нумерации общие из секций
   8 (About) и 12 (FAQ).
   ============================================================ */

#program {
    background: #FFFFFF;
    position: relative;
    overflow: hidden;
    /* Белый зазор снизу — отделяет последний текстовый блок
       (бонусные материалы) от тёмной секции PRICING. */
    padding: 0 0 3rem;
}

/* Scoped override: фоновый "КУРС" не должен наезжать на фото из
   audience-секции выше, но видимые буквы должны идти от самой
   верхней границы program (без пустого ascender-пространства).
   top: -0.6rem поднимает line-box на величину ascender'а Oswald —
   пустая область сверху уходит за границу program и клипается
   overflow:hidden, а сами буквы К/У/Р/С касаются верха секции. */
#program .section-header__bg-text {
    top: -0.6rem;
}

/* --- Контейнер заголовка (общий паттерн с PRICING/FAQ) --- */
.program-titles {
    position: relative;
    width: 100%;
    height: clamp(260px, 32vw, 420px);
    margin-bottom: 80px;
}

.program-blur-title .blur-layer { font-size: clamp(180px, 26vw, 380px); }

.program-russian-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    z-index: 3;
    pointer-events: none;

    font-family: 'SSFBreakthrough', sans-serif;
    font-weight: 400;
    font-size: clamp(80px, 14vw, 200px);
    letter-spacing: -0.02em;
    line-height: 0.9;
    color: var(--color-text);
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

/* --- Контейнер модулей: большие промежутки между разворотами,
   как воздух между журнальными разворотами --- */
.program-modules {
    position: relative;
    z-index: 5;

    max-width: 1380px;
    margin: 0 auto;
    padding: 0 60px;

    display: flex;
    flex-direction: column;
    gap: 160px;
}

/* --- Базовый модуль ---
   Каждый program-module--N задаёт свою grid-сетку (см. ниже).
   align-items: center выравнивает картинки и текст по вертикали. */
.program-module {
    position: relative;
    display: grid;
    gap: 60px;
    align-items: center;
}

/* Большой полупрозрачный номер модуля — декор, не intercepts events */
.module-number {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    margin: 0;

    font-family: var(--font-display);   /* Italiana */
    font-weight: 400;
    font-size: clamp(80px, 10vw, 160px);
    letter-spacing: 0.05em;
    line-height: 1;
    color: var(--color-text-muted);
    opacity: 0.15;
}

/* --- Контейнер картинок модуля ---
   Background-gradient — fallback пока картинок нет в /images. */
.module-images {
    position: relative;
    z-index: 2;
}

.module-img {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background: linear-gradient(135deg, #1A1D26 0%, #2D3340 100%);
}

.module-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* font-size: 0 скрывает alt-text при битой картинке —
       пока файлы /images/module-N-*.jpg не положены, видна только
       градиент-подложка без некрасивого alt-string. */
    font-size: 0;
}

/* --- Декоративный красный крестик у главной картинки ---
   Два пересекающихся градиента образуют "+" (один наклонён +45°,
   другой −45°). Чисто декор, как в DAZED. */
.module-img-mark {
    position: absolute;
    top: -16px;
    right: -10px;
    z-index: 5;
    width: 40px;
    height: 40px;
    pointer-events: none;

    background-image:
        linear-gradient(45deg,  transparent 47%, var(--color-accent) 47%, var(--color-accent) 53%, transparent 53%),
        linear-gradient(-45deg, transparent 47%, var(--color-accent) 47%, var(--color-accent) 53%, transparent 53%);
}

/* --- Контент модуля --- */
.module-content {
    position: relative;
    z-index: 3;
}

.module-title {
    margin: 0 0 12px;
    font-family: var(--font-oswald);
    font-weight: 600;
    font-size: clamp(28px, 3.2vw, 44px);
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--color-text);
    text-transform: uppercase;
}

.module-tagline {
    margin: 0 0 24px;
    font-family: var(--font-body);
    font-style: italic;
    font-size: 15px;
    color: var(--color-text-muted);
}

.module-description {
    margin: 0 0 32px;
    max-width: 480px;

    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text);
}

.module-cta {
    display: inline-block;
    padding-bottom: 4px;

    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--color-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;

    transition: border-color 0.3s ease;
}

.module-cta:hover {
    border-color: var(--color-accent);
}


/* ============================================================
   Уникальные композиции для каждого из 5 модулей
   ============================================================ */

/* --- МОДУЛЬ 1: 2 картинки слева (большая + маленькая снизу-справа), текст справа --- */
.program-module--1 {
    grid-template-columns: 1fr 1fr;
}
.program-module--1 .module-images {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 24px;
    align-items: end;
}
.program-module--1 .module-img--main      { aspect-ratio: 3 / 4; }
.program-module--1 .module-img--secondary {
    aspect-ratio: 1 / 1;
    width: 70%;
    margin-bottom: 60px;
    margin-left: auto;
}
.program-module--1 .module-number {
    top: -40px;
    left: -20px;
}

/* --- МОДУЛЬ 2: текст слева, 2 картинки справа --- */
.program-module--2 {
    grid-template-columns: 1fr 1fr;
}
.program-module--2 .module-content { order: 1; }
.program-module--2 .module-images {
    order: 2;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
    align-items: start;
}
.program-module--2 .module-img--main      { aspect-ratio: 3 / 4; }
.program-module--2 .module-img--secondary {
    aspect-ratio: 4 / 5;
    width: 70%;
    margin-top: 60px;
}
.program-module--2 .module-number {
    top: -40px;
    right: -20px;
    text-align: right;
}

/* --- МОДУЛЬ 3: картинки слева, текст справа.
   Маленькая картинка СВЕРХУ-СЛЕВА, большая горизонтальная СНИЗУ
   на всю ширину. Маленькая чуть наезжает на большую через
   margin-bottom: -40px. */
.program-module--3 {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.program-module--3 .module-images {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    grid-template-rows: auto auto;
    gap: 24px;
    align-items: start;
}
.program-module--3 .module-img--secondary {
    position: relative;
    z-index: 3;
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: 4 / 5;
    width: 80%;
    margin-bottom: -40px;
}
.program-module--3 .module-img--main {
    grid-column: 1 / 3;
    grid-row: 2;
    aspect-ratio: 5 / 4;
}
.program-module--3 .module-number {
    top: -40px;
    left: -20px;
}

/* --- МОДУЛЬ 4: текст слева, картинки справа.
   Большая горизонтальная картинка СВЕРХУ на всю ширину, маленькая
   квадратная СНИЗУ-СПРАВА с лёгким наездом (margin-top: -30px). */
.program-module--4 {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.program-module--4 .module-content {
    order: 1;
    text-align: left;
}
.program-module--4 .module-description {
    margin-left: 0;
    margin-right: 0;
}
.program-module--4 .module-images {
    order: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 24px;
    align-items: end;
}
.program-module--4 .module-img--main {
    grid-column: 1 / 3;
    grid-row: 1;
    aspect-ratio: 4 / 3;
}
.program-module--4 .module-img--secondary {
    position: relative;
    z-index: 3;
    grid-column: 2;
    grid-row: 2;
    aspect-ratio: 1 / 1;
    width: 80%;
    margin-left: auto;
    margin-top: -30px;
}
.program-module--4 .module-number {
    top: -40px;
    right: -20px;
    left: auto;
    transform: none;
    text-align: right;
}

/* --- МОДУЛЬ 5: картинки слева, текст справа.
   Большая вертикальная СЛЕВА, маленькая СПРАВА выходит за нижнюю
   границу (margin-bottom: -60px) — драматичный editorial-приём. */
.program-module--5 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 60px;
    align-items: center;
}
.program-module--5 .module-images {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: auto;
    gap: 24px;
    align-items: end;
}
.program-module--5 .module-img--main {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: 3 / 4;
    align-self: start;
}
.program-module--5 .module-img--secondary {
    position: relative;
    z-index: 3;
    grid-column: 2;
    grid-row: 1;
    aspect-ratio: 4 / 5;
    width: 90%;
    margin-bottom: -60px;
}
.program-module--5 .module-content {
    padding-left: 0;
}
.program-module--5 .module-number {
    top: -40px;
    left: -20px;
    right: auto;
    text-align: left;
}

/* --- БОНУСНЫЙ МОДУЛЬ 6: текст слева, 2 картинки справа.
   Зеркально к модулю 2. + красный акцент на номере и BONUS-бейдже,
   чтобы визуально выделить как премиум-добавку. */
.program-module--6 {
    grid-template-columns: 1fr 1fr;
}
.program-module--6 .module-content { order: 1; }
.program-module--6 .module-images {
    order: 2;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
    align-items: start;
}
.program-module--6 .module-img--main      { aspect-ratio: 3 / 4; }
.program-module--6 .module-img--secondary {
    aspect-ratio: 4 / 5;
    width: 70%;
    margin-top: 60px;
}
.program-module--6 .module-number {
    top: -40px;
    right: -20px;
    text-align: right;
    color: var(--color-accent);   /* красный для акцента "БОНУС" */
    opacity: 0.35;
    font-size: clamp(56px, 7vw, 110px);
    letter-spacing: 0.08em;
}

/* BONUS MODULE-бейдж — мелкая капсула над заголовком */
.module-bonus-badge {
    display: inline-block;
    padding: 4px 10px;
    margin-bottom: 16px;

    background: var(--color-accent);
    color: var(--color-white);
    border-radius: 2px;

    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}


/* --- Stagger reveal ---
   Каждый модуль появляется при входе в viewport через
   .program.is-visible. Внутри модуля номер/картинки/контент
   тоже разнесены небольшой задержкой. */
.program.reveal {
    opacity: 1;
    transform: none;
    transition: none;
}

@media (prefers-reduced-motion: no-preference) {
    .program .blur-section-title,
    .program-russian-title,
    .program-module {
        opacity: 0;
    }

    .program .blur-section-title { transition: opacity 1s ease-out 0s; }

    .program-russian-title {
        transform: translate(-50%, -50%) scale(0.95);
        transition: opacity 0.8s ease 0.3s,
                    transform 0.8s ease 0.3s;
    }

    /* Модули: fade + translateY(40 → 0), 0.8s.
       Stagger через :nth-child — первый чуть позже заголовка,
       остальные с шагом 0.15s. */
    .program-module {
        transform: translateY(40px);
        transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .program-modules .program-module:nth-child(1) { transition-delay: 0.55s; }
    .program-modules .program-module:nth-child(2) { transition-delay: 0.70s; }
    .program-modules .program-module:nth-child(3) { transition-delay: 0.85s; }
    .program-modules .program-module:nth-child(4) { transition-delay: 1.00s; }
    .program-modules .program-module:nth-child(5) { transition-delay: 1.15s; }
    .program-modules .program-module:nth-child(6) { transition-delay: 1.30s; }

    .program.is-visible .blur-section-title { opacity: 1; }
    .program.is-visible .program-russian-title {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    .program.is-visible .program-module {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ============================================================
   14. WORKS — секция "Работы после курса"
   Editorial-коллаж: 5 flex-колонок с разным padding-top
   для рваного верхнего края. Статичный, без анимаций.
   ============================================================ */

#works {
    background: #FFFFFF;
    padding: 80px 60px;
    width: 100%;
    box-sizing: border-box;
}

/* Абсолютное позиционирование на canvas с aspect-ratio 1442/900
   из Figma frame "works 1" (node 3:8). Координаты ячеек переведены
   в проценты от референса 1442 × 900. */
.works-collage {
    position: relative;
    width: 100%;
    aspect-ratio: 1442 / 900;
}

.work-cell {
    position: absolute;
    background: linear-gradient(135deg, #1A1D26 0%, #2D3340 100%);
    overflow: hidden;
}

.work-cell img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Координаты ячеек: x,y,w,h из Figma → проценты от 1442 × 900.
   В скобках после каждой строки — исходные пиксели и Figma node id. */
.work-cell:nth-child(1) { left:  0%;      top:  3.3333%; width:  9.7088%; height: 34.6667%; }  /* (0,30,140,312)     3:12 */
.work-cell:nth-child(2) { left:  0%;      top: 44.3333%; width:  9.7088%; height: 23.3333%; }  /* (0,399,140,210)    3:13 */
.work-cell:nth-child(3) { left: 11.9972%; top: 12.2222%; width: 19.4868%; height: 56.5556%; }  /* (173,110,281,509)  3:14 */
.work-cell:nth-child(4) { left:  9.7088%; top: 73.4444%; width: 21.7753%; height: 19.7778%; }  /* (140,661,314,178)  3:15 */
.work-cell:nth-child(5) { left: 33.7726%; top:  6.8889%; width: 16.6435%; height: 35.5556%; }  /* (487,62,240,320)   3:16 */
.work-cell:nth-child(6) { left: 33.7726%; top: 46.1111%; width: 16.2968%; height: 38.5556%; }  /* (487,415,235,347)  3:17 */
.work-cell:nth-child(7) { left: 52.7045%; top: 30.2222%; width: 13.3148%; height: 18.5556%; }  /* (760,272,192,167)  3:18 */
.work-cell:nth-child(8) { left: 68.2386%; top:  7.7778%; width: 18.8627%; height: 45.3333%; }  /* (984,70,272,408)   3:19 */
.work-cell:nth-child(9) { left: 89.1817%; top: 32.5556%; width: 10.8183%; height: 34.8889%; }  /* (1286,293,156,314) 3:20 */

/* ---------- 15. АДАПТИВНОСТЬ — БРЕЙКПОИНТЫ ---------- */

/* Узкий десктоп / большой планшет — поджимаем колонки пропорционально.
   Колонки сужаются → фото внутри (width: 100%) уменьшаются автоматически.
   Фраза 6% padding каскадирует с базы. */
@media (max-width: 1600px) {
    .collage-col--1 { width: 240px; }
    .collage-col--2 { width: 320px; }
    .collage-col--3 { width: 460px; }
    .collage-col--4 { width: 320px; }
    .collage-col--5 { width: 190px; }
}

@media (max-width: 1380px) {
    .collage-text { font-size: 15px; }
    .collage-col--1 { width: 200px; }
    .collage-col--2 { width: 280px; }
    .collage-col--3 { width: 400px; }
    .collage-col--4 { width: 280px; }
    .collage-col--5 { width: 160px; }
}

@media (max-width: 1100px) {
    .phrase-word {
        font-size: 16px;
    }
    .collage-text { font-size: 14px; }
    .audience-collage {
        padding: 0 32px 80px;
        gap: 20px;
    }
    .collage-col--1 { width: 170px; }
    .collage-col--2 { width: 220px; }
    .collage-col--3 { width: 320px; }
    .collage-col--4 { width: 220px; }
    .collage-col--5 { width: 140px; }

    /* PRICING tablet: меньше gap/padding, поджимаем шрифты в карточках */
    .pricing-grid {
        gap: 16px;
        padding: 0 32px;
    }
    .pricing-card {
        padding: 36px 24px;
    }
    .pricing-card__name {
        font-size: 36px;
    }
    .pricing-card__price-value {
        font-size: 44px;
    }
}

/* Планшет и меньше */
@media (max-width: 1024px) {
    /* HERO: размеры окошек уже масштабируются через clamp().
       Поправляем только описание — поджимаем выше */
    .hero__description {
        top: 32vh;
        font-size: 13px;
    }

    /* ABOUT: блюр-надпись удалена из HTML — overrides не нужны.
       padding контента остаётся базовый (100px 24px). */

    /* AUDIENCE планшет: только мелкие правки фразы.
       collage-text font-size держится 14px от брейкпоинта 1100. */
    .phrase-word {
        font-size: 14px;
    }
    .collage-text {
        line-height: 1.45;
    }

    .audience-russian-title {
        font-size: clamp(60px, 12vw, 140px);
        top: clamp(100px, 14vw, 200px);
    }

    /* FAQ tablet: меньше боковой padding у списка */
    .faq-list {
        padding: 0 32px;
    }

    /* PROGRAM tablet: меньше gap между модулями и внутри модуля */
    .program-modules {
        padding: 0 32px;
        gap: 100px;
    }
    .program-module {
        gap: 40px;
    }

    /* WORKS tablet: абсолютная раскладка плохо читается на узких
       экранах — переходим на простую flex-сетку 3-колоночную */
    .works-collage {
        position: static;
        aspect-ratio: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }
    .work-cell {
        position: static;
        flex: 1 1 calc(33.333% - 8px);
        min-width: 180px;
        height: auto;
        aspect-ratio: 4 / 3;
    }
    .work-cell:nth-child(n) {
        left: auto; top: auto; width: auto;
    }
    #works { padding: 60px 32px; }
}

/* Мобильный — бургер вместо меню */
@media (max-width: 768px) {

    /* --- HERO mobile ---
       Десктоп-композиция (всё в абсолюте) ломается на узких экранах:
       портрет кропится по бокам, описание ложится на лицо.
       Переключаем в вертикальный поток: видео (86% ширины) →
       описание ниже. Полароиды с готовыми кропами (img1/2/3)
       у краёв и снизу. */
    .hero {
        min-height: auto;
        padding: var(--nav-height) 0 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        --hero-img: url("../images/hero-bg-mobile.webp");
        --hero-img-h: calc(min(86vw, 420px) * 16 / 9);
    }

    .hero::before { display: none; }

    /* Frame — flex-item с фиксированной портретной пропорцией.
       Видео внутри заполняет frame на 100%×100% (правило .frame video
       выше в десктоп-стилях). */
    .frame {
        position: relative;
        inset: auto;
        width: min(86%, 420px);
        height: auto;
        aspect-ratio: 9 / 16;
        margin: 0 auto;
        z-index: 1;
        pointer-events: auto;
        /* editorial blue border + многослойный glow-shadow */
        border: 1.5px solid rgba(94, 170, 255, 0.45);
        box-shadow:
            0 0 0 1px rgba(94, 170, 255, 0.1),
            0 0 18px rgba(94, 170, 255, 0.15),
            inset 0 0 12px rgba(94, 170, 255, 0.04);
    }

    .frame video,
    .hero-video {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Угловые скобки (top-left + top-right) — псевдо .frame::before/::after.
       Bottom-left + bottom-right — псевдо своих div'ов. */
    .frame-dot,
    .frame-corner-bl,
    .frame-corner-br {
        display: block;
    }
    .frame::before,
    .frame::after,
    .frame-corner-bl::before,
    .frame-corner-br::before {
        content: '';
        position: absolute;
        width: 14px;
        height: 14px;
        border-color: rgba(255, 255, 255, 0.7);
        border-style: solid;
        z-index: 10;
    }
    .frame::before  { top: -1px; left: -1px;   border-width: 2px 0 0 2px; }
    .frame::after   { top: -1px; right: -1px;  border-width: 2px 2px 0 0; }
    .frame-corner-bl::before { bottom: -1px; left: -1px;  border-width: 0 0 2px 2px; }
    .frame-corner-br::before { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

    /* Мигающий dot-индикатор top-right — статус "live". */
    .frame-dot {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--color-accent-blue);
        z-index: 11;
        animation: dotBlink 2.4s ease-in-out infinite;
    }
    @keyframes dotBlink {
        0%, 100% { opacity: 0.2; }
        50%      { opacity: 1; box-shadow: 0 0 6px var(--color-accent-blue); }
    }

    .hero__window { z-index: 5; }

    /* Полароиды на нижней зоне фото — у краёв viewport (W1 — слева,
       W4 — справа) и по центру внизу (W3 на каплях). Каждый показывает
       свой готовый кроп-PNG (img1/img2/img3). */
    .hero__window--1 {
        top: calc(var(--nav-height) + 12px + var(--hero-img-h) * 0.70);
        left: 0;
        right: auto;
        width: 88px;
        --rotate: -4deg;
        background: url("../images/img1.webp") no-repeat center / cover;
    }
    .hero__window--3 {
        top: calc(var(--nav-height) + 12px + var(--hero-img-h) * 0.93);
        left: 41%;
        right: auto;
        width: 70px;
        --rotate: 3deg;
        background: url("../images/img2.webp") no-repeat center / cover;
    }
    .hero__window--4 {
        top: calc(var(--nav-height) + 12px + var(--hero-img-h) * 0.61);
        right: 0;
        left: auto;
        width: 80px;
        --rotate: 5deg;
        background: url("../images/img3.webp") no-repeat center / cover;
    }
    .hero__window--2,
    .hero__window--5 { display: none; }

    .hero__tagline {
        top: calc(var(--nav-height) + 8px);
        font-size: 10px;
        letter-spacing: 0.2em;
    }

    /* Описание в нормальном потоке ниже видео.
       margin-top достаточно большой, чтобы нижний полароид (W3,
       заходящий за видео) не наезжал на текст. */
    .hero__description {
        position: static;
        inset: auto;
        transform: none;
        width: auto;
        max-width: min(88%, 360px);
        margin: 72px auto 0;
        padding: 0 16px;
        text-align: center;
        font-size: 14px;
    }
    .hero__description p {
        border-right: none;
        padding-right: 0;
    }

    /* --- ABOUT mobile ---
       Композиция: текст → кнопки (ANNA слева, IRA справа) →
       портреты (Anna слева, Ira справа, СПИНОЙ друг к другу).
       Pixel-замер PNG показал: Anna (левая фигура PNG) смотрит
       ВЛЕВО, Ira (правая) — ВПРАВО. То есть в исходной PNG они
       УЖЕ back-to-back. Просто берём их в естественных позициях
       без SWAP и без flip. */
    .about-section {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "label  label"
            "name   name"
            "desc   desc"
            "btns   btns"
            "anna   ira";
        column-gap: 0;
        row-gap: 24px;
        padding: 40px 0 0;
        min-height: auto;
    }

    /* Горизонтальный padding только на текстовых элементах,
       чтобы портреты могли уйти к самым краям viewport. */
    .about-sublabel,
    .about-names,
    .about-description {
        padding-left: 24px;
        padding-right: 24px;
    }

    /* Скрываем оригинальную PNG-композицию и блюр-надпись. */
    .about-girls { display: none; }
    .about-blur-title { display: none; }

    /* about-content "растворяется" — её дети становятся прямыми
       grid-items секции. */
    .about-content {
        display: contents;
    }

    .about-sublabel  { grid-area: label; text-align: center; }
    .about-names     { grid-area: name;  text-align: center; font-size: 38px; }
    .about-description {
        grid-area: desc;
        text-align: center;
        max-width: 100%;
        margin: 0 auto;
        font-size: 15px;
    }

    /* Кнопки в свой ряд, ANNA слева, IRA справа (HTML-порядок). */
    .about-instagram {
        grid-area: btns;
        flex-direction: row;
        justify-self: center;
        flex-wrap: nowrap;
        gap: 12px;
    }

    /* Anna и Irina — псевдо-элементы с PNG. Без SWAP и без flip:
       в исходной PNG они смотрят НАРУЖУ друг от друга.
       background-size: auto 130% — зум на 30% относительно высоты
       пседо-элемента → меньше пустого фона по бокам фигур, фигуры
       визуально крупнее и ближе к центру (где находятся кнопки). */
    .about-section::before,
    .about-section::after {
        content: "";
        display: block;
        width: 100%;
        aspect-ratio: 3 / 4;
        background-image: url("../images/about-bg1.webp");
        background-repeat: no-repeat;
        background-size: auto 130%;
        align-self: center;
    }
    .about-section::before {
        grid-area: anna;
        background-position: 0% top;          /* Anna (левая фигура) — смотрит влево */
    }
    .about-section::after {
        grid-area: ira;
        background-position: 100% top;        /* Irina (правая фигура) — смотрит вправо */
    }

    /* --- AUDIENCE mobile ---
       Фраза и коллаж заменены на pain-text + мини-коллажи.
       padding-bottom: 0 — следующий блок (PROGRAM) идёт вплотную,
       его фоновый "КУРС" может визуально наезжать на низ audience. */
    .audience {
        padding: 0;
    }

    .audience-russian-title {
        font-size: clamp(40px, 11vw, 80px);
        top: clamp(60px, 16vw, 120px);
    }

    /* Фразу "мы создаём культуру через нейросети" на мобиле скрываем —
       FOR WHOM-заголовок и сразу ниже коллаж карточек. */
    .audience-phrase { display: none; }

    /* Коллаж: вертикальный стек, асимметрия по ширине и aspect.
       margin-top убран — раньше он компенсировал высоту старой
       PNG "FOR WHOM"; теперь .section-header сам в потоке и
       отступы определяются его padding'ом. */
    .audience-collage {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 64px;
        padding: 0 24px 80px;
        margin-top: 0;
    }
    .collage-col {
        width: 100% !important;
        margin: 0 !important;
        gap: 18px;
        align-items: stretch !important;
    }
    .collage-col--3 { order: 0; }   /* сбрасываем старый order: -1 */

    .collage-col--1 .collage-photo {
        width: 80%;
        margin-left: auto;
        margin-right: 0;
        aspect-ratio: 4 / 5;
    }
    .collage-col--1 .collage-text { text-align: left; width: 100%; }

    .collage-col--2 .collage-photo {
        width: 70%;
        margin-left: 0;
        margin-right: auto;
        aspect-ratio: 1 / 1;
    }
    .collage-col--2 .collage-text { text-align: right; width: 100%; }

    .collage-col--3 .collage-photo {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        aspect-ratio: 3 / 4;
    }

    .collage-col--4 .collage-photo {
        width: 75%;
        margin-left: auto;
        margin-right: 0;
        aspect-ratio: 4 / 5;
    }
    .collage-col--4 .collage-text { text-align: left; width: 100%; }

    .collage-col--5 .collage-photo {
        width: 85%;
        margin-left: 0;
        margin-right: auto;
        aspect-ratio: 1 / 1;
    }

    .collage-text {
        font-size: 15px;
        line-height: 1.5;
    }

    /* PRICING mobile: 1 колонка, "ПОПУЛЯРНЫЙ" наверху */
    .pricing-grid {
        grid-template-columns: 1fr;
        padding: 0 24px;
    }
    .pricing-card--featured {
        order: -1;
    }
    .pricing-russian-title {
        font-size: clamp(40px, 12vw, 80px);
    }

    /* FAQ mobile: компактнее grid вопроса, меньше шрифт ответа */
    .faq-list {
        padding: 0 24px;
    }
    .faq-question {
        gap: 16px;
        padding: 24px 0;
    }
    .faq-number {
        min-width: 30px;
        font-size: 16px;
    }
    .faq-text {
        font-size: 16px;
    }
    .faq-answer {
        padding: 0 0 24px 46px;     /* 30 номер + 16 gap */
    }
    .faq-answer p {
        font-size: 14px;
    }
    .faq-russian-title {
        font-size: clamp(40px, 12vw, 80px);
    }

    /* ============================================================
       PROGRAM mobile — простой flex-column раскладка
       Прошлая weaving-раскладка с absolute + aspect-ratio на детях
       ломалась на iOS Safari (модули рендерились как пустые блоки).
       Здесь — обычный поток: main-фото на всю ширину, small-фото
       со сдвигом по чётности, текст ниже. Все .module-img имеют
       страховочный min-height и background-color, чтобы рендериться
       даже когда <img> битый. Никаких absolute с % высотой и
       aspect-ratio на детях. */

    .program-modules {
        padding: 0 24px;
        gap: 80px;
    }

    /* Сброс desktop-grid для модулей — flex-column. */
    .program-module,
    .program-module--1,
    .program-module--2,
    .program-module--3,
    .program-module--4,
    .program-module--5,
    .program-module--6 {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        gap: 16px !important;
        position: relative;
    }

    /* Контейнер фото: flex-column, без absolute + aspect-ratio. */
    .program-module .module-images {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        position: static !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: auto !important;
        order: 0 !important;
        grid-column: auto !important;
        grid-row: auto !important;
        align-items: stretch !important;
    }

    /* Каждое фото — обычный блок с min-height (страховка от битого <img>).
       background-color дублирует gradient .module-img — даже если CSS-
       gradient не парсится, виден тёмный фон. */
    .program-module .module-img {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding-left: 0 !important;
        align-self: auto !important;
        grid-column: auto !important;
        grid-row: auto !important;
        border: none !important;
        background-color: #1A1D26;
        min-height: 220px;
    }

    /* Главное фото — на всю ширину. */
    .program-module .module-img--main {
        aspect-ratio: 4 / 3 !important;
    }

    /* Дополнительное фото — 70% ширины, прижимается к краю по чётности. */
    .program-module .module-img--secondary {
        width: 70% !important;
        aspect-ratio: 1 / 1 !important;
    }
    .program-module:nth-child(odd) .module-img--secondary {
        margin-left: auto !important;
        margin-right: 0 !important;
    }
    .program-module:nth-child(even) .module-img--secondary {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    /* Контент модуля — обычный блок ниже фото. */
    .program-module .module-content {
        position: static !important;
        width: 100% !important;
        margin: 0 !important;
        padding-left: 0 !important;
        align-self: auto !important;
        order: 1 !important;
        grid-column: auto !important;
        grid-row: auto !important;
        border: none !important;
        text-align: left !important;
    }

    /* Декоративный M XX в нормальном потоке над фото, не absolute. */
    .module-number {
        position: static !important;
        z-index: auto;
        margin: 0 !important;
        transform: none !important;
        font-size: clamp(40px, 12vw, 72px) !important;
        line-height: 1;
        text-align: left !important;
        pointer-events: none;
        order: -1 !important;
    }
    .program-module:nth-child(even) .module-number {
        text-align: right !important;
    }

    .module-title {
        font-size: 26px;
    }
    .program-russian-title {
        font-size: clamp(40px, 12vw, 80px);
    }

    /* WORKS mobile: 2-колоночный CSS grid с асимметричной brick-сеткой.
       Перекрывает flex-наследие из @media (max-width: 1024px) выше:
         - display:grid вместо flex,
         - переменные аспект-ратио (tall / square / wide) циклом,
         - сдвиг 24px у двух карточек левой колонки (DOM #3 и #7) для
           "кирпичной" асимметрии (среди карточек левой колонки —
           1,3,5,7,9 — это 2-я и 4-я по счёту).
       Амплитуды анимации сжимаем — на маленьком экране качание
       должно быть заметно тише. Длительности и delay не трогаем,
       так что фазовая разсинхрония сохраняется. */
    .works-collage {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        align-items: start;        /* карты не растягиваются по строке */
        aspect-ratio: auto;
        position: static;
    }
    .work-cell {
        position: static;
        flex: none;                /* отключаем flex-настройки от ≤1024 */
        width: auto;
        height: auto;
        min-width: 0;
    }
    /* Сбрасываем абсолютные координаты от desktop-раскладки */
    .work-cell:nth-child(n) { left: auto; top: auto; width: auto; height: auto; }

    /* Распределение пропорций. В двухколоночной сетке DOM-порядок
       раскладывается как:
            row1: #1 #2
            row2: #3 #4
            row3: #5 #6
            row4: #7 #8
            row5: #9
       Цикл tall/square/wide на 3n+1 / 3n+2 / 3n даёт:
            #1 tall, #2 square, #3 wide,
            #4 tall, #5 square, #6 wide,
            #7 tall, #8 square, #9 wide
       — у каждой карты соседи (горизонтальные и вертикальные)
       другой пропорции. */
    .work-cell:nth-child(3n+1) { aspect-ratio: 3 / 4; }   /* tall   */
    .work-cell:nth-child(3n+2) { aspect-ratio: 1 / 1; }   /* square */
    .work-cell:nth-child(3n)   { aspect-ratio: 4 / 3; }   /* wide   */

    /* Brick offset: 2-я и 4-я карты в левой колонке сдвигаются вниз
       на 24px, ломая горизонтальное выравнивание со столбцом справа. */
    .work-cell:nth-child(3),
    .work-cell:nth-child(7) { margin-top: 24px; }

    /* Сжатые амплитуды анимации для mobile живут в animations.css,
       рядом с desktop-наборами — иначе specificity-война с
       animations.css ломала бы override (одинаковая специфичность,
       а animations.css грузится после). */

    #works { padding: 50px 20px; }

    /* --- НАВИГАЦИЯ mobile ---
       Меню закрыто: полностью выше viewport (top:0 + translateY(-100%)).
       Меню открыто: выезжает вниз ровно на nav-height.
       Старая схема (top: nav-height + translateY(-120%)) подвешивала
       нижнюю кромку меню в видимой области при коротком списке —
       давала непрозрачную плашку поверх лого. */
    .nav__menu {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 32px clamp(20px, 6vw, 48px) 40px;
        background: rgba(26, 29, 38, 0.92);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        transform: translateY(-100%);
        transition: transform 0.35s ease;
    }

    .nav__menu.is-open {
        transform: translateY(var(--nav-height));
    }

    .nav__link {
        text-align: center;
        justify-content: center;
        font-size: 12px;
    }

    .nav__burger {
        display: flex;
    }

    .nav__burger.is-open span:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
    }
    .nav__burger.is-open span:nth-child(2) {
        opacity: 0;
    }
    .nav__burger.is-open span:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg);
    }
}

/* Совсем узкие экраны — заголовок ужимаем чтобы не вылетал */
@media (max-width: 480px) {
    .hero__title {
        font-size: clamp(48px, 14vw, 80px);
        letter-spacing: 0.02em;
    }
}


/* ============================================================
   16. BG-CANVAS — фон с движущимися "орбами" (перенесено из aiculture_v6)
   Многослойный тёмный фон: шум (2 SVG-слоя), виньетка, горизонтальные
   микро-линии, и 4 анимированных radial-gradient'а (синие "орбы"),
   позиции которых плавно дрейфуют через JS-обновление CSS-переменных.
   ============================================================ */

.bg-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #06080e;
    pointer-events: none;
}

.bg-canvas::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 45% at var(--ox1, 25%) var(--oy1, 30%),
            rgba(35, 75, 190, 0.38) 0%,
            rgba(18, 45, 130, 0.15) 45%,
            transparent 68%),
        radial-gradient(ellipse 48% 40% at var(--ox2, 75%) var(--oy2, 65%),
            rgba(22, 50, 160, 0.32) 0%,
            rgba(12, 30, 110, 0.12) 48%,
            transparent 68%),
        radial-gradient(ellipse 38% 32% at var(--ox3, 50%) var(--oy3, 85%),
            rgba(40, 80, 200, 0.25) 0%,
            transparent 62%),
        radial-gradient(ellipse 42% 36% at var(--ox4, 15%) var(--oy4, 70%),
            rgba(28, 60, 170, 0.2) 0%,
            transparent 60%);
    transition: background 0.1s linear;
}

.bg-noise-fine {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
    background-size: 300px 300px;
    opacity: 0.055;
    pointer-events: none;
    mix-blend-mode: screen;
}

.bg-noise-coarse {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='noise2'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.35' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23noise2)' opacity='1'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    opacity: 0.028;
    pointer-events: none;
    mix-blend-mode: overlay;
}

.bg-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 100% 100% at 50% 50%,
            transparent 30%,
            rgba(5, 6, 10, 0.6) 75%,
            rgba(4, 5, 8, 0.9) 100%);
    pointer-events: none;
}

.bg-lines {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(255, 255, 255, 0.008) 3px,
        rgba(255, 255, 255, 0.008) 4px);
    pointer-events: none;
}


/* ============================================================
   17. HERO TEXT BLOCK (перенесено из aiculture_v6)
   eyebrow → headline (с em-акцентом) → vertical line → sub → brand.
   Шрифты: Oswald display + Montserrat body.
   ============================================================ */

.hero-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 6px;
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-accent-blue);
    margin: 0 0 14px;
    opacity: 0.85;
}
.hero-eyebrow::before,
.hero-eyebrow::after {
    content: '';
    width: 20px;
    height: 1px;
    background: var(--color-accent-blue);
    opacity: 0.4;
}

.hero-headline {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(26px, 6vw, 40px);
    font-weight: 300;
    line-height: 1.18;
    color: var(--color-white);
    margin: 0 0 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.hero-headline em {
    font-style: normal;
    color: var(--color-accent-blue);
}

.hero-sub {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(13px, 3vw, 15px);
    font-weight: 300;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 14px;
    letter-spacing: 0.02em;
}

.hero-brand {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(14px, 3.5vw, 18px);
    font-weight: 400;
    color: var(--color-accent-blue);
    letter-spacing: 0.06em;
    margin: 0;
}


/* ============================================================
   18. TICKER — бегущая строка с инструментами (перенесено из aiculture_v6)
   ============================================================ */

.ticker {
    overflow: hidden;
    /* Голубая полоса сверху — отделяет от hero */
    border-top: 1px solid rgba(79, 127, 232, 0.35);
    /* Прозрачный фон — bg-canvas с орбами просвечивает */
    background: transparent;
    padding: 0.75rem 0;
    position: relative;
    z-index: 1;
}

.ticker-track {
    display: flex;
    gap: 0;
    width: max-content;
    animation: tickerScroll 22s linear infinite;
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 2rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
}

.ticker-dot {
    color: rgba(79, 127, 232, 0.7);
    font-size: 0.5rem;
}

@keyframes tickerScroll {
    0%   { transform: translateX(0); }
    /* -33.333% соответствует ширине 1 сета из 3 (10 элементов).
       После одного цикла трек visually идентичен начальному
       состоянию, поэтому loop бесшовный на любой ширине viewport. */
    100% { transform: translateX(-33.333%); }
}

@media (prefers-reduced-motion: reduce) {
    .ticker-track { animation: none; }
}


/* ============================================================
   19. ABOUT — новый "Создатели AI CULTURE" блок (без портретов)
   Eyebrow + имена + текст + 2 instagram-кнопки с blue-gradient
   и pulse-анимацией.
   ============================================================ */

.about {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Горизонтальный padding убран — портреты идут edge-to-edge.
       Текст/кнопки получают свой padding через .about-eyebrow и т.д. */
    padding: 3.5rem 0 0;
    /* position+z-index выводят секцию НАД bg-canvas (z-index 0 fixed). */
    position: relative;
    z-index: 1;
    /* Светлый фон чтобы тёмный текст (.about-eyebrow #0d0d0d, names и
       text тоже #0d0d0d) был читаем — bg-canvas дарк перекрывался. */
    background: #FFFFFF;
}

/* Текст-блоки получают единый горизонтальный отступ — так же,
   как в исходнике about_white.html. */
.about-eyebrow,
.about-names,
.about-text,
.about-buttons {
    padding-left: 1.8rem;
    padding-right: 1.8rem;
}

.about-eyebrow {
    font-family: 'SSFBreakthrough', sans-serif;
    font-size: 0.55rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.45);
    margin-bottom: 1.8rem;
}

.about-names {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(2.2rem, 8.5vw, 3.6rem);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0d0d0d;
    margin-bottom: 1.8rem;
    /* Перебиваем opacity:0 + scale(0.95) от старого reveal-правила
       (.about-section .about-names в @media prefers-reduced-motion). */
    opacity: 1;
    transform: none;
}

.about-text {
    font-family: 'SSFBreakthrough-Regular', 'Manrope', sans-serif;
    font-size: clamp(0.82rem, 3vw, 0.92rem);
    font-weight: 400;
    line-height: 1.75;
    color: #0d0d0d;
    letter-spacing: 0.01em;
    max-width: 46ch;
    margin-bottom: 2rem;
}

.about-buttons {
    display: flex;
    gap: 3.2rem;
    margin-bottom: 1.2rem;
}

.btn-instagram {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: 'Oswald', sans-serif;
    font-size: 0.68rem;
    font-weight: 300;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #ffffff;
    border: 1px solid rgba(79, 127, 232, 0.15);
    border-radius: 999px;
    padding: 0.8rem 1.8rem;
    text-decoration: none;
    background: linear-gradient(135deg, #0d0d0d 0%, #1a2a4a 50%, #2a3f6f 100%);
    box-shadow: 0 2px 12px rgba(79, 127, 232, 0.18);
    transition: all 0.25s ease;
    cursor: pointer;
    animation: btnPulse 2.8s ease-in-out infinite;
}

.btn-instagram:hover {
    background: linear-gradient(135deg, #162040 0%, #1e3260 50%, #3355aa 100%);
    border-color: rgba(79, 127, 232, 0.6);
    box-shadow: 0 4px 20px rgba(79, 127, 232, 0.3);
    animation: none;
}

.btn-instagram svg {
    flex-shrink: 0;
}

@keyframes btnPulse {
    0%, 100% {
        box-shadow: 0 2px 12px rgba(79, 127, 232, 0.18),
                    0 0 0 0 rgba(79, 127, 232, 0.0);
    }
    50% {
        box-shadow: 0 2px 18px rgba(79, 127, 232, 0.28),
                    0 0 0 5px rgba(79, 127, 232, 0.08);
    }
}

/* Портреты Anna + Irina под кнопками.
   Каждая девушка — отдельный JPEG (about-anna.jpg / about-irina.jpg),
   как в исходнике about_white.html. Расположены в 2-колоночном grid. */
.about-portraits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2.4rem;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0;
}

.about-portrait-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.about-portrait {
    width: 100%;
    aspect-ratio: 2 / 4;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.about-portrait--anna  { background-image: url("../images/about-anna.webp"); }
.about-portrait--irina { background-image: url("../images/about-irina.webp"); }

.about-portrait-name {
    font-family: 'Oswald', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #0d0d0d;
    margin: 0;
}


/* ============================================================
   COUNTDOWN OVERLAY — тёмный экран обратного отсчёта поверх сайта.
   Виден до target-даты, скрывается плавно когда таймер истекает.
   Если страница открыта ПОСЛЕ target-даты — html.countdown-done
   (выставляется inline-скриптом в <head>) полностью скрывает overlay.
   ============================================================ */
.countdown-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #060d1f;
    color: #fff;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.6s ease;
    font-family: 'Manrope', sans-serif;
}

/* Анимированные blob-фоны (как у pricing) */
.countdown-overlay__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.countdown-overlay__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.5;
}
.countdown-overlay__blob--1 {
    width: 420px;
    height: 420px;
    background: #1e3fc2;
    top: -120px;
    left: -80px;
    animation: blob1 11s ease-in-out infinite;
}
.countdown-overlay__blob--2 {
    width: 360px;
    height: 360px;
    background: #2d57e8;
    bottom: -100px;
    right: -80px;
    animation: blob2 14s ease-in-out infinite;
}
.countdown-overlay__blob--3 {
    width: 300px;
    height: 300px;
    background: #0a1a5c;
    top: 40%;
    left: 30%;
    animation: blob3 17s ease-in-out infinite;
}

/* Центральный блок: title + timer + date */
.countdown-overlay__inner {
    position: relative;
    z-index: 1;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    padding: 2rem 1.2rem;
    text-align: center;
}

.countdown-overlay__eyebrow {
    font-family: 'Manrope', sans-serif;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(79, 127, 232, 0.8);
    margin: 0;
}

.countdown-overlay__title {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(2rem, 7vw, 3.6rem);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
}

/* Таймер: 4 ячейки разделены ":" */
.countdown-overlay__timer {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(0.4rem, 2vw, 1.4rem);
    margin: 0.6rem 0;
}

.cd-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: clamp(60px, 13vw, 110px);
}

.cd-cell__num {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(2.6rem, 11vw, 5.5rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.cd-cell__label {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(0.5rem, 1.8vw, 0.7rem);
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 0.5rem;
}

.cd-sep {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(2.4rem, 10vw, 5rem);
    font-weight: 300;
    line-height: 1;
    color: rgba(79, 127, 232, 0.5);
    margin-top: -0.2rem;
}

.countdown-overlay__date {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(0.9rem, 2.4vw, 1.2rem);
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* JS добавляет .is-hiding — fade-out + ignore clicks */
.countdown-overlay.is-hiding {
    opacity: 0;
    pointer-events: none;
}

/* Inline-скрипт в <head> выставляет .countdown-done если время вышло */
html.countdown-done .countdown-overlay {
    display: none;
}

/* Блокировка прокрутки body пока overlay активен */
body.countdown-locked {
    overflow: hidden;
    height: 100vh;
}


/* ============================================================
   FOOTER-LEGAL — две кнопки правовых документов внизу страницы
   ============================================================ */
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    padding: 0.3rem 1.6rem 2rem;
    background: #ffffff;
    text-align: center;
    position: relative;
    z-index: 5;
}

/* Модификатор btn-legal для кнопок правовых документов:
   немного крупнее текст и доп. свойства поверх .btn-instagram. */
.btn-legal {
    font-size: 0.62rem;
    z-index: 5;
}


/* ============================================================
   DESKTOP ADAPTATION (min-width: 768px)
   Полноценная desktop-раскладка: 2-колонные блоки, более крупная
   типографика, side-by-side тарифы. Все мобильные стили (<768px)
   полностью нетронуты — этот блок применяется только на desktop.
   ============================================================ */
@media (min-width: 768px) {

    /* CSS-переменная для центрирования контента на десктопе.
       Padding на каждой стороне = max(2rem, 50% - half_content_width).
       На viewport 1280: padding = max(2rem, 640-480) = 160px → content 960px.
       Секции остаются full-width, фон тянется до краёв. */
    :root {
        --desk-pad: max(2rem, calc(50% - 480px));
    }

    /* ---------- NAV ----------
       Увеличиваем горизонтальный padding, чтобы лого/бургер
       стояли подальше от краёв. */
    .nav__inner {
        padding-left: 4vw;
        padding-right: 4vw;
    }

    /* ---------- HERO ----------
       Полная ширина viewport. Title крупнее под широкий экран. */
    .hero__title {
        font-size: clamp(8rem, 18vw, 22rem);
    }
    .hero__tagline {
        font-size: 1rem;
    }

    /* ---------- ABOUT — 3-колонная grid: Anna | content | Irina ----------
       padding-bottom: 0 — фото упираются в низ секции; align-items: center
       для текста, align-self: end на портретах — девушки опускаются вниз,
       следующий блок (audience) начинается сразу. */
    .about {
        max-width: none;
        display: grid;
        grid-template-columns: minmax(180px, 1fr) minmax(0, 1.6fr) minmax(180px, 1fr);
        grid-template-areas:
            "anna  eyebrow  irina"
            "anna  names    irina"
            "anna  text     irina"
            "anna  buttons  irina";
        column-gap: 3rem;
        row-gap: 0.6rem;
        text-align: center;
        padding-top: 4rem;
        padding-bottom: 0;
        padding-left: var(--desk-pad);
        padding-right: var(--desk-pad);
        align-items: center;
    }
    .about-eyebrow,
    .about-names,
    .about-text,
    .about-buttons {
        padding-left: 0;
        padding-right: 0;
    }
    .about-eyebrow  { grid-area: eyebrow; align-self: end; }
    .about-names    { grid-area: names; font-size: clamp(2.6rem, 4vw, 4rem); }
    .about-text     { grid-area: text; max-width: 38ch; margin-left: auto; margin-right: auto; }
    .about-buttons  { grid-area: buttons; justify-content: center; align-self: start; }

    /* Портреты — display: contents у обёртки, чтобы дети попали
       прямо в сетку .about. На мобильной .about-portraits остаётся
       grid-2-col (правило в общем CSS вне media-query — не трогаем). */
    .about-portraits {
        display: contents;
    }
    .about-portrait {
        width: 100%;
        aspect-ratio: 2 / 4;
        align-self: end;     /* фото опускаются к низу секции */
        margin-top: 0;
    }
    .about-portrait--anna  { grid-area: anna; }
    .about-portrait--irina { grid-area: irina; }

    /* ---------- AUDIENCE — 2-колонная сетка pain-text ↔ фото
       (full-width section, контент по центру через padding).
       padding-top: 0 — секция идёт сразу под фото из about.
       padding-bottom: 0 — следующая секция (program) идёт впритык. */
    .audience {
        max-width: none;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 4rem;
        row-gap: 3rem;
        align-items: center;
        padding-left: var(--desk-pad);
        padding-right: var(--desk-pad);
        padding-top: 0;
        padding-bottom: 0;
    }
    /* Дети audience по DOM-порядку:
         1: .section-header (full-width row 1)
         2: .pain-text          → col 1, row 2
         3: .audience-collage-mini → col 2, row 2
         4: .pain-text          → col 2, row 3 (зеркало)
         5: .audience-collage-mini → col 1, row 3
         6: .pain-text          → col 1, row 4
         7: .audience-photo-solo → col 2, row 4 */
    .audience > .section-header {
        grid-column: 1 / -1;
        max-width: none;
    }
    .audience > :nth-child(2) {
        grid-column: 1; grid-row: 2;
        max-width: none;
        padding: 0;
    }
    .audience > :nth-child(3) {
        grid-column: 2; grid-row: 2;
        max-width: none;
        padding: 0;
        margin-left: 0;
        width: 100%;
    }
    .audience > :nth-child(4) {
        grid-column: 2; grid-row: 3;
        max-width: none;
        padding: 0;
    }
    .audience > :nth-child(5) {
        grid-column: 1; grid-row: 3;
        max-width: none;
        padding: 0;
        margin-left: 0;
        width: 100%;
    }
    .audience > :nth-child(6) {
        grid-column: 1; grid-row: 4;
        max-width: none;
        padding: 0;
    }
    .audience > :nth-child(7) {
        grid-column: 2; grid-row: 4;
        max-width: none;
        width: 100%;
        margin-left: 0;
    }
    .pain-text__title { font-size: clamp(1.2rem, 1.8vw, 1.5rem); }
    .pain-text__body { font-size: clamp(0.85rem, 1vw, 1rem); }

    /* ---------- PROGRAM — full-width section, 2-col grid модулей ----------
       Структура .modules-list (12 children):
         1: card 01      → col 1, row 1
         2: img-standalone → col 2, row 1
         3: card 02      → col 2, row 2 (зеркало)
         4: module-photos → col 1, row 2
         5: card 03      → col 1, row 3
         6: module-photos → col 2, row 3
         7: card 04      → col 2, row 4 (зеркало)
         8: img-standalone → col 1, row 4
         9: card 05      → col 1, row 5
        10: module-photos (videos) → col 2, row 5
        11: card--bonus  → col 1/-1, row 6 (full width)
        12: bonus-materials → col 1/-1, row 7 (full width) */
    #program {
        padding-left: var(--desk-pad);
        padding-right: var(--desk-pad);
    }
    #program > .section-header {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
    .modules-list {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 4rem;
        row-gap: 3rem;
        align-items: center;
    }
    /* Назначение grid-cells по чёт./нечёт. парам */
    .modules-list > :nth-child(1)  { grid-column: 1; grid-row: 1; }
    .modules-list > :nth-child(2)  { grid-column: 2; grid-row: 1; }
    .modules-list > :nth-child(3)  { grid-column: 2; grid-row: 2; }
    .modules-list > :nth-child(4)  { grid-column: 1; grid-row: 2; }
    .modules-list > :nth-child(5)  { grid-column: 1; grid-row: 3; }
    .modules-list > :nth-child(6)  { grid-column: 2; grid-row: 3; }
    .modules-list > :nth-child(7)  { grid-column: 2; grid-row: 4; }
    .modules-list > :nth-child(8)  { grid-column: 1; grid-row: 4; }
    .modules-list > :nth-child(9)  { grid-column: 1; grid-row: 5; }
    .modules-list > :nth-child(10) { grid-column: 2; grid-row: 5; }
    /* Бонусный модуль (компактная карточка) + бонусные материалы
       стоят рядом в одной строке: 11 → col 1, 12 → col 2. */
    .modules-list > :nth-child(11) {
        grid-column: 1; grid-row: 6;
        margin-top: 1rem;
        align-self: stretch;
    }
    .modules-list > :nth-child(12) {
        grid-column: 2; grid-row: 6;
        margin-top: 1rem;
        align-self: stretch;
        padding-top: 0;       /* убираем mobile padding-top: 1.4rem 0 */
    }

    .pain-text { padding-left: 0; padding-right: 0; }
    .module-card__title { font-size: clamp(1.2rem, 1.7vw, 1.5rem); }
    .module-card__text  { font-size: clamp(0.95rem, 1.1vw, 1.1rem); }
    .bonus-materials__title { font-size: 1.3rem; }
    .bonus-materials__list li { font-size: 1rem; }

    /* Bleed-картинки на десктопе теряют viewport-bleed
       (т.к. ограничены grid cell). Просто заполняют свою ячейку. */
    .module-photo-standalone--bleed-right,
    .module-photo-standalone--bleed-left {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
    .module-photo-standalone {
        max-width: none;
    }
    .module-photos {
        max-width: none;
    }

    /* ---------- PRICING — full-width dark bg + тарифы SIDE-BY-SIDE ---------- */
    .pricing {
        padding-left: var(--desk-pad);
        padding-right: var(--desk-pad);
    }
    .pricing > .section-header,
    .pricing > .contact-block,
    .pricing > .reviews-section {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
    .pricing-wrap {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        flex-direction: row;
        align-items: stretch;
        gap: 2rem;
        padding-left: 0;
        padding-right: 0;
    }
    .plan {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        padding: 2rem 1.8rem;
    }
    /* Чтобы и зазор "ДОСТУП → кнопка" был одинаковым, И кнопки
       стояли на одной высоте — пушим блок ДОСТУП к низу карточки
       через margin-top: auto. Кнопка ниже — с фиксированным
       отступом 1.4rem. У обеих карточек access прижимается ко дну,
       и кнопки оказываются на одинаковой Y-позиции. */
    .plan__access { margin-top: auto; }
    .plan__btn { margin-top: 1.4rem; }
    .plan__name      { font-size: 3.6rem; }
    .plan__price-new { font-size: 3.4rem; }
    .contact-block { margin-left: 0; margin-right: 0; }
    .rcard { width: 340px; }

    /* ---------- FAQ — full-width white bg, accordion centered ---------- */
    .faq {
        padding-left: var(--desk-pad);
        padding-right: var(--desk-pad);
    }
    .faq > .section-header,
    .faq-list {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
    /* Заголовок FAQ — увеличенный horizontal padding (4.5rem = 72px),
       чтобы "Часто/задаваемые вопросы" зрительно выравнивалось
       с текстами вопросов под ним (которые сдвинуты grid-cells
       номера 40px + gap 32px). */
    .faq .section-header {
        padding-left: 4.5rem;
        padding-right: 4.5rem;
    }
    .faq-question { font-size: 1.05rem; }
    .faq-answer p { font-size: 1rem; }
}


/* ============================================================
   ULTRA-WIDE (min-width: 1280px) — расширяем content area
   ============================================================ */
@media (min-width: 1280px) {
    :root { --desk-pad: max(2rem, calc(50% - 560px)); }  /* контент 1120px */
    .audience { column-gap: 5rem; row-gap: 4rem; }
    .about { column-gap: 5rem; }
}

/* ============================================================
   3K WIDE (min-width: 1600px) — ещё шире
   ============================================================ */
@media (min-width: 1600px) {
    :root { --desk-pad: max(2rem, calc(50% - 640px)); }  /* контент 1280px */
}