/* NEXO IPTV — Custom CSS */
* { box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background-color: #0a0a0a; color: #fff; }

/* Gradient text utility */
.grad-text {
  background: linear-gradient(135deg, #a855f7, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.grad-text-pink {
  background: linear-gradient(135deg, #a855f7, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Gradient border glow */
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.card-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(139,92,246,0.25);
}

/* Plan card popular glow */
.plan-popular {
  background: linear-gradient(180deg, rgba(88,28,135,0.5) 0%, rgba(30,58,138,0.3) 100%);
  border-color: #7c3aed;
  box-shadow: 0 20px 50px rgba(139,92,246,0.2);
}

/* Animated live dot */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* Device tab active */
.tab-btn { transition: all 0.2s ease; cursor: pointer; }
.tab-btn.active {
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  color: #fff;
  box-shadow: 0 4px 15px rgba(124,58,237,0.3);
}

/* Progress bar */
.progress-bar {
  background: linear-gradient(90deg, #7c3aed, #2563eb);
  height: 4px;
  border-radius: 2px;
}

/* Smooth section transitions */
.plan-set { transition: opacity 0.2s ease; }
.plan-set.hidden { display: none; }

/* Hero player mock */
.player-mock {
  background: linear-gradient(135deg, #12042a, #0d0826, #030b1a);
}

/* Service card hover */
.service-card:hover {
  border-color: #7c3aed !important;
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(124,58,237,0.4);
}

/* FAQ accordion */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-answer.open {
  max-height: 200px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #7c3aed; border-radius: 3px; }

/* Mobile fix */
@media (max-width: 768px) {
  .hero-grid { grid-template-columns: 1fr; }
}