@import url("./fonts.css");

/* ── Токены ───────────────────────────────────────────────────────────────
   Оливковый и хаки взяты из фирменного логотипа (assets/logo), а не
   придуманы. Красного нет: он пришёл из шаблона Tilda, в фирменном стиле
   его не было.                                                             */
:root{
  --ink:#14150F;            /* основа — «приборная панель» */
  --ink-2:#1C1E15;          /* поверхность блока */
  --ink-3:#252818;          /* поверхность выше */
  --olive:#4E5237;          /* фирменный */
  --olive-lt:#6E734E;       /* оливковый, поднятый до читаемости на тёмном */
  --khaki:#A19B7B;          /* фирменный */
  --amber:#E08A2E;          /* единственный акцент данных: тяга, ток, выделение */

  --text:#ECEAE0;           /* 15.6:1 на основе */
  --text-2:#B3AF9E;         /* 8.4:1 — приглушённый */
  --text-3:#8A8674;         /* 5.1:1 — подписи, служебное */
  --line:#2F3223;
  --line-2:#23261A;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --t-xs:12px; --t-sm:14px; --t-base:16px; --t-lg:19px;
  --t-xl:24px; --t-2xl:32px; --t-3xl:42px; --t-4xl:56px;

  --w-content:1280px; --w-narrow:680px;
  --header-h:72px;
  --ease:cubic-bezier(.22,.61,.36,1);   /* без bounce — §4 общих правил */
}

/* ── База ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
/* Слои сцены после поворота выходят за свою коробку и давали горизонтальную
   прокрутку. `clip` (а не `hidden`) не создаёт контейнер прокрутки, поэтому
   липкая шапка и якоря продолжают работать. */
html{-webkit-text-size-adjust:100%; overflow-x:clip}
body{overflow-x:clip}
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--t-base); line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; line-height:1.1; font-weight:700; letter-spacing:-.02em}
p{margin:0}
a{color:inherit}
img,svg{max-inline-size:100%}
:focus-visible{outline:2px solid var(--amber); outline-offset:3px}

/* Цифры — всегда моноширинные и табличные: в столбце они обязаны совпадать */
.num,.specs td,.specs th,.t-model,.kv{
  font-family:"PlexMono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}

.wrap{inline-size:min(100% - var(--s6)*2, var(--w-content)); margin-inline:auto}
@media (max-width:600px){ .wrap{inline-size:min(100% - var(--s5)*2, var(--w-content))} }
section{padding-block:clamp(var(--s8), 9vh, var(--s10)); scroll-margin-block-start:calc(var(--header-h) + var(--s4))}
section + section{border-block-start:1px solid var(--line-2)}

/* ── Шапка ────────────────────────────────────────────────────────────── */
.top{
  position:sticky; inset-block-start:0; z-index:50;
  background:color-mix(in srgb, var(--ink) 90%, transparent);
  backdrop-filter:blur(10px); border-block-end:1px solid var(--line-2);
}
.top-in{display:flex; align-items:center; gap:var(--s5); padding-block:var(--s3)}
.brand{flex:0 1 auto; display:flex; align-items:center; text-decoration:none}
.brand img{block-size:46px; inline-size:auto; display:block}
.nav{display:flex; gap:var(--s5); margin-inline-start:auto; flex-wrap:wrap}
.nav a{
  text-decoration:none; font-size:var(--t-sm); color:var(--text-2);
  padding:11px 2px; transition:color .2s var(--ease);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text)}
.langs{display:flex; gap:var(--s1); flex:0 0 auto}
.langs button{
  font:inherit; font-size:var(--t-xs); letter-spacing:.08em; text-transform:uppercase;
  min-inline-size:44px; min-block-size:44px; padding:0 var(--s2);
  background:transparent; border:1px solid transparent; color:var(--text-3);
  cursor:pointer; transition:color .2s var(--ease), border-color .2s var(--ease);
}
.langs button:hover{color:var(--text)}
.langs button[aria-current="true"]{color:var(--text); border-color:var(--line)}

