/* ============================================================
   OMNISCORE — транскрибація та скоринг 100% дзвінків
   ДНК: makeai.in.ua (структура, «таблетка»-шапка, чипи, marquee)
        + Make AI Energy (темна палітра: графіт / індиго / вольт)
   Шрифти: Fixel Display (заголовки), Fixel Text (текст) — MacPaw, SIL OFL
   ============================================================ */

/* ---------- Шрифти: Fixel (MacPaw), ліцензія SIL OFL — assets/fonts/OFL.txt ----------
   Файли лежать локально: без залежності від сторонніх CDN і без зайвого DNS-запиту.
   Fixel Display — заголовки та лого, Fixel Text — основний текст. */
@font-face { font-family:'Fixel Text'; font-style:normal; font-weight:300; font-display:swap; src:url('../fonts/FixelText-Light.woff2') format('woff2'); }
@font-face { font-family:'Fixel Text'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/FixelText-Regular.woff2') format('woff2'); }
@font-face { font-family:'Fixel Text'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/FixelText-Medium.woff2') format('woff2'); }
@font-face { font-family:'Fixel Display'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/FixelDisplay-Regular.woff2') format('woff2'); }
@font-face { font-family:'Fixel Display'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/FixelDisplay-Medium.woff2') format('woff2'); }
@font-face { font-family:'Fixel Display'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/FixelDisplay-Bold.woff2') format('woff2'); }

/* ---------- Дизайн-токени ---------- */
:root {
  /* тло — глибокий графіт-нейві, три рівні глибини */
  --bg:        #0A0C16;
  --bg-2:      #101324;
  --surface:   #171B2E;
  --surface-2: #1B2038;
  --line:      rgba(255, 255, 255, .09);
  --line-2:    rgba(255, 255, 255, .16);

  /* текст */
  --ink:       #F3F5FC;
  --ink-2:     #A7AEC6;
  --ink-3:     #767E9C;

  /* ---------- Акценти: одна домінанта + два сигнали ----------
     ПРАВИЛО ЕКРАНА: індиго (середовище) + МАКСИМУМ ОДИН акцент.
     Вольт і warn ніколи не потрапляють в один кадр: вольт завжди має форму
     залитої кнопки, warn — тільки дрібна графіка всередині даних.
     Яскравість добирається насиченістю індиго та світінням, а не новими відтінками. */

  /* ІНДИГО — усе середовище: структура, іконки, рамки, дані, плями, ідентичність.
     Ніколи не є заливкою головної кнопки, тож повторюваність не обмежена — це один тон.
     Тон 244° — той самий, що й акцент у самому продукті (#4A45F1 на світлому),
     але світліший: на графітовому тлі продуктовий синій «сідає» й губить читабельність.
     Завдяки цьому реальні скриншоти інтерфейсу лягають у сайт без кольорового стику. */
  --brand:        #655BF1;   /* насичений: лого, плитки інтеграцій, бари, фокус поля */
  --brand-2:      #928BF4;   /* дрібна графіка й текст: галочки, маркери, іконки, суфікси */
  --brand-3:      #A59FF9;   /* світлий: скор, KPI-успіх, репліка клієнта, хвиля, фокус-кільце */
  --brand-4:      #DCDAFB;   /* майже білий бузковий: пік градієнта H1, підсвітка цитати */
  --brand-deep:   #372EAD;   /* другий стоп --grad-brand; самостійно не вживається */
  --brand-dim:    rgba(101, 91, 241, .16);   /* заливка плашок і чипів */
  --brand-line:   rgba(101, 91, 241, .30);   /* статична рамка акцентних плашок */
  --brand-line-2: rgba(101, 91, 241, .50);   /* ЄДИНА мова ховера / відкритого / обраного стану */
  --brand-glow:   rgba(101, 91, 241, .62);   /* радіальні плями — головне джерело кольорового світла */
  --grad-brand:   linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);

  /* ВОЛЬТ — єдиний колір головної дії: тільки заливка .btn-primary / .btn-volt.
     Два задокументовані винятки: .mark (одне ключове слово на сайт) і крапка лого (6px). */
  --volt:      #C6F03C;
  --volt-ink:  #14180B;                    /* текст на вольтовій заливці */
  --volt-glow: rgba(198, 240, 60, .45);    /* світіння кнопки — головний носій яскравості */

  /* WARN — єдиний сигнал «слабко / проблема», тільки за змістом і тільки в даних:
     чип «Сьогодні», бар нижче порогу, KPI-ризик, підсумок панелі, помилка форми. */
  --warn:      #E0607F;
  --warn-2:    #F0A9BC;                    /* warn як текст на темному — вищий контраст */
  --warn-dim:  rgba(224, 96, 127, .13);

  --radius:      16px;
  --radius-card: 24px;
  --radius-chip: 100px;
  --container:   1200px;

  --head: 'Fixel Display', 'Inter', system-ui, sans-serif;
  --text: 'Fixel Text', 'Inter', system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  overflow-anchor: none;
  overflow-x: clip;              /* декоративні плями за краєм не дають горизонтального скролу */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--text);
  /* 400, а не 300: на темному тлі тонке накреслення «випалюється» і втрачає контраст.
     Light лишається для великих лідів, де кегль це витримує. */
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;             /* clip, а не hidden — не ламає position: sticky */
}

img, svg { display: block; max-width: 100%; }
svg { flex: none; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
::selection { background: rgba(101, 91, 241, .35); color: #fff; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2A3050; border-radius: 99px; border: 3px solid var(--bg); background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #3A4270; background-clip: padding-box; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.mono { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

/* ---------- Типографіка ---------- */
h1, h2, h3, h4 { font-family: var(--head); font-weight: 400; line-height: 1.12; letter-spacing: -.02em; }

.h1 { font-size: clamp(38px, 5.2vw, 64px); }
.h2 { font-size: clamp(28px, 3.6vw, 46px); }
.h3 { font-size: 20px; font-weight: 500; letter-spacing: -.01em; }

.h1 strong { font-weight: 700; }

/* анімований градієнтний текст */
.grad {
  /* без вольту: на темному тлі лаймова фаза читається як тьмяна оливка */
  background: linear-gradient(90deg, var(--brand-2) 0%, var(--brand-4) 35%, var(--brand-2) 65%, var(--brand) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer {
  from { background-position: 0% 0; }
  to   { background-position: 220% 0; }
}

/* підкреслення ключових слів — тонка вольтова лінія (на темному тлі
   заливка виглядає брудною, тому саме лінія зі світінням) */
.mark {
  /* фон, а не ::after — інлайн-фон малюється на кожному рядку,
     тож підкреслення не ламається при переносі слів */
  background: linear-gradient(var(--volt), var(--volt)) no-repeat;
  background-size: 100% 3px;
  background-position: 0 calc(100% - .04em);
  padding-bottom: .1em;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-2);
  background: var(--brand-dim);
  border: 1px solid var(--brand-line);
  padding: 8px 18px;
  border-radius: var(--radius-chip);
  margin-bottom: 20px;
}
.eyebrow::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand-2);
  box-shadow: 0 0 10px rgba(146, 139, 244, .9);
}

.lead { font-size: clamp(17px, 1.6vw, 20px); font-weight: 300; color: var(--ink-2); max-width: 660px; }
.h2 + .lead, .h1 + .lead { margin-top: 18px; }

/* overflow-x: clip (не hidden) — обрізає світлові плями по краях, але не створює
   контейнер прокрутки і не ламає sticky всередині секції */
.section { padding: 100px 0; position: relative; overflow-x: clip; }
.section--tight { padding: 76px 0; }
.section-head { margin-bottom: 56px; max-width: 800px; }
.section-head .lead { margin-top: 16px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head--center .lead { margin-left: auto; margin-right: auto; }

/* м'яке світіння секції */
.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .58;
  pointer-events: none;
  z-index: 0;
}
.glow-brand { background: radial-gradient(circle, var(--brand-glow) 0%, transparent 70%); }
.glow-soft  { background: radial-gradient(circle, rgba(165, 159, 249, .35) 0%, transparent 70%); }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 400;
  font-size: 15px;
  padding: 16px 32px;
  border-radius: var(--radius-chip);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Один колір дії на всю сторінку: якщо кнопка головна — вона вольтова.
   Індиго звільнене під середовище, тож око не мусить обирати між двома «головними». */
.btn-primary, .btn-volt {
  background: var(--volt);
  color: var(--volt-ink);
  font-weight: 500;
  box-shadow: 0 8px 26px -8px var(--volt-glow);
}
.btn-primary:hover, .btn-volt:hover { box-shadow: 0 16px 38px -10px rgba(198, 240, 60, .62); }

/* Рівень 2 ієрархії: контурна індигова. Для дій, що ділять кадр із сигнальним кольором
   (CTA у sticky-шапці, CTA секції аналітики) — інакше в кадрі було б три акценти. */
.btn-line { background: var(--brand-dim); color: #fff; border-color: var(--brand-line-2); }
.btn-line:hover {
  background: rgba(101, 91, 241, .28);
  border-color: var(--brand);
  box-shadow: 0 12px 30px -14px rgba(101, 91, 241, .85);
}

.btn-ghost { background: rgba(255, 255, 255, .05); color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); }

.btn-dark { background: #0E1120; color: var(--ink); border-color: var(--line-2); }
.btn-dark:hover { background: #161B33; }

.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--brand-3);
  outline-offset: 3px;
}

/* ---------- Шапка: плаваюча матова «таблетка» ---------- */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 16px 24px 0;
  background: transparent;
  pointer-events: none;
  transition: padding-top .35s var(--ease);
}
.header.scrolled { padding-top: 10px; }

.header-inner {
  max-width: 1040px;
  margin: 0 auto;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 62px;
  padding-left: 20px;
  padding-right: 12px;
  background: rgba(16, 19, 36, .72);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 14px 44px -14px rgba(0, 0, 0, .8);
  transition: background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.header.scrolled .header-inner {
  background: rgba(16, 19, 36, .92);
  border-color: var(--line-2);
  box-shadow: 0 18px 50px -14px rgba(0, 0, 0, .9);
}

.logo { display: inline-flex; align-items: center; gap: 11px; white-space: nowrap; }
.logo-mark {
  width: 34px; height: 34px;
  flex: none;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--grad-brand);
  box-shadow: 0 4px 14px -4px rgba(101, 91, 241, .8);
}
.logo-mark svg { width: 19px; height: 19px; stroke: #fff; }
.logo-name {
  font-family: var(--head);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .04em;
  color: #fff;
}
.logo-name .dot {
  color: var(--volt);
  text-shadow: 0 0 8px rgba(198, 240, 60, .55);
}

.nav { display: flex; align-items: center; gap: 28px; }
.nav a {
  position: relative;
  font-size: 14px;
  color: var(--ink-2);
  transition: color .15s;
  white-space: nowrap;
}
.nav a:hover { color: #fff; }
.nav a:not(.btn)::after {
  content: '';
  position: absolute; left: 0; bottom: -6px;
  width: 100%; height: 1.5px;
  background: linear-gradient(90deg, var(--brand-2), var(--brand-3));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav a:not(.btn):hover::after { transform: scaleX(1); }
.nav .btn { display: none; }

.header .btn { padding: 11px 22px; font-size: 14px; }
.header-cta { display: inline-flex; }

.header-actions { display: flex; align-items: center; gap: 18px; }

.header-login {
  font-size: 14px;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color .15s;
}
.header-login:hover { color: #fff; }

.burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
}
.burger span {
  width: 22px; height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 150px 0 90px;
  background:
    radial-gradient(ellipse 120% 80% at 15% 0%, rgba(101, 91, 241, .27) 0%, transparent 60%),
    radial-gradient(ellipse 90% 70% at 90% 20%, rgba(165, 159, 249, .12) 0%, transparent 60%),
    linear-gradient(180deg, #0D1020 0%, var(--bg) 70%);
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(146, 139, 244, .27) 1px, transparent 1.5px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 25% 30%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 75% 65% at 25% 30%, #000 0%, transparent 70%);
  pointer-events: none;
}
.hero .glow-1 { width: 560px; height: 560px; top: -180px; left: -140px; }
.hero .glow-2 { width: 460px; height: 460px; bottom: -200px; right: -120px; }

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 56px;
  align-items: center;
}
.hero .lead { margin-top: 22px; }
.hero-actions, .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-note {
  margin-top: 18px;
  font-size: 14px;
  color: var(--ink-3);
  display: flex;
  align-items: flex-start;   /* маркер тримається першого рядка, а не центру блоку */
  gap: 11px;
  max-width: 560px;
}
.hero-note::before {
  content: '';
  flex: none;
  margin-top: 8px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand-2);
  box-shadow: 0 0 0 4px rgba(101, 91, 241, .18);
}

.trustline {
  margin-top: 46px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  align-items: center;
}
.trustline span {
  font-size: 13px;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.trustline svg { width: 15px; height: 15px; stroke: var(--brand-2); }

/* ---------- Hero-візуал: жива картка дзвінка ---------- */
.call-card {
  position: relative;
  background: linear-gradient(160deg, var(--surface) 0%, #131728 100%);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-card);
  padding: 20px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(101, 91, 241, .1);
}
.call-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(101, 91, 241, .8), transparent 40%, transparent 60%, rgba(165, 159, 249, .5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.cc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.cc-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-2);
  background: rgba(255, 255, 255, .06);
  border-radius: 99px;
  padding: 5px 11px;
}
.cc-live::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand-2);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(146, 139, 244, .6); opacity: 1; }
  50%      { box-shadow: 0 0 0 7px rgba(146, 139, 244, 0); opacity: .65; }
}
.cc-id { font-size: 13px; color: var(--ink-2); }
.cc-id b { color: #fff; font-weight: 500; }
.cc-score {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--head);
  font-weight: 700;
  font-size: 19px;
  color: var(--brand-3);
}
.cc-score small { font-size: 11px; color: var(--ink-3); font-weight: 400; font-family: var(--text); }

/* хвиля */
.wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 54px;
  margin: 16px 0 4px;
  padding: 0 2px;
}
.wave i {
  flex: 1;
  min-width: 2px;
  height: 12%;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--brand-3), var(--brand));
  opacity: .55;
  transform-origin: center;
  animation: waveBeat 1.15s ease-in-out infinite;
}
@keyframes waveBeat {
  0%, 100% { height: 14%; opacity: .45; }
  50%      { height: 88%; opacity: 1; }
}
.cc-times {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-3);
  margin-bottom: 14px;
}

