/* Net-Core — лендинг по ТЗ v1.1 (docs/site/LANDING_TZ_v1_1.md, D-29).
   Палитра — п. 4.2; типографика (DF-43): заголовки Exo 2, текст Golos Text, обозначения IBM Plex Mono.
   Подложка «голубой лист проектирования» — тонкая сетка в палитре ТЗ (решение владельца 25.10).
   Логотип — файл «η» без изменений (D-24). Отклонения от палитры только ради AA:
   --label (акцентный текст на вторичном фоне), --muted, --field (рамки полей). */
/* Шрифты — tools/site_fonts.py по site/fonts.json: один файл на семейство (латиница, кириллица, казахские буквы), DF-43 */
@font-face{font-family:"Exo 2";font-style:normal;font-display:swap;font-weight:400 600;src:url(/assets/exo2-400-600.20ea7c402b.woff2) format("woff2")}
@font-face{font-family:"Golos Text";font-style:normal;font-display:swap;font-weight:400 600;src:url(/assets/golos-400-600.d74a47d3d3.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:500;src:url(/assets/plex-mono-500.cf4a66129c.woff2) format("woff2")}

/* Токены. Светлая тема — палитра ТЗ п. 4.2; тёмная (DF-42) — «чертёж ночью»: ночь бренда #0E1B26 и
   бирюза на тёмном, как в цветовых схемах IDE; действует по prefers-color-scheme или по выбору
   посетителя (html[data-theme], theme.js). Контраст AA проверен tools/site_contrast.py. */
:root{
  color-scheme:light;
  --bg:#F7F8F6; --ink:#142F3B; --text:#33454D; --accent:#327B83; --label:#2A6A72; --btn:#1E5964; --btn-hover:#164852;
  --alt:#EAF2F0; --line:#DCE5E4; --white:#FFFFFF; --muted:#566A71; --field:#7D9599; --ring:rgba(50,123,131,.35);
  --bad:#A33A2C; --bad-bg:#FBEDEA; --ok:#1F6B4C; --ok-bg:#E9F4EE; --todo-bg:#FFF4D6; --todo:#5C4400;
  --dark:#142F3B; --on-dark:#C9D6DA; --on-dark-muted:#9FB4BA; --on-dark-strong:#FFFFFF; --on-dark-line:rgba(201,214,218,.18);
  --grid-a:rgba(50,123,131,.075); --grid-b:rgba(50,123,131,.035); --alt-tint:rgba(50,123,131,.07);
  --sch-ink:#33454D; --sch-teal:#327B83; --sch-soft:#9fb8b8; --sch-note:#566A71; --sch-surface:#FFFFFF;
  --sketch:#142F3B; --sketch-a:.16;
  --sheet:linear-gradient(var(--grid-a) 1px,transparent 1px),linear-gradient(90deg,var(--grid-a) 1px,transparent 1px),
          linear-gradient(var(--grid-b) 1px,transparent 1px),linear-gradient(90deg,var(--grid-b) 1px,transparent 1px);
  --sheet-size:48px 48px,48px 48px,8px 8px,8px 8px;
  --f-head:"Exo 2","Golos Text",Arial,sans-serif; --f-text:"Golos Text",Arial,sans-serif; --f-mono:"IBM Plex Mono",Consolas,monospace;
  --header-h:60px; --gap:16px; --radius:8px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#0F1D26; --ink:#E9F1F3; --text:#C5D3D9; --accent:#5CC4CC; --label:#86D5DC; --btn:#6FCFD7; --btn-hover:#8ADAE1;
  --alt:#132430; --line:#27424F; --white:#182C38; --muted:#93A9B1; --field:#617F8C; --ring:rgba(92,196,204,.4);
  --bad:#F39C8F; --bad-bg:#3A1F1C; --ok:#86D6AC; --ok-bg:#163327; --todo-bg:#3A3215; --todo:#F2D88A;
  --dark:#0A161D; --on-dark-line:rgba(201,214,218,.14);
  --grid-a:rgba(92,196,204,.10); --grid-b:rgba(92,196,204,.05); --alt-tint:rgba(92,196,204,.05);
  --sch-ink:#C5D3D9; --sch-teal:#5CC4CC; --sch-soft:#3E5A67; --sch-note:#93A9B1; --sch-surface:#182C38;
  --sketch:#5CC4CC; --sketch-a:.22;
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0F1D26; --ink:#E9F1F3; --text:#C5D3D9; --accent:#5CC4CC; --label:#86D5DC; --btn:#6FCFD7; --btn-hover:#8ADAE1;
  --alt:#132430; --line:#27424F; --white:#182C38; --muted:#93A9B1; --field:#617F8C; --ring:rgba(92,196,204,.4);
  --bad:#F39C8F; --bad-bg:#3A1F1C; --ok:#86D6AC; --ok-bg:#163327; --todo-bg:#3A3215; --todo:#F2D88A;
  --dark:#0A161D; --on-dark-line:rgba(201,214,218,.14);
  --grid-a:rgba(92,196,204,.10); --grid-b:rgba(92,196,204,.05); --alt-tint:rgba(92,196,204,.05);
  --sch-ink:#C5D3D9; --sch-teal:#5CC4CC; --sch-soft:#3E5A67; --sch-note:#93A9B1; --sch-surface:#182C38;
  --sketch:#5CC4CC; --sketch-a:.22;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{display:flex;flex-direction:column;min-height:100vh;margin:0;color:var(--text);font:400 16px/1.6 var(--f-text);background-color:var(--bg)}
/* Неподвижный чертёжный лист (DF-56, DF-59): рамка, штамп и инженерные чертежи на слое за содержимым,
   лист не двигается при прокрутке (DF-55). Два SVG: sheet-static — сам чертёж, sheet-live —
   «живые» элементы (процессы) отдельным слоем, чтобы их анимация не перерисовывала тайлы со штриховкой.
   Толщины линий: w1 тонкая (штриховка, размеры), основная, w3 контур; hid — невидимые, cl — осевые. С движением (html.motion) motion.js вычерчивает элементы
   каждого эскиза по одному, как перо плоттера (невычерченные скрыты; Web Animations: stroke-dashoffset
   у элемента под пером, текст и штриховые — opacity); готовый эскиз получает класс done, и в нём идут процессы flow/rot/blink/wave/trace. На
   телефоне и при prefers-reduced-motion лист статичен, без JavaScript — тоже. */
.sheet-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background-color:var(--bg);background-image:var(--sheet);background-size:var(--sheet-size)}
.sheet-svg{position:absolute;left:0;top:0;display:block;width:1600px;height:1000px;min-width:100%;min-height:100%;color:var(--sketch)}
@media (min-width:768px){html.motion .sheet-svg{will-change:transform}}
.sheet-svg .sk{opacity:var(--sketch-a)}
.sheet-svg .w1{stroke-width:.6}
.sheet-svg .w3{stroke-width:1.7}
.sheet-svg text{fill:currentColor;stroke:none;font-family:var(--f-mono)}
.sheet-svg .flow{display:none}
html.motion .sheet-svg .sk>*{visibility:hidden}
html.motion .sheet-svg .sk.done>*{visibility:visible}
.sheet-svg .hid{stroke-dasharray:5 3}
.sheet-svg .cl{stroke-dasharray:14 3 3 3}
@keyframes flow{to{stroke-dashoffset:-.12}}
@keyframes pulse-run{to{stroke-dashoffset:-1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blink{0%{opacity:1}50%{opacity:.15}100%{opacity:1}}
@keyframes wave{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
@keyframes sweep{0%{stroke-dashoffset:1}70%,100%{stroke-dashoffset:0}}
html.motion .sheet-svg .sk.done>.flow{display:inline;stroke-width:2.2;stroke-dasharray:.02 .1;animation:flow 1.6s linear infinite}
html.motion .sheet-svg .sk.done>.flow.pulse{stroke-dasharray:.06 .94;animation:pulse-run 2.6s linear infinite}
html.motion .sheet-svg .sk.done .rot{transform-box:view-box;transform-origin:0 0;animation:spin 2.4s linear infinite}
html.motion .sheet-svg .sk.done .blink{animation:blink 1.8s steps(1) infinite}
html.motion .sheet-svg .sk.done .b2{animation-delay:-.6s}
html.motion .sheet-svg .sk.done .b3{animation-delay:-1.2s}
html.motion .sheet-svg .sk.done .wave{animation:wave 2.4s ease-out infinite}
html.motion .sheet-svg .sk.done .w2{animation-delay:.8s}
html.motion .sheet-svg .sk.done .w3.wave{animation-delay:1.6s}
html.motion .sheet-svg .sk.done .trace{stroke-dasharray:1;animation:sweep 3s linear infinite}
@media (max-width:767px){html.motion .sheet-svg .sk>*{visibility:visible}html.motion .sheet-svg .sk.done :is(.rot,.blink,.wave,.trace){animation:none}html.motion .sheet-svg .sk.done>.flow{display:none}.sheet-svg .sk{opacity:calc(var(--sketch-a)*.65)}}

img,svg{display:block;max-width:100%;height:auto}
a{color:var(--btn);text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:2px}
main{flex:1 0 auto}
main:focus{outline:none}
[hidden]{display:none!important}
h1,h2,h3{color:var(--ink);font-family:var(--f-head);font-weight:500;margin:0;text-wrap:balance;overflow-wrap:break-word}
h1{font-size:clamp(30px,1.3vw + 20px,42px);line-height:1.1;letter-spacing:-.015em}
h2{font-size:clamp(24px,1.1vw + 16px,32px);line-height:1.15;letter-spacing:-.01em}
h3{font-size:18px;line-height:1.3;letter-spacing:-.005em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
.wrap{max-width:1200px;margin:0 auto;padding-inline:24px}
.skip{position:absolute;left:-9999px;top:8px;z-index:40;background:var(--btn);color:var(--white);padding:10px 16px;border-radius:8px}
.skip:focus{left:8px}
.draft-banner{margin:0;padding:8px 16px;background:var(--todo-bg);color:var(--todo);font-size:13px;text-align:center}
.todo{display:inline-block;padding:0 6px;background:var(--todo-bg);color:var(--todo);border-radius:4px;font-size:14px}
.eyebrow{font:500 12.5px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--label);margin-bottom:10px}
.eyebrow .num{display:inline-block;margin-right:10px;padding-right:10px;border-right:1px solid var(--line);color:var(--muted)}
.lead{font-size:17px;line-height:1.55;color:var(--text);max-width:62ch}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;border-radius:8px;border:1px solid transparent;font:500 15px/1.2 var(--f-text);text-decoration:none;text-align:center;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.btn-primary{background:var(--btn);color:var(--white)}
.btn-primary:hover{background:var(--btn-hover);color:var(--white)}
.btn-ghost{background:transparent;color:var(--btn);border-color:var(--btn)}
.btn-ghost:hover{background:var(--white);color:var(--ink)}
.btn-sm{min-height:40px;padding:8px 16px;font-size:14.5px}
.btn:disabled{opacity:.6;cursor:progress}
.linklike{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* шапка: компактная, закреплена (ТЗ п. 5) */
.site-header{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--line)}
.header-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--header-h)}
.logo{display:block;flex:none}
.logo img{height:24px;width:auto}
.logo-dark{display:none}
/* переключатель темы: луна в светлой теме, солнце в тёмной (что включится по нажатию) */
.theme-toggle{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink);cursor:pointer}
.theme-toggle:hover{color:var(--btn)}
.theme-toggle svg{width:20px;height:20px}
.theme-toggle .sun{display:none}
.theme-toggle-m{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logo-light{display:none}
  :root:not([data-theme="light"]) .logo-dark{display:block}
  :root:not([data-theme="light"]) .theme-toggle .sun{display:block}
  :root:not([data-theme="light"]) .theme-toggle .moon{display:none}
}
:root[data-theme="dark"] .logo-light{display:none}
:root[data-theme="dark"] .logo-dark{display:block}
:root[data-theme="dark"] .theme-toggle .sun{display:block}
:root[data-theme="dark"] .theme-toggle .moon{display:none}
.nav-desktop{display:flex;align-items:center;gap:22px}
.nav-links{display:flex;gap:20px}
.nav-links a,.nav-mobile ul a{color:var(--text);text-decoration:none;font-size:15px}
.nav-links a:hover,.nav-mobile ul a:hover{color:var(--btn)}
.langs{display:flex;gap:12px;font:500 12.5px/1 var(--f-mono)}
.langs a{color:var(--muted);text-decoration:none;padding:4px 0}
.langs a[aria-current]{color:var(--ink);text-decoration:underline;text-underline-offset:5px}
.nav-mobile{display:none}
.nav-mobile summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:8px;background:var(--white);cursor:pointer}
.nav-mobile summary::-webkit-details-marker{display:none}
.bars,.bars::before,.bars::after{display:block;width:18px;height:2px;background:var(--ink);position:relative}
.bars::before,.bars::after{content:"";position:absolute;left:0}
.bars::before{top:-6px}.bars::after{top:6px}
.nav-mobile[open] .bars{background:transparent}
.nav-mobile[open] .bars::before{top:0;transform:rotate(45deg)}
.nav-mobile[open] .bars::after{top:0;transform:rotate(-45deg)}
/* закрытое меню не раскладывается вовсе: внутри закрытого details Chrome ограничивает абсолютное позиционирование и фантомно выносит содержимое за экран */
.nav-mobile:not([open]) nav{display:none}
.nav-mobile nav{position:absolute;left:0;right:0;top:100%;background:var(--white);border-bottom:1px solid var(--line);box-shadow:0 18px 30px -24px rgba(20,47,59,.45);padding:4px 16px 20px}
.nav-mobile ul a{display:block;padding:14px 0;border-bottom:1px solid var(--line);font-size:17px}
.nav-mobile .langs{margin:16px 0}
.nav-mobile nav .theme-toggle{display:none} /* в меню — только когда в шапке нет места (≤ 400 px) */
.nav-mobile .btn{width:100%}
/* Кнопка заявки в шапке на телефоне (DF-60): видна без раскрытия меню, ведёт к форме этой страницы */
.cta-m{display:none}
@media (max-width:960px){.nav-desktop{display:none}.nav-mobile{display:block}.header-row{gap:12px}.cta-m{display:inline-flex;margin-left:auto;white-space:nowrap}.theme-toggle-m{display:block}}
/* 320–400 px: логотип (231×24) + переключатель + меню должны уместиться без прокрутки */
@media (max-width:400px){.logo img{height:16px}.header-row{gap:8px}.theme-toggle-m{display:none}.nav-mobile nav .theme-toggle{display:grid;margin-top:12px}.cta-m{padding:8px 8px;font-size:12.5px}}
@media (max-width:360px){.logo img{height:13px}.site-header .wrap{padding-inline:12px}.header-row{gap:6px}.nav-mobile summary{width:40px;height:40px}}

