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.7);position:fixed;width:100%;backdrop-filter:blur(10px)}
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,#ff6a00,#ee0979,#ff6a00);
background-size:400% 400%;
animation:gradient 10s infinite;
}

@keyframes gradient{
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.5s;
transform-style:preserve-3d;
}

.card:hover{
transform:rotateY(15deg) scale(1.05);
background:#222;
}

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

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