/* Главная: новая вёрстка блоков (.home-surface). Тексты не меняются — только композиция и оформление. */
/* Токены согласно .impeccable.md: OKLCH, тинт нейтралей к медовому оттенку, шкала 4pt. */

:root {
    --home-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --home-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --home-space-1: 0.25rem;
    --home-space-2: 0.5rem;
    --home-space-3: 0.75rem;
    --home-space-4: 1rem;
    --home-space-5: 1.25rem;
    --home-space-6: 1.5rem;
    --home-space-8: 2rem;
    --home-space-10: 2.5rem;
    --home-space-12: 3rem;
    --home-space-16: 4rem;
    --home-space-20: 5rem;
    --home-space-24: 6rem;
    /* Базовый оттенок бренда ~ медовый (deg ≈ 78) */
    --home-hue: 78;
    --home-chroma-surface: 0.018;
    --home-chroma-ink: 0.04;
    --home-surface-0: oklch(0.985 var(--home-chroma-surface) var(--home-hue));
    --home-surface-1: oklch(0.97 0.022 var(--home-hue));
    --home-ink: oklch(0.27 var(--home-chroma-ink) 48);
    --home-ink-soft: oklch(0.44 0.038 52);
    --home-muted: oklch(0.52 0.034 56);
    --home-line: oklch(0.9 0.028 var(--home-hue));
    --home-accent: oklch(0.76 0.11 var(--home-hue));
    --home-accent-mint: oklch(0.82 0.06 155);
    --home-border-12: color-mix(in oklch, var(--home-line) 14%, transparent);
    --home-border-20: color-mix(in oklch, var(--home-line) 28%, transparent);
    --home-border-30: color-mix(in oklch, var(--home-line) 38%, transparent);
    --home-border-45: color-mix(in oklch, var(--home-line) 52%, transparent);
    --home-shadow-sm: 0 8px 18px oklch(0.34 0.035 48 / 0.07);
    --home-shadow-md: 0 14px 30px oklch(0.32 0.04 48 / 0.1);
    --home-shadow-lg: 0 22px 50px oklch(0.33 0.04 48 / 0.13);
    --home-shadow-xl: 0 28px 56px oklch(0.34 0.035 48 / 0.12);
    --home-focus-ring: oklch(0.58 0.11 var(--home-hue) / 0.5);
}

:is(body.page-home, body.legal-page, body.articles-page, body.cabinet-page, body.admin-page) {
    --bg: var(--home-surface-0);
    --ink: var(--home-ink);
    --ink-soft: var(--home-ink-soft);
    --muted: var(--home-muted);
    --line: var(--home-line);
    --accent: var(--home-accent);
    --accent-2: var(--home-accent-mint);
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.6;
    background-color: var(--bg);
    background-image:
        radial-gradient(ellipse 100% 60% at 0% 0%, color-mix(in oklch, var(--home-accent) 38%, transparent), transparent 52%),
        radial-gradient(ellipse 80% 50% at 100% 10%, color-mix(in oklch, var(--home-accent-mint) 42%, transparent), transparent 48%),
        radial-gradient(oklch(0.65 0.04 var(--home-hue) / 0.09) 0.7px, transparent 0.7px);
    background-size: auto, auto, 14px 14px;
}

:is(body.page-home, body.legal-page, body.articles-page, body.cabinet-page, body.admin-page) .noise {
    display: block;
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.038;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}

:is(body.page-home, body.legal-page, body.articles-page, body.cabinet-page, body.admin-page) .ambient {
    display: block;
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

:is(body.page-home, body.legal-page, body.articles-page, body.cabinet-page, body.admin-page) .orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(76px);
    opacity: 0.38;
}

:is(body.page-home, body.legal-page, body.articles-page, body.cabinet-page, body.admin-page) .orb-a {
    width: min(52vw, 420px);
    height: min(52vw, 420px);
    top: -10%;
    right: -6%;
    background: radial-gradient(
        circle at 40% 35%,
        color-mix(in oklch, var(--home-accent) 88%, white),
        color-mix(in oklch, var(--home-accent) 22%, transparent)
    );
    animation: homeOrbA 24s var(--home-ease-in-out) infinite;
}

