body {
    margin:0;
    font-family: system-ui, sans-serif;
    background:#0a0a0a;
    color:#fff;
}

/* NAV */
header {
    position:fixed;
    top:0;
    width:100%;
    padding:15px 40px;
    background:rgba(0,0,0,0.85);
    z-index:1000;
}

/* HERO */
.hero {
    height:100vh;
    background-size:cover;
    background-position:center;
    position:relative;
    display:flex;
    align-items:flex-end;
    padding:0 60px 120px;
}

.hero-overlay {
    position:absolute;
    inset:0;
    background:linear-gradient(to top,#0a0a0a 20%,transparent 70%);
}

.hero-content {
    position:relative;
    max-width:600px;
}

.hero h1 {
    font-size:4rem;
    margin-bottom:20px;
}

.hero p {
    opacity:0.85;
    line-height:1.6;
    margin-bottom:25px;
}

.hero-buttons {
    display:flex;
    gap:15px;
}

.btn-primary {
    background:#e50914;
    padding:12px 22px;
    text-decoration:none;
    color:#fff;
    border-radius:4px;
}

.btn-secondary {
    background:rgba(255,255,255,0.2);
    padding:12px 22px;
    text-decoration:none;
    color:#fff;
    border-radius:4px;
}

/* ROWS */
.row {
    padding:40px 60px;
}

.row h2 {
    margin-bottom:15px;
    font-size:1.5rem;
}

.row-scroll {
    display:flex;
    gap:15px;
    overflow-x:auto;
    scrollbar-width:none;
}

.row-scroll::-webkit-scrollbar {
    display:none;
}

.card {
    min-width:200px;
    transition:transform .3s;
}

.card img {
    width:100%;
    border-radius:6px;
}

.card:hover {
    transform:scale(1.08);
}

.card-title {
    display:block;
    margin-top:8px;
    font-size:0.85rem;
}

/* RESPONSIVE */
@media(max-width:768px) {
    .hero h1 {
        font-size:2.5rem;
    }
    .hero {
        padding:0 20px 80px;
    }
    .row {
        padding:30px 20px;
    }
}

body {
    margin:0;
    font-family: system-ui, sans-serif;
    background:#0a0a0a;
    color:#fff;
}

/* HERO */
.hero {
    height:100vh;
    background-size:cover;
    background-position:center;
    position:relative;
    display:flex;
    align-items:flex-end;
    padding:0 60px 120px;
}

.hero-overlay {
    position:absolute;
    inset:0;
    background:linear-gradient(to top,#0a0a0a 20%,transparent 70%);
}

.hero-content {
    position:relative;
    max-width:600px;
}

.hero h1 {
    font-size:4rem;
    margin-bottom:20px;
}

.hero-meta span {
    margin-right:15px;
    opacity:0.8;
}

.btn-primary {
    background:#e50914;
    padding:12px 24px;
    text-decoration:none;
    color:#fff;
    border-radius:4px;
}

/* ROWS */
.row {
    padding:40px 60px;
}

.row h2 {
    margin-bottom:20px;
}

.row-scroll {
    display:flex;
    gap:15px;
    overflow-x:auto;
    scrollbar-width:none;
}

.row-scroll::-webkit-scrollbar {
    display:none;
}

.card {
    min-width:180px;
    position:relative;
    transition:transform .3s;
}

.card img {
    width:100%;
    border-radius:8px;
}

.card:hover {
    transform:scale(1.08);
}

/* TOP 10 STYLE */
.top10 .rank-number {
    position:absolute;
    left:-10px;
    bottom:-10px;
    font-size:5rem;
    font-weight:bold;
    color:#e50914;
    z-index:1;
}

/* RESPONSIVE */
@media(max-width:768px){
    .hero h1 {
        font-size:2.5rem;
    }

    .hero {
        padding:0 20px 80px;
    }

    .row {
        padding:30px 20px;
    }
}