:root {
  --jls-purple: #B39FD4;
  --jls-lime: #ECF4CD;
  --jls-blue: #B9E2F8;
  --jls-pink: #FCCDC7;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Nunito', system-ui, sans-serif;
  background: #fff;
  color: #2b2240;
}

h1, h2, h3, h4, .font-display {
  font-family: 'Fredoka', system-ui, sans-serif;
  letter-spacing: -0.01em;
}

/* ---------- Keyframe animations ---------- */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(2deg); }
}
@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-22px) rotate(3deg); }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
@keyframes bounce-soft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes pop-in {
  0%   { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}
@keyframes blob {
  0%, 100% { border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%; }
  50%      { border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%; }
}

.animate-float       { animation: float 6s ease-in-out infinite; }
.animate-float-slow  { animation: float-slow 8s ease-in-out infinite; }
.animate-wiggle      { animation: wiggle 3s ease-in-out infinite; }
.animate-bounce-soft { animation: bounce-soft 2.4s ease-in-out infinite; }
.animate-blob        { animation: blob 12s ease-in-out infinite; }

/* Gradient hero background */
.hero-gradient {
  background:
    radial-gradient(circle at 15% 20%, #FCCDC7 0%, transparent 45%),
    radial-gradient(circle at 85% 15%, #B9E2F8 0%, transparent 50%),
    radial-gradient(circle at 75% 85%, #ECF4CD 0%, transparent 50%),
    radial-gradient(circle at 20% 90%, #B39FD4 0%, transparent 45%),
    #fff;
}

.section-soft {
  background:
    radial-gradient(circle at 0% 0%, rgba(185,226,248,0.35) 0%, transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(252,205,199,0.35) 0%, transparent 40%),
    #fff;
}

/* Card polish */
.card-pop {
  transition: transform 300ms ease, box-shadow 300ms ease;
}
.card-pop:hover {
  transform: translateY(-6px) rotate(-0.5deg);
  box-shadow: 0 20px 40px -20px rgba(179,159,212,0.55);
}

/* Soft drop shadow filter for SVGs */
.svg-soft-shadow {
  filter: drop-shadow(0 8px 12px rgba(60,40,90,0.15));
}

/* Buttons */
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: #B39FD4; color: white;
  padding: 0.85rem 1.6rem; border-radius: 9999px;
  font-weight: 700;
  box-shadow: 0 10px 25px -10px rgba(179,159,212,0.8);
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.btn-primary:hover {
  background: #9e85c4;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 30px -10px rgba(179,159,212,0.9);
}
.btn-secondary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: white; color: #6c4fa1;
  padding: 0.85rem 1.6rem; border-radius: 9999px;
  font-weight: 700; border: 2px solid #B39FD4;
  transition: transform 200ms ease, background 200ms ease, color 200ms ease;
}
.btn-secondary:hover {
  background: #B39FD4; color: white; transform: translateY(-2px) scale(1.02);
}

/* FAQ accordion */
details.faq {
  background: white;
  border: 2px solid #ECF4CD;
  border-radius: 1.25rem;
  padding: 1.1rem 1.4rem;
  transition: border-color 250ms ease, box-shadow 250ms ease;
}
details.faq[open] {
  border-color: #B39FD4;
  box-shadow: 0 12px 30px -18px rgba(179,159,212,0.6);
}
details.faq summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'Fredoka', sans-serif;
  font-size: 1.1rem;
  color: #4a3873;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+";
  font-size: 1.6rem;
  color: #B39FD4;
  transition: transform 250ms ease;
  line-height: 1;
}
details.faq[open] summary::after {
  content: "−";
  transform: rotate(0deg);
}
details.faq p {
  margin-top: 0.75rem;
  color: #5b4f73;
  line-height: 1.6;
}

/* Focus rings */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid #B39FD4;
  outline-offset: 3px;
  border-radius: 6px;
}

/* Skip link */
.skip-link {
  position: absolute; left: -999px; top: 8px;
  background: #B39FD4; color: white;
  padding: 0.6rem 1rem; border-radius: 9999px; z-index: 100;
  font-weight: 700;
}
.skip-link:focus { left: 8px; }

/* Mobile nav */
.mobile-nav {
  max-height: 0; overflow: hidden;
  transition: max-height 300ms ease;
}
.mobile-nav.open { max-height: 500px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
}