/* ============================================================
   askip — лендінг
   Бренд за AskIP Brand Book (2026): #461E86. Гарнітура одна — Inter
   (свідоме відхилення від брендбука, який називав Rubik + Open Sans).
   Мова макета — реєстр: волосяні лінійки, розрядка й табличні цифри.
   ============================================================ */

:root {
  /* ґрунт і чорнило — нейтралі з фіолетовим ухилом, не сірі «за замовчуванням» */
  --paper:      #ffffff;
  --paper-2:    #f7f6fa;
  --ink:        #16112b;
  --ink-2:      #4a4463;
  --ink-3:      #7a7490;
  --rule:       #e4e1ec;
  --rule-soft:  #eeecf4;

  --purple:      #461e86;
  --purple-deep: #33155f;
  --purple-wash: #f1ecfa;
  --night:       #17102e;
  --night-2:     #0f0a20;

  --warn: #a8661a;
  --good: #1e7a57;

  /* шкала відступів, крок 8 — усі вертикальні ритми беруться звідси */
  --s1: 4px;  --s2: 8px;   --s3: 12px;  --s4: 16px;  --s5: 24px;
  --s6: 32px; --s7: 48px;  --s8: 64px;  --s9: 96px;  --s10: 128px;

  /* типографічна шкала */
  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: 1.0625rem;
  --t-lg:   1.1875rem;
  --t-xl:   1.375rem;
  --t-2xl:  clamp(1.55rem, 3.2vw, 2.1rem);
  --t-3xl:  clamp(2.1rem, 5vw, 3.35rem);

  /* Один шрифт на весь сайт. Роль «реєстрового» набору тепер тримають
     не друга гарнітура, а розрядка й табличні цифри — Inter має і те, і те,
     і має повну кирилицю. */
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: Inter, -apple-system, BlinkMacSystemFont, sans-serif;

  --header-h: 68px;
  /* Одна міра на всю сторінку: аркуш продукту широкий, але лівий край
     у нього спільний із заголовками й рештою секцій. Дві різні обгортки
     давали дві різні ліві лінії — це найпомітніше з усіх зміщень. */
  --measure: 1200px;

  /* ---- поверхні й висота ----
     Три рівні глибини, і не більше. Рівень 0 — сама сторінка, без тіні.
     Рівень 1 — допоміжна поверхня всередині картки. Рівень 2 — головний
     аркуш продукту, єдиний по-справжньому піднятий об'єкт на сторінці.
     Якщо тінь буде на всьому, вона не означатиме нічого. */
  --surface:        #ffffff;
  --surface-2:      #faf9fc;
  --surface-border: rgba(22, 17, 43, .09);

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;

  --elev-1:
    0 1px 2px rgba(22, 17, 43, .04),
    0 2px 8px -2px rgba(22, 17, 43, .05);
  --elev-2:
    0 1px 2px rgba(22, 17, 43, .10),
    0 10px 26px -8px rgba(26, 12, 58, .22),
    0 36px 72px -28px rgba(26, 12, 58, .40);
  --elev-3:
    0 1px 2px rgba(22, 17, 43, .06),
    0 6px 16px -6px rgba(22, 17, 43, .12);

  /* ледь помітна грань зверху — саме вона читається як фізична поверхня */
  --edge: inset 0 1px 0 rgba(255, 255, 255, .7);

  /* Перехльост картки на hero прибрано: продукт стоїть у своїй смузі,
     а не наїжджає на заголовок. */
  --overlap: 0px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* Поля й кнопки шрифт від body НЕ успадковують — у них своя типова
   гарнітура браузера. Без цього рядка на сторінці лишається чужий Arial. */
input, button, select, textarea { font-family: inherit; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; margin: 0; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--purple); }

/* цифри, що стоять у стовпчик, мають бути однакової ширини */
.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* моноширинного більше немає, тож рівність цифр тримаємо явно */
body { font-variant-numeric: tabular-nums; }

.wrap { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--s5); }
@media (min-width: 720px) { .wrap { padding-inline: var(--s6); } }
/* Вузькі блоки звужуються ЗСЕРЕДИНИ, а не центруванням обгортки:
   інакше вони злітають зі спільної лівої лінії набору. */

section[id] { scroll-margin-top: calc(var(--header-h) + var(--s4)); }

.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;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--purple); color: #fff; padding: var(--s3) var(--s5); border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

:where(a, button, input, select, summary):focus-visible {
  outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 3px;
}

/* ---------------- шапка ---------------- */

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease;
}
.header-inner {
  display: flex; align-items: center; gap: var(--s5);
  min-height: var(--header-h);
}

/* Раніше від'ємні поля гасили падінг плашки, щоб на лівій лінії стояв
   САМ ЗНАК. Поки плашка була прозора, це працювало. Щойно вона стала
   видимою фіолетовою на білій шапці, її край поїхав лівіше за всю
   сторінку й почав читатись як перекіс. Тепер по лінії стоїть плашка. */
.brand {
  display: flex; align-items: center; line-height: 0;
  padding: var(--s2) var(--s3); margin-block: calc(var(--s2) * -1);
  border-radius: 6px; background: transparent;
  transition: background .25s ease;
}
.brand img { width: 84px; height: auto; }
/* Тут була вада: у стані is-solid мінявся колір ТЕКСТУ, але фон смуги
   лишався прозорим. На білих секціях це не впадало в око, а на фіолетових
   меню зливалося з ґрунтом і на нього наїжджав текст, що прокручувався
   під смугою. Смуга має бути непрозорою скрізь, крім hero. */
.site-header.is-solid {
  background: var(--paper);
  border-bottom-color: var(--rule);
}
.site-header.is-solid .brand { background: var(--purple); }

.nav { display: none; margin-left: auto; gap: var(--s5); align-items: center; }
.header-inner .cta-head { margin-left: auto; }
@media (min-width: 900px) {
  .nav { display: flex; }
  .header-inner .cta-head { margin-left: 0; }
}
.nav a {
  color: rgba(255, 255, 255, .78); text-decoration: none;
  font-size: var(--t-sm); line-height: 1.2; padding-block: var(--s2);
  border-bottom: 1px solid transparent;
}
.nav a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, .5); }
.site-header.is-solid .nav a { color: var(--ink-2); }
.site-header.is-solid .nav a:hover { color: var(--purple); border-bottom-color: var(--purple); }

