/* =====================================================================
   LunoPay - страницы публичного сайта (лендинг, вход, документация,
   правовые документы). Опирается на токены из luno.css.
   ===================================================================== */

/* ==================================================================== ГЕРОЙ
   Логика: мягкий градиентный фон (как на референсе), крупный заголовок по
   центру, две кнопки и превью продукта, которое уходит в фон маской снизу. */

.hero {
  position: relative;
  padding: 76px 0 0;
  overflow: hidden;
  text-align: center;
}

/* фон: два размытых пятна и решётка. В светлой теме - тёплый переход
   белый → персиковый → лавандовый, в тёмной - синее свечение на #111. */
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto;
  height: 120%;
  background:
    radial-gradient(46% 42% at 50% 8%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%),
    radial-gradient(38% 34% at 82% 22%, color-mix(in srgb, var(--accent-300) 22%, transparent), transparent 72%),
    radial-gradient(40% 36% at 16% 26%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 74%);
  pointer-events: none;
}

[data-theme="light"] .hero::before {
  background:
    radial-gradient(48% 44% at 50% 6%, #ffe6cf 0%, rgba(255, 230, 207, 0) 72%),
    radial-gradient(40% 36% at 84% 20%, #e6dcff 0%, rgba(230, 220, 255, 0) 72%),
    radial-gradient(42% 38% at 14% 24%, #dcefff 0%, rgba(220, 239, 255, 0) 74%);
}

/* тонкая решётка: придаёт фону «инженерный» вид, к низу растворяется */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--fg) 6%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--fg) 6%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(72% 58% at 50% 26%, #000 0%, transparent 78%);
  mask-image: radial-gradient(72% 58% at 50% 26%, #000 0%, transparent 78%);
  pointer-events: none;
}

.hero-glow {
  position: absolute;
  top: -140px;
  left: 50%;
  z-index: 0;
  width: min(920px, 92vw);
  height: 520px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 20%, transparent), transparent);
  filter: blur(18px);
  opacity: 0.75;
  pointer-events: none;
}

.hero-in {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero h1 {
  max-width: 22ch;
  font-size: clamp(40px, 6.6vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

/* вторая строка - приглушённая, как «for global finance» на base.org */
.hero-dim {
  color: var(--fg-2);
}

.hero-lead {
  margin: 22px auto 0;
  max-width: 58ch;
  font-size: clamp(16.5px, 1.5vw, 19px);
  line-height: 1.55;
  color: var(--fg-2);
  letter-spacing: -0.012em;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 26px;
  font-size: 13.5px;
  color: var(--fg-2);
}

.hero-facts span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hero-facts svg {
  color: var(--brand);
  flex: none;
}

/* ---- превью кабинета: карточка продукта, уходящая в фон маской ---------- */
.hero-preview {
  position: relative;
  width: 100%;
  max-width: 1040px;
  margin: 56px auto 0;
  padding: 0 4px;
}

.preview-frame {
  position: relative;
  border-radius: 20px;
  background: var(--bg-2);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  text-align: left;
  /* Маска «растворяет» низ макета. Держим её именно здесь: у родителя она
     обрезала бы плавающие карточки по краям. */
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}

/* Две карточки поверх превью: показывают готовый счёт и зачисление.
   Лёгкое «дыхание» вверх-вниз оживляет картинку, но не мешает читать. */
.hero-float {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 252px;
  padding: 15px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  /* плотная подложка: карточка читается как отдельный слой над кабинетом */
  background: var(--bg-2);
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.65), var(--shadow);
  animation: lp-float 7s var(--ease-ios) infinite;
}

.hero-float--link {
  left: -54px;
  top: 148px;
}

.hero-float--paid {
  right: -46px;
  bottom: 176px;
  animation-delay: -3.2s;
}

.hero-float-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.hero-float-head svg {
  color: var(--brand);
}

.hero-float-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.hero-float-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--fg-2);
}

.hero-float-qr {
  display: grid;
  place-items: center;
  padding: 4px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  flex: none;
}

.hero-float-qr img {
  display: block;
  color: var(--fg);
}

@keyframes lp-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@media (max-width: 1240px) {
  .hero-float--link { left: -18px; }
  .hero-float--paid { right: -14px; }
}

@media (max-width: 900px) {
  .hero-float { display: none; }
}

.preview-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--surface);
  font-size: 12px;
  color: var(--fg-2);
}

.preview-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border-strong);
  opacity: 0.28;
}

.preview-bar i:first-child {
  opacity: 0.5;
}

.preview-url {
  margin-left: 8px;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  background: var(--bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: var(--fg-2);
}

.preview-body {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  min-height: 380px;
}

.preview-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 12px;
  background: var(--surface);
}

.preview-nav h6 {
  margin: 4px 0 10px 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.preview-nav span {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--fg-2);
}

.preview-nav span::before {
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 4px;
  background: currentColor;
  opacity: 0.32;
  flex: none;
}

.preview-nav span.is-on {
  background: var(--bg);
  color: var(--fg);
  font-weight: 500;
}

.preview-nav span.is-on::before {
  background: var(--brand);
  opacity: 1;
}

.preview-main {
  padding: 22px 24px 26px;
}

.preview-main h5 {
  font-size: 19px;
  letter-spacing: -0.02em;
}

.preview-main h5 + p {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--fg-2);
}

.preview-kpi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.preview-kpi div {
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--surface);
}

.preview-kpi b {
  display: block;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.preview-kpi span {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--fg-2);
}

