/* Tigin — стили сайта.
   Порядок: шрифты → токены → база → компоненты → шапка → секции главной → внутренние страницы → панели.
   Система форм: прямые углы везде, круглыми остаются только точки-маркеры.
   Один акцент — сигнальный оранжевый; мелкий оранжевый текст берёт --accent-ink (контраст AA). */

/* шрифты лежат рядом: без сторонних запросов в критическом пути.
   Подмножества latin / cyrillic / cyrillic-ext (казахские буквы) догружаются по unicode-range. */
@font-face { font-family: 'Fira Sans Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/fira-sans-condensed-600-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Fira Sans Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/fira-sans-condensed-600-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Fira Sans Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/fira-sans-condensed-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fira Sans Extra Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/fira-sans-extra-condensed-500-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Fira Sans Extra Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/fira-sans-extra-condensed-500-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Fira Sans Extra Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/fira-sans-extra-condensed-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fira Sans Extra Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/fira-sans-extra-condensed-600-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Fira Sans Extra Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/fira-sans-extra-condensed-600-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Fira Sans Extra Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/fira-sans-extra-condensed-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('assets/fonts/golos-text-400-700-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('assets/fonts/golos-text-400-700-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('assets/fonts/golos-text-400-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/ibm-plex-mono-500-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/ibm-plex-mono-500-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;

  /* поверхность — «бетон»: нейтральный светло-серый, на нём белый макет читается объёмом */
  --ground: #E6E7E3;
  --ground-2: #DBDCD7;
  --white: #FAFAF8;
  --ink: #14171A;
  --ink-2: #454A4F;
  --ink-3: #5E6368;
  --line: rgba(20, 23, 26, .16);
  --line-soft: rgba(20, 23, 26, .09);

  --accent: #F2661F;
  --accent-ink: #B03E08;

  --night: #121416;
  --night-2: #1C1F22;
  --on-night: #ECEDEA;
  --on-night-2: #A9AEB2;
  --line-night: rgba(236, 237, 234, .16);

  --f-display: 'Fira Sans Condensed', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --f-mega: 'Fira Sans Extra Condensed', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --fs-hero: clamp(2.5rem, 5.05vw, 6rem);
  --fs-h2: clamp(2.125rem, 1.2rem + 3.3vw, 4.5rem);
  --fs-h3: clamp(1.5rem, 1.15rem + 1.2vw, 2.125rem);
  --fs-num: clamp(3.75rem, 2rem + 6vw, 7rem);
  --fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-label: .75rem;

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section: clamp(5rem, 11vw, 10.5rem);
  --hdr-h: 72px;
  --max: 1560px;

  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --dur-1: .2s;
  --dur-2: .45s;
  --dur-3: .9s;

  /* слои: сцена → текст поверх сцены → шапка → панели */
  --z-pin: 0;
  --z-flow: 1;
  --z-hdr: 90;
  --z-sheet: 200;
  --z-film: 210;
}

/* ---------- база ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 var(--fs-body)/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.site { overflow-x: clip; }
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 0; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--ink); }

a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 3px;
}
.film a:focus-visible, .film button:focus-visible, .foot a:focus-visible, .filmbox button:focus-visible {
  outline-color: var(--on-night);
}

.skip {
  position: fixed; left: var(--gutter); top: 0; z-index: 300; transform: translateY(-120%);
  background: var(--ink); color: var(--white); padding: .875rem 1.125rem; font-size: var(--fs-small); font-weight: 500;
}
.skip:focus { transform: none; }
/* цель skip-ссылки получает фокус программно: рамка вокруг всего <main> не нужна */
#main:focus { outline: none; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- типографика ---------- */
.h2 {
  font: 600 var(--fs-h2)/.98 var(--f-display); letter-spacing: -.018em; text-wrap: balance;
  max-width: 16em;
}
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-width: 58ch; text-wrap: pretty; }

