/* =================================================================
   ТранскриБот — лендинг. styles.css
   Палитра: yClients (жёлтый #ffcb00 + чёрный #181818 на белом/сером).
   Все цвета / радиусы / тени / отступы — в :root. Правьте здесь.
   ================================================================= */

/* =================================================================
   0. TOKENS (:root)
   ================================================================= */
:root{
  /* === CTA: жёлтый === */
  --accent:      #ffcb00;
  --accent-700:  #f0bd00;   /* hover жёлтого */
  --on-accent:   #2b3134;   /* тёмный текст на жёлтой кнопке */
  --accent-strong:#e89b00;  /* (не используется) */
  --accent-fire:  #ff5722;  /* ярко-оранжевый (огненно-рыжий) — слова-плейсхолдеры */

  /* === Тёмное (чёрный — второй герой) === */
  --ink:         #181818;   /* заголовки, тёмные кнопки/секции/карточки */
  --ink-2:       #2b3134;   /* основной текст */
  --muted:       #6b7075;   /* вторичный текст */
  --muted-2:     #999ea7;   /* подписи / приглушённое */

  /* === Поверхности === */
  --bg:          #ffffff;
  --bg-soft:     #f7f7f9;   /* светло-серая секция */
  --bg-soft-2:   #f2f2f6;
  --soft-yellow: #feeeba;   /* мягкая жёлтая плашка для факта/цифры */
  --line:        #e1e3e8;   /* бордеры/разделители */
  --line-2:      #e0e3eb;

  /* === На тёмном === */
  --on-dark:     #ffffff;
  --on-dark-mut: #b9bdc4;
  --line-dark:   rgba(255,255,255,.12);

  /* === Тени (нейтральные) === */
  --sh-sm: 0 1px 2px rgba(24,24,24,.06), 0 2px 8px rgba(24,24,24,.05);
  --sh-md: 0 8px 24px rgba(24,24,24,.10);
  --sh-lg: 0 18px 50px rgba(24,24,24,.14);

  /* === Радиусы === */
  --r-sm:10px; --r-md:15px; --r-lg:20px; --r-xl:28px; --r-pill:999px; --r-btn:15px;

  /* === Type scale — дизайн-система yClients (Inter) === */
  --fs-hero: clamp(34px, 4.6vw, 65px);   /* yClients hero 65/700 */
  --fs-h2:   clamp(28px, 3.4vw, 48px);   /* yClients секции 48/600 */
  --fs-h3:   clamp(22px, 2.2vw, 32px);
  --fs-lead: clamp(17px, 1.5vw, 22px);
  --fs-body: 16px;
  --fs-sm:   14px;
  --fs-micro:13px;

  /* === Spacing === */
  --pad-section: clamp(56px, 7vw, 96px);
  --maxw:        1200px;
  --gap-card:    24px;
  --header-h:    72px;
}

/* =================================================================
   1. RESET / BASE
   ================================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:"Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:var(--fs-body);
  line-height:1.5;
  color:var(--ink-2);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }
button{ font-family:inherit; }

h1,h2,h3{
  font-weight:700;
  letter-spacing:-0.01em;
  color:var(--ink);
  line-height:1.15;
}

.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:24px;
}

/* секции-якоря под sticky-header */
section[id]{ scroll-margin-top:calc(var(--header-h) + 12px); }

:focus-visible{
  outline:3px solid rgba(255,203,0,.6);
  outline-offset:2px;
  border-radius:4px;
}

/* =================================================================
   2. GLOBAL COMPONENTS
   ================================================================= */

