/* Страница «Подробнее о продукте» — сцены, а не разделы.

   Читаемость: на тёмном фоне светлый шрифт визуально утончается, поэтому
   основной текст идёт начертанием Light (вес 400), а UltraLight (вес 200)
   остаётся только крупным заголовкам. Прозрачность текста не занижаем.

   Шкала — та же, что на главной:
       десктоп   --p1 9.8vw  --p2 2.7vw  --p4 .84vw  --p5 .6vw
       мобильный --p1 17vw   --p2 5.9vw  --p4 13px   --p5 2vw */

:root {
  --p1: 9.8vw;
  --p2: 2.7vw;
  --p4: 0.84vw;
  --p5: 0.6vw;
  --ink: #fff;
  --bg: #07070a;
  --gutter: 2vw;
  --line: rgba(255, 255, 255, 0.2);
  color-scheme: dark;
}

@media screen and (max-width: 1024px) {
  :root { --p1: 17vw; --p2: 5.9vw; --p4: 13px; --p5: 2vw; }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Helvetica Neue Cyr", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  /* Именно clip, а не hidden: hidden делает body контейнером прокрутки, и тогда
     position:sticky внутри цепляется за него, а не за окно — закрепление сцены
     ломается, и она уезжает вверх. */
  overflow-x: clip;
}

a { color: inherit; }

h1, h2 {
  margin: 0;
  font-weight: 200;
  line-height: 0.92;
  /* UltraLight + кириллица: отрицательный трекинг сливает буквы */
  letter-spacing: 0.02em;
  padding-top: 0.08em;
}

h1 { font-size: var(--p1); }
h2 { font-size: calc(var(--p1) * 0.55); }

h3 { margin: 0; font-size: var(--p2); font-weight: 300; line-height: 1.05; letter-spacing: 0.01em; }

p { margin: 1em 0 0; font-size: var(--p4); line-height: 1.45; max-width: 40em; }

.meta {
  font-size: var(--p5);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
  margin: 0;
  font-weight: 400;
}

.wrap { width: 96vw; margin: 0 auto; }

.pill {
  display: inline-flex; align-items: center; gap: 0.7em;
  padding: 0.8em 1.5em; border: 1px solid var(--ink); border-radius: 5em;
  font-size: var(--p5); letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; background: transparent;
  color: var(--ink); cursor: pointer; font-family: inherit; font-weight: 400;
  transition: background 0.25s ease, color 0.25s ease;
}
.pill:hover, .pill:focus-visible { background: var(--ink); color: var(--bg); }

.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2vw var(--gutter);
  font-size: var(--p5); letter-spacing: 0.12em; text-transform: uppercase;
  background: linear-gradient(180deg, var(--bg) 55%, rgba(7, 7, 10, 0));
}

/* --- Обложка / одно вступление к демо ------------------------------------ */

.cover {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10vh var(--gutter) 5vh;
}
.cover h1 { max-width: 14em; }
.cover .lead {
  margin-top: 2vh;
  font-size: var(--p2);
  font-weight: 300;
  line-height: 1.08;
  max-width: 22em;
}
.scrollcue {
  margin-top: 3.5vh;
  font-size: var(--p5);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
}

.intro .intro__cols {
  margin-top: 3.5vh;
  max-width: 96vw;
}
.intro .scrollcue { margin-top: 3.5vh; }

@media screen and (max-width: 1024px) {
  .cover { padding: 11vh var(--gutter) 5vh; }
  .cover .lead { margin-top: 2.2vh; }
}

/* --- Глава ---------------------------------------------------------------- */

.chapter { padding: 12vh var(--gutter); border-top: 1px solid var(--line); }
.chapter__head { display: flex; align-items: baseline; gap: 1.5vw; flex-wrap: wrap; }
.chapter__num { font-size: var(--p5); letter-spacing: 0.12em; opacity: 0.6; }

.cols {
  margin-top: 5vh; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
  border-top: 1px solid var(--line);
}
.cols > div { padding: 1.2em 1.5em 1.4em 0; border-bottom: 1px solid var(--line); }
.cols b { display: block; font-weight: 400; font-size: var(--p5); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.55; margin-bottom: 0.6em; }
.cols span { font-size: var(--p4); line-height: 1.45; }

/* --- Акт 0: заставка пути заявки ------------------------------------------ */

.act0 {
  min-height: 88svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8vh var(--gutter) 6vh;
  border-top: 1px solid var(--line);
}

.act0 h2 { font-size: var(--p1); }

.act0 .lead {
  margin-top: 1.8vh;
  font-size: var(--p2);
  font-weight: 300;
  line-height: 1.08;
  max-width: 22em;
}

.act0 .scrollcue { margin-top: 3.5vh; }

/* --- Акт 1: четыре канала -------------------------------------------------- */

.act1 { position: relative; height: 280vh; }

.act1__pin {
  position: sticky; top: 0; height: 100svh;
  overflow: hidden;
  display: grid; place-items: center;
}

.channels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2vw;
  width: min(94vw, 1560px);
}

.chan {
  border: 1px solid var(--line);
  border-radius: 1vw;
  padding: 1.6vw;
  background: rgba(255, 255, 255, 0.02);
  opacity: 0;
  transform: translateY(4vh);
  transition:
    opacity 0.45s ease, transform 0.5s ease,
    border-color 0.3s ease, background 0.3s ease;
}

.chan.on { opacity: 1; transform: none; }

/* финал акта: сайт выходит вперёд, остальные каналы отступают */
.chan.lead { border-color: var(--ink); background: rgba(255, 255, 255, 0.07); transform: scale(1.03); }
.chan.dim { opacity: 0.3; }

.chan__tag {
  margin: 0 0 1em;
  font-size: var(--p5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
}

.bubble {
  background: rgba(255, 255, 255, 0.09);
  border-radius: 1em 1em 1em 0.25em;
  padding: 0.9em 1em;
  font-size: var(--p4);
  line-height: 1.4;
}

.bubble--sms { border-radius: 0.5em; background: rgba(255, 255, 255, 0.06); }

.chan__note {
  margin: 1em 0 0;
  font-size: var(--p5);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.4;
}

/* робозвонок: статичная волна */
.wave { display: flex; align-items: center; gap: 0.3em; height: 3.4em; }
.wave i { width: 0.28em; border-radius: 1em; background: rgba(255, 255, 255, 0.55); }
.wave i:nth-child(odd) { height: 34%; }
.wave i:nth-child(even) { height: 72%; }
.wave i:nth-child(3n) { height: 52%; }
.wave i:nth-child(5n) { height: 90%; }

/* мини-строка браузера в плитке сайта */
.chan__browser {
  display: flex; align-items: center; gap: 0.8em;
  padding: 0.5em 0.8em; margin-bottom: 0.9em;
  border: 1px solid var(--line); border-radius: 0.5em;
  font-size: var(--p5); opacity: 0.75;
}

.act1__caption {
  position: absolute;
  bottom: 9vh; left: var(--gutter); right: var(--gutter);
  margin: 0;
  text-align: center;
  font-size: var(--p2);
  font-weight: 300;
  line-height: 1;
  opacity: 0;
  transform: translateY(1.5vh);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.act1__caption.on { opacity: 1; transform: none; }

@media screen and (max-width: 1024px) {
  .act1 { height: 240vh; }
  .channels { grid-template-columns: 1fr 1fr; gap: 3vw; }
  .chan { border-radius: 2.5vw; padding: 4vw; }
  .act1__caption { bottom: 6vh; }
}

/* --- Один stage: сайт → Telegram → CRM на одном экране --------------------

   Копия сайта на нашем домене — можно прокручивать и заполнять поля.
   Уведомление и CRM живут в той же рамке: не отдельные sticky-секции. */

.tour__head {
  position: absolute; top: 8vh; left: var(--gutter); right: var(--gutter);
  display: flex; gap: 1.2vw; align-items: baseline;
  font-size: var(--p5); letter-spacing: 0.12em; text-transform: uppercase;
  pointer-events: none; z-index: 5;
}
.tour__dots { display: inline-flex; gap: 0.45em; }
.tour__dots i { width: 0.62em; height: 0.62em; border-radius: 50%; background: rgba(255,255,255,.22); }

body.stage-on .bar { opacity: 0; pointer-events: none; }

.stage { position: relative; height: 1200vh; }
.stage__pin {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  z-index: 70;
  background: #141519;
}

.stage__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 0;
  border-radius: 0;
}

.stage__chrome {
  flex: none;
  display: flex; align-items: center; gap: 0.9em;
  height: 36px;
  padding: 0 14px;
  background: #1c1c1e;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  color: #fff;
}
.stage__url { opacity: 0.55; letter-spacing: 0.04em; }
.stage__note {
  margin-left: auto;
  opacity: 0.45;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
}

.stage__viewport {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #fff;
}

.stage__deck {
  display: flex;
  width: 200%;
  height: 100%;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
.stage__panel {
  flex: 0 0 50%;
  width: 50%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.stage__panel--site iframe {
  display: block; width: 100%; height: 100%; border: 0; background: #fff;
  pointer-events: none;
}
.stage__panel--crm {
  background: #141414;
}

.stage__caption {
  position: absolute;
  left: 50%;
  bottom: 4.5%;
  z-index: 7;
  width: min(34em, 72%);
  padding: 1.05em 1.25em 1.15em;
  transform: translateX(-50%);
  text-align: left;
  pointer-events: none;
  color: #fff;
  background: rgba(18, 18, 20, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.15em;
  box-shadow: 0 1.2em 3em rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.stage__caption-kicker {
  margin: 0 0 0.4em;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
  max-width: none;
}
.stage__caption-title {
  margin: 0;
  font-size: clamp(16px, 1.45vw, 22px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
  max-width: none;
}
.stage__caption-sub {
  margin: 0.4em 0 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  opacity: 0.68;
  max-width: none;
}

/* Уведомление — поверх сайта внутри той же рамки */
.macos {
  position: absolute;
  top: 1.2em;
  right: 1.2em;
  z-index: 5;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.85em;
  align-items: center;
  width: min(72%, 360px);
  padding: 0.85em 0.95em;
  border-radius: 1.15em;
  background: rgba(40, 40, 44, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 1.2em 3.2em rgba(0, 0, 0, 0.45),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  opacity: 0;
  transform: translateY(-18px) scale(0.96);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
  color: #fff;
}
.macos.on { opacity: 1; transform: none; }

.macos__icon {
  width: 38px; height: 38px;
  border-radius: 9px;
  display: block;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.25);
}

.macos__text { min-width: 0; }
.macos__top {
  display: flex; justify-content: space-between; gap: 0.8em;
  align-items: baseline;
}
.macos__top strong {
  font-size: 0.92em; font-weight: 600; letter-spacing: 0;
  text-transform: none; line-height: 1.25;
}
.macos__top time {
  flex: none;
  font-size: 0.72em;
  opacity: 0.55;
  letter-spacing: 0;
  text-transform: none;
}
.macos__text p {
  margin: 0.15em 0 0;
  font-size: 0.88em;
  font-weight: 400;
  line-height: 1.3;
  opacity: 0.92;
  letter-spacing: 0;
  text-transform: none;
  max-width: none;
}

.macos__avatar {
  width: 2.1em; height: 2.1em;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(145deg, #5b8cff, #2a5bd7);
  font-size: 0.85em;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.crm {
  width: 100%;
  height: 100%;
  display: flex;
  background: #141414;
  color: #ededed;
  font-family: Inter, "SF Pro Text", -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

.tw-nav {
  flex: none;
  width: 220px;
  padding: 12px 10px;
  background: #191919;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px;
}
.tw-nav__ws {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px 14px;
  font-weight: 500;
}
.tw-nav__mark {
  width: 20px; height: 20px; border-radius: 6px;
  display: grid; place-items: center;
  background: #1961ed;
  font-size: 11px; font-weight: 600;
}
.tw-nav__search {
  margin: 0 4px 14px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #8a8a8a;
  font-size: 12px;
}
.tw-nav__sec {
  margin: 0 8px 6px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6f6f6f;
  max-width: none;
}
.tw-nav__item {
  display: block;
  padding: 7px 10px;
  border-radius: 8px;
  color: #bdbdbd;
}
.tw-nav__item.on {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.tw-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #141414;
}
.tw-top {
  flex: none;
  padding: 10px 16px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.tw-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
}
.tw-views {
  display: flex; gap: 16px;
  font-size: 13px;
  color: #8a8a8a;
}
.tw-views .on {
  color: #fff;
  box-shadow: inset 0 -2px 0 #1961ed;
  padding-bottom: 6px;
}
.tw-tools {
  position: absolute;
  right: 16px;
  top: 14px;
  font-size: 12px;
  color: #7a7a7a;
}
.tw-main { position: relative; }

.crm__board {
  flex: 1;
  display: flex;
  gap: 8px;
  padding: 12px 12px 16px;
  overflow-x: auto;
  overflow-y: hidden;
  background: #141414;
}

.crm-col {
  flex: 0 0 236px;
  min-width: 236px;
  display: flex; flex-direction: column; gap: 8px;
  max-height: 100%;
}
.crm-col__head {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 4px 2px;
  font-size: 13px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: #d6d6d6;
}
.crm-col__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--col, #6b6b6b);
}
.crm-col__count {
  margin-left: auto;
  font-weight: 500;
  font-size: 12px;
  color: #8a8a8a;
}
.crm-col__list {
  display: flex; flex-direction: column; gap: 8px;
  overflow: hidden;
  padding: 2px;
  min-height: 8em;
  border-radius: 8px;
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
.crm-col--target .crm-col__list {
  background: rgba(25, 97, 237, 0.12);
  box-shadow: inset 0 0 0 1px rgba(25, 97, 237, 0.35);
}
.crm-col--incoming .crm-col__list {
  background: rgba(25, 97, 237, 0.2);
  box-shadow: inset 0 0 0 1.5px rgba(94, 144, 242, 0.75);
}
.crm-col--incoming .crm-col__head span:first-of-type {
  color: #9ec0ff;
}

.crm-card--anton.is-ghost {
  opacity: 0 !important;
}
.crm-card--fly {
  position: fixed;
  z-index: 90;
  margin: 0;
  pointer-events: none;
  box-shadow:
    0 1em 2.4em rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(25, 97, 237, 0.85);
  will-change: transform;
}

.crm-card {
  background: #2b2b2b;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 10px 11px 11px;
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}
.crm-card__row {
  display: flex; align-items: center; gap: 8px;
}
.crm-card__ava {
  flex: none;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: #3d4f73;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
}
.crm-card__name {
  margin: 0;
  font-weight: 500;
  color: #f2f2f2;
  font-size: 13px;
  max-width: none;
}
.crm-card__meta {
  margin: 6px 0 0;
  font-size: 12px;
  color: #9a9a9a;
  max-width: none;
}
.crm-card__tags {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 8px;
}
.crm-card__badge {
  display: inline-flex;
  padding: 0.18em 0.5em;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: #cfcfcf;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
}
.crm-card__badge--work { background: rgba(25, 97, 237, 0.2); color: #8eb4ff; }
.crm-card__badge--wait { background: rgba(232, 176, 70, 0.16); color: #e8b046; }
.crm-card__badge--doc { background: rgba(139, 124, 246, 0.18); color: #c4b5fd; }
.crm-card__badge--bank { background: rgba(62, 207, 142, 0.16); color: #6ee7b7; }
.crm-card__badge--later { background: rgba(255, 255, 255, 0.08); color: #b0b0b0; }
.crm-card__badge--owner { background: rgba(248, 113, 113, 0.16); color: #fca5a5; }
.crm-card__badge--due { background: rgba(232, 176, 70, 0.16); color: #e8b046; }
.crm-card__badge--due.is-late {
  background: rgba(248, 113, 113, 0.2);
  color: #fca5a5;
}
.crm-card__badge--pay {
  background: rgba(52, 211, 153, 0.18);
  color: #6ee7b7;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(.16, 1, .3, 1);
}
.crm-card__badge--pay.on {
  opacity: 1;
  transform: none;
}
.crm-card--anton {
  opacity: 0;
  transform: translateY(8px);
  box-shadow: 0 0 0 1px rgba(25, 97, 237, 0.7);
  transition:
    opacity 0.35s ease,
    transform 0.45s cubic-bezier(.16, 1, .3, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}
.crm-card--anton.on {
  opacity: 1;
  transform: none;
}
.crm-card--anton.is-late {
  border-color: rgba(248, 113, 113, 0.85);
  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.9), 0 0 18px rgba(248, 113, 113, 0.18);
}
.crm-card--anton.is-ok {
  border-color: rgba(52, 211, 153, 0.55);
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.45);
}
.crm-card.is-paying {
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.55);
}

.stage__toast {
  position: absolute;
  top: 1.1em;
  left: 50%;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 0.7em;
  width: min(34em, 86%);
  padding: 0.85em 1.05em;
  transform: translate(-50%, -12px);
  opacity: 0;
  pointer-events: none;
  color: #fff;
  background: rgba(42, 18, 20, 0.94);
  border: 1px solid rgba(248, 113, 113, 0.45);
  border-radius: 0.95em;
  box-shadow: 0 1em 2.4em rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(.16, 1, .3, 1);
}
.stage__toast.on {
  opacity: 1;
  transform: translate(-50%, 0);
}
.stage__toast-mark {
  flex: none;
  width: 1.55em;
  height: 1.55em;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(248, 113, 113, 0.25);
  color: #fca5a5;
  font-weight: 700;
  font-size: 0.85em;
}
.stage__toast p {
  margin: 0;
  font-size: 0.92em;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}

.stage__pays {
  position: absolute;
  right: 1.2em;
  bottom: 22%;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.55em;
  pointer-events: none;
}
.stage__pay-chip {
  padding: 0.55em 0.85em;
  border-radius: 999px;
  background: rgba(16, 40, 30, 0.92);
  border: 1px solid rgba(52, 211, 153, 0.4);
  color: #a7f3d0;
  font-size: 0.92em;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 0.6em 1.6em rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  animation: pay-pop 0.55s cubic-bezier(.16, 1, .3, 1) forwards;
}
.stage__pay-chip span {
  opacity: 0.65;
  font-weight: 500;
  margin-right: 0.45em;
}
@keyframes pay-pop {
  to { opacity: 1; transform: none; }
}

.stage__pay-total {
  position: absolute;
  right: 1.2em;
  bottom: 12%;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15em;
  padding: 0.7em 1em;
  border-radius: 0.9em;
  background: rgba(18, 18, 20, 0.92);
  border: 1px solid rgba(52, 211, 153, 0.35);
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.4s ease;
}
.stage__pay-total.on {
  opacity: 1;
  transform: none;
}
.stage__pay-total span {
  font-size: 0.72em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
}
.stage__pay-total strong {
  font-size: 1.25em;
  font-weight: 650;
  color: #6ee7b7;
  letter-spacing: 0;
  text-transform: none;
}

.stage__finance {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 9;
  width: min(26em, 86%);
  padding: 1.35em 1.4em 1.25em;
  transform: translate(-50%, -42%) scale(0.96);
  opacity: 0;
  pointer-events: none;
  color: #fff;
  background: rgba(18, 18, 20, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1.15em;
  box-shadow: 0 1.4em 3.2em rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(.16, 1, .3, 1);
}
.stage__finance.on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.stage__finance-kicker {
  margin: 0 0 0.35em;
  font-size: 0.72em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.5;
}
.stage__finance h3 {
  margin: 0 0 0.9em;
  font-size: 1.25em;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.stage__finance ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55em;
}
.stage__finance li {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  padding: 0.45em 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.92em;
  letter-spacing: 0;
  text-transform: none;
}
.stage__finance li span { opacity: 0.65; }
.stage__finance li strong { font-weight: 600; color: #e8e8e8; }
.stage__finance li.stage__finance-hl strong {
  font-family: Inter, "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-synthesis: weight;
  font-weight: 700;
  color: #6ee7b7;
  -webkit-text-fill-color: #6ee7b7;
  font-size: 1.12em;
  letter-spacing: 0.01em;
}
.stage__finance-note {
  margin: 0.95em 0 0;
  font-size: 0.78em;
  line-height: 1.4;
  opacity: 0.55;
  letter-spacing: 0;
  text-transform: none;
}

@media screen and (max-width: 1024px) {
  .stage { height: 1080vh; }
  .tw-nav { display: none; }
  .crm-col { flex-basis: 200px; min-width: 200px; }
  .macos { width: min(88%, 340px); right: 0.7em; top: 0.8em; }
  .stage__caption { width: min(92%, 28em); bottom: 3.5%; }
  .stage__pays, .stage__pay-total { right: 0.7em; }
  .stage__pay-total { bottom: 14%; }
}

/* --- Уведомление (legacy helpers) ---------------------------------------- */

/* Форма и уведомление стоят рядом обычной сеткой: сцена больше не
   закрепляется, и абсолютное позиционирование уведомлению не нужно. */

.flow {
  margin-top: 5vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3vw;
  align-items: start;
}

.demo { display: grid; gap: 0.9em; max-width: 24em; }

.demo label {
  display: grid; gap: 0.35em;
  font-size: var(--p5); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6;
}

.demo input, .demo select {
  font: inherit; font-size: var(--p4);
  padding: 0.75em 0.9em;
  border: 1px solid var(--line); border-radius: 0.4em;
  background: transparent; color: inherit;
}

.demo input:focus-visible, .demo select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.demo option { color: #000; }

@media screen and (max-width: 1024px) {
  .flow { grid-template-columns: 1fr; gap: 6vh; }
}

.toast {
  width: min(30vw, 380px);
  background: rgba(28, 28, 32, 0.92);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 1em; padding: 1em 1.1em;
  opacity: 0; transform: translateX(120%);
  transition: opacity .45s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
.toast.on { opacity: 1; transform: none; }
.toast__head { display: flex; justify-content: space-between; font-size: var(--p5); letter-spacing: .1em; text-transform: uppercase; opacity: .6; margin-bottom: .7em; }
.toast dl { margin: 0; display: grid; grid-template-columns: auto minmax(0,1fr); gap: .35em .9em; font-size: var(--p4); }
.toast dt { opacity: .5; }
.toast dd { margin: 0; }

@media screen and (max-width: 1024px) { .toast { width: 80vw; right: 4vw; } }

/* --- CRM ------------------------------------------------------------------ */

.stages { display: flex; flex-wrap: wrap; gap: .5vw; margin-top: 4vh; }
.stages button {
  font: inherit; font-weight: 400; font-size: var(--p5); letter-spacing: .06em; text-transform: uppercase;
  padding: .7em 1em; border: 1px solid var(--line); border-radius: 5em;
  background: transparent; color: inherit; cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.stages button:hover { border-color: var(--ink); }
.stages button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.stagebox { margin-top: 2vh; border: 1px solid var(--line); border-radius: 1vw; padding: 2vw; }
.stagebox h3 { font-weight: 300; }
.stagebox .robot { margin-top: 1.2em; padding-top: 1em; border-top: 1px solid var(--line); font-size: var(--p5); letter-spacing: .06em; text-transform: uppercase; opacity: .7; }

/* --- Финал: заголовок и заявка ------------------------------------------- */

.close {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 16vh 0 4vh;
  background: #07070a;
}
.close h2 {
  margin: 0;
  text-align: center;
  font-weight: 200;
  font-size: clamp(2.4rem, 7.6vw, 8.25rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
}
.close__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60vw;
  height: 16vh;
  margin-bottom: 1vw;
  border: 1px solid #fff;
  border-radius: 9vw;
  color: #fff;
  background: transparent;
  text-decoration: none;
  text-transform: uppercase;
  font-family: inherit;
  font-weight: 200;
  font-size: clamp(1.6rem, 4.2vw, 4.8rem);
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  transition: 0.3s ease;
}
.close__cta:hover,
.close__cta:focus-visible {
  background: #fff;
  color: #07070a;
}

@media screen and (max-width: 1024px) {
  .close { padding: 14vh 0 8vh; }
  .close h2 { font-size: 11vw; }
  .close__cta {
    width: 90vw;
    font-size: 6.2vw;
    height: 14vh;
    margin-bottom: 12vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mac__lid { transition: none; }
}