/* Публічний сайт: головна, розділи, ціни, блог, юридичні.

   Свідомо окремо від таблиці застосунку. У застосунку 950 змінних і
   вісімнадцять файлів; маркетингова сторінка мусить вантажитись одним
   запитом у людини, яка ще вирішує, чи варті ми кліку.

   Темна за замовчуванням — так виглядає сам продукт, і так виглядають
   Higgsfield, Runway та Linear. Світла лишається доступною тим, хто
   перемкнув тему всередині застосунку: ключ `socialos-theme` спільний. */

:root{
  color-scheme: dark;

  /* ── STUDIO NOIR ────────────────────────────────────────────────────────
     Тепла темна база замість холодної. Стара #0b0c11 була синювата — вона
     робила бурштин чужим на власній сторінці: холодне тло і теплий акцент
     сперечались. Уся шкала нижче стоїть на одному тоні (hue 60-85), тому
     акцент читається як частина матеріалу, а не як наліпка.

     Кремові токени — не «світла тема». Це другий матеріал ТІЄЇ САМОЇ
     сторінки: дизайн чергує темні й кремові смуги, і саме чергування
     дає відчуття друкованого розвороту, а не одного довгого екрана. */
  --bg:oklch(0.18 0.01 60); --bg-2:oklch(0.155 0.008 60);
  --fg:oklch(0.93 0.008 85); --dim:oklch(0.72 0.01 70); --faint:oklch(0.6 0.01 70);
  --line:oklch(0.3 0.01 60); --line-2:oklch(0.4 0.01 70);
  --card:oklch(0.24 0.012 62); --card-2:oklch(0.28 0.01 60);
  /* 🛑 БУРШТИН — ТОЧНО ТОЙ САМИЙ, ЩО В ЗАСТОСУНКУ, І ЗАПИСАНИЙ ТАК САМО.
     Тут стояв oklch(0.78 0.14 70). На вигляд це той самий бурштин, а
     в пікселях — інший: виміряно rgb(240,166,70) проти rgb(240,165,0)
     у застосунку. Синій канал 70 проти 0 робить сайт помітно мʼякшим,
     персиковим, — і людина, переходячи з лендінга в продукт, бачить
     два різні бренди.
     Джерело правди — core/01_base.css. Значення взяте звідти, а не
     підібране на око. */
  --accent:#f0a500; --accent-fg:oklch(0.18 0.02 60);
  --accent-soft:oklch(0.32 0.05 65);
  --ok:#2fbf71; --warn:#e08c1a;

  /* Кремова смуга. Живе в обох темах однаково: це матеріал, а не режим. */
  --cream:oklch(0.94 0.006 85); --cream-2:oklch(0.98 0.004 85);
  --cream-line:oklch(0.88 0.006 80); --cream-fg:oklch(0.2 0.01 60);
  --cream-dim:oklch(0.45 0.01 60); --cream-faint:oklch(0.58 0.01 60);

  --max:1140px;
  --ease:cubic-bezier(.32,.72,0,1);
  --r-lg:22px; --r-md:14px; --r-sm:10px;
  --shadow:0 30px 80px -40px oklch(0.1 0.01 60/0.9);

  /* Дисплейний серіф. Заголовок — не «жирний текст», а інша порода літери:
     саме контраст серіфа з Inter у тілі дає сторінці редакційний вигляд,
     який не купується ані розміром, ані відступами. */
  /* Опорні значення, яких секційні матеріали НЕ підміняють. Потрібні
     там, де смуга перефарбовує сам --accent: посилання на var(--accent)
     всередині такого блоку прочитало б уже нове значення, а не бурштин. */
  --amber:#f0a500; --amber-ink:oklch(0.18 0.02 60);

  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
:root[data-theme="light"]{
  color-scheme: light;
  --bg:oklch(0.98 0.004 85); --bg-2:oklch(0.94 0.006 85);
  --fg:oklch(0.2 0.01 60); --dim:oklch(0.45 0.01 60); --faint:oklch(0.58 0.01 60);
  --line:oklch(0.88 0.006 80); --line-2:oklch(0.82 0.006 80);
  --card:oklch(1 0 0); --card-2:oklch(0.96 0.005 85);
  /* Світла тема: затемнений бурштин, щоб текст читався на білому —
     те саме значення, що в застосунку (--accent у світлій темі). */
  --accent:#9a6200; --accent-fg:oklch(0.99 0 0);
  --accent-soft:oklch(0.93 0.03 75);
  /* У світлій темі кремова смуга мусить бути ТЕМНІШОЮ за тло, інакше
     чергування зникає і сторінка стає однією білою стрічкою. */
  --cream:oklch(0.18 0.01 60); --cream-2:oklch(0.24 0.012 62);
  --cream-line:oklch(0.3 0.01 60); --cream-fg:oklch(0.93 0.008 85);
  --cream-dim:oklch(0.72 0.01 70); --cream-faint:oklch(0.6 0.01 70);
  --shadow:0 30px 80px -46px oklch(0.2 0.02 60/0.35);
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
html,body{ margin:0; padding:0 }
body{
  background:var(--bg); color:var(--fg);
  font:16px/1.62 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

a{ color:inherit; text-decoration:none }
img,video{ max-width:100%; display:block }
h1,h2,h3{ font-family:var(--serif); font-weight:400; letter-spacing:-.01em }
.logo span,.price{ font-family:var(--serif); font-weight:400 }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 24px }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
     white-space:nowrap }
/* Ховаємо обрізанням, а не виносом на -9999px. Винос убік розтягує
   документ на всю відстань виносу: `scrollWidth` рахує його, і сторінка
   формально стає ширшою за екран на кожній ширині. */
.skip{ position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  top:8px; left:24px; z-index:60; padding:10px 16px;
  background:var(--accent); color:var(--accent-fg); border-radius:var(--r-sm) }
.skip:focus{ width:auto; height:auto; overflow:visible;
  clip:auto; clip-path:none }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px }

/* ═══ ШАПКА ═══════════════════════════════════════════════════════════════
   Розмиття тільки тут і на мобільному аркуші — це закріплені шари.
   На вмісті, що прокручується, backdrop-filter змушує GPU перемальовувати
   кадр за кадром і кладе плавність на телефоні. */
.nav{
  position:sticky; top:0; z-index:30;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.nav.is-stuck{ border-bottom-color:var(--line);
  background:color-mix(in srgb, var(--bg) 94%, transparent) }
.nav-in{ display:flex; align-items:center; gap:10px; height:72px }
/* 🛑 ТРЕК НУЛЬОВИЙ, А НЕ -.035em. Дизайн-код задає негативний трек для
   ЗАГОЛОВКІВ: -.02em на h1 при clamp(40px…84px) і -.015em на h2. Це
   правильно для великого кегля — там літери самі по собі стоять рідко.
   Знак же набраний 22px, і на цьому розмірі та сама логіка вимагає
   зворотного: трек мусить послаблюватись зі зменшенням кегля, інакше
   висококонтрастна антиква злипається засічками. Виміряно: -.035em дає
   80px ширини проти 87px на нулі — сім пікселів, які й були повітрям.

   Це той самий випадок, що описує сам код: «якщо здається, що бракує
   сили, — бракує розміру або повітря, не ваги».

   🛑 БУРШТИН НА ОБОХ `<i>` — на першій «S» і на «OS». Був період, коли
   акцент лишався тільки на «OS»: я міркував, що дві підсвічені літери
   ріжуть назву на три уламки — «S · ocial · OS». Міша це відкинув, і
   правильно: знак упізнають за силуетом, а дві теплі опори на початку
   й у кінці тримають слово як дужки. Одна підсвічена літера всередині
   ряду справді була б маркером — дві по краях читаються як оправа. */
.logo{ display:inline-flex; align-items:center; font-weight:600;
  font-size:22px; letter-spacing:0; margin-right:22px; line-height:1 }
/* `<i>` а не `<span class>`: розмітка лишається читною, а курсив
   знімається — тег тут за структуру, не за накреслення. */
.logo i{ position:relative; font-style:normal; color:var(--accent);
  transition:text-shadow .6s var(--ease) }
.logo span{ position:relative; display:inline-block;
  transition:letter-spacing .5s var(--ease) }
.logo:hover span{ letter-spacing:-.01em }   /* ховер стискає, а не фарбує */
.logo:hover i{ text-shadow:0 0 18px color-mix(in srgb,var(--accent) 65%,transparent) }

/* Промінь по знаку. Не миготіння й не пульс — одна смуга світла, що раз
   проходить зліва направо: рух помітний краєм ока й не змагається з
   вмістом сторінки за увагу.
   `background-clip:text` малює градієнт ПО ЛІТЕРАХ, тому підсвітка не
   виходить за їхні межі й не потребує жодного зайвого елемента.

   🛑 РЕЖИМ НАКЛАДАННЯ `plus-lighter`, А НЕ ЗВИЧАЙНИЙ. Тут стояв білий на
   92% із `mix-blend-mode: normal` — і це не підсвічувало літери, а
   ЗАМАЛЬОВУВАЛО їх. Виміряно: у момент проходу бурштинова «S» ставала
   майже чисто білою, тобто знак на секунду втрачав власний колір і
   читався як зламаний.

   `plus-lighter` додає світло до того, що вже є: бурштин стає яскравішим
   бурштином, а не білою плямою. Тому й непрозорість опущено з .92 до
   .42 — додавання не потребує такої сили, як заміщення. */
.logo span::after{
  content:attr(data-txt); position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg,
    transparent 38%, color-mix(in srgb,#fff 42%,transparent) 50%, transparent 62%);
  background-size:280% 100%; background-position:180% 0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  mix-blend-mode:plus-lighter;
  animation:logoSheen 7s var(--ease) 1.4s infinite;
}
@keyframes logoSheen{
  0%   { background-position:180% 0 }
  22%  { background-position:-80% 0 }
  100% { background-position:-80% 0 }   /* решта циклу — спокій */
}
/* 🛑 У СВІТЛІЙ ТЕМІ ПРОМЕНЯ НЕМАЄ ЗОВСІМ. Додавання світла на світлому
   тлі працює у зворотний бік: літери там темні (виміряно — #9a6200 на
   #f6f4f1), і будь-яке освітлення веде їх до тла, тобто стирає напис.
   Ефект існує, щоб зачепити око на темній панелі; на світлій він не
   «слабший», він шкідливий. */
:root[data-theme="light"] .logo span::after{ animation:none; background:none }
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .logo span::after{ animation:none; background:none }
}
@media (prefers-reduced-motion: reduce){ .logo span::after{ animation:none } }

.nav-links{ display:flex; align-items:center; gap:2px }
.nav-sp{ flex:1 }
.lnk{ position:relative; color:var(--dim); font-size:14.5px; padding:8px 12px;
  border-radius:var(--r-sm);
  transition:color .2s var(--ease), background .2s var(--ease) }
.lnk:hover{ color:var(--fg); background:color-mix(in srgb,var(--fg) 6%,transparent) }
/* Поточний розділ. Крапка під написом виявилась надто тихою — її не видно,
   поки не почнеш шукати. Тепер сам напис бурштиновий, на бурштиновій
   підкладці, і питання «де я» знімається з першого погляду. */
.lnk.on{ color:var(--accent); font-weight:600;
  background:color-mix(in srgb,var(--accent) 12%,transparent) }
.lnk.on:hover{ color:var(--accent);
  background:color-mix(in srgb,var(--accent) 18%,transparent) }
.lnk.on::after{
  content:""; position:absolute; left:14px; right:14px; bottom:3px; height:2px;
  border-radius:99px; background:var(--accent);
  box-shadow:0 0 12px 1px color-mix(in srgb,var(--accent) 70%,transparent);
}
.lang{ font-weight:600; font-size:12px; line-height:1; font-family:inherit; letter-spacing:.05em; color:var(--faint);
  border:1px solid var(--line); border-radius:99px; padding:7px 10px; margin-right:4px;
  transition:color .2s var(--ease), border-color .2s var(--ease) }
.lang:hover{ color:var(--fg); border-color:var(--line-2) }
.login{ font-weight:500 }

/* ── кнопки: нутрощі окремим колом, натиск фізичний ───────────────────── */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:12px 20px; border-radius:99px; font-weight:600; font-size:14.5px; line-height:1; font-family:inherit;
  border:1px solid var(--line-2); background:transparent; color:var(--fg);
  cursor:pointer; white-space:nowrap; text-decoration:none;
  transition:transform .35s var(--ease), border-color .3s var(--ease),
             background .3s var(--ease), filter .3s var(--ease);
}
.btn:hover{ border-color:var(--faint) }
.btn:active{ transform:scale(.975) }
.btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-fg) }
.btn-primary:hover{ filter:brightness(1.07); border-color:var(--accent) }
.btn-sm{ padding:9px 16px; font-size:14px }
.btn-lg{ padding:16px 28px; font-size:16px }
.btn-ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:99px; margin:-4px -6px -4px 0;
  background:color-mix(in srgb, var(--accent-fg) 14%, transparent);
  transition:transform .35s var(--ease);
}
.btn:hover .btn-ic{ transform:translateX(2px) }

/* ── бургер і мобільний аркуш ─────────────────────────────────────────── */
.burger{ display:none; width:38px; height:38px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:transparent; cursor:pointer;
  position:relative; padding:0 }
.burger span{ position:absolute; left:10px; width:18px; height:1.6px; border-radius:2px;
  background:var(--fg); transition:transform .4s var(--ease), opacity .25s var(--ease) }
.burger span:nth-child(1){ top:15px }
.burger span:nth-child(2){ top:21px }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3px) rotate(-45deg) }

.menu-sheet{ position:fixed; inset:64px 0 0; z-index:29;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  padding:26px 0; overflow-y:auto }
.menu-in{ display:flex; flex-direction:column; max-width:var(--max); margin:0 auto;
  padding:0 24px }
.menu-in a{ font-family:var(--serif); font-size:26px; font-weight:500;
  letter-spacing:-.02em; padding:14px 0; border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease) }
.menu-sheet.is-open .menu-in a{ opacity:1; transform:none }
.menu-sheet.is-open .menu-in a:nth-child(1){ transition-delay:.04s }
.menu-sheet.is-open .menu-in a:nth-child(2){ transition-delay:.08s }
.menu-sheet.is-open .menu-in a:nth-child(3){ transition-delay:.12s }
.menu-sheet.is-open .menu-in a:nth-child(4){ transition-delay:.16s }
.menu-sheet.is-open .menu-in a:nth-child(5){ transition-delay:.20s }
.menu-sheet.is-open .menu-in a:nth-child(6){ transition-delay:.24s }
.menu-sheet.is-open .menu-in a:nth-child(7){ transition-delay:.28s }

/* ═══ ГЕРОЙ ══════════════════════════════════════════════════════════════ */
.hero{ padding:112px 0 84px; position:relative; isolation:isolate }
/* Тепле світло за заголовком. Без `isolation` і власного шару вміст лягав би
   на градієнт, а `z-index:-1` заганяв би його ЗА тло сторінки — тобто
   градієнта не було б видно взагалі. */
