:root{
    --bg:#080808;
    --panel:#141414;
    --text:#fff;
    --muted:#b9b9b9;
    --red:#e50914;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:Arial,Helvetica,sans-serif;
    overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
.topbar{
    position:fixed;
    z-index:50;
    inset:0 0 auto;
    height:72px;
    display:flex;
    align-items:center;
    gap:42px;
    padding:0 4vw;
    background:linear-gradient(to bottom,rgba(0,0,0,.88),transparent);
    transition:.3s;
}
.topbar.scrolled{background:#090909}
.brand{
    color:var(--red);
    font-size:clamp(1.45rem,2.3vw,2.15rem);
    font-weight:900;
    letter-spacing:-1.5px;
}
.topbar nav{display:flex;gap:24px;font-size:.93rem}
.topbar nav a{color:#e5e5e5;transition:.2s}
.topbar nav a:hover{color:#fff}
.profile{
    margin-left:auto;
    width:34px;height:34px;
    border-radius:5px;
    background:linear-gradient(135deg,#b20710,#f13d47);
    display:grid;place-items:center;
    box-shadow:0 6px 20px rgba(0,0,0,.35)
}
.hero{
    position:relative;
    min-height:88vh;
    display:flex;
    align-items:center;
    overflow:hidden;
}
.hero-media,.hero-shade{
    position:absolute;inset:0;
}
.hero-media img,.hero-media video{
    width:100%;height:100%;object-fit:cover;
}
.hero-placeholder{
    width:100%;height:100%;
    background:
      radial-gradient(circle at 70% 30%,rgba(229,9,20,.22),transparent 25%),
      linear-gradient(130deg,#281014,#101010 48%,#050505);
}
.hero-shade{
    background:
      linear-gradient(to top,var(--bg) 0%,transparent 35%),
      linear-gradient(to right,rgba(0,0,0,.92) 0%,rgba(0,0,0,.63) 33%,transparent 68%),
      linear-gradient(to bottom,rgba(0,0,0,.35),transparent 28%);
}
.hero-content{
    position:relative;
    z-index:2;
    width:min(650px,90vw);
    margin-left:4vw;
    padding-top:70px;
}
.hero-label{
    color:#ddd;
    font-size:.78rem;
    letter-spacing:.3em;
    font-weight:700;
}
.hero h1{
    margin:.35em 0 .12em;
    font-size:clamp(3.5rem,8vw,7.4rem);
    line-height:.9;
    letter-spacing:-.07em;
    text-shadow:0 4px 22px rgba(0,0,0,.65);
}
.hero-subtitle{
    font-size:clamp(1.15rem,2vw,1.6rem);
    font-weight:700;
    margin:18px 0 10px;
}
.hero-description{
    max-width:590px;
    color:#e6e6e6;
    line-height:1.55;
    font-size:clamp(.95rem,1.3vw,1.15rem);
    text-shadow:0 2px 8px #000;
}
.hero-actions{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.btn{
    border:0;border-radius:5px;
    padding:12px 23px;
    font-weight:700;
    display:flex;align-items:center;gap:10px;
    cursor:pointer;
    transition:transform .16s,opacity .16s;
}
.btn:hover{transform:scale(1.03);opacity:.88}
.btn-primary{background:#fff;color:#000}
.btn-secondary{background:rgba(109,109,110,.72);color:#fff}
.scroll-cue{
    position:absolute;z-index:2;bottom:4.5%;left:50%;
    transform:translateX(-50%);
    font-size:2rem;opacity:.65;
}
.catalog{
    position:relative;
    z-index:5;
    margin-top:-9vh;
    padding-bottom:70px;
}
.row-section{margin-bottom:30px}
.row-heading{
    display:flex;align-items:end;gap:18px;
    padding:0 4vw 10px;
}
.row-heading h2{margin:0;font-size:clamp(1.25rem,2vw,1.7rem)}
.row-heading span{font-size:.8rem;color:#54b9c5;opacity:0;transform:translateX(-8px);transition:.2s}
.row-section:hover .row-heading span{opacity:1;transform:none}
.media-row{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(230px,24vw);
    gap:7px;
    overflow-x:auto;
    padding:0 4vw 40px;
    scrollbar-width:none;
}
.media-row::-webkit-scrollbar{display:none}
.media-card{
    position:relative;
    border-radius:5px;
    background:#181818;
    cursor:pointer;
    transform-origin:center;
    transition:transform .25s,box-shadow .25s;
    outline:none;
}
.media-card:hover,.media-card:focus{
    transform:scale(1.08);
    z-index:8;
    box-shadow:0 18px 35px rgba(0,0,0,.55);
}
.card-image{
    position:relative;
    aspect-ratio:16/9;
    overflow:hidden;
    border-radius:5px 5px 0 0;
    background:#202020;
}
.card-image img{width:100%;height:100%;object-fit:cover;display:block}
.card-placeholder{
    width:100%;height:100%;
    display:grid;place-items:center;
    text-align:center;color:#aaa;
    background:
      linear-gradient(135deg,rgba(229,9,20,.22),transparent),
      #202020;
}
.card-gradient{
    position:absolute;inset:0;
    background:linear-gradient(to top,rgba(0,0,0,.7),transparent 55%);
}
.card-play{
    position:absolute;left:14px;bottom:11px;
    width:34px;height:34px;border:2px solid rgba(255,255,255,.75);
    border-radius:50%;display:grid;place-items:center;
    font-size:.74rem;background:rgba(0,0,0,.35)
}
.card-meta{padding:13px 15px 16px}
.card-meta h3{margin:0;font-size:1rem}
.card-meta p{margin:6px 0 0;color:#46d369;font-size:.78rem;font-weight:700}
footer{
    padding:20px 4vw 55px;
    color:#777;
    text-align:center;
}
.footer-small{font-size:.78rem}
.modal{position:fixed;inset:0;z-index:100;display:none}
.modal.open{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(5px)}
.modal-card{
    position:relative;
    width:min(850px,92vw);
    max-height:88vh;
    overflow:auto;
    margin:6vh auto;
    background:#181818;
    border-radius:8px;
    box-shadow:0 30px 80px rgba(0,0,0,.65);
}
.modal-close{
    position:absolute;z-index:3;right:16px;top:16px;
    width:38px;height:38px;border:0;border-radius:50%;
    background:#181818;color:#fff;font-size:1.8rem;cursor:pointer;
}
.modal-cover{
    min-height:320px;
    background-position:center;
    background-size:cover;
    position:relative;
}
.modal-cover::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(to top,#181818,transparent 65%);
}
.modal-body{padding:0 34px 38px;margin-top:-45px;position:relative}
.modal-body h2{font-size:2.2rem;margin:0 0 10px}
.modal-year{color:#46d369;font-weight:700;margin-bottom:14px}
.modal-body p{color:#ddd;line-height:1.6}
@media(max-width:740px){
    .topbar{height:62px;padding:0 18px}
    .topbar nav{display:none}
    .hero{min-height:78vh}
    .hero-content{margin-left:18px;padding-right:18px;padding-top:45px}
    .hero h1{font-size:3.8rem}
    .hero-description{font-size:.94rem}
    .catalog{margin-top:-5vh}
    .row-heading{padding-left:18px}
    .media-row{grid-auto-columns:72vw;padding-left:18px;padding-right:18px}
    .media-card:hover,.media-card:focus{transform:scale(1.03)}
    .modal-cover{min-height:220px}
    .modal-body{padding:0 22px 28px}
}