/* стрічка транскрипту */
.cc-lines { display: flex; flex-direction: column; gap: 12px; min-height: 232px; }
.cc-line {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 13.5px;
  line-height: 1.5;
}
.cc-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  padding-top: 2px;
}
.cc-who b { font-weight: 500; letter-spacing: .02em; }
.cc-who .ts { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cc-line--a .cc-who b { color: var(--brand-2); }
.cc-line--b .cc-who b { color: var(--brand-3); }
.cc-text {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 13px;
  color: #DFE3F2;
}
.cc-line--a .cc-text { border-left: 2px solid rgba(101, 91, 241, .65); }
.cc-line--b .cc-text { border-left: 2px solid rgba(165, 159, 249, .6); }
.cc-text em {
  font-style: normal;
  color: var(--brand-4);
  background: rgba(101, 91, 241, .24);
  border-radius: 5px;
  padding: 0 4px;
}
/* стан друкування (вмикає JS) */
.cc-lines.is-typing .cc-line { opacity: 0; transform: translateY(8px); }
.cc-line.in { animation: lineIn .45s var(--ease) forwards; }
@keyframes lineIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.tag {
  font-size: 11.5px;
  padding: 6px 12px;
  border-radius: 99px;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  background: rgba(255, 255, 255, .04);
}
.tag--brand { color: var(--brand-2); background: var(--brand-dim); border-color: rgba(101, 91, 241, .3); }
.tag--warn  { color: var(--warn-2); background: var(--warn-dim); border-color: rgba(224, 96, 127, .28); }

/* плаваючий бейдж біля картки */
.cc-float {
  position: absolute;
  right: -18px;
  bottom: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(16, 19, 36, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  padding: 11px 15px;
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .9);
  animation: floaty 5s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
.cc-float .ico {
  width: 32px; height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--brand-dim);
}
.cc-float .ico svg { width: 17px; height: 17px; stroke: var(--brand-2); }
.cc-float span { display: flex; flex-direction: column; line-height: 1.3; }
.cc-float b { font-size: 13px; font-weight: 500; color: #fff; }
.cc-float small { font-size: 11px; color: var(--ink-3); }

/* ---------- Marquee ---------- */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(101, 91, 241, .08), rgba(165, 159, 249, .05));
  padding: 16px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  gap: 42px;
  width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee span {
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 42px;
  white-space: nowrap;
}
.marquee span::after {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brand);
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Статистика ---------- */
.stats { padding: 74px 0; border-bottom: 1px solid var(--line); }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: 20px;
}
.stat {
  background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 20px;
  transition: border-color .3s, transform .3s var(--ease);
}
.stat:hover { border-color: var(--brand-line-2); transform: translateY(-3px); }
.stat .num {
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 40px);
  line-height: 1;
  color: #fff;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.stat .num .suffix { color: var(--brand-2); font-size: .62em; }
