/* =====================================================================
   theme-northpeak.css  —  NorthPeak Bio layout identity layer
   ---------------------------------------------------------------------
   目的：在结构层彻底区别于 PeptiWorks 模板（同一套 premium.css + 网格）。
   加载顺序：styles.css -> premium.css -> theme-pharma.css
            -> theme-biotech.css -> theme-northpeak.css（本文件，最后）
   设计语言（与 PeptiWorks 的「居中卡片网格 + 蓝白」完全相反）：
     * 非对称编辑式版式（asymmetric editorial），左对齐、编号系统
     * 大留白 + 细发丝分割线 + 无卡片阴影（flat hairline，非拟物卡片）
     * 横向滚动条带代替 3 列等高卡片
     * 数字/批号用等宽字体，数据感
   ===================================================================== */

/* ---------- 0. 令牌 ---------- */
:root {
  --np-ink:      #07100F;
  --np-surface:  #0C1716;
  --np-surface2: #11201E;
  --np-teal:     #2DD4BF;
  --np-teal-dim: #14B8A6;
  --np-line:     rgba(45, 212, 191, 0.16);
  --np-line-soft:rgba(255, 255, 255, 0.07);
  --np-text:     #E6F2F0;
  --np-muted:    #A8C4C0;
  --np-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

/* ---------- 1. 全局字体：从几何无衬线换成编辑式混排 ---------- */
html body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--np-ink) !important;
  color: var(--np-text);
}

/* 标题换成衬线，PeptiWorks 用的是纯无衬线粗体 */
html body h1,
html body h2 {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  color: var(--np-text) !important;
}
html body h3,
html body h4,
html body h5,
html body h6 {
  color: var(--np-text) !important;
}

/* eyebrow 改造成「编号 + 发丝线」的编辑式标签 */
html body .eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: var(--np-mono) !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--np-teal) !important;
  background: none !important;
}
html body .eyebrow::before {
  content: "" !important;
  width: 26px !important;
  height: 1px !important;
  background: var(--np-teal) !important;
  opacity: 0.55 !important;
  flex: none !important;
}

/* ---------- 2. section 统一：去掉居中，改左对齐 + 顶部分割线 ---------- */
html body .section {
  padding: 84px 0 84px !important;
  border-top: 1px solid var(--np-line-soft);
  background: transparent !important;
}
html body .section:first-of-type { border-top: 0; }

/* Header / Nav 深色化 */
html body header {
  background: var(--np-ink) !important;
  color: var(--np-text) !important;
}
html body header .nav-wrap {
  background: rgba(7, 16, 15, 0.92) !important;
  backdrop-filter: saturate(180%) blur(16px) !important;
  border-bottom: 1px solid var(--np-line-soft) !important;
  box-shadow: none !important;
}
html body header a {
  color: var(--np-text) !important;
}
html body header .logo-text,
html body header .brand-name,
html body header .site-title {
  color: var(--np-text) !important;
}

html body .section-head {
  text-align: left !important;
  max-width: 760px !important;
  margin: 0 0 44px 0 !important;
}
html body .section-head h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.6rem) !important;
  line-height: 1.16 !important;
  margin: 14px 0 12px !important;
  color: var(--np-text) !important;
}
html body .section-head > p:not(.eyebrow) {
  color: #B0CCC8 !important;
  max-width: 62ch !important;
}
/* split 版式：标题左、链接右，但去掉卡片边框感 */
html body .section-head.split {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 24px !important;
  max-width: none !important;
}
html body .text-link {
  font-family: var(--np-mono) !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--np-teal) !important;
  border-bottom: 1px solid var(--np-line) !important;
  padding-bottom: 3px !important;
  text-decoration: none !important;
}

