/* =====================================================================
   Плазкат-Аква — оформление сайта. ЕДИНСТВЕННЫЙ файл стилей.
   Ред. 2 · 03.10.2026 · направление «инженерная документация»

   1. ТОКЕНЫ     — цвета, шрифты, размеры, отступы. Перекраска сайта = правка этого блока.
   2. ОСНОВА     — сброс, типографика, контейнер.
   3. КОМПОНЕНТЫ — по разделу на компонент, значения только через var(--…).
   4. РЫБА       — серые пометки «что здесь будет». Скрыть все: .fish{display:none}.

   Смысловые классы HTML не меняются при редизайне.
   ===================================================================== */

/* Шрифты лежат на сайте (public/fonts), Google Fonts не нужен. Лицензия OFL. */
@font-face{ font-family:"Golos Text"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/golos-text-cyrillic-400-normal.woff2") format("woff2"); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116 }
@font-face{ font-family:"Golos Text"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/golos-text-latin-400-normal.woff2") 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:"Golos Text"; font-style:normal; font-weight:500; font-display:swap; src:url("/fonts/golos-text-cyrillic-500-normal.woff2") format("woff2"); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116 }
@font-face{ font-family:"Golos Text"; font-style:normal; font-weight:500; font-display:swap; src:url("/fonts/golos-text-latin-500-normal.woff2") 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:"Golos Text"; font-style:normal; font-weight:600; font-display:swap; src:url("/fonts/golos-text-cyrillic-600-normal.woff2") format("woff2"); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116 }
@font-face{ font-family:"Golos Text"; font-style:normal; font-weight:600; font-display:swap; src:url("/fonts/golos-text-latin-600-normal.woff2") 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:"Golos Text"; font-style:normal; font-weight:700; font-display:swap; src:url("/fonts/golos-text-cyrillic-700-normal.woff2") format("woff2"); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116 }
@font-face{ font-family:"Golos Text"; font-style:normal; font-weight:700; font-display:swap; src:url("/fonts/golos-text-latin-700-normal.woff2") 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:"Unbounded"; font-style:normal; font-weight:500; font-display:swap; src:url("/fonts/unbounded-cyrillic-500-normal.woff2") format("woff2"); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116 }
@font-face{ font-family:"Unbounded"; font-style:normal; font-weight:500; font-display:swap; src:url("/fonts/unbounded-latin-500-normal.woff2") 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:"Unbounded"; font-style:normal; font-weight:600; font-display:swap; src:url("/fonts/unbounded-cyrillic-600-normal.woff2") format("woff2"); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116 }
@font-face{ font-family:"Unbounded"; font-style:normal; font-weight:600; font-display:swap; src:url("/fonts/unbounded-latin-600-normal.woff2") 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:"JetBrains Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/jetbrains-mono-cyrillic-400-normal.woff2") format("woff2"); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116 }
@font-face{ font-family:"JetBrains Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/jetbrains-mono-latin-400-normal.woff2") 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:"JetBrains Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("/fonts/jetbrains-mono-cyrillic-500-normal.woff2") format("woff2"); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116 }
@font-face{ font-family:"JetBrains Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("/fonts/jetbrains-mono-latin-500-normal.woff2") 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 }


/* ---------- 1. ТОКЕНЫ ---------------------------------------------- */
:root{
  /* поверхность и текст */
  --c-bg:        #F5F7F9;   /* фон страницы — холодный светлый */
  --c-surface:   #FFFFFF;   /* карточки, таблицы, формы */
  --c-sunken:    #EBEFF3;   /* полосы-разделы */
  --c-text:      #15212C;   /* основной текст */
  --c-muted:     #5A6876;   /* второстепенный */
  --c-line:      #D3DBE2;   /* линии */
  --c-line-strong:#B5C2CD;

  /* бренд */
  --c-brand:     #1F4E79;   /* стальной синий ПЛАЗКАТ */
  --c-brand-ink: #0F2A44;   /* шапка, подвал */
  --c-accent:    #00838F;   /* бирюза «Аква» — действия */
  --c-accent-hover:#006B75;
  --c-accent-soft:#DDF0F1;
  --c-on-dark:   #E8EEF3;   /* текст на тёмном */
  --c-on-dark-muted:#9DB0C2;
  --c-on-accent: #FFFFFF;
  --c-grid:      rgba(31,78,121,.07);  /* миллиметровка */
  --c-fish:      #98A4AF;
  --c-sludge:    #8A6A3F;   /* линия осадка на схемах */

  /* шрифты */
  --f-body:    "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-display: "Unbounded", "Golos Text", system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* шкала текста */
  --fs-xs: .78rem; --fs-s: .9rem; --fs-m: 1rem; --fs-l: 1.2rem;
  --fs-xl: clamp(1.4rem, 1.1rem + 1vw, 1.85rem);
  --fs-xxl: clamp(1.7rem, 1.2rem + 1.7vw, 2.45rem);
  --lh-body: 1.6; --lh-heading: 1.18;

  /* сетка и отступы */
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 80px;
  --section-gap: clamp(48px, 7vw, 88px);

  /* форма элементов */
  --radius: 4px;
  --radius-l: 6px;
  --border: 1px solid var(--c-line);
  --shadow: 0 1px 2px rgba(15,42,68,.06), 0 4px 16px rgba(15,42,68,.04);
  --shadow-hover: 0 2px 4px rgba(15,42,68,.08), 0 10px 28px rgba(15,42,68,.08);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --c-bg:#0E151B; --c-surface:#151F28; --c-sunken:#111A22; --c-text:#E4EBF1; --c-muted:#93A3B2;
  --c-line:#24323E; --c-line-strong:#33475A; --c-brand:#8CB6DF; --c-brand-ink:#0A1118;
  --c-accent:#3FBAC4; --c-accent-hover:#5FCAD3; --c-accent-soft:#11313A; --c-on-accent:#06141A;
  --c-on-dark:#E4EBF1; --c-on-dark-muted:#8DA0B2; --c-grid:rgba(140,182,223,.06); --c-fish:#5E6B77; --c-sludge:#C49A62;
  --shadow:none; --shadow-hover:0 0 0 1px var(--c-line-strong); color-scheme:dark }}
:root[data-theme="dark"]{
  --c-bg:#0E151B; --c-surface:#151F28; --c-sunken:#111A22; --c-text:#E4EBF1; --c-muted:#93A3B2;
  --c-line:#24323E; --c-line-strong:#33475A; --c-brand:#8CB6DF; --c-brand-ink:#0A1118;
  --c-accent:#3FBAC4; --c-accent-hover:#5FCAD3; --c-accent-soft:#11313A; --c-on-accent:#06141A;
  --c-on-dark:#E4EBF1; --c-on-dark-muted:#8DA0B2; --c-grid:rgba(140,182,223,.06); --c-fish:#5E6B77; --c-sludge:#C49A62;
  --shadow:none; --shadow-hover:0 0 0 1px var(--c-line-strong); color-scheme:dark }


/* ---------- 2. ОСНОВА ---------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box }
[hidden]{ display:none !important }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } *{ transition:none!important } }
body{ margin:0; background:var(--c-bg); color:var(--c-text); font-family:var(--f-body);
  font-size:var(--fs-m); line-height:var(--lh-body); -webkit-font-smoothing:antialiased }
img{ max-width:100%; height:auto }
a{ color:var(--c-brand); text-underline-offset:3px; text-decoration-thickness:1px }
a:hover{ color:var(--c-accent) }
h1,h2,h3{ line-height:var(--lh-heading); text-wrap:balance; margin:0 0 var(--sp-4); color:var(--c-text) }
h1{ font-family:var(--f-display); font-weight:600; font-size:var(--fs-xxl); letter-spacing:-.01em }
h2{ font-family:var(--f-body); font-weight:700; font-size:var(--fs-xl); letter-spacing:-.01em }
h3{ font-weight:600; font-size:var(--fs-l) }
p{ margin:0 0 var(--sp-4); max-width:70ch }
.container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter) }
:focus-visible{ outline:2px solid var(--c-accent); outline-offset:2px }
::selection{ background:var(--c-accent-soft) }


/* ---------- 3. КОМПОНЕНТЫ ------------------------------------------ */

/* 3.1 Шапка и меню — тёмная полоса */
.site-header{ background:var(--c-brand-ink); color:var(--c-on-dark); position:sticky;
  top:env(safe-area-inset-top,0px); z-index:20; border-bottom:2px solid var(--c-accent) }
.site-header .container{ display:flex; align-items:center; gap:var(--sp-3) var(--sp-6); padding-block:var(--sp-3) }
.logo{ font-family:var(--f-display); font-weight:600; font-size:1.05rem; letter-spacing:.04em;
  color:var(--c-on-dark); text-decoration:none; white-space:nowrap }
.logo span{ color:var(--c-accent); font-weight:500 }
.logo:hover{ color:var(--c-on-dark) }
.nav{ display:flex; gap:var(--sp-1) var(--sp-4); flex:1; min-width:0; flex-wrap:nowrap; white-space:nowrap }
.nav a{ color:var(--c-on-dark-muted); text-decoration:none; font-size:var(--fs-s); font-weight:500;
  padding-block:var(--sp-1); border-bottom:1px solid transparent; transition:color .15s, border-color .15s }
.nav a:hover{ color:var(--c-on-dark); border-bottom-color:var(--c-accent) }
.header-contacts{ display:flex; gap:var(--sp-4); align-items:center; font-family:var(--f-mono);
  font-size:var(--fs-s); color:var(--c-on-dark); white-space:nowrap }
@media (max-width:1240px){
  .site-header .container{ flex-wrap:wrap }
  .nav{ order:3; flex-basis:100%; flex-wrap:nowrap; overflow-x:auto; padding-bottom:var(--sp-1); scrollbar-width:none }
  .nav::-webkit-scrollbar{ display:none }
  .header-contacts{ margin-left:auto } }
/* телефон и почта друг под другом — по ширине как один телефон */
.header-contacts__lines{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; line-height:1.25 }
.header-contacts__lines a{ color:var(--c-on-dark); text-decoration:none; border-bottom:1px solid transparent }
.header-contacts__lines a:hover{ border-bottom-color:var(--c-accent) }
.header-contacts__mail{ font-size:.92em; color:var(--c-on-dark-muted) !important }
@media (max-width:560px){ .header-contacts__lines{ display:none } }

/* 3.2 Кнопки */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  padding:.72em 1.35em; border-radius:var(--radius); border:1px solid var(--c-accent);
  font:inherit; font-size:var(--fs-s); font-weight:600; letter-spacing:.01em; line-height:1.2;
  text-decoration:none; cursor:pointer; transition:background .15s, color .15s, border-color .15s }
