*{box-sizing:border-box}body{margin:0;font-family:Arial;background:#0f172a;color:white}
nav{display:flex;justify-content:space-between;padding:20px 40px;background:rgba(0,0,0,.3);position:sticky;top:0}
ul{display:flex;gap:20px;list-style:none}a{color:white;text-decoration:none}
.hero{height:80vh;display:flex;align-items:center;justify-content:center;
background:linear-gradient(-45deg,#2563eb,#7c3aed,#06b6d4,#0ea5e9);background-size:400% 400%;animation:grad 10s ease infinite}
@keyframes grad{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
.btn,.card{padding:14px 24px;border-radius:14px;background:rgba(255,255,255,.12);backdrop-filter:blur(10px)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:40px}
.card{height:160px;display:flex;align-items:center;justify-content:center;transition:.3s}.card:hover{transform:translateY(-10px)}