:root{--bg:#070b16;--card:#101a31;--accent:#61dafb;--text:#eef5ff}
*{margin:0;padding:0;box-sizing:border-box;scroll-behavior:smooth}
body{font-family:Segoe UI,Arial,sans-serif;background:linear-gradient(180deg,#070b16,#0f1d38);color:var(--text)}
header{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:18px 7%;background:rgba(8,13,27,.8);backdrop-filter:blur(10px)}
.logo{font-size:1.5rem;font-weight:700}
nav a{color:#fff;text-decoration:none;margin-left:22px;position:relative}
nav a:after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--accent);transition:.3s}
nav a:hover:after{width:100%}
.hero{min-height:88vh;display:grid;place-items:center;text-align:center;padding:2rem;background:radial-gradient(circle at top,#15305d,#070b16)}
.hero h1{font-size:4rem;animation:fade 1s}
.hero p{max-width:720px;margin:18px auto;font-size:1.1rem;opacity:.9}
.btn{display:inline-block;padding:14px 28px;background:var(--accent);color:#001827;text-decoration:none;border-radius:30px;font-weight:bold;transition:.3s}
.btn:hover{transform:translateY(-3px) scale(1.03)}
section{padding:80px 7%}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}
.card{background:rgba(255,255,255,.05);padding:24px;border:1px solid rgba(255,255,255,.08);border-radius:18px;transition:.35s}
.card:hover{transform:translateY(-8px);box-shadow:0 10px 30px rgba(97,218,251,.15)}
footer{text-align:center;padding:30px;background:#050913;margin-top:40px}
form input,textarea{width:100%;padding:14px;margin:10px 0;border:none;border-radius:10px;background:#1a2747;color:#fff}
button{padding:14px 26px;border:none;border-radius:10px;background:var(--accent);cursor:pointer}
@keyframes fade{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}