/* ============================================================
   09 - Final CTA band  (section id="cta")
   A glowing glass closing panel. All classes prefixed .cta-
   Tokens + shared components only. Frost / ice theme.
   ============================================================ */

/* The halo is wider than the container on purpose, which pushed the document
   sideways once the left rail took 250px off the content width. `clip` bounds it
   to the section without turning the section into a scroll container, so the glow
   still bleeds, it just stops at the edge of the screen. */
#cta { overflow-x: clip; }

/* reveal wrapper, holds the halo + the glass band */
.cta-band-wrap { position: relative; }

/* soft pulsing halo bleeding out from behind the band */
.cta-aura {
  position: absolute; z-index: 0;
  left: 50%; top: 50%;
  width: min(880px, 118%);
  height: 128%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(closest-side,
      rgba(150,180,220,.20),
      rgba(120,150,195,.07) 55%,
      transparent 78%);
  filter: blur(48px);
  animation: pulse 7.5s var(--e-in-out) infinite;
}

/* the glowing glass panel */
.cta-band {
  position: relative; z-index: 1;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: clamp(46px, 7vw, 88px) clamp(26px, 5vw, 76px);
  text-align: center;
  /* the tint layers are all translucent, which read as "slightly lighter than
     black" on the old flat page but as "washed out photo" now that there is a
     picture behind them. The dark base restores the contrast they were drawn
     against, so the copy inside keeps its ratio. */
  background:
    radial-gradient(130% 150% at 50% -25%, rgba(180,204,228,.15), transparent 58%),
    var(--accent-grad-soft),
    var(--surface),
    rgba(9,12,19,.60);
  border: 1px solid var(--hairline-strong);
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  box-shadow: var(--shadow-lg), var(--glow-soft);
}

/* glossy top sheen */
.cta-band::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.07), transparent 44%);
  -webkit-mask: linear-gradient(#000, transparent 58%);
          mask: linear-gradient(#000, transparent 58%);
}

/* 1px accent gradient ring on the edge */
.cta-band::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  padding: 1px;
  background: linear-gradient(135deg,
      rgba(207,224,242,.55), transparent 38%, transparent 62%, rgba(134,166,204,.42));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}

/* content column */
.cta-content { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; }

.cta-logo-wrap { display: block; }
.cta-logo {
  height: 58px; width: auto;
  margin: 0 auto 24px;
  filter: drop-shadow(0 8px 22px rgba(150,180,220,.55));
  animation: floatY 6s var(--e-in-out) infinite;
}

.cta-title {
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.032em;
}

.cta-sub {
  margin: 18px auto 0;
  max-width: 540px;
  color: var(--text-dim);
  font-size: clamp(15px, 1.7vw, 17.5px);
  line-height: 1.62;
}

.cta-actions {
  margin-top: 34px;
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
}
.cta-actions .btn svg { width: 19px; height: 19px; }

.cta-trust {
  margin: 28px auto 0;
  padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; justify-content: center;
}
.cta-trust li { list-style: none; }

/* ---------- responsive ---------- */
@media (max-width: 620px) {
  .cta-title { font-size: clamp(27px, 8vw, 40px); }
  .cta-aura { height: 120%; filter: blur(38px); }
}
@media (max-width: 480px) {
  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions .btn { width: 100%; }
}