/* ============================================================
   BetaLine Voice AI — landing styles
   Наследует дизайн-токены основного сайта betaline-ai.ru
   (assets/css/saas-tokens.css). Новых палитр и шрифтов нет.
   ============================================================ */

@import url('assets/css/saas-tokens.css');

/* ── Reset / base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-cream);
  color: var(--text-body);
  font: var(--t-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--orange-dark); text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
button { font-family: var(--font-sans); }

.zv-container { max-width: var(--container-narrow); margin: 0 auto; padding: 0 20px; }
section { padding: clamp(64px, 9vw, 110px) 0; }

/* ── Typography helpers ── */
.zv-eyebrow {
  font: var(--t-eyebrow);
  letter-spacing: var(--t-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.zv-eyebrow::before {
  content: '';
  width: 22px; height: 2px;
  background: var(--orange);
  border-radius: 2px;
}
.zv-h2 {
  font: 800 clamp(28px, 3.45vw, 44px)/1.14 var(--font-display);
  letter-spacing: -0.6px;
  color: var(--text-ink);
  margin-bottom: 16px;
  text-wrap: balance;
}
.zv-sub {
  font: 400 clamp(16px, 1.75vw, 19px)/1.6 var(--font-sans);
  color: var(--text-mute);
  max-width: 720px;
  text-wrap: pretty;
}
.zv-center { text-align: center; }
.zv-center .zv-sub { margin: 0 auto; }
.zv-center .zv-eyebrow { justify-content: center; }
.zv-center .zv-eyebrow::before { display: none; }

/* Красная линия честности — тонкий маркер, не агрессия */
.zv-redline {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 4px 0 4px 14px;
  border-left: 3px solid;
  border-image: linear-gradient(180deg, var(--orange), var(--red)) 1;
  font: 500 15px/1.5 var(--font-sans);
  color: var(--text-body);
  max-width: 560px;
}

/* ── Buttons ── */
.btn-primary, .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--r-pill);
  font: 700 16px/1 var(--font-sans);
  padding: 17px 30px;
  cursor: pointer;
  border: none;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast);
  text-align: center;
}
.btn-primary {
  background: var(--orange);
  color: #fff;
  box-shadow: var(--shadow-cta);
}
.btn-primary:hover {
  background: var(--orange-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta-hover);
}
.btn-secondary {
  background: #fff;
  color: var(--text-ink);
  border: 1.5px solid var(--orange-soft);
}
.btn-secondary:hover {
  border-color: var(--orange);
  color: var(--orange-dark);
  transform: translateY(-2px);
}
.zv-cta-note { font: var(--t-caption); color: var(--text-faint); margin-top: 10px; }

/* ── Navbar (glass, как sb-navbar основного сайта) ── */
.zv-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(255, 251, 245, 0.85);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(249, 115, 22, 0.10);
  transition: box-shadow var(--dur-fast);
}
.zv-navbar.scrolled { box-shadow: var(--shadow-hairline); }
.zv-nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.zv-logo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font: 800 20px/1 var(--font-display);
  color: var(--text-ink);
  letter-spacing: -0.5px;
  white-space: nowrap;
}
.zv-logo .zv-logo-dot { color: var(--orange); }
.zv-logo-badge {
  font: 700 10px/1 var(--font-mono);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--orange-dark);
  background: var(--orange-tint);
  border-radius: var(--r-pill);
  padding: 5px 9px;
}
.zv-nav-links {
  display: flex;
  gap: 22px;
  margin: 0 auto;
}
.zv-nav-links a {
  font: 600 14px/1 var(--font-sans);
  color: var(--text-body);
  transition: color var(--dur-fast);
}
.zv-nav-links a:hover { color: var(--orange-dark); }
.zv-nav-right { display: flex; align-items: center; gap: 16px; }
.zv-nav-phone {
  font: 700 14px/1 var(--font-sans);
  color: var(--text-ink);
  white-space: nowrap;
}
.zv-nav-phone:hover { color: var(--orange-dark); }
.zv-nav-cta { padding: 12px 22px; font-size: 14px; }
.zv-burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 14px 11px;
  margin-right: -11px;
  flex-direction: column;
  gap: 5px;
}
.zv-burger span {
  width: 22px; height: 2px;
  background: var(--text-ink);
  border-radius: 2px;
  transition: transform var(--dur-fast), opacity var(--dur-fast);
}
.zv-mobile-menu {
  display: none;
  position: fixed;
  top: 64px; left: 0; right: 0;
  z-index: 999;
  background: var(--bg-cream);
  border-bottom: 1px solid var(--orange-soft);
  padding: 12px 20px 20px;
  box-shadow: var(--shadow-lift);
}
.zv-mobile-menu.open { display: block; }
.zv-mobile-menu a {
  display: block;
  padding: 13px 4px;
  font: 600 16px/1 var(--font-sans);
  color: var(--text-ink);
  border-bottom: 1px solid var(--border);
}
.zv-mobile-menu .btn-primary { width: 100%; margin-top: 14px; }

/* ── Hero ── */
.zv-hero {
  padding: clamp(120px, 16vw, 170px) 0 clamp(56px, 7vw, 90px);
  position: relative;
  background:
    radial-gradient(ellipse 80% 60% at 70% 0%, rgba(249, 115, 22, 0.07) 0%, transparent 70%),
    var(--bg-cream);
}
.zv-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}
.zv-hero h1 {
  font: 800 clamp(30px, 4.6vw, 52px)/1.12 var(--font-display);
  letter-spacing: -1.5px;
  color: var(--text-ink);
  margin-bottom: 20px;
  text-wrap: balance;
}
.zv-hero h1 mark {
  background: var(--orange-tint);
  color: var(--orange-dark);
  padding: 2px 10px;
  border-radius: 10px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.zv-hero-sub {
  font: 400 clamp(16px, 2vw, 18px)/1.6 var(--font-sans);
  color: var(--text-mute);
  margin-bottom: 20px;
  max-width: 560px;
  text-wrap: pretty;
}
.zv-hero .zv-redline { margin-bottom: 28px; }
.zv-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 26px;
}
.zv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.zv-chip {
  font: 600 13px/1 var(--font-sans);
  color: var(--text-body);
  background: #fff;
  border: 1px solid var(--orange-soft);
  border-radius: var(--r-pill);
  padding: 9px 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.zv-chip::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
}

/* Hero visual — иллюстрация с подписью-маркировкой */
.zv-hero-visual { position: relative; }
.zv-figure {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-orange);
  border: 1px solid rgba(249, 115, 22, 0.14);
  background: var(--bg-warm);
}
.zv-figure img { width: 100%; }
.zv-mock-label {
  position: absolute;
  left: 14px; bottom: 14px;
  font: 600 12px/1 var(--font-sans);
  color: var(--text-body);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-pill);
  padding: 8px 13px;
}
.zv-hero-float {
  position: absolute;
  right: -10px; top: -18px;
  background: #fff;
  border: 1px solid var(--orange-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: 12px 16px;
  font: 600 13px/1.4 var(--font-sans);
  color: var(--text-ink);
  display: flex;
  align-items: center;
  gap: 10px;
}
.zv-hero-float .zv-pulse {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--green);
  position: relative;
  flex-shrink: 0;
}
.zv-hero-float .zv-pulse::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid rgba(16, 185, 129, 0.4);
  animation: zvPulse 2s var(--ease-out) infinite;
}
@keyframes zvPulse {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* ── Problem (цитаты боли) ── */
.zv-quotes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
}
.zv-quote-card {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  padding: 28px 26px;
  box-shadow: var(--shadow-hairline);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.zv-quote-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}
