/* Лендинг PromptyFlow — собственная визуальная система, тёмная.
 *
 * Решение владельца: оформление приложения к лендингу не применяется.
 * Здесь нет ни одной переменной продуктовых токенов — только `--l-*`.
 *
 * Замысел (выбор владельца 2026-08-02, вариант «Ночь и золото»):
 * библиотека ночью. Чернильный фон, тёплый белый текст, один акцент —
 * золото; сирень осталась только в свечении фона и линиях. Градиент на
 * тексте не используется нигде: это самый узнаваемый штамп ИИ-сайтов.
 * Ключевые слова — антиква без курсива, ровное золото.
 */

:root {
  color-scheme: dark;

  /* Ночь */
  --l-void: #090809;
  --l-bg: #0b0a10;
  --l-surface: #14121c;
  --l-surface-2: #191621;
  --l-line: #251f36;
  --l-line-strong: #37304f;

  /* Чернила по светлому — текст (слоновая кость, тёплая) */
  --l-text: #f4f0e6;
  --l-text-soft: #b6b0a8;
  --l-text-faint: #7e796f;

  /* Акцент — золото. Сирень (#8f84c9) живёт только в rgba свечений. */
  --l-accent: #e3b25c;
  --l-accent-soft: #eec981;
  --l-wash: rgba(227, 178, 92, 0.1);

  /* Шрифты: webfont прототип не тянет; Variable Display — родной для
     Windows 11, даёт честные промежуточные веса крупных заголовков. */
  --l-sans: 'Segoe UI Variable Display', 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --l-serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;

  /* Ритм */
  --l-gap-xs: 8px;
  --l-gap-sm: 12px;
  --l-gap: 20px;
  --l-gap-lg: 32px;
  --l-gap-xl: 56px;
  --l-section: clamp(76px, 9vw, 132px);
  --l-radius-sm: 10px;
  --l-radius: 18px;
  --l-radius-lg: 28px;
  --l-radius-pill: 999px;
  --l-shell: 1180px;

  /* Глубина */
  --l-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 20px 48px rgba(0, 0, 0, 0.5);
  --l-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.55), 0 48px 96px rgba(0, 0, 0, 0.45);

  --l-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--l-bg);
}

body {
  margin: 0;
  background: var(--l-bg);
  color: var(--l-text);
  font-family: var(--l-sans);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.005em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: rgba(227, 178, 92, 0.32);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--l-accent-soft);
  outline-offset: 3px;
  border-radius: var(--l-radius-sm);
}

a { color: inherit; }

/* ---------- Каркас ---------- */

.shell {
  width: 100%;
  max-width: var(--l-shell);
  margin: 0 auto;
  padding-inline: 20px;
}

@media (min-width: 900px) {
  .shell { padding-inline: 40px; }
}

.band {
  position: relative;
  padding-block: var(--l-section);
}

.band--tint {
  background: var(--l-surface);
  border-block: 1px solid var(--l-line);
}

.band--deep {
  background: var(--l-void);
}

.h-section {
  margin: 0 0 var(--l-gap-lg);
  font-size: clamp(30px, 4.4vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 600;
  max-width: 18ch;
}

/* Ключевое слово: антиква без курсива, ровное золото, без градиента. */
.h-em {
  font-family: var(--l-serif);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--l-accent-soft);
}

.lede {
  margin: 0 0 var(--l-gap-xl);
  max-width: 58ch;
  color: var(--l-text-soft);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.65;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--l-gap-xs);
  padding: 6px 14px;
  border-radius: var(--l-radius-pill);
  border: 1px solid var(--l-line-strong);
  background: var(--l-surface);
  color: var(--l-text-soft);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--l-accent);
  box-shadow: 0 0 12px var(--l-accent);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--l-radius-pill);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 220ms var(--l-ease), box-shadow 220ms var(--l-ease),
    background 220ms var(--l-ease), border-color 220ms var(--l-ease);
}

.btn--primary {
  background: var(--l-text);
  color: var(--l-void);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.btn--primary:hover {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: 0 18px 44px rgba(227, 178, 92, 0.28);
}

.btn--ghost {
  background: transparent;
  border-color: var(--l-line-strong);
  color: var(--l-text);
}

.btn--ghost:hover {
  border-color: var(--l-accent-soft);
  transform: translateY(-2px);
}

.btn--sm {
  min-height: 44px;
  padding: 0 20px;
  font-size: 15px;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--l-accent-soft);
  font-weight: 600;
  text-decoration: none;
}

.link-arrow span { transition: transform 220ms var(--l-ease); }
.link-arrow:hover span { transform: translateX(4px); }

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

