:root {
  --bg: #e6e5e8;
  --text: #201f24;
  --accent: #6f5cff;
  --glow: 0 0 18px var(--accent), 0 0 36px var(--accent);
  /* Header/footer use mix-blend-mode: difference, which inverts everything
     inside them - so they glow with the inverted accent (#6f5cff -> #90a300)
     to come out blue on screen. */
  --accent-inverted: #90a300;
  --glow-inverted: 0 0 18px var(--accent-inverted), 0 0 36px var(--accent-inverted);
  --font: 'Poppins', sans-serif;
  --container-max: 1600px;
  --gutter: 60px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}

body {
  /* Clears the fixed header (56px tall - header.css) on every page except
     Landing, which overrides this back to 0 (home.css) since it manages
     its own full-height layout with the header overlaid on the video. */
  padding-top: 56px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

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

.glow {
  text-shadow: var(--glow);
}

main {
  flex: 1;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

@media (max-width: 700px) {
  :root { --gutter: 24px; }
}