.btn--primary{ background:var(--c-accent); color:var(--c-on-accent) }
.btn--primary:hover{ background:var(--c-accent-hover); border-color:var(--c-accent-hover); color:var(--c-on-accent) }
.btn--ghost{ background:transparent; color:var(--c-accent) }
.btn--ghost:hover{ background:var(--c-accent-soft); color:var(--c-accent) }
.site-header .btn{ padding:.6em 1.1em }

/* 3.3 Хлебные крошки */
.crumbs{ font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--c-muted);
  padding-block:var(--sp-5) 0; letter-spacing:.02em }
.crumbs a{ color:var(--c-muted); text-decoration:none }
.crumbs a:hover{ color:var(--c-accent) }

/* 3.4 Первый экран — миллиметровка */
.hero{ padding-block:clamp(40px, 6vw, 72px); border-bottom:var(--border);
  background-color:var(--c-surface);
  background-image:
    linear-gradient(var(--c-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-grid) 1px, transparent 1px);
  background-size:24px 24px; background-position:-1px -1px }
.crumbs + .hero, .crumbs ~ .hero{ margin-top:var(--sp-4) }
.hero .container{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:center }
@media (max-width:900px){ .hero .container{ grid-template-columns:minmax(0,1fr) } }
.hero h1{ max-width:24ch; line-height:1.15 }
.hero__lead{ font-size:var(--fs-l); color:var(--c-muted); max-width:52ch }
.hero__actions{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-5) }

