/* gofra-rf.ru — облик v2 (docs/10-oblik-v2.md §14–17): светлая сцена, стекло, шкала 8, три тени; перенесён из утверждённого
   прототипа prototipy/v2-glavnaya.html 31.10.2026. С 31.10 все страницы сайта на раскладке makety/sayt-v2 (§20); прежние
   chertezh.css / chertezh.js / makety/sayt удалены (история — git, коммит 80e4fc0 и раньше). Кабинет заявок — dizayn-sistema.css.

   Onest — вариативный, ось веса 400–700 (дисплей 650/700, тело 400), поднаборы как у Google; собран из Onest[wght].ttf (OFL,
   public/fonts/OFL.txt). Метка ?v= — первые 8 знаков md5 файла; preload раскладки считает её сам, SaytTest сверяет. */
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/onest-v2-cyrillic.woff2?v=ee6d5185) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/onest-v2-latin.woff2?v=304f1d03) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/onest-v2-math.woff2?v=ccd4a60f) format("woff2"); unicode-range: U+2190, U+2192, U+2194-21AE, U+2200-22FF; }
/* «Onest zapas» — системный шрифт, подогнанный под метрики Onest, пока Onest грузится (font-display: swap): без него строки h1
   при подмене шрифта переносятся иначе и страница прыгает — стенд 31.10, CLS 0,053 от третьей строки h1. Числа сняты fontTools
   по тексту героя (кириллица): ширина Onest 400 / Arial = 103,1 %, Onest 650 / Arial Bold = 98,8 % — по одному h1 подстроено
   до 99,8 % (замер в Chrome: h1 −1,0 % → см. журнал); ascent .970, descent .305 Onest, делённые на size-adjust. На Android Arial нет — берётся Roboto (ширины близки, метрики подогнаны под Arial). */
@font-face { font-family: "Onest zapas"; font-weight: 400 549; src: local("Arial"), local("ArialMT"), local("Roboto"), local("Helvetica Neue");
  size-adjust: 103.1%; ascent-override: 94%; descent-override: 29.6%; line-gap-override: 0%; }
@font-face { font-family: "Onest zapas"; font-weight: 550 900; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Helvetica Neue Bold");
  size-adjust: 99.8%; ascent-override: 97.2%; descent-override: 30.6%; line-gap-override: 0%; }
/* tokeny:nachalo — собрано из resources/design/tokeny.json командой `php artisan dizayn:tokeny`, руками не править */
/* версия токенов 2 · v1 утверждена владельцем 31.10.2026; v2 (31.10) — запасной шрифт под метрики Onest, техническое */
:root {
  --list: #ffffff;
  --pole: #f1f3f4;
  --pole-2: #e7eaed;
  --steklo: rgba(255,255,255,.66);
  --steklo-kray: rgba(255,255,255,.85);
  --temn-1: #1f2328;
  --temn-1-niz: #121518;
  --temn-2: #16293b;
  --temn-2-verh: #284b69;
  --tekst: #1f2328;
  --tekst-2: #4a535b;
  --stal-tekst: #5e6c77;
  --na-temnom: #f4f5f6;
  --na-temnom-2: #a9b3bb;
  --na-sinke-2: #9db8cf;
  --linia: #dde1e5;
  --stal: #6b7a86;
  --linia-sinka: #dbe6f0;
  --akcent: #e25303;
  --akcent-knopka: #c44802;
  --akcent-temn: #b84302;
  --akcent-svet: #f0731f;
  --akcent-fon: #fdeee6;
  --akcent-tekst: #6b2a06;
  --oshibka: #b3261e;
  --oshibka-fon: #fdecea;
  --uspeh: #2f7d4f;
  --vnimanie: #9a6a12;
  --shrift: "Onest", "Onest zapas", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-displey: clamp(2.25rem, 1.4rem + 2.6vw, 3.625rem);
  --t-h1: clamp(2.125rem, 1.4rem + 2.2vw, 3.25rem);
  --t-h2: clamp(2rem, 1.3rem + 2.2vw, 3.25rem);
  --t-h3: clamp(1.125rem, 1rem + .4vw, 1.375rem);
  --t-vvodka: clamp(1.0625rem, .95rem + .45vw, 1.25rem);
  --t-telo: 1.0625rem;
  --t-podpis: 0.875rem;
  --t-metka: 0.8125rem;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --s10: 128px;
  --u-upr: 12px;
  --u-kart: 20px;
  --u-scena: 28px;
  --ten-1: 0 1px 2px rgba(18,21,24,.06), 0 2px 8px rgba(18,21,24,.04);
  --ten-2: 0 1px 2px rgba(18,21,24,.06), 0 12px 32px -8px rgba(18,21,24,.18);
  --ten-3: 0 2px 4px rgba(18,21,24,.06), 0 32px 64px -24px rgba(18,21,24,.30);
  --e-vyhod: cubic-bezier(.2,.7,.2,1);
  --d-1: .18s;
  --d-2: .32s;
  --shirina: 1328px;
  --pole-kraya: clamp(16px, 2.2vw, 32px);
  --chtenie: 68ch;
  --ten-akcent: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(150,50,0,.3), 0 10px 24px -10px rgba(226,83,3,.65);
  --vys-shapki: 64px;
}
@media (min-width: 1100px) { :root { --vys-shapki: 104px; } }
/* tokeny:konec */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 120px; }
body { margin: 0; font-family: var(--shrift); font-size: 17px; line-height: 1.55; color: var(--tekst); background: var(--list); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; border-radius: 6px; }
.kont { max-width: var(--shirina); margin-inline: auto; padding-inline: var(--pole-kraya); }
/* скрытое, но доступное: !important — иначе .pole input { width: 100% } растягивает поле файла на всю ширину и даёт горизонтальную прокрутку */
.skryt { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── знак v2: плашка-скруглённый квадрат графита, гармошка RAL 2004 между двумя фланцами ── */
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tekst); flex: none; }
.logo__znak { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 4px 10px rgba(18,21,24,.18)); }
.logo__slova { display: grid; line-height: 1.05; }
.logo__imya { font-weight: 700; font-size: 19px; letter-spacing: -.025em; }
.logo__imya span { color: var(--akcent-knopka); }
.logo__deviz { margin-top: 4px; font-size: 11.5px; font-weight: 500; color: var(--stal-tekst); letter-spacing: .005em; white-space: nowrap; }
@media (max-width: 420px) { .logo__deviz { display: none; } .logo__znak { width: 36px; height: 36px; } }

/* ── шапка: стекло, на широком экране два уровня ── */
.shapka { position: sticky; top: 0; z-index: 20; padding-top: var(--s3); }
.shapka__panel { background: rgba(255,255,255,.7); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--steklo-kray); border-radius: 20px; box-shadow: var(--ten-1); transition: box-shadow var(--d-2), background var(--d-2); }
.shapka.prokrucheno .shapka__panel { background: rgba(255,255,255,.88); box-shadow: var(--ten-2); }
.shapka__verh { display: none; }
.shapka__ryad { display: flex; align-items: center; gap: var(--s3); height: 64px; padding: 0 var(--s2) 0 var(--s3); }
@media (min-width: 1100px) { .shapka__ryad { gap: var(--s5); padding: 0 var(--s3) 0 var(--s4); } }
.menyu { display: none; gap: 2px; margin-left: auto; }
.menyu a { padding: 8px 12px; border-radius: 10px; font-size: 15px; font-weight: 500; text-decoration: none; color: var(--tekst-2); transition: background var(--d-1), color var(--d-1); }
.menyu a:hover { background: rgba(31,35,40,.06); color: var(--tekst); }
/* телефон на узкой шапке — парой строк, как знак: номер жирно, под ним мелко и серо почта (владелец 31.10) */
.shapka__tel-mob { margin-left: auto; display: grid; justify-items: end; line-height: 1.05; white-space: nowrap; }
.shapka__tel-mob a { text-decoration: none; }
/* каждая ссылка — цель касания ≥ 24 px (WCAG 2.5.8): строки текста стоят ближе, чем их цели, — поля ссылок, а не отступ */
.shapka__tel-mob a:first-child { padding: 4px 0; font-size: 15px; line-height: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--tekst); font-variant-numeric: tabular-nums; }
.shapka__tel-mob a:last-child { padding: 6px 0; font-size: 11.5px; line-height: 12px; font-weight: 500; color: var(--stal-tekst); letter-spacing: .005em; }
/* 360–380: знак, имя, номер и бургер не влезали в ряд (переливало на ~40 px и на проде до 31.10) */
@media (max-width: 380px) {
  .shapka__ryad { gap: var(--s2); }
  .logo { gap: 8px; } .logo__znak { width: 32px; height: 32px; } .logo__imya { font-size: 17px; }
  .shapka__tel-mob a:first-child { font-size: 14px; } .burger { width: 40px; height: 40px; }
}
.burger { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 12px; background: rgba(31,35,40,.06); color: var(--tekst); flex: none; }
.shapka .shapka__knopka { display: none; }
@media (min-width: 1100px) {
  .shapka__verh { display: flex; align-items: center; gap: var(--s5); height: 36px; padding: 0 var(--s4) 0 calc(var(--s4) + 52px);
    font-size: 13px; color: var(--stal-tekst); border-bottom: 1px solid rgba(31,35,40,.07); }
  .shapka__verh a { text-decoration: none; color: var(--tekst-2); font-weight: 500; }
  .shapka__verh a:hover { color: var(--tekst); }
  .shapka__verh-pravo { margin-left: auto; display: flex; gap: var(--s5); align-items: center; }
  .shapka__verh-pravo b { color: var(--tekst); font-weight: 650; font-size: 14px; font-variant-numeric: tabular-nums; }
  .menyu { display: flex; } .shapka__tel-mob, .burger { display: none; }
  .shapka .shapka__knopka { display: inline-flex; }
}

/* ── кнопки ── */
.knopka { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: var(--u-upr);
  font: 600 16px/1 var(--shrift); text-decoration: none; border: 0; cursor: pointer; white-space: nowrap;
  transition: transform var(--d-1) var(--e-vyhod), box-shadow var(--d-2) var(--e-vyhod), background var(--d-2), opacity var(--d-2); }
.knopka--akcent { color: #fff; background: linear-gradient(180deg, #d4500a 0%, var(--akcent-knopka) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(150,50,0,.3), 0 10px 24px -10px rgba(226,83,3,.65); }
.knopka--akcent:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 2px 4px rgba(150,50,0,.3), 0 16px 32px -12px rgba(226,83,3,.75); }
.knopka--akcent svg { transition: transform var(--d-2) var(--e-vyhod); }
.knopka--akcent:hover svg { transform: translateX(3px); }
.knopka--akcent[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.knopka--malaya { min-height: 42px; padding: 0 18px; font-size: 15px; border-radius: 11px; }
.knopka--steklo { color: var(--tekst); background: rgba(255,255,255,.62); border: 1px solid rgba(31,35,40,.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.knopka--steklo:hover { background: #fff; }

/* ── сцена героя ── */
.scena { position: relative; isolation: isolate; overflow: clip; display: grid; background: var(--pole); color: var(--tekst);
  margin: calc(-1 * var(--vys-shapki) - var(--s3)) var(--pole-kraya) 0; border-radius: 0 0 var(--u-scena) var(--u-scena); }
@media (min-width: 1100px) { .scena { margin-inline: auto; max-width: calc(var(--shirina) + 2 * var(--s4)); border-radius: var(--u-scena); margin-top: calc(-1 * var(--vys-shapki) - var(--s3) - 12px); } }

/* h1: третья строка — размер, и он показан размерной линией чертежа: выносные засечки + линия RAL 2004, вычерчивается после текста */
.geroy h1 { margin: 0; font-size: var(--t-displey); line-height: 1.02; letter-spacing: -.038em; font-weight: 650; }
.geroy h1 .stroka { display: block; overflow: clip; padding-bottom: .06em; margin-bottom: -.06em; }
.geroy h1 .stroka > span { display: inline-block; }
.geroy h1 .stroka--razmer { padding-bottom: .34em; margin-bottom: -.2em; }
.geroy h1 .stroka--razmer > span { position: relative; }
.geroy h1 .stroka--razmer > span::after { content: ""; position: absolute; left: 0; right: .02em; bottom: -.24em; height: .26em;
  border-inline: 2px solid var(--akcent); background: linear-gradient(var(--akcent), var(--akcent)) center / 100% 2px no-repeat; }
.geroy__vvodka { margin: var(--s5) 0 0; font-size: var(--t-vvodka); line-height: 1.5; max-width: 34em; color: var(--tekst-2); }
.geroy__deystviya { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s6); }

/* факты — компактная строка под кнопками, без собственной плашки */
.fakty { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); margin: var(--s6) 0 0; padding: 0; list-style: none; }
.fakty li { display: flex; align-items: baseline; gap: 8px; font-size: 14px; color: var(--stal-tekst); line-height: 1.3; }
.fakty li + li { padding-left: var(--s5); border-left: 1px solid rgba(31,35,40,.14); }
.fakty b { font-size: 17px; font-weight: 650; color: var(--tekst); letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 600px) { .fakty { display: grid; grid-template-columns: 1fr 1fr; } .fakty li + li { padding-left: 0; border-left: 0; } .fakty li { display: grid; gap: 2px; } }

/* ── герой главной: вариант C «Оглавление изделий» (этап 3, раунд 1; выбор владельца 31.10) ──
   Четыре изделия списком между текстом и кадром; список переключает кадр и карточку «Три размера»; автосмена ~6 с с паузой,
   при prefers-reduced-motion — только вручную; на телефоне — кадр сверху, метки-переключатель. Перенесено из прототипа
   Дизайн/etap-3/01-geroy/00-build/C (Codex) компонентами на токенах; разметка — stranicy/glavnaya, скрипт — oblik-v2.js «герой: оглавление». */
.ogl { --ogl-hod: 0; min-width: 0; }
.ogl *, .ogl *::before, .ogl *::after { box-sizing: border-box; }
.ogl .ogl__set { position: relative; display: grid; gap: var(--s6); padding: 180px var(--s7) var(--s6); }
.ogl .ogl__tekst { min-width: 0; }
.ogl h1 { font-size: var(--t-displey); }
.ogl .geroy__vvodka { max-width: 35em; color: var(--tekst-2); }
.ogl .geroy__deystviya { gap: var(--s3); }
.ogl .knopka--akcent { background: linear-gradient(var(--akcent-knopka),var(--akcent-temn)); color: var(--list); box-shadow: var(--ten-akcent); }
.ogl .knopka--steklo { border: 1px solid color-mix(in srgb,var(--tekst) 12%,transparent); background: color-mix(in srgb,var(--list) 62%,transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--tekst); }
.ogl .knopka--steklo:hover { background: var(--list); }
.ogl .ogl__kadry { position: absolute; inset: 0; overflow: hidden; background: var(--pole); }
.ogl .ogl__kadr { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--e-vyhod); pointer-events: none; }
.ogl .ogl__kadr.akt { opacity: 1; }
.ogl .ogl__kadr picture { display: block; width: 100%; height: 100%; }
.ogl .ogl__kadr img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 72% 45%; }
.ogl .ogl__kadr.ogl__kadr--studiya { background: radial-gradient(ellipse at 78% 38%,var(--list),var(--pole) 60%,var(--pole-2)); }
.ogl .ogl__kadr--studiya img { object-fit: contain; object-position: right center; width: 64%; margin-left: auto; mask-image: radial-gradient(ellipse at center,var(--tekst) 40%,transparent 74%); }
.ogl .ogl__metka { position: absolute; right: var(--s6); top: 146px; padding: var(--s1) var(--s2); border-radius: var(--u-upr); background: var(--steklo-kray); color: var(--tekst-2); font-size: var(--t-metka); }
.ogl .ogl__kartochka { position: relative; min-width: 0; padding: var(--s5); border-radius: var(--u-kart); background: linear-gradient(135deg,color-mix(in srgb,var(--list) 94%,transparent),color-mix(in srgb,var(--pole) 92%,transparent)); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: var(--ten-3),inset 0 1px 0 var(--steklo-kray); }
.ogl .ogl__kartochka-verh { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.ogl .ogl__kartochka-verh h2 { margin: 0; font-size: var(--t-telo); font-weight: 600; letter-spacing: -.025em; }
.ogl .ogl__kartochka-verh output { white-space: nowrap; font-size: var(--t-podpis); color: var(--akcent-temn); font-weight: 600; font-variant-numeric: tabular-nums; }
.ogl .ogl__chertezhi { position: relative; height: 256px; margin-top: var(--s4); }
.ogl .ogl__chertezh { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s var(--e-vyhod),visibility .5s; }
.ogl .ogl__chertezh.akt { opacity: 1; visibility: visible; }
.ogl .ogl__ris { display: block; width: 100%; height: 137px; overflow: visible; color: var(--tekst-2); }
.ogl .ogl__ris text { fill: var(--tekst-2); font: 500 14px var(--shrift); }
.ogl .ogl__ris .ogl-L { fill: var(--akcent-temn); }
.ogl .ogl__ris .ogl-podp { font-size: var(--t-metka); }
.ogl .ogl-rels { stroke: var(--linia); stroke-width: 3; }
.ogl .ogl-flanec { fill: url(#ogl-metall); }
.ogl .ogl-ruchka { fill: none; stroke: var(--stal-tekst); stroke-width: 1; }
.ogl .ogl-karetka { cursor: ew-resize; touch-action: none; }
.ogl .ogl-razmer { stroke: var(--akcent); stroke-width: 1.5; fill: none; }
.ogl .ogl-sechenie { stroke: var(--tekst-2); stroke-width: 2; fill: none; }
.ogl .ogl-os { fill: none; stroke: var(--stal); stroke-dasharray: 5 5; stroke-width: .6; }
.ogl .ogl-mera { fill: none; stroke: var(--stal); stroke-width: 1; }
.ogl .ogl__polzunok { margin-top: var(--s2); }
.ogl input[type=range] { display: block; width: 100%; height: 28px; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: ew-resize; }
.ogl input[type=range]::-webkit-slider-runnable-track { height: 3px; border-radius: var(--u-upr); background: linear-gradient(90deg,var(--akcent) var(--range,50%),var(--linia) var(--range,50%)); }
.ogl input[type=range]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border: 4px solid var(--list); border-radius: 50%; background: var(--akcent-knopka); box-shadow: var(--ten-2),0 0 0 1px var(--linia); }
.ogl input[type=range]::-moz-range-track { height: 3px; background: var(--linia); }
.ogl input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border: 4px solid var(--list); border-radius: 50%; background: var(--akcent-knopka); }
.ogl .ogl__predely { display: flex; justify-content: space-between; font-size: var(--t-metka); color: var(--tekst-2); }
.ogl .ogl__spisok { display: flex; gap: var(--s2); margin-top: var(--s5); }
.ogl .ogl__punkt { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--s1); padding: var(--s2) 0; border: 0; background: transparent; color: var(--tekst-2); font: 400 var(--t-metka)/1.3 var(--shrift); cursor: pointer; text-align: left; }
.ogl .ogl__punkt svg { width: 27px; height: 25px; }
.ogl .ogl__punkt[aria-pressed=true] { color: var(--tekst); font-weight: 600; }
.ogl .ogl__punkt:hover { background: var(--steklo); border-radius: var(--u-upr); }
.ogl .ogl__punkt-tekst { width: 100%; }
.ogl .ogl__imya { display: block; text-align: center; }
.ogl .ogl__hod { display: block; height: 2px; margin-top: var(--s2); background: var(--linia); overflow: hidden; }
.ogl .ogl__hod i { display: block; height: 100%; background: var(--akcent); transform: scaleX(0); transform-origin: left; }
.ogl .ogl__punkt[aria-pressed=true] .ogl__hod i { transform: scaleX(var(--ogl-hod)); }
.ogl.stop .ogl__punkt[aria-pressed=true] .ogl__hod i { transform: scaleX(1); }
.ogl .ogl__pult { display: flex; justify-content: space-between; align-items: center; height: 36px; margin-top: var(--s2); color: var(--tekst-2); font-size: var(--t-metka); }
.ogl .ogl__pauza { min-width: 100px; min-height: 32px; padding: var(--s1) var(--s2); font: 500 var(--t-metka) var(--shrift); color: var(--tekst); border: 0; border-radius: var(--u-upr); background: var(--pole-2); cursor: pointer; }
.ogl .ogl__pauza:hover { background: var(--linia); }
.ogl .ogl__kartochka-niz { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--linia); color: var(--tekst-2); font-size: var(--t-metka); }
.ogl .ogl__kartochka-niz a { min-height: 28px; display: inline-flex; align-items: center; white-space: nowrap; text-decoration: none; font-weight: 600; color: var(--tekst); }
.ogl .fakty { margin: 0; gap: var(--s6); }
.ogl .fakty li { color: var(--tekst-2); font-size: var(--t-metka); }
.ogl .fakty li+li { border-color: var(--linia); padding-left: var(--s6); }
.ogl .fakty b { font-size: var(--t-telo); }
/* A: единая широкая сцена, низкая стеклянная панель справа. */
/* B: спокойный дальний план, предмет и чертёж в одной высокой витрине. */
/* C: оглавление — связующее звено между обещанием и узлом. */
.ogl .ogl__set { grid-template-columns: minmax(0,1.5fr) minmax(0,.78fr) minmax(0,1.05fr); grid-template-rows: 1fr auto; gap: var(--s5); min-height: 790px; padding-inline: var(--s6); }
.ogl h1 { font-size: 43px; }
.ogl .geroy__vvodka { font-size: var(--t-telo); }
.ogl .geroy__deystviya { flex-direction: column; align-items: flex-start; gap: var(--s1); }
.ogl .ogl__tekst { align-self: center; }
.ogl .ogl__ukaz { align-self: center; }
.ogl .ogl__spisok { flex-direction: column; gap: 0; margin-top: 0; }
.ogl .ogl__punkt { flex-direction: row; align-items: flex-start; gap: var(--s2); padding: var(--s4) 0; }
.ogl .ogl__punkt svg { width: 25px; height: 25px; flex: none; margin-top: 1px; }
.ogl .ogl__imya { text-align: left; font-size: var(--t-podpis); line-height: 1.35; font-weight: 600; }
.ogl .ogl__opis { display: block; font-size: var(--t-metka); line-height: 1.4; margin-top: var(--s2); font-weight: 400; }
.ogl .ogl__punkt:not([aria-pressed=true]) .ogl__hod { background: transparent; }
.ogl .ogl__scena { position: relative; min-height: 530px; border-radius: var(--u-kart); background: var(--pole-2); overflow: hidden; grid-column: 3; grid-row: 1 / 3; }
.ogl .ogl__kadry { bottom: 180px; }
.ogl .ogl__kadry::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,var(--pole),transparent 55%); pointer-events: none; }
.ogl .ogl__kadr img { object-position: 70% center; }
.ogl .ogl__kadr--studiya img { width: 100%; object-position: center; }
.ogl .ogl__metka { top: var(--s4); right: var(--s4); }
.ogl .ogl__kartochka { position: absolute; left: var(--s3); right: var(--s3); bottom: var(--s3); padding: var(--s4); border-radius: var(--u-upr); }
.ogl .ogl__kartochka-verh { align-items: flex-start; flex-direction: column; gap: var(--s1); }
.ogl .ogl__chertezhi { height: 112px; margin-top: var(--s2); }
.ogl .ogl__ris { height: 112px; }
.ogl .ogl__kartochka-niz { flex-direction: column; align-items: flex-start; gap: var(--s1); }
.ogl .ogl__kartochka-niz br { display: none; }
.ogl .fakty { grid-column: 1 / 3; gap: var(--s5); }
.ogl .fakty li { display: grid; gap: var(--s1); }
.ogl .fakty li+li { padding-left: var(--s5); }
/* Один вход; никакого непрерывного плавания, масштабирования или качания. */
@media (max-width:1100px) {
 .ogl .ogl__set { grid-template-columns: minmax(0,1fr) 360px; padding-inline: var(--s5); gap: var(--s5); }
 .ogl h1 { font-size: 43px; }
 .ogl .ogl__set { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); }
 .ogl .ogl__ukaz { grid-column: 1; grid-row: 2; }
 .ogl .ogl__scena { grid-column: 2; grid-row: 1 / 3; }
 .ogl .fakty { grid-row: 3; }
}
@media (max-width:1099px) {
 .ogl .ogl__set { display: flex; flex-direction: column; padding: 114px var(--s5) var(--s6); gap: var(--s5); min-height: 0; }
 .ogl .ogl__tekst,.ogl .ogl__kartochka,.ogl .ogl__ukaz,.ogl .ogl__scena { width: 100%; align-self: auto; }
 .ogl h1 { font-size: var(--t-displey); line-height: 1.04; }
 .ogl .geroy__vvodka { font-size: var(--t-telo); line-height: 1.5; margin-top: var(--s5); }
 .ogl .geroy__deystviya { margin-top: var(--s5); gap: var(--s2); }
 .ogl .ogl__kadry { bottom: auto; height: 290px; }
 .ogl .ogl__metka { top: 83px; right: var(--s5); font-size: var(--t-metka); }
 .ogl .ogl__kartochka { padding: var(--s5); }
 .ogl .ogl__chertezhi { height: 247px; }
 .ogl .fakty { display: flex; flex-wrap: wrap; gap: var(--s4); width: 100%; }
 .ogl .fakty li { flex: 1; min-width: 90px; border: 0; padding: 0; }
 .ogl .fakty li+li { padding: 0; }
 .ogl .ogl__ukaz { order: 2; }
 .ogl .ogl__scena { order: 3; height: 510px; min-height: 510px; }
 .ogl .ogl__tekst { order: 1; }
 .ogl .fakty { order: 4; }
 .ogl .ogl__spisok { margin: 0; }
 .ogl .ogl__punkt { padding: var(--s3) 0; }
 .ogl .ogl__opis { margin-top: var(--s1); }
 .ogl .ogl__kartochka { width: auto; padding: var(--s4); }
 .ogl .ogl__chertezhi { height: 112px; }
 .ogl .ogl__ris { height: 112px; }
 .ogl .ogl__kadry { height: 290px; }
 .ogl .ogl__metka { top: var(--s4); right: var(--s4); }
 .ogl .ogl__kartochka-verh { flex-direction: row; align-items: baseline; }
 .ogl .geroy__deystviya { align-items: stretch; }
}
@media (max-width:600px) {
 .ogl .ogl__set { padding-inline: var(--s4); padding-top: 110px; gap: var(--s5); }
 .ogl .geroy__deystviya { display: grid; }
 .ogl .geroy__deystviya .knopka { padding-inline: var(--s3); font-size: var(--t-podpis); min-height: 48px; }
 .ogl .ogl__kartochka { padding: var(--s4); }
 .ogl .ogl__kartochka-verh { flex-direction: column; gap: var(--s1); }
 .ogl .ogl__kartochka-verh h2 { font-size: var(--t-telo); }
 .ogl .ogl__chertezhi { height: 241px; }
 .ogl .ogl__ris { height: 111px; }
 .ogl .ogl__punkt { font-size: var(--t-metka); }
 .ogl .ogl__spisok { gap: var(--s1); margin-top: var(--s4); }
 .ogl .ogl__kartochka-niz { gap: var(--s2); font-size: var(--t-metka); }
 .ogl .fakty { gap: var(--s3); }
 .ogl .fakty li { font-size: var(--t-metka); }
 .ogl .ogl__spisok { margin-top: 0; }
 .ogl .ogl__chertezhi { height: 112px; }
 .ogl .ogl__kartochka-niz { flex-direction: row; align-items: center; }
 .ogl .ogl__kartochka-niz br { display: block; }
}
@media (prefers-reduced-motion:reduce) {
 .ogl *,.ogl *::before,.ogl *::after { animation: none !important; transition: none !important; }
}
/* Компактное управление: сечение уже видно на чертеже, повторять четыре пиктограммы не нужно. */

