/* ---------- Root & Resets ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
:root{
  --bg:#0b0f17;
  --panel:#111826;
  --muted:#7c8aa5;
  --text:#eef2f8;
  --brand:#5eead4;
  --accent:#60a5fa;
  --card:#0f1624;
  --chip:#1b2435;
  --ring: rgba(94,234,212,.35);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;
}
body{
  margin:0;
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  color: var(--text);
  background: radial-gradient(1200px 600px at 10% -10%, rgba(96,165,250,.25), transparent 60%),
              radial-gradient(800px 500px at 110% 10%, rgba(94,234,212,.25), transparent 60%),
              var(--bg);
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.container{ width:min(1100px, 92%); margin-inline:auto; }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.skip-link{
  position:absolute; left:0; top:-40px; background:var(--brand); color:#042; padding:.5rem .75rem; border-radius:.5rem; transition: top .2s;
}
.skip-link:focus{ top:.5rem; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(8px);
  background: color-mix(in sRGB, var(--bg), transparent 25%);
  border-bottom: 1px solid color-mix(in sRGB, var(--panel), transparent 40%);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:.8rem 0; }

.brand{ display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.2px; }
.brand-mark{ font-size:1.35rem; }
.brand-name{ font-size:1.15rem; }

.nav-list{ list-style:none; display:flex; gap:1rem; padding:0; margin:0; }
.nav-list a{ padding:.45rem .7rem; border-radius:.6rem; transition: background .2s, color .2s; }
.nav-list a:hover{ background: var(--panel); color: white; }
.nav-toggle{ display:none; border:0; background:transparent; font-size:1.5rem; color:var(--text); }

/* ---------- Hero ---------- */
.hero{ padding: clamp(2rem, 6vw, 5rem) 0; }
.hero-inner{ display:grid; grid-template-columns: 1.2fr .8fr; gap:2rem; align-items:center; }
.hero-copy h1{ font-size: clamp(1.8rem, 3.5vw, 3rem); margin:.2rem 0 .6rem; }
.hero-copy p{ color: var(--muted); max-width: 55ch; }

.search{ margin-top:1rem; display:flex; gap:.6rem; }
.search input{
  flex:1; padding:.9rem 1rem; border-radius:.8rem; border:1px solid color-mix(in sRGB, var(--panel), transparent 40%);
  background: var(--panel); color:var(--text);
}
.search input::placeholder{ color: color-mix(in sRGB, var(--muted), transparent 10%); }
.search button{
  padding:.9rem 1rem; border-radius:.8rem; border:0; cursor:pointer; font-weight:700;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  color:#041316; box-shadow: var(--shadow);
}

.hero-poster{
  aspect-ratio: 3/4;
  border-radius: var(--radius);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(96,165,250,.35), transparent 55%),
    radial-gradient(100% 80% at 50% 100%, rgba(94,234,212,.35), transparent 55%),
    linear-gradient(180deg, #1a2234, #0f1624);
  display:grid; place-items:center;
  box-shadow: var(--shadow);
}
.poster-shape{
  width:72%; aspect-ratio: 2/3; border-radius:12px;
  display:grid; place-items:center; font-weight:900; font-size:clamp(1.2rem, 2.6vw, 2.2rem);
  background:
    conic-gradient(from 0deg, rgba(255,255,255,.15), rgba(255,255,255,0) 45% 55%, rgba(255,255,255,.15)),
    linear-gradient(180deg, #222b3d, #0f1624);
  border: 1px solid rgba(255,255,255,.06);
  letter-spacing:.08em;
}

/* ---------- Sections ---------- */
.section{ padding: clamp(2rem, 6vw, 4rem) 0; }
.section.alt{ background: linear-gradient(180deg, transparent, rgba(255,255,255,.03)); }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.2rem; }
.section-head h2{ margin:0; font-size: clamp(1.25rem, 2.4vw, 2rem); }
.section-head .sub{ color:var(--muted); }

.link{ color: var(--brand); font-weight:700; }

