/* Custom properties from design */
:root {
  --accent-blue: #6CB4EE;
  --accent-coral: #FF6B6B;
  --accent-green: #7BC67E;
  --accent-pink: #F8A4B8;
  --accent-purple: #C4A8E0;
  --accent-yellow: #FFD966;
  --bg-cream: #FFF9F0;
  --bg-green-light: #D4EDDA;
  --bg-light: #F6F7F8;
  --bg-pink-light: #FDE8E8;
  --bg-white: #FFFFFF;
  --bg-yellow: #FFF3CD;
  --border-light: #E5E7EB;
  --text-primary: #1A1A1A;
  --text-secondary: #6B7280;
  --text-white: #FFFFFF;
}

/* Font families */
.font-heading {
  font-family: "Bricolage Grotesque", sans-serif;
}

.font-body {
  font-family: "DM Sans", sans-serif;
}

/* Decorative elements base */
.deco {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.deco-rect {
  position: absolute;
  pointer-events: none;
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Gradient backgrounds */
.bg-gradient-yellow {
  background: linear-gradient(180deg, #FFE082 0%, #FFD54F 100%);
}

.bg-gradient-green {
  background: linear-gradient(180deg, #A5D6A7 0%, #81C784 100%);
}

/* Lucide icon styling */
.lucide-icon {
  font-family: 'lucide';
  font-style: normal;
  font-weight: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Section decorations container */
.section-deco {
  position: relative;
  overflow: hidden;
}

/* CTA button hover */
.btn-cta {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 107, 107, 0.3);
}

.btn-outline:hover {
  background-color: var(--bg-light);
}

/* Card hover */
.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* Step card */
.step-card {
  transition: transform 0.2s ease;
}

.step-card:hover {
  transform: scale(1.02);
}

/* Feature card */
.feat-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* Mobile nav animation */
[data-mobile-menu-target="menu"] {
  transition: max-height 0.3s ease, opacity 0.3s ease;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

[data-mobile-menu-target="menu"].open {
  max-height: 400px;
  opacity: 1;
}

/* Scroll to top */
.scroll-top-btn {
  transition: opacity 0.3s ease, transform 0.3s ease;
}