/* ---------- 3. HERO：非对称双栏（左文右图），不是居中大标题 ---------- */
html body .hero.b2b-hero {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
  align-items: center !important;
  gap: 48px !important;
  min-height: 0 !important;
  padding: 88px 0 88px !important;
  background:
    radial-gradient(1200px 520px at 12% 18%, rgba(45,212,191,0.10), transparent 62%),
    var(--np-ink) !important;
  overflow: hidden !important;
}
html body .hero.b2b-hero::after {
  content: "" !important;
  position: absolute !important;
  left: 0; right: 0; bottom: 0;
  height: 1px !important;
  background: var(--np-line) !important;
}
html body .hero .hero-content {
  max-width: 660px !important;
  position: relative !important;
  z-index: 2 !important;
}
html body .hero h1,
html body .b2b-hero h1 {
  font-family: "Source Serif 4", Georgia, serif !important;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem) !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  margin: 18px 0 20px !important;
  color: var(--np-text) !important;
}
html body .hero .lead {
  font-size: 1.06rem !important;
  color: #C8E0DD !important;
  max-width: 56ch !important;
}
html body .hero-actions { gap: 14px !important; margin-top: 30px !important; }

/* hero 图片栏：矩形、无圆角、发丝描边（去掉卡片阴影语言） */
html body .hero-media {
  position: relative !important;
  align-self: stretch !important;
  min-height: 380px !important;
  border: 1px solid var(--np-line) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  filter: none !important;
  background-blend-mode: normal !important;
  box-shadow: none !important;
}
html body .hero-media::before {
  background:
    linear-gradient(90deg, rgba(7,16,15,0.92) 0%, rgba(7,16,15,0.35) 26%, rgba(7,16,15,0.05) 60%, rgba(7,16,15,0.30) 100%),
    linear-gradient(180deg, rgba(7,16,15,0.20) 0%, rgba(7,16,15,0.05) 55%, rgba(7,16,15,0.45) 100%) !important;
}

/* 英雄区信任徽章：改成等宽小字 + 竖线分隔 */
html body .hero-trust-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  margin-top: 34px !important;
  border-top: 1px solid var(--np-line-soft) !important;
  padding-top: 18px !important;
}
html body .hero-trust-badges span {
  font-family: var(--np-mono) !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.04em !important;
  color: #C8E0DD !important;
  padding: 0 16px !important;
  border-left: 1px solid var(--np-line-soft) !important;
  background: none !important;
  border-radius: 0 !important;
}
html body .hero-trust-badges span:first-child { padding-left: 0 !important; border-left: 0 !important; }

/* ---------- 4. Trust bar：改为横向滚动刻度条 ---------- */
html body .trust-bar-wrap {
  background: var(--np-surface) !important;
  border-top: 1px solid var(--np-line-soft) !important;
  border-bottom: 1px solid var(--np-line-soft) !important;
}
html body .trust-bar {
  display: flex !important;
  gap: 0 !important;
  overflow-x: auto !important;
  scrollbar-width: thin !important;
}
html body .trust-bar .trust-item {
  flex: 0 0 auto !important;
  min-width: 168px !important;
  padding: 24px 22px !important;
  border-right: 1px solid var(--np-line-soft) !important;
  border-radius: 0 !important;
  background: none !important;
  font-family: var(--np-mono) !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  color: var(--np-text) !important;
  text-align: left !important;
}
html body .trust-bar .trust-item small {
  display: block !important;
  font-family: var(--np-mono) !important;
  font-size: 0.68rem !important;
  color: var(--np-muted) !important;
  letter-spacing: 0.03em !important;
  margin-top: 4px !important;
}

html body .product-card .pill,
html body .category-card .pill,
html body .category-intro .pill {
  color: var(--np-teal) !important;
  background: none !important;
  font-family: var(--np-mono) !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
}
html body .tag-row span {
  background: var(--np-surface2) !important;
  color: var(--np-text) !important;
  border: 1px solid var(--np-line) !important;
}

/* ---------- 5. 卡片体系：扁平发丝线，去掉阴影与圆角 ---------- */
html body .service-card,
html body .product-card,
html body .why-item,
html body .process-grid article,
html body .testimonial-grid figure,
html body .info-columns article,
html body .category-intro {
  background: var(--np-surface) !important;
  border: 1px solid var(--np-line-soft) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  transition: border-color .18s ease, background .18s ease !important;
}
html body .category-intro h1,
html body .category-intro h2,
html body .category-intro h3 {
  color: var(--np-text) !important;
}
html body .category-intro p {
  color: var(--np-muted) !important;
}
html body .service-card:hover,
html body .product-card:hover,
html body .why-item:hover {
  border-color: var(--np-teal-dim) !important;
  background: var(--np-surface2) !important;
  transform: none !important;
}