:is(body.page-home, body.legal-page, body.articles-page, body.cabinet-page, body.admin-page) .orb-b {
    width: min(42vw, 340px);
    height: min(42vw, 340px);
    bottom: 6%;
    left: -5%;
    background: radial-gradient(
        circle at 50% 50%,
        color-mix(in oklch, var(--home-accent-mint) 78%, white),
        color-mix(in oklch, var(--home-accent-mint) 15%, transparent)
    );
    animation: homeOrbB 28s var(--home-ease-in-out) infinite;
}

:is(body.page-home, body.legal-page, body.articles-page, body.cabinet-page, body.admin-page) .orb-c {
    width: min(34vw, 260px);
    height: min(34vw, 260px);
    top: 48%;
    left: 42%;
    background: radial-gradient(
        circle at 50% 50%,
        color-mix(in oklch, var(--home-accent) 45%, var(--home-surface-0)),
        color-mix(in oklch, var(--home-accent) 12%, transparent)
    );
    animation: homeOrbC 21s var(--home-ease-in-out) infinite;
}

@keyframes homeOrbA {
    0%,
    100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(-16px, 12px);
    }
}

@keyframes homeOrbB {
    0%,
    100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(18px, -14px);
    }
}

@keyframes homeOrbC {
    0%,
    100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(-10px, -16px);
    }
}

:is(body.page-home, body.legal-page, body.articles-page, body.cabinet-page, body.admin-page) :is(
        main.home-surface,
        main.seo-main,
        main.articles-main,
        main.cabinet-main,
        main.legal-main,
        main.admin-main
    ) {
    position: relative;
    z-index: 2;
}

/* Админка: модалки (.order-modal) лежат внутри main; z-index на main даёт контекст
   наложения — fixed-модалка не поднимается выше шапки (50) и полосы сообществ (70). */
body.admin-page main.admin-main {
    z-index: auto;
}

:is(body.page-home, body.legal-page, body.articles-page, body.cabinet-page, body.admin-page) .site-footer {
    position: relative;
    z-index: 2;
}

:is(body.page-home, body.legal-page, body.articles-page, body.cabinet-page, body.admin-page) .community-strip {
    background: color-mix(in oklch, var(--home-surface-1) 94%, transparent);
    /* Мягче стык с шапкой — без заметной «пилы» на 1px */
    border-bottom-color: color-mix(in oklch, var(--home-line) 28%, transparent);
}

:is(body.page-home, body.legal-page, body.articles-page, body.cabinet-page, body.admin-page) .site-header {
    background: color-mix(in oklch, var(--home-surface-0) 92%, transparent);
    /* Было ~50% линии — на фоне hero/градиента читалось как контрастный артефакт */
    border-bottom: 1px solid color-mix(in oklch, var(--home-line) 14%, transparent);
}

:is(body.page-home, body.legal-page, body.articles-page, body.cabinet-page, body.admin-page) .site-header.is-scrolled {
    background: color-mix(in oklch, var(--home-surface-0) 97%, transparent);
    border-bottom-color: color-mix(in oklch, var(--home-line) 10%, transparent);
    box-shadow: 0 10px 26px oklch(0.35 0.04 48 / 0.09);
}

/* --- Контейнер и полосы --- */
.home-surface .home-container {
    width: min(1280px, calc(100% - 2 * var(--home-space-10)));
    margin-left: auto;
    margin-right: auto;
}

.home-surface .home-container--wide {
    width: min(1320px, calc(100% - 2 * var(--home-space-8)));
}

/*
 * Отступ под фикс. полосу + шапку нельзя задавать padding-top на main: тогда под шапкой
 * виден фон body, а ниже — фон hero → контрастная «полоса». Отступ переносим в hero.
 */
body.page-home main.home-surface {
    padding-top: 0;
}

