/* ================================================================
   FINAL CTA — "The Reckoning"
   Full-bleed dark navy section. Headline words animate in on
   scroll. Three glass stat cards count up. Massive WhatsApp CTA
   pulses with a double ring. Dubai skyline fades in at the base.
================================================================ */


/* ── Section shell ──────────────────────────────────────────── */

.hs-fcta {
  position:         relative;
  overflow:         hidden;
  background:       var(--hs-gradient-cta);
  padding-block:    var(--hs-section-pad-y-xl);
}


/* ── Dubai skyline — atmospheric, barely visible ────────────── */

.hs-fcta__skyline {
  position:           absolute;
  bottom:             0;
  left:               0;
  width:              100%;
  height:             52%;
  object-fit:         cover;
  object-position:    center bottom;
  opacity:            0.09;
  filter:             grayscale(100%) brightness(0.6);
  pointer-events:     none;
  -webkit-mask-image: linear-gradient(to top, black 0%, transparent 100%);
  mask-image:         linear-gradient(to top, black 0%, transparent 100%);
}


/* ── Ambient orbs ───────────────────────────────────────────── */

.hs-fcta__orb {
  position:       absolute;
  border-radius:  var(--hs-radius-full);
  pointer-events: none;
  filter:         blur(80px);
  will-change:    transform;
}

.hs-fcta__orb--a {
  width:      700px;
  height:     700px;
  top:        -200px;
  right:      -150px;
  background: var(--hs-gradient-orb-accent);
  animation:  hs-fcta-drift-a 30s ease-in-out infinite alternate;
}

.hs-fcta__orb--b {
  width:      500px;
  height:     500px;
  bottom:     -100px;
  left:       -120px;
  background: var(--hs-gradient-orb-navy);
  animation:  hs-fcta-drift-b 38s ease-in-out infinite alternate;
}

@keyframes hs-fcta-drift-a {
  from { transform: translate(0, 0) scale(1);    }
  to   { transform: translate(-40px, 30px) scale(1.08); }
}

@keyframes hs-fcta-drift-b {
  from { transform: translate(0, 0) scale(1);    }
  to   { transform: translate(30px, -20px) scale(1.06); }
}


/* ── Inner container ────────────────────────────────────────── */

.hs-fcta__inner {
  position:        relative;
  z-index:         var(--hs-z-raised);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  text-align:      center;
  gap:             var(--hs-space-16);
}


/* ── Top block: eyebrow + headline + body ───────────────────── */

.hs-fcta__top {
  max-width: var(--hs-container-md);
}

.hs-fcta__eyebrow {
  display:        block;
  margin-bottom:  var(--hs-space-5);
  color:          var(--hs-palette-accent-400);
  letter-spacing: var(--hs-tracking-wider);
}

.hs-fcta__headline {
  font-family:    var(--hs-font-display);
  font-size:      clamp(2rem, 5.5vw, 4rem);
  font-weight:    var(--hs-font-extrabold);
  line-height:    var(--hs-leading-tight);
  letter-spacing: var(--hs-tracking-tight);
  color:          var(--hs-color-text-inverse);
  margin-bottom:  var(--hs-space-6);
}

/* Each word is a separately animatable inline-block */
.hs-fcta__word {
  display:        inline-block;
  will-change:    transform, opacity;
}

.hs-fcta__body {
  font-family: var(--hs-font-body);
  font-size:   var(--hs-text-lg);
  line-height: var(--hs-leading-relaxed);
  color:       var(--hs-color-text-inverse-muted);
  max-width:   58ch;
  margin:      0 auto;
}


/* ── Stat cards ─────────────────────────────────────────────── */

.hs-fcta__stats {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--hs-gap-md);
  width:                 100%;
  max-width:             var(--hs-container-lg);
}

