/* ============================================================
   Final CTA band
   ============================================================ */

.cta-band {
  position: relative;
  border-radius: var(--r-xl);
  padding: clamp(40px, 6vw, 72px);
  background:
    radial-gradient(closest-side at 90% 20%, rgba(31,174,94,0.35), transparent 65%),
    radial-gradient(closest-side at 10% 90%, rgba(72,73,196,0.3), transparent 60%),
    #0B0D1A;
  color: #fff;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 30%, transparent 85%);
  pointer-events: none;
}
.cta-band h2 { color: #fff; max-width: 18ch; }
.cta-band .lede { color: rgba(255,255,255,0.7); }
.cta-inner {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: end;
  position: relative; z-index: 1;
}
@media (max-width: 880px) { .cta-inner { grid-template-columns: 1fr; } }
.cta-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 880px) { .cta-actions { justify-content: flex-start; } }

.cta-band .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.04); }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.4); }