/*
 * Лендинг (/ и /welcome). Дополняет site.css — сам по себе не самодостаточен.
 * Инлайн-скриптов нет (CSP на проде их запрещает), почти всё состояние —
 * :hover/:focus-visible. Единственное исключение — блок «Try it»: его рисует
 * отдельный мини-бандл /landing/demo.js со своими стилями /landing/demo.css
 * (client/src/landing-demo). Здесь остаётся только рамка и подсказка для случая
 * «скрипт не приехал» — они обязаны работать без него.
 *
 * Страница построена на вертикальном ритме, а не на сетке карточек: центрированный
 * первый экран, дальше четыре problem-блока «маркер → боль → решение → снимок».
 * Главный визуальный приём (сигнатура) — HUD-уголки .hud/.brk на рамках снимков и
 * на карточках беты. Теней нет, разделители — волосяные линии на фиолетовом подтоне.
 */

/* ── Зерно ─────────────────────────────────────────────────────────────────── */

/* Плёночное зерно поверх всей витрины: SVG feTurbulence как data-URI (CSP на проде —
   `img-src 'self' data: blob:`, так что data-фон разрешён). Живёт на псевдоэлементе
   .landing-main, а не body, чтобы юридические страницы (общий site.css) остались
   чистыми. position: fixed привязывает слой к вьюпорту, pointer-events: none снимает
   его с пути кликов, z-index 40 кладёт над липкой шапкой (z-index 20), но под
   skip-link (60). Непрозрачность 0.03 — на грани заметности, это фактура, не эффект. */
.landing-main::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ── HUD-уголки (сигнатура страницы) ───────────────────────────────────────── */

/* Четыре уголка по 12px на углах рамки. Псевдоэлементов у одного узла всего два,
   поэтому внутрь рамки кладётся пустой <span class="brk" aria-hidden="true">, который
   рисует вторую пару. Смещение -1px сажает уголок ровно на волосяную рамку, поэтому
   у .hud НЕ должно быть overflow: hidden — иначе уголки срежет. */
.hud {
  position: relative;
}

.hud::before,
.hud::after,
.hud > .brk::before,
.hud > .brk::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border: 0 solid var(--line-gold);
  pointer-events: none;
  transition: border-color 0.22s ease;
}

.hud::before {
  top: -1px;
  left: -1px;
  border-top-width: 1px;
  border-left-width: 1px;
}

.hud::after {
  right: -1px;
  bottom: -1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
}

.hud > .brk {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hud > .brk::before {
  top: -1px;
  right: -1px;
  border-top-width: 1px;
  border-right-width: 1px;
}

.hud > .brk::after {
  bottom: -1px;
  left: -1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
}

.hud:hover::before,
.hud:hover::after,
.hud:hover > .brk::before,
.hud:hover > .brk::after {
  border-color: var(--gold);
}

/* ── Маркер секции ─────────────────────────────────────────────────────────── */

/* `01 / The board`: номер золотом, подпись — приглушённая, дальше волосяная линия
   до правого края. Используется и с номером (problem-блоки), и без него (заголовки
   «Also in the box» / «Honest small print»). */
.marker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}

.marker::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--line-soft);
}

.marker__num {
  font-weight: 700;
  color: var(--gold);
}

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

.hero {
  position: relative;
  padding: clamp(64px, 8vw, 108px) 0 clamp(40px, 5vw, 64px);
  text-align: center;
}

/* Одно фиолетовое пятно за заголовком вместо прежней пары «hero-градиентов».
   Центр остаётся почти чёрным, чтобы H1 держал контраст. Ширина — в % от секции,
   а НЕ в vw: у .hero нет overflow: hidden (иначе срезало бы вынос пятна вверх),
   поэтому любое значение шире 100% давало горизонтальный скролл на мобильном. */
.hero::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -180px;
  width: min(1080px, 100%);
  height: 700px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--glow-v), transparent 72%);
  opacity: 0.55;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

.hero .eyebrow {
  margin-bottom: 26px;
}

.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(44px, 7vw, 84px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--chalk);
}

.hero__sub {
  margin: 28px auto 0;
  max-width: 62ch;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.65;
  color: var(--chalk-dim);
}

/* Строка-расширитель под H1-крюком: геймдев — клин, но дверь для «любого проекта,
   команда или соло» открыта явно. Мельче и глуше sub, чтобы не спорить с ним. */
.hero__aside {
  margin: 14px auto 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--mute);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 38px;
}

.hero__note {
  margin: 24px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--mute);
}

/* ── Problem-блоки ─────────────────────────────────────────────────────────── */

.probs {
  padding: 0 0 clamp(88px, 11vw, 132px);
}

/* Липкая шапка перекрывает якорь `#features` на первом блоке — компенсируем. */
.prob {
  scroll-margin-top: 92px;
}

.prob + .prob {
  margin-top: clamp(88px, 11vw, 136px);
}

.prob__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-bottom: 40px;
}

.prob__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(27px, 3.4vw, 44px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--chalk);
  text-wrap: balance;
}

.prob__text {
  margin: 0;
  max-width: 56ch;
  font-size: 16px;
  line-height: 1.7;
  color: var(--chalk-dim);
}

