/* ═══════════════════════════════════════════════════════════
   АВАНГАРД v5 — ИНЖЕНЕРНЫЙ ТЕРМИНАЛ 2100
   base: tokens · reset · hud chrome · nav · hero · buttons
   ═══════════════════════════════════════════════════════════ */

:root{
  --av-void:#04070A;
  --av-panel:#090D13;
  --av-steel:#0E141D;
  --av-signal:#00E5FF;
  --av-snow:#EDF2EE;
  --av-body:#9DAEBB;
  --av-muted:#5C6C7A;
  --av-line:rgba(157,180,200,.16);
  --av-line-soft:rgba(157,180,200,.07);
  --font-d:'Tektur',system-ui,sans-serif;
  --font-b:'Geologica',system-ui,sans-serif;
  --font-m:'JetBrains Mono',monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(20px,4vw,64px);
  --rail:64px;
  --sec-pad:clamp(72px,9vw,150px);
  /* ── шкала mono-меток (унификация: было 13px / 11.5px / 10px флэтом у одной роли) ──
     --fs-lbl-sec — метка уровня секции (.sec-tag, .geo-div)
     --fs-lbl-blk — метка уровня блока/колонки (.dlv2-check-lbl/cnt, .dlv2-kicker, .how-phase, .proc-tl-lbl)
     Обе растут на широких экранах: 10px на 4K нечитаем. */
  /* Потолки привязаны к body (17.5px @1920 / 18.5px @2560): подпись НИКОГДА не должна
     быть крупнее основного текста. Первая версия давала 22–26px — подписи спорили
     с абзацами и ломали иерархию. Порядок ступеней: micro < blk < cap < lbl-sec < body. */
  --fs-lbl-sec:clamp(12.5px,0.62vw,17px);
  --fs-lbl-blk:clamp(11.5px,0.55vw,15px);
  /* --fs-cap  — подписи, метаданные, значения полей
     --fs-micro — самое мелкое: индексы 01/02, единицы, служебные пометки */
  --fs-cap:clamp(13px,0.57vw,16px);
  --fs-micro:clamp(11.5px,0.5vw,14px);
}

*{margin:0;padding:0;box-sizing:border-box;}
/* scrollbar-gutter:stable — место под полосу прокрутки зарезервировано всегда,
   в том числе когда попап ставит overflow:hidden. Без него полоса при открытии
   исчезала, страница становилась шире на её ширину, и контент прыгал вбок —
   туда при открытии, обратно при закрытии. */
html{scroll-behavior:smooth;scrollbar-gutter:stable;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}

body{
  background:var(--av-void);
  color:var(--av-snow);
  font-family:var(--font-b);
  font-size:16.5px;
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (min-width:1000px){ body{padding-left:var(--rail);} }

/* blueprint grid on the void */
body[data-grid="on"]{
  background-image:
    linear-gradient(rgba(157,190,220,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(157,190,220,.035) 1px,transparent 1px),
    linear-gradient(rgba(157,190,220,.014) 1px,transparent 1px),
    linear-gradient(90deg,rgba(157,190,220,.014) 1px,transparent 1px);
  background-size:96px 96px,96px 96px,24px 24px,24px 24px;
}

img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
::selection{background:var(--av-signal);color:var(--av-void);}
:focus-visible{outline:2px solid var(--av-signal);outline-offset:3px;}

.container{max-width:1380px;margin-inline:auto;padding-inline:var(--pad);}

strong{font-weight:500;color:var(--av-snow);}

/* ── scanline overlay (CRT, very subtle) ── */
.scanline{position:fixed;inset:0;z-index:96;pointer-events:none;display:none;}
body[data-scan="on"] .scanline{display:block;}
.scanline::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.13) 0 1px,transparent 1px 3px);
  opacity:.35;
}
@media (prefers-reduced-motion: no-preference){
  body[data-scan="on"][data-motion="on"] .scanline::after{
    content:"";position:absolute;left:0;right:0;height:120px;
    background:linear-gradient(to bottom,transparent,rgba(198,255,46,.018),transparent);
    animation:scan-sweep 9s linear infinite;
  }
  @keyframes scan-sweep{from{top:-15%;}to{top:115%;}}
}

