/* ═══════════════════════════════════════════════════════════
   ПРОЛОНГА — лендинг
   «Предметная глубина»: каждый блок — не плоская сетка,
   а сцена с объёмом.

   Правило (§«Про 3D» в LANDING.md):
   объём допустим, только если он показывает то, что мы продаём.
   Поэтому в глубине живут счёт, договор, акт, карточки подписок и
   шаги процесса — а не абстрактные сферы и кольца.

   Первый экран намеренно оставлен плоским, без 3D-подачи.
   ═══════════════════════════════════════════════════════════ */

:root {
  --bg:            #FFFFFF;
  --bg-muted:      #F5F6F8;
  --bg-dark:       #14161A;
  --text:          #14161A;
  --text-2:        #5C636E;
  --border:        #E4E7EC;
  --accent:        #2563EB;
  --accent-hover:  #1D4ED8;
  --accent-soft:   #EFF4FF;
  --accent-dark:   #60A5FA;
  --ok:            #16A34A;
  /* Красный — только статус «не работает» на карточках в герое, до переворота. */
  --fail:          #DC2626;

  --border-dark:   #2A2E36;
  --text-dark-2:   #9AA1AC;

  --r:    8px;
  --r-lg: 12px;

  --container: 1200px;
  --gutter: 24px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-fly: cubic-bezier(0.5, 0, 0.15, 1);
  --dur-in: 500ms;
  --dur-hover: 200ms;

  --header-h: 68px;

  /* Глубина сцен. Один набор на всю страницу: блоки должны читаться
     как снятые одной камерой, а не как коллекция разных эффектов. */
  --persp: 1200px;
  --lift: 0 24px 48px -24px rgba(20,22,26,.22), 0 2px 6px rgba(20,22,26,.05);
  --lift-hi: 0 40px 72px -28px rgba(20,22,26,.30), 0 3px 10px rgba(20,22,26,.06);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
  /* clip, а не hidden: hidden на html/body делает страницу скролл-контейнером
     и ломает липкий хедер. Подрезаем только то, что вылезает от перспективы. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 18px;
  line-height: 29px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

.invoice, .fact, .formula, .calc, .sheet, .vinv, .vprice, .vhour__t, .vhour__scale {
  font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.section--dark :focus-visible, .footer :focus-visible { outline-color: var(--accent-dark); }
.form__card :focus-visible { outline-color: var(--accent); }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }

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

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--accent); color: #fff; padding: 10px 16px; border-radius: var(--r);
  transition: top var(--dur-hover) var(--ease);
}
.skip-link:focus { top: 12px; color: #fff; }

/* ─── Сетка ─────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container--narrow { max-width: 860px; }

.section { padding: 120px 0; position: relative; }
.section--muted { background: var(--bg-muted); }
.section--dark { background: var(--bg-dark); color: #fff; }
/* Блок из одного центрированного объекта: общие 120px вокруг него
   превращаются в пустые серые поля — содержимого меньше, чем воздуха. */
.section--tight { padding: 72px 0; }

.center { text-align: center; margin-top: 48px; }

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

.h2 {
  font-size: 40px; line-height: 46px; letter-spacing: -0.01em;
  margin-bottom: 20px;
  position: relative; display: inline-block; padding-bottom: 6px;
}
.h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
  background: var(--accent); border-radius: 2px;
}
.h2.is-in::after, .is-in .h2::after { animation: underline 620ms var(--ease) 180ms forwards; }
@keyframes underline { to { width: 56px; } }
.section--dark .h2::after { background: var(--accent-dark); }

.lead {
  font-size: 18px; line-height: 29px; color: var(--text-2);
  max-width: 62ch; margin-bottom: 48px;
}
.section--dark .lead { color: var(--text-dark-2); }

.note {
  font-size: 14px; line-height: 21px; color: var(--text-2);
  max-width: 66ch; margin-top: 28px;
}

.stub {
  color: var(--text-2);
  background: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(92,99,110,.09) 5px, rgba(92,99,110,.09) 10px);
  padding: 0 2px; border-radius: 3px;
}

.stub-badge {
  display: inline-block; vertical-align: middle;
  font-size: 12px; line-height: 20px; font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase;
  color: #92400E; background: #FEF3C7;
  border: 1px solid #FDE68A; border-radius: 999px;
  padding: 1px 10px; margin-left: 12px;
  position: relative; top: -6px;
}

/* ═══════════════════════════════════════════════════════════
   Слой глубины: общие правила для всех сцен
   ═══════════════════════════════════════════════════════════

   .deep  — контейнер сцены. Перспектива задаётся здесь, поэтому у
            всех детей общая точка схода: блок читается как один кадр,
            а не как набор одинаково подкрученных плиток.
   .r3d   — объект сцены. До появления лежит в глубине и повёрнут,
            в кадре — встаёт на место. Играет один раз.
   .tilt  — объект, который доворачивается за курсором (JS).
   .lyr   — слой внутри объекта: поднят по Z, даёт внутренний параллакс. */

.deep { perspective: var(--persp); perspective-origin: 50% 42%; }
.deep--near { perspective: 900px; }
.deep--far  { perspective: 1800px; }

.r3d {
  transform-style: preserve-3d;
  opacity: 0;
  transform: translate3d(0, 28px, -90px) rotateX(9deg);
}
.r3d.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 620ms var(--ease) var(--rd, 0ms),
              transform 780ms var(--ease) var(--rd, 0ms);
}
/* Сдаётся как карта из колоды */
.r3d--deal { transform: translate3d(-26px, 22px, -150px) rotateY(-24deg) rotateX(5deg); }
/* Откидывается сверху, как крышка */
.r3d--hatch { transform-origin: 50% 0%; transform: rotateX(-72deg) translateZ(-30px); }
/* Приезжает сбоку */
.r3d--left  { transform: translate3d(-60px, 0, -160px) rotateY(22deg); }
.r3d--right { transform: translate3d(60px, 0, -160px) rotateY(-22deg); }

.tilt { transform-style: preserve-3d; transition: transform 420ms var(--ease), box-shadow 420ms var(--ease); }
.tilt.is-tilting { transition: transform 90ms linear, box-shadow 420ms var(--ease); }

.lyr   { transform: translateZ(18px); }
.lyr-2 { transform: translateZ(34px); }
.lyr-3 { transform: translateZ(54px); }

/* ─── Кнопки ────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px;
  border: 1px solid transparent; border-radius: var(--r);
  font: inherit; font-size: 16px; font-weight: 600; line-height: 1;
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-hover) var(--ease),
              border-color var(--dur-hover) var(--ease),
              color var(--dur-hover) var(--ease),
              transform var(--dur-hover) var(--ease),
              box-shadow var(--dur-hover) var(--ease);
}

/* Кнопка намеренно плоская: она есть в первом экране,
   а его вид меняться не должен. Объём несут блоки,
   а не элементы управления. */
.btn--primary {
  background: var(--accent); color: #fff;
  position: relative; overflow: hidden;
}
/* Подъёма на hover нет намеренно: кнопка, уезжающая на пиксель из-под
   курсора, теряет наведение у самого края и заставляет курсор мигать
   рукой и стрелкой. Отклик даём цветом — он ничего не двигает. */
.btn--primary:hover {
  background: var(--accent-hover); color: #fff;
}
.btn--primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg); opacity: 0;
}
.btn--primary:hover::after { animation: shine 620ms var(--ease) forwards; }
@keyframes shine {
  from { left: -60%; opacity: 1; }
  to   { left: 130%;  opacity: 1; }
}

.btn--secondary { background: transparent; border-color: var(--border); color: var(--text); }
.btn--secondary:hover { border-color: #C9CFD8; color: var(--text); }
.section--dark .btn--secondary:not(.form__card .btn--secondary) { border-color: var(--border-dark); color: #fff; }
.section--dark .btn--secondary:not(.form__card .btn--secondary):hover { border-color: #414750; color: #fff; }

.btn--text { height: auto; padding: 0; background: none; color: var(--accent); font-weight: 600; }
.btn--text:hover { color: var(--accent-hover); }
.btn--text span { transition: transform var(--dur-hover) var(--ease); }
.btn--text:hover span { transform: translateX(3px); }

.btn--sm { height: 40px; padding: 0 16px; font-size: 15px; }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn--block { width: 100%; height: 52px; }

.btn--tg {
  background: transparent; border-color: var(--border); color: var(--text);
  height: auto; min-height: 44px; padding: 12px 18px;
  font-size: 15px; line-height: 20px; white-space: normal; text-align: left;
  justify-content: flex-start;
}
.btn--tg:hover { border-color: var(--accent); color: var(--accent); }
.btn--tg svg { flex: none; transition: transform var(--dur-hover) var(--ease); }
.btn--tg:hover svg { transform: translate(2px, -2px); }

.btn--tg-solid { background: #29A9EB; color: #fff; border-color: transparent; gap: 10px; }
.btn--tg-solid:hover { background: #1E96D4; color: #fff; }
.btn--tg-solid svg { flex: none; }

/* ─── Карточка ──────────────────────────────────────────── */
/* overflow здесь остаётся видимым: overflow: hidden гасит preserve-3d,
   и все внутренние слои схлопнулись бы в плоскость. Подсветку за
   курсором обрезает скругление на самом псевдоэлементе. */

.card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px;
  transition: border-color var(--dur-hover) var(--ease), box-shadow 420ms var(--ease);
}
.card h3 { font-size: 22px; line-height: 28px; margin-bottom: 10px; }
.card p { color: var(--text-2); }
.card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(37,99,235,.08), transparent 70%);
  opacity: 0; transition: opacity var(--dur-hover) var(--ease);
}
.card:hover::before { opacity: 1; }
.card:hover { border-color: #D3D9E2; box-shadow: var(--lift); }
.card > * { position: relative; }

.fact {
  display: inline-block;
  font-size: 14px; line-height: 20px; font-weight: 600;
  color: var(--accent); background: var(--accent-soft);
  border-radius: 999px; padding: 3px 12px;
  margin-bottom: 18px;
  transition: background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease),
              box-shadow var(--dur-hover) var(--ease);
}
.card:hover .fact { background: var(--accent); color: #fff; box-shadow: 0 8px 18px -8px rgba(37,99,235,.7); }

/* ═══ 1. ХЕДЕР ═══════════════════════════════════════════ */

.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-hover) var(--ease);
}
.header.is-scrolled { border-bottom-color: var(--border); }

.header__inner { display: flex; align-items: center; gap: 32px; height: var(--header-h); }

.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.logo:hover { color: var(--text); }
.logo__mark { flex: none; border-radius: 6px; transition: transform 420ms var(--ease); }
.logo:hover .logo__mark { transform: rotateY(180deg); }
.logo__word { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }

.nav { display: flex; gap: 28px; margin-right: auto; }
.nav a { color: var(--text-2); font-size: 16px; transition: color var(--dur-hover) var(--ease); }
.nav a:hover { color: var(--text); }

.header__actions { display: flex; align-items: center; gap: 12px; }

.tg-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r);
  color: var(--text-2);
  transition: color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease);
}
.tg-icon:hover { color: var(--accent); background: var(--accent-soft); }

/* Иконки каналов стоят плотной группой, чтобы читаться одним блоком,
   а не четырьмя отдельными кнопками рядом с CTA. */