.zv-quote-tag {
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--red-text);
  background: var(--red-soft);
  border-radius: var(--r-pill);
  padding: 7px 12px;
  align-self: flex-start;
}
.zv-quote-text {
  font: 600 17px/1.5 var(--font-sans);
  color: var(--text-ink);
  flex: 1;
}
.zv-quote-text::before { content: '«'; color: var(--orange); }
.zv-quote-text::after { content: '»'; color: var(--orange); }
.zv-quote-src { font: var(--t-caption); color: var(--text-faint); }
.zv-philosophy {
  margin: 40px auto 0;
  max-width: 660px;
  text-align: center;
  font: 600 clamp(18px, 2.4vw, 22px)/1.5 var(--font-display);
  color: var(--text-ink);
}
.zv-philosophy em {
  font-style: normal;
  color: var(--orange-dark);
}


/* ── Contrast table (рынок vs BetaLine) ── */
.zv-contrast {
  background: var(--bg-warm);
  border-top: 1px solid rgba(249, 115, 22, 0.08);
  border-bottom: 1px solid rgba(249, 115, 22, 0.08);
}
.zv-contrast-table {
  margin-top: 44px;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--orange-soft);
  background: #fff;
  box-shadow: var(--shadow-hairline);
}
.zv-contrast-head, .zv-contrast-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.zv-contrast-head > div {
  padding: 18px 26px;
  font: 700 14px/1.2 var(--font-sans);
}
.zv-contrast-head .zv-col-market { color: var(--text-mute); background: #FAFAF7; }
.zv-contrast-head .zv-col-bl {
  color: #fff;
  background: linear-gradient(135deg, var(--orange), var(--orange-dark));
}
.zv-contrast-row { border-top: 1px solid var(--border); }
.zv-contrast-row > div {
  padding: 16px 26px;
  font: 400 15px/1.5 var(--font-sans);
}
.zv-contrast-row .zv-col-market { color: var(--text-mute); background: #FAFAF7; }
.zv-contrast-row .zv-col-bl { color: var(--text-ink); font-weight: 500; }
.zv-guide-note {
  margin-top: 28px;
  font: 500 16px/1.6 var(--font-sans);
  color: var(--text-body);
  max-width: 640px;
}
.zv-guide-note a { font-weight: 700; border-bottom: 1px solid var(--orange-soft); }

/* ── Task cards (какие звонки отдать боту) ── */
.zv-tasks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 44px;
}
.zv-task-card {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  padding: 24px 22px;
  box-shadow: var(--shadow-hairline);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur);
}
.zv-task-card:hover {
  transform: translateY(-4px);
  border-color: var(--orange-soft);
  box-shadow: var(--shadow-card);
}
.zv-task-ico {
  width: 46px; height: 46px;
  border-radius: var(--r-md);
  background: var(--orange-tint);
  color: var(--orange-dark);
  display: grid; place-items: center;
  margin-bottom: 4px;
  transition: transform var(--dur) var(--ease-out);
}
.zv-task-ico svg { width: 24px; height: 24px; }
.zv-task-card:hover .zv-task-ico { transform: translateY(-2px) rotate(-3deg); }
.zv-task-cta .zv-task-ico { background: var(--orange); color: #fff; }
.zv-task-card h3 {
  font: 700 17px/1.3 var(--font-sans);
  letter-spacing: -0.3px;
  color: var(--text-ink);
}
.zv-task-does { font: 400 14.5px/1.55 var(--font-sans); color: var(--text-body); }
.zv-task-result {
  font: 600 14px/1.5 var(--font-sans);
  color: var(--green-dark);
}
.zv-task-limit {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--orange-soft);
  font: 400 13px/1.5 var(--font-sans);
  color: var(--text-mute);
}
.zv-task-limit strong { color: var(--text-body); font-weight: 600; }

