/*
  Final CTA section.
  Source: Figma node 77:36 (desktop 1440 × 660).

  Dark-navy rounded panel that closes the page. Three stacked layers:
    1. .final-cta__pattern — the page-wide dot SVG, tiled over the
       whole panel
    2. .final-cta__graphic — the aurora-rays PNG cascading down from
       the top edge (the PNG points up; we flip it via `scaleY(-1)`)
    3. .final-cta__content — centered heading + subheading + button
*/

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

.final-cta__frame {
  position: relative;
  /* Cap at --content-max so the panel edges align with every other
     section's content edges at large viewports (Products page width
     convention — see build-status). */
  max-width: var(--content-max);
  margin-inline: auto;
  background-color: var(--color-navy-blue);
  color: var(--color-text-on-dark);
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate; /* contains the bg/aurora layers behind content */
  /* Match Figma height on desktop; collapses naturally on smaller widths. */
  min-height: clamp(420px, 320px + 22vw, 660px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Layer 1: dot pattern over the whole panel --- */
.final-cta__pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.final-cta__pattern img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Layer 2: aurora rays cascading from the top.
   Image is flipped vertically (scaleY(-1)) per Figma's design.
   Negative margin-top pulls the flipped image up so the transparent
   area at its visual top (= empty bottom of the source PNG, now at
   top after the flip) sits above the frame and gets clipped by the
   frame's overflow:hidden — the colored rays end up flush at top. */
.final-cta__graphic {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Scale the upward clip with viewport width. -10vw natively curves
     between -40px at ~400 viewport and -140px at 1400 viewport, then
     clamps so it never under- or over-clips. */
  margin-top: clamp(-140px, -10vw, -40px);
  z-index: 1;
  pointer-events: none;
}

.final-cta__graphic img {
  width: 70%;
  height: auto;
  display: block;
  margin-inline: auto; /* center the reduced-width aurora in the frame */
  transform: scaleY(-1);
}

/* --- Layer 3: centered content --- */
.final-cta__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-7);
  text-align: center;
  /* Symmetric vertical padding so the content block sits vertically
     centered in the frame (the frame itself uses align-items/justify-
     content: center). Equal top/bottom breathing room; the frame's
     min-height creates the panel height around the centered content. */
  padding-block: 80px;
  padding-inline: var(--space-inline);
  width: 100%;
  max-width: 952px;
}

@media (min-width: 768px) {
  .final-cta__content {
    padding-block: var(--space-10);
  }
}

.final-cta__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4_5);
  width: 100%;
}

/* Admin-only edit hint — visible only to logged-in admins when the CTA pulls
   from Site Settings. Small pill above the heading. */
.final-cta__edit {
  align-self: center;
  font-family: var(--font-family-sans);
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.03em;
  padding: 10px 20px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  text-decoration: none;
  transition: background 0.15s ease;
}

.final-cta__edit:hover,
.final-cta__edit:focus-visible {
  background: var(--color-green-2, #00a86b);
  color: #fff;
}

.final-cta__heading {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-regular);
  /* 48px on a 360 viewport → 80px on a 1600 viewport (matches hero curve). */
  font-size: clamp(48px, 39px + 2.6vw, 80px);
  line-height: 1.1;
  margin: 0;
  color: inherit;
}

.final-cta__heading-accent {
  color: var(--color-green-2);
  font-weight: var(--font-weight-semibold);
}

.final-cta__subheading {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-relaxed);
  color: inherit;
  margin: 0;
}

/* ---------------------------------------------------------------
   Scroll-driven reveal stagger
   Text (heading + subheading) lands first; CTA button follows ~0.15s
   later. Aurora + dot pattern layers stay as static decorations.
   --------------------------------------------------------------- */
.final-cta__content > .btn { --reveal-delay: 0.15s; }

/* ---------------------------------------------------------------
   Wide-screen pass (≥1600px). Matches Figma 431:274.
   Each clamp hits the current value at viewport=1600 (smooth handoff)
   and the Figma target at viewport=2500.
   --------------------------------------------------------------- */
@media (min-width: 1600px) {
  /* Panel height grows 660 → 800 over 1600→2500 so the closing CTA
     fills more of the wide frame; holds at 800 for ≥2500.
     slope = 140/900 = 15.556vw/100, intercept = 660 - 0.15556×1600 = 411.11. */
  .final-cta__frame {
    min-height: clamp(660px, 411.111px + 15.556vw, 800px);
  }

  /* Content column widens from 952 → 1443 so the heading "Ready to
     Harness Quantum Power?" wraps the way Figma shows.
     slope = 491/900 = 54.556vw/100, intercept = 952 - 0.5456×1600 = 79.11. */
  .final-cta__content {
    max-width: clamp(952px, 79.111px + 54.556vw, 1443px);
  }

  /* Heading 80 → 96 (parallel curve to the hero heading).
     slope = 16/900 = 1.778vw/100, intercept = 80 - 0.01778×1600 = 51.56. */
  .final-cta__heading {
    font-size: clamp(80px, 51.556px + 1.778vw, 96px);
  }

  /* Subhead leading tightens to Figma's 1.2 above 1600. Unitless, so
     hard switch — fluid clamp() doesn't make sense for line-height. */
  .final-cta__subheading {
    line-height: 1.2;
  }
}