.header__ch { display: flex; align-items: center; gap: 2px; }
.tg-icon--wa:hover  { color: #1FB855; background: rgba(37,211,102,.12); }
.tg-icon--max:hover { color: #7C3AED; background: rgba(139,92,246,.12); }
/* У почты нет фирменного цвета — подсветка нейтральная. */
.tg-icon--mail:hover { color: var(--text); background: var(--bg-muted); }

.btn__short { display: none; }

.burger {
  display: none;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.burger span {
  display: block; width: 20px; height: 2px; background: var(--text); border-radius: 2px;
  transition: transform var(--dur-hover) var(--ease), opacity var(--dur-hover) var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.header__progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--accent), #60A5FA);
  transition: width 90ms linear;
}

/* ═══════════════════════════════════════════════════════════
   2. ПЕРВЫЙ ЭКРАН — плоский; единственная особенность: положение .hero__glow
   ═══════════════════════════════════════════════════════════ */

.hero { padding: 88px 0 120px; position: relative; overflow: hidden; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 64px; align-items: center;
  position: relative; z-index: 1;
}

/* Свечение целиком лежит внутри первого экрана. Раньше оно начиналось
   выше границы секции (top: -220px) и подрезалось её overflow: hidden —
   под хедером получалась резкая горизонтальная кромка. Теперь верх пятна
   опущен ниже линии подреза, и переход к белому идёт самим градиентом.
   Запас в 60px закрывает подъём от scale(1.08) в glowDrift. */
.hero__glow {
  position: absolute; top: 60px; right: -140px;
  width: 820px; height: 820px; pointer-events: none; z-index: 0;
  background:
    radial-gradient(closest-side, rgba(37,99,235,.13), rgba(37,99,235,0) 70%),
    radial-gradient(closest-side, rgba(96,165,250,.10), rgba(96,165,250,0) 70%);
  background-position: 0 0, 30% 40%;
  background-size: 100% 100%, 70% 70%;
  background-repeat: no-repeat;
  animation: glowDrift 18s ease-in-out infinite alternate;
}
@keyframes glowDrift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(-40px, 30px, 0) scale(1.08); }
}

/* Шильдик над заголовком: срок работы и число клиентов.
   Плоский, как и весь первый экран, — только мягкая заливка --accent-soft. */
.hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 20px; padding: 7px 14px;
  background: var(--accent-soft);
  border: 1px solid rgba(37,99,235,.14);
  border-radius: 999px;
  font-size: 14px; line-height: 20px; font-weight: 500;
  color: var(--accent-hover);
}
.hero__badge-dot {
  width: 6px; height: 6px; flex: none;
  border-radius: 50%; background: var(--ok);
}

.hero__h1 { font-size: 56px; line-height: 60px; letter-spacing: -0.02em; margin-bottom: 24px; }
.hero__sub { font-size: 18px; line-height: 29px; color: var(--text-2); max-width: 62ch; margin-bottom: 32px; }

.markers {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  padding-top: 28px; margin-bottom: 36px;
  border-top: 1px solid var(--border);
}
.markers b { display: block; font-size: 18px; line-height: 26px; margin-bottom: 4px; }
.markers span { display: block; font-size: 14px; line-height: 21px; color: var(--text-2); }

.hero__buttons { display: flex; flex-wrap: wrap; gap: 12px; }

.invoice {
  margin: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: 0 24px 48px -24px rgba(20,22,26,.18), 0 2px 6px rgba(20,22,26,.04);
  transition: transform 400ms var(--ease), box-shadow 400ms var(--ease);
}
.invoice:hover {
  transform: translateZ(16px);
  box-shadow: 0 32px 64px -28px rgba(20,22,26,.24), 0 2px 6px rgba(20,22,26,.05);
}
.invoice__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding-bottom: 20px; border-bottom: 1px solid var(--border);
}
.invoice__title { font-size: 20px; font-weight: 600; line-height: 26px; }
.invoice__date { font-size: 14px; line-height: 21px; color: var(--text-2); }
.invoice__logo {
  display: flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; color: var(--text-2);
}
.invoice__logo svg { border-radius: 5px; }

.invoice__cols,
.invoice__row {
  display: grid; grid-template-columns: 1fr 44px 108px; gap: 12px; align-items: center;
}
.invoice__cols {
  padding: 14px 0 6px;
  font-size: 12px; line-height: 18px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-2);
}
.invoice__cols span:nth-child(2), .invoice__cols span:nth-child(3) { text-align: right; }

.invoice__row {
  padding: 11px 0; border-bottom: 1px solid var(--border);
  font-size: 16px; line-height: 24px;
  transition: background var(--dur-hover) var(--ease);
}
.invoice__row:hover { background: var(--accent-soft); }
.invoice__name { display: flex; align-items: center; gap: 9px; }
.invoice__qty, .invoice__sum { text-align: right; }
.invoice__sum { font-weight: 600; }

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.dot--fail { background: var(--fail); }

.invoice__total {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-top: 20px;
}
.invoice__total > span { font-size: 16px; color: var(--text-2); }
.invoice__amount { font-size: 32px; line-height: 38px; letter-spacing: -0.01em; }

.invoice__foot {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 13px; line-height: 20px; color: var(--text-2);
}

.invoice [data-row] { opacity: 0; transform: translateY(8px); }
.invoice.is-built [data-row] {
  animation: rowIn 460ms var(--ease) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes rowIn { to { opacity: 1; transform: none; } }

.invoice.is-fading [data-row] { animation: rowOut 420ms cubic-bezier(0.4, 0, 1, 1) forwards; }
@keyframes rowOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(8px); }
}

.hero3d { perspective: 1400px; perspective-origin: 50% 46%; }

.hero3d__stage { position: relative; transform-style: preserve-3d; will-change: transform; }

.hero3d__floor {
  position: absolute; left: 6%; right: 6%; bottom: -34px; height: 76px;
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(20,22,26,.18), rgba(20,22,26,0) 72%);
  transform: translateZ(-70px);
  opacity: 0;
  transition: opacity 600ms var(--ease) 200ms;
}
.hero3d.is-built .hero3d__floor { opacity: 1; }

.hero3d__cards { position: absolute; inset: 0; transform-style: preserve-3d; }

.vcard {
  position: absolute; left: 0; top: 0;
  width: 240px; height: 164px;
  transform-style: preserve-3d;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--sx), var(--sy), var(--sz)) rotateX(var(--srx)) rotateY(var(--sry));
  transition: transform 860ms var(--ease-fly), opacity 520ms linear var(--lit-d, 0ms);
  will-change: transform, opacity;
}

.vcard[data-vendor="adobe"] { --sx:  42px; --sy: -50px; --sz: 300px; --srx: -6deg; --sry:  14deg; }
.vcard[data-vendor="figma"] { --sx: 218px; --sy: 126px; --sz: 200px; --srx:  5deg; --sry: -16deg; }
.vcard[data-vendor="chatgpt"] { --sx:  48px; --sy: 291px; --sz: 370px; --srx:  9deg; --sry:  11deg; }

.hero3d.is-lit .vcard { opacity: 1; }

.hero3d .vcard.is-docked {
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(.24);
  opacity: 0;
  transition: transform 860ms var(--ease-fly), opacity 280ms linear 580ms;
}

.hero3d.is-done .vcard { transition: transform 260ms var(--ease), opacity 200ms linear; }

.hero3d.is-resetting .vcard,
.hero3d.is-resetting .vcard__flip { transition: none; }

.hero3d.is-done .vcard.is-up {
  transform: translate3d(var(--tx, 0px), var(--hy, 0px), 90px);
  opacity: 1;
}

.vcard__flip {
  position: relative; height: 100%;
  transform-style: preserve-3d;
  transition: transform 560ms var(--ease-fly);
}
.vcard.is-solved .vcard__flip { transform: rotateY(180deg); }

.vcard__face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 32px 64px -28px rgba(20,22,26,.42), 0 2px 8px rgba(20,22,26,.06);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.vcard__face--front { border-color: #F3C9C9; }
.vcard__face--back  { transform: rotateY(180deg); }

.vcard__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.vcard__logo { width: 24px; height: 24px; }
.vcard__logo--narrow { width: 16px; }
.vcard__seats {
  font-size: 12px; line-height: 18px; font-weight: 600; color: var(--text-2);
  background: var(--bg-muted); border-radius: 20px; padding: 1px 9px;
}
.vcard__state {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; line-height: 18px; font-weight: 600;
}
.vcard__state--fail { color: var(--fail); }

.vcard__name { display: block; font-size: 15px; line-height: 21px; margin-bottom: 5px; }
.vcard__line { font-size: 13px; line-height: 19px; color: var(--text-2); margin-top: auto; }
.vcard__ok { margin-top: auto; }
.vcard__ok .vcard__line { margin-top: 0; }
.vcard__line--ok { display: flex; align-items: center; gap: 7px; color: var(--text); }
.vcard__paid { display: block; padding-left: 14px; font-size: 12px; line-height: 18px; color: var(--text-2); }

/* ═══════════════════════════════════════════════════════════
   4. ЧТО ПОЛУЧАЕТ КЛИЕНТ — пункт и его предмет

   Слева шесть пунктов, справа то, что за пунктом стоит: доступы
   команды, счёт, формула цены, комплект документов, час на замену,
   переписка с менеджером. Последствие раскрывается только у
   выбранного пункта — на экране в каждый момент один аргумент.

   3D тут намеренно нет (§«Про 3D» в LANDING.md): сдача шести
   одинаковых карточек из колоды показывала сама себя, а не то,
   что мы продаём. Объём остался там, где он что-то значит.
   ═══════════════════════════════════════════════════════════ */

.value__pick {
  margin-top: 44px;
  display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 32px;
}

/* ─── Список пунктов ─────────────────────────────────────── */

.value__list { display: flex; flex-direction: column; gap: 6px; }

.value__btn {
  position: relative; width: 100%; text-align: left; cursor: pointer;
  padding: 16px 18px 16px 20px;
  border: 1px solid transparent; border-radius: var(--r-lg);
  background: transparent; font: inherit; color: inherit;
  transition: background var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease),
              box-shadow 420ms var(--ease);
}
/* Синяя рейка отмечает выбранный пункт — она же связывает его со сценой */
.value__btn::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px;
  background: var(--accent); border-radius: 2px;
  transform: scaleY(0);
  transition: transform 260ms var(--ease);
}
.value__btn:hover { background: rgba(20,22,26,.03); }
.value__btn[aria-selected="true"] {
  background: var(--bg); border-color: var(--border); box-shadow: var(--lift);
}
.value__btn[aria-selected="true"]::before { transform: scaleY(1); }

.value__btn .fact { margin-bottom: 6px; }
.value__btn[aria-selected="true"] .fact {
  background: var(--accent); color: #fff; box-shadow: 0 8px 18px -8px rgba(37,99,235,.7);
}
.value__name { display: block; font-size: 19px; line-height: 27px; font-weight: 600; }

/* Последствие — то, ради чего пункт вообще есть. Свёрнуто у всех,
   кроме выбранного: 0fr → 1fr даёт раскрытие без замера высоты в JS. */
.value__out {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows 300ms var(--ease), opacity 220ms var(--ease);
}
.value__btn[aria-selected="true"] .value__out { grid-template-rows: 1fr; opacity: 1; }
.value__out > span {
  overflow: hidden;
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 15px; line-height: 23px; font-weight: 600;
}
.value__btn[aria-selected="true"] .value__out > span { padding-top: 10px; }
.value__out > span::before {
  content: ""; flex: none; width: 17px; height: 17px; margin-top: 3px;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5.2 5.2L20 7'/%3E%3C/svg%3E");
}

/* ─── Сцена ──────────────────────────────────────────────── */
/* Панели лежат в одной ячейке грида: высота сцены равна самой высокой
   из шести и не прыгает при переключении. Прятать их через hidden
   нельзя — display: none выключил бы вклад в высоту, поэтому
   visibility: она же убирает погашенную панель из дерева доступности. */

.value__stage {
  position: relative; display: grid;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--bg);
  padding: 34px 36px;
  overflow: hidden;
}
.value__stage::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(520px circle at 82% 0%, rgba(37,99,235,.055), transparent 70%);
}
.value__panel {
  grid-area: 1 / 1; align-self: start; z-index: 1;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 340ms var(--ease), transform 340ms var(--ease), visibility 340ms;
}
.value__panel[data-on] { opacity: 1; visibility: visible; transform: none; }