/* 服务卡片：编号式三列网格（填满宽度），非居中图标卡 */
html body .services-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border-top: 1px solid var(--np-line-soft) !important;
}
html body .service-card {
  display: block !important;
  padding: 34px 28px !important;
  border: 0 !important;
  border-right: 1px solid var(--np-line-soft) !important;
  border-bottom: 1px solid var(--np-line-soft) !important;
  background: none !important;
  border-radius: 0 !important;
}
html body .service-card:last-child { border-right: 0 !important; }
html body .service-card .service-icon {
  width: 44px !important; height: 44px !important;
  display: grid !important; place-items: center !important;
  background: none !important;
  border: 1px solid var(--np-line) !important;
  border-radius: 50% !important;
  font-size: 1.05rem !important;
  margin-bottom: 20px !important;
}
html body .service-card h3 {
  font-family: var(--np-mono) !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--np-text) !important;
  margin: 0 0 12px !important;
}
html body .service-card p {
  color: var(--np-muted) !important;
  margin: 0 0 20px !important;
  font-size: 0.92rem !important;
  line-height: 1.65 !important;
}

/* 产品网格：等宽数据卡，编号醒目 */
html body .product-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)) !important;
  gap: 18px !important;
}
html body .product-card {
  padding: 16px !important;
}
html body .product-card h3,
html body .product-card .product-title {
  font-family: var(--np-mono) !important;
  letter-spacing: 0.04em !important;
}

/* why-grid：两列编号清单，不是三列图标卡 */
html body .why-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 1px !important;
  background: var(--np-line-soft) !important;
  border: 1px solid var(--np-line-soft) !important;
}
html body .why-item {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 28px 26px !important;
  background: var(--np-surface) !important;
}
html body .why-item .why-icon {
  background: none !important;
  border: 0 !important;
  color: var(--np-teal) !important;
  font-size: 1rem !important;
  padding: 0 !important;
  margin-bottom: 12px !important;
}
html body .why-item h4 {
  font-size: 1.02rem !important;
  font-weight: 600 !important;
  color: var(--np-text) !important;
  margin-bottom: 8px !important;
}
html body .why-item p { color: var(--np-muted) !important; margin: 0 !important; }

/* ---------- 6. 数据 / 统计条：等宽数字，发丝网格 ---------- */
html body .stats {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 1px !important;
  background: var(--np-line-soft) !important;
  border-top: 1px solid var(--np-line-soft) !important;
  border-bottom: 1px solid var(--np-line-soft) !important;
  padding: 0 !important;
}
html body .stats > div {
  background: var(--np-surface) !important;
  padding: 36px 24px !important;
  text-align: left !important;
  border-radius: 0 !important;
}
html body .stats strong {
  display: block !important;
  font-family: var(--np-mono) !important;
  font-size: clamp(1.7rem, 3vw, 2.4rem) !important;
  font-weight: 600 !important;
  color: var(--np-teal) !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
}
html body .stats span {
  display: block !important;
  font-family: var(--np-mono) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--np-muted) !important;
  margin-top: 10px !important;
}

/* ---------- 7. CTA 区块：去掉居中盒子，改左对齐横幅 ---------- */
html body .coa-cta .section-head { max-width: 820px !important; }
html body .final-cta .cta-box,
html body .cta-box {
  background: linear-gradient(120deg, rgba(45,212,191,0.10), transparent 60%), var(--np-surface) !important;
  border: 1px solid var(--np-line) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  text-align: left !important;
  padding: 52px 44px !important;
}
html body .cta-box h2 {
  font-family: "Source Serif 4", Georgia, serif !important;
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
  margin: 0 0 12px !important;
}
html body .cta-box p { color: var(--np-muted) !important; max-width: 62ch !important; }
html body .cta-actions { justify-content: flex-start !important; margin-top: 26px !important; }

