/* ============================================================================
   Главная витрины — первый экран, слайдер возможностей и три входа.
   БОЕВОЙ файл с 10-09-26: он подключается на «/», а по `/?v2` открывается
   прежний вид (без этого файла) — путь отката, если что-то пойдёт не так.
   Имя home-v2.css оставлено намеренно: переименование файла ради красоты
   стоило бы правок в шаблоне и обнуления кеша у всех посетителей.

   Токены и компоненты берём из site.css (--g1…--g5, --radius, .btn, .chip):
   вариант обязан выглядеть как продолжение витрины, а не как чужая страница.
   ========================================================================== */

/* ---------- Первый экран: две двери и состав команды ---------- */

/* Строка «для работы / для дома». Ссылки светлые: экран тёмный (dark-band). */
.hero-fs__doors {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
    margin-top: 18px; font-size: 14.5px;
}
.hero-fs__doors a {
    color: hsl(0 0% 100% / .9); text-decoration: none;
    border-bottom: 1px solid hsl(0 0% 100% / .28); padding-bottom: 1px;
    transition: color .2s, border-color .2s;
}
.hero-fs__doors a:hover { color: #fff; border-color: var(--g4); }
.hero-fs__doors span { color: hsl(0 0% 100% / .35); }

/* Три исполнителя. Мелко и спокойно — это уточнение, а не обещание. */
.hero-fs__roles {
    /* 62ch ломало строку ровно посередине названия («Вайб / Стратег») — читается
       как опечатка. Даём ширину под всю фразу, перенос делает text-wrap: pretty. */
    /* ⚠️ Ширина в px, а НЕ в ch. Единица ch — это ширина символа «0» ТЕКУЩЕГО
       шрифта: 30ch у Unbounded = 1410 px, у запасного Arial = 1200 px. Пока
       фирменный шрифт ехал, строки переносились иначе, высота первого экрана
       отличалась на 131 px — и весь экран прыгал (CLS 0.28, #669). */
    margin-top: 12px; max-width: 900px; text-wrap: pretty;
    font-size: 13.5px; line-height: 1.55; color: hsl(0 0% 100% / .62);
}
.hero-fs__roles b { color: hsl(0 0% 100% / .88); font-weight: 600; }

@media (max-width: 640px) {
    /* На телефоне первый экран и так тесный: состав команды прячем, двери
       оставляем — они ведут людей, пришедших за бытовым помощником. */
    .hero-fs__roles { display: none; }
    .hero-fs__doors { margin-top: 14px; font-size: 13px; gap: 6px 10px; }
}

/* ---------- Второй экран: слайдер возможностей ---------- */

/* Ширина карточки — единственное, что отличает ленту от галереи генераций.
   Базовый .gallery-scroller не трогаем: его листает тот же initGallery(). */
/* Лента во всю ширину экрана. Внутри .container (min(1240px, 100% - 40px)) она
   упиралась в правую границу сетки, и обрез карточки читался как поломка вёрстки,
   а не как «листай дальше». Отрицательный правый margin растягивает ленту до края
   окна, padding справа не даёт последней карточке прилипнуть к нему.
   Левый край намеренно остаётся по сетке — лента должна начинаться под заголовком.
   scroll-padding — чтобы snap не прятал карточку под левый край при листании. */
.caps-scroller {
    grid-auto-columns: min(392px, 84vw);
    gap: 20px;
    align-items: start;
    margin-right: calc(50% - 50vw);
    padding-right: max(20px, calc(50vw - 50%));
    scroll-padding-left: 0;
    /* ⚠️ Снап здесь ослаблен до proximity намеренно. `x mandatory` (он приходит
       из базового .gallery-scroller) заставляет браузер ДОВОДИТЬ ленту до
       ближайшей карточки после каждого жеста — и вертикальная прокрутка над
       лентой начинает «залипать»: колесо и трекпад отдают диагональ, снап её
       перехватывает. proximity снапит только когда человек листает ленту.
       overscroll-behavior не даёт жесту уходить в прокрутку страницы и обратно. */
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
}

.cap-card {
    scroll-snap-align: start;
    /* content-visibility здесь пробовали и убрали: карточки стали лёгкими (webp 560 px
       вместо png 768), а отложенная растеризация сама давала микро-рывок в момент,
       когда карточка въезжает в кадр. */
    display: flex; flex-direction: column;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-card);
    overflow: hidden;
    /* box-shadow из перехода убран: пересчёт размытой тени 392×690 идёт на КАЖДОМ
       кадре, а курсор при вертикальной прокрутке проезжает по карточкам одну за
       другой — получается тот самый рывок. Двигаем только transform (слой GPU). */
    transition: transform .35s var(--ease-out), border-color .25s;
}
.cap-card:hover {
    transform: translateY(-3px);
    border-color: hsl(300 60% 60% / .35);
}

