/* =========================================================
   ГОЛОС — направление G «Живой звонок»
   Палитра: крем / уголь / коралл / зелёный / приглушённый / лайм
   ========================================================= */

:root {
  --cream: #faf6ef;
  --cream-2: #f3ecdf;
  --cream-3: #ece2d1;
  --coal: #14110c;
  --coal-soft: #211c14;
  /* lifted warm-dark surfaces — used for agent bubbles & dark panels so
     content separates from the near-black card without going grey */
  --coal-card: #1c1812;
  --bubble-agent: #2a241d;
  --bubble-agent-line: #3a3228;
  --coral: #ff4d2e;
  --coral-deep: #e23414;
  --coral-soft: #ff6a4d;
  /* readable coral for TEXT on cream/light — ~5.0:1 (WCAG AA).
     --coral itself stays for fills, decor, glows & dark-section accents. */
  --coral-text: #c93418;
  --green: #1e7a3c;
  --green-bright: #28a04f;
  --green-glow: #7fe7a3;
  /* darkened so muted text on cream clears WCAG AA (~5.0:1) */
  --muted: #6b6358;
  /* secondary / ONLY on dark surfaces — lime has no AA contrast on cream.
     Using it on light backgrounds is the root cause of the old "lime sticker"
     look; on light, reach for --coral / --green instead. */
  --lime: #d8f34f;

  --ink: var(--coal);
  --ink-on-dark: #faf6ef;     /* full-strength cream for body text on dark */
  --ink-on-bubble: #f3ead9;   /* warm near-white for agent reply text */
  --muted-on-dark: #b8af9b;

  --maxw: 1180px;
  --radius: 18px;
  --radius-lg: 26px;
  --radius-sm: 11px;
  --radius-pill: 999px;

  /* ---- "bridge" sub-set: the visual seam landing → кабинет ----
     Used only in the transition zone (products.html cards that open the
     cabinet, and their CTAs). Values sit between the landing's loud language
     (18–26px radii, layered shadows) and the cabinet's density (8–14px radii,
     near-flat shadows): 12px corners + a hairline cabinet-grade shadow. So a
     card that says "Открыть в кабинете" already leans toward кабинет.
     The cabinet itself uses --radius-lg:14px / --shadow-pop; --shadow-app is
     tuned a touch softer than кабинет so it still belongs on the lander. */
  --radius-app: 12px;
  --shadow-app:
    0 1px 2px rgba(20, 17, 12, 0.06),
    0 4px 16px -8px rgba(20, 17, 12, 0.10);
  --shadow-app-hover:
    0 2px 4px -1px rgba(20, 17, 12, 0.08),
    0 10px 28px -14px rgba(40, 26, 18, 0.22);

  /* warm, tinted depth — never flat grey box-shadows */
  --shadow-card:
    0 2px 4px -2px rgba(20, 17, 12, 0.18),
    0 18px 36px -18px rgba(20, 17, 12, 0.42),
    0 40px 80px -40px rgba(34, 24, 18, 0.5);
  --shadow-soft:
    0 1px 2px rgba(20, 17, 12, 0.05),
    0 5px 14px -8px rgba(40, 26, 18, 0.22),
    0 18px 40px -24px rgba(40, 26, 18, 0.42);
  --shadow-coral:
    0 10px 26px -10px rgba(255, 77, 46, 0.5),
    0 4px 10px -4px rgba(226, 52, 20, 0.4);
  --shadow-lift:
    0 2px 4px -2px rgba(20, 17, 12, 0.14),
    0 10px 22px -10px rgba(40, 26, 18, 0.28),
    0 36px 70px -28px rgba(40, 26, 18, 0.5);

  --font-display: "Unbounded", "Unbounded Fallback", system-ui, sans-serif;
  --font-body: "Golos Text", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* motion curves — distinct personalities, never linear */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);          /* settle / reveal */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);        /* expressive out */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot */
  --ease-inout: cubic-bezier(0.65, 0.05, 0.36, 1);  /* hover transitions */

  /* single-source icon masks — the SAME Lucide check path as the inline <svg>
     in .crm-check / scenes, so list bullets share one handwriting (no glyph
     font checkmark/circle). Painted via mask on ::before; colour from
     background-color. stroke-width:2 matches the .ico system. */
  --ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-11'/%3E%3C/svg%3E");
  --ico-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3C/svg%3E");
}

/* ---------- font fallback metrics (kill CLS while Unbounded loads) ----------
   A local-only fallback face whose metrics are scaled to match Unbounded's
   footprint, so the swap from system font to Unbounded barely shifts layout. */
@font-face {
  font-family: "Unbounded Fallback";
  src: local("Arial");
  size-adjust: 78%;
  ascent-override: 104%;
  descent-override: 28%;
  line-gap-override: 0%;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  font-size: clamp(16px, 1.05vw + 13px, 18px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
  overflow-x: hidden;
}

::selection { background: var(--coral); color: #fff; }
/* on dark surfaces coral-on-coal selection is illegible — use lime/coal */
.section-dark ::selection,
.call-card ::selection,
.calc-result ::selection,
.scene-dialog ::selection { background: var(--lime); color: var(--coal); }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-display); font-weight: 700; line-height: 1.05;
  letter-spacing: -0.015em; text-wrap: balance;
  overflow-wrap: break-word; word-break: normal; hyphens: manual;
}
p { text-wrap: pretty; }

.tnum { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }

/* ---------- inline icon system (Lucide-style line icons) ----------
   One coherent set across all 7 pages. Icons are inline <svg> with
   stroke="currentColor", so they inherit the colour of their context
   (coral only where the surrounding token is already a signal). The .ico
   class normalises sizing + alignment; size is set by the host component.
   SIZE SCALE — host components pick from {14, 16, 20, 24}px only; no off-scale
   values (no 13/15/17/21/25). STROKE — a single stroke-width:2 across the set
   (checkmarks included); .ico-sm 1.75 is the one sanctioned step-down for the
   smallest line glyphs. Keep the hand uniform. */
.ico {
  display: inline-block; flex: 0 0 auto;
  width: 1em; height: 1em;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.ico-sm { stroke-width: 1.75; }

.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: fixed; top: 0; left: 16px; z-index: 200;
  background: var(--coal); color: var(--ink-on-dark);
  padding: 10px 16px; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-family: var(--font-mono); font-size: 13px;
  transform: translateY(-120%);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

:focus-visible {
  outline: 2.5px solid var(--coral);
  outline-offset: 3px;
  border-radius: 6px;
}
.section-dark :focus-visible { outline-color: var(--lime); }

/* ---------- grain ---------- */
.grain { position: absolute; }
.grain-overlay {
  position: fixed; inset: 0; z-index: 1000; pointer-events: none;
  opacity: 0.045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- layout ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 40px);
}

.section { padding-block: clamp(72px, 9.5vw, 148px); position: relative; }
/* a barely-there warm wash keeps light sections from reading as dead-flat cream:
   subtle top-lit depth, tinted with the coal/coral family (never grey) */
.section:not(.section-dark)::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 60% at 50% -8%, rgba(255, 77, 46, 0.035), transparent 60%),
    linear-gradient(180deg, rgba(20, 17, 12, 0.018), transparent 22%);
}
.section > .container { position: relative; z-index: 1; }

.section-dark {
  background: var(--coal);
  color: var(--ink-on-dark);
}
.section-dark .section-title,
.section-dark h3 { color: var(--ink-on-dark); }
.section-dark .section-lead { color: var(--muted-on-dark); }
.section-dark .section-kicker { color: var(--lime); }
.section-dark .section-kicker::before {
  background:
    linear-gradient(var(--lime), var(--lime)) 0    50% / 2px 45% no-repeat,
    linear-gradient(var(--lime), var(--lime)) 5px  50% / 2px 100% no-repeat,
    linear-gradient(var(--lime), var(--lime)) 10px 50% / 2px 65% no-repeat,
    linear-gradient(var(--lime), var(--lime)) 15px 50% / 2px 30% no-repeat;
}

.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 66px); }
.section-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-weight: 500;
  font-size: 0.8125rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--coral-text); margin-bottom: 16px;
}
/* every kicker carries a tiny 3-bar equalizer — the voice leitmotif at the
   smallest scale, so each section reads as "spoken" in the same hand */
.section-kicker::before {
  content: ""; flex: 0 0 auto;
  width: 18px; height: 13px;
  background:
    linear-gradient(var(--coral), var(--coral)) 0    50% / 2px 45% no-repeat,
    linear-gradient(var(--coral), var(--coral)) 5px  50% / 2px 100% no-repeat,
    linear-gradient(var(--coral), var(--coral)) 10px 50% / 2px 65% no-repeat,
    linear-gradient(var(--coral), var(--coral)) 15px 50% / 2px 30% no-repeat;
  border-radius: 2px;
}
.section-lead-center .section-kicker { justify-content: center; }
.section-title {
  font-size: clamp(2.05rem, 5.4vw, 3.8rem); font-weight: 900;
  letter-spacing: -0.025em; line-height: 1.02;
}
.section-lead { margin-top: 20px; font-size: clamp(1.04rem, 1.4vw, 1.2rem); color: #574f42; max-width: 58ch; line-height: 1.62; }
.section-lead-center { margin-inline: auto; text-align: center; }
.accent { color: var(--coral-text); }
/* on dark surfaces coral is already high-contrast — keep the brighter brand tone */
.section-dark .accent { color: var(--coral-soft); }
.accent-green { color: var(--green); }
.section-dark .accent-green { color: var(--green-bright); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  letter-spacing: -0.01em; padding: 15px 27px; border: 0;
  border-radius: var(--radius-pill); white-space: nowrap; position: relative; isolation: isolate;
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s var(--ease), background 0.25s var(--ease-inout), color 0.25s var(--ease-inout);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.985); transition-duration: 0.08s; }
.btn-ico { font-size: 1.05em; }
.btn-svg-ico { flex-shrink: 0; vertical-align: middle; transition: transform 0.3s var(--ease-spring); }
.btn:hover .btn-svg-ico { transform: rotate(-12deg) scale(1.08); }

.btn-primary {
  background: linear-gradient(180deg, var(--coral-soft), var(--coral));
  color: #fff;
  /* warm coral depth + a top inset highlight so the cap reads as a lit, raised
     surface rather than a flat fill */
  box-shadow: var(--shadow-coral),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(120, 24, 8, 0.3);
}
.btn-primary:hover {
  background: linear-gradient(180deg, var(--coral), var(--coral-deep));
  box-shadow: 0 18px 42px -12px rgba(255, 77, 46, 0.72), 0 6px 14px -6px rgba(226, 52, 20, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn-lg { padding: 19px 40px; font-size: 1.08rem; }

.btn-outline { background: transparent; border: 2px solid var(--coal); color: var(--coal); }
.btn-outline:hover { background: var(--coal); color: var(--ink-on-dark); box-shadow: var(--shadow-soft); }

.btn-ghost { background: transparent; color: inherit; border: 1.5px solid rgba(20,17,12,0.16); padding: 11px 20px; font-size: 0.88rem; }
.btn-ghost:hover { border-color: var(--coal); background: rgba(20,17,12,0.03); }

.btn-pulse { position: relative; }
.btn-pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(255, 77, 46, 0.5);
  animation: pulse 2.2s var(--ease) infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 77, 46, 0.5); }
  70% { box-shadow: 0 0 0 16px rgba(255, 77, 46, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 77, 46, 0); }
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 246, 239, 0.82);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid rgba(20, 17, 12, 0.07);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 13px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 900; font-size: 1.28rem; letter-spacing: -0.02em; }
/* the "●" of the logo is an on-air indicator: a steady core that emits a soft
   concentric ripple, echoing the live-call / voiceprint leitmotif */