.preview-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 108px;
  margin-top: 16px;
  padding: 0 2px;
}

.preview-chart i {
  flex: 1;
  border-radius: 6px 6px 3px 3px;
  background: color-mix(in srgb, var(--brand) 26%, transparent);
}

.preview-chart i.is-peak {
  background: var(--brand);
}

.preview-rows {
  margin-top: 18px;
  font-size: 12.5px;
}

.preview-rows div {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 92px 88px;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  color: var(--fg-2);
}

.preview-rows div + div {
  border-top: 1px solid var(--border-soft);
}

.preview-rows b {
  color: var(--fg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.preview-rows em {
  justify-self: end;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--ok-soft);
  color: var(--ok);
  font-size: 11.5px;
  font-style: normal;
}

.preview-rows em.is-wait {
  background: var(--warn-soft);
  color: var(--warn);
}

@media (max-width: 900px) {
  .hero-preview {
    margin-top: 40px;
  }
  /* minmax(0, 1fr) вместо 1fr: иначе горизонтальная лента разделов
     растягивает колонку по своему содержимому и ломает ширину страницы. */
  .preview-body {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .preview-nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
    padding: 10px;
  }
  .preview-nav h6,
  .preview-nav span:nth-child(n + 5) {
    display: none;
  }
  .preview-kpi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .preview-kpi div:last-child {
    display: none;
  }
}

/* ================================================================ ЛОГОТИПЫ */
.logos {
  padding: 52px 0 10px;
}

.logos-label {
  text-align: center;
  margin-bottom: 24px;
}

.marquee {
  position: relative;
  overflow: hidden;
  display: flex;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  gap: 44px;
  width: max-content;
  animation: lp-marquee 34s linear infinite;
}

.marquee-track span {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg-2);
  white-space: nowrap;
  opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }
}

/* ============================================================== ПОКАЗАТЕЛИ
   Без рамок и подложек: четыре числа, разделённые воздухом. */

.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
}

.metric {
  position: relative;
  padding-left: 22px;
}

.metric::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: var(--border);
}

.metric:first-child::before {
  background: var(--brand);
}

.metric b {
  display: block;
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 600;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

.metric span {
  display: block;
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--fg-2);
}

@media (max-width: 900px) {
  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }
}

/* ============================================================ ИНТЕГРАЦИИ
   Раскладка «2 - 3 - 2» из референса: плитки каналов и текст рядом. */

.integrations {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 64px;
}

.tiles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.tiles-row {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.tile {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 20px;
  background: var(--surface);
  color: var(--fg);
  transition: transform 0.18s ease, background-color 0.18s ease;
}

.tile:hover {
  transform: translateY(-2px);
  background: var(--surface-hover);
}

.tile svg {
  display: block;
}

.tile img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.tile.is-brand {
  background: var(--brand);
  color: #fff;
}

.tile.is-brand:hover {
  background: var(--brand-hover);
}

.tiles-note {
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--fg-2);
  text-align: center;
}

.integrations-copy h2 {
  font-size: clamp(30px, 4vw, 46px);
  letter-spacing: -0.038em;
  line-height: 1.08;
}

.integrations-copy p {
  margin-top: 18px;
  max-width: 46ch;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--fg-2);
}

.integrations-copy .btn {
  margin-top: 26px;
}

@media (max-width: 980px) {
  .integrations {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .integrations-copy {
    text-align: center;
  }
  .integrations-copy p {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================================= ВОЗМОЖНОСТИ
   Карточки без обводок: подложка и воздух вместо рамок. */

.section-head {
  max-width: 62ch;
  margin-bottom: 44px;
}

.section-head h2 {
  margin-top: 14px;
}

.section-head p {
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--fg-2);
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.feature {
  border-radius: var(--radius-xl);
  background: var(--surface);
  padding: 28px;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.feature:hover {
  background: var(--surface-hover);
  transform: translateY(-2px);
}

.feature-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 20px;
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--brand);
}

.feature h3 {
  font-size: 19px;
  letter-spacing: -0.02em;
}

.feature p {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fg-2);
}

@media (max-width: 980px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

/* ==================================================================== ШАГИ */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}

.step {
  position: relative;
  padding-top: 22px;
  border-top: 2px solid var(--border);
}

.step::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 44px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
}

.step-index {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: var(--fg-2);
}

.step h3 {
  margin-top: 12px;
  font-size: 18px;
}

.step p {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fg-2);
}

.step code {
  display: inline-block;
  margin-top: 14px;
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  background: var(--surface);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--fg-3);
}

@media (max-width: 980px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

/* ===================================================================== API */
.terminal {
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.terminal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
}

.dots {
  display: flex;
  gap: 6px;
}

.dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--fg-2);
  opacity: 0.35;
}

.tabs {
  display: flex;
  gap: 4px;
}

.tabs button {
  height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--fg-2);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
}

.tabs button:hover {
  color: var(--fg);
}

.tabs button.is-on {
  background: var(--bg);
  color: var(--fg);
}

.terminal-body {
  position: relative;
  padding: 4px 18px 18px;
}

.code {
  margin: 0;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.8px;
  line-height: 1.7;
  color: var(--fg-3);
  white-space: pre;
}

.code .s {
  color: var(--brand);
}

.code .k {
  color: var(--fg);
  font-weight: 500;
}

.copy {
  position: absolute;
  top: 6px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 13px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--fg-2);
  font-size: 12.5px;
  cursor: pointer;
}