.stat .cap { margin-top: 10px; font-size: 13.5px; color: var(--ink-3); line-height: 1.45; }

/* ---------- Біль → рішення ---------- */
.pains { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.pain {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 28px 26px;
  overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s;
}
.pain:hover { transform: translateY(-4px); border-color: var(--brand-line-2); }
.pain .p-bad {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--warn-2);
  background: var(--warn-dim);
  border-radius: 99px;
  padding: 5px 12px;
  margin-bottom: 16px;
}
.pain h3 { margin-bottom: 10px; }
.pain p { color: var(--ink-2); font-size: 15px; }
.pain .p-fix {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--line-2);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14.5px;
  color: var(--ink-2);
}
.pain .p-fix svg { width: 18px; height: 18px; stroke: var(--brand-2); margin-top: 2px; }

/* ---------- Як працює: кроки ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 18px;
  counter-reset: step;
}
.step {
  position: relative;
  background: linear-gradient(170deg, var(--surface) 0%, #121629 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 30px 24px 26px;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.step:hover {
  transform: translateY(-5px);
  border-color: var(--brand-line-2);
  box-shadow: 0 24px 50px -30px rgba(101, 91, 241, .8);
}
.step::before {
  counter-increment: step;
  content: '0' counter(step);
  font-family: var(--head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--brand-2);
  display: block;
  margin-bottom: 18px;
}
.step .s-ico {
  width: 46px; height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--brand-dim);
  border: 1px solid rgba(101, 91, 241, .3);
  margin-bottom: 16px;
}
.step .s-ico svg { width: 22px; height: 22px; stroke: var(--brand-2); }
.step h3 { margin-bottom: 8px; }
.step p { font-size: 14.5px; color: var(--ink-2); }

/* ---------- Можливості ---------- */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 18px; }
.feature {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  transition: transform .3s var(--ease), border-color .3s, background .3s;
}
.feature:hover { transform: translateY(-4px); border-color: var(--brand-line-2); background: var(--surface-2); }
.feature .f-ico {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  background: var(--brand-dim);
}
.feature .f-ico svg { width: 21px; height: 21px; stroke: var(--brand-2); }
.feature h3 { margin-bottom: 8px; font-size: 17.5px; }
.feature p { font-size: 14.5px; color: var(--ink-2); }

/* ---------- Аналітика: демо-панель ---------- */
.analytics { background: linear-gradient(180deg, var(--bg) 0%, #0D1020 50%, var(--bg) 100%); }
.an-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 56px; align-items: center; position: relative; z-index: 2; }
.an-list { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.an-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ink-2); }
.an-list svg { width: 20px; height: 20px; stroke: var(--brand-2); margin-top: 2px; flex: none; }
.an-list b { color: #fff; font-weight: 500; }

.panel {
  background: linear-gradient(160deg, var(--surface) 0%, #12162A 100%);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-card);
  padding: 22px;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .95);
}
.panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.panel-head h4 { font-size: 15px; font-weight: 500; }
.panel-head .chip {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 4px 10px;
}
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.kpi {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
}
.kpi .k-cap { font-size: 11.5px; color: var(--ink-3); margin-bottom: 6px; }
.kpi .k-val { font-family: var(--head); font-weight: 700; font-size: 22px; color: #fff; }
.kpi .k-val.up { color: var(--brand-3); }
.kpi .k-val.warn { color: var(--warn); }

/* горизонтальні бари скорингу */
.bars { display: flex; flex-direction: column; gap: 13px; }
.bar-row { display: grid; grid-template-columns: 132px 1fr 44px; align-items: center; gap: 12px; font-size: 12.5px; }
.bar-row .b-lab { color: var(--ink-2); }
.bar-row .b-val { text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.bar {
  height: 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--brand), var(--brand-3));
  transition: width 1.1s var(--ease);
}
/* «слабко» — єдиний сигнальний колір; решта смуг однакові, різницю показує довжина */
.bar.warn i { background: linear-gradient(90deg, rgba(224, 96, 127, .55), var(--warn)); }

.panel-foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.panel-foot .dot-warn { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex: none; }

/* ============================================================
   РЕЗУЛЬТАТ — доказ: динаміка в цифрах + сам екран продукту
   Місце в розмітці: МІЖ секцією #analytics і секцією #integrations.
   Місце в style.css: у кінці файлу, ПІСЛЯ глобального блоку
   @media (prefers-reduced-motion: reduce).

   ГОЛОВНИЙ ПРИЙОМ. Секція стоїть на двох об'єктах різної фактури,
   а не на сітці карток. Ліворуч — графік БЕЗ рамки й підкладки: він
   лежить просто на тлі секції. Праворуч — єдиний обведений об'єкт
   у кадрі: темний макет робочого екрана Omniscore. Саме тому секція
   легша за сусідні (#analytics, #integrations), хоча змісту в ній
   більше: у кадрі одна коробка замість чотирьох.

   ПРАВИЛО ЕКРАНА дотримане. Індиго — усе середовище: лінії графіка,
   чипи, аватари, кант обраного рядка. Другий акцент рівно один —
   --warn, і тільки за змістом «слабко» всередині даних макета
   (один низький скор, його кільце і два невиконані критерії).
   Вольту в секції немає свідомо: тут немає залитої кнопки, підсумок
   веде текстовим посиланням — третій підряд .btn зробив би секцію
   важчою за сусідні.

   БЕЗ JS. Графік — інлайновий SVG з реальними координатами
   (y = 290 − значення × 2.9556; x = 64 / 232 / 400 / 568).
   Анімація появи — тільки CSS (stroke-dasharray), підвішена на
   наявний механізм .reveal/.visible з main.js. Без скрипта клас .js
   не ставиться → графік намальований одразу й повністю.
   ============================================================ */

.result { padding: 96px 0; }
.result > .container { position: relative; z-index: 2; }

/* ---------- Шапка секції ----------
   Власна, а не .section-head: та має margin-bottom 56px і одну колонку.
   Тут заголовок ліворуч, фактура кейсу праворуч — коротше по висоті
   і одразу знімає питання «чиї це цифри». */
.result-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
  gap: 18px 48px;
  align-items: end;
  margin-bottom: 36px;
}
/* тонкий індиговий кант замість ще однієї плашки */
.result-case {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  padding: 2px 0 3px 16px;
  border-left: 2px solid var(--brand-line);
}
.result-case b { color: #fff; font-weight: 500; }

/* ---------- Сцена: графік + екран ---------- */
.res-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
  gap: 44px;
  align-items: stretch;      /* обидві колонки заввишки з вищу — див. .rch-note */
}

/* ============================================================
   1. ГРАФІК — навмисно без картки, рамки й тіні
   ============================================================ */
/* flex-колонка потрібна рівно для одного: підсумок про конверсію
   притискається донизу (.rch-note { margin-top: auto }) і низ графіка
   вирівнюється з низом екрана продукту. Інакше коротша колонка лишає
   під собою ~190px порожнечі. */
.res-chart { margin: 0; min-width: 0; display: flex; flex-direction: column; }

.rch-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin-bottom: 14px;
}
.rch-title { font-family: var(--head); font-weight: 500; font-size: 17px; color: var(--ink); }
.rch-scale { margin-left: auto; font-size: 12px; color: var(--ink-3); }

.rch-plot { position: relative; }
.rch-svg { display: block; width: 100%; height: auto; }
.rch-svg text { font-family: var(--text); font-variant-numeric: tabular-nums; }

/* сітка й осі — рівно стільки, щоб читалась шкала */
.rch-grid line  { stroke: rgba(255, 255, 255, .085); stroke-width: 1; stroke-dasharray: 3 7; }
.rch-ticks line { stroke: rgba(255, 255, 255, .05);  stroke-width: 1; }
.rch-axis       { stroke: rgba(255, 255, 255, .18);  stroke-width: 1; }

.rch-ylab text { font-size: 13px;   fill: var(--ink-3); text-anchor: end; }
.rch-xlab text { font-size: 13.5px; fill: var(--ink-2); text-anchor: middle; }

