:root {
  --cream: #FFF9E6;
  --mint: #7DD3C0;
  --mint-2: #B5E8DC;
  --peach: #FFB7A8;
  --peach-2: #FFD4C9;
  --sky: #88C5E8;
  --sun: #FFD66B;
  --ink: #2D2547;
  --line: rgba(45, 37, 71, 0.1);
}

html, body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

.font-display {
  font-family: 'Fredoka', 'Nunito', sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.font-display-bold {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
}

.bubble-btn {
  background: var(--ink);
  color: var(--cream);
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  padding: 16px 32px;
  border-radius: 999px;
  box-shadow: 0 6px 0 #1a1530;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.bubble-btn:hover {
  transform: translateY(2px);
  box-shadow: 0 4px 0 #1a1530;
}

.bubble-btn-mint {
  background: var(--mint);
  color: var(--ink);
  box-shadow: 0 6px 0 #5cb5a3;
}
.bubble-btn-mint:hover { box-shadow: 0 4px 0 #5cb5a3; }

.bubble-btn-peach {
  background: var(--peach);
  color: var(--ink);
  box-shadow: 0 6px 0 #e58e7d;
}

.bubble-btn-sun {
  background: var(--sun);
  color: var(--ink);
  box-shadow: 0 6px 0 #d4ad3a;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

.cloud {
  position: absolute;
  background: white;
  border-radius: 999px;
  box-shadow:
    25px 0 0 -5px white,
    -25px 0 0 -5px white,
    50px 0 0 -10px white,
    -50px 0 0 -10px white;
  pointer-events: none;
}

.wavy-divider {
  height: 60px;
  background-repeat: repeat-x;
  background-size: 120px 60px;
}

.card-tilt {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card-tilt:hover {
  transform: translateY(-6px) rotate(-1deg);
}

.sticker {
  display: inline-block;
  padding: 6px 14px;
  background: white;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 13px;
  transform: rotate(-3deg);
}

.dotted-underline {
  background-image: radial-gradient(circle, var(--peach) 30%, transparent 30%);
  background-size: 8px 8px;
  background-repeat: repeat-x;
  background-position: bottom 0 left 0;
  padding-bottom: 14px;
}

.bounce-anim {
  animation: bounce 3s ease-in-out infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.spin-slow { animation: spin 28s linear infinite; }
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.scribble-circle {
  position: absolute;
  border: 4px solid var(--peach);
  border-radius: 50%;
  border-top-color: transparent;
  transform: rotate(-25deg);
}