/* =========================================================
   Aeris. Ритм і пропорції успадковані зі специфікації lumora.
   Шкала відступів закрита: 8 10 12 14 24 30 62 80 124.
   Усі секції лежать на одному 12-колонковому модулі,
   дозволені лише два розбиття: 7/5 і 5/7.
   ========================================================= */

:root {
  /* поверхні: нейтралі зсунуті в бік брендового хʼю, ніде немає ні #000, ні #fff */
  --sand-100: oklch(0.988 0.006 88);
  --sand-200: oklch(0.947 0.026 86);
  --sand-300: oklch(0.905 0.034 84);
  --paper:    oklch(0.995 0.004 90);

  --ink-900:  oklch(0.185 0.014 78);
  --ink-700:  oklch(0.300 0.016 78);
  --ink-500:  oklch(0.452 0.014 80);
  --ink-on-dark:      oklch(0.965 0.008 88);
  --ink-on-dark-mute: oklch(0.775 0.014 84);

  --brand:      oklch(0.805 0.155 72);
  --lemon:      oklch(0.900 0.145 96);
  --on-brand:        oklch(0.185 0.014 78);
  --on-brand-mute:   oklch(0.330 0.065 65);

  /* декоративні лінійки */
  --line:        color-mix(in oklch, var(--ink-900) 12%, transparent);
  --line-strong: color-mix(in oklch, var(--ink-900) 24%, transparent);
  --line-dark:   color-mix(in oklch, var(--ink-on-dark) 16%, transparent);
  /* межі контролів: окремий токен, бо декоративні лінійки не дають потрібні 3:1 */
  --line-control:       oklch(0.560 0.020 80);
  --line-control-brand: oklch(0.430 0.090 66);

  /* Шрифти. Специфікація називає Clash Grotesk, але він Latin-only: кирилиці в ньому
     немає, тож український текст ним не набереться. Тому Clash Grotesk несе латинські
     вордмарки, а решту тексту веде найближча за характером суперсімʼя з кирилицею. */
  --font-mark:    "Clash Grotesk", "Wix Madefor Display", "Segoe UI", system-ui, sans-serif;
  --font-display: "Wix Madefor Display", "Segoe UI", system-ui, sans-serif;
  --font-text:    "Wix Madefor Text", "Segoe UI", system-ui, sans-serif;

  /* Типографічна шкала: відношення 1.333 і на максимумах, і на мінімумах,
     інакше на мобільному сусідні рівні зливаються. */
  --fs-display: clamp(2.5rem, 5vw, 4rem);       /* 40 → 64 */
  --fs-h2:      clamp(1.875rem, 3.2vw, 3rem);   /* 30 → 48 */
  --fs-h3:      clamp(1.4rem, 2.4vw, 2.25rem);  /* 22.4 → 36 */
  --fs-20: 1.25rem;
  --fs-18: 1.125rem;
  --fs-16: 1rem;
  --fs-14: 0.875rem;
  --fs-12: 0.75rem;

  /* Закрита шкала. Компонентний рівень і 62/80 зі специфікації, 124 = 2 × 62
     як єдиний свідомий виняток для акцентних секцій. */
  --s-8: 8px;   --s-10: 10px; --s-12: 12px; --s-14: 14px;
  --s-24: 24px; --s-30: 30px; --s-62: 62px; --s-80: 80px;
  --s-124: 124px;

  --page: 1280px;
  --pad: var(--s-62);

  --r-4: 4px; --r-8: 8px; --r-24: 24px; --r-pill: 100px;
  --shadow-lift: 11px 10px 60px color-mix(in oklch, var(--ink-900) 6%, transparent);
  --shadow-near: 0 0 14px color-mix(in oklch, var(--ink-900) 10%, transparent);

  --ease: cubic-bezier(0.25, 1, 0.5, 1);
}