.brand-dot {
  position: relative;
  width: 13px; height: 13px; border-radius: 50%; background: var(--coral);
  box-shadow: 0 0 0 0 rgba(255,77,46,0.5); animation: pulse 2.4s var(--ease) infinite;
}
.brand-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--coral);
  animation: onAirRipple 2.4s var(--ease-out) infinite;
}
@keyframes onAirRipple {
  0%   { transform: scale(1); opacity: 0.7; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
.site-nav { display: flex; gap: 26px; font-size: 0.92rem; font-weight: 600; }
.site-nav a { color: #4a4438; transition: color 0.18s; position: relative; }
.site-nav a:hover { color: var(--coal); }
.site-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -5px; height: 2px; width: 0;
  background: var(--coral); transition: width 0.22s var(--ease);
}
.site-nav a:hover::after { width: 100%; }
.header-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.header-login {
  font-size: 0.92rem; font-weight: 600; color: #4a4438;
  transition: color 0.18s; white-space: nowrap;
}
.header-login:hover { color: var(--coral); }
.header-cta { flex-shrink: 0; }

/* =========================================================
   1. HERO
   ========================================================= */
.hero { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(56px, 7vw, 104px); position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; top: -10%; right: -6%; width: 50vw; height: 50vw; max-width: 620px; max-height: 620px;
  background: radial-gradient(circle, rgba(255,77,46,0.1), transparent 62%);
  pointer-events: none; z-index: 0;
}
.hero-grid {
  display: grid; grid-template-columns: 1.18fr 0.82fr; gap: clamp(32px, 5vw, 76px);
  align-items: center; position: relative; z-index: 1;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: #6c6456; background: var(--cream-2); border: 1px solid rgba(20,17,12,0.08);
  padding: 7px 14px; border-radius: 999px; margin-bottom: 26px;
}
.eyebrow-dot {
  position: relative; width: 8px; height: 8px; border-radius: 50%;
  background: var(--green-bright); flex: 0 0 auto;
}
/* "online" status pip emits a soft green ripple — same on-air language as the logo */
.eyebrow-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--green-bright);
  animation: onAirRipple 2.8s var(--ease-out) infinite;
}

.hero-title { font-weight: 900; line-height: 0.92; letter-spacing: -0.04em; }
.hero-title span { display: block; }
.hero-title .accent { color: var(--coral-text); }
.hero-title-big {
  font-size: clamp(3.2rem, 9.4vw, 7rem);
  overflow-wrap: break-word;
}
/* third line is the "payoff" — smaller, set apart, full coral, with a
   hand-drawn underline tick to give it character */
