/* ===========================
   IPTV PRO — CSS Principal
   Mobile First & Responsive
=========================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --ac: #E50914; --dk: #0A0A0F; --cd: #12121A;
  --bd: rgba(255,255,255,0.08); --tx: #F0F0F0; --mt: #888;
  --wa: #25D366; --nav-h: 60px;
}
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family:'Outfit',sans-serif; background:var(--dk); color:var(--tx); overflow-x:hidden; line-height:1.6; -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
button { cursor:pointer; font-family:'Outfit',sans-serif; }
a { color:inherit; text-decoration:none; }

/* NAV */
#main-nav { position:sticky; top:0; z-index:200; background:rgba(10,10,15,0.97); border-bottom:1px solid var(--bd); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); height:var(--nav-h); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; padding:0 16px; height:100%; max-width:1100px; margin:0 auto; }
.l-logo { font-family:'Bebas Neue',cursive; font-size:24px; letter-spacing:3px; color:#fff; display:flex; align-items:center; gap:8px; }
.l-logo img { height:36px; object-fit:contain; }
.nav-right { display:flex; align-items:center; gap:8px; }
.nav-wa-btn { display:flex; align-items:center; gap:6px; background:var(--wa); color:#fff; border:none; padding:8px 14px; border-radius:20px; font-size:13px; font-weight:600; white-space:nowrap; transition:opacity .2s; }
.nav-wa-btn:hover { opacity:.88; }
.nav-admin-btn { background:transparent; border:1px solid var(--bd); color:var(--mt); width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; transition:all .2s; }
.nav-admin-btn:hover { border-color:var(--ac); color:var(--ac); }

/* HERO */
.hero { position:relative; min-height:calc(100svh - var(--nav-h)); display:flex; align-items:center; justify-content:center; text-align:center; padding:48px 16px 56px; overflow:hidden; }
.hero-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:48px 48px; }
.hero-glow { position:absolute; top:-60px; left:50%; transform:translateX(-50%); width:min(600px,130vw); height:280px; background:radial-gradient(ellipse,rgba(229,9,20,.2) 0%,transparent 70%); }
.hero-content { position:relative; z-index:1; width:100%; max-width:780px; }
.hero-badge { display:inline-block; background:rgba(229,9,20,.12); border:1px solid rgba(229,9,20,.35); color:var(--ac); font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; padding:5px 14px; border-radius:20px; margin-bottom:18px; }
.hero h1 { font-family:'Bebas Neue',cursive; font-size:clamp(46px,12vw,96px); line-height:.92; letter-spacing:1px; margin-bottom:16px; color:#fff; word-break:break-word; }
.hl { color:var(--ac); }
.hero-sub { font-size:clamp(14px,3.5vw,18px); color:#bbb; line-height:1.6; max-width:540px; margin:0 auto 28px; }
.hero-cta { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.btn-primary { display:inline-flex; align-items:center; gap:6px; background:var(--ac); color:#fff; border:none; padding:13px 22px; border-radius:8px; font-size:14px; font-weight:700; transition:transform .15s,opacity .15s; white-space:nowrap; }
.btn-primary:hover { transform:scale(1.03); opacity:.92; }
.btn-primary:active { transform:scale(.98); }
.btn-ghost { display:inline-flex; align-items:center; gap:6px; background:transparent; color:#fff; border:1px solid rgba(255,255,255,.2); padding:13px 22px; border-radius:8px; font-size:14px; font-weight:600; transition:background .2s; white-space:nowrap; }
.btn-ghost:hover { background:rgba(255,255,255,.06); }
.btn-lg { padding:15px 36px; font-size:15px; }
.stats-row { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-top:44px; }
.stat { text-align:center; }
.stat-num { font-family:'Bebas Neue',cursive; font-size:clamp(28px,7vw,42px); color:var(--ac); line-height:1; }
.stat-label { font-size:12px; color:var(--mt); margin-top:2px; }

/* TICKER */
.ticker-wrap { background:#0D0D15; border-top:1px solid var(--bd); border-bottom:1px solid var(--bd); padding:11px 0; overflow:hidden; user-select:none; }
.ticker-track { display:flex; gap:24px; white-space:nowrap; animation:ticker 22s linear infinite; }
@media (prefers-reduced-motion:reduce) { .ticker-track { animation:none; } }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.tick-item { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:#bbb; }
.tick-dot { width:5px; height:5px; border-radius:50%; background:var(--ac); flex-shrink:0; }

/* SECTIONS */
.section { padding:56px 16px; max-width:1080px; margin:0 auto; }
.sec-label { font-size:10px; font-weight:600; color:var(--ac); letter-spacing:3px; text-transform:uppercase; text-align:center; margin-bottom:6px; }
.sec-title { font-family:'Bebas Neue',cursive; font-size:clamp(28px,6vw,52px); text-align:center; letter-spacing:2px; margin-bottom:6px; color:#fff; }
.sec-sub { text-align:center; color:var(--mt); font-size:13px; margin-bottom:32px; }

/* SERVICE TABS */
.svc-tabs { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:24px; }
.svc-tab { background:#0F0F1A; border:1px solid var(--bd); color:#bbb; padding:9px 18px; border-radius:22px; font-size:13px; font-weight:600; transition:all .2s; font-family:'Outfit',sans-serif; }
.svc-tab.active { background:var(--ac); border-color:var(--ac); color:#fff; }
.svc-tab:focus-visible { outline:2px solid var(--ac); outline-offset:2px; }
.svc-panel { display:none; }
.svc-panel.active { display:block; }
.svc-info { background:linear-gradient(135deg,#12121A,#0F0F18); border:1px solid var(--bd); border-radius:12px; padding:18px; margin-bottom:18px; display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.svc-info-name { font-family:'Bebas Neue',cursive; font-size:24px; letter-spacing:1.5px; color:#fff; margin-bottom:3px; }
.svc-info-desc { font-size:13px; color:var(--mt); }
.svc-info-devices { font-size:12px; color:#aaa; margin-top:6px; }
.svc-stats { display:flex; gap:14px; flex-wrap:wrap; }
.svc-stat-num { font-family:'Bebas Neue',cursive; font-size:20px; color:var(--ac); line-height:1; }
.svc-stat-label { font-size:11px; color:var(--mt); }

/* PLANS */
.plans-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (min-width:600px) { .plans-grid { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; } }
.plan-card { background:var(--cd); border:1px solid var(--bd); border-radius:12px; padding:16px 13px; position:relative; transition:transform .2s,border-color .2s; display:flex; flex-direction:column; }
.plan-card:hover { transform:translateY(-3px); border-color:rgba(229,9,20,.4); }
.plan-card.featured { border-color:var(--ac); background:linear-gradient(145deg,#1a0404,#12121A); }
.plan-popular { position:absolute; top:-10px; left:50%; transform:translateX(-50%); background:var(--ac); color:#fff; font-size:9px; font-weight:700; padding:3px 10px; border-radius:10px; letter-spacing:.5px; white-space:nowrap; }
.plan-duration { font-family:'Bebas Neue',cursive; font-size:19px; letter-spacing:1px; margin-bottom:3px; }
.plan-price-row { display:flex; align-items:baseline; gap:2px; margin-bottom:2px; }
.plan-sym { font-size:14px; font-weight:700; color:var(--ac); }
.plan-amount { font-family:'Bebas Neue',cursive; font-size:38px; line-height:1; color:#fff; }
.plan-save { font-size:10px; color:#4ade80; min-height:15px; margin-bottom:8px; }
.plan-ppm { font-size:11px; color:var(--mt); margin-bottom:12px; }
.plan-btn { margin-top:auto; width:100%; background:var(--ac); color:#fff; border:none; padding:10px 6px; border-radius:7px; font-size:12px; font-weight:700; transition:opacity .15s; }
.plan-btn:hover { opacity:.85; }
.plan-btn:active { transform:scale(.98); }
.plan-btn.ghost { background:transparent; border:1px solid rgba(255,255,255,.18); color:#fff; }

/* PAYMENT */
.pay-section { background:#080810; border-top:1px solid var(--bd); padding:48px 16px; }
.pay-methods { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:22px; }
.pay-card { background:#0F0F1A; border:1px solid var(--bd); border-radius:10px; padding:14px 16px; text-align:center; flex:1 1 100px; max-width:150px; }
.pay-icon { font-size:20px; margin-bottom:5px; }
.pay-name { font-size:12px; font-weight:600; color:#ccc; }
.pay-info { font-size:10px; color:var(--mt); margin-top:3px; word-break:break-all; }

/* FEATURES */
.feat-section { background:#08080F; border-top:1px solid var(--bd); }
.feat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (min-width:700px) { .feat-grid { grid-template-columns:repeat(3,1fr); gap:14px; } }
.feat-card { background:var(--cd); border:1px solid var(--bd); border-radius:11px; padding:16px; }
.feat-icon { font-size:22px; margin-bottom:8px; }
.feat-card h3 { font-size:13px; font-weight:600; margin-bottom:5px; }
.feat-card p { font-size:12px; color:var(--mt); line-height:1.5; }

/* FAQ */
.faq-section { max-width:700px; }
.faq-list { margin-top:8px; }
.faq-item { border-bottom:1px solid var(--bd); }
.faq-q { width:100%; background:none; border:none; color:#fff; font-size:14px; font-weight:500; text-align:left; padding:15px 0; display:flex; justify-content:space-between; align-items:center; gap:10px; cursor:pointer; font-family:'Outfit',sans-serif; }
.faq-q:focus-visible { outline:2px solid var(--ac); border-radius:4px; }
.faq-arr { color:var(--ac); font-size:20px; flex-shrink:0; transition:transform .2s; line-height:1; }
.faq-q[aria-expanded="true"] .faq-arr { transform:rotate(45deg); }
.faq-a { font-size:13px; color:var(--mt); line-height:1.7; padding-bottom:13px; }
.faq-a[hidden] { display:none; }

/* CTA FINAL */
.cta-final { background:linear-gradient(135deg,rgba(229,9,20,.12),rgba(229,9,20,.04)); border-top:1px solid rgba(229,9,20,.2); border-bottom:1px solid rgba(229,9,20,.2); padding:56px 16px; text-align:center; }
.cta-title { font-family:'Bebas Neue',cursive; font-size:clamp(26px,7vw,52px); letter-spacing:2px; margin-bottom:10px; color:#fff; }
.cta-sub { color:#aaa; font-size:14px; margin-bottom:22px; }

/* FOOTER */
footer { background:#060608; border-top:1px solid var(--bd); padding:26px 16px; text-align:center; }
.foot-logo { font-family:'Bebas Neue',cursive; font-size:20px; letter-spacing:2px; color:#fff; margin-bottom:6px; }
footer p { font-size:12px; color:var(--mt); }

/* WA FAB */
.wa-fab { position:fixed; bottom:18px; right:14px; z-index:300; background:var(--wa); color:#fff; border:none; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(37,211,102,.4); animation:pulse-wa 2.5s ease infinite; transition:transform .15s; }
.wa-fab:hover { transform:scale(1.08); }
.wa-fab:active { transform:scale(.95); }
@keyframes pulse-wa { 0%,100%{box-shadow:0 4px 20px rgba(37,211,102,.4)} 50%{box-shadow:0 4px 32px rgba(37,211,102,.7)} }
@media (prefers-reduced-motion:reduce) { .wa-fab { animation:none; } }

/* DESKTOP */
@media (min-width:768px) {
  :root { --nav-h:66px; }
  .nav-inner { padding:0 32px; }
  .l-logo { font-size:28px; }
  .section { padding:70px 32px; }
  .pay-section { padding:60px 32px; }
  .hero { padding:60px 32px; }
}
@media (min-width:1024px) {
  .nav-inner { padding:0 40px; }
  .section { padding:80px 40px; }
}