/* ---------------- кнопки ---------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 500; font-size: var(--t-sm);
  line-height: 1.2; padding: var(--s3) var(--s5);
  background: var(--purple); color: #fff; border: 1px solid var(--purple);
  border-radius: 4px; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.btn:hover { background: var(--purple-deep); border-color: var(--purple-deep); }
.btn[disabled] { opacity: .55; cursor: default; }
.btn--lg { font-size: var(--t-base); padding: var(--s4) var(--s6); }
.btn--light { background: #fff; color: var(--purple); border-color: #fff; }
.btn--light:hover { background: var(--purple-wash); border-color: var(--purple-wash); }
.btn--line { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }
.btn--line:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.site-header.is-solid .btn--line { color: #fff; background: var(--purple); border-color: var(--purple); }
.site-header.is-solid .btn--line:hover { background: var(--purple-deep); border-color: var(--purple-deep); }

/* Тиха кнопка: у hero вона свідомо НЕ конкурує з аркушем продукту. */
.btn--quiet {
  background: rgba(255, 255, 255, .09); color: #fff;
  border-color: rgba(255, 255, 255, .26);
}
.btn--quiet:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .5); }

/* ---------------- hero ---------------- */

/* Hero тримає позицію, але не забирає весь екран: одразу під ним має
   з'явитися сам інструмент. Ґрунт і поле точок лишаються без змін. */
.hero {
  position: relative; isolation: isolate;
  /* На перший екран не повинен визирати край наступної секції: hero
     займає всю висоту вікна. svh, а не vh — щоб на мобільному панель
     браузера не з'їдала низ. */
  min-height: 100svh;
  display: grid; align-items: center;
  padding-top: var(--header-h);
  padding-bottom: var(--overlap);
  background: linear-gradient(178deg, var(--night) 0%, var(--night-2) 100%);
  color: #fff; overflow: hidden;
}
#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }

/* Ширину тут задають самі рядки (h1 22ch, лід 46ch), а НЕ обгортка:
   max-width на .hero-inner перебивав ширину .wrap і зсував увесь hero
   із лівої лінії сторінки на 270 px праворуч. */
.hero-inner {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--s4);
  padding-block: var(--s9) var(--s8);
}
.hero-inner .status { margin-bottom: var(--s2); }
.hero-inner h1 { margin-bottom: var(--s2); }

/* принцип продукту, а не гасло: тому тихо й у рядок */
.hero-principle {
  font-size: var(--t-sm); color: #9d8fc4;
  padding-top: var(--s3); border-top: 1px solid rgba(255, 255, 255, .12);
  align-self: stretch; max-width: 34ch;
}

.status {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .08em;
  text-transform: uppercase; color: #b9a9dc;
}
.status::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: #b9a9dc; animation: blink 2.4s ease-in-out infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .status::before { animation: none; } }

.hero h1 {
  font-size: var(--t-3xl); font-weight: 600; line-height: 1.06;
  letter-spacing: -.025em; text-wrap: balance; max-width: 22ch;
}
.hero-lead {
  font-size: var(--t-lg); color: #c5b9dd; max-width: 46ch; line-height: 1.55;
}
.lb { display: none; }
@media (min-width: 640px) { .lb { display: inline; } }

.scroll-cue {
  position: absolute; bottom: var(--s6);
  left: max(var(--s5), calc((100% - var(--measure)) / 2 + var(--s5)));
  display: inline-flex; align-items: center; gap: var(--s3);
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255, 255, 255, .45); text-decoration: none;
}
@media (min-width: 720px) {
  .scroll-cue { left: max(var(--s6), calc((100% - var(--measure)) / 2 + var(--s6))); }
}
.scroll-cue:hover { color: #fff; }
.scroll-cue::before {
  content: ""; width: 40px; height: 1px; background: currentColor;
}

/* ---------------- каркас секцій ---------------- */

.section { padding-block: var(--s9); }
.section--tint { background: var(--paper-2); }
.section + .section:not(.section--tint):not(.section--dark) { border-top: 1px solid var(--rule-soft); }

.section-head { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s7); max-width: 62ch; }
.eyebrow {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--purple);
}
.section--dark .eyebrow { color: #b9a9dc; }
.section h2 {
  font-size: var(--t-2xl); line-height: 1.14; letter-spacing: -.02em;
  text-wrap: balance; max-width: 22ch;
}
.section-lead { color: var(--ink-2); max-width: 62ch; }

.reveal { }
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* ============================================================
   ПРОДУКТ — справжній пошук по реєстру.
   ============================================================ */

/* Аркуш свідомо виїжджає вгору на фіолетовий ґрунт hero і закінчується
   вже на світлій сторінці. Це прибирає вигляд «стосу прямокутних секцій»
   і робить продукт головним об'єктом, а не ще однією секцією. */
.stage {
  position: relative; z-index: 3;
  margin-top: calc(var(--overlap) * -1);
  padding-block: var(--s8);
}

.stage-foot {
  margin-top: var(--s5); font-size: var(--t-xs); color: var(--ink-3);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
}

/* ---- аркуш ---- */

/* Краї інших результатів позаду картки прибрано: коли аркуш майже на всю
   секцію, вони вилазили за нижній край і читались як зламана верстка,
   а не як стос. Глибину тримає сама тінь. */
.sheet-wrap { position: relative; }

.sheet {
  position: relative; z-index: 1;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-2), var(--edge);
}
.sheet > * + * { border-top: 1px solid var(--rule-soft); }
.sheet-row { padding: var(--s5); }
@media (min-width: 760px) { .sheet-row { padding: var(--s6) var(--s7); } }

.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
  padding: var(--s3) var(--s5); background: var(--paper-2);
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.sheet-head b { color: var(--purple); font-weight: 400; }

/* ---- поле вводу ---- */

.probe-row { display: grid; gap: var(--s4); }
@media (min-width: 720px) { .probe-row { grid-template-columns: 1fr auto; align-items: end; } }