/* ── type helpers ── */
.h2{
  font-family:var(--font-d);font-weight:600;
  font-size:clamp(30px,3.6vw,56px);
  line-height:1.04;letter-spacing:-.01em;
  text-transform:uppercase;text-wrap:balance;
  overflow-wrap:break-word;
}
.mono{font-family:var(--font-m);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;}
.muted{color:var(--av-muted);}
.sig{color:var(--av-signal);}

/* section frame: every .sec opens with a tag row */
.sec{padding-block:var(--sec-pad);position:relative;}
.sec-tag{
  display:flex;align-items:center;gap:16px;
  margin-bottom:clamp(36px,4.5vw,64px);
}
.sec-tag .t{
  font-family:var(--font-m);font-size:var(--fs-lbl-sec);letter-spacing:.12em;text-transform:uppercase;
  color:var(--av-signal);white-space:nowrap;
}
.sec-tag .t::before{content:"[ ";color:var(--av-muted);}
.sec-tag .t::after{content:" ]";color:var(--av-muted);}
.sec-tag .ln{flex:1;height:1px;background:var(--av-line-soft);}
.sec-tag .ix{font-family:var(--font-m);font-size:var(--fs-lbl-sec);letter-spacing:.12em;color:var(--av-muted);}

/* corner brackets utility */
.brkt{position:relative;}
.brkt::before,.brkt::after{
  content:"";position:absolute;width:14px;height:14px;pointer-events:none;
  border:1px solid var(--av-signal);opacity:.85;
}
.brkt::before{top:-1px;left:-1px;border-right:0;border-bottom:0;}
.brkt::after{bottom:-1px;right:-1px;border-left:0;border-top:0;}

/* ── buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-m);font-weight:700;font-size:12.5px;
  letter-spacing:.12em;text-transform:uppercase;
  padding:17px 30px;border-radius:0;white-space:nowrap;position:relative;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease);
}
.btn .arr{transition:transform .22s var(--ease);}
.btn:hover .arr{transform:translateX(5px);}
.btn-fill{background:var(--av-signal);color:var(--av-void);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));}
.btn-fill:hover{box-shadow:0 0 32px color-mix(in srgb,var(--av-signal) 25%,transparent);filter:brightness(1.06);}
.btn-ghost{border:1px solid var(--av-line);color:var(--av-snow);}
.btn-ghost:hover{border-color:var(--av-snow);}
.btn-ghost-signal{border:1px solid var(--av-signal);color:var(--av-signal);padding:12px 22px;}
.btn-ghost-signal:hover{background:var(--av-signal);color:var(--av-void);}

/* ── scroll reveal ── */
@media (prefers-reduced-motion: no-preference){
  html.js body[data-motion="on"] .rv{
    opacity:0;transform:translateY(24px);
    transition:opacity .65s var(--ease),transform .65s var(--ease);
    transition-delay:var(--d,0s);
  }
  html.js body[data-motion="on"] .rv.in{opacity:1;transform:none;}
}

