/* ============================================================================
   TURBO LAB — DESIGN SYSTEM
   Реалізація брендбуку v1.0 (September 2026)

   Принципи, зафіксовані в брендбуку:
   • Neutral first. Violet as signal. — чорний/білий/сірий домінують,
     #A64DFF лише як акцент дії: CTA, активний стан, головний KPI, LAB.
   • Плаский інтерфейс: 1px межі, radius 12–16px, без важких тіней,
     без glassmorphism, без neon glow, без 3D-ефектів і градієнтів.
   • Типографіка робить половину дизайну: Inter (Display Black — заголовки),
     PT Mono (технічні лейбли, індекси, цифри).
   • 8-pt сітка, max-width 1200–1280, секції 80–120px.
   • Дозволена графіка: тонкі лінії, індекси 01–99, mono-лейбли, сітка,
     прості KPI-блоки, суцільний фіолетовий акцент.
   • Заборонено: AI-SaaS градієнти, glow, 3D, іконки-кліше, emoji.

   Зміст:
    01 TOKENS          08 TIMELINE / PROCESS
    02 BASE            09 CHIPS / ACCENT / NICHES
    03 TYPOGRAPHY      10 CASES (LAB REPORT)
    04 LAYOUT          11 ABOUT / FOUNDER
    05 HEADER          12 FORM
    06 HERO            13 MODAL / FOOTER
    07 BUTTONS / CARDS 14 UTILITIES · RESPONSIVE · PRINT
   ========================================================================== */

/* ============================================================================
   01. TOKENS
   ========================================================================== */

:root {
  /* --- Брендбук: базова палітра ------------------------------------------ */
  --black: #0A0A0A;
  --off-white: #F6F7F9;
  --light-gray: #E6E8EC;
  --graphite: #6B6F76;
  --violet: #A64DFF;

  /* --- Семантика (dark-first) -------------------------------------------- */
  --bg: var(--black);
  --bg-2: #0E0E10;
  --surface: #121214;
  --surface-2: #17171A;
  --line: rgba(255, 255, 255, .10);         /* 1px neutral gray */
  --line-strong: rgba(255, 255, 255, .22);
  --text: var(--off-white);
  --text-2: #A9AEB6;
  --text-3: var(--graphite);
  --accent: var(--violet);
  --accent-ink: #FFFFFF;
  --danger: #FF5A5F;
  --ok: #3FBF8F;
  --warn: #E0B341;

  /* --- Типографіка -------------------------------------------------------- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-mono: 'PT Mono', Consolas, ui-monospace, 'SFMono-Regular', monospace;

  /* --- 8-pt система відступів -------------------------------------------- */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 48px;
  --s-6: 64px;

  /* --- Форма -------------------------------------------------------------- */
  --r-card: 14px;      /* брендбук: 12–16px */
  --r-btn: 8px;
  --r-input: 8px;
  --r-tag: 6px;

  /* --- Сітка -------------------------------------------------------------- */
  --maxw: 1240px;      /* брендбук: 1200–1280px */
  --gutter: clamp(20px, 4vw, 40px);
  --section-pad: clamp(80px, 9vw, 120px);   /* брендбук: 80–120px */

  --ease: cubic-bezier(.22, .61, .36, 1);
  --header-h: 76px;

  color-scheme: dark;
}

/* ----------------------------------------------------------------------------
   ТЕМА — ЛИШЕ ТЕМНА
   Брендбук задає обидві основи: BLACK #0A0A0A як dark background і
   OFF WHITE #F6F7F9 як світлий фон. Сайт працює виключно в темній темі:
   перемикач теми прибрано за рішенням замовника, світлі змінні лишились
   у :root як довідник палітри брендбуку.
   -------------------------------------------------------------------------- */

/* ============================================================================
   02. BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }
body.nav-open { overflow: hidden; }

img, svg { max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--violet); color: #fff; }

/* Фокус — видимий і однаковий усюди */
:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================================
   03. TYPOGRAPHY
   ========================================================================== */

/* Технічний лейбл — основний носій «лабораторної» мови бренду */
.label-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 10px;
}
.label-mono::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--line-strong);
  flex: 0 0 auto;
}

/* H1 — 52–72px / 800–900 · H2 — 32–44px / 700–900 */
.section__title,
.hero__title {
  font-weight: 850;
  letter-spacing: -.035em;
  line-height: 1.04;
  text-wrap: balance;
}

