/* ─────────────────────────────────────────────────────────────────────────
 * LayerPx — лендинг layerpx.com
 *
 * Числа — из хендоффа v3:
 * `docs/design/design_handoff_layerpx_canvas_dashboard/README.md`, раздел
 * «0. Marketing landing page» и «Design Tokens», и из самого макета
 * `LayerPx Landing.dc.html`. Макет переносился вручную: инлайн-стили и
 * `<x-dc>`-рантайм дизайн-инструмента в продукт не идут (ТЗ §3.1).
 *
 * Страница на сайте одна — английская. Русская жила на `/ru/` и с деплоя
 * снята словом владельца 2026-08-19 (D-098, основной язык продукта —
 * английский); страница и её шрифты лежат в `docs/archive/landing-ru/`.
 * Вместе с ней отсюда ушла вся ветка по языку документа, гарнитуры кабинета
 * и стили переключателя языка.
 *
 * Владелец знает, что часть секций макета показывает функции вне V1 — стрик,
 * XP, уровни, публичные борды, ленту активности — и принял это (D-098).
 * ───────────────────────────────────────────────────────────────────────── */

/* ── Шрифты ───────────────────────────────────────────────────────────────
 *
 * Самохостинг, а не Google Fonts: страница обязана грузиться нулём внешних
 * запросов (ТЗ §3.3) — из России CDN шрифтов бывает медленным.
 *
 * Набор один, гарнитуры макета: Gabarito, Unbounded, DM Mono.
 *
 * Gabarito и Unbounded вариативные (ось `wght` целиком), поэтому на семейство
 * хватает файла на подмножество. DM Mono вариативным не бывает — взято
 * единственное начертание, которое использует макет, 500. `unicode-range` —
 * дословно из ответа `css2`.
 *
 * Кириллическое подмножество Unbounded объявлено и остаётся в `fonts/`: у
 * английской страницы кириллицы нет, поэтому `unicode-range` его не пускает
 * и браузер файл не качает — на вес страницы он не влияет. */
@font-face {
  font-family: "Gabarito";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/gabarito-latin.woff2") format("woff2");
  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: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/dmmono-500-latin.woff2") format("woff2");
  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: "Unbounded";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/unbounded-latin.woff2") format("woff2");
  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: "Unbounded";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/unbounded-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ── Токены ───────────────────────────────────────────────────────────────
 * Раздел «Design Tokens» README, дословно. Имена — как в `apps/web/src/
 * styles/tokens.css`, чтобы лендинг и кабинет читались одним словарём. */
:root {
  /* Гарнитуры макета. */
  --lpx-font-ui: "Gabarito", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", sans-serif;
  --lpx-font-display: "Unbounded", "Gabarito", system-ui, sans-serif;
  --lpx-font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --lpx-ink: #14120f;
  --lpx-ink-65: rgba(20, 18, 15, 0.65);
  --lpx-ink-60: rgba(20, 18, 15, 0.6);
  --lpx-ink-50: rgba(20, 18, 15, 0.5);
  --lpx-ink-45: rgba(20, 18, 15, 0.45);
  --lpx-ink-40: rgba(20, 18, 15, 0.4);
  --lpx-ink-35: rgba(20, 18, 15, 0.35);
  --lpx-hairline: rgba(20, 18, 15, 0.08);
  --lpx-field: rgba(20, 18, 15, 0.05);
  --lpx-page: #efede7;
  --lpx-surface: #fbfaf7;
  --lpx-white: #fff;
  --lpx-lime: #c9ff3d;
  --lpx-blue: #1f5bff;
  --lpx-blue-hover: #0b3ecc;
  --lpx-violet: #7b4dff;

  --lpx-pastel-violet: #efe2ff;
  --lpx-pastel-blue: #d9eeff;
  --lpx-pastel-green: #cff3dd;
  --lpx-pastel-yellow: #ffe9a6;
  --lpx-pastel-pink: #ffb4c6;

  /* Масштаб мок-канваса героя. 1 — как в макете; на узких экранах
     переопределяется медиазапросами (см. «Адаптив»). */
  --mock-s: 1;
}

/* ── База ─────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--lpx-surface);
  color: var(--lpx-ink);
  font: 400 16px/1.5 var(--lpx-font-ui);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: var(--lpx-blue);
  text-decoration: none;
}
a:hover {
  color: var(--lpx-blue-hover);
}

h1,
h2 {
  font-family: var(--lpx-font-display);
  font-weight: 800;
  color: var(--lpx-ink);
  text-wrap: pretty;
}

/* Видимый фокус: кнопки здесь — ссылки, и клавиатурный обход обязан быть
   заметен на светлом фоне. */
a:focus-visible {
  outline: 2px solid var(--lpx-blue);
  outline-offset: 3px;
  border-radius: 6px;
}

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}