.probe-field { display: grid; gap: var(--s2); min-width: 0; }
.probe-field label {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.probe-field input {
  width: 100%; font-family: var(--display); font-weight: 500;
  font-size: var(--t-xl); line-height: 1.3; letter-spacing: -.01em;
  padding: var(--s2) 0; color: var(--ink);
  background: transparent; border: 0; border-bottom: 2px solid var(--ink);
  border-radius: 0;
}
.probe-field input::placeholder { color: var(--ink-3); font-weight: 400; }
.probe-field input:focus { outline: none; border-bottom-color: var(--purple); }
.probe-field input:focus-visible { outline: none; }

.cls { display: grid; gap: var(--s2); }
.cls > span {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.cls-list { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-block; padding: 5px 10px; border: 1px solid var(--rule);
  border-radius: 3px; font-family: var(--mono); font-size: var(--t-xs);
  line-height: 1.3; color: var(--ink-2); font-variant-numeric: tabular-nums;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.chip input:checked + span { border-color: var(--purple); background: var(--purple-wash); color: var(--purple-deep); }
.chip input:focus-visible + span { outline: 2px solid var(--purple); outline-offset: 2px; }
.chip:hover span { border-color: var(--ink-3); }

/* ---- аркуш порівняння ---- */

.cmp { display: grid; gap: var(--s5); }
@media (min-width: 640px) { .cmp { grid-template-columns: 1fr 1fr; gap: var(--s6); } }
.cmp-side { display: grid; gap: var(--s1); align-content: start; min-width: 0; }
.cmp-side > .lbl {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s2);
}
.cmp-side h3 {
  font-size: var(--t-xl); font-weight: 600; letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.cmp-side .meta { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-2); }
.cmp-side .holder { font-size: var(--t-xs); color: var(--ink-3); overflow-wrap: anywhere; }

/* ---- рядки критеріїв ---- */

/* Ширина обмежена навмисно: на широкій картці знак питання інакше
   від'їжджає від назви ознаки на пів екрана й перестає з нею читатись. */
.crit { display: grid; max-width: 46rem; }
.crit > div {
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--s3) var(--s4); align-items: baseline;
  padding-block: var(--s3); border-bottom: 1px solid var(--rule-soft);
  font-size: var(--t-sm);
}
.crit > div:last-child { border-bottom: 0; }
.crit .k { color: var(--ink-2); }
.crit .val { font-weight: 600; color: var(--ink); text-align: right; }
/* Знак питання замість відповіді — це і є гачок. Перелік ознак повний
   і з посиланнями на Правила: видно, що саме оцінюють, і видно, що
   жодну з ознак не закриє автоматичний збіг рядків. */
.crit .unk .k { color: var(--ink-2); }
.crit .unk .val {
  font-family: var(--mono); font-size: var(--t-xl); line-height: 1;
  font-weight: 400; color: var(--purple); opacity: .72;
}

.crit-note {
  margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--rule-soft);
  font-size: var(--t-sm); color: var(--ink-2); max-width: 62ch;
}
.crit-note b { color: var(--ink); font-weight: 600; }

/* ---- гортання результатів ---- */

.sheet-bar { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s5); }
.sheet-count {
  font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.sheet-count b { color: var(--purple); font-weight: 400; }
.sheet-arrow {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule); border-radius: 4px; background: var(--paper);
  color: var(--ink-2); cursor: pointer; font-size: var(--t-sm); line-height: 1;
}
.sheet-arrow:hover:not([disabled]) { border-color: var(--purple); color: var(--purple); background: var(--purple-wash); }
.sheet-arrow[disabled] { opacity: .35; cursor: default; }
.sheet-arrow:last-of-type { margin-left: auto; }

.sheet-note { font-size: var(--t-xs); color: var(--ink-3); line-height: 1.6; }
.sheet-note b { color: var(--ink-2); font-weight: 600; }

/* ---------------- кейс ---------------- */

.case-grid { display: grid; gap: var(--s8); align-items: start; }
@media (min-width: 960px) { .case-grid { grid-template-columns: 1fr 1.15fr; gap: var(--s9); } }

/* Текст ліворуч і порожнеча праворуч — найпомітніша ознака макета,
   зробленого «аби було». Друга колонка завжди несе зміст. */
.split { display: grid; gap: var(--s7); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1.35fr 1fr; gap: var(--s9); } }

/* нумерація тут виправдана: це справжня послідовність дій */
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s6); }
.flow li { display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: baseline; }
.flow .n {
  font-family: var(--mono); font-size: var(--t-xs); color: var(--purple);
  font-variant-numeric: tabular-nums;
}
.flow h3 { font-size: var(--t-lg); font-weight: 500; margin-bottom: var(--s2); }
.flow p { color: var(--ink-2); font-size: var(--t-sm); }

/* витяг */
.extract { border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); }
.extract > * + * { border-top: 1px solid var(--rule-soft); }
.ex-row { padding: var(--s5); }

.ex-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
  padding: var(--s3) var(--s5); background: var(--paper-2); border-radius: 6px 6px 0 0;
}
.ex-head b { color: var(--purple); font-weight: 500; }

.ex-mark { display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap; }
.ex-mark h3 { font-size: var(--t-xl); font-weight: 600; letter-spacing: -.01em; }
.ex-mark .classes { font-family: var(--mono); font-size: var(--t-sm); color: var(--ink-3); }

/* вимірювальна шкала замість кільця */
.gauge { display: grid; gap: var(--s3); }
.gauge-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); }
.gauge-val { font-family: var(--mono); font-size: 2.5rem; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.gauge-val small { font-size: 1rem; color: var(--ink-3); margin-left: 2px; }
.gauge-label { font-size: var(--t-sm); color: var(--ink-2); text-align: right; }
.gauge-label b { display: block; font-family: var(--display); font-weight: 500; color: var(--ink); font-size: var(--t-base); }

.scale { position: relative; height: 26px; }
.scale-track { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--rule); }
.scale-fill { position: absolute; top: 0; left: 0; height: 3px; background: var(--purple); }
.scale-mark { position: absolute; top: -3px; width: 1px; height: 9px; background: var(--purple); }
.scale-ticks {
  position: absolute; top: 12px; left: 0; right: 0;
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: .04em;
}

.ex-title {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s4);
}

