/* home.css — главная страница link.kg
 * Load order: common.css → home.css → material-symbols
 * Создан: 2026-04-13 */

@layer pages {

/* ═══ ПРОЗРАЧНЫЙ ХЕДЕР НА ГЛАВНОЙ ═══
 * Состояние 1 (top): glass-эффект поверх Hero — var(--hero-glass) + blur.
 * Состояние 2 (scroll): JS .is-scrolled → var(--bg) фон, поиск появляется.
 * ВАЖНО: ОБА состояния тема-адаптивные. Glass подстраивается под hero (light/dark).
 * Правила через .page-home — не затрагивают другие страницы. */

/* Состояние 1: glass поверх Hero (--hero-glass: light=frosted white, dark=dark overlay) */
.page-home .c-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: none;
    background: var(--hero-glass);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--hero-glass-border);
    border-radius: 0;
    box-shadow: none;
    transition: background .3s, box-shadow .3s, backdrop-filter .3s;
}

/* Hero-адаптивные элементы — var(--hero-text): тёмные в light, белые в dark.
 * transition: color → плавная смена при скролле (glass→scrolled) */
.page-home .c-header .c-header__logo,
.page-home .c-header .c-header__cart,
.page-home .c-header .c-header__theme {
    color: var(--hero-text);
    transition: color .3s, background .15s;
}
.page-home .c-header .c-cart-badge {
    background: var(--on-color);
    color: var(--accent);
}

/* Корзина/тема вправо — закон Якоба: корзина всегда в правом верхнем углу.
 * ВАЖНО: когда поиск скрыт (нет flex:1), без auto margin иконки прилипают к логотипу. */
.page-home .c-header__cart {
    margin-left: auto;
}

/* Поиск в хедере: скрыт в начале, появляется при скролле */
.page-home .c-header__search {
    display: none;
}

/* Mobile кнопка поиска: скрыта в glass-state (поиск есть в hero-секции) */
.page-home .c-header__search-mob {
    display: none;
}

/* Состояние 2: при скролле — fixed, тема-адаптивный фон, поиск виден.
 * ВАЖНО: var(--bg)/var(--text) автоматически адаптируются к light/dark.
 * Hero всегда тёмный, но каталог ниже — тематический → хедер при скролле
 * должен совпадать с контентом, а не висеть тяжёлой accent-полосой. */
.page-home .c-header.is-scrolled {
    position: fixed;
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

/* Иконки: сбрасываем с белого (hero) на тематический цвет */
.page-home .c-header.is-scrolled .c-header__logo,
.page-home .c-header.is-scrolled .c-header__cart,
.page-home .c-header.is-scrolled .c-header__theme {
    color: var(--text);
}

/* Badge: стандартный стиль (accent фон, белый текст) */
.page-home .c-header.is-scrolled .c-cart-badge {
    background: var(--accent);
    color: var(--on-color);
}

/* Hover: neutral overlay (виден на любом --bg, в отличие от белого) */
.page-home .c-header.is-scrolled .c-header__cart:hover,
.page-home .c-header.is-scrolled .c-header__theme:hover {
    background: rgba(128, 128, 128, .12);
}

/* Search: сброс brand-стилей → base-стиль (card фон, text цвет) */
.page-home .c-header.is-scrolled .c-header__search {
    display: flex;
    background: var(--card);
    border-color: var(--border);
}
.page-home .c-header.is-scrolled .c-header__search span {
    color: var(--text-muted);
}
.page-home .c-header.is-scrolled .c-header__search input {
    color: var(--text);
}
.page-home .c-header.is-scrolled .c-header__search input::placeholder {
    color: var(--text-muted);
}
/* Focus ring: base-стиль (accent ring вместо белого) */
.page-home .c-header.is-scrolled .c-header__search:focus-within {
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15);
    border-color: var(--accent);
}

/* Mobile: при скролле показываем иконку (вместо формы которая hidden на мобиле) */
@media (max-width: 767px) {
    .page-home .c-header.is-scrolled .c-header__search-mob {
        display: flex;
        background: var(--overlay-dark);
        color: var(--text);
    }
}