.skip {
  position: absolute;
  inset-inline-start: -100vw;
  top: 12px;
  z-index: 90;
  padding: 10px 18px;
  border-radius: var(--l-radius-sm);
  background: var(--l-surface-2);
  border: 1px solid var(--l-line-strong);
  text-decoration: none;
}

.skip:focus { inset-inline-start: 12px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(11, 10, 16, 0.72);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 220ms var(--l-ease), background 220ms var(--l-ease);
}

.topbar[data-stuck='true'] {
  border-bottom-color: var(--l-line);
  background: rgba(9, 8, 9, 0.86);
}

.topbar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--l-gap);
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand__mark {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--l-accent);
  color: var(--l-void);
  font-family: var(--l-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1;
}

.topbar__nav { display: none; gap: 4px; }

.topbar__nav a {
  padding: 8px 14px;
  border-radius: var(--l-radius-pill);
  color: var(--l-text-soft);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: color 200ms var(--l-ease), background 200ms var(--l-ease);
}

.topbar__nav a:hover {
  color: var(--l-text);
  background: var(--l-wash);
}

.topbar__side {
  display: flex;
  align-items: center;
  gap: var(--l-gap-sm);
}

/* Выбор языка — выпадающее меню. В шапке всегда одна кнопка, а список
   растёт вместе с числом языков: после шести он начинает прокручиваться,
   ширина шапки при этом не меняется. */
.lang { position: relative; }

.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 10px 0 11px;
  border: 1px solid var(--l-line);
  border-radius: var(--l-radius-pill);
  background: var(--l-surface-2);
  color: var(--l-text-soft);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 200ms var(--l-ease), border-color 200ms var(--l-ease);
}

.lang__btn:hover,
.lang[data-open='true'] .lang__btn {
  color: var(--l-text);
  border-color: var(--l-line-strong);
}

.lang__globe {
  display: block;
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--l-accent);
}

.lang__globe svg { display: block; width: 100%; height: 100%; }

/* Код языка на кнопке: два знака, поэтому набран прописными и разрежен. */
.lang__code {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.06em;
}

.lang__caret {
  flex: none;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  rotate: 45deg;
  translate: 0 -2px;
  transition: rotate 220ms var(--l-ease);
}

.lang[data-open='true'] .lang__caret { rotate: -135deg; translate: 0 2px; }

.lang__list {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 70;
  display: none;
  min-width: 180px;
  max-height: 272px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--l-line-strong);
  background: var(--l-surface-2);
  box-shadow: var(--l-shadow);
}

.lang[data-open='true'] .lang__list { display: grid; gap: 2px; }

.lang__opt {
  display: grid;
  grid-template-columns: 15px 1fr auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--l-text-soft);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  text-align: start;
  cursor: pointer;
}

/* Галочка занимает свою колонку всегда — строки не съезжают при выборе. */
.lang__opt::before {
  content: '';
  color: var(--l-accent);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.lang__opt[aria-checked='true'] { color: var(--l-text); }
.lang__opt[aria-checked='true']::before { content: '✓'; }

.lang__opt:hover { background: var(--l-wash); color: var(--l-text); }

.lang__short {
  color: var(--l-text-faint);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
}

.burger {
  display: inline-grid;
  place-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--l-line-strong);
  border-radius: 12px;
  background: var(--l-surface-2);
  cursor: pointer;
}

.burger i {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--l-text);
  border-radius: 2px;
}

.drawer {
  display: none;
  padding: var(--l-gap) 0 var(--l-gap-lg);
  border-top: 1px solid var(--l-line);
}

.drawer[data-open='true'] { display: block; }

.drawer a.drawer__link {
  display: flex;
  align-items: center;
  min-height: 50px;
  color: var(--l-text);
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--l-line);
}

.drawer .btn { width: 100%; margin-top: var(--l-gap); }

@media (max-width: 640px) {
  .topbar__side .btn { display: none; }
  .topbar__row { min-height: 64px; }
}

@media (min-width: 900px) {
  .burger { display: none; }
  .drawer { display: none !important; }
  .topbar__nav { display: flex; }
}

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

.hero {
  position: relative;
  padding-block: clamp(48px, 7vw, 96px) var(--l-section);
  overflow: hidden;
}

