:root {
  --dark: #111111;
  --surf: #1a1a1a;
  --card: #222222;
  --accent: #3366cc;
  --accent-light: #5588ee;
  --wh: #f5f5f5;
  --muted: #aaaaaa;
  --faint: #777777;
  --nav-h: 72px;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: var(--dark); color: var(--wh); }
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.site-nav { min-height: var(--nav-h); display: flex; align-items: center; background: var(--surf); }
.logo { color: var(--wh); text-decoration: none; font-weight: 700; }
.page-hero { padding: 64px 0 48px; background: var(--surf); text-align: center; }
.eyebrow { display: block; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-light); margin-bottom: 12px; }
.ph-h1 { font-size: clamp(28px, 4vw, 48px); margin: 0 0 12px; }
.ph-sub { color: var(--muted); max-width: 640px; margin: 0 auto; }
.site-main { padding: 48px 0 80px; }
.footer { padding: 32px 0; background: var(--card); color: var(--muted); text-align: center; }