/* Центр світла — у змінних: скрипт зсуває їх за курсором, а без скрипта
   лишаються значення за замовчуванням і градієнт просто стоїть на місці. */
.hero{ --gx:50%; --gy:32% }
/* inset:0, а не від'ємні відступи. Від'ємний горизонтальний inset (−20%)
   робив шар на 40% ширшим за екран, і документ формально прокручувався
   вбік на кожній ширині — навіть із overflow-x:hidden на body. Розмір
   світла задає сам градієнт, а не коробка під ним. */
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(78% 88% at var(--gx) var(--gy),
    color-mix(in srgb,var(--accent) 17%,transparent), transparent 70%);
  transition:background .35s var(--ease);
}
.hero .wrap{ position:relative; z-index:1 }
h1{
  font-size:clamp(40px,7.2vw,84px); line-height:.99; letter-spacing:-.02em;
  margin:0 0 26px; font-weight:400; max-width:15ch;
}
.h1-a,.h1-b{ display:block }
/* Акцентний рядок героя отримує легку 3D-екструзію: стос текстових тіней
   у відтінках бурштину, що згасають у глибину, плюс тонка темна кромка
   знизу для контрасту з фоном. Це НЕ друга суцільна заливка — колір
   символу лишається var(--accent), тіні лише додають товщину, тож правило
   «один суцільний бурштин на екран» не порушується. Крок 1px по X/Y на
   кожному шарі — короткий, тому напис читається як витиснутий, а не як
   розмитий чи здвоєний. Вимикається за reduced-motion разом з рештою руху,
   бо на дуже маленьких екранах товщина «з'їдає» різкість шрифту. */
.h1-b{
  color:color-mix(in srgb,var(--accent) 88%,#fff 12%);
  text-shadow:
    1px 1px 0 color-mix(in srgb,var(--accent) 94%,#000 6%),
    2px 2px 0 color-mix(in srgb,var(--accent) 86%,#000 14%),
    3px 3px 0 color-mix(in srgb,var(--accent) 78%,#000 22%),
    4px 4px 0 color-mix(in srgb,var(--accent) 70%,#000 30%),
    5px 5px 0 color-mix(in srgb,var(--accent) 62%,#000 38%),
    6px 6px 0 color-mix(in srgb,var(--accent) 54%,#000 46%),
    7px 7px 0 color-mix(in srgb,var(--accent) 47%,#000 53%),
    8px 8px 0 color-mix(in srgb,var(--accent) 40%,#000 60%),
    9px 9px 0 color-mix(in srgb,var(--accent) 34%,#000 66%),
   10px 10px 0 color-mix(in srgb,var(--accent) 28%,#000 72%),
   11px 11px 0 color-mix(in srgb,var(--accent) 23%,#000 77%),
   12px 12px 0 color-mix(in srgb,var(--accent) 18%,#000 82%),
   13px 13px 0 color-mix(in srgb,var(--accent) 14%,#000 86%),
   14px 14px 0 color-mix(in srgb,var(--accent) 10%,#000 90%),
   18px 22px 26px rgba(0,0,0,.45);
}
/* На телефоні глибина з'їдає різкість: чотирнадцять шарів на 40px кеглі
   перетворюють засічки на кашу. Лишаємо три. */
@media (max-width:640px){
  .h1-b{ text-shadow:
    1px 1px 0 color-mix(in srgb,var(--accent) 88%,#000 12%),
    2px 2px 0 color-mix(in srgb,var(--accent) 70%,#000 30%),
    3px 3px 0 color-mix(in srgb,var(--accent) 46%,#000 54%),
    5px 7px 10px rgba(0,0,0,.4) }
}
.hero-row{ display:flex; align-items:flex-start; gap:28px; flex-wrap:wrap;
  justify-content:space-between; margin-bottom:30px }
.lede{ font-size:clamp(16.5px,1.5vw,19px); color:var(--dim); max-width:56ch; margin:0 }
/* Новина живе в рядку підзаголовка, а не смугою вгорі: смуга з'їдає перший
   екран і її закривають не читаючи (прийом Linear). */
/* Непрозоре тло. За героєм тепер їде плівка, і прозора плашка над нею
   перетворювала напис на кашу з чужих кадрів. */
.news{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px;
  color:var(--dim); white-space:nowrap; padding:7px 12px; border-radius:99px;
  background:var(--card); border:1px solid var(--line);
  transition:border-color .3s var(--ease) }
.news:hover{ border-color:var(--line-2); color:var(--fg) }
.news b{ color:var(--accent); font-weight:600 }

/* Поле пошти в героєві — двошарова коробка: зовнішня «оправа» тримає
   заглиблення, внутрішня — сам вміст. */
.hero-form{
  display:flex; gap:8px; align-items:center; max-width:520px;
  background:var(--card); border:1px solid var(--line);
  border-radius:99px; padding:7px 7px 7px 8px;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--fg) 7%,transparent);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.hero-form:focus-within{ border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent) }
.hero-form input{
  flex:1; min-width:0; font:inherit; font-size:15.5px; color:var(--fg);
  background:transparent; border:0; outline:none; padding:12px 14px;
}
.hero-form input::placeholder{ color:var(--faint) }
.hero-note{ margin:16px 0 0; color:var(--faint); font-size:13.5px; max-width:52ch }

/* ═══ СЕКЦІЇ ═════════════════════════════════════════════════════════════ */
section{ padding:104px 0 }
section + section{ border-top:1px solid var(--line) }
h2{ font-size:clamp(28px,4vw,46px); letter-spacing:-.015em; margin:0 0 14px;
  font-weight:400; line-height:1.08; max-width:20ch }
.sub{ color:var(--dim); margin:0 0 40px; max-width:62ch; font-size:16.5px }
.kicker{ display:inline-block; font-weight:600; font-size:11px; line-height:1; font-family:var(--mono); letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); margin-bottom:16px;
  padding:6px 11px; border-radius:99px;
  background:color-mix(in srgb,var(--accent) 11%,transparent) }

/* ── доказ ───────────────────────────────────────────────────────────── */
.proof{ padding:64px 0 }
.proof-grid{ display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  grid-template-columns:repeat(4,1fr) }
.proof-cell{ background:var(--bg); padding:28px 24px }
.proof-cell b{ display:block; font-family:var(--serif);
  font-size:clamp(30px,3.4vw,42px); font-weight:400; letter-spacing:-.02em;
  line-height:1; color:var(--fg); margin-bottom:10px; font-variant-numeric:tabular-nums }
.proof-t{ display:block; font-size:14.5px; color:var(--fg); margin-bottom:6px }
.proof-note{ display:block; font-size:13px; color:var(--faint); line-height:1.45 }

/* ── вітрина роликів: дві зустрічні стрічки ──────────────────────────────
   Рух робить CSS-анімація на transform, а не скрипт: браузер віддає її
   композитору й вона не бореться за головний потік із рештою сторінки.
   Довжина стрічки подвоєна в розмітці — коли перша копія доїхала до кінця,
   друга вже стоїть рівно на її місці, тому стик непомітний. */
.reels-wrap{ overflow:hidden }
.marquee{ display:grid; gap:14px; margin:36px 0 26px;
  /* Краї розчиняються в тлі: обрізаний ролик каже «їх більше», а різкий
     обріз по краю екрана виглядає як помилка верстки. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent) }
.mq-row{ overflow:hidden }
.mq-track{ display:flex; gap:14px; width:max-content;
  animation:mq var(--mq-dur,72s) linear infinite }
.mq-row.rev .mq-track{ animation-direction:reverse }
/* 🛑 Тут була пауза на наведення. Прибрана свідомо: стрічка — це тло, яке
   рухається, а не орган керування. Курсор проходить через неї дорогою до
   кнопки, і кожен такий прохід зупиняв рух без жодного наміру людини.
   Зупинку лишає єдиний, хто справді про неї просить, — системне
   налаштування «менше руху» нижче. */
@keyframes mq{ from{ transform:translate3d(0,0,0) }
               to{ transform:translate3d(-50%,0,0) } }
@media (prefers-reduced-motion: reduce){
  .mq-track{ animation:none }
  .mq-row{ overflow-x:auto; scrollbar-width:none }
  .mq-row::-webkit-scrollbar{ display:none }
}
/* Без `will-change` навмисно. Рух робить ОДИН предмет — доріжка; плитки
   просто їдуть на ній. `will-change:transform` на кожній із 252 плиток
   просив у браузера 252 окремі шари композитора заради анімації, якої в
   них немає. Це не прискорення, а рахунок за памʼять. */
/* ── ВІДКЛАДЕНИЙ РЕНДЕР НИЖНІХ СЕКЦІЙ ────────────────────────────────────
   Сторінка 14 526 px заввишки, і браузер рахував розкладку всієї — разом
   із таблицею порівняння, сіткою бібліотеки й чотирма розділами
   можливостей, до яких людина може не дійти взагалі.

   `content-visibility:auto` каже пропустити роботу над тим, що зараз поза
   екраном. Секція, яку не видно, не рахується й не малюється; щойно вона
   наближається — рахується як звичайна.

   `contain-intrinsic-size: auto 900px` обов'язковий, і не заради краси.
   Без нього пропущена секція має нульову висоту, сторінка стрибає під
   курсором, а смуга прокрутки живе власним життям. `auto` означає
   «запам'ятай справжню висоту після першого показу», тож 900px — це
   здогад лише до першої зустрічі з секцією, далі числом стає виміряне.

   🛑 Двох секцій тут навмисно немає — `pos` і `nets`. У них усередині
   `position:sticky` (`.pos-lead`, `.ask-txt`), а контейнмент і липкий
   елемент — сусідство, яке треба перевіряти окремо. Виграш від них
   менший за ризик мовчки зламати липкий заголовок.

   Реверанс до `.reveal` нижче за файлом: секції з'являються за
   спостерігачем перетину, і він з відкладеним рендером працює як раніше —
   секція не `display:none`, вона просто не порахована. */
.vz{ content-visibility:auto; contain-intrinsic-size:auto 900px }
/* Здогад окремо для кожної секції, бо спільні 900px помилялись сумарно на
   3 175 px: сторінка до першого прокручування вважала себе на 17 703 px
   замість 14 526. Смуга прокрутки в такої сторінки бреше про те, скільки
   лишилось, і скорочується під пальцем у міру читання.
   Числа тут — виміряні висоти мінус 209 px відступів секції, які
   `contain-intrinsic-size` не описує (воно про вміст, не про коробку). */
/* 🛑 Вітрина роликів у цьому списку заради розкладки й малювання — і
   ТІЛЬКИ заради них. Тут стояло пояснення, що відкладений рендер заразом
   економить трафік постерів; воно було неправдою, і виміряти це коштувало
   однієї команди: усі 76 повних постерів вітрини запитувались на 38-44 мс,
   тобто одразу й усі, попри `content-visibility`.

   Причина в тому, що відеоелемент тягне постер під час вибору ресурсу, а
   не під час малювання, — його не стосується ні `content-visibility`, ні
   `loading="lazy"`. Трафік лагодиться в іншому місці й іншим способом:
   атрибута `poster` у розмітці немає взагалі, його ставить скрипт перед
   появою плитки (див. `data-poster` у site.js). */
.reels-wrap.vz{ contain-intrinsic-size:auto 829px }
.doors.vz{ contain-intrinsic-size:auto 425px }
.feat.vz { contain-intrinsic-size:auto 718px }
.loop.vz { contain-intrinsic-size:auto 480px }
.world.vz{ contain-intrinsic-size:auto 677px }
.edge.vz { contain-intrinsic-size:auto 428px }
.vs.vz   { contain-intrinsic-size:auto 706px }
.cta.vz  { contain-intrinsic-size:auto 239px }

.reel{ position:relative; flex:0 0 auto; width:174px; aspect-ratio:9/16;
  border-radius:var(--r-md); overflow:hidden; background:var(--card);
  border:1px solid var(--line) }
/* Без aspect-ratio коробка згорнулась би в нуль і вітрина зникла б без
   жодної помилки в консолі. */
@supports not (aspect-ratio: 9 / 16){ .reel{ height:309px } }
/* `img` тут рівноправний з `video`: у плівці за героєм кадри — постери,
   у вітрині — живі ролики, а коробка в них одна й та сама. */
.reel video,.reel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.reels-count{ color:var(--faint); font-size:13.5px; margin:0 }

/* ── тікток-дек: як контент виглядає в чужій стрічці ─────────────────────
   🛑 Навмисно ІНША мова руху за решту сторінки. Тут ми імітуємо не наш
   сайт, а застосунок, у якому клієнт реально гортає стрічку: перехід між
   карткам — ЦЕ ЗМІНА OPACITY БЕЗ TRANSITION, тобто миттєвий стоп-кадр, а
   не плавне розчинення. Плавність тут читалась би як «наша анімація», а
   не як достовірна імітація TikTok/Reels — саме той провал, що стався в
   першій ітерації цього блоку. */
.tt-wrap{ padding:76px 0 88px }
.tt-head{ text-align:center; margin-bottom:36px }
.tt-stage{ display:flex; justify-content:center; position:relative }
.tt-stage::before{ content:""; position:absolute; inset:-40px; z-index:0;
  background:radial-gradient(46% 46% at 50% 40%,
    color-mix(in srgb,var(--accent) 16%,transparent), transparent 72%);
  pointer-events:none }
.tt-phone{ position:relative; z-index:1; width:302px; max-width:84vw;
  aspect-ratio:9/16; border-radius:30px; overflow:hidden; background:#050505;
  border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));
  box-shadow:0 24px 60px -22px rgba(0,0,0,.65),
             0 0 0 1px rgba(255,255,255,.04) inset;
  outline:none }
.tt-phone:focus-visible{ box-shadow:0 0 0 3px var(--accent) }

/* Смуги вгорі — та сама ідея, що в Stories, але заповнення керує ЛИШЕ клас
   (.done / .on), а не CSS-таймер: JS і так тримає таймер для перемикання
   карток, і друга незалежна година для смужки розійшлась би з першою за
   кілька циклів. */
.tt-bars{ position:absolute; top:9px; left:9px; right:9px; z-index:5;
  display:flex; gap:4px }
.tt-bar{ flex:1; height:2px; border-radius:2px;
  background:rgba(255,255,255,.26); overflow:hidden }
.tt-bar i{ display:block; height:100%; width:0%; background:#fff }
.tt-bar.done i{ width:100% }
.tt-bar.on i{ animation:tt-fill var(--tt-dur,2600ms) linear forwards }
@keyframes tt-fill{ from{ width:0% } to{ width:100% } }
@media (prefers-reduced-motion: reduce){ .tt-bar.on i{ animation:none; width:60% } }

.tt-cards{ position:relative; width:100%; height:100% }
/* Немає transition на .tt-card навмисно — перехід має бути РІЗКИМ, як
   монтажний стик, не переходом. */
.tt-card{ position:absolute; inset:0; opacity:0; pointer-events:none }
.tt-card.on{ opacity:1; pointer-events:auto }
.tt-card video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.tt-fade{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.4) 0%, transparent 20%,
    transparent 52%, rgba(0,0,0,.8) 100%) }
.tt-side{ position:absolute; right:10px; bottom:74px; z-index:4;
  display:flex; flex-direction:column; gap:16px; align-items:center }
.tt-ic{ width:38px; height:38px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; color:#fff;
  background:rgba(255,255,255,.14); -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px) }
.tt-heart{ color:#fff }
.tt-caption{ position:absolute; left:14px; right:66px; bottom:18px; z-index:4;
  display:flex; flex-direction:column; gap:3px; color:#fff }
.tt-caption b{ font-size:13.5px; font-weight:700 }
.tt-caption span{ font-size:12px; opacity:.82; line-height:1.35 }

@media (max-width:640px){
  .tt-phone{ width:264px }
}

/* ── двері за сценарієм ──────────────────────────────────────────────── */
.tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:22px;
  background:var(--card); border:1px solid var(--line); border-radius:99px;
  padding:6px; width:max-content; max-width:100% }
.tab{ border:0; background:transparent; color:var(--dim); cursor:pointer;
  font-weight:600; font-size:14px; line-height:1; font-family:inherit; padding:11px 20px; border-radius:99px;
  transition:color .25s var(--ease), background .25s var(--ease) }
.tab:hover{ color:var(--fg) }
.tab.on{ background:var(--accent); color:var(--accent-fg) }
/* Двошарова коробка: зовнішня оправа з підкладкою, всередині — ядро. */
.door{ display:grid; gap:34px; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  background:var(--card-2); border:1px solid var(--line);
  border-radius:calc(var(--r-lg) + 6px); padding:8px }
.door-txt,.door-pts{ background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:32px;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--fg) 6%,transparent) }
.door{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:8px }
/* Без цього рядка сховані панелі лишаються на екрані: `display:grid` у
   правилі вище перебиває `[hidden]{display:none}` зі стилю браузера, і всі
   три сценарії показуються стосом — вкладки перестають бути вкладками. */
.door[hidden]{ display:none }
.door-txt h3{ margin:0 0 12px; font-size:22px; letter-spacing:-.02em; font-weight:600 }
.door-txt p{ margin:0; color:var(--dim); font-size:15.5px }
.door-pts{ list-style:none; margin:0; display:grid; gap:14px; align-content:center }
.door-pts li{ display:flex; gap:12px; align-items:flex-start; font-size:15px }
.door-pts svg{ flex:none; margin-top:3px; color:var(--accent) }

/* ── секції-результати ───────────────────────────────────────────────── */
.shot{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
  background:var(--card); box-shadow:var(--shadow); margin-top:8px }
.feat-ix{ list-style:none; margin:34px 0 0; padding:0; display:grid; gap:14px 34px;
  grid-template-columns:repeat(4,1fr); counter-reset:ix }
.feat-ix li{ display:flex; gap:10px; align-items:baseline; font-size:14.5px;
  color:var(--dim); border-top:1px solid var(--line); padding-top:14px }
.ix-n{ font:600 12px/1 "JetBrains Mono",ui-monospace,monospace; color:var(--faint) }

/* ── фінальний заклик ────────────────────────────────────────────────── */
.cta{ text-align:center }
.cta h2,.cta .sub{ margin-left:auto; margin-right:auto }
.cta-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap }

/* ═══ ПІДВАЛ ═════════════════════════════════════════════════════════════ */
/* Підвал — не смітник для посилань, а останнє, що людина бачить. Тому
   тепле світло згори (той самий бурштин, що в героєві), товста лінія над
   ним і колонки, які реагують на наведення. */
.site-foot{ position:relative; isolation:isolate; overflow:hidden;
  border-top:1px solid var(--line); padding:72px 0 40px; background:var(--bg-2) }
.site-foot::before{
  content:""; position:absolute; inset:0 0 auto; height:1px; z-index:1;
  background:linear-gradient(90deg, transparent,
    color-mix(in srgb,var(--accent) 60%,transparent) 22%,
    color-mix(in srgb,var(--accent) 60%,transparent) 78%, transparent);
}
.site-foot::after{
  content:""; position:absolute; left:50%; top:-190px; z-index:0;
  width:min(900px,100%); height:320px; transform:translateX(-50%);
  background:radial-gradient(60% 60% at 50% 50%,
    color-mix(in srgb,var(--accent) 12%,transparent), transparent 72%);
  pointer-events:none;
}
.site-foot .wrap{ position:relative; z-index:1 }
.foot-grid{ display:grid; gap:34px;
  grid-template-columns:minmax(200px,1.5fr) repeat(4,minmax(120px,1fr)) }
.foot-brand .logo{ font-size:20px; margin-right:0 }
.foot-tag{ color:var(--faint); font-size:14px; margin:14px 0 0; max-width:30ch }
/* Пара мов замість одного посилання «Українська»: воно показувало мову,
   якої зараз НЕМА, і читалось як підпис до поточної. */
.foot-lang{ display:inline-flex; gap:2px; margin-top:18px; padding:4px;
  border:1px solid var(--line); border-radius:99px; background:var(--card) }
.fl{ font:600 12px/1 "Inter",system-ui,sans-serif; letter-spacing:.04em;
  color:var(--faint); padding:8px 13px; border-radius:99px;
  transition:color .25s var(--ease), background .25s var(--ease) }
.fl:hover{ color:var(--fg) }
.fl.on{ color:var(--accent-fg); background:var(--accent) }

.foot-col{ display:flex; flex-direction:column; gap:9px }
.foot-col h3{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); margin:0 0 6px; font-weight:600 }
/* Посилання «виїжджає» вправо на наведення. Дешевий сигнал, що це не
   список, а кнопки — і саме він відрізняє живий підвал від мертвого. */
.foot-col a{ position:relative; color:var(--dim); font-size:14.5px;
  width:max-content;
  transition:color .25s var(--ease), transform .35s var(--ease) }
.foot-col a:hover{ color:var(--fg); transform:translateX(3px) }
.foot-col a::before{
  content:""; position:absolute; left:-11px; top:50%; width:4px; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--ease);
}
.foot-col a:hover::before{ transform:scaleX(1) }

.foot-base{ display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  margin-top:52px; padding-top:24px; border-top:1px solid var(--line);
  color:var(--faint); font-size:13.5px }
.foot-base a{ color:var(--dim); transition:color .25s var(--ease) }
.foot-base a:hover{ color:var(--accent) }
.foot-dot{ opacity:.5 }

/* ═══ ВНУТРІШНІ СТОРІНКИ ═════════════════════════════════════════════════ */
.hero-sub{ padding:88px 0 56px }
.hero-sub h1{ font-size:clamp(32px,5vw,58px); max-width:18ch }
.hero-sub .lede{ max-width:62ch }
.prose-page{ padding:56px 0 0 }
.plans-sec{ padding-top:24px }

/* картки — двошарова коробка: тонка оправа, всередині ядро зі своїм світлом */
/* ═══ «МОЖЛИВОСТІ»: ПРЕДМЕТ БІЛЯ КОЖНОГО ЗАГОЛОВКА ════════════════════════
   Чотири розділи поспіль однією сіткою карток — і сторінка читається як
   один довгий список. Предмет поруч із заголовком ламає цю однаковість, а
   заразом відповідає на питання заголовка раніше, ніж людина дочитає
   абзац під ним.

   🛑 Предмети НАВМИСНО різні за формою: ланцюжок кадрів, тиждень, список
   рядків, три числа. Чотири однакові предмети повторили б ту саму
   помилку, тільки дорожче.

   Рух скрізь один прохід при появі, без нескінченних циклів: тут чотири
   такі блоки на одній сторінці, і чотири вічні анімації змагались би між
   собою за увагу, поки людина читає. */
.feat-head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:38px; align-items:center; margin-bottom:30px;
}
.fh-txt .sub{ margin-bottom:0 }
.fo{
  margin:0; padding:18px 20px 20px; border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--card);
  display:flex; flex-direction:column; gap:12px;
}
.fo figcaption{
  font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--faint);
}
.fo-note{ font-size:12px; color:var(--dim); line-height:1.4 }
/* Спільний вихід для всіх предметів: `--k` рахується з одиниці (так їх
   нумерує рушій шаблонів), тому мінус один. */
.fo-board .fb,.fo-cal .fc,.fo-inbox .fi,.fo-panel .fp{
  opacity:0; animation:foIn .5s var(--ease) forwards;
  animation-delay:calc((var(--k) - 1) * .11s); animation-play-state:paused;
}
.is-in .fo-board .fb,.is-in .fo-cal .fc,
.is-in .fo-inbox .fi,.is-in .fo-panel .fp{ animation-play-state:running }
@keyframes foIn{ from{ opacity:0; transform:translateY(7px) } to{ opacity:1; transform:none } }

/* ── 1. розкадровка ──────────────────────────────────────────────────── */
.fo-board{ display:flex; align-items:flex-end; gap:0 }
.fb{ display:flex; flex-direction:column; align-items:center; gap:6px; flex:1 1 0; min-width:0 }
.fb i{
  position:relative; display:block;
  width:100%; max-width:54px; aspect-ratio:9/16; border-radius:5px;
  border:1px solid var(--line-2); background:var(--bg-2); overflow:hidden;
}
.fb i img{ width:100%; height:100%; object-fit:cover; display:block }
/* Останній кадр — не етап, а готовий файл: бурштиновий обідок і знак
   відтворення поверх кадру. Решта три лишаються просто кадрами. */
.fb:last-child i{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent), 0 8px 18px -12px oklch(0.2 0.02 60/.6);
}
.fb:last-child i::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:22px; height:22px; border-radius:50%;
  background:color-mix(in srgb, var(--accent) 92%, transparent);
  box-shadow:inset -4px 0 0 -1px transparent;
}
/* Трикутник окремим шаром: усередині круглої плашки, а не замість неї. */
.fb:last-child i::before{
  content:""; position:absolute; inset:0; margin:auto; z-index:1;
  width:0; height:0; border-style:solid; border-width:5px 0 5px 8px;
  border-color:transparent transparent transparent var(--accent-fg);
  transform:translateX(1px);
}
.fb b{ font-size:10.5px; font-weight:600; color:var(--dim); text-align:center }
.fb + .fb{ position:relative }
.fb + .fb::before{
  content:""; position:absolute; left:-5px; top:34%; width:6px; height:6px;
  border-right:1.5px solid var(--line-2); border-top:1.5px solid var(--line-2);
  transform:rotate(45deg);
}

/* ── 2. тиждень ──────────────────────────────────────────────────────── */
.fo-cal{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px }
.fc{ display:flex; flex-direction:column; align-items:center; gap:5px }
.fc em{ font-style:normal; font-family:var(--mono); font-size:9.5px; color:var(--faint) }
.fc i{
  width:100%; height:34px; border-radius:5px;
  background:color-mix(in srgb,var(--accent) 26%, transparent);
}
/* 🛑 Четвер (четвертий) починає порожнім і заповнюється НАПРИКІНЦІ виходу
   решти. Порожній слот тут — головний предмет розділу: він показує саме
   те, що робить автопілот. Якби він заповнювався разом з усіма, дірки не
   було б видно взагалі, і картинка нічого б не розповідала. */
.fc:nth-child(4) i{
  background:transparent; border:1px dashed var(--line-2);
  animation:fcFill .5s var(--ease) forwards; animation-delay:1.15s;
  animation-play-state:paused;
}
.is-in .fc:nth-child(4) i{ animation-play-state:running }
@keyframes fcFill{
  60%{ transform:scale(1.12) }
  to { background:var(--accent); border-color:transparent; transform:scale(1) }
}
.fc:nth-child(6) i,.fc:nth-child(7) i{ background:color-mix(in srgb,var(--accent) 12%, transparent) }

/* ── 3. вхідна ───────────────────────────────────────────────────────── */
.fo-inbox{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px }
.fi{
  display:flex; align-items:center; gap:10px; padding:9px 11px;
  border-radius:9px; border:1px solid var(--line); background:var(--bg-2);
}
.fi span{ flex:1; min-width:0; font-size:12.5px; color:var(--fg);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.fi b{
  flex:0 0 auto; font-family:var(--mono); font-size:10.5px; font-weight:700;
  padding:3px 7px; border-radius:5px;
}
/* Три стани трьома різними мовами, а не трьома відтінками одного: лід —
   бурштин, автовідповідь — спокійна сіра, прострочене — контур. Відтінки
   одного кольору читались би як «більше-менше того самого». */
.fi-lead b{ background:var(--accent); color:var(--accent-fg) }
.fi-auto b{ background:var(--line); color:var(--dim) }
.fi-late  { border-color:color-mix(in srgb,var(--accent) 45%, var(--line)) }
.fi-late b{ background:transparent; color:var(--accent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%, transparent) }

/* ── 4. панель ───────────────────────────────────────────────────────── */
.fo-panel{ display:flex; gap:22px; flex-wrap:wrap }
.fp{ display:flex; flex-direction:column; min-width:0 }
.fp b{ font-size:23px; font-weight:700; line-height:1.05; color:var(--fg);
  font-variant-numeric:tabular-nums }
.fp i{ font-style:normal; font-size:11px; color:var(--faint) }
.fp em{
  font-style:normal; font-family:var(--mono); font-size:10.5px;
  color:var(--accent); margin-top:3px;
}

@media (max-width:980px){
  .feat-head{ grid-template-columns:minmax(0,1fr); gap:22px }
}
@media (prefers-reduced-motion: reduce){
  .fo-board .fb,.fo-cal .fc,.fo-inbox .fi,.fo-panel .fp{ animation:none; opacity:1; transform:none }
  .fc:nth-child(4) i{ animation:none; background:var(--accent); border-color:transparent }
}

/* ═══ «ПРО НАС» ══════════════════════════════════════════════════════════
   Сторінка була 223 слова суцільної прози без жодного предмета й жодного
   числа. Текстова вона й має бути, але оку треба за що зачепитись.

   Три форми поспіль, і жодна не сітка карток: шлях, нумерований список
   переконань, смуга фактів. */

/* ── шлях: агенція → система → продукт ───────────────────────────────── */
.ab-path{ display:flex; align-items:stretch; gap:0; margin:8px 0 0 }
.ab-step{
  flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:4px;
  padding:16px 20px; border:1px solid var(--line); background:var(--card);
  opacity:0; animation:foIn .5s var(--ease) forwards;
  animation-delay:calc(var(--k) * .14s); animation-play-state:paused;
}
.is-in .ab-step{ animation-play-state:running }
.ab-step:first-child{ border-radius:var(--r-lg) 0 0 var(--r-lg) }
.ab-step:last-child { border-radius:0 var(--r-lg) var(--r-lg) 0 }
.ab-step + .ab-step{ border-left:0 }
/* Останній крок — теперішній, тому він єдиний бурштиновий. Однаковий
   колір усіх трьох перетворив би шлях на просто три коробки. */
.ab-step:last-child b{ color:var(--accent) }
.ab-step b{ font-size:16px; font-weight:700; color:var(--fg); line-height:1.25 }
.ab-step i{ font-style:normal; font-size:13px; color:var(--dim); line-height:1.4 }
/* Стрілка між кроками — на межі, а не окремим елементом: зайвий вузол
   заради трикутника довелось би ще й ховати від читалки. */
.ab-step + .ab-step{ position:relative }
.ab-step + .ab-step::before{
  content:""; position:absolute; left:-6px; top:50%; width:9px; height:9px;
  margin-top:-5px; background:var(--card); transform:rotate(45deg);
  border-top:1px solid var(--line); border-right:1px solid var(--line);
}

/* ── переконання ─────────────────────────────────────────────────────── */
.ab-list{
  list-style:none; margin:26px 0 0; padding:0; counter-reset:ab;
  display:grid; gap:2px;
}
.ab-list li{
  counter-increment:ab; display:grid; gap:3px 16px;
  grid-template-columns:auto minmax(0,1fr);
  padding:16px 0; border-bottom:1px solid var(--line);
  opacity:0; animation:foIn .5s var(--ease) forwards;
  animation-delay:calc(var(--k) * .09s); animation-play-state:paused;
}
.is-in .ab-list li{ animation-play-state:running }
.ab-list li:last-child{ border-bottom:0 }
.ab-list li::before{
  content:counter(ab, decimal-leading-zero); grid-row:1 / span 2;
  font-family:var(--mono); font-size:12px; font-weight:700;
  color:var(--accent); padding-top:3px;
}
.ab-list b{ font-size:17px; font-weight:700; color:var(--fg); line-height:1.3 }
.ab-list i{ font-style:normal; font-size:14px; color:var(--dim); line-height:1.5 }

/* ── факти ───────────────────────────────────────────────────────────── */
.ab-facts{
  display:flex; gap:30px; flex-wrap:wrap; margin:22px 0 6px;
  padding:18px 22px; border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--card);
}
.ab-fact{ display:flex; flex-direction:column; min-width:0 }
.ab-fact b{ font-size:22px; font-weight:700; line-height:1.1; color:var(--accent) }
.ab-fact i{ font-style:normal; font-size:12.5px; color:var(--dim) }

@media (max-width:820px){
  /* Горизонтальний шлях на телефоні дав би три колонки завширшки з палець. */
  .ab-path{ flex-direction:column }
  .ab-step:first-child{ border-radius:var(--r-lg) var(--r-lg) 0 0 }
  .ab-step:last-child { border-radius:0 0 var(--r-lg) var(--r-lg) }
  .ab-step + .ab-step{ border-left:1px solid var(--line); border-top:0 }
  .ab-step + .ab-step::before{ left:50%; top:-5px; margin:0 0 0 -5px }
}
@media (prefers-reduced-motion: reduce){
  .ab-step,.ab-list li{ animation:none; opacity:1; transform:none }
}

/* ── БЛОГ: НАБІРНИЙ ЗНАК ЗАМІСТЬ ОБКЛАДИНКИ ─────────────────────────────
   Жодна стаття не має власної обкладинки, і сторінка блогу була без
   єдиного зображення. Знак не прикидається фотографією: рубрика набором
   і одна геометрична фігура, різна за карткою. */
.pc-mark{
  display:flex; align-items:flex-end; justify-content:space-between;
  height:96px; padding:14px 16px; margin-bottom:14px; overflow:hidden;
  border-radius:var(--r-md); position:relative;
  background:linear-gradient(148deg,
    color-mix(in srgb,var(--accent) 16%, var(--card-2)),
    var(--card-2) 70%);
  border:1px solid var(--line);
}
.pc-mark b{
  font-family:var(--mono); font-size:10px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--accent); z-index:1;
}
/* Фігура велика й обрізана краєм — так вона читається як знак, а не як
   іконка, що загубилась у кутку. */
.pc-mark i{
  position:absolute; right:-26px; top:-26px; width:104px; height:104px;
  border:1.5px solid color-mix(in srgb,var(--accent) 34%, transparent);
  border-radius:50%;
}
/* Рубрика на знаку робить чип у рядку дат зайвим: те саме слово двічі
   на висоті двох сантиметрів. Ховаємо чип, а не слово на знаку — саме на
   знаку воно й потрібне, бо він без нього німий. Якщо `:has` десь не
   спрацює, вийде дублювання, а не зникле — навмисно так, бо друга
   поведінка гірша. */
.post-card:has(.pc-mark) .pc-cat{ display:none }
.post-card:nth-child(3n+2) .pc-mark i{ border-radius:14px; transform:rotate(18deg) }
.post-card:nth-child(3n+3) .pc-mark i{
  border-radius:0; transform:rotate(45deg); right:-34px; top:-34px;
}
.post-card:nth-child(3n+2) .pc-mark{
  background:linear-gradient(148deg,
    color-mix(in srgb,var(--accent) 9%, var(--card-2)), var(--card-2) 66%);
}
.post-card:nth-child(3n+3) .pc-mark{
  background:linear-gradient(200deg,
    color-mix(in srgb,var(--accent) 13%, var(--card-2)), var(--card-2) 72%);
}

.cards{ display:grid; gap:16px; grid-template-columns:repeat(4,minmax(0,1fr)) }
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px; display:flex; flex-direction:column; gap:10px;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--fg) 6%,transparent);
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.card:hover{ border-color:var(--line-2); transform:translateY(-2px) }
.card h3{ margin:0; font-size:17.5px; letter-spacing:-.015em; font-weight:600 }
.card p{ margin:0; color:var(--dim); font-size:14.8px }
.card .tag{ font-weight:600; font-size:11px; line-height:1; font-family:var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent) }
.card-link{ margin-top:auto; padding-top:6px; display:inline-flex; align-items:center;
  gap:7px; color:var(--accent); font-size:14.5px; font-weight:500 }
