/* «Медиарадар» — вариант «Частицы»: тёмный космос, модели из частиц,
   узкие заголовки капсом с контурными словами, текст проявляется «расшифровкой».

   Режимы (атрибуты на <html>, их ставит prefs.js и строчка в <head>):
   - data-theme="dark" — тёмная, как была; data-theme="light" — «чернила на бумаге»;
   - data-warm — тёплый свет (только в светлой): меньше синего в бумаге, тексте и точках;
   - data-lowvision — версия для слабовидящих (ГОСТ Р 52872-2019): крупный шрифт, чёрное на
     белом или белое на чёрном, подчёркнутые ссылки, без точек, бегущих строк и «расшифровки».
   Все цвета — токены; смена режима — плавное перетекание за .35 с (View Transitions, ниже). */

/* Шрифты — свои файлы в fonts/, без внешних запросов (лицензия SIL OFL 1.1: fonts/OFL-*.txt).
   Кириллица и латиница, только нужные начертания: Fira Sans Extra Condensed 600–800 (заголовки,
   капс), Montserrat 200–600 (текст). Браузер берёт файл подмножества по unicode-range. */
@font-face { font-family: 'Fira Sans Extra Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/fira-sans-extra-condensed-cyrillic-600-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Fira Sans Extra Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/fira-sans-extra-condensed-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Fira Sans Extra Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/fira-sans-extra-condensed-cyrillic-700-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Fira Sans Extra Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/fira-sans-extra-condensed-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Fira Sans Extra Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/fira-sans-extra-condensed-cyrillic-800-normal.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: 800; font-display: swap; src: url(fonts/fira-sans-extra-condensed-latin-800-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 200; font-display: swap; src: url(fonts/montserrat-cyrillic-200-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 200; font-display: swap; src: url(fonts/montserrat-latin-200-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap; src: url(fonts/montserrat-cyrillic-300-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap; src: url(fonts/montserrat-latin-300-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/montserrat-cyrillic-400-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/montserrat-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/montserrat-cyrillic-500-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/montserrat-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/montserrat-cyrillic-600-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/montserrat-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  /* Тёмная тема — как была. --fg-3 светлее (#565C6A → #7A8191): иначе мелкий приглушённый
     текст не проходил AA (3,0 : 1 вместо 4,5 : 1) */
  --bg: #07080B;
  --fg: #F2F4F8;
  --fg-2: #8E95A3;
  --fg-3: #7A8191;
  --blue: #5B95FF;
  --gold: #F2B544;
  --line: rgba(255, 255, 255, .12);
  --line-2: rgba(255, 255, 255, .22);
  --line-3: rgba(255, 255, 255, .35);
  --track: rgba(255, 255, 255, .1);
  --track-2: rgba(255, 255, 255, .15);
  --menu-bg: #07080B;
  --field-bg: rgba(7, 8, 11, .55);
  --vk: #3884FF;
  --ok: #FF7F33;
  --max: #2EDB8C;
  --fail: #808796;
  --fail-text: #C9CCD4;
  --ring-bg: rgba(91, 149, 255, .16);
  --ring-line: rgba(170, 200, 255, .5);
  --ring-big-bg: rgba(242, 181, 68, .14);
  --ring-big-line: rgba(242, 181, 68, .55);
  --gold-glow: rgba(242, 181, 68, .45);
  --blue-glow: #5B95FF;
  --focus: #F2B544;
  --glow: 1; /* свечение у точек и цифр: 1 — есть (тёмная), 0 — нет (чернила) */

  /* Точки (particles.js). Восемь цветов палитры форм — в порядке кодов движка:
     синий, белый, золото, VK, OK, MAX, серый (сбой), приглушённый (основа карты) */
  --dot-blue: #4D8CFF;
  --dot-white: #EDF2FF;
  --dot-gold: #FFB347;
  --dot-vk: #3885FF;
  --dot-ok: #FF8033;
  --dot-max: #2EDB8C;
  --dot-grey: #80879A;
  --dot-dim: #5C739E;
  --dot-hi: #EDF2FF;       /* редкие яркие точки (3,5 % точек) подмешивают этот цвет */
  --dot-star-1: #73A6FF;   /* звёзды фона: синие, золотые, белые */
  --dot-star-2: #FFC261;
  --dot-star-3: #EBF0FF;
  --dot-star-alpha: 1;     /* прозрачность звёзд */
  --dot-star-size: 1;      /* множитель размера звёзд */
  --dot-bg: #07080B;       /* фон холста */
  --dot-arrow: #EEF2FF;    /* стрелки к кнопке «Установить» */
  --dot-blend: additive;   /* additive — свечение сложением; normal — обычное наложение (тушь) */
  --dot-ink: 0;            /* край точки: 0 — мягкий ореол (exp), 1 — плотная капля без ореола */
  --dot-alpha: .8;         /* общая непрозрачность точек форм */
  --dot-size: 1;           /* множитель размера точек */
  --dot-max-size: 0;       /* предел размера точки, CSS-пиксели; 0 — как было (26 пикселей экрана) */
  --dots: on;              /* off — точек нет совсем (версия для слабовидящих) */

  --display: 'Fira Sans Extra Condensed', 'Arial Narrow', sans-serif;
  --sans: 'Montserrat', system-ui, sans-serif;

  --pad: 7vw;

  color-scheme: dark;
}