/* ───────── база ───────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--sand-100);
  color: var(--ink-900);
  font-family: var(--font-text);
  font-size: var(--fs-16);
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-display); line-height: 1.05; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); line-height: 1.14; letter-spacing: -0.015em; }
h3 { font-size: var(--fs-20); line-height: 1.35; letter-spacing: -0.005em; }

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* нижній індекс у CO2: у шрифті немає ₂, тому верстаємо розміткою */
sub { font-size: 0.68em; vertical-align: -0.12em; line-height: 0; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

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

/* Міри рядка перераховані під українську: ch відкалібрований на латиниці,
   кирилична літера ширша, тому ліміти взяті з коефіцієнтом ~0.8. */
.lead {
  font-size: var(--fs-18);
  line-height: 1.55;
  color: var(--ink-700);
  max-width: 36ch;
}

:focus-visible {
  outline: 2px solid var(--ink-900);
  outline-offset: 3px;
  border-radius: var(--r-4);
}
/* на темних поверхнях чорна обводка не видно взагалі */
.problem :focus-visible,
.footer :focus-visible,
.plan--featured :focus-visible { outline-color: var(--lemon); }

.skip {
  position: absolute;
  left: var(--s-24);
  top: -100px;
  z-index: 50;
  background: var(--ink-900);
  color: var(--ink-on-dark);
  padding: var(--s-12) var(--s-24);
  border-radius: var(--r-pill);
  font-size: var(--fs-14);
  text-decoration: none;
  transition: top 200ms var(--ease);
}
.skip:focus { top: var(--s-12); }

.container {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--pad);
}

section[id] { scroll-margin-top: var(--s-80); }

/* ───────── спільний колонковий модуль ───────── */

.hero__inner,
.problem__inner,
.device__inner,
.steps__inner,
.audience__inner,
.faq__inner,
.demo__inner,
.plans,
.table__head,
.table__row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-30);
}

/* розбиття 7/5 */
.hero__text,
.steps__text,
.demo__text   { grid-column: span 7; }
.hero__stage,
.steps__media,
.demo__form   { grid-column: span 5; }

/* розбиття 5/7 */
.device__media,
.audience__media,
.faq__head    { grid-column: span 5; }
.device__text,
.audience__body,
.faq__list    { grid-column: span 7; }

/* ───────── кнопки ───────── */

.btn {
  --btn-h: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-10);
  min-height: var(--btn-h);
  padding: 0 var(--s-24);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-text);
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms var(--ease), color 150ms var(--ease),
              border-color 150ms var(--ease), transform 150ms var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--lg { --btn-h: 52px; font-size: var(--fs-16); }

.btn--solid { background: var(--ink-900); color: var(--ink-on-dark); }
.btn--solid:hover { background: var(--ink-700); }

.btn--outline {
  background: transparent;
  color: var(--ink-900);
  border-color: var(--line-control);
}
.btn--outline:hover { border-color: var(--ink-900); background: color-mix(in oklch, var(--ink-900) 5%, transparent); }

.btn--quiet {
  background: var(--paper);
  color: var(--ink-900);
  border-color: var(--line-control);
}
.btn--quiet:hover { border-color: var(--ink-900); }

.btn--brand { background: var(--brand); color: var(--on-brand); }
.btn--brand:hover { background: var(--lemon); }

.btn--dark { background: var(--ink-900); color: var(--ink-on-dark); }
.btn--dark:hover { background: var(--ink-700); }

.btn--arrow { padding-right: var(--s-8); }

.btn__chip {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: var(--on-brand);
  transition: transform 200ms var(--ease);
}
.btn--arrow:hover .btn__chip { transform: translateX(3px); }
.btn--brand .btn__chip { background: var(--on-brand); color: var(--brand); }

/* ───────── шапка ───────── */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--sand-200);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}
.masthead.is-stuck {
  border-bottom-color: var(--line);
  background: color-mix(in oklch, var(--sand-200) 92%, var(--paper));
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--s-30);
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-10);
  text-decoration: none;
  margin-right: auto;
}
.brand__mark { border-radius: 7px; flex: none; }
.brand__bg  { fill: var(--brand); }
.brand__dot { fill: var(--ink-900); }
.brand__arc { stroke: var(--ink-900); }
.brand__word {
  font-family: var(--font-mark);
  font-size: var(--fs-20);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.nav { display: flex; align-items: center; gap: var(--s-30); }

.nav__list { display: flex; align-items: center; gap: var(--s-24); }
.nav__list a {
  display: inline-block;
  padding: var(--s-12) 0;
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--ink-700);
  text-decoration: none;
  transition: color 150ms var(--ease);
}
.nav__list a:hover { color: var(--ink-900); }

.nav__actions { display: flex; align-items: center; gap: var(--s-8); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--s-10);
  min-height: 44px;
  padding: 0 var(--s-14);
  background: transparent;
  border: 1px solid var(--line-control);
  border-radius: var(--r-pill);
  font: inherit;
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--ink-900);
  cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: var(--s-8); width: 16px; }
.nav-toggle__bars i {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: transform 200ms var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:first-child { transform: translateY(4.75px) rotate(15deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:last-child  { transform: translateY(-4.75px) rotate(-15deg); }

/* ───────── hero ───────── */

.hero {
  position: relative;
  background: var(--sand-200);
  padding-block: var(--s-62) var(--s-124);
}

.hero__inner {
  align-items: stretch;
  width: 100%;
  padding-left: max(var(--pad), calc((100% - var(--page)) / 2 + var(--pad)));
  padding-right: 0;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  padding: var(--s-8) var(--s-14) var(--s-8) var(--s-12);
  margin-bottom: var(--s-24);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-700);
}
.pill__dot {
  width: 8px; height: 8px;
  border-radius: var(--r-pill);
  background: var(--brand);
  flex: none;
}

.hero h1 { margin-bottom: var(--s-24); }
.hero .lead { max-width: 37ch; }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-12);
  margin-top: var(--s-30);
}

.hero__note {
  margin-top: var(--s-14);
  font-size: var(--fs-14);
  color: var(--ink-500);
}

.hero__stage {
  position: relative;
  display: grid;
  min-height: 470px;
}

.hero__panel {
  margin: 0;
  height: 100%;
  overflow: hidden;
  border-radius: var(--r-24) 0 0 var(--r-24);
  background: var(--sand-300);
}
.hero__panel img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

.reading {
  position: absolute;
  top: var(--s-80);
  left: calc(-1 * var(--s-30));
  width: 200px;
  padding: var(--s-14);
  background: var(--paper);
  border-radius: var(--r-8);
  box-shadow: var(--shadow-lift);
}
.reading__room { font-size: var(--fs-12); color: var(--ink-500); margin-bottom: var(--s-8); }
.reading__value {
  display: flex;
  align-items: baseline;
  gap: var(--s-8);
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.reading__unit {
  font-family: var(--font-text);
  font-size: var(--fs-12);
  font-weight: 400;
  color: var(--ink-500);
  letter-spacing: 0;
}
.reading__bar {
  height: 6px;
  margin-top: var(--s-10);
  border-radius: var(--r-pill);
  background: var(--sand-300);
  overflow: hidden;
}
.reading__bar span {
  display: block;
  width: var(--fill);
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--brand);
}
.reading__foot { margin-top: var(--s-8); font-size: var(--fs-12); color: var(--ink-500); }

.chip {
  position: absolute;
  left: var(--s-24);
  bottom: calc(-1 * var(--s-14));
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  padding: var(--s-10) var(--s-14);
  background: var(--ink-900);
  color: var(--ink-on-dark);
  border-radius: var(--r-pill);
  font-size: var(--fs-12);
  font-weight: 500;
  box-shadow: var(--shadow-near);
}
.chip__live {
  width: 7px; height: 7px;
  border-radius: var(--r-pill);
  background: var(--brand);
  flex: none;
  animation: live 2600ms var(--ease) infinite;
}
@keyframes live {
  0%, 70%, 100% { opacity: 1; transform: scale(1); }
  35%           { opacity: 0.35; transform: scale(0.7); }
}