/* первый экран (ТЗ п. 6.1) */
.hero{padding-block:36px 20px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:40px;align-items:center}
.hero .lead{margin-top:14px}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.hero-points{display:grid;gap:6px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.hero-points li{position:relative;padding-left:22px;font-size:14.5px}
.hero-points li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:2px;background:var(--accent)}
.hero-scheme{margin:0;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:14px}
.scheme{width:100%;height:auto}
.scheme-m{display:none}
.hero-scheme figcaption{margin-top:10px;font-size:12.5px;line-height:1.45;color:var(--muted);text-align:center}
/* цвета схемы — через токены, чтобы работала тёмная тема (классы ставит tools/site_scheme.py) */
.scheme .s-ink{stroke:var(--sch-ink)}.scheme .s-teal{stroke:var(--sch-teal)}.scheme .s-soft{stroke:var(--sch-soft)}
.scheme .t-ink{fill:var(--sch-ink)}.scheme .t-teal{fill:var(--sch-teal)}.scheme .t-note{fill:var(--sch-note)}
.scheme .f-surface{fill:var(--sch-surface)}.scheme .f-teal{fill:var(--sch-teal)}
/* clip:begin — сценарные ролики направлений (DF-61, DF-62); блок пишет tools/site_clip.py, руками не править */
:root{--clip-ground:#EDF2F3;--clip-top:#F7FAFB;--clip-left:#D8E2E5;--clip-right:#C2CFD3;--clip-ok:#2E9E6B;--clip-alarm:#E0583A;--clip-warn:#D9A21B;--clip-cam:#102028;--clip-cone:rgba(50,123,131,.2);--clip-cone-hot:rgba(50,123,131,.5);--clip-shadow:rgba(20,47,59,.18)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--clip-ground:#1A2F3A;--clip-top:#2F4B58;--clip-left:#233C48;--clip-right:#1B2F39;--clip-ok:#3DBE86;--clip-alarm:#FF6B4A;--clip-warn:#F2BC3A;--clip-cam:#0B171D;--clip-cone:rgba(92,196,204,.22);--clip-cone-hot:rgba(92,196,204,.55);--clip-shadow:rgba(0,0,0,.35)}}
:root[data-theme="dark"]{--clip-ground:#1A2F3A;--clip-top:#2F4B58;--clip-left:#233C48;--clip-right:#1B2F39;--clip-ok:#3DBE86;--clip-alarm:#FF6B4A;--clip-warn:#F2BC3A;--clip-cam:#0B171D;--clip-cone:rgba(92,196,204,.22);--clip-cone-hot:rgba(92,196,204,.55);--clip-shadow:rgba(0,0,0,.35)}
.clip .f-ground{fill:var(--clip-ground)}.clip .f-top{fill:var(--clip-top)}.clip .f-left{fill:var(--clip-left)}.clip .f-right{fill:var(--clip-right)}
.clip .f-ok{fill:var(--clip-ok)}.clip .f-alarm{fill:var(--clip-alarm)}.clip .f-warn{fill:var(--clip-warn)}.clip .s-ok{stroke:var(--clip-ok)}.clip .s-alarm{stroke:var(--clip-alarm)}.clip .s-warn{stroke:var(--clip-warn)}
.clip .f-cam{fill:var(--clip-cam)}.clip .f-cone{fill:var(--clip-cone)}.clip .f-shadow{fill:var(--clip-shadow)}.clip .t-cam,.clip .t-pill{fill:#F2F7F8}.clip .s-cam{stroke:#DCE9EC}
.clip .glow{filter:drop-shadow(0 0 3px var(--sch-teal))}
.clip .c-ok,.clip .c-okback{opacity:0}
.clip .c-flow{stroke-dasharray:.03 .09}
.clip .an{animation-play-state:paused}
.section.in-view .clip .an{animation-play-state:running}
@keyframes pc-ok{0%,34%{opacity:1}34.5%,100%{opacity:0}}
@keyframes pc-alarm{0%,34%{opacity:0}34.5%{opacity:1}38%{opacity:.25}42%{opacity:1}46%{opacity:.25}50%,90%{opacity:1}94%,100%{opacity:0}}
@keyframes pc-okback{0%,34%{opacity:1}34.5%,69%{opacity:0}70%,90%{opacity:1}94%,100%{opacity:1}}
@keyframes pc-alarmback{0%,34%{opacity:0}34.5%{opacity:1}38%{opacity:.25}42%{opacity:1}46%{opacity:.25}50%,69%{opacity:1}70%,100%{opacity:0}}
@keyframes pc-log1{0%,34%{opacity:0}36%,90%{opacity:1}94%,100%{opacity:0}}
@keyframes pc-log2{0%,40%{opacity:0}42%,90%{opacity:1}94%,100%{opacity:0}}
@keyframes pc-log3{0%,47%{opacity:0}49%,90%{opacity:1}94%,100%{opacity:0}}
@keyframes pc-log4{0%,69%{opacity:0}71%,90%{opacity:1}94%,100%{opacity:0}}
@keyframes pc-show{0%,37%{opacity:0}40%,90%{opacity:1}94%,100%{opacity:0}}
@keyframes pc-gate{0%,34%{visibility:hidden}34.5%,90%{visibility:visible}91%,100%{visibility:hidden}}
@keyframes pc-ringpulse{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.5);opacity:0}}
@keyframes pc-rec{0%,50%{opacity:1}51%,100%{opacity:.15}}
@keyframes pc-flow{to{stroke-dashoffset:-.12}}
html.motion .clip .c-ok{animation:pc-ok 16s step-end infinite}
html.motion .clip .c-alarm{animation:pc-alarm 16s linear infinite}
html.motion .clip .c-okback{animation:pc-okback 16s step-end infinite}
html.motion .clip .c-alarmback{animation:pc-alarmback 16s linear infinite}
html.motion .clip .c-log1{animation:pc-log1 16s linear infinite}
html.motion .clip .c-log2{animation:pc-log2 16s linear infinite}
html.motion .clip .c-log3{animation:pc-log3 16s linear infinite}
html.motion .clip .c-log4{animation:pc-log4 16s linear infinite}
html.motion .clip .c-show{animation:pc-show 16s linear infinite}
html.motion .clip .c-ring{transform-box:fill-box;transform-origin:center;animation:pc-gate 16s step-end infinite,pc-ringpulse 1.6s ease-out infinite}
html.motion .clip .c-rec{animation:pc-rec .9s step-end infinite}
html.motion .clip .c-flow{animation:pc-flow 1.4s linear infinite}
/* --- perimeter --- */
@keyframes pc-perimeter-man{0%{transform:translate(121px,-70px);opacity:0}4%{opacity:1}30%,86%{transform:translate(0,0);opacity:1}92%{transform:translate(0,0);opacity:0}100%{transform:translate(121px,-70px);opacity:0}}
@keyframes pc-perimeter-pulse{0%,29%{transform:scale(.15);opacity:0}30%{opacity:.95}40%,100%{transform:scale(1);opacity:0}}
@keyframes pc-perimeter-wave{0%,30%{stroke-dashoffset:.14;opacity:1}33.5%{stroke-dashoffset:-1;opacity:1}34%,100%{stroke-dashoffset:-1;opacity:0}}
@keyframes pc-perimeter-led{0%,33.5%{fill:var(--clip-ok)}34%,100%{fill:var(--clip-alarm)}}
@keyframes pc-perimeter-cam1{0%{transform:rotate(20deg)}10%{transform:rotate(130deg)}20%{transform:rotate(20deg)}29%{transform:rotate(112deg)}32%{transform:rotate(20.2deg)}34%{transform:rotate(29.2deg)}36%,88%{transform:rotate(26.2deg)}94%{transform:rotate(70deg)}100%{transform:rotate(20deg)}}
@keyframes pc-perimeter-cam2{0%{transform:rotate(170deg)}10%{transform:rotate(290deg)}20%{transform:rotate(170deg)}29%{transform:rotate(268deg)}32%{transform:rotate(213.9deg)}34%{transform:rotate(222.9deg)}36%,88%{transform:rotate(219.9deg)}94%{transform:rotate(230deg)}100%{transform:rotate(170deg)}}
@keyframes pc-perimeter-mcam1{0%{transform:rotate(-135deg)}10%{transform:rotate(-45deg)}20%{transform:rotate(-135deg)}29%{transform:rotate(-60deg)}32%{transform:rotate(-29.2deg)}34%{transform:rotate(-20.2deg)}36%,88%{transform:rotate(-23.2deg)}94%{transform:rotate(-100deg)}100%{transform:rotate(-135deg)}}
@keyframes pc-perimeter-mcam2{0%{transform:rotate(-135deg)}10%{transform:rotate(-45deg)}20%{transform:rotate(-135deg)}29%{transform:rotate(-120deg)}32%{transform:rotate(-151.3deg)}34%{transform:rotate(-142.3deg)}36%,88%{transform:rotate(-145.3deg)}94%{transform:rotate(-80deg)}100%{transform:rotate(-135deg)}}
@keyframes pc-perimeter-beam{0%,29%{transform:scale(1,1);fill:var(--clip-cone)}32%{transform:scale(1.25,.36);fill:var(--clip-cone-hot)}88%{transform:scale(1.25,.36);fill:var(--clip-cone-hot)}94%,100%{transform:scale(1,1);fill:var(--clip-cone)}}
@keyframes pc-perimeter-lock{0%,30%{opacity:0;transform:scale(1.9)}33%{opacity:1;transform:scale(1)}88%{opacity:1;transform:scale(1)}92%,100%{opacity:0;transform:scale(1)}}
@keyframes pc-perimeter-mark{0%,34%{opacity:0;transform:scale(.3)}37%{opacity:1;transform:scale(1.3)}40%,90%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(1)}}
.clip-perimeter .c-pulse,.clip-perimeter .c-mark,.clip-perimeter .c-lock{transform-box:fill-box;transform-origin:center}
.clip-perimeter .c-cam1,.clip-perimeter .c-cam2,.clip-perimeter .c-mcam1,.clip-perimeter .c-mcam2,.clip-perimeter .c-man,.clip-perimeter .c-beam{transform-box:view-box;transform-origin:0 0}
.clip-perimeter .c-beam{fill:var(--clip-cone-hot);transform:scale(1.25,.36)}
.clip-perimeter .c-wave{stroke-dasharray:.14 1;stroke-dashoffset:-1;opacity:0}
.clip-perimeter .c-pulse{opacity:0}
html.motion .clip-perimeter .c-man{animation:pc-perimeter-man 16s linear infinite}
html.motion .clip-perimeter .c-pulse{animation:pc-perimeter-pulse 16s ease-out infinite}
html.motion .clip-perimeter .c-wave{animation:pc-perimeter-wave 16s linear infinite}
html.motion .clip-perimeter .c-led{animation:pc-perimeter-led 16s step-end infinite}
html.motion .clip-perimeter .c-cam1{animation:pc-perimeter-cam1 16s ease-in-out infinite}
html.motion .clip-perimeter .c-cam2{animation:pc-perimeter-cam2 16s ease-in-out infinite}
html.motion .clip-perimeter .c-mcam1{animation:pc-perimeter-mcam1 16s ease-in-out infinite}
html.motion .clip-perimeter .c-mcam2{animation:pc-perimeter-mcam2 16s ease-in-out infinite}
html.motion .clip-perimeter .c-beam{animation:pc-perimeter-beam 16s ease-out infinite}
html.motion .clip-perimeter .c-lock{animation:pc-perimeter-lock 16s ease-out infinite}
html.motion .clip-perimeter .c-mark{animation:pc-perimeter-mark 16s ease-out infinite}
/* --- pipeline --- */
@keyframes pc-pipeline-gate{0%,34%{visibility:hidden}34.5%,69%{visibility:visible}70%,100%{visibility:hidden}}
@keyframes pc-pipeline-sec{0%,35%{opacity:0}38%,68%{opacity:1}71%,100%{opacity:0}}
@keyframes pc-pipeline-exc{0%{transform:translate(150px,62px);opacity:0}4%{opacity:1}20%,86%{transform:translate(0,0);opacity:1}92%{transform:translate(0,0);opacity:0}100%{transform:translate(150px,62px);opacity:0}}
@keyframes pc-pipeline-arm{0%,20%{transform:rotate(-16deg)}25%{transform:rotate(0deg)}27%{transform:rotate(-5deg)}29%{transform:rotate(0deg)}31%{transform:rotate(-4deg)}33%,66%{transform:rotate(0deg)}70%,100%{transform:rotate(-16deg)}}
@keyframes pc-pipeline-quake{0%,24%{opacity:0;transform:scale(.6)}26%{opacity:.9;transform:scale(1)}28%{opacity:0;transform:scale(1.6)}29%{opacity:.9;transform:scale(.8)}32%{opacity:0;transform:scale(1.7)}33%,100%{opacity:0}}
@keyframes pc-pipeline-pulse{0%,29%{transform:scale(.15);opacity:0}30%{opacity:.95}40%,100%{transform:scale(1);opacity:0}}
@keyframes pc-pipeline-wave{0%,30%{stroke-dashoffset:.12;opacity:1}33.5%{stroke-dashoffset:-1;opacity:1}34%,100%{stroke-dashoffset:-1;opacity:0}}
@keyframes pc-pipeline-led{0%,33.5%{fill:var(--clip-ok)}34%,69%{fill:var(--clip-alarm)}70%,100%{fill:var(--clip-ok)}}
@keyframes pc-pipeline-cam{0%{transform:rotate(40deg)}12%{transform:rotate(150deg)}24%{transform:rotate(60deg)}31%{transform:rotate(108.6deg)}34%{transform:rotate(119.6deg)}36%,88%{transform:rotate(116.6deg)}94%{transform:rotate(70deg)}100%{transform:rotate(40deg)}}
@keyframes pc-pipeline-beam{0%,30%{transform:scale(1,1);fill:var(--clip-cone)}33%{transform:scale(1.2,.4);fill:var(--clip-cone-hot)}88%{transform:scale(1.2,.4);fill:var(--clip-cone-hot)}94%,100%{transform:scale(1,1);fill:var(--clip-cone)}}
@keyframes pc-pipeline-lock{0%,33%{opacity:0;transform:scale(1.6)}36%{opacity:1;transform:scale(1)}68%{opacity:1;transform:scale(1)}71%,100%{opacity:0;transform:scale(1)}}
@keyframes pc-pipeline-mark{0%,34%{opacity:0;transform:scale(.3)}37%{opacity:1;transform:scale(1.3)}40%,69%{opacity:1;transform:scale(1)}72%,100%{opacity:0;transform:scale(1)}}
.clip-pipeline .s-pipe{stroke:var(--clip-left)}
.clip-pipeline .s-pipehl{stroke:var(--clip-top)}
.clip-pipeline .c-pulse,.clip-pipeline .c-quake,.clip-pipeline .c-mark,.clip-pipeline .c-lock,.clip-pipeline .c-pring{transform-box:fill-box;transform-origin:center}
html.motion .clip-pipeline .c-pring{animation:pc-pipeline-gate 16s step-end infinite,pc-ringpulse 1.6s ease-out infinite}
html.motion .clip-pipeline .c-sec{animation:pc-pipeline-sec 16s linear infinite}
.clip-pipeline .c-cam,.clip-pipeline .c-exc,.clip-pipeline .c-arm,.clip-pipeline .c-beam{transform-box:view-box;transform-origin:0 0}
.clip-pipeline .c-beam{fill:var(--clip-cone-hot);transform:scale(1.2,.4)}
.clip-pipeline .c-wave{stroke-dasharray:.12 1;stroke-dashoffset:-1;opacity:0}
.clip-pipeline .c-pulse,.clip-pipeline .c-quake{opacity:0}
html.motion .clip-pipeline .c-exc{animation:pc-pipeline-exc 16s ease-out infinite}
html.motion .clip-pipeline .c-arm{animation:pc-pipeline-arm 16s ease-in-out infinite}
html.motion .clip-pipeline .c-quake{animation:pc-pipeline-quake 16s ease-out infinite}
html.motion .clip-pipeline .c-pulse{animation:pc-pipeline-pulse 16s ease-out infinite}
html.motion .clip-pipeline .c-wave{animation:pc-pipeline-wave 16s linear infinite}
html.motion .clip-pipeline .c-led{animation:pc-pipeline-led 16s step-end infinite}
html.motion .clip-pipeline .c-cam{animation:pc-pipeline-cam 16s ease-in-out infinite}
html.motion .clip-pipeline .c-beam{animation:pc-pipeline-beam 16s ease-out infinite}
html.motion .clip-pipeline .c-lock{animation:pc-pipeline-lock 16s ease-out infinite}
html.motion .clip-pipeline .c-mark{animation:pc-pipeline-mark 16s ease-out infinite}
/* --- networks --- */
@keyframes pc-networks-l41{0%,30%{stroke-dasharray:6 4;opacity:.55}31%,69%{stroke-dasharray:none;opacity:1}70%,100%{stroke-dasharray:6 4;opacity:.55}}
@keyframes pc-networks-l23{0%,29.5%{stroke:var(--sch-ink);stroke-dasharray:none}30%,69%{stroke:var(--clip-alarm);stroke-dasharray:3 5}70%,100%{stroke:var(--sch-ink);stroke-dasharray:none}}
@keyframes pc-networks-fmain{0%,29.5%{opacity:1}30%,71%{opacity:0}72%,100%{opacity:1}}
@keyframes pc-networks-fres{0%,30.5%{opacity:0}31%,70%{opacity:1}71%,100%{opacity:0}}
@keyframes pc-networks-break{0%,29.5%{opacity:0}30%,69%{opacity:1}70%,100%{opacity:0}}
@keyframes pc-networks-spark{0%,29.5%{transform:scale(.2);opacity:0}30%{opacity:.9}36%,100%{transform:scale(1);opacity:0}}
@keyframes pc-networks-pulseline{0%,30%{stroke-dashoffset:.08;opacity:0}30.2%{stroke-dashoffset:.08;opacity:1}34%{stroke-dashoffset:-1;opacity:1}34.5%,100%{stroke-dashoffset:-1;opacity:0}}
.clip-networks .c-l41{stroke-dasharray:6 4;opacity:.55}
.clip-networks .c-l23{stroke:var(--clip-alarm);stroke-dasharray:3 5}
.clip-networks .c-f32,.clip-networks .c-f21{opacity:0}
.clip-networks .c-break{opacity:1}
.clip-networks .c-spark{transform-box:fill-box;transform-origin:center;opacity:0}
.clip-networks .c-pulseline{stroke-dasharray:.08 .92;stroke-dashoffset:-1;opacity:0}
html.motion .clip-networks .c-l41{animation:pc-networks-l41 16s step-end infinite}
html.motion .clip-networks .c-l23{animation:pc-networks-l23 16s step-end infinite}
html.motion .clip-networks .c-f32,html.motion .clip-networks .c-f21{animation:pc-networks-fmain 16s step-end infinite}
html.motion .clip-networks .c-f34,html.motion .clip-networks .c-f41{animation:pc-networks-fres 16s step-end infinite}
html.motion .clip-networks .c-break{animation:pc-networks-break 16s step-end infinite}
html.motion .clip-networks .c-spark{animation:pc-networks-spark 16s ease-out infinite}
html.motion .clip-networks .c-pulseline{animation:pc-networks-pulseline 16s linear infinite}
/* --- telecom --- */
@keyframes pc-telecom-fib{0%,29.9%{opacity:1}30%,69.9%{opacity:0}70%,100%{opacity:1}}
@keyframes pc-telecom-rad{0%,32.9%{opacity:0}33%,69.9%{opacity:1}70%,100%{opacity:0}}
@keyframes pc-telecom-beam{0%,30%{opacity:.3}31.5%{opacity:1}33%,69.9%{opacity:.9}71.5%,100%{opacity:.3}}
@keyframes pc-telecom-hot{0%,30.2%{opacity:0}31.5%{opacity:1}33%,69.9%{opacity:.85}71.5%,100%{opacity:0}}
@keyframes pc-telecom-gap{0%,29.9%{opacity:0}30%,69.9%{opacity:1}70%,100%{opacity:0}}
@keyframes pc-telecom-bridge{0%,29.9%{opacity:1}30%,69.9%{opacity:0}70%,100%{opacity:1}}
@keyframes pc-telecom-burst{0%,29.9%{transform:scale(.2);opacity:0}30%{transform:scale(.2);opacity:1}34%,100%{transform:scale(1.4);opacity:0}}
@keyframes pc-telecom-splice{0%,69.9%{opacity:0}70%,90%{opacity:1}94%,100%{opacity:0}}
@keyframes pc-telecom-ledf{0%,29.9%{fill:var(--clip-ok)}30%,69.9%{fill:var(--clip-alarm)}70%,100%{fill:var(--clip-ok)}}
@keyframes pc-telecom-ledr{0%,32.9%{fill:var(--sch-soft)}33%,69.9%{fill:var(--clip-ok)}70%,100%{fill:var(--sch-soft)}}
@keyframes pc-telecom-nom{0%,34%{opacity:1}34.5%,69.9%{opacity:0}70%,100%{opacity:1}}
@keyframes pc-telecom-ev{0%,34%{opacity:0}34.5%,69.9%{opacity:1}70%,100%{opacity:0}}
@keyframes pc-telecom-boom{0%{transform:rotate(37.7deg)}8%{transform:rotate(-2.3deg)}16%{transform:rotate(37.7deg)}24%{transform:rotate(-2.3deg)}27.5%{transform:rotate(37.7deg)}30%{transform:rotate(-42.3deg)}30.6%{transform:rotate(-45.3deg)}31.2%{transform:rotate(-40.3deg)}35%{transform:rotate(-2.3deg)}38%,100%{transform:rotate(37.7deg)}}
@keyframes pc-telecom-crew{0%,50%{opacity:0;transform:translate(-28px,0)}54%{opacity:1;transform:translate(0,0)}90%{opacity:1;transform:translate(0,0)}94%,100%{opacity:0;transform:translate(0,0)}}
.clip-telecom .c-okback,.clip-telecom .c-nom,.clip-telecom .c-fib,.clip-telecom .c-bridge,.clip-telecom .c-burst,.clip-telecom .c-splice{opacity:0}
.clip-telecom .c-trk{fill:var(--clip-cam)}
.clip-telecom .c-exc{fill:var(--clip-warn)}
.clip-telecom .c-exc.f-right{filter:brightness(.8)}
.clip-telecom .c-cab{fill:var(--clip-left)}
.clip-telecom .c-cab.f-top{fill:var(--clip-top)}
.clip-telecom .c-ledf{fill:var(--clip-alarm)}
.clip-telecom .c-ledr{fill:var(--clip-ok)}
.clip-telecom .c-burst{transform-box:fill-box;transform-origin:center}
.clip-telecom .c-boom,.clip-telecom .c-crew{transform-box:view-box;transform-origin:0 0}
html.motion .clip-telecom .c-fib{animation:pc-telecom-fib 16s step-end infinite}
html.motion .clip-telecom .c-rad{animation:pc-telecom-rad 16s step-end infinite}
html.motion .clip-telecom .c-beam{animation:pc-telecom-beam 16s linear infinite}
html.motion .clip-telecom .c-hot{animation:pc-telecom-hot 16s linear infinite}
html.motion .clip-telecom .c-gap{animation:pc-telecom-gap 16s step-end infinite}
html.motion .clip-telecom .c-bridge{animation:pc-telecom-bridge 16s step-end infinite}
html.motion .clip-telecom .c-burst{animation:pc-telecom-burst 16s ease-out infinite}
html.motion .clip-telecom .c-splice{animation:pc-telecom-splice 16s step-end infinite}
html.motion .clip-telecom .c-ledf{animation:pc-telecom-ledf 16s step-end infinite}
html.motion .clip-telecom .c-ledr{animation:pc-telecom-ledr 16s step-end infinite}
html.motion .clip-telecom .c-nom{animation:pc-telecom-nom 16s step-end infinite}
html.motion .clip-telecom .c-ev{animation:pc-telecom-ev 16s step-end infinite}
html.motion .clip-telecom .c-boom{animation:pc-telecom-boom 16s ease-in-out infinite}
html.motion .clip-telecom .c-crew{animation:pc-telecom-crew 16s ease-out infinite}
/* --- automation --- */
@keyframes pc-automation-sig{0%,30%{stroke-dashoffset:0.12;opacity:0}30.3%{opacity:1}33.5%{stroke-dashoffset:-1;opacity:1}34%,100%{stroke-dashoffset:-1;opacity:0}}
@keyframes pc-automation-alm{0%,30.64%{fill:var(--sch-soft)}30.74%,69.8%{fill:var(--clip-alarm)}70%,100%{fill:var(--sch-soft)}}
@keyframes pc-automation-lt{0%,29.9%{fill:var(--sch-surface)}30%,69.8%{fill:var(--clip-alarm)}70%,100%{fill:var(--sch-surface)}}
@keyframes pc-automation-cmd{0%,37.5%{opacity:0}38%{opacity:1}38.8%{opacity:.45}39.6%,69.5%{opacity:1}70%,100%{opacity:0}}
@keyframes pc-automation-cmd1{0%,38%{stroke-dashoffset:0.12;opacity:0}38.3%{opacity:1}41.5%{stroke-dashoffset:-1;opacity:1}42%,100%{stroke-dashoffset:-1;opacity:0}}
@keyframes pc-automation-cmd2{0%,40.77%{stroke-dashoffset:0.6353;opacity:0}40.970000000000006%{opacity:1}41.74%{stroke-dashoffset:-1;opacity:1}42.24%,100%{stroke-dashoffset:-1;opacity:0}}
@keyframes pc-automation-wheel{0%{transform:rotate(0deg)}41.12%{transform:rotate(0deg);animation-timing-function:ease-out}43.019999999999996%{transform:rotate(-552deg)}43.519999999999996%{transform:rotate(-540deg)}71.5%{transform:rotate(-540deg);animation-timing-function:ease-in-out}73.5%{transform:rotate(0deg)}100%{transform:rotate(0deg)}}
@keyframes pc-automation-vled{0%,43.32%{fill:var(--clip-ok)}43.52%,73.3%{fill:var(--clip-warn)}73.5%,100%{fill:var(--clip-ok)}}
@keyframes pc-automation-vclosed{0%,43.32%{opacity:0}43.52%,73.3%{opacity:1}73.5%,100%{opacity:0}}
@keyframes pc-automation-vopen{0%,43.32%{opacity:1}43.52%,73.3%{opacity:0}73.5%,100%{opacity:1}}
@keyframes pc-automation-rotor{0%{transform:rotate(0deg)}41.74%{transform:rotate(2880deg);animation-timing-function:ease-out}43.04%{transform:rotate(2950deg)}72.5%{transform:rotate(2950deg);animation-timing-function:ease-in}74%{transform:rotate(3010deg)}100%{transform:rotate(4680deg)}}
@keyframes pc-automation-pled{0%,42.84%{fill:var(--clip-ok)}43.04%,72.3%{fill:var(--sch-soft)}72.5%,100%{fill:var(--clip-ok)}}
@keyframes pc-automation-prun{0%,42.84%{opacity:1}43.04%,72.3%{opacity:0}72.5%,100%{opacity:1}}
@keyframes pc-automation-pstop{0%,42.84%{opacity:0}43.04%,72.3%{opacity:1}72.5%,100%{opacity:0}}
@keyframes pc-automation-inflow{0%,42.84%{opacity:1}43.44%,73.5%{opacity:0}74.2%,100%{opacity:1}}
@keyframes pc-automation-liq{0%{transform:translateY(-45px)}2%{transform:translateY(-46.23px)}4%{transform:translateY(-47px)}6%{transform:translateY(-47px)}8%{transform:translateY(-46.23px)}10%{transform:translateY(-45px)}12%{transform:translateY(-43.77px)}14%{transform:translateY(-43px)}16%{transform:translateY(-43px)}18%{transform:translateY(-43.77px)}20%{transform:translateY(-45px)}22%{transform:translateY(-46.23px)}24%{transform:translateY(-47px)}26%{transform:translateY(-48.86px)}28%{transform:translateY(-53.7px)}30%{transform:translateY(-61.8px)}32%{transform:translateY(-64.67px)}34%{transform:translateY(-67.27px)}36%{transform:translateY(-69.88px)}38%{transform:translateY(-72.51px)}40%{transform:translateY(-74.87px)}42%{transform:translateY(-76.47px)}44%{transform:translateY(-76.8px)}46%{transform:translateY(-75.56px)}48%{transform:translateY(-72.9px)}50%{transform:translateY(-69.24px)}52%{transform:translateY(-65.19px)}54%{transform:translateY(-61.34px)}56%{transform:translateY(-58.12px)}58%{transform:translateY(-55.67px)}60%{transform:translateY(-53.82px)}62%{transform:translateY(-52.23px)}64%{transform:translateY(-50.57px)}66%{transform:translateY(-48.67px)}68%{transform:translateY(-46.68px)}70%{transform:translateY(-45px)}72%{transform:translateY(-43.77px)}74%{transform:translateY(-43px)}76%{transform:translateY(-43px)}78%{transform:translateY(-43.77px)}80%{transform:translateY(-45px)}82%{transform:translateY(-46.23px)}84%{transform:translateY(-47px)}86%{transform:translateY(-47px)}88%{transform:translateY(-46.23px)}90%{transform:translateY(-45px)}92%{transform:translateY(-43.77px)}94%{transform:translateY(-43px)}96%{transform:translateY(-43px)}98%{transform:translateY(-43.77px)}100%{transform:translateY(-45px)}}
@keyframes pc-automation-trend{0%{stroke-dashoffset:1.0000;opacity:1}2%{stroke-dashoffset:0.9800}4%{stroke-dashoffset:0.9606}6%{stroke-dashoffset:0.9415}8%{stroke-dashoffset:0.9222}10%{stroke-dashoffset:0.9022}12%{stroke-dashoffset:0.8822}14%{stroke-dashoffset:0.8628}16%{stroke-dashoffset:0.8437}18%{stroke-dashoffset:0.8243}20%{stroke-dashoffset:0.8043}22%{stroke-dashoffset:0.7843}24%{stroke-dashoffset:0.7649}26%{stroke-dashoffset:0.7435}28%{stroke-dashoffset:0.7128}30%{stroke-dashoffset:0.6683}32%{stroke-dashoffset:0.6445}34%{stroke-dashoffset:0.6215}36%{stroke-dashoffset:0.5985}38%{stroke-dashoffset:0.5754}40%{stroke-dashoffset:0.5531}42%{stroke-dashoffset:0.5324}44%{stroke-dashoffset:0.5133}46%{stroke-dashoffset:0.4932}48%{stroke-dashoffset:0.4700}50%{stroke-dashoffset:0.4437}52%{stroke-dashoffset:0.4160}54%{stroke-dashoffset:0.3890}56%{stroke-dashoffset:0.3642}58%{stroke-dashoffset:0.3416}60%{stroke-dashoffset:0.3205}62%{stroke-dashoffset:0.2999}64%{stroke-dashoffset:0.2791}66%{stroke-dashoffset:0.2579}68%{stroke-dashoffset:0.2364}70%{stroke-dashoffset:0.2157}72%{stroke-dashoffset:0.1957}74%{stroke-dashoffset:0.1763}76%{stroke-dashoffset:0.1572}78%{stroke-dashoffset:0.1378}80%{stroke-dashoffset:0.1178}82%{stroke-dashoffset:0.0978}84%{stroke-dashoffset:0.0784}86%{stroke-dashoffset:0.0594}88%{stroke-dashoffset:0.0400}90%{stroke-dashoffset:0.0200}92%{stroke-dashoffset:0.0000;opacity:1}92.5%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes pc-automation-pen{0%{transform:translate(492px,332px);opacity:1}2%{transform:translate(497.11px,330.35px)}4%{transform:translate(502.22px,329.34px)}6%{transform:translate(507.33px,329.34px)}8%{transform:translate(512.43px,330.35px)}10%{transform:translate(517.54px,332px)}12%{transform:translate(522.65px,333.65px)}14%{transform:translate(527.76px,334.66px)}16%{transform:translate(532.87px,334.66px)}18%{transform:translate(537.98px,333.65px)}20%{transform:translate(543.09px,332px)}22%{transform:translate(548.2px,330.35px)}24%{transform:translate(553.3px,329.34px)}26%{transform:translate(558.41px,326.85px)}28%{transform:translate(563.52px,320.4px)}30%{transform:translate(568.63px,309.6px)}32%{transform:translate(573.74px,305.77px)}34%{transform:translate(578.85px,302.31px)}36%{transform:translate(583.96px,298.82px)}38%{transform:translate(589.07px,295.32px)}40%{transform:translate(594.17px,292.18px)}42%{transform:translate(599.28px,290.03px)}44%{transform:translate(604.39px,289.6px)}46%{transform:translate(609.5px,291.25px)}48%{transform:translate(614.61px,294.8px)}50%{transform:translate(619.72px,299.67px)}52%{transform:translate(624.83px,305.08px)}54%{transform:translate(629.93px,310.21px)}56%{transform:translate(635.04px,314.5px)}58%{transform:translate(640.15px,317.78px)}60%{transform:translate(645.26px,320.24px)}62%{transform:translate(650.37px,322.36px)}64%{transform:translate(655.48px,324.58px)}66%{transform:translate(660.59px,327.1px)}68%{transform:translate(665.7px,329.77px)}70%{transform:translate(670.8px,332px)}72%{transform:translate(675.91px,333.65px)}74%{transform:translate(681.02px,334.66px)}76%{transform:translate(686.13px,334.66px)}78%{transform:translate(691.24px,333.65px)}80%{transform:translate(696.35px,332px)}82%{transform:translate(701.46px,330.35px)}84%{transform:translate(706.57px,329.34px)}86%{transform:translate(711.67px,329.34px)}88%{transform:translate(716.78px,330.35px)}90%{transform:translate(721.89px,332px)}92%{transform:translate(727px,333.65px);opacity:1}92.5%{transform:translate(727px,333.65px);opacity:0}100%{transform:translate(727px,333.65px);opacity:0}}
.clip-automation .s-pipe{stroke:var(--clip-left)}
.clip-automation .s-pipehl{stroke:var(--clip-top)}
.clip-automation .s-note{stroke:var(--sch-note)}
.clip-automation .f-liq{fill:var(--sch-teal)}
.clip-automation .f-ink{fill:var(--sch-ink)}
.clip-automation .c-rotor,.clip-automation .c-wheel{transform-box:view-box;transform-origin:0 0}
.clip-automation .c-trend{stroke-dasharray:1 1}
.clip-automation .c-pstop,.clip-automation .c-vclosed{opacity:0}
.clip-automation .c-sig,.clip-automation .c-cmd1{stroke-dasharray:0.12 1;stroke-dashoffset:0.12;opacity:0}
.clip-automation .c-cmd2{stroke-dasharray:0.6353 1;stroke-dashoffset:0.6353;opacity:0}
html.motion .clip-automation .c-sig{animation:pc-automation-sig 16s linear infinite}
html.motion .clip-automation .c-alm{animation:pc-automation-alm 16s linear infinite}
html.motion .clip-automation .c-lt{animation:pc-automation-lt 16s linear infinite}
html.motion .clip-automation .c-cmd{animation:pc-automation-cmd 16s linear infinite}
html.motion .clip-automation .c-cmd1{animation:pc-automation-cmd1 16s linear infinite}
html.motion .clip-automation .c-cmd2{animation:pc-automation-cmd2 16s linear infinite}
html.motion .clip-automation .c-wheel{animation:pc-automation-wheel 16s linear infinite}
html.motion .clip-automation .c-vled{animation:pc-automation-vled 16s linear infinite}
html.motion .clip-automation .c-vclosed{animation:pc-automation-vclosed 16s linear infinite}
html.motion .clip-automation .c-vopen{animation:pc-automation-vopen 16s linear infinite}
html.motion .clip-automation .c-rotor{animation:pc-automation-rotor 16s linear infinite}
html.motion .clip-automation .c-pled{animation:pc-automation-pled 16s linear infinite}
html.motion .clip-automation .c-prun{animation:pc-automation-prun 16s linear infinite}
html.motion .clip-automation .c-pstop{animation:pc-automation-pstop 16s linear infinite}
html.motion .clip-automation .c-inflow{animation:pc-automation-inflow 16s linear infinite}
html.motion .clip-automation .c-liq{animation:pc-automation-liq 16s linear infinite}
html.motion .clip-automation .c-trend{animation:pc-automation-trend 16s linear infinite}
html.motion .clip-automation .c-pen{animation:pc-automation-pen 16s linear infinite}
/* --- metering --- */
@keyframes pc-metering-fact{0%,12%{stroke-dashoffset:0.5766;opacity:1}13.5%{stroke-dashoffset:0.4972}44.5%{stroke-dashoffset:0.4972}46%{stroke-dashoffset:0.4176}62%{stroke-dashoffset:0.4176}63.5%{stroke-dashoffset:0.3345}91%{stroke-dashoffset:0.3345;opacity:1}93%{stroke-dashoffset:0.3345;opacity:0}99.5%{stroke-dashoffset:0.5766;opacity:0}100%{stroke-dashoffset:0.5766;opacity:1}}
@keyframes pc-metering-gapdot{0%,30.5%{opacity:0}31%,44.5%{opacity:1}45%,100%{opacity:0}}
@keyframes pc-metering-fca{0%,55%{opacity:1}57%,95%{opacity:0}98%,100%{opacity:1}}
@keyframes pc-metering-fcb{0%,55%{opacity:0}57%,93%{opacity:1}95%,100%{opacity:0}}
@keyframes pc-metering-c3{0%,12%{opacity:0}13%,92%{opacity:1}94%,100%{opacity:0}}
@keyframes pc-metering-c4{0%,30%{opacity:0}31%,92%{opacity:1}94%,100%{opacity:0}}
@keyframes pc-metering-gap{0%,30%{opacity:0}31%,44.5%{opacity:1}45%,100%{opacity:0}}
@keyframes pc-metering-c4b{0%,44.5%{opacity:0}45.5%,92%{opacity:1}94%,100%{opacity:0}}
@keyframes pc-metering-c5{0%,62%{opacity:0}63%,92%{opacity:1}94%,100%{opacity:0}}
@keyframes pc-metering-ch3{0%,29.5%{opacity:1}31%,44.5%{opacity:.12}45.5%,100%{opacity:1}}
@keyframes pc-metering-ch3x{0%,29.5%{opacity:0}31%,44.5%{opacity:1}45.5%,100%{opacity:0}}
@keyframes pc-metering-led3{0%,30%{fill:var(--clip-ok)}30.5%,45%{fill:var(--clip-alarm)}45.5%,100%{fill:var(--clip-ok)}}
@keyframes pc-metering-uled{0%,30%{fill:var(--clip-ok)}30.5%,45%{fill:var(--clip-warn)}45.5%,100%{fill:var(--clip-ok)}}
@keyframes pc-metering-pkt{0%,40%{transform:translate(0,0);opacity:0}40.5%{transform:translate(0,0);opacity:1}42.5%{transform:translate(-171.4px,-27px);opacity:1}44.5%{transform:translate(0,0);opacity:1}45%{transform:translate(0,0);opacity:0}100%{transform:translate(0,0);opacity:0}}
@keyframes pc-metering-wx{0%,55%{opacity:1}55.5%{opacity:.15}56%{opacity:1}56.5%{opacity:.15}57%{opacity:1}57.5%{opacity:.15}58%,100%{opacity:1}}
@keyframes pc-metering-wxok{0%,56.5%{opacity:0}58%,90%{opacity:1}94%,100%{opacity:0}}
@keyframes pc-metering-ev2{0%,45%{opacity:0}46.5%,90%{opacity:1}94%,100%{opacity:0}}
@keyframes pc-metering-ev3{0%,57%{opacity:0}58.5%,90%{opacity:1}94%,100%{opacity:0}}
@keyframes pc-metering-send{0%,70%{opacity:0}70.5%,77%{opacity:1}78%,100%{opacity:0}}
@keyframes pc-metering-rr{0%,71.5%{transform:scale(.5);opacity:0}72%{transform:scale(.6);opacity:.9}75%,100%{transform:scale(1.7);opacity:0}}
.clip-metering .c-okback,.clip-metering .c-fcb,.clip-metering .c-c4b,.clip-metering .c-c5,.clip-metering .c-pkt,.clip-metering .c-send,.clip-metering .c-rr{opacity:0}
.clip-metering .c-ch3{opacity:.12}
.clip-metering .c-rr{transform-box:fill-box;transform-origin:center}
html.motion .clip-metering .c-fact{animation:pc-metering-fact 16s linear infinite}
html.motion .clip-metering .c-gapdot{animation:pc-metering-gapdot 16s step-end infinite}
html.motion .clip-metering .c-fca{animation:pc-metering-fca 16s linear infinite}
html.motion .clip-metering .c-fcb{animation:pc-metering-fcb 16s linear infinite}
html.motion .clip-metering .c-c3{animation:pc-metering-c3 16s linear infinite}
html.motion .clip-metering .c-c4{animation:pc-metering-c4 16s linear infinite}
html.motion .clip-metering .c-gap{animation:pc-metering-gap 16s linear infinite}
html.motion .clip-metering .c-c4b{animation:pc-metering-c4b 16s linear infinite}
html.motion .clip-metering .c-c5{animation:pc-metering-c5 16s linear infinite}
html.motion .clip-metering .c-ch3{animation:pc-metering-ch3 16s linear infinite}
html.motion .clip-metering .c-ch3x{animation:pc-metering-ch3x 16s linear infinite}
html.motion .clip-metering .c-led3{animation:pc-metering-led3 16s step-end infinite}
html.motion .clip-metering .c-uled{animation:pc-metering-uled 16s step-end infinite}
html.motion .clip-metering .c-pkt{animation:pc-metering-pkt 16s ease-in-out infinite}
html.motion .clip-metering .c-wx{animation:pc-metering-wx 16s step-end infinite}
html.motion .clip-metering .c-wxok{animation:pc-metering-wxok 16s linear infinite}
html.motion .clip-metering .c-ev2{animation:pc-metering-ev2 16s linear infinite}
html.motion .clip-metering .c-ev3{animation:pc-metering-ev3 16s linear infinite}
html.motion .clip-metering .c-send{animation:pc-metering-send 16s linear infinite}
html.motion .clip-metering .c-rr{animation:pc-metering-rr 16s ease-out infinite}
/* --- servers --- */
@keyframes pc-servers-led1{0%,29.9%{fill:var(--clip-ok)}30%,69.9%{fill:var(--clip-alarm)}70%,100%{fill:var(--clip-ok)}}
@keyframes pc-servers-rack1{0%,29.8%{opacity:1}31%{opacity:.4}69.8%{opacity:.4}71%{opacity:1}100%{opacity:1}}
@keyframes pc-servers-cross{0%,29.9%{opacity:0}30.3%,69.8%{opacity:1}70.2%,100%{opacity:0}}
@keyframes pc-servers-flow1{0%,29.8%{opacity:1}30.6%,69.8%{opacity:0}71%,100%{opacity:1}}
@keyframes pc-servers-tint1{0%,29.9%{opacity:0}30.5%,69.8%{opacity:.14}70.5%,100%{opacity:0}}
@keyframes pc-servers-gate1{0%,29.9%{visibility:hidden}30%,69.9%{visibility:visible}70%,100%{visibility:hidden}}
@keyframes pc-servers-vmA{0%,31%{transform:translate(0,0);opacity:1}33.5%{transform:translate(86.6px,-4px)}36%{transform:translate(173.2px,136px);opacity:1}91%{transform:translate(173.2px,136px);opacity:1}93%{transform:translate(173.2px,136px);opacity:0}97%{transform:translate(0,0);opacity:0}99%,100%{transform:translate(0,0);opacity:1}}
@keyframes pc-servers-vmB{0%,32%{transform:translate(0,0)}34.5%{transform:translate(86.6px,-4px)}37%{transform:translate(173.2px,136px)}70%{transform:translate(173.2px,136px)}72%{transform:translate(86.6px,-4px)}74%,100%{transform:translate(0,0)}}
@keyframes pc-servers-pvmA{0%,31%{transform:translate(0,0);opacity:1}36%{transform:translate(123px,26px);opacity:1}91%{transform:translate(123px,26px);opacity:1}93%{transform:translate(123px,26px);opacity:0}97%{transform:translate(0,0);opacity:0}99%,100%{transform:translate(0,0);opacity:1}}
@keyframes pc-servers-pvmB{0%,32%{transform:translate(0,0)}37%{transform:translate(123px,26px)}70%{transform:translate(123px,26px)}74%,100%{transform:translate(0,0)}}
@keyframes pc-servers-cover{0%{transform:translateX(0)}92%{transform:translateX(228px)}92.2%,100%{transform:translateX(0)}}
@keyframes pc-servers-lines{0%,90%{opacity:1}92%,92.2%{opacity:0}92.4%,100%{opacity:1}}
.clip-servers .c-okback{opacity:0}
.clip-servers .c-nrack1{opacity:.4}
.clip-servers .c-nflow1{opacity:0}
.clip-servers .c-ntint1{opacity:.14}
.clip-servers .c-nring1{transform-box:fill-box;transform-origin:center}
.clip-servers :is(.c-vmA,.clip-servers .c-vmB){transform:translate(173.2px,136px)}
.clip-servers :is(.c-pvmA,.clip-servers .c-pvmB){transform:translate(123px,26px)}
.clip-servers .c-ldcover{transform:translateX(89.2px)}
html.motion .clip-servers .c-nled1{animation:pc-servers-led1 16s step-end infinite}
html.motion .clip-servers .c-nrack1{animation:pc-servers-rack1 16s linear infinite}
html.motion .clip-servers .c-ncross{animation:pc-servers-cross 16s linear infinite}
html.motion .clip-servers .c-nflow1{animation:pc-servers-flow1 16s linear infinite}
html.motion .clip-servers .c-ntint1{animation:pc-servers-tint1 16s linear infinite}
html.motion .clip-servers .c-nring1{animation:pc-servers-gate1 16s step-end infinite,pc-ringpulse 1.6s ease-out infinite}
html.motion .clip-servers .c-vmA{animation:pc-servers-vmA 16s ease-in-out infinite}
html.motion .clip-servers .c-vmB{animation:pc-servers-vmB 16s ease-in-out infinite}
html.motion .clip-servers .c-pvmA{animation:pc-servers-pvmA 16s ease-in-out infinite}
html.motion .clip-servers .c-pvmB{animation:pc-servers-pvmB 16s ease-in-out infinite}
html.motion .clip-servers .c-ldcover{animation:pc-servers-cover 16s linear infinite}
html.motion .clip-servers .c-ldlines{animation:pc-servers-lines 16s linear infinite}
/* --- security --- */
@keyframes pc-security-trym{0%,30%{stroke-dashoffset:1}31.8%,100%{stroke-dashoffset:0}}
@keyframes pc-security-try{0%,69%{opacity:1}71%,100%{opacity:0}}
@keyframes pc-security-pkt{0%,30%{transform:translate(33.6px,76.6px);opacity:0}30.2%{transform:translate(33.6px,76.6px);opacity:1;animation-timing-function:linear}31.8%{transform:translate(0px,0px);opacity:1;animation-timing-function:ease-out}32.8%{transform:translate(13.4px,30.6px);opacity:1}33.8%{transform:translate(16.8px,38.3px);opacity:0}100%{transform:translate(33.6px,76.6px);opacity:0}}
@keyframes pc-security-pulse{0%,31.5%{transform:scale(.15);opacity:0}32%{opacity:.95}40%,100%{transform:scale(1);opacity:0}}
@keyframes pc-security-shield{0%,31.5%{fill:var(--clip-ok);transform:scale(1)}32%{fill:var(--clip-alarm);transform:scale(1.4)}32.8%{transform:scale(1)}33.6%{transform:scale(1.15)}34.5%,69%{fill:var(--clip-alarm);transform:scale(1)}70%,100%{fill:var(--clip-ok);transform:scale(1)}}
@keyframes pc-security-x{0%,31.6%{opacity:0}32%,69%{opacity:1}70%,100%{opacity:0}}
@keyframes pc-security-scr{0%,29.8%{fill:var(--clip-cam)}30%,69.8%{fill:var(--clip-alarm)}70%,100%{fill:var(--clip-cam)}}
@keyframes pc-security-pline{0%,34%{stroke:var(--sch-soft)}34.5%,69.5%{stroke:var(--clip-alarm)}70%,100%{stroke:var(--sch-soft)}}
@keyframes pc-security-pshield{0%,34%{fill:var(--clip-ok)}34.5%,69.5%{fill:var(--clip-alarm)}70%,100%{fill:var(--clip-ok)}}
@keyframes pc-security-pbfill{0%,34%{fill:var(--sch-soft)}34.5%,69.5%{fill:var(--clip-alarm)}70%,100%{fill:var(--sch-soft)}}
@keyframes pc-security-pbadge{0%,34%{opacity:.45;transform:scale(1)}34.5%{opacity:1;transform:scale(1.6)}35.3%{transform:scale(1)}36%,69%{opacity:1;transform:scale(1)}70%,100%{opacity:.45;transform:scale(1)}}
.clip-security .c-okback{opacity:0}
.clip-security .c-pulse{opacity:0}
.clip-security .c-pkt{opacity:0}
.clip-security .c-trym{stroke-dasharray:1 1}
.clip-security .c-pulse{transform-box:fill-box;transform-origin:center}
.clip-security .c-shield{transform-box:fill-box;transform-origin:center}
.clip-security .c-pbadge{transform-box:fill-box;transform-origin:center}
.clip-security .c-pkt{transform-box:view-box;transform-origin:0 0}
html.motion .clip-security .c-trym{animation:pc-security-trym 16s linear infinite}
html.motion .clip-security .c-try{animation:pc-security-try 16s linear infinite}
html.motion .clip-security .c-pkt{animation:pc-security-pkt 16s linear infinite}
html.motion .clip-security .c-pulse{animation:pc-security-pulse 16s ease-out infinite}
html.motion .clip-security .c-shield{animation:pc-security-shield 16s ease-out infinite}
html.motion .clip-security .c-x{animation:pc-security-x 16s linear infinite}
html.motion .clip-security .c-scr{animation:pc-security-scr 16s step-end infinite}
html.motion .clip-security .c-pline{animation:pc-security-pline 16s step-end infinite}
html.motion .clip-security .c-pshield{animation:pc-security-pshield 16s step-end infinite}
html.motion .clip-security .c-pbfill{animation:pc-security-pbfill 16s step-end infinite}
html.motion .clip-security .c-pbadge{animation:pc-security-pbadge 16s ease-out infinite}
/* --- pumps --- */
@keyframes pc-pumps-rot3{0%,32%{transform:rotate(0deg)}100%{transform:rotate(3600deg)}}
@keyframes pc-pumps-rot1{0%,36%{transform:rotate(0deg)}40%{transform:rotate(360deg)}70%{transform:rotate(3960deg)}74%,100%{transform:rotate(4320deg)}}
@keyframes pc-pumps-fp3{0%,31.5%{opacity:0}32%,100%{opacity:1}}
@keyframes pc-pumps-fp1{0%,35.5%{opacity:0}36%,72%{opacity:1}73%,100%{opacity:0}}
@keyframes pc-pumps-fd{0%,29%{opacity:.35}30%,69%{opacity:1}70%,100%{opacity:.35}}
@keyframes pc-pumps-spray{0%,29.5%{opacity:0}30%,69%{opacity:1}70%,100%{opacity:0}}
@keyframes pc-pumps-needle{0%{transform:rotate(-60deg)}30%{transform:rotate(-60deg)}36%{transform:rotate(-118deg)}46%{transform:rotate(-66deg)}70%{transform:rotate(-62deg)}72%{transform:rotate(-84deg)}80%{transform:rotate(-60deg)}100%{transform:rotate(-60deg)}}
@keyframes pc-pumps-trend{0%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
@keyframes pc-pumps-evt{0%,29.5%{opacity:0}30%,92%{opacity:1}93%,100%{opacity:0}}
@keyframes pc-pumps-led1{0%,35.5%{fill:var(--sch-soft)}36%,72%{fill:var(--clip-ok)}73%,100%{fill:var(--sch-soft)}}
@keyframes pc-pumps-led3{0%,31.5%{fill:var(--sch-soft)}32%,100%{fill:var(--clip-ok)}}
@keyframes pc-pumps-led2{0%,100%{fill:var(--clip-warn)}}
@keyframes pc-pumps-run1{0%,35.5%{opacity:0}36%,72%{opacity:1}73%,100%{opacity:0}}
@keyframes pc-pumps-stop1{0%,35.5%{opacity:1}36%,72%{opacity:0}73%,100%{opacity:1}}
@keyframes pc-pumps-run3{0%,31.5%{opacity:0}32%,100%{opacity:1}}
@keyframes pc-pumps-stop3{0%,31.5%{opacity:1}32%,100%{opacity:0}}
@keyframes pc-pumps-vfd{0%,36%{transform:scaleX(0)}42%{transform:scaleX(.72)}70%{transform:scaleX(.72)}74%,100%{transform:scaleX(0)}}
@keyframes pc-pumps-vfdbar{0%,36%{stroke-dashoffset:1}42%{stroke-dashoffset:.28}70%{stroke-dashoffset:.28}74%,100%{stroke-dashoffset:1}}
@keyframes pc-pumps-cab2{0%,35.5%{fill:var(--sch-soft)}36%,72%{fill:var(--clip-ok)}73%,100%{fill:var(--sch-soft)}}
@keyframes pc-pumps-cab3{0%,29.5%{fill:var(--sch-soft)}30%,69%{fill:var(--clip-alarm)}70%,100%{fill:var(--sch-soft)}}
.clip-pumps .c-rot1,.clip-pumps .c-rot3,.clip-pumps .c-needle{transform-box:view-box;transform-origin:0 0}
.clip-pumps .c-rot2{transform:none}
.clip-pumps .c-fp2{opacity:0}
.clip-pumps .t-ok{fill:var(--clip-ok)}
.clip-pumps .c-trend{stroke-dasharray:1;stroke-dashoffset:0}
.clip-pumps .c-vfd{transform-box:fill-box;transform-origin:left center;transform:scaleX(.72)}
.clip-pumps .c-vfdbar{stroke-dasharray:1;stroke-dashoffset:.28}
.clip-pumps .c-stop1,.clip-pumps .c-stop3{opacity:0}
html.motion .clip-pumps .c-rot3{animation:pc-pumps-rot3 16s linear infinite}
html.motion .clip-pumps .c-rot1{animation:pc-pumps-rot1 16s ease-in-out infinite}
html.motion .clip-pumps .c-fp3{animation:pc-pumps-fp3 16s step-end infinite}
html.motion .clip-pumps .c-fp1{animation:pc-pumps-fp1 16s step-end infinite}
html.motion .clip-pumps .c-fd{animation:pc-pumps-fd 16s step-end infinite}
html.motion .clip-pumps .c-spray{animation:pc-pumps-spray 16s step-end infinite}
html.motion .clip-pumps .c-needle{animation:pc-pumps-needle 16s ease-in-out infinite}
html.motion .clip-pumps .c-trend{animation:pc-pumps-trend 16s linear infinite}
html.motion .clip-pumps .c-evt{animation:pc-pumps-evt 16s step-end infinite}
html.motion .clip-pumps .c-led1,html.motion .clip-pumps .c-st1{animation:pc-pumps-led1 16s step-end infinite}
html.motion .clip-pumps .c-led3,html.motion .clip-pumps .c-st3{animation:pc-pumps-led3 16s step-end infinite}
html.motion .clip-pumps .c-st2,html.motion .clip-pumps .c-led2{animation:pc-pumps-led2 16s step-end infinite}
html.motion .clip-pumps .c-run1{animation:pc-pumps-run1 16s step-end infinite}
html.motion .clip-pumps .c-stop1{animation:pc-pumps-stop1 16s step-end infinite}
html.motion .clip-pumps .c-run3{animation:pc-pumps-run3 16s step-end infinite}
html.motion .clip-pumps .c-stop3{animation:pc-pumps-stop3 16s step-end infinite}
html.motion .clip-pumps .c-vfd{animation:pc-pumps-vfd 16s ease-in-out infinite}
html.motion .clip-pumps .c-vfdbar{animation:pc-pumps-vfdbar 16s ease-in-out infinite}
html.motion .clip-pumps .c-cab2{animation:pc-pumps-cab2 16s step-end infinite}
html.motion .clip-pumps .c-cab3{animation:pc-pumps-cab3 16s step-end infinite}
/* clip:end */

/* пиктограммы разделов (tools/site_icons.py): один цвет, один размер */
.ico{width:32px;height:32px;color:var(--accent);margin-bottom:12px;--ico-bg:var(--white)}

/* секции */
.section{padding-block:64px}
/* вторичный фон — полупрозрачный тон поверх сетки страницы: сетка и наброски непрерывны, швов нет */
.section-alt{background-color:var(--alt-tint)}
.section-head{max-width:760px;margin-bottom:28px}
.section-head .lead{margin-top:10px}
.grid-3,.grid-4{display:grid;gap:var(--gap)}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.problem,.competence,.format{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.problem h3,.competence h3,.format h3{margin-bottom:8px}
.problem p,.competence p,.format p{font-size:15px}
/* отрасли (ТЗ п. 6.6): пять в ряд без карточек, верхняя линейка */
.industries{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px var(--gap)}
.industries li{padding-top:14px;border-top:2px solid var(--ink)}
.industries .ico{--ico-bg:var(--bg)}
.industries h3{font-size:16.5px;margin-bottom:6px}
.industries p{font-size:14px;line-height:1.5;color:var(--muted)}
.format{display:flex;flex-direction:column}
.format p{flex:1;margin-bottom:16px}
.format .btn{align-self:flex-start}

/* услуги — единый цикл: узлы на одной линии (ТЗ п. 6.3) */
.services{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);padding-top:24px}
.services::before{content:"";position:absolute;z-index:1;top:23px;left:38px;right:calc((100% - 3 * var(--gap)) / 4 - 38px);height:2px;background:var(--accent)}
.service{position:relative;z-index:1;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:34px 20px 20px}
.node{position:absolute;z-index:2;top:-18px;left:20px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--btn);color:var(--white);font:500 13px/1 var(--f-mono)}
.service .ico{margin-bottom:10px}
.service h3{margin-bottom:10px}
.service ul{display:grid;gap:5px;margin-bottom:14px}
.service li{position:relative;padding-left:16px;font-size:14.5px;line-height:1.45}
.service li::before{content:"";position:absolute;left:0;top:.68em;width:7px;height:2px;background:var(--accent)}
.result{font-size:14.5px;padding-top:12px;border-top:1px solid var(--line);color:var(--ink)}
.result b{font-weight:600}

/* компетенции и расширенный список (ТЗ п. 6.4) */
.more-list{margin-top:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white)}
.more-list summary{cursor:pointer;list-style:none;padding:14px 20px;font-weight:600;color:var(--btn);display:flex;justify-content:space-between;align-items:center;gap:16px}
.more-list summary::-webkit-details-marker{display:none}
.more-list summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .15s}
.more-list[open] summary::after{transform:translateY(2px) rotate(225deg)}
.more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px var(--gap);padding:4px 20px 20px;border-top:1px solid var(--line)}
.more-grid .group{font:500 12.5px/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--label);margin:14px 0 6px}
.more-grid li{font-size:14.5px;line-height:1.45;padding:4px 0;border-bottom:1px dashed var(--line)}