/* Приёмка 31.10: на телефоне кадр наверху, оглавление — компактный переключатель. */
.ogl .ogl__korotko { display: none; }
@media (max-width:1099px) {
 .ogl .ogl__set { padding-top: calc(var(--vys-shapki) + var(--s3) + 290px + var(--s5)); }
 .ogl .ogl__scena { display: contents; }
 .ogl .ogl__kadry {
  top: calc(var(--vys-shapki) + var(--s3)); bottom: auto; height: calc(290px + var(--s5));
 }
 .ogl .ogl__kadry::after { top: 290px; background: linear-gradient(180deg,transparent,var(--pole)); }
 .ogl .ogl__kadr--studiya img { width: 100%; height: 100%; object-fit: contain; object-position: center; mask-image: none; }
 .ogl .ogl__metka { top: calc(var(--vys-shapki) + var(--s3) + var(--s3)); }
 .ogl .ogl__kartochka { position: relative; inset: auto; order: 3; width: 100%; }
 .ogl .ogl__ukaz { order: 2; }
 .ogl .ogl__spisok { position: relative; flex-direction: row; gap: var(--s1); padding-bottom: 88px; }
 .ogl .ogl__punkt { position: static; flex-direction: column; align-items: center; gap: var(--s1); padding: var(--s2) 0; }
 .ogl .ogl__imya { display: none; }
 .ogl .ogl__korotko { display: block; text-align: center; font-size: var(--t-metka); line-height: 1.3; }
 .ogl .ogl__opis { display: none; position: absolute; left: 0; right: 0; top: 80px; margin: 0; color: var(--tekst-2); }
 .ogl .ogl__punkt[aria-pressed="true"] .ogl__opis { display: block; }
}

