@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
*{font-family:'Inter',sans-serif;scroll-behavior:smooth;box-sizing:border-box}
body{background:#0f0f14;color:#e5e7eb;margin:0}
.nav-blur{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.btn-dl{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1.2rem;background:#dc2626;color:#fff;border-radius:6px;font-weight:600;font-size:.8rem;transition:all .2s;text-decoration:none;border:none;cursor:pointer}
.btn-dl:hover{background:#b91c1c}
.btn-browse{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1.2rem;background:rgba(255,255,255,.1);color:#fff;border-radius:6px;font-weight:600;font-size:.8rem;transition:all .2s;text-decoration:none;border:none;cursor:pointer}
.btn-browse:hover{background:rgba(255,255,255,.15)}
.sec-title{font-size:1.2rem;font-weight:700;color:#fff;margin:0}
@media(min-width:640px){.sec-title{font-size:1.3rem}}
.view-all{color:#9ca3af;font-size:.8rem;font-weight:500;text-decoration:none;transition:color .2s}
.view-all:hover{color:#fff}
.h-row{position:relative}
.h-scroll{display:flex;gap:.75rem;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding:0 .5rem}
.h-scroll::-webkit-scrollbar{display:none}
.h-arrow{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.1);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;opacity:0;transition:opacity .2s}
.h-row:hover .h-arrow{opacity:1}
.h-arrow.left{left:-18px}
.h-arrow.right{right:-18px}
.h-arrow:hover{background:rgba(0,0,0,.9)}
.h-arrow svg{width:16px;height:16px}
.poster-card{flex-shrink:0;width:180px;cursor:pointer}
@media(min-width:640px){.poster-card{width:220px}}
.poster-wrap{position:relative;aspect-ratio:2/3;border-radius:8px;overflow:hidden;background:#1a1a2e}
.poster-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.poster-card:hover .poster-wrap img{transform:scale(1.08)}
.poster-info{position:absolute;bottom:0;left:0;right:0;padding:.6rem .5rem;background:linear-gradient(transparent,rgba(0,0,0,.85));opacity:0;transition:opacity .3s}
.poster-card:hover .poster-info{opacity:1}
.badge-hd{position:absolute;top:8px;left:8px;background:#dc2626;color:#fff;font-size:.65rem;font-weight:700;padding:3px 7px;border-radius:4px;z-index:5;letter-spacing:.03em}
.badge-live{position:absolute;top:8px;left:8px;background:#dc2626;color:#fff;font-size:.6rem;font-weight:700;padding:3px 8px;border-radius:4px;z-index:5;display:flex;align-items:center;gap:4px}
.badge-live .live-dot-sm{width:6px;height:6px;border-radius:50%;background:#fff;animation:livePulse 1.5s ease-in-out infinite}
.badge-num{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.6);color:#fff;font-size:.65rem;font-weight:600;padding:3px 7px;border-radius:4px;z-index:5}
.poster-title{font-size:.85rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.poster-year{font-size:.72rem;color:rgba(255,255,255,.6);margin-top:2px}
.wc-card{flex-shrink:0;width:240px;background:#141428;border:1px solid rgba(255,255,255,.06);border-radius:10px;overflow:hidden;cursor:pointer;transition:all .2s}
@media(min-width:640px){.wc-card{width:280px}}
.wc-card:hover{background:#1a1a35;border-color:rgba(255,255,255,.1)}
.wc-card.live{border-color:rgba(220,38,38,.3)}
.wc-card-img{width:100%;height:130px;object-fit:cover;background:#1a2a1a}
.wc-card-body{padding:.8rem}
.wc-card-status{font-size:.85rem;font-weight:600;margin-bottom:.5rem;display:flex;align-items:center;gap:5px}
.wc-card-status.live-st{color:#22c55e}
.wc-card-status.finished-st{color:#6b7280}
.wc-card-status.upcoming-st{color:#60a5fa}
.wc-teams{display:flex;align-items:center;justify-content:space-between}
.wc-team{font-size:1rem;font-weight:600;color:#e5e7eb;max-width:35%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wc-score{font-size:1.6rem;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.wc-score.live-score{color:#22c55e}
.wc-substatus{font-size:.85rem;text-align:center;margin-top:.4rem}
.wc-substatus.live-sub{color:#22c55e}
.wc-substatus.finished-sub{color:#6b7280}
.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#22c55e;margin-right:4px;animation:livePulse 1.5s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.4}}
.dl-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:200;align-items:center;justify-content:center}
.dl-modal.show{display:flex}
.dl-modal-card{background:#1a1a2e;border-radius:16px;padding:2rem;width:90%;max-width:360px;text-align:center;border:1px solid rgba(255,255,255,.08);animation:fadeUp .3s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.dl-btn{display:block;width:100%;padding:.75rem;border-radius:8px;font-weight:700;font-size:.9rem;margin-bottom:.6rem;transition:all .2s;cursor:pointer;text-align:center;text-decoration:none}
.dl-btn-p{background:linear-gradient(135deg,#dc2626,#ef4444);color:#fff}
.dl-btn-p:hover{transform:scale(1.02);box-shadow:0 0 20px rgba(220,38,38,.3)}
.dl-btn-s{background:transparent;border:1.5px solid rgba(255,255,255,.2);color:#fff}
.dl-btn-s:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.03)}
.dl-close{position:absolute;top:.8rem;right:1rem;color:#555;font-size:1.5rem;cursor:pointer;background:none;border:none}
.ft-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:200;align-items:center;justify-content:center}
.ft-modal.show{display:flex}
.ft-modal-content{background:#1a1a2e;border-radius:12px;padding:1.5rem;width:90%;max-width:500px;max-height:80vh;overflow-y:auto;border:1px solid rgba(255,255,255,.08)}
.mobile-menu{max-height:0;overflow:hidden;transition:max-height .3s ease}
.mobile-menu.open{max-height:400px}
.lang-btn{font-size:.7rem;color:#9ca3af;padding:2px 6px;border-radius:4px;cursor:pointer;transition:all .2s}
.lang-btn.active{color:#fff;background:rgba(255,255,255,.1)}
.lang-btn:hover{color:#fff}
.hero-section{position:relative;min-height:800px;display:flex;align-items:center;overflow:hidden}
@media(min-width:768px){.hero-section{min-height:900px}}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.hero-slide.active{opacity:1}
.hero-slide img{width:100%;height:100%;object-fit:cover}
.hero-slide-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,15,20,.92) 0%,rgba(15,15,20,.7) 40%,rgba(15,15,20,.2) 100%)}
.hero-content{position:absolute;left:0;top:0;bottom:0;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:4rem 5rem;max-width:700px}
.hero-dots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10}
.hero-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3);cursor:pointer;transition:all .3s;border:none;padding:0}
.hero-dot.active{background:#dc2626;width:24px;border-radius:4px}
.wc-banner-wrap{padding:0 5rem}
.wc-banner{border-radius:12px;overflow:hidden;position:relative;border:1px solid rgba(212,175,55,.3)}
.wc-banner-img{width:100%;height:300px;object-fit:cover}
@media(min-width:640px){.wc-banner-img{height:380px}}
.wc-banner-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.2) 100%);display:flex;align-items:center;padding:3rem 5rem}
.btn-watch{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1.5rem;background:#f59e0b;color:#000;border-radius:6px;font-weight:700;font-size:.85rem;transition:all .2s;text-decoration:none;border:none;cursor:pointer}
.btn-watch:hover{background:#d97706}
.cta-gradient{background:linear-gradient(135deg,#dc2626 0%,#9333ea 100%);border-radius:12px;padding:4rem 2rem;text-align:center}
.btn-store{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.4rem;background:rgba(0,0,0,.4);color:#fff;border-radius:8px;font-weight:600;font-size:.9rem;transition:all .2s;text-decoration:none;border:1px solid rgba(255,255,255,.15)}
.btn-store:hover{background:rgba(0,0,0,.6)}

/* ===== Mobile Optimization ===== */
@media(max-width:767px){
  /* Nav: hide links, show hamburger */
  #navBg > div > div{height:48px!important}
  #navBg > div{padding:0 1rem!important}
  #navBg nav{display:none!important}
  #navBg .btn-dl{display:none!important}
  #navBg button[aria-label="Notifications"]{display:none!important}
  #navBg button[aria-label="Menu"]{display:block!important}
  .mobile-menu.open{max-height:500px!important}

  /* Hero */
  .hero-section{min-height:480px!important}
  .hero-content{padding:2rem 1.5rem!important}
  .hero-content h1{font-size:1.6rem!important}
  .hero-content p{font-size:.75rem!important;max-width:100%!important}
  .hero-content .btn-dl,.hero-content .btn-browse{font-size:.75rem!important;padding:.5rem 1rem!important}
  .hero-dots{bottom:12px}

  /* World Cup Banner */
  .wc-banner-wrap{padding:0 1rem!important}
  .wc-banner-img{height:180px!important}
  .wc-banner-overlay{padding:1.2rem 1.2rem 2rem 1.2rem!important}
  .wc-banner-overlay h2{font-size:1.2rem!important}
  .wc-banner-overlay svg{width:22px!important;height:22px!important}
  .wc-banner-overlay p{font-size:.7rem!important}
  .wc-banner-overlay .btn-watch{font-size:.75rem!important;padding:.45rem 1rem!important}
  .wc-banner-overlay > div > span{font-size:.55rem!important;padding:2px 8px!important}

  /* All content sections - override inline padding */
  #worldcup,#movies,#tv-shows,#live-channels,#anime,#sports{padding-left:1rem!important;padding-right:1rem!important}

  /* Section titles */
  .sec-title{font-size:.95rem!important}
  .view-all{font-size:.65rem!important}

  /* Poster cards */
  .poster-card{width:120px!important}
  .poster-title{font-size:.65rem!important}
  .poster-year{font-size:.55rem!important}
  .badge-hd{font-size:.45rem!important;padding:2px 4px!important}
  .badge-live{font-size:.45rem!important;padding:2px 5px!important}

  /* WC cards */
  .wc-card{width:180px!important}
  .wc-card-img{height:100px!important}
  .wc-card-body{padding:.5rem!important}
  .wc-card-status{font-size:.65rem!important}
  .wc-team{font-size:.72rem!important}
  .wc-score{font-size:1rem!important}
  .wc-substatus{font-size:.65rem!important}

  /* CTA - override inline padding */
  section > .cta-gradient{padding:2rem 1rem!important}
  section > .cta-gradient h2{font-size:1.2rem!important}
  section > .cta-gradient p{font-size:.75rem!important}
  section > .cta-gradient .btn-store{font-size:.7rem!important;padding:.45rem .9rem!important}
  section > .cta-gradient .btn-store svg{width:16px!important;height:16px!important}

  /* Footer */
  footer{padding:2rem 1rem 1.5rem!important}
  footer span{font-size:.65rem!important}
  footer p{font-size:.6rem!important}

  /* Scroll arrows hidden on mobile */
  .h-arrow{display:none!important}
}