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

:root { --brand: #00B5E2; --ink: #1b1b1b; --bg: #ffffff; --muted: #75787B; }
* { 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; }/* Typography improvements */

.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:#0099cc; }

/* 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; }