.value__cap {
  font-size: 12px; line-height: 16px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-2);
  margin-bottom: 18px;
}
.value__note { margin-top: 18px; font-size: 14px; line-height: 22px; color: var(--text-2); }

/* Сцена 1 — доступы команды */
.vseats { display: flex; flex-direction: column; }
.vseat {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: var(--r);
  font-size: 15px; line-height: 22px;
}
.vseat + .vseat { border-top: 1px solid var(--border); border-radius: 0; }
.vseat__ava {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.vseat__who b { display: block; font-weight: 600; }
.vseat__who span { color: var(--text-2); font-size: 13px; line-height: 18px; }
.vseat__ok {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--ok);
}
.vseat--new { background: var(--accent-soft); border-top-color: transparent; border-radius: var(--r); }
.vseat--new .vseat__ava { background: var(--accent); color: #fff; }

/* Сцена 2 — счёт */
.vinv { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.vinv__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--border); background: var(--bg-muted);
}
.vinv__head b { font-size: 16px; }
.vinv__head span { font-size: 13px; color: var(--text-2); }
.vinv__row {
  display: grid; grid-template-columns: minmax(0, 1fr) 54px 110px;
  gap: 12px; align-items: center;
  padding: 12px 20px; font-size: 15px; line-height: 22px;
}
.vinv__row + .vinv__row { border-top: 1px solid var(--border); }
.vinv__row span:nth-child(2) { color: var(--text-2); font-size: 13px; text-align: right; }
.vinv__row span:last-child { text-align: right; font-weight: 600; }
.vinv__total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-top: 1px solid var(--text);
  font-size: 15px; color: var(--text-2);
}
.vinv__total b { font-size: 24px; color: var(--text); }
.vinv__foot { padding: 12px 20px; background: var(--bg-muted); font-size: 13px; line-height: 20px; color: var(--text-2); }

/* Сцена 3 — формула цены */
.vprice { display: flex; align-items: stretch; flex-wrap: wrap; gap: 12px; }
.vprice__b {
  flex: 1 1 150px; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px;
}
.vprice__b span { display: block; font-size: 13px; line-height: 18px; color: var(--text-2); margin-bottom: 4px; }
.vprice__b b { font-size: 22px; line-height: 30px; }
.vprice__b--sum { background: var(--accent-soft); border-color: transparent; }
.vprice__b--sum b { color: var(--accent); }
.vprice__op { align-self: center; font-size: 22px; font-weight: 600; color: var(--text-2); }
.vprice__list { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.vprice__list li {
  position: relative; padding-left: 26px;
  font-size: 15px; line-height: 23px; color: var(--text-2);
}
.vprice__list li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 17px; height: 17px;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5.2 5.2L20 7'/%3E%3C/svg%3E");
}
.vprice__list b { color: var(--text); font-weight: 600; }

/* Сцена 4 — документы */
.vdocs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.vdoc {
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg);
  padding: 16px 16px 18px;
}
.vdoc__sheet {
  height: 92px; border-radius: 6px; background: var(--bg-muted);
  padding: 12px 12px 0; margin-bottom: 14px; overflow: hidden;
}
.vdoc__sheet i { display: block; height: 5px; border-radius: 3px; background: #DDE2EA; margin-bottom: 7px; }
.vdoc__sheet i:nth-child(1) { width: 62%; background: #C6CEDA; }
.vdoc__sheet i:nth-child(4) { width: 78%; }
.vdoc__sheet i:nth-child(5) { width: 44%; }
.vdoc b { display: block; font-size: 16px; line-height: 24px; }
.vdoc span { font-size: 13px; line-height: 20px; color: var(--text-2); }

/* Сцена 5 — час на замену */
.vhour__bar {
  height: 12px; border-radius: 999px; background: var(--bg-muted);
  overflow: hidden; margin: 6px 0 10px;
}
.vhour__bar i { display: block; height: 100%; width: 75%; background: var(--accent); border-radius: 999px; }
.vhour__scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-2); margin-bottom: 26px; }
.vhour__ev { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 16px; padding: 12px 0; }
.vhour__ev + .vhour__ev { border-top: 1px solid var(--border); }
.vhour__t { font-size: 15px; font-weight: 700; color: var(--text-2); }
.vhour__ev--end .vhour__t { color: var(--accent); }
.vhour__ev b { display: block; font-size: 16px; line-height: 24px; }
.vhour__ev span span { font-size: 14px; line-height: 22px; color: var(--text-2); }

/* Сцена 6 — переписка */
.vchat { display: flex; flex-direction: column; gap: 10px; }
.vmsg { max-width: 78%; padding: 11px 15px; border-radius: 16px; font-size: 15px; line-height: 23px; }
.vmsg--in { align-self: flex-start; background: var(--bg-muted); border-bottom-left-radius: 5px; }
.vmsg--out { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.vmsg small { display: block; margin-top: 3px; font-size: 12px; opacity: .62; }

/* ═══════════════════════════════════════════════════════════
   5. КАК ЭТО РАБОТАЕТ — хронология одного дня

   Линия времени вертикальная и с настоящими отметками часов:
   ей есть что кодировать, поэтому она заполняется по скроллу,
   а события загораются по мере прохождения. Из пяти событий
   клиентское одно — это и есть аргумент, показанный, а не
   заявленный. Справа счётчик времени клиента, который не растёт.

   3D тут намеренно нет: веер карточек в глубине показывал не
   процесс, а сам себя (§«Про 3D» в LANDING.md).
   ═══════════════════════════════════════════════════════════ */

.day {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 64px;
  align-items: start; margin-top: 54px;
}

/* ── лента событий ────────────────────────────────────── */
.tl { position: relative; padding-left: 132px; }
/* Низ рельса растворяется: последнее событие — «дальше», и обрубленная
   линия читалась бы как конец процесса, а не как продолжение. */
.tl__rail {
  position: absolute; left: 105px; top: 12px; bottom: 24px; width: 2px;
  background: var(--border);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(180deg, #000 calc(100% - 56px), transparent);
}
.tl__fill {
  position: absolute; left: 0; top: 0; width: 100%; height: 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  transition: height 140ms linear;
}

.ev { position: relative; padding-bottom: 34px; }
.ev:last-child { padding-bottom: 0; }

.ev__time {
  position: absolute; left: -132px; top: -2px; width: 74px; text-align: right;
  font-size: 15px; line-height: 24px; font-weight: 600; color: var(--text-2);
  font-variant-numeric: tabular-nums;
  transition: color 260ms var(--ease);
}
.ev__dot {
  position: absolute; left: -34px; top: 5px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg-muted); border: 2px solid #CBD3DE;
  transition: border-color 260ms var(--ease), background 260ms var(--ease),
              transform 260ms var(--ease);
}
.ev.is-on .ev__time { color: var(--text); }
.ev.is-on .ev__dot { border-color: var(--accent); background: var(--accent); transform: scale(1.14); }
/* Событие клиента крупнее остальных: единственная точка дня, где он участвует. */
.ev--you .ev__dot { width: 18px; height: 18px; left: -36px; top: 3px; }
.ev--done.is-on .ev__dot { border-color: var(--ok); background: var(--ok); }

.ev__who {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 11px 3px 9px; border-radius: 999px;
  font-size: 12px; line-height: 18px; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase;
  border: 1px solid var(--border); color: var(--text-2); background: var(--bg);
  margin-bottom: 9px;
}
.ev__who::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ev--you .ev__who { color: var(--accent); border-color: rgba(37,99,235,.35); background: var(--accent-soft); }
.ev--done .ev__who { color: var(--ok); border-color: rgba(22,163,74,.30); background: rgba(22,163,74,.08); }

.ev h3 { font-size: 20px; line-height: 28px; letter-spacing: -0.01em; margin-bottom: 7px; }
.ev p { color: var(--text-2); font-size: 15px; line-height: 25px; max-width: 62ch; }

/* Сколько это стоит клиенту по времени — главный аргумент блока */
.ev__cost {
  display: inline-block; margin-top: 12px;
  padding: 7px 14px; border-radius: var(--r);
  background: var(--accent); color: #fff;
  font-size: 14px; line-height: 21px; font-weight: 600;
}

.day__note { margin-top: 26px; font-size: 14px; line-height: 22px; color: var(--text-2); }

/* ── счётчик времени клиента: он же не растёт ─────────── */
.meter {
  position: sticky; top: calc(var(--header-h) + 24px);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 26px 24px 24px; box-shadow: var(--lift);
}
.meter__ttl {
  font-size: 12px; line-height: 18px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-2);
}
.meter__num {
  margin-top: 8px; display: flex; align-items: baseline; gap: 8px;
  font-size: 52px; line-height: 58px; font-weight: 600; letter-spacing: -0.03em;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.meter__num u { text-decoration: none; font-size: 19px; line-height: 26px; font-weight: 600; }
.meter__bar { margin-top: 16px; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.meter__bar i { display: block; height: 100%; width: 6%; background: var(--accent); border-radius: 3px; }
.meter__hint { margin-top: 10px; font-size: 13px; line-height: 20px; color: var(--text-2); }
.meter__rest { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.meter__rest dt { font-size: 13px; line-height: 20px; color: var(--text-2); }
.meter__rest dd { margin: 2px 0 14px; font-size: 17px; line-height: 26px; font-weight: 600; }
.meter__rest dd:last-child { margin-bottom: 0; }
.meter__zero { color: var(--ok); }
.meter .btn { margin-top: 20px; width: 100%; }

/* ═══════════════════════════════════════════════════════════
   6. КАТАЛОГ — категории вместо перечня сервисов

   Блок продаёт охват, а не длину списка: шесть плиток по типу
   софта, в каждой четыре узнаваемых имени и счёт остальных
   строкой. Стена из девяноста шести логотипов не читалась —
   ни глазом, ни поиском по странице.
   ═══════════════════════════════════════════════════════════ */

.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 20px; }

.cat { height: 100%; display: flex; flex-direction: column; padding: 28px; }
.cat h3 { font-size: 21px; line-height: 28px; letter-spacing: -0.01em; margin-bottom: 4px; }
.cat__sub { font-size: 15px; line-height: 24px; color: var(--text-2); margin-bottom: 18px; }

.cat__plates { display: flex; flex-wrap: wrap; gap: 8px; }
.cat__chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: var(--r);
  padding: 7px 12px 7px 9px; background: var(--bg);
  font-size: 14px; line-height: 22px; font-weight: 500;
  transition: border-color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease);
}
.cat__chip:hover { border-color: #C6CEDA; box-shadow: 0 6px 14px -10px rgba(20,22,26,.5); }

/* Логотипы приходят с разными viewBox — Figma вытянут по вертикали,
   остальные квадратные. Фиксируем рамку, пропорции держит сам SVG. */
.cat__svg { width: 20px; height: 20px; flex: none; }
.cat__mono {
  width: 20px; height: 20px; flex: none;
  display: grid; place-items: center; border-radius: 5px;
  font-size: 10px; font-weight: 700; line-height: 1;
  user-select: none; -webkit-user-select: none;
}

/* Счёт остального: строка «и ещё 10 других сервисов» вместо цифры
   в кружке — кружок читался как счётчик интерфейса, а не как обещание. */
.cat__more { margin-top: auto; padding-top: 14px; font-size: 14px; line-height: 22px; color: var(--text-2); }

/* Кнопка ведёт в форму и по дороге переносит туда состав плитки.
   Текстовая, а не сплошная: девять сплошных кнопок в сетке спорили бы
   за внимание с единственным сплошным действием страницы — «Оставить заявку». */
.cat__cta { align-self: flex-start; margin-top: 14px; font-size: 15px; }
.cat__more + .cat__cta { margin-top: 10px; }

.catalog__ask {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap;
  margin-top: 24px; padding: 32px;
  border: 1px dashed #C9CFD8; border-radius: var(--r-lg);
  background: #fff;
  transition: border-color var(--dur-hover) var(--ease), box-shadow 420ms var(--ease);
}
.catalog__ask:hover { border-color: var(--accent); box-shadow: var(--lift); }
.catalog__ask h3 { font-size: 22px; line-height: 28px; margin-bottom: 6px; }
.catalog__ask p { color: var(--text-2); max-width: 60ch; }

/* ═══════════════════════════════════════════════════════════
   7. ЦЕНЫ — формула собирается из физических блоков
   ═══════════════════════════════════════════════════════════ */

.formula {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 14px;
  margin-bottom: 52px;
  transform-style: preserve-3d;
}

.fblock {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 18px 24px 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  /* Толщина плитки: два слоя «торца» и мягкая тень под ними */
  box-shadow: 0 4px 0 #E9ECF1, 0 8px 0 #DFE3EA, 0 20px 30px -16px rgba(20,22,26,.28);
  transform: translate3d(0, 18px, -120px) rotateX(16deg);
  opacity: 0;
}
.formula.is-visible .fblock {
  opacity: 1;
  transform: rotateX(6deg);
  transition: opacity 520ms var(--ease) var(--fd, 0ms), transform 700ms var(--ease) var(--fd, 0ms);
}
.fblock__cap {
  font-size: 12px; line-height: 18px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-2);
}
.fblock__val { font-size: 21px; line-height: 30px; font-weight: 600; letter-spacing: -0.01em; }