/* Светлая — «чернила на бумаге»: прохладная бумага, сине-чёрные чернила, чернильно-синий
   акцент, тёмная охра вместо золота. Без свечения: чернила не светятся */
html[data-theme="light"] {
  --bg: #F2F3EF;
  --fg: #121A2B;
  --fg-2: #3A4357;
  --fg-3: #535C6E;
  --blue: #1F3F9E;
  --gold: #8A5300;
  --line: rgba(18, 26, 43, .14);
  --line-2: rgba(18, 26, 43, .28);
  --line-3: rgba(18, 26, 43, .42);
  --track: rgba(18, 26, 43, .1);
  --track-2: rgba(18, 26, 43, .16);
  --menu-bg: #F2F3EF;
  --field-bg: rgba(242, 243, 239, .7);
  --vk: #1E56C4;
  --ok: #B24A0A;
  --max: #0B7548;
  --fail: #6B7180;
  --fail-text: #4E5563;
  --ring-bg: rgba(31, 63, 158, .08);
  --ring-line: rgba(31, 63, 158, .55);
  --ring-big-bg: rgba(138, 83, 0, .08);
  --ring-big-line: rgba(138, 83, 0, .6);
  --gold-glow: rgba(138, 83, 0, 0);
  --blue-glow: rgba(31, 63, 158, 0);
  --focus: #1F3F9E;
  --glow: 0;
  color-scheme: light;

  /* Точки — тушь на бумаге: обычное наложение вместо сложения, плотные капли без ореола */
  --dot-blue: #1F3F9E;
  --dot-white: #121A2B;
  --dot-gold: #8A5300;
  --dot-vk: #1E56C4;
  --dot-ok: #B24A0A;
  --dot-max: #0B7548;
  --dot-grey: #6B7180;
  --dot-dim: #5E6880;
  --dot-hi: #070B14;
  --dot-star-1: #1F3F9E;
  --dot-star-2: #8A5300;
  --dot-star-3: #121A2B;
  --dot-star-alpha: .45;   /* брызги туши мельче и тише звёзд: на бумаге крупные капли выглядят грязью */
  --dot-star-size: .7;
  --dot-bg: #F2F3EF;
  --dot-arrow: #121A2B;
  --dot-blend: normal;
  --dot-ink: 1;
  --dot-alpha: 1;
  --dot-size: 1.1;
  --dot-max-size: 3.2;     /* ближние точки рассеянных форм — брызги, а не кляксы */
}

