/* ============================================================
   ПСК «Апекс» — основной стиль нового сайта. 2026-10-27.
   Две темы: тёмная «Раскалённый металл» (по умолчанию) и светлая
   (html.theme-light — прежний вид). Все цвета через переменные.
   ============================================================ */
:root {
    --font-head: "Montserrat", "Segoe UI", sans-serif;
    --font-display: "Bebas Neue", "Montserrat", "Segoe UI", sans-serif;
    --font-body: "Roboto", "Segoe UI", sans-serif;
    /* --- ТЁМНАЯ «Раскалённый металл» (затемнение заливных CTA 02.11, владелец: «кнопку потемней, сильно яркая») --- */
    --c-amber: #f0a03e; --c-amber-deep: #cf5408;
    --c-red: #ff9e2c;               /* семантический акцент (бывший красный) */
    --c-red-dark: #e8590c;
    --c-navy: #eef1f6;              /* семантика «основной заголовок» */
    --c-navy-deep: #14171c;
    --c-ink: #b8c0cd;               /* текст тела */
    --c-muted: #7d8798;
    --c-line: rgba(255, 255, 255, 0.09);
    --c-bg: #0d1015;
    --c-surface: #14171c;
    --c-panel: #1a1d23;
    --c-page: #0d1015;
    --c-card: #14171c;
    --header-bg: rgba(20, 23, 28, 0.88);
    --shadow-card: 0 18px 40px rgba(0, 0, 0, 0.45);
    --glow: 0 0 0 1px rgba(255, 158, 44, 0.35), 0 10px 34px rgba(255, 158, 44, 0.16);
    --r-sm: 8px; --r-md: 14px; --r-lg: 20px;
    --tr-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    --tr: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    --tr-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    --wrap: 1180px;
}
/* --- СВЕТЛАЯ тема: «светлая сталь» — та же гамма, вывернутая в светлое (единое целое с тёмной) --- */
html.theme-light {
    --c-amber: #e8590c; --c-amber-deep: #c74a08;
    --c-red: #d9480f; --c-red-dark: #b83a08;
    --c-navy: #16202e; --c-navy-deep: #e9edf2;
    --c-ink: #2c3644; --c-muted: #5d6878; --c-line: #d9dee6; --c-bg: #eef1f5;
    --c-page: #f7f9fb;
    --c-card: #ffffff;
    --header-bg: rgba(247, 249, 251, 0.9);
    --shadow-card: 0 18px 40px rgba(22, 32, 46, 0.12);
    --glow: 0 0 0 1px rgba(217, 72, 15, 0.28), 0 10px 30px rgba(22, 32, 46, 0.12);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0; font-family: var(--font-body); color: var(--c-ink);
    background: var(--c-page); line-height: 1.55; font-size: 16px;
    /* Фикс 31.10: fill-mode `both` удерживал transform на body ПОСЛЕ анимации,
       превращая body в containing block — все position:fixed (моб-плашка,
       cookie, кнопка «Наверх») прыгали в конец страницы. `backwards` даёт
       тот же вход, но не держит transform после завершения. */
    animation: pageIn 0.45s ease backwards;
}
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
img { max-width: 100%; height: auto; }
a { color: var(--c-navy); text-decoration: none; transition: color var(--tr-fast); }
a:hover { color: var(--c-red); }
h1, h2, h3 { font-family: var(--font-head); line-height: 1.2; color: var(--c-navy); }
h1 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; margin: 0 0 18px; }
h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 700; margin: 34px 0 16px; }
h3 { font-size: 17px; font-weight: 700; margin: 0 0 6px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 18px; }
.muted { color: var(--c-muted); }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 12px; top: 12px; background: var(--c-navy); color: #fff; padding: 8px 14px; border-radius: var(--r-sm); z-index: 99; }

/* ---------- Шапка «Монолит» (01.11, выбор владельца) + «Лифт» ----------
   Чёрный монолит #0a0c0f с радиусом нижних углов — жёсткое разделение с фоном.
   «Лифт»: скролл вниз — уезжает (translateY, только композитинг); ЛЮБОЕ движение
   вверх — выезжает пружиной. Предохранители консилиума: гистерезис (вниз от 140px,
   возврат сразу), пин при фокусе/открытом меню, выключение при reduced-motion. */
.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    background: #0a0c0f; border-radius: 0 0 18px 18px;
    box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .6);
    transform: translateY(0);
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.site-header.is-hidden { transform: translateY(-110%); }
/* Компенсация фиксированности: контент начинается ниже шапки */
body { padding-top: 70px; }
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; position: sticky; } .site-header.is-hidden { transform: none; } }
/* линия под шапкой убрана: разделение даёт тон фона и «стекло» шапки (гейт: без hairline) */
.theme-toggle { border: 1.5px solid var(--c-line); background: transparent; color: var(--c-muted); cursor: pointer; width: 38px; height: 38px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; transition: color var(--tr-fast), border-color var(--tr-fast), transform var(--tr-fast); }
.theme-toggle:hover { color: var(--c-red); border-color: var(--c-red); transform: rotate(-14deg); }
.header-grid { display: grid; grid-template-columns: auto auto 1fr auto auto auto; gap: 18px; align-items: center; min-height: 66px; }
.logo img { display: block; height: 40px; width: auto; }
/* Текстовый логотип (28.10): знак-треугольник убран, «АПЕКС» — Montserrat 800 */
.logo-text { display: inline-flex; flex-direction: column; gap: 2px; line-height: 1; text-decoration: none; }
.logo-text b { font-family: var(--font-head); font-weight: 800; font-size: 19px; letter-spacing: 0.14em; color: var(--c-navy); }
.logo-text small { font-family: var(--font-head); font-weight: 600; font-size: 8.5px; letter-spacing: 0.22em; color: var(--c-muted); white-space: nowrap; }
.logo-text:hover b { color: var(--c-red); }
/* Логоблок «Стрела» (31.10, выбор владельца): знак А-стрела + «ПСК АПЕКС»
   + подпись «У нас есть что Вам предложить». Шапка тёмная — янтарь/белый. */