.hero__title { font-size: clamp(38px, 5.4vw, 72px); max-width: 15ch; }
.section__title { font-size: clamp(28px, 3.4vw, 44px); font-weight: 800; max-width: 26ch; }

/* H3 — 22–28px / 600–800 */
.card__title,
.timeline__title,
.process__title {
  font-size: clamp(19px, 1.2vw + 15px, 24px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.018em;
}

/* ============================================================================
   04. LAYOUT
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-pad); }
.section--alt {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section__head { display: grid; gap: var(--s-3); margin-bottom: clamp(40px, 5vw, 64px); }
.section__head--split {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
}
.section__head--split > div { display: grid; gap: var(--s-3); }
.section__note {
  color: var(--text-2);
  font-size: 16px;
  max-width: 46ch;
  padding-left: var(--s-3);
  border-left: 1px solid var(--line);
  align-self: end;
}
.section__foot { margin-top: clamp(32px, 4vw, 56px); }

.grid { display: grid; gap: var(--s-3); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ============================================================================
   05. HEADER
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);          /* брендбук: без glassmorphism і розмиття */
  border-bottom: 1px solid var(--line);
}
.site-header.is-scrolled { background: var(--bg); border-bottom-color: var(--line-strong); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: var(--header-h);
}

/* Логотип: lockup TURBO / лінія / LAB зберігається без змін (вимога брендбуку) */
.brand { display: flex; align-items: center; gap: var(--s-3); flex: 0 0 auto; }
/* Логотип успадковує колір тексту: у темній темі TURBO білий, у світлій — чорний.
   «LAB» завжди фіолетовий (задано в самому символі). */
.brand__logo { display: block; width: clamp(112px, 9vw, 138px); color: var(--text); }
.brand__logo svg { display: block; width: 100%; height: auto; }
.brand__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-left: var(--s-3);
  border-left: 1px solid var(--line);
  white-space: nowrap;
}
/* на вузьких екранах девіз поступається місцем навігації та кнопці */
@media (max-width: 1320px) { .brand__tag { display: none; } }

.nav { display: flex; align-items: center; gap: clamp(12px, 1.3vw, 22px); margin-left: auto; }
.nav__link {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  white-space: nowrap;          /* пункти меню не мають переноситися на два рядки */
  font-size: 15px;
  font-weight: 500;
  color: var(--text-2);
  padding-block: 6px;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.nav__link:hover { color: var(--text); border-bottom-color: var(--violet); }
.nav__idx { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }

.site-header__cta { display: flex; align-items: center; gap: var(--s-2); flex: 0 0 auto; }

/* Перемикач мови: маленька кнопка з кодом поточної мови + меню двох інших.
   Брендбук: default — graphite, active — violet, mono-лейбл, без заливок. */
.lang { position: relative; flex: 0 0 auto; }
.lang__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.lang__btn:hover { border-color: var(--violet); color: var(--violet); }
.lang__chev { width: 8px; height: 8px; stroke: currentColor; transition: transform .2s var(--ease); }
.lang.is-open .lang__chev { transform: rotate(180deg); }
.lang__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 70;
  min-width: 176px;
  padding: 6px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-btn);
  box-shadow: 0 20px 44px -24px rgba(0, 0, 0, .85);
}
.lang__item {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--text-2);
  white-space: nowrap;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.lang__item:hover { background: var(--surface-2); color: var(--text); }
.lang__item-code { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--violet); }

.burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  background: transparent;
  cursor: pointer;
  position: relative;
}
.burger span {
  position: absolute; left: 12px; right: 12px; height: 1.5px;
  background: var(--text);
  transition: transform .25s var(--ease);
}
.burger span:first-child { top: 18px; }
.burger span:last-child { bottom: 18px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-6px) rotate(-45deg); }

.scroll-progress {
  height: 2px;
  background: var(--violet);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
}

/* ============================================================================
   06. HERO
   ========================================================================== */