/* 3.5 Секции и полосы */
.section{ padding-block:var(--section-gap) 0 }
main > .section:last-child{ padding-bottom:var(--section-gap) }
.section h2{ padding-top:var(--sp-3); border-top:2px solid var(--c-text); display:inline-block; min-width:min(100%, 240px) }
.section--band{ background:var(--c-sunken); padding-block:var(--section-gap); margin-top:var(--section-gap);
  border-block:var(--border) }
.section--band + .section{ padding-top:var(--section-gap) }
.hero + .section--band{ margin-top:0; border-top:0 }
.section__lead{ color:var(--c-muted) }

/* 3.6 Карточки */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); gap:var(--sp-4) }
.card{ position:relative; border:var(--border); border-radius:var(--radius-l); padding:var(--sp-5);
  background:var(--c-surface); box-shadow:var(--shadow); text-decoration:none; color:inherit;
  display:flex; flex-direction:column; gap:var(--sp-2); transition:box-shadow .15s, border-color .15s }
.card::before{ content:""; position:absolute; inset:-1px -1px auto -1px; height:3px; background:var(--c-accent);
  border-radius:var(--radius-l) var(--radius-l) 0 0; transform:scaleX(0); transform-origin:left; transition:transform .2s }
.card:hover{ border-color:var(--c-line-strong); box-shadow:var(--shadow-hover); color:inherit }
.card:hover::before{ transform:scaleX(1) }
.card__title{ font-weight:600; color:var(--c-text); line-height:1.35 }
.card__text{ font-size:var(--fs-s); color:var(--c-muted) }
.card__meta{ font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--c-accent); margin-top:auto; letter-spacing:.02em }
.split{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-6) }
@media (max-width:860px){ .split{ grid-template-columns:minmax(0,1fr) } }
.split h3{ font-family:var(--f-mono); font-size:var(--fs-xs); font-weight:500; text-transform:uppercase;
  letter-spacing:.1em; color:var(--c-muted); margin-bottom:var(--sp-3) }

