/* ============================================================
   ModalCRM — Marketing site
   Design system: gradient-led modern (matched to app DESIGN.md)
   Surfaces: pure white. Text: black. One signature gradient
   (steel blue → wine red) + muted plum accent.
   ============================================================ */

/* -------- Tokens (matched to CRM app) -------- */
:root {
  /* Brand — single signature gradient */
  --primary: #5C5278;
  --primary-hover: #4A4263;
  --primary-light: rgba(92, 82, 120, 0.08);
  --accent: #5C5278;
  --accent-light: rgba(92, 82, 120, 0.08);
  --brand-gradient: linear-gradient(135deg, #3D6B85 0%, #8B3A4F 100%);
  --brand-gradient-hover: linear-gradient(135deg, #345A70 0%, #762E42 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(61, 107, 133, 0.12) 0%, rgba(139, 58, 79, 0.12) 100%);

  /* Semantic */
  --success: #2E5D3F;
  --success-light: rgba(46, 93, 63, 0.08);
  --warning: #B8862A;
  --warning-light: rgba(184, 134, 42, 0.08);
  --error: #8B3A4F;
  --danger: #8B3A4F;
  --danger-light: rgba(139, 58, 79, 0.08);
  --info: #3D6B85;

  /* Neutrals — pure white surface */
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-subtle: #FAFAFA;
  --border: #E8E8E8;
  --border-light: #EFEFEF;
  --border-strong: #D8D8D8;

  /* Text — pure black ink */
  --text: #000000;
  --text-secondary: #6B6B6B;
  --text-muted: #888888;

  /* Spacing scale (4px base) */
  --sp-2xs: 2px;
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-2xl: 48px;
  --sp-3xl: 64px;
  --sp-4xl: 96px;

  /* Radius hierarchy — матч з CRM */
  --r-chip: 8px;
  --r-btn: 8px;
  --r-card: 12px;
  --r-hero: 20px;
  --r-pill: 9999px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Shadows — Stripe-style subtle (з CRM) */
  --sh-xs: 0 1px 3px rgba(0, 0, 0, 0.04);
  --sh-sm: 0 2px 6px rgba(0, 0, 0, 0.06);
  --sh-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --sh-lg: 0 8px 24px rgba(0, 0, 0, 0.10);
  --sh-xl: 0 16px 40px rgba(0, 0, 0, 0.12);
  --sh-cta: 0 6px 20px rgba(92, 82, 120, .22);

  /* Easing */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);

  /* Layout */
  --container: 1200px;
  --container-narrow: 820px;
  --nav-h: 68px;

  /* Fonts — Fixel (self-hosted у fonts.css; збігається з застосунком) */
  /* 2026-08-16 (Вікторія, після кількох ітерацій): ОДИН шрифт на весь сайт —
     той самий, що на кнопках, тобто чистий Fixel Text. 'Fixel Display' більше
     НЕ використовується ніде: його альтернативні гліфи робили заголовки схожими
     на інший шрифт. Токен лишається задля сумісності, але вказує на Text. */
  --font-display: 'Fixel Text', Verdana, Tahoma, 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Fixel Text', Verdana, Tahoma, 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* -------- Reset -------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* -------- Typography (Inter, tight letter-spacing for display) -------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  /* Без 'cv02','cv11','ss01': ці OpenType-фічі підміняли гліфи в заголовках,
     через що вони читались іншим шрифтом, ніж кнопки й абзаци. */
  font-feature-settings: normal;
  color: var(--text);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  font-weight: 700;
}
h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); letter-spacing: -0.03em; font-weight: 700; }
h3 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.02em; font-weight: 600; }
p { text-wrap: pretty; }
.mono, .num { font-family: var(--font-mono); font-feature-settings: 'tnum', 'zero'; letter-spacing: -0.01em; }
.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
}
/* mono defined above in Typography section */

/* -------- Layout helpers -------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-xl); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--sp-xl); }
.section { padding: var(--sp-4xl) 0; }
.section--tight { padding: var(--sp-3xl) 0; }

/* Scroll-reveal: прихований стан існує лише під html.js-reveal (клас вішає landing.js
   після перевірки prefers-reduced-motion). Без JS сторінка видима повністю. */
html.js-reveal .section > .container {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .6s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
}
html.js-reveal .section > .container.is-vis { opacity: 1; transform: none; }
section[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
.stack-lg > * + * { margin-top: var(--sp-lg); }
.stack-md > * + * { margin-top: var(--sp-md); }
.stack-sm > * + * { margin-top: var(--sp-sm); }

/* -------- Buttons -------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  padding: 12px 24px;
  border-radius: var(--r-btn);
  font-family: var(--font-body);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: transform .2s var(--ease-in-out), background .25s var(--ease-in-out), box-shadow .25s var(--ease-in-out), border-color .2s var(--ease-in-out), color .2s var(--ease-in-out);
  user-select: none;
}
.btn svg { width: 16px; height: 16px; }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--brand-gradient);
  color: #fff;
  border: 1px solid transparent;
}
.btn--primary:hover { background: var(--brand-gradient-hover); transform: translateY(-1px); box-shadow: var(--sh-cta); }

.btn--secondary {
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary);
}
.btn--secondary:hover { color: var(--primary-hover); border-color: var(--primary-hover); transform: translateY(-1px); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid transparent;
  padding: 10px 16px;
}
.btn--ghost:hover { background: var(--surface-subtle); }

.btn--lg { padding: 15px 30px; font-size: 1rem; }
.btn--sm { padding: 9px 16px; font-size: 0.86rem; }

/* -------- Nav -------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-h);
  background: linear-gradient(135deg, rgba(61, 107, 133, 0.06) 0%, rgba(139, 58, 79, 0.06) 100%), #FFFFFF;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(92, 82, 120, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
  transition: box-shadow .25s, border-color .25s;
}
.nav.is-scrolled {
  border-bottom-color: var(--accent);
  box-shadow: 0 1px 0 var(--accent), 0 6px 18px rgba(0, 0, 0, 0.06);
}
.nav__inner {
  height: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-xl);
  display: flex;
  align-items: center;
  gap: var(--sp-xl);
}
.nav__logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--text);
  flex-shrink: 0;
}
.nav__logo span { color: var(--primary); }
.nav__group { display: flex; align-items: center; gap: 4px; }
.nav__item { position: relative; }
.nav__link,
.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  color: var(--text);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.005em;
  border-radius: 10px;
  position: relative;
  transition: color .2s, background .2s;
}
/* Gradient underline accent — hidden by default */
.nav__link::after,
.nav__trigger::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 4px;
  height: 2px;
  background: var(--brand-gradient);
  border-radius: 999px;
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: center;
  transition: opacity .25s var(--ease-out), transform .3s var(--ease-out);
  pointer-events: none;
}
.nav__link:hover,
.nav__trigger:hover {
  color: var(--text);
  background: var(--brand-gradient-soft);
}
.nav__link:hover::after,
.nav__trigger:hover::after {
  opacity: 1;
  transform: scaleX(1);
}
/* Поточна сторінка — та сама градієнтна риска, що й на hover, тільки постійно
   (меню стало багатосторінковим 2026-08-16, без цього не видно, де ти). */
.nav__link.is-active::after,
.nav__trigger.is-active::after { opacity: 1; transform: scaleX(1); }
.nav__trigger svg { width: 13px; height: 13px; opacity: .7; transition: transform .3s var(--ease-in-out); }
.nav__item.is-open .nav__trigger {
  color: var(--text);
  background: var(--brand-gradient-soft);
}
.nav__item.is-open .nav__trigger::after {
  opacity: 1;
  transform: scaleX(1);
}
.nav__item.is-open .nav__trigger svg { transform: rotate(180deg); opacity: 1; }
.nav__right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-sm); }

/* Mega menu */
.mega {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  opacity: 0;
  pointer-events: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(17, 34, 51, .14), 0 4px 12px rgba(17, 34, 51, .06);
  padding: var(--sp-lg);
  min-width: 560px;
  z-index: 999;
  transition: opacity .28s var(--ease-out), transform .28s var(--ease-out);
}
.mega::after {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
.mega::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
}
.nav__item.is-open .mega { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.nav__item--wide .mega { left: 0; transform: translateX(0) translateY(-8px); }
.nav__item--wide.is-open .mega { transform: translateX(0) translateY(0); }
.nav__item--wide .mega::before { left: 40px; transform: translateX(0) rotate(45deg); }

.mega__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.mega__grid--three { grid-template-columns: repeat(3, 1fr); min-width: 720px; }
.mega--modules { min-width: 720px; }
.mega__link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  transition: background .2s;
}
.mega__link:hover { background: var(--surface-subtle); }
.mega__icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 9px;
  background: rgba(61, 107, 133, .08);
  display: grid; place-items: center;
  color: var(--primary);
}
.mega__link:hover .mega__icon { background: var(--brand-gradient); color: #fff; }
.mega__title { display: block; font-size: 0.92rem; font-weight: 700; color: var(--text); line-height: 1.2; }
.mega__desc  { display: block; font-size: 0.78rem; color: var(--text-muted); line-height: 1.4; margin-top: 2px; }
.mega__footer {
  margin-top: var(--sp-md);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end;
}
.mega__footer a { color: var(--primary); font-size: 0.88rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.mega__footer a:hover { gap: 10px; }

/* Mobile menu toggle (hidden desktop) */
.nav__mobile-toggle { display: none; }

/* -------- Hero base -------- */
.hero {
  padding: calc(var(--nav-h) + var(--sp-3xl)) 0 var(--sp-4xl);
  position: relative;
}
.hero__top {
  max-width: 820px;
  margin: 0 auto var(--sp-3xl);
  text-align: center;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(61, 107, 133, .08);
  border-radius: var(--r-pill);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--sp-lg);
}
.hero__eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--success);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(12, 123, 92, .2);
}
.hero h1 { font-size: clamp(2.8rem, 6vw, 4.6rem); }
.hero h1 .grad {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero__lead {
  font-size: 1.2rem;
  color: var(--text-secondary);
  max-width: 660px;
  margin: var(--sp-lg) auto var(--sp-xl);
  line-height: 1.6;
}
.hero__lead strong { color: var(--text); font-weight: 600; }
.hero__ctas { display: flex; gap: var(--sp-md); flex-wrap: wrap; justify-content: center; margin-bottom: var(--sp-lg); }
.hero__consult { display: flex; width: fit-content; align-items: center; gap: 6px; margin: 0 auto var(--sp-lg); font-size: 0.95rem; font-weight: 600; color: var(--text-secondary); text-decoration: none; transition: color .15s; }
.hero__consult:hover { color: var(--primary); }
.hero__consult .arr { transition: transform .15s; }
.hero__consult:hover .arr { transform: translateX(3px); }
.hero__trust { display: flex; gap: var(--sp-lg); flex-wrap: wrap; justify-content: center; color: var(--text-muted); font-size: 0.88rem; }
.hero__trust span { display: inline-flex; align-items: center; gap: 6px; }
.hero__trust svg { width: 14px; height: 14px; color: var(--success); }
.hero__visual {
  position: relative;
  margin: 0 auto;
  max-width: 1160px;
  width: 100%;
  isolation: isolate;
}
.hero__visual-glow {
  position: absolute;
  inset: -12% -8% -12% -8%;
  background:
    radial-gradient(45% 55% at 22% 30%, rgba(61, 107, 133, .22), transparent 70%),
    radial-gradient(50% 55% at 78% 75%, rgba(139, 58, 79, .18), transparent 72%);
  z-index: -1;
  animation: heroGlow 14s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes heroGlow {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-1.5%, -1.5%, 0) scale(1.03); }
  100% { transform: translate3d(1.5%, 1%, 0) scale(1); }
}
.hero__visual-frame {
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .7) inset,
    0 36px 70px -20px rgba(17, 34, 51, .32),
    0 14px 28px -14px rgba(17, 34, 51, .18);
}
.hero__screenshot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 13px;
  image-rendering: -webkit-optimize-contrast;
}

/* Floating cards around the screenshot */
.hero__float {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(17, 34, 51, .12), 0 2px 6px rgba(17, 34, 51, .05);
  font-family: var(--font-body);
  z-index: 2;
  animation: heroFloat 6s ease-in-out infinite;
}
.hero__float-icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 8px;
  display: grid; place-items: center;
}
.hero__float-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  margin-bottom: 2px;
}
.hero__float-value {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.hero__float-value.num { font-family: var(--font-mono); }

.hero__float--one   { top: 8%;  left: -6%;  animation-delay: 0s; }
.hero__float--two   { top: 38%; right: -7%; animation-delay: -2s; }
.hero__float--three { bottom: 10%; left: -4%; animation-delay: -4s; }

@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@media (max-width: 1024px) {
  .hero__float--one   { left: 2%; }
  .hero__float--two   { right: 2%; }
  .hero__float--three { left: 2%; }
}
@media (max-width: 640px) {
  .hero__float { padding: 8px 12px; gap: 8px; }
  .hero__float-icon { width: 28px; height: 28px; }
  .hero__float-value { font-size: 0.8rem; }
  .hero__float-label { font-size: 0.64rem; }
  .hero__float--one   { top: -4%; left: -2%; }
  .hero__float--two   { top: 40%; right: -4%; }
  .hero__float--three { bottom: -4%; left: 2%; }
}

/* -------- Value props (modular, no-hidden-fees) -------- */
.values {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-xl);
}
.value {
  padding: var(--sp-xl);
  border-radius: var(--r-card);
  background: var(--bg);
  border: 1px solid var(--border);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .2s;
}
.value:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--border-strong); }
.value__icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--brand-gradient);
  color: #fff;
  display: grid; place-items: center;
  margin-bottom: var(--sp-md);
}
.value__icon svg { width: 22px; height: 22px; }
.value h3 { margin-bottom: var(--sp-sm); }
.value p { color: var(--text-secondary); font-size: 0.96rem; }

/* -------- Section head (shared) -------- */
.section-head {
  max-width: 720px;
  margin: 0 auto var(--sp-3xl);
  text-align: center;
}
.section-head .eyebrow {
  display: inline-block;
  margin-bottom: var(--sp-md);
  padding: 5px 12px;
  background: rgba(61, 107, 133, .08);
  border-radius: var(--r-pill);
  font-size: 0.72rem;
}
.section-head h2 {
  margin-bottom: var(--sp-md);
}
.section-lead {
  font-size: 1.12rem;
  color: var(--text-secondary);
  line-height: 1.55;
}
.section-lead a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(61, 107, 133, .3);
  transition: border-color .2s;
}
.section-lead a:hover { border-bottom-color: var(--primary); }
.section-lead strong { color: var(--text); font-weight: 600; }

/* -------- Pricing section -------- */
.pricing { background: var(--surface-subtle); }

.pkg-core-note {
  max-width: 1440px;
  margin: 28px auto 0;
  padding: 14px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.pkg-core-note__check {
  flex-shrink: 0;
  color: var(--success);
}
.pkg-core-note__label {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text);
  letter-spacing: -0.01em;
}
.pkg-core-note__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pkg-core-note__chip {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(12, 123, 92, .08);
  border: 1px solid rgba(12, 123, 92, .16);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .pkg-core-note { padding: 14px 16px; }
}

/* Period toggle (monthly / yearly) */
.pkg-period-toggle {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  margin: 0 auto 28px;
  gap: 4px;
}
.pkg-period-btn {
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  background: transparent;
  color: var(--text-secondary, #64748b);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.pkg-period-btn:hover { color: var(--text, #0f172a); }
.pkg-period-btn.is-active {
  background: var(--primary, #2563eb);
  color: #fff;
  box-shadow: 0 4px 14px rgba(37, 99, 235, .25);
}
.pkg-period-save {
  display: inline-block;
  background: rgba(16, 185, 129, .15);
  color: #10b981;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: .3px;
}
.pkg-period-btn.is-active .pkg-period-save {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}
@media (max-width: 480px) {
  .pkg-period-btn { padding: 9px 16px; font-size: 13px; }
  .pkg-period-save { font-size: 10px; padding: 2px 6px; }
}

/* Pricing breaks out of the 1200px container — wider Crisp-style cards */
.pricing .container { max-width: 1440px; }
.pkg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1440px;
  margin: 0 auto;
  align-items: stretch;
}

/* Чотири модульні картки (план модульності 2026-08-22): Спілкування 900 · Сервіс 900 ·
   Торгівля 900 · Все включено 2200. Безкоштовний — рядком над сіткою, він не модуль.
   Не grid, а flex-wrap: перенос сам ставить картки по центру на вузьких екранах —
   планшет 2+2, телефон стовпчик. Один ряд вмикається окремо, нижче. */
.pkg-grid--modules {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: 1500px;
}
/* Пʼять в один ряд і в один екран (2026-08-16, друга ітерація на прохання Вікторії:
   «карточки постав поруч, щоб вміщались на одну сторінку»). Щоб ряд із пʼяти читався
   у ~260px колонки, з картки прибрано все, що дублювалось: опис під назвою, плашка під
   ціною і «герой»-блок. Лишились назва, ціна, «Для кого», список і кнопка. */
.pkg-grid--modules { max-width: 1440px; gap: 12px; }
.pkg-grid--modules .pkg-card {
  /* База 250px: чотири колонки + гепи = 1036px, тож ряд не розсипається аж до 1100px
     ширини вікна. Стеля 340px — щоб на 1920 картки не розтягувались у полотна. */
  flex: 1 1 250px;
  max-width: 340px;
  min-width: 0;
}
@media (max-width: 700px) {
  .pkg-grid--modules .pkg-card { flex-basis: 100%; max-width: 420px; }
}
/* Від 1200px чотири колонки ділять ряд рівними частками — не переносимо. */
@media (min-width: 1200px) {
  .pkg-grid--modules { flex-wrap: nowrap; }
  .pkg-grid--modules .pkg-card { flex: 1 1 0; max-width: none; }
}

/* How many people the price covers is the second question every visitor asks after
   "how much" — so the count itself carries full contrast while the overage tail stays quiet. */
.pkg-card__period strong {
  color: var(--text);
  font-weight: 700;
  font-size: 15px;
}

/* The seat line is one line on Free and two on the paid cards, which pushed every block
   below it out of alignment across the row. Reserving two lines keeps prices, the UAH
   plaque and the feature lists on the same horizontal rails in all three cards. */
.pkg-grid--modules .pkg-card__period { min-height: 30px; }

/* Безкоштовний — рядок над сіткою, а не картка: він не модуль, а вхід у продукт.
   Карткою він щоразу перетягував на себе перший погляд у ряду платних. */
.pkg-free-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 1120px;
  margin: 0 auto 20px;
  padding: 16px 22px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg, 16px);
  background: var(--bg-soft, #FAFAFA);
}
.pkg-free-strip__badge {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pkg-free-strip__text { flex: 1 1 320px; margin: 0; font-size: 15px; line-height: 1.55; }
.pkg-free-strip__cta { flex: 0 0 auto; }
@media (max-width: 700px) {
  .pkg-free-strip { max-width: 480px; }
  .pkg-free-strip__cta { width: 100%; justify-content: center; }
}

/* Правило поєднання модулів і місць — єдине місце на вітрині, де воно написано числами.
   Без нього «до 3» на кожній картці читається як 3+3 при двох модулях. */
.pkg-verticals {
  max-width: 1120px;
  margin: 24px auto 0;
  padding: 18px 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg, 16px);
  background: var(--bg-soft, #FAFAFA);
  text-align: center;
}
.pkg-verticals p { margin: 0; font-size: 15px; line-height: 1.55; }
.pkg-verticals__sub { margin-top: 6px !important; font-size: 13px; color: var(--text-muted, #888); }

@media (max-width: 900px) {
  .pkg-grid--modules { max-width: 480px; }
  .pkg-verticals { max-width: 480px; }
}
.pkg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  /* Компактніше (2026-08-16): пʼять карток мають вміщатись в один екран, а не в один ряд */
  padding: 24px 20px 22px;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .2s;
  box-shadow: 0 4px 14px -4px rgba(17, 34, 51, .06);
}
.pkg-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 30px 60px -16px rgba(17, 34, 51, .18),
    0 8px 20px -4px rgba(17, 34, 51, .08);
  border-color: var(--border-strong);
}
/* Crisp-style incremental cards — "що входить" label + hero block */
.pkg-card__incl-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.pkg-card__incl-label--accent {
  color: var(--primary);
}
.pkg-card__hero {
  background: var(--surface-subtle);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.pkg-card--featured .pkg-card__hero {
  background: var(--brand-gradient-soft);
  border-color: rgba(92, 82, 120, 0.18);
}
.pkg-card__hero-t {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.pkg-card__hero-s {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-top: 4px;
}
/* Hide redundant blocks — Crisp-style compact cards */
.pkg-card__bonuses,
.pkg-card__addons-title,
.pkg-card__overflow,
.pkg-card__users,
.pkg-card__features li.is-locked { display: none !important; }

/* "Детальніше про X" — secondary outline button under primary CTA */
.pkg-card__more {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 11px 16px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-align: center;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.pkg-card__more:hover {
  background: var(--surface-subtle);
  color: var(--text);
  border-color: var(--primary);
}

/* "Total team cost" plaque — replaces old per-user pill + per-user-price line.
   Variant A reframe: big number above is per-user; this plaque shows total team cost. */
.pkg-card__total-plaque {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  background: var(--surface-subtle);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  margin: 8px 0 22px;
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.4;
}
.pkg-card__total-plaque b { color: var(--text); font-weight: 700; }
.pkg-card__total-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background: var(--primary);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>") center/contain no-repeat;
}
.pkg-card--featured .pkg-card__total-plaque {
  background: var(--brand-gradient-soft);
  border-color: rgba(92, 82, 120, 0.18);
}
.pkg-card--featured .pkg-card__total-icon { background: var(--accent); }
.pkg-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -12px rgba(17, 34, 51, .14), 0 4px 10px rgba(17, 34, 51, .06);
  border-color: var(--border-strong);
}
.pkg-card.is-highlight {
  animation: pkgHighlight 1.8s ease-out;
}
@keyframes pkgHighlight {
  0%   { box-shadow: 0 0 0 0 rgba(61, 107, 133, 0.55); transform: translateY(0); }
  20%  { box-shadow: 0 0 0 8px rgba(61, 107, 133, 0.18); transform: translateY(-4px); }
  100% { box-shadow: 0 0 0 0 rgba(61, 107, 133, 0); transform: translateY(0); }
}

/* Featured — gradient border + strong pop */
.pkg-card--featured {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--brand-gradient) border-box;
  box-shadow:
    0 24px 50px -12px rgba(61, 107, 133, .28),
    0 8px 20px -4px rgba(139, 58, 79, 0.10);
  z-index: 1;
  transform: translateY(-8px);
}
.pkg-card--featured:hover {
  transform: translateY(-12px);
  box-shadow:
    0 36px 70px -14px rgba(61, 107, 133, .34),
    0 12px 28px -6px rgba(139, 58, 79, 0.14);
}
.pkg-card__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 16px;
  background: var(--brand-gradient);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(61, 107, 133, .35);
}
/* «Найвигідніше» на бандлі — суцільний плам, не другий градієнт: підпис бренду один
   і лишається на «Популярний» (DESIGN.md §8, одна градієнтна ознака на екран). */
.pkg-card__badge--best {
  background: var(--accent);
  box-shadow: 0 8px 20px rgba(86, 75, 125, .3);
}

/* Scale — subtle dark-accent */
.pkg-card--scale {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-subtle) 100%);
}

.pkg-card__head {
  /* min-height тримало вирівнювання, поки в шапці був ще й опис під назвою. Опис
     прибрано (2026-08-16) — 140px перетворились на порожнечу над ціною. */
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
}
.pkg-card__icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(61, 107, 133, .08);
  color: var(--primary);
  display: grid; place-items: center;
  margin-bottom: 10px;
}
.pkg-card__icon svg { width: 20px; height: 20px; }
.pkg-card--featured .pkg-card__icon {
  background: var(--brand-gradient);
  color: #fff;
  box-shadow: 0 8px 18px -4px rgba(61, 107, 133, 0.35);
}
.pkg-card__name {
  /* Той самий Fixel Text, що й у застосунку: 700 і звичайний кегль. Вага 800 із
     розрідженням -0.035em читалась як окремий дисплейний шрифт поруч із рештою продукту. */
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.05;
}
.pkg-card__desc {
  font-size: 0.94rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.pkg-card__price {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.pkg-card__amount {
  /* Жодних OpenType-фіч на цифрах. Спершу прибрали 'zero' (перекреслений нуль),
     потім 'tnum': у Fixel табличні цифри — окремі, ширші гліфи, тому ціна далі
     читалась як набрана іншим шрифтом, ніж решта сайту (Вікторія, 2026-08-17).
     Ціни статичні й не вирівнюються в колонку — табличні цифри тут не потрібні. */
  font-family: var(--font-body);
  font-size: 2.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  font-feature-settings: normal;
  color: var(--success);                 /* per-user price → green accent */
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 4px;
}
.pkg-card__currency {
  /* Гривня стояла надрядково (top:-11px) і вдвічі меншим кеглем — через це ціна
     читалась не як текст сайту, а як чужий набір «900 ₴» зі знаком-надрядком.
     Тепер ₴ на базовій лінії, тим самим накресленням, що й цифри — як усюди
     на сайті («+200 ₴», «900 ₴»). Вікторія, 2026-08-17. */
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--success);
  letter-spacing: -0.02em;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: var(--success);
}
.pkg-card__unit {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: -0.005em;
  margin-left: 2px;
}
.pkg-card__amount--custom {
  font-size: 2.3rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
}
.pkg-card__period {
  font-size: 0.92rem;
  color: var(--text-muted);
  font-weight: 500;
}
.pkg-card__users {
  font-size: 0.82rem;
  color: var(--text-secondary);
  padding: 6px 0 10px;
}
.pkg-card__users strong { color: var(--text); font-weight: 700; }

.pkg-card__overflow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  background: var(--surface-subtle);
  border-radius: 8px;
  margin-bottom: 18px;
}
.pkg-card__overflow span {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-size: 0.72rem;
  color: var(--text-secondary);
  white-space: nowrap;
}
.pkg-card__overflow span strong {
  color: var(--text);
  font-weight: 700;
  font-family: var(--font-mono);
  font-feature-settings: 'tnum';
}
.pkg-card__overflow--scale {
  justify-content: center;
}
.pkg-card__overflow--scale span {
  font-weight: 600;
  color: var(--primary);
}

.pkg-card__addons-title {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.pkg-card__bonuses {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pkg-card__bonuses li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
}
.pkg-card__bonuses li svg {
  width: 14px;
  height: 14px;
  color: var(--success, #34d399);
  flex-shrink: 0;
}

.pkg-card__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  margin-bottom: 18px;
}
.pkg-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.89rem;
  line-height: 1.4;
  color: var(--text-secondary);
}
.pkg-card__features li svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  color: var(--success);
  margin-top: 3px;
}
.pkg-card__features li strong {
  color: var(--text);
  font-weight: 600;
}
.pkg-card__features li.is-locked {
  opacity: 0.4;
}
.pkg-card__features li.is-locked svg {
  color: var(--text-secondary);
}
.pkg-card__features li.is-locked strong {
  font-weight: 500;
  color: var(--text-secondary);
}

.pkg-card__cta {
  width: 100%;
  justify-content: center;
  font-size: 1.02rem;
  font-weight: 700;
  padding: 16px 22px;
  border-radius: 12px;
  letter-spacing: -0.005em;
  margin-top: auto;
  box-shadow: 0 8px 20px -6px rgba(61, 107, 133, .30);
}
.pkg-card__cta:hover {
  box-shadow: 0 12px 28px -6px rgba(61, 107, 133, .42);
}
.pkg-card--featured .pkg-card__cta {
  box-shadow: 0 12px 26px -6px rgba(61, 107, 133, .45);
}
.pkg-card__cta.is-current,
.pkg-card__cta.is-locked {
  box-shadow: none;
}
/* .pkg-card__more — visible outline button under primary CTA (overrides early hidden + later stretched-link rules) */
.pkg-card__more {
  display: block !important;
  width: 100%;
  margin-top: 10px !important;
  padding: 11px 16px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
  position: relative;
  z-index: 2;
}
.pkg-card__more::after { display: none !important; }
.pkg-card__more:hover {
  background: var(--surface-subtle);
  color: var(--text);
  border-color: var(--primary);
  text-decoration: none;
}

/* -------- Detailed descriptions of each package -------- */
.pkg-details {
  margin-top: 72px;
  padding-top: 48px;
  border-top: 1px solid var(--border);
}
.pkg-details__head {
  text-align: center;
  margin-bottom: 40px;
}
.pkg-details__head .eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 12px;
  background: rgba(61, 107, 133, .08);
  border-radius: var(--r-pill);
  font-size: 0.72rem;
}
.pkg-details__head h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
/* Tabs nav */
.pkg-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  margin: 0 auto 32px;
  flex-wrap: wrap;
  justify-content: center;
}
.pkg-details { text-align: center; }
.pkg-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 9px 20px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: var(--r-pill);
  transition: background .2s, color .2s, transform .15s;
}
.pkg-tab:hover { color: var(--text); }
.pkg-tab.is-active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: 0 2px 6px rgba(17, 34, 51, .08);
}
.pkg-tab__badge {
  color: var(--accent);
  font-size: 0.82rem;
  margin-left: 2px;
}
.pkg-tab.is-active .pkg-tab__badge { color: var(--accent); }

.pkg-details__grid {
  display: block;
  max-width: 860px;
  margin: 0 auto;
  text-align: left;
}
.pkg-detail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 36px;
  scroll-margin-top: calc(var(--nav-h) + 20px);
  display: none;
  flex-direction: column;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
  animation: pkgDetailIn .35s var(--ease-out);
}
.pkg-detail.is-active { display: flex; }
@keyframes pkgDetailIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pkg-detail--featured {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--brand-gradient) border-box;
}
.pkg-detail--scale {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-subtle) 100%);
}

.pkg-detail__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.pkg-detail__icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(61, 107, 133, .08);
  color: var(--primary);
  display: grid; place-items: center;
}
.pkg-detail__icon--featured {
  background: var(--brand-gradient);
  color: #fff;
}
.pkg-detail__name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.15;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.pkg-detail__label {
  display: inline-block;
  padding: 2px 10px;
  background: var(--brand-gradient);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pkg-detail__price {
  font-size: 0.84rem;
  color: var(--text-secondary);
  margin-top: 2px;
}
.pkg-detail__lead {
  font-size: 0.94rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 10px;
}
.pkg-detail__lead strong { color: var(--text); font-weight: 700; }
.pkg-detail p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 10px;
}
.pkg-detail__who {
  font-size: 0.82rem !important;
  color: var(--text-muted) !important;
  padding: 10px 12px;
  background: var(--surface-subtle);
  border-radius: 8px;
  margin-top: 4px !important;
  margin-bottom: 16px !important;
}
.pkg-detail__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--primary);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  margin-top: auto;
  transition: gap .2s, color .2s;
}
.pkg-detail__cta:hover { gap: 10px; color: var(--primary-hover); }

@media (max-width: 560px) {
  .pkg-tab { padding: 8px 14px; font-size: 0.84rem; }
  .pkg-detail { padding: 22px 20px; }
}

.pkg-footnote {
  max-width: 860px;
  margin: var(--sp-2xl) auto 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.pkg-footnote p { margin-bottom: 6px; }
.pkg-footnote strong { color: var(--text-secondary); font-weight: 600; }
.pkg-footnote a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(61, 107, 133, .3);
}
.pkg-footnote a:hover { border-bottom-color: var(--primary); }

/* Responsive: 4 → 2 → 1 columns */
@media (max-width: 1100px) {
  .pkg-grid { grid-template-columns: repeat(2, 1fr); max-width: 720px; gap: 18px; }
  .pkg-card--featured { transform: none; }
  .pkg-card--featured:hover { transform: translateY(-6px); }
}
@media (max-width: 560px) {
  .pkg-grid { grid-template-columns: 1fr; max-width: 420px; }
  .pkg-card { padding: 28px 22px 26px; }
  .pkg-card__name { font-size: 1.65rem; }
  .pkg-card__amount { font-size: 2.8rem; }
  .pkg-card__currency { font-size: 1.85rem; }
  .pkg-card__head { min-height: 0; margin-bottom: 22px; }
}

