:root {
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
}

/* =========================================
   Premium Button Interactions
   ========================================= */
.btn1, .w-button, .submit-button {
  transition: all 0.4s var(--ease-out-expo) !important;
  position: relative;
  overflow: hidden;
  /* Ensure z-index is right for shadows */
  z-index: 1;
}

.btn1:hover, .w-button:hover, .submit-button:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2);
  filter: brightness(1.1);
}

.btn1:active, .w-button:active, .submit-button:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.2);
}

/* =========================================
   Nav Links & Footer Links Animation
   ========================================= */
.navlink, .footer-link {
  position: relative;
  transition: color 0.3s ease;
}

.navlink::after, .footer-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: currentColor; /* Matches the text color */
  transition: width 0.4s var(--ease-out-expo);
  opacity: 0.7;
}

.navlink:hover::after, .footer-link:hover::after {
  width: 100%;
}

.navlink:hover, .footer-link:hover {
  opacity: 0.9;
}

/* =========================================
   Card Lift & Hover Effects
   ========================================= */
.card-green-img-div, 
.test-card, 
.review-card, 
.footer-block, 
.flexibility-div-content,
.team-member-div-info {
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo) !important;
}

/* Specific hover effect for feature cards */
.card-green-img-div:hover, .test-card:hover, .review-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
  z-index: 2; /* Bring to front */
}

/* Subtle lift for other blocks */
.flexibility-div-content:hover,
.team-member-div-info:hover {
    transform: translateY(-3px);
}

/* =========================================
   Input Fields Focus
   ========================================= */
.w-input, .text-field, .text-field-2 {
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
}

.w-input:focus, .text-field:focus {
  border-color: #7aca8c !important; /* Match green-2 */
  box-shadow: 0 0 0 3px rgba(122, 202, 140, 0.2) !important;
  transform: translateY(-1px);
}

/* =========================================
   Scroll Reveal Animations
   ========================================= */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo);
  will-change: opacity, transform;
}

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

/* Stagger delays for children */
.reveal-stagger-1 { transition-delay: 0.1s; }
.reveal-stagger-2 { transition-delay: 0.2s; }
.reveal-stagger-3 { transition-delay: 0.3s; }

/* =========================================
   Image Hover Zoom (Subtle)
   ========================================= */
img {
    transition: transform 0.5s var(--ease-out-expo);
}

.w-inline-block:hover img, 
.card-green-img-div:hover img {
    transform: scale(1.03);
}

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