/* ---------- иконки (Phosphor, через маску: одна декларация на глиф) ---------- */
.ico {
  display: inline-block; flex: none; width: 1em; height: 1em; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.ico-arrow { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E"); }
:root {
  --ico-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M205.66,117.66a8,8,0,0,1-11.32,0L136,59.31V216a8,8,0,0,1-16,0V59.31L61.66,117.66a8,8,0,0,1-11.32-11.32l72-72a8,8,0,0,1,11.32,0l72,72A8,8,0,0,1,205.66,117.66Z'/%3E%3C/svg%3E");
  --ico-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M205.66,149.66l-72,72a8,8,0,0,1-11.32,0l-72-72a8,8,0,0,1,11.32-11.32L120,196.69V40a8,8,0,0,1,16,0V196.69l58.34-58.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
}
.ico-x { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'/%3E%3C/svg%3E"); }
.ico-play { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M240,128a15.74,15.74,0,0,1-7.6,13.51L88.32,229.65a16,16,0,0,1-16.2.3A15.86,15.86,0,0,1,64,216.13V39.87a15.86,15.86,0,0,1,8.12-13.82,16,16,0,0,1,16.2.3L232.4,114.49A15.74,15.74,0,0,1,240,128Z'/%3E%3C/svg%3E"); }

/* ---------- кнопки и ссылки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  min-height: 54px; padding: 0 1.5rem; border: 1px solid transparent;
  font: 500 1rem/1 var(--f-body); letter-spacing: -.005em; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease, transform var(--dur-1) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn .ico { transition: transform var(--dur-2) var(--ease); }
.btn:hover .ico-arrow { transform: translateX(4px); }
/* главная кнопка — чёрным по сигнальному оранжевому, как на знаках безопасности */
.btn-accent { background: var(--accent); color: var(--ink); }
.btn-accent:hover { background: var(--ink); color: var(--white); }
.btn-ink { background: var(--ink); color: var(--white); }
.btn-ink:hover { background: var(--white); color: var(--ink); }
.btn-line { border-color: var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--white); }
.btn-sm { min-height: 44px; padding: 0 1.125rem; font-size: var(--fs-small); }
.btn-block { width: 100%; }

.link {
  display: inline-flex; align-items: center; gap: .625rem; font-weight: 500; color: var(--ink);
  padding-block: .375rem; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size var(--dur-2) var(--ease), color var(--dur-1) ease;
}
.link .ico { transition: transform var(--dur-2) var(--ease); }
.link:hover { background-size: 0 1px; background-position: 100% 100%; }
.link:hover .ico-arrow { transform: translateX(4px); }

/* ---------- reveal при скролле: [data-rev] + data-in от наблюдателя.
   Атрибут, а не класс: React при перерисовке перезапишет className, data-* не тронет. */
.rev-armed [data-rev] { opacity: 0; transform: translateY(26px); }
.rev-armed [data-rev][data-in="1"] {
  opacity: 1; transform: none;
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
  transition-delay: var(--d, 0s);
}
/* заголовки выезжают из-под маски: строка читается как набранная, а не «всплывшая» */
/* клипуется содержимое, а не сам блок: полностью обрезанный элемент наблюдатель считает невидимым */
.rev-armed [data-rev="mask"] { opacity: 1; transform: none; overflow: hidden; padding-block: .1em .16em; margin-block: -.1em -.16em; }
.rev-armed [data-rev="mask"] > .rev-in { display: block; transform: translateY(112%); }
.rev-armed [data-rev="mask"][data-in="1"] > .rev-in { transform: none; transition: transform 1.1s var(--ease); transition-delay: var(--d, 0s); }

/* ================= шапка ================= */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: var(--z-hdr); }
.hdr-bar {
  position: relative; z-index: 2; height: var(--hdr-h); padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-2) ease, border-color var(--dur-2) ease;
}
.hdr[data-solid="1"] .hdr-bar, .hdr[data-menu="1"] .hdr-bar {
  background: rgba(230, 231, 227, .9); border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
}
@media (prefers-reduced-transparency: reduce) {
  .hdr[data-solid="1"] .hdr-bar, .hdr[data-menu="1"] .hdr-bar { background: var(--ground); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.hdr-logo { display: flex; align-items: center; height: 44px; flex: none; }
.hdr-logo img { height: 22px; width: auto; }

.tgn-nav { display: flex; align-items: center; gap: clamp(.25rem, 1.4vw, 1.25rem); }
.nav-link {
  position: relative; display: inline-flex; align-items: center; gap: .375rem; height: 44px; padding: 0 .625rem;
  font: 500 var(--fs-small)/1 var(--f-body); color: var(--ink); white-space: nowrap;
}
.nav-link::after {
  content: ''; position: absolute; left: .625rem; right: .625rem; bottom: 8px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease);
}
.nav-link:hover::after { transform: scaleX(1); }
.nav-link[data-current="1"]::after { transform: scaleX(1); height: 2px; background: var(--accent); }
.nav-cta { margin-left: .5rem; }

.tgn-burger {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center; flex-direction: column; gap: 6px;
  margin-right: -10px;
}
.tgn-burger span { display: block; width: 22px; height: 2px; background: var(--ink); transition: transform var(--dur-2) var(--ease); }
.tgn-burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.tgn-burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 900px) {
  :root { --hdr-h: 64px; }
  .tgn-burger { display: flex; }
  .tgn-nav {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 1; height: calc(100dvh - 100%);   /* 100% — фактическая высота шапки: с --hdr-h оставалась щель в 1px, и из-под меню выглядывала страница */
    flex-direction: column; align-items: stretch; gap: 0; padding: .5rem var(--gutter) 1.5rem;
    background: var(--ground); overflow-y: auto;
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px);
    transition: opacity var(--dur-1) ease, transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
  }
  .tgn-nav.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity var(--dur-1) ease, transform var(--dur-2) var(--ease), visibility 0s; }
  .nav-link {
    height: auto; padding: 1.125rem 0; justify-content: space-between; border-bottom: 1px solid var(--line);
    font: 600 2rem/1 var(--f-display); letter-spacing: -.01em;
  }
  .nav-link::after { display: none; }
  .nav-cta { margin: auto 0 0; min-height: 56px; font-size: 1rem; }
}

/* ================= сцена: герой и тур по макету — один непрерывный кадр ================= */
.stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
.stage-pin {
  grid-area: 1 / 1 / 3 / 2; align-self: start; position: sticky; top: 0; z-index: var(--z-pin);
  height: 100vh; height: 100svh; overflow: hidden;
}
.stage-canvas {
  position: absolute; inset: 0;
  /* что из кадра закрыто страницей — макет не ставит туда подписи зон:
     сверху шапка, слева в туре текст главы (заливка ::before ниже: сплошная до 32%, растворяется к 55%) */
  --tgn-safe-top: var(--hdr-h);
  --tgn-cover-left: .42;
}
/* в туре левый край кадра растворяется в фоне страницы: там стоит текст главы */
.stage-pin::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--tour, 0);
  background: linear-gradient(90deg, var(--ground) 0%, var(--ground) 32%, rgba(230, 231, 227, 0) 55%);
}
/* и полоса под указателем зон — всегда */
.stage-pin::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 7rem; z-index: 2; pointer-events: none;
  background: linear-gradient(0deg, var(--ground) 0%, var(--ground) 52%, rgba(230, 231, 227, 0) 100%);
}
.hero, .chapters { position: relative; z-index: var(--z-flow); pointer-events: none; }
.hero a, .hero button, .chapter-in { pointer-events: auto; }

.hero {
  grid-area: 1 / 1; min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: auto 1fr; align-items: start;
  padding: calc(var(--hdr-h) + clamp(1.25rem, 4.5vh, 3rem)) var(--gutter) 6.75rem;
  opacity: var(--hero-o, 1);
}
.hero-h {
  font: 600 var(--fs-hero)/.94 var(--f-display); letter-spacing: -.022em;
}
.hero-h .l { display: block; }
/* слово выезжает из собственной маски; поля возвращают место выносным элементам (ф, р, у, й) */
.hero-h .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em .02em .14em; margin: -.12em -.02em -.14em; }
.hero-h .w > span { display: inline-block; transform: translateY(112%); animation: word-in 1s var(--ease) forwards; animation-delay: calc(var(--i) * 55ms + 120ms); }
@keyframes word-in { to { transform: none; } }
.hero-foot { align-self: end; max-width: 22.5rem; animation: rise-in 1s var(--ease) .55s both; }
.hero-lead { max-width: 20.5rem; font-size: var(--fs-lead); line-height: 1.48; color: var(--ink-2); text-wrap: pretty; }
.tgn-hero-cta { display: flex; gap: .75rem; margin-top: 1.75rem; }
.tgn-hero-cta .btn { padding-inline: 1.25rem; }
@keyframes rise-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* указатель зон внизу кадра: содержание тура и его прогресс одновременно */
.rail {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 1.375rem; z-index: 3;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line);
  animation: rise-in 1s var(--ease) .75s both;
}
.rail-i {
  position: relative; display: flex; align-items: baseline; gap: .625rem; text-align: left;
  padding: .875rem .75rem .5rem 0; color: var(--ink-3); font: 500 .875rem/1.2 var(--f-body);
  transition: color var(--dur-1) ease;
}
.rail-i::before {
  content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 3px; background: var(--accent);
  transform: scaleX(var(--p, 0)); transform-origin: left;
}
.rail-n { font: 500 var(--fs-label)/1 var(--f-mono); }
.rail-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-i:hover, .rail-i[data-on="1"] { color: var(--ink); }
.rail-i[data-on="1"] .rail-n { color: var(--accent-ink); }