.copy:hover {
  color: var(--fg);
}

.terminal-out {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--bg);
  overflow-x: auto;
}

.terminal-out code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: var(--fg-2);
  white-space: nowrap;
}

.status-201 {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--ok-soft);
  color: var(--ok);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

/* ================================================== ПЛАТЁЖНАЯ СТРАНИЦА (демо)
   Слева объяснение, справа макет страницы оплаты с QR-кодом. */

.checkout-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  align-items: center;
  gap: 56px;
}

.checkout-copy h2 {
  margin-top: 14px;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: -0.035em;
}

.checkout-copy > p {
  margin-top: 18px;
  max-width: 52ch;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--fg-2);
}

.checkout-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 28px;
}

.checkout-list li {
  display: flex;
  gap: 12px;
}

.checkout-dot {
  margin-top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  flex: none;
}

.checkout-list b {
  display: block;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.checkout-list span span {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-2);
}

.checkout-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.checkout-demo {
  position: relative;
}

.checkout-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px;
  border-radius: var(--radius-xl);
  background: var(--bg-2);
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur-3) var(--ease-out);
}

.checkout-card:hover {
  transform: translateY(-4px);
}

.checkout-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.checkout-shop {
  display: flex;
  align-items: center;
  gap: 12px;
}

.checkout-logo {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  flex: none;
}

.checkout-shop b {
  display: block;
  font-size: 15px;
  letter-spacing: -0.015em;
}

.checkout-shop span span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--fg-2);
}

.checkout-sum {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.checkout-qr {
  display: grid;
  place-items: center;
  padding: 12px;
  border-radius: var(--radius-lg);
  background: var(--bg);
}

.checkout-qr svg,
.checkout-qr img {
  display: block;
  width: min(164px, 46vw);
  height: auto;
  color: var(--fg);
}

.checkout-hint {
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-2);
  text-align: center;
}

.checkout-button {
  display: grid;
  place-items: center;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: #fff;
  font-size: 14.5px;
  font-weight: 500;
}

.checkout-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
}

.checkout-meta b {
  display: block;
  margin-top: 10px;
  font-weight: 500;
}

.checkout-meta span span {
  display: block;
  margin-top: 2px;
  color: var(--fg-2);
}

.checkout-note {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  font-size: 13.5px;
}

.checkout-note b {
  font-weight: 500;
}

.checkout-note span {
  color: var(--fg-2);
  line-height: 1.5;
}

@media (max-width: 1000px) {
  .checkout-split {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .checkout-demo {
    order: -1;
  }
}

/* ================================================================ СТОИМОСТЬ */
.pricing {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 18px;
}

.pricing-main {
  padding: 36px;
  border-radius: var(--radius-xl);
  background: var(--surface);
}

.pricing-figure {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.pricing-figure b {
  font-size: clamp(52px, 7vw, 76px);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}

.pricing-figure span {
  font-size: 16px;
  color: var(--fg-2);
}

.pricing-note {
  margin-top: 14px;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-2);
}

.pricing-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  margin-top: 28px;
}

.pricing-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14.5px;
  line-height: 1.45;
}

.pricing-list svg {
  margin-top: 3px;
  color: var(--brand);
  flex: none;
}

.pricing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.pricing-side {
  display: flex;
  flex-direction: column;
  padding: 30px 32px;
  border-radius: var(--radius-xl);
  background: var(--bg-2);
  box-shadow: var(--shadow-sm);
}

.pricing-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14.5px;
}

.pricing-row:first-child {
  padding-top: 0;
}

.pricing-row span {
  color: var(--fg-2);
}

.pricing-row b {
  font-weight: 500;
  text-align: right;
}

.pricing-foot {
  margin-top: 18px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-2);
}

@media (max-width: 1000px) {
  .pricing {
    grid-template-columns: 1fr;
  }
  .pricing-main {
    padding: 28px 22px;
  }
  .pricing-list {
    grid-template-columns: 1fr;
  }
}

/* ============================================================ АКЦЕНТЫ API */
.api-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.api-point {
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.api-point b {
  display: block;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.api-point span {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-2);
}

@media (max-width: 900px) {
  .api-points {
    grid-template-columns: 1fr;
  }
}

/* ===================================================================== FAQ */
.faq details {
  border-bottom: 1px solid var(--border);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  font-size: 20px;
  color: var(--fg-2);
}

.faq details[open] summary::after {
  content: "−";
}

/* Ответ подъезжает, а не появляется рывком: высоту анимируем через grid. */
.faq p {
  max-width: 78ch;
  padding-bottom: 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-2);
  animation: lp-faq 0.32s var(--ease-out) both;
}

@keyframes lp-faq {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .faq p { animation: none; }
}

/* ===================================================================== CTA */
.cta-band {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto;
  align-items: center;
  gap: 32px;
  padding: 56px;
  border-radius: var(--radius-xl);
  background: var(--fg);
  color: var(--bg);
}

.cta-glow {
  position: absolute;
  top: -60%;
  right: -10%;
  width: 60%;
  height: 220%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 55%, transparent), transparent 72%);
  opacity: 0.55;
  pointer-events: none;
}

.cta-copy {
  position: relative;
}

.cta-band .lp-eyebrow {
  color: color-mix(in srgb, var(--bg) 65%, transparent);
}

.cta-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 20px;
  font-size: 13.5px;
  opacity: 0.82;
}

.cta-facts li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.cta-facts svg {
  color: var(--brand);
  flex: none;
}