/*
 * Вертикальный ритм: раньше .home-surface > .section.home-band { padding: 0 } перебивал .home-surface .home-band
 * по специфичности — clamp не применялся. В styles.css отступы секций дублируются классами (.client-value, .media-lab…)
 * и id (#formats, #why) — это суммировалось или ломало ширину ритма. Ниже один стек отступов для главной.
 */
body.page-home .home-surface > .section.home-band:not(.home-band--hero) {
    position: relative;
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
    padding-top: clamp(var(--home-space-8), 5vw, var(--home-space-20));
    padding-bottom: clamp(var(--home-space-8), 5vw, var(--home-space-20));
}

body.page-home .home-surface > .section.home-band.home-band--hero {
    position: relative;
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
    padding-top: calc(var(--main-padding-top) + clamp(var(--home-space-12), 6vw, var(--home-space-16)));
    padding-bottom: clamp(var(--home-space-16), 8vw, 5.5rem);
}

/* id в styles.css сильнее классов — выравниваем с общим ритмом секций */
body.page-home #formats.home-band,
body.page-home #why.home-band,
body.page-home #media.home-band,
body.page-home #stats.home-band,
body.page-home #how.home-band,
body.page-home #apiary-location.home-band,
body.page-home #start.home-band,
body.page-home #faq.home-band,
body.page-home #home-articles.home-band,
body.page-home #contacts.home-band {
    padding-left: 0;
    padding-right: 0;
    padding-top: clamp(var(--home-space-8), 5vw, var(--home-space-20));
    padding-bottom: clamp(var(--home-space-8), 5vw, var(--home-space-20));
}

/* Стык «тарифы → подарки»: убираем лишний клей из styles.css (#formats + .gifting), отступ даёт соседняя секция */
body.page-home #formats + .gifting.home-band {
    padding-top: 0;
}

.home-surface .home-band + .home-band {
    border-top: 1px solid var(--home-border-12);
}

@media (max-width: 820px) {
    body.page-home .home-surface .home-container,
    body.page-home .home-surface .home-container--wide {
        width: 100%;
        max-width: 100%;
        padding-inline: var(--home-space-4);
        box-sizing: border-box;
    }
}

/* --- Hero --- */
.home-surface .home-band--hero {
    /* Верхний слой сглаживает стык с областью под фикс. шапкой (иначе видна «полоса» фона) */
    background:
        linear-gradient(
            to bottom,
            color-mix(in oklch, var(--home-surface-0) 70%, transparent) 0%,
            transparent 42%
        ),
        radial-gradient(
            ellipse 90% 70% at 15% 15%,
            color-mix(in oklch, var(--home-accent) 42%, transparent),
            transparent 55%
        );
}

.home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: end;
}

.home-hero__copy {
    padding-bottom: 0.5rem;
}

.home-eyebrow {
    display: inline-flex;
    margin: 0 0 1rem;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--home-border-45);
    background: linear-gradient(
        135deg,
        color-mix(in oklch, var(--home-surface-0) 96%, transparent),
        color-mix(in oklch, var(--home-accent) 32%, var(--home-surface-0))
    );
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.home-display {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 6vw, 3.85rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--ink);
}

.home-accent {
    position: relative;
    display: inline-block;
}

.home-accent::after {
    content: "";
    position: absolute;
    left: -3px;
    right: -3px;
    bottom: 0.08em;
    height: 0.38em;
    border-radius: 999px;
    background: linear-gradient(
        110deg,
        color-mix(in oklch, var(--home-accent) 58%, transparent),
        color-mix(in oklch, var(--home-accent) 38%, transparent)
    );
    z-index: -1;
}

.home-lead {
    margin: 1.1rem 0 0;
    font-size: clamp(1.05rem, 1.35vw, 1.22rem);
    font-weight: 600;
    line-height: 1.55;
    color: var(--ink);
    max-width: 58ch;
}

.home-body {
    margin: 0.85rem 0 0;
    font-size: 1.04rem;
    line-height: 1.62;
    color: var(--ink-soft);
    max-width: 58ch;
}