/* ── VS-таблица (AI-бот vs автоинформатор) ── */
.zv-vs-card {
  margin-top: 44px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.zv-vs-col {
  border-radius: var(--r-xl);
  padding: 30px 28px;
  background: #fff;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-hairline);
}
.zv-vs-col.zv-vs-old { background: #FAFAF7; }
.zv-vs-col.zv-vs-new { border-color: var(--orange-soft); box-shadow: var(--shadow-card); }
.zv-vs-col h3 {
  font: 700 18px/1.3 var(--font-sans);
  color: var(--text-ink);
  margin-bottom: 18px;
}
.zv-vs-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.zv-vs-col li {
  font: 400 15px/1.5 var(--font-sans);
  color: var(--text-body);
  padding-left: 26px;
  position: relative;
}
.zv-vs-old li::before {
  content: '—';
  position: absolute; left: 0;
  color: var(--text-faint);
  font-weight: 700;
}
.zv-vs-new li::before {
  content: '✓';
  position: absolute; left: 0;
  color: var(--orange);
  font-weight: 800;
}

/* ── Scenarios (демо-сценарии) — статичная карточная сетка заменена табами (.zv-scenario-tabs ниже) ── */
.zv-demo-note {
  margin: 34px auto 0;
  text-align: center;
  font: 600 15px/1.4 var(--font-sans);
  color: var(--text-body);
  display: flex;
  justify-content: center;
}
.zv-demo-note span {
  background: #fff;
  border: 1.5px dashed var(--orange-soft);
  border-radius: var(--r-pill);
  padding: 12px 22px;
}

/* ── Scenario slider (табы: диалог + статус) ── */
.zv-scenario-tabs {
  margin-top: 44px;
  position: relative;
  border: 1px solid var(--orange-soft);
  border-radius: var(--r-2xl);
  padding: clamp(16px, 2.6vw, 26px);
  background: #fff;
  box-shadow: var(--shadow-hairline);
}
.zv-tab-buttons { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.zv-tab {
  min-height: 46px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--border-soft);
  background: #fff;
  color: var(--text-body);
  font: 700 15px/1 var(--font-sans);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}
.zv-tab:hover { border-color: var(--orange-soft); transform: translateY(-1px); }
.zv-tab.is-active {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  box-shadow: var(--shadow-card);
}
.zv-tab-panel { display: none; grid-template-columns: 1.3fr 0.7fr; gap: 16px; }
.zv-tab-panel.is-active { display: grid; animation: zvFadeUp .35s var(--ease-out) both; }
.zv-call-card, .zv-result-card {
  padding: clamp(18px, 2.6vw, 26px);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  background: var(--bg-warm);
}
.zv-call-card h3 {
  font: 800 clamp(18px, 2.2vw, 21px)/1.3 var(--font-display);
  letter-spacing: -0.4px;
  color: var(--text-ink);
  margin-bottom: 8px;
}
.zv-call-card p { font: 400 15px/1.55 var(--font-sans); color: var(--text-mute); }
.zv-chat-line {
  margin-top: 12px;
  padding: 13px 16px;
  border-radius: 16px;
  font: 600 15px/1.4 var(--font-sans);
  color: var(--text-ink);
  max-width: 90%;
}
.zv-cl-bot { background: #fff; border: 1px solid var(--border-soft); }
.zv-cl-human { background: var(--orange-tint); margin-left: auto; }
.zv-result-card { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.zv-result-card strong {
  font: 800 clamp(26px, 3.4vw, 32px)/1 var(--font-mono);
  letter-spacing: -0.5px;
  color: var(--green-dark);
}
.zv-result-card span { font: 500 14px/1.5 var(--font-sans); color: var(--text-mute); }
.zv-tabs-note {
  display: block;
  margin-top: 16px;
  text-align: right;
  font: 600 12px/1 var(--font-mono);
  letter-spacing: 0.5px;
  color: var(--text-faint);
}
/* на планшете (≤900px) не зажимать статус-карточку в 0.7fr — стек в один столбец */
@media (max-width: 900px) {
  .zv-tab-panel { grid-template-columns: 1fr; }
}

/* ── Plan (3 шага) ── */
.zv-plan { background: var(--bg-warm); }
.zv-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
  counter-reset: zvstep;
}
.zv-step-card {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-hairline);
  display: flex;
  flex-direction: column;
}
.zv-step-img { background: var(--bg-warm); }
.zv-step-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.zv-step-body { padding: 24px; }
.zv-step-num {
  counter-increment: zvstep;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font: 800 15px/1 var(--font-sans);
  margin-bottom: 14px;
  box-shadow: var(--shadow-glow-amber);
}
.zv-step-num::before { content: counter(zvstep); }
.zv-step-body h3 {
  font: 700 19px/1.3 var(--font-sans);
  letter-spacing: -0.3px;
  color: var(--text-ink);
  margin-bottom: 10px;
}
.zv-step-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.zv-step-body li {
  font: 400 14.5px/1.5 var(--font-sans);
  color: var(--text-body);
  padding-left: 20px;
  position: relative;
}
.zv-step-body li::before {
  content: '✓';
  position: absolute; left: 0;
  color: var(--orange);
  font-weight: 800;
  font-size: 12px;
  top: 2px;
}

/* ── Safety ── */
.zv-safety-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 44px;
}
.zv-safety-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-hairline);
}
.zv-safety-check {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--orange-tint);
  color: var(--orange-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  margin-top: 1px;
}
.zv-safety-item p { font: 500 15px/1.5 var(--font-sans); color: var(--text-ink); }
.zv-safety-item p small {
  display: block;
  font: 400 13px/1.5 var(--font-sans);
  color: var(--text-mute);
  margin-top: 3px;
}
.zv-disclosure {
  margin-top: 28px;
  background: #fff;
  border: 1px solid var(--orange-soft);
  border-radius: var(--r-xl);
  padding: 26px 28px;
  box-shadow: var(--shadow-hairline);
}
.zv-disclosure h3 {
  font: 700 17px/1.3 var(--font-sans);
  color: var(--text-ink);
  margin-bottom: 10px;
}
.zv-disclosure p { font: 400 15px/1.6 var(--font-sans); color: var(--text-body); }
.zv-compliance-note {
  margin-top: 22px;
  font: var(--t-caption);
  color: var(--text-faint);
  max-width: 720px;
}

/* ── Result handoff ── */
.zv-result-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 44px 0 36px;
}
.zv-flow-node {
  background: #fff;
  border: 1px solid var(--orange-soft);
  border-radius: var(--r-pill);
  padding: 12px 20px;
  font: 600 14px/1 var(--font-sans);
  color: var(--text-ink);
  box-shadow: var(--shadow-hairline);
  white-space: nowrap;
}
.zv-flow-node.zv-flow-final {
  background: linear-gradient(135deg, var(--orange), var(--orange-dark));
  border: none;
  color: #fff;
  box-shadow: var(--shadow-glow-amber);
}
.zv-flow-arrow { color: var(--orange); font-weight: 800; }
.zv-integrations {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 36px;
}
.zv-integration-col {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  padding: 22px;
  box-shadow: var(--shadow-hairline);
}
.zv-integration-col h4 {
  font: 700 12px/1 var(--font-mono);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--orange-dark);
  margin-bottom: 14px;
}
.zv-integration-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.zv-integration-col li {
  font: 500 15px/1.4 var(--font-sans);
  color: var(--text-body);
  padding-left: 20px;
  position: relative;
}
.zv-integration-col li::before {
  content: '•';
  position: absolute; left: 4px;
  color: var(--orange);
}
.zv-result-mark {
  margin-top: 20px;
  text-align: center;
  font: var(--t-caption);
  color: var(--text-faint);
}

/* ── Pilot ── */
.zv-pilot { background: var(--bg-warm); }
.zv-pilot-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
  margin-top: 44px;
}
.zv-pilot-box {
  background: #fff;
  border: 1px solid var(--orange-soft);
  border-radius: var(--r-2xl);
  padding: 32px;
  box-shadow: var(--shadow-card);
}
.zv-pilot-box h3 {
  font: 700 20px/1.3 var(--font-sans);
  color: var(--text-ink);
  margin-bottom: 18px;
}
.zv-pilot-box ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 11px; }
.zv-pilot-box li {
  font: 500 15px/1.5 var(--font-sans);
  color: var(--text-body);
  padding-left: 26px;
  position: relative;
}
.zv-pilot-box li::before {
  content: '✓';
  position: absolute; left: 0;
  color: var(--orange);
  font-weight: 800;
}
.zv-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.zv-metric-chip {
  font: 600 13px/1.3 var(--font-sans);
  color: var(--text-body);
  background: #fff;
  border: 1px solid var(--orange-soft);
  border-radius: var(--r-pill);
  padding: 9px 14px;
}
.zv-disclaimer { font: var(--t-caption); color: var(--text-faint); margin-top: 18px; }

