#features,
#roi,
#why {
  --supplier-brand: hsl(217 100% 49%);
  --supplier-text: hsl(220 13% 13%);
  --supplier-text-secondary: hsl(220 9% 46%);
  --supplier-text-muted: hsl(220 9% 60%);
  --supplier-border: hsl(220 13% 91%);
  --supplier-bg: hsl(220 14% 96%);
  /* 不声明 font-family：从 body 的 var(--font-base) 继承站点字体 EsunFont。
     原先这里写的是 Inter / "Noto Sans SC" 字体栈，但这两个字族站内既无
     @font-face 也无外链，实际会一路回退到 Segoe UI（西文）与微软雅黑（中文），
     导致本页这三个区块的字体与全站不一致。 */
}

#features .font-extrabold,
#roi .font-extrabold,
#why .font-extrabold {
  font-weight: 800;
}

#roi .count-up {
  font-variant-numeric: tabular-nums;
}

/* 九大模块 */
#features {
  border-color: var(--supplier-border);
}

#features .text-brand {
  color: var(--supplier-brand);
}

#features .bg-brand {
  background-color: var(--supplier-brand);
}

#features .border-border {
  border-color: var(--supplier-border);
}

#features .gap-3\.5 {
  gap: 0.875rem;
}

#features .card-hover {
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

#features .card-hover:hover {
  transform: translateY(-6px);
  border-color: hsl(217 100% 85%);
  box-shadow:
    0 20px 40px -12px hsla(217, 100%, 49%, 0.15),
    0 4px 12px hsla(0, 0%, 0%, 0.06);
}

/* 效率提升（渐变底与光晕由 show_function.css 的 .brand-gradient-section 提供） */
#roi .flex-nowrap {
  flex-wrap: nowrap;
}

#roi .mb-1\.5 {
  margin-bottom: 0.375rem;
}

#roi .bg-white\/10 {
  background-color: hsla(0, 0%, 100%, 0.1);
}

#roi .border-white\/10 {
  border-color: hsla(0, 0%, 100%, 0.1);
}

#roi .text-white\/70 {
  color: hsla(0, 0%, 100%, 0.7);
}

#roi .text-white\/80 {
  color: hsla(0, 0%, 100%, 0.8);
}

#roi .text-blue-200 {
  color: rgb(191 219 254);
}

#roi .backdrop-blur-sm {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}


#why .text-text-muted {
  color: var(--supplier-text-muted);
}

/* 优势清单的对勾：色值与 #features 分组标题的 .text-brand 一致，底色为同色 10% 透明 */
#why .text-brand {
  color: var(--supplier-brand);
}

#why .bg-brand\/10 {
  background-color: hsla(217, 100%, 49%, 0.1);
}

#why .bg-bg {
  background-color: var(--supplier-bg);
}

#why .border-border {
  border-color: var(--supplier-border);
}

#why .mb-1\.5 {
  margin-bottom: 0.375rem;
}

#why .py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

@media (min-width: 768px) {
  #roi .md\:gap-4 {
    gap: 1rem;
  }

  #roi .md\:p-5 {
    padding: 1.25rem;
  }

  #roi .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  #roi .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

@media (min-width: 1024px) {
  #roi .lg\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #features .card-hover {
    transition: none;
  }

  #features .card-hover:hover {
    transform: none;
  }

}