.hero-title-sub {
  font-size: clamp(1.45rem, 3vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 14px;
  position: relative;
  /* override .hero-title span{display:block} so the underline hugs the text */
  display: inline-block; width: -moz-fit-content; width: fit-content;
}
.hero-title-sub.accent { color: var(--coral-text); }
/* underline is now the signature waveform SVG (.title-wave), drawn-in on reveal */

.hero-sub {
  margin-top: 28px; font-size: clamp(1.08rem, 1.7vw, 1.3rem); max-width: 46ch; color: #4f493d; font-weight: 500; line-height: 1.55;
}
.hero-sub-rotator { margin-top: 10px; }
.rotator {
  display: inline-flex; align-items: center; vertical-align: baseline;
  color: var(--coral-text); border-bottom: 2px solid var(--coral);
  padding: 1px 1px; margin-top: 4px; font-weight: 700;
  overflow: hidden;
}
.rotator-word { display: inline-block; white-space: nowrap; will-change: transform, opacity; }
.rotator-word.is-out { animation: wordOut 0.34s var(--ease) forwards; }
.rotator-word.is-in { animation: wordIn 0.42s var(--ease) forwards; }
@keyframes wordOut { to { transform: translateY(-110%); opacity: 0; } }
@keyframes wordIn { from { transform: translateY(110%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* callback form */
.callback { margin-top: 34px; }
.callback-row { display: flex; gap: 12px; flex-wrap: wrap; }
.phone-input {
  flex: 1 1 220px; min-width: 0;
  font-family: var(--font-mono); font-size: 1.05rem; font-weight: 500;
  padding: 16px 20px; border-radius: 999px;
  border: 2px solid rgba(20,17,12,0.16); background: #fff; color: var(--coal);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.phone-input::placeholder { color: #b4ac9c; }
.phone-input:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 4px rgba(255,77,46,0.14); }
.callback-row .btn { flex: 0 0 auto; }

.callback-note { margin-top: 12px; font-size: 0.86rem; color: #6c6456; max-width: 46ch; padding-left: 0; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 32px; }
.phone-link { color: var(--coral-text); font-weight: 700; white-space: nowrap; border-bottom: 1px dashed rgba(201,52,24,0.55); }
.phone-link:hover { border-bottom-style: solid; }
.section-dark .phone-link { color: var(--coral-soft); border-bottom-color: rgba(255,122,99,0.55); }
.callback-success {
  margin-top: 16px; padding: 14px 18px; border-radius: var(--radius-sm);
  background: rgba(30,122,60,0.1); border: 1px solid rgba(30,122,60,0.3);
  color: var(--green); font-weight: 600; font-size: 0.95rem;
}
.section-dark .callback-success { background: rgba(40,160,79,0.16); border-color: rgba(40,160,79,0.4); color: #6fe095; }

.anchors { display: flex; gap: clamp(20px, 3vw, 44px); margin-top: 40px; flex-wrap: wrap; }
.anchors li { font-size: 0.9rem; color: #6c6456; font-weight: 500; position: relative; }
.anchors li + li { padding-left: clamp(20px, 3vw, 44px); }
.anchors li + li::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px;
  background: rgba(20,17,12,0.12); transform: translateX(calc(-1 * clamp(10px, 1.5vw, 22px)));
}
.anchors strong { display: block; font-family: var(--font-display); font-weight: 900; font-size: 2.1rem; color: var(--coal); line-height: 1; letter-spacing: -0.03em; margin-bottom: 4px; }

.integrations { margin-top: 34px; }
.integrations-label { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.07em;
  padding: 7px 14px; border-radius: var(--radius-pill); border: 1px solid rgba(20,17,12,0.12);
  background: var(--cream-2); color: #564f43;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}
/* chips are passive labels (not links) — no transform, so they don't read as clickable */
.chip:hover { border-color: rgba(255,77,46,0.4); color: var(--coral-text); background: #fff; }

/* live call card */
.hero-card-wrap { position: relative; }
.hero-card-wrap::before {
  content: ""; position: absolute; inset: -8% -6% -12% -8%; z-index: 0;
  background: radial-gradient(60% 50% at 70% 18%, rgba(255,77,46,0.16), transparent 70%);
  filter: blur(6px); pointer-events: none;
}
.call-card {
  background: linear-gradient(168deg, #1b1711 0%, var(--coal) 62%);
  color: var(--ink-on-dark);
  border-radius: var(--radius-lg); padding: 22px 22px 24px;
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.06);
  position: relative; overflow: hidden; z-index: 1;
  border: 1px solid rgba(255,255,255,0.07);
}
.call-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(130% 70% at 82% -4%, rgba(255,77,46,0.18), transparent 52%);
  pointer-events: none;
}
.call-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  position: relative; padding-bottom: 16px; margin-bottom: 2px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.call-id { display: flex; align-items: center; gap: 11px; min-width: 0; }
.call-ico {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px;
  background: rgba(255,77,46,0.18); color: var(--coral);
  display: grid; place-items: center; font-size: 1.2rem;
}
.call-who { font-size: 0.9rem; color: var(--muted-on-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-who strong { color: var(--ink-on-dark); }
.call-live {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.08em;
  color: #ff7a63; background: rgba(255,77,46,0.12); padding: 6px 11px; border-radius: 999px;
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); animation: blink 1.3s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
.call-timer { color: var(--ink-on-dark); }

.call-wave {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  height: 50px; margin: 22px 0 18px; position: relative;
}
.call-wave span {
  width: 4px; border-radius: 4px; background: linear-gradient(var(--coral), #ff8a72);
  animation: wave 1.1s var(--ease) infinite; height: 30%;
}
.call-wave span:nth-child(odd) { background: linear-gradient(var(--lime), #b9d63a); }
.call-wave span:nth-child(3n) { animation-duration: 0.85s; }
.call-wave span:nth-child(3n+1) { animation-duration: 1.3s; }
.call-wave span:nth-child(4n) { animation-duration: 0.95s; }
@keyframes wave { 0%,100% { height: 18%; } 50% { height: 92%; } }
.call-wave span:nth-child(1){animation-delay:-.1s}.call-wave span:nth-child(2){animation-delay:-.5s}
.call-wave span:nth-child(3){animation-delay:-.2s}.call-wave span:nth-child(4){animation-delay:-.7s}
.call-wave span:nth-child(5){animation-delay:-.3s}.call-wave span:nth-child(6){animation-delay:-.9s}
.call-wave span:nth-child(7){animation-delay:-.15s}.call-wave span:nth-child(8){animation-delay:-.6s}
.call-wave span:nth-child(9){animation-delay:-.4s}.call-wave span:nth-child(10){animation-delay:-.8s}
.call-wave span:nth-child(11){animation-delay:-.25s}.call-wave span:nth-child(12){animation-delay:-.55s}
.call-wave span:nth-child(13){animation-delay:-.35s}.call-wave span:nth-child(14){animation-delay:-.75s}
.call-wave span:nth-child(15){animation-delay:-.45s}.call-wave span:nth-child(16){animation-delay:-.65s}
.call-wave span:nth-child(17){animation-delay:-.12s}.call-wave span:nth-child(18){animation-delay:-.52s}
.call-wave span:nth-child(19){animation-delay:-.32s}.call-wave span:nth-child(20){animation-delay:-.72s}

/* Wave speaking/listening/idle states */
.call-wave.wave-idle span {
  animation-duration: 3.8s;
  opacity: 0.3;
}
.call-wave.wave-agent span { opacity: 1; }
.call-wave.wave-agent span:nth-child(odd) { animation-duration: 0.72s; }
.call-wave.wave-agent span:nth-child(even) { animation-duration: 1.0s; }
.call-wave.wave-client span { opacity: 0.8; }
.call-wave.wave-client span:nth-child(even) { animation-duration: 0.68s; }
.call-wave.wave-client span:nth-child(odd) { animation-duration: 1.2s; }

.call-dialog { display: flex; flex-direction: column; gap: 9px; min-height: 246px; position: relative; }
.bubble {
  max-width: 84%; padding: 11px 15px 12px; border-radius: 16px; font-size: 0.92rem; line-height: 1.45;
  position: relative; opacity: 0; transform: translateY(8px) scale(0.985);
  box-shadow: 0 1px 0 rgba(0,0,0,0.18);
}
.bubble.show { opacity: 1; transform: translateY(0) scale(1); transition: opacity 0.34s var(--ease), transform 0.4s var(--ease-spring); }
.bubble-who { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 5px; }
.bubble-text { color: var(--ink-on-bubble); }
/* lifted warm-dark bubble so agent text reads as high-contrast, not grey-on-black */
.bubble-agent {
  align-self: flex-start; background: var(--bubble-agent);
  border: 1px solid var(--bubble-agent-line);
  border-bottom-left-radius: 5px; color: var(--ink-on-bubble);
}
.bubble-agent .bubble-who { color: var(--coral-soft); }
.bubble-client {
  align-self: flex-end;
  /* darkened so white reply text clears WCAG AA (~5.2:1) on the most-seen
     element of the first screen, while staying unmistakably coral */
  background: linear-gradient(180deg, #c93a1e, #a82d12);
  color: #fff; border-bottom-right-radius: 5px;
  box-shadow: 0 4px 14px -6px rgba(255,77,46,0.6);
}
.bubble-client .bubble-text { color: #fff; }
.bubble-client .bubble-who { color: rgba(255,255,255,0.92); }
.caret { display: inline-block; width: 2px; height: 1em; background: currentColor; margin-left: 2px; vertical-align: text-bottom; border-radius: 2px; animation: caret 0.85s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* "печатает…" indicator bubble */
.typing {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 5px;
  background: var(--bubble-agent); border: 1px solid var(--bubble-agent-line);
  border-radius: 16px; border-bottom-left-radius: 5px; padding: 13px 16px;
  opacity: 0; transform: translateY(8px) scale(0.985);
}
.typing.show { opacity: 1; transform: translateY(0) scale(1); transition: opacity 0.26s var(--ease), transform 0.34s var(--ease-spring); }
.typing.hide { opacity: 0; transform: translateY(-4px) scale(0.96); transition: opacity 0.18s ease, transform 0.18s ease; }
.typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--coral-soft);
  animation: typingDot 1.25s var(--ease-inout) infinite;
}
.typing span:nth-child(2) { animation-delay: 0.18s; }
.typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.call-toasts { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; min-height: 0; }
.toast {
  display: inline-flex; align-items: center; gap: 9px; align-self: flex-start;
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500;
  padding: 9px 14px; border-radius: 11px;
  opacity: 0; transform: translateY(10px) scale(0.96);
}
.toast.show { animation: toastIn 0.45s var(--ease) forwards; }
@keyframes toastIn { to { opacity: 1; transform: translateY(0) scale(1); } }
.toast-crm { background: rgba(40,160,79,0.16); color: #7fe7a3; border: 1px solid rgba(40,160,79,0.35); }
.toast-sms { background: rgba(216,243,79,0.14); color: var(--lime); border: 1px solid rgba(216,243,79,0.3); }
.toast .ico { width: 14px; height: 14px; }

.call-card-cap { margin-top: 16px; font-family: var(--font-mono); font-size: 0.76rem; color: var(--muted); text-align: center; }

/* =========================================================
   SIGNATURE MOTIF — "живой голос" oscillogram leitmotif
   A single audio-waveform line that recurs as a section divider and as a
   heading underline. This is the brand's connective tissue: every section
   is "spoken", joined by the same voice-print.
   ========================================================= */
.wave-divider {
  --wave-color: var(--coral);
  height: clamp(34px, 5vw, 52px);
  display: block; width: 100%;
  margin: 0; padding: 0; border: 0;
  background: transparent; position: relative; overflow: hidden;
}
/* The whole oscillogram dissolves into the section colour at both edges, so the
   line is never seen to "stop" — it fades in from nothing and back to nothing,
   reading as a continuous voiceprint rather than a clipped stub. */
.wave-divider svg {
  width: 100%; height: 100%; display: block;
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0, #000 11%, #000 89%, transparent 100%);
          mask-image: linear-gradient(90deg,
    transparent 0, #000 11%, #000 89%, transparent 100%);
}
/* dim, always-on "unplayed" trace = the full waveform at rest */
.wave-divider .wave-base {
  fill: none; stroke: var(--wave-color); opacity: 0.22;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* bright "played" trail that the playhead draws in left-to-right, then loops —
   the line behind the dot is sounded, ahead of it is the dim base. */
.wave-divider .wave-line {
  fill: none; stroke: var(--wave-color); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  /* draw-in on first reveal */
  stroke-dasharray: 1281; stroke-dashoffset: 1281;
}
.wave-divider.in .wave-line {
  /* dashoffset driven by SMIL <animate> on the SAME SVG clock как у точки
     (animateMotion dur 6.5s, begin 1.1s, linear) → playhead едет ровно по
     ведущему краю «сыгранной» дорожки, без рассинхрона. */
  stroke-dashoffset: 0;
}
@keyframes wavePlay {
  0%   { stroke-dashoffset: 1500; }
  /* sweep the bright trail across, matching the dot's traversal */
  78%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
/* a soft travelling pulse dot that rides the wave — the "live voice" playhead.
   Motion is driven by SVG <animateMotion>; CSS only handles the reveal fade. */
.wave-divider .wave-dot {
  fill: #fff;
  opacity: 0;
  filter: drop-shadow(0 0 6px var(--wave-color)) drop-shadow(0 0 2px var(--wave-color));
  transition: opacity 0.6s var(--ease) 1.4s;
}
.wave-divider.in .wave-dot { opacity: 1; }
/* on dark sections the motif flips to lime so coral stays a scarce CTA signal */
.wave-divider-dark { background: var(--coal); --wave-color: var(--lime); color: var(--ink-on-dark); }
.wave-divider-lime { background: var(--lime); --wave-color: var(--coal); color: var(--coal); }

/* climactic full-bleed beat before the final CTA — the loudest "voice" moment */
.wave-divider-climax {
  height: auto;
  padding: clamp(40px, 7vw, 84px) 0 clamp(28px, 4vw, 48px);
  text-align: center;
}
.wave-divider-climax svg { height: clamp(70px, 11vw, 130px); }
.wave-divider-climax .wave-base { stroke-width: 1.75; opacity: 0.26; }
.wave-divider-climax .wave-line {
  stroke-width: 3;
  /* longer path → larger dash run; slower playhead (7.5s dot) */
  stroke-dasharray: 1522; stroke-dashoffset: 1522;
  transition-duration: 2.2s;
}
.wave-divider-climax.in .wave-line { stroke-dashoffset: 0; }
@keyframes wavePlayClimax {
  0%   { stroke-dashoffset: 2200; }
  78%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
.wave-divider-climax .wave-caption,
.wave-divider-caption {
  margin-top: clamp(18px, 2.5vw, 28px);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.05rem, 2.4vw, 1.7rem);
  letter-spacing: -0.01em; color: var(--ink-on-dark);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.7s var(--ease) 0.9s, transform 0.7s var(--ease) 0.9s;
}
.wave-divider-climax.in .wave-divider-caption { opacity: 1; transform: none; }

/* heading underline that IS the waveform, replacing the flat tick */
.hero-title-sub .title-wave {
  position: absolute; left: 0; right: 0; bottom: -0.34em; height: 0.36em;
  width: 100%; overflow: visible; pointer-events: none;
}
.hero-title-sub .title-wave path {
  fill: none; stroke: var(--coral); stroke-width: 3.5; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 240; stroke-dashoffset: 240;
  transition: stroke-dashoffset 0.9s var(--ease-out) 0.7s;
}
.hero-title-sub.in .title-wave path { stroke-dashoffset: 0; }

/* =========================================================
   2. MARQUEE
   ========================================================= */
.marquee { overflow: hidden; white-space: nowrap; }
.marquee-dark { background: var(--coal); color: var(--ink-on-dark); padding-block: 20px; border-block: 1px solid rgba(255,255,255,0.07); }
.marquee-track { display: inline-flex; gap: 0; animation: marquee 26s linear infinite; will-change: transform; }
.marquee-track-rev { animation-direction: reverse; animation-duration: 30s; }
.marquee-item {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 1.8vw, 1.5rem);
  letter-spacing: -0.01em; padding-inline: 1.4rem; display: inline-flex; align-items: center; gap: 0.7rem;
}
.marquee-item i { color: var(--lime); font-style: normal; font-weight: 500; }
/* refined section mark: the star text is hidden and replaced by a small
   coral rhombus — a calm punctuation glyph, not a sticker star */
.marquee-item b {
  font-size: 0; line-height: 0; color: transparent;
  display: inline-flex; align-items: center;
}
.marquee-item b::before {
  content: ""; width: 7px; height: 7px; margin: 0 0.2rem;
  background: var(--coral); transform: rotate(45deg); border-radius: 1px;
}
.marquee-bottom .marquee-item b::before { background: var(--coal); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-33.34%); } }
/* decorative strip flows continuously — never pauses on hover/focus */

/* =========================================================
   3. CALCULATOR
   ========================================================= */
.calc { background: var(--cream); }
.calc-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.calc-control { margin-top: 30px; }
.calc-control-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 13px; gap: 12px; }
.calc-control-head label { font-weight: 600; font-size: 0.98rem; color: #463f34; }
.calc-out-mini { font-family: var(--font-display); font-weight: 900; font-size: 1.4rem; color: var(--coral-text); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }

.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; background: var(--cream-2); border: 1px solid rgba(20,17,12,0.1); outline-offset: 6px; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; border-radius: 50%; background: var(--coral); border: 4px solid var(--cream); box-shadow: 0 4px 12px -2px rgba(255,77,46,0.6); cursor: grab; transition: transform 0.15s; }
.slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.12); }
.slider::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: var(--coral); border: 4px solid var(--cream); box-shadow: 0 4px 12px -2px rgba(255,77,46,0.6); cursor: grab; }
.slider::-moz-range-track { height: 8px; border-radius: 999px; background: var(--cream-2); }

.calc-result {
  background: linear-gradient(168deg, #1b1711, var(--coal) 60%);
  color: var(--ink-on-dark);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-lg); padding: clamp(30px, 4vw, 46px);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.05);
  text-align: center; position: relative; overflow: hidden;
  container-type: inline-size;
}
.calc-result::before { content:""; position:absolute; inset:0; background: radial-gradient(110% 80% at 50% -6%, rgba(255,77,46,0.16), transparent 58%); pointer-events:none; }
/* mobile-only "при ваших цифрах" bridge — see .calc-grid collapse at 980px.
   On desktop the side-by-side layout makes the link self-evident, so it's
   hidden; below the breakpoint it reconnects sliders → result. */
.calc-bridge { display: none; }
.calc-bridge-arrow {
  width: 16px; height: 16px; color: var(--coral-soft);
  animation: calcBridgeNudge 1.8s var(--ease-inout) infinite;
}
@keyframes calcBridgeNudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } }
.calc-result-label { font-family: var(--font-mono); font-weight: 500; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-on-dark); position: relative; }
/* big number must never wrap or clip: nowrap + fluid clamp that shrinks for
   up to 9 digits, tabular numerals, narrow thin-space thousands separators */
.calc-result-sum {
  font-family: var(--font-display); font-weight: 900; line-height: 1;
  margin: 16px 0 4px; color: #fff; position: relative;
}
.calc-result-sum .calc-num {
  display: block; white-space: nowrap;
  font-size: clamp(2.4rem, 9.5cqw, 4.1rem);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.02em;
}
.calc-result-sum .rub {
  display: block; font-family: var(--font-mono); font-size: 0.92rem;
  letter-spacing: 0.06em; color: var(--coral-soft); margin-top: 10px; font-weight: 500;
}
.calc-result-note { font-size: 0.92rem; color: var(--muted-on-dark); margin: 18px 0 26px; position: relative; line-height: 1.55; }
.calc-result-note .tnum { white-space: nowrap; }
.calc-result-note strong { color: var(--lime); white-space: nowrap; }
.calc-result .btn { position: relative; width: 100%; }

/* =========================================================
   4. HOW
   ========================================================= */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.5vw, 28px); counter-reset: step; }
.step {
  background: linear-gradient(168deg, var(--coal-soft), #1a160f);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-lg); padding: clamp(28px, 3vw, 40px); position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.3s var(--ease-inout), box-shadow 0.4s var(--ease);
}
.step::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--coral), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease);
}
.step:hover {
  transform: translateY(-6px); border-color: rgba(255,77,46,0.35);
  box-shadow: 0 30px 60px -30px rgba(255,77,46,0.32);
}
.step:hover::after { transform: scaleX(1); }
.step-num {
  font-family: var(--font-display); font-weight: 900; font-size: 2.6rem; line-height: 1;
  color: rgba(255,77,46,0.28); display: block; margin-bottom: 20px; letter-spacing: -0.02em;
  -webkit-text-stroke: 1px rgba(255,77,46,0.45); -webkit-text-fill-color: transparent;
}
.step-title { font-size: 1.35rem; font-weight: 700; margin-bottom: 12px; letter-spacing: -0.02em; }
.step p { color: var(--muted-on-dark); font-size: 0.98rem; line-height: 1.6; }

/* =========================================================
   5. SCENES / TABS
   ========================================================= */
.tablist { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.tab {
  font-family: var(--font-display); font-weight: 700; font-size: 0.92rem;
  padding: 12px 24px; border-radius: var(--radius-pill); border: 2px solid rgba(20,17,12,0.13);
  background: transparent; color: #564f43;
  transition: color 0.25s var(--ease-inout), background 0.3s var(--ease-inout), border-color 0.25s var(--ease-inout), transform 0.25s var(--ease-spring);
}
.tab:hover { border-color: var(--coal); transform: translateY(-2px); }
.tab[aria-selected="true"] {
  background: var(--coal); color: var(--ink-on-dark); border-color: var(--coal);
  box-shadow: var(--shadow-soft);
}

.tabpanel { animation: fadeUp 0.45s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.scene-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
.scene-dialog {
  background: linear-gradient(168deg, #1b1711, var(--coal) 64%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-lg); padding: 26px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.05);
  position: relative; overflow: hidden;
}
.scene-dialog::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 60% at 85% 0%, rgba(255,77,46,0.12), transparent 55%);
  pointer-events: none;
}
.scene-dialog .bubble { opacity: 1; transform: none; }
.scene-results { display: flex; flex-direction: column; gap: 13px; }
.scene-crm { display: flex; flex-direction: column; gap: 13px; }
.scene-crm-head {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 2px;
}
.crm-row {
  display: flex; align-items: flex-start; gap: 13px; font-weight: 500; font-size: 0.96rem; line-height: 1.4;
  background: #fff; border: 1px solid rgba(20,17,12,0.07); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow-soft);
}
.crm-check {
  flex: 0 0 24px; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%;
  background: var(--green); color: #fff; display: grid; place-items: center;
  font-size: 0.72rem; font-weight: 700; line-height: 1;
  box-shadow: 0 3px 8px -3px rgba(30,122,60,0.55);
}
/* check inside a filled disc — system stroke-width:2 (no special-case 3);
   the green disc already supplies the visual weight */
.crm-check .ico { width: 14px; height: 14px; }
.case-play .ico { width: 14px; height: 14px; }

/* =========================================================
   6. DASHBOARD
   ========================================================= */
.dash-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.dash-mock {
  background: linear-gradient(180deg, #1b1710, #14110c);
  border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 34px); box-shadow: var(--shadow-card);
}
.dash-mock-head { display: flex; gap: 8px; margin-bottom: 22px; }
.dash-tab { font-family: var(--font-mono); font-size: 0.78rem; padding: 7px 14px; border-radius: 999px; color: var(--muted-on-dark); background: rgba(255,255,255,0.05); }
.dash-tab-active { background: rgba(255,77,46,0.16); color: #ff8a72; }
.dash-saved { background: rgba(40,160,79,0.1); border: 1px solid rgba(40,160,79,0.3); border-radius: var(--radius); padding: 22px; margin-bottom: 18px; }
.dash-saved-label { display: block; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-on-dark); margin-bottom: 8px; }
.dash-saved-sum { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 5vw, 3rem); color: #6fe095; line-height: 1; }
.dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.dash-stat { background: rgba(255,255,255,0.04); border-radius: var(--radius-sm); padding: 16px; text-align: center; }
.dash-stat-num { display: block; font-family: var(--font-display); font-weight: 900; font-size: 1.7rem; color: var(--ink-on-dark); }
.dash-stat-cap { font-size: 0.74rem; color: var(--muted-on-dark); }
.dash-insight { display: flex; gap: 13px; align-items: flex-start; background: rgba(216,243,79,0.08); border: 1px solid rgba(216,243,79,0.25); border-radius: var(--radius); padding: 18px; }
.dash-insight-ico { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 1.05rem; background: rgba(216,243,79,0.14); color: var(--lime); margin-top: 1px; }
.dash-insight p { font-size: 0.92rem; color: var(--ink-on-dark); }
.dash-insight strong { color: var(--lime); }
.loss { color: var(--coral); font-weight: 700; }

/* =========================================================
   7. CASES
   ========================================================= */
.cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.5vw, 26px); }
.case {
  background: #fff; border: 1px solid rgba(20,17,12,0.07); border-radius: var(--radius-lg);
  padding: clamp(26px, 3vw, 36px); display: flex; flex-direction: column; position: relative; overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s;
}
.case::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--green-bright), transparent 80%);
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease);
}
.case:hover { transform: translateY(-7px); box-shadow: var(--shadow-lift); border-color: rgba(30,122,60,0.2); }
.case:hover::before { transform: scaleX(1); }
.case-tag { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.case-num { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; letter-spacing: -0.025em; }
.case-unit { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--muted); margin-top: 6px; margin-bottom: 18px; }
.case-text { color: #574f42; font-size: 0.95rem; line-height: 1.55; flex: 1 1 auto; margin-bottom: 24px; }
.case-listen {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  font-family: var(--font-mono); font-size: 0.86rem; font-weight: 500; color: var(--coal);
  background: var(--cream-2); border: 1px solid rgba(20,17,12,0.12); border-radius: 999px; padding: 9px 16px;
  transition: background 0.2s, border-color 0.2s;
}
/* "послушать" is not wired up yet — present it as a clearly inactive "soon" chip */
.case-listen[aria-disabled="true"] { cursor: default; opacity: 0.72; }
.case-listen:not([aria-disabled="true"]):hover { background: var(--cream); border-color: var(--coral); }
.case-play { color: var(--coral-text); display: inline-flex; }
.case-soon { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); background: transparent; border: 1px solid rgba(20,17,12,0.18); border-radius: 999px; padding: 2px 9px; }