.mono {
  font-family: var(--lpx-font-mono);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ── Знак лого ────────────────────────────────────────────────────────────
 * Три косые плашки, README «Logo (`1a`)». Числа даны для лок-апа 34px и
 * пересчитываются пропорцией через `--m` (масштаб к 34): так число из
 * README остаётся числом, а не переписанным вручную.
 *
 * `skewX(-18deg)` живёт внутри анимируемого `transform` — README требует
 * этого прямо: «The skew must stay inside the animated transform —
 * replacing it drops the mark's slant mid-flight». */
.logo {
  display: flex;
  align-items: center;
  gap: 11px;
}

/* Лок-ап навигации — знак 30px при типе 20px, футера — 24px при 15px.
   README: «In the 262px sidebar the same lockup renders at 30px mark / 20px
   type», то есть кегль слова задан отдельно и пропорции знака не повторяет. */
.logo--nav {
  --m: 0.882;
}
.logo--nav .logo-word {
  font-size: 20px;
}
.logo--footer {
  --m: 0.706;
  gap: 9px;
}
.logo--footer .logo-word {
  font-size: 15px;
}

.logo-mark {
  position: relative;
  flex: none;
  width: calc(34px * var(--m));
  height: calc(34px * var(--m));
}

.logo-bar {
  position: absolute;
  border-radius: calc(4px * var(--m));
  transform: skewX(-18deg);
}

/* Верхняя 20×9 в (8,3) `rgba(20,18,15,.2)`; средняя 26×11 в (0,11) лаймовая;
   нижняя 26×11 в (5,19) чернильная. */
.logo-bar--top {
  left: calc(8px * var(--m));
  top: calc(3px * var(--m));
  width: calc(20px * var(--m));
  height: calc(9px * var(--m));
  background: rgba(20, 18, 15, 0.2);
}
.logo-bar--mid {
  left: 0;
  top: calc(11px * var(--m));
  width: calc(26px * var(--m));
  height: calc(11px * var(--m));
  background: var(--lpx-lime);
}
.logo-bar--bottom {
  left: calc(5px * var(--m));
  top: calc(19px * var(--m));
  width: calc(26px * var(--m));
  height: calc(11px * var(--m));
  background: var(--lpx-ink);
}

.logo-word {
  font: 800 calc(25px * var(--m)) / 1 var(--lpx-font-display);
  letter-spacing: -0.02em;
  color: var(--lpx-ink);
}
.logo-word span {
  color: var(--lpx-blue);
}

/* Сборка знака при загрузке (README «Animated logo»): снизу вверх, 500 мс,
   стагger 160 мс — задержки 100 / 260 / 420 мс, `fill-mode: both`. */
@keyframes lpxlayer {
  from {
    opacity: 0;
    transform: skewX(-18deg) translate(-14px, 8px);
  }
  to {
    opacity: 1;
    transform: skewX(-18deg) translate(0, 0);
  }
}

.logo--intro .logo-bar {
  opacity: 0;
  animation: lpxlayer 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.logo--intro .logo-bar--bottom {
  animation-delay: 0.1s;
}
.logo--intro .logo-bar--mid {
  animation-delay: 0.26s;
}
.logo--intro .logo-bar--top {
  animation-delay: 0.42s;
}

/* ── Кнопки ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 14px;
  font: 600 16px/1 var(--lpx-font-ui);
  white-space: nowrap;
  transition: transform 0.14s ease-out, box-shadow 0.14s ease-out;
}
.btn:hover {
  transform: translateY(-1px);
}

.btn--primary {
  background: var(--lpx-ink);
  color: var(--lpx-white);
  padding: 15px 24px;
}
.btn--primary:hover {
  color: var(--lpx-white);
  box-shadow: 0 6px 20px rgba(20, 18, 15, 0.18);
}
.btn--primary .plus {
  color: var(--lpx-lime);
}

.btn--ghost {
  background: var(--lpx-white);
  border: 1px solid rgba(20, 18, 15, 0.1);
  color: var(--lpx-ink);
  font-weight: 500;
  padding: 15px 20px;
  gap: 9px;
}
.btn--ghost:hover {
  color: var(--lpx-ink);
  box-shadow: 0 2px 8px rgba(20, 18, 15, 0.07);
}

/* ── Навигация ────────────────────────────────────────────────────────── */
.nav {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 22px;
  padding-bottom: 22px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
  font: 400 14.5px/1 var(--lpx-font-ui);
}
.nav-links a {
  color: var(--lpx-ink-65);
}
.nav-links a:hover {
  color: var(--lpx-ink);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 14px;
}

.nav-login {
  font: 500 14.5px/1 var(--lpx-font-ui);
  color: var(--lpx-ink);
  padding: 11px 4px;
}
.nav-login:hover {
  color: var(--lpx-ink);
}
.nav-cta {
  border-radius: 12px;
  padding: 11px 18px;
  font-size: 14.5px;
  gap: 7px;
}

/* ── Герой ────────────────────────────────────────────────────────────── */
.hero {
  padding-top: 56px;
  padding-bottom: 40px;
}

.hero-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--lpx-field);
  border-radius: 999px;
  padding: 6px 12px 6px 8px;
  width: fit-content;
  margin: 0 0 26px;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--lpx-ink);
}

