/* Extracted styles to resolve no-inline-styles warnings */

.custom-style-1 {
  position:fixed; inset:0; z-index:1; pointer-events:none;
}

.custom-style-2 {
  width:700px; height:700px; background:radial-gradient(circle,rgba(138,255,0,.12),transparent); top:-15%; left:-18%;
}

.custom-style-3 {
  width:600px; height:600px; background:radial-gradient(circle,rgba(190,252,37,.1),transparent); top:35%; right:-18%;
}

.custom-style-4 {
  width:500px; height:500px; background:radial-gradient(circle,rgba(16,185,129,.08),transparent); bottom:5%; left:15%;
}

.custom-style-5 {
  width:450px; height:450px; background:radial-gradient(circle,rgba(138,255,0,.07),transparent); bottom:30%; right:5%;
}

.custom-style-6 {
  left:7%; height:55%; animation-duration:9s; animation-delay:0s; opacity:.35;
}

.custom-style-7 {
  left:18%; height:40%; animation-duration:13s; animation-delay:2s; opacity:.2;
}

.custom-style-8 {
  left:42%; height:65%; animation-duration:11s; animation-delay:4s; opacity:.15;
}

.custom-style-9 {
  left:61%; height:50%; animation-duration:8s; animation-delay:1s; opacity:.25;
}

.custom-style-10 {
  left:78%; height:45%; animation-duration:15s; animation-delay:3s; opacity:.2;
}

.custom-style-11 {
  left:91%; height:60%; animation-duration:10s; animation-delay:5s; opacity:.3;
}

.custom-style-12 {
  position:relative; z-index:10;
}

.custom-style-13 {
  font-family:'Orbitron',monospace;
}

.custom-style-14 {
  background:radial-gradient(circle,rgba(138,255,0,.7),rgba(190,252,37,.5),transparent);
}

.custom-style-15 {
  background:linear-gradient(145deg,#071208,#030804); border:2px solid rgba(138,255,0,.32); box-shadow:0 0 90px rgba(138,255,0,.38),0 40px 100px rgba(0,0,0,.9);
}

.custom-style-16 {
  width:6px; height:6px;
}

.custom-style-17 {
  aspect-ratio:16/10;
}

.custom-style-18 {
  background:linear-gradient(0deg,rgba(3,7,4,.9),transparent);
}

.custom-style-19 {
  background:linear-gradient(90deg,rgba(138,255,0,.05),rgba(138,255,0,.4),rgba(138,255,0,.05));
}

.custom-style-20 {
  background:radial-gradient(ellipse,rgba(138,255,0,.5),transparent);
}

.custom-style-21 {
  width:1px; height:1px;
}

.custom-style-22 {
  animation:orb1 9s linear infinite; top:-20px; left:-20px;
}

.custom-style-23 {
  animation:orb2 12s linear infinite; top:-20px; left:-20px;
}

.custom-style-24 {
  animation:orb3 15s linear infinite; top:-20px; left:-20px;
}

.custom-style-25 {
  font-family:'Orbitron',monospace; color:#8aff00; letter-spacing:.1em;
}

.custom-style-26 {
  background:rgba(138,255,0,.08); border:1px solid rgba(138,255,0,.2);
}

.custom-style-27 {
  background:rgba(190,252,37,.08); border:1px solid rgba(190,252,37,.2);
}

.custom-style-28 {
  background:rgba(34,197,94,.08); border:1px solid rgba(34,197,94,.2);
}

.custom-style-29 {
  background:rgba(255,190,0,.08); border:1px solid rgba(255,190,0,.2);
}

.custom-style-30 {
  background:rgba(34,197,94,.08); border:1px solid rgba(34,197,94,.2);
}

.custom-style-31 {
  position:relative; z-index:2;
}

.custom-style-32 {
  width:100%; padding-top:100%;
}

.custom-style-33 {
  background:rgba(138,255,0,.12); border:2px solid rgba(138,255,0,.4); box-shadow:0 0 40px rgba(138,255,0,.6);
}

.custom-style-34 {
  color:#8aff00; filter:drop-shadow(0 0 16px rgba(138,255,0,1));
}

.custom-style-35 {
  font-family:'Orbitron',monospace; color:#befc25; letter-spacing:.1em;
}

.custom-style-36 {
  font-family:'Orbitron',monospace; line-height:1.1;
}

.custom-style-37 {
  background:rgba(138,255,0,.1); border:1px solid rgba(138,255,0,.25);
}

.custom-style-38 {
  background:rgba(190,252,37,.1); border:1px solid rgba(190,252,37,.25);
}

.custom-style-39 {
  background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.25);
}