/* ═══ HUD LEFT RAIL ═══ */
.hud-rail{
  position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:110;
  display:none;flex-direction:column;align-items:center;justify-content:space-between;
  padding:88px 0 20px;border-right:1px solid var(--av-line-soft);
  background:rgba(4,7,10,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
@media (min-width:1000px){ .hud-rail{display:flex;} }
.rail-brand{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--font-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--av-muted);overflow:hidden;text-overflow:ellipsis;
  max-height:calc(100vh - 160px);
}
.rail-index{display:flex;flex-direction:column;gap:14px;align-items:center;}
.rail-index a{
  width:24px;height:24px;display:grid;place-items:center;
  font-family:var(--font-m);font-size:11px;color:var(--av-muted);
  border:1px solid transparent;transition:all .2s var(--ease);
}
.rail-index a.act{color:var(--av-signal);border-color:var(--av-signal);}
.rail-index a:hover{color:var(--av-snow);}
.rail-pct{font-family:var(--font-m);font-size:10px;letter-spacing:.1em;color:var(--av-signal);}

/* ═══ NAVBAR ═══ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:120;
  display:flex;align-items:center;gap:24px;
  padding:0 var(--pad);height:64px;
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
@media (min-width:1000px){ .nav{left:var(--rail);} }
.nav.scrolled{
  background:rgba(4,7,10,.85);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom-color:var(--av-line-soft);
}
/* 35px — минус 10% от прежних 39px по просьбе Chase: логотип занимал в шапке
   больше места, чем нужно, и отжимал меню. */
.nav-logo-img{height:35px;width:auto;max-height:35px;}
@media (max-width:900px){ .nav-logo-img{height:38px;max-height:38px;} }
/* min-width:0 обязателен: без него флекс-элемент не может стать уже своего контента,
   и на стыках брейкпоинтов шапка переполнялась на 1–2px вместо того, чтобы сжать
   промежутки между пунктами (замер шагом 10px нашёл такую точку на 1100px). */
.nav-links{display:none;align-items:center;gap:clamp(18px,2.6vw,38px);margin-left:auto;min-width:0;}
@media (min-width:901px){ .nav-links{display:flex;} }
/* Компактный nav при добавлении 6-го пункта: сначала logo меньше, потом "/" исчезает */
@media (min-width:901px) and (max-width:1200px){ .nav-logo-img{height:28px;max-height:28px;} }
@media (min-width:901px) and (max-width:1060px){ .nav-links{gap:12px;} }
/* ═══ АВТО-УЖИМАНИЕ ШАПКИ ═══
   Классы вешает скрипт в index.html: он замеряет фактическое переполнение и
   включает уровни по очереди, пока строка не соберётся. Пиксельных порогов нет —
   поэтому смена шрифта, языка или длины пункта ничего не ломает.
   Порядок: слоган → разделители «/» → пункт «Контакты» → телефон и почта. */
.nav.fit-tagline .nav-tagline{display:none;}
.nav.fit-slash .nav-links a::before{content:'';}
.nav.fit-contacts-link .nav-links a[href="#contacts"]{display:none;}
.nav.fit-status .nav-status{display:none;}
.nav-links a{
  font-family:var(--font-d);font-size:11.5px;letter-spacing:.14em;font-weight:500;
  color:var(--av-body);transition:color .2s;
}
.nav-links a::before{content:"/ ";color:var(--av-muted);}
.nav-links a:hover{color:var(--av-signal);}
.nav-status{
  display:none;flex-direction:column;align-items:flex-start;gap:3px;
  font-family:var(--font-d);font-size:10.5px;letter-spacing:.1em;color:var(--av-muted);
}
/* Порог 1100px убран: телефон и почта появлялись скачком и ломали лестницу
   уступок — на 1050px шапка была ужата только слоганом, а на 1100 внезапно
   скрывались и «Контакты», и весь блок контактов. Теперь блок доступен со всех
   десктопных ширин, а убирать ли его — решает авто-ужимание последним уровнем. */
@media (min-width:901px){ .nav-status{display:flex;margin-left:clamp(16px,2.5vw,48px);} }
.nav-phone{font-size:15px;letter-spacing:.03em;font-weight:700;font-family:var(--font-d);color:var(--av-snow);white-space:nowrap;}
.nav-phone:hover{color:var(--av-signal);}
.nav-email{font-size:12px;letter-spacing:.04em;font-family:var(--font-d);color:var(--av-muted);}
.nav-email:hover{color:var(--av-signal);}
.nav-dot{width:6px;height:6px;background:var(--av-signal);box-shadow:0 0 8px var(--av-signal);}
@media (prefers-reduced-motion: no-preference){
  body[data-motion="on"] .nav-dot{animation:dot-pulse 2.2s ease-in-out infinite;}
  @keyframes dot-pulse{50%{opacity:.35;}}
}
.nav-cta{margin-left:auto;}
@media (min-width:901px){ .nav-cta{margin-left:8px;} }

/* ═══ HERO ═══ */
/* Ровно высота экрана. Раньше стоял `justify-content:flex-end` — контент прижимался
   к низу, и сверху зияла пустота тем большая, чем выше окно (замер: 257px при
   высоте 900, 358px при 1080, 375px при 1440). Теперь .hero-inner растягивается
   на всю высоту и распределяет блоки сам: текст сверху, кнопки и телеметрия внизу,
   между ними — распорка .hero-gap, в которую попадает модель. */
.hero{
  height:100svh;min-height:640px;position:relative;display:flex;flex-direction:column;
  overflow:hidden;border-bottom:1px solid var(--av-line-soft);
}
/* Капа `min-height:1200px` при высоте окна ≥1200 удалена: из-за неё hero переставал
   совпадать с экраном (1200px при окне 1440), и следующая секция вылезала в кадр. */
/* Канвас — прямой ребёнок .hero, растянут на весь блок: ровно то поведение,
   что на проде. Зону под модель на узких экранах задаём координатами top/bottom
   этого же слоя (см. медиа-блоки в index.html), а НЕ вложенностью в .hero-inner —
   вложенность обрезала канвас на паддинги контейнера. */
.hero-stage{position:absolute;inset:0;z-index:0;pointer-events:none;}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;}
/* Распорка между подзаголовком и кнопками: забирает всё свободное место,
   поэтому текст остаётся вверху, кнопки и телеметрия — внизу, а середина
   отдана модели. */
