/* ===== BASE STYLES ===== */

:root { 
  --brand: #2f51a8; 
  --ink: #1b1b1b; 
  --bg: #ffffff; 
  --muted: #777878; 
}

* { box-sizing: border-box; }

body { 
  margin: 0; 
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', system-ui, sans-serif; 
  color: var(--ink); 
  background: var(--bg); 
  line-height: 1.6;
  scroll-behavior: smooth;
}

/* ===== TYPOGRAPHY SYSTEM ===== */
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p { line-height: 1.6; }

.container { width: 90%; max-width: 1240px; margin: 0 auto; }
.container-sm { width: 90%; max-width: 740px; margin: 0 auto; }

.site-nav {
  position: sticky;
  top: 0;
  z-index: 1100;
  background: white;
  border-bottom: 1px solid #e6eef5;
  box-shadow: 0 2px 8px rgba(12, 18, 24, 0.04);
}

.site-nav .nav-container { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  gap: 1rem; 
  padding: 0.5rem 0; 
}

.nav-logo { 
  font-weight: 700; 
  color: var(--brand); 
  text-decoration: none; 
  font-size: 1.125rem; 
}

.nav-left { display: flex; align-items: center; gap: 1rem; }
.nav-logo-image { height: 50px; width: auto; display: block; }
.nav-toggle { 
  display: none; 
  background: transparent; 
  border: 0; 
  font-size: 1.2rem; 
  cursor: pointer; 
  margin-left: auto; 
}

.nav-list { 
  list-style: none; 
  display: flex; 
  gap: 1rem; 
  padding: 0; 
  margin: 0; 
  align-items: center; 
}

.nav-list a { 
  color: var(--ink); 
  text-decoration: none; 
  padding: 0.5rem 0.5rem; 
  display: block; 
}

.nav-cta { 
  background: var(--brand); 
  color: white; 
  border-radius: 8px; 
  padding: 0.55rem 1rem; 
  text-decoration: none; 
  font-weight: 600; 
}

.nav-cta:hover { 
  background: #5c7fcc; 
}

/* Mobile behaviour */
@media (max-width: 768px) {
  .nav-toggle { display: block; margin-left: 0.5rem; }
  .nav-links { 
    position: absolute; 
    right: 0; 
    left: 0; 
    top: 100%; 
    background: white; 
    display: none; 
    flex-direction: column; 
    gap: 0.5rem; 
    padding: 1rem; 
    border-bottom: 1px solid #eef2f6; 
  }
  .nav-links.open { display: flex; }
  .nav-list { flex-direction: column; gap: 0.25rem; }
  .nav-cta { width: 100%; text-align: center; }
}

.site-header { background: #f8fafc; border-bottom: 1px solid #e5e7eb; }
.site-footer { background: #f8fafc; border-top: 1px solid #e5e7eb; color: var(--muted); font-size: 0.9rem; }