/* Главная — стилевой слой нового дизайна (хендофф v3, экран 4a), 14.09.2026.
 *
 * Подключается только на главной через @push('head'), откат — удаление одной строки.
 * Скоуп: section.hero4[data-v3] — атрибут на самом узле (на этом уже спотыкались).
 * app.css не трогаем: секции .facts4/.gallery4/.manifest4/.flow4 совпадают с макетом
 * один в один, там править нечего.
 *
 * Чего здесь нет намеренно:
 *  - осветления скрима: семь стопов держат контраст заголовка на светлом кадре;
 *  - touch-action: none с макета — на телефоне он съедает вертикальный скролл;
 *  - возврата слайдера к макетному шву 58%: у нас 42%, «стало» видно сразу.
 */

section.hero4[data-v3] {
    --h3-ease: cubic-bezier(.22, .61, .36, 1);
    --h3-ink: #F6EFE4;
}

/* Три бейджа вместо прежней брови: первое, что человек читает над заголовком */
section.hero4[data-v3] .h3-badges {
    display: flex; gap: 8px; flex-wrap: wrap;
    animation: h3Rise .5s var(--h3-ease) both;
}

section.hero4[data-v3] .h3-badge {
    font: 500 13px/1.2 var(--font-body);
    color: var(--h3-ink);
    background: rgba(38, 31, 25, .55);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: 1px solid rgba(246, 239, 228, .22);
    border-radius: 999px;
    padding: 8px 13px;
}

section.hero4[data-v3] h1 {
    font: 400 72px/1 var(--font-display);
    letter-spacing: -.04em;
    max-width: 900px;
    text-wrap: pretty;
    animation: h3Rise .5s var(--h3-ease) .1s both;
}

section.hero4[data-v3] .hero4-text p {
    font: 400 17px/1.5 var(--font-body);
    max-width: 520px;
    animation: h3Rise .5s var(--h3-ease) .2s both;
}

section.hero4[data-v3] .hero4-actions { animation: h3Rise .5s var(--h3-ease) .28s both; }

/* Строка доверия: числа моно, как в макете; текст рядом обычным шрифтом */
section.hero4[data-v3] .h3-proof {
    display: block;
    font: 400 13px/1.5 var(--font-body);
    color: rgba(246, 239, 228, .74);
    text-align: right;
}

section.hero4[data-v3] .h3-proof b {
    font: 400 14px/1 var(--font-mono);
    letter-spacing: -.02em;
    font-weight: 400;
    color: var(--h3-ink);
}

/* В светлой теме низ героя светлый (скрим 09-06) — светлый текст там не читается */
html[data-theme="light"] section.hero4[data-v3] .h3-proof { color: var(--fg3); }
html[data-theme="light"] section.hero4[data-v3] .h3-proof b { color: var(--fg); }

@keyframes h3Rise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 1180px) {
    section.hero4[data-v3] h1 { font-size: 64px; }
}

@media (max-width: 900px) {
    section.hero4[data-v3] h1 { font-size: 52px; }
    section.hero4[data-v3] .h3-proof { text-align: left; }
}

@media (max-width: 640px) {
    /* Макетный заголовок длиннее прежнего: на 375 он в шесть строк и вместе с абзацем,
       кнопками и бейджами не влезал в 716px героя — копия уезжала под шапку.
       Лечим кеглем и высотой героя, текст не режем: это обещание продукта. */
    section.hero4[data-v3] { height: auto; min-height: 640px; }
    /* copy в app.css позиционирован absolute с left/right 18px — переводя его в поток,
       эти отступы надо вернуть padding-ом, иначе текст уходит за правый край. */
    section.hero4[data-v3] .hero4-copy {
        position: relative; left: auto; right: auto; bottom: auto;
        padding: 88px 18px 26px;
    }
    section.hero4[data-v3] h1 { font-size: 32px; line-height: 1.06; letter-spacing: -.03em; }
    section.hero4[data-v3] .hero4-text p { font-size: 15px; }
    section.hero4[data-v3] .h3-badge { font-size: 12px; padding: 6px 10px; }
    /* Строка цифр на телефоне не нужна: ровно то же говорит нота с ценой ниже */
    section.hero4[data-v3] .h3-proof { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    section.hero4[data-v3] .h3-badges,
    section.hero4[data-v3] h1,
    section.hero4[data-v3] .hero4-text p,
    section.hero4[data-v3] .hero4-actions { animation: none; }
}