/* ═══ HERO ═══ */

/* Hero: тема-адаптивный — lavender в light, deep-purple в dark
 * ВАЖНО: padding-top увеличен — хедер теперь absolute, не занимает место в потоке */
.home-hero {
    position: relative;
    overflow: hidden;
    min-height: 45vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--hero-from) 0%, var(--hero-to) 50%, var(--hero-end) 100%);
    color: var(--hero-text);
    padding: 100px 16px 40px; /* top=100px: absolute header overlay + отступ */
}

/* Cursor glow — radial-gradient следует за мышью (JS → --glow-x/y/vis).
 * Тема-адаптивный: light (.15) мягкий, dark (.18) выразительный.
 * ::before ниже ::after (dot grid) и blobs в stacking order — мягкая подсветка фона.
 * opacity через --glow-vis (JS: 1 при hover, 0 при leave) + transition .4s. */
.home-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        750px circle at var(--glow-x, 50%) var(--glow-y, 50%),
        rgba(var(--accent-rgb), var(--hero-glow-op)) 0%,
        transparent 70%
    );
    pointer-events: none;
    opacity: var(--glow-vis, 0);
    transition: opacity .4s ease-out;
}

/* Dot grid — tech-паттерн поверх gradient (0 байт, чистый CSS)
 * --grid-x/y: JS двигает через CSS vars при mousemove (parallax) */
.home-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(var(--accent-rgb), var(--hero-grid-op)) 1px, transparent 1px);
    background-size: 32px 32px;
    background-position: var(--grid-x, 0px) var(--grid-y, 0px);
    pointer-events: none;
}

/* ═══ Circuit overlay — визуальная метафора платы, не чертёж ═══
 * SVG inline (3 группы = 3 параллакс-слоя).
 * bg/mid = нейтральный --hero-text-rgb, chip = accent-тинт.
 * ВАЖНО: маска ИНВЕРТИРОВАНА — центр пустой (дырка под поиск), паттерн по краям. */
.home-circuit {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Инвертированная маска: центр пуст → паттерн не конкурирует с CTA */
    -webkit-mask-image: radial-gradient(ellipse 45% 55% at 50% 50%, transparent 25%, black 70%);
    mask-image: radial-gradient(ellipse 45% 55% at 50% 50%, transparent 25%, black 70%);
}

/* Нейтральные тона bg/mid — фон не привлекает внимание.
 * Opacity через alpha канал color (не CSS opacity) — чище рендер.
 * --hero-circuit-op как base-множитель: light .14 → dark .25 (common.css). */
.home-circuit__bg {
    color: rgba(var(--hero-text-rgb), calc(var(--hero-circuit-op) * .3));
    stroke-width: .75;
}
.home-circuit__mid {
    color: rgba(var(--hero-text-rgb), calc(var(--hero-circuit-op) * .5));
    stroke-width: 1.2;
}
/* Chip: лёгкий accent-тинт — единственный цветной элемент */
.home-circuit__chip {
    color: rgba(var(--accent-rgb), calc(var(--hero-circuit-op) * .7));
    stroke-width: 1.5;
}

/* GPU-промоушн для параллакса (transform через JS) */
@media (prefers-reduced-motion: no-preference) {
    .home-circuit__bg,
    .home-circuit__mid,
    .home-circuit__chip,
    .home-circuit__soic {
        will-change: transform;
    }
}

/* Chip proximity-scale: чипы увеличиваются когда курсор близко (depth-cue).
 * transform-box: fill-box + transform-origin: center → scale от визуального
 * центра чипа (bounding-box), а не от SVG origin (0,0).
 * ВАЖНО: JS (home.js) ставит style.transform = translate3d(...) scale(...).
 * Для SOIC translate наследуется от родителя __mid, JS добавляет только scale. */
.home-circuit__chip,
.home-circuit__soic {
    transform-box: fill-box;
    transform-origin: center;
}

