/* lolq.ai — главная страница (витрина + воронка).
   Материалы те же, что в студии («солнечная кузница»), но на две ступени
   тише: обводки 1–2px вместо 2.5, офсет 1–3px вместо 7, огонь — один
   сплошной на экран. Всё, что здесь объявлено, живёт только внутри
   `.landing`: студию этот файл не трогает.
   Подключается ПОСЛЕ style.css — значит перебивает его при равной силе. */

/* Токены объявлены и на :root, и на .landing. Дубль не лишний: nav.css
   подключается последним и переопределяет часть тех же имён (--edge, --fire-*,
   --lift-*) в своём :root. Объявление прямо на .landing выигрывает у
   унаследованного от :root — главная не поедет, что бы ни пришло следом. */
:root, .landing {
  /* ── пространство: 4/8/12/16/24/32/48, дробей нет ── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-12: 48px;
  --ld-max: 1180px;

  /* ── типографика: 7 кеглей ── */
  --fs-meta: 11px; --fs-sm: 12px; --fs-base: 14px; --fs-md: 16px;
  --fs-lg: 18px;  --fs-xl: 22px; --fs-2xl: clamp(30px, 4.6vw, 44px);
  --ls-caps: .06em; --ls-head: -.01em;

  /* ── обводки: три уровня ── */
  /* Канон «Тёплое стекло»: кромка — чернила .10, толщина 1px везде;
     офсетных «картонных» теней нет — только блик сверху и мягкая тень. */
  --edge: rgba(var(--ink-rgb), .10);
  --bw-hair: 1px; --bw-edge: 1px; --bw-hero: 1px;
  --line: rgba(var(--ink-rgb), .12);
  --line-strong: rgba(var(--ink-rgb), .20);

  /* ── тени: офсет 1–3px у предметов, блюр только у парящего ── */
  --lift-1: inset 0 1px 0 rgba(255, 255, 255, .72), 0 4px 16px rgba(45, 33, 26, .06);
  --lift-2: inset 0 1px 0 rgba(255, 255, 255, .72), 0 6px 24px rgba(45, 33, 26, .07);
  --lift-3: inset 0 1px 0 rgba(255, 255, 255, .72), 0 10px 30px rgba(45, 33, 26, .09);
  --shadow-soft: 0 8px 20px -14px rgba(90, 52, 24, .28);
  --shadow-lift: 0 18px 40px -26px rgba(90, 52, 24, .40);
  --glow-cta: 0 6px 16px -8px rgba(200, 96, 20, .26);

  /* ── радиусы: потолок 18 ── */
  --r-1: 8px; --r-2: 10px; --r-3: 14px; --r-4: 18px;

  /* ── чернильные дублёры марки: всё, что несёт текст ── */
  --accent-ink: #b04d12;
  --accent-2-ink: #c1401b;
  --gold-ink: #8a5a2b;
  --ink-muted: #6f5f52;
  --accent-wash: rgba(207, 34, 34, .08);
  --accent-line: rgba(207, 34, 34, .22);
  --gold-wash: rgba(255, 181, 69, .18);
  --ok-ink: #0f7a52;

  /* ── поверхности ── */
  --surface: #fffdf9;
  --surface-2: #f6f1e9;
  --on-accent: #fff;

  /* ── огонь: один сплошной на экран ── */
  --fire-ink: linear-gradient(95deg, #e0503a 0%, #ea6a34 45%, #f0913c 100%);
  --fire-hot: linear-gradient(90deg, var(--gold), var(--accent-2), var(--accent));

  --ring: 0 0 0 3px rgba(207, 34, 34, .22);
  --t: .14s; --ease: cubic-bezier(.2, .7, .3, 1);
  color-scheme: light;
}
@media (prefers-reduced-motion: reduce) { :root { --t: 0s; } }

/* ────────── каркас страницы ────────── */
.landing {
  --muted: var(--ink-muted);        /* .muted внутри лендинга читается (5.7:1) */
  display: block; min-height: 100vh;
  font-size: var(--fs-base); line-height: 1.55;
}
/* Прокрутку по якорям сглаживаем на документе — скроллится он, а не .landing */
html:has(#welcome:not(.hidden)) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(#welcome:not(.hidden)) { scroll-behavior: auto; } }
/* Кольцо фокуса даём аутлайном, а не тенью: тень у кнопок несёт объём —
   подменять её кольцом значит ронять кнопку при переходе табом. */
.landing :focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

.ld-shell { width: 100%; max-width: var(--ld-max); margin: 0 auto; padding: 0 var(--s-6); }

/* якоря не уезжают под плавающую шапку */
.landing [id] { scroll-margin-top: 88px; }

.ld-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--surface); border: var(--bw-hero) solid var(--edge);
  border-radius: var(--r-2); padding: var(--s-2) var(--s-3); font-weight: 600;
}
.ld-skip:focus { left: var(--s-4); top: var(--s-4); }

/* ────────── шапка гостя: стекло плавает над контентом ────────── */
.ld-topbar { position: sticky; top: 10px; z-index: 60; padding: 0 var(--s-6); }
@media (max-width: 700px) { .ld-topbar { top: 6px; padding: 0 var(--s-3); } }