.card-link:hover{ text-decoration:underline; text-underline-offset:3px }

/* межі — навмисно без карток: це список, а не вітрина */
.honest{ background:var(--bg-2) }
.limits{ list-style:none; margin:0; padding:0; display:grid; gap:0;
  border-top:1px solid var(--line) }
.limits li{ display:grid; gap:6px 30px; padding:20px 0;
  border-bottom:1px solid var(--line); grid-template-columns:minmax(0,7fr) minmax(0,13fr) }
.lim-h{ font-weight:600; font-size:15.5px }
.lim-p{ color:var(--dim); font-size:15px }

/* кроки */
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:64px }
.step{ display:grid; gap:40px; align-items:center;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) }
.step:nth-child(even){ direction:rtl }
.step:nth-child(even) > *{ direction:ltr }
.step-n{ display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:99px; background:var(--accent);
  color:var(--accent-fg); font-weight:600; font-size:15px; line-height:1; font-family:inherit; margin-bottom:16px }
.step-txt h3{ margin:0 0 10px; font-size:24px; letter-spacing:-.02em; font-weight:600 }
.step-txt p{ margin:0; color:var(--dim); font-size:16px }
.step-who{ display:inline-block; margin-top:16px; font-weight:600; font-size:12px; line-height:1; font-family:inherit;
  letter-spacing:.06em; text-transform:uppercase; color:var(--faint);
  border:1px solid var(--line); border-radius:99px; padding:7px 12px }
.step-shot:empty{ display:none }

/* стрічка дня */
.timeline{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line) }
.timeline li{ display:grid; gap:6px 30px; padding:18px 0;
  border-bottom:1px solid var(--line);
  grid-template-columns:minmax(0,150px) minmax(0,1fr); align-items:baseline }
.tl-time{ font:600 13px/1.4 "JetBrains Mono",ui-monospace,monospace; color:var(--accent);
  font-variant-numeric:tabular-nums }
.tl-what{ color:var(--dim); font-size:15.5px }

/* питання — на <details>, тому працює й без JS */
.qa{ border-top:1px solid var(--line) }
.q{ border-bottom:1px solid var(--line) }
.q summary{ display:flex; align-items:flex-start; justify-content:space-between;
  gap:20px; padding:20px 0; cursor:pointer; list-style:none;
  font-size:17px; font-weight:500; min-height:44px }
.q summary::-webkit-details-marker{ display:none }
.q summary:hover{ color:var(--accent) }
.q-ic{ flex:none; margin-top:5px; color:var(--faint);
  transition:transform .35s var(--ease), color .25s var(--ease) }
.q[open] .q-ic{ transform:rotate(135deg); color:var(--accent) }
.q-a{ padding:0 0 22px; color:var(--dim); font-size:15.8px; max-width:76ch }
.q-a a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px }

/* реквізити */
.reqs{ margin:0; display:grid; gap:0; border-top:1px solid var(--line) }
.reqs > div{ display:grid; gap:4px 30px; padding:16px 0;
  border-bottom:1px solid var(--line);
  grid-template-columns:minmax(0,190px) minmax(0,1fr) }
.reqs dt{ color:var(--faint); font-size:14px }
.reqs dd{ margin:0; font-size:15.5px }

.muted-dot{ color:var(--faint) }

/* ═══ БЛОГ ═══════════════════════════════════════════════════════════════ */
.posts-sec{ padding:64px 0 }
.post-grid{ display:grid; gap:16px; grid-template-columns:repeat(3,minmax(0,1fr)) }
.post-card{ background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  transition:border-color .35s var(--ease), transform .35s var(--ease) }
.post-card:hover{ border-color:var(--line-2); transform:translateY(-3px) }
.pc-link{ display:flex; flex-direction:column; gap:10px; padding:24px; height:100% }
.pc-cover{ display:block; margin:-24px -24px 6px; border-bottom:1px solid var(--line) }
.pc-cover img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover }
.pc-meta{ display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  font-size:12.5px; color:var(--faint) }
.pc-cat{ color:var(--accent); font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; font-size:11px }
.post-card h3{ margin:0; font-size:19px; line-height:1.25; letter-spacing:-.02em }
.post-card p{ margin:0; color:var(--dim); font-size:14.5px }

.post-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line) }
.post-list li{ border-bottom:1px solid var(--line) }
.post-list a{ display:flex; gap:20px; align-items:baseline;
  justify-content:space-between; padding:18px 0;
  transition:color .2s var(--ease) }
.post-list a:hover .pl-title{ color:var(--accent) }
.pl-title{ font-size:17px; font-weight:500 }
.pl-meta{ color:var(--faint); font-size:13px; white-space:nowrap }

/* ── стаття ──────────────────────────────────────────────────────────── */
.crumbs{ display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  color:var(--faint); font-size:13.5px; padding:8px 0 26px }
.crumbs a:hover{ color:var(--fg) }
.art-head{ max-width:74ch }
.art-head h1{ font-size:clamp(30px,4.6vw,50px); letter-spacing:-.035em;
  line-height:1.06; margin:0 0 16px; font-weight:600 }
.art-meta{ display:flex; gap:10px; flex-wrap:wrap; color:var(--faint);
  font-size:13.5px; margin:0 0 20px }
.art-lede{ font-size:19px; color:var(--dim); margin:0 }
.art-body{ display:grid; gap:48px; align-items:start; margin-top:44px;
  grid-template-columns:minmax(0,220px) minmax(0,1fr) }
.art-toc{ position:sticky; top:88px; font-size:14px }
.toc-h{ display:block; font-weight:600; font-size:11px; line-height:1; font-family:inherit; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); margin-bottom:14px }
.art-toc ol{ list-style:none; margin:0; padding:0; display:grid; gap:10px;
  border-left:1px solid var(--line) }
.art-toc a{ display:block; padding-left:14px; margin-left:-1px;
  border-left:1px solid transparent; color:var(--dim); line-height:1.35;
  transition:color .2s var(--ease), border-color .2s var(--ease) }
.art-toc a:hover,.art-toc a.on{ color:var(--fg); border-left-color:var(--accent) }
.art-text{ padding:0; max-width:74ch }
.art-cta{ display:block; margin:44px 0 0; padding:26px;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--accent) 7%,var(--card)) }
.art-cta b{ display:block; font-size:19px; margin-bottom:8px;
  font-family:var(--serif) }
.art-cta p{ margin:0 0 18px; color:var(--dim); font-size:15px }
.art-more{ margin-top:72px; padding-top:48px; border-top:1px solid var(--line) }
.art-more h2{ margin-bottom:24px }


/* ═══ ФОРМА ЗАЯВКИ ═══════════════════════════════════════════════════════ */
.contact-grid{ display:grid; gap:28px; align-items:start;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr) }
.lead-form{ background:var(--card); border:1px solid var(--line);
  border-radius:calc(var(--r-lg) + 4px); padding:32px; display:grid; gap:20px;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--fg) 6%,transparent) }
.lf-row{ display:grid; gap:9px }
.lf-two{ display:grid; gap:20px; grid-template-columns:repeat(2,minmax(0,1fr)) }
.lead-form label{ font-size:13.5px; color:var(--dim); font-weight:500 }
.lead-form input[type=text],.lead-form input[type=email],.lead-form textarea{
  font:inherit; font-size:15.5px; color:var(--fg); background:var(--bg-2);
  border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px;
  outline:none; width:100%; resize:vertical;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease) }
.lead-form input:focus,.lead-form textarea:focus{ border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 13%,transparent) }
.lead-form ::placeholder{ color:var(--faint) }

/* Перемикач теми — сегменти на радіо: працює без JS і читається з клавіатури. */
.seg{ display:flex; gap:6px; flex-wrap:wrap; background:var(--bg-2);
  border:1px solid var(--line); border-radius:99px; padding:5px; width:max-content;
  max-width:100% }
.seg-i input{ position:absolute; opacity:0; width:0; height:0 }
.seg-i span{ display:block; padding:10px 16px; border-radius:99px; cursor:pointer;
  font-size:14px; font-weight:600; color:var(--dim);
  transition:background .25s var(--ease), color .25s var(--ease) }
.seg-i input:checked + span{ background:var(--accent); color:var(--accent-fg) }
.seg-i input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px }

/* Поле-пастка. display:none боти розпізнають; лишаємо в потоці, але поза
   екраном і без фокуса.
   🛑 Ховаємо ОБРІЗАННЯМ, а не виносом на -9999px — той самий висновок, що
   для `.skip` вище. Винос убік робить документ ширшим на відстань виносу, і
   перевірка адаптиву чесно рахує його як елемент за межами екрана: у звіті
   про кожну сторінку з формою з'являвся рядок, який ніколи не був дефектом
   верстки, і за ним губились справжні. */
.lf-trap{ position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap }
.lf-send{ display:flex; gap:18px; align-items:center; flex-wrap:wrap }
.lf-note{ margin:0; color:var(--faint); font-size:13px; max-width:40ch }
.lf-msg{ margin:0; padding:14px 16px; border-radius:var(--r-md); font-size:14.5px;
  border:1px solid var(--line); color:var(--dim) }
.lf-msg.ok{ border-color:color-mix(in srgb,var(--ok) 50%,var(--line));
  background:color-mix(in srgb,var(--ok) 10%,transparent); color:var(--fg) }
.lf-msg.bad{ border-color:color-mix(in srgb,var(--warn) 55%,var(--line));
  background:color-mix(in srgb,var(--warn) 10%,transparent); color:var(--fg) }