.cta-band h2 {
  color: var(--bg);
  font-size: clamp(28px, 3.6vw, 44px);
  letter-spacing: -0.035em;
}

.cta-band p {
  margin-top: 14px;
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.5;
  opacity: 0.72;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cta-band .btn-primary {
  background: var(--brand);
}

.cta-band .btn-secondary {
  border-color: color-mix(in srgb, var(--bg) 55%, transparent);
  color: var(--bg);
}

.cta-band .btn-secondary:hover {
  background: var(--bg);
  color: var(--fg);
}

@media (max-width: 900px) {
  .cta-band {
    grid-template-columns: 1fr;
    padding: 36px 24px;
  }
}

/* ============================================================== ВХОД И АККАУНТ
   Страницы входа рассчитаны на высоту экрана: блоки сжимаются, чтобы форма
   и подсказки помещались целиком и прокрутка не требовалась. */
.auth-shell {
  min-height: 100vh;
  /* dvh: в мобильных браузерах видимая высота меньше 100vh, и страница
     «уезжала» под адресную строку. */
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
}

.auth-aside {
  background: var(--surface);
  padding: clamp(20px, 5vh, 48px) 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 3vh, 28px);
}

.auth-main {
  padding: clamp(18px, 4vh, 48px) 44px;
  display: flex;
  flex-direction: column;
}

.auth-form {
  width: 100%;
  max-width: 380px;
  margin: auto;
}

.auth-title {
  font-size: clamp(24px, 3.2vh, 32px);
  letter-spacing: -0.035em;
}

/* Заголовок боковой панели: в узкой колонке крупный кегль ломает переносы. */
.auth-aside .lp-h2 {
  font-size: clamp(20px, 1.8vw, 26px);
  max-width: 22ch;
}

.auth-sub {
  margin-top: clamp(6px, 1.2vh, 10px);
  font-size: 14px;
  line-height: 1.45;
  color: var(--fg-2);
}

/* Форма входа плотнее остальных форм: страница должна целиком влезать
   в экран ноутбука без прокрутки. */
.auth-fields .label {
  margin-bottom: 4px;
}

.auth-fields .input {
  height: 42px;
}

.auth-fields {
  margin-top: clamp(14px, 2.6vh, 26px);
}

/* Ожидание подтверждения из Telegram: спиннер и подпись. */
.auth-wait {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(14px, 2.4vh, 24px);
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--info-soft, var(--surface));
  color: var(--fg);
  font-size: 14px;
}

.spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--brand);
  animation: spinner-spin 0.9s linear infinite;
}

.auth-wait .spinner {
  flex: none;
}

@keyframes spinner-spin {
  to { transform: rotate(360deg); }
}

/* Отступы формы задаются здесь, а не утилитами Tailwind: их шкала
   (mt-24 = 96px) растягивала страницу входа по высоте. */
.auth-cta {
  margin-top: clamp(12px, 2.2vh, 22px);
}

.auth-or {
  margin-top: clamp(12px, 2vh, 20px);
}

/* Кнопка Telegram стоит после формы входа: отступ сверху уже дал разделитель. */
.auth-or + .auth-tg-form {
  margin-top: clamp(10px, 1.8vh, 18px);
}

.auth-tg {
  margin-top: clamp(10px, 1.8vh, 18px);
}

.auth-steps {
  margin-top: clamp(14px, 2.4vh, 24px);
}

.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: clamp(10px, 1.8vh, 16px);
  font-size: 14px;
  color: var(--fg-2);
}

.auth-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.auth-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
}

.auth-link {
  color: var(--brand);
}

.auth-link:hover {
  text-decoration: underline;
}

.auth-switch {
  margin-top: clamp(10px, 1.8vh, 18px);
  font-size: 14px;
  color: var(--fg-2);
}

.auth-note {
  margin-top: clamp(10px, 1.8vh, 18px);
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--fg-2);
}

.auth-alert {
  margin-top: 22px;
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 14px;
}

.auth-alert.is-error {
  background: var(--err-soft);
  color: var(--err);
}

.auth-alert.is-info {
  background: var(--info-soft);
  color: var(--info);
}

.auth-alert.is-ok {
  background: var(--ok-soft);
  color: var(--ok);
}

.auth-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(8px, 2.4vh, 32px);
}

.trust-list {
  display: grid;
  gap: clamp(10px, 1.8vh, 18px);
}

.trust-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.trust-item svg {
  flex: none;
  margin-top: 2px;
  color: var(--brand);
}

.trust-item b {
  display: block;
  font-size: 15px;
  font-weight: 600;
}

.trust-item span {
  font-size: 13.5px;
  color: var(--fg-2);
}

@media (max-width: 1020px) {
  .auth-shell {
    grid-template-columns: 1fr;
  }
  .auth-aside {
    display: none;
  }
  .auth-main {
    padding: 24px 20px;
  }
  .auth-note {
    font-size: 12px;
  }
}

/* ================================================================ ДОКУМЕНТАЦИЯ */
@media (max-height: 820px) {
  .auth-aside .lp-body {
    display: none;
  }
}

@media (max-height: 800px) {
  .auth-sub {
    font-size: 13.5px;
    margin-top: 6px;
  }
  .field + .field {
    margin-top: 10px;
  }
  .auth-fields .input {
    height: 40px;
  }
  .auth-row {
    margin-top: 10px;
  }
  .trust-item span span {
    display: none;
  }
}