.ld-bar {
  max-width: var(--ld-max); margin: 0 auto;
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-2) var(--s-3) var(--s-2) var(--s-4);
  border: var(--bw-hero) solid var(--edge); border-radius: var(--r-4);
  background: linear-gradient(180deg, rgba(255,252,247,.86), rgba(255,244,232,.76));
  box-shadow: var(--lift-2);
  backdrop-filter: blur(18px) saturate(1.7);
  -webkit-backdrop-filter: blur(18px) saturate(1.7);
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .ld-bar { background: var(--surface); }
}
@media (prefers-reduced-transparency: reduce) {
  .ld-bar { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.ld-brand { display: flex; align-items: center; gap: var(--s-2); text-decoration: none; flex: none; }
.ld-brand img { display: block; width: 30px; height: 30px; }
.ld-brand-word {
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-lg);
  letter-spacing: var(--ls-head); color: var(--text);
}
.ld-brand-word .brand-dot { color: var(--accent-2-ink); }

.ld-menu { display: flex; align-items: center; gap: var(--s-1); margin-left: auto; }
.ld-menu a {
  color: var(--ink-muted); text-decoration: none; font-size: var(--fs-base); font-weight: 500;
  padding: var(--s-2) var(--s-3); border-radius: var(--r-2); white-space: nowrap;
}
.ld-menu a:hover { color: var(--text); background: rgba(var(--ink-rgb), .06); }
.ld-bar-actions { display: flex; align-items: center; gap: var(--s-2); flex: none; }
@media (max-width: 940px) { .ld-menu { display: none; } .ld-bar-actions { margin-left: auto; } }

/* ────────── кнопки: та же физика, но ход 2px ────────── */
.landing button {
  font-family: inherit; font-size: var(--fs-base); font-weight: 600;
  color: var(--text); background: var(--surface);
  border: var(--bw-edge) solid var(--edge); border-radius: var(--r-2);
  box-shadow: var(--lift-2); min-height: 40px; padding: 0 var(--s-4);
  transition: transform var(--t), box-shadow var(--t), background var(--t), filter var(--t);
}
.landing button:hover:not(:disabled) { background: #fff; }
.landing button:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.landing button.primary,
.landing button.primary:hover:not(:disabled) {
  color: var(--on-fire); background: var(--fire-ink);
  border-width: var(--bw-hero); box-shadow: var(--lift-3), var(--glow-cta);
}
.landing button.primary:hover:not(:disabled) { filter: brightness(1.06); }
.landing button.primary:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.landing button.ghost {
  background: transparent; border: none; box-shadow: none;
  color: var(--ink-muted); font-weight: 500; padding: 0 var(--s-3);
}
.landing button.ghost:hover:not(:disabled) { color: var(--text); background: rgba(var(--ink-rgb), .06); }
.landing button:disabled { opacity: .5; cursor: default; box-shadow: none; filter: none; }
.ld-cta { min-height: 48px; font-size: var(--fs-md); padding: 0 var(--s-6); }

/* ────────── секции ────────── */
/* padding-block, а не padding: у секции те же классы, что у .ld-shell, и
   короткая запись обнуляла бы его горизонтальные поля — на окне ≤1180px
   текст упирался бы в край экрана. */
.ld-sec { padding-block: var(--s-12); border-top: var(--bw-hair) solid var(--line); }
.ld-sec:first-of-type { border-top: none; }
.ld-sec-head { max-width: 640px; margin-bottom: var(--s-8); }
.ld-eyebrow {
  display: block; font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--ls-caps); text-transform: lowercase;
  color: var(--ink-muted); margin: 0 0 var(--s-2);
}
.ld-h2 {
  margin: 0; font-family: var(--font-head); font-size: var(--fs-xl);
  font-weight: 600; letter-spacing: var(--ls-head); line-height: 1.25;
}
.ld-lead { margin: var(--s-3) 0 0; color: var(--ink-muted); font-size: var(--fs-md); max-width: 62ch; }

/* ────────── первый экран ────────── */
.ld-hero { padding-block: var(--s-8) var(--s-12); }
.ld-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: var(--s-12); align-items: center;
}
.ld-hero-h1 {
  margin: var(--s-3) 0 0; font-family: var(--font-head);
  font-size: var(--fs-2xl); font-weight: 700; line-height: 1.08;
  letter-spacing: var(--ls-head);
}
.ld-hero-sub { margin: var(--s-4) 0 0; font-size: var(--fs-md); color: var(--ink-muted); max-width: 46ch; }
.ld-hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.ld-hero-trust {
  margin: var(--s-4) 0 0; font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--ls-caps); color: var(--ink-muted); text-transform: lowercase;
}
.ld-hero-more { margin: var(--s-3) 0 0; font-size: var(--fs-sm); }
.ld-hero-more a { color: var(--accent-2-ink); text-underline-offset: 3px; }

.ld-tag {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--ls-caps);
  text-transform: lowercase; color: var(--accent-ink);
  background: var(--accent-wash); border: var(--bw-hair) solid var(--accent-line);
  border-radius: 999px; padding: 5px var(--s-3);
}

/* плашка «пришёл по приглашению» */
.landing .welcome-ref {
  display: block; margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4);
  border-radius: var(--r-3); font-size: var(--fs-base); text-align: left;
  background: var(--gold-wash); border: var(--bw-hair) solid var(--line-strong); color: var(--text);
}
.landing .welcome-ref b {
  font-family: var(--font-mono); letter-spacing: .1em; color: var(--gold-ink);
}

/* доказательство продукта: кадр-клип и сетка кадров одного трека */
.ld-proof {
  background: var(--surface); border: var(--bw-hair) solid var(--line);
  border-radius: var(--r-4); padding: var(--s-4); box-shadow: var(--shadow-lift);
}
.ld-proof-main {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: var(--s-4); align-items: stretch;
}
.ld-phone {
  margin: 0; position: relative; aspect-ratio: 9 / 16; overflow: hidden;
  border: var(--bw-hero) solid var(--edge); border-radius: var(--r-4);
  background: #14100d; box-shadow: var(--lift-3);
}
.ld-phone img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ld-phone figcaption {
  position: absolute; left: var(--s-2); bottom: var(--s-2);
  font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--ls-caps);
  color: #fff; background: rgba(20, 16, 13, .62); border-radius: var(--r-1);
  padding: 2px 6px; backdrop-filter: blur(4px);
}
/* Сетка кадров тянется по высоте кадра-клипа: композиция из двух прямоугольников
   читается спокойнее, чем «телефон и обрезок рядом». */
