*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* Keyboard focus stays visible; mouse clicks don't show a ring */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

svg, svg * {
  pointer-events: none;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Clip horizontal overflow from the wide ambient glow orbs at the root, so
     the page never grows wider than the viewport. This keeps the fixed nav
     pill centred on mobile (the fixed-positioning ICB stays at viewport width)
     without per-section clipping, which would seam the glows between sections. */
  overflow-x: clip;
}

/* Film grain — static SVG noise over everything, ties the glass and glows together */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

body {
  background-color: var(--bg);
  background-image:
    radial-gradient(rgba(90, 150, 240, 0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--size-base);
  font-weight: 300;
  line-height: var(--lead-relaxed);
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lead-tight);
  letter-spacing: var(--track-tight);
  color: var(--text);
}

p {
  color: rgba(255, 255, 255, 0.82);
  line-height: var(--lead-relaxed);
}

h1, h2, h3, h4, h5, h6, p, span, li, a, label, td, th {
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

img, video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ── Reusable components ───────────────────────────── */

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

/* Eyebrow label above headings */
.label {
  display: inline-block;
  font-size: var(--size-xs);
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--accent);
}

/* Thin horizontal rule */
.rule {
  width: 100%;
  height: 1px;
  background: var(--border);
}