.cta-banner {
  padding: 0 0 var(--space-section);
  background: var(--bg-page);
}

.cta-banner__surface {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 324px;
  padding: 44px 48px;
  border-radius: 24px;
  border: 1px solid var(--border-soft);
  overflow: hidden;
  isolation: isolate;
  background-color: #14161a;
  background-image: var(--cta-banner-bg-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.cta-banner__surface::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    96deg,
    rgba(8, 9, 11, 0.8) 10%,
    rgba(8, 9, 11, 0.68) 45%,
    rgba(8, 9, 11, 0.4) 100%
  );
}

.cta-banner__content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  display: grid;
  gap: 18px;
}

.cta-banner__title {
  margin: 0;
  font-size: 52px;
  line-height: 1.08;
  font-weight: var(--typo-h2-weight);
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-wrap: balance;
}

.cta-banner__subtitle {
  margin: 0;
  max-width: 640px;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--text-muted);
}

.cta-banner__button {
  width: max-content;
  min-width: 248px;
}

@media (max-width: 1199px) {
  .cta-banner__surface {
    min-height: 284px;
    padding: 34px 32px;
    background-position: 62% center;
  }

  .cta-banner__content {
    max-width: 580px;
    gap: 16px;
  }

  .cta-banner__title {
    font-size: 42px;
    line-height: 1.1;
  }

  .cta-banner__subtitle {
    max-width: 520px;
    font-size: 18px;
    line-height: 1.38;
  }
}

@media (max-width: 767px) {
  .cta-banner__surface {
    min-height: 236px;
    padding: 24px 18px;
    border-radius: 18px;
    background-position: 70% center;
  }

  .cta-banner__surface::before {
    background: linear-gradient(
      110deg,
      rgba(8, 9, 11, 0.84) 0%,
      rgba(8, 9, 11, 0.72) 48%,
      rgba(8, 9, 11, 0.52) 100%
    );
  }

  .cta-banner__content {
    max-width: 100%;
    gap: 14px;
  }

  .cta-banner__title {
    font-size: 30px;
    line-height: 1.16;
    text-wrap: pretty;
  }

  .cta-banner__subtitle {
    max-width: 100%;
    font-size: 16px;
    line-height: 1.4;
  }

  .cta-banner__button {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 400px) {
  .cta-banner__title {
    font-size: 27px;
  }
}

html[data-theme="light"] .cta-banner__surface::before {
  background: linear-gradient(
    102deg,
    rgba(248, 250, 253, 0.86) 0%,
    rgba(248, 250, 253, 0.72) 54%,
    rgba(248, 250, 253, 0.58) 100%
  );
  backdrop-filter: blur(2px);
}

html[data-theme="light"] .cta-banner__title {
  color: #0f1419;
}

html[data-theme="light"] .cta-banner__subtitle {
  color: rgba(15, 20, 25, 0.84);
}