.rch-area { fill: url(#rchFill); }

/* Три серії — три градації ОДНОГО індиго плюс різна товщина штриха.
   Нових відтінків не вводимо; страховка для тих, хто погано розрізняє
   близькі тони, — підписані точки, підсумки праворуч і HTML-легенда
   з числами під графіком. */
.rch-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rch-line--a { stroke: var(--brand-3); stroke-width: 3;   filter: drop-shadow(0 0 7px rgba(165, 159, 249, .45)); }
.rch-line--b { stroke: var(--brand);   stroke-width: 2.4; }
.rch-line--c { stroke: rgba(146, 139, 244, .62); stroke-width: 1.9; }

/* точки виміру: обведення кольором тла, щоб маркер не злипався з лінією */
.rch-dots circle { stroke: var(--bg); stroke-width: 2; }
.rch-dots--a circle { fill: var(--brand-3); }
.rch-dots--b circle { fill: var(--brand); }
.rch-dots--c circle { fill: rgba(146, 139, 244, .70); }

/* paint-order + темна обводка дають кожній цифрі власний ореол:
   підпис лишається читабельним поверх сітки й сусідніх ліній */
.rch-pt text,
.rch-end text {
  paint-order: stroke fill;
  stroke: var(--bg);
  stroke-width: 3.6px;
  stroke-linejoin: round;
}
.rch-pt text { font-size: 12.5px; text-anchor: middle; fill: var(--brand-4); }

/* підсумок кожної лінії на третьому місяці: значення + приріст у пунктах */
.rch-v { font-family: var(--head); font-weight: 700; font-size: 15.5px; }
.rch-v.is-a { fill: var(--brand-3); }
.rch-v.is-b { fill: var(--brand-2); }
.rch-v.is-c { fill: var(--ink-2); }
.rch-d { font-size: 11.5px; fill: var(--ink-3); }

/* Легенда звичайним HTML, а не всередині SVG: переноситься по словах,
   читається скрінрідером і несе числа «старт → фініш» — саме вони
   рятують, якщо на поганому екрані найтьмяніша лінія загубиться
   або якщо графік на мобільному лишиться непрогорнутим. */
.rch-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 26px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.rch-lg { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-2); }
.rch-lg b { color: #fff; font-weight: 500; }
.rch-key { width: 18px; height: 3px; border-radius: 99px; flex: none; }
.rch-lg--a .rch-key { background: var(--brand-3); box-shadow: 0 0 8px rgba(165, 159, 249, .55); }
.rch-lg--b .rch-key { background: var(--brand); }
.rch-lg--c .rch-key { background: rgba(146, 139, 244, .62); height: 2px; }

/* margin-top: auto з'їдає вільну висоту колонки; padding-top тримає
   мінімальний відступ там, де вільної висоти немає (мобільний). */
.rch-note { margin-top: auto; padding-top: 18px; display: flex; flex-direction: column; gap: 6px; max-width: 640px; }
.rch-note b  { font-size: 15px; font-weight: 500; color: #fff; }
.rch-note em { font-style: normal; color: var(--brand-3); }
.rch-note span { font-size: 12.5px; color: var(--ink-3); line-height: 1.55; }

/* підказка про горизонтальну прокрутку — з'являється лише там, де вона є */
.rch-hint { display: none; margin-top: 8px; font-size: 11.5px; color: var(--ink-3); }

/* ---------- Поява ліній: тільки CSS ----------
   pathLength="1" у розмітці нормалізує довжину кожної полілінії до
   одиниці — тож зсув однаковий для всіх трьох і не треба рахувати
   реальну довжину шляху (і перераховувати її при зміні даних).
   Стартовий (прихований) стан вмикає ЛИШЕ клас .js на <html>. */
.js .res-chart .rch-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .res-chart .rch-in   { opacity: 0; }

.js .res-chart.visible .rch-line    { animation: rchDraw 1.25s var(--ease) forwards; }
.js .res-chart.visible .rch-line--b { animation-delay: .10s; }
.js .res-chart.visible .rch-line--a { animation-delay: .20s; }
.js .res-chart.visible .rch-in      { animation: rchIn .5s var(--ease) .85s forwards; }

@keyframes rchDraw { to { stroke-dashoffset: 0; } }
@keyframes rchIn   { to { opacity: 1; } }

/* ============================================================
   2. МАКЕТ ЕКРАНА — єдиний обведений об'єкт у кадрі
   Поверхня, кант і тінь узяті з .panel і .call-card, щоб екран
   читався як частина того самого продукту, що й демо-дашборд.
   ============================================================ */
.res-app { margin: 0; min-width: 0; }

.rapp {
  border: 1px solid var(--line-2);
  border-radius: var(--radius-card);
  overflow: hidden;                 /* обрізає рядки по радіусу */
  background: linear-gradient(160deg, var(--surface) 0%, #12162A 100%);
  box-shadow:
    0 44px 92px -44px rgba(0, 0, 0, .95),
    0 0 0 1px rgba(101, 91, 241, .10),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* верхня панель застосунку */
.rapp-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
}
.rapp-mark {
  width: 24px; height: 24px;
  flex: none;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--grad-brand);
}
.rapp-mark svg { width: 14px; height: 14px; stroke: #fff; }
.rapp-path {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 12.5px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
}
.rapp-path b { color: #fff; font-weight: 500; }
.rapp-path i { font-style: normal; color: var(--ink-3); }
.rapp-date {
  margin-left: auto;
  flex: none;
  font-size: 11px;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 4px 10px;
}
.rapp-me {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  color: var(--brand-2);
  background: var(--brand-dim);
  border: 1px solid var(--brand-line);
}

/* фільтри — головний доказ «це робочий інтерфейс, а не картинка» */
.rapp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
}
/* Пошук займає власний рядок, чипи — наступний. Так робить будь-який
   реальний інтерфейс, і рядок запиту не обрізається трьома крапками
   на середніх ширинах. */
.rapp-search {
  flex: 1 1 100%;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-3);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 6px 13px;
}
.rapp-search svg { width: 13px; height: 13px; stroke: var(--ink-3); }
/* власний span, а не текстовий вузол: без нього рядок обрізається
   посеред слова замість трьох крапок */
.rapp-search span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rapp-chip {
  font-size: 11.5px;
  color: var(--ink-2);
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 6px 12px;
  white-space: nowrap;
}
/* активний фільтр — та сама мова обраного стану, що й на решті сайту */
.rapp-chip.is-on { color: var(--brand-2); background: var(--brand-dim); border-color: var(--brand-line-2); }

/* ---------- стрічка дзвінків ----------
   Позиції ВСІХ чотирьох дітей задані явно (grid-area). Це не
   перестраховка: автопозиціювання розкладає елементи з визначеним
   рядком (grid-row: 1/3) РАНІШЕ за елементи з auto/auto, тож
   .rapp-sc забирав би колонку 2, а ім'я менеджера їхало б у колонку
   скору. Явні області знімають цю залежність від порядку в DOM. */
.rapp-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 58px;
  grid-template-rows: auto auto;
  column-gap: 11px;
  row-gap: 4px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  transition: background .2s;
}
.rapp-row:hover { background: rgba(255, 255, 255, .03); }
/* обраний рядок — індиговий кант зліва, як усі відкриті стани на сайті */
.rapp-row.is-open {
  background: rgba(101, 91, 241, .09);
  box-shadow: inset 2px 0 0 var(--brand);
  border-bottom-color: transparent;
}

.rapp-ava {
  grid-area: 1 / 1 / 3 / 2;
  width: 32px; height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 10.5px;
  color: var(--brand-2);
  background: rgba(101, 91, 241, .18);
  border: 1px solid rgba(101, 91, 241, .26);
}

.rapp-who {
  grid-area: 1 / 2 / 2 / 3;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1.35;
}
/* ім'я не стискається, дрібний рядок забирає залишок і згортається
   в три крапки — інакше на вузькій колонці він схлопується в нуль */
.rapp-who b { flex: none; font-size: 13.5px; font-weight: 500; color: #fff; white-space: nowrap; }
.rapp-who small {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* що знайшла модель — коротким тегом, тією ж мовою, що .tag у hero */
.rapp-tag {
  grid-area: 2 / 2 / 3 / 3;
  justify-self: start;
  max-width: 100%;
  font-style: normal;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--ink-2);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 3px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rapp-tag.is-good { color: var(--brand-2); background: var(--brand-dim); border-color: rgba(101, 91, 241, .28); }

/* скор: цифра + мікросмуга. Різницю між рядками показує довжина смуги,
   warn вмикається лише там, де оцінка нижча за поріг. */
.rapp-sc {
  grid-area: 1 / 3 / 3 / 4;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.rapp-sc b { font-family: var(--head); font-weight: 700; font-size: 16px; line-height: 1; color: var(--brand-3); }
.rapp-meter {
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}
.rapp-meter i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand), var(--brand-3)); }
.rapp-sc.is-low b { color: var(--warn); }
.rapp-sc.is-low .rapp-meter i { background: linear-gradient(90deg, rgba(224, 96, 127, .5), var(--warn)); }

/* ---------- розкрита картка розмови під обраним рядком ---------- */
.rapp-detail {
  padding: 13px 14px 15px;
  background: rgba(101, 91, 241, .06);
  border-bottom: 1px solid var(--line);
}
.rapp-dhead { display: flex; align-items: center; gap: 12px; }

/* Кільце скору: r = 22 → довжина кола 138.23; 54 зі 100 → зсув 63.59 */
.rapp-ring { position: relative; width: 46px; height: 46px; flex: none; display: grid; place-items: center; }
.rapp-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rapp-ring-bg  { fill: none; stroke: rgba(255, 255, 255, .09); stroke-width: 5; }
.rapp-ring-val {
  fill: none;
  stroke: var(--warn);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 138.23;
  stroke-dashoffset: 63.59;        /* статичний фінальний стан */
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.rapp-ring b { position: relative; font-family: var(--head); font-weight: 700; font-size: 15px; color: #fff; }
.rapp-dt { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.35; }
.rapp-dt b { font-size: 13.5px; font-weight: 500; color: #fff; }
.rapp-dt small { font-size: 11.5px; color: var(--ink-3); }

.rapp-quote {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #DFE3F2;
  padding-left: 12px;
  border-left: 2px solid var(--brand-line-2);
}
.rapp-quote .ts { margin-left: 6px; font-size: 11px; color: var(--ink-3); }

.rapp-check { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.rapp-check li { display: flex; gap: 9px; align-items: flex-start; font-size: 12px; line-height: 1.4; color: var(--ink-2); }
.rapp-check svg { width: 14px; height: 14px; flex: none; margin-top: 1px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rapp-check .ok svg { stroke: var(--brand-2); }
.rapp-check .no     { color: var(--warn-2); }
.rapp-check .no svg { stroke: var(--warn); }

.rapp-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  font-size: 11.5px;
  color: var(--ink-3);
  background: rgba(255, 255, 255, .02);
}
.rapp-foot b { color: #fff; font-weight: 500; }
.rapp-more { margin-left: auto; color: var(--brand-2); white-space: nowrap; }

.rapp-cap { margin-top: 12px; font-size: 12px; color: var(--ink-3); line-height: 1.55; }

/* заповнення кільця — той самий прийом stroke-dasharray, той самий тригер */
.js .res-app .rapp-ring-val { stroke-dashoffset: 138.23; }
.js .res-app.visible .rapp-ring-val { animation: rappRing 1s var(--ease) .35s forwards; }
@keyframes rappRing { to { stroke-dashoffset: 63.59; } }

/* ---------- Підсумковий рядок ----------
   Текстове посилання, а не кнопка: у сусідніх секціях .btn-line вже
   двічі підряд, третя зробила б сторінку настирливою, а секцію — важчою. */
.res-foot {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  font-size: 14.5px;
  color: var(--ink-3);
}
.res-foot a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--brand-2);
  border-bottom: 1px solid var(--brand-line-2);
  transition: color .2s, border-color .2s;
}
.res-foot a:hover { color: var(--brand-3); border-color: var(--brand-3); }
.res-foot svg { width: 15px; height: 15px; stroke: currentColor; fill: none; transition: transform .25s var(--ease); }
.res-foot a:hover svg { transform: translateX(3px); }

/* ---------- Адаптив ---------- */
/* Поріг саме 1200 (ширина .container), а не «зручні» 1080: кегль
   підписів у SVG заданий в юнітах viewBox і зменшується разом із
   графіком. При двох колонках на вужчому вікні графік стискався б до
   ~575px (масштаб 0.82) і вісь впала б до ~10.7px. Із цим порогом
   двоколонковий режим завжди має контейнер 1152px, тобто графік рівно
   643px — підписи стабільні на будь-якому широкому екрані. */
@media (max-width: 1200px) {
  .result-head { grid-template-columns: 1fr; align-items: start; }
  /* Одна колонка з обмеженою шириною: розтягнутий на весь екран
     «скріншот» перестає читатись як екран. */
  .res-stage { grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 720px; margin: 0 auto; }
}

@media (max-width: 860px) {
  .result { padding: 76px 0; }
}

/* Проміжна сходинка кегля. В одноколонковому режимі ширина графіка
   дорівнює ширині екрана мінус поля, тож між 640 і 720px він падає до
   ~597px (масштаб 0.85) і вісь просіла б до 10.7px. Один м'який
   підйом тримає підписи на ≈12.4–14.4px по всьому діапазону. */
@media (max-width: 720px) {
  .rch-ylab text { font-size: 14.5px; }
  .rch-xlab text { font-size: 15px; }
  .rch-pt text   { font-size: 14px; }
  .rch-v { font-size: 16.5px; }
  .rch-d { font-size: 12.5px; }
}

@media (max-width: 640px) {
  /* Замість стискання підписів до нечитабельних 8px — власна горизонтальна
     прокрутка графіка. Ключові числа продубльовані в HTML-легенді нижче,
     тож користувач, який не гортатиме, нічого критичного не втрачає. */
  .rch-plot { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .rch-svg { min-width: 580px; }
  .rch-hint { display: block; }
  /* Нижче 640px графік упирається в min-width, масштаб фіксується на
     0.83 — кегль піднімаємо ще на крок, до ≈12.4–13.3px. */
  .rch-ylab text { font-size: 15.5px; }
  .rch-xlab text { font-size: 16px; }
  .rch-pt text   { font-size: 15px; }
  .rch-v { font-size: 17px; }
  .rch-d { font-size: 13px; }

  .rapp-row { grid-template-columns: 30px minmax(0, 1fr) 54px; padding: 10px 12px; }
  .rapp-ava { width: 30px; height: 30px; }
  .rapp-bar, .rapp-filters, .rapp-detail, .rapp-foot { padding-left: 12px; padding-right: 12px; }
  .rapp-date { display: none; }
}

/* ---------- Зменшений рух ----------
   Глобальне правило у style.css обнуляє ТРИВАЛОСТІ, але не затримки:
   анімація з delay .85s і fill forwards протримала б цифри невидимими.
   Тому тут анімації знімаються явно, а статичні значення вже фінальні.
   !important — на випадок, якщо цей блок опиниться в файлі вище за
   глобальний @media (prefers-reduced-motion: reduce). */
@media (prefers-reduced-motion: reduce) {
  .js .res-chart .rch-line,
  .js .res-chart.visible .rch-line {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }
  .js .res-chart .rch-in,
  .js .res-chart.visible .rch-in {
    opacity: 1 !important;
    animation: none !important;
  }
  .js .res-app .rapp-ring-val,
  .js .res-app.visible .rapp-ring-val {
    stroke-dashoffset: 63.59 !important;
    animation: none !important;
  }
  .res-foot a:hover svg { transform: none; }
}


/* ============================================================
   ПРОДУКТ — справжні скриншоти кабінету
   Місце: між #result і #integrations. Секції вище пояснюють логіку
   схемами у власній темній мові сайту; тут іде доказ — реальні
   екрани продукту. Тому заголовок прямо називає перехід.

   ЧОМУ СВІТЛІ КАРТИНКИ НА ТЕМНОМУ. Продукт світлий, і перемальовувати
   його під сайт означало б показати те, чого клієнт не отримає.
   Замість цього кадр зроблено «вікном»: безель, хромова панель і
   тінь відділяють світлий екран від графітового тла, а індиго сайту
   зведено до тону 244° — того самого, що акцент усередині продукту.

   ПРАВИЛО ЕКРАНА дотримане: індиго — усе середовище (таби, кант,
   пляма). Другого акценту немає: у секції немає залитої кнопки, тож
   вольт сюди не заходить, як і в сусідній #result.
   ============================================================ */
.product > .container { position: relative; z-index: 2; }

.pr-head { max-width: 780px; margin-bottom: 34px; }
.pr-head .lead { margin-top: 14px; }

/* ---------- Таби ----------
   Горизонтальна стрічка; на вузьких екранах прокручується вбік,
   а не переносить рядок — перенос ламає ритм над кадром. */
.pr-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.pr-tabs::-webkit-scrollbar { display: none; }

.pr-tab {
  flex: none;
  padding: 9px 16px;
  border-radius: var(--radius-chip);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.pr-tab:hover { color: var(--ink); border-color: var(--line-2); }
.pr-tab[aria-selected="true"] {
  color: #fff;
  background: var(--brand-dim);
  border-color: var(--brand-line-2);
}
.pr-tab:focus-visible { outline: 2px solid var(--brand-3); outline-offset: 2px; }

/* ---------- Сцена ----------
   Панелі складені в одну клітинку грида: висота кадру не стрибає
   при перемиканні, бо контейнер тримає найвищу з них. */
/* min-width: 0 обов'язковий: на вузьких екранах картинка в кадрі отримує
   фіксовану ширину 720px, а grid-елемент за замовчуванням не звужується
   менше за вміст — без цього доріжка розсувала б усю секцію вбік. */
.pr-stage { display: grid; min-width: 0; }
.pr-pane {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.pr-pane[data-on="1"] { opacity: 1; visibility: visible; transform: none; }
/* без JS усі панелі просто йдуть одна за одною — нічого не ховаємо */
html:not(.js) .pr-stage { display: block; }
html:not(.js) .pr-pane { opacity: 1; visibility: visible; transform: none; margin-bottom: 40px; }
html:not(.js) .pr-tabs { display: none; }

/* ---------- Кадр ----------
   Безель + хромова панель. Це не «браузер заради браузера»: рамка
   дає світлому скриншоту край, інакше він висить на темному тлі
   як вирізаний прямокутник. */
.shot {
  min-width: 0;
  border-radius: 18px;
  border: 1px solid var(--line-2);
  background: linear-gradient(160deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .035) 100%);
  padding: 0 0 9px;
  box-shadow:
    0 50px 100px -46px rgba(0, 0, 0, .95),
    0 0 0 1px rgba(101, 91, 241, .12),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}
.shot-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
}
.shot-dots { display: flex; gap: 6px; flex: none; }
.shot-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.shot-url {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 12px;
  color: var(--ink-3);
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--line);
  border-radius: var(--radius-chip);
  padding: 4px 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* врівноважує три крапки ліворуч, щоб адреса лишалась по центру */
.shot-bar::after { content: ''; width: 39px; flex: none; }

.shot-view {
  margin: 0 9px;
  border-radius: 11px;
  overflow: hidden;
  background: #F8F9FD;                 /* тло самого продукту — до завантаження картинки */
  line-height: 0;
}
.shot-view img { width: 100%; height: auto; }

/* Довгий звіт: кадр фіксованої висоти з власною прокруткою.
   Стиснути сторінку на 1536px до ширини колонки означало б 0.4 масштабу —
   від звіту лишились би сірі смуги замість тексту. */
.shot--long .shot-view {
  max-height: 620px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.shot--long { position: relative; }
.shot--long::after {
  content: '';
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  height: 74px;
  border-radius: 0 0 11px 11px;
  background: linear-gradient(to top, rgba(10, 12, 22, .55), transparent);
  pointer-events: none;
}

.pr-cap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 860px;
}
.pr-cap b { color: #fff; font-weight: 500; display: block; margin-bottom: 2px; font-family: var(--head); font-size: 16px; }
.pr-cap::before {
  content: '';
  flex: none;
  width: 2px;
  align-self: stretch;
  border-radius: 2px;
  background: var(--brand-line-2);
}

/* підказка про горизонтальну прокрутку кадру — вмикається лише на вузьких
   екранах, де картинка отримує власний скрол (див. @media 560px нижче) */
.pr-hint {
  display: none;
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-3);
}

.pr-foot {
  margin-top: 30px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 760px;
}
.pr-foot b { color: #fff; font-weight: 500; }

@media (max-width: 860px) {
  .shot { border-radius: 14px; }
  .shot-view { margin: 0 7px; border-radius: 8px; }
  .shot--long .shot-view { max-height: 460px; }
  .pr-cap { font-size: 14px; }
}
@media (max-width: 560px) {
  .shot-bar { padding: 9px 11px; }
  .shot-url { font-size: 11px; }
  .shot-dots i { width: 7px; height: 7px; }
  .shot-bar::after { width: 31px; }
  /* Скриншот на 360px — це масштаб 0.27: інтерфейс перестає читатись.
     Даємо кадру власну горизонтальну прокрутку в майже повний розмір. */
  .shot-view { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .shot-view img { max-width: none; width: 720px; }
  .shot--long .shot-view img { width: 100%; }
  .pr-hint { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .pr-pane { transition: none; }
}

/* ---------- Інтеграції ---------- */
/* підпис над сіткою: відділяє «готове» від «зробимо під вас» */
.grid-label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 16px;
}
.grid-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-2), transparent);
}

.integr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 14px; }
.integr {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 18px;
  transition: transform .25s var(--ease), border-color .25s, background .25s;
}
.integr:hover { transform: translateY(-3px); border-color: var(--brand-line-2); background: var(--surface-2); }
.integr .i-mark {
  width: 38px; height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-family: var(--head);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  background: var(--grad-brand);
  flex: none;
}
.integr b { font-size: 14.5px; font-weight: 400; }
.integr small { display: block; font-size: 11.5px; color: var(--ink-3); }

/* ---------- Блок «розробимо під вас»: матове скло ----------
   Скло працює лише тоді, коли під ним є що розмивати, тому секція
   отримує власну світлову пляму (.build::after) під панеллю. */
.build {
  position: relative;
  margin-top: 34px;
  padding: 36px;
  border-radius: 28px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .02) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow:
    0 30px 70px -40px rgba(0, 0, 0, .95),
    inset 0 1px 0 rgba(255, 255, 255, .14);   /* волосяний блік по верхньому канту */
  overflow: hidden;
}
/* підсвітка зсередини — просвічує крізь матове тіло */
.build::before {
  content: '';
  position: absolute;
  width: 460px; height: 460px;
  top: -230px; right: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(101, 91, 241, .5) 0%, transparent 70%);
  filter: blur(70px);
  pointer-events: none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .build { background: linear-gradient(150deg, #1B2038 0%, #141830 100%); }
}

.build-head { position: relative; z-index: 1; max-width: 620px; margin-bottom: 30px; }
.build-head h3 { font-size: clamp(22px, 2.4vw, 28px); margin-bottom: 12px; }
.build-head p { color: var(--ink-2); font-size: 15.5px; }
.eyebrow--sm { font-size: 11px; padding: 6px 14px; margin-bottom: 16px; }

.build-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 16px;
  margin-bottom: 30px;
}
.build-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  padding: 22px 20px;
  transition: border-color .25s, background .25s, transform .25s var(--ease);
}
.build-card:hover { border-color: var(--brand-line-2); background: rgba(255, 255, 255, .06); transform: translateY(-3px); }
.build-card .b-ico {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--brand-dim);
  border: 1px solid var(--brand-line);
  margin-bottom: 14px;
}
.build-card .b-ico svg { width: 20px; height: 20px; stroke: var(--brand-2); }
.build-card h4 { font-size: 16.5px; font-weight: 500; margin-bottom: 8px; }
.build-card p { font-size: 14px; color: var(--ink-2); }
.build > .btn { position: relative; z-index: 1; }

/* ============================================================
   ДЛЯ КОГО — матове скло на світловому підложжі
   Замінює блок «Для кого» у style.css цілком (рядки 969–1064).
   Палітра не розширюється: індиго --brand / --brand-2 / --brand-3
   і біле світло різної прозорості. Вольта і warn у кадрі немає.
   ============================================================ */

/* ---------- 1. Підложжя секції ----------
   backdrop-filter розмиває лише те, що НАМАЛЬОВАНО ПІД карткою.
   У розмітці секції вже є три .glow, але всі вони притиснуті донизу, тож
   верхній ряд карток стояв би над рівним --bg і скло там читалося б як сіра
   плашка. Додаємо два власні шари (псевдоелементи, розмітку не чіпаємо):
   ::before — світло рівно за рядом карток (доповнює .glow, не дублює його);
   ::after  — крапкова сітка тим самим прийомом, що й .hero-grid.
   Сітка тут працює на двох рівнях: поза карткою крапки чіткі, під карткою
   вони усереднюються в рівний молочний туман — саме цей контраст «різке
   зовні / гладке всередині» і доводить оку, що перед ним скло. */
#audience { position: relative; }

#audience::before,
#audience::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Світло. Перший стоп — широка смуга рівно за рядом карток: вона світить
   під усі чотири однаково, щоб крайня права не вийшла помітно тьмянішою
   за ліву. Два акценти по краях дають діагональ, але не строкатість. */
#audience::before {
  background:
    radial-gradient(ellipse 64% 36% at 50% 48%, rgba(101, 91, 241, .26) 0%, transparent 70%),
    radial-gradient(ellipse 32% 32% at  8% 36%, rgba(101, 91, 241, .34) 0%, transparent 66%),
    radial-gradient(ellipse 32% 32% at 92% 58%, rgba(165, 159, 249, .20) 0%, transparent 66%);
}