/* 3.7 Шаги работы — как этапы в спецификации */
.steps{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr)); gap:0; counter-reset:step;
  border:var(--border); border-radius:var(--radius-l); background:var(--c-surface); overflow:hidden }
.steps li{ counter-increment:step; padding:var(--sp-5) var(--sp-4); border-right:var(--border); border-bottom:var(--border); margin:0 -1px -1px 0 }
.steps li::before{ content:counter(step,decimal-leading-zero); display:block; font-family:var(--f-mono);
  font-size:var(--fs-s); font-weight:500; color:var(--c-accent); margin-bottom:var(--sp-3) }
.steps b{ display:block; margin-bottom:var(--sp-1); line-height:1.3 }
.steps span{ font-size:var(--fs-s); color:var(--c-muted); display:block }
.steps--scheme{ margin-top:var(--sp-5) }

/* 3.8 Цифры */
.metrics{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); gap:var(--sp-5) }
.metric{ border-left:2px solid var(--c-accent); padding-left:var(--sp-4) }
.metric b{ display:block; font-family:var(--f-display); font-weight:500; font-size:var(--fs-xl);
  color:var(--c-brand); font-variant-numeric:tabular-nums; line-height:1.1 }
.metric span{ font-size:var(--fs-s); color:var(--c-muted) }

/* 3.9 Таблицы — как в нормативном документе */
.table-wrap{ overflow-x:auto; border:var(--border); border-radius:var(--radius-l); background:var(--c-surface) }
.data-table{ width:100%; border-collapse:collapse; font-size:var(--fs-s); font-variant-numeric:tabular-nums }
.data-table th,.data-table td{ padding:var(--sp-3) var(--sp-4); border-bottom:var(--border); text-align:left; vertical-align:top }
.data-table th{ background:var(--c-brand-ink); color:var(--c-on-dark); font-weight:600; font-size:var(--fs-xs);
  text-transform:uppercase; letter-spacing:.06em; white-space:nowrap }
.data-table td:not(:first-child){ font-family:var(--f-mono); font-size:.86rem }
.data-table tbody tr:nth-child(even) td{ background:var(--c-bg) }
.data-table tbody tr:hover td{ background:var(--c-accent-soft) }
.data-table tr:last-child td{ border-bottom:0 }
.table-source{ font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--c-muted); margin-top:var(--sp-3);
  padding-left:var(--sp-3); border-left:2px solid var(--c-line-strong); max-width:90ch }

/* 3.10 Иллюстрации */
.figure{ margin:0; border:1px dashed var(--c-line-strong); border-radius:var(--radius-l); background:var(--c-surface);
  aspect-ratio:16/10; max-width:100%; display:grid; place-items:center; text-align:center; padding:var(--sp-4);
  color:var(--c-muted); font-family:var(--f-mono); font-size:var(--fs-xs) }
.figure--scheme{ aspect-ratio:21/7 }
.figure--img{ border:0; padding:0; background:none; aspect-ratio:auto; display:block; position:relative }
.figure--img img{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--radius-l);
  box-shadow:var(--shadow-hover) }
.figure--img::after{ content:""; position:absolute; inset:10px -10px -10px 10px; border:1px solid var(--c-accent);
  border-radius:var(--radius-l); z-index:-1 }
.hero .figure--img{ z-index:0 }
.figure--img figcaption{ font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--c-muted); margin-top:var(--sp-3) }

/* 3.11 Вопросы и ответы */
.faq{ border-top:var(--border); max-width:860px }
.faq details{ border-bottom:var(--border) }
.faq summary{ cursor:pointer; font-weight:600; padding:var(--sp-4) var(--sp-6) var(--sp-4) 0; list-style:none; position:relative }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%);
  font-family:var(--f-mono); font-size:1.3rem; font-weight:400; color:var(--c-accent); transition:transform .2s }
.faq details[open] summary::after{ transform:translateY(-50%) rotate(45deg) }
.faq details p{ color:var(--c-muted); padding-bottom:var(--sp-4) }

/* 3.12 Форма заявки */
.lead-form{ border-radius:var(--radius-l); padding:clamp(20px,4vw,40px); background:var(--c-brand-ink); color:var(--c-on-dark);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-4) var(--sp-5);
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:24px 24px }
@media (max-width:700px){ .lead-form{ grid-template-columns:minmax(0,1fr) } }
.lead-form h2{ color:var(--c-on-dark); border:0; padding:0; margin:0 }
.lead-form p{ color:var(--c-on-dark-muted); margin:0 }
.lead-form h2,.lead-form p,.lead-form .field--wide,.lead-form .lead-form__foot{ grid-column:1/-1 }
.lead-form a{ color:var(--c-on-dark) }
.field{ display:flex; flex-direction:column; gap:var(--sp-2); font-size:var(--fs-xs); font-family:var(--f-mono);
  letter-spacing:.04em; text-transform:uppercase; color:var(--c-muted) }
.field input,.field select,.field textarea{ font:inherit; font-family:var(--f-body); font-size:var(--fs-m); text-transform:none; letter-spacing:0;
  padding:var(--sp-3); border:1px solid var(--c-line-strong); border-radius:var(--radius); background:var(--c-surface); color:var(--c-text); min-width:0 }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--c-accent); box-shadow:0 0 0 3px var(--c-accent-soft) }
.lead-form .field{ color:var(--c-on-dark-muted) }
.lead-form .field input,.lead-form .field select,.lead-form .field textarea{ border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:var(--c-on-dark) }
.lead-form .field input::placeholder{ color:var(--c-on-dark-muted) }
.lead-form .field select option{ color:#15212C }
.lead-form .field input:focus,.lead-form .field select:focus,.lead-form .field textarea:focus{ border-color:var(--c-accent); background:rgba(255,255,255,.1); box-shadow:none }
.field input[type=file]{ padding:var(--sp-2); font-size:var(--fs-s) }
.lead-form__foot{ display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-5); align-items:center; font-size:var(--fs-xs); color:var(--c-on-dark-muted) }
.lead-form__status{ color:var(--c-accent); font-size:var(--fs-s) }
.lead-form .btn--ghost{ color:var(--c-on-dark); border-color:rgba(255,255,255,.3) }
.lead-form .btn--ghost:hover{ background:rgba(255,255,255,.08) }

/* 3.13 Кейсы */
.case-card{ border-top:3px solid var(--c-brand) }
.case-card::before{ display:none }
.case-card .card__title{ font-size:var(--fs-l); font-family:var(--f-body) }
.passport{ display:grid; grid-template-columns:max-content minmax(0,1fr); margin:0; max-width:860px;
  border:var(--border); border-radius:var(--radius-l); background:var(--c-surface); overflow:hidden }
.passport dt,.passport dd{ padding:var(--sp-3) var(--sp-4); border-bottom:var(--border); margin:0 }
.passport dt{ font-family:var(--f-mono); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em;
  color:var(--c-muted); background:var(--c-bg); border-right:var(--border) }
.passport dd{ font-weight:500 }
.passport dt:nth-last-of-type(1),.passport dd:last-child{ border-bottom:0 }
@media (max-width:560px){ .passport{ grid-template-columns:minmax(0,1fr) } .passport dt{ border-right:0; border-bottom:0; padding-bottom:0 } }
.gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr)); gap:var(--sp-4); margin-top:var(--sp-5) }
.gallery figure{ margin:0 }
.gallery img{ display:block; width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--radius-l); box-shadow:var(--shadow) }
.gallery figcaption{ font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--c-muted); margin-top:var(--sp-2) }

/* 3.14 Калькулятор */
.calc{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--sp-6) }
@media (max-width:860px){ .calc{ grid-template-columns:minmax(0,1fr) } }
.calc__result{ border:2px solid var(--c-accent); border-radius:var(--radius-l); padding:var(--sp-5); background:var(--c-surface) }
.calc__result > b{ font-family:var(--f-display); font-size:var(--fs-xxl); color:var(--c-accent); display:block }

/* 3.15 Списки */
.ticks{ list-style:none; padding:0; margin:0 0 var(--sp-4); display:grid; gap:var(--sp-3); max-width:80ch }
.ticks li{ position:relative; padding-left:var(--sp-6) }
.ticks li::before{ content:""; position:absolute; left:0; top:.72em; width:18px; height:2px; background:var(--c-accent) }

/* 3.16 Полоса долей */
.bar{ display:flex; height:32px; border-radius:var(--radius); overflow:hidden }
.bar span{ flex:1; display:grid; place-items:center; font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--c-on-dark); background:var(--c-brand) }
.bar span:nth-child(even){ background:var(--c-accent); color:var(--c-on-accent) }

/* 3.17 Подвал */
.site-footer{ background:var(--c-brand-ink); color:var(--c-on-dark-muted); margin-top:var(--section-gap);
  padding-block:var(--sp-8) var(--sp-7); font-size:var(--fs-s); border-top:2px solid var(--c-accent) }
