/* ─────────────────────────────────────────────────────────────────────────
   Публичная главная sellap.ru
   Токены = тёмная тема кабинета (docs/design/prototype/sellap-model.html):
   лендинг и продукт — одна ДНК, посетитель видит то, что получит внутри.
   Композиция: концепт docs/design/landing/CONCEPT.md (сборка V1+V2+V3).
   ───────────────────────────────────────────────────────────────────────── */
:root {
  --bg: #12161D;
  --panel: #1A1F28;
  --panel-2: #222834;
  --panel-3: #2A3140;
  --line: #2E3646;
  --line-soft: #242B37;
  --ink: #EDF0F5;
  /* Серые чуть светлее, чем в кабинете (#98A2B3 / #6B7686): на лендинге мелкий текст
     (подписи, дисклеймер, футер) — основной контент, и #6B7686 давал 3,9:1 вместо 4,5:1 AA.
     Проверено на всех трёх подложках: --bg, --panel, --panel-2. */
  --muted: #A2ABBB;
  --faint: #8C95A4;
  --brand: #8AABFF;
  --brand-solid: #3B6BF0;
  --brand-hover: #4A77F2;
  --brand-wash: #1C2740;
  --pos: #3DD9A0;
  --warn: #F4B740;
  --neg: #FF7A70;
  --oz: #4E8CFF;
  --wb: #D659C7;
  --ym: #F4C31F;

  --z-header: 20;

  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 12px;
  --r-xl: 16px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Onest', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  /* Табличные цифры — как в кабинете: проценты и суммы в блоках выгоды набраны одной шириной. */
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none }
h1, h2, h3 { margin: 0; text-wrap: balance }
p { text-wrap: pretty }
img { max-width: 100%; display: block }
button { font: inherit; color: inherit }
.num { font-variant-numeric: tabular-nums; letter-spacing: -.01em }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand-solid); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--r-md) 0;
}
.skip:focus { left: 0 }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px }

/* ─── кнопки ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--r-md); padding: 9px 16px;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.btn-brand { background: var(--brand-solid); color: #fff }
.btn-brand:hover { background: var(--brand-hover) }
.btn-ghost { border-color: var(--line); color: var(--ink) }
.btn-ghost:hover { border-color: var(--faint) }
.btn-big { padding: 13px 22px; font-size: 15px; border-radius: var(--r-lg) }

/* ─── шапка ─── */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(18, 22, 29, .86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.header-row { display: flex; align-items: center; gap: 28px; height: 60px }
.logo { display: flex; align-items: center }
.logo img { height: 26px; width: auto; display: block }
.menu { display: flex; gap: 22px; font-size: 13.5px; color: var(--muted) }
.menu a:hover { color: var(--ink) }
.header-cta { margin-left: auto; display: flex; gap: 10px; align-items: center }

/* ─── герой ─── */
/* padding-block, а не padding: иначе шорткат затирает боковые отступы .wrap и на узких
   экранах текст прилипает к краю (то же правило для .final ниже). */
.hero { padding-block: 72px 64px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center }
.hero h1 {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: clamp(34px, 4.6vw, 54px); line-height: 1.12; font-weight: 600; letter-spacing: -.015em;
}
.hero-sub { margin: 20px 0 0; color: var(--muted); font-size: 17px; max-width: 52ch }
.hero-sub b { color: var(--ink); font-weight: 600 }
.hero-actions { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap }
.hero-note { font-size: 12.5px; color: var(--faint); margin: 12px 0 0 }

.mp-chips { display: flex; gap: 10px; margin: 26px 0 0; flex-wrap: wrap; padding: 0; list-style: none }
.mp-chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 99px; padding: 7px 14px 7px 9px;
  font-size: 13px; background: var(--panel);
}
.mp-chip .dot {
  width: 18px; height: 18px; border-radius: var(--r-sm); display: grid; place-items: center;
  font-size: 10px; font-weight: 800; color: #0E1116;
}
.mp-chip small { color: var(--faint); font-size: 11.5px }