/* =========================================================
   8. COMPARE
   ========================================================= */
.compare-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin-inline: calc(-1 * clamp(18px, 4vw, 40px));
  padding-inline: clamp(18px, 4vw, 40px);
}
.compare-scroll:focus-visible { outline: 2.5px solid var(--lime); outline-offset: -3px; border-radius: var(--radius-sm); }
/* scroll affordance shown only where the 640px table can't fit */
.compare-hint { display: none; }
@media (max-width: 700px) {
  .compare-hint {
    display: block; text-align: center; margin-bottom: 14px;
    font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--lime); opacity: 0.85;
  }
  .compare-scroll {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent 100%);
  }
}
.compare-table { width: 100%; border-collapse: separate; border-spacing: 8px; min-width: 640px; }
.compare-table th, .compare-table td { padding: 16px 18px; text-align: center; font-size: 0.94rem; }
.compare-table thead th { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ink-on-dark); }
.compare-table thead th.ct-best { color: var(--coral); }
.compare-table tbody th { text-align: left; font-family: var(--font-body); font-weight: 600; color: var(--ink-on-dark); background: rgba(255,255,255,0.04); border-radius: var(--radius-sm); }
.compare-table td { background: rgba(255,255,255,0.03); border-radius: var(--radius-sm); color: var(--muted-on-dark); }
.compare-table .ct-best, .compare-table td.ct-best { background: rgba(255,77,46,0.12); border: 1px solid rgba(255,77,46,0.3); color: var(--ink-on-dark); }
.ct-feature { min-width: 160px; }
.yes { color: #6fe095; font-weight: 700; }
.no { color: var(--muted-on-dark); }
.price-good { color: #6fe095; font-weight: 800; }
.price-bad { color: #ff8a72; font-weight: 700; }

/* =========================================================
   9. FAQ
   ========================================================= */
.faq-inner { max-width: 860px; }
.accordion { display: flex; flex-direction: column; gap: 12px; }
/* one cohesive card per item: question + answer share the same surface,
   answer expands inside with a smooth height animation — no detached strip */
.acc-item {
  background: #fff; border: 1px solid rgba(20,17,12,0.08);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: border-color 0.25s var(--ease-inout), box-shadow 0.3s var(--ease-inout), background 0.3s var(--ease-inout);
}
.acc-item:hover { border-color: rgba(20,17,12,0.16); }
.acc-item:has(.acc-btn[aria-expanded="true"]) {
  border-color: rgba(255,77,46,0.28);
  box-shadow: 0 4px 10px -4px rgba(20,17,12,0.1), 0 24px 50px -28px rgba(255,77,46,0.3);
}
.acc-h { margin: 0; }
.acc-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: clamp(20px, 2.4vw, 26px) clamp(20px, 3vw, 30px);
  text-align: left; background: transparent;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.02rem, 1.55vw, 1.22rem); line-height: 1.3; color: var(--coal);
  transition: color 0.2s var(--ease-inout);
}
.acc-btn:hover { color: var(--coral-text); }
.acc-btn span:first-child { flex: 1 1 auto; }
/* + → × morph: round, tinted disc; horizontal bar stays, vertical collapses,
   whole icon rotates 90° so it reads as a deliberate transform */
.acc-icon {
  position: relative; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  background: rgba(255,77,46,0.1);
  transition: background 0.3s var(--ease-inout), transform 0.4s var(--ease-spring);
}
.acc-btn:hover .acc-icon { background: rgba(255,77,46,0.16); }
.acc-icon::before, .acc-icon::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--coral); border-radius: 2px;
  transition: transform 0.4s var(--ease-spring);
}
.acc-icon::before { width: 12px; height: 2px; transform: translate(-50%, -50%); }
.acc-icon::after { width: 2px; height: 12px; transform: translate(-50%, -50%); }
.acc-btn[aria-expanded="true"] .acc-icon { transform: rotate(135deg); background: rgba(255,77,46,0.16); }
.acc-btn[aria-expanded="true"] .acc-icon::after { transform: translate(-50%, -50%) scaleY(0); }
.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease-out);
  overflow: hidden;
}
.acc-panel[aria-hidden="false"] { grid-template-rows: 1fr; }
.acc-panel-inner {
  min-height: 0; overflow: hidden;
  padding: 0 clamp(20px, 3vw, 30px);
}
.acc-panel p {
  color: #574f42; font-size: 1rem; line-height: 1.62;
  max-width: 62ch; padding-bottom: clamp(22px, 2.4vw, 28px);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.35s var(--ease) 0.06s, transform 0.4s var(--ease) 0.06s;
}
.acc-panel[aria-hidden="false"] p { opacity: 1; transform: none; }

