:root {
  /* Dreamy Pastels — the only 4 accent colors used anywhere */
  --lavender: #E6E6FA;
  --baby-blue: #ADD8E6;
  --mint: #98FF98;
  --peach: #FFDAB9;

  /* Neutrals */
  --ink: #211F2E;
  --ink-soft: #55536b;
  --surface: #FBFAFE;

  /* Fonts */
  --font-head: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Spacing */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 88px;
  --space-7: 128px;

  /* Radius */
  --radius-full: 9999px;
  --radius-xl: 40px;
  --radius-lg: 28px;
  --radius-md: 24px;
  --radius-sm: 16px;
  --radius-xs: 4px;

  /* Type scale */
  --text-xs: 13px;
  --text-sm: 14.5px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 22px;
  --text-xl: 26px;
  --text-2xl: 36px;
  --text-h2: clamp(28px, 3.6vw, 42px);
  --text-h1: clamp(36px, 5.5vw, 60px);
}

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

body {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ===== BUTTONS ===== */
.btn-primary {
  background: var(--mint);
  color: var(--ink);
  border: none;
  border-radius: var(--radius-full);
  padding: 16px 30px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(152, 255, 152, 0.35);
}

.link-ghost {
  font-weight: 500;
  font-size: 15.5px;
  border-bottom: 1px solid transparent;
  color: var(--ink);
  transition: border-color 0.15s;
}
.link-ghost:hover { border-bottom-color: var(--ink); }

/* ===== SECTIONS ===== */
.section { padding: var(--space-6) 0; }
.section-head { max-width: 620px; margin-bottom: 52px; }

.eyebrow-label {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--ink);
  background: var(--baby-blue);
  padding: 5px 14px;
  border-radius: var(--radius-full);
  margin-bottom: 18px;
}
.section-head h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.12;
}
.section-head p {
  margin-top: 14px;
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* ===== UTILITY ===== */
.text-center { text-align: center; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }