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

:root {
  --peach: #FFB088;
  --cream: #FFF8F0;
  --warm-pink: #FF6B8A;
  --soft-brown: #8B6F5E;
  --dark-choc: #3D2B1F;
  --frosting: #FDE8D0;
  --mint: #A8E6CF;
  --sky: #87CEEB;
  --white: #FFFFFF;
  --shadow: rgba(61, 43, 31, 0.06);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Outfit', sans-serif;
  background: var(--cream);
  color: var(--dark-choc);
  overflow-x: hidden;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* Buttons */
.btn-primary {
  font-family: 'Outfit', sans-serif; font-size: 17px; font-weight: 600;
  padding: 18px 40px; background: var(--warm-pink); color: var(--white);
  border: none; border-radius: 50px; cursor: pointer; transition: all 0.3s; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-primary:hover { background: #e85a79; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(255,107,138,0.25); }
.btn-ghost {
  font-family: 'Outfit', sans-serif; font-size: 17px; font-weight: 500;
  padding: 18px 40px; background: transparent; color: var(--dark-choc);
  border: 1.5px solid rgba(61,43,31,0.15); border-radius: 50px;
  cursor: pointer; transition: all 0.3s; text-decoration: none;
}
.btn-ghost:hover { border-color: var(--dark-choc); transform: translateY(-2px); background: var(--white); }

/* Section defaults */
.section { padding: 120px 24px; position: relative; z-index: 1; }
.section-inner { max-width: 1100px; margin: 0 auto; }
.section-header { text-align: center; margin-bottom: 72px; }
.section-tag {
  font-family: 'Kalam', cursive; font-size: 16px; font-weight: 400;
  color: var(--warm-pink); margin-bottom: 14px; display: block;
}
.section-title { font-family: 'Fredoka', sans-serif; font-size: clamp(32px, 5vw, 50px); font-weight: 700; color: var(--dark-choc); margin-bottom: 18px; line-height: 1.1; }
.section-desc { font-size: 18px; font-weight: 300; line-height: 1.7; color: var(--soft-brown); max-width: 540px; margin: 0 auto; }

/* Background blobs */
.bg-blob { position: fixed; border-radius: 50%; filter: blur(80px); opacity: 0.08; pointer-events: none; z-index: 0; }
.bg-blob-1 { width: 600px; height: 600px; background: var(--warm-pink); top: -200px; right: -150px; }
.bg-blob-2 { width: 500px; height: 500px; background: var(--mint); bottom: 10%; left: -180px; }
.bg-blob-3 { width: 400px; height: 400px; background: var(--peach); top: 50%; right: 5%; }