/* ============================================
   cta.css — Animated gradient CTA banner
   ============================================ */

/* --- CTA Banner Section --- */
.cta-banner {
  padding: 100px 0;
}

/* --- CTA Inner — animated gradient --- */
.cta-banner__inner {
  text-align: center;
  background: linear-gradient(135deg, #8230D2, #A855F7, #3B82F6, #8230D2);
  background-size: 200% 200%;
  animation: shimmer 8s ease infinite;
  border-radius: var(--radius-lg);
  padding: 64px 32px;
  position: relative;
  overflow: hidden;
}

/* --- Title --- */
.cta-banner__title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 14px;
  position: relative;
}

/* --- Text --- */
.cta-banner__text {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.05rem;
  margin-bottom: 32px;
  position: relative;
}

/* --- Actions --- */
.cta-banner__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}

/* --- Platforms Note --- */
.cta-banner__platforms {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 16px;
  position: relative;
}

/* --- Tablet (768px+) --- */
@media (min-width: 768px) {
  .cta-banner__inner {
    padding: 80px 48px;
  }

  .cta-banner__title {
    font-size: 2.2rem;
  }
}

/* --- Desktop (1024px+) --- */
@media (min-width: 1024px) {
  .cta-banner__title {
    font-size: 2.5rem;
  }
}