/* Тёплый свет: та же бумага теплее, в чернилах и акцентах меньше синего */
html[data-theme="light"][data-warm] {
  --bg: #F3ECDD;
  --fg: #2A2118;
  --fg-2: #4A3E31;
  --fg-3: #62564A;
  --blue: #36487A;
  --gold: #844B00;
  --line: rgba(42, 33, 24, .14);
  --line-2: rgba(42, 33, 24, .28);
  --line-3: rgba(42, 33, 24, .42);
  --track: rgba(42, 33, 24, .1);
  --track-2: rgba(42, 33, 24, .16);
  --menu-bg: #F3ECDD;
  --field-bg: rgba(243, 236, 221, .7);
  --vk: #38508C;
  --ok: #A6470B;
  --max: #2C6A3C;
  --fail: #76695A;
  --fail-text: #54493D;
  --ring-bg: rgba(54, 72, 122, .08);
  --ring-line: rgba(54, 72, 122, .55);
  --ring-big-bg: rgba(132, 75, 0, .08);
  --ring-big-line: rgba(132, 75, 0, .6);
  --focus: #36487A;

  --dot-blue: #36487A;
  --dot-white: #2A2118;
  --dot-gold: #844B00;
  --dot-vk: #38508C;
  --dot-ok: #A6470B;
  --dot-max: #2C6A3C;
  --dot-grey: #76695A;
  --dot-dim: #7D7262;
  --dot-hi: #1A140E;
  --dot-star-1: #36487A;
  --dot-star-2: #844B00;
  --dot-star-3: #2A2118;
  --dot-bg: #F3ECDD;
  --dot-arrow: #2A2118;
}

/* Слабовидящие: максимальный контраст по текущей теме — чистый белый на чёрном… */
html[data-lowvision] {
  --bg: #000000;
  --fg: #FFFFFF;
  --fg-2: #FFFFFF;
  --fg-3: #FFFFFF;
  --blue: #9CC2FF;
  --gold: #FFD45C;
  --line: rgba(255, 255, 255, .6);
  --line-2: #FFFFFF;
  --line-3: #FFFFFF;
  --track: rgba(255, 255, 255, .35);
  --track-2: rgba(255, 255, 255, .5);
  --menu-bg: #000000;
  --field-bg: #000000;
  --vk: #6FA6FF;
  --ok: #FF9A5C;
  --max: #3DF2A0;
  --fail: #FFFFFF;
  --fail-text: #FFFFFF;
  --gold-glow: rgba(0, 0, 0, 0);
  --blue-glow: rgba(0, 0, 0, 0);
  --focus: #FFD45C;
  --glow: 0;
  --dots: off; /* точки, звёзды и стрелки выключены */
}
/* …или чистый чёрный на белом */
html[data-lowvision][data-theme="light"] {
  --bg: #FFFFFF;
  --fg: #000000;
  --fg-2: #000000;
  --fg-3: #000000;
  --blue: #0030B8;
  --gold: #000000;
  --line: rgba(0, 0, 0, .6);
  --line-2: #000000;
  --line-3: #000000;
  --track: rgba(0, 0, 0, .3);
  --track-2: rgba(0, 0, 0, .45);
  --menu-bg: #FFFFFF;
  --field-bg: #FFFFFF;
  --vk: #0040C0;
  --ok: #A33A00;
  --max: #005A30;
  --fail: #000000;
  --fail-text: #000000;
  --focus: #0030B8;
}

/* Смена режима (prefs.js): старый вид плавно растворяется в новом за .35 с. Это перетекание
   снимка страницы, а не переходы цвета на каждом элементе: те заставляли браузер в каждом кадре
   пересчитывать стили 700 элементов (10–90 мс на кадр) */
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: .35s;
  animation-timing-function: ease;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--bg); scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--gold); color: var(--bg); }

a { color: inherit; }
:focus-visible { outline: 1px solid var(--focus); outline-offset: 4px; }

b { color: var(--fg); font-weight: 600; }
em { color: var(--gold); font-style: normal; }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Холст с частицами ---------- */

#gl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

main, .hdr { position: relative; z-index: 2; }

/* ---------- Типографика ---------- */

.display {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .9;
  letter-spacing: .004em;
}

/* Контурные слова */
.o {
  color: transparent;
  -webkit-text-stroke: 1.4px var(--fg);
}

.h-xl { font-size: clamp(64px, 9.6vw, 168px); margin: 0 0 28px; }
.h-lg { font-size: clamp(52px, 7vw, 120px); margin: 0 0 40px; }
.h-sm { font-size: clamp(26px, 2.3vw, 36px); margin: 0 0 6px; font-weight: 700; }
.h-xs { font-size: 30px; margin: 0 0 18px; font-weight: 700; }

p { margin: 0 0 14px; color: var(--fg-2); max-width: 31em; }
.muted { color: var(--fg-3); }
.small { font-size: 12px; color: var(--fg-3); letter-spacing: .02em; }

.label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--fg-2);
  margin-bottom: 18px;
}

/* ---------- Расшифровка текста ---------- */