.hero {
  position: relative;
  padding-block: clamp(56px, 7vw, 104px) var(--section-pad);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

/* Дозволений елемент брендбуку: сітка / координати. Тонка, без свічення. */
.hero__grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(120% 90% at 12% 30%, #000 10%, transparent 72%);
  mask-image: radial-gradient(120% 90% at 12% 30%, #000 10%, transparent 72%);
  opacity: .55;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.hero__content { display: grid; gap: var(--s-3); min-width: 0; }
.hero__label { color: var(--text-2); }
.hero__title { margin-top: var(--s-2); }
.hero__title .hl { color: var(--violet); }   /* violet як сигнал, не як фон */

.hero__sub {
  font-size: clamp(16px, .5vw + 14px, 18px);
  line-height: 1.62;
  color: var(--text-2);
  max-width: 52ch;
  margin-top: var(--s-2);
}

.hero__badges { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-2); }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-tag);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--text-2);
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.badge:hover { border-color: var(--violet); color: var(--text); }
.badge__dot { width: 6px; height: 6px; background: var(--violet); flex: 0 0 auto; }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }

.hero__meta {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
  margin-top: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--line);
  padding-top: var(--s-3);
}
.hero__meta-item { display: grid; gap: 6px; align-content: start; }
.hero__meta dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.hero__meta dd { font-size: 16px; font-weight: 500; }

/* ── Панель каналів --------------------------------------------------------
   Плаский блок із тонкими лініями, індексами, mono-лейблами та логотипами
   каналів — згідно з брендбуком (без glassmorphism, glow і 3D).            */

.hero__channels {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  overflow: hidden;
}
.channels__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line);
}
.channels__count { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); }

.channel {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3);
  border-bottom: 1px solid var(--line);
  transition: background-color .2s var(--ease);
}
.channel:last-child { border-bottom: 0; }
.channel:hover { background: var(--surface-2); }
.channel:hover .channel__name { color: var(--violet); }

.channel__idx { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); }
.channel__mark { width: 44px; height: 44px; display: grid; place-items: center; }
.channel__mark--meta img { width: 44px; }
.channel__mark--google img { width: 33px; }
.channel__body { display: grid; gap: 4px; min-width: 0; }
.channel__name { font-size: 17px; font-weight: 600; letter-spacing: -.01em; transition: color .2s var(--ease); }
.channel__role {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.channels__foot {
  padding: var(--s-2) var(--s-3);
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;   /* вужче, щоб етапи воронки вміщалися в один рядок */
  text-transform: uppercase;
  color: var(--text-3);
}

/* ============================================================================
   07. BUTTONS / CARDS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), opacity .2s var(--ease);
}
.btn__arrow { transition: transform .25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Головна дія — суцільний фіолетовий (дозволений елемент брендбуку) */
.btn--primary { background: var(--violet); color: var(--accent-ink); }
.btn--primary:hover { background: #B566FF; }

.btn--ghost { border-color: var(--line-strong); color: var(--text); }
.btn--ghost:hover { border-color: var(--text-2); background: var(--surface); }

.btn--outline { border-color: var(--violet); color: var(--violet); }
.btn--outline:hover { background: rgba(166, 77, 255, .1); }

.btn--sm { padding: 10px 16px; font-size: 14px; }
.btn--lg { padding: 16px 26px; font-size: 16px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.card {
  position: relative;
  display: grid;
  gap: var(--s-2);
  align-content: start;
  padding: clamp(24px, 3vw, 40px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  transition: border-color .25s var(--ease);
}
.card:hover { border-color: var(--line-strong); }

.card__idx { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; color: var(--violet); }
.card__text { color: var(--text-2); font-size: 16px; line-height: 1.65; }
.card__cta {
  margin-top: var(--s-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  font-size: 15px;
  font-weight: 600;
  color: var(--violet);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease);
}
.card__cta:hover { border-bottom-color: var(--violet); }

/* ============================================================================
   08. TIMELINE (9 кроків) / PROCESS (8 кроків)
   ========================================================================== */

.timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.timeline__item {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: clamp(20px, 2.4vw, 32px);
  background: var(--surface);
  transition: background-color .2s var(--ease);
}
.timeline__item:hover { background: var(--surface-2); }
.timeline__idx { font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; color: var(--text-3); }
.timeline__text { color: var(--text-2); font-size: 15px; line-height: 1.55; }

.process { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); }
.process__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  align-items: start;
  padding-block: var(--s-3);
  border-top: 1px solid var(--line);
}
.process__idx { font-family: var(--font-mono); font-size: 13px; color: var(--violet); padding-top: 3px; }
.process__text { color: var(--text-2); font-size: 15px; line-height: 1.55; margin-top: 4px; }

/* ============================================================================
   09. CHIPS / ACCENT / NICHES
   ========================================================================== */

.competencies { margin-top: clamp(32px, 4vw, 56px); display: grid; gap: var(--s-2); }
.competencies__label { color: var(--text-3); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.chip {
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-tag);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--text-2);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.chip:hover { border-color: var(--violet); color: var(--text); }

.accent {
  margin-top: clamp(32px, 4vw, 56px);
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--line);
  border-left: 3px solid var(--violet);   /* суцільний фіолетовий акцент */
  border-radius: var(--r-card);
  background: var(--surface);
  display: grid;
  gap: var(--s-2);
  justify-items: start;
}
.accent__label { color: var(--text-3); }
.accent__text { color: var(--text-2); font-size: 17px; line-height: 1.6; max-width: 62ch; }
.accent .btn { margin-top: var(--s-1); }

.niches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.niche {
  display: grid;
  gap: 10px;
  padding: clamp(20px, 2.2vw, 30px);
  background: var(--surface);
  transition: background-color .2s var(--ease);
}
.niche:hover { background: var(--surface-2); }
.niche__idx { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); }
.niche__name { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }

/* ============================================================================
   10. CASES — LAB REPORT
   Формат брендбуку: LAB REPORT / NNN · клієнт · галузь · KPI-блоки
   (головна цифра — фіолетова) · контекст результату.
   ========================================================================== */

.cases { display: grid; gap: var(--s-3); }

.case {
  display: grid;
  gap: var(--s-3);
  padding: clamp(24px, 3vw, 40px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  transition: border-color .25s var(--ease);
}
.case:hover { border-color: var(--line-strong); }

.case__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.case__idx { color: var(--text-3); }
.case__industry { color: var(--text-3); text-align: right; }
.case__client { font-size: clamp(22px, 1.6vw + 16px, 30px); font-weight: 800; letter-spacing: -.025em; }

/* KPI: 56–96px / 800–900. Одна головна цифра — фіолетова. */
.case__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s-3);
  padding-block: var(--s-2);
}
.kpi { display: grid; gap: 6px; min-width: 0; }
.kpi__value {
  font-size: clamp(38px, 4.4vw, 72px);
  font-weight: 850;
  line-height: .95;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.kpi:first-child .kpi__value { color: var(--violet); }   /* головний KPI */
.kpi__label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.case__result { color: var(--text-2); font-size: 16px; max-width: 70ch; }

/* чернеткові дані — пунктир і приглушення, без кольорових акцентів */
.case--placeholder { border-style: dashed; }
.case--placeholder .kpi__value { color: var(--text-3); font-size: clamp(24px, 2.4vw, 36px); }

.draft-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: var(--s-3);
  padding: 14px 18px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-card);
  color: var(--text-2);
  font-size: 14px;
}
.draft-note__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--warn);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-tag);
  padding: 4px 9px;
}
.draft-note code { font-family: var(--font-mono); font-size: 12.5px; color: var(--text); }

/* ============================================================================
   11. ABOUT / FOUNDER
   ========================================================================== */

.about { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 72px); }
.about__main { display: grid; gap: var(--s-2); }
.about__lead { font-size: clamp(20px, 1.5vw + 15px, 30px); font-weight: 700; line-height: 1.2; letter-spacing: -.025em; max-width: 22ch; }
.about__text { color: var(--text-2); max-width: 60ch; }

.principles {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.principle {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-2);
  align-items: baseline;
  padding: var(--s-2) var(--s-3);
  background: var(--surface);
}
.principle__idx { font-family: var(--font-mono); font-size: 12px; color: var(--violet); }
.principle__text { font-size: 15.5px; color: var(--text-2); }

