@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Montserrat:wght@600;700;800;900&display=swap");

:root{
  --ui-bg:#041033;
  --ui-bg-soft:#081a4f;
  --ui-panel:#071642;
  --ui-panel-2:#0b1f5d;
  --ui-line:rgba(115,142,219,.18);
  --ui-text:#f5f8ff;
  --ui-muted:#8fa6df;
  --ui-accent:#21c7de;
  --ui-accent-2:#2ea7ff;
  --ui-chip:#132965;
}
html{background:linear-gradient(180deg,#071338 0%,#03102f 46%,#02102b 100%)}
body{
  font-family:"Inter",system-ui,sans-serif !important;
  color:var(--ui-text) !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(54,121,255,.18), transparent 32%),
    radial-gradient(circle at 85% 10%, rgba(33,199,222,.14), transparent 28%),
    linear-gradient(180deg,#071338 0%,#03102f 46%,#02102b 100%) !important;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(6,17,49,.08),rgba(6,17,49,.25));
}
body,button,input,select,textarea,a,span,p,div{font-family:"Inter",system-ui,sans-serif}
h1,h2,h3,h4,h5,h6,nav a,header a,button,[class*="font-black"],[class*="font-bold uppercase"]{
  font-family:"Montserrat",system-ui,sans-serif !important;
  letter-spacing:-.02em;
}
.text-red-600,.text-red-500,.hover\:text-red-500:hover,.group-hover\:text-red-500:hover,.group-hover\:text-red-600:hover{color:var(--ui-accent) !important}
.bg-red-600,.bg-red-500,.hover\:bg-red-600:hover,.hover\:bg-red-500:hover{background:linear-gradient(135deg,var(--ui-accent),var(--ui-accent-2)) !important;color:#fff !important}
.border-red-600,.focus\:ring-red-600\/50:focus,.ring-red-600\/50{border-color:var(--ui-accent) !important;--tw-ring-color:rgba(33,199,222,.34) !important}
.from-red-600,.via-red-600,.to-red-600{--tw-gradient-from:var(--ui-accent) var(--tw-gradient-from-position) !important;--tw-gradient-to:rgba(46,167,255,0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to) !important}
.text-gray-500{color:#8ca2d6 !important}
.text-gray-400{color:#aec0ee !important}
.text-gray-300{color:#d8e2ff !important}
.bg-white\/5{background:rgba(255,255,255,.05) !important}
.border-white\/5{border-color:rgba(126,154,230,.12) !important}
.border-white\/10{border-color:rgba(126,154,230,.16) !important}

header.fixed.top-0.left-0.right-0{
  top:22px !important;left:28px !important;right:28px !important;width:auto !important;
  height:74px !important;padding:0 22px !important;
  background:rgba(10,24,67,.72) !important;
  border:1px solid rgba(113,143,219,.18) !important;
  border-radius:30px !important;
  box-shadow:0 12px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(18px) saturate(145%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(145%) !important;
}
header.fixed.top-0.left-0.right-0 .text-red-600{color:var(--ui-accent) !important}
header.fixed.top-0.left-0.right-0 > .hidden.lg\:flex.lg\:flex-1.items-center,
header.fixed.top-0.left-0.right-0 > .flex-1.lg\:hidden{flex:0 0 auto !important;min-width:240px}
header.fixed.top-0.left-0.right-0 nav.hidden.lg\:flex.items-center.gap-2{flex:1 !important;justify-content:center !important;gap:8px !important}
header.fixed.top-0.left-0.right-0 nav a{
  min-height:44px;border-radius:999px;padding:0 18px !important;
  color:#dbe5ff !important;background:transparent !important;
}
header.fixed.top-0.left-0.right-0 nav a:hover,
header.fixed.top-0.left-0.right-0 nav a[aria-current="page"]{
  color:#fff !important;background:rgba(255,255,255,.04) !important;
}
header.fixed.top-0.left-0.right-0 nav a span.absolute{bottom:4px !important;height:6px !important;background:linear-gradient(90deg,var(--ui-accent),var(--ui-accent-2)) !important;box-shadow:0 0 18px rgba(33,199,222,.45) !important}
header.fixed.top-0.left-0.right-0 a.group .w-8.h-8{
  width:48px !important;height:48px !important;padding:10px;border-radius:14px;
  background:linear-gradient(135deg,var(--ui-accent),#0db4c7) !important;color:#052247 !important;
  box-shadow:0 10px 24px rgba(33,199,222,.25);
}
header.fixed.top-0.left-0.right-0 a.group span.text-2xl,
header.fixed.top-0.left-0.right-0 a.group span.text-xl{
  font-size:2rem !important;font-weight:900 !important;letter-spacing:-.06em !important;color:var(--ui-accent) !important;
}

footer{background:linear-gradient(180deg,rgba(2,10,33,.72),rgba(2,10,33,.95)) !important;border-top:1px solid rgba(126,154,230,.12) !important}
footer a:hover,footer .hover\:text-red-500:hover{color:var(--ui-accent) !important}

[class*="animate-fadeIn"]{animation-duration:.35s !important}

/* home hero */
[class*="h-[70vh]"], [class*="min-h-screen"] [class*="h-[70vh]"]{min-height:690px !important;height:78vh !important}
[class*="absolute inset-0 bg-gradient-to-t from-[#141414]"]{background:linear-gradient(180deg,rgba(6,19,52,.18) 0%, rgba(4,15,47,.32) 48%, rgba(2,12,38,.98) 100%) !important}
[class*="absolute inset-0 bg-gradient-to-r from-[#141414]/80"]{background:linear-gradient(90deg,rgba(4,17,51,.92) 0%, rgba(4,17,51,.54) 34%, rgba(4,17,51,0) 62%) !important}
[class*="absolute bottom-12 md:bottom-24 left-0 right-0 z-20 px-4 md:px-12"]{bottom:82px !important}
[class*="Trending Now"]{font-size:11px !important}
[class*="text-3xl md:text-7xl font-black"]{font-size:clamp(56px,6vw,82px) !important;line-height:.95 !important;letter-spacing:-.05em !important}
[class*="line-clamp-3 font-medium leading-relaxed"]{max-width:920px !important;font-size:18px !important;line-height:1.7 !important;color:#b8c7ef !important}
button[class*="rounded-full"][class*="WATCH NOW"],
button.bg-red-600.hover\:bg-red-700,
button[class*="bg-red-600 hover:bg-red-700"]{
  border-radius:999px !important;padding:16px 34px !important;box-shadow:0 16px 36px rgba(33,199,222,.24) !important;
}
button[class*="bg-white/10"],button[class*="bg-white text-black"]{border-radius:999px !important}

/* content overlap and panels */
.max-w-7xl.mx-auto.px-4.md\:px-12.space-y-16.my-20{margin-top:-72px !important;position:relative;z-index:5}
[class*="rounded-3xl bg-gradient-to-b from-[#111] to-black"],
[class*="rounded-3xl bg-gradient-to-br from-[#111] via-[#0a0a0a] to-black"],
[class*="rounded-3xl bg-gradient-to-br from-[#111] via-[#0d0d0d] to-black"]{
  background:linear-gradient(180deg,rgba(9,23,66,.96),rgba(5,16,48,.96)) !important;
  border:1px solid rgba(126,154,230,.14) !important;
  box-shadow:0 18px 44px rgba(0,0,0,.28) !important;
}
[class*="inline-flex items-center gap-2 px-4 py-1.5 rounded-full"],
[class*="inline-flex items-center justify-center w-12 h-12 rounded-full"]{
  background:rgba(21,41,95,.7) !important;border-color:rgba(126,154,230,.14) !important;color:var(--ui-accent) !important;
}
[class*="text-3xl md:text-5xl font-black"],
[class*="text-3xl md:text-4xl font-black"],
[class*="text-2xl md:text-4xl font-black"]{letter-spacing:-.04em !important}

/* card grid */
[class*="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5"],
[class*="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6"]{gap:28px 22px !important}
[class*="block group relative fade-in w-full"] [class*="aspect-[2/3]"]{
  border-radius:18px !important;overflow:hidden !important;border:1px solid rgba(126,154,230,.14) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.22) !important;background:#09173f !important;
}
[class*="block group relative fade-in w-full"] h3{font-size:15px !important;font-weight:800 !important;color:#eef3ff !important}
[class*="block group relative fade-in w-full"] p.text-\[10px\]{color:#88a0d8 !important}
[class*="bg-yellow-500 text-black"]{background:#f2c62b !important;border-radius:999px !important;padding:4px 8px !important;font-size:11px !important}

/* movie / tv listing page */
[class*="px-4 py-6 md:px-12 animate-fadeIn pb-20 pt-24"]{padding-top:128px !important}
[class*="text-4xl md:text-5xl font-black uppercase tracking-tighter"]{font-size:clamp(42px,4vw,60px) !important}
form, [class*="flex flex-wrap gap-3"], [class*="grid gap-3 md:grid-cols"]{gap:14px !important}
input[type="text"], input[type="search"], select{
  background:rgba(10,24,67,.82) !important;border:1px solid rgba(126,154,230,.16) !important;border-radius:16px !important;color:#edf2ff !important;
}
button, .rounded-2xl{border-radius:18px !important}

@media (max-width:1023px){
  header.fixed.top-0.left-0.right-0{top:14px !important;left:14px !important;right:14px !important;height:66px !important;border-radius:22px !important}
  header.fixed.top-0.left-0.right-0 a.group .w-8.h-8{width:40px !important;height:40px !important;padding:8px}
  header.fixed.top-0.left-0.right-0 a.group span.text-xl{font-size:1.5rem !important}
  .max-w-7xl.mx-auto.px-4.md\:px-12.space-y-16.my-20{margin-top:-34px !important}
}