/* === Scale enterprise banner (under pkg-grid, request-only) === */
.pkg-enterprise {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 1440px;
  margin: 28px auto 0;
  padding: 26px 32px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--surface-subtle), var(--surface));
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px -4px rgba(17, 34, 51, 0.06);
}
.pkg-enterprise__main {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  flex: 1;
  min-width: 0;
}
.pkg-enterprise__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--brand-gradient);
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 8px 18px -6px rgba(61, 107, 133, 0.4);
}
.pkg-enterprise__body { flex: 1; min-width: 0; }
.pkg-enterprise__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.pkg-enterprise__name {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0 0 4px;
  line-height: 1.2;
}
.pkg-enterprise__desc {
  font-size: 0.93rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.45;
}
.pkg-enterprise__price {
  font-size: 0.85rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.pkg-enterprise__price strong {
  font-size: 1.1rem;
  color: var(--text);
  font-weight: 800;
}
.pkg-enterprise__perks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pkg-enterprise__perks span {
  background: var(--surface);
  border: 1px solid var(--border-light);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.pkg-enterprise__ctas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.pkg-enterprise__cta {
  white-space: nowrap;
  padding: 14px 26px;
  box-shadow: 0 8px 20px -6px rgba(61, 107, 133, .30);
}
.pkg-enterprise__more {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px;
  letter-spacing: -0.005em;
  transition: color .2s;
}
.pkg-enterprise__more:hover { color: var(--primary); }
@media (max-width: 900px) {
  .pkg-enterprise {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 22px 24px;
  }
  .pkg-enterprise__ctas { width: 100%; }
  .pkg-enterprise__cta { width: 100%; justify-content: center; }
}

/* === Admin-only tariff gate modal === */
.admin-only-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: 20px;
}
.admin-only-modal[hidden] { display: none; }
.admin-only-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.55);
  backdrop-filter: blur(2px);
  animation: adminOnlyFadeIn .2s ease;
}
.admin-only-modal__body {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border-radius: 18px;
  padding: 32px 28px 24px;
  text-align: center;
  box-shadow: 0 24px 60px -12px rgba(17, 34, 51, 0.35);
  animation: adminOnlySlide .25s cubic-bezier(.16, 1, .3, 1);
}
@keyframes adminOnlyFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes adminOnlySlide {
  from { transform: translateY(12px) scale(.96); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.admin-only-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.admin-only-modal__close:hover {
  background: var(--surface-subtle);
  color: var(--text);
}
.admin-only-modal__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 16px;
  background: var(--brand-gradient-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
}
.admin-only-modal__title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 10px;
}
.admin-only-modal__text {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 22px;
}
.admin-only-modal__text strong { color: var(--text); font-weight: 700; }
.admin-only-modal__actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.admin-only-modal__actions .btn {
  min-width: 140px;
  padding: 12px 22px;
}
body.admin-only-modal-open { overflow: hidden; }

/* -------- Constructor (interactive pricing calculator) -------- */
.constructor { background: transparent; }
.cstr-fold { max-width: 1200px; margin: 0 auto; }
.cstr-fold__btn {
  list-style: none;
  cursor: pointer;
  width: fit-content;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: color .15s, border-color .15s;
}
.cstr-fold__btn::-webkit-details-marker { display: none; }
.cstr-fold__btn::marker { content: ""; }
.cstr-fold__btn:hover { color: var(--text); border-color: var(--text-secondary); }
.cstr-fold__chevron { flex-shrink: 0; transition: transform .2s; }
.cstr-fold[open] .cstr-fold__chevron { transform: rotate(180deg); }
.cstr-fold__lead { text-align: center; max-width: 640px; margin: 20px auto 28px; }
.cstr {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(320px, 1fr);
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}

/* LEFT — config blocks */
.cstr__config { display: flex; flex-direction: column; gap: 20px; }
.cstr__block {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 26px;
}
.cstr__block-head {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.cstr__block-title {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 3px;
}
.cstr__block-sub {
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.cstr__block-note {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--surface-subtle);
  border-radius: 8px;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.cstr__block-note strong { color: var(--text); font-weight: 600; }
.cstr__block-note em { color: var(--primary); font-style: normal; font-weight: 600; }

/* Core — inline chips with checkmark */
.cstr__core {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.cstr__core-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(12, 123, 92, .08);
  color: var(--success);
  border-radius: var(--r-pill);
  font-size: 0.82rem;
  font-weight: 600;
}
.cstr__core-item svg { width: 13px; height: 13px; }

/* Paid modules — checkbox rows */
.cstr__modules {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.cstr__mod {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .15s;
}
.cstr__mod--wide { grid-column: 1 / -1; }
.cstr__mod:hover { border-color: var(--border-strong); background: var(--surface); }
.cstr__mod input { position: absolute; opacity: 0; pointer-events: none; }
.cstr__mod-box {
  width: 20px; height: 20px;
  border: 1.5px solid var(--border-strong);
  border-radius: 5px;
  flex-shrink: 0;
  position: relative;
  transition: border-color .15s, background .15s;
}
.cstr__mod-box::after {
  content: '';
  position: absolute;
  left: 5px; top: 2px;
  width: 6px; height: 11px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) scale(0);
  transition: transform .18s var(--ease-out);
}
.cstr__mod input:checked ~ .cstr__mod-box {
  background: var(--brand-gradient);
  border-color: transparent;
}
.cstr__mod input:checked ~ .cstr__mod-box::after { transform: rotate(45deg) scale(1); }
.cstr__mod input:checked ~ .cstr__mod-info .cstr__mod-name { color: var(--primary); }
.cstr__mod:has(input:checked) {
  border-color: var(--primary);
  background: rgba(61, 107, 133, .03);
}
.cstr__mod input:focus-visible ~ .cstr__mod-box {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.cstr__mod-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cstr__mod-name {
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}
.cstr__mod-desc {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.35;
}
.cstr__mod-price {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  flex-shrink: 0;
}

/* Users controls: +/- buttons + numeric input + slider */
.cstr__users { display: flex; flex-direction: column; gap: 14px; }
.cstr__users-control {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cstr__users-btn {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--text);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
  display: grid; place-items: center;
  padding: 0;
  flex-shrink: 0;
}
.cstr__users-btn:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}
.cstr__users-btn:active { transform: scale(0.95); }
.cstr__users-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-muted);
}
.cstr__users-input {
  font-family: var(--font-display);
  width: 82px;
  height: 38px;
  padding: 0 12px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.03em;
  text-align: center;
  transition: border-color .15s, box-shadow .15s;
  -moz-appearance: textfield;
  appearance: textfield;
}
.cstr__users-input::-webkit-outer-spin-button,
.cstr__users-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cstr__users-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}
.cstr__users-word {
  font-size: 0.94rem;
  color: var(--text-secondary);
  font-weight: 500;
  margin-left: 4px;
}
.cstr__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--surface-subtle);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
.cstr__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--brand-gradient);
  border: 3px solid var(--surface);
  box-shadow: 0 2px 6px rgba(61, 107, 133, .3);
  cursor: grab;
  transition: transform .15s;
}
.cstr__slider::-webkit-slider-thumb:hover { transform: scale(1.1); }
.cstr__slider::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--brand-gradient);
  border: 3px solid var(--surface);
  box-shadow: 0 2px 6px rgba(61, 107, 133, .3);
  cursor: grab;
}
.cstr__users-ticks {
  position: relative;
  height: 18px;
  margin-top: 4px;
  font-size: 0.74rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.cstr__users-ticks span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}
.cstr__users-ticks span:first-child { transform: translateX(0); }
.cstr__users-ticks span:last-child { transform: translateX(-100%); }

/* RIGHT — sticky summary */
.cstr__summary { position: sticky; top: calc(var(--nav-h) + 16px); }
.cstr__summary-inner {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px 24px;
  box-shadow: 0 8px 24px -12px rgba(17, 34, 51, .08);
}
.cstr__sum-head { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.cstr__sum-head .eyebrow { margin-bottom: 8px; font-size: 0.68rem; letter-spacing: 0.12em; }
.cstr__sum-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}

.cstr__sum-rows { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.cstr__sum-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 0.92rem;
}
.cstr__sum-label { color: var(--text-secondary); }
.cstr__sum-hint { color: var(--text-muted); font-size: 0.8rem; }
.cstr__sum-value { color: var(--text); font-weight: 600; }

.cstr__sum-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 0;
  border-top: 1.5px solid var(--border);
  margin-bottom: 16px;
}
.cstr__sum-total-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.cstr__sum-total-value {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.03em;
}
.cstr__sum-total-period {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0;
}

.cstr__hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(61, 107, 133, .07);
  border: 1px solid rgba(61, 107, 133, .18);
  border-radius: 10px;
  margin-bottom: 16px;
  animation: cstrHintIn .3s var(--ease-out);
}
@keyframes cstrHintIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cstr__hint svg { flex-shrink: 0; color: var(--primary); margin-top: 1px; }
.cstr__hint-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}
.cstr__hint-desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.cstr__cta {
  width: 100%;
  justify-content: center;
  margin-bottom: 10px;
}
.cstr__note {
  text-align: center;
  font-size: 0.76rem;
  color: var(--text-muted);
}

/* Responsive */
@media (max-width: 960px) {
  .cstr { grid-template-columns: 1fr; }
  .cstr__summary { position: relative; top: 0; order: -1; }
  .cstr__modules { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cstr__block { padding: 18px; }
  .cstr__core { gap: 6px 8px; }
  .cstr__core-item { font-size: 0.76rem; padding: 4px 10px; }
}

/* -------- Features / Можливості -------- */
.features { background: var(--surface-subtle); }
.feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
  max-width: 1240px;
  margin: 0 auto 100px;
}
.feat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px 32px 32px;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .2s;
}
.feat:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -16px rgba(17, 34, 51, .14);
  border-color: var(--border-strong);
}
.feat__icon {
  width: 56px; height: 56px;
  border-radius: 13px;
  background: var(--brand-gradient);
  color: #fff;
  display: grid; place-items: center;
  margin-bottom: 24px;
  box-shadow: 0 8px 18px -4px rgba(61, 107, 133, .32);
}
.feat__icon svg { width: 26px; height: 26px; }
.feat h3 {
  font-size: 1.38rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  line-height: 1.25;
  color: var(--text);
}
.feat p {
  font-size: 1.04rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.feat p strong { color: var(--text); font-weight: 600; }
.feat p a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* Block 2 — Thoughtful / perspectives */
.feat-thoughtful {
  max-width: 1240px;
  margin: 0 auto;
  padding-top: 72px;
  border-top: 1px solid var(--border);
}
.feat-thoughtful__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.feat-thoughtful__head .eyebrow {
  display: inline-block;
  padding: 6px 14px;
  background: var(--brand-gradient);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: 0.74rem;
  margin-bottom: 18px;
  -webkit-text-fill-color: #fff;
}
.feat-thoughtful__head h3 {
  font-size: clamp(1.85rem, 3.2vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 18px;
  line-height: 1.15;
}
.feat-thoughtful__head p {
  font-size: 1.14rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.persp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.persp {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 32px 28px;
  position: relative;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .2s;
}
.persp:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -14px rgba(17, 34, 51, .12);
  border-color: var(--border-strong);
}
.persp__tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  background: rgba(61, 107, 133, .1);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  margin-bottom: 16px;
}
.persp__title {
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.25;
}
.persp p {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.persp p strong { color: var(--text); font-weight: 600; }

@media (max-width: 860px) {
  .feat-grid { grid-template-columns: 1fr; gap: 18px; margin-bottom: 64px; }
  .feat { padding: 28px 24px 26px; }
  .feat__icon { width: 48px; height: 48px; margin-bottom: 18px; }
  .feat__icon svg { width: 22px; height: 22px; }
  .feat h3 { font-size: 1.22rem; }
  .feat p { font-size: 0.98rem; }

  .feat-thoughtful { padding-top: 48px; }
  .feat-thoughtful__head { margin-bottom: 32px; }
  .persp-grid { grid-template-columns: 1fr; gap: 16px; }
  .persp { padding: 24px 22px; }
  .persp__title { font-size: 1.2rem; }
}

/* -------- Modules showcase — V2 DARK MODULES -------- */
.modules-showcase {
  position: relative;
  background: linear-gradient(135deg, #1F2C3A 0%, #2A1A22 100%);
  color: #FFFFFF;
  isolation: isolate;
  overflow: hidden;
}
.modules-showcase::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 80% at 20% 0%, rgba(61, 107, 133, .32), transparent 65%),
    radial-gradient(50% 70% at 90% 100%, rgba(139, 58, 79, .22), transparent 70%);
}
.modules-showcase .container { max-width: 1440px; position: relative; }

/* Тексты внутри тёмной секции */
.modules-showcase .section-head h2,
.modules-showcase .mod-panel__title { color: #FFFFFF; }
.modules-showcase .section-head .eyebrow { color: #A8C8E0; }
.modules-showcase .section-head p,
.modules-showcase .section__lead { color: rgba(255, 255, 255, .72); }
.modules-showcase .section-head p strong { color: #FFFFFF; font-weight: 700; }
.modules-showcase .mod-panel__col-label { color: rgba(255, 255, 255, .58); }
.modules-showcase .mod-panel__desc { color: rgba(255, 255, 255, .80); }
.modules-showcase .mod__bullets li { color: rgba(255, 255, 255, .85); }
.modules-showcase .mod__bullets li::before { background: rgba(12, 123, 92, .28); }
.modules-showcase .mod__tag {
  color: #A8C8E0;
  background: rgba(61, 107, 133, .22);
}

/* Module tab nav (same visual as pkg-tabs) */
.mod-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  margin: 0 auto 40px;
  max-width: 1100px;
}
.mod-tabs::-webkit-scrollbar { display: none; }
.mod-tab {
  padding: 9px 18px;
  background: transparent;
  color: rgba(255, 255, 255, .68);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: var(--r-pill);
  transition: background .2s, color .2s;
  white-space: nowrap;
}
.mod-tab:hover { color: #FFFFFF; }
.mod-tab.is-active {
  background: #FFFFFF;
  color: var(--primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

/* Panels — only active one is visible */
.mod-panels {
  max-width: 1400px;
  margin: 0 auto;
}
.mod-panel {
  display: none;
  animation: modPanelIn .4s var(--ease-out);
}
.mod-panel.is-active { display: flex; flex-direction: column; align-items: stretch; width: 100%; }

/* Crisp-style module panel: feature list (left) ↔ big screenshot (right) */
.mod-crisp {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 44px;
  align-items: start;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}
.mod-crisp__feats { display: flex; flex-direction: column; gap: 12px; }
.mod-feat {
  display: flex; gap: 14px; align-items: flex-start;
  text-align: left; width: 100%;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .035);
  color: #fff; font: inherit; cursor: pointer;
  transition: background .2s, border-color .2s;
}
.mod-feat:hover { background: rgba(255, 255, 255, .07); }
.mod-feat.is-active { background: rgba(255, 255, 255, .09); border-color: rgba(168, 200, 224, .45); }
.mod-feat__ic { color: #A8C8E0; flex-shrink: 0; margin-top: 1px; }
.mod-feat__ic svg { width: 22px; height: 22px; display: block; }
.mod-feat__t { font-size: 1.02rem; font-weight: 600; line-height: 1.4; }
.mod-crisp .mod-panel__cta { align-self: flex-start; margin-top: 6px; }
.mod-crisp__shot {
  position: relative;
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 30px 60px -22px rgba(0, 0, 0, .55);
  background: #FFFFFF;
}
.mod-crisp__shot img { width: 100%; height: auto; display: none; }
.mod-crisp__shot img.is-active { display: block; }
/* Carousel controls (arrows + dots) over the screenshot */
.mod-crisp__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(15, 23, 32, .55); border: 1px solid rgba(255, 255, 255, .25);
  color: #fff; cursor: pointer; opacity: 0; z-index: 2;
  transition: opacity .2s, background .2s;
  backdrop-filter: blur(4px);
}
.mod-crisp__shot:hover .mod-crisp__arrow { opacity: 1; }
.mod-crisp__arrow:hover { background: rgba(15, 23, 32, .8); }
.mod-crisp__arrow svg { width: 20px; height: 20px; }
.mod-crisp__arrow--prev { left: 12px; }
.mod-crisp__arrow--next { right: 12px; }
.mod-crisp__dots {
  position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2;
  display: flex; gap: 7px; justify-content: center;
}
.mod-crisp__dot {
  width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%;
  background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
  cursor: pointer; transition: background .2s, transform .2s;
}
.mod-crisp__dot.is-active { background: #fff; transform: scale(1.3); }
@media (max-width: 860px) {
  .mod-crisp { grid-template-columns: 1fr; gap: 24px; }
}
@keyframes modPanelIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Variant C: Magazine layout ─── */
/* 1. Head: centered tag + title */
.mod-panel__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 36px;
}
.mod-panel__head .mod__tag { margin-bottom: 14px; }
.mod-panel__title {
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--text);
  margin: 0;
}

/* 2. Two columns: Контекст | Що вміє */
.mod-panel__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  max-width: 920px;
  margin: 0 auto;
}
.mod-panel__col {
  min-width: 0;
}
.mod-panel__col-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 14px;
}
.mod-panel__desc {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}
.mod-panel .mod__bullets {
  margin: 0 0 20px;
}

/* 3. Visual (screenshot) hidden — panels show description + CTA only */
.mod-panel__visual { display: none; }
.mod-panel__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 24px;
  background: var(--brand-gradient);
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font-family: var(--font-body);
  font-size: 0.94rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 16px -6px rgba(61, 107, 133, .35);
  transition: background .2s, transform .15s, box-shadow .2s;
}
.mod-panel__cta:hover {
  background: var(--brand-gradient-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px rgba(61, 107, 133, .5);
}
.mod-panel__cta:active {
  transform: translateY(0);
}

.mod__tag {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  background: rgba(61, 107, 133, .08);
  padding: 5px 12px;
  border-radius: var(--r-pill);
}
.mod__bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mod__bullets li {
  position: relative;
  padding-left: 26px;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.mod__bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 16px; height: 16px;
  background: rgba(12, 123, 92, .12);
  border-radius: 50%;
}
.mod__bullets li::after {
  content: '';
  position: absolute;
  left: 4px; top: 11px;
  width: 8px; height: 5px;
  border-left: 2px solid var(--success);
  border-bottom: 2px solid var(--success);
  transform: rotate(-45deg);
}

/* Visual block — big screenshot like hero */
.mod-panel__visual {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  isolation: isolate;
}
.mod-shot__glow {
  position: absolute;
  inset: -8%;
  background:
    radial-gradient(40% 45% at 25% 25%, rgba(61, 107, 133, .35), transparent 72%),
    radial-gradient(45% 50% at 75% 75%, rgba(139, 58, 79, .28), transparent 72%);
  z-index: -1;
  pointer-events: none;
}
.mod-shot {
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow:
    0 50px 100px -20px rgba(0, 0, 0, .65),
    0 20px 40px -10px rgba(0, 0, 0, .45),
    0 0 0 1px rgba(255, 255, 255, .05);
  transition: aspect-ratio .5s var(--ease-out);
}
/* GIF-mode shot — fixed aspect (matches modal) so the inline animated
   demo has predictable dimensions. The .md-frame inside fills it 100%. */
.mod-shot--gif {
  aspect-ratio: 1180 / 720;
  max-width: 1180px;
  margin: 0 auto;
}
.mod-shot--gif .md-frame { font-size: 13px; }
/* Chat demo frame inside module panel — fill container, drop outer chrome */
.mod-shot--gif .demo-frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  margin: 0; border: 0; border-radius: 0; box-shadow: none;
}
/* Restart animations from frame 0 when a tab becomes active. Inactive
   panels suppress all child animations; activating re-applies them
   fresh (browsers treat animation:none → name change as a new run). */
.mod-panel:not(.is-active) .mod-shot--gif *,
.mod-panel:not(.is-active) .mod-shot--gif {
  animation: none !important;
}
/* All screens are absolutely positioned — container's aspect-ratio (set by JS)
   determines its size. Images fill via object-fit: contain to avoid cropping. */
.mod-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transition: opacity .5s var(--ease-out);
}
.mod-screen.is-active { opacity: 1; z-index: 1; }

/* Dots — hidden in favor of side arrows */
.mod-dots { display: none; }

/* Side arrows for screen navigation */
.mod-shot__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--border);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px -6px rgba(17, 34, 51, .28);
  backdrop-filter: blur(6px);
  transition: background .2s, transform .2s, box-shadow .2s, opacity .2s;
  opacity: 0.85;
}
.mod-shot__arrow:hover {
  background: #fff;
  opacity: 1;
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 10px 24px -8px rgba(17, 34, 51, .4);
}
.mod-shot__arrow:active { transform: translateY(-50%) scale(0.98); }
.mod-shot__arrow svg { width: 20px; height: 20px; }
.mod-shot__arrow--prev { left: 14px; }
.mod-shot__arrow--next { right: 14px; }

/* Counter "1 / 4" below the shot */
.mod-shot__counter {
  display: block;
  margin-top: 14px;
  text-align: center;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}
.mod-shot__counter b {
  color: var(--primary);
  font-weight: 700;
}

@media (max-width: 640px) {
  .mod-shot__arrow { width: 38px; height: 38px; }
  .mod-shot__arrow--prev { left: 8px; }
  .mod-shot__arrow--next { right: 8px; }
}

.mod-back {
  text-align: center;
  margin-top: 32px;
}
.mod-back__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.mod-back__btn:hover {
  background: var(--surface);
  border-color: var(--primary);
  color: var(--primary);
  transform: translateX(-2px);
}

.mod-footnote {
  text-align: center;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  font-size: 0.96rem;
  color: var(--text-muted);
}
.mod-footnote a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(61, 107, 133, .3);
}
.mod-footnote a:hover { border-bottom-color: var(--primary); }

/* Core / additional modules grid (inside the dark modules section) */
.mod-core { margin-top: 56px; }
.mod-core__head { text-align: center; max-width: 680px; margin: 0 auto 32px; }
.mod-core__head h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0 0 10px;
}
.mod-core__head p { font-size: 1.05rem; line-height: 1.55; color: rgba(255, 255, 255, .72); margin: 0; }
.mod-core-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 22px;
  align-items: start;
}
.mod-core-card {
  position: relative;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  padding: 14px 14px 18px;
  transition: transform .28s var(--ease-out), border-color .2s, background .2s, box-shadow .28s var(--ease-out);
}
.mod-core-card { cursor: pointer; }
.mod-core-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, .08);
  border-color: rgba(168, 200, 224, .5);
  box-shadow: 0 20px 44px -22px rgba(0, 0, 0, .6);
}

/* Click preview — near-fullscreen screenshot over a dimmed, blurred page */
.mod-core-preview {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 5vh 5vw;
  background: rgba(8, 12, 18, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
  cursor: zoom-out;
}
.mod-core-preview.is-open { opacity: 1; visibility: visible; }
.mod-core-preview img {
  max-width: 92vw; max-height: 92vh;
  width: auto; height: auto;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .15);
  box-shadow: 0 50px 120px -20px rgba(0, 0, 0, .85);
  cursor: default;
}
.mod-core-preview__close {
  position: fixed; top: 22px; right: 26px;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff; cursor: pointer;
  transition: background .2s, transform .2s;
}
.mod-core-preview__close:hover { background: rgba(255, 255, 255, .22); transform: scale(1.08); }
.mod-core-preview__close svg { width: 24px; height: 24px; }
.mod-core-card__shot {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  margin-bottom: 14px;
  background: #0F1922;
}
.mod-core-card__shot img {
  width: 100%; height: auto;
  display: block;
}
.mod-core-card h4 { font-size: 1.1rem; font-weight: 700; color: #FFFFFF; margin: 0 0 4px; }
.mod-core-card p { font-size: .92rem; line-height: 1.45; color: rgba(255, 255, 255, .62); margin: 0; }
@media (max-width: 560px) {
  .mod-core-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
}

@media (max-width: 860px) {
  .mod-panel__cols { grid-template-columns: 1fr; gap: 28px; max-width: 640px; }
}
@media (max-width: 640px) {
  .mod-tab { padding: 8px 14px; font-size: 0.84rem; }
  .mod-panel__head { margin-bottom: 24px; }
}

/* -------- FAQ (accordion with native <details>) -------- */
.faq { background: var(--bg); }
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .2s;
}
.faq-item[open] { border-color: var(--primary); box-shadow: 0 8px 20px -8px rgba(61, 107, 133, .14); }
.faq-item__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  list-style: none;
  transition: color .2s;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q:hover { color: var(--primary); }
.faq-item__icon {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--surface-subtle);
  color: var(--text-muted);
  display: grid; place-items: center;
  transition: transform .3s var(--ease-out), background .2s, color .2s;
}
.faq-item__icon svg { width: 14px; height: 14px; }
.faq-item[open] .faq-item__icon {
  transform: rotate(180deg);
  background: rgba(61, 107, 133, .1);
  color: var(--primary);
}
.faq-item__a {
  padding: 0 22px 20px;
  font-size: 0.96rem;
  color: var(--text-secondary);
  line-height: 1.65;
  animation: faqOpen .25s var(--ease-out);
}
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.faq-item__a p { margin-bottom: 10px; }
.faq-item__a p:last-child { margin-bottom: 0; }
.faq-item__a ul {
  list-style: none;
  padding-left: 0;
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.faq-item__a ul li {
  padding-left: 18px;
  position: relative;
}
.faq-item__a ul li::before {
  content: '';
  position: absolute;
  left: 4px; top: 9px;
  width: 5px; height: 5px;
  background: var(--primary);
  border-radius: 50%;
}
.faq-item__a strong { color: var(--text); font-weight: 600; }
.faq-item__a a { color: var(--primary); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(61, 107, 133, .3); }
.faq-item__a a:hover { border-bottom-color: var(--primary); }

/* -------- Contact form (Scale / enterprise) -------- */
.contact {
  background: var(--surface);
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: start;
}

/* Left info block */
.contact-info .eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 12px;
  background: var(--brand-gradient);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: 0.7rem;
  -webkit-text-fill-color: #fff;
}
.contact-info h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
  margin-bottom: 14px;
}
.contact-info__lead {
  font-size: 1.06rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 28px;
}
.contact-info__lead strong { color: var(--text); font-weight: 700; }
.contact-info__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
}
.contact-info__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.96rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.contact-info__list strong { color: var(--text); font-weight: 600; }
.contact-info__icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(12, 123, 92, .12);
  color: var(--success);
  display: grid; place-items: center;
}

.contact-info__channels {
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.contact-info__channels-label {
  font-size: 0.84rem;
  color: var(--text-muted);
  margin-bottom: 12px;
  font-weight: 500;
}
.contact-info__channels-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.contact-channel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: border-color .2s, color .2s, transform .15s;
}
.contact-channel:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
}
.contact-channel svg { color: var(--primary); }

/* Right form */
.contact-form {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 32px 28px;
}
.contact-form__title {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 22px;
}
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.contact-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.contact-field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.contact-field .req { color: var(--error); }
.contact-field input,
.contact-field select,
.contact-field textarea {
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.94rem;
  color: var(--text);
  background: var(--surface);
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(61, 107, 133, .12);
}
.contact-field textarea { resize: vertical; min-height: 100px; }

.contact-field__label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.contact-field__radios {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.contact-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  font-size: 0.92rem;
  color: var(--text);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.contact-radio:hover { border-color: var(--primary); }
.contact-radio input[type="radio"] {
  width: 16px; height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
  margin: 0;
}
.contact-radio:has(input:checked) {
  border-color: var(--primary);
  background: rgba(61, 107, 133, .06);
  box-shadow: 0 0 0 3px rgba(61, 107, 133, .08);
}

.contact-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 6px 0 20px;
  cursor: pointer;
}
.contact-consent input {
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 1px;
  accent-color: var(--primary);
  cursor: pointer;
}
.contact-consent a {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(61, 107, 133, .3);
}
.contact-consent a:hover { border-bottom-color: var(--primary); }

.contact-form__submit {
  width: 100%;
  justify-content: center;
}

/* Lead-submitted success popup (Scale / Enterprise form) */
.lead-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.lead-modal[hidden] { display: none; }
.lead-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(4px);
  animation: lead-fade-in .18s ease-out;
}
.lead-modal__body {
  position: relative;
  background: var(--bg, #fff);
  border-radius: 16px;
  padding: 40px 32px 32px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 64px -12px rgba(15, 23, 42, .35);
  animation: lead-pop-in .22s cubic-bezier(.16,1,.3,1);
}
.lead-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.lead-modal__close:hover { background: rgba(15, 23, 42, .06); color: var(--text); }
.lead-modal__close svg { width: 18px; height: 18px; }
.lead-modal__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 123, 92, .12);
  color: var(--success, #0c7b5c);
}
.lead-modal__icon svg { width: 32px; height: 32px; }
.lead-modal__title {
  margin: 0 0 10px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
}
.lead-modal__text {
  margin: 0 0 24px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.lead-modal__text strong { color: var(--text); font-weight: 700; }
.lead-modal__ok { min-width: 160px; }

/* Footer request popups: callback + lead — share the lead-modal backdrop/anim
   but hold a full form so the body is wider and left-aligned. */
.req-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.req-modal[hidden] { display: none; }
.req-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(4px);
  animation: lead-fade-in .18s ease-out;
}
.req-modal__body {
  position: relative;
  background: var(--bg, #fff);
  border-radius: 16px;
  padding: 32px 32px 28px;
  max-width: 520px;
  width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-shadow: 0 24px 64px -12px rgba(15, 23, 42, .35);
  animation: lead-pop-in .22s cubic-bezier(.16,1,.3,1);
}
.req-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.req-modal__close:hover { background: rgba(15, 23, 42, .06); color: var(--text); }
.req-modal__close svg { width: 18px; height: 18px; }
.req-modal__title {
  margin: 0 0 6px;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.req-modal__lead {
  margin: 0 0 22px;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.55;
}
.req-form__submit {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}
.req-form__error {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(220, 38, 38, .08);
  border: 1px solid rgba(220, 38, 38, .25);
  color: #dc2626;
  font-size: 0.92rem;
}

/* Callback modal (scheduled callback) ----------------------- */
.req-modal--callback .req-modal__body {
  max-width: 640px;
  padding: 34px 36px 28px;
}
.req-modal--callback .req-modal__title {
  font-size: 1.35rem;
  line-height: 1.3;
  margin: 0 0 22px;
}

.cb-row {
  display: flex;
  gap: 0;
  margin-bottom: 6px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.cb-row:focus-within {
  border-color: var(--text);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .06);
}
.cb-phone {
  flex: 1;
  border: 0;
  padding: 14px 18px;
  font-size: 1rem;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--surface);
  min-width: 0;
}
.cb-phone:focus { outline: none; }
.cb-submit {
  border-radius: 0;
  padding: 14px 22px;
  font-size: 0.98rem;
  white-space: nowrap;
}
.cb-hint {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 0 0 16px 4px;
}

.contact-consent--compact {
  font-size: 0.78rem;
  margin: 0;
}
.contact-consent--compact input { width: 16px; height: 16px; }

@media (max-width: 560px) {
  .cb-row { flex-direction: column; }
  .cb-submit { border-radius: 0; }
}

@keyframes lead-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes lead-pop-in {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .contact-form__row { grid-template-columns: 1fr; gap: 0; }
}

/* -------- Tariff Modal (big popup with full module breakdown) -------- */
.tmodal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 24px;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease-out);
}
.tmodal.is-open { opacity: 1; pointer-events: auto; }
.tmodal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 34, 51, .6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: zoom-out;
}
.tmodal__shell {
  position: relative;
  z-index: 1;
  width: min(94vw, 1000px);
  background: var(--surface);
  border-radius: 20px;
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, .4);
  transform: translateY(24px) scale(0.98);
  transition: transform .3s var(--ease-out);
  overflow: hidden;
  margin: auto;
}
.tmodal.is-open .tmodal__shell { transform: translateY(0) scale(1); }
.tmodal__close {
  position: absolute;
  top: 20px; right: 20px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--surface-subtle);
  color: var(--text);
  display: grid; place-items: center;
  z-index: 2;
  transition: background .2s, transform .2s;
}
.tmodal__close:hover { background: var(--border); transform: rotate(90deg); }
body.tmodal-open { overflow: hidden; }

