/* Basic reset */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --red:#e50914;
  --bg:#000;
  --muted:#a9a9a9;
  --card-grad1:#23102e;
  --card-grad2:#0a0713;
}

body{font-family:Inter, "Segoe UI", Arial, sans-serif;background:var(--bg);color:#fff;line-height:1.4}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}

/* header */
.site-header{position:absolute;top:0;left:0;right:0;z-index:30;padding:18px 0}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between}
.logo{height:80px}
.header-actions{display:flex;gap:12px;align-items:center}
.lang{display:flex;align-items:center;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.08);padding:6px 10px;border-radius:6px}
.lang select{background:transparent;border:0;color:#fff;outline:none;padding-left:6px}
.btn{border:0;padding:10px 14px;border-radius:6px;cursor:pointer}
.signin{background:var(--red);color:#fff;font-weight:600}

/* hero */
.hero{position:relative;height:78vh;min-height:520px;display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;background-image:url("IN-en-20250217-TRIFECTA-perspective_c3376e06-9aff-4657-aafb-91256a597b7c_medium.jpg");background-size:cover;background-position:center;filter:brightness(.55) contrast(.95) saturate(.9)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 10%, rgba(0,0,0,.8) 100%)}
.hero-inner{position:relative;z-index:3;text-align:center;margin:0 auto;color:#fff;padding:40px 0}
.hero-inner h1{font-size:3.2rem;line-height:1.02;margin-bottom:10px;font-weight:800;letter-spacing:-0.5px}
.sub{margin:8px 0;font-weight:600;color:rgba(255,255,255,.9)}
.hint{color:rgba(255,255,255,.85);margin-bottom:18px}

/* CTA form */
.cta-form{display:flex;gap:10px;justify-content:center;align-items:center;max-width:760px;margin:0 auto}
.cta-form input{flex:1;min-width:220px;padding:14px 16px;border-radius:6px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.5);color:#fff}
.btn.primary{background:var(--red);color:white;font-weight:700;padding:12px 20px;border-radius:6px;display:inline-flex;align-items:center;gap:8px}

/* accent red line */
.accent-line{height:6px;background:linear-gradient(90deg,var(--red),#9b2d67,#6b2a9f);box-shadow:0 6px 30px rgba(100,0,100,.25)}

/* Trending */
.trending{padding:28px 0}
.trending h2{font-size:1.25rem;margin:18px 0 12px;color:#fff}
.slider-wrap{position:relative}
.slider{display:flex;gap:18px;overflow-x:auto;padding:8px 6px;scroll-behavior:smooth}
.slider::-webkit-scrollbar{height:10px}
.slider::-webkit-scrollbar-thumb{background:rgba(255,255,255,.06);border-radius:6px}
.card-wrapper {
  position: relative;
  display: inline-block;
  margin-left: 50px; /* space for number to hang outside */
}

.rank {
  position: absolute;
  bottom: 5px;
  left: -20px; /* push outside */
  font-size: 4rem;
  font-weight: 900;
  color: rgb(0, 0, 0);
  -webkit-text-stroke: 2px rgb(255, 255, 255); /* outline effect */
  z-index: 3;
}

.card.poster img {
  display: block;
  border-radius: 8px;
  width: 150px; /* adjust to your poster size */
}

/* nav arrows */
.slider-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.55);border-radius:50%;width:44px;height:44px;border:0;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:20}
.slider-nav.left{left:8px}
.slider-nav.right{right:8px}

/* reasons */
.reasons{padding:38px 0}
.reasons h2{margin-bottom:18px}
.reasons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.reason{background:linear-gradient(180deg,var(--card-grad1),var(--card-grad2));padding:20px;border-radius:14px;min-height:180px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;box-shadow:0 6px 30px rgba(0,0,0,.5)}
.reason h3{font-size:1.1rem;margin-bottom:10px}
.reason p{color:#d3ced6;opacity:.9}
.reason-icon{font-size:34px;align-self:flex-end;padding:8px;border-radius:50%;background:radial-gradient( circle at 30% 30%, rgba(255,80,200,.2), rgba(0,0,0,0));box-shadow:0 8px 28px rgba(255,80,200,.08);color:#ff6be3}

/* FAQ */
.faq{padding:28px 0}
.faq h2{margin-bottom:16px}
.faq-list{max-width:1400px}
.faq-item{margin-bottom:8px;border-radius:4px;overflow:hidden}
.faq-q{width:100%;text-align:left;padding:22px;background:#333;border:0;color:#fff;display:flex;align-items:center;justify-content:space-between;font-size:18px;cursor:pointer}
.faq-a{max-height:0;overflow:hidden;background:#2b2b2b;padding:0 18px;transition:max-height .35s ease,padding .35s ease}
.faq-item.open .faq-a{max-height:400px;padding:18px}

/* small cta */
.small-cta{padding:20px}

/* footer */
.site-footer{padding:36px 0 80px;color:var(--muted)}
.footer-links{display:flex;flex-wrap:wrap;gap:100px;margin:18px 0 22px}
.footer-links ul{list-style:none;padding:0;min-width:160px}
.footer-links a{color:var(--muted);text-decoration:underline}

/* footer bottom */
.footer-bottom{gap:18px;align-items:center;flex-wrap:wrap}
.footer-bottom select{background:transparent;border:1px solid rgba(255,255,255,.06);color:#fff;padding:8px;border-radius:6px}
.region{color:var(--muted)}
.recap{color:var(--muted);max-width:700px}

/* Responsiveness */
@media (max-width:900px){
  .hero-inner h1{font-size:2.2rem}
  .rank{font-size:64px;left:-8px;bottom:-10px}
  .poster{flex:0 0 140px}
  .slider-nav{width:36px;height:36px}
}
@media (max-width:560px){
  .hero{height:70vh;min-height:420px}
  .hero-inner h1{font-size:1.6rem}
  .poster{flex:0 0 130px}
  .rank{font-size:46px;left:-6px;bottom:-8px}
  .wrap{padding:0 12px}
}
.curved-band {
  width: 100%;
  height: 80px; /* adjust height */
  overflow: hidden;
  background: transparent;
}

.curved-band svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* Global fluid font scaling */
html {
  font-size: clamp(14px, 1.2vw, 18px);
}

/* Hero text scales smoothly */
.hero-inner h1 {
  font-size: clamp(1.6rem, 4vw, 3.2rem);
}
.sub {
  font-size: clamp(0.9rem, 1.5vw, 1.2rem);
}
.hint {
  font-size: clamp(0.8rem, 1.3vw, 1rem);
}

/* Slider posters adapt width */
.poster {
  flex: 0 0 clamp(120px, 22vw, 170px);
}

/* Curved band height scales */
.curved-band {
  height: clamp(50px, 10vw, 80px);
}

/* Tablet adjustments */
@media (max-width: 900px) {
  .wrap { padding: 0 16px; }
  .reason { min-height: auto; padding: 16px; }
  .footer-links { gap: 40px; }
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .wrap { padding: 0 12px; }
  .header-actions { gap: 8px; }
  .logo { height: 50px; }
  
  .cta-form {
    flex-direction: column;
    gap: 8px;
  }
  .cta-form input, 
  .cta-form .btn {
    width: 100%;
  }

  .reasons-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .footer-links {
    flex-direction: column;
    gap: 24px;
  }
  .footer-links ul {
    min-width: auto;
  }
  
  /* Smaller poster size on narrow devices */
  .poster {
    flex: 0 0 45%;
  }
}

/* Very small phones (e.g., 360px) */
@media (max-width: 400px) {
  .hero-inner h1 {
    font-size: 1.4rem;
  }
  .poster {
    flex: 0 0 70%;
  }
}