/* Свечение приглушено вдвое против фиолетовой редакции: свеча, не неон. */
.hero__aura {
  position: absolute;
  inset: -30% -20% auto -20%;
  height: 760px;
  pointer-events: none;
  background:
    radial-gradient(38% 52% at 22% 28%, rgba(227, 178, 92, 0.16), transparent 70%),
    radial-gradient(34% 46% at 76% 16%, rgba(143, 132, 201, 0.12), transparent 72%),
    radial-gradient(30% 42% at 58% 66%, rgba(227, 178, 92, 0.07), transparent 70%);
  filter: blur(10px);
}

.hero__grid {
  position: relative;
  display: grid;
  gap: clamp(40px, 5vw, 72px);
}

.hero h1 {
  margin: var(--l-gap) 0 var(--l-gap);
  font-size: clamp(42px, 7.2vw, 82px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  font-weight: 620;
  text-wrap: balance;
}

.hero__lede {
  margin: 0 0 var(--l-gap-lg);
  max-width: 46ch;
  color: var(--l-text-soft);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--l-gap);
  margin-bottom: var(--l-gap-xl);
}

.providers { display: flex; flex-direction: column; gap: var(--l-gap-sm); }

.providers__label {
  margin: 0;
  color: var(--l-text-faint);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Инструмент — пилюлей, модели — подписью рядом. Сетка одна на весь
   список (`display: contents` у строки), иначе подписи не встают на одну
   вертикаль: имена инструментов разной длины. */
.providers__row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px var(--l-gap-sm);
}

.provider { display: contents; }

.provider b {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  padding: 6px 13px 6px 11px;
  border-radius: var(--l-radius-pill);
  border: 1px solid var(--l-line-strong);
  background: var(--l-surface);
  color: var(--l-text);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/* Знак провайдера: условная марка, цвет наследует от текста пилюли. */
.provider__mark {
  display: block;
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--l-accent-soft);
}

.provider__mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.provider__models {
  color: var(--l-text-soft);
  font-size: 14px;
  line-height: 1.4;
}

@media (max-width: 430px) {
  .providers__row { grid-template-columns: 1fr; gap: 4px; }
  .provider__models { margin-bottom: 8px; }
}

@media (min-width: 980px) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; align-items: center; }
}

/* ---------- Схема пути романа ----------
 *
 * Шесть шагов сменяют друг друга сами. Лента показывает, где мы сейчас;
 * рисунок под ней меняется вместе с шагом; дуга под двумя последними
 * точками говорит, что этот кусок повторяется на каждой сцене.
 * Все размеры фиксированы, чтобы карточка не прыгала при смене шага.
 */

.path {
  position: relative;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--l-radius-lg);
  background: linear-gradient(180deg, var(--l-surface-2), var(--l-surface));
  border: 1px solid var(--l-line-strong);
  box-shadow: var(--l-shadow-lg);
}

/* Золотая кромка, гаснущая книзу: затухание одного цвета, не радуга. */
.path::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(227, 178, 92, 0.55), rgba(227, 178, 92, 0.1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.path__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--l-gap);
}

.path__label,
.path__count {
  margin: 0;
  color: var(--l-text-faint);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.path__count b {
  color: var(--l-text);
  font-weight: 650;
}

/* Лента шагов: шесть точек, залитый рельс и дуга возврата. */
.path__track {
  position: relative;
  display: flex;
  margin: var(--l-gap) 0 calc(var(--l-gap) + 16px);
}

.path__rail {
  position: absolute;
  inset-inline: 8.333%;
  top: 50%;
  height: 2px;
  translate: 0 -1px;
  border-radius: 2px;
  background: var(--l-line-strong);
  overflow: hidden;
}

.path__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--l-accent);
  transition: width 620ms var(--l-ease);
}

.path[data-step='1'] .path__fill { width: 20%; }
.path[data-step='2'] .path__fill { width: 40%; }
.path[data-step='3'] .path__fill { width: 60%; }
.path[data-step='4'] .path__fill { width: 80%; }
.path[data-step='5'] .path__fill { width: 100%; }

/* Дуга под пятой и шестой точками: этот кусок пути повторяется. */
.path__loop {
  position: absolute;
  inset-inline: 75% 8.333%;
  top: calc(50% + 5px);
  height: 13px;
  border: 1px solid var(--l-line-strong);
  border-top: 0;
  border-radius: 0 0 9px 9px;
  opacity: 0.55;
  transition: border-color 400ms var(--l-ease), opacity 400ms var(--l-ease);
}

.path[data-step='4'] .path__loop,
.path[data-step='5'] .path__loop {
  border-color: var(--l-accent);
  opacity: 1;
}

.path__node {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  place-items: center;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.path__node i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--l-line-strong);
  box-shadow: 0 0 0 4px var(--l-surface-2);
  transition: background 360ms var(--l-ease), scale 360ms var(--l-ease),
    box-shadow 360ms var(--l-ease);
}