/* ── Roadmap strip ── */
.zv-roadmap {
  padding: clamp(48px, 6vw, 72px) 0;
}
.zv-roadmap-card {
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
  border: 1px solid var(--orange-soft);
  border-radius: var(--r-2xl);
  padding: clamp(28px, 4vw, 44px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  justify-content: space-between;
}
.zv-roadmap-card .zv-roadmap-text { max-width: 620px; }
.zv-roadmap-card h3 {
  font: 700 clamp(19px, 2.6vw, 24px)/1.3 var(--font-display);
  color: var(--text-ink);
  margin-bottom: 8px;
}
.zv-roadmap-card p { font: 400 15px/1.6 var(--font-sans); color: var(--text-body); }

/* ── FAQ ── */
.zv-faq-list { margin-top: 44px; display: grid; gap: 12px; max-width: 800px; margin-left: auto; margin-right: auto; }
.zv-faq-item {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-hairline);
  overflow: hidden;
  transition: border-color var(--dur-fast);
}
.zv-faq-item[open] { border-color: var(--orange-soft); }
.zv-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  font: 600 16px/1.4 var(--font-sans);
  color: var(--text-ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.zv-faq-item summary::-webkit-details-marker { display: none; }
.zv-faq-item summary::after {
  content: '+';
  font: 400 24px/1 var(--font-sans);
  color: var(--orange);
  transition: transform var(--dur-fast) var(--ease-out);
  flex-shrink: 0;
}
.zv-faq-item[open] summary::after { transform: rotate(45deg); }
.zv-faq-item .zv-faq-body {
  padding: 0 24px 22px;
  font: 400 15px/1.6 var(--font-sans);
  color: var(--text-body);
}

/* ── Final form ── */
.zv-form-section {
  background:
    radial-gradient(ellipse 70% 55% at 50% 100%, rgba(249, 115, 22, 0.08) 0%, transparent 70%),
    var(--bg-warm);
  border-top: 1px solid rgba(249, 115, 22, 0.08);
}
.zv-form-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: clamp(28px, 4vw, 48px);
  margin-top: 44px;
  align-items: start;
}
.zv-lead-form {
  background: #fff;
  border: 1px solid var(--orange-soft);
  border-radius: var(--r-2xl);
  padding: clamp(24px, 3.4vw, 40px);
  box-shadow: var(--shadow-card);
}
.zv-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.zv-field { margin-bottom: 16px; }
.zv-field label {
  display: block;
  font: 600 13.5px/1 var(--font-sans);
  color: var(--text-ink);
  margin-bottom: 7px;
}
.zv-field label span { color: var(--orange); }
.zv-field input,
.zv-field select,
.zv-field textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--orange-soft);
  border-radius: var(--r-sm);
  font: 400 15px/1.4 var(--font-sans);
  color: var(--text-ink);
  background: #fff;
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.zv-field input:focus,
.zv-field select:focus,
.zv-field textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px var(--orange-tint);
}
.zv-field textarea { resize: vertical; min-height: 84px; }
.zv-field input.zv-invalid { border-color: var(--red); }
.zv-form-submit { width: 100%; margin-top: 6px; padding: 18px; font-size: 17px; }
.zv-form-consent {
  margin-top: 14px;
  font: var(--t-caption);
  color: var(--text-faint);
  text-align: center;
}
.zv-form-consent a { color: var(--text-mute); text-decoration: underline; }
.zv-form-msg {
  margin-top: 14px;
  border-radius: var(--r-sm);
  padding: 13px 16px;
  font: 500 14px/1.5 var(--font-sans);
  display: none;
}
.zv-form-msg.error { display: block; background: var(--red-soft); color: var(--red-text); }
.zv-form-success {
  display: none;
  text-align: center;
  padding: 40px 10px;
}
.zv-form-success .zv-success-icon { font-size: 52px; margin-bottom: 16px; }
.zv-form-success h3 {
  font: 800 24px/1.25 var(--font-display);
  color: var(--text-ink);
  margin-bottom: 10px;
}
.zv-form-success p { font: 400 16px/1.6 var(--font-sans); color: var(--text-mute); }

.zv-alt-channels {
  display: grid;
  gap: 14px;
}
.zv-alt-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-hairline);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.zv-alt-card:hover { transform: translateY(-2px); border-color: var(--orange-soft); }
.zv-alt-icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  background: var(--orange-tint);
}
.zv-alt-card b { display: block; font: 700 15px/1.3 var(--font-sans); color: var(--text-ink); }
.zv-alt-card small { font: 400 13px/1.4 var(--font-sans); color: var(--text-mute); }

/* ── Footer ── */
.zv-footer {
  background: var(--bg-ink);
  color: var(--text-on-dark);
  padding: clamp(48px, 6vw, 72px) 0 32px;
}
.zv-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 44px;
}
.zv-footer .zv-logo { color: #fff; margin-bottom: 14px; }
.zv-footer-blurb { font: 400 14px/1.6 var(--font-sans); max-width: 300px; }
.zv-footer h4 {
  font: 700 12px/1 var(--font-mono);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #9CA3AF;
  margin-bottom: 16px;
}
.zv-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.zv-footer a { color: #D1D5DB; font: 400 14px/1.4 var(--font-sans); transition: color var(--dur-fast); }
.zv-footer a:hover { color: var(--orange); }
.zv-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font: var(--t-caption);
  color: #6B7280;
}

/* ── Sticky mobile CTA ── */
.zv-sticky-cta {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 900;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--orange-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lift);
  padding: 10px 10px 10px 16px;
}
.zv-sticky-cta span { font: 600 13.5px/1.3 var(--font-sans); color: var(--text-ink); }
.zv-sticky-cta .btn-primary { padding: 12px 18px; font-size: 14px; white-space: nowrap; }

/* ── Exit intent ── */
#zv-exit-dialog {
  border: none;
  border-radius: var(--r-lg);
  padding: 0;
  max-width: 440px;
  width: calc(100% - 32px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
}
#zv-exit-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.zv-exit-inner { padding: 36px 30px 30px; text-align: center; position: relative; }
.zv-exit-close {
  position: absolute;
  top: 14px; right: 16px;
  background: none; border: none;
  font-size: 22px; line-height: 1;
  cursor: pointer;
  color: var(--text-faint);
  padding: 4px;
}
.zv-exit-heading {
  font: 800 26px/1.2 var(--font-display);
  color: var(--orange-dark);
  margin-bottom: 12px;
}
.zv-exit-body { font: 400 15.5px/1.55 var(--font-sans); color: var(--text-body); margin-bottom: 24px; }
.zv-exit-cta { width: 100%; }

/* ── Reveal on scroll ── */
.zv-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.zv-reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .zv-reveal { opacity: 1; transform: none; transition: none; }
  .zv-hero-float .zv-pulse::after { animation: none; }
  .zv-contrast-table .zv-contrast-row { opacity: 1; transform: none; transition: none; }
  .zv-cr-ico { transform: none !important; }
  .zv-tab-panel.is-active { animation: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .zv-nav-links { display: none; }
  .zv-nav-phone { display: none; }
  .zv-burger { display: flex; }
  .zv-hero-grid { grid-template-columns: 1fr; }
  .zv-hero-visual { max-width: 560px; }
  .zv-quotes-grid, .zv-tasks-grid, .zv-steps-grid, .zv-integrations {
    grid-template-columns: repeat(2, 1fr);
  }
  .zv-pilot-grid { grid-template-columns: 1fr; }
  .zv-form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .zv-quotes-grid, .zv-tasks-grid, .zv-steps-grid, .zv-integrations,
  .zv-vs-card, .zv-safety-grid, .zv-form-row, .zv-tab-panel {
    grid-template-columns: 1fr;
  }
  .zv-chat-line { max-width: 100%; }
  .zv-contrast-head, .zv-contrast-row { grid-template-columns: 1fr; }
  .zv-contrast-head .zv-col-market { display: none; }
  .zv-contrast-row .zv-col-market { border-bottom: 1px dashed var(--border); }
  .zv-hero-ctas .btn-primary, .zv-hero-ctas .btn-secondary { width: 100%; }
  .zv-hero-float { display: none; }
  .zv-sticky-cta.on { display: flex; }
  .zv-footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .zv-result-flow { flex-direction: column; }
  .zv-flow-arrow { transform: rotate(90deg); }
  .zv-nav-cta { display: none; }
}