/* Pulse overlay на band-трассах — data-импульсы бегут по PCB.
 * ВАЖНО: stroke-dasharray "12 280" = короткая яркая точка + длинный gap (292 cycle).
 * Forward (bands A, C): dashoffset 0 → -292, pulse идёт ПО направлению path (в чип).
 * Reverse (band B): dashoffset 0 → +292, pulse идёт ПРОТИВ path (из чипа наружу).
 * nth-child stagger — пульсы на 5 параллельных дорожках не синхронны.
 * Яркость: accent × 1.2 от --hero-circuit-op (ярче static-band'ов). */
.home-circuit__pulse {
    color: rgba(var(--accent-rgb), calc(var(--hero-circuit-op) * 1.2));
    stroke: currentColor;
    stroke-width: 3;
    fill: none;
    stroke-linecap: round;
    pointer-events: none;
}
.home-circuit__pulse path {
    stroke-dasharray: 12 280;
    animation: circuit-pulse-fwd 2.4s linear infinite;
}
/* Reverse band: импульс течёт ОБРАТНО (из чипа наружу) */
.home-circuit__pulse--rev path {
    animation-name: circuit-pulse-rev;
}
/* Stagger внутри каждой band'ы (до 5 дорожек) */
.home-circuit__pulse-band path:nth-child(2) { animation-delay: -.5s;  }
.home-circuit__pulse-band path:nth-child(3) { animation-delay: -1.0s; }
.home-circuit__pulse-band path:nth-child(4) { animation-delay: -1.5s; }
.home-circuit__pulse-band path:nth-child(5) { animation-delay: -2.0s; }

@keyframes circuit-pulse-fwd {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -292; }
}
@keyframes circuit-pulse-rev {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: 292; }
}

/* Reduced motion: pulse скрыт (static-band'ы остаются видимы) */
@media (prefers-reduced-motion: reduce) {
    .home-circuit__pulse { display: none; }
}

/* Parallax blob-ы — фоновые цветовые пятна (ambient, не главный эффект)
 * ВАЖНО: opacity через --hero-blob-op (light: .20, dark: .20) — мягкий фон.
 * Главный интерактив теперь на элементах (title, search, pills). */
.home-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: var(--hero-blob-op);
    will-change: transform;
    pointer-events: none;
}
.home-blob--1 {
    width: 400px;
    height: 400px;
    top: -100px;
    right: -50px;
    background: var(--accent);
}
.home-blob--2 {
    width: 300px;
    height: 300px;
    bottom: -80px;
    left: -30px;
    background: var(--orange);
}

/* ═══ Idle-анимация blob-ов (мобилка / нет мыши) ═══
 * Мягкий дрейф создаёт ощущение «живого» фона без JS.
 * Desktop: JS добавляет .home-hero--js → animation: none, parallax берёт контроль.
 * prefers-reduced-motion: reduce → анимации не будет (блок не рендерится). */
@media (prefers-reduced-motion: no-preference) {
    /* Амплитуда 30-40px — заметна при размере blob 300-600px */
    @keyframes blob-drift-1 {
        0%, 100% { transform: translate3d(0, 0, 0); }
        25%      { transform: translate3d(40px, -25px, 0); }
        50%      { transform: translate3d(-15px, 30px, 0); }
        75%      { transform: translate3d(-30px, -20px, 0); }
    }
    @keyframes blob-drift-2 {
        0%, 100% { transform: translate3d(0, 0, 0); }
        33%      { transform: translate3d(-25px, 20px, 0); }
        66%      { transform: translate3d(30px, -15px, 0); }
    }
    .home-blob--1 { animation: blob-drift-1 14s ease-in-out infinite; }
    .home-blob--2 { animation: blob-drift-2 18s ease-in-out infinite; }

    /* JS взял контроль через mousemove — CSS idle-анимация off */
    .home-hero--js .home-blob { animation: none; }
}

/* Контент поверх blob-ов и ::after */
.home-hero-content {
    position: relative;
    z-index: 1; /* ВАЖНО: числовой z-index внутри stacking context hero — допустим (blob-ы не имеют z-index) */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    width: 100%;
    max-width: 680px;
}

/* Заголовок H1 — мягкое свечение (2 слоя, не мылит на TN-матрицах)
 * ВАЖНО: при .6 opacity glow размывал контуры букв на дешёвых экранах → снижено */