.ld-frames {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: var(--s-2);
}
.ld-frames li { margin: 0; min-height: 0; }
.ld-frames img {
  display: block; width: 100%; height: 100%; min-height: 90px; object-fit: cover;
  border: var(--bw-edge) solid var(--edge); border-radius: var(--r-1); background: var(--surface-2);
}
.ld-proof-cap {
  margin: var(--s-3) 0 0; font-size: var(--fs-sm); color: var(--ink-muted);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: baseline;
}
.ld-proof-cap b {
  font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--ls-caps);
  text-transform: lowercase; color: var(--text); font-weight: 700;
}

/* ────────── как это работает ────────── */
.ld-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-12); }
.ld-step {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: var(--s-8); align-items: center;
}
.ld-step:nth-child(even) .ld-step-copy { order: 2; }
.ld-step-n {
  display: block; font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--ls-caps); color: var(--accent-2-ink); font-weight: 700;
}
.ld-step h3 {
  margin: var(--s-2) 0 0; font-family: var(--font-head); font-size: var(--fs-lg);
  font-weight: 600; letter-spacing: var(--ls-head);
}
.ld-step p { margin: var(--s-2) 0 0; color: var(--ink-muted); }
.ld-step .ld-step-meta {
  margin-top: var(--s-3); font-family: var(--font-mono);
  font-size: var(--fs-meta); letter-spacing: var(--ls-caps); text-transform: lowercase;
}
.ld-shot {
  margin: 0; overflow: hidden; background: var(--surface-2);
  border: var(--bw-edge) solid var(--edge); border-radius: var(--r-3); box-shadow: var(--lift-2);
}
.ld-shot img { display: block; width: 100%; height: auto; }

/* ────────── что внутри ────────── */
.ld-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.ld-feat {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-4); background: var(--surface);
  border: var(--bw-hair) solid var(--line); border-radius: var(--r-3);
}
.ld-feat h3 { margin: 0; font-size: var(--fs-md); font-weight: 600; letter-spacing: var(--ls-head); }
.ld-feat p { margin: 0; color: var(--ink-muted); font-size: var(--fs-base); }
.ld-feat-tag {
  align-self: flex-start; margin-top: auto;
  font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--ls-caps);
  text-transform: lowercase; color: var(--gold-ink);
  background: var(--gold-wash); border-radius: 999px; padding: 3px var(--s-2);
}
.ld-feat-wide { grid-column: span 2; flex-direction: row; align-items: center; gap: var(--s-4); }
.ld-feat-wide .ld-feat-copy { flex: 1 1 46%; display: flex; flex-direction: column; gap: var(--s-2); }
.ld-feat-wide img {
  flex: 1 1 54%; min-width: 0; display: block; width: 100%; height: auto;
  border: var(--bw-edge) solid var(--edge); border-radius: var(--r-2); background: var(--surface-2);
}

/* ────────── тарифы ────────── */
.ld-period {
  display: inline-flex; gap: var(--s-1); padding: var(--s-1);
  background: var(--surface-2); border: var(--bw-hair) solid var(--line);
  border-radius: var(--r-3); margin-bottom: var(--s-6);
}
.landing .ld-period button {
  min-height: 36px; padding: 0 var(--s-4); border: none; box-shadow: none;
  background: transparent; color: var(--ink-muted); font-size: var(--fs-base);
}
.landing .ld-period button:hover:not(:disabled) { background: rgba(var(--ink-rgb), .05); color: var(--text); }
.landing .ld-period button.on,
.landing .ld-period button.on:hover:not(:disabled) {
  background: var(--surface); color: var(--text); font-weight: 600;
  border: var(--bw-hair) solid var(--line-strong); box-shadow: var(--shadow-soft);
  border-radius: var(--r-2);
}
.ld-period .ld-save {
  font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--accent-ink);
  letter-spacing: var(--ls-caps); margin-left: var(--s-1);
}

.ld-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); align-items: stretch; }
/* Карточка тарифа — то же жидкое стекло, что панели студии (правка
   владельца 31.08): полупрозрачная, с бликом сверху, волосяная рамка вместо
   картонной. Выделенный план поднят тенью, а не толстой обводкой. */
.ld-plan {
  position: relative; display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-6) var(--s-4); background: rgba(255, 253, 249, .66);
  backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border: var(--bw-hair) solid var(--line); border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), var(--shadow-soft);
}
.ld-plan-hi {
  border-color: var(--line-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), var(--shadow-lift);
}
.ld-plan-badge {
  position: absolute; top: calc(-1 * var(--s-3)); right: var(--s-3);
  font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--ls-caps);
  text-transform: lowercase; font-weight: 700; color: #241a14;
  background: var(--fire-ink); border: none;
  border-radius: 999px; padding: 4px var(--s-3);
  box-shadow: var(--glow-cta);
}
.ld-plan-name {
  font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--ls-caps);
  text-transform: lowercase; color: var(--ink-muted); font-weight: 700;
}
.ld-plan-price {
  font-family: var(--font-head); font-size: 30px; font-weight: 700;
  letter-spacing: var(--ls-head); line-height: 1.1; color: var(--text);
}
.ld-plan-price span { font-size: var(--fs-base); font-weight: 500; color: var(--ink-muted); }
.ld-plan-year { font-size: var(--fs-sm); color: var(--ink-muted); min-height: 18px; }
.ld-plan-clips {
  align-self: flex-start; font-size: var(--fs-sm); font-weight: 600; color: var(--accent-ink);
  background: var(--accent-wash); border: none;
  border-radius: 999px; padding: 3px var(--s-3);
}
.ld-plan-note { margin: 0; font-size: var(--fs-sm); color: var(--ink-muted); }
.ld-plan-feats {
  list-style: none; margin: var(--s-2) 0 var(--s-3); padding: 0;
  display: flex; flex-direction: column; gap: var(--s-2);
  font-size: var(--fs-sm); color: var(--text);
}
.ld-plan-feats li { display: flex; gap: var(--s-2); align-items: baseline; }
.ld-plan-feats li::before { content: "✓"; color: var(--ok-ink); font-weight: 700; flex: none; }
.landing .ld-plan button { margin-top: auto; width: 100%; }
.ld-plan-cur {
  margin-top: auto; text-align: center; font-family: var(--font-mono);
  font-size: var(--fs-meta); letter-spacing: var(--ls-caps); text-transform: lowercase;
  color: var(--ink-muted); border: var(--bw-hair) dashed var(--line-strong);
  border-radius: var(--r-2); padding: var(--s-3) 0;
}
.ld-pay-note { margin: var(--s-4) 0 0; font-size: var(--fs-sm); color: var(--ink-muted); }
.ld-pay-note.error { color: var(--danger-ink); }