.path__node[data-state='done'] i { background: var(--l-accent-soft); }

.path__node[data-state='now'] i {
  background: var(--l-accent);
  scale: 1.5;
  box-shadow: 0 0 0 4px var(--l-surface-2), 0 0 16px rgba(227, 178, 92, 0.7);
}

.path__node:hover i { background: var(--l-accent-soft); }

/* Сцена рисунка: высота постоянна, меняется только содержимое. */
.path__stage {
  position: relative;
  height: 172px;
}

.path__scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  translate: 0 10px;
  scale: 0.985;
  pointer-events: none;
  transition: opacity 420ms var(--l-ease), translate 420ms var(--l-ease),
    scale 420ms var(--l-ease);
}

.path__scene.is-on {
  opacity: 1;
  translate: none;
  scale: 1;
}

.path__caption {
  margin-top: var(--l-gap);
  min-height: 92px;
}

.path__title {
  margin: 0 0 6px;
  font-size: clamp(19px, 1.9vw, 23px);
  font-weight: 600;
  letter-spacing: -0.025em;
}

.path__text {
  margin: 0;
  color: var(--l-text-soft);
  font-size: 15px;
  line-height: 1.55;
}

.path__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--l-gap-sm);
  padding-top: var(--l-gap);
  border-top: 1px solid var(--l-line);
  color: var(--l-text-faint);
  font-size: 13px;
  font-weight: 550;
}

.path__cycle {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--l-wash);
  color: var(--l-accent-soft);
  font-size: 13px;
}

/* ---------- Рисунки шагов ---------- */

.art {
  position: absolute;
  inset: 0;
  border-radius: var(--l-radius);
  border: 1px solid var(--l-line);
  background: rgba(255, 255, 255, 0.015);
  overflow: hidden;
}

/* 01 — наброски: обрывки, лежащие как попало. */
.art--notes i {
  position: absolute;
  height: 52px;
  border-radius: 7px;
  border: 1px solid var(--l-line-strong);
  background:
    repeating-linear-gradient(180deg, rgba(182, 176, 196, 0.26) 0 2px, transparent 2px 9px) 8px 10px / calc(100% - 16px) 32px no-repeat,
    var(--l-surface-2);
  opacity: 0;
}

.art--notes i:nth-child(1) { inset-inline-start: 6%; top: 14%; width: 34%; rotate: -5deg; }
.art--notes i:nth-child(2) { inset-inline-start: 44%; top: 9%; width: 30%; rotate: 4deg; }
.art--notes i:nth-child(3) { inset-inline-start: 66%; top: 40%; width: 28%; rotate: -3deg; }
.art--notes i:nth-child(4) { inset-inline-start: 14%; top: 52%; width: 32%; rotate: 6deg; }
.art--notes i:nth-child(5) { inset-inline-start: 40%; top: 56%; width: 26%; rotate: -7deg; }

.is-on .art--notes i { animation: drop 560ms var(--l-ease) both; }
.is-on .art--notes i:nth-child(2) { animation-delay: 90ms; }
.is-on .art--notes i:nth-child(3) { animation-delay: 180ms; }
.is-on .art--notes i:nth-child(4) { animation-delay: 270ms; }
.is-on .art--notes i:nth-child(5) { animation-delay: 360ms; }

@keyframes drop {
  from { opacity: 0; translate: 0 -18px; }
  to { opacity: 1; translate: none; }
}

/* 02 — библия: обрывки собрались в карточки. */
.art--bible {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
}

.art--bible b {
  flex: 1;
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 12px 11px;
  border-radius: 12px;
  border: 1px solid var(--l-line-strong);
  background: var(--l-surface-2);
  opacity: 0;
}

.art--bible span {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.art--bible u,
.art__card u {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: var(--l-line-strong);
  text-decoration: none;
}

.art--bible b u:nth-of-type(2) { width: 76%; }
.art--bible b u:nth-of-type(3) { width: 54%; }

.is-on .art--bible b { animation: rise 560ms var(--l-ease) both; }
.is-on .art--bible b:nth-child(2) { animation-delay: 110ms; }
.is-on .art--bible b:nth-child(3) { animation-delay: 220ms; }

@keyframes rise {
  from { opacity: 0; translate: 0 20px; rotate: -3deg; }
  to { opacity: 1; translate: none; rotate: none; }
}

/* 03 — стиль: росчерк пера, который прочерчивается сам. */
.art--style {
  display: grid;
  place-items: center;
  padding: 22px 24px;
}

.art__sign {
  width: 100%;
  max-width: 344px;
}

.art__sign svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transform: skewX(-9deg);
}

