*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, sans-serif;
}


body{

background:
linear-gradient(
135deg,
#050505,
#151515
);

color:white;

}


header{

height:80px;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 10%;

background:#080808;

border-bottom:1px solid #222;

}


.logo{

font-size:30px;

font-weight:bold;

}


.logo span{

color:#e63946;

}



nav a{

color:white;

text-decoration:none;

margin-left:30px;

}



.hero{

height:600px;

display:flex;

align-items:center;

justify-content:center;

text-align:center;


background:

linear-gradient(
rgba(0,0,0,.7),
rgba(0,0,0,.9)
),

url("background.jpg");

background-size:cover;

}


.hero-logo{
    display:inline-block;
    margin-bottom:25px;
}

.hero-logo img{
    width:120px;
    height:auto;
    transition:.3s ease;
    cursor:pointer;
}

.hero-logo img:hover{
    transform:scale(1.08);
}


.hero h1{

font-size:60px;

}


.hero p{

font-size:20px;

margin:20px;

color:#ccc;

}


.btn{

background:#e63946;

padding:15px 35px;

border-radius:8px;

color:white;

text-decoration:none;

}



section{

padding:80px 10%;

text-align:center;

}



.server-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:30px;

margin-top:40px;

}



.card{

background:#111;

padding:30px;

border-radius:15px;

border:1px solid #333;

transition:.3s;

}



.card:hover{

transform:translateY(-10px);

border-color:#e63946;

box-shadow:0 0 25px #e63946;

}


.card h4{

margin:20px;

color:#e63946;

}



button{

background:#e63946;

border:none;

padding:12px 25px;

color:white;

border-radius:6px;

cursor:pointer;

}



.features{

background:#0b0b0b;

}



.feature-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

margin-top:40px;

}



.contact form{

max-width:500px;

margin:auto;

display:flex;

flex-direction:column;

gap:15px;

}



input,
textarea{

background:#111;

border:1px solid #333;

padding:15px;

color:white;

border-radius:8px;

}


textarea{

height:150px;

}



.discord{

display:inline-block;

margin-top:30px;

background:#5865F2;

padding:15px 30px;

border-radius:8px;

color:white;

text-decoration:none;

}



footer{

text-align:center;

padding:30px;

background:#050505;

color:#777;

}



@media(max-width:700px){

.hero h1{

font-size:40px;

}


.feature-grid{

grid-template-columns:1fr;

}

}