.site-header {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  height: 52px;
  display: flex;
  align-items: center;
}
.site-header-inner {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 0 var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  width: 100%;
}
.site-logo {
  font-size: var(--fs-md);
  font-weight: var(--fw-heavy);
  color: var(--text-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.site-logo span { color: var(--text-accent); }
.site-nav { display: flex; gap: var(--sp-4); }
.site-nav a {
  color: var(--text-secondary);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  transition: color 0.15s;
}
.site-nav a:hover, .site-nav a.active { color: var(--text-primary); text-decoration: none; }

.container {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

.section {
  padding: var(--sp-12) 0;
  border-top: 1px solid var(--border);
}
.section:first-of-type { border-top: none; }

.section-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-heavy);
  margin-bottom: var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.section-title .icon { font-size: 1.2em; }

@media (max-width: 768px) {
  .container { padding: 0 var(--sp-4); }
  .section { padding: var(--sp-8) 0; }
  .site-nav { display: none; }
}