/* Section 10, the closing call to action: "You saw the moment. Now keep it."
   Like Wispr's "You have a way with words. Now, two.": a big card over a blurred,
   faded picture that drifts and changes. Ours is the demo video, cutting slowly
   between moments (cta.js). The button is the smart button, with a download icon. */

.cta {
  position: relative;
  display: grid;
  place-items: center;
  width: min(1200px, calc(100% - 32px));
  min-height: clamp(520px, 82vh, 780px);
  margin: 0 auto 96px;
  border-radius: 32px;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
  color: #fff;
}

/* the picture: two layers that dissolve into each other at each cut */
.cta-bg { position: absolute; inset: 0; z-index: -1; }
.cta-bg canvas {
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
  display: block;
  filter: blur(12px) brightness(0.82) saturate(1.4);
  opacity: 0;
  transition: opacity 1.6s ease;
}
.cta-bg canvas.on { opacity: 1; }
/* faded and fused with the brand: darker at the edges, a violet wash over it */
.cta-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(27, 21, 48, 0.05), rgba(27, 21, 48, 0.5) 85%),
    linear-gradient(180deg, rgba(91, 43, 224, 0.14), rgba(27, 21, 48, 0.28));
}

/* the words */
.cta-words { max-width: 1000px; padding: 80px 24px; text-align: center; text-shadow: 0 2px 24px rgba(15, 10, 30, 0.35); } /* wide enough for each line whole */
.cta-title .l1 { font-size: clamp(40px, 6.2vw, 84px); }
.cta-title .l2 { font-size: clamp(36px, 5.4vw, 72px); color: #CDBBFF; }
.cta-lede { max-width: 520px; margin: 22px auto 30px; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; color: rgba(255, 255, 255, 0.86); }
.cta-btn { padding: 15px 24px; background: #fff; color: var(--violet); font-size: 17px; text-shadow: none; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3); }
.cta-btn:hover { background: var(--lilac); }
.cta-btn::after { background: linear-gradient(105deg, transparent 25%, rgba(91, 43, 224, 0.14) 50%, transparent 75%); } /* a violet sweep shows on white */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cta-btn:hover { box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.45), 0 0 0 4px rgba(205, 187, 255, 0.28); }
  .cta-btn:hover svg { animation: cta-dip 0.7s cubic-bezier(0.3, 1.6, 0.5, 1); } /* the download arrow dips, as if dropping a file */
}
@keyframes cta-dip { 40% { transform: translateY(3px); } }
.cta-btn svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cta-btn[href^="mailto:"] svg { display: none; } /* "Email me the link" isn't a download */
.cta-note { margin: 14px 0 0; font-size: 14px; color: rgba(255, 255, 255, 0.72); }

@media (max-width: 600px) {
  .cta { border-radius: 22px; min-height: 540px; }
  .cta-words { padding: 64px 18px; }
}