/* Арт-зона: стикер без фона лежит на фирменном градиентном пятне.
   Фиксированная высота — иначе карточки в ленте разной длины и заголовки
   не встают в одну линию (CLS до загрузки картинок тоже лечит она). */
.cap-card__art {
    position: relative; height: 208px; flex: none;
    display: grid; place-items: center;
    background:
        radial-gradient(120% 100% at 20% 0%, hsl(210 90% 96%), transparent 60%),
        radial-gradient(100% 100% at 85% 20%, hsl(300 80% 96%), transparent 62%),
        linear-gradient(160deg, hsl(45 90% 97%), hsl(250 40% 98%));
}
.cap-card__art::after {
    /* мягкая «сцена» под стикером, чтобы он не висел в пустоте */
    content: ''; position: absolute; left: 50%; bottom: 18px; translate: -50% 0;
    width: 62%; height: 16px; border-radius: 50%;
    background: radial-gradient(closest-side, hsl(260 40% 40% / .16), transparent);
}
.cap-card__art img {
    position: relative; z-index: 1;
    max-width: 78%; max-height: 168px; width: auto; height: auto;
    object-fit: contain;
    /* filter: drop-shadow здесь стоял на картинке 768 px в 14 экземплярах и
       пересчитывался при каждом сдвиге слоя. Объём стикеру и так дают белая
       обводка и «сцена» .cap-card__art::after под ним. */
}

.cap-card__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 24px; flex: 1; }

.cap-card__tag {
    align-self: flex-start;
    font: 700 10.5px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase;
    color: var(--g2); background: hsl(300 70% 96%);
    padding: 6px 10px; border-radius: 7px;
}
.cap-card h3 { font-size: 19px; line-height: 1.25; }
.cap-card__text { font-size: 14.5px; line-height: 1.55; color: var(--fg-soft); }

.cap-card__list { display: grid; gap: 7px; margin-top: 2px; }
.cap-card__list li {
    position: relative; padding-left: 22px;
    font-size: 13.5px; line-height: 1.45; color: var(--fg-soft);
}
.cap-card__list li::before {
    content: ''; position: absolute; left: 0; top: 3px;
    width: 15px; height: 15px; border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat,
        linear-gradient(135deg, var(--g1), var(--g2));
}

.cap-card__link {
    margin-top: 4px; padding-top: 12px;
    display: inline-flex; align-items: center; gap: 7px;
    font: 600 14.5px var(--font-body); color: var(--g2); text-decoration: none;
}
.cap-card__link svg { transition: transform .25s var(--ease-out); }
.cap-card:hover .cap-card__link svg { transform: translateX(3px); }

/* Акцентная карточка (Вайб Про) — тёмная: старший продукт обязан читаться
   как другая ступень, а не как двенадцатая одинаковая плитка. */
