*{box-sizing:border-box}
body{margin:0;background:#090b10;color:white;font-family:Arial,sans-serif}
header{height:72px;display:flex;align-items:center;gap:36px;padding:0 5%;background:#090b10}
.logo{font-size:30px;font-weight:900;color:#39bdf8}
nav{display:flex;gap:26px}
nav a{color:white;text-decoration:none;font-size:15px}
.hero{min-height:520px;display:flex;align-items:center;padding:5%;background:linear-gradient(90deg,#090b10 0%,rgba(9,11,16,.9) 35%,rgba(9,11,16,.1) 100%),linear-gradient(0deg,#090b10,transparent 40%),#24364b}
.hero-content{max-width:520px}
.hero h1{font-size:58px;margin:0 0 18px}
.hero p{font-size:18px;line-height:1.6;color:#e1e5eb}
.buttons{display:flex;gap:12px;margin-top:25px}
.btn{padding:14px 24px;border-radius:5px;background:white;color:#111;text-decoration:none;font-weight:bold}
.btn.secondary{background:#454a53;color:white}
.section{padding:20px 5%}
.section h2{font-size:23px}
.posters{display:flex;gap:15px;overflow-x:auto;padding-bottom:18px}
.poster{flex:0 0 220px;height:125px;background:#24364b;border-radius:6px;padding:15px;display:flex;align-items:end;font-weight:bold}
@media(max-width:650px){.hero h1{font-size:38px}.hero{min-height:430px}header{gap:15px}nav{gap:12px}}

.featured-navigation{display:flex;gap:12px;margin-top:30px}
.featured-dot{width:12px;height:12px;border:0;border-radius:50%;background:#777;cursor:pointer;padding:0}
.featured-dot.active{background:#39bdf8;transform:scale(1.2)}
.featured-dot:hover{background:white}

/* Centre featured navigation across the full banner */
.hero{position:relative}
.featured-navigation{
  position:absolute;
  left:50%;
  bottom:25px;
  transform:translateX(-50%);
  margin:0;
  justify-content:center;
  width:max-content;
  z-index:5;
}