/* ===== Base ===== */
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: #0b1220;
  background: #fff;
  padding-top: 70px; /* space for fixed header */
}

a { color: #38bdf8; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== Layout Helpers ===== */
.wrap { 
max-width: 1200px; 
margin: 20px auto; 
padding: 20px; 
}
section { 
margin-top: 30px; 
}

/* ===== Hero ===== */
.hero {
  background: linear-gradient(165deg,#0b1220 0%, #12253b 55%, #1b2c44 100%);
  color: #fff;
  border-radius: 15px;
  padding: 40px 25px;
}
.hero h1 { margin-top: 0; font-size: 2rem; line-height: 1.2; }
.hero p { color: #cbd5e1; font-size: 1rem; max-width: 650px; }
.btn {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: bold;
  text-align: center;
}
.btn-primary { background: #38bdf8; color: #042736; border: none; }
.btn-primary:hover { background: #7dd3fc; }

/* ===== Section Cards ===== */
.section-card {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 15px;
  padding: 25px;
}
.section-card h2 { margin-top: 0; }

/* ===== Responsive ===== */
@media (max-width: 720px) {
  .nav-wrap { flex-wrap: wrap; justify-content: center; }
  .nav { flex-wrap: wrap; justify-content: center; gap: 10px; }
  .wrap { padding: 14px; }
  .hero { padding: 30px 18px; }
}