.container{
  width:100%;
  max-width: var(--container);
  margin-inline:auto;
  padding-inline: var(--sp-5);
}
@media (max-width:480px){ .container{ padding-inline: var(--sp-4); } }
.container.narrow{ max-width: var(--container-narrow); }

.section{ padding-block: var(--sp-10); }
.section-alt{ background: var(--c-bg-alt); }
@media (max-width:768px){ .section{ padding-block: var(--sp-8); } }

.section-head{ max-width: 720px; margin-bottom: var(--sp-7); }
.section-sub{ font-size: var(--fs-500); color: var(--c-text-muted); }

/* Header shell */
.app-header{
  position: sticky; top:0; z-index: var(--z-header);
  background: color-mix(in srgb, var(--c-bg) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom:1px solid var(--c-border);
  height: var(--header-h);
}
.header-inner{
  height: var(--header-h);
  display:flex; align-items:center; gap: var(--sp-5);
}
.primary-nav{ margin-left: var(--sp-6); flex:1; }
.primary-nav ul{ display:flex; gap: var(--sp-2); list-style:none; margin:0; padding:0; }
.primary-nav a, .nav-trigger{
  display:inline-flex; align-items:center; gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-2);
  color: var(--c-text-muted); font-weight: var(--fw-medium); font-size: var(--fs-300);
  background:transparent; border:0; cursor:pointer;
}
.primary-nav a:hover, .nav-trigger:hover{ background: var(--c-surface-2); color: var(--c-text); text-decoration:none; }
.primary-nav .has-menu{ position: relative; }

.header-actions{ display:flex; align-items:center; gap: var(--sp-2); margin-left:auto; }

/* Footer */
.site-footer{ border-top:1px solid var(--c-border); background: var(--c-bg); padding-top: var(--sp-9); }
.footer-grid{
  display:grid; gap: var(--sp-7);
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  padding-bottom: var(--sp-8);
}
.footer-h{ font-size: var(--fs-300); text-transform:uppercase; letter-spacing:.06em; color: var(--c-text-subtle); margin-bottom: var(--sp-3); font-weight: var(--fw-semi); }
.site-footer ul{ list-style:none; padding:0; margin:0; }
.site-footer li{ margin-bottom: var(--sp-2); }
.site-footer a{ color: var(--c-text-muted); font-size: var(--fs-300); }
.footer-tag{ color: var(--c-text-muted); font-size: var(--fs-300); margin-top: var(--sp-3); max-width: 32ch; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; gap: var(--sp-4);
  border-top:1px solid var(--c-border); padding-block: var(--sp-5);
  font-size: var(--fs-200); color: var(--c-text-subtle);
}
.footer-note{ margin:0; color: var(--c-text-subtle); }
@media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr; gap: var(--sp-6); }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}