/* ============================================================
   Лендинг продукта — стили.
   Токены скопированы из 05_Products/design/tokens.css (канон линейки).
   Правило: в разметке и правилах ниже hex не хардкодится — только эти переменные.
   Шрифт системный: канон линейки веб-шрифты не грузит (design-guidelines §1.1).
   ============================================================ */

:root{
  /* Нейтраль — Slate */
  --bg:#F8FAFC;
  --surface:#FFFFFF;
  --sunken:#F1F5F9;
  --border:#E2E8F0;
  --border-strong:#CBD5E1;
  --text:#0F172A;
  --text-2:#475569;
  --text-muted:#94A3B8;

  /* Primary — Indigo */
  --primary:#6366F1;
  --primary-hover:#4F46E5;
  --primary-subtle:#EEF2FF;

  /* Accent — Violet (точечно) */
  --accent:#7C3AED;
  --accent-hover:#6D28D9;
  --accent-subtle:#F5F3FF;

  /* Семантика */
  --success:#10B981;
  --warning:#F59E0B;
  --warning-subtle:#FEF3C7;
  --danger:#DC2626;

  /* Тёмная плита (только секцией) */
  --ink:#0B1120;
  --ink-2:#1E293B;
  --on-ink:#F8FAFC;
  --on-ink-2:#94A3B8;
  --forecast:#A5B4FC;       /* индиго-300 — фокус-ринг на тёмном */

  /* Затемнение просмотрщика скриншотов — тот же slate, что и в тенях */
  --overlay:rgba(15,23,42,.94);

  /* Шрифты */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* Радиусы */
  --r-btn:8px;
  --r-chip:6px;
  --r-card:20px;
  --r-lg:20px;
  --r-pill:999px;
  --r-inner:14px;           /* вложенный элемент — радиус меньше внешнего */

  /* Тени */
  --shadow-input:0 1px 2px rgba(15,23,42,.04);
  --shadow-card:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.06);
  --shadow-dropdown:0 4px 12px rgba(15,23,42,.08),0 2px 4px rgba(15,23,42,.06);
  --shadow-lg:0 12px 28px rgba(15,23,42,.10),0 4px 10px rgba(15,23,42,.06);

  /* Отступы — сетка 4px */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --space-12:48px; --space-16:64px; --space-20:80px;

  /* Раскладка */
  --container:1160px;
  --container-wide:1320px;
  --pad-x:32px;
  --header-h:64px;

  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- База ---------- */

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

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:16px;
  line-height:1.6;
  overflow-x:hidden;
}

h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;height:auto;display:block}

a{color:var(--primary-hover);text-decoration:none}
a:hover{text-decoration:underline}

:focus-visible{
  outline:2px solid var(--primary-hover);
  outline-offset:3px;
  border-radius:2px;
}
.section--ink :focus-visible,
.site-header :focus-visible,
.lightbox :focus-visible{outline-color:var(--forecast)}

.visually-hidden{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:120;
  background:var(--surface);color:var(--text);
  padding:12px 20px;border-radius:0 0 var(--r-btn) 0;
  font-size:14px;font-weight:600;
}
.skip-link:focus{left:0}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--pad-x);
}
.container--wide{max-width:var(--container-wide)}

/* ---------- Типографика ---------- */

h1{
  font-size:clamp(30px,4.6vw,48px);
  line-height:1.1;
  font-weight:800;
  letter-spacing:-.02em;
}
h2{
  font-size:clamp(26px,3.2vw,32px);
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.02em;
}
h3{
  font-size:clamp(20px,2.1vw,22px);
  line-height:1.25;
  font-weight:700;
  letter-spacing:-.01em;
}

.lead{
  font-size:clamp(17px,1.5vw,18px);
  line-height:1.5;
  color:var(--text-2);
}
.lead--strong{color:var(--text);font-weight:600}

p+p{margin-top:var(--space-4)}

.footnote{
  font-size:13px;
  line-height:1.5;
  color:var(--text-2);
}
.footnote--under-table{margin-top:var(--space-4);max-width:760px}

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

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  height:48px;
  padding:0 var(--space-6);
  border:1px solid transparent;
  border-radius:var(--r-btn);
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  line-height:1;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease);
}
.btn:hover{text-decoration:none}
.btn--sm{height:36px;padding:0 var(--space-4);font-size:14px;white-space:nowrap}
.btn--lg{height:52px;padding:0 var(--space-8);font-size:16px}

.btn--primary{background:var(--primary-hover);color:var(--surface)}
.btn--primary:hover{filter:brightness(.92)}

.btn--accent{background:var(--accent);color:var(--surface)}
.btn--accent:hover{background:var(--accent-hover)}

.btn--onink{
  background:transparent;
  border-color:var(--ink-2);
  color:var(--on-ink);
}
.btn--onink:hover{background:var(--ink-2)}

.cta{margin-top:var(--space-8)}
.cta__note{
  margin-top:var(--space-3);
  font-size:14px;
  line-height:1.55;
  color:var(--text-2);
  max-width:520px;
}
.section--ink .cta__note{color:var(--on-ink-2)}

