/* ═══════════════════════════════════════════════════════════
   BASE — Resets, Body, Page Layout, Section Headers
   ═══════════════════════════════════════════════════════════ */

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: #f9f8f8;
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; border: none; font-family: inherit; }

/* Full-page gradient overlay — matches original Framer "Gradient Bg" layer */
.page-gradient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    #fafafa 0%,
    #f9f8f8 36%,
    #f4f1ee 45%,
    #f4f1ee 51%,
    #e2ecf6 73%,
    #a7cbf2 125%
  );
}

/* All page content sits above the gradient */
.page-content {
  position: relative;
  z-index: 1;
}

/* Section headers (reusable across sections) */
.section-label {
  font-family: var(--font-mono);
  font-size: 13px; color: var(--accent-blue-dark);
  text-transform: lowercase;
  margin-bottom: 12px;
}

.section-title {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 700; line-height: 1.12;
  letter-spacing: -1.5px;
}

/* Bottom gradient wrapper */
.bottom-gradient-wrap {
  position: relative;
  background: linear-gradient(180deg, #9cc1e7 0%, #eddfd0 100%);
  min-height: 80vh;
  padding-top: 80px;
}