/* Modal content (populated by JS) */
.tmodal__content {
  display: flex;
  flex-direction: column;
}

/* Hero section in modal */
.tm-hero {
  padding: 48px 48px 32px;
  background: linear-gradient(135deg, rgba(61, 107, 133, .05) 0%, rgba(139, 58, 79, .03) 100%);
  border-bottom: 1px solid var(--border);
}
.tm-hero__top {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}
.tm-hero__icon {
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--brand-gradient);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 8px 20px rgba(61, 107, 133, .25);
}
.tm-hero__icon svg { width: 26px; height: 26px; }
.tm-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 6px;
}
.tm-hero__meta {
  font-size: 0.96rem;
  color: var(--text-secondary);
}
.tm-hero__desc {
  font-size: 1.04rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 22px;
  max-width: 680px;
}
.tm-hero__desc strong { color: var(--text); font-weight: 700; }
.tm-hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ICON_CHECK is reused by the module-detail modal and by bullets in
   the tariff modal. Keep this rule even after tm-mod removal. */
.tm-mod__check {
  flex-shrink: 0;
  width: 16px; height: 16px;
  color: var(--success);
  margin-top: 2px;
}

/* ============ Module detail page (/modules/{key}) ============ */
.mp-wrap { max-width: 1000px; margin: 0 auto; padding: 16px 0 8px; }
.mp-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 0.95rem; text-decoration: none;
  color: var(--text-secondary); margin-bottom: 18px;
}
.mp-back svg { width: 16px; height: 16px; }
.mp-back:hover { color: var(--primary); }
.mp-features { margin-top: 44px; }
.mp-features__title {
  font-size: clamp(1.4rem, 3vw, 1.8rem); font-weight: 800;
  letter-spacing: -0.02em; margin-bottom: 22px;
}
.tm-mods-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.tm-mod {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 18px; background: var(--surface);
  border: 1px solid var(--border-light); border-radius: 14px;
}
.tm-mod b { display: block; font-weight: 700; margin-bottom: 3px; letter-spacing: -0.01em; }
.tm-mod span { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.5; }
.mp-empty { text-align: center; padding: 60px 0; }
.mp-empty h1 { margin-bottom: 20px; }
@media (max-width: 720px) { .tm-mods-grid { grid-template-columns: 1fr; } }

/* ============ TARIFF MODAL — variant A redesign (per-user hero) ============ */

/* Hero price row — sits between title and desc, replaces the old `· $41/міс ·` meta line */
.tm-hero__price-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 11px 16px;
  background: var(--surface-subtle);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  margin: 6px 0 18px;
  font-size: 0.94rem;
  color: var(--text-secondary);
}
.tm-hero__price-row .pu {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.tm-hero__price-row .pu strong {
  color: var(--success);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.015em;
}
.tm-hero__price-row .pu-unit {
  font-size: 0.86rem;
  color: var(--text-secondary);
}
.tm-hero__price-row .sep { color: var(--border-strong); }
.tm-hero__price-row .team { color: var(--text); font-weight: 600; }
.tm-hero__price-row .total { color: var(--text-secondary); }
.tm-hero__price-row .total b { color: var(--text); font-weight: 700; }

/* Body wrapper — replaces the old .tm-modules section */
/* Tariff modal — big screenshot + clickable thumbnails (click-gallery) */
.tm-shots { padding: 24px 48px 4px; }
.tm-shots__main {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-subtle);
  box-shadow: 0 10px 28px -12px rgba(14, 30, 44, 0.18);
}
.tm-shots__main img { width: 100%; height: auto; display: block; }
.tm-shots__thumbs { display: flex; gap: 12px; margin-top: 12px; }
.tm-shots__thumb {
  flex: 1; max-width: 220px;
  border: 2px solid var(--border);
  border-radius: 10px;
  overflow: hidden; padding: 0; cursor: pointer; background: none;
  transition: border-color .2s;
}
.tm-shots__thumb:hover { border-color: var(--border-strong); }
.tm-shots__thumb.is-active { border-color: var(--primary); }
.tm-shots__thumb img { width: 100%; height: auto; display: block; }
@media (max-width: 640px) {
  .tm-shots { padding: 16px 24px 0; }
}

.tm-body { padding: 32px 48px 40px; }

/* Section heading — used for "Що ти отримаєш" and "Чого немає" */
.tm-section__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.tm-section__head h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}
.tm-section__tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: rgba(46, 93, 63, 0.08);
  color: var(--success);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
}
.tm-section__tag--neutral {
  background: rgba(92, 82, 120, 0.08);
  color: var(--primary);
}

/* Detailed module block (one per included module) */
.tm-mod-block {
  padding: 20px 0;
  border-top: 1px solid var(--border);
}
.tm-mod-block:first-of-type { border-top: none; padding-top: 4px; }
.tm-mod-block__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.tm-mod-block__icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--brand-gradient-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
}
.tm-mod-block__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--text);
}
.tm-mod-block__title .tagline {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: 2px;
  letter-spacing: 0;
}
.tm-mod-block__intro {
  margin: 0 0 12px;
  padding-left: 48px;
  color: var(--text-secondary);
  font-size: 0.93rem;
  line-height: 1.55;
}
.tm-mod-block__intro strong { color: var(--text); font-weight: 600; }
.tm-mod-block__bullets {
  list-style: none;
  margin: 0;
  padding: 0 0 0 48px;
}
.tm-mod-block__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.92rem;
  color: var(--text);
  padding: 4px 0;
  line-height: 1.45;
}

/* Core modules — compact 2-col grid, visually de-emphasized (no green/brand accent) */
.tm-core {
  margin-top: 28px;
  padding: 20px 22px;
  background: var(--surface-subtle);
  border: 1px solid var(--border-light);
  border-radius: 14px;
}
.tm-core__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.tm-core__title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.01em;
}
.tm-core__hint {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 500;
}
.tm-core__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.tm-core__item {
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 10px;
}
.tm-core__item-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.tm-core__item-icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  color: var(--text-secondary);
  display: grid;
  place-items: center;
}
.tm-core__item-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
}
.tm-core__item-tag {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 0 0 6px;
  line-height: 1.4;
}
.tm-core__item-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tm-core__item-bullets li {
  display: flex;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  padding: 2px 0;
  line-height: 1.4;
}
.tm-core__item-bullets li::before {
  content: "·";
  color: var(--text-muted);
  flex-shrink: 0;
  font-weight: 700;
}

/* Upsell — what's missing, where to get it (lateral or upgrade tier) */
.tm-upsell {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.tm-upsell__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.tm-upsell__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color .2s, background .2s;
}
.tm-upsell__row:hover {
  border-color: var(--primary);
  background: var(--surface-subtle);
}
.tm-upsell__icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--surface-subtle);
  color: var(--text-secondary);
  display: grid;
  place-items: center;
  border: 1px solid var(--border-light);
}
.tm-upsell__content {
  flex: 1;
  min-width: 0;
}
.tm-upsell__name {
  font-weight: 700;
  color: var(--text);
  font-size: 0.95rem;
  margin-bottom: 2px;
}
.tm-upsell__desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.4;
}
.tm-upsell__where {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--brand-gradient-soft);
  border: 1px solid rgba(92, 82, 120, 0.18);
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}
.tm-upsell__where svg { width: 12px; height: 12px; }

/* Screenshot gallery inside modal (for module details) */
.tm-shots {
  padding: 0 48px 24px;
}
.tm-gallery {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: 0 16px 32px -16px rgba(17, 34, 51, .14);
  transition: aspect-ratio .4s var(--ease-out);
}
.tm-gallery img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transition: opacity .4s var(--ease-out);
}
.tm-gallery img.is-active { opacity: 1; z-index: 1; }
/* Old dots — hidden in favor of side arrows */
.tm-gallery-dots { display: none; }

/* Counter under modal gallery */
.tm-gallery-counter {
  margin-top: 12px;
}

/* Bottom CTA strip */
.tm-foot {
  padding: 24px 48px;
  background: var(--surface-subtle);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.tm-foot__price {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}
.tm-foot__price-hint {
  font-size: 0.84rem;
  color: var(--text-muted);
  font-weight: 500;
}
.tm-foot__ctas { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 700px) {
  .tm-hero { padding: 32px 24px 24px; }
  .tm-body { padding: 24px; }
  .tm-foot { padding: 20px 24px; }
  .tm-core__grid { grid-template-columns: 1fr; }
  .tm-mod-block__intro,
  .tm-mod-block__bullets { padding-left: 0; }
  .tm-upsell__row { flex-wrap: wrap; }
  .tm-upsell__where { margin-left: 44px; }   /* align with text content when wrapped */
  .tmodal { padding: 16px; }
}

/* -------- Legal pages (oferta, privacy) -------- */
.legal-wrap {
  padding: calc(var(--nav-h) + 48px) 0 80px;
  background: var(--bg);
  min-height: 100vh;
}
.legal-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
}
.legal-header .eyebrow {
  display: inline-block;
  padding: 5px 12px;
  background: rgba(61, 107, 133, .08);
  border-radius: var(--r-pill);
  margin-bottom: 14px;
  font-size: 0.72rem;
}
.legal-title {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin-bottom: 12px;
  color: var(--text);
}
.legal-updated {
  font-size: 0.9rem;
  color: var(--text-muted);
}
.legal-updated strong { color: var(--text-secondary); font-weight: 600; }

.legal-sub {
  font-size: 1.08rem;
  color: var(--text-secondary);
  margin-bottom: 16px;
  line-height: 1.5;
}
.legal-meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.legal-meta span { display: inline-flex; align-items: center; gap: 6px; }
.legal-meta svg { color: var(--primary); opacity: .7; }

/* Contractor card (top of oferta) */
.contractor-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 24px;
  margin: 0 auto 32px;
  max-width: 720px;
  box-shadow: 0 4px 12px -6px rgba(17, 34, 51, .08);
}
.contractor-card__icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 11px;
  background: var(--brand-gradient);
  color: #fff;
  display: grid; place-items: center;
}
.contractor-card__body { flex: 1; min-width: 0; }
.contractor-card__tag {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.contractor-card__name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 4px;
}
.contractor-card__desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 10px;
}
.contractor-card__desc strong { color: var(--text); font-weight: 700; }
.contractor-card__phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary) !important;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  border: 0 !important;
}

/* Table of contents */
.toc {
  max-width: 720px;
  margin: 0 auto 40px;
  padding: 22px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.toc__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.toc__list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 20px;
  counter-reset: toc-counter;
}
.toc__list li {
  counter-increment: toc-counter;
  padding-left: 0;
}
.toc__list li::before {
  content: none;
}
.toc__list a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  font-size: 0.92rem;
  color: var(--text-secondary);
  text-decoration: none;
  border: 0 !important;
  transition: color .15s;
}
.toc__list a:hover { color: var(--primary); }
.toc__list a::before {
  content: counter(toc-counter);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--primary);
  min-width: 20px;
}

/* Doc section with numbered heading */
.doc-section { margin-bottom: 36px; padding-bottom: 28px; border-bottom: 1px solid var(--border); }
.doc-section:last-child { border-bottom: 0; }
.doc-section h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 8px 0 16px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.doc-num {
  flex-shrink: 0;
  display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  background: var(--brand-gradient);
  color: #fff;
  border-radius: 9px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0;
}

.legal-warn {
  padding: 14px 18px;
  background: rgba(181, 68, 56, .06);
  border-left: 3px solid var(--error);
  border-radius: 6px;
  margin: 16px 0;
  font-size: 0.94rem;
}
.legal-warn strong { color: var(--error); }

/* Реквізити grid */
.rekvizity {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 14px 0 20px;
}
.rekvizity--three { grid-template-columns: repeat(3, 1fr); }
.rekv {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.rekv--wide { grid-column: 1 / -1; }
.rekv__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.rekv__value {
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  border: 0 !important;
}
.rekv__value--link {
  color: var(--primary) !important;
  text-decoration: none;
  display: block;
}
.rekv__sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.legal-cta {
  text-align: center;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

@media (max-width: 640px) {
  .contractor-card { flex-direction: column; padding: 20px; }
  .toc__list { grid-template-columns: 1fr; }
  .rekvizity, .rekvizity--three { grid-template-columns: 1fr; }
}

.legal-body {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 720px;
  margin: 0 auto;
}
.legal-body p { margin-bottom: 14px; }
.legal-body strong { color: var(--text); font-weight: 600; }
.legal-body a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(61, 107, 133, .3);
  transition: border-color .2s;
}
.legal-body a:hover { border-bottom-color: var(--primary); }

.legal-body h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 36px 0 14px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.legal-body h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 32px; }

.legal-body ul {
  list-style: none;
  padding-left: 0;
  margin: 8px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.legal-body ul li {
  position: relative;
  padding-left: 22px;
}
.legal-body ul li::before {
  content: '';
  position: absolute;
  left: 6px; top: 10px;
  width: 5px; height: 5px;
  background: var(--primary);
  border-radius: 50%;
}

.legal-highlight {
  padding: 14px 18px;
  background: rgba(61, 107, 133, .05);
  border-left: 3px solid var(--primary);
  border-radius: 6px;
  margin: 16px 0 !important;
}

.legal-rekv {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 14px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.94rem;
}
.legal-rekv em { color: var(--text-muted); font-style: normal; font-size: 0.84rem; }

.legal-note {
  margin-top: 32px !important;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--text-muted);
  font-style: italic;
}

/* -------- Footer (full: brand + 3 column links + bottom legal) -------- */
.footer {
  position: relative;
  padding: 64px 0 24px;
  background: linear-gradient(180deg, #1A2E42 0%, #233B54 100%);
  color: #FFFFFF;
  border-top: 1px solid rgba(255, 255, 255, .08);
  isolation: isolate;
  overflow: hidden;
}
.footer::before {
  content: '';
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 70% at 15% 0%, rgba(61, 107, 133, .28), transparent 65%),
    radial-gradient(45% 60% at 90% 100%, rgba(139, 58, 79, .18), transparent 70%);
}
/* Tексты в тёмном футере */
.footer__logo { color: #FFFFFF !important; }
.footer__logo span { color: #A8C8E0 !important; }
.footer__about { color: rgba(255, 255, 255, .80) !important; }
.footer__col-title { color: rgba(255, 255, 255, .58) !important; }
.footer__links a { color: rgba(255, 255, 255, .82) !important; }
.footer__links a:hover { color: #FFFFFF !important; }
.footer__contacts { color: rgba(255, 255, 255, .82); }
.footer__contacts a { color: #FFFFFF !important; }
.footer__contacts a:hover { color: #A8C8E0 !important; }
.footer__c-hours { color: rgba(255, 255, 255, .68) !important; }
.footer__c-icon {
  background: rgba(255, 255, 255, .08) !important;
  color: #A8C8E0 !important;
  border: 1px solid rgba(255, 255, 255, .10);
}
.footer__social {
  background: rgba(255, 255, 255, .06) !important;
  color: rgba(255, 255, 255, .82) !important;
  border: 1px solid rgba(255, 255, 255, .10);
}
.footer__bottom {
  border-top-color: rgba(255, 255, 255, .10) !important;
  color: rgba(255, 255, 255, .55) !important;
}
.footer__legal a { color: rgba(255, 255, 255, .55) !important; }
.footer__legal a:hover { color: #FFFFFF !important; }
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: 48px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
}

/* Brand column */
.footer__brand { max-width: 320px; }
.footer__logo {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 14px;
}
.footer__logo span { color: var(--primary); }
.footer__about {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 20px;
}
.footer__socials {
  display: flex;
  gap: 8px;
}
.footer__social {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--bg);
  color: var(--text-secondary);
  text-decoration: none;
  transition: background .2s, color .2s, transform .15s;
}
.footer__social:hover {
  background: var(--brand-gradient);
  color: #fff;
  transform: translateY(-2px);
}

/* Link columns */
.footer__col-title {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer__links a {
  font-size: 0.92rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color .15s;
  display: inline-block;
}
.footer__links a:hover { color: var(--primary); }

/* Contacts column */
.footer__contacts {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer__contacts li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
}
.footer__c-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--primary-light);
  color: var(--primary);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.footer__contacts a {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  transition: color .15s;
}
.footer__contacts a:hover { color: var(--primary); }
.footer__c-hours { color: var(--text-secondary); }
.footer__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 18px;
  background: var(--brand-gradient);
  color: #fff !important;
  border-radius: var(--r-btn);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  transition: transform .15s, box-shadow .2s;
}
.footer__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(61, 107, 133, .25);
}

/* Bottom bar */
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.footer__legal {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.footer__legal a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color .15s;
}
.footer__legal a:hover { color: var(--primary); }

@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; }
}

/* -------- Utilities -------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.mt-sm { margin-top: var(--sp-sm); }
.mt-md { margin-top: var(--sp-md); }
.mt-lg { margin-top: var(--sp-lg); }
.mt-xl { margin-top: var(--sp-xl); }

/* -------- Animations -------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* -------- Hero (centered text top, huge screenshot below — Stripe-style) -------- */
.hero--mosaic { padding: calc(var(--nav-h) + 80px) 0 120px; text-align: center; }
.hero--mosaic .container { max-width: 1440px; }
.mosaic-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 72px;
}
.mosaic-left {
  max-width: 920px;
  text-align: center;
  width: 100%;
}
.mosaic-left .hero__eyebrow { margin-bottom: var(--sp-lg); }
.mosaic-left h1 {
  font-size: clamp(3rem, 6.4vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  margin-bottom: 28px;
  font-weight: 800;
  text-wrap: balance;
}
.mosaic-left h1 .grad {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.mosaic-left .hero__lead {
  font-size: 1.32rem;
  color: var(--text-secondary);
  max-width: 720px;
  margin: 0 auto 40px;
  line-height: 1.5;
}
.mosaic-left .hero__lead strong { color: var(--text); font-weight: 600; }
.mosaic-left .hero__ctas {
  display: flex;
  gap: var(--sp-md);
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: var(--sp-lg);
}
.mosaic-left .hero__trust {
  display: flex;
  gap: var(--sp-lg);
  flex-wrap: wrap;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.mosaic-left .hero__trust span { display: inline-flex; align-items: center; gap: 6px; }
.mosaic-left .hero__trust svg { width: 14px; height: 14px; color: var(--success); }

/* Screenshot goes below text at full container width */
.hero-shot {
  width: 100%;
  max-width: 1400px;
}

/* -------- Hero preview: clean browser-window product shot (crisp.chat-style) -------- */
.hero-preview {
  position: relative;
  width: 100%;
  max-width: 1320px;
  margin: 56px auto 0;
  isolation: isolate;
}
.hero-preview__glow {
  position: absolute;
  inset: -14% -10% -18% -10%;
  background:
    radial-gradient(42% 50% at 22% 28%, rgba(61, 107, 133, 0.42), transparent 70%),
    radial-gradient(46% 52% at 82% 72%, rgba(139, 58, 79, 0.38), transparent 70%),
    radial-gradient(60% 60% at 50% 50%, rgba(92, 82, 120, 0.18), transparent 75%);
  z-index: -1;
  pointer-events: none;
  filter: blur(18px);
  animation: hp-glow 16s ease-in-out infinite alternate;
}
@keyframes hp-glow {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
  to   { transform: translate3d(0, -6px, 0) scale(1.03); opacity: 1; }
}
.hero-preview__window {
  position: relative;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 30px 60px -20px rgba(14, 30, 44, 0.22),
    0 12px 30px -10px rgba(92, 82, 120, 0.14),
    0 4px 10px rgba(14, 30, 44, 0.05);
  animation: hp-rise .8s var(--ease-out) both;
}
@keyframes hp-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-preview__chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #FAFAFA;
  border-bottom: 1px solid var(--border-light);
}
.hero-preview__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #E1E1E1;
}
.hero-preview__dot:nth-child(1) { background: #FF5F57; }
.hero-preview__dot:nth-child(2) { background: #FEBC2E; }
.hero-preview__dot:nth-child(3) { background: #28C840; }
.hero-preview__url {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 360px;
  margin: 0 auto;
  padding: 5px 14px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}
.hero-preview__url svg {
  width: 11px;
  height: 11px;
  color: var(--success);
  flex-shrink: 0;
}
.hero-preview__url-path { color: var(--text-muted); }
.hero-preview__screen {
  display: block;
  background: var(--surface);
  overflow: hidden;
}
.hero-preview__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Hero variant of demo-frame — fills the browser window, no own chrome */
.demo-frame--hero {
  width: 100% !important;
  max-width: none !important;
  height: 640px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
@media (max-width: 1100px) {
  .demo-frame--hero { height: 560px !important; }
}
@media (max-width: 900px) {
  .demo-frame--hero {
    height: auto !important;
    grid-template-columns: 1fr !important;
  }
  .demo-frame--hero .demo-list { display: none; }
  .demo-frame--hero .demo-client { display: none; }
  .demo-frame--hero .demo-conv { min-height: 480px; }
}

/* Floating notification + stat cards — crisp.chat-style accents */
.hero-preview__card {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow:
    0 20px 40px -10px rgba(14, 30, 44, 0.18),
    0 6px 14px -4px rgba(92, 82, 120, 0.12);
  padding: 12px 14px;
  z-index: 2;
  animation: hp-card-in .9s var(--ease-out) both;
}
.hero-preview__card--alert {
  left: -72px;
  top: -28px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 244px;
  animation-delay: .35s;
}
.hero-preview__card--stat {
  right: -72px;
  bottom: -28px;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 220px;
  animation-delay: .55s;
}
@keyframes hp-card-in {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.hero-preview__card-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hero-preview__card-icon svg { width: 34px; height: 34px; display: block; }
.hero-preview__card-body { min-width: 0; }
.hero-preview__card-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.hero-preview__card-text {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.hero-preview__card-stat-val {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.hero-preview__card-stat-lbl {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.3;
}
.hero-preview__card-spark {
  width: 70px;
  flex-shrink: 0;
}
.hero-preview__card-spark svg {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 1100px) {
  .hero-preview__card--alert { left: -16px; top: -32px; }
  .hero-preview__card--stat  { right: -16px; bottom: -32px; }
}
@media (max-width: 768px) {
  .hero-preview { margin-top: 36px; }
  .hero-preview__url { font-size: 10.5px; max-width: 200px; }
  .hero-preview__url-path { display: none; }
  .hero-preview__screen { aspect-ratio: 4 / 3; }
  /* The animated chat demo is ~640px tall; a 4/3 crop hid everything below the
     first message so the animation looked dead on mobile. Let the screen grow
     to the demo's height (image-screenshot variant keeps the 4/3 crop). */
  .hero-preview__screen:has(.demo-frame--hero) { aspect-ratio: auto; }
  /* Demo chat header: on narrow screens the long client name overlapped the
     action buttons. Let the title keep its own row and drop the buttons below. */
  .demo-frame--hero .demo-conv__head { flex-wrap: wrap; row-gap: 10px; }
  .demo-frame--hero .demo-conv__title { flex: 1 1 calc(100% - 18px); }
  .demo-frame--hero .demo-btn { flex: 1 1 auto; text-align: center; }
  .hero-preview__card { display: none; }
}
@media (max-width: 480px) {
  .hero-preview__chrome { padding: 9px 12px; }
  .hero-preview__dot { width: 9px; height: 9px; }
}

/* Legacy aliases — keep old selectors as no-ops so any leftover refs don't break */
.hero-shots { display: contents; }
.hero-shots__glow,
.hero-shots__main,
.hero-shots__float { display: none; }

/* Stub — kept so any external reference doesn't 404 */
.hero-anim { display: none; }

/* Sidebar */
.ha-side {
  background: var(--surface-subtle);
  border-right: 1px solid var(--border);
  padding: 16px 12px;
  overflow: hidden;
}
.ha-search {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin-bottom: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text-muted); font-size: 12px;
}
.ha-side__items { display: flex; flex-direction: column; gap: 2px; }
.ha-cli {
  display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center;
  padding: 10px 8px; border-radius: 8px; cursor: default;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.ha-cli--target { animation: haTargetHighlight 20s infinite; }
.ha-cli__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: #fff;
  background: var(--accent);
}
.ha-cli__avatar--blue  { background: var(--info); }
.ha-cli__avatar--gray  { background: var(--text-muted); }
.ha-cli__avatar--green { background: var(--success); }
.ha-cli__name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ha-cli__last { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Main pane */
.ha-main { position: relative; background: var(--surface); overflow: hidden; }
.ha-main__empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; color: var(--text-muted);
  animation: haEmptyFade 20s infinite;
}
.ha-main__empty-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--surface-subtle);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}
.ha-main__active {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  opacity: 0;
  animation: haActiveFade 20s infinite;
}

.ha-card__head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
  background: linear-gradient(180deg, rgba(61, 107, 133, 0.05) 0%, rgba(139, 58, 79, 0.05) 100%), var(--surface);
}
.ha-avatar-lg {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--brand-gradient);
  color: #fff;
  font-size: 14px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ha-card__id { flex: 1; min-width: 0; }
.ha-card__name { font-size: 15px; font-weight: 600; color: var(--text); }
.ha-card__meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.ha-stamp {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--success);
  padding: 3px 10px; border-radius: 999px;
  background: rgba(46, 93, 63, 0.1);
  flex-shrink: 0;
}

.ha-card__actions {
  display: flex; gap: 8px; padding: 12px 20px;
  border-bottom: 1px solid var(--border-light);
}
.ha-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; font-size: 12px; font-weight: 500;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text);
  cursor: default;
}
.ha-btn--solid {
  background: var(--brand-gradient);
  border-color: transparent; color: #fff;
}

.ha-timeline {
  list-style: none; margin: 0; padding: 8px 0;
  flex: 1; overflow: hidden;
}
.ha-tl {
  display: flex; gap: 12px;
  padding: 10px 20px;
  opacity: 0;
}
.ha-tl--1 { animation: haTl1 20s infinite; }
.ha-tl--2 { animation: haTl2 20s infinite; }
.ha-tl--3 { animation: haTl3 20s infinite; }
.ha-tl--4 { animation: haTl4 20s infinite; }
.ha-tl__icon {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: #fff;
}
.ha-tl__icon svg { width: 14px; height: 14px; }
.ha-tl__icon--ig   { background: #E1306C; }
.ha-tl__icon--call { background: var(--accent); }
.ha-tl__icon--mail { background: #6B7280; }
.ha-tl__icon--tg   { background: #229ED9; }
.ha-tl__row { flex: 1; min-width: 0; }
.ha-tl__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ha-tl__head b { font-size: 12px; font-weight: 600; color: var(--text); }
.ha-tl__head span { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.ha-tl__msg {
  font-size: 13px; color: var(--text-secondary); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Cursor + click ripple — reuses .product-demo pattern */
.ha-cursor {
  position: absolute; width: 22px; height: 22px;
  z-index: 10; pointer-events: none;
  left: -5px; top: -3px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 3 L5 19 L9 15 L11 21 L14 20 L12 14 L18 14 Z' fill='%23ffffff' stroke='%23000000' stroke-width='1.4' stroke-linejoin='round'/></svg>");
  background-size: contain; background-repeat: no-repeat;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
  animation: haCursorPath 20s infinite;
}
.ha-click {
  position: absolute; width: 24px; height: 24px;
  border-radius: 50%; border: 2px solid var(--accent);
  z-index: 9; pointer-events: none;
  left: -12px; top: -12px;
  opacity: 0; transform: scale(0.4);
  animation: haClickRipple 20s infinite;
}

/* Keyframes — same timing pattern as product-demo */
@keyframes haCursorPath {
  0%   { left: 60%; top: 70%; }
  10%  { left: 12%; top: 26%; }   /* hover target client */
  14%  { left: 12%; top: 26%; }
  16%  { left: 12%; top: 26%; }   /* click */
  60%  { left: 50%; top: 50%; }   /* wander on timeline */
  90%  { left: 80%; top: 90%; }
  100% { left: 60%; top: 70%; }
}
@keyframes haClickRipple {
  0%, 13%   { opacity: 0; transform: scale(0.4); left: 12%; top: 26%; }
  15%       { opacity: 1; transform: scale(1); left: 12%; top: 26%; }
  18%, 100% { opacity: 0; transform: scale(1.6); left: 12%; top: 26%; }
}
@keyframes haTargetHighlight {
  0%, 13%   { background: transparent; box-shadow: none; }
  16%, 92%  { background: var(--brand-gradient-soft); box-shadow: inset 3px 0 0 var(--accent); }
  95%, 100% { background: transparent; box-shadow: none; }
}
@keyframes haEmptyFade {
  0%, 14%   { opacity: 1; }
  18%, 92%  { opacity: 0; }
  96%, 100% { opacity: 1; }
}
@keyframes haActiveFade {
  0%, 16%   { opacity: 0; }
  20%, 92%  { opacity: 1; }
  95%, 100% { opacity: 0; }
}
@keyframes haTl1 {
  0%, 22%   { opacity: 0; transform: translateY(8px); }
  25%, 92%  { opacity: 1; transform: translateY(0); }
  95%, 100% { opacity: 0; }
}
@keyframes haTl2 {
  0%, 28%   { opacity: 0; transform: translateY(8px); }
  31%, 92%  { opacity: 1; transform: translateY(0); }
  95%, 100% { opacity: 0; }
}
@keyframes haTl3 {
  0%, 34%   { opacity: 0; transform: translateY(8px); }
  37%, 92%  { opacity: 1; transform: translateY(0); }
  95%, 100% { opacity: 0; }
}
@keyframes haTl4 {
  0%, 40%   { opacity: 0; transform: translateY(8px); }
  43%, 92%  { opacity: 1; transform: translateY(0); }
  95%, 100% { opacity: 0; }
}

/* Hero container — let mockup go wide on desktop */
.hero--mosaic .container { max-width: 1280px; }

@media (max-width: 900px) {
  .hero-anim__frame { height: 480px; grid-template-columns: 220px 1fr; }
  .ha-card__meta { display: none; }
  .ha-card__actions .ha-btn:nth-child(3) { display: none; }
}
@media (max-width: 640px) {
  .hero-anim { display: none; }  /* heavy animation off on small screens */
}

@media (prefers-reduced-motion: reduce) {
  .hero-anim *, .hero-anim *::before, .hero-anim *::after { animation: none !important; }
  .ha-main__empty { opacity: 0; }
  .ha-main__active { opacity: 1; }
  .ha-tl { opacity: 1; }
}

/* -------- Hero screenshot (single big dashboard) -------- */
.hero-shot {
  position: relative;
  isolation: isolate;
}
.hero-shot__glow {
  position: absolute;
  inset: -10% -8% -10% -8%;
  background:
    radial-gradient(45% 50% at 25% 20%, rgba(61, 107, 133, .22), transparent 72%),
    radial-gradient(50% 55% at 80% 80%, rgba(139, 58, 79, .18), transparent 72%);
  z-index: -1;
  pointer-events: none;
}
.hero-shot__frame {
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .7) inset,
    0 40px 80px -20px rgba(17, 34, 51, .32),
    0 14px 28px -14px rgba(17, 34, 51, .18);
}
.hero-shot__frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 13px;
}

/* -------- Responsive -------- */
@media (max-width: 1024px) {
  .values__grid { grid-template-columns: 1fr; gap: var(--sp-lg); }
  .nav__group { display: none; }
  .nav__mobile-toggle { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; }
  .nav__mobile-toggle:hover { background: var(--surface-subtle); }

  /* Mobile nav drawer — the hamburger reveals the menu as a full-width vertical
     panel. The mega-menus collapse into inline accordions, reusing the existing
     desktop `.nav__item.is-open` toggle (no extra JS for the accordion). */
  .nav__group.is-mobile-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 16px 32px rgba(17, 34, 51, .12);
    padding: 8px 0 12px;
    z-index: 999;
  }
  .nav__group.is-mobile-open .nav__item { position: static; width: 100%; }
  .nav__group.is-mobile-open .nav__trigger,
  .nav__group.is-mobile-open .nav__link {
    width: 100%;
    justify-content: space-between;
    padding: 14px var(--sp-lg);
    border-radius: 0;
    font-size: 1.02rem;
  }
  .nav__group.is-mobile-open .nav__trigger::after,
  .nav__group.is-mobile-open .nav__link::after { display: none; }
  /* Mega: hidden until its item is opened, then expands inline as a sub-list */
  .nav__group.is-mobile-open .nav__item .mega { display: none; }
  .nav__group.is-mobile-open .nav__item.is-open .mega {
    display: block;
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    min-width: 0;
    width: auto;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: var(--surface-subtle);
    padding: 4px var(--sp-md) 10px;
  }
  .nav__group.is-mobile-open .mega::before,
  .nav__group.is-mobile-open .mega::after { display: none; }
  .nav__group.is-mobile-open .mega__grid,
  .nav__group.is-mobile-open .mega__grid--three { grid-template-columns: 1fr; min-width: 0; }
  .nav__group.is-mobile-open .mega__footer { justify-content: flex-start; }

  .mosaic-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .mosaic-left .hero__lead { margin-left: auto; margin-right: auto; }
  .mosaic-left .hero__ctas, .mosaic-left .hero__trust { justify-content: center; }
}
@media (max-width: 640px) {
  .mosaic-right { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  :root { --nav-h: 60px; }
  .container, .container-narrow { padding: 0 var(--sp-lg); }
  .section { padding: var(--sp-3xl) 0; }
  /* Mobile nav: fit logo + lang + login + menu toggle inside the viewport
     without horizontal scroll. The desktop 32px inner padding/gap pushed the
     "Увійти" button (and the hamburger) off-screen. Register CTA stays hidden
     here (reachable via the hero CTA, the login popup's "Зареєструватись"
     link, and the footer). */
  .nav__inner { padding: 0 12px; gap: 8px; }
  .nav__logo { font-size: 1.1rem; }
  .nav__right { gap: 6px; }
  .nav__right .nav__register { display: none; }
  .nav__lang { margin-right: 0; padding: 1px; }
  .nav__lang-opt { padding: 4px 7px; }
  .nav__login.btn--sm { padding: 8px 11px; }
  .nav__mobile-toggle { width: 38px; height: 38px; }
  .hero__ctas .btn { width: 100%; }
  .hero__trust { flex-direction: column; gap: var(--sp-sm); }
  .hero--mosaic { padding: calc(var(--nav-h) + 40px) 0 64px; }
  .mosaic-grid { gap: 44px; }
  .mosaic-left h1 { font-size: clamp(1.9rem, 7.4vw, 2.5rem); line-height: 1.1; margin-bottom: 18px; }
  .mosaic-left h1 br { display: none; }
  .mosaic-left .hero__lead { font-size: 1.06rem; margin-bottom: 28px; }
  .mosaic-left .hero__trust { gap: var(--sp-sm); }
}
@media (max-width: 380px) {
  .mosaic-left h1 { font-size: 1.72rem; }
  /* Keep logo + lang + login + hamburger on one row on the narrowest phones */
  .nav__inner { padding: 0 10px; gap: 6px; }
  .nav__logo { font-size: 1.02rem; }
  .nav__right { gap: 5px; }
  .nav__lang-opt { padding: 4px 6px; font-size: 11px; }
  .nav__login.btn--sm { padding: 7px 9px; font-size: 13px; }
  .nav__mobile-toggle { width: 36px; height: 36px; }
}



/* === COMM SHOWCASE === */
.comm-showcase { padding: var(--sp-4xl) 0 calc(var(--sp-4xl) + 32px); }
.comm-showcase .container { max-width: 1320px; }
.comm-grid {
  display: flex;
  flex-direction: column;
  gap: 140px;
  margin-top: 80px;
}
.comm-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: transparent;
  border: 0;
  padding: 0;
  gap: 0;
}
.comm-card:hover {
  transform: none;
  box-shadow: none;
}
.comm-card__num {
  width: auto; height: auto;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: 72px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 18px;
  display: block;
}
.comm-card h3 {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--text);
  margin: 0 0 18px;
  max-width: 720px;
  text-wrap: balance;
}
.comm-card p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 56px;
  max-width: 640px;
}
.comm-card__shot {
  position: relative;
  width: 100%;
  margin-top: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow:
    0 32px 70px -20px rgba(14, 30, 44, 0.22),
    0 12px 28px -8px rgba(92, 82, 120, 0.14);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.comm-card__shot::before {
  content: "";
  position: absolute;
  inset: -8% -6%;
  z-index: -1;
  background:
    radial-gradient(45% 55% at 25% 30%, rgba(61, 107, 133, 0.20), transparent 70%),
    radial-gradient(50% 55% at 78% 75%, rgba(139, 58, 79, 0.18), transparent 70%);
  filter: blur(24px);
  pointer-events: none;
}
.comm-card:hover .comm-card__shot {
  transform: translateY(-6px);
  box-shadow:
    0 40px 80px -20px rgba(14, 30, 44, 0.26),
    0 16px 32px -8px rgba(92, 82, 120, 0.18);
}
.comm-card__shot img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: top;
}
/* Modal-style shot for popup screenshots (call popup, etc.) — narrow image
   shown framed on a soft background instead of stretched edge-to-edge */
.comm-card__shot--modal {
  background: linear-gradient(180deg, var(--surface-subtle) 0%, var(--surface) 100%);
  padding: 48px 32px;
}
.comm-card__shot--modal img {
  max-width: 700px;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow:
    0 24px 50px -12px rgba(14, 30, 44, 0.22),
    0 8px 18px -6px rgba(92, 82, 120, 0.12);
}
@media (max-width: 920px) {
  .comm-grid { gap: 88px; margin-top: 56px; }
  .comm-card__num { font-size: 54px; margin-bottom: 14px; }
  .comm-card p { margin-bottom: 36px; }
  .comm-card__shot--modal { padding: 24px 12px; }
}


/* === Tier card: whole card clickable (stretched link) === */
.pkg-card { position: relative; }
/* .pkg-card__more::after removed — JS handler does the job now */
.pkg-card__cta {
  position: relative;
  z-index: 2;
}
/* pkg-card__more stays static — its ::after needs to fill .pkg-card,
   not itself. position:relative on the link breaks stretched-link. */
.pkg-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: var(--sh-md);
}