.fblock--b {
  background: var(--accent); border-color: transparent; color: #fff;
  box-shadow: 0 4px 0 #1B4FD1, 0 8px 0 #17429F, 0 22px 34px -16px rgba(37,99,235,.7);
}
.fblock--b .fblock__cap { color: #C4D6FF; }

.fblock--r { background: var(--accent-soft); border-color: #D8E4FF; }
.fblock--r .fblock__val { color: var(--accent); }

/* Плитку можно «взять в руку»: под курсором она доворачивается
   к зрителю, выходит из плоскости, торец подрастает, тень уходит
   глубже. Включается только после сборки формулы (.is-settled) —
   пока блоки прилетают, курсор в них не вмешивается. */
.formula.is-settled .fblock {
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}
.formula.is-settled .fblock:hover {
  transform: rotateX(0deg) translateZ(30px);
  box-shadow: 0 6px 0 #E9ECF1, 0 12px 0 #DFE3EA, 0 34px 44px -18px rgba(20,22,26,.32);
}
.formula.is-settled .fblock--b:hover {
  box-shadow: 0 6px 0 #1B4FD1, 0 12px 0 #17429F, 0 36px 48px -18px rgba(37,99,235,.75);
}
.formula.is-settled .fblock--r:hover {
  border-color: #C3D5FF;
  box-shadow: 0 6px 0 #DDE7FB, 0 12px 0 #D2DFF8, 0 34px 44px -18px rgba(37,99,235,.34);
}
/* Подпись внутри поднятой плитки чуть подтягивается: разные
   скорости слоёв и дают ощущение толщины, а не наклейки. */
.formula.is-settled .fblock__cap { transition: transform 260ms var(--ease); }
.formula.is-settled .fblock:hover .fblock__cap { transform: translateY(-2px); }

.fsign {
  display: flex; align-items: center;
  font-size: 26px; font-weight: 600; color: var(--text-2);
  opacity: 0; transform: translateZ(-60px);
}
.formula.is-visible .fsign {
  opacity: 1; transform: none;
  transition: opacity 400ms var(--ease) var(--fd, 0ms), transform 400ms var(--ease) var(--fd, 0ms);
}

/* ─── Тип компании и численность ───────────────────────
   Два поля над калькулятором задают стартовый набор: тип компании —
   состав, численность — количество мест. Стоят над карточкой, а не
   отдельным экраном выбора: список должен быть виден сразу, чтобы
   его можно было собрать руками, минуя оба поля. */

.calcteam {
  display: flex; align-items: flex-start; gap: 32px; flex-wrap: wrap;
  margin-bottom: 24px;
}
.calcteam__seg { flex: 1 1 520px; min-width: 0; }
.calcteam__size { flex: none; }

.calcteam__cap {
  display: block; margin-bottom: 12px;
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-2); font-weight: 600;
}

.calcteam__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.calcteam__chip {
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--border); background: #fff;
  font: inherit; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--text);
  cursor: pointer;
  transition: border-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease),
              background var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease);
}
.calcteam__chip:hover { border-color: #C6CEDA; color: var(--accent); }
.calcteam__chip.is-on {
  background: var(--text); border-color: var(--text); color: #fff;
  box-shadow: 0 8px 18px -10px rgba(20,22,26,.8);
}
/* «Соберу сам» — не сегмент, а отказ от него: пунктир отделяет
   его от типов компаний, не пряча. */
.calcteam__chip--own { border-style: dashed; color: var(--text-2); }
.calcteam__chip--own.is-on { border-style: solid; color: #fff; }

/* Поле численности крупнее строчного степпера: это вход, а не правка
   одной строки. */
.calcteam__field { display: flex; align-items: center; gap: 10px; }
.calcteam__field .stepper__val { width: 68px; font-size: 17px; }
.calcteam__field .stepper__val::placeholder { color: var(--text-2); font-weight: 400; }
.calcteam__unit { font-size: 15px; color: var(--text-2); }

.calcteam__hint {
  margin: 10px 0 0; max-width: 34ch;
  font-size: 13px; line-height: 20px; color: var(--text-2);
}
.calcteam__hint b { color: var(--text); font-weight: 600; }

/* ─── Калькулятор ─────────────────────────────────────── */

.calc {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 400px);
  gap: 28px; align-items: start;
  transform-style: preserve-3d;
}

.calc__list {
  /* z-index — чтобы выпадающий список каталога ложился поверх панели итога
     на узких экранах, где карточки идут одна под другой. */
  position: relative; z-index: 2;
  background: #fff;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 28px 32px;
  box-shadow: 0 18px 36px -28px rgba(20,22,26,.3);
}
.calc__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 8px;
}
.calc__head h3 { font-size: 20px; line-height: 28px; }
.calc__reset { font-size: 15px; color: var(--text-2); }
.calc__reset:hover { color: var(--accent); }

/* Первая колонка — значок сервиса. Ширину под него отыгрываем
   у зазоров и у колонки суммы, чтобы подпись «11 400 ₽ за место
   в месяц · дизайнерам · убрать» осталась в одну строку. */
.calc__row {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto 108px;
  gap: 14px; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--border);
  transition: opacity var(--dur-hover) var(--ease);
}
.calc__logo { display: grid; place-items: center; width: 24px; height: 24px; }
.calc__logo .cat__svg,
.calc__logo .cat__mono { width: 22px; height: 22px; }

/* Пустой список — когда человек снял набор или всё удалил. */
.calc__empty {
  padding: 30px 0 26px; text-align: center;
  font-size: 15px; line-height: 24px; color: var(--text-2);
}
.calc__empty b { display: block; margin-bottom: 4px; color: var(--text); font-size: 17px; }

/* Строка из набора помечена: она черновик, а не выбор человека.
   Точка тихая — замечается при сравнении строк, а не кричит. */
.calc__row--preset .calc__name::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: 5px; height: 5px; margin-left: 8px; border-radius: 50%;
  background: var(--accent); opacity: .5;
}
.calc__row:last-child { border-bottom: 0; }
.calc__row:not(.is-on) { opacity: .55; }
.calc__row:not(.is-on):hover { opacity: .8; }

.calc__name { display: block; font-size: 17px; line-height: 24px; font-weight: 600; }
.calc__unit { display: block; font-size: 13px; line-height: 20px; color: var(--text-2); }
.calc__sum {
  text-align: right; font-size: 17px; font-weight: 600; white-space: nowrap;
  transition: color var(--dur-hover) var(--ease);
}
.calc__row.is-bump .calc__sum { color: var(--accent); }

.stepper {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border); border-radius: var(--r);
  background: #fff; overflow: hidden;
}
.stepper__btn {
  width: 38px; height: 40px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 20px; line-height: 1; color: var(--text-2);
  transition: background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
.stepper__btn:hover { background: var(--accent-soft); color: var(--accent); }
.stepper__btn:disabled { opacity: .3; cursor: default; background: none; color: var(--text-2); }
.stepper__btn:active { background: #E0EAFF; }
.stepper__val {
  width: 44px; height: 40px; padding: 0; text-align: center;
  font: inherit; font-size: 16px; font-weight: 600; color: var(--text);
  border: 0; border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  background: transparent; -moz-appearance: textfield;
}
.stepper__val:focus { outline: none; background: var(--accent-soft); }

/* ─── Добавление сервиса из каталога ──────────────────
   Поле-пунктир читается как «здесь можно дописать строку», а не как
   ещё одно поле формы: список сверху — готовый набор, это — добор. */

.calc__add { position: relative; z-index: 3; margin-top: 16px; }

.calc__add-field {
  display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 12px 0 14px;
  border: 1px dashed var(--border); border-radius: var(--r);
  background: var(--bg-muted);
  transition: border-color var(--dur-hover) var(--ease),
              background var(--dur-hover) var(--ease);
}
.calc__add-field:hover { border-color: #C9D2E0; }
.calc__add.is-open .calc__add-field,
.calc__add-field:focus-within {
  border-style: solid; border-color: var(--accent); background: #fff;
}

.calc__add-icon { flex: none; color: var(--text-2); transition: color var(--dur-hover) var(--ease); }
.calc__add.is-open .calc__add-icon, .calc__add-field:focus-within .calc__add-icon { color: var(--accent); }

.calc__add-input {
  flex: 1; min-width: 0; height: 50px; padding: 0;
  border: 0; background: none; font: inherit; font-size: 16px; color: var(--text);
}
.calc__add-input::placeholder { color: var(--text-2); }
.calc__add-input:focus { outline: none; }

.calc__add-clear {
  flex: none; width: 26px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: none; color: var(--text-2);
  transition: background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
.calc__add-clear:hover { background: var(--accent-soft); color: var(--accent); }

.calc__add-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 4;
  max-height: 340px; overflow-y: auto; overscroll-behavior: contain;
  padding: 6px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--lift);
}

/* Буквенная засечка липнет к верху списка: на 96 позициях всегда видно,
   до какой буквы долистал. */
.calc__opt-group {
  /* top: -6px и +6px к верхнему полю — чтобы засечка перекрывала
     внутренний отступ списка, иначе строки просвечивают над ней. */
  position: sticky; top: -6px; z-index: 1;
  padding: 16px 12px 5px;
  background: #fff;
  font-size: 11px; letter-spacing: .06em;
  font-weight: 600; color: var(--text-2);
}

.calc__opt {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 12px; border-radius: 7px; cursor: pointer;
  transition: background var(--dur-hover) var(--ease);
}
.calc__opt-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; }
.calc__opt-price { flex: none; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.calc__opt-in {
  flex: none; padding: 1px 8px; border-radius: 20px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.calc__opt:hover, .calc__opt.is-active { background: var(--accent-soft); }
.calc__opt.is-active .calc__opt-name { color: var(--accent); }

.calc__opt-empty {
  padding: 14px 12px; font-size: 14px; line-height: 21px; color: var(--text-2);
}

/* Добавленная строка: пришла из каталога, поэтому её можно убрать —
   у семи базовых такой кнопки нет, они всегда на месте. */
.calc__row--added.is-fresh { animation: calcRowFlash 900ms var(--ease); }
/* Имя не «rowIn»: такое же имя есть у появления строк счёта в герое,
   а последнее объявление @keyframes перебивает предыдущее во всём
   документе — счёт оставался пустым. */
@keyframes calcRowFlash {
  0%   { background: var(--accent-soft); }
  100% { background: transparent; }
}

.calc__drop {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13px; line-height: 20px; color: var(--text-2);
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: rgba(92,99,110,.35);
  transition: color var(--dur-hover) var(--ease);
}
.calc__drop:hover { color: var(--fail); text-decoration-color: currentColor; }

.calc__hint { margin-top: 20px; font-size: 14px; line-height: 21px; color: var(--text-2); }
.calc__hint b { color: var(--text); font-weight: 600; }

/* Панель итога — лист счёта, а не «блок с числом»: он висит в воздухе,
   доворачивается за курсором и подпрыгивает по Z при пересчёте. */
.calc__panel {
  position: sticky; top: calc(var(--header-h) + 20px);
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 26px;
  box-shadow: var(--lift);
  transform-style: preserve-3d;
  transition: transform 420ms var(--ease), box-shadow 420ms var(--ease);
}
.calc__panel.is-tilting { transition: transform 90ms linear, box-shadow 420ms var(--ease); }
.calc__panel.is-pop { box-shadow: var(--lift-hi); }

.calc__panel-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--border);
}
.calc__panel-head b { font-size: 17px; }
.calc__panel-head span { font-size: 13px; color: var(--text-2); }

.calc__controls { display: grid; gap: 16px; margin-bottom: 22px; }
.switch__label {
  display: block; margin-bottom: 8px;
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); font-weight: 600;
}
.switch__row {
  display: flex; gap: 4px; padding: 4px;
  background: var(--bg-muted); border: 1px solid var(--border); border-radius: 10px;
}
.switch__btn {
  flex: 1; min-height: 38px; padding: 0 10px;
  background: none; border: 0; border-radius: 7px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  transition: background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease),
              box-shadow var(--dur-hover) var(--ease);
}
.switch__btn b { color: var(--accent); font-weight: 600; }
.switch__btn:hover { color: var(--text); }
.switch__btn.is-on { background: var(--text); color: #fff; box-shadow: 0 6px 14px -8px rgba(20,22,26,.8); }
.switch__btn.is-on b { color: #8AB4FF; }

.calc__breakdown { margin-bottom: 14px; }
.calc__breakdown li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 5px 0; font-size: 14px; line-height: 21px; color: var(--text-2);
}
.calc__breakdown li b { color: var(--text); font-weight: 400; white-space: nowrap; }
.calc__breakdown:empty { display: none; }

.calc__lines { padding-top: 14px; border-top: 1px solid var(--border); }
.calc__line {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 5px 0; font-size: 15px; color: var(--text-2);
}
.calc__line b { color: var(--text); white-space: nowrap; }
#calcDiscountLine b { color: var(--accent); }

.calc__total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--border);
}
.calc__total > span { font-size: 15px; color: var(--text-2); }
.calc__total b { font-size: 30px; line-height: 36px; letter-spacing: -0.01em; white-space: nowrap; }