.home-title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    margin: 0;
    text-shadow:
        0 0 10px rgba(var(--accent-rgb), .3),
        0 0 30px rgba(var(--accent-rgb), .12);
}

/* Подзаголовок — лёгкое свечение, скрыт на мобилке */
.home-sub {
    font-size: 15px;
    opacity: .6;
    margin: 0;
    text-shadow: 0 0 15px rgba(var(--accent-rgb), .15);
}

/* ВАЖНО: GPU-промоушн ДО первого mousemove — избегаем jank при первом взаимодействии.
 * will-change на base-элементах, не гейтим через .home-hero--js.
 * prefers-reduced-motion: reduce → parallax отключён, will-change не нужен. */
@media (prefers-reduced-motion: no-preference) {
    .home-title,
    .home-sub,
    .home-search,
    .home-pills {
        will-change: transform;
    }
}

/* Поиск — pill-форма + ambient glow (accent-свечение вокруг строки) */
.home-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 560px;
    height: 48px;
    background: var(--card);
    border: 1px solid rgba(var(--hero-text-rgb), .15); /* Тема-адаптивный: тёмная рамка на light, светлая на dark */
    border-radius: var(--radius-pill);
    overflow: hidden;
    box-shadow: 0 0 20px rgba(var(--accent-rgb), .15); /* Ambient glow — строка "дышит" на hero */
}

.home-search-icon {
    position: absolute;
    left: 14px;
    font-size: 22px;
    color: var(--text-muted);
    pointer-events: none;
}

.home-search input {
    flex: 1;
    height: 100%;
    border: none;
    outline: none;
    padding: 0 8px 0 44px; /* left=44 для иконки search */
    font-size: 16px; /* ВАЖНО: ≥16px — iOS не зумит при фокусе на input */
    background: transparent;
    color: var(--text);
}

.home-search-btn {
    flex-shrink: 0;
    height: 100%;
    padding: 0 20px;
    border: none;
    background: var(--accent);
    color: var(--on-color);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    /* Фикс: центровка label (десктоп) и иконки лупы (мобилка).
     * ВАЖНО: без inline-flex иконка Material Symbols (line-height:1) едет по baseline. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.home-search-btn:hover { background: var(--accent-dark); }

/* Фикс: UX feedback — accent-glow при фокусе на поле поиска */
.home-search:focus-within {
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .35);
}

/* Pills — горизонтальные чипсы-ссылки */
.home-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 0;
    margin: 0;
}

.home-pill {
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: rgba(var(--hero-text-rgb), .1);
    color: var(--hero-text);
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s;
}
.home-pill:hover {
    background: rgba(var(--hero-text-rgb), .18);
}

/* ═══ HERO TRUST CHIPS — компактные доверие-чипы под pills ═══
 * Выше fold, заменяют большую секцию .home-trust внизу.
 * 3 чипа: иконка + короткий текст. Mobile: column / Desktop: row. */
.home-hero-trust {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.home-hero-trust li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--hero-glass);
    border: 1px solid var(--hero-glass-border);
    border-radius: 999px;
    font-size: 13px;
    color: var(--hero-text);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.home-hero-trust .material-symbols-rounded {
    font-size: 18px;
    color: var(--hero-text);
    opacity: .9;
}

@media (min-width: 768px) {
    .home-hero-trust {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        margin-top: 24px;
    }
    .home-hero-trust li {
        font-size: 14px;
        padding: 8px 16px;
    }
}

/* ═══ HERO: Desktop ═══ */
@media (min-width: 768px) {
    .home-hero {
        min-height: 60vh;
        padding: 120px 32px 56px; /* top=120px: absolute header на desktop выше (~84px) */
    }
    .home-title { font-size: 42px; }
    .home-sub   { font-size: 17px; }
    .home-search {
        height: 56px;
    }
    .home-search-icon {
        left: 18px;
        font-size: 24px;
    }
    .home-search input { padding-left: 50px; }
    .home-search-btn {
        padding: 0 28px;
        font-size: 16px;
    }
    .home-pill {
        padding: 8px 18px;
        font-size: 14px;
    }
    .home-blob--1 { width: 600px; height: 600px; }
    .home-blob--2 { width: 450px; height: 450px; }
}

