/* Showdown — numbers from fig-spec of robwaterhause-showdown (1:695) and
 * showdown-mobile (9:4). Both sections are M0: same blocks, different sizes. */

.sd-hero { position: relative; height: 458px; overflow: hidden; background: var(--color-bg); }
.sd-hero__glow { position: absolute; left: 550px; top: 50px; width: 800px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 24, 63, .11) 0%, rgba(0, 0, 0, 0) 100%); pointer-events: none; }
.sd-hero__inner { position: relative; display: flex; align-items: center; height: 100%; }
.sd-hero__content { display: flex; flex-direction: column; gap: 36px; width: 505px; margin-left: 3px; }  /* 1:719 @83 = 80 контейнера + 3 */
.sd-hero__headline { display: flex; flex-direction: column; gap: 4px; }
.sd-hero__title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-giant); line-height: 99px; letter-spacing: -.04em; color: var(--color-text); }
.sd-hero__rule { width: 180px; height: 4px; background: var(--color-brand); }
.sd-hero__lead { font-size: var(--fs-body); line-height: 24px; color: var(--color-muted); }
.sd-hero__cta { align-self: flex-start; }

.sd-cta { position: relative; height: 480px; overflow: hidden; background: linear-gradient(180deg, #0b090a 0%, #050505 100%); }
.sd-cta__glow { position: absolute; left: 850px; top: 40px; width: 500px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 24, 63, .102) 0%, rgba(0, 0, 0, 0) 100%); pointer-events: none; }
.sd-cta__inner { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 48px; height: 100%; }
.sd-cta__left { display: flex; flex-direction: column; gap: 24px; width: 727px; }
.sd-cta__label { font-family: var(--font-mono); font-size: var(--fs-micro); line-height: 13px; }
.sd-cta__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: 59px; letter-spacing: -.04em; color: var(--color-text); }
.sd-cta__text { width: 480px; font-size: var(--fs-body); line-height: 24px; color: var(--color-muted); }
.sd-cta__card { display: flex; flex-direction: column; gap: 24px; width: 505px; flex: none; padding: 32px; }
.sd-cta__card-title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h6); line-height: 27px; color: var(--color-text); }
.sd-cta__btn { align-self: flex-start; }
.sd-cta__tags { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--fs-micro); line-height: 13px; color: var(--color-muted); }
.sd-cta__tags span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; margin-right: 8px; border-radius: 1.5px; background: var(--color-brand); vertical-align: middle; }

@media (max-width: 1199px) {
  .sd-hero { height: auto; }
  .sd-hero__glow { left: 45px; top: -100px; width: 300px; height: 300px; }
  .sd-hero__inner { padding-block: 48px; }
  .sd-hero__content { width: auto; margin-left: 0; gap: 28px; }
  .sd-hero__headline { gap: 12px; }
  .sd-hero__title { font-size: var(--fs-h1); line-height: 50px; }
  .sd-hero__rule { width: 120px; height: 3px; }
  .sd-hero__lead { font-size: var(--fs-ui); line-height: 21px; }
  .sd-hero__cta { align-self: stretch; height: 48px; }

  .sd-cta { height: auto; }
  .sd-cta__glow { left: -60px; top: 0; width: 400px; height: 400px; }
  .sd-cta__inner { flex-direction: column; align-items: stretch; gap: 32px; padding-block: 40px 48px; }
  .sd-cta__left { width: auto; gap: 16px; }
  .sd-cta__title { font-size: 38px; line-height: 42px; }
  .sd-cta__text { width: auto; font-size: var(--fs-ui); line-height: 21px; }
  .sd-cta__card { width: auto; gap: 20px; padding: 24px; }
  .sd-cta__card-title { font-size: 20px; line-height: 24px; }
  .sd-cta__btn { align-self: stretch; height: 48px; }
  .sd-cta__tags { gap: 6px; font-size: var(--fs-tiny); line-height: 11px; }
  .sd-cta__tags span + span::before { margin-right: 6px; }
}