/* ==========================================================================
   Workflow Studio — showreel
   cta.css
   The closing call to action.
   ========================================================================== */

/* --- Closing CTA ----------------------------------------------------------- */

.cta {
  text-align: center;
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

.cta::before {
  content: '';
  position: absolute;
  inset: auto 0 -60% 0;
  height: 500px;
  background: radial-gradient(
      ellipse 38% 40% at 50% 40%,
      rgba(216, 181, 111, 0.1) 0%,
      rgba(216, 181, 111, 0.075) 30%,
      rgba(216, 181, 111, 0.04) 52%,
      rgba(216, 181, 111, 0.014) 68%,
      rgba(216, 181, 111, 0) 84%
    ),
    radial-gradient(
      ellipse 62% 58% at 50% 40%,
      rgba(216, 181, 111, 0.06) 0%,
      rgba(216, 181, 111, 0.045) 32%,
      rgba(216, 181, 111, 0.024) 55%,
      rgba(216, 181, 111, 0.008) 72%,
      rgba(216, 181, 111, 0) 88%
    );
  pointer-events: none;
}

.cta::after {
  content: '';
  position: absolute;
  inset: auto 0 -60% 0;
  height: 500px;
  pointer-events: none;
  background-image: var(--grain);
  background-size: var(--grain-size) var(--grain-size);
  opacity: 0.075;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 40%, #000 25%, transparent 88%);
  mask-image: radial-gradient(ellipse 62% 58% at 50% 40%, #000 25%, transparent 88%);
}

.cta > .container {
  position: relative;
  z-index: 1;
}

.cta h2 {
  font-size: clamp(32px, 5vw, 52px);
  max-width: 720px;
  margin: 0 auto 20px;
}

.cta p {
  color: var(--text-muted);
  max-width: 520px;
  margin: 0 auto 34px;
  font-size: 17px;
}

/* The hero's action row is left-aligned; the CTA reuses it centred. */
.cta .hero-actions {
  justify-content: center;
}