/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #0F172A;
  color: #E2E8F0;
  line-height: 1.7;
}
header {
  background: linear-gradient(135deg, #0EA5E9, #6366F1);
  padding: 48px 24px 40px;
  text-align: center;
}
header h1 { font-size: 2rem; font-weight: 900; color: #fff; letter-spacing: 1px; }
header p  { color: rgba(255,255,255,0.8); margin-top: 8px; font-size: 1rem; }
nav {
  display: flex; justify-content: center; gap: 12px;
  padding: 18px 24px; background: #1E293B;
  flex-wrap: wrap;
}
nav a {
  color: #38BDF8; text-decoration: none; font-weight: 700;
  font-size: 0.9rem; padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(56,189,248,0.3);
  transition: background 0.2s;
}
nav a:hover { background: rgba(56,189,248,0.1); }
main { max-width: 760px; margin: 0 auto; padding: 48px 24px 80px; }
section { margin-bottom: 56px; }
h2 {
  font-size: 1.4rem; font-weight: 900; color: #38BDF8;
  border-left: 4px solid #6366F1; padding-left: 14px;
  margin-bottom: 20px;
}
h3 { font-size: 1rem; font-weight: 800; color: #94A3B8; margin: 20px 0 8px; text-transform: uppercase; letter-spacing: 0.5px; }
p  { color: #CBD5E1; margin-bottom: 12px; }
ul { padding-left: 20px; color: #CBD5E1; margin-bottom: 12px; }
ul li { margin-bottom: 6px; }
.card {
  background: #1E293B; border: 1px solid #334155;
  border-radius: 16px; padding: 24px; margin-top: 12px;
}
.contact-email {
  display: inline-block; background: linear-gradient(135deg, #0EA5E9, #6366F1);
  color: #fff; font-weight: 900; padding: 14px 28px; border-radius: 999px;
  text-decoration: none; font-size: 1rem; margin-top: 8px;
  transition: opacity 0.2s;
}
.contact-email:hover { opacity: 0.85; }
.badge {
  display: inline-block; background: #0F172A; border: 1px solid #334155;
  border-radius: 8px; padding: 4px 10px; font-size: 0.78rem;
  color: #94A3B8; font-weight: 700; margin-left: 8px; vertical-align: middle;
}
footer {
  text-align: center; padding: 28px; background: #1E293B;
  color: #475569; font-size: 0.85rem;
}
@media (max-width: 480px) {
  header h1 { font-size: 1.5rem; }
  main { padding: 32px 16px 60px; }
}