/* =====================================================
   CiroX Landing — CTA Banner
   ===================================================== */

.cta-banner { padding: var(--space-12) 0; }

.cta-inner-box {
  position: relative;
  overflow: hidden;
  padding: var(--space-9) var(--space-7);
  border-radius: var(--radius-xl);
  border-color: rgba(34, 211, 238, 0.25);
  text-align: center;
  box-shadow: var(--shadow-lg), var(--shadow-glow-cyan);
}
.cta-bg-glow {
  position: absolute;
  top: -50%;
  left: -20%;
  width: 140%;
  height: 200%;
  background: var(--grad-mesh-1);
  opacity: 0.3;
  pointer-events: none;
  animation: mesh-drift 10s var(--ease-slow) infinite;
}
.cta-title { font-size: var(--display-md); font-weight: 800; color: var(--text-pure); margin-bottom: var(--space-4); position: relative; z-index: 1; }
.cta-subtext { font-size: var(--text-lg); color: var(--text-muted); margin-bottom: var(--space-7); position: relative; z-index: 1; }

.btn-cta-large {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: 18px 40px;
  font-size: var(--text-lg); font-weight: 700;
  color: var(--bg-void);
  background: var(--grad-brand);
  border-radius: var(--radius-full);
  border: none;
  box-shadow: var(--shadow-glow-cyan), 0 10px 30px rgba(34,211,238,0.35);
  transition: var(--transition-animated), filter var(--dur-quick) var(--ease-quick);
  position: relative; z-index: 1;
}
.btn-cta-large:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 48px rgba(34,211,238,0.5);
  filter: brightness(1.15);
}

.cta-trust-row {
  display: flex; align-items: center; justify-content: center; gap: var(--space-6);
  margin-top: var(--space-6);
  position: relative; z-index: 1;
  flex-wrap: wrap;
}
.cta-trust-item { font-size: var(--text-sm); color: var(--text-muted); display: flex; align-items: center; gap: var(--space-1); }
.cta-trust-item .check { color: var(--volt-emerald); font-weight: 700; }

@keyframes glow-motion {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(3%, -5%) scale(1.1); }
}

@media (max-width: 640px) {
  .cta-inner-box { padding: var(--space-7) var(--space-5); }
  .cta-title { font-size: var(--display-sm); }
  .cta-trust-row { gap: var(--space-3); }
}