/* ───────── смуга фактів ───────── */

.strip {
  padding-block: var(--s-30);
  background: var(--sand-100);
  border-bottom: 1px solid var(--line);
}
.strip__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-12) var(--s-30);
  font-size: var(--fs-14);
  color: var(--ink-700);
}
/* li НЕ робимо flex-контейнером: інакше текстові вузли стають окремими
   flex-елементами й між числом і словом зʼявляється gap на всі 30px. */
.strip__list li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 14px;
  margin-left: var(--s-30);
  vertical-align: middle;
  background: var(--line-strong);
}
.strip__list .num { font-weight: 600; color: var(--ink-900); }

/* ───────── проблема ───────── */

.problem {
  background: var(--ink-900);
  color: var(--ink-on-dark);
  padding-block: var(--s-124);
}
.problem__inner { align-items: start; row-gap: var(--s-62); }

.problem__title { grid-column: span 8; line-height: 1.16; }
.problem .chart { grid-column: 1 / -1; }

.problem__cols {
  grid-column: span 10;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-62);
}
.problem__cols p {
  color: var(--ink-on-dark-mute);
  line-height: 1.7;
  letter-spacing: 0.005em;
}

.chart { margin: 0; }
.chart__plot { padding-top: var(--s-24); padding-bottom: var(--s-30); }
.chart__bars {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: var(--s-24);
  height: 300px;
  border-bottom: 1px solid var(--line-dark);
}
.chart__bar {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  height: var(--v);
  min-width: 0;
}
/* заливку несе псевдоелемент, щоб анімація стовпчика не стискала підписи */
.chart__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-4) var(--r-4) 0 0;
  background: color-mix(in oklch, var(--brand) 58%, transparent);
  transform-origin: 50% 100%;
}
.chart__bar[data-level="mid"]::before  { background: color-mix(in oklch, var(--brand) 78%, transparent); }
/* другий акцент за специфікацією живе тільки в графіку */
.chart__bar[data-level="high"]::before { background: var(--lemon); }

.chart__val,
.chart__hour {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--fs-12);
  line-height: 1;
  white-space: nowrap;
}
.chart__val {
  bottom: 100%;
  margin-bottom: var(--s-8);
  color: var(--lemon);
  font-weight: 500;
}
.chart__hour {
  top: 100%;
  margin-top: var(--s-12);
  color: var(--ink-on-dark-mute);
}

.chart__rule {
  position: absolute;
  z-index: 2;
  left: 0; right: 0;
  bottom: var(--at);
  border-top: 1px dashed color-mix(in oklch, var(--lemon) 60%, transparent);
}
.chart__rule span {
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-bottom: var(--s-8);
  padding-right: var(--s-8);
  font-size: var(--fs-12);
  font-variant-numeric: tabular-nums;
  color: var(--lemon);
  background: var(--ink-900);
}

.chart__cap {
  max-width: 46ch;
  margin-top: var(--s-24);
  padding-top: var(--s-14);
  border-top: 1px solid var(--line-dark);
  font-size: var(--fs-14);
  color: var(--ink-on-dark-mute);
}

/* ───────── пристрій ───────── */

.device { padding-block: var(--s-62); background: var(--sand-100); }
.device__inner { align-items: center; }

.device__media { position: relative; padding-bottom: var(--s-30); }
.device__shot {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-24);
  background: var(--sand-300);
}
.device__shot img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.device__kit {
  position: absolute;
  right: calc(-1 * var(--s-12));
  bottom: 0;
  width: 40%;
  max-width: 190px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-8);
  border: 4px solid var(--sand-100);
  box-shadow: var(--shadow-lift);
}
.device__kit img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.device__text h2 { margin-bottom: var(--s-24); }
.device__text > p { max-width: 37ch; color: var(--ink-700); line-height: 1.65; }