.dot-lime {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--lpx-lime);
  box-shadow: 0 0 0 3px rgba(201, 255, 61, 0.35);
}

.hero-grid {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.hero-copy {
  flex: 1 1 440px;
  max-width: 520px;
}

/* 62px макета — под английское «A planner / you have to / keep alive». */
.hero-copy h1 {
  margin: 0;
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.hero-copy h1 .accent {
  color: var(--lpx-blue);
}

.hero-lead {
  margin: 22px 0 0;
  font-size: 18px;
  line-height: 1.5;
  color: var(--lpx-ink-60);
  max-width: 420px;
  text-wrap: pretty;
}

.hero-ctas {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.hero-proof {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}

.avatars {
  display: flex;
  flex: none;
}
.avatars span {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid var(--lpx-surface);
  font: 600 10px/24px var(--lpx-font-ui);
  text-align: center;
  color: var(--lpx-ink);
}
.avatars span + span {
  margin-left: -10px;
}
.avatars .a1 {
  background: var(--lpx-violet);
  color: var(--lpx-white);
}
.avatars .a2 {
  background: var(--lpx-pastel-pink);
}
.avatars .a3 {
  background: var(--lpx-pastel-green);
}
.avatars .a4 {
  background: var(--lpx-ink);
  color: var(--lpx-white);
  font-size: 9px;
}

.hero-proof p {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--lpx-ink-50);
}

/* ── Мок-канвас героя ─────────────────────────────────────────────────────
 * Статическая картина по числам README: 46px командная строка, сетка 28px,
 * дерево в четыре уровня в системе координат 520×424, кривые — одним SVG-
 * слоем позади карточек. Интерактива нет и не должно быть (ТЗ §3.2.5).
 *
 * Вырезано против макета: стрик-пилюля в командной строке и пилюля
 * «+40 XP today» (ТЗ §3.2.2) — стрика и XP в V1 нет.
 *
 * Масштабирование на узких экранах: рамка держит ширину колонки, а картина
 * внутри уменьшается. Приём — `width: calc(100% / s)` до `scale(s)`: рамка
 * после трансформации ровно 100%, а координатное пространство 520×424
 * ужимается до 520·s и на 390px помещается без горизонтальной прокрутки. */
.hero-mock {
  flex: 1 1 520px;
  min-width: min(520px, 100%);
  max-width: 700px;
  height: calc(470px * var(--mock-s));
  overflow: hidden;
}

.mock {
  position: relative;
  width: calc(100% / var(--mock-s));
  height: 470px;
  transform: scale(var(--mock-s));
  transform-origin: top left;
  border-radius: 26px;
  background: var(--lpx-white);
  border: 1px solid var(--lpx-hairline);
  box-shadow: 0 20px 60px rgba(20, 18, 15, 0.09);
  overflow: hidden;
}

.mock-bar {
  position: relative;
  z-index: 3;
  height: 46px;
  border-bottom: 1px solid var(--lpx-hairline);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 2px;
  background: var(--lpx-white);
}

.mock-add {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--lpx-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mock-sep {
  width: 1px;
  height: 16px;
  background: rgba(20, 18, 15, 0.1);
  margin: 0 10px;
}

.mock-crumb {
  font: 400 12.5px/1 var(--lpx-font-ui);
  color: var(--lpx-ink-45);
}
.mock-title {
  font: 600 13.5px/1 var(--lpx-font-ui);
  color: var(--lpx-ink);
  margin-left: 6px;
}
.mock-spacer {
  flex: 1;
}
.mock-streak {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--lpx-ink);
  border-radius: 999px;
  padding: 5px 10px;
}
.mock-streak span {
  font: 600 11px/1 var(--lpx-font-ui);
  color: var(--lpx-lime);
}

.mock-canvas {
  position: absolute;
  inset: 46px 0 0 0;
  background-image: linear-gradient(rgba(20, 18, 15, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 18, 15, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
}

.mock-edges {
  position: absolute;
  left: 0;
  top: 0;
}

.mock-node {
  position: absolute;
  border-radius: 14px;
  padding: 12px 17px;
  font: 500 15px/1 var(--lpx-font-ui);
  color: var(--lpx-ink);
}

.mock-root {
  left: 24px;
  top: 160px;
  background: var(--lpx-pastel-yellow);
  border-radius: 16px;
  padding: 14px 20px;
  font-size: 18px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(20, 18, 15, 0.08);
}
.mock-n1 {
  left: 186px;
  top: 74px;
  background: var(--lpx-pastel-blue);
}
.mock-n2 {
  left: 186px;
  top: 188px;
  background: var(--lpx-pastel-green);
}
.mock-n3 {
  left: 186px;
  top: 294px;
  background: var(--lpx-pastel-violet);
}
/* Карточка-задача: 5px левая кромка в цвете владельца (README «Node cards»). */
.mock-task {
  position: absolute;
  left: 344px;
  top: 36px;
  width: 158px;
  background: var(--lpx-white);
  border: 1px solid rgba(20, 18, 15, 0.09);
  border-left: 5px solid var(--lpx-violet);
  border-radius: 14px;
  padding: 11px 14px;
  box-shadow: 0 2px 6px rgba(20, 18, 15, 0.07);
}
.mock-task-title {
  font: 500 14px/1.2 var(--lpx-font-ui);
  color: var(--lpx-ink);
  margin-bottom: 8px;
}
.mock-task-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mock-task-avatar {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--lpx-pastel-pink);
  font: 600 8px/18px var(--lpx-font-ui);
  color: var(--lpx-ink);
  text-align: center;
}
.mock-date {
  font-size: 9px;
  line-height: 1;
  color: var(--lpx-ink-45);
  background: var(--lpx-field);
  padding: 4px 6px;
  border-radius: 5px;
}

.mock-done {
  position: absolute;
  left: 344px;
  top: 124px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--lpx-pastel-green);
  border-radius: 14px;
  padding: 11px 14px;
}
.mock-check {
  flex: none;
  width: 17px;
  height: 17px;
  border-radius: 6px;
  background: var(--lpx-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mock-done span {
  font: 500 13.5px/1 var(--lpx-font-ui);
  color: var(--lpx-ink-45);
  text-decoration: line-through;
  white-space: nowrap;
}

.mock-draft {
  position: absolute;
  left: 344px;
  top: 306px;
  background: var(--lpx-field);
  border-radius: 14px;
  padding: 11px 14px;
  font: 500 13.5px/1 var(--lpx-font-ui);
  color: var(--lpx-ink-45);
  white-space: nowrap;
}

/* Каретка, README `lpxblink` — 1.1s steps(1). */
@keyframes lpxblink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}
.caret {
  display: inline-block;
  width: 2px;
  height: 14px;
  background: var(--lpx-blue);
  vertical-align: -3px;
  margin-left: 3px;
  animation: lpxblink 1.1s steps(1) infinite;
}

/* Свёрнутое поддерево: голый счётчик справа от родителя, без коннектора,
   глубина — стопкой листов, выглядывающих вправо (README «Collapsed
   subtree stub»). */
.mock-stub {
  position: absolute;
  left: 320px;
  top: 191px;
  display: inline-flex;
  padding-right: 16px;
}
.mock-stub i {
  position: absolute;
  border-radius: 999px;
}
.mock-stub .sheet-back {
  left: 16px;
  top: 4px;
  right: 0;
  bottom: 4px;
  background: rgba(20, 18, 15, 0.09);
}
.mock-stub .sheet-mid {
  left: 8px;
  top: 2px;
  right: 8px;
  bottom: 2px;
  background: rgba(20, 18, 15, 0.16);
}
.mock-stub b {
  position: relative;
  background: var(--lpx-pastel-green);
  border-radius: 999px;
  padding: 9px 17px;
  font: 600 14px/1 var(--lpx-font-ui);
  color: var(--lpx-ink);
}

/* Курсор соседа, README `lpxsway` — дрейф 4.2s ease-in-out. */
@keyframes lpxsway {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
.mock-peer {
  position: absolute;
  left: 398px;
  top: 236px;
  display: flex;
  align-items: center;
  gap: 7px;
  animation: lpxsway 4.2s ease-in-out infinite;
}
.mock-peer span {
  background: var(--lpx-violet);
  color: var(--lpx-white);
  border-radius: 8px;
  padding: 4px 9px;
  font: 500 11px/1 var(--lpx-font-ui);
}

/* Дневная XP-пилюля, README «Daily XP pill»: чёрная пилюля, росток,
   «+40 XP today» и лаймовая полоса 64×6. */
.mock-xp {
  position: absolute;
  left: 24px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--lpx-ink);
  border-radius: 999px;
  padding: 9px 16px 9px 12px;
  box-shadow: 0 6px 18px rgba(20, 18, 15, 0.18);
}
.mock-xp > span {
  font: 500 12px/1 var(--lpx-font-ui);
  color: var(--lpx-white);
}
.mock-xp-bar {
  width: 64px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
  display: inline-block;
}
.mock-xp-bar span {
  display: block;
  width: 68%;
  height: 100%;
  background: var(--lpx-lime);
  border-radius: 999px;
}

/* ── Разделитель ──────────────────────────────────────────────────────── */
.rule {
  height: 1px;
  background: var(--lpx-hairline);
}

/* ── «Три клавиши» ────────────────────────────────────────────────────── */
.keys {
  padding-top: 64px;
  padding-bottom: 20px;
}

.section-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 34px;
  flex-wrap: wrap;
}
.section-head h2 {
  margin: 0;
  font-size: clamp(26px, 4.2vw, 34px);
  line-height: 1;
  letter-spacing: -0.03em;
}
.section-note {
  font-size: 11px;
  color: var(--lpx-ink-40);
}

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

.key-card {
  border-radius: 22px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 210px;
}
.key-card--type {
  background: var(--lpx-pastel-violet);
}
.key-card--tab {
  background: var(--lpx-pastel-blue);
}
.key-card--share {
  background: var(--lpx-pastel-green);
}

.key-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.key-chip {
  font-size: 12px;
  line-height: 1;
  color: var(--lpx-ink);
  background: var(--lpx-white);
  border-radius: 8px;
  padding: 8px 11px;
}
.key-step {
  font-size: 10.5px;
  line-height: 1;
  color: var(--lpx-ink-40);
}

.key-demo-input {
  background: var(--lpx-white);
  border: 2px solid var(--lpx-blue);
  border-radius: 14px;
  padding: 12px 15px;
  font: 500 15px/1 var(--lpx-font-ui);
  color: var(--lpx-ink);
}
.key-demo-input .caret {
  height: 16px;
  margin-left: 2px;
}

.key-demo-pair {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.key-demo-pair span {
  background: var(--lpx-white);
  border-radius: 12px;
  padding: 10px 14px;
  font: 500 14px/1 var(--lpx-font-ui);
  color: var(--lpx-ink);
}
.key-demo-pair svg {
  flex: none;
}

.key-demo-share {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.key-demo-share .avatars span {
  border-color: var(--lpx-pastel-green);
}
.key-demo-share .avatars .a3 {
  background: var(--lpx-white);
}
.key-tag {
  font-size: 10.5px;
  line-height: 1;
  color: var(--lpx-ink);
  background: var(--lpx-white);
  padding: 6px 9px;
  border-radius: 7px;
}

.key-text {
  margin: auto 0 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--lpx-ink-60);
  text-wrap: pretty;
}

/* ── 4. Тёмная полоса стрика ──────────────────────────────────────────────
 * README, секция 4: `#14120F`, радиус 30px, поля 46px. Слева заголовок и
 * два моно-чипа, справа карточка стрика и карточка уровня на панелях
 * `rgba(255,255,255,.06)` с радиусом 20px. */
.streak {
  padding-top: 56px;
  padding-bottom: 56px;
}
.streak-band {
  background: var(--lpx-ink);
  border-radius: 30px;
  padding: 46px 46px 44px;
  color: var(--lpx-white);
  display: flex;
  gap: 48px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.streak-copy {
  flex: 0 1 430px;
}
.streak-copy h2 {
  margin: 0;
  font-size: clamp(26px, 3.9vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--lpx-white);
}
.accent-lime {
  color: var(--lpx-lime);
}
.streak-copy p {
  margin: 20px 0 0;
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  max-width: 390px;
  text-wrap: pretty;
}
.streak-chips {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  flex-wrap: wrap;
}
.streak-chips span {
  font-size: 10.5px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.08);
  padding: 7px 10px;
  border-radius: 7px;
}
.chip-lime {
  color: var(--lpx-ink) !important;
  background: var(--lpx-lime) !important;
}

.streak-cards {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.streak-card,
.level-card {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 20px 22px;
}
.streak-card-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
}
.streak-count {
  font: 800 30px/1 var(--lpx-font-display);
  color: var(--lpx-lime);
}
.streak-caption {
  font-size: 13px;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.55);
}
.streak-days {
  display: flex;
  gap: 6px;
}
.streak-days span {
  flex: 1;
  height: 26px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 9px;
  line-height: 26px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}
.streak-days .on {
  background: var(--lpx-lime);
  color: var(--lpx-ink);
}

.level-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.level-title {
  font: 600 15px/1 var(--lpx-font-ui);
  color: var(--lpx-white);
}
.level-xp {
  font-size: 11px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.45);
}
.level-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.level-fill {
  width: 68%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lpx-violet), var(--lpx-blue));
}
.level-note {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.5);
}

