/* ===== RESET & BASE ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1rem; }
body {
  background-color: var(--bg);
  color: var(--on-surface);
  font-family: 'Manrope', sans-serif;
  line-height: 1.6;
  transition: background-color 0.4s ease, color 0.4s ease;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; font-family: inherit; }
img { max-width: 100%; display: block; }

/* ===== TYPOGRAPHY ===== */
.font-headline { font-family: 'Space Grotesk', sans-serif; }
.font-body { font-family: 'Manrope', sans-serif; }
.font-label { font-family: 'Inter', sans-serif; }

/* ===== UTILITIES ===== */
.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.glass { background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); }
.kinetic-gradient { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%); }
.section-transition { transition: background-color 0.4s ease; }

/* Screen reader only (accessible labels) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Fade-in on scroll */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }