*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Microsoft YaHei;background:#f5f7fb;color:#222}
header{height:75px;background:#061b3d;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 5%}
.logo{font-size:22px;font-weight:bold}
nav{display:flex;gap:20px}
.hero{height:520px;background:linear-gradient(90deg,rgba(3,15,40,.85),rgba(3,15,40,.3)),url("images/banner-preview.png") center/cover;display:flex;align-items:center;padding:60px;color:#fff}
.hero h1{font-size:55px}
.hero h2{font-size:32px;margin:20px 0}
.btn{display:inline-block;background:#d6a33c;padding:15px 35px;border-radius:30px;margin-top:30px}
.services,.about{padding:60px 5%;text-align:center}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:40px}
.grid div{background:white;padding:35px 10px;border-radius:15px;box-shadow:0 5px 20px #ddd;color:#06224d;font-weight:bold}
small{display:block;color:#777;margin-top:10px;font-weight:normal}
.about p{max-width:900px;margin:30px auto;line-height:2}
footer{background:#061b3d;color:white;text-align:center;padding:25px}
@media(max-width:768px){
header{display:block;height:auto;padding:20px;text-align:center}
nav{overflow:auto;margin-top:15px}
.hero{height:420px;padding:30px}
.hero h1{font-size:35px}
.grid{grid-template-columns:repeat(2,1fr)}
}