.site-footer .container{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); gap:var(--sp-6) }
.site-footer b{ display:block; font-family:var(--f-mono); font-size:var(--fs-xs); font-weight:500; text-transform:uppercase;
  letter-spacing:.1em; color:var(--c-on-dark); margin-bottom:var(--sp-4) }
.site-footer a{ color:var(--c-on-dark-muted); display:block; margin-bottom:var(--sp-2); text-decoration:none }
.site-footer a:hover{ color:var(--c-on-dark) }
.site-footer p{ margin-bottom:var(--sp-3) }

/* 3.18 Нижняя кнопка на мобильном */
.mobile-cta{ display:none }
@media (max-width:700px){
  .mobile-cta{ display:block; position:sticky; bottom:0; z-index:15; padding:var(--sp-3) var(--gutter);
    padding-bottom:calc(var(--sp-3) + env(safe-area-inset-bottom,0px)); background:var(--c-surface); border-top:var(--border) }
  .mobile-cta .btn{ display:flex; width:100% } }

/* 3.19 Оглавление предпросмотра */
.toc{ padding-block:var(--sp-7) }

/* 3.20 Текст страниц и статей */
.prose,.block-text{ max-width:72ch }
.prose{ font-size:1.04rem }
.prose h2{ margin-top:var(--sp-7); padding-top:var(--sp-3); border-top:2px solid var(--c-text); display:inline-block }
.prose h3{ margin-top:var(--sp-5) }
.prose ul,.prose ol{ padding-left:1.2em } .prose li{ margin-bottom:var(--sp-2) }
.prose table{ border-collapse:collapse; font-size:var(--fs-s); display:block; overflow-x:auto; margin-bottom:var(--sp-5) }
.prose th,.prose td{ border:var(--border); padding:var(--sp-2) var(--sp-3); text-align:left; vertical-align:top }
.prose th{ background:var(--c-sunken) }
.prose blockquote{ margin:0 0 var(--sp-4); padding:var(--sp-3) var(--sp-4); border-left:3px solid var(--c-accent); background:var(--c-accent-soft) }



/* 3.21 Список-вход (задачи и отрасли на главной) */
.entry-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--c-line-strong) }
.entry-list li{ border-bottom:var(--border) }
.entry-list a{ display:flex; justify-content:space-between; align-items:center; gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-1); color:var(--c-text); text-decoration:none; font-weight:500; transition:color .15s, padding .15s }
.entry-list a::after{ content:"→"; font-family:var(--f-mono); color:var(--c-accent); flex:none }
.entry-list a:hover{ color:var(--c-accent); padding-left:var(--sp-3) }



/* 3.22 Технологическая схема (символы УГО ПЛАЗКАТ v2.0) */
.pfd{ margin:0; --pfd-fill:var(--c-surface) }
.pfd__canvas{ border:var(--border); border-radius:var(--radius-l); overflow-x:auto;
  background-color:var(--c-surface);
  background-image:linear-gradient(var(--c-grid) 1px, transparent 1px), linear-gradient(90deg, var(--c-grid) 1px, transparent 1px);
  background-size:20px 20px; padding:var(--sp-3) }
.pfd svg{ display:block; width:100%; min-width:640px; height:auto; color:var(--c-text); font-family:var(--f-body) }
.pfd .ugo-fill{ fill:var(--pfd-fill) }
.pfd__pipe{ fill:none; stroke:var(--c-line-strong); stroke-width:6; stroke-linejoin:round }
.pfd__flow{ fill:none; stroke:var(--c-accent); stroke-width:2.5; stroke-dasharray:10 12; stroke-linejoin:round;
  animation:pfd-flow 1.6s linear infinite }
