body{
    margin:0;
    font-family:Arial;
    background:#050505;
    color:#fff;
}

.container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

/* HEADER */
.header{
    background:#000;
    border-bottom:2px solid red;
    position:sticky;
    top:0;
    z-index:999;
}
.header-flex{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 0;
}

.logo{
    color:#ffd700;
    font-size:22px;
}

/* NAV */
.nav ul{
    display:flex;
    gap:20px;
    list-style:none;
}
.nav a{
    color:#fff;
    text-decoration:none;
}

/* HERO */
.hero{
    padding:120px 0;
    text-align:center;
    background:linear-gradient(black, #111);
}
.hero h1{
    font-size:40px;
    color:red;
}
.hero p{
    color:#ffd700;
}

/* SECTIONS */
.section{
    padding:80px 0;
    text-align:center;
    border-bottom:1px solid #222;
}
.section:nth-child(even){
    background:#0d0d0d;
}

/* BUTTON */
.btn{
    display:inline-block;
    margin-top:20px;
    padding:12px 25px;
    background:red;
    color:#fff;
    text-decoration:none;
    border-radius:6px;
    box-shadow:0 0 10px red;
}

/* FOOTER */
.footer{
    text-align:center;
    padding:20px;
    background:#000;
    border-top:2px solid red;
}

/* MOBILE */
.menu-toggle{display:none;}

@media(max-width:768px){
    .nav{display:none;}
    .nav.active{display:block;}
    .menu-toggle{display:block;}
}