:root{
    --void: #0d0a12;
    --curtain: #18121f;
    --curtain-2: #211827;
    --gold: #e8a33d;
    --gold-bright: #ffc266;
    --velvet: #c23b4f;
    --spotlight: #fff6e0;
    --paper: #f0eae0;
    --mist: #948c9e;
    --mist-dim: #5f586b;
    --line: rgba(240,234,224,0.09);
  }

  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; }

  body{
    background:var(--void);
    color:var(--paper);
    font-family:'Plus Jakarta Sans', sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  a{ color:inherit; text-decoration:none; }
  button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

  ::selection{ background:var(--gold); color:var(--void); }

  :focus-visible{
    outline:2px solid var(--gold-bright);
    outline-offset:3px;
    border-radius:4px;
  }

  .display{ font-family:'Bebas Neue', sans-serif; letter-spacing:0.02em; }
  .mono{ font-family:'JetBrains Mono', monospace; text-transform:uppercase; letter-spacing:0.12em; }

  /* ---------- background texture: faint film grain ---------- */
  body::before{
    content:"";
    position:fixed; inset:0;
    pointer-events:none;
    z-index:9999;
    opacity:0.035;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode:overlay;
  }

  /* ---------- nav ---------- */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:1000;
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 5vw;
    transition:background .35s ease, padding .35s ease, border-color .35s ease;
    border-bottom:1px solid transparent;
  }
  .nav.solid{
    background:rgba(13,10,18,0.86);
    backdrop-filter:blur(14px);
    padding:14px 5vw;
    border-color:var(--line);
  }
  .brand{ display:flex; align-items:center; gap:10px; }
  .brand .bulb{
    width:9px; height:9px; border-radius:50%;
    background:var(--gold-bright);
    box-shadow:0 0 10px 2px rgba(232,163,61,0.7);
  }
  .brand-name{ font-size:26px; letter-spacing:0.08em; }

  .nav-links{ display:flex; align-items:center; gap:36px; }
  .nav-links a{
    font-size:13px; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--mist); transition:color .2s ease;
    position:relative; padding-bottom:4px;
  }
  .nav-links a:hover, .nav-links a.active{ color:var(--paper); }
  .nav-links a.active::after{
    content:""; position:absolute; left:0; right:0; bottom:0;
    height:2px; background:var(--gold);
  }
  .nav-right{ display:flex; align-items:center; gap:18px; }
  .icon-btn{
    width:38px; height:38px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:var(--paper); border:1px solid var(--line);
    transition:border-color .2s ease, background .2s ease;
  }
  .icon-btn:hover{ border-color:var(--gold); background:rgba(232,163,61,0.08); }
  .avatar{
    width:38px; height:38px; border-radius:50%;
    background:linear-gradient(135deg, var(--velvet), var(--gold));
    border:1px solid var(--line);
  }

  @media (max-width: 880px){
    .nav-links{ display:none; }
  }

  /* ---------- marquee bulb border (signature motif) ---------- */
  .bulb-rail{
    height:14px;
    background-image: radial-gradient(circle, var(--gold-bright) 0 2.5px, transparent 2.6px);
    background-size: 26px 14px;
    background-repeat: repeat-x;
    background-position: center;
    opacity:0.85;
  }
  .bulb-rail.pulse span{ display:none; }
  .bulb-rail-wrap{ position:relative; }
  .bulb-rail-wrap .pulse-dot{
    position:absolute; top:1px; width:5px; height:5px; border-radius:50%;
    background:var(--spotlight); box-shadow:0 0 8px 3px rgba(255,246,224,0.8);
    animation: bulbPulse 2.6s ease-in-out infinite;
  }
  @keyframes bulbPulse{
    0%, 100%{ opacity:0.25; }
    50%{ opacity:1; }
  }
  @media (prefers-reduced-motion: reduce){
    .bulb-rail-wrap .pulse-dot{ animation:none; opacity:0.9; }
  }

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex; flex-direction:column; justify-content:center;
    padding:0 5vw;
    overflow:hidden;
  }
  .hero-bg{
    position:absolute; inset:0; z-index:-2;
    background:
      radial-gradient(ellipse 60% 50% at 78% 38%, rgba(194,59,79,0.35), transparent 60%),
      radial-gradient(ellipse 50% 45% at 95% 65%, rgba(232,163,61,0.22), transparent 65%),
      linear-gradient(180deg, var(--void) 0%, #120d18 60%, var(--void) 100%);
  }
  .hero-vignette{
    position:absolute; inset:0; z-index:-1;
    background:linear-gradient(90deg, var(--void) 0%, rgba(13,10,18,0.55) 38%, transparent 62%);
  }

  .hero-content{ max-width:680px; padding-top:64px; }
  .eyebrow{
    display:flex; align-items:center; gap:10px;
    color:var(--gold); font-size:12px; margin-bottom:22px;
  }
  .eyebrow .dash{ width:24px; height:1px; background:var(--gold); }

  .hero-title{
    font-size:clamp(56px, 8.5vw, 118px);
    line-height:0.92;
    color:var(--spotlight);
    text-shadow:0 0 50px rgba(232,163,61,0.25);
  }

  .hero-meta{
    display:flex; flex-wrap:wrap; align-items:center; gap:16px;
    margin:22px 0 20px;
    font-size:12.5px; color:var(--mist);
  }
  .hero-meta .sep{ width:3px; height:3px; border-radius:50%; background:var(--mist-dim); }
  .rating-chip{
    color:var(--gold-bright); border:1px solid rgba(232,163,61,0.4);
    padding:3px 8px; border-radius:3px;
  }

  .hero-desc{
    color:var(--mist); font-size:16px; line-height:1.7;
    max-width:540px; margin-bottom:30px;
    font-weight:400;
  }

  .genre-pills{ display:flex; gap:10px; margin-bottom:34px; flex-wrap:wrap; }
  .pill{
    font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
    padding:7px 14px; border-radius:999px;
    border:1px solid var(--line); color:var(--mist);
  }

  .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:15px 28px; border-radius:4px;
    font-size:13.5px; letter-spacing:0.06em; text-transform:uppercase;
    font-weight:600;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  }
  .btn-primary{
    background:var(--gold);
    color:#1a1208;
    box-shadow:0 8px 28px -8px rgba(232,163,61,0.55);
  }
  .btn-primary:hover{ background:var(--gold-bright); transform:translateY(-2px); }
  .btn-ghost{
    border:1px solid rgba(240,234,224,0.25);
    color:var(--paper);
  }
  .btn-ghost:hover{ border-color:var(--paper); background:rgba(240,234,224,0.06); }

  .play-tri{
    width:0; height:0;
    border-top:6px solid transparent; border-bottom:6px solid transparent;
    border-left:9px solid #1a1208;
  }

  /* ---------- film-strip divider ---------- */
  .filmstrip{
    height:22px;
    display:flex; align-items:center;
    background:var(--curtain);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .filmstrip-row{
    width:100%; height:100%;
    background-image: linear-gradient(var(--void) 4px, transparent 4px), linear-gradient(var(--void) 4px, transparent 4px);
    background-size: 24px 4px;
    background-position: 0 3px, 0 15px;
    background-repeat: repeat-x;
    opacity:0.9;
  }

  /* ---------- sections / rows ---------- */
  .rows{ padding:64px 0 40px; }
  .row-section{ margin-bottom:54px; }

  .row-head{
    display:flex; align-items:baseline; justify-content:space-between;
    padding:0 5vw; margin-bottom:18px;
  }
  .row-title{ font-size:30px; color:var(--paper); }
  .row-sub{ font-size:12px; color:var(--mist-dim); margin-left:14px; }
  .row-nav{ display:flex; gap:8px; }
  .row-nav button{
    width:32px; height:32px; border-radius:50%;
    border:1px solid var(--line); color:var(--mist);
    display:flex; align-items:center; justify-content:center;
    transition:border-color .2s ease, color .2s ease;
  }
  .row-nav button:hover{ border-color:var(--gold); color:var(--gold-bright); }

  .row-track{
    display:flex; gap:18px;
    overflow-x:auto;
    padding:6px 5vw 18px;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  .row-track::-webkit-scrollbar{ display:none; }

  .card{
    flex:0 0 auto;
    width:188px;
    scroll-snap-align:start;
    cursor:pointer;
  }
  .poster{
    width:188px; height:272px;
    border-radius:6px;
    position:relative;
    overflow:hidden;
    border:1px solid var(--line);
    transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .3s ease;
    display:flex; align-items:flex-end;
  }
  .card:hover .poster{
    transform:translateY(-8px) scale(1.035);
    border-color:rgba(232,163,61,0.55);
    box-shadow:0 22px 40px -14px rgba(0,0,0,0.6), 0 0 0 1px rgba(232,163,61,0.15);
  }
  .poster-grain{
    position:absolute; inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity:0.12; mix-blend-mode:overlay;
  }
  .poster-shade{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.78) 100%);
  }
  .poster-num{
    position:absolute; top:10px; left:10px;
    font-family:'Bebas Neue', sans-serif;
    font-size:13px; color:rgba(255,255,255,0.55);
  }
  .poster-rating{
    position:absolute; top:10px; right:10px;
    font-size:10px; color:var(--gold-bright);
    background:rgba(13,10,18,0.55); border:1px solid rgba(232,163,61,0.4);
    padding:2px 6px; border-radius:3px;
  }
  .poster-body{ position:relative; padding:14px; width:100%; }
  .poster-title{
    font-family:'Bebas Neue', sans-serif;
    font-size:21px; line-height:1.05; color:var(--spotlight);
    letter-spacing:0.01em;
  }
  .poster-tag{ font-size:10px; color:var(--mist); margin-top:4px; }

  .card-meta{
    display:flex; justify-content:space-between;
    margin-top:8px; padding:0 1px;
    font-size:10.5px; color:var(--mist-dim);
  }

  /* ---------- belt of search / quote ---------- */
  .belt{
    margin:10px 5vw 64px;
    border:1px solid var(--line);
    border-radius:10px;
    padding:46px 5vw;
    background:
      radial-gradient(ellipse 70% 100% at 10% 0%, rgba(194,59,79,0.14), transparent 60%),
      var(--curtain);
    position:relative;
    overflow:hidden;
  }
  .belt-eyebrow{ color:var(--gold); font-size:11.5px; margin-bottom:14px; }
  .belt-title{
    font-family:'Bebas Neue', sans-serif;
    font-size:clamp(30px, 4vw, 46px);
    max-width:600px; line-height:1.05; color:var(--paper);
    margin-bottom:26px;
  }
  .search-bar{
    display:flex; align-items:center; gap:12px;
    max-width:520px;
    background:var(--void);
    border:1px solid var(--line);
    border-radius:6px;
    padding:14px 18px;
  }
  .search-bar input{
    flex:1; background:none; border:none; color:var(--paper);
    font-family:'Plus Jakarta Sans', sans-serif; font-size:14.5px;
  }
  .search-bar input::placeholder{ color:var(--mist-dim); }
  .search-bar input:focus{ outline:none; }
  .search-go{
    color:var(--void); background:var(--gold);
    padding:9px 16px; border-radius:4px;
    font-size:12px; letter-spacing:0.06em; text-transform:uppercase; font-weight:600;
  }
  .search-go:hover{ background:var(--gold-bright); }

  /* ---------- footer ---------- */
  footer{
    padding:50px 5vw 40px;
    border-top:1px solid var(--line);
  }
  .foot-top{
    display:flex; justify-content:space-between; align-items:flex-start;
    flex-wrap:wrap; gap:30px; margin-bottom:40px;
  }
  .foot-cols{ display:flex; gap:60px; flex-wrap:wrap; }
  .foot-col h4{
    font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--mist-dim); margin-bottom:14px; font-weight:600;
  }
  .foot-col a{
    display:block; font-size:13.5px; color:var(--mist);
    margin-bottom:10px; transition:color .2s ease;
  }
  .foot-col a:hover{ color:var(--paper); }
  .foot-bottom{
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:12px;
    font-size:11.5px; color:var(--mist-dim);
    padding-top:24px; border-top:1px solid var(--line);
  }

  @media (max-width:600px){
    .hero{ padding:0 6vw; }
    .row-head, .row-track{ padding-left:6vw; padding-right:6vw; }
    .belt{ margin-left:6vw; margin-right:6vw; padding:34px 6vw; }
    .hero-desc{ font-size:14.5px; }
  }