body{margin:0;font-family:'Poppins',sans-serif;color:#fff;scroll-behavior:smooth}
header{display:flex;justify-content:space-between;align-items:center;padding:20px 40px;background:rgba(10,37,64,.9);color:#fff;position:fixed;width:100%;top:0;z-index:1000}
header nav a{color:#fff;margin-left:20px;text-decoration:none;font-weight:500}
section{min-height:75vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:100px 20px;background:#f9f9f9;}
.hero h1{font-size:3rem;font-weight:900}
.hero p{font-size:1.2rem;margin-top:20px}
.hero .cta{margin-top:30px;display:inline-block;padding:15px 30px;background:#fff;color:#1f5fa8;text-decoration:none;font-weight:bold;border-radius:8px}
.cards{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-top:20px}
.card{background:rgba(255,255,255,0.1);padding:20px;border-radius:12px;flex:1 1 200px;max-width:260px;color:#fff}
.card h3{margin-bottom:10px}
.features img{max-width:320px;margin:20px auto;display:block;border:3px solid #fff;border-radius:8px}
footer{padding:40px;text-align:center;background:#0a2540;color:#fff}
footer .cta{display:inline-block;margin-top:20px;padding:12px 24px;background:#fff;color:#0a2540;text-decoration:none;border-radius:6px;font-weight:bold}
.gradient-box {
  background: linear-gradient(135deg,#1f5fa8,#6a11cb);
  padding: 20px;
  border-radius: 16px;
  color: #fff;
  margin: 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
header {
  background: transparent;
  transition: background 0.5s ease;
}
header.scrolled {
  background: rgba(10,37,64,0.95);
}