.marks { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.marks th {
  text-align: left; font-family: var(--mono); font-weight: 400; font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
  padding-bottom: var(--s2); border-bottom: 1px solid var(--rule-soft);
}
.marks th:last-child, .marks td:last-child { text-align: right; }
.marks td { padding-block: var(--s3); border-bottom: 1px solid var(--rule-soft); }
.marks tr:last-child td { border-bottom: 0; }
.marks .m-cls, .marks .m-val { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.marks .m-val { color: var(--ink); }

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.checks li { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: baseline; font-size: var(--t-sm); color: var(--ink-2); }
.checks b { color: var(--ink); font-weight: 600; }
.flag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 3px; white-space: nowrap;
}
.flag--warn { color: var(--warn); background: #a8661a14; }
.flag--good { color: var(--good); background: #1e7a5714; }

.ex-foot { font-size: var(--t-xs); color: var(--ink-3); padding: var(--s4) var(--s5); }

/* ---------------- колода екранів ---------------- */

.flag--mid { color: var(--ink-2); background: #16112b0f; }

/* Ліворуч — перелік екранів (він же навігація), праворуч — сам екран.
   Обидві колонки несуть зміст: порожнього стовпця тут бути не повинно. */
.deck-nav { list-style: none; margin: 0; padding: 0; display: grid; }
.deck-nav li { border-top: 1px solid var(--rule); }
.deck-nav li:last-child { border-bottom: 1px solid var(--rule); }
.deck-nav button {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4);
  width: 100%; text-align: left; padding: var(--s4) 0;
  background: none; border: 0; cursor: pointer; font: inherit; color: inherit;
}
.deck-nav .n {
  font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3);
  font-variant-numeric: tabular-nums; padding-top: 3px;
}
.deck-nav .t { font-family: var(--display); font-weight: 500; font-size: var(--t-lg); letter-spacing: -.01em; }
.deck-nav .d { grid-column: 2; color: var(--ink-2); font-size: var(--t-sm); }
.deck-nav button:hover .t { color: var(--purple-deep); }
.deck-nav [aria-selected="true"] .n { color: var(--purple); }
.deck-nav [aria-selected="true"] .t { color: var(--purple-deep); }
/* Позначка активного — колір і рамка знизу, а не смужка збоку:
   будь-який виносний елемент зліва зламав би спільну лінію набору. */
.deck-nav li[data-on] { border-top-color: var(--purple); }

.deck-stage { display: grid; gap: var(--s4); align-content: start; }

/* Неактивні картки виводимо з потоку, а не складаємо в один осередок сітки:
   інакше рамка кожної тягнеться до висоти найдовшої й під короткою
   зяє порожнеча на пів екрана. */
.deck-cards { position: relative; }
.deck-card { width: 100%; transition: opacity .26s ease, transform .26s ease; }
.js .deck-card:not(.is-on) {
  position: absolute; top: 0; left: 0;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px);
}
@media (prefers-reduced-motion: reduce) { .deck-card { transition: none; } }

/* Без JS картки просто лягають одна під одну — нічого не ховаємо. */
html:not(.js) .deck-cards { display: grid; gap: var(--s6); }
html:not(.js) .deck-bar, html:not(.js) .deck-nav { display: none; }

/* Ліва колонка не має обриватися на середині екрана. */
.deck-note {
  display: grid; gap: var(--s3); margin-top: var(--s5);
  font-size: var(--t-sm); color: var(--ink-2); max-width: 46ch;
}
.deck-note b { color: var(--ink); font-weight: 600; }

.deck-bar {
  display: flex; align-items: center; gap: var(--s4);
  padding-top: var(--s2);
}
.deck-count {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .06em;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.deck-count b { color: var(--purple); font-weight: 400; }
.deck-arrow {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule); border-radius: 4px; background: var(--paper);
  color: var(--ink-2); cursor: pointer; font-size: var(--t-sm); line-height: 1;
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.deck-arrow:hover { border-color: var(--purple); color: var(--purple); background: var(--purple-wash); }
.deck-arrow:last-of-type { margin-left: auto; }

/* рядки-документи й сповіщення всередині екранів */
.rows { display: grid; }
.rows > div {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s4);
  align-items: baseline; padding-block: var(--s3);
  border-bottom: 1px solid var(--rule-soft); font-size: var(--t-sm);
}
.rows > div:last-child { border-bottom: 0; }
.rows small { display: block; color: var(--ink-3); font-size: var(--t-xs); }
.feed { display: grid; gap: var(--s4); }
.feed > div { display: grid; gap: var(--s1); }
.feed .f-top {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--purple);
}
.feed .f-body { font-size: var(--t-sm); color: var(--ink); }
.feed .f-body b { font-weight: 600; }
.feed .f-foot { font-size: var(--t-xs); color: var(--ink-3); }

/* ---------------- довідкові панелі праворуч ---------------- */

.side { display: grid; gap: var(--s5); align-content: start; }
.side-block { display: grid; gap: var(--s3); }
.side-block > h3 {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 400;
}
.side-list { list-style: none; margin: 0; padding: 0; display: grid; }
.side-list li {
  display: grid; gap: var(--s1); padding-block: var(--s3);
  border-top: 1px solid var(--rule); font-size: var(--t-sm);
}
.side-list li:last-child { border-bottom: 1px solid var(--rule); }
.side-list b { font-family: var(--display); font-weight: 500; font-size: var(--t-base); }
.side-list span { color: var(--ink-2); }
.side-list a { color: var(--purple); text-decoration: none; border-bottom: 1px solid #461e8640; }
.side-list a:hover { border-bottom-color: var(--purple); }

.section--dark .side-block > h3 { color: #8c81a8; }
.section--dark .side-list li { border-top-color: rgba(255, 255, 255, .16); }
.section--dark .side-list li:last-child { border-bottom-color: rgba(255, 255, 255, .16); }
.section--dark .side-list b { color: #fff; }
.section--dark .side-list span { color: #c5b9dd; }

/* ---------------- реєстр можливостей ---------------- */

.caps { display: grid; }
.caps details { border-top: 1px solid var(--rule); }
.caps details:last-of-type { border-bottom: 1px solid var(--rule); }
.caps summary {
  cursor: pointer; list-style: none;
  display: grid; gap: var(--s2) var(--s6); align-items: baseline;
  padding-block: var(--s5);
}
.caps summary::-webkit-details-marker { display: none; }
@media (min-width: 760px) { .caps summary { grid-template-columns: minmax(0, 15rem) 1fr auto; } }
@media (max-width: 759px) { .caps summary { grid-template-columns: 1fr auto; } .caps .cap-d { grid-column: 1 / -1; } }
.cap-t { font-family: var(--display); font-weight: 500; font-size: var(--t-lg); letter-spacing: -.01em; }
.cap-d { color: var(--ink-2); font-size: var(--t-sm); max-width: 60ch; }
.cap-x {
  font-family: var(--mono); color: var(--purple); font-size: var(--t-lg);
  line-height: 1; justify-self: end;
}
.caps details[open] .cap-x::after { content: "–"; }
.caps .cap-x::after { content: "+"; }
.cap-body { padding-bottom: var(--s6); display: grid; gap: var(--s3); }
/* Ті самі треки, що й у summary (третій — під знак «+»), інакше текст
   опису і вміст рядка мають різну ширину й праві краї розходяться. */
@media (min-width: 760px) {
  .cap-body { grid-template-columns: minmax(0, 15rem) 1fr auto; column-gap: var(--s6); }
  .cap-body::after { content: ""; width: 1ch; }
}
.cap-label {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}

/* мініатюри результату */
.art {
  border: 1px solid var(--rule); border-radius: 5px; background: var(--paper-2);
  padding: var(--s4) var(--s5); display: grid; gap: var(--s3); max-width: 46rem;
}
.art-rows { display: grid; gap: 0; }
.art-rows div {
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--s4);
  align-items: baseline; padding-block: var(--s2);
  border-bottom: 1px solid var(--rule-soft); font-size: var(--t-sm);
}
.art-rows div:last-child { border-bottom: 0; }
.art-rows i { font-style: normal; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.art-rows b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 400; color: var(--ink); }
.art-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.art-chips span {
  display: inline-flex; gap: var(--s2); padding: 5px var(--s3);
  border: 1px solid var(--purple); background: #fff; border-radius: 3px;
  font-size: var(--t-xs); color: var(--purple-deep);
}
.art-chips span i { font-style: normal; font-family: var(--mono); color: var(--purple); }
.art-quote {
  border-left: 2px solid var(--warn); padding-left: var(--s4);
  font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6;
}
.art-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); font-size: var(--t-sm); color: var(--ink-2); }
.art-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: baseline; }
.art-list li::before { content: "✓"; color: var(--good); font-size: var(--t-xs); }
.art-alert { display: grid; gap: var(--s2); background: #fff; border: 1px solid var(--rule); border-radius: 4px; padding: var(--s4); }
.art-alert .a-top {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--purple);
}
.art-alert .a-body { font-size: var(--t-sm); color: var(--ink); }
.art-alert .a-foot { font-size: var(--t-xs); color: var(--ink-3); }
.art-cap { font-size: var(--t-xs); color: var(--ink-3); }