@keyframes pfd-flow{ to{ stroke-dashoffset:-44 } }
@media (prefers-reduced-motion:reduce){ .pfd__flow{ animation:none } }
.pfd__io{ font-family:var(--f-mono); font-size:12px; fill:var(--c-accent) }
.pfd__arrow{ fill:var(--c-accent) }
.pfd__pipe--sludge{ stroke-width:4; stroke:var(--c-line) }
.pfd__flow--sludge{ stroke:var(--c-sludge); stroke-dasharray:4 8 }
.pfd__io--sludge{ fill:var(--c-sludge) }
.pfd__arrow--sludge{ fill:var(--c-sludge) }
.pfd__bg{ fill:var(--c-surface) }
.pfd__node:hover .pfd__bg,.pfd__node.is-active .pfd__bg{ fill:var(--c-accent-soft) }
.pfd__node{ cursor:pointer; outline:none }
.pfd__hit{ fill:transparent; stroke:transparent; transition:fill .15s, stroke .15s }
.pfd__node:hover .pfd__hit,.pfd__node:focus-visible .pfd__hit,.pfd__node.is-active .pfd__hit{ fill:var(--c-accent-soft); stroke:var(--c-accent) }
.pfd__sym{ color:var(--c-text); transition:color .15s }
.pfd__sym path,.pfd__sym ellipse,.pfd__sym rect,.pfd__sym circle,.pfd__sym line,.pfd__sym polygon,.pfd__sym polyline{ vector-effect:non-scaling-stroke; stroke-width:1.6 }
.pfd__node.is-active .pfd__sym,.pfd__node:hover .pfd__sym{ color:var(--c-accent) }
.pfd__kip{ font-family:var(--f-mono); font-size:12px; fill:currentColor }
.pfd__pos{ fill:var(--c-brand-ink); stroke:none }
.pfd__node.is-active .pfd__pos{ fill:var(--c-accent) }
.pfd__posnum{ font-family:var(--f-mono); font-size:13px; fill:var(--c-on-dark); font-weight:500 }
.pfd__label{ font-size:15px; font-weight:600; fill:var(--c-text) }
.pfd__list li{ cursor:pointer; transition:background .15s }
.pfd__list li.is-active{ background:var(--c-accent-soft) }
.pfd__list li.is-active::before{ color:var(--c-text) }
.pfd__caption{ font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--c-muted); margin-top:var(--sp-3) }

/* 3.23 Значки */
.icon{ width:1.25em; height:1.25em; flex:none; stroke-width:1.75; vertical-align:-0.2em }
.icon-badge{ display:inline-grid; place-items:center; width:44px; height:44px; border-radius:var(--radius-l);
  background:var(--c-accent-soft); color:var(--c-accent); flex:none }
.icon-badge .icon{ width:22px; height:22px }
.card .icon-badge{ margin-bottom:var(--sp-2) }
.entry-list a{ justify-content:flex-start }
.entry-list a .icon{ color:var(--c-accent) }
.entry-list a span{ flex:1 }
.steps li .icon{ color:var(--c-accent); width:24px; height:24px; margin-bottom:var(--sp-2) }
.metric .icon{ color:var(--c-accent); width:22px; height:22px; margin-bottom:var(--sp-2) }

/* 3.24 Лента оборудования на главной */
.showcase{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); gap:var(--sp-4) }
.showcase a{ position:relative; display:block; border-radius:var(--radius-l); overflow:hidden; color:var(--c-on-dark); text-decoration:none; aspect-ratio:4/3; background:var(--c-brand-ink) }
.showcase img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease, opacity .3s; opacity:.92 }
.showcase a:hover img{ transform:scale(1.05); opacity:1 }
.showcase span{ position:absolute; inset:auto 0 0 0; padding:var(--sp-6) var(--sp-4) var(--sp-4);
  background:linear-gradient(transparent, rgba(10,22,34,.88)); font-weight:600; line-height:1.3 }
.showcase small{ display:block; font-family:var(--f-mono); font-size:var(--fs-xs); font-weight:400; color:var(--c-on-dark-muted); margin-top:var(--sp-1) }
.card--img{ padding:0; overflow:hidden }
.card--img img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; transition:transform .4s }
.card--img:hover img{ transform:scale(1.04) }
.card--img .card__body{ padding:var(--sp-4) var(--sp-5) var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-2) }



/* 3.24 Кнопка «Наверх» */
.to-top{ position:fixed; right:calc(var(--gutter) / 2 + 8px); bottom:calc(24px + env(safe-area-inset-bottom,0px)); z-index:25;
  width:48px; height:48px; display:grid; place-items:center; border:0; border-radius:50%; cursor:pointer;
  background:var(--c-accent); color:var(--c-on-accent); box-shadow:0 2px 10px rgba(15,42,68,.25);
  opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .2s, transform .2s, background .15s }
.to-top.is-on{ opacity:1; transform:none; pointer-events:auto }
.to-top:hover{ background:var(--c-accent-hover) }
.to-top:focus-visible{ outline:2px solid var(--c-brand); outline-offset:3px }
.to-top .icon{ width:22px; height:22px; stroke-width:2.25 }
.to-top[hidden]{ display:none }
@media (max-width:700px){ .to-top{ width:44px; height:44px; bottom:calc(84px + env(safe-area-inset-bottom,0px)) } }
@media (prefers-reduced-motion:reduce){ .to-top{ transition:none } }