.custom-style-40 {
  background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.25);
}

.custom-style-41 {
  background:linear-gradient(135deg,rgba(138,255,0,.05),rgba(190,252,37,.04));
}

.custom-style-42 {
  max-height:380px; border:1px solid rgba(138,255,0,.15); box-shadow:0 0 80px rgba(138,255,0,.15);
}

.custom-style-43 {
  background:linear-gradient(135deg,rgba(138,255,0,.03),rgba(190,252,37,.03));
}

.custom-style-44 {
  opacity:.05;
}

.custom-style-45 {
  border-color:rgba(255,190,0,.35);
}

.custom-style-46 {
  background:linear-gradient(135deg,#ffd700,#ff8c00);
}

.custom-style-47 {
  background:linear-gradient(90deg,rgba(138,255,0,.5),rgba(190,252,37,.5));
}

.custom-style-48 {
  background:rgba(138,255,0,.05); color:#8aff00;
}

.custom-style-49 {
  background:rgba(190,252,37,.05); color:#befc25;
}

.custom-style-50 {
  background:rgba(34,197,94,.05); color:#ff006e;
}

.custom-style-51 {
  background:linear-gradient(135deg,rgba(138,255,0,.05),rgba(190,252,37,.06),rgba(34,197,94,.04)); border:1px solid rgba(138,255,0,.15);
}

.custom-style-52 {
  background:linear-gradient(90deg,transparent,rgba(138,255,0,.3),rgba(190,252,37,.3),transparent);
}

.custom-style-53 {
  background:linear-gradient(135deg,#25d366,#128c7e); box-shadow:0 0 35px rgba(37,211,102,.55);
}

/* ─── CHANNEL CARDS BACKGROUND POSTERS ─── */
.chan-card-netflix {
  background-image: linear-gradient(rgba(3, 5, 22, 0.3), rgba(3, 5, 22, 0.3)), url('../images/netflix_poster.png');
  background-size: cover;
  background-position: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.chan-card-netflix:hover {
  background-image: linear-gradient(rgba(3, 5, 22, 0.1), rgba(3, 5, 22, 0.1)), url('../images/netflix_poster.png') !important;
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 15px 30px rgba(229, 9, 20, 0.25) !important;
}

.chan-card-dazn {
  background-image: linear-gradient(rgba(3, 5, 22, 0.3), rgba(3, 5, 22, 0.3)), url('../images/dazn_poster.png');
  background-size: cover;
  background-position: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.chan-card-dazn:hover {
  background-image: linear-gradient(rgba(3, 5, 22, 0.1), rgba(3, 5, 22, 0.1)), url('../images/dazn_poster.png') !important;
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 15px 30px rgba(34, 197, 94, 0.25) !important;
}

.chan-card-hbomax {
  background-image: linear-gradient(rgba(3, 5, 22, 0.3), rgba(3, 5, 22, 0.3)), url('../images/hbomax_poster.png');
  background-size: cover;
  background-position: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.chan-card-hbomax:hover {
  background-image: linear-gradient(rgba(3, 5, 22, 0.1), rgba(3, 5, 22, 0.1)), url('../images/hbomax_poster.png') !important;
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 15px 30px rgba(190, 252, 37, 0.25) !important;
}

.chan-card-disney {
  background-image: linear-gradient(rgba(3, 5, 22, 0.3), rgba(3, 5, 22, 0.3)), url('../images/disney_plus_poster.png');
  background-size: cover;
  background-position: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.chan-card-disney:hover {
  background-image: linear-gradient(rgba(3, 5, 22, 0.1), rgba(3, 5, 22, 0.1)), url('../images/disney_plus_poster.png') !important;
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 15px 30px rgba(138, 255, 0, 0.25) !important;
}

.chan-card-beinsports {
  background-image: linear-gradient(rgba(3, 5, 22, 0.3), rgba(3, 5, 22, 0.3)), url('../images/beinsports_poster.png');
  background-size: cover;
  background-position: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.chan-card-beinsports:hover {
  background-image: linear-gradient(rgba(3, 5, 22, 0.1), rgba(3, 5, 22, 0.1)), url('../images/beinsports_poster.png') !important;
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 15px 30px rgba(147, 51, 234, 0.25) !important;
}

.chan-card-ufc {
  background-image: linear-gradient(rgba(3, 5, 22, 0.3), rgba(3, 5, 22, 0.3)), url('../images/ufc_poster.png');
  background-size: cover;
  background-position: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.chan-card-ufc:hover {
  background-image: linear-gradient(rgba(3, 5, 22, 0.1), rgba(3, 5, 22, 0.1)), url('../images/ufc_poster.png') !important;
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 15px 30px rgba(239, 68, 68, 0.25) !important;
}

.chan-card-nba {
  background-image: linear-gradient(rgba(3, 5, 22, 0.3), rgba(3, 5, 22, 0.3)), url('../images/nba_poster.png');
  background-size: cover;
  background-position: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.chan-card-nba:hover {
  background-image: linear-gradient(rgba(3, 5, 22, 0.1), rgba(3, 5, 22, 0.1)), url('../images/nba_poster.png') !important;
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 15px 30px rgba(251, 146, 60, 0.25) !important;
}

.chan-card-nfl {
  background-image: linear-gradient(rgba(3, 5, 22, 0.3), rgba(3, 5, 22, 0.3)), url('../images/nfl_poster.png');
  background-size: cover;
  background-position: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.chan-card-nfl:hover {
  background-image: linear-gradient(rgba(3, 5, 22, 0.1), rgba(3, 5, 22, 0.1)), url('../images/nfl_poster.png') !important;
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 15px 30px rgba(234, 179, 8, 0.25) !important;
}

.chan-card-paramount {
  background-image: linear-gradient(rgba(3, 5, 22, 0.3), rgba(3, 5, 22, 0.3)), url('../images/paramount_plus_poster.png');
  background-size: cover;
  background-position: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.chan-card-paramount:hover {
  background-image: linear-gradient(rgba(3, 5, 22, 0.1), rgba(3, 5, 22, 0.1)), url('../images/paramount_plus_poster.png') !important;
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 15px 30px rgba(244, 114, 182, 0.25) !important;
}

.chan-card-appletv {
  background-image: linear-gradient(rgba(3, 5, 22, 0.3), rgba(3, 5, 22, 0.3)), url('../images/apple_tv_poster.png');
  background-size: cover;
  background-position: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.chan-card-appletv:hover {
  background-image: linear-gradient(rgba(3, 5, 22, 0.1), rgba(3, 5, 22, 0.1)), url('../images/apple_tv_poster.png') !important;
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 15px 30px rgba(148, 163, 184, 0.25) !important;
}

.chan-card-news {
  background-image: linear-gradient(rgba(3, 5, 22, 0.3), rgba(3, 5, 22, 0.3)), url('../images/news_poster.png');
  background-size: cover;
  background-position: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.chan-card-news:hover {
  background-image: linear-gradient(rgba(3, 5, 22, 0.1), rgba(3, 5, 22, 0.1)), url('../images/news_poster.png') !important;
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 15px 30px rgba(147, 197, 253, 0.25) !important;
}

.chan-card-kids {
  background-image: linear-gradient(rgba(3, 5, 22, 0.3), rgba(3, 5, 22, 0.3)), url('../images/kids_poster.png');
  background-size: cover;
  background-position: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.chan-card-kids:hover {
  background-image: linear-gradient(rgba(3, 5, 22, 0.1), rgba(3, 5, 22, 0.1)), url('../images/kids_poster.png') !important;
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 15px 30px rgba(253, 224, 71, 0.25) !important;
}

.chan-card-docs {
  background-image: linear-gradient(rgba(3, 5, 22, 0.3), rgba(3, 5, 22, 0.3)), url('../images/documentaries_poster.png');
  background-size: cover;
  background-position: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.chan-card-docs:hover {
  background-image: linear-gradient(rgba(3, 5, 22, 0.1), rgba(3, 5, 22, 0.1)), url('../images/documentaries_poster.png') !important;
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 15px 30px rgba(196, 181, 253, 0.25) !important;
}

.chan-card-tennis {
  background-image: linear-gradient(rgba(3, 5, 22, 0.3), rgba(3, 5, 22, 0.3)), url('../images/tennis_poster.png');
  background-size: cover;
  background-position: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.chan-card-tennis:hover {
  background-image: linear-gradient(rgba(3, 5, 22, 0.1), rgba(3, 5, 22, 0.1)), url('../images/tennis_poster.png') !important;
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 15px 30px rgba(163, 230, 53, 0.25) !important;
}

.chan-card-countries {
  background-image: linear-gradient(rgba(3, 5, 22, 0.3), rgba(3, 5, 22, 0.3)), url('../images/countries_poster.png');
  background-size: cover;
  background-position: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.chan-card-countries:hover {
  background-image: linear-gradient(rgba(3, 5, 22, 0.1), rgba(3, 5, 22, 0.1)), url('../images/countries_poster.png') !important;
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 15px 30px rgba(138, 255, 0, 0.25) !important;
}


/* ══════════════════════════════════════════════════════
   📱 ULTRA-COMPACT MOBILE VIEW ENGINE (<= 768px)
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 1. Eliminate Excessive Spacing & Section Heights */
  .chamber,
  .chamber.sep,
  section.py-24,
  section.py-28,
  section.py-32,
  section.py-20,
  section.py-16 {
    padding-top: 2.25rem !important;
    padding-bottom: 2.25rem !important;
  }

  #hero,
  section.min-h-screen {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 5rem !important;
    padding-bottom: 2rem !important;
  }

  .mb-14, .mb-16, .mb-20, .mb-12 {
    margin-bottom: 1.5rem !important;
  }

  .mb-8, .mb-10 {
    margin-bottom: 1rem !important;
  }

  /* 2. Scaled-down Media & Containers */
  .tv-frame,
  .custom-style-15 {
    max-width: 100% !important;
    margin: 0 auto !important;
    border-radius: 18px !important;
    padding: 6px !important;
  }

  /* Compact 3D Dome Container */
  #films-gallery-root {
    height: 380px !important;
    min-height: 380px !important;
  }

  #films .h-\[600px\],
  #films .h-\[700px\],
  #films .rounded-\[32px\] {
    height: 380px !important;
    border-radius: 20px !important;
  }

  /* 3. Scaled-down Headings & Typography */
  h1, .text-3xl.sm\:text-5xl {
    font-size: 1.95rem !important;
    line-height: 1.18 !important;
    letter-spacing: -0.01em !important;
  }

  h2, .text-3xl.sm\:text-4xl {
    font-size: 1.55rem !important;
    line-height: 1.25 !important;
  }

  h3, .text-lg, .text-xl {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
  }

  p {
    font-size: 0.85rem !important;
    line-height: 1.45 !important;
  }

  /* Compact Cards & Grids */
  .gcard, .feature-card, .review-card, .plan-card {
    padding: 1.15rem !important;
    border-radius: 16px !important;
  }

  .mcard-num {
    font-size: 3.5rem !important;
    right: 0 !important;
    bottom: -10px !important;
  }

  /* 4. Compact Footer */
  footer {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  footer .py-14 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  
  /* Floating UI safety */
  .toast-notification {
    bottom: 86px !important;
    left: 12px !important;
    right: auto !important;
    max-width: 280px !important;
    font-size: 0.75rem !important;
    z-index: 99 !important;
  }

  /* Disable 3D Mouse Remote Cursor on touch mobile viewports */
  #remote-cursor {
    opacity: 0 !important; pointer-events: none !important;
  }
}

@media (max-width: 480px) {
  h1, .text-3xl.sm\:text-5xl {
    font-size: 1.75rem !important;
  }

  h2, .text-3xl.sm\:text-4xl {
    font-size: 1.4rem !important;
  }

  .btn-primary, .btn-secondary, .btn-outline {
    padding: 0.75rem 1.25rem !important;
    font-size: 0.875rem !important;
  }
}