/* ─────────────────────────────────────────────────────────────
   DATA МЕХАНИКА — brand layer.
   Loaded AFTER site.css. Retokenises the Industry design system to the
   brandbook (стр. 12 палитра, стр. 14 типографика) and replaces the
   blueprint grammar with the brand's notched-plate + pixel grammar.
   Nothing in index.html markup has to change.
   ───────────────────────────────────────────────────────────── */

/* Google Fonts (JetBrains Mono, Mulish) подключены <link>-ом в index.html */

/* Display face for the name / big headings. Drop the file in fonts/ and it
   takes over automatically; until then it falls back to JetBrains Mono Bold. */
@font-face {
  font-family: "Good Timing";
  src: url("./fonts/GoodTiming-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* — основная палитра (брендбук, стр. 12) — */
  --dm-blue: #0158fc;      /* R1 G88 B252   — основной */
  --dm-ink: #001D2B;       /* ink navy — текст и тёмный фон (был чёрный) */
  --dm-slate: #193340;     /* R25 G51 B64 */
  --dm-mint: #62ddb2;      /* R98 G221 B178 — дополнительный */
  --dm-cyan: #0088d4;      /* R0 G136 B212 */
  --dm-paper: #fcfcfc;
  --dm-plate: #f4f4f4;

  /* — DS token overrides — */
  --color-bg: var(--dm-paper);
  --color-surface: var(--dm-plate);
  --color-text: var(--dm-ink);
  --color-accent: var(--dm-blue);
  --color-accent-2: var(--dm-mint);
  --color-divider: color-mix(in srgb, var(--dm-ink) 15%, transparent);

  --color-accent-100: #ebf2ff;
  --color-accent-200: #d6e4ff;
  --color-accent-300: #a9c7ff;
  --color-accent-400: #74a0ff;
  --color-accent-500: #0158fc;
  --color-accent-600: #0148d0;
  --color-accent-700: #0139a3;
  --color-accent-800: #0d2836;
  --color-accent-900: #001d2b;

  --color-accent-2-100: #eafaf4;
  --color-accent-2-200: #cff3e5;
  --color-accent-2-300: #a6e8cf;
  --color-accent-2-400: #62ddb2;
  --color-accent-2-500: #2fc394;
  --color-accent-2-600: #1a9f77;
  --color-accent-2-700: #137c5d;
  --color-accent-2-800: #0e5a44;
  --color-accent-2-900: #093b2d;

  --font-heading: "JetBrains Mono", ui-monospace, monospace;
  --font-heading-weight: 500;
  --font-body: "JetBrains Mono", ui-monospace, monospace;
  --font-display: "JetBrains Mono", ui-monospace, monospace;
  --font-logo: "Good Timing", "JetBrains Mono", ui-monospace, monospace;
  --font-docs: "Mulish", system-ui, sans-serif;

  --radius-sm: 0; --radius-md: 0; --radius-lg: 0;

  /* signature срез угла */
  --dm-notch: 18px;
  --dm-notch-sm: 10px;
}

/* — type — */
body { font-family: var(--font-body); font-feature-settings: "tnum" 1; padding-top: 64px; }
@media (max-width: 899px) { body { padding-top: 54px; } }
h1, h2, h3, h4, .sec-title, .sub-title { letter-spacing: -0.01em; }
.sec-title { font-weight: 500; }
h1.sec-title { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.005em; }
.band h2 { font-family: var(--font-display); letter-spacing: 0.01em; }
/* заголовки h2 — без капса по всему сайту */
h2, .sec-title, .band h2, .cta h2 { text-transform: none; }
p, li, td, dd, .note { font-family: var(--font-body); letter-spacing: -0.005em; }
p { max-width: 68ch; }
/* меньше висячих строк */
h1, h2, h3, h4, .sec-title, .sub-title, p, li, .dc-label, .band-links span { text-wrap: pretty; }

/* — [ секционные метки ] — */
.kicker { color: var(--dm-blue); letter-spacing: 0.12em; font-weight: 500; font-family: var(--font-body); font-size: 13px; text-transform: lowercase; }
.kicker::before { content: "[ "; }
.kicker::after { content: " ]"; }
.mono { font-family: var(--font-body); letter-spacing: 0.1em; }

/* — plates instead of blueprints: срез угла, светлая заливка, без крестов — */
.corner { display: none !important; }
.frame,
.figure {
  border: 1px solid transparent;
  background: var(--dm-plate);
  clip-path: polygon(0 0, calc(100% - var(--dm-notch)) 0, 100% var(--dm-notch), 100% 100%, 0 100%);
  transition: background .14s ease, color .14s ease;
}
.frame h3 { letter-spacing: -0.01em; }
.frame .idx { color: var(--dm-blue); letter-spacing: 0.14em; }
a.frame:hover { background: var(--dm-blue); color: #fff; }
a.frame:hover .idx, a.frame:hover p { color: color-mix(in srgb, #fff 82%, transparent); }
a.frame:focus-visible { outline: 2px solid var(--dm-blue); outline-offset: 3px; }

/* — кнопки: сплошной синий, срез угла, mono caps — */
.btn {
  border-radius: 0;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  clip-path: polygon(0 0, calc(100% - var(--dm-notch-sm)) 0, 100% var(--dm-notch-sm), 100% 100%, 0 100%);
}
.btn-primary { background: var(--dm-blue); border-color: var(--dm-blue); color: #fff; }
.btn-primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); color: #fff; }
.btn-secondary { border-color: var(--color-divider); color: var(--dm-ink); background: transparent; clip-path: none; }
.btn-secondary:hover { background: #ecedee; border-color: color-mix(in srgb, var(--dm-ink) 28%, transparent); color: var(--dm-ink); }

/* — тёмные полосы-разделители: фон брендбука + код-текстура — */
.band {
  background: var(--dm-ink);
  color: #fcfcfc;
  position: relative;
  overflow: hidden;
}
.band::before {
  content: "";
  position: absolute; inset: 0;
  background: none;
  pointer-events: none;
}
.band .wrap { position: relative; }
.band#solutions { clip-path: polygon(0 0, 67% 0, 72% 44px, 100% 44px, 100% 100%, 0 100%); }
.band .kicker { color: #9aa4ab; }
.band-links a {
  border-color: color-mix(in srgb, #fcfcfc 26%, transparent);
  clip-path: polygon(0 0, calc(100% - var(--dm-notch)) 0, 100% var(--dm-notch), 100% 100%, 0 100%);
}
.band-links a:hover { background: var(--dm-blue); border-color: var(--dm-blue); }
.band-links strong { font-family: var(--font-display); letter-spacing: 0.01em; text-transform: none; }

/* — светлый вариант полосы «Поставляемая продукция»: белый фон, серые плиты
   со срезом угла + декоративные шейпы как на первом экране — */
.band-light { background: var(--dm-paper); color: var(--dm-ink); }
/* срез верхнего-левого угла — открывает тёмный блок «О компании» выше */
/* срез верхнего-правого угла (зеркально блоку «О компании») */
.band-light#products { position: relative; z-index: 5; margin-top: -46px;
  clip-path: polygon(0 0, 65% 0, 70% 46px, 100% 46px, 100% 100%, 0 100%); }
/* срез съедает верх — добавляем воздуха над заголовком, как у остальных блоков */
.band-light#products .wrap { padding-top: calc(2.5 * var(--leading) + 56px); }
.band-light h2 { font-size: 32px; }
/* шейп справа вверху, параллельно заголовку */
.band-slab { position: absolute; top: calc(2.5 * var(--leading) + 56px); right: 0; width: 21%; max-width: 270px;
  height: auto; z-index: 0; opacity: .5; pointer-events: none; display: block; }
.band-light::before { background: none; }
.band-light .kicker { color: var(--dm-blue); }
.band-light .caption-rule { background: var(--color-divider); }
.band-light h2 { color: var(--dm-ink); }
/* декоративные серые плиты (Figma-экспорт), как в герое — низкий z, не мешают контенту */
.band-figs { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.band-fig { position: absolute; height: auto; display: block; }
.band-fig-b { right: 0; bottom: -8%; width: 34%; opacity: .8; }
.band-fig-a { right: 30%; top: -6%; width: 12%; opacity: .55; }
@media (max-width: 899px) { .band-fig-a { display: none; } .band-fig-b { width: 52%; opacity: .6; }
  .band-slab { display: none; }
  .band-light#products { margin-top: -32px; clip-path: polygon(0 0, 60% 0, 66% 32px, 100% 32px, 100% 100%, 0 100%); } }
/* карточки: серая заливка, срез угла, заметно вертикальнее — контент разнесён по краям */
.band-light .band-links a {
  position: relative; isolation: isolate;
  background: var(--color-divider);
  border: none;
  color: var(--dm-ink);
  min-height: 300px;
  display: flex; flex-direction: column; justify-content: flex-end;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}
.band-light .band-links a::before {
  content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--dm-paper);
  clip-path: polygon(0 0, calc(100% - 23px) 0, 100% 23px, 100% 100%, 23px 100%, 0 calc(100% - 23px));
  transition: background .2s ease;
}
.band-light .band-links span { color: color-mix(in srgb, var(--dm-ink) 62%, transparent); }
.band-light .band-links a { transition: background .15s ease; }
.band-light .band-links a:hover { background: color-mix(in srgb, var(--dm-ink) 28%, transparent); color: var(--dm-ink); }
.band-light .band-links a:hover::before { background: #ecedee; }
.band-light .band-links a:hover strong { color: var(--dm-ink); }
.band-light .band-links a:hover span { color: color-mix(in srgb, var(--dm-ink) 62%, transparent); }
/* иконка в левом верхнем углу карточки */
.band-light .band-links .bl-icon { position: absolute; top: 24px; left: 24px; z-index: 1;
  width: 52px; height: 52px; object-fit: contain; display: block; pointer-events: none; }
@media (max-width: 899px) { .band-light .band-links a { min-height: 220px; } }
/* «Решения» — тот же каркас, что у «Продукции»: иконка слева вверху, текст внизу; иконки белые на тёмном */
#solutions .band-links .bl-icon { position: absolute; top: 24px; left: 24px; z-index: 1; width: 52px; height: 52px;
  object-fit: contain; display: block; pointer-events: none; image-rendering: pixelated; }

/* — блок PCB: тёмная подложка #001D2B, картинка платы + размытые эллипсы,
   два рубленых угла снизу, без обводки — */
#pcb .pcb-panel, #kaytus .pcb-panel { position: relative; isolation: isolate; overflow: hidden;
  background: #001D2B; color: #fcfcfc; min-height: 420px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 30px 100%, 0 calc(100% - 30px)); }
/* текст слева поверх картинки, картинка — фон на всю площадь (без шва) */
#pcb .pcb-body, #kaytus .pcb-body { position: relative; z-index: 4; padding: clamp(32px, 4vw, 56px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  max-width: 60%; min-width: 0; }
#pcb .pcb-body .btn, #kaytus .pcb-body .btn { font-size: 15px; padding: 13px 24px; }
#pcb .pcb-body .kicker, #kaytus .pcb-body .kicker { color: #4d9bff; margin: 0; }
#pcb .pcb-body .sec-title, #kaytus .pcb-body .sec-title { color: #fcfcfc; margin: 0; }
#pcb .pcb-body p, #kaytus .pcb-body p { color: color-mix(in srgb, #fcfcfc 78%, transparent); margin: 0; max-width: 60ch; }
#pcb .pcb-body .row, #kaytus .pcb-body .row { margin-top: 6px; }
/* стрелка вниз — кнопка скроллит по сайту вниз */
.btn-arrow .btn-ico { display: inline-block; margin-left: 8px; }
/* тег без скобочек — рубленый чип с акцентной каймой */
#pcb .tag, #kaytus .tag { display: inline-block; font-family: var(--font-body); font-size: 13px;
  letter-spacing: 0.02em; color: #cfe0ff; padding: 9px 16px; margin: 0;
  background: color-mix(in srgb, #0158fc 30%, #001D2B);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
/* пунктирный путь от плашки к кнопке + бегущая точка */
#pcb .pcb-media, #kaytus .pcb-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
#pcb .pcb-media img, #kaytus .pcb-media img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; }
/* картинка вплавляется в подложку слева — сплошной нави от края */
#pcb .pcb-media::after, #kaytus .pcb-media::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, #001D2B 0%, #001D2B 40%, color-mix(in srgb, #001D2B 60%, transparent) 62%, transparent 92%); }
#pcb .pcb-glow, #kaytus .pcb-glow { position: absolute; z-index: 1; border-radius: 50%; pointer-events: none;
  filter: blur(48px); mix-blend-mode: screen; }
#pcb .pcb-glow-a, #kaytus .pcb-glow-a { width: 46%; aspect-ratio: 1; right: -6%; top: -10%;
  background: radial-gradient(circle, rgba(1,88,252,.7), transparent 68%); }
#pcb .pcb-glow-b, #kaytus .pcb-glow-b { width: 42%; aspect-ratio: 1; right: 12%; bottom: -14%;
  background: radial-gradient(circle, rgba(0,141,208,.6), transparent 66%); }
@media (max-width: 899px) {
  #pcb .pcb-panel { min-height: 0; }
  #pcb .pcb-body { max-width: 100%; background: linear-gradient(0deg, transparent, #001D2B 40%); }
  #pcb .pcb-media { position: relative; min-height: 240px; }
  #pcb .pcb-media::after { background: linear-gradient(0deg, #001D2B 0%, transparent 62%); }
}

/* — блок 04: flip-карточки производства — */
#plants { position: relative; overflow: hidden; }
#plants .kicker, #plants .sec-title, .plants-grid { position: relative; z-index: 1; }
#plants .kicker, #plants .sec-title { text-align: center; }
#plants .kicker { color: #6b7680; }
#plants .sec-title { max-width: 30ch; margin-left: auto; margin-right: auto; }
.plants-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; margin: clamp(32px, 4vw, 56px) auto 0; max-width: 960px; }
.plant-card { position: relative; min-height: 320px;
  cursor: pointer; outline: none; }
.plant-card:focus-visible { outline: 2px solid var(--dm-blue); outline-offset: 3px; }
/* 3-я и 4-я — больше контента на обороте → выше, чтобы отступы совпали с 1-2 */
.plant-card:nth-child(3), .plant-card:nth-child(4) { min-height: 388px; }
.pc-inner { position: absolute; inset: 0; }
/* плоский 2D-переворот: грань сжимается по X, затем вторая разворачивается.
   В покое transform = scaleX(1) — без 3D-слоёв, текст не мылится в масштабируемом стейдже */
.pc-front { transform: scaleX(1); transition: transform .17s cubic-bezier(.2,.7,.3,1) .17s; }
.pc-back { transform: scaleX(0); transition: transform .17s cubic-bezier(.7,0,.8,.3) 0s; }
.plant-card:focus-visible .pc-front, .plant-card.is-flipped .pc-front { transform: scaleX(0); transition: transform .17s cubic-bezier(.7,0,.8,.3) 0s; }
.plant-card:focus-visible .pc-back, .plant-card.is-flipped .pc-back { transform: scaleX(1); transition: transform .17s cubic-bezier(.2,.7,.3,1) .17s; }
@media (hover: hover) and (pointer: fine) {
  .plant-card:hover .pc-front { transform: scaleX(0); transition: transform .17s cubic-bezier(.7,0,.8,.3) 0s; }
  .plant-card:hover .pc-back { transform: scaleX(1); transition: transform .17s cubic-bezier(.2,.7,.3,1) .17s; } }
/* linear-тайминг → 90° ровно на 50%; свап граней с задержкой .3s ловит кадр «ребром» */
.pc-face { position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: 30px; overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); }
/* фронт: номер сверху, крупная иконка-водяной знак, название снизу */
.pc-front { background: var(--dm-plate); color: var(--dm-ink); }
.pc-front h3 { margin: auto 0 0; font-size: 23px; line-height: 1.25;
  letter-spacing: -0.01em; }
.pc-flip-ico { position: absolute; top: 22px; right: 22px; font-size: 29px; line-height: 1;
  color: color-mix(in srgb, var(--dm-ink) 22%, transparent); pointer-events: none; }
.pc-idx { align-self: flex-start; display: inline-flex; align-items: center;
  justify-content: center; width: 34px; height: 34px; background: #dfe3e6;
  color: var(--dm-ink); font-family: var(--font-display); font-weight: 700;
  font-size: 15px; line-height: 1; }
/* оборот: сине-стальной #193340, номер сверху, инфа снизу, без пустот в срезе */
/* переворот через cross-fade + scaleX (3D ломается в масштабируемом стейдже) */
.pc-back { background: #193340; color: #fcfcfc; justify-content: space-between;
  clip-path: none; }
.pc-back .pc-flip-ico { color: color-mix(in srgb, #fcfcfc 32%, transparent); }
.pc-back-body { display: flex; flex-direction: column; gap: 20px; }
.plant-card { -webkit-tap-highlight-color: transparent; }
.pc-cap { display: flex; flex-direction: column; gap: 8px; }
.pc-cap-label { font-family: var(--font-body); font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase; color: color-mix(in srgb, #fcfcfc 55%, transparent); }
.pc-cap-val { font-size: 23px; line-height: 1.2; letter-spacing: -0.01em; }
.pc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-chips span { font-family: var(--font-body); font-size: 13px; letter-spacing: 0.02em;
  line-height: 1.25; padding: 8px 12px; background: color-mix(in srgb, #fcfcfc 14%, transparent);
  color: #fcfcfc;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); }
/* 5-я — широкая плашка, чуть другой сине-стальной цвет */
.plant-card-wide { grid-column: 1 / -1; min-height: 0; perspective: none;
  cursor: default; position: relative; isolation: isolate;
  background: #0d2836; color: #fcfcfc; padding: 34px 38px;
  display: flex; flex-direction: column; gap: 18px;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px)); }
.plant-card-wide { overflow: hidden; min-height: 300px; }
.pcw-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.pcw-media img { position: absolute; right: 0; top: 0; width: 62%; height: 100%; object-fit: cover; display: block; }
.pcw-media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 78%); mask-image: linear-gradient(90deg, #000 40%, transparent 78%); }
.pcw-media::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, #0d2836 0%, #0d2836 42%, color-mix(in srgb, #0d2836 82%, transparent) 58%, color-mix(in srgb, #0d2836 50%, transparent) 78%, color-mix(in srgb, #0d2836 30%, transparent) 100%); }
.pcw-body { position: relative; z-index: 1; max-width: 56%; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; }
@media (max-width: 780px) {
  .plant-card-wide { padding: 0; }
  .pcw-media { position: relative; height: 220px; z-index: 0; }
  .pcw-media img { width: 100%; }
  .pcw-media::after { background: linear-gradient(0deg, #0d2836 0%, transparent 62%); }
  .pcw-media::before { display: none; }
  .pcw-body { max-width: none; padding: 0 24px 28px; } }
.plant-card-wide h3 { font-size: 23px; line-height: 1.2; letter-spacing: -0.01em; margin: 0; }
.plant-card-wide p { margin: 0; font-size: 15px; line-height: 1.5; max-width: 60ch;
  color: color-mix(in srgb, #fcfcfc 78%, transparent); }
.pc-idx-dark { background: color-mix(in srgb, #fcfcfc 14%, transparent); color: #fcfcfc; }
.pc-chips-dark span { font-size: 13px; }
/* бегущий код на фоне блока — едва заметный, сверху-слева и снизу-справа */
.plants-code { position: absolute; z-index: 0; width: min(320px, 34%); height: 300px;
  overflow: hidden; pointer-events: none;
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); }
.plants-code-tl { top: 360px; left: 0; }
.plants-code-br { top: 300px; right: 0; text-align: right; }
/* блок фактоидов — 3 тёмные карточки со срезом, без бордеров, на всю ширину грида */
#plants .figures { position: relative; z-index: 1; border: 0; background: transparent;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  max-width: 960px; margin: clamp(44px, 5vw, 68px) auto 0; padding: 0; }
#plants .figures > div { border: 0; background: #ecedee; color: var(--dm-ink);
  padding: clamp(30px, 3vw, 40px) clamp(26px, 3vw, 32px);
  display: flex; flex-direction: column; gap: 8px;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }
#plants .figures .mono { color: var(--dm-ink); font-size: 11px; letter-spacing: 0.12em; margin: 0 0 6px; }
#plants .figures .num { font-family: var(--font-display); font-weight: 700; font-size: 43px;
  line-height: 1; letter-spacing: 0.01em; color: var(--dm-ink); }
#plants .figures p { margin: 8px 0 0; font-size: 15px; line-height: 1.5;
  color: color-mix(in srgb, var(--dm-ink) 68%, transparent); }
#plants .figures > div:nth-child(1) { background: #f4f4f4; }
#plants .figures > div:nth-child(2) { background: #f0f1f1; }
#plants .figures > div:nth-child(3) { background: #ebecec; }
@media (max-width: 780px) { #plants .figures { grid-template-columns: 1fr; } }
/* размытый шейп позади 2-й карточки «Поставляемой продукции» */

.pcode-track { display: flex; flex-direction: column;
  animation: dm-code-scroll 72s linear infinite; will-change: transform; }
.pcode-track-rev { animation-direction: reverse; }
.plants-code pre { margin: 0; font-family: var(--font-body); font-size: 11px; line-height: 1.6;
  white-space: pre; color: color-mix(in srgb, var(--dm-ink) 7%, transparent); }
@media (prefers-reduced-motion: reduce) { .pcode-track { animation: none; } }
@media (max-width: 900px) { .plants-code { display: none; } }
@media (max-width: 640px) {
  .plants-grid { grid-template-columns: 1fr; }
  .plant-card { min-height: 300px; }
}

/* nav must paint & receive hover ABOVE .hero-mark (which now overlaps the
   top row after the content was pulled up) — otherwise the transparent
   hero-mark block swallows pointer events and the dropdowns never open */
.top-nav { position: relative; z-index: 20; }
/* nav dropped to sit level with the centre of the top blue shape (hm-bar-a) —
   desktop only; .hero-mark margin compensates so the title stays put */
@media (min-width: 900px) { .top-nav { padding-top: 31px; } }
/* dropdowns anchor to the RIGHT edge so the right-hand menus never run off
   screen, and long labels wrap to two lines instead of overflowing */
.top-nav .sub { left: auto; right: 0; max-width: min(360px, 92vw); }
.top-nav .sub a { white-space: normal; }

/* — навигация: статичный ряд сверху + бургер-панель, которая проявляется
   только после того, как этот ряд уже проскроллен — шапки как таковой нет */
.top-nav-brand { letter-spacing: 0.04em; text-transform: uppercase; }
.burger { color: var(--dm-ink); }
.burger:hover { border-color: var(--dm-blue); }
.site-menu-brand { font-family: var(--font-display); color: var(--dm-blue); }
.menu a:hover { color: var(--dm-blue); }
.sub a:hover { color: var(--dm-blue); }

/* ── фиксированная шапка (как в прототипе): логотип + ООО слева, меню + кнопка справа.
   Живёт ВНЕ #dm-stage (transform стейджа иначе сломал бы position:fixed), поэтому в
   реальных px; горизонтальные поля 4.1667% = 60/1440 совпадают с краями контента
   стейджа на любом масштабе autoscale. ─────────────────────────────────────── */
.site-head { position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: color-mix(in srgb, var(--dm-paper) 90%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-divider); }
.site-head-inner { display: flex; align-items: center; gap: 24px;
  min-height: 64px; padding: 10px 4.1667%; box-sizing: border-box; }
.sh-brand { display: flex; align-items: center; gap: 11px; margin-right: auto; text-decoration: none; }
.sh-brand img { width: 152px; height: auto; display: block; }
.sh-brand small { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; white-space: nowrap; color: color-mix(in srgb, var(--dm-ink) 58%, transparent); }
.sh-nav .menu { display: flex; align-items: center; gap: 24px; }
.sh-nav .menu > li { position: relative; }
.sh-nav .menu a { font-size: 15px; white-space: nowrap; padding: 6px 0; color: inherit; text-decoration: none; }
.sh-nav .menu a:hover { color: var(--dm-blue); }
.sh-nav .sub { position: absolute; right: 0; top: 100%; min-width: 260px; max-width: min(360px, 92vw);
  margin: 0; padding: 12px 0; background: var(--dm-paper); border: 1px solid var(--color-divider);
  opacity: 0; visibility: hidden; transition: opacity .12s ease; z-index: 60; }
.sh-nav .has-sub:hover .sub, .sh-nav .has-sub:focus-within .sub { opacity: 1; visibility: visible; }
.sh-nav .sub li { list-style: none; }
.sh-nav .sub a { display: block; padding: 9px 18px; font-size: 15px; line-height: 1.3; white-space: normal; color: inherit; text-decoration: none; }
.sh-nav .sub a:hover { background: color-mix(in srgb, var(--dm-blue) 10%, transparent); color: var(--dm-blue); }
.sh-cta { padding: 9px 18px; font-size: 13px; white-space: nowrap; }
/* бургер — меню в шапке только на широком экране; ниже 1080 — бургер-панель */
@media (min-width: 1081px) { .burger { display: none !important; } }
@media (max-width: 1080px) {
  .sh-nav, .sh-cta { display: none; }
  .burger { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
}
@media (max-width: 899px) {
  .site-head-inner { min-height: 54px; padding: 8px var(--grid-pad); }
  .sh-brand img { width: 130px; }
  .burger { top: 7px; right: 12px; width: 40px; height: 40px; }
}

/* ── ПЕРВЫЙ ЭКРАН (вёрстка 1:1 по Figma, узел 158:3655) ──────────── */
.hero { padding: 40px 0 calc(2.5 * var(--leading)); position: relative; }

/* гигантское ДАТА- / МЕХАНИКА — фиксированные координаты по Figma, отсчитанные
   от полного холста 1440px (а не от паддингов .wrap — .hero-mark специально
   вынесен из .wrap в разметке, иначе координаты X съезжают на паддинг грида).
   Высота фрейма = top(МЕХАНИКА) 103 + font-size 132 = 235px; логотип держится
   за bottom:0 этого фрейма, так что его нижний край всегда совпадает с нижним
   краем "МЕХАНИКА", как бы текст ни правился. */
.hero-mark { position: relative; width: 100%; height: 235px; margin-top: -68px;
  font-family: var(--font-logo); color: var(--dm-ink); letter-spacing: 0.005em; }
.hero-mark span { position: absolute; display: block; white-space: nowrap;
  font-size: 132px; line-height: 1; }
.hero-mark .hm-1 { left: 28px; top: 14px; }
.hero-mark .hm-2 { left: 530px; top: 103px; }
.hero-mark .hm-bar { position: absolute; display: block; background: var(--dm-blue); }
/* measured pixel-for-pixel off the reference screenshot (datamechanika.ru/previous
   at 1366px, scaled up to this 1440 stage: ×1440/1366) rather than guessed —
   hm-bar-a starts exactly where "МЕХАНИКА" begins (530) and floats above it in
   the gap after "ДАТА-" ends; hm-bar-b sits on the same row as the logo, just
   further right. */
.hero-mark .hm-bar-a { left: 531px; top: 36px; width: 173px; height: 31px; }
.hero-mark .hm-bar-b { left: 324px; top: 179px; width: 172px; height: 32px; }
/* the row only has ~117px between the logo and hm-bar-b (measured, fixed) —
   small font/tight gap so "ООО «Олимпик»" clears the box instead of
   running into it */
/* centered on hm-bar-b's own row (top:179 height:32 → center 195), not
   bottom-anchored to the frame anymore — that put it 20px off from the
   blue box it's supposed to sit level with. */
.hero-mark .hm-brand-row { position: absolute; left: 28px; top: 175px; display: flex; align-items: center; gap: 8px; }
.hero-mark .hm-logo { width: 179px; height: auto; display: block; }
.hero-mark .hm-brand-name { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.03em;
  text-transform: uppercase; color: color-mix(in srgb, var(--dm-ink) 60%, transparent); white-space: nowrap; }

@media (max-width: 899px) {
  /* ниже стейджа — фиксированные координаты теряют смысл, возвращаемся к
     обычному потоку, гибким размерам и полям грида (hero-mark больше не
     внутри .wrap, так что поля себе нужно вернуть явно) */
  .hero-mark { position: static; height: auto; margin-top: 20px; padding: 0 var(--grid-pad); box-sizing: border-box; }
  .hero-mark span { position: static; display: block; font-size: clamp(35px, 11vw, 64px); line-height: 1.04; }
  .hero-mark .hm-2 { text-align: right; }
  .hero-mark .hm-bar { display: none; }
  .hero-mark .hm-brand-row { position: static; margin-top: 16px; }
  .hero-mark .hm-logo { width: 140px; }
}

/* measured off the reference: only a ~40px gap between "МЕХАНИКА"'s bottom
   and the headline below it — tight, but not overlapping. */
/* the right column's width (534px) is set so its LEFT edge lands exactly on
   "О компании" in the top-nav (measured: 846px from stage left, at 1440) —
   the lead text and the three tiles below share that same left edge. */
.hero-wrap { position: relative; }
.hero-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
  gap: clamp(32px, 4vw, 76px); align-items: stretch; margin-top: 8px; }
.hero-body > .hero-copy { order: 1; }
.hero-body > .hero-stage { order: 2; }

/* левая колонна: код-подложка, серые плиты со срезом, 3D-микросхема */
.hero-stage { position: relative; min-height: clamp(340px, 40vw, 520px);
  display: flex; align-items: center; justify-content: center; }
.hero-code { display: block; position: absolute; left: -2%; top: 16%; bottom: 0; width: min(320px, 70%); margin: 0; z-index: 1;
  pointer-events: none; overflow: hidden;
  mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 100%), linear-gradient(90deg, #000 58%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 100%), linear-gradient(90deg, #000 58%, transparent 100%);
  mask-composite: intersect; -webkit-mask-composite: source-in; }
.hero-code-track { display: flex; flex-direction: column;
  animation: dm-code-scroll 64s linear infinite; will-change: transform; }
.hero-code pre { margin: 0; font-family: var(--font-body); font-size: 11px; line-height: 1.5;
  white-space: pre; color: color-mix(in srgb, var(--dm-ink) 42%, transparent); }
@keyframes dm-code-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .hero-code-track { animation: none; } }

.hero-plate { position: absolute; background: #e3e6e7; z-index: 0;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); }
/* один малый шейп слева вверху + один большой справа внизу; между ними течёт код, поверх — 3D */
/* малый шейп слева вверху (остаётся); большой шейп справа внизу заменён кластером .hero-fig */
.hero-plate-a { display: none; }
.hero-plate-c { left: -2%; top: 40px; width: 32%; height: 20%; opacity: .6; background: #e8eaeb; }
.hero-plate-b, .hero-plate-d, .hero-plate-e { display: none; }
/* декоративные шейпы (Figma-экспорт): большой справа-внизу «из основания» синей подложки + боковой между ним и левой плитой */
.hero-shape { position: absolute; z-index: 0; pointer-events: none; height: auto; display: block; }
.hero-shape-main { right: 0; bottom: 0; width: 62%; }
.hero-shape-side { right: 6%; bottom: 46%; width: 24%; }
.hero-chip { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
  width: min(100%, 480px); margin: 0 auto; aspect-ratio: 1 / 1; will-change: transform; }
.hero-chip .chip-canvas { width: 100%; height: auto; display: block; }
.hero-chip img { width: 100%; height: 100%; object-fit: contain; }
.hero-chip.is-empty img { display: none; }
.hero-chip.is-empty::after { content: "3D-микросхема · assets/chip-3d.png";
  align-self: center; padding: 8px 12px; background: var(--dm-paper); border: 1px dashed var(--color-divider);
  font-size: 11px; letter-spacing: .08em; color: color-mix(in srgb, var(--dm-ink) 55%, transparent); }
.hero-chip.is-empty { background-color: var(--dm-plate);
  background-image:
    linear-gradient(45deg, color-mix(in srgb, var(--dm-blue) 14%, transparent) 25%, transparent 25% 75%, color-mix(in srgb, var(--dm-blue) 14%, transparent) 75%),
    linear-gradient(45deg, color-mix(in srgb, var(--dm-blue) 14%, transparent) 25%, transparent 25% 75%, color-mix(in srgb, var(--dm-blue) 14%, transparent) 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px;
  clip-path: polygon(0 0, calc(100% - var(--dm-notch)) 0, 100% var(--dm-notch), 100% 100%, 0 100%); }

/* правая колонна: since 2006, заголовок, лид, три плитки */
.hero-copy { position: relative; }
.hero-copy .since { display: block; font-size: 13px; letter-spacing: .08em;
  color: color-mix(in srgb, var(--dm-ink) 45%, transparent); margin: 0 0 15px; }
.hero-copy h1 { font-family: var(--font-body); font-weight: 500; letter-spacing: -0.01em;
  font-size: 49px; line-height: 1.12; margin: 0; text-transform: none; }
.hero-copy .lead { font-size: 19px; line-height: 1.4; margin-top: 22px;
  color: color-mix(in srgb, var(--dm-ink) 72%, transparent); max-width: none; }
.hero-actions { margin-top: 42px; gap: 14px; }
.hero-actions .btn { padding: 12px 24px; font-size: 15px; }
.hero-actions .btn-secondary { border: 1px solid var(--color-divider); }

/* строка направлений: чистые плитки — иконка + mono-подпись, без бордеров и ссылок */
.hero-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px; margin-top: 48px; align-items: start; }
.hero-cats > div { display: flex; flex-direction: column; gap: 12px; }
.hero-cats svg, .hero-cats img { width: 46px; height: 46px; display: block; object-fit: contain;
  color: color-mix(in srgb, var(--dm-ink) 78%, transparent); }
.hero-cats span { font-family: var(--font-heading); font-size: 15px; line-height: 1.3;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--dm-ink) 60%, transparent); }

.hero-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px;
  margin-top: clamp(24px, 3vw, 48px); }
.hero-tile { position: relative; display: flex; flex-direction: column; justify-content: space-between;
  gap: 18px; min-height: clamp(136px, 14vw, 200px); padding: 15px; border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--dm-ink); color: var(--dm-ink); text-decoration: none;
  font-size: 15px; font-weight: 500; line-height: 1.35;
  transition: background .4s ease, color .4s ease, box-shadow .4s ease; }
.hero-tile .tile-ico { width: 32px; height: 32px; display: block; background: currentColor;
  mask-size: contain; mask-repeat: no-repeat; mask-position: center;
  -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; }
.hero-tile:hover { background: #ecedee; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dm-ink) 40%, transparent); color: var(--dm-ink); }
.hero-tile-primary { background: var(--dm-blue); color: #fff; box-shadow: none;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }
.hero-tile-primary:hover { background: var(--color-accent-600); color: #fff; box-shadow: none; }

.hero-scroll { display: inline-flex; position: absolute; left: auto; right: -48px; top: 150px; bottom: auto; align-items: center; gap: 12px;
  writing-mode: vertical-rl; white-space: nowrap; font-size: 13px; letter-spacing: .04em;
  color: color-mix(in srgb, var(--dm-ink) 40%, transparent); }
.hero-scroll::after { content: ""; width: 1px; height: 44px; background: currentColor; }
@media (max-width: 899px) { .hero-scroll { display: none; } }
@media (max-width: 899px) {
  .hero-body { grid-template-columns: 1fr; align-items: start; margin-top: 24px; }
  .hero-copy .since { position: static; left: auto; }
  .hero-copy h1 { font-size: 32px; line-height: 1.15; }
  .hero-copy .lead { font-size: 15px; }
  .hero-cats { grid-template-columns: 1fr 1fr; gap: 22px; }
  .hero-stage { order: 2; min-height: 200px; }
  .hero-chip { width: min(60%, 260px); }
  .hero-tiles { grid-template-columns: 1fr 1fr; }
  .hero-tile:last-child { grid-column: span 2; min-height: 96px; }
  /* мобилка: кнопки на всю ширину грида */
  .hero-actions { display: flex; flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; justify-content: center; box-sizing: border-box; }
  /* мобилка: код-подложка тише и без плиты, чтобы не было каши под 3D */
  .hero-plate-c { display: none; }
  .hero-stage { overflow: hidden; }
  .hero-shape-main { top: 0; bottom: auto; width: 56%; max-height: 100%; object-fit: contain; object-position: right bottom; }
  .hero-code { left: 0; top: 10%; width: 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%); }
  .hero-code pre { font-size: 9px; color: color-mix(in srgb, var(--dm-ink) 18%, transparent); }
}
/* — второй экран: синий блок «Направления» со срезом угла — */
.dir-screen { position: relative; color: #fff;
  padding: clamp(64px, 8vw, 132px) 0 clamp(72px, 9vw, 148px); }
/* синяя подложка 2-го экрана блидит вниз под 3-й блок — чтобы срез тёмной
   подложки открывал чистый синий, а не отдельную синюю коробку (которая давала
   серый шов на левом краю) */
.dir-screen::before { content: ""; position: absolute; inset: 0 0 -140px 0; z-index: 0;
  background: var(--dm-blue);
  clip-path: polygon(0 0, 55% 0, 60% 44px, 100% 44px, 100% 100%, 0 100%); }
.dir-screen .kicker { color: #ecedee; }
.dir-screen .sec-title { color: #fff; font-size: 43px; line-height: 1.1; margin: 14px 0 0;
  max-width: 20ch; }
.dir-cards { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto); gap: 20px; margin-top: clamp(40px, 5vw, 72px); }
.dir-cards > :nth-child(1) { grid-column: 1; grid-row: 1; }
.dir-cards > :nth-child(2) { grid-column: 3; grid-row: 1; }
.dir-cards > :nth-child(3) { grid-column: 2; grid-row: 2; }
.dir-cards > :nth-child(4) { grid-column: 4; grid-row: 3; }
.dir-card { position: relative; display: flex; flex-direction: column; justify-content: space-between;
  gap: 40px; min-height: 300px; padding: 26px; text-decoration: none;
  background: #fff; color: var(--dm-ink);
  clip-path: polygon(0 0, calc(100% - var(--dm-notch)) 0, 100% var(--dm-notch), 100% 100%, 0 100%);
  transition: background .2s ease; }
.dir-card:hover { background: #ecedee; }
.dir-card:hover .dc-label { color: var(--dm-ink); }
.dc-label { font-family: var(--font-heading); font-size: 19px; line-height: 1.3;
  font-weight: 500; letter-spacing: -0.01em; order: 2; }
.dc-cross { width: 34px; height: 34px; order: 1; color: var(--dm-blue);
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square;
  transition: transform .2s ease; }
.dir-card:hover .dc-cross { transform: rotate(360deg); }
.dir-card:focus-visible { outline: 2px solid var(--dm-mint); outline-offset: 3px; }

/* контент второго экрана поднят над синей подложкой (::before); карточки (z2)
   и кубы живут здесь — так 3D-чип (z1 из героя) оказывается МЕЖДУ подложкой и карточками */
.dir-screen > .wrap { position: relative; z-index: 1; }
/* декоративные кубы на синей подложке — фоновый слой НИЖЕ 3D-чипа (z1) и карточек,
   но выше самой подложки (::before z0). Контурные + заливные, разных размеров. */
.dir-cubes { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.dir-cube { position: absolute; height: auto; display: block; pointer-events: none; }
.dir-cube.is-fill { opacity: 0.07; }
.dir-cube.is-line { opacity: 0.1; }
.dir-grid-cube { grid-column: 2; grid-row: 1; align-self: center; justify-self: center;
  width: 90%; height: auto; opacity: .08; pointer-events: none;
  transform: rotate(-7deg); }
.dir-grid-cube-line { grid-column: 4; grid-row: 2; width: 78%; opacity: .12; transform: rotate(9deg); }
@media (max-width: 899px) { .dir-cube.is-fill, .dir-grid-cube { display: none; } }

/* блок 3 и далее — непрозрачный слой поверх «утопающей» 3D-микросхемы */
.dir-after { position: relative; z-index: 4; background: var(--dm-paper); }

/* — блок «О компании»: тёмная подложка #0D2836 со срезом (как у 2-го блока,
   но срез ближе к правому краю). Тег слева по краю грида, заголовок+лид
   выровнены по 2-й колонке (карточка «реконструкция сетей»). — */
.about-screen.dir-after { background: transparent; }
.about-screen { position: relative; color: #fff;
  padding: clamp(104px, 12vw, 212px) 0 clamp(104px, 12vw, 200px); }
/* срез перенесён к ЛЕВОМУ краю: справа (где «утопает» 3D-чип) тёмная подложка
   #0D2836 идёт от самого верха, поэтому чип заходит ПОД тёмную подложку, а не
   под синий шейп; синий срез-треугольник остаётся виден слева сверху. */
.about-screen::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background: #001D2B;
  clip-path: polygon(0 44px, 28% 44px, 33% 0, 100% 0, 100% 100%, 0 100%); }
.about-screen > .wrap { position: relative; z-index: 1; }
.about-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 20px; row-gap: 24px; align-items: start; }
.about-grid .kicker { grid-column: 1; grid-row: 1; align-self: start; margin: 6px 0 0;
  color: #ecedee; }
.about-copy { grid-column: 2 / -1; grid-row: 1; }
.about-copy .sec-title { color: #fff; font-size: 43px; line-height: 1.1; margin: 0; }
.about-copy .lead { color: color-mix(in srgb, #fff 78%, transparent);
  margin-top: 22px; max-width: 52ch; font-size: 19px; }
.about-cards { grid-column: 1 / -1; grid-row: 2; margin-top: clamp(44px, 5.5vw, 76px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.about-card { position: relative; isolation: isolate; background: #0D2836; color: #fff;
  font-family: var(--font-body); font-weight: 500; font-size: 23px; line-height: 1.3;
  letter-spacing: -0.01em; padding: 28px 26px; min-height: 265px;
  display: flex; align-items: flex-end;
  /* срез верхнего-правого и нижнего-левого углов */
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }
.about-card::before { display: none; }
.about-ico { position: absolute; left: 26px; top: 28px; width: 42px; height: 42px; display: block; image-rendering: pixelated; }
@media (max-width: 899px) {
  .about-screen::before { clip-path: polygon(0 32px, 30% 32px, 36% 0, 100% 0, 100% 100%, 0 100%); }
  .about-screen { padding: clamp(72px, 14vw, 120px) 0 clamp(64px, 12vw, 100px); }
  .about-grid { grid-template-columns: 1fr; gap: 8px; }
  .about-grid .kicker, .about-copy, .about-cards { grid-column: 1; grid-row: auto; }
  .about-copy .sec-title { font-size: 29px; }
  .about-cards { grid-template-columns: 1fr; margin-top: 32px; }
  .about-card { min-height: 180px; font-size: 19px; padding: 22px 20px; }
  .about-ico { left: 20px; top: 22px; width: 35px; height: 35px; }
}

@media (max-width: 899px) {
  .dir-screen::before { clip-path: polygon(0 0, 55% 0, 62% 32px, 100% 32px, 100% 100%, 0 100%); }
  .dir-screen .sec-title { font-size: 29px; }
  .dir-cards { grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 12px; }
  .dir-cards > :nth-child(1), .dir-cards > :nth-child(2),
  .dir-cards > :nth-child(3), .dir-cards > :nth-child(4) { grid-column: auto; grid-row: auto; }
  .dir-card { min-height: 180px; padding: 20px; gap: 28px; }
  .dc-label { font-size: 15px; }
}

/* — цифры и таблицы — */
.num, .paramlist b, .steps .st-n { font-family: var(--font-display); letter-spacing: 0.01em; }
.steps .st-n { color: var(--dm-blue); }
.figures { border-color: var(--color-divider); background: var(--dm-plate); }
.table thead th { background: var(--dm-ink); color: #fcfcfc; letter-spacing: 0.06em; font-weight: 500; }
.table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--dm-ink) 3%, transparent); }

/* — аккордеоны / табы — */
.acc summary { letter-spacing: -0.01em; }
.acc summary::after { color: var(--dm-blue); }
.acc summary:hover { color: var(--dm-blue); }
.acc .n { color: var(--dm-blue); letter-spacing: 0.12em; }
.tabs { border-color: var(--color-divider); }
.tabs button { font-family: var(--font-body); font-weight: 500; letter-spacing: 0.04em; text-transform: none; }
.tabs button[aria-selected="true"] { background: var(--dm-blue); color: #fff; }

/* — пиксельная заливка вместо штриховки в плейсхолдерах фото — */
.ph {
  background-color: var(--dm-plate);
  background-image:
    linear-gradient(45deg, color-mix(in srgb, var(--dm-blue) 16%, transparent) 25%, transparent 25% 75%, color-mix(in srgb, var(--dm-blue) 16%, transparent) 75%),
    linear-gradient(45deg, color-mix(in srgb, var(--dm-blue) 16%, transparent) 25%, transparent 25% 75%, color-mix(in srgb, var(--dm-blue) 16%, transparent) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}
.ph .mono { color: color-mix(in srgb, var(--dm-ink) 70%, transparent); background: var(--dm-paper); padding: 4px 8px; }

/* — списки-сетки, формы, футер — */
.caps > li { background: var(--dm-plate); border-color: var(--dm-paper); }
.wall > span { border-color: var(--dm-paper); background: var(--dm-plate); color: var(--dm-ink); }
.chain > span { border-color: var(--color-divider); }
.chain > span b { color: var(--dm-blue); letter-spacing: 0.1em; }
.input { border-radius: 0; font-family: var(--font-body); }
.input:focus-visible { outline: 2px solid var(--dm-blue); outline-offset: 1px; }
.contact-info dt { color: var(--dm-blue); letter-spacing: 0.1em; }
.site-foot { background: var(--dm-ink); color: #fcfcfc; margin-top: 0; padding-top: calc(2.5 * var(--leading)); }
.site-foot .foot-nav a:hover { color: var(--dm-mint); }
.site-foot .foot-meta { color: color-mix(in srgb, #fcfcfc 62%, transparent); }

/* — ссылки и фокус — */
a { color: var(--color-accent-700); }
a:hover { color: var(--dm-blue); }
:focus-visible { outline: 2px solid var(--dm-blue); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--dm-blue) 22%, transparent); }

@media (max-width: 680px) { :root { --dm-notch: 12px; } }

/* — блок 05: технические параметры — шейп с бегущим кодом слева, серый аккордеон справа — */
#params .pm-grid { display: grid; grid-template-columns: calc(50% - 480px + (960px - 32px) / 3 + 16px) minmax(0,1fr); gap: 0; align-items: start; }
#params .pm-side { grid-column: 1; padding-right: clamp(40px, 5vw, 72px); }
#params .pm-main { grid-column: 2; min-width: 0; }
#params .pm-side { position: relative; align-self: stretch; min-height: 420px; }
#params .kicker { color: #6b7680; position: relative; z-index: 2; margin: 0; white-space: nowrap; }
#params .pm-head, #params .pm-art { width: var(--pm-w, 320px); max-width: 100%; }
#params .pm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 0 0 clamp(64px, 8vw, 120px); }
#params .pm-corner { width: 58px; height: auto; flex: none; display: block; }
#params .pm-art { position: sticky; top: 96px; height: min(440px, 60vh); overflow: hidden;
  background: color-mix(in srgb, #e8eaeb 45%, transparent);
  clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 62%, calc(100% - 44px) calc(62% + 44px), calc(100% - 44px) 100%, 44px 100%, 0 calc(100% - 44px)); }
#params .pm-art .hero-code { position: absolute; inset: 0; left: 0; top: 0; width: 100%; z-index: 1;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%); }
#params .pm-art .hero-code pre { padding: 0 14px; font-size: 9px; color: color-mix(in srgb, var(--dm-ink) 30%, transparent); }
#params .pm-art .hero-code-track { animation-duration: 140s; }
#params .pm-main .sec-title { margin: 0 0 32px; max-width: none; }
#params .acc { margin: 0; border: 0; display: flex; flex-direction: column; gap: 12px; }
#params .acc details { border: 0; display: flex; flex-direction: column; }
#params .acc summary { background: var(--dm-plate); padding: 26px 28px; align-items: center; gap: 18px;
  font-size: 19px; line-height: 1.35; color: var(--dm-ink); transition: background .2s ease; }
#params .acc summary::after { content: none; }
#params .acc summary:hover { color: var(--dm-ink); background: #ecedee; }
#params .acc .n { font-size: 13px; color: #6b7680; }
#params .pm-ico { margin-left: auto; flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: #e3e5e6; position: relative; transition: transform .45s cubic-bezier(.34,1.45,.5,1), background .2s ease; }
#params .pm-ico::before, #params .pm-ico::after { content: ""; position: absolute; left: 50%; top: 50%;
  width: 16px; height: 1.5px; margin: -0.75px 0 0 -8px; background: var(--dm-ink); border-radius: 1px; }
#params .pm-ico::after { transform: rotate(90deg); }
#params .acc summary:hover .pm-ico { background: #d9dcde; }
#params .acc details.is-open .pm-ico { transform: rotate(135deg); }
#params .acc .body { padding: 12px 0 0; overflow: hidden; }
#params .acc .pm-in { background: var(--dm-plate); padding: 26px 28px; }
#params .acc .body p { font-size: 15px; line-height: 1.6; max-width: 72ch; }
#params .acc .body .note { font-size: 13px; color: #6b7680; }
@media (max-width: 899px) {
  #params .pm-grid { grid-template-columns: 1fr; }
  #params .pm-side { padding-right: 0; }
  #params .pm-main .sec-title br { display: none; }
  #params .pm-side { min-height: 0; }
  #params .pm-art { display: none; }
  #params .acc summary { padding: 20px; font-size: 15px; }
  #params .pm-side, #params .pm-main { grid-column: 1; }
  #params .acc .pm-in { padding: 20px; }
  #params .pm-head { margin: 0 0 var(--half); width: auto; }
  #params .pm-corner { display: none; } }

/* — CTA «Есть требования к плате»: серый блок со срезом слева, фото с наездом пикселей — */
.cta.cta-px { position: relative; border: 0; background: var(--dm-plate); color: var(--dm-ink);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch;
  padding: 0; margin-top: calc(2.5 * var(--leading)); min-height: 380px; overflow: hidden;
  clip-path: polygon(0 44px, calc(var(--cta-cut, 560px) - 44px) 44px, var(--cta-cut, 560px) 0, 100% 0, 100% 100%, 0 100%); }
.cta-px-body { position: relative; z-index: 1; padding: 84px clamp(32px, 4vw, 64px) 52px var(--cta-l, var(--grid-pad));
  display: flex; flex-direction: column; justify-content: center; gap: 18px; min-width: 0; }
.cta.cta-px h2 { font-size: 32px; line-height: 1.15; letter-spacing: -0.01em; max-width: none; color: var(--dm-ink); }
.cta-px-body p { margin: 0; font-size: 15px; line-height: 1.55; max-width: 44ch;
  color: color-mix(in srgb, var(--dm-ink) 68%, transparent); }
.cta-px-body .row { margin-top: 10px; gap: 12px; flex-wrap: wrap; }
.cta-px-media { position: relative; overflow: hidden; min-height: 300px; margin-left: -2px; }
.cta-px-deco { position: absolute; z-index: 0; pointer-events: none; height: auto; display: block; }
.cta-px-deco { grid-area: 1 / 1; }
.cta-px-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cta-px-bits { position: absolute; left: 0; top: 0; display: block; pointer-events: none; z-index: 1; }
/* закрывает субпиксельную щель между серой панелью и фото */
.cta-px-media::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 4px; background: var(--dm-plate); z-index: 2; pointer-events: none; }
@media (max-width: 899px) {
  .cta.cta-px { grid-template-columns: 1fr; min-height: 0;
    clip-path: polygon(0 32px, 30% 32px, calc(30% + 32px) 0, 100% 0, 100% 100%, 0 100%); }
  .cta-px-body { padding: 72px var(--grid-pad) 32px; }
  .cta.cta-px h2 { font-size: 29px; }
  .cta.cta-px h2 br { display: none; }
  .cta-px-media { min-height: 240px; clip-path: none; }
  .cta-px-bits { width: 405px; height: auto; }
  .cta-px-deco-b { display: none; } }

#kaytus .pcb-body { max-width: 62%; }
#kaytus .pcb-body .pcb-sub { color: #fcfcfc; margin: 10px 0 0; font-size: 23px; text-transform: none; letter-spacing: -0.01em; }
@media (max-width: 899px) { #kaytus .pcb-body { max-width: none; } }

/* CTA «плата» — прижат к блоку 05; отбивка перед Kaytus — новая смысловая часть */
.cta.cta-px { margin-top: 16px; }
.cta.cta-px + .wrap > #kaytus { margin-top: 0; }

/* нижняя пара кода в «Производственных возможностях» — шахматный порядок */
.plants-code-r2 { bottom: 360px; right: 0; text-align: right; }
.plants-code-l2 { bottom: 120px; left: 0; }
@media (max-width: 899px) { .plants-code-r2, .plants-code-l2 { display: none; } }
/* новые фото */
.cta-px-media img { object-position: 62% center; }
#kaytus .pcb-glow-c { width: 38%; aspect-ratio: 1; right: 22%; top: 18%; filter: blur(80px);
  background: radial-gradient(circle, rgba(169,199,255,.45), transparent 70%); }

/* — блок «О производителе»: логотипы засасывает по скроллу за стену фактоидов — */
#kaytus-scale { position: relative; overflow-x: clip; }
#kaytus-scale .ks-head { text-align: center; }
#kaytus-scale .kicker { color: #6b7680; }
#kaytus-scale .sec-title { max-width: 30ch; margin: 0 auto; }
.ks-stage { position: relative; max-width: 1120px; margin: clamp(32px, 4vw, 56px) auto 0; }
.ks-field { height: 480px; }
.ks-cloud { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ks-logo { position: absolute; left: 0; top: 0; display: grid; place-items: center; padding: 12px;
  background: #e3e5e6; will-change: transform, opacity;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.ks-logo::before { content: ""; position: absolute; inset: 1px; background: #fff;
  clip-path: polygon(0 0, calc(100% - 13.5px) 0, 100% 13.5px, 100% 100%, 13.5px 100%, 0 calc(100% - 13.5px)); }
.ks-logo span { position: relative; font-family: var(--font-body); font-weight: 600; font-size: 15px;
  letter-spacing: 0.02em; color: var(--dm-ink); text-align: center; line-height: 1.2; }
.ks-wall { position: relative; z-index: 2; background: var(--dm-paper);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 960px; margin: 0 auto;
  box-shadow: 0 -40px 40px -8px var(--dm-paper); }
.ks-wall > div { background: #f4f4f4; color: var(--dm-ink); padding: clamp(30px, 3vw, 40px) clamp(26px, 3vw, 32px);
  display: flex; flex-direction: column; gap: 8px;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }
.ks-wall > div:nth-child(2) { background: #f0f1f1; }
.ks-wall > div:nth-child(3) { background: #ebecec; }
.ks-wall .mono { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 6px; }
.ks-wall .num { font-family: var(--font-display); font-weight: 700; font-size: 43px; line-height: 1; color: var(--dm-ink); }
.ks-wall p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: color-mix(in srgb, var(--dm-ink) 72%, transparent); }
.ks-text { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 48px;
  max-width: 960px; margin: clamp(40px, 5vw, 64px) auto 0; }
.ks-text p { margin: 0; font-size: 15px; line-height: 1.6; color: color-mix(in srgb, var(--dm-ink) 78%, transparent); }
@media (max-width: 899px) {
  .ks-field { height: 340px; }
  .ks-wall { grid-template-columns: 1fr; }
  .ks-text { grid-template-columns: 1fr; } }

/* логотипы: единые белые плашки */
.ks-logo { padding: 0; background: #fff; border-radius: 10px; clip-path: none;
  box-shadow: inset 0 0 0 1px rgba(0,29,43,.06), 0 10px 28px -10px rgba(0,29,43,.22), 0 2px 6px rgba(0,29,43,.06); }
.ks-logo::before { content: none; }
.ks-logo img { display: block; max-height: 62%; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; }

#plants .kicker, #kaytus-scale .kicker { margin-bottom: 16px; }
.ks-logo { border-radius: 0; box-shadow: inset 0 0 0 1px rgba(0,29,43,.07), 0 4px 14px -6px rgba(0,29,43,.12); }

/* — линейка GPU: тёмный вход → белые карточки и сравнение → синий CTA — */
#lineup { padding-bottom: 0; }
.lx-intro { position: relative; isolation: isolate; overflow: hidden; background: #001D2B; color: #fcfcfc;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: end;
  padding: clamp(32px, 4vw, 56px);
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%); }
.lx-intro .pcb-glow { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(48px); mix-blend-mode: screen; }
.lx-glow-a { width: 44%; aspect-ratio: 1; right: -8%; top: -30%; background: radial-gradient(circle, rgba(1,88,252,.55), transparent 68%); }
.lx-glow-b { width: 30%; aspect-ratio: 1; right: 30%; bottom: -40%; background: radial-gradient(circle, rgba(0,141,208,.4), transparent 66%); }
.lx-intro-text { display: flex; flex-direction: column; gap: 16px; }
.lx-intro .kicker { color: #4d9bff; margin: 0; }
.lx-intro .sec-title { color: #fcfcfc; }
.lx-intro p { margin: 0; color: color-mix(in srgb, #fcfcfc 78%, transparent); font-size: 15px; line-height: 1.6; max-width: 52ch; }
.lx-figs { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgba(255,255,255,.12); }
.lx-figs > div { background: #001D2B; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.lx-figs dt { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #9aa4ab; }
.lx-figs dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 35px; line-height: 1; color: #fcfcfc; }
#lineup-models { padding-top: 16px; }
.lx-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lx-card { background: #fff; box-shadow: inset 0 0 0 1px rgba(0,29,43,.08); display: grid; grid-template-rows: auto 1fr; scroll-margin-top: 96px; }
.lx-card-media .ph { aspect-ratio: 16 / 9; min-height: 0; background: #f4f4f4; display: grid; place-items: center; margin: 5px 5px 0; }
.lx-card-body { padding: clamp(24px, 3vw, 32px); display: flex; flex-direction: column; gap: 8px; position: relative; }
.lx-idx { position: absolute; top: clamp(24px, 3vw, 32px); right: clamp(24px, 3vw, 32px); font-size: 13px; color: #6b7680; }
.lx-card h3 { margin: 0; font-size: 29px; line-height: 1.1; text-transform: uppercase; color: var(--dm-ink); }
.lx-sub { font-size: 13px; letter-spacing: .04em; color: var(--dm-blue); }
.lx-card p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: color-mix(in srgb, var(--dm-ink) 76%, transparent); max-width: none; }
.lx-cmp { margin-top: clamp(40px, 5vw, 64px); }
.lx-cmp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 16px; }
.lx-cmp-head .kicker { color: #6b7680; margin: 0; }
.lx-legend { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #6b7680; }
.lx-legend i { width: 12px; height: 12px; background: var(--dm-blue); }
.lx-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; color: var(--dm-ink); table-layout: fixed; }
.lx-table th, .lx-table td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid rgba(0,29,43,.1); transition: background-color .15s; }
.lx-table thead th { font-size: 19px; font-weight: 700; text-transform: uppercase; padding-top: 0; border-bottom: 2px solid var(--dm-ink); }
.lx-table thead th:first-child { font-size: 13px; font-weight: 500; text-transform: none; color: #6b7680; vertical-align: bottom; }
.lx-table th[scope="row"] { width: 26%; font-weight: 500; color: #6b7680; font-size: 13px; padding-top: 16px; }
.lx-table td[colspan] { color: color-mix(in srgb, var(--dm-ink) 72%, transparent); }
.lx-table td.best { color: var(--dm-blue); font-weight: 600; box-shadow: inset 3px 0 0 var(--dm-blue); }
.lx-table .is-col { background: #f0f4ff; }
.lx-cta { margin-top: clamp(40px, 5vw, 64px); background: var(--dm-blue); color: #fff;
  display: flex; justify-content: space-between; align-items: center; gap: 24px 48px; flex-wrap: wrap;
  padding: clamp(28px, 3.5vw, 48px) clamp(28px, 4vw, 56px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%); }
.lx-cta h3 { margin: 0; font-size: 29px; line-height: 1.15; text-transform: uppercase; color: #fff; }
.lx-cta p { margin: 10px 0 0; font-size: 15px; color: #ecedee; max-width: 52ch; }
.lx-cta-btn { display: inline-flex; align-items: center; gap: 12px; background: #fff; color: var(--dm-ink); text-decoration: none;
  font-size: 15px; font-weight: 600; padding: 15px 26px; transition: background-color .15s, color .15s;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.lx-cta-btn:hover { background: #001D2B; color: #fff; }
@media (max-width: 899px) {
  .lx-intro { grid-template-columns: 1fr; }
  .lx-figs dd { font-size: 29px; }
  .lx-cards { grid-template-columns: 1fr; }
  .lx-table { font-size: 13px; min-width: 560px; }
  .lx-table thead th { font-size: 15px; }
  .lx-cta h3 { font-size: 23px; } }

/* линейка: фото справа, как в блоках плат/Kaytus; рубленые углы — верх-право и низ-лево */
.lx-intro { clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 30px 100%, 0 calc(100% - 30px)); }
.lx-intro .pcb-glow { display: none; }
.lx-media { position: absolute; inset: 0 0 0 38%; z-index: -1; overflow: hidden; }
.lx-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.lx-media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #001D2B 0%, color-mix(in srgb, #001D2B 55%, transparent) 30%, transparent 62%),
              linear-gradient(0deg, color-mix(in srgb, #001D2B 70%, transparent) 0%, transparent 45%); }
.lx-intro-text { align-self: start; }
.lx-figs { background: none; gap: 8px; }
.lx-figs > div { background: color-mix(in srgb, #001D2B 82%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.lx-card-media img { display: block; width: calc(100% - 10px); margin: 5px 5px 0; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 899px) {
  .lx-media { inset: 0; opacity: .35; }
  .lx-media::after { background: linear-gradient(0deg, #001D2B 10%, transparent 80%); } }

/* карточки моделей v2: серые рубленые плиты, фото в край, спек-полоса */
.lx-card { background: #f4f4f4; box-shadow: none; display: flex; flex-direction: column;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px)); }
.lx-card + .lx-card { background: #f0f1f1; }
.lx-card-media { position: relative; overflow: hidden; background: #001D2B; }
.lx-card-media img { display: block; width: 100%; margin: 0; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.lx-card:hover .lx-card-media img { transform: scale(1.04); }
.lx-chip { position: absolute; left: 0; bottom: 0; background: #001D2B; color: #fcfcfc; font-size: 13px; letter-spacing: .08em;
  padding: 9px 16px 9px 14px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.lx-chip::before { content: "[ "; color: #4d9bff; } .lx-chip::after { content: " ]"; color: #4d9bff; }
.lx-card-body { padding: clamp(24px, 3vw, 32px); gap: 20px; flex: 1; }
.lx-card-body::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 48px; background: var(--dm-blue); transition: width .35s cubic-bezier(.2,.7,.2,1); }
.lx-card:hover .lx-card-body::before { width: 100%; }
.lx-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.lx-card h3 { font-size: 39px; line-height: 1; }
.lx-idx { position: static; font-size: 13px; color: #6b7680; }
.lx-spec { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(0,29,43,.14); border-bottom: 1px solid rgba(0,29,43,.14); }
.lx-spec > div { padding: 14px 0 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.lx-spec > div:first-child { padding-left: 0; }
.lx-spec > div + div { border-left: 1px solid rgba(0,29,43,.14); }
.lx-spec dt { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #6b7680; }
.lx-spec dd { margin: 0; font-size: 23px; font-weight: 700; color: var(--dm-ink); line-height: 1.1; }
.lx-card p { margin: 0; }
.lx-card-foot { margin-top: auto; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.lx-card-foot a { font-size: 15px; font-weight: 600; color: var(--dm-ink); text-decoration: none; display: inline-flex; gap: 8px; transition: color .15s; }
.lx-card-foot a:last-child { color: var(--dm-blue); }
.lx-card-foot a:hover { color: #0536d9; }
#lineup-cmp { scroll-margin-top: 96px; }
@media (max-width: 899px) { .lx-card h3 { font-size: 29px; } .lx-spec dd { font-size: 19px; } }

/* GPU v3: без счётчика, спек-полоса только с вертикальными разделителями */
.lx-spec { border-top: 0; border-bottom: 0; }
.lx-spec > div { padding-top: 0; padding-bottom: 0; }
.lx-table .is-col { background: none; }
/* — СХД: шапка в две колонки, факты-полоса, карточки моделей, табы-характеристики — */
#storage { padding-bottom: 0; }
.st-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px 64px; align-items: end; }
.st-head .kicker { margin-bottom: 12px; }
.st-head p { margin: 0; font-size: 15px; line-height: 1.6; color: color-mix(in srgb, var(--dm-ink) 76%, transparent); max-width: 52ch; }
.st-facts-wrap { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 20px; margin: clamp(56px, 7vw, 96px) 0; }
.st-facts { display: contents; list-style: none; margin: 0; padding: 0; }
.st-facts li { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 240px; padding: 26px;
  border: 1px solid rgba(0,29,43,.22);
  clip-path: polygon(0 0, calc(100% - var(--dm-notch)) 0, 100% var(--dm-notch), 100% 100%, var(--dm-notch) 100%, 0 calc(100% - var(--dm-notch))); }
.st-facts li::before, .st-facts li::after { content: ""; position: absolute; width: calc(var(--dm-notch) * 1.4142); height: 1px; background: rgba(0,29,43,.22); transform-origin: 0 0; transform: rotate(45deg); }
.st-facts li::before { left: calc(100% - var(--dm-notch) - 1px); top: -1px; }
.st-facts li::after { left: -1px; top: calc(100% - var(--dm-notch) - 1px); }
.st-facts li:nth-child(1) { grid-column: 1; grid-row: 1; }
.st-facts li:nth-child(2) { grid-column: 2; grid-row: 1; }
.st-facts li:nth-child(3) { grid-column: 3; grid-row: 2; }
.st-facts li:nth-child(4) { grid-column: 4; grid-row: 2; }
.st-facts span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dm-blue); }
.st-facts p { margin: 0; font-family: var(--font-heading); font-size: 19px; line-height: 1.35; font-weight: 500; letter-spacing: -0.01em; color: var(--dm-ink); text-wrap: pretty; }
.st-code { grid-column: 3 / span 2; grid-row: 1; position: relative; z-index: 1; overflow: hidden; min-height: 240px; pointer-events: none; }
.st-code .hero-code { inset: 0; left: 0; top: 0; width: 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%), linear-gradient(90deg, transparent 0, #000 20%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%), linear-gradient(90deg, transparent 0, #000 20%, #000 100%); }
.st-code .hero-code pre { padding-left: 24px; color: color-mix(in srgb, var(--dm-ink) 34%, transparent); }
.st-code .hero-code-track { animation-duration: 90s; }
.st-code-b { grid-column: 1 / span 2; grid-row: 2; }
.st-code-b .hero-code { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%), linear-gradient(270deg, transparent 0, #000 20%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%), linear-gradient(270deg, transparent 0, #000 20%, #000 100%); }
.st-code-b .hero-code pre { padding-left: 0; }
.st-code-b .hero-code-track { animation-duration: 110s; animation-direction: reverse; }
.st-cube { grid-column: 3 / span 2; grid-row: 1; position: relative; z-index: 0; align-self: center; justify-self: center; width: min(300px, 70%); height: auto; opacity: .14; transform: rotate(-9deg); pointer-events: none; }
.lx-ph { aspect-ratio: 16 / 9; display: grid; place-items: center; background: #001D2B; }
.lx-ph span { font-size: 13px; letter-spacing: .08em; color: #6b7680; }
#storage-specs { padding-top: clamp(40px, 5vw, 64px); }
#storage-specs .lx-cmp-head .kicker { color: #6b7680; }
#storage-specs .tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; border: 0; }
#storage-specs .tabs button { font: inherit; font-size: 13px; letter-spacing: .04em; padding: 11px 18px; cursor: pointer;
  background: #f4f4f4; color: var(--dm-ink); border: 0; box-shadow: inset 0 0 0 1px rgba(0,29,43,.1); transition: background-color .15s, color .15s;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
#storage-specs .tabs button:hover { background: #ebecec; }
#storage-specs .tabs button[aria-selected="true"] { background: #001D2B; color: #fcfcfc; box-shadow: none; }
#storage-specs .tabs button::after { display: none; }
@media (max-width: 899px) {
  .st-head { grid-template-columns: 1fr; }
  .st-facts-wrap { grid-template-columns: 1fr 1fr; gap: 16px; }
  .st-facts li:nth-child(n) { grid-column: auto; grid-row: auto; min-height: 200px; }
  .st-code, .st-cube { display: none; } }
@media (max-width: 560px) {
  .st-facts-wrap { grid-template-columns: 1fr; }
  .st-facts li:nth-child(n) { min-height: 0; padding: 20px; gap: 24px; } }



/* — Документация: серая пиксельная плита, инженер держит два PDF — */
.doc-cta { position: relative; margin: 120px 0 clamp(120px, 12vw, 160px); }
.doc-plate { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0 32px;
  isolation: isolate; }
.doc-plate::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--dm-plate);
  clip-path: polygon(0 44px, calc(var(--cta-cut, 560px) - 44px) 44px, var(--cta-cut, 560px) 0, 100% 0, 100% 100%, 0 100%); }
.doc-body { position: relative; z-index: 1; min-width: 0; align-self: stretch; justify-content: center; box-sizing: border-box; padding: 44px 0 0 var(--cta-l, var(--grid-pad));
  display: flex; flex-direction: column; gap: 16px; }
.doc-body .kicker { color: #6b7680; margin: 0; }
.doc-body .sec-title { margin: 0; }
.doc-body p { margin: 0; font-size: 15px; line-height: 1.55; max-width: 36ch; color: color-mix(in srgb, var(--dm-ink) 72%, transparent); }
.doc-body .row { margin-top: 8px; gap: 12px; flex-wrap: wrap; }
.doc-media { position: relative; z-index: 1; align-self: end; margin-top: -104px; margin-right: calc(var(--cta-l, var(--grid-pad)) + 40px); }
.doc-man { position: relative; display: block; height: 560px; width: auto; max-width: none; }
.doc-px { position: absolute; top: 104px; bottom: 0; left: -12%; right: -26%; overflow: hidden; pointer-events: none; }
.doc-px i { position: absolute; display: block; box-sizing: border-box; }
.doc-pdfs { z-index: 1; }
.doc-frame { position: absolute; top: 0; right: 0; bottom: 0; opacity: 1; aspect-ratio: 1188 / 2160; z-index: 0; pointer-events: none; }
.doc-frame img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.doc-frame .hero-code { position: absolute; inset: 0; left: 0; top: 0; width: 100%; z-index: 1;
  -webkit-mask-image: url(assets/shapes/doc-frame.png); mask-image: url(assets/shapes/doc-frame.png);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.doc-frame .hero-code pre { padding: 0 0 0 16px; font-size: 9px; color: color-mix(in srgb, var(--dm-ink) 30%, transparent); }
.doc-frame .hero-code-track { animation-duration: 120s; }
@media (max-width: 899px) { .doc-frame { display: none; } }
.doc-pdfs { position: absolute; inset: 0; pointer-events: none; }
.doc-pdf { position: absolute; bottom: 25%; width: 26%; pointer-events: auto; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px;
  background: #fff; color: var(--dm-ink); text-decoration: none; box-shadow: 0 14px 30px -12px rgba(0,29,43,.35); -webkit-tap-highlight-color: transparent;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: transform .2s ease, background-color .2s ease; }
.doc-pdf:nth-child(1) { left: 17%; transform: rotate(-4deg); }
.doc-pdf:nth-child(2) { right: 17%; transform: rotate(4deg); }
.doc-pdf:hover { background: #ececec; }
.doc-pdf:nth-child(1):hover { transform: rotate(-4deg) translateY(-6px); }
.doc-pdf:nth-child(2):hover { transform: rotate(4deg) translateY(-6px); }
.doc-pdf:focus { outline: none; }
.doc-pdf:focus-visible { background: #ececec; }
.doc-pdf-ic { display: block; width: 32px; height: 32px; }
.doc-pdf-t { font-family: var(--font-heading); font-size: 13px; line-height: 1.3; font-weight: 500; }
.doc-pdf-s { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dm-blue); }
@media (max-width: 899px) {
  .doc-plate { grid-template-columns: 1fr; clip-path: polygon(0 32px, 30% 32px, calc(30% + 32px) 0, 100% 0, 100% 100%, 0 100%); }
  .doc-body { padding: 72px var(--grid-pad) 8px; align-self: auto; }
  .doc-media { margin: 0; justify-self: center; width: min(100%, 520px); }
  .doc-cta { margin-top: 64px; }
  .doc-px { top: 0; left: -10%; right: -10%; }
  .doc-man { width: 100%; height: auto; }
}
@media (max-width: 600px) {
  .doc-media { display: flex; flex-direction: column; }
  .doc-pdfs { position: static; display: grid; grid-template-columns: 1fr; gap: 12px; padding: 0 24px 24px; margin-top: -8px; }
  .doc-pdf, .doc-pdf:nth-child(n), .doc-pdf:nth-child(n):hover { position: static; width: auto; transform: none; }
}

/* — Решения: тёмная подложка + схемотехника с фото справа под синим блюром — */
.band#solutions { position: relative; }
.band#solutions .wrap { padding-top: calc(2.5 * var(--leading) + 44px); padding-bottom: clamp(64px, 7vw, 104px); }
.sol-schem { position: relative; z-index: 1; margin-top: clamp(64px, 8vw, 112px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: center; scroll-margin-top: 96px; }
.sol-text { display: flex; flex-direction: column; gap: 16px; }
.sol-schem .sec-title { margin: 0 0 8px; color: #fcfcfc; font-size: 29px; line-height: 1.2; }
.sol-schem p { margin: 0; font-size: 15px; line-height: 1.55; color: color-mix(in srgb, #fcfcfc 76%, transparent); }
.sol-media { position: relative; align-self: stretch; min-height: 440px; margin-right: calc(-1 * var(--cta-l, var(--grid-pad)));
  clip-path: polygon(0 0, calc(100% - 64px) 0, 100% 64px, 100% 100%, 120px 100%, 0 calc(100% - 120px)); }
.sol-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.band#solutions .band-links a { position: relative; background: #0D2836; border: 0; min-height: 300px; padding: 24px;
  display: flex; flex-direction: column; justify-content: flex-end;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); transition: background .2s ease; }
.band#solutions .band-links a:hover { background: var(--dm-blue); }
.band#solutions .band-links a:hover span { color: #fcfcfc; }
@media (max-width: 899px) {
  .sol-schem { grid-template-columns: 1fr; gap: 32px; }
  .sol-media { min-height: 0; aspect-ratio: 4 / 3; margin-right: 0 !important;
    clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px)); }
  .sol-schem .sec-title { font-size: 23px; }
  .band#solutions .band-links a { min-height: 220px; }
}
/* — Проектная команда: фактоиды как у KAYTUS + параметры — */
.tm-head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.tm-head .kicker { color: #6b7680; margin: 0; }
.tm-head .sec-title { max-width: 30ch; margin: 0; text-align: center; }
/* R&D: сетка плиток */
.rnd-grid { list-style: none; padding: 0; max-width: 1120px; margin: clamp(32px, 4vw, 56px) auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rnd-grid li { position: relative; margin: 0; min-height: 132px; padding: 44px 20px 20px; background: #f4f4f4; font-size: 15px; line-height: 1.45; color: var(--dm-ink); max-width: none;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); transition: background .2s ease; }
.rnd-grid li::before { content: ""; position: absolute; top: 20px; left: 20px; width: 20px; height: 4px; background: var(--dm-blue); }
.rnd-grid li:nth-child(4n+2), .rnd-grid li:nth-child(4n+4) { background: #eff0f0; }
.rnd-grid li:hover { background: #e6e8e9; }
/* BOM / DFM: две плиты */
.bom-grid { max-width: 1120px; margin: clamp(32px, 4vw, 56px) auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bom-card { position: relative; padding: clamp(28px, 3vw, 40px); background: #f4f4f4; color: var(--dm-ink); display: flex; flex-direction: column;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }
.bom-card + .bom-card { background: #ebecec; }
.bom-tag { font-family: var(--font-display); font-weight: 700; font-size: 43px; line-height: 1; color: var(--dm-blue); }
.bom-card h3 { margin: 16px 0 24px; font-size: 19px; line-height: 1.3; font-weight: 500; max-width: 26ch; }
.bom-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(0,29,43,.12); }
.bom-list li { margin: 0; padding: 12px 0; border-bottom: 1px solid rgba(0,29,43,.12); font-size: 15px; line-height: 1.45; max-width: none; }
.bom-list li::first-letter { text-transform: uppercase; }
@media (max-width: 899px) { .bom-grid { grid-template-columns: 1fr; } }
/* R&D: три колонки-спецификации, сквозная нумерация */
.rnd-cols { position: relative; z-index: 1; max-width: 1120px; margin: clamp(40px, 5vw, 72px) auto 0; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; counter-reset: rnd; }
.rnd-col-h { position: relative; margin: 0 0 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; font-size: 11px; line-height: 1.3; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dm-blue); }
.rnd-ico { width: 32px; height: 32px; display: block; image-rendering: pixelated; }
.rnd-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid rgba(0,29,43,.12); }
.rnd-list li { counter-increment: rnd; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; margin: 0; max-width: none;
  padding: 16px 0; border-top: 1px solid rgba(0,29,43,.12); font-size: 15px; line-height: 1.45; color: var(--dm-ink); text-wrap: pretty; }
.rnd-list li::before { content: counter(rnd, decimal-leading-zero); font-size: 11px; line-height: 22px; letter-spacing: .08em; color: #6b7680; }
@media (max-width: 899px) { .rnd-cols { grid-template-columns: 1fr; gap: 40px; } }
#team .figures { border: 0; background: transparent; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  max-width: 960px; margin: clamp(32px, 4vw, 56px) auto 0; padding: 0; }
#team .figures > div { border: 0; color: var(--dm-ink); padding: clamp(30px, 3vw, 40px) clamp(26px, 3vw, 32px);
  display: flex; flex-direction: column; gap: 8px;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }
#team .figures > div:nth-child(1) { background: #f4f4f4; }
#team .figures > div:nth-child(2) { background: #f0f1f1; }
#team .figures > div:nth-child(3) { background: #ebecec; }
#team .figures .mono { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 6px; color: var(--dm-ink); }
#team .figures .num { font-family: var(--font-display); font-weight: 700; font-size: 43px; line-height: 1; color: var(--dm-ink); }
#team .figures p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: color-mix(in srgb, var(--dm-ink) 72%, transparent); }
#team .tm-params { max-width: 960px; margin: clamp(48px, 5vw, 72px) auto 0; }
#team .tm-params .sub-title { margin: 0 0 16px; text-align: center; }
@media (max-width: 780px) { #team .figures { grid-template-columns: 1fr; } }

/* бегущий код и шейп в пустотах между R&D / BOM (только десктоп) */
#rnd, #bom { position: relative; }
#rnd .tm-head, #bom .tm-head, .rnd-cols, .bom-grid { position: relative; z-index: 1; }
.gap-code { position: absolute; top: -130px; width: 30%; height: 260px; overflow: hidden; pointer-events: none; z-index: 0; }
.gap-code-l { left: 0; }
.gap-code-r { right: 0; }
.gap-code .hero-code { inset: 0; left: 0; top: 0; width: 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 25%, #000 75%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 25%, #000 75%, transparent 100%); }
.gap-code-l .hero-code { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 25%, #000 75%, transparent 100%), linear-gradient(90deg, #000 40%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 25%, #000 75%, transparent 100%), linear-gradient(90deg, #000 40%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.gap-code-r .hero-code { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 25%, #000 75%, transparent 100%), linear-gradient(270deg, #000 40%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 25%, #000 75%, transparent 100%), linear-gradient(270deg, #000 40%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.gap-code-r .hero-code pre { text-align: left; padding-left: 40px; }
.gap-code .hero-code pre { font-size: 11px; color: color-mix(in srgb, var(--dm-ink) 26%, transparent); }
.gap-code .hero-code-track { animation-duration: 110s; }
.gap-code-r .hero-code-track { animation-duration: 130s; }
.gap-shape { position: absolute; top: -110px; left: 4%; width: 220px; height: auto; opacity: .08; transform: rotate(-12deg); pointer-events: none; z-index: 0; }
@media (max-width: 899px) { .gap-code, .gap-shape { display: none; } }

/* — Реверс-инжиниринг: плата разбирается на слои по скроллу — */
.rv-lead { margin: 0; font-size: 15px; line-height: 1.55; max-width: 56ch; color: color-mix(in srgb, var(--dm-ink) 72%, transparent); }
.rv-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 64px; margin-top: clamp(40px, 5vw, 72px); }
.rv-stage-wrap { position: relative; }
.rv-stage { position: relative; height: 600px; will-change: transform; background: #f4f4f4; overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 44px 100%, 0 calc(100% - 44px)); perspective: 1600px; }
.rv-stack { position: absolute; left: 50%; top: 56%; width: 330px; height: 330px; margin: -165px 0 0 -165px; transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(-38deg); }
.rv-layer { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .5s ease, filter .5s ease; }
.rv-layer svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 18px 18px rgba(0,29,43,.18)); }
.rv-l-gerber, .rv-l-sch, .rv-l-bom { opacity: 0; }
.rv-l-board { transform: translateZ(0); }
.rv-l-gerber { transform: translateZ(4px); } .rv-l-sch { transform: translateZ(8px); } .rv-l-bom { transform: translateZ(12px); }
.rv-tag { position: absolute; left: 32px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #6b7680; opacity: 0; transition: opacity .5s ease, top .8s cubic-bezier(.2,.7,.2,1); display: flex; align-items: center; gap: 8px; }
.rv-tag::before { content: ""; width: 20px; height: 4px; background: currentColor; }
.rv-tag-board { top: 416px; } .rv-tag-gerber { top: 340px; } .rv-tag-sch { top: 264px; } .rv-tag-bom { top: 187px; }
.rv-status { position: absolute; left: 32px; top: 32px; display: flex; align-items: center; gap: 12px; font-size: 13px; letter-spacing: .08em; color: var(--dm-ink); }
.rv-status i { width: 8px; height: 8px; background: var(--dm-blue); }
.rv-status b { font-family: var(--font-display); font-size: 19px; color: var(--dm-blue); }
.rv-fw rect { opacity: 0; transition: opacity .4s ease; }
.rv-pulse path { stroke-dasharray: 14 86; stroke-dashoffset: 100; opacity: 0; }
.rv-edit { opacity: 0; transition: opacity .5s ease; }
/* шаги 2–3 — редизайн и документация: взрыв слоёв */
.rv[data-step="1"] .rv-l-gerber, .rv[data-step="2"] .rv-l-gerber { opacity: 1; transform: translateZ(90px); }
.rv[data-step="1"] .rv-l-sch, .rv[data-step="2"] .rv-l-sch { opacity: 1; transform: translateZ(180px); }
.rv[data-step="1"] .rv-l-bom, .rv[data-step="2"] .rv-l-bom { opacity: 1; transform: translateZ(270px); }
.rv[data-step="1"] .rv-tag, .rv[data-step="2"] .rv-tag { opacity: 1; }
/* шаг 2 — редизайн: схема в фокусе */
.rv[data-step="1"] .rv-edit { opacity: 1; }
.rv[data-step="1"] .rv-l-board, .rv[data-step="1"] .rv-l-gerber, .rv[data-step="1"] .rv-l-bom { opacity: .28; }
.rv[data-step="1"] .rv-tag:not(.rv-tag-sch) { opacity: .35; }
.rv[data-step="1"] .rv-tag-sch { color: var(--dm-blue); }
/* шаги 4–6 — прототип: слои схлопываются в новую плату */
.rv[data-step="3"] .rv-l-gerber, .rv[data-step="4"] .rv-l-gerber, .rv[data-step="5"] .rv-l-gerber { opacity: 1; transform: translateZ(3px); }
.rv[data-step="3"] .rv-l-board svg, .rv[data-step="4"] .rv-l-board svg, .rv[data-step="5"] .rv-l-board svg { filter: drop-shadow(0 0 0 #0158fc) drop-shadow(0 22px 22px rgba(1,88,252,.28)); }
.rv[data-step="4"] .rv-pulse path, .rv[data-step="5"] .rv-pulse path { opacity: 1; animation: rv-pulse 1.6s linear infinite; }
.rv[data-step="4"] .rv-pulse path:nth-child(2n) { animation-delay: -.8s; }
.rv[data-step="5"] .rv-fw rect { opacity: 1; }
.rv[data-step="5"] .rv-l-gerber { opacity: .45; }
@keyframes rv-pulse { to { stroke-dashoffset: 0; } }
/* шаги справа */
.rv-steps { list-style: none; margin: 0; padding: 120px 0 240px; display: flex; flex-direction: column; gap: 0; }
.rv-step { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 56px 0; border-top: 1px solid rgba(0,29,43,.12); opacity: .32; transition: opacity .4s ease; max-width: none; }
.rv-step:last-child { border-bottom: 1px solid rgba(0,29,43,.12); }
.rv-step.is-on { opacity: 1; }
.rv-n { font-family: var(--font-display); font-weight: 700; font-size: 29px; line-height: 1; color: var(--dm-ink); transition: color .3s ease; }
.rv-step.is-on .rv-n { color: var(--dm-blue); }
.rv-step h3 { margin: 0 0 8px; font-size: 23px; line-height: 1.2; font-weight: 500; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rv-step h3 em { font-style: normal; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #6b7680; border: 1px solid rgba(0,29,43,.2); padding: 3px 8px; }
.rv-step p { margin: 0; font-size: 15px; line-height: 1.55; max-width: 40ch; color: color-mix(in srgb, var(--dm-ink) 72%, transparent); }
@media (prefers-reduced-motion: reduce) { .rv-layer, .rv-tag { transition: none; } .rv-pulse path { animation: none !important; } }
.rv-grid { grid-template-columns: 1fr; gap: 0; }
.rv-steps { display: none; }
.rv-stage-wrap { height: calc(6 * 480px + 620px); }
.rv-stage { height: 620px; }
.rv-stack { left: 34%; top: 68%; }
.rv-tag { left: 40px; }
.rv-cap { position: absolute; right: 64px; top: 50%; transform: translateY(-50%); width: 38%; display: flex; flex-direction: column; gap: 20px; }
.rv-cap-t { margin: 0; min-height: 4.8em; font-size: 19px; line-height: 1.5; color: color-mix(in srgb, var(--dm-ink) 76%, transparent); max-width: 34ch; }
.rv-cap-h { margin: 0; font-size: 39px; line-height: 1.1; font-weight: 500; letter-spacing: -0.01em; color: var(--dm-ink); display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.rv-cap-h b { font-family: var(--font-display); font-weight: 700; color: var(--dm-blue); }
.rv-cap-h em { font-style: normal; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #6b7680; border: 1px solid rgba(0,29,43,.2); padding: 3px 8px; }
.rv-dots { display: flex; gap: 6px; }
.rv-dots i { flex: 1; height: 4px; background: rgba(0,29,43,.14); transition: background .3s ease; }
.rv-dots i.is-on { background: var(--dm-blue); }
.rv-hint { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #6b7680; transition: opacity .3s ease; }
.rv[data-step="5"] .rv-hint { opacity: 0; }
.rv .rv-status { display: none; }
@media (max-width: 899px) {
  .rv-grid { grid-template-columns: 1fr; gap: 0; }
  .rv-stage-wrap { height: calc(6 * 70svh); }
  .rv-stage { height: calc(100svh - 54px - 32px); max-height: 680px; min-height: 520px; z-index: 2; clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px)); }
  .rv-stack { width: 180px; height: 180px; margin: -90px 0 0 -90px; top: 38%; }
  .rv-steps { display: none; }
  .rv .rv-status { display: flex; }
  .rv-cap-h { display: none; }
  .rv-stack { left: 50%; }
  .rv-cap { gap: 12px; left: 20px; right: 20px; top: auto; bottom: 20px; width: auto; transform: none; }
  .rv-cap-t { margin: 0; min-height: 5.2em; font-size: 15px; max-width: none; line-height: 1.5; color: color-mix(in srgb, var(--dm-ink) 76%, transparent); max-width: none; }
  .rv-dots { display: flex; gap: 6px; }
  .rv-dots i { flex: 1; height: 3px; background: rgba(0,29,43,.14); transition: background .3s ease; }
  .rv-dots i.is-on { background: var(--dm-blue); }
  .rv-hint { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #6b7680; transition: opacity .3s ease; }
  .rv[data-step="5"] .rv-hint { opacity: 0; }
  .rv-status { font-size: 19px; }
  .rv-status b { font-size: 23px; }
  .rv[data-step="1"] .rv-l-gerber, .rv[data-step="2"] .rv-l-gerber { transform: translateZ(60px); }
  .rv[data-step="1"] .rv-l-sch, .rv[data-step="2"] .rv-l-sch { transform: translateZ(120px); }
  .rv[data-step="1"] .rv-l-bom, .rv[data-step="2"] .rv-l-bom { transform: translateZ(180px); }
  .rv-tag { display: none; }
  .rv-status { left: 20px; top: 20px; }
  .rv-steps { padding: 24px 0 120px; }
  .rv-step { grid-template-columns: 44px minmax(0, 1fr); padding: 40px 0; }
  .rv-n { font-size: 23px; } .rv-step h3 { font-size: 19px; }
}

/* реверс: на десктопе весь блок — одна длинная серая плита, сцена внутри без своей подложки */
.rv-code { display: none; }
@media (min-width: 900px) {
  .rv { position: relative; background: #f4f4f4; padding: 96px 56px 64px;
    clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 44px 100%, 0 calc(100% - 44px)); }
  .rv .tm-head { position: relative; z-index: 1; }
  .rv-stage { background: transparent; clip-path: none; overflow: visible; }
  .rv-code { display: block; position: absolute; left: 0; top: 24px; width: 30%; height: 300px; overflow: hidden; pointer-events: none; z-index: 0; }
  .rv-code .hero-code { inset: 0; left: 0; top: 0; width: 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 25%, #000 75%, transparent 100%), linear-gradient(90deg, #000 40%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 25%, #000 75%, transparent 100%), linear-gradient(90deg, #000 40%, transparent 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
  .rv-code .hero-code pre { padding-left: 40px; font-size: 11px; color: color-mix(in srgb, var(--dm-ink) 26%, transparent); }
  .rv-code .hero-code-track { animation-duration: 120s; }
}

.rv-scroll { display: none; }
@media (min-width: 900px) {
  .rv .rv-grid { margin-top: 0; }
  .rv-scroll { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #6b7680; }
  .rv-scroll i { position: relative; width: 1px; height: 36px; background: rgba(0,29,43,.18); overflow: hidden; }
  .rv-scroll i::after { content: ""; position: absolute; left: 0; top: -14px; width: 1px; height: 14px; background: var(--dm-blue); animation: rv-drip 1.6s cubic-bezier(.5,0,.5,1) infinite; }
  .rv-stage { height: 560px; }
  .rv-stack { top: 62%; }
  .rv-tag-board { top: 382px; } .rv-tag-gerber { top: 306px; } .rv-tag-sch { top: 230px; } .rv-tag-bom { top: 153px; }
  .rv-stage-wrap { height: calc(6 * 440px + 560px); }
}
@keyframes rv-drip { 0% { transform: translateY(0); } 70%, 100% { transform: translateY(50px); } }
@media (prefers-reduced-motion: reduce) { .rv-scroll i::after { animation: none; top: 11px; } }

/* CTA «Есть образец»: малые срезы сверху слева/справа + видео инженера (водяной знак обрезан снизу) */
.cta.cta-px.cta-px-b { clip-path: polygon(44px 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 0 100%, 0 44px); }
.cta-px-b .cta-px-body { padding-top: 56px; padding-bottom: 56px; }
.cta-px-media img.cta-px-poster, .cta-px-sprite { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.cta-px-sprite { opacity: 0; transition: opacity .2s ease; }
.cta-px-sprite.is-ready { opacity: 1; }
@media (max-width: 899px) {
  .cta.cta-px.cta-px-b { clip-path: polygon(28px 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%, 0 28px); }
  .cta-px-b .cta-px-body { padding-top: 48px; }
}

/* — Сети связи: лид + компетенции, клиенты с таймлайном лет — */
.nw-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 64px; margin-top: clamp(40px, 5vw, 72px); align-items: start; }
.nw-lead p { margin: 0; font-family: var(--font-heading); font-size: 29px; line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; color: var(--dm-ink); max-width: 22ch; text-wrap: pretty; }
.nw-caps { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(0,29,43,.12); }
.nw-caps li { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; padding: 20px 0; border-bottom: 1px solid rgba(0,29,43,.12); max-width: none; margin: 0; }
.nw-cap-t { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dm-ink); padding-top: 3px; align-self: start; }
.nw-cap-t::before { content: ""; flex: none; width: 16px; height: 4px; background: var(--dm-blue); }
.nw-caps p { margin: 0; font-size: 15px; line-height: 1.55; color: color-mix(in srgb, var(--dm-ink) 74%, transparent); max-width: none; }
.nw-clients-head { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(64px, 7vw, 96px); margin-bottom: 16px; align-items: end; }
.nw-cl-t { grid-column: 1 / -1; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #6b7680; }
.nw-axis { display: none; }
.nw-clients { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.nw-client { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 28px; background: #f4f4f4; color: var(--dm-ink);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }
.nw-client:nth-child(2) { background: #f0f1f1; } .nw-client:nth-child(3) { background: #ebecec; }
.nw-logo { height: 104px; display: flex; align-items: center; justify-content: flex-start; margin-bottom: 16px; }
.nw-logo img { width: auto; max-width: 100%; display: block; mix-blend-mode: multiply; }
.nw-client h3 { margin: 0; font-size: 19px; line-height: 1.3; font-weight: 500; }
.nw-years { font-size: 13px; letter-spacing: .04em; color: #6b7680; }
.nw-line { display: grid; grid-template-columns: repeat(17, minmax(0, 1fr)); gap: 3px; margin-top: 16px; }
.nw-line i { height: 10px; background: rgba(0,29,43,.1); }
.nw-line i.on { background: var(--dm-blue); }
.nw-client::after { content: "2006 — 2022"; font-size: 9px; letter-spacing: .12em; color: #9aa4ab; margin-top: 2px; }
@media (max-width: 899px) {
  .nw-grid { grid-template-columns: 1fr; gap: 32px; }
  .nw-lead p { font-size: 23px; max-width: none; }
  .nw-caps li { grid-template-columns: 1fr; gap: 8px; }
  .nw-clients, .nw-clients-head { grid-template-columns: 1fr; }
  .nw-logo { height: 80px; }
}

/* реверс: серая плита и на мобилке */
@media (max-width: 899px) {
  .rv { position: relative; background: #f4f4f4; padding: 56px 20px 24px;
    clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px)); }
  .rv-stage { background: transparent; clip-path: none; }
  .rv .tm-head .sec-title { font-size: 29px; }
}
/* — Компетенции: вкладки производителей — */
.vd { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.vd-list { display: flex; flex-direction: column; gap: 8px; }
.vd-tab { font: inherit; cursor: pointer; text-align: left; border: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2px 16px; align-items: center;
  padding: 18px 22px; background: #f4f4f4; color: var(--dm-ink); transition: background .2s ease, color .2s ease;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.vd-tab:hover { background: #e9ebec; }
.vd-tab.is-on { background: var(--dm-blue); color: #fff; }
.vd-name { font-family: var(--font-display); font-weight: 700; font-size: 23px; line-height: 1.1; letter-spacing: .01em; }
.vd-cat { grid-row: 2; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #6b7680; }
.vd-tab.is-on .vd-cat { color: rgba(255,255,255,.78); }
.vd-cnt { grid-row: 1 / span 2; grid-column: 2; font-family: var(--font-display); font-size: 19px; color: #9aa4ab; }
.vd-tab.is-on .vd-cnt { color: #fff; }
.vd-tab:focus-visible { outline: 2px solid var(--dm-blue); outline-offset: 2px; }
.vd-panels { position: relative; }
.vd-panel { height: 100%; box-sizing: border-box; background: #001D2B; color: #fcfcfc; padding: clamp(32px, 4vw, 56px); display: flex; flex-direction: column; gap: 24px;
  clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 44px 100%, 0 calc(100% - 44px)); }
.vd-panel.is-on { animation: vd-in .35s ease; }
@keyframes vd-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.vd-panel-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.vd-big { font-family: var(--font-display); font-weight: 700; font-size: 56px; line-height: 1; letter-spacing: .01em; }
.vd-panel-head em { font-style: normal; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #4d9bff; border: 1px solid rgba(77,155,255,.5); padding: 4px 8px; }
.vd-panel ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.14); }
.vd-panel li { margin: 0; max-width: none; padding: 16px 0 16px 28px; position: relative; border-bottom: 1px solid rgba(255,255,255,.14); font-size: 15px; line-height: 1.5; color: rgba(252,252,252,.86); }
.vd-panel li::before { content: ""; position: absolute; left: 0; top: 24px; width: 14px; height: 4px; background: var(--dm-blue); }
.vd-note { margin-top: auto; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #9aa4ab; }
@media (max-width: 899px) {
  .vd { grid-template-columns: 1fr; }
  .vd-list { flex-direction: row; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--grid-pad)); padding: 0 var(--grid-pad); }
  .vd-list::-webkit-scrollbar { display: none; }
  .vd-tab { flex: none; min-width: 150px; padding: 14px 16px; }
  .vd-cnt { display: none; }
  .vd-name { font-size: 19px; }
  .vd-big { font-size: 39px; }
  .vd-panel { clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px)); }
}
/* — Типы работ: конвейер, рельса заполняется при появлении, по ней бежит импульс — */
.wk-phases { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.wk-phases span { grid-column: calc(var(--s) + 1) / calc(var(--e) + 1); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #6b7680; padding-bottom: 10px; border-bottom: 1px solid rgba(0,29,43,.2); }
.wk-track { position: relative; margin-top: 20px; }
.wk-rail { position: absolute; left: 0; right: 0; top: 23px; height: 2px; background: rgba(0,29,43,.12); }
.wk-fill { position: absolute; inset: 0; background: var(--dm-blue); transform-origin: 0 50%; transform: scaleX(0); transition: transform 2.6s cubic-bezier(.4,0,.2,1); }
.wk-pulse { position: absolute; top: -3px; left: 0; width: 60px; height: 8px; background: linear-gradient(90deg, transparent, #a9c7ff, transparent); opacity: 0; }
.wk.is-in .wk-fill { transform: scaleX(1); }
.wk.is-in .wk-pulse { animation: wk-pulse 3.2s linear 2.8s infinite; }
@keyframes wk-pulse { 0% { left: -60px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.wk-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 16px; position: relative; }
.wk-step { margin: 0; max-width: none; display: flex; flex-direction: column; gap: 20px; }
.wk-node { width: 48px; height: 48px; display: grid; place-items: center; background: #f4f4f4; color: var(--dm-ink); position: relative; z-index: 1;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); transition: background .3s ease, color .3s ease; transition-delay: calc(var(--i) * .37s); }
.wk-node b { font-family: var(--font-display); font-size: 15px; }
.wk.is-in .wk-node { background: var(--dm-blue); color: #fff; }
.wk-body { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; transition-delay: calc(var(--i) * .37s + .1s); }
.wk.is-in .wk-body { opacity: 1; transform: none; }
.wk-phase { display: none; }
.wk-body h3 { margin: 0 0 10px; font-size: 19px; line-height: 1.25; font-weight: 500; }
.wk-body p { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: color-mix(in srgb, var(--dm-ink) 72%, transparent); max-width: none; }
.wk-body ul { list-style: none; margin: 0; padding: 0; }
.wk-body ul li { margin: 0; padding: 4px 0 4px 14px; position: relative; font-size: 13px; line-height: 1.45; color: color-mix(in srgb, var(--dm-ink) 72%, transparent); max-width: none; }
.wk-body ul li::before { content: ""; position: absolute; left: 0; top: 12px; width: 6px; height: 2px; background: var(--dm-blue); }
@media (prefers-reduced-motion: reduce) { .wk-fill, .wk-node, .wk-body { transition: none; } .wk.is-in .wk-pulse { animation: none; } }
@media (max-width: 899px) {
  .wk-phases { display: none; }
  .wk-rail { left: 23px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .wk-fill { transform-origin: 50% 0; transform: scaleY(0); }
  .wk.is-in .wk-fill { transform: scaleY(1); }
  .wk-pulse { display: none; }
  .wk-list { grid-template-columns: 1fr; gap: 28px; }
  .wk-step { flex-direction: row; gap: 20px; }
  .wk-phase { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dm-blue); margin-bottom: 6px; }
  .wk-node { flex: none; }
  .wk-body p, .wk-body ul li { font-size: 15px; }
}
/* — Опыт: ведомства аккордеоном + корпоративные заказчики списком — */
.pj-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; margin-top: clamp(40px, 5vw, 64px); align-items: start; }
.pj-col-t { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #6b7680; margin-bottom: 16px; }
#projects .acc { margin: 0; border: 0; display: flex; flex-direction: column; gap: 12px; }
#projects .acc details { border: 0; display: flex; flex-direction: column; }
#projects .acc summary { background: var(--dm-plate); padding: 26px 28px; align-items: center; gap: 18px;
  font-size: 19px; line-height: 1.35; color: var(--dm-ink); transition: background .2s ease; }
#projects .acc summary::after { content: none; }
#projects .acc summary:hover { color: var(--dm-ink); background: #ecedee; }
#projects .acc .n { font-size: 13px; color: #6b7680; }
#projects .pm-ico { margin-left: auto; flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: #e3e5e6; position: relative; transition: transform .45s cubic-bezier(.34,1.45,.5,1), background .2s ease; }
#projects .pm-ico::before, #projects .pm-ico::after { content: ""; position: absolute; left: 50%; top: 50%;
  width: 16px; height: 1.5px; margin: -0.75px 0 0 -8px; background: var(--dm-ink); border-radius: 1px; }
#projects .pm-ico::after { transform: rotate(90deg); }
#projects .acc summary:hover .pm-ico { background: #d9dcde; }
#projects .acc details.is-open .pm-ico { transform: rotate(135deg); }
#projects .acc .body { padding: 12px 0 0; overflow: hidden; }
#projects .acc .pm-in { background: var(--dm-plate); padding: 26px 28px; }
#projects .acc .body p { font-size: 15px; line-height: 1.6; max-width: 72ch; }
#projects .acc .body .note { font-size: 13px; color: #6b7680; }
#projects .acc .pm-in p { margin: 0 0 12px; }
#projects .acc .pm-in p:last-child { margin: 0; }
#projects .acc .pm-in b { font-weight: 500; color: var(--dm-ink); }
.pj-corp { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(0,29,43,.12); }
.pj-corp li { margin: 0; max-width: none; padding: 18px 0; border-bottom: 1px solid rgba(0,29,43,.12); display: flex; flex-direction: column; gap: 6px; }
.pj-name { font-family: var(--font-heading); font-size: 19px; font-weight: 500; color: var(--dm-ink); }
.pj-what { font-size: 13px; line-height: 1.5; color: #6b7680; }
@media (max-width: 899px) {
  .pj-grid { grid-template-columns: 1fr; gap: 40px; }
  #projects .acc summary { padding: 20px; font-size: 15px; }
  #projects .acc .pm-in { padding: 20px; }
}

/* логотипы производителей — белым монохромом на тёмной плите */
.vd-panel-head { align-items: center; min-height: 52px; }
.vd-chip { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; background: #fff; min-height: 52px; box-sizing: border-box;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.vd-logo { display: block; width: auto; max-width: 240px; }
.vd-panel { position: relative; isolation: isolate; overflow: hidden; }
.vd-panel > *:not(.vd-bg) { position: relative; z-index: 1; }
.vd-bg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; aspect-ratio: 16 / 9; z-index: 0; opacity: .2; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 55%); mask-image: linear-gradient(180deg, transparent 0, #000 40%); filter: grayscale(.4); }
.vd-panel-head .vd-big { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 899px) {
  .vd-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow: visible; margin: 0; padding: 0; }
  .vd-tab { min-width: 0; padding: 12px 14px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
  .vd-tab:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .vd-name { font-size: 15px; }
  .vd-cat { font-size: 9px; }
  .vd-panel { min-height: 420px; }
}

.pj-logo { flex: none; width: 56px; height: 56px; display: grid; place-items: center; background: #fff; padding: 6px; box-sizing: border-box;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.pj-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.pj-sum { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pj-sum .n { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 899px) { .pj-logo { width: 44px; height: 44px; } }

#projects .acc .pm-in p { position: relative; padding-left: 20px; }
#projects .acc .pm-in p::before { content: "—"; position: absolute; left: 0; top: 0; color: var(--dm-blue); }
.pj-corp li { flex-direction: row; align-items: center; gap: 16px; }
.pj-clogo { flex: none; width: 88px; height: 52px; display: grid; place-items: center; background: #fff; padding: 8px 10px; box-sizing: border-box;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); box-shadow: inset 0 0 0 1px rgba(0,29,43,.08); }
.pj-clogo img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.pj-ctext { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* логотипы в плашках — не резать */
.pj-clogo img, .pj-logo img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
/* — Контакты: синяя плита на всю ширину + белая форма — */
.ct { position: relative; overflow: hidden; background: var(--dm-blue); color: #fff; margin-top: clamp(96px, 10vw, 160px);
  clip-path: polygon(0 44px, 38% 44px, calc(38% + 44px) 0, 100% 0, 100% 100%, 0 100%); }
.ct-deco { position: absolute; inset: 0; pointer-events: none; }
.ct-deco img { position: absolute; height: auto; opacity: .12; }
.ct-code { position: absolute; left: 0; top: 60px; bottom: 0; width: 34%; }
.ct-code pre { color: rgba(255,255,255,.22) !important; }
.ct-code { -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent), linear-gradient(90deg, #000 30%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent), linear-gradient(90deg, #000 30%, transparent); -webkit-mask-composite: source-in; mask-composite: intersect; }
.ct-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 64px; align-items: center; padding-top: clamp(112px, 11vw, 160px) !important; padding-bottom: clamp(88px, 9vw, 128px) !important; }
.ct .kicker { color: #fff; }
.ct-title { margin: 16px 0 0; font-size: 64px; line-height: 1.02; font-weight: 500; letter-spacing: -0.02em; color: #fff; max-width: 12ch; }
.ct-lead { margin: 24px 0 0; font-size: 19px; line-height: 1.45; color: rgba(255,255,255,.86); max-width: 36ch; }
.ct-list { margin: 48px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid rgba(255,255,255,.3); }
.ct-list > div { padding: 20px 24px 20px 0; border-bottom: 1px solid rgba(255,255,255,.3); }
.ct-list dt { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.72); margin: 0 0 8px; }
.ct-list dd { margin: 0; font-size: 15px; line-height: 1.5; color: #fff; }
.ct-list a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.45); transition: border-color .2s ease; }
.ct-list a:hover { color: #fff; border-color: #fff; }
.ct-form { background: #fff; color: var(--dm-ink); padding: 40px; display: flex; flex-direction: column; gap: 22px; box-shadow: 0 30px 60px -30px rgba(0,29,43,.5);
  clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 32px 100%, 0 calc(100% - 32px)); }
.ct-form-t { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #6b7680; display: flex; align-items: center; gap: 10px; }
.ct-form-t::before { content: ""; width: 16px; height: 4px; background: var(--dm-blue); }
.ct-field { display: flex; flex-direction: column; gap: 6px; }
.ct-field span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #6b7680; transition: color .2s ease; }
.ct-field input, .ct-field textarea { font: inherit; font-size: 15px; color: var(--dm-ink); background: transparent; border: 0; border-bottom: 1px solid rgba(0,29,43,.2); padding: 8px 0 10px; border-radius: 0; resize: vertical; transition: border-color .2s ease; }
.ct-field input:focus, .ct-field textarea:focus { outline: none; border-bottom-color: var(--dm-blue); }
.ct-field:focus-within span { color: var(--dm-blue); }
.ct-send { align-self: flex-start; margin-top: 8px; }
@media (max-width: 899px) {
  .ct { clip-path: polygon(0 28px, 40% 28px, calc(40% + 28px) 0, 100% 0, 100% 100%, 0 100%); }
  .ct-grid { grid-template-columns: 1fr; gap: 40px; padding-top: 80px !important; padding-bottom: 56px !important; }
  .ct-title { font-size: 39px; }
  .ct-lead { font-size: 15px; }
  .ct-list { grid-template-columns: 1fr; margin-top: 32px; }
  .ct-form { padding: 28px 22px; }
  .ct-code, .ct-deco img:nth-child(2) { display: none; }
}
/* — Подвал: огромный вордмарк, реквизиты, навигация — */
.ft { position: relative; padding-top: 0; margin-top: -44px; z-index: 2;
  clip-path: polygon(0 0, 56% 0, calc(56% + 44px) 44px, 100% 44px, 100% 100%, 0 100%); }
.ft .wrap { padding-top: 96px; padding-bottom: 32px; }
.ft-top { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.ft-logo img { display: block; height: 40px; width: auto; filter: brightness(0) invert(1); }
.ft-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.ft-nav li { margin: 0; }
.ft-nav a { font-size: 13px; color: #fcfcfc; text-decoration: none; transition: color .15s ease; }
.ft-nav a:hover { color: #4d9bff; }
.ft-mark { margin: 48px 0 40px; }
.ft-mark svg { display: block; width: 100%; height: auto; overflow: visible; }
.ft-mark text { font-family: var(--font-logo); font-weight: 700; fill: #fcfcfc; }
.ft-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding: 32px 0; border-top: 1px solid rgba(255,255,255,.14); }
.ft-info p { margin: 0; font-size: 13px; line-height: 1.6; color: rgba(252,252,252,.72); max-width: none; }
.ft-info a { color: #fcfcfc; text-decoration: none; }
.ft-info a:hover { color: #4d9bff; }
.ft-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); font-size: 11px; letter-spacing: .06em; color: rgba(252,252,252,.5); }
.ft-up { color: rgba(252,252,252,.72); text-decoration: none; }
.ft-up:hover { color: #fff; }
@media (max-width: 899px) {
  .ft { margin-top: -28px; clip-path: polygon(0 0, 50% 0, calc(50% + 28px) 28px, 100% 28px, 100% 100%, 0 100%); }
  .ft .wrap { padding-top: 64px; }
  .ft-top { flex-direction: column; align-items: flex-start; }
  .ft-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .ft-info { grid-template-columns: 1fr; gap: 16px; }
  .ft-mark { margin: 32px 0 24px; }
}

.pj-clogo, .pj-logo { position: relative; display: block; }
.pj-clogo img { position: absolute; top: 8px; left: 10px; width: calc(100% - 20px); height: calc(100% - 16px); object-fit: contain; }
.pj-logo img { position: absolute; top: 6px; left: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; }
.ct-code { top: 40px; bottom: auto; height: 300px; width: 30%; }

.ct { margin-top: 24px; }
.ct-lead { max-width: 54ch; }
.ft { margin-top: -46px; }
.ft .wrap { padding-top: 88px; padding-bottom: 24px; }
.ft-top { align-items: flex-start; }
.ft-nav { display: grid; grid-template-columns: repeat(4, auto); gap: 8px 56px; }
.ft-nav > div { display: flex; flex-direction: column; gap: 8px; }
.ft-nav a { font-size: 13px; color: rgba(252,252,252,.62); text-decoration: none; }
.ft-nav a.ft-main { font-size: 15px; color: #fcfcfc; font-weight: 500; margin-bottom: 4px; }
.ft-nav a:hover { color: #4d9bff; }
.ft-mark { margin: 40px 0 32px; }
.ft-info { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 0; align-items: center; padding: 24px 0 0; border-top: 1px solid rgba(255,255,255,.14); }
.ft-info p { padding: 0 32px; }
.ft-info p:first-child { padding-left: 0; }
.ft-info p + p { border-left: 1px solid rgba(255,255,255,.18); }
.ft-bottom { display: none; }
.ft-up { width: 48px; height: 48px; display: grid; place-items: center; color: #fcfcfc; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.24); transition: background .2s ease, border-color .2s ease; }
.ft-up svg { width: 20px; height: 20px; display: block; }
.ft-up:hover { background: var(--dm-blue); border-color: var(--dm-blue); color: #fff; }
@media (max-width: 899px) {
  .ft { margin-top: -30px; }
  .ft-nav { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .ft-info { grid-template-columns: 1fr; gap: 16px; }
  .ft-info p { padding: 0; border-left: 0 !important; }
  .ft-up { justify-self: start; }
}

.ft-mark { position: relative; margin: 0 0 40px; }
.ft-mark .ft-logo { position: absolute; left: 0; top: 64%; }
.ft-mark .ft-logo img { height: 36px; }
.ft-mark .ft-nav { position: absolute; right: 0; top: 0; }
.ft-info { border-top: 0; padding-top: 0; }
@media (max-width: 899px) {
  .ft-mark { display: flex; flex-direction: column; gap: 24px; }
  .ft-mark .ft-logo, .ft-mark .ft-nav { position: static; }
  .ft-mark .ft-logo { order: -1; }
}

/* подвал: выпадающие подпункты */
.ft-grp { position: relative; }
.ft-tgl { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ft-nav .ft-tgl { font-size: 15px; color: #fcfcfc; font-weight: 500; }
.ft-tgl i { font-style: normal; color: #4d9bff; transition: transform .25s ease; }
.ft-sub { position: absolute; top: calc(100% + 10px); left: -16px; z-index: 3; min-width: 200px; display: flex; flex-direction: column; gap: 10px; padding: 16px;
  background: #0D2836; box-shadow: 0 20px 40px -16px rgba(0,0,0,.5); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease, visibility .2s;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.ft-grp:hover .ft-sub, .ft-grp:focus-within .ft-sub, .ft-grp.is-open .ft-sub { opacity: 1; visibility: visible; transform: none; }
.ft-grp:hover .ft-tgl i, .ft-grp.is-open .ft-tgl i { transform: rotate(45deg); }
.ft-nav > div { gap: 0; }
/* подвал: фоновые шестерни */
.ft { overflow: hidden; }
.ft .wrap { position: relative; z-index: 1; }
.ft-gear { position: absolute; bottom: -18%; width: 420px; height: auto; opacity: .035; pointer-events: none; z-index: 0; }
.ft-gear-a { left: 8%; } .ft-gear-b { right: 12%; }
/* пиксельные иконки */
.px-ico { width: 20px; height: 20px; display: block; flex: none; image-rendering: pixelated; opacity: .8; }
.ft-info p { display: flex; gap: 14px; align-items: flex-start; }
.ft-info .px-ico { margin-top: 2px; }
.ct-list > div { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 14px; }
.ct-list .px-ico { grid-row: 1 / span 2; margin-top: 2px; opacity: 1; }
@media (max-width: 899px) {
  .ft-sub { position: static; opacity: 1; visibility: visible; transform: none; display: none; background: none; box-shadow: none; padding: 10px 0 0; min-width: 0; clip-path: none; }
  .ft-grp.is-open .ft-sub { display: flex; }
  .ft-grp:hover .ft-tgl i { transform: none; } .ft-grp.is-open .ft-tgl i { transform: rotate(45deg); }
  .ft-gear { width: 260px; }
}
.ft-gear { aspect-ratio: 1; bottom: 0; transform: translateY(35%); }

.ft-gear { transform: translateY(48%); }
.ft-mark-m { display: none; }
.ft-mark .ft-nav { top: 28.8%; transform: translateY(-50%); }
.ft-mark { margin-bottom: 72px; }
.ft-info { grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto; }
.ft-dev { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 0 32px; text-decoration: none; }
.ft-dev span { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: rgba(252,252,252,.5); }
.ft-dev img { height: 16px; width: auto; max-width: none; flex: none; display: block; opacity: .85; transition: opacity .2s ease; }
.ft-dev:hover img { opacity: 1; }
@media (max-width: 899px) {
  .ct-deco img:first-child { content: url(assets/shapes/cube.webp); opacity: .1; }
  .ct-list, .ct-list > div { border-color: rgba(255,255,255,.16); }
  .ft-mark { margin-bottom: 32px; gap: 28px; }
  .ft-mark-d { display: none; } .ft-mark-m { display: block; order: 1; width: 100%; height: auto; }
  .ft-mark .ft-nav { position: static; transform: none; order: 0; display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 8px; width: 100%; }
  .ft-nav .ft-tgl, .ft-nav a.ft-main { font-size: 13px; white-space: nowrap; }
  .ft-grp { position: relative; }
  .ft-grp .ft-sub { position: absolute; top: calc(100% + 8px); left: 0; display: flex; opacity: 0; visibility: hidden; background: #0D2836; padding: 14px; min-width: 180px; box-shadow: 0 16px 32px -12px rgba(0,0,0,.5); }
  .ft-grp.is-open .ft-sub { opacity: 1; visibility: visible; }
  .ft-mark .ft-logo { order: 2; }
  .ft-info { position: relative; grid-template-columns: 1fr; gap: 16px; padding-right: 64px; }
  .ft-dev { padding: 8px 0 0; }
  .ft-up { position: absolute; right: 0; top: 0; }
  .ft-gear { width: 260px; opacity: .03; }
  .ft-gear-a { left: auto; right: -110px; top: 34%; bottom: auto; transform: none; }
  .ft-gear-b { left: auto; right: -110px; bottom: 0; transform: translateY(45%); }
}

@media (min-width: 420px) and (max-width: 899px) { .ft-nav .ft-tgl, .ft-nav a.ft-main { font-size: 15px; } }
.ft-mark .ft-mark-m { display: none; }
@media (max-width: 899px) { .ft-mark .ft-mark-d { display: none; } .ft-mark .ft-mark-m { display: block; } }

/* контакты: предупреждение о спам-звонках */
.ct-alert { margin: 32px 0 0; border: 1px solid rgba(255,255,255,.3); background: rgba(0,29,43,.18); max-width: 640px; }
.ct-alert summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 24px minmax(0, 1fr) 16px; align-items: center; column-gap: 14px; padding: 16px 20px; font-size: 15px; font-weight: 500; line-height: 1.35; color: #fff; }
.ct-alert summary::-webkit-details-marker { display: none; }
.ct-alert-ico { width: 24px; height: 24px; display: grid; place-items: center; background: #fff; color: var(--dm-blue); font-style: normal; font-size: 15px; font-weight: 700; line-height: 1; }
.ct-alert-x { position: relative; width: 16px; height: 16px; }
.ct-alert-x::before, .ct-alert-x::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; background: #fff; transition: transform .2s ease; }
.ct-alert-x::after { transform: rotate(90deg); }
.ct-alert[open] .ct-alert-x::after { transform: rotate(0deg); }
.ct-alert-body { padding: 0 20px 20px 58px; display: flex; flex-direction: column; gap: 10px; }
.ct-alert-body p { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.86); }

/* мобилка: единая типографика (по старому сайту) */
@media (max-width: 899px) {
  h2, .sec-title, .ct-title, .band h2, .cta.cta-px h2, .dir-screen .sec-title { font-size: 32px !important; line-height: 1.12 !important; }
  h1, h2, h3, h4, p, li, dt, dd, span, strong, a { -webkit-hyphens: manual !important; hyphens: manual !important; }
  .lx-intro-text .sec-title, .pcb-body .sec-title, .doc-body .sec-title { font-size: 23px !important; line-height: 1.2 !important; }
  .kicker, .tag { font-size: 11px !important; }
  .kicker { display: block; line-height: 1.3; margin-bottom: 0 !important; }
  .kicker + h2, .kicker + .sec-title, .kicker + .ct-title { margin-top: 15px !important; }
  .tm-head, .lx-intro-text, .doc-body, #pcb .pcb-body, #kaytus .pcb-body { gap: 15px !important; }
  .tm-head > .kicker + h2, .lx-intro-text > .kicker + h2, .doc-body > .kicker + h2, .pcb-body > .kicker + h2 { margin-top: 0 !important; }
  p:not(.note), .lead, .ct-lead, .bom-list li, .rnd-list li, .wk-body li, .vd-panel li, .acc .body li { font-size: 15px !important; line-height: 1.35 !important; }
  .ct-alert summary { padding: 14px 16px; }
  .ct-alert-body { padding: 0 16px 16px; }
  /* карточки-ссылки: иконка в потоке над заголовком, а не поверх него */
  .band-links a { min-height: 0 !important; justify-content: flex-start !important; }
  .band-light .band-links .bl-icon, #solutions .band-links .bl-icon { position: static !important; width: 44px; height: 44px; margin: 0 0 24px; }
  .band-links strong { font-size: 23px !important; line-height: 1.2; }
  .band-links span { font-size: 15px !important; line-height: 1.35 !important; margin-top: 9px; }
  /* ритм: внутри раздела — 80px между блоками, между разделами — 120px */
  .sec:not(.hero) { padding-top: 40px !important; padding-bottom: 40px !important; }
  .band-light#products .wrap, .band#solutions .wrap { padding-top: 72px !important; }
  .band-light#products .wrap { padding-bottom: 40px !important; }
  .band#solutions .wrap { padding-bottom: 40px !important; }
  .band-links { margin-top: 32px !important; }
  .sol-schem { margin-top: 80px !important; }
  .cta.cta-px { margin-top: 40px !important; }
  #reverse { margin-top: 40px !important; margin-bottom: 40px !important; }
  .doc-cta { margin: 40px 0 0 !important; }
  .band#solutions { margin-top: 120px !important; }
  .ct { margin-top: 120px !important; }
  /* KAYTUS: фото отдельной полосой сверху, текст на чистом нави */
  #kaytus .pcb-panel { display: flex; flex-direction: column; min-height: 0; }
  #kaytus .pcb-media { position: relative; inset: auto; height: 200px; flex: none; }
  #kaytus .pcb-media::after { background: linear-gradient(180deg, transparent 40%, #001D2B 100%); }
  #kaytus .pcb-glow { display: none; }
  #kaytus .pcb-body { position: relative; z-index: 1; }
  /* Blackwell: цифры спокойнее */
  .lx-figs > div { padding: 16px; gap: 8px; }
  .lx-figs dd { font-size: 19px !important; line-height: 1.2; white-space: nowrap; }
  /* сравнение: легенда отдельной строкой + подсказка свайпа */
  .lx-cmp-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .lx-cmp-head .kicker { white-space: nowrap; }
  .lx-legend { white-space: nowrap; }
  .swipe-hint { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; color: #6b7680; transition: opacity .3s ease; }
  .swipe-hint.is-gone { opacity: 0; }
  .swipe-hint svg { width: 22px; height: 22px; flex: none; color: var(--dm-blue); animation: dm-swipe 1.6s ease-in-out infinite; }
}
@media (max-width: 899px) {
  /* срезанные углы + обводка дают пустоту на срезе — на мобилке без обводки */
  .lx-figs > div, #storage-specs .tabs button, .pj-clogo { box-shadow: none !important; }
  .lx-figs > div { background: color-mix(in srgb, #0D2836 92%, transparent); }
}
@media (max-width: 899px) {
  #kaytus-scale .sec-title { font-size: 29px !important; }
  /* вход линейки и карточки — один смысловой блок */
  #lineup { padding-bottom: 8px !important; }
  #lineup-models { padding-top: 8px !important; }
  #storage { padding-bottom: 20px !important; }
  #storage-specs { padding-top: 20px !important; }
}
@keyframes dm-swipe { 0%, 100% { transform: translateX(6px); } 50% { transform: translateX(-8px); } }
@media (min-width: 900px) { .swipe-hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .swipe-hint svg { animation: none; } }