/* ────────── докупка очков: шкала ────────── */
.ld-scale-box {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: var(--s-8); align-items: center;
  background: var(--surface); border: var(--bw-hair) solid var(--line);
  border-radius: var(--r-4); padding: var(--s-6);
}
.ld-scale { display: flex; flex-direction: column; gap: var(--s-4); }
/* ШКАЛА ЗАЛИТА ДО ПОЛЗУНКА. Раньше градиент шёл по всей длине дорожки, и
   выбранная ступень ничем не отличалась от максимальной: шкала выглядела
   всегда «полной», то есть не сообщала, где ты находишься. Долю закрашивает
   --fill, его ставит app.js при отрисовке и при каждом движении. */
.ld-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  border-radius: 999px; cursor: pointer; margin: 0;
  border: var(--bw-hair) solid var(--line);
  background:
    linear-gradient(90deg, #e8b33a 0%, #e0503a 100%) 0 / var(--fill, 0%) 100% no-repeat,
    var(--surface-2);
}
.ld-range:focus-visible { box-shadow: var(--ring); }
.ld-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface); border: var(--bw-hair) solid var(--line-strong);
  box-shadow: var(--shadow-soft), 0 1px 4px rgba(var(--ink-rgb), .25); cursor: grab; margin-top: -11px;
}
.ld-range::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface); border: var(--bw-hair) solid var(--line-strong); cursor: grab;
}
.ld-ticks { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-1); }
.landing .ld-ticks button {
  min-height: 44px; padding: var(--s-1) 2px; border: none; box-shadow: none; background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: .04em;
  color: var(--ink-muted); border-radius: var(--r-1);
}
.landing .ld-ticks button:hover:not(:disabled) { background: rgba(var(--ink-rgb), .05); color: var(--text); }
.landing .ld-ticks button.on { color: var(--accent-ink); font-weight: 700; background: var(--accent-wash); }
.ld-tick-sub { font-size: var(--fs-meta); letter-spacing: 0; }

.ld-readout {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-4); background: rgba(255, 253, 249, .72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: var(--bw-hair) solid var(--line-strong); border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), var(--shadow-soft);
}
.ld-readout-price {
  font-family: var(--font-head); font-size: 34px; font-weight: 700; line-height: 1;
  letter-spacing: var(--ls-head);
}
.ld-readout-price span { font-size: var(--fs-base); font-weight: 500; color: var(--ink-muted); }
.ld-readout-points {
  font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: var(--ls-caps);
  text-transform: lowercase; color: var(--ink-muted);
}
.ld-readout ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--fs-sm); }
.ld-readout .ld-save-badge {
  align-self: flex-start; font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--ls-caps); text-transform: lowercase; color: var(--gold-ink);
  background: var(--gold-wash); border-radius: 999px; padding: 3px var(--s-2);
}
.ld-scale-note { margin: var(--s-4) 0 0; font-size: var(--fs-sm); color: var(--ink-muted); }

/* ────────── ULTRA: шкала объёма внутри карточки тарифа ──────────
   Компонент шкалы переиспользован из докупки очков (.ld-range + .ld-ticks):
   второй ползунок с нуля означал бы вторую реализацию тех же состояний.
   Отличий два — тиков четыре вместо пяти, и на узкой карточке ползунок
   прячется: 26-пиксельный бегунок в колонке 260 px не попадает пальцем. */
.ld-plan-scale { display: flex; flex-direction: column; gap: var(--s-2); margin: var(--s-1) 0; }
.ld-plan-scale .ld-range { height: 5px; }
.ld-plan-scale .ld-range::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -8px; }
.ld-plan-scale .ld-range::-moz-range-thumb { width: 18px; height: 18px; }
.ld-tier-ticks { grid-template-columns: repeat(4, 1fr); }
.landing .ld-tier-ticks button { min-height: 32px; font-size: 11px; }
/* Колонка тарифа ~260 px: попасть пальцем в 20-пиксельный бегунок нельзя,
   поэтому на узких экранах ползунок скрыт и ступень выбирается тиками.
   На мобиле карточка снова широкая (одна колонка) — там ползунок вернётся. */
@media (min-width: 701px) and (max-width: 1180px) {
  .ld-plan-scale .ld-range { display: none; }
}

/* Зачёркнутая цена — ЧЕСТНАЯ: тот же объём по цене очка базовой ступени.
   Не выдуманный «якорь», а число из нашего же прайса. */
.ld-plan-was { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.ld-plan-was s { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-muted); }
.ld-plan-was .ld-save-badge {
  font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--ls-caps);
  text-transform: lowercase; color: var(--gold-ink); background: var(--gold-wash);
  border-radius: 999px; padding: 2px var(--s-2); white-space: nowrap;
}

