/**
 * StreamVerse — Final CTA (homepage closing banner)
 *
 * Sits directly above the Footer as the page's last conversion moment.
 * Reuses the exact same container/inner pattern and title -> subtitle
 * -> button spacing rhythm as the existing Trial CTA component
 * (trial-cta.css, used on plans.html/faq.html) — including the
 * button, which is the site's unmodified `.btn.btn--primary.btn--medium`
 * as-is (background, hover, glow shadow all already correct with zero
 * new CSS). A new class namespace (.final-cta, not .trial-cta) is used
 * instead of the exact same classes purely so this section's own
 * richer cinematic treatment (gradient panel, ambient glow, larger
 * radius, microcopy line) can never change how the plainer .trial-cta
 * panel renders on those other pages — trial-cta.css itself was not
 * touched.
 *
 * "Start Your 24H Trial" reuses the exact same WhatsApp destination
 * already used by every other instance of this CTA sitewide
 * (https://wa.me/601377343 — see plans.html) — no new URL introduced.
 *
 * No new colors anywhere in this file: the panel's dark gradient is
 * --color-bg-elevated -> --color-bg-surface -> --color-bg-base
 * (tokens.css's own darkest tiers — --color-bg-base/--color-bg-surface
 * are the exact #080A0F/#0D111A pair named in the brief), the two
 * glow accents are --color-accent-glow / --color-highlight-glow
 * (already-tuned rgba tokens reserved for exactly this kind of
 * restrained ambient glow — see --shadow-hero-media-glow's own use of
 * the violet one), and the button's glow is the existing
 * --shadow-cta-glow token, not a new value.
 */

.final-cta {
  padding-block: var(--space-8);
}

.final-cta__inner {
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

@media (min-width: 768px) {
  .final-cta__inner {
    padding-inline: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .final-cta__inner {
    padding-inline: var(--space-7);
  }
}

/* ------------------------------------------------------------------
 * Panel — the cinematic banner itself. overflow: hidden clips the two
 * glow blobs below to this element's own rounded corners, so the
 * "ambient glow around the edges" never bleeds past the banner shape.
 * Radius starts at --radius-lg (16px) and steps up to --radius-xl
 * (24px) at desktop — same responsive-radius idea already used by
 * hero-media-dormant.css's own glass panel — landing this section
 * exactly in the requested 16–24px range at every breakpoint.
 * ------------------------------------------------------------------ */

.final-cta__panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-8) var(--space-5);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: radial-gradient(
    circle at 50% -10%,
    var(--color-bg-elevated) 0%,
    var(--color-bg-surface) 45%,
    var(--color-bg-base) 100%
  );
  box-shadow: var(--shadow-modal);
}

@media (min-width: 768px) {
  .final-cta__panel {
    padding: var(--space-8) var(--space-7);
  }
}

@media (min-width: 1024px) {
  .final-cta__panel {
    padding-block: var(--space-9);
    border-radius: var(--radius-xl);
  }
}

/* Two soft, blurred, low-opacity glow blobs — violet upper-left, cyan
   lower-right. Purely atmospheric: restrained opacity (already baked
   into the glow tokens themselves), heavy blur, no motion, clipped to
   the panel by overflow: hidden above so they read as "behind the
   content," never as a bright edge or a border effect. */
.final-cta__glow {
  position: absolute;
  z-index: 0;
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(56px);
  pointer-events: none;
}

.final-cta__glow--violet {
  top: -20%;
  left: -10%;
  background: radial-gradient(circle, var(--color-accent-glow) 0%, transparent 72%);
}

.final-cta__glow--cyan {
  bottom: -22%;
  right: -10%;
  background: radial-gradient(circle, var(--color-highlight-glow) 0%, transparent 72%);
}

/* ------------------------------------------------------------------
 * Content — title/subtitle/button/microcopy all sit above the glow
 * layer (z-index: 1) and share the exact spacing rhythm already used
 * by trial-cta.css and every other section header on the site.
 * ------------------------------------------------------------------ */

.final-cta__title {
  position: relative;
  z-index: 1;
  max-width: 20ch;
  font-family: var(--font-heading);
  font-size: var(--text-h2); /* 36px — the exact bottom of the brief's
                                 36–44px target, and the same size every
                                 other <h2> section title on the site
                                 already uses, so this reads as a
                                 native section, not a one-off bigger
                                 headline */
  line-height: var(--text-h2-line-height);
  font-weight: 700;
  color: var(--color-text-primary);
}

.final-cta__subtitle {
  position: relative;
  z-index: 1;
  margin-top: var(--space-2);
  max-width: 50ch;
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg-line-height);
  color: #A3AED0; /* matches the sitewide secondary/muted-text convention */
}

.final-cta__button {
  position: relative;
  z-index: 1;
  margin-top: var(--space-6);
}

.final-cta__microcopy {
  position: relative;
  z-index: 1;
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: #A3AED0;
}