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

html {
  scroll-behavior: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: 1.6;
  overflow-x: hidden;
}

/* === Film grain overlay === */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}

/* === Scroll progress bar === */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  z-index: 9999;
  transition: width 50ms linear;
}

/* === Section pattern === */
.section {
  position: relative;
  width: 100%;
  padding: var(--space-4xl) 0;
  overflow: hidden;
}

.section--alt {
  background-color: var(--surface-container-low);
}

.section--dark {
  background-color: var(--surface-container-lowest);
}

/* Smooth transitions between alternating sections */
.section--alt::before,
.section--alt::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 200px;
  pointer-events: none;
  z-index: 1;
}

.section--alt::before {
  top: 0;
  background: linear-gradient(to bottom, var(--surface), transparent);
}

.section--alt::after {
  bottom: 0;
  background: linear-gradient(to bottom, transparent, var(--surface));
}

.section__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 0 var(--content-padding);
}

.section__inner--narrow {
  max-width: var(--content-max);
}

/* === Typography === */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: #ffffff;
  letter-spacing: -0.04em;
  line-height: 1.15;
}

h1 {
  font-size: var(--text-display-lg);
  font-weight: 700;
}

h2 {
  font-size: var(--text-display-md);
  font-weight: 700;
  margin-bottom: var(--space-2xl);
}

h3 {
  font-size: var(--text-display-sm);
  font-weight: 600;
}

p {
  color: var(--on-surface);
  max-width: 65ch;
}

.label {
  font-family: var(--font-label);
  font-size: var(--text-label-md);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
}

.label--muted {
  color: var(--on-surface-variant);
}

/* === Section heading with label === */
.section-heading {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.section-heading .label {
  display: none;
}

.section-heading h2 {
  margin-bottom: var(--space-md);
}

.section-heading p {
  margin: 0 auto;
  color: var(--on-surface-variant);
}

/* === Links === */
a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--secondary);
}

/* === Lists === */
ul, ol {
  list-style: none;
}

/* === Images === */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* === Selection === */
::selection {
  background: var(--primary);
  color: var(--on-primary);
}