/* ---- 2.1 Кнопки ---- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:54px;
  padding:0 24px;
  border-radius:var(--r-btn);
  font-weight:600;
  font-size:16px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .15s, transform .05s, box-shadow .15s, border-color .15s;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn__arrow{ flex:0 0 auto; }

.btn--primary{ background:var(--accent); color:var(--on-accent); }
.btn--primary:hover{ background:var(--accent-700); box-shadow:var(--sh-md); }

.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ background:#000; box-shadow:var(--sh-md); }

.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ background:var(--bg-soft); border-color:var(--ink); }

.btn--lg{ height:60px; padding:0 32px; font-size:18px; }
.btn--sm{ height:40px; padding:0 18px; font-size:14px; }

/* ---- 2.2 Карточка ---- */
.card{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:28px;
  box-shadow:var(--sh-sm);
}
.card--dark{
  background:var(--ink);
  color:var(--on-dark);
  border:1px solid var(--line-dark);
  border-radius:var(--r-lg);
  padding:28px;
}
.card--dark h2,.card--dark h3{ color:#fff; }

/* ---- 2.3 Бейджи / пиллы ---- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:30px;
  padding:0 14px;
  border-radius:var(--r-pill);
  background:var(--bg-soft);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.eyebrow i{
  width:6px; height:6px; border-radius:50%;
  background:var(--accent); flex:0 0 auto;
}

.badge--popular{
  display:inline-flex;
  align-items:center;
  height:28px;
  padding:0 14px;
  border-radius:var(--r-pill);
  background:var(--accent);
  color:var(--on-accent);
  font-size:13px;
  font-weight:700;
}

.pill--fact{
  display:inline-block;
  background:var(--soft-yellow);
  color:var(--ink);
  border-radius:var(--r-pill);
  padding:5px 14px;
  font-weight:600;
  font-size:14px;
}

/* ---- 2.4 Заголовок секции ---- */
.section-head{
  max-width:760px;
  margin:0 auto 48px;
  text-align:center;
}
.section-head .eyebrow{ margin-bottom:16px; }
.section-head h2{ font-size:var(--fs-h2); font-weight:600; margin:0 0 14px; }
.section-head p{ font-size:var(--fs-lead); color:var(--muted); margin:0; }

/* ---- 2.5 Галочка-чип ---- */
.check{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px; height:20px;
  border-radius:50%;
  background:var(--accent);
  flex:0 0 auto;
  margin-top:2px;
}
.check::after{
  content:"";
  width:7px; height:4px;
  border-left:2px solid var(--on-accent);
  border-bottom:2px solid var(--on-accent);
  transform:rotate(-45deg) translateY(-1px);
}

/* ---- 2.6 Разделитель ---- */
.divider{ height:1px; background:var(--line); border:0; margin:20px 0; }
.divider--dark{ background:var(--line-dark); }

/* появление секций при скролле.
   Скрываем элементы ТОЛЬКО когда JS добавил .js на <html> —
   без JS / при ошибке наблюдателя контент всегда виден. */
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease; }
.js .reveal.is-visible{ opacity:1; transform:none; }

/* =================================================================
   S1 — HEADER (sticky)
   ================================================================= */
.site-header{
  position:sticky; top:0; z-index:50;
  height:var(--header-h);
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:box-shadow .2s;
}
.site-header.is-scrolled{ box-shadow:var(--sh-sm); }
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  height:100%;
  border-bottom:1px solid var(--line);   /* линия на ширину фрейма (контейнера), не на весь экран — как у yClients */
}

.logo{ display:inline-flex; align-items:center; gap:10px; }
.logo__mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  border-radius:11px;
  background:var(--accent);
  flex:0 0 auto;
}
.logo__text{ display:flex; flex-direction:column; line-height:1.1; }
.logo__word{ font-weight:700; font-size:18px; color:var(--ink); letter-spacing:-.02em; }
.logo__desc{ font-size:13px; color:var(--muted); }

.nav{ display:flex; flex-wrap:nowrap; gap:28px; }
.nav a{
  color:var(--ink-2); font-weight:500; font-size:15px;
  white-space:nowrap;
  transition:color .15s;
}
/* a11y: --accent-700 на белом нечитаем при hover (1.75:1) — тёмный текст + жёлтое подчёркивание */
.nav a:hover{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-underline-offset:4px;
}

.header__actions{ display:flex; align-items:center; gap:18px; }
.header__handle{ color:var(--muted); font-size:14px; }
.header__handle:hover{ color:var(--ink); }