.note { color: var(--ink-3); font-size: var(--t-sm); margin-top: var(--s5); max-width: 62ch; }

/* ---------------- про сервіс ---------------- */

.prose { display: grid; gap: var(--s5); max-width: 68ch; }
.prose p { color: var(--ink-2); }
/* Лінійка над цитатою має тягтися на всю колонку: коли вона обривалась
   по ширині тексту, це читалось як обрізаний блок. Вужчий тут сам рядок. */
.claim {
  margin-top: var(--s7); padding-top: var(--s5); border-top: 2px solid var(--purple);
  max-width: none;
  font-family: var(--display); font-weight: 500; font-size: var(--t-xl);
  line-height: 1.35; color: var(--purple-deep);
}
.claim > span { display: block; max-width: 30ch; }

/* ---------------- кроки ---------------- */

.stages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s6); counter-reset: st; }
@media (min-width: 720px) { .stages { grid-template-columns: repeat(2, 1fr); column-gap: var(--s7); } }
@media (min-width: 1000px) { .stages { grid-template-columns: repeat(4, 1fr); gap: var(--s5); } }
.stages li { display: grid; gap: var(--s2); padding-top: var(--s4); border-top: 1px solid var(--rule); }
.stages .n { font-family: var(--mono); font-size: var(--t-xs); color: var(--purple); font-variant-numeric: tabular-nums; }
.stages h3 { font-size: var(--t-lg); font-weight: 500; }
.stages p { color: var(--ink-2); font-size: var(--t-sm); }

.aside {
  margin-top: var(--s8); padding: var(--s5) var(--s6);
  background: var(--purple-wash); border-radius: 6px;
  display: grid; gap: var(--s2); max-width: 68ch;
}
.aside b { font-family: var(--display); font-weight: 500; }
.aside p { color: var(--ink-2); font-size: var(--t-sm); }

/* ---------------- waitlist ---------------- */

