/* ===== Base ===== */
html {
  scroll-behavior: smooth;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  scroll-padding-top: 80px;
}

body {
  overflow-x: hidden;
}

/* ===== Scroll Animation Classes ===== */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-on-scroll.delay-1 { transition-delay: 0.1s; }
.animate-on-scroll.delay-2 { transition-delay: 0.2s; }
.animate-on-scroll.delay-3 { transition-delay: 0.3s; }
.animate-on-scroll.delay-4 { transition-delay: 0.4s; }
.animate-on-scroll.delay-5 { transition-delay: 0.5s; }

/* ===== Nav Scroll Shadow ===== */
.nav-scrolled {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ===== Nav Dropdown ===== */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 50;
}

.nav-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ===== Mobile Menu ===== */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.mobile-menu.open {
  max-height: 2000px;
  overflow-y: auto;
}

/* ===== Hero Splash Image ===== */
.hero-splash {
  position: relative;
  overflow: hidden;
}

.hero-splash__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-splash__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-splash__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 27, 45, 0.85);
  z-index: 1;
}

.hero-email-input::placeholder {
  color: rgba(148, 163, 184, 0.8);
}

/* ===== Dashboard Mockup ===== */
.dashboard-frame {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ===== Logo Bar Scroll (mobile) ===== */
.logo-scroll-track {
  display: flex;
  animation: logoScroll 30s linear infinite;
  width: max-content;
}

.logo-scroll-track:hover {
  animation-play-state: paused;
}

@keyframes logoScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.logo-item {
  filter: grayscale(100%);
  opacity: 0.4;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.logo-item:hover {
  filter: grayscale(0%);
  opacity: 1;
}

@media (min-width: 768px) {
  .logo-scroll-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
  }
}

/* ===== Feature Tabs ===== */
.feature-tab {
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
  cursor: pointer;
}

.feature-tab.active {
  border-left-color: #00A651;
  background: #F0FBF5;
}

.feature-tab:hover:not(.active) {
  background: #F8FAFC;
}

.tab-panel {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tab-panel.active {
  display: block;
  opacity: 1;
}

/* ===== Carousel (Testimonials) ===== */
.carousel-container {
  overflow: hidden;
  position: relative;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
}

.carousel-card {
  flex: 0 0 100%;
  min-width: 0;
}

.carousel-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #CBD5E1;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
  padding: 6px;
  box-sizing: content-box; /* padding adds to hit area, not visual size */
  background-clip: content-box;
  margin: -6px;
}

.carousel-dot.active {
  background: #00A651;
  background-clip: content-box;
  transform: scale(1.2);
}

/* ===== FAQ Accordion ===== */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

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

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

/* ===== Pricing Toggle ===== */
.pricing-toggle-track {
  width: 52px;
  height: 30px;
  background: #CBD5E1;
  border-radius: 15px;
  position: relative;
  cursor: pointer;
  transition: background 0.3s ease;
  border: none;
  padding: 0;
}

.pricing-toggle-track.active {
  background: #00A651;
}

.pricing-toggle-thumb {
  width: 26px;
  height: 26px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.pricing-toggle-track.active .pricing-toggle-thumb {
  transform: translateX(22px);
}

/* ===== Phosphor fill stars (testimonial ratings) ===== */
.ph-fill.ph-star {
  color: #F59E0B;
}

/* ===== Selection Color ===== */
::selection {
  background: #D4F5E2;
  color: #008C44;
}

/* ===== Focus Styles ===== */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #00A651;
  outline-offset: 2px;
  border-radius: 4px;
}