.spec { margin: var(--s-30) 0 0; }
.spec__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-24);
  padding-block: var(--s-12);
  border-top: 1px solid var(--line);
}
.spec__row:last-child { border-bottom: 1px solid var(--line); }
.spec dt { font-size: var(--fs-14); color: var(--ink-500); }
.spec dd { margin: 0; font-size: var(--fs-16); font-weight: 500; text-align: right; }

/* ───────── показники ───────── */

.metrics { padding-block: var(--s-80); background: var(--sand-200); }
/* px, не ch: ch тут рахувався б від 16px батька, а всередині заголовок на 48px */
.metrics__head { max-width: 640px; margin-bottom: var(--s-62); }
.metrics__head h2 { margin-bottom: var(--s-14); }

.table__head > :nth-child(1),
.table__row  > :nth-child(1) { grid-column: span 3; }
.table__head > :nth-child(2),
.table__row  > :nth-child(2) { grid-column: span 3; }
.table__head > :nth-child(3),
.table__row  > :nth-child(3) { grid-column: span 6; }

.table__head {
  align-items: baseline;
  padding-bottom: var(--s-12);
  border-bottom: 1px solid var(--line-strong);
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--ink-500);
}

.table__row {
  align-items: baseline;
  padding-block: var(--s-24);
  border-bottom: 1px solid var(--line);
  transition: background-color 200ms var(--ease);
}
.table__row:hover { background: color-mix(in oklch, var(--sand-300) 55%, transparent); }

.table__row h3 { font-size: var(--fs-20); font-weight: 600; line-height: 1.3; }
.table__row p { font-size: var(--fs-16); line-height: 1.55; color: var(--ink-700); }
.table__row .table__what { color: var(--ink-900); font-weight: 500; }

/* ───────── підключення ───────── */

.steps { padding-block: var(--s-62); background: var(--sand-100); }
.steps__inner { align-items: center; }
.steps h2 { margin-bottom: var(--s-30); }

.steps__list li {
  position: relative;
  padding: var(--s-24) 0 var(--s-24) var(--s-62);
  border-top: 1px solid var(--line);
}
.steps__list li:last-child { border-bottom: 1px solid var(--line); }
.steps__mark {
  position: absolute;
  left: 0;
  top: var(--s-24);
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--ink-700);
}
.steps__list h3 { margin-bottom: var(--s-8); }
.steps__list p { max-width: 42ch; font-size: var(--fs-16); line-height: 1.6; color: var(--ink-700); }

.steps__media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-24);
  background: var(--sand-300);
}
.steps__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }

/* ───────── тарифи ───────── */

.pricing { padding-block: var(--s-80); background: var(--sand-200); }
.pricing__head { max-width: 600px; margin-bottom: var(--s-62); }
.pricing__head h2 { margin-bottom: var(--s-14); }

/* Три плани лежать на спільних рядках грида, тому назва, ціна, перелік і кнопка
   стоять на одній висоті й тарифи можна порівнювати по рядках. */
.plans {
  position: relative;
  z-index: 0;
  grid-template-rows: repeat(5, auto);
  row-gap: var(--s-24);
  margin-top: var(--s-24);
}
.plan {
  position: relative;
  grid-column: span 4;
  grid-row: span 5;
  display: grid;
  grid-template-rows: subgrid;
}
/* верхня лінійка та темна панель малюються псевдоелементами: у самого .plan
   немає падінгів і бордерів, інакше subgrid-рядки поїдуть відносно батьківських */
.plan::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(-1 * var(--s-24));
  height: 1px;
  background: var(--line-strong);
}
.plan--featured::after { display: none; }
.plan--featured::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--s-24));
  z-index: -1;
  background: var(--ink-900);
  border-radius: var(--r-24);
  box-shadow: var(--shadow-lift);
}