.cta--section{
  margin-top:var(--space-12);
  padding-top:var(--space-8);
  border-top:1px solid var(--border);
}

/* ---------- Шапка ---------- */

.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:var(--ink);
  border-bottom:1px solid var(--ink-2);
}
.header-inner{
  display:flex;
  align-items:center;
  gap:var(--space-8);
  height:var(--header-h);
}
.logo{
  font-size:18px;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--on-ink);
}
.logo:hover{text-decoration:none;color:var(--on-ink)}

.site-nav{display:flex;gap:var(--space-6);margin-right:auto}
.site-nav a{
  font-size:14px;
  font-weight:500;
  color:var(--on-ink-2);
  transition:color .16s var(--ease);
}
.site-nav a:hover{color:var(--on-ink);text-decoration:none}

.nav-toggle{
  display:none;
  width:40px;height:40px;
  margin-left:auto;
  padding:0;
  background:transparent;
  border:1px solid var(--ink-2);
  border-radius:var(--r-btn);
  cursor:pointer;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
}
.nav-toggle__bar{
  display:block;
  width:18px;height:2px;
  background:var(--on-ink);
  border-radius:2px;
}
.mobile-nav{
  display:none;
  flex-direction:column;
  padding:var(--space-2) var(--pad-x) var(--space-5);
  background:var(--ink);
  border-top:1px solid var(--ink-2);
}
.mobile-nav a{
  padding:var(--space-3) 0;
  font-size:16px;
  font-weight:500;
  color:var(--on-ink);
  border-bottom:1px solid var(--ink-2);
}

/* ---------- Секции ---------- */

.section{padding:var(--space-20) 0}
.section--sunken{background:var(--sunken)}
.section--ink{background:var(--ink);color:var(--on-ink)}
.section--ink h2,.section--ink h3{color:var(--on-ink)}
.section--ink .lead{color:var(--on-ink-2)}

.section-head{max-width:820px;margin-bottom:44px}
.section-head--narrow{max-width:680px}
.section-head h2+.lead{margin-top:var(--space-5)}

/* ---------- Экран 1. Первый экран ---------- */

.hero{
  padding:clamp(48px,7vw,88px) 0 clamp(56px,7vw,96px);
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(32px,4vw,64px);
  align-items:center;
}
.hero-copy{max-width:620px}
.hero h1{color:var(--on-ink)}
.hero h1 strong{color:var(--forecast);font-weight:800}
.hero .lead{margin-top:var(--space-6)}
.hero-fineprint{
  margin-top:var(--space-6);
  font-size:14px;
  color:var(--on-ink-2);
}
.hero-anchor{
  display:inline-block;
  margin-top:var(--space-8);
  padding-bottom:2px;
  font-size:15px;
  font-weight:600;
  color:var(--on-ink);
  border-bottom:1px solid var(--ink-2);
  transition:border-color .16s var(--ease);
}
.hero-anchor:hover{text-decoration:none;border-bottom-color:var(--forecast)}

.hero-visual{
  position:relative;
  border-radius:var(--r-lg);
  border:1px solid var(--ink-2);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.hero-visual img{
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  object-position:top center;
  opacity:.7;
  filter:saturate(.75);
}
.hero-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(11,17,32,0) 48%,rgba(11,17,32,.82) 100%);
}

/* ---------- Скриншоты ---------- */

.shot{margin:0}
.shot__frame{
  display:block;
  width:100%;
  padding:6px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  cursor:zoom-in;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
}
.shot__frame:hover{border-color:var(--border-strong);box-shadow:var(--shadow-lg)}
.shot__frame img{
  width:100%;
  /* Кадры сняты целыми страницами и очень высокие: в макете показываем
     осмысленное окно кадра, целиком экран открывается по клику. */
  aspect-ratio:var(--ratio,4 / 3);
  object-fit:cover;
  object-position:center var(--pos,0%);
  border-radius:var(--r-inner);
  background:var(--sunken);
}
.shot--mobile{--ratio:780 / 1688}

/* Подсказка, что кадр открывается целиком */
.shot__frame{position:relative}
.shot__hint{
  position:absolute;
  right:var(--space-4);
  bottom:var(--space-4);
  padding:6px var(--space-3);
  background:var(--surface);
  border:1px solid var(--border-strong);
  border-radius:var(--r-pill);
  box-shadow:var(--shadow-card);
  font-size:12px;
  font-weight:600;
  color:var(--text-2);
  pointer-events:none;
}
.shot__frame:hover .shot__hint{color:var(--primary-hover);border-color:var(--primary)}
/* в стеке правый нижний угол занят телефоном — подсказка уходит влево */
.shot-stack > .shot:first-child .shot__hint{right:auto;left:var(--space-4)}
.shot__caption{
  margin-top:var(--space-4);
  font-size:14px;
  line-height:1.55;
  color:var(--text-2);
  max-width:820px;
}
.shot--hero-size .shot__frame{padding:8px;box-shadow:var(--shadow-lg)}
.shot--hero-size .shot__caption{margin-top:var(--space-5);font-size:15px}

