/* Custom Properties */
:root {
  --border: 30 15% 88%;
  --background: 30 14% 98%;
  --foreground: 0 0% 20%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 20%;
  --primary: 16 64% 47%;
  --primary-foreground: 0 0% 100%;
  --secondary: 30 20% 94%;
  --secondary-foreground: 0 0% 20%;
  --muted: 30 20% 94%;
  --muted-foreground: 0 0% 40%;
  --accent: 152 44% 30%;
  --accent-foreground: 0 0% 100%;
  --ring: 16 64% 47%;
  --input: 30 15% 88%;
  --radius: .625rem;
  --charcoal: 0 0% 10%;
  --charcoal-foreground: 0 0% 100%;
  --sand: 30 33% 95%;
}

/* Base styles */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  margin: 0;
  padding: 0;
}

/* Section backgrounds */
.section-sand {
  background-color: hsl(var(--sand));
}

/* Hero overlay */
.hero-overlay {
  background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.7) 100%);
}

/* Scroll reveal animations */
.scroll-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* FAQ Accordion */
.faq-item {
  overflow: hidden;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

.faq-item.open .faq-answer {
  max-height: 200px;
  padding-bottom: 1.25rem;
}

.faq-item.open .faq-chevron {
  transform: rotate(180deg);
}

.faq-chevron {
  transition: transform 0.2s ease;
}

/* Mobile menu */
.mobile-menu {
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}

.mobile-menu.open {
  transform: translateX(0);
}

/* Scroll to top button */
.scroll-top-btn {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.scroll-top-btn.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Staggered animation delays */
.scroll-reveal[data-delay="1"] { transition-delay: 0.1s; }
.scroll-reveal[data-delay="2"] { transition-delay: 0.2s; }
.scroll-reveal[data-delay="3"] { transition-delay: 0.3s; }
.scroll-reveal[data-delay="4"] { transition-delay: 0.4s; }
.scroll-reveal[data-delay="5"] { transition-delay: 0.5s; }