.sc-b { color: var(--blue); }
.o .sc-b { color: transparent; -webkit-text-stroke-color: var(--blue); }
.sc-c { color: transparent !important; -webkit-text-stroke-color: transparent !important; }

/* ---------- Шапка ---------- */

.hdr {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px var(--pad);
  pointer-events: none;
}
.hdr > * { pointer-events: auto; }

.logo {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
}
.logo-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 calc(12px * var(--glow)) var(--gold);
}

.hdr-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 13px;
  font-weight: 500;
}
.hdr-nav a {
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
/* «Веб-версия» — пилюля-контур среди текстовых ссылок: заметнее их, но ниже и тише
   главной кнопки первого экрана (.pill) */
.hdr-nav .hdr-pill {
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--line-3);
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.hdr-nav .hdr-pill:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }

.burger {
  width: 44px;
  height: 44px;
  border: 0;
  padding: 0;
  background: none;
  color: var(--fg);
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
}
.burger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: currentColor;
  transition: transform .5s cubic-bezier(.7, 0, .2, 1), width .4s ease;
}
.burger span + span { width: 15px; }
.menu-open .burger span:first-child { transform: translateY(3.75px) rotate(45deg); width: 22px; }
.menu-open .burger span + span { transform: translateY(-3.75px) rotate(-45deg); width: 22px; }

/* ---------- Полноэкранное меню ---------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 25;
  /* Без backdrop-filter: вместе с анимацией clip-path Chrome через кадр рисовал меню
     без обрезки, на весь экран, — экран мерцал. Фон непрозрачный, чтобы текст страницы не
     проступал сквозь пункты меню. Цвет — токен темы --menu-bg (непрозрачный, как --bg). */
  background: var(--menu-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 100px var(--pad) 48px;
  clip-path: circle(0 at calc(100% - var(--pad) - 22px) 46px);
  transition: clip-path .9s cubic-bezier(.7, 0, .2, 1), visibility 0s linear .9s;
  visibility: hidden;
}
.menu-open .menu {
  clip-path: circle(150% at calc(100% - var(--pad) - 22px) 46px);
  visibility: visible;
  transition: clip-path .9s cubic-bezier(.7, 0, .2, 1), visibility 0s;
}
.menu-nav { display: flex; flex-direction: column; align-items: flex-start; }
.menu-nav a {
  font-size: clamp(48px, 8vw, 112px);
  text-decoration: none;
  transition: color .3s ease, -webkit-text-stroke-color .3s ease;
}
.menu-nav a:not(.o):hover { color: transparent; -webkit-text-stroke: 1.4px var(--fg); }
.menu-nav a.o:hover { color: var(--fg); }
.menu-note { margin-top: 40px; font-size: 12px; color: var(--fg-3); }

/* ---------- Курсор ---------- */

.cur-ring, .cur-dot {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  pointer-events: none;
  border-radius: 50%;
  display: none;
}
.has-cursor .cur-ring, .has-cursor .cur-dot { display: block; }
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor summary { cursor: none; }

.cur-ring {
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  background: var(--ring-bg);
  border: 1px solid var(--ring-line);
  transition: width .35s ease, height .35s ease, margin .35s ease, background-color .35s ease;
}
.cur-ring.big {
  width: 86px;
  height: 86px;
  margin: -43px 0 0 -43px;
  background: var(--ring-big-bg);
  border-color: var(--ring-big-line);
}
.cur-dot {
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: var(--fg);
}

/* ---------- Индикатор прокрутки ---------- */

/* Стоит посередине левого поля, левее колонки текста (она начинается с отступа --pad):
   так кнопка не залезает на заголовки и абзацы */
.progress {
  position: fixed;
  left: calc((var(--pad) - 40px) / 2);
  bottom: 26px;
  z-index: 20;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  transition: opacity .35s ease, visibility 0s linear 0s;
}
.progress svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.progress circle { fill: none; stroke-width: 1.5; }
.progress-track { stroke: var(--track-2); }
.progress-bar { stroke: var(--blue); stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.progress-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 calc(10px * var(--glow)) var(--blue-glow); }

/* ---------- Разделы ---------- */

.sec {
  min-height: 100vh;
  padding: 18vh var(--pad);
  display: flex;
  align-items: center;
  position: relative;
}
.col { width: 100%; max-width: 44vw; }
.col-narrow { max-width: 36em; }
.col-right { margin-left: auto; max-width: 40vw; }
.wide { width: 100%; }

