/* ===== Global Styles ===== */
:root{
  --brand:#0F62FE;
  --brand-ink:#0B1F4E;
  --ink:#1a1a1a;
  --muted:#5a5a5a;
  --bg:#ffffff;
  --surface:#f5f7fb;
  --ring:rgba(15,98,254,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  padding-top:60px; /* space for fixed header */
  padding-bottom:50px; /* space for fixed footer */
  font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--ink);
  background:var(--bg);
}

/* ===== Layout ===== */
.container{ max-width:1100px; margin-inline:auto; padding:0 1rem; }
header.site-header{ background:var(--surface); border-bottom:1px solid #e6e8ee; position:fixed; top:0; left:0; right:0; z-index:100; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0.75rem 0; }
.brand{ display:flex; align-items:center; gap:.75rem; text-decoration:none; }
.brand-logo{ width:36px;height:36px; display:inline-block; }
.brand-name{ font-weight:700; letter-spacing:.2px; color:var(--brand-ink); text-decoration:none; }
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
}
nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:.75rem; align-items:center; }
nav.primary-nav a{ display:inline-block; padding:.5rem .75rem; border-radius:.5rem; color:var(--ink); text-decoration:none; }
nav.primary-nav a:hover{ background:#eef3ff; color:#0b3d91 }
nav.primary-nav a[aria-current="page"], nav.primary-nav a.active{ background:var(--brand); color:#fff; }

main .container{ padding:2rem 1rem; }

footer.site-footer{ background:var(--surface); border-top:1px solid #e6e8ee; position:fixed; bottom:0; left:0; right:0; z-index:100; }
.footer-inner{ padding:1rem 0; display:flex; justify-content:space-between; align-items:center; gap:1rem; color:var(--muted); font-size:.95rem; }

/* ===== Utilities ===== */
.button{ display:inline-block; background:var(--brand); color:#fff; padding:.6rem .9rem; border-radius:.5rem; text-decoration:none; }
.button:hover{ filter:brightness(.95) }
.lead{ font-size:1.125rem; color:var(--muted) }
.cards{ display:grid; grid-template-columns:repeat(12,1fr); gap:1rem; }
.card{ grid-column:span 4; background:#fff; border:1px solid #ebedf3; border-radius:.75rem; padding:1rem; box-shadow:0 1px 2px rgba(0,0,0,.04) }
.card h3{ margin-top:.25rem }
.card-half { grid-column: span 6; }
.hero-img { max-width: 33%; height: auto; border-radius: 8px; box-shadow: 10px 10px 15px rgba(0,0,0,1); }
@media (max-width: 900px){ .card{ grid-column:span 6 } }
@media (max-width: 600px){ .card{ grid-column:span 12 } .card-half{ grid-column:span 12 } }

/* ===== Hamburger / Mobile nav ===== */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 1.5rem;
  height: 1.125rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.hamburger-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .hamburger-bar:first-child { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .hamburger-bar:last-child  { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .primary-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 1px solid #e6e8ee;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    z-index: 99;
  }
  .primary-nav.open { display: block; }
  nav.primary-nav ul { flex-direction: column; gap: 0; padding: 0.5rem 1rem 0.75rem; }
  nav.primary-nav a { display: block; padding: 0.75rem 0.5rem; border-radius: 0; border-bottom: 1px solid #ebedf3; }
  nav.primary-nav li:last-child a { border-bottom: none; }
  .hero-img { max-width: 65%; }
}


/* ===== Welcome page ===== */
/* .welcome{
  min-height:100dvh; display:grid; place-items:center; background:linear-gradient(180deg,#eef3ff, #ffffff 40%);
}
.welcome .panel{
  text-align:center; padding:3rem 2rem; border-radius:1rem; background:#fff; border:1px solid #e6e8ee; box-shadow:0 6px 24px rgba(0,0,0,.06);
}
.welcome .logo{ width:64px; height:64px; }
.welcome h1{ margin:.5rem 0 0; color:var(--brand-ink) }
.welcome p{ color:var(--muted); max-width:56ch; margin-inline:auto } */