/* Длину линии считает site.js: dasharray должен совпасть с ней точно.
   Перо ведут ровно, без свечения-ореола: чернила, а не неон. */
.art__sign path {
  fill: none;
  stroke: var(--l-accent-soft);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len, 900);
  stroke-dashoffset: var(--len, 900);
  filter: drop-shadow(0 1px 5px rgba(227, 178, 92, 0.28));
}

/* Прочерк заканчивается заметно раньше смены шага (2,8 с), чтобы готовый
   росчерк успел постоять целиком. */
.is-on .art__sign path { animation: ink 1450ms var(--l-ease) 180ms both; }

@keyframes ink {
  to { stroke-dashoffset: 0; }
}

/* Строка, по которой идёт росчерк. */
.art__rule {
  width: min(344px, 100%);
  height: 1px;
  margin-top: 6px;
  background: linear-gradient(90deg, transparent, var(--l-line-strong) 12%,
    var(--l-line-strong) 88%, transparent);
  transform-origin: left center;
  scale: 0 1;
}

.is-on .art__rule { animation: draw 900ms var(--l-ease) both; }

/* 04 — сюжет: линия сцен и выбранный поворот. */
.art--plot { padding: 0; }

.art__line {
  position: absolute;
  inset-inline: 12%;
  top: 68%;
  height: 2px;
  border-radius: 2px;
  background: rgba(182, 176, 196, 0.32);
  transform-origin: left center;
  scale: 0 1;
}

.is-on .art__line { animation: draw 760ms var(--l-ease) both; }

@keyframes draw {
  from { scale: 0 1; }
  to { scale: 1 1; }
}

.art__dots {
  position: absolute;
  inset-inline: 12%;
  top: 68%;
  display: flex;
  justify-content: space-between;
  translate: 0 -50%;
}

.art__dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--l-accent);
  opacity: 0;
}

/* Хвост плана — сцены, которые ещё не написаны. */
.art__dots i:nth-child(6),
.art__dots i:nth-child(7) { background: var(--l-line-strong); }

.is-on .art__dots i { animation: pop 340ms var(--l-ease) both; }
.is-on .art__dots i:nth-child(1) { animation-delay: 120ms; }
.is-on .art__dots i:nth-child(2) { animation-delay: 220ms; }
.is-on .art__dots i:nth-child(3) { animation-delay: 320ms; }
.is-on .art__dots i:nth-child(4) { animation-delay: 420ms; }
.is-on .art__dots i:nth-child(5) { animation-delay: 520ms; }
.is-on .art__dots i:nth-child(6) { animation-delay: 620ms; }
.is-on .art__dots i:nth-child(7) { animation-delay: 720ms; }

@keyframes pop {
  from { opacity: 0; scale: 0.2; }
  to { opacity: 1; scale: 1; }
}

/* Три варианта поворота: один выбирается. */
.art__choice {
  position: absolute;
  inset-inline: 20%;
  top: 20%;
  display: grid;
  gap: 7px;
}

.art__choice b {
  height: 13px;
  border-radius: var(--l-radius-pill);
  border: 1px solid var(--l-line-strong);
  background: rgba(255, 255, 255, 0.05);
  opacity: 0;
}

.art__choice b:nth-child(1) { width: 84%; }
.art__choice b:nth-child(3) { width: 68%; }

.is-on .art__choice b { animation: rise 420ms var(--l-ease) both; }
.is-on .art__choice b:nth-child(3) { animation-delay: 180ms; }

/* Средний вариант — тот, который автор выбрал. */
.is-on .art__choice b:nth-child(2) {
  animation: rise 420ms var(--l-ease) 90ms both, chosen 520ms var(--l-ease) 900ms forwards;
}

@keyframes chosen {
  to {
    border-color: transparent;
    background: var(--l-accent);
    scale: 1.04;
  }
}

.art__drop {
  position: absolute;
  inset-inline-start: 50%;
  top: 39%;
  width: 2px;
  height: 0;
  border-radius: 2px;
  background: rgba(227, 178, 92, 0.6);
}

.is-on .art__drop { animation: fall 460ms var(--l-ease) 1300ms both; }

@keyframes fall {
  from { height: 0; }
  to { height: 27%; }
}

/* 05 — сцены пишутся: строки набегают одна за другой. */
.art--write {
  display: grid;
  gap: 12px;
  align-content: center;
  padding: 22px 24px;
}

.art--write > i,
.art__last i {
  display: block;
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--l-text-faint), var(--l-line-strong));
  transform-origin: left center;
  scale: 0 1;
}

