@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; margin:0; padding:0; }
html, body { height: 100%; overflow-x: hidden; }
body { font-family: 'Inter', system-ui, sans-serif; line-height: 1.7; transition: background 0.4s, color 0.4s; }
body.light { background:#fcfcfc; color:#1f2937; }
body.dark  { background:#0f172a; color:#e2e8f0; }

header {
  background: linear-gradient(135deg, #1e3a8a, #3b82f6);
  color: white;
  text-align: center;
  padding: 90px 20px 70px;
}
header h1 { font-size: 3.8rem; font-weight: 800; margin:0; text-shadow: 0 4px 12px rgba(0,0,0,0.4); }

.nav-bar {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  background: white;
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 9999;
}
body.dark .nav-bar { background:#0f172a; }

.nav-bar button { background:none; border:none; font-size:2rem; cursor:pointer; }

#main-nav {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-out;
  background: white;
}
body.dark #main-nav { background:#0f172a; }
#main-nav.open { max-height: 800px; }

#main-nav ul { list-style: none; padding: 20px 0; text-align: center; }
#main-nav li { margin: 18px 0; }
#main-nav a { font-size: 1.22rem; font-weight: 500; color: #2563eb; text-decoration: none; }
body.dark #main-nav a { color:#93c5fd; }
#main-nav a.contrib { color:#16a34a; font-weight:600; font-size:1.35rem; }

@media (min-width: 768px) {
  .nav-bar { display: none; }
  #main-nav { max-height: none; background: white; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
  body.dark #main-nav { background:#0f172a; }
  #main-nav ul { display:flex; justify-content:center; padding:20px 0; }
  #main-nav li { margin:0 25px; }
}

main { max-width:940px; margin:0 auto; padding:40px 20px; }
.cta { text-align:center; background:#eff6ff; padding:40px; border-radius:16px; margin:60px 0; }
body.dark .cta { background:#1e293b; }
.button { display:inline-block; background:#16a34a; color:white; padding:16px 36px; border-radius:12px; font-weight:600; text-decoration:none; }
footer { text-align:center; padding:60px 20px; color:#64748b; border-top:1px solid #e2e8f0; }
body.dark footer { border-color:#334155; }