.logo-arrow { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; }
.logo-arrow .logo-mark { display: block; flex: 0 0 auto; }
.logo-arrow .logo-text b { color: #fff; font-weight: 600; font-size: 18px; letter-spacing: 0.1em; }
.logo-arrow .logo-text b i { font-style: normal; color: var(--c-amber); margin-right: 9px; }
.logo-arrow .logo-text small { color: #9a9a9a; font-weight: 500; font-size: 9px; letter-spacing: 0.14em; text-transform: none; }
.logo-arrow:hover .logo-text b, .logo-arrow:hover .logo-text b i { color: var(--c-amber); }
.logo-arrow:hover .logo-text small { color: #cfcfcf; }
.main-nav { display: flex; gap: 4px; font-family: var(--font-head); font-weight: 500; font-size: 14.5px; margin-left: 22px; }
.main-nav a { color: #c9cdd2; padding: 9px 13px; border-radius: 8px; transition: color var(--tr-fast), background var(--tr-fast); }
.main-nav a::after { content: none; }
.main-nav a:hover { color: #fff; }
.main-nav a.is-active { color: #fff; background: rgba(255, 178, 84, .16); }
/* ===== Поиск «Команда/Печатающий» (финал 01.11) ===== */
.hs-wrap { position: relative; }
.hs { display: flex; align-items: center; gap: 9px; border: 1px solid #262b32; border-radius: 999px; padding: 9px 16px; color: #9aa0a6; width: 280px; max-width: 100%; cursor: text; background: rgba(255,255,255,.02); transition: border-color .25s, box-shadow .25s, background .25s; }
/* С телефоном в шапке (02.11) поиск сжимается на узких десктопах */
@media (max-width: 1280px) { .hs { width: 200px; } }
@media (max-width: 1120px) { .hs { width: 150px; } .main-nav { gap: 14px; } }
.hs:hover { border-color: #39414b; }
.hs:focus-within { border-color: rgba(255,178,84,.65); background: #101318; box-shadow: 0 0 0 4px rgba(255,178,84,.08), 0 0 24px -6px rgba(255,178,84,.3); }
.hs-ico { flex: 0 0 auto; display: inline-flex; color: #9aa0a6; transition: color .25s; }
.hs:focus-within .hs-ico { color: var(--c-amber); }
.hs-ph { position: relative; color: #6b7178; font-size: 14px; white-space: nowrap; overflow: hidden; pointer-events: none; min-width: 1px; flex: 1; }
.hs-ph::after { content: ''; display: inline-block; width: 2px; height: 14px; background: var(--c-amber); margin-left: 3px; vertical-align: -2px; animation: hsCaret 1.05s steps(1) infinite; }
.hs-ph.is-off { visibility: hidden; }
.hs input { position: absolute; opacity: 0; pointer-events: none; }
.hs.is-real { position: relative; }
.hs.is-real .hs-ph { display: none; }
.hs.is-real input { position: static; opacity: 1; pointer-events: auto; background: none; border: 0; outline: 0; color: #e8eaec; font: inherit; width: 100%; padding: 0; }
@keyframes hsCaret { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
.hs-pop { position: absolute; top: calc(100% + 10px); right: 0; width: min(360px, calc(100vw - 32px)); background: #101318; border: 1px solid rgba(255,178,84,.25); border-radius: 16px; padding: 10px; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .2s, transform .2s; box-shadow: 0 24px 48px -12px rgba(0,0,0,.7); }
.hs-pop.is-open { opacity: 1; transform: none; pointer-events: auto; }
.hs-lbl { font: 600 10.5px/1 var(--font-head); letter-spacing: .1em; color: #6b7178; text-transform: uppercase; padding: 6px 8px 8px; }
.hs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hs-chips a { font: 500 13px/1 var(--font-body); color: #c9cdd2; text-decoration: none; border: 1px solid #262b32; border-radius: 999px; padding: 8px 12px; min-height: 32px; display: inline-flex; align-items: center; transition: border-color .15s, color .15s, background .15s; }
.hs-chips a:hover, .hs-chips a:focus-visible { border-color: rgba(255,178,84,.6); color: var(--c-amber); background: rgba(255,178,84,.06); }
.hs-go { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 10px; border-radius: 10px; background: rgba(255,178,84,.08); color: var(--c-amber); font: 500 13px/1 var(--font-body); text-decoration: none; }
.hs-go:hover { background: rgba(255,178,84,.14); color: var(--c-amber); }
.hs-kbd { margin-left: auto; font: 600 10.5px/1 var(--font-head); color: #6b7178; border: 1px solid #2c3239; border-bottom-width: 2px; border-radius: 5px; padding: 3px 6px; }
@media (pointer: coarse) { .hs-kbd { display: none; } }
/* ===== CTA шапки: залитая янтарная (требование консилиума) ===== */
.header-cta { font: 600 13.5px/1 var(--font-head); border-radius: 10px; padding: 11px 18px; text-decoration: none; white-space: nowrap; background: var(--c-amber); color: #14100a; transition: filter var(--tr-fast), transform var(--tr-fast); }
.header-cta:hover { filter: brightness(1.08); color: #14100a; }
.header-cta:active { transform: scale(.97); }
/* Телефон цифрой в шапке (аудит прода 02.11, консилиум 3/3: B2B ищет номер,
   а не иконку). Стиль шапки: белый номер, часы приглушённым серым. */
.head-phone { display: inline-flex; flex-direction: column; gap: 2px; line-height: 1; text-align: right; }
.head-phone a { font: 700 15.5px/1 var(--font-head); letter-spacing: .02em; color: #fff; text-decoration: none; white-space: nowrap; transition: color var(--tr-fast); }
.head-phone a:hover { color: var(--c-amber); }
.head-phone small { font: 500 10px/1 var(--font-body); letter-spacing: .06em; color: #8d9298; white-space: nowrap; }
/* Логотип на чёрном монолите */
.logo-arrow .logo-text b { color: #fff; }
.logo-arrow .logo-text small { color: #8d9298; }
.cart-link { color: #c9cdd2; }
.cart-link:hover { color: #fff; }
.theme-toggle { border-color: #262b32; color: #9aa0a6; }
.theme-toggle:hover { color: var(--c-amber); border-color: rgba(255,178,84,.5); }
.cart-link { position: relative; display: inline-flex; align-items: center; color: var(--c-navy); }
.cart-count { position: absolute; top: -9px; right: -12px; background: var(--c-red); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; display: none; align-items: center; justify-content: center; padding: 0 4px; font-family: var(--font-head); }
.cart-count.is-visible { display: inline-flex; }
.burger { display: none; }

/* ---------- Хлебные крошки ---------- */
.crumbs { padding: 14px 0 0; font-size: 13.5px; color: var(--c-muted); }
.crumbs a { color: var(--c-muted); }
.crumbs a:hover { color: var(--c-red); }
.crumbs span { margin: 0 6px; }

/* ---------- Hero ---------- */
.hero {
    background: linear-gradient(135deg, var(--c-navy-deep) 0%, var(--c-navy) 58%, #23375f 100%);
    color: #fff; padding: 64px 0 58px; position: relative; overflow: hidden;
}
.hero::before {
    content: ""; position: absolute; right: -140px; top: -140px; width: 480px; height: 480px;
    border-radius: 50%; background: radial-gradient(circle, rgba(228, 0, 43, 0.28), transparent 65%);
}
/* Тёмная «Раскалённый металл»: hero с фото стана, затемнением и янтарным свечением */
html:not(.theme-light) .hero {
    --hero-shift: 0%;
    background:
        linear-gradient(180deg, rgba(13, 16, 21, 0.6) 0%, rgba(13, 16, 21, 0.78) 55%, #0d1015 100%),
        url('../img/hero-molten.jpg') center calc(28% + var(--hero-shift)) / cover no-repeat, #0d1015;
}
html:not(.theme-light) .hero::before {
    background: radial-gradient(circle, rgba(255, 158, 44, 0.22), transparent 65%);
}
html:not(.theme-light) .hero h1 {
    font-family: var(--font-display); font-weight: 400; letter-spacing: 0.01em;
    font-size: clamp(44px, 6.5vw, 84px); line-height: 0.96; text-transform: uppercase;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.55);
}
html:not(.theme-light) .hero-sub { color: #c3cad6; font-size: 17.5px; }
/* Киношный hero: на всю высоту экрана, постерный заголовок построчно */
.hero-cinema { min-height: 88svh; display: flex; align-items: center; }
.hero-cinema .wrap { position: relative; z-index: 2; }
#sparks { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0; }
html.js #sparks.is-on { opacity: 1; }
.hero-line { display: block; }
.hero-produce {
    min-height: 52svh; display: flex; align-items: center; margin-top: 46px;
    background:
        linear-gradient(180deg, rgba(13, 16, 21, 0.78) 0%, rgba(13, 16, 21, 0.9) 100%),
        url('../img/hero-steelworks.jpg') center 40% / cover no-repeat, #0d1015;
}
html.theme-light .hero-produce { background: linear-gradient(135deg, var(--c-navy-deep) 0%, var(--c-navy) 58%, #23375f 100%); }
.hero-h2 { font-size: clamp(24px, 3.4vw, 40px); color: #fff; margin: 0 0 14px; }
html:not(.theme-light) .hero-h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.02; font-size: clamp(34px, 4.6vw, 58px); }
.hero h1 { color: #fff; }
.hero-sub { font-size: 18px; color: #cdd6e6; max-width: 640px; }
.hero-actions { display: flex; gap: 14px; margin: 26px 0; flex-wrap: wrap; }
.hero-points { list-style: none; display: flex; gap: 26px; padding: 0; margin: 8px 0 0; flex-wrap: wrap; color: #cdd6e6; font-size: 14.5px; }
.hero-points b { color: #fff; }
.btn-ghost {
    display: inline-block; padding: 12px 26px; border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--r-md); color: #fff !important; font-family: var(--font-head);
    font-weight: 700; font-size: 13.5px; letter-spacing: 0.08em; text-transform: uppercase;
    background: transparent; /* фикс a11y: без этого <button> берёт UA buttonface (белое на белом) */
    transition: border-color var(--tr-fast), background var(--tr-fast);
}
.btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
/* a11y (гейт ux-accessibility): в светлой теме ghost-кнопка и подзаголовок
   наследовали «белый на белом» (1.06:1 и 1.39:1) — тёмные чернила на светлой стали */
html.theme-light .btn-ghost { color: var(--c-navy) !important; border-color: rgba(22, 32, 46, 0.55); }
html.theme-light .btn-ghost:hover { border-color: var(--c-navy); background: rgba(22, 32, 46, 0.06); }
html.theme-light .hero-sub { color: var(--c-ink); }
html.theme-light .hero-points { color: var(--c-ink); }

/* Мгновенный переход + вспышка раскалённой кромки при переключении темы */
html { transition: none; }
body.theme-fade { animation: themeFlash 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes themeFlash {
    0% { box-shadow: inset 0 0 0 0 rgba(255, 158, 44, 0); }
    30% { box-shadow: inset 0 0 140px 12px rgba(255, 158, 44, 0.33); }
    100% { box-shadow: inset 0 0 0 0 rgba(255, 158, 44, 0); }
}
@media (prefers-reduced-motion: reduce) { body.theme-fade { animation: none; } }

/* ---------- Кнопки ---------- */
.btn-apex {
    position: relative; display: inline-block; overflow: hidden; cursor: pointer;
    background: var(--c-red); border: 2px solid var(--c-red); color: #fff !important;
    font-family: var(--font-head); font-weight: 800; font-size: 13.5px; letter-spacing: 0.12em;
    text-transform: uppercase; padding: 13px 30px; border-radius: var(--r-md);
    transition: background var(--tr-fast), border-color var(--tr-fast), transform var(--tr-fast), box-shadow var(--tr);
}
html:not(.theme-light) .btn-apex {
    background: var(--c-amber);
    border-color: var(--c-amber-deep); color: #14100a !important;
}
html:not(.theme-light) .btn-apex:hover {
    background: #ffc477;
    border-color: var(--c-amber); color: #14100a !important;
}
.btn-apex::after {
    content: none; /* блик убран: гейт запрещает градиентные заливки на кнопках */
}
.btn-apex:hover { background: var(--c-red-dark); border-color: var(--c-red-dark); transform: translateY(-2px); }
.btn-apex:active { transform: translateY(0); }
.btn-to-cart {
    cursor: pointer; border: 1.5px solid var(--c-line); background: var(--c-panel); color: var(--c-navy);
    font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: 0.06em;
    padding: 8px 14px; border-radius: var(--r-sm); transition: all var(--tr-fast); white-space: nowrap;
}
.btn-to-cart:hover { border-color: var(--c-red); color: var(--c-red); }
.btn-to-cart.is-added { border-color: #1a9c5b; color: #1a9c5b; }

/* ---------- Секции ---------- */
.sec-catalog { padding: 44px 18px 10px; }
.sec-kicker {
    display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-head);
    font-size: 12.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--c-red); margin-bottom: 14px;
}
.sec-kicker::before { content: ""; width: 44px; height: 3px; border-radius: 3px; background: var(--c-red); }

/* ---------- Карточки категорий ---------- */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; margin-top: 18px; }
.card-apex {
    background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden;
    transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr); display: block; color: inherit;
}
.card-apex:hover { transform: translateY(-6px); border-color: rgba(255, 158, 44, 0.45); box-shadow: var(--shadow-card), var(--glow); color: inherit; }
html.theme-light .card-apex:hover { border-color: rgba(228, 0, 43, 0.35); box-shadow: var(--shadow-card); }
.cat-card img { width: 100%; height: 170px; object-fit: cover; background: var(--c-bg); }
.cat-card-body { padding: 14px 16px 16px; }
.cat-card-meta { color: var(--c-muted); font-size: 13px; margin-top: 4px; }

/* ---------- Числовая полоса ---------- */
.sec-strip { background: var(--c-navy-deep); color: var(--c-navy); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); margin-top: 46px; padding: 30px 0; }
html.theme-light .sec-strip { border-top: 0; border-bottom: 0; }
.strip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; text-align: center; }
.strip-item b { display: block; font-family: var(--font-head); font-size: 26px; font-weight: 800; color: var(--c-red); }
.strip-item span { color: var(--c-muted); font-size: 13.5px; }

/* ---------- Блок запроса ---------- */
.sec-request { padding: 46px 18px 56px; }
.request-box {
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 30px 34px;
}
.request-box h2 { margin: 0 0 6px; }
.request-box p { margin: 0; color: var(--c-muted); }

/* ---------- Товары ---------- */
.items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 18px; }
.items-grid-4 { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.item-card { display: flex; flex-direction: column; }
.item-card-img { display: block; background: var(--c-bg); }
.item-card-img img { width: 100%; height: 185px; object-fit: cover; display: block; }
.item-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.item-card-name { font-family: var(--font-head); font-weight: 600; font-size: 14.5px; color: var(--c-ink); line-height: 1.35; }
.item-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.item-price { color: var(--c-navy); font-weight: 700; font-size: 14px; white-space: nowrap; }
.pager { display: flex; gap: 8px; margin: 28px 0; flex-wrap: wrap; }
.pager a, .pager-cur {
    min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--c-line); border-radius: var(--r-sm); font-family: var(--font-head); font-weight: 600;
}
.pager a:hover { border-color: var(--c-red); color: var(--c-red); }
.pager-cur { background: var(--c-navy); border-color: var(--c-navy); color: #fff; }

/* ---------- Товарная страница ---------- */
.item-layout { display: grid; grid-template-columns: 420px 1fr; gap: 36px; margin-top: 8px; }
.item-photo { width: 100%; border-radius: var(--r-lg); border: 1px solid var(--c-line); background: var(--c-bg); object-fit: cover; }
.item-price-big { font-family: var(--font-head); font-size: 26px; font-weight: 800; color: var(--c-red); margin: 12px 0 4px; }
.item-note { color: var(--c-muted); font-size: 14px; }
.item-actions { display: flex; gap: 12px; margin: 20px 0; flex-wrap: wrap; }
.item-usp { list-style: none; padding: 0; margin: 12px 0 0; color: var(--c-muted); font-size: 14.5px; }
.item-usp li::before { content: "— "; color: var(--c-red); }
/* ---------- Калькулятор позиции (одобрен 04.11) ---------- */
.item-calc { margin-top: 26px; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-bg); padding: 18px; }
.ic-head { font-weight: 700; font-size: 15.5px; margin-bottom: 12px; }
.ic-seg { display: inline-flex; border: 1px solid var(--c-line); border-radius: 12px; overflow: hidden; }
.ic-seg button { background: transparent; color: var(--c-ink); border: 0; padding: 9px 15px; font-size: 13.5px; cursor: pointer; }
.ic-seg button.on { background: var(--c-red); color: #fff; font-weight: 700; }
.ic-input input { background: transparent; border: 1px solid var(--c-line); color: var(--c-ink); border-radius: 10px; padding: 10px 14px; font-size: 16px; width: 190px; margin-top: 12px; }
.ic-qlabel { color: var(--c-muted); font-size: 12.5px; margin-top: 5px; min-height: 16px; }
.ic-out { margin-top: 10px; font-size: 17.5px; min-height: 24px; }
.ic-out b { color: var(--c-red); }
.ic-ref { color: var(--c-muted); font-size: 13px; margin-top: 6px; }
.ic-chips { margin-top: 10px; }
.ic-chips-cap { color: var(--c-muted); font-size: 12.5px; margin-right: 6px; }
.ic-chip { display: inline-block; border: 1px solid var(--c-line); border-radius: 9px; padding: 5px 10px; margin: 0 6px 6px 0; cursor: pointer; font-size: 12.5px; }
.ic-chip:hover { border-color: var(--c-red); color: var(--c-red); }
.item-section { margin-top: 38px; }
.chars-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.chars-table th, .chars-table td { border: 1px solid var(--c-line); padding: 9px 13px; text-align: left; vertical-align: top; }
.chars-table th { background: var(--c-bg); font-weight: 600; width: 38%; }
.seo-text { color: var(--c-ink); margin-top: 10px; }
.seo-text img { border-radius: var(--r-sm); }
.seo-text table { border-collapse: collapse; }
.seo-text td, .seo-text th { border: 1px solid var(--c-line); padding: 7px 11px; }

/* ---------- Поиск ---------- */
.search-big { display: flex; gap: 12px; margin: 18px 0 26px; max-width: 640px; }
.search-big input { flex: 1; border: 1.5px solid var(--c-line); border-radius: var(--r-md); padding: 12px 16px; font: inherit; outline: 0; }
.search-big input:focus { border-color: var(--c-red); }
.search-group { margin-top: 30px; }
.search-group h2 { margin: 0 0 10px; font-size: 20px; }
.search-list { list-style: none; margin: 0; padding: 0; }
.search-list li { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--c-line); }
.search-list a { flex: 1; }

/* ---------- Корзина/форма ---------- */
.apex-cart-card { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 22px 26px; margin: 20px 0 40px; }
.cart-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--c-line); }
.cart-row:last-child { border-bottom: 0; }
.cart-row-name { flex: 1; font-family: var(--font-head); font-weight: 600; font-size: 14.5px; }
.cart-row-name a { color: var(--c-ink); }
.cart-row-unit { display: block; font-family: var(--font-body); font-weight: 400; font-size: 12.5px; color: var(--c-muted); margin-top: 2px; }
.cart-qty { display: inline-flex; align-items: center; gap: 8px; }
.cart-qty button { width: 30px; height: 30px; border: 1.5px solid var(--c-line); background: var(--c-panel); color: var(--c-ink); border-radius: var(--r-sm); cursor: pointer; font-weight: 700; }
.cart-qty button:hover { border-color: var(--c-red); color: var(--c-red); }
.cart-qty button:disabled { opacity: .35; cursor: default; }
.cart-qty button:disabled:hover { border-color: var(--c-line); color: var(--c-ink); }
.cart-qty .qty-val { min-width: 34px; text-align: center; font-weight: 700; }
.cart-qty .qty-input { width: 74px; text-align: center; font-weight: 700; padding: 5px 6px; border: 1.5px solid var(--c-line); background: var(--c-panel); color: var(--c-ink); border-radius: var(--r-sm); font: inherit; }
.cart-qty .qty-input:focus-visible { outline: 2px solid var(--c-amber); outline-offset: 1px; }
.cart-row-price { color: var(--c-navy); font-weight: 700; min-width: 110px; text-align: right; font-size: 14px; }
/* Заголовок таблицы корзины + «выбрано: N ед.» + счётчик позиций (владелец 05.11: непонятно, что выбрано) */
.cart-head { display: grid; grid-template-columns: 1fr 200px 150px 40px; gap: 14px; padding: 8px 0 10px; border-bottom: 2px solid var(--c-line); font-family: var(--font-head); font-weight: 700; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--c-muted); }
.cart-row-amount { min-width: 150px; font-size: 13px; color: var(--c-ink); }
.cart-row-amount b { color: var(--c-amber); font-weight: 700; }
.cart-sum { padding: 12px 0 2px; font-size: 14px; color: var(--c-muted); }
.cart-sum b { color: var(--c-ink); }
@media (max-width: 760px) {
  .cart-head { display: none; }
  .cart-row { flex-wrap: wrap; }
  .cart-row-amount { width: 100%; order: 5; }
}
.cart-del { border: 0; background: none; color: var(--c-muted); cursor: pointer; font-size: 19px; line-height: 1; padding: 4px; }
.cart-del:hover { color: var(--c-red); }
.apex-order-note { background: rgba(255, 158, 44, 0.08); border: 1px solid rgba(255, 158, 44, 0.28); border-radius: var(--r-md); padding: 12px 16px; font-size: 14px; color: var(--c-amber); margin: 16px 0; }
html.theme-light .apex-order-note { background: #fff7e8; border-color: #f2dfb6; color: #7a5b1c; }
.apex-order-form { margin-top: 8px; }
.apex-order-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.apex-field { display: flex; flex-direction: column; gap: 5px; }
.apex-field-full { grid-column: 1 / -1; }
.apex-field label { font-family: var(--font-head); font-weight: 600; font-size: 13px; }
.apex-field .req { color: var(--c-red); }
.apex-field input, .apex-field textarea {
    border: 1.5px solid var(--c-line); border-radius: var(--r-sm); padding: 10px 13px; font: inherit; outline: 0;
    transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.apex-field input:focus, .apex-field textarea:focus { border-color: var(--c-red); box-shadow: 0 0 0 3px rgba(255, 158, 44, 0.18); }
.apex-field input.is-invalid, .apex-field textarea.is-invalid { border-color: var(--c-red); }
.invalid_description { display: none; color: var(--c-red); font-size: 12.5px; }
.invalid_description.is-visible { display: block; }
.apex-checkbox { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; font-weight: 400 !important; font-family: var(--font-body) !important; cursor: pointer; }
.prose { max-width: 780px; font-size: 15.5px; line-height: 1.65; }
.prose h2 { font-size: 19px; margin: 26px 0 10px; }
.prose p { margin: 0 0 12px; }
.privacy-table { width: 100%; border-collapse: collapse; margin: 10px 0 16px; font-size: 14px; }
.privacy-table th, .privacy-table td { border: 1px solid var(--c-line); padding: 9px 12px; text-align: left; vertical-align: top; }
.privacy-table th { background: rgba(24, 40, 73, 0.04); font-family: var(--font-head); }
.cookie-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; max-width: 760px; margin: 0 auto; display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--c-navy); color: #fff; border-radius: 14px; padding: 14px 18px; font-size: 14px; box-shadow: 0 12px 34px rgba(16, 28, 54, 0.35); opacity: 0; transform: translateY(14px); transition: opacity var(--tr-med), transform var(--tr-med); }
.cookie-bar.is-shown { opacity: 1; transform: translateY(0); }
.cookie-bar a { color: #fff; text-decoration: underline; }
.cookie-bar .cookie-ok { padding: 9px 18px; font-size: 14px; flex: none; }
@media (max-width: 720px) { .cookie-bar { left: 12px; right: 12px; bottom: 74px; padding: 12px 14px; font-size: 13px; gap: 10px; } }
/* P0 (консилиум 02.11): пока cookie-баннер жив, страница получает отступ снизу —
   баннер не накрывает кнопки «Добавить в расчёт», sticky-CTA и строки таблиц. */
body.has-cookie-bar { padding-bottom: 130px; }
@media (max-width: 720px) { body.has-cookie-bar { padding-bottom: 150px; } }
.apex-hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.apex-order-actions { display: flex; align-items: center; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
#callback-status.is-ok { color: #1a7f4b; font-weight: 600; }
#callback-status.is-err { color: var(--c-red); font-weight: 600; }

/* ---------- Поля ввода в тёмной теме ---------- */
html:not(.theme-light) .hs input,
html:not(.theme-light) .search-big input,
html:not(.theme-light) .apex-field input,
html:not(.theme-light) .apex-field textarea {
    background: var(--c-panel); color: var(--c-navy); border-color: var(--c-line);
}
html:not(.theme-light) .hs input::placeholder,
html:not(.theme-light) .search-big input::placeholder,
html:not(.theme-light) .apex-field input::placeholder,
html:not(.theme-light) .apex-field textarea::placeholder { color: var(--c-muted); }
html:not(.theme-light) .privacy-table th { background: rgba(255, 255, 255, 0.045); }
html:not(.theme-light) .nfp-code { color: transparent; -webkit-text-stroke: 2px var(--c-amber); }
html:not(.theme-light) #callback-status.is-ok { color: #37b26f; }
/* Точечные исправления контраста тёмной темы */
html:not(.theme-light) .request-box { background: var(--c-card); }
html:not(.theme-light) .pager-cur { background: var(--c-red); border-color: var(--c-red); color: #14100a; }
html:not(.theme-light) .cookie-bar { background: var(--c-panel); border: 1px solid var(--c-line); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5); }
html:not(.theme-light) .chars-table th { background: var(--c-panel); }
.photo-credit { color: var(--c-muted); font-size: 12px; text-align: center; padding: 0 18px 26px; margin: -18px 0 0; }
.photo-credit a { color: var(--c-muted); text-decoration: underline; }

/* ---------- Каталог Б: кинолента-постеры (продакшн, утверждено 28.10.2026) ---------- */
.cat-intro { max-width: 720px; margin: -6px 0 8px; }
.cat-row { margin: 30px 0 10px; scroll-margin-top: 90px; }
.cat-row-first { margin-top: 16px; }
.cat-row-title { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 2px; }
.cat-row-title a { color: inherit; }
.cat-row-title a:hover { color: var(--c-red); }
.cat-row-count { font-family: var(--font-head); font-weight: 500; font-size: 13.5px; color: var(--c-muted); letter-spacing: 0.02em; }
.demo-poster-count { display: block; padding: 0 12px 12px; margin-top: -4px; font-size: 12px; color: var(--c-muted); }
.demo-poster-more { display: flex; align-items: center; justify-content: center; background: transparent; border: 1.5px dashed var(--c-line); }
.demo-poster-more .demo-poster-name { color: var(--c-red); font-size: 14px; }
.demo-poster-more:hover { border-style: solid; }
.demo-poster-note { display: flex; align-items: center; border-style: dashed; }
.demo-poster-note .demo-poster-name { color: var(--c-muted); font-weight: 400; }
.sec-kicker a { color: inherit; text-decoration: none; }
.sec-kicker a:hover { color: var(--c-red); }
html:not(.theme-light) .sec-kicker a:hover { color: var(--c-amber); }

/* ---------- Демо трёх вариантов каталога (только /catalog-demo/) ---------- */
.demo-switcher { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 18px 0 26px; font-size: 14px; color: var(--c-muted); }
.demo-switcher a { padding: 8px 16px; border: 1.5px solid var(--c-line); border-radius: 999px; font-family: var(--font-head); font-weight: 600; font-size: 13px; }
.demo-switcher a.is-cur { border-color: var(--c-red); color: var(--c-red); }
.demo-layout { display: grid; grid-template-columns: 280px 1fr; gap: 26px; align-items: start; }
.demo-filters { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 20px 22px; position: sticky; top: 84px; }
.demo-filters h3 { margin: 0 0 14px; }
.demo-fgroup { padding: 12px 0; border-top: 1px solid var(--c-line); }
.demo-flabel { font-family: var(--font-head); font-weight: 700; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 8px; }
.demo-fcheck { display: flex; gap: 8px; align-items: center; padding: 4px 0; font-size: 14.5px; cursor: pointer; }
.demo-fcheck small { color: var(--c-muted); margin-left: auto; }
.demo-filters .btn-apex { width: 100%; text-align: center; margin-top: 14px; }
.demo-reset { width: 100%; background: none; border: 0; color: var(--c-muted); cursor: pointer; padding: 10px 0 0; font-size: 13px; }
.demo-filters input[type=range] { width: 100%; accent-color: var(--c-red); }
.demo-range { display: flex; gap: 10px; align-items: center; font-size: 13.5px; }
.demo-toolbar { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; font-size: 14px; color: var(--c-muted); }
/* Вариант Б: кинолента */
.demo-billboard { border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 40px 44px; margin: 20px 0 34px; background: var(--c-card); }
.demo-bill-title { font-size: clamp(28px, 4vw, 46px); font-weight: 800; font-family: var(--font-head); margin-bottom: 8px; }
html:not(.theme-light) .demo-bill-title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; }
.demo-row { margin: 26px 0 8px; }
.demo-row-title { display: flex; align-items: baseline; gap: 16px; }
.demo-all { font-size: 13.5px; font-family: var(--font-head); font-weight: 600; color: var(--c-red); }
.demo-rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; padding: 10px 2px 16px; }
.demo-rail.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.demo-rail.is-drag .demo-poster { pointer-events: none; }
.demo-poster { scroll-snap-align: start; background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr); }
.demo-poster:hover { transform: translateY(-5px) scale(1.03); border-color: rgba(255, 158, 44, 0.5); box-shadow: var(--shadow-card), var(--glow); z-index: 2; position: relative; }
html.theme-light .demo-poster:hover { border-color: rgba(217, 72, 15, 0.45); box-shadow: var(--shadow-card); }
.demo-poster img { width: 100%; height: 128px; object-fit: cover; display: block; }
.demo-poster-name { display: block; padding: 10px 12px 12px; font-family: var(--font-head); font-weight: 600; font-size: 13px; line-height: 1.3; color: var(--c-ink); }
/* Вариант В: мастер-подбор */
.demo-wizard { max-width: 860px; }
.demo-steps { list-style: none; display: flex; gap: 10px; padding: 0; margin: 6px 0 26px; flex-wrap: wrap; }
.demo-steps li { flex: 1; min-width: 200px; border: 1.5px solid var(--c-line); border-radius: var(--r-md); padding: 12px 16px; font-size: 14px; color: var(--c-muted); }
.demo-steps li span { display: inline-flex; width: 24px; height: 24px; border-radius: 999px; border: 1.5px solid var(--c-line); align-items: center; justify-content: center; margin-right: 8px; font-family: var(--font-head); }
.demo-steps li.is-done { border-color: rgba(26, 156, 91, 0.5); color: var(--c-ink); }
.demo-steps li.is-cur { border-color: var(--c-red); color: var(--c-ink); }
.demo-steps li.is-cur span { border-color: var(--c-red); color: var(--c-red); }
.demo-choose { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.demo-choice { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 18px 20px; font-family: var(--font-head); font-weight: 600; font-size: 14.5px; transition: border-color var(--tr-fast), transform var(--tr-fast), box-shadow var(--tr); }
.demo-choice:hover { border-color: var(--c-red); transform: translateY(-3px); box-shadow: var(--glow); }
@media (max-width: 960px) { .demo-layout { grid-template-columns: 1fr; } .demo-filters { position: static; } }

/* ---------- Контакты ---------- */
.contacts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px; }
.contact-card { padding: 22px 26px; }
.contact-card h2 { margin-top: 0; }
.svc-card { padding: 22px 24px; }
.svc-card p { color: var(--c-muted); margin: 0; }

/* ---------- 404 ---------- */
.nfp { text-align: center; padding: 60px 0 90px; }
.nfp-code { font-family: var(--font-head); font-size: 110px; font-weight: 800; color: var(--c-bg); -webkit-text-stroke: 2px var(--c-red); line-height: 1; }
.nfp .hero-actions { justify-content: center; }

/* ---------- Футер ---------- */
.site-footer { background: var(--c-navy-deep); color: var(--c-muted); border-top: 1px solid var(--c-line); margin-top: 60px; padding: 44px 0 0; }
html.theme-light .site-footer { color: #aeb9cf; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 0.8fr 1fr; gap: 30px; padding-bottom: 30px; }
.foot-head { font-family: var(--font-head); color: var(--c-navy); font-weight: 700; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px; }
.foot-col a { display: block; color: var(--c-muted); padding: 3.5px 0; font-size: 14.5px; }
.foot-col a:hover { color: var(--c-navy); }
.foot-about p { font-size: 13.5px; line-height: 1.6; margin: 12px 0 0; }
.foot-phone { font-family: var(--font-head); font-size: 19px !important; font-weight: 800; color: var(--c-navy) !important; }
.foot-hours { font-size: 13px; margin-top: 8px; color: var(--c-muted); }
.foot-bottom { border-top: 1px solid var(--c-line); padding: 16px 18px; font-size: 13px; color: var(--c-muted); }
.foot-bottom a { color: var(--c-muted); text-decoration: underline; }
.foot-bottom a:hover { color: var(--c-navy); }

/* ---------- Sticky CTA (мобильные) ---------- */
.sticky-cta { display: none; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; }
.sticky-cta .btn-apex { display: block; text-align: center; }

/* ---------- Motion (scroll-reveal) ---------- */
.no-js [data-motion] { opacity: 1; transform: none; }
html.js [data-motion] { opacity: 0; transform: translateY(22px); transition: opacity var(--tr-slow), transform var(--tr-slow); }
[data-motion="left"] { transform: translateX(-28px); }
[data-motion="right"] { transform: translateX(28px); }
[data-motion="zoom"] { transform: scale(0.94); }
html.js [data-motion].is-in { opacity: 1; transform: none; }
/* Страховка: JS включён, но reveal не сработал — через 2.5с всё проявляется само */
html.js.motion-degraded [data-motion] { opacity: 1 !important; transform: none !important; }
[data-motion][data-motion-delay="1"] { transition-delay: 0.07s; }
[data-motion][data-motion-delay="2"] { transition-delay: 0.14s; }
[data-motion][data-motion-delay="3"] { transition-delay: 0.21s; }
[data-motion][data-motion-delay="4"] { transition-delay: 0.28s; }
[data-motion][data-motion-delay="5"] { transition-delay: 0.35s; }
[data-motion][data-motion-delay="6"] { transition-delay: 0.42s; }

/* ============================================================
   ГЛАВНАЯ «ПРОКАТ» (contact-sheet, утверждена владельцем 29.10.2026).
   Перенос из proto/prokat (гейт 0 FAIL). Префикс h-*, чтобы не
   конфликтовать со страницами каталога. Палитра — токены движка.
   Шрифт героя — Inter Tight с Google Fonts (кириллица; у dealt
   Work Sans кириллицы нет) — taste-skill-ignore: замена шрифта.
   ============================================================ */
.home { background: #0a0a0a; color: #efefef; font-family: "Inter Tight", "Roboto", "Segoe UI", sans-serif; }
.home a { color: inherit; }
/* G1-фикс (30.10): .home a{inherit} (0,1,1) перебивал класс кнопок (0,1,0) —
   на янтарном фоне рендерился светлый текст 1.36–1.99:1. Явный цвет с
   повышенной специфичностью для всех янтарных кнопок-<a>. */
.home a.steps-pri, .home a.h-go, .home a.h-btn-cat, .home a.mob-send { color: #14100a; }
.home a.h-go p { color: #14100a; }
.home :focus-visible { outline: 2px solid var(--c-amber); outline-offset: 2px; }
.home ::selection { background: var(--c-amber); color: #0a0a0a; }

/* --- ГЕРОЙ: lit strip, четыре угла ---
   31.10 #2 (владелец): min-height:100svh убран — на невысоких окнах под лентой
   оставалась пустота в 150–400px; герой теперь по контенту, интро подтянуто. */
.h-hero { position: relative; display: flex; flex-direction: column; padding: 44px 72px 28px; }
.h-corner { position: absolute; font-size: 14px; font-weight: 500; line-height: 1.45; }
.h-name { top: 44px; left: 72px; }
.h-name a { text-decoration: none; }
.h-link { top: 44px; right: 72px; }
.h-link a { text-decoration: none; }
.h-link a:hover { color: var(--c-amber); }
/* Кнопка-трубка в углу героя (вариант 1, владелец 31.10): круг меньше и
   сдержаннее футерного — не спорит с заголовком; номер раскрывается влево */
.call-chip--hero { display: inline-flex; align-items: center; gap: 10px; color: #efefef; }
.call-chip--hero .pulse { position: relative; width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #ffb254, #e8912a); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(255, 178, 84, .3); transition: transform .2s ease; }
.call-chip--hero .pulse svg { width: 19px; height: 19px; }
.call-chip--hero .pulse::before { content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid rgba(255, 178, 84, .5); animation: callPulse 1.8s ease-out infinite; }
.call-chip--hero .num { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transform: translateX(8px);
  transition: max-width .35s ease, opacity .25s ease, transform .35s ease;
  font-size: 16px; font-weight: 600; letter-spacing: .01em; }
.call-chip--hero:hover .num, .call-chip--hero:focus-visible .num { max-width: 190px; opacity: 1; transform: none; }
/* Тач-паритет: на устройствах без ховера номер виден сразу (жюри: на таче номер не показывался) */
@media (hover: none) {
  .call-chip--hero .num { max-width: 190px; opacity: 1; transform: none; }
}
.call-chip--hero:hover .pulse { transform: scale(1.06); }
.call-chip--hero:hover { color: #efefef; }
.call-chip--hero:focus-visible { outline: 2px solid var(--c-amber); outline-offset: 4px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  .call-chip--hero .pulse::before { animation: none; opacity: 0; }
  .call-chip--hero .num { transition: none; }
  .call-chip--hero:hover .pulse { transform: none; }
}
.h-sentence { bottom: 44px; left: 72px; max-width: 36ch; font-weight: 400; color: #9a9a9a; }
.h-action { bottom: 44px; right: 72px; }
.h-action a { display: inline-block; text-decoration: none; border: 1px solid var(--c-amber); padding: 11px 18px; min-height: 44px; }
.h-action a:hover { background: var(--c-amber); color: #0a0a0a; }
.h-strip { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin: 0 -72px; align-items: flex-start; }
.h-strip::-webkit-scrollbar { display: none; }
/* Лента (владелец 02.11, повтор): как на /new2 — фото натуральной ширины при общей
   высоте (растянуты одинаково по высоте), без кропа; плавный переход — snap + smooth-скролл.
   Подписи (владелец 02.11, уточнение): под КАЖДЫМ фото — стиль подписей masonry
   (13px, серый, предложение), подсвеченный кадр чуть ярче.
   .shot обрезает ken-burns-масштаб кадра: без него растянутая картинка наезжает на подпись. */
.h-strip figure { flex: 0 0 auto; margin: 0; scroll-snap-align: center; }
.h-strip .shot { display: block; height: calc(34vh - 36px); min-height: 200px; overflow: hidden; background: #151515; }
.h-strip img { height: 100%; width: auto; display: block; filter: brightness(0.55); background: #151515; transition: filter .45s ease, opacity .7s ease, transform .9s cubic-bezier(.19,1,.22,1); }
.h-strip figure.lit img { filter: brightness(1); }
.h-strip figcaption { font-size: 13px; line-height: 1.3; color: #9a9a9a; margin-top: 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-bottom: 4px; transition: color .35s ease; }
.h-strip figure.lit figcaption { color: #e8e4dc; }
@keyframes hKen { from { transform: scale(1); } to { transform: scale(1.055); } }
@media (prefers-reduced-motion: no-preference) {
  .h-strip.go .shot img { animation: hKen 9s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -1.5s); }
  .h-strip.go figure:nth-child(2n) .shot img { animation-delay: calc(var(--i, 0) * -1.5s - 4.5s); }
  .h-strip.go .shot img { transition-delay: calc(var(--i, 0) * 60ms); }
}
.h-strip figure:first-child { opacity: 0; transform: translateX(-40px); }
.h-strip.go figure { opacity: 1; transform: none; }
.h-cap { font-size: 14px; color: #9a9a9a; margin-top: 10px; }
.h-display { font-size: clamp(36px, 4.6vw, 66px); font-weight: 300; letter-spacing: -0.02em; line-height: 1.05; max-width: 20ch; overflow-wrap: break-word; min-width: 0; margin: 0 0 18px; font-family: inherit; }
.h-display em { font-style: normal; color: var(--c-amber); }
.h-hero-sub { font-size: 19px; line-height: 1.45; color: #b8b8b8; max-width: 56ch; margin: 0 0 22px; }
.h-hero-cta { margin: 0 0 64px; } /* золотая середина 31.10: было 40 (тесно), до этого 100svh-герой (пусто) */
.h-btn-cat { display: inline-block; text-decoration: none; background: linear-gradient(135deg, var(--c-amber), var(--c-amber-deep)); color: #14100a; font-family: var(--font-head); font-weight: 700; font-size: 15px; letter-spacing: 0.01em; padding: 13px 24px; min-height: 44px; transition: filter var(--tr-fast), transform var(--tr-fast); }
.h-btn-cat:hover { filter: brightness(1.07); color: #14100a; transform: translateY(-1px); }
@media (max-width: 760px) {
  .h-hero { padding: 20px; display: block; }
  .h-corner { position: static; }
  .h-name { margin-bottom: 8px; }
  /* Фикс аудита 30.10 (D1): уголок-телефон перекрывал h1 на 390px
     (overlap 2287 px²). Телефон остаётся в mob-bar «Позвонить» и футере-CTA. */
  .h-link { display: none; }
  .h-strip { margin: 24px -20px 0; }
  .h-strip .shot { height: calc(46vh - 30px); min-height: 150px; }
  .h-strip figcaption { font-size: 12px; }
  .h-hero-sub { font-size: 16.5px; margin-bottom: 16px; }
  .h-hero-cta { margin-bottom: 24px; }
  .h-sentence { margin-top: 24px; }
  .h-action { display: inline-block; margin-top: 12px; }
}

/* --- ИНТРО --- */
.h-intro { padding: 104px clamp(16px, 1.2vw, 20px) 72px; } /* верх 104 = воздух после ленты+подписи (золотая середина 31.10: было 40 тесно, 96+герой-100svh пусто) */
.h-intro-lead { font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; }
.h-intro-cols { margin-top: 72px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.h-intro-cols p { font-size: 16px; line-height: 1.45; color: #9a9a9a; max-width: 34ch; margin: 0; }
.h-intro-cols b { color: #efefef; font-weight: 500; }
@media (max-width: 980px) { .h-intro-cols { grid-template-columns: 1fr 1fr; row-gap: 40px; } }
@media (max-width: 560px) { .h-intro-cols { grid-template-columns: 1fr; } }

/* --- ЛИСТ: masonry --- */
.h-sheet { padding: 64px clamp(16px, 1.2vw, 20px) 96px; }
.h-sheet h2 { font-size: 28px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 40px; color: #efefef; font-family: inherit; }
.h-statement { font-size: 22px; line-height: 1.3; max-width: 30ch; margin: 0 0 64px 66%; overflow-wrap: break-word; min-width: 0; }
.h-masonry { columns: 6; column-gap: 4px; }
.h-masonry figure { break-inside: avoid; margin: 0 0 20px; position: relative; overflow: hidden; transition: transform .45s cubic-bezier(.19,1,.22,1); }
.h-masonry figure:hover { transform: translateY(-3px); }
.h-masonry img { width: 100%; background: #151515; transition: opacity .3s ease, transform .45s cubic-bezier(.19,1,.22,1); }
.h-masonry:hover img { opacity: 0.45; }
.h-masonry figure:hover img { opacity: 1; transform: scale(1.04); }
.h-masonry figcaption { font-size: 13px; color: #9a9a9a; margin-top: 6px; line-height: 1.3; }
.h-masonry figcaption a { color: #cfcfcf; text-decoration: none; border-bottom: 1px solid rgba(207,207,207,.35); transition: color .2s ease, border-color .2s ease; }
.h-masonry figcaption a:hover { color: var(--c-amber); border-color: var(--c-amber); }
@media (max-width: 1100px) { .h-masonry { columns: 4; } }
@media (max-width: 760px) {
  .h-masonry { columns: 2; column-gap: 4px; }
  .h-statement { margin-left: 0; font-size: 19px; }
}

/* --- КАК ПРОХОДИТ ЗАКАЗ: пять шагов (концепт 2, анимация C, кнопка №5) --- */
:root { --ease-ui: cubic-bezier(0.23, 1, 0.32, 1); }
.h-steps { padding: 84px clamp(16px, 1.2vw, 20px) 96px; }
.h-steps h2 { font-size: 28px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 10px; color: #efefef; font-family: inherit; }
.h-steps-sub { margin: 0 0 52px; color: #9a9a9a; font-size: 15.5px; }
.steps { --prog: 0; position: relative; max-width: 820px; }
.steps::before { content: ''; position: absolute; left: 27px; top: 20px; bottom: 20px; width: 2px; background: #242424; }
.steps::after { content: ''; position: absolute; left: 27px; top: 20px; width: 2px; bottom: 20px; background: var(--c-amber); opacity: .8; transform: scaleY(var(--prog)); transform-origin: top; transition: transform .35s var(--ease-ui); }
/* Фикс консилиума 31.10: шаги видимы по умолчанию (контент не прячем ни от кого —
   печать, боты, сбой JS). Сворачивание для анимации включается ТОЛЬКО скриптом
   через класс .steps--anim на контейнере; .step[style] перекрывает базу. */
.step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 26px; padding: 0 0 38px; opacity: 1; }
.steps--anim .step { opacity: 0; transform: translateY(24px); }
.step:last-child { padding-bottom: 0; }
.step.anim-in { opacity: 1; transform: none; transition: opacity .5s var(--ease-ui), transform .5s var(--ease-ui); }
.step-n { width: 56px; height: 56px; border-radius: 50%; background: #161616; border: 1px solid #2c2c2c; display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 600; color: #8a8a8a; position: relative; z-index: 1; transition: background .4s ease, border-color .4s ease, color .4s ease; }
.step.on .step-n { background: var(--c-amber); border-color: var(--c-amber); color: #111; }
.step h3 { margin: 4px 0 8px; font-size: 21px; font-weight: 600; color: #efefef; }
.step.on h3 { color: #fff; }
.step p { margin: 0; color: #9a9a9a; font-size: 15.5px; line-height: 1.55; max-width: 600px; }
.step .tag { display: inline-block; margin-top: 10px; color: var(--c-amber); font-size: 14px; }
.steps-cta { margin-top: 44px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.steps-pri { display: inline-block; background: linear-gradient(180deg, #ffc477, var(--c-amber) 55%, #e89b3c); color: #14100a; font-weight: 700; font-size: 16px; padding: 16px 36px; text-decoration: none; box-shadow: 0 6px 18px rgba(255,178,84,.25); transition: filter .2s ease, box-shadow .2s ease; }
.steps-pri:hover { filter: brightness(1.06); box-shadow: 0 8px 22px rgba(255,178,84,.35); }
@media (prefers-reduced-motion: reduce) {
  .step { opacity: 1; transform: none; }
  .steps::after { transform: none; transition: opacity .2s ease; }
  .steps-pri { transition: none; }
}
@media print {
  .step { opacity: 1 !important; transform: none !important; }
  [data-motion] { opacity: 1 !important; transform: none !important; }
}
@media (max-width: 760px) {
  .step { grid-template-columns: 44px 1fr; gap: 16px; }
  .step-n { width: 44px; height: 44px; font-size: 16px; }
  .steps::before, .steps::after { left: 21px; }
  /* Фикс аудита 30.10 (D2): пустой хвост 652px между шагами и кнопкой на мобиле —
     секция стартовала с 1 видимым шагом; CTA получает воздух от последнего шага */
  .steps-cta { margin-top: 56px; }
}

/* --- НОМЕНКЛАТУРА: колонки имён --- */
.h-names { padding: 64px clamp(16px, 1.2vw, 20px); }
.h-names h2 { font-size: 28px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 48px; color: #efefef; font-family: inherit; }
.h-names-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.h-stack:nth-child(1) { grid-column: 1 / 5; }
.h-stack:nth-child(2) { grid-column: 5 / 9; }
.h-stack:nth-child(3) { grid-column: 9 / 13; }
.h-names-desc { grid-column: 1 / 13; min-height: 1.5em; font-size: 16px; line-height: 1.45; color: #efefef; margin: 48px 0 0; }
.h-stack h3 { font-size: 17px; font-weight: 500; color: #efefef; margin: 0 0 16px; font-family: inherit; }
.h-stack ul { list-style: none; margin: 0; padding: 0; }
.h-stack li { margin-bottom: 8px; }
.h-stack li a { font-size: 17px; line-height: 1.25; color: #9a9a9a; text-decoration: none; }
.h-stack li a:hover, .h-stack li a:focus-visible { color: #efefef; }
@media (max-width: 980px) {
  .h-stack:nth-child(n) { grid-column: 1 / -1; margin-bottom: 40px; }
  .h-stack li a { font-size: 18px; line-height: 1.4; }
  .h-stack li a::after { content: attr(data-note); display: block; color: #9a9a9a; font-size: 14px; }
}
/* на планшете имена в две колонки: одна колонка на всю ширину читалась как «пустая половина» */
@media (max-width: 980px) and (min-width: 761px) {
  .h-names-grid { grid-template-columns: 1fr 1fr; }
  .h-stack:nth-child(n) { grid-column: auto; margin-bottom: 32px; }
}

/* --- УСЛОВИЯ --- */
.h-terms { padding: 72px clamp(16px, 1.2vw, 20px) 96px; }
.h-terms-head { display: flex; gap: 24px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; margin-bottom: 18px; }
.h-terms-head h2 { font-size: 28px; font-weight: 500; letter-spacing: -0.01em; margin: 0; color: #efefef; font-family: inherit; }
.h-terms-lead { color: #9a9a9a; font-size: 15px; margin: 0; }
.h-terms-tag { display: inline-block; background: var(--c-amber); color: #14100a; font-weight: 600; font-size: 13px; padding: 7px 14px; }
.h-terms-v4 .h-terms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 0; }
.h-band { border: 1px solid #1f1f1f; background: #111; }
.h-band img { width: 100%; height: 170px; object-fit: cover; background: #151515; display: block; }
.h-band:hover img { filter: brightness(1.12); }
.h-band-pad { padding: 0 16px 18px; }
.h-band h3 { font-size: 17px; font-weight: 500; margin: 14px 0 0; color: #efefef; font-family: inherit; }
.h-band h3::before { content: '✓ '; color: var(--c-amber); }
.h-band h3 span { color: #9a9a9a; font-weight: 400; }
.h-band p { font-size: 15.5px; line-height: 1.45; color: #9a9a9a; margin: 6px 0 0; }
.h-band h3 { font-size: 16px; font-weight: 500; margin: 10px 0 0; color: #efefef; font-family: inherit; }
.h-band h3 span { color: #9a9a9a; font-weight: 400; }
.h-band p { font-size: 16px; line-height: 1.45; color: #9a9a9a; margin: 6px 0 0; }
@media (max-width: 760px) {
  .h-terms-head { flex-direction: column; gap: 10px; }
  .h-terms-v4 .h-terms-grid { grid-template-columns: 1fr; gap: 24px; }
  .h-band img { height: 160px; }
}

/* --- ВОПРОСЫ: аккордеон (вариант 4, Stripe-паттерн) --- */
.h-faq { padding: 40px clamp(16px, 1.2vw, 20px) 96px; }
.h-faq h2 { font-size: 28px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 40px; color: #efefef; font-family: inherit; }
.h-faq-acc { max-width: 1060px; }
.h-faq-acc details { border-top: 2px solid #2e2e2e; }
.h-faq-acc details:last-of-type { border-bottom: 2px solid #2e2e2e; }
.h-faq-acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 20px; padding: 22px 4px; font-size: 18px; font-weight: 500; color: #efefef; transition: color .2s ease; }
.h-faq-acc summary:hover { color: var(--c-amber); }
.h-faq-acc summary::-webkit-details-marker { display: none; }
.h-faq-acc summary .ic { margin-left: auto; color: var(--c-amber); font-size: 26px; font-weight: 400; line-height: 1; min-width: 26px; text-align: center; transition: transform .25s ease; }
.h-faq-acc summary:focus-visible { outline: 2px solid var(--c-amber); outline-offset: 2px; }
.h-faq-acc details[open] summary .ic { transform: rotate(45deg); }
.h-faq-body { padding: 0 4px 24px 4px; color: #9a9a9a; font-size: 16.5px; line-height: 1.55; max-width: 72ch; }
.h-faq-bridge { margin-top: 48px; padding: 28px 32px; background: #111; border: 1px solid #1f1f1f; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; max-width: 1060px; }
.h-faq-bridge p { margin: 0; font-size: 19px; font-weight: 500; color: #efefef; }
.h-faq-bridge a { margin-left: auto; background: var(--c-amber); color: #14100a; text-decoration: none; font-weight: 600; font-size: 15px; padding: 14px 26px; transition: filter .2s ease; }
.h-faq-bridge a:hover { filter: brightness(1.08); }
.home a.h-faq-bridge a { color: #14100a; }
@media (max-width: 980px){
  .h-faq-bridge { padding: 22px 20px; }
  .h-faq-bridge a { margin-left: 0; width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .h-faq-acc summary .ic, .h-faq-acc summary, .h-faq-bridge a { transition: none; }
}

/* --- ФОРМА ЗАЯВКИ (CTA): вариант 1 «панель с фото» ---
   31.10 #2 (владелец): панель на всю ширину страницы, компактнее по высоте. */
.h-cta { padding: 24px clamp(16px, 1.2vw, 20px) 72px; } /* верх 24: блок ужат сверху по владельцу 31.10 (было 40) */
.h-cta--wide {
  max-width: none;
  margin-left: -8px; margin-right: -8px; /* full-bleed: край футера 8px */
  padding-left: 24px; padding-right: 24px;
}
.h-cta h2 { font-size: 28px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 12px; color: #efefef; font-family: inherit; }
.h-cta-sub { color: #9a9a9a; font-size: 16px; margin: 0 0 24px; }
.h-cta-panel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); background: #111; border: 1px solid #1f1f1f; }
@media (max-width: 980px) { .h-cta-panel { grid-template-columns: 1fr; } }
.h-cta-left { padding: 32px 44px; min-width: 0; } /* 40→32: ужато сверху по владельцу */
@media (max-width: 640px) { .h-cta-left { padding: 28px 20px; } }
.h-cta-right { position: relative; border-left: 1px solid #1f1f1f; display: flex; flex-direction: column; justify-content: flex-end; min-height: 420px; overflow: hidden; }
@media (max-width: 980px) { .h-cta-right { border-left: 0; border-top: 1px solid #1f1f1f; min-height: 240px; } }
.h-cta-right img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.h-cta-info { position: relative; padding: 28px; background: linear-gradient(transparent, rgba(10,10,10,.92) 40%); } /* мёртвый класс: текст с фото снят 31.10 по владельцу */
.req-form { margin-top: 28px; max-width: 560px; }
.req-form .form-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.req-form .form-field { display: block; margin-bottom: 16px; }
.req-form .form-field > span { display: block; font-size: 14px; color: #9a9a9a; margin-bottom: 6px; }
.req-form input[type="text"], .req-form input[type="tel"], .req-form textarea {
  width: 100%; background: #151515; border: 1px solid #2c2c2c; color: #efefef;
  font: inherit; padding: 12px 14px; min-height: 44px; overflow-wrap: break-word; min-width: 0;
}
.req-form textarea { resize: vertical; }
.req-form input:focus, .req-form textarea:focus { outline: 2px solid var(--c-amber); outline-offset: 0; border-color: var(--c-amber); }
.req-form input::placeholder, .req-form textarea::placeholder { color: #8a8a8a; }
.req-form .form-file input[type="file"] { font-size: 14px; color: #9a9a9a; max-width: 100%; }
/* Фикс консилиума 31.10: file-инпут в теме (нативная кнопка выбивалась) */
.req-form .form-file input[type="file"]::file-selector-button {
  font-family: var(--font-head); font-weight: 600; font-size: 13.5px;
  background: #181818; color: #efefef; border: 1px solid #2c2c2c;
  padding: 9px 16px; margin-right: 12px; cursor: pointer;
  transition: border-color var(--tr-fast), color var(--tr-fast);
}
.req-form .form-file input[type="file"]::file-selector-button:hover { border-color: var(--c-amber); color: var(--c-amber); }
/* Состояния ошибки/успеха: поле с ошибкой + текст у поля */
.req-form .form-field.is-error input, .req-form .form-field.is-error textarea { border-color: #e5484d; }
.req-form .form-field .field-err { display: none; font-size: 12.5px; color: #e5484d; margin-top: 5px; }
.req-form .form-field.is-error .field-err { display: block; }
.req-form .form-status.is-ok { color: #4cc38a; }
.req-form .form-status.is-err { color: #e5484d; }
.req-form button[type="submit"][disabled] { opacity: .6; cursor: wait; }
.req-form .form-file small { display: block; font-size: 13px; color: #8a8a8a; margin-top: 4px; }
.req-form .form-consent { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 20px; cursor: pointer; flex-wrap: wrap; }
.req-form .form-consent .field-err { flex: 1 1 100%; }
.req-form .form-consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--c-amber); flex: 0 0 auto; }
.req-form .form-consent span { font-size: 13px; line-height: 1.45; color: #9a9a9a; overflow-wrap: break-word; min-width: 0; }
.req-form .form-consent a { color: #efefef; text-decoration: underline; }
.req-form .form-status { margin-top: 14px; font-size: 15px; color: var(--c-amber); min-height: 1.4em; overflow-wrap: break-word; min-width: 0; }
@media (max-width: 640px) { .req-form .form-cols { grid-template-columns: 1fr; } }
.h-btn {
  display: inline-block; background: var(--c-amber); color: #0a0a0a; font-size: 16px;
  padding: 12px 20px; min-height: 44px; text-decoration: none; font-weight: 500;
  border: 0; cursor: pointer; font-family: inherit;
}
.h-btn:hover { background: #efefef; }
.h-cta-row a.text { font-size: 16px; text-decoration: none; border-bottom: 1px solid #9a9a9a; padding-bottom: 1px; color: #efefef; }
.h-cta-row a.text:hover { color: var(--c-amber); border-color: var(--c-amber); }

/* --- ФУТЕР вариант 1 (Linear): CTA-полоса с видео-фоном + колонки --- */
.h-foot { padding: 0 8px 8px; }
.h-fcta { position: relative; overflow: hidden; background: #0d0d0d; border: 1px solid #1f1f1f; padding: 88px 20px; text-align: center; }
.h-fcta-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.h-fcta-video.ready { opacity: .45; }
.h-fcta-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(10,10,10,.25) 0%, rgba(10,10,10,.82) 100%); }
.h-fcta-inner { position: relative; }
.h-fcta-inner h2 { font-size: clamp(34px, 4.6vw, 56px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.08; margin: 0 0 30px; color: #fff; }
.h-fcta-inner .row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.h-fcta-inner .pri { background: var(--c-amber); color: #14100a; text-decoration: none; font-weight: 600; font-size: 16px; padding: 15px 30px; transition: background .2s ease; }
.h-fcta-inner .pri:hover { background: #efefef; }
.h-fcta-inner .sec { border: 1px solid #555; color: #efefef; text-decoration: none; font-weight: 500; font-size: 16px; padding: 15px 30px; background: rgba(10,10,10,.4); transition: border-color .2s ease, color .2s ease; }
.h-fcta-inner .sec:hover { border-color: var(--c-amber); color: var(--c-amber); }
.home a.h-fcta-inner .pri, .home a.h-fcta-inner .sec { }
@media (prefers-reduced-motion: reduce) {
  .h-fcta-video { display: none; }
  .h-fcta-shade { background: #0d0d0d; }
}
.h-fcols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding: 56px 12px; }
@media (max-width: 980px) { .h-fcols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .h-fcols { grid-template-columns: 1fr; } }
.h-fabout p { font-size: 20px; line-height: 1.35; max-width: 22ch; margin: 0; color: #efefef; }
.h-fabout .tel { display: inline-block; margin-top: 18px; font-size: 22px; font-weight: 600; text-decoration: none; color: var(--c-amber); }
.h-fabout .mail { display: block; margin-top: 6px; font-size: 14px; color: #9a9a9a; text-decoration: none; }
.h-fabout .mail:hover { color: #efefef; }
.h-fcol h4 { font-size: 13.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #777; margin: 0 0 16px; }
.h-fcol ul { list-style: none; margin: 0; padding: 0; }
.h-fcol li { margin-bottom: 11px; color: #9a9a9a; }
.h-fcol a { font-size: 15.5px; text-decoration: none; color: #c9c9c9; }
.h-fcol a:hover { color: var(--c-amber); }
.h-fbottom { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; padding: 22px 12px 26px; color: #777; font-size: 13.5px; }
.h-fbottom .brand { font-weight: 600; color: #9a9a9a; }
.h-fbottom .credits { margin-left: auto; }
@media (max-width: 760px) {
  .h-fcta { padding: 56px 16px; }
  .h-fcta-inner h2 { font-size: 30px; }
  .h-fbottom .credits { margin-left: 0; width: 100%; }
  .h-foot { padding-bottom: 168px; } /* пустое место под фиксированную cookie-плашку: она не накрывает янтарную плитку (гейт covered-text) */
}

/* --- МОБИЛЬНАЯ ПЛАШКА КОНТАКТОВ (главная) --- */
.mob-bar { display: none; }
@media (max-width: 760px) {
  .mob-bar {
    display: grid; grid-template-columns: 1fr 1.4fr; position: fixed;
    left: 0; right: 0; bottom: 0; z-index: 55;
    background: rgba(10, 10, 10, .96);
  }
  .mob-bar a { display: flex; align-items: center; justify-content: center; min-height: 52px; font-size: 16px; font-weight: 500; text-decoration: none; }
  .mob-call { color: #efefef; }
  .mob-send { background: var(--c-amber); color: #14100a; font-weight: 600; }
  .mob-send:hover { background: #efefef; color: #14100a; }
}

/* --- Главная скрывает общий футер/CTA движка (у неё свои) --- */
.home .site-footer, .home .sticky-cta { display: none; }
/* Фикс аудита 30.10 (D4): lead-строка, уходя под sticky-шапку, просвечивала
   сквозь полупрозрачное «стекло» и смешивалась с логотипом. На главной шапка
   непрозрачная (переменная --header-bg общая, её не трогаем). */
.home .site-header { background: #0a0c0f; }
@media (prefers-reduced-motion: reduce) {
  .h-strip img { filter: none; transition: none; opacity: 1; transform: none; animation: none; }
  .h-strip img:first-child { opacity: 1; transform: none; }
  .h-masonry img { transition: none; }
  .h-masonry figure:hover img { transform: none; }
  .h-masonry figure:hover { transform: none; }
}


/* ============================================================
   ПРАВКИ 31.10 (владелец, 5 скринов главной):
   1) видео-CTA футера — на всю ширину, без рамки, без кнопок;
   2) угловые «Цена по запросу»/«Запросить расчёт» героя убраны (HTML);
   3) интро-надпись без хвоста + кнопка «Запросить расчёт»;
   4) кнопка «Наверх» слева внизу;
   5) единая геометрия блоков (один боковой отступ + общая ширина).
   ============================================================ */
/* 5) Единая геометрия: все h-секции имеют одинаковый боковой отступ
   clamp(16px,1.2vw,20px); контент выровнен по общей ширине 1180px. */
.h-intro, .h-sheet, .h-steps, .h-terms, .h-faq, .h-cta {
  max-width: calc(var(--wrap) + 2 * clamp(16px, 1.2vw, 20px));
  margin-left: auto; margin-right: auto;
}
.h-fcols { max-width: calc(var(--wrap) + 24px); margin-left: auto; margin-right: auto; }
/* 1) Видео-CTA: full-bleed — футер сам на всю ширину (padding 0 8px),
   выходим на край отрицательными полями — без 100vw и горизонтального скролла */
.h-fcta.wide {
  margin-left: -8px; margin-right: -8px;
  border: 0;
  padding: 150px 20px;
}
.h-fcta.wide .h-fcta-inner h2 { font-size: clamp(40px, 5.4vw, 72px); margin: 0; }
@media (max-width: 760px) { .h-fcta.wide { padding: 96px 16px; } }
/* Плашка «Трубка» (вариант 1, владелец 31.10): пульсирующий круг в правом
   нижнем углу видео-полосы; вся плашка — ссылка tel:, номер в разметке — текст */
.h-fcta .call-chip {
  position: absolute; right: 28px; bottom: 28px; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: #efefef;
}
.h-fcta .call-chip svg { display: block; }
.h-fcta .call-chip .pulse {
  position: relative; width: 56px; height: 56px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(135deg, #ffb254, #e8912a);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(255, 178, 84, .35);
  transition: transform .2s ease;
}
.h-fcta .call-chip .pulse::before {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(255, 178, 84, .55);
  animation: callPulse 1.8s ease-out infinite;
}
@keyframes callPulse {
  0% { transform: scale(.9); opacity: .9; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
.h-fcta .call-chip .num {
  max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transform: translateX(-8px);
  transition: max-width .35s ease, opacity .25s ease, transform .35s ease;
  font-size: 20px; font-weight: 600; letter-spacing: .01em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .8);
}
.h-fcta .call-chip:hover .num, .h-fcta .call-chip:focus-visible .num { max-width: 220px; opacity: 1; transform: none; }
.h-fcta .call-chip:hover .pulse { transform: scale(1.06); }
.h-fcta .call-chip .cap {
  font-size: 13px; color: #e6e6e6; max-width: 170px; line-height: 1.35;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .9);
}
.h-fcta .call-chip:focus-visible { outline: 2px solid var(--c-amber); outline-offset: 4px; border-radius: 4px; }
@media (max-width: 760px) {
  .h-fcta .call-chip { right: 14px; bottom: 14px; }
  .h-fcta .call-chip .cap { display: none; } /* на телефоне — только круг */
}
@media (prefers-reduced-motion: reduce) {
  .h-fcta .call-chip .pulse::before { animation: none; opacity: 0; }
  .h-fcta .call-chip .num { transition: none; }
  .h-fcta .call-chip:hover .pulse { transform: none; }
}
/* 3) Кнопка под интро-надписью */
.h-intro-act { margin: 28px 0 0; }
.h-intro-act a {
  display: inline-block; text-decoration: none;
  background: linear-gradient(135deg, var(--c-amber), var(--c-amber-deep));
  color: #14100a; font-family: var(--font-head); font-weight: 700;
  font-size: 15px; letter-spacing: 0.01em; padding: 13px 24px; min-height: 44px;
  transition: filter var(--tr-fast), transform var(--tr-fast);
}
.h-intro-act a:hover { filter: brightness(1.07); color: #14100a; transform: translateY(-1px); }
@media (max-width: 760px) { .h-intro-act { margin-top: 20px; } }
/* 4) Кнопка «Наверх»: слева внизу, появляется после первого экрана */
.to-top {
  position: fixed; left: 22px; bottom: 22px; z-index: 80;
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  background: rgba(17, 17, 17, .92); border: 1px solid #2e2e2e; color: #efefef;
  cursor: pointer; transition: border-color var(--tr-fast), color var(--tr-fast), transform var(--tr-fast);
}
.to-top:hover { border-color: var(--c-amber); color: var(--c-amber); transform: translateY(-2px); }
.to-top:focus-visible { outline: 2px solid var(--c-amber); outline-offset: 2px; }
.to-top[hidden] { display: none; }
@media (max-width: 760px) {
  .to-top { left: 12px; bottom: 76px; } /* выше моб-плашки (52px + запас) */
}
@media (prefers-reduced-motion: reduce) {
  .to-top, .h-intro-act a { transition: none; }
  .h-intro-act a:hover { transform: none; }
  .to-top:hover { transform: none; }
}

/* ---------- Тост ---------- */
.apex-toast {
    position: fixed; right: 18px; bottom: 18px; z-index: 90; background: var(--c-panel); color: var(--c-navy);
    border: 1px solid var(--c-line);
    padding: 12px 20px; border-radius: var(--r-md); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3);
    font-family: var(--font-head); font-weight: 600; font-size: 14px; opacity: 0; transform: translateY(12px);
    transition: opacity var(--tr), transform var(--tr); pointer-events: none;
}
.apex-toast.is-in { opacity: 1; transform: none; }

/* ---------- Адаптив ---------- */
@media (max-width: 960px) {
    .item-layout { grid-template-columns: 1fr; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
    .contacts-grid { grid-template-columns: 1fr; }
    .hs { width: 170px; padding: 9px 12px; }
    .main-nav { display: none; }
    .header-cta { display: none; }
    .head-phone { display: none; }
    .header-grid { grid-template-columns: auto 1fr auto auto auto auto; gap: 10px; }
    .burger { display: inline-flex; flex-direction: column; gap: 4px; background: none; border: 0; cursor: pointer; padding: 8px; }
    .burger span { width: 22px; height: 2.5px; background: var(--c-navy); border-radius: 2px; transition: transform var(--tr-fast), opacity var(--tr-fast); }
    .burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .burger.is-open span:nth-child(2) { opacity: 0; }
    .burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
    .main-nav.is-open {
        display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
        background: var(--c-page); border-bottom: 1px solid var(--c-line); padding: 14px 22px; gap: 4px;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
    }
    .main-nav.is-open a { padding: 10px 0; border-bottom: 1px solid var(--c-line); }
    .sticky-cta { display: block; }
}
@media (max-width: 640px) {
    .apex-order-grid { grid-template-columns: 1fr; }
    .foot-grid { grid-template-columns: 1fr; }
    /* Мобильный поиск (P0, консилиум 02.11): не прячем, а вторая строка шапки.
       Инпут делаем реальным полем (на десктопе он невидим под .hs-ph-заглушкой). */
    .header-grid { grid-template-columns: auto 1fr auto auto; grid-template-rows: auto auto; row-gap: 8px; padding-bottom: 10px; }
    .head-phone { display: none; }
    .hs-wrap { display: block; grid-column: 1 / -1; grid-row: 2; }
    .hs { width: 100%; position: relative; }
    .hs input {
        position: static; opacity: 1; pointer-events: auto;
        width: 100%; border: 0; background: none; color: var(--c-ink);
        font: inherit; font-size: 15px; padding: 0; outline: none; min-width: 0; flex: 1;
    }
    .hs-ph { display: none; }
    .hero { padding: 44px 0 40px; }
    .hero-points { gap: 12px; flex-direction: column; }
    .cart-row { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
    [data-motion] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .btn-apex::after { display: none; }
    .btn-apex, .card-apex { transition: none !important; transform: none !important; }
    body { animation: none !important; }
    html { scroll-behavior: auto; }
}

/* ============================================================
   Размерный ряд страницы типа («товар»), 31.10. SSR: все панели
   и строки таблицы уже в HTML; JS только переключает hidden.
   ============================================================ */
.visually-hidden {
    position: fixed; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.size-block { margin-top: 26px; }
.size-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.size-title { font-family: var(--font-head); font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.size-all {
    background: none; border: 0; color: var(--c-amber); font: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer; padding: 6px 8px; border-radius: var(--r-sm);
}
.size-all:hover { text-decoration: underline; }
.size-all:focus-visible { outline: 2px solid var(--c-amber); outline-offset: 2px; }

.size-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; min-width: 0; max-width: 100%; }
.size-chip { flex-shrink: 0; }
.size-chip {
    min-height: 44px; padding: 8px 16px; border-radius: var(--r-sm);
    background: var(--c-panel); border: 1px solid var(--c-line); color: var(--c-ink);
    font: 600 14px/1.2 var(--font-head); cursor: pointer; flex-shrink: 0;
    transition: border-color var(--tr-fast), color var(--tr-fast), background var(--tr-fast), transform var(--tr-fast);
}
.size-chip:hover { border-color: var(--c-amber); color: var(--c-navy); }
.size-chip:active { transform: scale(.97); }
.size-chip[aria-checked="true"], .size-chip[aria-pressed="true"] {
    background: var(--c-amber); border-color: var(--c-amber);
    color: #16130e; /* 8.2:1 на янтаре */
}
.size-chip:focus-visible { outline: 2px solid var(--c-amber); outline-offset: 2px; }
.size-chip[hidden] { display: none; }

.size-stage { margin-top: 26px; }
.size-stage .item-usp { margin-top: 16px; }
.size-detail[hidden] { display: none; }
.size-detail.is-enter { animation: sizeIn .18s var(--ease-ui); }
@keyframes sizeIn { from { opacity: 0; transform: translateY(4px); } }
.size-detail-name { font-family: var(--font-head); font-size: clamp(22px, 3vw, 30px); font-weight: 700; color: var(--c-navy); }
.size-chars { margin-top: 14px; }
.size-chars th, .size-chars td { padding: 7px 12px; font-size: 14px; }

.size-tablewrap { margin-top: 40px; min-width: 0; max-width: 100%; overflow-x: hidden; }
.size-tablewrap h2 { font-family: var(--font-head); font-size: 22px; color: var(--c-navy); }
.size-table-scroll { margin-top: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.size-table thead th { position: sticky; top: 0; z-index: 2; background: var(--c-bg, #fff); }

/* Плавающий мост «N позиций в расчёте → Оформить расчёт» (докрутка консилиума 31.10) */
.cart-float {
    position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
    display: flex; align-items: center; gap: 16px;
    padding: 10px 12px 10px 20px; border-radius: 999px;
    background: var(--c-card, #1a1712); border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 10px 30px rgba(0,0,0,.45); z-index: 60;
}
.cart-float[hidden] { display: none; }
body.cart-float-on .sticky-cta { transform: translateY(120%); opacity: 0; pointer-events: none; }
.cart-float-count { font-size: 14px; color: var(--c-text, #f2ede3); white-space: nowrap; }
.cart-float .btn-apex { padding: 9px 18px; }

@media (max-width: 640px) {
    /* Карточная укладка строки таблицы: без горизонтального скролла */
    .size-table { display: block; min-width: 0 !important; }
    .size-table tbody, .size-table tr, .size-table td { display: block; min-width: 0; }
    .size-table thead { display: none; }
    .size-table tr { padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.12); }
    .size-table td { border: 0; padding: 2px 0; }
    .size-table td.size-cell-price::before { content: 'Цена: '; color: var(--c-muted); }
    .size-table td.size-cell-act .btn-to-cart { width: 100%; margin-top: 6px; }
}
.size-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; }
/* ---------- Выбор количества при добавлении (02.11, решение владельца) ---------- */
.qty-wrap { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
.qty-lbl { font-size: 13.5px; color: var(--c-muted); }
.qty-box, .row-qty { display: inline-flex; align-items: center; gap: 6px; }
.qty-field {
    width: 84px; padding: 8px 10px; font: inherit; font-size: 14.5px; text-align: center;
    border: 1px solid var(--c-line); border-radius: var(--r-sm);
    background: var(--c-bg, #fff); color: var(--c-ink, #16130e);
}
.qty-field:focus { outline: 2px solid var(--c-amber); outline-offset: -1px; }
.qty-unit { font-size: 13.5px; color: var(--c-muted); min-width: 20px; }
.qty-sm { width: 66px; padding: 5px 6px; font-size: 13.5px; }
.size-cell-act .row-qty { margin-right: 8px; vertical-align: middle; }
.qty-mass { font-size: 13px; color: var(--c-muted); }
/* ---------- Блок «Количество + расчёт» в карточке (этап 1, 02.11) ---------- */
.qty-calc { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; padding: 12px 14px; background: var(--c-panel, #161a20); border: 1px solid var(--c-line, #262b32); border-radius: var(--r-sm, 10px); }
.qty-calc-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 44px; }
.qty-calc-note { margin: 0; font-size: 12.5px; color: var(--c-muted, #8d9298); }
.qty-calc-out { margin: 0; min-height: 22px; font-size: 15px; color: var(--c-muted, #8d9298); }
.qty-calc-out b { font-weight: 700; color: var(--c-amber, #f0a03e); font-variant-numeric: tabular-nums; }
/* масса в строке таблицы: серым, число — цветом текста; под qty-полем не мешает */
.row-mass { display: inline-block; margin-right: 10px; font-size: 12.5px; color: var(--c-muted); white-space: nowrap; vertical-align: middle; }
.row-mass b { font-weight: 600; color: var(--c-ink, #efefef); }
/* Похожие типоразмеры в панели гиганта */
.giant-near { margin: 0 0 14px; font-size: 13.5px; color: var(--c-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* 3D-кнопка под фото позиции (владелец 02.11, скрин 1): на всю ширину галереи, с отступом */
.btn-3d-under { margin-top: 10px; width: 100%; }
.near-link {
    background: none; border: 1px solid var(--c-line); border-radius: var(--r-sm);
    color: var(--c-ink, #efefef); font: inherit; font-size: 13px;
    padding: 4px 10px; min-height: 28px; cursor: pointer;
    transition: border-color var(--tr-fast), color var(--tr-fast);
}
.near-link:hover, .near-link:focus-visible { border-color: var(--c-amber); color: var(--c-amber); }
.giant-search { margin-top: 10px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.giant-search input[type="search"] {
    width: min(420px, 100%); padding: 10px 14px; font: inherit;
    border-radius: var(--r-sm); border: 1px solid var(--c-line);
    background: var(--c-bg, #fff); color: var(--c-ink, #16130e);
}
.giant-more-line { margin-top: 12px; }
.giant-more-line .btn-ghost[hidden] { display: none; }
.size-table th {
    text-align: left; font: 600 12px/1.2 var(--font-head); letter-spacing: .08em; text-transform: uppercase;
    color: var(--c-muted); padding: 10px 14px; border-bottom: 1px solid var(--c-line);
}
.size-table td { padding: 9px 14px; border-bottom: 1px solid var(--c-line); vertical-align: middle; }
.size-table tbody tr { transition: background var(--tr-fast); }
.size-table tbody tr:hover { background: rgba(255, 178, 84, 0.05); }
html.theme-light .size-table tbody tr:hover { background: rgba(232, 89, 12, 0.05); }
.size-table tbody tr.is-active { background: rgba(255, 178, 84, 0.10); }
html.theme-light .size-table tbody tr.is-active { background: rgba(232, 89, 12, 0.08); }
.size-rowlink {
    background: none; border: 0; padding: 3px 0; color: var(--c-navy); font: 600 14px/1.3 var(--font-head);
    cursor: pointer; text-align: left; min-width: 0; overflow-wrap: anywhere; min-height: 24px;
}
.size-rowlink:hover { color: var(--c-amber); text-decoration: underline; }
.size-rowlink:focus-visible { outline: 2px solid var(--c-amber); outline-offset: 2px; }
.size-cell-price { white-space: nowrap; color: var(--c-ink); }
.size-cell-act { text-align: right; }
.size-cell-act .btn-to-cart { flex-shrink: 0; }

/* break-ui 320px: несжимаемые блоки не распирают сетки */
.logo { min-width: 0; }
.logo svg, .logo img { max-width: 100%; height: auto; }
.size-detail { min-width: 0; overflow-wrap: anywhere; }
.item-layout > * { min-width: 0; }
.size-chars { table-layout: fixed; width: 100%; }
.size-chars th, .size-chars td { overflow-wrap: anywhere; }

@media (max-width: 960px) {
    .size-picker { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
    .size-chip { scroll-snap-align: start; }
}
@media (max-width: 640px) {
    .size-cell-act .btn-to-cart { padding: 7px 12px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .size-chip, .size-table tbody tr, .size-rowlink { transition: none !important; }
    .size-chip:active { transform: none; }
    .size-detail.is-enter { animation: none; }
}

/* ---------- Демо подач размерного ряда (только стенд /demo-row/) ---------- */
.demo-tab {
    display: inline-block; padding: 7px 14px; margin: 0 6px 6px 0; border-radius: var(--r-sm);
    border: 1px solid var(--c-line); background: var(--c-panel); color: var(--c-ink);
    font: 600 13px/1.2 var(--font-head); text-decoration: none;
}
.demo-tab.is-on { background: var(--c-amber); border-color: var(--c-amber); color: #16130e; }
.demo-split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.demo-b-panel { position: sticky; top: 84px; }
.demo-b-panel .size-detail { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 18px; box-shadow: var(--shadow-card); }
.demo-b-panel .item-photo { width: 100%; height: 180px; object-fit: cover; border-radius: var(--r-sm); margin-bottom: 12px; background: #f4f4f4; }
.demo-b-row { cursor: pointer; }
.demo-b-row:focus-visible { outline: 2px solid var(--c-amber); outline-offset: -2px; }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 18px; }
.size-tile {
    display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left;
    padding: 14px 16px; min-height: 96px; border-radius: var(--r-md);
    background: var(--c-card); border: 1px solid var(--c-line); color: var(--c-ink); cursor: pointer;
    transition: border-color var(--tr-fast), transform var(--tr-fast), box-shadow var(--tr-fast);
}
.size-tile:hover { border-color: var(--c-amber); transform: translateY(-2px); box-shadow: var(--glow); }
.size-tile.is-active { border-color: var(--c-amber); box-shadow: var(--glow); }
.size-tile-dim { font: 700 17px/1.1 var(--font-head); color: var(--c-navy); }
.size-tile-sub { font-size: 12px; color: var(--c-muted); }
.size-tile-price { margin-top: auto; font: 600 13px/1 var(--font-head); color: var(--c-ink); opacity: .8; }
.size-tile:focus-visible { outline: 2px solid var(--c-amber); outline-offset: 2px; }
@media (max-width: 960px) {
    .demo-split { grid-template-columns: 1fr; }
    .demo-b-panel { position: static; }
}
@media (prefers-reduced-motion: reduce) {
    .size-tile { transition: none !important; transform: none !important; }
}


/* ---------- ДЕМО формата «мультипрайс» (mc.ru-стиль, 03.11): витрина-колонки + таблица без фото ---------- */
.mc-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 26px 34px; margin-top: 28px; }
.mc-col h2 { margin: 0 0 10px; font-size: 19px; }
.mc-col h2 a { color: var(--amber, #f5a623); text-decoration: none; }
.mc-col h2 a:hover { text-decoration: underline; }
.mc-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.mc-col a { color: var(--text, #e8eaed); text-decoration: none; font-size: 14.5px; opacity: .92; }
.mc-col a:hover { color: var(--amber, #f5a623); }
.mc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 14px; }
.mc-chip { border: 1px solid #2c333d; background: #161a20; color: var(--text, #e8eaed); border-radius: 999px; padding: 7px 15px; font-size: 13.5px; cursor: pointer; }
.mc-chip:hover { border-color: var(--amber, #f5a623); }
.mc-chip.is-active { background: var(--amber, #f5a623); border-color: var(--amber, #f5a623); color: #14171c; font-weight: 600; }
.mc-tablewrap { overflow-x: auto; border: 1px solid #232a33; border-radius: 12px; }
.mc-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 640px; }
.mc-table th { text-align: left; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: #8b94a3; padding: 12px 14px; border-bottom: 1px solid #232a33; }
.mc-table td { padding: 11px 14px; border-bottom: 1px solid #1c222b; vertical-align: middle; }
.mc-table tbody tr:last-child td { border-bottom: 0; }
.mc-table tbody tr:hover { background: #171c24; }
.mc-name a { color: var(--text, #e8eaed); text-decoration: none; font-weight: 500; }
.mc-name a:hover { color: var(--amber, #f5a623); }
.mc-mark, .mc-unit { color: #aab3c0; white-space: nowrap; }
.mc-price { color: #aab3c0; white-space: nowrap; }
.mc-act { white-space: nowrap; text-align: right; }
.mc-act .row-qty { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; }
.mc-act .row-mass { margin-right: 10px; font-size: 12.5px; color: #8b94a3; }
.mc-act .row-mass b { color: var(--amber, #f5a623); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .mc-table th:nth-child(2), .mc-table td:nth-child(2) { display: none; }
  .mc-table { min-width: 520px; }
}


/* ---------- ДЕМО: страница группы с пиктограммами (модель МС, 03.11) ---------- */
.pic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-top: 24px; }
.pic-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 150px; padding: 20px 14px; border: 1px solid #232a33; border-radius: 14px; background: #141920; text-decoration: none; color: var(--text, #e8eaed); text-align: center; }
.pic-tile:hover { border-color: rgba(245, 166, 35, .55); background: #171d26; }
.pic-tile svg { width: 96px; height: 64px; color: var(--amber, #f5a623); }
.pic-tile .pic-name { font-size: 14.5px; font-weight: 500; }
.pic-tile .pic-cnt { font-size: 12px; color: #8b94a3; }

/* ---------- Боевая карточка: схема-чертёж + спека (04.11, demo-card-v2 A → прод) ---------- */
.card-sch-head { font-weight: 700; font-size: 14px; padding: 10px 12px 8px; border-top: 1px solid #232a33; color: #e8eaed; background: #141920; }
.card-sch { position: relative; background: #eef0f3; line-height: 0; cursor: zoom-in; border-top: 1px solid #232a33; }
/* figcaption чертежа (SEO 05.11) */
.card-sch-fig { margin: 0; }
.card-sch-fig figcaption { line-height: 1.4; font-size: 11.5px; color: #7a8694; padding: 6px 10px 7px; background: #eef0f3; border-bottom: 1px solid #232a33; }
.card-sch svg { width: 100%; max-height: 185px; display: block; margin: 0 auto; }
.card-art-copy { padding: 2px 9px; font-size: 11.5px; line-height: 1.5; margin-left: 8px; cursor: pointer; background: transparent; color: #aeb6c2; border: 1px solid #3a4350; border-radius: 7px; vertical-align: middle; }
.card-art-copy:hover { border-color: #f5a623; color: #f5a623; }
.card-sch .loupe { position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; background: rgba(20,25,32,.72); border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; pointer-events: none; }
.card-sch:hover .loupe, .card-sch:focus .loupe { opacity: 1; }
.card-sch-zoom { display: none; position: fixed; inset: 0; background: rgba(8,11,16,.82); z-index: 60; cursor: zoom-out; align-items: center; justify-content: center; }
.card-sch-zoom.open { display: flex; }
.card-sch-zoom-inner { width: min(1100px, 94vw); background: #fff; border-radius: 14px; padding: 18px; line-height: 0; }
.card-sch-zoom-inner svg { width: 100%; height: auto; display: block; }
.spec-card { width: 100%; border-collapse: collapse; margin: 0 0 4px; font-size: 14.5px; }
.spec-card td { border: 1px solid #232a33; padding: 8px 12px; }
.spec-card td:first-child { color: #8b94a3; width: 44%; }
.spec-card .card-dim { color: #8b94a3; font-weight: 400; font-size: 13px; }
/* ---------- Соседние типоразмеры (demo-card-v2, 04.11) ---------- */
.nb-chips { margin: 26px 0 0; }
.nb-cap { color: #8b94a3; font-size: 13px; margin-bottom: 10px; }
.nb-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.nb-chip { display: inline-block; border: 1px solid #3a4350; border-radius: 10px; padding: 9px 14px; color: #e8eaed; text-decoration: none; font-size: 13.5px; background: #141920; }
.nb-chip:hover { border-color: #f5a623; }
.nb-chip.is-on { border-color: #f5a623; color: #f5a623; }
/* ---------- Компактный заказ-узел карточки (консилиум 04.11: одна строка) ---------- */
.item-calc { margin: 14px 0 0; }
.ic-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ic-row2 { margin-top: 8px; gap: 8px; }
.ic-seg { display: inline-flex; border: 1px solid #3a4350; border-radius: 9px; overflow: hidden; flex: none; }
.ic-seg button { background: transparent; border: 0; color: #cfd4dc; padding: 7px 12px; font-size: 13px; cursor: pointer; }
.ic-seg button + button { border-left: 1px solid #3a4350; }
.ic-seg button.on { background: #f5a623; color: #141920; font-weight: 600; }
.ic-input input { width: 130px; background: #10141b; border: 1px solid #3a4350; border-radius: 9px; color: #e8eaed; padding: 7px 11px; font-size: 14px; }
.ic-input input:focus { outline: none; border-color: #f5a623; }
.ic-out { color: #e8eaed; font-size: 14px; min-width: 90px; }
.ic-out b { color: #f5a623; }
.ic-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ic-chip { border: 1px solid #3a4350; border-radius: 8px; padding: 3px 9px; color: #aeb6c2; font-size: 12.5px; cursor: pointer; }
.ic-chip:hover { border-color: #f5a623; color: #f5a623; }
.ic-ref { color: #6f7a8a; font-size: 12px; }
.ic-info { color: #6f7a8a; font-size: 13px; cursor: help; border: 1px solid #3a4350; border-radius: 50%; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.item-calc .item-actions { display: flex; gap: 10px; margin-top: 12px; }
.ic-nocalc .qty-calc { margin-bottom: 10px; }
/* ---------- Бейдж наличия у цены (консилиум 04.11: честно, без тоннажа) ---------- */
.stock-badge { display: inline-block; vertical-align: middle; margin-left: 10px; padding: 3px 10px; border: 1px solid #3f5a45; border-radius: 8px; background: rgba(62,138,86,.12); color: #7fce9a; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
/* ФАЗА А: плитки групп каталога — вид «По разделам» (вариант 1 демо-mc-group3, решение владельца 05.11 ~03:00).
   Фон карточки #10151c = подложка PNG (шов миниатюры исчезает); hover — только border/тень/подъём (спец. дизайнера+аниматора 05.11). */
.gv-root { margin-top: 6px; }
.gv-sec + .gv-sec { margin-top: 48px; }
.gv-root .gv-sec:first-child { margin-top: 8px; }
.gv-sec h2 { margin: 0 0 16px; font-size: 15px; font-weight: 600; color: #e6edf3; display: flex; align-items: center; gap: 8px; }
.gv-sec h2::before { content: ''; width: 3px; height: 14px; border-radius: 2px; background: rgba(245,166,35,.9); flex: 0 0 auto; }
.gv-sec h2 .gv-sec-cnt { font-size: 13px; font-weight: 400; color: #8b949e; font-variant-numeric: tabular-nums; }
.mud-grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; }
.mud-cell { display: block; text-decoration: none; color: inherit; background: #10151c; border: 1px solid #232a33; border-radius: 14px; padding: 16px 16px 14px; text-align: center; position: relative; overflow: hidden; }
.mud-cell img { width: 128px; height: 128px; border-radius: 12px; display: block; margin: 0 auto; object-fit: cover; background: #10151c; transform-origin: center; transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1); }
.mud-cell .nm { margin-top: 14px; font-weight: 500; font-size: 14.5px; line-height: 1.35; color: #e6edf3; transition: color 150ms ease; }
.mud-cell .cnt { margin-top: 6px; color: #8b949e; font-size: 12px; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .mud-cell { transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease; }
  .mud-cell:hover { transform: translateY(-2px); border-color: #2f3a46; box-shadow: 0 6px 16px rgba(0,0,0,.4); }
  .mud-cell:hover .nm { color: #f0f6fc; }
  .mud-cell:hover img { transform: scale(1.06); }
}
.mud-cell:active { transform: scale(0.98); transition-duration: 120ms; }
.mud-cell:focus-visible { outline: 2px solid rgba(245,166,35,.7); outline-offset: 2px; }
@media (max-width: 640px) { .mud-cell img { width: 104px; height: 104px; } .gv-sec + .gv-sec { margin-top: 36px; } .gv-sec h2 { font-size: 14px; } .mud-grid2 { gap: 10px; } }
/* вход плиток: stagger 40ms кап 320ms волнами IO; без JS плитки видимы (класс вешает скрипт группы) */
html.js .gv-armed .mud-cell { opacity: 0; transform: translateY(12px); }
html.js .gv-armed .mud-cell.gv-in { opacity: 1; transform: none; transition: opacity 400ms cubic-bezier(0.23, 1, 0.32, 1), transform 400ms cubic-bezier(0.23, 1, 0.32, 1), border-color 150ms ease, box-shadow 150ms ease; }
@media (prefers-reduced-motion: reduce) {
  html.js .gv-armed .mud-cell { opacity: 1; transform: none; }
  .mud-cell, .mud-cell img { transition: none; }
  .mud-cell:hover { transform: none; }
  .mud-cell:hover img { transform: none; }
}