.art--write > i:nth-child(1) { width: 100%; }
.art--write > i:nth-child(2) { width: 88%; }
.art--write > i:nth-child(3) { width: 96%; }
.art--write > i:nth-child(4) { width: 72%; }

.art__last {
  display: flex;
  align-items: center;
  gap: 6px;
}

.art__last i { width: 42%; }

.is-on .art--write > i,
.is-on .art__last i { animation: write 520ms var(--l-ease) both; }

.is-on .art--write > i:nth-child(2) { animation-delay: 300ms; }
.is-on .art--write > i:nth-child(3) { animation-delay: 600ms; }
.is-on .art--write > i:nth-child(4) { animation-delay: 900ms; }
.is-on .art__last i { animation-delay: 1200ms; }

@keyframes write {
  from { scale: 0 1; }
  to { scale: 1 1; }
}

.art__caret {
  width: 2px;
  height: 15px;
  border-radius: 2px;
  background: var(--l-accent-soft);
  opacity: 0;
}

.is-on .art__caret { animation: caret 900ms steps(2) 1200ms infinite; }

@keyframes caret {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* 06 — мир догоняет: в карточку героя влетает новая строка. */
.art--world {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  align-items: center;
  gap: 10px;
  padding: 16px;
}

.art__card {
  display: grid;
  gap: 9px;
  align-content: start;
  padding: 13px 12px;
  border-radius: 12px;
  border: 1px solid var(--l-line-strong);
  background: var(--l-surface-2);
  overflow: hidden;
}

.art__card span {
  font-size: 12px;
  font-weight: 650;
}

.art__card u:nth-of-type(2) { width: 68%; }

.art__new {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: var(--l-accent);
  opacity: 0;
}

.is-on .art__new { animation: slidein 700ms var(--l-ease) 320ms both; }

@keyframes slidein {
  from { opacity: 0; translate: -22px 0; }
  to { opacity: 1; translate: none; }
}

.art__side {
  display: grid;
  gap: 10px;
}

.art__side b {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--l-line-strong);
  background: var(--l-surface-2);
  font-size: 11px;
  font-weight: 600;
  color: var(--l-text-soft);
}

.art__side i {
  display: grid;
  place-items: center;
  flex: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: rgba(79, 201, 138, 0.16);
  opacity: 0;
}

.art__side i::after {
  content: '✓';
  color: #4fc98a;
  font-size: 10px;
  font-style: normal;
  line-height: 1;
}

.is-on .art__side i { animation: pop 420ms var(--l-ease) both; }
.is-on .art__side b:nth-child(1) i { animation-delay: 820ms; }
.is-on .art__side b:nth-child(2) i { animation-delay: 1120ms; }

/* ---------- Знакомо? ---------- */

/* Моменты идут по нарастанию: чем ближе к развязке, тем ярче заголовок. */
.story {
  display: grid;
  max-width: 900px;
}

.story__beat {
  display: grid;
  gap: 6px;
  padding: var(--l-gap-lg) 0;
  border-top: 1px solid var(--l-line-strong);
}

.story__beat:first-child {
  padding-top: 0;
  border-top: 0;
}

@media (min-width: 820px) {
  .story__beat {
    grid-template-columns: 0.95fr 1.05fr;
    gap: var(--l-gap-xl);
    align-items: baseline;
  }
}

.story__beat h3 {
  margin: 0;
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 600;
  letter-spacing: -0.025em;
  text-wrap: balance;
  opacity: 0.66;
  transition: opacity 260ms var(--l-ease);
}

.story__beat:nth-child(2) h3 { opacity: 0.76; }
.story__beat:nth-child(3) h3 { opacity: 0.86; }
.story__beat:nth-child(4) h3 { opacity: 0.94; }
.story__beat:nth-child(5) h3 { opacity: 1; }

.story__beat p {
  margin: 0;
  max-width: 54ch;
  color: var(--l-text-soft);
}

.story__turn {
  max-width: 900px;
  margin-top: var(--l-gap-xl);
  padding-top: var(--l-gap-lg);
  border-top: 1px solid var(--l-line-strong);
}

.story__answer {
  margin: 0 0 var(--l-gap-sm);
  max-width: 26ch;
  font-family: var(--l-serif);
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.story__note {
  margin: 0;
  max-width: 52ch;
  color: var(--l-text-soft);
  font-size: clamp(16px, 1.4vw, 18px);
}

/* ---------- Путь романа: вертикальная лента ---------- */

.flow {
  display: grid;
  gap: 0;
  position: relative;
}

.flow__item {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--l-gap);
  padding-bottom: var(--l-gap-xl);
}

