html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--color-background);
  color: var(--color-text);
  min-height: 100%;
  overflow-x: hidden;
}
main {
  min-height: 60vh;
  padding-top: var(--header-h);
}
@media (max-width: 900px){ main { padding-top: var(--header-h-mobile); } }

a { color: var(--color-text); transition: color .18s var(--ease); }
a:hover { color: var(--color-link-hover); }

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

.section { padding: 32px 0; }
.section-sm { padding: 40px 0; }
@media (max-width: 700px){ .section { padding: 44px 0; } }

.eyebrow {
  display: inline-block; font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--color-link); font-weight: 700; margin-bottom: 12px;
}
.h-display { font-family: var(--font-display); letter-spacing: .01em; text-transform: uppercase; }
.h1 { font-size: clamp(36px, 6vw, 72px); font-family: var(--font-display); text-transform: uppercase; line-height: 1; }
.h2 { font-size: clamp(28px, 3.6vw, 44px); font-family: var(--font-display); text-transform: uppercase; }
.h3 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; }
.muted { color: var(--color-text-muted); }
.text-red { color: var(--color-primary); }
.text-positive { color: var(--color-pix); }
.center { text-align: center; }
.divider { height: 1px; background: var(--color-border); margin: 24px 0; }

/* Skip link */
.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 9999;
  background: var(--color-primary); color: #fff; padding: 10px 16px; border-radius: var(--radius);
}
.skip-link:focus { left: 16px; }

/* Selection */
::selection { background: var(--color-primary); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-background); }
::-webkit-scrollbar-thumb { background: var(--color-surface-hi); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary-dark); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}