.burger{
  display:none;
  width:44px; height:44px;
  flex-direction:column; align-items:center; justify-content:center;
  gap:5px;
  background:transparent; border:0; cursor:pointer;
}
.burger span{
  width:22px; height:2px; border-radius:2px; background:var(--ink);
  transition:transform .25s, opacity .25s;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Мобильное меню */
.mobile-menu{
  position:fixed; inset:var(--header-h) 0 0 0; z-index:49;
  background:#fff;
  padding:32px 24px calc(32px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:8px;
  overflow-y:auto;
}
.mobile-menu[hidden]{ display:none; }
.mobile-menu__nav{ display:flex; flex-direction:column; }
.mobile-menu__nav a{
  font-size:20px; font-weight:600; color:var(--ink);
  padding:14px 0; border-bottom:1px solid var(--line);
}
.mobile-menu__cta{ margin-top:20px; width:100%; }
.mobile-menu__handle{ margin-top:16px; color:var(--muted); text-align:center; }

/* =================================================================
   S2 — MARQUEE (тёмная полоса)
   ================================================================= */
.marquee{
  background:var(--ink); color:var(--on-dark);
  overflow:hidden; padding-block:14px;
  white-space:nowrap;
}
.marquee__track{
  display:inline-flex;
  animation:marquee 30s linear infinite;
  will-change:transform;
}
.marquee__group{
  display:inline-block;
  font-size:15px; letter-spacing:.01em;
  padding-right:8px;
}
.marquee__group b{ color:var(--accent); font-weight:700; }
.marquee__dot{ color:var(--accent); padding:0 14px; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* =================================================================
   S3 — HERO
   ================================================================= */
.hero{ padding-top:clamp(56px,7.6vw,96px); padding-bottom:var(--pad-section); }
.hero__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.hero__inner .eyebrow{ margin-bottom:20px; }
.hero__title{
  display:grid;
  grid-template-columns:1fr 1fr;     /* две равные половины → шов (общая ось) ровно по центру контейнера */
  align-items:baseline;
  column-gap:.32em;                  /* воздух по обе стороны оси; ≈21px при 65px */
  row-gap:.10em;                     /* зазор между двумя строками */
  width:100%;
  max-width:920px;                   /* «за 3 минуты в» помещается в левую половину при 65px без раннего переноса */
  margin:0 auto 26px;                /* центрируем блок, сохраняем 26px снизу */
  font-size:var(--fs-hero);
  font-weight:700;
  line-height:1.1; letter-spacing:-.01em;
  color:var(--ink);
}
.utp-static{ text-align:right; white-space:nowrap; }   /* по правому краю — прижимает статику к оси (левая 1fr-половина) */
.hero__title .hl{
  background:var(--soft-yellow);
  border-radius:8px;
  padding:0 8px;
  white-space:nowrap;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
/* Динамические слоты заголовка (источник/результат). Позже — перелистывание сверху вниз */
/* Слот = окно фикс. ширины (по самому длинному слову), слова прижаты ВЛЕВО к оси.
   Внутри два слова (текущее + входящее) едут СВЕРХУ ВНИЗ. Ось не двигается → статика не прыгает. */
.utp-slot{
  position:relative;
  display:inline-block;
  overflow:hidden;
  height:1.1em;
  line-height:1.1em;
  text-align:left;          /* плейсхолдеры растут вправо от оси */
  vertical-align:baseline;
  white-space:nowrap;
  /* width задаёт JS = ширина самого длинного слова (фикс) → статика не рефлоит */
}
.utp-slot::before{ content:"\200B"; }   /* zero-width — якорь базовой линии (слот на baseline текста) */
.utp-slot__w{
  position:absolute;
  left:0; top:0;
  line-height:1.1em;
  white-space:nowrap;
  color:#D97757;                /* коралл логотипа Claude (Anthropic); токен --accent-fire не трогаем */
  will-change:transform;
}
.hero__lead{
  font-size:var(--fs-lead); color:var(--muted);
  max-width:600px; margin:0 auto 48px;
}
.hero__outcomes{ display:flex; flex-direction:column; gap:12px; margin-bottom:30px; }
.hero__outcomes li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:15px; color:var(--ink-2);
}
.hero__cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.hero__btn{ min-width:190px; }
.hero__btn-ic{ flex:0 0 auto; width:20px; height:20px; }
/* a11y: на белом --muted-2 (2.69:1) фейлит AA → --muted (5.0:1) */
.hero__note{ margin-top:14px; font-size:13px; color:var(--muted); }

/* --- полоса скринов «что получаете» --- */
.hero__shots{
  width:100%;
  max-width:1120px;
  margin:clamp(40px,4.2vw,52px) auto 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  align-items:start;
}
.shot{
  margin:0;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-md);
  overflow:hidden;
  background:#fff;
  /* запас от обрезки скруглением на retina */
  line-height:0;
}
.shot img{
  display:block;
  width:100%;
  height:auto;
  border-radius:inherit;
}

/* =================================================================
   S4 — NUMBERS BAR
   ================================================================= */
.numbers{ padding-bottom:var(--pad-section); }
.numbers__heading{
  text-align:center; font-size:var(--fs-h3); font-weight:700;
  color:var(--ink); margin-bottom:28px;
}
.numbers__bar{
  background:var(--bg-soft);
  border-radius:var(--r-xl);
  padding:36px 40px;
  display:grid; grid-template-columns:repeat(4,1fr);
  text-align:center;
}
.numbers__cell{ padding:0 16px; }
.numbers__cell + .numbers__cell{ border-left:1px solid var(--line); }
.numbers__num{
  display:block; font-size:40px; font-weight:700;
  color:var(--ink); line-height:1.1; margin-bottom:6px;
}
/* a11y: --accent-700 на белом фейлит WCAG (1.75:1) — оставляем тёмным как остальные цифры */
.numbers__num.accent{ color:var(--ink); }
.numbers__label{ font-size:14px; color:var(--muted); }

/* =================================================================
   S5 — SEGMENTS
   ================================================================= */
.segments{ padding-block:var(--pad-section); background:var(--bg); }
.segments__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--gap-card);
}
.segment{ display:flex; flex-direction:column; transition:.18s; }
.segment:hover{ border-color:#d4d7de; box-shadow:var(--sh-md); transform:translateY(-2px); }
.segment__chip{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px;
  border-radius:14px;
  background:var(--bg-soft);
  border:1px solid var(--line);
  color:var(--ink);
  margin-bottom:18px;
}
.segment__chip.accent{ color:var(--accent-700); }
.segment__title{ font-size:20px; font-weight:700; margin-bottom:12px; }
.segment__pain{ font-size:15px; color:var(--muted); margin-bottom:14px; }
.segment__result{
  display:flex; gap:10px; align-items:flex-start;
  font-size:15px; color:var(--ink-2); margin-bottom:18px;
}
.segment .pill--fact{ margin-top:auto; align-self:flex-start; }

/* точки-индикаторы свайпа сегментов — скрыты на десктопе, показаны на мобайле */
.segments__dots{ display:none; }
.segments__dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--line-2); border:0; padding:0; cursor:pointer;
  transition:background .2s, transform .2s;
}
.segments__dot.is-active{ background:var(--accent); transform:scale(1.25); }