@media (max-height: 700px) {
  .auth-main,
  .auth-aside {
    padding: 14px 32px;
  }
  .auth-title {
    font-size: 23px;
  }
  .auth-sub,
  .auth-aside .lp-eyebrow,
  .auth-aside .lp-body {
    display: none;
  }
  .auth-fields {
    margin-top: 10px;
  }
  .auth-note {
    font-size: 12px;
    padding: 8px 12px;
  }
  .trust-list {
    gap: 10px;
  }
}

/* Альбомная ориентация телефона: высоты почти нет, поэтому убираем
   пояснение под кнопкой и поджимаем поля. */
/* Режимы входа: на низких экранах показывается одна форма, вторая - ссылкой. */
.auth-tg-link,
.auth-pass-link {
  display: none;
  margin: 0;
  font-size: 13.5px;
}

.auth-mode-tg .auth-pass-form,
.auth-mode-tg .auth-or-tg,
.auth-mode-pass .auth-tg-form,
.auth-mode-pass .auth-or-tg {
  display: none;
}

/* В режиме одной формы вторая доступна ссылкой - на любом экране. */
.auth-mode-tg .auth-pass-link,
.auth-mode-pass .auth-tg-link {
  display: block;
  margin-top: 10px;
}

@media (max-height: 520px) {
  .auth-note {
    display: none;
  }
  /* По умолчанию на низком экране - вход по паролю (он компактнее), а на
     Telegram ведёт ссылка. Режимы ?mode=… переопределяют это правило. */
  .auth-tg-form,
  .auth-or-tg {
    display: none;
  }
  .auth-pass-form {
    display: block;
  }
  .auth-tg-link {
    display: block;
    margin-top: 10px;
  }
  .auth-mode-tg .auth-tg-form {
    display: block;
    margin-top: 8px;
  }
  .auth-mode-tg .auth-pass-form {
    display: none;
  }
  .auth-mode-tg .auth-tg-link {
    display: none;
  }
  .auth-main {
    padding: 12px 20px;
  }
  /* Пояснения и шаги на низком экране мешают главному - формам входа. */
  .auth-form .hint,
  .auth-steps {
    display: none;
  }
  .auth-topbar {
    margin-bottom: 4px;
  }
  .auth-cta {
    height: 34px;
    margin-top: 6px;
  }
  .auth-or,
  .auth-fields {
    margin-top: 8px;
  }
  .auth-title {
    font-size: 19px;
  }
  .auth-cta,
  .auth-switch,
  .auth-fields {
    margin-top: 8px;
  }
  .auth-fields .label {
    margin-bottom: 2px;
  }
  .auth-fields .input {
    height: 36px;
  }
  .auth-switch {
    font-size: 13px;
  }
}

/* Совсем низкие окна (альбомная съёмка на телефоне, панель закладок):
   форма ужимается до предела, но остаётся рабочей. */
@media (max-height: 410px) {
  .auth-fields .input {
    height: 34px;
  }
  .field + .field,
  .auth-row,
  .auth-cta,
  .auth-switch,
  .auth-fields {
    margin-top: 6px;
  }
  .auth-title {
    font-size: 17px;
  }
  .auth-row,
  .auth-switch {
    font-size: 12.5px;
  }
  .auth-cta {
    height: 38px;
  }
}

@media (max-height: 620px) {
  .auth-topbar {
    margin-bottom: 6px;
  }
  .auth-title {
    font-size: 21px;
  }
  .auth-fields .input {
    height: 38px;
  }
  .auth-aside {
    display: none;
  }
  .auth-shell {
    grid-template-columns: 1fr;
  }
}

.docs {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 56px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 48px 24px 96px;
}

.docs-nav {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  align-self: start;
  font-size: 14px;
}

.docs-nav h4 {
  margin: 22px 0 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.docs-nav a {
  display: block;
  padding: 6px 0;
  color: var(--fg-3);
}

.docs-nav a:hover {
  color: var(--brand);
}

.docs-body {
  max-width: 78ch;
}

.docs-body h1 {
  font-size: clamp(32px, 4vw, 46px);
  letter-spacing: -0.035em;
}

.docs-body h2 {
  margin-top: 52px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  font-size: 26px;
  letter-spacing: -0.028em;
}

.docs-body h3 {
  margin-top: 32px;
  font-size: 19px;
}

.docs-body p,
.docs-body li {
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--fg-3);
}

.docs-body ul,
.docs-body ol {
  margin: 14px 0 0;
  padding-left: 22px;
}

.docs-body code {
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: var(--surface);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--fg);
}

.docs-body pre {
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--surface);
  overflow-x: auto;
}

.docs-body pre code {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 13px;
  line-height: 1.7;
}

.docs-body table {
  width: 100%;
  margin-top: 20px;
  border-collapse: collapse;
  font-size: 14.5px;
}

.docs-body th,
.docs-body td {
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
}

.docs-body th {
  background: var(--surface);
  font-weight: 600;
}

@media (max-width: 980px) {
  .docs {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 32px 16px 72px;
  }
  .docs-nav {
    position: static;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
  }
}

/* Длинные адреса и куски кода переносим, чтобы они не растягивали колонку. */
.docs-body code,
.docs-body pre,
.docs-body a,
.legal-page a {
  overflow-wrap: anywhere;
}

.docs-body pre {
  max-width: 100%;
  overflow-x: auto;
}

.docs-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* ================================================================= ПРАВОВЫЕ */
.legal-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 64px 24px 96px;
  overflow-wrap: break-word;
}