.plan__name { font-size: var(--fs-20); }
.plan__prices { align-self: start; }
.plan__price {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.plan__price--sub { font-size: var(--fs-20); margin-top: var(--s-8); color: var(--ink-700); }
.plan__per {
  display: block;
  font-family: var(--font-text);
  font-size: var(--fs-14);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-500);
  margin-top: var(--s-8);
}
.plan__for { font-size: var(--fs-16); color: var(--ink-700); align-self: start; }
.plan__list {
  display: grid;
  align-content: start;
  gap: var(--s-12);
  font-size: var(--fs-16);
  color: var(--ink-700);
}
.plan__list li { position: relative; padding-left: var(--s-24); line-height: 1.5; }
.plan__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px; height: 8px;
  border-radius: var(--r-pill);
  background: var(--brand);
}
.plan__btn { justify-self: start; align-self: start; }

.plan--featured { color: var(--ink-on-dark); }
.plan--featured .plan__per,
.plan--featured .plan__for,
.plan--featured .plan__list,
.plan--featured .plan__price--sub { color: var(--ink-on-dark-mute); }

/* ───────── кому це потрібно ───────── */

.audience { padding-block: var(--s-62); background: var(--sand-100); }
.audience__inner { align-items: center; }

.audience__media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-24);
  background: var(--sand-300);
}
.audience__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.audience__body h2 { margin-bottom: var(--s-30); }
.audience__list { display: grid; }
.audience__list li { padding-block: var(--s-24); border-top: 1px solid var(--line); }
.audience__list li:last-child { border-bottom: 1px solid var(--line); }
.audience__list h3 { margin-bottom: var(--s-8); }
.audience__list p { max-width: 42ch; color: var(--ink-700); line-height: 1.6; }

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

.faq { padding-block: var(--s-80); background: var(--sand-200); }
.faq__inner { align-items: start; }
.faq__head { position: sticky; top: var(--s-80); }
.faq__head h2 { margin-bottom: var(--s-14); }
.faq__head p { font-size: var(--fs-14); color: var(--ink-500); max-width: 24ch; }
.faq__head a { color: var(--ink-900); text-underline-offset: 3px; }

.qa { border-top: 1px solid var(--line); }
.qa:last-child { border-bottom: 1px solid var(--line); }

.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-24);
  min-height: 44px;
  padding-block: var(--s-24);
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.005em;
  cursor: pointer;
  list-style: none;
  transition: color 150ms var(--ease);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--ink-700); }

.qa__sign {
  position: relative;
  flex: none;
  width: 30px; height: 30px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
}
.qa__sign::before,
.qa__sign::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 11px; height: 1.5px;
  background: var(--ink-900);
  transform: translate(-50%, -50%);
  transition: transform 250ms var(--ease), opacity 250ms var(--ease);
}
.qa__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa[open] .qa__sign::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }

.qa__body { padding-bottom: var(--s-24); }
.qa__body p { max-width: 50ch; font-size: var(--fs-16); line-height: 1.65; color: var(--ink-700); }
.qa[open] .qa__body { animation: qa-in 300ms var(--ease) both; }
@keyframes qa-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ───────── заклик ───────── */

.demo {
  padding-block: var(--s-124);
  background: var(--brand);
  color: var(--on-brand);
}
.demo__inner { align-items: end; }
.demo h2 { max-width: 13ch; margin-bottom: var(--s-24); }
.demo__text p {
  max-width: 35ch;
  font-size: var(--fs-18);
  line-height: 1.55;
  color: var(--on-brand-mute);
}

.demo__label { display: block; font-size: var(--fs-12); font-weight: 600; margin-bottom: var(--s-10); }
.demo__field { display: flex; gap: var(--s-8); flex-wrap: wrap; }
.demo__field input {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 52px;
  padding: 0 var(--s-24);
  font: inherit;
  font-size: var(--fs-16);
  color: var(--on-brand);
  background: color-mix(in oklch, var(--lemon) 55%, var(--paper));
  border: 1px solid var(--line-control-brand);
  border-radius: var(--r-pill);
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease);
}
.demo__field input::placeholder { color: var(--on-brand-mute); }
.demo__field input:hover { border-color: var(--on-brand); }
.demo__field input:focus-visible { outline: 2px solid var(--on-brand); outline-offset: 2px; }
.demo__field input[aria-invalid="true"] { border-color: var(--ink-900); background: var(--paper); }