.home-emphasis {
    margin: 0.75rem 0 0;
    font-weight: 700;
    line-height: 1.55;
    color: var(--ink);
    max-width: 58ch;
}

.home-text-balance {
    text-wrap: balance;
}

.home-text-measure {
    max-width: 58ch;
}

.home-hero__actions {
    margin-top: 1.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.home-btn {
    transition:
        transform 0.16s var(--home-ease-out),
        box-shadow 0.2s var(--home-ease-out),
        background-color 0.2s var(--home-ease-out);
}

.home-btn--ghost {
    border-style: solid;
}

@media (hover: hover) and (pointer: fine) {
    .home-btn:hover {
        transform: translateY(-2px);
    }
}

.home-btn:active {
    transform: scale(0.97);
}

.home-btn:focus-visible {
    outline: 3px solid var(--home-focus-ring);
    outline-offset: 3px;
}

.home-hero__stage {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.home-hero__photoShell {
    position: relative;
}

.home-hero__photoFrame {
    position: relative;
    min-height: min(58vw, 520px);
    max-height: 640px;
    border-radius: 32px;
    overflow: hidden;
    border: 1px solid var(--home-border-30);
    background: linear-gradient(160deg, var(--home-surface-0), color-mix(in oklch, var(--home-accent) 28%, var(--home-surface-0)));
    box-shadow:
        var(--home-shadow-xl),
        inset 0 1px 0 color-mix(in oklch, white 65%, var(--home-surface-0));
}

.home-hero__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-hero__photoGlow {
    position: absolute;
    inset: -20%;
    background: radial-gradient(
        circle at 40% 30%,
        color-mix(in oklch, var(--home-accent) 38%, transparent),
        transparent 55%
    );
    pointer-events: none;
    z-index: -1;
}

.home-hero__chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.home-chip {
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: 18px;
    border: 1px solid var(--home-border-30);
    background: color-mix(in oklch, var(--home-surface-0) 94%, transparent);
    box-shadow: var(--home-shadow-sm);
    transition: transform 0.2s var(--home-ease-out), box-shadow 0.2s var(--home-ease-out);
}

.home-chip--accent {
    background: linear-gradient(
        145deg,
        color-mix(in oklch, var(--home-accent) 22%, var(--home-surface-0)),
        color-mix(in oklch, var(--home-accent) 38%, var(--home-surface-0))
    );
}

@media (hover: hover) and (pointer: fine) {
    .home-chip:hover {
        transform: translateY(-3px);
        box-shadow: var(--home-shadow-md);
    }
}

.home-chip__label {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.home-chip__title {
    margin: 0.25rem 0 0;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.2;
    color: var(--ink);
}

/* --- Marquee --- */
.home-marqueeBand {
    overflow: hidden;
    border-top: 1px solid var(--home-border-20);
    border-bottom: 1px solid var(--home-border-20);
    background: linear-gradient(
        90deg,
        color-mix(in oklch, var(--home-accent) 38%, var(--home-surface-0)),
        color-mix(in oklch, var(--home-accent) 22%, var(--home-surface-0)),
        color-mix(in oklch, var(--home-accent) 38%, var(--home-surface-0))
    );
    padding: var(--home-space-4) 0;
}

.home-marquee {
    display: flex;
    width: max-content;
    animation: homeMarquee 22s linear infinite;
    will-change: transform;
}

.home-marquee__track {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 0 0 auto;
    padding-right: 1.5rem;
    min-width: max-content;
}

.home-marquee__track span {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(0.9rem, 2vw, 1.25rem);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
}

.home-bee-ico {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.home-bee-ico g {
    fill: none;
    stroke: var(--ink-soft);
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@keyframes homeMarquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-25%);
    }
}

/* --- Заголовки секций внутри главной --- */
.home-surface .section-head h2,
.home-surface .why-heading,
.home-surface .panel h2,
.home-surface .calm-box h2,
.home-surface .cta-box h2,
.home-surface .apipuls-copy h2,
.home-surface .sensor-proof-copy h2 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -0.02em;
}

.home-surface .section-head {
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

/* --- Блок «что вы получаете»: коллаж слева, текст справа (порядок в DOM сохранён через areas) --- */
.home-surface .home-band--value .client-value-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    grid-template-areas:
        "fan kicker"
        "fan head"
        "fan lead"
        "list list"
        "note note";
    gap: clamp(0.75rem, 2vw, 1.25rem) clamp(1.25rem, 3vw, 2rem);
    align-items: start;
    padding: clamp(1.25rem, 2.5vw, 2rem);
    border-radius: 32px;
    border: 1px solid var(--home-border-20);
    background: linear-gradient(
        155deg,
        color-mix(in oklch, var(--home-surface-0) 98%, transparent),
        color-mix(in oklch, var(--home-accent) 18%, var(--home-surface-0))
    );
    box-shadow: 0 24px 48px oklch(0.33 0.04 48 / 0.09);
}

.home-surface .home-band--value .client-value-kicker {
    grid-area: kicker;
    margin: 0;
}

.home-surface .home-band--value .client-value-fan {
    grid-area: fan;
    margin: 0;
    align-self: stretch;
}

.home-surface .home-band--value .client-value-card > h2 {
    grid-area: head;
    margin: 0;
}

.home-surface .home-band--value .client-value-lead {
    grid-area: lead;
    margin: 0;
}

.home-surface .home-band--value .client-value-list {
    grid-area: list;
    margin: 0;
}

.home-surface .home-band--value .client-value-note {
    grid-area: note;
    margin: 0;
}

@media (max-width: 960px) {
    .home-surface .home-band--value .client-value-card {
        grid-template-columns: 1fr;
        grid-template-areas:
            "kicker"
            "fan"
            "head"
            "lead"
            "list"
            "note";
    }

    .home-surface .home-band--value .client-value-fan {
        min-height: 200px;
    }
}

/* --- Медиа-блок: видео + график --- */
.home-surface .home-band--media .media-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.85fr);
    gap: 1rem;
    align-items: stretch;
}