/* ── Снимки продукта ───────────────────────────────────────────────────────── */

/* Рамка держит пропорцию 16:10 и заранее занимает место (width/height у <img> +
   aspect-ratio): когда сюда встанет пересобранный PNG, страница не дёрнется.
   Внутренний отступ 8px — паспарту: уголки .hud садятся на внешнюю рамку и не лезут
   на сам скриншот. Свечение одно и сдержанное, теней у рамки нет. */
.shot {
  margin: 0;
  min-width: 0;
}

.shot__frame {
  padding: 8px;
  border: 1px solid var(--line);
  background: var(--ink-raised);
  box-shadow: 0 40px 110px -60px var(--glow-v);
}

.shot__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid var(--line-soft);
  background: var(--panel);
}

.shot__cap {
  display: grid;
  gap: 6px;
  margin-top: 20px;
  max-width: 64ch;
  font-size: 14px;
  line-height: 1.65;
  color: var(--mute);
}

.shot__cap b {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chalk-dim);
}

/* ── Живая доска («Try it») ────────────────────────────────────────────────── */

/* Рамка повторяет .shot__frame: те же уголки .hud, то же паспарту 8px и то же
   сдержанное свечение — секция должна читаться как ещё один «кадр продукта»,
   только живой. */
.demo__frame {
  padding: 8px;
  border: 1px solid var(--line);
  background: var(--ink-raised);
  box-shadow: 0 40px 110px -60px var(--glow-v);
}

/* Пропорция задана здесь, а не бандлом: место под доску зарезервировано ещё до
   того, как скрипт загрузится, поэтому монтирование не двигает страницу. Точечная
   сетка тоже статична — канва React Flow ничего не рисует поверх (см. demo.css),
   и на странице без JS рамка выглядит так же. */
.demo__mount {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background-color: #0a0a10;
  background-image: radial-gradient(circle, rgba(154, 106, 255, 0.17) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: 12px 12px;
}

/* Подсказка для выключенного/упавшего JS. Скрипт сносит её перед первым рендером,
   поэтому одновременно с доской она не показывается. */
.demo__fallback {
  margin: 0;
  padding: 0 24px;
  max-width: 46ch;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: var(--mute);
}

/* ── Секции ────────────────────────────────────────────────────────────────── */

.sect {
  padding: clamp(84px, 10vw, 124px) 0;
  border-top: 1px solid var(--line-soft);
  scroll-margin-top: 92px;
}

.sect__title {
  margin: 0 0 36px;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--chalk);
}

/* ── «Also in the box» ─────────────────────────────────────────────────────── */

/* Ряд mono-чипов, а не карточки: это перечисление возможностей второго плана,
   и оно не должно спорить с problem-блоками по весу. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.35;
  color: var(--chalk-dim);
}

.chip::before {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  background: var(--gold);
}

/* ── Бета ──────────────────────────────────────────────────────────────────── */

.beta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.note {
  padding: 26px 28px 28px;
  border: 1px solid var(--line);
  background: var(--ink-raised);
}

.note__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--chalk);
}

.note__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
}

/* Предупреждение остаётся золотым: это единственная нота, которую нужно прочитать
   до регистрации, и золото — акцент «важного» во всей палитре. */
.note--warn {
  border-color: var(--line-gold);
  background: rgba(201, 168, 76, 0.05);
}

.note--warn .note__title {
  color: var(--gold-bright);
}

/* ── Финальный призыв ──────────────────────────────────────────────────────── */

.cta-band {
  padding: clamp(96px, 12vw, 140px) 0;
  border-top: 1px solid var(--line-soft);
  text-align: center;
}

.cta-band__title {
  margin: 0 auto;
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: clamp(30px, 4.6vw, 56px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--chalk);
}

.cta-band__text {
  margin: 22px auto 0;
  max-width: 54ch;
  font-size: 16px;
  line-height: 1.7;
  color: var(--chalk-dim);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 36px;
}

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

/* Ниже этого порога пять карточек в три колонки ужимаются fitView'ом до
   нечитаемого масштаба, поэтому бандл раскладывает тот же граф вертикальной
   лесенкой (LayoutMode narrow), а рамка меняет пропорцию на фиксированную высоту:
   при чистой пропорции 3/5 на 640px рамка выросла бы под 1000px.
   ЗАПРОС ОБЯЗАН СОВПАДАТЬ с NARROW_MEDIA_QUERY в client/src/landing-demo/graph.ts.
   Высота фиксированная, значит место по-прежнему зарезервировано и сдвига нет. */
@media (max-width: 700px) {
  .demo__mount {
    aspect-ratio: auto;
    height: 600px;
  }
}

@media (min-width: 760px) {
  .beta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (min-width: 900px) {
  /* Заголовок и абзац решения — в две колонки, прижатые к нижнему краю: так блок
     читается как разворот, а не как ещё один центрированный стек. */
  .prob__head {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 24px 64px;
    align-items: end;
    margin-bottom: 48px;
  }

  .prob__text {
    padding-bottom: 4px;
  }
}