/* подход (ТЗ п. 6.7): таблица «принцип — что это значит на объекте» */
.principles{border-top:1px solid var(--ink)}
.principles li{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:4px 32px;align-items:baseline;padding:14px 0 14px 32px;border-bottom:1px solid var(--line)}
.principles li::before{content:"";position:absolute;left:2px;top:21px;width:13px;height:7px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.principles h3{font-size:16.5px}
.principles p{font-size:15px}

/* компетенции на главной — карточки-ссылки на страницы направлений (DF-52) */
a.competence{display:flex;flex-direction:column;color:inherit;text-decoration:none}
a.competence p{flex:1}
a.competence .more{margin-top:14px;font:500 12.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--btn)}
a.competence .more::after{content:" ›"}
a.competence:hover h3{color:var(--btn)}
/* страницы направлений: состав работ, типовые задачи, результат */
.page-hero .actions{margin-top:22px}
.checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 32px;max-width:960px}
.checklist li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.5}
.checklist li::before{content:"";position:absolute;left:0;top:.7em;width:10px;height:2px;background:var(--accent)}
.task-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.task-list li{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.task-list h3{font-size:17px;margin-bottom:8px}
.task-list p{font-size:15px;color:var(--muted)}
.result-page{margin-top:24px;max-width:760px;font-size:16px;border-top:0;padding-top:0}

/* разделы «схема + тезисы»: периметры (DF-48), аналитика АСКУЭ (DF-49) */
.feature-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:start}
.feature-scheme{margin:0;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:14px}
.feature-points{display:grid;gap:16px}
.feature-points li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:2px 14px;align-items:start}
.feature-points .ico{grid-row:1/3;margin:0}
.feature-points h3{font-size:16.5px}
.feature-points p{font-size:14.5px;line-height:1.5;color:var(--muted)}