.home-surface .home-band--media .photo-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 1.25rem;
}

.home-surface .chart-gain-axis span {
    font-variant-numeric: tabular-nums;
}

.home-surface .home-band--media .stats-tail {
    margin-top: 1.5rem;
    max-width: 62ch;
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

@media (max-width: 820px) {
    .home-surface .home-band--media .media-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .home-surface .home-band--media .placeholder-video {
        display: none;
    }

    .home-surface .home-band--media .placeholder-chart {
        width: 100%;
        min-width: 0;
    }
}

/* --- Статистика: bento --- */
.home-surface .home-band--stats .stats-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.85rem;
}

.home-surface .home-band--stats .sensor-card {
    grid-column: span 2;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--home-border-20);
    background: color-mix(in oklch, var(--home-surface-0) 95%, transparent);
    transition: transform 0.22s var(--home-ease-out), box-shadow 0.22s var(--home-ease-out);
}

.home-surface .home-band--stats .sensor-card:nth-child(4) {
    grid-column: span 3;
}

.home-surface .home-band--stats .sensor-card:nth-child(5) {
    grid-column: span 3;
}

.home-surface .home-band--stats .stats-promo {
    grid-column: 1 / -1;
    border-radius: 26px;
    padding: 1.5rem 1.75rem;
    border: 1px dashed var(--home-border-45);
    background: linear-gradient(
        120deg,
        color-mix(in oklch, var(--home-accent) 12%, var(--home-surface-0)),
        color-mix(in oklch, var(--home-accent-mint) 18%, var(--home-surface-0))
    );
}

@media (max-width: 1080px) {
    .home-surface .home-band--stats .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-surface .home-band--stats .sensor-card,
    .home-surface .home-band--stats .sensor-card:nth-child(4) {
        grid-column: span 1;
    }

    /* «Видеонаблюдение» — на всю ширину ряда (две колонки сетки) */
    .home-surface .home-band--stats .sensor-card:nth-child(5) {
        grid-column: span 2;
    }

    .home-surface .home-band--stats .stats-promo {
        grid-column: 1 / -1;
    }
}