/* === Talk value highlight (per-user math + competitor comparison) === */
.pkg-card__highlight {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 12px 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.12), rgba(141, 196, 232, 0.08));
  border: 1px solid rgba(52, 211, 153, 0.25);
}
.pkg-card__highlight-math {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--success);
  letter-spacing: -0.01em;
}
.pkg-card__highlight-math strong {
  font-weight: 800;
  font-size: 1.15rem;
}
.pkg-card__highlight-vs {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}
.pkg-card__highlight-vs strong {
  color: var(--text-secondary);
  font-weight: 700;
}
.pkg-card__feature--bonus {
  color: var(--text);
}
.pkg-card__feature--bonus svg {
  color: var(--success);
}


/* === Universal benefits strip (below all tiers) === */
.pkg-universal {
  max-width: 1520px;
  margin: 32px auto 0;
  padding: 20px 24px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.pkg-universal__title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
  text-align: center;
}
.pkg-universal__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
}
.pkg-universal__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  color: var(--text-secondary);
}
.pkg-universal__item svg {
  width: 18px; height: 18px;
  color: var(--success);
  flex-shrink: 0;
}
.pkg-universal__item strong {
  color: var(--text);
  font-weight: 700;
}
@media (max-width: 720px) {
  .pkg-universal__items { flex-direction: column; gap: 14px; align-items: flex-start; }
  .pkg-universal { padding: 18px 20px; }
}


/* Universal strip: 4 items now — keep horizontal but allow wrap */
.pkg-universal__items {
  gap: 20px 28px;
}


/* === Tier detail modal === */
.tier-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: tierModalFade .18s ease-out;
}
.tier-modal[hidden] { display: none; }
@keyframes tierModalFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.tier-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 16, 28, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.tier-modal__body {
  position: relative;
  background: #FFFFFF;
  color: var(--text);
  border: 1px solid #E5EAF1;
  border-radius: 18px;
  padding: 36px 40px 32px;
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  animation: tierModalSlide .22s cubic-bezier(.2, .8, .3, 1);
}
@keyframes tierModalSlide {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.tier-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #F4F6FA;
  border: 1px solid #E5EAF1;
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s, transform .15s;
}
.tier-modal__close:hover { background: #E8EDF2; }
.tier-modal__close svg { width: 18px; height: 18px; }
.tier-modal__close:hover { background: var(--surface); transform: scale(1.06); }

/* Style cloned detail content inside modal */
.tier-modal__content .pkg-detail {
  display: block !important;  /* override is-active visibility */
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}
.tier-modal__content .pkg-detail__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.tier-modal__content .pkg-detail__icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--brand-gradient);
  color: #fff;
  display: grid; place-items: center;
}
.tier-modal__content .pkg-detail__icon svg { width: 24px; height: 24px; }
.tier-modal__content .pkg-detail__name {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
.tier-modal__content .pkg-detail__price {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.tier-modal__content .pkg-detail__lead {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 14px;
}
.tier-modal__content .pkg-detail__lead strong { color: var(--text); }
.tier-modal__content p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.tier-modal__content .pkg-detail__who {
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #F4F6FA;
  font-size: 0.86rem;
  color: var(--text-secondary);
  border: 1px solid #E5EAF1;
}
.tier-modal__content .pkg-detail__cta {
  display: none;  /* hide the redundant "more" button inside modal */
}

body.tier-modal-open { overflow: hidden; }

@media (max-width: 640px) {
  .tier-modal { padding: 12px; }
  .tier-modal__body { padding: 28px 20px 22px; max-height: 92vh; }
}

/* ============================================================
   PRODUCT DEMO — animated CRM chats (Variant Б, full scenario)
   ============================================================ */
.product-demo { padding: 80px 0 100px; background: var(--bg); }
.product-demo .section-head { margin-bottom: 40px; text-align: center; }

.demo-frame {
  position: relative;
  margin: 0 auto;
  width: 1136px; max-width: 100%;
  height: 620px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(14, 30, 44, 0.14), 0 4px 14px rgba(14, 30, 44, 0.06);
  overflow: hidden;
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  color: var(--text);
}

/* ---------- LEFT: chat list ---------- */
.demo-list {
  background: var(--surface-subtle);
  border-right: 1px solid var(--border);
  padding: 16px 12px;
  overflow: hidden;
}
.demo-filters {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;
}
.demo-filter {
  font-size: 11px; padding: 5px 10px; border-radius: 999px;
  background: var(--surface); color: var(--text-secondary); cursor: default;
  border: 1px solid var(--border-light);
}
.demo-filter b { font-weight: 600; margin-left: 4px; }
.demo-filter.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }
.demo-search {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin-bottom: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text-muted); font-size: 12px;
}
.demo-items { display: flex; flex-direction: column; gap: 2px; }
.demo-item {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center;
  padding: 10px 8px; border-radius: 8px; cursor: default;
  transition: background 0.25s ease;
}
.demo-item--target { animation: demoChatHighlight 20s infinite; }
.demo-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: #fff;
}
.demo-avatar--orange { background: var(--accent); }
.demo-avatar--gray   { background: var(--text-muted); }
.demo-avatar--blue   { background: var(--info); }
.demo-avatar--purple { background: #6e5b9b; }
.demo-item__body { min-width: 0; }
.demo-item__name {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.demo-item__text {
  font-size: 12px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.demo-item__time { font-size: 11px; color: var(--text-muted); }
.demo-ch { width: 14px; height: 14px; flex-shrink: 0; vertical-align: middle; }

/* ---------- MIDDLE: conversation ---------- */
.demo-conv {
  position: relative; background: var(--surface); overflow: hidden;
  display: flex; flex-direction: column;
}
.demo-conv__empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; color: var(--text-muted);
  animation: demoEmptyFade 20s infinite;
}
.demo-conv__empty-icon { font-size: 38px; opacity: 0.4; }
.demo-conv__empty h3 { font-size: 16px; font-weight: 600; color: var(--text-secondary); margin: 0; }
.demo-conv__empty p { font-size: 13px; margin: 0; }

.demo-conv__active {
  display: flex; flex-direction: column; height: 100%;
  opacity: 0;
  animation: demoActiveFade 20s infinite;
}
.demo-conv__head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-light);
  background: var(--surface);
}
.demo-presence {
  width: 8px; height: 8px; border-radius: 50%; background: var(--success);
  box-shadow: 0 0 0 3px rgba(12, 123, 92, 0.18);
}
.demo-conv__title { flex: 1; min-width: 0; }
.demo-conv__name {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--text);
}
.demo-conv__meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.demo-btn {
  font-size: 12px; padding: 7px 14px; border-radius: 8px;
  border: none; cursor: default; font-weight: 500;
}
.demo-btn--ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); }
.demo-btn--solid { background: var(--primary); color: #fff; }

.demo-conv__body {
  flex: 1; padding: 18px 24px; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface-subtle);
}
.demo-date {
  align-self: center; font-size: 11px; color: var(--text-muted);
  background: var(--surface); padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--border-light); margin-bottom: 4px;
}
.demo-msg {
  display: flex; flex-direction: column; gap: 3px; max-width: 70%;
  opacity: 0; transform: translateY(8px);
}
.demo-msg--in { align-self: flex-start; align-items: flex-start; }
.demo-msg--out { align-self: flex-end; align-items: flex-end; }
.demo-bubble {
  padding: 9px 14px; border-radius: 14px; font-size: 13px; line-height: 1.4;
  box-shadow: 0 1px 2px rgba(14, 30, 44, 0.05);
}
.demo-msg--in .demo-bubble { background: var(--surface); color: var(--text); border: 1px solid var(--border-light); }
.demo-msg--out .demo-bubble { background: var(--primary); color: #fff; }
.demo-time { font-size: 10px; color: var(--text-muted); padding: 0 4px; }

.demo-msg--1 { animation: demoMsgIn 20s infinite; animation-delay: 0s; }
.demo-msg--2 { animation: demoMsgIn 20s infinite; animation-delay: 0s; }
.demo-msg--3 { animation: demoMsgIn 20s infinite; animation-delay: 0s; }
.demo-msg--4 { animation: demoMsgIn 20s infinite; animation-delay: 0s; }
.demo-msg--5 { animation: demoMsgIn 20s infinite; animation-delay: 0s; }
.demo-msg--1 { animation-name: demoMsg1; }
.demo-msg--2 { animation-name: demoMsg2; }
.demo-msg--3 { animation-name: demoMsg3; }
.demo-msg--4 { animation-name: demoMsg4; }
.demo-msg--5 { animation-name: demoMsg5; }

.demo-conv__input {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin: 0 16px 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  color: var(--text-muted); font-size: 13px;
}
.demo-conv__input span { flex: 1; }
.demo-send {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
}
.demo-toolbar {
  display: grid; grid-template-columns: repeat(8, 1fr);
  padding: 6px 16px 12px;
  border-top: 1px solid var(--border-light);
  background: var(--surface);
}
.demo-tool {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 9.5px; color: var(--text-muted); letter-spacing: 0.02em;
}
.demo-tool svg {
  width: 18px; height: 18px;
  color: var(--text-secondary);
}

/* ---------- RIGHT: client panel ---------- */
.demo-client {
  background: var(--surface-subtle); border-left: 1px solid var(--border);
  padding: 18px 16px; overflow: hidden;
  opacity: 0; transform: translateX(12px);
  animation: demoClientFade 20s infinite;
}
.demo-client__head { text-align: center; margin-bottom: 14px; }
.demo-client__avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 600;
  margin: 0 auto 8px;
}
.demo-client__name { font-size: 14px; font-weight: 600; color: var(--text); }
.demo-client__status {
  display: inline-block; margin-top: 4px;
  font-size: 11px; color: var(--success);
  background: rgba(12, 123, 92, 0.12); padding: 2px 8px; border-radius: 999px;
}
.demo-client__profile {
  width: 100%; padding: 9px; margin-bottom: 12px;
  background: var(--brand-gradient); color: #fff; border: none; border-radius: 8px;
  font-size: 12px; font-weight: 500; cursor: default;
}
.demo-client__row {
  font-size: 11px; color: var(--text-secondary); padding: 6px 0;
  border-bottom: 1px solid var(--border-light);
}
.demo-client__section {
  font-size: 10px; font-weight: 600; color: var(--text-muted);
  letter-spacing: 0.5px; margin: 14px 0 8px;
}
.demo-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.demo-tag {
  font-size: 10px; padding: 3px 8px; border-radius: 999px;
  font-weight: 500;
}
.demo-tag--blue  { background: rgba(42, 163, 232, 0.15); color: #2aa3e8; }
.demo-tag--cyan  { background: rgba(61, 107, 133, 0.12); color: var(--primary); }
.demo-tag--green { background: rgba(12, 123, 92, 0.12); color: var(--success); }
.demo-tag--new {
  background: rgba(139, 58, 79, 0.14); color: var(--accent);
  opacity: 0; transform: scale(0.7);
  animation: demoTagPop 20s infinite;
}

.demo-select {
  position: relative; padding: 9px 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 12px; color: var(--text-secondary);
  display: flex; align-items: center; justify-content: space-between;
}
.demo-select__chev { font-size: 10px; color: var(--text-muted); transition: transform 0.2s; }
.demo-select__menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 22px rgba(14, 30, 44, 0.14);
  overflow: hidden; z-index: 4;
  opacity: 0; transform: translateY(-6px) scaleY(0.85); transform-origin: top;
  pointer-events: none;
  animation: demoMenuOpen 20s infinite;
}
.demo-select__opt {
  padding: 9px 12px; font-size: 12px; color: var(--text);
  cursor: default; transition: background 0.2s;
}
.demo-select__opt[data-target="option"] { animation: demoOptHighlight 20s infinite; }

/* ---------- CURSOR ---------- */
.demo-cursor {
  position: absolute; width: 24px; height: 24px;
  z-index: 10; pointer-events: none;
  left: -5px; top: -3px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 3 L5 19 L9 15 L11 21 L14 20 L12 14 L18 14 Z' fill='%23ffffff' stroke='%230E1E2C' stroke-width='1.4' stroke-linejoin='round'/></svg>");
  background-size: contain; background-repeat: no-repeat;
  filter: drop-shadow(0 2px 4px rgba(14, 30, 44, 0.35));
  animation: demoCursorPath 20s infinite;
}
.demo-click {
  position: absolute; width: 26px; height: 26px;
  border-radius: 50%; border: 2px solid var(--primary);
  z-index: 9; pointer-events: none;
  left: -13px; top: -13px;
  opacity: 0; transform: scale(0.4);
  animation: demoClickRipple 20s infinite;
}

/* ---------- KEYFRAMES ---------- */
@keyframes demoChatHighlight {
  0%, 16%   { background: transparent; box-shadow: none; }
  18%, 92%  { background: var(--primary-light); box-shadow: inset 3px 0 0 var(--primary); }
  95%, 100% { background: transparent; box-shadow: none; }
}
@keyframes demoEmptyFade {
  0%, 14%   { opacity: 1; }
  17%, 92%  { opacity: 0; }
  96%, 100% { opacity: 1; }
}
@keyframes demoActiveFade {
  0%, 16%   { opacity: 0; }
  19%, 92%  { opacity: 1; }
  95%, 100% { opacity: 0; }
}
@keyframes demoClientFade {
  0%, 17%   { opacity: 0; transform: translateX(12px); }
  21%, 92%  { opacity: 1; transform: translateX(0); }
  95%, 100% { opacity: 0; transform: translateX(12px); }
}
@keyframes demoMsg1 {
  0%, 21%   { opacity: 0; transform: translateY(8px); }
  24%, 92%  { opacity: 1; transform: translateY(0); }
  95%, 100% { opacity: 0; }
}
@keyframes demoMsg2 {
  0%, 24%   { opacity: 0; transform: translateY(8px); }
  27%, 92%  { opacity: 1; transform: translateY(0); }
  95%, 100% { opacity: 0; }
}
@keyframes demoMsg3 {
  0%, 27%   { opacity: 0; transform: translateY(8px); }
  30%, 92%  { opacity: 1; transform: translateY(0); }
  95%, 100% { opacity: 0; }
}
@keyframes demoMsg4 {
  0%, 30%   { opacity: 0; transform: translateY(8px); }
  33%, 92%  { opacity: 1; transform: translateY(0); }
  95%, 100% { opacity: 0; }
}
@keyframes demoMsg5 {
  0%, 33%   { opacity: 0; transform: translateY(8px); }
  36%, 92%  { opacity: 1; transform: translateY(0); }
  95%, 100% { opacity: 0; }
}
@keyframes demoMenuOpen {
  0%, 49%   { opacity: 0; transform: translateY(-6px) scaleY(0.85); }
  52%, 70%  { opacity: 1; transform: translateY(0) scaleY(1); }
  73%, 100% { opacity: 0; transform: translateY(-6px) scaleY(0.85); }
}
@keyframes demoOptHighlight {
  0%, 60%   { background: transparent; }
  63%, 70%  { background: #f0ece1; }
  73%, 100% { background: transparent; }
}
@keyframes demoSelectValue {
  0%, 73%   { color: #b3b1bb; }
  76%, 100% { color: #2a2a32; }
}
@keyframes demoTagPop {
  0%, 75%   { opacity: 0; transform: scale(0.7); }
  78%, 92%  { opacity: 1; transform: scale(1); }
  95%, 100% { opacity: 0; transform: scale(0.7); }
}
.demo-select__value { animation: demoSelectText 20s infinite; }
@keyframes demoSelectText {
  0%, 75%   { content: ""; }
  76%, 100% { content: ""; }
}
/* swap value text via ::before/::after instead — simpler: keep base text and overlay */

@keyframes demoCursorPath {
  0%   { transform: translate(880px, 560px); opacity: 0; }
  3%   { opacity: 1; }
  14%  { transform: translate(140px, 170px); opacity: 1; }
  16%  { transform: translate(140px, 174px); }
  17%  { transform: translate(140px, 170px); }
  40%  { transform: translate(140px, 170px); opacity: 1; }
  48%  { transform: translate(976px, 400px); }
  50%  { transform: translate(976px, 404px); }
  51%  { transform: translate(976px, 400px); }
  62%  { transform: translate(976px, 440px); }
  64%  { transform: translate(976px, 444px); }
  65%  { transform: translate(976px, 440px); }
  90%  { transform: translate(976px, 440px); opacity: 1; }
  95%  { transform: translate(976px, 440px); opacity: 0; }
  100% { transform: translate(880px, 560px); opacity: 0; }
}
@keyframes demoClickRipple {
  0%, 14%   { opacity: 0; transform: translate(140px, 170px) scale(0.4); }
  15%, 16%  { opacity: 0.7; transform: translate(140px, 170px) scale(1); }
  18%       { opacity: 0; transform: translate(140px, 170px) scale(1.6); }
  48%       { opacity: 0; transform: translate(976px, 400px) scale(0.4); }
  50%       { opacity: 0.7; transform: translate(976px, 400px) scale(1); }
  52%       { opacity: 0; transform: translate(976px, 400px) scale(1.6); }
  62%       { opacity: 0; transform: translate(976px, 440px) scale(0.4); }
  64%       { opacity: 0.7; transform: translate(976px, 440px) scale(1); }
  66%, 100% { opacity: 0; transform: translate(976px, 440px) scale(1.6); }
}

/* swap select value to "Запис на прийом" after option click */
.demo-select__value { position: relative; min-height: 14px; min-width: 120px; display: inline-block; }
.demo-select__placeholder {
  position: absolute; left: 0; top: 0;
  color: var(--text-muted);
  animation: demoSelectPlaceholder 20s infinite;
}
.demo-select__chosen {
  position: absolute; left: 0; top: 0;
  color: var(--text); font-weight: 500;
  opacity: 0;
  animation: demoSelectChosen 20s infinite;
}
@keyframes demoSelectPlaceholder {
  0%, 65%   { opacity: 1; }
  68%, 92%  { opacity: 0; }
  95%, 100% { opacity: 1; }
}
@keyframes demoSelectChosen {
  0%, 65%   { opacity: 0; }
  68%, 92%  { opacity: 1; }
  95%, 100% { opacity: 0; }
}

/* below 1220px the cursor coords don't line up — switch to static final state */
@media (max-width: 1219px) {
  .demo-frame { width: 100%; }
  .demo-cursor, .demo-click { display: none; }
  .demo-item--target { animation: none; background: var(--primary-light); box-shadow: inset 3px 0 0 var(--primary); }
  .demo-conv__empty { animation: none; opacity: 0; }
  .demo-conv__active { animation: none; opacity: 1; }
  .demo-client { animation: none; opacity: 1; transform: none; }
  .demo-msg { animation: none; opacity: 1; transform: none; }
  .demo-tag--new { animation: none; opacity: 1; transform: scale(1); }
  .demo-select__menu { animation: none; }
  .demo-select__opt[data-target="option"] { animation: none; }
  .demo-select__value { animation: none; color: var(--text); }
  .demo-select__value::after { animation: none; opacity: 1; }
}
@media (max-width: 900px) {
  .demo-frame { height: auto; grid-template-columns: 1fr; max-width: 480px; }
  .demo-list, .demo-client { display: none; }
  .demo-conv { min-height: 460px; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-cursor, .demo-click,
  .demo-item--target, .demo-conv__empty, .demo-conv__active, .demo-client,
  .demo-msg, .demo-tag--new, .demo-select__menu, .demo-select__opt[data-target="option"],
  .demo-select__value, .demo-select__value::after {
    animation: none !important;
  }
  .demo-conv__empty { opacity: 0 !important; }
  .demo-conv__active, .demo-client { opacity: 1 !important; transform: none !important; }
  .demo-msg { opacity: 1 !important; transform: none !important; }
  .demo-tag--new { opacity: 1 !important; transform: scale(1) !important; }
  .demo-item--target { background: linear-gradient(90deg, rgba(232, 133, 92, 0.18), rgba(232, 133, 92, 0.06)) !important; box-shadow: inset 3px 0 0 #e8855c !important; }
}

/* ============================================================
   MODULE DEMO MODAL — animated mini-CRM per module
   ============================================================ */
.md-modal {
  position: fixed; inset: 0; z-index: 2000;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
}
.md-modal.is-open { display: flex; }
.md-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 15, 20, 0.55);
  cursor: pointer;
}
.md-modal__shell {
  position: relative;
  width: 100%; max-width: 1180px; height: min(720px, 92vh);
  background: var(--surface);
  border-radius: var(--r-hero);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.20), 0 12px 24px rgba(92, 82, 120, 0.10);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: md-modal-rise .3s var(--ease-out);
}
@keyframes md-modal-rise {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.md-modal__head {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(61, 107, 133, 0.06) 0%, rgba(139, 58, 79, 0.06) 100%), var(--surface);
  flex-shrink: 0;
}
.md-modal__icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--brand-gradient);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.md-modal__titles { flex: 1; min-width: 0; }
.md-modal__title { display: block; font-size: 16px; font-weight: 700; color: var(--text); }
.md-modal__sub { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.md-modal__close {
  width: 36px; height: 36px;
  border: 1px solid var(--border); background: var(--surface);
  border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  transition: all .15s;
}
.md-modal__close:hover { color: var(--accent); border-color: var(--accent); }
.md-modal__body {
  flex: 1; overflow: hidden;
  background: var(--surface-subtle);
  position: relative;
}
.md-modal__empty {
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: var(--text-muted); font-size: 14px;
}

/* ----- Common demo chassis (each demo's root) ----- */
.md-frame {
  position: relative; width: 100%; height: 100%;
  background: var(--surface);
  display: grid;
  font-size: 13px; color: var(--text);
  text-align: left;
  overflow: hidden;
}
.md-frame--split { grid-template-columns: 280px 1fr; }
.md-frame--single { grid-template-columns: 1fr; }
.md-side {
  background: var(--surface-subtle);
  border-right: 1px solid var(--border);
  padding: 14px 12px;
  overflow: hidden;
}
.md-side__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 6px 12px; font-size: 12px; font-weight: 600;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em;
}
.md-search {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin-bottom: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text-muted); font-size: 12px;
}
.md-search svg { flex-shrink: 0; }

.md-main {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  overflow: hidden;
}
.md-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-light);
  background: var(--surface);
}
.md-toolbar h3 { font-size: 15px; font-weight: 700; margin: 0; flex: 1; }
.md-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border); background: var(--surface);
  border-radius: 8px; color: var(--text); cursor: default;
}
.md-btn--solid {
  background: var(--brand-gradient);
  border-color: transparent;
  color: #fff;
}
.md-btn--ghost { background: transparent; border-color: var(--border); }

.md-content { flex: 1; overflow: hidden; padding: 16px 20px; position: relative; }

/* List items */
.md-row {
  display: grid; grid-template-columns: 32px 1fr auto;
  gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: 8px;
  margin-bottom: 4px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  transition: background .25s, box-shadow .25s;
}
.md-row__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent);
  color: #fff; font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.md-row__avatar--blue  { background: var(--info); }