.cap-card--accent { background: linear-gradient(165deg, #171622, #241a33); border-color: hsl(0 0% 100% / .12); }
.cap-card--accent .cap-card__art {
    background:
        radial-gradient(120% 100% at 20% 0%, hsl(280 60% 30% / .55), transparent 62%),
        radial-gradient(100% 100% at 85% 15%, hsl(210 80% 40% / .4), transparent 60%),
        linear-gradient(160deg, #1d1a2b, #2a1c3d);
}
.cap-card--accent h3 { color: var(--dark-fg); }
.cap-card--accent .cap-card__text, .cap-card--accent .cap-card__list li { color: hsl(250 14% 76%); }
.cap-card--accent .cap-card__tag { color: #fff; background: hsl(0 0% 100% / .12); }
.cap-card--accent .cap-card__link { color: var(--g4); }

/* Нижняя панель: на узком экране кнопка и стрелки не помещаются в строку. */
@media (max-width: 640px) {
    .caps-scroller { grid-auto-columns: min(340px, 86vw); gap: 14px; }
    .cap-card__art { height: 178px; }
    .cap-card__art img { max-height: 142px; }
    .cap-card__body { padding: 18px 18px 20px; }
    .cap-card h3 { font-size: 17.5px; }
    .caps .gallery-nav { flex-direction: column; align-items: stretch; gap: 14px; }
    .caps .gallery-nav .btn { width: 100%; }
    .caps .gallery-nav__arrows { justify-content: center; }
}

/* ---------- Масштаб первого экрана v2 ----------
   Замер до правки (Playwright): на 1440×900 экран героя занимал 1067 px при окне 900 —
   «двери» (895–921) и строка исполнителей (933–995) не видел НИКТО, а на 1280×720 за
   краем оставались и факты. Причина складывалась из трёх: заголовок в 6rem разваливался
   на три строки (392 px), лид на четыре (173 px) и щедрые отступы между блоками.
   Правим только вариант v2 — боевой герой с его двумя короткими строками не трогаем. */
.hero-fs--v2 h1 { font-size: clamp(1.9rem, 3.8vw, 3.2rem); max-width: min(1180px, 100%); }
.hero-fs--v2 .hero-fs__sub { max-width: 660px; margin-top: 14px; font-size: clamp(15px, 1.1vw, 17px); }
.hero-fs--v2 .hero-fs__cta { margin-top: 22px; }
.hero-fs--v2 .hero-fs__meta { margin-top: 16px; }
.hero-fs--v2 .hero-fs__doors { margin-top: 12px; }
.hero-fs--v2 .hero-fs__roles { margin-top: 8px; }

/* Низкий экран (ноутбук 1280×720, окно с открытой консолью): состав команды —
   уточнение, а не обещание, и уходит первым. Порог по ВЫСОТЕ ОКНА, а не по ширине:
   тот же 1440-й ноутбук с высотой 720 страдал ровно так же, как узкий экран (#632). */
@media (max-height: 780px) {
    .hero-fs--v2 .hero-fs__roles { display: none; }
    .hero-fs--v2 .hero-fs__sub { font-size: 15px; }
    .hero-fs--v2 .hero-fs__cta { margin-top: 18px; }
}

@media (max-width: 640px) {
    /* Вторая строка H1 длиннее прежней («ИИ-агент для рекламы, продаж и контента»),
       и на телефоне она добавляла экрану 100 px — строка с двумя входами уезжала
       за край. Мерено на 390×844: низ последнего блока обязан быть ≤ высоты окна. */
    .hero-fs--v2 h1 { font-size: clamp(1.6rem, 7.2vw, 2.2rem); max-width: 100%; }
    .hero-fs--v2 .hero-fs__sub { font-size: 14.5px; }
}

/* ---------- Три двери: кому какой агент ---------- */
.doors-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.door {
    display: flex; flex-direction: column; gap: 12px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-card);
    padding: 28px 26px 26px;
    transition: transform .35s var(--ease-out), box-shadow .35s, border-color .25s;
}
.door:hover { transform: translateY(-3px); border-color: hsl(300 60% 60% / .3); box-shadow: 0 30px 60px -30px hsl(280 45% 20% / .4); }

.door__price { font: 700 27px/1 var(--font-display); letter-spacing: -.02em; }
.door__price small { font: 500 13.5px var(--font-body); color: var(--muted); letter-spacing: 0; }
.door h3 { font-size: 20px; line-height: 1.2; }
.door__lead { font-size: 14.5px; line-height: 1.55; color: var(--fg-soft); }

.door__list { display: grid; gap: 8px; margin: 2px 0 4px; }
.door__list li {
    position: relative; padding-left: 22px;
    font-size: 13.5px; line-height: 1.45; color: var(--fg-soft);
}
.door__list li::before {
    content: ''; position: absolute; left: 0; top: 3px;
    width: 15px; height: 15px; border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat,
        linear-gradient(135deg, var(--g1), var(--g2));
}
.door .btn { margin-top: auto; align-self: flex-start; }
.door__note { font-size: 12.5px; color: var(--muted); }

/* Старшая ступень — тёмная карточка: цена в 15 000 ₽ рядом с двумя нулями
   обязана читаться как другой уровень, а не как «дорогой тариф того же». */
.door--pro { background: linear-gradient(165deg, #171622, #241a33); border-color: hsl(0 0% 100% / .12); }
.door--pro h3 { color: var(--dark-fg); }
.door--pro .door__price { color: #fff; }
.door--pro .door__price small, .door--pro .door__note { color: hsl(250 14% 68%); }
.door--pro .door__lead, .door--pro .door__list li { color: hsl(250 14% 76%); }

@media (max-width: 1100px) { .doors-grid { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; } }
@media (max-width: 640px) { .door { padding: 22px 20px; } .door .btn { width: 100%; } }

/* Вторая половина перечисления в лиде: на телефоне первый экран без неё
   укладывается в окно, а с ней строка «две двери» уезжала за нижний край
   (998 px против 844). Список возможностей человек всё равно видит ниже
   — в слайдере карточек, поэтому здесь это сокращение, а не потеря. */
@media (max-width: 640px) {
    .hero-fs__sub-more { display: none; }
}

/* ---------- Дорогие эффекты, которые рвут прокрутку на Retina ----------
   Отключены ТОЛЬКО в варианте v2 — чтобы можно было сравнить его с боевой главной
   на той же машине и в том же браузере.

   1. Полноэкранная плёнка-шум (`body::after`, z-index 9998, mix-blend-mode: overlay).
      Слой с blend-режимом во весь вьюпорт запрещает композитору кэшировать страницу
      одним слоем: каждый кадр прокрутки он смешивает всё заново. На 2x-экране это
      вчетверо больше пикселей, поэтому на маке заметно, а на обычном мониторе нет.
   2. Пятна-градиенты фона размыты на 90 px и занимают полэкрана каждое. Пока они
      двигались параллаксом, слой пересобирался; сам blur остаётся, но статичный
      слой композитор кэширует. `will-change: transform` снимаем — он держит три
      огромных слоя в памяти видеокарты без нужды. */
body::after { display: none; }
.bg-blobs i { will-change: auto; }

/* ---------- CLS первого экрана: разбор 10-09-26, лечение отложено ----------
   Замер: CLS главной 0.28 (у прежней версии 0.1, у /agents 0.01). Причина найдена
   и подтверждена: в ПЕРВОМ кадре страница рисуется до применения site.css, блок
   первого экрана там 727 px против финальных 596, а поскольку контент прижат к НИЗУ
   секции (`align-items: flex-end`), эта разница двигает весь экран на 131 px.
   Что проверено и отвергнуто:
     · font-display: optional — сдвиг остаётся, а фирменный шрифт теряется;
     · size-adjust-фолбэки — метрики теперь совпадают до пикселя (это оставлено,
       см. fonts.css), но первопричину не лечат;
     · критический CSS первого экрана инлайном — даёт ТРЕТЬЮ раскладку (640 px)
       и требует ручной синхронизации с site.css: разъедется молча;
     · резерв высоты (`min-height` у .hero-fs__inner) — убирает сдвиг блока, но на
       экране 1280×720 раздувает первый экран до 850 px, и нижние строки уезжают.
   Честное лечение — перевести первый экран с «прижать к низу» на раскладку, где
   верх зафиксирован; это меняет вид страницы, поэтому делается по слову владельца. */