.section--dark { background: var(--night); color: #fff; }
.section--dark h2 { color: #fff; }
.section--dark .section-lead { color: #c5b9dd; }

.wl-form { display: grid; gap: var(--s5); max-width: 620px; }
.wl-row { display: grid; gap: var(--s3); grid-template-columns: 1fr auto; }
@media (max-width: 460px) { .wl-row { grid-template-columns: 1fr; } }

.field { display: grid; gap: var(--s2); }
.field label { font-size: var(--t-sm); color: #c5b9dd; }
.field .opt { color: #8c81a8; }
.fields { display: grid; gap: var(--s4); }
@media (min-width: 620px) { .fields { grid-template-columns: 1fr 1fr; } }
.field--full { grid-column: 1 / -1; }

/* Тільки форми waitlist стоять на темному ґрунті. Пробник у світлій
   секції має власні стилі — тому селектор навмисно НЕ глобальний. */
.wl-form input[type="email"], .wl-form input[type="text"], .wl-form select {
  width: 100%; font-family: inherit; font-size: var(--t-base); line-height: 1.4;
  padding: var(--s3) var(--s4);
  background: rgba(255, 255, 255, .07); color: #fff;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 4px;
}
.wl-form input::placeholder { color: #8c81a8; }
.wl-form input:focus, .wl-form select:focus { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); }
.wl-form select option { color: var(--ink); }

.consent { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; font-size: var(--t-sm); color: #c5b9dd; cursor: pointer; }
/* margin: 0 обов'язковий — типове поле браузера зсувало чекбокс на 4 px
   праворуч від лівої лінії форми, і це було видно. */
.consent input { width: 16px; height: 16px; margin: 3px 0 0; accent-color: #fff; }

.hint { font-size: var(--t-xs); color: #8c81a8; }
.msg { font-size: var(--t-sm); min-height: 1.4em; }
.msg.ok { color: #8fe0bd; }
.msg.err { color: #ffb3b3; }

.done { display: grid; gap: var(--s2); padding: var(--s5); border: 1px solid rgba(255, 255, 255, .25); border-radius: 6px; }
.done b { font-family: var(--display); font-weight: 500; font-size: var(--t-lg); }
.done span { color: #c5b9dd; font-size: var(--t-sm); }

/* ---------------- питання ---------------- */

.qa { display: grid; }
.qa details { border-top: 1px solid var(--rule); }
.qa details:last-of-type { border-bottom: 1px solid var(--rule); }
.qa summary {
  cursor: pointer; list-style: none;
  display: grid; grid-template-columns: 1fr auto; gap: var(--s4); align-items: center;
  padding-block: var(--s5);
  font-family: var(--display); font-weight: 500; font-size: var(--t-lg);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font-family: var(--mono); color: var(--purple); font-size: var(--t-lg); }
.qa details[open] summary::after { content: "–"; }
.qa p { color: var(--ink-2); font-size: var(--t-sm); padding-bottom: var(--s5); max-width: 90ch; }

/* ---------------- підвал ---------------- */

.site-footer { background: var(--night); color: #8c81a8; padding-block: var(--s8); }
.footer-inner { display: grid; gap: var(--s6); }
@media (min-width: 760px) { .footer-inner { grid-template-columns: 1fr auto; align-items: end; } }
.f-left { display: grid; gap: var(--s4); justify-items: start; }
.f-left img { width: 84px; }
.f-left p { font-size: var(--t-sm); max-width: 34ch; }
.f-right { display: grid; gap: var(--s2); font-size: var(--t-sm); }
@media (min-width: 760px) { .f-right { justify-items: end; text-align: right; } }
.f-right a { color: #c5b9dd; }
.f-right .who { color: #fff; font-family: var(--display); font-weight: 500; }
.f-right .copy { color: #6b6285; font-size: var(--t-xs); }


/* ============================================================
   Уточнення під продуктову подачу
   ============================================================ */

/* Форма в hero лишається робочою, але звужена й притишена:
   головний об'єкт сторінки — інструмент, а не збір адрес. */
.wl-form--slim { max-width: 420px; gap: var(--s3); margin-top: var(--s2); }
.wl-form--slim .hint { font-size: 12px; color: #8478a5; }
.wl-form--slim input[type="email"] { padding: 10px var(--s4); font-size: var(--t-sm); }
.wl-form--slim .btn { padding: 10px var(--s4); }

.probe-hint {
  font-size: var(--t-sm); color: var(--ink-2); max-width: 56ch; margin-top: var(--s3);
}

/* Рівень 3: вкладена поверхня всередині аркуша. Ледь інший тон і рамка —
   без власної тіні, інакше глибина головної картки знеціниться. */
.cmp {
  background: var(--surface-2); border: 1px solid var(--surface-border);
  border-radius: var(--radius-md); padding: var(--s5);
}
@media (min-width: 760px) { .cmp { padding: var(--s5) var(--s6); } }

/* Мікровзаємодії: тільки підйом на пару пікселів і трохи більше тіні. */
.chip span, .sheet-arrow, .btn, .caps summary {
  transition: transform .16s ease, box-shadow .16s ease,
              background .16s ease, border-color .16s ease, color .16s ease;
}
.chip:hover span { transform: translateY(-1px); box-shadow: var(--elev-1); }
.sheet-arrow:hover:not([disabled]) { transform: translateY(-1px); box-shadow: var(--elev-1); }
.btn:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .chip:hover span, .sheet-arrow:hover, .btn:hover { transform: none; }
}

/* Заголовки всередині продукту — без верхнього регістру: суцільні капітелі
   на кожному блоці читаються як шаблон, а не як інтерфейс. */
.ex-title, .cmp-side > .lbl, .cls > span {
  text-transform: none; letter-spacing: 0; font-size: var(--t-sm); color: var(--ink-3);
}
.sheet-head { letter-spacing: .06em; }


/* Розгорнутий рядок «Можливостей» — звичайний текст, без імітації
   результату. Вигадані відсотки суперечили б самому продукту, який
   свідомо не виставляє оцінок. */
.cap-text { display: grid; gap: var(--s3); max-width: 60ch; font-size: var(--t-sm); color: var(--ink-2); }
.cap-text .art-chips { margin-bottom: var(--s1); }
ul.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
ul.plain li { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: baseline; }
ul.plain li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--purple); opacity: .5; }

/* Живий статус із реєстру. Єдиний блок на сторінці, який тягне дані
   просто зараз, — тому він і позначений: крапка, що дихає, і підпис. */
.live {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s3);
  align-items: center; margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--rule-soft);
  font-size: var(--t-xs); color: var(--ink-3);
}
.live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3);
}
.live.is-on .live-dot { background: var(--good); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .live.is-on .live-dot { animation: none; } }

.live-text { color: var(--ink); font-weight: 500; }
.live-bar {
  grid-column: 2; height: 3px; border-radius: 2px; background: var(--rule);
  overflow: hidden; max-width: 240px;
}
.live-bar i { display: block; height: 100%; background: var(--good); border-radius: 2px; }
.live-note { grid-column: 2; color: var(--ink-3); }
.live.is-expired .live-dot { background: var(--warn); animation: none; }
.live.is-expired .live-bar i { background: var(--warn); }

/* Прокручена, але ще над hero — темний ґрунт під колір самого hero.
   Після hero спрацьовує .is-solid і смуга стає світлою. */
.site-header.is-scrolled:not(.is-solid) {
  background: var(--night);
  border-bottom-color: rgba(255, 255, 255, .10);
}


/* «Чим займаємось» іде під обидві колонки на всю ширину: у правій вона
   робила колонку вдвічі довшою за ліву, і під лівою зяяла порожнеча. */
.trio { margin-top: var(--s8); }
@media (min-width: 860px) {
  .trio .side-list { grid-template-columns: repeat(3, 1fr); gap: 0 var(--s6); }
  /* У три колонки :last-child — це рівно один елемент, тож нижня лінія
     була тільки під ним. Тут вона потрібна під усіма. */
  .trio .side-list li { border-bottom: 1px solid var(--rule); }
}

/* ---- hero: текст ліворуч, фірмовий об'єкт праворуч ---- */

@media (min-width: 960px) {
  .hero-inner { display: grid; grid-template-columns: 1fr 1.08fr; align-items: center; gap: var(--s7); }
  .hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4); }
}
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4); }

/* Асет має справжній альфа-канал і власну м'яку тінь у файлі, тож панель
   під ним не потрібна: картки лежать просто на ґрунті hero. Полотно
   обрізане впритул до тіні — видима ширина дорівнює ширині стосу. */
.hero-art {
  justify-self: end; line-height: 0;
  position: relative;
  /* Перспектива живе на нерухомому предку: якщо повісити її на сам
     елемент, що обертається, кут зору поїде разом із ним і нахил
     виглядатиме як плоский зсув. */
  perspective: 1400px;
}
.hero-art img {
  width: 100%; max-width: 540px; height: auto;
  /* Тінь у файлі вже своя — власної не додаємо, щоб не подвоювати. */
}

/* Фіолетове світло під стосом: на темному ґрунті самої лише намальованої
   тіні мало, об'єкт «висить» без опори. Дихає повільніше за політ, щоб
   два ритми не збігалися в один пульс. */
/* Плями мають ВИХОДИТИ за силует: усередині вони просто ховаються під
   непрозорими картками (перевірено виміром — різниця була 2/255). */
.hero-art::before {
  content: ""; position: absolute; z-index: -1;
  left: -10%; right: -10%; top: 2%; bottom: -8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(126, 82, 220, .5), rgba(126, 82, 220, 0) 70%);
  filter: blur(40px);
  animation: art-glow 13s ease-in-out infinite;
}

/* Поява: тільки після того, як hero потрапив у кадр (клас ставить JS).
   До того — прозорий, але місце вже займає, тож нічого не стрибає. */
.art-enter {
  opacity: 0;
  transform: translateY(26px) scale(.965);
  transition: opacity .9s ease, transform 1.15s cubic-bezier(.22, .8, .24, 1);
}
.hero-art.is-in .art-enter { opacity: 1; transform: none; }

/* Нахил за курсором. Значення пише JS у змінні — сам transform лишається
   декларативним, тож ніщо не конфліктує з поверненням у нуль. */
.art-tilt {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--py, 0px));
  transform-style: preserve-3d;
  will-change: transform;
}

.art-float { animation: art-float 11s ease-in-out infinite; position: relative; }

/* Відблиск: скло по картках. Маска — той самий файл, тому світло лягає
   строго на силует стосу й не світиться в порожнечі поруч.
   Смуга фіолетова, а не біла: картки й так білі, тож біле по білому
   не видно взагалі — читається лише тонований проблиск. */
.art-sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(102deg,
              rgba(122, 78, 214, 0) 36%,
              rgba(122, 78, 214, .20) 48%,
              rgba(168, 140, 232, .10) 54%,
              rgba(122, 78, 214, 0) 64%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  -webkit-mask-image: url("/assets/hero-card-v6.webp");
  mask-image: url("/assets/hero-card-v6.webp");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  opacity: 0;
  animation: art-sheen 9s ease-in-out infinite;
}

@keyframes art-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(-.5deg); }
}
@keyframes art-glow {
  0%, 100% { opacity: .8; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.05); }
}
/* Проліт займає ~чверть циклу, решта — пауза: інакше це блимає, а не
   зблискує раз на кілька секунд. */