.shot--mobile{width:100%;max-width:290px}
.shot--mobile .shot__frame{padding:8px;border-radius:28px}
.shot--mobile .shot__frame img{border-radius:20px}
.shot--mobile .shot__caption{font-size:13px}

.disclaimer{
  margin-top:var(--space-10);
  padding:var(--space-4) var(--space-5);
  max-width:760px;
  background:var(--warning-subtle);
  border-radius:var(--r-chip);
  font-size:13px;
  line-height:1.5;
  color:var(--text-2);
}

/* ---------- Места под ролики ---------- */

.videoslot{
  padding:var(--space-5) var(--space-6);
  background:var(--primary-subtle);
  border:1px solid var(--border);
  border-radius:var(--r-card);
}
.videoslot video{
  width:100%;
  border-radius:var(--r-inner);
  margin-bottom:var(--space-4);
  display:block;
}
.videoslot__label{
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--primary-hover);
}
.videoslot__text{
  margin-top:var(--space-3);
  font-size:15px;
  line-height:1.55;
  color:var(--text-2);
}
.videoslot--inset{margin-top:var(--space-6)}
.videoslot--wide{max-width:820px;margin-top:var(--space-10)}

/* ---------- Экран 3. Знакомо ---------- */

.painlist{max-width:900px;border-top:1px solid var(--border-strong)}
.painlist li{
  position:relative;
  padding:var(--space-5) 0 var(--space-5) var(--space-8);
  border-bottom:1px solid var(--border);
  font-size:clamp(16px,1.5vw,17px);
  line-height:1.55;
  color:var(--text);
}
.painlist li::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--text-2);
}
.closing-line{
  max-width:820px;
  margin-top:var(--space-10);
  font-size:clamp(17px,1.6vw,18px);
  line-height:1.5;
  font-weight:600;
  color:var(--text);
}

/* ---------- Экран 4/5/8. Блоки «текст + экран» ---------- */

.feature{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(32px,4vw,64px);
  align-items:center;
  padding:var(--space-12) 0;
  border-top:1px solid var(--border);
}
.feature:first-child{border-top:0}
.feature--reverse{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.feature--reverse .feature__text{order:2}
.feature--reverse .feature__shot{order:1}
.feature__text p{margin-top:var(--space-4);color:var(--text-2);font-size:16px;line-height:1.6}
.feature__text p.footnote{margin-top:var(--space-5);color:var(--text-2)}
.feature__text strong{color:var(--text);font-weight:600}
.feature__shot{margin:0}
/* Десктопный кадр + телефон внахлёст на его угол */
.shot-stack{position:relative;margin-bottom:120px}
.shot-stack__phone{
  position:absolute;
  right:var(--space-6);
  bottom:-72px;
  width:180px;
  max-width:180px;
  z-index:2;
}
.shot-stack__phone .shot__caption{font-size:12px;margin-top:var(--space-3)}
.shot-stack--sm{margin-bottom:72px}

/* Кадр «Отдел продаж» разрезан на части: широкие полосы под сеткой блока */
.feature__extra{grid-column:1 / -1}
.shot-row{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--space-8);
  margin-top:var(--space-10);
}
/* широкие полосы: подсказка «Крупнее» не должна лежать на цифрах таблицы */
.shot-row .shot__frame{padding-bottom:40px}
.shot-row .shot__hint{bottom:var(--space-2)}
.footnote--shot-note{margin-top:var(--space-6);max-width:820px}
.shot-stack--sm .shot-stack__phone{width:132px;max-width:132px;right:var(--space-4);bottom:-48px}

.section--sunken .shot__frame,
.section--sunken .videoslot{background:var(--surface)}
.section--sunken .videoslot{background:var(--primary-subtle)}

.state-line{font-size:15px}
.state-line strong{color:var(--text)}

.status{
  display:inline-block;
  margin-left:var(--space-3);
  padding:4px var(--space-3);
  border-radius:var(--r-pill);
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  vertical-align:middle;
  white-space:nowrap;
}
.status--wip{background:var(--warning-subtle);color:var(--text)}
.status--idea{background:var(--sunken);color:var(--text-2);border:1px solid var(--border)}

.next-idea{
  max-width:820px;
  margin-top:var(--space-12);
  padding-top:var(--space-10);
  border-top:1px solid var(--border);
}
.next-idea--first{margin-top:0;padding-top:0;border-top:0}
.next-idea p{margin-top:var(--space-4);color:var(--text-2)}
.pullquote{
  margin:var(--space-6) 0;
  padding:var(--space-6);
  background:var(--accent-subtle);
  border-radius:var(--r-card);
}
.pullquote p{
  margin:0;
  font-size:clamp(18px,2vw,20px);
  line-height:1.4;
  color:var(--text);
}
.pullquote strong{font-weight:700}

/* ---------- Экран 5. Доказательства ---------- */

.proof-lead{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(24px,3vw,48px);
  align-items:start;
  margin-bottom:var(--space-10);
}
.proof-lead__text p{color:var(--text-2)}
.proof-lead__text strong{color:var(--text);font-weight:600}