.legal-page h1 {
  font-size: clamp(30px, 4vw, 42px);
  letter-spacing: -0.035em;
}

.legal-page h2 {
  margin-top: 44px;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.legal-page p,
.legal-page li {
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--fg-3);
}

.legal-page ul {
  margin-top: 12px;
  padding-left: 22px;
}

/* ---- шапка документа: иконка в плитке и заголовок --------------------- */
.legal-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}

.legal-head > div {
  min-width: 0;
}

.legal-ico {
  width: 48px;
  height: 48px;
  flex: none;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--brand);
}

.legal-head h1 {
  margin: 0;
}

/* ---- блоки страницы поддержки: подложки вместо рамок ------------------ */
.support-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.support-card {
  padding: 24px;
  border-radius: var(--radius-xl);
  background: var(--surface);
}

.support-card h3 {
  font-size: 17px;
  letter-spacing: -0.02em;
}

.support-card p {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-2);
}

.support-card .support-ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 16px;
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--brand);
}

.support-list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.support-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0;
  padding: 12px 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-3);
}

.support-list li + li {
  border-top: 1px solid var(--border-soft);
}

.support-list svg {
  flex: none;
  margin-top: 3px;
  color: var(--brand);
}

.support-terms {
  margin: 18px 0 0;
  display: grid;
  gap: 0;
}

.support-terms div {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 18px;
  padding: 14px 0;
  font-size: 15px;
}

.support-terms div + div {
  border-top: 1px solid var(--border-soft);
}

.support-terms dt {
  color: var(--fg);
}

.support-terms dd {
  margin: 0;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}

.support-note {
  margin-top: 20px;
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-2);
}

.support-note b {
  color: var(--fg);
  font-weight: 600;
}

@media (max-width: 900px) {
  .support-grid {
    grid-template-columns: 1fr;
  }
  .support-terms div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

.legal-page dl {
  margin-top: 18px;
}

.legal-page dt {
  margin-top: 22px;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.legal-page dt:first-child {
  margin-top: 0;
}

.legal-page dd {
  margin: 8px 0 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--fg-3);
}

.legal-meta {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--fg-2);
}

/* ============================================================ ПУБЛИЧНЫЙ ПОДВАЛ */
.public-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: space-between;
  padding: 20px 0 0;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--fg-2);
}

/* ------------------------------------------------------- OTP и пароль */
.otp-fields {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.otp-box {
  width: 46px;
  height: 56px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.otp-box:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}

.meter {
  display: flex;
  gap: 6px;
}

.meter-seg {
  flex: 1;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--ink-600);
  transition: background-color 0.18s ease;
}

.rules {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 13.5px;
  color: var(--fg-2);
}

.rule-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.rule-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-500);
}

.rule-row.is-ok {
  color: var(--ok);
}

.rule-row.is-ok .rule-dot {
  background: var(--ok);
}

/* ------------------------------------------- документация: служебные плашки */
.method-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--radius-xs);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.method-post {
  background: var(--ok-soft);
  color: var(--ok);
}

.method-get {
  background: var(--info-soft);
  color: var(--info);
}


/* ------------------------------------------------------- cookie-баннер */
/* Компактная плашка cookie в левом нижнем углу */
.cookie-banner {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 60;
  width: min(360px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border, #2a2f3a);
  border-radius: 16px;
  background: var(--bg, #12151c);
  box-shadow: 0 18px 44px rgb(0 0 0 / .38);
}
.cookie-banner.hidden { display: none; }
.cookie-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--panel, #1a1f2a); }
.cookie-mark img { display: block; }
.cookie-body { display: grid; gap: 5px; }
.cookie-title { font-size: 13.5px; color: var(--fg, #eef1f6); }
.cookie-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--fg-2, #9aa3b2);
}
.cookie-text a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.cookie-actions { display: flex; gap: 8px; }
.cookie-actions .btn { flex: 1; min-height: 40px; }
@media (max-width: 767px) {
  .cookie-banner { bottom: 76px; }
}

@keyframes slidedown {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(10px); }
}
.animate-slidedown { animation: slidedown 0.24s ease forwards; }

/* ------------------------------------------- слабое железо и анимации */
.low-power .site-nav,
.low-power .float-card,
.low-power .phone,
.low-power .cookie-banner { backdrop-filter: none !important; }
.low-power .marquee-track { animation: none !important; }
.low-power [data-lp-reveal] { opacity: 1 !important; transform: none !important; }
.low-power .btn,
.low-power .card { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none !important; }
  [data-lp-reveal] { opacity: 1 !important; transform: none !important; }
}


/* строки в примерах кода: в тёмной теме синий бренда не читается */
[data-theme="dark"] .code .s,
[data-theme="dark"] .code .k { color: rgb(var(--accent-300-rgb, 138 163 255)); }
[data-theme="dark"] .code { color: var(--fg-3); }


/* ссылки в формах входа: в тёмной теме берём светлый акцент */
[data-theme="dark"] .auth-link { color: rgb(var(--accent-300-rgb, 138 163 255)); }
[data-theme="dark"] .auth-link:hover { color: rgb(var(--accent-200-rgb, 179 194 255)); }

/* ====================================================================
   ОЩУЩЕНИЕ ПЛАТФОРМЫ: iPhone, Android, ПК

   Правила простые:
 - нажатие везде отзывается сразу (своя микроанимация вместо подсветки);
 - ничего плавного там, где человек просил покоя (prefers-reduced-motion);
 - системные жесты и «вырезы» экрана не обрезают контент;
 - поля не дают iOS зумить страницу при фокусе.
   ==================================================================== */

:root {
  /* как в iOS: плавно в конце, без отскока */
  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --tap-scale: 0.972;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  /* системная подсветка тапа мешает своей вспышкой */
  -webkit-tap-highlight-color: transparent;
  /* горизонтальный «резиновый» сдвиг страницы отключён, вертикальный скролл живёт */
  overscroll-behavior-x: none;
}

/* Поля ввода: 16px не даёт iOS Safari приближать страницу при фокусе. */
input,
select,
textarea {
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}

input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: auto;
  appearance: auto;
}