/* Текстура під склом. Alpha дібрана по скріншоту: нижче ~.3 крапки на DPR 1
   просто зникають і доводити ефект нічому. Це головний регулятор «чіткості». */
#audience::after {
  background-image: radial-gradient(circle, rgba(165, 159, 249, .40) 1.3px, transparent 1.9px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 78% 70% at 50% 50%, #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse 78% 70% at 50% 50%, #000 0%, transparent 78%);
}

/* Контент секції — над підложжям. z-index без filter/opacity/isolation створює
   лише контекст накладання і НЕ створює backdrop root, тож картки й далі
   бачать під собою і плями, і сітку. */
#audience > .container { position: relative; z-index: 1; }


/* ---------- 2. Сітка ---------- */
.who-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 18px;
}


/* ---------- 3. Картка-скло ----------
   Чотири однакові картки в ряд: щоб ряд не став строкатим, джерело світла
   в усіх одне й те саме (верхній лівий кут) і колір один — індиго.
   Різницю дає лише те, що лежить під склом. */
.who-card {
  position: relative;
  border-radius: var(--radius-card);
  padding: 30px 26px;

  /* Тіло скла — три шари, усі з наявної палітри:
     1) білий відсвіт у верхньому лівому куті (це СВІТЛО, не колір);
     2) слабкий індиговий підтон справа зверху;
     3) базова заливка, навмисно майже прозора — колір приходить знизу,
        крізь розмиття; щільна заливка вбила б увесь ефект. */
  background:
    radial-gradient(130% 92% at 6% -8%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 46%),
    radial-gradient(88% 70% at 100% 4%, rgba(146, 139, 244, .14) 0%, rgba(146, 139, 244, 0) 58%),
    linear-gradient(168deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .03) 48%, rgba(101, 91, 241, .12) 100%);

  /* -webkit- ОБОВ'ЯЗКОВО поруч: Safari і старі WebKit-збірки.
     brightness і saturate — це і є «дорого»: вони підіймають світло, яке вже
     лежить під карткою, замість того щоб додавати новий колір зверху. */
  -webkit-backdrop-filter: blur(24px) saturate(1.75) brightness(1.12);
          backdrop-filter: blur(24px) saturate(1.75) brightness(1.12);

  /* Базова кромка. У браузерах з mask-composite її перекриває градієнтний
     кант (::before нижче), тут вона лишається запобіжником. */
  border: 1px solid var(--line);

  /* Тінь у три шари: далека м'яка (картка «висить»), коротка щільна (контакт
     з тлом) і внутрішній волосяний блік — саме він робить скло «товстим».
     Кольорового ореолу немає навмисно: на gap 18px він заліз би на сусідку. */
  box-shadow:
    0 34px 64px -26px rgba(4, 6, 14, .95),
    0 8px 20px -12px rgba(4, 6, 14, .60),
    inset 0 1px 0 rgba(255, 255, 255, .12);

  /* overflow: hidden свідомо НЕ ставимо: усі шари всередині коробки,
     а кант мусить жити рівно на кромці (inset: -1px) і не обрізатися. */
  transition:
    transform    .4s var(--ease),
    box-shadow   .4s var(--ease),
    border-color .3s;
}