/* ---------- 8. 按钮：矩形（2px 圆角），非胶囊 ---------- */
html body .button,
html body .button.primary,
html body .button.secondary,
html body .button.outline {
  border-radius: 2px !important;
  font-family: var(--np-mono) !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  padding: 14px 24px !important;
}
html body .button.primary {
  background: var(--np-teal) !important;
  color: #04211D !important;
  border: 1px solid var(--np-teal) !important;
}
html body .button.primary:hover { background: #5eead4 !important; }
html body .button.secondary,
html body .button.outline {
  background: transparent !important;
  color: var(--np-text) !important;
  border: 1px solid rgba(230, 242, 240, 0.35) !important;
}
html body .button.secondary:hover,
html body .button.outline:hover {
  border-color: var(--np-teal) !important;
  color: var(--np-teal) !important;
}

/* ---------- 9. 页脚：从多列卡片改成发丝分区 ---------- */
html body footer,
html body .site-footer {
  background: var(--np-ink) !important;
  border-top: 1px solid var(--np-line) !important;
}
html body .footer-trust {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 1px !important;
  background: var(--np-line-soft) !important;
  border: 1px solid var(--np-line-soft) !important;
}
html body .footer-trust-item {
  background: var(--np-surface) !important;
  padding: 30px 26px !important;
  border: 0 !important;
  border-radius: 0 !important;
}
html body .footer-trust-item h3 {
  font-family: var(--np-mono) !important;
  font-size: 0.76rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--np-teal) !important;
  margin-bottom: 14px !important;
}
html body .footer-trust-item p { color: var(--np-muted) !important; font-size: 0.88rem !important; }
html body .footer-verify-link {
  color: var(--np-teal) !important;
  font-family: var(--np-mono) !important;
  font-size: 0.76rem !important;
  letter-spacing: 0.04em !important;
  border-bottom: 1px solid var(--np-line) !important;
  text-decoration: none !important;
}