.chapters { grid-area: 2 / 1; }
.chapter { min-height: 100vh; min-height: 100svh; padding-inline: var(--gutter); }
.chapter-in {
  position: sticky; top: 24vh; top: 24svh; width: min(27rem, 34vw); padding-block: 1rem;
}
.chapter-n { display: block; font: 500 clamp(5.5rem, 9.5vw, 9.5rem)/.8 var(--f-mega); letter-spacing: -.02em; color: var(--accent); }
.chapter-h { margin-top: 1.25rem; font: 600 clamp(2.25rem, 3.6vw, 3.5rem)/.98 var(--f-display); letter-spacing: -.018em; }
.chapter-p { margin-top: 1.125rem; color: var(--ink-2); text-wrap: pretty; }
.chapter-m { margin-top: 1.5rem; padding-top: 1.125rem; border-top: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; gap: 1.125rem; align-items: baseline; }
.chapter-m-v { font: 600 2.75rem/.9 var(--f-mega); letter-spacing: -.01em; white-space: nowrap; }
.chapter-m-t { font-size: var(--fs-small); line-height: 1.4; color: var(--ink-2); }
.chapter .link { margin-top: 1.375rem; font-size: var(--fs-small); }

/* когда контроллер сцены жив, главы сменяют друг друга: видна только та, что в фокусе камеры */
.stage[data-live="1"] .chapter-in { opacity: 0; transform: translateY(18px); transition: opacity .45s ease, transform .7s var(--ease); }
.stage[data-live="1"] .chapter[data-on="1"] .chapter-in,
.stage[data-live="1"] .chapter-in:focus-within { opacity: 1; transform: none; }
.stage[data-live="1"] .chapter:not([data-on="1"]) .chapter-in { pointer-events: none; }

.stage-end { height: 34vh; height: 34svh; }

@media (max-width: 860px) {
  /* телефон: герой → макет прилипает к верху экрана → главы листаются под ним */
  .stage { grid-template-rows: auto 52svh auto; }
  .hero {
    grid-area: 1 / 1; min-height: 0; display: block; opacity: 1;
    padding: calc(var(--hdr-h) + 1.75rem) var(--gutter) 1.25rem;
  }
  .hero-h { font-size: clamp(2.375rem, 11.2vw, 3.75rem); line-height: .96; }
  .hero-h .l { display: inline; }
  .hero-foot { margin-top: 1.375rem; max-width: 30rem; }
  .tgn-hero-cta .btn { flex: 1 1 auto; }
  .stage-pin::before, .stage-pin::after { display: none; }
  .stage-pin {
    grid-area: 2 / 1 / 4 / 2; top: var(--hdr-h); height: calc(52svh - var(--hdr-h) + 64px); z-index: 2;
    background: var(--ground); border-bottom: 1px solid var(--line);
  }
  /* на телефоне макет прилипает ниже шапки, а текст глав идёт под ним — закрытых областей нет */
  .stage-canvas { bottom: 46px; --tgn-safe-top: 0px; --tgn-cover-left: 0; }
  .rail { left: 0; right: 0; bottom: 0; border-top: 1px solid var(--line); grid-template-columns: repeat(6, 1fr); animation: none; }
  .rail-i { justify-content: center; padding: .875rem 0 .875rem; }
  .rail-t { display: none; }
  .chapters { grid-area: 3 / 1; padding-top: 64px; }
  .chapter { min-height: 58svh; padding-block: 1.75rem 3.5rem; }
  .chapter-in { position: static; width: auto; max-width: 34rem; }
  .chapter-n { font-size: 4.5rem; }
  .stage[data-live="1"] .chapter-in, .stage[data-live="1"] .chapter[data-on="1"] .chapter-in { opacity: 1; transform: none; transition: none; }
  .stage[data-live="1"] .chapter:not([data-on="1"]) .chapter-in { pointer-events: auto; }
  .stage-end { height: 8svh; }
}

/* ================= доказательства: масштаб и ожидаемые результаты ================= */
.proof { padding-block: var(--section) calc(var(--section) * .8); border-top: 1px solid var(--line); }
.proof-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); align-items: end; }
.proof-figure { grid-column: 1 / 10; }
.proof-kicker { font-size: var(--fs-lead); color: var(--ink-2); }
.proof-mega {
  margin: .04em 0 0 -.03em;
  font: 600 clamp(8rem, 25.5vw, 25.5rem)/.78 var(--f-mega); letter-spacing: -.03em;
}
.rev-armed .proof-mega[data-rev="mask"] { padding-block: .12em .1em; margin-block: -.08em -.1em; }
.proof-unit { display: block; margin-top: 1.25rem; font: 600 var(--fs-h3)/1 var(--f-display); letter-spacing: -.012em; }
.clients { grid-column: 10 / 13; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.clients li { display: flex; align-items: center; justify-content: center; min-height: calc(clamp(56px, 4.8vw, 72px) + 2rem); padding: 1rem .75rem; border-bottom: 1px solid var(--line); }
.clients li:nth-child(odd) { border-right: 1px solid var(--line); }
.clients img { height: clamp(40px, 3.4vw, 52px); width: auto; filter: grayscale(1) contrast(1.05); opacity: .82; transition: filter var(--dur-2) ease, opacity var(--dur-2) ease; }
.clients li:hover img { filter: none; opacity: 1; }
/* вертикальный знак (QMG/АМӨЗ): при той же высоте, что у горизонтальных, он втрое мельче — даём ему высоту ячейки */
.clients img.clients-tall { height: clamp(56px, 4.8vw, 72px); }

.kpis { margin-top: clamp(4.5rem, 10vw, 9rem); }
.kpis-h { font: 600 var(--fs-h3)/1.04 var(--f-display); letter-spacing: -.012em; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.kpis-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); }
.kpi { border-top: 1px solid var(--ink); padding-top: 1.125rem; }
.kpi-v { font: 500 var(--fs-num)/.84 var(--f-mega); letter-spacing: -.02em; white-space: nowrap; }
.kpi-t { margin-top: 1rem; font-size: var(--fs-small); line-height: 1.4; color: var(--ink-2); max-width: 20ch; }

@media (max-width: 1000px) {
  .proof-figure, .clients { grid-column: 1 / -1; }
  .clients { margin-top: 3rem; grid-template-columns: repeat(4, 1fr); }
  .clients li, .clients li:nth-child(odd) { border-right: 1px solid var(--line); }
  .clients li:last-child { border-right: 0; }
}
@media (max-width: 680px) {
  .clients { grid-template-columns: 1fr 1fr; }
  .clients li:nth-child(even) { border-right: 0; }
  .kpis-list { grid-template-columns: 1fr 1fr; row-gap: 2.25rem; }
}