.md-row__avatar--green { background: var(--success); }
.md-row__avatar--gray  { background: var(--text-muted); }
.md-row__avatar--gradient { background: var(--brand-gradient); }
.md-row__name { font-weight: 600; font-size: 13px; }
.md-row__meta { font-size: 11px; color: var(--text-muted); }
.md-row__right { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

/* Stamp pills (matched to CRM) */
.md-stamp {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: var(--surface-subtle); color: var(--text);
  border: 1px solid var(--border);
}
.md-stamp--ok      { background: rgba(46, 93, 63, 0.12); color: var(--success); border-color: transparent; }
.md-stamp--warn    { background: rgba(184, 134, 42, 0.12); color: var(--warning); border-color: transparent; }
.md-stamp--danger  { background: rgba(139, 58, 79, 0.12); color: var(--danger); border-color: transparent; }
.md-stamp--info    { background: rgba(61, 107, 133, 0.12); color: var(--info); border-color: transparent; }
.md-stamp--solid   { background: var(--brand-gradient); color: #fff; border-color: transparent; }
.md-stamp--ink     { background: #1A1A1A; color: #fff; border-color: transparent; }

/* Cursor + click ripple — shared across all demos */
.md-cursor {
  position: absolute; width: 22px; height: 22px;
  z-index: 20; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 3 L5 19 L9 15 L11 21 L14 20 L12 14 L18 14 Z' fill='%23ffffff' stroke='%23000000' stroke-width='1.4' stroke-linejoin='round'/></svg>");
  background-size: contain; background-repeat: no-repeat;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}
.md-click {
  position: absolute; width: 28px; height: 28px;
  border-radius: 50%; border: 2px solid var(--accent);
  z-index: 19; pointer-events: none;
  opacity: 0; transform: scale(0.4);
}

/* Reveal helpers — shared keyframes used by per-demo selectors */
@keyframes md-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes md-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes md-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes md-click-ripple {
  0%   { opacity: 0; transform: scale(0.4); }
  20%  { opacity: 1; transform: scale(1); }
  60%  { opacity: 0; transform: scale(1.6); }
  100% { opacity: 0; }
}
@keyframes md-target-highlight {
  0%, 100% { background: var(--surface); box-shadow: none; }
  20%, 80% { background: var(--brand-gradient-soft); box-shadow: inset 3px 0 0 var(--accent); }
}
@keyframes md-counter-tick {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes md-bar-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes md-drop-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Form panel that fades in */
.md-form {
  position: absolute; inset: 0;
  background: var(--surface);
  padding: 18px 22px;
  display: flex; flex-direction: column;
  gap: 12px;
  opacity: 0;
}
.md-form__title { font-size: 14px; font-weight: 700; }
.md-form__row { display: flex; gap: 10px; }
.md-form__field { flex: 1; }
.md-form__label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; display: block; }
.md-form__input {
  width: 100%; padding: 8px 12px;
  background: var(--surface-subtle); border: 1px solid var(--border);
  border-radius: 6px; font-size: 13px; color: var(--text);
}
.md-form__input--filled { border-color: var(--accent); background: var(--surface); }
.md-form__actions { margin-top: auto; display: flex; gap: 10px; justify-content: flex-end; }

/* Mobile fallback */
@media (max-width: 720px) {
  .md-modal { padding: 8px; }
  .md-modal__shell { height: 90vh; }
  .md-frame--split { grid-template-columns: 1fr; }
  .md-side { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .md-modal *, .md-modal *::before, .md-modal *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; }
}

/* ============================================================
   Service demo — tickets table → preview modal → close-with-reason
   modal → reason picked → "Закрити без повідомлення" → both close +
   row status flips to "Закрито". 22s loop.
   ============================================================ */
.md-d-svc {
  display: flex; flex-direction: column;
  background: var(--surface);
  position: relative;
  height: 100%;
  overflow: hidden;
}
.md-d-svc__bar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.md-d-svc__search {
  flex: 1; max-width: 480px;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted); font-size: 12px;
}
.md-d-svc__count { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.md-d-svc__tabs {
  display: flex; gap: 0;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.md-d-svc__tab {
  padding: 9px 14px;
  background: transparent; border: none;
  font-size: 12px; font-weight: 500;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  cursor: default;
  display: inline-flex; align-items: center; gap: 6px;
}
.md-d-svc__tab--active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.md-d-svc__count-pill {
  font-size: 10px;
  padding: 1px 6px;
  background: var(--surface-subtle);
  border-radius: 999px;
}

.md-d-svc__scroll { flex: 1; overflow: auto; }
.md-d-svc__table {
  width: 100%;
  min-width: 1200px;
  border-collapse: collapse;
  font-size: 12px;
}
.md-d-svc__table thead { background: linear-gradient(180deg, rgba(61, 107, 133, 0.06) 0%, rgba(139, 58, 79, 0.06) 100%); }
.md-d-svc__table th {
  padding: 10px 12px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text);
  text-align: left;
  border-bottom: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
  white-space: nowrap;
}
.md-d-svc__table th:last-child { border-right: none; }
.md-d-svc__table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.md-d-svc__table td:last-child { border-right: none; }
.md-d-svc__num { font-family: var(--font-mono, monospace); font-size: 10px; color: var(--text-muted); }
.md-d-svc__desc { color: var(--text-muted); font-size: 12px; }
.md-d-svc__phone { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-muted); }
.md-d-svc__person { display: inline-flex; align-items: center; gap: 6px; }
.md-d-svc__person--muted { color: var(--text-muted); }
.md-d-svc__avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 10px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.md-d-svc__avatar--blue { background: var(--info); }
.md-d-svc__avatar--green { background: var(--success); }
.md-d-svc__avatar--gray { background: var(--text-muted); }
.md-d-svc__date { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-muted); }
.md-d-svc__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.md-d-svc__dot--warn { background: var(--warning); }
.md-d-svc__dot--info { background: var(--info); }
.md-d-svc__dot--ok { background: var(--success); }

/* Row 1 status swap: open/closed */
.md-d-svc__status-open  { animation: md-d-svc-open 22s infinite; }
.md-d-svc__status-closed { display: inline-block; animation: md-d-svc-closed 22s infinite; opacity: 0; position: absolute; }
@keyframes md-d-svc-open {
  0%, 70%   { opacity: 1; }
  74%, 100% { opacity: 0; }
}
@keyframes md-d-svc-closed {
  0%, 72%   { opacity: 0; }
  76%, 100% { opacity: 1; position: static; }
}
.md-d-svc__row--target td:last-child { position: relative; }
.md-d-svc__row--target { animation: md-d-svc-rowhi 22s infinite; }
@keyframes md-d-svc-rowhi {
  0%, 8%   { background: var(--surface); }
  10%, 14% { background: var(--surface-subtle); }
  16%, 100%{ background: var(--surface); }
}

/* === LAYER 1: Preview modal (centered 780px) === */
.md-d-svc__overlay--preview {
  position: absolute; inset: 0;
  background: rgba(15, 15, 20, 0.42);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  animation: md-d-svc-prev-overlay 22s infinite;
}
@keyframes md-d-svc-prev-overlay {
  0%, 14%  { opacity: 0; }
  18%, 70% { opacity: 1; }
  74%, 100%{ opacity: 0; }
}
.md-d-svc__preview {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: 780px; max-width: calc(100% - 40px);
  max-height: calc(100% - 40px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
  display: flex; flex-direction: column;
  overflow: hidden;
  opacity: 0;
  z-index: 10;
  animation: md-d-svc-prev 22s infinite;
}
@keyframes md-d-svc-prev {
  0%, 12%  { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
  16%, 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  74%, 100%{ opacity: 0; transform: translate(-50%, -52%) scale(0.96); }
}
.md-d-svc__preview-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.md-d-svc__preview-head h3 { margin: 0; font-size: 15px; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-d-svc__preview-close {
  width: 32px; height: 32px; border: none; background: transparent;
  font-size: 22px; line-height: 1; color: var(--text-muted);
  cursor: default; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.md-d-svc__preview-body {
  flex: 1; overflow: auto;
  padding: 16px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.md-d-svc__controls {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.md-d-svc__field { display: flex; flex-direction: column; gap: 4px; }
.md-d-svc__field label { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.md-d-svc__select-static {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
}
.md-d-svc__select-static svg { color: var(--text-muted); }
.md-d-svc__info {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-size: 12px;
  color: var(--text-secondary);
}
.md-d-svc__info-link { color: var(--accent); }
.md-d-svc__info-phone { color: var(--success); }
.md-d-svc__desc-box {
  padding: 10px 14px;
  background: var(--surface-subtle);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
}
.md-d-svc__feed-tabs {
  display: flex; gap: 0;
  border-bottom: 2px solid var(--border-light);
}
.md-d-svc__feed-tab {
  padding: 6px 14px; background: none; border: none;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: default;
}
.md-d-svc__feed-tab--active { color: var(--accent); border-bottom-color: var(--accent); }
.md-d-svc__feed { display: flex; flex-direction: column; gap: 10px; }
.md-d-svc__comment {
  display: flex; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
}
.md-d-svc__comment-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.md-d-svc__comment-body { flex: 1; min-width: 0; }
.md-d-svc__comment-meta { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
.md-d-svc__comment-meta strong { color: var(--text); }
.md-d-svc__comment-text { font-size: 12px; color: var(--text); line-height: 1.4; }
.md-d-svc__preview-foot {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.md-d-svc__close-btn { animation: md-d-svc-close-btn 22s infinite; }
@keyframes md-d-svc-close-btn {
  0%, 22%   { box-shadow: 0 0 0 0 rgba(92, 82, 120, 0); }
  25%, 30%  { box-shadow: 0 0 0 6px rgba(92, 82, 120, 0.20); }
  33%, 100% { box-shadow: 0 0 0 0 rgba(92, 82, 120, 0); }
}

/* === LAYER 2: Close-with-reason modal (over preview) === */
.md-d-svc__overlay--close {
  position: absolute; inset: 0;
  background: rgba(15, 15, 20, 0.45);
  opacity: 0;
  pointer-events: none;
  z-index: 15;
  animation: md-d-svc-close-overlay 22s infinite;
}
@keyframes md-d-svc-close-overlay {
  0%, 32%  { opacity: 0; }
  36%, 66% { opacity: 1; }
  70%, 100%{ opacity: 0; }
}
.md-d-svc__close-modal {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.94);
  width: 420px; max-width: calc(100% - 40px);
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
  z-index: 20;
  opacity: 0;
  overflow: hidden;
  animation: md-d-svc-close-card 22s infinite;
}
@keyframes md-d-svc-close-card {
  0%, 30%  { opacity: 0; transform: translate(-50%, -48%) scale(0.94); }
  34%, 66% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  70%, 100%{ opacity: 0; transform: translate(-50%, -52%) scale(0.94); }
}
.md-d-svc__close-modal-x {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none;
  font-size: 22px; line-height: 1;
  color: var(--text-muted);
  cursor: default; padding: 4px;
  z-index: 1;
}
.md-d-svc__close-top {
  text-align: center;
  padding: 24px 24px 14px;
  background: linear-gradient(180deg, rgba(61, 107, 133, 0.06) 0%, rgba(139, 58, 79, 0.06) 100%);
  border-bottom: 1px solid var(--border);
}
.md-d-svc__check-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(92, 82, 120, 0.12);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
}
.md-d-svc__close-top h3 { margin: 0 0 4px; font-size: 18px; font-weight: 700; color: var(--text); }
.md-d-svc__close-top p { margin: 0; font-size: 12px; color: var(--text-muted); font-family: var(--font-mono, monospace); }
.md-d-svc__close-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.md-d-svc__close-field { display: flex; flex-direction: column; gap: 4px; }
.md-d-svc__close-field label { font-size: 13px; font-weight: 600; color: var(--text); }

/* Reason select */
.md-d-svc__reason-select { position: relative; }
.md-d-svc__reason-value {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  cursor: default;
  animation: md-d-svc-reason-border 22s infinite;
}
@keyframes md-d-svc-reason-border {
  0%, 38%  { border-color: var(--border); }
  42%, 56% { border-color: var(--accent); }
  60%, 66% { border-color: var(--success); }
  70%, 100%{ border-color: var(--border); }
}
.md-d-svc__reason-empty,
.md-d-svc__reason-picked {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.md-d-svc__reason-empty {
  color: var(--text-muted);
  animation: md-d-svc-reason-empty 22s infinite;
}
.md-d-svc__reason-picked {
  font-weight: 600;
  color: var(--text);
  position: absolute;
  left: 12px;
  right: 30px;
  opacity: 0;
  animation: md-d-svc-reason-picked 22s infinite;
}
@keyframes md-d-svc-reason-empty {
  0%, 56%  { opacity: 1; }
  60%, 100%{ opacity: 0; }
}
@keyframes md-d-svc-reason-picked {
  0%, 56%  { opacity: 0; }
  60%, 100%{ opacity: 1; }
}
.md-d-svc__reason-caret { color: var(--text-muted); animation: md-d-svc-reason-caret 22s infinite; }
@keyframes md-d-svc-reason-caret {
  0%, 40%  { transform: rotate(0); }
  44%, 58% { transform: rotate(180deg); }
  62%, 100%{ transform: rotate(0); }
}

.md-d-svc__reason-options {
  list-style: none;
  margin: 4px 0 0;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.10);
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: 5;
  max-height: 200px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  animation: md-d-svc-reason-options 22s infinite;
}
@keyframes md-d-svc-reason-options {
  0%, 40%  { opacity: 0; transform: translateY(-6px); }
  44%, 58% { opacity: 1; transform: translateY(0); }
  62%, 100%{ opacity: 0; transform: translateY(-6px); }
}
.md-d-svc__reason-options li {
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 6px;
}
.md-d-svc__reason-target { animation: md-d-svc-reason-target 22s infinite; }
@keyframes md-d-svc-reason-target {
  0%, 52%  { background: transparent; color: var(--text); }
  55%, 58% { background: var(--brand-gradient-soft); color: var(--accent); font-weight: 600; }
  62%, 100%{ background: transparent; color: var(--text); }
}

.md-d-svc__client-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px;
  background: var(--surface-subtle);
  border-radius: 8px;
}
.md-d-svc__client-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: #fff;
  font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.md-d-svc__client-name { font-size: 13px; font-weight: 600; color: var(--text); }
.md-d-svc__client-phone { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono, monospace); }

.md-d-svc__close-foot {
  display: flex; gap: 8px;
  padding: 12px 16px 18px;
}
.md-d-svc__close-foot .md-btn { flex: 1; justify-content: center; }
.md-d-svc__close-without { animation: md-d-svc-without-btn 22s infinite; }
@keyframes md-d-svc-without-btn {
  0%, 60%  { box-shadow: 0 0 0 0 rgba(92, 82, 120, 0); border-color: var(--border); }
  64%, 68% { box-shadow: 0 0 0 4px rgba(92, 82, 120, 0.20); border-color: var(--accent); }
  72%, 100%{ box-shadow: 0 0 0 0 rgba(92, 82, 120, 0); border-color: var(--border); }
}

/* Toast */
.md-d-svc__toast {
  position: absolute;
  top: 14px; left: 50%; transform: translate(-50%, -16px);
  display: flex; align-items: center; gap: 6px;
  padding: 10px 16px;
  background: var(--brand-gradient);
  color: #fff;
  border-radius: 8px;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(124, 92, 255, 0.30);
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  animation: md-d-svc-toast 22s infinite;
}
@keyframes md-d-svc-toast {
  0%, 70%  { opacity: 0; transform: translate(-50%, -16px); }
  72%, 84% { opacity: 1; transform: translate(-50%, 0); }
  88%, 100%{ opacity: 0; transform: translate(-50%, -16px); }
}

/* Cursor + click choreography (22s):
     0–14%   wander to first row → click row
     14%     click → preview opens
     22–25%  cursor drifts to "Закрити тікет" button
     30%     click → close-modal opens
     38%     cursor moves to reason select
     44%     click → dropdown opens
     54%     cursor on "Несправність материнської плати"
     58%     click → reason picked
     64%     cursor on "Закрити без повідомлення"
     70%     click → both modals close, toast shows, row status updates
*/
.md-d-svc__cursor {
  animation: md-d-svc-cursor 22s infinite;
  animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
@keyframes md-d-svc-cursor {
  0%   { left: 50%; top: 92%; }
  10%  { left: 18%; top: 26%; }
  14%  { left: 18%; top: 26%; }    /* click row */
  24%  { left: 60%; top: 74%; }    /* moving */
  28%  { left: 76%; top: 82%; }    /* on "Закрити тікет" button */
  30%  { left: 76%; top: 82%; }    /* click */
  38%  { left: 50%; top: 48%; }    /* on reason select */
  42%  { left: 50%; top: 48%; }    /* click select */
  56%  { left: 50%; top: 56%; }    /* on target reason */
  58%  { left: 50%; top: 56%; }    /* click reason */
  64%  { left: 38%; top: 74%; }    /* on "Закрити без повідомлення" */
  68%  { left: 38%; top: 74%; }    /* click */
  100% { left: 38%; top: 74%; }
}
.md-d-svc__click { animation: md-d-svc-click 22s infinite; }
@keyframes md-d-svc-click {
  0%, 12%   { opacity: 0; transform: scale(0.4); left: calc(18% - 14px); top: calc(26% - 14px); }
  14%       { opacity: 1; transform: scale(1); }
  17%, 28%  { opacity: 0; transform: scale(1.6); }
  29%       { opacity: 0; transform: scale(0.4); left: calc(76% - 14px); top: calc(82% - 14px); }
  31%       { opacity: 1; transform: scale(1); }
  34%, 42%  { opacity: 0; transform: scale(1.6); }
  43%       { opacity: 0; transform: scale(0.4); left: calc(50% - 14px); top: calc(48% - 14px); }
  44%       { opacity: 1; transform: scale(1); }
  47%, 57%  { opacity: 0; transform: scale(1.6); }
  58%       { opacity: 0; transform: scale(0.4); left: calc(50% - 14px); top: calc(56% - 14px); }
  59%       { opacity: 1; transform: scale(1); }
  62%, 67%  { opacity: 0; transform: scale(1.6); }
  68%       { opacity: 0; transform: scale(0.4); left: calc(38% - 14px); top: calc(74% - 14px); }
  69%       { opacity: 1; transform: scale(1); }
  72%, 100% { opacity: 0; transform: scale(1.6); }
}

/* ============================================================
   Orders demo — real CRM table 1:1 + click first row → side panel
   slides in → assign manager via select → close. 16s loop.
   ============================================================ */
.md-d-orders {
  display: flex; flex-direction: column;
  background: var(--surface);
  position: relative;
  height: 100%;
  overflow: hidden;
}

/* Sub-toolbar (Створити + search + count) */
.md-d-orders__bar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.md-d-orders__search {
  flex: 1; max-width: 480px;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted); font-size: 12px;
}
.md-d-orders__count {
  font-size: 12px; color: var(--text-muted); font-weight: 600;
  margin-left: auto;
}

/* Table — matches CRM (gradient header, vertical dividers in body) */
.md-d-orders__scroll {
  flex: 1; overflow: auto;
  position: relative;
}
.md-d-orders__table {
  width: 100%;
  min-width: 1400px;
  border-collapse: collapse;
  font-size: 12px;
}
.md-d-orders__table thead { background: linear-gradient(180deg, rgba(61, 107, 133, 0.06) 0%, rgba(139, 58, 79, 0.06) 100%); }
.md-d-orders__table th {
  padding: 10px 12px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text);
  text-align: left;
  border-bottom: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
  white-space: nowrap;
}
.md-d-orders__table th:last-child { border-right: none; }
.md-d-orders__table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px;
}
.md-d-orders__table td:last-child { border-right: none; }
.md-d-orders__table tbody tr:last-child td { border-bottom: none; }
.md-d-orders__date {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 11px;
}
.md-d-orders__phone {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 12px;
}
.md-d-orders__callbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: #fff;
  margin-left: 6px;
  vertical-align: middle;
}
.md-d-orders__ttn {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  text-decoration: underline;
  text-decoration-style: dotted;
  color: var(--text);
}
.md-d-orders__ttnbtn {
  background: none; border: none; cursor: default;
  color: var(--accent); font-size: 11px; font-weight: 600;
  padding: 0;
}
.md-d-orders__mgr { color: var(--text-muted); }

/* Row manager swap: "—" hidden after manager is picked in modal,
   "Олена Романюк" appears with brand-soft tint flash */
.md-d-orders__mgr-empty {
  color: var(--text-muted);
  animation: md-d-orders-mgrEmpty 16s infinite;
}
.md-d-orders__mgr-set {
  display: none;
  font-weight: 600;
  color: var(--accent);
  animation: md-d-orders-mgrSet 16s infinite;
}
@keyframes md-d-orders-mgrEmpty {
  0%, 80%   { display: inline; opacity: 1; }
  82%, 100% { display: none; opacity: 0; }
}
@keyframes md-d-orders-mgrSet {
  0%, 80%   { display: none; opacity: 0; }
  82%       { display: inline; opacity: 0; }
  84%, 100% { display: inline; opacity: 1; }
}
/* Briefly highlight the manager cell when value lands */
.md-d-orders__row--target td:last-child {
  animation: md-d-orders-mgrCellFlash 16s infinite;
}
@keyframes md-d-orders-mgrCellFlash {
  0%, 80%   { background: var(--surface); }
  84%, 90%  { background: rgba(46, 93, 63, 0.10); }
  94%, 100% { background: var(--surface); }
}

/* Highlight first row when cursor approaches it */
.md-d-orders__row--target {
  cursor: default;
  animation: md-d-orders-rowhi 16s infinite;
}
@keyframes md-d-orders-rowhi {
  0%, 11%  { background: var(--surface); }
  13%, 18% { background: var(--surface-subtle); }
  20%, 100%{ background: var(--surface); }
}

/* Centered modal (matches real CRM order-modal: 700px wide, header/body/footer) */
.md-d-orders__overlay {
  position: absolute; inset: 0;
  background: rgba(15, 15, 20, 0.42);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  animation: md-d-orders-overlay 16s infinite;
}
@keyframes md-d-orders-overlay {
  0%, 18%  { opacity: 0; }
  22%, 78% { opacity: 1; }
  82%, 100%{ opacity: 0; }
}
.md-d-orders__detail {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: 700px; max-width: calc(100% - 40px);
  max-height: calc(100% - 40px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.08);
  display: flex; flex-direction: column;
  overflow: hidden;
  opacity: 0;
  z-index: 10;
  animation: md-d-orders-detail 16s infinite;
}
@keyframes md-d-orders-detail {
  0%, 16%  { opacity: 0; transform: translate(-50%, -48%) scale(0.96); pointer-events: none; }
  22%, 78% { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
  82%, 100%{ opacity: 0; transform: translate(-50%, -52%) scale(0.96); pointer-events: none; }
}

.md-d-orders__detail-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.md-d-orders__detail-head h3 {
  margin: 0; font-size: 16px; font-weight: 700; color: var(--text);
}
.md-d-orders__detail-close {
  width: 32px; height: 32px;
  border: none; background: transparent;
  border-radius: 6px;
  cursor: default;
  font-size: 22px; line-height: 1;
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  animation: md-d-orders-closehi 16s infinite;
}
@keyframes md-d-orders-closehi {
  0%, 70%   { background: transparent; color: var(--text-muted); }
  73%, 78%  { background: var(--surface-subtle); color: var(--danger); }
  82%, 100% { background: transparent; color: var(--text-muted); }
}

.md-d-orders__detail-body {
  flex: 1; overflow: auto;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 14px;
}

/* Form grid 2×2 / 1×2 */
.md-d-orders__grid2 {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.md-d-orders__field { display: flex; flex-direction: column; gap: 4px; }
.md-d-orders__field label {
  font-size: 11px; font-weight: 600;
  color: var(--text-muted);
}
.md-d-orders__req { color: var(--danger); }
.md-d-orders__input {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px; color: var(--text);
  min-height: 36px;
}
.md-d-orders__input--select { color: var(--text); }
.md-d-orders__input--select svg { color: var(--text-muted); }

/* Section titles */
.md-d-orders__section { display: flex; flex-direction: column; gap: 8px; }
.md-d-orders__section-label {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
}

/* Delivery cards (4 cards) */
.md-d-orders__delivery-cards {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.md-d-orders__delivery-card {
  padding: 10px;
  background: var(--surface-subtle);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px;
  cursor: default;
  text-align: center;
  align-items: center;
}
.md-d-orders__delivery-desc {
  font-size: 10px; color: var(--text-muted);
  line-height: 1.3;
}
.md-d-orders__delivery-card--active {
  border-color: var(--accent);
  background: var(--brand-gradient-soft);
}

/* Total row */
.md-d-orders__total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(61, 107, 133, 0.04), rgba(139, 58, 79, 0.04));
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-size: 13px;
}
.md-d-orders__total strong { font-size: 18px; font-weight: 800; }

/* Footer */
.md-d-orders__detail-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}

/* Manager select — animated from "Не призначено" → dropdown opens → "Олександр П." picked */
.md-d-orders__select { position: relative; }
.md-d-orders__select-value {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  cursor: default;
  animation: md-d-orders-selvalue 16s infinite;
}
@keyframes md-d-orders-selvalue {
  0%, 32%  { border-color: var(--border); background: var(--surface-subtle); }
  35%, 56% { border-color: var(--accent); background: var(--surface); }
  60%, 100%{ border-color: var(--border); background: var(--surface-subtle); }
}
/* Two value spans overlaid via position:absolute, swapped via opacity (display:none in keyframes is unreliable across browsers) */
.md-d-orders__select-text {
  position: relative;
  display: inline-block;
  min-width: 200px;
  height: 18px;
  flex: 1;
}
.md-d-orders__select-empty,
.md-d-orders__select-picked {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
}
.md-d-orders__select-empty {
  color: var(--text-muted);
  opacity: 1;
  animation: md-d-orders-empty 16s infinite;
}
.md-d-orders__select-picked {
  font-weight: 600;
  color: var(--text);
  opacity: 0;
  animation: md-d-orders-picked 16s infinite;
}
@keyframes md-d-orders-empty {
  0%, 56%  { opacity: 1; }
  58%, 100%{ opacity: 0; }
}
@keyframes md-d-orders-picked {
  0%, 56%  { opacity: 0; }
  60%, 100%{ opacity: 1; }
}
.md-d-orders__select-caret { color: var(--text-muted); animation: md-d-orders-caret 16s infinite; }
@keyframes md-d-orders-caret {
  0%, 35%  { transform: rotate(0); }
  40%, 56% { transform: rotate(180deg); }
  60%, 100%{ transform: rotate(0); }
}

.md-d-orders__select-options {
  list-style: none;
  margin: 4px 0 0;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.10);
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: 5;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  animation: md-d-orders-options 16s infinite;
}
@keyframes md-d-orders-options {
  0%, 36%  { opacity: 0; transform: translateY(-6px); pointer-events: none; }
  40%, 58% { opacity: 1; transform: translateY(0); pointer-events: auto; }
  62%, 100%{ opacity: 0; transform: translateY(-6px); pointer-events: none; }
}
.md-d-orders__select-options li {
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 6px;
  cursor: default;
}
.md-d-orders__select-target {
  animation: md-d-orders-optTarget 16s infinite;
}
@keyframes md-d-orders-optTarget {
  0%, 50%  { background: transparent; color: var(--text); }
  53%, 58% { background: var(--brand-gradient-soft); color: var(--accent); font-weight: 600; }
  62%, 100%{ background: transparent; color: var(--text); }
}

.md-d-orders__saved {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  color: var(--success);
  margin-top: 10px;
  opacity: 0;
  animation: md-d-orders-saved 16s infinite;
}
@keyframes md-d-orders-saved {
  0%, 60%  { opacity: 0; transform: translateY(4px); }
  64%, 76% { opacity: 1; transform: translateY(0); }
  80%, 100%{ opacity: 0; transform: translateY(-2px); }
}

/* Cursor + click choreography (16s):
     0–10%   wander to first table row, tip on "Олександр Шевченко"
     14%     click row → modal fades in (centered, 700px)
     14–35%  smooth direct drift to Менеджер select inside modal
     38%     click select → dropdown opens
     38–50%  drop down to "Олена Романюк" option (2nd in list)
     56%     click option → manager assigned + "Збережено"
     56–74%  drift to close × (top-right of modal)
     78%     click close → modal fades out
     100%    reset
*/
.md-d-orders__cursor {
  animation: md-d-orders-cursor 16s infinite;
  animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
@keyframes md-d-orders-cursor {
  0%   { left: 50%; top: 92%; }
  10%  { left: 17%; top: 18%; }    /* tip on name "Олександр Шевченко" */
  14%  { left: 17%; top: 18%; }    /* click first row */
  35%  { left: 60%; top: 24%; }    /* direct path to Менеджер select (no detour) */
  38%  { left: 60%; top: 24%; }    /* click select */
  50%  { left: 60%; top: 36%; }    /* tip on "Олена Романюк" (2nd option) */
  56%  { left: 60%; top: 36%; }    /* click option */
  74%  { left: 79%; top: 12%; }    /* close × (top-right) */
  78%  { left: 79%; top: 12%; }    /* click close */
  100% { left: 79%; top: 12%; }
}
.md-d-orders__click { animation: md-d-orders-click 16s infinite; }
@keyframes md-d-orders-click {
  0%, 12%   { opacity: 0; transform: scale(0.4); left: calc(17% - 14px); top: calc(18% - 14px); }
  14%       { opacity: 1; transform: scale(1); }
  17%, 36%  { opacity: 0; transform: scale(1.6); }
  37%       { opacity: 0; transform: scale(0.4); left: calc(60% - 14px); top: calc(24% - 14px); }
  39%       { opacity: 1; transform: scale(1); }
  42%, 54%  { opacity: 0; transform: scale(1.6); }
  55%       { opacity: 0; transform: scale(0.4); left: calc(60% - 14px); top: calc(36% - 14px); }
  57%       { opacity: 1; transform: scale(1); }
  60%, 76%  { opacity: 0; transform: scale(1.6); }
  77%       { opacity: 0; transform: scale(0.4); left: calc(79% - 14px); top: calc(12% - 14px); }
  79%       { opacity: 1; transform: scale(1); }
  82%, 100% { opacity: 0; transform: scale(1.6); }
}

@media (max-width: 880px) {
  .md-d-orders__detail { width: 100%; }
}

/* ============================================================
   HR demo — 26s loop, three phases (matching real CRM screens):
   Phase 1 (0–8s):    Дашборд "Головна" with "Робочий день" popover
                      → click "Почати роботу" → button flips to
                      "Розпочато · 09:02" → toast → cursor moves to
                      "HR & Персонал" sidebar item → click.
   Phase 2 (8–15s):   HR Табель — 13-tab strip + table (Спів-к | дати
                      04–10.тра | Годин | Ставка | До оплати).
                      Today's cell (10.тра) for target row fills with
                      green "В" pill, hours tick 0 → 8.0, sum updates.
                      Cursor moves to "Дні народження" tab → click.
   Phase 3 (15–26s):  HR Дні народження — recipients chip with email,
                      "SMTP налаштовано" badge, 3 birthday cards.
                      Click "Нагадування за" dropdown → pick 3 дні →
                      envelope flies from card to chip → toast.
   ============================================================ */
.md-d-hr {
  display: flex; flex-direction: column;
  background: var(--surface);
  position: relative;
  height: 100%;
  overflow: hidden;
}

/* Phase containers — all stacked, opacity-driven crossfade */
.md-d-hr__phase {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--surface);
}
.md-d-hr__phase--dash { animation: md-d-hr-phase-dash 26s infinite; }
.md-d-hr__phase--ts   { animation: md-d-hr-phase-ts   26s infinite; opacity: 0; }
.md-d-hr__phase--bd   { animation: md-d-hr-phase-bd   26s infinite; opacity: 0; }
@keyframes md-d-hr-phase-dash {
  0%, 28%   { opacity: 1; }
  31%, 96%  { opacity: 0; }
  98%, 100% { opacity: 1; }
}
@keyframes md-d-hr-phase-ts {
  0%, 28%   { opacity: 0; }
  31%, 56%  { opacity: 1; }
  59%, 100% { opacity: 0; }
}
@keyframes md-d-hr-phase-bd {
  0%, 56%   { opacity: 0; }
  59%, 96%  { opacity: 1; }
  98%, 100% { opacity: 0; }
}

/* ===== Phase 1 — Dashboard mock ===== */
.md-d-hr__phase--dash {
  flex-direction: row;
}
.md-d-hr__dash-side {
  width: 170px; flex-shrink: 0;
  background: var(--surface-subtle);
  border-right: 1px solid var(--border);
  padding: 14px 12px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.md-d-hr__dash-logo {
  font-size: 16px; font-weight: 700; color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.md-d-hr__dash-logo span {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.md-d-hr__dash-tag {
  font-size: 10px; font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 6px 4px 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.md-d-hr__dash-nav {
  display: flex; flex-direction: column; gap: 2px;
  overflow: hidden;
}
.md-d-hr__dash-link {
  display: block;
  padding: 7px 10px;
  font-size: 12px; color: var(--text);
  border-radius: 6px;
  cursor: default;
}
.md-d-hr__dash-link--active {
  background: var(--brand-gradient-soft);
  color: var(--accent);
  font-weight: 600;
}
.md-d-hr__dash-link--hr {
  position: relative;
  animation: md-d-hr-hr-pulse 26s infinite;
}
@keyframes md-d-hr-hr-pulse {
  0%, 18%   { background: transparent; box-shadow: none; }
  20%, 26%  { background: var(--brand-gradient-soft); box-shadow: 0 0 0 2px rgba(92, 82, 120, 0.15); color: var(--accent); }
  29%, 100% { background: transparent; box-shadow: none; }
}

.md-d-hr__dash-main {
  flex: 1; min-width: 0;
  padding: 16px 22px;
  display: flex; flex-direction: column; gap: 12px;
  overflow: hidden;
  position: relative;
}
.md-d-hr__dash-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
}
.md-d-hr__dash-head h2 {
  margin: 0; font-size: 18px; font-weight: 700; color: var(--text);
}
.md-d-hr__dash-head p {
  margin: 2px 0 0; font-size: 12px; color: var(--text-muted);
}
.md-d-hr__dash-tools {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-muted);
}
.md-d-hr__dash-search {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: 6px;
  min-width: 180px;
}
.md-d-hr__dash-search kbd {
  background: var(--surface);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  margin-left: auto;
}
.md-d-hr__dash-create {
  padding: 6px 12px;
  background: var(--brand-gradient);
  color: #fff;
  border-radius: 6px;
  font-weight: 600;
}
.md-d-hr__dash-clock,
.md-d-hr__dash-bell {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  position: relative;
}
.md-d-hr__dash-badge {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--danger);
  color: #fff;
  font-size: 9px; font-weight: 700;
  padding: 1px 4px;
  border-radius: 999px;
  min-width: 14px; text-align: center;
}
.md-d-hr__dash-lang { font-weight: 600; color: var(--text); }

.md-d-hr__dash-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.md-d-hr__dash-card {
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.md-d-hr__dash-card strong {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.md-d-hr__dash-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
}
.md-d-hr__dash-dot--warn { background: var(--warning); }
.md-d-hr__dash-dot--info { background: var(--info); }
.md-d-hr__dash-card ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.md-d-hr__dash-card li {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text);
}
.md-d-hr__dash-ico { font-size: 13px; opacity: .7; }

.md-d-hr__dash-kpi {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.md-d-hr__dash-kpi-tile {
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.md-d-hr__dash-kpi-label {
  font-size: 9px; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.md-d-hr__dash-kpi-tile strong {
  font-size: 22px; font-weight: 700; color: var(--text);
  line-height: 1;
}
.md-d-hr__dash-kpi-link {
  font-size: 10px; color: var(--accent); margin-top: 2px;
}

.md-d-hr__dash-notif {
  display: flex; flex-direction: column; gap: 8px;
}
.md-d-hr__dash-notif-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
}
.md-d-hr__dash-notif-ico {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #1A1A1A;
  color: #fff;
  border-radius: 50%;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.md-d-hr__dash-notif-ico--alert { background: var(--warning); }
.md-d-hr__dash-notif-row strong {
  display: block;
  font-size: 12px; font-weight: 600; color: var(--text);
}
.md-d-hr__dash-notif-row p {
  margin: 2px 0 0;
  font-size: 11px; color: var(--text-muted);
}

/* "Робочий день" popover anchored top-right under clock icon */
.md-d-hr__workpop {
  position: absolute;
  top: 60px; right: 100px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  width: 220px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  z-index: 12;
  opacity: 0;
  transform-origin: top right;
  animation: md-d-hr-workpop-show 26s infinite;
}
@keyframes md-d-hr-workpop-show {
  0%, 5%    { opacity: 0; transform: translate(0, -8px) scale(0.96); }
  7%, 28%   { opacity: 1; transform: translate(0, 0) scale(1); }
  30%, 100% { opacity: 0; transform: translate(0, -8px) scale(0.96); }
}
.md-d-hr__workpop-title {
  font-size: 11px; font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.md-d-hr__workpop-btn {
  width: 100%;
  padding: 10px 12px;
  background: var(--brand-gradient);
  color: #fff;
  border: none; border-radius: 8px;
  font-size: 13px; font-weight: 600;
  cursor: default;
  display: flex; align-items: center; justify-content: center;
  animation: md-d-hr-workbtn-pulse 26s infinite;
}
@keyframes md-d-hr-workbtn-pulse {
  0%, 11%  { box-shadow: 0 0 0 0 rgba(92, 82, 120, 0); }
  13%      { box-shadow: 0 0 0 6px rgba(92, 82, 120, 0.18); transform: scale(0.96); }
  15%      { transform: scale(1); }
  17%      { box-shadow: 0 0 0 0 rgba(92, 82, 120, 0); }
  100%     { box-shadow: none; transform: scale(1); }
}

/* Crossfade between "Почати роботу" button and the running-timer view */
.md-d-hr__workpop-state--before { animation: md-d-hr-workstate-before 26s infinite; }
.md-d-hr__workpop-state--after  { animation: md-d-hr-workstate-after  26s infinite; opacity: 0; height: 0; overflow: hidden; }
@keyframes md-d-hr-workstate-before {
  0%, 13%   { opacity: 1; max-height: 60px; }
  15%, 100% { opacity: 0; max-height: 0; overflow: hidden; }
}
@keyframes md-d-hr-workstate-after {
  0%, 13%   { opacity: 0; height: 0; overflow: hidden; }
  15%, 28%  { opacity: 1; height: auto; overflow: visible; }
  30%, 100% { opacity: 0; height: 0; overflow: hidden; }
}

/* Running-timer view — matches real CRM "Робочий день" widget */
@property --md-d-hr-tick {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}
.md-d-hr__workpop-timer {
  font-family: 'SF Mono', 'Menlo', 'Consolas', ui-monospace, monospace;
  font-size: 26px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--accent);
  text-align: center;
  line-height: 1;
  margin: 4px 0 2px;
  --md-d-hr-tick: 0;
  counter-reset: hrtick var(--md-d-hr-tick);
  animation: md-d-hr-timer-tick 26s infinite linear;
}
.md-d-hr__workpop-timer::before {
  content: "00:00:" counter(hrtick, decimal-leading-zero);
}
@keyframes md-d-hr-timer-tick {
  0%, 15%   { --md-d-hr-tick: 0; }
  28%       { --md-d-hr-tick: 4; }
  30%, 100% { --md-d-hr-tick: 0; }
}
.md-d-hr__workpop-clock-label {
  text-align: center;
  font-size: 11px; color: var(--text-muted);
  margin-bottom: 10px;
}
.md-d-hr__workpop-pause {
  text-align: center;
  font-size: 11px; color: var(--text-muted);
  padding: 6px 0;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 10px;
}
.md-d-hr__workpop-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.md-d-hr__workpop-act {
  padding: 7px 8px;
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px; font-weight: 500;
  cursor: default;
}

/* Toast on dashboard */
.md-d-hr__dash-toast {
  position: absolute;
  top: 14px; left: 50%; transform: translate(-50%, -16px);
  display: flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  background: var(--brand-gradient);
  color: #fff;
  border-radius: 8px;
  font-size: 12px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(61, 107, 133, 0.30);
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  animation: md-d-hr-dash-toast 26s infinite;
}
@keyframes md-d-hr-dash-toast {
  0%, 15%   { opacity: 0; transform: translate(-50%, -16px); }
  17%, 24%  { opacity: 1; transform: translate(-50%, 0); }
  27%, 100% { opacity: 0; transform: translate(-50%, -16px); }
}

/* ===== Phase 2 + 3 — HR layout chrome (head + tabs strip) ===== */
.md-d-hr__hr-head {
  padding: 14px 22px 8px;
  flex-shrink: 0;
}
.md-d-hr__hr-head h2 {
  margin: 0; font-size: 18px; font-weight: 700; color: var(--text);
}
.md-d-hr__hr-head p {
  margin: 2px 0 0; font-size: 12px; color: var(--text-muted);
}
.md-d-hr__hr-tabs {
  display: flex; gap: 0;
  padding: 0 22px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow: hidden;
}
.md-d-hr__hr-tab {
  padding: 12px 11px;
  font-size: 11px; font-weight: 500;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center;
  white-space: nowrap;
  cursor: default;
}
.md-d-hr__hr-tab--active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
  background: rgba(92, 82, 120, 0.04);
}
/* Phase-2 active animations sync the "Дні народження" tab pulsing
   right before tab swap */
.md-d-hr__hr-tab--bd {
  animation: md-d-hr-tab-bd-hover 26s infinite;
}
@keyframes md-d-hr-tab-bd-hover {
  0%, 50%   { color: var(--text-muted); border-bottom-color: transparent; }
  52%, 56%  { color: var(--accent); border-bottom-color: rgba(92, 82, 120, 0.4); }
  59%, 100% { color: var(--text-muted); border-bottom-color: transparent; }
}

/* ===== Phase 2 — Табель ===== */
.md-d-hr__phase--ts {
  background: var(--surface);
}
.md-d-hr__ts-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px 6px;
  flex-shrink: 0;
}
.md-d-hr__ts-bar h3 {
  margin: 0; font-size: 16px; font-weight: 700; color: var(--text);
}
.md-d-hr__ts-export {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border: none; border-radius: 8px;
  font-size: 12px; font-weight: 600;
  cursor: default;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
}
.md-d-hr__ts-controls {
  display: flex; align-items: center; gap: 6px;
  padding: 0 22px 8px;
  font-size: 12px;
  flex-shrink: 0;
}
.md-d-hr__ts-period {
  padding: 5px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px; font-weight: 500;
  color: var(--text-muted);
}
.md-d-hr__ts-period--active {
  background: var(--brand-gradient-soft);
  color: var(--accent);
  border-color: rgba(92, 82, 120, 0.25);
  font-weight: 600;
}
.md-d-hr__ts-divider {
  color: var(--text-muted);
  margin: 0 4px;
}
.md-d-hr__ts-input {
  display: inline-flex; align-items: center;
  padding: 5px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px; color: var(--text-muted);
  font-family: var(--font-mono, monospace);
  min-width: 90px;
}
.md-d-hr__ts-dash { color: var(--text-muted); }
.md-d-hr__ts-show {
  padding: 5px 14px;
  background: var(--brand-gradient);
  color: #fff;
  border-radius: 6px;
  font-size: 11px; font-weight: 600;
}
.md-d-hr__ts-spacer { flex: 1; }
.md-d-hr__ts-filter {
  padding: 5px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px; color: var(--text);
  font-weight: 500;
}

.md-d-hr__ts-tablewrap {
  margin: 0 22px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  flex: 1; min-height: 0;
  overflow-y: auto;
}
.md-d-hr__ts-table {
  width: 100%; border-collapse: collapse;
  font-size: 11px;
}
.md-d-hr__ts-table thead {
  background: linear-gradient(180deg, rgba(61, 107, 133, 0.06) 0%, rgba(139, 58, 79, 0.06) 100%);
}
.md-d-hr__ts-table th {
  padding: 10px 6px;
  font-size: 10px; font-weight: 600;
  color: var(--text);
  border-right: 1px solid var(--border);
  text-align: center;
  white-space: nowrap;
  font-family: var(--font-mono, monospace);
}
.md-d-hr__ts-table th:last-child { border-right: none; }
.md-d-hr__ts-table th.md-d-hr__th-name {
  text-align: left;
  font-family: inherit;
  text-transform: none;
}
.md-d-hr__th-today { background: rgba(61, 107, 133, 0.10); }

.md-d-hr__ts-table td {
  padding: 9px 6px;
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border-light);
  text-align: center;
  vertical-align: middle;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--text);
  height: 36px;
}
.md-d-hr__ts-table td:last-child { border-right: none; }
.md-d-hr__td-name {
  text-align: left !important;
  font-family: inherit !important;
  font-size: 12px; font-weight: 600;
  padding-left: 14px !important;
}
.md-d-hr__row--target .md-d-hr__td-name { color: var(--accent); }
.md-d-hr__td-num { font-weight: 600; }
.md-d-hr__td-muted { color: var(--text-muted); font-weight: 400; }

.md-d-hr__cell {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 11px;
  font-family: inherit;
}
.md-d-hr__cell--ok { background: rgba(16, 185, 129, 0.18); color: #059669; }
.md-d-hr__cell--empty {
  background: var(--surface-subtle);
  color: var(--text-muted);
  opacity: 0.5;
  font-weight: 400;
}
.md-d-hr__cell--progress {
  background: rgba(61, 107, 133, 0.18);
  color: #3D6B85;
}
.md-d-hr__cell--live { animation: md-d-hr-cell-pulse 1.6s infinite; }
@keyframes md-d-hr-cell-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); box-shadow: 0 0 0 3px rgba(61, 107, 133, 0.22); }
}