/* Градієнтний кант — той самий прийом, що вже працює в .call-card::before:
   рамка-градієнт через mask-composite. inset: -1px + padding: 1px кладе його
   рівно в смугу border, без подвійної кромки і без зсуву макета.
   Обгортка @supports обов'язкова: без mask-composite псевдоелемент залив би
   картку суцільним градієнтом. Жоден стоп не йде в нуль — кромка не зникає
   ніде по периметру, тож ряд карток лишається рівним. */
@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
  .who-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    background: linear-gradient(150deg,
      rgba(255, 255, 255, .46) 0%,
      rgba(165, 159, 249, .26) 24%,
      rgba(255, 255, 255, .08) 52%,
      rgba(101, 91, 241, .30) 78%,
      rgba(165, 159, 249, .42) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    opacity: .9;
    transition: opacity .4s var(--ease);
  }
  .who-card:hover::before { opacity: 1; }
}

/* Внутрішній відблиск, що вмикається на ховері. Живе під контентом
   (у контенту z-index: 1), тому не з'їдає контраст тексту. */
.who-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(96% 74% at 16% 0%, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 62%);
  transition: opacity .4s var(--ease);
}

/* Ховер — мова всього сайту (--brand-line-2) плюс глибша тінь.
   Ніяких безкінечних анімацій. */