.contact-side{ display:grid; gap:0; border-top:1px solid var(--line) }
.cs-item{ display:grid; gap:5px; padding:18px 0; border-bottom:1px solid var(--line) }
.cs-k{ font:600 11px/1 inherit; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent); font-family:inherit }
/* Адреса, пошта й назва юрособи містять слова, які не переносяться. У
   колонці `minmax(0,.65fr)` таке слово не вміщається й ВИЇЖДЖАЄ за екран —
   разом із ним їде вся сторінка. Ловилось лише українською: ті самі рядки
   там довші. */
.cs-v{ color:var(--dim); font-size:15px; overflow-wrap:anywhere }

/* 🛑 У цієї сітки не було жодної точки перелому. На десктопі це дві
   колонки, і на 360 px теж дві: форма зліва, контакти справа — по 170 px
   кожна. Помітили тільки тоді, коли перевірку розширили на українські
   сторінки, де текст довший і почав вилазити за край. */
@media (max-width:820px){
  .contact-grid{ grid-template-columns:minmax(0,1fr); gap:22px }
}
@media (max-width:560px){
  .lf-two{ grid-template-columns:minmax(0,1fr) }
  .lead-form{ padding:20px }
}

/* ═══ ТАБЛИЦІ ════════════════════════════════════════════════════════════ */
.scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch }
table{ border-collapse:collapse; width:100%; font-size:14.5px; min-width:420px }
th,td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--line) }
th{ font-weight:600; color:var(--dim); font-size:13px; white-space:nowrap }
td.num,th.num{ text-align:right; font-variant-numeric:tabular-nums }

/* ═══ ТАРИФИ ═════════════════════════════════════════════════════════════ */
.plans{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)) }
.plan{ position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:28px; display:flex; flex-direction:column }
.plan.best{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) }
/* Стрічка виноситься НА рамку, а не в потік: у потоці вона зсувала назву й
   ціну середньої картки вниз, і три тарифи переставали читатись одним рядком
   очей — саме те порівняння, заради якого блок існує. */
.plan .badge{ position:absolute; top:-11px; left:24px; margin:0 }
.plan .name{ font-weight:600; font-size:15px; margin-bottom:6px }
.plan .price{ font-size:46px; font-weight:600; letter-spacing:-.04em; line-height:1;
  font-variant-numeric:tabular-nums }
.plan .per{ color:var(--faint); font-size:13.5px; margin:6px 0 18px }
.plan ul{ list-style:none; margin:0 0 22px; padding:0; font-size:14.5px; color:var(--dim) }
.plan li{ padding:7px 0; border-bottom:1px solid var(--line) }
.plan li b{ color:var(--fg) }
.plan .btn{ margin-top:auto; width:100% }
.badge{ display:inline-block; background:var(--accent); color:var(--accent-fg);
  font-weight:600; font-size:11px; line-height:1; font-family:inherit; padding:6px 10px; border-radius:99px; margin-bottom:12px }
.toggle{ display:inline-flex; border:1px solid var(--line); border-radius:99px;
  padding:5px; gap:4px; margin-bottom:30px; background:var(--card) }
.toggle button{ border:0; background:transparent; color:var(--dim); cursor:pointer;
  padding:9px 18px; border-radius:99px; font-weight:600; font-size:14px; line-height:1; font-family:inherit }
.toggle button.on{ background:var(--accent); color:var(--accent-fg) }

/* ── КАЛЬКУЛЯТОР ─────────────────────────────────────────────────────────
   Дві половини: зліва крутять, справа дивляться. Раніше результат стояв
   під органами керування, тобто зникав з очей рівно тоді, коли людина
   тягне повзунок і хоче бачити, що змінюється. */
.calc{ display:grid; gap:0; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden }
.calc-in{ padding:28px 30px }
.calc-row{ margin-bottom:24px }
.calc-row:last-child{ margin-bottom:0 }
.calc-lbl{ display:flex; align-items:baseline; gap:8px; margin-bottom:11px;
  font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--faint); font-weight:600 }
.calc-lbl b{ font-family:var(--serif);
  font-size:18px; letter-spacing:-.02em; color:var(--fg);
  font-variant-numeric:tabular-nums; text-transform:none }

/* Рівень якості сегментами. Випадайник ховає вибір за клік і не дає
   порівняти ціни; три кнопки показують і варіанти, і різницю одразу. */
.seg-q{ display:grid; gap:6px; grid-template-columns:repeat(3,minmax(0,1fr));
  padding:5px; border:1px solid var(--line); border-radius:14px;
  background:var(--bg) }
.sq{ display:flex; flex-direction:column; gap:3px; align-items:flex-start;
  padding:11px 12px; border:0; border-radius:10px; cursor:pointer;
  background:transparent; color:var(--dim); font-family:inherit; text-align:left;
  transition:background .3s var(--ease), color .3s var(--ease) }
.sq:hover{ background:color-mix(in srgb,var(--fg) 6%,transparent); color:var(--fg) }
.sq-t{ font-weight:600; font-size:13.5px; line-height:1.2 }
.sq-n{ font:500 12px/1 "JetBrains Mono",ui-monospace,monospace; opacity:.75 }
.sq.on{ background:var(--accent); color:var(--accent-fg) }
.sq.on:hover{ background:var(--accent); color:var(--accent-fg) }
.sq.on .sq-n{ opacity:.8 }

select,input[type=number]{ font:inherit; font-size:15px; padding:10px 13px;
  border-radius:var(--r-sm); border:1px solid var(--line); background:var(--bg);
  color:var(--fg); min-width:150px }
/* Повзунок власний: стандартний на темному тлі майже не видно, а розмір
   ручки на телефоні неможливо схопити. */
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%;
  height:6px; border-radius:99px; background:var(--line-2); outline:none }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none;
  width:22px; height:22px; border-radius:99px; background:var(--accent);
  border:3px solid var(--card); cursor:grab;
  box-shadow:0 4px 14px -4px color-mix(in srgb,var(--accent) 90%,transparent);
  transition:transform .25s var(--ease) }
input[type=range]::-webkit-slider-thumb:hover{ transform:scale(1.12) }
input[type=range]::-moz-range-thumb{ width:22px; height:22px; border-radius:99px;
  background:var(--accent); border:3px solid var(--card); cursor:grab }

/* Права половина: одне велике число як герой і три дрібні поруч. Чотири
   рівні числа в ряд змушували вибирати, на яке дивитись. */
.calc-out{ padding:28px 30px; background:var(--card-2);
  border-left:1px solid var(--line); display:flex; flex-direction:column }
.calc-hero b{ display:block; font-family:var(--serif);
  font-size:clamp(44px,6vw,62px); font-weight:600; letter-spacing:-.045em;
  line-height:1; color:var(--accent); font-variant-numeric:tabular-nums }
.calc-hero span{ display:block; margin-top:8px; color:var(--faint);
  font-size:13px; letter-spacing:.04em }
.calc-mini{ display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr));
  margin:24px 0 0; padding-top:20px; border-top:1px solid var(--line) }
.cm b{ display:block; font-family:var(--serif);
  font-size:19px; font-weight:600; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums }
.cm span{ display:block; margin-top:4px; color:var(--faint); font-size:11.5px;
  line-height:1.35 }
.verdict{ margin-top:auto; padding:14px 16px; border-radius:var(--r-md);
  font-size:14px; line-height:1.5; border:1px solid var(--line) }
.verdict.fits{ border-color:color-mix(in srgb,var(--ok) 50%,var(--line));
  background:color-mix(in srgb,var(--ok) 9%,transparent) }
.verdict.over{ border-color:color-mix(in srgb,var(--warn) 50%,var(--line));
  background:color-mix(in srgb,var(--warn) 9%,transparent) }
.plan-skel{ grid-column:1/-1; border:1px dashed var(--line); border-radius:var(--r-lg);
  padding:26px; color:var(--faint); font-size:14.5px }
.plan-err{ border-color:color-mix(in srgb,var(--warn) 50%,var(--line)); color:var(--dim) }


/* ═══ ТАРИФИ: ВІЗУАЛЬНИЙ АКЦЕНТ ══════════════════════════════════════════
   Ціни — сторінка, заради якої на сайт і приходять. Тому тут єдиний блок,
   якому дозволено бути голоснішим за решту: підсвітка середнього тарифу,
   поява карток чергою, окремий рядок економії. */
.plans-sec{ position:relative; isolation:isolate }
/* 🛑 inset:0, а не від'ємні відступи з боків.
   Шар світла, ширший за секцію на 10%, розтягує документ рівно на ці 10%:
   `overflow:visible` пропускає його назовні, і сторінка їде вбік на
   37 px при ширині 375. Виміряно вже вдруге — перший раз на героєві.
   Потрібний розмах дає САМ градієнт (радіус 70% замість 50%), і він
   нічого не розтягує. */
.plans-sec::before{
  content:""; position:absolute; inset:0 0 20%; z-index:0; pointer-events:none;
  background:radial-gradient(70% 62% at 50% 26%,
    color-mix(in srgb,var(--accent) 12%,transparent), transparent 72%);
}
.plans-sec .wrap{ position:relative; z-index:1 }
.plan{ transition:transform .45s var(--ease), border-color .45s var(--ease),
                  box-shadow .45s var(--ease) }
.plan:hover{ transform:translateY(-4px); border-color:var(--line-2) }
.plan.best{ border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent), 0 30px 70px -40px color-mix(in srgb,var(--accent) 60%,transparent) }
.plan.best:hover{ transform:translateY(-6px) }
/* Картки з'являються чергою — око встигає порівняти, а не бачить три
   однакові прямокутники одночасно. */
.plans .plan{ animation:planIn .6s var(--ease) both }
.plans .plan:nth-child(2){ animation-delay:.08s }
.plans .plan:nth-child(3){ animation-delay:.16s }
@keyframes planIn{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1 } }
@media (prefers-reduced-motion: reduce){ .plans .plan{ animation:none } }

.plan .price{ display:flex; align-items:baseline; gap:10px;
  transition:color .3s var(--ease) }
.plan.best .price{ color:var(--accent) }
/* Стара ціна поруч із новою. Дрібніша й приглушена — вона тут як точка
   відліку, а не як друга ціна, між якими треба обирати. */
.plan .price s{ font-size:22px; font-weight:500; color:var(--faint);
  text-decoration-thickness:1.5px; letter-spacing:-.02em }
.plan .badge.off{ left:auto; right:24px; background:var(--ok);
  color:#04150c; letter-spacing:.01em }
/* align-self, а не inline-block: картка — це flex-колонка, і в ній
   `align-items` за замовчуванням розтягує дитину на всю ширину. Плашка
   економії їхала від краю до краю й читалась як смуга, а не як позначка. */
.save{ display:inline-block; align-self:flex-start;
  margin:-10px 0 16px; padding:5px 10px; border-radius:99px;
  font-weight:600; font-size:12.5px; line-height:1; font-family:inherit;
  color:var(--ok); background:color-mix(in srgb,var(--ok) 14%,transparent) }
/* Обіцянка «ціна закріплюється» — бурштином, не зеленим: зелений на цій
   сторінці вже означає «економія в грошах», і два різні сенси в одному
   кольорі читаються як одне. */
.save.intro{ color:var(--accent); white-space:normal; text-align:left;
  background:color-mix(in srgb,var(--accent) 12%,transparent) }
.toggle{ position:relative }
.toggle button.on{ box-shadow:0 6px 18px -8px color-mix(in srgb,var(--accent) 80%,transparent) }

/* ═══ РОЗЦІНКИ ═══════════════════════════════════════════════════════════
   Не таблиця. Таблиця з назвами моделей — це довідник для інженера: щоб
   зрозуміти «дорого це чи ні», доводиться прочитати всі рядки й тримати їх
   в голові. Тут це робить смужка: довжина = частка від найдорожчого, і
   співвідношення видно, ще не читаючи цифр. */
.rate-h{ font-size:clamp(19px,2.1vw,23px); margin:0 0 6px; letter-spacing:-.02em }
.rate-sub{ color:var(--dim); font-size:14.5px; margin:0 0 20px; max-width:46ch }
.rate-groups{ display:grid; gap:22px }
/* Одна валюта — але не одна нескінченна колонка. Групи (ролик / зображення /
   текст) стають поруч на широкому екрані: 11 коротких рядків у смузі на 1090
   пікселів читаються як список покинутих полів. `auto-fit` + `minmax` дає
   стільки колонок, скільки влізе, без окремої точки перелому. */
#allRates{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
           gap:22px 34px; align-items:start }
.rg-h{ font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); margin:0 0 10px }
.rg-rows{ display:grid; gap:8px }

.rr{
  position:relative; padding:14px 16px 12px; border-radius:var(--r-md);
  background:var(--card); border:1px solid var(--line);
  transition:border-color .35s var(--ease), transform .35s var(--ease),
             background .35s var(--ease);
}
.rr:hover{ border-color:var(--line-2); background:var(--card-2);
  transform:translateY(-1px) }
.rr-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px }
.rr-tier{ font-weight:600; font-size:15px; letter-spacing:-.01em }
.rr-price{ display:inline-flex; align-items:baseline; gap:4px; white-space:nowrap }
.rr-price b{ font-family:var(--serif);
  font-size:22px; font-weight:600; letter-spacing:-.03em; line-height:1 }
.rr-price i{ font-style:normal; font-size:12px; color:var(--faint) }
.rr-incl{ font-weight:600; font-size:12.5px; line-height:1; padding:5px 10px;
  border-radius:99px; color:var(--ok);
  background:color-mix(in srgb,var(--ok) 14%,transparent) }
.rr-note{ margin:4px 0 10px; color:var(--dim); font-size:13.5px; line-height:1.5 }
.rr-note:empty{ margin:0 0 8px }
.rr-foot{ display:flex; align-items:center; gap:12px }
/* Назва моделі свідомо дрібна й моноширинна: це підпис для тих, хто
   справді порівнює двигуни, а не заголовок рядка. */
.rr-bar{ flex:1; height:3px; border-radius:99px;
  background:color-mix(in srgb,var(--fg) 8%,transparent); overflow:hidden }
.rr-bar i{ display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--accent) 45%,transparent), var(--accent));
  transform-origin:left; animation:barIn .9s var(--ease) both }
@keyframes barIn{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
@media (prefers-reduced-motion: reduce){ .rr-bar i{ animation:none } }

.rr[data-tier="max"]{ border-color:color-mix(in srgb,var(--accent) 30%,var(--line)) }
.rr[data-tier="max"] .rr-tier{ color:var(--accent) }
.rr[data-tier="incl"] .rr-bar i{ background:var(--ok) }

.rate-notes{ margin-top:30px; display:grid; gap:10px }
.rate-note{ display:flex; gap:10px; margin:0; color:var(--faint); font-size:13.5px;
  line-height:1.6; max-width:78ch }
.rate-note b{ color:var(--dim) }
.rn-ic{ color:var(--accent); flex:none; line-height:1.6 }

/* ═══ ТЕКСТОВІ СТОРІНКИ (юридичні, стаття блогу) ═════════════════════════ */
.prose{ max-width:74ch; padding:56px 0 88px }
.prose h1{ font-size:clamp(28px,4.2vw,44px); margin:0 0 10px; max-width:24ch }
.prose .meta{ color:var(--faint); font-size:13.5px; margin-bottom:36px }
/* Відступ під липку шапку: без нього перехід зі змісту ставить заголовок
   рівно ПІД шапку, і читач опиняється посеред абзацу, не бачачи, куди
   потрапив. */
.prose h2,.prose h3{ scroll-margin-top:92px }
.prose h2{ font-size:24px; margin:44px 0 12px; letter-spacing:-.02em }
.prose h3{ font-size:19px; margin:32px 0 10px }
.prose p,.prose li{ color:var(--dim); font-size:16.5px }
.prose li{ margin:6px 0 }
.prose strong{ color:var(--fg) }
.prose a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px }
.prose blockquote{ margin:26px 0; padding:2px 0 2px 20px;
  border-left:2px solid var(--accent); color:var(--fg) }