/* мини-консоль в герое */
.console { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45) }
.console-dock { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft) }
.console-caps { display: flex; gap: 4px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 99px; padding: 4px }
.console-caps span { width: 26px; height: 26px; border-radius: 99px; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; color: #0E1116 }
.console-caps .on { outline: 2px solid var(--brand-solid); outline-offset: 1px }
.console-shop { font-size: 12.5px; color: var(--muted); margin-left: 6px }
.console-time { margin-left: auto; font-size: 11.5px; color: var(--faint) }
.console-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 }
.kpi { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 11px; padding: 12px 14px }
.kpi .l { font-size: 11.5px; color: var(--faint) }
.kpi .v { font-size: 21px; font-weight: 600; margin-top: 3px }
.kpi .d { font-size: 11.5px; margin-top: 2px }
.up { color: var(--pos) }
.down { color: var(--neg) }
.console-rows { border-top: 1px solid var(--line-soft) }
.console-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center;
  padding: 9px 4px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px;
}
.console-row .n { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.console-row .m { color: var(--faint) }
.badge { font-size: 10.5px; border-radius: var(--r-sm); padding: 2px 7px; font-weight: 700 }
.b-pos { background: rgba(61, 217, 160, .14); color: var(--pos) }
.b-neg { background: rgba(255, 122, 112, .14); color: var(--neg) }
.b-warn { background: rgba(244, 183, 64, .16); color: var(--warn) }
.console-caption { margin: 10px 0 0; font-size: 11.5px; color: var(--faint); text-align: right }

/* ─── секции ─── */
section { padding: 76px 0 }
.sec-h { font-family: 'Onest', system-ui, sans-serif; font-size: clamp(26px, 3vw, 36px); font-weight: 600; letter-spacing: -.01em }
.sec-sub { color: var(--muted); margin: 12px 0 0; max-width: 66ch }

/* ─── калькулятор ─── */
.calc-band { background: var(--panel); border-block: 1px solid var(--line) }
.calc {
  margin-top: 36px; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-xl); overflow: hidden;
}
.calc-head { padding: 14px 22px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.calc-head b { font-size: 15px }
.calc-head .edition { font-size: 11.5px; color: var(--faint) }
.calc-head .free-mark {
  margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--pos); background: rgba(61, 217, 160, .12); border-radius: var(--r-sm); padding: 3px 8px;
}
.calc-body { display: grid; grid-template-columns: 1.1fr 1fr }
.calc-form { padding: 22px; display: flex; flex-direction: column; gap: 14px; border-right: 1px solid var(--line-soft) }
.field label { font-size: 12px; color: var(--muted); display: block; margin-bottom: 5px }
.field input, .field select {
  width: 100%; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 9px 12px; font: inherit; background: var(--panel-2); color: var(--ink);
}
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--brand-solid); outline-offset: -1px; border-color: transparent }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px }

.calc-hint { margin: auto 0 0; font-size: 12.5px; color: var(--faint); max-width: 46ch }
.calc-result { padding: 22px; display: flex; flex-direction: column; background: var(--panel) }
.result-main { padding-bottom: 14px; border-bottom: 1px solid var(--line-soft) }
.result-main .l { font-size: 12px; color: var(--muted) }
.result-main .v { font-size: 36px; font-weight: 600; letter-spacing: -.02em; margin-top: 2px }
.result-main .v.pos { color: var(--pos) }
.result-main .v.neg { color: var(--neg) }
.result-main .m { font-size: 13px; color: var(--muted); margin-top: 2px }
.result-list { margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px }
.result-list > div { display: flex; gap: 12px }
/* Своя раскладка строк перебивает [hidden] из UA-стилей — скрываем явно. */
.result-list > div[hidden] { display: none }
.result-list dt { color: var(--muted) }
.result-list dd { margin: 0 0 0 auto; font-weight: 500 }
.result-list .payout { padding-top: 8px; border-top: 1px solid var(--line-soft) }
.result-list .payout dt { color: var(--ink) }
.result-cta { margin-top: auto; padding-top: 18px }
.result-cta .btn { width: 100% }
.result-cta p { font-size: 12px; color: var(--faint); text-align: center; margin: 10px 0 0 }
.calc-disclaimer { padding: 14px 22px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--faint); margin: 0 }
.calc-disclaimer b { color: var(--muted); font-weight: 600 }