.proof-list{
  max-width:900px;
  margin-top:var(--space-12);
  border-top:1px solid var(--border-strong);
}
.proof-item{
  padding:var(--space-6) 0;
  border-bottom:1px solid var(--border);
}
.proof-item__head{
  font-size:17px;
  font-weight:700;
  line-height:1.35;
  color:var(--text);
}
.proof-item p+p{margin-top:var(--space-3);color:var(--text-2);font-size:15px}

/* ---------- Экран 6. Таблица ---------- */

.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--r-card);
}
.compare{
  width:100%;
  min-width:760px;
  border-collapse:collapse;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  overflow:hidden;
}
.compare thead th{
  padding:var(--space-4) var(--space-5);
  background:var(--sunken);
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text-2);
  text-align:left;
  border-bottom:1px solid var(--border);
}
.compare thead th.compare__ours{color:var(--primary-hover);background:var(--primary-subtle)}
.compare tbody th{
  width:24%;
  padding:var(--space-5);
  text-align:left;
  vertical-align:top;
  font-size:15px;
  font-weight:600;
  color:var(--text);
  border-top:1px solid var(--border);
}
.compare td{
  padding:var(--space-5);
  vertical-align:top;
  font-size:15px;
  line-height:1.55;
  color:var(--text-2);
  border-top:1px solid var(--border);
}
.compare td.compare__ours{
  background:var(--primary-subtle);
  color:var(--text);
}

/* ---------- Экран 7. РОП ---------- */

.rop{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(32px,4vw,64px);
  align-items:center;
}
.rop__text p{margin-top:var(--space-4);color:var(--text-2)}
.rop__text .lead{margin-top:var(--space-5)}
.rop__text strong{color:var(--text);font-weight:600}
.rop h2+.lead{margin-top:var(--space-5)}

/* ---------- Экран 9. Шаги ---------- */

.steps{max-width:900px;border-top:1px solid var(--border-strong)}
.step{
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  gap:var(--space-6);
  padding:var(--space-8) 0;
  border-bottom:1px solid var(--border);
}
.step__num{
  font-size:30px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--primary);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.step__body p{margin-top:var(--space-3);color:var(--text-2)}

/* ---------- Экран 10. Этап ---------- */

.stage{max-width:820px}
.stage .lead{margin-top:var(--space-5)}
.stage p{margin-top:var(--space-5);color:var(--text-2)}
.stage__accent{
  margin-top:var(--space-6);
  padding:var(--space-5) var(--space-6);
  background:var(--accent-subtle);
  border-radius:var(--r-card);
  font-size:clamp(18px,2vw,20px);
  line-height:1.4;
  color:var(--text);
}
.stage__accent strong{color:var(--accent-hover);font-weight:700}

/* ---------- Экран 11. Не подходим ---------- */

.notfit{max-width:900px;border-top:1px solid var(--border-strong)}
.notfit li{
  padding:var(--space-5) 0;
  border-bottom:1px solid var(--border);
  font-size:16px;
  line-height:1.6;
  color:var(--text-2);
}
.notfit strong{color:var(--text);font-weight:600}

/* ---------- Экран 12. Автор ---------- */

.author{display:grid;gap:clamp(24px,3vw,48px);grid-template-columns:minmax(0,1fr)}
.author--with-photo{grid-template-columns:minmax(0,280px) minmax(0,1fr)}
.author__photo{margin:0}
.author__photo img{border-radius:var(--r-card);width:100%}
.author__text{max-width:820px}
.author__name{font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.author__role{margin-top:var(--space-1);font-size:15px;color:var(--text-2)}
.author__text p{margin-top:var(--space-5);color:var(--text-2)}
.author__quote{
  margin-top:var(--space-8);
  padding:var(--space-2) 0 var(--space-2) var(--space-6);
  border-left:2px solid var(--border-strong);
}
.author__quote p{
  margin:0;
  font-size:17px;
  line-height:1.55;
  color:var(--text);
}
.author__facts{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2) var(--space-5);
  margin-top:var(--space-8);
  font-size:15px;
  color:var(--text-2);
}
.author__facts li{display:flex;align-items:center;gap:var(--space-5)}
.author__facts li+li::before{
  content:"·";
  color:var(--text-2);
  margin-left:calc(var(--space-5) * -1 + 6px);
}

.clients{margin-top:var(--space-12)}
.clients__caption{font-size:14px;color:var(--text-2)}
.clients__row{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3);
  margin-top:var(--space-5);
}
.clients__row li{
  padding:var(--space-2) var(--space-4);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-chip);
  font-size:14px;
  font-weight:500;
  color:var(--text-2);
}
.clients .footnote{margin-top:var(--space-5);max-width:760px}

/* ---------- Экран 13. Вопросы ---------- */

.faq{max-width:900px;border-top:1px solid var(--border-strong)}
.faq__item{border-bottom:1px solid var(--border)}
.faq__item summary{
  position:relative;
  padding:var(--space-5) var(--space-10) var(--space-5) 0;
  font-size:clamp(16px,1.5vw,17px);
  font-weight:600;
  line-height:1.4;
  color:var(--text);
  cursor:pointer;
  list-style:none;
  transition:color .16s var(--ease);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--primary-hover)}