.segments__cta{ text-align:center; margin-top:44px; }
.segments__cta p{ color:var(--muted); margin-bottom:18px; font-size:var(--fs-lead); }

/* =================================================================
   S6 — STEPS
   ================================================================= */
.steps{ padding-block:var(--pad-section); background:var(--bg-soft); }
.steps__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.step{ position:relative; padding-top:34px; }
.step__num{
  position:absolute; top:24px; right:28px;
  font-size:48px; font-weight:700; color:var(--line-2); line-height:1;
}
.step__title{ font-size:var(--fs-h3); margin-bottom:12px; }
.step p{ font-size:15px; color:var(--muted); }
.steps__cta{ text-align:center; margin-top:44px; }

/* =================================================================
   S7 — CHAIN
   ================================================================= */
.chain{ padding-block:var(--pad-section); background:var(--bg); }

.flow{
  display:flex; align-items:stretch; justify-content:center;
  gap:14px; flex-wrap:nowrap;
  margin-bottom:48px;
}
.flow__node{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:18px 20px;
  display:flex; flex-direction:column; justify-content:center;
  min-width:140px;
}
.flow__cap{ font-weight:700; color:var(--ink); font-size:17px; }
.flow__sub{ font-size:13px; color:var(--muted); margin-top:4px; }
.flow__node--result{
  background:var(--accent);
  border-color:var(--accent);
}
.flow__node--result .flow__cap{ color:var(--on-accent); }
.flow__arrow{ align-self:center; color:var(--muted-2); font-size:28px; line-height:1; flex:0 0 auto; }
.flow__branches{ display:flex; flex-direction:column; gap:10px; min-width:230px; }
.flow__branch{
  background:var(--bg-soft); border:1px solid var(--line);
  border-radius:var(--r-md); padding:12px 16px;
}
.flow__branch b{ display:block; font-size:14px; color:var(--ink); }
.flow__branch span{ font-size:13px; color:var(--muted); }

