*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,Arial,sans-serif;color:#222}
.hero{height:100vh;background:url('assets/hero.png') center/cover no-repeat;position:relative}
.hero:before{content:'';position:absolute;inset:0;background:rgba(0,20,50,.65)}
nav,.overlay{position:relative;z-index:2}
nav{display:flex;justify-content:space-between;padding:25px 8%;color:#fff}
nav a{color:#fff;text-decoration:none;margin-left:20px}
.brand{font-weight:700;font-size:28px}
.overlay{padding:12% 8%;color:#fff;max-width:850px}
h1{font-size:58px;margin:0}
.btn{display:inline-block;background:#00b8ff;color:#fff;padding:14px 24px;border-radius:8px;text-decoration:none}
section{padding:80px 8%}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}
.card{padding:24px;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.08)}
.dark{background:#081b3c;color:#fff}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;text-align:center}
.stats span{font-size:42px;font-weight:700;color:#00b8ff}
form{display:grid;gap:12px;max-width:600px}
input,textarea{padding:12px;border:1px solid #ccc;border-radius:8px}
button{padding:14px;background:#081b3c;color:white;border:none;border-radius:8px}
footer{text-align:center;padding:30px;background:#081b3c;color:#fff}