/* ================= фильм: единственная тёмная секция страницы — кинозал ================= */
.film { background: var(--night); color: var(--on-night); padding-block: var(--section); }
.film-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); align-items: end; }
.film-copy { grid-column: 1 / 5; padding-bottom: .5rem; }
.film .h2 { max-width: 7em; }
.film-p { margin-top: 1.5rem; color: var(--on-night-2); max-width: 34ch; text-wrap: pretty; }
.film-play {
  margin-top: 2.25rem; display: inline-flex; align-items: center; gap: 1rem; text-align: left;
  font-weight: 500; color: var(--on-night);
}
.film-play-ico {
  display: grid; place-items: center; width: 60px; height: 60px; flex: none; border-radius: 50%;
  background: var(--accent); color: var(--ink); font-size: 1.125rem;
  transition: transform var(--dur-2) var(--ease), background var(--dur-1) ease;
}
.film-play-ico .ico { transform: translateX(1px); }
.film-play:hover .film-play-ico { transform: scale(1.08); background: var(--on-night); }
.film-play-t { display: grid; gap: .375rem; }
.film-play-t small { font: 500 var(--fs-label)/1 var(--f-mono); color: var(--on-night-2); }

/* в кадре — анимация визита работника, 1708×748: вдвое плотнее рамки, на телефоне обрезается до 4:3 по центру */
.film-frame { grid-column: 6 / 13; position: relative; }
.film-view {
  position: relative; display: block; width: 100%; aspect-ratio: 854 / 374; overflow: hidden; background: var(--night-2);
  clip-path: inset(0);
}
.film-view video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* зерно прячет полосы на градиенте и связывает кадр с графитовым фоном */
.film-view::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.rev-armed .film-frame[data-rev] { opacity: 1; transform: none; }
.rev-armed .film-frame[data-rev] .film-view { clip-path: inset(14% 10% 14% 10%); }
.rev-armed .film-frame[data-rev] .film-view video { transform: scale(1.14); }
.rev-armed .film-frame[data-rev][data-in="1"] .film-view { clip-path: inset(0); transition: clip-path 1.3s var(--ease); }
.rev-armed .film-frame[data-rev][data-in="1"] .film-view video { transform: none; transition: transform 1.6s var(--ease); }
.film-meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: .875rem; font: 500 var(--fs-label)/1 var(--f-mono); color: var(--on-night-2); }
.film-bar { position: relative; height: 1px; margin-top: .75rem; background: var(--line-night); }
.film-bar i { position: absolute; inset: 0; background: var(--accent); transform: scaleX(var(--t, 0)); transform-origin: left; }

@media (max-width: 1000px) {
  .film-copy, .film-frame { grid-column: 1 / -1; }
  .film-frame { margin-top: 3rem; }
  .film .h2 { max-width: 10em; }
}
@media (max-width: 680px) {
  .film-view { aspect-ratio: 4 / 3; }
}

/* ================= контур: схема-цепь из трёх блоков =================
   Вся схема помещается в один экран — иначе «замкнутость» не считывается.
   Линия контура лежит под блоками: выходит из них и входит обратно, как на принципиальной схеме.
   Слева поток идёт вверх (данные), справа — вниз (стандарты и обеспечение). */
.loop { padding-block: var(--section); }
.loop-head { display: grid; gap: 1.5rem; }
.circuit {
  --band: 6.75rem;                      /* высота блоков «компания» и «работники» */
  --pad: clamp(2.5rem, 6vw, 6rem);      /* на столько блоки уже контура: в зазоре видны его углы */
  position: relative; margin-top: clamp(2.75rem, 5vw, 4.5rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2rem, 10vw, 11rem);
}
.circuit-track {
  position: absolute; z-index: 0; inset: calc(var(--band) / 2) calc(var(--pad) / 2);
  border: 1.5px solid var(--ink);
}
/* бегущий акцент показывает направление: по левой стороне вверх, по правой вниз */
.circuit-run {
  position: absolute; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(transparent, var(--accent) 35%, var(--accent) 65%, transparent) no-repeat 0 140% / 100% 16%;
}
.circuit-run--up { left: -2.25px; }
.circuit-run--down { right: -2.25px; }
.loop[data-in="1"] .circuit-run--up { animation: run-up 3.2s var(--ease-io) infinite; }
.loop[data-in="1"] .circuit-run--down { animation: run-down 3.2s var(--ease-io) 1.6s infinite; background-position-y: -40%; }
@keyframes run-up { from { background-position-y: 140%; } to { background-position-y: -40%; } }
@keyframes run-down { from { background-position-y: -40%; } to { background-position-y: 140%; } }

.node, .core { position: relative; z-index: 1; grid-column: 1 / -1; }
.node {
  margin-inline: var(--pad); min-height: var(--band); padding: 1.125rem clamp(1.25rem, 2.4vw, 2.25rem);
  display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); column-gap: clamp(1.25rem, 3vw, 3rem); align-items: center;
  background: var(--ground); border: 1.5px solid var(--ink);
}
.node-h { font: 600 clamp(1.625rem, 1.15rem + 1.3vw, 2.375rem)/1 var(--f-display); letter-spacing: -.014em; }
.node-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); row-gap: .5rem; }
.node-list li { position: relative; padding-left: 1.125rem; font-size: var(--fs-small); font-weight: 500; line-height: 1.3; text-wrap: balance; }
.node-list li::before { content: ''; position: absolute; left: 0; top: .42em; width: 7px; height: 7px; background: var(--accent); }

.lane { position: relative; padding-block: 1.5rem; }
.lane b { display: block; font: 600 clamp(1.25rem, 1rem + .7vw, 1.625rem)/1.08 var(--f-display); letter-spacing: -.01em; }
.lane p { margin-top: .5rem; font-size: .875rem; line-height: 1.45; color: var(--ink-2); max-width: 34ch; }
.lane--up { padding-left: calc(var(--pad) / 2 + 1.75rem); }
.lane--down { padding-right: calc(var(--pad) / 2 + 1.75rem); text-align: right; }
.lane--down p { margin-left: auto; }
/* стрелка сидит на линии контура: подложка цвета фона разрывает линию, поверх — сама стрелка.
   Стрелки стоят на обоих участках каждой стороны — направление видно, где бы ни остановился взгляд. */