.demo__hint { margin-top: var(--s-12); font-size: var(--fs-12); color: var(--on-brand-mute); max-width: 35ch; }
.demo__hint a { color: var(--on-brand); text-underline-offset: 3px; }

.demo__error { margin-top: var(--s-8); font-size: var(--fs-14); font-weight: 500; color: var(--ink-900); }
.demo__error:empty { display: none; }

.demo__done {
  padding: var(--s-24);
  border: 1px solid var(--line-control-brand);
  border-radius: var(--r-8);
  font-size: var(--fs-16);
  animation: qa-in 400ms var(--ease) both;
}

/* ───────── футер ───────── */

.footer { padding-block: var(--s-80); background: var(--ink-900); color: var(--ink-on-dark); }
.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-62);
  align-items: start;
}
.footer__word {
  font-family: var(--font-mark);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}
.footer__line {
  margin-top: var(--s-14);
  max-width: 26ch;
  font-size: var(--fs-14);
  line-height: 1.65;
  color: var(--ink-on-dark-mute);
}
.footer h2 {
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--ink-on-dark-mute);
  margin-bottom: var(--s-14);
  letter-spacing: 0.02em;
}
.footer__nav ul,
.footer__contacts ul { display: grid; font-size: var(--fs-14); }
/* падінг на самому посиланні, а не на li: інакше тап-таргет лишається 22px */
.footer__nav a,
.footer__contacts a { display: block; padding-block: var(--s-12); }
.footer__contacts li:not(:has(a)) { padding-block: var(--s-12); }
.footer a { color: var(--ink-on-dark); text-decoration: none; transition: color 150ms var(--ease); }
.footer__nav a:hover,
.footer__contacts a:hover { color: var(--brand); }
.footer__contacts li { color: var(--ink-on-dark-mute); }
.footer__contacts a { color: var(--ink-on-dark); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-12);
  margin-top: var(--s-80);
  padding-top: var(--s-24);
  border-top: 1px solid var(--line-dark);
  font-size: var(--fs-12);
  color: var(--ink-on-dark-mute);
}
.footer__bottom a { color: var(--ink-on-dark-mute); text-underline-offset: 3px; }
.footer__bottom a:hover { color: var(--brand); }

/* ───────── поява ───────── */

.js [data-reveal] { opacity: 0; transform: translateY(14px); }
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}

.js .chart__bar::before { transform: scaleY(0.02); }
.js .chart.is-in .chart__bar::before {
  transform: none;
  transition: transform 700ms var(--ease);
  transition-delay: calc(var(--n, 0) * 45ms);
}
.js .chart__val,
.js .chart__hour { opacity: 0; }
.js .chart.is-in .chart__val,
.js .chart.is-in .chart__hour {
  opacity: 1;
  transition: opacity 400ms var(--ease);
  transition-delay: calc(200ms + var(--n, 0) * 45ms);
}

/* ───────── адаптив ───────── */

@media (max-width: 1120px) {
  :root { --pad: var(--s-30); }
  .problem__cols { gap: var(--s-30); }
  .footer__inner { gap: var(--s-30); }
  .reading { top: var(--s-30); }
}

