/* =========================================================
   WHY CHOOSE XPRESS – PREMIUM PROFESSIONAL SECTION
   Clean • Modern • Conversion Focused
   Uses ONLY core-u.css tokens
========================================================= */


/* =========================================================
   SECTION WRAPPER
========================================================= */

#why-choose-xpress-vending-services {
  position: relative;
  padding: clamp(4.5rem, 6vw, 7.5rem) 0;
  overflow: hidden;

  background:
    radial-gradient(circle at 8% 10%, rgba(0,174,239,.06), transparent 45%),
    radial-gradient(circle at 92% 88%, rgba(28,163,199,.07), transparent 50%),
    #fff;
}

/* soft light pass */
#why-choose-xpress-vending-services::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.35) 50%,
    rgba(255,255,255,0) 100%
  );
  opacity: .55;
}


/* =========================================================
   SECTION HEADER
========================================================= */

#why-choose-xpress-vending-services .section-header {
  position: relative;
  z-index: 2;
}

#why-choose-xpress-vending-services .section-header h2 {
  font-size: clamp(1.9rem, 3vw, 2.9rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-2);
}

#why-choose-xpress-vending-services .section-header p {
  max-width: 760px;
  margin: 0 auto;
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  line-height: 1.65;
}


/* =========================================================
   BENEFITS GRID
========================================================= */

.benefits-grid {
  margin-top: clamp(2.2rem, 4vw, 3.6rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(1rem, 2vw, 1.8rem);
  position: relative;
  z-index: 2;
}


/* =========================================================
   BENEFIT CARD
========================================================= */

.benefit-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(79,111,138,.16);
  border-radius: var(--radius-lg);

  padding: clamp(1.5rem, 2.2vw, 2rem);

  box-shadow:
    0 2px 8px rgba(15,23,42,.04),
    0 10px 30px rgba(15,23,42,.05);

  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal),
    border-color var(--transition-normal);

  overflow: hidden;
  will-change: transform;
}

/* top accent */
.benefit-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--color-primary-teal),
    var(--color-primary-cyan)
  );
  opacity: .85;
}

/* soft hover glow */
.benefit-card:hover {
  transform: translateY(-7px);
  border-color: rgba(0,174,239,.35);
  box-shadow:
    0 8px 20px rgba(15,23,42,.08),
    0 18px 40px rgba(0,174,239,.12);
}


/* =========================================================
   ICON SYSTEM
========================================================= */

.benefit-icon {
  width: 64px;
  height: 64px;
  margin: 0 0 1rem;

  border-radius: 16px;
  background: linear-gradient(
    135deg,
    var(--color-primary-teal),
    var(--color-primary-cyan)
  );

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow:
    0 8px 18px rgba(0,174,239,.22);

  position: relative;
}

/* subtle inner sheen */
.benefit-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.35),
    rgba(255,255,255,0)
  );
}

.benefit-icon::before {
  content: "";
  width: 30px;
  height: 30px;
  background: #fff;

  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  position: relative;
  z-index: 2;
}


/* =========================================================
   ICON DEFINITIONS
========================================================= */

.icon-equipment::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><rect x='3' y='4' width='18' height='14' rx='2'/><circle cx='8' cy='11' r='1.5'/><circle cx='16' cy='11' r='1.5'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><rect x='3' y='4' width='18' height='14' rx='2'/><circle cx='8' cy='11' r='1.5'/><circle cx='16' cy='11' r='1.5'/></svg>");
}

.icon-technician::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'><path d='M12 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0 12c-4.4 0-8 2-8 4.5V22h16v-3.5C20 16 16.4 14 12 14z'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'><path d='M12 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0 12c-4.4 0-8 2-8 4.5V22h16v-3.5C20 16 16.4 14 12 14z'/></svg>");
}

.icon-support::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'><path d='M12 2a10 10 0 0 0-10 10v3a3 3 0 0 0 3 3h2v-8H5a7 7 0 0 1 14 0h-2v8h2a3 3 0 0 0 3-3v-3A10 10 0 0 0 12 2z'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'><path d='M12 2a10 10 0 0 0-10 10v3a3 3 0 0 0 3 3h2v-8H5a7 7 0 0 1 14 0h-2v8h2a3 3 0 0 0 3-3v-3A10 10 0 0 0 12 2z'/></svg>");
}

.icon-restock::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'><path d='M12 6V2L7 7l5 5V8c2.8 0 5 2.2 5 5a5 5 0 1 1-8.7-3.4L6.9 8.2A7 7 0 1 0 19 13c0-3.9-3.1-7-7-7z'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'><path d='M12 6V2L7 7l5 5V8c2.8 0 5 2.2 5 5a5 5 0 1 1-8.7-3.4L6.9 8.2A7 7 0 1 0 19 13c0-3.9-3.1-7-7-7z'/></svg>");
}

.icon-flexible::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'><path d='M7 2v6h2V5h6v3l4-4-4-4v3H7zM17 22v-6h-2v3H9v-3l-4 4 4 4v-3h8z'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'><path d='M7 2v6h2V5h6v3l4-4-4-4v3H7zM17 22v-6h-2v3H9v-3l-4 4 4 4v-3h8z'/></svg>");
}

.icon-leader::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'><path d='M12 2l3 6 6 .9-4.5 4.4 1.1 6.2L12 17l-5.6 2.9 1.1-6.2L3 8.9 9 8z'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'><path d='M12 2l3 6 6 .9-4.5 4.4 1.1 6.2L12 17l-5.6 2.9 1.1-6.2L3 8.9 9 8z'/></svg>");
}


/* =========================================================
   TYPOGRAPHY
========================================================= */

.benefit-card h3 {
  margin: 0 0 .6rem;
  font-size: clamp(1.05rem, 1.3vw, 1.22rem);
  font-weight: 700;
  color: var(--color-primary-dark);
  line-height: 1.35;
}

.benefit-card p {
  margin: 0;
  font-size: .98rem;
  line-height: 1.72;
  color: var(--text-muted);
}


/* =========================================================
   ENTRY ANIMATION
========================================================= */

.benefit-card {
  opacity: 0;
  transform: translateY(24px);
}

.benefit-card.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity .65s ease,
    transform .65s cubic-bezier(.22,.61,.36,1);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {
  .benefits-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

  #why-choose-xpress-vending-services {
    padding: 4rem 0;
  }

  .benefits-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .benefit-card {
    padding: 1.35rem;
  }

  .benefit-icon {
    width: 56px;
    height: 56px;
  }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .benefit-card {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}