.bridge { margin-top: 44px; display: grid; grid-template-columns: 1fr; gap: 24px }
.bridge-shot { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .4) }
/* Снимок таблицы каталога высокий: показываем верх экрана, а не растягиваем страницу на 1000 px. */
.bridge-shot img { height: clamp(300px, 42vw, 560px); object-fit: cover; object-position: top center }

/* ─── модули ─── */
.mods { margin-top: 40px; border-top: 1px solid var(--line) }
.mod {
  display: grid; grid-template-columns: 230px 1fr 200px; gap: 28px; align-items: center;
  padding: 22px 6px; border-bottom: 1px solid var(--line);
}
.mod h3 { font-size: 16.5px; font-weight: 600 }
.mod p { margin: 0; color: var(--muted); font-size: 14px; max-width: 60ch }
.mod-viz { justify-self: end; text-align: right }
.mod-viz .big { font-size: 22px; font-weight: 600 }
.mod-viz .cap { font-size: 11.5px; color: var(--faint) }
.soon { color: var(--faint); font-size: 11px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 2px 7px; margin-left: 8px; vertical-align: 2px; white-space: nowrap }

/* ─── развороты площадок ─── */
.spread { padding: 64px 0 }
.spread-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center }
.spread.rtl .spread-inner { direction: rtl }
.spread.rtl .spread-inner > * { direction: ltr }
.spread-tag { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; border-radius: 99px; padding: 6px 14px }
.spread h2 { font-family: 'Onest', system-ui, sans-serif; font-size: clamp(24px, 3vw, 34px); font-weight: 600; margin-top: 16px; letter-spacing: -.01em }
.spread .d { color: var(--muted); margin: 14px 0 0; font-size: 15.5px; max-width: 52ch }
.spread ul { margin: 20px 0 0; padding: 0; list-style: none; font-size: 14.5px; color: var(--muted) }
.spread li { padding: 9px 0; border-bottom: 1px solid var(--line-soft) }
.spread li b { color: var(--ink); font-weight: 600 }
.spread-pic { border-radius: var(--r-xl); padding: 26px; display: grid; place-items: center }
.spread-pic img { border-radius: var(--r-md); box-shadow: 0 24px 60px rgba(0, 0, 0, .5) }
.s-oz { background: rgba(78, 140, 255, .1) }
.s-oz .spread-tag { background: var(--oz); color: #0A1428 }
.s-oz .spread-pic { background: rgba(78, 140, 255, .09); border: 1px solid rgba(78, 140, 255, .22) }
.s-wb { background: rgba(214, 89, 199, .1) }
.s-wb .spread-tag { background: var(--wb); color: #17040F }
.s-wb .spread-pic { background: rgba(214, 89, 199, .09); border: 1px solid rgba(214, 89, 199, .22) }
.s-ym { background: rgba(244, 195, 31, .08) }
.s-ym .spread-tag { background: var(--ym); color: #2A2000 }
.s-ym .spread-pic { background: rgba(244, 195, 31, .08); border: 1px solid rgba(244, 195, 31, .2) }
.status { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; border-radius: var(--r-sm); padding: 4px 9px; margin-left: 10px; vertical-align: 2px; white-space: nowrap }
.st-live { background: rgba(61, 217, 160, .14); color: var(--pos) }
.st-beta { background: rgba(244, 183, 64, .16); color: var(--warn) }
.st-soon { background: var(--panel-2); color: var(--muted); border: 1px solid var(--line) }

/* ─── без регистрации ─── */
.free-band { background: var(--panel); border-block: 1px solid var(--line) }
.free-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 36px }
.free-item {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px; display: flex; flex-direction: column; gap: 10px;
  transition: border-color .18s var(--ease);
}
a.free-item:hover { border-color: var(--brand-solid) }
.free-item .t { font-weight: 600; font-size: 16px }
.free-item p { margin: 0; color: var(--muted); font-size: 13.5px; flex: 1 }
.free-item .go { color: var(--brand); font-weight: 600; font-size: 13.5px }
.free-item .k { align-self: flex-start; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--pos); background: rgba(61, 217, 160, .12); border-radius: var(--r-sm); padding: 3px 8px }
/* pending — страницы ещё нет; gated — работает, но за регистрацией (это разные вещи). */
.free-item.pending { border-style: dashed }
.free-item.pending .k { color: var(--muted); background: var(--panel-2) }
.free-item.gated .k { color: var(--brand); background: var(--brand-wash) }
a.free-item .go, .free-item a.go { text-decoration: none }
.free-item a.go:hover { text-decoration: underline }

/* ─── шаги + мобильный снимок ─── */
.steps-band { display: grid; grid-template-columns: 1fr 300px; gap: 56px; align-items: center }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; counter-reset: st }
.step { border-top: 2px solid var(--brand-solid); padding-top: 14px }
.step::before { counter-increment: st; content: counter(st); font-size: 13px; color: var(--brand); font-weight: 700 }
.step h3 { font-size: 15.5px; margin-top: 4px }
.step p { color: var(--muted); font-size: 13.5px; margin: 8px 0 0 }
.phone { justify-self: center; text-align: center }
.phone img { border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0, 0, 0, .45) }
.phone span { display: block; margin-top: 12px; font-size: 12.5px; color: var(--faint) }