/* ============================================================
   BetaLine Chat Widget — CSS 1:1 с основного сайта betaline-ai.ru
   ============================================================ */
    /* === BetaLine Chat Widget (from legacy) === */
    #bl-chat-btn {
        position: fixed;
        bottom: 24px;
        right: 24px;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: linear-gradient(135deg, #F97316, #EA580C);
        border: none;
        cursor: pointer;
        z-index: 99998;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 24px rgba(249,115,22,0.35);
        transition: transform 0.3s, box-shadow 0.3s;
    }
    #bl-chat-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 8px 32px rgba(249,115,22,0.5);
    }
    #bl-chat-btn svg { width: 28px; height: 28px; fill: #fff; }
    #bl-chat-btn .bl-badge {
        position: absolute;
        top: -2px;
        right: -2px;
        width: 16px;
        height: 16px;
        background: #10b981;
        border-radius: 50%;
        border: 2px solid #fff;
    }

    #bl-chat-window {
        display: none;
        position: fixed;
        bottom: 96px;
        right: 24px;
        width: 380px;
        height: 520px;
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 20px 60px rgba(0,0,0,0.15);
        z-index: 99999;
        flex-direction: column;
        overflow: hidden;
        font-family: 'Inter', sans-serif;
    }
    #bl-chat-window.open { display: flex; }

    #bl-chat-header {
        background: linear-gradient(135deg, #F97316, #EA580C);
        color: #fff;
        padding: 16px 20px;
        display: flex;
        align-items: center;
        gap: 12px;
        flex-shrink: 0;
    }
    #bl-chat-header .bl-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(255,255,255,0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-weight: 800;
    }
    #bl-chat-header .bl-info { flex: 1; }
    #bl-chat-header .bl-info h4 { margin: 0; font-size: 15px; font-weight: 700; }
    #bl-chat-header .bl-info span { font-size: 12px; opacity: 0.8; }
    #bl-chat-header .bl-close {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: none;
        background: rgba(255,255,255,0.2);
        color: #fff;
        cursor: pointer;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #bl-chat-header .bl-close:hover { background: rgba(255,255,255,0.3); }

    #bl-chat-messages {
        flex: 1;
        overflow-y: auto;
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .bl-msg {
        max-width: 85%;
        padding: 12px 16px;
        border-radius: 16px;
        font-size: 14px;
        line-height: 1.5;
        white-space: pre-wrap;
        word-wrap: break-word;
        overflow-wrap: anywhere;
    }
    .bl-msg.bot {
        background: #f1f5f9;
        color: #1e293b;
        align-self: flex-start;
        border-bottom-left-radius: 4px;
    }
    .bl-msg.user {
        background: #F97316;
        color: #fff;
        align-self: flex-end;
        border-bottom-right-radius: 4px;
    }
    .bl-msg.system {
        background: #f0fdf4;
        color: #166534;
        align-self: center;
        font-size: 13px;
        text-align: center;
        border-radius: 12px;
    }
    .bl-msg.bl-typing {
        font-weight: 700;
        letter-spacing: 2px;
        color: #64748b;
        animation: blTypingPulse 1.1s ease-in-out infinite;
    }
    @keyframes blTypingPulse {
        0%, 100% { opacity: 0.45; }
        50% { opacity: 1; }
    }

    .bl-quick-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 0 20px 12px;
    }
    .bl-quick-btn {
        padding: 8px 14px;
        border: 1.5px solid #e2e8f0;
        border-radius: 100px;
        background: #fff;
        color: #475569;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        font-family: 'Inter', sans-serif;
        transition: all 0.2s;
    }
    .bl-quick-btn:hover {
        border-color: #F97316;
        color: #F97316;
    }

    #bl-chat-input-wrap {
        padding: 12px 16px;
        border-top: 1px solid #f1f5f9;
        display: flex;
        gap: 8px;
        align-items: center;
        flex-shrink: 0;
    }
    #bl-chat-input {
        flex: 1;
        border: 1.5px solid #e2e8f0;
        border-radius: 24px;
        padding: 10px 16px;
        font-size: 14px;
        outline: none;
        font-family: 'Inter', sans-serif;
    }
    #bl-chat-input:focus { border-color: #F97316; }
    #bl-chat-send {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: none;
        background: #F97316;
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    #bl-chat-send:hover { background: #EA580C; }
    #bl-chat-send svg { width: 18px; height: 18px; fill: #fff; }

    #bl-chat-footer {
        text-align: center;
        padding: 8px;
        font-size: 11px;
        color: #94a3b8;
        border-top: 1px solid #f1f5f9;
        flex-shrink: 0;
    }
    #bl-chat-footer a { color: #F97316; text-decoration: none; font-weight: 600; }

    #bl-callback-form {
        display: none;
        padding: 0 20px 12px;
    }
    #bl-callback-form input {
        width: 100%;
        padding: 10px 14px;
        border: 1.5px solid #e2e8f0;
        border-radius: 12px;
        font-size: 13px;
        margin-bottom: 8px;
        outline: none;
        font-family: 'Inter', sans-serif;
        box-sizing: border-box;
    }
    #bl-callback-form input:focus { border-color: #F97316; }
    #bl-callback-form button {
        width: 100%;
        padding: 10px;
        background: #F97316;
        color: #fff;
        border: none;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        font-family: 'Inter', sans-serif;
    }

    @media (max-width: 480px) {
        #bl-chat-window {
            bottom: 0;
            right: 0;
            width: 100%;
            height: 100%;
            border-radius: 0;
        }
        #bl-chat-btn { bottom: 16px; right: 16px; width: 52px; height: 52px; }
        #bl-chat-btn svg { width: 24px; height: 24px; }
    }

    /* z-index overrides — must sit above #sticky-cta (z=90) */
    #bl-chat-btn { z-index: 99998; }
    #bl-chat-window { z-index: 99999; }
    /* smooth bottom-offset animation */
    #bl-chat-btn { transition: transform 0.3s, box-shadow 0.3s, bottom 0.3s ease; }
    #bl-chat-window { transition: bottom 0.3s ease; }
    /* ── #sb-plan scroll-spy timeline (legacy port) ── */

/* виджет-инпут: у основного сайта id=bl-widget-chat-input */
#bl-widget-chat-input { flex: 1; border: 1.5px solid #e2e8f0; border-radius: 24px; padding: 10px 16px; font-size: 14px; outline: none; font-family: 'Inter', sans-serif; }
#bl-widget-chat-input:focus { border-color: #F97316; }


/* На мобиле чат-кнопка не перекрывает hero CTA: появляется после скролла */
@media (max-width: 640px) {
  #bl-chat-btn.zv-fab-wait { opacity: 0; pointer-events: none; transform: scale(0.6); }
  #bl-chat-btn { transition: transform 0.3s, box-shadow 0.3s, opacity 0.3s, bottom 0.3s ease; }
  /* когда виден sticky CTA — чат приподнимается над ним */
  body.zv-sticky-visible #bl-chat-btn { bottom: 78px; }
}