/* 3.25 Баннер cookie */
.cookie{ position:fixed; left:var(--gutter); right:var(--gutter); bottom:calc(var(--sp-4) + env(safe-area-inset-bottom,0px)); z-index:40;
  max-width:720px; margin-inline:auto; display:flex; gap:var(--sp-4); align-items:center; padding:var(--sp-4) var(--sp-5);
  background:var(--c-brand-ink); color:var(--c-on-dark); border-radius:var(--radius-l); box-shadow:var(--shadow-hover); font-size:var(--fs-s) }
.cookie p{ margin:0; color:var(--c-on-dark-muted) }
.cookie a{ color:var(--c-on-dark) }
@media (max-width:560px){ .cookie{ flex-direction:column; align-items:stretch } }
@media (max-width:700px){ .cookie{ bottom:calc(76px + env(safe-area-inset-bottom,0px)) } }



/* 3.26 Опросный лист */
.questionnaire{ grid-template-columns:minmax(0,1fr) }
.questionnaire__group{ border:0; border-top:1px solid rgba(255,255,255,.14); margin:0; padding:var(--sp-5) 0 0; min-width:0 }
.questionnaire__group legend{ font-weight:600; font-size:var(--fs-l); color:var(--c-on-dark); padding:0 var(--sp-3) 0 0; display:flex; gap:var(--sp-3); align-items:baseline }
.questionnaire__group legend span{ font-family:var(--f-mono); font-size:var(--fs-s); color:var(--c-accent) }
.questionnaire__fields{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-4) var(--sp-5); margin-top:var(--sp-4) }
@media (max-width:700px){ .questionnaire__fields{ grid-template-columns:minmax(0,1fr) } }
.questionnaire .field--wide{ grid-column:1/-1 }
.checks{ display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); text-transform:none; letter-spacing:0; font-family:var(--f-body); font-size:var(--fs-s); color:var(--c-on-dark) }
.check{ display:inline-flex; gap:var(--sp-2); align-items:center; cursor:pointer }
.check input{ accent-color:var(--c-accent); width:16px; height:16px }

/* 3.27 Калькулятор */
.calc__form{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-4); align-content:start }
.calc__hint{ grid-column:1/-1; font-size:var(--fs-s); color:var(--c-muted); margin:0 }
.calc__label{ font-family:var(--f-mono); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--c-muted) }
.calc__table{ margin:var(--sp-3) 0 var(--sp-4) }
.calc__table td:last-child{ text-align:right; font-weight:500; color:var(--c-accent) }
.calc__checks p{ font-size:var(--fs-s); margin-bottom:var(--sp-3) }

/* 3.28 Страница типовых схем */
.schemes{ display:grid; gap:var(--sp-8) }
.schemes__item h3{ font-size:var(--fs-xl) }
.schemes__item h3 a{ color:var(--c-text); text-decoration:none }
.schemes__item h3 a:hover{ color:var(--c-accent) }


.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0 }

/* ---------- 4. РЫБА (удалить при наполнении) ------------------------ */
.fish{ font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--c-fish); line-height:1.5;
  border:1px dashed var(--c-line-strong); border-radius:var(--radius); padding:var(--sp-2) var(--sp-3);
  margin:0 0 var(--sp-4); max-width:none; background:transparent }
.fish b{ font-weight:500 }
.lead-form .fish{ color:var(--c-on-dark-muted) }
.fish-badge{ position:fixed; right:12px; bottom:12px; z-index:30; font-family:var(--f-mono); font-size:var(--fs-xs);
  background:var(--c-text); color:var(--c-bg); padding:var(--sp-1) var(--sp-2); border-radius:var(--radius); opacity:.7 }
@media (max-width:700px){ .fish-badge{ display:none } }

/* Окно «Скачать опросный лист» */
.ol-gate{ border:0; padding:0; background:transparent; width:min(480px, calc(100vw - 32px)); max-height:calc(100vh - 32px) }
.ol-gate::backdrop{ background:rgba(6,20,26,.6) }
.ol-gate .lead-form{ grid-template-columns:minmax(0,1fr); position:relative; margin:0 }
.ol-gate h2{ font-size:var(--fs-l, 1.4rem); padding-right:2em }
.ol-gate__close{ position:absolute; top:12px; right:14px; width:36px; height:36px; border:0; border-radius:50%;
  background:rgba(255,255,255,.08); color:var(--c-on-dark); font-size:22px; line-height:1; cursor:pointer }
.ol-gate__close:hover{ background:rgba(255,255,255,.16) }
.ol-gate__done{ display:grid; gap:var(--sp-3) }
.ol-gate__done[hidden], .ol-gate [hidden]{ display:none }
.ol-gate__links{ display:flex; gap:var(--sp-3); flex-wrap:wrap }