.faq__item summary::after{
  content:"+";
  position:absolute;
  right:var(--space-3);
  top:50%;
  transform:translateY(-50%);
  font-size:22px;
  font-weight:400;
  line-height:1;
  color:var(--text-2);
}
.faq__item[open] summary::after{content:"–"}
.faq__answer{
  padding:0 var(--space-10) var(--space-6) 0;
  max-width:760px;
}
.faq__answer p{color:var(--text-2)}

/* ---------- Экран 14. Финальный CTA ---------- */

.final-cta{padding:clamp(64px,8vw,96px) 0}
.final-cta__inner{max-width:720px}
.final-cta .lead{margin-top:var(--space-5)}

/* ---------- Экран 15. Подвал ---------- */

.site-footer{padding:var(--space-16) 0 var(--space-10);color:var(--on-ink-2)}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);
  gap:var(--space-10);
}
.footer-logo{font-size:18px;font-weight:800;color:var(--on-ink)}
.footer-about{margin-top:var(--space-3);font-size:14px;line-height:1.55;max-width:360px}
.footer-col__title{
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--on-ink-2);
}
.footer-nav{margin-top:var(--space-4);display:grid;gap:var(--space-3)}
.footer-nav a,.footer-tg{color:var(--on-ink);font-size:14px}
.footer-tg{display:inline-block;margin-top:var(--space-4);word-break:break-word}
.footer-bottom{
  margin-top:var(--space-12);
  padding-top:var(--space-6);
  border-top:1px solid var(--ink-2);
  font-size:13px;
  color:var(--on-ink-2);
}

/* ---------- Просмотрщик скриншотов ---------- */

.lightbox{
  position:fixed;
  inset:0;
  z-index:100;
  background:var(--overlay);
  display:flex;
  flex-direction:column;
}
.lightbox[hidden]{display:none}
.lightbox__bar{
  display:flex;
  align-items:flex-start;
  gap:var(--space-6);
  padding:var(--space-4) var(--space-5);
  border-bottom:1px solid var(--ink-2);
}
.lightbox__caption{
  flex:1 1 auto;
  font-size:14px;
  line-height:1.5;
  color:var(--on-ink-2);
}
.lightbox__close{
  flex:0 0 auto;
  height:36px;
  padding:0 var(--space-4);
  background:transparent;
  border:1px solid var(--ink-2);
  border-radius:var(--r-btn);
  color:var(--on-ink);
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:background-color .16s var(--ease);
}
.lightbox__close:hover{background:var(--ink-2)}
.lightbox__stage{
  flex:1 1 auto;
  overflow:auto;
  padding:var(--space-5);
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.lightbox__stage img{
  max-width:100%;
  border-radius:var(--r-inner);
  cursor:zoom-in;
  background:var(--surface);
}
.lightbox__stage.is-zoomed{align-items:flex-start;justify-content:flex-start}
.lightbox__stage.is-zoomed img{max-width:none;width:auto;cursor:zoom-out}
body.is-locked{overflow:hidden}

/* ============================================================
   Адаптив
   ============================================================ */

@media (max-width:1200px){
  .feature{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
}

@media (max-width:1024px){
  :root{--pad-x:24px}
  .section{padding:var(--space-16) 0}
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
  .proof-lead{grid-template-columns:minmax(0,1fr)}
  .shot-stack__phone{width:150px;max-width:150px}
  .shot-stack--sm .shot-stack__phone{width:118px;max-width:118px}
}

@media (max-width:900px){
  .site-nav{display:none}
  .header-inner .btn--sm{display:none}
  .nav-toggle{display:flex}
  .mobile-nav:not([hidden]){display:flex}

  .hero-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-10)}
  .hero-copy{max-width:none}
  .hero-visual{max-width:640px}

  .feature{
    grid-template-columns:minmax(0,1fr);
    gap:var(--space-8);
    padding:var(--space-10) 0;
  }
  .feature--reverse{grid-template-columns:minmax(0,1fr)}
  .feature--reverse .feature__text{order:0}
  .feature--reverse .feature__shot{order:0}

  .shot-stack,.shot-stack--sm{margin-bottom:0}
  .shot-stack__phone,
  .shot-stack--sm .shot-stack__phone{
    position:static;
    width:100%;
    max-width:240px;
    margin-top:var(--space-6);
  }
  .shot-stack__phone .shot__caption{font-size:13px}

  .rop{grid-template-columns:minmax(0,1fr);gap:var(--space-8)}
  .rop__shot{max-width:640px}

  .footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-8)}
  .footer-col:first-child{grid-column:1 / -1}
}