/* таблица результатов */
.restable{ padding:0; overflow:hidden; margin-bottom:48px; }
.restable__head{
  display:grid; grid-template-columns:1fr 1.3fr 1.4fr;
  background:var(--bg-soft); font-weight:700; color:var(--ink);
}
.restable__head span{ padding:16px 24px; }
.restable__row{
  display:grid; grid-template-columns:1fr 1.3fr 1.4fr;
  border-top:1px solid var(--line);
}
.restable__row span{ padding:18px 24px; font-size:15px; }
.restable__row span:first-child{ font-weight:600; color:var(--ink); }
.restable__row span:not(:first-child){ color:var(--muted); }
.restable__row span + span{ border-left:1px solid var(--line); }

/* манифест */
.manifesto{ text-align:center; padding:clamp(32px,5vw,56px); }
.manifesto__big{ font-size:var(--fs-h3); font-weight:700; color:#fff; margin-bottom:16px; }
.manifesto__txt{ color:var(--on-dark-mut); max-width:620px; margin:0 auto 16px; font-size:16px; }
.manifesto__accent{ color:var(--accent); font-weight:700; font-size:var(--fs-h3); }

/* =================================================================
   S8 — PRICING
   ================================================================= */
.pricing{ padding-block:var(--pad-section); background:var(--bg); }
.pricing .section-head p{ font-size:16px; }
.pricing__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:24px; align-items:stretch;
}
.price-card{ display:flex; flex-direction:column; position:relative; }
.price-card__name{ font-size:18px; font-weight:700; margin-bottom:10px; }
.price-card__price{ font-size:18px; color:var(--muted); display:flex; align-items:baseline; gap:4px; }
.price-card__num{ font-size:44px; font-weight:700; color:var(--ink); letter-spacing:-.02em; }
.price-card__per{ font-size:16px; color:var(--muted); }
.price-card__limit{ font-size:14px; color:var(--muted); margin-top:6px; }
.price-card__feats{ display:flex; flex-direction:column; gap:12px; margin-bottom:20px; }
.price-card__feats li{ display:flex; gap:10px; align-items:flex-start; font-size:15px; }
.price-card__feats b{ font-weight:700; }
.price-card__who{ font-size:14px; color:var(--muted); margin-bottom:20px; }
.price-card__btn{ width:100%; margin-top:auto; }
/* a11y: на белых карточках --muted-2 фейлит AA → --muted; .price-card--featured
   ниже переопределяет на --on-dark-mut (тёмный фон — там контраст ок) */
.price-card__anchor{ font-size:13px; color:var(--muted); margin-top:14px; text-align:center; }