.founder {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding: clamp(24px, 3vw, 36px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
/* Картка з портретом: фото ліворуч, текст праворуч */
.founder--with-photo {
  grid-template-columns: clamp(132px, 15vw, 208px) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 40px);
  align-items: start;
}
.founder:empty { display: none; }
.founder__photo {
  display: block;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.founder__photo img { display: block; width: 100%; height: auto; }
.founder__photo picture { display: block; }
.founder__body { display: grid; gap: var(--s-2); }
.founder__label { color: var(--text-3); }
.founder__quote { font-size: clamp(17px, .8vw + 15px, 21px); line-height: 1.5; color: var(--text); max-width: 66ch; }
.founder__focus { color: var(--text-2); max-width: 62ch; }
.founder__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding-top: var(--s-2);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.founder--with-photo .founder__meta { grid-column: 2; }
.founder__name { color: var(--text); }
.founder__role { color: var(--text-3); }
.founder--placeholder { border-style: dashed; }

/* ============================================================================
   12. FORM
   ========================================================================== */

.section--form { background: var(--bg-2); border-top: 1px solid var(--line); }

.form-shell {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 80px);
  padding: clamp(28px, 4vw, 56px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--bg);
}
.form-shell__aside { display: grid; gap: var(--s-2); align-content: start; }
.form-shell__text { color: var(--text-2); font-size: 16px; max-width: 44ch; }
.form-shell__list { display: grid; gap: 10px; margin-top: var(--s-1); }
.form-shell__list li { display: grid; grid-template-columns: auto 1fr; gap: 10px; font-size: 15px; color: var(--text-2); }
.form-shell__list li::before { content: '—'; color: var(--violet); }

.form { display: grid; gap: var(--s-3); }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }

.field { display: grid; gap: 8px; }
.field__label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.req { color: var(--violet); }

.input, .textarea {
  width: 100%;
  padding: 13px 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:hover, .textarea:hover { border-color: var(--line-strong); }
.input:focus, .textarea:focus { outline: none; border-color: var(--violet); background: var(--surface-2); }
.textarea { resize: vertical; min-height: 132px; line-height: 1.55; }

/* Вибір послуги: радіокартки з фіолетовим активним станом */
.pills { display: grid; gap: var(--s-1); }
.pill { display: block; cursor: pointer; }
.pill input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pill__box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  background: var(--surface);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.pill__box::before {
  content: '';
  width: 14px; height: 14px;
  flex: 0 0 auto;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.pill__title { font-size: 15.5px; color: var(--text-2); }
.pill:hover .pill__box { border-color: var(--line-strong); }
.pill input:focus-visible + .pill__box { outline: 2px solid var(--violet); outline-offset: 2px; }
.pill input:checked + .pill__box { border-color: var(--violet); background: rgba(166, 77, 255, .08); }
.pill input:checked + .pill__box::before {
  border-color: var(--violet);
  background: var(--violet);
  box-shadow: inset 0 0 0 3px var(--bg);
}
.pill input:checked + .pill__box .pill__title { color: var(--text); }
.pill--flash .pill__box { border-color: var(--violet); background: rgba(166, 77, 255, .14); }

.field__error { font-family: var(--font-mono); font-size: 12px; color: var(--danger); }
.field.has-error .input,
.field.has-error .textarea { border-color: var(--danger); }

.form__actions { display: grid; gap: var(--s-2); justify-items: start; margin-top: var(--s-1); }
.form__consent { font-size: 13px; color: var(--text-3); max-width: 52ch; line-height: 1.5; }

/* Згода на обробку персональних даних — обов'язкова галочка перед відправкою */
.consent { display: grid; gap: 8px; margin-top: var(--s-2); }
.consent__label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
  max-width: 62ch;
}
.consent__label input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 16px; height: 16px;
  margin-top: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.consent__label input:checked {
  border-color: var(--violet);
  background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px 12px no-repeat;
}
.consent__label input:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.consent__label a { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }
.consent.has-error .consent__label { color: var(--danger); }
.consent.has-error .consent__label input { border-color: var(--danger); }
.consent__error { font-family: var(--font-mono); font-size: 12px; color: var(--danger); }

/* honeypot — поза екраном, але НЕ display:none (щоб боти його бачили) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.spinner {
  display: none;
  width: 15px; height: 15px;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.form.is-loading .spinner { display: block; }
.form.is-loading .btn--submit { pointer-events: none; opacity: .85; }

.form__status { min-height: 22px; font-family: var(--font-mono); font-size: 13px; color: var(--text-3); }
.form__status.is-error { color: var(--danger); }
.form__status.is-success { color: var(--ok); }

/* ============================================================================
   13. MODAL / FOOTER
   ========================================================================== */

.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--gutter); }
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(5, 5, 6, .8);
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.modal.is-open .modal__backdrop { opacity: 1; }