.prose code{ font:600 14px/1.5 "JetBrains Mono",ui-monospace,monospace;
  background:var(--card); border:1px solid var(--line); border-radius:6px; padding:2px 6px }
.prose img{ border-radius:var(--r-md); border:1px solid var(--line); margin:26px 0 }
.draft{ border:1px solid var(--warn);
  background:color-mix(in srgb,var(--warn) 10%,transparent);
  border-radius:var(--r-md); padding:14px 16px; margin-bottom:30px; font-size:14.5px }

/* ═══ ПОЯВА ПРИ ПРОКРУЧУВАННІ ════════════════════════════════════════════
   Ховає ТІЛЬКИ .pre, який навішує сам скрипт. Якби прихованість жила в
   .reveal, будь-яка помилка в JS лишила б відвідувача перед порожньою
   сторінкою — і саме на лендінгу, де це коштує найдорожче. */
.reveal{ transition:opacity .8s var(--ease), transform .8s var(--ease),
                    filter .8s var(--ease) }
.reveal.pre{ opacity:0; transform:translateY(22px); filter:blur(6px) }
.reveal.is-in{ opacity:1; transform:none; filter:none }
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal.pre{ opacity:1; transform:none; filter:none; transition:none }
  .menu-in a{ opacity:1; transform:none; transition:none }
}

/* ═══ ПРОКРУТКА: смуга поступу, паралакс, лічильники ═════════════════════ */
/* Смуга поступу читання. Там, де браузер уміє прив'язувати анімацію до
   прокручування сам (`animation-timeline`), вона рахується поза основним
   потоком і не смикається; де не вміє — ширину виставляє скрипт. */
.progress{ position:fixed; top:0; left:0; height:2px; z-index:40; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--accent) 60%,transparent), var(--accent));
  pointer-events:none }
@supports (animation-timeline: scroll()){
  .progress{ animation:prog linear; animation-timeline:scroll(root) }
  @keyframes prog{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
}

.count{ font-variant-numeric:tabular-nums }

/* ═══ МОБІЛЬНА ═══════════════════════════════════════════════════════════ */
@media (max-width:1180px){
  .cards{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  /* Зміст статті йде нагору й перестає бути липким: у вузькій колонці він
     з'їдав би півекрана тексту, заради якого сторінку й відкрили.
     minmax(0,1fr), а не 1fr: комірка сітки за замовчуванням має
     min-width:auto й розсувається під min-content вмісту. Таблиця в статті
     має min-width:420px — і колонка ставала 420 px завширшки на екрані 390,
     тобто сторінка їхала вбік. Класичний «grid blowout». */
  .art-body{ grid-template-columns:minmax(0,1fr); gap:28px }
  .art-toc{ position:static; border:1px solid var(--line);
    border-radius:var(--r-md); padding:18px 20px }
  .art-toc ol{ border-left:0; gap:8px }
  .art-toc a{ padding-left:0; border-left:0 }
}
@media (max-width:1040px){
  /* Дві колонки розцінок стають однією раніше за решту сітки: рядок має
     всередині ще три елементи в ряд (назва, ціна, смужка), і на 1000 px
     смужка вже стискається до нечитабельної. */
    /* Калькулятор у стовпець: у вузькій половині герой-число й три дрібні
     під ним не вміщаються, не зменшившись до нечитабельного. */
  .calc{ grid-template-columns:minmax(0,1fr) }
  .calc-out{ border-left:0; border-top:1px solid var(--line) }
  .verdict{ margin-top:24px }
  .proof-grid{ grid-template-columns:repeat(2,1fr) }
  .feat-ix{ grid-template-columns:repeat(2,1fr) }
  .foot-grid{ grid-template-columns:repeat(3,1fr) }
  .limits li{ grid-template-columns:1fr }
  .reqs > div{ grid-template-columns:minmax(0,150px) minmax(0,1fr) }
}
@media (max-width:860px){
  .nav-links{ display:none }
  .burger{ display:block }
  .door{ grid-template-columns:1fr }
  .reel{ width:150px }
  section{ padding:76px 0 }
  .hero{ padding:76px 0 60px }
  .hero-sub{ padding:64px 0 44px }
  /* Крок стає одним стовпцем; `direction:rtl`, яким міняли боки на широкому
     екрані, тут ЗНІМАЄТЬСЯ — інакше на телефоні знімок опинявся б над
     текстом у кожному парному кроці, і нумерація читалась би врозбій. */
  .step{ grid-template-columns:1fr; gap:24px }
  .step:nth-child(even){ direction:ltr }
  .steps{ gap:52px }
  .timeline li{ grid-template-columns:1fr; gap:4px }
  .post-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .lf-two{ grid-template-columns:1fr }
  .lead-form{ padding:24px }
  .post-list a{ flex-direction:column; gap:5px }
  .pl-meta{ white-space:normal }
}
@media (max-width:600px){
  .cards{ grid-template-columns:1fr }
  .post-grid{ grid-template-columns:1fr }
  /* Цілі дотику. Самостійні посилання (підвал, хлібні крихти, зміст статті)
     на телефоні мусять мати щонайменше ~44 px по висоті. Посилання ВСЕРЕДИНІ
     абзацу сюди не входять: розсунути рядок тексту означає зіпсувати сам
     текст, і правило доступності таких посилань не вимагає. */
  .foot-col a{ padding:11px 0 }
  .foot-col{ gap:0 }
  /* Кнопки мови на телефоні мусять бути не нижчі за ~44 px: 28 px пальцем
     не влучиш, а помилковий клік тут перекидає людину на іншу мову. */
  .fl{ padding:14px 18px; font-size:13px }
  .foot-base a{ padding:10px 0 }
  .crumbs a{ padding:9px 0 }
  .logo{ padding:9px 0 }
  .card-link{ padding-top:12px; padding-bottom:8px }
  .seg{ width:100% }
  .seg-i{ flex:1 }
  .seg-i span{ text-align:center; padding:11px 8px; font-size:13.5px }
  .lead-form{ padding:20px }
  .lf-send .btn{ width:100% }
  .art-toc a{ padding-top:8px; padding-bottom:8px }
  .menu-in a{ padding:16px 0 }
  /* Повзунок: 16 px заввишки на телефоні неможливо схопити пальцем. */
  input[type=range]{ height:34px }
  .art-cta{ padding:20px }
  .art-more{ margin-top:52px; padding-top:36px }
  .steps{ gap:44px }
  .prose-page{ padding-top:36px }
  .prose{ padding:36px 0 64px }
  .q summary{ font-size:16px }
  .reqs > div{ grid-template-columns:1fr; gap:2px }
  .calc-row{ gap:8px }
  .calc label{ min-width:100%; }
  select,input[type=number]{ width:100% }
  .toggle{ width:100% }
  .toggle button{ flex:1; padding:11px 10px }
  .plan .price{ font-size:40px }
  .wrap{ padding:0 18px }
  /* Ховається ПЕРЕМИКАЧ МОВИ (він дублюється в аркуші меню), а не вхід.
     Вхід лишається в шапці на будь-якій ширині: так у всіх п'яти розібраних
     сайтів, і саме його відсутність була першою скаргою на цю сторінку. */
  .lang{ display:none }
  /* 🛑 ЗНАК НЕ ХОВАЄМО. Тут стояло `.logo span{ display:none }`, а весь
     напис живе саме в цьому span — тобто на телефоні шапка бренд-сторінки
     лишалась БЕЗ бренду. Виміряно на 375px: ширина знака 0.

     Місця при цьому вдосталь: у шапці на телефоні лишається сам знак і
     «Відкрити застосунок», посилання й перемикач мови їдуть в аркуш меню.
     Знак 87px у смузі 339px нікому не заважає — просто трохи меншим
     кеглем, щоб дихав так само, як на широкому. */
  .logo{ font-size:19px; margin-right:6px }
  .lnk.login{ padding:8px 6px }
  .nav-in{ gap:6px }
  .proof-grid{ grid-template-columns:1fr }
  .reel{ width:128px }
  .foot-grid{ grid-template-columns:repeat(2,1fr) }
  .hero-form{ flex-wrap:wrap; border-radius:var(--r-lg); padding:8px }
  .hero-form input{ width:100%; flex-basis:100% }
  .hero-form .btn{ width:100% }
  h1{ max-width:none }
}

/* ═══ МЕРЕЖІ Й РОЗБІР (хвіст блоку аналітики) ════════════════════════════
   Три картки з кривою й переписка під ними. Без них секція лишалась
   звітом: цифри є, висновку немає. */
.nets{ padding-top:0 }
/* ── РОЗБІР СЛОВАМИ: ПЕРЕПИСКА ───────────────────────────────────────────
   🛑 Ці правила ОДНОГО РАЗУ ВЖЕ ЗНИКЛИ, і саме так, як зникає CSS: тихо.
   Прибираючи звідси картки мереж, я вирізав діапазон від `.net-grid` до
   `.an-chart` — а між ними жив увесь чат. Розмітка лишилась, стилів не
   стало, і блок перетворився на суцільний неформатований текст, де
   «Ви» зліплювалось із питанням в одне слово. Помилки ніде: браузер
   малює те, що йому дали.

   Урок на майбутнє: вирізаючи діапазон CSS «від класу до класу», треба
   спершу подивитись, ЩО між ними, а не покладатись на те, що сусідні
   правила стосуються сусідніх блоків. Порядок у файлі не зобов'язаний
   збігатися з порядком на сторінці. */
.ask{ display:grid; gap:34px; align-items:start; margin-top:40px;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) }
.ask-txt{ position:sticky; top:96px }
.ask-txt h3{ font-size:clamp(22px,2.7vw,32px); margin:12px 0 12px;
  letter-spacing:-.025em; line-height:1.15 }
.ask-txt p{ color:var(--dim); font-size:16px; max-width:44ch; margin:0 }
.ask-lead{ display:block; margin:22px 0 10px; font-size:12.5px; color:var(--faint) }
.ask-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px;
  max-width:38ch }
/* Питання виглядають як репліки, які можна сказати, — тому лапки-скоби й
   лівий бурштиновий кант, а не крапки списку. */
.ask-list li{ font-size:14px; color:var(--dim); line-height:1.45;
  padding:10px 14px; background:var(--card); border:1px solid var(--line);
  border-left:2px solid var(--accent); border-radius:0 var(--r-sm) var(--r-sm) 0 }

/* ── переписка розміткою ─────────────────────────────────────────────────
   Була картинкою 1600 px, стиснутою в колонку 600 px: текст виходив ~10 px
   і обривався на півслові. Найважливіше тут — самі слова розбору, тож вони
   мусять бути текстом, а не пікселями. */
.talk{ display:grid; gap:12px; padding:8px;
  background:var(--card-2); border:1px solid var(--line);
  border-radius:calc(var(--r-lg) + 6px) }
.tk-me,.tk-it{ border-radius:var(--r-lg); padding:16px 18px; font-size:14.5px;
  line-height:1.6 }
.tk-me{ justify-self:end; max-width:84%; background:var(--accent);
  color:var(--accent-fg); border-bottom-right-radius:6px; font-weight:500 }
.tk-it{ justify-self:start; max-width:96%; background:var(--card);
  border:1px solid var(--line); border-bottom-left-radius:6px;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--fg) 6%,transparent) }
.tk-who{ display:block; font:600 10.5px/1 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:8px; opacity:.62 }
.tk-brand{ color:var(--accent); opacity:1 }
.tk-lead,.tk-b,.tk-tail{ margin:0 0 10px }
.tk-b:last-of-type{ margin-bottom:6px }
.tk-b b{ color:var(--fg); font-weight:600 }
.tk-it p{ color:var(--dim) }
.tk-lead{ color:var(--fg) }
.tk-plan{ margin:0; padding-left:20px; color:var(--dim); display:grid; gap:5px }
.tk-plan li::marker{ color:var(--accent); font-weight:600 }
/* Вкладення — рядок, а не картка: у переписці це один об'єкт поруч із
   текстом, і коробка навколо нього робила б його важливішим за розбір. */
.tk-file{ display:inline-flex; align-items:center; gap:8px; margin:2px 0 12px;
  padding:9px 13px; border-radius:99px; background:var(--bg-2);
  border:1px solid var(--line-2); font-size:13px }
.tk-file svg{ flex:none; color:var(--accent) }
.tk-file b{ font-weight:600 }
.tk-file i{ font-style:normal; color:var(--faint) }
.tk-tail{ margin-bottom:0 }

@media (max-width:1040px){
  .net-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .ask{ grid-template-columns:minmax(0,1fr); gap:26px }
  .ask-txt{ position:static }
}
@media (max-width:600px){
  .net-grid{ grid-template-columns:minmax(0,1fr) }
  .tk-me{ max-width:92% }
  .tk-it{ max-width:100% }
  .tk-me,.tk-it{ padding:14px 15px; font-size:14px }
  /* Довга назва файлу + «14 сторінок · 1,2 МБ» в один рядок на 390 px не
     влазять, і вага з'їжджала в другий стовпчик усередині капсули. Тут
     вона стає окремим рядком під назвою — вирівняна по ній, а не по краю. */
  .tk-file{ flex-wrap:wrap; border-radius:var(--r-sm) }
  .tk-file b{ min-width:0; overflow-wrap:anywhere }
  .tk-file i{ flex-basis:100%; margin-left:23px }
}

/* ═══ ПАНЕЛЬ АНАЛІТИКИ ══════════════════════════════════════════════════
   Замість знімка застосунку. Знімок старів мовчки: крива на ньому лишилась
   рожевою ще з доамбарного бренду, у сітці зяяла дірка, а «Обхват» показував
   риску замість числа — і все це їхало на головну як наше обличчя.

   Двошарова коробка та сама, що в `.door`: зовнішня оправа з підкладкою,
   всередині ядро. Одна мова на всю сторінку. */

/* ── РОЗБИВКА ПО МЕРЕЖАХ ─────────────────────────────────────────────────
   Тут були три картки з дрібними графіками (`.net*`). Прибрано разом із
   розміткою: вони повторювали панель і виглядали слабким місцем сторінки.
   Мертвий CSS переживає розмітку надовго й потім змушує гадати, чи він
   комусь потрібен, — тому знято одразу.

   Кольори сегментів — три щаблі одного бурштину, а не фірмові кольори
   мереж. Синій Facebook і рожевий Instagram посеред бурштинової панелі
   вбивають її як цілісний предмет: вона перестає бути НАШИМ екраном і
   стає збіркою чужих логотипів. Впізнавання тут і не потрібне — поруч
   написані назви. */