/* ── калькулятор: лист-карточка, поля слева, чертёж и штамп справа ── */
.kalk__zamer { display: block; margin-top: var(--s2); font-size: 15px; }
.kalk-sek { padding: clamp(56px, 7vw, 96px) 0 0; }
.kalk { display: grid; border-radius: var(--u-scena); background: var(--list); box-shadow: inset 0 0 0 1px rgba(31,35,40,.07), var(--ten-3); overflow: clip; }
@media (min-width: 1000px) { .kalk { grid-template-columns: 380px minmax(0, 1fr); } }
.kalk__polya { display: grid; gap: var(--s4); align-content: start; padding: var(--s5); background: linear-gradient(180deg, #f6f7f8, #f1f3f4); border-bottom: 1px solid var(--linia); }
@media (min-width: 1000px) { .kalk__polya { padding: var(--s6); border-bottom: 0; border-right: 1px solid var(--linia); } }
.kalk legend, .pole label { display: block; font-size: 13px; font-weight: 500; color: var(--stal-tekst); margin-bottom: 6px; padding: 0; }
.kalk fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.formy { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 4px; border-radius: 14px; background: rgba(31,35,40,.06); }
.formy input { position: absolute; opacity: 0; pointer-events: none; }
.formy label { display: grid; justify-items: center; gap: 4px; padding: 10px 2px 8px; border-radius: 10px; font-size: 11.5px; font-weight: 500; color: var(--tekst-2); text-align: center; line-height: 1.15; cursor: pointer;
  transition: background var(--d-1), color var(--d-1), box-shadow var(--d-1); }
.formy label svg { width: 26px; height: 22px; }
.formy label:hover { background: rgba(255,255,255,.6); }
.formy input:checked + label { background: #fff; color: var(--tekst); box-shadow: var(--ten-1); }
.formy input:checked + label svg { color: var(--akcent); }
.formy input:focus-visible + label { outline: 2px solid var(--akcent); outline-offset: 1px; }
.ryad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.ryad--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ryad--1 { display: grid; gap: var(--s4); }
.pole input, .pole select { width: 100%; height: 48px; padding: 0 14px; border-radius: var(--u-upr); border: 1px solid rgba(31,35,40,.14); background: #fff;
  font: 500 16px/1 var(--shrift); color: var(--tekst); font-variant-numeric: tabular-nums; transition: border-color var(--d-1), box-shadow var(--d-1); appearance: none; -moz-appearance: textfield; }
.pole input::-webkit-inner-spin-button, .pole input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pole select { padding-right: 38px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235e6c77' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center no-repeat; cursor: pointer; }
.pole input:hover, .pole select:hover { border-color: rgba(31,35,40,.28); }
.pole input:focus, .pole select:focus { outline: none; border-color: var(--akcent); box-shadow: 0 0 0 4px rgba(226,83,3,.14); }
.pole input[aria-invalid="true"] { border-color: #b3261e; box-shadow: 0 0 0 4px rgba(179,38,30,.12); }
.kalk__list { display: grid; grid-template-rows: auto auto auto; min-width: 0; }
.kalk__chertezh { position: relative; padding: var(--s5); border-bottom: 1px solid var(--linia);
  background: radial-gradient(80% 90% at 40% 40%, #fff 0%, #f7f8f9 100%); }
.kalk__chertezh::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: linear-gradient(rgba(107,122,134,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(107,122,134,.09) 1px, transparent 1px); background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000 40%, transparent 100%); mask-image: radial-gradient(80% 80% at 50% 50%, #000 40%, transparent 100%); }
.kalk__chertezh svg { position: relative; display: block; width: 100%; height: auto; }
.ch-t { font: 500 13px var(--shrift); fill: var(--tekst); font-variant-numeric: tabular-nums; }
.ch-t--akt { fill: var(--akcent-knopka); font-weight: 650; }
.ch-t--podp { font-size: 12px; fill: var(--stal-tekst); }
/* на телефоне чертёж 760 ед. ужимается до ~350 px — подписи в единицах чертежа крупнее, чтобы на экране было ≥ 11 px */
@media (max-width: 699px) { .kalk__chertezh { padding: var(--s3) var(--s2); } .ch-t { font-size: 24px; } .ch-t--podp { font-size: 22px; } }
.shtamp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
@media (min-width: 700px) { .shtamp { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.shtamp > div { padding: 14px var(--s5); border-right: 1px solid var(--linia); border-bottom: 1px solid var(--linia); min-width: 0; }
.shtamp dt { font-size: 12.5px; color: var(--stal-tekst); line-height: 1.3; }
.shtamp dd { margin: 3px 0 0; font-size: 15px; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; transition: color .4s; }
.shtamp dd.obnovleno { color: var(--akcent-knopka); transition: none; }
.shtamp__imya { grid-column: 1 / -1; }
@media (min-width: 700px) { .shtamp__imya { grid-column: span 2; } }
.shtamp__imya dd { font-size: 20px; font-weight: 650; letter-spacing: -.015em; }
.shtamp__srok dd { color: var(--tekst); }
.kalk__itog { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s5); padding: var(--s5); background: linear-gradient(180deg, #fff, #fafbfb); }
.kalk__itog p { margin: 0; flex: 1 1 260px; font-size: 14px; color: var(--stal-tekst); line-height: 1.45; }
.kalk__itog p.oshibka { color: #b3261e; }

/* мобильная панель */
.panel-mob { position: fixed; inset: auto 12px 12px; z-index: 30; display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; padding: 8px;
  border-radius: 18px; background: rgba(255,255,255,.78); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.8); box-shadow: var(--ten-3); }
.panel-mob .knopka { min-height: 48px; padding: 0 12px; }
.panel-mob .knopka--kontur { color: var(--tekst); background: rgba(31,35,40,.06); }
@media (min-width: 1100px) { .panel-mob { display: none; } }

/* ── секция: общий заголовок (h2 слева, пояснение справа снизу) ── */
.sek { padding: clamp(72px, 9vw, 128px) 0; }
.sek__zag { display: grid; gap: var(--s4); margin-bottom: clamp(32px, 4vw, 56px); }
@media (min-width: 900px) { .sek__zag { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: end; gap: var(--s7); } }
.sek__zag h2 { margin: 0; font-size: clamp(2rem, 1.3rem + 2.2vw, 3.25rem); line-height: 1.04; letter-spacing: -.035em; font-weight: 650; text-wrap: balance; }
.sek__zag p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--stal-tekst); }

/* ── атлас видов: мозаика с одним крупным полем, рендеры на поле #F1F3F4 ── */
.atlas { display: grid; gap: var(--s3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .atlas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); } }
.vid { position: relative; display: flex; flex-direction: column; min-height: 248px; padding: var(--s4); border-radius: var(--u-kart);
  text-decoration: none; color: var(--tekst); overflow: clip; isolation: isolate;
  /* поле плитки = фону рендеров (#F1F3F4) там, где стоит изделие: без смешивания край растворяется маской бесшовно; глубина — только книзу */
  background: linear-gradient(180deg, #f1f3f4 0%, #f1f3f4 52%, #e8ebee 100%);
  box-shadow: inset 0 0 0 1px rgba(31,35,40,.05);
  transition: transform var(--d-2) var(--e-vyhod), box-shadow var(--d-2) var(--e-vyhod); }
@media (min-width: 900px) { .vid { min-height: 300px; padding: var(--s5); } }
.vid__ris { position: relative; flex: 1; margin: calc(-1 * var(--s2)) calc(-1 * var(--s3)) var(--s3); min-height: 132px; }
.vid__ris img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  -webkit-mask-image: radial-gradient(closest-side, #000 76%, transparent 100%); mask-image: radial-gradient(closest-side, #000 76%, transparent 100%);
  transition: transform .6s var(--e-vyhod); }
.vid h3 { margin: 0; font-size: 18px; line-height: 1.25; font-weight: 600; letter-spacing: -.012em; }
.vid p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--stal-tekst); }
.vid__strelka { position: absolute; right: var(--s4); top: var(--s4); width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255,255,255,.8); box-shadow: var(--ten-1); color: var(--tekst);
  transition: background var(--d-2), color var(--d-2), transform var(--d-2) var(--e-vyhod); }
@media (min-width: 900px) { .vid__strelka { right: var(--s5); top: var(--s5); } }
.vid:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(31,35,40,.06), var(--ten-2); }
.vid:hover .vid__ris img { transform: scale(1.045); }
.vid:hover .vid__strelka { background: var(--akcent-knopka); color: #fff; transform: translateX(2px); }
.vid:focus-visible { outline-offset: 4px; border-radius: var(--u-kart); }
/* главное поле — гофрозащита: две колонки и две строки на широком экране, вся строка на телефоне */
.vid--glavnyy { grid-column: 1 / -1; min-height: 360px; }
@media (min-width: 900px) { .vid--glavnyy { grid-column: span 2; grid-row: span 2; min-height: 616px; padding: var(--s6); } }
.vid--glavnyy h3 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); letter-spacing: -.025em; font-weight: 650; }
.vid--glavnyy p { font-size: 16px; max-width: 34em; }
.vid--glavnyy .vid__ris { margin-inline: calc(-1 * var(--s5)); }
@media (min-width: 900px) { .vid--glavnyy .vid__strelka { right: var(--s6); top: var(--s6); width: 44px; height: 44px; } }
.vid--glavnyy { background: linear-gradient(180deg, #f1f3f4 0%, #f1f3f4 60%, #e6e9ec 100%); }
@media (max-width: 899px) { .vid h3 { font-size: 16px; padding-right: 0; } .vid p { display: none; } .vid--glavnyy p { display: block; }
  .vid__strelka { display: none; } .vid { min-height: 0; } .vid__ris { min-height: 120px; aspect-ratio: 3 / 2; flex: none; } }

/* появление мозаики — один проход при входе в экран */
@media (prefers-reduced-motion: no-preference) {
  .js .atlas .vid { opacity: 0; transform: translateY(18px); }
  .js .atlas.vidno .vid { opacity: 1; transform: none; transition: opacity .7s var(--e-vyhod), transform .7s var(--e-vyhod), box-shadow var(--d-2); transition-delay: calc(var(--i, 0) * 50ms); }
  .js .atlas.vidno .vid:hover { transform: translateY(-3px); transition-delay: 0s; }
}

/* ── общие для секций ниже атласа ── */
.sek--pole { background: var(--pole); }
.sek--okruglo { margin-inline: var(--pole-kraya); border-radius: var(--u-scena); }
@media (min-width: 1100px) { .sek--okruglo { margin-inline: auto; max-width: calc(var(--shirina) + 2 * var(--s4)); } }
.tekst p { margin: 0 0 1em; color: var(--tekst-2); } .tekst p:last-child { margin-bottom: 0; }
.ssylka { font-weight: 600; text-decoration: none; color: var(--tekst); border-bottom: 1.5px solid rgba(226,83,3,.45); transition: border-color var(--d-1), color var(--d-1); }
.ssylka:hover { color: var(--akcent-knopka); border-color: var(--akcent); }
.kartinka { position: relative; border-radius: var(--u-kart); overflow: clip; background: #f1f3f4; box-shadow: inset 0 0 0 1px rgba(31,35,40,.06); }
.kartinka img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kartinka figcaption { position: absolute; left: var(--s3); bottom: var(--s3); right: var(--s3); padding: 10px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.35; color: var(--tekst-2);
  background: rgba(255,255,255,.72); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border: 1px solid rgba(255,255,255,.8); }

/* ── схема станка: тёмная зона «синька» — техника, чертёж (sekcii.php shema-stanka) ── */
.shema { background: radial-gradient(80% 90% at 15% 0%, color-mix(in srgb, var(--temn-2-verh) 70%, transparent), transparent 70%), linear-gradient(180deg, var(--temn-2-verh), var(--temn-2) 55%);
  color: var(--na-temnom); padding: clamp(72px, 9vw, 128px) 0; }
.shema .sek__zag p { color: var(--na-sinke-2); }
.shema__set { display: grid; gap: var(--s7); }
@media (min-width: 1000px) { .shema__set { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s8); align-items: start; } .shema__set--bez-risunka { grid-template-columns: minmax(0, 1fr); } }
.shema__vkladki { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--u-upr); background: color-mix(in srgb, var(--linia-sinka) 9%, transparent); margin-bottom: var(--s4); }
.shema__vkladki button { font: inherit; font-size: 15px; font-weight: 600; padding: 9px 16px; border: 0; border-radius: 10px; background: none; color: var(--na-sinke-2); cursor: pointer; transition: background var(--d-1), color var(--d-1); }
.shema__vkladki [aria-selected="true"] { background: var(--na-temnom); color: var(--temn-2); }
.shema__vkladki { display: none; } .js .shema__vkladki { display: inline-flex; }
.shema__risunok { border-radius: var(--u-kart); border: 1px solid color-mix(in srgb, var(--linia-sinka) 18%, transparent);
  background: linear-gradient(color-mix(in srgb, var(--linia-sinka) 7%, transparent) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, color-mix(in srgb, var(--linia-sinka) 7%, transparent) 1px, transparent 1px) 0 0 / 24px 24px; }
.shema__risunok + .shema__risunok { margin-top: var(--s4); }
.js .shema__risunok:not(.akt) { display: none; } .js .shema__risunok + .shema__risunok { margin-top: 0; }
.shema__risunok svg { display: block; width: 100%; height: auto; }
.mash { fill: none; stroke: var(--linia-sinka); stroke-width: 1.6; stroke-linejoin: round; opacity: .78; }
.mash__tonko { stroke-width: 1; opacity: .7; } .mash__skryto { stroke-dasharray: 8 5; stroke-width: 1.2; }
.mash__shlang { stroke-width: 10; stroke-linecap: round; opacity: .35; }
.izd { fill: color-mix(in srgb, var(--akcent-svet) 10%, transparent); stroke: var(--akcent-svet); stroke-width: 1.8; stroke-linejoin: round; transition: opacity var(--d-1), stroke-width var(--d-1), filter var(--d-1); }
.izd__tonko { fill: none; stroke-width: 1; } .izd__skryto { fill: none; stroke-dasharray: 5 3; }
.izd__steklo { fill: color-mix(in srgb, var(--linia-sinka) 5%, transparent); stroke-dasharray: 14 4 3 4; }
.izd__rukav { fill: none; stroke-width: 14; stroke-dasharray: 3 3; stroke-linecap: butt; }
.poz__liniya { stroke: var(--na-temnom); stroke-width: 1.2; } .poz__tochka { fill: var(--na-temnom); }
.poz__krug { fill: var(--akcent); stroke: var(--temn-2); stroke-width: 3; transition: r var(--d-1); }
.poz__n { fill: var(--na-temnom); font: 700 14px/1 var(--shrift); }
.poz { cursor: pointer; }
@media (max-width: 599px) { .poz__krug { r: 22; } .poz__n { font-size: 22px; } .poz.akt .poz__krug { r: 25; } }
.shema__set.vybor .izd:not(.akt) { opacity: .35; }
.izd.akt { stroke-width: 2.6; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--akcent-svet) 60%, transparent)); }
.poz.akt .poz__krug { r: 17; }
.uzly-l { margin: 0; padding: 0; list-style: none; border-top: 1px solid color-mix(in srgb, var(--linia-sinka) 20%, transparent); }
.uzly-l li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--s3); padding: var(--s3) var(--s2); border-bottom: 1px solid color-mix(in srgb, var(--linia-sinka) 20%, transparent);
  border-radius: 4px; transition: background var(--d-1); outline: none; }
