/* Оформление лендинга. Один файл: страница одна, и разнесение по файлам добавило бы путаницы
   раньше, чем пользы. Порядок разделов совпадает с порядком блоков в index.html — правку ищут
   тем же путём, каким читают страницу.

   Что откуда взято. Композиция и типографика — по образцу team4.agency: тёмный фон, очень
   крупные заголовки широким шрифтом, кнопки-таблетки, карточки с большим скруглением,
   надзаголовки-метки над разделами. ЦВЕТА при этом свои — ровно те, что в приложении
   (frontend/src/styles.css у vizitka_r_bot): тёмно-синяя база, синие кнопки. Сайт и
   приложение стоят рядом в одном переходе, и разная фирменная гамма читалась бы как два
   разных продукта. */

/* --- Переменные ------------------------------------------------------------------- */
:root {
  /* Взято из тёмной темы приложения: --bg, --surface, --surface-2, --accent-1, --accent-2,
     --ink, --muted, --border. Значения не подобраны на глаз, а скопированы — иначе они
     разъедутся при первой же правке приложения. */
  --bg: #0a1424;
  --surface: #101b2e;
  --surface-2: #16233a;
  --border: #223350;
  --ink: #e8f0ff;
  --muted: #8fa2c7;
  --accent: #2f6fed;
  --accent-hover: #4f8bff;
  --accent-2: #34d3f0;

  --radius: 20px;
  --radius-lg: 28px;
  --shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
  --header-h: 72px;
  --max-w: 1180px;
}

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

html { scroll-behavior: auto; } /* плавную прокрутку делает jQuery, с поправкой на шапку */

body {
  margin: 0;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* крупные заголовки на узких экранах иначе дают горизонтальную прокрутку */
}

/* --- Типографика ------------------------------------------------------------------ */
/* Заголовки — Unbounded, широкий и плотный: на нём держится весь характер страницы.
   clamp() вместо брейкпоинтов: размер меняется плавно, и заголовок не «прыгает» на
   промежуточных ширинах, где ни один брейкпоинт ещё не сработал. */
h1, h2, h3 {
  font-family: 'Unbounded', 'Manrope', sans-serif;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: #fff;
}
h1 { font-size: clamp(38px, 6.4vw, 76px); }
h2 { font-size: clamp(30px, 4.4vw, 52px); }
h3 { font-size: 21px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
p { margin: 0 0 14px; }
a { color: inherit; }
img { max-width: 100%; height: auto; }

.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 22px; }
.container-narrow { max-width: 780px; }

/* Метка над заголовком раздела: точка акцентного цвета + короткое слово капслоком. Ведёт
   взгляд к заголовку и разбивает длинную ленту одинаковых секций. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-2);
}

/* --- Кнопки ------------------------------------------------------------------------ */
/* Таблетка, как у образца. Основная — синяя из палитры приложения: человек через секунду
   окажется в приложении, и кнопка «войти» должна выглядеть там же, где нажималась. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 28px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--accent-hover); color: #fff; }

.btn-sm { padding: 10px 18px; font-size: 15px; }

/* --- Появление при прокрутке -------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* Кому системная настройка велит меньше движения — показываем всё сразу. Класс visible
   скрипт всё равно проставит, но переход и сдвиг здесь не нужны. */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover { transform: none; }
  /* Пятно замирает в исходной точке: скрипт его не двигает (см. main.js), но и здесь
     подстраховываемся — большое ползающее пятно как раз то, от чего эта настройка спасает. */
  .bg-glow { transform: translate3d(72vw, 26vh, 0) !important; }
  /* Подсветку карточек оставляем — она статична и ничего не двигает, — но убираем её
     разъезжание и подъём карточки: это как раз движение. */
  .card-plain::after, .card-plain:hover::after { transition: none; }
  .card-plain:hover, .phone:hover, .pain-now:hover { transform: none; }
  .card-plain, .card-plain::before, .phone, .phone::after,
  .pain-now, .pain-now::after { transition: none; }
}

/* --- Шапка -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Полупрозрачный фон с размытием: под шапкой едет контент, и без размытия текст
     просвечивает сквозь неё, мешая читать сами пункты меню. */
  background: rgba(10, 20, 36, 0.82);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.site-header.scrolled { border-bottom-color: var(--border); background: rgba(10, 20, 36, 0.94); }

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
/* Знак — наш логотип из приложения (та же картинка, что отдаётся на /logo.png). Подложки
   под ним нет: у самого знака прозрачный фон и синий градиент, попадающий в палитру, а
   квадрат вокруг только спорил бы с его формой. Ширина и высота стоят и в разметке — иначе
   строка шапки дёргается, пока картинка грузится. */