@keyframes art-sheen {
  0%   { background-position: 150% 0; opacity: 0; }
  6%   { opacity: .9; }
  22%  { background-position: -60% 0; opacity: 0; }
  100% { background-position: -60% 0; opacity: 0; }
}

/* На вузькому екрані це зайва вага й зайвий екран прокрутки:
   під ним одразу починається справжній інструмент. */
@media (max-width: 639px) { .hero-art { display: none; } }
@media (min-width: 640px) and (max-width: 959px) {
  .hero-art { margin-top: var(--s6); justify-self: start; }
  .hero-art img { max-width: 380px; }
}

/* Без руху: об'єкт просто стоїть на місці — без появи, польоту й відблиску. */
@media (prefers-reduced-motion: reduce) {
  .art-enter { opacity: 1; transform: none; transition: none; }
  .art-float, .art-sheen, .hero-art::before { animation: none; }
  .art-sheen { display: none; }
  .art-tilt { transform: none; }
}

/* ---- зображення позначення з реєстру ---- */

.mark-img {
  margin: var(--s3) 0 var(--s2);
  max-width: 220px; max-height: 92px; width: auto; height: auto;
  background: #fff; border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm); padding: var(--s2);
  box-shadow: var(--elev-1);
}

/* Смуга гортання переїхала нагору й стала в один рядок із лічильником. */
.sheet-bar { padding: 0; margin-bottom: var(--s5); }
.sheet-bar .ex-title { margin: 0; margin-right: auto; }
.sheet-bar .sheet-arrow:last-of-type { margin-left: 0; }


/* ============================================================
   v3: дві дії в hero, модалка запису з анкетою, bento-можливості,
   мобільне меню.
   ============================================================ */