.who-card:hover {
  transform: translateY(-6px);
  border-color: var(--brand-line-2);
  box-shadow:
    0 42px 76px -28px rgba(4, 6, 14, .95),
    0 8px 20px -12px rgba(4, 6, 14, .60),
    0 0 0 1px rgba(101, 91, 241, .20),
    inset 0 1px 0 rgba(255, 255, 255, .14);
}
.who-card:hover::after { opacity: 1; }


/* ---------- 4. Reveal: поява без прозорості ----------
   opacity < 1 робить елемент backdrop root: поки триває поява, картка
   розмиває не фон секції, а порожнечу, і скло «вмикається» ривком у кінці.
   Тому для .who-card лишаємо проліт, але не прозорість — розмітку не чіпаємо.
   Другий рядок повертає швидкий перехід після появи, третій лагодить реальний
   баг: .js .reveal.visible (0,3,0) перебиває .who-card:hover (0,2,0),
   через що підйом на ховері з увімкненим JS зараз просто не працює. */
.js .who-grid .who-card.reveal {
  opacity: 1;
  transform: translateY(22px);
  transition: transform .7s var(--ease);
}
.js .who-grid .who-card.reveal.visible {
  transform: none;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.js .who-grid .who-card.reveal.visible:hover { transform: translateY(-6px); }


/* ---------- 5. Контент (над обома псевдоелементами) ---------- */

/* іконка у скляному бейджі — той самий рецепт, що й у .build-card */
.who-card .w-ico {
  position: relative;
  z-index: 1;
  width: 44px; height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 6px 16px -10px rgba(4, 6, 14, .9);
  margin-bottom: 18px;
}
.who-card .w-ico svg { width: 21px; height: 21px; stroke: var(--brand-3); }

.who-card h3 {
  position: relative;
  z-index: 1;
  color: #fff;                     /* заголовок — чистий білий, максимальний контраст */
  margin-bottom: 14px;
  letter-spacing: -.015em;
}

.who-card ul {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.who-card li {
  position: relative;
  z-index: 1;
  padding-left: 22px;
  font-size: 14.5px;
  color: var(--ink-2);             /* контраст пунктів не чіпаємо */
}

/* Маркер — маленька скляна пігулка того ж світла: індиговий градієнт,
   внутрішній блік згори і слабке світіння назовні. */
.who-card li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 8px; height: 8px;
  border-radius: 3px;
  background: linear-gradient(150deg, var(--brand-3) 0%, var(--brand) 100%);
  box-shadow:
    0 0 10px rgba(101, 91, 241, .55),
    inset 0 1px 0 rgba(255, 255, 255, .35);
}


/* ---------- 6. Фолбек: браузер без backdrop-filter ----------
   Заливка в 2–7% білого без розмиття дала б напівпрозорий прямокутник
   з нечитабельним текстом, тому картка стає щільною поверхнею на базі
   --surface з індиговим нахилом згори. Кант і тіні лишаються — виглядає
   скромніше, але цілісно. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .who-card {
    background:
      radial-gradient(130% 92% at 6% -8%, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, 0) 46%),
      linear-gradient(168deg, rgba(101, 91, 241, .22) 0%, rgba(23, 27, 46, .96) 54%, rgba(20, 24, 42, .98) 100%);
    border-color: var(--line-2);
  }
}

/* Системна вимога «менше прозорості» — той самий щільний варіант */
@media (prefers-reduced-transparency: reduce) {
  .who-card {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    background:
      radial-gradient(130% 92% at 6% -8%, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, 0) 46%),
      linear-gradient(168deg, rgba(101, 91, 241, .22) 0%, rgba(23, 27, 46, .96) 54%, rgba(20, 24, 42, .98) 100%);
  }
}


/* ---------- 7. Мобільний ----------
   blur на великій площі — найдорожча операція композитора на слабких GPU:
   радіус менший, заливка трохи щільніша, сітка тихіша. */
