/* Showdown — mockup pumtl23-showdown-desktop [3:597]. */

.accounts { background: var(--color-bg); }
.accounts__diagram {
  display: flex; align-items: stretch; gap: var(--space-24);
  margin-top: var(--space-40);
}
.account-card {
  flex: 1; display: flex; flex-direction: column; gap: var(--space-12);
  padding: var(--space-24); border-radius: var(--radius-xl);
  background: var(--fill-glass-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.account-card--accent { box-shadow: inset 0 0 0 1px var(--color-border-brand-strong); }
.account-card__num { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); line-height: 41px; color: var(--color-brand); }
.account-card__title { margin: 0; font-size: var(--fs-body); font-weight: 700; line-height: 20.42px; text-transform: uppercase; color: var(--color-white); }
.account-card__text { margin: 0; font-size: var(--fs-small); line-height: 20px; color: var(--color-muted); }
.account-card__list { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: auto; }
.account-card__list li {
  padding: var(--space-6) var(--space-12); border-radius: var(--radius-pill);
  background: var(--fill-glass);
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-white);
}
.accounts__divider {
  align-self: center; margin: 0;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--color-brand);
}

.showdown-cta {
  position: relative; overflow: hidden;
  /* Макет: linear-gradient(180deg, #0f0b1e 0%, #6d28d9 100%) — полоса светится фиолетовым. */
  background: linear-gradient(180deg, #0f0b1e 0%, #6d28d9 100%);
}
.showdown-cta__watermark { top: -32px; left: 0; width: 100%; text-align: center; font-size: var(--fs-watermark-xl); line-height: 306px; color: #fff; opacity: .03; }
.showdown-cta__inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); }

@media (max-width: 1199px) {
  .accounts__diagram { flex-direction: column; }
}
@media (max-width: 767px) {
  .showdown-cta__watermark { font-size: 56px; line-height: 72px; }
}

/* ── мобильный фрейм [111:270] ────────────────────────────────────────────
   Герой pad 48/20 gap 24, заголовок 42/54; секция аккаунтов pad 48/20 gap 28,
   карточки 183 через 16; CTA-полоса pad 56/20. */
@media (max-width: 767px) {
  .hero--doc { padding: var(--space-48) var(--space-20); }
  .hero--doc .hero__headline { gap: var(--space-2); font-size: 42px; line-height: 54px; }
  .hero--doc .hero__lead { font-size: var(--fs-ui); line-height: 21px; }
  .hero__watermark { font-size: 64px; line-height: 82px; top: 24px; }
  .hero--doc .btn { width: 100%; }

  .accounts { padding: var(--space-48) var(--space-20); }
  .accounts .section__title { font-size: var(--fs-h4); line-height: 41px; }
  .accounts__diagram { gap: var(--space-16); margin-top: var(--space-28); }
  .account-card { padding: var(--space-20); gap: var(--space-12); }
  .account-card__num { font-size: var(--fs-h6); line-height: 31px; }
  .account-card__title { font-size: var(--fs-body-sm); line-height: 19.14px; }
  .account-card__text { font-size: var(--fs-ui); line-height: 20px; }
  .accounts__divider { align-self: flex-start; }

  .showdown-cta { padding: 56px var(--space-20); }
  .showdown-cta .section__title { font-size: var(--fs-h4); line-height: 41px; }
  .showdown-cta__inner { gap: var(--space-16); }
  .showdown-cta__watermark { font-size: 64px; line-height: 82px; top: 24px; }
  .showdown-cta .btn { width: 100%; }
}