/* ---------- 10. 响应式 ---------- */
@media (max-width: 980px) {
  html body .hero.b2b-hero {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    padding: 64px 0 56px !important;
  }
  html body .hero-media { min-height: 280px !important; order: 2 !important; }
  html body .why-grid { grid-template-columns: 1fr !important; }
  html body .stats { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  html body .services-grid { grid-template-columns: 1fr !important; }
  html body .service-card { border-right: 0 !important; }
}
@media (max-width: 560px) {
  html body .section { padding: 56px 0 !important; }
  html body .stats { grid-template-columns: 1fr !important; }
  html body .cta-box { padding: 34px 22px !important; }
}

/* =============================================================
   响应式排版整理 2026-09-22
   ============================================================= */

/* --- 0. 全局最大宽度：超宽屏内容不乱飞 --- */
html body main > section,
html body main > div,
html body main > article,
html body main > form,
html body header .header-inner,
html body .site-footer > *,
html body footer > * {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(24px, 5vw, 48px) !important;
  padding-right: clamp(24px, 5vw, 48px) !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Hero 和 trust bar 等宽色块：背景撑满，内容限制宽度 */
html body .hero.b2b-hero,
html body .trust-bar-wrap,
html body .page-hero {
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 内容容器统一 max-width */
html body .section-head,
html body .services-grid,
html body .product-grid,
html body .why-grid,
html body .coa-grid,
html body .stats-grid,
html body .compare-wrap,
html body .cta-box,
html body .faq-list,
html body .hero-content,
html body .hero-trust-badges,
html body .page-hero > *,
html body footer > .footer-grid,
html body footer > .footer-bottom,
html body .trust-bar,
html body .coa-filters,
html body .account-wrap,
html body .cart-wrap,
html body .contact-wrap,
html body .detail-layout,
html body .blog-grid,
html body .post-content,
html body .form-wrap {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(18px, 4vw, 40px) !important;
  padding-right: clamp(18px, 4vw, 40px) !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Hero 超宽屏：背景撑满，内容区限制宽度 */
@media (min-width: 1400px) {
  html body .hero.b2b-hero {
    max-width: none !important;
    margin: 0 !important;
  }
  html body .hero-content {
    max-width: 620px !important;
    margin-left: calc((100vw - 1200px) / 2) !important;
    padding-left: 0 !important;
  }
  html body .hero-media {
    max-width: 560px !important;
    margin-right: calc((100vw - 1200px) / 2) !important;
    max-height: 560px !important;
  }
}
@media (min-width: 1600px) {
  html body .hero-content {
    max-width: 660px !important;
  }
  html body .hero-media {
    max-width: 600px !important;
    max-height: 600px !important;
  }
}

/* --- 2. Hero 区响应式完善 --- */
html body .hero.b2b-hero {
  padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 8vw, 108px) !important;
  gap: clamp(24px, 4vw, 56px) !important;
}
html body .hero-content {
  max-width: none !important;
  width: 100% !important;
  padding: 0 clamp(20px, 4vw, 48px) !important;
  box-sizing: border-box !important;
}
html body .hero h1,
html body .b2b-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.4rem) !important;
  max-width: 16ch !important;
}
html body .hero .lead {
  font-size: clamp(0.95rem, 1.4vw, 1.1rem) !important;
  max-width: 52ch !important;
}
html body .hero-actions {
  flex-wrap: wrap !important;
  gap: 10px !important;
}
html body .hero .button {
  white-space: nowrap !important;
}
html body .hero-trust-badges {
  gap: 0 !important;
  row-gap: 8px !important;
  column-gap: 0 !important;
}
html body .hero-trust-badges span {
  font-size: 0.72rem !important;
  padding: 0 14px !important;
}

@media (max-width: 860px) {
  html body .hero.b2b-hero {
    grid-template-columns: 1fr !important;
    padding: 40px 0 48px !important;
    gap: 0 !important;
  }
  html body .hero-media {
    order: -1 !important;
    min-height: 240px !important;
    height: 240px !important;
    width: calc(100% - 40px) !important;
    margin: 0 20px !important;
    box-sizing: border-box !important;
  }
  html body .hero-content {
    padding: 28px 20px 0 !important;
    text-align: left !important;
  }
  html body .hero h1 {
    font-size: clamp(1.8rem, 7.5vw, 2.6rem) !important;
    max-width: none !important;
  }
  html body .hero-trust-badges span {
    font-size: 0.68rem !important;
    padding: 0 10px !important;
  }
}

@media (max-width: 420px) {
  html body .hero .button {
    flex: 1 1 auto !important;
    text-align: center !important;
    justify-content: center !important;
    font-size: 0.9rem !important;
    padding: 12px 16px !important;
  }
  html body .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
}

/* --- 3. 悬浮按钮：滚动时半透明，悬停/触达时变亮 --- */
html body .floating-contacts {
  right: 18px !important;
  bottom: 18px !important;
  gap: 10px !important;
  opacity: 0.55 !important;
  transition: opacity 0.3s ease !important;
}
html body .floating-contacts:hover {
  opacity: 1 !important;
}
html body main {
  padding-bottom: 100px !important;
}

/* --- 4. Trust bar / 认证卡片整齐化 --- */
html body .trust-bar-wrap {
  overflow: hidden !important;
}
html body .trust-bar {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 1px !important;
  overflow: visible !important;
  flex-wrap: nowrap !important;
  overflow-x: visible !important;
}
html body .trust-bar .trust-item {
  flex: none !important;
  min-width: 0 !important;
  padding: 20px 16px !important;
  text-align: center !important;
  border-right: 1px solid var(--np-line-soft) !important;
  border-bottom: 0 !important;
}
html body .trust-bar .trust-item:last-child {
  border-right: 0 !important;
}
html body .trust-bar-more {
  display: none !important;
}

@media (max-width: 900px) {
  html body .trust-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  html body .trust-bar .trust-item {
    border-bottom: 1px solid var(--np-line-soft) !important;
  }
}
@media (max-width: 520px) {
  html body .trust-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* --- 5. 产品网格对齐 --- */
html body .product-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(14px, 2vw, 24px) !important;
}
html body .product-card {
  margin: 0 !important;
  break-inside: avoid !important;
}
@media (max-width: 960px) {
  html body .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  html body .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 380px) {
  html body .product-grid { grid-template-columns: 1fr !important; }
}

/* --- 6. 服务网格对齐 --- */
html body .services-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(14px, 2vw, 28px) !important;
  align-items: stretch !important;
}
html body .service-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
}
html body .service-card .button {
  margin-top: auto !important;
  align-self: flex-start !important;
}
@media (max-width: 860px) {
  html body .services-grid { grid-template-columns: 1fr !important; }
}

/* --- 7. 标题层级统一 --- */
html body h1 { line-height: 1.12 !important; }
html body h2 { font-size: clamp(1.6rem, 3vw, 2.2rem) !important; line-height: 1.2 !important; }
html body h3 { font-size: clamp(1.1rem, 1.5vw, 1.25rem) !important; line-height: 1.35 !important; }
html body .eyebrow {
  font-size: 0.78rem !important;
  letter-spacing: 0.18em !important;
}