.an-split{ margin-top:20px; padding-top:18px; border-top:1px solid var(--line) }
.an-splitbar{
  display:flex; gap:3px; height:10px; border-radius:6px; overflow:hidden;
}
.an-splitbar i{ width:var(--s); border-radius:3px; min-width:2px }
.an-splitbar i[data-net="instagram"]{ background:var(--accent) }
.an-splitbar i[data-net="facebook"]{
  background:color-mix(in srgb, var(--accent) 62%, transparent) }
.an-splitbar i[data-net="linkedin"]{
  background:color-mix(in srgb, var(--accent) 34%, transparent) }

.an-keys{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:13px }
/* Крапка кольору свого сегмента перед назвою — єдине, що прив'язує рядок
   до смуги. Без неї три підписи під суцільною смугою не кажуть, який
   шматок чий, і смуга стає просто оздобою. */
.an-key{ display:flex; align-items:baseline; gap:7px; position:relative;
  padding-left:14px }
.an-key::before{
  content:""; position:absolute; left:0; top:.45em;
  width:8px; height:8px; border-radius:2px;
}
.an-key[data-net="instagram"]::before{ background:var(--accent) }
.an-key[data-net="facebook"]::before{
  background:color-mix(in srgb, var(--accent) 62%, transparent) }
.an-key[data-net="linkedin"]::before{
  background:color-mix(in srgb, var(--accent) 34%, transparent) }
.an-key b{ font-size:13px; font-weight:600; color:var(--fg) }
.an-key i{ font-style:normal; font-family:var(--mono); font-size:13px;
  color:var(--dim) }
.an-key em{
  font-style:normal; font-family:var(--mono); font-size:11.5px;
  font-weight:700; color:var(--ok,oklch(0.72 0.14 150));
}

.an-chart{ margin-top:20px }
.an-head{ display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap }
.an-tabs{ display:flex; gap:4px; background:var(--bg-2);
  border:1px solid var(--line); border-radius:99px; padding:4px;
  max-width:100%; overflow:auto; scrollbar-width:none }
.an-tabs::-webkit-scrollbar{ display:none }
.an-tab{ border:0; background:transparent; color:var(--dim); cursor:pointer;
  font:600 13px/1 inherit; padding:9px 15px; border-radius:99px; white-space:nowrap;
  transition:color .25s var(--ease), background .25s var(--ease) }
.an-tab:hover{ color:var(--fg) }
.an-tab.on{ background:var(--accent); color:var(--accent-fg) }
.an-period{ font-size:12.5px; color:var(--faint) }

.an-read{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin:18px 0 6px }
.an-n{ font-family:var(--serif);
  font-size:clamp(28px,3.4vw,40px); font-weight:600; letter-spacing:-.04em;
  line-height:1; font-variant-numeric:tabular-nums }
.an-delta{ font-size:12.5px; font-weight:600; color:var(--ok);
  background:color-mix(in srgb,var(--ok) 13%,transparent);
  padding:5px 10px; border-radius:99px; line-height:1 }
.an-sub{ font-size:13px; color:var(--faint) }

/* Поле кривої — рядок із двох колонок: підписи осі й саме полотно.
   Крапка на кінці кривої позиціюється у ВІДСОТКАХ, тож вона мусить
   рахуватись від полотна, а не від блока разом із підписами — інакше
   вона з'їжджає рівно на ширину колонки чисел. Звідси окремий
   `.an-canvas`, а не просто `padding-left` на `.an-plot`. */
.an-plot{ display:flex; gap:10px; margin-top:10px }
.an-canvas{ position:relative; flex:1; min-width:0 }
.an-y{
  position:relative; flex:0 0 auto; width:52px; height:190px;
  font-family:var(--mono); font-size:11px; color:var(--faint);
  text-align:right;
}
/* Числа стоять рівно на своїх лініях сітки. 16 · 65,33 · 114,67 · 164 —
   рівні третини поля кривої в системі координат SVG (висота 190), тобто
   у відсотках 8,42 / 34,39 / 60,35 / 86,32. Прив'язка не «на око»: підпис,
   зсунутий на пару пікселів від лінії, читається як підпис до сусідньої. */
.an-y span{ position:absolute; right:0; translate:0 -50%; white-space:nowrap }
.an-y span:nth-child(1){ top:8.42% }
.an-y span:nth-child(2){ top:34.39% }
.an-y span:nth-child(3){ top:60.35% }
.an-y span:nth-child(4){ top:86.32% }
.an-svg{ display:block; width:100%; height:190px }
.an-grid line{ stroke:var(--line); stroke-width:1; vector-effect:non-scaling-stroke }
/* Товщина лінії НЕ масштабується разом із коробкою. Без цього рядка крива
   на широкому екрані стає волосиною, а на телефоні — мотузкою: viewBox
   розтягується `preserveAspectRatio="none"`, і штрих разом із ним. */
.an-line{ fill:none; stroke:var(--accent); stroke-width:2;
  vector-effect:non-scaling-stroke; stroke-linejoin:round;
  transition:d .5s var(--ease) }
/* Рівний колір лишається запасним варіантом: якщо градієнт із `var()`
   усередині `stop-color` десь не спрацює, під кривою буде тонка тінь, а
   не порожнеча. */
.an-area{ fill:color-mix(in srgb,var(--accent) 10%,transparent); stroke:none;
  transition:d .5s var(--ease) }
@supports (fill: url(#anFill)){ .an-area{ fill:url(#anFill) } }
/* Крапка — звичайний елемент поверх SVG, а не коло всередині: коло
   розтягнулось би в еліпс разом із кривою. Координати у відсотках. */
.an-dot{ position:absolute; width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
  border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent);
  transition:left .5s var(--ease), top .5s var(--ease) }
.an-x{ display:flex; justify-content:space-between; margin-top:10px;
  font-size:12px; color:var(--faint);
  /* Відступ = ширина колонки чисел + проміжок. Дати підписують полотно,
     а не весь рядок: без цього «1 липня» стоїть під віссю Y, тобто
     показує на місце, де жодного дня немає. */
  padding-left:62px }

@media (max-width:900px){
  .an-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .an-in{ padding:16px }
  .an-svg{ height:160px }
  .an-y{ height:160px }
}
@media (max-width:600px){
  .an{ padding:6px }
  .an-tile{ padding:13px 14px }
  .an-head{ gap:8px }
  .an-period{ display:none }        /* період повторює підпис осі під кривою */
  .an-svg{ height:140px }
  /* На телефоні колонка чисел вужча, і разом із нею — відступ дат. */
  .an-y{ width:38px; height:140px; font-size:10px }
  .an-plot{ gap:6px }
  .an-x{ padding-left:44px }
  /* Середню дату прибираємо: три підписи на 360 px злипаються в кашу. */
  .an-x span:nth-child(2){ display:none }
}

/* ═══ КІНОПЛІВКА ЗА ГЕРОЄМ ══════════════════════════════════════════════
   Це ФОН і нічого більше. `pointer-events:none` знімає її з-під курсору:
   усе, що вміє реагувати на наведення, змагається з формою поруч за увагу.

   ОДИН предмет, а не два шари. Спершу тут лежали дві окремі стрічки — на
   1920 px між ними лишався випадковий просвіт, вони розповзались по
   правій половині й читались як безлад. Тепер це одна плівка з двома
   рядами кадрів і СПІЛЬНОЮ перфорацією посередині: цілісний об'єкт, який
   можна нахилити, не розваливши.

   Похил — те, що відрізняє плівку від смуги плиток: горизонтальна стрічка
   читається як ще одна секція сайту, похила — як предмет, покладений під
   сторінку. */
.hero{ position:relative; isolation:isolate; overflow:hidden }
.filmstrip{
  position:absolute; inset:0; z-index:0;
  pointer-events:none; user-select:none;
  /* Ліва частина — чистий фон: там заголовок і форма, і жоден кадр не має
     туди діставати навіть краєм. */
  -webkit-mask-image:linear-gradient(104deg, transparent 34%, #000 64%);
  mask-image:linear-gradient(104deg, transparent 34%, #000 64%);
}
.fs-reel{
  position:absolute; top:50%; left:50%;
  /* Ширина в vw, а не у відсотках від героя: на 1920 px відсоток давав
     стрічку вдвічі довшу за потрібну, і вона тягнулась через увесь екран.
     Під нахилом потрібен запас — звідси 150vw, кінці лишаються за кадром. */
  /* Геометрія та сама, що й була: стрічка перетинає герой знизу-ліворуч
     угору-праворуч. Порожній кінець був НЕ від ширини стрічки, а від
     короткої доріжки кадрів — див. коментар про копію нижче. */
  width:150vw;
  transform:translate(-38%,-52%) rotate(-24deg);
  opacity:.38;
  /* Розчиняється ЛИШЕ лівий кінець. Правий іде далеко за екран і
     обрізається межею вікна.
     🛑 Спершу згасали обидва: під нахилом правий кінець нижнього ряду не
     доходив до краю, і в нижньому правому куті лишалась порожня трикутна
     діра — плівка ніби обривалась у повітрі. Обрив по краю вікна читається
     як «продовжується далі», обрив посеред екрана — як недомальоване. */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%);
  mask-image:linear-gradient(90deg, transparent, #000 10%);
}
/* 🛑 Умова безшовного нескінченного циклу: ОДНА копія списку мусить бути
   не вужчою за стрічку. Доріжка їде на -50%, і в цю мить друга копія стає
   на місце першої; якщо копія коротша за видиму ширину, між ними видно
   порожнечу — рівно ту, що зяяла в правому кінці. При 1920 px стрічка має
   ~2900 px, кадр із полем — 88 px, отже 38 кадрів у копії з запасом. */
.fs-row{ overflow:hidden }
.fs-holes{
  height:12px; background:var(--bg-2);
  border-block:1px solid color-mix(in srgb,var(--fg) 9%,transparent);
  /* Перфорація малюється градієнтом, а не двадцятьма елементами. */
  background-image:repeating-linear-gradient(90deg,
    transparent 0 8px,
    color-mix(in srgb,var(--bg) 88%,#000) 8px 18px,
    transparent 18px 26px);
}
/* Рейка між рядами — одна на двох, тому трохи вища: у справжній плівці
   міжкадрова доріжка ширша за крайні. */
.fs-mid{ height:15px }
.fs-cell{ width:74px; border-radius:2px; border-color:transparent;
  margin-inline:2px }
/* Наведення й підйом — тільки у справжньої вітрини. Тут плитка нерухома
   відносно сусідів, інакше фон починає жити власним життям. */
.fs-cell:hover{ transform:none; border-color:transparent }

@media (max-width:1180px){ .fs-reel{ opacity:.28; width:210vw } }
/* На телефоні плівки немає взагалі: під текстом вона з фону стає
   перешкодою, а вантажити відео заради тла на мобільному інтернеті —
   це платити чужим трафіком за нашу декорацію. */
@media (max-width:860px){ .filmstrip{ display:none } }

/* «Ціни» в шапці — бурштиновий завжди, а не лише на своїй сторінці. Це
   єдиний пункт меню, заради якого сюди приходять; решта читається як
   довідка. */
.lnk.lnk-key{ color:var(--accent) }
.lnk.lnk-key:hover{ color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent) }

/* Підпис під перемикачем періоду: −20% це річна ПРОТИ місячної, і сказати
   це треба там, де воно правда, а не на кнопці поруч із −46% на картках. */
.period-note{ margin:14px 0 0; color:var(--faint); font-size:13.5px }

/* ═══ СТАТТЯ: ВИГЛЯД ════════════════════════════════════════════════════
   Стаття була стіною тексту однієї ваги: заголовок, підзаголовок і абзац
   відрізнялись лише кеглем на пару пікселів. Читач бачив суцільне полотно
   й не мав за що зачепитись оком. Нижче — ієрархія, а не прикраси. */
.art-cat{ display:inline-block; margin-bottom:14px }
.prose h1{ letter-spacing:-.035em; line-height:1.08 }
/* Підзаголовок статті — це обіцянка, заради якої її відкрили. Він більший
   за основний текст і світліший, тобто читається до першого абзацу. */
.art-lede{ margin:18px 0 22px; max-width:60ch;
  font-size:clamp(17px,1.7vw,20px); line-height:1.55; color:var(--fg);
  opacity:.86 }
.art-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 0 6px; padding-top:20px; border-top:1px solid var(--line);
  color:var(--faint); font-size:13px }
.am-time{ font-weight:600; color:var(--accent) }
.am-dot{ width:3px; height:3px; border-radius:99px; background:var(--line-2) }

/* Заголовок розділу з бурштиновою міткою на полі. Мітка коротка й тонка:
   вона розмічає ритм, а не малює рамку. */
.prose h2{ position:relative; padding-top:6px }
.prose h2::before{
  content:""; position:absolute; left:-18px; top:16px; width:8px; height:2px;
  border-radius:99px; background:var(--accent);
}
@media (max-width:700px){ .prose h2::before{ display:none } }

/* Списки: своя мітка замість типової крапки. Нумерований — бурштиновими
   числами, бо в цих статтях нумерація майже завжди означає порядок дій. */
.prose ul{ list-style:none; padding-left:22px }
.prose ul li{ position:relative }
.prose ul li::before{
  content:""; position:absolute; left:-18px; top:11px; width:5px; height:5px;
  border-radius:99px; background:color-mix(in srgb,var(--accent) 70%,transparent);
}
.prose ol{ counter-reset:step; list-style:none; padding-left:26px }
.prose ol > li{ position:relative; counter-increment:step }
.prose ol > li::before{
  content:counter(step); position:absolute; left:-26px; top:2px;
  width:20px; text-align:right;
  font-family:var(--serif);
  font-weight:600; font-size:14px; color:var(--accent);
}

/* Цитата — виносна, а не просто зсунута вліво. */
.prose blockquote{ padding:18px 22px; border-left:2px solid var(--accent);
  border-radius:0 var(--r-md) var(--r-md) 0;
  background:color-mix(in srgb,var(--accent) 6%,transparent);
  font-size:17px; line-height:1.6 }
.prose blockquote p:last-child{ margin-bottom:0 }

/* Таблиця в статті: чергування рядків і числа моноширинними. */
.prose table{ width:100%; border-collapse:collapse; font-size:14.5px }
.prose th{ text-align:left; padding:11px 14px; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--faint);
  border-bottom:1px solid var(--line-2) }
.prose td{ padding:11px 14px; border-bottom:1px solid var(--line);
  color:var(--dim) }
.prose tbody tr:nth-child(odd){ background:color-mix(in srgb,var(--fg) 3%,transparent) }
.prose td:first-child{ color:var(--fg); font-weight:500 }

/* Зміст: рейка з бігунцем, що йде за читанням. Список без стану показує,
   ЩО в статті, але не показує, ДЕ ти — а це половина його користі. */
.art-toc ol{ position:relative; border-left:1px solid var(--line) }
.art-toc a{ display:block; padding:7px 0 7px 14px; margin-left:-1px;
  border-left:2px solid transparent; color:var(--faint); font-size:13.5px;
  line-height:1.45; transition:color .25s var(--ease), border-color .25s var(--ease) }
.art-toc a:hover{ color:var(--fg) }
.art-toc a.on{ color:var(--accent); border-left-color:var(--accent) }
.toc-h{ display:block; margin-bottom:12px; font-size:11.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint) }