@media (max-width: 1000px) {
  .masthead__inner { gap: var(--s-12); }
  .nav-toggle { display: inline-flex; }

  .nav {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-24);
    padding: var(--s-24) var(--pad) var(--s-30);
    background: var(--sand-200);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lift);
    /* в альбомній орієнтації меню вище за екран: даємо йому власний скрол */
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav.is-open { display: flex; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list a {
    display: block;
    padding: var(--s-14) 0;
    font-size: var(--fs-18);
    border-bottom: 1px solid var(--line);
  }
  .nav__actions { flex-direction: column; align-items: stretch; }
  .nav__actions .btn { --btn-h: 52px; font-size: var(--fs-16); }

  /* усі секції в одну колонку */
  .hero__inner,
  .problem__inner,
  .device__inner,
  .steps__inner,
  .audience__inner,
  .faq__inner,
  .demo__inner,
  .plans,
  .table__head,
  .table__row { grid-template-columns: minmax(0, 1fr); }

  .hero__inner > *,
  .problem__inner > *,
  .device__inner > *,
  .steps__inner > *,
  .audience__inner > *,
  .faq__inner > *,
  .demo__inner > *,
  .table__row > * { grid-column: 1 / -1; }

  /* шапку таблиці ховаємо на тому ж брейкпоінті, де сітка стає одноколонковою:
     інакше span 3 у однієї колонки породжує неявні колонки й рядок вилазить */
  .table__head { display: none; }
  .table__row { gap: var(--s-8); }
  .table__row:first-child { border-top: 1px solid var(--line-strong); }
  .table__row:hover { background: none; }

  .hero { padding-block: var(--s-30) var(--s-80); }
  .hero__inner { row-gap: var(--s-62); padding-inline: var(--pad); }
  .hero__text { max-width: 34rem; }
  .hero__stage { display: block; min-height: 0; }
  .hero__panel { height: auto; border-radius: var(--r-24); }
  .hero__panel img { height: auto; aspect-ratio: 5 / 4; }
  .reading { top: var(--s-24); left: var(--s-24); }
  .chip { left: var(--s-24); bottom: var(--s-24); }

  .problem { padding-block: var(--s-80); }
  .problem__cols { grid-template-columns: minmax(0, 1fr); gap: var(--s-24); }
  .chart__bars { height: 220px; gap: var(--s-12); }

  .metrics,
  .pricing,
  .faq,
  .audience { padding-block: var(--s-62); }

  .device__media { max-width: 520px; }
  .device__shot img { aspect-ratio: 5 / 4; }
  .device__kit { right: 0; }

  .steps__media { max-width: 520px; }
  .steps__media img { aspect-ratio: 4 / 3; }

  .audience__media { max-width: 420px; }

  .faq__head { position: static; }
  .faq__head p { max-width: 36ch; }

  /* стек: вирівнювати плани по рядках уже нема з чим */
  .plans { grid-template-rows: none; row-gap: var(--s-62); margin-top: var(--s-30); }
  .plan {
    grid-column: 1 / -1;
    grid-row: auto;
    display: flex;
    flex-direction: column;
    gap: var(--s-24);
  }
  .plan--featured::before { inset: calc(-1 * var(--s-24)) calc(-1 * var(--s-12)); }

  .demo { padding-block: var(--s-80); }
  .demo__inner { row-gap: var(--s-30); align-items: start; }

  .footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer__brand { grid-column: 1 / -1; }
  .footer__bottom { margin-top: var(--s-62); }
}

@media (max-width: 560px) {
  :root { --pad: var(--s-24); }

  .strip__list { gap: var(--s-10) var(--s-24); }
  .strip__list li:not(:last-child)::after { margin-left: var(--s-24); }

  .hero__cta { gap: var(--s-10); }
  .hero__cta .btn { flex: 1 1 100%; }
  .reading { width: 172px; top: var(--s-12); left: var(--s-12); padding: var(--s-12); }
  .reading__value { font-size: 1.75rem; }
  .chip { left: var(--s-12); bottom: var(--s-12); }

  .chart__bars { gap: var(--s-8); height: 200px; }

  .device__kit { width: 34%; }
  .spec__row { gap: var(--s-12); }

  .steps__list li { padding-left: var(--s-62); }

  .qa summary { font-size: var(--fs-18); }

  .demo__field .btn { flex: 1 1 100%; }

  .footer__inner { grid-template-columns: minmax(0, 1fr); }
  .footer__brand { grid-column: auto; }
}

@media (max-width: 360px) {
  .strip__list li:not(:last-child)::after { display: none; }
  .strip__list { gap: var(--s-8); }
}

/* ───────── моушн вимкнено ───────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .chart__bar::before { transform: none; }
  .js .chart__val,
  .js .chart__hour { opacity: 1; }
  .chip__live { animation: none; }
}