/* ---------- Cards Grid ---------- */
.grid.cards{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap:1rem; }
.card{ background: var(--card); border:1px solid rgba(255,255,255,.06); border-radius: var(--radius); overflow:hidden; transition: transform .2s, box-shadow .2s; }
.card:hover{ transform: translateY(-3px); box-shadow: var(--shadow); }
.card-media{
  aspect-ratio: 2/3;
  background:
    radial-gradient(100% 60% at 50% 0%, rgba(96,165,250,.25), transparent 60%),
    radial-gradient(120% 60% at 50% 100%, rgba(94,234,212,.2), transparent 60%),
    linear-gradient(135deg, #1b2234, #0f1624);
  position:relative;
}
.rating{
  position:absolute; top:.6rem; right:.6rem;
  background: rgba(0,0,0,.55); color:#fff; font-weight:800; font-size:.9rem;
  padding:.3rem .5rem; border-radius:.6rem; border:1px solid rgba(255,255,255,.1);
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
}
.card-body{ padding:.8rem; }
.card-title{ margin:.1rem 0 .4rem; font-size:1rem; }
.tags{ display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; padding:0; margin:0; }
.tags li{ padding:.25rem .5rem; background: var(--chip); border:1px solid rgba(255,255,255,.06); border-radius:.6rem; color: var(--muted); font-size:.8rem; }

/* ---------- Scroll Rail ---------- */
.rail{
  display:grid; grid-auto-flow:column; grid-auto-columns: 70%;
  gap:1rem; overflow-x:auto; scroll-snap-type: x mandatory; padding-bottom:.4rem;
}
.rail-card{ background: var(--card); border:1px solid rgba(255,255,255,.06); border-radius: var(--radius); overflow:hidden; scroll-snap-align:center; }
.rail-media{
  aspect-ratio: 16/9;
  background:
    radial-gradient(100% 70% at 50% 0%, rgba(96,165,250,.25), transparent 55%),
    linear-gradient(135deg, #1b2234, #0f1624);
}
.rail-body{ padding: .9rem; }
.rail-body h3{ margin:.1rem 0 .3rem; }
.rail-body p{ margin:0; color: var(--muted); }

/* ---------- Chips ---------- */
.grid.chips{ display:grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap:.7rem; }
.chip{
  text-align:center; padding:.65rem .8rem; background: var(--chip);
  border-radius:.8rem; border:1px solid rgba(255,255,255,.06);
  font-weight:700; color: var(--text); transition: outline-color .15s, background .15s;
}
.chip:hover{ outline: 3px solid var(--ring); background: color-mix(in sRGB, var(--chip), white 2%); }

/* ---------- Footer ---------- */
.site-footer{ border-top: 1px solid rgba(255,255,255,.08); }
.footer-inner{ display:grid; grid-template-columns: 1.3fr .7fr; gap:2rem; padding: 2rem 0; align-items:center; }
.footer-brand{ margin:0 0 .3rem; }
.newsletter label{ display:block; margin-bottom:.3rem; color: var(--muted); }
.newsletter .row{ display:flex; gap:.6rem; }
.newsletter input{
  flex:1; padding:.8rem 1rem; border-radius:.8rem; border:1px solid rgba(255,255,255,.08);
  background: var(--panel); color: var(--text);
}
.newsletter button{
  padding:.8rem 1rem; border-radius:.8rem; border:0; cursor:pointer; font-weight:800;
  background: linear-gradient(135deg, var(--brand), var(--accent)); color:#041316;
}
.legal{ padding: 1rem 0 2rem; color: var(--muted); font-size:.9rem; }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-poster{ order:-1; }
  .nav-toggle{ display:inline-grid; place-items:center; }
  .nav-list{ display:none; }
}
@media (max-width: 600px){
  .rail{ grid-auto-columns: 86%; }
  .footer-inner{ grid-template-columns: 1fr; }
}

/* Optional progressive enhancement: show menu when JS adds a class .show
   Keeping pure CSS by default; the site works perfectly without it. */
.nav.show .nav-list{ display:flex; flex-wrap:wrap; gap:.5rem; padding-top:.5rem; }