.cart-btn-wrap { position: relative; }
.cart-btn {
  position: relative; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.14); background: transparent; color: var(--snow);
  cursor: pointer; transition: border-color 160ms, background 160ms;
}
.cart-btn:hover { border-color: var(--flame); }
.cart-badge {
  position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--r-pill); background: var(--flame); color: #fff; font: 700 10px/17px var(--font-mono);
  text-align: center;
}
.cart-pop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 1200; width: 280px;
  background: #111b34; border: 1px solid rgba(148,163,184,0.25); border-radius: var(--r-3);
  padding: 14px; box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.cart-pop-empty { color: var(--fg-muted); font: 400 13px var(--font-sans); text-align: center; padding: 10px 0; }
.cart-pop-list { display: flex; flex-direction: column; }
.cart-pop-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid rgba(148,163,184,0.12); }
.cart-pop-row:last-child { border-bottom: 0; }
.cart-pop-name { color: var(--snow); font: 500 12.5px var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.cart-pop-qty { color: var(--fg-muted); font: 500 12px var(--font-mono); white-space: nowrap; }
.cart-pop-del {
  flex: none; width: 30px; height: 30px; margin: -6px -6px -6px 0; border: 0; background: none;
  color: var(--fog); cursor: pointer; font-size: 14px; line-height: 1; border-radius: 6px;
  transition: color 140ms, background 140ms;
}
.cart-pop-del:hover { color: #EF4444; background: rgba(239,68,68,0.1); }
.cart-pop-more { color: var(--fog); font: 400 11px var(--font-sans); padding-top: 8px; }
.cart-pop-foot { display: flex; align-items: stretch; gap: 8px; margin-top: 12px; }
.cart-pop-clear {
  flex: none; border: 1px solid rgba(148,163,184,0.3); background: transparent; color: var(--fg-muted);
  cursor: pointer; padding: 10px 12px; border-radius: var(--r-2); font: 600 12.5px var(--font-sans);
  transition: color 140ms, border-color 140ms;
}
.cart-pop-clear:hover { color: #EF4444; border-color: rgba(239,68,68,0.5); }
.cart-pop-cta {
  flex: 1; display: block; background: var(--flame); color: #fff; text-align: center;
  padding: 10px; border-radius: var(--r-2); font: 700 12.5px var(--font-sans); text-decoration: none;
}
.cart-pop-cta:hover { background: var(--ember); }
.cart-mobile-link {
  display: flex; align-items: center; gap: 10px; color: var(--snow); text-decoration: none;
  font: 500 20px/1.4 var(--font-sans); padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.cart-mobile-link .cart-badge { position: static; margin-left: 4px; }
@media (max-width: 768px) { .cart-pop { right: -8px; } }
.snav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1001;
  background: rgba(10, 18, 40, 1);       /* fully opaque — контент не просвечивает под липкой шапкой */
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.snav-in {
  max-width: 2160px;                  /* совпадает с шириной каталога (.lp-wide) */
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 64px);
  height: 64px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.snav-logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.snav-logo img { display: block; }
.snav-word { font: 800 21px/1 'Inter', sans-serif; letter-spacing: 0.06em; color: #f8fafc; }
.snav-links { display: flex; gap: 24px; flex: 1; }
.snav-link {
  color: #f8fafc;
  text-decoration: none;
  font: 500 14px/1 'Inter', sans-serif;
  letter-spacing: 0.01em;
  transition: color 0.2s;
}
.snav-link:hover { color: #FF6B35; }
.snav-link.active { color: #FF6B35; }
.snav-link--dim { opacity: 0.35; pointer-events: none; cursor: default; }
.snav-phone {
  color: #ffffff;
  font: 700 14.5px/1 'Inter', sans-serif;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  flex: none;                /* не сжимать/обрезать номер на узких вьюпортах */
}
.snav-phone:hover { color: #FF6B35; }
.snav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.snav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #f8fafc;
  border-radius: 2px;
}
.snav-drawer {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #0A1228;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  padding-top: 80px;
  overflow-y: auto;
}
.snav-drawer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 24px;
  width: 100%;
}
.snav-drawer-link {
  color: #f8fafc;
  font: 500 20px/1.4 'Inter', sans-serif;
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.snav-drawer-phone { color: #FF6B35; margin-top: 16px; }

@media (max-width: 768px) {
  .snav-links { display: none; }
  .snav-phone { display: none; }
  /* на мобиле в шапке: логотип слева, корзина (смета) + бургер справа.
     margin-left:auto на первом из правой группы отодвигает всё вправо —
     раньше ничто не толкало бургер к краю, он «висел» у логотипа. */
  .cart-btn-wrap { display: block; margin-left: auto; }
  .snav-burger { display: flex; }
  .snav-in { padding: 0 16px; gap: 14px; }
}

/* глобальный поиск в навбаре */
.snav-search { flex: none; width: 230px; }
.snav-search .gsearch { min-width: 0; max-width: none; margin-left: 0; }
.snav-search .gsearch-in { background: rgba(31,41,55,0.55); }
.snav-search .gsearch-drop { right: auto; left: 0; }
@media (max-width: 1100px) { .snav-search { display: none; } }
.snav-drawer-search { padding: 0 0 14px; }
.fcontacts {
  display: none;
  position: fixed;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  flex-direction: column;
  gap: 10px;
}

.fcontacts-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  color: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,0.45);
  transition: transform 160ms var(--ease-out, ease);
}
.fcontacts-btn:hover,
.fcontacts-btn:active {
  color: #fff;
  transform: scale(1.06);
}
.fcontacts-btn svg { width: 24px; height: 24px; }
.fcontacts-btn img { width: 100%; height: 100%; object-fit: cover; }

.fcontacts-tg { background: #229ED9; }

@media (max-width: 768px) {
  .fcontacts { display: flex; }
}
/* ================================================================
   СРЕДА — Design tokens
   Source of truth: 00_СРЕДА_Design_System.docx (April 2026)
   sreda16.ru
   ================================================================ */

/* -- FONTS -------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter_18pt-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter_18pt-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter_18pt-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter_18pt-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
/* JetBrains Mono */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/JetBrainsMono-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/JetBrainsMono-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/JetBrainsMono-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ── COLORS ───────────────────────────────────────────────────── */

  /* Dark base — 70% of surface area */
  --midnight:        #0A1228;   /* bg-primary (main canvas) */
  --steel:           #1F2937;   /* bg-secondary (cards, sections on dark) */
  --slate:           #475569;   /* border on dark */
  --ink:             #0F172A;   /* text on light */

  /* Accents — sparingly */
  --flame:           #FF6B35;   /* PRIMARY CTA. Max 5% of screen */
  --ember:           #E55A2B;   /* Flame hover */
  --electric:        #3B82F6;   /* Links, interactive, focus */
  --sky:             #60A5FA;   /* Electric hover */

  /* Light base */
  --cloud:           #FAFAFA;   /* light sections bg */
  --mist:            #E5E7EB;   /* border on light */
  --fog:             #6B7280;   /* muted text */
  --snow:            #F8FAFC;   /* text on dark */

  /* Functional */
  --ok:              #10B981;
  --warn:            #F59E0B;
  --err:             #EF4444;

  /* ── SEMANTIC ─────────────────────────────────────────────────── */
  --bg:              var(--midnight);
  --bg-elev:         var(--steel);
  --bg-light:        var(--cloud);
  --fg:              var(--snow);
  --fg-muted:        #94A3B8;   /* slate-400 on dark */
  --fg-on-light:     var(--ink);
  --fg-muted-light:  var(--fog);
  --border:          var(--slate);
  --border-light:    var(--mist);
  --accent:          var(--flame);
  --accent-hover:    var(--ember);
  --link:            var(--electric);
  --link-hover:      var(--sky);
  --focus-ring:      var(--electric);

  /* ── TYPOGRAPHY ───────────────────────────────────────────────── */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Display + heading sizes (desktop / mobile pairs handled in components) */
  --t-display-xl:    120px;     /* hero slogan — desktop */
  --t-display-l:     72px;
  --t-display-m:     56px;
  --t-display-s:     40px;
  --t-h1:            32px;
  --t-h2:            24px;
  --t-h3:            20px;
  --t-body-l:        18px;
  --t-body:          16px;
  --t-body-s:        14px;
  --t-mono-l:        16px;
  --t-mono:          14px;
  --t-mono-eyebrow:  13px;

  /* Line heights */
  --lh-display-xl:   1.0;
  --lh-display-l:    1.05;
  --lh-display-m:    1.1;
  --lh-display-s:    1.15;
  --lh-h1:           1.2;
  --lh-h2:           1.25;
  --lh-h3:           1.3;
  --lh-body:         1.6;

  /* Letter spacing */
  --tr-display-xl:   -0.04em;   /* -4% */
  --tr-display-l:    -0.03em;
  --tr-display-m:    -0.02em;
  --tr-h:            -0.01em;
  --tr-body:         0;
  --tr-mono-eyebrow: 0.08em;    /* +80 (1em=1000) */

  /* ── SPACING — 8pt grid ───────────────────────────────────────── */
  --s-1:    4px;
  --s-2:    8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-6:   24px;
  --s-8:   32px;
  --s-12:  48px;
  --s-16:  64px;
  --s-24:  96px;
  --s-32: 128px;
  --s-40: 160px;
  --s-48: 192px;
  --s-60: 240px;

  /* Section padding */
  --section-y-d: 120px;   /* large desktop */
  --section-y-d-m: 80px;  /* medium desktop */
  --section-y-t: 80px;    /* tablet */
  --section-y-m: 64px;    /* mobile */

  --container: 1280px;

  /* ── RADII ────────────────────────────────────────────────────── */
  --r-1:   4px;
  --r-2:   8px;    /* buttons, inputs */
  --r-3:  12px;    /* cards */
  --r-4:  16px;
  --r-pill: 999px;

  /* ── ELEVATION (sparingly on dark theme) ──────────────────────── */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-3: 0 24px 60px rgba(0,0,0,0.45);
  --shadow-flame: 0 12px 32px rgba(255,107,53,0.25);

  /* ── EASINGS ──────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap:   cubic-bezier(0.7,  0, 0.84, 0);

  --dur-micro:   180ms;
  --dur-std:     300ms;
  --dur-scroll:  700ms;
}

/* ================================================================
   BASE
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ================================================================
   TYPOGRAPHY CLASSES (semantic)
   ================================================================ */
.t-display-xl {
  font: 700 var(--t-display-xl)/var(--lh-display-xl) var(--font-sans);
  letter-spacing: var(--tr-display-xl);
}
.t-display-l {
  font: 700 var(--t-display-l)/var(--lh-display-l) var(--font-sans);
  letter-spacing: var(--tr-display-l);
}
.t-display-m {
  font: 700 var(--t-display-m)/var(--lh-display-m) var(--font-sans);
  letter-spacing: var(--tr-display-m);
}
.t-display-s {
  font: 700 var(--t-display-s)/var(--lh-display-s) var(--font-sans);
  letter-spacing: var(--tr-display-m);
}
.t-h1 { font: 600 var(--t-h1)/var(--lh-h1) var(--font-sans); letter-spacing: var(--tr-h); }
.t-h2 { font: 600 var(--t-h2)/var(--lh-h2) var(--font-sans); letter-spacing: var(--tr-h); }
.t-h3 { font: 600 var(--t-h3)/var(--lh-h3) var(--font-sans); letter-spacing: var(--tr-h); }

.t-body-l { font: 400 var(--t-body-l)/var(--lh-body) var(--font-sans); }
.t-body   { font: 400 var(--t-body)/var(--lh-body)   var(--font-sans); }
.t-body-s { font: 400 var(--t-body-s)/1.55           var(--font-sans); }

.t-mono-l       { font: 500 var(--t-mono-l)/1.4 var(--font-mono); }
.t-mono         { font: 400 var(--t-mono)/1.5   var(--font-mono); }
.t-mono-eyebrow {
  font: 500 var(--t-mono-eyebrow)/1.4 var(--font-mono);
  letter-spacing: var(--tr-mono-eyebrow);
  text-transform: uppercase;
}

/* ================================================================
   UTILITIES
   ================================================================ */
.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
/* shared monospace utility — canonical home for `.mono` (was only defined inside leaf pages, which
   left cross-page users like the catalog relying on a global-CSS leak) */
.mono { font-family: var(--font-mono); }

a { color: var(--link); text-decoration: none; transition: color var(--dur-micro) var(--ease-out); }
a:hover { color: var(--link-hover); }

/* Яндекс.Метрика (подмена номеров) оборачивает цифры tel:-ссылок в <small> и у части
   символов выставляет opacity:0 — из-за этого последняя цифра номера пропадала
   в шапке. Форсируем видимость независимо от того, что пришлёт сторонний скрипт. */
a[href^="tel:"] small { opacity: 1 !important; }

::selection { background: var(--flame); color: var(--snow); }

*:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: calc(var(--r-1) + 2px);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}
/* ================================================================
   МОБИЛЬНАЯ ЧИТАЕМОСТЬ — слой поверх страничных стилей
   ----------------------------------------------------------------
   СГЕНЕРИРОВАН: scripts/gen-mobile-legibility.mjs — руками не править,
   изменения затрутся. Правьте генератор и прогоняйте заново.

   Поводом стала рекомендация Яндекс.Вебмастера (14.08.2026): сайт признан
   недостаточно адаптированным под мобильные. Проверка на 360px показала,
   что вёрстка перестраивается корректно и горизонтальной прокрутки нет —
   дело в КЕГЛЕ. Фирменные моно-подписи («SRD-EL-05-225», «ELECTROFUSION»)
   набраны 8–11px: на десктопе это стилистика чертежа, на телефоне —
   нечитаемый мелкий шрифт. Порог читаемости у Яндекса и Google — 12px.

   Десктоп не затронут: всё внутри max-width 768px.

   Префикс :root поднимает специфичность на один класс. Без него страничные
   CSS, подгружаемые лениво при code-splitting, встают позже и перебивают
   эти правила.

   SVG-подписи (названия городов на карте, размеры на чертеже) намеренно
   не трогаем: это графика, а не текст для чтения, и увеличение кегля
   заставит подписи наезжать друг на друга.
   ================================================================ */

@media (max-width: 768px) {
  /* — 1. Кегль не ниже порога читаемости — 209 селекторов ————————— */

  /* pages/home/home.css — 117 */
  :root .as-eyebrow,
  :root .as-range,
  :root .as-ticks,
  :root .bento-tile .bt-photo-tag,
  :root .bento-tile.l .bt-kicker,
  :root .bento-tile.mobile .bt-photo-tag,
  :root .bl-category,
  :root .bl-date,
  :root .bl-meta-l,
  :root .bl-mp-count,
  :root .bl-mp-hint,
  :root .bl-photo-label,
  :root .bl-read-badge,
  :root .bs-spec-row,
  :root .bt-c-l,
  :root .bt-kicker,
  :root .bt-photo-tag,
  :root .cp-meta,
  :root .cp-photo-label,
  :root .cp-stats,
  :root .cta-corner-l,
  :root .cta-corner-r,
  :root .cta-field-l,
  :root .cta-form-fineprint,
  :root .cta-modal-eyebrow,
  :root .cta-ri-l,
  :root .footer-slogan-meta,
  :root .ft-angle-cap,
  :root .ft-border-label,
  :root .ft-clock-tz,
  :root .ft-epi-whisper,
  :root .ft-meta-l,
  :root .ft-mobile .ft-epi-whisper,
  :root .ft-mobile .ft-seam-label,
  :root .ft-phone-l,
  :root .ft-rail-l,
  :root .ft-seam-label,
  :root .ft-totop,
  :root .geo-legend,
  :root .geo-map-head,
  :root .geo-netspec-row,
  :root .geo-section.mobile .geo-legend,
  :root .geo-section.mobile .geo-map-head,
  :root .geo-section.mobile .geo-stat-l,
  :root .geo-section.mobile .geo-stat-l-sub,
  :root .geo-stat-l-sub,
  :root .geo-swipe-hint,
  :root .h3cat-banner-count i,
  :root .h3cat-brands span,
  :root .h3cat-count i,
  :root .h3cat-open,
  :root .h5-mp-active-name,
  :root .h5-mp-count,
  :root .h5-progress,
  :root .hero-mobile-cue span,
  :root .hero-mobile-strip,
  :root .hero-stage.mobile .vp-tag-meta,
  :root .hero-stage.mobile .vp-tag-title,
  :root .hp-card-kicker,
  :root .hp-spec-l,
  :root .kf-frame-head,
  :root .kf-presets-l,
  :root .kf-presets-r,
  :root .kf-r-eyebrow,
  :root .kf-r-text,
  :root .kf-top-strip,
  :root .killer-feature.mobile .kf-r-text,
  :root .ks-l,
  :root .mobile-canvas-label,
  :root .nb-eyebrow,
  :root .ph-eyebrow,
  :root .ph-meta,
  :root .ph-temp-target,
  :root .ph-thermo-mark,
  :root .proc-conn-inner,
  :root .proc-frame-head,
  :root .proc-meta-l,
  :root .proc-ph-eyebrow,
  :root .proc-ph-meta,
  :root .proc-ph-title,
  :root .proc-roadmap-item,
  :root .proc-step.mobile .proc-frame-head,
  :root .sc-row,
  :root .si-label,
  :root .soon-badge,
  :root .st-code,
  :root .st-corner-l,
  :root .st-corner-r,
  :root .st-lab,
  :root .st-mobile-eyebrow,
  :root .stats-ticker.mobile .st-lab,
  :root .th-eyebrow,
  :root .th-meta,
  :root .ti-l,
  :root .tm-attrib-company,
  :root .tm-hs-l,
  :root .tm-photo-label,
  :root .tm-portrait-meta,
  :root .tm-project-row,
  :root .tm-section.mobile .tm-hs-l,
  :root .vp-rec,
  :root .vp-tag-eyebrow,
  :root .vp-tag-meta,
  :root .wc-family,
  :root .wc-price-label,
  :root .wc-serial,
  :root .wc-stock,
  :root .wc-tag,
  :root .wh-code,
  :root .wh-eyebrow,
  :root .wh-legend,
  :root .wh-role,
  :root .wh-scale,
  :root .wh-stock,
  :root .wh-zone-h,
  :root .wm-chip-l,
  :root .wm-eq-tag {
    font-size: 12px;
  }

  /* pages/s315/s315.css — 18 */
  :root .s315 .cmp-colbrand,
  :root .s315 .cmp-youtag,
  :root .s315 .gal-360,
  :root .s315 .gal-live-badge,
  :root .s315 .gal-note-badge,
  :root .s315 .gal-tag,
  :root .s315 .gthumb .glabel,
  :root .s315 .gthumb.scene .sc span,
  :root .s315 .kit-badge,
  :root .s315 .ph-tag,
  :root .s315 .price-block .pl,
  :root .s315 .sb-mobileprice .l,
  :root .s315 .sim-badge,
  :root .s315 .sim-note,
  :root .s315 .tco-scale,
  :root .s315 .tco-stat-l,
  :root .s315 .tco-step-val em,
  :root .s315 .tco-tag {
    font-size: 12px;
  }

  /* pages/product/product.css — 13 */
  :root .pp-badge,
  :root .pp-bottom-status,
  :root .pp-copy,
  :root .pp-drawing-cap,
  :root .pp-price-note,
  :root .pp-rel-label,
  :root .pp-rel-sub,
  :root .pp-rel-sub em,
  :root .pp-size-note,
  :root .pp-size-row.cur .pp-size-tag,
  :root .pp-spec-title,
  :root .pp-thumb-label,
  :root .pp-url {
    font-size: 12px;
  }

  /* pages/seo-otvod/seo-otvod.css — 12 */
  :root .seo-root .art-l,
  :root .seo-root .calc-info-row .ci-cap,
  :root .seo-root .chip-opt .cs,
  :root .seo-root .gal-tag,
  :root .seo-root .gthumb-lbl,
  :root .seo-root .mtag,
  :root .seo-root .nav-word i,
  :root .seo-root .price-cap,
  :root .seo-root .sb-art,
  :root .seo-root .sim-cat,
  :root .seo-root .sim-cur-tag,
  :root .seo-root .sim-stock {
    font-size: 12px;
  }

  /* pages/landing/landing.css — 10 */
  :root .blog-card-kicker,
  :root .lp-est,
  :root .lp-side-h,
  :root .pa-badge,
  :root .pa-dims span,
  :root .pa-note,
  :root .pa-xsec-l,
  :root .sec-brand,
  :root .sec-fl,
  :root .sec-tbl th {
    font-size: 12px;
  }

  /* shared/catalog/family-cards.css — 10 */
  :root .cmpf-table .cmpf-rm,
  :root .fc-open,
  :root .fc-price .from,
  :root .fc-vhead,
  :root .fc-vsku,
  :root .fcat-l,
  :root .fcat-opt .n,
  :root .fcat-sec .n,
  :root .skt-stock,
  :root .sku-table th {
    font-size: 12px;
  }

  /* pages/apparatus-catalog/apparatus-catalog.css — 9 */
  :root .apc-card-cmp,
  :root .apc-cmp-table th,
  :root .apc-map-fam,
  :root .apc-map-ruler .r-mark,
  :root .apc-mc-tt-badge,
  :root .apc-pick-count,
  :root .apc-pick-name em,
  :root .apc-pick-price small,
  :root .apc-scale {
    font-size: 12px;
  }

  /* shared/catalog/catalog-card.css — 5 */
  :root .ccard-badge,
  :root .ccard-brand,
  :root .ccard-eyebrow,
  :root .ccard-ph .cap,
  :root .ccard-status {
    font-size: 12px;
  }

  /* pages/configurator/configurator.css — 3 */
  :root .cfg-root .custom-hint,
  :root .cfg-root .mto-tag,
  :root .cfg-root .prot-lab {
    font-size: 12px;
  }

  /* shared/catalog-sections.css — 3 */
  :root .csec-l,
  :root .csec-n,
  :root .gr-sub {
    font-size: 12px;
  }

  /* shared/quote-modal.css — 3 */
  :root .qm-eyebrow,
  :root .qm-fineprint,
  :root .qm-offer-l {
    font-size: 12px;
  }

  /* pages/catalog-root/catalog-root.css — 2 */
  :root .croot-card-brands span,
  :root .croot-card-count {
    font-size: 12px;
  }

  /* shared/cart/cart.css — 2 */
  :root .cart-badge,
  :root .cart-pop-more {
    font-size: 12px;
  }

  /* pages/smeta/smeta.css — 1 */
  :root .smp-group-h {
    font-size: 12px;
  }

  /* shared/catalog/catalog-hero.css — 1 */
  :root .chero-stat > span {
    font-size: 12px;
  }

  /* — 2. Тач-цели ————————————————————————————————————————————————
     Рекомендованный минимум — 44px. Ссылки внутри абзацев сюда намеренно
     не входят: раздувать строчную ссылку до 44px значит разорвать текст,
     а роботы их за тач-цели и не считают. */

  :root button.ft-totop,
  :root a.cta-channel,
  :root a.lpf-phone,
  :root button.tco-calc-toggle,
  :root button.ft-col-h,
  :root a.ft-rail-v,
  :root a.apc-hero-phone,
  :root a.ft-phone,
  :root a.croot-card-all,
  :root a.cta-secondary,
  :root a.croot-card-title,
  :root a.apc-cta-tg,
  :root a.lp-phone,
  :root a.apc-map-row,
  :root button.kf-preset-chip,
  :root button.gal-tab,
  :root button.snav-burger,
  :root button.video-link,
  :root button.vctl-btn,
  :root button.ghost-btn,
  :root button.apc-chip,
  :root button.apc-btn,
  :root button.apc-mc-add,
  :root a.lp-chip,
  :root input.mono,
  :root button.tf-chip,
  :root a.apc-btn,
  :root a.docs-all,
  :root a.snav-logo,
  :root button.cart-btn,
  :root a.ft-soc-btn,
  :root select.sec-sort,
  :root button.fc-btn,
  :root button.modal-close,
  :root button.pchip,
  :root button.ach,
  :root button.pp-price-magnet,
  :root input.sec-search,
  :root button.btn,
  :root a.h3cat-alllink,
  :root a.h5-all-link,
  :root button.on,
  :root button.wh-foot-link,
  :root .mag-inner a {
    min-height: 44px;
  }

  /* Узкие по горизонтали — кнопки-иконки и чипы */
  :root button.kf-preset-chip,
  :root button.snav-burger,
  :root button.vctl-btn,
  :root button.apc-mc-add,
  :root button.cart-btn,
  :root a.ft-soc-btn,
  :root button.fc-btn,
  :root button.modal-close,
  :root button.pchip,
  :root button.on {
    min-width: 44px;
  }

  /* Центрируем содержимое кнопок, чтобы прирост уходил в поля,
     а не смещал иконку в угол. */
  :root button.ft-totop,
  :root button.tco-calc-toggle,
  :root button.ft-col-h,
  :root button.kf-preset-chip,
  :root button.gal-tab,
  :root button.snav-burger,
  :root button.video-link,
  :root button.vctl-btn,
  :root button.ghost-btn,
  :root button.apc-chip,
  :root button.apc-btn,
  :root button.apc-mc-add,
  :root button.tf-chip,
  :root button.cart-btn,
  :root button.fc-btn,
  :root button.modal-close,
  :root button.pchip,
  :root button.ach,
  :root button.pp-price-magnet,
  :root button.btn,
  :root button.on,
  :root button.wh-foot-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* === h01.css === */
/* ===================================================================
   H-01 HERO — стили
   =================================================================== */

html, body, #root { background: #050810; min-height: 100vh; }
body { overflow-x: hidden; }
* { box-sizing: border-box; }

button { font-family: var(--font-sans); cursor: pointer; border: 0; background: transparent; color: inherit; }

/* ── BUTTON system (Primary L / Outline L / Sm) ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 12px; height: 56px; padding: 0 28px;
  font: 500 16px/1 var(--font-sans); letter-spacing: 0.005em;
  border-radius: 8px; cursor: pointer;
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out), box-shadow 320ms var(--ease-out);
  white-space: nowrap;
  position: relative; isolation: isolate;
}
.btn .mag-inner { display: inline-flex; align-items: center; gap: 12px; transition: transform 240ms var(--ease-out); }
.btn-sm { height: 40px; padding: 0 18px; font-size: 14px; gap: 8px; }
.btn-lg { height: 56px; padding: 0 28px; }
.btn-primary {
  background: var(--flame); color: var(--snow);
  box-shadow: 0 8px 24px rgba(255,107,53,0.28);
}
.btn-primary:hover { background: var(--ember); box-shadow: 0 14px 36px rgba(255,107,53,0.36); }
.btn-outline {
  background: transparent; color: var(--snow);
  border: 1.5px solid var(--snow);
}
.btn-outline:hover { background: var(--snow); color: var(--ink); }
.btn.full { width: 100%; }

/* ===== HEADER ===== */
.site-hdr {
  position: absolute; top: 0; left: 0; right: 0; z-index: 50;
  height: 80px;
  transition: background 250ms var(--ease-out), backdrop-filter 250ms var(--ease-out), border-color 250ms var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-hdr.scrolled {
  background: rgba(10,18,40,0.88);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom-color: rgba(71,85,105,0.4);
}
.hdr-inner {
  max-width: 1440px; margin: 0 auto; padding: 0 48px; height: 100%;
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 32px; align-items: center;
}
.hdr-left { display: flex; align-items: center; cursor: pointer; }
.hdr-logo { width: 36px; height: 36px; transition: filter 240ms; }
.hdr-left:hover .hdr-logo { filter: drop-shadow(0 0 24px rgba(255,107,53,0.6)); }
.hdr-nav { display: flex; gap: 36px; justify-content: center; }
.nav-link {
  font: 500 15px/1 var(--font-sans); color: var(--snow); position: relative;
  padding: 4px 0; cursor: pointer; transition: opacity 180ms var(--ease-out);
  text-decoration: none;
}
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: -3px; width: 0; height: 1.5px;
  background: var(--flame); transition: width 280ms var(--ease-out);
}
.nav-link:hover::after { width: 100%; }
.hdr-right { display: flex; align-items: center; gap: 20px; justify-content: flex-end; }
.hdr-phone { font: 500 14px/1 var(--font-mono); color: var(--snow); letter-spacing: 0.04em; }

/* mobile header */
.site-hdr.mobile { height: 64px; }
.hdr-row {
  height: 100%; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.hdr-logo-m { width: 40px; height: 40px; }
.hdr-burger {
  width: 40px; height: 40px; display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
  border: 1px solid rgba(248,250,252,0.25); border-radius: 8px;
  background: rgba(10,18,40,0.4); backdrop-filter: blur(10px);
}
.hdr-burger span { display: block; width: 16px; height: 1.5px; background: var(--snow); }

/* ===== HERO STAGE ===== */
.hero-stage {
  position: relative; width: 100%; min-height: 100vh; min-height: 100svh;
  overflow: hidden; background: var(--midnight);
  isolation: isolate;
}
.hero-stage.desktop { min-height: max(100vh, 720px); }
.hero-stage.mobile {
  width: 390px; height: 844px; min-height: 0;
  border-radius: 44px; overflow: hidden;
}

/* parallax container — wraps VideoPlaceholder */
.hero-parallax-bg { position: absolute; inset: 0; z-index: 1; will-change: transform; }

/* ===== VIDEO PLACEHOLDER ===== */
.vplaceholder {
  position: absolute; inset: 0; z-index: 1;
  background: #050810;
}
.vp-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vp-video {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; background: #0A1228;
  opacity: 0; transition: opacity 500ms var(--ease-out, ease-out);
}
.vp-video.ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .vp-video { transition: none; } }

/* video animation when playing */
.vplaceholder.play .vp-halo { animation: weldPulse 1.4s ease-in-out infinite alternate; transform-origin: 960px 595px; }
.vplaceholder.play .vp-halo2 { animation: weldPulse2 0.9s ease-in-out infinite alternate; transform-origin: 960px 595px; }
.vplaceholder.play .vp-core { animation: weldCore 0.6s ease-in-out infinite alternate; transform-origin: 960px 595px; }
.vplaceholder.play .vp-bead { animation: weldBead 0.4s ease-in-out infinite alternate; }
.vplaceholder.play .vp-bead-hot { animation: weldBeadHot 0.32s ease-in-out infinite alternate; }
.vplaceholder.play .vp-sparks { animation: sparks 1.4s ease-in-out infinite; transform-origin: 960px 595px; }

@keyframes weldPulse  { from { opacity: 0.62; transform: scale(0.92); } to { opacity: 0.92; transform: scale(1.04); } }
@keyframes weldPulse2 { from { opacity: 0.5; transform: scale(0.9); } to { opacity: 0.95; transform: scale(1.08); } }
@keyframes weldCore   { from { transform: scale(0.86); opacity: 0.86; } to { transform: scale(1.04); opacity: 1; } }
@keyframes weldBead   { from { opacity: 0.7; } to { opacity: 1; } }
@keyframes weldBeadHot { from { opacity: 0.8; } to { opacity: 1; } }
@keyframes sparks { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-40px); } }

.vp-overlay {
  position: absolute; inset: 0; z-index: 2;
  /* vertical scrim + left scrim so the slogan & stat block stay readable over light frames (FIX-05) */
  background:
    linear-gradient(105deg, rgba(10,18,40,0.82) 0%, rgba(10,18,40,0.45) 38%, rgba(10,18,40,0) 66%),
    linear-gradient(180deg, rgba(10,18,40,0.30) 0%, rgba(10,18,40,0.38) 50%, rgba(10,18,40,0.80) 100%);
}
.vp-vignette {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, transparent 0%, transparent 50%, rgba(5,8,16,0.7) 100%);
}
.vp-grain {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0.14; mix-blend-mode: overlay;
  background-image:
    radial-gradient(rgba(255,255,255,0.6) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.4) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
  animation: grain 800ms steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-1px, 1px); }
  40% { transform: translate(1px, -1px); }
  60% { transform: translate(-1px, -1px); }
  80% { transform: translate(1px, 1px); }
  100% { transform: translate(0, 0); }
}

/* placeholder label — top-left */
.vp-tag {
  position: absolute; top: 100px; left: 48px; z-index: 6;
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 18px;
  border: 1px dashed rgba(255,107,53,0.5);
  border-radius: 6px; background: rgba(5,8,16,0.55); backdrop-filter: blur(8px);
  max-width: 340px;
}
.hero-stage.mobile .vp-tag { top: 76px; left: 16px; right: 16px; max-width: none; padding: 10px 12px; }
.vp-tag-eyebrow { font: 500 10px/1.2 var(--font-mono); color: var(--flame); letter-spacing: 0.14em; }
.vp-tag-title  { font: 500 12px/1.4 var(--font-mono); color: var(--snow); letter-spacing: 0.02em; }
.vp-tag-meta   { font: 400 10px/1.4 var(--font-mono); color: var(--fog); letter-spacing: 0.08em; }
.hero-stage.mobile .vp-tag-title { font-size: 10px; }
.hero-stage.mobile .vp-tag-meta { font-size: 9px; }

/* REC indicator top-right */
.vp-rec {
  position: absolute; top: 100px; right: 48px; z-index: 6;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 14px; border: 1px solid rgba(248,250,252,0.18);
  border-radius: 6px; background: rgba(5,8,16,0.55); backdrop-filter: blur(8px);
  font: 500 11px/1 var(--font-mono); color: var(--snow); letter-spacing: 0.1em;
}
.vp-rec-dot { width: 8px; height: 8px; border-radius: 50%; background: #EF4444; box-shadow: 0 0 12px #EF4444; animation: pulse 1.4s ease-in-out infinite; }
.vp-rec-text { color: #EF4444; }
.vp-rec-time { color: var(--fog); padding-left: 8px; border-left: 1px solid rgba(248,250,252,0.18); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ===== faint vertical grid lines ===== */
.hero-grid-lines {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  max-width: 1440px; left: 50%; transform: translateX(-50%);
  padding: 0 48px;
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px;
  opacity: 0.08;
}
.hero-grid-lines > div { border-left: 1px solid var(--snow); height: 100%; }
.hero-grid-lines > div:last-child { display: none; }

/* ===== HERO CONTENT — DESKTOP ===== */
.hero-content {
  position: relative; z-index: 10;
  max-width: 1440px; margin: 0 auto;
  padding: 200px 48px 200px;
  display: flex; flex-direction: column; align-items: flex-start;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font: 500 13px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--snow);
  padding: 10px 16px;
  border: 1px solid rgba(255,107,53,0.4);
  border-radius: 999px;
  background: rgba(255,107,53,0.06);
  backdrop-filter: blur(6px);
}
.eb-slash { color: var(--flame); font-weight: 700; }

/* slogan — Inter Display XL 120px desktop / 64px mobile */
.hero-slogan {
  margin: 36px 0 0;
  font: 700 120px/1.0 var(--font-sans);
  letter-spacing: -0.04em;
  display: flex; flex-direction: column;
}
.hero-slogan .line { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.hero-slogan .snow .reveal { color: var(--snow); }
.hero-slogan .flame .reveal { color: var(--flame); }
.hero-slogan .reveal {
  display: inline-block;
  opacity: 1;
  transform: translateY(110%);
  animation: lineReveal 1100ms var(--ease-out) forwards;
  will-change: transform;
}
@keyframes lineReveal {
  from { transform: translateY(110%); }
  to   { transform: translateY(0); }
}

.hero-slogan.mobile { font-size: 64px; letter-spacing: -0.04em; }

.hero-lede {
  max-width: 540px; margin: 40px 0 0;
  font: 400 19px/1.55 var(--font-sans); color: var(--fg-muted);
}
.hero-lede.mobile { font-size: 16px; max-width: 340px; margin-top: 28px; }

.hero-cta { display: flex; gap: 14px; margin-top: 48px; }
.hero-cta.mobile { flex-direction: column; width: 100%; margin-top: 32px; gap: 12px; }

/* trust strip below CTAs */
.hero-trust {
  display: flex; align-items: center; gap: 28px; margin-top: 72px;
}
.trust-item { display: flex; flex-direction: column; gap: 6px; }
.ti-num { font: 500 28px/1 var(--font-mono); color: var(--snow); letter-spacing: -0.01em; }
.ti-l { font: 400 11px/1.4 var(--font-mono); color: var(--fg-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.trust-div { width: 1px; height: 40px; background: rgba(71,85,105,0.6); }

/* ===== bottom-left scroll indicator ===== */
.hero-bl {
  position: absolute; left: 48px; bottom: 40px; z-index: 12;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.scroll-ind { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.si-label {
  font: 500 10px/1 var(--font-mono); color: var(--snow); letter-spacing: 0.32em;
  writing-mode: vertical-rl; transform: rotate(180deg);
}
.si-track { width: 1px; height: 64px; background: rgba(248,250,252,0.2); position: relative; overflow: hidden; }
.si-dot {
  position: absolute; left: -1.5px; top: 0; width: 4px; height: 10px;
  background: var(--flame); border-radius: 2px;
  animation: scrollDot 2200ms cubic-bezier(0.65,0,0.35,1) infinite;
}
@keyframes scrollDot {
  0% { transform: translateY(-12px); opacity: 0; }
  10% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(64px); opacity: 0; }
}

/* ===== top-right spec corner ===== */
.hero-tr {
  position: absolute; top: 124px; right: 48px; z-index: 12;
}
.hero-tr .vp-rec ~ & {}
.spec-corner {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 18px;
  border: 1px solid rgba(71,85,105,0.5); border-radius: 6px;
  background: rgba(5,8,16,0.55); backdrop-filter: blur(8px);
  min-width: 280px;
}
.sc-row { display: flex; justify-content: space-between; gap: 24px; font: 400 11px/1.4 var(--font-mono); color: var(--fog); letter-spacing: 0.08em; }
.sc-row span:last-child { color: var(--snow); }
.sc-row .ok { color: var(--ok); }
.hero-stage.desktop .hero-tr { top: 120px; }

/* ===== bottom-right temp HUD ===== */
.hero-br {
  position: absolute; right: 48px; bottom: 72px; z-index: 12;   /* clear gap before h02 (FIX-07) */
}
.temp-hud {
  width: 320px; padding: 18px 20px;
  border: 1px solid rgba(71,85,105,0.5); border-radius: 8px;
  background: rgba(5,8,16,0.6); backdrop-filter: blur(12px);
  display: flex; flex-direction: column; gap: 8px;
}
.th-row { display: flex; align-items: center; gap: 8px; }
.th-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: pulse 1.6s ease-in-out infinite; }
.th-eyebrow { font: 500 10px/1 var(--font-mono); color: var(--fog); letter-spacing: 0.14em; }
.th-value { font: 500 40px/1 var(--font-mono); color: var(--snow); letter-spacing: -0.02em; }
.th-unit { color: var(--fog); font-size: 22px; margin-left: 2px; }
.th-meta { display: flex; justify-content: space-between; font: 400 11px/1 var(--font-mono); color: var(--fog); letter-spacing: 0.04em; }
.th-trend { color: var(--ok); }
.th-bar { position: relative; height: 3px; background: rgba(71,85,105,0.4); border-radius: 2px; margin-top: 4px; }
.th-fill { width: 100%; height: 100%; background: linear-gradient(90deg, var(--ok), var(--flame)); transform: scaleX(0); transform-origin: left; animation: fillIn 1.8s var(--ease-out) forwards 800ms; border-radius: 2px; }
/* soft pulse at the right edge of the temp bar (ENHANCE-01) */
.th-bar::after { content: ''; position: absolute; right: -1px; top: 50%; width: 7px; height: 7px; border-radius: 50%;
  background: var(--flame); box-shadow: 0 0 8px var(--flame); animation: thPulse 1.5s ease-in-out infinite; }
@keyframes thPulse { 0%, 100% { opacity: 0.4; transform: translateY(-50%) scale(0.75); } 50% { opacity: 1; transform: translateY(-50%) scale(1.25); } }
@keyframes fillIn { to { transform: scaleX(0.94); } }

/* ===== MOBILE STAGE additions ===== */
.hero-content.mobile {
  padding: 96px 24px 200px;
}
.hero-mobile-cue {
  position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); z-index: 12;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.hero-mobile-cue span {
  font: 500 9px/1 var(--font-mono); color: rgba(248,250,252,0.7); letter-spacing: 0.32em;
}
.mc-dot { animation: mcDot 1.6s ease-in-out infinite; }
@keyframes mcDot { 0% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(6px); opacity: 0.3; } 100% { transform: translateY(0); opacity: 1; } }

.hero-mobile-strip {
  position: absolute; left: 0; right: 0; bottom: 88px; z-index: 12;
  display: flex; justify-content: space-around; align-items: center;
  padding: 12px 16px;
  background: rgba(5,8,16,0.6); backdrop-filter: blur(8px);
  border-top: 1px solid rgba(71,85,105,0.4); border-bottom: 1px solid rgba(71,85,105,0.4);
  font: 500 10px/1 var(--font-mono); color: var(--snow); letter-spacing: 0.1em;
}
.hero-mobile-strip span:first-child { color: var(--flame); }
.hero-mobile-strip span:nth-child(2) { color: var(--snow); }
.hero-mobile-strip span:last-child { color: var(--fog); }

/* ===== mobile canvas (showing mobile composition in centered phone frame) ===== */
.mobile-canvas {
  min-height: 100vh; width: 100%;
  background: radial-gradient(ellipse at 50% 30%, #0d1320 0%, #050810 70%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 80px 24px;
  gap: 32px;
}
.mobile-canvas-label {
  font: 500 11px/1 var(--font-mono); color: var(--fog);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.mobile-device {
  position: relative; width: 390px; height: 844px;
  border-radius: 56px; overflow: hidden;
  box-shadow:
    0 0 0 12px #0a0d18,
    0 0 0 13px #2a2f3a,
    0 60px 120px rgba(0,0,0,0.6),
    0 24px 48px rgba(255,107,53,0.06);
}
.mobile-device-scroll {
  width: 100%; height: 100%;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none;
}
.mobile-device-scroll::-webkit-scrollbar { display: none; }
.md-notch {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 36px; background: #000; border-radius: 22px; z-index: 100;
  display: flex; align-items: center; justify-content: flex-end; padding-right: 12px;
}
.md-notch::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #1a1a1a; border: 1px solid #2a2a2a; }

/* ===== INTRO ANIMATIONS ===== */
.anim-in {
  opacity: 0; transform: translateY(20px);
  animation: fadeUp 900ms var(--ease-out) forwards;
}
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* slight wider hero-content top padding when scrolled state */
.hero-stage.desktop .hero-content { padding-top: 220px; padding-bottom: 240px; }

/* mobile spec corner hidden in mobile-canvas already, but ensure */
.hero-stage.mobile .hero-tr,
.hero-stage.mobile .hero-br,
.hero-stage.mobile .hero-bl,
.hero-stage.mobile .hero-grid-lines { display: none; }

/* ===== NEXT-BLOCK placeholder (for parallax test) ===== */
.next-block {
  position: relative;
  background: var(--midnight);
  padding: 200px 48px 240px;
  border-top: 1px solid rgba(71,85,105,0.4);
}
.nb-line {
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: 1px; height: 80px; background: linear-gradient(180deg, transparent, var(--flame));
}
.nb-inner {
  max-width: 1440px; margin: 0 auto;
  display: grid; grid-template-columns: 88px 1fr 88px; gap: 32px; align-items: center;
}
.nb-num { font: 500 14px var(--font-mono); color: var(--flame); letter-spacing: 0.08em; }
.nb-eyebrow { font: 500 11px var(--font-mono); color: var(--fog); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 14px; }
.nb-title { font: 700 56px/1 var(--font-sans); color: var(--snow); letter-spacing: -0.03em; }
.nb-sub { font: 400 15px/1.6 var(--font-sans); color: var(--fg-muted); margin-top: 14px; max-width: 540px; }
.nb-arrow { font: 400 32px var(--font-mono); color: var(--fog); text-align: right; }

/* reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  .anim-in { animation: none; opacity: 1; transform: none; }
  .hero-slogan .reveal { animation: none; transform: none; }
  .vplaceholder.play * { animation: none !important; }
}

/* === h02.css === */
/* === H-02 STATS TICKER — стили =================================== */

/* === DESKTOP === */
.stats-ticker {
  position: relative;
  height: 120px;
  background: var(--midnight);
  border-top: 1px solid rgba(71,85,105,0.55);
  border-bottom: 1px solid rgba(71,85,105,0.55);
  overflow: hidden;
}

/* edge-glow flame line — top: draws L→R when in viewport */
.st-flameline {
  position: absolute; top: -1px; left: 0; right: 0; height: 1px; z-index: 3;
  background: linear-gradient(90deg, transparent 0%, transparent 8%, var(--flame) 50%, transparent 92%, transparent 100%);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1600ms var(--ease-out);
}
.st-flameline.draw { transform: scaleX(1); }
.st-flameline.bottom { top: auto; bottom: -1px; transform-origin: right; }

.st-inner {
  position: relative;
  max-width: 1440px; margin: 0 auto;
  height: 100%;
  padding: 0 48px;
  display: flex; flex-direction: column; justify-content: center;
}

/* corner labels */
.st-corner-l, .st-corner-r {
  position: absolute; top: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 10px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--snow);
}
.st-corner-l { left: 48px; }
.st-corner-r { right: 48px; color: var(--fog); }
.st-live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 8px rgba(16,185,129,0.7);
  animation: pulse 1.6s ease-in-out infinite;
}

/* grid */
.st-grid {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex: 1;
  padding-top: 14px;   /* breathing space below LIVE eyebrow */
  padding-bottom: 4px;
}

/* number block */
.st-item {
  display: flex; flex-direction: column; gap: 8px;
  opacity: 0; transform: translateY(14px);
  animation: stItemIn 720ms var(--ease-out) forwards;
}
@keyframes stItemIn { to { opacity: 1; transform: translateY(0); } }

.st-num {
  font: 700 56px/1 var(--font-sans);
  letter-spacing: -0.03em; color: var(--snow);
  display: inline-flex; align-items: baseline;
  font-variant-numeric: tabular-nums;
}
.st-suf { color: var(--flame); margin-left: 2px; }

.st-lab {
  display: inline-flex; align-items: baseline; gap: 8px;
  font: 500 12px/1 var(--font-mono);
  color: var(--fog); letter-spacing: 0.14em; text-transform: uppercase;
}
.st-lab-code { color: var(--flame); opacity: 0.8; }

/* vertical divider 1px × 40px slate */
.st-div {
  width: 1px; height: 40px;
  background: rgba(71,85,105,0.6);
  align-self: center;
  flex-shrink: 0;
}

/* === MOBILE 2×2 === */
.stats-ticker.mobile {
  height: auto;
  padding: 20px 20px 24px;
  border-top: 1px solid rgba(71,85,105,0.55);
  border-bottom: 1px solid rgba(71,85,105,0.55);
}
.st-mobile-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 9px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--snow); margin-bottom: 16px;
}
.st-grid.mobile {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px;
  flex: none; padding: 0;
}
.st-item.mobile {
  position: relative;
  padding-left: 12px;
  border-left: 1px solid rgba(71,85,105,0.6);
  gap: 4px;
}
.st-code {
  font: 500 9px/1 var(--font-mono); color: var(--flame);
  letter-spacing: 0.16em; opacity: 0.8;
}
.st-num.mobile {
  font-size: 40px; letter-spacing: -0.03em;
}
.stats-ticker.mobile .st-lab {
  font-size: 10px; letter-spacing: 0.12em;
  display: block;
  line-height: 1.3;
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .st-flameline { transform: scaleX(1) !important; transition: none; }
  .st-item { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* === warehouses.css === */
/* === СКЛАДЫ — три точки отгрузки ================================== */
/* Фон #050810 (базовый), а не --midnight: соседний stats-ticker сверху и
   bento снизу оба на --midnight, и без смены тона секция слипается с ними. */

.wh-sec {
  position: relative;
  background: #050810;
  border-bottom: 1px solid rgba(71,85,105,0.55);
  padding: 88px 48px 96px;
}

.wh-inner { max-width: 1440px; margin: 0 auto; }

.wh-head { margin-bottom: 48px; }

.wh-eyebrow {
  display: inline-flex; align-items: center;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--flame);
  margin-bottom: 18px;
}

.wh-title {
  font: 700 clamp(34px, 4.4vw, 56px)/1.02 var(--font-sans);
  letter-spacing: -0.03em; color: var(--snow);
  margin: 0 0 14px;
}

.wh-sub {
  font: 400 16px/1.55 var(--font-sans);
  color: var(--fog); max-width: 52ch; margin: 0;
}

/* Легенда-рейка между шапкой и сеткой. Обязательна: полосы в карточках
   кодируют число, и без объявленной шкалы такой график нечестен. Заодно
   даёт третью горизонталь — иначе «заголовок → сразу карточки». */
.wh-legend {
  display: flex; align-items: center; gap: 10px;
  border-top: 1px solid rgba(71,85,105,0.35);
  border-bottom: 1px solid rgba(71,85,105,0.35);
  padding: 10px 0; margin: 0 0 22px;
  font: 500 10px/1.4 var(--font-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(107,114,128,0.9);
}
.wh-legend-key {
  flex: none; width: 26px; height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, var(--flame), rgba(255,107,53,0.25));
}

.wh-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* padding: 0 — карточка теперь делится хайрлайнами от края до края,
   отступы живут внутри .wh-card-top / .wh-zone. Именно эта разбивка
   на отсеки превращает визитку в спецификацию. */
.wh-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
  border: 1px solid var(--slate);
  border-radius: var(--r-3);
  background: rgba(10,18,40,0.5);
  opacity: 0; transform: translateY(16px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out),
              border-color 240ms var(--ease-out), background 240ms var(--ease-out);
}
.wh-sec.in .wh-card { opacity: 1; transform: translateY(0); }
.wh-card:hover { border-color: rgba(255,107,53,0.55); background: rgba(10,18,40,0.78); }

/* завод-площадка: тонкая огненная линия сверху отличает её от обычного склада */
.wh-card-home::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  z-index: 1;
  background: linear-gradient(90deg, var(--flame), transparent 85%);
}

.wh-card-top { padding: 22px 24px 18px; }

.wh-rail {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}

.wh-code {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.14em; color: var(--flame); opacity: 0.8;
}

.wh-city {
  font: 700 30px/1.05 var(--font-sans);
  letter-spacing: -0.02em; color: var(--snow);
  margin: 0 0 6px;
}

.wh-area {
  display: block;
  font: 400 14px/1.35 var(--font-sans);
  color: var(--fg-muted);
  margin-bottom: 12px;
}

/* роль — пилюля, а не голая строка: карточка получает опорную точку */
.wh-role {
  display: inline-flex; padding: 4px 8px;
  border: 1px solid rgba(71,85,105,0.6); border-radius: var(--r-1);
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fog);
}
.wh-card-home .wh-role { color: var(--flame); border-color: rgba(255,107,53,0.45); }

.wh-addr {
  display: block;
  font: 400 13px/1.5 var(--font-mono);
  color: var(--fog); font-style: normal;
  margin: 12px 0 0;
}
.wh-addr-2 { display: block; color: rgba(107,114,128,0.7); margin-top: 3px; }

.wh-stock {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ok);
}
.wh-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 8px rgba(16,185,129,0.7);
}

/* --- зона покрытия: города вокруг склада ---------------------------
   Полоса рисуется ПОД строкой и прижата к левому краю, а левый край —
   это сам склад (он в шапке карточки прямо над списком). Тогда длина
   читается как «насколько город отъехал от склада», а не как рейтинг
   города. Шкала общая на все три карточки — см. SCALE_KM в warehouses.jsx. */
.wh-zone {
  flex: 1; display: flex; flex-direction: column;
  border-top: 1px solid rgba(71,85,105,0.4);
  padding: 16px 24px 18px;
}

.wh-zone-h {
  display: flex; justify-content: space-between;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(107,114,128,0.85);
  margin-bottom: 14px;
}

.wh-zone-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 11px;
}

.wh-row {
  position: relative;
  display: grid; grid-template-columns: 1fr auto;
  align-items: baseline; column-gap: 12px;
  padding-bottom: 7px;
}
/* дорожка во всю ширину = шкала 0…SCALE_KM */
.wh-row::before {
  content: ''; position: absolute; inset: auto 0 0 0;
  height: 2px; border-radius: 1px; background: rgba(71,85,105,0.28);
}
/* заливка ∝ расстоянию; --w и --d приходят инлайном из JSX */
.wh-row::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: var(--w); height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, var(--flame), rgba(255,107,53,0.25));
  opacity: 0.75;
  transform: scaleX(0); transform-origin: left;
  transition: transform 700ms var(--ease-out); transition-delay: var(--d);
}
.wh-sec.in .wh-row::after { transform: scaleX(1); }
.wh-row:first-child::after { opacity: 1; }

.wh-row-city {
  font: 500 14px/1.2 var(--font-sans); color: var(--snow);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wh-row-km {
  font: 400 12px/1 var(--font-mono); color: var(--fog);
  letter-spacing: 0.02em; white-space: nowrap;
  font-variant-numeric: tabular-nums;  /* иначе цифры пляшут и правый край рвётся */
}
.wh-row:first-child .wh-row-km { color: var(--flame); }

.wh-scale {
  display: flex; justify-content: space-between;
  margin-top: 12px; padding-top: 6px;
  border-top: 1px solid rgba(71,85,105,0.22);
  font: 400 9px/1 var(--font-mono);
  letter-spacing: 0.1em; color: rgba(107,114,128,0.6);
}

/* «Дальше — …» БЕЗ километров: 1000+ км не аргумент близости */
.wh-more {
  margin: 14px 0 0; padding-top: 11px;
  border-top: 1px dashed rgba(71,85,105,0.35);
  font: 400 12px/1.45 var(--font-mono);
  color: rgba(107,114,128,0.85);
}

/* передача к карте h07 ниже: «ближние зоны → вся страна».
   Так соседство двух географических блоков читается лестницей, а не повтором. */
.wh-foot {
  margin: 22px 0 0;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font: 400 14px/1.5 var(--font-sans); color: var(--fog);
}
.wh-foot-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--flame);
}
.wh-foot-link:hover { text-decoration: underline; }

@media (max-width: 1100px) {
  .wh-card-top { padding: 18px 18px 14px; }
  .wh-zone { padding: 14px 18px 16px; }
  .wh-city { font-size: 26px; }
  .wh-row-city { font-size: 13px; }
}

@media (max-width: 900px) {
  .wh-sec { padding: 56px 20px 60px; }
  .wh-head { margin-bottom: 28px; }
  .wh-sub { font-size: 15px; }
  .wh-grid { grid-template-columns: 1fr; gap: 12px; }
  .wh-city { font-size: 24px; }
  .wh-row-city { font-size: 15px; }
  /* шкала уже названа в легенде — в одной колонке она лишняя */
  .wh-scale { display: none; }
  /* Моно-подписи на мобильном — не ниже 12px: порог читаемости Яндекса и
     Google, ради которого сделан src/shared/mobile-legibility.css. Задаём
     здесь, чтобы генератору не пришлось перекрывать заведомо мелкий кегль.
     Трекинг генератор НЕ правит, а .14em на 360px распирает моно-строку —
     поэтому вместе с кеглем руками сбавляем letter-spacing. */
  .wh-addr { font-size: 12px; }
  .wh-role { font-size: 12px; letter-spacing: 0.1em; }
  .wh-eyebrow { font-size: 12px; }
  .wh-code { font-size: 12px; }
  .wh-stock { font-size: 12px; letter-spacing: 0.1em; }
  .wh-zone-h { font-size: 12px; letter-spacing: 0.08em; }
  .wh-row-km { font-size: 12px; letter-spacing: 0; }
  .wh-more { font-size: 12px; }
  .wh-legend { font-size: 12px; letter-spacing: 0.06em; flex-wrap: wrap; }
  .wh-foot-link { font-size: 12px; letter-spacing: 0.08em; }
}

@media (max-width: 560px) {
  .wh-addr-2 { display: none; }
  .wh-zone-list { gap: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .wh-card { opacity: 1 !important; transform: none !important; transition: none; }
  .wh-row::after { transform: none !important; transition: none; }
}

/* === h03.css === */
/* === H-03 BENTO CATALOG — стили =================================== */

.bento-section {
  position: relative;
  background: var(--midnight);
  padding: 140px 48px 160px;
}

/* section header */
.bs-head {
  max-width: 1440px; margin: 0 auto 64px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: end;
}
.bs-head-l { display: flex; flex-direction: column; gap: 18px; max-width: 720px; }
.bs-head-r { display: flex; flex-direction: column; align-items: flex-end; gap: 28px; }

.bs-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--snow);
}
.bs-e-slash { color: var(--flame); font-weight: 700; }

.bs-title {
  font: 700 96px/0.95 var(--font-sans);
  letter-spacing: -0.04em;
  color: var(--snow); margin: 0;
  font-variant-numeric: tabular-nums;
}
.bs-t-suf {
  font-weight: 400; color: var(--fog);
  letter-spacing: -0.02em;
}

.bs-sub {
  font: 400 17px/1.55 var(--font-sans); color: var(--fg-muted);
  max-width: 540px; margin: 6px 0 0;
  text-wrap: pretty;
}

.bs-link {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 14px/1 var(--font-sans); color: var(--snow);
  padding: 12px 18px; border: 1px solid var(--slate);
  border-radius: 999px; cursor: pointer;
  transition: border-color 200ms var(--ease-out), color 200ms;
}
.bs-link svg { width: 16px; height: 16px; transition: transform 200ms var(--ease-out); }
.bs-link:hover { border-color: var(--flame); color: var(--flame); }
.bs-link:hover svg { transform: translateX(4px); }

.bs-spec {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 18px; border: 1px solid rgba(71,85,105,0.4);
  border-radius: 8px; background: rgba(31,41,55,0.4);
  backdrop-filter: blur(8px);
  min-width: 280px;
}
.bs-spec-row {
  display: flex; justify-content: space-between; gap: 24px;
  font: 400 11px/1.4 var(--font-mono); color: var(--fog);
  letter-spacing: 0.08em;
}
.bs-spec-row span:last-child { color: var(--snow); }
.bs-spec-row .ok { color: var(--ok); }

/* === GRID — desktop 4×3 pinwheel === */
.bento-grid {
  max-width: 1440px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 220px 220px 220px 220px;
  gap: 12px;
}

/* === TILE === */
.bento-tile {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
  background: var(--steel);
  border: 1px solid rgba(71,85,105,0.4);
  text-decoration: none;
  display: block;
  opacity: 0; transform: translateY(20px);
  transition: transform 360ms var(--ease-out), border-color 280ms var(--ease-out), box-shadow 320ms var(--ease-out);
  color: var(--snow);
}
.bento-section.in .bento-tile {
  animation: btIn 640ms var(--ease-out) forwards;
}
.bento-section.in .bento-tile:nth-child(1) { animation-delay: 100ms; }
.bento-section.in .bento-tile:nth-child(2) { animation-delay: 200ms; }
.bento-section.in .bento-tile:nth-child(3) { animation-delay: 280ms; }
.bento-section.in .bento-tile:nth-child(4) { animation-delay: 360ms; }
.bento-section.in .bento-tile:nth-child(5) { animation-delay: 440ms; }
.bento-section.in .bento-tile:nth-child(6) { animation-delay: 520ms; }
@keyframes btIn { to { opacity: 1; transform: translateY(0); } }

.bento-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(255,107,53,0.6);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 12px 24px rgba(255,107,53,0.12);
}

.bento-tile.accent {
  border-color: rgba(255,107,53,0.35);
  background: linear-gradient(135deg, #1a0e0a 0%, #1F2937 60%);
}
.bento-tile.accent:hover { border-color: rgba(255,107,53,0.8); }

/* background gradient layer per tile */
.bt-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(circle at 80% 110%, rgba(255,107,53,0.06), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 30%, rgba(0,0,0,0.3) 100%);
}
.bento-tile.accent .bt-bg {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,107,53,0.15), transparent 50%),
    radial-gradient(circle at 90% 110%, rgba(255,107,53,0.18), transparent 60%);
}

/* grid-pattern texture */
.bt-grid-pattern {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(71,85,105,0.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(71,85,105,0.18) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.35;
  mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 70%, transparent 100%);
}

/* faint product icon centered */
.bt-icon {
  position: absolute; z-index: 2;
  inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--snow); opacity: 0.18;
  transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-out);
  pointer-events: none;
}
.bt-icon svg { width: 70%; max-width: 360px; height: auto; }
.bento-tile.m .bt-icon svg { width: 60%; max-width: 200px; }
.bento-tile:hover .bt-icon { opacity: 0.36; transform: scale(1.04); }
.bento-tile.accent .bt-icon { opacity: 0.26; color: #FFB070; }
.bento-tile.accent:hover .bt-icon { opacity: 0.5; }

/* category photo. .cover = full-bleed studio shot (fills tile); .contain = transparent cutout (floats) */
.bt-photo { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: transform 600ms var(--ease-out); }
.bt-photo.cover { object-fit: cover; object-position: center 42%; }
.bt-photo.contain { object-fit: contain; object-position: center 34%; padding: 7%; filter: drop-shadow(0 26px 38px rgba(0,0,0,0.55)); }
.bento-tile.m .bt-photo.contain { object-position: center 30%; padding: 11% 11% 34%; }
.bento-tile:hover .bt-photo { transform: scale(1.04); }

/* dark vignette over icon/photo — so text on bottom stays legible */
.bt-tone {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,18,40,0) 22%, rgba(10,18,40,0.55) 62%, rgba(10,18,40,0.9) 100%);
}

/* PHOTO PLACEHOLDER tag — top-left */
.bt-photo-tag {
  position: absolute; top: 16px; left: 16px; z-index: 5;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border: 1px dashed rgba(255,107,53,0.5);
  border-radius: 4px;
  background: rgba(5,8,16,0.55);
  backdrop-filter: blur(6px);
  font: 500 9px/1 var(--font-mono); color: var(--flame);
  letter-spacing: 0.14em;
}
.bt-pt-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--flame); }

/* count badge — top-right */
.bt-count {
  position: absolute; top: 16px; right: 16px; z-index: 5;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0;
}
.bt-c-num { font: 500 18px/1 var(--font-mono); color: var(--snow); letter-spacing: -0.01em; }
.bento-tile.l .bt-c-num { font-size: 24px; }
.bt-c-l { font: 400 9px/1 var(--font-mono); color: var(--fog); letter-spacing: 0.16em; text-transform: uppercase; margin-top: 4px; }

/* content — bottom of tile */
.bt-content {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  padding: 24px;
  display: flex; flex-direction: column; gap: 8px;
}
.bento-tile.l .bt-content { padding: 32px; gap: 12px; }

.bt-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 10px/1 var(--font-mono); color: var(--snow);
  letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 4px;
}
.bento-tile.l .bt-kicker { font-size: 11px; }
.bt-k-slash { color: var(--flame); font-weight: 700; }
.bt-k-code { color: var(--flame); }
.bt-k-text { color: var(--snow); opacity: 0.85; }

.bt-name {
  font: 700 24px/1.1 var(--font-sans); color: var(--snow);
  letter-spacing: -0.02em; margin: 0;
}
.bento-tile.l .bt-name { font: 700 44px/1 var(--font-sans); letter-spacing: -0.03em; }

.bt-sub {
  font: 500 13px/1.4 var(--font-sans); color: var(--fg-muted);
  letter-spacing: 0; margin: -2px 0 0;
}
.bento-tile.l .bt-sub { font-size: 16px; }

.bt-meta {
  font: 400 13px/1.5 var(--font-sans); color: var(--fg-muted);
  margin: 4px 0 0; max-width: 420px;
}

.bt-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid rgba(71,85,105,0.4);
}
.bt-cta {
  font: 500 13px/1 var(--font-mono); color: var(--snow);
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: color 200ms;
}
.bt-arrow {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(31,41,55,0.6); border: 1px solid var(--slate);
  color: var(--snow);
  transition: background 220ms var(--ease-out), border-color 220ms, transform 220ms;
}
.bt-arrow svg { width: 16px; height: 16px; transition: transform 200ms; }

.bento-tile:hover .bt-cta { color: var(--flame); }
.bento-tile:hover .bt-arrow {
  background: var(--flame); border-color: var(--flame);
  transform: scale(1.06);
}
.bento-tile:hover .bt-arrow svg { transform: translateX(2px); }

/* === MOBILE — stacked single column === */
.bento-section.mobile { padding: 56px 20px 64px; }
.bs-head.mobile { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; max-width: none; }
.bs-title.mobile { font: 700 56px/0.95 var(--font-sans); letter-spacing: -0.04em; margin: 0; }
.bs-title.mobile .bs-t-suf { font-size: 56px; }
.bs-sub.mobile { font-size: 15px; max-width: none; }

.bento-grid.mobile {
  display: flex; flex-direction: column; gap: 10px;
  max-width: none; padding: 0;
}
.bento-tile.mobile {
  height: 220px; opacity: 1; transform: none; animation: none !important;
}
.bento-tile.l.mobile { height: 280px; }
.bento-tile.mobile .bt-name { font: 700 26px/1.05 var(--font-sans); }
.bento-tile.l.mobile .bt-name { font: 700 32px/1 var(--font-sans); }
.bento-tile.mobile .bt-meta { display: none; }
.bento-tile.mobile .bt-photo-tag { font-size: 8px; padding: 5px 8px; }
.bento-tile.mobile .bt-icon svg { width: 60%; }
.bento-tile.mobile .bt-content { padding: 20px; }

/* responsive — tablet */
@media (max-width: 1100px) and (min-width: 768px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 220px);
  }
  .bento-tile { grid-area: auto !important; }
  .bento-tile.l { grid-column: span 2; height: 320px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bento-tile { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* === h04.css === */
/* === H-04 KILLER FEATURE — стили ================================== */

.killer-feature {
  position: relative;
  background: linear-gradient(180deg, var(--midnight) 0%, #060B1B 100%);
  padding: 80px 48px 0;
  min-height: 100vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}

.kf-bg-haze {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 60% at 25% 50%, rgba(255,107,53,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 75% 40%, rgba(59,130,246,0.04) 0%, transparent 60%);
}

/* tracker strip top */
.kf-top-strip {
  position: relative; z-index: 2;
  max-width: 1440px; margin: 0 auto;
  width: 100%; padding: 0 0 56px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid rgba(71,85,105,0.3);
  font: 500 11px/1 var(--font-mono); color: var(--fog);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.kf-ts-l { color: var(--flame); }

/* 2-col grid */
.kf-grid {
  position: relative; z-index: 2;
  max-width: 1440px; margin: 0 auto;
  width: 100%; flex: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
  padding: 80px 0 100px;
  align-items: center;
}

/* === LEFT — text + mega ============================ */
.kf-left {
  display: flex; flex-direction: column; gap: 32px;
  max-width: 640px;
}

.kf-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 13px/1 var(--font-mono);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--flame);
  padding: 10px 16px;
  border: 1px solid rgba(255,107,53,0.4);
  border-radius: 999px;
  background: rgba(255,107,53,0.06);
  width: fit-content;
}
.kf-e-slash { font-weight: 700; }

.kf-title {
  font: 700 88px/0.95 var(--font-sans);
  letter-spacing: -0.04em;
  color: var(--snow); margin: 0;
  text-wrap: balance;
}
.kf-t-em { color: var(--flame); font-weight: 700; }

/* MEGA — "5°" 240px Flame  ─────────────────────────────────────── */
.kf-mega-wrap {
  display: flex; align-items: flex-end; gap: 18px;
  margin: 12px 0 4px;
  overflow: visible;
}
.kf-from {
  font: 400 32px/1 var(--font-sans);
  color: var(--fog); letter-spacing: -0.02em;
  margin-bottom: 56px;     /* sit on the baseline of the mega digit */
}
.mega-angle {
  position: relative;
  display: inline-block;
  isolation: isolate;
  padding: 12px 8px 0;       /* breathing room — keeps ° glyph in-frame */
  line-height: 1;
  overflow: visible;
}
.ma-text {
  font: 700 240px/1 var(--font-sans);
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFB070 0%, #FF6B35 50%, #E55A2B 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  display: inline-block;
  padding-right: 0.12em;   /* extend gradient box so ° ring's right edge stays painted */
}
.ma-glow {
  position: absolute; inset: -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 55% 50% at 40% 60%, rgba(255,107,53,0.24) 0%, transparent 60%);
  filter: blur(40px);
}
.mega-angle.mobile .ma-text { font-size: 160px; }
.mega-angle.mobile { padding: 8px 6px 0; }

/* range strip below mega */
.kf-range {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px; border-radius: 8px;
  background: rgba(31,41,55,0.5);
  border: 1px solid rgba(71,85,105,0.5);
  width: fit-content;
  margin-top: -4px;
}
.kf-r-eyebrow {
  font: 500 10px/1 var(--font-mono); color: var(--flame);
  letter-spacing: 0.18em;
}
.kf-r-text {
  font: 500 13px/1 var(--font-mono); color: var(--snow);
  letter-spacing: 0.04em;
}

.kf-body {
  font: 400 17px/1.6 var(--font-sans); color: var(--fg-muted);
  max-width: 580px; margin: 0;
  text-wrap: pretty;
}

.kf-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-ghost {
  background: transparent; color: var(--snow); border: 0;
  text-decoration: underline; text-decoration-color: rgba(248,250,252,0.35);
  text-underline-offset: 6px;
  height: 56px; padding: 0 8px;
  font: 500 15px/1 var(--font-sans);
  transition: text-decoration-color 220ms var(--ease-out), color 220ms;
}
.btn-ghost:hover { text-decoration-color: var(--flame); color: var(--flame); }

/* === RIGHT — frame + slider ============================ */
.kf-right {
  display: flex; align-items: center; justify-content: flex-end;
}
.kf-frame {
  width: 100%; max-width: 540px;
  padding: 28px;
  border: 1px solid rgba(71,85,105,0.5);
  border-radius: 16px;
  background: rgba(31,41,55,0.55);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  display: flex; flex-direction: column; gap: 16px;
}

.kf-frame-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(71,85,105,0.4);
  font: 500 10px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase;
}
.kf-fh-l {
  display: inline-flex; align-items: center; gap: 8px; color: var(--snow);
}
.kf-fh-r { color: var(--electric); }
.kf-live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 8px rgba(16,185,129,0.7);
  animation: pulse 1.6s ease-in-out infinite;
}

.elbow { width: 100%; height: 260px; display: block; }
.elbow-glow { animation: elbowGlow 2s ease-in-out infinite alternate; transform-origin: center; }
@keyframes elbowGlow { from { opacity: 0.7; } to { opacity: 1; transform: scale(1.05); } }

/* === ANGLE SLIDER ============================ */
.angle-slider {
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px 4px 8px;
  border-top: 1px solid rgba(71,85,105,0.4);
}
.as-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 36px;   /* leave room for tooltip floating above the handle */
}
.as-eyebrow {
  font: 500 10px/1 var(--font-mono); color: var(--snow);
  letter-spacing: 0.18em; text-transform: uppercase;
}
.as-range {
  font: 400 11px/1 var(--font-mono); color: var(--fog);
  letter-spacing: 0.08em;
}

.as-track {
  position: relative;
  height: 6px;
  background: rgba(71,85,105,0.4); border-radius: 3px;
  cursor: pointer; margin-top: 0;
  touch-action: none;
}
.as-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--flame) 0%, #FFB070 100%);
  border-radius: 3px;
  pointer-events: none;
}
.as-tick-mark {
  position: absolute; top: -4px; width: 1px; height: 14px;
  background: rgba(71,85,105,0.6);
  pointer-events: none;
}
.as-handle {
  position: absolute; top: 50%;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--snow); border: 3px solid var(--flame);
  transform: translate(-50%, -50%);
  box-shadow: 0 6px 18px rgba(0,0,0,0.5), 0 0 0 6px rgba(255,107,53,0.12);
  pointer-events: none;
  transition: transform 80ms;
}
.angle-slider.drag .as-handle { transform: translate(-50%, -50%) scale(1.1); }
.as-tip {
  position: absolute; bottom: 22px; transform: translateX(-50%);
  background: var(--flame); color: var(--snow);
  padding: 6px 12px; border-radius: 4px;
  font: 500 13px/1 var(--font-mono); letter-spacing: 0.02em;
  white-space: nowrap; pointer-events: none;
  box-shadow: 0 4px 14px rgba(255,107,53,0.35);
}
.as-tip::after {
  content: ''; position: absolute; left: var(--arrow-x, 50%); bottom: -4px;
  transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: var(--flame);
}
/* clip the head row so tooltip near edges doesn't push the "5° → 90°" label out */
.as-head { min-height: 18px; }

.as-ticks {
  display: flex; justify-content: space-between; margin-top: 14px;
  font: 400 11px var(--font-mono); color: var(--fog); letter-spacing: 0.08em;
}
.as-ticks span { transition: color 200ms; }
.as-ticks .on { color: var(--flame); }

/* === FRAME SPECS row === */
.kf-presets {
  display: flex; align-items: center; gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(71,85,105,0.4);
  flex-wrap: wrap;
}
.kf-presets-l {
  font: 500 10px/1 var(--font-mono); color: var(--flame);
  letter-spacing: 0.16em; text-transform: uppercase;
  margin-right: 4px;
}
.kf-preset-chip {
  height: 30px; padding: 0 12px; border-radius: 6px;
  background: transparent; border: 1px solid var(--slate);
  font: 500 12px/1 var(--font-mono); color: var(--snow);
  letter-spacing: 0.02em; cursor: pointer;
  transition: all 180ms var(--ease-out);
}
.kf-preset-chip:hover { border-color: var(--snow); }
.kf-preset-chip.on {
  background: var(--flame); border-color: var(--flame); color: var(--snow);
}
.kf-presets-r {
  font: 400 11px/1 var(--font-mono); color: var(--fog);
  letter-spacing: 0.04em; margin-left: auto;
}
@media (max-width: 600px) { .kf-presets-r { display: none; } }

.kf-specs {
  display: flex; align-items: stretch; gap: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(71,85,105,0.4);
}
.kf-spec {
  flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 0 14px;
}
.kf-spec:first-child { padding-left: 0; }
.kf-spec:last-child  { padding-right: 0; }
.kf-spec-div { width: 1px; background: rgba(71,85,105,0.4); align-self: stretch; }
.ks-l { font: 400 10px/1 var(--font-mono); color: var(--fog); letter-spacing: 0.14em; text-transform: uppercase; }
.ks-v { font: 400 14px/1 var(--font-mono); color: var(--fog); margin-top: 2px; }
.ks-num { font: 500 22px/1 var(--font-mono); color: var(--snow); letter-spacing: -0.01em; }

/* === MOBILE ============================ */
.killer-feature.mobile {
  padding: 56px 20px 64px;
  min-height: 0;
}
.killer-feature.mobile .kf-left {
  max-width: none; gap: 24px;
}
.killer-feature.mobile .kf-title {
  font: 700 48px/1 var(--font-sans); letter-spacing: -0.04em;
}
.killer-feature.mobile .kf-mega-wrap {
  align-items: center; gap: 12px; margin: -8px 0;
}
.killer-feature.mobile .kf-from {
  font-size: 22px; margin-top: 18px;
}
.killer-feature.mobile .kf-range {
  flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 10px 12px;
}
.killer-feature.mobile .kf-r-text { font-size: 11px; }
.killer-feature.mobile .kf-body { font-size: 15px; }
.killer-feature.mobile .kf-cta { flex-direction: column; width: 100%; }
.killer-feature.mobile .btn-primary, .killer-feature.mobile .btn-ghost { width: 100%; }
.killer-feature.mobile .kf-right { margin-top: 12px; justify-content: stretch; }
.killer-feature.mobile .kf-frame { max-width: none; padding: 16px; gap: 12px; }
.killer-feature.mobile .elbow { height: 180px; }

/* in-view entry animations */
.killer-feature.in .kf-eyebrow,
.killer-feature.in .kf-title,
.killer-feature.in .kf-mega-wrap,
.killer-feature.in .kf-range,
.killer-feature.in .kf-body,
.killer-feature.in .kf-cta {
  animation: kfIn 720ms var(--ease-out) backwards;
}
.killer-feature.in .kf-eyebrow   { animation-delay: 80ms;  }
.killer-feature.in .kf-title     { animation-delay: 180ms; }
.killer-feature.in .kf-mega-wrap { animation-delay: 320ms; }
.killer-feature.in .kf-range     { animation-delay: 520ms; }
.killer-feature.in .kf-body      { animation-delay: 660ms; }
.killer-feature.in .kf-cta       { animation-delay: 780ms; }
.killer-feature.in .kf-right     { animation: kfIn 800ms var(--ease-out) 400ms backwards; }
@keyframes kfIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .killer-feature * { animation: none !important; }
}

/* === h05.css === */
/* === H-05 СВАРОЧНОЕ ОБОРУДОВАНИЕ — стили =========================== */

.h5-section {
  background: var(--steel);
  padding: 120px 0;
  position: relative;
  isolation: isolate;
}

.h5-inner {
  max-width: 1440px; margin: 0 auto; padding: 0 48px;
}

/* === HEADER ============================ */
.h5-head {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px;
  align-items: end; margin-bottom: 56px;
}
.h5-head-l { display: flex; flex-direction: column; gap: 18px; max-width: 720px; }
.h5-head-r { display: flex; flex-direction: column; align-items: flex-end; gap: 24px; }

.h5-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--flame);
}
.h5-e-slash { font-weight: 700; }

.h5-title {
  font: 700 88px/0.95 var(--font-sans);
  letter-spacing: -0.04em; color: var(--snow); margin: 0;
}

.h5-sub {
  font: 400 17px/1.55 var(--font-sans); color: var(--fg-muted);
  margin: 0; max-width: 540px; text-wrap: pretty;
}
.h5-sub strong { color: var(--snow); font-weight: 600; }

.h5-all-link {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 14px/1 var(--font-sans); color: var(--snow);
  padding: 12px 18px; border: 1px solid rgba(248,250,252,0.3);
  border-radius: 999px; cursor: pointer;
  background: rgba(10,18,40,0.4); backdrop-filter: blur(6px);
  transition: border-color 200ms var(--ease-out), color 200ms;
}
.h5-all-link svg { width: 16px; height: 16px; transition: transform 200ms var(--ease-out); }
.h5-all-link:hover { border-color: var(--flame); color: var(--flame); }
.h5-all-link:hover svg { transform: translateX(4px); }

.h5-arrow {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(248,250,252,0.3);
  background: rgba(10,18,40,0.5); color: var(--snow);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 220ms var(--ease-out), border-color 220ms, transform 220ms;
}
.h5-arrow svg { width: 22px; height: 22px; }
.h5-arrow:hover { background: var(--flame); border-color: var(--flame); transform: scale(1.05); }
.h5-arrow:active { transform: scale(0.97); }
/* стрелки-оверлеи по краям ленты (на уровне фото карточек) */
.h5-arrow-side {
  position: absolute; top: 150px; z-index: 4;
  width: 52px; height: 52px;
  background: rgba(10,18,40,0.82);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
}
.h5-arrow-side.left { left: -10px; }
.h5-arrow-side.right { right: -10px; }
@media (max-width: 768px) { .h5-arrow-side { display: none; } } /* на мобиле — свайп */

/* === PROGRESS STRIP ============================ */
.h5-progress {
  display: grid; grid-template-columns: minmax(260px, 1fr) 2fr minmax(260px, 1fr);
  gap: 24px; align-items: center;
  padding: 16px 0; margin-bottom: 32px;
  border-top: 1px solid rgba(248,250,252,0.12);
  border-bottom: 1px solid rgba(248,250,252,0.12);
  font: 500 11px/1 var(--font-mono); color: var(--fog);
  letter-spacing: 0.08em;
}
.h5-progress-l { display: inline-flex; align-items: baseline; gap: 8px; }
.h5-progress-num { font: 500 22px/1 var(--font-mono); color: var(--flame); letter-spacing: -0.02em; }
.h5-progress-sep { color: var(--fog); }
.h5-progress-total { font: 500 14px/1 var(--font-mono); color: var(--fog); }
.h5-progress-l-name { margin-left: 12px; color: var(--snow); letter-spacing: 0.04em; }

.h5-progress-track { height: 1px; background: rgba(71,85,105,0.5); position: relative; overflow: hidden; }
.h5-progress-fill { height: 3px; background: var(--flame); transform: translateY(-1px); transition: width 240ms var(--ease-out); }

.h5-progress-r {
  display: inline-flex; justify-content: flex-end; gap: 8px; text-transform: uppercase;
  color: var(--fg-muted); letter-spacing: 0.12em;
}
.h5-progress-r .dot { color: var(--fog); }

/* === CAROUSEL ============================ */
.h5-carousel-wrap { position: relative; }
.h5-carousel {
  display: flex; gap: 16px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-padding: 0;
  padding: 12px 0 24px;
  cursor: grab;
}
.h5-carousel:active { cursor: grabbing; }
.h5-carousel::-webkit-scrollbar { display: none; }

/* edge fade overlays */
.h5-fade-l, .h5-fade-r {
  position: absolute; top: 12px; bottom: 24px; width: 80px; pointer-events: none; z-index: 2;
}
.h5-fade-l { left: -1px; background: linear-gradient(90deg, var(--steel), transparent); }
.h5-fade-r { right: -1px; background: linear-gradient(-90deg, var(--steel), transparent); }

/* === CARD ============================ */
.welder-card {
  flex: 0 0 320px;
  height: 420px;
  border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, var(--midnight) 0%, #050810 240px, var(--midnight) 240px, #1A2138 100%);
  border: 1px solid rgba(71,85,105,0.4);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  position: relative;
  --tx: 0deg; --ty: 0deg; --sc: 1;
  transform: perspective(1200px) rotateY(var(--tx)) rotateX(var(--ty)) scale(var(--sc));
  transform-style: preserve-3d;
  transition: transform 220ms var(--ease-out), border-color 220ms;
  cursor: pointer;
}
.welder-card:hover { --sc: 1.02; border-color: rgba(255,107,53,0.65); box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,107,53,0.25); }
.welder-card.featured { border-color: rgba(255,107,53,0.45); }
.welder-card.featured:hover { border-color: rgba(255,107,53,0.85); }

/* photo region */
.wc-photo {
  position: relative;
  height: 240px;
  background: radial-gradient(ellipse 80% 60% at 50% 60%, #0d1424 0%, #050810 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(71,85,105,0.4);
}

/* blue rim-light effect — subtle gradient */
.wc-photo::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 50%, rgba(59,130,246,0.18), transparent 70%),
    radial-gradient(ellipse 50% 40% at 20% 70%, rgba(255,107,53,0.05), transparent 70%);
  pointer-events: none;
}

.wc-photo-img {
  max-width: 80%; max-height: 78%;
  object-fit: contain; position: relative; z-index: 1;
  filter: brightness(1.08) contrast(1.1);
  mix-blend-mode: lighten;
  transition: transform 380ms var(--ease-out);
}
.welder-card:hover .wc-photo-img { transform: scale(1.05); }

.wc-photo-tags {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
}
.wc-code {
  font: 500 14px/1 var(--font-mono); color: var(--snow);
  padding: 5px 8px; border: 1px solid rgba(248,250,252,0.25);
  border-radius: 4px; background: rgba(5,8,16,0.5); backdrop-filter: blur(6px);
  letter-spacing: 0.04em;
}
.wc-tag {
  font: 500 9px/1 var(--font-mono); color: var(--fog);
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 5px 8px;
}
.welder-card.featured .wc-tag { color: var(--flame); }
.welder-card.featured .wc-code { border-color: rgba(255,107,53,0.6); color: var(--flame); }

.wc-stock {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 8px; border-radius: 4px;
  background: rgba(5,8,16,0.5); backdrop-filter: blur(6px);
  border: 1px solid rgba(248,250,252,0.15);
  font: 500 9px/1 var(--font-mono); color: var(--snow);
  letter-spacing: 0.14em;
}
.wc-stock-dot { width: 6px; height: 6px; border-radius: 50%; }
.wc-stock-dot.in    { background: var(--ok); box-shadow: 0 0 6px rgba(16,185,129,0.7); }
.wc-stock-dot.order { background: var(--warn); box-shadow: 0 0 6px rgba(245,158,11,0.7); }

.wc-serial {
  position: absolute; bottom: 10px; left: 14px; z-index: 3;
  font: 400 9px/1 var(--font-mono); color: var(--fog);
  letter-spacing: 0.14em;
  opacity: 0.7;
}

/* body */
.wc-body {
  flex: 1; padding: 20px 22px 22px;
  display: flex; flex-direction: column; gap: 6px;
  background: linear-gradient(180deg, rgba(31,41,55,0.3) 0%, var(--steel) 100%);
  border-radius: 0 0 12px 12px;
}
.wc-family {
  font: 500 9px/1 var(--font-mono); color: var(--flame);
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 2px;
}
.wc-name {
  font: 700 26px/1.05 var(--font-sans); color: var(--snow);
  margin: 0; letter-spacing: -0.02em;
}
.wc-range {
  font: 500 14px/1.4 var(--font-mono); color: var(--snow);
  letter-spacing: 0.04em; margin-top: 4px;
}
.wc-drive {
  font: 400 13px/1.4 var(--font-sans); color: var(--fog);
}

.wc-foot {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid rgba(71,85,105,0.4);
}
.wc-price-block { display: inline-flex; flex-direction: column; gap: 2px; }
.wc-price-label { font: 400 10px/1 var(--font-mono); color: var(--fog); letter-spacing: 0.14em; text-transform: uppercase; }
.wc-price { font: 500 20px/1 var(--font-mono); color: var(--snow); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.wc-cur { color: var(--fog); margin-left: 2px; }

.wc-arr {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(10,18,40,0.6); border: 1px solid var(--slate);
  color: var(--snow);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 220ms var(--ease-out);
}
.wc-arr svg { width: 16px; height: 16px; transition: transform 200ms; }
.welder-card:hover .wc-arr { background: var(--flame); border-color: var(--flame); transform: scale(1.06); }
.welder-card:hover .wc-arr svg { transform: translateX(2px); }

/* === DOTS ============================ */
.h5-dots {
  display: flex; gap: 8px; justify-content: center; margin-top: 24px; align-items: center;
}
.h5-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--slate);
  transition: background 200ms var(--ease-out), width 200ms var(--ease-out), border-radius 200ms;
}
.h5-dot.on {
  background: var(--flame);
  width: 24px; border-radius: 4px;
}

/* entry animation */
.h5-section .welder-card {
  opacity: 0; transform: translateY(20px);
}
.h5-section.in .welder-card {
  animation: wcIn 700ms var(--ease-out) forwards;
}
.h5-section.in .welder-card:nth-child(1) { animation-delay: 80ms; }
.h5-section.in .welder-card:nth-child(2) { animation-delay: 160ms; }
.h5-section.in .welder-card:nth-child(3) { animation-delay: 240ms; }
.h5-section.in .welder-card:nth-child(4) { animation-delay: 320ms; }
.h5-section.in .welder-card:nth-child(5) { animation-delay: 400ms; }
.h5-section.in .welder-card:nth-child(n+6) { animation-delay: 480ms; }
@keyframes wcIn {
  to {
    opacity: 1;
    transform: perspective(1200px) rotateY(var(--tx, 0deg)) rotateX(var(--ty, 0deg)) scale(var(--sc, 1)) translateY(0);
  }
}

/* === MOBILE =================================== */
.h5-section.mobile { padding: 56px 0 64px; }
.h5-section.mobile .h5-inner { padding: 0 0 0 20px; }
.h5-section.mobile .h5-head {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  margin-bottom: 28px; padding-right: 20px;
}
.h5-section.mobile .h5-title { font: 700 44px/1 var(--font-sans); }
.h5-section.mobile .h5-sub { font-size: 14px; }
.h5-section.mobile .h5-progress {
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 12px 20px 12px 0;
  margin-bottom: 16px;
}
.h5-section.mobile .h5-progress-r { display: none; }
.h5-section.mobile .h5-progress-l-name { display: none; }
.h5-section.mobile .h5-carousel-wrap { padding-right: 0; }
.h5-section.mobile .h5-carousel {
  gap: 12px; padding: 8px 20px 12px 0;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.welder-card.mobile { flex: 0 0 260px; height: 360px; transform: none !important; }
.welder-card.mobile .wc-photo { height: 200px; }
.welder-card.mobile .wc-name { font-size: 22px; }
.h5-section.mobile .h5-fade-l { display: none; }
.h5-section.mobile .h5-fade-r { left: auto; right: -1px; }

/* mobile pagination — counter + progress bar instead of dots */
.h5-section.mobile .h5-dots { display: none; }
.h5-mobile-pagi {
  display: none;
  padding: 16px 20px 0 0;
  margin-top: 4px;
  font: 500 12px/1 var(--font-mono); color: var(--fog);
  letter-spacing: 0.04em;
}
.h5-section.mobile .h5-mobile-pagi {
  display: flex; flex-direction: column; gap: 10px;
}
.h5-mp-row {
  display: flex; justify-content: space-between; align-items: baseline;
}
.h5-mp-count {
  display: inline-flex; align-items: baseline; gap: 4px;
  font: 500 11px/1 var(--font-mono); color: var(--fog); letter-spacing: 0.1em;
}
.h5-mp-num { font: 500 28px/1 var(--font-mono); color: var(--snow); letter-spacing: -0.02em; }
.h5-mp-sep { color: var(--slate); }
.h5-mp-total { font: 500 16px/1 var(--font-mono); color: var(--fog); }
.h5-mp-active-name {
  font: 500 11px/1 var(--font-mono); color: var(--flame);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.h5-mp-bar {
  height: 2px; background: rgba(71,85,105,0.4); border-radius: 1px; overflow: hidden;
  position: relative;
}
.h5-mp-fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  background: var(--flame); border-radius: 1px;
  transition: width 240ms var(--ease-out), transform 240ms var(--ease-out);
}

/* tablet fix */
@media (max-width: 1100px) {
  .h5-head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
  .h5-head-r { align-items: flex-start; flex-direction: row; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .h5-section .welder-card { opacity: 1; transform: none; animation: none !important; }
}

/* === h06.css === */
/* === H-06 PROCESS — стили ========================================== */

.proc-section {
  position: relative;
  background: var(--midnight);
}

/* === section head ============================================= */
.proc-section-head {
  padding: 120px 0 48px;
  border-bottom: 1px solid rgba(71,85,105,0.3);
}
.proc-inner { max-width: 1440px; margin: 0 auto; padding: 0 48px; width: 100%; }
.proc-section-head-row { display: grid; grid-template-columns: 1fr auto; gap: 64px; align-items: end; }
.proc-section-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--flame);
  margin-bottom: 18px;
}
.proc-e-slash { font-weight: 700; }
.proc-section-title {
  font: 700 80px/0.98 var(--font-sans);
  letter-spacing: -0.04em; color: var(--snow); margin: 0;
  text-wrap: balance; max-width: 880px;
}
.proc-section-roadmap {
  display: flex; gap: 4px; padding: 14px 16px;
  border: 1px solid rgba(71,85,105,0.4); border-radius: 999px;
  background: rgba(31,41,55,0.4); backdrop-filter: blur(8px);
}
.proc-roadmap-item {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font: 500 10px/1 var(--font-mono);
  color: var(--fog); letter-spacing: 0.12em; text-transform: uppercase;
}
.proc-roadmap-code { color: var(--flame); font-weight: 500; }
.proc-roadmap-name {}

/* === each step ============================================ */
.proc-step {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center;
  padding: 80px 0;
  background: var(--midnight);
}
.proc-step .proc-inner {
  display: grid; grid-template-columns: 0.92fr 1.08fr;
  gap: 80px; align-items: center;
}

/* text column */
.proc-text {
  display: flex; flex-direction: column; gap: 20px;
  max-width: 540px;
  opacity: 0; transform: translateX(-16px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.proc-step.in .proc-text { opacity: 1; transform: translateX(0); }

.proc-eyebrow {
  display: inline-flex; align-items: baseline; gap: 10px;
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--flame);
}
.proc-e-code { color: var(--flame); font-weight: 500; }
.proc-e-sep { color: var(--slate); }
.proc-e-name { color: var(--snow); }
.proc-title {
  font: 700 64px/1.0 var(--font-sans);
  letter-spacing: -0.04em; color: var(--snow); margin: 4px 0 0;
  text-wrap: balance;
}
.proc-body {
  font: 400 19px/1.55 var(--font-sans); color: var(--fg-muted);
  margin: 4px 0 0; text-wrap: pretty;
}
.proc-meta {
  display: flex; align-items: stretch; gap: 0;
  margin-top: 16px; padding: 18px 0;
  border-top: 1px solid rgba(71,85,105,0.4);
  border-bottom: 1px solid rgba(71,85,105,0.4);
}
.proc-meta-item { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 0 16px; }
.proc-meta-item:first-child { padding-left: 0; }
.proc-meta-item:last-child  { padding-right: 0; }
.proc-meta-div { width: 1px; background: rgba(71,85,105,0.4); }
.proc-meta-l { font: 400 10px/1 var(--font-mono); color: var(--fog); letter-spacing: 0.14em; text-transform: uppercase; }
.proc-meta-v { font: 500 18px/1 var(--font-mono); color: var(--snow); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.proc-more {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 14px/1 var(--font-sans); color: var(--snow);
  margin-top: 12px; cursor: pointer; align-self: flex-start;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(248,250,252,0.3);
  transition: color 200ms, border-color 200ms;
}
.proc-more svg { width: 14px; height: 14px; transition: transform 200ms var(--ease-out); }
.proc-more:hover { color: var(--flame); border-color: var(--flame); }
.proc-more:hover svg { transform: translateX(4px); }

/* video column */
.proc-video {
  opacity: 0; transform: translateX(16px);
  transition: opacity 700ms var(--ease-out) 100ms, transform 700ms var(--ease-out) 100ms;
}
.proc-step.in .proc-video { opacity: 1; transform: translateX(0); }
.proc-frame {
  width: 100%;
  border: 1px solid rgba(71,85,105,0.5); border-radius: 12px;
  background: rgba(31,41,55,0.4);
  backdrop-filter: blur(20px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.proc-frame-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(71,85,105,0.4);
  font: 500 10px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase;
}
.proc-fh-l { display: inline-flex; align-items: center; gap: 8px; color: var(--snow); }
.proc-fh-r { color: var(--electric); }
.proc-live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 8px rgba(16,185,129,0.7);
  animation: pulse 1.6s ease-in-out infinite;
}
.proc-frame-body {
  position: relative; aspect-ratio: 16/9;
  background: radial-gradient(ellipse 80% 80% at 50% 50%, #0d1424 0%, #050810 100%);
  overflow: hidden;
}
.proc-illust { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.proc-frame-overlay {
  position: absolute; top: 12px; left: 12px; z-index: 5;
}
.proc-placeholder {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 12px; border: 1px dashed rgba(255,107,53,0.5);
  border-radius: 4px; background: rgba(5,8,16,0.5); backdrop-filter: blur(6px);
  max-width: 300px;
}
.proc-ph-eyebrow { font: 500 9px/1.2 var(--font-mono); color: var(--flame); letter-spacing: 0.14em; }
.proc-ph-title { font: 500 11px/1.4 var(--font-mono); color: var(--snow); letter-spacing: 0.02em; }
.proc-ph-meta { font: 400 9px/1.4 var(--font-mono); color: var(--fog); letter-spacing: 0.08em; }

/* === HUD ============================================ */
.proc-hud {
  padding: 14px 18px;
  border-top: 1px solid rgba(71,85,105,0.4);
  display: flex; flex-direction: column; gap: 10px;
}
.ph-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ph-eyebrow { font: 500 10px/1 var(--font-mono); color: var(--fog); letter-spacing: 0.14em; text-transform: uppercase; }
.ph-pct { font: 500 14px/1 var(--font-mono); color: var(--snow); letter-spacing: 0.04em; }
.ph-pct.ok { color: var(--ok); }
.ph-bar { height: 4px; background: rgba(71,85,105,0.4); border-radius: 2px; overflow: hidden; }
.ph-bar-fill { height: 100%; background: linear-gradient(90deg, var(--ok), var(--flame)); border-radius: 2px; transition: width 120ms linear; }
.ph-meta {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  font: 400 10px/1.2 var(--font-mono); color: var(--fog);
  letter-spacing: 0.08em;
}
.ph-meta .ok { color: var(--ok); }

/* clamp hud */
.ph-clamps { width: 100%; height: 40px; }
.ph-clamp-pulse-0,
.ph-clamp-pulse-1,
.ph-clamp-pulse-2,
.ph-clamp-pulse-3 { animation: pulse 1.6s ease-in-out infinite; }
.ph-clamp-pulse-1 { animation-delay: 200ms; }
.ph-clamp-pulse-2 { animation-delay: 400ms; }
.ph-clamp-pulse-3 { animation-delay: 600ms; }

/* temp hud */
.ph-temp {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-variant-numeric: tabular-nums;
}
.ph-temp-v { font: 500 32px/1 var(--font-mono); color: var(--snow); letter-spacing: -0.02em; }
.ph-temp-u { font: 500 18px/1 var(--font-mono); color: var(--fog); }
.ph-temp-target { margin-left: auto; font: 400 10px/1 var(--font-mono); color: var(--fog); letter-spacing: 0.1em; }
.ph-thermo {
  position: relative;
  height: 4px; background: rgba(71,85,105,0.4); border-radius: 2px;
  margin-top: 4px; margin-bottom: 12px;
}
.ph-thermo-track { display: none; }
.ph-thermo-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--electric), var(--flame));
  border-radius: 2px;
  width: 100%;
  animation: thermofill 1.2s var(--ease-out) forwards;
}
@keyframes thermofill { from { width: 0%; } to { width: 100%; } }
.ph-thermo-mark {
  position: absolute; top: 8px; transform: translateX(-50%);
  font: 400 9px/1 var(--font-mono); color: var(--fog); letter-spacing: 0.04em;
}
.ph-thermo-mark.on { color: var(--flame); }

/* pressure hud */
.ph-gauge { display: flex; justify-content: center; }
.ph-gauge svg { width: 220px; max-width: 100%; height: auto; }

/* cooling hud */
.ph-clock {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-variant-numeric: tabular-nums;
}
.ph-clock-v { font: 500 32px/1 var(--font-mono); color: var(--snow); letter-spacing: -0.02em; }
.ph-clock-u { font: 500 13px/1 var(--font-mono); color: var(--fog); letter-spacing: 0.08em; }

/* === illustrations animations ============================ */
.proc-planer { animation: planerSpin 4s linear infinite; transform-origin: 360px 200px; }
@keyframes planerSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.proc-chips path { animation: chip 1.6s ease-out infinite; }
.proc-chips path:nth-child(2) { animation-delay: 200ms; }
.proc-chips path:nth-child(3) { animation-delay: 400ms; }
@keyframes chip { 0% { opacity: 0; transform: translateX(-10px); } 50% { opacity: 0.7; } 100% { opacity: 0; transform: translateX(20px); } }
.proc-bead { animation: beadPulse 1.4s ease-in-out infinite alternate; }
@keyframes beadPulse { from { opacity: 0.75; } to { opacity: 1; } }
.proc-mirror-glow { animation: weldPulse 1.4s ease-in-out infinite alternate; transform-origin: 280px 200px; }
@keyframes weldPulse { from { opacity: 0.7; transform: scale(0.92); } to { opacity: 1; transform: scale(1.05); } }
.proc-heat path { animation: heat 1.8s ease-in-out infinite; }
.proc-heat path:nth-child(2) { animation-delay: 300ms; }
.proc-heat path:nth-child(3) { animation-delay: 600ms; }
.proc-heat path:nth-child(4) { animation-delay: 900ms; }
@keyframes heat { 0%, 100% { opacity: 0.2; transform: translateY(0); } 50% { opacity: 0.7; transform: translateY(-6px); } }
.proc-fusion-glow { animation: weldPulse 1.4s ease-in-out infinite alternate; transform-origin: 280px 200px; }
.proc-pressure-arrows { animation: pressArrows 1.6s ease-in-out infinite alternate; }
@keyframes pressArrows { from { transform: translateX(-4px); } to { transform: translateX(4px); } }

/* === CONNECTOR between steps ====================== */
.proc-conn {
  height: 96px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: #060B1B;
  overflow: hidden;
}
.proc-conn-line, .proc-conn-line.bottom {
  position: absolute; left: 50%; width: 1px;
  background: linear-gradient(180deg, transparent, var(--flame), transparent);
}
.proc-conn-line { top: 0; height: 36px; }
.proc-conn-line.bottom { bottom: 0; height: 36px; }
.proc-conn-inner {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 10px 22px;
  border: 1px solid rgba(255,107,53,0.4);
  border-radius: 999px;
  background: rgba(255,107,53,0.05);
  backdrop-filter: blur(8px);
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--snow);
  position: relative;
  cursor: pointer;
  transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.proc-conn-inner:hover {
  background: rgba(255,107,53,0.12);
  border-color: var(--flame);
  transform: translateY(-1px);
}
.proc-conn-inner:active { transform: translateY(0); }
.proc-conn-inner:focus-visible { outline: 2px solid var(--flame); outline-offset: 4px; }
.proc-conn-from { color: var(--fog); }
.proc-conn-to { color: var(--flame); }
.proc-conn-arrow { width: 24px; height: 12px; color: var(--flame); }
.proc-conn-pulse {
  position: absolute; left: -3px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--flame);
  box-shadow: 0 0 10px var(--flame);
  animation: connPulse 2.4s ease-in-out infinite;
}
@keyframes connPulse {
  0% { left: -3px; opacity: 0; }
  20% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: calc(100% - 3px); opacity: 0; }
}

/* === MOBILE ======================================== */
.proc-section.mobile .proc-section-head { padding: 56px 0 28px; }
.proc-section.mobile .proc-inner { padding: 0 20px; }
.proc-section.mobile .proc-section-title { font: 700 36px/1 var(--font-sans); }

.proc-step.mobile { min-height: 0; padding: 40px 0; }
.proc-step.mobile .proc-inner { grid-template-columns: 1fr; gap: 24px; }
.proc-step.mobile .proc-title { font: 700 32px/1.05 var(--font-sans); }
.proc-step.mobile .proc-body { font-size: 15px; }
.proc-step.mobile .proc-meta { flex-wrap: wrap; gap: 16px; padding: 14px 0; }
.proc-step.mobile .proc-meta-item { flex: 1 1 calc(50% - 8px); padding: 0; }
.proc-step.mobile .proc-meta-div { display: none; }
.proc-step.mobile .proc-frame { order: -1; }
.proc-step.mobile .proc-text  { order: 0; max-width: none; }
.proc-step.mobile .proc-meta-v { font-size: 16px; }
.proc-step.mobile .proc-frame-head { font-size: 9px; padding: 10px 12px; }
.proc-step.mobile .proc-hud { padding: 12px 14px; gap: 8px; }
.proc-step.mobile .ph-temp-v, .proc-step.mobile .ph-clock-v { font-size: 24px; }

.proc-section.mobile .proc-conn { height: 56px; }

@media (prefers-reduced-motion: reduce) {
  .proc-section * { animation: none !important; }
}

/* === h07.css === */
/* === H-07 ГЕОГРАФИЯ — стили ======================================== */

.geo-section {
  background: var(--midnight);
  padding: 120px 0;
  position: relative;
}
.geo-inner { max-width: 1440px; margin: 0 auto; padding: 0 48px; }

/* === HEAD ============================ */
.geo-head {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px;
  align-items: end; margin-bottom: 48px;
}
.geo-head-l { max-width: 540px; display: flex; flex-direction: column; gap: 18px; }

.geo-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--flame);
}
.geo-e-slash { font-weight: 700; }

.geo-title {
  font: 700 88px/0.95 var(--font-sans);
  letter-spacing: -0.04em; color: var(--snow); margin: 0;
}
.geo-sub {
  font: 400 17px/1.55 var(--font-sans); color: var(--fg-muted);
  margin: 0; max-width: 540px; text-wrap: pretty;
}

/* — stats — */
.geo-head-r {
  display: flex; align-items: stretch; gap: 0;
  padding: 0; align-self: end;
  border-top: 1px solid rgba(71,85,105,0.4);
  border-bottom: 1px solid rgba(71,85,105,0.4);
  padding: 20px 0;
}
.geo-stat {
  flex: 1; display: flex; flex-direction: column; gap: 6px;
  padding: 0 24px;
}
.geo-stat:first-child { padding-left: 0; }
.geo-stat:last-child  { padding-right: 0; }
.geo-stat-div { width: 1px; background: rgba(71,85,105,0.4); align-self: stretch; }

.geo-stat-num {
  font: 700 56px/1 var(--font-sans);
  letter-spacing: -0.03em; color: var(--snow);
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: baseline;
}
.geo-stat-l {
  display: flex; flex-direction: column; gap: 2px;
  font: 500 13px/1.2 var(--font-mono); color: var(--snow);
  letter-spacing: 0.04em;
}
.geo-stat-l-sub {
  font: 400 11px/1.2 var(--font-mono); color: var(--fog);
  letter-spacing: 0.12em; text-transform: uppercase;
}

/* === MAP FRAME ============================ */
.geo-map-frame {
  position: relative;
  border: 1px solid rgba(71,85,105,0.4);
  border-radius: 14px;
  background: linear-gradient(180deg, #060B1B 0%, #0A1228 100%);
  overflow: hidden;
  isolation: isolate;
}

.geo-map-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(71,85,105,0.4);
  font: 500 10px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase;
}
.geo-mh-l { display: inline-flex; align-items: center; gap: 8px; color: var(--snow); }
.geo-mh-r { color: var(--electric); }
.geo-live {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 8px rgba(16,185,129,0.7);
  animation: pulse 1.6s ease-in-out infinite;
}

.geo-map {
  position: relative;
  aspect-ratio: 1600 / 560; /* карта расширена на восток до Иркутска/Владивостока */
  background:
    radial-gradient(ellipse 50% 60% at 50% 50%, #0A1228 0%, #060B1B 80%);
  overflow: hidden;       /* clip pin glows that overflow corners */
  border-radius: 0 0 14px 14px;
}
.geo-map-scroll { position: absolute; inset: 0; }
.geo-map-svg { width: 100%; height: 100%; display: block; }
.geo-swipe-hint { display: none; }

/* country */
.geo-country {
  filter: drop-shadow(0 4px 20px rgba(255,107,53,0.08));
}
.geo-map.in .geo-country {
  animation: countryDraw 1400ms var(--ease-out) backwards;
}
@keyframes countryDraw {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* pins — staggered fade in (opacity only — no CSS transform on SVG to avoid gradient bbox bugs) */
.geo-pin {
  opacity: 0;
  cursor: pointer;
}
.geo-map.in .geo-pin {
  animation: pinIn 600ms var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}
@keyframes pinIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.geo-pin.hover > circle:first-child { opacity: 0.4; }

/* routes — дуги от завода к городам, реально видимые (не 0.18 opacity) */
.geo-lines { opacity: 0; transition: opacity 900ms var(--ease-out) 250ms; }
.geo-map.in .geo-lines { opacity: 1; }
.geo-route-line {
  fill: none; stroke: #FF6B35; stroke-width: 1.1;
  stroke-dasharray: 1; stroke-dashoffset: 1;   /* pathLength=1 → «прочерчиваем» нить от завода к региону */
  transition: opacity .25s var(--ease-out);
}
.geo-map.in .geo-route-line { animation: routeDraw 1100ms var(--ease-out) forwards; }
@keyframes routeDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .geo-route-line { stroke-dashoffset: 0; animation: none; }
}
.geo-route-glow {
  fill: none; stroke: #FF6B35; stroke-width: 3.5;
  filter: url(#route-blur);
  transition: opacity .25s var(--ease-out);
}

/* фон-паутинка — сеть узлов по всей территории (не только 12 городов) */
.geo-mesh {
  stroke: rgba(100, 149, 237, 0.22); stroke-width: 0.6;
  opacity: 0; transition: opacity 1200ms var(--ease-out) 200ms;
}
.geo-map.in .geo-mesh { opacity: 1; }
.geo-mesh circle { fill: rgba(148, 163, 184, 0.4); stroke: none; }

/* labels */
.geo-label-g { transition: opacity 200ms var(--ease-out); pointer-events: none; }

/* — POPOVER — */
.city-pop-wrap {
  position: absolute;
  pointer-events: none;
  transform: translate(20px, -50%);
  z-index: 10;
}
.city-pop {
  width: 260px;
  background: rgba(10,18,40,0.92);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,107,53,0.5);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,107,53,0.12);
  animation: popIn 240ms var(--ease-out) backwards;
}
@keyframes popIn { from { opacity: 0; transform: translate(10px, -50%); } to { opacity: 1; transform: translate(20px, -50%); } }
.cp-photo {
  position: relative;
  aspect-ratio: 3 / 2;
  border-bottom: 1px solid rgba(71,85,105,0.4);
  overflow: hidden;
}
.cp-photo-bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(255,107,53,0.18) 0%, transparent 60%),
    radial-gradient(circle at 30% 70%, rgba(16,185,129,0.18) 0%, transparent 70%),
    repeating-linear-gradient(45deg, #1F2937 0 4px, #1A2138 4px 8px);
}
.cp-photo-bg-kzn  { background: linear-gradient(135deg, #FF6B35 0%, #1F2937 70%); }
.cp-photo-bg-msk  { background: linear-gradient(135deg, #475569 0%, #1F2937 70%); }
.cp-photo-bg-spb  { background: linear-gradient(135deg, #3B82F6 0%, #1F2937 70%); }
.cp-photo-label {
  position: absolute; bottom: 8px; left: 8px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  background: rgba(5,8,16,0.8); border: 1px dashed rgba(255,107,53,0.5);
  border-radius: 3px;
  font: 500 9px/1 var(--font-mono); color: var(--flame);
  letter-spacing: 0.12em;
}
.cp-pl-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--flame); }

.cp-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.cp-meta {
  display: flex; justify-content: space-between; align-items: center;
  font: 500 9px/1 var(--font-mono); color: var(--fog);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.cp-hub { color: var(--flame); }
.cp-wh { color: #FFE7B0; }
.cp-name { font: 700 22px/1 var(--font-sans); color: var(--snow); letter-spacing: -0.02em; }
.cp-stats {
  display: inline-flex; gap: 8px; flex-wrap: wrap;
  font: 500 11px/1.3 var(--font-mono); color: var(--fg-muted);
  letter-spacing: 0.04em;
}
.cp-stats strong { color: var(--flame); font-weight: 500; }
.cp-sep { color: var(--slate); }
/* строка «Отгрузка · <склад>» — отделена от статистики, но той же гарнитурой */
.cp-depot { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(71,85,105,0.35); }

/* — LEGEND, SCALE, COMPASS —
   вверху-слева (не внизу): понизу карты проходит самый южный город
   (Краснодар) — легенда там же перекрывала его подпись */
.geo-legend {
  position: absolute; top: 16px; left: 16px; z-index: 4;
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px; border: 1px solid rgba(71,85,105,0.4);
  border-radius: 6px; background: rgba(5,8,16,0.72); backdrop-filter: blur(10px);
  font: 500 10px/1 var(--font-mono); color: var(--snow);
  letter-spacing: 0.12em;
}
.geo-legend-row { display: inline-flex; align-items: center; gap: 10px; }
.geo-legend-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--flame); box-shadow: 0 0 6px var(--flame); }
.geo-legend-dot.hub { background: #FFE7B0; box-shadow: 0 0 8px #FFB070; }
/* склад: оранжевое ядро в светлом кольце — повторяет пин на карте */
.geo-legend-dot.wh { background: var(--flame); box-shadow: 0 0 0 1.5px #FFE7B0, 0 0 6px var(--flame); }
.geo-legend-line { width: 16px; height: 1px; border-top: 1px dashed var(--flame); }
.geo-legend-mesh {
  width: 16px; height: 8px; flex: none;
  background-image: radial-gradient(circle, rgba(100,149,237,0.7) 1px, transparent 1.6px);
  background-size: 5px 5px;
}

.geo-scale,
.geo-compass { display: none; }

/* network spec replaces scale-bar */
.geo-netspec {
  /* вверху, не внизу: у южного края карты естественно оказываются самые
     дальние города (Краснодар, Владивосток) — панель внизу их перекрывала */
  position: absolute; top: 16px; right: 16px; z-index: 4;
  padding: 12px 14px; border: 1px solid rgba(71,85,105,0.4);
  border-radius: 6px; background: rgba(5,8,16,0.6); backdrop-filter: blur(10px);
  display: flex; flex-direction: column; gap: 6px;
  min-width: 200px;
}
.geo-netspec-row {
  display: flex; justify-content: space-between; gap: 16px;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.12em;
}
.geo-ns-l { color: var(--fog); }
.geo-ns-v { color: var(--snow); }
.geo-ns-v.ok { color: var(--ok); }

/* мобильная карта очень низкая (aspect-ratio 1200/560 на узком экране) —
   без этого легенда (4 строки) и netspec-панель накладываются друг на друга.
   Правило должно идти ПОСЛЕ базовых .geo-legend/.geo-netspec (источник:
   при равной специфичности CSS-каскад отдаёт приоритет более позднему
   правилу независимо от того, что оно внутри @media). */
/* мобильная карта: Россия широкая — вместо крошечной полосы во всю ширину
   даём КРУПНУЮ высокую карту с горизонтальным свайпом. Сразу виден плотный
   HQ-кластер (Москва · Казань · СПб · Урал · Новосибирск); восток —
   свайпом вправо. Так «по всей России» читается честно и карта не мелкая. */
@media (max-width: 640px) {
  .geo-netspec { display: none; }
  .geo-legend {
    top: 10px; left: 10px; font-size: 8px; padding: 7px 9px; gap: 4px;
    letter-spacing: 0.06em; max-width: 74%;
  }
  .geo-map { aspect-ratio: auto; height: 62vh; max-height: 460px; min-height: 300px; }
  .geo-map-scroll {
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    scrollbar-width: none;
  }
  .geo-map-scroll::-webkit-scrollbar { display: none; }
  .geo-map-scroll .geo-map-svg {
    height: 100%; width: auto; max-width: none; transform: none;
  }
  /* на таче popover не нужен — города и так подписаны */
  .city-pop-wrap { display: none; }
  /* правый край: пилюля-подсказка «свайпни на восток», гаснет после свайпа */
  .geo-swipe-hint {
    display: inline-flex; align-items: center; gap: 6px;
    position: absolute; right: 10px; bottom: 12px; z-index: 6;
    padding: 7px 12px; border-radius: 100px;
    background: rgba(255,107,53,0.94); color: #0A1228;
    font: 700 10px/1 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase;
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
    animation: swipeNudge 1.8s ease-in-out infinite;
    pointer-events: none; white-space: nowrap;
  }
  .geo-swipe-ico { font-size: 14px; line-height: 1; }
  .geo-map-scroll.swiped ~ .geo-swipe-hint {
    opacity: 0; visibility: hidden; animation: none;
    transition: opacity .35s var(--ease-out), visibility .35s;
  }
}
@keyframes swipeNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-5px); } }

/* hub label needs a soft dark backdrop so it's readable over the route lines */
.geo-pin.hub text {
  paint-order: stroke;
  stroke: #060B1B; stroke-width: 4px;
}
.geo-label-g text {
  paint-order: stroke;
  stroke: rgba(6,11,27,0.7); stroke-width: 3px;
}

/* always-on city labels */
.geo-city-label {
  paint-order: stroke;
  stroke: rgba(6,11,27,0.85);
  stroke-width: 3.5px;
  transition: fill 200ms var(--ease-out);
  pointer-events: none;
}
.geo-city-label.on { fill: #FFE7B0 !important; }

/* popover flip animation — when on right edge */
.city-pop-wrap.flip {
  transform: translate(calc(-100% - 20px), -50%);
}
.city-pop-wrap.flip .city-pop {
  animation: popInFlip 240ms var(--ease-out) backwards;
}
@keyframes popInFlip {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: translateX(0); }
}

.geo-particles circle { mix-blend-mode: screen; }

/* — footer — */
.geo-foot {
  display: flex; justify-content: center; align-items: center;
  margin-top: 24px;
  font: 500 12px/1 var(--font-mono); color: var(--fog);
  letter-spacing: 0.08em;
}
.geo-foot-link {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 13px/1 var(--font-sans); color: var(--snow); cursor: pointer;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(248,250,252,0.3);
  transition: color 200ms, border-color 200ms;
}
.geo-foot-link svg { width: 14px; height: 14px; transition: transform 200ms var(--ease-out); }
.geo-foot-link:hover { color: var(--flame); border-color: var(--flame); }
.geo-foot-link:hover svg { transform: translateX(4px); }

/* === MOBILE ========================================== */
.geo-section.mobile { padding: 56px 0 64px; }
.geo-section.mobile .geo-inner { padding: 0 20px; }
.geo-section.mobile .geo-head {
  display: flex; flex-direction: column; gap: 24px; margin-bottom: 24px;
}
.geo-section.mobile .geo-title { font: 700 44px/1 var(--font-sans); }
.geo-section.mobile .geo-sub { font-size: 14px; }
.geo-section.mobile .geo-head-r {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  padding: 16px 0; gap: 0;
}
.geo-section.mobile .geo-stat { padding: 0 12px; }
.geo-section.mobile .geo-stat-num { font-size: 28px; }
.geo-section.mobile .geo-stat-l { font-size: 10px; }
.geo-section.mobile .geo-stat-l-sub { font-size: 9px; }
.geo-section.mobile .geo-legend { font-size: 8px; padding: 8px 10px; gap: 4px; }
.geo-section.mobile .geo-scale { display: none; }
.geo-section.mobile .geo-compass { top: 50px; right: 10px; width: 32px; height: 32px; }
.geo-section.mobile .geo-map-head { font-size: 9px; padding: 10px 12px; }
.geo-section.mobile .geo-mh-r { display: none; }

@media (prefers-reduced-motion: reduce) {
  .geo-section * { animation: none !important; }
}

/* === h08.css === */
/* === H-08 ОТЗЫВЫ — стили ============================================ */

.tm-section {
  position: relative;
  background: var(--cloud);
  color: var(--ink);
  padding: 0;
  overflow: hidden;
}

.tm-top-rule, .tm-bottom-rule {
  height: 0;
  border-top: 1px solid rgba(15,23,42,0.12);
}

.tm-inner { max-width: 1280px; margin: 0 auto; padding: 120px 48px; }

/* HEAD */
.tm-head {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px;
  align-items: end; margin-bottom: 88px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(15,23,42,0.12);
}
.tm-head-l { max-width: 720px; display: flex; flex-direction: column; gap: 22px; }
.tm-head-r { display: flex; flex-direction: column; gap: 24px; align-items: flex-end; }

.tm-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--flame);
}
.tm-e-slash { font-weight: 700; }

.tm-title {
  font: 400 80px/1.0 Georgia, 'Times New Roman', serif;
  letter-spacing: -0.025em; color: var(--ink); margin: 0;
  text-wrap: balance;
}
.tm-title em { font-style: italic; font-weight: 400; color: var(--ink); }

.tm-head-stat { display: inline-flex; align-items: baseline; gap: 14px; }
.tm-hs-num {
  font: 400 64px/1 Georgia, 'Times New Roman', serif;
  font-style: italic;
  letter-spacing: -0.03em; color: var(--ink);
}
.tm-hs-l {
  font: 500 11px/1.4 var(--font-mono);
  color: var(--fg-muted-light, #6B7280);
  letter-spacing: 0.12em; text-transform: uppercase;
}

.tm-head-link {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 13px/1 var(--font-sans); color: var(--ink); cursor: pointer;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(15,23,42,0.3);
  transition: color 200ms, border-color 200ms;
}
.tm-head-link svg { width: 14px; height: 14px; transition: transform 200ms var(--ease-out); }
.tm-head-link:hover { color: var(--flame); border-color: var(--flame); }
.tm-head-link:hover svg { transform: translateX(4px); }

/* LIST */
.tm-list { display: flex; flex-direction: column; gap: 120px; }

/* CARD */
.tm-card {
  display: grid; grid-template-columns: 280px 1fr;
  gap: 64px; align-items: start;
  opacity: 0; transform: translateY(24px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
}
.tm-card.flip { grid-template-columns: 1fr 280px; }
.tm-section.in .tm-card { opacity: 1; transform: translateY(0); }
.tm-section.in .tm-card:nth-child(1) { transition-delay: 60ms; }
.tm-section.in .tm-card:nth-child(2) { transition-delay: 180ms; }
.tm-section.in .tm-card:nth-child(3) { transition-delay: 300ms; }
.tm-card.flip .tm-content { order: -1; }

/* PORTRAIT */
.tm-portrait { display: flex; flex-direction: column; gap: 12px; }
.tm-photo {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 4px;
  overflow: hidden;
  background: #1F2937;
  will-change: transform;
  transition: transform 80ms linear;
}
.tm-photo-bg {
  position: absolute; inset: 0;
  filter: grayscale(1) contrast(1.05) brightness(0.92);
}
.tm-photo-bg-photo-1 {
  background:
    radial-gradient(ellipse 70% 50% at 40% 30%, #d1d5db 0%, #6b7280 60%, #1f2937 100%),
    repeating-linear-gradient(45deg, rgba(0,0,0,0.04) 0 2px, transparent 2px 4px);
}
.tm-photo-bg-photo-2 {
  background:
    radial-gradient(ellipse 60% 50% at 55% 35%, #c0c4ca 0%, #5b6470 60%, #1a1f28 100%),
    repeating-linear-gradient(135deg, rgba(0,0,0,0.04) 0 2px, transparent 2px 4px);
}
.tm-photo-bg-photo-3 {
  background:
    radial-gradient(ellipse 60% 60% at 50% 30%, #d6dadf 0%, #707a85 65%, #1c2128 100%),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.03) 0 2px, transparent 2px 4px);
}
.tm-photo-label {
  position: absolute; bottom: 10px; left: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border: 1px dashed rgba(255,255,255,0.6);
  border-radius: 3px;
  background: rgba(0,0,0,0.55);
  font: 500 9px/1 var(--font-mono); color: #ffffff;
  letter-spacing: 0.14em;
}
.tm-pl-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--flame); }

.tm-portrait-meta {
  display: inline-flex; align-items: baseline; gap: 6px;
  font: 500 11px/1 var(--font-mono);
  color: var(--fg-muted-light, #6B7280);
  letter-spacing: 0.14em;
  padding: 4px 0;
}
.tm-pm-num   { font-size: 18px; color: var(--ink); letter-spacing: -0.01em; }
.tm-pm-sep   { color: var(--slate); }
.tm-pm-total { color: var(--fg-muted-light, #6B7280); }
.tm-pm-year  { margin-left: 6px; }

/* CONTENT */
.tm-content { display: flex; flex-direction: column; gap: 24px; max-width: 720px; }

.tm-quote {
  position: relative;
  font: italic 400 36px/1.4 Georgia, 'Times New Roman', serif;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}
.tm-quote-mark {
  font-style: normal;
  font-size: 1.2em;
  line-height: 1;
  color: var(--flame);
  margin-right: 6px;
  vertical-align: -0.12em;
  font-weight: 400;
}

.tm-attrib {
  display: flex; flex-direction: column; gap: 2px;
  padding-top: 16px;
  border-top: 1px solid rgba(15,23,42,0.12);
  max-width: 420px;
}
.tm-attrib-name    { font: 500 17px/1.3 var(--font-sans); color: var(--ink); letter-spacing: -0.01em; }
.tm-attrib-role    { font: 400 14px/1.3 var(--font-sans); color: var(--fg-muted-light, #6B7280); }
.tm-attrib-company {
  font: 500 11px/1.3 var(--font-mono);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--flame);
  margin-top: 4px;
}

.tm-project { max-width: 480px; }
.tm-project-row {
  display: grid; grid-template-columns: 80px 1fr; gap: 16px;
  padding: 10px 0;
  border-top: 1px solid rgba(15,23,42,0.12);
  font: 500 11px/1.4 var(--font-mono);
  letter-spacing: 0.12em;
}
.tm-pr-l { color: var(--fg-muted-light, #6B7280); text-transform: uppercase; }
.tm-pr-v { color: var(--ink); }

/* MOBILE */
.tm-section.mobile .tm-inner { padding: 56px 20px 64px; }
.tm-section.mobile .tm-head {
  display: flex; flex-direction: column; gap: 20px;
  align-items: flex-start; padding-bottom: 24px; margin-bottom: 48px;
}
.tm-section.mobile .tm-title { font-size: 40px; letter-spacing: -0.02em; }
.tm-section.mobile .tm-head-r { flex-direction: row; align-items: flex-end; gap: 24px; }
.tm-section.mobile .tm-hs-num { font-size: 40px; }
.tm-section.mobile .tm-hs-l { font-size: 9px; }

.tm-section.mobile .tm-list { gap: 64px; }
.tm-card.mobile { grid-template-columns: 1fr; gap: 24px; }
.tm-card.mobile.flip { grid-template-columns: 1fr; }
.tm-card.mobile.flip .tm-content { order: 0; }
.tm-card.mobile .tm-portrait { max-width: 220px; }
.tm-card.mobile .tm-quote { font-size: 22px; line-height: 1.4; }
.tm-card.mobile .tm-attrib-name { font-size: 15px; }
.tm-card.mobile .tm-attrib-role { font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .tm-card { opacity: 1 !important; transform: none !important; }
}

/* === h09.css === */
/* === H-09 БЛОГ — стили ============================================ */

.bl-section {
  position: relative;
  background: var(--cloud);
  color: var(--ink);
  padding: 0 0 160px;
}
.bl-divider {
  height: 1px; background: rgba(15,23,42,0.12);
  max-width: 1280px; margin: 0 auto;
}
.bl-inner { max-width: 1280px; margin: 0 auto; padding: 96px 48px 0; }

/* HEAD */
.bl-head {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px;
  align-items: end; margin-bottom: 64px;
  padding-bottom: 32px; border-bottom: 1px solid rgba(15,23,42,0.12);
}
.bl-head-l { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.bl-head-r { display: flex; flex-direction: column; gap: 20px; align-items: flex-end; }

.bl-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--flame);
}
.bl-e-slash { font-weight: 700; }

.bl-section-title {
  font: 400 80px/1 Georgia, 'Times New Roman', serif;
  font-style: italic;
  letter-spacing: -0.025em; color: var(--ink); margin: 0;
}
.bl-section-sub {
  font: 400 17px/1.55 var(--font-sans); color: var(--fg-muted-light, #6B7280);
  margin: 4px 0 0; max-width: 540px; text-wrap: pretty;
}

.bl-all-link {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px;
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  font: 500 14px/1 var(--font-sans); cursor: pointer;
  transition: background 220ms var(--ease-out), color 220ms, border-color 220ms;
}
.bl-all-link svg { width: 16px; height: 16px; transition: transform 200ms var(--ease-out); }
.bl-all-link:hover { background: var(--ink); color: var(--snow); border-color: var(--ink); }
.bl-all-link:hover svg { transform: translateX(4px); }

.bl-meta-row {
  display: inline-flex; align-items: stretch; gap: 0;
  padding: 8px 0;
}
.bl-meta-item { display: flex; flex-direction: column; gap: 4px; padding: 0 18px; }
.bl-meta-item:first-child { padding-left: 0; }
.bl-meta-item:last-child  { padding-right: 0; }
.bl-meta-div { width: 1px; background: rgba(15,23,42,0.15); align-self: stretch; }
.bl-meta-l {
  font: 400 10px/1 var(--font-mono); color: var(--fg-muted-light, #6B7280);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.bl-meta-v {
  font: 500 18px/1 var(--font-mono); color: var(--ink);
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}

/* GRID */
.bl-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}

/* CARD */
.bl-card {
  display: flex; flex-direction: column;
  background: #FFFFFF;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0; transform: translateY(20px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out), border-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
  transition-delay: var(--delay, 0ms);
  text-decoration: none;
  color: var(--ink);
}
.bl-section.in .bl-card { opacity: 1; transform: translateY(0); }
.bl-card:hover {
  border-color: rgba(15,23,42,0.18);
  box-shadow: 0 18px 40px rgba(15,23,42,0.08), 0 4px 8px rgba(15,23,42,0.05);
}

/* PHOTO */
.bl-photo {
  position: relative;
  aspect-ratio: 16/9;
  background: #1F2937;
  overflow: hidden;
}
.bl-photo-bg {
  position: absolute; inset: 0;
  transition: transform 400ms var(--ease-out);
}
.bl-card:hover .bl-photo-bg { transform: scale(1.04); }
.bl-photo-bg-industrial {
  background:
    radial-gradient(ellipse 70% 60% at 35% 40%, #475569 0%, #1F2937 70%, #0A1228 100%),
    repeating-linear-gradient(135deg, rgba(255,107,53,0.08) 0 6px, transparent 6px 12px);
}
.bl-photo-bg-pipe {
  background:
    radial-gradient(circle at 50% 50%, #6B7280 0%, #2A3441 60%, #0A1228 100%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 14px, rgba(255,255,255,0.04) 14px 15px);
}
.bl-photo-bg-elbow {
  background:
    linear-gradient(135deg, #1F2937 0%, #2A3441 50%, #0A1228 100%),
    radial-gradient(ellipse 40% 30% at 65% 35%, rgba(255,107,53,0.25) 0%, transparent 60%);
}
.bl-photo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, transparent 60%, rgba(10,18,40,0.55) 100%);
  pointer-events: none;
}
.bl-photo-label {
  position: absolute; top: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px;
  border: 1px dashed rgba(255,255,255,0.6);
  border-radius: 3px;
  background: rgba(0,0,0,0.5);
  font: 500 9px/1 var(--font-mono); color: #FFFFFF;
  letter-spacing: 0.14em;
}
.bl-pl-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--flame); }

.bl-read-badge {
  position: absolute; bottom: 12px; right: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: rgba(10,18,40,0.7); backdrop-filter: blur(6px);
  border: 1px solid rgba(248,250,252,0.2);
  border-radius: 999px;
  font: 500 10px/1 var(--font-mono); color: #FFFFFF;
  letter-spacing: 0.08em;
}
.bl-read-badge svg { width: 12px; height: 12px; }

/* BODY */
.bl-body {
  padding: 20px 22px 22px;
  display: flex; flex-direction: column; gap: 12px;
  flex: 1;
}
.bl-category {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.16em; text-transform: uppercase;
}
.bl-cat-slash, .bl-cat-code { color: var(--flame); }
.bl-cat-name { color: var(--fg-muted-light, #6B7280); }

.bl-title {
  font: 500 22px/1.25 var(--font-sans);
  letter-spacing: -0.015em;
  color: var(--ink); margin: 0;
  text-wrap: balance;
  /* Clamp to 3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bl-excerpt {
  font: 400 14px/1.55 var(--font-sans);
  color: var(--fg-muted-light, #6B7280); margin: 0;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bl-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(15,23,42,0.08);
}
.bl-date {
  font: 500 11px/1 var(--font-mono);
  color: var(--fg-muted-light, #6B7280);
  letter-spacing: 0.06em;
}
.bl-link {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 13px/1 var(--font-sans); color: var(--ink);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 200ms, border-color 200ms;
}
.bl-link svg { width: 14px; height: 14px; transition: transform 200ms var(--ease-out); }
.bl-card:hover .bl-link { color: var(--flame); border-bottom-color: var(--flame); }
.bl-card:hover .bl-link svg { transform: translateX(3px); }

/* MOBILE — горизонтальный swipe-карусель, не вертикальный список */
.bl-section.mobile { padding-bottom: 64px; }
.bl-section.mobile .bl-inner {
  padding: 40px 0 0 20px;
}
.bl-section.mobile .bl-head {
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  margin-bottom: 28px;
  padding-right: 20px;
}
.bl-section.mobile .bl-section-title { font-size: 44px; }
.bl-section.mobile .bl-head-r { align-items: flex-start; width: 100%; }

.bl-section.mobile .bl-grid {
  display: flex; gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 4px 20px 20px 0;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}
.bl-section.mobile .bl-grid::-webkit-scrollbar { display: none; }

.bl-section.mobile .bl-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
}
.bl-section.mobile .bl-title { font-size: 17px; -webkit-line-clamp: 3; }
.bl-section.mobile .bl-excerpt { display: none; }
.bl-section.mobile .bl-body { padding: 16px 18px 18px; gap: 10px; }

/* mobile pagination — counter + progress bar (как в H-05) */
.bl-mobile-pagi {
  display: none;
  padding: 16px 20px 0 0;
  margin-top: 8px;
  font: 500 12px/1 var(--font-mono);
  color: var(--fg-muted-light, #6B7280);
  letter-spacing: 0.04em;
}
.bl-section.mobile .bl-mobile-pagi { display: flex; flex-direction: column; gap: 10px; }
.bl-mp-row { display: flex; justify-content: space-between; align-items: baseline; }
.bl-mp-count { display: inline-flex; align-items: baseline; gap: 4px; font: 500 11px/1 var(--font-mono); color: var(--fg-muted-light, #6B7280); }
.bl-mp-num { font: 500 22px/1 var(--font-mono); color: var(--ink); }
.bl-mp-sep { color: var(--slate); }
.bl-mp-total { font: 500 13px/1 var(--font-mono); }
.bl-mp-hint { font: 500 10px/1 var(--font-mono); color: var(--flame); letter-spacing: 0.16em; text-transform: uppercase; }
.bl-mp-bar { height: 2px; background: rgba(15,23,42,0.12); border-radius: 1px; overflow: hidden; position: relative; }
.bl-mp-fill { position: absolute; top: 0; left: 0; bottom: 0; background: var(--flame); border-radius: 1px; transition: width 240ms var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .bl-card { opacity: 1 !important; transform: none !important; }
}

/* === h10_h11.css === */
/* === H-10 CTA + H-11 FOOTER — стили =============================== */

/* H-10 CTA ───────────────────────────────────────── */
.cta-section {
  position: relative;
  background: var(--midnight);
  padding: 100px 48px;
  overflow: hidden;
  isolation: isolate;
}

.cta-diag {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 18px,
    rgba(255,107,53,0.045) 18px,
    rgba(255,107,53,0.045) 19px
  );
  mask-image: radial-gradient(ellipse 90% 60% at 30% 50%, black 40%, transparent 100%);
}

.cta-corner-l, .cta-corner-r {
  position: absolute; top: 32px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 11px/1 var(--font-mono); color: var(--fog);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.cta-corner-l { left: 48px; }
.cta-corner-r { right: 48px; color: var(--flame); }
.cta-corner-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: pulse 1.6s ease-in-out infinite; }

.cta-inner {
  position: relative; z-index: 1;
  max-width: 1280px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 28px;
  padding: 80px 0 32px;
}

.cta-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 12px/1 var(--font-mono);
  color: var(--flame); letter-spacing: 0.18em; text-transform: uppercase;
  padding: 10px 16px; border: 1px solid rgba(255,107,53,0.4);
  border-radius: 999px; background: rgba(255,107,53,0.06);
  width: fit-content;
}
.cta-e-slash { font-weight: 700; }

.cta-title {
  display: flex; flex-direction: column; gap: 4px;
  font: 700 96px/0.96 var(--font-sans);
  letter-spacing: -0.04em; color: var(--snow); margin: 0;
  text-wrap: balance;
}
.cta-title .flame { color: var(--flame); }

.cta-sub {
  font: 400 19px/1.55 var(--font-sans); color: var(--fg-muted);
  max-width: 720px; margin: 8px 0 0;
  text-wrap: pretty;
}

.cta-actions {
  display: flex; align-items: center; gap: 28px;
  margin-top: 16px; flex-wrap: wrap;
}
.cta-secondary {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 14px/1 var(--font-sans); color: var(--snow); cursor: pointer;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(248,250,252,0.3);
  transition: color 200ms, border-color 200ms;
}
.cta-secondary svg { width: 18px; height: 18px; }
.cta-secondary:hover { color: var(--flame); border-color: var(--flame); }

/* каналы связи под CTA: email · Telegram · Max */
.cta-channels { display: flex; align-items: center; gap: 22px; margin-top: 18px; flex-wrap: wrap; }
.cta-channel { display: inline-flex; align-items: center; gap: 8px;
  font: 500 13px/1 var(--font-mono); letter-spacing: 0.03em; color: var(--fg-muted);
  text-decoration: none; transition: color 200ms; }
.cta-channel svg { width: 16px; height: 16px; }
.cta-channel-icon { width: 16px; height: 16px; border-radius: 5px; display: block; }
.cta-channel:hover { color: var(--flame); }

.cta-row {
  display: flex; align-items: stretch;
  margin-top: 32px; padding: 18px 0;
  border-top: 1px solid rgba(71,85,105,0.4);
  border-bottom: 1px solid rgba(71,85,105,0.4);
}
.cta-row-item { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 0 20px; }
.cta-row-item:first-child { padding-left: 0; }
.cta-row-item:last-child  { padding-right: 0; }
.cta-row-div { width: 1px; background: rgba(71,85,105,0.4); }
.cta-ri-l { font: 400 10px/1 var(--font-mono); color: var(--fog); letter-spacing: 0.14em; text-transform: uppercase; }
.cta-ri-v { font: 500 16px/1.2 var(--font-mono); color: var(--snow); letter-spacing: -0.005em; }

/* MODAL */
.cta-modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(5,8,16,0.7); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  animation: bdIn 240ms var(--ease-out);
}
@keyframes bdIn { from { opacity: 0; } to { opacity: 1; } }
.cta-modal {
  position: relative;
  width: 640px; max-width: 100%; max-height: calc(100vh - 64px); overflow: auto;
  background: var(--midnight);
  border: 1px solid rgba(71,85,105,0.5);
  border-radius: 12px;
  padding: 40px 40px 32px;
  box-shadow: 0 40px 80px rgba(0,0,0,0.6);
  animation: modalIn 320ms var(--ease-out);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.cta-modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--slate); background: transparent; color: var(--snow);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 200ms, border-color 200ms;
}
.cta-modal-close svg { width: 14px; height: 14px; }
.cta-modal-close:hover { background: var(--flame); border-color: var(--flame); }

.cta-modal-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.cta-modal-eyebrow { font: 500 11px/1 var(--font-mono); color: var(--flame); letter-spacing: 0.16em; text-transform: uppercase; }
.cta-modal-title { font: 700 36px/1.05 var(--font-sans); color: var(--snow); margin: 0; letter-spacing: -0.02em; }
.cta-modal-sub { font: 400 15px/1.5 var(--font-sans); color: var(--fg-muted); margin: 0; }

.cta-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cta-field { display: flex; flex-direction: column; gap: 8px; }
.cta-field.full { grid-column: 1 / -1; }
.cta-field-l { font: 500 10px/1 var(--font-mono); color: var(--fog); letter-spacing: 0.14em; text-transform: uppercase; }
.cta-field input,
.cta-field textarea {
  background: rgba(31,41,55,0.4);
  border: 1px solid rgba(71,85,105,0.5);
  border-radius: 6px;
  padding: 12px 14px;
  font: 400 15px/1.4 var(--font-sans);
  color: var(--snow);
  outline: none;
  transition: border-color 180ms, background 180ms;
}
.cta-field input::placeholder,
.cta-field textarea::placeholder { color: rgba(248,250,252,0.3); }
.cta-field input:focus,
.cta-field textarea:focus { border-color: var(--flame); background: rgba(31,41,55,0.6); }

.cta-file-stub {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px;
  border: 1px dashed rgba(71,85,105,0.7); border-radius: 6px;
  font: 500 13px/1 var(--font-mono); color: var(--fog);
  letter-spacing: 0.04em; cursor: pointer;
  transition: border-color 180ms, color 180ms;
}
.cta-file-stub svg { width: 16px; height: 16px; }
.cta-file-stub:hover { border-color: var(--flame); color: var(--snow); }

.cta-form-foot {
  display: flex; align-items: center; gap: 18px;
  margin-top: 24px; padding-top: 18px;
  border-top: 1px solid rgba(71,85,105,0.4);
  flex-wrap: wrap;
}
.cta-form-fineprint {
  font: 400 11px/1.4 var(--font-sans);
  color: var(--fog); flex: 1;
  text-wrap: pretty;
}

/* MOBILE CTA */
.cta-section.mobile { padding: 64px 20px; }
.cta-section.mobile .cta-corner-l,
.cta-section.mobile .cta-corner-r { display: none; }
.cta-section.mobile .cta-inner { padding: 0; gap: 20px; }
.cta-section.mobile .cta-title { font-size: 44px; }
.cta-section.mobile .cta-sub { font-size: 15px; }
.cta-section.mobile .cta-actions { flex-direction: column; align-items: stretch; }
.cta-section.mobile .cta-primary { width: 100%; }
.cta-section.mobile .cta-row { flex-wrap: wrap; gap: 8px 0; }
.cta-section.mobile .cta-row-item { flex: 1 1 calc(50% - 10px); padding: 8px 12px; }
.cta-section.mobile .cta-row-div { display: none; }
.cta-section.mobile .cta-ri-v { font-size: 14px; }
.cta-section.mobile .cta-modal { padding: 28px 20px; max-width: calc(100vw - 24px); }
.cta-section.mobile .cta-form-grid { grid-template-columns: 1fr; }
.cta-section.mobile .cta-modal-title { font-size: 26px; }

/* H-11 FOOTER ──────────────────────────────────────── */
.footer-section {
  background: #060B1B;
  color: var(--snow);
  position: relative;
  border-top: 1px solid rgba(71,85,105,0.4);
}
.footer-inner { max-width: 1440px; margin: 0 auto; padding: 80px 48px 32px; }

.footer-top {
  display: grid; grid-template-columns: 1.2fr 2fr; gap: 80px;
  padding-bottom: 60px; border-bottom: 1px solid rgba(71,85,105,0.4);
}

.footer-brand { display: flex; flex-direction: column; gap: 24px; max-width: 380px; }
.footer-logo {
  position: relative;
  width: 60px; height: 60px;
  cursor: pointer;
  display: inline-block;
}
.footer-logo img { width: 100%; height: 100%; transition: filter 300ms var(--ease-out); position: relative; z-index: 2; }
.footer-logo-flame {
  position: absolute; inset: -16px; z-index: 1;
  background: radial-gradient(circle, rgba(255,107,53,0.4) 0%, transparent 60%);
  filter: blur(12px); opacity: 0;
  transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out);
  transform: scale(0.8);
}
.footer-logo:hover .footer-logo-flame { opacity: 1; transform: scale(1.2); }
.footer-logo:hover img { filter: drop-shadow(0 0 12px rgba(255,107,53,0.6)); }

.footer-brand-desc {
  font: 400 15px/1.55 var(--font-sans); color: var(--fg-muted); margin: 0;
}
.footer-brand-meta { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; border-top: 1px solid rgba(71,85,105,0.4); }
.fbm-row { display: grid; grid-template-columns: 120px 1fr; gap: 16px; font: 400 12px/1.4 var(--font-mono); letter-spacing: 0.04em; }
.fbm-l { color: var(--fog); letter-spacing: 0.12em; text-transform: uppercase; }
.fbm-v { color: var(--snow); }
.fbm-link { color: var(--snow); border-bottom: 1px solid rgba(248,250,252,0.3); transition: color 200ms, border-color 200ms; cursor: pointer; }
.fbm-link:hover { color: var(--flame); border-bottom-color: var(--flame); }

.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.footer-col { display: flex; flex-direction: column; gap: 16px; }
.footer-col-h {
  display: flex; align-items: center; justify-content: space-between;
  font: 500 12px/1 var(--font-mono); color: var(--flame);
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0; cursor: default;
  border: 0; background: transparent;
}
.footer-col-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-col-link {
  font: 400 14px/1.4 var(--font-sans); color: var(--snow);
  cursor: pointer; position: relative; display: inline-block;
  transition: color 200ms;
}
.footer-col-link::after {
  content: ''; position: absolute; left: 0; bottom: -2px;
  width: 0; height: 1px; background: var(--flame);
  transition: width 220ms var(--ease-out);
}
.footer-col-link:hover { color: var(--flame); }
.footer-col-link:hover::after { width: 100%; }

/* big slogan strip */
.footer-slogan {
  display: flex; justify-content: space-between; align-items: end;
  padding: 56px 0 32px;
  border-bottom: 1px solid rgba(71,85,105,0.4);
  gap: 32px;
}
.footer-slogan-text {
  font: 700 96px/0.95 var(--font-sans);
  letter-spacing: -0.04em;
  display: flex; gap: 24px; flex-wrap: wrap;
}
.footer-slogan-text .snow { color: var(--snow); }
.footer-slogan-text .flame { color: var(--flame); }
.footer-slogan-meta {
  font: 500 11px/1.4 var(--font-mono); color: var(--fog);
  letter-spacing: 0.16em; text-align: right; padding-bottom: 14px;
}

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px; gap: 32px;
  font: 400 12px/1.4 var(--font-mono); color: var(--fog);
  letter-spacing: 0.04em; flex-wrap: wrap;
}
.footer-bl { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-bl a { color: var(--fog); cursor: pointer; transition: color 200ms; }
.footer-bl a:hover { color: var(--snow); }
.footer-br { display: flex; gap: 12px; }
.footer-soc {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--slate); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--snow);
  transition: all 220ms var(--ease-out);
}
.footer-soc svg { width: 16px; height: 16px; }
.footer-soc:hover { background: var(--flame); border-color: var(--flame); transform: translateY(-2px); }

/* MOBILE FOOTER */
.footer-section.mobile .footer-inner { padding: 56px 20px 32px; }
.footer-section.mobile .footer-top {
  grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px;
}
.footer-section.mobile .footer-brand-desc { font-size: 14px; }
.footer-section.mobile .footer-cols { grid-template-columns: 1fr; gap: 0; }
.footer-section.mobile .footer-col {
  border-top: 1px solid rgba(71,85,105,0.4);
  padding: 16px 0; gap: 0;
}
.footer-section.mobile .footer-col:last-child { border-bottom: 1px solid rgba(71,85,105,0.4); }
.footer-section.mobile .footer-col-h { cursor: pointer; padding: 4px 0; }
.footer-col-arr { width: 12px; height: 8px; transition: transform 240ms var(--ease-out); }
.footer-section.mobile .footer-col.open .footer-col-arr { transform: rotate(180deg); }
.footer-section.mobile .footer-col-list {
  max-height: 0; overflow: hidden;
  transition: max-height 320ms var(--ease-out), padding 320ms var(--ease-out);
}
.footer-section.mobile .footer-col.open .footer-col-list {
  max-height: 400px;
  padding-top: 16px;
}
.footer-section.mobile .footer-slogan { flex-direction: column; align-items: flex-start; gap: 12px; padding: 32px 0 24px; }
.footer-section.mobile .footer-slogan-text { font-size: 44px; gap: 8px; }
.footer-section.mobile .footer-slogan-meta { text-align: left; padding-bottom: 0; }
.footer-section.mobile .footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }

@media (prefers-reduced-motion: reduce) {
  .cta-modal-backdrop, .cta-modal { animation: none !important; }
}

/* === footer.css === */
/* === H-11 FOOTER — SHOWPIECE (two-level sign-off) ================= */
.ft { position: relative; background: linear-gradient(180deg, #0A1228 0%, #060B1B 100%); color: var(--snow); overflow: hidden; isolation: isolate; }
.ft-seam { position: relative; height: 1px; }
.ft-seam-line { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255,107,53,0.25) 8%, var(--flame) 50%, rgba(255,107,53,0.25) 92%, transparent 100%); }
.ft-seam-hot { position: absolute; top: -1px; left: 0; width: 120px; height: 3px; background: radial-gradient(ellipse at center, #FFE7B0 0%, var(--flame) 40%, transparent 75%); filter: blur(1px); animation: ftSeam 7s var(--ease-smooth) infinite; }
@keyframes ftSeam { 0% { left: -10%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.ft-seam-label { position: absolute; top: 14px; right: 48px; font: 500 9px/1 var(--font-mono); color: var(--fog); letter-spacing: 0.18em; text-transform: uppercase; }
.ft-seam-label span { color: var(--flame); }
.ft-inner { max-width: 1440px; margin: 0 auto; padding: 88px 48px 36px; }
.ft-top { display: grid; grid-template-columns: 1fr 1.15fr; gap: 80px; padding-bottom: 44px; }
.ft-cta { display: flex; flex-direction: column; gap: 24px; }
.ft-eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1 var(--font-mono); color: var(--flame); letter-spacing: 0.18em; text-transform: uppercase; }
.ft-e-slash { font-weight: 700; }
.ft-cta-title { font: 700 60px/0.96 var(--font-sans); letter-spacing: -0.04em; color: var(--snow); margin: 0; }
.ft-cta-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 8px; }
.ft-phone { display: flex; flex-direction: column; gap: 3px; cursor: pointer; }
.ft-phone-l { font: 400 10px/1 var(--font-mono); color: var(--fog); letter-spacing: 0.14em; text-transform: uppercase; }
.ft-phone-v { font: 500 18px/1 var(--font-mono); color: var(--snow); border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color 200ms, border-color 200ms; }
.ft-phone:hover .ft-phone-v { color: var(--flame); border-color: var(--flame); }
.ft-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.ft-col { display: flex; flex-direction: column; gap: 18px; }
.ft-col-h { display: flex; align-items: center; justify-content: space-between; font: 500 12px/1 var(--font-mono); color: var(--flame); letter-spacing: 0.16em; text-transform: uppercase; padding: 0; border: 0; background: transparent; cursor: default; }
.ft-col-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.ft-col-link { display: inline-flex; align-items: center; font: 400 14px/1.3 var(--font-sans); color: var(--fg-muted); cursor: pointer; transition: color 200ms var(--ease-out), gap 200ms var(--ease-out); }
.ft-col-bullet { width: 0; height: 1px; background: var(--flame); transition: width 220ms var(--ease-out), margin 220ms var(--ease-out); }
.ft-col-link:hover { color: var(--snow); gap: 8px; }
.ft-col-link:hover .ft-col-bullet { width: 12px; margin-right: 2px; }

/* contact + live rail */
.ft-rail { display: grid; grid-template-columns: 1fr 1fr 1fr 1.3fr; gap: 24px; padding: 28px 0 44px; border-top: 1px solid rgba(71,85,105,0.3); }
.ft-rail-item { display: flex; flex-direction: column; gap: 10px; }
.ft-rail-l { font: 500 10px/1.3 var(--font-mono); color: var(--fog); letter-spacing: 0.14em; text-transform: uppercase; }
.ft-rail-v { font: 500 15px/1.3 var(--font-mono); color: var(--snow); }
.ft-rail-v.link { cursor: pointer; transition: color 200ms; width: fit-content; }
.ft-rail-v.link:hover { color: var(--flame); }

/* live clock — prominent */
.ft-clock-v { display: inline-flex; align-items: baseline; font: 700 30px/1 var(--font-sans); color: var(--snow); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ft-clock-colon { animation: ftBlink 1s step-end infinite; margin: 0 1px; }
@keyframes ftBlink { 50% { opacity: 0.2; } }
.ft-clock-sec { color: var(--flame); font-size: 18px; margin-left: 2px; animation: ftBlink 1s step-end infinite; }
.ft-clock-tz { font: 400 10px/1 var(--font-mono); color: var(--fog); letter-spacing: 0.12em; margin-left: 10px; align-self: center; }

/* angle indicator */
.ft-angle-wrap { display: inline-flex; align-items: center; gap: 14px; }
.ft-angle-glyph { display: inline-flex; align-items: center; gap: 8px; }
.ft-angle-glyph svg { width: 52px; height: 48px; display: block; }
.ft-angle-read { font: 700 24px/1 var(--font-sans); color: var(--flame); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; min-width: 52px; }
.ft-angle-cap { font: 400 11px/1.3 var(--font-mono); color: var(--fog); letter-spacing: 0.06em; }

/* ═══ TYPOGRAPHIC BORDER ═══ */
.ft-border { display: flex; align-items: center; gap: 14px; padding: 8px 0 0; }
.ft-border-tick { width: 8px; height: 8px; background: var(--flame); flex: none; }
.ft-border-label { font: 500 11px/1 var(--font-mono); color: var(--flame); letter-spacing: 0.24em; text-transform: uppercase; }
.ft-border-line { flex: 1; height: 1px; background: rgba(71,85,105,0.5); }

/* ═══ LEVEL 2 — EPILOGUE ═══ */
.ft-epi { display: flex; flex-direction: column; align-items: center; padding-top: 48px; }
.ft-epi-logo { position: relative; width: 80px; height: 80px; cursor: pointer; display: inline-block; }
.ft-epi-logo img { width: 100%; height: 100%; position: relative; z-index: 2; transition: filter 360ms var(--ease-out), transform 360ms var(--ease-out); }
.ft-epi-logo-flame { position: absolute; inset: -24px; z-index: 1; background: radial-gradient(circle, rgba(255,107,53,0.55) 0%, transparent 60%); filter: blur(16px); opacity: 0; transform: scale(0.7); transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); }
.ft-epi-logo:hover .ft-epi-logo-flame { opacity: 1; transform: scale(1.35); }
.ft-epi-logo:hover img { filter: drop-shadow(0 0 18px rgba(255,107,53,0.75)); transform: translateY(-3px); }

/* whisper slogan */
.ft-epi-whisper { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 28px; font: 500 13px/1 var(--font-mono); color: var(--flame); letter-spacing: 0.5em; text-transform: uppercase; }
.ft-epi-whisper > span { display: inline-block; }
.ft-whisper-dot { margin: 0 14px; color: var(--fog); letter-spacing: 0; }

/* BIG TYPE */
.ft-bigtype { position: relative; display: flex; align-items: baseline; justify-content: center; gap: 0.06em; margin-top: 8px; width: 100%; cursor: default; user-select: none; }
.ft-bigtype-word { font: 700 clamp(120px, 19vw, 264px)/0.9 var(--font-sans); letter-spacing: -0.05em; color: var(--steel); transition: color 600ms var(--ease-out); }
.ft-bigtype-num { font: 700 clamp(120px, 19vw, 264px)/0.9 var(--font-sans); letter-spacing: -0.04em; color: var(--flame); transition: color 600ms var(--ease-out); }
.ft-bigtype:hover .ft-bigtype-word { color: var(--snow); }
.ft-bigtype:focus-visible { outline: none; }
.ft-bigtype:focus-visible .ft-bigtype-word { color: var(--snow); }

/* meta row */
.ft-meta { display: flex; justify-content: space-between; align-items: center; gap: 32px; width: 100%; margin-top: 12px; padding-top: 24px; border-top: 1px solid rgba(71,85,105,0.4); flex-wrap: wrap; }
/* место для плавающей кнопки Max/Telegram (FloatingContacts) в правом нижнем углу —
   иначе на мобиле последняя строка футера (контакты/копирайт) уходит под виджет */
@media (max-width: 768px) { .ft { padding-bottom: 130px; } }
.ft-meta-l { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font: 400 11px/1.6 var(--font-mono); color: var(--fog); letter-spacing: 0.06em; }
.ft-meta-dot { color: var(--slate); }
.ft-meta-r { display: flex; align-items: center; gap: 18px; }
.ft-totop { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1 var(--font-mono); color: var(--snow); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; padding: 0; border: 0; background: transparent; transition: color 200ms; }
.ft-totop svg { width: 14px; height: 14px; transition: transform 220ms var(--ease-out); }
.ft-totop:hover { color: var(--flame); }
.ft-totop:hover svg { transform: translateY(-3px); }
.ft-soc { display: flex; gap: 10px; }
.ft-soc-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--slate); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--snow); transition: all 240ms var(--ease-out); }
.ft-soc-btn svg { width: 15px; height: 15px; }
.ft-soc-btn:hover { background: var(--flame); border-color: var(--flame); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(255,107,53,0.35); }

/* ── MOBILE ── */
.ft-mobile .ft-inner { padding: 56px 20px 28px; }
.ft-mobile .ft-seam-label { right: 20px; font-size: 8px; }
.ft-mobile .ft-top { grid-template-columns: 1fr; gap: 36px; padding-bottom: 28px; }
.ft-mobile .ft-cta-title { font-size: 40px; }
.ft-mobile .ft-cta-actions { flex-direction: column; align-items: stretch; gap: 16px; }
.ft-mobile .ft-cta-actions .btn { width: 100%; }
.ft-mobile .ft-nav { grid-template-columns: 1fr; gap: 0; }
.ft-mobile .ft-col { border-top: 1px solid rgba(71,85,105,0.35); padding: 14px 0; gap: 0; }
.ft-mobile .ft-col:last-child { border-bottom: 1px solid rgba(71,85,105,0.35); }
.ft-mobile .ft-col-h { cursor: pointer; padding: 4px 0; }
.ft-col-arr { width: 12px; height: 8px; transition: transform 240ms var(--ease-out); }
.ft-mobile .ft-col.open .ft-col-arr { transform: rotate(180deg); }
.ft-mobile .ft-col-list { max-height: 0; overflow: hidden; transition: max-height 320ms var(--ease-out), padding 320ms var(--ease-out); }
.ft-mobile .ft-col.open .ft-col-list { max-height: 360px; padding-top: 16px; }
.ft-mobile .ft-rail { grid-template-columns: 1fr 1fr; gap: 22px 16px; padding: 24px 0 32px; }
.ft-mobile .ft-rail-angle { grid-column: 1 / -1; }
.ft-mobile .ft-clock-v { font-size: 26px; }
.ft-mobile .ft-epi { padding-top: 36px; }
.ft-mobile .ft-epi-whisper { font-size: 10px; letter-spacing: 0.34em; }
.ft-mobile .ft-whisper-dot { margin: 0 8px; }
.ft-mobile .ft-bigtype { flex-direction: column; align-items: center; gap: 0; }
.ft-mobile .ft-bigtype-word, .ft-mobile .ft-bigtype-num { font-size: clamp(88px, 30vw, 132px); line-height: 0.92; }
.ft-mobile .ft-meta { flex-direction: column; align-items: flex-start; gap: 18px; }

@media (prefers-reduced-motion: reduce) {
  .ft-seam-hot, .ft-clock-colon, .ft-clock-sec { animation: none !important; }
}

/* === Soon tile overrides === */
/* full opacity so the real category photo reads; the «скоро» badge signals status */
.tile--soon { opacity: 1; pointer-events: none; cursor: default; position: relative; }
.tile--soon .bt-name, .tile--soon .bt-kicker { opacity: 0.9; }
.soon-badge {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  background: rgba(10,18,40,0.72); backdrop-filter: blur(6px);
  color: #f8fafc;
  font: 500 11px/1 'JetBrains Mono', monospace;
  padding: 5px 9px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ====================================================================
   RESPONSIVE MEDIA QUERIES — replaces all .xxx.mobile class patterns
   (tweaks-panel was removed; these now activate via viewport width)
   Primary breakpoint: ≤768px
   ==================================================================== */
@media (max-width: 768px) {

  /* ── HERO (h01) ── */
  .hero-stage, .hero-stage.desktop {
    min-height: 100svh; min-height: 100vh;
    overflow: hidden;
  }
  /* .hero-stage.desktop .hero-content (стр. 393) имеет специфичность (0,3,0)
     и раньше перебивал мобильный отступ — на телефоне висел десктопный
     padding 220/240px, из-за чего контент проваливался вниз, а сверху
     зияла мёртвая тёмная зона. Бьём тем же селектором. */
  .hero-content, .hero-content.desktop,
  .hero-stage.desktop .hero-content {
    padding: 104px 20px 40px;
    max-width: 100%;
  }
  .hero-slogan { font-size: clamp(44px, 13vw, 68px); letter-spacing: -0.04em; }
  .hero-lede { font-size: 15px; max-width: none; margin-top: 24px; }
  .hero-cta { flex-direction: column; width: 100%; margin-top: 28px; gap: 12px; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .hero-trust { flex-wrap: wrap; gap: 16px; margin-top: 36px; }
  /* Hide wide HUD panels on mobile; keep ONLY the compact temp chip (legitimizes the glow) */
  /* .hero-br (temp-HUD) тоже прячем: теперь герой = ровно один экран, и HUD
     в правом нижнем углу налезал на блок доверия «СП · 42-103-2003».
     Реальные цифры доверия важнее декоративного температурного чипа. */
  .hero-tr, .hero-bl, .hero-br, .hero-grid-lines, .vp-tag, .vp-rec { display: none !important; }
  .th-value { font-size: 22px; }
  .th-unit { font-size: 13px; }
  .th-eyebrow { font-size: 9px; }
  .th-meta { display: none; }
  /* reframe the 16:9 video for a portrait hero so the molten weld stays in view */
  .vp-video { object-position: 66% center; }
  /* stronger scrim so the slogan + lede stay readable over the bright weld glow */
  .vp-overlay { background: linear-gradient(180deg, rgba(10,18,40,0.5) 0%, rgba(10,18,40,0.42) 32%, rgba(10,18,40,0.82) 66%, rgba(10,18,40,0.95) 100%) !important; }
  .vp-vignette { box-shadow: inset 0 -120px 90px -40px rgba(10,18,40,0.9) !important; }

  /* ── STATS TICKER (h02) — 2×2 grid, hide corner labels ── */
  .stats-ticker { height: auto; padding: 20px 20px 24px; }
  .st-corner-l, .st-corner-r { display: none; }
  .st-inner { padding: 0; }
  .st-grid { display: grid !important; grid-template-columns: 1fr 1fr; flex: none; padding: 0; gap: 20px 16px; }
  .st-div { display: none; }
  .st-item { padding-left: 12px; border-left: 1px solid rgba(71,85,105,0.6); gap: 4px; }
  .st-num { font-size: 40px; letter-spacing: -0.03em; }
  .st-lab { font-size: 10px; letter-spacing: 0.12em; display: block; line-height: 1.3; }

  /* ── BENTO CATALOG (h03) — single column, full width ── */
  .bento-section { padding: 56px 20px 64px; }
  .bs-head { grid-template-columns: 1fr !important; gap: 14px; margin-bottom: 32px; max-width: none; }
  .bs-head-r { display: none; }
  .bs-title { font: 700 clamp(44px, 13vw, 64px)/0.95 var(--font-sans) !important; letter-spacing: -0.04em; }
  .bs-t-suf { font-size: inherit; }
  .bs-sub { font-size: 15px; max-width: none; }
  .bento-grid { display: flex !important; flex-direction: column; gap: 10px; max-width: none; padding: 0; }
  .bento-tile { grid-area: auto !important; height: 220px; animation: none !important; opacity: 1 !important; transform: none !important; }
  .bento-tile.l { height: 280px; grid-column: auto !important; }
  .bento-tile .bt-name { font: 700 26px/1.05 var(--font-sans); }
  .bento-tile.l .bt-name { font: 700 32px/1 var(--font-sans); }
  .bento-tile .bt-meta { display: none; }
  .bento-tile .bt-photo-tag { font-size: 8px; padding: 5px 8px; }
  .bento-tile .bt-icon svg { width: 60%; }
  .bento-tile .bt-content { padding: 20px; }

  /* ── KILLER FEATURE (h04) ── */
  .killer-feature { padding: 56px 20px 64px; min-height: 0; }
  .kf-grid { grid-template-columns: 1fr !important; gap: 32px; padding: 48px 0 64px; }
  .kf-left { max-width: none; gap: 24px; }
  .kf-title { font: 700 clamp(36px, 11vw, 56px)/1 var(--font-sans); letter-spacing: -0.04em; }
  .mega-angle .ma-text { font-size: clamp(120px, 35vw, 180px); }
  .kf-from { font-size: 22px; margin-top: 18px; }
  .kf-range { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px; }
  .kf-r-text { font-size: 11px; }
  .kf-body { font-size: 15px; }
  .kf-cta { flex-direction: column; width: 100%; }
  .kf-cta .btn { width: 100%; }
  .kf-right { margin-top: 0; justify-content: stretch; }
  .kf-frame { max-width: none; padding: 16px; gap: 12px; }
  .elbow { height: 180px; }
  .kf-top-strip { display: none; }

  /* ── WELDER CAROUSEL (h05) ── */
  .h5-section { padding: 56px 0 64px; }
  .h5-inner { padding: 0 0 0 20px; }
  .h5-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .h5-title { font: 700 44px/1 var(--font-sans); }
  .h5-sub { font-size: 14px; }
  .h5-progress { grid-template-columns: 1fr; gap: 8px; padding: 12px 20px 12px 0; margin-bottom: 16px; }
  .h5-progress-r { display: none; }
  .h5-progress-l-name { display: none; }
  .h5-carousel-wrap { padding-right: 0; }
  .h5-carousel { gap: 12px; padding: 8px 20px 12px 0; touch-action: pan-x; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .welder-card { flex: 0 0 260px !important; height: 360px; transform: none !important; }
  .welder-card .wc-photo { height: 200px; }
  .welder-card .wc-name { font-size: 22px; }
  .h5-fade-l { display: none; }
  .h5-fade-r { left: auto; right: -1px; }
  .h5-dots { display: none; }

  /* ── PROCESS (h06) ── */
  .proc-section-head { padding: 56px 0 28px; }
  .proc-inner { padding: 0 20px; width: 100%; }
  .proc-section-title { font: 700 clamp(28px, 9vw, 44px)/1 var(--font-sans); }
  .proc-section-head-row { grid-template-columns: 1fr; gap: 20px; }
  .proc-section-roadmap { display: none; }
  .proc-step { min-height: 0; padding: 40px 0; }
  .proc-step .proc-inner { grid-template-columns: 1fr !important; gap: 24px; }
  .proc-title { font: 700 32px/1.05 var(--font-sans); }
  .proc-body { font-size: 15px; }
  .proc-meta { flex-wrap: wrap; gap: 16px; padding: 14px 0; }
  .proc-meta-item { flex: 1 1 calc(50% - 8px); padding: 0; }
  .proc-meta-div { display: none; }
  .proc-frame { order: -1; }
  .proc-text { order: 0; max-width: none; }
  .proc-meta-v { font-size: 16px; }
  .proc-frame-head { font-size: 9px; padding: 10px 12px; }
  .proc-hud { padding: 12px 14px; gap: 8px; }
  .ph-temp-v, .ph-clock-v { font-size: 24px; }
  .proc-conn { height: 56px; }

  /* ── GEO (h07) ── */
  .geo-inner { padding: 0 20px; }
  .geo-head { grid-template-columns: 1fr !important; gap: 20px; }
  .geo-title { font: 700 44px/1 var(--font-sans); }
  .geo-sub { font-size: 14px; }
  .geo-head-r { display: none; }
  .geo-scale { display: none; }
  .geo-compass { top: 50px; right: 10px; width: 32px; height: 32px; }
  .geo-map-head { font-size: 9px; padding: 10px 12px; }
  .geo-mh-r { display: none; }

  /* ── TESTIMONIALS (h08) ── */
  .tm-section .tm-inner, .tm-inner { padding: 56px 20px 64px; }
  .tm-head { grid-template-columns: 1fr !important; gap: 20px; }
  .tm-title { font-size: 40px; letter-spacing: -0.02em; }
  .tm-list { gap: 64px; }
  .tm-card { grid-template-columns: 1fr !important; gap: 24px; }
  .tm-card.flip .tm-content { order: 0; }
  .tm-portrait { max-width: 220px; }
  .tm-quote { font-size: 22px; line-height: 1.4; }
  .tm-attrib-name { font-size: 15px; }

  /* ── BLOG (h09) ── */
  .bl-inner, .bl-section .bl-inner { padding: 64px 20px 0; }
  .bl-head { grid-template-columns: 1fr !important; gap: 20px; }
  .bl-section-title { font-size: 44px; }
  .bl-head-r { align-items: flex-start; width: 100%; }
  .bl-grid { display: flex !important; overflow-x: auto; gap: 14px; padding: 0 20px 16px 0; grid-template-columns: none !important; }
  .bl-grid::-webkit-scrollbar { display: none; }
  .bl-card { flex: 0 0 280px; }
  .bl-title { font-size: 17px; }
  .bl-excerpt { display: none; }
  .bl-body { padding: 16px 18px 18px; gap: 10px; }

  /* ── H10 CTA SECTION ── */
  .cta-section { padding: 64px 20px; }
  .cta-corner-l, .cta-corner-r { display: none; }
  .cta-title { font-size: clamp(36px, 11vw, 56px); }
  .cta-sub { font-size: 15px; }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-primary { width: 100%; }
  .cta-row { flex-wrap: wrap; gap: 8px 0; }
  .cta-row-item { flex: 1 1 calc(50% - 10px); padding: 8px 12px; }
  .cta-row-div { display: none; }
  .cta-modal { padding: 28px 20px; max-width: calc(100vw - 24px); }
  .cta-form-grid { grid-template-columns: 1fr; }
  .cta-modal-title { font-size: 26px; }

  /* ── HOME FOOTER (footer.jsx) ── */
  .footer-section .footer-inner { padding: 56px 20px 32px; }
  .footer-top { grid-template-columns: 1fr !important; gap: 32px; }
  .footer-brand-desc { font-size: 14px; }
  .footer-cols { grid-template-columns: 1fr !important; gap: 0; }
  .footer-col { border-top: 1px solid rgba(71,85,105,0.4); padding: 14px 0; }
  .footer-col:last-child { border-bottom: 1px solid rgba(71,85,105,0.4); }
  .footer-slogan { flex-direction: column; align-items: flex-start; gap: 12px; padding: 32px 0 24px; }
  .footer-slogan-text { font-size: clamp(44px, 12vw, 72px); gap: 8px; }
  .footer-slogan-meta { text-align: left; padding-bottom: 0; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }

  /* ── ft-* footer (standalone footer) — single column + accordion nav ── */
  .ft-inner { padding: 56px 20px 28px; }
  .ft-seam-label { right: 20px; font-size: 8px; }
  .ft-top { grid-template-columns: 1fr; gap: 36px; padding-bottom: 28px; }
  .ft-cta-title { font-size: 40px; }
  .ft-cta-actions { flex-direction: column; align-items: stretch; gap: 16px; }
  .ft-cta-actions .btn { width: 100%; justify-content: center; }
  .ft-nav { grid-template-columns: 1fr; gap: 0; }
  .ft-col { border-top: 1px solid rgba(71,85,105,0.35); padding: 14px 0; gap: 0; }
  .ft-col:last-child { border-bottom: 1px solid rgba(71,85,105,0.35); }
  .ft-col-h { cursor: pointer; padding: 4px 0; }
  .ft-col.open .ft-col-arr { transform: rotate(180deg); }
  .ft-col-list { max-height: 0; overflow: hidden; transition: max-height 320ms var(--ease-out), padding 320ms var(--ease-out); }
  .ft-col.open .ft-col-list { max-height: 360px; padding-top: 16px; }
  .ft-rail { grid-template-columns: 1fr 1fr; gap: 22px 16px; padding: 24px 0 32px; }
  .ft-rail-angle { grid-column: 1 / -1; }
  .ft-clock-v { font-size: 26px; }
  .ft-epi { padding-top: 36px; }
  .ft-epi-whisper { font-size: 10px; letter-spacing: 0.34em; }
  .ft-whisper-dot { margin: 0 8px; }
  /* brand leads, 116 becomes a smaller flame accent (was: both equal, 116 in flame dominated) */
  .ft-bigtype { flex-direction: column; align-items: center; gap: 0; }
  .ft-bigtype-word { font-size: clamp(80px, 28vw, 132px); line-height: 0.9; color: #5d6e87; }
  .ft-bigtype-num { font-size: clamp(40px, 13vw, 60px); line-height: 0.98; }
  .ft-meta { flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* ============================================================
   H06 · СПОСОБЫ СОЕДИНЕНИЯ — крупная пошаговая инфографика
   ============================================================ */
.wm-section {
  position: relative;
  background: linear-gradient(180deg, #060B1B 0%, var(--midnight) 100%);
  padding: 80px 48px;
  overflow: hidden;
}
.wm-haze {
  position: absolute; top: 30%; left: 50%; transform: translateX(-50%);
  width: 70%; height: 60%;
  background: radial-gradient(circle, rgba(255,107,53,0.10) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
}
.wm-top-strip {
  position: relative; z-index: 2;
  max-width: 1280px; margin: 0 auto 40px;
  display: flex; justify-content: space-between; align-items: center;
  font: 500 12px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fog);
  padding-bottom: 16px; border-bottom: 1px solid rgba(71,85,105,0.4);
}
.wm-head { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto 28px; }
.wm-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 13px/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fog); margin-bottom: 16px;
}
.wm-e-slash { color: var(--flame); }
.wm-title { font: 700 56px/1 var(--font-sans); letter-spacing: -0.03em; color: var(--snow); margin: 0 0 14px; }
.wm-lede { font: 400 17px/1.6 var(--font-sans); color: var(--fg-muted); margin: 0; max-width: 680px; }

/* method cards */
.wm-methods {
  position: relative; z-index: 2;
  max-width: 1280px; margin: 0 auto 22px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.wm-mc {
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 18px 20px; border-radius: var(--r-3); cursor: pointer;
  background: var(--steel); border: 1.5px solid rgba(71,85,105,0.4);
  transition: border-color var(--dur-std), background var(--dur-std), transform var(--dur-std);
}
.wm-mc:hover { transform: translateY(-2px); border-color: rgba(255,107,53,0.5); }
.wm-mc.on { border-color: var(--flame); background: linear-gradient(180deg, rgba(255,107,53,0.10), rgba(31,41,55,0.6)); }
.wm-mc-icon { color: var(--fg-muted); flex-shrink: 0; display: flex; }
.wm-mc.on .wm-mc-icon { color: var(--flame); }
.wm-mc-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.wm-mc-name { font: 600 17px/1.1 var(--font-sans); color: var(--snow); }
.wm-mc-when { font: 400 13px/1.2 var(--font-sans); color: var(--fg-muted); }
.wm-mc-dn { font: 500 12px/1 var(--font-mono); color: var(--fog); white-space: nowrap; }
.wm-mc.on .wm-mc-dn { color: var(--flame); }

/* big stage frame (full width) */
.wm-stage-frame { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; gap: 0; padding: 0; overflow: hidden; }
.wm-stage-frame .kf-frame-head { padding: 14px 22px; }
.wm-stage {
  position: relative;
  background: radial-gradient(120% 120% at 50% 25%, #142036 0%, #0a1120 100%);
  border-bottom: 1px solid rgba(71,85,105,0.35);
}
.wm-svg { display: block; width: 100%; height: auto; }
/* видео этапа: поверх сцены, SVG остаётся в потоке и держит высоту */
.wm-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.wm-spin { transform-box: fill-box; transform-origin: center; animation: wm-rot 3.2s linear infinite; }
@keyframes wm-rot { to { transform: rotate(360deg); } }

/* named stepper */
.wm-stepper {
  display: flex; align-items: stretch;
  padding: 0; border-bottom: 1px solid rgba(71,85,105,0.35);
  background: rgba(10,18,40,0.4);
}
.wm-node {
  flex: 1; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 8px; cursor: pointer; background: transparent; border: 0;
  border-right: 1px solid rgba(71,85,105,0.25);
  transition: background var(--dur-micro);
}
.wm-node:last-child { border-right: 0; }
.wm-node:hover { background: rgba(71,85,105,0.12); }
.wm-node-num { font: 600 13px/1 var(--font-mono); color: var(--fog); letter-spacing: 0.04em; }
.wm-node-name { font: 500 13px/1.1 var(--font-sans); color: var(--fg-muted); }
.wm-node.done .wm-node-num { color: var(--snow); }
.wm-node.done .wm-node-name { color: var(--fg-muted); }
.wm-node.on { background: rgba(255,107,53,0.12); }
.wm-node.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--flame); }
.wm-node.on .wm-node-num { color: var(--flame); }
.wm-node.on .wm-node-name { color: var(--snow); font-weight: 600; }

/* caption + nav */
.wm-caption {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  padding: 22px; background: rgba(31,41,55,0.4);
}
.wm-cap-l { flex: 1; min-width: 0; }
.wm-cap-title { font: 600 18px/1.2 var(--font-sans); color: var(--snow); margin-bottom: 6px; }
.wm-cap-copy { font: 400 15px/1.55 var(--font-sans); color: var(--fg-muted); max-width: 760px; }
.wm-cap-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* equipment card */
.wm-equip {
  flex-shrink: 0; width: 210px;
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 16px; border-radius: var(--r-2);
  background: rgba(10,18,40,0.5); border: 1px solid rgba(71,85,105,0.5);
  text-decoration: none; transition: border-color var(--dur-std), background var(--dur-std);
}
.wm-equip.link { cursor: pointer; }
.wm-equip.link:hover { border-color: var(--flame); background: rgba(255,107,53,0.08); }
.wm-eq-tag { font: 500 10px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fog); }
.wm-eq-name { font: 600 17px/1.1 var(--font-sans); color: var(--snow); }
.wm-eq-meta { font: 400 12px/1.3 var(--font-sans); color: var(--fg-muted); }
.wm-eq-go { font: 500 12px/1 var(--font-sans); color: var(--flame); margin-top: 6px; }
.wm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: rgba(71,85,105,0.2); border: 1px solid rgba(71,85,105,0.5);
  font: 500 13px/1 var(--font-mono); color: var(--snow);
}
.wm-chip-l { font-size: 10px; color: var(--fog); text-transform: uppercase; letter-spacing: 0.08em; }
.wm-nav { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.wm-nav-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid rgba(71,85,105,0.6); background: rgba(71,85,105,0.15);
  color: var(--snow); font-size: 22px; line-height: 1; cursor: pointer;
  transition: border-color var(--dur-micro), color var(--dur-micro), background var(--dur-micro);
}
.wm-nav-btn:hover:not(:disabled) { border-color: var(--flame); color: var(--flame); }
.wm-nav-btn:disabled { opacity: 0.3; cursor: default; }
.wm-play {
  height: 44px; padding: 0 18px; border-radius: var(--r-pill);
  border: 1.5px solid var(--flame); background: rgba(255,107,53,0.12);
  color: var(--flame); font: 500 13px/1 var(--font-sans); cursor: pointer; white-space: nowrap;
  transition: background var(--dur-micro);
}
.wm-play:hover { background: rgba(255,107,53,0.22); }

.wm-cta { position: relative; z-index: 2; max-width: 1280px; margin: 28px auto 0; display: flex; gap: 14px; flex-wrap: wrap; }

/* entry */
.wm-section .wm-head, .wm-section .wm-methods, .wm-section .wm-stage-frame, .wm-section .wm-cta {
  opacity: 0; transform: translateY(20px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.wm-section.in .wm-head { opacity: 1; transform: none; }
.wm-section.in .wm-methods { opacity: 1; transform: none; transition-delay: 100ms; }
.wm-section.in .wm-stage-frame { opacity: 1; transform: none; transition-delay: 200ms; }
.wm-section.in .wm-cta { opacity: 1; transform: none; transition-delay: 300ms; }

/* ============================================================
   H07 · ТРУБЫ ПЭ — витрина на главной
   ============================================================ */
.hp-section { position: relative; background: var(--midnight); padding: 80px 48px; overflow: hidden; }
.hp-haze { position: absolute; top: 0; left: -10%; width: 50%; height: 60%; background: radial-gradient(circle, rgba(59,130,246,0.10) 0%, transparent 60%); pointer-events: none; z-index: 0; }
.hp-top-strip { position: relative; z-index: 2; max-width: 1440px; margin: 0 auto 48px; display: flex; justify-content: space-between; align-items: center; font: 500 12px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fog); padding-bottom: 16px; border-bottom: 1px solid rgba(71,85,105,0.4); }
.hp-inner { position: relative; z-index: 2; max-width: 1440px; margin: 0 auto; }
.hp-head { max-width: 640px; margin-bottom: 40px; }
.hp-eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 13px/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--fog); margin-bottom: 18px; }
.hp-e-slash { color: var(--electric); }
.hp-title { font: 700 56px/1 var(--font-sans); letter-spacing: -0.03em; color: var(--snow); margin: 0 0 16px; }
.hp-lede { font: 400 17px/1.6 var(--font-sans); color: var(--fg-muted); margin: 0; }

.hp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.hp-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 22px; border-radius: var(--r-3);
  background: var(--steel); border: 1px solid rgba(71,85,105,0.4);
  text-decoration: none; cursor: pointer;
  transition: transform var(--dur-std) var(--ease-out), box-shadow var(--dur-std), border-color var(--dur-std);
}
.hp-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); border-color: var(--electric); }
.hp-card.hp-yellow:hover { border-color: var(--warn); }
.hp-card.hp-none:hover { border-color: var(--slate); }
.hp-card-head { display: flex; justify-content: space-between; align-items: center; }
.hp-card-kicker { font: 500 10px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fog); }
.hp-stripe-dot { width: 12px; height: 12px; border-radius: 50%; }
.hp-stripe-dot.hp-blue { background: var(--electric); box-shadow: 0 0 8px rgba(59,130,246,0.6); }
.hp-stripe-dot.hp-yellow { background: var(--warn); box-shadow: 0 0 8px rgba(245,158,11,0.6); }
.hp-stripe-dot.hp-none { background: var(--slate); }
.hp-card-art { position: relative; border-radius: var(--r-2); overflow: hidden; aspect-ratio: 16 / 9; background: #0d1424; }
.hp-pipe-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out); }
.hp-card:hover .hp-pipe-photo { transform: scale(1.04); }
.hp-card-name { font: 600 22px/1.1 var(--font-sans); color: var(--snow); }
.hp-card-specs { display: flex; align-items: stretch; padding: 12px 0; border-top: 1px solid rgba(71,85,105,0.4); }
.hp-spec { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.hp-spec-l { font: 400 9px/1 var(--font-mono); color: var(--fog); letter-spacing: 0.1em; text-transform: uppercase; }
.hp-spec-v { font: 500 15px/1 var(--font-mono); color: var(--snow); }
.hp-spec-div { width: 1px; background: rgba(71,85,105,0.4); margin: 0 12px; }
.hp-card-foot { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1 var(--font-sans); color: var(--electric); margin-top: 2px; }
.hp-card.hp-yellow .hp-card-foot { color: var(--warn); }
.hp-card.hp-none .hp-card-foot { color: var(--snow); }

.hp-cta-row { display: flex; align-items: center; gap: 20px; margin-top: 36px; flex-wrap: wrap; }
.hp-cta-note { font: 400 13px/1 var(--font-mono); color: var(--fog); letter-spacing: 0.04em; }

.hp-section .hp-head, .hp-section .hp-card, .hp-section .hp-cta-row { opacity: 0; transform: translateY(20px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.hp-section.in .hp-head { opacity: 1; transform: none; }
.hp-section.in .hp-card { opacity: 1; transform: none; }
.hp-section.in .hp-card:nth-child(2) { transition-delay: 100ms; }
.hp-section.in .hp-card:nth-child(3) { transition-delay: 200ms; }
.hp-section.in .hp-cta-row { opacity: 1; transform: none; transition-delay: 280ms; }

/* ---- mobile (≤768px) for welding widget + pipes showcase ---- */
@media (max-width: 768px) {
  .wm-section { padding: 56px 16px; }
  .wm-top-strip { display: none; }
  .wm-title { font: 700 clamp(34px, 10vw, 48px)/1 var(--font-sans); }
  .wm-methods { grid-template-columns: 1fr; gap: 10px; }
  .wm-mc { padding: 14px 16px; }
  .wm-mc-dn { display: none; }
  .wm-stepper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .wm-node { min-width: 92px; flex: 0 0 auto; }
  .wm-caption { flex-direction: column; align-items: stretch; gap: 16px; padding: 16px; }
  .wm-equip { width: auto; }
  .wm-nav { justify-content: space-between; }
  .wm-play { flex: 1; }
  .wm-cta { flex-direction: column; }
  .wm-cta .btn { width: 100%; justify-content: center; }

  .hp-section { padding: 56px 20px; }
  .hp-top-strip { display: none; }
  .hp-title { font: 700 clamp(34px, 10vw, 48px)/1 var(--font-sans); }
  .hp-grid { grid-template-columns: 1fr; gap: 14px; }
  .hp-cta-row .btn { width: 100%; justify-content: center; }
}

/* ── бенто: выпадающий список групп раздела (клик = каталог с фильтром) ── */
.bt-menu {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 6;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: rgba(10,18,40,0.92); backdrop-filter: blur(12px);
  border: 1px solid rgba(148,163,184,0.22); border-radius: 12px;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.bt-menu.show { opacity: 1; transform: none; pointer-events: auto; }
.bt-menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border: 0; border-radius: 8px; background: none;
  font: 500 13px var(--font-sans); color: var(--fg-muted); cursor: pointer;
  text-align: left; transition: 140ms;
}
.bt-menu-item:hover { background: rgba(255,107,53,0.14); color: var(--snow); }
.bt-menu-item svg { opacity: 0; transition: 140ms; }
.bt-menu-item:hover svg { opacity: 1; color: var(--flame); }
.bt-menu-item.all { border-top: 1px solid rgba(148,163,184,0.14); border-radius: 0 0 8px 8px;
  color: var(--electric); font-weight: 600; justify-content: center; }
.bt-menu-item.all:hover { background: rgba(59,130,246,0.12); }
@media (hover: none) { .bt-menu { display: none; } }  /* на таче — сразу в раздел */

/* ============================================================
   H-03 · КАТАЛОГ: аппараты широкой плашкой (флагман) + компактная
   сетка 8 разделов (4×2). Цель — читаемо и ~в один экран.
   Данные — манифест catalog-root.
   ============================================================ */
.h3cat { max-width: 1440px; margin: 0 auto; padding: 52px 48px; }
.h3cat-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 22px; flex-wrap: wrap; }
.h3cat-head-l { max-width: 640px; }
.h3cat-eyebrow { font: 600 12px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--flame); margin-bottom: 14px; }
.h3cat-eyebrow .sl { color: var(--flame); font-weight: 700; }
.h3cat-title { font: 700 clamp(30px, 4vw, 52px)/1 var(--font-sans); letter-spacing: -0.03em; color: var(--snow); margin: 0 0 14px; }
.h3cat-title span { color: var(--fg-muted); font-weight: 500; }
.h3cat-sub { font: 400 15px/1.55 var(--font-sans); color: var(--fg-muted); margin: 0; max-width: 560px; }
.h3cat-head-r { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.h3cat-alllink { display: inline-flex; align-items: center; gap: 10px; font: 600 14px var(--font-sans); color: var(--snow);
  text-decoration: none; border: 1px solid var(--slate); border-radius: var(--r-pill); padding: 11px 20px; transition: all .2s var(--ease-out); }
.h3cat-alllink:hover { border-color: var(--flame); color: var(--flame); }
.h3cat-alllink svg { width: 17px; height: 17px; }
.h3cat-spec { border: 1px solid var(--slate); border-radius: var(--r-3); padding: 12px 16px; min-width: 280px;
  background: color-mix(in srgb, var(--midnight) 60%, transparent); }
.h3cat-spec-row { display: flex; justify-content: space-between; gap: 20px; font: 500 12px/1.8 var(--font-mono);
  letter-spacing: 0.03em; }
.h3cat-spec-row span:first-child { color: var(--fog); text-transform: uppercase; }
.h3cat-spec-row span:last-child { color: var(--fg-muted); }
.h3cat-spec-row .ok { color: var(--ok); }

/* аппараты — широкая плашка: фото на светлой сцене слева, текст справа */
.h3cat-banner { display: flex; align-items: stretch; margin-bottom: 14px; border-radius: var(--r-4); overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--flame) 55%, transparent); background: #16213c; text-decoration: none; color: inherit;
  box-shadow: 0 12px 30px color-mix(in srgb, #000 40%, transparent);
  transition: transform .2s var(--ease-out), box-shadow .3s var(--ease-out); }
.h3cat-banner:hover { transform: translateY(-3px); box-shadow: 0 22px 52px color-mix(in srgb, #000 55%, transparent); }
/* aspect-ratio = реальные пропорции apparaty.webp (1600×980, 1.63:1). Без него
   высота блока подчинялась только align-items:stretch под короткий текстовый
   блок справа (~180px) — на ширине 40% это давало box ~5:1, и object-fit:cover
   обрезал станок сверху (штоки) и снизу (рама/подставка) до тонкой полосы по
   центру («сильно приближено, машина не видна целиком» — жалоба владельца). */
.h3cat-banner-media { flex: 0 0 40%; aspect-ratio: 1600 / 980; background: var(--midnight); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.h3cat-banner-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .5s var(--ease-out); }
.h3cat-banner:hover .h3cat-banner-media img { transform: scale(1.03); }
.h3cat-banner-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 24px 28px; min-width: 0; }
.h3cat-banner-eyebrow { font: 500 12px/1.4 var(--font-mono); letter-spacing: 0.04em; color: var(--fg-muted); }
.h3cat-banner-name { font: 700 24px/1.1 var(--font-sans); letter-spacing: -0.02em; color: var(--snow); margin: 0; }
.h3cat-banner-teaser { font: 600 13px var(--font-mono); letter-spacing: 0.02em; color: var(--flame); }
.h3cat-banner-foot { display: flex; align-items: center; gap: 18px; margin-top: 4px; }
.h3cat-banner-count { font: 700 20px/1 var(--font-mono); letter-spacing: -0.02em; color: var(--snow); }
.h3cat-banner-count i { font: 500 10px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); font-style: normal; margin-left: 5px; }

/* сетка 8 разделов. Карточка — ЕДИНАЯ тёмная поверхность: края картинки категории
   сведены к --midnight (см. scripts/gen-category-scene.mjs), поэтому фото не в рамке,
   а растворяется в карточке. Границу держит бордер, а не смена фона — иначе внутри
   карточки проступит прямоугольник картинки. Менять фон карточки только вместе
   с краевым цветом сцены в генераторе. */
.h3cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.h3cat-card { display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,0.10); border-radius: var(--r-4);
  overflow: hidden; background: var(--midnight); text-decoration: none; color: inherit;
  box-shadow: 0 10px 24px color-mix(in srgb, #000 38%, transparent);
  transition: transform .2s var(--ease-out), border-color .2s, box-shadow .3s var(--ease-out); }
.h3cat-card:hover { transform: translateY(-4px); border-color: var(--flame);
  box-shadow: 0 20px 46px color-mix(in srgb, #000 55%, transparent); z-index: 2; }

/* aspect-ratio = кадру генератора (1600×980): кроп не зависит от ширины колонки */
.h3cat-media { position: relative; aspect-ratio: 1600 / 980; overflow: hidden; background: var(--midnight); }
.h3cat-media img { width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease-out); }
.h3cat-card:hover .h3cat-media img { transform: scale(1.05); }

/* Шильдики брендов на фото раздела. ⚠️ НЕ копировать стиль .ccard-brand: там
   плашка тёмная, потому что фото товара на светлой плитке. Категорийные кадры
   тёмные, тёмная плашка на них исчезает — здесь нужен светлый «морозный» бейдж. */
.h3cat-brands { position: absolute; top: 10px; right: 10px; z-index: 2;
  display: flex; gap: 6px; }
.h3cat-brands span {
  font: 700 10px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--flame);
  background: color-mix(in srgb, #0a1228 74%, transparent);
  border: 1px solid color-mix(in srgb, var(--flame) 65%, transparent);
  border-radius: var(--r-1); padding: 5px 8px; backdrop-filter: blur(6px); }

.h3cat-name-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.h3cat-count { display: inline-flex; align-items: baseline; gap: 4px; flex: none;
  font: 700 14px/1 var(--font-mono); letter-spacing: -0.02em; color: var(--flame); }
.h3cat-count i { font: 500 9px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); font-style: normal; }

.h3cat-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.h3cat-name { font: 700 16px/1.2 var(--font-sans); letter-spacing: -0.01em; color: var(--snow); margin: 0; }
.h3cat-subs { font: 400 12.5px/1.45 var(--font-sans); color: var(--fg-muted); }
.h3cat-open { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 7px;
  font: 600 11px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--flame); }
.h3cat-open svg { width: 14px; height: 14px; transition: transform .18s var(--ease-out); }
.h3cat-card:hover .h3cat-open svg, .h3cat-banner:hover .h3cat-open svg { transform: translateX(4px); }

@media (max-width: 1024px) {
  .h3cat { padding: 56px 24px; }
  .h3cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .h3cat-banner { flex-direction: column; }
  .h3cat-banner-media { flex: none; height: 180px; }
  .h3cat-banner-body { padding: 18px 20px; }
}
@media (max-width: 560px) {
  .h3cat { padding: 48px 16px; }
  .h3cat-head-r { align-items: stretch; width: 100%; }
  .h3cat-spec { min-width: 0; }
}
@media (max-width: 400px) {
  .h3cat-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .h3cat-card, .h3cat-banner, .h3cat-media img, .h3cat-banner-media img, .h3cat-open svg { transition: none; }
  .h3cat-card:hover, .h3cat-banner:hover { transform: none; }
  .h3cat-card:hover .h3cat-media img, .h3cat-banner:hover .h3cat-banner-media img { transform: none; }
}

html, body { background: var(--midnight); }
.cfg-root { min-height: 100vh; }
.cfg-root .mono { font-family: var(--font-mono); }
.cfg-root .eyebrow { font: 500 12px/1.4 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }

/* ── navbar ── */
.cfg-root .navbar { position: sticky; top: 0; z-index: 50; height: 64px; background: rgba(10,18,40,0.85); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(71,85,105,0.4); }
.cfg-root .nav-in { max-width: 2160px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 64px); height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.cfg-root .brand { display: flex; align-items: baseline; gap: 10px; }
.cfg-root .brand-mark { font: 700 20px var(--font-sans); letter-spacing: 0.08em; color: var(--snow); }
.cfg-root .brand-sub { font: 400 12px var(--font-mono); color: var(--fog); }
.cfg-root .nav-links { display: flex; gap: 28px; }
.cfg-root .nav-links a { font: 500 14px var(--font-sans); color: var(--fg-muted); cursor: pointer; transition: color 160ms; }
.cfg-root .nav-links a:hover, .cfg-root .nav-links a.on { color: var(--snow); }
.cfg-root .nav-links a.on { position: relative; }
.cfg-root .nav-links a.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -22px; height: 2px; background: var(--flame); }
.cfg-root .nav-phone { font: 500 14px var(--font-mono); color: var(--snow); letter-spacing: 0.03em; }

/* ── layout shells ── */
.cfg-root .cf-head, .cfg-root .cf-cfg, .cfg-root .cf-table, .cfg-root .cf-cta { max-width: 2160px; margin: 0 auto; padding-left: clamp(20px, 4vw, 64px); padding-right: clamp(20px, 4vw, 64px); }
.cfg-root .cf-head { padding-top: 48px; padding-bottom: 8px; }
.cfg-root .bcrumb { display: flex; align-items: center; gap: 8px; font: 500 13px var(--font-mono); color: var(--fog); }
.cfg-root .bcrumb a { color: var(--fog); cursor: pointer; transition: color 160ms; }
.cfg-root .bcrumb a:hover { color: var(--flame); }
.cfg-root .bcrumb span { color: var(--slate); }
.cfg-root .bc-cur { color: var(--snow) !important; }
.cfg-root .cf-h1 { font: 700 clamp(34px, 4.4vw, 56px)/1.08 var(--font-sans); letter-spacing: -0.03em; color: var(--snow); margin: 18px 0 14px; }
.cfg-root .cf-lede { font: 400 18px/1.6 var(--font-sans); color: var(--fg-muted); max-width: 640px; }

/* ── configurator 2-col ── */
.cfg-root .cf-cfg { padding-top: 40px; padding-bottom: 40px; }
.cfg-root .cfg-2col { display: grid; grid-template-columns: 1.12fr 1fr; gap: 28px; align-items: start; }

.cfg-root .stage { position: sticky; top: 84px; background: rgba(31,41,55,0.5); border: 1px solid var(--slate); border-radius: 16px; padding: 22px; backdrop-filter: blur(20px); }
.cfg-root .stage-top { display: flex; align-items: center; justify-content: space-between; }
.cfg-root .stage-art { font: 500 12px var(--font-mono); color: var(--electric); letter-spacing: 0.05em; }
.cfg-root .stage-svg { display: flex; align-items: center; justify-content: center; }
.cfg-root .fit-svg { width: 100%; max-width: 520px; aspect-ratio: 1; display: block; }
.cfg-root .dim-lab { font: 500 12px var(--font-mono); fill: var(--snow); letter-spacing: 0.02em; }
.cfg-root .stage-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--slate); }
.cfg-root .stage-foot .mono { font-size: 12.5px; color: var(--fg-muted); letter-spacing: 0.02em; }
.cfg-root .ghost-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 8px; background: transparent; border: 1px solid var(--slate); color: var(--snow); font: 500 13px var(--font-sans); cursor: pointer; transition: all 160ms var(--ease-out); white-space: nowrap; }
.cfg-root .ghost-btn:hover { border-color: var(--snow); }

/* ── panel ── */
.cfg-root .panel { background: var(--steel); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 22px; }
.cfg-root .ctl { display: flex; flex-direction: column; gap: 12px; }
.cfg-root .ctl-lab { display: flex; align-items: baseline; justify-content: space-between; }
.cfg-root .ctl-val { font: 500 15px var(--font-mono); color: var(--snow); letter-spacing: 0.02em; }

/* type segmented */
.cfg-root .seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--slate); border-radius: 10px; overflow: hidden; }
.cfg-root .seg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; background: transparent; border: 0; border-right: 1px solid var(--slate); color: var(--fg-muted); font: 500 14px var(--font-sans); cursor: pointer; transition: all 180ms var(--ease-out); position: relative; }
.cfg-root .seg-btn:last-child { border-right: 0; }
.cfg-root .seg-btn:hover { background: rgba(71,85,105,0.4); color: var(--snow); }
.cfg-root .seg-btn.on { background: rgba(255,107,53,0.08); color: var(--snow); }
.cfg-root .seg-btn.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--flame); }

/* diameter chips */
.cfg-root .chip-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.cfg-root .pchip { min-width: 42px; height: 38px; padding: 0 8px; border-radius: var(--r-pill); border: 1px solid var(--slate); background: transparent; color: var(--fg-muted); font: 700 14px var(--font-mono); cursor: pointer; transition: transform 150ms var(--ease-bounce), background 150ms, color 150ms, border-color 150ms; }
.cfg-root .pchip:hover { border-color: var(--flame); color: var(--snow); transform: scale(1.05); }
.cfg-root .pchip.on { background: var(--flame); border-color: var(--flame); color: var(--snow); transform: scale(1.1); }
.cfg-root .pchip.flash { box-shadow: 0 0 0 3px rgba(255,107,53,0.4); }
.cfg-root .pchip.dashed { border-style: dashed; color: var(--snow); font-weight: 500; padding: 0 14px; }
.cfg-root .pchip.dashed:hover { border-color: var(--flame); border-style: dashed; color: var(--flame); }
.cfg-root .pchip.custom.on { background: var(--flame); border-color: var(--flame); }
.cfg-root .custom-d-input { width: 168px; height: 38px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--flame); background: var(--midnight); color: var(--snow); font: 700 14px var(--font-mono); outline: none; box-shadow: 0 0 0 3px rgba(255,107,53,0.18); }
.cfg-root .custom-d-input::placeholder { color: var(--fog); font-weight: 400; letter-spacing: 0; }
.cfg-root .custom-hint { font: 400 11px var(--font-mono); color: var(--fog); letter-spacing: 0.04em; margin: 2px 0 0; }

/* SDR chips */
.cfg-root .sdr-row { display: flex; gap: 8px; flex-wrap: wrap; }
.cfg-root .schip { min-width: 52px; height: 44px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--slate); background: transparent; color: var(--fg-muted); font: 700 14px var(--font-mono); cursor: pointer; transition: all 150ms var(--ease-out); }
.cfg-root .schip:hover { border-color: var(--flame); color: var(--snow); }
.cfg-root .schip.on { background: var(--flame); border-color: var(--flame); color: var(--snow); }
.cfg-root .schip.flash { box-shadow: 0 0 0 3px rgba(255,107,53,0.4); }
.cfg-root .sdr-hint { font: 400 13px/1.5 var(--font-sans); color: var(--fg-muted); margin: 2px 0 0; }

/* angle / protractor */
.cfg-root .angle-ctl { overflow: hidden; transition: max-height 600ms var(--ease-bounce), opacity 400ms var(--ease-out), margin 400ms; max-height: 420px; }
.cfg-root .angle-ctl.collapsed { max-height: 0; opacity: 0; margin-top: -22px; pointer-events: none; }
.cfg-root .protractor { display: flex; justify-content: center; padding: 4px 0; }
.cfg-root .prot-svg { width: 300px; max-width: 100%; touch-action: none; cursor: pointer; user-select: none; }
.cfg-root .prot-lab { font: 500 11px var(--font-mono); fill: var(--fog); letter-spacing: 0.06em; }
.cfg-root .prot-tip { font: 700 14px var(--font-mono); fill: var(--snow); }
.cfg-root .angle-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cfg-root .angle-big { font: 700 32px var(--font-mono); color: var(--flame); letter-spacing: -0.01em; cursor: text; padding: 2px 6px; border-radius: 6px; }
.cfg-root .angle-big:focus { outline: 2px solid var(--electric); }
.cfg-root .angle-chips { display: flex; gap: 8px; }
.cfg-root .std-wrap { position: relative; }
.cfg-root .ach { height: 38px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--slate); background: transparent; color: var(--snow); font: 500 13px var(--font-sans); cursor: pointer; transition: all 160ms; }
.cfg-root .ach:hover { border-color: var(--snow); }
.cfg-root .ach.usp { border-color: var(--flame); color: var(--flame); animation: uspPulse 2s var(--ease-smooth) infinite; }
@keyframes uspPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,107,53,0); opacity: 0.85; } 50% { box-shadow: 0 0 12px 0 rgba(255,107,53,0.35); opacity: 1; } }
.cfg-root .std-menu { position: absolute; bottom: 46px; left: 0; display: flex; flex-direction: column; background: var(--midnight); border: 1px solid var(--slate); border-radius: 10px; overflow: hidden; z-index: 20; box-shadow: var(--shadow-2); }
.cfg-root .std-menu button { padding: 10px 22px; background: transparent; border: 0; color: var(--snow); font: 500 14px var(--font-mono); text-align: left; cursor: pointer; }
.cfg-root .std-menu button:hover { background: rgba(255,107,53,0.12); }

/* output / price / order */
.cfg-root .out { border-top: 1px solid var(--slate); padding-top: 22px; display: flex; flex-direction: column; gap: 16px; }
.cfg-root .out-top { display: flex; align-items: flex-end; justify-content: space-between; }
.cfg-root .out-lab { font-size: 12px; color: var(--fog); letter-spacing: 0.12em; text-transform: uppercase; }
.cfg-root .out-price { font: 700 48px/1 var(--font-sans); color: var(--snow); letter-spacing: -0.02em; margin-top: 6px; }
.cfg-root .out-price .cur { font-size: 26px; color: var(--fog); margin-left: 4px; }
.cfg-root .stock { display: inline-flex; align-items: center; gap: 8px; font: 500 13px var(--font-mono); color: var(--fg-muted); }
.cfg-root .stock .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 8px var(--warn); }

.cfg-root .order { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: rgba(10,18,40,0.6); border: 1px solid var(--slate); border-radius: 12px; padding: 14px 16px; }
.cfg-root .qty { display: flex; flex-direction: column; gap: 8px; }
.cfg-root .qty-lab { font: 500 12px var(--font-mono); color: var(--fog); letter-spacing: 0.1em; text-transform: uppercase; }
.cfg-root .qty-ctl { display: flex; align-items: center; gap: 8px; }
.cfg-root .qty-ctl button { width: 36px; height: 36px; border-radius: 8px; background: transparent; border: 1px solid var(--slate); color: var(--snow); font-size: 18px; cursor: pointer; transition: all 150ms; }
.cfg-root .qty-ctl button:hover { border-color: var(--flame); color: var(--flame); }
.cfg-root .qty-ctl input { width: 54px; height: 36px; text-align: center; background: var(--midnight); border: 1px solid var(--slate); color: var(--snow); border-radius: 8px; font-size: 15px; outline: none; }
.cfg-root .qty-unit { font: 400 13px var(--font-mono); color: var(--fog); }
.cfg-root .order-total { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cfg-root .order-total > span:first-child { font: 500 12px var(--font-mono); color: var(--fog); letter-spacing: 0.1em; text-transform: uppercase; }
.cfg-root .ot-val { font: 700 24px var(--font-mono); color: var(--flame); letter-spacing: -0.01em; }

.cfg-root .cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 56px; border-radius: 10px; background: var(--flame); color: var(--snow); border: 0; font: 600 16px var(--font-sans); cursor: pointer; transition: all 200ms var(--ease-out); box-shadow: var(--shadow-flame); }
.cfg-root .cta:hover { background: var(--ember); transform: translateY(-2px); }
.cfg-root .cta.magnetic { transition: transform 140ms var(--ease-out), background 200ms; }
.cfg-root .cta.magnetic:hover { transform: none; }
.cfg-root .cta.dark { background: var(--midnight); color: var(--snow); box-shadow: none; width: auto; padding: 0 32px; white-space: nowrap; }
.cfg-root .cta.dark:hover { background: #060B1B; }
.cfg-root .cta-sub { display: flex; align-items: center; justify-content: center; gap: 8px; font: 400 13px var(--font-sans); color: var(--fg-muted); text-align: center; margin: 0; }
.cfg-root .cta-sub-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: blink 2s var(--ease-smooth) infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ── table ── */
.cfg-root .cf-table { padding-top: 80px; padding-bottom: 40px; }
.cfg-root .tbl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; }
.cfg-root .tbl-title { font: 700 clamp(26px,3vw,40px)/1.1 var(--font-sans); letter-spacing: -0.02em; color: var(--snow); margin: 0 0 8px; }
.cfg-root .tbl-sub { font: 400 15px var(--font-sans); color: var(--fg-muted); margin: 0; }
.cfg-root .tbl-filter { display: flex; align-items: center; gap: 8px; }
.cfg-root .tf-lab { font-size: 13px; color: var(--fog); margin-right: 2px; }
.cfg-root .tf-chip { min-width: 48px; height: 36px; border-radius: var(--r-pill); border: 1px solid var(--slate); background: transparent; color: var(--fg-muted); font: 700 13px var(--font-mono); cursor: pointer; transition: all 150ms; }
.cfg-root .tf-chip:hover { border-color: var(--snow); color: var(--snow); }
.cfg-root .tf-chip.on { background: var(--snow); border-color: var(--snow); color: var(--ink); }

.cfg-root .tbl-scroll { overflow-x: auto; border-radius: 12px; border: 1px solid var(--slate); }
.cfg-root .combo { width: 100%; border-collapse: collapse; min-width: 600px; }
.cfg-root .combo th, .cfg-root .combo td { text-align: center; padding: 13px 10px; font: 500 14px var(--font-mono); }
.cfg-root .combo thead th { background: var(--midnight); color: var(--fg-muted); letter-spacing: 0.06em; text-transform: uppercase; font-size: 12.5px; border-bottom: 1px solid var(--slate); }
.cfg-root .combo .rowhead { background: var(--midnight); color: var(--snow); font-weight: 700; text-align: left; padding-left: 20px; position: sticky; left: 0; }
.cfg-root .combo .rowhead.mto { color: var(--fg-muted); }
.cfg-root .mto-tag { display: block; font: 500 10px var(--font-mono); color: var(--warn); letter-spacing: 0.04em; margin-top: 3px; text-transform: uppercase; }
.cfg-root .tbl-note { font: 400 13px var(--font-mono); color: var(--fog); letter-spacing: 0.02em; margin: 16px 2px 0; }
.cfg-root .tbl-note a { color: var(--flame); cursor: pointer; }
.cfg-root .tbl-note a:hover { text-decoration: underline; }
.cfg-root .combo tbody tr { background: var(--steel); }
.cfg-root .combo tbody td.cell { color: var(--fg-muted); cursor: pointer; border-bottom: 1px solid rgba(71,85,105,0.25); border-left: 1px solid rgba(71,85,105,0.25); transition: background 130ms, color 130ms; }
.cfg-root .combo tbody td.cell:hover { background: var(--slate); color: var(--snow); }
.cfg-root .combo tbody td.cell.sel { background: var(--flame); color: var(--snow); font-weight: 700; }

/* ── CTA strip ── */
.cfg-root .cf-cta { padding-top: 40px; padding-bottom: 80px; }
.cfg-root .cta-strip { display: flex; align-items: center; justify-content: space-between; gap: 32px; background: var(--flame); border-radius: 20px; padding: 48px 56px; flex-wrap: wrap; }
.cfg-root .cs-title { font: 700 clamp(26px,3.2vw,40px)/1.1 var(--font-sans); letter-spacing: -0.02em; color: var(--snow); margin: 0 0 8px; }
.cfg-root .cs-sub { font: 400 18px var(--font-sans); color: rgba(255,255,255,0.9); margin: 0; }

.cfg-root .foot { max-width: 2160px; margin: 0 auto; padding: 28px clamp(20px, 4vw, 64px); border-top: 1px solid var(--slate); }
.cfg-root .foot span { font-size: 12px; color: var(--fog); letter-spacing: 0.06em; }

/* ── modal ── */
.cfg-root .modal-bg { position: fixed; inset: 0; z-index: 100; background: rgba(6,11,27,0.7); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: fadeIn 200ms var(--ease-out); }
.cfg-root .modal { position: relative; width: 100%; max-width: 460px; background: var(--steel); border: 1px solid var(--slate); border-radius: 18px; padding: 32px; box-shadow: var(--shadow-3); animation: popIn 280ms var(--ease-bounce); }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes popIn { from { opacity: 0; transform: translateY(16px) scale(0.97); } }
.cfg-root .modal-x { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 8px; background: transparent; border: 1px solid var(--slate); color: var(--fg-muted); cursor: pointer; font-size: 14px; }
.cfg-root .modal-x:hover { border-color: var(--snow); color: var(--snow); }
.cfg-root .modal-title { font: 700 26px var(--font-sans); color: var(--snow); letter-spacing: -0.02em; margin: 8px 0 18px; }
.cfg-root .spec-box { background: var(--midnight); border: 1px solid var(--slate); border-radius: 12px; padding: 6px 18px; margin-bottom: 20px; }
.cfg-root .sb-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px dashed rgba(71,85,105,0.5); font: 400 14px var(--font-sans); color: var(--fg-muted); }
.cfg-root .sb-row b { color: var(--snow); font-weight: 600; }
.cfg-root .sb-row.total { border-bottom: 0; padding-top: 14px; }
.cfg-root .sb-row.total b { color: var(--flame); font-size: 18px; }
.cfg-root .mform { display: flex; flex-direction: column; gap: 10px; }
.cfg-root .mform input { height: 48px; padding: 0 16px; border-radius: 10px; background: var(--midnight); border: 1px solid var(--slate); color: var(--snow); font: 400 15px var(--font-sans); outline: none; transition: border-color 150ms; }
.cfg-root .mform input::placeholder { color: var(--fog); }
.cfg-root .mform input:focus { border-color: var(--electric); }
.cfg-root .mform .cta { margin-top: 4px; }
.cfg-root .mform-sub { font: 400 12px/1.5 var(--font-sans); color: var(--fog); text-align: center; margin: 12px 0 0; }

/* ── toast ── */
.cfg-root .toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 120; display: inline-flex; align-items: center; gap: 10px; background: var(--snow); color: var(--ink); padding: 13px 22px; border-radius: var(--r-pill); font: 500 14px var(--font-sans); box-shadow: var(--shadow-2); animation: toastUp 280ms var(--ease-bounce); }
.cfg-root .toast-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
@keyframes toastUp { from { opacity: 0; transform: translate(-50%, 16px); } }

/* ── responsive ── */
@media (max-width: 920px) {
  .cfg-root .cfg-2col { grid-template-columns: 1fr; }
  .cfg-root .stage { position: static; }
  .cfg-root .nav-links { display: none; }
}

@media (max-width: 768px) {
  .cfg-root { overflow-x: hidden; }
  .cfg-root .cf-head, .cfg-root .cf-cfg, .cfg-root .cf-table, .cfg-root .cf-cta { padding-left: 16px; padding-right: 16px; }
  .cfg-root .cf-head { padding-top: 24px; }
  .cfg-root .cf-h1 { font-size: clamp(24px, 7vw, 36px); }
  .cfg-root .stage-svg { height: 220px; }
  .cfg-root .panel { max-width: none; }
  .cfg-root .seg { flex-wrap: wrap; }
  .cfg-root .seg-btn { flex: 1 1 auto; }
  .cfg-root .price-row { flex-wrap: wrap; gap: 10px; }
  .cfg-root .tbl-wrap { overflow-x: auto; }
  .cfg-root .cf-table-inner { min-width: 360px; }
  .cfg-root .bcrumb { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
}

/* ============================================================
   КАРТОЧКА АППАРАТА · Sreda S315
   ============================================================ */
html { scroll-behavior: smooth; }
body { background: var(--midnight); overflow-x: hidden; }
#root { min-height: 100vh; }
.s315 .mono { font-family: var(--font-mono); }
button { font-family: inherit; }

/* ---- shared buttons ---- */
.s315 .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: var(--r-2); font: 500 16px var(--font-sans); cursor: pointer;
  white-space: nowrap; border: 1.5px solid transparent; transition: all 220ms var(--ease-out); }
.s315 .btn-lg { height: 56px; padding: 0 28px; }
.s315 .btn-md { height: 48px; padding: 0 22px; font-size: 15px; }
.s315 .btn-sm { height: 40px; padding: 0 18px; font-size: 14px; }
.s315 .btn-primary { background: var(--flame); color: var(--snow); border-color: var(--flame); }
.s315 .btn-primary:hover { background: var(--ember); border-color: var(--ember); transform: translateY(-1px); box-shadow: var(--shadow-flame); }
.s315 .btn-primary:active { transform: translateY(0) scale(0.99); }
.s315 .btn-primary .ico { transition: transform 220ms var(--ease-out); }
.s315 .btn-primary:hover .ico { transform: translateX(4px); }
.s315 .btn-outline { background: transparent; color: var(--snow); border-color: var(--slate); }
.s315 .btn-outline:hover { border-color: var(--snow); background: rgba(248,250,252,0.04); }
.s315 .btn-ghost { background: transparent; color: var(--snow); border: 0; padding-left: 0; padding-right: 0; position: relative; }
.s315 .btn-ghost .gline { position: absolute; left: 0; bottom: 6px; height: 1.5px; width: 0; background: var(--flame); transition: width 260ms var(--ease-out); }
.s315 .btn-ghost:hover .gline { width: 100%; }
.s315 .btn-dark { background: var(--midnight); color: var(--snow); border-color: var(--midnight); }
.s315 .btn-dark:hover { background: var(--ink); transform: translateY(-1px); }
.s315 .btn-block { width: 100%; }

/* ---- eyebrow ---- */
.s315 .eyebrow { font: 500 13px/1.4 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }

/* ============================================================
   HEADER
   ============================================================ */
.s315 .hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 80; height: 80px;
  transition: background 250ms var(--ease-out), backdrop-filter 250ms var(--ease-out), border-color 250ms var(--ease-out), transform 300ms var(--ease-out);
  border-bottom: 1px solid transparent; }
.s315 .hdr.scrolled { background: rgba(10,18,40,0.86); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom-color: rgba(71,85,105,0.4); }
.s315 .hdr.hidden { transform: translateY(-100%); }
.s315 .hdr-in { max-width: 1280px; margin: 0 auto; padding: 0 32px; height: 80px; display: flex; align-items: center; justify-content: space-between; }
.s315 .hdr-logo { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.s315 .hdr-logo img { height: 34px; width: auto; }
.s315 .hdr-logo .wm { font: 700 19px var(--font-sans); letter-spacing: 0.06em; color: var(--snow); }
.s315 .hdr-nav { display: flex; gap: 30px; }
.s315 .hdr-nav a { font: 500 15px var(--font-sans); color: var(--snow); position: relative; padding: 4px 0; cursor: pointer; }
.s315 .hdr-nav a::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1.5px; background: var(--flame); transition: width 250ms var(--ease-out); }
.s315 .hdr-nav a:hover::after, .s315 .hdr-nav a.active::after { width: 100%; }
.s315 .hdr-right { display: flex; align-items: center; gap: 18px; }
.s315 .hdr-phone { font: 500 14px var(--font-mono); color: var(--snow); letter-spacing: 0.04em; }
.s315 .hdr-burger { display: none; background: transparent; border: 0; color: var(--snow); cursor: pointer; padding: 8px; margin: -8px; }
@media (max-width: 1000px){ .s315 .hdr-nav, .s315 .hdr-phone { display: none; } .s315 .hdr-right .btn { display: none; } .s315 .hdr-burger { display: inline-flex; } .s315 .hdr-logo img { height: 30px; } }

/* mobile fullscreen menu */
.s315 .mobile-menu { position: fixed; inset: 0; z-index: 95; background: rgba(10,18,40,0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 48px; opacity: 0; pointer-events: none; transition: opacity 260ms var(--ease-out); }
.s315 .mobile-menu.open { opacity: 1; pointer-events: auto; }
.s315 .mobile-menu nav { display: flex; flex-direction: column; gap: 20px; }
.s315 .mobile-menu nav a { font: 700 32px var(--font-sans); letter-spacing: -0.02em; color: var(--snow); cursor: pointer; }
.s315 .mobile-menu nav a:hover { color: var(--flame); }
.s315 .mm-close { position: absolute; right: 22px; top: 22px; background: transparent; border: 0; color: var(--snow); cursor: pointer; }
.s315 .mm-foot { position: absolute; left: 48px; right: 48px; bottom: 48px; display: flex; flex-direction: column; gap: 16px; }

/* ============================================================
   PAGE CONTAINER
   ============================================================ */
.s315 { padding-top: 0; }
.s315 .container { max-width: 2160px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 64px); }
.s315 .section { padding: 120px 0; }
.s315 .section.tight { padding: 80px 0; }
@media (max-width: 900px){ .s315 .section { padding: 64px 0; } }

/* breadcrumb */
.s315 .bc { display: flex; align-items: center; gap: 9px; font: 400 13px var(--font-sans); color: var(--fog); }
.s315 .bc a { color: var(--fog); cursor: pointer; }
.s315 .bc a:hover { color: var(--snow); }
.s315 .bc .cur { color: var(--snow); }

/* ============================================================
   A-01 HERO
   ============================================================ */
.s315 .hero { padding: 116px 0 96px; position: relative; }
.s315 .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 28px; align-items: start; }

/* gallery */
.s315 .gal { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 104px; }
.s315 .gal-main { position: relative; aspect-ratio: 1/1; border-radius: var(--r-4); overflow: hidden;
  background: radial-gradient(120% 120% at 50% 30%, #131d36 0%, #0A1228 55%, #05080f 100%);
  border: 1px solid var(--slate); cursor: zoom-in; }
.s315 .gal-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 9%;
  filter: drop-shadow(0 40px 50px rgba(0,0,0,0.55)); transition: transform 500ms var(--ease-out), opacity 350ms var(--ease-out); }
.s315 .gal-main:hover img { transform: scale(1.035); }
.s315 .gal-glow { position: absolute; left: 50%; bottom: 8%; width: 62%; height: 26px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(96,165,250,0.22), transparent 70%); filter: blur(8px); pointer-events: none; }
.s315 .gal-tag { position: absolute; left: 18px; top: 16px; font: 500 11px var(--font-mono); letter-spacing: 0.1em; color: var(--fg-muted); z-index: 2; }
.s315 .gal-zoom { position: absolute; right: 16px; bottom: 16px; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(10,18,40,0.7); border: 1px solid var(--slate); display: flex; align-items: center; justify-content: center;
  color: var(--snow); opacity: 0; transform: translateY(6px); transition: all 250ms var(--ease-out); z-index: 2; }
.s315 .gal-main:hover .gal-zoom { opacity: 1; transform: translateY(0); }
.s315 .gal-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.s315 .gthumb { position: relative; aspect-ratio: 1/1; border-radius: var(--r-3); overflow: hidden; cursor: pointer;
  background: linear-gradient(150deg, #131d36, #0a1020); border: 1.5px solid var(--slate); transition: border-color 200ms var(--ease-out); }
.s315 .gthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 12%; }
.s315 .gthumb.scene { display: flex; align-items: center; justify-content: center; }
.s315 .gthumb.scene .sc { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--fog); }
.s315 .gthumb.scene .sc span { font: 500 9px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
/* turntable video (main product visual) */
.s315 .gal-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: drop-shadow(0 40px 50px rgba(0,0,0,0.55)); }
/* opt-in: zoom + slight top-bias crops the bottom-right Veo watermark on generated turntables */
.s315 .gal-video.crop { transform: scale(1.05); transform-origin: center 44%; }
.s315 .gal-360 { position: absolute; right: 16px; bottom: 16px; padding: 6px 12px; border-radius: var(--r-pill);
  background: rgba(10,18,40,0.72); border: 1px solid var(--slate); color: var(--snow);
  font: 600 11px var(--font-mono); letter-spacing: 0.1em; z-index: 2; }

/* skeleton — заглушка на время проверки наличия 360°-видео (см. turntablePending
   в ApparatusApp.jsx): собственный постер аппарата, размытый + шиммер, а не
   чужой/другой контент, который потом резко подменяется */
.s315 .gal-skel { position: absolute; inset: 0; background-size: cover; background-position: center;
  filter: blur(10px) saturate(0.9) brightness(0.75); transform: scale(1.08); }
.s315 .gal-skel-shimmer { position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
  background-size: 200% 100%; animation: galSkelShimmer 1.4s ease-in-out infinite; }
@keyframes galSkelShimmer { 0% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .s315 .gal-skel-shimmer { animation: none; } }

/* custom video controls — play/pause + mute/unmute (замена немого
   неуправляемого <video>: inline gal-main и лайтбокс vlb-stage) */
.s315 .vctl { position: absolute; right: 14px; bottom: 14px; z-index: 5; display: flex; gap: 8px; }
.s315 .vctl-btn { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(10,18,40,0.62); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.14);
  cursor: pointer; transition: background 150ms, transform 150ms; }
.s315 .vctl-btn:hover { background: rgba(255,107,53,0.85); border-color: transparent; transform: scale(1.06); }
.s315 .vlb-stage .vctl { right: 20px; bottom: 20px; }
/* honest "photo of sibling platform" note (data.photoNote) */
.s315 .gal-note-badge { position: absolute; left: 18px; bottom: 16px; max-width: 60%; padding: 5px 10px;
  border-radius: var(--r-1); background: rgba(10,18,40,0.72); border: 1px solid var(--slate);
  color: var(--fg-muted); font: 500 10px/1.4 var(--font-mono); letter-spacing: 0.06em; z-index: 2; }
/* live-photo tabs + badge (ex-LIVE_STYLES, was JS-injected) */
.s315 .gal-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
.s315 .gal-tab { background: transparent; border: 1.5px solid var(--slate); color: var(--fog); font: 500 12px var(--font-mono);
  letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 14px; border-radius: 6px; cursor: pointer;
  transition: all 200ms; }
.s315 .gal-tab.active { background: var(--midnight-2, #0f1e3a); border-color: var(--snow); color: var(--snow); }
.s315 .live-tab .live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok, #4ade80);
  margin-right: 5px; animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }
.s315 .gal-live-badge { position: absolute; bottom: 12px; right: 12px; background: rgba(0,0,0,.7);
  border: 1px solid var(--ok, #4ade80); color: var(--ok, #4ade80); font: 500 11px var(--font-mono);
  letter-spacing: 0.12em; padding: 3px 8px; border-radius: 4px; }
.s315 .gthumb.vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10%; }
.s315 .gthumb-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; pointer-events: none; }
.s315 .gthumb-play svg { filter: drop-shadow(0 2px 6px rgba(0,0,0,0.7)); }
.s315 .gthumb:hover { border-color: var(--fg-muted); }
.s315 .gthumb.active { border-color: var(--flame); }
.s315 .gthumb .glabel { position: absolute; left: 0; right: 0; bottom: 0; padding: 5px 7px; font: 500 8.5px var(--font-mono);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); background: linear-gradient(transparent, rgba(5,8,15,0.85)); }

/* meta */
.s315 .meta { padding-top: 4px; }
.s315 .meta .sku { font: 500 12px var(--font-mono); letter-spacing: 0.1em; color: var(--fog); margin: 14px 0 10px; }
.s315 .meta .brand { font: 500 22px var(--font-sans); color: var(--fg-muted); letter-spacing: 0.01em; }
.s315 .meta .model { font: 700 88px/0.92 var(--font-sans); letter-spacing: -0.04em; color: var(--snow); margin: 2px 0 14px; }
.s315 .meta .lede { font: 400 18px/1.55 var(--font-sans); color: var(--fg-muted); max-width: 460px; margin: 0 0 26px; }

.s315 .spec-rows { display: flex; flex-direction: column; border-top: 1px solid var(--slate); margin-bottom: 26px; }
.s315 .spec-rows .sr { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid rgba(71,85,105,0.4); }
.s315 .spec-rows .sr .k { font: 400 14px var(--font-sans); color: var(--fg-muted); }
.s315 .spec-rows .sr .v { font: 500 14px var(--font-mono); color: var(--snow); letter-spacing: 0.01em; text-align: right; }
.s315 .spec-rows .sr .v.accent { color: var(--flame); }

.s315 .price-block { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 22px 0; border-top: 1px solid var(--slate); border-bottom: 1px solid var(--slate); margin-bottom: 24px; }
.s315 .price-block .pl { font: 500 11px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fog); }
.s315 .price-block .pv { font: 700 46px/1 var(--font-sans); letter-spacing: -0.02em; color: var(--flame); margin-top: 6px; }
.s315 .price-block .pv .cur { font-size: 26px; color: var(--flame); }
.s315 .price-block .pn { font: 400 12px var(--font-mono); color: var(--fog); margin-top: 7px; }
.s315 .price-block .stock { display: inline-flex; align-items: center; gap: 7px; font: 500 12px var(--font-mono); color: var(--ok); letter-spacing: 0.04em; }
.s315 .price-block .stock .d { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(16,185,129,0.18); }

.s315 .cta-col { display: flex; flex-direction: column; gap: 14px; }
.s315 .cta-secondrow { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.s315 .video-link { display: inline-flex; align-items: center; gap: 9px; background: transparent; border: 0; cursor: pointer;
  font: 500 15px var(--font-sans); color: var(--snow); padding: 4px 0; transition: color 180ms var(--ease-out); }
.s315 .video-link:hover { color: var(--flame); }
.s315 .video-link .pi { width: 24px; height: 24px; border-radius: 50%; background: var(--flame); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 200ms var(--ease-out); }
.s315 .video-link:hover .pi { transform: scale(1.08); }

.s315 .trust { display: flex; flex-wrap: wrap; gap: 18px 26px; margin-top: 26px; }
.s315 .trust .ti { display: flex; align-items: center; gap: 10px; font: 400 13px var(--font-sans); color: var(--fg-muted); }
.s315 .trust .ti svg { flex-shrink: 0; }

@media (max-width: 900px){
  .s315 .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .s315 .gal { position: static; }
  .s315 .meta .model { font-size: 56px; }
}
@media (max-width: 760px){
  .s315 .hero { padding: 96px 0 80px; }
  .s315 .bc > :nth-child(-n+4) { display: none; }
  .s315 .cta-secondrow { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ============================================================
   A-02 STICKY BAR
   ============================================================ */
.s315 .stickybar { position: fixed; top: 64px; left: 0; right: 0; z-index: 90; height: 72px;
  background: rgba(10,18,40,0.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(71,85,105,0.5); transform: translateY(-100%); transition: transform 320ms var(--ease-out); }
.s315 .stickybar.show { transform: translateY(0); }
.s315 .sb-in { max-width: 1280px; margin: 0 auto; padding: 0 32px; height: 72px; display: flex; align-items: center; gap: 16px; }
.s315 .sb-thumb { width: 48px; height: 48px; border-radius: 10px; background: radial-gradient(120% 120% at 50% 30%, #131d36, #05080f); border: 1px solid var(--slate); overflow: hidden; flex-shrink: 0; position: relative; }
.s315 .sb-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.s315 .sb-name { font: 700 16px var(--font-sans); color: var(--snow); letter-spacing: -0.01em; }
.s315 .sb-spec { font: 400 12px var(--font-mono); color: var(--fog); letter-spacing: 0.02em; margin-top: 2px; }
.s315 .sb-price { font: 500 16px var(--font-mono); color: var(--snow); margin-left: 10px; }
.s315 .sb-price b { color: var(--flame); font-weight: 500; }
.s315 .sb-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.s315 .sb-mobileprice { display: none; }
@media (max-width: 760px){
  .s315 .stickybar { top: auto; bottom: 0; height: auto; transform: translateY(120%); border-bottom: 0; border-top: 1px solid rgba(71,85,105,0.5); }
  .s315 .stickybar.show { transform: translateY(0); }
  .s315 .sb-in { height: auto; padding: 12px 20px; }
  .s315 .sb-thumb, .s315 .sb-name, .s315 .sb-spec, .s315 .sb-price { display: none; }
  .s315 .sb-mobileprice { display: block; }
  .s315 .sb-mobileprice .l { font: 500 10px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fog); }
  .s315 .sb-mobileprice .v { font: 700 18px var(--font-sans); color: var(--flame); }
  .s315 .sb-cta { margin-left: auto; }
  .s315 .sb-cta .pdf-ghost { display: none; }
}

/* ============================================================
   PLACEHOLDER BLOCKS (to detail next)
   ============================================================ */
.s315 .ph-block { border-top: 1px solid rgba(71,85,105,0.35); }
.s315 .ph-block .container { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.s315 .ph-head { display: flex; align-items: center; gap: 16px; }
.s315 .ph-code { font: 500 12px var(--font-mono); letter-spacing: 0.1em; color: var(--flame); }
.s315 .ph-name { font: 700 30px/1.1 var(--font-sans); letter-spacing: -0.02em; color: var(--snow); }
.s315 .ph-tag { font: 500 11px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fog); padding: 6px 12px; border: 1px dashed var(--slate); border-radius: var(--r-pill); }
.s315 .ph-block.alt { background: var(--steel); }

/* ============================================================
   MODALS (request + video)
   ============================================================ */
.s315 .overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: rgba(10,18,40,0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none; transition: opacity 280ms var(--ease-out); padding: 24px; }
.s315 .overlay.open { opacity: 1; pointer-events: auto; }

.s315 .modal { width: 640px; max-width: 100%; max-height: 90vh; overflow-y: auto; background: var(--cloud); color: var(--ink);
  border-radius: var(--r-4); padding: 40px; transform: scale(0.95) translateY(8px); transition: transform 280ms var(--ease-out); position: relative; }
.s315 .overlay.open .modal { transform: scale(1) translateY(0); }
.s315 .modal-close { position: absolute; right: 20px; top: 20px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--mist); background: white; color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 180ms var(--ease-out); }
.s315 .modal-close:hover { background: var(--ink); color: white; }
.s315 .modal h2 { font: 700 28px/1.15 var(--font-sans); letter-spacing: -0.02em; margin: 0 0 6px; color: var(--ink); }
.s315 .modal .msub { font: 400 14px var(--font-mono); color: var(--fog); letter-spacing: 0.02em; margin-bottom: 26px; }
.s315 .field { margin-bottom: 16px; }
.s315 .field label { display: block; font: 500 13px var(--font-sans); color: var(--fog); margin-bottom: 7px; }
.s315 .field input, .s315 .field textarea { width: 100%; height: 52px; padding: 0 16px; border: 1.5px solid var(--mist); border-radius: var(--r-2);
  font: 400 15px var(--font-sans); color: var(--ink); background: white; outline: none; transition: border-color 180ms var(--ease-out); }
.s315 .field textarea { height: 92px; padding: 14px 16px; resize: vertical; }
.s315 .field input:focus, .s315 .field textarea:focus { border-color: var(--electric); }
.s315 .modal .consent { font: 400 12px/1.5 var(--font-sans); color: var(--fog); margin-top: 16px; }
.s315 .modal .consent a { color: var(--electric); }
.s315 .modal-success { text-align: center; padding: 30px 10px; }
.s315 .modal-success .ok-ring { width: 76px; height: 76px; border-radius: 50%; background: rgba(16,185,129,0.12); display: flex; align-items: center; justify-content: center; margin: 0 auto 22px; }
.s315 .modal-success h2 { margin-bottom: 10px; }
.s315 .modal-success p { font: 400 15px/1.6 var(--font-sans); color: var(--fog); max-width: 380px; margin: 0 auto; }

/* video lightbox */
.s315 .vlb { position: fixed; inset: 0; z-index: 210; background: rgba(3,5,11,0.94); display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 300ms var(--ease-out); }
.s315 .vlb.open { opacity: 1; pointer-events: auto; }
.s315 .vlb-stage { width: min(1180px, 92vw); aspect-ratio: 16/9; border-radius: var(--r-4); overflow: hidden; position: relative;
  background: radial-gradient(120% 120% at 50% 40%, #0e1830, #05080f); border: 1px solid var(--slate); transform: scale(0.96); transition: transform 320ms var(--ease-out); }
.s315 .vlb.open .vlb-stage { transform: scale(1); }
.s315 .vlb-poster { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.s315 .vlb-play { width: 96px; height: 96px; border-radius: 50%; background: var(--flame); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 0 rgba(255,107,53,0.5); animation: vpulse 2.4s var(--ease-out) infinite; cursor: pointer; }
@keyframes vpulse { 0%{ box-shadow: 0 0 0 0 rgba(255,107,53,0.4);} 70%{ box-shadow: 0 0 0 26px rgba(255,107,53,0);} 100%{ box-shadow: 0 0 0 0 rgba(255,107,53,0);} }
.s315 .vlb-subs { position: absolute; left: 24px; bottom: 24px; display: flex; gap: 10px; flex-wrap: wrap; }
.s315 .vlb-sub { font: 500 12px var(--font-mono); letter-spacing: 0.06em; color: var(--snow); background: rgba(10,18,40,0.7); border: 1px solid var(--slate); padding: 7px 12px; border-radius: var(--r-pill); }
.s315 .vlb-sub b { color: var(--flame); font-weight: 500; }
.s315 .vlb-meta { position: absolute; left: 24px; top: 24px; font: 500 12px var(--font-mono); letter-spacing: 0.08em; color: var(--fg-muted); text-transform: uppercase; }
.s315 .vlb-close { position: absolute; right: 24px; top: 24px; width: 48px; height: 48px; border-radius: 50%; background: rgba(10,18,40,0.7); border: 1px solid var(--slate); color: var(--snow); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; transition: all 180ms var(--ease-out); }
.s315 .vlb-close:hover { background: var(--flame); border-color: var(--flame); }

/* reveal on scroll */
.s315 .reveal { opacity: 0; transform: translateY(24px); transition: opacity 650ms var(--ease-out), transform 650ms var(--ease-out); }
.s315 .reveal.in { opacity: 1; transform: none; }

/* ============================================================
   VIEWPORT TWEAK — Desktop / Mobile device frame
   a 390px column regardless of the real window width.
   ============================================================ */
  radial-gradient(120% 90% at 50% 0%, #0a1430 0%, #04070f 60%, #02040a 100%); }

/* the page becomes a centered 390px column */
  background: var(--midnight); box-shadow: 0 0 0 1px rgba(71,85,105,0.6), 0 50px 120px rgba(0,0,0,0.65); }

/* decorative bezel framing the visible viewport */
  pointer-events: none; z-index: 120; border-left: 1px solid rgba(148,163,184,0.18); border-right: 1px solid rgba(148,163,184,0.18);
  box-shadow: inset 0 0 0 1px rgba(148,163,184,0.05); }
  background: #04070f; border-radius: 0 0 16px 16px; box-shadow: 0 1px 0 rgba(148,163,184,0.15); }

/* constrain fixed chrome to the column */

/* в”Ђв”Ђ class-driven mobile layout (mirrors the @media rules) в”Ђв”Ђ */


/* drama tweak shouldn't blow up the mobile title */

/* mobile sticky в†’ bottom bar (class-driven) */

/* mobile modal full-width inside column */

/* ============================================================
   TWEAKS — expressive controls (reshape the feel)
   ============================================================ */

/* ── Атмосфера сцены: студия / кинотеатр / чертёж ── */
.s315 .mood-cinema .gal-main { background: radial-gradient(115% 105% at 50% 22%, #1c130b 0%, #0A1228 46%, #03050b 100%); }
.s315 .mood-cinema .gal-glow { background: radial-gradient(ellipse at center, rgba(255,107,53,0.34), transparent 70%); height: 34px; }
.s315 .mood-cinema .gal-main::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(125% 110% at 50% 42%, transparent 38%, rgba(0,0,0,0.7) 100%); }
.s315 .mood-cinema .sb-thumb { background: radial-gradient(120% 120% at 50% 30%, #1c130b, #03050b); }

.s315 .mood-blueprint .gal-main { background: linear-gradient(160deg, #0b1838 0%, #070f24 100%); }
.s315 .mood-blueprint .gal-main::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: linear-gradient(rgba(59,130,246,0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(59,130,246,0.16) 1px, transparent 1px);
  background-size: 30px 30px; -webkit-mask-image: radial-gradient(100% 100% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(100% 100% at 50% 50%, #000 55%, transparent 100%); }
.s315 .mood-blueprint .gal-glow { background: radial-gradient(ellipse at center, rgba(59,130,246,0.4), transparent 70%); }
.s315 .mood-blueprint .gal-main img { filter: drop-shadow(0 30px 44px rgba(0,0,0,0.5)) saturate(1.05); }

/* ── Энергия акцента: сдержанный / фирменный / максимум ── */
.s315 .accent-restrained .eyebrow span { color: var(--fg-muted) !important; }
.s315 .accent-restrained .price-block .pv,
.s315 .accent-restrained .price-block .pv .cur { color: var(--snow); }
.s315 .accent-restrained .gal-glow { opacity: 0; }
.s315 .accent-restrained .gthumb.active { border-color: var(--snow); }
.s315 .accent-restrained .sb-price b { color: var(--snow); }

.s315 .accent-max .gal-glow { filter: blur(12px); transform: translateX(-50%) scale(1.35); opacity: 1; }
.s315 .accent-max .gal-main { box-shadow: inset 0 0 90px rgba(255,107,53,0.08); }
.s315 .accent-max .gthumb.active { box-shadow: 0 0 0 1px var(--flame), 0 0 22px rgba(255,107,53,0.4); }
.s315 .accent-max .price-block .pv { text-shadow: 0 0 26px rgba(255,107,53,0.45); }
.s315 .accent-max .sb-price b { text-shadow: 0 0 16px rgba(255,107,53,0.5); }
.s315 .accent-max .meta .sku,
.s315 .accent-max .price-block .pl { color: var(--flame); }

/* ── Драма заголовка: спокойный / экспрессивный ── */
@media (min-width: 901px) {
  .s315 .drama-calm .meta .model { font-size: 72px; letter-spacing: -0.03em; }
  .s315 .drama-calm .meta .lede { font-size: 17px; }
  .s315 .drama-calm .price-block .pv { font-size: 40px; }
  .s315 .drama-expressive .meta .model { font-size: 104px; letter-spacing: -0.05em; }
  .s315 .drama-expressive .price-block .pv { font-size: 54px; }
  .s315 .drama-expressive .meta .lede { max-width: 430px; }
}

/* ============================================================
   A-04 DATASHEET (Bosch/Hilti style)
   ============================================================ */
.s315 .ds { background: var(--midnight); }
.s315 .ds-head { max-width: 860px; }
.s315 .ds-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 14px; flex-wrap: wrap; }
.s315 .ds-title { font: 700 clamp(34px, 4vw, 52px)/1.05 var(--font-sans); letter-spacing: -0.03em; color: var(--snow); margin: 0; }
.s315 .ds-meta { display: flex; align-items: center; gap: 14px; font: 500 13px var(--font-mono); color: var(--fog); letter-spacing: 0.04em; }
.s315 .ds-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--slate); }
.s315 .ds-pdf { display: inline-flex; align-items: center; gap: 7px; color: var(--snow); cursor: pointer; padding: 6px 12px; border: 1px solid var(--slate); border-radius: var(--r-pill); transition: all 180ms var(--ease-out); }
.s315 .ds-pdf:hover { border-color: var(--flame); color: var(--flame); }

.s315 .ds-groups { margin-top: 48px; max-width: 860px; }
.s315 .ds-group { border-top: 1px solid var(--slate); }
.s315 .ds-group:last-of-type { border-bottom: 1px solid var(--slate); }
.s315 .ds-ghead { width: 100%; display: flex; align-items: center; gap: 18px; padding: 26px 4px; background: transparent; border: 0; cursor: pointer; text-align: left; transition: padding 200ms var(--ease-out); }
.s315 .ds-gnum { font: 500 13px var(--font-mono); color: var(--flame); letter-spacing: 0.08em; flex-shrink: 0; width: 28px; }
.s315 .ds-gtitle { font: 600 22px var(--font-sans); letter-spacing: -0.01em; color: var(--snow); flex: 1; }
.s315 .ds-gcount { font: 500 12px var(--font-mono); color: var(--fog); padding: 4px 10px; border: 1px solid var(--slate); border-radius: var(--r-pill); }
.s315 .ds-gchev { color: var(--fg-muted); display: flex; transition: transform 280ms var(--ease-out); }
.s315 .ds-ghead.is-open .ds-gchev { transform: rotate(90deg); color: var(--flame); }
.s315 .ds-ghead:hover .ds-gtitle { color: var(--flame); }

.s315 .ds-rows { overflow: hidden; transition: max-height 360ms var(--ease-out); }
.s315 .ds-row { display: flex; align-items: baseline; gap: 16px; padding: 14px 4px 14px 46px; border-top: 1px solid rgba(71,85,105,0.32); }
.s315 .ds-row:first-child { border-top: 1px solid rgba(71,85,105,0.32); }
.s315 .ds-k { font: 400 15px var(--font-sans); color: var(--fg-muted); flex-shrink: 0; max-width: 46%; }
.s315 .ds-lead { flex: 1; border-bottom: 1px dotted rgba(71,85,105,0.5); position: relative; top: -4px; min-width: 20px; }
.s315 .ds-v { font: 500 15px var(--font-mono); color: var(--snow); letter-spacing: 0.01em; text-align: right; flex-shrink: 0; }
.s315 .ds-v.accent { color: var(--flame); }

.s315 .ds-foot { display: flex; align-items: flex-start; gap: 11px; margin-top: 32px; max-width: 720px; font: 400 13px/1.6 var(--font-sans); color: var(--fog); }
.s315 .ds-foot svg { flex-shrink: 0; margin-top: 2px; }

/* mobile datasheet */

/* ============================================================
   A-05 TCO CALCULATOR
   ============================================================ */
.s315 .tco { background: var(--steel); }
.s315 .tco-head { max-width: 720px; }
.s315 .tco-title { font: 700 clamp(34px, 4vw, 52px)/1.06 var(--font-sans); letter-spacing: -0.03em; color: var(--snow); margin: 14px 0 14px; }
.s315 .tco-sub { font: 400 18px/1.6 var(--font-sans); color: var(--fg-muted); }

.s315 .tco-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; align-items: stretch; }

/* controls */
.s315 .tco-controls { background: var(--midnight); border: 1px solid var(--slate); border-radius: var(--r-4); padding: 32px; display: flex; flex-direction: column; gap: 28px; }
.s315 .tco-ctl-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.s315 .tco-ctl-top label { font: 500 14px var(--font-sans); color: var(--snow); }
.s315 .tco-ctl-top output { font: 600 22px var(--font-mono); color: var(--flame); letter-spacing: -0.01em; }
.s315 .tco-ctl-top output span { font-size: 14px; color: var(--fog); }

/* slider */
.s315 .tco-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; outline: none; cursor: pointer;
  background: linear-gradient(to right, var(--flame) var(--p, 20%), var(--slate) var(--p, 20%)); }
.s315 .tco-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--snow); border: 3px solid var(--flame); cursor: grab; box-shadow: 0 2px 8px rgba(0,0,0,0.4); transition: transform 120ms var(--ease-out); }
.s315 .tco-slider::-webkit-slider-thumb:active { transform: scale(1.15); cursor: grabbing; }
.s315 .tco-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--snow); border: 3px solid var(--flame); cursor: grab; }
.s315 .tco-scale { display: flex; justify-content: space-between; margin-top: 10px; font: 400 11px var(--font-mono); color: var(--fog); letter-spacing: 0.04em; }

/* chips */
.s315 .tco-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.s315 .tco-chip { height: 48px; border-radius: var(--r-2); border: 1.5px solid var(--slate); background: transparent; color: var(--fg-muted); font: 500 15px var(--font-sans); cursor: pointer; transition: all 180ms var(--ease-out); }
.s315 .tco-chip:hover { border-color: var(--fg-muted); color: var(--snow); }
.s315 .tco-chip.on { border-color: var(--flame); background: rgba(255,107,53,0.1); color: var(--snow); }

/* stepper */
.s315 .tco-stepper { display: flex; align-items: stretch; border: 1.5px solid var(--slate); border-radius: var(--r-2); overflow: hidden; }
.s315 .tco-stepper button { width: 56px; background: transparent; border: 0; color: var(--snow); font: 400 24px var(--font-sans); cursor: pointer; transition: background 160ms var(--ease-out); }
.s315 .tco-stepper button:hover { background: rgba(255,107,53,0.12); color: var(--flame); }
.s315 .tco-step-val { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 0; border-left: 1.5px solid var(--slate); border-right: 1.5px solid var(--slate); }
.s315 .tco-step-val span { font: 600 22px var(--font-mono); color: var(--snow); }
.s315 .tco-step-val em { font: 400 11px var(--font-mono); color: var(--fog); font-style: normal; letter-spacing: 0.04em; margin-top: 2px; }

/* assumptions toggle */
.s315 .tco-calc-toggle { display: flex; align-items: center; gap: 8px; background: transparent; border: 0; color: var(--fg-muted); font: 500 13px var(--font-sans); cursor: pointer; padding: 0; margin-top: -4px; }
.s315 .tco-calc-toggle:hover { color: var(--snow); }
.s315 .tco-calc-chev { display: inline-flex; transition: transform 240ms var(--ease-out); }
.s315 .tco-calc-chev.open { transform: rotate(90deg); }
.s315 .tco-assump { display: flex; flex-direction: column; gap: 9px; padding: 16px; background: var(--steel); border-radius: var(--r-3); border: 1px solid var(--slate); }
.s315 .tco-assump div { display: flex; justify-content: space-between; font: 400 13px var(--font-sans); color: var(--fg-muted); }
.s315 .tco-assump b { color: var(--snow); font-weight: 500; font-size: 12px; }

/* result */
.s315 .tco-result { background: linear-gradient(160deg, rgba(255,107,53,0.14), rgba(255,107,53,0.04) 60%, transparent); border: 1px solid rgba(255,107,53,0.4); border-radius: var(--r-4); padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.s315 .tco-hero { }
.s315 .tco-hero-label { font: 500 12px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); }
.s315 .tco-hero-val { font: 700 76px/0.95 var(--font-sans); letter-spacing: -0.04em; color: var(--snow); margin-top: 10px; display: flex; align-items: baseline; flex-wrap: wrap; }
.s315 .tco-hero-val .cur { font-size: 40px; color: var(--flame); }
.s315 .tco-hero-val .per { font: 500 16px var(--font-mono); color: var(--fog); margin-left: 10px; letter-spacing: 0; }
.s315 .tco-hero-note { font: 400 13px var(--font-mono); color: var(--fog); margin-top: 10px; letter-spacing: 0.02em; }

.s315 .tco-substats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.s315 .tco-stat { background: rgba(10,18,40,0.4); border: 1px solid var(--slate); border-radius: var(--r-3); padding: 16px; }
.s315 .tco-stat-l { font: 500 11px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fog); }
.s315 .tco-stat-v { font: 700 26px var(--font-sans); color: var(--snow); letter-spacing: -0.02em; margin-top: 6px; }
.s315 .tco-stat-v span { font: 500 14px var(--font-mono); color: var(--fog); }

.s315 .tco-break { margin-top: 2px; }
.s315 .tco-break-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; gap: 2px; }
.s315 .tco-break-bar span { transition: width 600ms var(--ease-out); }
.s315 .tco-break-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; }
.s315 .tco-break-legend span { display: inline-flex; align-items: center; gap: 7px; font: 400 12px var(--font-sans); color: var(--fg-muted); }
.s315 .tco-break-legend i { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }

/* comparison */
.s315 .tco-compare { margin-top: 24px; background: var(--midnight); border: 1px solid var(--slate); border-radius: var(--r-4); padding: 32px; }
.s315 .tco-compare-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.s315 .tco-compare-head h3 { font: 600 20px var(--font-sans); color: var(--snow); letter-spacing: -0.01em; margin: 0; }
.s315 .tco-savings { font: 400 14px var(--font-sans); color: var(--fg-muted); }
.s315 .tco-savings b { color: var(--ok); font-weight: 600; font-size: 16px; margin-left: 6px; }
.s315 .tco-savings.is-neg { color: var(--fg-muted); }
.s315 .tco-savings.is-neg b { color: var(--warn); }
.s315 .tco-tag { display: inline-flex; align-items: center; font: 600 9.5px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--snow); background: var(--flame); padding: 2px 7px; border-radius: var(--r-pill); margin-left: 9px; font-style: normal; vertical-align: middle; }
.s315 .tco-bars { display: flex; flex-direction: column; gap: 14px; }
.s315 .tco-barrow { display: grid; grid-template-columns: 180px 1fr 110px; align-items: center; gap: 18px; }
.s315 .tco-barlabel { font: 500 14px var(--font-sans); color: var(--snow); }
.s315 .tco-bartrack { height: 36px; background: rgba(71,85,105,0.25); border-radius: var(--r-2); overflow: hidden; }
.s315 .tco-barfill { height: 100%; border-radius: var(--r-2); background: var(--slate); transition: width 600ms var(--ease-out); }
.s315 .tco-barfill.alt { background: var(--electric); }
.s315 .tco-barfill.mute { background: var(--steel); outline: 1px solid var(--slate); outline-offset: -1px; }
.s315 .tco-barrow.win .tco-barfill { background: var(--flame); }
.s315 .tco-barrow.win .tco-barlabel { color: var(--flame); font-weight: 600; }
.s315 .tco-barval { font-size: 14px; color: var(--snow); text-align: right; }

/* mobile TCO */

/* ============================================================
   A-06 КОМПЛЕКТ РџРћРЎРўРђР’РљР
   ============================================================ */
.s315 .kit { background: var(--midnight); }
.s315 .kit-head { max-width: 760px; }
.s315 .kit-head-row { display: flex; align-items: center; gap: 18px; margin-top: 14px; }
.s315 .kit-title { font: 700 clamp(34px, 4vw, 52px)/1.05 var(--font-sans); letter-spacing: -0.03em; color: var(--snow); margin: 0; }
.s315 .kit-count { font: 500 12px var(--font-mono); color: var(--fog); letter-spacing: 0.06em; padding: 6px 12px; border: 1px solid var(--slate); border-radius: var(--r-pill); white-space: nowrap; }
.s315 .kit-sub { font: 400 18px/1.6 var(--font-sans); color: var(--fg-muted); margin: 16px 0 0; }

.s315 .kit-group { margin-top: 44px; }
.s315 .kit-group-label { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.s315 .kgl-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.s315 .kgl-dot.in { background: var(--ok); box-shadow: 0 0 0 3px rgba(16,185,129,0.16); }
.s315 .kgl-dot.opt { background: var(--electric); box-shadow: 0 0 0 3px rgba(59,130,246,0.16); }
.s315 .kgl-t { font: 600 16px var(--font-sans); color: var(--snow); letter-spacing: -0.01em; }
.s315 .kgl-n { font: 500 12px var(--font-mono); color: var(--fog); padding: 3px 9px; border: 1px solid var(--slate); border-radius: var(--r-pill); }
.s315 .kgl-rule { flex: 1; height: 1px; background: rgba(71,85,105,0.4); }
.s315 .kgl-note { font: 400 12px var(--font-mono); color: var(--fog); letter-spacing: 0.02em; }

.s315 .kit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.s315 .kit-card { background: var(--steel); border: 1px solid var(--slate); border-radius: var(--r-4); padding: 24px;
  display: flex; flex-direction: column; gap: 18px; min-height: 180px; position: relative; overflow: hidden;
  transition: border-color 240ms var(--ease-out), transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out); }
.s315 .kit-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 90% at 18% 0%, rgba(255,107,53,0.1), transparent 60%); transition: opacity 240ms var(--ease-out); }
.s315 .kit-card:hover { border-color: rgba(255,107,53,0.5); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,0.32); }
.s315 .kit-card:hover::after { opacity: 1; }

.s315 .kit-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.s315 .kit-ico { width: 56px; height: 56px; border-radius: var(--r-3); flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #1b2740, #121b30); border: 1px solid var(--slate); color: var(--snow); transition: all 240ms var(--ease-out); }
.s315 .kit-card:hover .kit-ico { border-color: rgba(255,107,53,0.6); color: var(--flame); transform: scale(1.04); }

.s315 .kit-badge { display: inline-flex; align-items: center; gap: 5px; font: 500 10.5px var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase;
  padding: 5px 9px; border-radius: var(--r-pill); white-space: nowrap; }
.s315 .kit-badge.in  { color: var(--ok); background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.32); }
.s315 .kit-badge.opt { color: var(--sky); background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.32); }
.s315 .kit-badge.add { color: var(--fg-muted); background: rgba(148,163,184,0.08); border: 1px solid var(--slate); }

.s315 .kit-card-body { margin-top: auto; }
.s315 .kit-name { font: 600 17px/1.25 var(--font-sans); color: var(--snow); letter-spacing: -0.01em; margin: 0 0 7px; }
.s315 .kit-desc { font: 400 13.5px/1.5 var(--font-sans); color: var(--fg-muted); margin: 0; text-wrap: pretty; }

/* mobile kit */
@media (max-width: 1100px){ .s315 .kit-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   A-07 ДОКУМЕНТАЦРРЇ РСЕРТРР¤РРљРђРўР«
   ============================================================ */
.s315 .docs { background: var(--steel); }
.s315 .docs-head { max-width: 760px; }
.s315 .docs-head-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 14px; flex-wrap: wrap; }
.s315 .docs-title { font: 700 clamp(34px, 4vw, 52px)/1.05 var(--font-sans); letter-spacing: -0.03em; color: var(--snow); margin: 0; }
.s315 .docs-all { display: inline-flex; align-items: center; gap: 8px; font: 500 14px var(--font-sans); color: var(--snow); cursor: pointer; padding: 9px 16px; border: 1px solid var(--slate); border-radius: var(--r-pill); transition: all 180ms var(--ease-out); white-space: nowrap; }
.s315 .docs-all:hover { border-color: var(--flame); color: var(--flame); }
.s315 .docs-sub { font: 400 18px/1.6 var(--font-sans); color: var(--fg-muted); margin: 16px 0 0; }

.s315 .docs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 44px; }

.s315 .doc-card { display: flex; align-items: center; gap: 18px; padding: 20px 22px; background: var(--midnight);
  border: 1px solid var(--slate); border-radius: var(--r-4); cursor: pointer; text-decoration: none;
  transition: border-color 220ms var(--ease-out), transform 220ms var(--ease-out), background 220ms var(--ease-out); }
.s315 .doc-card:hover { border-color: rgba(255,107,53,0.5); transform: translateY(-2px); }
.s315 .doc-card.is-accent { border-color: rgba(255,107,53,0.35); background: linear-gradient(120deg, rgba(255,107,53,0.07), transparent 70%); }

.s315 .doc-ico { width: 50px; height: 50px; border-radius: var(--r-3); flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #1b2740, #121b30); border: 1px solid var(--slate); color: var(--snow); transition: all 220ms var(--ease-out); }
.s315 .doc-card:hover .doc-ico { color: var(--flame); border-color: rgba(255,107,53,0.5); }
.s315 .doc-card.is-accent .doc-ico { color: var(--flame); }

.s315 .doc-body { flex: 1; min-width: 0; }
.s315 .doc-name { font: 600 16px var(--font-sans); color: var(--snow); letter-spacing: -0.01em; }
.s315 .doc-sub { font: 400 13px/1.4 var(--font-sans); color: var(--fg-muted); margin-top: 3px; text-wrap: pretty; }

.s315 .doc-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.s315 .doc-meta { font: 500 12px var(--font-mono); color: var(--fog); letter-spacing: 0.03em; white-space: nowrap; }
.s315 .doc-dl { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--slate); color: var(--snow); transition: all 200ms var(--ease-out); }
.s315 .doc-card:hover .doc-dl { background: var(--flame); border-color: var(--flame); color: var(--snow); transform: translateY(2px); }

/* mobile docs */
@media (max-width: 920px){ .s315 .docs-grid { grid-template-columns: 1fr; } }

/* ============================================================
   A-08 РџРћРҐРћР–РР• МОДЕЛР(carousel + comparison)
   ============================================================ */
.s315 .sim { background: var(--midnight); }
.s315 .sim-head { max-width: 760px; }
.s315 .sim-head-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 14px; }
.s315 .sim-title { font: 700 clamp(34px, 4vw, 52px)/1.05 var(--font-sans); letter-spacing: -0.03em; color: var(--snow); margin: 0; }
.s315 .sim-nav { display: flex; gap: 10px; }
.s315 .sim-arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--slate); background: transparent; color: var(--snow); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 180ms var(--ease-out); }
.s315 .sim-arrow:hover { border-color: var(--flame); color: var(--flame); }
.s315 .sim-sub { font: 400 18px/1.6 var(--font-sans); color: var(--fg-muted); margin: 16px 0 0; }

/* rail */
.s315 .sim-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(290px, 1fr); gap: 18px; margin-top: 44px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: thin; scrollbar-color: var(--slate) transparent; }
.s315 .sim-rail::-webkit-scrollbar { height: 6px; }
.s315 .sim-rail::-webkit-scrollbar-thumb { background: var(--slate); border-radius: 999px; }
.s315 .sim-card { scroll-snap-align: start; background: var(--steel); border: 1px solid var(--slate); border-radius: var(--r-4); overflow: hidden;
  cursor: pointer; text-decoration: none; display: flex; flex-direction: column; transition: border-color 220ms var(--ease-out), transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out); }
.s315 .sim-card:hover { border-color: rgba(255,107,53,0.5); transform: translateY(-3px); box-shadow: 0 20px 44px rgba(0,0,0,0.34); }
.s315 .sim-card-media { position: relative; aspect-ratio: 4/3; background: radial-gradient(120% 110% at 50% 28%, #131d36, #070d1c); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--slate); }
.s315 .sim-card-media img { width: 100%; height: 100%; object-fit: contain; padding: 14%; transition: transform 400ms var(--ease-out); filter: drop-shadow(0 18px 22px rgba(0,0,0,0.5)); }
.s315 .sim-card:hover .sim-card-media img { transform: scale(1.06); }
.s315 .sim-badge { position: absolute; left: 14px; top: 14px; font: 500 10px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--snow); background: var(--flame); padding: 4px 9px; border-radius: var(--r-pill); }
.s315 .sim-note { position: absolute; right: 14px; top: 14px; font: 500 10px var(--font-mono); letter-spacing: 0.06em; color: var(--fg-muted); }

.s315 .sim-card-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.s315 .sim-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.s315 .sim-brand { font: 500 12px var(--font-mono); color: var(--fog); letter-spacing: 0.04em; }
.s315 .sim-model { font: 700 32px/1 var(--font-sans); letter-spacing: -0.03em; color: var(--snow); margin-top: 3px; }
.s315 .sim-diam { font: 500 12px var(--font-mono); color: var(--snow); text-align: right; padding: 5px 10px; border: 1px solid var(--slate); border-radius: var(--r-pill); white-space: nowrap; }
.s315 .sim-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(71,85,105,0.4); }
.s315 .sim-price { font: 600 18px var(--font-sans); color: var(--flame); letter-spacing: -0.01em; }
.s315 .sim-go { display: inline-flex; align-items: center; gap: 5px; font: 500 13px var(--font-sans); color: var(--snow); }
.s315 .sim-card:hover .sim-go { color: var(--flame); }

/* comparison table */
.s315 .cmp { margin-top: 36px; border: 1px solid var(--slate); border-radius: var(--r-4); background: var(--steel); overflow: hidden; }
.s315 .cmp-scroll { overflow-x: auto; }
.s315 .cmp-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.s315 .cmp-table th, .s315 .cmp-table td { padding: 16px 18px; text-align: left; }
.s315 .cmp-rowhead { font: 400 14px var(--font-sans); color: var(--fg-muted); white-space: nowrap; width: 190px; }
.s315 .cmp-table thead th { border-bottom: 1px solid var(--slate); vertical-align: bottom; padding-top: 34px; }
.s315 .cmp-col { position: relative; }
.s315 .cmp-colbrand { display: block; font: 500 11px var(--font-mono); color: var(--fog); letter-spacing: 0.04em; }
.s315 .cmp-colmodel { display: block; font: 700 22px var(--font-sans); letter-spacing: -0.02em; color: var(--snow); margin-top: 2px; }
.s315 .cmp-col.is-self { background: rgba(255,107,53,0.08); border-radius: var(--r-2) var(--r-2) 0 0; }
.s315 .cmp-col.is-self .cmp-colmodel { color: var(--flame); }
.s315 .cmp-youtag { position: absolute; top: 12px; left: 18px; font: 500 9px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--flame); }
.s315 .cmp-table tbody tr { border-bottom: 1px solid rgba(71,85,105,0.32); }
.s315 .cmp-table tbody tr:last-child { border-bottom: 0; }
.s315 .cmp-cell { font: 500 14px var(--font-mono); color: var(--snow); letter-spacing: 0.01em; white-space: nowrap; }
.s315 .cmp-cell.is-self { background: rgba(255,107,53,0.08); color: var(--snow); font-weight: 600; }
.s315 .cmp-cell.is-diff { color: var(--sky); }
.s315 .cmp-cell.is-diff::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--electric); margin-right: 8px; vertical-align: middle; }
.s315 .cmp-legend { display: flex; align-items: center; gap: 9px; padding: 14px 18px; border-top: 1px solid var(--slate); font: 400 12px var(--font-mono); color: var(--fog); letter-spacing: 0.02em; }
.s315 .cmp-legend-chip { width: 10px; height: 10px; border-radius: 3px; background: var(--electric); }

/* mobile similar */

/* ============================================================
   A-09 CTA-ПОЛОСА
   ============================================================ */
.s315 .cta-strip { background: var(--flame); position: relative; overflow: hidden; padding: 96px 0; }
.s315 .cta-strip::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 140% at 85% 10%, rgba(255,255,255,0.16), transparent 55%); }
.s315 .cta-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; position: relative; }
.s315 .cta-copy .eyebrow { margin-bottom: 16px; }
.s315 .cta-title { font: 700 clamp(36px, 4.6vw, 60px)/1.04 var(--font-sans); letter-spacing: -0.03em; color: var(--snow); margin: 0; }
.s315 .cta-sub { font: 400 18px/1.6 var(--font-sans); color: rgba(255,255,255,0.88); margin: 18px 0 0; max-width: 460px; }
.s315 .cta-actions { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.s315 .cta-actions .btn-dark { box-shadow: 0 14px 34px rgba(10,18,40,0.35); }
.s315 .cta-tg { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 28px; border-radius: var(--r-2);
  border: 1.5px solid rgba(255,255,255,0.75); color: var(--snow); font: 500 16px var(--font-sans); cursor: pointer; transition: all 200ms var(--ease-out); }
.s315 .cta-tg:hover { background: rgba(255,255,255,0.14); border-color: var(--snow); }
.s315 .cta-reassure { display: inline-flex; align-items: center; gap: 9px; font: 500 13px var(--font-mono); color: rgba(255,255,255,0.85); letter-spacing: 0.02em; margin-top: 4px; }
.s315 .cta-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--snow); box-shadow: 0 0 0 3px rgba(255,255,255,0.3); animation: ctaPulse 2.2s var(--ease-out) infinite; }
@keyframes ctaPulse { 0%,100%{ opacity: 1; } 50%{ opacity: 0.4; } }

@media (max-width: 880px){ .s315 .cta-inner { grid-template-columns: 1fr; gap: 32px; } }

/* ============================================================
   A-10 FOOTER
   ============================================================ */
.s315 .ft { background: var(--ink); padding: 0 0 40px; }
.s315 .ft-promo { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 30px 32px; margin: -40px 0 64px; background: var(--steel); border: 1px solid var(--slate); border-radius: var(--r-4);
  position: relative; z-index: 1; box-shadow: var(--shadow-2); }
.s315 .ft-promo-t { font: 700 24px var(--font-sans); letter-spacing: -0.02em; color: var(--snow); }
.s315 .ft-promo-s { font: 400 15px var(--font-sans); color: var(--fg-muted); margin-top: 5px; }

.s315 .ft-main { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 56px; border-bottom: 1px solid var(--slate); }
.s315 .ft-logo { display: flex; align-items: center; gap: 11px; }
.s315 .ft-logo img { height: 30px; }
.s315 .ft-wm { font: 700 18px var(--font-sans); letter-spacing: 0.06em; color: var(--snow); }
.s315 .ft-tag { font: 400 14px/1.6 var(--font-sans); color: var(--fg-muted); margin: 16px 0 18px; max-width: 320px; text-wrap: pretty; }
.s315 .ft-phone { font: 500 17px var(--font-mono); color: var(--snow); letter-spacing: 0.02em; cursor: pointer; }
.s315 .ft-phone:hover { color: var(--flame); }
.s315 .ft-col-t { font: 600 14px var(--font-sans); color: var(--snow); margin-bottom: 16px; }
.s315 .ft-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.s315 .ft-col a { font: 400 14px var(--font-sans); color: var(--fg-muted); cursor: pointer; transition: color 160ms var(--ease-out); }
.s315 .ft-col a:hover { color: var(--snow); }

.s315 .ft-bottom { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-top: 28px; }
.s315 .ft-bottom .mono { font: 400 12px var(--font-mono); color: var(--fog); letter-spacing: 0.02em; }
.s315 .ft-legal { display: flex; gap: 22px; }
.s315 .ft-legal a { font: 400 12px var(--font-sans); color: var(--fog); cursor: pointer; }
.s315 .ft-legal a:hover { color: var(--snow); }

@media (max-width: 880px){ .s315 .ft-main { grid-template-columns: 1fr 1fr; gap: 32px 20px; } .s315 .ft-brand { grid-column: 1 / -1; } }

/* ===== Mobile (converted from .page.is-mobile) ===== */
@media (max-width: 768px) {
  .s315 .hdr-nav,
  .s315 .hdr-phone,
  .s315 .hdr-right .btn { display: none; }
  .s315 .hdr-burger { display: inline-flex; }
  .s315 .hdr-logo img { height: 30px; }
  .s315 .hdr-in { padding: 0 22px; }

  .s315 .hero { padding: 92px 0 72px; }
  .s315 .container { padding: 0 22px; }
  .s315 .hero-grid { grid-template-columns: 1fr; gap: 30px; margin-top: 20px; }
  .s315 .gal { position: static; top: auto; }
  .s315 .bc > :nth-child(-n+4) { display: none; }
  .s315 .meta .model { font-size: 60px; }
  .s315 .meta .lede { font-size: 16px; max-width: 100%; }
  .s315 .cta-secondrow { flex-direction: column; align-items: flex-start; gap: 14px; }
  .s315 .price-block { flex-wrap: wrap; }
  .s315 .trust { gap: 14px 22px; }

  .s315 .stickybar { top: auto; bottom: 0; height: auto; border-bottom: 0; border-top: 1px solid rgba(71,85,105,0.5); transform: translateY(120%); }
  .s315 .stickybar.show { transform: translateY(0); }
  .s315 .stickybar .sb-main { gap: 12px; }
  .s315 .stickybar .sb-thumb { display: none; }
  .s315 .stickybar .sb-name { display: none; }
  .s315 .stickybar .sb-price { font-size: 20px; }
  .s315 .stickybar .btn { padding: 12px 20px; font-size: 14px; }

  /* плавающая кнопка Max/Telegram (FloatingContacts, z-index:900) иначе сидит
     поверх правого края закреплённой снизу плашки «Запросить КП» —
     .fcontacts рендерится в Layout сразу после .s315, сиблингом внутри main */
  .s315 ~ .fcontacts { bottom: 90px; }
  /* и поверх последней строки футера на скролле до конца страницы — виджет
     здесь поднят до bottom:90px и занимает 110px высоты, т.е. верхний край
     виджета на 200px выше низа экрана, отступ футера должен это перекрыть */
  .s315 .ft { padding-bottom: 210px; }

  .s315 .ds-grid { grid-template-columns: 1fr 1fr; }
  .s315 .ds-grid-wide { grid-template-columns: 1fr; }
  /* документы: трек не должен расширяться до min-content и переполнять экран */
  .s315 .docs-grid { grid-template-columns: minmax(0, 1fr); }
  .s315 .doc-card, .s315 .doc-body { min-width: 0; }
  .s315 .doc-name, .s315 .doc-sub { overflow-wrap: anywhere; }
  /* спецификация: на мобиле строка раскладывается в две строки, значение переносится, а не обрезается */
  .s315 .ds-row { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 4px 12px 22px; }
  .s315 .ds-k { max-width: 100%; }
  .s315 .ds-lead { display: none; }
  .s315 .ds-v { text-align: left; white-space: normal; overflow-wrap: anywhere; }
  /* комплект: ужимаем карточку в 2 колонки, чтобы бейдж не обрезался */
  .s315 .kit-card { padding: 16px; gap: 14px; min-height: 0; }
  .s315 .kit-card-top { gap: 8px; }
  .s315 .kit-ico { width: 44px; height: 44px; }
  .s315 .kit-badge { font-size: 9.5px; padding: 4px 7px; gap: 4px; }
  .s315 .section { padding: 64px 0; }
  .s315 .section-title { font-size: 32px; }
  .s315 .tco-grid { grid-template-columns: 1fr; }
  .s315 .sim-card { width: 280px; }
  .s315 .req-modal { padding: 24px; }
}

/* Лента разделов каталога (csec-*) — self-contained, работает на любой странице */
.csec-wrap {
  padding: 2px 0 10px; margin-bottom: 18px;
  border-bottom: 1px solid rgba(71,85,105,0.3);
}
/* обёртка для fade/стрелок — раньше overflow-x:auto был без единой
   визуальной подсказки (скроллбар скрыт нарочно), обрезанный «Дета…»
   читался как «сломано», а не «прокрути дальше» */
.csec-scroller { position: relative; }
.csec {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
.csec::-webkit-scrollbar { display: none; }
.csec-l { flex: none; font: 500 10px/1 'JetBrains Mono', monospace; letter-spacing: 0.14em; text-transform: uppercase; color: #6B7280; margin-right: 4px; }
.csec-fade { position: absolute; top: 0; bottom: 0; width: 40px; pointer-events: none; z-index: 1; }
.csec-fade.left  { left: 0;  background: linear-gradient(90deg, var(--midnight, #0A1228) 0%, transparent 100%); }
.csec-fade.right { right: 0; background: linear-gradient(270deg, var(--midnight, #0A1228) 0%, transparent 100%); }
.csec-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(71,85,105,0.6); background: #0A1228; color: #F8FAFC;
  font-size: 16px; line-height: 1; cursor: pointer; transition: border-color 160ms, color 160ms;
}
.csec-arrow:hover { border-color: #FF6B35; color: #FF6B35; }
.csec-arrow.left { left: -4px; }
.csec-arrow.right { right: -4px; }
@media (max-width: 768px) { .csec-arrow, .csec-fade { display: none; } } /* на touch — просто свайп */
.csec-chip {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 13px; border-radius: 999px;
  border: 1px solid rgba(71,85,105,0.5); background: rgba(31,41,55,0.35);
  color: #94A3B8; font: 500 13px/1 'Inter', sans-serif; text-decoration: none;
  white-space: nowrap; transition: border-color 160ms, color 160ms, background 160ms;
}
.csec-chip:hover { border-color: #FF6B35; color: #F8FAFC; }
.csec-chip.on { background: rgba(255,107,53,0.12); border-color: #FF6B35; color: #F8FAFC; }
.csec-n { font: 600 10.5px/1 'JetBrains Mono', monospace; color: #6B7280; }
.csec-chip.on .csec-n { color: #FF6B35; }
@media (max-width: 768px) {
  .csec-wrap { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 14px; }
  .csec { gap: 6px; }
  .csec-l { display: none; }
  .csec-chip { height: 32px; padding: 0 11px; font-size: 12.5px; }
}
/* a11y: ≥44px tap target on touch devices (WCAG 2.5.5 / Apple HIG) */
@media (pointer: coarse) { .csec-chip { min-height: 44px; } }

/* ═══ глобальный поиск по каталогу (gsearch-*) ═══ */
.gsearch { position: relative; flex: 1; min-width: 200px; max-width: 360px; margin-left: auto; }
.gsearch-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: #6B7280; pointer-events: none; }
.gsearch-in {
  width: 100%; height: 34px; padding: 0 12px 0 34px; border-radius: 999px;
  border: 1px solid rgba(71,85,105,0.5); background: rgba(31,41,55,0.35);
  color: #F8FAFC; font: 400 13px/1 'Inter', sans-serif; outline: none;
  transition: border-color 160ms, background 160ms;
}
.gsearch-in::placeholder { color: rgba(148,163,184,0.55); }
.gsearch-in:focus { border-color: #FF6B35; background: rgba(31,41,55,0.6); }
.gsearch-drop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 300;
  width: min(480px, 92vw);
  background: #0A1228; border: 1px solid rgba(71,85,105,0.55); border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55); overflow: hidden; padding: 6px;
}
.gsearch-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; padding: 10px 12px; border: 0; border-radius: 8px;
  background: transparent; cursor: pointer; text-align: left;
}
.gsearch-row.hi { background: rgba(255,107,53,0.1); }
.gr-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gr-name { font: 500 13.5px/1.3 'Inter', sans-serif; color: #F8FAFC; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-sub { font: 400 11px/1 'JetBrains Mono', monospace; color: #6B7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-price { flex: none; font: 600 12.5px/1 'JetBrains Mono', monospace; color: #FF6B35; white-space: nowrap; }
.gsearch-empty { padding: 14px 12px; font: 400 13px 'Inter', sans-serif; color: #6B7280; }
@media (max-width: 768px) {
  .gsearch { min-width: 100%; max-width: none; margin-left: 0; }
  .gsearch-in { height: 40px; font-size: 14px; }
  .gsearch-drop { left: 0; right: 0; width: auto; }
}
/* Shared quote/callback modal — self-contained (qm-*). Minimal, phone-first for conversion. */

.qm-backdrop {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(5,8,16,0.7); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  animation: qmBdIn 240ms cubic-bezier(0.16,1,0.3,1);
}
@keyframes qmBdIn { from { opacity: 0; } to { opacity: 1; } }

.qm {
  position: relative;
  width: 460px; max-width: 100%; max-height: calc(100vh - 64px); overflow: auto;
  background: #0A1228;
  border: 1px solid rgba(71,85,105,0.5);
  border-radius: 14px;
  padding: 36px 34px 28px;
  box-shadow: 0 40px 80px rgba(0,0,0,0.6);
  animation: qmIn 320ms cubic-bezier(0.16,1,0.3,1);
}
@keyframes qmIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.qm-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(71,85,105,0.7); background: transparent; color: #F8FAFC;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 200ms, border-color 200ms;
}
.qm-close svg { width: 14px; height: 14px; }
.qm-close:hover { background: #FF6B35; border-color: #FF6B35; }

.qm-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.qm-eyebrow { font: 500 11px/1 'JetBrains Mono', monospace; color: #FF6B35; letter-spacing: 0.16em; text-transform: uppercase; }
.qm-title { font: 700 30px/1.05 'Inter', sans-serif; color: #F8FAFC; margin: 0; letter-spacing: -0.02em; }

/* prominent "what you're ordering" card — the selling element */
.qm-offer {
  display: flex; flex-direction: column; gap: 4px;
  background: linear-gradient(180deg, rgba(255,107,53,0.12), rgba(255,107,53,0.05));
  border: 1px solid rgba(255,107,53,0.35); border-left: 3px solid #FF6B35;
  border-radius: 10px; padding: 14px 16px; margin-bottom: 16px;
}
.qm-offer-l { font: 500 10px/1 'JetBrains Mono', monospace; color: #FF8A5B; letter-spacing: 0.14em; text-transform: uppercase; }
.qm-offer-v { font: 600 16px/1.35 'Inter', sans-serif; color: #F8FAFC; white-space: pre-line; max-height: 180px; overflow-y: auto; }
.qm-offer-v::-webkit-scrollbar { width: 5px; }
.qm-offer-v::-webkit-scrollbar-thumb { background: rgba(71,85,105,0.5); border-radius: 3px; }
.qm-offer-price { font: 700 18px/1 'Inter', sans-serif; color: #FF6B35; margin-top: 2px; }

.qm-sub { font: 400 14px/1.55 'Inter', sans-serif; color: #94A3B8; margin: 0 0 18px; }
.qm-sub b { color: #F8FAFC; font-weight: 600; }

.qm-form { display: flex; flex-direction: column; gap: 10px; }
.qm-input {
  width: 100%;
  background: rgba(31,41,55,0.4);
  border: 1px solid rgba(71,85,105,0.5);
  border-radius: 8px;
  padding: 13px 15px;
  font: 400 15px/1.4 'Inter', sans-serif;
  color: #F8FAFC;
  outline: none;
  transition: border-color 180ms, background 180ms;
}
.qm-input::placeholder { color: rgba(248,250,252,0.35); }
.qm-input:focus { border-color: #FF6B35; background: rgba(31,41,55,0.6); }
.qm-input-lg { font: 600 18px/1.4 'Inter', sans-serif; padding: 15px 16px; letter-spacing: 0.02em; }

.qm-error {
  font: 400 13px/1.5 'Inter', sans-serif; color: #EF4444;
  background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3);
  border-radius: 8px; padding: 10px 12px;
}

.qm-submit { width: 100%; justify-content: center; margin-top: 4px; }
.qm-fineprint {
  display: block; margin-top: 12px;
  font: 400 11px/1.45 'Inter', sans-serif;
  color: #6B7280; text-align: center; text-wrap: pretty;
}

/* success state */
.qm-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 24px 8px 12px; }
.qm-done-mark { color: #FF6B35; }
.qm-done-mark svg { width: 56px; height: 56px; }
.qm-done-title { font: 700 28px/1.1 'Inter', sans-serif; color: #F8FAFC; margin: 0; letter-spacing: -0.02em; }
.qm-done-sub { font: 400 15px/1.55 'Inter', sans-serif; color: #94A3B8; margin: 0 0 8px; max-width: 36ch; }

@media (max-width: 768px) {
  .qm-backdrop { padding: 0; align-items: flex-end; }
  .qm { padding: 26px 18px 20px; max-width: 100%; max-height: 92dvh; border-radius: 16px 16px 0 0; }
  .qm-title { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .qm-backdrop, .qm { animation: none !important; }
}
/* ── CatalogCard — единый презентационный каркас каталога ──────────────
   Синтез .fc (family-cards.css: тёмный контейнер, studio-плитка, fade,
   hover-lift) и .apc-card (apparatus-catalog.css: tilt, render-плита,
   чипы SKU/статус). Токены — shared.css. Префикс классов: ccard- */

.ccard {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--fg-muted) 14%, transparent); border-radius: var(--r-3);
  background: linear-gradient(180deg, #101B36, #0D1529);
  overflow: hidden; text-decoration: none; color: inherit; will-change: transform;
  transition: border-color .18s, transform .18s var(--ease-out), box-shadow .18s;
}
.ccard:hover { border-color: color-mix(in srgb, var(--fg-muted) 30%, transparent); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .85); }
.ccard:not(.ccard--tilt):hover { transform: translateY(-3px); }
.ccard--sel { border-color: color-mix(in srgb, var(--flame) 55%, transparent); }
.ccard--clickable { cursor: pointer; }        /* карточка-семейство без детальной: клик раскрывает размеры */

/* tilt (аппараты): 3D rotate по mousemove, --tx/--ty ставит CatalogCard.jsx */
.ccard--tilt {
  transform: perspective(900px) rotateY(var(--tx, 0deg)) rotateX(var(--ty, 0deg));
  transition: transform .25s var(--ease-out), border-color .18s, box-shadow .18s;
}
.ccard--tilt:hover { border-color: var(--fg-muted); box-shadow: 0 22px 48px rgba(0, 0, 0, .45); z-index: 2; }

/* ── фото-плитка ─────────────────────────────────────────────────── */
.ccard-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.ccard-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  transform: scale(var(--cc-zoom, 1));
  transition: transform .45s var(--ease-out);
}
.ccard:hover .ccard-photo img { transform: scale(calc(var(--cc-zoom, 1) * 1.05)); }

/* render — тёмный рендер аппарата/изделия на радиальной подложке */
.ccard-photo.render {
  background: radial-gradient(120% 120% at 50% 30%, #141f3b 0%, #0A1228 58%, #070b16 100%);
}
.ccard-photo.render img {
  object-fit: contain; padding: 9%;
  filter: drop-shadow(0 26px 32px rgba(0, 0, 0, .5));
}

/* studio — реальное фото товара (фитинги) на светлой плитке */
/* cover — атмосферный макро-кадр (трубы): фото во весь блок, без полей contain */
.ccard-photo.cover img { object-fit: cover; }

.ccard-photo.studio {
  background: radial-gradient(120% 95% at 50% 20%, #F4F6F9, #E9EDF2 70%, #DFE4EB);
}
.ccard-photo.studio img { object-fit: contain; padding: 9%; mix-blend-mode: multiply; }
.ccard-photo.studio .ccard-fade { display: none; }
.ccard-photo.studio + .ccard-body { border-top: 1px solid color-mix(in srgb, var(--fg-muted) 14%, transparent); }

/* фейд-шов внизу плитки — плавно сводит фото в фон карточки (render-режим) */
.ccard-fade {
  position: absolute; inset: auto 0 0 0; height: 34%; pointer-events: none;
  background: linear-gradient(180deg, transparent, #101B36);
}

.ccard-ph {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 9px; color: #46536b;
}
.ccard-ph .cap { font: 600 9.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }

/* статус / бейдж — чипы поверх плитки */
.ccard-status {
  position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px;
  font: 600 10.5px/1 var(--font-mono); padding: 6px 9px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--midnight) 72%, transparent); backdrop-filter: blur(6px); border: 1px solid color-mix(in srgb, var(--fg-muted) 18%, transparent);
}
.ccard-status.in { color: var(--ok); }
.ccard-status.order { color: var(--warn); }
.ccard-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.ccard-badge {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  font: 600 10px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--flame);
  background: color-mix(in srgb, var(--midnight) 72%, transparent); border: 1px solid color-mix(in srgb, var(--flame) 50%, transparent); border-radius: var(--r-1); padding: 6px 8px;
}

/* шильдик бренда (HX / Xinda) — правый верхний угол фото; SREDA не шильдикуем
   (бренд SREDA — только на аппаратах, решение владельца 2026-07-16) */
.ccard-brand {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  font: 700 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--snow); background: color-mix(in srgb, var(--midnight) 88%, transparent);
  border: 1px solid rgba(255,255,255,0.18); border-radius: var(--r-1); padding: 6px 9px;
}

/* ── тело карточки ───────────────────────────────────────────────── */
.ccard-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ccard-eyebrow { font: 600 10px/1 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--fog); }
.ccard-title { font: 700 17px/1.28 var(--font-sans); letter-spacing: -.015em; margin: 0; color: var(--snow); }
.ccard-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 500 12px var(--font-mono); color: var(--fg-muted); }

.ccard-foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--fg-muted) 12%, transparent); margin-top: auto;
}

@media (max-width: 560px) {
  .ccard-title { font-size: 15px; }
  .ccard-body { padding: 12px 12px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ccard, .ccard--tilt, .ccard-photo img {
    transition: none !important; transform: none !important;
  }
  .ccard:hover, .ccard--tilt:hover, .ccard:not(.ccard--tilt):hover { transform: none !important; }
}
/* ============================================================
   CatalogHero — единая шапка каталога (аппараты / товары)
   Токены — из shared.css. Префикс классов: chero-

   Два режима:
   .chero--video  — полноширинная панель с видео-фоном (аппараты),
                    визуальный аналог .apc-hero / .apc-hero-panel.
   .chero (default) — компактная шапка без фона, стоит прямо
                    над фильтрами товарных разделов.
   ============================================================ */

/* --- базовый (компактный, без видео) --- */
.chero {
  max-width: 2160px;
  margin: 0 auto;
  padding: 40px 32px 4px;
  position: relative;
}

.chero-inner {
  position: relative;
  z-index: 2;
  max-width: 680px;
}

.chero-eyebrow {
  font: 600 12px var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--flame);
  margin-bottom: 14px;
}

.chero-h1 {
  font: 700 clamp(26px, 3.4vw, 40px)/1.1 var(--font-sans);
  letter-spacing: -0.03em;
  color: var(--snow);
  margin: 0 0 12px;
}
.chero-h1 em { font-style: normal; color: var(--flame); }

.chero-lede {
  font: 400 16px/1.6 var(--font-sans);
  color: var(--fg-muted);
  max-width: 560px;
  margin: 0 0 20px;
}

/* grid, не flex-wrap: органичный wrap ломался на «средних» ширинах —
   значения/подписи расползались без чёткой сетки. Grid держит ровно
   4 колонки на десктопе и предсказуемо схлопывается в 2×2 на узких. */
.chero-stats { display: grid; grid-template-columns: repeat(4, auto); gap: 12px 36px; margin-bottom: 4px; justify-content: start; }
.chero-stat b {
  display: block;
  font: 700 24px/1 var(--font-mono);
  letter-spacing: -0.02em;
  color: var(--snow);
}
.chero-stat b i { font-style: normal; color: var(--flame); }
.chero-stat.accent b { color: var(--flame); }
/* только ПОДПИСЬ (прямой потомок!): CountUp рендерит собственный <span>
   внутри <b>, и селектор-потомок сжимал цифры до 11px подписи */
.chero-stat > span {
  display: block;
  margin-top: 6px;
  font: 500 11px var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.chero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 22px; }

/* ------------------------------------------------------------
   --video: полноразмерная панель с видео-фоном (как .apc-hero*)
   ------------------------------------------------------------ */
.chero--video {
  max-width: 2160px;
  margin: 18px auto 0;
  padding: 84px 72px 72px;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: var(--r-4);
  border: 1px solid var(--slate);
  overflow: hidden;
}

.chero-poster, .chero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.chero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(88deg,
    color-mix(in srgb, var(--midnight) 96%, transparent) 0%,
    color-mix(in srgb, var(--midnight) 86%, transparent) 42%,
    color-mix(in srgb, var(--midnight) 42%, transparent) 100%);
}

.chero--video .chero-inner { max-width: 680px; }

.chero--video .chero-h1 {
  font: 700 clamp(34px, 4.6vw, 62px)/1.02 var(--font-sans);
  letter-spacing: -0.035em;
  margin: 0 0 18px;
}

.chero--video .chero-lede {
  font-size: 17.5px;
  color: color-mix(in srgb, var(--snow) 82%, transparent);
  margin: 0 0 30px;
}

.chero--video .chero-stats { gap: 14px 44px; margin-bottom: 34px; }
.chero--video .chero-stat b { font-size: 30px; }

.chero--video .chero-actions { margin-top: 0; }

/* --- адаптив --- */
@media (max-width: 860px) {
  .chero { padding: 32px 18px 4px; }
  .chero--video { padding: 46px 26px 40px; min-height: 0; }
  .chero-stats { grid-template-columns: repeat(2, auto); gap: 16px 32px; }
  .chero--video .chero-stats { gap: 16px 32px; }
  .chero--video .chero-stat b { font-size: 24px; }
}
@media (max-width: 480px) {
  .chero-stats { grid-template-columns: repeat(2, 1fr); gap: 14px 20px; justify-content: stretch; }
}
@media (max-width: 560px) {
  .chero-actions { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .chero-video { display: none; }
}
/* ============================================================
   /catalog/apparaty — каталог сварочных аппаратов (рекламный лендинг)
   Токены — из shared.css. Префикс классов: apc-
   Сигнатура страницы: «карта линейки» — диапазоны Ø всех моделей
   на общей логарифмической шкале 20…1600 мм с flame-курсором.
   ============================================================ */

.apc { background: var(--midnight); color: var(--snow); min-height: 100vh; }
.apc-shell { max-width: 2160px; margin: 0 auto; padding: 32px clamp(20px, 4vw, 64px) 0; }
.apc-wrap { max-width: 2160px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 64px); }

/* reveal-on-scroll (компонент Reveal вешает .reveal/.in) */
.apc .reveal { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.apc .reveal.in { opacity: 1; transform: none; }

/* --- кнопки --- */
.apc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: var(--r-2);
  font: 600 15px var(--font-sans); cursor: pointer; border: 0; text-decoration: none; white-space: nowrap;
  transition: transform 200ms var(--ease-out), background 200ms, border-color 200ms, box-shadow 250ms, color 200ms; }
.apc-btn-primary { background: var(--flame); color: #fff; padding: 14px 26px; }
.apc-btn-primary:hover { background: var(--ember); transform: translateY(-2px); box-shadow: var(--shadow-flame); }
.apc-btn-outline { background: transparent; border: 1.5px solid var(--slate); color: var(--snow); padding: 12.5px 24px; }
.apc-btn-outline:hover { border-color: var(--snow); transform: translateY(-2px); }
.apc-btn-dark { background: var(--midnight); color: #fff; padding: 14px 26px; }
.apc-btn-dark:hover { background: #050a18; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,0.35); }
.apc-btn-sm { padding: 9px 16px; font-size: 13.5px; border-radius: var(--r-1); }
.apc a:focus-visible, .apc button:focus-visible, .apc input:focus-visible, .apc summary:focus-visible {
  outline: 2px solid var(--electric); outline-offset: 2px; }

/* --- заголовки секций --- */
.apc-eyebrow { font: 600 12px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--flame); margin-bottom: 14px; }
.apc-h2 { font: 700 clamp(26px, 3vw, 38px)/1.1 var(--font-sans); letter-spacing: -0.025em; color: var(--snow); margin: 0 0 12px; }
.apc-sub { font: 400 16.5px/1.6 var(--font-sans); color: var(--fg-muted); max-width: 720px; margin: 0; }

/* ============================================================
   C-01 · HERO — вынесен в общий CatalogHero (catalog-hero.css)
   ============================================================ */
.apc-hero-phone { font: 600 16px var(--font-mono); color: var(--snow); text-decoration: none; margin-left: 6px; }
.apc-hero-phone:hover { color: var(--flame); }

/* ============================================================
   C-02 · ПОДБОР ПО ДИАМЕТРУ — сигнатурная «карта линейки»
   ============================================================ */
.apc-picker { max-width: 2160px; margin: 0 auto; padding: 76px clamp(20px, 4vw, 64px) 56px; scroll-margin-top: 80px; }
.apc-picker-panel { border: 1px solid var(--slate); border-radius: var(--r-4); padding: 38px 42px 34px;
  background: linear-gradient(180deg, #0e1830 0%, var(--midnight) 100%); }

.apc-dn-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 48px; align-items: end; margin-bottom: 8px; }
.apc-dn-label { font: 500 12px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 12px; }
.apc-dn-readout { font: 700 54px/1 var(--font-mono); letter-spacing: -0.03em; color: var(--flame); }
.apc-dn-readout small { font-size: 22px; font-weight: 500; color: var(--fg-muted); margin-left: 6px; }
.apc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.apc-chip { background: transparent; border: 1.5px solid var(--slate); color: var(--fog); font: 500 12px var(--font-mono);
  letter-spacing: 0.07em; text-transform: uppercase; padding: 8px 15px; border-radius: var(--r-pill); cursor: pointer;
  transition: all 200ms var(--ease-out); }
.apc-chip:hover { border-color: var(--fg-muted); color: var(--snow); }
.apc-chip.on { background: var(--flame); border-color: var(--flame); color: #fff; }

.apc-slider-zone { padding: 18px 0 6px; }
.apc-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; outline-offset: 6px;
  background: linear-gradient(90deg, var(--flame) var(--p, 50%), #263450 var(--p, 50%)); cursor: pointer; }
.apc-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--snow); border: 5px solid var(--flame); box-shadow: 0 4px 14px rgba(255,107,53,0.45); cursor: grab; }
.apc-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.08); }
.apc-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--snow); border: 5px solid var(--flame);
  box-shadow: 0 4px 14px rgba(255,107,53,0.45); cursor: grab; }
.apc-scale { display: flex; justify-content: space-between; margin-top: 10px;
  font: 500 11px var(--font-mono); letter-spacing: 0.06em; color: var(--fog); }

/* карта линейки: каждая модель — полоса своего диапазона Ø на общей лог-шкале */
.apc-map { margin-top: 30px; border-top: 1px solid rgba(71,85,105,0.35); padding-top: 8px; }
.apc-map-ruler { display: grid; grid-template-columns: 96px minmax(0, 1fr) 116px; gap: 0 18px; padding: 6px 10px 10px; }
.apc-map-ruler .r-track { position: relative; height: 14px; grid-column: 2; }
.apc-map-ruler .r-mark { position: absolute; top: 0; transform: translateX(-50%);
  font: 500 10.5px var(--font-mono); letter-spacing: 0.04em; color: var(--fog); }
.apc-map-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 116px; gap: 0 18px; align-items: center;
  padding: 6px 10px; border-radius: var(--r-2); text-decoration: none;
  transition: background 180ms var(--ease-out), opacity 250ms var(--ease-out); }
.apc-map-row:hover { background: rgba(59,130,246,0.08); }
.apc-map-row.dim { opacity: 0.26; }
.apc-map-model { font: 600 13px var(--font-mono); letter-spacing: 0.03em; color: var(--fg-muted); display: flex; align-items: baseline; gap: 8px; }
.apc-map-row.hit .apc-map-model { color: var(--snow); }
.apc-map-fam { font: 500 9px var(--font-mono); letter-spacing: 0.08em; color: var(--fog); }
.apc-map-track { position: relative; height: 16px; }
.apc-map-track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(71,85,105,0.35); }
.apc-map-bar { position: absolute; top: 50%; transform: translateY(-50%); height: 7px; border-radius: 4px;
  background: #2b3b5a; transition: background 250ms var(--ease-out), height 250ms var(--ease-out), box-shadow 250ms var(--ease-out); }
.apc-map-row.hit .apc-map-bar { height: 10px; background: linear-gradient(90deg, var(--ember), var(--flame));
  box-shadow: 0 0 16px rgba(255,107,53,0.45); }
.apc-map-cursor { position: absolute; top: -3px; bottom: -3px; width: 1.5px; background: rgba(255,107,53,0.38); pointer-events: none;
  transition: left 160ms var(--ease-out); }
.apc-map-row.hit .apc-map-cursor { background: rgba(255,107,53,0.85); }
.apc-map-price { font: 500 12.5px var(--font-mono); color: var(--fg-muted); text-align: right; }
.apc-map-row.hit .apc-map-price { color: var(--snow); }

/* итог подбора */
.apc-pick-result { margin-top: 26px; display: flex; align-items: center; flex-wrap: wrap; gap: 18px 22px;
  padding: 18px 24px; border: 1px solid rgba(255,107,53,0.45); border-radius: var(--r-3);
  background: rgba(255,107,53,0.07); transition: border-color 160ms, background 160ms, transform 160ms; }
.apc-pick-result.none { border-color: var(--slate); background: rgba(71,85,105,0.12); }
.apc-pick-clickable { cursor: pointer; }
.apc-pick-clickable:hover { border-color: var(--flame); background: rgba(255,107,53,0.12); transform: translateY(-2px); }
.apc-pick-clickable:focus-visible { outline: 2px solid var(--flame); outline-offset: 2px; }
.apc-pick-thumb { width: 72px; height: 72px; flex: 0 0 auto; border-radius: var(--r-2); border: 1px solid var(--slate);
  background: radial-gradient(120% 120% at 50% 35%, #16223f 0%, #0A1228 100%); overflow: hidden; }
.apc-pick-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.apc-pick-info { flex: 1 1 260px; min-width: 0; }
.apc-pick-count { font: 500 11px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 5px; }
.apc-pick-name { font: 700 21px var(--font-sans); letter-spacing: -0.01em; color: var(--snow); }
.apc-pick-name em { font-style: normal; font: 600 11px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--flame); border: 1px solid rgba(255,107,53,0.5); border-radius: var(--r-pill); padding: 3px 9px; margin-left: 10px; vertical-align: 3px; }
.apc-pick-note { font: 400 13.5px/1.5 var(--font-sans); color: var(--fg-muted); margin-top: 4px; }
.apc-pick-price { font: 700 22px var(--font-mono); letter-spacing: -0.02em; color: var(--flame); white-space: nowrap; }
.apc-pick-price small { display: block; font: 500 10.5px var(--font-mono); letter-spacing: 0.08em; color: var(--fg-muted); margin-top: 4px; }
.apc-pick-cta { display: flex; gap: 10px; flex-wrap: wrap; }

/* ============================================================
   C-03…C-06 · СЕМЕЙСТВА
   ============================================================ */
.apc-fam { max-width: 2160px; margin: 0 auto; padding: 44px clamp(20px, 4vw, 64px) 8px; }
.apc-fam-head { margin-bottom: 26px; }
.apc-fam-head .apc-h2 span { color: var(--fog); font-weight: 400; }
.apc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }

/* Карточка модели теперь — .ccard (см. shared/catalog/catalog-card.css).
   Ниже — только то, чего в общем каркасе нет: чекбокс сравнения и
   hover-превью 360° turntable поверх фото-плитки. */

.apc-mc-hit { display: block; } /* зона наведения turntable-видео — вся карточка, не только фото */

/* цена + стрелка-переход в футере (footer у CatalogCard) */
.apc-mc-price { font: 700 19px var(--font-mono); letter-spacing: -0.02em; color: var(--snow); }
.apc-mc-price small { font: 500 12px var(--font-mono); color: var(--fg-muted); margin-right: 4px; }
.apc-mc-arr { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; border: 1.5px solid var(--slate);
  display: flex; align-items: center; justify-content: center; color: var(--fg-muted); transition: all 200ms var(--ease-out); }
.ccard:hover .apc-mc-arr { border-color: var(--flame); color: var(--flame); transform: translateX(3px); }

.apc-mc-actions { display: flex; align-items: center; gap: 8px; }
.apc-mc-add {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; border: 1.5px solid var(--flame);
  background: transparent; color: var(--flame); display: grid; place-items: center; font-size: 18px; line-height: 1;
  cursor: pointer; transition: background 150ms, color 150ms, transform 150ms;
}
.apc-mc-add:hover { background: var(--flame); color: #fff; transform: scale(1.06); }

/* hover-видео 360° — оверлей поверх .ccard-photo (children рендерится в
   .ccard-body, но position:absolute считает от .ccard, а не от .ccard-body,
   поэтому inset:0 сверху точно ложится на фото-плитку той же aspect-ratio) */
.apc-mc-tt { position: absolute; inset: 0 0 auto 0; width: 100%; aspect-ratio: 4 / 3; z-index: 1; overflow: hidden; pointer-events: none; }
.apc-mc-tt video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.apc-mc-tt-badge { position: absolute; right: 12px; bottom: 12px; z-index: 2; font: 600 10px/1 var(--font-mono); letter-spacing: 0.1em;
  color: var(--snow); background: rgba(10,18,40,0.72); border: 1px solid var(--slate); border-radius: var(--r-pill); padding: 4px 10px; }

/* чекбокс «Сравнить» — сохранён (на класс ссылаются e2e-тесты) */
.apc-card-cmp { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; cursor: pointer;
  font: 500 11px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fog);
  transition: color 180ms; user-select: none; }
.apc-card-cmp:hover { color: var(--snow); }
.apc-card-cmp input { appearance: none; width: 15px; height: 15px; margin: 0; border: 1.5px solid var(--slate); border-radius: 4px;
  cursor: pointer; display: grid; place-content: center; transition: all 150ms; }
.apc-card-cmp input:checked { background: var(--flame); border-color: var(--flame); }
.apc-card-cmp input:checked::before { content: ''; width: 8px; height: 8px;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); background: #fff; }
.apc-card-cmp.on { color: var(--flame); }

/* ============================================================
   C-07 · СРАВНЕНИЕ
   ============================================================ */
.apc-cmpbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 60;
  display: flex; align-items: center; gap: 16px; padding: 10px 12px 10px 22px;
  background: #111d3a; border: 1px solid var(--slate); border-radius: var(--r-pill);
  box-shadow: 0 22px 54px rgba(0,0,0,0.55); }
.apc-cmpbar-label { font: 500 13px var(--font-mono); letter-spacing: 0.04em; color: var(--snow); }
.apc-cmpbar-label b { color: var(--flame); }
.apc-cmpbar-clear { background: none; border: 0; color: var(--fog); font: 500 12px var(--font-mono); cursor: pointer; }
.apc-cmpbar-clear:hover { color: var(--snow); }

.apc-cmp-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(5,8,15,0.82); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 24px; }
.apc-cmp-modal { position: relative; width: 100%; max-width: 980px; max-height: 86vh; overflow: auto;
  background: #0d1526; border: 1px solid var(--slate); border-radius: var(--r-4); padding: 30px 34px 34px; }
.apc-cmp-close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 50%;
  background: transparent; border: 1.5px solid var(--slate); color: var(--fg-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all 180ms; }
.apc-cmp-close:hover { border-color: var(--snow); color: var(--snow); }
.apc-cmp-scroll { overflow-x: auto; margin-top: 20px; }
.apc-cmp-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.apc-cmp-table th, .apc-cmp-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid rgba(71,85,105,0.35); }
.apc-cmp-table th { font: 500 11px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fog); }
.apc-cmp-table th.model { font: 700 19px var(--font-sans); letter-spacing: -0.01em; color: var(--snow); text-transform: none; }
.apc-cmp-table td { font: 500 14px var(--font-mono); color: var(--snow); }
.apc-cmp-table td.rowhead { font: 400 13.5px var(--font-sans); color: var(--fg-muted); }
.apc-cmp-table td.accent { color: var(--flame); }

/* ============================================================
   C-08 · В РАБОТЕ (видео с объектов)
   ============================================================ */
.apc-work { max-width: 2160px; margin: 0 auto; padding: 64px clamp(20px, 4vw, 64px) 28px; }
.apc-work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 26px; }
.apc-vtile { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-3); overflow: hidden; cursor: pointer;
  border: 1px solid var(--slate); background: #0d1526; padding: 0; }
.apc-vtile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); opacity: 0.85; }
.apc-vtile:hover img { transform: scale(1.05); opacity: 1; }
.apc-vtile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(5,8,15,0.75) 100%); }
.apc-vtile-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 58px; height: 58px; border-radius: 50%; background: rgba(10,18,40,0.72); border: 1.5px solid rgba(248,250,252,0.7);
  display: flex; align-items: center; justify-content: center; color: var(--snow); transition: all 220ms var(--ease-out); }
.apc-vtile:hover .apc-vtile-play { background: var(--flame); border-color: var(--flame); transform: translate(-50%, -50%) scale(1.08); }
.apc-vtile-label { position: absolute; left: 16px; right: 16px; bottom: 13px; z-index: 2; text-align: left;
  font: 500 12px var(--font-mono); letter-spacing: 0.06em; color: var(--snow); }
.apc-trust-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.apc-trust-chip { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border: 1px solid var(--slate);
  border-radius: var(--r-pill); font: 500 12.5px var(--font-mono); letter-spacing: 0.04em; color: var(--fg-muted); }
.apc-trust-chip svg { color: var(--electric); flex: 0 0 auto; }

.apc-vlb { position: fixed; inset: 0; z-index: 80; background: rgba(5,8,15,0.9); display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; }
.apc-vlb video { max-width: min(1080px, 100%); max-height: 88vh; width: 100%; border-radius: var(--r-3); }
.apc-vlb-close { position: absolute; top: 20px; right: 24px; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(10,18,40,0.8); border: 1.5px solid var(--slate); color: var(--snow); cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.apc-vlb-close:hover { border-color: var(--snow); }

/* ============================================================
   C-09 · SEO-контент + FAQ
   ============================================================ */
.apc-seo { max-width: 1360px; margin: 0 auto; padding: 56px 32px 24px; }
.apc-seo-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 36px; align-items: start; margin-top: 24px; }
.apc-seo-lead { font: 400 16.5px/1.65 var(--font-sans); color: var(--fg-muted); max-width: 900px; margin: 0; }
.apc-seo-card { background: var(--steel); border: 1px solid rgba(71,85,105,0.45); border-radius: var(--r-3); padding: 22px 26px; margin-bottom: 16px; }
.apc-seo-card h3 { font: 600 18px/1.25 var(--font-sans); letter-spacing: -0.01em; color: var(--snow); margin: 0 0 10px; }
.apc-seo-card p { font: 400 14.5px/1.65 var(--font-sans); color: var(--fg-muted); margin: 0; }
.apc-faq-h { font: 600 13px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fog); margin: 0 0 14px; }
.apc-faq { border: 1px solid rgba(71,85,105,0.45); border-radius: var(--r-3); overflow: hidden; }
.apc-faq details { border-bottom: 1px solid rgba(71,85,105,0.35); }
.apc-faq details:last-child { border-bottom: 0; }
.apc-faq summary { list-style: none; cursor: pointer; padding: 16px 20px; display: flex; justify-content: space-between; gap: 14px;
  font: 600 15px/1.4 var(--font-sans); color: var(--snow); transition: background 180ms; }
.apc-faq summary::-webkit-details-marker { display: none; }
.apc-faq summary::after { content: '+'; font: 400 20px/1 var(--font-mono); color: var(--fog); transition: transform 200ms var(--ease-out); }
.apc-faq details[open] summary::after { transform: rotate(45deg); color: var(--flame); }
.apc-faq summary:hover { background: rgba(59,130,246,0.06); }
.apc-faq .a { padding: 0 20px 18px; font: 400 14.5px/1.6 var(--font-sans); color: var(--fg-muted); }

/* ============================================================
   C-10 · CTA
   ============================================================ */
.apc-cta { max-width: 1360px; margin: 0 auto; padding: 40px 32px 80px; }
.apc-cta-panel { border-radius: var(--r-4); background: linear-gradient(120deg, #E55A2B 0%, #FF6B35 62%, #ff8a5c 100%);
  padding: 52px 58px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center; color: #fff; }
.apc-cta-eyebrow { font: 600 12px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.75); margin-bottom: 14px; }
.apc-cta-title { font: 700 clamp(26px, 3vw, 40px)/1.08 var(--font-sans); letter-spacing: -0.025em; margin: 0 0 12px; }
.apc-cta-sub { font: 400 16px/1.55 var(--font-sans); color: rgba(255,255,255,0.85); margin: 0; max-width: 460px; }
.apc-cta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.apc-cta-tg { display: inline-flex; align-items: center; gap: 9px; font: 600 15px var(--font-sans); color: #fff; text-decoration: none;
  border-bottom: 1.5px solid rgba(255,255,255,0.45); padding-bottom: 3px; transition: border-color 180ms; }
.apc-cta-tg:hover { border-color: #fff; }
.apc-cta-note { font: 400 12.5px var(--font-mono); letter-spacing: 0.04em; color: rgba(255,255,255,0.75);
  display: inline-flex; align-items: center; gap: 8px; }
.apc-cta-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,0.8); }

/* ============================================================
   Адаптив
   ============================================================ */
@media (max-width: 1024px) {
  .apc-cta-panel { grid-template-columns: 1fr; padding: 40px 36px; }
  .apc-seo-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .apc-shell, .apc-wrap { padding-left: 18px; padding-right: 18px; }
  .apc-picker { padding: 56px 18px 40px; }
  .apc-picker-panel { padding: 24px 18px 22px; }
  .apc-dn-row { grid-template-columns: 1fr; align-items: start; }
  .apc-dn-readout { font-size: 42px; }
  .apc-fam { padding: 36px 18px 4px; }
  .apc-work { padding: 52px 18px 20px; }
  .apc-seo { padding: 44px 18px 16px; }
  .apc-cta { padding: 32px 18px 64px; }
  .apc-map-ruler { grid-template-columns: 64px minmax(0, 1fr); }
  .apc-map-row { grid-template-columns: 64px minmax(0, 1fr); }
  .apc-map-price { display: none; }
  .apc-map-fam { display: none; }
  .apc-cmpbar { left: 12px; right: 12px; transform: none; justify-content: space-between; }
  .apc-cmp-modal { padding: 22px 16px 24px; }
}
@media (max-width: 560px) {
  .apc-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .apc-mc-price { font-size: 16px; }
  .apc-pick-result { padding: 16px; }
  .apc-pick-cta { width: 100%; }
  .apc-pick-cta .apc-btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .apc .reveal { opacity: 1; transform: none; transition: none; }
  .apc-vtile img { transition: none; }
  .apc-btn { transition: background 150ms, border-color 150ms, color 150ms; }
  .apc-btn:hover { transform: none; }
}
/* ============================================================
   /catalog — витрина каталога (все разделы). Токены — shared.css.
   Префикс: croot-  ·  контрастная тёмная (карточки приподняты над фоном)
   ============================================================ */
.croot { background: var(--midnight); min-height: 100vh; color: var(--snow); }
.croot-shell { max-width: 2160px; margin: 0 auto; padding: 32px clamp(20px, 4vw, 64px) 0; }
.croot-wrap { max-width: 2160px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 64px); }

/* breadcrumb (локально, чтобы не тянуть landing.css) */
.croot .lp-bc { font: 500 12px/1 var(--font-mono); letter-spacing: 0.04em; color: var(--fg-muted);
  margin-bottom: 22px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.croot .lp-bc a { color: var(--fg-muted); text-decoration: none; }
.croot .lp-bc a:hover { color: var(--flame); }
.croot .lp-bc-sep { margin: 0 8px; opacity: 0.5; }

/* сетка разделов */
.croot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; padding: 8px 0 64px; }

.croot-card { display: flex; flex-direction: column; border: 1px solid var(--slate); border-radius: var(--r-4);
  overflow: hidden; background: #16213c; box-shadow: 0 12px 30px color-mix(in srgb, #000 40%, transparent);
  transition: transform .2s var(--ease-out), border-color .2s, box-shadow .3s var(--ease-out); }
.croot-card:hover { transform: translateY(-4px); border-color: var(--fg-muted);
  box-shadow: 0 22px 52px color-mix(in srgb, #000 55%, transparent); z-index: 2; }
.croot-card.featured { border-color: color-mix(in srgb, var(--flame) 55%, transparent); }
.croot-card.featured:hover { box-shadow: 0 22px 52px color-mix(in srgb, #000 55%, transparent),
  0 0 0 1px color-mix(in srgb, var(--flame) 35%, transparent); }

/* медиа — плитка светлее тёмного фона, товар виден */
.croot-card-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 25%, #24365f 0%, #101a33 100%); }
.croot-card-media img { width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease-out); }
.croot-card:hover .croot-card-media img { transform: scale(1.05); }
.croot-card-count { position: absolute; top: 12px; right: 12px; z-index: 2;
  font: 600 11px var(--font-mono); letter-spacing: 0.06em; color: var(--snow);
  background: color-mix(in srgb, var(--midnight) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--slate) 90%, transparent);
  border-radius: var(--r-pill); padding: 5px 11px; backdrop-filter: blur(4px); }

/* Шильдики брендов — СЛЕВА: справа вверху уже висит счётчик позиций.
   Плашка светлая: категорийные кадры тёмные, тёмный бейдж на них не читается. */
.croot-card-brands { position: absolute; top: 12px; left: 12px; z-index: 2;
  display: flex; gap: 6px; }
.croot-card-brands span {
  font: 700 10px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--flame);
  background: color-mix(in srgb, #0a1228 74%, transparent);
  border: 1px solid color-mix(in srgb, var(--flame) 65%, transparent);
  border-radius: var(--r-1); padding: 5px 8px; backdrop-filter: blur(6px); }

/* тело */
.croot-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.croot-card-title { font: 700 19px/1.22 var(--font-sans); letter-spacing: -0.01em; color: var(--snow);
  text-decoration: none; transition: color .18s; }
.croot-card-title:hover { color: var(--flame); }
.croot-card-desc { margin: 0; font: 400 14px/1.5 var(--font-sans); color: var(--fg-muted); }
.croot-card-subs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.croot-card-subs a { display: inline-flex; font: 400 14px/1.5 var(--font-sans); color: var(--fg-muted);
  text-decoration: none; transition: color .16s var(--ease-out), transform .16s var(--ease-out); }
.croot-card-subs a:hover { color: var(--snow); transform: translateX(3px); }
.croot-card-all { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 7px;
  font: 600 12px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--flame);
  text-decoration: none; }
.croot-card-all svg { transition: transform .18s var(--ease-out); }
.croot-card-all:hover svg { transform: translateX(4px); }

/* адаптив */
@media (max-width: 860px) {
  .croot-shell, .croot-wrap { padding-left: 18px; padding-right: 18px; }
  .croot-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (max-width: 520px) {
  .croot-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .croot-card, .croot-card-media img, .croot-card-subs a, .croot-card-all svg { transition: none; }
  .croot-card:hover { transform: none; }
  .croot-card:hover .croot-card-media img { transform: none; }
}

/* ============================================================
   SEO LANDING — Отвод ПЭ100 · карточка товара
   Forked from sreda116-website kit. Dark hero / light body / flame CTA.
   ============================================================ */

#root { min-height: 100vh; }

/* viewport frame (Desktop / Mobile tweak) */
.vp { margin: 0 auto; transition: max-width 320ms var(--ease-out); }
.vp.desktop { max-width: 100%; }
.vp.mobile  { max-width: 430px; box-shadow: 0 0 0 1px var(--slate), 0 40px 120px rgba(0,0,0,0.6); }

.seo-root .container { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

/* ── NAVBAR ── */
.seo-root .nav { position: sticky; top: 0; z-index: 90; height: 64px;
  background: rgba(10,18,40,0.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(71,85,105,0.4); }
.seo-root .nav-in { max-width: 1180px; margin: 0 auto; padding: 0 32px; height: 64px;
  display: flex; align-items: center; justify-content: space-between; }
.seo-root .nav-l { display: flex; align-items: center; gap: 22px; }
.seo-root .nav-logo { height: 36px; width: auto; display: block; flex-shrink: 0; }
.seo-root .nav-brand { display: flex; align-items: center; gap: 11px; cursor: pointer; text-decoration: none; }
.seo-root .nav-word { display: flex; flex-direction: column; justify-content: center; line-height: 1;
  font: 800 20px/1 var(--font-sans); letter-spacing: 0.16em; color: var(--snow); text-transform: uppercase; }
.seo-root .nav-word i { font: 500 9px/1 var(--font-mono); letter-spacing: 0.18em; color: var(--fog);
  text-transform: uppercase; margin-top: 5px; font-style: normal; }
.seo-root .nav-links { display: flex; gap: 26px; }
.seo-root .nav-links a { font: 500 14px var(--font-sans); color: var(--snow); cursor: pointer; }
.seo-root .nav-links a:hover { color: var(--flame); }
.seo-root .nav-r { display: flex; align-items: center; gap: 18px; }
.seo-root .nav-phone { font: 500 14px var(--font-mono); color: var(--snow); letter-spacing: 0.04em; white-space: nowrap; }

/* burger (mobile only) */
.seo-root .nav-burger { display: none; width: 42px; height: 42px; margin-left: -8px; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--snow); cursor: pointer; border-radius: var(--r-2); }
.seo-root .nav-burger:hover { background: rgba(255,255,255,0.06); }
/* mobile: hide nav on scroll-down so it doesn't fight the bottom buy bar */

/* mobile drawer */
.seo-root .drawer-ov { position: fixed; inset: 0; z-index: 150; background: rgba(5,8,15,0.6); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity 240ms var(--ease-out); }
.seo-root .drawer-ov.open { opacity: 1; pointer-events: auto; }
.seo-root .drawer { position: absolute; top: 0; left: 0; bottom: 0; width: min(82%, 340px); background: var(--midnight);
  border-right: 1px solid var(--slate); padding: 18px 22px 28px; display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform 280ms var(--ease-out); }
.seo-root .drawer-ov.open .drawer { transform: translateX(0); }
.seo-root .drawer-top { display: flex; align-items: center; justify-content: space-between; height: 46px; margin-bottom: 14px; }
.seo-root .drawer-top .nav-logo { height: 28px; }
.seo-root .drawer-links { display: flex; flex-direction: column; }
.seo-root .drawer-links a { display: flex; align-items: center; justify-content: space-between; min-height: 52px;
  font: 600 18px var(--font-sans); color: var(--snow); border-bottom: 1px solid rgba(71,85,105,0.4); cursor: pointer; }
.seo-root .drawer-links a .om-ic, .seo-root .drawer-links a svg { color: var(--fog); }
.seo-root .drawer-links a:hover { color: var(--flame); }
.seo-root .drawer-phone { display: flex; align-items: center; gap: 10px; min-height: 52px; margin-top: 8px;
  font: 600 17px var(--font-mono); color: var(--snow); letter-spacing: 0.03em; }
.seo-root .drawer-phone:hover { color: var(--flame); }
.seo-root .drawer .btn { margin-top: 16px; }

/* ── shared section heads ── */
.seo-root .sec { padding: var(--section-y-d-m) 0; }
.seo-root .sec-dark  { background: var(--midnight); }
.seo-root .sec-light { background: var(--cloud); color: var(--ink); }
.seo-root .eyebrow { font: 500 12px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--flame); margin-bottom: 14px; }
.seo-root .sec-title { font: 700 40px/1.1 var(--font-sans); letter-spacing: -0.025em; margin: 0; }
.seo-root .sec-light .sec-title { color: var(--ink); }
.seo-root .sec-dark .sec-title { color: var(--snow); }

.seo-root .mono { font-family: var(--font-mono); }

/* ════════════════════════════════════════════
   P-01 HERO
   ════════════════════════════════════════════ */
.seo-root .hero { background: linear-gradient(180deg, var(--midnight) 0%, #070C1C 100%);
  padding: 28px 0 72px; border-bottom: 1px solid rgba(71,85,105,0.35); }
.seo-root .bc { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font: 400 13px var(--font-mono);
  color: var(--fog); letter-spacing: 0.04em; margin-bottom: 32px; }
.seo-root .bc a { color: var(--fog); cursor: pointer; }
.seo-root .bc a:hover { color: var(--snow); }
.seo-root .bc .sep { color: var(--slate); }
.seo-root .bc-cur { color: var(--snow); }

.seo-root .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }

/* gallery */
.seo-root .gal { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 88px; }
.seo-root .gal-main { aspect-ratio: 1/1; background: radial-gradient(120% 120% at 50% 30%, #141d33 0%, #0c1326 100%);
  border: 1px solid var(--slate); border-radius: var(--r-4); position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; }
.seo-root .gal-main svg, .seo-root .gal-main img { width: 100%; height: 100%; object-fit: contain; }
.seo-root .gal-main img { padding: 10%; filter: brightness(0.96) contrast(1.05); }
.seo-root .gal-tag { position: absolute; left: 16px; top: 16px; font: 500 11px var(--font-mono); color: var(--fog);
  letter-spacing: 0.08em; background: rgba(10,18,40,0.6); padding: 5px 10px; border-radius: var(--r-1); }
.seo-root .gal-zoom { position: absolute; right: 16px; bottom: 16px; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--slate); background: rgba(10,18,40,0.6); color: var(--fg-muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 180ms; padding: 0; }
.seo-root .gal-zoom:hover { color: var(--snow); border-color: var(--snow); background: rgba(10,18,40,0.85); }

/* ── LIGHTBOX ── */
.seo-root .lb-ov { position: fixed; inset: 0; z-index: 210; background: rgba(4,7,14,0.92); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 32px; animation: fadeIn 180ms var(--ease-out); cursor: zoom-out; }
.seo-root .lb-close { position: fixed; top: 22px; right: 22px; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--slate); background: rgba(255,255,255,0.04); color: var(--snow); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all 160ms; z-index: 2; }
.seo-root .lb-close:hover { border-color: var(--snow); background: rgba(255,255,255,0.1); }
.seo-root .lb-stage { display: flex; flex-direction: column; align-items: center; gap: 18px; cursor: default; max-width: 720px; width: 100%; }
.seo-root .lb-img { width: min(72vh, 560px); max-width: 100%; aspect-ratio: 1/1;
  background: radial-gradient(120% 120% at 50% 30%, #141d33 0%, #0c1326 100%);
  border: 1px solid var(--slate); border-radius: var(--r-4); display: flex; align-items: center; justify-content: center; }
.seo-root .lb-img svg { width: 100%; height: 100%; }
.seo-root .lb-img img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.seo-root .lb-cap { font: 500 13px var(--font-mono); color: var(--fog); letter-spacing: 0.06em; }
.seo-root .lb-thumbs { display: flex; gap: 10px; }
.seo-root .lb-thumb { width: 64px; height: 64px; border-radius: var(--r-2); border: 1.5px solid transparent; background: var(--steel);
  padding: 7px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 160ms; }
.seo-root .lb-thumb svg, .seo-root .lb-thumb img { width: 100%; height: 100%; object-fit: contain; }
.seo-root .lb-thumb.active { border-color: var(--flame); }
.seo-root .gal-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.seo-root .gthumb { aspect-ratio: 1; background: var(--steel); border: 1.5px solid transparent; border-radius: var(--r-2);
  padding: 8px; cursor: pointer; transition: border-color 180ms; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.seo-root .gthumb svg, .seo-root .gthumb img { width: 100%; height: 100%; object-fit: contain; }
.seo-root .gthumb img { padding: 4px; }
.seo-root .gthumb.active { border-color: var(--flame); }
.seo-root .gthumb-lbl { position: absolute; left: 0; right: 0; bottom: 0; font: 500 8px var(--font-mono); color: var(--fog);
  text-align: center; padding: 3px 2px; background: rgba(10,18,40,0.7); letter-spacing: 0.04em; text-transform: uppercase; }
/* mobile: drop outset D/e dimension labels (keep fitting + angle α) */

/* meta */
.seo-root .meta { display: flex; flex-direction: column; }
.seo-root .meta-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.seo-root .mtag { font: 500 11px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted);
  border: 1px solid var(--slate); border-radius: var(--r-pill); padding: 4px 12px; }
.seo-root .mtag.stock { color: var(--ok); border-color: rgba(16,185,129,0.4); }
.seo-root .h1 { font: 700 40px/1.12 var(--font-sans); letter-spacing: -0.025em; color: var(--snow); margin: 4px 0 0; }
.seo-root .h1 .acc { color: var(--flame); }
.seo-root .lede { font: 400 16.5px/1.6 var(--font-sans); color: var(--fg-muted); margin: 14px 0 0; max-width: 480px; }

/* artikul row */
.seo-root .art { display: flex; align-items: center; gap: 12px; margin: 24px 0 0;
  padding: 14px 16px; background: var(--steel); border: 1px solid var(--slate); border-radius: var(--r-2); }
.seo-root .art-l { font: 500 11px var(--font-mono); color: var(--fog); letter-spacing: 0.08em; text-transform: uppercase; }
.seo-root .art-v { font: 700 18px var(--font-mono); color: var(--snow); letter-spacing: 0.04em; }
.seo-root .art-copy { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font: 500 12px var(--font-sans);
  color: var(--fg-muted); background: transparent; border: 1px solid var(--slate); border-radius: var(--r-1);
  padding: 7px 12px; cursor: pointer; transition: all 160ms; }
.seo-root .art-copy:hover { color: var(--snow); border-color: var(--snow); }
.seo-root .art-copy.done { color: var(--ok); border-color: rgba(16,185,129,0.4); }

/* data rows */
.seo-root .drows { margin: 24px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.seo-root .drow { display: flex; align-items: baseline; gap: 10px; padding: 13px 0; border-bottom: 1px solid rgba(71,85,105,0.35); }
.seo-root .drow .k { font: 400 14px var(--font-sans); color: var(--fg-muted); white-space: nowrap; }
.seo-root .drow .dots { flex: 1; border-bottom: 1px dotted var(--slate); transform: translateY(-3px); min-width: 12px; }
.seo-root .drow .v { font: 700 15px var(--font-mono); color: var(--snow); letter-spacing: 0.02em; white-space: nowrap; }
.seo-root .drow .v.acc { color: var(--flame); }

/* price + cta */
.seo-root .buy { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--slate); }
.seo-root .price-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.seo-root .price-l { display: flex; flex-direction: column; gap: 2px; }
.seo-root .price-cap { font: 500 11px var(--font-mono); color: var(--fog); letter-spacing: 0.1em; text-transform: uppercase; }
.seo-root .price { font: 700 40px/1 var(--font-mono); color: var(--snow); letter-spacing: -0.01em; }
.seo-root .price .cur { color: var(--fg-muted); font-size: 26px; }
.seo-root .price-tax { font: 500 12px var(--font-mono); color: var(--fog); margin-top: 4px; }
.seo-root .price-eta { display: flex; align-items: center; gap: 8px; font: 500 13px var(--font-sans); color: var(--ok); }

.seo-root .cta-col { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.seo-root .cta-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seo-root .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 54px; padding: 0 24px;
  border-radius: var(--r-2); font: 600 15px var(--font-sans); cursor: pointer; border: 1.5px solid transparent;
  transition: all 200ms var(--ease-out); white-space: nowrap; }
.seo-root .btn-primary { background: var(--flame); color: var(--snow); border-color: var(--flame); box-shadow: var(--shadow-flame); }
.seo-root .btn-primary:hover { background: var(--ember); border-color: var(--ember); transform: translateY(-1px); }
.seo-root .btn-outline { background: transparent; color: var(--snow); border-color: var(--slate); }
.seo-root .btn-outline:hover { border-color: var(--snow); }
.seo-root .btn-sm { height: 44px; font-size: 14px; padding: 0 18px; }
.seo-root .btn-block { width: 100%; }

/* share row */
.seo-root .share { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.seo-root .share-btn { display: inline-flex; align-items: center; gap: 8px; font: 500 13px var(--font-sans); color: var(--fg-muted);
  background: transparent; border: 1px solid var(--slate); border-radius: var(--r-pill); padding: 9px 16px; cursor: pointer;
  transition: all 160ms; position: relative; }
.seo-root .share-btn:hover { color: var(--snow); border-color: var(--snow); }
.seo-root .share-btn.done { color: var(--ok); border-color: rgba(16,185,129,0.4); }
.seo-root .share-wrap { position: relative; }
.seo-root .share-menu { position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; min-width: 200px;
  background: var(--steel); border: 1px solid var(--slate); border-radius: var(--r-2); padding: 6px; box-shadow: var(--shadow-2); }
.seo-root .share-menu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: 0; color: var(--snow); font: 500 13px var(--font-sans); padding: 10px 12px;
  border-radius: var(--r-1); cursor: pointer; }
.seo-root .share-menu button:hover { background: rgba(255,255,255,0.06); }

/* ════════════════════════════════════════════
   P-02 CALCULATOR
   ════════════════════════════════════════════ */
.seo-root .calc { background: #070C1C; }
.seo-root .calc-grid { display: grid; grid-template-columns: 1fr 0.85fr; gap: 28px; align-items: stretch; margin-top: 32px; }
.seo-root .calc-panel { background: var(--steel); border: 1px solid var(--slate); border-radius: var(--r-4); padding: 30px; }
.seo-root .calc-ctrl { margin-bottom: 26px; }
.seo-root .calc-ctrl:last-child { margin-bottom: 0; }
.seo-root .calc-label { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.seo-root .calc-label .lab { font: 500 14px var(--font-sans); color: var(--snow); }
.seo-root .calc-label .hint { font: 400 12px var(--font-mono); color: var(--fog); }
.seo-root .num-input { display: flex; align-items: center; background: var(--midnight); border: 1px solid var(--slate);
  border-radius: var(--r-2); overflow: hidden; height: 54px; }
.seo-root .num-input button { width: 54px; height: 100%; background: transparent; border: 0; color: var(--snow); font-size: 22px;
  cursor: pointer; transition: background 150ms; flex-shrink: 0; }
.seo-root .num-input button:hover { background: rgba(255,255,255,0.05); }
.seo-root .num-input input { flex: 1; min-width: 0; text-align: center; background: transparent; border: 0; outline: 0;
  color: var(--snow); font: 700 20px var(--font-mono); }
.seo-root .num-input .unit { padding-right: 18px; font: 500 13px var(--font-mono); color: var(--fog); }
.seo-root .chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.seo-root .chip-opt { flex: 1; min-width: 80px; height: 48px; border-radius: var(--r-2); border: 1px solid var(--slate);
  background: transparent; color: var(--snow); font: 500 14px var(--font-sans); cursor: pointer; transition: all 150ms;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.seo-root .chip-opt .cs { font: 400 11px var(--font-mono); color: var(--fog); }
.seo-root .chip-opt:hover { border-color: var(--snow); }
.seo-root .chip-opt.on { background: var(--electric); border-color: var(--electric); }
.seo-root .chip-opt.on .cs { color: rgba(255,255,255,0.8); }
.seo-root .calc-check { display: flex; align-items: center; gap: 12px; cursor: pointer; min-height: 48px; padding: 12px 4px;
  margin: 2px -4px 0; border-radius: var(--r-2); -webkit-tap-highlight-color: transparent; }
.seo-root .calc-check:hover { background: rgba(255,255,255,0.03); }
.seo-root .calc-check .box { width: 22px; height: 22px; border-radius: var(--r-1); border: 1.5px solid var(--slate);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 160ms; }
.seo-root .calc-check.on .box { background: var(--flame); border-color: var(--flame); }
.seo-root .calc-check span { font: 400 14px var(--font-sans); color: var(--fg-muted); }

/* output card */
.seo-root .calc-out { background: linear-gradient(160deg, rgba(255,107,53,0.07), rgba(255,107,53,0.02));
  border: 1px solid rgba(255,107,53,0.3); border-radius: var(--r-4); padding: 30px; display: flex; flex-direction: column; }
.seo-root .calc-out h3 { font: 600 16px var(--font-sans); color: var(--snow); margin: 0 0 6px; }
.seo-root .calc-out .sub { font: 400 13px var(--font-sans); color: var(--fg-muted); margin: 0 0 22px; }
.seo-root .cout-rows { display: flex; flex-direction: column; }
.seo-root .cout-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 13px 0;
  border-bottom: 1px dashed rgba(71,85,105,0.5); }
.seo-root .cout-row .k { font: 400 14px var(--font-sans); color: var(--fg-muted); }
.seo-root .cout-row .v { font: 700 16px var(--font-mono); color: var(--snow); }
.seo-root .cout-row.muted .v { color: var(--fg-muted); font-weight: 500; }
.seo-root .cout-total { margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--slate); display: flex;
  align-items: flex-end; justify-content: space-between; }
.seo-root .cout-total .k { font: 500 14px var(--font-sans); color: var(--snow); }
.seo-root .cout-total .v { font: 700 32px var(--font-mono); color: var(--flame); letter-spacing: -0.01em; }
.seo-root .calc-out .btn { margin-top: 22px; }

/* стыки — справочный серый блок, визуально отвязан от суммы */
.seo-root .calc-out-col { display: flex; flex-direction: column; gap: 14px; }
.seo-root .calc-info { background: rgba(255,255,255,0.03); border: 1px dashed var(--slate); border-radius: var(--r-3);
  padding: 16px 20px; }
.seo-root .calc-info-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.seo-root .calc-info-row .ci-cap { display: block; font: 500 10px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fog); margin-bottom: 3px; }
.seo-root .calc-info-row .ci-k { font: 400 14px var(--font-sans); color: var(--fg-muted); }
.seo-root .calc-info-row .ci-v { font: 700 16px var(--font-mono); color: var(--fg-muted); white-space: nowrap; }
.seo-root .calc-info-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; background: transparent; border: 0;
  padding: 0; font: 500 12.5px var(--font-sans); color: var(--electric); cursor: pointer; }
.seo-root .calc-info-link:hover { color: var(--sky); }

/* ════════════════════════════════════════════
   P-03 TECH SPECS (light)
   ════════════════════════════════════════════ */
.seo-root .spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 64px; margin-top: 40px; max-width: 1000px; }
.seo-root .spec-group h4 { font: 700 13px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--flame);
  margin: 0 0 8px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.seo-root .spec-line { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--mist); }
.seo-root .spec-line .k { font: 400 15px var(--font-sans); color: var(--fog); }
.seo-root .spec-line .dots { flex: 1; border-bottom: 1px dotted #cbd0d8; transform: translateY(-3px); }
.seo-root .spec-line .v { font: 700 15px var(--font-mono); color: var(--ink); }
.seo-root .spec-line .v.yes { color: var(--ok); }

/* ════════════════════════════════════════════
   P-04 DOCS / P-05 APPLICATION / P-06 SERVICES (light)
   ════════════════════════════════════════════ */
/* scoped to .vp — light doc-cards bleed onto S315 (тёмные .doc-card) без скоупа */
.seo-root .docs-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 36px; }
.seo-root .doc-card { background: white; border: 1px solid var(--mist); border-radius: var(--r-3); padding: 24px;
  display: flex; flex-direction: column; gap: 14px; transition: all 220ms var(--ease-out); }
.seo-root .doc-card:hover { border-color: var(--ink); box-shadow: 0 12px 32px rgba(15,23,42,0.08); }
.seo-root .doc-ico { width: 44px; height: 44px; border-radius: var(--r-2); background: var(--cloud); border: 1px solid var(--mist);
  display: flex; align-items: center; justify-content: center; color: var(--ink); }
.seo-root .doc-card h4 { font: 600 16px var(--font-sans); color: var(--ink); margin: 0; }
.seo-root .doc-card p { font: 400 13.5px/1.55 var(--font-sans); color: var(--fog); margin: 0; flex: 1; }
.seo-root .doc-dl { display: inline-flex; align-items: center; gap: 8px; font: 600 13px var(--font-sans); color: var(--electric); cursor: pointer; }
.seo-root .doc-dl:hover { color: var(--ink); }
.seo-root .warranty { margin-top: 16px; display: flex; align-items: center; gap: 14px; padding: 18px 22px;
  background: white; border: 1px solid var(--mist); border-radius: var(--r-3); }
.seo-root .warranty .wi { color: var(--ok); flex-shrink: 0; }
.seo-root .warranty p { margin: 0; font: 400 14px/1.55 var(--font-sans); color: var(--fog); }
.seo-root .warranty b { color: var(--ink); font-weight: 600; }

.seo-root .app-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 36px; }
.seo-root .app-card { background: white; border: 1px solid var(--mist); border-radius: var(--r-3); padding: 26px 22px;
  display: flex; flex-direction: column; gap: 14px; transition: all 220ms var(--ease-out); }
.seo-root .app-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(15,23,42,0.1); }
.seo-root .app-ico { width: 48px; height: 48px; color: var(--electric); }
.seo-root .app-card h4 { font: 600 16px var(--font-sans); color: var(--ink); margin: 0; }
.seo-root .app-card p { font: 400 13px/1.5 var(--font-sans); color: var(--fog); margin: 0; }

.seo-root .serv-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 36px; }
.seo-root .serv-card { background: var(--ink); color: var(--snow); border-radius: var(--r-3); padding: 28px;
  display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; }
.seo-root .serv-card .si { color: var(--flame); }
.seo-root .serv-card h4 { font: 600 18px var(--font-sans); color: var(--snow); margin: 0; }
.seo-root .serv-card p { font: 400 14px/1.55 var(--font-sans); color: #cbd5e1; margin: 0; flex: 1; }
.seo-root .serv-link { display: inline-flex; align-items: center; gap: 8px; font: 600 14px var(--font-sans); color: var(--snow); cursor: pointer; }
.seo-root .serv-link:hover { color: var(--flame); }

/* ════════════════════════════════════════════
   P-07 SIMILAR (light, carousels) — scoped to .vp to avoid cascade bleed into S315
   ════════════════════════════════════════════ */
.seo-root .sim-group { margin-top: 40px; }
.seo-root .sim-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.seo-root .sim-head h3 { font: 600 20px var(--font-sans); color: var(--ink); margin: 0; }
.seo-root .sim-head .meta { font: 400 13px var(--font-mono); color: var(--fog); }
.seo-root .sim-nav { display: flex; gap: 8px; }
.seo-root .sim-nav button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--mist); background: white;
  color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 160ms; }
.seo-root .sim-nav button:hover { border-color: var(--ink); }
.seo-root .sim-nav button:disabled { opacity: 0.3; cursor: default; }
.seo-root .sim-track { display: flex; gap: 16px; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 6px;
  scrollbar-width: none; }
.seo-root .sim-track::-webkit-scrollbar { display: none; }
.seo-root .sim-card { flex: 0 0 230px; background: white; border: 1px solid var(--mist); border-radius: var(--r-3);
  overflow: hidden; cursor: pointer; transition: all 220ms var(--ease-out); display: flex; flex-direction: column; }
.seo-root .sim-card.current { border-color: var(--flame); }
.seo-root .sim-card:hover { transform: translateY(-4px); border-color: var(--flame); box-shadow: 0 16px 40px rgba(15,23,42,0.1); }
.seo-root .sim-photo { aspect-ratio: 1/1; background: radial-gradient(120% 120% at 50% 30%, #141d33 0%, #0c1326 100%);
  display: flex; align-items: center; justify-content: center; padding: 18px; position: relative; }
.seo-root .sim-photo svg { width: 100%; height: 100%; }
.seo-root .sim-cur-tag { position: absolute; top: 10px; left: 10px; font: 600 9px var(--font-mono); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--flame); background: rgba(255,107,53,0.12); padding: 3px 8px; border-radius: var(--r-1); }
.seo-root .sim-body { padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.seo-root .sim-cat { font: 500 9px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fog); }
.seo-root .sim-name { font: 700 17px var(--font-sans); color: var(--ink); letter-spacing: -0.01em; }
.seo-root .sim-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.seo-root .sim-price { font: 700 15px var(--font-mono); color: var(--ink); }
.seo-root .sim-stock { font: 500 10px var(--font-mono); letter-spacing: 0.04em; }

/* ════════════════════════════════════════════
   P-08 SEO TEXT / P-09 FAQ (light)
   ════════════════════════════════════════════ */
.seo-root .seo-text { max-width: 760px; }
.seo-root .seo-text h2 { font: 700 22px var(--font-sans); color: var(--ink); letter-spacing: -0.01em; margin: 32px 0 12px; }
.seo-root .seo-text h2:first-child { margin-top: 28px; }
.seo-root .seo-text p { font: 400 16px/1.7 var(--font-sans); color: #475569; margin: 0 0 14px; }
.seo-root .seo-text a { color: var(--electric); }
.seo-root .seo-text a:hover { color: var(--ink); }

.seo-root .faq { max-width: 760px; margin-top: 36px; }
.seo-root .faq-item { border-bottom: 1px solid var(--mist); }
.seo-root .faq-q { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%;
  background: transparent; border: 0; text-align: left; padding: 22px 0; cursor: pointer;
  font: 600 17px var(--font-sans); color: var(--ink); }
.seo-root .faq-q .chev { flex-shrink: 0; color: var(--fog); transition: transform 280ms var(--ease-out); }
.seo-root .faq-item.open .chev { transform: rotate(180deg); color: var(--flame); }
.seo-root .faq-a { overflow: hidden; max-height: 0; transition: max-height 320ms var(--ease-out); }
.seo-root .faq-a-in { padding: 0 0 22px; font: 400 15.5px/1.65 var(--font-sans); color: var(--fog); max-width: 660px; }

/* ════════════════════════════════════════════
   P-10 FINAL CTA (flame)
   ════════════════════════════════════════════ */
.seo-root .final { background: var(--flame); color: var(--snow); }
.seo-root .final-in { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.seo-root .final h2 { font: 700 40px/1.08 var(--font-sans); letter-spacing: -0.025em; color: var(--snow); margin: 0 0 12px; max-width: 600px; }
.seo-root .final p { font: 400 17px var(--font-sans); color: rgba(255,255,255,0.9); margin: 0; }
.seo-root .final-cta { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.seo-root .btn-ink { background: var(--midnight); color: var(--snow); border-color: var(--midnight); }
.seo-root .btn-ink:hover { background: #060B1B; transform: translateY(-1px); }
.seo-root .final-alt { display: flex; flex-wrap: wrap; gap: 18px; }
.seo-root .final-alt a { display: inline-flex; align-items: center; gap: 8px; font: 600 14px var(--font-mono); color: var(--snow); cursor: pointer; }
.seo-root .final-alt a:hover { color: var(--midnight); }

/* ── FOOTER ── */
.seo-root .foot { background: var(--midnight); border-top: 1px solid var(--slate); padding: 48px 0 36px; }
.seo-root .foot-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.seo-root .foot-in img { height: 26px; }
.seo-root .foot-in .fcopy { font: 400 12px var(--font-mono); color: var(--fog); letter-spacing: 0.04em; }
.seo-root .foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.seo-root .foot-links a { font: 400 13px var(--font-sans); color: var(--fg-muted); cursor: pointer; }
.seo-root .foot-links a:hover { color: var(--snow); }

/* ── STICKY BUY BAR ── */
.seo-root .stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; transform: translateY(110%);
  transition: transform 320ms var(--ease-out); background: rgba(10,18,40,0.94); backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--slate); }
.seo-root .stickybar.show { transform: translateY(0); }
.seo-root .sb-in { max-width: 1180px; margin: 0 auto; padding: 12px 32px; display: flex; align-items: center; gap: 24px; }
.seo-root .sb-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.seo-root .sb-name { font: 700 15px var(--font-mono); color: var(--snow); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seo-root .sb-art { font: 500 11px var(--font-mono); color: var(--fog); letter-spacing: 0.04em; }
.seo-root .sb-price { margin-left: auto; font: 700 22px var(--font-mono); color: var(--snow); white-space: nowrap; }
.seo-root .sb-cta { display: flex; gap: 10px; }

/* ── TOAST ── */
.seo-root .toast-wrap { position: fixed; bottom: 92px; left: 50%; transform: translateX(-50%); z-index: 120;
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.seo-root .toast { display: flex; align-items: center; gap: 10px; background: var(--ink); color: var(--snow);
  border: 1px solid var(--slate); border-radius: var(--r-2); padding: 12px 18px; font: 500 14px var(--font-sans);
  box-shadow: var(--shadow-2); animation: toastIn 280ms var(--ease-out); }
.seo-root .toast .ti { color: var(--ok); }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ── MODAL ── */
.seo-root .modal-ov { position: fixed; inset: 0; z-index: 200; background: rgba(5,8,15,0.7); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 24px; animation: fadeIn 200ms; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.seo-root .modal { width: 100%; max-width: 540px; background: var(--steel); border: 1px solid var(--slate);
  border-radius: var(--r-4); padding: 32px; box-shadow: var(--shadow-3); max-height: 88vh; overflow-y: auto; }
.seo-root .modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.seo-root .modal-head h3 { font: 700 24px var(--font-sans); color: var(--snow); letter-spacing: -0.02em; margin: 0; }
.seo-root .modal-head p { font: 400 13px var(--font-sans); color: var(--fg-muted); margin: 6px 0 0; }
.seo-root .modal-close { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--slate); background: transparent;
  color: var(--fg-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.seo-root .modal-close:hover { color: var(--snow); border-color: var(--snow); }
.seo-root .spec-summary { background: var(--midnight); border: 1px solid var(--slate); border-radius: var(--r-2); padding: 18px; margin-bottom: 22px; }
.seo-root .spec-summary .ss-row { display: flex; justify-content: space-between; padding: 7px 0; font: 500 13px var(--font-mono); }
.seo-root .spec-summary .ss-row .k { color: var(--fg-muted); }
.seo-root .spec-summary .ss-row .v { color: var(--snow); }
.seo-root .spec-summary .ss-row.tot { border-top: 1px dashed var(--slate); margin-top: 6px; padding-top: 12px; }
.seo-root .spec-summary .ss-row.tot .v { color: var(--flame); font-size: 16px; font-weight: 700; }
.seo-root .field { margin-bottom: 14px; }
.seo-root .field label { display: block; font: 500 12px var(--font-mono); color: var(--fog); letter-spacing: 0.06em;
  text-transform: uppercase; margin-bottom: 7px; }
.seo-root .field input, .seo-root .field textarea { width: 100%; background: var(--midnight); border: 1px solid var(--slate);
  border-radius: var(--r-2); color: var(--snow); font: 400 15px var(--font-sans); padding: 13px 15px; outline: none; }
.seo-root .field input:focus, .seo-root .field textarea:focus { border-color: var(--electric); }
.seo-root .field textarea { resize: vertical; min-height: 72px; }
.seo-root .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }


/* ════════════════════════════════════════════════════════════════════
   MOBILE LAYOUT — single source of truth (≤900px).
   The @media block is the AUTHORITY: fires on real devices (incl. the
   generated VERBATIM alias for the Tweak "Mobile" preview frame on wide
   screens. Both come from one MOBILE[] list → they cannot diverge.
   Desktop (>900px) untouched.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .seo-root .container { max-width: 100%; margin-inline: 0; padding: 0 16px; }
  .seo-root .nav-in { max-width: 100%; padding: 0 16px; }
  .seo-root .sb-in { max-width: 100%; padding: 10px 16px; gap: 12px; }
  .seo-root .nav-l { gap: 12px; }
  .seo-root .nav-word i { display: none; }
  .seo-root .nav-links, .seo-root .nav-phone { display: none; }
  .seo-root .nav-burger { display: flex; }
  .seo-root .nav.nav-hidden { transform: translateY(-100%); }
  .seo-root .sec { padding: 56px 0; }
  .seo-root .sec-title { font-size: 30px; }
  .seo-root .hero { padding: 22px 0 52px; }
  .seo-root .h1 { font-size: 30px; }
  .seo-root .lede { max-width: none; }
  .seo-root .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .seo-root .gal { position: static; }
  .seo-root .gal-main .fit-meas { display: none; }
  .seo-root .lb-img { width: 78vw; }
  .seo-root .drows { grid-template-columns: 1fr; }
  .seo-root .cta-row2 { grid-template-columns: 1fr; }
  .seo-root .calc-grid { grid-template-columns: 1fr; }
  .seo-root .calc-panel, .seo-root .calc-out { padding: 22px; }
  .seo-root .calc-grid > *, .seo-root .hero-grid > * { min-width: 0; }
  .seo-root .num-input { min-width: 0; }
  .seo-root .spec-grid { grid-template-columns: 1fr; gap: 32px; }
  .seo-root .docs-grid { grid-template-columns: 1fr; }
  .seo-root .app-grid { grid-template-columns: 1fr; }
  .seo-root .serv-grid { grid-template-columns: 1fr; }
  .seo-root .sim-card { flex-basis: 200px; }
  .seo-root .final h2 { font-size: 28px; }
  .seo-root .final-in { flex-direction: column; align-items: flex-start; gap: 24px; }
  .seo-root .sb-price { font-size: 18px; }
  .seo-root .sb-cta .btn-outline { display: none; }
  .seo-root .sb-info .sb-art { display: none; }
  .seo-root .modal { padding: 24px; }
  .seo-root .field-row { grid-template-columns: 1fr; }
  .seo-root .share-btn { flex: 1; justify-content: center; }
}

/* alias — Tweak preview frame only (verbatim of the @media rules above) */

/* ════════════════════════════════════════════════════════════════════
   TWEAK MOBILE PREVIEW — pin viewport-fixed chrome to the 430px frame.
   On a REAL phone the viewport IS the frame, so .stickybar/.drawer keep
   which only the simulated preview frame carries).
   ════════════════════════════════════════════════════════════════════ */
  transform: translateX(-50%) translateY(110%); }


/* ===== Mobile (converted from .is-mobile class) ===== */
@media (max-width: 768px) {
  .seo-root .container { width: 100%; padding: 0 16px; }

  .seo-root .nav-in { padding: 0 16px; }
  .seo-root .nav-links, .seo-root .nav-phone { display: none; }
  .seo-root .nav-burger { display: inline-flex; }

  .seo-root .sec { padding: 56px 0; }
  .seo-root .sec-title { font-size: 30px; }

  .seo-root .hero { padding: 22px 0 52px; }
  .seo-root .h1 { font-size: 30px; }
  .seo-root .hero-grid { grid-template-columns: 1fr; gap: 24px; }

  .seo-root .gal { grid-template-columns: 1fr; }

  .seo-root .calc-grid { grid-template-columns: 1fr; }

  .seo-root .spec-grid { grid-template-columns: 1fr 1fr; }

  .seo-root .modal { padding: 24px; }

  .seo-root .stickybar { bottom: 0; top: auto; position: fixed; left: 0; right: 0; border-radius: 0; }

  .seo-root .drawer-ov { display: flex; }

  .seo-root .toast-wrap { bottom: 80px; }
}
/* === Товарная страница (ProductPage, D-01…D-09) ===
 * Дизайн: claude.ai/design «Товарная страница.dc.html». Классы pp-*.
 * Desktop 55/45; mobile — одна колонка, галерея full-bleed, bottom-bar. */

/* анимации чертёжного движка (ProductDrawing) */
@keyframes ppDraw { to { stroke-dashoffset: 0; } }
@keyframes ppFade { to { opacity: 1; } }
@keyframes ppBreathe {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(96, 165, 250, 0)); }
  50% { filter: drop-shadow(0 0 7px rgba(96, 165, 250, 0.4)); }
}

.pp { background: var(--midnight); color: var(--snow); padding-top: 64px; }
.pp-wrap { max-width: 1760px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 64px); }

.pp-h2 { font: 600 30px/1.2 var(--font-sans); letter-spacing: -0.01em; color: var(--snow); margin: 0 0 6px; }
.pp-sub { font: 400 12px var(--font-mono); color: var(--fog); letter-spacing: 0.06em; margin-bottom: 26px; }
.pp-p { font: 400 14px/1.6 var(--font-sans); color: var(--fg-muted); margin: 0 0 24px; }
.pp-kicker { font: 500 12px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--flame); margin-bottom: 12px; }

/* ── D-01 hero ─────────────────────────────────────────────────────── */
.pp-hero { padding: 32px clamp(20px, 4vw, 64px) 64px; max-width: 1760px; margin: 0 auto; }
.pp-hero-in { display: grid; grid-template-columns: 55fr 45fr; gap: 56px; align-items: start; }

.pp-stage { position: relative; aspect-ratio: 1; background: #0D1424; border: 1px solid rgba(71, 85, 105, 0.5); border-radius: 16px; overflow: hidden; }
.pp-slide { position: absolute; inset: 0; }
.pp-photo { position: absolute; inset: 0; background: #fff; display: flex; align-items: center; justify-content: center; }
.pp-photo img { width: 92%; height: 92%; object-fit: contain; }
.pp-photo.cover img { width: 100%; height: 100%; object-fit: cover; }
.pp-angle-badge { position: absolute; top: 16px; left: 16px; display: flex; align-items: center; gap: 7px; padding: 7px 11px; background: rgba(10, 18, 40, 0.78); backdrop-filter: blur(8px); border: 1px solid rgba(255, 107, 53, 0.55); border-radius: 8px; pointer-events: none; }
.pp-angle-badge span { font: 500 13px var(--font-mono); color: var(--flame); letter-spacing: 0.02em; }

.pp-drawing { position: absolute; inset: 0; background-image: linear-gradient(rgba(71, 85, 105, 0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(71, 85, 105, 0.14) 1px, transparent 1px); background-size: 28px 28px; }
.pp-drawing-svg { position: absolute; inset: 0; padding: 20px; }
.pp-drawing-cap { position: absolute; left: 16px; font: 400 11px var(--font-mono); color: var(--fog); letter-spacing: 0.1em; }
.pp-drawing-cap.top { top: 14px; }
.pp-drawing-cap.bottom { bottom: 14px; letter-spacing: 0.06em; }

.pp-thumbs { display: flex; gap: 10px; margin-top: 14px; }
.pp-thumb { width: 92px; height: 68px; background: #0D1424; border: 1.5px solid rgba(71, 85, 105, 0.6); border-radius: 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; color: var(--fog); }
.pp-thumb-glyph { font: 500 16px var(--font-mono); }
.pp-thumb-label { font: 500 10px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.pp-thumb.active { border-color: var(--flame); background: rgba(255, 107, 53, 0.08); color: var(--snow); }
.pp-dots { display: none; gap: 10px; justify-content: center; margin-top: 4px; }
.pp-dots button { width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.pp-dots button span { width: 10px; height: 10px; border-radius: 50%; display: block; }

/* B: типоразмерный ряд */
.pp-sizes { background: var(--steel); border: 1px solid rgba(71, 85, 105, 0.5); border-radius: 12px; padding: 20px 24px; margin-top: 14px; }
.pp-sizes-h { font: 500 12px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fog); margin-bottom: 10px; }
.pp-sizes-list { display: flex; flex-direction: column; }
.pp-size-row { display: grid; grid-template-columns: 1.1fr 1.3fr 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; margin: 0 -12px; border-radius: 8px; color: var(--snow); text-decoration: none; }
a.pp-size-row:hover { background: rgba(71, 85, 105, 0.25); }
.pp-size-row.cur { background: rgba(255, 107, 53, 0.08); }
.pp-size-name { font: 500 14px var(--font-mono); }
.pp-size-row.cur .pp-size-name { color: var(--flame); }
.pp-size-sku { font: 400 12px var(--font-mono); color: var(--fog); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-size-note { font: 500 11px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ok); }
.pp-size-tag { font: 500 12px var(--font-mono); color: var(--fog); }
.pp-size-row.cur .pp-size-tag { color: var(--flame); font-size: 10px; letter-spacing: 0.06em; }
.pp-sizes-more { display: inline-block; margin-top: 12px; font: 500 13px var(--font-sans); color: var(--electric); text-decoration: none; }
.pp-sizes-more:hover { color: var(--sky); }

/* C: бренд-блок */
.pp-brand { background: var(--steel); border: 1px solid rgba(71, 85, 105, 0.5); border-radius: 12px; padding: 24px; display: flex; gap: 20px; align-items: flex-start; margin-top: 14px; }
.pp-brand-logo { width: 108px; height: 88px; flex-shrink: 0; background: var(--midnight); border: 1px solid var(--slate); border-radius: 8px; display: flex; align-items: center; justify-content: center; font: 700 15px var(--font-mono); letter-spacing: 0.14em; color: var(--snow); overflow: hidden; }
.pp-brand-logo img { width: 92%; height: auto; display: block; }
.pp-brand-name { font: 600 16px var(--font-sans); color: var(--snow); margin-bottom: 8px; }
.pp-brand-text { font: 400 13px/1.55 var(--font-sans); color: var(--fg-muted); margin: 0 0 10px; }
.pp-brand-badges { display: flex; gap: 8px; flex-wrap: wrap; }

.pp-badge { font: 500 10px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; border-radius: 999px; padding: 4px 10px; align-self: flex-start; white-space: nowrap; }
.pp-badge.ok { color: var(--ok); border: 1px solid rgba(16, 185, 129, 0.45); }
.pp-badge.warn { color: var(--warn); border: 1px solid rgba(245, 158, 11, 0.45); }
.pp-badge.err { color: var(--err); border: 1px solid rgba(239, 68, 68, 0.45); }
.pp-badge.neutral { color: var(--snow); border: 1px solid var(--slate); }

/* мета-колонка */
.pp-bc { font: 400 12px var(--font-mono); color: var(--fog); letter-spacing: 0.06em; margin-bottom: 6px; }
.pp-bc a { color: var(--fog); text-decoration: none; }
.pp-bc a:hover { color: var(--snow); }
.pp-url { font: 400 11px var(--font-mono); color: var(--electric); letter-spacing: 0.04em; margin-bottom: 18px; overflow-wrap: anywhere; }
.pp-h1 { font: 700 46px/1.05 var(--font-sans); letter-spacing: -0.03em; color: var(--snow); margin: 0 0 14px; text-wrap: balance; }
.pp-sku-row { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.pp-sku-lbl { font: 400 12px var(--font-sans); color: var(--fog); }
.pp-sku { font: 500 14px var(--font-mono); color: var(--snow); letter-spacing: 0.04em; }
.pp-copy { height: 28px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--slate); background: transparent; color: var(--fog); font: 500 11px var(--font-mono); cursor: pointer; letter-spacing: 0.06em; }
.pp-copy:hover { color: var(--snow); border-color: var(--snow); }
.pp-lead { font: 400 15px/1.6 var(--font-sans); color: var(--fg-muted); margin: 0 0 20px; max-width: 480px; }
.pp-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.pp-chip { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid var(--slate); border-radius: 999px; font: 500 12px var(--font-sans); color: var(--snow); white-space: nowrap; }

.pp-rows { display: flex; flex-direction: column; border-top: 1px solid rgba(71, 85, 105, 0.5); }
.pp-row { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(71, 85, 105, 0.35); }
.pp-row-k { font: 400 13px var(--font-sans); color: var(--fog); white-space: nowrap; }
.pp-row-dots { flex: 1; border-bottom: 1px dotted rgba(71, 85, 105, 0.6); transform: translateY(-3px); }
.pp-row-v { font: 500 13px var(--font-mono); color: var(--snow); letter-spacing: 0.02em; text-align: right; }
.pp-row-v.accent { color: var(--flame); }

.pp-price-block { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 20px 0 22px; flex-wrap: wrap; }
.pp-price-line { display: flex; align-items: baseline; gap: 8px; }
.pp-price { font: 500 40px/1 var(--font-mono); color: var(--snow); letter-spacing: -0.01em; }
.pp-price.na { font-size: 24px; color: var(--fg-muted); }
.pp-price-unit { font: 400 17px var(--font-mono); color: var(--fog); }
.pp-price-note { font: 400 11px var(--font-mono); color: var(--fog); margin-top: 6px; letter-spacing: 0.04em; }
.pp-status { display: flex; align-items: center; gap: 8px; padding-bottom: 4px; font: 500 12px var(--font-mono); letter-spacing: 0.04em; }
.pp-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: currentColor; }
.pp-status.ok, .pp-order-status.ok, .pp-bottom-status.ok { color: var(--ok); }
.pp-status.warn, .pp-order-status.warn, .pp-bottom-status.warn { color: var(--warn); }

.pp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 28px; border-radius: 8px; font: 500 16px var(--font-sans); cursor: pointer; transition: all 220ms var(--ease-out, ease-out); text-decoration: none; }
.pp-btn.primary { border: 1.5px solid var(--flame); background: var(--flame); color: var(--snow); }
.pp-btn.primary:hover { background: var(--ember); }
.pp-btn.outline { border: 1.5px solid var(--snow); background: transparent; color: var(--snow); font-size: 15px; padding: 0 24px; }
.pp-btn.outline:hover { border-color: var(--flame); color: var(--flame); }
.pp-btn.outline:disabled { opacity: 0.55; cursor: default; border-color: var(--slate); color: var(--fg-muted); }
.pp-btn.sm { height: 44px; padding: 0 22px; font-size: 14px; }
.pp-btn.wide { width: 100%; margin-top: 16px; height: 52px; font-size: 15px; }
.pp-btn-arrow { font-size: 18px; }
.pp-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.pp-cta-note { font: 400 12px/1.5 var(--font-sans); color: var(--fog); margin-top: 12px; }

/* лид-магнит «Получить прайс-лист» под CTA */
.pp-price-magnet { display: block; margin-top: 14px; padding: 0; background: none; border: none; text-align: left; cursor: pointer; font: 400 13px/1.5 var(--font-sans); color: var(--fog); }
.pp-price-magnet b { color: var(--snow); font-weight: 600; border-bottom: 1px dashed var(--slate); padding-bottom: 1px; transition: color 0.15s, border-color 0.15s; }
.pp-price-magnet:hover b { color: var(--amber, #f59e0b); border-color: currentColor; }

.pp-share { display: flex; gap: 8px; margin-top: 22px; flex-wrap: wrap; }
.pp-share button, .pp-share a { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--slate); background: transparent; color: var(--fog); font: 500 12px var(--font-mono); letter-spacing: 0.04em; cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; }
.pp-share button:hover, .pp-share a:hover { color: var(--snow); border-color: var(--snow); }

/* ── D-02 спецификация ─────────────────────────────────────────────── */
.pp-spec { padding: 16px 0 72px; }
.pp-spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pp-spec-card { background: var(--steel); border: 1px solid rgba(71, 85, 105, 0.4); border-radius: 12px; padding: 22px 24px; }
.pp-spec-title { font: 500 11px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--flame); margin-bottom: 12px; }
.pp-spec-row { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(71, 85, 105, 0.3); }
.pp-spec-row:last-child { border-bottom: 0; }
.pp-spec-k { font: 400 13px var(--font-sans); color: var(--fog); }
.pp-spec-v { flex: 1; font: 500 13px var(--font-mono); color: var(--snow); letter-spacing: 0.02em; text-align: right; }
.pp-spec-v.accent { color: var(--flame); }

/* ── D-03 калькулятор ──────────────────────────────────────────────── */
.pp-calc { background: #060B1B; border-top: 1px solid rgba(71, 85, 105, 0.35); border-bottom: 1px solid rgba(71, 85, 105, 0.35); padding: 64px 0; }
.pp-calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.pp-calc-inputs { display: flex; gap: 16px; flex-wrap: wrap; }
.pp-calc-inputs label { display: flex; flex-direction: column; gap: 8px; }
.pp-calc-inputs span { font: 400 12px var(--font-sans); color: var(--fog); }
.pp-calc-inputs input { width: 170px; height: 48px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--slate); background: var(--midnight); color: var(--snow); font: 500 16px var(--font-mono); outline: none; }
.pp-calc-inputs input:focus { border-color: var(--electric); }
.pp-calc-out { background: rgba(255, 107, 53, 0.06); border: 1px solid rgba(255, 107, 53, 0.3); border-radius: 12px; padding: 26px 28px; }
.pp-calc-line { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed rgba(71, 85, 105, 0.5); }
.pp-calc-line span { font: 400 13px var(--font-sans); color: var(--fg-muted); }
.pp-calc-line b { font: 500 14px var(--font-mono); color: var(--snow); font-weight: 500; }
.pp-calc-total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 4px; }
.pp-calc-total span { font: 400 14px var(--font-sans); color: var(--fg-muted); }
.pp-calc-total b { font: 500 24px var(--font-mono); color: var(--flame); font-weight: 500; }

/* ── D-04 применение ───────────────────────────────────────────────── */
.pp-apply { padding: 72px 0 64px; }
.pp-apply-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pp-apply-card { background: var(--steel); border: 1px solid rgba(71, 85, 105, 0.4); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.pp-apply-name { font: 600 15px var(--font-sans); color: var(--snow); }
.pp-apply-note { font: 400 12.5px/1.55 var(--font-sans); color: var(--fg-muted); }

/* ── D-05 CTA-блок ─────────────────────────────────────────────────── */
.pp-order { padding: 8px 0 72px; }
.pp-order-card { background: #060B1B; border: 1px solid var(--slate); border-radius: 16px; padding: 36px 40px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.pp-order-title { font: 600 24px/1.25 var(--font-sans); letter-spacing: -0.01em; color: var(--snow); margin-bottom: 8px; }
.pp-order-spec { font: 400 13px var(--font-mono); color: var(--fog); letter-spacing: 0.04em; }
.pp-order-status { font: 400 12px var(--font-mono); letter-spacing: 0.04em; margin-top: 6px; }
.pp-order-right { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.pp-order-price { display: flex; align-items: baseline; gap: 6px; }
.pp-order-price b { font: 500 32px/1 var(--font-mono); color: var(--snow); font-weight: 500; }
.pp-order-price span { font: 400 15px var(--font-mono); color: var(--fog); }

/* ── D-06 похожие ──────────────────────────────────────────────────── */
.pp-related { padding: 0 0 72px; }
.pp-rel-row { margin-bottom: 22px; }
.pp-rel-label { font: 500 11px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fog); margin-bottom: 10px; }
.pp-rel-cards { display: flex; gap: 10px; flex-wrap: wrap; }
.pp-rel-card { width: 168px; height: 112px; background: var(--steel); border: 1.5px solid rgba(71, 85, 105, 0.5); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; transition: border-color 180ms var(--ease-out, ease-out); }
a.pp-rel-card:hover { border-color: var(--snow); }
.pp-rel-card.cur { background: rgba(255, 107, 53, 0.08); border-color: var(--flame); }
.pp-rel-big { font: 500 22px var(--font-mono); color: var(--snow); letter-spacing: -0.01em; }
.pp-rel-card.cur .pp-rel-big { color: var(--flame); }
.pp-rel-sub { font: 400 10.5px/1.5 var(--font-mono); color: var(--fog); letter-spacing: 0.04em; }
.pp-rel-sub em { font: 500 9.5px var(--font-mono); color: var(--flame); letter-spacing: 0.08em; font-style: normal; }

/* ── D-07 FAQ ──────────────────────────────────────────────────────── */
.pp-faq { padding: 0 0 72px; }
.pp-faq-in { max-width: 860px; }
.pp-faq-in .pp-h2 { margin-bottom: 18px; }
.pp-faq-list { border-top: 1px solid rgba(71, 85, 105, 0.5); }
.pp-faq-item { border-bottom: 1px solid rgba(71, 85, 105, 0.5); }
.pp-faq-item > button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; background: transparent; border: 0; cursor: pointer; text-align: left; }
.pp-faq-item > button span:first-child { font: 500 16px/1.4 var(--font-sans); color: var(--snow); }
.pp-faq-chev { font: 400 20px var(--font-mono); color: var(--fog); flex-shrink: 0; }
.pp-faq-item > p { font: 400 14px/1.65 var(--font-sans); color: var(--fg-muted); margin: 0; padding: 0 40px 18px 0; max-width: 680px; }

/* ── D-08 SEO-текст (светлый) ──────────────────────────────────────── */
.pp-seo { background: var(--cloud); padding: 72px 32px; }
.pp-seo-in { max-width: 820px; margin: 0 auto; }
.pp-seo-block { margin-bottom: 36px; }
.pp-seo-block:last-child { margin-bottom: 0; }
.pp-seo h2 { font: 600 22px/1.3 var(--font-sans); letter-spacing: -0.01em; color: var(--ink); margin: 0 0 12px; }
.pp-seo p { font: 400 15px/1.75 var(--font-sans); color: #475569; margin: 0 0 14px; text-wrap: pretty; }

/* ── D-09 CTA-полоса ───────────────────────────────────────────────── */
.pp-band { background: var(--flame); padding: 44px 0; }
.pp-band-in { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.pp-band-title { font: 700 26px/1.2 var(--font-sans); letter-spacing: -0.02em; color: var(--snow); }
.pp-band-text { font: 400 15px/1.5 var(--font-sans); color: rgba(255, 255, 255, 0.85); margin-top: 4px; }
.pp-band-btn { height: 56px; padding: 0 28px; border-radius: 8px; border: 0; background: var(--midnight); color: var(--snow); font: 500 15px var(--font-sans); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; text-decoration: none; }
.pp-band-btn:hover { background: #060B1B; }

/* ── sticky-bar (desktop) ──────────────────────────────────────────── */
.pp-sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 1200; background: rgba(10, 18, 40, 0.94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(71, 85, 105, 0.5); transform: translateY(-100%); transition: transform 260ms var(--ease-out, ease-out); }
.pp-sticky.on { transform: translateY(0); }
.pp-sticky-in { max-width: 1760px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 64px); height: 64px; display: flex; align-items: center; gap: 16px; }
.pp-sticky-ico { width: 40px; height: 40px; background: #0D1424; border: 1px solid var(--slate); border-radius: 6px; display: flex; align-items: center; justify-content: center; font: 500 14px var(--font-mono); color: var(--electric); flex-shrink: 0; }
.pp-sticky-name { font: 600 15px var(--font-sans); color: var(--snow); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-sticky-gap { flex: 1; }
.pp-sticky-price { font: 500 18px var(--font-mono); color: var(--snow); white-space: nowrap; }

/* ── bottom-bar (mobile) ───────────────────────────────────────────── */
.pp-bottom { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1200; background: rgba(10, 18, 40, 0.94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid rgba(71, 85, 105, 0.5); padding: 12px 16px; align-items: center; justify-content: space-between; gap: 12px; transform: translateY(100%); transition: transform 260ms var(--ease-out, ease-out); }
.pp-bottom.on { transform: translateY(0); }
.pp-bottom-price { font: 500 20px var(--font-mono); color: var(--snow); }
.pp-bottom-status { font: 400 10px var(--font-mono); letter-spacing: 0.04em; }
.pp-bottom .pp-btn { height: 48px; padding: 0 24px; font-size: 15px; }

/* toast */
.pp-toast { position: fixed; bottom: 28px; left: 50%; transform: translate(-50%, 12px); opacity: 0; z-index: 1400; background: var(--steel); border: 1px solid var(--slate); border-radius: 8px; padding: 12px 20px; font: 500 13px var(--font-mono); color: var(--snow); letter-spacing: 0.04em; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); transition: all 300ms var(--ease-out, ease-out); pointer-events: none; }
.pp-toast.on { transform: translate(-50%, 0); opacity: 1; }

/* ── mobile ────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .pp-wrap, .pp-hero { padding-left: 16px; padding-right: 16px; }
  .pp-hero { padding-top: 20px; padding-bottom: 48px; }
  .pp-hero-in { grid-template-columns: 1fr; gap: 20px; }
  .pp-gallery-col { margin: 0 -16px; }
  .pp-stage { border-radius: 0; border-left: 0; border-right: 0; }
  .pp-thumbs { display: none; }
  .pp-dots { display: flex; }
  .pp-sizes, .pp-brand { margin-left: 16px; margin-right: 16px; }
  .pp-size-row { grid-template-columns: 1fr 1fr auto; }
  .pp-size-sku { display: none; }
  .pp-h1 { font-size: 30px; }
  .pp-price { font-size: 32px; }
  .pp-h2 { font-size: 24px; }
  .pp-spec-grid, .pp-calc-grid { grid-template-columns: 1fr; }
  .pp-calc-grid { gap: 28px; }
  .pp-apply-grid { grid-template-columns: 1fr 1fr; }
  .pp-order-card { padding: 26px 22px; }
  .pp-rel-card { width: 148px; height: 104px; }
  .pp-seo { padding: 48px 16px; }
  .pp-sticky { display: none; }
  .pp-bottom { display: flex; }
}

@media print {
  .pp-sticky, .pp-bottom, .pp-toast, .pp-share, .pp-cta-row, .pp-band, .pp-calc { display: none !important; }
  .pp { background: #fff; color: #000; padding-top: 0; }
}
/* адаптивно-широкий контейнер: на больших мониторах тянется, плавные боковые
   отступы вместо фикс. полей (узкий центрированный 1180px оставлял по бокам
   голый фон — «чёрные полосы», требование владельца: полей быть не должно) */
.lp {
  background: var(--midnight);
  min-height: 100vh;
  color: var(--snow);
  padding: 32px clamp(20px, 4vw, 64px) 80px;
  max-width: 2160px;
  margin: 0 auto;
}
/* исторический алиас (раньше широкими были только разделы каталога) */
.lp.lp-wide { max-width: 2160px; padding-inline: clamp(20px, 4vw, 64px); }
.lp-bc { font: 500 12px/1 var(--font-mono); letter-spacing: 0.04em; color: var(--fog); margin-bottom: 22px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.lp-bc a { color: var(--fog); text-decoration: none; }
.lp-bc a:hover { color: var(--flame); }
.lp-bc-sep { margin: 0 8px; opacity: 0.5; }

.lp-head { margin-bottom: 28px; }
.lp-h1 { font: 700 clamp(30px, 4vw, 46px)/1.05 var(--font-sans); letter-spacing: -0.03em; color: var(--snow); margin: 0 0 16px; }
.lp-lead { font: 400 17px/1.6 var(--font-sans); color: var(--fg-muted); max-width: 760px; margin: 0 0 22px; }
.lp-cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

.lp-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 24vw, 400px); gap: 28px; align-items: start; }
.lp-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.lp-card { background: var(--steel); border: 1px solid rgba(71,85,105,0.45); border-radius: var(--r-3); padding: 24px 26px; }
.lp-h2 { font: 600 21px/1.2 var(--font-sans); color: var(--snow); margin: 0 0 14px; letter-spacing: -0.01em; }
.lp-p { font: 400 15.5px/1.65 var(--font-sans); color: var(--fg-muted); margin: 0 0 12px; }
.lp-p:last-child { margin-bottom: 0; }
.lp-p a { color: var(--flame); text-decoration: none; }
.lp-p a:hover { text-decoration: underline; }

.lp-spec { width: 100%; border-collapse: collapse; }
.lp-spec td { padding: 11px 0; border-bottom: 1px solid rgba(71,85,105,0.3); font: 400 15px var(--font-sans); }
.lp-spec tr:last-child td { border-bottom: 0; }
.lp-spec td:first-child { color: var(--fg-muted); width: 55%; }
.lp-spec td:last-child { color: var(--snow); font-family: var(--font-mono); font-weight: 500; }

.lp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-chip { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: var(--r-pill); background: rgba(71,85,105,0.2); border: 1px solid rgba(71,85,105,0.5); color: var(--snow); text-decoration: none; font: 500 14px var(--font-sans); transition: all 0.18s; }
.lp-chip:hover { border-color: var(--flame); color: var(--flame); }
.lp-chip.sm { padding: 6px 11px; font-size: 13px; }

.lp-faq { padding: 14px 0; border-bottom: 1px solid rgba(71,85,105,0.3); }
.lp-faq:last-child { border-bottom: 0; padding-bottom: 0; }
.lp-faq-q { font: 600 15.5px var(--font-sans); color: var(--snow); margin-bottom: 6px; }
.lp-faq-a { font: 400 14.5px/1.6 var(--font-sans); color: var(--fg-muted); }

.lp-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 84px; }
.lp-side { padding: 18px 20px; }
.lp-side-h { font: 500 11px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fog); margin-bottom: 12px; }
.lp-kw { list-style: none; margin: 0; padding: 0; }
.lp-kw li { font: 400 13px/1.5 var(--font-sans); color: var(--fg-muted); padding: 4px 0; border-bottom: 1px dotted rgba(71,85,105,0.25); }
.lp-kw li:last-child { border-bottom: 0; }
.lp-contact { display: flex; flex-direction: column; gap: 12px; }
.lp-phone { font: 600 22px var(--font-sans); color: var(--snow); text-decoration: none; letter-spacing: -0.01em; }
.lp-phone:hover { color: var(--flame); }

.lp-404 { text-align: center; padding-top: 80px; }
.lp-404 .lp-cta-row { justify-content: center; }

/* shared footer for landing/blog/about/404 (header→footer completeness) */
.lpf { margin-top: 64px; border-top: 1px solid rgba(71,85,105,0.4); background: #060b1b; }
.lpf-in { max-width: 1280px; margin: 0 auto; padding: 44px 48px 28px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.lpf-brand { display: flex; flex-direction: column; gap: 12px; max-width: 320px; }
.lpf-logo { display: inline-flex; align-items: center; gap: 9px; }
.lpf-logo span { font: 800 19px/1 var(--font-sans); letter-spacing: 0.06em; color: var(--snow); }
.lpf-tag { font: 400 13px/1.5 var(--font-sans); color: var(--fg-muted); margin: 0; }
.lpf-col { display: flex; flex-direction: column; gap: 10px; }
.lpf-h { font: 600 13px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fog); margin-bottom: 4px; }
.lpf-col a { font: 400 14px/1 var(--font-sans); color: var(--fg-muted); text-decoration: none; }
.lpf-col a:hover { color: var(--flame); }
.lpf-phone { font: 600 16px/1 var(--font-sans) !important; color: var(--snow) !important; }
.lpf-bottom { max-width: 1280px; margin: 0 auto; padding: 18px 48px 28px; border-top: 1px solid rgba(71,85,105,0.25); font: 400 12px/1.5 var(--font-mono); color: var(--fog); }
@media (max-width: 768px) {
  .lpf-in { grid-template-columns: 1fr 1fr; gap: 24px; padding: 32px 18px 20px; }
  .lpf-brand { grid-column: 1 / -1; max-width: none; }
  .lpf-bottom { padding: 16px 18px 24px; }
  /* место для плавающей кнопки Max/Telegram (FloatingContacts) в правом нижнем
     углу — иначе последняя строка футера (контакты/копирайт) уходит под виджет */
  .lpf { padding-bottom: 130px; }
}

/* about page */
.ab-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 8px 0 40px; }
.ab-stat { background: var(--steel); border: 1px solid rgba(71,85,105,0.45); border-radius: var(--r-3); padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.ab-stat-n { font: 800 30px/1 var(--font-sans); color: var(--flame); letter-spacing: -0.02em; }
.ab-stat-l { font: 400 13px/1.4 var(--font-sans); color: var(--fg-muted); }
.ab-what { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ab-what-item { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ab-what-h { font: 600 17px/1.2 var(--font-sans); color: var(--snow); }
.ab-what-p { font: 400 14px/1.55 var(--font-sans); color: var(--fg-muted); }
@media (max-width: 900px) { .ab-stats { grid-template-columns: repeat(2, 1fr); } .ab-what { grid-template-columns: 1fr; } }

/* product visual on detail pages */
.lp-media { background: radial-gradient(120% 120% at 50% 25%, #142036 0%, #0a1120 100%); border: 1px solid rgba(71,85,105,0.4); border-radius: var(--r-3); padding: 20px; margin-bottom: 16px; }
.lp-media svg { display: block; width: 100%; height: auto; max-height: 280px; }

/* dimensioned technical drawing (per-variant) */
.lp-media.pa { position: relative; margin: 0 0 16px; padding: 18px 18px 16px; }
.pa-badge { position: absolute; top: 14px; left: 16px; z-index: 2;
  font: 600 10px/1 var(--font-mono); letter-spacing: 0.14em; color: var(--flame);
  background: rgba(255,107,53,0.1); border: 1px solid rgba(255,107,53,0.3);
  padding: 5px 9px; border-radius: 5px; }
.pa-xsec { position: absolute; top: 12px; right: 12px; z-index: 2; width: 92px; text-align: center; }
.pa-xsec svg { width: 72px !important; height: 72px; margin: 0 auto; display: block; max-height: none;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5)); }
.pa-xsec-l { display: block; font: 500 9.5px/1.3 var(--font-mono); color: var(--fg-muted); letter-spacing: 0.02em; margin-top: 4px; }
.pa-dims { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.pa-dims span { font: 500 11px/1 var(--font-mono); color: var(--fg-muted);
  background: rgba(31,41,55,0.5); border: 1px solid rgba(71,85,105,0.4);
  padding: 6px 9px; border-radius: 5px; letter-spacing: 0.02em; }
.pa-dims b { color: var(--snow); font-weight: 700; margin-right: 2px; }
.pa-note { margin-top: 10px; font: 400 10.5px/1.45 var(--font-sans); color: var(--fog); text-wrap: pretty; }

/* product price row in header */
.lp-price-row { display: flex; align-items: baseline; gap: 16px; margin: 4px 0 18px; flex-wrap: wrap; }
.lp-price { font: 700 30px/1 var(--font-sans); color: var(--flame); letter-spacing: -0.01em; }
.lp-sku { font: 500 13px var(--font-mono); color: var(--fog); letter-spacing: 0.04em; }
.lp-est { display: inline-block; margin-left: 6px; font: 500 9px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fog); border: 1px solid rgba(107,114,128,0.5); border-radius: 4px; padding: 2px 5px; vertical-align: middle; }

/* related-articles list in sidebar */
.lp-related { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lp-related a { color: var(--snow); text-decoration: none; font: 500 14px/1.35 var(--font-sans); display: block; }
.lp-related a:hover { color: var(--flame); }

/* blog index */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.blog-card { display: flex; flex-direction: column; border-radius: var(--r-3); overflow: hidden;
  background: var(--steel); border: 1px solid rgba(71,85,105,0.45); text-decoration: none; transition: transform .2s, border-color .2s, box-shadow .2s; }
.blog-card:hover { transform: translateY(-3px); border-color: var(--flame); box-shadow: var(--shadow-3); }
.blog-card-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #0a1120; border-bottom: 1px solid rgba(71,85,105,0.4); }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease-out); }
.blog-card:hover .blog-card-media img { transform: scale(1.04); }
.blog-card-body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; flex: 1; }
.blog-card-kicker { font: 500 11px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--flame); }
.blog-card-title { font: 600 19px/1.25 var(--font-sans); color: var(--snow); letter-spacing: -0.01em; }
.blog-card-excerpt { font: 400 14px/1.55 var(--font-sans); color: var(--fg-muted); flex: 1; }
.blog-card-more { display: inline-flex; align-items: center; gap: 7px; font: 500 14px var(--font-sans); color: var(--flame); margin-top: 4px; }

/* article hero + inline figures (info/blog pages) */
.lp-hero { margin: 0 0 20px; border-radius: var(--r-3); overflow: hidden; border: 1px solid rgba(71,85,105,0.4); background: #0a1120; }
.lp-hero img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.lp-figure { margin: 16px 0 0; border-radius: var(--r-3); overflow: hidden; border: 1px solid rgba(71,85,105,0.35); background: #0a1120; }
.lp-figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.lp-hero figcaption, .lp-figure figcaption { font: 400 13px/1.5 var(--font-sans); color: var(--fg-muted);
  padding: 10px 16px; border-top: 1px solid rgba(71,85,105,0.3); background: rgba(10,17,32,0.5); }

@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr; } }

@media (max-width: 900px) {
  .lp { padding: 24px 16px 64px; }
  .lp-grid { grid-template-columns: 1fr; gap: 18px; }
  .lp-aside { position: static; flex-direction: column; }
  .lp-cta-row .btn { width: 100%; justify-content: center; }
}

/* ═══ Разделы каталога из прайсов (SectionCatalog: фланцы/детали/арматура/ЭС/ревизии) ═══ */
.sec-filters { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 20px; }
.sec-fgroup { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sec-fl { font: 500 11px var(--font-mono); color: var(--fog); letter-spacing: 0.1em; margin-right: 2px; }
.lp-chip.on { background: var(--flame); border-color: var(--flame); color: #fff; }
.sec-dn { min-width: 44px; height: 32px; padding: 0 8px; border-radius: var(--r-pill); border: 1px solid var(--slate); background: transparent; color: var(--fg-muted); font: 600 13px var(--font-mono); cursor: pointer; transition: all 150ms var(--ease-out); }
.sec-dn:hover { border-color: var(--flame); color: var(--snow); }
.sec-dn.on { background: var(--flame); border-color: var(--flame); color: #fff; }
/* a11y: ≥44px tap target on touch devices (WCAG 2.5.5 / Apple HIG) */
@media (pointer: coarse) { .sec-dn { min-height: 44px; } }
.sec-frow { gap: 10px; }
.sec-search { flex: 1; min-width: 220px; max-width: 420px; height: 40px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--slate); background: rgba(31,41,55,0.4); color: var(--snow); font: 400 14px var(--font-sans); outline: none; transition: border-color 160ms; }
.sec-search:focus { border-color: var(--flame); }
.sec-search::placeholder { color: rgba(248,250,252,0.32); }
.sec-count { font: 500 13px var(--font-sans); color: var(--fg-muted); margin-bottom: 10px; }
.sec-tbl-wrap { overflow-x: auto; border: 1px solid rgba(71,85,105,0.4); border-radius: var(--r-3); background: var(--steel); }
.sec-tbl { width: 100%; border-collapse: collapse; min-width: 640px; }
.sec-tbl th { font: 600 10.5px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fog); text-align: left; padding: 12px 14px; border-bottom: 1px solid rgba(71,85,105,0.5); }
.sec-tbl td { padding: 11px 14px; border-bottom: 1px solid rgba(71,85,105,0.25); font: 400 14px/1.4 var(--font-sans); color: var(--snow); }
.sec-tbl tr:last-child td { border-bottom: 0; }
.sec-tbl tbody tr { transition: background 120ms; }
.sec-tbl tbody tr:hover { background: rgba(255,107,53,0.05); }
.sec-tbl .mono { font-family: var(--font-mono); font-size: 13px; }
.sec-tbl .sku { color: var(--fg-muted); white-space: nowrap; }
.sec-tbl .nm { min-width: 260px; }
.sec-tbl .r { text-align: right; }
.sec-tbl .price { font: 600 14px var(--font-mono); white-space: nowrap; }
.sec-brand { display: inline-block; margin-left: 8px; font: 500 10px var(--font-mono); color: var(--electric); border: 1px solid rgba(59,130,246,0.4); border-radius: 4px; padding: 2px 6px; vertical-align: middle; }
.sec-buy { height: 32px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--flame); background: transparent; color: var(--flame); font: 600 12.5px var(--font-sans); cursor: pointer; white-space: nowrap; transition: all 150ms; }
.sec-buy:hover { background: var(--flame); color: #fff; }
.sec-more { display: flex; justify-content: center; padding: 20px 0 4px; }
.sec-empty { padding: 28px 0; color: var(--fg-muted); font: 400 15px var(--font-sans); }
.sec-link { background: none; border: 0; color: var(--flame); cursor: pointer; font: inherit; text-decoration: underline; }
.lp-sizes-grp + .lp-sizes-grp { margin-top: 20px; }
.lp-sizes-grp .sec-tbl-wrap { margin-top: 6px; }
@media (max-width: 768px) {
  .sec-tbl { min-width: 560px; }
  .sec-search { min-width: 100%; }
}
.sec-nm-link { color: var(--snow); text-decoration: none; border-bottom: 1px dotted rgba(148,163,184,0.35); transition: color 140ms, border-color 140ms; }
.sec-nm-link:hover { color: var(--flame); border-color: var(--flame); }
.si-media { display: flex; flex-direction: column; align-items: center; padding: 26px 20px 16px; }
.si-media > svg:last-of-type { max-width: 340px; }
/* фирменный рендер группы на детальной странице позиции */
.si-photo { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-2); overflow: hidden; position: relative; }
.si-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(var(--si-zoom, 1)); }
.si-photo.studio { background: radial-gradient(120% 95% at 50% 20%, #F4F6F9, #E9EDF2 70%, #DFE4EB); }
.si-photo.studio img { object-fit: contain; padding: 3%; mix-blend-mode: multiply; }

/* ═══ смета (мультизаявка) в разделах ═══ */
.sec-tbl th.chk, .sec-tbl td.chk { width: 36px; padding-right: 4px; }
.sec-chk { width: 17px; height: 17px; accent-color: var(--flame); cursor: pointer; }
.sec-tbl tbody tr.sel { background: rgba(255,107,53,0.07); }
/* ── Единая карточка-семейство (все разделы каталога) ─────────────────
   Каркас карточки — .ccard (см. catalog-card.css). Здесь остаются: сетка
   .fc-grid, раскрытие вариантов (.fc-variants и т.п.), футер (.fc-price/
   .fc-cta/.fc-btn — используются и в footer, и в раскрытых вариантах),
   оболочка магазина (.fcat*) и list-режим. Токены — shared.css. */

.fc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 18px;
  padding: 6px 0 40px;
  align-items: stretch;
}
/* карточки одного ряда всегда одной высоты, цена прижата к низу на одной
   линии (жалоба владельца 2026-07-30: «расположение цены разное») */
.fc-grid > .ccard { height: 100%; }
/* цена/кнопки на ОДНОМ уровне во всех карточках: зоны заголовка и меты
   резервируют высоту (2 строки), футер прижат margin-top:auto (жалоба
   владельца 2026-07-30 — «расположение цены в карточке разное») */
.fc-grid .ccard-title { min-height: 2.6em; }
.fc-grid .ccard-meta { min-height: 40px; align-content: flex-start; }

/* раскрытая карточка-семейство: занимает 2 колонки и раскладывается в ряд —
   фото слева, выбор типоразмера справа (фото не раздувается по высоте) */
.fc-grid:not(.list) .ccard.open { grid-column: span 2; flex-direction: row; align-items: stretch; }
.fc-grid:not(.list) .ccard.open .ccard-photo { flex: 0 0 42%; width: 42%; aspect-ratio: auto; }
.fc-grid:not(.list) .ccard.open .ccard-body { flex: 1; min-width: 0; }
@media (max-width: 640px) {
  .fc-grid:not(.list) .ccard.open { grid-column: span 1; flex-direction: column; }
  .fc-grid:not(.list) .ccard.open .ccard-photo { flex: none; width: auto; aspect-ratio: 4 / 3; }
}

.fc-price .from { font: 500 10px/1 var(--font-mono); color: var(--fog); text-transform: uppercase; letter-spacing: .08em; min-height: 10px; }
.fc-price .v { font: 700 19px/1 var(--font-mono); letter-spacing: -.02em; margin-top: 5px; color: var(--snow); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fc-price .u { font-size: 12px; color: var(--fg-muted); font-weight: 500; }
.fc-cta { display: flex; gap: 8px; align-items: center; }
.fc-open { font: 600 11px/1 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--flame); white-space: nowrap; }
.fc-open::after { content: ' →'; }
.ccard:hover .fc-open { text-decoration: none; }
.fc-btn { height: 38px; padding: 0 13px; border-radius: var(--r-2); border: 0; font: 600 12.5px var(--font-sans); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: .15s; white-space: nowrap; }
.fc-btn.pri { background: var(--flame); color: #fff; } .fc-btn.pri:hover { background: var(--ember); }
.fc-btn.gho { background: transparent; color: var(--snow); border: 1px solid rgba(148,163,184,.22); } .fc-btn.gho:hover { border-color: var(--snow); }
.fc-btn.sz { color: var(--electric); border-color: rgba(59,130,246,.4); } .fc-btn.sz:hover { border-color: var(--electric); }
.fc-btn.ico { width: 38px; padding: 0; justify-content: center; font-size: 18px; flex: none; }

/* expanded variant selector */
.fc-variants { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 16px; border-top: 1px solid rgba(148,163,184,.12); }
.fc-vhead { font: 600 10.5px/1 var(--font-mono); letter-spacing: .1em; color: var(--fog); text-transform: uppercase; padding-top: 14px; }
.fc-vopts { display: flex; flex-wrap: wrap; gap: 7px; }
.fc-vopt { height: 38px; min-width: 48px; padding: 0 12px; border-radius: var(--r-2); border: 1px solid rgba(148,163,184,.22); background: transparent; color: var(--fg-muted); font: 600 12.5px var(--font-mono); cursor: pointer; transition: .14s; font-variant-numeric: tabular-nums; }
.fc-vopt:hover { border-color: var(--fg-muted); color: var(--snow); }
.fc-vopt.on { background: var(--snow); color: #0F172A; border-color: var(--snow); }
.fc-vrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 2px; }
.fc-vsku { font: 500 11px var(--font-mono); color: var(--fog); }
.fc-vv { font: 700 22px/1.1 var(--font-mono); letter-spacing: -.02em; color: var(--snow); font-variant-numeric: tabular-nums; }

/* list view */
.fc-grid.list { grid-template-columns: 1fr; gap: 10px; }
.fc-grid.list .ccard { flex-direction: row; align-items: stretch; }
.fc-grid.list .ccard.open { grid-column: span 1; flex-wrap: wrap; }
.fc-grid.list .ccard-photo { width: 148px; aspect-ratio: auto; flex: none; }
.fc-grid.list .ccard-fade { inset: 0 0 0 auto; width: 40%; height: auto; background: linear-gradient(90deg, transparent, #101B36); }
.fc-grid.list .ccard-status { top: 8px; left: 8px; }
.fc-grid.list .ccard-body { flex-direction: row; align-items: center; gap: 22px; flex-wrap: wrap; }
.fc-grid.list .ccard-title { flex: 1; min-width: 200px; }
.fc-grid.list .ccard-foot { border: 0; margin: 0; padding: 0; }
.fc-grid.list .ccard-eyebrow { width: 100%; margin-bottom: -6px; }
.fc-grid.list .fc-variants { flex-basis: 100%; }
@media (max-width: 720px) {
  .fc-grid.list .ccard { flex-direction: column; }
  .fc-grid.list .ccard-photo { width: 100%; aspect-ratio: 16/10; }
  .fc-grid.list .ccard-fade { inset: auto 0 0 0; width: auto; height: 34%; background: linear-gradient(180deg, transparent, #101B36); }
  .fc-grid.list .ccard-body { flex-direction: column; align-items: stretch; }
}

/* ── оболочка магазина для разделов: сайдбар + выдача ─────────────── */
.fcat { display: grid; grid-template-columns: 252px 1fr; gap: 36px; align-items: start; }
.fcat-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 22px; }
.fcat-h { display: flex; align-items: baseline; justify-content: space-between; font: 700 17px var(--font-sans); color: var(--snow);
  padding-bottom: 12px; border-bottom: 1px solid rgba(148,163,184,.14); }
.fcat-reset { background: none; border: 0; color: var(--flame); font: 500 12.5px var(--font-sans); cursor: pointer; }
.fcat-block { display: flex; flex-direction: column; gap: 10px; }
.fcat-l { font: 600 10.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fog); }
.fcat-l .u { float: right; letter-spacing: .04em; }
.fcat-secs, .fcat-list { display: flex; flex-direction: column; gap: 2px; }
.fcat-sec, .fcat-opt { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-2); border: 0; background: none; text-decoration: none;
  font: 500 13.5px var(--font-sans); color: var(--fg-muted); cursor: pointer; text-align: left; transition: .14s; }
.fcat-sec:hover, .fcat-opt:hover { color: var(--snow); background: rgba(148,163,184,.08); }
.fcat-sec.on, .fcat-opt.on { color: var(--snow); background: rgba(255,107,53,.12); }
.fcat-sec.on { box-shadow: inset 2px 0 0 var(--flame); }
.fcat-sec .n, .fcat-opt .n { font: 500 11px var(--font-mono); color: var(--fog); }
.fcat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fcat-chip { min-width: 44px; height: 32px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid rgba(148,163,184,.22);
  background: transparent; color: var(--fg-muted); font: 600 12px var(--font-mono); cursor: pointer; transition: .14s; }
.fcat-chip:hover { border-color: var(--fg-muted); color: var(--snow); }
.fcat-chip.on { background: var(--electric); border-color: var(--electric); color: #fff; }
.fcat-active { color: var(--flame); }
@media (max-width: 900px) {
  .fcat { grid-template-columns: 1fr; gap: 18px; }
  .fcat-side { position: static; }
  .fcat-secs { display: none; }               /* на мобиле разделы уже в верхней ленте */
  .fcat-list { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .fcat-opt { border: 1px solid rgba(148,163,184,.22); border-radius: var(--r-pill); padding: 7px 12px; }
}
@media (pointer: coarse) { .fcat-chip { min-height: 44px; } }

/* toolbar: view toggle */
.fc-vtog { display: flex; gap: 2px; background: rgba(31,41,55,.5); border: 1px solid rgba(148,163,184,.22); border-radius: var(--r-2); padding: 3px; }
.fc-vtog button { width: 36px; height: 32px; display: grid; place-items: center; background: none; border: 0; border-radius: 6px; color: var(--fg-muted); cursor: pointer; }
.fc-vtog button.on { background: var(--slate); color: var(--snow); }

@media (pointer: coarse) { .fc-vopt, .fc-vtog button { min-height: 44px; } }

/* ── расширенный каталог: сортировка, тогглы, бренд, превью угла ────── */
.sec-sort { height: 38px; padding: 0 10px; border-radius: var(--r-2); border: 1px solid rgba(148,163,184,.22);
  background: rgba(31,41,55,.5); color: var(--snow); font: 500 13px var(--font-sans); cursor: pointer; }
.sec-count-sub { color: var(--fg-muted); }
.fc-brand { color: var(--electric); font-weight: 600; }
.fc-btn.ico.sm { width: 30px; height: 30px; font-size: 15px; }
.fc-btn.ico.sm.done { background: var(--ok, #10B981); }
.fc-btn.cmp.on { border-color: var(--electric); color: var(--electric); }

.fcat-tgl { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border: 0; background: none;
  color: var(--fg-muted); font: 500 13.5px var(--font-sans); cursor: pointer; text-align: left; width: 100%; }
.fcat-tgl:hover { color: var(--snow); }
.fcat-tgl .tgl-track { flex: none; width: 34px; height: 20px; border-radius: 10px; background: rgba(148,163,184,.25);
  position: relative; transition: background .18s; }
.fcat-tgl .tgl-dot { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--snow); transition: left .18s var(--ease-out, ease-out); }
.fcat-tgl.on { color: var(--snow); }
.fcat-tgl.on .tgl-track { background: var(--flame); }
.fcat-tgl.on .tgl-dot { left: 16px; }

/* «магазинная» структура сайдбара: блоки разделены линиями, как фасеты в крупном e-commerce */
.fcat-side .fcat-block + .fcat-block { border-top: 1px solid rgba(148,163,184,.12); padding-top: 18px; }
.fcat-chip.big { min-width: 76px; height: 40px; font-size: 13.5px; font-weight: 700; }
.fcat-cfg { display: block; margin-top: 2px; padding: 10px 12px; border-radius: var(--r-2);
  background: rgba(255,107,53,.08); border: 1px dashed rgba(255,107,53,.35);
  font: 500 12px/1.5 var(--font-sans); color: var(--fg-muted); text-decoration: none; transition: .15s; }
.fcat-cfg b { color: var(--flame); font-weight: 600; }
.fcat-cfg:hover { border-color: var(--flame); color: var(--snow); }

/* ── таблица SKU ─────────────────────────────────────────────────────── */
.sku-wrap { display: flex; flex-direction: column; gap: 14px; padding-bottom: 40px; }
.sku-scroll { overflow-x: auto; border: 1px solid rgba(148,163,184,.16); border-radius: var(--r-3); background: #101B36; }
.sku-table { width: 100%; border-collapse: collapse; font: 500 13px/1.4 var(--font-sans); color: var(--fg-muted); min-width: 720px; }
.sku-table th { position: sticky; top: 0; background: #16213c; color: var(--fog); font: 600 10.5px var(--font-mono);
  letter-spacing: .08em; text-transform: uppercase; text-align: left; padding: 10px 12px; cursor: pointer;
  user-select: none; white-space: nowrap; border-bottom: 1px solid rgba(148,163,184,.18); z-index: 1; }
.sku-table th:hover { color: var(--snow); }
.sku-table th .skt-dir { color: var(--flame); margin-left: 4px; }
.sku-table td { padding: 9px 12px; border-bottom: 1px solid rgba(148,163,184,.08); white-space: nowrap; }
.sku-table tbody tr:hover { background: rgba(148,163,184,.06); }
.sku-table .skt-num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sku-table th.skt-num { text-align: right; }
.sku-table .skt-sku { font-family: var(--font-mono); font-size: 12px; color: var(--fog); }
.sku-table .skt-name { white-space: normal; min-width: 220px; }
.sku-table .skt-name a { color: var(--snow); text-decoration: none; }
.sku-table .skt-name a:hover { color: var(--flame); }
.sku-table .skt-price { color: var(--snow); font-weight: 700; }
.sku-table .skt-req { color: var(--fog); font-weight: 500; font-size: 12px; }
.skt-stock { font: 600 10.5px var(--font-mono); letter-spacing: .05em; text-transform: uppercase; }
.skt-stock.in { color: var(--ok, #10B981); }
.skt-stock.order { color: #F2B23A; }
.skt-add { text-align: right; }
.sku-more { align-self: center; height: 42px; padding: 0 22px; border-radius: var(--r-2);
  border: 1px solid rgba(148,163,184,.25); background: transparent; color: var(--snow);
  font: 600 13px var(--font-sans); cursor: pointer; }
.sku-more:hover { border-color: var(--flame); color: var(--flame); }

/* ── сравнение семейств ─────────────────────────────────────────────── */
.cmpf-bar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 900;
  display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-radius: var(--r-3);
  background: rgba(16,27,54,.96); border: 1px solid rgba(148,163,184,.25); box-shadow: 0 16px 40px rgba(0,0,0,.5);
  backdrop-filter: blur(8px); }
.cmpf-n { font: 600 13px var(--font-sans); color: var(--snow); white-space: nowrap; }
.cmpf-overlay { position: fixed; inset: 0; z-index: 1200; background: rgba(5,8,16,.7); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 24px; }
.cmpf-modal { width: min(960px, 100%); max-height: 86vh; overflow: auto; border-radius: var(--r-4);
  background: #101B36; border: 1px solid rgba(148,163,184,.22); padding: 20px; }
.cmpf-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cmpf-head h3 { margin: 0; font: 700 19px var(--font-sans); color: var(--snow); }
.cmpf-x { background: none; border: 0; color: var(--fog); font-size: 17px; cursor: pointer; }
.cmpf-x:hover { color: var(--snow); }
.cmpf-table th { cursor: default; }
.cmpf-table .cmpf-rm { margin-left: 8px; background: none; border: 0; color: var(--fog); cursor: pointer; font-size: 11px; }
.cmpf-table .cmpf-rm:hover { color: var(--flame); }
.cmpf-diff td { color: var(--snow); }
.cmpf-diff td.skt-sku { color: var(--flame); }

/* ── мобильный bottom-sheet фильтров ────────────────────────────────── */
.fcat-sheet-btn, .fcat-sheet-x, .fcat-sheet-apply, .fcat-sheet-veil { display: none; }
@media (max-width: 900px) {
  .fcat-sheet-btn { display: block; position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
    z-index: 890; height: 46px; padding: 0 26px; border-radius: 23px; border: 0;
    background: var(--flame); color: #fff; font: 600 14px var(--font-sans); cursor: pointer;
    box-shadow: 0 12px 30px rgba(0,0,0,.45); }
  .fcat-side { display: none; }
  .fcat-side.sheet-open { display: flex; position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 1100;
    max-height: 82vh; overflow-y: auto; margin: 0; padding: 18px 20px 16px; border-radius: 18px 18px 0 0;
    background: #101B36; border-top: 1px solid rgba(148,163,184,.25); box-shadow: 0 -20px 60px rgba(0,0,0,.55); }
  .fcat-side.sheet-open .fcat-secs { display: flex; }   /* в шторке разделы снова видны */
  .fcat-sheet-veil { display: block; position: fixed; inset: 0; z-index: 1050; background: rgba(5,8,16,.6); }
  .fcat-side.sheet-open .fcat-sheet-x { display: block; margin-left: auto; background: none; border: 0;
    color: var(--fog); font-size: 16px; cursor: pointer; }
  .fcat-side.sheet-open .fcat-sheet-apply { display: block; position: sticky; bottom: 0; margin-top: 10px;
    height: 48px; border-radius: var(--r-2); border: 0; background: var(--flame); color: #fff;
    font: 600 14.5px var(--font-sans); cursor: pointer; flex: none; }
  .cmpf-bar { bottom: 76px; }
}
.smp-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px 0 60px; }
.smp-grid { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; padding-bottom: 60px; }
.smp-list { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.smp-group { display: flex; flex-direction: column; gap: 0; }
.smp-group-h { font: 600 11px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--flame); padding-bottom: 10px; }
.smp-row {
  display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid rgba(71,85,105,0.3);
}
.smp-row-main { min-width: 0; }
.smp-row-title { color: var(--snow); font: 600 14.5px var(--font-sans); text-decoration: none; }
.smp-row-title:hover { color: var(--flame); }
.smp-row-meta { color: var(--fog); font: 400 12px var(--font-mono); margin-top: 2px; }
.smp-row-qty { display: flex; align-items: center; gap: 8px; font: 600 13px var(--font-mono); color: var(--snow); white-space: nowrap; }
.smp-row-qty button {
  width: 26px; height: 26px; border-radius: 6px; border: 1px solid rgba(148,163,184,0.3); background: transparent;
  color: var(--snow); cursor: pointer; font-size: 15px; line-height: 1;
}
.smp-row-qty button:hover { border-color: var(--flame); color: var(--flame); }
.smp-row-price { font: 700 14.5px var(--font-mono); color: var(--snow); white-space: nowrap; min-width: 90px; text-align: right; }
.smp-row-remove { background: none; border: 0; color: var(--fog); cursor: pointer; font-size: 15px; padding: 4px; }
.smp-row-remove:hover { color: #EF4444; }
.smp-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; font: 500 15px var(--font-sans); color: var(--fg-muted); }
.smp-total b { font: 700 22px var(--font-mono); color: var(--snow); }

.smp-form-card { background: var(--steel); border: 1px solid rgba(71,85,105,0.45); border-radius: var(--r-3); padding: 24px 26px; position: sticky; top: 84px; }
.smp-form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.smp-input {
  width: 100%; background: rgba(31,41,55,0.4); border: 1px solid rgba(71,85,105,0.5); border-radius: var(--r-2);
  padding: 12px 14px; font: 400 14.5px var(--font-sans); color: var(--snow); outline: none;
  transition: border-color 180ms, background 180ms; resize: vertical; min-height: 44px;
}
.smp-input::placeholder { color: rgba(248,250,252,0.35); }
.smp-input:focus { border-color: var(--flame); background: rgba(31,41,55,0.6); }
.smp-error { color: #EF4444; font: 400 13px/1.5 var(--font-sans); }

@media (max-width: 860px) {
  .smp-grid { grid-template-columns: 1fr; }
  .smp-form-card { position: static; }
  .smp-row { grid-template-columns: 1fr auto; row-gap: 8px; }
  .smp-row-price { text-align: left; grid-column: 1; }
  /* ≥44px тач-цель: на мобиле ✕ был ~20px у самого края экрана и мазался мимо */
  .smp-row-remove { grid-column: 2; grid-row: 1 / 3; min-width: 44px; min-height: 44px; font-size: 18px; }
}