/* ═══════════════════════════════════════
   PROMO BANNER
   ═══════════════════════════════════════ */

.promo-banner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  background: linear-gradient(135deg, rgba(10, 30, 60, 0.7), rgba(8, 20, 40, 0.5));
  border-radius: var(--radius-xl);
  padding: var(--space-lg) var(--space-xl);
  margin: var(--space-md) 0 var(--space-lg);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
  contain: layout style;
}

.promo-banner.visible {
  opacity: 1;
  transform: translateY(0);
}

.promo-banner::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(74, 158, 255, 0.1) 0%, transparent 70%);
  animation: promoGlow 5s ease-in-out infinite;
}

@keyframes promoGlow {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.2); opacity: 1; }
}

.promo-text {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: var(--font-base);
  z-index: 1;
}

.promo-text i {
  font-size: 2.2rem;
  color: var(--accent-light);
  animation: zap 1.5s ease-in-out infinite;
}

@keyframes zap {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.1); }
}