/* ── 5. Две карточки: «вдвоём» и «чужое дерево» ────────────────────────── */
.twoup {
  padding-top: 8px;
  padding-bottom: 56px;
}
.twoup-grid {
  display: flex;
  gap: 18px;
  align-items: stretch;
  flex-wrap: wrap;
}

.together-card,
.public-card {
  flex: 1 1 420px;
  border-radius: 26px;
  padding: 34px;
  display: flex;
  flex-direction: column;
}
.together-card {
  background: var(--lpx-pastel-yellow);
}
.public-card {
  background: var(--lpx-white);
  border: 1px solid var(--lpx-hairline);
}
.together-card h2,
.public-card h2 {
  margin: 0;
  font-size: clamp(24px, 3.4vw, 30px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.together-card p,
.public-card p {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--lpx-ink-60);
  max-width: 360px;
  text-wrap: pretty;
}

.together-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 28px;
}
.together-tags span {
  font-size: 10.5px;
  line-height: 1;
  color: var(--lpx-ink);
  background: rgba(20, 18, 15, 0.09);
  padding: 7px 10px;
  border-radius: 7px;
}

.public-rows {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.public-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--lpx-surface);
  border-radius: 14px;
  padding: 12px 15px;
}
.public-mark {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font: 800 12px/30px var(--lpx-font-display);
  text-align: center;
}
.public-mark--violet {
  background: var(--lpx-pastel-violet);
  color: var(--lpx-violet);
}
.public-mark--blue {
  background: var(--lpx-pastel-blue);
  color: var(--lpx-blue);
}
.public-body {
  flex: 1;
  min-width: 0;
}
.public-title {
  display: block;
  font: 600 14px/1.2 var(--lpx-font-ui);
  color: var(--lpx-ink);
}
.public-meta {
  display: block;
  font-size: 9.5px;
  line-height: 1;
  color: var(--lpx-ink-45);
  margin-top: 5px;
}
.fork-chip {
  flex: none;
  font-size: 10px;
  line-height: 1;
  color: var(--lpx-ink-45);
  background: rgba(20, 18, 15, 0.06);
  padding: 5px 8px;
  border-radius: 6px;
}
.fork-chip--hot {
  color: var(--lpx-ink);
  background: var(--lpx-lime);
}