/* --- 8. 按钮尺寸一致 --- */
html body .button {
  padding: 12px 22px !important;
  font-size: 0.92rem !important;
  border-radius: 999px !important;
  height: auto !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}
html body .button.primary {
  padding: 12px 26px !important;
}

/* --- 9. COA 网格整齐 --- */
html body .coa-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(14px, 2vw, 22px) !important;
}
@media (max-width: 800px) {
  html body .coa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 480px) {
  html body .coa-grid { grid-template-columns: 1fr !important; }
}

/* --- 11. 博客/文章页：保留白底深字（英文阅读舒适） --- */
html body .article-page,
html body .post-content,
html body .blog-page {
  background: #fff !important;
  color: #1a2e2a !important;
}
html body .article-page h1,
html body .article-page h2,
html body .article-page h3,
html body .post-content h1,
html body .post-content h2,
html body .post-content h3,
html body .blog-card h3,
html body article h3 {
  color: #0a1a17 !important;
}
html body .article-page p,
html body .post-content p,
html body .post-content li,
html body .blog-card p,
html body article p {
  color: #33514c !important;
}
html body .article-page .lead {
  color: #1a2e2a !important;
}
html body .article-page .eyebrow,
html body .post-content .eyebrow {
  color: #0d9488 !important;
}

/* =============================================================
   13. 白底区块统一改成深色（避免白字白底看不见）
   ============================================================= */

/* 产品卡片 */
html body .product-card,
html body .category-card,
html body .service-card,
html body .why-item,
html body .feature-card,
html body .cert-products article,
html body .info-columns article,
html body .process-grid article,
html body .compare-wrap table,
html body .cart-list article,
html body .account-help,
html body .coa-card,
html body .faq-item,
html body .stat-item,
html body .form-wrap,
html body .quote-form,
html body input,
html body textarea,
html body select,
html body .specs div,
html body .detail-media {
  background: var(--np-surface) !important;
  color: var(--np-text) !important;
  border-color: var(--np-line) !important;
}

/* 卡片内标题 */
html body .product-card h3,
html body .product-card .name,
html body .service-card h3,
html body .why-item h3,
html body .feature-card h3,
html body .cert-products h4,
html body .info-columns h3,
html body .process-grid h3,
html body .stat-item h3,
html body .faq-item h3,
html body .faq-item details summary,
html body .coa-card h4 {
  color: var(--np-text) !important;
}

/* 卡片内描述/次要文字 */
html body .product-card p,
html body .category-card p,
html body .service-card p,
html body .why-item p,
html body .feature-card p,
html body .cert-products p,
html body .info-columns p,
html body .process-grid p,
html body .stat-item p,
html body .faq-item p,
html body .coa-card p,
html body .detail-specs span,
html body .specs span,
html body .muted,
html body .muted-text {
  color: var(--np-muted) !important;
}

/* 表单输入框内文字 */
html body input,
html body textarea,
html body select {
  color: var(--np-text) !important;
  background: var(--np-surface) !important;
  border: 1px solid var(--np-line) !important;
}
html body input::placeholder,
html body textarea::placeholder {
  color: var(--np-muted) !important;
  opacity: 0.7 !important;
}

/* 表格 */
html body table,
html body th,
html body td {
  border-color: var(--np-line) !important;
}
html body th {
  background: var(--np-surface2) !important;
  color: var(--np-text) !important;
}
html body td {
  color: var(--np-muted) !important;
}

/* FAQ */
html body details {
  background: var(--np-surface) !important;
  border: 1px solid var(--np-line) !important;
}
html body details[open] {
  background: var(--np-surface2) !important;
}

/* --- 14. 页脚对齐 --- */
html body footer {
  padding: clamp(40px, 6vw, 72px) 0 clamp(24px, 4vw, 40px) !important;
}
html body .footer-grid {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1.2fr !important;
  gap: clamp(20px, 3vw, 48px) !important;
}
@media (max-width: 800px) {
  html body .footer-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
  html body .footer-grid { grid-template-columns: 1fr !important; }
}