.calc__seats { margin: 8px 0 20px; font-size: 13px; line-height: 20px; color: var(--text-2); }
.calc__note { margin-top: 10px; text-align: center; font-size: 12px; line-height: 18px; color: var(--text-2); }

/* ═══════════════════════════════════════════════════════════
   8. ОТСТРОЙКА — четыре карточки, а не восемь строк

   Сетка намеренно неровная: две широкие карточки несут сценарии,
   ради которых блок существует (документы и упавший доступ), две
   узкие — короткие приговоры в одно слово. Ровный ритм строк
   читался как шум, разный размер заставляет остановиться.

   Внутри карточки два слоя. Чужой лежит в глубине и вычёркивается
   на глазах; наш поднят к зрителю. Разница показана высотой,
   а не цветом: цвет здесь только помогает.
   ═══════════════════════════════════════════════════════════ */

.h2__vs {
  font-style: normal; font-weight: 800; color: var(--accent);
  letter-spacing: -.01em;
}

.duel {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  transform-style: preserve-3d;
}

.duel__card {
  grid-column: span 6;
  display: flex; flex-direction: column; gap: 12px;
  padding: 22px 24px 24px;
  border-radius: var(--r-lg);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  transform-style: preserve-3d;
}
/* 7 + 5, затем 5 + 7 — ряды разной развесовки, чтобы взгляд шёл
   по диагонали, а не по колонке. */
.duel__card--wide { grid-column: span 7; }
.duel__card--tall { grid-column: span 5; }

.duel__crit {
  margin: 0;
  font-size: 13px; line-height: 18px; letter-spacing: .04em;
  text-transform: uppercase; font-weight: 700; color: var(--text-2);
}

/* Свободную высоту карточки забирает серый слой, наш остаётся ровно
   по тексту и прижат к низу. Так нижние кромки белых панелей стоят
   на одной линии через весь ряд, сколько бы строк в них ни было. */
.duel__them, .duel__us {
  position: relative;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  grid-template-areas: "who who" "icon text";
  gap: 5px 10px;
  align-content: center;
  padding: 13px 15px;
  border-radius: var(--r);
  font-size: 16px; line-height: 24px;
  transition: transform 460ms var(--ease), box-shadow 460ms var(--ease), opacity 460ms var(--ease);
}
.duel__them::before, .duel__us::before {
  grid-area: who; content: attr(data-who);
  font-size: 10px; line-height: 14px; letter-spacing: .07em;
  text-transform: uppercase; font-weight: 700; color: var(--text-2); opacity: .6;
}
.duel__us::before { color: var(--accent); opacity: .8; }
.duel__them .mark, .duel__us .mark { grid-area: icon; margin-top: 4px; }
.duel__them p, .duel__us p { grid-area: text; margin: 0; }

.duel__them { flex: 1 1 auto; background: #E7EAEF; color: var(--text-2); }
.duel__us {
  flex: 0 0 auto; margin-top: auto;
  background: #fff; color: var(--text);
  border: 1px solid #D8E4FF;
  box-shadow: 0 26px 44px -26px rgba(37,99,235,.55), 0 2px 6px rgba(20,22,26,.05);
}
.duel__us b { font-weight: 700; }

/* Слои разъезжаются по глубине уже после того, как карточка встала
   на место: сначала объект приезжает, потом расслаивается.

   Оба слоя стоят НАД плоскостью карточки, а не по обе стороны от неё:
   в preserve-3d фон родителя лежит на z=0 и закрывает всё, что ушло
   в минус. Разницу высот несёт зазор между слоями, не знак Z. */
.r3d.is-in .duel__them { transform: translateZ(4px); }
.r3d.is-in .duel__us   { transform: translateZ(28px); }
.r3d.is-in .duel__them,
.r3d.is-in .duel__us {
  transition-delay: calc(var(--rd, 0ms) + 420ms);
}

.duel__card:hover .duel__us {
  transform: translateZ(46px);
  box-shadow: 0 36px 58px -28px rgba(37,99,235,.62), 0 3px 8px rgba(20,22,26,.06);
}
.duel__card:hover .duel__them { transform: translateZ(0); opacity: .7; }
.duel__card:hover .duel__us, .duel__card:hover .duel__them { transition-delay: 0ms; }

/* Вычёркивание чужого варианта. Линия дорисовывается в кадре —
   отказ происходит на глазах, а не лежит готовым. */
.strike {
  text-decoration: none;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 62%;
  background-size: 0% 1.5px;
}
.r3d.is-in .strike {
  background-size: 100% 1.5px;
  transition: background-size 560ms var(--ease-fly) calc(var(--rd, 0ms) + 640ms);
}

.mark {
  display: inline-block; flex: none;
  width: 16px; height: 16px;
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.mark--yes { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5.2 5.2L20 7'/%3E%3C/svg%3E"); }
.mark--no  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C636E' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }

/* ═══════════════════════════════════════════════════════════
   9. ГАРАНТИЯ: ЗАМЕНА ЗА ЧАС

   Центральный объект блока — сам пункт договора. Иллюстрации
   рядом нет намеренно: обещание не пересказывают картинкой,
   его показывают документом. Лист лежит в глубине и по наведению
   доворачивается — по §«Про 3D» в объёме живёт то, что мы продаём,
   а договор здесь и есть товар.

   Блок светлый, как остальные: тёмный на странице один —
   форма заявки, и это её привилегия.
   ═══════════════════════════════════════════════════════════ */

.sla { display: flex; flex-direction: column; align-items: center; }
.sla__head { max-width: 720px; text-align: center; margin-bottom: 36px; }
/* Подчёркивание под h2 по умолчанию прижато влево — в центрированной
   шапке блока оно должно стоять под серединой заголовка. */
.sla__head .h2::after { margin-left: auto; margin-right: auto; }
.sla__promise { font-size: 20px; line-height: 32px; color: var(--text-2); margin: 0; }

/* Сцена одного объекта: перспектива нужна листу, а не колонке. */
.sla__doc { perspective: 1600px; perspective-origin: 50% 40%; width: 100%; max-width: 760px; }

/* Лист договора: главный и единственный предмет блока — одна
   карточка, без подложек сзади. Лежит с наклоном и поднимается
   к зрителю по наведению. Тени две: дальняя держит лист над
   фоном, ближняя даёт кромку. */
.clause {
  position: relative;
  background: #fff; color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 40px 44px 30px;
  box-shadow: 0 60px 90px -46px rgba(20,22,26,.42), 0 3px 10px rgba(20,22,26,.06);
  transform: rotateX(9deg) translateY(14px) scale(.985);
  transform-origin: 50% 0;
  opacity: 0;
  transition: transform 900ms var(--ease), opacity 700ms var(--ease), box-shadow 500ms var(--ease);
}
.clause.is-on { transform: rotateX(0deg) translateY(0) scale(1); opacity: 1; }
.clause.is-on:hover {
  transform: rotateX(-2deg) translateZ(26px);
  box-shadow: 0 74px 104px -46px rgba(20,22,26,.46), 0 3px 10px rgba(20,22,26,.07);
}

.clause__top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 18px; margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.clause__tag {
  font-size: 12px; line-height: 18px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-2);
}
.clause__no {
  font-size: 12px; line-height: 18px; font-weight: 600;
  letter-spacing: .04em; color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* Цитата — главный текст страницы, поэтому крупнее обычного абзаца */
.clause__text { margin: 0; font-size: 21px; line-height: 35px; letter-spacing: -0.005em; }

/* Маркер по строке: обещание не просто написано — на него можно сослаться */
.clause__hl {
  position: relative;
  background-image: linear-gradient(rgba(37,99,235,.20), rgba(37,99,235,.20));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  padding: 2px 0;
}
.clause.is-on .clause__hl { animation: hlSweep 1100ms var(--ease) 700ms forwards; }
@keyframes hlSweep { to { background-size: 100% 100%; } }

.clause__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap;
  margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--border);
  font-size: 14px; line-height: 21px; color: var(--text-2);
}

/* Что делает час выполнимым */
.sla__scale {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  width: 100%; max-width: 900px; margin: 44px 0 0;
  perspective: 1000px;
}
.sla__mark {
  padding: 18px 20px;
  border: 1px solid var(--border); border-radius: var(--r);
  background: #fff;
  transform-style: preserve-3d;
  transition: transform 420ms var(--ease), border-color 420ms var(--ease), box-shadow 420ms var(--ease);
}
.sla__mark:hover { transform: translateZ(28px); border-color: #D3D9E2; box-shadow: var(--lift); }
.sla__mark b { display: block; font-size: 22px; line-height: 30px; color: var(--accent); letter-spacing: -0.01em; }
.sla__mark span { display: block; font-size: 14px; line-height: 22px; color: var(--text-2); margin-top: 4px; }

.sla__list {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 36px;
  max-width: 900px; margin: 24px 0 0; padding: 0; list-style: none;
}
.sla__list li {
  position: relative; padding-left: 26px;
  color: var(--text-2); font-size: 16px; line-height: 26px;
}
.sla__list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}
.sla__list b { color: var(--text); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════
   10. ОТЗЫВЫ
   ═══════════════════════════════════════════════════════════ */

/* Отзывы показаны целиком, без обрезки: высоту ряда задаёт самый длинный.
   Раскладка по умолчанию — две колонки; четыре включаются отдельным
   правилом ниже, там же объяснено, с какой ширины и почему. */
.reviews__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 44px; }
.review { display: flex; flex-direction: column; height: 100%; padding: 28px; }
.review__quote-mark {
  position: absolute; top: 8px; right: 18px;
  font-size: 56px; line-height: 1; color: #DEE7F8;
  transform: translateZ(4px);
  pointer-events: none;
}
.review blockquote { margin: 0 0 16px; font-size: 16px; line-height: 26px; }

/* Итог отзыва цифрой: то, что читатель запомнит, даже если не дочитает.

   margin-top: auto — вся «подошва» карточки (метрика + подпись + кнопка) прижата
   к низу одним блоком. Цитаты разной длины, и без этого свободное место
   открывалось между подписью и кнопкой — подпись повисала в воздухе.

   В узкой колонке цифра и подпись к ней в строку не помещаются — ставим
   их друг под друга, заодно получается компактный стат-блок. */
.review__metric {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px;
  align-self: flex-start; margin-top: auto; margin-bottom: 18px; padding: 8px 12px;
  background: var(--accent-soft); border-radius: var(--r);
  transform: translateZ(24px);
}
.review__metric b { font-size: 16px; color: var(--accent); }
.review__metric span { font-size: 13px; line-height: 19px; color: var(--text-2); }

.review__who { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; transform: translateZ(14px); }
.review__ava {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; object-position: center top;
  background: var(--bg-muted); box-shadow: 0 0 0 1px var(--border), 0 10px 20px -10px rgba(20,22,26,.5);
}
.review__id { min-width: 0; }
.review__id > b { display: block; font-size: 15px; }
/* Только прямой потомок: внутри строки с должностью лежит ещё .review__site,
   и ему display: block ломает поток.

   min-height в две строки — не украшательство. Метрика прижата margin-top: auto,
   то есть её высота задаётся тем, что лежит НИЖЕ: подписью и кнопкой. Должность
   у одних авторов влезает в строку, у других переносится на две — и чип в этих
   карточках оказывается на 19 px ниже соседних. Резервируем две строки всегда:
   ряд метрик выравнивается независимо от длины должности. */
.review__id > span {
  display: block; font-size: 13px; line-height: 19px; color: var(--text-2);
  min-height: 38px;
}

/* Название компании — ссылка на её сайт. Синяя и подчёркнутая: в подписи
   отзыва она соседствует с обычным текстом, поэтому читаться как ссылка
   должна сразу, без наведения. */
.review__site {
  color: var(--accent); font-weight: 500; text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-underline-offset: 2px; text-decoration-thickness: 1px;
  transition: color .18s ease, text-decoration-color .18s ease;
}
/* Селектор с a. остался от времени, когда часть названий была <span> без адреса:
   ховер и курсор-палец только у настоящей ссылки, чтобы не обещать клик раньше
   времени. Сейчас кликаются все четыре, но правило пусть стоит — если название
   опять останется без адреса, оно само не притворится ссылкой. */
a.review__site:hover, a.review__site:focus-visible {
  color: var(--accent-hover); text-decoration-color: currentColor;
}

.review .btn--tg {
  align-self: stretch; min-height: 40px; padding: 10px 14px;
  gap: 8px; font-size: 14px; line-height: 19px;
}

/* ─── Четыре в ряд ──────────────────────────────────────────
   В две колонки секция занимает почти два экрана, а отзыв — не тот блок,
   ради которого стоит столько скроллить. Но четыре колонки имеют смысл
   только там, где карточка остаётся читаемой: узкий столбик из двух слов
   в строке хуже, чем два экрана.

   Порог 1400px посчитан от карточки, а не взят на глаз: нужно 4 × 300px
   плюс три зазора по 20px = 1260px сетки, а сетка = вьюпорт минус 64.
   Ниже этого — две колонки, они на таких экранах шире и спокойнее.
   На 1280 и 1366 (типовые ноутбуки) отзывы идут 2 × 2 — это осознанно.

   Сетка здесь выходит за общие 1200px контейнера, иначе четвёртая колонка
   съедает ширину у остальных. Заголовок остаётся в контейнере и выровнен
   по остальным секциям — расширяется только ряд карточек.

   Ширина читается изнутри наружу:
   · calc(100vw - 64px) — сколько можно занять, не поймав горизонтальный
     скролл. Вычитаем с запасом: 64px больше любой системной полосы
     прокрутки, которую 100vw в себя включает, а сама полоса — нет;
   · min(1500px, …) — потолок, дальше строка текста становится слишком
     длинной для короткой цитаты;
   · max(100%, …) — пол: сетка никогда не уже контейнера, иначе карточки
     встали бы с отступом от левого края заголовка.
   ─────────────────────────────────────────────────────────── */
@media (min-width: 1400px) {
  .reviews__grid {
    grid-template-columns: repeat(4, 1fr); gap: 20px;
    width: max(100%, min(1500px, calc(100vw - 64px)));
    margin-left: 50%; translate: -50%;
  }
  .review { padding: 24px; }
  .review blockquote { font-size: 15px; line-height: 24px; }
}

/* ═══════════════════════════════════════════════════════════
   11. ДОКУМЕНТЫ — три листа веером

   Единственный честный способ показать «полный комплект документов» —
   показать сами документы. Стопка раскрывается в кадре, лист выходит
   вперёд по наведению.
   ═══════════════════════════════════════════════════════════ */

.docs__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: 64px; align-items: center;
  margin-top: 44px;
}