.uzly-l li.akt { background: color-mix(in srgb, var(--linia-sinka) 8%, transparent); }
.uzly-l__n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; border: 1.5px solid var(--linia-sinka); }
.uzly-l li.akt .uzly-l__n { background: var(--akcent); border-color: var(--akcent); color: var(--na-temnom); }
.uzly-l b { display: block; font-size: 16.5px; font-weight: 650; }
.uzly-l li > div > span { display: block; font-size: 15px; line-height: 1.5; color: var(--na-sinke-2); margin-top: 2px; }
.shema .ssylka { color: var(--na-temnom); border-bottom-color: color-mix(in srgb, var(--akcent-svet) 70%, transparent); }
.shema .ssylka:hover { color: var(--list); border-color: var(--akcent-svet); }
.shema__zametka { margin: var(--s4) 0 0; font-size: 15px; line-height: 1.55; color: var(--na-sinke-2); }
.shema__zametka strong { color: var(--na-temnom); }
.shema__foto { margin: var(--s5) 0 0; padding: var(--s4) var(--s5); border-radius: 16px; border: 1px solid color-mix(in srgb, var(--linia-sinka) 25%, transparent); font-size: 15px; line-height: 1.55; color: var(--na-temnom); }
.shema__foto .knopka { margin-top: var(--s3); display: flex; width: fit-content; }