@media (hover: hover) and (pointer: fine) {
    .home-surface .home-band--stats .sensor-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 32px oklch(0.3 0.04 48 / 0.11);
    }
}

/* --- Зачем улей: заголовок на всю ширину; в ряду ниже — фото слева, справа карточки + подпись (верх карточек = верх фото) --- */
.home-surface .home-band--why .why-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.44fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: clamp(1.5rem, 3vw, 2.25rem);
    row-gap: clamp(0.85rem, 2vw, 1.35rem);
    align-items: start;
}

.home-surface .home-band--why .why-heading {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0;
    max-width: 20ch;
}

.home-surface .home-band--why .why-photo-col {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
}

.home-surface .home-band--why .why-benefits-col {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: clamp(0.35rem, 1vw, 0.55rem);
    align-items: stretch;
    min-width: 0;
    max-width: min(40rem, 100%);
}

/* Одна колонка карточек + вертикальная линия (.benefit-grid::before из styles.css) */
.home-surface .home-band--why .benefit-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
    align-content: start;
    max-width: 100%;
}

.home-surface .home-band--why .benefit-card {
    transition: transform 0.2s var(--home-ease-out), box-shadow 0.2s var(--home-ease-out);
}

.home-surface .home-band--why .benefit-card:nth-child(odd) {
    transform: none;
}

@media (hover: hover) and (pointer: fine) {
    .home-surface .home-band--why .benefit-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--home-shadow-sm);
    }
}

.home-surface .home-band--why .why-tail {
    margin-top: 0;
    max-width: 100%;
    font-size: 1.08rem;
    font-style: italic;
    color: var(--ink-soft);
}

@media (max-width: 900px) {
    .home-surface .home-band--why .why-layout {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        row-gap: clamp(1rem, 3vw, 1.5rem);
    }

    .home-surface .home-band--why .why-heading {
        grid-column: 1;
        grid-row: auto;
        max-width: none;
    }

    .home-surface .home-band--why .why-photo-col {
        grid-column: 1;
        grid-row: auto;
    }

    .home-surface .home-band--why .why-benefits-col {
        grid-column: 1;
        grid-row: auto;
        max-width: none;
        gap: clamp(0.5rem, 2vw, 0.85rem);
    }

    .home-surface .home-band--why .why-tail {
        max-width: 52ch;
    }
}

/* --- Как происходит: зигзаг таймлайна (в каждом li: номер + карточка) --- */
.home-surface .home-band--how .timeline {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.home-surface .home-band--how .timeline-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1.2rem;
    position: relative;
}

.home-surface .home-band--how .timeline-no {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    border: 1px solid var(--home-border-30);
    background: linear-gradient(
        145deg,
        color-mix(in oklch, var(--home-accent) 28%, var(--home-surface-0)),
        color-mix(in oklch, var(--home-surface-0) 96%, transparent)
    );
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ink);
    margin-top: 0.3rem;
}

.home-surface .home-band--how .timeline-card {
    flex: 1;
    min-width: 0;
    border-radius: 24px;
    padding: 0.9rem 1.15rem;
    border: 1px solid var(--home-border-20);
    background: color-mix(in oklch, var(--home-surface-0) 96%, transparent);
    display: grid;
    grid-template-columns: minmax(220px, 340px) minmax(170px, 250px) 1fr;
    align-items: center;
    gap: 0.85rem 1.25rem;
}

.home-surface .home-band--how .timeline-card h3 {
    margin: 0;
}

.home-surface .home-band--how .timeline-card p {
    margin: 0;
}