@media (max-width: 560px) {
  #audience::after { opacity: .5; }
  .who-card {
    padding: 24px 20px;
    -webkit-backdrop-filter: blur(16px) saturate(1.6) brightness(1.1);
            backdrop-filter: blur(16px) saturate(1.6) brightness(1.1);
    background:
      radial-gradient(130% 92% at 6% -8%, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 46%),
      linear-gradient(168deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .03) 48%, rgba(101, 91, 241, .12) 100%);
    box-shadow:
      0 18px 38px -20px rgba(4, 6, 14, .9),
      inset 0 1px 0 rgba(255, 255, 255, .09);
  }
}

/* Зменшений рух: глобальне правило обнуляє тривалості — знімаємо і зсуви */
@media (prefers-reduced-motion: reduce) {
  .js .who-grid .who-card.reveal { transform: none; }
  .who-card:hover,
  .js .who-grid .who-card.reveal.visible:hover { transform: none; }
}

/* ---------- Безпека ---------- */
.security {
  background: linear-gradient(150deg, #101426 0%, #0B0E1B 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.sec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 18px; }
.sec-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  background: rgba(255, 255, 255, .03);
}
.sec-card svg { width: 24px; height: 24px; stroke: var(--brand-2); margin-bottom: 14px; }
.sec-card h3 { font-size: 16.5px; margin-bottom: 8px; }
.sec-card p { font-size: 14px; color: var(--ink-2); }

/* ---------- Тарифи ---------- */
/* З чого складається ціна — три доданки в один рядок, зі знаками «+» між ними */
.price-model {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 32px;
}
.pm-item {
  display: flex;
  gap: 14px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
}
.pm-num {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-family: var(--head);
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-2);
  background: var(--brand-dim);
  border: 1px solid var(--brand-line);
}
.pm-item b { display: block; font-weight: 500; font-size: 15.5px; margin-bottom: 5px; }
.pm-item p { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.pm-plus { align-self: center; font-size: 20px; color: var(--ink-3); }

/* stretch (а не start) — картки однакової висоти, кнопки вирівнюються по низу */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 20px; align-items: stretch; }
.plan {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform .3s var(--ease), border-color .3s;
}
.plan:hover { transform: translateY(-4px); border-color: var(--brand-line-2); }
.plan--hot {
  background: linear-gradient(170deg, rgba(101, 91, 241, .18) 0%, var(--surface) 55%);
  border-color: var(--brand-line-2);
  box-shadow: 0 30px 70px -40px rgba(101, 91, 241, .9);
}
.plan .p-badge {
  position: absolute;
  top: 18px; right: 18px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--brand);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 99px;
  padding: 5px 11px;
  font-weight: 500;
}
.plan h3 { font-size: 19px; }
.plan .p-desc { font-size: 14px; color: var(--ink-3); margin-top: -8px; }
.plan .p-price {
  font-family: var(--head);
  font-weight: 700;
  font-size: 36px;
  color: #fff;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.plan .p-price small { font-size: 14px; font-weight: 400; color: var(--ink-3); font-family: var(--text); }
/* друга складова ціни — вартість хвилини; має читатись як частина ціни, не як пункт списку */
.plan .p-rate {
  margin-top: -10px;
  font-size: 14px;
  color: var(--ink-2);
}
.plan .p-rate b { color: var(--brand-3); font-weight: 500; }
.plan .p-setup {
  margin-top: -12px;
  padding-bottom: 4px;
  font-size: 13px;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}

/* приклад рахунку — знімає головне питання «скільки це вийде мені» */
.price-example {
  margin-top: 22px;
  padding: 18px 22px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.6;
}
.price-example b { color: #fff; font-weight: 500; }
.plan ul { display: flex; flex-direction: column; gap: 11px; }
.plan li { display: flex; gap: 10px; font-size: 14.5px; color: var(--ink-2); align-items: flex-start; }
.plan li svg { width: 17px; height: 17px; stroke: var(--brand-2); margin-top: 3px; flex: none; }
.plan .btn { width: 100%; margin-top: auto; }
.plans-note { margin-top: 22px; font-size: 13.5px; color: var(--ink-3); text-align: center; }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .25s, background .25s;
}
.faq details[open] { border-color: var(--brand-line-2); background: var(--surface-2); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--head);
  font-weight: 500;
  font-size: 16.5px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  margin-left: auto;
  width: 11px; height: 11px;
  border-right: 2px solid var(--brand-2);
  border-bottom: 2px solid var(--brand-2);
  transform: rotate(45deg);
  transition: transform .25s var(--ease);
  flex: none;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .faq-body { padding: 0 24px 22px; color: var(--ink-2); font-size: 15px; }

/* ---------- CTA + форма ---------- */
.cta { position: relative; overflow: hidden; }
.cta-inner {
  position: relative;
  z-index: 2;
  background: linear-gradient(150deg, #1A1F3A 0%, #10132A 100%);
  border: 1px solid var(--line-2);
  border-radius: 32px;
  padding: 54px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .95);
}
.cta-inner::before {
  content: '';
  position: absolute;
  width: 420px; height: 420px;
  top: -180px; right: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(101, 91, 241, .44), transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}
.cta-bullets { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.cta-bullets li { display: flex; gap: 11px; align-items: center; font-size: 15px; color: var(--ink-2); }
.cta-bullets svg { width: 19px; height: 19px; stroke: var(--brand-2); flex: none; }

.form { display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 2; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 12.5px; color: var(--ink-3); letter-spacing: .02em; }
.field input, .field textarea, .field select {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line-2);
  border-radius: 13px;
  padding: 14px 16px;
  font-size: 15px;
  color: #fff;
  transition: border-color .2s, background .2s;
}
.field input::placeholder, .field textarea::placeholder { color: #5C6484; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--brand);
  background: rgba(255, 255, 255, .08);
}
.field select option { background: var(--surface); color: #fff; }
.field textarea { resize: vertical; min-height: 92px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form .btn { margin-top: 4px; }
.form-note { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.form-status { font-size: 14px; min-height: 20px; color: var(--brand-3); }
.form-status.err { color: var(--warn); }
/* Пастка для ботів: прибрана з потоку, але не display:none — частина ботів
   ігнорує приховані таким чином поля */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---------- Футер ---------- */
.footer {
  border-top: 1px solid var(--line);
  background: #080A13;
  padding: 60px 0 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.footer .logo { margin-bottom: 16px; }
.footer p { font-size: 14px; color: var(--ink-3); max-width: 320px; }
.footer h4 {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 16px;
  font-weight: 500;
}
.footer ul { display: flex; flex-direction: column; gap: 10px; }
.footer li a { font-size: 14.5px; color: var(--ink-2); transition: color .2s; }
.footer li a:hover { color: var(--brand-2); }
.footer-bottom {
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-3);
}
.footer-bottom a:hover { color: var(--ink-2); }

/* ---------- Мобільне меню ---------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(8, 10, 19, .97);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  padding: 110px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.mobile-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-menu a {
  font-family: var(--head);
  font-size: 22px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.mobile-menu .btn { margin-top: 24px; font-size: 16px; border-bottom: 0; }

/* ---------- Reveal ----------
   За замовчуванням блоки видимі. Ховає їх лише клас .js на <html>,
   який ставить інлайн-скрипт — тож без JS (або якщо скрипт не завантажився)
   сторінка читається повністю. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.visible { opacity: 1; transform: translateY(0); }

/* ---------- Адаптив ---------- */
@media (max-width: 980px) {
  /* три доданки ціни стають стовпчиком, знаки «+» зайві */
  .price-model { grid-template-columns: 1fr; gap: 10px; }
  .pm-plus { display: none; }
}

@media (max-width: 1080px) {
  .hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .hero { padding-top: 128px; }
  .hero-visual { max-width: 620px; }
  .an-grid { grid-template-columns: 1fr; gap: 40px; }
  .cta-inner { grid-template-columns: 1fr; gap: 36px; padding: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 860px) {
  .nav { display: none; }
  .header-actions { display: none; }
  .burger { display: flex; }
  .header-inner { height: 58px; padding-right: 6px; }
  .section { padding: 76px 0; }
  .kpis { grid-template-columns: 1fr; }
  .cc-float { right: 0; bottom: -16px; }
}

@media (max-width: 560px) {
  .container { padding: 0 18px; }
  .hero { padding: 116px 0 64px; }
  .call-card { padding: 16px; }
  .cc-line { grid-template-columns: 62px 1fr; gap: 9px; font-size: 12.5px; }
  .cc-lines { min-height: 260px; }
  .bar-row { grid-template-columns: 100px 1fr 40px; }
  .form-row { grid-template-columns: 1fr; }
  .cta-inner { padding: 28px 22px; border-radius: 24px; }
  .footer-grid { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .hero-actions .btn { width: auto; flex: 1 1 auto; }
}

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