/* Today cell — empty → "В" green pill (synced with phase-2 timeline) */
.md-d-hr__today-cell { position: relative; background: rgba(61, 107, 133, 0.05); }
.md-d-hr__day-empty {
  display: inline-block;
  width: 100%; height: 100%;
  animation: md-d-hr-day-empty 26s infinite;
}
.md-d-hr__day-filled {
  position: absolute;
  inset: 0;
  display: flex !important; align-items: center; justify-content: center;
  opacity: 0;
  animation: md-d-hr-day-filled 26s infinite;
}
@keyframes md-d-hr-day-empty {
  0%, 36%   { opacity: 1; }
  38%, 100% { opacity: 0; }
}
@keyframes md-d-hr-day-filled {
  0%, 36%   { opacity: 0; transform: scale(0.86); }
  38%, 41%  { opacity: 1; transform: scale(1.12); }
  43%, 100% { opacity: 1; transform: scale(1); }
}

.md-d-hr__td-hours { position: relative; }
.md-d-hr__hours-before { animation: md-d-hr-hours-before 26s infinite; }
.md-d-hr__hours-after {
  position: absolute; inset: 9px 0;
  display: flex !important; align-items: center; justify-content: center;
  color: var(--success); font-weight: 700;
  opacity: 0;
  animation: md-d-hr-hours-after 26s infinite;
}
@keyframes md-d-hr-hours-before {
  0%, 41%   { opacity: 1; }
  43%, 100% { opacity: 0; }
}
@keyframes md-d-hr-hours-after {
  0%, 41%   { opacity: 0; }
  43%, 100% { opacity: 1; }
}

.md-d-hr__ts-sum { background: var(--surface-subtle); font-weight: 700; }
.md-d-hr__ts-sum-label {
  text-align: right !important;
  padding-right: 14px !important;
  font-family: inherit !important;
  font-size: 12px; font-weight: 700;
}
.md-d-hr__sum-before { animation: md-d-hr-sum-before 26s infinite; }
.md-d-hr__sum-after {
  position: absolute; inset: 9px 0;
  display: flex !important; align-items: center; justify-content: center;
  color: var(--success);
  opacity: 0;
  animation: md-d-hr-sum-after 26s infinite;
}
@keyframes md-d-hr-sum-before {
  0%, 41%   { opacity: 1; }
  43%, 100% { opacity: 0; }
}
@keyframes md-d-hr-sum-after {
  0%, 41%   { opacity: 0; }
  43%, 100% { opacity: 1; }
}
.md-d-hr__ts-sum td:nth-child(2) { position: relative; }

/* Quick check-in strip */
.md-d-hr__ts-quick {
  margin: 8px 22px 0;
  padding: 10px 14px;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex; align-items: center; gap: 10px;
  font-size: 11px;
  flex-shrink: 0;
}
.md-d-hr__ts-quick-icon { font-size: 14px; }
.md-d-hr__ts-quick-select {
  padding: 5px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px; color: var(--text-muted);
  min-width: 200px;
}
.md-d-hr__ts-quick-prihid {
  padding: 5px 12px;
  background: var(--success);
  color: #fff;
  border-radius: 6px;
  font-weight: 600;
}
.md-d-hr__ts-quick-uhid {
  padding: 5px 12px;
  background: var(--warning);
  color: #fff;
  border-radius: 6px;
  font-weight: 600;
}

.md-d-hr__ts-legend {
  margin: 8px 22px 12px;
  padding: 6px 12px;
  background: var(--surface-subtle);
  border-radius: 6px;
  display: flex; gap: 14px;
  font-size: 11px; color: var(--text);
  flex-shrink: 0;
}
.md-d-hr__legend-sw {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
}
.md-d-hr__legend-sw--ok     { background: #10b981; }
.md-d-hr__legend-sw--sick   { background: #f59e0b; }
.md-d-hr__legend-sw--vac    { background: #3b82f6; }
.md-d-hr__legend-sw--remote { background: #8b5cf6; }

/* Target row highlight (timed within phase-2 visibility 28-56%) */
.md-d-hr__row--target {
  animation: md-d-hr-row-target 26s infinite;
}
@keyframes md-d-hr-row-target {
  0%, 32%   { background: var(--surface); box-shadow: none; }
  35%, 50%  { background: var(--brand-gradient-soft); box-shadow: inset 3px 0 0 var(--accent); }
  53%, 100% { background: var(--surface); box-shadow: none; }
}

/* ===== Phase 3 — Birthdays ===== */
.md-d-hr__phase--bd {
  background: var(--surface);
  padding-bottom: 14px;
}
.md-d-hr__bd-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 14px 22px 6px;
  gap: 16px;
  flex-shrink: 0;
}
.md-d-hr__bd-head h3 {
  margin: 0 0 3px;
  font-size: 16px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 6px;
}
.md-d-hr__bd-emoji { font-size: 18px; }
.md-d-hr__bd-head p {
  margin: 0;
  font-size: 12px; color: var(--text-muted);
}
.md-d-hr__bd-settings {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.md-d-hr__bd-set-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text);
}
.md-d-hr__bd-set-label svg { color: var(--text-muted); }

.md-d-hr__bd-select {
  position: relative;
  min-width: 110px;
}
.md-d-hr__bd-select-value {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 5px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px; font-weight: 600; color: var(--text);
  animation: md-d-hr-bd-sel-border 26s infinite;
}
@keyframes md-d-hr-bd-sel-border {
  0%, 78%   { border-color: var(--border); box-shadow: none; }
  80%, 86%  { border-color: var(--success); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12); }
  88%, 100% { border-color: var(--border); box-shadow: none; }
}
.md-d-hr__bd-select-current { font-family: var(--font-mono, monospace); }
.md-d-hr__bd-select-caret {
  color: var(--text-muted);
  animation: md-d-hr-bd-caret 26s infinite;
}
@keyframes md-d-hr-bd-caret {
  0%, 70%   { transform: rotate(0); }
  72%, 78%  { transform: rotate(180deg); }
  80%, 100% { transform: rotate(0); }
}

.md-d-hr__bd-select-options {
  list-style: none;
  margin: 4px 0 0; padding: 4px;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.10);
  z-index: 8;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  animation: md-d-hr-bd-options 26s infinite;
}
@keyframes md-d-hr-bd-options {
  0%, 70%   { opacity: 0; transform: translateY(-6px); }
  72%, 78%  { opacity: 1; transform: translateY(0); }
  80%, 100% { opacity: 0; transform: translateY(-6px); }
}
.md-d-hr__bd-select-options li {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 4px;
  cursor: default;
}
.md-d-hr__bd-select-target { animation: md-d-hr-bd-opt-target 26s infinite; }
@keyframes md-d-hr-bd-opt-target {
  0%, 73%   { background: transparent; color: var(--text); font-weight: 400; }
  75%, 78%  { background: var(--brand-gradient-soft); color: var(--accent); font-weight: 600; }
  80%, 100% { background: transparent; color: var(--text); font-weight: 400; }
}

.md-d-hr__bd-recipients {
  margin: 6px 22px 0;
  padding: 10px 14px;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: 10px;
  flex-shrink: 0;
}
.md-d-hr__bd-recipients-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.md-d-hr__bd-recipients-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--text);
}
.md-d-hr__bd-recipients-label svg { color: var(--text-muted); }
.md-d-hr__bd-smtp {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border-radius: 999px;
  font-size: 10px; font-weight: 600;
}
.md-d-hr__bd-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px 4px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px; color: var(--text);
}
.md-d-hr__bd-chip-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--success);
}
.md-d-hr__bd-time {
  margin: 8px 0 0;
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-muted);
}
.md-d-hr__bd-time svg { color: var(--text-muted); }
.md-d-hr__bd-time strong { color: var(--text); font-weight: 700; }

.md-d-hr__bd-grid {
  margin: 12px 22px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.md-d-hr__bd-card {
  position: relative;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.md-d-hr__bd-card h4 {
  margin: 0;
  font-size: 13px; font-weight: 700; color: var(--text);
}
.md-d-hr__bd-role {
  margin: 0;
  font-size: 11px; color: var(--text-muted);
}
.md-d-hr__bd-card-top {
  display: flex; align-items: center; justify-content: space-between;
}
.md-d-hr__bd-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--brand-gradient);
  color: #fff;
  font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.md-d-hr__bd-avatar--blue { background: var(--info); }
.md-d-hr__bd-avatar--violet { background: #8b5cf6; }
.md-d-hr__bd-soon {
  padding: 3px 10px;
  background: rgba(184, 134, 42, 0.14);
  color: var(--warning);
  border-radius: 999px;
  font-size: 10px; font-weight: 600;
}
.md-d-hr__bd-far {
  padding: 3px 10px;
  background: var(--surface-subtle);
  color: var(--text-muted);
  border-radius: 999px;
  font-size: 10px; font-weight: 500;
}
.md-d-hr__bd-date {
  display: flex; align-items: center; gap: 6px;
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
  font-size: 11px; color: var(--text);
  font-family: var(--font-mono, monospace);
}
.md-d-hr__bd-date svg { color: var(--text-muted); }

.md-d-hr__bd-card--target {
  animation: md-d-hr-bd-card-target 26s infinite;
}
@keyframes md-d-hr-bd-card-target {
  0%, 64%   { border-color: var(--border); box-shadow: none; }
  66%, 78%  { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(92, 82, 120, 0.10); }
  80%, 86%  { border-color: var(--success); box-shadow: 0 0 0 3px rgba(46, 93, 63, 0.10); }
  88%, 100% { border-color: var(--border); box-shadow: none; }
}

/* Toast: email sent */
.md-d-hr__bd-toast {
  position: absolute;
  top: 14px; left: 50%; transform: translate(-50%, -16px);
  display: flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  background: var(--brand-gradient);
  color: #fff;
  border-radius: 8px;
  font-size: 12px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(61, 107, 133, 0.30);
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  animation: md-d-hr-bd-toast 26s infinite;
}
@keyframes md-d-hr-bd-toast {
  0%, 92%   { opacity: 0; transform: translate(-50%, -16px); }
  93%, 96%  { opacity: 1; transform: translate(-50%, 0); }
  98%, 100% { opacity: 0; transform: translate(-50%, -16px); }
}

/* Cursor + click choreography (26s, 3 phases):
     Phase 1 (0–28%):
       0–8%    move to "Почати роботу" button (top-right popover ~80%, 14%)
       10%     click → button flips
       18%     drift to "HR & Персонал" sidebar item (~7%, 56%)
       25%     click → phase 2
     Phase 2 (28–56%):
       33%     hover on target row's 10.тра cell (~62%, 50%)
       38%     no-op (cell auto-fills from dashboard click; cursor lingers)
       48%     drift to "Дні народження" tab (~65%, 12%)
       54%     click → phase 3
     Phase 3 (56–96%):
       65%     drift to dropdown caret (top-right ~88%, 14%)
       72%     click → opens
       77%     hover "3 дні" option (~88%, 24%)
       79%     click → close, success border, envelope flies, toast
       88%+    idle
*/
.md-d-hr__cursor {
  animation: md-d-hr-cursor 26s infinite;
  animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
@keyframes md-d-hr-cursor {
  0%   { left: 50%; top: 92%; }
  4%   { left: 90%; top: 5%; }    /* on clock icon (header top-right) */
  6%   { left: 90%; top: 5%; }    /* click clock → opens popover */
  12%  { left: 78%; top: 18%; }   /* on "Почати роботу" button inside popover */
  14%  { left: 78%; top: 18%; }   /* click button → timer view */
  25%  { left: 7%;  top: 68%; }   /* direct diagonal to HR & Персонал sidebar item */
  26%  { left: 7%;  top: 68%; }   /* click */
  32%  { left: 40%; top: 36%; }   /* phase 2 entry */
  37%  { left: 62%; top: 46%; }   /* on target row cell */
  47%  { left: 62%; top: 46%; }   /* idle */
  53%  { left: 69%; top: 8%; }    /* on Дні народження tab */
  54%  { left: 69%; top: 8%; }    /* click */
  64%  { left: 78%; top: 20%; }   /* moving to dropdown caret */
  71%  { left: 88%; top: 17%; }   /* on dropdown caret */
  72%  { left: 88%; top: 17%; }   /* click → opens options */
  77%  { left: 88%; top: 38%; }   /* on "3 дні" option (4th item in dropdown) */
  79%  { left: 88%; top: 38%; }   /* click */
  88%  { left: 75%; top: 44%; }   /* idle */
  100% { left: 75%; top: 44%; }
}
.md-d-hr__click { animation: md-d-hr-click 26s infinite; }
@keyframes md-d-hr-click {
  0%, 4%    { opacity: 0; transform: scale(0.4); left: calc(90% - 14px); top: calc(5% - 14px); }
  6%        { opacity: 1; transform: scale(1); }
  9%, 11%   { opacity: 0; transform: scale(1.6); }
  12%       { opacity: 0; transform: scale(0.4); left: calc(78% - 14px); top: calc(18% - 14px); }
  14%       { opacity: 1; transform: scale(1); }
  17%, 25%  { opacity: 0; transform: scale(1.6); }
  26%       { opacity: 0; transform: scale(0.4); left: calc(7% - 14px); top: calc(68% - 14px); }
  27%       { opacity: 1; transform: scale(1); }
  30%, 53%  { opacity: 0; transform: scale(1.6); }
  54%       { opacity: 0; transform: scale(0.4); left: calc(69% - 14px); top: calc(8% - 14px); }
  55%       { opacity: 1; transform: scale(1); }
  58%, 71%  { opacity: 0; transform: scale(1.6); }
  72%       { opacity: 0; transform: scale(0.4); left: calc(88% - 14px); top: calc(17% - 14px); }
  73%       { opacity: 1; transform: scale(1); }
  76%, 78%  { opacity: 0; transform: scale(1.6); }
  79%       { opacity: 0; transform: scale(0.4); left: calc(88% - 14px); top: calc(38% - 14px); }
  80%       { opacity: 1; transform: scale(1); }
  83%, 100% { opacity: 0; transform: scale(1.6); }
}

@media (max-width: 880px) {
  .md-d-hr__bd-grid { grid-template-columns: 1fr; }
  .md-d-hr__dash-side { width: 130px; }
}

/* ============================================================
   Marketing demo — 22s loop, two phases (with photo upload):
   Phase 1 (0–10s):  "Нова кампанія" modal — fields type, "Знижка /
                     Промо" template clicked, HTML+preview populate,
                     "Створити" → toast.
   Phase 2 (10–22s): Соц-пост — click "Instagram" tab → click
                     drag-drop zone → promo photo appears → preview
                     image renders → type text → preview text fills →
                     click "Опублікувати" → toast.
   ============================================================ */
.md-d-mkt {
  display: flex; flex-direction: column;
  background: var(--surface);
  position: relative;
  height: 100%;
  overflow: hidden;
}

/* Phase containers */
.md-d-mkt__phase {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--surface);
}
.md-d-mkt__phase--cmp { animation: md-d-mkt-phase-cmp 22s infinite; }
.md-d-mkt__phase--soc { animation: md-d-mkt-phase-soc 22s infinite; opacity: 0; }
@keyframes md-d-mkt-phase-cmp {
  0%, 41%   { opacity: 1; }
  44%, 96%  { opacity: 0; }
  98%, 100% { opacity: 1; }
}
@keyframes md-d-mkt-phase-soc {
  0%, 41%   { opacity: 0; }
  44%, 96%  { opacity: 1; }
  98%, 100% { opacity: 0; }
}

/* ===== Shared modal head + body chrome ===== */
.md-d-mkt__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.md-d-mkt__head-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--text);
}
.md-d-mkt__head-title svg { color: var(--accent); }
.md-d-mkt__head-x {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--text-muted);
  cursor: default;
}
.md-d-mkt__body {
  flex: 1; min-height: 0;
  padding: 14px 22px;
  display: flex; flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}
.md-d-mkt__foot {
  display: flex; align-items: center; gap: 8px;
  justify-content: flex-end;
  padding: 12px 22px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.md-d-mkt__foot-spacer { flex: 1; }

/* ===== Phase 1 — Campaign form ===== */
.md-d-mkt__row2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.md-d-mkt__field { display: flex; flex-direction: column; gap: 5px; }
.md-d-mkt__field label {
  font-size: 11px; font-weight: 600; color: var(--text);
}
.md-d-mkt__req { color: var(--danger); }
.md-d-mkt__hint-small { color: var(--text-muted); font-weight: 400; }

.md-d-mkt__input {
  position: relative;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text);
  min-height: 32px;
}
.md-d-mkt__input-empty { color: var(--text-muted); }
.md-d-mkt__input-filled {
  position: absolute;
  inset: 8px 12px;
  display: flex; align-items: center;
  color: var(--text);
  font-weight: 500;
  opacity: 0;
}

.md-d-mkt__input--name { animation: md-d-mkt-name-border 22s infinite; }
.md-d-mkt__input--name .md-d-mkt__input-empty { animation: md-d-mkt-name-empty 22s infinite; }
.md-d-mkt__input--name .md-d-mkt__input-filled { animation: md-d-mkt-name-filled 22s infinite; }
@keyframes md-d-mkt-name-border {
  0%, 4%   { border-color: var(--border); }
  5%, 11%  { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(92, 82, 120, 0.10); }
  13%, 100%{ border-color: var(--border); box-shadow: none; }
}
@keyframes md-d-mkt-name-empty {
  0%, 7%   { opacity: 1; }
  8%, 100% { opacity: 0; }
}
@keyframes md-d-mkt-name-filled {
  0%, 7%   { opacity: 0; }
  8%, 11%  { opacity: 1; clip-path: inset(0 80% 0 0); }
  12%      { clip-path: inset(0 0 0 0); }
  100%     { opacity: 1; clip-path: inset(0 0 0 0); }
}

.md-d-mkt__input--subj { animation: md-d-mkt-subj-border 22s infinite; }
.md-d-mkt__input--subj .md-d-mkt__input-empty { animation: md-d-mkt-subj-empty 22s infinite; }
.md-d-mkt__input--subj .md-d-mkt__input-filled { animation: md-d-mkt-subj-filled 22s infinite; }
@keyframes md-d-mkt-subj-border {
  0%, 12%  { border-color: var(--border); }
  13%, 19% { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(92, 82, 120, 0.10); }
  21%, 100%{ border-color: var(--border); box-shadow: none; }
}
@keyframes md-d-mkt-subj-empty {
  0%, 14%  { opacity: 1; }
  16%, 100%{ opacity: 0; }
}
@keyframes md-d-mkt-subj-filled {
  0%, 14%  { opacity: 0; }
  16%, 19% { opacity: 1; clip-path: inset(0 80% 0 0); }
  21%      { clip-path: inset(0 0 0 0); }
  100%     { opacity: 1; clip-path: inset(0 0 0 0); }
}

.md-d-mkt__select-static {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text);
  min-height: 32px;
}
.md-d-mkt__select-static--muted span:first-child { color: var(--text-muted); }
.md-d-mkt__select-static svg { color: var(--text-muted); }
.md-d-mkt__field--full { width: 100%; }

.md-d-mkt__hint {
  margin: -2px 0 4px;
  font-size: 11px; color: var(--text-muted);
}

.md-d-mkt__section-label {
  font-size: 12px; font-weight: 700; color: var(--text);
  margin: 4px 0 -2px;
}

