*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Segoe UI,Meiryo,sans-serif;background:#070b17;color:#eef2ff;line-height:1.6}
.header{position:fixed;top:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding:20px 8%;background:rgba(7,11,23,.75);backdrop-filter:blur(10px);z-index:10}
.logo{font-weight:700;letter-spacing:2px;color:#62d8ff}
nav a{color:#fff;text-decoration:none;margin-left:24px}
nav a:hover{color:#62d8ff}
.hero{height:100vh;background:linear-gradient(135deg,#08101f,#13294d,#071018);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.overlay{position:absolute;inset:0;background:radial-gradient(circle at top,#2ca8ff22,transparent 60%)}
.hero-content{position:relative;text-align:center;max-width:850px;padding:20px}
.eyebrow{color:#62d8ff;letter-spacing:4px;margin-bottom:20px}
h1{font-size:clamp(2.5rem,6vw,5rem);margin-bottom:20px}
.button{display:inline-block;margin-top:30px;padding:14px 34px;border-radius:999px;background:#1e90ff;color:#fff;text-decoration:none;transition:.3s}
.button:hover{transform:translateY(-3px);box-shadow:0 0 25px #1e90ff}
.container{width:min(1100px,92%);margin:90px auto}
.container h2{margin-bottom:30px;color:#62d8ff}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.card{background:#111b30;border:1px solid #2b4c79;border-radius:18px;padding:24px;transition:.3s}
.card:hover{transform:translateY(-8px);border-color:#62d8ff;box-shadow:0 0 20px rgba(98,216,255,.25)}
footer{text-align:center;padding:40px;color:#9eb4d6}