/* ── Codex review: тёплая ретокенизация чат-виджета (логика 1:1, цвета — бренд) ── */
.bl-msg.bot { background: var(--bg-warm, #FFF7ED); color: var(--text-ink, #1A1A1A); }
.bl-msg.bl-typing { color: var(--text-mute, #6B7280); }
.bl-quick-btn { border-color: var(--orange-soft, #FED7AA); color: var(--text-body, #374151); background: #fff; }
.bl-quick-btn:hover { border-color: var(--orange, #F97316); color: var(--orange-dark, #EA580C); }
#bl-chat-input-wrap { border-top-color: var(--orange-tint, #FFEDD5); }
#bl-widget-chat-input, #bl-chat-input { border-color: var(--orange-soft, #FED7AA); }
#bl-widget-chat-input:focus, #bl-chat-input:focus { border-color: var(--orange, #F97316); }
#bl-callback-form input { border-color: var(--orange-soft, #FED7AA); }
#bl-chat-footer { border-top-color: var(--orange-tint, #FFEDD5); color: var(--text-faint, #9CA3AF); }

/* ── Codex review: на мобиле FAB скрыт и когда видна форма заявки ── */
@media (max-width: 640px) {
  body.zv-form-visible #bl-chat-btn { opacity: 0; pointer-events: none; transform: scale(0.6); }
}

/* ============================================================
   REWORK v2 — «живой» слой (по фидбэку + Codex-план)
   ============================================================ */

/* Заголовки крупные, но без тяжёлых переносов */
.zv-h2 { font: 850 clamp(28px, 3.35vw, 44px)/1.15 var(--font-display); letter-spacing: -0.6px; max-width: 900px; }
.zv-center .zv-h2 { margin-left: auto; margin-right: auto; }

/* ── Логотип-эквалайзер ── */
.zv-logomark { width: 26px; height: 22px; fill: var(--orange); flex-shrink: 0; align-self: center; }
.zv-logomark rect { transform-origin: center; animation: zvBar 1.6s ease-in-out infinite; }
.zv-logomark rect:nth-child(1) { animation-delay: 0s; }
.zv-logomark rect:nth-child(2) { animation-delay: .2s; }
.zv-logomark rect:nth-child(3) { animation-delay: .4s; }
.zv-logomark rect:nth-child(4) { animation-delay: .6s; }
.zv-logomark rect:nth-child(5) { animation-delay: .8s; }
@keyframes zvBar { 0%,100% { transform: scaleY(0.55); } 50% { transform: scaleY(1); } }
.zv-logo { align-items: center; }

/* ── Side dot-nav ── */
.zv-dotnav { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 950; display: flex; flex-direction: column; gap: 14px; }
.zv-dotnav a { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--orange-soft); transition: background var(--dur-fast), transform var(--dur-fast); }
.zv-dotnav a:hover { background: var(--orange); transform: scale(1.3); }
.zv-dotnav a.active { background: var(--orange); box-shadow: 0 0 0 4px var(--orange-tint); }
.zv-dotnav a span { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 600 12px/1 var(--font-sans); color: var(--text-ink); background: #fff; border: 1px solid var(--orange-soft); border-radius: var(--r-pill); padding: 6px 12px; opacity: 0; pointer-events: none; transition: opacity var(--dur-fast); }
.zv-dotnav a:hover span { opacity: 1; }
@media (max-width: 1180px) { .zv-dotnav { display: none; } }

/* ── Hero: волна на фоне ── */
.zv-hero { overflow: hidden; }
.zv-hero-wave { position: absolute; top: 90px; right: -5%; width: 62%; height: 220px; opacity: 0.9; pointer-events: none; }
.zv-hero-wave svg { width: 100%; height: 100%; }
.zv-hero-wave path { stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: zvDraw 6s var(--ease-out) forwards; }
.zv-hero-wave path:nth-child(2) { animation-delay: .6s; }
@keyframes zvDraw { to { stroke-dashoffset: 0; } }

/* ── Живая карточка звонка ── */
.zv-live-card { position: relative; background: #fff; border: 1px solid rgba(249,115,22,0.16); border-radius: var(--r-2xl); box-shadow: var(--shadow-orange); padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 14px; }
.zv-live-head { display: flex; align-items: center; gap: 12px; }
.zv-live-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--green); position: relative; flex-shrink: 0; }
.zv-live-dot::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(16,185,129,0.4); animation: zvPulse 2s var(--ease-out) infinite; }
.zv-live-title { flex: 1; min-width: 0; }
.zv-live-title b { display: block; font: 700 16px/1.2 var(--font-sans); color: var(--text-ink); }
.zv-live-title small { font: 500 12px/1.3 var(--font-sans); color: var(--text-faint); }
.zv-live-status { font: 700 11px/1 var(--font-mono); letter-spacing: .5px; text-transform: uppercase; color: var(--orange-dark); background: var(--orange-tint); border-radius: var(--r-pill); padding: 7px 12px; white-space: nowrap; transition: background var(--dur), color var(--dur); }
.zv-live-status.done { color: #fff; background: var(--green); }

.zv-eq { display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 4px; }
.zv-eq i { flex: 1; border-radius: 3px; background: var(--orange); opacity: .85; animation: zvEq 1.1s ease-in-out infinite; height: 30%; }
.zv-eq i:nth-child(3n)  { animation-delay: .15s; }
.zv-eq i:nth-child(3n+1){ animation-delay: .45s; }
.zv-eq i:nth-child(4n)  { animation-delay: .3s; }
.zv-eq i:nth-child(5n)  { animation-delay: .6s; }
.zv-eq.idle i { animation-play-state: paused; height: 16% !important; opacity: .35; }
@keyframes zvEq { 0%,100% { height: 18%; } 50% { height: 92%; } }

.zv-transcript { display: flex; flex-direction: column; gap: 8px; min-height: 178px; }
.zv-msg { max-width: 88%; padding: 10px 14px; border-radius: 14px; font: 400 13.5px/1.45 var(--font-sans); opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }
.zv-msg.show { opacity: 1; transform: none; }
.zv-msg.bot { background: var(--orange-tint); color: var(--text-ink); align-self: flex-start; border-bottom-left-radius: 4px; }
.zv-msg.client { background: #F5F1EA; color: var(--text-body); align-self: flex-end; border-bottom-right-radius: 4px; }
.zv-msg.final { background: #ECFDF5; color: var(--green-dark); font-weight: 600; align-self: center; text-align: center; border-radius: var(--r-pill); }

.zv-pipe { display: flex; gap: 6px; }
.zv-pipe-step { flex: 1; text-align: center; font: 700 10.5px/1.2 var(--font-mono); letter-spacing: .3px; text-transform: uppercase; color: var(--text-faint); background: #FAFAF7; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 9px 4px; transition: all var(--dur-fast); }
.zv-pipe-step.on { color: var(--orange-dark); background: var(--orange-tint); border-color: var(--orange-soft); }
.zv-pipe-step.done { color: var(--green-dark); background: #ECFDF5; border-color: rgba(16,185,129,.3); }
.zv-live-label { position: static; align-self: flex-start; margin-top: 2px; max-width: calc(100% - 150px); }

.zv-operator-card { position: absolute; right: -8px; bottom: -26px; display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid var(--orange-soft); border-radius: var(--r-pill); box-shadow: var(--shadow-card); padding: 9px 18px 9px 10px; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast); animation: zvFloat 4s ease-in-out infinite; }
.zv-operator-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-cta); }
.zv-operator-card img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.zv-operator-card b { display: block; font: 700 13.5px/1.2 var(--font-sans); color: var(--text-ink); }
.zv-operator-card small { font: 400 12px/1.3 var(--font-sans); color: var(--text-mute); }
.zv-tg-ic { width: 22px; height: 22px; fill: #2AABEE; flex-shrink: 0; }
@keyframes zvFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -6px; } }

/* ── Problems: строки с персонажами (подача основного сайта) ── */
.zv-problem-row { display: flex; align-items: center; gap: clamp(28px, 5vw, 64px); margin-top: 46px; }
.zv-problem-row--rev { flex-direction: row-reverse; }
.zv-problem-img { flex: 0 0 clamp(200px, 24vw, 300px); max-width: clamp(200px, 24vw, 300px); background: #fff; border: 1px solid var(--border-soft); border-radius: var(--r-2xl); box-shadow: var(--shadow-hairline); overflow: hidden; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur); }
.zv-problem-text { flex: 1 1 auto; min-width: 0; background: #fff; border: 1px solid var(--border-soft); border-radius: var(--r-xl); box-shadow: var(--shadow-hairline); padding: clamp(22px, 3vw, 34px); }
.zv-problem-row:hover .zv-problem-img { transform: translateY(-5px) rotate(-0.4deg); box-shadow: var(--shadow-card); }
.zv-problem-img img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.zv-problem-text h3 { font: 800 clamp(22px, 2.6vw, 30px)/1.2 var(--font-display); letter-spacing: -0.5px; color: var(--text-ink); margin-bottom: 14px; }
.zv-problem-text blockquote { margin: 0 0 16px; padding-left: 18px; border-left: 3px solid var(--orange); font: 700 clamp(18px, 2.1vw, 24px)/1.34 var(--font-display); color: var(--text-ink); }
.zv-problem-text blockquote mark, .zv-hero h1 mark, .zv-contrast-row mark {
  background: var(--orange-tint); color: var(--orange-dark); padding: 2px 8px; border-radius: 8px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.zv-problem-text p { font: 400 16px/1.62 var(--font-sans); color: var(--text-body); margin-bottom: 10px; }
.zv-problem-text footer { margin-top: 14px; font: var(--t-caption); color: var(--text-faint); }
@media (max-width: 860px) {
  .zv-problem-row, .zv-problem-row--rev { flex-direction: column; gap: 18px; }
  .zv-problem-img { flex-basis: auto; max-width: 260px; margin: 0 auto; }
}

/* ── Contrast: инфографика по строкам + каскад ── */
.zv-contrast-row > div { display: flex; align-items: center; gap: 12px; }
.zv-contrast-row { transition: background var(--dur-fast); }
.zv-contrast-row:hover .zv-col-bl { background: var(--bg-warm); }
/* тематическая иконка-бейдж в начале каждой строки */
.zv-cr-ico { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; }
.zv-cr-ico svg { width: 19px; height: 19px; }
.zv-col-market .zv-cr-ico { background: #F1EFEA; color: var(--text-faint); }
.zv-col-bl .zv-cr-ico { background: var(--orange-tint); color: var(--orange-dark); }
/* вердикт-маркер: зелёная галочка перед текстом BetaLine (рынок остаётся приглушённым) */
.zv-col-bl .zv-cr-ico + span::before { content: '✓\00a0'; color: var(--green); font-weight: 800; }
/* каскадное появление строк, когда таблица во вьюпорте.
   .zv-contrast-head — :nth-of-type(1) (появляется сразу), 6 строк данных — nth-of-type 2..7 */
.zv-contrast-table .zv-contrast-row { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.zv-contrast-table.visible .zv-contrast-row { opacity: 1; transform: none; }
.zv-contrast-table.visible .zv-contrast-head { transition-delay: 0s; }
.zv-contrast-table.visible .zv-contrast-row:nth-of-type(2) { transition-delay: .05s; }
.zv-contrast-table.visible .zv-contrast-row:nth-of-type(3) { transition-delay: .11s; }
.zv-contrast-table.visible .zv-contrast-row:nth-of-type(4) { transition-delay: .17s; }
.zv-contrast-table.visible .zv-contrast-row:nth-of-type(5) { transition-delay: .23s; }
.zv-contrast-table.visible .zv-contrast-row:nth-of-type(6) { transition-delay: .29s; }
.zv-contrast-table.visible .zv-contrast-row:nth-of-type(7) { transition-delay: .35s; }
.zv-cr-ico { transition: transform .5s var(--ease-out); }
.zv-contrast-table:not(.visible) .zv-cr-ico { transform: scale(.6); }

/* ── Tasks: кнопка "ещё" и CTA-карточка ── */
.zv-task-cta { background: linear-gradient(135deg, var(--orange-tint), #FFF7ED); border-color: var(--orange-soft); text-align: center; justify-content: center; align-items: center; }
.zv-task-cta .btn-primary { padding: 13px 22px; font-size: 14px; margin-top: 6px; }
.zv-tasks-more { background: none; border: 1.5px dashed var(--orange-soft); border-radius: var(--r-pill); padding: 12px 26px; font: 700 14px/1 var(--font-sans); color: var(--orange-dark); cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); }
.zv-tasks-more:hover { border-color: var(--orange); background: var(--orange-tint); }
.zv-task-extra { animation: zvFadeUp .5s var(--ease-out); }
@keyframes zvFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ── Quiz ── */
.zv-quiz-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(24px, 3.5vw, 44px); margin-top: 44px; align-items: start; }
.zv-quiz-card { background: #fff; border: 1px solid var(--orange-soft); border-radius: var(--r-2xl); box-shadow: var(--shadow-card); padding: clamp(24px, 3vw, 38px); position: relative; }
.zv-quiz-group { border: none; margin: 0 0 26px; padding: 0; }
.zv-quiz-group legend { font: 700 17px/1.3 var(--font-sans); color: var(--text-ink); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.zv-quiz-num { width: 28px; height: 28px; border-radius: 50%; background: var(--orange); color: #fff; font: 800 13px/1 var(--font-sans); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-glow-amber); flex-shrink: 0; }
.zv-quiz-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.zv-qchip { font: 600 14px/1 var(--font-sans); color: var(--text-body); background: #fff; border: 1.5px solid var(--border-soft); border-radius: var(--r-pill); padding: 12px 18px; cursor: pointer; transition: all var(--dur-fast) var(--ease-out); }
.zv-qchip:hover { border-color: var(--orange); color: var(--orange-dark); transform: translateY(-1px); }
.zv-qchip.on { background: var(--orange); border-color: var(--orange); color: #fff; box-shadow: var(--shadow-glow-amber); }
.zv-quiz-side { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 18px; }
.zv-quiz-side img { border-radius: var(--r-2xl); border: 1px solid var(--border-soft); box-shadow: var(--shadow-hairline); background: var(--bg-warm); }
.zv-quiz-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.zv-quiz-side li { font: 500 15px/1.4 var(--font-sans); color: var(--text-body); padding-left: 26px; position: relative; }
.zv-quiz-side li::before { content: '✓'; position: absolute; left: 0; color: var(--orange); font-weight: 800; }
@media (max-width: 900px) { .zv-quiz-grid { grid-template-columns: 1fr; } .zv-quiz-side { position: static; max-width: 420px; margin: 0 auto; } }

/* ── Plan scroll-spy (паттерн #sb-plan основного сайта) ── */
.zv-planspy { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); margin-top: 50px; align-items: start; }
.zv-planspy-steps { position: relative; padding-left: 34px; }
.zv-ps-track, .zv-ps-fill { position: absolute; left: 8px; top: 8px; width: 3px; border-radius: 3px; }
.zv-ps-track { background: var(--orange-tint); }
.zv-ps-fill { background: linear-gradient(180deg, var(--orange), var(--orange-dark)); height: 0; transition: height .3s var(--ease-out); }
.zv-ps-step { position: relative; padding: 26px 0; opacity: .38; transition: opacity .35s var(--ease-out); }
.zv-ps-step.is-active { opacity: 1; }
.zv-ps-dot { position: absolute; left: -34px; top: 34px; width: 19px; height: 19px; border-radius: 50%; background: #fff; border: 3px solid var(--orange-soft); transition: all .3s var(--ease-out); }
.zv-ps-step.is-active .zv-ps-dot { border-color: var(--orange); background: var(--orange); box-shadow: 0 0 0 6px var(--orange-tint); }
.zv-ps-step h3 { font: 800 clamp(19px, 2.2vw, 24px)/1.25 var(--font-display); letter-spacing: -0.4px; color: var(--text-ink); margin-bottom: 8px; }
.zv-ps-step h3 i { font: 700 13px/1 var(--font-mono); font-style: normal; color: var(--orange); margin-right: 8px; }
.zv-ps-step p { font: 400 15.5px/1.6 var(--font-sans); color: var(--text-mute); max-width: 420px; }
.zv-ps-spacer { height: 12vh; }
.zv-planspy-asset { position: sticky; top: 110px; }
.zv-ps-frame { position: relative; aspect-ratio: 3 / 2; border-radius: var(--r-2xl); overflow: hidden; border: 1px solid rgba(249,115,22,0.14); box-shadow: var(--shadow-orange); background: var(--bg-warm); }
.zv-ps-img { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }
.zv-ps-img.is-active { opacity: 1; transform: none; }
.zv-ps-img img { width: 100%; height: 100%; object-fit: cover; }
.zv-ps-hint { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; font: 500 13px/1 var(--font-sans); color: var(--text-faint); }
.zv-ps-hint svg { width: 18px; height: 18px; fill: none; stroke: var(--text-faint); stroke-width: 1.6; }
.zv-ps-hint svg line { animation: zvScrollHint 1.6s ease-in-out infinite; }
@keyframes zvScrollHint { 0%,100% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(5px); opacity: 0; } }
@media (max-width: 900px) {
  .zv-planspy { grid-template-columns: 1fr; }
  .zv-planspy-asset { position: sticky; top: 72px; z-index: 5; order: -1; }
  .zv-ps-hint { display: none; }
  .zv-ps-spacer { height: 0; }
}

/* ── Safety gates ── */
.zv-gates-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 44px; }
.zv-gate { background: #fff; border: 1px solid var(--border-soft); border-radius: var(--r-xl); padding: 28px 26px; box-shadow: var(--shadow-hairline); position: relative; overflow: hidden; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur), border-color var(--dur); }
.zv-gate:hover { transform: translateY(-4px); border-color: var(--orange-soft); box-shadow: var(--shadow-card); }
.zv-gate-num { position: absolute; right: 18px; top: 10px; font: 800 52px/1 var(--font-display); color: var(--orange-tint); }
.zv-gate h3 { font: 700 19px/1.3 var(--font-sans); color: var(--text-ink); margin-bottom: 10px; position: relative; }
.zv-gate p { font: 400 15px/1.55 var(--font-sans); color: var(--text-body); position: relative; }
@media (max-width: 640px) { .zv-gates-grid { grid-template-columns: 1fr; } }

/* ── Result: живой поток + чипы интеграций ── */
.zv-flow-node { transition: all var(--dur-fast); }
.zv-flow-node.live { background: var(--orange-tint); border-color: var(--orange); color: var(--orange-dark); transform: translateY(-2px); box-shadow: var(--shadow-glow-amber); }
.zv-flow-node.zv-flow-final.live { background: linear-gradient(135deg, var(--orange), var(--orange-dark)); color: #fff; }
.zv-int-chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 34px; }
.zv-int-label { font: 700 11px/1 var(--font-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--orange-dark); margin: 0 4px 0 10px; }

/* ── Roadmap: пульсирующая кнопка ── */
.zv-roadmap-actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.zv-callbot-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: none; border-radius: var(--r-pill); padding: 15px 26px; font: 700 15px/1 var(--font-sans); color: var(--orange-dark); background: #fff; border: 1.5px solid var(--orange-soft); cursor: default; opacity: .92; }
.zv-callbot-pulse { width: 11px; height: 11px; border-radius: 50%; background: var(--orange); position: relative; }
.zv-callbot-pulse::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--pulse-ring-color); animation: zvPulse 1.8s var(--ease-out) infinite; }

/* ── Форма: одна колонка + плашки прямой связи ── */
.zv-form-wrap { max-width: 640px; margin: 44px auto 0; }
.zv-direct { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 26px; }
.zv-direct-label { font: 500 15px/1 var(--font-sans); color: var(--text-mute); }
.zv-direct-pill { display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1.5px solid var(--border-soft); border-radius: var(--r-pill); padding: 11px 20px; font: 700 15px/1 var(--font-sans); color: var(--text-ink); cursor: pointer; transition: all var(--dur-fast) var(--ease-out); }
.zv-direct-pill:hover { border-color: var(--orange); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.zv-ic-tg, .zv-ic-phone { width: 22px; height: 22px; flex-shrink: 0; }

/* ── Каскадные появления ── */
.zv-contrast-row.zv-stagger, .zv-chip { transition-property: opacity, transform; }
.zv-chips .zv-chip { opacity: 0; transform: translateY(10px); animation: zvFadeUp .5s var(--ease-out) forwards; }
.zv-chips .zv-chip:nth-child(1) { animation-delay: .5s; }
.zv-chips .zv-chip:nth-child(2) { animation-delay: .62s; }
.zv-chips .zv-chip:nth-child(3) { animation-delay: .74s; }
.zv-chips .zv-chip:nth-child(4) { animation-delay: .86s; }
.zv-chips .zv-chip:nth-child(5) { animation-delay: .98s; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .zv-logomark rect, .zv-eq i, .zv-hero-wave path, .zv-operator-card, .zv-callbot-pulse::after,
  .zv-ps-hint svg line, .zv-chips .zv-chip, .zv-live-dot::after { animation: none !important; }
  .zv-chips .zv-chip { opacity: 1; transform: none; }
  .zv-msg { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 640px) {
  .zv-operator-card { position: static; margin-top: 16px; justify-content: center; }
  .zv-hero-wave { display: none; }
  .zv-eq { height: 34px; }
  .zv-transcript { min-height: 150px; }
  .zv-roadmap-actions { width: 100%; }
}

@media (max-width: 760px) {
  #problems { padding-bottom: 120px; }
  .zv-problem-text blockquote { font-size: 18px; }
}