/* ── 6. Лента активности ──────────────────────────────────────────────────
 * README: полоса `#EFEDE7` во всю ширину, 26px по вертикали; дублированный
 * ряд едет на -50% за 34 с линейно и бесконечно — так шов не виден. */
@keyframes lpxmarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.marquee {
  background: var(--lpx-page);
  padding: 26px 0;
  overflow: hidden;
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: 14px;
  animation: lpxmarquee 34s linear infinite;
}
.marquee-group {
  display: flex;
  gap: 14px;
  align-items: center;
}
.marquee-group span {
  font-size: 11px;
  line-height: 1;
  color: var(--lpx-ink-45);
  background: var(--lpx-white);
  border-radius: 999px;
  padding: 9px 14px;
  white-space: nowrap;
}

/* ── Закрывающий CTA ──────────────────────────────────────────────────── */
.closing {
  padding-top: 76px;
  padding-bottom: 30px;
  text-align: center;
}

.closing-pair {
  display: inline-flex;
  align-items: center;
  margin-bottom: 26px;
}
.closing-pair span {
  border-radius: 14px;
  padding: 11px 16px;
  font: 600 15px/1 var(--lpx-font-ui);
}
.closing-pair .from {
  background: var(--lpx-pastel-yellow);
  color: var(--lpx-ink);
}
.closing-pair .to {
  background: var(--lpx-ink);
  color: var(--lpx-lime);
}
.closing-pair svg {
  flex: none;
}