/* ---- hero: головна кнопка заливна, друга — контурна ---- */

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); }
.hero-actions .btn { padding-inline: var(--s5); gap: var(--s2); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .38); }
.btn--ghost:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }
.hero-hint { font-size: var(--t-xs); color: #a99cc9; }
.hero-principle { color: #b3a6d6; }

@media (max-width: 520px) {
  .hero-actions { flex-direction: column; align-self: stretch; }
  .hero-actions .btn { width: 100%; }
}

/* ---- демо: заголовок над аркушем ---- */

.stage { padding-top: var(--s9); }
.stage .section-head h2 {
  font-size: var(--t-2xl); line-height: 1.14; letter-spacing: -.02em; text-wrap: balance;
}

/* ---- bento ---- */

.bento { display: grid; gap: var(--s4); }
@media (min-width: 760px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile--wide { grid-column: 1 / -1; }
}
@media (min-width: 1040px) {
  .bento { grid-template-columns: repeat(3, 1fr); }
  .tile--wide { grid-column: span 2; }
}

.tile {
  position: relative; display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s6); background: var(--surface);
  border: 1px solid var(--surface-border); border-radius: var(--radius-md);
  box-shadow: var(--elev-1);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--elev-3); border-color: #461e8633; }
@media (prefers-reduced-motion: reduce) { .tile:hover { transform: none; } }

/* Широка плитка — фірмова: темний ґрунт hero, щоб головна можливість
   читалась першою навіть боковим зором. */
.tile--wide {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(126, 82, 220, .35), transparent 55%),
    linear-gradient(160deg, var(--night), var(--night-2));
  color: #fff; border-color: transparent;
}
.tile.tile--wide p { color: #c5b9dd; }
.tile--wide .tile-ico { background: rgba(255, 255, 255, .1); color: #fff; }

.tile-ico {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 10px; background: var(--purple-wash); color: var(--purple);
}
.tile-ico svg {
  width: 22px; height: 22px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.tile h3 { font-size: var(--t-lg); font-weight: 600; letter-spacing: -.01em; margin-top: var(--s2); }
.tile p { color: var(--ink-2); font-size: var(--t-sm); max-width: 52ch; }
.tile-art { margin-top: auto; padding-top: var(--s3); }
.tile-cap { font-size: var(--t-xs) !important; color: var(--ink-3) !important; }

.tile-art--match {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3);
  font-size: var(--t-lg); font-weight: 600;
}
.tile-art--match .q, .tile-art--match .r {
  padding: var(--s2) var(--s4); border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
}
.tile-art--match .r { background: #fff; color: var(--purple); border-color: #fff; }
.tile-art--match .eq {
  font-size: var(--t-xs); font-weight: 400; color: #b9a9dc; letter-spacing: .06em;
  display: inline-flex; align-items: center; gap: var(--s2);
}
.tile-art--match .eq::before, .tile-art--match .eq::after {
  content: ""; width: 18px; height: 1px; background: currentColor;
}
.tile-link {
  color: #fff; font-size: var(--t-sm); font-weight: 500; text-decoration: none;
  align-self: flex-start; border-bottom: 1px solid rgba(255, 255, 255, .4);
}
.tile-link:hover { border-bottom-color: #fff; }

.tags { display: flex; flex-wrap: wrap; gap: var(--s2); }
.tags span {
  padding: 4px var(--s3); border-radius: 999px; font-size: var(--t-xs);
  background: var(--purple-wash); color: var(--purple-deep);
}
.tile .plain { font-size: var(--t-sm); color: var(--ink-2); }
.checks-mini { list-style: none; margin: 0; padding: var(--s3) 0 0; display: grid; gap: var(--s2); font-size: var(--t-sm); color: var(--ink-2); }
.checks-mini li { display: grid; grid-template-columns: auto 1fr; gap: var(--s2); align-items: baseline; }
.checks-mini li::before { content: "✓"; color: var(--good); font-size: var(--t-xs); }

/* ---- мобільне меню ---- */

.burger {
  display: inline-grid; place-content: center; gap: 6px;
  width: 42px; height: 42px; padding: 0; margin-left: calc(var(--s3) * -1);
  background: transparent; border: 0; cursor: pointer;
}
.burger span { display: block; width: 20px; height: 1.5px; background: #fff; transition: transform .2s ease; }
.site-header.is-solid .burger span { background: var(--ink); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
@media (min-width: 900px) { .burger, .mnav { display: none !important; } }

.mnav { border-top: 1px solid rgba(255, 255, 255, .1); background: var(--night); }
.mnav .wrap { display: grid; padding-block: var(--s3) var(--s5); }
.mnav a {
  color: #fff; text-decoration: none; font-size: var(--t-lg);
  padding-block: var(--s3); border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.site-header.is-solid .mnav { background: var(--paper); border-top-color: var(--rule); }
.site-header.is-solid .mnav a { color: var(--ink); border-bottom-color: var(--rule-soft); }
/* відкрите меню над прозорою шапкою hero потребує ґрунту */
.menu-open .site-header:not(.is-solid) { background: var(--night); }

@media (max-width: 899px) {
  .header-inner { gap: var(--s3); }
  .cta-head { padding: 10px var(--s4); }
}
@media (max-width: 380px) {
  .brand img { width: 72px; }
}

/* ---- модалка запису ---- */

.wl-dialog {
  width: min(560px, calc(100vw - 2 * var(--s4)));
  max-height: calc(100svh - 2 * var(--s4));
  padding: 0; border: 0; border-radius: var(--radius-lg);
  background: var(--surface); color: var(--ink);
  box-shadow: var(--elev-2); overflow: auto;
}
.wl-dialog::backdrop { background: rgba(15, 10, 32, .62); backdrop-filter: blur(4px); }
.wl-dialog[open] { animation: dlg-in .22s ease; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .wl-dialog[open] { animation: none; } }

.wl-dialog-body { padding: var(--s6) var(--s5) var(--s5); display: grid; gap: var(--s3); }
@media (min-width: 560px) { .wl-dialog-body { padding: var(--s7) var(--s7) var(--s6); } }
.wl-dialog h2 { font-size: var(--t-2xl); letter-spacing: -.02em; line-height: 1.15; }
.wl-dialog-lead { color: var(--ink-2); font-size: var(--t-sm); margin-bottom: var(--s3); }
.wl-close {
  position: absolute; top: var(--s3); right: var(--s3);
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-3); font-size: 26px; line-height: 1; cursor: pointer;
}
.wl-close:hover { background: var(--paper-2); color: var(--ink); }

/* Форма в модалці світла: перебиваємо темні стилі .wl-form. */
.wl-form--modal { gap: var(--s4); max-width: none; }
.wl-form--modal .field label { color: var(--ink-2); }
.wl-form--modal .field .opt { color: var(--ink-3); }
.wl-form--modal input[type="email"], .wl-form--modal input[type="text"] {
  background: var(--paper); color: var(--ink); border-color: var(--rule);
}
.wl-form--modal input::placeholder { color: var(--ink-3); }
.wl-form--modal input:focus { background: var(--paper); border-color: var(--purple); outline: none; }
.wl-form--modal .btn { justify-self: stretch; }
.consent--light { color: var(--ink-2); }
.consent--light input { accent-color: var(--purple); }
.wl-dialog .msg.err { color: #b42318; }
.wl-dialog .msg.ok { color: var(--good); }
.wl-dialog .done { border-color: var(--rule); background: var(--paper-2); }
.wl-dialog .done span { color: var(--ink-2); }

/* ---- анкета другого кроку ---- */

.profile { display: grid; gap: var(--s5); }
.profile-lead { font-size: var(--t-sm); color: var(--ink-2); }
.q { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s2); min-width: 0; }
.q legend { font-weight: 500; font-size: var(--t-sm); margin-bottom: var(--s2); padding: 0; }
.picks { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pick { position: relative; }
.pick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pick span {
  display: inline-block; padding: 7px var(--s3); border-radius: 999px;
  border: 1px solid var(--rule); font-size: var(--t-xs); line-height: 1.3; color: var(--ink-2);
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.pick:hover span { border-color: var(--ink-3); }
.pick input:checked + span { border-color: var(--purple); background: var(--purple); color: #fff; }
.pick input:focus-visible + span { outline: 2px solid var(--purple); outline-offset: 2px; }
.profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.btn--text {
  background: transparent; border-color: transparent; color: var(--ink-3);
}
.btn--text:hover { background: transparent; border-color: transparent; color: var(--ink); }

/* Та сама анкета у темній секції внизу. */
.section--dark .profile-lead { color: #c5b9dd; }
.section--dark .q legend { color: #fff; }
.section--dark .pick span { border-color: rgba(255, 255, 255, .22); color: #d9cfee; }
.section--dark .pick:hover span { border-color: rgba(255, 255, 255, .5); }
.section--dark .pick input:checked + span { background: #fff; border-color: #fff; color: var(--purple); }
.section--dark .profile .btn:not(.btn--text) { background: #fff; color: var(--purple); border-color: #fff; }
.section--dark .btn--text { color: #a99cc9; }
.section--dark .btn--text:hover { color: #fff; }
.section--dark .consent--light { color: #c5b9dd; }
.section--dark .consent--light input { accent-color: #fff; }

/* ---- мобільна щільність ---- */
@media (max-width: 719px) {
  .hero { min-height: auto; }
  .hero-inner { padding-block: var(--s8) var(--s8); }
  .stage { padding-top: var(--s8); }
  .section { padding-block: var(--s8); }
  .section-head { margin-bottom: var(--s6); }
  .tile { padding: var(--s5); }
  .tile-art--match { font-size: var(--t-base); gap: var(--s2); }
  .tile-art--match .eq::before, .tile-art--match .eq::after { width: 10px; }
}