/* Заклик у статті: тепле світло, як у підвалі, — щоб він читався як
   пропозиція, а не як банер, вставлений посеред тексту. */
.art-cta{ position:relative; overflow:hidden; margin:44px 0 0; padding:28px 30px;
  border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line));
  border-radius:var(--r-lg); background:var(--card) }
.art-cta::before{
  content:""; position:absolute; left:50%; top:-140px; width:min(520px,100%);
  height:260px; transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(60% 60% at 50% 50%,
    color-mix(in srgb,var(--accent) 14%,transparent), transparent 70%);
}
.art-cta > *{ position:relative }
.art-cta b{ display:block; font-family:var(--serif);
  font-size:19px; letter-spacing:-.02em; margin-bottom:8px }
.art-cta p{ margin:0 0 18px; color:var(--dim); font-size:15px }

/* Ім'я в шапці, коли сесія жива. Обрізаємо: «Олександра Володимирівна
   Ковальчук-Мельниченко» інакше витіснила б із рядка все інше. */
.lnk.who{ max-width:18ch; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; color:var(--fg) }
@media (max-width:860px){ .lnk.who{ display:none } }

/* ═══ «ЧОМУ МИ»: П'ЯТЬ БЛОКІВ НА ГОЛОВНІЙ ═════════════════════════════════
   Позиціювання → цикл навчання → бібліотека → неочевидні переваги →
   альтернативи. Кожен має власну геометрію навмисно: п'ять секцій підряд
   з однаковою сіткою читаються як одна довга, і людина гортає їх наскрізь
   очима, не читаючи жодної.

   Спільного в них рівно два: ритм відступів секції і бурштин на ОДНОМУ
   елементі в кожній. Другий бурштиновий акцент в екрані вбиває перший. */

/* ── позиціювання: вони / ми ─────────────────────────────────────────── */
.pos-in{ display:grid; gap:44px; align-items:start;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr) }
/* Заголовок липне, поки поруч їдуть три рядки: питання «а чим ви кращі»
   має лишатись на екрані рівно доти, доки на нього відповідають. */
.pos-lead{ position:sticky; top:104px }
.pos-lead .sub{ margin-bottom:0 }
.pos-rows{ display:grid; gap:14px }
.pos-row{
  display:grid; align-items:center; gap:18px;
  grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);
  padding:22px; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--card); transition:border-color .4s var(--ease),
    background .4s var(--ease), transform .4s var(--ease);
}
.pos-row:hover{ transform:translateY(-2px); border-color:var(--line-2);
  background:var(--card-2) }
.pr-k{ display:block; margin-bottom:8px; font-size:11.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--faint) }
.pr-side p{ margin:0; font-size:14.5px; line-height:1.55; color:var(--dim) }
.pr-them p{ color:var(--faint) }
.pr-us .pr-k{ color:var(--accent) }
.pr-us p{ color:var(--fg) }
.pr-arw{ display:grid; place-items:center; width:30px; height:30px;
  border-radius:99px; color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent) }

/* ── цикл навчання ───────────────────────────────────────────────────── */
/* ═══ ТРИ СЕКЦІЇ МІЖ ГРАФІКОМ І ТАБЛИЦЕЮ ══════════════════════════════════
   Тут стояли три сітки поспіль, у кожній комірці абзац на 25–40 слів.
   Разом близько пів тисячі слів однаковою формою: сторінка в цьому місці
   переставала читатись і починала гортатись.

   Правки дві, і друга важливіша за першу. Перша — текст стиснуто до
   заголовка й одного рядка. Друга — ФОРМА ТРЬОХ СЕКЦІЙ ТЕПЕР РІЗНА:
   графік, сітка зі зразками, список. Однакова форма тричі поспіль
   читається як одна довга таблиця, скільки б слів у ній не лишилось.

   Рух скрізь однаковий за характером: елементи проявляються по черзі при
   появі секції, один прохід, без нескінченних циклів. Секції великі й
   стоять у середині сторінки — вічний рух тут заважав би читати сусідні. */

/* ── 1. ЦИКЛ НАВЧАННЯ: кроки + доказ ─────────────────────────────────── */
.lp{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:34px; align-items:center; margin-top:26px;
}
.lp-steps{ list-style:none; margin:0; padding:0 }
.lp-steps li{
  display:grid; grid-template-columns:auto 1fr; gap:4px 12px;
  padding:13px 0; border-bottom:1px solid var(--line);
  opacity:0; transform:translateX(-10px);
  animation:lpIn .5s var(--ease) forwards;
  animation-delay:calc(var(--k) * .1s);
  animation-play-state:paused;
}
.is-in .lp-steps li{ animation-play-state:running }
@keyframes lpIn{ to{ opacity:1; transform:none } }
.lp-steps li:last-child{ border-bottom:0 }
.lp-n{
  grid-row:1 / span 2; align-self:center;
  display:inline-grid; place-items:center; width:26px; height:26px;
  border-radius:50%; background:var(--accent-soft); color:var(--accent);
  font-family:var(--mono); font-size:12px; font-weight:700;
}
.lp-steps b{ font-size:15px; font-weight:700; color:var(--fg); line-height:1.3 }
.lp-steps i{ font-style:normal; font-size:13.5px; color:var(--dim); line-height:1.4 }

.lp-chart{
  margin:0; padding:20px 22px 16px; border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--card);
}
.lp-chart figcaption{ display:flex; flex-direction:column; gap:3px; margin-bottom:16px }
.lp-chart figcaption b{ font-size:16px; font-weight:700; color:var(--fg); line-height:1.3 }
.lp-chart figcaption span{ font-size:13px; color:var(--faint); line-height:1.4 }
.lp-bars{ display:flex; align-items:flex-end; gap:6px; height:112px }
/* Стовпчики ростуть по черзі зліва направо — так само, як тижні й ідуть.
   Одночасна поява показала б готовий підсумок, а не накопичення. */
.lp-bars i{
  flex:1; height:var(--h); border-radius:4px 4px 2px 2px;
  background:color-mix(in srgb, var(--accent) 40%, transparent);
  transform-origin:bottom; transform:scaleY(0);
  animation:lpBar .5s var(--ease) forwards;
  animation-delay:calc(var(--k) * .07s + .15s);
  animation-play-state:paused;
}
.is-in .lp-bars i{ animation-play-state:running }
/* Останній тиждень суцільним акцентом: він і є те, про що говорить
   заголовок поруч. Решта — дорога до нього. */
.lp-bars i:last-child{ background:var(--accent) }
@keyframes lpBar{ to{ transform:scaleY(1) } }
.lp-x{
  display:flex; justify-content:space-between; margin-top:9px;
  font-family:var(--mono); font-size:11px; color:var(--faint);
}

/* ── 2. БІБЛІОТЕКА: плитки зі зразками ───────────────────────────────── */
.w-grid{ display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)) }
.w-tile{
  position:relative; overflow:hidden; padding:20px 22px 24px;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--card); transition:transform .3s var(--ease),
    border-color .3s var(--ease);
}
.w-tile:hover{ transform:translateY(-3px); border-color:var(--line-2) }
.w-tile h3{ margin:8px 0 5px; font-size:16px; line-height:1.35 }
.w-tile p{ margin:0; font-size:13.5px; line-height:1.45; color:var(--dim) }
.w-tag{
  display:inline-block; font-family:var(--mono); font-size:10px;
  letter-spacing:.07em; text-transform:uppercase; color:var(--accent);
  padding:3px 9px; border-radius:6px; background:var(--accent-soft);
}
/* Зразок стоїть НАД підписом, а не під ним. Він тут доказ, а не
   ілюстрація до прочитаного: спершу видно три однакові обличчя, і лише
   потім читається рядок про те, що обличчя одне на всі ролики. */
.w-vis{ display:flex; align-items:center; gap:7px; height:58px; margin-bottom:13px }
.w-vis > *{
  opacity:0; animation:lpIn .45s var(--ease) forwards;
  animation-delay:calc(var(--k,0) * .09s); animation-play-state:paused;
}
.is-in .w-vis > *{ animation-play-state:running }

/* Зразки — справжні файли бібліотеки. Спільне для всіх чотирьох: висота
   рядка стала, а вміст різний, тож вирівнювання задає контейнер, а не
   кожна плитка окремо. */
.w-vis img{ display:block; object-fit:cover }

/* персонаж — обличчя з каталогу аватарів */
.w-faces img{
  width:46px; height:46px; border-radius:50%;
  border:1.5px solid var(--line-2);
}
/* Лічильник решти — не оздоба: чотири обличчя без нього читаються як
   «у бібліотеці чотири аватари», тобто применшують те, що ми пропонуємо. */
.w-more{
  display:inline-grid; place-items:center; height:46px; padding:0 11px;
  border-radius:99px; background:var(--card-2); border:1px dashed var(--line-2);
  font-family:var(--mono); font-size:12px; color:var(--faint);
}

/* локація — сцени з каталогу, ВЕРТИКАЛЬНІ */
.w-rooms img{
  width:34px; height:58px; border-radius:7px; border:1px solid var(--line-2);
}
.w-rooms .w-more{ height:58px }

/* товар — фото плюс справжні характеристики */
.w-card{
  display:grid; grid-template-columns:44px minmax(0,1fr);
  grid-template-rows:auto auto auto; gap:2px 11px; align-content:center;
}
.wc-img{
  grid-row:1 / span 3; width:44px; height:58px; border-radius:6px;
  border:1px solid var(--line-2);
}
.wc-t{ font-size:13px; font-weight:700; color:var(--fg); line-height:1.3 }
.wc-s{ font-size:11.5px; color:var(--faint); line-height:1.35 }

/* бренд-кіт — розкладка з каталогу плюс палітра, яку з неї беруть */
.w-kit{ gap:10px }
.w-kit img{
  width:44px; height:58px; border-radius:7px; border:1px solid var(--line-2);
}
.wk-pal{ display:grid; grid-template-columns:repeat(2,16px); gap:4px }
.wk-pal i{ display:block; height:16px; border-radius:4px }
.wk-pal i:nth-child(1){ background:oklch(0.86 0.13 82) }
.wk-pal i:nth-child(2){ background:oklch(0.62 0.14 52) }
.wk-pal i:nth-child(3){ background:oklch(0.42 0.06 60) }
.wk-pal i:nth-child(4){ background:oklch(0.9 0.02 85) }
.wk-t{ font-size:12px; color:var(--faint); font-family:var(--mono) }

.w-strip{
  margin-top:16px; padding:20px 24px; border:1px solid var(--line);
  border-radius:var(--r-lg); background:var(--card);
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
.ws-nums{ display:flex; gap:26px; flex-wrap:wrap }
.ws{
  display:flex; flex-direction:column;
  opacity:0; animation:lpIn .45s var(--ease) forwards;
  animation-delay:calc(var(--k) * .08s); animation-play-state:paused;
}
.is-in .ws{ animation-play-state:running }
.ws b{ font-size:24px; font-weight:700; line-height:1.05; color:var(--accent) }
.ws span{ font-size:12px; color:var(--faint) }
.ws-note{ margin:0; font-size:13px; color:var(--dim); max-width:38ch }

/* ── 3. НЕОЧЕВИДНІ ПЕРЕВАГИ: список, а не сітка ──────────────────────── */
.e-list{
  list-style:none; margin:26px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2px 40px;
}
.e-list li{
  display:grid; grid-template-columns:auto 1fr; gap:2px 14px;
  padding:15px 0; border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(8px);
  animation:lpIn .5s var(--ease) forwards;
  animation-delay:calc(var(--k) * .07s); animation-play-state:paused;
}
.is-in .e-list li{ animation-play-state:running }
.e-ic{
  grid-row:1 / span 2; align-self:start; margin-top:2px;
  display:inline-grid; place-items:center; width:32px; height:32px;
  border-radius:9px; background:var(--accent-soft); color:var(--accent);
}
.e-ic svg{ width:18px; height:18px; display:block }
.e-list b{ font-size:15.5px; font-weight:700; color:var(--fg); line-height:1.35 }
.e-list i{ font-style:normal; font-size:13.5px; color:var(--dim); line-height:1.45 }

@media (max-width:900px){
  .lp{ grid-template-columns:minmax(0,1fr); gap:24px }
  .e-list{ grid-template-columns:minmax(0,1fr); gap:0 }
}
@media (max-width:620px){
  .w-grid{ grid-template-columns:minmax(0,1fr) }
  .lp-bars{ height:86px }
}
@media (prefers-reduced-motion: reduce){
  .lp-steps li,.lp-bars i,.w-vis > *,.ws,.e-list li{ animation:none }
  .lp-steps li,.w-vis > *,.ws,.e-list li{ opacity:1; transform:none }
  .lp-bars i{ transform:scaleY(1) }
}

/* ── альтернативи ────────────────────────────────────────────────────── */
.vs-scroll{ overflow-x:auto; border:1px solid var(--line);
  border-radius:var(--r-lg); -webkit-overflow-scrolling:touch }
.vs-tbl{ width:100%; min-width:660px; border-collapse:collapse; font-size:14.5px }
.vs-tbl th, .vs-tbl td{ padding:14px 18px; text-align:left;
  border-bottom:1px solid var(--line) }
.vs-tbl thead th{ font-size:11.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint); background:var(--bg-2);
  white-space:nowrap }
.vs-tbl tbody th{ color:var(--fg); font-weight:500 }
.vs-tbl td{ color:var(--faint) }
.vs-tbl tbody tr:last-child th, .vs-tbl tbody tr:last-child td{ border-bottom:0 }
/* Наш стовпчик — єдине бурштинове в таблиці. Підсвітити ще й заголовки
   рядків означало б підсвітити всю таблицю, тобто нічого. */
.vs-tbl .on{ color:var(--fg); font-weight:500;
  background:color-mix(in srgb,var(--accent) 7%,transparent) }
.vs-tbl thead .on{ color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent) }
.vs-note{ margin:16px 0 0; color:var(--faint); font-size:13.5px; max-width:72ch }

/* ── адаптив ─────────────────────────────────────────────────────────── */
@media (max-width:1040px){
  .pos-in{ grid-template-columns:1fr; gap:32px }
  .pos-lead{ position:static }
}
@media (max-width:700px){
  /* Стрілка вбік перестає означати «звідси сюди», щойно колонки стають
     рядками: розвертаємо її вниз, інакше вона показує в поле. */
  .pos-row{ grid-template-columns:1fr; gap:14px; padding:20px }
  .pr-arw{ transform:rotate(90deg) }
  .ws-nums{ gap:18px }
}