/* Расшифровка объёма в человеческих единицах: три строки в лицо,
   полная таблица под раскрытием. */
.ld-vol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px;
  font-size: var(--fs-sm); color: var(--text); }
.ld-vol li::before { content: "= "; color: var(--ink-muted); }
.ld-vol-all { font-size: var(--fs-sm); }
.ld-vol-all summary { cursor: pointer; color: var(--ink-muted); font-size: var(--fs-meta);
  font-family: var(--font-mono); letter-spacing: var(--ls-caps); text-transform: lowercase; }
.ld-vol-all summary:hover { color: var(--text); }
.ld-vol-all .tw { overflow-x: auto; margin-top: var(--s-2); }
.ld-vol-all table { border-collapse: collapse; width: 100%; font-size: var(--fs-meta); }
.ld-vol-all td { padding: 3px var(--s-1); border-bottom: var(--bw-hair) solid var(--line);
  white-space: nowrap; color: var(--ink-muted); }
.ld-vol-all td:first-child { color: var(--text); white-space: normal; }

/* Приписка мелким под всей витриной: точный расчёт цены сцены. */
.ld-fine {
  margin: var(--s-4) 0 0; font-size: var(--fs-meta); line-height: 1.5;
  color: var(--ink-muted); max-width: 74ch;
}

/* ────────── партнёрка ────────── */
.ld-partner-box {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: var(--s-8); align-items: center;
  background: var(--surface); border: var(--bw-hair) solid var(--line);
  border-radius: var(--r-4); padding: var(--s-6);
}
.ld-partner-box ul { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.ld-partner-box li { display: flex; gap: var(--s-2); align-items: baseline; font-size: var(--fs-base); }
.ld-partner-box li::before { content: "·"; color: var(--accent-ink); font-weight: 700; }
.ld-partner-box b { color: var(--text); }
.ld-partner-act { display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start; }

/* ────────── FAQ ────────── */
.ld-faq { border-top: var(--bw-hair) solid var(--line); }
.ld-q { border-bottom: var(--bw-hair) solid var(--line); }
.ld-q > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--s-4);
  min-height: 56px; padding: var(--s-3) 0; font-size: var(--fs-md); font-weight: 600;
  letter-spacing: var(--ls-head);
}
.ld-q > summary::-webkit-details-marker { display: none; }
.ld-q > summary::after {
  content: "+"; margin-left: auto; flex: none; font-family: var(--font-mono);
  font-size: var(--fs-lg); color: var(--ink-muted); line-height: 1;
}
.ld-q[open] > summary::after { content: "−"; color: var(--accent-ink); }
.ld-q > summary:hover { color: var(--accent-2-ink); }
.ld-a { margin: 0 0 var(--s-4); padding-right: var(--s-8); color: var(--ink-muted); max-width: 78ch; }

/* ────────── подвал ────────── */
.ld-foot { border-top: var(--bw-hair) solid var(--line); padding: var(--s-8) 0 var(--s-12); margin-top: var(--s-8); }
.ld-foot-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
  gap: var(--s-8); align-items: start;
}
.ld-foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.ld-foot-about p { margin: var(--s-3) 0 0; color: var(--ink-muted); font-size: var(--fs-sm); max-width: 34ch; }
.ld-foot-col h4 {
  margin: 0 0 var(--s-3); font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--ls-caps); text-transform: lowercase; color: var(--ink-muted); font-weight: 700;
}
.ld-foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.ld-foot-col a, .landing .ld-foot-col button {
  color: var(--text); text-decoration: none; font-size: var(--fs-base);
  background: none; border: none; box-shadow: none; padding: 0; min-height: 0;
  font-weight: 400; text-align: left; cursor: pointer;
}
.ld-foot-col a:hover, .landing .ld-foot-col button:hover:not(:disabled) {
  color: var(--accent-2-ink); background: none; text-decoration: underline; text-underline-offset: 3px;
}
.ld-link-off { color: var(--ink-muted); display: inline-flex; align-items: baseline; gap: var(--s-2); }
/* Метка «скоро» рисуется разметкой, а не CSS-content: текст обязан переводиться
   вместе со всем остальным, а content из словаря не достать. */
.ld-link-off em {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: var(--ls-caps); font-style: normal;
  text-transform: lowercase; color: var(--gold-ink); background: var(--gold-wash);
  border-radius: 999px; padding: 2px 6px;
}
.ld-foot-legal {
  margin-top: var(--s-8); padding-top: var(--s-4); border-top: var(--bw-hair) solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); align-items: baseline;
  font-size: var(--fs-sm); color: var(--ink-muted);
}
/* Правовые строки живут в своём контейнере (его перерисовывает смена языка),
   поэтому раскладку в строку держит он сам. */
#ld-foot-legal-text {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); align-items: baseline;
}
.landing .made-with {
  position: static; margin-left: auto; pointer-events: none;
  font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: .12em;
  color: var(--ink-muted); text-shadow: none;
}

