/*
 * Витрина genrate.kz.
 *
 * Тёмная база выбрана не для красоты: сервис — рабочий инструмент, в
 * котором продавец каждый день смотрит на цифры и графики. Панель тоже
 * тёмная, и витрина обязана обещать то, что человек увидит внутри.
 *
 * Прошлый лендинг ломался на телефоне по одной причине: шапка не умещалась
 * в 375 px и растягивала документ до 588. Здесь точки перелома заданы для
 * всех блоков, а шапка на узком экране сворачивается в меню.
 */

/* ── Палитра ──────────────────────────────────────────────────────────── */
:root {
  --ink:        #06070a;   /* фон страницы */
  --panel:      #0e1116;   /* поверхность блока */
  --line:       #1e2631;   /* волосяная линия */
  --line-soft:  #161c25;

  --text:       #e9eef5;
  --dim:        #93a0b1;
  --faint:      #5d6a7a;

  --accent:     #1cbb93;   /* фирменный, тот же что в панели */
  --accent-2:   #70e478;
  --accent-dim: rgba(28,187,147,.13);
  --accent-glow:rgba(28,187,147,.28);

  --rival:      #ff5a5a;   /* цена конкурента */
  --gold:       #f5b544;

  --r:    14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --shell: 1180px;
  --t: .35s cubic-bezier(.22,.61,.36,1);
}

/* ── Основа ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Страховка от повторения главной ошибки прошлой версии: что бы ни
     вылезло за край, документ вбок не поедет. */
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px;
}

.mono {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* ── Свечение фона ────────────────────────────────────────────────────── */
.glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 45% at 50% -5%, rgba(28,187,147,.10) 0%, transparent 65%),
    radial-gradient(ellipse 45% 35% at 90% 15%, rgba(112,228,120,.05) 0%, transparent 60%);
}

/* ── Шапка ────────────────────────────────────────────────────────────── */
.top {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(6,7,10,.72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t), background var(--t);
}
.top.is-stuck { border-bottom-color: var(--line-soft); background: rgba(6,7,10,.92); }

.top__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 66px;
}

