/* =============================================================
   至名能源 · 全站共享样式 (Site chrome + reusable components)
   依赖 design-system.css
   version 3.1 — 2026-07-0907-08
   ============================================================= */

/* ============ 顶部导航 · 浅色磨砂 sticky ============ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  background: linear-gradient(180deg, rgba(10,18,31,.38) 0%, rgba(10,18,31,.18) 100%);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .35s var(--ease), backdrop-filter .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header__inner { display: flex; align-items: center; gap: 28px; height: 74px; }
.site-header__logo img { height: 38px; width: auto; }
.site-header .nav-link { color: rgba(255,255,255,.90); }
.site-header .site-header__logo img { filter: brightness(0) invert(1); }

.site-header.is-solid {
  background: rgba(246,248,251,.72);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: 0 4px 24px rgba(13,27,42,.06);
  border-bottom: 1px solid var(--line);
}
.site-header.is-solid .nav-link { color: var(--t-strong); }
.site-header.is-solid .site-header__logo img { filter: none; }

.main-nav { margin-left: auto; }
.main-nav ul { display: flex; align-items: center; gap: 34px; }
.nav-link { position: relative; font-size: .98rem; font-weight: 500; padding: 6px 0; transition: color .2s var(--ease); }
.nav-link::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--accent); transition: width .3s var(--ease); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* Nav dropdown (产品中心 hover menu) */
.main-nav .has-dropdown { position: relative; }
.has-dropdown::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 16px; pointer-events: auto; }
.nav-dropdown { position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%) translateY(0); min-width: 240px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 16px 40px rgba(15, 30, 50, .14); padding: 14px 12px; opacity: 0; pointer-events: none; transition: opacity .18s var(--ease); z-index: 100; }
.nav-dropdown a { visibility: visible; }
.has-dropdown:hover .nav-dropdown, .has-dropdown:focus-within .nav-dropdown { opacity: 1; pointer-events: auto; }
.nav-dropdown__group { display: flex; flex-direction: column; padding: 4px 0 6px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.nav-dropdown__group:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.nav-dropdown__title { font-size: .72rem; color: var(--t-soft); text-transform: uppercase; letter-spacing: .1em; padding: 4px 12px 6px; font-weight: 700; }
.nav-dropdown a { display: block; padding: 8px 12px; border-radius: var(--r); color: var(--t); font-size: .92rem; text-decoration: none; transition: background .15s var(--ease), color .15s var(--ease); white-space: nowrap; }
.nav-dropdown a:hover, .nav-dropdown a.active { background: var(--brand-soft); color: var(--brand-strong); }
.nav-dropdown a.active { font-weight: 600; }
@media (max-width: 980px) {
  .main-nav .has-dropdown { padding-bottom: 0; margin-bottom: 0; }
  .nav-dropdown { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: 0; background: transparent; padding: 0 0 0 16px; min-width: 0; }
  .nav-dropdown a { color: rgba(255,255,255,.7); padding: 6px 12px; }
  .nav-dropdown a:hover { background: transparent; color: #fff; }
  .nav-dropdown__title { color: rgba(255,255,255,.5); padding: 4px 12px 4px; }
}
.nav-link.active { color: var(--accent) !important; font-weight: 600; }

.site-header__actions { display: flex; align-items: center; gap: 18px; }

/* 语言分段切换（中文 / EN）· 纯链接 */
.lang-toggle {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border-radius: var(--r-pill); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.20);
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.lang-toggle__opt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; padding: 5px 13px; white-space: nowrap;
  font-size: .82rem; font-weight: 600; line-height: 1; letter-spacing: .01em;
  border-radius: var(--r-pill); color: rgba(255,255,255,.72);
  transition: color .22s var(--ease), background .22s var(--ease);
}
.lang-toggle__opt:hover { color: #fff; }
.lang-toggle__opt.active { color: #fff; background: linear-gradient(135deg, var(--brand-light), var(--brand-strong)); box-shadow: 0 2px 8px rgba(31,111,208,.35); }
.site-header.is-solid .lang-toggle { background: var(--gray-100); border-color: var(--line); }
.site-header.is-solid .lang-toggle__opt { color: var(--t-soft); }
.site-header.is-solid .lang-toggle__opt:hover { color: var(--t-strong); }
.site-header.is-solid .lang-toggle__opt.active { color: #fff; }

/* 移动端菜单按钮 */
.nav-toggle { display: none; width: 42px; height: 42px; border-radius: var(--r-sm); align-items: center; justify-content: center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 22px; height: 2px; background: currentColor; position: relative; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.nav-toggle span::before { position: absolute; top: -7px; }
.nav-toggle span::after  { position: absolute; top: 7px; }
.site-header .nav-toggle { color: #fff; }
.site-header.is-solid .nav-toggle { color: var(--t-strong); }

/* ============ 内页 Banner ============ */
.page-hero {
  position: relative; overflow: hidden; background: var(--dark-bg); color: var(--t-invert);
  padding: 110px 0 60px; text-align: center;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 54px 54px;
}
.page-hero__inner { position: relative; z-index: 2; }
.page-hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.page-hero .eyebrow::before, .page-hero .eyebrow::after { content: ""; width: 24px; height: 2px; background: currentColor; }
.page-hero h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); color: #fff; font-weight: 800; margin-bottom: 16px; }
.page-hero p { font-size: var(--fs-lead); color: var(--t-invert-soft); max-width: 720px; margin: 0 auto; }
.breadcrumb { position: relative; z-index: 2; margin-top: 26px; font-size: .86rem; color: var(--t-invert-faint); display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.breadcrumb a { color: var(--t-invert-soft); transition: color .2s var(--ease); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { opacity: .5; }
.breadcrumb .current { color: #fff; }

/* ============ 通用区块标题（左对齐变体） ============ */
.ds-head--left { text-align: left; margin-left: 0; margin-right: 0; max-width: none; }
.ds-head--left .eyebrow::before { display: inline-block; }

/* ============ 富文本 ============ */
.prose { max-width: 820px; margin: 0 auto; }
.prose p { color: var(--t); line-height: 1.9; margin-bottom: 18px; }
.prose h3 { font-size: 1.4rem; margin: 36px 0 14px; }
.prose img { border-radius: var(--r); margin: 22px 0; }

/* ============ 通用图标特性卡网格 ============ */
.feature-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature-cards.cols-2 { grid-template-columns: repeat(2, 1fr); }
.feature-cards.cols-4 { grid-template-columns: repeat(4, 1fr); }
.feature-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 26px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.feature-card__icon {
  width: 56px; height: 56px; border-radius: var(--r); margin-bottom: 20px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--brand-soft), #fff); border: 1px solid var(--brand-soft);
}
.feature-card__icon svg { width: 28px; height: 28px; color: var(--brand); }
.feature-card__icon img { width: 32px; height: 32px; object-fit: contain; }
.feature-card h3 { font-size: 1.16rem; margin-bottom: 10px; }
.feature-card p { font-size: .9rem; color: var(--t-soft); line-height: 1.75; }
.feature-card ul { margin-top: 10px; }
.feature-card li { position: relative; padding-left: 18px; font-size: .88rem; color: var(--t-soft); line-height: 1.6; margin-bottom: 7px; }
.feature-card li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* 深色区里的特性卡 */
.ds-section--dark .feature-card { background: var(--metal); border-color: rgba(255,255,255,.06); box-shadow: var(--metal-hi); }
.ds-section--dark .feature-card:hover { box-shadow: var(--shadow-lg); }
.ds-section--dark .feature-card h3 { color: #fff; }
.ds-section--dark .feature-card p, .ds-section--dark .feature-card li { color: var(--t-invert-soft); }
.ds-section--dark .feature-card__icon { background: linear-gradient(140deg, rgba(245,161,29,.18), rgba(245,161,29,.05)); border-color: rgba(245,161,29,.28); }
.ds-section--dark .feature-card__icon svg { color: var(--accent); }

/* ============ 图文左右分栏 ============ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.split.reverse .split__media { order: 2; }
.split__media img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.split__body h2 { font-size: var(--fs-h2); margin-bottom: 18px; }
.split__body p { color: var(--t); line-height: 1.9; margin-bottom: 16px; }
.split__list { margin-top: 20px; }
.split__list li { position: relative; padding-left: 28px; margin-bottom: 14px; color: var(--t); line-height: 1.6; }
.split__list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231f6fd0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat; }

/* ============ 资质网格 + Lightbox ============ */
.cert-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.cert-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 12px; height: 178px; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; position: relative; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.cert-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--brand-light); }
.cert-card img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .4s var(--ease); }
.cert-card:hover img { transform: scale(1.05); }
.cert-card::after { content: "点击放大"; position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(13,27,42,.82)); color: #fff; font-size: .74rem; text-align: center; padding: 18px 0 8px; opacity: 0; transform: translateY(6px); transition: all .3s var(--ease); }
.cert-card:hover::after { opacity: 1; transform: none; }

.lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(8,14,24,.92); display: flex; align-items: center; justify-content: center; padding: 5vw; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s var(--ease); }
.lightbox.show { opacity: 1; visibility: visible; }
.lightbox img { max-width: 100%; max-height: 90vh; border-radius: var(--r); box-shadow: var(--shadow-lg); transform: scale(.94); transition: transform .3s var(--ease); }
.lightbox.show img { transform: scale(1); }
.lightbox__close { position: absolute; top: 26px; right: 30px; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; transition: background .25s var(--ease); }
.lightbox__close:hover { background: rgba(255,255,255,.24); }

/* ============ FAQ 手风琴 ============ */
.faq-list { max-width: 880px; margin: 0 auto; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 14px; overflow: hidden; transition: box-shadow .3s var(--ease), border-color .3s var(--ease); }
.faq-item.open { box-shadow: var(--shadow); border-color: var(--brand-light); }
.faq-q { display: flex; align-items: center; gap: 14px; padding: 20px 24px; cursor: pointer; font-weight: 600; color: var(--t-strong); font-size: 1.02rem; }
.faq-q .ico { flex-shrink: 0; width: 22px; height: 22px; position: relative; margin-left: auto; }
.faq-q .ico::before, .faq-q .ico::after { content: ""; position: absolute; background: var(--brand); border-radius: 2px; transition: transform .3s var(--ease); }
.faq-q .ico::before { top: 10px; left: 3px; width: 16px; height: 2px; }
.faq-q .ico::after { top: 3px; left: 10px; width: 2px; height: 16px; }
.faq-item.open .faq-q .ico::after { transform: rotate(90deg); opacity: 0; }
.faq-tag { flex-shrink: 0; width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .9rem; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq-a__inner { padding: 0 24px 22px 68px; color: var(--t-soft); line-height: 1.85; font-size: .94rem; }

/* ============ 联系页 ============ */
.contact-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: stretch; }
.contact-info-card { background: var(--metal); box-shadow: var(--metal-hi), var(--shadow-md); border-radius: var(--r-lg); padding: 40px; color: var(--t-invert); border: 1px solid rgba(255,255,255,.06); }
.contact-info-card h2 { color: #fff; font-size: 1.5rem; margin-bottom: 26px; }
.contact-info-item { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.contact-info-item:last-child { border-bottom: 0; }
.contact-info-item .ic { flex-shrink: 0; width: 46px; height: 46px; border-radius: var(--r); background: linear-gradient(140deg, rgba(245,161,29,.18), rgba(245,161,29,.05)); border: 1px solid rgba(245,161,29,.28); display: flex; align-items: center; justify-content: center; }
.contact-info-item .ic svg { width: 22px; height: 22px; color: var(--accent); }
.contact-info-item .lbl { font-size: .8rem; color: var(--t-invert-faint); margin-bottom: 4px; }
.contact-info-item .val { color: #fff; font-size: 1.02rem; font-weight: 600; word-break: break-word; }
.contact-map { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--gray-100); min-height: 360px; border: 1px solid var(--line); }
.contact-map img { width: 100%; height: 100%; object-fit: cover; }

/* ============ 结尾 CTA ============ */
.cta-band { background: linear-gradient(135deg, var(--brand-strong) 0%, #0e2f5e 100%); color: #fff; position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(ellipse 60% 80% at 80% 50%, #000, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 60% 80% at 80% 50%, #000, transparent 70%); }
.cta-band__inner { position: relative; z-index: 2; padding: clamp(48px, 7vw, 82px) 0; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta-band h2 { color: #fff; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); margin-bottom: 10px; }
.cta-band p { color: rgba(255,255,255,.78); font-size: var(--fs-lead); }
.cta-band__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ============ 页脚 ============ */
.footer { background: var(--dark-1); color: var(--t-invert-soft); padding: 64px 0 30px; font-size: .9rem; }
.footer__grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1.4fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid var(--line-dark); }
.footer__brand img { height: 40px; margin-bottom: 18px; filter: brightness(0) invert(1); }
.footer__brand p { color: var(--t-invert-faint); font-size: .86rem; line-height: 1.9; }
.footer__col h4 { color: #fff; font-size: .96rem; margin-bottom: 18px; }
.footer__col a { display: block; padding: 6px 0; color: var(--t-invert-soft); font-size: .88rem; transition: color .2s var(--ease); }
.footer__col a:hover { color: var(--accent); }
.footer__contact li { display: flex; gap: 11px; padding: 6px 0; color: var(--t-invert-soft); font-size: .88rem; line-height: 1.6; }
.footer__contact svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.footer__bottom { padding-top: 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.footer__bottom span { color: var(--t-invert-faint); font-size: .82rem; }
.footer__bottom .icp { color: rgba(255,255,255,.3); }
.footer__bottom a { color: var(--t-invert-soft); }
.footer__bottom a:hover { color: var(--accent); }

/* ============ 悬浮联系按钮 ============ */
.contact-buttons { position: fixed; right: 22px; bottom: 26px; z-index: 800; display: flex; flex-direction: column; gap: 12px; }
.contact-button { position: relative; }
.contact-button > a { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--brand-light), var(--brand-strong)); color: #fff; box-shadow: var(--shadow-brand); transition: transform .25s var(--ease); text-decoration: none; }
.contact-button.message-btn > a { background: linear-gradient(135deg, var(--accent), var(--accent-strong)); box-shadow: var(--shadow-accent); }
.contact-button > a svg { width: 24px; height: 24px; }
.contact-button > a:hover { transform: scale(1.1); }
.contact-tooltip { position: absolute; right: 64px; top: 50%; transform: translateY(-50%) translateX(8px); background: #fff; border-radius: var(--r); padding: 12px 16px; min-width: 168px; box-shadow: var(--shadow-md); font-size: .84rem; color: var(--t); display: none; }
.contact-tooltip::after { content: ""; position: absolute; right: -6px; top: 50%; transform: translateY(-50%) rotate(45deg); width: 12px; height: 12px; background: #fff; }
.contact-tooltip .tt-title { font-weight: 700; color: var(--t-strong); margin-bottom: 4px; }

/* ============ 响应式 ============ */
@media (max-width: 1024px) {
  .feature-cards, .feature-cards.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .cert-grid { grid-template-columns: repeat(4, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .contact-split { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .main-nav { position: fixed; inset: 74px 0 auto 0; background: rgba(10,18,31,.98); backdrop-filter: blur(12px); margin: 0; padding: 12px 0 20px; transform: translateY(calc(-100% - 80px)); transition: transform .35s var(--ease); border-bottom: 1px solid var(--line-dark); box-shadow: 0 18px 40px rgba(0,0,0,.4); }
  .main-nav.open { transform: none; }
  .main-nav ul { flex-direction: column; gap: 0; align-items: stretch; }
  .main-nav .nav-link { color: #fff !important; padding: 14px 24px; font-size: 1rem; }
  .main-nav .nav-link::after { display: none; }
  .nav-toggle { display: flex; margin-left: auto; }
  .site-header__actions { gap: 10px; }
  .split { grid-template-columns: 1fr; gap: 30px; }
  .split.reverse .split__media { order: 0; }
  .cta-band__inner { flex-direction: column; align-items: flex-start; text-align: left; }
}
@media (max-width: 560px) {
  .feature-cards, .feature-cards.cols-2, .feature-cards.cols-4 { grid-template-columns: 1fr; }
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .contact-tooltip { display: none !important; }
  .page-hero { padding: 120px 0 52px; }
  /* 固定浮窗缩小 + tooltip 隐藏（避免遮挡主内容）*/
  .contact-buttons { right: 12px; bottom: 12px; gap: 8px; }
  .contact-button > a { width: 42px; height: 42px; }
  .contact-button > a svg { width: 20px; height: 20px; }
}


/* ============ 产品详情页 · 核心特性徽章 + 参数表 ============ */
.badge-feats { display: flex; flex-direction: column; gap: 20px; }
.badge-feat { display: flex; gap: 16px; align-items: flex-start; }
.badge-feat .bdg { flex-shrink: 0; width: 54px; height: 54px; border-radius: var(--r); background: linear-gradient(140deg, var(--brand), var(--brand-strong)); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; font-size: .86rem; line-height: 1.15; box-shadow: var(--shadow-sm); }
.badge-feat p { font-size: .95rem; color: var(--t-soft); line-height: 1.75; padding-top: 6px; }

.detail-media { position: relative; border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(170deg, #f3f7fc 0%, #e8eff8 100%); padding: 34px 34px 62px; display: flex; align-items: center; justify-content: center; min-height: 400px; }
.detail-media img { max-height: 340px; width: auto; }
.detail-media .series-banner { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, var(--brand-light), var(--brand-strong)); color: #fff; text-align: center; padding: 12px; font-weight: 600; font-size: .95rem; }

.spec-table { width: 100%; border-collapse: collapse; font-size: .95rem; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.spec-table th { background: linear-gradient(135deg, var(--brand-light), var(--brand-strong)); color: #fff; text-align: left; padding: 16px 22px; font-weight: 600; }
.spec-table th:first-child { width: 32%; }
.spec-table td { padding: 14px 22px; border-bottom: 1px solid var(--line); color: var(--t); }
.spec-table tbody tr:nth-child(odd) { background: var(--gray-50); }
.spec-table tbody tr:last-child td { border-bottom: 0; }
.spec-table td:first-child { font-weight: 600; color: var(--t-strong); }

.scenario-emoji { font-size: 40px; line-height: 1; margin-bottom: 16px; }
@media (max-width: 768px) { .spec-table th, .spec-table td { padding: 12px 14px; } .detail-media { min-height: 320px; } }

/* ============ 智慧云撬 · 自定义 section ============ */

/* Hero CTA row */
.hero-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.btn--outline-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.55); padding: 13px 28px; border-radius: 999px; font-weight: 600; transition: all .25s var(--ease); text-decoration: none; display: inline-flex; align-items: center; }
.btn--outline-light:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* KPI 数据条 */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.kpi-cell { text-align: center; padding: 24px 18px; background: #fff; border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.kpi-cell:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.kpi-num { font-family: var(--font-num); font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); font-weight: 800; color: var(--brand); line-height: 1; margin-bottom: 8px; }
.kpi-unit { font-size: 50%; color: var(--brand-light); margin-left: 2px; font-weight: 700; }
.kpi-label { font-size: 1rem; font-weight: 700; color: var(--t-strong); margin-bottom: 6px; }
.kpi-desc { font-size: .82rem; color: var(--t-soft); line-height: 1.55; }
@media (max-width: 768px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }

/* 架构图（占位 SVG 风格） */
.arch-diagram { background: rgba(255,255,255,.04); border-radius: var(--r-lg); padding: 36px 24px; margin-top: 12px; }
.arch-placeholder { position: relative; min-height: 420px; display: flex; align-items: center; justify-content: center; }
.arch-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; }
.arch-core { background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: #fff; font-size: 1.4rem; font-weight: 800; padding: 22px 32px; border-radius: var(--r-lg); box-shadow: 0 12px 40px rgba(245,161,29,.45); text-align: center; min-width: 180px; }
.arch-core-sub { font-size: .8rem; font-weight: 400; margin-top: 6px; opacity: .9; }
.arch-ring { position: absolute; border: 1.5px dashed rgba(255,255,255,.18); border-radius: 50%; pointer-events: none; }
.arch-ring-control { width: 280px; height: 280px; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.arch-ring-sense { width: 420px; height: 420px; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.arch-ring-biz { width: 560px; height: 560px; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.arch-module { position: absolute; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.9); padding: 8px 14px; border-radius: var(--r); font-size: .82rem; font-weight: 500; white-space: nowrap; backdrop-filter: blur(4px); }
/* Control ring (top) */
.arch-ring-control .arch-module:nth-child(1) { top: -16px; left: 50%; transform: translateX(-50%); }
.arch-ring-control .arch-module:nth-child(2) { bottom: -16px; left: 18%; }
.arch-ring-control .arch-module:nth-child(3) { bottom: -16px; right: 18%; }
/* Sense ring (mid) */
.arch-ring-sense .arch-module:nth-child(1) { top: 15%; left: -8%; }
.arch-ring-sense .arch-module:nth-child(2) { top: 0; right: 8%; }
.arch-ring-sense .arch-module:nth-child(3) { bottom: 25%; left: -12%; }
.arch-ring-sense .arch-module:nth-child(4) { bottom: 10%; right: -4%; }
.arch-ring-sense .arch-module:nth-child(5) { bottom: -16px; left: 45%; transform: translateX(-50%); }
/* Biz ring (outer) */
.arch-ring-biz .arch-module:nth-child(1) { top: -16px; left: 18%; }
.arch-ring-biz .arch-module:nth-child(2) { top: -16px; right: 18%; }
.arch-ring-biz .arch-module:nth-child(3) { top: 50%; right: -10%; transform: translateY(-50%); }
.arch-ring-biz .arch-module:nth-child(4) { bottom: 5%; right: 8%; }
.arch-ring-biz .arch-module:nth-child(5) { top: 25%; left: -8%; }
.arch-note { text-align: center; color: rgba(255,255,255,.5); font-size: .8rem; margin-top: 18px; font-style: italic; }
@media (max-width: 980px) { .arch-placeholder { transform: scale(.75); } }

/* 4 大优势 */
.adv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.adv-card { background: #fff; border-radius: var(--r-lg); padding: 32px 28px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); position: relative; overflow: hidden; }
.adv-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.adv-card__tag { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, var(--brand-light), var(--brand-strong)); color: #fff; font-size: 1.4rem; font-weight: 800; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.adv-card h3 { font-size: 1.2rem; margin-bottom: 12px; color: var(--t-strong); }
.adv-card p { font-size: .94rem; color: var(--t-soft); line-height: 1.75; margin-bottom: 18px; }
.adv-card__metric { display: flex; align-items: baseline; gap: 8px; padding-top: 16px; border-top: 1px dashed var(--line); }
.metric-num { font-family: var(--font-num); font-size: 1.6rem; font-weight: 800; color: var(--brand); }
.metric-lbl { font-size: .84rem; color: var(--t-soft); }
@media (max-width: 768px) { .adv-grid { grid-template-columns: 1fr; } }

/* 硬件 3 卡 */
.hw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hw-card { background: #fff; border-radius: var(--r-lg); padding: 32px 28px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.hw-card__icon { font-size: 2.4rem; margin-bottom: 14px; }
.hw-card h3 { font-size: 1.2rem; margin-bottom: 16px; color: var(--t-strong); }
.hw-list { list-style: none; padding: 0; margin: 0; }
.hw-list li { padding: 10px 0; padding-left: 22px; position: relative; font-size: .9rem; color: var(--t-soft); line-height: 1.65; border-bottom: 1px dashed var(--line); }
.hw-list li:last-child { border-bottom: 0; }
.hw-list li::before { content: "▸"; position: absolute; left: 0; top: 10px; color: var(--brand); font-weight: 700; }
.hw-list strong { color: var(--t-strong); }
@media (max-width: 980px) { .hw-grid { grid-template-columns: 1fr; } }

/* 软件三端 */
/* 一个平台 + 多个终端 — 4 卡片网格（紧凑） */
.platform-overview { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 18px; align-items: stretch; padding: 0; }
.platform-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 12px 14px; text-align: center; box-shadow: 0 4px 16px rgba(13,27,42,.04); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; transition: transform .3s var(--ease), box-shadow .3s var(--ease); min-height: 300px; }
.platform-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(31,111,208,.12); }
.platform-card__label { display: inline-block; font-size: 10px; font-weight: 600; color: var(--brand-strong); background: rgba(31,111,208,.08); padding: 2px 8px; border-radius: 20px; margin: auto 0 6px; letter-spacing: .04em; align-self: center; }
.platform-card h4 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 3px; }
.platform-card p { font-size: 12px; color: var(--ink-3); margin: 0; line-height: 1.45; }
.platform-card__icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 24px; background: linear-gradient(135deg, rgba(31,111,208,.1), rgba(31,111,208,.04)); border-radius: 12px; margin-bottom: 10px; }
.platform-card__media { width: 100%; aspect-ratio: 4/3; border-radius: var(--r); overflow: hidden; background: #f3f7fc; display: flex; align-items: center; justify-content: center; }
.platform-card__media img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.platform-card--dispenser .platform-card__media { background: linear-gradient(160deg, #eef2f7 0%, #dde4ee 100%); padding: 6px; }
.platform-card--dispenser .platform-card__media img { object-fit: contain; object-position: center; }
/* 手机截图卡片单独限制宽度，避免手机图被压扁 */
.platform-card--app .platform-card__media { max-width: 100%; }

.platform-card--hub { background: linear-gradient(155deg, #1f6fd0 0%, #1557b0 100%); border-color: transparent; color: #fff; box-shadow: 0 12px 36px rgba(31,111,208,.28); }
.platform-card--hub .platform-card__label { background: rgba(255,255,255,.18); color: #fff; }
.platform-card--hub h4 { color: #fff; font-size: 19px; }
.platform-card--hub p { color: rgba(255,255,255,.85); }
.platform-card--hub .platform-card__media { background: #fff; border: 1px solid rgba(255,255,255,.2); padding: 6px; }
@media (max-width: 880px) { .platform-overview { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .platform-overview { grid-template-columns: 1fr; } }



/* feature-cards-4 变体 */
.feature-cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 980px) { .feature-cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .feature-cards-4 { grid-template-columns: 1fr; } }

/* 管理端/司机端 app-grid */
.app-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.app-grid-driver { grid-template-columns: repeat(5, 1fr); }
.app-card { background: #fff; border-radius: var(--r-lg); padding: 22px 20px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease); position: relative; overflow: hidden; }
.app-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.app-num { font-family: var(--font-num); font-size: 1.6rem; font-weight: 800; color: var(--brand); line-height: 1; margin-bottom: 8px; }
.app-card h4 { font-size: 1rem; font-weight: 700; color: var(--t-strong); margin-bottom: 6px; }
.app-card p { font-size: .84rem; color: var(--t-soft); line-height: 1.6; }
@media (max-width: 980px) { .app-grid, .app-grid-driver { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .app-grid, .app-grid-driver { grid-template-columns: 1fr; } }

/* 双轨道引导卡 */
.dual-track-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.dual-track-card { display: block; background: #fff; border-radius: var(--r-lg); padding: 36px 32px; border: 2px solid var(--line); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: all .3s var(--ease); position: relative; overflow: hidden; }
.dual-track-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--brand); }
.dual-track-card--partner { background: linear-gradient(135deg, #0e2a5c 0%, #0a1a3d 100%); color: #fff; border-color: transparent; }
.dual-track-card--partner .dual-track-tag { background: rgba(255,255,255,.15); color: #fff; }
.dual-track-card--partner h3 { color: #fff; }
.dual-track-card--partner .dual-track-list li { color: rgba(255,255,255,.85); }
.dual-track-card--partner .dual-track-cta { color: var(--accent); }
.dual-track-icon { font-size: 3rem; margin-bottom: 14px; }
.dual-track-tag { display: inline-block; padding: 4px 12px; background: var(--brand-soft); color: var(--brand-strong); font-size: .76rem; font-weight: 600; border-radius: 999px; margin-bottom: 12px; }
.dual-track-card h3 { font-size: 1.5rem; margin-bottom: 12px; color: var(--t-strong); }
.dual-track-card p { font-size: .94rem; color: var(--t-soft); line-height: 1.65; margin-bottom: 16px; }
.dual-track-list { list-style: none; padding: 0; margin: 0 0 20px; }
.dual-track-list li { padding: 6px 0; padding-left: 20px; position: relative; font-size: .88rem; color: var(--t); line-height: 1.55; }
.dual-track-list li::before { content: "✓"; position: absolute; left: 0; top: 6px; color: var(--brand); font-weight: 700; }
.dual-track-card--partner .dual-track-list li::before { color: var(--accent); }
.dual-track-cta { display: inline-flex; align-items: center; font-weight: 700; font-size: 1rem; color: var(--brand); }
.dual-track-card--partner .dual-track-cta:hover { color: var(--accent); }
.dual-track-cta:hover { gap: 8px; }
@media (max-width: 880px) { .dual-track-grid { grid-template-columns: 1fr; } }

/* 合作伙伴专栏 */
.partner-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-bottom: 36px; }
.partner-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); border-radius: var(--r-lg); padding: 28px 24px; transition: transform .3s var(--ease), background .3s var(--ease); }
.partner-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.07); }
.partner-icon { font-size: 2.4rem; margin-bottom: 14px; }
.partner-card h3 { font-size: 1.15rem; font-weight: 700; color: #fff; margin-bottom: 12px; }
.partner-card p { font-size: .9rem; color: var(--t-invert-soft); line-height: 1.75; }
.partner-card strong { color: var(--accent); font-weight: 700; }
.partner-cta { text-align: center; padding: 32px 24px; background: rgba(255,255,255,.04); border-radius: var(--r-lg); border: 1px solid rgba(255,255,255,.10); }
.partner-cta p { color: var(--t-invert-soft); font-size: 1rem; margin-bottom: 18px; max-width: 600px; margin-left: auto; margin-right: auto; }
@media (max-width: 880px) { .partner-grid { grid-template-columns: 1fr; } }


/* ============ 智慧云撬 · 图片布局 ============ */

/* Hero image */
.hero-img { max-width: 980px; width: 100%; border-radius: var(--r-lg); margin: 40px auto 0; display: block; box-shadow: 0 24px 60px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.08); aspect-ratio: 2912 / 1277; object-fit: cover; }

/* Architecture image */
.arch-img { max-width: 100%; width: 100%; border-radius: var(--r-lg); display: block; }
.arch-diagram { background: transparent !important; padding: 12px 0 !important; }

/* Hardware card with media */
.hw-card__media { margin-bottom: 18px; border-radius: var(--r); overflow: hidden; background: linear-gradient(170deg, #f3f7fc 0%, #e8eff8 100%); aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; }
.hw-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.hw-card:hover .hw-card__media img { transform: scale(1.05); }
.hw-card__media--safety { aspect-ratio: 16/10; padding: 8px; gap: 8px; display: grid; grid-template-columns: 1.6fr 1fr; }
.hw-card__media--safety .hw-card__media-primary { width: 100%; height: 100%; border-radius: calc(var(--r) - 2px); }
.hw-card__media--safety .hw-card__media-secondary { display: flex; flex-direction: column; gap: 8px; }
.hw-card__media--safety .hw-card__media-secondary img { flex: 1; width: 100%; height: 50%; object-fit: cover; border-radius: calc(var(--r) - 2px); }

/* Software platform center image */
.platform-center-img { max-width: 360px; width: 100%; border-radius: var(--r-lg); box-shadow: 0 16px 40px rgba(31,111,208,.25); position: relative; z-index: 2; }

/* Screenshot showcase row (used by cloud + manager + driver sections) */
.screenshot-row { display: grid; gap: 18px; margin-bottom: 36px; }
.screenshot-row img { width: 100%; border-radius: var(--r-lg); box-shadow: 0 8px 24px rgba(13,27,42,.08); border: 1px solid var(--line); background: #fff; }
.screenshot-row { grid-template-columns: repeat(2, 1fr); }
.screenshot-row-mgr { grid-template-columns: repeat(4, 1fr); }
.screenshot-row-drv { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .screenshot-row-mgr, .screenshot-row-drv { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .screenshot-row, .screenshot-row-mgr, .screenshot-row-drv { grid-template-columns: 1fr; } }

/* Partner showcase image */
.partner-showcase { margin-bottom: 32px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid rgba(255,255,255,.1); }
.partner-showcase img { width: 100%; display: block; }


/* ============ 液位仪页面 · 补充样式 ============ */

/* 4 产品形态卡 */
.variant-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.variant-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 22px; position: relative; transition: transform .3s var(--ease), box-shadow .3s var(--ease); box-shadow: 0 4px 16px rgba(13,27,42,.04); }
.variant-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(31,111,208,.12); }
.variant-card__media { background: linear-gradient(170deg, #f3f7fc 0%, #e8eff8 100%); border-radius: var(--r); aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; padding: 16px; }
.variant-card__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.variant-card__num { position: absolute; top: 20px; right: 22px; font-family: var(--font-num); font-size: 1.6rem; font-weight: 800; color: var(--gray-200); line-height: 1; }
.variant-card h3 { font-size: 1.15rem; font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.variant-card__sub { font-size: .85rem; color: var(--brand-strong); font-weight: 600; margin: 0 0 12px; }
.variant-card ul { list-style: none; padding: 0; margin: 0; border-top: 1px dashed var(--line); padding-top: 12px; }
.variant-card ul li { font-size: .85rem; color: var(--ink-3); padding: 4px 0 4px 16px; position: relative; line-height: 1.5; }
.variant-card ul li::before { content: "▸"; position: absolute; left: 0; color: var(--brand); font-weight: 700; }
@media (max-width: 720px) { .variant-grid { grid-template-columns: 1fr; } }

/* 探针卡片 */
.probe-card { display: grid; grid-template-columns: 1fr 1.4fr; gap: 32px; align-items: center; background: linear-gradient(160deg, #fff 0%, #f6f8fb 100%); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 32px; }
.probe-card__media { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: flex; align-items: center; justify-content: center; }
.probe-card__media img { max-width: 100%; max-height: 200px; object-fit: contain; }
.probe-card h4 { font-size: 1.15rem; font-weight: 700; margin: 0 0 10px; color: var(--ink); }
.probe-card p { font-size: .92rem; color: var(--ink-3); line-height: 1.7; margin: 0; }
@media (max-width: 720px) { .probe-card { grid-template-columns: 1fr; } }

/* 技术参数 4 栏 */
.params-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.params-col { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px; }
.params-col h4 { font-size: 1rem; font-weight: 700; color: var(--brand-strong); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--brand-light); display: inline-block; }
.params-col dl { display: grid; grid-template-columns: 1fr 2fr; gap: 8px 14px; margin: 0; }
.params-col dt { font-size: .85rem; color: var(--ink-3); font-weight: 500; }
.params-col dd { font-size: .85rem; color: var(--ink); font-weight: 600; margin: 0; }
@media (max-width: 720px) { .params-grid { grid-template-columns: 1fr; } }

/* UI 界面展示 4 列 */
.ui-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ui-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.ui-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(31,111,208,.12); }
.ui-card__media { background: #1a1f2c; border-radius: var(--r); aspect-ratio: 4/3; overflow: hidden; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; padding: 8px; }
.ui-card__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ui-card h4 { font-size: .95rem; font-weight: 700; margin: 0 0 6px; color: var(--ink); }
.ui-card p { font-size: .78rem; color: var(--ink-3); margin: 0; line-height: 1.55; }
/* 主界面大图 */
.ui-card--featured { grid-column: span 2; }
.ui-card--featured .ui-card__media { aspect-ratio: 16/9; background: linear-gradient(160deg, #1a1f2c 0%, #0d111a 100%); }
@media (max-width: 980px) { .ui-grid { grid-template-columns: repeat(2, 1fr); } .ui-card--featured { grid-column: span 2; } }
@media (max-width: 580px) { .ui-grid { grid-template-columns: 1fr; } .ui-card--featured { grid-column: span 1; } }


/* ============ 三次油气回收页面 ============ */

.yq-intro-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.yq-intro-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); box-shadow: 0 4px 16px rgba(13,27,42,.04); }
.yq-intro-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(31,111,208,.12); }
.yq-intro-card__media { background: linear-gradient(170deg, #f3f7fc 0%, #e8eff8 100%); border-radius: var(--r); aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; padding: 20px; }
.yq-intro-card__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.yq-intro-card h3 { font-size: 1.15rem; font-weight: 700; color: var(--brand-strong); margin: 0 0 8px; }
.yq-intro-card p { font-size: .9rem; color: var(--ink-3); line-height: 1.7; margin: 0; }
@media (max-width: 720px) { .yq-intro-grid { grid-template-columns: 1fr; } }

/* 三次回收流程卡 */
.stage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.stage-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 24px; position: relative; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.stage-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(31,111,208,.12); }
.stage-card__num { font-family: var(--font-num); font-size: 2.4rem; font-weight: 800; color: var(--brand); opacity: .15; line-height: 1; margin-bottom: 8px; }
.stage-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 0 0 10px; }
.stage-card p { font-size: .88rem; color: var(--ink-3); line-height: 1.7; margin: 0; }
@media (max-width: 720px) { .stage-grid { grid-template-columns: 1fr; } }

/* 安装卡 */
.install-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.install-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); box-shadow: 0 4px 16px rgba(13,27,42,.04); }
.install-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(31,111,208,.12); }
.install-card__media { background: #fff; border: 1px solid var(--line); border-radius: var(--r); aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; padding: 16px; }
.install-card__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.install-card h4 { font-size: 1.05rem; font-weight: 700; color: var(--brand-strong); margin: 0 0 8px; }
.install-card p { font-size: .88rem; color: var(--ink-3); line-height: 1.7; margin: 0; }
@media (max-width: 720px) { .install-grid { grid-template-columns: 1fr; } }

.install-list { margin: 0; padding-left: 22px; }
.install-list li { font-size: .9rem; color: var(--ink-3); line-height: 1.85; padding: 4px 0; }
.install-list li strong { color: var(--brand-strong); font-weight: 700; }

/* UI 截图网格 */
.ui-grid-yq { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ui-card-yq { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.ui-card-yq:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(31,111,208,.12); }
.ui-card-yq__media { background: #0d111a; border-radius: var(--r); aspect-ratio: 4/3; overflow: hidden; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; padding: 4px; }
.ui-card-yq__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ui-card-yq h4 { font-size: .92rem; font-weight: 700; margin: 0 0 6px; color: var(--ink); }
.ui-card-yq p { font-size: .76rem; color: var(--ink-3); margin: 0; line-height: 1.55; }
.ui-card-yq p strong { color: var(--brand-strong); font-weight: 600; }
/* 监控主界面大图 */
.ui-card-yq--featured { grid-column: span 2; }
.ui-card-yq--featured .ui-card-yq__media { aspect-ratio: 16/9; }
@media (max-width: 980px) { .ui-grid-yq { grid-template-columns: repeat(2, 1fr); } .ui-card-yq--featured { grid-column: span 2; } }
@media (max-width: 580px) { .ui-grid-yq { grid-template-columns: 1fr; } .ui-card-yq--featured { grid-column: span 1; } }


/* ============ 智慧加油机 v2 页面 ============ */

/* Hero 紧凑 + 4 产品并排 */
.page-hero--compact { padding-bottom: 60px; }
.hero-product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 700px; margin: 0 auto 0; padding-top: 60px; }
.hero-product { position: relative; aspect-ratio: 3/4; background: linear-gradient(170deg, #f3f7fc 0%, #e8eff8 100%); border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; padding: 8px 6px; box-shadow: 0 8px 24px rgba(13,27,42,.1); transition: transform .3s var(--ease), box-shadow .3s var(--ease); overflow: hidden; }
.hero-product:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(31,111,208,.18); }
.hero-product img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.hero-product__label { position: absolute; top: 8px; right: 8px; font-family: var(--font-num); font-size: .85rem; font-weight: 700; color: var(--brand); background: rgba(255,255,255,.92); padding: 2px 8px; border-radius: 20px; box-shadow: 0 2px 6px rgba(13,27,42,.08); }
.hero-product--qiaozhuang { background: linear-gradient(160deg, #fff5e6 0%, #ffe4b3 100%); }
@media (max-width: 580px) { .hero-product-grid { grid-template-columns: repeat(2, 1fr); } }
.hero-cta-row { display: flex; gap: 12px; justify-content: center; margin-top: 22px; }

/* 5 系列卡 — 统一高度 + 图片统一大小 + 文字统一位置 */
.series-card-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; align-items: stretch; }
.series-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); position: relative; overflow: hidden; min-height: 420px; }
.series-card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(31,111,208,.15); border-color: var(--brand-light); }
.series-card__no { position: absolute; top: 10px; left: 12px; font-family: var(--font-num); font-size: 1.2rem; font-weight: 800; color: var(--gray-200); z-index: 2; line-height: 1; }
/* 媒体区：固定高度 170px，5 张图区严格等高；图片 contain 居中不裁切 */
.series-card__media { background: linear-gradient(170deg, #f3f7fc 0%, #e8eff8 100%); height: 170px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 14px; }
.series-card__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* body 区：flex column，h3/tag 在顶部，specs 用 flex:1 撑开，cta 用 margin-top:auto 推到底 */
.series-card__body { padding: 14px 14px 16px; display: flex; flex-direction: column; flex: 1; }
.series-card__body h3 { font-size: .95rem; font-weight: 700; color: var(--ink); margin: 0 0 4px; line-height: 1.3; }
.series-card__tag { font-size: .72rem; color: var(--brand-strong); font-weight: 600; margin: 0 0 8px; line-height: 1.4; min-height: 2em; }
/* specs 用 flex:1 把下方 cta 推到底 */
.series-card__specs { list-style: none; padding: 8px 0 0; margin: 0 0 10px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 5px; flex: 1; }
.series-card__specs li { display: flex; justify-content: space-between; align-items: baseline; font-size: .74rem; line-height: 1.45; gap: 6px; }
.series-card__specs li span { color: var(--ink-3); flex-shrink: 0; }
.series-card__specs li strong { color: var(--ink); font-weight: 600; text-align: right; font-size: .72rem; }
.series-card__cta { font-size: .8rem; color: var(--brand); font-weight: 600; margin-top: auto; padding-top: 6px; }

@media (max-width: 1100px) { .series-card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 880px) { .series-card-grid { grid-template-columns: repeat(2, 1fr); } .series-card { min-height: 380px; } }
@media (max-width: 520px) { .series-card-grid { grid-template-columns: 1fr; } .series-card { min-height: auto; } }

/* 规格对比表 */
.compare-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; overflow-x: auto; box-shadow: 0 4px 16px rgba(13,27,42,.04); }
.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .88rem; }
.compare-table th, .compare-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.compare-table thead th { background: linear-gradient(180deg, var(--brand-soft), #fff); color: var(--ink); font-weight: 700; font-size: .95rem; border-bottom: 2px solid var(--brand); position: sticky; top: 0; }
.compare-th-spec { background: transparent !important; color: var(--ink-3) !important; font-weight: 600 !important; }
.compare-th-accent { background: linear-gradient(180deg, #fff5e6, #fff) !important; }
.compare-no { display: inline-block; font-family: var(--font-num); font-size: .8rem; font-weight: 800; color: var(--brand); background: rgba(31,111,208,.1); padding: 2px 8px; border-radius: 20px; margin-right: 6px; vertical-align: middle; }
.compare-td-accent { background: #fff8ec; font-weight: 600; }
.compare-table tbody th { color: var(--ink-3); font-weight: 600; font-size: .82rem; background: rgba(31,111,208,.02); }
.compare-table tbody tr:hover td, .compare-table tbody tr:hover th { background: rgba(31,111,208,.04); }
.compare-table tbody tr:hover .compare-td-accent { background: #fff0d6; }
.compare-table tbody tr:last-child td, .compare-table tbody tr:last-child th { border-bottom: none; }

/* 6 大核心优势 (dark section) */
.strength-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.strength-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg); padding: 28px 24px; transition: transform .3s var(--ease), background .3s var(--ease); }
.strength-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.07); }
.strength-card__icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; font-size: 28px; background: linear-gradient(140deg, var(--brand), var(--brand-strong)); border-radius: var(--r); margin-bottom: 14px; box-shadow: 0 6px 20px rgba(31,111,208,.4); }
.strength-card h3 { font-size: 1.1rem; font-weight: 700; color: #fff; margin: 0 0 10px; }
.strength-card p { font-size: .9rem; color: rgba(255,255,255,.75); line-height: 1.7; margin: 0; }
@media (max-width: 980px) { .strength-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .strength-grid { grid-template-columns: 1fr; } }

/* 6 应用场景 */
.scenario-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.scenario-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px; position: relative; transition: transform .3s var(--ease), box-shadow .3s var(--ease); overflow: hidden; }
.scenario-card::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(180deg, var(--brand), var(--brand-strong)); }
.scenario-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(31,111,208,.12); }
.scenario-card__tag { display: inline-block; font-family: var(--font-num); font-size: .75rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--brand-light), var(--brand-strong)); padding: 3px 10px; border-radius: 20px; margin-bottom: 12px; letter-spacing: .04em; }
.scenario-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.scenario-card p { font-size: .88rem; color: var(--ink-3); line-height: 1.7; margin: 0; }
.scenario-card p strong { color: var(--brand-strong); font-weight: 600; }
@media (max-width: 980px) { .scenario-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .scenario-grid { grid-template-columns: 1fr; } }

/* 4 步选型流程 */
.flow-grid { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 12px; align-items: stretch; }
.flow-step { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 22px; text-align: center; position: relative; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.flow-step:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(31,111,208,.12); }
.flow-step__no { display: inline-block; font-family: var(--font-num); font-size: .8rem; font-weight: 800; color: var(--brand); background: rgba(31,111,208,.1); padding: 4px 12px; border-radius: 20px; margin-bottom: 12px; letter-spacing: .04em; }
.flow-step h3 { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.flow-step p { font-size: .85rem; color: var(--ink-3); line-height: 1.65; margin: 0; }
.flow-step__arrow { display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: var(--brand); font-weight: 700; }
@media (max-width: 980px) { .flow-grid { grid-template-columns: 1fr; } .flow-step__arrow { transform: rotate(90deg); } }


/* 微信按钮（绿色） */
.contact-button.wechat-btn a { background: linear-gradient(140deg, #07c160, #06ad56); color: #fff; }
.contact-button.wechat-btn a:hover { background: linear-gradient(140deg, #06ad56, #059142); }
.contact-tooltip .wechat-qr { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.contact-tooltip .wechat-qr img { width: 110px; height: 110px; border-radius: 4px; background: #fff; padding: 4px; }
.contact-tooltip .wechat-qr span { font-size: 11px; color: var(--ink-3); }
[data-wechat-id] { font-family: var(--font-num); font-weight: 700; color: var(--brand-strong); user-select: all; }


/* ============ 微信添加好友页 ============ */
.wechat-card { display: grid; grid-template-columns: 1fr; gap: 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 40px; box-shadow: 0 4px 16px rgba(13,27,42,.04); }
.wechat-card__left { display: flex; flex-direction: column; gap: 28px; }
.wechat-ids { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wechat-id-box { background: linear-gradient(135deg, #f0f9f4, #e6f7ec); border: 2px solid #07c160; border-radius: var(--r-lg); padding: 24px 28px; display: flex; flex-direction: column; gap: 14px; }
.wechat-id-box > * { min-width: 0; max-width: 100%; }
.wechat-id-box__label { font-size: 12px; font-weight: 600; color: #06ad56; letter-spacing: .1em; }
.wechat-id-box__id { font-family: var(--font-num); font-size: 1.6rem; font-weight: 700; color: var(--ink); letter-spacing: .04em; user-select: all; word-break: break-all; }
.wechat-copy-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; }
.wechat-copy-btn.copied { background: #07c160; border-color: #07c160; color: #fff; }

.wechat-steps h3 { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0 0 14px; }
.wechat-steps ol { list-style: none; padding: 0; margin: 0; counter-reset: wstep; }
.wechat-steps li { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; font-size: .92rem; color: var(--ink-3); line-height: 1.6; min-width: 0; }
.wechat-steps li > * { min-width: 0; }
.wechat-steps li { overflow-wrap: anywhere; word-break: break-word; }
.wechat-steps li strong { color: var(--ink); }
.wechat-steps__no { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }

.wechat-alt { padding-top: 20px; border-top: 1px dashed var(--line); }
.wechat-alt h4 { font-size: .9rem; font-weight: 700; color: var(--ink-3); margin: 0 0 12px; }
.wechat-alt__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wechat-alt__btn { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--gray-50); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: var(--ink); transition: transform .2s var(--ease), border-color .2s var(--ease); }
.wechat-alt__btn:hover { transform: translateY(-2px); border-color: var(--brand); }
.wechat-alt__icon { font-size: 20px; }
.wechat-alt__btn strong { display: block; font-size: .82rem; color: var(--ink); }
.wechat-alt__btn span { display: block; font-size: .72rem; color: var(--ink-3); }

.wechat-card__right { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.wechat-qr-box { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; text-align: center; }
.wechat-qr-box img { width: 200px; height: 200px; display: block; background: #f3f7fc; }
.wechat-qr-box p { margin: 12px 0 0; font-size: .85rem; color: var(--ink-3); font-weight: 600; }
.wechat-tip { font-size: .82rem; color: var(--ink-3); text-align: center; line-height: 1.6; margin: 0; }

.wechat-promise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.wechat-promise__item { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 24px; text-align: center; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.wechat-promise__item:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(31,111,208,.12); }
.wechat-promise__icon { font-size: 36px; margin-bottom: 12px; }
.wechat-promise__item h3 { font-size: 1.1rem; font-weight: 700; color: var(--ink); margin: 0 0 10px; }
.wechat-promise__item p { font-size: .88rem; color: var(--ink-3); line-height: 1.7; margin: 0; }

@media (max-width: 880px) {
  .wechat-card { grid-template-columns: 1fr; padding: 28px 24px; gap: 22px; } .wechat-ids { grid-template-columns: 1fr; gap: 12px; }
  .wechat-alt__row { grid-template-columns: 1fr; }
  .wechat-promise { grid-template-columns: 1fr; }
  .wechat-promise__item { padding: 22px 18px; }
}

/* 微信添加好友页 - 移动端细节优化 */
@media (max-width: 560px) {
  .wechat-card { padding: 22px 18px; gap: 20px; border-radius: 14px; }
  .wechat-card__left { gap: 22px; }
  .wechat-id-box { padding: 18px 20px; gap: 12px; border-radius: 14px; }
  .wechat-id-box__id { font-size: 1.25rem; letter-spacing: .02em; }
  .wechat-id-box__label { font-size: 11px; }
  .wechat-copy-btn { width: 100%; align-self: stretch; justify-content: center; padding: 11px 14px; font-size: .9rem; }
  .wechat-copy-btn svg { width: 15px; height: 15px; }
  .wechat-steps h3 { font-size: .95rem; margin-bottom: 12px; }
  .wechat-steps li { font-size: .88rem; gap: 10px; padding: 7px 0; line-height: 1.55; }
  .wechat-steps__no { width: 22px; height: 22px; font-size: 11px; }
  .wechat-alt { padding-top: 16px; }
  .wechat-alt h4 { font-size: .85rem; margin-bottom: 10px; }
  .wechat-alt__row { gap: 8px; }
  .wechat-alt__btn { padding: 12px 14px; gap: 12px; }
  .wechat-alt__icon { font-size: 22px; }
  .wechat-alt__btn strong { font-size: .85rem; }
  .wechat-alt__btn span { font-size: .74rem; word-break: break-all; }
  .wechat-promise { gap: 12px; }
  .wechat-promise__item { padding: 20px 16px; }
  .wechat-promise__icon { font-size: 30px; margin-bottom: 10px; }
  .wechat-promise__item h3 { font-size: 1rem; margin-bottom: 8px; }
  .wechat-promise__item p { font-size: .82rem; line-height: 1.6; }
}

/* iOS Safari 防止 auto-zoom 按钮/输入（>=16px） */
@supports (-webkit-touch-callout: none) {
  .wechat-copy-btn { font-size: 16px; }
}