/* =========================================================
   10. GUARANTEE
   ========================================================= */
.guarantee-inner { max-width: 880px; margin-inline: auto; text-align: center; position: relative; padding-top: 30px; }
.seal {
  width: 128px; height: 128px; border-radius: 50%; margin: 0 auto 30px;
  background: var(--coral); color: #fff; display: grid; place-content: center; gap: 3px; text-align: center;
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,0.5),
    inset 0 0 0 7px rgba(255,255,255,0.06),
    0 18px 44px -16px rgba(255,77,46,0.6),
    0 3px 12px -4px rgba(255,77,46,0.32);
  transform: rotate(-4deg);
  font-family: var(--font-mono); animation: sealFloat 6s ease-in-out infinite;
}
@keyframes sealFloat { 0%,100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-6px); } }
.seal-top, .seal-bot { font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.92; }
.seal-mid { font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; letter-spacing: -0.01em; }
.guarantee-title { font-size: clamp(1.9rem, 5vw, 3.4rem); font-weight: 900; max-width: 18ch; margin-inline: auto; }
.guarantee-sub { margin: 24px auto 34px; max-width: 56ch; color: var(--muted-on-dark); font-size: 1.05rem; }

/* =========================================================
   11. PRICING
   ========================================================= */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.5vw, 26px); align-items: stretch; }
.plan {
  background: #fff; border: 1px solid rgba(20,17,12,0.1); border-radius: var(--radius-lg);
  padding: clamp(28px, 3vw, 38px); display: flex; flex-direction: column; position: relative;
  box-shadow: var(--shadow-soft); transition: transform 0.3s var(--ease);
}
.plan:hover { transform: translateY(-6px); }
.plan-popular { background: var(--coal); color: var(--ink-on-dark); border-color: var(--coal); transform: scale(1.04); z-index: 2; }
.plan-popular:hover { transform: scale(1.04) translateY(-6px); }
/* shared "популярный" pip — used by both .plan (light) and .bundle-plan (dark) */
.plan-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--coral); color: #fff; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; white-space: nowrap; }
.plan-name { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; margin-bottom: 16px; }
.plan-popular .plan-name { color: var(--ink-on-dark); }
.plan-price { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 4vw, 2.7rem); line-height: 1; margin-bottom: 26px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-per { font-family: var(--font-body); font-size: 0.98rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.plan-popular .plan-per { color: var(--muted-on-dark); }
.plan-features { display: flex; flex-direction: column; gap: 13px; margin-bottom: 30px; flex: 1 1 auto; }
.plan-features li { position: relative; padding-left: 28px; font-size: 0.96rem; color: #4a4438; }
.plan-popular .plan-features li { color: var(--ink-on-dark); }
/* one check "handwriting" site-wide: the exact Lucide check path used in
   .crm-check / scenes, painted via mask so it reads identically to the inline
   <svg> elsewhere (no stray glyph font). background-color carries the colour. */
.plan-features li::before {
  content: ""; position: absolute; left: 0; top: 0.18em;
  width: 1.1em; height: 1.1em; background-color: var(--green);
  -webkit-mask: var(--ico-check) center / contain no-repeat;
          mask: var(--ico-check) center / contain no-repeat;
}
.plan-popular .plan-features li::before { background-color: #6fe095; }
.plan .btn { width: 100%; }
.plan-popular .btn-outline { border-color: var(--ink-on-dark); color: var(--ink-on-dark); }
.plan-popular .btn-outline:hover { background: var(--ink-on-dark); color: var(--coal); }
.pricing-note { text-align: center; margin-top: 36px; font-family: var(--font-mono); font-size: 0.86rem; color: var(--muted); }

/* =========================================================
   12. FINAL CTA
   ========================================================= */
.cta-final { padding-bottom: 0; }
.cta-inner { max-width: 760px; margin-inline: auto; text-align: center; padding-bottom: clamp(56px, 7vw, 96px); }
.cta-title { font-size: clamp(2rem, 5.4vw, 3.6rem); font-weight: 900; }
.cta-sub { margin: 22px auto 36px; max-width: 52ch; color: var(--muted-on-dark); font-size: 1.08rem; }
.cta-inner .hero-cta { justify-content: center; }
.cta-note { text-align: center; max-width: 54ch; margin: 18px auto 0; color: var(--muted-on-dark); }
.callback-final { max-width: 540px; margin-inline: auto; }
.callback-final .phone-input { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.2); color: var(--ink-on-dark); }
.callback-final .phone-input::placeholder { color: var(--muted-on-dark); }
.callback-final .phone-input:focus { border-color: var(--coral); background: rgba(255,255,255,0.12); }
/* согласие и подпись — по левому краю формы, на всю её ширину (под формой,
   а не зажаты по центру) */
.callback-final .callback-note { color: var(--muted-on-dark); text-align: left; max-width: none; margin: 12px 0 0 0; padding-left: 0; }
.callback-final .callback-consent { max-width: none; margin-left: 0; margin-right: 0; text-align: left; }
.cta-connect {
  margin-top: 40px; padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.cta-connect-or {
  font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted-on-dark);
}
.cta-connect-note {
  font-family: var(--font-mono); font-size: 0.84rem; color: var(--muted-on-dark);
  letter-spacing: 0.01em;
}
.marquee-bottom { background: var(--lime); color: var(--coal); padding-block: 18px; }
.marquee-bottom .marquee-item i { color: var(--coral); }
.marquee-bottom .marquee-item b { color: var(--coal); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: var(--coal); color: var(--muted-on-dark); padding-block: clamp(40px, 5vw, 64px); border-top: 1px solid rgba(255,255,255,0.07); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1.5fr 1fr; gap: 32px; align-items: start; }
.brand-footer { color: var(--ink-on-dark); margin-bottom: 16px; }
.footer-tagline { max-width: 36ch; font-size: 0.92rem; }
.footer-nav { display: grid; grid-template-columns: repeat(2, auto); gap: 12px 32px; justify-content: start; font-size: 0.94rem; font-weight: 500; }
.footer-nav a { color: var(--muted-on-dark); transition: color 0.18s; }
.footer-nav a:hover { color: var(--ink-on-dark); }
.footer-meta { text-align: right; }
/* footer "152-ФЗ" mark was lime — a landing-dialect flash on the footer that
   bookends the header's app-CTAs. Retoned to the cabinet's green "verified"
   tone (--green-glow), so header↔footer read in one lime-free language with
   кабинет, which uses green (never lime) for secure/positive states. */
.footer-secure { font-family: var(--font-mono); font-size: 0.84rem; color: var(--green-glow); margin-bottom: 10px; display: inline-flex; align-items: center; gap: 8px; }
.footer-meta .footer-secure { display: flex; justify-content: flex-end; }
@media (max-width: 980px) { .footer-meta .footer-secure { justify-content: flex-start; } }
.footer-secure .ico { width: 16px; height: 16px; }
.footer-tech { font-size: 0.8rem; color: var(--muted-on-dark); }

/* ---- footer legal/contacts bar (full-width row under the grid) ----
   Contacts + юр-ссылки for the launch (owner is физлицо/самозанятый, no ИП
   requisites). Kept inside .site-footer so it reads in the same language. */
.footer-legal {
  margin-top: clamp(28px, 4vw, 40px);
  padding-top: clamp(20px, 2.5vw, 28px);
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 16px 28px;
}
.footer-contacts { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.86rem; }
.footer-contacts a, .footer-contacts span { color: var(--muted-on-dark); }
.footer-contacts a { transition: color 0.18s; border-bottom: 1px dashed transparent; }
.footer-contacts a:hover { color: var(--ink-on-dark); border-bottom-color: rgba(255,255,255,0.3); }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.86rem; font-weight: 500; }
.footer-legal-links a { color: var(--muted-on-dark); transition: color 0.18s; border-bottom: 1px dashed transparent; }
.footer-legal-links a:hover { color: var(--ink-on-dark); border-bottom-color: rgba(255,255,255,0.3); }
@media (max-width: 640px) { .footer-legal { flex-direction: column; align-items: flex-start; } }

/* ---- consent checkbox at callback forms (152-ФЗ согласие на обработку ПДн) ---- */
.callback-consent {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 14px; font-size: 0.85rem; line-height: 1.5;
  color: var(--muted);
}
.section-dark .callback-consent, .hero .callback-consent { color: var(--muted-on-dark); }
.callback-consent input[type="checkbox"] {
  flex: none; width: 18px; height: 18px; margin: 2px 0 0 0;
  accent-color: var(--coral); cursor: pointer;
}
.callback-consent label { cursor: pointer; }
.callback-consent a { color: var(--coral-text); border-bottom: 1px solid rgba(201,52,24,0.4); transition: border-color 0.18s; }
.section-dark .callback-consent a, .hero .callback-consent a { color: var(--coral-soft); border-bottom-color: rgba(255,106,77,0.5); }
.callback-consent a:hover { border-bottom-color: currentColor; }
.callback-consent input:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

/* =========================================================
   LEGAL PAGES (privacy.html / terms.html)
   ========================================================= */
.legal { padding-block: clamp(48px, 6vw, 84px); }
.legal .container { max-width: 860px; }
.legal-disclaimer {
  margin: 0 0 28px; padding: 14px 18px;
  background: var(--cream-2); border: 1px solid var(--cream-3);
  border-radius: var(--radius-sm); font-size: 0.9rem; color: #4f493d;
}
.legal-meta { font-size: 0.88rem; color: var(--muted); margin-bottom: 28px; }
.legal-toc {
  margin: 0 0 36px; padding: 20px 22px;
  background: var(--cream-2); border: 1px solid var(--cream-3);
  border-radius: var(--radius-sm);
}
.legal-toc h2 { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; margin-bottom: 12px; }
.legal-toc ol { margin: 0; padding-left: 1.3em; display: grid; gap: 7px; font-size: 0.92rem; }
.legal-toc a { color: var(--coral-text); border-bottom: 1px dashed transparent; transition: border-color 0.18s; }
.legal-toc a:hover { border-bottom-color: rgba(201,52,24,0.5); }
.legal-body h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.25;
  margin: 40px 0 14px; scroll-margin-top: 90px; letter-spacing: -0.01em;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { font-size: 1.02rem; font-weight: 700; margin: 22px 0 10px; }
.legal-body p { margin: 0 0 14px; color: #2d2820; }
.legal-body ul, .legal-body ol { margin: 0 0 16px; padding-left: 1.4em; display: grid; gap: 8px; }
.legal-body li { color: #2d2820; }
.legal-body a { color: var(--coral-text); border-bottom: 1px solid rgba(201,52,24,0.4); transition: border-color 0.18s; }
.legal-body a:hover { border-bottom-color: currentColor; }
.legal-body strong { font-weight: 700; color: var(--coal); }
.legal-placeholder { background: var(--cream-3); border-radius: 4px; padding: 0 5px; font-family: var(--font-mono); font-size: 0.92em; color: var(--coral-text); white-space: nowrap; }

/* =========================================================
   404 / ERROR PAGE
   ========================================================= */
.error-page {
  display: flex; align-items: center; min-height: 62vh;
  padding-block: clamp(56px, 10vw, 120px);
  text-align: center;
}
.error-page .container { max-width: 680px; }
.error-code {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(5.5rem, 22vw, 11rem); line-height: 0.92;
  letter-spacing: -0.04em; color: var(--coral);
  margin: 0 0 8px;
}
.error-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2.4rem); line-height: 1.12;
  letter-spacing: -0.02em; margin: 0 0 16px;
}
.error-lead {
  font-size: clamp(1rem, 1.6vw, 1.12rem); line-height: 1.6;
  color: var(--muted); max-width: 48ch; margin: 0 auto 32px;
}
.error-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* =========================================================
   COOKIE CONSENT BANNER
   ========================================================= */
.cookie-banner {
  position: fixed; z-index: 95;
  left: 18px; right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  max-width: 760px; margin-inline: auto;
  display: flex; align-items: center; gap: 18px 24px; flex-wrap: wrap;
  padding: 18px 22px;
  background: var(--coal); color: var(--ink-on-dark);
  border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius);
  box-shadow: 0 18px 48px -12px rgba(20,17,12,0.55);
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.cookie-banner.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.cookie-banner-text {
  flex: 1 1 260px; margin: 0;
  font-size: 0.9rem; line-height: 1.5; color: var(--muted-on-dark);
}
.cookie-banner-text a { color: var(--coral-soft); border-bottom: 1px solid rgba(255,106,77,0.5); transition: border-color 0.18s; }
.cookie-banner-text a:hover { border-bottom-color: currentColor; }
.cookie-banner-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-banner-actions .btn { padding: 11px 22px; font-size: 0.88rem; }
.cookie-btn-decline {
  background: transparent; color: var(--ink-on-dark);
  border: 1.5px solid rgba(255,255,255,0.22);
}
.cookie-btn-decline:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.05); }
@media (max-width: 560px) {
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 16px 18px; }
  .cookie-banner-actions { width: 100%; }
  .cookie-banner-actions .btn { flex: 1; }
}