@media (max-width:768px){
  :root{--pad-x:16px}
  .section{padding:56px 0}
  .section-head{margin-bottom:var(--space-8)}

  .shot--mobile{max-width:260px}

  .step{grid-template-columns:56px minmax(0,1fr);gap:var(--space-4);padding:var(--space-6) 0}
  .step__num{font-size:24px}

  /* Таблица отстройки складывается в карточки — вместо бокового скролла */
  .table-scroll{overflow:visible}
  .compare{min-width:0;display:block;border:0;background:transparent}
  .compare thead{display:none}
  .compare tbody{display:block}
  .compare tbody tr{
    display:block;
    margin-bottom:var(--space-4);
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--r-card);
    overflow:hidden;
  }
  .compare tbody th{
    display:block;
    width:auto;
    padding:var(--space-4) var(--space-5);
    background:var(--sunken);
    border-top:0;
    font-size:14px;
  }
  .compare td{
    display:block;
    padding:var(--space-4) var(--space-5);
    border-top:1px solid var(--border);
    font-size:14px;
  }
  .compare td::before{
    content:attr(data-label);
    display:block;
    margin-bottom:var(--space-1);
    font-size:12px;
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--text-2);
  }
  .compare td.compare__ours::before{color:var(--primary-hover)}

  .btn--lg{width:100%;padding:0 var(--space-5)}
  .cta__note{max-width:none}
  .faq__answer{padding-right:0}
}

@media (max-width:560px){
  .btn--lg{height:auto;min-height:52px;padding:14px var(--space-4);line-height:1.3;font-size:15px}
  .painlist li{font-size:16px}
  .videoslot{padding:var(--space-4) var(--space-5)}
  .pullquote,.stage__accent{padding:var(--space-5)}
  .footer-grid{grid-template-columns:minmax(0,1fr)}
  .author__quote{padding-left:var(--space-5)}
  .clients__row{gap:var(--space-2)}
}

/* Телефон в ландшафте: высота маленькая — режем вертикальные отступы */
@media (max-height:520px) and (orientation:landscape){
  .hero{padding:var(--space-10) 0}
  .section{padding:var(--space-12) 0}
  .lightbox__stage{padding:var(--space-3)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}

@media print{
  .site-header,.lightbox,.nav-toggle{display:none}
  .section--ink{background:var(--surface);color:var(--text)}
}

/* ============================================================
   Лендинг /aischool — надстройка над базой прежнего лендинга
   ============================================================ */

/* Заголовки разделов в документе Антона — H4/H5, визуально как H2/H3 */
h4,h5{margin:0}
h4{font-size:clamp(26px,3.2vw,34px);line-height:1.15;font-weight:800;letter-spacing:-.02em}
h5{font-size:clamp(19px,2.1vw,22px);line-height:1.3;font-weight:700;letter-spacing:-.01em}
.section--ink h4,.section--ink h5{color:var(--on-ink)}
.section-head h4+.lead{margin-top:var(--space-5)}

.logo--mark{font-size:15px;font-weight:700;color:var(--on-ink-2);white-space:nowrap}
.site-nav{gap:var(--space-5)}
.site-nav a{white-space:nowrap}

/* ---------- Первый экран ---------- */
.hero__title{
  font-size:clamp(30px,4.6vw,48px);
  line-height:1.1;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--on-ink);
}
.hero__big{
  margin-top:var(--space-6);
  font-size:clamp(20px,2.4vw,27px);
  line-height:1.3;
  font-weight:600;
  color:var(--forecast);
}
.hero__small{
  margin-top:var(--space-6);
  font-size:clamp(16px,1.4vw,17px);
  line-height:1.55;
  color:var(--on-ink-2);
  max-width:560px;
}
.hero .cta{margin-top:var(--space-8)}
.cta--center{display:flex;justify-content:center;margin-top:var(--space-12)}

/* ---------- Чёрный ящик: карточки ---------- */
.pains{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-6);
}
.pain{
  position:relative;
  padding:var(--space-8);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
}
.pain__num{
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--primary-hover);
  font-variant-numeric:tabular-nums;
}
.pain__num::before{content:"0"}
.pain__title{margin-top:var(--space-2)}
.pain__text{margin-top:var(--space-4);color:var(--text-2);line-height:1.6}
.pain__fix{
  margin-top:var(--space-5);
  padding:var(--space-4) var(--space-5);
  background:var(--primary-subtle);
  border-radius:var(--r-inner);
  color:var(--text);
  line-height:1.55;
  font-weight:500;
}
.pain__arrow{color:var(--primary-hover);font-weight:700;margin-right:6px}
.pain--wide{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--space-8);
  align-items:start;
  background:var(--ink);
  border-color:var(--ink-2);
  color:var(--on-ink);
}
.pain--wide .pain__title{margin-top:0;color:var(--on-ink)}
.pain--wide .pain__text{color:var(--on-ink-2)}
.pain--wide .pain__fix{margin-top:0;background:var(--ink-2);color:var(--on-ink)}
.pain--wide .pain__arrow{color:var(--forecast)}

/* ---------- Модули: текст + карусель, чередование ---------- */
.module{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(32px,4vw,64px);
  align-items:center;
  padding:var(--space-12) 0;
  border-top:1px solid var(--border);
}
.module:first-child{border-top:0;padding-top:0}
.module--reverse .module__text{order:2}
.module--reverse .module__shots{order:1}
.module__label{
  margin-top:var(--space-5);
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--primary-hover);
}
.module__label+p{margin-top:var(--space-2)}
.module__text p{color:var(--text-2);line-height:1.6}
.module__text h5+.module__label{margin-top:var(--space-6)}