/* Кнопка меню — только на телефоне */
.menu-btn{display:none}
@media (max-width:900px){
  /* Шапка не липкая (место на телефоне), но relative: от неё позиционируется
     панель меню. z-index выше героя и купола. */
  .top{position:relative; z-index:60; backdrop-filter:none; background:var(--ink)}
  .top-in{gap:var(--s2) var(--s4)}
  /* Кнопка «Меню» (решение Света 08.10 вечером: строки ссылок «примитивно
     разнесены», горизонтальная прокрутка раньше не читалась как прокрутка). */
  .menu-btn{
    display:inline-flex; align-items:center; margin-inline-start:auto;
    min-block-size:44px; padding:0 var(--s4);
    border:1px solid var(--line); border-radius:8px; background:none;
    color:var(--text); font:inherit; font-size:var(--t-sm); cursor:pointer;
  }
  .menu-btn[aria-expanded="true"]{border-color:var(--khaki); color:var(--khaki)}
  /* Панель меню ПОВЕРХ страницы (Свет 09.10: список в потоке сжимал герой,
     текст ложился на мотор). Абсолютная под полосой шапки, страница не
     двигается, --header-h не растёт. Стекло как у iOS: тёмный полупрозрачный
     фон, размытие того, что под панелью, скругление, волосяная рамка. */
  .nav{
    display:none; position:absolute; inset-inline:10px; inset-block-start:calc(100% + 6px);
    margin-inline-start:0; flex-direction:column; gap:2px; padding:var(--s2);
    /* 09.10, по телефону Света: 72 % «полностью перекрывает» — 50 % и размытие
       сильнее, чтобы герой угадывался сквозь панель, а пункты читались. */
    background:color-mix(in srgb, var(--ink) 50%, transparent);
    -webkit-backdrop-filter:blur(24px) saturate(160%); backdrop-filter:blur(24px) saturate(160%);
    border:1px solid var(--line); border-radius:14px;
    box-shadow:0 24px 60px -24px rgba(0,0,0,.85);
  }
  .top.open .nav{display:flex}
  .nav a{
    display:flex; align-items:center; min-block-size:44px; padding-inline:var(--s3);
    border-radius:8px; white-space:nowrap; color:var(--text);
  }
  .nav a:active{background:color-mix(in srgb, var(--khaki) 18%, transparent)}
}

/* ── Первый экран ─────────────────────────────────────────────────────── */
/* Герой — скруглённая карточка, лежащая на блоке с отступом от краёв
   (паттерн Cloudflare): свой фон, свои скругления, объект обрезается её
   нижней кромкой. */