/* =========================================================
   MOBILE FAB
   ========================================================= */
.fab {
  /* bottom-LEFT: Jivo сидит снизу-справа — разводим, чтобы не перекрывались на мобиле */
  position: fixed; left: 18px; z-index: 90; display: none;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  align-items: center; gap: 8px; background: var(--coral); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  padding: 14px 22px; border-radius: 999px; box-shadow: 0 14px 30px -8px rgba(255,77,46,0.7);
  animation: pulse 2.4s var(--ease) infinite;
}

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.js .reveal, .js .reveal-up { opacity: 0; }
.js .reveal { transform: translateY(14px); }
.js .reveal-up { transform: translateY(28px); }
.reveal.in, .reveal-up.in {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
/* staggered page-load: handled via inline transition-delay set by JS for hero */

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  /* min-width:0 lets the single column shrink below the card's intrinsic
     min-content (otherwise the track widens and the page overflows at 390) */
  .hero-copy, .hero-card-wrap { min-width: 0; }
  .hero-card-wrap { max-width: 460px; }
  .calc-grid, .dash-grid, .scene-grid { grid-template-columns: minmax(0, 1fr); }
  /* result now sits under the sliders — surface the bridge so the big number
     reads as "your number", not a free-floating billboard. Tightened gap +
     a negative pull nudges the card up toward the controls it answers. */
  .calc-grid { gap: 20px; }
  .calc-result { margin-top: 4px; }
  .calc-bridge {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-weight: 500; font-size: 0.72rem;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral-soft);
    margin-bottom: 14px; position: relative;
  }
  .dash-copy { order: -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-meta { grid-column: 1 / -1; text-align: left; }
}

/* Header packs brand + 3 nav links + "Войти" + the demo CTA; below ~880px the
   row can no longer fit them all (the CTA would push past the viewport edge),
   so collapse the nav + inline CTA and surface the floating demo button instead
   — keeps the demo always one tap away without a clipped header. */
@media (max-width: 880px) {
  .site-nav { display: none; }
  .header-cta { display: none; }
  .fab { display: inline-flex; }
}

@media (max-width: 760px) {
  .steps, .cases-grid, .plans { grid-template-columns: minmax(0, 1fr); }
  .plan-popular { transform: scale(1); }
  .plan-popular:hover { transform: translateY(-6px); }
  .anchors { gap: 22px; }
  /* target the spans directly — they carry their own font-size that would
     otherwise override a rule set on the .hero-title h1 */
  .hero-title-big { font-size: clamp(2.9rem, 13.5vw, 4.6rem); }
  .hero-title-sub { font-size: clamp(1.4rem, 6.5vw, 2rem); }
  .footer-grid { grid-template-columns: 1fr; }
  .callback-row .btn { width: 100%; }
}

@media (max-width: 480px) {
  .dash-stats { grid-template-columns: 1fr; }
  /* tighten heading scale so long Unbounded titles never clip / overflow at 390 */
  .section-title { font-size: clamp(1.9rem, 8.4vw, 2.6rem); line-height: 1.05; }
  /* "Звонок." in Unbounded 900 must fit the ~354px usable width at 390 */
  .hero-title-big { font-size: clamp(2.3rem, 11vw, 2.8rem); }
  .guarantee-title { font-size: clamp(1.75rem, 7.6vw, 2.4rem); }
  .cta-title { font-size: clamp(1.85rem, 8vw, 2.6rem); }
  .anchors strong { font-size: 1.7rem; }
  .btn { padding: 14px 22px; }
  .btn-lg { padding: 16px 26px; font-size: 1rem; }
  /* let long CTAs wrap rather than overflow on very narrow phones */
  .cta-connect .btn-lg, .guarantee-inner .btn-lg { max-width: 100%; white-space: normal; }
}

/* hard guard against horizontal scroll from any single overflowing token */
@media (max-width: 600px) {
  h1, h2, h3 { word-break: break-word; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-up { opacity: 1 !important; transform: none !important; }
  .call-wave span { height: 50% !important; }
  .marquee-track { animation: none !important; transform: none !important; }
  .bubble, .typing { opacity: 1 !important; transform: none !important; }
  /* keep decorative draw-in accents visible (they'd otherwise stay hidden) */
  .hero-title-sub .title-wave path { stroke-dashoffset: 0 !important; }
  .wave-divider .wave-line { stroke-dashoffset: 0 !important; animation: none !important; }
  .wave-divider .wave-dot { animation: none !important; opacity: 1 !important; }
  .live-dot, .brand-dot { animation: none !important; }
  .brand-dot::after, .eyebrow-dot::after { animation: none !important; opacity: 0 !important; }
  .acc-panel[aria-hidden="false"] p { opacity: 1 !important; transform: none !important; }
}

/* =========================================================
   ╔══════════════════════════════════════════════════════╗
   ║  ПЛАТФОРМА «ГОЛОС» — общие стили продуктовых страниц    ║
   ║  (CRM, вертикали, обзор линейки). Та же семья: те же    ║
   ║  токены, тот же шрифт, тот же голос-лейтмотив.          ║
   ╚══════════════════════════════════════════════════════╝
   ========================================================= */

/* ---------- мульти-страничная навигация (header) ---------- */
/* link-стрелка "Подключить" в шапке — коралловая мини-CTA */
.header-actions .header-connect {
  font-family: var(--font-display); font-weight: 700; font-size: 0.88rem;
  letter-spacing: -0.01em; color: #fff; white-space: nowrap;
  background: linear-gradient(180deg, var(--coral-soft), var(--coral));
  padding: 11px 20px; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-coral), inset 0 1px 0 rgba(255,255,255,0.28);
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s var(--ease);
  flex-shrink: 0;
}
.header-actions .header-connect:hover { transform: translateY(-2px); box-shadow: 0 18px 42px -12px rgba(255,77,46,0.72), inset 0 1px 0 rgba(255,255,255,0.3); }

/* nav active state — текущая страница */
.site-nav a[aria-current="page"] { color: var(--coal); }
.site-nav a[aria-current="page"]::after { width: 100%; background: var(--coral); }


/* ---------- статус-бейджи (честность дорожной карты) ---------- */
/* refined, restrained: small caps, wide tracking, hairline border, calm fill —
   a status marker, not a candy pill */