.flow__item:last-child { padding-bottom: 0; }

/* Линия, соединяющая этапы. */
.flow__item::before {
  content: '';
  position: absolute;
  inset-inline-start: 27px;
  top: 46px;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--l-line-strong), transparent);
}

.flow__item:last-child::before { display: none; }

.flow__n {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 46px;
  font-family: var(--l-serif);
  font-size: 19px;
  color: var(--l-void);
  background: var(--l-accent);
  border-radius: var(--l-radius-pill);
}

.flow__body h3 {
  margin: 10px 0 8px;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.025em;
}

.flow__body p {
  margin: 0;
  max-width: 62ch;
  color: var(--l-text-soft);
}

@media (min-width: 900px) {
  .flow { grid-template-columns: repeat(2, 1fr); column-gap: var(--l-gap-xl); }
  .flow__item::before { display: none; }
  .flow__item { padding-bottom: var(--l-gap-lg); }
}

/* ---------- Три режима ---------- */

.modes {
  display: grid;
  gap: var(--l-gap);
}

@media (min-width: 900px) {
  .modes { grid-template-columns: repeat(3, 1fr); }
}

.mode {
  display: flex;
  flex-direction: column;
  gap: var(--l-gap-sm);
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: var(--l-radius-lg);
  background: linear-gradient(180deg, var(--l-surface-2), var(--l-surface));
  border: 1px solid var(--l-line);
  transition: transform 260ms var(--l-ease), border-color 260ms var(--l-ease);
}

.mode:hover {
  transform: translateY(-3px);
  border-color: var(--l-line-strong);
}

.mode__tag {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: var(--l-radius-pill);
  background: var(--l-wash);
  border: 1px solid rgba(227, 178, 92, 0.24);
  color: var(--l-accent-soft);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mode h3 {
  margin: 6px 0 0;
  font-size: clamp(22px, 2.2vw, 27px);
  font-weight: 600;
  letter-spacing: -0.025em;
}

.mode p {
  margin: 0;
  color: var(--l-text-soft);
}

/* Шкала «кто ведёт»: слева автор, справа агенты. */
.mode__scale {
  margin-top: auto;
  padding-top: var(--l-gap);
  display: grid;
  gap: 8px;
}

.mode__bar {
  height: 6px;
  border-radius: var(--l-radius-pill);
  background: var(--l-line-strong);
  overflow: hidden;
}

.mode__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--l-accent);
}

.mode__legend {
  display: flex;
  justify-content: space-between;
  color: var(--l-text-faint);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mode__who {
  margin: 0;
  color: var(--l-text-faint) !important;
  font-size: 14px;
}

.modes__note {
  margin: var(--l-gap-lg) 0 0;
  font-family: var(--l-serif);
  font-size: clamp(19px, 2.2vw, 25px);
  line-height: 1.45;
  color: var(--l-text);
  max-width: 40ch;
}

/* ---------- Мир обновляется сам ---------- */

.world {
  display: grid;
  gap: var(--l-gap);
}

@media (min-width: 780px) {
  .world { grid-template-columns: repeat(2, 1fr); }
}

.world__tile {
  position: relative;
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: var(--l-radius-lg);
  background: linear-gradient(180deg, var(--l-surface-2), var(--l-surface));
  border: 1px solid var(--l-line);
  overflow: hidden;
  transition: transform 260ms var(--l-ease), border-color 260ms var(--l-ease);
}

.world__tile:hover {
  transform: translateY(-3px);
  border-color: var(--l-line-strong);
}

.world__tile::after {
  content: '';
  position: absolute;
  inset: auto -30% -60% auto;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 178, 92, 0.11), transparent 70%);
  pointer-events: none;
}