/* ────────── мобильная версия: одна колонка, тапабельные зоны ────────── */
@media (max-width: 940px) {
  .ld-hero-grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .ld-step, .ld-step:nth-child(even) .ld-step-copy { grid-template-columns: 1fr; order: 0; }
  .ld-step { gap: var(--s-4); }
  .ld-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-feat-wide { grid-column: span 2; }
  .ld-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-scale-box, .ld-partner-box { grid-template-columns: 1fr; gap: var(--s-6); }
  .ld-foot-grid { grid-template-columns: 1fr; gap: var(--s-6); }
}
@media (max-width: 700px) {
  .ld-shell { padding: 0 var(--s-4); }
  .ld-sec { padding-block: var(--s-8); }
  .ld-sec-head { margin-bottom: var(--s-6); }
  .ld-hero { padding-block: var(--s-6) var(--s-8); }
  .ld-hero-actions { flex-direction: column; align-items: stretch; }
  .landing .ld-hero-actions button { width: 100%; }
  .ld-proof { padding: var(--s-3); }
  .ld-proof-main { grid-template-columns: 1fr; gap: var(--s-3); }
  .ld-phone { max-width: 240px; margin: 0 auto; }
  .ld-feats { grid-template-columns: 1fr; }
  .ld-feat-wide { grid-column: span 1; flex-direction: column; align-items: stretch; }
  .ld-plans { grid-template-columns: 1fr; }
  .ld-plan-badge { top: calc(-1 * var(--s-2)); }
  /* На одной колонке карточка широкая — ползунок объёма помещается целиком
     и работает пальцем; тики остаются для точного попадания. */
  .landing .ld-tier-ticks button { min-height: 44px; }
  .ld-scale-box, .ld-partner-box { padding: var(--s-4); }
  .ld-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
  .ld-a { padding-right: 0; }
  /* Тапабельные зоны: на телефоне всё кликаемое — не меньше 44px по высоте.
     Ссылки-строчки для этого получают inline-flex и высоту, а не отступы,
     иначе они разъезжают колонки подвала. */
  .landing button { min-height: 44px; }
  .landing .ld-period button { min-height: 44px; }
  .ld-foot-col a, .landing .ld-foot-col button, .ld-hero-more a, .ld-link-off {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .ld-brand { min-height: 44px; }
  .ld-brand img { width: 26px; height: 26px; }
  .ld-brand-word { font-size: var(--fs-md); }
  .landing [id] { scroll-margin-top: 72px; }
}

/* Фон главной: одна тёплая засветка сверху справа и нейтральная сетка 64px —
   вместо трёх радиалов и оранжевой миллиметровки студии. */
body:has(#welcome:not(.hidden)) {
  background:
    radial-gradient(1100px 520px at 88% -14%, rgba(255, 122, 41, .10), transparent 62%),
    linear-gradient(rgba(var(--ink-rgb), .030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--ink-rgb), .030) 1px, transparent 1px),
    var(--bg);
  background-size: auto, 64px 64px, 64px 64px, auto;
}
@media (max-width: 700px) {
  body:has(#welcome:not(.hidden)) {
    background: radial-gradient(700px 380px at 90% -10%, rgba(255, 122, 41, .10), transparent 62%), var(--bg);
  }
}

/* ────────── переключатель языка на главной ──────────
   Базовые стили лежат в style.css; здесь снимаем «кнопочную» физику лендинга
   (min-height 40px, офсет), которая иначе раздувает капсулу в шапке. */
.landing .lang-switch {
  padding: 2px; border-radius: 999px; gap: 2px;
  border: var(--bw-edge) solid var(--edge); background: var(--surface-2);
  box-shadow: var(--lift-1);
}
.landing .lang-switch button {
  min-height: 26px; padding: 0 var(--s-2); border: none; border-radius: 999px;
  font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 700;
  letter-spacing: var(--ls-caps); color: var(--ink-muted);
  background: transparent; box-shadow: none;
}
.landing .lang-switch button:hover:not(:disabled) { background: rgba(var(--ink-rgb), .06); color: var(--text); }
.landing .lang-switch button:active:not(:disabled) { transform: none; box-shadow: none; }
.landing .lang-switch button.on,
.landing .lang-switch button.on:hover:not(:disabled) {
  background: var(--surface); color: var(--text); font-weight: 800;
  border: var(--bw-edge) solid var(--edge); box-shadow: var(--lift-1);
}
.ld-foot-about .lang-switch { margin-top: var(--s-4); }

/* Английские строки длиннее русских: тарифная кнопка и бейдж не должны
   разрывать карточку — переносим слово, а не выпираем за край. */
.ld-plan-badge, .ld-tick-sub { white-space: nowrap; }
.landing .ld-plan-pay, .landing .ld-plan-start, .landing .ld-pack-buy {
  white-space: normal; line-height: 1.2; padding: var(--s-2) var(--s-3);
}

/* ────────── мобильная шапка: было переполнение на 65px ──────────
   На 375px в строку не влезали марка + язык + «Войти» + CTA, и страница
   уезжала вбок (scrollWidth 440 при вьюпорте 375). CTA из шапки убираем:
   ровно та же кнопка стоит в первом экране на два пальца ниже, дублировать
   её на телефоне незачем. Остальное ужимаем. */
@media (max-width: 700px) {
  .ld-bar { gap: var(--s-2); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3); }
  .ld-brand img { width: 26px; height: 26px; }
  .ld-brand-word { font-size: var(--fs-base); }
  .ld-bar-actions { gap: var(--s-1); margin-left: auto; min-width: 0; }
  #ld-nav-start { display: none; }
  #ld-nav-login { padding: 8px 12px; font-size: var(--fs-sm); white-space: nowrap; }
  .lang-switch button { padding: 5px 9px; font-size: var(--fs-meta); }
}
/* Ни одна секция не имеет права раздвигать страницу вбок: горизонтальный
   скролл на телефоне читается как сломанная вёрстка. */
.landing { overflow-x: clip; }

/* ══════════════════ РАЗДЕЛ «ПРОМТЫ»: вкладки и плитки ══════════════════
   Карточки рисует app.js из /api/styles. Постер — единственная тяжёлая
   вещь на плитке, поэтому он lazy и с фиксированным соотношением: без
   height картинка на загрузке дёргает всю сетку. */