.status-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--radius-pill); white-space: nowrap;
}
.status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.status-live { background: rgba(30,122,60,0.08); color: var(--green); border: 1px solid rgba(30,122,60,0.26); }
.status-live::before { background: var(--green-bright); box-shadow: 0 0 0 0 rgba(40,160,79,0.5); animation: pulse 2.4s var(--ease) infinite; }
.status-soon { background: transparent; color: var(--muted); border: 1px solid rgba(20,17,12,0.16); }
.status-soon::before { background: #b4ac9c; }
.status-dev { background: rgba(20,17,12,0.03); color: #4a4438; border: 1px solid rgba(20,17,12,0.16); }
.status-dev::before { background: #4a4438; }
/* на тёмном фоне */
.section-dark .status-live { background: rgba(40,160,79,0.18); color: #6fe095; border-color: rgba(40,160,79,0.4); }
.section-dark .status-soon { background: rgba(255,255,255,0.06); color: var(--muted-on-dark); border-color: rgba(255,255,255,0.14); }
.section-dark .status-soon::before { background: var(--muted-on-dark); }
.section-dark .status-dev { background: rgba(216,243,79,0.14); color: var(--lime); border-color: rgba(216,243,79,0.3); }
.section-dark .status-dev::before { background: var(--lime); }

/* ---------- внутренний hero продуктовых страниц ---------- */
/* отличается от главного: компактнее, с бейджем-статусом и крошками */
.page-hero { padding-top: clamp(46px, 6vw, 92px); padding-bottom: clamp(52px, 7vw, 100px); position: relative; overflow: hidden; }
.page-hero::before {
  content: ""; position: absolute; top: -14%; right: -8%; width: 56vw; height: 56vw;
  max-width: 680px; max-height: 680px;
  background: radial-gradient(circle, rgba(255,77,46,0.11), transparent 62%);
  pointer-events: none; z-index: 0;
}
.page-hero .container { position: relative; z-index: 1; }
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); margin-bottom: 22px;
}
.crumbs a { color: var(--muted); transition: color 0.18s; border-bottom: 1px dashed transparent; }
.crumbs a:hover { color: var(--coral-text); border-bottom-color: rgba(201,52,24,0.5); }
.crumbs span[aria-current] { color: var(--coal); }
.crumbs .crumb-sep { opacity: 0.5; }
.section-dark .crumbs, .section-dark .crumbs a { color: var(--muted-on-dark); }
.section-dark .crumbs span[aria-current] { color: var(--ink-on-dark); }

.page-hero-grid { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.page-hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.page-hero-title {
  font-weight: 900; line-height: 0.98; letter-spacing: -0.035em;
  font-size: clamp(2.4rem, 6.2vw, 4.6rem);
}
.page-hero-title .accent { color: var(--coral-text); }
.section-dark .page-hero-title .accent { color: var(--coral-soft); }
.page-hero-lead { margin-top: 26px; font-size: clamp(1.08rem, 1.6vw, 1.3rem); max-width: 50ch; color: #4f493d; font-weight: 500; line-height: 1.58; }
.section-dark .page-hero-lead { color: var(--muted-on-dark); }
.page-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; align-items: center; }
.page-hero-meta { display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 40px); margin-top: 38px; }
.page-hero-meta li { font-size: 0.9rem; color: #6c6456; font-weight: 500; }
.section-dark .page-hero-meta li { color: var(--muted-on-dark); }
.page-hero-meta strong { display: block; font-family: var(--font-display); font-weight: 900; font-size: 1.95rem; color: var(--coal); line-height: 1; letter-spacing: -0.03em; margin-bottom: 5px; }
.section-dark .page-hero-meta strong { color: var(--ink-on-dark); }

/* ---------- mock-визуал "CRM, которая пишет себя" ---------- */
.crm-mock {
  background: linear-gradient(168deg, #1b1711 0%, var(--coal) 62%);
  border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg);
  padding: clamp(20px, 2.6vw, 28px); box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.06);
  position: relative; overflow: hidden;
}
.crm-mock::before { content: ""; position: absolute; inset: 0; background: radial-gradient(130% 70% at 84% -4%, rgba(255,77,46,0.16), transparent 52%); pointer-events: none; }
.crm-mock-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.08); position: relative; }
.crm-mock-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted-on-dark); }
.crm-mock-title strong { color: var(--ink-on-dark); }
.crm-mock-pill { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: #ff8a72; background: rgba(255,77,46,0.14); padding: 5px 10px; border-radius: 999px; }
.crm-mock-row {
  display: flex; align-items: center; gap: 13px; padding: 13px 15px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.04); margin-bottom: 9px; position: relative;
  opacity: 0; transform: translateY(10px);
}
.crm-mock.in .crm-mock-row { animation: crmRowIn 0.5s var(--ease) forwards; }
.crm-mock.in .crm-mock-row:nth-child(2) { animation-delay: 0.1s; }
.crm-mock.in .crm-mock-row:nth-child(3) { animation-delay: 0.35s; }
.crm-mock.in .crm-mock-row:nth-child(4) { animation-delay: 0.6s; }
.crm-mock.in .crm-mock-row:nth-child(5) { animation-delay: 0.85s; }
@keyframes crmRowIn { to { opacity: 1; transform: none; } }
.crm-mock-row .crm-mock-ico { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; background: rgba(40,160,79,0.18); color: #6fe095; display: grid; place-items: center; font-size: 1rem; }
.crm-mock-ico .ico { width: 16px; height: 16px; }
.crm-mock-row.is-voice .crm-mock-ico .ico { width: 16px; height: 16px; }
.dash-insight-ico .ico { width: 16px; height: 16px; }
.honesty-ico .ico { width: 20px; height: 20px; }
.any-biz-ico .ico { width: 16px; height: 16px; }
.crm-mock-row.is-voice .crm-mock-ico { background: rgba(255,77,46,0.18); color: #ff8a72; }
.crm-mock-field { flex: 1 1 auto; min-width: 0; }
.crm-mock-field .k { display: block; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-on-dark); margin-bottom: 2px; }
.crm-mock-field .v { display: block; font-size: 0.9rem; color: var(--ink-on-dark); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.crm-mock-src { font-family: var(--font-mono); font-size: 0.62rem; color: var(--muted-on-dark); flex: 0 0 auto; }
.crm-mock-foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 9px; font-size: 0.82rem; color: var(--muted-on-dark); position: relative; }
.crm-mock-foot .dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--green-bright); flex: 0 0 auto; animation: blink 1.6s steps(1) infinite; }

/* ---------- "чем отличается" — карточки контраста ---------- */
.contrast-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.5vw, 26px); }
.contrast-card {
  background: #fff; border: 1px solid rgba(20,17,12,0.08); border-radius: var(--radius-lg);
  padding: clamp(26px, 3vw, 36px); box-shadow: var(--shadow-soft); position: relative; overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s;
}
.contrast-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--coral), transparent 80%); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); }
.contrast-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: rgba(255,77,46,0.2); }
.contrast-card:hover::before { transform: scaleX(1); }
.contrast-ico { width: 52px; height: 52px; border-radius: 15px; background: var(--cream-2); color: var(--coral-text); display: grid; place-items: center; font-size: 1.5rem; margin-bottom: 20px; border: 1px solid rgba(20,17,12,0.06); }
.contrast-ico .ico { width: 24px; height: 24px; }
.contrast-card h3 { font-size: 1.24rem; font-weight: 700; margin-bottom: 11px; letter-spacing: -0.02em; }
.contrast-card p { color: #574f42; font-size: 0.96rem; line-height: 1.56; }
.contrast-vs { display: block; margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(20,17,12,0.14); font-size: 0.86rem; color: var(--muted); }
.contrast-vs b { color: var(--coral-text); font-weight: 700; }

/* ---------- функциональная карта (модули) ---------- */
.fmap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 20px); }
.fmap-item {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius); padding: clamp(22px, 2.6vw, 30px); position: relative;
  transition: transform 0.35s var(--ease), border-color 0.3s, background 0.3s;
}
.fmap-item:hover { transform: translateY(-4px); border-color: rgba(255,77,46,0.3); background: rgba(255,255,255,0.06); }
.fmap-head { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
.fmap-ico { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; background: rgba(255,77,46,0.16); color: #ff8a72; display: grid; place-items: center; font-size: 1.15rem; }
.fmap-ico .ico { width: 20px; height: 20px; }
.fmap-item h3 { font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-on-dark); }
.fmap-item p { color: var(--muted-on-dark); font-size: 0.9rem; line-height: 1.55; }
.fmap-item .status-badge { margin-top: 14px; }

/* "+ ваша сфера" — the open-ended card that says the agent works for ANY
   business that takes calls; the four verticals are just examples. Reads as a
   dashed "add" slot, never empty: it links to the demo / signup. */
.fmap-add {
  border-style: dashed; border-color: rgba(255,255,255,0.18);
  background: transparent; text-decoration: none;
  display: flex; flex-direction: column;
}
.fmap-add:hover { border-color: rgba(255,77,46,0.45); border-style: dashed; background: rgba(255,77,46,0.04); }
.fmap-add .fmap-ico {
  background: rgba(255,255,255,0.06); color: var(--lime);
  border: 1px dashed rgba(216,243,79,0.4);
}
.fmap-add:hover .fmap-ico { color: var(--coral-soft); border-color: rgba(255,122,99,0.5); }
.fmap-add .fmap-link {
  margin-top: auto; padding-top: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.88rem;
  color: var(--coral-soft); transition: gap 0.25s var(--ease);
}
.fmap-add:hover .fmap-link { gap: 12px; }
/* on light sections (index scenes footer note) the add card adapts */
.section:not(.section-dark) .fmap-add { border-color: rgba(20,17,12,0.2); }
.section:not(.section-dark) .fmap-add:hover { background: rgba(255,77,46,0.03); border-color: rgba(255,77,46,0.4); }

/* a quiet "works anywhere" strip used under vertical tabs / grids — the
   universal-scenario message, set as a calm mono note with a divider */
.any-biz {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: clamp(24px, 3vw, 36px); padding-top: clamp(20px, 2.4vw, 26px);
  border-top: 1px solid rgba(20,17,12,0.1);
}
.section-dark .any-biz { border-top-color: rgba(255,255,255,0.1); }
.any-biz-ico {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; font-size: 1.05rem;
  background: rgba(255,77,46,0.1); color: var(--coral-text);
}
.section-dark .any-biz-ico { background: rgba(255,77,46,0.14); color: var(--coral-soft); }
.any-biz-text { flex: 1 1 280px; min-width: 0; font-size: 0.96rem; color: #574f42; line-height: 1.5; }
.section-dark .any-biz-text { color: var(--muted-on-dark); }
.any-biz-text strong { color: var(--coal); font-weight: 700; }
.section-dark .any-biz-text strong { color: var(--ink-on-dark); }
.any-biz .btn { flex: 0 0 auto; }

/* ---------- киллер-фичи (список с большими номерами) ---------- */
.killer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.2vw, 24px); }
.killer-card {
  background: #fff; border: 1px solid rgba(20,17,12,0.08); border-radius: var(--radius-lg);
  padding: clamp(26px, 3vw, 34px); box-shadow: var(--shadow-soft); position: relative; overflow: hidden;
  display: flex; gap: 20px; align-items: flex-start;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s;
}
.killer-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: rgba(255,77,46,0.2); }
.killer-emo { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 16px; background: var(--cream-2); color: var(--coral-text); display: grid; place-items: center; font-size: 1.6rem; border: 1px solid rgba(20,17,12,0.06); }
.killer-emo .ico { width: 24px; height: 24px; }
.killer-body h3 { font-size: 1.18rem; font-weight: 700; margin-bottom: 9px; letter-spacing: -0.015em; }
.killer-body p { color: #574f42; font-size: 0.95rem; line-height: 1.56; }
.killer-body .killer-metric { display: inline-block; margin-top: 12px; font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600; color: var(--green); background: rgba(30,122,60,0.1); border: 1px solid rgba(30,122,60,0.25); padding: 5px 11px; border-radius: 999px; }

/* ---------- честная плашка-дисклеймер (статус платформы) ---------- */
.honesty-note {
  display: flex; gap: 16px; align-items: flex-start; max-width: 760px; margin-inline: auto;
  background: rgba(216,243,79,0.1); border: 1px solid rgba(160,176,30,0.4);
  border-radius: var(--radius); padding: clamp(20px, 2.4vw, 26px) clamp(22px, 2.6vw, 30px);
}
.section-dark .honesty-note { background: rgba(216,243,79,0.09); border-color: rgba(216,243,79,0.28); }
.honesty-note .honesty-ico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 1.15rem; background: rgba(255,77,46,0.08); color: var(--coral-text); }
.section-dark .honesty-note .honesty-ico { background: rgba(216,243,79,0.12); color: var(--lime); }
.honesty-note p { font-size: 0.96rem; line-height: 1.58; color: #4a4438; }
.section-dark .honesty-note p { color: var(--ink-on-dark); }
.honesty-note strong { color: var(--coral-text); }
.section-dark .honesty-note strong { color: var(--lime); }

/* ---------- обзор линейки продуктов (products.html) ---------- */
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.5vw, 26px); }
/* These cards ARE the doorway into the cabinet ("Открыть в кабинете") — so
   they speak the bridge dialect: 12px corners and a hairline cabinet-grade
   shadow instead of the lander's 26px + layered depth. Hover lifts gently
   (cabinet rows don't fly), so the seam to кабинет reads as one language. */