.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand img { width: 32px; height: 32px; }
.brand__name { font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.brand__name span {
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.brand__sub {
  display: block; margin-top: 3px;
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
}

.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a { font-size: 14px; color: var(--dim); transition: color var(--t); }
.nav a:hover { color: var(--text); }

.top__cta { display: flex; align-items: center; gap: 10px; margin-left: 26px; flex-shrink: 0; }

.burger {
  display: none;
  margin-left: auto;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  align-items: center; justify-content: center;
}
.burger svg { width: 18px; height: 18px; }

/* ── Кнопки ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: 14px; font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.btn--primary {
  background: linear-gradient(135deg, var(--accent) 0%, #16a884 100%);
  color: #04120d;
  box-shadow: 0 6px 22px -8px var(--accent-glow);
}
.btn--primary:hover { box-shadow: 0 10px 30px -8px var(--accent-glow); }

.btn--ghost { border-color: var(--line); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn--quiet { color: var(--dim); background: transparent; padding-left: 12px; padding-right: 12px; }
.btn--quiet:hover { color: var(--text); }

.btn--lg { padding: 15px 30px; font-size: 16px; }
.btn--full { width: 100%; }

/* ── Секции ───────────────────────────────────────────────────────────── */
.section { position: relative; z-index: 1; padding: 104px 0; }
.section + .section { border-top: 1px solid var(--line-soft); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--panel);
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: var(--dim);
  margin-bottom: 20px;
}
.eyebrow b { color: var(--accent); font-weight: 700; }

.h2 {
  font-size: clamp(28px, 4.2vw, 42px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.12;
  margin: 0 0 14px;
  text-wrap: balance;
}
.lede {
  font-size: 17px;
  color: var(--dim);
  max-width: 62ch;
  margin: 0 0 44px;
}

/* ── Герой ────────────────────────────────────────────────────────────── */
.hero { position: relative; z-index: 1; padding: 74px 0 96px; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(34px, 5.4vw, 60px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.06;
  margin: 0 0 20px;
  text-wrap: balance;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero p {
  font-size: 18px;
  color: var(--dim);
  max-width: 52ch;
  margin: 0 0 32px;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero__note { margin-top: 18px; font-size: 13px; color: var(--faint); }

/* ── Живой репрайс ────────────────────────────────────────────────────── */
.ticker {
  background: linear-gradient(180deg, var(--panel) 0%, #0b0e13 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 30px 70px -40px rgba(0,0,0,.9);
}
.ticker__head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px; color: var(--dim);
}
.pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-glow);
  animation: pulse 2.2s infinite;
  flex-shrink: 0;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 var(--accent-glow); }
  70%  { box-shadow: 0 0 0 9px rgba(28,187,147,0); }
  100% { box-shadow: 0 0 0 0 rgba(28,187,147,0); }
}
.ticker__sku { margin-left: auto; color: var(--faint); }

.row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}
.row__who { color: var(--dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__price { margin-left: auto; font-size: 15px; font-weight: 600; white-space: nowrap; }
.row--rival .row__price { color: var(--rival); }
.row--you { background: var(--accent-dim); }
.row--you .row__who { color: var(--text); font-weight: 700; }
.row--you .row__price { color: var(--accent); }
.row.flash { animation: flash .7s ease-out; }
@keyframes flash { 0% { background: rgba(28,187,147,.28); } 100% { background: transparent; } }
.row--you.flash { animation: flashYou .7s ease-out; }
@keyframes flashYou { 0% { background: rgba(28,187,147,.4); } 100% { background: var(--accent-dim); } }

.badge {
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700;
  background: var(--accent); color: #04120d;
  white-space: nowrap;
}
.badge--lost { background: rgba(255,90,90,.16); color: var(--rival); }

.ticker__log {
  padding: 12px 18px 16px;
  font-size: 12px;
  color: var(--faint);
  min-height: 64px;
}
.ticker__log div { margin-bottom: 4px; }
.ticker__log b { color: var(--dim); font-weight: 500; }

/* ── Полоса чисел ─────────────────────────────────────────────────────── */
.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  overflow: hidden;
  margin-top: 64px;
}
.fact { background: var(--ink); padding: 22px 20px; }
.fact__n { font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: var(--accent); }
.fact__t { font-size: 13px; color: var(--faint); margin-top: 4px; }

/* ── Шаги ─────────────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step {
  padding: 26px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: var(--panel);
}
.step__n {
  font-size: 12px; font-weight: 700; color: var(--accent);
  letter-spacing: .1em;
  margin-bottom: 12px;
}
.step h3 { font-size: 17px; font-weight: 700; margin: 0 0 8px; letter-spacing: -.01em; }
.step p { margin: 0; font-size: 14px; color: var(--dim); }

/* ── Возможности ──────────────────────────────────────────────────────── */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card {
  padding: 26px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: var(--panel);
  transition: border-color var(--t), transform var(--t);
}
.card:hover { border-color: var(--line); transform: translateY(-2px); }
.card__ico {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--accent-dim);
  color: var(--accent);
  margin-bottom: 15px;
}
.card__ico svg { width: 19px; height: 19px; }
.card h3 { font-size: 16px; font-weight: 700; margin: 0 0 7px; letter-spacing: -.01em; }
.card p { margin: 0; font-size: 14px; color: var(--dim); }
.card--new { position: relative; }
.card--new::after {
  content: "Новое";
  position: absolute; top: 18px; right: 18px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  padding: 3px 8px; border-radius: var(--r-pill);
  background: rgba(245,181,68,.14); color: var(--gold);
}

/* ── Калькулятор ──────────────────────────────────────────────────────── */
.calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--panel);
}
.calc__in { padding: 32px; border-right: 1px solid var(--line-soft); }
.calc__out { padding: 32px; background: #0b0e13; }

.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }
.field label { display: block; font-size: 13px; color: var(--dim); margin-bottom: 7px; }
.field input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--ink);
  color: var(--text);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--t), box-shadow var(--t);
}
.field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.field__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.out-row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}
.out-row span { color: var(--dim); }
.out-row b { margin-left: auto; font-weight: 600; font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; }
.out-row--minus b { color: var(--rival); }
.out-total {
  display: flex; align-items: baseline; gap: 12px;
  padding-top: 18px; margin-top: 6px;
}
.out-total span { color: var(--dim); font-size: 14px; }
.out-total b {
  margin-left: auto;
  font-size: 30px; font-weight: 800; letter-spacing: -.03em;
  font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.out-total b.neg { color: var(--rival); }
.out-hint { margin-top: 14px; font-size: 13px; color: var(--faint); }
.out-hint b { color: var(--dim); font-weight: 600; }

/* ── Тарифы ───────────────────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: start; }
.plan {
  display: flex; flex-direction: column;
  padding: 26px 22px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: var(--panel);
  position: relative;
}
.plan--featured {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(28,187,147,.07) 0%, var(--panel) 45%);
  box-shadow: 0 24px 60px -40px var(--accent-glow);
}
.plan__badge {
  position: absolute; top: -10px; left: 22px;
  padding: 3px 11px; border-radius: var(--r-pill);
  background: var(--accent); color: #04120d;
  font-size: 11px; font-weight: 700;
}
.plan h3 { font-size: 18px; font-weight: 800; margin: 0 0 4px; letter-spacing: -.01em; }
.plan__blurb { font-size: 13px; color: var(--faint); margin: 0 0 18px; min-height: 38px; }
.plan__price {
  font-size: 30px; font-weight: 800; letter-spacing: -.03em;
  font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums;
  margin-bottom: 2px;
}
.plan__per { font-size: 13px; color: var(--faint); font-weight: 500; }
.plan__limits {
  display: flex; flex-direction: column; gap: 5px;
  margin: 18px 0;
  padding: 14px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px; color: var(--dim);
}
.plan__limits b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.plan__feats { list-style: none; margin: 0 0 22px; padding: 0; flex: 1; }
.plan__feats li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 13px; color: var(--dim);
  margin-bottom: 8px;
}
.plan__feats li svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; color: var(--accent); }
.plan__feats li.inherit { color: var(--text); font-weight: 600; }
.plan__feats li.inherit svg { color: var(--gold); }

.discounts {
  margin-top: 26px;
  padding: 18px 24px;
  border: 1px dashed var(--line);
  border-radius: var(--r);
  text-align: center;
  font-size: 14px; color: var(--dim);
}
.discounts b { color: var(--accent); font-weight: 700; }

/* ── Заключительный призыв ────────────────────────────────────────────── */
.final {
  text-align: center;
  padding: 92px 0;
  border-top: 1px solid var(--line-soft);
  position: relative; z-index: 1;
}
.final h2 { font-size: clamp(26px, 4vw, 40px); font-weight: 800; letter-spacing: -.03em; margin: 0 0 14px; }
.final p { color: var(--dim); margin: 0 0 30px; }
.final__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Подвал ───────────────────────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--line-soft);
  padding: 40px 0;
  position: relative; z-index: 1;
}
.foot__inner { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.foot__links { display: flex; gap: 18px; margin-left: auto; }
.foot__links a { font-size: 13px; color: var(--dim); transition: color var(--t); }
.foot__links a:hover { color: var(--accent); }
.foot__copy { width: 100%; font-size: 12px; color: var(--faint); margin-top: 20px; }

/* ── Появление при прокрутке ──────────────────────────────────────────── */
/* Начальное состояние ВИДИМОЕ: если наблюдатель не отработает, страница
   всё равно читается. Прячем только там, где скрипт точно жив. */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.shown { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }

/* ── Точки перелома ───────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .plans { grid-template-columns: repeat(2, 1fr); }
  .facts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 42px; }
  .grid3, .steps { grid-template-columns: 1fr 1fr; }
  .calc { grid-template-columns: 1fr; }
  .calc__in { border-right: none; border-bottom: 1px solid var(--line-soft); }
}

@media (max-width: 760px) {
  /* Шапка: меню уезжает в выпадающий список, лишняя кнопка прячется.
     Именно здесь прошлая версия растягивала документ до 588 px. */
  .nav, .top__cta .btn--ghost { display: none; }
  .burger { display: inline-flex; }
  .top__cta { margin-left: 10px; }
  .nav.is-open {
    display: flex;
    position: absolute; top: 66px; left: 0; right: 0;
    flex-direction: column; gap: 0;
    padding: 8px 24px 16px;
    background: rgba(6,7,10,.97);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(14px);
  }
  .nav.is-open a { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }

  .section { padding: 72px 0; }
  .hero { padding: 48px 0 68px; }
  .grid3, .steps { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .facts { margin-top: 44px; }
  .plan__blurb { min-height: 0; }
}

@media (max-width: 460px) {
  .shell { padding: 0 16px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .fact { padding: 16px 14px; }
  .fact__n { font-size: 21px; }
  .calc__in, .calc__out { padding: 22px 18px; }
  .field__pair { grid-template-columns: 1fr; }
  .hero__cta .btn { width: 100%; }
  .btn--lg { padding: 14px 22px; }
  .row { padding: 11px 14px; font-size: 13px; }
  .ticker__head { padding: 11px 14px; }
  .ticker__sku { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Показ самого сервиса
   ═══════════════════════════════════════════════════════════════════════

   Скриншот, положенный плашмя, читается как картинка в отчёте. Тот же
   скриншот под углом, в рамке браузера и с подсветкой снизу читается как
   работающий экран. Разница — в ощущении, что за этим что-то живёт.

   Угол не декоративный: он уходит, когда блок попадает в окно. Получается
   движение «экран поворачивается к вам», а не статичная картинка.
   ═══════════════════════════════════════════════════════════════════════ */

.stage {
  position: relative;
  perspective: 1600px;
  perspective-origin: 50% 30%;
  margin-top: 16px;
  /* Поля по бокам — чтобы выноски висели ЗА краем экрана и не закрывали
     собой те самые цифры, ради которых они и нужны. */
  padding: 0 46px;
}

.screen {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow:
    0 50px 100px -40px rgba(0,0,0,.95),
    0 0 90px -50px var(--accent-glow);
  transform: rotateX(13deg) rotateY(-14deg) rotateZ(1.2deg) scale(.93);
  transform-origin: 50% 50%;
  transition: transform 1.1s cubic-bezier(.16,.72,.28,1);
  will-change: transform;
}
.stage--right .screen { transform: rotateX(13deg) rotateY(14deg) rotateZ(-1.2deg) scale(.93); }

/* Класс вешает наблюдатель: экран «поворачивается» к читателю. */
.stage.faced .screen { transform: rotateX(2deg) rotateY(0deg) rotateZ(0deg) scale(1); }

.screen__bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px;
  background: #0b0e13;
  border-bottom: 1px solid var(--line-soft);
}
.screen__bar i {
  width: 10px; height: 10px; border-radius: 50%;
  background: #2a323d;
  flex-shrink: 0;
}
.screen__bar i:first-child { background: #3a4450; }
.screen__url {
  margin: 0 auto;
  padding: 3px 14px;
  border-radius: var(--r-pill);
  background: var(--ink);
  border: 1px solid var(--line-soft);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 62%;
}

.screen__img {
  height: clamp(260px, 42vw, 520px);
  overflow: hidden;
  background: #0b0e13;
}
.screen__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Выноски поверх экрана. На узком экране они перекрыли бы картинку —
   там мы их прячем и показываем тем же текстом под ней. */
.pin {
  position: absolute;
  z-index: 3;
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(10,13,18,.92);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px -20px rgba(0,0,0,.9);
  animation: bob 5s ease-in-out infinite;
}
.pin b { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; }
.pin span { font-size: 11px; color: var(--faint); white-space: nowrap; }
.pin em {
  font-style: normal; color: var(--accent); font-weight: 700;
  font-family: "JetBrains Mono", monospace;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.pin--a { top: 9%;  left: 0;  animation-delay: .2s; }
.pin--b { top: 44%; right: 0; animation-delay: 1.4s; }
.pin--c { bottom: 9%; left: 26px; animation-delay: 2.6s; }

.pins-plain { display: none; margin-top: 18px; }
.pins-plain li {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 14px; color: var(--dim);
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}
.pins-plain li b { color: var(--text); font-weight: 700; }

/* ── Бегущая строка цен ───────────────────────────────────────────────── */
/*
 * Тонкая полоса между разделами: реальные названия товаров и то, что с
 * ними делает бот. Задаёт ощущение, что сервис прямо сейчас работает.
 */
.tape {
  position: relative; z-index: 1;
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: #080a0e;
  padding: 13px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.tape__run {
  display: flex;
  gap: 40px;
  width: max-content;
  animation: run 42s linear infinite;
}
.tape:hover .tape__run { animation-play-state: paused; }
@keyframes run { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.tape__item {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--faint);
  white-space: nowrap;
}
.tape__item b { color: var(--dim); font-weight: 600; }
.tape__item i {
  font-style: normal;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
}
.tape__item .dn { color: var(--accent); }
.tape__item .up { color: var(--gold); }
.tape__item .hold { color: var(--faint); }

/* ── Подсветка за курсором на карточках ──────────────────────────────── */
/*
 * Карточка светится там, где мышь. Эффект работает только с курсором:
 * на телефоне переменные не задаются, и подсветки просто нет.
 */
.card { position: relative; overflow: hidden; }
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(28,187,147,.10),
    transparent 62%
  );
}
.card:hover::before { opacity: 1; }
.card > * { position: relative; z-index: 1; }

/* ── Точки перелома для нового ────────────────────────────────────────── */
@media (max-width: 1080px) {
  /* Места для выносок за краем уже не хватает — переводим их в список
     под экраном, а поля убираем. */
  .stage { padding: 0; }
  .pin { display: none; }
  .pins-plain { display: block; }
}

@media (max-width: 900px) {
  .screen { transform: rotateX(7deg) scale(.97); }
  .stage--right .screen { transform: rotateX(7deg) scale(.97); }
}

@media (max-width: 460px) {
  .screen__img { height: 220px; }
  .screen__url { font-size: 10px; max-width: 55%; }
  .tape__run { gap: 26px; animation-duration: 32s; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Экраны сервиса, собранные разметкой
   ═══════════════════════════════════════════════════════════════════════

   Скриншот стареет вместе с интерфейсом: панель переделали — на витрине
   осталась прошлогодняя. Плюс он весит мегабайты, мылится на экранах с
   высокой плотностью и не умеет двигаться.

   Поэтому экраны здесь не сняты, а собраны: те же плитки и та же таблица,
   но разметкой. Всегда чёткие, весят килобайты, цифры в них могут жить.
   ═══════════════════════════════════════════════════════════════════════ */

.screen__ui {
  padding: 16px;
  background:
    radial-gradient(ellipse 70% 60% at 20% 0%, rgba(28,187,147,.06), transparent 60%),
    #0a0d12;
  min-height: clamp(250px, 40vw, 430px);
}

/* ── Плитки показателей ───────────────────────────────────────────────── */
.ui-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ui-tile {
  padding: 12px 13px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: #0e1218;
}
.ui-tile__t {
  display: flex; align-items: center; gap: 5px;
  font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ui-tile__v {
  font-family: "JetBrains Mono", monospace;
  font-variant-numeric: tabular-nums;
  font-size: 21px; font-weight: 700; letter-spacing: -.03em;
  line-height: 1;
}
.ui-tile__v.ok   { color: var(--accent); }
.ui-tile__v.bad  { color: var(--rival); }
.ui-tile__v.warn { color: var(--gold); }

/* ── График ───────────────────────────────────────────────────────────── */
.ui-chart {
  margin-top: 8px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: #0e1218;
}
.ui-chart__head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 10px;
}
.ui-chart__head b { font-size: 12px; font-weight: 700; }
.ui-chart__head span {
  margin-left: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 15px; font-weight: 700; color: var(--accent);
}
.ui-chart svg { width: 100%; height: 74px; display: block; }

/* ── Таблица товаров ──────────────────────────────────────────────────── */
.ui-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.ui-table th {
  text-align: left;
  padding: 8px 10px;
  font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint); font-weight: 600;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.ui-table td {
  padding: 10px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--dim);
  white-space: nowrap;
}
.ui-table tr:last-child td { border-bottom: none; }
.ui-table .name { color: var(--text); font-weight: 600; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.ui-table .num {
  font-family: "JetBrains Mono", monospace;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.ui-table .num.mine { color: var(--accent); font-weight: 700; }
.ui-table .num.rival { color: var(--rival); }

.chip {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  font-size: 9.5px; font-weight: 700;
  white-space: nowrap;
}
.chip--first { background: rgba(28,187,147,.16); color: var(--accent); }
.chip--lose  { background: rgba(255,90,90,.14); color: var(--rival); }
.chip--a     { background: rgba(28,187,147,.16); color: var(--accent); }
.chip--b     { background: rgba(245,181,68,.14); color: var(--gold); }
.chip--c     { background: rgba(147,160,177,.14); color: var(--dim); }
.chip--fresh { background: rgba(112,228,120,.12); color: var(--accent-2); }
.chip--slow  { background: rgba(245,181,68,.12); color: var(--gold); }
.chip--dead  { background: rgba(255,90,90,.12); color: var(--rival); }

/* Узкий экран: лишние столбцы прячем, чтобы таблица не ужималась в кашу. */
@media (max-width: 720px) {
  .ui-tiles { grid-template-columns: repeat(2, 1fr); }
  .ui-tile__v { font-size: 18px; }
  .ui-table .hide-sm { display: none; }
  .ui-table th, .ui-table td { padding: 8px 7px; }
  .ui-table .name { max-width: 120px; }
}
@media (max-width: 460px) {
  .screen__ui { padding: 11px; }
  .ui-tile { padding: 9px 10px; }
  .ui-tile__v { font-size: 16px; }
  .ui-table { font-size: 10.5px; }
}

/* ── Отзывы ───────────────────────────────────────────────────────────── */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.quote {
  display: flex; flex-direction: column;
  padding: 26px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: var(--panel);
}
.quote__mark {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 46px; line-height: 1;
  color: var(--accent);
  opacity: .32;
  margin-bottom: 6px;
}
.quote p { margin: 0 0 20px; font-size: 15px; color: var(--text); flex: 1; }
.quote footer { display: flex; align-items: center; gap: 11px; }
.quote__ava {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-dim); color: var(--accent);
  font-weight: 800; font-size: 14px;
  flex-shrink: 0;
}
.quote__who b { display: block; font-size: 13px; font-weight: 700; }
.quote__who span { font-size: 12px; color: var(--faint); }

/* Заглушка, пока не пришли настоящие цитаты. Видно, что это рыба, и
   случайно выложить её как настоящий отзыв не получится. */
.quote--stub { border-style: dashed; }
.quote--stub p, .quote--stub .quote__who b { color: var(--faint); font-style: italic; }
.quote--stub .quote__ava { background: var(--fill, rgba(120,120,128,.18)); color: var(--faint); }

/* ── Наши собственные цифры ───────────────────────────────────────────── */
.ours {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  overflow: hidden;
  margin-top: 26px;
}
.ours > div { background: var(--panel); padding: 24px 22px; }
.ours b {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-variant-numeric: tabular-nums;
  font-size: 27px; font-weight: 800; letter-spacing: -.03em;
  color: var(--accent);
  margin-bottom: 5px;
}
.ours span { font-size: 13px; color: var(--dim); }
.ours-note { margin-top: 14px; font-size: 13px; color: var(--faint); }

/* ── Частые вопросы ───────────────────────────────────────────────────── */
/* На <details> — раскрывается без скрипта и находится поиском по странице. */
.faq { border-top: 1px solid var(--line-soft); }
.faq details {
  border-bottom: 1px solid var(--line-soft);
}
.faq summary {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 4px;
  font-size: 16px; font-weight: 700;
  cursor: pointer;
  list-style: none;
  transition: color var(--t);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary::after {
  content: '';
  margin-left: auto;
  width: 11px; height: 11px;
  border-right: 2px solid var(--faint);
  border-bottom: 2px solid var(--faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t), border-color var(--t);
  flex-shrink: 0;
}
.faq details[open] summary::after {
  transform: rotate(225deg) translate(-3px, -3px);
  border-color: var(--accent);
}
.faq details[open] summary { color: var(--accent); }
.faq p {
  margin: 0 0 22px;
  padding-right: 40px;
  font-size: 15px; color: var(--dim);
  max-width: 78ch;
}

@media (max-width: 900px) {
  .quotes { grid-template-columns: 1fr 1fr; }
  .ours { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .quotes { grid-template-columns: 1fr; }
  .faq summary { font-size: 15px; padding: 17px 2px; }
  .faq p { padding-right: 24px; }
}