/* Всё, что нажимается, отвечает мгновенно и не подсвечивается серым. */
a,
button,
[role="button"],
[data-press],
summary,
label.auth-check {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

.btn,
[data-press] {
  transition:
    transform 0.19s var(--ease-spring),
    background-color 0.2s var(--ease-ios),
    color 0.2s var(--ease-ios),
    box-shadow 0.2s var(--ease-ios);
}

.btn:active,
[data-press]:active {
  transform: scale(var(--tap-scale));
}

/* Плавное появление содержимого: один короткий подъём вместо «моргания». */
@keyframes lp-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.auth-main > * {
  animation: lp-rise 0.34s var(--ease-ios) both;
}

.auth-main > *:nth-child(2) {
  animation-delay: 0.04s;
}

.auth-main > *:nth-child(3) {
  animation-delay: 0.08s;
}

/* Переключение страниц сайта: Chrome на Android умеет кросс-документный переход. */
@view-transition {
  navigation: auto;
}

/* Кнопка Telegram: узнаваемая заливка, без рамок (рамок у блоков нет). */
.btn-tg {
  background: #229ed9;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 600;
}

.btn-tg:hover {
  background: #1e93ca;
}

.btn-tg:active {
  background: #1b86b9;
}

.tg-mark {
  width: 20px;
  height: 20px;
  flex: none;
}

/* Запасной вариант кнопки: перевод в режим входа без Telegram. */
.btn-ghost {
  background: transparent;
  color: var(--fg-2);
  font-weight: 500;
}

.btn-ghost:hover {
  color: var(--fg);
  background: var(--surface-2, rgba(127, 127, 127, 0.08));
}

/* Плашка приглашения и строка аккаунта на шаге пароля. */
.auth-invite {
  padding: 10px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--fg);
  font-size: 13.5px;
}

.auth-account {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 4px;
}

.auth-account-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  color: var(--brand);
  flex: none;
}

.auth-account-text {
  display: grid;
  gap: 2px;
  line-height: 1.25;
}

.auth-account-text b {
  font-size: 15px;
}

.auth-account-text span {
  color: var(--fg-2);
  font-size: 13px;
}

.auth-skip {
  margin-top: 8px;
}