.logo-mark {
  width: 40px;
  height: 36px;
  object-fit: contain;
  display: block;
}
.logo-text { font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 18px; color: #fff; }

.nav { display: flex; gap: 26px; }
.nav a {
  text-decoration: none;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  transition: color 0.15s ease;
}
.nav a:hover { color: #fff; }
/* Страница, на которой человек уже стоит. Отмечается через aria-current в разметке, а не
   отдельным классом: атрибут нужен читалке в любом случае, и второй признак того же самого
   однажды разошёлся бы с первым. Подчёркивание, а не только цвет: на тёмном фоне разница
   между «приглушённый» и «белый» на глаз читается плохо. */
.nav a[aria-current='page'] {
  color: #fff;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}

.header-actions { display: flex; align-items: center; gap: 10px; }

/* Бургер: три полоски, средняя гаснет при открытии, крайние складываются в крестик. */
.burger {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  position: relative;
}
.burger span {
  position: absolute;
  left: 11px;
  width: 18px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 20px; }
.burger span:nth-child(3) { top: 25px; }
.burger.active span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger.active span:nth-child(2) { opacity: 0; }
.burger.active span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* --- Подвижное пятно на фоне -------------------------------------------------------- */
/* Свечение фирменных цветов, которое едет за прокруткой: справа налево и вниз по синусоиде
   (траекторию считает main.js). Чистый CSS вместо картинки — на тёмном фоне градиентное
   пятно весит ноль и не мылится ни на каком экране.
 *
 * position: fixed, а не absolute: пятно должно оставаться в поле зрения всю дорогу, иначе
 * оно просто уехало бы вверх вместе с первым экраном и дальше страница была бы пустой.
 * Точка отсчёта — левый верхний угол, а сам элемент сдвинут на половину своего размера
 * (margin): так координаты из скрипта означают ЦЕНТР пятна, а не угол, и по краям экрана оно
 * ведёт себя предсказуемо.
 *
 * will-change: transform — просьба к браузеру держать слой на видеокарте: пятно большое и
 * размытое, и без этого перерисовка на каждом кадре заметно тормозит прокрутку. */
.bg-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 860px;
  height: 620px;
  margin: -310px 0 0 -430px;
  background:
    radial-gradient(closest-side, rgba(47, 111, 237, 0.38), transparent 72%),
    radial-gradient(closest-side at 62% 34%, rgba(52, 211, 240, 0.20), transparent 70%);
  background-repeat: no-repeat;
  filter: blur(16px);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

/* Контент поднимаем над пятном. Без этого оно легло бы поверх текста: у .bg-glow свой слой,
   а у обычных блоков без z-index его нет. */
main, .site-footer { position: relative; z-index: 1; }

/* --- Первый экран ------------------------------------------------------------------- */
.hero { position: relative; padding: 84px 0 92px; }

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 56px;
  align-items: center;
}
.lead { font-size: 19px; color: var(--muted); margin-bottom: 28px; max-width: 34em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { margin-top: 18px; font-size: 14px; color: var(--muted); }

/* Макет телефона — чистая вёрстка, без скриншота: интерфейс приложения меняется каждую
   неделю, а подменять картинку никто не вспомнит. */
.hero-visual { display: flex; justify-content: center; }
/* Свечение вокруг макета телефона — то же, что у карточек «кому подходит», но послабее:
   первый экран и так насыщенный (заголовок, кнопки, пятно на фоне), и телефон здесь
   иллюстрация, а не то, ради чего пришли. */
.phone {
  position: relative;
  width: 300px;
  padding: 12px;
  border-radius: 38px;
  background: linear-gradient(160deg, #1b2b47 0%, #0d1729 100%);
  border: 1px solid rgba(79, 139, 255, 0.28);
  box-shadow:
    var(--shadow),
    0 10px 30px -12px rgba(79, 139, 255, 0.55);
  isolation: isolate;
  transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

/* Полоса по нижнему краю — как у карточек: она и связывает первый экран с разделом ниже. */
.phone::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -2px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-hover) 25%, var(--accent-2) 75%, transparent);
  box-shadow:
    0 0 22px 3px rgba(79, 139, 255, 0.65),
    0 0 44px 10px rgba(52, 211, 240, 0.28);
  opacity: 0.9;
  transition: left 0.28s ease, right 0.28s ease, box-shadow 0.28s ease;
}

.phone:hover {
  transform: translateY(-9px);
  border-color: rgba(79, 139, 255, 0.7);
  box-shadow:
    var(--shadow),
    0 26px 46px -14px rgba(79, 139, 255, 0.75);
}

.phone:hover::after {
  left: 4%;
  right: 4%;
  box-shadow:
    0 0 30px 5px rgba(79, 139, 255, 0.85),
    0 0 64px 16px rgba(52, 211, 240, 0.4);
}
.phone-screen {
  border-radius: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 18px;
  min-height: 440px;
}
.card-preview { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }
.card-avatar {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700;
}
.card-name { font-weight: 700; color: #fff; }
.card-tagline { font-size: 14px; color: var(--muted); }

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.chip {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--accent-2);
  border: 1px solid var(--border);
}

.skeleton-row { height: 10px; border-radius: 6px; background: var(--surface-2); margin-bottom: 9px; }
.skeleton-row.short { width: 62%; margin-bottom: 22px; }

.qr-box {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
/* Сетка «под QR»: два повторяющихся градиента крест-накрест. Это иллюстрация, а не рабочий
   код — настоящий QR тут не нужен и вводил бы в заблуждение. */
.qr-grid {
  width: 88px;
  height: 88px;
  margin: 0 auto 10px;
  background:
    repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(0deg, var(--ink) 0 6px, transparent 6px 12px);
  opacity: 0.6;
  border-radius: 4px;
}

/* --- Секции ------------------------------------------------------------------------- */
.section { padding: 96px 0; }
/* Чередование фона: соседние секции на сплошном тёмном сливаются в одну бесконечную ленту,
   и человек теряет ощущение, что страница вообще движется. */
.section-alt { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.section-head .eyebrow { justify-content: center; }
.section-sub { color: var(--muted); font-size: 18px; margin: 0; }

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

/* Лёгкий градиент, а не плоская заливка: сверху чуть светлее и с синим подтоном, книзу
   уходит в фон. На тёмной странице плоские прямоугольники сливаются в одинаковые пятна, а
   такой перелив даёт карточке объём, не превращаясь в самостоятельный цвет. */
.card {
  background: linear-gradient(160deg, rgba(47, 111, 237, 0.10) 0%, var(--surface-2) 55%, rgba(16, 27, 46, 0.92) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
/* При наведении подтон усиливается — карточка отзывается, но не меняет цвет целиком. */
.card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  background: linear-gradient(160deg, rgba(47, 111, 237, 0.18) 0%, var(--surface-2) 60%, rgba(16, 27, 46, 0.92) 100%);
}
.card p { color: var(--muted); margin: 0; }
.card h3 { color: #fff; }

/* Иконка в кружке: эмодзи само по себе на тёмном фоне теряется, подложка держит его как
   отдельный элемент карточки. */
.card-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(47, 111, 237, 0.14);
  border: 1px solid rgba(79, 139, 255, 0.25);
  display: grid;
  place-items: center;
  font-size: 24px;
  margin-bottom: 18px;
}
/* На «кому подходит» карточки без иконок — там подложка и наведение только шумели бы. */
/* На «кому подходит» градиент слабее: там три карточки подряд с одним текстом и без иконок,
   и полноценный перелив на каждой перетягивал бы внимание с самих слов. */
.card-plain {
  position: relative;
  background: linear-gradient(160deg, rgba(52, 211, 240, 0.07) 0%, rgba(22, 35, 58, 0.55) 70%);
  border-color: rgba(79, 139, 255, 0.45);
  /* isolation: карточка становится своим слоем, и слой свечения (::before, z-index: -1) не
     проваливается под фон секции. */
  isolation: isolate;
  transition: border-color 0.22s ease, transform 0.22s ease, background 0.22s ease;
}

/* Свечение вокруг ВСЕЙ карточки, не только под нижней кромкой. Отдельным слоем, потому что
   ::after занят самой полосой; z-index: -1 убирает пятно под содержимое — поверх текста оно
   читалось бы как муть. */
.card-plain::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 14px 38px -12px rgba(79, 139, 255, 0.7);
  transition: box-shadow 0.22s ease;
  pointer-events: none;
  z-index: -1;
}

/* Светящийся контур по нижнему краю. Три карточки «кому подходит» стоят рядом, одинакового
   размера и без иконок — на тёмном фоне они сливались в одну серую полосу, и было непонятно,
   что это вообще отдельные элементы, а тем более что по ним можно нажать.
 *
 * Полоса не во всю ширину, а с отступами от краёв: линия от угла до угла читается как
 * граница карточки, то есть как часть рамки, а не как подсветка. Свечение даёт box-shadow —
 * размытая копия самой линии; filter: blur() тут не годится, он размыл бы и её саму. */
.card-plain::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -1px;
  height: 4px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-hover) 20%, var(--accent-2) 80%, transparent);
  /* Два слоя: узкое синее ядро и широкий бирюзовый ореол. Одним слоем свечение либо тусклое,
     либо расплывается в пятно без чёткой линии. */
  box-shadow:
    0 0 30px 5px rgba(79, 139, 255, 0.8),
    0 0 60px 16px rgba(52, 211, 240, 0.38);
  opacity: 1;
  transition: left 0.28s ease, right 0.28s ease, opacity 0.28s ease, box-shadow 0.28s ease;
}

/* При наведении полоса растягивается почти во всю ширину и разгорается — карточка отвечает
   на курсор раньше, чем человек успевает спросить себя, нажимается ли она. */
.card-plain:hover::after {
  left: 2%;
  right: 2%;
  box-shadow:
    0 0 40px 8px rgba(79, 139, 255, 0.95),
    0 0 90px 22px rgba(52, 211, 240, 0.5);
}

/* Подъём 18px. На таком ходе карточка заметно отрывается от плоскости, поэтому и тень под ней
   разрастается сильнее всего — иначе она не «встаёт», а просто съезжает вверх. */
.card-plain:hover {
  transform: translateY(-18px);
  border-color: rgba(79, 139, 255, 0.9);
  background: linear-gradient(160deg, rgba(52, 211, 240, 0.10) 0%, rgba(22, 35, 58, 0.55) 70%);
}

.card-plain:hover::before { box-shadow: 0 40px 60px -16px rgba(79, 139, 255, 0.85); }

/* --- Шаги --------------------------------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step {
  position: relative;
  background: linear-gradient(160deg, rgba(47, 111, 237, 0.10) 0%, var(--surface-2) 55%, rgba(16, 27, 46, 0.92) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
}
.step p { color: var(--muted); margin: 0; }
.step-num {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  margin-bottom: 18px;
}

/* --- Вопросы ------------------------------------------------------------------------ */
.faq { margin-top: 8px; }
.faq-item {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  padding: 0 22px;
  transition: border-color 0.18s ease;
}
.faq-item.open { border-color: var(--accent); }
.faq-q {
  width: 100%;
  padding: 20px 40px 20px 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  position: relative;
}
/* Плюс/минус — символом, а не иконкой: одна строка вместо файла и лишнего запроса. */
.faq-q::after {
  content: '+';
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 400;
  color: var(--accent-2);
}
.faq-item.open .faq-q::after { content: '–'; }
.faq-a { display: none; padding-bottom: 20px; color: var(--muted); }
.faq-a p { margin: 0; }

/* --- Призыв ------------------------------------------------------------------------- */
.cta { padding: 40px 0 110px; }
.cta-inner {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 64px 32px;
  border-radius: 36px;
  background: linear-gradient(135deg, rgba(47, 111, 237, 0.22) 0%, rgba(52, 211, 240, 0.12) 100%);
  border: 1px solid var(--border);
}
.cta-inner p { color: var(--muted); font-size: 18px; margin: 0 auto 28px; max-width: 44em; }
.cta-inner .hero-actions { justify-content: center; }

/* --- Подвал ------------------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--border); padding: 48px 0 28px; background: var(--surface); }
.footer-inner { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.footer-note { color: var(--muted); font-size: 15px; margin-top: 12px; max-width: 28em; }
.footer-nav { display: flex; flex-direction: column; gap: 10px; }
.footer-nav a { color: var(--muted); text-decoration: none; font-size: 15px; transition: color 0.15s ease; }
.footer-nav a:hover { color: #fff; }
.footer-bottom {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--muted);
}

/* --- Узкие экраны ------------------------------------------------------------------- */
@media (max-width: 900px) {
  .section { padding: 72px 0; }
  .hero { padding: 56px 0 64px; }
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  /* Телефон уходит наверх: на узком экране он служит картинкой к заголовку, а под текстом
     его увидел бы только тот, кто дочитал. */
  .hero-visual { order: -1; }
  .lead { margin-left: auto; margin-right: auto; }
  .grid, .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .section { padding: 56px 0; }
  .cta { padding: 24px 0 72px; }
  .cta-inner { padding: 44px 20px; border-radius: 28px; }
  .grid, .steps { grid-template-columns: 1fr; }
  .section-head { margin-bottom: 36px; }
  .phone { width: 264px; }

  /* Меню уезжает под шапку отдельной панелью: четыре пункта и кнопка по горизонтали на узкий
     экран не помещаются. */
  .nav {
    display: none;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 8px 22px 18px;
  }
  .nav.open { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 16px; }
  .nav a:last-child { border-bottom: 0; }
  .burger { display: block; }
  /* Кнопка из шапки на узком экране не нужна: та же ссылка есть на первом экране и в
     раскрытом меню, а в строке с логотипом и бургером ей просто не хватает места. */
  .header-actions .btn { display: none; }
  .footer-inner { flex-direction: column; gap: 24px; }
}

/* --- Внутренние страницы (organizers.html и будущие) -------------------------------- */
/* Первый экран разворота ниже главного: там нет макета телефона, и прежняя высота оставляла
   полупустой экран. Заголовок тоже меньше — на развороте он не единственное, ради чего
   человек пришёл, а начало длинного рассказа. */
.hero-inner-page { padding: 40px 0 56px; }
.hero-inner-page h1 { font-size: clamp(32px, 4.6vw, 54px); }
.hero-inner-page .lead { max-width: 40em; }

/* Возврат к разделу «Кому подходит». Стрелка слева, а не «Назад» браузера: страницу
   открывают и по прямой ссылке, где истории переходов нет вовсе. */
.back-link {
  display: inline-block;
  margin-bottom: 22px;
  color: var(--muted);
  font-size: 15px;
  text-decoration: none;
  transition: color 0.15s ease;
}
.back-link:hover { color: #fff; }

/* --- «Знакомо?»: боль и ответ парами ------------------------------------------------ */
.pain-list { display: flex; flex-direction: column; gap: 14px; }

/* Две колонки равной ширины: «обычно» слева, «здесь» справа — читается как одно движение
   слева направо, от проблемы к решению. */
.pain-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.pain-was, .pain-now {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.pain-was { background: rgba(16, 27, 46, 0.6); }
.pain-was p { color: var(--muted); margin: 0; }
/* Ответ подсвечен фирменным подтоном: взгляд должен цепляться именно за него.
 *
 * Оформление то же, что у карточек «Кому подходит» на главной: светящаяся полоса по нижнему
 * краю, ореол вокруг всей карточки и подъём при наведении. Так «Здесь» на всех разворотах
 * читается одним и тем же приёмом — человек, пришедший с главной, узнаёт его сразу и понимает,
 * какая половина пары про приложение. Левая колонка («Обычно») намеренно остаётся тусклой:
 * подсвечивать обе — значит не подсветить ни одну. */
.pain-now {
  position: relative;
  background: linear-gradient(160deg, rgba(47, 111, 237, 0.14) 0%, var(--surface-2) 70%);
  border-color: rgba(79, 139, 255, 0.35);
  transition: border-color 0.22s ease, transform 0.22s ease;
}
.pain-now p { margin: 0; }

/* Полоса по нижнему краю: два слоя свечения — узкое синее ядро и широкий бирюзовый ореол.
   Одним слоем оно либо тусклое, либо расплывается в пятно без чёткой линии. */
/* Полоса по нижнему краю — сдержанный вариант: тонкая, с отступами от краёв и одним слоем
   свечения. Это тот же приём, что на главной, но вполсилы: на развороте таких пар пять
   подряд, и подсветка «на полную» у каждой превратила бы страницу в гирлянду. */
.pain-now::after {
  content: '';
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-hover) 30%, var(--accent-2) 70%, transparent);
  box-shadow: 0 0 16px 1px rgba(79, 139, 255, 0.45);
  opacity: 0.7;
  transition: left 0.28s ease, right 0.28s ease, opacity 0.28s ease, box-shadow 0.28s ease;
}

.pain-now:hover {
  transform: translateY(-3px);
  border-color: rgba(79, 139, 255, 0.45);
}
.pain-now:hover::after {
  left: 5%;
  right: 5%;
  opacity: 1;
  box-shadow: 0 0 28px 4px rgba(79, 139, 255, 0.6);
}

.pain-label {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.pain-label-ok { color: var(--accent-2); }

/* --- Этапы события ------------------------------------------------------------------ */
.stage { margin-bottom: 52px; }
.stage:last-child { margin-bottom: 0; }
.stage-head { margin-bottom: 22px; }
.stage-head h3 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; margin: 0; }

/* Метка этапа таблеткой: она повторяется четыре раза и должна читаться как один и тот же
   тип элемента, а не как ещё один подзаголовок. */
.stage-num {
  display: inline-block;
  margin-bottom: 10px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(47, 111, 237, 0.16);
  border: 1px solid rgba(79, 139, 255, 0.3);
  color: var(--accent-2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }

/* Четыре в ряд — только для «Кому подходит»: разворотов ровно столько, и пятой карточке
   взяться неоткуда. Базовая .grid (три колонки) оставила бы четвёртую висеть одну во втором
   ряду — читается как «забыли дописать», а не как полный список. Дальше ряд ломается на
   2×2 (см. брейкпоинт 900px ниже) и в столбик на телефоне — правило .grid там же. */
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Оговорка о том, чего приложение не делает. Намеренно не карточка: это реплика от автора
   страницы, а не ещё один пункт списка достоинств. */
.honest-note {
  max-width: 60em;
  margin: 28px auto 0;
  padding-left: 16px;
  border-left: 2px solid var(--border);
  color: var(--muted);
  font-size: 16px;
}

@media (max-width: 900px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  /* Ровно 2×2, а не «три и один»: четыре разворота — законченный список, и ломать его
     надо симметрично. */
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  /* Пары «обычно/здесь» в одну колонку: на узком экране две колонки по 150px превращают
     каждую фразу в столбик из отдельных слов. */
  .pain-row { grid-template-columns: 1fr; gap: 8px; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
  .stage { margin-bottom: 36px; }
}

/* Карточка «кому подходит», ведущая на свою страницу. Отличается от соседних только
   стрелкой и откликом на наведение: разворот есть пока у одной из трёх, и подчёркивать это
   сильнее — значит обесценивать две другие. */
.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.card-link:hover { border-color: var(--accent); transform: translateY(-3px); }
.card-more {
  display: inline-block;
  margin-top: 14px;
  color: var(--accent-2);
  font-weight: 600;
  font-size: 15px;
}

/* Ссылка внутри оговорки: подчёркиванием, а не цветом-заливкой — это часть предложения, а не
   кнопка. */
.honest-note a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }


/* ================= Открытие страницы кругом ================= */
/*
 * Первые мгновения страница — тёмный экран, из центра расходится круг и открывает то, что
 * внутри него. Тёмный фон брать неоткуда не нужно: он и так у страницы, а круг вырезает
 * видимую область из содержимого.
 *
 * Почему clip-path на обёртке, а не затемняющий слой с растущей дырой: дыру в слое пришлось
 * бы вырезать маской, а маски с анимацией размера ведут себя по-разному в браузерах. Обрезка
 * же — одно свойство, которое анимируется везде одинаково.
 *
 * Важное следствие: clip-path создаёт систему координат для потомков, и position: sticky
 * внутри такой обёртки перестаёт липнуть — липкая шапка сайта уезжала бы вверх вместе со
 * страницей. Поэтому класс СНИМАЕТСЯ, как только круг раскрылся (setupIntro() в js/main.js),
 * и дальше страница живёт как обычно, без обёртки над собой.
 */
.page-intro {
  animation: intro-circle 1.6s cubic-bezier(0.45, 0, 0.3, 1) forwards;
}

@keyframes intro-circle {
  /* Ноль в начале — чтобы не мелькнуло содержимое до старта. 150% в конце: круг должен
     покрыть углы экрана, а до них дальше, чем до краёв (диагональ длиннее стороны). */
  from { clip-path: circle(0% at 50% 50%); }
  to { clip-path: circle(150% at 50% 50%); }
}

@media (prefers-reduced-motion: reduce) {
  /* Никакого раскрытия: страница сразу видна целиком. */
  .page-intro { animation: none; clip-path: none; }
}