/* ==========================================================================
   Light Mode Luxury CTA Banner Engine with Infinite Background Animation
   ========================================================================== */
.cta-card-light {
  position: relative !important;
  background: linear-gradient(135deg, #F0F7FF 0%, #FFFFFF 50%, #F5F9FF 100%) !important;
  border: 1px solid #DBEAFE !important;
  border-radius: 24px !important;
  padding: 3.75rem 2rem !important;
  box-shadow: 0 12px 40px -10px rgba(0, 102, 204, 0.1) !important;
  overflow: hidden !important;
}

@keyframes ctaOrbFloat1 {
  0%, 100% {
    transform: translate(0px, 0px) rotate(0deg) scale(1);
  }
  33% {
    transform: translate(45px, -35px) rotate(120deg) scale(1.1);
  }
  66% {
    transform: translate(-30px, 30px) rotate(240deg) scale(0.9);
  }
}

@keyframes ctaOrbFloat2 {
  0%, 100% {
    transform: translate(0px, 0px) rotate(0deg) scale(1);
  }
  33% {
    transform: translate(-50px, 40px) rotate(-120deg) scale(1.15);
  }
  66% {
    transform: translate(40px, -35px) rotate(-240deg) scale(0.85);
  }
}

@keyframes ctaGridPulse {
  0% {
    opacity: 0.3;
    transform: scale(1);
  }
  100% {
    opacity: 0.8;
    transform: scale(1.02);
  }
}

.cta-title-light {
  font-family: 'Inter', sans-serif !important;
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  color: #082B63 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 1rem !important;
}

@media (max-width: 768px) {
  .cta-title-light {
    font-size: 1.85rem !important;
  }
}

.btn-cta-primary-light {
  box-shadow: none !important;
}

.btn-cta-primary-light:hover {
  background: linear-gradient(135deg, #0052A3 0%, #1E30C8 100%) !important;
  box-shadow: none !important;
  transform: none !important;
}

.btn-cta-secondary-light:hover {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  transform: translateY(-2px) !important;
  color: #0066CC !important;
}