.ld-tabs {
  display: flex; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-6);
}
.landing .ld-tabs button {
  min-height: 34px; padding: 0 var(--s-3); border: var(--bw-hair) solid var(--line);
  background: var(--surface); color: var(--ink-muted); box-shadow: none;
  border-radius: 999px; font-size: var(--fs-sm);
}
.landing .ld-tabs button:hover:not(:disabled) { color: var(--text); border-color: var(--line-strong); }
.landing .ld-tabs button.on {
  background: var(--accent-wash); color: var(--accent-ink);
  border-color: var(--edge); font-weight: 600;
}

.ld-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--s-3); align-items: stretch;
}
.ld-card {
  display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3);
  background: var(--surface); border: var(--bw-hair) solid var(--line);
  border-radius: var(--r-3); box-shadow: var(--lift-1);
}
.ld-card h3 { margin: 0; font-size: var(--fs-md); line-height: 1.25; }
.ld-card-media {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: var(--r-2); background: var(--surface-2);
}
.ld-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ld-card-mark {
  position: absolute; top: var(--s-2); left: var(--s-2);
  font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--ls-caps);
  text-transform: lowercase; color: var(--gold-ink); background: var(--gold-wash);
  border-radius: 999px; padding: 2px var(--s-2);
}
.ld-card-lock { left: auto; right: var(--s-2); color: var(--accent-ink); background: var(--accent-wash); }
.ld-card-preset .ld-card-mark { position: static; align-self: flex-start; }
.ld-card-gain { margin: 0; font-size: var(--fs-sm); line-height: 1.45; }
.ld-card-meta { margin: 0; font-size: var(--fs-meta); line-height: 1.4; }
.ld-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.ld-card-tags span {
  font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--ink-muted);
  background: var(--surface-2); border-radius: 999px; padding: 1px var(--s-2);
}
.ld-card-foot {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2); font-size: var(--fs-meta);
}
.landing .ld-card-foot button { min-height: 32px; padding: 0 var(--s-3); font-size: var(--fs-sm); }
.ld-card-preset ol { margin: var(--s-2) 0 0; padding-left: 1.1em; font-size: var(--fs-sm);
  color: var(--ink-muted); display: flex; flex-direction: column; gap: 3px; }

/* ══════════════════ РАЗДЕЛ «ШКОЛА»: уровни и уроки ══════════════════ */
.ld-learn-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-4);
}
.ld-learn-level {
  padding: var(--s-4); background: var(--surface);
  border: var(--bw-hair) solid var(--line); border-radius: var(--r-3);
}
.ld-learn-level h3 {
  margin: 0 0 var(--s-2); font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--ls-caps); text-transform: lowercase; color: var(--ink-muted);
}
.ld-learn-level ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ld-learn-level li { display: flex; align-items: center; gap: var(--s-1);
  border-top: var(--bw-hair) solid var(--line); }
.ld-learn-level li:first-child { border-top: none; }
.landing .ld-learn-level li button {
  flex: 1; min-height: 44px; padding: var(--s-2) 0; border: none; box-shadow: none;
  background: transparent; text-align: left; display: flex; flex-direction: column; gap: 1px;
}
.landing .ld-learn-level li button:hover:not(:disabled) { background: transparent; }
.landing .ld-learn-level li button:hover .ld-learn-t { color: var(--accent-ink); }
.ld-learn-t { font-size: var(--fs-base); color: var(--text); }
.ld-learn-m { font-size: var(--fs-meta); font-family: var(--font-mono); }
.ld-learn-level li.locked .ld-learn-t { color: var(--ink-muted); }
.ld-learn-perma { font-size: var(--fs-sm); color: var(--ink-muted); text-decoration: none; padding: 0 var(--s-1); }
.ld-learn-perma:hover { color: var(--accent-ink); }

/* Урок в модалке: читаемая колонка, широкие таблицы скроллятся внутри себя. */
.ld-lesson { max-width: 68ch; line-height: 1.6; }
.ld-lesson h1 { font-size: var(--fs-xl); margin: 0 0 var(--s-3); }
.ld-lesson h2 { font-size: var(--fs-lg); margin: var(--s-6) 0 var(--s-2); }
.ld-lesson h3 { font-size: var(--fs-md); margin: var(--s-4) 0 var(--s-1); }
.ld-lesson p, .ld-lesson ul, .ld-lesson ol { margin: 0 0 var(--s-3); }
.ld-lesson code { font-family: var(--font-mono); font-size: .92em; background: var(--surface-2);
  border-radius: var(--r-1); padding: 1px 4px; }
.ld-lesson .tw { overflow-x: auto; margin: 0 0 var(--s-3); }
.ld-lesson table { border-collapse: collapse; font-size: var(--fs-sm); }
.ld-lesson th, .ld-lesson td { padding: var(--s-1) var(--s-2); text-align: left;
  border-bottom: var(--bw-hair) solid var(--line); white-space: nowrap; }
.ld-lesson th { font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--ls-caps); text-transform: lowercase; color: var(--ink-muted); }
.ld-learn-gate {
  margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--r-3);
  background: var(--accent-wash); border: var(--bw-hair) solid var(--edge);
}
.ld-learn-gate p { margin: 0 0 var(--s-2); }

/* ═══════════ ТЁМНАЯ ТЕМА ЛЕНДИНГА ═══════════
   Лендинг держит СВОИ токены прямо на .landing (см. шапку файла) — поэтому
   тёмные токены приложения из style.css сюда не доставали, и в ночи шапка
   и карточки оставались светлыми плитами. Переопределяем тот же набор тем
   же селектором-парой; всё, что на var(), перекрашивается само. Светлые
   скрины UI внутри .ld-shot НЕ трогаем: тёмная рамка-«окно» вокруг них —
   намеренная подача скриншота, а не недокрас. */