.md-d-mkt__chip-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 8px 10px;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.md-d-mkt__chip-label,
.md-d-mkt__chip-divider {
  font-size: 10px; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-right: 4px;
}
.md-d-mkt__chip-divider { margin-left: 8px; }
.md-d-mkt__chip {
  padding: 5px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px; font-weight: 500;
  color: var(--text);
  cursor: default;
}
.md-d-mkt__chip--ghost { color: var(--text-muted); border-style: dashed; }
.md-d-mkt__chip--xs { padding: 3px 9px; font-size: 10px; }
.md-d-mkt__chip--target { animation: md-d-mkt-tpl-target 22s infinite; }
@keyframes md-d-mkt-tpl-target {
  0%, 22%  { background: var(--surface); border-color: var(--border); color: var(--text); transform: scale(1); }
  24%, 28% { background: var(--brand-gradient-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; transform: scale(1.05); }
  30%, 100%{ background: var(--brand-gradient-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; transform: scale(1); }
}

.md-d-mkt__split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 4px;
}
.md-d-mkt__html label,
.md-d-mkt__pv-head span:first-child {
  display: block;
  font-size: 10px; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.md-d-mkt__html-area {
  position: relative;
  padding: 10px 12px;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: var(--text-muted);
  height: 130px;
  overflow: hidden;
}
.md-d-mkt__html-empty { animation: md-d-mkt-html-empty 22s infinite; }
.md-d-mkt__html-filled {
  position: absolute; inset: 10px 12px;
  display: block;
  white-space: pre;
  color: var(--text);
  opacity: 0;
  animation: md-d-mkt-html-filled 22s infinite;
}
.md-d-mkt__html-filled strong { color: var(--accent); }
@keyframes md-d-mkt-html-empty {
  0%, 24%  { opacity: 1; }
  26%, 100%{ opacity: 0; }
}
@keyframes md-d-mkt-html-filled {
  0%, 24%  { opacity: 0; transform: translateY(4px); }
  26%, 32% { opacity: 1; transform: translateY(0); }
  34%, 100%{ opacity: 1; transform: translateY(0); }
}

.md-d-mkt__pv-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.md-d-mkt__pv-toggle {
  display: inline-flex; gap: 0;
  font-size: 10px; font-weight: 600;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
  text-transform: none; letter-spacing: 0;
}
.md-d-mkt__pv-tog { padding: 3px 9px; border-radius: 4px; color: var(--text-muted); }
.md-d-mkt__pv-tog--active { background: var(--surface); color: var(--text); }

.md-d-mkt__pv-area {
  position: relative;
  padding: 12px;
  background: #fafaf9;
  border: 1px solid var(--border);
  border-radius: 6px;
  height: 130px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.md-d-mkt__pv-empty {
  font-size: 11px; color: var(--text-muted);
  animation: md-d-mkt-pv-empty 22s infinite;
}
.md-d-mkt__pv-filled {
  position: absolute; inset: 8px;
  opacity: 0;
  animation: md-d-mkt-pv-filled 22s infinite;
}
@keyframes md-d-mkt-pv-empty {
  0%, 24%  { opacity: 1; }
  26%, 100%{ opacity: 0; }
}
@keyframes md-d-mkt-pv-filled {
  0%, 24%  { opacity: 0; transform: translateY(6px); }
  28%, 32% { opacity: 1; transform: translateY(0); }
  34%, 100%{ opacity: 1; transform: translateY(0); }
}
.md-d-mkt__pv-mail {
  width: 100%; height: 100%;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.md-d-mkt__pv-mail-head {
  display: flex; justify-content: space-between;
  padding: 4px 10px;
  border-bottom: 1px solid var(--border-light);
  font-size: 9px;
}
.md-d-mkt__pv-mail-from { font-weight: 700; color: var(--text); }
.md-d-mkt__pv-mail-time { color: var(--text-muted); }
.md-d-mkt__pv-mail-body {
  padding: 8px 10px;
  text-align: center;
  flex: 1;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
}
.md-d-mkt__pv-mail-body h4 { margin: 0; font-size: 14px; color: var(--accent); font-weight: 700; }
.md-d-mkt__pv-mail-body p { margin: 0; font-size: 9px; color: var(--text); }
.md-d-mkt__pv-mail-cta {
  display: inline-block; padding: 5px 14px;
  background: var(--brand-gradient); color: #fff;
  border-radius: 4px; font-size: 9px; font-weight: 600;
  margin-top: 2px;
}

.md-d-mkt__create-btn { animation: md-d-mkt-create-pulse 22s infinite; }
@keyframes md-d-mkt-create-pulse {
  0%, 32%  { box-shadow: 0 0 0 0 rgba(92, 82, 120, 0); }
  34%      { box-shadow: 0 0 0 5px rgba(92, 82, 120, 0.18); }
  36%, 100%{ box-shadow: 0 0 0 0 rgba(92, 82, 120, 0); }
}

.md-d-mkt__toast {
  position: absolute;
  top: 14px; left: 50%; transform: translate(-50%, -16px);
  display: flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  background: var(--brand-gradient);
  color: #fff;
  border-radius: 8px;
  font-size: 12px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(61, 107, 133, 0.30);
  z-index: 30;
  opacity: 0;
  pointer-events: none;
}
.md-d-mkt__toast--cmp { animation: md-d-mkt-toast-cmp 22s infinite; }
@keyframes md-d-mkt-toast-cmp {
  0%, 38%  { opacity: 0; transform: translate(-50%, -16px); }
  40%, 44% { opacity: 1; transform: translate(-50%, 0); }
  46%, 100%{ opacity: 0; transform: translate(-50%, -16px); }
}

/* ===== Phase 2 — Social post ===== */
.md-d-mkt__soc-tabs {
  display: flex; gap: 8px;
  padding: 14px 22px 10px;
  flex-shrink: 0;
}
.md-d-mkt__soc-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px; font-weight: 500;
  color: var(--text);
  cursor: default;
}
.md-d-mkt__soc-tab svg { color: var(--text-muted); }
.md-d-mkt__soc-tab--fb { animation: md-d-mkt-tab-fb 22s infinite; }
.md-d-mkt__soc-tab--fb svg { animation: md-d-mkt-tab-fb-svg 22s infinite; }
.md-d-mkt__soc-tab--ig { animation: md-d-mkt-tab-ig 22s infinite; }
.md-d-mkt__soc-tab--ig svg { animation: md-d-mkt-tab-ig-svg 22s infinite; }
@keyframes md-d-mkt-tab-fb {
  0%, 51%  { border-color: #1877F2; box-shadow: 0 0 0 2px rgba(24, 119, 242, 0.18); color: #1877F2; font-weight: 600; }
  53%, 100%{ border-color: var(--border); box-shadow: none; color: var(--text); font-weight: 500; }
}
@keyframes md-d-mkt-tab-fb-svg {
  0%, 51%  { color: #1877F2; }
  53%, 100%{ color: var(--text-muted); }
}
@keyframes md-d-mkt-tab-ig {
  0%, 51%  { border-color: var(--border); box-shadow: none; color: var(--text); font-weight: 500; }
  53%, 100%{ border-color: #E1306C; box-shadow: 0 0 0 2px rgba(225, 48, 108, 0.18); color: #E1306C; font-weight: 600; }
}
@keyframes md-d-mkt-tab-ig-svg {
  0%, 51%  { color: var(--text-muted); }
  53%, 100%{ color: #E1306C; }
}

.md-d-mkt__soc-grid {
  flex: 1; min-height: 0;
  padding: 0 22px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  overflow: hidden;
}
.md-d-mkt__soc-left {
  display: flex; flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

/* Upload zone — empty placeholder + filled (with photo + filename) */
.md-d-mkt__soc-upload {
  position: relative;
  padding: 14px;
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  background: var(--surface-subtle);
  font-size: 12px; color: var(--text);
  flex-shrink: 0;
  min-height: 92px;
  animation: md-d-mkt-upload-border 22s infinite;
}
@keyframes md-d-mkt-upload-border {
  0%, 56%  { border-style: dashed; border-color: var(--border); background: var(--surface-subtle); }
  58%, 100%{ border-style: solid; border-color: var(--accent); background: var(--surface); }
}
.md-d-mkt__soc-upload-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  position: absolute; inset: 0;
  animation: md-d-mkt-upload-empty 22s infinite;
}
.md-d-mkt__soc-upload-empty svg { color: var(--text-muted); }
.md-d-mkt__soc-upload-hint { font-size: 10px; color: var(--text-muted); }
.md-d-mkt__soc-upload-filled {
  position: absolute; inset: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  opacity: 0;
  animation: md-d-mkt-upload-filled 22s infinite;
}
@keyframes md-d-mkt-upload-empty {
  0%, 56%  { opacity: 1; }
  58%, 100%{ opacity: 0; }
}
@keyframes md-d-mkt-upload-filled {
  0%, 56%  { opacity: 0; transform: scale(0.96); }
  58%, 60% { opacity: 1; transform: scale(1.02); }
  62%, 100%{ opacity: 1; transform: scale(1); }
}

/* Promo photo — shared between upload zone + preview */
.md-d-mkt__soc-photo {
  position: relative;
  width: 110px; height: 70px;
  border-radius: 8px;
  background: linear-gradient(135deg, #5C5278 0%, #3D6B85 50%, #8B3A4F 100%);
  color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(92, 82, 120, 0.25);
}
.md-d-mkt__soc-photo::before {
  content: '';
  position: absolute; top: -25%; right: -15%;
  width: 80px; height: 80px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
}
.md-d-mkt__soc-photo::after {
  content: '';
  position: absolute; bottom: -30%; left: -10%;
  width: 60px; height: 60px;
  background: rgba(255,255,255,0.06);
  border-radius: 50%;
}
.md-d-mkt__soc-photo-tag {
  position: relative; z-index: 1;
  font-size: 8px; font-weight: 700;
  letter-spacing: 0.18em;
  opacity: 0.85;
  margin-bottom: -2px;
}
.md-d-mkt__soc-photo-pct {
  position: relative; z-index: 1;
  font-size: 26px; font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.md-d-mkt__soc-photo-sub {
  position: relative; z-index: 1;
  font-size: 8px; font-weight: 500;
  opacity: 0.85;
  margin-top: 1px;
}

.md-d-mkt__soc-upload-meta {
  display: flex; flex-direction: column;
  gap: 2px;
  font-size: 11px;
  flex: 1;
}
.md-d-mkt__soc-upload-fname {
  font-weight: 600; color: var(--text);
  font-family: var(--font-mono, monospace);
}
.md-d-mkt__soc-upload-size { font-size: 10px; color: var(--text-muted); }
.md-d-mkt__soc-upload-x {
  position: absolute; top: 8px; right: 10px;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  color: var(--text-muted);
  background: var(--surface-subtle);
  border-radius: 50%;
  cursor: default;
}

/* Textarea — typing animation shifted later (after photo upload) */
.md-d-mkt__soc-text {
  position: relative;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  min-height: 70px;
  animation: md-d-mkt-soc-text-border 22s infinite;
}
@keyframes md-d-mkt-soc-text-border {
  0%, 66%  { border-color: var(--border); box-shadow: none; }
  68%, 80% { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(92, 82, 120, 0.10); }
  82%, 100%{ border-color: var(--border); box-shadow: none; }
}
.md-d-mkt__soc-text-empty {
  color: var(--text-muted);
  animation: md-d-mkt-soc-text-empty 22s infinite;
}
.md-d-mkt__soc-text-filled {
  position: absolute; inset: 10px 12px;
  display: block;
  white-space: pre-wrap;
  color: var(--text);
  font-weight: 400;
  opacity: 0;
  animation: md-d-mkt-soc-text-filled 22s infinite;
}
.md-d-mkt__soc-text-filled strong { font-weight: 700; color: var(--accent); }
.md-d-mkt__soc-text-cursor {
  position: absolute; left: 12px; top: 11px;
  color: var(--accent); font-weight: 700;
  opacity: 0;
  animation: md-d-mkt-soc-text-cursor 22s infinite;
}
@keyframes md-d-mkt-soc-text-empty {
  0%, 66%  { opacity: 1; }
  68%, 100%{ opacity: 0; }
}
@keyframes md-d-mkt-soc-text-filled {
  0%, 68%  { opacity: 0; clip-path: inset(0 100% 0 0); }
  70%, 80% { opacity: 1; clip-path: inset(0 0 0 0); }
  82%, 100%{ opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes md-d-mkt-soc-text-cursor {
  0%, 66%  { opacity: 0; }
  68%, 80% { opacity: 1; }
  82%, 100%{ opacity: 0; }
}

.md-d-mkt__soc-emojis {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 0;
  font-size: 14px;
  flex-shrink: 0;
}
.md-d-mkt__soc-emojis span { line-height: 1; }
.md-d-mkt__soc-counter {
  position: relative;
  margin-left: auto;
  font-size: 10px; color: var(--text-muted);
  font-family: var(--font-mono, monospace);
  min-width: 80px;
  text-align: right;
}
.md-d-mkt__soc-counter-empty { animation: md-d-mkt-soc-cnt-empty 22s infinite; }
.md-d-mkt__soc-counter-filled {
  position: absolute; right: 0; top: 0;
  color: var(--success); font-weight: 700;
  opacity: 0;
  animation: md-d-mkt-soc-cnt-filled 22s infinite;
}
@keyframes md-d-mkt-soc-cnt-empty {
  0%, 78%  { opacity: 1; }
  80%, 100%{ opacity: 0; }
}
@keyframes md-d-mkt-soc-cnt-filled {
  0%, 78%  { opacity: 0; }
  80%, 100%{ opacity: 1; }
}

.md-d-mkt__soc-htag-label {
  font-size: 10px; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: 4px 0 -2px;
}
.md-d-mkt__soc-htags {
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text);
}

/* Right side: preview card */
.md-d-mkt__soc-right { display: flex; flex-direction: column; gap: 6px; }
.md-d-mkt__soc-pv-label {
  font-size: 10px; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.md-d-mkt__soc-pv-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.md-d-mkt__soc-pv-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
}
.md-d-mkt__soc-pv-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  animation: md-d-mkt-soc-avatar 22s infinite;
}
@keyframes md-d-mkt-soc-avatar {
  0%, 51%  { background: var(--brand-gradient); }
  53%, 100%{ background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
}
.md-d-mkt__soc-pv-name { font-size: 12px; font-weight: 700; color: var(--text); }
.md-d-mkt__soc-pv-sub { font-size: 10px; color: var(--text-muted); }

.md-d-mkt__soc-pv-body {
  position: relative;
  padding: 0 12px 10px;
  min-height: 150px;
}
.md-d-mkt__soc-pv-empty {
  display: block;
  font-size: 11px; color: var(--text-muted);
  font-style: italic;
  padding: 12px 0;
  animation: md-d-mkt-soc-pv-empty 22s infinite;
}
@keyframes md-d-mkt-soc-pv-empty {
  0%, 56%  { opacity: 1; }
  58%, 100%{ opacity: 0; }
}

/* Preview photo — appears at 60%, BEFORE text typing */
.md-d-mkt__soc-pv-photo {
  width: 100%; height: 90px;
  border-radius: 6px;
  background: linear-gradient(135deg, #5C5278 0%, #3D6B85 50%, #8B3A4F 100%);
  color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
  margin-top: 4px;
  opacity: 0;
  box-shadow: 0 2px 8px rgba(92, 82, 120, 0.25);
  animation: md-d-mkt-soc-pv-photo 22s infinite;
}
.md-d-mkt__soc-pv-photo::before {
  content: '';
  position: absolute; top: -25%; right: -15%;
  width: 100px; height: 100px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
}
.md-d-mkt__soc-pv-photo::after {
  content: '';
  position: absolute; bottom: -30%; left: -10%;
  width: 80px; height: 80px;
  background: rgba(255,255,255,0.06);
  border-radius: 50%;
}
.md-d-mkt__soc-pv-photo .md-d-mkt__soc-photo-tag,
.md-d-mkt__soc-pv-photo .md-d-mkt__soc-photo-pct,
.md-d-mkt__soc-pv-photo .md-d-mkt__soc-photo-sub { z-index: 1; }
.md-d-mkt__soc-pv-photo .md-d-mkt__soc-photo-pct { font-size: 32px; }
@keyframes md-d-mkt-soc-pv-photo {
  0%, 58%  { opacity: 0; transform: scale(0.94); }
  60%, 64% { opacity: 1; transform: scale(1.03); }
  66%, 100%{ opacity: 1; transform: scale(1); }
}

/* Preview text + tags — appear at 72%, AFTER photo + during typing */
.md-d-mkt__soc-pv-text {
  margin: 6px 0 0;
  font-size: 11px; color: var(--text); line-height: 1.5;
  opacity: 0;
  animation: md-d-mkt-soc-pv-text 22s infinite;
}
.md-d-mkt__soc-pv-text strong { font-weight: 700; color: var(--accent); }
@keyframes md-d-mkt-soc-pv-text {
  0%, 70%  { opacity: 0; transform: translateY(4px); }
  72%, 80% { opacity: 1; transform: translateY(0); }
  82%, 100%{ opacity: 1; transform: translateY(0); }
}

.md-d-mkt__soc-pv-tags {
  margin-top: 4px;
  font-size: 10px;
  color: #1877F2;
  opacity: 0;
  animation: md-d-mkt-soc-pv-tags 22s infinite;
}
@keyframes md-d-mkt-soc-pv-tags {
  0%, 76%  { opacity: 0; }
  78%, 100%{ opacity: 1; }
}

.md-d-mkt__soc-pv-actions {
  display: flex; gap: 12px;
  padding: 8px 12px;
  border-top: 1px solid var(--border-light);
  font-size: 10px; color: var(--text-muted);
}
.md-d-mkt__soc-pv-actions span {
  display: inline-flex; align-items: center; gap: 4px;
}
.md-d-mkt__soc-pv-actions svg { color: var(--text-muted); }

.md-d-mkt__publish-btn { animation: md-d-mkt-publish-pulse 22s infinite; }
@keyframes md-d-mkt-publish-pulse {
  0%, 82%  { box-shadow: 0 0 0 0 rgba(92, 82, 120, 0); }
  84%      { box-shadow: 0 0 0 5px rgba(92, 82, 120, 0.18); }
  86%, 100%{ box-shadow: 0 0 0 0 rgba(92, 82, 120, 0); }
}

.md-d-mkt__toast--soc { animation: md-d-mkt-toast-soc 22s infinite; }
@keyframes md-d-mkt-toast-soc {
  0%, 88%  { opacity: 0; transform: translate(-50%, -16px); }
  90%, 95% { opacity: 1; transform: translate(-50%, 0); }
  97%, 100%{ opacity: 0; transform: translate(-50%, -16px); }
}

/* Cursor + click choreography (22s, 2 phases, 4 clicks in phase 2):
     Phase 1 — Кампанія (0–44%):
       8%   click "Назва" input → types
       16%  click "Тема" input → types
       26%  click "Знижка / Промо" template chip
       35%  click "Створити" → toast
     Phase 2 — Соц-пост (44–96%):
       52%  click "Instagram" tab → tab swap
       58%  click drag-drop zone → photo appears in upload + preview
       66%  click textarea → text typing
       84%  click "Опублікувати" → toast
*/
.md-d-mkt__cursor {
  animation: md-d-mkt-cursor 22s infinite;
  animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
@keyframes md-d-mkt-cursor {
  0%   { left: 50%; top: 96%; }
  6%   { left: 22%; top: 15%; }   /* Назва input */
  8%   { left: 22%; top: 15%; }   /* click */
  14%  { left: 22%; top: 25%; }   /* Тема — straight down, same column */
  16%  { left: 22%; top: 25%; }   /* click */
  24%  { left: 38%; top: 51%; }   /* template Знижка/Промо */
  26%  { left: 38%; top: 51%; }   /* click */
  33%  { left: 94%; top: 95%; }   /* Створити */
  35%  { left: 94%; top: 95%; }   /* click */
  44%  { left: 60%; top: 60%; }   /* phase swap drift */
  50%  { left: 18%; top: 7%; }    /* Instagram tab */
  52%  { left: 18%; top: 7%; }    /* click */
  56%  { left: 28%; top: 28%; }   /* drag-drop zone */
  58%  { left: 28%; top: 28%; }   /* click upload */
  64%  { left: 26%; top: 50%; }   /* textarea */
  66%  { left: 26%; top: 50%; }   /* click */
  82%  { left: 92%; top: 95%; }   /* Опублікувати */
  84%  { left: 92%; top: 95%; }   /* click */
  92%  { left: 78%; top: 70%; }   /* idle */
  100% { left: 78%; top: 70%; }
}
.md-d-mkt__click { animation: md-d-mkt-click 22s infinite; }
@keyframes md-d-mkt-click {
  0%, 6%    { opacity: 0; transform: scale(0.4); left: calc(22% - 14px); top: calc(15% - 14px); }
  8%        { opacity: 1; transform: scale(1); }
  10%, 13%  { opacity: 0; transform: scale(1.6); }
  14%       { opacity: 0; transform: scale(0.4); left: calc(22% - 14px); top: calc(25% - 14px); }
  16%       { opacity: 1; transform: scale(1); }
  19%, 23%  { opacity: 0; transform: scale(1.6); }
  24%       { opacity: 0; transform: scale(0.4); left: calc(38% - 14px); top: calc(51% - 14px); }
  26%       { opacity: 1; transform: scale(1); }
  29%, 32%  { opacity: 0; transform: scale(1.6); }
  33%       { opacity: 0; transform: scale(0.4); left: calc(94% - 14px); top: calc(95% - 14px); }
  35%       { opacity: 1; transform: scale(1); }
  38%, 49%  { opacity: 0; transform: scale(1.6); }
  50%       { opacity: 0; transform: scale(0.4); left: calc(18% - 14px); top: calc(7% - 14px); }
  52%       { opacity: 1; transform: scale(1); }
  55%       { opacity: 0; transform: scale(1.6); }
  56%       { opacity: 0; transform: scale(0.4); left: calc(28% - 14px); top: calc(28% - 14px); }
  58%       { opacity: 1; transform: scale(1); }
  61%       { opacity: 0; transform: scale(1.6); }
  64%       { opacity: 0; transform: scale(0.4); left: calc(26% - 14px); top: calc(50% - 14px); }
  66%       { opacity: 1; transform: scale(1); }
  69%, 81%  { opacity: 0; transform: scale(1.6); }
  82%       { opacity: 0; transform: scale(0.4); left: calc(92% - 14px); top: calc(95% - 14px); }
  84%       { opacity: 1; transform: scale(1); }
  87%, 100% { opacity: 0; transform: scale(1.6); }
}

@media (max-width: 880px) {
  .md-d-mkt__split { grid-template-columns: 1fr; }
  .md-d-mkt__soc-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Crisp-feel additions: grain texture, integrations strip, bridge
   ============================================================ */

/* B. Background grain — subtle premium texture */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}
body > * { position: relative; z-index: 1; }

/* A. Integrations strip — logo trust band */
.integrations-strip {
  padding: 56px 0 64px;
  background: var(--surface-subtle);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}
.integrations-strip__label {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 28px;
}
.integrations-strip__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 36px 48px;
  max-width: 1100px;
  margin: 0 auto;
}
.integ-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: -0.005em;
  transition: color 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.integ-logo__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.integ-logo__chip img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}
.integ-logo__chip--glyph { color: var(--text-muted); }
.integ-logo__chip--glyph svg { width: 20px; height: 20px; display: block; }
.integ-logo:hover {
  color: var(--text);
  transform: translateY(-1px);
}
.integ-logo:hover .integ-logo__chip {
  border-color: var(--success);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
@media (max-width: 768px) {
  .integrations-strip { padding: 40px 0 48px; }
  .integrations-strip__row { gap: 20px 26px; }
  .integ-logo { font-size: 13px; }
  .integ-logo__chip { width: 32px; height: 32px; border-radius: 9px; }
  .integ-logo__chip img { width: 19px; height: 19px; }
  .integ-logo__chip--glyph svg { width: 17px; height: 17px; }
}

/* Integrations — categorized section */
.integ-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1180px;
  margin: 0 auto;
}
.integ-cat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.integ-cat:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.integ-cat__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.integ-cat__icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(12, 123, 92, .12);
  color: var(--success);
  display: grid; place-items: center;
}
.integ-cat__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--text);
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.2;
}
.integ-cat__logos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.integ-logo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  min-width: 60px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.integ-logo-chip:hover {
  border-color: var(--success);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.integ-logo-chip img {
  max-height: 24px;
  max-width: 92px;
  width: auto;
  object-fit: contain;
  display: block;
}
@media (max-width: 1024px) {
  .integ-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .integ-grid { grid-template-columns: 1fr; }
}

/* C. Bridge — gradient color block between hero and showcase */
.bridge {
  background: var(--brand-gradient);
  padding: 96px 0;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.bridge::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 80% at 15% 25%, rgba(255, 255, 255, 0.10), transparent 65%),
    radial-gradient(50% 70% at 85% 80%, rgba(0, 0, 0, 0.12), transparent 60%);
  pointer-events: none;
}
.bridge__inner {
  position: relative;
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
}
.bridge__headline {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin-bottom: 56px;
  color: #fff;
  text-wrap: balance;
}
.bridge__stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.bridge__stat {
  flex: 1;
  min-width: 200px;
  max-width: 320px;
  text-align: center;
}
.bridge__num {
  font-size: clamp(3.5rem, 6vw, 5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 12px;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.15);
}
.bridge__lbl {
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
.bridge__divider {
  width: 1px;
  height: 80px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .bridge { padding: 64px 0; }
  .bridge__headline { margin-bottom: 40px; }
  .bridge__stats { flex-direction: column; gap: 32px; }
  .bridge__divider { width: 60px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); }
  .bridge__stat { min-width: 0; }
}

/* ============================================================
   CHAT WIDGET — Crisp-style: trigger + panel with 2 tabs
   ============================================================ */

.cw-trigger {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9000;
  width: 60px;
  height: 60px;
  border-radius: 999px;
  border: 0;
  background: var(--brand-gradient);
  color: #fff;
  cursor: pointer;
  box-shadow:
    0 10px 28px -4px rgba(61, 107, 133, 0.45),
    0 4px 12px rgba(139, 58, 79, 0.18);
  display: grid;
  place-items: center;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.cw-trigger:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 16px 36px -6px rgba(61, 107, 133, 0.55),
    0 6px 16px rgba(139, 58, 79, 0.22);
}
.cw-trigger__icon {
  position: absolute;
  width: 26px;
  height: 26px;
  transition: opacity .2s var(--ease-out), transform .25s var(--ease-out);
}
.cw-trigger__icon--close { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.cw-trigger.is-open .cw-trigger__icon--chat { opacity: 0; transform: rotate(90deg) scale(0.6); }
.cw-trigger.is-open .cw-trigger__icon--close { opacity: 1; transform: rotate(0) scale(1); }

.cw-panel {
  position: fixed;
  right: 24px;
  bottom: 100px;
  z-index: 8999;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 600px;
  max-height: calc(100vh - 140px);
  background: var(--surface);
  border-radius: 18px;
  box-shadow:
    0 24px 60px -12px rgba(14, 30, 44, 0.28),
    0 8px 24px rgba(92, 82, 120, 0.14);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  pointer-events: none;
  transition: opacity .25s var(--ease-out), transform .3s var(--ease-out);
}
.cw-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.cw-header {
  background: var(--brand-gradient);
  color: #fff;
  padding: 18px 18px 20px;
  position: relative;
  overflow: hidden;
  cursor: move;
}
.cw-panel.is-dragging { transition: none; }
.cw-panel.is-dragging .cw-header { cursor: grabbing; }

/* Ручки ресайзу — прозорі смуги по краях і квадрати в кутах панелі */
.cw-rz { position: absolute; z-index: 20; }
.cw-rz--n  { top: 0;    left: 12px; right: 12px; height: 5px; cursor: ns-resize; }
.cw-rz--s  { bottom: 0; left: 12px; right: 12px; height: 5px; cursor: ns-resize; }
.cw-rz--e  { right: 0;  top: 12px; bottom: 12px; width: 5px;  cursor: ew-resize; }
.cw-rz--w  { left: 0;   top: 12px; bottom: 12px; width: 5px;  cursor: ew-resize; }
.cw-rz--nw { top: 0;    left: 0;  width: 14px; height: 14px;  cursor: nwse-resize; }
.cw-rz--se { bottom: 0; right: 0; width: 14px; height: 14px;  cursor: nwse-resize; }
.cw-rz--ne { top: 0;    right: 0; width: 14px; height: 14px;  cursor: nesw-resize; }
.cw-rz--sw { bottom: 0; left: 0;  width: 14px; height: 14px;  cursor: nesw-resize; }
@media (max-width: 519px) { .cw-rz { display: none; } }
.cw-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 80% at 20% 20%, rgba(255, 255, 255, 0.12), transparent 60%),
    radial-gradient(50% 70% at 90% 90%, rgba(0, 0, 0, 0.10), transparent 65%);
  pointer-events: none;
}
.cw-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  position: relative;
}
.cw-header__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.16);
  padding: 3px 8px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.cw-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #4ADE80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25);
}
.cw-header__title {
  position: relative;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
}
.cw-header__sub {
  position: relative;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
  margin: 0;
}

.cw-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--border-light);
  background: var(--surface);
}
.cw-tab {
  background: transparent;
  border: 0;
  padding: 14px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.cw-tab svg { width: 16px; height: 16px; }
.cw-tab:hover { color: var(--text); }
.cw-tab.is-active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.cw-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface-subtle);
}
.cw-pane[hidden] { display: none; }

/* Messages pane */
.cw-conv {
  flex: 1;
  padding: 18px 16px;
  overflow-y: auto;
}
.cw-msg {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.cw-msg__avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--brand-gradient);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.cw-msg__body { min-width: 0; flex: 1; }
.cw-bubble {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(14, 30, 44, 0.04);
}
.cw-msg__meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 5px;
  padding-left: 4px;
}
.cw-msg--out { flex-direction: row-reverse; }
.cw-msg--out .cw-msg__body {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.cw-msg--out .cw-bubble {
  background: var(--brand-gradient);
  border: 0;
  color: #fff;
  max-width: 88%;
}
.cw-msg--out .cw-msg__meta { padding-left: 0; padding-right: 4px; text-align: right; }
.cw-compose {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--surface);
  border-top: 1px solid var(--border-light);
}
.cw-compose input {
  flex: 1;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--text);
  outline: none;
  transition: border-color .2s;
}
.cw-compose input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--primary-light);
}
.cw-send {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 0;
  background: var(--brand-gradient);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform .2s var(--ease-out);
}
.cw-send svg { width: 16px; height: 16px; }
.cw-send:hover { transform: scale(1.06); }

/* KB pane */
.cw-kb-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border-light);
}
.cw-kb-back {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.cw-kb-back:hover { background: var(--surface-subtle); color: var(--text); }
.cw-kb-back svg { width: 16px; height: 16px; }
.cw-kb-back[hidden] { display: none; }
.cw-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-subtle);
  border-radius: 10px;
  flex: 1;
  min-width: 0;
}
.cw-search svg {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.cw-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
  color: var(--text);
}
.cw-kb {
  flex: 1;
  overflow-y: auto;
  background: var(--surface);
}
.cw-kb-list {
  list-style: none;
  padding: 4px 0;
  margin: 0;
}
.cw-kb-list li { margin: 0; padding: 0; }
.cw-kb-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  color: var(--text);
  font-family: inherit;
  transition: background .15s;
}
.cw-kb-row:hover { background: var(--surface-subtle); }
.cw-kb-list li:last-child .cw-kb-row { border-bottom: 0; }
.cw-kb-row__icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--surface-subtle);
  color: var(--text-secondary, var(--text));
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.cw-kb-row__icon svg { width: 20px; height: 20px; }
.cw-kb-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cw-kb-row__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}
.cw-kb-row__meta {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cw-kb-row__chev {
  flex-shrink: 0;
  color: var(--text-muted);
}
.cw-kb-row--art .cw-kb-row__body { gap: 3px; }
.cw-kb-cat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border-light);
}
.cw-kb-cat-head__icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--surface-subtle);
  display: grid;
  place-items: center;
  color: var(--text-secondary, var(--text));
  flex-shrink: 0;
}
.cw-kb-cat-head__icon svg { width: 18px; height: 18px; }
.cw-kb-cat-head__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.cw-kb-article {
  padding: 16px 18px 22px;
}
.cw-kb-article__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 12px;
  color: var(--text);
}
.cw-kb-article__content {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text);
}
.cw-kb-article__content p { margin: 0 0 10px; }
.cw-kb-article__content h2,
.cw-kb-article__content h3 {
  font-size: 14.5px;
  font-weight: 700;
  margin: 16px 0 8px;
  line-height: 1.3;
}
.cw-kb-article__content ul,
.cw-kb-article__content ol { margin: 0 0 10px; padding-left: 20px; }
.cw-kb-article__content li { margin-bottom: 4px; }
.cw-kb-article__content a { color: var(--accent); text-decoration: underline; }
/* Same article markup as /help and the in-CRM panel — see help-public.css */
.cw-kb-article__content .kb-callout {
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 8px;
  border-left: 3px solid var(--primary);
  background: var(--primary-light);
  font-size: 12.5px;
}
.cw-kb-article__content .kb-callout.tip {
  border-left-color: var(--success);
  background: var(--success-light);
}
.cw-kb-article__content .kb-callout.warn {
  border-left-color: var(--warning);
  background: var(--warning-light);
}
.cw-kb-article__content .kb-callout strong { display: block; margin-bottom: 3px; }
.cw-kb-article__content .kb-callout p:last-child { margin-bottom: 0; }
.cw-kb-article__content .kb-steps {
  counter-reset: kb-step;
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
}
.cw-kb-article__content .kb-steps li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 8px;
}
.cw-kb-article__content .kb-steps li::before {
  counter-increment: kb-step;
  content: counter(kb-step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cw-kb-article__content code {
  background: var(--surface-subtle);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12.5px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.cw-kb-state {
  padding: 28px 18px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
.cw-kb-state--err { color: var(--text); }

@media (max-width: 519px) {
  .cw-trigger { right: 16px; bottom: 16px; width: 54px; height: 54px; }
  .cw-panel {
    top: 10px;
    left: 8px;
    right: 8px;
    bottom: auto;
    width: auto;
    max-width: none;
    height: calc(100vh - 96px);
    height: calc(100dvh - 96px);   /* leaves room for the FAB; JS refines on keyboard open */
    max-height: none;
    border-radius: 16px;
  }
  .cw-header { cursor: default; padding: 18px 18px 20px; }
}

/* ============================================================
   REASON SPOTLIGHT — унікальна перевага: причина звернення
   ============================================================ */

.reason-spotlight {
  background: var(--surface-subtle);
  position: relative;
  overflow: hidden;
}
.reason-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 50% at 18% 22%, rgba(61, 107, 133, 0.10), transparent 65%),
    radial-gradient(45% 55% at 88% 78%, rgba(139, 58, 79, 0.10), transparent 65%);
  pointer-events: none;
}
.reason-spotlight .container { position: relative; }
.reason-spotlight .section-head { max-width: 880px; margin: 0 auto 64px; text-align: center; }
.reason-spotlight h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin-bottom: 22px;
  text-wrap: balance;
}
.reason-spotlight h2 .grad {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.reason-spotlight .section-lead {
  font-size: 1.14rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.reason-spotlight .section-lead strong { color: var(--text); font-weight: 700; }

.eyebrow--gradient {
  display: inline-block;
  padding: 6px 14px;
  background: var(--brand-gradient);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
  -webkit-text-fill-color: #fff;
  box-shadow: 0 6px 14px -4px rgba(61, 107, 133, 0.35);
}

.reason-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
}

/* LEFT — text breakdown */
.reason-block + .reason-block { margin-top: 36px; }
.reason-block__title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 18px;
}
.reason-where {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  margin: 0;
}
.reason-where li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.reason-where li svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: #fff;
  background: var(--brand-gradient);
  padding: 7px;
  box-sizing: content-box;
  border-radius: 10px;
  margin-top: -2px;
  box-shadow: 0 6px 14px -4px rgba(61, 107, 133, 0.3);
}
.reason-where li strong { color: var(--text); font-weight: 700; }

