:root{
  --bg:#141414;
  --red:#e50914;
  --muted:#8b8b8b;
  --white:#ffffff;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family: 'Roboto', Arial, Helvetica, sans-serif;background:var(--bg);color:var(--white);line-height:1.3}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

.replica-header{border-bottom:1px solid rgba(255,255,255,0.03);padding:18px 0;position:sticky;top:0;background:linear-gradient(180deg, rgba(20,20,20,0.9), rgba(20,20,20,0.75));z-index:20}
.replica-header .container{display:flex;align-items:center;gap:20px}
.brand img{height:34px}
.main-nav ul{display:flex;gap:18px;list-style:none}
.main-nav a{color:var(--white);text-decoration:none;font-weight:500;opacity:0.95}
.main-nav a:hover{color:var(--red)}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:14px}
.header-actions .profile img{height:34px;border-radius:4px}

.hero{padding:48px 0;background:linear-gradient(180deg, rgba(0,0,0,0.2), transparent)}
.hero-shot{padding:40px 0}
.hero h1{font-size:2.2rem;margin-bottom:8px}
.hero p{color:var(--muted)}

.movies{padding:24px 0}
.movie-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px}
.card{position:relative;border-radius:6px;overflow:hidden;cursor:pointer}
.card img{width:100%;height:240px;object-fit:cover;display:block;transition:transform .3s ease}
.card:hover img{transform:scale(1.06)}
.card .meta{position:absolute;left:8px;bottom:8px;color:var(--white);background:linear-gradient(90deg, rgba(0,0,0,0.6), transparent);padding:6px 10px;border-radius:6px;font-weight:600}
.card .overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease}
.card:hover .overlay{opacity:1;background:linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.4))}
.play-btn{width:56px;height:56px;background:var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--red);border:none}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.replica-footer{border-top:1px solid rgba(255,255,255,0.03);padding:28px 0;color:var(--muted);text-align:center}

/* Modal */
.modal{display:none;position:fixed;inset:0;z-index:60}
.modal[aria-hidden="false"]{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.7)}
.modal-content{position:relative;max-width:980px;margin:6vh auto;background:transparent;padding:20px}
.modal-close{position:absolute;right:6px;top:6px;background:transparent;border:0;color:#fff;font-size:20px;cursor:pointer}
.video-wrap{aspect-ratio:16/9;background:#000}
.video-wrap iframe{width:100%;height:100%}

@media (max-width:600px){.card img{height:180px}.hero h1{font-size:1.5rem}}