/* ── среда → ткань (вариант главной, sekcii.php podbor-tkani) ── */
.sredy { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--linia); border-radius: var(--u-kart); overflow: clip; background: var(--linia); gap: 1px; }
@media (min-width: 600px) { .sredy { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sredy { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.sredy li { background: var(--list); padding: var(--s5); display: grid; grid-template-rows: auto auto 1fr auto; }
.sredy__znak { width: 44px; height: 44px; fill: none; stroke: var(--akcent-knopka); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: var(--s4); }
.sredy h3 { margin: 0 0 6px; font-size: 18px; font-weight: 650; letter-spacing: -.015em; }
.sredy__chto { margin: 0; font-size: 15px; line-height: 1.5; color: var(--stal-tekst); }
.sredy__vybor { margin: var(--s4) 0 0; padding-top: var(--s3); border-top: 1px dashed var(--linia); font-size: 15px; font-weight: 600; line-height: 1.4; }
.sredy__vybor span { display: block; font-size: 12.5px; font-weight: 500; color: var(--stal-tekst); margin-bottom: 2px; }
@media (max-width: 599px) { .sredy li { grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: none; column-gap: var(--s3); padding: var(--s4); }
  .sredy__znak { width: 36px; height: 36px; margin: 0; grid-row: span 3; } .sredy__vybor { margin-top: var(--s2); padding-top: var(--s2); } }
.shvy { display: grid; gap: var(--s5); margin-top: var(--s6); align-items: center; }
@media (min-width: 900px) { .shvy { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s7); } .shvy--bez-kadra { grid-template-columns: minmax(0, 1fr); } }
.shvy .kartinka { aspect-ratio: 3 / 2; }
.shvy__tekst p { margin: 0 0 var(--s4); font-size: 17px; line-height: 1.6; color: var(--tekst-2); max-width: var(--chtenie); }
.shvy__tekst strong { color: var(--tekst); }
.shvy__dalee { font-size: 15px !important; color: var(--stal-tekst) !important; }

/* ── «Своё производство» — тёмная зона «графит»: цепочка операций одного цеха ── */
.proizv { background: radial-gradient(90% 120% at 85% 0%, color-mix(in srgb, var(--akcent) 16%, transparent), transparent 55%), linear-gradient(180deg, var(--temn-1), var(--temn-1-niz)); color: var(--na-temnom); padding: clamp(64px, 8vw, 112px) 0; }
.proizv__verh { display: grid; gap: var(--s5); }
@media (min-width: 1000px) { .proizv__verh { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s8); align-items: end; } }
.proizv h2 { margin: 0; font-size: clamp(2rem, 1.3rem + 2.2vw, 3.25rem); line-height: 1.04; letter-spacing: -.035em; font-weight: 650; }
.proizv .tekst p { color: var(--na-temnom-2); font-size: 17px; }
.proizv .ssylka { color: var(--na-temnom); }
.cep { display: grid; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none; counter-reset: op; }
@media (min-width: 900px) { .cep { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cep li { position: relative; counter-increment: op; padding: 0 0 var(--s5) var(--s6); border-left: 2px solid color-mix(in srgb, var(--na-temnom) 18%, transparent); }
.cep li::before { content: counter(op, decimal-leading-zero); position: absolute; left: -15px; top: -2px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--akcent); color: var(--na-temnom); font-size: 12px; font-weight: 700; box-shadow: 0 0 0 5px var(--temn-1); }
@media (min-width: 900px) { .cep li { border-left: 0; border-top: 2px solid color-mix(in srgb, var(--na-temnom) 18%, transparent); padding: var(--s6) var(--s5) 0 0; }
  .cep li::before { left: 0; top: -15px; } }
.cep b { display: block; font-size: 18px; font-weight: 650; letter-spacing: -.01em; color: var(--na-temnom); }
.cep span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--na-temnom-2); }

/* ── отрасли: строка — кадр, отрасль, ссылки на применения ── */
.otrasli { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--tekst); }
.otrasli li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s3) var(--s5); align-items: center; padding: var(--s4) 0; border-bottom: 1px solid var(--linia); }
@media (min-width: 900px) { .otrasli li { grid-template-columns: 200px minmax(0, 1fr) minmax(0, 340px); gap: var(--s6); padding: var(--s5) 0; } }
.otrasl__kadr { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; background: var(--pole); display: block; }
.otrasl__kadr--znak { display: grid; place-items: center; color: var(--stal); }
.otrasl__kadr--znak svg { width: 44%; height: auto; }
.otrasli h3 { margin: 0 0 4px; font-size: 19px; font-weight: 650; letter-spacing: -.015em; }
.otrasli li p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--stal-tekst); }
.otrasli .otrasl__ssylki { grid-column: 2; font-size: 15px; line-height: 1.8; color: var(--tekst); }
@media (min-width: 900px) { .otrasli .otrasl__ssylki { grid-column: 3; text-align: right; } }