.docs__fan {
  position: relative;
  height: 400px;
  perspective: 1100px; perspective-origin: 50% 45%;
  /* Боковые листы лежат за плоскостью сцены (translateZ отрицательный),
     поэтому в 3D-хит-тесте курсор упирался в сам контейнер и наведение
     на них не срабатывало. Пропускаем события к листам. */
  pointer-events: none;
}
.docs__fan-inner { position: absolute; inset: 0; transform-style: preserve-3d; }
.docs__fan .sheet { pointer-events: auto; }

.sheet {
  position: absolute; top: 50%; left: 50%;
  width: 220px; height: 310px;
  margin: -155px 0 0 -110px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 18px;
  box-shadow: 0 30px 56px -26px rgba(20,22,26,.42), 0 2px 8px rgba(20,22,26,.06);
  transform: translate3d(0, 0, 0) rotate(0deg);
  transition: transform 760ms var(--ease), box-shadow 420ms var(--ease),
              border-color var(--dur-hover) var(--ease);
  cursor: default;
}
/* Разложенные позиции проставляются, когда блок входит в кадр:
   до этого листы лежат ровной стопкой. */
.docs__fan.is-in .sheet--1 { transform: translate3d(-146px, 10px, -70px) rotate(-9deg); }
.docs__fan.is-in .sheet--2 { transform: translate3d(0, -14px, 40px) rotate(0deg); }
.docs__fan.is-in .sheet--3 { transform: translate3d(146px, 10px, -70px) rotate(9deg); }
.docs__fan.is-in .sheet--1 { transition-delay: 60ms; }
.docs__fan.is-in .sheet--2 { transition-delay: 0ms; }
.docs__fan.is-in .sheet--3 { transition-delay: 120ms; }

/* Веер отыгран — снимаем стартовые задержки, чтобы наведение
   отвечало сразу, а не через 120 мс. */
.docs__fan.is-in.is-settled .sheet { transition-delay: 0ms; }

/* Состояние «лист впереди» держит класс, а не :hover: лист уезжает
   из-под курсора, и на чистом :hover он бы дрожал. Класс ставится
   и от наведения на сам лист, и от наведения на строку справа. */
.docs__fan.is-in .sheet.is-front {
  border-color: var(--accent);
  box-shadow: 0 48px 80px -30px rgba(20,22,26,.5), 0 3px 10px rgba(20,22,26,.08),
              0 0 0 3px rgba(37, 99, 235, .14);
  z-index: 3;
}
.docs__fan.is-in .sheet.is-front .sheet__title { color: var(--accent); }

/* Крайние листы выходят вперёд в свою сторону, а не к середине.
   К середине они наезжали на центральный, курсор оказывался на границе
   двух листов, и подсветка прыгала между ними. Наружу — курсор остаётся
   в своей половине сцены, и центральный лист никто не перекрывает. */
.docs__fan.is-in .sheet--1.is-front { transform: translate3d(-176px, -16px, 96px) rotate(-4deg); }
.docs__fan.is-in .sheet--2.is-front { transform: translate3d(0, -26px, 120px) rotate(0deg); }
.docs__fan.is-in .sheet--3.is-front { transform: translate3d(176px, -16px, 96px) rotate(4deg); }

/* Пока один лист впереди, остальные уходят глубже и тускнеют —
   иначе «подсветка» читается только по тени. */
.docs__fan.is-in.has-front .sheet:not(.is-front) {
  box-shadow: 0 18px 34px -22px rgba(20,22,26,.34), 0 1px 4px rgba(20,22,26,.04);
}
.docs__fan.is-in.has-front .sheet--1:not(.is-front) { transform: translate3d(-150px, 14px, -110px) rotate(-10deg); }
.docs__fan.is-in.has-front .sheet--2:not(.is-front) { transform: translate3d(0, -6px, -20px) rotate(0deg); }
.docs__fan.is-in.has-front .sheet--3:not(.is-front) { transform: translate3d(150px, 14px, -110px) rotate(10deg); }

.sheet__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.sheet__kind {
  font-size: 10px; line-height: 16px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent);
}
.sheet__no { font-size: 10px; line-height: 16px; color: var(--text-2); }
/* Правый лист перекрыт центральным слева — разворачиваем шапку, чтобы
   слово «Акт» осталось видимым. Как логотип на карточке в герое: если его
   не видно, объект перестаёт быть конкретным документом. */
.sheet--3 .sheet__head { flex-direction: row-reverse; }
.sheet__title {
  font-size: 14px; line-height: 20px; font-weight: 600; margin: 12px 0 14px;
  transition: color var(--dur-hover) var(--ease);
}
.sheet__lines { display: grid; gap: 7px; }
.sheet__lines i { display: block; height: 5px; border-radius: 3px; background: #EDEFF3; }
.sheet__lines i.w80 { width: 80%; }
.sheet__lines i.w60 { width: 60%; }
.sheet__lines i.w40 { width: 40%; }
.sheet__sum {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 11px; color: var(--text-2);
}
.sheet__sum b { font-size: 15px; color: var(--text); }
.sheet__sign {
  position: absolute; left: 18px; right: 18px; bottom: 18px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
  font-size: 10px; line-height: 14px; color: var(--text-2);
}
.sheet__sign svg { opacity: .55; }

/* Своя перспектива: строки списка выходят вперёд синхронно с листом,
   на который они указывают. */
.docs__list { display: grid; gap: 16px; perspective: 1000px; }
.docs__item {
  padding: 22px 24px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
  transform-style: preserve-3d;
  transition: transform 420ms var(--ease), border-color var(--dur-hover) var(--ease), box-shadow 420ms var(--ease);
}
.docs__item:hover, .docs__item.is-hot {
  transform: translateZ(26px); border-color: var(--accent); box-shadow: var(--lift);
}
.docs__item h3 { font-size: 19px; line-height: 26px; margin-bottom: 6px; }
.docs__item p { color: var(--text-2); font-size: 15px; line-height: 24px; }

/* ═══════════════════════════════════════════════════════════
   13. ФОРМА — карточка висит в тёмном блоке и держит курсор
   ═══════════════════════════════════════════════════════════ */

.form__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: 72px; align-items: start;
  perspective: 1400px;
}
/* preserve-3d по всей цепочке до поля ввода: без него глубина
   схлопывается на первом же предке без этого свойства. */
