body{margin:0;font-family:Arial;background:#000;color:#fff}
.nav{display:flex;justify-content:space-between;padding:15px;background:rgba(0,0,0,0.8);position:fixed;width:100%}
nav a{color:#fff;margin:10px;text-decoration:none}

.hero{
height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
background:linear-gradient(45deg,#000,#434343,#000);
animation:grad 10s infinite;
background-size:400%;
}

@keyframes grad{
0%{background-position:0%}
50%{background-position:100%}
100%{background-position:0%}
}

section{padding:80px 20px;text-align:center}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
}

.card{
background:#111;
padding:30px;
border-radius:15px;
transition:0.4s;
}

.card:hover{
transform:scale(1.05);
background:#1f1f1f;
}

iframe{width:100%;height:300px;border:0}

footer{padding:20px;background:#000}