/* =========================================================
   FINAL CTA — Dark section under /FAQ
   Squares pattern bg + gradient top line + sparkle decorations
   ========================================================= */

.cta-section {
  position: relative;
  background: linear-gradient(180deg, #04041A 60%, #0A0A33 100%);
  color: #fff;
  padding: 110px 0 130px;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

/* Bright gradient line + glow on top edge */
.cta-section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, var(--Colors-Brand-Primary, #87DFFF) 20%, var(--Colors-Brand-Quinary, #003CFF) 50%, var(--Colors-Brand-Primary, #87DFFF) 80%, rgba(255, 255, 255, 0.00) 100%);
  box-shadow: 0 0 20px rgba(135, 223, 255, 0.6);
  z-index: 1;
}

/* Squares pattern background */
.cta-bg {
  position: absolute;
  inset: 0;
  background-image: url("../graphics/squares-pattern.svg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1920px 1920px;
  opacity: 1;
  -webkit-mask-image: radial-gradient(ellipse at center top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0) 90%);
          mask-image: radial-gradient(ellipse at center top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0) 90%);
  pointer-events: none;
  z-index: 0;
}

/* Soft blue glow behind title */
.cta-glow {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  height: 520px;
  background: radial-gradient(ellipse at center, rgba(11,108,255,0.45), transparent 60%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.cta-container {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.cta-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 0 20px;
}
.cta-title span {
  background: linear-gradient(90deg, #87DFFF 0%, #5B8DFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cta-lead {
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 auto 40px;
  max-width: 560px;
}

.cta-actions {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.cta-btn-primary {
  background: #0757FF;
  background-image: none;
  color: #fff;
  min-width: 168px;
  height: 52px;
  border-radius: var(--b-radius-10);
  justify-content: center;
  gap: 8px;
  box-shadow: 0 8px 24px -10px rgba(7, 87, 255, 0.7);
}
.cta-btn-primary:hover {
  background: #0a4fe0;
}
.cta-btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  min-width: 152px;
  height: 52px;
  border-radius: var(--b-radius-10);
  justify-content: center;
}
.cta-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Decorative sparkle connectors
   Parent stays in page coordinates; ::before is the rotated diamond,
   ::after is the horizontal connector line. */
.cta-spark {
  position: absolute;
  width: 12px;
  height: 12px;
  z-index: 1;
  pointer-events: none;
  --spark-from: #87DFFF;
  --spark-to: #5B8DFF;
  --line: rgba(135, 223, 255, 0.55);
}
.cta-spark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--spark-from) 0%, var(--spark-to) 100%);
  transform: rotate(45deg);
  border-radius: 2px;
  box-shadow:
    0 0 18px rgba(135, 223, 255, 0.8),
    0 0 40px rgba(91, 141, 255, 0.5);
}
.cta-spark::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
}

/* Top-left: sparkle near left edge, line extending right toward center */
.cta-spark-tl { top: 25%; left: 8%; }
.cta-spark-tl::after {
  left: 100%; width: 20vw;
  background: linear-gradient(90deg, var(--line), transparent);
}

/* Top-right amber: sparkle near right edge, line extending left */
.cta-spark-tr {
  top: 28%; right: 6%;
  --spark-from: #FFE08A;
  --spark-to: #F0B23A;
  --line: rgba(255, 200, 90, 0.45);
}
.cta-spark-tr::before {
  box-shadow:
    0 0 18px rgba(255, 200, 90, 0.8),
    0 0 40px rgba(240, 178, 58, 0.5);
}
.cta-spark-tr::after {
  right: 100%; width: 20vw;
  background: linear-gradient(270deg, var(--line), transparent);
}

/* Bottom-left */
.cta-spark-bl { bottom: 30%; left: 18%; }
.cta-spark-bl::after {
  left: 100%; width: 15vw;
  background: linear-gradient(90deg, var(--line), transparent);
}

/* Bottom-right */
.cta-spark-br { bottom: 26%; right: 14%; }
.cta-spark-br::after {
  right: 100%; width: 20vw;
  background: linear-gradient(270deg, var(--line), transparent);
}

/* Subtle twinkle on the diamond only */
@keyframes cta-twinkle {
  0%, 100% { transform: rotate(45deg) scale(1); opacity: 1; }
  50%      { transform: rotate(45deg) scale(0.85); opacity: 0.65; }
}
.cta-spark::before { animation: cta-twinkle 4s ease-in-out infinite; }
.cta-spark-tr::before { animation-delay: 1s; }
.cta-spark-bl::before { animation-delay: 2s; }
.cta-spark-br::before { animation-delay: 1.5s; }
@media (prefers-reduced-motion: reduce) {
  .cta-spark::before { animation: none; }
}

@media (max-width: 760px) {
  .cta-section { padding: 80px 0 96px; }
  .cta-title { font-size: 34px; }
  .cta-lead { font-size: 15px; margin-bottom: 32px; }
  .cta-spark { display: none; }
}