.closing h2 {
  margin: 0 auto;
  font-size: clamp(30px, 5.8vw, 50px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 700px;
}

.closing-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.closing-ctas .btn--primary {
  padding: 16px 26px;
}
.closing-ctas .btn--ghost {
  padding: 16px 22px;
}

.closing-note {
  margin: 18px 0 0;
  font-size: 10.5px;
  color: var(--lpx-ink-40);
}

/* ── Футер ────────────────────────────────────────────────────────────────
 * Четыре «muted links» макета без адресатов не рендерятся: ссылка без цели
 * хуже отсутствия ссылки (ТЗ §3.4). */
.footer {
  padding-top: 30px;
  padding-bottom: 44px;
}
.footer .rule {
  margin-bottom: 26px;
}
.footer-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-links {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
  font-size: 13.5px;
}
.footer-links a {
  color: var(--lpx-ink-50);
}
.footer-links a:hover {
  color: var(--lpx-ink);
}
/*
  Пункт без адресата (B-033). Тусклее живой ссылки и без `:hover` — курсор,
  меняющийся над тем, что не нажимается, обещает клик и тут же обманывает.
*/
.footer-soon {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--lpx-ink-35);
}

/* Метка «Soon» — тот же капслок-моно, что у прочих служебных подписей футера. */
.footer-soon b {
  font-family: var(--lpx-font-mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lpx-ink-35);
  border: 1px solid var(--lpx-hairline);
  border-radius: 999px;
  padding: 1px 6px;
}

.footer-mark {
  font-size: 10.5px;
  color: var(--lpx-ink-35);
}

/* ── Адаптив ──────────────────────────────────────────────────────────────
 * Требование ТЗ §3.3: читается на 390px без горизонтальной прокрутки.
 * Мок-канвас не прячется, а уменьшается — он в герое главное, и на телефоне
 * пустое место вместо продукта хуже маленького продукта. */
@media (max-width: 1000px) {
  /* Тёмная полоса: правая колонка карточек уходит под текст, а не жмётся
     в ноль. Поля 46px макета на узком экране съедают половину строки. */
  .streak-band {
    padding: 34px;
    gap: 30px;
  }
  .streak-copy {
    flex: 1 1 100%;
  }
  .streak-copy p {
    max-width: none;
  }
}

@media (max-width: 860px) {
  /* Якорные ссылки уходят: на узкой полосе они вытесняют «Войти» и CTA,
     а секции всё равно идут подряд одной колонкой. */
  .nav-links {
    display: none;
  }
  .nav-actions {
    margin-left: auto;
  }
  .keys-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  .hero {
    padding-top: 34px;
  }
  .keys {
    padding-top: 44px;
  }
  .closing {
    padding-top: 54px;
  }
  .together-card,
  .public-card {
    padding: 26px;
    gap: 28px;
  }
  .streak {
    padding-top: 34px;
    padding-bottom: 34px;
  }
  .streak-band {
    padding: 26px;
    border-radius: 24px;
  }
  .footer-links {
    margin-left: 0;
  }
}

/* Ступени масштаба картины внутри рамки. Условие каждой — координатное
   пространство 520px после сжатия помещается в ширину экрана минус поля. */
@media (max-width: 586px) {
  :root {
    --mock-s: 0.8;
  }
}
@media (max-width: 455px) {
  :root {
    --mock-s: 0.64;
  }
}
@media (max-width: 372px) {
  :root {
    --mock-s: 0.54;
  }
}

@media (max-width: 480px) {
  .hero-ctas .btn,
  .closing-ctas .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
  .hero-pill {
    font-size: 9.5px;
  }
}

/* ── Уважение к настройке «меньше движения» ───────────────────────────────
 * README требует прямо: под `prefers-reduced-motion` анимации гасятся.
 * Знак лого при этом обязан остаться собранным, а не невидимым. */
@media (prefers-reduced-motion: reduce) {
  .caret,
  .mock-peer,
  .marquee-track,
  .logo--intro .logo-bar {
    animation: none;
  }
  .logo--intro .logo-bar {
    opacity: 1;
  }
  .btn {
    transition: none;
  }
  .btn:hover {
    transform: none;
  }
}