/* результат на руки (DF-42): документы по этапам */
.deliverables{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.deliverables li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:2px 14px;align-items:start;padding:16px 18px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius)}
.deliverables .ico{grid-row:1/3;margin:0}
.deliverables h3{font-size:16.5px}
.deliverables p{font-size:14px;line-height:1.5;color:var(--muted)}

/* вопросы перед обращением (DF-42): заголовок слева, раскрывающиеся ответы справа */
.faq-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:start}
.faq-grid .section-head{margin-bottom:0;position:sticky;top:calc(var(--header-h) + 24px)}
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 0;font:500 16.5px/1.35 var(--f-head);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:9px;height:9px;margin-right:4px;border-right:2px solid var(--btn);border-bottom:2px solid var(--btn);transform:translateY(-3px) rotate(45deg);transition:transform .15s}
.faq details[open] summary::after{transform:translateY(2px) rotate(225deg)}
.faq p{padding:0 0 16px;max-width:62ch;font-size:15px}

/* контакты и форма (ТЗ п. 6.10) */
.section-contact{background:var(--white);border-top:1px solid var(--line)}
.contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:start}
.contact-intro .lead{margin-top:16px}
.steps-title{margin-top:20px;font:500 12.5px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--label)}
.next-steps{counter-reset:step;display:grid;gap:6px;margin-top:10px}
.next-steps li{counter-increment:step;position:relative;padding-left:40px;font-size:15px;line-height:1.5}
.next-steps li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:2px;width:28px;height:20px;border-radius:4px;background:var(--alt);color:var(--label);font:500 12px/20px var(--f-mono);text-align:center}
.contact-list{margin:20px 0 0;border-top:1px solid var(--line)}
.contact-list>div{display:grid;grid-template-columns:minmax(110px,160px) minmax(0,1fr);gap:4px 16px;padding:10px 0;border-bottom:1px solid var(--line)}
.contact-list dt{color:var(--muted);font-size:14.5px}
.contact-list dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.form-card{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:24px}
.lead-form{display:grid;gap:14px}
.no-js .lead-form{display:none}
.field{display:grid;gap:6px;min-width:0}
.field label{font-size:14.5px;font-weight:600;color:var(--ink)}
.opt{font-weight:400;color:var(--muted)}
.field input:not([type=file]),.field textarea{width:100%;min-height:44px;padding:10px 14px;border:1px solid var(--field);border-radius:8px;background:var(--white);color:var(--ink);font:400 16px/1.4 var(--f-text)}
.field textarea{min-height:100px;resize:vertical}
.field ::placeholder{color:var(--muted);opacity:1}
.file{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.file-input{position:absolute;inset:0;width:1px;height:1px;opacity:0;overflow:hidden}
.file-input:focus-visible+label{outline:3px solid var(--accent);outline-offset:2px}
.file-name{min-width:0;font-size:14.5px;color:var(--muted);overflow-wrap:anywhere}
.file-name.chosen{color:var(--ink)}
.field input:focus-visible,.field textarea:focus-visible{outline:3px solid var(--ring);outline-offset:0;border-color:var(--btn)}
.field [aria-invalid="true"]{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad)}
.hint{font-size:13.5px;line-height:1.5;color:var(--muted)}
.error{margin:0;font-size:13.5px;line-height:1.4;color:var(--bad);font-weight:600}
.check{display:grid;grid-template-columns:20px minmax(0,1fr);gap:4px 12px;align-items:start;font-size:14px;line-height:1.5}
.check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--btn)}
.check .error{grid-column:2}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.btn-submit{justify-self:start;min-width:220px}
.format-note{font-size:14.5px;padding:10px 14px;border-radius:8px;background:var(--alt);color:var(--ink)}
.form-status{font-size:14.5px}
.form-status:empty{display:none}
.form-status.bad{padding:10px 14px;border-radius:8px;background:var(--bad-bg);color:var(--bad)}
.done{padding:24px;border-radius:10px;background:var(--ok-bg);border-left:3px solid var(--ok)}
.done:focus{outline:none}
.done-title{font-size:20px;font-weight:600;color:var(--ok);margin-bottom:6px}
.done-text{color:var(--ink)}