/* ---------- Карусель ---------- */
.carousel{position:relative}
.carousel__viewport{overflow:hidden;border-radius:var(--r-lg)}
.carousel__track{
  display:flex;
  transition:transform .4s var(--ease);
  will-change:transform;
}
.carousel__slide{flex:0 0 100%;min-width:0}
.carousel__slide .shot__frame img{
  aspect-ratio:var(--ratio,16 / 11);
  object-position:center var(--pos,0%);
}
.carousel__nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-5);
  margin-top:var(--space-5);
}
.carousel__btn{
  flex:0 0 auto;
  width:56px;height:56px;
  border-radius:var(--r-pill);
  border:1px solid var(--border-strong);
  background:var(--surface);
  color:var(--text);
  font-size:24px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  box-shadow:var(--shadow-card);
  transition:background-color .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease);
}
.carousel__btn:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:var(--surface)}
.carousel__dots{
  display:flex;
  gap:var(--space-3);
  list-style:none;
  padding:0;margin:0;
}
.carousel__dot{
  width:16px;height:16px;
  padding:0;
  border-radius:var(--r-pill);
  border:2px solid var(--border-strong);
  background:var(--surface);
  cursor:pointer;
  transition:background-color .16s var(--ease),border-color .16s var(--ease),transform .16s var(--ease);
}
.carousel__dot[aria-current="true"]{background:var(--primary-hover);border-color:var(--primary-hover);transform:scale(1.25)}
.carousel__counter{
  font-size:14px;
  font-weight:600;
  color:var(--text-2);
  font-variant-numeric:tabular-nums;
  min-width:3.2em;
  text-align:center;
}
.section--sunken .carousel__btn,.section--sunken .carousel__dot{background:var(--surface)}

/* ---------- Оргсхемы ---------- */
.org-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  gap:var(--space-6);
}
.org{
  margin:0;
  padding:var(--space-8);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
}
.org__title{
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-2);
  margin-bottom:var(--space-6);
}
.org--after .org__title{color:var(--primary-hover)}
.org__top{display:flex;justify-content:center}
.org__line{
  width:2px;height:28px;
  margin:0 auto;
  background:var(--border-strong);
}
.org__row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-3);
  position:relative;
  padding-top:var(--space-4);
}
.org__row::before{
  content:"";
  position:absolute;
  left:16.66%;right:16.66%;top:0;
  height:2px;
  background:var(--border-strong);
}
.org__row--six{grid-template-columns:repeat(6,minmax(0,1fr))}
.org__row--six::before{left:8.33%;right:8.33%}
.org__row>li{position:relative}
.org__row>li::before{
  content:"";
  position:absolute;
  left:50%;top:calc(var(--space-4) * -1);
  width:2px;height:var(--space-4);
  background:var(--border-strong);
}
.org__node{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:var(--space-4) var(--space-2);
  min-width:120px;
  background:var(--sunken);
  border:1px solid var(--border);
  border-radius:var(--r-inner);
  text-align:center;
  color:var(--text);
}
.org__node b{font-size:14px;font-weight:700;margin-top:var(--space-2)}
.org__node span{font-size:12px;color:var(--text-2);line-height:1.3}
.org__node--head{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.org__node--head span{color:var(--on-ink-2)}
.org__icon{
  display:inline-flex;
  width:36px;height:36px;
  align-items:center;justify-content:center;
  border-radius:var(--r-pill);
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text-2);
}
.org__node--head .org__icon{background:var(--ink-2);border-color:var(--ink-2);color:var(--on-ink)}
.org__node--ai{background:var(--primary-hover);border-color:var(--primary-hover);color:var(--surface)}
.org__node--ai span{color:var(--forecast)}
.org__node--ai .org__icon{background:var(--primary);border-color:var(--primary);color:var(--surface)}

/* ---------- Что вы получаете ---------- */
.cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-6);
}
.card{
  padding:var(--space-8);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
}
.card p{margin-top:var(--space-4);color:var(--text-2);line-height:1.6}

/* ---------- Почему верить ---------- */
.trust{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(32px,4vw,64px);
  align-items:start;
}
.trust__list{border-top:1px solid var(--border-strong)}
.trust__item{padding:var(--space-6) 0;border-bottom:1px solid var(--border)}
.trust__item p{margin-top:var(--space-3);color:var(--text-2);line-height:1.6}
.trust__shot{margin:0}

/* ---------- Как внедряем ---------- */
.step__body h5+p{margin-top:var(--space-3)}

/* ---------- Финальный CTA ---------- */
.final-cta__inner{max-width:820px}
.final-cta .lead{margin-top:var(--space-5)}

