/* Лендинг sloi-ai.ru (корень сайта). Шрифт — TikTok Sans с зафиксированными
   осями opsz 28 / wdth 100, вес 400–800. */
@font-face {
  font-family: 'TikTok Sans';
  src: url('fonts/latin.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'TikTok Sans';
  src: url('fonts/cyrillic.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1;
}
:root {
  --ground: #F1F0E9;
  --card: #FBFAF7;
  --ink: #141615;
  --muted: #64655F;
  --line: rgba(17, 18, 18, 0.12);
  --line-strong: rgba(17, 18, 18, 0.25);
  --signal: #EE6E2E;         /* декор: квадрат, стрелка, рамка печати */
  --signal-ink: #9E3F0D;     /* текст: от 4.5 на всех пастелях */
  --frame: #222325;          /* тёмный --paper из токенов */
  --on-frame: #F0EEE9;
  --live: #5FC79B;
  --mk-y: #F5D27E;
  --mk-g: #BFE0C9;
  --t1: #F6DDAF;             /* chart-3, янтарь */
  --t2: #CFE0EA;             /* pair */
  --t3: #F8CDB3;             /* акцент, оранжевый */
  --t4: #C9E4D3;             /* success */
  --t5: #E3D3EE;             /* chart-5 */
  --t6: #C3EBF4;             /* голубой логотипа */
  --t7: #EEDDC4;
  --face-1: #E8A33D;
  --face-2: #2B6E8C;
  --face-3: #EE6E2E;
  --face-4: #1F7A55;
  --face-5: #8C5BA8;
  --face-6: #0B6FA8;
  --display: var(--sans);
  --sans: 'TikTok Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --shadow: 0 24px 60px rgba(17, 18, 18, 0.14);
  --wrap: min(1160px, calc(100vw - 32px));
  color-scheme: light;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-optical-sizing: none;
  font-size: 1rem;
  line-height: 1.5;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2,
h3,
summary,
.btn {
  font-family: var(--display);
}

h1 {
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h3 {
  font-size: 1.3rem;
  font-weight: 800;
}

a {
  color: inherit;
}

.wrap {
  width: var(--wrap);
  margin: 0 auto;
}

section {
  padding: clamp(64px, 9vw, 120px) 0 0;
}

.sub {
  max-width: 34em;
  margin-top: 12px;
  color: var(--muted);
  font-size: 1.2rem;
}

/* Маркер под словами заголовка — скруглённая полоса в нижней половине строки. */
.mk {
  padding: 0 0.08em;
  border-radius: 0.3em;
  background: linear-gradient(transparent 55%, var(--mk) 55%, var(--mk) 92%, transparent 92%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.mk-y { --mk: var(--mk-y); }
.mk-g { --mk: var(--mk-g); }

/* Кнопки и ссылки */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 1.6rem;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ground);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(17, 18, 18, 0.18);
  transition: transform 0.12s;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-sm {
  padding: 0.6rem 1.15rem;
  font-size: 0.95rem;
  box-shadow: none;
}

.ul {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

/* Шапка */
.nav {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(10px);
}

.nav-row {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 0;
}

.logo {
  display: block;
  height: 34px;
}

.brand {
  text-decoration: none;
}

/* Подпись под «Sloi AI» в логотипе: отступ = ширина значка (200/160 высоты png). */
.brand span {
  display: block;
  margin-top: 2px;
  padding-left: calc(34px * 200 / 160);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  gap: 22px;
  margin-left: auto;
  font-size: 0.95rem;
}

.nav-links a {
  color: var(--muted);
  text-decoration: none;
}

.nav-links a:hover {
  color: var(--ink);
}

/* Первый экран */
.hero {
  padding-top: clamp(28px, 5vw, 64px);
}

/* Первый экран — сетка: слева заголовок, текст и кнопки строками, справа
   иллюстрация на высоту заголовка (строка 1). */
.hero-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  column-gap: 48px;
  align-items: start;
}

.hero-row > div:first-child { display: contents; }
.hero-row h1 { grid-area: 1 / 1; }
.hero-row .lead { grid-area: 2 / 1; }
.hero-row .actions { grid-area: 3 / 1; }

/* Иллюстрация первого экрана: плашки-приложения внахлёст, в стиле лиц агентов —
   цветная плашка, фигура с чёрным контуром. */
/* Своей высоты у иллюстрации нет: стопка вписана абсолютом в строку заголовка. */
.hero-art {
  position: relative;
  grid-area: 1 / 2;
  align-self: stretch;
  margin: 0;
}

.art-defs {
  position: absolute;
  width: 0;
  height: 0;
}

.art-stack {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.art-row {
  display: none;
}

.hero-art use {
  filter: url(#app-shadow);
}

[class^='app-'] rect { stroke: var(--ink); stroke-width: 3; }
[class^='app-'] .ico,
[class^='app-'] .ico-dot { stroke: var(--ink); stroke-width: 3.5; stroke-linejoin: round; }
[class^='app-'] .handle { fill: none; stroke: var(--ink); stroke-width: 12; stroke-linecap: round; }
[class^='app-'] text { font-size: 19px; font-weight: 800; text-anchor: middle; }

.app-maps rect { fill: var(--card); }
.app-maps .ico { fill: #E8493A; }
.app-maps .ico-dot { fill: #fff; }
.app-maps text { fill: var(--ink); }

.app-search rect { fill: var(--t6); }
.app-search .ico { fill: #fff; }
.app-search text { fill: var(--ink); }

.app-nav rect { fill: var(--frame); }
.app-nav .ico { fill: #F5C33B; stroke: var(--ink); }
.app-nav text { fill: var(--on-frame); }

.lead {
  max-width: 30em;
  margin-top: 22px;
  color: var(--muted);
  font-size: 1.25rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  margin-top: 32px;
}

/* Тёмная рамка — как экран устройства с плитками внутри */
.frame {
  padding: 14px;
  border-radius: 28px;
  background: var(--frame);
  box-shadow: var(--shadow);
}

.frame-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px 14px;
  color: var(--on-frame);
  font-family: var(--display);
}

.live {
  color: var(--live);
  font-size: 0.85rem;
  font-weight: 700;
}

.live::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 3px rgba(95, 199, 155, 0.25);
}

.agents {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.agent {
  position: relative;
  padding: 20px;
  border-radius: 6px;
  background: var(--tint);
}

/* Крупное скругление — только в углах, что смотрят в углы тёмной рамки. */
.agent:nth-child(1) { border-top-left-radius: 18px; }
.agent:nth-child(3) { border-top-right-radius: 18px; }
.agent:nth-child(4) { border-bottom-left-radius: 18px; }
.agent:nth-child(6) { border-bottom-right-radius: 18px; }

.agent p {
  margin-top: 6px;
  color: var(--ink);
  opacity: 0.75;
  font-size: 1.1rem;
}

.t1 { --tint: var(--t1); }
.t2 { --tint: var(--t2); }
.t3 { --tint: var(--t3); }
.t4 { --tint: var(--t4); }
.t5 { --tint: var(--t5); }
.t6 { --tint: var(--t6); }
.t7 { --tint: var(--t7); }

/* «Лица» агентов: цветной кружок с белым персонажем. */
.face {
  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
}

.face path {
  fill: #FFFFFF;
  stroke: #141615;
  stroke-width: 2;
  stroke-linejoin: round;
}

.face .eye {
  fill: #141615;
}

.f1 .bg { fill: var(--face-1); }
.f2 .bg { fill: var(--face-2); }
.f3 .bg { fill: var(--face-3); }
.f4 .bg { fill: var(--face-4); }
.f5 .bg { fill: var(--face-5); }
.f6 .bg { fill: var(--face-6); }

/* Что получаете: один список выгод, на десктопе в две колонки. */
.gains {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 48px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 1.15rem;
}

.gains li {
  position: relative;
  padding-left: 28px;
}

.gains li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--signal);
  font-weight: 800;
}

.gains b {
  color: var(--ink);
}

/* Аудит: список шагов с круглыми цифрами и макет картинки аудита. */
.audit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.steps {
  display: grid;
  gap: 14px;
  margin: 28px 0 32px;
  padding: 0;
  list-style: none;
  counter-reset: step;
  font-size: 1.2rem;
}

.steps li {
  display: flex;
  align-items: center;
  gap: 14px;
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--ground);
  font-family: var(--display);
  font-weight: 800;
}

.shot {
  justify-self: center;
  width: 100%;
  max-width: 460px;
  padding: 24px;
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--shadow);
  rotate: 2deg;
}

.shot-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  font-family: var(--display);
}

.shot-top span,
.metrics span {
  color: var(--muted);
  font-size: 1rem;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.metrics div {
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--ground);
}

.metrics span {
  display: block;
}

.metrics b {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 800;
}

.shot-takeaway {
  margin-top: 16px;
  font-weight: 700;
}

/* Вопросы — плитки в две колонки */
.faq {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 32px;
}

details {
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 2px 14px rgba(17, 18, 18, 0.06);
}

summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: '+';
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ground);
  transition: rotate 0.15s;
}

details[open] summary::after {
  rotate: 45deg;
}

details p {
  margin-top: 10px;
  color: var(--muted);
  font-size: 1.1rem;
}

/* Финальный жёлтый блок с формой */
.final {
  padding: clamp(24px, 4vw, 40px);
  border: 8px solid var(--frame);
  border-radius: 30px;
  background: var(--t1);
  box-shadow: var(--shadow);
}

/* Плашка-тезис о цене — как финальный блок, но зелёная: это выгода. */
.profit {
  background: var(--t4);
}

.final .sub {
  color: var(--ink);
  opacity: 0.75;
}

/* Цены: таблетки-переключатели числа точек, под ними цена выбранной ступени. */
.prices {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.prices .sub {
  flex-basis: 100%;
  max-width: none;
  margin: 0 0 4px;
}

.prices input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.prices label {
  min-width: 3.2em;
  padding: 0.45rem 0.9rem;
  border: 2px solid var(--frame);
  border-radius: 999px;
  background: var(--card);
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}

.prices input:checked + label {
  background: var(--frame);
  color: var(--on-frame);
}

.prices input:focus-visible + label {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.price,
.setup {
  flex-basis: 100%;
  margin: 0;
}

.price {
  display: none;
  margin-top: 14px;
  font-size: 1.3rem;
}

.price b {
  font-family: var(--display);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 800;
  white-space: nowrap;
}

#pts-1:checked ~ .pr-1,
#pts-2:checked ~ .pr-2,
#pts-5:checked ~ .pr-5,
#pts-10:checked ~ .pr-10 {
  display: block;
}

.setup {
  font-size: 1.1rem;
  opacity: 0.75;
}

.lead-form {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 0.7fr auto;
  gap: 12px;
  align-items: end;
  margin-top: 28px;
}

.lead-form .hp {
  position: absolute;
  left: -9999px;
}

.lead-form label {
  display: grid;
  gap: 4px;
  font-size: 1rem;
  font-weight: 600;
}

.lead-form input {
  min-width: 0;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(17, 18, 18, 0.18);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
}

.lead-form input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.alt {
  margin-top: 18px;
  font-size: 1.1rem;
}

footer {
  padding: 80px 0 32px;
  color: var(--muted);
  font-size: 0.95rem;
}

.foot-row {
  display: flex;
  justify-content: space-between;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* Окно ответа формы: открыто, пока в адресе его якорь (#thanks, #lead-error). */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  place-items: center;
  padding: 16px;
}

.modal:target {
  display: grid;
}

.modal-bg {
  position: absolute;
  inset: 0;
  background: rgba(20, 22, 21, 0.55);
}

.modal-box {
  position: relative;
  width: min(100%, 640px);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

.modal-x {
  position: absolute;
  top: 10px;
  right: 18px;
  font-size: 2rem;
  line-height: 1;
  text-decoration: none;
}

.modal-box h2 {
  padding-right: 32px;
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  /* На телефоне — ряд плашек между заголовком и текстом, высота по ширине. */
  .hero-row { grid-template-columns: minmax(0, 1fr); }
  .hero-row h1,
  .hero-row .lead,
  .hero-row .actions,
  .hero-art { grid-area: auto; }
  .hero-art { order: 1; margin-top: 20px; }
  .hero-row .lead { order: 2; }
  .hero-row .actions { order: 3; }
  .art-stack { display: none; }
  .art-row { display: block; width: 100%; height: auto; overflow: visible; }
  .nav-row .btn { margin-left: auto; }
  .agents { grid-template-columns: repeat(2, 1fr); }
  .agent:nth-child(2) { border-top-right-radius: 18px; }
  .agent:nth-child(3) { border-top-right-radius: 6px; }
  .agent:nth-child(4) { border-bottom-left-radius: 6px; }
  .agent:nth-child(5) { border-bottom-left-radius: 18px; }
  .audit,
  .gains,
  .lead-form { grid-template-columns: 1fr; }
  /* Кнопка чуть дальше от последнего поля: 12px зазор + 12px = 24px. */
  .lead-form .btn { margin-top: 12px; }
  /* Превью аудита — между шагами и кнопкой. */
  .audit { gap: 0; }
  .audit > div:first-child { display: contents; }
  .audit .btn { order: 1; justify-self: start; }
  .shot { margin-bottom: 32px; }
}

@media (max-width: 600px) {
  /* Подпись под логотипом с отступом + кнопка не помещаются в шапку даже на 375px:
     подпись встаёт под знак, на самых узких экранах переносится. */
  .nav-row { gap: 12px; }
  .brand { min-width: 0; }
  .brand span { padding-left: 0; white-space: normal; }
  .agents,
  .faq { grid-template-columns: 1fr; }
  .agent:nth-child(1) { border-top-right-radius: 18px; }
  .agent:nth-child(2) { border-top-right-radius: 6px; }
  .agent:nth-child(5) { border-bottom-left-radius: 6px; }
  .agent:nth-child(6) { border-bottom-left-radius: 18px; }
  .frame { padding: 10px; border-radius: 22px; }
  .shot { rotate: 1deg; }
}

/* Реплики агентов: облачко всплывает у «лица» на пару секунд и тает. Механика
   простая: один цикл на агента, фразы делят период поровну. Только
   CSS; при «уменьшить движение» реплик нет вовсе. */
.say {
  position: absolute;
  top: calc(20px + 24px);
  left: calc(20px + 48px + 10px);
  max-width: calc(100% - 40px - 48px - 10px);
  padding: 4px 12px;
  border-radius: 12px 12px 12px 2px;
  background: #141615;
  color: #F3F1EC;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
  translate: 0 -50%;
  opacity: 0;
  --pill: inset(0 calc(100% - 44px) 0 0 round 12px 12px 12px 2px);
  animation: say var(--T) infinite;
  animation-delay: calc(var(--T) * var(--i) / var(--n) + var(--o));
}

.say.long {
  animation-name: say-long;
}

/* «•••» — агент «печатает»: облачко сначала узкое, с точками, потом
   раскрывается в фразу. Задержка та же, что у облачка; точки набегают по одной. */
.say::after {
  content: '•••';
  position: absolute;
  left: 12px;
  top: 50%;
  color: #F3F1EC;
  letter-spacing: 2px;
  translate: 0 -50%;
  opacity: 0;
  animation: say-dots var(--T) infinite, dots-run 0.9s steps(3, jump-start) infinite;
  animation-delay: calc(var(--T) * var(--i) / var(--n) + var(--o)), 0s;
}

.f1, .f1 ~ .say { --T: 136s; --n: 8; --o: 1s; }
.f2, .f2 ~ .say { --T: 126s; --n: 7; --o: 3s; }
.f3, .f3 ~ .say { --T: 119s; --n: 7; --o: 6s; }
.f4, .f4 ~ .say { --T: 147s; --n: 7; --o: 2s; }
.f5, .f5 ~ .say { --T: 117s; --n: 6; --o: 9s; }
.f6, .f6 ~ .say { --T: 108s; --n: 7; --o: 5s; }

/* Все облачка повёрнуты одинаково: текст идёт слева направо вверх. */
.p1 { --i: 0; rotate: -2deg; }
.p2 { --i: 1; rotate: -2deg; }
.p3 { --i: 2; rotate: -2deg; }
.p4 { --i: 3; rotate: -2deg; }
.p5 { --i: 4; rotate: -2deg; }
.p6 { --i: 5; rotate: -2deg; }
.p7 { --i: 6; rotate: -2deg; }
.p8 { --i: 7; rotate: -2deg; }

/* Лицо агента подпрыгивает и моргает, когда всплывает реплика: тот же
   цикл, что у облачков, только период — одна фраза (T/n). */
.face {
  transform-origin: 50% 100%;
  animation: face-hop calc(var(--T) / var(--n)) var(--o) infinite;
}

.face .eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: face-blink calc(var(--T) / var(--n)) var(--o) infinite;
}

@keyframes face-hop {
  0% { transform: none; }
  1.2% { transform: translateY(-6px) rotate(-6deg) scale(1.06); }
  2.4% { transform: translateY(0) rotate(4deg) scale(0.97, 1.03); }
  3.4% { transform: rotate(-2deg); }
  4.4%, 100% { transform: none; }
}

@keyframes face-blink {
  0%, 5% { transform: none; }
  5.6% { transform: scaleY(0.1); }
  6.2%, 100% { transform: none; }
}

@keyframes say {
  0% { opacity: 0; transform: translateY(6px) scale(0.9); clip-path: var(--pill); color: transparent; }
  0.3% { opacity: 1; transform: none; clip-path: var(--pill); color: transparent; }
  1% { clip-path: var(--pill); color: transparent; }
  1.3% { clip-path: inset(0 0 0 0 round 12px 12px 12px 2px); color: #F3F1EC; }
  2.6% { opacity: 1; transform: none; }
  3% { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 0; }
}

@keyframes say-long {
  0% { opacity: 0; transform: translateY(6px) scale(0.9); clip-path: var(--pill); color: transparent; }
  0.3% { opacity: 1; transform: none; clip-path: var(--pill); color: transparent; }
  1% { clip-path: var(--pill); color: transparent; }
  1.3% { clip-path: inset(0 0 0 0 round 12px 12px 12px 2px); color: #F3F1EC; }
  4.4% { opacity: 1; transform: none; }
  4.8% { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 0; }
}

@keyframes say-dots {
  0%, 0.2% { opacity: 0; }
  0.3%, 1% { opacity: 1; }
  1.1%, 100% { opacity: 0; }
}

@keyframes dots-run {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .say,
  .say::after,
  .face,
  .face .eye { animation: none; }
}