/* IVAN — стили сайта. Собирает Иван по этапам, эталон 19-09 — мерка, не источник строк.
   Этап 1: краски, шрифты, шапка, интро, подвал. */

/* ---------- краски и шрифты ----------
   Фон — ночной синий, НЕ чёрный: «склишком тёмно как то» (19-09). Светлота даётся светом
   (неон, свечение), а не серым фоном. Значения — те же, что в эталоне: это результат,
   который он принял, а не место для своего вкуса. */

/* Шрифты свои, из папки shrifty/ рядом со страницей: «шрифты свои, вариант 1» (19-09).
   Внешних запросов ноль. Файлы переменные — одна запись на все толщины; наборов два,
   латиница и кириллица, браузер берёт нужный по unicode-range (диапазоны — из образцов
   *.fontsource.css в той же папке). Имена семейств те же, что были у Google Fonts, поэтому
   остальные правила не меняются. */
@font-face {
  font-family: Jost; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("shrifty/jost-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Jost; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("shrifty/jost-latin-wght-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: Manrope; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("shrifty/manrope-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Manrope; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("shrifty/manrope-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("shrifty/jetbrains-mono-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("shrifty/jetbrains-mono-latin-wght-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 {
  --noch: #081427;          /* фон страницы */
  --glub: #0C1B34;          /* фон ниже первого экрана */
  --panel: rgba(24, 48, 86, .46);
  --led: #F6FAFF;           /* основной текст */
  --tuman: #D0DDEE;         /* абзацы */
  --ten: #9AADC8;           /* подписи */
  --duga: #8FD0FF;          /* неон, акцент */
  --yadro: #DDF1FF;         /* самый яркий свет */
  --zelen: #A8E6C8;         /* «проверено» в консоли прогона */
  --kolodets: rgba(6, 15, 32, .72);   /* поля формы — углубления в стекле */
  --liniya: rgba(160, 215, 255, .32);
  --liniya2: rgba(160, 215, 255, .16);
  --shr-zag: Jost, "Futura PT", Futura, "Century Gothic", sans-serif;
  --shr-tekst: Manrope, "Segoe UI", system-ui, -apple-system, sans-serif;
  --shr-kod: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --plavno: cubic-bezier(.16, .8, .2, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--noch); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--noch);
  color: var(--led);
  font: 400 16px/1.6 var(--shr-tekst);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--duga); }
a:hover { color: var(--yadro); }
img, svg, video { max-width: 100%; }
::selection { background: rgba(143, 208, 255, .35); color: #fff; }
:focus-visible { outline: 2px solid var(--yadro); outline-offset: 3px; border-radius: 6px; }

.ramka { width: min(1200px, 100% - 32px); margin-inline: auto; }
.k-soderzhaniyu {
  position: absolute; left: 16px; top: -64px; z-index: 60;
  padding: 10px 16px; border-radius: 10px;
  background: var(--yadro); color: var(--noch); font-weight: 600; text-decoration: none;
}
.k-soderzhaniyu:focus { top: 12px; }

/* ---------- кнопки: светятся, а не красятся ---------- */
.knopka {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  font: 600 15px/1 var(--shr-tekst);
  transition: background .25s, box-shadow .3s, color .25s, border-color .25s;
}
.knopka-svet {
  background: linear-gradient(180deg, #F1F9FF, #A6DAFF);
  color: #041022;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 0 26px rgba(143, 208, 255, .6), 0 0 80px rgba(143, 208, 255, .25);
}
.knopka-svet:hover {
  color: #041022;
  box-shadow: inset 0 0 0 1px #fff, 0 0 34px rgba(160, 216, 255, .85), 0 0 110px rgba(143, 208, 255, .4);
}
.knopka-kontur {
  background: rgba(143, 208, 255, .05);
  color: var(--led);
  border-color: rgba(207, 234, 255, .42);
}
.knopka-kontur:hover {
  background: rgba(143, 208, 255, .12); color: #fff;
  border-color: rgba(230, 245, 255, .8);
  box-shadow: 0 0 24px rgba(143, 208, 255, .35);
}

/* ---------- интро ----------
   Класс .intro-idyot ставит строчка в <head> до первой отрисовки: сайт под роликом не мигает.
   Страховка: если скрипт упал, интро само гаснет на 16-й секунде (ролик — 8 с). */
.intro { display: none; }
.intro-idyot .intro {
  display: block; position: fixed; inset: 0; z-index: 100;
  background: #02060B;
  animation: intro-strahovka .01s 16s forwards;
}
@keyframes intro-strahovka { to { visibility: hidden; opacity: 0; } }
.intro video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: #02060B;
}
/* экран шире кадра — показываем кадр целиком, иначе срежет подпись из четырёх слов */
@media (min-aspect-ratio: 16/9) { .intro video { object-fit: contain; } }
/* телефон стоя: верх и низ кадра уходят в темноту маской. 🔴 208vw здесь НЕ действует —
   его режет общее max-width: 100% у video, и ролик вписан целиком по ширине экрана. Так его
   и видел владелец; сцена после интро поэтому мерит коробку ролика, а не верит этой строке */
@media (max-aspect-ratio: 1/1) {
  .intro video {
    inset: auto; left: 50%; top: 50%;
    width: 208vw; height: auto; aspect-ratio: 16/9;
    transform: translate(-50%, -50%);
    -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent);
    mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent);
  }
}
.intro.gasnet { opacity: 0; transition: opacity 1.2s var(--plavno); }
.intro-poverh {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(28px + env(safe-area-inset-top, 0px)) clamp(16px, 4vw, 48px) calc(28px + env(safe-area-inset-bottom, 0px));
}
.intro-stroka { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.intro-marka { font: 400 15px/1 var(--shr-zag); letter-spacing: .34em; color: #EAF4FF; white-space: nowrap; }
.intro-podpis { font: 400 11px/1.4 var(--shr-kod); letter-spacing: .24em; text-transform: uppercase; color: rgba(207, 234, 255, .72); }
.intro-hod { flex: 1; height: 1px; overflow: hidden; background: rgba(207, 234, 255, .18); }
.intro-hod i {
  display: block; height: 100%;
  background: linear-gradient(90deg, rgba(143, 208, 255, .2), #EAF4FF);
  transform: scaleX(0); transform-origin: left;
}
.intro-knopka {
  pointer-events: auto; min-height: 44px; padding: 0 20px; border-radius: 999px;
  border: 1px solid rgba(207, 234, 255, .35); background: rgba(2, 6, 11, .35);
  color: #EAF4FF; font: 500 12px/1 var(--shr-kod); letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer; backdrop-filter: blur(8px);
}
.intro-knopka:hover { background: rgba(207, 234, 255, .12); }
.intro-zvuk { border-color: rgba(207, 234, 255, .2); color: rgba(234, 244, 255, .7); }
.intro-zvuk[aria-pressed="true"] { border-color: rgba(207, 234, 255, .55); color: #EAF4FF; }
@media (max-width: 560px) {
  .intro-podpis { display: none; }
  .intro-stroka:last-child { flex-wrap: wrap; row-gap: 18px; }
  .intro-hod { flex: 1 1 100%; }
}

/* ---------- шапка: прозрачна над первым экраном, стекло после прокрутки ---------- */
.shapka {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid transparent;
  transition: background .35s, border-color .35s, backdrop-filter .35s;
}
.shapka.prokrucheno {
  background: rgba(8, 20, 39, .72);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom-color: var(--liniya2);
}
.shapka-ryad { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.marka { display: flex; align-items: center; }
/* у логотипа Б поле свечения по краям — сдвиг влево ставит само слово по сетке */
.marka img { display: block; height: 62px; width: auto; margin-left: -9px; }
.menyu { display: flex; gap: 34px; }
.menyu a {
  position: relative; padding: 8px 0;
  color: var(--tuman); text-decoration: none; font-size: 15px;
}
.menyu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: var(--duga); box-shadow: 0 0 10px var(--duga);
  transform: scaleX(0); transition: transform .35s var(--plavno);
}
.menyu a:hover { color: var(--led); }
.menyu a:hover::after { transform: scaleX(1); }
.shapka-deystviya { display: flex; align-items: center; gap: 10px; }
.shapka-zapros { min-height: 44px; padding: 0 20px; font-size: 14px; }
.burger {
  display: none; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--liniya); background: rgba(143, 208, 255, .06); color: var(--led); cursor: pointer;
}
.menyu-telefon { border-top: 1px solid var(--liniya2); background: rgba(8, 20, 39, .96); backdrop-filter: blur(16px); }
.menyu-telefon .ramka { display: flex; flex-direction: column; padding-block: 12px 20px; }
.menyu-telefon a { padding: 12px 0; border-bottom: 1px solid var(--liniya2); color: var(--led); text-decoration: none; font-size: 18px; }
/* полоса прочитанного по нижнему краю шапки */
.prochitano {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, rgba(143, 208, 255, .3), #EAF6FF);
  box-shadow: 0 0 10px rgba(143, 208, 255, .8);
  transform: scaleX(var(--dolya, 0)); transform-origin: 0 50%;
}

/* ---------- общие части разделов ---------- */
.metka {
  margin: 0; font: 500 12px/1.4 var(--shr-kod); letter-spacing: .28em; text-transform: uppercase;
  color: var(--duga); text-shadow: 0 0 14px rgba(143, 208, 255, .55);
}
.z2 {
  margin: 0; font: 300 clamp(34px, 4.6vw, 60px)/1.06 var(--shr-zag);
  letter-spacing: -.01em; color: #F7FBFF; text-wrap: balance;
  text-shadow: 0 0 2px rgba(255, 255, 255, .55), 0 0 22px rgba(143, 208, 255, .45), 0 0 60px rgba(143, 208, 255, .22);
}
.abzats { margin: 0; max-width: 62ch; font-size: clamp(16px, 1.35vw, 18px); line-height: 1.65; color: var(--tuman); }
.steklo {
  background: var(--panel); border: 1px solid var(--liniya); border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 80px rgba(2, 8, 22, .45);
  backdrop-filter: blur(8px);
}
.knopka svg { width: 18px; height: 18px; }
/* магнит: кнопка тянется за курсором. translate, а не transform — не спорит с анимациями */
.magnit { translate: var(--mx, 0) var(--my, 0); transition: translate .35s var(--plavno), background .25s, box-shadow .3s, color .25s, border-color .25s; }

/* свет за курсором */
.luch-myshi {
  position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(460px circle at var(--lx, 50%) var(--ly, 30%), rgba(143, 208, 255, .07), transparent 62%);
  mix-blend-mode: screen;
}
.luch-myshi.vklyuchen { opacity: 1; }

/* ---------- первый экран: живой последний кадр ролика ----------
   --pol ставит scena.js: где на экране лежит пол кадра. Текст стоит сразу под ним. */
.geroy {
  position: relative; overflow: hidden; min-height: 100vh; min-height: 100svh;
  padding: calc(var(--pol, 62svh) + 10px) 0 96px;
  background: var(--noch);
}
.scena { position: absolute; inset: 0; overflow: hidden; background: var(--noch); }
.scena-kadr {
  position: absolute; left: 0; top: 0; display: block; max-width: none;
  width: 100%; height: auto; pointer-events: none; user-select: none;
  mix-blend-mode: screen;                 /* чёрное кадра не ложится пятном на синий фон */
}
.scena-holst { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.gl-est .scena-kadr { visibility: hidden; }
.scena-niz { position: absolute; left: 0; right: 0; bottom: 0; height: 180px; pointer-events: none; background: linear-gradient(transparent, var(--noch)); }
.geroy-tekst {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
  will-change: transform, opacity;
}
.geroy .vvod { max-width: 980px; font-size: 17px; color: #D6E3F3; text-shadow: 0 2px 24px rgba(2, 5, 11, .95); }
.zagolovok {
  margin: 0; font: 300 clamp(40px, 5vw, 74px)/1.02 var(--shr-zag);
  letter-spacing: -.015em; color: #F7FBFF; text-wrap: balance;
  text-shadow: 0 0 2px rgba(255, 255, 255, .6), 0 0 26px rgba(143, 208, 255, .45), 0 4px 40px rgba(2, 5, 11, .9);
}
.zagolovok .svet {
  color: #fff;
  text-shadow: 0 0 3px #fff, 0 0 16px rgba(143, 208, 255, .95), 0 0 44px rgba(143, 208, 255, .65), 0 0 100px rgba(143, 208, 255, .35);
}
.vvod { margin: 0; font-size: clamp(16px, 1.35vw, 18px); line-height: 1.65; color: var(--tuman); }
.knopki { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 6px; }
/* появление после интро: слова всплывают из размытия, «без вас» вспыхивает неоном */
.gotov .geroy .slovo { display: inline-block; animation: slovo-vhod 1.1s var(--plavno) both; animation-delay: calc(var(--zhdat, 0s) + .25s + var(--n) * 90ms); }
.gotov .geroy .svet { animation: neon 1.6s linear calc(var(--zhdat, 0s) + .75s) both; }
.gotov .geroy .vsplyt { animation: vsplyt 1.1s var(--plavno) both; animation-delay: calc(var(--zhdat, 0s) + var(--z, .6s)); }
/* после интро на квадратном и стоячем экране буквы в миг смены стоят ниже текста: текст ждёт,
   пока камера отъедет (scena.js: 750 мс стоит, потом 1,6 с едет; к 1,5 с пройдено 85 %) */
.tekst-zhdyot { --zhdat: 1.4s; }
@keyframes slovo-vhod { from { opacity: 0; transform: translateY(.5em); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes neon { 0% { opacity: .15; } 8% { opacity: 1; } 12% { opacity: .3; } 18% { opacity: 1; } 24% { opacity: .55; } 30%, 100% { opacity: 1; } }
@keyframes vsplyt { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ---------- этап 3: бегущая строка — что с чем соединяется, по каждой связке бежит импульс ---------- */
.potoki {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #0B1A31, var(--noch));
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.potoki::before, .potoki::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(143, 208, 255, .55), transparent);
}
.potoki::before { top: 0; }
.potoki::after { bottom: 0; }
.potoki-lenta { display: flex; width: max-content; padding-block: 22px; animation: lenta 64s linear infinite; }
@keyframes lenta { to { transform: translateX(-50%); } }
.potok {
  display: inline-flex; align-items: center; gap: 16px; padding-right: 80px; white-space: nowrap;
  font: 400 13px/1 var(--shr-kod); letter-spacing: .22em; text-transform: uppercase;
  color: var(--yadro); text-shadow: 0 0 14px rgba(143, 208, 255, .7);
}
/* стрелка: линия, наконечник и бегущая по ней точка */
.potok i { position: relative; display: block; width: 76px; height: 1px; background: linear-gradient(90deg, rgba(143, 208, 255, .12), rgba(207, 234, 255, .85)); }
.potok i::before {
  content: ""; position: absolute; right: 0; top: -3px; width: 6px; height: 6px;
  border-top: 1px solid var(--yadro); border-right: 1px solid var(--yadro); transform: rotate(45deg);
}
.potok i::after {
  content: ""; position: absolute; left: 0; top: -2px; width: 5px; height: 5px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 8px #fff, 0 0 16px var(--duga);
  animation: po-strelke 2s linear infinite; animation-delay: var(--z, 0s);
}
@keyframes po-strelke {
  0% { transform: translateX(0); opacity: 0; }
  15%, 80% { opacity: 1; }
  100% { transform: translateX(66px); opacity: 0; }
}

/* ---------- разделы: заголовок стоит на светящемся горизонте ---------- */
main {
  /* несколько мягких пятен света по всей длине — страница синяя, а не чёрная */
  background:
    radial-gradient(1200px 760px at 20% 17%, rgba(120, 190, 255, .15), transparent 70%),
    radial-gradient(1100px 760px at 82% 24%, rgba(110, 180, 255, .14), transparent 70%),
    radial-gradient(1200px 800px at 22% 41%, rgba(120, 190, 255, .15), transparent 70%),
    radial-gradient(1100px 760px at 78% 58%, rgba(110, 180, 255, .13), transparent 70%),
    radial-gradient(1200px 800px at 25% 76%, rgba(120, 190, 255, .14), transparent 70%),
    radial-gradient(1100px 700px at 75% 93%, rgba(110, 180, 255, .12), transparent 70%);
}
.razdel { position: relative; padding-block: clamp(96px, 11vw, 160px); overflow-x: clip; }
.razdel-shapka {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; align-items: end;
  margin-bottom: clamp(60px, 7vw, 96px);
}
.razdel-shapka > div { display: flex; flex-direction: column; gap: 18px; }
.razdel-shapka > .abzats { justify-self: end; max-width: 480px; padding-bottom: 14px; }
/* горизонт: линия с яркой точкой, веер лучей над ней, свет на «полу» под ней, пробегающая вспышка */
.gorizont { --gx: 22%; grid-column: 1 / -1; position: relative; height: 1px; margin-top: 6px; }
.gorizont i { position: absolute; display: block; pointer-events: none; }
.gz-liniya {
  left: 0; right: 0; top: 0; height: 1px; transform-origin: var(--gx) 50%;
  background: linear-gradient(90deg, transparent, rgba(143, 208, 255, .5) calc(var(--gx) - 22%), #F0F9FF var(--gx), rgba(143, 208, 255, .5) calc(var(--gx) + 30%), rgba(143, 208, 255, .12) 92%, transparent);
  box-shadow: 0 0 10px rgba(143, 208, 255, .45);
}
.gz-tochka {
  left: var(--gx); top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 10px #fff, 0 0 30px 6px rgba(143, 208, 255, .8), 0 0 110px 26px rgba(143, 208, 255, .28);
}
.gz-luchi {
  left: var(--gx); bottom: 0; z-index: -1; width: min(980px, 92vw); height: 340px; transform: translateX(-50%); opacity: .85;
  background: conic-gradient(from -44deg at 50% 100%,
    transparent 0deg, rgba(143, 208, 255, .09) 5deg, transparent 9deg,
    rgba(143, 208, 255, .12) 17deg, transparent 21deg, rgba(143, 208, 255, .08) 28deg, transparent 31deg,
    rgba(207, 234, 255, .2) 40deg, rgba(234, 246, 255, .32) 44deg, rgba(207, 234, 255, .2) 48deg, transparent 57deg,
    rgba(143, 208, 255, .08) 61deg, transparent 64deg, rgba(143, 208, 255, .12) 71deg, transparent 75deg,
    rgba(143, 208, 255, .09) 83deg, transparent 88deg, transparent 360deg);
  -webkit-mask: radial-gradient(ellipse 50% 100% at 50% 100%, #000 8%, rgba(0, 0, 0, .4) 45%, transparent 80%);
  mask: radial-gradient(ellipse 50% 100% at 50% 100%, #000 8%, rgba(0, 0, 0, .4) 45%, transparent 80%);
}
.gz-pol {
  left: var(--gx); top: 0; width: min(1000px, 96vw); height: 150px; transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(143, 208, 255, .17), transparent 70%);
}
.gz-vspyshka {
  left: 0; top: -2px; width: 34%; height: 5px; opacity: 0;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, #fff, rgba(143, 208, 255, .65) 30%, transparent 70%);
}
/* горизонт не всплывает, а зажигается: линия растёт от точки, потом лучи, потом вспышка */
.gorizont.poyav-zhdyot { opacity: 1; translate: none; }
.gorizont.poyav-zhdyot .gz-liniya { transform: scaleX(0); }
.gorizont.poyav-zhdyot .gz-tochka, .gorizont.poyav-zhdyot .gz-luchi, .gorizont.poyav-zhdyot .gz-pol { opacity: 0; }
.gorizont.vidno .gz-liniya { transform: scaleX(1); transition: transform 1.8s var(--plavno) .1s; }
.gorizont.vidno .gz-tochka { opacity: 1; transition: opacity .4s; }
.gorizont.vidno .gz-luchi { opacity: .85; transition: opacity 2.2s ease .3s; }
.gorizont.vidno .gz-pol { opacity: 1; transition: opacity 1.6s ease .2s; }
.gorizont.vidno .gz-vspyshka { animation: probeg 1.9s cubic-bezier(.3, .1, .2, 1) .35s both; }
@keyframes probeg {
  0% { opacity: 0; transform: translateX(-60%) scaleX(.4); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translateX(300%) scaleX(1.3); }
}

/* появление при прокрутке: sajt.js ставит .poyav-zhdyot тому, что ниже экрана */
.poyav-zhdyot { opacity: 0; translate: 0 30px; }
.poyav-zhdyot.vidno { opacity: 1; translate: none; transition: opacity 1s var(--plavno), translate 1.1s var(--plavno); transition-delay: var(--z, 0s); }

/* ---------- этап 3: слово IVAN, как в ролике ----------
   🔴 Порядок переделан 20-09 по слову владельца. Сперва микросхемы (0 с, 1 с на прорисовку) —
   они источник импульсов и обязаны быть раньше букв. Дальше ЦЕПОЧКА, шаг 1,1 с на букву q:
   вспышка на полу → луч вверх → буква проявляется и прорисовывается → набирает свечение →
   проступает её дорожка → по дорожке бежит ИСКРА → узел на конце вспыхивает → выходит её
   карточка. Ряд из четырёх — 4,52 с. Потом по схемам идут вечные импульсы.
   🔴 Ночью 20-09 зажигание буквы сжато до 0,55 с: искра обязана уходить из ГОТОВОЙ буквы,
   а не из наполовину прочерченной. Этапы внутри буквы идут встык, без наложений:
   буква 0…0,55 · искра 0,55…0,92 · узел 0,92…1,22 · карточка с 1,22.
   Числа ритма — две переменные --nachalo и --shag-bukvy ниже, остальное считается от них. */
.imya { position: relative; }
.imya-svg { display: block; width: 100%; height: auto; overflow: visible; }
.imya-svg use { fill: none; stroke-linejoin: round; }
.imya-svg .svechenie-shir { stroke: #8FD0FF; stroke-width: 30; filter: url(#ra-shir); opacity: .85; }
.imya-svg .svechenie-uzk { stroke: #BFE3FF; stroke-width: 24; filter: url(#ra-uzk); opacity: .8; }
.imya-svg .serdtse { stroke: #FBFDFF; stroke-width: 20; }
.imya-svg .osnova { stroke: rgba(190, 228, 255, .38); stroke-width: 1.4; }
.imya-svg .shemy path { fill: none; stroke: #D2EAFF; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.imya-svg .shemy .shtrih { stroke-width: 1.6; opacity: .8; }
.imya-svg .kontsy circle, .imya-svg .dorozhki circle { fill: #fff; }
.imya-svg .impulsy path {
  fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round;
  stroke-dasharray: .05 1.2; stroke-dashoffset: .05; opacity: 0;
}
.imya-svg .dorozhki path { fill: none; stroke: rgba(190, 228, 255, .72); stroke-width: 1.9; }
.imya-svg .dorozhki circle { transform-box: fill-box; transform-origin: 50% 50%; }
/* искра по дорожке: короткий штрих бежит от буквы к карточке. Штрих .06 при pathLength=1,
   промежуток 1.2 — второй искры на пути быть не может. Проходит один раз, не бесконечно */
.imya-svg .iskry path {
  fill: none; stroke: #fff; stroke-width: 6.5; stroke-linecap: round;
  stroke-dasharray: .1 1.2; stroke-dashoffset: .1; opacity: 0;
}
/* холостой ток: та же дорожка, но искра вдвое тоньше и не белая — «ток идёт», а не
   «анимация началась заново». Числа подобраны глазом: 3 против 6,5 по толщине,
   #CFE9FF против #fff по цвету, .72 против 1 по силе свечения */
.imya-svg .tok path {
  fill: none; stroke: #CFE9FF; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: .07 1.3; stroke-dashoffset: .12; opacity: 0;
}
.imya-svg .luch, .imya-svg .vspyshka { opacity: 0; transform-box: fill-box; }
.imya-svg .luch { transform-origin: 50% 100%; }
.imya-svg .vspyshka { transform-origin: 50% 50%; }
.imya-shagi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 4px; }
.shag { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.shag-nomer { font: 500 11px/1 var(--shr-kod); letter-spacing: .22em; text-transform: uppercase; color: var(--duga); }
.shag h3 { margin: 0; font: 400 26px/1.2 var(--shr-zag); color: #fff; text-shadow: 0 0 18px rgba(143, 208, 255, .35); }
.shag p { margin: 0; max-width: 30ch; font-size: 15px; line-height: 1.6; color: var(--tuman); }

.imya.zhdyot .bukva, .imya.zhdyot .shemy, .imya.zhdyot .kontsy, .imya.zhdyot .dorozhki,
.imya.zhdyot .dorozhki path, .imya.zhdyot .dorozhki circle, .imya.zhdyot .osnova { opacity: 0; }
.imya.zhdyot .shag > * { opacity: 0; translate: 0 12px; }

/* 🔴 20-09, слово владельца: ЦЕПОЧКА на каждую букву, шаг 1,1 с, порядок внутри буквы строгий —
   буква вспыхнула → из неё вниз по дорожке побежала ИСКРА → дошла до узла → узел вспыхнул →
   и только потом проявилась карточка. До этого дня карточка выходила РАНЬШЕ своего узла
   (карточка 3,80 + q*0,15, узел 4,00 + q*0,15), а буква стояла на 0,5 + q*0,5 — разрыв 3,3 с,
   и связи «буква → её шаг» не видел никто, включая владельца.
   Весь ритм — два числа ниже. Считать руками их больше не надо: смещения даны от них. */
.imya {
  --nachalo: .55s; --shag-bukvy: 1.1s;
  /* холостой ток (добавка владельца 20-09). Период 6 с — его решение: 3 с он отверг
     («раздел всё время движется, мешает читать карточки, греет телефон»), 10 с тоже
     («многие пролистают раньше»). Волна 4 x .65 + .75 = 2,70 с, тишина 3,30 с.
     Начало 6 с — после последней карточки: она выходит на 5,07 с (--nachalo .55 + 3 x 1,1
     + 1,22) и доезжает за .8 с, то есть к 5,87. Холостой ход на въезд не накладывается */
  --tok-nachalo: 6s; --tok-shag: .65s; --tok-period: 6s;
}
.imya .bukva, .imya .yadro,
.imya .vspyshka, .imya .luch,
.imya .dorozhki > g, .imya .iskry path, .imya .shag { --t: calc(var(--nachalo) + var(--q) * var(--shag-bukvy)); }

/* до букв: основание и микросхемы. 1г — схемы согласованы с ритмом тем, что идут ПЕРЕД ним,
   а не в его середине: импульсы приходят «со стороны микросхемы», значит схема обязана уже
   быть, когда буква зажигается. Рисуются за 1 с и дальше молчат — спорить с цепочкой нечем */
.imya.idyot .osnova { transform-box: fill-box; transform-origin: 50% 50%; animation: rastet 1.2s var(--plavno) both; }
.imya.idyot .shemy { animation: zazhech .2s linear both; }
.imya.idyot .shemy path { stroke-dasharray: 1; animation: risovat 1s cubic-bezier(.4, 0, .2, 1) both; }
.imya.idyot .kontsy { animation: zazhech .5s ease .95s both; }

/* буква: вспышка на полу → луч вверх → проявление и прорисовка → набор свечения */
/* 🔴 20-09, ночь: зажигание буквы СЖАТО с 1,15 с до 0,55 с. Было — искра уходила на +0,50,
   когда контур прочерчен наполовину, а свечение только начало вставать: глаз читал это как
   «что-то пошло раньше, чем должно» («импульс от буквы И… как-то нелогично там сидит»).
   Решение владельца — ускорить БУКВУ, а не отодвигать искру: если отодвигать, шаг пришлось бы
   растянуть до 1,5 с, и ряд вырос бы до ~6,5 с, а при включённом повторе это заметно долго.
   Теперь все части зажигания кончаются ровно на +0,55, и дальше этапы идут встык, не
   накладываясь: искра .55–.92 · узел .92–1,22 · карточка с 1,22. */
.imya.idyot .vspyshka { animation: vspyshka-pola .4s ease-out both; animation-delay: var(--t); }
.imya.idyot .luch { animation: luch-vverh .45s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--t) + .02s); }
.imya.idyot .bukva { animation: proyavlenie .44s ease both; animation-delay: calc(var(--t) + .11s); }
.imya.idyot .serdtse { stroke-dasharray: 1; animation: risovat .34s cubic-bezier(.5, 0, .2, 1) both; animation-delay: calc(var(--t) + .13s); }
.imya.idyot .svechenie-shir, .imya.idyot .svechenie-uzk { animation: zazhech .3s ease both; animation-delay: calc(var(--t) + .25s); }

/* дорожка проступает вместе со свечением буквы, по ней бежит искра, на конце вспыхивает узел */
.imya.idyot .dorozhki { animation: zazhech .2s linear both; }
.imya.idyot .dorozhki path { animation: zazhech .22s ease both; animation-delay: calc(var(--t) + .33s); }
.imya.idyot .iskry path { animation: iskra-begom .37s linear both; animation-delay: calc(var(--t) + .55s); }
/* 🔴 холостой ток живёт только внутри .idyot. Отсюда даром берутся два условия:
   раздел ушёл с экрана — наблюдатель снимает .idyot, и анимации встают (телефон не греется);
   prefers-reduced-motion — .idyot не ставится вовсе, и холостого хода нет */
.imya.idyot .tok path {
  animation: tok-begom var(--tok-period) linear infinite;
  animation-delay: calc(var(--tok-nachalo) + var(--q) * var(--tok-shag));
}
.imya.idyot .dorozhki circle { animation: uzel-vspyhnul .3s ease-out both; animation-delay: calc(var(--t) + .92s); }
/* карточка — встык за узлом: узел кончает вспыхивать на 1,22 с, карточка с 1,22 с */
.imya.idyot .shag > * { opacity: 1; translate: none; transition: opacity .8s var(--plavno), translate .8s var(--plavno); transition-delay: calc(var(--t) + 1.22s); }

/* вечные импульсы по схемам включаются, когда цепочка уже прошла (пауза задана в sajt.js) */
.imya.idyot .impulsy path { opacity: 1; animation: impuls var(--dlit, 3s) linear var(--pauza, 5.5s) infinite; }
.imya.idyot .yadro { animation: migni 4.8s linear infinite; animation-delay: calc(var(--t) + 2.2s); }
@keyframes rastet { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes zazhech { from { opacity: 0; } to { opacity: 1; } }
@keyframes risovat { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* искра: штрих уходит из-за начала пути (.06) за его конец (-1). Это НЕ прочерчивание линии */
@keyframes iskra-begom { 0% { opacity: 1; stroke-dashoffset: .1; } 88% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -1; } }
/* холостой ток: проход занимает .75 с из 6 с периода (12,5 %), остальное — тишина.
   Дальше штрих стоит за концом пути и не рисуется вовсе, пока период не начнётся заново */
@keyframes tok-begom {
  0% { opacity: .72; stroke-dashoffset: .12; }
  11% { opacity: .72; }
  12.5%, 100% { opacity: 0; stroke-dashoffset: -1; }
}
@keyframes uzel-vspyhnul {
  0% { opacity: 0; transform: scale(.4); }
  45% { opacity: 1; transform: scale(2.2); filter: drop-shadow(0 0 9px #CFE9FF); }
  100% { opacity: 1; transform: scale(1); filter: none; }
}
/* импульс идёт от края к букве: пути нарисованы в эту сторону */
@keyframes impuls { 0% { stroke-dashoffset: .05; } 70%, 100% { stroke-dashoffset: -1; } }
@keyframes vspyshka-pola { 0% { opacity: 0; transform: scaleX(.15); } 18% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1.7); } }
@keyframes luch-vverh { 0% { opacity: 0; transform: scaleY(0); } 12% { opacity: 1; } 35% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(1); } }
@keyframes proyavlenie { 0% { opacity: 0; } 8% { opacity: 1; filter: brightness(2.6); } 62% { filter: brightness(2) drop-shadow(0 0 22px #fff); } 100% { opacity: 1; filter: none; } }
@keyframes migni { 0% { filter: brightness(1.9) drop-shadow(0 0 20px rgba(207, 234, 255, .95)); } 18%, 100% { filter: none; } }

/* ---------- этап 4: живой прогон ---------- */
.pult { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 24px; }
.vybor {
  min-height: 44px; padding: 0 20px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(207, 234, 255, .3); background: rgba(143, 208, 255, .04); color: var(--tuman);
  font: 500 14px/1 var(--shr-tekst); transition: background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.vybor:hover { color: var(--led); border-color: rgba(207, 234, 255, .6); }
.vybor[aria-pressed="true"] { background: #EAF6FF; color: #041022; border-color: #EAF6FF; box-shadow: 0 0 24px rgba(143, 208, 255, .55); }
.pusk { min-height: 44px; margin-left: 6px; }
/* 🔴 20-09: раздел стал ниже (пункт 2б). Было 42/30 — стало 26/22 */
.doroga { margin-bottom: 22px; padding: 26px clamp(12px, 4vw, 56px) 22px; }
/* 🔴 20-09, пункт 2в: УЗЛЫ ВМЕСТО РЕЛЬСЫ. Четыре стеклянные плитки в столбцах сетки;
   дорожка между ними — та же светящаяся линия, но она лежит ПОД плитками и видна только
   в просветах. Отсюда и ответ на пункт 2а: линия физически не может пересечь букву —
   буква внутри непрозрачной плитки, а линия за ней. Столбцы без зазора, зазор даётся
   полями плитки: только так центры столбцов остаются ровно на 12,5 / 37,5 / 62,5 / 87,5 %,
   и --hod от прогона не надо пересчитывать. */
.rels { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rels-liniya { position: absolute; z-index: 0; left: 12.5%; right: 12.5%; top: calc(50% - 1px); height: 1px; background: rgba(143, 208, 255, .28); }
.rels-liniya i {
  position: absolute; left: 0; top: -1px; width: var(--hod, 75%); height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(143, 208, 255, .5), #F0F9FF);
  box-shadow: 0 0 14px rgba(143, 208, 255, .9), 0 0 30px rgba(143, 208, 255, .5);
  transition: width 1.1s var(--plavno), height 1.1s var(--plavno);
}
/* пакет идёт ПОД плитками: в просвете он виден, внутри узла скрыт — он там и «обрабатывается» */
.paket {
  position: absolute; z-index: 0; top: calc(50% - 8px); left: calc(12.5% + var(--hod, 75%) - 8px);
  width: 16px; height: 16px; border-radius: 50%; background: #fff; opacity: 0;
  box-shadow: 0 0 0 4px rgba(143, 208, 255, .25), 0 0 22px 6px rgba(143, 208, 255, .95), 0 0 60px 12px rgba(143, 208, 255, .45);
  transition: left 1.1s var(--plavno), top 1.1s var(--plavno), opacity .4s;
}
.paket::before {                          /* хвост за пакетом */
  content: ""; position: absolute; right: 8px; top: 6px; width: 110px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, transparent, rgba(143, 208, 255, .9)); filter: blur(1px);
}
.rels.dvizhetsya .paket { opacity: 1; }
.etap { position: relative; z-index: 1; margin-inline: 13px; }
/* узел — плитка. Фон непрозрачный (слой панели поверх сплошного цвета): иначе дорожка
   и пакет просвечивали бы сквозь неё, и «пакет внутри узла» читалось бы как ошибка */
.uzel {
  position: relative; overflow: hidden; height: 100%;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 62px; padding: 10px 14px; border-radius: 16px;
  border: 1px solid var(--liniya2);
  background: linear-gradient(180deg, rgba(30, 58, 100, .62), rgba(17, 36, 68, .62)), #0D1F38;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: border-color .5s, box-shadow .5s;
}
.uzel-bukva { font: 200 34px/1 var(--shr-zag); color: rgba(170, 205, 240, .3); transition: color .6s, text-shadow .6s; }
.uzel-ogon {
  width: 8px; height: 8px; border-radius: 50%; background: rgba(170, 205, 240, .26);
  transition: background .5s, box-shadow .5s;
}
.uzel::before {                           /* пробег света по плитке в миг, когда узел взялся */
  content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 18%, rgba(190, 228, 255, .3) 50%, transparent 82%);
}
.uzel::after {                            /* нить света по нижнему краю горящей плитки */
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 1px; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(221, 241, 255, .95), transparent);
  transition: opacity .5s;
}
.etap.gorit .uzel { border-color: rgba(160, 215, 255, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 30px rgba(143, 208, 255, .22); }
.etap.gorit .uzel-bukva { color: #fff; text-shadow: 0 0 2px #fff, 0 0 14px rgba(143, 208, 255, .95), 0 0 42px rgba(143, 208, 255, .6); }
.etap.gorit .uzel-ogon { background: var(--yadro); box-shadow: 0 0 10px rgba(143, 208, 255, .95), 0 0 22px rgba(143, 208, 255, .5); }
.etap.gorit .uzel::before { animation: probeg-uzla .9s ease-out both; }
.etap.gorit .uzel::after { opacity: .9; }
@keyframes probeg-uzla { 0% { opacity: 0; transform: translateX(-100%); } 22% { opacity: 1; } 100% { opacity: 0; transform: translateX(100%); } }
.etap-imya { font: 500 11px/1.25 var(--shr-kod); letter-spacing: .12em; text-transform: uppercase; color: var(--ten); transition: color .4s; }
.etap.gorit .etap-imya { color: var(--yadro); text-shadow: 0 0 12px rgba(143, 208, 255, .6); }
.poyasnenie { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 64px; margin: 30px 0 0; text-align: center; }
.poyasnenie-shag { font: 500 11px/1 var(--shr-kod); letter-spacing: .22em; text-transform: uppercase; color: var(--duga); }
.poyasnenie-tekst { max-width: 42ch; font: 300 clamp(19px, 1.9vw, 24px)/1.3 var(--shr-zag); color: #fff; text-shadow: 0 0 22px rgba(143, 208, 255, .45); }
.poyasnenie.smenilos > * { animation: iz-tumana .6s var(--plavno) both; }
.progon-setka { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 22px; }
.konsol {
  overflow: hidden; border-radius: 22px; background: #050E1E; border: 1px solid rgba(143, 208, 255, .3);
  box-shadow: 0 0 80px rgba(127, 200, 255, .10), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.konsol-verh { display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-bottom: 1px solid var(--liniya2); }
.konsol-verh b { width: 10px; height: 10px; border-radius: 50%; background: rgba(143, 200, 255, .3); }
.konsol-verh span { margin-left: 10px; font: 400 12px/1 var(--shr-kod); color: var(--ten); }
.konsol-tekst {
  display: flex; flex-direction: column; gap: 12px; min-height: 188px; padding: 22px 24px; overflow-x: auto;
  font: 400 14px/1.5 var(--shr-kod); color: var(--yadro); text-shadow: 0 0 10px rgba(143, 208, 255, .45);
}
.konsol-tekst .stroka { white-space: pre; }
.konsol-tekst .ok { color: var(--zelen); text-shadow: 0 0 10px rgba(168, 230, 200, .4); }
.konsol-tekst .zhdyom { color: var(--ten); text-shadow: none; }
.kursor {
  display: inline-block; width: 8px; height: 1.1em; margin-left: 2px; vertical-align: -2px;
  background: var(--duga); box-shadow: 0 0 10px var(--duga); animation: morgaet 1s steps(1) infinite;
}
@keyframes morgaet { 50% { opacity: 0; } }
.telefon { display: flex; flex-direction: column; gap: 16px; padding: 22px 24px; }
.telefon-verh { display: flex; align-items: center; gap: 10px; font: 500 12px/1 var(--shr-kod); letter-spacing: .14em; color: var(--tuman); }
.telefon-verh i { width: 8px; height: 8px; border-radius: 50%; background: var(--duga); box-shadow: 0 0 12px var(--duga); }
.soobshchenie {
  padding: 16px 18px; border-radius: 18px 18px 18px 4px; font-size: 15px; line-height: 1.55; color: var(--led);
  background: rgba(143, 208, 255, .1); border: 1px solid rgba(221, 241, 255, .55);
  box-shadow: 0 0 30px rgba(127, 200, 255, .28), inset 0 0 20px rgba(143, 208, 255, .08);
}
.soobshchenie small { display: block; margin-top: 8px; font: 400 11px/1 var(--shr-kod); color: var(--ten); text-align: right; }
.soobshchenie.prishlo { animation: prishlo .6s var(--plavno) both; }
@keyframes prishlo { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
.pechataet { display: inline-flex; gap: 5px; width: max-content; padding: 14px 16px; border-radius: 16px; background: rgba(143, 208, 255, .1); }
.pechataet i { width: 6px; height: 6px; border-radius: 50%; background: var(--yadro); animation: prygaet 1s ease-in-out infinite; }
.pechataet i:nth-child(2) { animation-delay: .15s; }
.pechataet i:nth-child(3) { animation-delay: .3s; }
@keyframes prygaet { 0%, 100% { opacity: .3; transform: none; } 50% { opacity: 1; transform: translateY(-3px); } }
.pusto { font-size: 15px; color: var(--ten); }

/* ---------- этап 4: калькулятор ---------- */
.schet-setka { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.polzunki { display: flex; flex-direction: column; gap: 30px; padding: 34px 34px 26px; }
/* 🔴 20-09: переключатель валюты. Ничего не конвертирует и курсов не тянет — меняет знак,
   вид числа и ход ползунка. Почему так — в sajt.js, над таблицей VALYUTY */
.valyuty { display: flex; align-items: center; gap: 2px; align-self: flex-start; padding: 3px; border-radius: 999px; border: 1px solid var(--liniya2); background: rgba(143, 208, 255, .05); }
.valyuta {
  min-width: 42px; min-height: 32px; padding: 0 10px; border: 0; border-radius: 999px; cursor: pointer;
  background: none; color: var(--ten); font: 500 15px/1 var(--shr-tekst);
  transition: color .25s, background .25s, box-shadow .3s;
}
.valyuta:hover { color: var(--led); background: rgba(143, 208, 255, .1); }
.valyuta[aria-pressed="true"] { color: #041022; background: linear-gradient(180deg, #F1F9FF, #A6DAFF); box-shadow: 0 0 18px rgba(143, 208, 255, .45); }
.valyuta[aria-pressed="true"]:hover { color: #041022; }
.polzunok { display: flex; flex-direction: column; gap: 12px; }
.polzunok-verh { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.polzunok label { font-size: 15px; color: var(--tuman); }
.polzunok output { font: 500 18px/1 var(--shr-kod); color: #fff; text-shadow: 0 0 12px rgba(143, 208, 255, .6); font-variant-numeric: tabular-nums; }
/* ползунок: светящаяся нить, заполненная до бегунка (--dolya ставит sajt.js) */
.polzunok input { --dolya: 50%; width: 100%; height: 28px; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
.polzunok input::-webkit-slider-runnable-track {
  height: 2px; border-radius: 2px; box-shadow: 0 0 10px rgba(143, 208, 255, .4);
  background: linear-gradient(90deg, #EAF6FF 0, var(--duga) var(--dolya), rgba(143, 208, 255, .2) var(--dolya) 100%);
}
.polzunok input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; margin-top: -7px; border: 0; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 4px rgba(143, 208, 255, .25), 0 0 20px 4px rgba(143, 208, 255, .95), 0 0 50px 10px rgba(143, 208, 255, .35);
}
.polzunok input::-moz-range-track { height: 2px; background: rgba(143, 208, 255, .2); }
.polzunok input::-moz-range-progress { height: 2px; background: var(--duga); }
.polzunok input::-moz-range-thumb {
  width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 4px rgba(143, 208, 255, .25), 0 0 20px 4px rgba(143, 208, 255, .95);
}
.itogi { display: flex; flex-direction: column; gap: 22px; }
.itog { display: flex; flex-direction: column; gap: 6px; }
.itog b {
  font: 200 clamp(60px, 7.4vw, 104px)/.95 var(--shr-zag); color: #fff; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 3px #fff, 0 0 30px rgba(143, 208, 255, .7), 0 0 80px rgba(143, 208, 255, .35);
}
.itog.srednij b { font-size: clamp(40px, 5vw, 64px); font-weight: 300; }
.itog.malyj b { font-size: clamp(30px, 3.4vw, 40px); font-weight: 300; color: var(--yadro); }
.itog span { font: 500 11px/1.4 var(--shr-kod); letter-spacing: .22em; text-transform: uppercase; color: var(--ten); }
.itog em { font-style: normal; }
.itogi-cherta { height: 1px; background: linear-gradient(90deg, rgba(221, 241, 255, .7), rgba(143, 208, 255, .2) 50%, transparent); box-shadow: 0 0 10px rgba(143, 208, 255, .4); }
.itogi p { margin: 0; max-width: 46ch; font-size: 15px; color: var(--tuman); }
/* 🔴 оговорка про грубый счёт — не украшение, а часть приёма: без неё калькулятор читается
   как реклама, и доверие падает ровно там, где мы его зарабатываем. Стоит рядом с итогом */
.ogovorka {
  padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--liniya2); border-left: 2px solid rgba(143, 208, 255, .55);
  background: rgba(10, 24, 46, .5); line-height: 1.6;
}

/* ---------- этап 5: услуги — слева перечень, справа витрина выбранной ---------- */
/* 🔴 20-09: было align-items: stretch — карточка равнялась по списку слева и, наполнившись
   смыслом, обрезала цену снизу (overflow: hidden держит блик). Теперь растёт по себе */
.uslugi { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.uslugi-spisok { display: flex; flex-direction: column; justify-content: center; }
.usluga { border-bottom: 1px solid var(--liniya2); }
.usluga-knopka {
  position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) 24px; align-items: center; gap: 14px;
  width: 100%; padding: 20px 4px 18px 0; background: none; border: 0; color: var(--ten); text-align: left; cursor: pointer; font: inherit;
}
/* 4: номер — служебная пометка, а не половина строки. Мельче и тусклее */
.usluga-nomer { font: 500 10px/1 var(--shr-kod); letter-spacing: .16em; color: rgba(154, 173, 200, .45); transition: color .35s; }
.usluga-imya { font: 300 clamp(24px, 2.4vw, 32px)/1.12 var(--shr-zag); color: #A9BCD6; transition: color .35s, text-shadow .35s, transform .5s var(--plavno); }
/* метка состояния услуги. Лежит ВНУТРИ имени: у кнопки сетка из трёх колонок, четвёртый
   ребёнок её сломал бы. «в разработке» — без сроков и без чужих имён (слово 20-09) */
.v-rabote {
  display: inline-block; vertical-align: middle; margin-left: 10px; padding: 3px 10px;
  border-radius: 999px; border: 1px dashed rgba(255, 196, 120, .65); background: rgba(255, 176, 80, .1);
  color: #FFD9A8; font: 500 11px/1.4 var(--shr-kod); letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap;
}
.vitrina .v-rabote { margin-left: 0; }
.vitrina .v-rabote[hidden] { display: none; }
.usluga-strelka {
  width: 22px; height: 22px; opacity: 0; transform: translateX(-8px);
  fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px var(--duga));
  transition: opacity .35s, transform .45s var(--plavno);
}
.usluga-knopka:hover .usluga-imya, .usluga-knopka:focus-visible .usluga-imya { color: #fff; }
/* 🔴 4: стрелка теперь проступает при наведении на ЛЮБУЮ услугу. Раньше она была только у
   выбранной, и по списку не было видно, что он вообще нажимается */
.usluga-knopka:hover .usluga-strelka, .usluga-knopka:focus-visible .usluga-strelka { opacity: .5; transform: translateX(-3px); }
/* 4: выбранная поднята — светлеет полоса под ней и уходит вправо имя. Без золота и теней:
   дорогое впечатление ломается именно от них */
.usluga.vybrana { background: linear-gradient(90deg, rgba(143, 208, 255, .08), transparent 62%); }
.usluga.vybrana .usluga-imya { color: #fff; transform: translateX(10px); text-shadow: 0 0 2px rgba(255, 255, 255, .6), 0 0 24px rgba(143, 208, 255, .65); }
.usluga.vybrana .usluga-nomer { color: var(--duga); }
.usluga.vybrana .usluga-strelka { opacity: 1; transform: none; }
.usluga { transition: background .45s; }
.usluga-cherta {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, #fff, rgba(143, 208, 255, .7) 45%, transparent); box-shadow: 0 0 12px rgba(143, 208, 255, .85);
  transition: transform .8s var(--plavno);
}
.usluga.vybrana .usluga-cherta { transform: scaleX(1); }
.usluga-opis { display: none; }
.vitrina {
  position: relative; overflow: hidden; min-height: 460px; padding: clamp(28px, 4vw, 52px);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px;
}
/* заголовку нужен воздух от знака в правом верхнем углу */
.vitrina-nomer, .vitrina h3 { padding-right: clamp(130px, 15vw, 184px); }
.vitrina::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(207, 234, 255, .8), transparent); box-shadow: 0 0 16px rgba(143, 208, 255, .7);
}
/* ---------- 🔴 20-09: свои знаки услуг ----------
   Было: кружок 188x188 с линейной иконкой из набора и вращающимся ободом. На странице, где
   весь язык — неоновые буквы, дорожки, узлы и искры, это единственное место выглядело
   купленным. Стало: у каждой услуги свой знак из того же языка, собранный под неё.
   Разметка знаков — в sajt.js (одна на обе версии), здесь только вид и движение.
   Знак играет один раз при выборе услуги и замирает: ни одной бесконечной анимации. */
.vitrina-znak {
  position: absolute; right: clamp(18px, 3.4vw, 46px); top: clamp(18px, 3.4vw, 46px);
  width: clamp(118px, 13vw, 168px); aspect-ratio: 17 / 12; pointer-events: none;
}
.znak { display: block; width: 100%; height: 100%; overflow: visible; }
.znak .liniya { fill: none; stroke: rgba(180, 220, 255, .4); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.znak .yarko { fill: none; stroke: #E8F5FF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(143, 208, 255, .85)); }
.znak .tochka, .znak .rossyp circle, .znak .uzelok, .znak .volna rect { fill: #DDF1FF; filter: drop-shadow(0 0 6px rgba(143, 208, 255, .85)); }
.znak .iskra { fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: .08 1.3; stroke-dashoffset: .08; opacity: 0; filter: drop-shadow(0 0 6px rgba(143, 208, 255, .95)); }
.znak .svet-po-stranitse { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: 0; filter: blur(2px) drop-shadow(0 0 8px rgba(143, 208, 255, .9)); }
.znak .stvorka { fill: #CFE9FF; opacity: .5; }
.znak .kolco-ozhidaniya { fill: none; stroke: #CFE9FF; stroke-width: 1.6; opacity: 0; }

/* движение — только когда услугу выбрали. Класс .smenilas витрине ставит sajt.js заново
   на каждый выбор, поэтому знак проигрывается с начала */
.vitrina.smenilas .znak .rossyp circle { animation: znak-vspyhnul .45s ease both; animation-delay: calc(.1s + var(--i, 0) * .06s); }
.vitrina.smenilas .znak .cherez-tochki { stroke-dasharray: 1; animation: risovat .9s var(--plavno) .55s both; }
.vitrina.smenilas .znak-sajt .yarko { stroke-dasharray: 1; animation: risovat .5s var(--plavno) both; animation-delay: calc(.25s + var(--i, 0) * .12s); }
.vitrina.smenilas .znak .svet-po-stranitse { animation: znak-svet 1.5s var(--plavno) .5s both; }
.vitrina.smenilas .znak .replika { animation: znak-replika .5s var(--plavno) both; animation-delay: calc(.1s + var(--i, 0) * .18s); }
.vitrina.smenilas .znak .uzelok { animation: znak-vspyhnul .5s ease .42s both; }
.vitrina.smenilas .znak-svyazka .iskra { animation: znak-iskra 1.6s linear .5s infinite; }
.vitrina.smenilas .znak .vsplesk { stroke-dasharray: 1; animation: risovat 1.4s cubic-bezier(.3, 0, .2, 1) .15s both; }
.vitrina.smenilas .znak .vershina { animation: znak-vspyhnul .5s ease .85s both; }
.vitrina.smenilas .znak .volna rect { transform-box: fill-box; transform-origin: 50% 50%; animation: znak-volna .8s var(--plavno) both; animation-delay: calc(.1s + var(--i, 0) * .07s); }
.vitrina.smenilas .znak .perehod { stroke-dasharray: 1; animation: risovat .4s linear .62s both; }
.vitrina.smenilas .znak .strochki .yarko { stroke-dasharray: 1; animation: risovat .5s var(--plavno) both; animation-delay: calc(.8s + var(--i, 0) * .14s); }

/* 🔴 знак «ИИ‑агенты с тормозом» — сердце страницы. Тормоз владельца показан ДВИЖЕНИЕМ:
   искра доходит до ворот и ВСТАЁТ (28…74 % хода) · в это время бьётся кольцо ожидания —
   агент спрашивает · створки мигают трижды · расходятся на 70…74 % · и только потом искра
   идёт дальше. Все четыре анимации одной длины 3,2 с, поэтому доли времени совпадают */
.vitrina.smenilas .znak-vorota .cherez-vorota { animation: znak-cherez-vorota 3.2s linear .35s both; }
.vitrina.smenilas .znak-vorota .stvorka.verh { animation: znak-stvorka-verh 3.2s linear .35s both; }
.vitrina.smenilas .znak-vorota .stvorka.niz { animation: znak-stvorka-niz 3.2s linear .35s both; }
.vitrina.smenilas .znak-vorota .kolco-ozhidaniya { animation: znak-kolco 3.2s linear .35s both; }
.vitrina.smenilas .znak-vorota .konets-puti { animation: znak-vspyhnul .6s ease 3.35s both; }

@keyframes znak-vspyhnul { 0% { opacity: 0; } 55% { opacity: 1; } 100% { opacity: 1; } }
@keyframes znak-replika { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes znak-iskra { 0% { opacity: 1; stroke-dashoffset: .08; } 82% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -1; } }
@keyframes znak-svet { 0% { opacity: 0; transform: translateX(26px); } 12% { opacity: .85; } 88% { opacity: .85; } 100% { opacity: 0; transform: translateX(146px); } }
@keyframes znak-volna { 0% { opacity: 0; transform: scaleY(.15); } 45% { opacity: 1; transform: scaleY(1.15); } 100% { opacity: 1; transform: scaleY(1); } }
/* доля пути до ворот — ровно 0,5: штрих длиной .08 упирается передним краем в створки */
@keyframes znak-cherez-vorota {
  0% { opacity: 1; stroke-dashoffset: .08; }
  28%, 74% { opacity: 1; stroke-dashoffset: -.42; }
  100% { opacity: 1; stroke-dashoffset: -1; }
}
@keyframes znak-stvorka-verh {
  0%, 26% { opacity: .5; transform: none; }
  32% { opacity: 1; } 38% { opacity: .2; }
  44% { opacity: 1; } 50% { opacity: .2; }
  56% { opacity: 1; } 64% { opacity: .25; }
  72%, 100% { opacity: .3; transform: translateY(-17px); }
}
@keyframes znak-stvorka-niz {
  0%, 26% { opacity: .5; transform: none; }
  32% { opacity: 1; } 38% { opacity: .2; }
  44% { opacity: 1; } 50% { opacity: .2; }
  56% { opacity: 1; } 64% { opacity: .25; }
  72%, 100% { opacity: .3; transform: translateY(17px); }
}
@keyframes znak-kolco {
  0%, 27% { opacity: 0; r: 8; }
  34% { opacity: .85; r: 9; }
  46% { opacity: 0; r: 17; }
  47% { opacity: 0; r: 8; }
  54% { opacity: .85; r: 9; }
  66% { opacity: 0; r: 17; }
  70%, 100% { opacity: 0; r: 8; }
}
.vitrina-nomer { margin: 0; font: 500 12px/1 var(--shr-kod); letter-spacing: .2em; text-transform: uppercase; color: var(--duga); }
/* 🔴 20-09: заголовок ломался по дефису («Приём звонков ИИ-» / «голосом»). Чиним тремя
   способами сразу, чтобы не вернулось: имя услуги без дефиса, в «ИИ‑агентах» дефис
   неразрывный (U+2011), кегль меньше и запас по ширине больше */
.vitrina h3 { margin: 0; max-width: 19ch; font: 300 clamp(28px, 2.9vw, 40px)/1.1 var(--shr-zag); color: #fff; text-shadow: 0 0 2px rgba(255, 255, 255, .5), 0 0 26px rgba(143, 208, 255, .45); }
.vitrina-tekst { margin: 0; max-width: 48ch; font-size: 15px; line-height: 1.6; color: var(--tuman); }
/* 3: правая карточка была наполовину пуста. Заполняем смыслом, а не воздухом */
.vitrina-blok { max-width: 46ch; display: flex; flex-direction: column; gap: 8px; }
.vitrina-podpis { margin: 0; font: 500 10px/1 var(--shr-kod); letter-spacing: .24em; text-transform: uppercase; color: var(--ten); }
.vitrina-blok ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.vitrina-blok li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.5; color: var(--led); }
.vitrina-blok li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%;
  background: var(--duga); box-shadow: 0 0 8px rgba(143, 208, 255, .9);
}
.vitrina-gde { margin: 0; font-size: 15px; line-height: 1.5; color: var(--tuman); }
.tsena {
  align-self: flex-start; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(207, 234, 255, .45);
  font: 500 12px/1 var(--shr-kod); letter-spacing: .08em; color: var(--yadro); box-shadow: 0 0 18px rgba(143, 208, 255, .18);
}
.vitrina-blik {
  position: absolute; left: 0; top: 0; width: 40%; height: 2px; opacity: 0;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, #fff, rgba(143, 208, 255, .6) 35%, transparent 70%);
}
.vitrina.smenilas .smena { animation: iz-tumana .8s var(--plavno) both; }
.vitrina.smenilas .vitrina-znak { animation: znak-vhod .9s var(--plavno) both; }
.vitrina.smenilas .vitrina-blik { animation: probeg 1.3s cubic-bezier(.3, .1, .2, 1) both; }
@keyframes iz-tumana { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes znak-vhod { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

/* ---------- сундук: чего я не обещаю ---------- */
/* 🔴 20-09: пунктов стало четыре (добавился «где живут ваши данные»), и при трёх колонках
   четвёртый вставал один в пустом ряду. Две колонки дают 2x2 — ряды полные */
.chestno { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 56px; }
.punkt { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 22px; }
.punkt-rels { display: flex; flex-direction: column; align-items: center; padding-top: 9px; }
.punkt-rels b { width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff, 0 0 20px var(--duga); }
.punkt-rels i { flex: 1; width: 1px; margin-top: 10px; background: linear-gradient(rgba(221, 241, 255, .7), transparent); }
.punkt h3 { margin: 0 0 10px; font: 400 24px/1.25 var(--shr-zag); color: #fff; text-shadow: 0 0 16px rgba(143, 208, 255, .3); }
.punkt p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--tuman); }

/* ---------- форма: черновик, ничего не отправляет ---------- */
.zayavka-setka { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.zayavka-tekst { display: flex; flex-direction: column; gap: 22px; }
.zayavka-tekst .gorizont { --gx: 30%; margin: 4px 0 10px; }
.chernovik { padding: 14px 18px; border-radius: 14px; border: 1px dashed rgba(207, 234, 255, .45); font-size: 14px; line-height: 1.5; color: var(--tuman); }
/* 🔴 21-09: метка состояния на первом экране. Сайт выходит на живой адрес, и на него ведёт
   ссылка со стороны — человек должен сразу видеть, что сайт в работе, а форма молчит.
   Вид намеренно спокойный: пунктир янтаря, как у метки «в разработке» у услуг, тот же язык.
   Это не ошибка (ошибки красные и сплошные) и не баннер согласия (ни кнопок, ни выбора).
   Интро лежит выше по слою (z-index 100), поэтому кино метка не перекрывает */
.sostoyanie {
  margin: 0; align-self: center; padding: 7px 16px; border-radius: 999px;
  border: 1px dashed rgba(255, 196, 120, .7); background: rgba(255, 176, 80, .12);
  color: #FFD9A8; font: 500 12px/1.4 var(--shr-kod); letter-spacing: .06em;
  text-shadow: 0 1px 10px rgba(2, 5, 11, .8);
}
/* честное продолжение у выключенной кнопки: без адресов, но и не в пустоту */
.poka-molchit { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ten); }
.chernovik b { color: var(--led); }
.kontakty { display: flex; flex-direction: column; gap: 14px; margin: 6px 0 0; padding: 0; }
.kontakty div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: center; }
.kontakty dt { font: 500 11px/1 var(--shr-kod); letter-spacing: .2em; color: var(--ten); }
.kontakty dd { margin: 0; color: var(--led); }
.zayavka { display: flex; flex-direction: column; gap: 22px; padding: clamp(22px, 3vw, 40px); }
.pary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.pole { display: flex; flex-direction: column; gap: 8px; }
.pole label { font-size: 13px; color: var(--tuman); }
.vvod-pole {
  width: 100%; min-height: 50px; padding: 13px 16px; border-radius: 13px;
  background: var(--kolodets); border: 1px solid rgba(143, 208, 255, .26); color: var(--led);
  font: 400 15px/1.4 var(--shr-tekst); transition: border-color .25s, box-shadow .25s;
}
.vvod-pole::placeholder { color: #7589A6; }
.vvod-pole:focus { outline: none; border-color: var(--yadro); box-shadow: 0 0 0 4px rgba(127, 200, 255, .16), 0 0 28px rgba(127, 200, 255, .35), inset 0 -1px 0 #fff; }
select.vvod-pole {
  -webkit-appearance: none; appearance: none; padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, var(--yadro) 50%), linear-gradient(135deg, var(--yadro) 50%, transparent 50%);
  background-position: calc(100% - 22px) 22px, calc(100% - 16px) 22px; background-size: 6px 6px; background-repeat: no-repeat;
}
select.vvod-pole option { background: #060D1A; color: var(--led); }
textarea.vvod-pole { min-height: 120px; resize: vertical; }
/* 🔴 21-09: рассказ ведёт форму, поэтому места под него больше и метка крупнее.
   Выпадающего списка в форме нет вовсе — он спорил с заголовком, который зовёт рассказать */
.pole-rasskaz > label { font-size: 14px; color: var(--led); letter-spacing: .01em; }
.pole-rasskaz textarea.vvod-pole { min-height: 178px; }
/* кнопки-подсказки: нажал — текст дописался. Тихие, не спорят с кнопкой отправки */
.podskazki-blok { display: flex; flex-direction: column; gap: 10px; }
.podskazki-podpis { margin: 0; font: 500 10px/1 var(--shr-kod); letter-spacing: .22em; text-transform: uppercase; color: var(--ten); }
.podskazki { display: flex; flex-wrap: wrap; gap: 8px; }
.podskazka {
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--liniya2); background: rgba(143, 208, 255, .05); color: var(--tuman);
  font: 500 13px/1.2 var(--shr-tekst); text-align: left;
  transition: color .25s, background .25s, border-color .25s;
}
.podskazka:hover { color: #fff; background: rgba(143, 208, 255, .12); border-color: var(--liniya); }
.podskazki-hvost { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ten); }
/* обещание честного ответа — у кнопки, а не в подвале. Срока ОТВЕТА здесь нет нарочно */
.otvet-chestno {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 18px; border-radius: 14px;
  border: 1px solid var(--liniya2); border-left: 2px solid rgba(143, 208, 255, .55);
  background: rgba(10, 24, 46, .5);
}
.otvet-chestno ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.otvet-chestno li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--led); }
.otvet-chestno li::before {
  content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%;
  background: var(--duga); box-shadow: 0 0 7px rgba(143, 208, 255, .9);
}
.soglasie { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 13px; line-height: 1.5; color: var(--tuman); }
.soglasie input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--duga); }
/* 🔴 21-09: кнопка ожила — она больше не выключена. Отправки по-прежнему нет: по нажатию
   человек получает правду и свой текст обратно. Полупрозрачность и «нельзя» сняты */
.pole-beda { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: #FFC49A; }
.vvod-pole[aria-invalid="true"] { border-color: rgba(255, 176, 120, .75); box-shadow: 0 0 0 1px rgba(255, 176, 120, .35); }
/* возврат текста вместо формы: то же стекло, чтобы не читалось как ошибка */
.vozvrat { display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 3vw, 34px); }
.vozvrat[hidden] { display: none; }
.vozvrat-glavnoe { margin: 0; font: 300 clamp(22px, 2.2vw, 28px)/1.2 var(--shr-zag); color: #fff; }
.vozvrat-tekst { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tuman); }
.vozvrat textarea { min-height: 190px; resize: vertical; }
.vozvrat-knopki { display: flex; flex-wrap: wrap; gap: 10px; }
.vozvrat-knopki .knopka { min-height: 46px; padding: 0 20px; font-size: 14px; }

/* ---------- подвал ---------- */
.podval { padding: clamp(48px, 6vw, 80px) 0 40px; background: var(--noch); }
.podval-ryad {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px;
  padding-top: 28px; border-top: 1px solid var(--liniya2);
  font-size: 14px; color: var(--ten);
}
.povtor { min-height: 44px; padding: 0 18px; font-size: 13px; }

/* ---------- узкие экраны ---------- */
@media (max-width: 1020px) {
  .menyu { display: none; }
  .burger { display: grid; }
  .razdel-shapka { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .razdel-shapka > .abzats { justify-self: start; padding-bottom: 0; }
  .gorizont { margin-top: 4px; }
  .imya-shagi { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .imya-svg .dorozhki, .imya-svg .iskry, .imya-svg .tok { display: none; }   /* кадр ближе к буквам — дорожкам к шагам некуда вести */
  .progon-setka, .schet-setka, .zayavka-setka, .chestno { grid-template-columns: minmax(0, 1fr); }
  /* 🔴 20-09: узлы складываются СТОЛБИКОМ. В четыре колонки на узком экране имя шага
     («АВТОМАТИЗАЦИЯ») в плитку не влезает, а резать его до нечитаемого — обман.
     Дорожка поворачивается вместе с ними и так же лежит ПОД плитками: видна в просветах,
     буквы не пересекает. Проценты те же, потому что зазор даётся полями, а не gap */
  .rels { grid-template-columns: minmax(0, 1fr); }
  .etap { margin-inline: 0; margin-block: 9px; }
  .rels-liniya { left: calc(50% - 1px); right: auto; top: 12.5%; bottom: 12.5%; width: 1px; height: auto; }
  .rels-liniya i {
    left: -1px; top: 0; width: 3px; height: var(--hod, 75%);
    background: linear-gradient(180deg, rgba(143, 208, 255, .5), #F0F9FF);
  }
  .paket { left: calc(50% - 8px); top: calc(12.5% + var(--hod, 75%) - 8px); }
  .paket::before { display: none; }       /* хвост нарисован горизонтальным; в столбике врёт */
  /* услуги на телефоне и планшете: витрины нет, выбранная раскрывается на месте */
  .uslugi { grid-template-columns: minmax(0, 1fr); }
  .vitrina { display: none; }
  .usluga.vybrana .usluga-opis { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 0 0 24px 62px; }
  .usluga-dayot { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
  .usluga-dayot li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--led); }
  .usluga-dayot li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--duga); box-shadow: 0 0 7px rgba(143, 208, 255, .9); }
  .usluga-opis p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tuman); }
  .usluga.vybrana .usluga-strelka { transform: rotate(90deg); }
}
@media (max-width: 640px) {
  .shapka-zapros { display: none; }
  .shapka-ryad { height: 64px; }
  .marka img { height: 52px; margin-left: -8px; }
  .zagolovok { font-size: clamp(36px, 10.4vw, 44px); }
  .knopki { width: 100%; }
  .knopki .knopka { flex: 1 1 100%; }
  .imya-shagi, .chestno, .pary { grid-template-columns: minmax(0, 1fr); }
  .usluga.vybrana .usluga-opis { padding-left: 0; }
  .usluga-knopka { grid-template-columns: 38px minmax(0, 1fr) 22px; }
  .pusk { flex: 1 1 100%; margin-left: 0; }
  .konsol-tekst { padding: 16px 14px; font-size: 11px; }
  .kontakty div { grid-template-columns: 96px minmax(0, 1fr); }
  .gz-luchi { height: 220px; }
}

/* ---------- кому движение противопоказано — сразу сайт, без анимаций ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .poyav-zhdyot { opacity: 1; translate: none; }
}

/* ---------- языки: переключатель в шапке и подсказка после интро (20-09) ----------
   Переключатель тихий — это не кнопка действия, а указатель, где ты сейчас. Виден всегда,
   в том числе на телефоне: при ≤640px «Запросить расчёт» из шапки уходит, а он остаётся. */
.yazyki {
  display: flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: 999px;
  border: 1px solid var(--liniya2); background: rgba(143, 208, 255, .05);
}
.yazyk {
  display: grid; place-items: center; min-width: 38px; min-height: 30px; padding: 0 9px;
  border-radius: 999px; text-decoration: none;
  font: 600 12px/1 var(--shr-tekst); letter-spacing: .06em;
  color: var(--ten); transition: color .25s, background .25s, box-shadow .3s;
}
.yazyk:hover { color: var(--led); background: rgba(143, 208, 255, .1); }
.yazyk[aria-current="true"] {
  color: #041022; background: linear-gradient(180deg, #F1F9FF, #A6DAFF);
  box-shadow: 0 0 18px rgba(143, 208, 255, .45);
}
.yazyk[aria-current="true"]:hover { color: #041022; }

/* подсказка: одна строка внизу экрана, выезжает снизу. Внизу — потому что первый экран
   занят заголовком, а перекрывать его сразу после кино значит ставить вторую стену.
   Показывается ТОЛЬКО когда определённый язык не совпал с языком страницы, и один раз:
   выбор и крестик запоминаются в localStorage (sajt.js, обязательно в try/catch). */
.yaz-podskazka {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-top: 1px solid var(--liniya2);
  background: rgba(8, 20, 39, .93);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 -18px 60px rgba(2, 6, 14, .55);
  transform: translateY(110%);
  transition: transform .6s var(--plavno);
}
.yaz-podskazka.vyehala { transform: none; }
.yaz-podskazka-ryad {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px;
  padding-block: 12px;
}
.yaz-podskazka-tekst { flex: 1 1 240px; font-size: 14px; line-height: 1.5; color: var(--tuman); }
.yaz-podskazka-da { min-height: 40px; padding: 0 18px; font-size: 13px; }
.yaz-zakryt {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: 999px; border: 1px solid var(--liniya2);
  background: transparent; color: var(--ten); cursor: pointer;
  transition: color .25s, border-color .25s, background .25s;
}
.yaz-zakryt:hover { color: var(--led); border-color: var(--liniya); background: rgba(143, 208, 255, .08); }
@media (max-width: 560px) {
  /* на телефоне строка переносится, кнопка и крестик встают в один ряд под текстом */
  .yaz-podskazka-tekst { flex: 1 1 100%; }
  .yaz-podskazka-da { flex: 1 1 auto; }
}

/* ---------- правовая страница: только текст, без сцены и без кино ---------- */
.tekstovaya { padding: calc(96px + env(safe-area-inset-top, 0px)) 0 clamp(48px, 6vw, 88px); background: var(--glub); }
.tekstovaya .ramka { width: min(760px, 100% - 32px); }
.tekstovaya h1 {
  margin: 10px 0 8px; font: 300 clamp(32px, 4.4vw, 52px)/1.08 var(--shr-zag);
  letter-spacing: -.015em; color: #F7FBFF;
  text-shadow: 0 0 2px rgba(255, 255, 255, .5), 0 0 26px rgba(143, 208, 255, .35);
}
.tekstovaya h2 {
  margin: 44px 0 12px; font: 400 clamp(20px, 2.2vw, 26px)/1.25 var(--shr-zag);
  color: var(--led); letter-spacing: -.01em;
}
.tekstovaya p, .tekstovaya li { color: var(--tuman); font-size: 16px; line-height: 1.7; }
.tekstovaya ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.tekstovaya .obnovleno { font-size: 13px; color: var(--ten); }
/* метка-заполнитель: её нельзя не заметить и нельзя случайно опубликовать */
.zaglushka {
  display: inline-block; padding: 1px 8px; border-radius: 6px;
  border: 1px dashed rgba(255, 196, 120, .75); background: rgba(255, 176, 80, .12);
  color: #FFD9A8; font: 600 13px/1.5 var(--shr-kod); white-space: nowrap;
}
.zametka {
  margin: 24px 0 0; padding: 16px 18px; border-radius: 14px;
  border: 1px solid var(--liniya2); background: var(--panel);
  font-size: 14px; line-height: 1.6; color: var(--tuman);
}
.zametka b { color: var(--led); }
.tekstovaya code {
  padding: 1px 6px; border-radius: 6px;
  border: 1px solid var(--liniya2); background: rgba(6, 15, 32, .6);
  font: 400 13px/1.5 var(--shr-kod); color: var(--duga);
}