/* Design tokens — replace with values from the design. */
:root {
  --color-bg: #ffffff;
  --color-text: #0b0b0b;
  --color-muted: #5b5b5b;
  --color-accent: #0b0b0b;
  --color-accent-contrast: #ffffff;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --container: 1120px;
  --radius: 12px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); line-height: 1.6; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 16px; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 16px; background: var(--color-text); color: var(--color-bg); padding: .5rem 1rem; z-index: 100; }

.site-header .container { display: flex; align-items: center; justify-content: space-between; padding-block: 1rem; }
.site-header ul { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; align-items: center; }
.site-header a { text-decoration: none; }
.logo { font-weight: 800; }

section { padding: 5rem 0; }
.hero h1 { font-size: clamp(2.25rem, 6vw, 4rem); line-height: 1.1; margin: 0 0 1rem; }
.lead { font-size: 1.25rem; color: var(--color-muted); max-width: 40ch; }

.btn { display: inline-block; background: var(--color-accent); color: var(--color-accent-contrast); padding: .875rem 1.5rem; border-radius: var(--radius); text-decoration: none; font-weight: 600; }
.btn-small { padding: .5rem 1rem; }

.site-footer { padding: 2rem 0; color: var(--color-muted); font-size: .875rem; }

@media (max-width: 640px) {
  .site-header li:not(:last-child) { display: none; }
}