.form__intro { transform-style: preserve-3d; }
.form__intro .h2 { color: #fff; max-width: 16ch; }

/* Скорость ответа — главный аргумент блока заявки: она стоит
   перед заголовком, а не в мелком примечании под кнопкой. */
.eta {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  margin-bottom: 20px;
  padding: 9px 18px 9px 14px;
  border: 1px solid rgba(96,165,250,.42); border-radius: 999px;
  background: rgba(96,165,250,.10);
  font-size: 15px; line-height: 22px;
}
.eta b { color: #fff; font-weight: 600; }
.eta span { color: var(--text-dark-2); }
.eta__dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--accent-dark);
  box-shadow: 0 0 0 0 rgba(96,165,250,.55);
  animation: etaPulse 2.4s var(--ease) infinite;
}
@keyframes etaPulse {
  0%   { box-shadow: 0 0 0 0 rgba(96,165,250,.55); }
  60%  { box-shadow: 0 0 0 9px rgba(96,165,250,0); }
  100% { box-shadow: 0 0 0 0 rgba(96,165,250,0); }
}
.form__intro .lead__hl { color: #fff; font-weight: 600; white-space: nowrap; }
#leadForm { transform-style: preserve-3d; }

.form__tg {
  margin-top: 36px; max-width: 460px;
  padding: 26px 28px;
  border: 1px solid var(--border-dark);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.03);
  transform-style: preserve-3d;
  transition: transform 420ms var(--ease), border-color 420ms var(--ease);
}
.form__tg:hover { transform: translateZ(26px); border-color: #414750; }
.form__tg-title { font-size: 19px; line-height: 26px; font-weight: 600; color: #fff; margin-bottom: 8px; }
.form__tg-text { font-size: 16px; line-height: 26px; color: var(--text-dark-2); margin-bottom: 20px; }
.form__tg-handle { margin-top: 12px; font-size: 15px; line-height: 22px; color: var(--text-dark-2); }

/* Запасные каналы: не спорят с Telegram за внимание — тоньше,
   без заливки, в один ряд. Цвет канала появляется только на ховере. */
.form__alt { margin-top: 20px; max-width: 460px; transform-style: preserve-3d; }
.form__alt-title { font-size: 15px; line-height: 22px; color: var(--text-dark-2); margin-bottom: 12px; }
.form__alt-row { display: flex; flex-wrap: wrap; gap: 10px; }
.form__alt-note { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--text-dark-2); }

.alt-ch {
  flex: 1 1 130px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 46px; padding: 0 14px;
  border: 1px solid var(--border-dark); border-radius: var(--r);
  background: rgba(255,255,255,.03);
  color: #fff; font-size: 15px; line-height: 20px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: border-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease),
              background-color var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease);
}
.alt-ch svg { flex: none; color: var(--ch); transition: color var(--dur-hover) var(--ease); }
.alt-ch:hover { border-color: var(--ch); color: var(--ch); background: rgba(255,255,255,.06); }
.alt-ch:active { transform: translateY(0); }

