/* ============================================================
   Base — Body, selection, canvas, container, section defaults
   ============================================================ */

body {
  font-family: var(--md-sys-typescale-body-font);
  font-size: var(--md-sys-typescale-body-size);
  font-weight: var(--md-sys-typescale-body-weight);
  color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-surface);
}

::selection {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

/* ── Particle Canvas ───────────────────────────────────────── */

#particles-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

/* ── Container ─────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 5vw, 4rem);
}

/* ── Section Base ──────────────────────────────────────────── */

.section {
  padding-block: clamp(4rem, 10vh, 8rem);
}

.section-heading {
  font-family: var(--md-sys-typescale-display-font);
  font-size: var(--md-sys-typescale-headline-size);
  font-weight: var(--md-sys-typescale-headline-weight);
  color: var(--md-sys-color-on-surface);
  margin-bottom: 2rem;
  position: relative;
}

.section-heading::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-full);
  margin-top: 0.75rem;
}