.lane::before, .lane-items::before {
  content: ''; position: absolute; top: 50%; margin-top: -1.25rem; width: 2.5rem; height: 2.5rem; background: var(--ground);
}
.lane::after, .lane-items::after {
  content: ''; position: absolute; top: 50%; margin-top: -1.0625rem; width: 2.125rem; height: 2.125rem; background: var(--ink);
  -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
}
.lane--up, .lane-items--up { --arrow: var(--ico-up); }
.lane--down, .lane-items--down { --arrow: var(--ico-down); }
.lane--up::before, .lane-items--up::before { left: calc(var(--pad) / 2 - 1.25rem); }
.lane--up::after, .lane-items--up::after { left: calc(var(--pad) / 2 - 1.0625rem); }
.lane--down::before, .lane-items--down::before { right: calc(var(--pad) / 2 - 1.25rem); }
.lane--down::after, .lane-items--down::after { right: calc(var(--pad) / 2 - 1.0625rem); }

.lane-items { position: relative; display: grid; grid-template-columns: repeat(3, max-content); gap: .4375rem 1.5rem; align-content: center; min-height: 4.75rem; padding-block: 1rem; font: 500 var(--fs-label)/1.3 var(--f-mono); color: var(--ink-2); }
.lane-items--up { padding-left: calc(var(--pad) / 2 + 1.75rem); }
.lane-items--down { padding-right: calc(var(--pad) / 2 + 1.75rem); grid-template-columns: repeat(2, max-content); justify-content: end; }

/* платформа — единственный залитый блок схемы: оба потока проходят через неё */
.core {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem) minmax(0, 1fr);
  background: var(--white); border: 1.5px solid var(--ink); padding: 2.75rem clamp(1.25rem, 2.6vw, 2.5rem) 1.75rem;
}
.core-tag {
  position: absolute; left: -1.5px; top: -1.5px; padding: .5rem .875rem; background: var(--ink); color: var(--white);
  font: 500 var(--fs-label)/1 var(--f-mono); letter-spacing: .02em;
}
.side { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(1rem, 2vw, 1.75rem); row-gap: .5rem; align-content: start; }
.side:last-child { padding-left: clamp(1.25rem, 2.4vw, 2.25rem); }
.side:first-of-type { padding-right: clamp(1.25rem, 2.4vw, 2.25rem); }
.side-k { grid-column: 1 / -1; font: 500 var(--fs-label)/1.3 var(--f-mono); color: var(--ink-3); }
.side-h { grid-row: span 3; align-self: start; font: 600 clamp(2.5rem, 1.6rem + 2.4vw, 4rem)/.86 var(--f-mega); letter-spacing: -.012em; white-space: nowrap; transition: color var(--dur-1) ease; }
.side-d { font-size: var(--fs-small); font-weight: 500; line-height: 1.35; }
.side-items { font-size: .875rem; line-height: 1.4; color: var(--ink-2); }
.side-go { justify-self: start; margin-top: .25rem; font-size: .875rem; }
a.side:hover .side-h { color: var(--accent-ink); }
a.side:hover .side-go { background-size: 0 1px; background-position: 100% 100%; }
a.side:hover .side-go .ico { transform: translateX(4px); }
/* Tigin Soft стоит между контурами: черты по бокам — те же, что делят буквы в знаке T|G|N */
.core-soft {
  display: grid; align-content: center; gap: .375rem; padding-inline: clamp(1rem, 1.8vw, 1.75rem);
  border-inline: 1.5px solid var(--ink); text-align: center;
}
.core-soft b { font: 600 1.375rem/1 var(--f-display); letter-spacing: -.008em; }
.core-soft span { font-size: .8125rem; line-height: 1.4; color: var(--ink-2); }

@media (max-width: 1100px) {
  .circuit { --band: 9.5rem; }
  .node { grid-template-columns: 1fr; row-gap: .875rem; align-content: center; }
  .core { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 1.5rem; }
  .core-soft { grid-column: 1 / -1; order: 3; border-inline: 0; border-top: 1.5px solid var(--ink); padding: 1.25rem 0 0; text-align: left; }
}
@media (max-width: 760px) {
  /* телефон: контур разворачивается в столбец, направление потоков показывают стрелки */
  .circuit { display: flex; flex-direction: column; }
  .circuit-track { display: none; }
  .node { margin-inline: 0; min-height: 0; padding: 1.25rem; }
  .node-list { grid-template-columns: 1fr; }
  .lane, .lane--down { padding: 1.5rem 0 .5rem 2.75rem; text-align: left; }
  .lane--down p { margin-left: 0; }
  .lane::before, .lane-items::before, .lane-items::after { display: none; }
  .lane--up::after, .lane--down::after { left: 0; right: auto; top: 1.5rem; margin-top: -.125rem; }
  .lane-items, .lane-items--down { min-height: 0; padding: 0 0 1.5rem 2.75rem; grid-template-columns: repeat(2, max-content); justify-content: start; }
  .node--top { order: 1; } .lane--up { order: 2; } .lane-items--up { order: 3; }
  .core { order: 4; grid-template-columns: 1fr; row-gap: 1.5rem; padding-top: 3rem; }
  .lane--down { order: 5; } .lane-items--down { order: 6; } .node--bottom { order: 7; }
  .side, .side:first-of-type, .side:last-child { padding-inline: 0; grid-template-columns: 1fr; }
  .side-h { grid-row: auto; }
  .core-soft { order: 0; grid-column: auto; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); padding: 1.125rem 0; }
}

/* ================= Omir: список модулей и экран рядом ================= */
.omir { padding-block: var(--section); border-top: 1px solid var(--line); }
.omir-head { display: grid; gap: 1.5rem; }
.omir-grid { margin-top: clamp(2.5rem, 5vw, 4.5rem); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); align-items: start; }
.mods { grid-column: 1 / 8; border-bottom: 1px solid var(--ink); }
.mod { border-top: 1px solid var(--ink); }
.mod-btn {
  width: 100%; display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: baseline; column-gap: 1rem; text-align: left;
  padding: 1.375rem 0 1.25rem;
}
.mod-n { font: 500 var(--fs-label)/1 var(--f-mono); color: var(--ink-3); transition: color var(--dur-1) ease; }
.mod-name { font: 600 clamp(1.875rem, 1.2rem + 2.2vw, 3.25rem)/.98 var(--f-display); letter-spacing: -.016em; transition: transform var(--dur-2) var(--ease); }
.mod-metric { font: 500 clamp(1.875rem, 1.2rem + 2.2vw, 3.25rem)/.9 var(--f-mega); letter-spacing: -.01em; color: var(--ink-3); transition: color var(--dur-1) ease; }
.mod[data-on="1"] .mod-n, .mod[data-on="1"] .mod-metric { color: var(--accent-ink); }
.mod[data-on="1"] .mod-name { transform: translateX(.5rem); }
/* раскрытие через 0fr → 1fr: высота анимируется без измерений в JS */
.mod-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-2) var(--ease); }
.mod[data-on="1"] .mod-body { grid-template-rows: 1fr; }
.mod-body > div { overflow: hidden; min-height: 0; }
.mod-text { padding: 0 0 1.75rem 4rem; max-width: 37rem; }
.mod-text p { color: var(--ink-2); text-wrap: pretty; }
.mod-text .mod-note { margin-top: .875rem; font-size: var(--fs-small); color: var(--ink); font-weight: 500; }
.mod-shot { display: none; }

.modview { grid-column: 8 / 13; position: sticky; top: calc(var(--hdr-h) + 2rem); }
.modview-frame { position: relative; aspect-ratio: 818 / 500; background: var(--white); overflow: hidden; }
.modview-frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04); transition: opacity .5s ease, transform .9s var(--ease);
}
.modview-frame img[data-on="1"] { opacity: 1; transform: none; }
.modview-cap { margin-top: 1rem; display: flex; justify-content: space-between; gap: 1rem; font: 500 var(--fs-label)/1.3 var(--f-mono); color: var(--ink-3); }
.omir-go { margin-top: 2.5rem; }

@media (max-width: 1000px) {
  .mods { grid-column: 1 / -1; }
  .modview { display: none; }
  .mod-text { padding-left: 0; }
  .mod-shot { display: block; width: 100%; aspect-ratio: 818 / 500; object-fit: cover; margin-bottom: 1.25rem; background: var(--white); }
  .mod-btn { grid-template-columns: 2.25rem minmax(0, 1fr) auto; }
}

/* ================= контакты и заявка: реквизиты слева, форма справа =================
   Поля и галочка — те же .field и .consent, что в панели «Заказать демо». */
.contact { padding-block: var(--section); border-top: 1px solid var(--line); }
.contact-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); row-gap: 3.5rem; align-items: start;
  /* якорь #contacts: заголовок встаёт под фиксированной шапкой, а не прячется за ней */
  scroll-margin-top: calc(var(--hdr-h) + clamp(1.5rem, 3vw, 2.5rem));
}
.cinfo { grid-column: 1 / 5; position: sticky; top: calc(var(--hdr-h) + 2rem); }
.cinfo-k { font: 500 var(--fs-label)/1 var(--f-mono); color: var(--accent-ink); }
.cinfo-name { margin-top: 1rem; font: 600 var(--fs-h3)/1.04 var(--f-display); letter-spacing: -.012em; }
.cinfo-list { margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; border-bottom: 1px solid var(--line); }
.cinfo-row { display: grid; gap: .375rem; padding-block: 1.125rem; border-top: 1px solid var(--line); }
.cinfo-row:first-child { border-top-color: var(--ink); }
.cinfo-row dt { font: 500 var(--fs-label)/1.3 var(--f-mono); color: var(--ink-3); }
.cinfo-row dd { margin: 0; display: grid; gap: .125rem; line-height: 1.45; }
.cinfo-sub { color: var(--ink-2); }
/* телефон и почта — крупно: это то, ради чего сюда приходят */
.cinfo-link {
  justify-self: start; font: 600 clamp(1.375rem, 1.1rem + .8vw, 1.75rem)/1.15 var(--f-display); letter-spacing: -.01em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--dur-2) var(--ease), color var(--dur-1) ease;
}
.cinfo-link:hover { color: var(--accent-ink); background-size: 100% 1px; }
.cinfo-ch { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

.cform { grid-column: 6 / 13; }
.cform-h { max-width: 12em; }
.cform-lead { margin-top: 1.5rem; }
.cform-body { margin-top: clamp(2rem, 4vw, 3rem); }
.cf, .cf .cf-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.375rem 1.25rem; }
.cf .cf-fields { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 0; border: 0; }
.cf-wide { grid-column: 1 / -1; }
.cf input, .cf textarea { scroll-margin-top: calc(var(--hdr-h) + 6rem); }
.req { margin-left: .125rem; color: var(--accent-ink); }
.cf-optional { font-weight: 400; color: var(--ink-3); }
.cf-count { justify-self: end; font: 500 var(--fs-label)/1 var(--f-mono); color: var(--ink-3); }

/* ошибка поля: текст под полем и рамка; показываем только у отмеченных полей */
.field-err { display: none; font-size: .8125rem; line-height: 1.35; font-weight: 500; color: var(--accent-ink); }
[data-bad="1"] > .field-err { display: block; }
.field[data-bad="1"] input, .field[data-bad="1"] input:hover { border-color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-ink); }
.cf-consent { display: grid; gap: .5rem; }
.cf-consent .consent { margin-top: 0; }
.cf-consent .field-err { padding-left: calc(20px + .875rem); }

.cf-pick { min-width: 0; margin: 0; padding: 0; border: 0; }
.cf-pick legend { padding: 0; margin-bottom: .625rem; font-size: var(--fs-small); font-weight: 500; }
.cf-opts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; }
.cf-opt {
  display: flex; align-items: center; gap: .875rem; min-height: 60px; padding: .75rem 1rem;
  background: var(--white); border: 1px solid var(--line); cursor: pointer;
  font-size: var(--fs-small); font-weight: 500; line-height: 1.3;
  transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.cf-opt:hover { border-color: var(--ink-3); }
.cf-opt:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.cf-opt input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--ink); }

.cf-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: .5rem; }
.cf-submit { min-width: 15rem; }
.cf-req { font-size: .8125rem; color: var(--ink-3); }
.cf-req span { color: var(--accent-ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.cform-done {
  display: grid; justify-items: start; gap: .875rem; padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--white); border-top: 3px solid var(--accent);
  scroll-margin-top: calc(var(--hdr-h) + 2rem);
}
.cform-done:focus { outline: none; }
.cform-done-h { font: 600 var(--fs-h3)/1.05 var(--f-display); letter-spacing: -.012em; }
.cform-done p { color: var(--ink-2); max-width: 44ch; }
.cform-done .link { margin-top: .5rem; }

@media (max-width: 1000px) {
  .cinfo, .cform { grid-column: 1 / -1; }
  .cinfo { position: static; }
}
@media (max-width: 600px) {
  .cf, .cf .cf-fields, .cf-opts { grid-template-columns: minmax(0, 1fr); }
  .cf-submit { width: 100%; min-width: 0; }
}

/* ================= о компании ================= */
.about { padding-block: var(--section); border-top: 1px solid var(--line); }
.about-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); row-gap: clamp(2rem, 4vw, 3.5rem); align-items: end; }
.about-h { grid-column: 1 / 11; max-width: 13.5em; }
.about-photo { grid-column: 1 / 6; align-self: end; margin-bottom: calc(var(--section) * -1); }
/* красный круг на исходном фото спорит с оранжевым акцентом — портрет переведён в монохром */
.about-photo img { width: 100%; height: auto; filter: grayscale(1) contrast(1.08) brightness(1.02); }
.about-copy { grid-column: 7 / 13; padding-bottom: calc(var(--section) * .1); }

.facts { margin-top: clamp(2.5rem, 4vw, 3.5rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); }
.fact { border-top: 1px solid var(--ink); padding-top: 1rem; }
.fact-v { font: 500 clamp(3.25rem, 5vw, 5.25rem)/.84 var(--f-mega); letter-spacing: -.02em; }
.fact-t { margin-top: .875rem; font-size: var(--fs-small); line-height: 1.4; color: var(--ink-2); }
.about-go { margin-top: 2.5rem; }
.partners { display: flex; align-items: center; gap: 2.5rem; margin-top: 2.25rem; padding-block: 1.5rem; border-block: 1px solid var(--line); }
.partners img { height: 30px; width: auto; filter: grayscale(1); opacity: .86; }

@media (max-width: 900px) {
  .about-h, .about-photo, .about-copy { grid-column: 1 / -1; }
  .about-copy { order: 1; padding-bottom: 0; }
  .about-photo { order: 2; margin: 2.5rem auto calc(var(--section) * -1); max-width: 26rem; }
  .facts { grid-template-columns: 1fr 1fr; row-gap: 1.75rem; }
}

/* ================= призыв: чёрным по сигнальному, сверху — световозвращающая лента ================= */
.cta { position: relative; background: var(--accent); color: var(--ink); padding-block: clamp(4.5rem, 9vw, 8.5rem); }
.cta::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 18px;
  background: linear-gradient(180deg, #DDE0E3 0%, #B9BEC3 46%, #E9EBED 54%, #C4C8CC 100%);
}
.cta-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 3rem; row-gap: 2.25rem; align-items: end; }
.cta-h { font: 600 clamp(2.75rem, 1.2rem + 6.2vw, 7.5rem)/.9 var(--f-display); letter-spacing: -.026em; text-wrap: balance; max-width: 10.5em; }
.cta .btn { min-height: 64px; padding-inline: 2rem; font-size: 1.0625rem; }
@media (max-width: 760px) { .cta-in { grid-template-columns: 1fr; } .cta .btn { justify-self: start; } }

/* ================= подвал ================= */
.foot { background: var(--night); color: var(--on-night-2); padding: clamp(3.5rem, 6vw, 5.5rem) 0 2rem; font-size: var(--fs-small); }
.foot-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); row-gap: 2.5rem; padding-bottom: clamp(3rem, 5vw, 4.5rem); }
.foot-brand { grid-column: 1 / 6; }
.foot-brand img { height: 26px; width: auto; }
.foot-brand p { margin-top: 1.375rem; max-width: 30ch; line-height: 1.5; }
.foot-col { grid-column: span 3; display: grid; align-content: start; gap: .75rem; }
.foot-col:nth-of-type(2) { grid-column: 7 / 10; }
.foot-h { font: 500 var(--fs-label)/1.3 var(--f-mono); color: var(--on-night-2); margin-bottom: .375rem; }
.foot a { color: var(--on-night); justify-self: start; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--dur-2) var(--ease); }
.foot a:hover { background-size: 100% 1px; }
.foot address { font-style: normal; line-height: 1.5; color: var(--on-night); }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line-night); font: 500 var(--fs-label)/1.4 var(--f-mono); }
@media (max-width: 760px) {
  .foot-brand, .foot-col, .foot-col:nth-of-type(2) { grid-column: 1 / -1; }
}

/* ================= внутренние страницы: ЦОР, Omir, О нас ================= */
.phead { padding: calc(var(--hdr-h) + clamp(3rem, 8vw, 7rem)) 0 clamp(2.5rem, 5vw, 4.5rem); }
.phead-h { font: 600 clamp(2.75rem, 1.4rem + 5.6vw, 7rem)/.92 var(--f-display); letter-spacing: -.024em; text-wrap: balance; max-width: 11em; }
.phead-lead { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.phead-idx { margin-top: clamp(2rem, 4vw, 3.5rem); display: flex; flex-wrap: wrap; border-top: 1px solid var(--ink); }
.phead-idx a { display: flex; align-items: baseline; gap: .5rem; padding: 1rem 1.75rem 1rem 0; font-size: var(--fs-small); font-weight: 500; }
.phead-idx-n { font: 500 var(--fs-label)/1 var(--f-mono); color: var(--accent-ink); }
.phead-idx a:hover { color: var(--accent-ink); }

.entries { padding-bottom: var(--section); }
.entry {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); align-items: start;
  padding-block: clamp(2.5rem, 5vw, 4.5rem); border-top: 1px solid var(--ink);
  scroll-margin-top: calc(var(--hdr-h) + 1rem);
}
.entry-n { grid-column: 1 / 3; font: 500 clamp(4.5rem, 9vw, 9.5rem)/.78 var(--f-mega); letter-spacing: -.02em; color: var(--accent); }
.entry-body { grid-column: 3 / 8; }
.entry-h { font: 600 var(--fs-h2)/.98 var(--f-display); letter-spacing: -.018em; }
.entry-p { margin-top: 1.375rem; color: var(--ink-2); max-width: 54ch; text-wrap: pretty; }
.entry-m { margin-top: 2rem; padding-top: 1.125rem; border-top: 1px solid var(--line); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.25rem; align-items: baseline; max-width: 34rem; }
.entry-m-v { font: 600 clamp(2.5rem, 3.6vw, 3.5rem)/.9 var(--f-mega); letter-spacing: -.01em; white-space: nowrap; }
.entry-m-t { font-size: var(--fs-small); line-height: 1.4; color: var(--ink-2); }
.entry-photo { grid-column: 9 / 13; aspect-ratio: 818 / 500; overflow: hidden; background: var(--ground-2); }
.entry-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.entry:hover .entry-photo img { transform: scale(1.035); }
.entries-go { margin-top: clamp(2rem, 4vw, 3.5rem); }

@media (max-width: 1000px) {
  .entry-n { grid-column: 1 / -1; font-size: 4.5rem; margin-bottom: 1rem; }
  .entry-body { grid-column: 1 / 8; }
  .entry-photo { grid-column: 8 / 13; }
}
@media (max-width: 720px) {
  .entry-body, .entry-photo { grid-column: 1 / -1; }
  .entry-photo { margin-top: 2rem; }
}

.aboutpage { padding-bottom: 0; }
.aboutpage .about { border-top: 1px solid var(--ink); padding-top: clamp(2.5rem, 5vw, 4.5rem); }
.aboutpage .about-copy .lead { color: var(--ink); }