/* юридические страницы и 404 */
.crumbs{font-size:13.5px;color:var(--muted);margin-bottom:14px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"/";margin-right:6px}
.crumbs a{color:var(--btn);text-decoration:none}
.page-hero .lead{margin-top:16px}
.page-privacy .hero,.page-consent .hero{padding-block:56px 16px}
.page-privacy .section,.page-consent .section{padding-block:20px}
.page-privacy .section:last-of-type,.page-consent .section:last-of-type{padding-bottom:88px}
.page-privacy .section .wrap>*,.page-consent .section .wrap>*{max-width:76ch}
.page-privacy .section h2,.page-consent .section h2{font-size:23px;margin-bottom:14px}
.page-privacy .section h3,.page-consent .section h3{font-size:17px;margin:22px 0 8px}
.page-privacy .section p,.page-consent .section p{margin-bottom:10px}
.page-privacy .section ul,.page-consent .section ul{padding-left:22px;margin-bottom:12px;list-style:disc}
.page-privacy .section li,.page-consent .section li{margin-bottom:6px}
.note{margin-top:14px;font-size:14.5px;color:var(--muted)}

/* согласие на аналитику */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:25;max-width:520px;margin-left:auto;background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 50px -24px rgba(20,47,59,.45);padding:20px 22px;font-size:14.5px}
.consent p{margin-bottom:14px}
.consent-actions{display:flex;flex-wrap:wrap;gap:10px}