@media (max-width: 700px) {
    .home-surface .home-band--how .timeline-item,
    .home-surface .home-band--how .timeline-item:nth-child(even) {
        flex-direction: column;
    }

    .home-surface .home-band--how .timeline-card {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .home-surface .home-band--how .timeline-visual {
        width: 100%;
        height: 148px;
    }
}

/* --- Timeline: visual column (photos / format chip stack) --- */
.home-surface .home-band--how .timeline-visual {
    flex-shrink: 0;
    width: 100%;
    max-width: 340px;
    height: 132px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}

.home-surface .home-band--how .timeline-visual img {
    width: 100%;
    height: 100%;
    border-radius: 18px;
    object-fit: cover;
    box-shadow: 0 8px 24px oklch(0.31 0.04 48 / 0.18);
    display: block;
}

/* Gift/certificate PNG: transparent background, no card crop */
.home-surface .home-band--how .timeline-visual--gift img {
    height: 160px;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 6px 18px oklch(0.31 0.04 48 / 0.24));
}

/* Chart screenshot: UI look with subtle border */
.home-surface .home-band--how .timeline-visual--screen img {
    border-radius: 14px;
    border: 1px solid var(--home-border-20);
    object-position: center center;
}

/* Steps 02 & 04: two photos in a horizontal row */
.home-surface .home-band--how .timeline-visual--ownership,
.home-surface .home-band--how .timeline-visual--honey {
    flex-direction: row;
    gap: 8px;
    max-width: 340px;
    align-items: stretch;
}

.home-surface .home-band--how .tl-pair-img {
    flex: 1 1 0;
    min-width: 0;
    width: 0;
    height: 132px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 6px 16px oklch(0.31 0.04 48 / 0.18);
    display: block;
}

/* Step 01: stacked format mini-cards */
.home-surface .home-band--how .tl-fmt-stack {
    position: relative;
    width: 100px;
    height: 116px;
}

.home-surface .home-band--how .tl-fmt {
    position: absolute;
    padding: 10px 14px;
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    border: 1px solid rgba(174, 128, 78, 0.28);
    box-shadow: var(--card-shadow);
    white-space: nowrap;
}

.home-surface .home-band--how .tl-fmt--eighth {
    background: var(--blue);
    top: 0;
    left: 0;
    transform: rotate(-7deg);
    z-index: 1;
}

.home-surface .home-band--how .tl-fmt--half {
    background: var(--mint);
    top: 34px;
    left: 16px;
    transform: rotate(4deg);
    z-index: 2;
}

.home-surface .home-band--how .tl-fmt--full {
    background: #f7bd57;
    top: 70px;
    left: 8px;
    transform: rotate(-3deg);
    z-index: 3;
}

.home-surface .home-band--how .process-tail {
    margin-top: 2rem;
    max-width: 58ch;
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--ink);
}

/* Journey — сохраняем разметку, меняем оболочку */
.home-surface .home-band--how .journey {
    margin-top: 2.5rem;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--home-border-20);
}

.home-surface .home-band--how .journey-head h2 {
    font-family: var(--font-display);
}

/* --- Пасеки --- */
.home-surface .home-band--apiary .apiary-locator {
    gap: 1.5rem;
}