.hs-fcta__stat {
  background:        var(--hs-color-bg-glass);
  backdrop-filter:   var(--hs-glass-blur);
  -webkit-backdrop-filter: var(--hs-glass-blur);
  border:            var(--hs-border-1) solid var(--hs-color-border-inverse);
  border-radius:     var(--hs-radius-xl);
  padding:           var(--hs-space-8) var(--hs-space-6);
  display:           flex;
  flex-direction:    column;
  align-items:       center;
  gap:               var(--hs-space-2);
  will-change:       transform, opacity;
}

.hs-fcta__stat-value {
  font-family:    var(--hs-font-display);
  font-size:      var(--hs-text-5xl);
  font-weight:    var(--hs-font-extrabold);
  line-height:    1;
  letter-spacing: var(--hs-tracking-tight);
  color:          var(--hs-color-text-inverse);
  font-style:     normal;
}

.hs-fcta__stat-label {
  font-family: var(--hs-font-body);
  font-size:   var(--hs-text-sm);
  line-height: var(--hs-leading-snug);
  color:       var(--hs-color-text-inverse-muted);
  max-width:   18ch;
}


/* ── CTA block ──────────────────────────────────────────────── */

.hs-fcta__cta-wrap {
  position:       relative;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--hs-space-5);
  will-change:    transform, opacity;
}

/* Pulsing rings around the button */
.hs-fcta__ring {
  position:      absolute;
  top:           50%;
  left:          50%;
  border-radius: var(--hs-radius-full);
  border:        var(--hs-border-2) solid rgba(37, 211, 102, 0.45);
  pointer-events: none;
  transform-origin: center center;
}

.hs-fcta__ring--1 {
  width:     calc(var(--hs-btn-height-xl) + 48px);
  height:    calc(var(--hs-btn-height-xl) + 48px);
  margin-top: calc((var(--hs-btn-height-xl) + 48px) / -2);
  margin-left: calc((var(--hs-btn-height-xl) + 48px) / -2);
  animation: hs-fcta-ring-pulse 2.4s ease-out infinite;
}

.hs-fcta__ring--2 {
  width:     calc(var(--hs-btn-height-xl) + 80px);
  height:    calc(var(--hs-btn-height-xl) + 80px);
  margin-top: calc((var(--hs-btn-height-xl) + 80px) / -2);
  margin-left: calc((var(--hs-btn-height-xl) + 80px) / -2);
  animation: hs-fcta-ring-pulse 2.4s ease-out 0.8s infinite;
}

@keyframes hs-fcta-ring-pulse {
  0%   { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(1.4);  opacity: 0;   }
}

.hs-fcta__btn {
  position:  relative;
  z-index:   var(--hs-z-raised);
}

.hs-fcta__subtext {
  font-size:  var(--hs-text-sm);
  color:      var(--hs-color-text-inverse-muted);
  margin:     0;
}

.hs-fcta__secondary {
  font-family: var(--hs-font-body);
  font-size:   var(--hs-text-sm);
  color:       var(--hs-color-text-inverse-muted);
  text-decoration: none;
  transition:  color var(--hs-duration-fast) var(--hs-ease-out);
}

.hs-fcta__secondary:hover {
  color: var(--hs-color-text-inverse);
}


/* ── Closing urgency line ────────────────────────────────────── */

.hs-fcta__closing {
  font-family:    var(--hs-font-display);
  font-size:      var(--hs-text-sm);
  font-weight:    var(--hs-font-semibold);
  letter-spacing: var(--hs-tracking-wider);
  text-transform: uppercase;
  color:          var(--hs-palette-red-500);
  opacity:        0.9;
  margin:         0;
}


/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 768px) {
  .hs-fcta__stats {
    grid-template-columns: 1fr;
    max-width:             360px;
  }

  .hs-fcta__stat-value {
    font-size: var(--hs-text-4xl);
  }

  .hs-fcta__ring--1,
  .hs-fcta__ring--2 {
    display: none;
  }
}


/* ── Reduced motion ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .hs-fcta__orb,
  .hs-fcta__ring--1,
  .hs-fcta__ring--2 {
    animation: none;
  }

  .hs-fcta__word {
    will-change: auto;
  }
}