/* Первый экран */
.hero { min-height: 100vh; padding-top: 16vh; padding-bottom: 12vh; }
.hero-title {
  font-size: clamp(64px, min(9.4vw, 15.5vh), 168px);
  margin: 0 0 30px;
  display: flex;
  flex-direction: column;
}
.hero-title .line { display: block; }
.lead { font-size: 15px; max-width: 29em; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin: 34px 0 16px; }

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 28px;
  border: 1px solid var(--line-3);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.pill:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }

.ghost {
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; /* линия-подчёркивание */
  transition: background-size .4s ease;
}
.ghost:hover { background-size: 0 1px; background-position: 100% 100%; }

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--fg-3);
}
.scroll-hint i {
  width: 1px;
  height: 42px;
  background: var(--track-2);
  position: relative;
  overflow: hidden;
}
.scroll-hint i::after {
  content: '';
  position: absolute;
  left: 0;
  top: -40%;
  width: 1px;
  height: 40%;
  background: var(--fg);
  animation: drip 1.8s cubic-bezier(.6, 0, .3, 1) infinite;
}
@keyframes drip { to { top: 100%; } }

/* Бегущие строки */
.marquee { overflow: hidden; white-space: nowrap; }
.marquee-track { display: inline-flex; will-change: transform; }
.marquee-track > span { flex: none; }

.ticker-sec { flex-direction: column; justify-content: center; align-items: stretch; gap: 8vh; padding-left: 0; padding-right: 0; }
.ticker {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(72px, 10vw, 170px);
  line-height: 1;
}
.ticker-text { padding: 0 var(--pad); margin-left: auto; max-width: calc(36em + var(--pad) * 2); }

.area {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(64px, 8.4vw, 150px);
  line-height: 1;
  margin: 0 calc(var(--pad) * -1) 64px;
}

.map-caption {
  position: absolute;
  right: var(--pad);
  bottom: 30px;
  margin: 0;
  max-width: 22em;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--fg-3);
  text-align: right;
}

/* ---------- Моменты продукта: у каждого своя форма частиц ---------- */

.moment .col p { max-width: 30em; }
.moment .col-right { max-width: 40vw; }

.kicker {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--fg-2);
}
.kicker-n {
  display: inline-block;
  margin-right: 10px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .02em;
  color: var(--gold);
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
.dot-vk { background: var(--vk); box-shadow: 0 0 calc(10px * var(--glow)) var(--vk); }
.dot-ok { background: var(--ok); box-shadow: 0 0 calc(10px * var(--glow)) var(--ok); }
.dot-max { background: var(--max); box-shadow: 0 0 calc(10px * var(--glow)) var(--max); }
.dot-fail { background: var(--fail); animation: fail-blink 1.1s steps(2, jump-none) infinite; }
@keyframes fail-blink { 50% { opacity: .25; } }

/* 01 · поле запроса: в нём печатается выделенный текст */
.field {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
  max-width: 31em;
  margin: 26px 0 24px;
  padding: 16px 20px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--field-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 14px;
}
.field-label { flex: none; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--fg-3); }
.field-text { color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.caret {
  flex: none;
  width: 1.5px;
  height: 1.1em;
  align-self: center;
  margin-left: -10px;
  background: var(--blue);
  animation: caret 1s steps(2, jump-none) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* 02 · ход поиска по площадкам */
.search-moment { align-items: flex-start; padding-top: 18vh; }
.search-moment .area { margin-bottom: 40px; }
.runs { list-style: none; margin: 26px 0 24px; padding: 0; max-width: 30em; }
.run {
  display: grid;
  grid-template-columns: 10px 116px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.run:last-child { border-bottom: 1px solid var(--line); }
.run-name { color: var(--fg); font-weight: 500; }
.run-bar { height: 2px; background: var(--track); overflow: hidden; }
.run-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--fg);
  transition: width 1.6s cubic-bezier(.2, .7, .2, 1) .3s;
}
.run-num { color: var(--fg-2); font-variant-numeric: tabular-nums; }
.run-num b { font-weight: 600; }
.run-fail .run-bar i { background: var(--fail); }
.run-fail .run-num { color: var(--fail-text); }
.run-fail u { text-underline-offset: 3px; color: var(--fg); }

/* 03 · города */
.cities {
  list-style: none;
  margin: 26px 0 16px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
  max-width: 30em;
}
.cities li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.city { font-size: 14px; color: var(--fg-2); }
.cities b {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 800;
  color: var(--gold);
  text-shadow: 0 0 18px var(--gold-glow);
  font-variant-numeric: tabular-nums;
}

/* 04 · распространение */
.stats {
  display: grid;
  grid-template-columns: auto auto;
  gap: 18px 40px;
  align-items: end;
  margin: 26px 0 24px;
  max-width: 34em;
}
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat > b.display {
  font-size: clamp(72px, 7vw, 120px);
  line-height: .85;
  color: var(--fg);
}
.stat > span { font-size: 12px; letter-spacing: .06em; color: var(--fg-2); }
.stat-row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--fg-2); padding: 3px 0; }
.stat-row b { color: var(--fg); margin-left: auto; padding-left: 16px; font-variant-numeric: tabular-nums; }
.stat:last-child { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid var(--line); }
.stat-label { font-size: 12px; letter-spacing: .06em; color: var(--fg-3); }
.stat-value { font-size: 15px; color: var(--fg); font-weight: 500; }

/* 06 · выгрузка */
.export {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 30px;
  font-size: 14px;
  color: var(--fg-2);
}

/* Подборка */
.picks { align-items: flex-start; }
.picks-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px 6vw;
  align-items: end;
  margin-bottom: 12vh;
}
.stack { display: flex; flex-direction: column; margin: 0; }
.names {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 64px 4vw;
}
.name { display: flex; flex-direction: column; gap: 12px; }
.nm {
  font-size: clamp(44px, 4.6vw, 82px);
  transition: color .35s ease, -webkit-text-stroke-color .35s ease;
}
.name:hover .nm:not(.o) { color: transparent; -webkit-text-stroke: 1.4px var(--fg); }
.name:hover .nm.o { color: var(--fg); }
.cap { font-size: 12px; color: var(--fg-2); }
.name-off .nm { opacity: .45; }
.name-off .cap { text-decoration: line-through; text-decoration-color: var(--line-3); }

.picks .small { margin-top: 48px; }

/* Сравнение */
.cmp-sec { align-items: flex-start; }
.cmp-lead { margin-bottom: 48px; }
.cmp { max-width: 1100px; }
.cmp-row {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
  color: var(--fg-2);
  font-size: 14px;
}
.cmp-row .display { font-size: clamp(24px, 2.2vw, 34px); color: var(--fg); font-weight: 700; }
.cmp-head { font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--fg-3); padding: 0 0 14px; border-top: 0; }

/* Вопросы */
.faq-sec { align-items: flex-start; }
.faq { max-width: 1100px; border-bottom: 1px solid var(--line); }
.faq details { border-top: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 700;
  padding: 26px 64px 26px 0;
  position: relative;
  transition: color .3s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before,
.faq summary::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  width: 22px;
  height: 1.5px;
  background: var(--fg);
  transition: transform .45s cubic-bezier(.7, 0, .2, 1);
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq summary:hover { color: var(--gold); }
.faq details p { padding: 0 0 28px; max-width: 40em; }

/* Установка */
.install { flex-direction: column; justify-content: center; align-items: stretch; padding-bottom: 40px; min-height: 100vh; }
.install .wide { position: relative; z-index: 1; }

/* Установка из файла: слева заголовок и кнопка «Скачать», справа четыре шага */
.inst {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px 6vw;
  margin: 0 0 10vh;
  scroll-margin-top: 96px; /* под шапкой */
}
.inst-get { display: flex; flex-direction: column; align-items: flex-start; }
.inst-title { font-size: clamp(44px, 5.2vw, 96px); margin: 0 0 22px; }
.pill-solid { background: var(--fg); color: var(--bg); border-color: var(--fg); gap: 12px; }
.pill-solid:hover { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.pill-solid svg { width: 20px; height: 20px; flex: none; }
.inst-btn { min-height: 60px; padding: 0 30px 0 24px; font-size: 15px; margin-bottom: 14px; }
.inst-soon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  padding: 8px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 13px;
  color: var(--fg-2);
}
.dot-soon { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none; }
.inst-steps { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.inst-steps li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-2);
}
.inst-steps b { color: var(--fg); font-weight: 600; }
.inst-n { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1; color: var(--gold); }
.install code {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: .92em;
  padding: 1px 7px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  color: var(--fg);
  white-space: nowrap;
  user-select: all; /* одним щелчком выделяется адрес целиком — скопировать в адресную строку */
}

.foot-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.foot-cols p { font-size: 13px; }
.foot-list { margin: 0; padding-left: 18px; color: var(--fg-2); }
.foot-list li + li { margin-top: 6px; }

.foot-bottom {
  margin-top: 64px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 12px;
  color: var(--fg-3);
}
.foot-bottom a { text-decoration: none; }

/* ---------- Появление блоков ---------- */

.js .fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s ease var(--d, 0s), transform 1s cubic-bezier(.2, .7, .2, 1) var(--d, 0s);
}
.js .fade.in { opacity: 1; transform: none; }

/* Линии-разделители вырастают слева направо */
.js .cities li, .js .cmp-row:not(.cmp-head), .js .faq details {
  border-top-color: transparent;
  background: linear-gradient(var(--line), var(--line)) 0 0 / 0 1px no-repeat; /* линия разделителя */
  transition: background-size 1.2s cubic-bezier(.7, 0, .2, 1), opacity 1s ease var(--d, 0s), transform 1s cubic-bezier(.2, .7, .2, 1) var(--d, 0s);
}
.js .cities li.in, .js .cmp-row.in, .js .faq details.in { background-size: 100% 1px; }

/* Полосы хода поиска заполняются, когда строка появилась */
.run.in .run-bar i { width: var(--fill, 0%); }

/* ---------- Настройки вида: тема, тёплый свет, версия для слабовидящих ---------- */

.prefs { display: flex; align-items: center; gap: 4px; }
.prefs-theme { display: flex; align-items: center; flex-direction: row-reverse; }
.pref {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  transition: background-color .25s ease, opacity .25s ease, transform .25s ease, visibility 0s linear 0s;
}
.pref svg { width: 20px; height: 20px; display: block; }
.pref:hover { background: var(--track); }
.pref[aria-pressed="true"] { background: var(--track-2); }
/* «Тёплый свет» выезжает из-под кнопки темы при наведении или фокусе — только в светлой теме;
   включённый виден всегда */
.pref-warm {
  opacity: 0;
  transform: translateX(10px);
  visibility: hidden;
  transition: background-color .25s ease, opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
html[data-theme="light"] .prefs-theme:is(:hover, :focus-within, .reveal) .pref-warm,
html[data-theme="light"] .pref-warm[aria-pressed="true"] {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: background-color .25s ease, opacity .25s ease, transform .25s ease, visibility 0s linear 0s;
}
html:not([data-theme="light"]) .pref-warm { display: none; }

/* Версия для слабовидящих (ГОСТ Р 52872-2019): крупный шрифт, ссылки подчёркнуты, крупный фокус,
   без точек, звёзд, стрелок, бегущих строк, «расшифровки», своего курсора и появления блоков */
html[data-lowvision] body { font-size: 20px; line-height: 1.6; }
html[data-lowvision] :is(p, .lead, .stat-value, .foot-list, .inst-steps li) { font-size: 20px; }
html[data-lowvision] :is(.small, .label, .kicker, .menu-note, .field, .field-label, .run, .city, .stat-row,
  .stat > span, .stat-label, .export, .cap, .cmp-row, .cmp-head, .foot-cols, .foot-cols p, .foot-bottom,
  .hdr-nav, .pill, .ghost, .inst-soon) { font-size: 18px; }
html[data-lowvision] .inst-n { font-size: 32px; }
html[data-lowvision] .kicker-n { font-size: 20px; }
html[data-lowvision] .cities b { font-size: 32px; }
html[data-lowvision] .logo { font-size: 26px; }
html[data-lowvision] .run { grid-template-columns: 10px auto minmax(0, 1fr) auto; }
html[data-lowvision] .moment .col p, html[data-lowvision] p { max-width: 36em; }
html[data-lowvision] :is(.col, .col-right, .moment .col-right) { max-width: 52em; margin-left: 0; }
html[data-lowvision] a:not(.logo):not(.progress) { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; }
html[data-lowvision] .ghost { background: none; }
html[data-lowvision] :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
html[data-lowvision] .o, html[data-lowvision] .o .sc-b { color: var(--fg); -webkit-text-stroke: 0; }
html[data-lowvision] :is(.marquee, .cur-ring, .cur-dot, .scroll-hint, .map-caption) { display: none !important; }
#gl { transition: opacity .35s ease, visibility 0s linear 0s; }
html[data-lowvision] #gl { opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
html[data-lowvision] .js .fade { opacity: 1; transform: none; transition: none; }
html[data-lowvision] .js :is(.cities li, .cmp-row:not(.cmp-head), .faq details) { background-size: 100% 1px; }
html[data-lowvision] :is(.caret, .dot-fail, .scroll-hint i::after) { animation: none; }
/* Бегущая строка у моста прячется — её текст (он был только для скринридера) становится заголовком */
html[data-lowvision] .ticker-sec .sr {
  position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
  margin: 0 0 24px; font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(36px, 5vw, 64px); line-height: 1; color: var(--fg); max-width: none;
}
html[data-lowvision] .ticker-text { margin-left: 0; max-width: calc(52em + var(--pad) * 2); }

/* ---------- Без анимаций ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .fade { opacity: 1; transform: none; transition: none; }
  .js .cities li, .js .cmp-row:not(.cmp-head), .js .faq details { background-size: 100% 1px; transition: none; }
  .run-bar i { transition: none; }
  .scroll-hint i::after, .caret, .dot-fail { animation: none; }
  .menu { transition: none; }
}

/* ---------- Узкий экран ---------- */

@media (max-width: 899px) {
  :root { --pad: 18px; }
  .hdr { padding-top: 12px; padding-bottom: 12px; }
  .hdr-nav a { display: none; }
  .hdr-nav { gap: 6px; }
  .prefs { gap: 0; }
  .pref { width: 38px; height: 38px; }
  html[data-lowvision] .hero { padding-top: 16vh; }
  html[data-lowvision] .moment { padding-top: 14vh; }
  html[data-lowvision] .search-moment .area { margin-bottom: 40px; }
  .sec { padding-top: 14vh; padding-bottom: 14vh; }
  .hero { align-items: flex-end; padding-top: 42vh; padding-bottom: 10vh; }
  .col, .col-right { max-width: none; margin-left: 0; }
  .hero-title { font-size: 15vw; margin-bottom: 20px; }
  .actions { margin-top: 24px; }
  /* Форма частиц — в верхней трети экрана, текст под ней */
  .moment { align-items: flex-end; padding-top: 46vh; }
  .moment .col-right { max-width: none; }
  .search-moment { padding-top: 14vh; }
  .search-moment .area { margin-bottom: 26vh; } /* текст — под облаками площадок */
  .ticker { font-size: 22vw; }
  .area { font-size: 19vw; }
  .run { grid-template-columns: 10px 96px minmax(0, 1fr) auto; gap: 8px; font-size: 12px; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .map-caption { display: none; }
  .field { padding: 13px 16px; }
  .picks-head { grid-template-columns: minmax(0, 1fr); margin-bottom: 64px; }
  .names { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .nm { font-size: 13vw; }
  .cmp-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 16px; }
  .cmp-row > :first-child { grid-column: 1 / -1; }
  .cmp-head > :first-child { display: none; }
  .foot-cols { grid-template-columns: minmax(0, 1fr); }
  .inst { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-bottom: 64px; }
  .inst-btn { width: 100%; justify-content: center; text-align: center; padding: 14px 20px; }
  .inst-steps li { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; font-size: 14px; }
  .inst-n { font-size: 22px; }
  .install code { white-space: normal; overflow-wrap: anywhere; }
  .foot-bottom { flex-direction: column; }
  /* Поля под кнопку нет: она прижата к углу и меньше. На первом экране её нет; пока страницу
     листают — прячется; в покое прячется, если под ней текст (ui.js: is-top, is-scrolling, is-covering) */
  .progress { left: 2px; bottom: max(4px, env(safe-area-inset-bottom)); transform: scale(.75); transform-origin: 0 100%; }
  .progress.is-top, .progress.is-scrolling, .progress.is-covering { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
  .scroll-hint { display: none; }
  p { text-shadow: 0 0 14px var(--bg), 0 0 4px var(--bg); }
}