.home-surface .home-band--apiary .apiary-location-item {
    border-radius: 22px;
    transition: transform 0.2s var(--home-ease-out), box-shadow 0.2s var(--home-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .home-surface .home-band--apiary .apiary-location-item:hover {
        transform: translateY(-4px);
        box-shadow: var(--home-shadow-md);
    }
}

/* --- Тарифы: центральный акцент --- */
.home-surface .home-band--formats .format-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.home-surface .home-band--formats .format-card:nth-child(2) {
    transform: translateY(-8px);
    border-radius: 28px;
    border-width: 2px;
    box-shadow: var(--home-shadow-lg);
    z-index: 1;
}

@media (max-width: 1080px) {
    .home-surface .home-band--formats .format-grid {
        grid-template-columns: 1fr;
    }

    .home-surface .home-band--formats .format-card:nth-child(2) {
        transform: none;
    }
}

/* --- Подарки: две колонки + фото --- */
.home-surface .home-band--gift .gifting-photo {
    border-radius: 28px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: 0 20px 44px oklch(0.31 0.04 48 / 0.12);
}

.home-surface .home-band--gift .gifting-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 900px) {
    .home-surface .home-band--gift .gifting-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Спокойствие / Апипульс / датчики --- */
.home-surface .home-band--calm .calm-box,
.home-surface .home-band--apipuls .apipuls-box,
.home-surface .home-band--proof .sensor-proof-box {
    border-radius: 32px;
    border: 1px solid var(--home-border-20);
    background: color-mix(in oklch, var(--home-surface-0) 92%, transparent);
    padding: clamp(1.25rem, 3vw, 2rem);
}

.home-surface .home-band--bridge .sensor-bridge-photo img {
    border-radius: 28px;
}

/* --- Финальный CTA --- */
.home-surface .home-band--cta .cta-box {
    text-align: center;
    padding: clamp(2rem, 5vw, 3.5rem);
    border-radius: 36px;
    background:
        radial-gradient(
            ellipse 90% 80% at 50% 0%,
            color-mix(in oklch, var(--home-accent) 42%, transparent),
            transparent 55%
        ),
        linear-gradient(
            180deg,
            color-mix(in oklch, var(--home-surface-1) 95%, transparent),
            color-mix(in oklch, var(--home-accent) 22%, var(--home-surface-0))
        );
    border: 1px solid var(--home-border-30);
}

/* --- FAQ: одна колонка на всей ширине контейнера (как на мобильном), без отдельной «узкой» сетки --- */
.home-surface .home-band--faq .faq-list-wrap {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
    gap: 0.75rem;
    align-items: start;
    max-width: none;
    margin-inline: 0;
    width: 100%;
}

.home-surface .home-band--faq .faq-item {
    break-inside: avoid;
    margin-bottom: 0;
    border-radius: 18px;
    border: 1px solid var(--home-border-20);
    background: color-mix(in oklch, var(--home-surface-0) 93%, transparent);
}

/* --- Статьи и контакты --- */
.home-surface .home-band--articles .articles-grid {
    gap: 1.25rem;
}

.home-surface .home-band--contacts .contacts-grid {
    gap: 1.25rem;
}

/* --- Hero: адаптив --- */
@media (max-width: 1080px) {
    .home-hero {
        grid-template-columns: 1fr;
    }

    .home-hero__stage {
        order: -1;
    }

    .home-hero__photoFrame {
        min-height: 360px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(body.page-home, body.legal-page, body.articles-page, body.cabinet-page, body.admin-page) :is(.orb-a, .orb-b, .orb-c) {
        animation: none;
    }

    .home-marquee {
        animation: none;
    }

    :is(body.page-home, body.legal-page, body.articles-page, body.cabinet-page, body.admin-page) :is(.btn, .home-btn),
    .home-chip,
    .home-surface .home-band--stats .sensor-card,
    .home-surface .home-band--why .benefit-card,
    .home-surface .home-band--apiary .apiary-location-item {
        transition: none;
    }

    :is(body.page-home, body.legal-page, body.articles-page, body.cabinet-page, body.admin-page) :is(.btn:hover, .btn:active, .home-btn:hover, .home-btn:active),
    .home-chip:hover,
    .home-surface .home-band--stats .sensor-card:hover,
    .home-surface .home-band--why .benefit-card:hover,
    .home-surface .home-band--apiary .apiary-location-item:hover {
        transform: none;
    }

    .home-surface .home-band--why .benefit-card:nth-child(odd) {
        transform: none;
    }

    .home-surface .home-band--formats .format-card:nth-child(2) {
        transform: none;
    }
}

/* Внутренние страницы: заголовки в духе главной (Yeseva One) */
:is(body.legal-page, body.articles-page) .seo-h1 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--home-ink);
}

body.articles-page .articles-hero h1 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--home-ink);
}

body.legal-page .legal-intro h1 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--home-ink);
}

body.cabinet-page :is(.cabinet-top h1, .cabinet-auth-card h1) {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--home-ink);
}

:is(body.legal-page, body.articles-page) .seo-article {
    color: var(--home-ink-soft);
}