/* Greenlight Landing Page - Custom Styles */

/* ===== CSS Variables ===== */
:root {
  --color-primary: #28C52E;
  --color-primary-50: #EAFBEB;
  --color-primary-100: #C8F4CA;
  --color-primary-200: #93E997;
  --color-primary-300: #5EDE64;
  --color-primary-400: #38D03F;
  --color-primary-500: #28C52E;
  --color-primary-600: #20A325;
  --color-primary-700: #197F1D;
  --color-primary-800: #125B14;
  --color-primary-900: #0B370C;

  --color-dark: #111827;
  --color-dark-card: #1F2937;
  --color-dark-box: #24303F;
  --color-dark-box-2: #1A222C;

  --color-text-light: #F3F4F6;
  --color-text-muted: #AEB7C0;
  --color-text-muted-2: #64748B;

  --color-border-dark: #2E3A5F;

  --color-amber: #F59E0B;
  --color-success: #10B981;
}

/* ===== Glow Effects ===== */
.glow-green {
  box-shadow: 0 0 20px rgba(40, 197, 46, 0.3), 0 0 60px rgba(40, 197, 46, 0.1);
}

.glow-green-sm {
  box-shadow: 0 0 10px rgba(40, 197, 46, 0.2), 0 0 30px rgba(40, 197, 46, 0.08);
}

.glow-green-lg {
  box-shadow: 0 0 40px rgba(40, 197, 46, 0.4), 0 0 80px rgba(40, 197, 46, 0.15);
}

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

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

/* Staggered delays for grid items */
.animate-delay-100 { transition-delay: 0.1s; }
.animate-delay-200 { transition-delay: 0.2s; }
.animate-delay-300 { transition-delay: 0.3s; }
.animate-delay-400 { transition-delay: 0.4s; }
.animate-delay-500 { transition-delay: 0.5s; }
.animate-delay-600 { transition-delay: 0.6s; }

/* Fade-up animation */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Slide-in from left */
.slide-in-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.slide-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide-in from right */
.slide-in-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.slide-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ===== Screenshot Placeholder Perspective ===== */
.screenshot-placeholder {
  perspective: 1000px;
}

.screenshot-placeholder-inner {
  transform: rotateY(-5deg) rotateX(2deg);
  transition: transform 0.4s ease-out;
}

.screenshot-placeholder-inner:hover {
  transform: rotateY(0deg) rotateX(0deg);
}

.screenshot-placeholder-inner-right {
  transform: rotateY(5deg) rotateX(2deg);
  transition: transform 0.4s ease-out;
}

.screenshot-placeholder-inner-right:hover {
  transform: rotateY(0deg) rotateX(0deg);
}

/* ===== Navbar Blur ===== */
.nav-blur {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ===== Green Gradient Border (for Pro card) ===== */
.green-gradient-border {
  position: relative;
  border: 2px solid transparent;
  background: linear-gradient(#1F2937, #1F2937) padding-box,
              linear-gradient(135deg, #28C52E, #10B981, #28C52E) border-box;
  box-shadow: 0 0 24px rgba(40, 197, 46, 0.15);
}

/* ===== Hero Staggered Animations ===== */
.hero-animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

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

/* ===== Mobile Menu ===== */
#mobile-menu.open {
  transform: translateX(0);
}

/* ===== Industry Marquee ===== */
.marquee-container {
  overflow: hidden;
  white-space: nowrap;
}

.marquee-track {
  display: inline-block;
  animation: marquee-scroll 30s linear infinite;
}

.marquee-item {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--color-text-muted-2);
  padding: 0 0.5rem;
}

.marquee-separator {
  color: var(--color-border-dark);
  padding: 0 0.75rem;
}

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

/* ===== FAQ Accordion ===== */
.faq-icon {
  transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
}

/* ===== Final CTA Background ===== */
.final-cta-bg {
  background: radial-gradient(ellipse at center, rgba(40, 197, 46, 0.08) 0%, transparent 70%);
}