/* =====================================
   CINEFLEX BUILD 24 - PREMIUM HOMEPAGE
===================================== */
:root{
  --cf-red:#e50914;
  --cf-red2:#ff2b35;
  --cf-gold:#ffd36a;
  --cf-card:#141414;
  --cf-soft:rgba(255,255,255,.08);
}

.navbar{
  background:linear-gradient(180deg,rgba(0,0,0,.92),rgba(0,0,0,.22),transparent)!important;
}
.navbar.scrolled{
  background:rgba(0,0,0,.88)!important;
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.logo{letter-spacing:2px;text-shadow:0 0 28px rgba(229,9,20,.7)}

.banner{
  min-height:82vh!important;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background-size:cover!important;
  background-position:center!important;
  transition:background-image .65s ease, filter .25s ease;
}
.banner::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 80% 25%,rgba(229,9,20,.28),transparent 35%),
    linear-gradient(90deg,rgba(0,0,0,.96) 0%,rgba(0,0,0,.72) 34%,rgba(0,0,0,.22) 62%,rgba(0,0,0,.76) 100%);
  z-index:-1;
}
.banner::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-1px;height:32%;
  background:linear-gradient(0deg,#050505 0%,rgba(5,5,5,.72) 42%,transparent 100%);
  pointer-events:none;
}
.banner-content{
  max-width:720px!important;
  padding-top:13vh!important;
  animation:cfHeroIn .55s ease both;
}
@keyframes cfHeroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.hero-kicker{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;
  background:rgba(229,9,20,.18);border:1px solid rgba(229,9,20,.34);
  color:#fff;font-weight:900;font-size:.78rem;text-transform:uppercase;letter-spacing:.8px;
  box-shadow:0 0 24px rgba(229,9,20,.18);
}
#banner-title{
  font-size:clamp(2.45rem,8vw,5.9rem)!important;
  line-height:.92!important;
  letter-spacing:-.06em!important;
  margin:18px 0 12px!important;
  max-width:850px;
  text-shadow:0 18px 50px rgba(0,0,0,.9);
}
#banner-desc{
  max-width:640px!important;
  color:rgba(255,255,255,.86)!important;
  font-size:clamp(.95rem,2.4vw,1.12rem)!important;
  line-height:1.55!important;
}
.hero-meta-strip{
  display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 24px;
}
.hero-meta-strip span,.cf-hero-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 10px;border-radius:999px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);
  color:#f5f5f5;font-size:.8rem;font-weight:800;backdrop-filter:blur(10px);
}
.banner-buttons{gap:12px!important;flex-wrap:wrap}
.banner-buttons button{
  border-radius:10px!important;
  padding:13px 22px!important;
  font-size:.98rem!important;
  box-shadow:0 12px 34px rgba(0,0,0,.36);
  transform:translateZ(0);
}
.play-btn{background:#fff!important;color:#000!important}
.play-btn:hover{transform:translateY(-2px) scale(1.02);background:#f2f2f2!important}
.info-btn,.hero-more-btn{background:rgba(120,120,120,.42)!important;color:#fff!important;backdrop-filter:blur(12px)}
.info-btn:hover{background:rgba(255,255,255,.2)!important;transform:translateY(-2px)}

.cf-hero-side{
  position:absolute;right:4vw;bottom:18vh;width:min(330px,34vw);z-index:2;
  display:flex;flex-direction:column;gap:12px;
}
.cf-hero-preview{
  padding:16px;border-radius:22px;background:rgba(15,15,15,.62);border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(18px);box-shadow:0 24px 80px rgba(0,0,0,.45);
}
.cf-hero-preview strong{display:block;color:#fff;font-size:1rem;margin-bottom:6px}
.cf-hero-preview p{margin:0;color:#bbb;font-size:.82rem;line-height:1.4}
.cf-hero-dots{display:flex;gap:7px;padding:0 4px}
.cf-hero-dot{height:4px;flex:1;border-radius:999px;background:rgba(255,255,255,.18);overflow:hidden;cursor:pointer}
.cf-hero-dot span{display:block;height:100%;width:0;background:var(--cf-red);border-radius:inherit}
.cf-hero-dot.active span{animation:cfHeroProgress 10s linear forwards}
@keyframes cfHeroProgress{to{width:100%}}

.cf-studio-panel{
  margin:-84px auto 22px!important;
  width:min(1180px,calc(100% - 28px));
  display:grid!important;grid-template-columns:1.4fr 1fr 1fr;gap:14px;position:relative;z-index:5;
}
.studio-card{
  min-height:112px;border-radius:22px;padding:18px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(18px);
  box-shadow:0 18px 60px rgba(0,0,0,.35);
}
.studio-main{background:linear-gradient(135deg,rgba(229,9,20,.28),rgba(255,255,255,.055))!important}
.studio-label{color:var(--cf-gold);font-size:.72rem;text-transform:uppercase;font-weight:900;letter-spacing:1px}
.studio-card strong{display:block;color:white;font-size:1.1rem;margin:7px 0}
.studio-card p{margin:0;color:#bbb;font-size:.83rem;line-height:1.4}
.studio-card i{color:var(--cf-red);font-size:1.3rem;margin-bottom:8px}

.content{position:relative;z-index:4;padding-top:8px!important}
.row{margin-top:28px!important}
.row h2{
  display:flex;align-items:center;gap:10px;
  font-size:clamp(1.12rem,4vw,1.55rem)!important;
  letter-spacing:-.02em;margin-bottom:14px!important;
}
.row h2::before{content:"";width:5px;height:24px;border-radius:999px;background:linear-gradient(180deg,var(--cf-red),#8b0008);box-shadow:0 0 18px rgba(229,9,20,.75)}
.scroller{scroll-padding-left:18px;gap:12px!important}
.card,.search-card,.modern-grid-item,.netflix-item-container{
  transition:transform .22s ease, filter .22s ease, box-shadow .22s ease!important;
}
.card{border-radius:12px!important;overflow:hidden;background:#111;box-shadow:0 10px 24px rgba(0,0,0,.26)}
.card img{border-radius:12px!important;display:block;background:#171717}
.card:hover,.card:focus-within{transform:scale(1.075) translateY(-7px)!important;z-index:9;box-shadow:0 22px 50px rgba(0,0,0,.62)}
.card::after{
  content:"▶";position:absolute;left:10px;bottom:10px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.95);color:#000;font-size:.75rem;font-weight:900;
  opacity:0;transform:translateY(6px);transition:.2s ease;pointer-events:none;
}
.card:hover::after{opacity:1;transform:translateY(0)}

.cf-top10-row .scroller{gap:2px!important;align-items:flex-end}
.cf-top10-card{display:flex;align-items:flex-end;min-width:220px;position:relative;cursor:pointer;padding-left:58px}
.cf-top10-number{
  position:absolute;left:0;bottom:-10px;font-size:8.2rem;line-height:.78;font-weight:1000;letter-spacing:-.09em;
  color:#050505;-webkit-text-stroke:2px rgba(255,255,255,.55);text-shadow:0 10px 28px rgba(0,0,0,.8);z-index:0;
}
.cf-top10-card img{position:relative;z-index:2;width:132px;height:198px;object-fit:cover;border-radius:10px;box-shadow:0 16px 45px rgba(0,0,0,.55);transition:.22s ease}
.cf-top10-card:hover img{transform:translateY(-8px) scale(1.05)}

.cf-section-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 18px 10px}
.cf-section-tools h2{margin:0!important}
.cf-scroll-controls{display:flex;gap:8px}
.cf-scroll-btn{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);color:white;cursor:pointer;display:grid;place-items:center}
.cf-scroll-btn:hover{background:rgba(229,9,20,.75)}

.cf-quick-rail{
  display:flex;gap:10px;overflow-x:auto;padding:2px 18px 8px;margin:0 0 6px;scrollbar-width:none;
}
.cf-quick-rail::-webkit-scrollbar{display:none}
.cf-quick-pill{white-space:nowrap;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.07);color:#fff;border-radius:999px;padding:10px 14px;font-weight:800;font-size:.82rem;cursor:pointer;backdrop-filter:blur(12px)}
.cf-quick-pill:hover{background:rgba(229,9,20,.25);border-color:rgba(229,9,20,.45)}

@media (max-width:860px){
  .banner{min-height:72vh!important;background-position:center top!important}
  .banner-content{padding:110px 18px 150px!important}
  #banner-title{font-size:clamp(2.3rem,13vw,4.15rem)!important}
  .cf-hero-side{display:none}
  .cf-studio-panel{grid-template-columns:1fr;margin-top:-70px!important;gap:10px}
  .studio-card{min-height:auto;padding:15px!important}
  .cf-top10-card{min-width:172px;padding-left:42px}
  .cf-top10-number{font-size:6rem;-webkit-text-stroke:1.4px rgba(255,255,255,.55)}
  .cf-top10-card img{width:102px;height:153px}
  .row{margin-top:24px!important}
  .scroller{gap:9px!important}
  .card:hover{transform:scale(1.035) translateY(-3px)!important}
}