:root[data-theme="dark"], :root[data-theme="dark"] .landing,
:root:not([data-theme="light"]).os-dark,
:root:not([data-theme="light"]).os-dark .landing {
  --edge: rgba(240, 231, 220, .10);
  --lift-1: inset 0 1px 0 rgba(255, 255, 255, .07), 0 4px 16px rgba(0, 0, 0, .28);
  --lift-2: inset 0 1px 0 rgba(255, 255, 255, .07), 0 6px 24px rgba(0, 0, 0, .32);
  --lift-3: inset 0 1px 0 rgba(255, 255, 255, .07), 0 10px 30px rgba(0, 0, 0, .38);
  --line: rgba(240, 231, 220, .12);
  --line-strong: rgba(240, 231, 220, .22);
  --surface: #2b231c;
  --surface-2: #362c23;
  --ink-muted: #c2b3a2;
  --accent-ink: #ffa465;
  --accent-2-ink: #ff9a6a;
  --gold-ink: #f2c069;
  --ok-ink: #4fd6a0;
  --accent-wash: rgba(255, 122, 41, .12);
  --accent-line: rgba(255, 122, 41, .30);
  --gold-wash: rgba(242, 192, 105, .14);
  --shadow-soft: 0 8px 20px -14px rgba(0, 0, 0, .6);
  --shadow-lift: 0 18px 40px -26px rgba(0, 0, 0, .7);
  color-scheme: dark;
}
/* Захардкоженные светлые места — по одному. */
:root[data-theme="dark"] .ld-bar,
:root:not([data-theme="light"]).os-dark .ld-bar {
  background: linear-gradient(180deg, rgba(46, 38, 30, .82), rgba(38, 31, 25, .72));
  box-shadow: var(--lift-2),
              inset 0 1px 0 rgba(255, 255, 255, .07);
}
:root[data-theme="dark"] .landing button:hover:not(:disabled),
:root:not([data-theme="light"]).os-dark .landing button:hover:not(:disabled) {
  background: #362c23;
}
/* Скрин UI в тёмной — светлое «окно» с тенью, как скриншот в браузере. */
:root[data-theme="dark"] .ld-shot img,
:root:not([data-theme="light"]).os-dark .ld-shot img {
  border-radius: var(--r-2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}

/* ─── Новые секции: модельки, режимы, движки ─── */
.ld-models-row img { width: 100%; max-width: 900px; margin: 0 auto; display: block; border-radius: var(--r-4); border: var(--bw-hair) solid var(--line); }
.ld-cta-row { text-align: center; margin: var(--s-6) 0 0; }
.ld-cta-row .ld-cta { text-decoration: none; display: inline-block; padding: 12px 22px; }
a.ld-cta.primary { color: var(--on-fire); background: var(--fire-ink); border: var(--bw-edge) solid var(--edge); border-radius: var(--r-2); box-shadow: var(--lift-2); font-weight: 800; }
.ld-modes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s-3); }
.ld-mode-card {
  display: flex; flex-direction: column; gap: 4px; padding: var(--s-2);
  background: var(--surface); border: var(--bw-hair) solid var(--line);
  border-radius: var(--r-4); text-decoration: none; color: var(--text);
  transition: transform var(--t), box-shadow var(--t);
}
.ld-mode-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.ld-mode-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-3); }
.ld-mode-card b { font: 800 var(--fs-md)/1.2 var(--font-head); margin-top: 4px; }
.ld-mode-card span { font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.35; }
.ld-engines-row { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; }
.ld-eng {
  padding: 10px 18px; border-radius: 999px; font: 800 var(--fs-base)/1 var(--font-head);
  color: var(--accent-ink); background: var(--accent-wash);
  border: var(--bw-hair) solid var(--accent-line);
}
.ld-engines-note { text-align: center; margin-top: var(--s-4); }

/* Тёмная: витрина клипа и скрины шагов — стеклянные тёмные карточки. */
:root[data-theme="dark"] .ld-phone, :root:not([data-theme="light"]).os-dark .ld-phone,
:root[data-theme="dark"] .ld-frames li, :root:not([data-theme="light"]).os-dark .ld-frames li,
:root[data-theme="dark"] .ld-proof, :root:not([data-theme="light"]).os-dark .ld-proof {
  background: var(--surface); border-color: var(--line);
}
:root[data-theme="dark"] .ld-step-shot img, :root:not([data-theme="light"]).os-dark .ld-step-shot img,
:root[data-theme="dark"] .guide-shot img, :root:not([data-theme="light"]).os-dark .guide-shot img {
  border-radius: var(--r-2); box-shadow: 0 10px 30px rgba(0,0,0,.5);
}

/* ────────── живая стена трендов ────────── */
/* Настоящие превью из /api/trends мозаикой-колонками, как в самой витрине.
   Плитки кликабельны и ведут на страницу тренда. */
.ld-wall { column-count: 4; column-gap: var(--s-2); }
.ld-wall-tile {
  position: relative; display: block; margin: 0 0 var(--s-2); overflow: hidden;
  border-radius: 18px; background: #070707; break-inside: avoid;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.ld-wall-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.ld-wall-tile > img, .ld-wall-tile > video { display: block; width: 100%; height: auto; }
.ld-wall-tile > span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px;
  color: #fff; font: 800 13px/1.1 var(--font-head); letter-spacing: -.02em; text-transform: lowercase;
  background: linear-gradient(transparent, rgba(14, 8, 4, .78));
  text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}
.ld-wall-more { margin: var(--s-4) 0 0; font-size: var(--fs-sm); }
.ld-wall-more a { color: var(--accent-ink); font-weight: 700; text-decoration: none; }
.ld-wall-more a:hover { text-decoration: underline; }
@media (max-width: 900px) { .ld-wall { column-count: 3; } }
@media (max-width: 620px) { .ld-wall { column-count: 2; } }