/* ─── безопасность ─── */
.sec-two { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start }
.sec-two ul { margin: 22px 0 0; padding: 0; list-style: none }
.sec-two li { padding: 13px 0; border-bottom: 1px solid var(--line-soft); color: var(--muted); font-size: 14.5px; display: flex; gap: 12px }
.sec-two li b { color: var(--ink); font-weight: 600 }
.sec-two li .ok { color: var(--pos); flex: none }
.sec-shot { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .4) }

/* ─── бета-тариф ─── */
.beta { background: var(--brand-wash); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 32px; margin-top: 32px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center }
.beta h3 { font-family: 'Onest', system-ui, sans-serif; font-size: 22px; font-weight: 600 }
.beta p { color: var(--muted); margin: 10px 0 0; max-width: 60ch }

/* ─── финал, футер ─── */
.final { text-align: center; padding-block: 88px }
.final h2 { font-family: 'Onest', system-ui, sans-serif; font-size: clamp(28px, 3.4vw, 42px); font-weight: 600 }
.final p { color: var(--muted); margin: 14px auto 0; max-width: 52ch }
.final-actions { display: flex; gap: 12px; justify-content: center; margin-top: 32px; flex-wrap: wrap }
.site-footer { border-top: 1px solid var(--line); padding: 28px 0; color: var(--faint); font-size: 12.5px }
.site-footer .wrap { display: flex; gap: 24px; flex-wrap: wrap }
.site-footer nav { margin-left: auto; display: flex; gap: 18px }
.site-footer a:hover { color: var(--muted) }

/* ─── адаптив ─── */
@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; gap: 40px }
  .calc-body { grid-template-columns: 1fr }
  .calc-form { border-right: 0; border-bottom: 1px solid var(--line-soft) }
  .mod { grid-template-columns: 1fr; gap: 8px }
  .mod-viz { justify-self: start; text-align: left }
  .spread-inner { grid-template-columns: 1fr; gap: 32px }
  .spread.rtl .spread-inner { direction: ltr }
  .sec-two { grid-template-columns: 1fr; gap: 36px }
  .steps-band { grid-template-columns: 1fr }
  .phone { display: none }
  .beta { grid-template-columns: 1fr }
  .menu { display: none }
}
@media (max-width: 620px) {
  .wrap { padding: 0 20px }
  section { padding: 56px 0 }
  .hero { padding-block: 48px 40px }
  .final { padding-block: 64px }
  .console-caption { text-align: left }
  .console-kpis { grid-template-columns: 1fr }
  .field-row, .field-row-3 { grid-template-columns: 1fr }
  .steps { grid-template-columns: 1fr; gap: 20px }
  .console-row { grid-template-columns: 1fr auto }
  .console-row .m { display: none }
  .header-cta .btn-ghost { display: none }
}

/* Появление героя: контент видим по умолчанию, класс ставит JS после загрузки —
   без JS и в headless-рендере страница остаётся полностью читаемой. */
@media (prefers-reduced-motion: no-preference) {
  .js-ready .hero > * { animation: rise .7s var(--ease) both }
  .js-ready .hero > *:nth-child(2) { animation-delay: .1s }
  @keyframes rise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
}