.hero{
  position:relative; overflow:clip;
  /* Как у Cloudflare: на большом десктопе карточка НЕ тянется во всю
     ширину — ограничена и висит по центру с полями. */
  /* Высота тоже ограничена: на высоких экранах (1440+) карточка,
     растянутая до 100svh, оставляла пустую середину между текстом и
     мотором. У образца карточка имеет собственную высоту. */
  inline-size:calc(100% - 20px); max-inline-size:1440px; margin-inline:auto;
  margin-block:10px 0;
  min-block-size:min(calc(100svh - var(--header-h) - 20px), 820px);
  display:flex; align-items:flex-start; padding-block:var(--s8) 0;
  border:1px solid var(--line);
  border-radius:18px;
  background:
    radial-gradient(90% 60% at 50% 108%, rgba(224,138,46,.10), transparent 60%),
    linear-gradient(180deg, #1B1D13, var(--ink) 62%);
}
.hero + section{border-block-start:0}
.hero--center .hero-in{inline-size:100%}
.hero--center .hero-text{
  max-inline-size:64ch; margin-inline:auto; text-align:center;
  position:relative; z-index:2;
}
/* Специфичность выше, чем у базового `.hero h1` с его 15ch, который стоит
   ниже по файлу и иначе перебивает: заголовок жил в узкой коробке и его
   ось уезжала влево от остальных блоков. */
.hero.hero--center h1{max-inline-size:none; margin-inline:auto}
.hero.hero--center .lead{margin-inline:auto}
.hero--center .facts{justify-content:center}
.hero--center .fact{align-items:center; text-align:center}

/* Каркасный купол: нижняя половина экрана, обрезан кромкой */
.dome{
  position:absolute; inset-inline:0; inset-block-end:-7%;
  /* 08.10 (вечер), единственное, что осталось от макета A: мотор крупнее —
     хост выше карточки, карточка режет его кромкой; гайка и ступица видны
     целиком, кончики лопастей уходят за край. */
  block-size:min(118%, 980px); z-index:0; pointer-events:none;
  opacity:0; transition:opacity 1.2s var(--ease);
}
.dome.on{opacity:1}
/* Подсветка из-за горизонта — как у глобуса: тёплое зарево под куполом */
.dome-glow{
  position:absolute; inset-inline:0; inset-block-end:-10%; pointer-events:none;
  block-size:48%; z-index:0;
  background:radial-gradient(58% 88% at 50% 100%,
    rgba(224,138,46,.16), rgba(224,138,46,.05) 46%, transparent 72%);
}
.hero-text{max-inline-size:min(100%, 56ch)}
/* Под текстом — мягкая подложка, чтобы линии не мешали читать */
@media (max-width:960px){
  .hero-text{
    background:radial-gradient(120% 80% at 20% 40%, var(--ink) 38%, transparent 78%);
    padding-inline-end:var(--s5);
  }
}
.hero h1{font-size:clamp(var(--t-2xl), 5.4vw, var(--t-4xl)); max-inline-size:15ch}
.hero .lead{margin-block-start:var(--s5); max-inline-size:52ch; color:var(--text-2); font-size:var(--t-lg)}
.eyebrow{
  font-size:var(--t-sm); color:var(--khaki); margin-block-end:var(--s5);
}

/* Три числа под заголовком — то, чем отличаются от аналога */
.facts{display:flex; flex-wrap:wrap; gap:var(--s7); margin-block-start:var(--s5)}
.fact{display:flex; flex-direction:column; gap:var(--s1)}
.fact b{font-size:clamp(var(--t-xl), 3.4vw, var(--t-2xl)); font-weight:500; color:var(--amber)}
.fact span{font-size:var(--t-sm); color:var(--text-3)}

/* ── Заголовки секций ─────────────────────────────────────────────────── */
.sec-head{max-inline-size:62ch; margin-block-end:var(--s7)}
.sec-head h2{font-size:clamp(var(--t-xl), 3.6vw, var(--t-2xl))}
.sec-head p{margin-block-start:var(--s4); color:var(--text-2)}
.sub{font-size:var(--t-lg); font-weight:600; margin-block:var(--s7) var(--s3)}
.col .sub{margin-block-start:0}
.kicker-unused{
}

/* ── Сравнительная таблица ────────────────────────────────────────────── */
.table-scroll{overflow-x:auto; border:1px solid var(--line); background:var(--ink-2)}
.specs{inline-size:100%; border-collapse:collapse; font-size:var(--t-sm); white-space:nowrap}
.specs th,.specs td{padding:var(--s3) var(--s4); text-align:start; border-block-end:1px solid var(--line-2)}
.specs thead th{
  position:sticky; inset-block-start:0; background:var(--ink-3); color:var(--text-2);
  font-weight:500; font-size:var(--t-xs);
}
.specs tbody tr:hover{background:var(--ink-3)}
.specs tbody tr:last-child td{border-block-end:0}
.specs .t-model{font-size:var(--t-lg); font-weight:500; color:var(--text)}
.specs .t-model a{text-decoration:none}
.specs .t-model a:hover{color:var(--amber)}
.specs .dim{color:var(--text-3)}          /* прочерк там, где данных нет */
.specs td.stat{color:var(--khaki)}
/* Пометка «уточняется» — один раз на строку, а не в каждой ячейке */
.pending{
  display:inline-block; font-family:"PlexMono",monospace; font-size:var(--t-xs);
  letter-spacing:.06em; color:var(--text-3);
  border:1px solid var(--line); padding:2px var(--s2);
}

/* ── Прочее ───────────────────────────────────────────────────────────── */
.note{
  border:1px solid var(--olive); background:color-mix(in srgb, var(--olive) 22%, transparent);
  padding:var(--s4) var(--s5); font-size:var(--t-sm); color:var(--text-2);
  max-inline-size:80ch;
}
.note b{color:var(--text); font-weight:500}

.cols{display:grid; gap:var(--s6)}
@media (min-width:880px){ .cols{grid-template-columns:1.3fr 1fr 1fr; gap:var(--s7)} }
.col h3{font-size:var(--t-lg); margin-block-end:var(--s3)}
.col p{color:var(--text-2)}
.col--lead{padding-inline-end:var(--s5); border-inline-end:1px solid var(--line-2)}
@media (max-width:879px){ .col--lead{padding-inline-end:0; border-inline-end:0} }

.foot{background:#0E0F0A; padding-block:var(--s8); border-block-start:1px solid var(--line-2)}
.foot-in{display:grid; gap:var(--s6)}
@media (min-width:760px){ .foot-in{grid-template-columns:1fr auto; align-items:end} }
.foot small{display:block; color:var(--text-3); font-size:var(--t-sm); line-height:1.6}
.foot a{color:var(--text-2); text-decoration:none}
.foot a:hover{color:var(--text)}

.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.reveal.in{opacity:1; transform:none}
/* Единственный момент на загрузке: текст героя проявляется по строкам, затем
   купол (у него свой .on). Секции ниже показываются сразу (аудит 08.10). */
@keyframes hero-in{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
.hero-text > *{animation:hero-in .7s var(--ease) both}
.hero-text > :nth-child(2){animation-delay:.08s}
.hero-text > :nth-child(3){animation-delay:.16s}
.hero-text > :nth-child(4){animation-delay:.24s}
.hero-text > :nth-child(5){animation-delay:.32s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  *{scroll-behavior:auto !important}
}

/* ── График стенда ────────────────────────────────────────────────────── */
/* График во всю ширину, легенда под ним: список кривых перерос высоту
   графика и продолжит расти — вниз строками-группами места не жалко. */
.chart{display:grid; gap:var(--s6)}

.chart-legend{border-block-start:1px solid var(--line)}
/* На главной внутри лежат группы (каждая — своя строка на всю ширину),
   на странице мотора — плоский ряд чипов с переносом. */
.curves{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2)}
/* Чипы живут в своей колонке справа от номера: при переносе на узком
   экране их левый край остаётся на одной оси, а не уезжает под номер. */
.cgroup{
  flex:1 0 100%;
  display:flex; align-items:flex-start; gap:var(--s2);
  padding-block:var(--s3); border-block-start:1px solid var(--line-2);
}
.cgroup-chips{display:flex; flex-wrap:wrap; gap:var(--s2); min-inline-size:0}
.cgroup:first-child{border-block-start:0}
/* Номер мотора — и якорь строки, и переключатель всей группы. Амбра
   отмечает моторы, чьи кривые сейчас на графике, — по колонке номеров
   видно состояние легенды без чтения чипов. */
.cgroup-id{
  font:inherit; font-family:"PlexMono",monospace; font-size:var(--t-base);
  color:var(--text-3); min-inline-size:3em; text-align:start;
  background:transparent; border:0; padding:0; cursor:pointer;
  min-block-size:40px; letter-spacing:.02em;
  transition:color .2s var(--ease);
}
.cgroup-id:hover{color:var(--text-2)}
.cgroup-id.on{color:var(--amber)}
/* Невыбранный чип — тихий, без рамки: вес и контраст достаются только
   тем кривым, что реально на графике. */
.curve{
  display:flex; align-items:center; gap:var(--s2); inline-size:auto;
  font:inherit; font-size:var(--t-sm); text-align:start; color:var(--text-3);
  background:transparent; border:1px solid transparent; cursor:pointer;
  padding:var(--s2) var(--s3); min-block-size:40px;
  transition:color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.curve:hover{border-color:var(--line-2)}
.curve:hover{color:var(--text-2); background:var(--ink-2)}
.curve.on{color:var(--text); border-color:var(--line); background:var(--ink-2)}
.curve .swatch{
  inline-size:12px; block-size:12px; flex:0 0 auto; border:1px solid var(--c);
  background:transparent; transition:background .2s var(--ease);
}
.curve.on .swatch{background:var(--c)}
.curve-l{font-family:"PlexMono",monospace; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.curve .warn{
  flex:0 0 auto; color:var(--amber);
  font-family:"PlexMono",monospace; font-weight:500; cursor:help;
}

.metrics{display:flex; flex-wrap:wrap; gap:var(--s1); margin-block-end:var(--s4)}
.metric{
  font:inherit; font-size:var(--t-sm); color:var(--text-3); cursor:pointer;
  background:transparent; border:1px solid var(--line-2);
  padding:0 var(--s4); min-block-size:44px;
  transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.metric:hover{color:var(--text-2)}
.metric.on{color:var(--ink); background:var(--khaki); border-color:var(--khaki)}

.chart-main{min-inline-size:0}
.chart-svg{inline-size:100%; block-size:auto; display:block; overflow:visible}
.chart-svg .grid{stroke:var(--line-2); stroke-width:1}
.chart-svg .axis{stroke:var(--line); stroke-width:1}
.chart-svg .ln{fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.chart-svg .pt{stroke:var(--ink); stroke-width:1.5}
.chart-svg .pt:hover{r:5.5}
.chart-svg .ax,.chart-svg .ax-t{
  font-family:"PlexMono",monospace; font-size:11px; fill:var(--text-3);
  font-variant-numeric:tabular-nums;
}
.chart-svg .ax-t{fill:var(--text-2); font-size:12px}
.chart-empty{color:var(--text-3); padding-block:var(--s8); text-align:center}

.bulk-row{display:flex; gap:var(--s1); padding-block:var(--s3)}
.bulk{
  font:inherit; font-size:var(--t-xs);
  color:var(--text-3); background:transparent; border:1px solid var(--line-2);
  padding:0 var(--s3); min-block-size:44px; cursor:pointer;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.bulk:hover:not(:disabled){color:var(--text); border-color:var(--line)}
.bulk:disabled{opacity:.35; cursor:default}

/* ── Разнесённая схема ────────────────────────────────────────────────────
   Детали разъезжаются, когда блок попадает в поле зрения: это показывает
   порядок сборки, а не «просто двигается». Наведение на пункт списка
   подсвечивает деталь и наоборот.                                          */
.exploded{display:grid; gap:var(--s7); align-items:start}
@media (min-width:900px){ .exploded{grid-template-columns:minmax(220px,320px) minmax(0,1fr)} }

.exploded-fig{margin:0; display:flex; justify-content:center}
.exploded-svg{inline-size:min(100%,300px); block-size:auto}

.exploded-svg .ex-axis{stroke:var(--line); stroke-width:1; stroke-dasharray:3 5}
.exploded-svg .ex-body{fill:var(--ink-3); stroke:var(--khaki); stroke-width:1.5}
.exploded-svg .ex-hint{stroke:var(--line); stroke-width:1; fill:none}
.exploded-svg .ex-hole{fill:var(--ink); stroke:none}
.exploded-svg .ex-mag rect{fill:var(--olive-lt); stroke:none}

/* Собрано → разнесено */
.exploded-svg .part{transform:translateY(var(--dy,0)); transition:transform 1.1s var(--ease)}
.exploded.in .exploded-svg .part{transform:none}

/* Подсветка детали */
.exploded-svg .part.hot .ex-body{stroke:var(--amber); fill:#20200F}
.exploded-svg .part.hot .ex-mag rect{fill:var(--amber)}
/* Номера деталей на схеме и подпись под ней — только на телефоне (Свет 08.10:
   подсветка без подписей на телефоне бессмысленна; на десктопе список рядом). */
.exploded-svg .ex-num{display:none}
.exploded-svg .ex-num circle{fill:var(--ink); stroke:var(--khaki); stroke-width:1}
.exploded-svg .ex-num line{stroke:var(--line); stroke-width:1}
.exploded-svg .ex-num text{fill:var(--text-2); font-family:"PlexMono",monospace; font-size:11px; text-anchor:middle; dominant-baseline:central}
.exploded-svg .part.hot .ex-num circle{stroke:var(--amber)}
.exploded-svg .part.hot .ex-num text{fill:var(--amber)}
.ex-cap{display:none}
@media (max-width:900px){
  .exploded-svg .ex-num{display:block}
  .ex-cap{display:block; text-align:center; min-block-size:1.8em; margin-block-start:var(--s3);
    color:var(--text-2); font-size:var(--t-sm)}
  .exploded-fig{flex-direction:column; align-items:center}
}

.parts{list-style:none; margin:0; padding:0; counter-reset:p}
.parts li{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s3) var(--s5);
  padding-block:var(--s4); border-block-end:1px solid var(--line-2); cursor:default;
  transition:background .2s var(--ease);
}
.parts li::before{
  counter-increment:p; content:counter(p,decimal-leading-zero);
  font-family:"PlexMono",monospace; font-size:var(--t-xs); color:var(--text-3);
  font-variant-numeric:tabular-nums;
}
.parts li.hot{background:var(--ink-2)}
.parts li.hot::before{color:var(--amber)}
.parts h3{font-size:var(--t-base); font-weight:500; grid-column:2}
.parts p{color:var(--text-2); font-size:var(--t-sm); grid-column:2; margin-block-start:var(--s1)}

@media (prefers-reduced-motion:reduce){
  .exploded-svg .part{transform:none; transition:none}
}

/* ── Страница мотора ──────────────────────────────────────────────────── */
.spec-list{
  margin:0; display:grid; gap:0;
  border-block-start:1px solid var(--line);
}
@media (min-width:900px){ .spec-list{grid-template-columns:1fr 1fr; column-gap:var(--s8)} }
.spec-row{
  display:grid; grid-template-columns:minmax(150px,1fr) minmax(0,1.2fr); gap:var(--s4);
  padding-block:var(--s4); border-block-end:1px solid var(--line-2); align-items:baseline;
}
.spec-row dt{color:var(--text-3); font-size:var(--t-sm)}
.spec-row dd{
  margin:0; color:var(--text);
  font-family:"PlexMono",ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums;
}
.spec-row dd.dim{color:var(--text-3)}

.sub{font-size:var(--t-lg); margin-block-end:var(--s4)}
.plain{list-style:none; margin:0; padding:0; display:grid; gap:var(--s3)}
.plain li{
  color:var(--text-2); font-size:var(--t-sm);
  padding-inline-start:var(--s4); position:relative;
}
.plain li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.65em;
  inline-size:6px; block-size:1px; background:var(--khaki);
}
/* Двуязычные пункты: лишний язык прячется по lang у <html> */
html[lang="ru"] .bi [lang="en"]{display:none}
html[lang="en"] .bi [lang="ru"]{display:none}

.src{
  margin-block-start:var(--s5); font-size:var(--t-xs); color:var(--text-3);
  max-inline-size:90ch; line-height:1.6;
}

/* Шапка внутренней страницы — вместо первого экрана */
.page-head{padding-block:clamp(var(--s7), 9vh, var(--s9)) var(--s7); border-block-end:1px solid var(--line-2)}
.page-head h1{font-size:clamp(var(--t-xl), 4.4vw, var(--t-3xl)); margin-block-start:var(--s4)}
.page-head .lead{margin-block-start:var(--s3); color:var(--text-2); font-size:var(--t-lg)}
.back{
  display:inline-flex; align-items:center; gap:var(--s2); text-decoration:none;
  font-size:var(--t-sm); color:var(--text-3); padding-block:11px;
  transition:color .2s var(--ease);
}
.back:hover{color:var(--text)}
.back span{unicode-bidi:isolate}







/* ── Карточки модельного ряда ─────────────────────────────────────────── */
.cards{
  display:grid; gap:var(--s6) var(--s4);
  grid-template-columns:repeat(auto-fit, minmax(136px, 1fr));
}
/* На широком экране все восемь — одной строкой (единый масштаб силуэтов) */
@media (min-width:1100px){ .cards{grid-template-columns:repeat(8, 1fr)} }
.card{
  display:flex; flex-direction:column; text-decoration:none;
  padding-block-start:var(--s4); border-block-start:1px solid var(--line-2);
  transition:border-color .25s var(--ease);
}
.card:hover{border-color:var(--khaki)}
.card.lead{border-block-start-color:var(--amber)}
.card.lead .c-id{color:var(--amber)}
.card svg{inline-size:100%; block-size:auto; display:block; margin-block:var(--s3) var(--s4)}
.card path{fill:var(--ink-3); stroke:var(--khaki); stroke-width:1.1; transition:stroke .25s var(--ease)}
.card.est path{fill:transparent; stroke:var(--text-3); stroke-dasharray:4 3}
.card:hover path{stroke:var(--amber)}
.c-id{
  font-family:"PlexMono",ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums;
  font-size:var(--t-lg); color:var(--text); letter-spacing:.02em;
}
.card:hover .c-id{color:var(--amber)}
.c-st{
  font-family:"PlexMono",ui-monospace,Menlo,monospace; font-size:var(--t-xs);
  color:var(--text-3); margin-block-start:2px;
}
.c-specs{margin-block-start:auto; border-block-start:1px solid var(--line-2)}
.c-row{
  display:flex; justify-content:space-between; gap:var(--s2);
  padding-block:5px; border-block-end:1px solid var(--line-2);
  font-size:var(--t-xs);
}
.c-row:last-child{border-block-end:0}
.c-row span{color:var(--text-3); white-space:nowrap}
.c-row b{
  font-weight:400; color:var(--text-2); text-align:end;
  font-family:"PlexMono",ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums;
}
.c-row.dim b{color:var(--text-3)}
.c-pending{
  margin-block-start:auto; padding-block-start:var(--s3);
  border-block-start:1px solid var(--line-2);
  font-size:var(--t-xs); color:var(--text-3); line-height:1.5;
}

/* ── Реестры Минпромторга ─────────────────────────────────────────────── */
/* Бейдж реестров — акцентная плашка, а не строчка-шёпот: амбра, рамка,
   заливка. Единственный цветной элемент героя кроме цифр фактов. */
.reg-badge{
  display:inline-flex; align-items:center; gap:var(--s3);
  margin-block-start:var(--s6);
  padding:10px var(--s5);
  border:1px solid color-mix(in srgb, var(--amber) 55%, transparent);
  border-radius:999px;
  background:color-mix(in srgb, var(--amber) 12%, transparent);
  font-size:var(--t-sm); color:var(--amber);
}
.reg-badge svg{inline-size:17px; block-size:17px; flex:0 0 auto}
.hero--center .reg-badge{margin-inline:auto}
.hero--center .hero-text{display:flex; flex-direction:column; align-items:center}
.hero--center .hero-text > *{inline-size:100%}
.hero--center .reg-badge{inline-size:auto}

.reg{
  margin-block-start:var(--s6); max-inline-size:72ch;
  border:1px solid var(--olive); border-radius:10px;
  background:color-mix(in srgb, var(--olive) 14%, transparent);
  padding:var(--s5) var(--s5);
}
.reg h3{font-size:var(--t-base); font-weight:600; margin-block-end:var(--s2); color:var(--text)}
.reg p{color:var(--text-2); font-size:var(--t-sm); line-height:1.65}

/* Узкий экран: три факта держатся одной строкой */
/* Узкий экран (замечание заказчика 08.10: «забит текстом, пилюля на моторе,
   шумит»): без ряда фактов, плашка реестров — строкой текста, купол в своей
   полосе внизу, под текстом ничего не движется. */
@media (max-width:600px){
  .hero--center .facts{display:none}
  /* 09.10 (Свет: «фраза теряется»): плашка возвращается амбровой, как на
     десктопе, но с тёмной подложкой и размытием — читается, даже если линии
     винта подходят под неё (08.10 жаловался на «пилюлю на моторе»). */
  .reg-badge{
    justify-content:center; padding:9px var(--s4); font-weight:500;
    background:
      linear-gradient(0deg, color-mix(in srgb, var(--amber) 14%, transparent), color-mix(in srgb, var(--amber) 14%, transparent)),
      color-mix(in srgb, var(--ink) 85%, transparent);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  }
  .hero .lead{font-size:var(--t-base)}
  .hero-text{padding-inline-end:0; background:none}
  /* Свет 08.10 (вечер): «слишком много пустоты между винтом и текстом» —
     карточка на телефоне не тянется до 820px, купол выше и крупнее. */
  .hero{min-block-size:min(calc(100svh - var(--header-h) - 20px), 600px)}
  .dome{block-size:85%; inset-block-end:-6%}
  .dome-glow{block-size:34%}
}

/* ── Типовые установки: три схемы в чертёжном регистре ────────────────── */
.uses{margin-block:0 var(--s7)}
.uses-row{
  display:grid; gap:var(--s6);
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  max-inline-size:820px;
}
/* На узких экранах auto-fit давал два столбца и «Г» из трёх схем —
   ниже порога трёх колонок ставим их в один столбик. */
@media (max-width:720px){
  .uses-row{grid-template-columns:1fr; justify-items:center; gap:var(--s5)}
  .use svg{max-inline-size:260px}
}
.use{margin:0; text-align:center}
.use svg{inline-size:100%; max-inline-size:230px; block-size:auto; overflow:visible}
.use .u-body{fill:none; stroke:var(--khaki); stroke-width:1.4; opacity:.55}
.use .u-line{fill:none; stroke:var(--khaki); stroke-width:1.2; opacity:.55}
.use .u-motor rect{fill:color-mix(in srgb, var(--amber) 18%, transparent); stroke:var(--amber); stroke-width:1.4}
.use .u-motor path{stroke:var(--amber); stroke-width:1.4; fill:none}
.use .u-prop{fill:none; stroke:var(--text-2); stroke-width:1.2; opacity:.7}
.use .u-hub{fill:var(--amber); stroke:none}
.use figcaption{
  margin-block-start:var(--s2);
  font-family:"PlexMono",ui-monospace,Menlo,monospace; font-size:var(--t-xs);
  letter-spacing:.05em; color:var(--text-3);
}