/* ============================================================
   IPTV PREMIUM THEME — English / LTR
   Colors: #0A0A1A #12122A #6C3CE1 #00E5FF #FFD600
   Font:  Inter (Google Fonts)
   ============================================================ */

/* ---------- RESET & BASE ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0A0A1A;--card:#12122A;--purple:#6C3CE1;--cyan:#00E5FF;--gold:#FFD600;
  --text:#E0E0E0;--muted:#9E9E9E;--border:rgba(108,60,225,.12);
  --radius:14px;--shadow:0 4px 24px rgba(108,60,225,.18);
}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;direction:ltr;text-align:left}
::selection{background:var(--purple);color:#fff}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--purple);border-radius:3px}
a{color:var(--cyan);text-decoration:none;transition:.2s}
a:hover{color:var(--gold)}
img{max-width:100%;display:block}

/* ---------- TYPOGRAPHY ---------- */
h1,h2,h3,h4,h5,h6{color:#fff;font-weight:800;line-height:1.2}
h1{font-size:clamp(28px,5vw,54px);font-weight:900}
h2{font-size:clamp(20px,3vw,32px)}
h3{font-size:clamp(16px,2vw,20px)}
p{color:var(--muted);font-size:clamp(12px,1.4vw,15px)}

/* ---------- LAYOUT ---------- */
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.section{padding:48px 0}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:12px;font-weight:700;font-size:14px;border:none;cursor:pointer;transition:.25s;text-decoration:none}
.btn-primary{background:linear-gradient(135deg,var(--purple),#4B1FB0);color:#fff;box-shadow:0 4px 24px rgba(108,60,225,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 32px rgba(108,60,225,.5)}
.btn-outline{background:transparent;color:var(--cyan);border:2px solid rgba(0,229,255,.4)}
.btn-outline:hover{background:rgba(0,229,255,.08);border-color:var(--cyan)}
.btn-gold{background:linear-gradient(135deg,var(--gold),#FFA000);color:#000;font-weight:800}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 6px 28px rgba(255,214,0,.35)}
.btn-whatsapp{background:#25D366;color:#fff;padding:12px 28px;border-radius:12px;font-weight:700;font-size:14px}
.btn-whatsapp:hover{transform:translateY(-2px);box-shadow:0 6px 28px rgba(37,211,102,.35)}

/* ---------- CARDS ---------- */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:.25s;position:relative;overflow:hidden}
.card:hover{border-color:rgba(108,60,225,.35);transform:translateY(-3px);box-shadow:var(--shadow)}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--purple),var(--cyan));opacity:0;transition:.25s}
.card:hover::before{opacity:1}

/* ---------- BADGES ---------- */
.badge-mod{display:inline-block;background:linear-gradient(135deg,var(--purple),#9B59B6);color:#fff;font-size:9px;font-weight:700;padding:3px 10px;border-radius:5px;letter-spacing:.8px}
.badge-premium{display:inline-block;background:linear-gradient(135deg,var(--gold),#FFA000);color:#000;font-size:9px;font-weight:700;padding:3px 10px;border-radius:5px;letter-spacing:.8px}
.badge-free{display:inline-block;background:rgba(0,229,255,.12);color:var(--cyan);font-size:9px;font-weight:700;padding:3px 10px;border-radius:5px;letter-spacing:.8px}

/* ---------- DEVICE TAGS ---------- */
.device-tags{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;margin-bottom:14px}
.device-tag{background:rgba(0,229,255,.08);color:var(--cyan);padding:2px 8px;border-radius:4px;font-size:9px}

/* ---------- HERO ---------- */
.iptv-hero{position:relative;min-height:80vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:radial-gradient(ellipse at 30% 20%,rgba(108,60,225,.18) 0%,transparent 60%),radial-gradient(ellipse at 70% 80%,rgba(0,229,255,.1) 0%,transparent 50%),var(--bg)}

/* ---------- TRUST BAR ---------- */
.iptv-trust-bar{background:#0D0D22;border:1px solid var(--border);border-radius:16px;padding:18px 24px;margin-bottom:40px}

/* ---------- APPS SHOWCASE ---------- */
.iptv-apps-showcase{padding:48px 8px}
.iptv-apps-showcase .apps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}

/* ---------- COMPARISON TABLE ---------- */
.iptv-comparison-table{width:100%;border-collapse:separate;border-spacing:0;max-width:900px;margin:0 auto}
.iptv-comparison-table th{background:var(--card);color:var(--gold);font-size:12px;font-weight:700;padding:14px 12px;text-align:left;border-bottom:2px solid var(--purple)}
.iptv-comparison-table td{background:#0D0D22;padding:12px;border-bottom:1px solid var(--border);font-size:12px}
.iptv-comparison-table tr:hover td{background:#15153A}
.iptv-comparison-table .check{color:var(--cyan)}
.iptv-comparison-table .cross{color:#555}

/* ---------- FEATURES ---------- */
.features-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.feature-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;text-align:center;transition:.25s}
.feature-card:hover{border-color:var(--purple);box-shadow:0 0 24px rgba(108,60,225,.15)}
.feature-icon{font-size:32px;margin-bottom:12px}
.feature-card h3{color:#fff;font-weight:800;font-size:16px;margin-bottom:8px}
.feature-card p{color:var(--muted);font-size:12px;line-height:1.6}

/* ---------- FAQ ---------- */
.faq-item{background:var(--card);border:1px solid var(--border);border-radius:12px;margin-bottom:10px;overflow:hidden}
.faq-q{padding:16px 20px;color:#fff;font-weight:700;font-size:14px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.faq-q::after{content:'+';color:var(--purple);font-size:18px;font-weight:700;transition:.2s}
.faq-a{max-height:0;overflow:hidden;transition:.3s;padding:0 20px}
.faq-item.open .faq-a{max-height:300px;padding:0 20px 16px}
.faq-item.open .faq-q::after{content:'−'}
.faq-a p{color:#B0B0C0;font-size:13px;line-height:1.7}

/* ---------- CTA ---------- */
.iptv-cta{padding:56px 0;text-align:center;background:radial-gradient(ellipse at center,rgba(108,60,225,.15) 0%,transparent 70%)}

/* ---------- NAV ---------- */
nav{position:sticky;top:0;z-index:100;background:rgba(10,10,26,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:14px 0}
nav .container{display:flex;align-items:center;justify-content:space-between;gap:20px}
nav .logo{font-size:20px;font-weight:900;color:#fff;letter-spacing:-.5px}
nav .logo span{color:var(--cyan)}
nav .nav-links{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
nav .nav-links a{color:var(--muted);font-weight:600;font-size:13px;transition:.2s}
nav .nav-links a:hover{color:var(--cyan)}
nav .nav-links .nav-cta{background:linear-gradient(135deg,var(--purple),#4B1FB0);color:#fff;padding:8px 18px;border-radius:10px;font-size:12px;font-weight:700}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--border);padding:32px 20px;text-align:center;color:#777;font-size:12px}
footer a{color:var(--cyan)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:768px){
  nav .nav-links{gap:10px}
  .features-grid{grid-template-columns:1fr 1fr}
  .iptv-apps-showcase .apps-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .iptv-comparison-table{font-size:10px}
  .iptv-comparison-table th,.iptv-comparison-table td{padding:8px 6px}
}
@media(max-width:480px){
  .features-grid{grid-template-columns:1fr}
  nav .nav-links{display:none}
}

/* ---------- MARQUEE BAND ---------- */
.marquee-band{background:linear-gradient(90deg,#0D0D22,#1A1A3E,#0D0D22);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:10px 0;overflow:hidden;position:relative;white-space:nowrap}
.marquee-track{display:inline-flex;animation:marqueeScroll 40s linear infinite;gap:24px;align-items:center}
.marquee-track:hover{animation-play-state:paused}
.marquee-item{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#fff;padding:4px 14px;border-radius:8px;background:rgba(108,60,225,.08);border:1px solid rgba(108,60,225,.15);transition:.2s;flex-shrink:0}
.marquee-item:hover{border-color:var(--cyan);background:rgba(0,229,255,.06)}
.marquee-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.marquee-dot.mod{background:var(--purple)}
.marquee-dot.premium{background:var(--gold)}
.marquee-dot.free{background:var(--cyan)}
@keyframes marqueeScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ---------- WHATSAPP FLOAT ---------- */
.whatsapp-float{position:fixed;bottom:28px;right:28px;z-index:9999;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 20px rgba(37,211,102,.35);transition:.25s;text-decoration:none}
.whatsapp-float:hover{transform:scale(1.1);box-shadow:0 6px 30px rgba(37,211,102,.5)}
.whatsapp-float svg{width:28px;height:28px;fill:#fff}
.whatsapp-float::before{content:'';position:absolute;top:-6px;left:-6px;right:-6px;bottom:-6px;border-radius:50%;background:rgba(37,211,102,.25);animation:waPulse 2s ease-out infinite;pointer-events:none}
.whatsapp-float .wa-tooltip{position:absolute;bottom:calc(100% + 10px);right:0;background:#1A1A3E;color:#fff;font-size:12px;font-weight:700;padding:8px 16px;border-radius:10px;white-space:nowrap;opacity:0;transform:translateY(6px);transition:.25s;pointer-events:none;border:1px solid rgba(108,60,225,.2);box-shadow:0 4px 16px rgba(0,0,0,.3)}
.whatsapp-float:hover .wa-tooltip{opacity:1;transform:translateY(0)}
@keyframes waPulse{0%{transform:scale(1);opacity:.6}70%{transform:scale(1.5);opacity:0}100%{transform:scale(1.5);opacity:0}}

/* ---------- ANIMATIONS ---------- */
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeInUp .6s ease both}
.fade-in-d1{animation-delay:.1s}
.fade-in-d2{animation-delay:.2s}
.fade-in-d3{animation-delay:.3s}