/* По умолчанию: текст виден, иконка скрыта */
.home-search-btn-ico { display: none; }

/* ═══ HERO: Mobile ═══ */
@media (max-width: 767px) {
    /* Компактный hero — каталог должен быть виден above the fold
     * ВАЖНО: было padding 100px 16px 40px — каталог уходил за экран. */
    .home-hero {
        min-height: auto;
        padding: 72px 16px 24px; /* top: header(~56px) + 16px gap */
    }
    .home-hero-content { gap: 12px; } /* 16→12: плотнее на мобилке */
    .home-sub { display: none; } /* экономим вертикаль */

    /* Кнопка «Найти» → иконка лупы (текст съедал 35% ширины input) */
    .home-search-btn-label { display: none; }
    .home-search-btn-ico { display: inline; font-size: 20px; }
    .home-search-btn { padding: 0 14px; }

    /* ВАЖНО: Circuit SVG (1400x900) на 360px не читается как декор — только шум.
     * Radial-маска оставляла артефакты слева от trust-плашек (passives/vias края).
     * Фикс: скрываем на мобилке, снимает рендер тяжёлого SVG (perf). */
    .home-circuit { display: none; }

    /* Trust-плашки на светлом фоне без circuit сливались — отрываем лёгкой тенью.
     * backdrop-filter оставлен для dark-mode совместимости. */
    .home-hero-trust li {
        box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    }

    /* Pills: горизонтальный скролл + fade-намёк справа */
    .home-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        /* Фикс: pills обрезались — align-items:center родителя сужал контейнер скролла.
         * width:100% + stretch = pills занимают полную ширину content-области */
        width: 100%;
        align-self: stretch;
        padding-bottom: 4px;
        /* Fade-градиент справа — подсказка «свайпни» */
        -webkit-mask-image: linear-gradient(to right, black 80%, transparent);
        mask-image: linear-gradient(to right, black 80%, transparent);
        /* Snap: чипсы встают ровно при свайпе, не обрезаются на полуслове */
        scroll-snap-type: x proximity;
    }
    .home-pills::-webkit-scrollbar { display: none; }
    .home-pill { scroll-snap-align: start; }
}

/* ═══ Заголовок секции — общий для Categories, Trust, CTA ═══ */
.home-section-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 20px;
    color: var(--text);
}

/* Шапка каталога: H2 + ссылка «Все разделы» на одном уровне.
 * ВАЖНО: заменяет карточку home-cat--all в сетке (серый блок читался как disabled — UX-баг). */
.home-cats-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 20px;
}
/* ВАЖНО: margin-bottom теперь на .home-cats-header, а не на h2 внутри него */
.home-cats-header .home-section-title { margin-bottom: 0; }

/* Ссылка «Все разделы →» — навигация, не карточка.
 * inline-flex для выравнивания текст + иконка chevron_right */
.home-cats-all {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 14px;
    font-weight: 500;
    color: var(--accent);
    text-decoration: none;
    transition: color .15s;
}
.home-cats-all:hover { color: var(--accent-dark); }
.home-cats-all .material-symbols-rounded { font-size: 18px; }

/* ═══ CATEGORIES ═══ */

/* ВАЖНО: 56px сверху — воздух между Hero и каталогом. Было 40px — слишком тесно,
 * резкий переход dark→light выглядел дёшево. Whitespace = премиальность. */
.home-cats {
    padding: 56px 16px;
    max-width: var(--container-wide);
    margin: 0 auto;
}

/* Ровная сетка: 4 колонки desktop, 2 mobile — все карточки одинаковые */
.home-cats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

/* Карточка категории */
.home-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 12px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}

.home-cat-icon {
    font-size: 32px;
    color: var(--accent);
}

.home-cat-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    text-align: center;
}

/* Метрика категории: «156 моделей» — кол-во товаров под title.
 * Источник: CatalogService::getCategoryProductCounts() (cache 24ч).
 * ВАЖНО: показываем только если cnt > 0 (см. home.php, no silent drops). */
.home-cat-meta {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.2;
    margin-top: 2px;
}