/* ── путь заказа: шаг 1 раскрыт на три способа, дальше шаги строкой (sekcii.php put-zakaza) ── */
.put { display: grid; gap: var(--s5); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .put { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.put__shag { border-top: 2px solid var(--tekst); padding-top: var(--s4); }
.put__shag--pervyy { grid-column: 1 / -1; border-top-color: var(--akcent); display: grid; gap: var(--s5); padding-bottom: var(--s5); }
@media (min-width: 900px) { .put__shag--pervyy { grid-template-columns: minmax(0, 4fr) minmax(0, 9fr); gap: var(--s7); } }
.put__n { display: block; font-size: 13.5px; font-weight: 700; color: var(--akcent-temn); }  /* --akcent-knopka на поле — 4,41:1, ниже 4,5 (Lighthouse 31.10) */
.put h3 { margin: 6px 0; font-size: 19px; font-weight: 650; letter-spacing: -.015em; }
.put p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--tekst-2); }
.put__zametka { margin-top: var(--s3) !important; color: var(--stal-tekst) !important; }
.sposoby3 { display: grid; gap: var(--s4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .sposoby3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sposoby3 li { background: var(--list); border-radius: var(--u-kart); overflow: clip; box-shadow: var(--ten-1); display: grid; grid-template-rows: auto auto 1fr; }
.sposoby3 img, .sposoby3__eskiz { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--pole); }
.sposoby3__eskiz { display: grid; place-items: center; color: var(--stal); } .sposoby3__eskiz svg { width: 78%; height: auto; }
.sposoby3 b { display: block; padding: var(--s4) var(--s4) 2px; font-size: 16.5px; font-weight: 650; }
.sposoby3 li > span { display: block; padding: 0 var(--s4) var(--s4); font-size: 14.5px; line-height: 1.5; color: var(--stal-tekst); }
.put__shag--povtor { border-top-style: dashed; }
@media (max-width: 599px) { .sposoby3 li { grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; }
  .sposoby3 img, .sposoby3__eskiz { grid-row: span 2; height: 100%; aspect-ratio: auto; min-height: 84px; }
  .sposoby3 b { padding: var(--s3) var(--s3) 2px; font-size: 15.5px; } .sposoby3 li > span { padding: 0 var(--s3) var(--s3); font-size: 14px; } }

/* ── «Что прислать» — три способа, у двух настоящий кадр ── */
.sposoby { display: grid; gap: var(--s4); }
@media (min-width: 900px) { .sposoby { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sposob { display: grid; grid-template-rows: auto 1fr; border-radius: var(--u-kart); overflow: clip; background: var(--list); box-shadow: inset 0 0 0 1px rgba(31,35,40,.07), var(--ten-1); }
.sposob__ris { aspect-ratio: 3 / 2; background: #f1f3f4; display: grid; place-items: center; overflow: clip; }
.sposob__ris img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sposob__ris svg { width: 64%; height: auto; }
.sposob > div:last-child { padding: var(--s5); }
.sposob h3 { margin: 0 0 6px; font-size: 19px; font-weight: 650; letter-spacing: -.015em; }
.sposob p { margin: 0; font-size: 15px; color: var(--stal-tekst); line-height: 1.5; }
.sposoby-vazhno { margin-top: var(--s5); max-width: 62em; }

/* ── «Как заказать» — последовательность настоящая: шаги и линия прогресса ── */
.shagi { position: relative; display: grid; gap: var(--s5); margin: 0; padding: 0; list-style: none; counter-reset: shag; }
@media (min-width: 900px) { .shagi { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s4); } }
.shagi::before { content: ""; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px; background: var(--linia); }
/* линия — от центра первого кружка до центра последнего: 4 колонки + 4 зазора = 80 % + 0,8 зазора */
@media (min-width: 900px) { .shagi::before { left: 20px; right: auto; top: 19px; bottom: auto; width: calc(80% + 12.8px); height: 2px; } }
.shagi::after { content: ""; position: absolute; left: 19px; top: 20px; width: 2px; height: 0; background: var(--akcent); transition: height 1.4s var(--e-vyhod), width 1.4s var(--e-vyhod); }
@media (min-width: 900px) { .shagi::after { left: 20px; top: 19px; height: 2px; width: 0; } .shagi.vidno::after { width: calc(80% + 12.8px); } }
@media (max-width: 899px) { .shagi.vidno::after { height: calc(100% - 40px); } }
.shagi li { position: relative; counter-increment: shag; padding-left: 60px; }
@media (min-width: 900px) { .shagi li { padding-left: 0; padding-top: 60px; } }
.shagi li::before { content: counter(shag); position: absolute; left: 0; top: 0; z-index: 1; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  font-weight: 650; font-size: 15px; background: var(--list); box-shadow: inset 0 0 0 2px var(--linia), var(--ten-1); transition: box-shadow .4s, color .4s; transition-delay: calc(var(--i) * .25s); }
.shagi.vidno li::before { box-shadow: inset 0 0 0 2px var(--akcent), 0 6px 16px -6px rgba(226,83,3,.5); color: var(--akcent-knopka); }
.shagi b { display: block; font-size: 17px; font-weight: 650; margin-bottom: 4px; }
.shagi span { display: block; font-size: 14.5px; color: var(--stal-tekst); line-height: 1.5; }
.shagi em { display: inline-block; margin-top: 8px; font-style: normal; font-size: 13px; font-weight: 600; color: var(--akcent-knopka); background: var(--akcent-fon); padding: 3px 9px; border-radius: 999px; }
.shagi-posle { margin-top: var(--s6); color: var(--stal-tekst); }

/* ── врезка справочника ── */
.vrezka { display: grid; border-radius: var(--u-scena); overflow: clip; text-decoration: none; color: inherit; background: linear-gradient(120deg, #fff 0%, #f3f4f6 100%);
  box-shadow: inset 0 0 0 1px rgba(31,35,40,.07), var(--ten-2); transition: transform var(--d-2) var(--e-vyhod), box-shadow var(--d-2); }
@media (min-width: 900px) { .vrezka { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.vrezka:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(31,35,40,.08), var(--ten-3); }
.vrezka img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 3 / 2; }
.vrezka > div { display: grid; align-content: center; gap: 10px; padding: var(--s6); }
.vrezka small { font-size: 13px; color: var(--stal-tekst); font-weight: 500; }
.vrezka b { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); line-height: 1.1; letter-spacing: -.03em; font-weight: 650; }
.vrezka p { margin: 0; color: var(--tekst-2); max-width: 32em; }
.vrezka u { text-decoration: none; font-weight: 600; color: var(--akcent-knopka); }

/* ── форма ── */
.forma-sek { padding: 0 0 clamp(56px, 7vw, 104px); }
.forma-set { display: grid; gap: var(--s6); border-radius: var(--u-scena); padding: clamp(24px, 4vw, 56px); background: radial-gradient(80% 120% at 100% 0%, rgba(226,83,3,.10), transparent 60%), linear-gradient(180deg, #f6f7f8, #eef0f2);
  box-shadow: inset 0 0 0 1px rgba(31,35,40,.06); }
@media (min-width: 1000px) { .forma-set { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); } }
.forma-set h2 { margin: 0; font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem); line-height: 1.05; letter-spacing: -.035em; font-weight: 650; }
.forma-set > div > p { color: var(--tekst-2); font-size: 17px; margin: var(--s4) 0 var(--s6); }
.kontakty-mini { display: grid; gap: var(--s3); }
.kontakty-mini a { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 600; font-size: 17px; }
.kontakty-mini svg { width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: #fff; box-shadow: var(--ten-1); color: var(--akcent-knopka); flex: none; }
.forma { display: grid; gap: var(--s4); padding: clamp(20px, 3vw, 32px); border-radius: var(--u-kart); background: #fff; box-shadow: var(--ten-3); }
@media (min-width: 600px) { .forma { grid-template-columns: 1fr 1fr; } .forma .shiroko { grid-column: 1 / -1; } }
.forma textarea { width: 100%; padding: 14px; border-radius: var(--u-upr); border: 1px solid rgba(31,35,40,.14); font: 400 16px/1.5 var(--shrift); resize: vertical; min-height: 96px; }
.forma textarea:focus { outline: none; border-color: var(--akcent); box-shadow: 0 0 0 4px rgba(226,83,3,.14); }
.podskazka { margin: 6px 0 0; font-size: 13px; color: var(--stal-tekst); }
.pole .fayl { display: flex; margin: 0; color: var(--tekst); align-items: center; gap: 14px; padding: 18px; border-radius: var(--u-upr); border: 1.5px dashed rgba(31,35,40,.22); background: #fafbfb; cursor: pointer; transition: border-color var(--d-1), background var(--d-1); }
.pole .fayl:hover { border-color: var(--akcent); background: var(--akcent-fon); }
.fayl svg { flex: none; color: var(--akcent-knopka); }
.fayl b { display: block; font-size: 15.5px; } .fayl span span { display: block; font-size: 13px; color: var(--stal-tekst); font-weight: 400; margin-top: 2px; }
.soglasie { margin: 0; font-size: 13px; color: var(--stal-tekst); flex: 1 1 220px; }
.soglasie a { color: inherit; }

/* ── подвал — графит ── */
.podval { margin-top: var(--s4); background: linear-gradient(180deg, #1a1e22, #121518); color: #b4bdc5; padding: var(--s8) 0 calc(var(--s6) + 88px); }
@media (min-width: 1100px) { .podval { padding-bottom: var(--s6); } }
.podval__set { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .podval__set { grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); } }
.podval .logo { color: #fff; } .podval .logo__deviz { color: #8e99a3; }
.podval p { font-size: 14.5px; line-height: 1.55; max-width: 36ch; margin: var(--s4) 0; }
.podval h3 { margin: 0 0 var(--s3); font-size: 14px; font-weight: 600; color: #fff; }
.podval ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.podval a { color: #c9d0d6; text-decoration: none; font-size: 14.5px; } .podval a:hover { color: #fff; }
.podval__kontakty a { display: block; color: #fff; font-weight: 600; font-size: 16px; margin-bottom: 6px; }
.podval .podval__niz { max-width: none; margin: var(--s7) 0 0; padding-top: var(--s5); border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; color: #7f8a94; }

/* ── вход: один оркестрованный проход ── */
@media (prefers-reduced-motion: no-preference) {
  .vhod .ogl__kadr:first-child img { animation: priblizh 2.4s var(--e-vyhod) both; }
  .vhod h1 .stroka > span { animation: podem .9s var(--e-vyhod) both; animation-delay: calc(.12s + var(--i) * .08s); }
  .vhod h1 .stroka--razmer > span::after { animation: razmer .9s var(--e-vyhod) both; animation-delay: 1s; }
  .vhod .geroy__vvodka { animation: proyav .8s var(--e-vyhod) both; animation-delay: .5s; }
  .vhod .geroy__deystviya { animation: proyav .8s var(--e-vyhod) both; animation-delay: .6s; }
  .vhod .fakty { animation: proyav .8s var(--e-vyhod) both; animation-delay: .75s; }
  .vhod .ogl__ukaz { animation: proyav .8s var(--e-vyhod) both; animation-delay: .65s; }
  .vhod .ogl__kartochka { animation: vyezd .9s var(--e-vyhod) both; animation-delay: .7s; }
}
@keyframes priblizh { from { transform: scale(1.08); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes podem { from { transform: translateY(105%); } to { transform: none; } }
@keyframes razmer { from { transform: scaleX(0); opacity: 0; } 30% { opacity: 1; } to { transform: scaleX(1); opacity: 1; } }
@keyframes proyav { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes vyezd { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 1099px) { .geroy h1 .stroka { display: inline; } .geroy h1 .stroka > span { display: inline; } .geroy h1 .stroka--razmer > span { display: inline-block; } }

/* ── дополнения сайта (нет в прототипе) ── */
.menyu-mob { padding: var(--s2) 0 var(--s3); }
.menyu-mob[hidden] { display: none; }
.menyu-mob .kont { display: grid; gap: 2px; }
.menyu-mob a { padding: 12px var(--s3); border-radius: 12px; text-decoration: none; font-weight: 500; color: var(--tekst); }
.menyu-mob a:hover, .menyu-mob a[aria-current] { background: rgba(31,35,40,.06); }
@media (min-width: 1100px) { .menyu-mob { display: none !important; } }
.menyu a[aria-current] { color: var(--tekst); background: rgba(31,35,40,.06); }
.lovushka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.forma .oshibka { margin: 0; padding: 12px 14px; border-radius: 12px; background: #fdecea; color: #b3261e; font-size: 14px; }
.pole[data-sostoyanie="oshibka"] input { border-color: #b3261e; box-shadow: 0 0 0 4px rgba(179,38,30,.12); }
.parametry-forma { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--akcent-fon); color: #6b2a06; font-size: 14px; line-height: 1.5; }
.knopka[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.net-dannyh { padding: 0 .3em; border-radius: 4px; background: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(107,122,134,.16) 6px 7px); color: var(--stal-tekst); font-size: .9em; }

/* ══ Страницы изделий (docs/10-oblik-v2.md §19): хаб, виды, формы, применения ══ */
.kroshki { padding-top: var(--s5); font-size: 14px; color: var(--stal-tekst); }
.kroshki ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.kroshki li + li::before { content: "/"; margin-right: 6px; color: #b8c0c7; }
.kroshki a { text-decoration: none; color: var(--tekst-2); } .kroshki a:hover { color: var(--akcent-knopka); }
.kroshki [aria-current] { color: var(--stal-tekst); }

/* герой изделия: светлая сцена-карточка внутри полей; рендер на поле #F1F3F4 = фон сцены, края растворены */
.geroy-vid { padding-top: var(--s4); }
.geroy-vid__scena { position: relative; display: grid; gap: var(--s5); padding: clamp(24px, 4vw, 56px); border-radius: var(--u-scena); overflow: clip; isolation: isolate;
  background: radial-gradient(70% 90% at 78% 40%, #f6f7f8 0%, #f1f3f4 55%, #e9ecee 100%); box-shadow: inset 0 0 0 1px rgba(31,35,40,.05); }
.geroy-vid__scena::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 60% at 100% 0%, rgba(226,83,3,.07), transparent 60%); }
@media (min-width: 1000px) { .geroy-vid__scena { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; gap: var(--s6); min-height: 520px; } }
.geroy-vid h1 { margin: 0; font-size: clamp(2.125rem, 1.4rem + 2.2vw, 3.25rem); line-height: 1.04; letter-spacing: -.035em; font-weight: 650; text-wrap: balance; }
.geroy-vid .geroy__vvodka { color: var(--tekst-2); }
.geroy-vid .fakty { margin-top: var(--s5); }
.geroy-vid__ris { min-width: 0; }
.geroy-vid__ris .render { margin: 0; }
/* кадр на поле #F1F3F4 растворяется в сцене; кадр со сценой или в рамке (fon=scena|kadr) — карточкой с тенью, без маски-овала */
.geroy-vid__ris .render img { width: 100%; height: auto; display: block; border-radius: var(--u-kart); box-shadow: var(--ten-2); }
.geroy-vid__ris .render--pole img { border-radius: 0; box-shadow: none; background: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 78%, transparent 100%); mask-image: radial-gradient(closest-side, #000 78%, transparent 100%); }
.geroy-vid__ris figcaption { margin-top: 4px; font-size: 13px; color: var(--stal-tekst); text-align: center; }
.geroy-vid__shema { margin: 0; } .geroy-vid__shema svg { width: 100%; height: auto; } .geroy-vid__shema figcaption { font-size: 13px; color: var(--stal-tekst); }
@media (prefers-reduced-motion: no-preference) {
  .vhod .geroy-vid h1, .vhod .geroy-vid .geroy__vvodka, .vhod .geroy-vid .geroy__deystviya, .vhod .geroy-vid .fakty { animation: proyav .8s var(--e-vyhod) both; }
  .vhod .geroy-vid .geroy__vvodka { animation-delay: .1s; } .vhod .geroy-vid .geroy__deystviya { animation-delay: .2s; } .vhod .geroy-vid .fakty { animation-delay: .3s; }
  .vhod .geroy-vid__ris .render img { animation: vyezd 1.1s var(--e-vyhod) both; animation-delay: .15s; }
}

/* общий рендер (sekcii/render): поле = фон рендера, подпись мелко */
.render { margin: 0; } .render img { display: block; width: 100%; height: auto; border-radius: var(--u-kart); background: #f1f3f4; }
.render figcaption { margin-top: 8px; font-size: 13px; color: var(--stal-tekst); }

/* паспорт — штамп белой карточкой (как штамп калькулятора) */
.shtamp-kartochka { border-radius: var(--u-kart); overflow: clip; background: #fff; box-shadow: inset 0 0 0 1px rgba(31,35,40,.07), var(--ten-2); }
.shtamp-kartochka .shtamp { margin: 0; }
.shtamp-kartochka .shtamp > div:nth-child(4n+1) { border-left: 0; }
.net-dannyh { display: inline-block; padding: 1px 8px; border-radius: 6px; font-weight: 500; }

/* длинный текст: колонка чтения + стеклянное оглавление */
.sek--tekst { padding-top: clamp(56px, 7vw, 96px); }
.tekst-set { display: grid; gap: var(--s6); }
@media (min-width: 1024px) { .tekst-set { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--s8); align-items: start; } .tekst-set aside { position: sticky; top: 132px; display: grid; gap: var(--s4); } }
.tekst-set > * { min-width: 0; }
.tekst { max-width: 760px; font-size: 17px; line-height: 1.65; color: var(--tekst-2); }
.tekst > :first-child { margin-top: 0; }
.tekst h2 { margin: 2.2em 0 .6em; font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.125rem); line-height: 1.1; letter-spacing: -.03em; font-weight: 650; color: var(--tekst); scroll-margin-top: 132px; }
.tekst h3 { margin: 1.8em 0 .5em; font-size: 20px; line-height: 1.25; letter-spacing: -.015em; font-weight: 650; color: var(--tekst); }
.tekst p { margin: 0 0 1em; max-width: 68ch; }
.tekst ul, .tekst ol { margin: 0 0 1.2em; padding-left: 0; list-style: none; max-width: 68ch; }
.tekst ul li { position: relative; padding-left: 22px; margin: .45em 0; }
.tekst ul li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 10px; height: 2px; border-radius: 1px; background: var(--akcent); }
.tekst ol { counter-reset: p; } .tekst ol li { position: relative; padding-left: 34px; margin: .55em 0; counter-increment: p; }
.tekst ol li::before { content: counter(p); position: absolute; left: 0; top: .1em; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 650; color: var(--akcent-knopka); background: var(--akcent-fon); }
.tekst strong { font-weight: 600; color: var(--tekst); }
.tekst a { color: var(--tekst); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(226,83,3,.55); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.tekst a:hover { color: var(--akcent-knopka); }
.tekst .tablica-obertka { margin: 1.4em 0 1.8em; }
.vybor { padding: var(--s5); border-radius: var(--u-kart); background: rgba(255,255,255,.7); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(31,35,40,.07), var(--ten-1); font-size: 15px; }
.vybor h2 { margin: 0 0 var(--s3); font-size: 13px; font-weight: 600; color: var(--stal-tekst); letter-spacing: 0; }
.vybor ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.vybor a { display: block; padding: 7px 10px; border-radius: 10px; text-decoration: none; color: var(--tekst-2); line-height: 1.35; transition: background var(--d-1), color var(--d-1); }
.vybor a:hover { background: rgba(226,83,3,.07); color: var(--tekst); }

/* таблицы из текста (Teksty::oformit): скруглённая карточка с прокруткой, заголовки строк */
.tablica-obertka { overflow-x: auto; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px rgba(31,35,40,.08); }
.tablica { border-collapse: collapse; width: 100%; min-width: 600px; font-size: 15px; line-height: 1.45; color: var(--tekst-2); }
.tablica th, .tablica td { padding: 13px 16px; border-bottom: 1px solid var(--linia); text-align: left; vertical-align: top; }
.tablica thead th { background: #f6f7f8; font-size: 13px; font-weight: 600; color: var(--stal-tekst); vertical-align: bottom; }
.tablica tbody tr:last-child > * { border-bottom: 0; }
.tablica tbody th { font-weight: 600; color: var(--tekst); }
.tablica tbody tr:hover > * { background: rgba(226,83,3,.035); }
.tablica td.net-dannyh { padding-left: 16px; }

/* вопросы: заголовок держится слева, справа раскрывающиеся карточки */
.voprosy-set { display: grid; gap: var(--s5); }
@media (min-width: 1000px) { .voprosy-set { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s8); align-items: start; } .voprosy-set .sek__zag { position: sticky; top: 132px; grid-template-columns: 1fr; } }
.voprosy { display: grid; gap: var(--s3); }
.voprosy details { border-radius: 16px; background: var(--pole); box-shadow: inset 0 0 0 1px rgba(31,35,40,.05); transition: background var(--d-2), box-shadow var(--d-2); }
.voprosy details[open] { background: #fff; box-shadow: inset 0 0 0 1px rgba(31,35,40,.07), var(--ten-2); }
.voprosy summary { cursor: pointer; padding: 18px 60px 18px 22px; font-weight: 600; font-size: 17px; line-height: 1.35; list-style: none; position: relative; border-radius: 16px; }
.voprosy summary::-webkit-details-marker { display: none; }
.voprosy summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: #fff no-repeat center / 12px 12px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%23c44802' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  box-shadow: var(--ten-1); transition: transform var(--d-2) var(--e-vyhod); }
.voprosy details[open] summary::after { transform: rotate(45deg); }
.voprosy__otvet { padding: 0 22px 20px; } .voprosy__otvet p { margin: 0; color: var(--tekst-2); line-height: 1.6; }
.voprosy__otvet a { color: var(--tekst); text-decoration-color: rgba(226,83,3,.55); text-underline-offset: 3px; }

/* соседи: карточки с миниатюрой-обложкой */
.sosedi { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.sosedi a { display: flex; align-items: center; gap: var(--s4); padding: var(--s3); border-radius: var(--u-kart); text-decoration: none; color: var(--tekst);
  background: #fff; box-shadow: inset 0 0 0 1px rgba(31,35,40,.08); transition: transform var(--d-2) var(--e-vyhod), box-shadow var(--d-2); }
.sosedi a:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(31,35,40,.08), var(--ten-2); }
.sosedi__ris { flex: none; width: 96px; height: 72px; border-radius: 12px; overflow: clip; background: #f1f3f4; display: grid; place-items: center; }
.sosedi__ris img { width: 100%; height: 100%; object-fit: cover; } .sosedi__ris svg { width: 80%; height: auto; }
.sosedi__tekst b { display: block; font-size: 16px; font-weight: 650; line-height: 1.3; }
.sosedi__tekst span { display: block; font-size: 13.5px; color: var(--stal-tekst); line-height: 1.4; margin-top: 2px; }
.geroy-vid + .sek--okruglo, .geroy-vid + .kalk-sek { margin-top: var(--s5); }

/* ══ Текстовые и служебные страницы (docs/10-oblik-v2.md §20) ══ */
.geroy-vid__scena--odna { min-height: 0 !important; grid-template-columns: minmax(0, 1fr) !important; }
.geroy-vid__scena--odna .geroy-vid__tekst { max-width: 820px; }
.geroy-vid__data { margin: var(--s3) 0 0; font-size: 14px; color: var(--stal-tekst); }
.geroy-vid .geroy__vvodka a { color: var(--tekst); text-decoration-color: rgba(226,83,3,.55); text-underline-offset: 3px; }
.kontakty-kartochka { margin: 0; padding: var(--s2) var(--s5); border-radius: var(--u-kart); background: rgba(255,255,255,.72); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.85), var(--ten-3); }
.kontakty-kartochka > div { padding: var(--s4) 0; border-bottom: 1px solid var(--linia); }
.kontakty-kartochka > div:last-child { border-bottom: 0; }
.kontakty-kartochka dt { font-size: 13px; color: var(--stal-tekst); }
.kontakty-kartochka dd { margin: 4px 0 0; font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); font-weight: 600; letter-spacing: -.015em; }
.kontakty-kartochka dd a { text-decoration: none; } .kontakty-kartochka dd a:hover { color: var(--akcent-knopka); }
.spasibo__znak { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--s4); border-radius: 50%; color: #fff;
  background: linear-gradient(180deg, #d4500a, var(--akcent-knopka)); box-shadow: 0 12px 28px -10px rgba(226,83,3,.6); }
.keysy { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.keysy__kartochka { display: grid; gap: 6px; padding: var(--s5); border-radius: var(--u-kart); text-decoration: none; color: var(--tekst); background: #fff; box-shadow: inset 0 0 0 1px rgba(31,35,40,.08); transition: transform var(--d-2) var(--e-vyhod), box-shadow var(--d-2); }
.keysy__kartochka:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(31,35,40,.08), var(--ten-2); }
.keysy__kartochka b { font-size: 18px; } .keysy__kartochka span { color: var(--stal-tekst); font-size: 15px; } .keysy__kartochka em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--akcent-knopka); }
.geroy-vid:has(.geroy-vid__scena--odna):last-child { padding-bottom: var(--s8); }
/* скрытые служебные блоки формы не занимают ячейку сетки: [data-parametry] (скрытые поля размеров калькулятора) — только содержимое,
   а в нём одни hidden-инпуты; иначе пустой блок встаёт в первую ячейку и сдвигает «Имя» вправо, «Телефон» — на строку ниже */
.forma [data-parametry] { display: contents; }