@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Nunito:wght@400;600;700;800&display=swap');

body {
  font-family: 'Nunito', sans-serif;
  background-color: #FFF9F0;
  color: #3D3A36;
  overflow-x: hidden;
}

h1, h2, h3, h4, .font-display {
  font-family: 'Baloo 2', cursive;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #FFF9F0; }
::-webkit-scrollbar-thumb { background: #2EC4B6; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #1ba396; }

/* ---------- Blob shapes ---------- */
.blob {
  border-radius: 60% 40% 55% 45% / 55% 45% 60% 40%;
  animation: blob-morph 8s ease-in-out infinite;
}
.blob-2 { border-radius: 45% 55% 50% 50% / 55% 50% 45% 50%; animation-delay: 2s; }
.blob-3 { border-radius: 55% 45% 45% 55% / 45% 55% 50% 45%; animation-delay: 4s; }

@keyframes blob-morph {
  0%, 100% { border-radius: 60% 40% 55% 45% / 55% 45% 60% 40%; }
  50% { border-radius: 45% 55% 40% 60% / 50% 60% 40% 50%; }
}

/* ---------- Floating decoration ---------- */
.float-slow { animation: floaty 6s ease-in-out infinite; }
.float-slower { animation: floaty 9s ease-in-out infinite; }
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(8deg); }
}

/* ---------- Wiggly text underline ---------- */
.wiggle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M0 8 Q 25 0, 50 6 T 100 6 T 150 6 T 200 6' fill='none' stroke='%23FFC53D' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 0.45em;
  padding-bottom: 0.15em;
}

/* ---------- Nav dropdown ---------- */
.nav-item { position: relative; }
.nav-dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.25s ease;
  pointer-events: none;
}
.nav-item:hover .nav-dropdown,
.nav-item.open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* ---------- Card hover ---------- */
.card-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card-lift:hover { transform: translateY(-8px) rotate(-0.5deg); box-shadow: 0 20px 40px -12px rgba(61, 58, 54, 0.18); }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: all 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ---------- Marquee ---------- */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track { animation: marquee 28s linear infinite; }

/* ---------- Section number pill ---------- */
.num-badge {
  font-family: 'Baloo 2', cursive;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  font-weight: 700;
  flex-shrink: 0;
}