@media (min-width: 768px) {
    .home-cat-meta { font-size: 13px; }
}

/* Hover: подъём + accent-тень (GPU: только transform + box-shadow) */
.home-cat:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(var(--accent-rgb), .15);
}
.home-cat:hover .home-cat-icon {
    color: var(--accent-dark);
}

/* ═══ CATEGORIES: Desktop ═══ */
@media (min-width: 768px) {
    .home-cats { padding: 56px 32px; } /* Фикс: выровнять с header (32px) */
    .home-cats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
    .home-cat          { padding: 32px 16px; }
    .home-cat-icon     { font-size: 40px; }
    .home-cat-title    { font-size: 15px; }
    .home-section-title {
        font-size: 26px;
        margin-bottom: 24px;
    }
    /* Desktop: шапка каталога — увеличенный отступ + ссылка крупнее */
    .home-cats-header { margin-bottom: 24px; }
    .home-cats-all { font-size: 15px; }
}

/* ═══ CTA ═══ */

.home-cta {
    padding: 40px 16px;
    text-align: center;
    max-width: var(--container-content);
    margin: 0 auto;
}

.home-cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 400px;
    margin: 0 auto;
}

.home-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s;
    background: var(--accent);
    color: var(--on-color);
}
.home-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* WhatsApp/Telegram — brand-цвета (inline исключение по CLAUDE.md) */
.home-cta-btn--wa { background: #25D366; color: #fff; }
.home-cta-btn--tg { background: #0088cc; color: #fff; }

.home-cta-hours {
    margin-top: 16px;
    font-size: 13px;
    color: var(--text-muted);
}

/* Desktop: кнопки в ряд */
@media (min-width: 768px) {
    .home-cta { padding: 48px 32px; } /* Фикс: выровнять с header (32px) */
    .home-cta-buttons {
        flex-direction: row;
        justify-content: center;
        max-width: none;
    }
    .home-cta-btn { padding: 14px 32px; }
}

/* ═══ SEO TAG CLOUD ═══
 * Footer-зона: SEO-ссылки в формате чипов-тегов вместо «простыни абзаца».
 * Без карточки-обёртки (border + bg) — это spacer перед CTA, не самостоятельный блок.
 * Чипы в стиле home-pill, но «нейтральные» (var(--card)/var(--border)) — accent на hover. */
.home-seo {
    margin: 0 16px;
    padding: 32px 0 8px;
    max-width: var(--container-wide);
}

.home-seo-title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

.home-seo-intro {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
}

.home-seo-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.home-seo-tags a {
    display: inline-block;
    padding: 6px 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--text);
    font-size: 13px;
    text-decoration: none;
    transition: color .15s, border-color .15s, background .15s;
}

.home-seo-tags a:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(var(--accent-rgb), .04);
}

@media (min-width: 768px) {
    .home-seo {
        margin: 0 auto;
        padding: 40px 32px 8px;
    }
    .home-seo-title { font-size: 18px; }
    .home-seo-intro { font-size: 14px; margin-bottom: 20px; }
    .home-seo-tags a { padding: 8px 16px; font-size: 14px; }
}

/* ═══ SCENARIOS: Use-case entry points (4 карточки сценариев покупки) ═══
 * Размещение: между Hero и Catalog — даёт направление до выбора категории.
 * Адаптив: 2x2 mobile, 4x1 desktop. Эмодзи + title + sub. */
.home-scenarios {
    padding: 40px 16px 0;
    max-width: var(--container-wide);
    margin: 0 auto;
}

.home-scenarios-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.home-scenario {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 20px 12px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.home-scenario:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
}

.home-scenario-emoji {
    font-size: 32px;
    line-height: 1;
}

.home-scenario-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.home-scenario-sub {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.3;
}

@media (min-width: 768px) {
    .home-scenarios { padding: 48px 32px 0; }
    .home-scenarios-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
    .home-scenario { padding: 28px 16px; }
    .home-scenario-emoji { font-size: 40px; }
    .home-scenario-title { font-size: 15px; }
    .home-scenario-sub { font-size: 13px; }
}

} /* @layer pages */