.reason-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  margin: 0;
}
.reason-bullets li {
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--text-secondary);
  padding-left: 28px;
  position: relative;
}
.reason-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 16px;
  height: 16px;
  background: var(--success);
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(46, 93, 63, 0.18);
}
.reason-bullets li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  width: 8px;
  height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}
.reason-bullets li strong { color: var(--text); font-weight: 700; }

/* RIGHT — analytics chart mockup */
.rchart {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px 28px 24px;
  box-shadow:
    0 30px 60px -16px rgba(14, 30, 44, 0.18),
    0 8px 20px -4px rgba(92, 82, 120, 0.10);
  position: relative;
}
.rchart::before {
  content: "";
  position: absolute;
  inset: -10% -8%;
  z-index: -1;
  background:
    radial-gradient(45% 55% at 25% 30%, rgba(61, 107, 133, 0.16), transparent 70%),
    radial-gradient(50% 55% at 80% 75%, rgba(139, 58, 79, 0.14), transparent 70%);
  filter: blur(22px);
  pointer-events: none;
}
.rchart__head {
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 16px;
  margin-bottom: 22px;
}
.rchart__title {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 4px;
}
.rchart__sub {
  font-size: 0.84rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-feature-settings: 'tnum';
}
.rchart__bars {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  margin: 0;
}
.rchart__bars li {
  display: grid;
  grid-template-columns: 1fr 1.6fr auto;
  align-items: center;
  gap: 14px;
  font-size: 0.92rem;
}
.rchart__label {
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rchart__track {
  background: var(--surface-subtle);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
  position: relative;
}
.rchart__bar {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: var(--brand-gradient);
  border-radius: 999px;
  animation: rchartFill 1.4s var(--ease-out) both;
  transform-origin: left;
}
@keyframes rchartFill {
  from { width: 0%; opacity: 0.4; }
  to   { width: var(--w); opacity: 1; }
}
.rchart__bars li:nth-child(1) .rchart__bar { animation-delay: 0.05s; }
.rchart__bars li:nth-child(2) .rchart__bar { animation-delay: 0.20s; }
.rchart__bars li:nth-child(3) .rchart__bar { animation-delay: 0.35s; }
.rchart__bars li:nth-child(4) .rchart__bar { animation-delay: 0.50s; }
.rchart__bars li:nth-child(5) .rchart__bar { animation-delay: 0.65s; }
.rchart__pct {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text);
  text-align: right;
  min-width: 44px;
  font-feature-settings: 'tnum';
}
.rchart__footer {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}
.rchart__hint {
  display: block;
  background: var(--brand-gradient-soft);
  border: 1px solid rgba(92, 82, 120, 0.18);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text);
}

@media (max-width: 980px) {
  .reason-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .reason-spotlight .section-head { margin-bottom: 48px; }
}
@media (max-width: 560px) {
  .rchart { padding: 22px 18px 18px; }
  .rchart__bars li {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .rchart__track { width: 100%; }
  .rchart__pct { text-align: left; }
  .reason-where li { font-size: 0.96rem; gap: 12px; }
  .reason-bullets li { font-size: 0.96rem; }
}

/* ===== Language switcher (i18n) ===== */
.nav__lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-right: 8px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.nav__lang-opt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 5px 8px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.nav__lang-opt:hover { color: var(--text); }
.nav__lang-opt.is-active { color: #fff; background: var(--primary); }

/* ==================== CTA BAND + BRIDGE CTA — повторні точки дії ==================== */
.cta-band { padding: var(--sp-2xl) 0; text-align: center; }
.cta-band__line { font-size: 1.05rem; color: var(--text-secondary); margin: 0 0 var(--sp-lg); }
.cta-band__btns { display: flex; justify-content: center; align-items: center; gap: var(--sp-md); flex-wrap: wrap; }
.bridge__cta { margin-top: var(--sp-2xl); text-align: center; }
/* fixed white on the gradient band — must not flip with theme */
.btn--inverse { background: #FFFFFF; color: #000000; border-color: transparent; }
.btn--inverse:hover { background: #FFFFFF; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }

/* ───────────── Integrations page (/integrations) ───────────── */
.intg-hero { padding-top: 64px; padding-bottom: 8px; text-align: center; }
.intg-eyebrow {
  display: inline-block; font-size: .82rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--primary);
  padding: 6px 14px; border-radius: 999px;
  background: var(--primary-light); border: 1px solid var(--border);
  margin-bottom: 18px;
}
.intg-hero__title { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 800; line-height: 1.1; margin: 0 0 14px; color: var(--text); }
.intg-hero__sub { max-width: 620px; margin: 0 auto; color: var(--text-secondary); font-size: 1.08rem; line-height: 1.55; }

.intg-section { padding-top: 36px; }
.intg-grid {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  max-width: 980px; margin: 0 auto; align-items: start;
}
.intg-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px; padding: 28px 28px 30px;
  box-shadow: var(--sh-sm);
}
.intg-card--featured { border-color: var(--border-strong); box-shadow: var(--sh-xl); }
.intg-card__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.intg-brand { display: inline-flex; align-items: center; }
.intg-brand img { height: 30px; width: auto; max-width: 180px; object-fit: contain; display: block; }
.intg-soon-tag { color: var(--text-muted); font-size: .95rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.intg-badge {
  font-size: .9rem; font-weight: 800; white-space: nowrap;
  color: #0E2A1B; background: linear-gradient(135deg, #5BE584, #2FD477);
  padding: 7px 14px; border-radius: 999px;
}
.intg-card__title { font-size: 1.35rem; font-weight: 700; margin: 0 0 10px; color: var(--text); }
.intg-card__desc { color: var(--text-secondary); line-height: 1.55; margin: 0 0 18px; }
.intg-feats { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 10px; }
.intg-feats li { display: flex; align-items: flex-start; gap: 10px; color: var(--text); font-size: .98rem; line-height: 1.4; }
.intg-feats svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--success); }

.intg-promo {
  background: var(--brand-gradient-soft); border: 1px dashed var(--border-strong);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 20px;
}
.intg-promo__label { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-secondary); margin-bottom: 8px; }
.intg-promo__code {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  font-family: 'JetBrains Mono', monospace; font-size: 1.1rem; font-weight: 600; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 10px; padding: 10px 16px; transition: background .2s, border-color .2s;
}
.intg-promo__code:hover { border-color: var(--primary); }
.intg-promo__code.is-copied { border-color: var(--success); color: var(--success); }
.intg-promo__code svg { width: 18px; height: 18px; opacity: .55; }

.intg-steps-label { color: var(--text-secondary); font-size: .92rem; margin: 0 0 10px; }
.intg-steps { margin: 0 0 24px; padding-left: 20px; color: var(--text-secondary); line-height: 1.5; display: flex; flex-direction: column; gap: 8px; }
.intg-steps li { padding-left: 4px; }
.intg-steps b { color: var(--text); }
.intg-card__cta { width: 100%; justify-content: center; }
.intg-fineprint { font-size: .82rem; color: var(--text-muted); margin: 12px 0 0; text-align: center; }
.intg-card--soon { display: flex; flex-direction: column; }
.intg-card--soon .intg-card__cta { margin-top: auto; }

/* Integrations catalog */
.intg-catalog { padding-top: 56px; }
.intg-catalog__title { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; text-align: center; margin: 0 0 10px; color: var(--text); }
.intg-catalog__sub { max-width: 600px; margin: 0 auto 40px; text-align: center; color: var(--text-secondary); line-height: 1.55; }
.intg-cat { max-width: 1100px; margin: 0 auto 40px; }
.intg-cat__name {
  font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--primary); margin: 0 0 18px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.intg-tiles { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.intg-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px; padding: 22px 18px 20px;
  text-align: center;
  box-shadow: var(--sh-xs);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.intg-tile:hover { border-color: var(--border-strong); box-shadow: var(--sh-md); transform: translateY(-3px); }
.intg-tile__logo {
  display: flex; align-items: center; justify-content: center;
  height: 40px; margin-bottom: 14px;
}
.intg-tile__logo img { max-height: 36px; height: auto; width: auto; max-width: 140px; object-fit: contain; display: block; }
.intg-tile__name { font-size: 1.02rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.intg-tile__desc { font-size: .88rem; line-height: 1.45; color: var(--text-secondary); }
@media (max-width: 600px) {
  .intg-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .intg-tile { padding: 16px 12px 16px; }
}

/* CTA under the homepage integrations logos → /integrations page */
.integ-foot { text-align: center; margin-top: 34px; }

/* ===== Module page: screenshot lightbox (click photo → full screen) ===== */
.tm-gallery img { cursor: zoom-in; }
.tm-shots__hint { text-align: center; margin-top: 12px; font-size: 13px; color: var(--muted, #6B7280); }
.mp-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(10, 12, 20, .92);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; cursor: zoom-out;
  animation: mpLightboxIn .15s ease;
}
.mp-lightbox img {
  max-width: 96vw; max-height: 92vh;
  border-radius: 10px; box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
}
.mp-lightbox__close {
  position: fixed; top: 18px; right: 22px;
  width: 40px; height: 40px; border: none; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer;
}
.mp-lightbox__close:hover { background: rgba(255, 255, 255, .22); }
.mp-lightbox__nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border: none; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.mp-lightbox__nav svg { width: 24px; height: 24px; }
.mp-lightbox__nav:hover { background: rgba(255, 255, 255, .22); }
.mp-lightbox__nav--prev { left: 22px; }
.mp-lightbox__nav--next { right: 22px; }
@keyframes mpLightboxIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 640px) {
  .mp-lightbox__nav { width: 40px; height: 40px; }
  .mp-lightbox__nav--prev { left: 10px; } .mp-lightbox__nav--next { right: 10px; }
}

/* ==================== STRIPE MOTION PASS (2026-08-14) ====================
   1) .reveal тепер реально застосовується — landing.js авто-тегує section-head,
      картки тарифів/FAQ/модулів тощо і додає stagger-затримку.
   2) Хіро отримало «текучий» градієнт-скіс (страйп-патерн).
   3) Секція Telegram: два телефони у справжньому дизайні Telegram.
   4) Ігрове поле: канали стікаються в CRM, курсор їх розганяє. */

/* -- 1. Посилений reveal (перекриває базовий .reveal вище по файлу) -- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }

/* -- 2. Текучий градієнт у хіро -- */
.hero--mosaic { position: relative; overflow: hidden; }
.hero--mosaic::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg,
    rgba(59, 127, 168, .16), rgba(86, 75, 125, .12), rgba(165, 68, 99, .14),
    rgba(59, 127, 168, .10), rgba(165, 68, 99, .16), rgba(59, 127, 168, .16));
  background-size: 320% 320%;
  animation: lpFlow 18s ease-in-out infinite;
  clip-path: polygon(0 0, 100% 0, 100% 46%, 0 78%);
}
@keyframes lpFlow {
  0% { background-position: 0% 40%; }
  50% { background-position: 100% 60%; }
  100% { background-position: 0% 40%; }
}
@media (prefers-reduced-motion: reduce) { .hero--mosaic::before { animation: none; } }

/* -- 3. Telegram-дует -- */
.tg-duo__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-xl); max-width: 860px; margin: 0 auto; align-items: start; }
.tg-phone { margin: 0; width: 100%; max-width: 360px; justify-self: center; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 26px; overflow: hidden; box-shadow: var(--sh-lg); }
.tg-phone__head { display: flex; align-items: center; gap: 10px; padding: 11px 15px; background: #fff; border-bottom: 1px solid #E3E3E3; }
.tg-phone__ava { width: 34px; height: 34px; border-radius: 50%; color: #fff; display: grid; place-items: center;
  font-size: 13px; font-weight: 600; flex: none; background: var(--brand-gradient); }
.tg-phone__name { font-weight: 600; font-size: .9rem; line-height: 1.25; color: #232323; }
.tg-phone__sub { font-size: .75rem; color: #999; }
.tg-phone__sub--on { color: #168ACD; }
.tg-phone__body { padding: 12px 12px 16px; display: flex; flex-direction: column; gap: 6px; min-height: 300px;
  font-size: .82rem; color: #232323;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.6' opacity='.28'%3E%3Ccircle cx='24' cy='26' r='7'/%3E%3Cpath d='M96 18l3 6 6 1-4.5 4 1 6-5.5-3-5.5 3 1-6-4.5-4 6-1z'/%3E%3Cpath d='M30 96c0-5 8-5 8 0 0 4-8 8-8 8s-8-4-8-8c0-5 8-5 8 0z'/%3E%3Crect x='88' y='88' width='14' height='18' rx='3'/%3E%3Cpath d='M60 54q6-8 12 0'/%3E%3Ccircle cx='122' cy='60' r='4'/%3E%3Cpath d='M52 122l8 8m0-8l-8 8'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(160deg, #E3DFA0, #B8D695 45%, #8FBF8B);
}
.tgm { max-width: 86%; padding: 7px 11px 6px; border-radius: 12px; line-height: 1.45;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .10); }
.tgm--in { background: #fff; border-bottom-left-radius: 4px; align-self: flex-start; }
.tgm--out { background: #E1FFC7; border-bottom-right-radius: 4px; align-self: flex-end; }
.tgm__time { float: right; font-size: .68rem; color: #A0A0A0; margin: 7px -3px -2px 9px; white-space: nowrap; }
.tgm--out .tgm__time { color: #62AC55; }
.tgm__check { color: #4FAE4E; }
.tgm__btn { display: block; margin-top: 7px; padding-top: 7px; border-top: 1px solid #EFEFEF; color: #168ACD; font-weight: 500; font-size: .8rem; }
.tgm b { font-weight: 600; }
.tgm .tgm__sm { color: #8A8A8A; font-size: .74rem; }
.tg-date { align-self: center; background: rgba(255, 255, 255, .88); border-radius: var(--r-pill);
  padding: 2px 11px; font-size: .7rem; color: #5C6B4E; font-weight: 600; box-shadow: 0 1px 1px rgba(0, 0, 0, .06); }
.tg-date--crm { background: rgba(255, 255, 255, .95); color: #2F7A4F; }
.tg-phone__cap { padding: 12px 16px; font-size: .82rem; color: var(--text-secondary); text-align: center; background: var(--surface-subtle); border-top: 1px solid var(--border-light); }
@media (max-width: 760px) { .tg-duo__grid { grid-template-columns: 1fr; } }

/* -- 4. Ігрове поле: канали → CRM -- */
#lp-flow { width: 100%; max-width: 1080px; height: 380px; display: block; margin: 0 auto;
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-subtle);
  cursor: crosshair; touch-action: none; }
@media (max-width: 640px) { #lp-flow { height: 280px; } }

/* -- Текучий градієнт для хіро ГОЛОВНОЇ (chat-landing, .cl-hero) -- */
.section:has(> .container > .cl-hero) { position: relative; overflow: hidden; }
.section:has(> .container > .cl-hero)::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg,
    rgba(59, 127, 168, .16), rgba(86, 75, 125, .12), rgba(165, 68, 99, .14),
    rgba(59, 127, 168, .10), rgba(165, 68, 99, .16), rgba(59, 127, 168, .16));
  background-size: 320% 320%;
  animation: lpFlow 18s ease-in-out infinite;
  clip-path: polygon(0 0, 100% 0, 100% 46%, 0 88%);
}
@media (prefers-reduced-motion: reduce) { .section:has(> .container > .cl-hero)::before { animation: none; } }

/* ══ ТЕМНА СМУГА: Telegram-дует (кольоровий ритм сторінки, 2026-08-16) ══
   Правило ритму (site-roadmap): ОДНА темна смуга на сторінку — це вона.
   Затверджено мокапом stripe-landing.html (.feat.dark): глибоке чорнило з
   повільним градієнтним світінням, білі телефони «вистрілюють». Клас .tg-duo
   один на головній і на /crm — стилі накривають обидві сторінки. */
.section.tg-duo {
    background: #101014;
    position: relative;
    overflow: hidden;
}
.section.tg-duo::before {
    content: '';
    position: absolute;
    inset: -20%;
    pointer-events: none;
    background:
        radial-gradient(38% 45% at 20% 25%, rgba(59, 127, 168, .25), transparent 70%),
        radial-gradient(35% 45% at 82% 75%, rgba(165, 68, 99, .22), transparent 70%);
    filter: blur(40px);
    animation: tgGlow 16s ease-in-out infinite alternate;
}
@keyframes tgGlow {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(2.5%, 1.5%, 0) scale(1.05); }
    100% { transform: translate3d(-2.5%, -1%, 0) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) { .section.tg-duo::before { animation: none; } }
.section.tg-duo .container { position: relative; }
.section.tg-duo .section-head h2 { color: #FFFFFF; }
.section.tg-duo .section-head h2 .grad {
    /* градієнтний текст на чорнилі підсвічуємо світлішими стопами, щоб не тонув */
    background: linear-gradient(135deg, #6FA8CC, #C97A93);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.section.tg-duo .section-lead { color: rgba(255, 255, 255, .72); }
.section.tg-duo .eyebrow--gradient,
.section.tg-duo .eyebrow { color: #8FB8DA; background: rgba(255, 255, 255, .06); }
.section.tg-duo .tg-phone { border-color: rgba(255, 255, 255, .12); }
.section.tg-duo .tg-phone__cap {
    background: rgba(255, 255, 255, .05);
    border-top-color: rgba(255, 255, 255, .10);
    color: rgba(255, 255, 255, .65);
}

/* ══ Кольоровий ритм сторінки: м'які сірі смуги (2026-08-16) ══
   Фідбек: «біле-біле, потім чорне, потім біле-біле» — чорна смуга без
   сходинок читалась як провал. Ритм: біле → сіре → біле → … → СІРЕ →
   ЧОРНЕ (tg-duo) → СІРЕ → … Сірі смуги — чистий нейтрал, без відтінку. */
.section--soft {
    background: var(--surface-subtle);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}
/* сусідні сірі не подвоюють бордери */
.section--soft + .section--soft { border-top: 0; }
/* канвас-іграшка на сірій смузі — біла, щоб не зливалась */
.section--soft #lp-flow { background: var(--bg); }

/* ============================================================================
   СКРІН-ВІТРИНИ (2026-08-16) — реальні екрани продукту на головній (крісп-хід):
   великий скрін чатів під хіро + дві дво-колонкові вітрини (віджет, конструктор)
   + «Можливості» з вороною. Скріни живуть у /img/landing/lp-*.webp.
   ========================================================================== */
.cl-shot { margin: 0; border: 1px solid var(--border-light, #E4E4E4); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 30px 70px -30px rgba(36,59,82,.28); }
.cl-shot-bar { display: flex; align-items: center; gap: 6px; padding: 11px 16px; border-bottom: 1px solid var(--border-light, #E4E4E4); background: var(--bg-soft, #FAFAFA); }
.cl-shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: #E3E0E8; }
.cl-shot-bar span { margin-left: 10px; font-size: 12px; color: var(--text-muted, #888); background: #fff; border: 1px solid var(--border-light, #E4E4E4); border-radius: 999px; padding: 2.5px 14px; }
.cl-shot img { display: block; width: 100%; height: auto; }
.cl-hero-shot { margin-top: 64px; }
/* Скріни на всю сторінку (2026-08-17, «як у Crisp»): рамка виходить за контейнер
   до min(1520px, 100vw-40px). Асети знімаються у 2× (3040 px) — інакше мило. */
.cl-shot--full, .cl-hero-shot, .cl-shot--wide {
  width: min(1520px, calc(100vw - 40px));
  margin-left: calc((100% - min(1520px, calc(100vw - 40px))) / 2);
}
.cl-shot--full { margin-top: 40px; }

.cl-show { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: center; }
.cl-show--flip { grid-template-columns: 1.15fr .85fr; }
.cl-show--flip .cl-show-copy { order: 2; }
.cl-show-copy h2 { margin: 14px 0 12px; }
.cl-show-copy > p { color: var(--text-muted, #888); margin: 0 0 26px; }
.cl-pts { display: grid; gap: 18px; }
.cl-pt { display: flex; gap: 14px; align-items: flex-start; }
.cl-pt i { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #3B7FA8, #A54463); margin-top: 2px; }
.cl-pt i svg { width: 15px; height: 15px; }
.cl-pt b { display: block; font-size: 15.5px; margin-bottom: 2px; }
.cl-pt span { font-size: 14px; color: var(--text-muted, #888); }

.cl-more { text-align: center; }
.cl-more .cl-shot { margin: 8px auto 28px; max-width: 1040px; }
.cl-more .cl-shot--full { max-width: none; margin-bottom: 28px; } /* воронка теж на всю сторінку */
.cl-more-chips { justify-content: center; margin-bottom: 26px; }

@media (max-width: 900px) {
  .cl-show, .cl-show--flip { grid-template-columns: 1fr; gap: 30px; }
  .cl-show--flip .cl-show-copy { order: 0; }
  .cl-hero-shot { margin-top: 40px; }
}

/* ============================================================================
   ЖИВИЙ ВІДЖЕТ (2026-08-17) — демо-віджет чату в трьох станах: відкритий чат,
   офлайн-форма, згорнута бульбашка. Спільний для chat-landing і mozhlyvosti,
   розмітка — fragments/landing/widget-demo.html.
   ========================================================================== */
/* Сцена: сам віджет, без макета сайту (2026-08-17 — «не гарний макет, прибрати зовсім») */
.cl-stage { display: grid; place-items: center; padding: 8px 0; }

.cl-widget { width: 100%; max-width: 400px; border-radius: 16px; background: var(--bg, #fff); border: 1px solid rgba(0,0,0,.06);
             box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 18px 44px rgba(0,0,0,.12); overflow: hidden;
             animation: clWidgetIn .7s cubic-bezier(.16,1,.3,1) both .4s; }
@keyframes clWidgetIn { from { opacity: 0; transform: translateY(26px) scale(.97) } to { opacity: 1; transform: none } }
.cl-w-head { background: linear-gradient(135deg, var(--gradient-start, #3B7FA8), var(--gradient-end, #A54463)); color: #fff; padding: 15px 16px; display: flex; align-items: center; gap: 12px; }
.cl-w-ava { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.cl-w-ava i { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: #7FD69A; box-shadow: 0 0 0 2px rgba(255,255,255,.45); }
.cl-w-id b { font-size: 15px; display: block; line-height: 1.25; }
.cl-w-id small { font-size: 12px; opacity: .88; display: flex; align-items: center; gap: 5px; }
.cl-w-min { margin-left: auto; width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,.16); display: grid; place-items: center; }
.cl-w-min svg { width: 14px; height: 14px; }

/* min-height + flex-end: стрічка притиснута до поля вводу, як у справжньому чаті */
.cl-w-body { padding: 18px 16px; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; min-height: 400px; background: var(--bg-soft, #FAFAFA); }
.cl-row { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; opacity: 0; }
.cl-row--out { justify-content: flex-end; }
.cl-ava-s { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--gradient-start, #3B7FA8), var(--gradient-end, #A54463)); }
.cl-ava-s svg { width: 14px; height: 14px; }
.cl-ava-bot { background: rgba(86,75,125,.12); color: var(--primary, #564B7D); }
.cl-b { min-width: 0; }
.cl-msg { padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45; }
.cl-msg-in { background: var(--bg, #fff); border: 1px solid var(--border-light, #E4E4E4); border-bottom-left-radius: 6px; }
.cl-msg-out { background: linear-gradient(135deg, var(--gradient-start, #3B7FA8), var(--gradient-end, #A54463)); color: #fff; border-bottom-right-radius: 6px; }
.cl-meta { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--text-muted, #888); margin: 5px 0 0 4px; }
.cl-meta--top { margin: 0 0 6px 4px; }
.cl-row--out .cl-meta { justify-content: flex-end; margin: 5px 4px 0 0; }
/* Кнопки-підказки бота */
.cl-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-left: 34px; opacity: 0; }
.cl-chips span { font-size: 12.5px; line-height: 1; padding: 8px 12px; border-radius: 999px; background: var(--bg, #fff); border: 1px solid rgba(86,75,125,.28); color: var(--primary, #564B7D); font-weight: 500; }

/* Цикл розмови 16 с (2026-08-17, «не гарно, хочу побільший як реальний з ботом»): бот вітається
   й дає підказки → питання відвідувача → оператор «друкує» → відповідь → пауза → мʼякий рестарт.
   Одна часова шкала на елемент — жодних одноразових delay, що застигають. */
.cl-m1 { animation: clM1 16s cubic-bezier(.16,1,.3,1) infinite .5s; }
.cl-mc { animation: clMc 16s cubic-bezier(.16,1,.3,1) infinite .5s; }
.cl-m2 { animation: clM2 16s cubic-bezier(.16,1,.3,1) infinite .5s; }
.cl-m3 { animation: clM3 16s cubic-bezier(.16,1,.3,1) infinite .5s; }
@keyframes clM1 { 0%, 2% { opacity: 0; transform: translateY(12px) } 6%, 92% { opacity: 1; transform: none } 97%, 100% { opacity: 0; transform: none } }
@keyframes clMc { 0%, 8% { opacity: 0; transform: translateY(10px) } 12%, 92% { opacity: 1; transform: none } 97%, 100% { opacity: 0; transform: none } }
@keyframes clM2 { 0%, 20% { opacity: 0; transform: translateY(12px) } 24%, 92% { opacity: 1; transform: none } 97%, 100% { opacity: 0; transform: none } }
@keyframes clM3 { 0%, 44% { opacity: 0; transform: translateY(12px) } 48%, 92% { opacity: 1; transform: none } 97%, 100% { opacity: 0; transform: none } }
.cl-typing-row { align-items: center; opacity: 0; overflow: hidden; animation: clTypW 16s linear infinite .5s; }
@keyframes clTypW { 0%, 29% { opacity: 0; height: 0 }
                    32%, 41% { opacity: 1; height: 38px }
                    44%, 100% { opacity: 0; height: 0 } }
.cl-typing { display: inline-flex; gap: 4px; padding: 12px 15px; border-radius: 16px; border-bottom-left-radius: 6px; background: var(--bg, #fff); border: 1px solid var(--border-light, #E4E4E4); }
.cl-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted, #888); animation: clTp 1.2s infinite; }
.cl-typing i:nth-child(2) { animation-delay: .15s } .cl-typing i:nth-child(3) { animation-delay: .3s }
@keyframes clTp { 0%, 60%, 100% { transform: none; opacity: .4 } 30% { transform: translateY(-4px); opacity: 1 } }

.cl-w-input { border-top: 1px solid var(--border-light, #E4E4E4); background: var(--bg, #fff); padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.cl-w-field { flex: 1; font-size: 13.5px; color: var(--text-muted, #888); background: var(--bg-input, #F5F5F5); border-radius: 999px; padding: 10px 14px; }
.cl-w-send { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--gradient-start, #3B7FA8), var(--gradient-end, #A54463)); }
.cl-w-send svg { width: 16px; height: 16px; }
.cl-w-foot { padding: 9px 14px; font-size: 11px; color: var(--text-muted, #888); text-align: center; border-top: 1px solid var(--border-light, #EFEFEF); background: var(--bg, #fff); }
.cl-w-foot b { font-weight: 600; color: var(--primary, #564B7D); }

/* Два інші стани того самого віджета: офлайн-форма і згорнута бульбашка */
.cl-w-states { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; max-width: 940px; margin: 72px auto 0; }
.cl-w-states--3 { grid-template-columns: repeat(3, 1fr); max-width: none; margin-top: 56px; }
/* у трійці чат не задає зайвої висоти — стрічка рівно по вмісту */
.cl-w-states--3 .cl-w-body { min-height: 0; }
.cl-w-state { display: flex; flex-direction: column; }
.cl-w-state h3 { font-size: 19px; font-weight: 700; margin: 0 0 6px; }
.cl-w-state > p { font-size: 14px; line-height: 1.55; color: var(--text-muted, #888); margin: 0 0 18px; }
.cl-w-demo { flex: 1; border: 1px solid var(--border, #D8D8D8); border-radius: 16px; background: var(--bg-soft, #FAFAFA); padding: 26px; min-height: 330px; display: grid; }

.cl-off { width: 100%; max-width: 330px; margin: 0 auto; align-self: center; border-radius: 16px; background: var(--bg, #fff); border: 1px solid rgba(0,0,0,.06);
          box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 14px 34px rgba(0,0,0,.10); overflow: hidden; }
.cl-off .cl-w-ava i { background: var(--text-faint, #9A9A9A); }
.cl-off-body { padding: 16px; display: grid; gap: 9px; }
.cl-off-body p { font-size: 13.5px; line-height: 1.5; color: var(--text-muted, #888); margin: 0 0 3px; }
.cl-off-f { font-size: 13px; color: var(--text-muted, #888); background: var(--bg-input, #F5F5F5); border: 1px solid var(--border-light, #E4E4E4); border-radius: 8px; padding: 10px 12px; }
.cl-off-f--area { min-height: 52px; }
.cl-off-btn { margin-top: 3px; text-align: center; font-size: 13.5px; font-weight: 600; color: #fff; border-radius: 8px; padding: 11px 14px;
              background: linear-gradient(135deg, var(--gradient-start, #3B7FA8), var(--gradient-end, #A54463)); }

.cl-bub-wrap { align-self: end; justify-self: end; display: grid; justify-items: end; gap: 14px; }
.cl-teaser { position: relative; max-width: 250px; font-size: 13.5px; line-height: 1.45; padding: 13px 15px; border-radius: 14px; border-bottom-right-radius: 6px;
             background: var(--bg, #fff); border: 1px solid var(--border-light, #E4E4E4); box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 12px 28px rgba(0,0,0,.10); }
.cl-teaser i { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
               background: var(--bg, #fff); border: 1px solid var(--border-light, #E4E4E4); color: var(--text-muted, #888); }
.cl-teaser i svg { width: 10px; height: 10px; }
.cl-bub { position: relative; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; color: #fff;
          background: linear-gradient(135deg, var(--gradient-start, #3B7FA8), var(--gradient-end, #A54463)); box-shadow: 0 8px 24px rgba(92,82,120,.20); }
.cl-bub svg { width: 27px; height: 27px; }
.cl-bub b { position: absolute; top: -2px; right: -2px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 999px; border: 2px solid var(--bg, #fff);
            background: var(--danger, #A54463); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }


@media (max-width: 900px) {
  .cl-widget { max-width: 360px; }
  .cl-w-states { grid-template-columns: 1fr; gap: 34px; margin-top: 48px; }
}