/* ================= политика персональных данных: длинный текст — узкая колонка, оглавление сбоку ================= */
.legal-h1 { font-size: clamp(2.375rem, 1.3rem + 4.2vw, 5.25rem); max-width: 14em; }
.legal-wrap { padding-bottom: var(--section); }
.legal-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); align-items: start;
  padding-top: clamp(2rem, 4vw, 3.5rem); border-top: 1px solid var(--ink);
}
.legal-toc { grid-column: 1 / 4; position: sticky; top: calc(var(--hdr-h) + 2rem); }
.legal-toc ol { counter-reset: toc; display: grid; gap: .125rem; }
.legal-toc li { counter-increment: toc; }
.legal-toc a { display: grid; grid-template-columns: 2rem 1fr; padding: .375rem 0; font-size: var(--fs-small); color: var(--ink-2); transition: color var(--dur-1) ease; }
.legal-toc a::before { content: counter(toc, decimal-leading-zero); font: 500 var(--fs-label)/1.9 var(--f-mono); color: var(--accent-ink); }
.legal-toc a:hover { color: var(--ink); }
.legal { grid-column: 4 / 11; max-width: 46rem; }
.legal h2 {
  margin: clamp(2.5rem, 4vw, 3.5rem) 0 1rem; font: 600 var(--fs-h3)/1.05 var(--f-display); letter-spacing: -.012em;
  scroll-margin-top: calc(var(--hdr-h) + 1.5rem);
}
.legal p, .legal li { color: var(--ink-2); line-height: 1.6; text-wrap: pretty; }
.legal p + p, .legal ul + p, .legal ol + p, .legal p + ul, .legal p + ol { margin-top: .875rem; }
.legal ul, .legal ol { display: grid; gap: .5rem; padding-left: 1.5rem; }
.legal ul { list-style: none; }
.legal ul li { position: relative; }
.legal ul li::before { content: ''; position: absolute; left: -1.125rem; top: .66em; width: 6px; height: 6px; background: var(--accent); }
.legal ol { list-style: decimal; }
.legal ol li::marker { font: 500 var(--fs-small) var(--f-mono); color: var(--accent-ink); }
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal-req { margin: 0; border-top: 1px solid var(--ink); }
.legal-req div { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 1.5rem; padding: .875rem 0; border-bottom: 1px solid var(--line); }
.legal-req dt { font: 500 var(--fs-label)/1.5 var(--f-mono); color: var(--ink-3); }
.legal-req dd { margin: 0; }
@media (max-width: 1000px) {
  .legal-toc { grid-column: 1 / -1; position: static; margin-bottom: 1rem; }
  .legal-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
  .legal { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .legal-toc ol { grid-template-columns: minmax(0, 1fr); }
  .legal-req div { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
}

/* ссылка на политику внутри галочки согласия: подчёркнута, клик по ней не ставит галочку */
.consent-link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.consent-link:hover { color: var(--accent-ink); }

/* ================= панель заявки: выезжает справа, страница остаётся под ней ================= */
.sheet-back {
  position: fixed; inset: 0; z-index: var(--z-sheet); display: flex; justify-content: flex-end;
  background: rgba(18, 20, 22, .56); animation: fade-in .3s ease both;
}
.sheet {
  width: min(35rem, 100%); height: 100%; overflow-y: auto; overscroll-behavior: contain;
  background: var(--ground); padding: clamp(1.5rem, 3.5vw, 3rem); padding-top: clamp(1.25rem, 2.5vw, 2rem);
  animation: sheet-in .55s var(--ease) both;
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes sheet-in { from { transform: translateX(100%); } }
.sheet-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: 2.25rem; }
.sheet-h { font: 600 clamp(2rem, 3vw, 2.75rem)/.98 var(--f-display); letter-spacing: -.016em; max-width: 9em; padding-top: .375rem; }
.x-btn { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 1px solid var(--line); font-size: 1.125rem; transition: background var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease; }
.x-btn:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.form, .form fieldset.form-fields { display: flex; flex-direction: column; gap: 1.125rem; }
.form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.field { display: grid; gap: .5rem; font-size: var(--fs-small); font-weight: 500; }
.field input, .field textarea {
  width: 100%; height: 56px; padding: 0 1rem; border: 1px solid var(--line); background: var(--white); color: var(--ink);
  font: 400 1rem/1 var(--f-body); border-radius: 0; -webkit-appearance: none; appearance: none;
  transition: border-color var(--dur-1) ease;
}
.field textarea { height: auto; min-height: 8.5rem; padding: .875rem 1rem; line-height: 1.5; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: 1; }
.field input:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus, .field textarea:focus { outline: 2px solid var(--ink); outline-offset: -1px; border-color: var(--ink); }
.choices { margin-top: .5rem; }
.choices legend { padding: 0; margin-bottom: .25rem; font-size: var(--fs-small); font-weight: 500; }
.choice { display: flex; align-items: center; gap: .875rem; padding: .875rem 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.choice input, .consent input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--ink); }
.consent { display: flex; align-items: flex-start; gap: .875rem; margin-top: .5rem; font-size: .875rem; line-height: 1.45; color: var(--ink-2); cursor: pointer; }
.consent input { margin-top: 1px; }
.tgn-demo-submit:disabled, .cf-submit:disabled { opacity: .6; cursor: wait; }
.form-alert { display: grid; gap: .375rem; padding: 1rem 1.125rem; border: 1px solid var(--accent-ink); font-size: var(--fs-small); }
.form-alert a { text-decoration: underline; text-underline-offset: 3px; }
.form progress { width: 100%; height: 3px; accent-color: var(--accent); }
.sheet-done { padding-block: 1rem; font: 600 var(--fs-h3)/1.1 var(--f-display); letter-spacing: -.01em; max-width: 14em; }
.sheet-done:focus { outline: none; }

/* ================= полный фильм ================= */
.filmbox {
  position: fixed; inset: 0; z-index: var(--z-film); display: grid; place-items: center;
  padding: clamp(.75rem, 3vw, 2.5rem); background: rgba(12, 13, 14, .94); animation: fade-in .3s ease both;
}
.filmbox-in { position: relative; width: min(100%, 1180px); animation: rise-in .6s var(--ease) both; }
.filmbox video { width: 100%; aspect-ratio: 16 / 9; background: #000; }
.filmbox .x-btn { position: absolute; right: 0; top: -56px; color: var(--on-night); border-color: var(--line-night); }
.filmbox .x-btn:hover { background: var(--on-night); color: var(--night); border-color: var(--on-night); }

/* ================= переходы между страницами ================= */
::view-transition-old(root) { animation: fade-out .22s ease both; }
::view-transition-new(root) { animation: fade-in .34s ease .08s both; }
@keyframes fade-out { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .rev-armed [data-rev], .rev-armed [data-rev="mask"] > .rev-in { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .rev-armed .film-frame[data-rev] .film-view { clip-path: inset(0) !important; }
  .hero-h .w > span { transform: none; }
  .circuit-run { display: none; }
  .stage[data-live="1"] .chapter-in { transform: none; }
}