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


/* ---------- 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-white:       #FFFFFF;

    /* Шрифты */
    --font-display: 'Italiana', serif;       /* AI CULTURE в hero */
    --font-blur:    'Bebas Neue', sans-serif; /* блюр-заголовки секций */
    --font-ui:      'Manrope', sans-serif;    /* навигация, капсулы, мелкий UI */
    --font-body:    'Inter', 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 {
    display: inline-flex;
    align-items: center;
}
.nav__logo img {
    display: block;
    height: 22px;
    width: auto;
    /* Лого визуально выглядит обрезанным сверху из-за плотного
       bbox после кропа — сдвигаем его на 4px вниз. */
    margin-top: 4px;
}

/* --- Меню из капсул --- */
.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.png");
    --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;
    min-height: 100vh;
    padding-top: var(--nav-height);
    padding-block: 0;
    overflow: hidden;
    isolation: isolate;
    color: var(--color-white);
    background-color: var(--color-bg-dark);  /* deep fallback */
}

/* --- Фоновое видео и изображение портрета ---
   Десктоп: играет .hero-video на всю секцию, .hero-image скрыт.
   Мобила (см. @media ниже): .hero-video скрыт, .hero-image выходит
   в нормальный поток с натуральной пропорцией PNG.
   pointer-events: none — клики уходят к содержимому выше (нав, кнопки). */
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
    pointer-events: none;
}

/* На десктопе .hero-image скрыт — на мобиле он подменяет видео. */
.hero-image {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
    pointer-events: none;
}

/* --- Тёмный градиент-overlay поверх видео ---
   Лежит между видео (z=0) и окошками (z=5),
   чуть сильнее снизу — чтобы заголовок и описание оставались читаемыми. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
        rgba(26, 29, 38, 0.15) 0%,
        rgba(26, 29, 38, 0.35) 100%);
    pointer-events: none;
}

/* --- Окошки-фрагменты --- */
.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-display);
    font-weight: 400;
    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;
}

/* --- Контейнер двух заголовков ---
   Сделан 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: 'Archivo Black', Impact, 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;
    /* min-height: auto — секция занимает столько, сколько нужно
       контенту (3 карточки + блюр-заголовок). 100vh здесь создавал
       тёмную пустоту снизу, когда контент короче высоты viewport. */
    min-height: auto;
    padding: 0 0 120px;
    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: 'Archivo Black', Impact, 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);
}


