@font-face {
  font-family: "ZTM Stapel Medium";
  src: url("../fonts/stapel/stapel-medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "ZTM Stapel Regular";
  src: url("../fonts/stapel/stapel-regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "ZTM Stapel Text Bold";
  src: url("../fonts/stapel/stapel-text-bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
/* ZTM Design Prototype V1.0 — Industrial Precision / Ресурс Движения
   Токены по брендбуку Dotorg 2026 (стр. 31, 35–36). */

@font-face {
  font-family: "Stapel";
  src: url("../fonts/stapel-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Stapel Medium и Stapel Text Regular отсутствуют в комплекте (MISSING-CORE.csv):
   временно используется оригинальный Stapel Regular. */
@font-face {
  font-family: "Stapel Text";
  src: url("../fonts/stapel-text-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Цвета брендбука */
  --ultra-black: #131926;
  --resource-gray: #484C51;
  --white: #FFFFFF;
  --ztm-blue: #2E6BC5; /* all-colors-RGB.pdf: RGB 46 107 197 */

  /* Производные нейтрали интерфейса */
  --ink: var(--ultra-black);
  --ink-2: #3A3F46;
  --muted: #6B7077;
  --line: #D9DCE0;
  --line-2: #E9EBEE;
  --surface: #F4F5F6;
  --surface-2: #ECEEF0;
  --ztm-blue-hover: #255AA8;
  --ztm-blue-soft: #E8EFF9;
  --ok: #1F7A4D;
  --ok-soft: #E6F3EC;
  --warn: #8A5A00;
  --warn-soft: #FBF1DC;
  --err: #B42318;
  --err-soft: #FDECEA;

  /* Типографика */
  --font-head: "ZTM Stapel Medium", Arial, sans-serif;
  --font-body: "ZTM Stapel Regular", Arial, sans-serif;
  --font-strong: "ZTM Stapel Text Bold", "ZTM Stapel Medium", Arial, sans-serif;

  --fs-display: clamp(2.6rem, 5.6vw, 5.5rem);
  --fs-h1: clamp(2.1rem, 4.2vw, 3.75rem);
  --fs-h2: clamp(1.7rem, 3vw, 2.75rem);
  --fs-h3: clamp(1.2rem, 1.6vw, 1.5rem);
  --fs-lead: clamp(1.05rem, 1.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-micro: .75rem;

  /* Пространство и сетка */
  --container: 1360px;
  --gutter: clamp(16px, 3vw, 40px);
  --gap: 24px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --section: clamp(64px, 9vw, 128px);

  --radius: 2px;
  --radius-0: 0;
  --focus: 0 0 0 3px #fff, 0 0 0 5px var(--ztm-blue);
  --header-h: 76px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: none; box-shadow: var(--focus); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--ztm-blue); color: #fff; padding: 10px 16px; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* ---------- Типографика ---------- */
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 400; margin: 0; letter-spacing: .005em; }
.t-display, .t-h1, .t-h2 { text-transform: uppercase; line-height: .98; }
.t-display { font-size: var(--fs-display); }
.t-h1 { font-size: var(--fs-h1); }
.t-h2 { font-size: var(--fs-h2); line-height: 1.02; }
.t-h3 { font-size: var(--fs-h3); line-height: 1.2; }
.t-lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-width: 46ch; }
.t-small { font-size: var(--fs-small); }
.t-muted { color: var(--muted); }
.t-strong { font-family: var(--font-strong); font-weight: 700; }
.line { display: block; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--ztm-blue); }
.on-dark { color: #fff; }
.on-dark .t-lead, .on-dark .t-muted { color: rgba(255,255,255,.78); }
.on-dark .eyebrow { color: rgba(255,255,255,.72); }

/* ---------- Раскладка ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0; }
.section--tight { padding: clamp(40px, 6vw, 72px) 0; }
.section--surface { background: var(--surface); }
.section--dark { background: var(--ultra-black); color: #fff; }
.section--gray { background: var(--resource-gray); color: #fff; }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--gap); }
.section-head { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--gap); align-items: end; margin-bottom: clamp(32px, 5vw, 64px); }
.section-head__title { grid-column: span 7; display: grid; gap: 18px; }
.section-head__aside { grid-column: 9 / span 4; color: var(--muted); }
.on-dark .section-head__aside { color: rgba(255,255,255,.72); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- Кнопки ---------- */
.btn {
  --bg: var(--ultra-black); --fg: #fff; --bd: var(--ultra-black);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  background: var(--bg); color: var(--fg); border: 1px solid var(--bd); border-radius: var(--radius);
  font-family: var(--font-body); font-size: .9375rem; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover { --bg: var(--ink-2); --bd: var(--ink-2); }
.btn--primary { --bg: var(--ztm-blue); --bd: var(--ztm-blue); }
.btn--primary:hover { --bg: var(--ztm-blue-hover); --bd: var(--ztm-blue-hover); }
.btn--ghost { --bg: transparent; --fg: var(--ink); --bd: var(--ink); }
.btn--ghost:hover { --bg: var(--ink); --fg: #fff; --bd: var(--ink); }
.btn--ghost-light { --bg: transparent; --fg: #fff; --bd: rgba(255,255,255,.7); }
.btn--ghost-light:hover { --bg: #fff; --fg: var(--ink); --bd: #fff; }
.btn--light { --bg: #fff; --fg: var(--ink); --bd: #fff; }
.btn--light:hover { --bg: var(--surface-2); --bd: var(--surface-2); }
.btn--sm { min-height: 40px; padding: 8px 14px; font-size: .8125rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn .ico { width: 18px; height: 18px; }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; text-transform: uppercase; letter-spacing: .06em; font-size: .875rem; }
.link-arrow::after { content: ""; width: 28px; height: 1px; background: currentColor; transition: width .25s var(--ease); }
.link-arrow:hover::after { width: 44px; }
.ico { width: 22px; height: 22px; flex: none; }
.icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; height: 44px; padding: 0 10px; background: transparent; border: 1px solid transparent; border-radius: var(--radius);
  text-decoration: none; color: var(--ink);
}
.icon-btn:hover { border-color: var(--line); }
.badge-count {
  position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ztm-blue); color: #fff; font-size: 11px; line-height: 1; border-radius: 9px;
}

/* ---------- Метки демо и статусы ---------- */
.demo-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  border: 1px dashed currentColor; color: var(--muted); border-radius: var(--radius); white-space: normal; max-width: 100%;
}
.on-dark .demo-tag { color: rgba(255,255,255,.75); }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status--in_stock { color: var(--ok); }
.status--limited { color: var(--warn); }
.status--to_order { color: var(--ztm-blue); }
.pill { display: inline-flex; padding: 4px 10px; font-size: .75rem; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
.pill--ok { background: var(--ok-soft); color: var(--ok); }
.pill--warn { background: var(--warn-soft); color: var(--warn); }
.pill--blue { background: var(--ztm-blue-soft); color: var(--ztm-blue-hover); }

/* ---------- Демо-лента ---------- */
.demo-bar { background: var(--ultra-black); color: rgba(255,255,255,.82); font-size: .8125rem; }
.demo-bar__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; }
.demo-bar__alliance { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: rgba(255,255,255,.82); }
.demo-bar__alliance img { height: 16px; width: auto; }
.demo-bar__note { display: inline-flex; align-items: center; gap: 8px; }
.demo-bar__note::before { content: ""; width: 6px; height: 6px; background: var(--ztm-blue); border-radius: 50%; }

/* ---------- Шапка ---------- */
.site-header { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); }
.site-header__in { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 40px); height: var(--header-h); }
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { height: 34px; width: auto; }
.main-nav { display: flex; gap: clamp(16px, 2vw, 32px); }
.main-nav a { position: relative; text-decoration: none; text-transform: uppercase; letter-spacing: .06em; font-size: .875rem; padding: 26px 0; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 18px; height: 2px; background: var(--ztm-blue); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { transform: scaleX(1); }
.header-search { flex: 1; max-width: 360px; margin-left: auto; position: relative; }
.header-search input {
  width: 100%; height: 44px; padding: 0 44px 0 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.header-search input:focus { border-color: var(--ztm-blue); background: #fff; outline: none; }
.header-search button { position: absolute; right: 0; top: 0; width: 44px; height: 44px; background: none; border: 0; display: grid; place-items: center; }
.header-actions { display: flex; align-items: center; gap: 4px; }
.header-actions .label { font-size: .875rem; }
.burger { display: none; }

/* Мобильное меню */
.drawer { position: fixed; inset: 0; z-index: 100; visibility: hidden; }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(19,25,38,.55); opacity: 0; transition: opacity .25s var(--ease); }
.drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(420px, 88vw); background: #fff;
  transform: translateX(100%); transition: transform .3s var(--ease); display: flex; flex-direction: column; overflow-y: auto;
}
.drawer--left .drawer__panel { right: auto; left: 0; transform: translateX(-100%); }
.drawer.is-open { visibility: visible; }
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.drawer__body { padding: 8px 20px 24px; flex: 1; }
.drawer__foot { padding: 16px 20px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.mobile-nav a { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line-2); text-decoration: none; text-transform: uppercase; letter-spacing: .06em; }
.mobile-nav a::after { content: "→"; color: var(--muted); }
body.no-scroll { overflow: hidden; }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--resource-gray); color: #fff; overflow: hidden; isolation: isolate; }
.hero__pattern { position: absolute; inset: 0; z-index: -1; }
.hero__pattern video, .hero__pattern img { width: 100%; height: 100%; object-fit: cover; opacity: .5; -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 34%, #000 72%); mask-image: linear-gradient(90deg, transparent 0, transparent 34%, #000 72%); }
.hero__in { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--gap); align-items: end; padding: clamp(56px, 9vw, 128px) 0 clamp(40px, 6vw, 72px); min-height: min(86vh, 860px); }
.hero__copy { grid-column: 1 / span 7; display: grid; gap: 28px; align-self: center; }
.hero__copy .t-display { max-width: none; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.hero__media { grid-column: 9 / span 4; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.hero__photo { position: relative; aspect-ratio: 4 / 5; background: var(--ultra-black); overflow: hidden; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.caption { font-size: .75rem; line-height: 1.4; color: var(--muted); }
.on-dark .caption, .hero .caption { color: rgba(255,255,255,.72); }
.hero__index { border-top: 1px solid rgba(255,255,255,.28); }
.hero__index ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
.hero__index a { display: grid; gap: 6px; padding: 22px 20px 26px 0; text-decoration: none; color: #fff; border-right: 1px solid rgba(255,255,255,.18); margin-right: 20px; }
.hero__index li:last-child a { border-right: 0; }
.hero__index span { font-size: .75rem; letter-spacing: .12em; color: rgba(255,255,255,.6); }
.hero__index strong { font-weight: 400; text-transform: uppercase; letter-spacing: .03em; }
.hero__index a:hover strong { color: #CFE0F7; }

/* ---------- Карточки направлений ---------- */
.dir-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.dir-card { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 18px; padding: 28px; background: #fff; text-decoration: none; min-height: 300px; transition: background .2s var(--ease); }
.dir-card:hover { background: var(--surface); }
.dir-card__num { font-size: .75rem; letter-spacing: .14em; color: var(--muted); }
.dir-card__art { height: 120px; color: var(--resource-gray); }
.dir-card__art svg { height: 100%; width: auto; }
.dir-card h3 { text-transform: uppercase; font-size: 1.25rem; line-height: 1.15; }
.dir-card__foot { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: .875rem; }
.dir-card__foot::after { content: "→"; color: var(--ztm-blue); font-size: 1.25rem; transition: transform .2s var(--ease); }
.dir-card:hover .dir-card__foot::after { transform: translateX(6px); }

/* ---------- Компетенции ---------- */
.cap-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--gap); }
.cap { display: grid; gap: 14px; align-content: start; padding-top: 22px; border-top: 2px solid var(--ultra-black); }
.cap h3 { text-transform: uppercase; font-size: 1.125rem; line-height: 1.2; }
.cap ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--ink-2); font-size: .9375rem; }
.cap li { padding-left: 18px; position: relative; }
.cap li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 1px; background: var(--ztm-blue); }

/* ---------- Фото-полоса ---------- */
.photo-band { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--gap); align-items: stretch; }
.photo-band__img { grid-column: 1 / span 8; position: relative; min-height: 420px; background: var(--surface-2); }
.photo-band__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-band__copy { grid-column: 9 / span 4; display: grid; align-content: space-between; gap: 32px; padding: 8px 0; }
.photo-band__copy .t-h2 { font-size: clamp(1.6rem, 2.4vw, 2.25rem); }
.photo-tag { position: absolute; left: 0; bottom: 0; background: rgba(19,25,38,.86); color: rgba(255,255,255,.86); font-size: .75rem; padding: 8px 12px; max-width: 90%; }

/* ---------- Ценности ---------- */
.values { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; border-top: 1px solid rgba(255,255,255,.22); }
.value { padding: 32px 32px 8px 0; display: grid; gap: 16px; }
.value + .value { padding-left: 32px; border-left: 1px solid rgba(255,255,255,.22); }
.value__k { font-size: .75rem; letter-spacing: .14em; color: rgba(255,255,255,.6); }
.value h3 { text-transform: uppercase; font-size: clamp(1.4rem, 2.1vw, 2rem); }
.value p { margin: 0; color: rgba(255,255,255,.78); }

/* ---------- О предприятии / альянс ---------- */
.split { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--gap); align-items: center; }
.split__a { grid-column: 1 / span 6; }
.split__b { grid-column: 8 / span 5; }
.alliance-panel { background: var(--ultra-black); color: #fff; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--gap); padding: clamp(32px, 5vw, 72px); }
.alliance-panel__logo { grid-column: 1 / span 6; display: grid; place-items: center; padding: 16px 0; }
.alliance-panel__logo img { width: 100%; max-width: 560px; }
.alliance-panel__copy { grid-column: 8 / span 5; display: grid; gap: 20px; align-content: center; }
.group-links { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.group-links a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.18); text-decoration: none; font-size: .9375rem; }
.group-links a::after { content: "↗"; color: rgba(255,255,255,.55); }
.group-links a:hover::after { color: #fff; }

/* ---------- Запрос КП ---------- */
.rfq { position: relative; background: #fff; border: 1px solid var(--line); display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); overflow: hidden; }
.rfq__art { grid-column: 1 / span 5; position: relative; min-height: 100%; background: #fff; }
.rfq__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rfq__form { grid-column: 6 / span 7; padding: clamp(28px, 4vw, 56px); display: grid; gap: 24px; }

/* ---------- Формы ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: grid; gap: 6px; }
.field label, .field .label { font-size: .8125rem; color: var(--ink-2); }
.field .req { color: var(--ztm-blue); }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; background: #fff; border: 1px solid #C5C9CE; border-radius: var(--radius);
  transition: border-color .15s var(--ease);
}
.textarea { min-height: 120px; resize: vertical; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--muted); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--ztm-blue); box-shadow: 0 0 0 3px var(--ztm-blue-soft); }
.field.is-invalid .input, .field.is-invalid .textarea, .field.is-invalid .select { border-color: var(--err); }
.field__error { font-size: .8125rem; color: var(--err); min-height: 0; }
.field__hint { font-size: .8125rem; color: var(--muted); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .875rem; color: var(--ink-2); cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ztm-blue); flex: none; }
.pass-wrap { position: relative; }
.pass-wrap .input { padding-right: 112px; }
.pass-toggle { position: absolute; right: 6px; top: 6px; height: 36px; padding: 0 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-size: .8125rem; }
.alert { padding: 14px 16px; border-left: 3px solid var(--ztm-blue); background: var(--ztm-blue-soft); font-size: .9375rem; }
.alert--ok { border-color: var(--ok); background: var(--ok-soft); }
.alert--err { border-color: var(--err); background: var(--err-soft); }
.form-success { display: grid; gap: 14px; padding: 28px; border: 1px solid var(--line); background: var(--surface); }

/* ---------- Хлебные крошки и заголовок страницы ---------- */
.page-head { padding: clamp(28px, 4vw, 48px) 0 clamp(24px, 3vw, 40px); border-bottom: 1px solid var(--line); }
.page-head--dark { background: var(--resource-gray); color: #fff; border: 0; position: relative; overflow: hidden; isolation: isolate; }
.page-head--dark .crumbs, .page-head--dark .crumbs a { color: rgba(255,255,255,.72); }
.page-head__pattern { position: absolute; inset: 0; z-index: -1; opacity: .45; }
.page-head__pattern img { width: 100%; height: 100%; object-fit: cover; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: .8125rem; color: var(--muted); margin-bottom: 20px; list-style: none; padding: 0; }
.crumbs li { display: inline-flex; gap: 10px; }
.crumbs li + li::before { content: "/"; opacity: .6; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.page-head__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.page-hero { padding: clamp(40px, 7vw, 104px) 0 clamp(40px, 6vw, 80px); }
.page-hero .t-h1 { max-width: 16ch; }

/* ---------- Каталог ---------- */
.catalog-layout { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: clamp(24px, 3vw, 48px); padding: 32px 0 var(--section); }
.filters { display: grid; gap: 4px; align-content: start; position: sticky; top: calc(var(--header-h) + 16px); max-height: calc(100vh - var(--header-h) - 32px); overflow: auto; padding-right: 6px; }
.filter-group { border-bottom: 1px solid var(--line); padding: 16px 0; }
.filter-group > h3, .filter-group > .fg-title { font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; color: var(--ink); }
.cat-tree { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cat-tree button { width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; display: flex; justify-content: space-between; gap: 10px; border-radius: var(--radius); font-size: .9375rem; }
.cat-tree button:hover { background: var(--surface); }
.cat-tree button[aria-pressed="true"] { background: var(--ultra-black); color: #fff; }
.cat-tree .count { color: var(--muted); font-size: .8125rem; }
.cat-tree button[aria-pressed="true"] .count { color: rgba(255,255,255,.7); }
.cat-tree .subs { list-style: none; padding: 2px 0 6px 12px; margin: 0; display: grid; gap: 2px; }
.cat-tree .subs button { font-size: .875rem; padding: 6px 10px; }
.check-list { display: grid; gap: 10px; }
.price-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.price-range .input { min-height: 40px; padding: 8px 10px; }
.catalog-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.catalog-search { position: relative; flex: 1; min-width: 240px; max-width: 520px; }
.catalog-search .input { padding-left: 42px; }
.catalog-search .ico { position: absolute; left: 12px; top: 13px; color: var(--muted); }
.toolbar-right { display: flex; gap: 10px; align-items: center; }
.toolbar-right .select { min-height: 44px; width: auto; padding-right: 32px; }
.view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); }
.view-toggle button { width: 44px; height: 42px; background: #fff; border: 0; display: grid; place-items: center; color: var(--muted); }
.view-toggle button[aria-pressed="true"] { background: var(--ultra-black); color: #fff; }
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); background: #fff; border-radius: 999px; font-size: .8125rem; }
.chip button { background: none; border: 0; padding: 0; line-height: 1; color: var(--muted); }
.catalog-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .875rem; color: var(--muted); margin-bottom: 14px; }
.btn-filters { display: none; }

.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.product-card { background: #fff; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; padding: 18px; position: relative; }
.product-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--surface); display: grid; place-items: center; color: var(--resource-gray); text-decoration: none; }
.product-card__media svg { width: 62%; height: 62%; }
.product-card__media .demo-tag { position: absolute; left: 10px; top: 10px; background: #fff; }
.product-card__body { display: grid; gap: 8px; align-content: start; }
.product-card__sku { font-size: .75rem; letter-spacing: .06em; color: var(--muted); }
.product-card__name { font-size: 1.0625rem; line-height: 1.3; text-decoration: none; }
.product-card__name:hover { color: var(--ztm-blue); }
.product-card__props { margin: 0; display: grid; gap: 2px; font-size: .8125rem; color: var(--muted); }
.product-card__foot { display: grid; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.price { font-family: var(--font-strong); font-weight: 700; font-size: 1.25rem; letter-spacing: .01em; }
.price--old { font-size: .875rem; color: var(--muted); text-decoration: line-through; font-family: var(--font-body); font-weight: 400; }
.price-note { font-size: .75rem; color: var(--muted); width: 100%; }
.price-personal { color: var(--ztm-blue); }
.card-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.product-grid.is-list { grid-template-columns: 1fr; }
.product-grid.is-list .product-card { grid-template-columns: 180px minmax(0,1fr) 280px; grid-template-rows: none; align-items: center; gap: 24px; }
.product-grid.is-list .product-card__foot { border-top: 0; padding-top: 0; }
.empty-state { display: grid; justify-items: center; text-align: center; gap: 14px; padding: 64px 24px; background: #fff; grid-column: 1 / -1; }
.empty-state svg { width: 72px; height: 72px; color: var(--line); }
.pager { display: flex; justify-content: center; gap: 6px; margin-top: 28px; }
.pager button { min-width: 44px; height: 44px; border: 1px solid var(--line); background: #fff; border-radius: var(--radius); }
.pager button[aria-current="true"] { background: var(--ultra-black); color: #fff; border-color: var(--ultra-black); }

/* ---------- Карточка товара ---------- */
.pdp { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--gap); padding: 32px 0 clamp(48px, 6vw, 80px); }
.pdp__gallery { grid-column: 1 / span 7; display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 16px; align-content: start; }
.pdp__thumbs { display: grid; gap: 10px; align-content: start; }
.pdp__thumbs button { aspect-ratio: 1; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; padding: 10px; color: var(--resource-gray); border-radius: var(--radius); }
.pdp__thumbs button[aria-pressed="true"] { border-color: var(--ztm-blue); box-shadow: inset 0 0 0 1px var(--ztm-blue); }
.pdp__thumbs svg { width: 100%; height: 100%; }
.pdp__stage { position: relative; aspect-ratio: 1 / 0.82; background: var(--surface); display: grid; place-items: center; color: var(--resource-gray); }
.pdp__stage svg { width: 64%; height: 64%; }
.pdp__stage .demo-tag { position: absolute; left: 16px; top: 16px; background: #fff; }
.pdp__stage-note { position: absolute; right: 16px; bottom: 14px; font-size: .75rem; color: var(--muted); }
.pdp__info { grid-column: 8 / span 5; display: grid; gap: 22px; align-content: start; }
.pdp__title { font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.1; text-transform: uppercase; }
.pdp__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .875rem; color: var(--muted); }
.buy-box { border: 1px solid var(--line); padding: 22px; display: grid; gap: 18px; }
.buy-box .price { font-size: 2rem; }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--surface); font-size: .875rem; }
.switch { position: relative; width: 44px; height: 24px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; background: #B9BEC4; border-radius: 12px; transition: background .2s; }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform .2s var(--ease); }
.switch input:checked + span { background: var(--ztm-blue); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { box-shadow: var(--focus); }
.qty { display: inline-grid; grid-template-columns: 44px 64px 44px; border: 1px solid #C5C9CE; border-radius: var(--radius); height: 48px; }
.qty button { background: #fff; border: 0; font-size: 1.25rem; }
.qty button:hover { background: var(--surface); }
.qty input { text-align: center; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); width: 100%; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.buy-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .875rem; color: var(--ink-2); }
.facts li { display: flex; gap: 10px; }
.facts li::before { content: ""; width: 14px; height: 1px; background: var(--ztm-blue); margin-top: .75em; flex: none; }
.tabs { border-bottom: 1px solid var(--line); display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; }
.tabs button { background: none; border: 0; padding: 16px 0; text-transform: uppercase; letter-spacing: .06em; font-size: .875rem; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--ztm-blue); }
.tab-panel { padding: 32px 0; }
.spec-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.spec-table th, .spec-table td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.spec-table th { font-weight: 400; color: var(--muted); width: 40%; padding-right: 16px; }
.doc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.doc-list li { background: #fff; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px; }

/* ---------- Корзина и оформление ---------- */
.cart-layout { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: clamp(24px, 3vw, 48px); padding: 32px 0 var(--section); align-items: start; }
.cart-list { border-top: 1px solid var(--line); }
.cart-item { display: grid; grid-template-columns: 112px minmax(0,1fr) auto auto auto; gap: 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
.cart-item__media { aspect-ratio: 1; background: var(--surface); display: grid; place-items: center; color: var(--resource-gray); padding: 14px; }
.cart-item__media svg { width: 100%; height: 100%; }
.cart-item__name { text-decoration: none; font-size: 1.0625rem; }
.cart-item__sum { min-width: 120px; text-align: right; }
.remove-btn { background: none; border: 0; color: var(--muted); padding: 8px; font-size: .875rem; text-decoration: underline; text-underline-offset: 3px; }
.remove-btn:hover { color: var(--err); }
.summary { position: sticky; top: calc(var(--header-h) + 16px); border: 1px solid var(--line); padding: 24px; display: grid; gap: 16px; background: #fff; }
.summary dl { margin: 0; display: grid; gap: 10px; }
.summary dl div { display: flex; justify-content: space-between; gap: 12px; font-size: .9375rem; }
.summary dt { color: var(--muted); }
.summary dd { margin: 0; }
.summary .total { padding-top: 14px; border-top: 1px solid var(--line); font-size: 1.125rem; }
.summary .total dd { font-family: var(--font-strong); font-weight: 700; font-size: 1.5rem; }
.steps { display: flex; gap: 0; list-style: none; padding: 0; margin: 0 0 32px; border-bottom: 1px solid var(--line); counter-reset: s; }
.steps li { counter-increment: s; padding: 14px 24px 14px 0; font-size: .875rem; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.steps li::before { content: counter(s); width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: .75rem; }
.steps li[aria-current="step"] { color: var(--ink); }
.steps li[aria-current="step"]::before { background: var(--ztm-blue); border-color: var(--ztm-blue); color: #fff; }
.checkout-block { border: 1px solid var(--line); padding: 24px; display: grid; gap: 20px; }
.checkout-block + .checkout-block { margin-top: 20px; }
.radio-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.radio-card { position: relative; border: 1px solid var(--line); padding: 16px 16px 16px 46px; cursor: pointer; display: grid; gap: 4px; font-size: .9375rem; }
.radio-card input { position: absolute; left: 16px; top: 18px; accent-color: var(--ztm-blue); width: 18px; height: 18px; }
.radio-card:has(input:checked) { border-color: var(--ztm-blue); box-shadow: inset 0 0 0 1px var(--ztm-blue); }

/* ---------- Авторизация ---------- */
.auth { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); min-height: calc(100vh - var(--header-h) - 36px); }
.auth__visual { grid-column: 1 / span 6; position: relative; background: var(--resource-gray); color: #fff; overflow: hidden; isolation: isolate; display: grid; align-content: end; padding: clamp(32px, 5vw, 72px); }
.auth__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; z-index: -1; }
.auth__form { grid-column: 7 / span 6; display: grid; align-content: center; padding: clamp(32px, 6vw, 96px); }
.auth__card { width: 100%; max-width: 440px; display: grid; gap: 22px; }

/* ---------- Кабинет ---------- */
.account { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: clamp(24px, 3vw, 48px); padding: 32px 0 var(--section); align-items: start; }
.account-nav { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 2px; }
.account-nav__user { padding: 18px; background: var(--ultra-black); color: #fff; display: grid; gap: 4px; margin-bottom: 10px; }
.account-nav__user small { color: rgba(255,255,255,.7); }
.account-nav button, .account-nav a { width: 100%; text-align: left; background: none; border: 0; border-left: 2px solid transparent; padding: 12px 16px; font-size: .9375rem; text-decoration: none; display: flex; justify-content: space-between; }
.account-nav button:hover, .account-nav a:hover { background: var(--surface); }
.account-nav button[aria-current="true"] { border-color: var(--ztm-blue); background: var(--surface); }
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.stat { background: #fff; padding: 22px; display: grid; gap: 6px; }
.stat__k { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.stat__v { font-family: var(--font-strong); font-weight: 700; font-size: 1.75rem; line-height: 1.1; }
.stat__v.blue { color: var(--ztm-blue); }
.panel { border: 1px solid var(--line); background: #fff; }
.panel__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.panel__body { padding: 22px; }
.table-wrap { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 640px; }
.data-table th { text-align: left; font-weight: 400; color: var(--muted); font-size: .8125rem; letter-spacing: .04em; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--line); white-space: nowrap; }
.data-table td { padding: 14px 16px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.data-table tr:hover td { background: #FAFAFB; }
.data-table .num { text-align: right; white-space: nowrap; }
.loyalty-bar { height: 8px; background: var(--surface-2); position: relative; }
.loyalty-bar span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ztm-blue); }
.account-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.kv { display: grid; grid-template-columns: 180px 1fr; gap: 10px 16px; margin: 0; font-size: .9375rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }

/* ---------- Производство / о предприятии ---------- */
.feature-rows { display: grid; gap: clamp(48px, 7vw, 96px); }
.feature-row { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--gap); align-items: center; }
.feature-row__media { grid-column: 1 / span 6; position: relative; aspect-ratio: 4 / 3; background: var(--surface-2); overflow: hidden; }
.feature-row__media img { width: 100%; height: 100%; object-fit: cover; }
.feature-row__copy { grid-column: 8 / span 5; display: grid; gap: 18px; }
.feature-row--flip .feature-row__media { grid-column: 7 / span 6; order: 2; }
.feature-row--flip .feature-row__copy { grid-column: 1 / span 5; order: 1; }
.task-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.task { background: #fff; padding: 28px; display: grid; gap: 12px; align-content: start; }
.task__n { font-size: .75rem; letter-spacing: .14em; color: var(--ztm-blue); }
.task h3 { font-size: 1.125rem; text-transform: uppercase; line-height: 1.2; }
.task p { margin: 0; color: var(--ink-2); font-size: .9375rem; }
.qc-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); counter-reset: q; }
.qc-steps li { counter-increment: q; padding: 24px 24px 0 0; border-top: 1px solid rgba(255,255,255,.3); display: grid; gap: 10px; position: relative; }
.qc-steps li::before { content: "0" counter(q); font-size: .75rem; letter-spacing: .14em; color: rgba(255,255,255,.6); }
.qc-steps li::after { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; background: var(--ztm-blue); }
.qc-steps h3 { text-transform: uppercase; font-size: 1.0625rem; }
.qc-steps p { margin: 0; color: rgba(255,255,255,.76); font-size: .9375rem; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.gallery-grid figure { margin: 0; display: grid; gap: 8px; }
.gallery-grid img { aspect-ratio: 1; object-fit: cover; width: 100%; background: var(--surface-2); }
.logo-system { display: grid; gap: 24px; }
.logo-system__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.logo-system__cell { background: #fff; padding: clamp(28px, 4vw, 56px); display: grid; place-items: center; min-height: 220px; position: relative; }
.logo-system__cell--dark { background: var(--ultra-black); }
.logo-system__cell img { max-width: 100%; }
.logo-system__cell .caption { position: absolute; left: 16px; bottom: 12px; }
.contacts-grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--gap); padding: 40px 0 var(--section); }
.contacts-grid__info { grid-column: 1 / span 5; display: grid; gap: 24px; align-content: start; }
.contacts-grid__form { grid-column: 7 / span 6; }
.contact-card { border: 1px solid var(--line); padding: 22px; display: grid; gap: 10px; }
.map-placeholder { aspect-ratio: 16 / 10; border: 1px dashed #B9BEC4; display: grid; place-items: center; text-align: center; padding: 24px; color: var(--muted); background: repeating-linear-gradient(135deg, var(--surface) 0 12px, #fff 12px 24px); }

/* ---------- Подвал ---------- */
.site-footer { background: var(--ultra-black); color: rgba(255,255,255,.82); padding: clamp(48px, 6vw, 88px) 0 28px; }
.footer-top { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--gap); padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.16); }
.footer-brand { grid-column: 1 / span 4; display: grid; gap: 20px; align-content: start; }
.footer-brand img.ztm { height: 40px; width: auto; }
.footer-brand p { margin: 0; max-width: 34ch; font-size: .9375rem; }
.footer-col { grid-column: span 2; display: grid; gap: 12px; align-content: start; font-size: .9375rem; }
.footer-col h3, .footer-alliance h3 { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 4px; }
.footer-col a { text-decoration: none; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-alliance { grid-column: 11 / span 2; display: grid; gap: 14px; align-content: start; justify-items: start; }
.footer-alliance img { width: 150px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 24px; font-size: .8125rem; color: rgba(255,255,255,.6); }

/* ---------- Модальное окно и уведомления ---------- */
.modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; visibility: hidden; }
.modal.is-open { visibility: visible; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(19,25,38,.6); opacity: 0; transition: opacity .2s; }
.modal.is-open .modal__backdrop { opacity: 1; }
.modal__dialog { position: relative; background: #fff; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 28px; display: grid; gap: 18px; transform: translateY(12px); opacity: 0; transition: transform .25s var(--ease), opacity .25s; }
.modal.is-open .modal__dialog { transform: none; opacity: 1; }
.modal__close { position: absolute; right: 12px; top: 12px; }
.toast-zone { position: fixed; right: 16px; bottom: 16px; z-index: 150; display: grid; gap: 8px; width: min(380px, calc(100vw - 32px)); }
.toast { background: var(--ultra-black); color: #fff; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .9375rem; border-left: 3px solid var(--ztm-blue); animation: toast-in .3s var(--ease); }
.toast a { color: #CFE0F7; white-space: nowrap; }
@keyframes toast-in { from { transform: translateY(10px); opacity: 0; } }

/* ---------- Адаптив ---------- */
@media (max-width: 1180px) {
  .header-search { max-width: 240px; }
  .header-actions .label { display: none; }
  .cap-grid { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 40px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .product-grid.is-list .product-card { grid-template-columns: 140px minmax(0,1fr); }
  .product-grid.is-list .product-card__foot { grid-column: 1 / -1; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col { grid-column: span 3; }
  .footer-alliance { grid-column: span 3; }
}
@media (max-width: 1024px) {
  :root { --header-h: 64px; }
  .main-nav, .header-search { display: none; }
  .burger { display: inline-flex; }
  .header-actions { margin-left: auto; }
  .hero__copy { grid-column: 1 / -1; }
  .hero__media { grid-column: 1 / -1; flex-direction: row; align-items: flex-end; }
  .hero__photo { aspect-ratio: 16 / 9; flex: 1; }
  .hero__in { min-height: 0; }
  .hero__pattern video, .hero__pattern img { -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 60%); mask-image: linear-gradient(180deg, #000 0, transparent 60%); opacity: .35; }
  .catalog-layout { grid-template-columns: 1fr; }
  .filters { display: none; }
  .btn-filters { display: inline-flex; }
  .pdp__gallery, .pdp__info { grid-column: 1 / -1; }
  .cart-layout { grid-template-columns: 1fr; }
  .summary { position: static; }
  .account { grid-template-columns: 1fr; }
  .account-nav { position: static; grid-template-columns: repeat(3, minmax(0,1fr)); }
  .account-nav__user { grid-column: 1 / -1; }
  .account-nav button { border-left: 0; border-bottom: 2px solid transparent; justify-content: center; }
  .account-nav button[aria-current="true"] { border-bottom-color: var(--ztm-blue); }
  .stat-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .split__a, .split__b, .alliance-panel__logo, .alliance-panel__copy { grid-column: 1 / -1; }
  .photo-band__img, .photo-band__copy { grid-column: 1 / -1; }
  .rfq__art { display: none; }
  .rfq__form { grid-column: 1 / -1; }
  .feature-row__media, .feature-row__copy, .feature-row--flip .feature-row__media, .feature-row--flip .feature-row__copy { grid-column: 1 / -1; order: 0; }
  .contacts-grid__info, .contacts-grid__form { grid-column: 1 / -1; }
  .auth__visual { display: none; }
  .auth__form { grid-column: 1 / -1; justify-items: center; }
  .qc-steps { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 32px; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .section-head__title, .section-head__aside { grid-column: 1 / -1; }
  .grid-12 > *, .alliance-panel > * { grid-column: 1 / -1 !important; }
  .catalog-layout, .cart-layout, .account { grid-template-columns: minmax(0,1fr); }
  .values { grid-template-columns: 1fr; }
  .value + .value { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.22); }
  .value { padding-right: 0; }
}
@media (max-width: 760px) {
  .demo-bar__alliance span, .hide-sm { display: none; }
  .demo-bar__in { font-size: .75rem; }
  .brand img { height: 28px; }
  .hero__media { flex-direction: column; align-items: stretch; }
  .hero__index ol { grid-template-columns: 1fr 1fr; }
  .hero__index li:nth-child(2) a { border-right: 0; }
  .hero__index a { padding: 16px 12px 18px 0; margin-right: 12px; }
  .dir-grid { grid-template-columns: 1fr; }
  .dir-card { min-height: 0; }
  .cap-grid { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr; }
  .value + .value { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.22); }
  .group-links { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .product-grid.is-list .product-card { grid-template-columns: 96px minmax(0,1fr); gap: 14px; }
  .pdp__gallery { grid-template-columns: 1fr; }
  .pdp__thumbs { grid-template-columns: repeat(4, 64px); order: 2; }
  .cart-item { grid-template-columns: 80px minmax(0,1fr); gap: 12px 16px; }
  .cart-item__qty, .cart-item__sum, .cart-item__remove { grid-column: 2; }
  .cart-item__sum { text-align: left; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .stat { padding: 16px; }
  .stat__v { font-size: 1.375rem; }
  .account-grid-2 { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv dd { margin-bottom: 10px; }
  .task-grid { grid-template-columns: 1fr; }
  .qc-steps { grid-template-columns: 1fr; }
  .radio-cards { grid-template-columns: 1fr; }
  .footer-col, .footer-alliance { grid-column: span 6; }
  .logo-system__row { grid-template-columns: 1fr; }
  .catalog-toolbar { align-items: stretch; }
  .toolbar-right { width: 100%; flex-wrap: wrap; }
  .toolbar-right .select { flex: 1; min-width: 0; }
  .view-toggle { display: none; }
  .pdp { grid-template-columns: minmax(0,1fr); }
  .pdp > * { grid-column: 1 / -1 !important; }
  .pdp__title { font-size: 1.375rem; overflow-wrap: break-word; }
  .buy-row { grid-template-columns: 1fr; }
  .buy-box { padding: 18px; }
  .product-card__name, .cart-item__name { overflow-wrap: break-word; }
  .data-table { min-width: 560px; }
  .steps li { padding-right: 14px; }
  .steps li span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
  .site-header, .demo-bar, .site-footer, .toast-zone { display: none; }
}

/* =====================================================================
   ZTM Design V2.1 — визуальная система поверх компонентной базы V1 (styles.css).
   Один файл, одно определение на компонент; адаптив — в конце, по брейкпоинтам.
   Бренд: Ultra Black #131926, Resource Gray #484C51, White; синий ЗТМ #2E6BC5
   (all-colors-RGB: «ЗТМ — RGB 46 107 197»). Шрифт: Stapel (временно) → Arial.
   Фирменный паттерн: только hero главной (MP4 V1, pattern-gray).
   ===================================================================== */

/* 1. Токены ---------------------------------------------------------- */
:root {
  --ink-2: #2A2F37;
  --muted: #555C66;            /* ≥ 6.4:1 на белом */
  --line: #D3D7DC;
  --line-2: #E6E8EB;
  --surface: #F2F3F5;
  --surface-2: #E7E9EC;
  --blue-light: #9DBDEB;       /* акцент на тёмном фоне */
  --fs-body: 1.0625rem;        /* 17px */
  --fs-small: .9375rem;        /* 15px */
  --fs-micro: .875rem;         /* 14px — минимальный кегль интерфейса */
  --fs-h1: clamp(2.25rem, 4.4vw, 4rem);
  --fs-h2: clamp(1.875rem, 3.2vw, 3rem);
  --fs-h3: clamp(1.25rem, 1.6vw, 1.5rem);
  --header-h: 76px;
  --section: clamp(72px, 8vw, 120px);
}
body { line-height: 1.6; }
.section--first { padding-top: clamp(32px, 4vw, 56px); }
.btn--lg { min-height: 56px; padding: 14px 28px; font-size: 1rem; }
.btn--sm { font-size: .875rem; }

/* 2. Заголовки секций ------------------------------------------------ */
.sx-head { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 380px); gap: 10px 32px; align-items: end; margin-bottom: clamp(32px, 4vw, 52px); padding-top: 20px; border-top: 2px solid var(--ink); }
.sx-head--sm { grid-template-columns: minmax(0, 1fr); border-top: 0; padding-top: 0; margin-bottom: 24px; }
.sx-index { font-family: var(--font-strong); font-weight: 700; font-size: .9375rem; letter-spacing: .08em; color: var(--ztm-blue); align-self: start; padding-top: 6px; }
.sx-index--light { color: var(--blue-light); }
.sx-title { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: var(--fs-h2); line-height: 1.02; margin: 0; }
.sx-title--sm { font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.08; }
.sx-head--sm .sx-title { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.sx-aside { margin: 0; color: var(--muted); justify-self: end; max-width: 38ch; font-size: var(--fs-small); }
a.sx-aside { color: var(--ink); }
.link-arrow { white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-micro); color: var(--ink); }
.link-arrow::after { content: "→"; color: var(--ztm-blue); transition: transform .2s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }

/* 3. Верхняя строка, шапка ------------------------------------------- */
.topbar { background: var(--ultra-black); color: rgba(255,255,255,.86); font-size: var(--fs-micro); }
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.topbar__alliance { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; flex: none; }
.topbar__alliance img { height: 15px; width: auto; }
.topbar__contacts { display: flex; gap: 24px; }
.topbar__contacts a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #fff; white-space: nowrap; }
.topbar__contacts .ico { width: 16px; height: 16px; opacity: .75; }
.site-header { background: #fff; }
.brand img { height: 36px; }
.main-nav { gap: clamp(18px, 2vw, 32px); }
.main-nav a { font-size: .9375rem; letter-spacing: .06em; }
.header-search { max-width: 260px; }
.header-search input { background: #fff; border-color: var(--line); font-size: var(--fs-small); }
.header-actions .label { font-size: var(--fs-small); }
.mobile-nav a { font-size: 1rem; }
.drawer-phone { display: block; margin-top: 24px; font-family: var(--font-strong); font-weight: 700; font-size: 1.25rem; text-decoration: none; }

/* 4. Hero главной (видео-паттерн V1 + фото цеха) ---------------------- */
.hero21 { position: relative; background: var(--resource-gray); color: #fff; overflow: hidden; isolation: isolate; }
.hero21__pattern { position: absolute; inset: 0 0 0 30%; z-index: -1; }
.hero21__pattern video { width: 100%; height: 100%; object-fit: cover; opacity: .55;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%); mask-image: linear-gradient(90deg, transparent 0, #000 38%); }
.hero21__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: center; min-height: clamp(560px, 70vh, 720px); padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(48px, 6vw, 80px); }
.hero21__copy { grid-column: 1 / span 7; display: grid; gap: 26px; justify-items: start; }
.hero21__kicker { margin: 0; font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.82); display: flex; align-items: center; gap: 14px; }
.hero21__kicker::before { content: ""; width: 36px; height: 2px; background: var(--blue-light); flex: none; }
.hero21__title { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: clamp(2.25rem, 4.3vw, 4rem); line-height: 1.02; margin: 0; max-width: 15ch; }
.hero21__lead { margin: 0; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.55; color: rgba(255,255,255,.9); max-width: 52ch; }
.hero21__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hero21__photo { grid-column: 8 / span 5; margin: 0; align-self: end; position: relative; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.hero21__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 62% 50%; }
.hero21__photo figcaption { position: absolute; left: 0; bottom: 0; background: var(--ultra-black); color: rgba(255,255,255,.9); font-size: var(--fs-micro); padding: 10px 14px; }
.hero21__facts { background: var(--ultra-black); }
.hero21__facts-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hero21__facts-in > div { display: grid; gap: 6px; padding: 26px 24px 28px 0; }
.hero21__facts-in > div + div { padding-left: 24px; border-left: 1px solid rgba(255,255,255,.16); }
.hero21__facts strong { font-family: var(--font-head); font-weight: 400; font-size: clamp(1.6rem, 2.4vw, 2.25rem); line-height: 1; color: #fff; }
.hero21__facts span { color: rgba(255,255,255,.76); font-size: var(--fs-small); line-height: 1.4; }

/* 5. Направления продукции: 4 равные карточки ------------------------ */
.fam21 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fam21__card { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 10px; padding: 0 0 22px; background: var(--surface); text-decoration: none; color: var(--ink); transition: background .2s var(--ease); min-width: 0; }
.fam21__card:hover { background: var(--surface-2); }
.fam21__media { display: grid; place-items: center; aspect-ratio: 1 / 1; padding: 12%; background: #fff; border: 1px solid var(--line-2); border-bottom: 0; }
.fam21__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s var(--ease); }
.fam21__card:hover .fam21__media img { transform: scale(1.05); }
.fam21__n, .fam21__card h3, .fam21__card p, .fam21__foot { margin-left: 22px; margin-right: 22px; }
.fam21__n { margin-top: 12px; font-family: var(--font-strong); font-weight: 700; color: var(--ztm-blue); font-size: var(--fs-micro); letter-spacing: .08em; }
.fam21__card h3 { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: clamp(1.25rem, 1.6vw, 1.5rem); line-height: 1.1; margin-top: 0; margin-bottom: 0; }
.fam21__card p { margin-top: 0; margin-bottom: 0; color: var(--muted); font-size: var(--fs-small); }
.fam21__foot { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--fs-micro); letter-spacing: .04em; text-transform: uppercase; }
.fam21__foot .ico { width: 20px; height: 20px; color: var(--ztm-blue); transition: transform .2s var(--ease); }
.fam21__card:hover .fam21__foot .ico { transform: translateX(4px); }

/* 6. Подбор по технике ----------------------------------------------- */
.picker { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.picker__side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; min-width: 0; }
.picker__groups { display: grid; gap: 24px; }
.picker__search label { display: block; font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.picker__field { min-width: 0; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); padding: 6px 6px 6px 16px; }
.picker__field:focus-within { border-color: var(--ztm-blue); box-shadow: 0 0 0 3px rgba(46,107,197,.2); }
.picker__field .ico { width: 20px; height: 20px; color: var(--muted); flex: none; }
.picker__field input { flex: 1; min-width: 0; border: 0; height: 46px; background: transparent; font-size: 1rem; }
.picker__field input:focus { outline: none; }
.picker__group h3 { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.picker__makes { display: flex; flex-wrap: wrap; gap: 10px; }
.pick { display: inline-flex; align-items: baseline; gap: 10px; min-height: 48px; padding: 10px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); transition: border-color .15s, background .15s, color .15s; }
.pick strong { font-family: var(--font-head); font-weight: 400; font-size: 1.125rem; letter-spacing: .02em; }
.pick span { font-size: var(--fs-micro); color: var(--muted); font-variant-numeric: tabular-nums; }
.pick:hover { border-color: var(--ink); }
.pick[aria-pressed="true"] { background: var(--ultra-black); border-color: var(--ultra-black); color: #fff; }
.pick[aria-pressed="true"] span { color: rgba(255,255,255,.7); }
.picker__result { background: #fff; border-top: 3px solid var(--ztm-blue); padding: 24px; display: grid; gap: 18px; min-height: 100%; }
.picker__head { display: flex; justify-content: space-between; align-items: end; gap: 16px; }
.picker__label { font-size: var(--fs-micro); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.picker__head h3 { margin: 4px 0 0; font-family: var(--font-head); font-weight: 400; font-size: clamp(1.75rem, 2.6vw, 2.4rem); line-height: 1; }
.picker__count { font-size: var(--fs-small); color: var(--muted); white-space: nowrap; }
.picker__list { list-style: none; margin: 0; padding: 0; display: grid; }
.picker__list a { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-2); text-decoration: none; color: var(--ink); }
.picker__list li:last-child a { border-bottom: 1px solid var(--line-2); }
.picker__list a:hover .picker__txt { color: var(--ztm-blue); }
.picker__img { width: 72px; height: 72px; display: grid; place-items: center; background: var(--surface); }
.picker__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.picker__txt { display: grid; gap: 2px; font-size: var(--fs-small); line-height: 1.35; }
.picker__txt small { font-size: var(--fs-micro); color: var(--muted); }

/* 7. Производство: сплит на главной ---------------------------------- */
.prod21 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--ultra-black); color: #fff; }
.prod21__media { margin: 0; position: relative; min-height: 540px; }
.prod21__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.prod21__copy { padding: clamp(48px, 6vw, 96px) clamp(24px, 5vw, 80px); display: grid; gap: 22px; align-content: center; justify-items: start; }
.prod21__lead { margin: 0; color: rgba(255,255,255,.86); font-size: 1.125rem; max-width: 46ch; }
.cap-list { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; width: 100%; }
.cap-list li { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.18); align-items: baseline; }
.cap-list li:last-child { border-bottom: 1px solid rgba(255,255,255,.18); }
.cap-list span { font-family: var(--font-strong); font-weight: 700; color: var(--blue-light); font-size: var(--fs-micro); }
.cap-list h3 { margin: 0; font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: clamp(1.0625rem, 1.4vw, 1.3rem); letter-spacing: .02em; }

/* 8. Карточки товаров ------------------------------------------------ */
.product-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.product-card { padding: 18px 18px 20px; gap: 14px; transition: box-shadow .2s; }
.product-card:hover { box-shadow: inset 0 0 0 1px var(--ink); z-index: 1; }
.product-card__media { background: #fff; aspect-ratio: 1 / 1; border-bottom: 1px solid var(--line-2); padding: 8px; overflow: hidden; }
.product-card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s var(--ease); }
.product-card:hover .product-card__media img { transform: scale(1.05); }
.product-card__body { gap: 10px; }
.product-card__sku { font-size: var(--fs-micro); letter-spacing: .03em; color: var(--muted); font-variant-numeric: tabular-nums; }
.product-card__name { font-size: 1.0625rem; line-height: 1.4; font-family: var(--font-body); overflow-wrap: break-word; }
.flag { position: absolute; left: 8px; top: 8px; background: var(--ultra-black); color: #fff; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; }
.no-photo { font-family: var(--font-head); font-size: 2rem; color: var(--line); letter-spacing: .1em; }
.make-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mk { display: inline-flex; align-items: center; font-size: var(--fs-micro); line-height: 1; padding: 6px 10px; border: 1px solid var(--line); color: var(--ink-2); text-decoration: none; border-radius: 2px; background: #fff; }
a.mk:hover { border-color: var(--ztm-blue); color: var(--ztm-blue); }
.price { font-size: 1.375rem; }
.price--req { font-family: var(--font-body); font-weight: 400; font-size: 1.125rem; color: var(--ink); }
.price-note { font-size: var(--fs-micro); }
.card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.card-actions .btn { padding-left: 10px; padding-right: 10px; }

/* 9. Качество и документы -------------------------------------------- */
.quality { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.quality__copy { display: grid; gap: 22px; justify-items: start; }
.quality__lead { margin: 0; font-size: 1.125rem; color: var(--ink-2); max-width: 52ch; }
.quality--dark .quality__lead { color: rgba(255,255,255,.86); }
.quality__docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: end; }
.quality__docs img { width: 100%; height: auto; background: #fff; box-shadow: 0 1px 0 var(--line), 0 18px 40px -24px rgba(19,25,38,.45); }
.quality__docs img:nth-child(2) { transform: translateY(-28px); }
.quality__photo { margin: 0; }
.quality__photo img { width: 100%; height: auto; }
.tick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tick-list li { position: relative; padding-left: 30px; }
.tick-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 16px; height: 9px; border-left: 2px solid var(--ztm-blue); border-bottom: 2px solid var(--ztm-blue); transform: rotate(-45deg) translateY(-4px); }
.section--dark .tick-list li::before, .tick-list--light li::before { border-color: var(--blue-light); }

/* 10. Карьера на главной, контактная лента --------------------------- */
.career21 { padding: var(--section) 0; }
.career21__in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.career21__photo { margin: 0; }
.career21__photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 30%; }
.career21__copy { display: grid; gap: 18px; justify-items: start; }
.career21__copy p { margin: 0; font-size: 1.125rem; color: var(--ink-2); max-width: 44ch; }
.contact-band { background: var(--ztm-blue); color: #fff; }
.contact-band__in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px 64px; align-items: center; padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 88px); }
.contact-band .sx-title { font-size: clamp(1.75rem, 2.8vw, 2.6rem); }
.contact-band p { margin: 16px 0 0; font-size: 1.125rem; color: rgba(255,255,255,.92); max-width: 48ch; }
.contact-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; justify-content: flex-end; }
.contact-band__phone { display: grid; text-decoration: none; color: #fff; font-family: var(--font-strong); font-weight: 700; font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.1; white-space: nowrap; }
.contact-band__phone small { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-micro); color: rgba(255,255,255,.85); margin-top: 6px; }
.contact-band .btn--light:hover { --bg: var(--ultra-black); --fg: #fff; --bd: var(--ultra-black); }

/* 11. Внутренние страницы: шапки ------------------------------------- */
.page-head--cat { border-bottom: 0; padding-bottom: 0; }
.page-head--cat .t-h1 { font-size: clamp(2.1rem, 4vw, 3.5rem); }
.page-head__lead { margin: 0; color: var(--muted); max-width: 64ch; font-size: 1.0625rem; }
.fam-tabs { display: flex; margin-top: 28px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.fam-tabs::-webkit-scrollbar { display: none; }
.fam-tabs button { flex: none; background: none; border: 0; border-bottom: 2px solid transparent; padding: 14px 18px 12px; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); display: inline-flex; gap: 8px; align-items: baseline; margin-bottom: -1px; }
.fam-tabs button:first-child { padding-left: 0; }
.fam-tabs button span { font-size: .8125rem; color: var(--muted); }
.fam-tabs button:hover, .fam-tabs button[aria-pressed="true"] { color: var(--ink); }
.fam-tabs button[aria-pressed="true"] { border-bottom-color: var(--ztm-blue); }
.check-list--cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.catalog-layout { padding-top: 28px; }
.catalog-meta { font-size: var(--fs-small); }
.cat-tree button, .check { font-size: var(--fs-small); }
.pager { flex-wrap: wrap; }

.ph { position: relative; color: #fff; background: var(--ultra-black); isolation: isolate; overflow: hidden; }
.ph__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.ph::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(19,25,38,.92) 0%, rgba(19,25,38,.66) 45%, rgba(19,25,38,.2) 100%); }
.ph__in { min-height: clamp(400px, 46vw, 560px); display: grid; align-content: end; gap: 18px; padding-top: 48px; padding-bottom: clamp(48px, 6vw, 80px); justify-items: start; }
.ph--short .ph__in { min-height: clamp(340px, 36vw, 460px); }
.ph--career .ph__in { min-height: clamp(440px, 50vw, 600px); }
.ph__title { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: clamp(2.4rem, 5.4vw, 4.75rem); line-height: .98; margin: 0; }
.ph__lead { margin: 0; font-size: clamp(1.0625rem, 1.4vw, 1.3rem); color: rgba(255,255,255,.9); max-width: 52ch; }
.crumbs--light, .crumbs--light a { color: rgba(255,255,255,.8); }
.crumbs--light li + li::before { color: rgba(255,255,255,.5); }

.facts-strip { background: var(--ultra-black); color: #fff; border-top: 1px solid rgba(255,255,255,.14); }
.facts-strip__in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.facts-strip__in > div { display: grid; gap: 4px; padding: 26px 24px 28px 0; }
.facts-strip__in > div + div { padding-left: 24px; border-left: 1px solid rgba(255,255,255,.14); }
.facts-strip strong { font-family: var(--font-head); font-weight: 400; font-size: clamp(1.6rem, 2.4vw, 2.25rem); line-height: 1; }
.facts-strip span { color: rgba(255,255,255,.76); font-size: var(--fs-small); }

/* 12. Производство --------------------------------------------------- */
.v2-rows { display: grid; gap: clamp(48px, 7vw, 104px); }
.v2-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: center; }
.v2-row__media { grid-column: 1 / span 7; margin: 0; }
.v2-row__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.v2-row__copy { grid-column: 9 / span 4; display: grid; gap: 16px; justify-items: start; }
.v2-row--flip .v2-row__media { grid-column: 6 / span 7; order: 2; }
.v2-row--flip .v2-row__copy { grid-column: 1 / span 4; order: 1; }
.v2-row__n { font-family: var(--font-head); font-size: clamp(3rem, 5vw, 4.5rem); line-height: .8; color: var(--ztm-blue); }
.v2-row h3 { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.05; margin: 0; }
.v2-row p { margin: 0; color: var(--ink-2); }
.mosaic { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; gap: 16px; }
.mosaic figure { margin: 0; position: relative; overflow: hidden; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; }
.mosaic__a { grid-row: span 2; }
.mosaic__a img { aspect-ratio: auto; min-height: 100%; }
.mosaic figcaption { position: absolute; left: 0; bottom: 0; background: rgba(19,25,38,.88); color: #fff; font-size: var(--fs-micro); letter-spacing: .04em; padding: 8px 12px; }

/* 13. О предприятии -------------------------------------------------- */
.profile { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); }
.profile__main { display: grid; gap: 20px; align-content: start; }
.profile__main p { margin: 0; max-width: 64ch; color: var(--ink-2); }
.profile__main .profile__lead { font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.45; color: var(--ink); }
.profile__facts dl { margin: 0; display: grid; border-top: 2px solid var(--ink); }
.profile__facts dl > div { padding: 16px 0; border-bottom: 1px solid var(--line); display: grid; gap: 4px; }
.profile__facts dt { font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.profile__facts dd { margin: 0; font-size: 1.0625rem; }
.val-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.val-grid article { background: #fff; padding: 28px 28px 32px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.val-grid h3 { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: 1.375rem; margin: 0; overflow-wrap: anywhere; hyphens: auto; }
.val-grid h3::before { content: ""; display: block; width: 28px; height: 3px; background: var(--ztm-blue); margin-bottom: 18px; }
.val-grid p { margin: 0; color: var(--ink-2); }
.doc-cards { list-style: none; margin: 0 0 48px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.doc-cards a { display: grid; grid-template-columns: 28px minmax(0, 1fr) 24px; gap: 14px; align-items: center; padding: 18px 20px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color .2s, background .2s; }
.doc-cards a:hover { border-color: var(--ztm-blue); background: var(--ztm-blue-soft); }
.doc-cards .ico { width: 24px; height: 24px; color: var(--ztm-blue); }
.doc-cards strong { display: block; font-family: var(--font-body); font-weight: 400; font-size: 1.0625rem; }
.doc-cards small { display: block; color: var(--muted); font-size: var(--fs-micro); margin-top: 2px; }
.cert-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 20px; }
.cert-head .t-h3 { text-transform: uppercase; }
.cert-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.cert-grid button { padding: 0; border: 1px solid var(--line); background: #fff; display: block; transition: transform .2s var(--ease), border-color .2s; }
.cert-grid button:hover { transform: translateY(-3px); border-color: var(--ink); }
.cert-grid img { width: 100%; height: auto; aspect-ratio: 440 / 640; object-fit: cover; }
.lightbox .modal__dialog { width: min(720px, 100%); padding: 16px; background: #fff; }
.lightbox img { width: 100%; height: auto; max-height: calc(100vh - 80px); object-fit: contain; }
.req { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.req > div:first-child { display: grid; gap: 16px; justify-items: start; }
.req > div:first-child p { margin: 0; }
.req__kv { border-top: 2px solid var(--ink); padding-top: 8px; }
.kv { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); gap: 0 24px; margin: 0; }
.kv dt { color: var(--muted); font-size: var(--fs-small); padding: 12px 0; border-bottom: 1px solid var(--line); }
.kv dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); min-width: 0; overflow-wrap: anywhere; }
.alliance { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding-top: 32px; border-top: 1px solid var(--line); }
.alliance p { margin: 16px 0 0; color: var(--ink-2); max-width: 56ch; }
.alliance__logo { margin: 0; }
.alliance__logo img { width: 100%; max-width: 640px; height: auto; margin-left: auto; }

/* 14. Карьера -------------------------------------------------------- */
.offer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.offer-grid article { background: var(--surface); padding: 28px 24px 32px; display: grid; gap: 16px; align-content: start; min-height: 200px; min-width: 0; }
.offer-grid__k { font-family: var(--font-head); text-transform: uppercase; font-size: 1.5rem; line-height: 1; color: var(--ztm-blue); }
.offer-grid p { margin: 0; font-size: 1.0625rem; }
.today { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.today > div:first-child { display: grid; gap: 24px; }
.today__nums > div { display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 20px; align-items: baseline; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.18); }
.today__nums > div:last-child { border-bottom: 1px solid rgba(255,255,255,.18); }
.today__nums strong { font-family: var(--font-head); font-weight: 400; font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: .9; }
.today__nums span { color: rgba(255,255,255,.8); }
.how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.how li { background: #fff; padding: 28px 28px 36px; display: grid; gap: 28px; align-content: start; border-top: 3px solid var(--ztm-blue); }
.how span { font-family: var(--font-head); font-size: 3rem; line-height: .8; color: var(--ztm-blue); }
.how h3 { margin: 0; font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: 1.375rem; line-height: 1.15; }
.vac { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.vac__info, .vac__form { min-width: 0; }
.vac__info { display: grid; gap: 24px; }
.pending { border-left: 3px solid var(--ztm-blue); background: var(--ztm-blue-soft); padding: 18px 20px; display: grid; gap: 6px; }
.pending strong { font-family: var(--font-body); font-weight: 400; font-size: 1.0625rem; }
.pending p { margin: 0; color: var(--ink-2); font-size: var(--fs-small); }
.vac__docs { display: grid; gap: 10px; }
.vac__docs .t-h3 { text-transform: uppercase; font-size: 1.125rem; }
.vac__docs a { display: flex; align-items: flex-start; gap: 10px; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.vac__docs .ico { width: 20px; height: 20px; color: var(--ztm-blue); flex: none; }
.vac__form { background: var(--surface); padding: clamp(24px, 3vw, 40px); display: grid; gap: 18px; }
.vac__form .t-h3 { text-transform: uppercase; }

/* 15. Контакты ------------------------------------------------------- */
.contacts-v2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.contacts-v2__main { display: grid; gap: 28px; min-width: 0; }
.big-contact { display: grid; gap: 6px; text-decoration: none; color: var(--ink); font-family: var(--font-head); font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1.05; overflow-wrap: anywhere; }
.big-contact small { font-family: var(--font-body); font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.big-contact:hover { color: var(--ztm-blue); }
.contacts-v2__kv { border-top: 2px solid var(--ink); }
.location { margin: 0; position: relative; }
.location img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.location figcaption { position: absolute; left: 16px; right: 16px; bottom: 16px; background: var(--ultra-black); color: #fff; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; }
.location figcaption .ico { width: 22px; height: 22px; color: var(--blue-light); }
.location strong { display: block; font-family: var(--font-body); font-weight: 400; }
.location small { color: rgba(255,255,255,.76); font-size: var(--fs-micro); }
.rfq-v2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.rfq-v2__copy { display: grid; gap: 20px; }
.rfq-v2__copy p { margin: 0; color: var(--ink-2); font-size: 1.0625rem; }
.rfq-v2__form { background: #fff; padding: clamp(24px, 3vw, 40px); }

/* 16. Карточка товара ------------------------------------------------ */
.pdp { padding-top: 24px; }
.pdp__gallery.is-single { grid-template-columns: minmax(0, 1fr); }
.pdp__stage { background: #fff; border: 1px solid var(--line); aspect-ratio: 1 / .86; padding: clamp(16px, 3vw, 40px); }
.pdp__stage img { width: 100%; height: 100%; object-fit: contain; }
.pdp__thumbs button { background: #fff; padding: 4px; }
.pdp__thumbs img { width: 100%; height: 100%; object-fit: contain; }
.pdp__head { display: grid; gap: 14px; }
.pdp__family { font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--ztm-blue); text-decoration: none; }
.pdp__title { font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.15; text-transform: none; font-family: var(--font-head); overflow-wrap: break-word; }
.pdp__ids { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 28px; border-top: 1px solid var(--line); }
.pdp__ids > div { display: contents; }
.pdp__ids dt { color: var(--muted); font-size: var(--fs-small); padding: 10px 0; border-bottom: 1px solid var(--line); }
.pdp__ids dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); font-family: var(--font-strong); font-weight: 700; overflow-wrap: anywhere; }
.pdp__ids dd a { font-family: var(--font-body); font-weight: 400; color: var(--ink); }
.buy-box { border-top: 3px solid var(--ztm-blue); }
.apply-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; max-width: 960px; }
.apply-list li { border: 1px solid var(--line); padding: 10px 14px; font-size: var(--fs-small); }
.deliv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1080px; }
.deliv > div { background: var(--surface); padding: 22px; display: grid; gap: 8px; align-content: start; }
.deliv h3 { margin: 0; font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: 1.125rem; }
.deliv p { margin: 0; color: var(--ink-2); font-size: var(--fs-small); }

/* 17. Формы, вход, подвал, уведомление о прототипе -------------------- */
.field label, .field .label { font-size: var(--fs-micro); letter-spacing: .02em; }
.input, .select, .textarea { font-size: 1rem; }
.field__error, .field__hint { font-size: var(--fs-micro); }
.auth__visual { background: var(--ultra-black); }
.auth__visual img.auth__photo { opacity: .5; }
.site-footer { font-size: var(--fs-small); }
.footer-col h3, .footer-alliance h3 { font-size: var(--fs-micro); }
.footer-col a { font-size: var(--fs-small); }
.footer-brand p { max-width: 42ch; }
.footer-contacts { display: grid; gap: 6px; }
.footer-contacts a { color: #fff; text-decoration: none; }
.footer-alliance p { margin: 12px 0 0; font-size: var(--fs-micro); color: rgba(255,255,255,.76); max-width: 24ch; }
.footer-bottom { font-size: var(--fs-micro); }
.proto-note { position: fixed; left: 16px; bottom: 16px; z-index: 90; max-width: min(440px, calc(100vw - 32px)); background: var(--ultra-black); color: rgba(255,255,255,.92); font-size: var(--fs-micro); line-height: 1.45; padding: 12px 12px 12px 16px; display: flex; gap: 12px; align-items: flex-start; box-shadow: 0 10px 30px -12px rgba(0,0,0,.5); }
.proto-note strong { color: #fff; font-family: var(--font-body); font-weight: 400; }
.proto-note button { flex: none; background: none; border: 0; color: #fff; padding: 2px; display: grid; }
.proto-note .ico { width: 18px; height: 18px; }

/* 18. Адаптив -------------------------------------------------------- */
@media (max-width: 1320px) {
  .site-header .header-search { display: none; }
  .main-nav { margin-left: auto; }
}
@media (max-width: 1180px) {
  .fam21 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .picker { grid-template-columns: 1fr; }
  .cert-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-band__in { grid-template-columns: 1fr; }
  .contact-band__actions { justify-content: flex-start; }
}
@media (max-width: 1024px) {
  .main-nav { display: none; }
  .topbar__alliance span { display: none; }
  .hero21__pattern { inset: 0; }
  .hero21__pattern video { -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 52%, #000 80%); mask-image: linear-gradient(180deg, transparent 0, transparent 52%, #000 80%); }
  .hero21__grid { min-height: 0; }
  .hero21__copy { grid-column: 1 / -1; }
  .hero21__photo { grid-column: 1 / -1; }
  .hero21__photo img { aspect-ratio: 16 / 9; }
  .hero21__facts-in, .facts-strip__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero21__facts-in > div:nth-child(3), .facts-strip__in > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .hero21__facts-in > div:nth-child(n+3), .facts-strip__in > div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.16); }
  .prod21 { grid-template-columns: 1fr; }
  .prod21__media { min-height: 0; aspect-ratio: 16 / 9; }
  .product-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quality, .profile, .req, .alliance, .today, .vac, .contacts-v2, .rfq-v2, .career21__in { grid-template-columns: 1fr; }
  .v2-row__media, .v2-row__copy, .v2-row--flip .v2-row__media, .v2-row--flip .v2-row__copy { grid-column: 1 / -1; order: 0; }
  .sx-head { grid-template-columns: 48px minmax(0, 1fr); }
  .sx-aside { grid-column: 2; justify-self: start; }
  .val-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .val-grid h3 { font-size: 1.2rem; }
  .deliv { grid-template-columns: 1fr; }
  .alliance__logo img { margin-left: 0; }
}
@media (max-width: 760px) {
  :root { --fs-body: 1rem; --header-h: 64px; }
  .topbar .hide-sm { display: none; }
  .topbar__contacts { gap: 14px; }
  .topbar__alliance img { height: 13px; }
  .brand img { height: 30px; }
  .hero21__grid { padding-top: 40px; gap: 32px; }
  .hero21__title { font-size: clamp(1.9rem, 8.6vw, 2.6rem); }
  .hero21__kicker { font-size: .8125rem; letter-spacing: .06em; }
  .hero21__kicker::before { display: none; }
  .hero21__ctas, .hero21__ctas .btn { width: 100%; }
  .hero21__photo figcaption { font-size: .8125rem; }
  .hero21__facts-in > div, .facts-strip__in > div { padding: 18px 12px 20px 0; }
  .hero21__facts-in > div + div, .facts-strip__in > div + div { padding-left: 12px; }
  .hero21__facts-in > div:nth-child(3), .facts-strip__in > div:nth-child(3) { padding-left: 0; }
  .hero21__facts span, .facts-strip span { font-size: var(--fs-micro); }
  .sx-head { grid-template-columns: 1fr; gap: 10px; }
  .sx-aside { grid-column: 1; }
  .fam21 { grid-template-columns: 1fr; gap: 12px; }
  .fam21__card { grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: 16px; row-gap: 6px; padding: 14px 16px 16px 14px; }
  .fam21__media { grid-row: 1 / span 4; aspect-ratio: 1 / 1; padding: 10px; border: 1px solid var(--line-2); align-self: start; }
  .fam21__n, .fam21__card h3, .fam21__card p, .fam21__foot { margin-left: 0; margin-right: 0; }
  .fam21__n { margin-top: 0; }
  .fam21__card h3 { font-size: 1.125rem; }
  .fam21__card p { font-size: var(--fs-micro); }
  .fam21__foot { padding-top: 10px; }
  .picker__result { padding: 18px; }
  .pick { min-height: 44px; padding: 8px 12px; }
  .pick strong { font-size: 1rem; }
  .product-grid--4 { grid-template-columns: 1fr; }
  .product-grid--4 .product-card, .product-grid .product-card { grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; padding: 14px; }
  .product-grid .product-card__media { grid-row: 1 / span 2; align-self: start; border: 1px solid var(--line-2); }
  .product-grid .product-card__foot { grid-column: 1 / -1; }
  .product-grid .flag { display: none; }
  .card-actions { grid-template-columns: 1fr 1fr; }
  .prod21__copy { padding: 40px 16px 48px; }
  .quality__docs { gap: 10px; }
  .quality__docs img:nth-child(2) { transform: translateY(-14px); }
  .career21__photo img { aspect-ratio: 4 / 3; }
  .mosaic { grid-template-columns: 1fr; }
  .mosaic__a { grid-row: auto; }
  .mosaic__a img { aspect-ratio: 16 / 9; }
  .val-grid, .offer-grid, .how, .doc-cards { grid-template-columns: 1fr; }
  .cert-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .today__nums > div { grid-template-columns: 1fr; gap: 6px; }
  .location img { aspect-ratio: 1 / 1; }
  .location figcaption { grid-template-columns: 24px minmax(0, 1fr); }
  .location figcaption .btn { grid-column: 1 / -1; }
  .proto-note { left: 8px; right: 8px; bottom: 8px; max-width: none; }
  .pdp__ids { grid-template-columns: 1fr; }
  .pdp__ids dt { border-bottom: 0; padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fam21__card:hover .fam21__media img, .product-card:hover .product-card__media img { transform: none; }
}
@media print { .topbar, .proto-note, .hero21__pattern { display: none; } }

/* =====================================================================
   ZTM Design V3 — Industrial Editorial × Technical Commerce.
   Слой поверх styles.css (V1) и v2.css (V2.1); одно определение на компонент.
   Бренд Dotorg: Ultra Black #131926, Resource Gray #484C51, White,
   синий ЗТМ #2E6BC5 (all-colors-RGB.pdf: CMYK 90 50 0 0 / HEX 2E6BC5).
   Режимы: body[data-mode="editorial"] — корпоративные страницы,
           body[data-mode="commerce"]  — каталог, товар, список для КП, формы.
   Токены и их обоснование — docs/DESIGN_TOKENS_V3.md.
   ===================================================================== */

/* 1. Токены V3 ------------------------------------------------------- */
:root {
  --surface: #F1F2F4;            /* = фон, запечённый в фото изделий */
  --surface-2: #E6E8EB;
  --line: #D3D7DC;
  --line-2: #E6E8EB;
  --muted: #555C66;              /* 6.6:1 на белом, 6.0:1 на --surface */
  --on-dark-muted: rgba(255,255,255,.78);   /* ≥ 7:1 на Ultra Black, ≥ 4.8:1 на Resource Gray */
  --blue-light: #9DBDEB;         /* синий ЗТМ, осветлённый для текста на тёмном: 9.2:1 на Ultra Black */
  --grid-cols: 12;
  --col-gap: clamp(16px, 2vw, 24px);
  --tile-gap: 16px;
  --header-h: 72px;
  --fs-display: clamp(2.25rem, 4.1vw, 3.875rem);
  --t-fast: .18s;
  --t-base: .28s;
}
body { text-rendering: optimizeLegibility; }
h1, h2, h3, .sx-title { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; word-break: normal; }
:focus-visible { outline: 3px solid var(--ztm-blue); outline-offset: 2px; }
[data-mode] .section--dark :focus-visible, .hero3 :focus-visible, .proc3 :focus-visible, .paths3 :focus-visible, .site-footer :focus-visible { outline-color: #fff; }

/* 2. Шапка: мега-меню, «Список для КП» ------------------------------- */
.site-header { position: sticky; top: 0; z-index: 70; }
.site-header__in { height: var(--header-h); }
.brand img { height: 34px; width: auto; display: block; }
.main-nav { align-items: stretch; height: 100%; }
.main-nav > a, .mega__toggle { display: inline-flex; align-items: center; padding: 0; height: 100%; }
.mega { display: flex; align-items: stretch; }
.mega__toggle { gap: 6px; background: none; border: 0; font: inherit; color: inherit; text-transform: uppercase; letter-spacing: .06em; font-size: .9375rem; cursor: pointer; position: relative; }
.mega__toggle .ico { width: 16px; height: 16px; transition: transform var(--t-fast) var(--ease); }
.mega__toggle[aria-expanded="true"] .ico { transform: rotate(180deg); }
.mega__toggle::after { content: ""; position: absolute; left: 0; right: 22px; bottom: 18px; height: 2px; background: var(--ztm-blue); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.mega__toggle:hover::after, .mega__toggle[aria-expanded="true"]::after, .mega__toggle[aria-current="page"]::after { transform: scaleX(1); }
.main-nav > a::after { bottom: 18px; }
.mega__panel { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--line); border-bottom: 2px solid var(--ink); box-shadow: 0 24px 48px -32px rgba(19,25,38,.45); }
.mega__in { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; padding-top: 32px; padding-bottom: 36px; }
.mega__groups { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 32px; }
.mega__group h3 { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--ink); font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: 1rem; letter-spacing: .02em; line-height: 1.2; }
.mega__group h3 a { text-decoration: none; display: flex; justify-content: space-between; gap: 12px; }
.mega__group h3 a:hover { color: var(--ztm-blue); }
.mega__group h3 span, .mega__group li span { color: var(--muted); font-size: .875rem; font-variant-numeric: tabular-nums; }
.mega__group ul { list-style: none; margin: 0; padding: 0; display: grid; }
.mega__group li a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; text-decoration: none; font-size: .9375rem; line-height: 1.35; border-bottom: 1px solid var(--line-2); min-height: 44px; align-items: center; }
.mega__group li a:hover { color: var(--ztm-blue); }
.mega__aside { display: grid; gap: 10px; align-content: start; border-left: 1px solid var(--line); padding-left: 32px; }
.mega__all { display: grid; text-decoration: none; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line-2); }
.mega__all span { text-transform: uppercase; letter-spacing: .06em; font-size: .875rem; color: var(--muted); }
.mega__all strong { font-family: var(--font-head); font-weight: 400; font-size: 3rem; line-height: 1; margin: 6px 0 4px; }
.mega__all small { color: var(--muted); font-size: .875rem; }
.mega__all:hover strong { color: var(--ztm-blue); }
.rfq-link { position: relative; }
.rfq-link[aria-current="page"] { border-color: var(--ink); }
.badge-count { background: var(--ztm-blue); color: #fff; }

/* мобильное меню (drawer) */
.drawer__panel { width: min(88vw, 400px); }
.drawer-search { display: block; max-width: none; margin: 16px 0 8px; }
.mobile-nav a, .mobile-cat summary { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mobile-cat { border-bottom: 1px solid var(--line); }
.mobile-cat summary { cursor: pointer; list-style: none; text-transform: uppercase; letter-spacing: .04em; font-size: 1.0625rem; }
.mobile-cat summary::-webkit-details-marker { display: none; }
.mobile-cat summary .ico { width: 18px; height: 18px; transition: transform var(--t-fast); }
.mobile-cat[open] summary .ico { transform: rotate(180deg); }
.mobile-cat__list { display: grid; padding: 0 0 12px; }
.mobile-cat__list strong { display: block; margin: 14px 0 4px; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.mobile-cat__list a { min-height: 44px; border: 0; padding: 6px 0; font-size: 1rem; text-transform: none; letter-spacing: 0; display: flex; justify-content: space-between; gap: 12px; text-decoration: none; }
.mobile-cat__list a span { color: var(--muted); font-size: .875rem; }
.mobile-nav__rfq .badge-count { position: static; }
.drawer-phone small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .875rem; color: var(--muted); margin-top: 4px; }

/* 3. Hero V3: единая композиция «линии Dotorg × цех × типографика» ---- */
.hero3 { position: relative; isolation: isolate; overflow: hidden; background: var(--resource-gray); color: #fff; }
.hero3__stage { position: absolute; inset: 0 0 auto 0; height: var(--hero-stage, 100%); z-index: -1; }
.hero3__photo { position: absolute; top: 0; right: 0; bottom: 0; width: 62%; margin: 0; }
.hero3__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%;
  filter: saturate(.42) contrast(1.12) brightness(.72);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.55) 22%, #000 46%);
          mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.55) 22%, #000 46%); }
/* видеопаттерн V2.1: серый фон видео → чёрный (contrast), режим screen оставляет только белые дуги,
   поэтому линии одинаково проходят и по серой плоскости, и по фотографии */
.hero3__lines, .hero3__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 60%;
  filter: contrast(2.4); mix-blend-mode: screen; opacity: .62; transform: scaleX(-1);
  -webkit-mask-image: linear-gradient(270deg, rgba(0,0,0,.18) 0, rgba(0,0,0,.18) 30%, rgba(0,0,0,.55) 52%, #000 72%);
          mask-image: linear-gradient(270deg, rgba(0,0,0,.18) 0, rgba(0,0,0,.18) 30%, rgba(0,0,0,.55) 52%, #000 72%); }
.hero3__poster { display: none; }
.hero3__shade { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(72,76,81,.9) 0, rgba(72,76,81,.78) 30%, rgba(72,76,81,.25) 50%, rgba(72,76,81,0) 62%),
  linear-gradient(0deg, rgba(19,25,38,.5) 0, rgba(19,25,38,0) 20%); }
.hero3__grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap);
  min-height: clamp(520px, calc(100svh - 38px - var(--header-h) - 118px), 700px); align-content: center; padding-top: clamp(40px, 4.4vw, 64px); padding-bottom: clamp(48px, 5vw, 72px); }
.hero3__copy { grid-column: 1 / span 8; display: grid; gap: 22px; align-content: center; }
.hero3__kicker { margin: 0; display: flex; align-items: center; gap: 14px; text-transform: uppercase; letter-spacing: .1em; font-size: .875rem; color: var(--on-dark-muted); }
.hero3__kicker::before { content: ""; width: 40px; height: 2px; background: var(--blue-light); flex: none; }
.hero3__title { margin: 0; font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: var(--fs-display); line-height: 1.02; letter-spacing: -.005em; }
.hero3__title > span { display: block; white-space: nowrap; }
.hero3__lead { margin: 0; max-width: 54ch; font-size: clamp(1.0625rem, 1.25vw, 1.25rem); line-height: 1.55; color: rgba(255,255,255,.9); }
.hero3__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hero3__ctas .btn--light:hover { --bg: var(--ultra-black); --fg: #fff; --bd: var(--ultra-black); }
.hero3__caption { position: absolute; right: var(--gutter); bottom: 22px; margin: 0; padding: 7px 12px; background: rgba(19,25,38,.82); font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.82); display: flex; align-items: center; gap: 10px; }
.hero3__caption::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.hero3__facts { background: var(--ultra-black); }
.stats3 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 auto; }
.stats3 > div { display: grid; grid-template-rows: auto auto 1fr; padding: 22px 24px 26px; border-left: 1px solid rgba(255,255,255,.16); }
.stats3 > div:first-child { padding-left: 0; border-left: 0; }
.stats3 dt { order: 0; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-light); }
.stats3 dd { margin: 6px 0 4px; font-family: var(--font-head); font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1.05; }
.stats3 span { font-size: .875rem; line-height: 1.4; color: var(--on-dark-muted); max-width: 30ch; }

/* вариант B «Плакат» (для сравнения: ?hero=b) */
.hero3--b .hero3__photo { width: 100%; }
.hero3--b .hero3__photo img { object-position: 50% 30%; filter: saturate(.35) contrast(1.1) brightness(.8); -webkit-mask-image: none; mask-image: none; }
.hero3--b .hero3__lines, .hero3--b .hero3__poster { opacity: .7; object-position: 100% 0;
  -webkit-mask-image: linear-gradient(215deg, #000 0, rgba(0,0,0,.6) 30%, transparent 58%);
          mask-image: linear-gradient(215deg, #000 0, rgba(0,0,0,.6) 30%, transparent 58%); }
.hero3--b .hero3__shade { background: linear-gradient(0deg, rgba(19,25,38,.94) 0, rgba(19,25,38,.62) 42%, rgba(19,25,38,.12) 78%), linear-gradient(90deg, rgba(19,25,38,.55) 0, rgba(19,25,38,0) 60%); }
.hero3--b .hero3__grid { align-content: end; }
.hero3--b .hero3__copy { grid-column: 1 / span 8; }
.hero3--b .hero3__title { max-width: 16ch; }
.hero3--b .hero3__caption { top: 24px; bottom: auto; }

/* 4. Продукция: все разделы каталога --------------------------------- */
.cats3 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px var(--tile-gap); }
.cats3__group { grid-column: span var(--span, 1); display: grid; gap: 14px; align-content: start; }
.cats3__head { display: grid; gap: 6px; align-content: start; padding-top: 12px; border-top: 2px solid var(--ink); }
.cats3__head h3 { margin: 0; font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: clamp(1.125rem, 1.4vw, 1.375rem); line-height: 1.15; min-height: 2.3em; }
.cats3__head a.link-arrow { white-space: nowrap; justify-self: start; }
.cats3__tiles { display: grid; grid-template-columns: repeat(var(--span, 1), minmax(0, 1fr)); gap: var(--tile-gap); }
.cat3 { display: grid; grid-template-rows: auto 1fr auto; text-decoration: none; background: #fff; border: 1px solid var(--line); transition: border-color var(--t-fast); min-height: 100%; }
.cat3:hover { border-color: var(--ink); }
.cat3__media { display: block; aspect-ratio: 4 / 3; background: var(--surface); overflow: hidden; }
.cat3__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat3__name { padding: 14px 16px 6px; font-size: 1rem; line-height: 1.35; }
.cat3__meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 16px 14px; color: var(--muted); font-size: .875rem; font-variant-numeric: tabular-nums; }
.cat3__meta .ico { width: 18px; height: 18px; color: var(--ztm-blue); transition: transform var(--t-fast) var(--ease); }
.cat3:hover .cat3__meta .ico { transform: translateX(4px); }
.cat3__flag { display: inline-block; margin: 0 16px 10px; font-size: .75rem; letter-spacing: .04em; color: var(--warn); }
.sx-aside .link-arrow { display: inline-flex; margin-top: 10px; }
.docs3__more .link-arrow, .sx-aside .link-arrow, a.link-arrow.sx-aside { white-space: normal; }

/* 5. Производство на главной: список участков ↔ фото (click/tap/клавиатура) */
.proc3 { background: var(--ultra-black); color: #fff; padding: var(--section) 0; overflow: hidden; }
.proc3__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: stretch; }
.proc3__copy { grid-column: 1 / span 5; display: grid; gap: 20px; align-content: start; }
.proc3__lead { margin: 0; color: var(--on-dark-muted); font-size: 1.0625rem; max-width: 46ch; }
.proc3__list { list-style: none; margin: 8px 0 12px; padding: 0; border-top: 1px solid rgba(255,255,255,.18); }
.proc3__list li { border-bottom: 1px solid rgba(255,255,255,.18); }
.proc3__list button { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; text-align: left; padding: 16px 12px 16px 0; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; position: relative; min-height: 64px; }
.proc3__list button::before { content: ""; position: absolute; left: -16px; top: 12px; bottom: 12px; width: 3px; background: var(--ztm-blue); transform: scaleY(0); transition: transform var(--t-base) var(--ease); }
.proc3__list button[aria-selected="true"]::before { transform: none; }
.proc3__list span { grid-row: 1 / span 2; font-family: var(--font-strong); font-weight: 700; font-size: .875rem; color: var(--blue-light); padding-top: 3px; }
.proc3__list strong { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: 1.0625rem; letter-spacing: .02em; color: rgba(255,255,255,.74); transition: color var(--t-fast); }
.proc3__list small { font-size: .9375rem; color: rgba(255,255,255,.62); max-height: 0; overflow: hidden; transition: max-height var(--t-base) var(--ease), margin var(--t-base); }
.proc3__list button[aria-selected="true"] strong, .proc3__list button:hover strong { color: #fff; }
.proc3__list button[aria-selected="true"] small { max-height: 3em; margin-top: 4px; color: var(--on-dark-muted); }
.proc3__copy .btn { justify-self: start; }
.proc3__media { grid-column: 7 / span 6; position: relative; margin-right: calc(-1 * max(var(--gutter), (100vw - var(--container)) / 2 + var(--gutter))); min-height: 560px; }
.proc3__media figure { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .35s var(--ease); }
.proc3__media figure.is-active { opacity: 1; }
.proc3__media figure[hidden] { display: block; visibility: hidden; }
.proc3__media figure.is-active[hidden] { visibility: visible; }
.proc3__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) contrast(1.04); }
.proc3__media figcaption { position: absolute; left: 0; bottom: 0; padding: 12px 18px; background: var(--ultra-black); color: var(--on-dark-muted); font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; }

/* 6. Карточки товаров V3 (Commerce) ---------------------------------- */
.product-card { gap: 12px; padding: 16px 16px 18px; }
.product-card:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.product-card__media { aspect-ratio: 4 / 3; background: var(--surface); padding: 0; border-bottom: 0; }
.product-card__media img { object-fit: cover; }
.product-card:hover .product-card__media img { transform: none; }
.product-card .flag { background: var(--ultra-black); color: #fff; font-size: .75rem; letter-spacing: .06em; }
.product-card__sku { font-size: .875rem; color: var(--ink-2); letter-spacing: .02em; }
.product-card__sku b { font-weight: 400; color: var(--muted); }
.product-card__name { font-size: 1rem; line-height: 1.4; }
.price-row--req { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.price-row--req .price--req { font-size: .9375rem; }
.card-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.card-actions .btn { min-height: 44px; }
.btn.is-in-list { --bg: #fff; --fg: var(--ztm-blue); --bd: var(--ztm-blue); }
.btn.is-in-list:hover { --bg: var(--ztm-blue-soft); }
.product-grid.is-list .card-actions { grid-template-columns: 1fr; }

/* 7. Документы: карточки реальных документов ------------------------- */
.docs3 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tile-gap); }
.docs3__card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: 22px 22px 18px; background: #fff; border: 1px solid var(--line); text-decoration: none; min-height: 236px; transition: border-color var(--t-fast); }
.docs3__card:hover { border-color: var(--ink); }
.docs3__type { font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ztm-blue); }
.docs3__card strong { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: 1.125rem; line-height: 1.2; }
.docs3__note { color: var(--muted); font-size: .9375rem; line-height: 1.45; }
.docs3__open { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--line-2); font-size: .875rem; text-transform: uppercase; letter-spacing: .06em; }
.docs3__open .ico { width: 18px; height: 18px; color: var(--ztm-blue); }
.docs3__more { margin: 24px 0 0; }

/* 8. Два пути: нижний CTA с ztm_pattern ----------------------------- */
.paths3 { position: relative; isolation: isolate; background: var(--ultra-black); color: #fff; overflow: hidden; }
.paths3__bg { position: absolute; inset: 0; z-index: -1; }
.paths3__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.paths3__in { padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(64px, 8vw, 112px); display: grid; gap: 36px; }
.paths3__title { color: #fff; }
.paths3__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); max-width: 1040px; }
.paths3__card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; padding: clamp(24px, 3vw, 40px); }
.paths3__card h3 { margin: 0; font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: clamp(1.375rem, 2vw, 1.875rem); line-height: 1.1; }
.paths3__card p { margin: 0; font-size: 1.0625rem; line-height: 1.55; max-width: 44ch; }
.paths3__card .btn { justify-self: start; margin-top: 8px; }
.paths3__card--self { background: var(--ultra-black); border: 1px solid rgba(255,255,255,.28); }
.paths3__card--self p { color: var(--on-dark-muted); }
.paths3__card--sales { background: #fff; color: var(--ink); }
.paths3__card--sales p { color: var(--ink-2); }
.paths3__chip { justify-self: start; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border: 1px solid currentColor; }
.paths3__card--self .paths3__chip { color: var(--blue-light); }
.paths3__card--sales .paths3__chip { color: var(--ztm-blue); }
.paths3__row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 8px; }
.paths3__row .btn { margin-top: 0; }
.paths3__phone { display: grid; text-decoration: none; font-family: var(--font-strong); font-weight: 700; font-size: 1.25rem; line-height: 1.1; }
.paths3__phone small { font-family: var(--font-body); font-weight: 400; font-size: .8125rem; color: var(--muted); margin-top: 4px; }

/* 9. Страницы: шапки редакционного и коммерческого режимов ----------- */
.ph3 { position: relative; isolation: isolate; overflow: hidden; background: var(--resource-gray); color: #fff; }
.ph3__art { position: absolute; top: 0; right: 0; bottom: 0; width: min(46%, 640px); z-index: -1; }
.ph3__art img { width: 100%; height: 100%; object-fit: cover; object-position: 0 100%; }
.ph3__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--resource-gray) 0, rgba(72,76,81,0) 40%); }
.ph3__in { padding-top: clamp(28px, 3.4vw, 44px); padding-bottom: clamp(48px, 6vw, 88px); display: grid; gap: 18px; }
.ph3 .crumbs, .ph3 .crumbs a { color: rgba(255,255,255,.82); margin-bottom: 8px; }
.ph3__title { margin: 0; font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: clamp(2.25rem, 4.6vw, 4.25rem); line-height: 1; max-width: 16ch; }
.ph3__lead { margin: 0; max-width: 56ch; font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); color: rgba(255,255,255,.9); }
/* производство: фото-шапка с белыми дугами Dotorg */
.ph .ph__lines { position: absolute; top: 0; right: 0; height: 100%; width: auto; opacity: .55; z-index: 0; mix-blend-mode: screen; pointer-events: none; }
.ph__in { position: relative; z-index: 1; }

/* commerce: шапка каталога с макрокадром изделий ztm.tif */
.page-head--cat3 { position: relative; isolation: isolate; border-bottom: 1px solid var(--line); }
.page-head--cat3 .page-head__row { align-items: stretch; }
.page-head__macro { position: absolute; top: 0; right: 0; bottom: 58px; width: min(38%, 560px); z-index: -1; margin: 0; }
.page-head__macro img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.page-head__macro::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #fff 0, rgba(255,255,255,.0) 42%); }
.page-head--cat3 .container { position: relative; }
.page-head__lead { max-width: 56ch; }
.cat-count { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .9375rem; }

/* хлебные крошки + заголовок записи (карточка товара, разделы) */
.crumbs { font-size: .875rem; }
.crumbs li + li::before { content: "›"; opacity: .7; }
.crumbs [aria-current="page"] { color: var(--ink); max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph3 .crumbs [aria-current="page"], .ph .crumbs [aria-current="page"] { color: #fff; }
.rec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.rec-head__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: .9375rem; }
.rec-head__meta li + li::before { content: "·"; margin-right: 18px; color: var(--line); }
.rec-head__meta b { font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }

/* 10. Производство: alternating showcase в редакционной сетке -------- */
.show3 { display: grid; gap: clamp(56px, 7vw, 104px); }
.show3__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; }
.show3__media { grid-column: 1 / span 7; margin: 0 0 0 calc(-1 * max(var(--gutter), (100vw - var(--container)) / 2 + var(--gutter))); position: relative; }
.show3__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; filter: saturate(.8) contrast(1.03); }
.show3__copy { grid-column: 9 / span 4; display: grid; gap: 14px; align-content: center; }
.show3__row--flip .show3__media { grid-column: 6 / span 7; order: 2; margin: 0 calc(-1 * max(var(--gutter), (100vw - var(--container)) / 2 + var(--gutter))) 0 0; }
.show3__row--flip .show3__copy { grid-column: 1 / span 4; order: 1; }
.show3__n { font-family: var(--font-strong); font-weight: 700; font-size: .9375rem; letter-spacing: .08em; color: var(--ztm-blue); display: flex; align-items: center; gap: 12px; }
.show3__n::after { content: ""; flex: 1; height: 1px; background: var(--line); max-width: 120px; }
.show3__copy h3 { margin: 0; font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: clamp(1.5rem, 2.4vw, 2.25rem); line-height: 1.05; }
.show3__copy p { margin: 0; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.6; }
.show3__copy ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: .9375rem; color: var(--muted); }
.show3__copy ul li { padding-left: 18px; position: relative; }
.show3__copy ul li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 2px; background: var(--ztm-blue); }
.show3__media figcaption { position: absolute; left: 0; bottom: 0; background: #fff; padding: 10px 16px; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.show3__row--flip .show3__media figcaption { left: auto; right: 0; }

/* 11. Список для КП (data table with toolbar) ------------------------ */
.rfq3 { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(24px, 3vw, 40px); align-items: start; }
.rfq3__panel { border: 1px solid var(--line); background: #fff; }
.rfq3__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.rfq3__bar h2 { margin: 0; font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: 1.25rem; }
.rfq3__bar h2 small { font-family: var(--font-body); text-transform: none; font-size: .9375rem; color: var(--muted); margin-left: 10px; }
.rfq3__tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rfq3__search { position: relative; }
.rfq3__search .input { min-height: 44px; padding-left: 40px; width: 260px; }
.rfq3__search .ico { position: absolute; left: 12px; top: 13px; color: var(--muted); }
.rfq3 table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.rfq3 th { text-align: left; font-weight: 400; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rfq3 th button { background: none; border: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; min-height: 32px; }
.rfq3 th button[aria-sort]::after, .rfq3 th[aria-sort] button::after { content: "↕"; opacity: .5; }
.rfq3 th[aria-sort="ascending"] button::after { content: "↑"; opacity: 1; color: var(--ztm-blue); }
.rfq3 th[aria-sort="descending"] button::after { content: "↓"; opacity: 1; color: var(--ztm-blue); }
.rfq3 td { padding: 12px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.rfq3 tbody tr:hover { background: #FAFBFC; }
.rfq3__img { width: 72px; }
.rfq3__img img { width: 72px; height: 54px; object-fit: cover; display: block; background: var(--surface); }
.rfq3__sku { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-2); }
.rfq3__name a { text-decoration: none; line-height: 1.4; }
.rfq3__name a:hover { color: var(--ztm-blue); }
.rfq3__name small { display: block; color: var(--muted); font-size: .8125rem; margin-top: 2px; }
.rfq3 .qty { width: 132px; }
.rfq3 .qty input { width: 52px; }
.rfq3__rm { background: none; border: 0; color: var(--muted); min-width: 44px; min-height: 44px; cursor: pointer; display: grid; place-items: center; }
.rfq3__rm:hover { color: var(--err); }
.rfq3__rm .ico { width: 18px; height: 18px; }
.rfq3__empty-row td { text-align: center; color: var(--muted); padding: 28px; }
.rfq3__foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px 20px; font-size: .875rem; color: var(--muted); }
.rfq3__aside { border: 1px solid var(--ink); padding: 22px; display: grid; gap: 14px; position: sticky; top: calc(var(--header-h) + 16px); background: #fff; }
.rfq3__aside h2 { margin: 0; font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: 1.25rem; }
.rfq3__aside dl { margin: 0; display: grid; gap: 8px; }
.rfq3__aside dl div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line-2); padding-bottom: 8px; }
.rfq3__aside dt { color: var(--muted); }
.rfq3__aside dd { margin: 0; font-variant-numeric: tabular-nums; }
.rfq3__aside p { margin: 0; font-size: .875rem; color: var(--muted); }
.rfq3__empty { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); border: 1px solid var(--line); background: #fff; }
.rfq3__empty-copy { padding: clamp(28px, 4vw, 48px); display: grid; gap: 16px; align-content: center; }
.rfq3__empty-copy h2 { margin: 0; font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: clamp(1.5rem, 2.4vw, 2.125rem); line-height: 1.1; }
.rfq3__empty-copy p { margin: 0; color: var(--muted); max-width: 52ch; }
.rfq3__empty-copy .row { display: flex; flex-wrap: wrap; gap: 10px; }
.rfq3__empty-art { margin: 0; min-height: 260px; }
.rfq3__empty-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.steps3 { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 0; counter-reset: s; border-bottom: 1px solid var(--line); }
.steps3 li { counter-increment: s; display: flex; align-items: center; gap: 10px; padding: 12px 22px 12px 0; margin-right: 22px; color: var(--muted); font-size: .9375rem; position: relative; }
.steps3 li::before { content: counter(s, decimal-leading-zero); font-family: var(--font-strong); font-weight: 700; font-size: .8125rem; }
.steps3 li a { color: inherit; }
.steps3 li[aria-current="step"] { color: var(--ink); }
.steps3 li[aria-current="step"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ztm-blue); }

/* 12. Маршрутизированная форма запроса ------------------------------ */
.enq3 { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(24px, 3vw, 40px); align-items: start; }
.enq3__types { border: 0; margin: 0 0 4px; padding: 0; min-width: 0; }
.enq3__types legend { padding: 0; margin-bottom: 10px; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.enq3__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--ink); }
.enq3__types label { position: relative; display: grid; gap: 4px; padding: 16px 18px; cursor: pointer; min-height: 88px; align-content: start; border-left: 1px solid var(--ink); }
.enq3__types label:first-of-type { border-left: 0; }
.enq3__types input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.enq3__types strong { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: 1rem; line-height: 1.2; }
.enq3__types small { color: var(--muted); font-size: .875rem; line-height: 1.35; }
.enq3__types label:has(input:checked) { background: var(--ultra-black); color: #fff; }
.enq3__types label:has(input:checked) small { color: var(--on-dark-muted); }
.enq3__types label:has(input:focus-visible) { outline: 3px solid var(--ztm-blue); outline-offset: -3px; }
.enq3__help { border: 1px solid var(--line); background: var(--surface); padding: 14px 16px; font-size: .9375rem; color: var(--ink-2); margin-bottom: 20px; }
.enq3__help strong { display: block; margin-bottom: 4px; }
.enq3 [data-enq-only][hidden] { display: none !important; }
.enq3__items { border: 1px solid var(--line); margin-bottom: 4px; }
.enq3__items table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.enq3__items th, .enq3__items td { padding: 8px 12px; border-bottom: 1px solid var(--line-2); text-align: left; }
.enq3__items th { font-weight: 400; color: var(--muted); font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; }
.enq3__items td.num, .enq3__items th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.enq3__items-foot { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; font-size: .875rem; }
.enq3__aside { display: grid; gap: 16px; position: sticky; top: calc(var(--header-h) + 16px); }
.enq3__card { border: 1px solid var(--line); background: #fff; padding: 20px; display: grid; gap: 10px; }
.enq3__card h2 { margin: 0; font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: 1.125rem; }
.enq3__card p { margin: 0; font-size: .9375rem; color: var(--ink-2); }
.enq3__demo { border-left: 3px solid var(--warn); background: var(--warn-soft); padding: 12px 14px; font-size: .875rem; color: #5C3D00; }
.enq3__result { border: 1px solid var(--ink); background: #fff; padding: clamp(24px, 3vw, 36px); display: grid; gap: 16px; }
.enq3__result h2 { margin: 0; font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.enq3__result pre { margin: 0; white-space: pre-wrap; font-family: ui-monospace, Consolas, monospace; font-size: .8125rem; background: var(--surface); border: 1px solid var(--line); padding: 14px; max-height: 320px; overflow: auto; }

/* 13. Карточка товара ------------------------------------------------ */
.pdp__stage { background: var(--surface); padding: 0; aspect-ratio: 4 / 3; border: 0; }
.pdp__stage img { object-fit: cover; }
.pdp__thumbs img { object-fit: cover; }
.pdp-rfq { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--ink); }
.pdp-rfq__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pdp-rfq__row .btn { flex: 1 1 200px; min-height: 52px; }
.pdp-rfq__note { margin: 0; font-size: .875rem; color: var(--muted); }

/* 14. Подвал и прочее ------------------------------------------------ */
.site-footer .ztm { height: 40px; width: auto; }
.footer-col a, .footer-contacts a { min-height: 32px; display: inline-flex; align-items: center; }
.contact-band { background: var(--ztm-blue); }

/* 15. prefers-reduced-motion: статичный кадр паттерна --------------- */
@media (prefers-reduced-motion: reduce) {
  .hero3__lines { display: none; }
  .hero3__poster { display: block; }
  .proc3__media figure, .proc3__list small, .mega__toggle .ico { transition: none; }
}
.hero3.is-static .hero3__lines { display: none; }
.hero3.is-static .hero3__poster { display: block; }

/* 16. Адаптив V3 ----------------------------------------------------- */
@media (max-width: 1320px) {
  .mega__groups { grid-template-columns: 1.2fr 1fr 1fr; }
  .mega__groups .mega__group:nth-child(4) { grid-column: 3; }
  .docs3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .cats3 { grid-template-columns: 1fr; }
  .cats3__group { grid-column: auto; }
  .cats3__tiles { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .rfq3, .enq3 { grid-template-columns: 1fr; }
  .rfq3__aside, .enq3__aside { position: static; }
  .hero3__copy { grid-column: 1 / span 9; }
}
@media (max-width: 1024px) {
  /* планшет и мобильный: кадр сверху, текст целиком на серой плоскости */
  .hero3 { --hero-photo-h: 320px; }
  .hero3__photo { width: 100%; height: var(--hero-photo-h); bottom: auto; }
  .hero3__photo img { object-position: 70% 40%; -webkit-mask-image: linear-gradient(180deg, #000 0, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 55%, transparent 100%); }
  .hero3__lines, .hero3__poster { transform: none; object-position: 20% 100%; opacity: .55; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.5) 0, rgba(0,0,0,.5) var(--hero-photo-h), #000 100%); mask-image: linear-gradient(180deg, rgba(0,0,0,.5) 0, rgba(0,0,0,.5) var(--hero-photo-h), #000 100%); }
  .hero3__shade { background: linear-gradient(180deg, rgba(72,76,81,0) 0, rgba(72,76,81,0) calc(var(--hero-photo-h) * .55), rgba(72,76,81,.92) calc(var(--hero-photo-h) + 20px), rgba(72,76,81,.78) 100%); }
  .hero3__grid { min-height: 0; padding-top: calc(var(--hero-photo-h) - 30px); padding-bottom: 44px; }
  .hero3__copy { grid-column: 1 / -1; }
  .hero3__caption { top: 16px; bottom: auto; right: auto; left: var(--gutter); }
  .hero3--b .hero3__photo { height: 100%; }
  .hero3--b .hero3__photo img { -webkit-mask-image: none; mask-image: none; }
  .sx-head.sx-head--sm { grid-template-columns: minmax(0, 1fr); }
  .proc3__copy { grid-column: 1 / -1; }
  .proc3__media { grid-column: 1 / -1; margin: 32px calc(-1 * var(--gutter)) 0; min-height: 0; aspect-ratio: 16 / 10; }
  .stats3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats3 > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .stats3 > div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.16); }
  .show3__media, .show3__row--flip .show3__media { grid-column: 1 / -1; order: 0; margin: 0 calc(-1 * var(--gutter)); }
  .show3__copy, .show3__row--flip .show3__copy { grid-column: 1 / -1; order: 1; margin-top: 24px; }
  .page-head__macro { width: 34%; }
  .ph3__art { width: 52%; opacity: .7; }
}
@media (max-width: 760px) {
  :root { --header-h: 60px; --tile-gap: 10px; }
  .brand img { height: 28px; }
  .header-actions .rfq-link .label { display: none; }
  /* мобильный Hero 390×844: кадр сверху, текст и главное CTA целиком в первом экране */
  .hero3 { --hero-photo-h: 210px; }
  .hero3__grid { padding-top: 190px; padding-bottom: 36px; }
  .hero3__copy { grid-column: 1 / -1; gap: 16px; }
  .hero3__kicker { font-size: .75rem; letter-spacing: .06em; }
  .hero3__kicker::before { width: 24px; }
  .hero3__title { font-size: clamp(1.875rem, 8.4vw, 2.5rem); line-height: 1.02; max-width: none; }
  .hero3__title > span { display: inline; white-space: normal; }
  .hero3__lead { font-size: 1rem; line-height: 1.5; }
  .hero3__ctas { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .hero3__ctas .btn { width: 100%; min-height: 52px; }
  .hero3__ctas .btn--primary { order: -1; }
  .hero3__caption { top: 12px; bottom: auto; right: auto; left: 16px; font-size: .6875rem; padding: 5px 8px; }
  .hero3__caption::before { display: none; }
  .hero3--b .hero3__photo { height: 100%; }
  .hero3--b .hero3__photo img { -webkit-mask-image: none; mask-image: none; }
  .hero3--b .hero3__grid { padding-top: 240px; }
  .stats3 > div { padding: 16px 12px 18px 0; }
  .stats3 > div:nth-child(even) { padding-left: 14px; }
  .stats3 span { font-size: .8125rem; }
  .cats3 { gap: 32px; }
  .cats3__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat3__name { padding: 10px 12px 4px; font-size: .9375rem; }
  .cat3__meta { padding: 6px 12px 12px; font-size: .8125rem; }
  .cats3__head h3 { min-height: 0; }
  .proc3__list strong { font-size: 1rem; }
  .docs3 { grid-template-columns: 1fr; }
  .docs3__card { min-height: 0; }
  .paths3__grid { grid-template-columns: 1fr; }
  .paths3__bg img { object-position: 50% 30%; }
  .ph3__art { width: 100%; opacity: .32; }
  .ph3__art::after { background: linear-gradient(90deg, var(--resource-gray) 0, rgba(72,76,81,.2) 100%); }
  .page-head__macro { display: none; }
  .show3__copy h3 { font-size: 1.5rem; }
  .rfq3__bar { padding: 14px 16px; }
  .rfq3__search .input { width: 100%; }
  .rfq3__search { flex: 1 1 100%; }
  /* таблица → карточки строк без потери обязательных атрибутов */
  .rfq3 thead { display: none; }
  .rfq3 table, .rfq3 tbody { display: block; }
  .rfq3 tbody tr { display: grid; grid-template-columns: 72px minmax(0, 1fr) 44px; grid-template-areas: "img name rm" "img sku rm" "qty qty qty"; gap: 4px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
  .rfq3 td { padding: 0; border: 0; }
  .rfq3 td.rfq3__img { grid-area: img; }
  .rfq3 td.rfq3__name { grid-area: name; }
  .rfq3 td.rfq3__sku { grid-area: sku; font-size: .875rem; }
  .rfq3 td.rfq3__sku::before { content: "Арт. "; color: var(--muted); }
  .rfq3 td.rfq3__unit { display: none; }
  .rfq3 td.rfq3__q { grid-area: qty; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
  .rfq3 td.rfq3__q::before { content: "Количество, " attr(data-unit); color: var(--muted); font-size: .875rem; }
  .rfq3 td.rfq3__x { grid-area: rm; }
  .rfq3__empty-row { display: block !important; }
  .rfq3__empty { grid-template-columns: 1fr; }
  .rfq3__empty-art { min-height: 160px; order: -1; }
  .rfq3__empty-art img { aspect-ratio: 16 / 7; height: auto; }
  .enq3__opts { grid-template-columns: 1fr; }
  .enq3__types label { border-left: 0; border-top: 1px solid var(--ink); min-height: 64px; }
  .enq3__types label:first-of-type { border-top: 0; }
  .enq3__items th:nth-child(1), .enq3__items td:nth-child(1) { display: none; }
  .crumbs [aria-current="page"] { max-width: 70vw; }
  .steps3 li { padding-right: 12px; margin-right: 12px; font-size: .875rem; }
  .pdp-rfq__row .btn { flex-basis: 100%; }
}
@media (hover: hover) and (pointer: fine) {
  .mega:hover .mega__toggle::after { transform: scaleX(1); }
}
@media print {
  .hero3__stage, .paths3__bg, .mega__panel { display: none !important; }
  .hero3, .paths3 { background: #fff; color: #000; }
}

/* 17. Исправление V2.1: у .link-arrow совмещались линия V1 и стрелка V2 */
.link-arrow::after { width: auto; height: auto; background: none; }
.link-arrow:hover::after { width: auto; }
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.pdp > *, .pdp__info > * { min-width: 0; }
.tabs { overflow-x: auto; scrollbar-width: thin; }
.tabs [role="tab"] { flex: none; }
.pdp-rfq .btn, .buy-box .btn { white-space: normal; text-align: center; }
@media (max-width: 760px) { .buy-box { padding: 16px; } .pdp-rfq { padding: 14px; } }
/* мега-меню: ссылки внутри панели не наследуют стиль пунктов верхнего меню */
.main-nav .mega__panel a { text-transform: none; letter-spacing: normal; font-size: .9375rem; height: auto; padding-top: 9px; padding-bottom: 9px; }
.main-nav .mega__panel a::after { display: none; }
.main-nav .mega__panel .btn { text-transform: uppercase; letter-spacing: .06em; justify-content: center; padding: 12px 18px; }
.main-nav .mega__panel .mega__group h3 a { padding: 0; font-size: 1rem; text-transform: uppercase; letter-spacing: .02em; }
.main-nav .mega__panel .mega__all { padding: 0 0 14px; }

/* =====================================================================
   ZTM Design V3.1 — адресные исправления после независимой визуальной приёмки V3.
   Слой поверх v3.css: Hero A, раздел «Продукция», нижний CTA с ztm_pattern.
   ===================================================================== */

/* 1. Hero A: линии Dotorg обходят оператора и заголовок ---------------- */
/* Две вложенные маски (перемножаются без mask-composite):
   контейнер — по горизонтали: тихая зона под текстом, полная сила у правого края;
   видео — эллиптическое «окно» вокруг оператора и пульта ЧПУ. Анимация сохранена. */
.hero3__linesbox { position: absolute; inset: 0; }
.hero3--a .hero3__linesbox {
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.08) 0, rgba(0,0,0,.08) 46%, rgba(0,0,0,.5) 58%, #000 70%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,.08) 0, rgba(0,0,0,.08) 46%, rgba(0,0,0,.5) 58%, #000 70%); }
.hero3--a .hero3__lines, .hero3--a .hero3__poster { opacity: .7;
  -webkit-mask-image: radial-gradient(ellipse 12% 42% at 84% 48%, transparent 0, transparent 50%, #000 100%);
          mask-image: radial-gradient(ellipse 12% 42% at 84% 48%, transparent 0, transparent 50%, #000 100%); }
.hero3--a .hero3__photo img { filter: saturate(.48) contrast(1.1) brightness(.78); object-position: 74% 46%; }
.hero3--a .hero3__shade { background:
  linear-gradient(90deg, rgba(72,76,81,.94) 0, rgba(72,76,81,.84) 30%, rgba(72,76,81,.3) 50%, rgba(72,76,81,0) 60%),
  linear-gradient(0deg, rgba(19,25,38,.55) 0, rgba(19,25,38,0) 22%); }
/* наложение переносится на контейнер: маска контейнера изолирует группу, поэтому screen задаётся ему */
.hero3__linesbox { mix-blend-mode: screen; }
.hero3__linesbox .hero3__lines, .hero3__linesbox .hero3__poster { mix-blend-mode: normal; }

/* Hero на планшете и телефоне: кадр сверху, линии — по нижней серой плоскости (как в V3), без «окна» */
@media (max-width: 1024px) {
  .hero3--a .hero3__linesbox { -webkit-mask-image: none; mask-image: none; }
  .hero3--a .hero3__lines, .hero3--a .hero3__poster { opacity: .5;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.35) 0, rgba(0,0,0,.35) var(--hero-photo-h), rgba(0,0,0,.6) 70%, #000 100%);
            mask-image: linear-gradient(180deg, rgba(0,0,0,.35) 0, rgba(0,0,0,.35) var(--hero-photo-h), rgba(0,0,0,.6) 70%, #000 100%); }
}
/* телефон: компактнее заголовок и лид, чтобы первый экран не перегружался */
@media (max-width: 760px) {
  .hero3 { --hero-photo-h: 196px; }
  .hero3__grid { padding-top: 176px; padding-bottom: 32px; }
  .hero3__copy { gap: 14px; }
  .hero3__title { font-size: clamp(1.75rem, 7.6vw, 2.25rem); line-height: 1.04; }
  .hero3__lead { font-size: .9375rem; line-height: 1.5; }
  .hero3__lead-extra { display: none; }
  .hero3__kicker { font-size: .6875rem; }
}

/* 2. Продукция: 4 направления × 10 разделов -------------------------- */
/* Десктоп: редакционная строка на каждое направление — слева описание (4/12), справа
   горизонтальные плитки разделов в две колонки (8/12); длинные названия читаются полностью. */
.cats31 { display: grid; border-bottom: 1px solid var(--line); }
.cg { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: var(--col-gap); padding: 28px 0 32px; border-top: 1px solid var(--line); }
.cg:first-child { border-top: 2px solid var(--ink); }
.cg__head { grid-column: 1 / span 4; grid-row: 1; margin: 0; font: inherit; }
.cg__toggle { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; align-items: start; text-align: left; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: default; }
.cg__toggle:disabled { opacity: 1; color: inherit; }
.cg__n { font-family: var(--font-strong); font-weight: 700; font-size: .9375rem; letter-spacing: .08em; color: var(--ztm-blue); padding-top: 4px; }
.cg__title { display: grid; gap: 6px; }
.cg__name { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: clamp(1.25rem, 1.7vw, 1.625rem); line-height: 1.1; }
.cg__title small { color: var(--muted); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.cg__thumbs, .cg__chev { display: none; }
.cg__desc { grid-column: 1 / span 4; grid-row: 2; margin: 14px 0 0 56px; color: var(--ink-2); font-size: .9375rem; line-height: 1.55; max-width: 34ch; }
.cg__all { grid-column: 1 / span 4; grid-row: 3; margin: 16px 0 0 56px; align-self: start; justify-self: start; }
.cg__tiles { grid-column: 5 / span 8; grid-row: 1 / span 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tile-gap); align-content: start; }
.ct { display: grid; grid-template-columns: 44% minmax(0, 1fr); min-height: 136px; background: #fff; border: 1px solid var(--line); text-decoration: none; transition: border-color var(--t-fast); }
.ct:hover { border-color: var(--ink); }
.ct__media { display: block; background: var(--surface); overflow: hidden; }
.ct__media img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.ct__txt { display: grid; grid-template-rows: 1fr auto; gap: 10px; padding: 14px 16px 12px; min-width: 0; }
.ct__name { font-size: 1rem; line-height: 1.38; }
.ct__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .875rem; font-variant-numeric: tabular-nums; }
.ct__meta .ico { width: 18px; height: 18px; color: var(--ztm-blue); transition: transform var(--t-fast) var(--ease); }
.ct:hover .ct__meta .ico { transform: translateX(4px); }

@media (max-width: 1024px) {
  .cg { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding: 24px 0 28px; }
  .cg__head, .cg__desc, .cg__all, .cg__tiles { grid-column: 1; grid-row: auto; }
  .cg__desc { margin: 10px 0 0 56px; max-width: 60ch; }
  .cg__all { margin: 10px 0 0 56px; }
  .cg__tiles { margin-top: 18px; }
}
/* Телефон: аккордеон. В свёрнутом виде — номер, название, счётчик и 3 миниатюры разделов. */
@media (max-width: 760px) {
  .cg { padding: 0; }
  .cg__toggle { grid-template-columns: 30px minmax(0, 1fr) auto 20px; align-items: center; min-height: 76px; padding: 14px 0; cursor: pointer; }
  .cg__n { padding-top: 0; font-size: .8125rem; }
  .cg__name { font-size: 1.0625rem; }
  .cg__title small { font-size: .8125rem; }
  .cg__thumbs { display: flex; }
  .cg__thumbs img { width: 36px; height: 27px; object-fit: cover; background: var(--surface); border: 1px solid #fff; margin-left: -8px; }
  .cg__thumbs img:first-child { margin-left: 0; }
  .cg.is-open .cg__thumbs { visibility: hidden; }
  .cg__chev { display: block; width: 20px; height: 20px; transition: transform var(--t-fast); }
  .cg.is-open .cg__chev { transform: rotate(180deg); }
  .cg__desc { margin: 0 0 0 42px; font-size: .875rem; }
  .cg__all { margin: 8px 0 0 42px; }
  .cg__tiles { grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 14px 0 22px; }
  .ct { grid-template-columns: 112px minmax(0, 1fr); min-height: 88px; }
  .ct__txt { padding: 10px 12px; gap: 6px; }
  .ct__name { font-size: .9375rem; line-height: 1.35; }
  .ct__meta { font-size: .8125rem; }
}
.cg__thumbs { gap: 3px; }
.cg__thumbs img { margin-left: 0 !important; border: 0 !important; }
.cg__toggle { grid-template-columns: 52px minmax(0, 1fr); }
.cg__desc, .cg__all { margin-left: 64px; }
@media (max-width: 1024px) { .cg__desc, .cg__all { margin-left: 64px; } }
@media (max-width: 760px) { .cg__toggle { grid-template-columns: 40px minmax(0, 1fr) auto 20px; } .cg__desc, .cg__all { margin-left: 40px; } }

/* 3. Нижний CTA: оригинальная синяя графика ztm_pattern как полноценная часть композиции */
/* Паттерн занимает правые 58 % и не перекрывается карточками; его фон — тот же Ultra Black,
   поэтому граница незаметна, левый край растворяется маской. Карточки — слева, в 6 колонках. */
.paths31 { position: relative; isolation: isolate; overflow: hidden; background: var(--ultra-black); color: #fff; }
.paths31__art { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; margin: 0; z-index: -1; }
.paths31__art img { width: 100%; height: 100%; object-fit: cover; object-position: 0 45%; display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
.paths31__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding-top: clamp(72px, 8vw, 120px); padding-bottom: clamp(72px, 8vw, 120px); }
.paths31__copy { grid-column: 1 / span 6; display: grid; gap: 16px; }
.paths31__title { color: #fff; margin-bottom: 18px; }
.paths31__card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px 28px; padding: 26px 28px; }
.paths31__card h3 { margin: 10px 0 8px; font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.12; }
.paths31__card p { margin: 0; font-size: 1rem; line-height: 1.55; max-width: 46ch; }
.paths31__card--self { background: rgba(19,25,38,.9); border: 1px solid rgba(255,255,255,.3); }
.paths31__card--self p { color: var(--on-dark-muted); }
.paths31__card--sales { background: #fff; color: var(--ink); grid-template-columns: minmax(0, 1fr); }
.paths31__card--sales p { color: var(--ink-2); }
.paths31__chip { display: inline-block; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border: 1px solid currentColor; }
.paths31__card--self .paths31__chip { color: var(--blue-light); }
.paths31__card--sales .paths31__chip { color: var(--ztm-blue); }
.paths31__row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.paths31__phone { display: grid; text-decoration: none; font-family: var(--font-strong); font-weight: 700; font-size: 1.25rem; line-height: 1.1; color: var(--ink); }
.paths31__phone small { font-family: var(--font-body); font-weight: 400; font-size: .8125rem; color: var(--muted); margin-top: 4px; }
.paths31 :focus-visible { outline-color: #fff; }
.paths31__card--sales :focus-visible { outline-color: var(--ztm-blue); }
@media (max-width: 1180px) {
  .paths31__copy { grid-column: 1 / span 8; }
  .paths31__art { width: 64%; }
}
@media (max-width: 1024px) {
  .paths31__card { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .paths31__card .btn { justify-self: start; }
}
/* телефон: паттерн — верхняя полоса раздела, затем заголовок и карточки */
@media (max-width: 760px) {
  .paths31__art { position: relative; width: 100%; height: 260px; }
  .paths31__art img { object-position: 30% 40%; -webkit-mask-image: linear-gradient(180deg, #000 0, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 60%, transparent 100%); }
  .paths31__in { padding-top: 0; margin-top: -48px; padding-bottom: 56px; }
  .paths31__copy { grid-column: 1 / -1; }
  .paths31__card { padding: 22px 18px; }
}

/* ZTM Brandbook: Stapel Regular for secondary headings. */
h3, h4, .t-h3, .cg__name, .paths31__card h3 {
  font-family: "ZTM Stapel Regular", Arial, sans-serif;
}