.hero-gap{flex:1 1 auto;min-height:0;}
.hero-veil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(4,7,10,.92) 0%,rgba(4,7,10,.55) 45%,rgba(4,7,10,.12) 75%);
}
/* flex-колонка на всю высоту hero — она и распределяет содержимое по вертикали. */
.hero-inner{position:relative;z-index:2;width:100%;flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;
  padding-bottom:clamp(48px,7vh,84px);padding-top:clamp(104px,13vh,150px);}
.hero-kicker{
  font-family:var(--font-m);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--av-signal);margin-bottom:24px;display:flex;align-items:center;gap:14px;
}
.hero-kicker::before{content:"";width:34px;height:1px;background:var(--av-signal);}
.hero-h1{
  font-family:var(--font-d);font-weight:700;
  font-size:clamp(24px,4.8vw,68px);
  line-height:1.0;letter-spacing:-.005em;text-transform:uppercase;
}
.hero-h1 .hl{color:var(--av-signal);}
.hero-sub{
  max-width:520px;font-size:17.5px;color:var(--av-body);
  margin-top:28px;text-wrap:pretty;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px;}

/* telemetry chips row */
.hero-tele{
  display:flex;flex-wrap:wrap;gap:0;margin-top:clamp(40px,6vh,64px);
  border:1px solid var(--av-line-soft);
  background:rgba(9,13,19,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.tele-cell{
  flex:1 1 150px;padding:16px 22px;
  border-right:1px solid var(--av-line-soft);
}
.tele-cell:last-child{border-right:0;}
.tele-cell .tv{font-family:var(--font-d);font-weight:600;font-size:clamp(19px,1.9vw,26px);color:var(--av-snow);line-height:1.1;}
.tele-cell .tv em{font-style:normal;color:var(--av-signal);}
/* На десктопе — полный текст подписи; короткий вариант только для мобилы
   (переключается в @media max-width:760px, index.html) */
.tele-cell .tk .tk-sm{display:none;}
.tele-cell .tk{font-family:var(--font-m);font-size:clamp(11px,0.85vw,13px);color:var(--av-muted);margin-top:6px;}
/* «г.» в «С 2011 г.» — был inline style="font-size:.48em" прямо в разметке (единственное
   место на странице, где размер задавался инлайном и не поддавался ни одному CSS-правилу) */
.tv .tv-unit{font-size:.62em;opacity:.75;}


/* ── ticker ── */
.ticker{
  border-bottom:1px solid var(--av-line-soft);
  overflow:hidden;padding-block:13px;position:relative;background:var(--av-panel);
}
.ticker-track{display:flex;gap:0;width:max-content;}
.ticker-track span{
  font-family:var(--font-m);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--av-body);white-space:nowrap;padding-right:18px;
}
.ticker-track span::after{content:"·";color:var(--av-signal);padding-left:18px;}
@media (prefers-reduced-motion: no-preference){
  body[data-motion="on"] .ticker-track{animation:tick 36s linear infinite;}
  @keyframes tick{to{transform:translateX(-50%);}}
}

/* ═══════════════════════════════════════════════════════════
   WIDE SCREEN ADAPTIVE — 1440 / 1920 / 2560
   ═══════════════════════════════════════════════════════════ */

@media (min-width:1440px){
  .container{max-width:1520px;}
  .hero-h1{font-size:clamp(66px,4.8vw,78px);}
  .nav-links a{font-size:12px;}
  .nav-tagline{font-size:13px;}
  .rail-brand{font-size:10px;}
  .rail-index a{font-size:10px;width:26px;height:26px;}
  .rail-pct{font-size:11px;}
}

@media (min-width:1920px){
  :root{ --pad:clamp(56px,3.2vw,96px); --rail:72px; }
  .container{max-width:1760px;}
  body{font-size:17.5px;}
  .hero-h1{font-size:clamp(74px,4.8vw,92px);}
  .nav-links a{font-size:13px;}
  .nav-tagline{font-size:14px;}
  .h2{font-size:clamp(54px,3.8vw,72px);}
  :root{ --sec-pad:clamp(96px,7.5vw,144px); }
  .hero-sub{max-width:680px;font-size:19px;}
  .tele-cell .tv{font-size:clamp(23px,1.6vw,32px);}
  .rail-brand{font-size:11px;}
  .rail-index a{font-size:11px;width:28px;height:28px;}
  .rail-pct{font-size:12px;}
}

@media (min-width:2560px){
  :root{ --pad:clamp(80px,3.5vw,128px); --rail:80px; }
  .container{max-width:2200px;}
  body{font-size:18.5px;}
  .hero-h1{font-size:clamp(90px,4.5vw,112px);}
  .h2{font-size:clamp(68px,3.8vw,90px);}
  :root{ --sec-pad:clamp(120px,8vw,176px); }
  .hero-sub{max-width:820px;font-size:21px;}
  .tele-cell .tv{font-size:clamp(30px,1.7vw,42px);}
  .btn{font-size:13.5px;padding:20px 38px;}
  .nav-links a{font-size:14px;}
  .nav-tagline{font-size:15px;}
  .nav-phone{font-size:16px;}
  .nav-email{font-size:13px;}
  .rail-brand{font-size:12px;}
  .rail-index a{font-size:12px;width:30px;height:30px;}
  .rail-pct{font-size:13px;}
}

/* ═══ ULTRA-WIDE 3200px+ ═══ */
@media (min-width:3200px){
  :root{ --rail:clamp(64px,4.2vw,120px); }
  .container{max-width:2800px;}
  .nav-logo-img{height:1.3vw;max-height:1.3vw;}
  .nav-status{margin-left:clamp(24px,3vw,64px);}
  /* hud-rail: размеры шрифтов заданы фиксом 15px в index.html — служебная хромировка
     не должна плавать от ширины окна. Здесь остаются только геометрия и отступы. */
  .rail-index{gap:1.1vw;}
  .rail-index a{width:1.7vw;height:1.7vw;}
}
/* кнопка в шапке не должна расти на 4K — сохраняем компактный размер */
.nav .nav-cta{padding:12px 22px;font-size:12.5px;align-self:center;}

/* Шкала подписей (--fs-cap / --fs-micro) применяется в КОНЦЕ index.html:
   инлайн-<style> идёт по каскаду после этого файла и перебивал бы правила отсюда. */

/* ═══ LIGHT THEME ═══ */
html[data-theme="light"]{
  --av-void:#EDF2EE;
  --av-panel:#E1EBE4;
  --av-steel:#D4DDD7;
  --av-signal:#005A6A;
  --av-snow:#1A2011;
  --av-body:#243B2F;
  --av-muted:#5C6C7A;
  --av-line:rgba(11,17,23,.12);
  --av-line-soft:rgba(11,17,23,.06);
}
html[data-theme="light"] body{background:#EDF2EE;color:#1A2011;font-weight:400;}

/* Карта РФ — заливка регионов захардкожена (#2b3f54, тёмно-синий) без учёта темы, светлая тема не переопределяла */
html[data-theme="light"] .rf-land path{fill:var(--av-steel);stroke:var(--av-line);}
html[data-theme="light"] .geo-dot i{box-shadow:0 0 0 2px var(--av-void),0 0 10px var(--av-signal);}
html[data-theme="light"] .geo-dot.is-active i{box-shadow:0 0 0 2px var(--av-void),0 0 0 4px var(--av-signal),0 0 16px var(--av-signal);}

/* Hero/ticker border-bottom — убираем разделитель в светлой теме */
html[data-theme="light"] .hero{border-bottom-color:transparent;}
html[data-theme="light"] .ticker{border-bottom-color:transparent;}

/* Hero: light mode — canvas is transparent, body bg (#EDF2EE) shows through */
html[data-theme="light"] .hero-veil{background:transparent;}
html[data-theme="light"] .hero-tele{
  background:rgba(225,235,228,.85);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
html[data-theme="light"] .hero-tele .tele-cell{border-right-color:rgba(11,17,23,.12);}
/* Hero h1 color (inherits --av-snow which is dark in light mode) — fine */
/* Ticker: also light */
html[data-theme="light"] .ticker{background:var(--av-panel);}
/* Showreel: keeps dark structural colors; --av-signal НЕ пинится → следует акценту Tweaks Panel */
html[data-theme="light"] .showreel-frame{
  --av-void:#04070A;--av-panel:#090D13;--av-steel:#0E141D;
  --av-snow:#EDF2EE;--av-body:#9DAEBB;
  --av-muted:#5C6C7A;--av-line:rgba(157,180,200,.16);
  --av-line-soft:rgba(157,180,200,.07);
}
/* Cases dossier widget (.v2): photo-overlay elements sit on a dark photo scrim.
   Pin ONLY background/structural vars so scrim stays dark by default (base .v2-toggle/.v2-count/.v2-arrow
   backgrounds in cases-variants.css are hardcoded rgba(4,7,10,x) literals — this pin does NOT control them,
   it only keeps .on-button text (var(--av-void)) dark for contrast against the accent pill in any theme.
   --av-signal is NOT pinned → always follows JS tweaks accent (user choice). */
.v2-toggle,.v2-count,.v2-arrow,.v2-dots{
  --av-void:#04070A;--av-panel:#090D13;--av-steel:#0E141D;
  --av-snow:#EDF2EE;--av-body:#9DAEBB;
  --av-muted:#5C6C7A;--av-line:rgba(157,180,200,.16);
  --av-line-soft:rgba(157,180,200,.07);
}
/* Light theme: v2-toggle/v2-count/v2-arrow → светлое стекло вместо всегда-тёмного скрима (по запросу).
   Пин выше форсит --av-snow/--av-body тёмными, поэтому здесь литералы светлой темы, не var(). */
html[data-theme="light"] .v2-toggle{background:rgba(237,242,238,.85);border-color:rgba(11,17,23,.14);}
html[data-theme="light"] .v2-toggle button{color:#3A5044;}
html[data-theme="light"] .v2-toggle button.on{background:transparent;color:var(--av-signal);box-shadow:inset 0 0 0 1px var(--av-signal);}
html[data-theme="light"] .v2-count{background:rgba(237,242,238,.85);color:#1A2011;border-color:rgba(11,17,23,.1);}
html[data-theme="light"] .v2-count .mode{color:#4F6E6A;}
html[data-theme="light"] .v2-arrow{background:rgba(237,242,238,.78);color:#1A2011;border-color:rgba(11,17,23,.14);}
/* Footer: light mode — правило удалено 2026-08-28.
   Оно давало секции футера панельный фон во всю ширину и верхнюю линию. После
   переноса макета фон и рамку несёт карточка .ft-card, а линия во всю ширину
   дублировала её рамку и читалась как лишний разделитель между секциями.
   Ловушка: border-top у .footer был объявлен ЕЩЁ И здесь, только под светлую
   тему, — сняв его в index.html, в тёмной теме линия исчезла, а в светлой
   осталась. */
/* Logo: white wordmark → invert to black for light backgrounds */
html[data-theme="light"] .nav-logo-img,
html[data-theme="light"] .ft-logo{filter:invert(1) brightness(.9);}
/* Nav bg in light mode */
html[data-theme="light"] .nav.scrolled{
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
/* ── Мобильное меню: заменяем хардкодный тёмный фон на светлый ── */
html[data-theme="light"] .nav-drawer{
  background:rgba(237,242,238,.98);
}
html[data-theme="light"] .hud-rail{
  background:rgba(255,255,255,.88);
  border-right-color:rgba(11,17,23,.12);
}

/* ── Background animation (diagonal proflist) — светлая тема: тёмные полосы, спецификация пользователя без изменений (2026-07-24) ── */
html[data-theme="light"] .site-corr{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(105deg,
    rgba(11,17,23,.028) 0 2px,
    transparent 2px 22px,
    rgba(11,17,23,.014) 22px 24px,
    transparent 24px 44px);
  background-size:200% 100%;
}
/* ── тёмная тема: тот же паттерн, светлые полосы на тёмном фоне ── */
html:not([data-theme="light"]) .site-corr{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(105deg,
    rgba(237,242,238,.055) 0 2px,
    transparent 2px 22px,
    rgba(237,242,238,.028) 22px 24px,
    transparent 24px 44px);
  background-size:200% 100%;
}
@media (prefers-reduced-motion:no-preference){
  .site-corr{animation:site-corr 60s linear infinite;}
}
@keyframes site-corr{
  from{background-position:0 0;}
  to{background-position:456px 0;}
}

/* ── Убираем видимые border-разделители между секциями в светлой теме ── */
html[data-theme="light"] .svc-grid,
html[data-theme="light"] .stats-grid{border-color:transparent;background:transparent;}
html[data-theme="light"] .stat-cell{border-color:transparent;}
html[data-theme="light"] .svc{border-color:transparent;}

/* ── About section: in light mode --av-snow flips to #1A2011 (dark), override to stay light ── */
html[data-theme="light"] .sec-passport{background:#E3EBE5;color:#1A2011;}
html[data-theme="light"] .sec-passport .sec-tag .t{color:#1A2011;}
html[data-theme="light"] .sec-passport .sec-tag .t::before,
html[data-theme="light"] .sec-passport .sec-tag .t::after,
html[data-theme="light"] .sec-passport .sec-tag .ix{color:rgba(11,17,23,.4);}
html[data-theme="light"] .sec-passport .sec-tag .ln{background:rgba(11,17,23,.12);}

/* ── Ритм секций: единый --sec-pad для ВСЕХ секций без исключений.
   Прежнее правило .sec-mq/.sec-contacts{clamp(72px,9vw,220px)} давало разнобой
   (+28.8px на 1920, +44px на 2560) — убрано по требованию единообразия. ── */

/* ── Мобильный detail slide-over: back-бар хардкод rgba(4,7,10,.93) → заменяем на светлый в light теме ── */
html[data-theme="light"] .mc-back{
  background:rgba(255,255,255,.95);
}

/* ── Фото-оверлеи в mobile detail (mph-count, mph-toggle, mph-dots) — те же что v2-count/toggle:
      color:var(--av-snow) в light = #1A2011 (тёмный) на тёмном rgba(4,7,10,.72) скриме → плохой контраст.
      Решение: пиним тёмные значения переменных, как для v2-toggle/v2-count/v2-arrow/v2-dots ── */
/* mph (mobile photo overlays) — same rule as v2: bg vars pinned, signal follows tweaks */
.mph-count,.mph-toggle,.mph-dots{
  --av-void:#04070A;--av-panel:#090D13;--av-steel:#0E141D;
  --av-snow:#EDF2EE;--av-body:#9DAEBB;
  --av-muted:#5C6C7A;--av-line:rgba(157,180,200,.16);
  --av-line-soft:rgba(157,180,200,.07);
}
/* Light theme: mph-count/mph-toggle → светлое стекло, тот же фикс что v2-count/v2-toggle выше.
   Пин выше форсит --av-snow/--av-body тёмными, поэтому здесь литералы светлой темы, не var(). */
html[data-theme="light"] .mph-toggle{background:rgba(237,242,238,.85);border-color:rgba(11,17,23,.14);}
html[data-theme="light"] .mph-toggle button{color:#3A5044;}
html[data-theme="light"] .mph-count{background:rgba(237,242,238,.85);color:#1A2011;border-color:rgba(11,17,23,.1);}

/* ── Cookie banner: в light теме фон белый, не sage-panel ── */
html[data-theme="light"] #cookie-bar{
  background:rgba(255,255,255,.97);
}

/* ── Lime glows (rgba(198,255,46,...)) в light теме: --av-signal=#4E7500 (olive), а glow хардкодом lime —
      при светлом фоне заметно расходятся; заменяем на olive-совместимый тон ── */
html[data-theme="light"] .mq-fill{box-shadow:0 0 10px color-mix(in srgb,var(--av-signal) 35%,transparent);}
html[data-theme="light"] .proc-fill{box-shadow:0 0 10px color-mix(in srgb,var(--av-signal) 35%,transparent);}
html[data-theme="light"] .mq-opt.sel{box-shadow:0 0 0 1px var(--av-signal),0 0 24px color-mix(in srgb,var(--av-signal) 10%,transparent);}
html[data-theme="light"] .mq-opt.sel .ock{box-shadow:0 0 8px color-mix(in srgb,var(--av-signal) 35%,transparent);}

/* ── sec-passport (About): новые pass-* классы читают var(--av-body/--av-snow/--av-line/--av-panel/--av-signal),
   которые уже флипаются для light theme выше в этом файле — точечных литеральных оверрайдов не нужно.
   Единственный литерал ниже — .pass-photo-tag--top на фото поверх снимка, вне потока темы страницы. ── */
html[data-theme="light"] .pass-photo-tag--top,
html[data-theme="light"] .pass-photo-tag--bottom{color:#EDF2EE;}
html[data-theme="light"] .ab-beam{fill:rgba(11,17,23,.07);}
html[data-theme="light"] .ab-arw,html[data-theme="light"] .ab-dlabel{fill:#0B1117;}

/* ── cert-секция: light-оверрайды УДАЛЕНЫ (2026-08-27) ──
   Секция была свёрстана литералами тёмной темы (rgba(237,242,238,…)), из-за чего
   требовала девять зеркальных правил здесь — палитра дублировалась дважды и любая
   правка цвета требовала синхронной правки в двух местах.
   Базовые правила переведены на токены (--av-line / --av-line-soft / --av-muted /
   --av-snow), которые сами меняются вместе с темой. Компенсация больше не нужна. */