*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,Arial,sans-serif;color:#1d3557}
nav{display:flex;justify-content:space-between;align-items:center;padding:18px 8%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.logo{font-size:28px;font-weight:700;color:#008c95}
ul{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.hero{
height:75vh;
background:
linear-gradient(rgba(255,255,255,.75),rgba(255,255,255,.8)),
radial-gradient(circle at top right,#bde7ff,#eef8ff 60%);
display:flex;align-items:center;padding:0 8%;
position:relative;
overflow:hidden;
}
.hero:before{
content:'';position:absolute;right:-100px;top:50px;width:500px;height:500px;
background:radial-gradient(circle,#7ec8ff55,#ffffff00 70%);
border-radius:50%;
}
.overlay{max-width:650px;position:relative}
h1{font-size:64px;margin:0}
h1 span{color:#00a38f}
p{font-size:20px}
.btn{display:inline-block;background:#0d6efd;color:#fff;padding:14px 24px;text-decoration:none;border-radius:8px}
.features,.specialties{padding:60px 8%}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.card,.grid div{background:#fff;border-radius:14px;padding:24px;box-shadow:0 4px 15px rgba(0,0,0,.08)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px}
footer{background:#083b66;color:#fff;text-align:center;padding:24px}