/* ===================================================
   iPay — Global Styles
   Colors: primary #0F8B62 | secondary #4B5563 | tertiary #0A1628
   Fonts: Geist (sans) | Geist Mono (mono)
=================================================== */

/* ---- Nav dropdown ---- */
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  transform: none;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  transition: clip-path 0.3s ease;
  pointer-events: none;
  /* 8px top padding creates visual breathing room without a real gap */
  padding-top: 8px;
}

/* Invisible bridge above the dropdown so hover isn't lost crossing the gap */
.nav_list_menu::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -20px;
  right: -20px;
  height: 12px;
  z-index: 50;
}

.nav_list_menu:hover .dropdown {
  clip-path: polygon(0 0, 100% 0, 100% 102%, 0 102%);
  pointer-events: auto;
}

/* ---- Header shadow on scroll ---- */
#site-header.scrolled {
  box-shadow: 0 1px 16px rgba(10, 22, 40, 0.08);
}

/* ---- Hero ---- */
.hero__section {
  background: #ffffff;
}

.hero__image img {
  animation: fadeSlideRight 0.9s ease-out both;
}

/* ---- Feature cards ---- */
.feature-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(10, 22, 40, 0.35);
}

/* ---- Stats section mono font for numbers ---- */
.stats__section .font-mono {
  font-family: "Geist Mono", ui-monospace, monospace;
}

/* ---- Pricing card hover ---- */
.pricing .bg-white {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.pricing .bg-white:hover {
  box-shadow: 0 8px 32px rgba(15, 139, 98, 0.12);
  transform: translateY(-2px);
}

/* ---- CTA section ---- */
.cta__section {
  background: #F5F5EF;
}

/* ---- Footer ---- */
footer {
  background: #EFEEE9;
}

/* ---- Scroll-to-top button ---- */
#scroll-to-top-btn {
  z-index: 99;
}

/* ---- Keyframe animations ---- */
@keyframes fadeSlideRight {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeSlideLeft {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ---- Responsive tweaks ---- */
@media (max-width: 767px) {
  .hero__section {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .stats__section .grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- Utility: primary/10 background via CSS since Tailwind JIT may not catch it ---- */
.bg-primary-10 {
  background-color: rgba(15, 139, 98, 0.1);
}
.border-primary-30 {
  border-color: rgba(15, 139, 98, 0.3);
}

/* ---- Trust bar ---- */
.trust-bar {
  background: #F9FAFB;
}

/* ---- Problem section dark card ---- */
.problem .bg-darkCard {
  background: #0D1E38;
}

/* ---- Smooth image load placeholder ---- */
img {
  transition: opacity 0.3s ease;
}
img[src=""] {
  opacity: 0;
}

/* ====================================================
   Scroll-reveal (fade + rise). JS adds `.reveal-init` to
   sections, then `.is-revealed` when they enter the viewport.
   Because the hidden state is applied by JS, content stays
   visible if JS is disabled (progressive enhancement).
==================================================== */
.reveal-init {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal-init.is-revealed {
  opacity: 1;
  transform: none;
}

/* ---- Card hover lift (apply `.hover-lift` to cards) ---- */
.hover-lift {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(10, 22, 40, 0.10);
  border-color: rgba(15, 139, 98, 0.35);
}
/* Dark cards get a green-tinted glow instead of a grey shadow */
.hover-lift-dark {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hover-lift-dark:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 48px rgba(15, 139, 98, 0.22);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal-init {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hover-lift:hover,
  .hover-lift-dark:hover {
    transform: none;
  }
}