/* ---------- Адаптив надстройки ---------- */
@media (max-width:1100px){
  .site-nav{gap:var(--space-4)}
  .site-nav a{font-size:13px}
  .header-inner .btn--sm{display:none}
}
@media (max-width:1024px){
  .org-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .site-nav{display:none}
  .module{grid-template-columns:minmax(0,1fr);gap:var(--space-8);padding:var(--space-10) 0}
  .module--reverse .module__text{order:0}
  .module--reverse .module__shots{order:0}
  .trust{grid-template-columns:minmax(0,1fr)}
  .trust__shot{max-width:640px}
  .pains{grid-template-columns:minmax(0,1fr)}
  .pain--wide{grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
  .cards{grid-template-columns:minmax(0,1fr)}
  .org__row--six{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:var(--space-8)}
  .org__row--six::before{left:16.66%;right:16.66%}
  .org__row--six>li:nth-child(n+4)::before{display:none}
}
@media (max-width:768px){
  .pain{padding:var(--space-6)}
  .org{padding:var(--space-5)}
  .org__node{min-width:0;padding:var(--space-3) var(--space-1)}
  .org__node b{font-size:13px}
  .org__node span{font-size:11px}
  .carousel__btn{width:48px;height:48px;font-size:20px}
}
@media (max-width:560px){
  .hero__big br{display:none}
  .hero__big{font-size:20px}
  .org__row{gap:var(--space-2)}
  .org__row--six{grid-template-columns:repeat(3,minmax(0,1fr))}
  .carousel__nav{gap:var(--space-3)}
}

/* ============================================================
   Правки Антона 27.08 (вечер)
   ============================================================ */
.nowrap{white-space:nowrap}

/* Первый экран — белый, картинка по высоте текста */
.hero{background:var(--bg);padding:clamp(40px,6vw,72px) 0 clamp(48px,6vw,80px)}
.hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:stretch;gap:clamp(28px,4vw,56px)}
.hero-copy{max-width:none}
.hero__title{color:var(--text);font-size:clamp(28px,3.4vw,42px)}
.hero__big{color:var(--primary-hover);font-size:clamp(17px,1.75vw,23px)}
.hero__small{color:var(--text-2)}
.hero-anchor{color:var(--text);border-bottom-color:var(--border-strong)}
.hero-anchor:hover{border-bottom-color:var(--primary-hover)}
.hero-visual{
  border:1px solid var(--border);
  box-shadow:var(--shadow-lg);
  background:var(--surface);
  min-height:0;
}
.hero-visual img{
  position:absolute;inset:0;
  width:100%;height:100%;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:left top;
  opacity:1;filter:none;
}
.hero-visual::after{display:none}

/* Модули: верх экрана по верху заголовка, экраны меньше */
.module{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.module__text h5{margin-top:-2px}
.module__text .module__label{color:var(--primary-hover)}
.module__text .module__label{margin-top:var(--space-5)}
.module__text h5+.module__label{margin-top:var(--space-5)}

/* Карусель: подпись вне обрезаемой области */
.carousel__viewport{border-radius:0;overflow:hidden}
.carousel__slide{padding:0 2px 4px}
.carousel__slide .shot__caption{padding-left:var(--space-1)}
.carousel__nav{margin-top:var(--space-4)}
.carousel__btn{width:48px;height:48px;font-size:20px}

/* Плашка «Экран целиком» — синяя, с лупой */
.shot__hint{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--primary-hover);
  border-color:var(--primary-hover);
  color:var(--surface);
  box-shadow:var(--shadow-dropdown);
}
.shot__frame:hover .shot__hint{background:var(--primary);border-color:var(--primary);color:var(--surface)}

/* Карточки с иконками */
.card{display:flex;flex-direction:column}
.card__icon{
  display:inline-flex;width:44px;height:44px;
  align-items:center;justify-content:center;
  margin-bottom:var(--space-5);
  border-radius:12px;
  background:var(--primary-subtle);
  color:var(--primary-hover);
}
.cards--three{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Единый размер заголовков разделов и подзаголовков */
h4,.hero__title{letter-spacing:-.02em}
.section-head h4{font-size:clamp(26px,3.2vw,34px)}
.card h5,.module__text h5,.pain__title,.step__body h5{font-size:clamp(19px,2.1vw,22px)}

@media (max-width:1100px){
  .hero__title{font-size:clamp(26px,3.6vw,36px)}
  .hero__big{font-size:clamp(16px,1.9vw,20px)}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-visual{min-height:320px;max-width:none}
  .nowrap{white-space:normal}
  .cards--three{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:900px){.hero__title br{display:none}}

/* Правки 27.08, второй заход: первый экран снова тёмный */
.hero.section--ink{background:var(--ink)}
.hero.section--ink .hero__title{color:var(--on-ink)}
.hero.section--ink .hero__big{color:var(--forecast)}
.hero.section--ink .hero__small{color:var(--on-ink-2)}
.hero.section--ink .hero-anchor{color:var(--on-ink);border-bottom-color:var(--ink-2)}
.hero.section--ink .hero-anchor:hover{border-bottom-color:var(--forecast)}
.hero.section--ink .hero-visual{border-color:var(--ink-2)}
.header-inner .btn--primary{color:var(--surface)}