*{box-sizing:border-box;margin:0;padding:0;font-family:Arial,sans-serif}
body{min-height:100vh;background:url("assets/background.webp") center/cover fixed;color:white}
.overlay{position:fixed;inset:0;background:linear-gradient(180deg,rgba(15,0,35,.78),rgba(0,0,0,.75));z-index:-1}
header{padding:20px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;background:rgba(20,0,47,.65);backdrop-filter:blur(15px);border-bottom:1px solid #ffffff33}
.logo img{width:min(320px,80vw);filter:drop-shadow(0 0 20px #ffd900)}
nav{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
nav a{color:#fff;text-decoration:none;padding:12px 18px;border-radius:30px;background:#6f00ff55;border:1px solid #ffffff33;transition:.3s}
nav a:hover{background:#ffd900;color:#111}
.hero{text-align:center;padding:90px 20px}
.hero h1{font-size:clamp(32px,5vw,58px);text-shadow:0 0 20px #8b00ff}
.hero span{color:#ffd900}
.hero p{font-size:clamp(18px,2vw,24px);margin:25px}
button{padding:16px 35px;border:0;border-radius:50px;background:linear-gradient(90deg,#ffd900,#ff6500);font-weight:bold}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:25px;padding:40px}
.card{padding:30px;border-radius:25px;background:rgba(48,0,96,.55);backdrop-filter:blur(20px);border:1px solid #ffffff33;box-shadow:0 0 30px #7b00ff66}
.card h2{color:#ffd900;margin-bottom:15px}
footer{text-align:center;padding:30px;background:#000a}
footer a{color:#ffd900}
@media(max-width:700px){header{justify-content:center}.hero{padding:50px 15px}.cards{padding:20px}}