.world__tile h3 {
  margin: 0 0 10px;
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.world__tile p { margin: 0; color: var(--l-text-soft); }

.world__note {
  margin: var(--l-gap-lg) 0 0;
  font-family: var(--l-serif);
  font-size: clamp(20px, 2.4vw, 27px);
  line-height: 1.4;
  color: var(--l-text);
  max-width: 34ch;
}

/* ---------- Почему это не чат ---------- */

.bento { display: grid; gap: var(--l-gap); }

@media (min-width: 780px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento > :first-child { grid-column: span 2; }
}

.tile {
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: var(--l-radius-lg);
  background: var(--l-surface-2);
  border: 1px solid var(--l-line);
  transition: transform 260ms var(--l-ease), border-color 260ms var(--l-ease);
}

.tile:hover { transform: translateY(-3px); border-color: var(--l-line-strong); }

.tile h3 {
  margin: 0 0 10px;
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.tile p { margin: 0; color: var(--l-text-soft); max-width: 56ch; }

.bento > :first-child {
  background:
    radial-gradient(120% 150% at 100% 0%, rgba(227, 178, 92, 0.11), transparent 62%),
    var(--l-surface-2);
}

/* ---------- Манифест ---------- */

.manifesto { text-align: center; }

.manifesto blockquote {
  margin: 0 auto;
  max-width: 22ch;
  font-family: var(--l-serif);
  font-size: clamp(32px, 5.2vw, 60px);
  line-height: 1.16;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.manifesto cite {
  display: block;
  margin-top: var(--l-gap-lg);
  color: var(--l-text-faint);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Цены ---------- */

.price {
  display: grid;
  gap: var(--l-gap-lg);
  padding: clamp(28px, 3.4vw, 48px);
  border-radius: var(--l-radius-lg);
  background: linear-gradient(180deg, var(--l-surface-2), var(--l-surface));
  border: 1px solid var(--l-line-strong);
  box-shadow: var(--l-shadow);
}

@media (min-width: 820px) {
  .price { grid-template-columns: 1fr 1fr; align-items: center; }
}

.price__amount {
  font-size: clamp(48px, 6vw, 68px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 620;
  color: var(--l-accent-soft);
}

.price__period { margin: 10px 0 0; color: var(--l-text-faint); }

.price__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--l-gap-sm);
}

.price__list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  color: var(--l-text-soft);
}

.price__list li::before {
  content: '✓';
  color: var(--l-accent-soft);
  font-weight: 700;
}

/* ---------- Вопросы ---------- */

.faq { display: grid; gap: var(--l-gap-sm); max-width: 760px; }

.faq details {
  border-radius: var(--l-radius);
  background: var(--l-surface-2);
  border: 1px solid var(--l-line);
  overflow: hidden;
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--l-gap);
  min-height: 60px;
  padding: 14px 22px;
  font-size: 17px;
  font-weight: 550;
  cursor: pointer;
  list-style: none;
}

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

.faq summary::after {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--l-text-faint);
  border-bottom: 2px solid var(--l-text-faint);
  rotate: 45deg;
  translate: 0 -2px;
  transition: rotate 220ms var(--l-ease);
}

.faq details[open] summary::after { rotate: -135deg; translate: 0 3px; }

.faq p { margin: 0; padding: 0 22px 20px; color: var(--l-text-soft); }

/* ---------- Призыв и подвал ---------- */

.final {
  position: relative;
  padding: clamp(48px, 6vw, 88px) clamp(24px, 4vw, 64px);
  border-radius: var(--l-radius-lg);
  background: linear-gradient(160deg, #1a150e 0%, #0e0c10 60%);
  border: 1px solid var(--l-line-strong);
  text-align: center;
  overflow: hidden;
}

.final::after {
  content: '';
  position: absolute;
  inset: -50% -10% auto -10%;
  height: 420px;
  background:
    radial-gradient(38% 60% at 30% 40%, rgba(227, 178, 92, 0.2), transparent 70%),
    radial-gradient(34% 52% at 74% 30%, rgba(143, 132, 201, 0.12), transparent 72%);
  pointer-events: none;
}

.final > * { position: relative; }

.final h2 {
  margin: 0 0 12px;
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 620;
}

.final p {
  margin: 0 auto var(--l-gap-lg);
  max-width: 46ch;
  color: var(--l-text-soft);
  font-size: 18px;
}

.foot {
  padding-block: var(--l-gap-xl) var(--l-gap-lg);
  border-top: 1px solid var(--l-line);
  background: var(--l-void);
}

.foot__row { display: grid; gap: var(--l-gap-lg); }

@media (min-width: 860px) {
  .foot__row { grid-template-columns: 1fr auto 1fr; align-items: center; }
  .foot__legal { text-align: end; }
}

.foot__tagline { margin: 10px 0 0; color: var(--l-text-faint); font-size: 14px; }

.foot__links { display: flex; flex-wrap: wrap; gap: var(--l-gap); }

.foot__links a { color: var(--l-text-soft); font-size: 15px; text-decoration: none; }
.foot__links a:hover { color: var(--l-text); }

.foot__legal p { margin: 0; color: var(--l-text-faint); font-size: 13px; }

/* ---------- Появление при прокрутке ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--l-ease), transform 620ms var(--l-ease);
}

[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  [data-reveal] { opacity: 1; transform: none; }
}