/* выделенный «Про» */
.price-card--featured{
  color:var(--on-dark);
  transform:scale(1.04);
  box-shadow:var(--sh-lg);
  z-index:1;
}
.price-card--featured .price-card__name{ color:#fff; }
.price-card--featured .price-card__num{ color:#fff; }
.price-card--featured .price-card__price,
.price-card--featured .price-card__per,
.price-card--featured .price-card__limit,
.price-card--featured .price-card__who,
.price-card--featured .price-card__feats li{ color:var(--on-dark-mut); }
.price-card--featured .price-card__feats b{ color:#fff; }
.price-card--featured .badge--popular{
  position:absolute; top:-12px; right:24px;
}
.price-card--featured .price-card__anchor{ color:var(--on-dark-mut); }

.pricing__trust{
  display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:center;
  margin-top:40px; color:var(--muted); font-size:14px;
}
.pricing__trust span{ display:inline-flex; align-items:center; gap:8px; }
.trust-dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); flex:0 0 auto; }

/* =================================================================
   S9 — FAQ
   ================================================================= */
.faq{ padding-block:var(--pad-section); background:var(--bg-soft); }
.faq__list{ max-width:820px; margin-inline:auto; }
.faq-item{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md);
  margin-bottom:12px;
  transition:border-color .15s, box-shadow .15s;
}
.faq-item.is-open{ border-color:var(--ink); box-shadow:var(--sh-sm); }
.faq-item__q{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 24px;
  background:transparent; border:0; cursor:pointer;
  font-weight:600; font-size:17px; color:var(--ink);
  text-align:left;
}
.faq-item__icon{
  position:relative; width:18px; height:18px; flex:0 0 auto;
  transition:transform .2s;
}
.faq-item__icon::before,
.faq-item__icon::after{
  content:""; position:absolute; top:50%; left:50%;
  background:var(--muted); border-radius:2px;
  transform:translate(-50%,-50%);
}
.faq-item__icon::before{ width:14px; height:2px; }
.faq-item__icon::after{ width:2px; height:14px; transition:transform .2s, opacity .2s; }
.faq-item.is-open .faq-item__icon::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq-item__body{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-item__body p{
  padding:0 24px 20px;
  color:var(--muted); font-size:15px; line-height:1.6;
}

/* =================================================================
   S10 — AUTHOR
   ================================================================= */
.author{ padding-block:var(--pad-section); background:var(--bg); }
.author__grid{
  display:grid; grid-template-columns:0.4fr 0.6fr;
  gap:40px; align-items:center;
}
.author__aside{ text-align:center; }
.author__avatar{
  width:160px; height:160px; border-radius:24px;
  background:var(--bg-soft); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:48px; font-weight:700; color:var(--muted-2);
  margin:0 auto 18px;
}
.author__name{ font-weight:700; font-size:18px; color:var(--ink); }
.author__role{ font-size:14px; color:var(--muted); }

.author__main .eyebrow{ margin-bottom:16px; }
.author__main h2{ font-size:var(--fs-h2); margin-bottom:22px; }
.author__text{ display:flex; flex-direction:column; gap:14px; }
.author__text p{ font-size:16px; color:var(--ink-2); }
.author__contact{ margin-top:24px; }
.author__trust{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.author__trust li{
  background:var(--bg-soft); border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:8px 16px; font-size:13px; color:var(--muted);
}
.author__trust b{ color:var(--ink); }
.author__trust a{ color:var(--ink); text-decoration:underline; }

/* =================================================================
   S11 — GUARANTEES
   ================================================================= */
.guarantees{ padding-block:var(--pad-section); background:var(--bg-soft); }
.guarantees__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.guarantee__chip{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:14px;
  background:var(--bg-soft); border:1px solid var(--line);
  color:var(--ink); margin-bottom:18px;
}
.guarantee__chip.accent{ color:var(--accent-700); }
.guarantee__title{ font-size:var(--fs-h3); margin-bottom:12px; }
.guarantee p{ font-size:15px; color:var(--muted); }

/* =================================================================
   S12 — FINAL CTA (тёмная)
   ================================================================= */
.final{ padding-block:var(--pad-section); background:var(--ink); color:var(--on-dark); }
.final__inner{ max-width:760px; margin-inline:auto; text-align:center; }
.final h2{ color:#fff; font-size:var(--fs-h2); margin-bottom:14px; }
.final__sub{ color:var(--on-dark-mut); font-size:var(--fs-lead); margin-bottom:30px; }
.final__list{
  display:grid; grid-template-columns:1fr 1fr; gap:12px 28px;
  max-width:600px; margin:0 auto 34px; text-align:left;
}
.final__list li{ display:flex; gap:10px; align-items:flex-start; color:var(--on-dark-mut); font-size:15px; }
.final__cta{ display:inline-block; border-radius:var(--r-pill); box-shadow:0 0 80px rgba(255,203,0,.18); }
.final__note{ margin-top:20px; color:var(--on-dark-mut); font-size:14px; }
.final__sign{ margin-top:14px; font-size:15px; font-style:italic; color:var(--muted-2); }
.final__sign a{ color:var(--accent); }

/* =================================================================
   S13 — FOOTER
   ================================================================= */
.footer{ background:var(--ink); color:var(--on-dark-mut); padding-top:48px; }
.footer__inner{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:40px; flex-wrap:wrap; padding-bottom:40px;
}
.logo--footer .logo__word{ color:#fff; }
.footer__brand{ max-width:300px; }
.footer__desc{ margin-top:14px; font-size:14px; color:var(--on-dark-mut); }
.footer__links{ display:flex; gap:48px; flex-wrap:wrap; }
.footer__col{ display:flex; flex-direction:column; gap:10px; }
.footer__col-title{ font-size:13px; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; }
.footer__col a, .footer__plain{ font-size:14px; color:var(--on-dark-mut); }
.footer__col a:hover{ color:#fff; }
.footer__bottom{
  border-top:1px solid var(--line-dark);
  padding-block:20px;
  font-size:13px; color:var(--muted-2);
}

/* =================================================================
   S14 — STICKY MOBILE CTA
   ================================================================= */
.sticky-cta{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  transform:translateY(120%);
  transition:transform .25s ease;
}
.sticky-cta.is-visible{ transform:none; }
.sticky-cta .btn{ width:100%; }

/* =================================================================
   RESPONSIVE — планшет (<=1024px)
   ================================================================= */
@media (max-width:1024px){
  .logo__desc{ display:none; }
  .nav{ gap:20px; }
  .header__handle{ display:none; }
  .hero__grid{ grid-template-columns:1fr; gap:40px; }
  .hero__copy{ text-align:left; }
  .hero__shots{ order:2; }

  /* цепочка — вертикально */
  .flow{ flex-direction:column; align-items:stretch; gap:10px; }
  .flow__arrow{ transform:rotate(90deg); }
  .flow__branches{ min-width:0; }

  .author__grid{ grid-template-columns:1fr; gap:28px; }
  .author__aside{ text-align:center; }
}

/* =================================================================
   RESPONSIVE — мобайл (<=768px)
   ================================================================= */
@media (max-width:768px){
  body{ padding-bottom:76px; } /* место под sticky CTA */

  .container{ padding-inline:16px; }

  /* HERO-заголовок: одна центрированная колонка → 4 строки в DOM-порядке.
     font-size — override прямо в @media (токен --fs-hero не трогаем) */
  .hero__title{
    grid-template-columns:1fr;            /* одна колонка → DOM-порядок укладывается вертикально */
    max-width:none;
    column-gap:0;
    row-gap:8px;                          /* реальный воздух между 4 строками */
    justify-items:center;                 /* центрируем каждую строку в колонке */
    font-size:clamp(27px, 7.8vw, 33px);   /* 390→30.4px, 360→28.1px; «за 3 минуты в» не липнет к краям на 360 */
    line-height:1.12;
    letter-spacing:-.015em;
    margin:0 auto 24px;                   /* до подписи 24px */
  }
  .hero__title .utp-static{ text-align:center; white-space:nowrap; line-height:1.12; }   /* перебиваем десктопный right-align */
  .hero__title .utp-slot{
    display:block;               /* своя строка, центрирование по ширине */
    text-align:center;
    margin:0 auto;               /* центрируем фикс-ширинный бокс слота */
    height:1.12em;               /* синхрон с line-height строки — иначе baseline разъезжается */
    line-height:1.12em;
  }
  .hero__title .utp-slot__w{
    left:0; right:0;
    width:max-content;        /* спан сжимается по тексту → offsetWidth = ширина слова, замер ширины слота в app.js остаётся корректным */
    margin-inline:auto;       /* центрируем спан внутри фикс-ширинного слота (absolute-centering авто-марджинами) */
    text-align:center;
    line-height:1.12em;       /* слот-слово на той же базовой линии, что статика */
  }

  /* подпись — на ширину контейнера, не зажимать 600px */
  .hero__lead{
    font-size:16px;
    line-height:1.5;
    max-width:none;
    margin:0 auto 28px;          /* до кнопок 28px (было 48px — провал воздуха) */
  }

  /* кнопки — вертикальный full-width стек (yClients-паттерн) */
  .hero__cta{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    width:100%;
    max-width:340px;             /* не растягивать кнопки на весь экран на крупных телефонах */
    margin:0 auto;
  }
  .hero__cta .hero__btn{
    min-width:0;                 /* снять десктопный min-width:190px */
    width:100%;
  }

  /* микроподпись */
  .hero__note{ margin-top:12px; font-size:12px; }

  /* полоса скринов → сетка 2×2 */
  .hero__shots{
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-top:32px;
    max-width:none;
  }

  .nav{ display:none; }
  .header__actions{ display:none; }
  .burger{ display:flex; }

  /* segments — горизонтальный свайп */
  .segments__grid{
    grid-auto-flow:column;
    grid-auto-columns:82vw;
    grid-template-columns:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:14px;
    margin-inline:-16px;
    padding:4px 16px 16px;
    -webkit-overflow-scrolling:touch;
  }
  .segment{ scroll-snap-align:center; }

  /* ряд точек-индикаторов под лентой сегментов */
  .segments__dots{
    display:flex; justify-content:center; gap:8px;
    margin-top:16px;
  }

  .steps__grid,
  .guarantees__grid,
  .pricing__grid{ grid-template-columns:1fr; }

  .step__num{ position:static; display:block; margin-bottom:8px; }
  .step{ padding-top:28px; }

  /* numbers 2x2 */
  .numbers__bar{
    grid-template-columns:1fr 1fr;
    gap:24px 0; padding:28px 20px;
  }
  .numbers__cell{ padding:0 12px; }
  .numbers__cell:nth-child(odd){ border-left:0; }
  .numbers__cell:nth-child(even){ border-left:1px solid var(--line); }
  .numbers__num{ font-size:32px; }

  /* таблица результатов → карточки */
  .restable__head{ display:none; }
  .restable__row{ grid-template-columns:1fr; padding:6px 0; }
  .restable__row span{ padding:10px 20px; }
  .restable__row span + span{ border-left:0; }
  .restable__row span::before{
    content:attr(data-th);
    display:block; font-size:12px; font-weight:700;
    color:var(--muted-2); text-transform:uppercase; letter-spacing:.03em;
    margin-bottom:4px;
  }
  .restable__row span:first-child::before{ content:none; }
  .restable__row + .restable__row{ border-top:8px solid var(--bg-soft); }

  /* pricing — «Про» первой, scale сброшен */
  .price-card--featured{ transform:none; order:-1; }
  .price-card--featured .badge--popular{ position:static; margin-bottom:14px; align-self:flex-start; }

  .final__list{ grid-template-columns:1fr; }

  /* крупные кнопки: разрешаем перенос текста, чтобы неразрывная подпись
     не распирала колонку и не вызывала горизонтальный скролл на узких экранах */
  .btn--lg{
    white-space:normal;
    height:auto;
    min-height:52px;
    padding-top:14px;
    padding-bottom:14px;
    line-height:1.25;
  }
  /* страховка от min-width:auto у grid/flex-элементов */
  .hero__copy,
  .hero__grid > *{ min-width:0; }

  .footer__inner{ flex-direction:column; gap:28px; }
  .footer__links{ gap:28px; }

  .sticky-cta{ display:block; }
}

/* =================================================================
   ДОСТУПНОСТЬ — reduced motion
   ================================================================= */
@media (prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto !important; }
  .marquee__track{ animation:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .btn,.segment,.faq-item__body,.sticky-cta{ transition:none; }
}