/* Телефоны: крупнее зона нажатия, шире воздух под «шторкой» и на «вырезе». */
@media (pointer: coarse) {
  .btn,
  .btn-tg,
  [data-press] {
    min-height: 48px;
  }

  .auth-check {
    min-height: 44px;
    align-items: center;
  }

  .auth-topbar {
    padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
  }

  .auth-main {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  }

  .site-footer,
  .auth-switch,
  .auth-note {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .auth-main {
    padding-left: calc(env(safe-area-inset-left, 0px) + 20px);
    padding-right: calc(env(safe-area-inset-right, 0px) + 20px);
  }
}

/* Крупные пальцы и мелкие экраны: строки меню не слипаются. */
@media (max-width: 430px) {
  .auth-title {
    font-size: 24px;
  }

  .auth-fields {
    gap: 12px;
  }

  .auth-steps {
    display: none;
  }
}

/* Прокрутка внутри панелей на телефоне: инерция, без «протекания» на страницу. */
.sheet-body,
.table-wrap,
.auth-shell {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Кому движение мешает: убираем подъём и масштаб, оставляем мгновенную реакцию. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .auth-main > * {
    animation: none;
  }

  .btn,
  [data-press],
  .btn-tg {
    transition: background-color 0.15s linear, color 0.15s linear;
  }

  .btn:active,
  [data-press]:active {
    transform: none;
  }
}

/* Кроссфейд при смене темы: короткий и без вспышек белого. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.28s;
  animation-timing-function: var(--ease-ios);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.01s;
  }
}

/* ======================================================== ТЕЛЕФОН: МЕЛОЧИ */
@media (max-width: 560px) {
  /* Правовые страницы: длинное слово в заголовке не должно расширять экран. */
  .legal-page {
    padding: 40px 18px 72px;
  }
  .legal-head {
    align-items: flex-start;
    gap: 12px;
  }
  .legal-head h1 {
    font-size: 26px;
  }
  .legal-ico {
    width: 40px;
    height: 40px;
    padding: 10px;
  }
  .checkout-card {
    padding: 20px;
  }
  /* Превью кабинета в герое: колонки разделов прячем, цифры в две строки. */
  .preview-nav span:nth-child(n + 3) {
    display: none;
  }
  .preview-kpi {
    gap: 12px;
  }
}

.anti-coming{font-size:9px;padding:4px 6px;border:1px solid var(--border);border-radius:20px;color:var(--fg-2);white-space:nowrap}

/* Visual refinement only: no auth, CSRF, CAPTCHA or OIDC behavior changes. */
.auth-shell{background:var(--bg);padding:18px;gap:18px;min-height:100svh}.auth-main{border:1px solid var(--border);border-radius:22px;overflow:hidden}.auth-topbar{padding:24px 30px}.auth-form{max-width:450px;margin:auto;padding:40px 30px 56px}.auth-eyebrow{font-size:10px;letter-spacing:.16em;color:var(--fg-2);margin-bottom:32px}.auth-context{font-size:13px;color:var(--fg-2);margin-bottom:10px}.auth-title{font-size:clamp(29px,3vw,40px);letter-spacing:-.05em;line-height:1.15}.auth-sub{line-height:1.8;font-size:13px;margin-top:16px}.auth-fields{gap:20px}.auth-fields .input{border-radius:12px;min-height:50px;background:var(--bg-2);font-size:16px}.auth-fields .label{font-size:12px;margin-bottom:8px}.auth-cta{min-height:50px;border-radius:12px}.auth-aside{background:radial-gradient(ellipse at 75% 5%,#42629144,transparent 62%),#141920;border:1px solid #ffffff0e;border-radius:22px;position:relative;overflow:hidden;color:#eff1f5;padding:clamp(28px,5vw,72px);display:flex;flex-direction:column;justify-content:space-between;gap:48px}.auth-aside .lp-h2{font-size:clamp(40px,4.8vw,70px);font-weight:500;line-height:1.08;letter-spacing:-.055em;color:#eff1f5;margin-top:34px}.auth-aside .lp-body{font-size:13px;line-height:1.9;color:#a7b0c0;max-width:36ch!important;margin-top:26px}.auth-aside .lp-eyebrow{color:#94a4bf;font-size:10px;letter-spacing:.18em}.auth-aside .trust-item{padding:18px 0;border-top:1px solid #ffffff15;gap:14px}.auth-aside .trust-item>svg{color:#90addc;flex:none;margin-top:4px}.auth-aside .trust-item b{font-size:13px;font-weight:500;color:#edf0f7}.auth-aside .trust-item span span{font-size:12px;line-height:1.7;color:#9da8ba}.auth-switch{border-top:1px solid var(--border);padding-top:24px;margin-top:28px}.auth-steps{margin-top:30px;border-top:1px solid var(--border);padding-top:22px}.auth-steps .trust-item{padding:12px 0}.auth-steps b{font-weight:550;font-size:13px}.auth-steps .trust-item>span>span{font-size:12px;line-height:1.7}.auth-row{gap:16px;flex-wrap:wrap}.auth-alert{border-radius:12px}.anti-coming{font-size:9px;padding:4px 6px;border:1px solid var(--border);border-radius:20px;color:var(--fg-2);white-space:nowrap}.auth-note{line-height:1.8}
@media(max-width:767px){.auth-shell{padding:0;display:block}.auth-main{border:0;border-radius:0;min-height:100svh}.auth-topbar{padding:20px}.auth-form{padding:24px 22px max(42px,env(safe-area-inset-bottom));width:100%;max-width:460px}.auth-eyebrow{margin-bottom:24px}.auth-aside{display:none}.auth-title{font-size:32px}.auth-context{font-size:12px}.auth-switch{text-align:center}.auth-form .auth-steps{display:grid}.auth-fields .input{font-size:16px}}

.auth-shell .auth-main{padding:0}

/* Московское время и фикс логотипа в подвале (2026-10-21). */
.nav-clock{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid var(--border);border-radius:999px;background:var(--bg-2);color:var(--fg-2);font-size:12px;line-height:1;white-space:nowrap}
.nav-clock-label{letter-spacing:.04em}
.nav-clock time{font-variant-numeric:tabular-nums;color:var(--fg);font-weight:600}
@media (max-width:1060px){.nav-clock{display:none}}
.site-footer .wordmark{display:inline-flex;align-items:center;gap:10px}
.site-footer .wordmark-mark{flex:none}
.footer-clock{font-variant-numeric:tabular-nums}
.footer-clock time{color:var(--fg);font-weight:600}

/* Ник и аватарка в шапке вместо кнопки «Аккаунт» */
.nav-user{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:4px 12px 4px 4px;border:1px solid var(--border,#2a2f3a);border-radius:999px;color:var(--text,#eef1f6);text-decoration:none;font-size:13px;font-weight:600;max-width:190px}
.nav-user:hover{border-color:var(--brand,#6ea8ff)}
.nav-user-photo{width:28px;height:28px;border-radius:999px;object-fit:cover;flex:none}
.nav-user-initials{display:grid;place-items:center;width:28px;height:28px;border-radius:999px;background:var(--brand,#3861fb);color:#fff;font-size:11px;font-weight:700;flex:none}
.nav-user-nick{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:640px){.nav-user-nick{display:none}.nav-user{padding:4px}}

/* Вход: все способы на одном экране */
.auth-all-methods{display:grid;gap:14px;margin-top:18px}
.auth-method-card{border:1px solid var(--border,#2a2f3a);border-radius:16px;padding:18px;background:var(--panel,#15181f);display:grid;gap:8px}
.auth-method-card h2{font-size:16px;font-weight:650;margin:0}
.auth-method-card>p{font-size:13px;line-height:1.6;color:var(--muted,#9aa3b2);margin:0}
.auth-method-card .auth-method-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--muted-bg,#1d232e);color:var(--brand,#6ea8ff)}
.auth-method-card form{margin-top:4px}