/* =========================================================
   AIO VEND — SMART VENDING FEATURES SECTION
   Enterprise • Glass • SEO Structured • Conversion Focused
========================================================= */

.vending-features {
    position: relative;
    padding: clamp(5rem, 8vw, 8rem) 1.5rem;
    background:
      linear-gradient(
        180deg,
        var(--body-bg-color) 0%,
        rgba(37,99,235,0.04) 50%,
        var(--body-bg-color) 100%
      );
  }
  
  /* Header */
  
  .features-header {
    max-width: 900px;
    margin: 0 auto 4rem auto;
    text-align: center;
  }
  
  .features-header h2 {
    font-size: clamp(2rem, 3vw, 2.8rem);
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
  }
  
  .features-intro {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--clr-text);
    opacity: 0.9;
  }
  
  /* Grid */
  
  .features-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  
  /* Cards */
  
  .feature-card {
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--clr-border);
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
  }
  
  :root[data-theme="dark"] .feature-card {
    background: rgba(15,23,42,0.7);
  }
  
  .feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
  }
  
  /* Icon */
  
  .feature-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    margin-bottom: 1.5rem;
    background: linear-gradient(
      135deg,
      var(--clr-primary),
      var(--clr-secondary)
    );
    color: white;
    font-size: 1.4rem;
    box-shadow: 0 12px 25px rgba(37,99,235,0.3);
  }
  
  /* Typography */
  
  .feature-card h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
  }
  
  .feature-card p {
    font-size: 0.98rem;
    line-height: 1.7;
    opacity: 0.9;
  }
  
  /* Trust Strip */
  
  .features-trust {
    margin-top: 5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 2rem;
    text-align: center;
  }
  
  .trust-item {
    padding: 1.5rem;
    border-radius: 16px;
    background: rgba(37,99,235,0.05);
    border: 1px solid var(--clr-border);
  }
  
  .trust-number {
    font-size: 2.2rem;
    font-weight: 700;
    background: linear-gradient(
      135deg,
      var(--clr-primary),
      var(--clr-secondary)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
  }
  
  .trust-label {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.7;
  }
  
  /* Animation on Scroll */
  
  .feature-card {
    opacity: 0;
    transform: translateY(20px);
  }
  
  .feature-card.feature-visible {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.6s ease;
  }
  
  /* Responsive */
  
  @media (max-width: 768px) {
    .features-intro {
      font-size: 1rem;
    }
  }
  


  /* =========================================================
   ENHANCEMENT LAYER — PREMIUM DETAILING
   Subtle depth • edges • glow • enterprise polish
========================================================= */


/* ---------------------------------------------------------
   SECTION EDGE GLOW (SUBTLE TOP/BOTTOM LIGHT)
--------------------------------------------------------- */

.vending-features::before,
.vending-features::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 120px;
  pointer-events: none;
  z-index: 0;
}

.vending-features::before {
  top: 0;
  background: linear-gradient(
    180deg,
    rgba(37,99,235,0.08),
    transparent
  );
}

.vending-features::after {
  bottom: 0;
  background: linear-gradient(
    0deg,
    rgba(16,185,129,0.08),
    transparent
  );
}


/* ---------------------------------------------------------
   EYEBROW ABOVE H2 (SEO SUBTLE SIGNAL)
--------------------------------------------------------- */

.features-header::before {
  content: "Enterprise Smart Vending Solutions";
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-secondary);
  margin-bottom: 1rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: rgba(16,185,129,0.08);
  border: 1px solid rgba(16,185,129,0.2);
}


/* ---------------------------------------------------------
   FEATURE CARD EDGE BORDER GRADIENT
--------------------------------------------------------- */

.feature-card {
  position: relative;
  isolation: isolate;
}

.feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 20px;
  background: linear-gradient(
    135deg,
    rgba(37,99,235,0.3),
    rgba(16,185,129,0.2),
    transparent 60%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.6;
}


/* ---------------------------------------------------------
   HOVER SHEEN SWEEP (VERY SUBTLE)
--------------------------------------------------------- */

.feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255,255,255,0.25),
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 0.9s ease;
  pointer-events: none;
  opacity: 0;
}

.feature-card:hover::after {
  transform: translateX(100%);
  opacity: 0.5;
}


/* ---------------------------------------------------------
   FEATURE ICON DEPTH ENHANCEMENT
--------------------------------------------------------- */

.feature-icon {
  position: relative;
}

.feature-icon::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 20px;
  background: radial-gradient(
    circle at center,
    rgba(37,99,235,0.35),
    transparent 70%
  );
  z-index: -1;
  filter: blur(12px);
  opacity: 0.5;
}


/* ---------------------------------------------------------
   FEATURE TITLE UNDERLINE ACCENT
--------------------------------------------------------- */

.feature-card h3 {
  position: relative;
  display: inline-block;
}

.feature-card h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--clr-primary),
    var(--clr-secondary)
  );
  transition: width 1.3s ease;
}

/* -----------------------------------------
   FEATURE TITLE PREMIUM UNDERLINE ANIMATION
----------------------------------------- */

.feature-card h3 {
  position: relative;
  display: inline-block;
}

.feature-card h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 3px;
  width: 100%;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    var(--clr-primary),
    var(--clr-secondary)
  );

  /* Start hidden */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Slow elegant expansion */
.feature-card:hover h3::after {
  transform: scaleX(1);
}


/* ---------------------------------------------------------
   TRUST STRIP ELEVATION + BORDER EDGE
--------------------------------------------------------- */

.trust-item {
  position: relative;
  overflow: hidden;
  transition: all 0.35s ease;
}

.trust-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(37,99,235,0.4),
    rgba(16,185,129,0.3),
    transparent 70%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.5;
}

.trust-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(37,99,235,0.12);
}


/* ---------------------------------------------------------
   TRUST NUMBER SOFT PULSE (SLOW)
--------------------------------------------------------- */

@keyframes trustPulse {
  0% { text-shadow: 0 0 0 rgba(37,99,235,0.4); }
  50% { text-shadow: 0 0 14px rgba(37,99,235,0.6); }
  100% { text-shadow: 0 0 0 rgba(37,99,235,0.4); }
}

.trust-number {
  animation: trustPulse 4s ease-in-out infinite;
}


/* ---------------------------------------------------------
   GRID SPACING POLISH
--------------------------------------------------------- */

.features-grid {
  margin-top: 3rem;
}


/* ---------------------------------------------------------
   DARK MODE FINISHING TOUCHES
--------------------------------------------------------- */

:root[data-theme="dark"] .vending-features::before {
  background: linear-gradient(
    180deg,
    rgba(37,99,235,0.15),
    transparent
  );
}

:root[data-theme="dark"] .feature-card {
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

:root[data-theme="dark"] .feature-card::after {
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255,255,255,0.1),
    transparent 70%
  );
}


/* -----------------------------------------
   Center Feature Icons (Clean Enterprise)
----------------------------------------- */

.feature-icon {
  margin: 0 auto 1.5rem auto; /* centers horizontally */
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ---------------------------------------------------------
   PREMIUM BRAND-ALIGNED BOTTOM FADE
   Smooth • Vibrant • Enterprise
--------------------------------------------------------- */

.vending-features {
  position: relative;
  overflow: hidden;
}

.vending-features::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 320px; /* increased depth */
  pointer-events: none;
  z-index: 0;

  background: linear-gradient(
    to bottom,
    rgba(37,99,235,0) 0%,
    rgba(37,99,235,0.08) 25%,
    rgba(37,99,235,0.14) 45%,
    rgba(16,185,129,0.18) 70%,
    var(--body-bg-color) 100%
  );
}




:root[data-theme="dark"] .vending-features::after {
  background: linear-gradient(
    to bottom,
    rgba(37,99,235,0) 0%,
    rgba(37,99,235,0.12) 40%,
    rgba(16,185,129,0.15) 75%,
    var(--body-bg-color) 100%
  );
}