.alt-ch--wa   { --ch: #25D366; }
.alt-ch--max  { --ch: #8B5CF6; }
.alt-ch--mail { --ch: var(--accent-dark); }

.form__card {
  position: relative;
  background: #fff; color: var(--text);
  border-radius: var(--r-lg); padding: 36px;
  box-shadow: 0 48px 90px -40px rgba(0,0,0,.75), 0 4px 12px rgba(0,0,0,.3);
  transform-style: preserve-3d;
  transition: transform 520ms var(--ease), box-shadow 520ms var(--ease);
}
.form__card.is-tilting { transition: transform 90ms linear, box-shadow 520ms var(--ease); }

.field { margin-bottom: 20px; transform-style: preserve-3d; }
.field label { display: block; margin-bottom: 8px; font-size: 15px; line-height: 22px; font-weight: 600; }
.req { color: var(--accent); }

.field input[type="text"],
.field textarea {
  width: 100%; padding: 13px 14px;
  font: inherit; font-size: 16px; line-height: 24px; color: var(--text);
  background: #fff; border: 1px solid var(--border); border-radius: var(--r);
  transition: border-color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease),
              transform var(--dur-hover) var(--ease);
  resize: vertical;
}
.field input::placeholder, .field textarea::placeholder { color: #9AA1AC; }
.field input:hover, .field textarea:hover { border-color: #C9CFD8; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
  transform: translateZ(18px);
}
.field.is-invalid input, .field.is-invalid textarea { border-color: #B4342C; }

.field__error { margin-top: 6px; font-size: 13px; line-height: 20px; color: #B4342C; }

/* Ловушка для ботов: уводим за край экрана, а не display:none —
   так поле остаётся в форме для робота и невидимо для человека. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consent {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 4px 0 20px;
  font-size: 13px; line-height: 20px; color: var(--text-2);
}
.consent input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--accent); flex: none; }

#submitBtn[data-state="sending"] { opacity: .7; pointer-events: none; }

.form__note { margin-top: 14px; text-align: center; font-size: 13px; line-height: 20px; color: var(--text-2); }
.form__note b { color: var(--text); font-weight: 600; }

/* Форма уходит вглубь, ответ приходит оттуда же — тем же движением,
   которым в герое карточка садится в строку счёта. */
#leadForm { transform-origin: 50% 50%; transition: opacity 320ms var(--ease), transform 420ms var(--ease); }
#leadForm.is-out { opacity: 0; transform: translateZ(-140px) rotateX(-14deg); pointer-events: none; }

.form__success, .form__fail, .form__nojs { text-align: center; padding: 12px 0; }
.form__success h3, .form__fail h3, .form__nojs h3 { font-size: 24px; line-height: 32px; margin-bottom: 10px; }
.form__success p, .form__fail p, .form__nojs p { color: var(--text-2); margin-bottom: 20px; }
.form__success:not([hidden]), .form__fail:not([hidden]) { animation: panelIn 520ms var(--ease); }
@keyframes panelIn {
  from { opacity: 0; transform: translateZ(-120px) rotateX(16deg); }
  to   { opacity: 1; transform: none; }
}
.form__check {
  width: 52px; height: 52px; margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent);
  box-shadow: 0 14px 28px -12px rgba(37,99,235,.7);
}
.form__fail .btn--text { margin-top: 16px; display: block; width: 100%; }

/* Тёмные блоки: медленная аврора на фоне */
.section--dark { position: relative; overflow: hidden; }
.section--dark::before {
  content: ""; position: absolute; inset: -20% -10%; pointer-events: none;
  background:
    radial-gradient(38% 46% at 18% 22%, rgba(37,99,235,.30), transparent 70%),
    radial-gradient(34% 40% at 82% 72%, rgba(96,165,250,.18), transparent 70%);
  animation: aurora 22s ease-in-out infinite alternate;
}
@keyframes aurora {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(4%, -3%, 0) scale(1.12); }
}
.section--dark > .container { position: relative; z-index: 1; }

/* ═══ 14. ФУТЕР ══════════════════════════════════════════ */

.footer { background: var(--bg-dark); color: var(--text-dark-2); padding: 72px 0 32px; }
.footer__grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;
  padding-bottom: 48px; border-bottom: 1px solid var(--border-dark);
}
.footer .logo { color: #fff; margin-bottom: 16px; }
.footer .logo:hover { color: #fff; }
.footer__brand p { font-size: 15px; line-height: 24px; max-width: 40ch; }
.footer__col h4 { font-size: 14px; color: #fff; margin-bottom: 14px; }
.footer__col li { margin-bottom: 10px; }
.footer__col a { color: var(--text-dark-2); font-size: 15px; }
.footer__col a:hover { color: #fff; }

.footer__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding-top: 24px; font-size: 13px; line-height: 20px;
}
.footer .stub { color: var(--text-dark-2); background: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(255,255,255,.07) 5px, rgba(255,255,255,.07) 10px); }

/* ═══ Липкий мобильный CTA ═══════════════════════════════ */

.sticky-cta {
  display: none;
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40;
  height: 52px; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; border-radius: var(--r);
  font-size: 16px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(37,99,235,.32);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.sticky-cta:hover { color: #fff; }
.sticky-cta.is-on { opacity: 1; transform: none; pointer-events: auto; }

/* ═══ Плоское появление — для текста, которому объём не нужен ═══ */

.reveal { opacity: 0; transform: translateY(12px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-in) var(--ease) var(--rd, 0ms),
              transform var(--dur-in) var(--ease) var(--rd, 0ms);
}

/* ═══════════════════════════════════════════════════════
   Адаптив
   ═══════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .hero__h1 { font-size: 46px; line-height: 52px; }
  .form__grid { grid-template-columns: 1fr; gap: 40px; }
  .form__intro .h2 { max-width: none; }
  /* Сцена уходит под список: две колонки ниже 1080 уже не держат
     ни ширину пунктов, ни ширину счёта. */
  .value__pick { grid-template-columns: 1fr; }
  .cats { grid-template-columns: repeat(2, 1fr); }
  .calc { grid-template-columns: 1fr; }
  .calc__panel { position: static; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .docs__grid { grid-template-columns: 1fr; gap: 40px; }
  .day { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .meter { position: static; max-width: 420px; }
  .clause { transform: none; max-width: none; }
  .clause:hover { transform: translateZ(16px); }
}

@media (max-width: 860px) {
  .nav {
    position: fixed; left: 0; right: 0; top: var(--header-h);
    flex-direction: column; gap: 0;
    background: #fff; border-bottom: 1px solid var(--border);
    padding: 8px var(--gutter) 20px;
    transform: translateY(-120%);
    /* Закрытое меню убрано из отрисовки целиком: припаркованное над экраном,
       оно свешивало на первые пиксели страницы свою нижнюю границу и тень
       (серая полоса над шапкой) и перехватывало тапы у верхнего края. */
    visibility: hidden;
    transition: transform 300ms var(--ease), visibility 0s linear 300ms;
    box-shadow: 0 16px 32px -16px rgba(20,22,26,.16);
  }
  .nav.is-open {
    transform: none;
    visibility: visible;
    transition: transform 300ms var(--ease), visibility 0s;
  }
  .nav a { padding: 14px 0; font-size: 17px; border-bottom: 1px solid var(--border); color: var(--text); }
  .nav a:last-child { border-bottom: 0; }
  .burger { display: flex; margin-right: -12px; }
  .header__inner { gap: 8px; justify-content: space-between; }
  .header__actions { gap: 4px; }
  .logo__word { font-size: 18px; }
  .btn__long { display: none; }
  .btn__short { display: inline; }
  .header__actions .btn--sm { padding: 0 14px; }
  .tg-icon { width: 40px; }
  /* На мобильном в шапке остаётся только Telegram: остальные каналы
     дублируются в блоке заявки, а место здесь нужно кнопке. */
  .tg-icon--wa, .tg-icon--max, .tg-icon--mail { display: none; }

  .section { padding: 64px 0; }
  .section--tight { padding: 52px 0; }
  .hero { padding: 40px 0 64px; }
  .hero__badge { margin-bottom: 16px; padding: 6px 12px; font-size: 13px; line-height: 19px; }
  .hero__h1 { font-size: 34px; line-height: 40px; }
  .hero__sub { font-size: 17px; line-height: 27px; }
  .h2 { font-size: 28px; line-height: 34px; }
  body { font-size: 17px; line-height: 27px; }
  .card { padding: 24px; }

  .markers { grid-template-columns: 1fr; gap: 14px; }
  .hero__buttons .btn { width: 100%; height: 52px; }

  .invoice { padding: 20px; }
  .invoice__amount { font-size: 26px; line-height: 32px; }
  .invoice__cols, .invoice__row { grid-template-columns: 1fr 32px 92px; gap: 8px; font-size: 15px; }
  .invoice__foot { display: none; }

  /* Карточкам подписок на телефоне места нет: при ширине экрана в 390px
     они перекрывают счёт целиком, верхняя уходит под шапку, а пристыкованная
     карточка остаётся нечитаемой плашкой поверх строки. Сцена сводится к
     тому, ради чего она есть, — к счёту: строки собираются по очереди
     (см. плоскую ветку в assets/app.js). */
  .hero3d { perspective: none; }
  .hero3d__cards, .hero3d__floor { display: none; }

  /* На телефоне глубина съедает читаемость: сцены становятся плоскими,
     но движение появления остаётся — блок всё так же «приезжает». */
  .deep { perspective: 1600px; }
  .cats, .reviews__grid { grid-template-columns: 1fr; }
  /* Равнять шесть панелей по самой высокой на телефоне незачем: скачок
     высоты не виден, а лишние пол-экрана пустоты — очень. */
  .value__stage { padding: 24px 20px; }
  .value__panel { display: none; }
  .value__panel[data-on] { display: block; }
  .vdocs { grid-template-columns: 1fr; }
  .vdoc__sheet { height: 60px; }
  .vinv__row { grid-template-columns: minmax(0, 1fr) 40px 92px; padding: 11px 14px; font-size: 14px; }
  .vinv__head, .vinv__total, .vinv__foot { padding: 13px 14px; }
  .vmsg { max-width: 88%; }

  /* Колонка времени ужимается до узкой полосы у левого поля:
     часы всё ещё читаются, а тексту остаётся вся ширина. */
  .tl { padding-left: 82px; }
  .tl__rail { left: 64px; }
  .ev__time { left: -82px; width: 52px; font-size: 13px; }
  .ev__dot { left: -24px; }
  .ev--you .ev__dot { left: -26px; }
  .ev h3 { font-size: 18px; line-height: 26px; }
  .meter__num { font-size: 44px; line-height: 50px; }

  .cat { padding: 22px 20px; }
  /* В одну колонку девять категорий превращаются в бесконечную ленту:
     на телефоне остаются три первые, охват берёт на себя полоса
     «Подключаем вообще любой софт» ниже. Остальные плитки остаются
     в разметке — из них собирается список калькулятора (блок 7). */
  .cats .cat:nth-of-type(n+4) { display: none; }
  .catalog__ask { padding: 24px; }

  .formula { gap: 10px; }
  .fblock { padding: 14px 18px 16px; width: 100%; }
  .fblock__val { font-size: 18px; line-height: 26px; }
  .fsign { width: 100%; justify-content: center; }

  .calcteam { gap: 22px; }
  .calcteam__seg { flex-basis: 100%; }

  .calc__list { padding: 20px; }
  /* Значок уходит в строку с названием, степпер и сумма — под ними. */
  .calc__row {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    grid-template-areas: "logo info info" "step step sum";
    gap: 12px; padding: 18px 0;
  }
  .calc__logo { grid-area: logo; align-self: start; margin-top: 3px; }
  .calc__info { grid-area: info; }
  .calc__row .stepper { grid-area: step; justify-self: start; }
  .calc__sum { grid-area: sum; align-self: center; font-size: 18px; }
  .calc__add-field { padding-left: 12px; }
  .calc__add-input { font-size: 16px; } /* меньше 16px — iOS зумит страницу на фокусе */
  .calc__add-list { max-height: 56vh; }
  /* Название длинное, а места мало: имя занимает строку целиком,
     цена и метка уходят под него — иначе «Adobe Creative Cloud» ломается
     на три строки рядом с ценой. */
  .calc__opt {
    flex-wrap: wrap; align-items: center; gap: 3px 8px; padding: 10px 12px;
  }
  .calc__opt-name { flex: 1 0 100%; }
  .calc__opt-price { font-size: 12px; }
  .calc__panel { position: static; padding: 20px; }
  .calc__total b { font-size: 26px; line-height: 32px; }
  .switch__btn { font-size: 13px; padding: 0 6px; }

  /* Отстройка: бенто разворачивается в столбец, глубина остаётся,
     но становится мельче — на узком экране крупный вылет по Z
     съедает читаемость. */
  .duel { gap: 12px; }
  .duel__card, .duel__card--wide, .duel__card--tall { grid-column: 1 / -1; }
  .duel__card { padding: 18px; }
  .duel__them, .duel__us { padding: 12px 14px; font-size: 15px; }
  .r3d.is-in .duel__them { transform: translateZ(2px); }
  .r3d.is-in .duel__us   { transform: translateZ(14px); }

  .sla__head { margin-bottom: 30px; }
  .sla__promise { font-size: 18px; line-height: 29px; }
  .sla__scale { grid-template-columns: 1fr; margin-top: 36px; }
  .sla__list { flex-direction: column; gap: 10px; align-items: flex-start; text-align: left; }
  /* Наклон на узком экране только мешает: карточка должна занимать
     всю ширину и читаться как текст. */
  .sla__doc { perspective: none; }
  .clause { padding: 24px 22px 20px; transform: none; opacity: 1; }
  .clause.is-on, .clause.is-on:hover { transform: none; }
  .clause__text { font-size: 17px; line-height: 29px; }
  .clause__top { padding-bottom: 14px; margin-bottom: 18px; }
  .clause__foot { margin-top: 22px; padding-top: 16px; gap: 10px; }

  /* Лист уже и ниже — содержимое приходится подрезать, иначе строка
     «К оплате» наезжает на подпись внизу. */
  .docs__fan { height: 320px; }
  .sheet { width: 172px; height: 252px; margin: -126px 0 0 -86px; padding: 14px 13px; }
  .docs__fan.is-in .sheet--1 { transform: translate3d(-92px, 8px, -50px) rotate(-9deg); }
  .docs__fan.is-in .sheet--3 { transform: translate3d(92px, 8px, -50px) rotate(9deg); }
  .docs__fan.is-in.has-front .sheet--1:not(.is-front) { transform: translate3d(-96px, 12px, -90px) rotate(-10deg); }
  .docs__fan.is-in.has-front .sheet--3:not(.is-front) { transform: translate3d(96px, 12px, -90px) rotate(10deg); }
  .docs__fan.is-in .sheet--1.is-front { transform: translate3d(-118px, -12px, 60px) rotate(-4deg); }
  .docs__fan.is-in .sheet--3.is-front { transform: translate3d(118px, -12px, 60px) rotate(4deg); }
  .sheet__title { font-size: 12px; line-height: 17px; margin: 9px 0 10px; }
  .sheet__lines { gap: 6px; }
  .sheet__lines i:nth-child(n+4) { display: none; }
  .sheet__sum { margin-top: 10px; padding-top: 9px; }
  .sheet__sign { left: 13px; right: 13px; bottom: 13px; }

  .form__card { padding: 24px; }
  /* В одну строку плашка не помещается: перестаём быть «таблеткой»,
     иначе на двух строках она читается как раздутая капсула. */
  .eta { display: flex; border-radius: var(--r-lg); align-items: flex-start; padding: 13px 16px; }
  .eta__dot { margin-top: 7px; }
  .eta span { flex-basis: 100%; }

  .footer__grid { grid-template-columns: 1fr; gap: 32px; }

  .sticky-cta { display: flex; }
  .btn, .nav a, .tg-icon, summary { min-height: 44px; }
  .btn--text { min-height: 44px; align-items: center; }
}

/* ═══ Уважение к prefers-reduced-motion ══════════════════
   Глубины нет вообще: всё лежит в плоскости и видно сразу. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .r3d { opacity: 1; transform: none; }
  .invoice [data-row] { opacity: 1; transform: none; }
  .hero3d { perspective: none; }
  .hero3d__cards, .hero3d__floor { display: none; }
  .deep, .form__grid, .docs__fan, .sla__doc { perspective: none; }
  .fblock, .fsign { opacity: 1; transform: none; }
  .formula.is-settled .fblock:hover,
  .formula.is-settled .fblock:hover .fblock__cap { transform: none; }
  .step, .step__num, .lyr, .lyr-2, .lyr-3,
  .review__metric, .review__who { transform: none; }
  /* Лента дня показана целиком: линия залита, все события зажжены. */
  .tl__fill { height: 100% !important; transition: none; }
  .ev__dot { transform: none !important; }
  /* Отстройка: слои остаются на одном уровне, вычёркивание уже готово.
     Специфичность повторяет боевые правила — иначе они перебьют сброс. */
  .r3d.is-in .duel__them, .r3d.is-in .duel__us,
  .duel__card:hover .duel__them, .duel__card:hover .duel__us { transform: none; }
  .strike, .r3d.is-in .strike { background-size: 100% 1.5px; }
  /* Лист договора виден сразу и никуда не наклоняется. Специфичность
     важна: базовое правило задаёт стартовое состояние с opacity: 0. */
  .clause, .clause.is-on, .clause.is-on:hover { transform: none; opacity: 1; }
  .clause__hl { background-size: 100% 100%; }
  .docs__fan .sheet--1 { transform: translate3d(-146px, 10px, 0) rotate(-9deg); }
  .docs__fan .sheet--3 { transform: translate3d(146px, 10px, 0) rotate(9deg); }
  .h2::after { width: 56px; }
  .card:hover, .invoice:hover, .btn--primary:hover { transform: none; }
}

/* ═══ Фолбэк без скриптов ════════════════════════════════
   Половина страницы лежит с opacity: 0 и ждёт классов от app.js.
   Если его нет — файл не долетел, скрипт упал, браузер старый —
   страница обязана остаться читаемой: всё в плоскости и видно сразу,
   ровно как при prefers-reduced-motion.

   Класс no-js стоит в разметке, снимается инлайновым скриптом в <head>
   и возвращается сторожем, если app.js не отчитался. Селектор из двух
   классов бьёт базовые правила без !important. Состояния вида .is-in
   здесь не перекрываются намеренно: без скрипта их некому поставить.
   ═══════════════════════════════════════════════════════ */

.no-js .reveal,
.no-js .r3d,
.no-js .invoice [data-row],
.no-js .fblock,
.no-js .fsign,
.no-js .clause {
  opacity: 1;
  transform: none;
}

/* Первый экран: сцена карточек не собирается без скрипта — остаётся счёт. */
.no-js .hero3d { perspective: none; }
.no-js .hero3d__cards,
.no-js .hero3d__floor { display: none; }

/* Подчёркивание заголовков и вычёркивание в отстройке дорисованы. */
.no-js .h2::after { width: 56px; }
.no-js .strike { background-size: 100% 1.5px; }
.no-js .clause__hl { background-size: 100% 100%; }

/* Лента дня показана целиком: линия залита, события зажжены. */
.no-js .tl__fill { height: 100%; }
.no-js .ev__time { color: var(--text); }
.no-js .ev__dot { border-color: var(--accent); background: var(--accent); }
.no-js .ev--done .ev__dot { border-color: var(--ok); background: var(--ok); }

/* Веер документов разложен — иначе три листа легли бы ровной стопкой. */
.no-js .docs__fan .sheet--1 { transform: translate3d(-146px, 10px, 0) rotate(-9deg); }
.no-js .docs__fan .sheet--3 { transform: translate3d(146px, 10px, 0) rotate(9deg); }

/* Форму отправляет скрипт: без него показываем прямые контакты вместо неё. */
.form__nojs { display: none; }
.no-js #leadForm { display: none; }
.no-js .form__nojs { display: block; }

@media (max-width: 860px) {
  .no-js .docs__fan .sheet--1 { transform: translate3d(-92px, 8px, 0) rotate(-9deg); }
  .no-js .docs__fan .sheet--3 { transform: translate3d(92px, 8px, 0) rotate(9deg); }
}