.modal__card {
  position: relative;
  width: min(100%, 520px);
  display: grid;
  gap: var(--s-2);
  justify-items: start;
  padding: clamp(28px, 4vw, 44px);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.modal.is-open .modal__card { opacity: 1; transform: none; }

.modal__icon {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--violet);
  border-radius: 50%;
  color: var(--violet);
}
.modal__icon svg { width: 22px; height: 22px; }
.modal__label { color: var(--text-3); }
.modal__title { font-size: clamp(24px, 2vw + 16px, 32px); font-weight: 800; letter-spacing: -.025em; }
.modal__text { color: var(--text-2); }
.modal__id { font-family: var(--font-mono); font-size: 12.5px; color: var(--violet); }
.modal__close { margin-top: var(--s-1); }

.site-footer { background: var(--bg-2); border-top: 1px solid var(--line); padding-block: clamp(48px, 6vw, 80px) var(--s-4); }
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, .9fr));
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.site-footer__brand { display: grid; gap: var(--s-2); align-content: start; justify-items: start; }
.site-footer__logo { display: block; width: clamp(140px, 14vw, 178px); color: var(--text); }
.site-footer__logo svg { display: block; width: 100%; height: auto; }
.site-footer__name { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.site-footer__domain {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-2);
  border-bottom: 1px solid var(--line-strong);
}
.site-footer__domain:hover { color: var(--violet); border-bottom-color: var(--violet); }
.site-footer__col { display: grid; gap: var(--s-2); align-content: start; }
.site-footer__list { display: grid; gap: 10px; font-size: 15px; }
.site-footer__list a { color: var(--text-2); transition: color .2s var(--ease); }
.site-footer__list a:hover { color: var(--violet); }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  justify-content: space-between;
  padding-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--text-3);
}
.is-placeholder { color: var(--text-3); border-bottom: 1px dashed var(--line-strong); }

/* ============================================================================
   14. UTILITIES · RESPONSIVE · MOTION · PRINT
   ========================================================================== */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 18px;
  background: var(--violet);
  color: #fff;
  border-radius: 0 0 var(--r-btn) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* Поява блоків: без різких рухів, лише м'який підйом */
html.js .reveal:not(.is-visible) { opacity: 0; transform: translateY(14px); }
.reveal { transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--d, 0ms); }

@media (max-width: 1100px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .hero__title { max-width: 20ch; }
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .niches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    padding: var(--s-2) var(--gutter) var(--s-4);
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s var(--ease), transform .22s var(--ease);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav__link { font-size: 19px; font-weight: 600; padding-block: var(--s-2); border-bottom: 1px solid var(--line); }
  .nav__link:hover { border-bottom-color: var(--line); color: var(--violet); }
  .burger { display: block; }
  .site-header__cta .btn { display: none; }

  .section__head--split { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .section__note { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: var(--s-2); }
  .grid--2 { grid-template-columns: minmax(0, 1fr); }
  .process { grid-template-columns: minmax(0, 1fr); }
  .about { grid-template-columns: minmax(0, 1fr); }
  .form-shell { grid-template-columns: minmax(0, 1fr); }
  .niches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .timeline { grid-template-columns: minmax(0, 1fr); }
  .niches { grid-template-columns: minmax(0, 1fr); }
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .hero__meta { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .hero__meta-item + .hero__meta-item { border-top: 1px solid var(--line); padding-top: var(--s-2); }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .hero__badges { flex-direction: column; align-items: stretch; }
  .badge { justify-content: flex-start; }
  .site-footer__top { grid-template-columns: minmax(0, 1fr); }
  .case__head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .case__industry { text-align: left; }
  .channel { gap: var(--s-2) var(--s-2); padding: var(--s-2); }
  .channel__mark { width: 36px; height: 36px; }
  .channel__mark--meta img { width: 36px; }
  .channel__mark--google img { width: 27px; }
  .channel__name { font-size: 16px; }

  /* Портрет у картці засновниці: на вузьких екранах фото над текстом */
  .founder--with-photo { grid-template-columns: minmax(0, 1fr); }
  .founder--with-photo .founder__photo { width: clamp(140px, 42%, 200px); }
  .founder--with-photo .founder__meta { grid-column: auto; }
}

@media (min-width: 1800px) {
  :root { --maxw: 1320px; }
  .hero__title { font-size: clamp(72px, 4.4vw, 96px); }
}

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

@media print {
  html, body { background: #fff; color: #000; font-size: 11pt; }
  .site-header, .burger, .modal, .hero__grid-bg, .hero__channels, .skip-link { display: none; }
  .section { padding-block: 20px; break-inside: avoid; }
  a { text-decoration: underline; }
}