/* --- 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: 'Archivo Black', Impact, 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: var(--color-text-muted);
}

.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: var(--color-text);
    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;
    padding: 0 0 120px;
}

/* --- Контейнер заголовка (общий паттерн с 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: 'Archivo Black', Impact, 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: 'Archivo Black', Impact, sans-serif;
    font-weight: 400;
    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;
}


/* --- 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.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%)
       → описание → AI CULTURE. Полароиды (3 из 5) лежат НА верхней
       тёмной зоне фото (небо + макушка/волосы), не пересекая лицо.
       W2 — губы, W5 — куртка скрыты. */
    .hero {
        min-height: auto;
        padding: var(--nav-height) 0 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Тёмный градиент-overlay не нужен — текст уже не лежит на фото. */
    .hero::before { display: none; }

    /* Видео выходит из абсолюта в нормальный поток с фиксированной
       портретной пропорцией 9:16. Само видео 16:9 — object-fit: cover
       кропит его боковые края, показывает центральный вертикальный
       стрип (лицо модели в центре).
       poster=hero-bg-mobile.png — фолбэк если автоплей запретят. */
    .hero-video {
        display: block;
        position: relative;
        inset: auto;
        top: auto;
        left: auto;
        width: min(86%, 420px);
        height: auto;
        aspect-ratio: 9 / 16;
        object-fit: cover;
        margin: 0 auto;
        z-index: 1;
    }

    /* 3 видимых полароида.
       Размещены НА верхней тёмной зоне фото (небо + волосы, ~5–18%
       высоты картинки), не задевая лицо. Контейнер .hero__windows
       остаётся position: absolute (inset:0), поэтому top: calc(...)
       считается от верха секции; чтобы попасть на фото с padding-top
       равным var(--nav-height), сдвиги добавляют +40…+70px.
       z-index выше .hero-image (1) — полароиды поверх. */
    .hero__window {
        z-index: 5;
    }
    /* Полароиды лежат на НИЖНЕЙ зоне фото — на торсе/плечах модели
       и на каплях колье, в притык к краям viewport (W1 — у левого,
       W4 — у правого) или по центру внизу (W3 на каплях).
       Левый/правый прижаты к left:0 / right:0, поэтому 7% photo-margin
       они частично перекрывают как тёмный фон hero, так и сам портрет —
       "одно целое с hero-bg". .hero уже имеет overflow:hidden,
       так что горизонтального скролла не будет. */
    .hero__window--1 {
        top: 480px;
        left: 0;
        right: auto;
        width: 88px;
        --rotate: -4deg;
    }
    .hero__window--3 {
        top: 608px;
        left: 41%;
        right: auto;
        width: 70px;
        --rotate: 3deg;
    }
    .hero__window--4 {
        top: 430px;
        right: 0;
        left: auto;
        width: 80px;
        --rotate: 5deg;
    }
    .hero__window--2,
    .hero__window--5 { display: none; }

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

    /* Описание и AI CULTURE — нормальный поток ниже портрета.
       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;
    }

    .hero__title {
        position: static;
        inset: auto;
        transform: none;
        margin: 32px auto 0;
        font-size: clamp(48px, 13vw, 76px);
        letter-spacing: 0.02em;
    }

    /* --- ABOUT mobile ---
       Композиция: Anna (верх) → текст-блок → Ira (низ).
       Один файл images/about-girls.png разрезан CSS-ом через
       background-size: auto 100% + разные background-position.
       В оригинальной PNG: Anna ≈ 22% по горизонтали, Ira ≈ 75%. */
    .about-section {
        display: grid;
        grid-template-rows: auto auto auto;
        gap: 36px;
        padding: 80px 24px 80px;
        min-height: auto;
    }

    /* Скрываем оригинальную PNG-композицию — вместо неё рисуем
       два псевдо-блока с тем же файлом, но разной позицией. */
    .about-girls { display: none; }

    /* Anna и Ira — псевдо-элементы с одной общей PNG.
       background-size: auto 100% сохраняет натуральный аспект PNG;
       выбираем нужную фигуру через background-position. */
    .about-section::before,
    .about-section::after {
        content: "";
        display: block;
        width: 90%;
        margin: 0 auto;
        aspect-ratio: 3 / 4;
        background-image: url("../images/about-girls.png");
        background-repeat: no-repeat;
        background-size: auto 100%;
    }
    .about-section::before {
        grid-row: 1;
        background-position: 0% center;       /* Anna (левая фигура) */
    }
    .about-section::after {
        grid-row: 3;
        background-position: 93% center;      /* Ira (правая фигура) */
    }

    /* Контент-блок — в средней строке между Anna и Ira. */
    .about-content {
        grid-row: 2;
        padding: 0;
        max-width: 100%;
    }

    /* Блюр-надпись на мобиле скрываем — она absolute, упирается
       в первый ряд grid'а и тяжёлая по перформансу. */
    .about-blur-title { display: none; }

    .about-names {
        font-size: 38px;
    }

    .about-description {
        max-width: 100%;
        padding: 0;
        font-size: 15px;
    }

    .about-instagram {
        gap: 12px;
    }

    /* --- AUDIENCE mobile ---
       Фраза: каждое слово на своей строке с разным align/size — это
       editorial-ритм вместо скучной строки.
       Коллаж: вертикальный стек из 5 карточек, каждая со своей
       шириной/aspect-ratio — асимметрия как в fashion-журнале. */
    .audience {
        padding: 0 0 80px;
    }

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

    /* Фраза: column-flex, каждое слово отдельной строкой. */
    .audience-phrase {
        display: flex;
        flex-direction: column;
        gap: 12px;
        height: auto;
        padding: 32px 32px 8px;
        margin: clamp(380px, 44vw, 720px) 0 24px;
    }
    .phrase-word {
        position: static;
        display: block;
        transform: none;
        margin: 0;
        white-space: normal;
    }
    .phrase-word--1, .phrase-word--2,
    .phrase-word--3, .phrase-word--4,
    .phrase-word--5 { left: auto; }

    .phrase-word--1 { align-self: flex-start; font-size: 18px; }
    .phrase-word--2 { align-self: flex-end;   font-size: 28px; }
    .phrase-word--3 { align-self: center;     font-size: 32px; }
    .phrase-word--4 { align-self: flex-start; font-size: 18px; }
    .phrase-word--5 { align-self: flex-end;   font-size: 24px; }

    /* Перебиваем reveal — translateX(-50%) на мобиле не нужен. */
    .audience.is-visible .phrase-word { transform: none; }

    /* Коллаж: вертикальный стек, асимметрия по ширине и aspect.
       col-3 и col-5 в HTML без текста — у них только фото. */
    .audience-collage {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 64px;
        padding: 0 24px 80px;
    }
    .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 — weaving-раскладка с асимметрией
       Большая (.module-img--main): 85% ширины, аспект 4/5
       Маленькая (.module-img--secondary): 57% ширины, аспект 1/1
       Маленькая наезжает на большую с вертикальным overlap 18%.
       Чётные модули зеркалируют нечётные на 180°: main top-left
       + small bottom-right → main bottom-right + small top-left.
       Декоративный M XX стоит за фото и уходит за край viewport.
       ============================================================ */

    /* ВНЕШНИЙ КАРКАС: одна колонка, gap 90px между модулями */
    .program-modules {
        padding: 0 24px;
        gap: 90px;
    }
    .program-module,
    .program-module--1,
    .program-module--2,
    .program-module--3,
    .program-module--4,
    .program-module--5 {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 24px !important;
    }
    .program-module .module-content,
    .program-module .module-images {
        grid-column: 1 !important;
        order: initial !important;
    }

    /* КОНТЕЙНЕР ФОТО: relative + aspect-ratio чтобы вместить
       main (1.0625 × cw) + small (0.575 × cw) с overlap 18%
       (≈ 1.44 × cw). Берём 1/1.45 с запасом. */
    .program-module .module-images {
        display: block !important;
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1.45;
    }

    /* СБРОС старых правил позиционирования фото (от desktop-модулей
       и от прошлого мобильного override). Размеры — снова процентные. */
    .program-module .module-img--main,
    .program-module .module-img--secondary {
        position: absolute !important;
        grid-column: auto !important;
        grid-row: auto !important;
        margin: 0 !important;
        padding-left: 0 !important;
        align-self: auto !important;
        border: none !important;
        height: auto !important;
    }
    .program-module .module-img--main {
        width: 85% !important;
        aspect-ratio: 4 / 5 !important;
    }
    .program-module .module-img--secondary {
        width: 57% !important;
        aspect-ratio: 1 / 1 !important;
    }

    /* Плетёнка по чётности модуля */
    .program-module:nth-child(odd)  .module-img--main      { top: 0;    left: 0;    right: auto; bottom: auto; }
    .program-module:nth-child(odd)  .module-img--secondary { top: auto; left: auto; right: 0;    bottom: 0;    }

    .program-module:nth-child(even) .module-img--main      { top: auto; left: auto; right: 0;    bottom: 0;    }
    .program-module:nth-child(even) .module-img--secondary { top: 0;    left: 0;    right: auto; bottom: auto; }

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

    /* ДЕКОР M XX: ~60% от desktop, частично за краем viewport,
       за фото (z-index 1). Сторона выезда меняется по чётности
       модуля — нечётный за правым краем, чётный за левым. */
    .module-number {
        position: absolute !important;
        z-index: 1;
        top: -8px !important;
        margin: 0;
        transform: none !important;
        font-size: clamp(48px, 14vw, 88px) !important;
        line-height: 1;
        text-align: left !important;
        pointer-events: none;
    }
    .program-module:nth-child(odd)  .module-number {
        right: -16px !important;
        left: auto !important;
        text-align: right !important;
    }
    .program-module:nth-child(even) .module-number {
        left: -16px !important;
        right: auto !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 --- */
    .nav__menu {
        position: fixed;
        top: var(--nav-height);
        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(-120%);
        transition: transform 0.35s ease;
    }

    .nav__menu.is-open {
        transform: translateY(0);
    }

    .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;
    }
}