/* подвал */
.site-footer{background:var(--dark);color:var(--on-dark);font-size:14.5px;padding:40px 0 20px}
.site-footer a,.site-footer .linklike{color:var(--on-dark);text-decoration:none}
.site-footer a:hover,.site-footer .linklike:hover{color:var(--white);text-decoration:underline}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1.2fr;gap:32px}
.footer-brand img{height:24px;width:auto}
.footer-brand p{margin-top:14px;font:500 12.5px/1.4 var(--f-mono);letter-spacing:.06em;color:var(--on-dark-muted)}
.footer-nav ul{display:grid;gap:8px}
.footer-pages{margin-top:14px;padding-top:14px;border-top:1px solid var(--on-dark-line)}
.footer-req{margin:0}
.footer-req dt{color:var(--on-dark-strong);font-weight:600;margin-bottom:8px}
.footer-req dd{margin:0 0 4px;color:var(--on-dark-muted)}
.footer-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:28px;padding-top:16px;border-top:1px solid var(--on-dark-line);color:var(--on-dark-muted);font-size:13.5px}
.footer-links{display:flex;flex-wrap:wrap;gap:6px 20px}
.site-footer .todo{font-size:13px}

/* адаптивность (ТЗ п. 9.1) */
@media (max-width:1180px){
  .services{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
  .services::before{display:none}
}
@media (max-width:1023px){
  .hero-grid,.contact-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .hero-scheme{max-width:720px}
  .grid-3,.grid-4,.more-grid,.deliverables{grid-template-columns:repeat(2,minmax(0,1fr))}
  .task-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .industries{grid-template-columns:repeat(3,minmax(0,1fr))}
  .faq-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .faq-grid .section-head{position:static}
  .feature-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .feature-scheme{max-width:720px}
  .principles li{gap:4px 32px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  :root{--gap:12px;--header-h:56px}
  body{font-size:16px}
  .wrap{padding-inline:16px}
  .hero{padding-block:24px 40px}
  .section{padding-block:44px}
  .section-head{margin-bottom:22px}
  .lead{font-size:16px}
  .grid-3,.grid-4,.more-grid,.footer-grid,.industries,.deliverables,.checklist,.task-list{grid-template-columns:minmax(0,1fr)}
  .industries{gap:24px}
  .principles li{grid-template-columns:minmax(0,1fr)}
  /* услуги — вертикальный цикл: линия между узлами (ТЗ п. 6.5) */
  .services{grid-template-columns:minmax(0,1fr);row-gap:32px}
  .services::before{display:block;top:24px;bottom:24px;left:37px;right:auto;width:2px;height:auto;z-index:0}
  .form-card{padding:18px 16px}
  .btn-submit,.actions .btn{width:100%}
  .contact-list>div{grid-template-columns:minmax(0,1fr);gap:2px}
  .hero-scheme{padding:12px 8px}
  .scheme-d{display:none}
  .scheme-m{display:block}
  /* схема направления на телефоне (DF-60): в натуральную величину с горизонтальной прокруткой внутри
     рамки — подписи читаемы, вычерчивание и импульсы видны */
  .feature-scheme{overflow-x:auto;overscroll-behavior-x:contain;padding:10px}
  .feature-scheme .scheme{min-width:560px}
  .consent{left:12px;right:12px;bottom:12px;padding:16px}
}
@media (max-width:400px){h1{font-size:28px}}

/* Движение (DF-45). Включается классом html.motion (motion.js); без него и при reduced-motion всё
   статично и видно. Только transform и opacity: ни сдвигов макета, ни тяжёлых перерисовок. */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
:root{--glow:rgba(50,123,131,.10)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--glow:rgba(92,196,204,.14)}}
:root[data-theme="dark"]{--glow:rgba(92,196,204,.14)}
/* первый экран: текст поднимается по очереди, схема вычерчивается уровень за уровнем, потом по связям идут импульсы */
html.motion .hero-text>*{animation:rise .6s ease both}
html.motion .hero-text>:nth-child(2){animation-delay:.08s}
html.motion .hero-text>:nth-child(3){animation-delay:.16s}
html.motion .hero-text>:nth-child(4){animation-delay:.24s}
html.motion .hero-text>:nth-child(5){animation-delay:.32s}
html.motion .hero-scheme{animation:rise .7s ease .15s both}
html.motion .scheme .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1s ease both}
html.motion .scheme .lbl{opacity:0;animation:fade .5s ease both}
html.motion .scheme .lv0{animation-delay:.3s}
html.motion .scheme .lv1{animation-delay:.55s}
html.motion .scheme .lv2{animation-delay:.8s}
html.motion .scheme .lv3{animation-delay:1.05s}
html.motion .scheme .lv4{animation-delay:1.3s}
html.motion .scheme .lv5{animation-delay:1.55s}
.scheme .pulse{display:none}
html.motion .scheme .pulse{display:block;animation:fade .5s ease 2.6s both}
/* разделы проявляются при прокрутке; элементы списка — с небольшим сдвигом по очереди */
html.motion .section :is(.section-head,.grid-3>*,.grid-4>*,.services>li,.deliverables>li,.industries>li,.principles>li,.faq>details,.more-list,.contact-intro,.form-card,.feature-scheme,.feature-points>li,.checklist>li,.task-list>li){transition:opacity .55s ease,transform .55s ease}
html.motion .section:not(.in-view) :is(.section-head,.grid-3>*,.grid-4>*,.services>li,.deliverables>li,.industries>li,.principles>li,.faq>details,.more-list,.contact-intro,.form-card,.feature-scheme,.feature-points>li,.checklist>li,.task-list>li){opacity:0;transform:translateY(14px)}
html.motion .section.in-view :is(.grid-3,.grid-4,.services,.deliverables,.industries,.principles,.faq,.feature-points,.checklist,.task-list)>:nth-child(2){transition-delay:.07s}
html.motion .section.in-view :is(.grid-3,.grid-4,.services,.deliverables,.industries,.principles,.faq,.feature-points,.checklist,.task-list)>:nth-child(3){transition-delay:.14s}
html.motion .section.in-view :is(.grid-3,.grid-4,.services,.deliverables,.industries,.principles,.faq,.feature-points,.checklist,.task-list)>:nth-child(4){transition-delay:.21s}
html.motion .section.in-view :is(.grid-3,.grid-4,.services,.deliverables,.industries,.principles,.faq,.feature-points,.checklist,.task-list)>:nth-child(5){transition-delay:.28s}
html.motion .section.in-view :is(.grid-3,.grid-4,.services,.deliverables,.industries,.principles,.faq,.feature-points,.checklist,.task-list)>:nth-child(6){transition-delay:.35s}
html.motion .section.in-view :is(.grid-3,.grid-4,.services,.deliverables,.industries,.principles,.faq,.feature-points,.checklist,.task-list)>:nth-child(n+7){transition-delay:.42s}
/* схемы внутри разделов вычерчиваются, когда раздел виден, а не при загрузке */
html.motion .section .scheme :is(.draw,.lbl,.pulse){animation-play-state:paused}
html.motion .section.in-view .scheme :is(.draw,.lbl,.pulse){animation-play-state:running}
html.motion .section.in-view .form-card{transition-delay:.1s}
/* цикл услуг: линия прочерчивается слева направо, узлы появляются по очереди */
html.motion .services::before{transform:scaleX(0);transform-origin:left center;transition:transform .9s ease .25s}
html.motion .section.in-view .services::before{transform:none}
html.motion .services .node{opacity:0;transform:scale(.4)}
html.motion .section.in-view .services .node{animation:pop .45s cubic-bezier(.2,.8,.3,1.2) both}
html.motion .section.in-view .services>:nth-child(2) .node{animation-delay:.2s}
html.motion .section.in-view .services>:nth-child(3) .node{animation-delay:.4s}
html.motion .section.in-view .services>:nth-child(4) .node{animation-delay:.6s}
/* пиктограммы вычерчиваются при появлении раздела */
html.motion .section .ico [pathLength]{stroke-dasharray:1;stroke-dashoffset:1}
html.motion .section.in-view .ico [pathLength]{animation:draw .9s ease .15s both}
/* карточки: лёгкий подъём и подсветка под курсором */
.problem,.competence,.format,.service,.deliverables>li{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
@media (hover:hover){
  .problem:hover,.competence:hover,.format:hover,.service:hover,.deliverables>li:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 12px 28px -22px rgba(20,47,59,.5)}
  .glow{position:relative;isolation:isolate}
  .glow::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s ease;background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),var(--glow),transparent 65%)}
  .glow:hover::after{opacity:1}
}
.btn{transition:background-color .15s,color .15s,border-color .15s,transform .15s}
.btn:active{transform:translateY(1px)}
.theme-toggle svg{transition:transform .3s ease}
.theme-toggle:hover svg{transform:rotate(25deg)}
.site-header{transition:box-shadow .25s ease,background-color .25s ease}
.site-header.scrolled{box-shadow:0 10px 24px -20px rgba(20,47,59,.55);background-color:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
html.motion .faq details[open]>p{animation:rise .3s ease both}
.more-list summary::after,.faq summary::after{transition:transform .2s ease}
@media print{html.motion .section:not(.in-view) *{opacity:1!important;transform:none!important}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
@media print{.site-header,.site-footer,.consent,.section-contact,.sheet-bg{display:none}body{background:none}}