.product-card {
  background: #fff; border: 1px solid rgba(20,17,12,0.08); border-radius: var(--radius-app);
  padding: clamp(26px, 3vw, 34px); box-shadow: var(--shadow-app); position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s;
}
.product-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--coral), transparent 80%); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-app-hover); border-color: rgba(255,77,46,0.18); }
.product-card:hover::before { transform: scaleX(1); }
.product-card.is-flagship { border-color: rgba(255,77,46,0.28); box-shadow: var(--shadow-app-hover); }
/* flagship top-bar was coral→lime, but it sat directly above the green
   "В кабинете" badge — lime touching a cabinet CTA. Kept coral→transparent,
   matching the green badge below and the cabinet (which carries no lime). */
.product-card.is-flagship::before { transform: scaleX(1); height: 4px; background: linear-gradient(90deg, var(--coral), rgba(255,77,46,0.12) 85%, transparent); }
.product-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.product-emo { width: 50px; height: 50px; border-radius: 15px; background: var(--cream-2); color: var(--coral-text); display: grid; place-items: center; font-size: 1.45rem; border: 1px solid rgba(20,17,12,0.06); flex: 0 0 auto; }
.product-emo .ico { width: 24px; height: 24px; }
/* flagship product (Агент) gets the coral-tinted icon tile */
.product-card.is-flagship .product-emo { background: rgba(255,77,46,0.1); border-color: rgba(255,77,46,0.2); }
.product-card h3 { font-size: 1.26rem; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.02em; }
.product-pain { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--coral-text); text-transform: uppercase; margin-bottom: 12px; }
.product-desc { color: #574f42; font-size: 0.95rem; line-height: 1.56; flex: 1 1 auto; margin-bottom: 22px; }
.product-link {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; color: var(--coral-text);
  transition: gap 0.25s var(--ease), color 0.2s;
}
.product-link:hover { gap: 12px; color: var(--coral-deep); }
.product-link.is-muted { color: var(--muted); pointer-events: none; }
.product-link.is-muted::after { content: none; }

/* "Открыть в кабинете →" — the literal doorway. Rendered as a quiet
   cabinet-grade pill (bridge radius + hairline shadow, calm coral-wash fill)
   rather than a loud coral text link, so the click target already feels like
   кабинет UI. Deliberately NO lime adjacency: the fill, border and hover all
   stay in the coral/ink family the cabinet uses. */
.product-link.is-app {
  font-size: 0.85rem; align-self: flex-start;
  padding: 9px 16px; border-radius: var(--radius-app);
  background: #fff4f0; color: var(--coral-text);
  border: 1px solid rgba(255,77,46,0.18); box-shadow: var(--shadow-app);
  transition: gap 0.25s var(--ease), background 0.22s var(--ease-inout),
    border-color 0.22s var(--ease-inout), box-shadow 0.3s var(--ease), color 0.2s;
}
.product-link.is-app:hover {
  gap: 11px; color: var(--coral-deep);
  background: #ffece5; border-color: rgba(255,77,46,0.32);
  box-shadow: var(--shadow-app-hover);
}

/* ---------- бандл-тарифы платформы (на тёмном) ---------- */
.bundle-plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.5vw, 26px); max-width: 760px; margin-inline: auto; align-items: stretch; }
.bundle-plan {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg);
  padding: clamp(28px, 3vw, 38px); display: flex; flex-direction: column; position: relative;
  transition: transform 0.3s var(--ease), border-color 0.3s;
}
.bundle-plan:hover { transform: translateY(-6px); border-color: rgba(255,77,46,0.3); }
.bundle-plan.is-popular { background: linear-gradient(168deg, #221a13, #14110c); border-color: rgba(255,77,46,0.4); }
/* badge styling comes from the shared .plan-badge rule above — the bundle
   markup already carries class="plan-badge", so no duplicate is needed here. */
.bundle-plan h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; margin-bottom: 14px; color: var(--ink-on-dark); }
.bundle-price { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 4vw, 2.7rem); line-height: 1; margin-bottom: 8px; letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bundle-price .per { font-family: var(--font-body); font-size: 0.96rem; font-weight: 600; color: var(--muted-on-dark); }
.bundle-plan .bundle-note { font-size: 0.84rem; color: var(--muted-on-dark); margin-bottom: 22px; }
.bundle-feat { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; flex: 1 1 auto; }
.bundle-feat li { position: relative; padding-left: 28px; font-size: 0.94rem; color: var(--ink-on-dark); }
/* same masked Lucide check as .plan-features / .crm-check — one handwriting */
.bundle-feat li::before {
  content: ""; position: absolute; left: 0; top: 0.16em;
  width: 1.1em; height: 1.1em; background-color: #6fe095;
  -webkit-mask: var(--ico-check) center / contain no-repeat;
          mask: var(--ico-check) center / contain no-repeat;
}
.bundle-feat li.is-soon { color: var(--muted-on-dark); }
/* "soon" items swap the check for the Lucide open circle (same line hand) */
.bundle-feat li.is-soon::before {
  background-color: var(--muted-on-dark);
  -webkit-mask-image: var(--ico-circle);
          mask-image: var(--ico-circle);
}
.bundle-feat li .mini-soon { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lime); margin-left: 6px; }
.bundle-plan .btn { width: 100%; }

/* ---------- вертикаль: блок "боль" (hero-сторона) ---------- */
.pain-stat {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius); padding: 20px 22px; display: flex; gap: 14px; align-items: center;
}
.pain-stat-num { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.8rem, 3.4vw, 2.6rem); color: var(--coral-soft); line-height: 1; flex: 0 0 auto; letter-spacing: -0.03em; }
.pain-stat-txt { font-size: 0.92rem; color: var(--muted-on-dark); line-height: 1.45; }

/* вертикальная hero-сцена (один диалог, статично, не цикл) */
.vert-scene {
  background: linear-gradient(168deg, #1b1711, var(--coal) 64%);
  border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg);
  padding: clamp(22px, 2.8vw, 30px); box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.05);
  position: relative; overflow: hidden;
}
.vert-scene::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 60% at 85% 0%, rgba(255,77,46,0.13), transparent 55%); pointer-events: none; }
.vert-scene-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.08); position: relative; }
.vert-scene-who { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: var(--muted-on-dark); }
.vert-scene-who strong { color: var(--ink-on-dark); }
.vert-scene-who .call-ico { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px; }
.vert-scene-dialog { display: flex; flex-direction: column; gap: 9px; position: relative; }
.vert-scene-dialog .bubble { opacity: 1; transform: none; max-width: 88%; }

/* "что попало в CRM" — переиспользуем .scene-crm стили, обёртка светлая */
.vert-crm-block { display: flex; flex-direction: column; gap: 13px; }

/* двух-колоночная вертикальная сетка диалог + CRM */
.vert-flow-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(20px, 3vw, 40px); align-items: start; }

/* ---------- CTA-баннер «связать страницы» ---------- */
.xlink-banner {
  display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center;
  background: linear-gradient(168deg, #221a13, var(--coal) 70%);
  border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg);
  padding: clamp(30px, 4vw, 48px); box-shadow: var(--shadow-card); position: relative; overflow: hidden;
}
.xlink-banner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 90% at 90% 0%, rgba(255,77,46,0.16), transparent 60%); pointer-events: none; }
.xlink-banner h2 { font-size: clamp(1.5rem, 3.2vw, 2.3rem); font-weight: 900; color: var(--ink-on-dark); letter-spacing: -0.02em; position: relative; }
.xlink-banner p { margin-top: 12px; color: var(--muted-on-dark); font-size: 1rem; max-width: 52ch; position: relative; }
.xlink-banner .xlink-actions { display: flex; flex-direction: column; gap: 12px; position: relative; flex: 0 0 auto; }

/* ---------- адаптив продуктовых страниц ---------- */
@media (max-width: 980px) {
  .page-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .page-hero-grid > * { min-width: 0; }
  .crm-mock, .vert-scene { max-width: 520px; }
  .vert-flow-grid { grid-template-columns: minmax(0, 1fr); }
  .xlink-banner { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
  .header-actions .header-connect { display: none; }
}
@media (max-width: 760px) {
  .contrast-grid, .fmap-grid, .killer-grid, .products-grid, .bundle-plans { grid-template-columns: minmax(0, 1fr); }
  .page-hero-meta { gap: 22px; }
}
@media (max-width: 480px) {
  /* Unbounded-900 long RU words ("дозвонился", "клиентов") must not bleed past
     the 390 viewport — shrink the clamp and allow break-word as a safety net */
  .page-hero-title { font-size: clamp(1.8rem, 8.4vw, 2.5rem); letter-spacing: -0.02em; overflow-wrap: break-word; word-break: break-word; }
  .page-hero-meta strong { font-size: 1.6rem; }
  .killer-card { flex-direction: column; gap: 14px; }
  .page-hero-cta .btn { width: 100%; }
  /* badges: stack the two status pills so neither is clipped off the edge */
  .page-hero-badges { gap: 8px; }
  .status-badge { white-space: normal; max-width: 100%; }
  /* meta: 3 stat columns don't fit 390 in one row → 2-up grid, no clipping */
  .page-hero-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
  .page-hero-meta li { min-width: 0; }
}