/* ============ 核心 OKLCH 色彩系统 ============ */
:root{
  /* 品牌主色：高端工业蓝（钴蓝 / 深蓝金属质感） */
  --ink-teal-900: oklch(22% 0.08 245);   /* 深蓝墨底 */
  --ink-teal-700: oklch(34% 0.1 245);    /* 深蓝 */
  --ink-teal-500: oklch(50% 0.14 245);   /* 钴蓝 */
  --ink-teal-300: oklch(72% 0.12 245);   /* 湖蓝 */
  --ink-teal-50:  oklch(95% 0.02 245);   /* 极浅蓝灰 */

  /* 强调CTA色：琥珀金（焊接火花/金属反光） */
  --amber-800: oklch(56% 0.16 58);
  --amber-600: oklch(70% 0.15 62);
  --amber-400: oklch(82% 0.12 78);
  --amber-50:  oklch(96% 0.03 88);

  /* 中性色：带极微品牌色光（避免纯灰死气） */
  --limestone: oklch(97% 0.005 90);      /* 暖石灰底 */
  --ivory:    oklch(99.3% 0.002 90);     /* 表面白 */
  --graphite-900: oklch(18% 0.008 192);
  --graphite-700: oklch(30% 0.01 192);
  --graphite-500: oklch(50% 0.012 192);
  --graphite-300: oklch(78% 0.01 192);
  --graphite-100: oklch(91% 0.008 192);

  /* 语义色（每个行业方案的专属色调） */
  --gas-hue:   16;   /* 燃气：暖橙 */
  --indu-hue:  38;   /* 工矿：深褐金 */
  --muni-hue:  250;  /* 市政：群青 */
  --hvac-hue:  32;   /* 水电暖通：琥珀 */
  --wate-hue:  215;  /* 水务：普鲁士蓝 */
  --fire-hue:  20;   /* 消防：警戒红 */

  /* 阴影尺度 */
  --shadow-1: 0 1px 2px rgba(18,24,30,.05), 0 1px 1px rgba(18,24,30,.03);
  --shadow-2: 0 8px 24px rgba(18,24,30,.08), 0 2px 6px rgba(18,24,30,.05);
  --shadow-3: 0 24px 48px rgba(18,24,30,.12), 0 8px 16px rgba(18,24,30,.08);

  /* 字重 */
  --w-4: 400; --w-5: 500; --w-6: 600; --w-7: 700; --w-8: 800;
  --radius-s: 6px; --radius-m: 12px; --radius-l: 20px; --radius-xl: 28px;
  --container: 1280px;
}
:root[data-theme="dark"]{
  --limestone: oklch(16% 0.008 192);
  --ivory:    oklch(20% 0.008 192);
  --graphite-900: oklch(97% 0.005 90);
  --graphite-700: oklch(86% 0.008 192);
  --graphite-500: oklch(68% 0.012 192);
  --graphite-300: oklch(40% 0.01 192);
  --graphite-100: oklch(26% 0.008 192);
}

/* ============ 基础 ============ */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:"Inter","SF Pro Display","PingFang SC","Microsoft YaHei UI",system-ui,-apple-system,sans-serif;
  font-weight:var(--w-4);
  color:var(--graphite-900);
  background:var(--limestone);
  font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","cv11","cv02","cv03","cv04";
}
.num,.tabular{font-family:"JetBrains Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}

/* ============ 顶部信息条 ============ */
.preheader{
  background:var(--ink-teal-900);
  color:#fff;
  font-size:12.5px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.preheader .container{display:flex;justify-content:space-between;align-items:center;height:38px}
.pre-left{display:flex;gap:24px;align-items:center}
.pre-left .dot{width:7px;height:7px;border-radius:50%;background:var(--amber-600);box-shadow:0 0 0 4px rgba(244,180,0,.12);display:inline-block;margin-right:8px;animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(244,180,0,.45)}100%{box-shadow:0 0 0 10px rgba(244,180,0,0)}}
.pre-right{display:flex;gap:18px;align-items:center}
.pre-right a{opacity:.85;transition:opacity .2s}
.pre-right a:hover{opacity:1}
.divider{width:1px;height:14px;background:rgba(255,255,255,.14)}

/* ============ Header ============ */
.site-header{
  background:var(--ivory);
  border-bottom:1px solid var(--graphite-100);
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(180%) blur(10px);
  background:rgba(255,255,255,.85);
}
.site-header .container{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px;height:76px}
.logo{display:flex;align-items:center;gap:12px}
.logo-mark{
  width:42px;height:42px;border-radius:12px;
  background:linear-gradient(135deg,var(--ink-teal-700),var(--ink-teal-500));
  display:grid;place-items:center;color:#fff;font-weight:800;letter-spacing:-.5px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),var(--shadow-1);
  position:relative;overflow:hidden;
}
.logo-mark::after{
  content:"";position:absolute;inset:-1px;background:
    linear-gradient(135deg,transparent 45%,rgba(255,255,255,.35) 50%,transparent 55%);
  transform:translateX(-60%);animation:shimmer 3.5s ease-in-out infinite;
}
@keyframes shimmer{60%{transform:translateX(60%)}100%{transform:translateX(60%)}}
.logo-mark span{font-size:16px;font-family:"JetBrains Mono",monospace}
.logo-text{display:flex;flex-direction:column;line-height:1.1}
.logo-text .zh{font-weight:800;font-size:17px;letter-spacing:.5px;color:var(--ink-teal-900)}
.logo-text .sub{font-size:11px;color:var(--graphite-500);margin-top:3px;letter-spacing:1.5px;text-transform:uppercase}

.main-nav{display:flex;gap:4px;justify-self:center}
.nav-link{
  position:relative;padding:10px 16px;border-radius:10px;
  font-size:14.5px;font-weight:500;color:var(--graphite-700);
  transition:all .2s ease;
}
.nav-link:hover{background:var(--ink-teal-50);color:var(--ink-teal-700)}
.nav-link.is-active{
  color:var(--ink-teal-900);
  background:var(--ink-teal-50);
  box-shadow:inset 0 -2px 0 var(--ink-teal-500);
}
.nav-link.has-sub::after{
  content:"";display:inline-block;width:7px;height:7px;margin-left:6px;margin-bottom:2px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);opacity:.5;
}

.header-actions{display:flex;align-items:center;gap:10px}
.search{
  display:flex;align-items:center;gap:8px;
  background:var(--limestone);border:1px solid var(--graphite-100);
  border-radius:12px;padding:0 12px;height:42px;width:320px;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.search:focus-within{
  border-color:var(--ink-teal-500);
  background:#fff;
  box-shadow:0 0 0 4px var(--ink-teal-50);
}
.search svg{flex-shrink:0;color:var(--graphite-500)}
.search input{
  flex:1;border:0;outline:0;background:transparent;
  font:inherit;color:var(--graphite-900);font-size:14px;
}
.search input::placeholder{color:var(--graphite-500)}
.icon-btn{
  position:relative;width:42px;height:42px;border-radius:12px;
  border:1px solid var(--graphite-100);background:var(--ivory);
  display:grid;place-items:center;color:var(--graphite-700);
  transition:all .2s;
}
.icon-btn:hover{color:var(--ink-teal-700);border-color:var(--ink-teal-300);background:var(--ink-teal-50)}
.icon-btn .badge{
  position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;
  background:var(--amber-600);color:#fff;border-radius:999px;font-size:11px;
  display:grid;place-items:center;font-weight:700;
  box-shadow:0 0 0 2px var(--ivory);
}
.cta-btn{
  display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:12px;
  background:linear-gradient(135deg,var(--ink-teal-700),var(--ink-teal-500));color:#fff;
  font-weight:600;font-size:14px;border:0;
  box-shadow:0 4px 14px rgba(24,108,112,.28),inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .15s ease,box-shadow .2s ease,filter .2s ease;
}
.cta-btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(24,108,112,.35),inset 0 1px 0 rgba(255,255,255,.22);filter:brightness(1.04)}
.cta-btn.amber{
  background:linear-gradient(135deg,var(--amber-800),var(--amber-600));
  box-shadow:0 4px 14px rgba(180,110,0,.28),inset 0 1px 0 rgba(255,255,255,.22);
}

/* ============ Hero 英雄区 ============ */
/* Hero 主色调：纯深蓝钴金属渐变（不再叠加 Banner 图，避免 Banner 自带大文字和 Hero 标题冲突）
   用户明确说"要么就不用 Banner"——所以这里弃用 CMS Banner 图片，直接纯高端渐变背景 */
.hero{
  position:relative;overflow:hidden;
  padding-top: 180px;
  background:
    /* 顶部：极深蓝 */
    radial-gradient(1100px 580px at 82% -10%, rgba(96,165,250,.28), transparent 55%),
    /* 左下：琥珀金光晕点缀 */
    radial-gradient(900px 560px at 8% 96%, rgba(244,180,0,.2), transparent 55%),
    /* 右下：湖蓝光晕 */
    radial-gradient(900px 560px at 92% 92%, rgba(37,99,235,.26), transparent 55%),
    /* 主背景：深蓝钴金属对角渐变 */
    linear-gradient(145deg, #0f172a 0%, #172554 30%, #1e3a8a 62%, #2563eb 100%);
}

/* === CMS Swiper Banner 层：结构保留（后台编辑仍然可用），但视觉完全隐藏 === */
.hero-banner{
  position:absolute;inset:0 0 auto 0;height:100%;
  z-index:0;overflow:hidden;
  /* 关键：隐藏 Banner，但保留 DOM（CMS 静态块渲染不变） */
  visibility:hidden;pointer-events:none;opacity:0;
}
/* 以下 Swiper 样式保留为 fallback，以防用户将来要显示 */
.hero-banner #bannerSwiper,
.hero-banner .swiper,
.hero-banner .swiper-wrapper,
.hero-banner .swiper-slide{
  width:100% !important;height:100% !important;
}
.hero-banner .swiper-slide{
  display:block;
}
.hero-banner .swiper-slide img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.hero-banner .swiper-pagination,
.hero-banner .swiper-button-prev,
.hero-banner .swiper-button-next{
  display:none !important;
}
/* 遮罩层同样隐藏（因为现在用纯渐变做底） */
.hero-banner-mask{
  display:none;
}
.hero-banner-noise{
  display:none;
}
/* 在 Hero 本体上用伪元素做金属颗粒 + 蓝斜线光束，替代原噪点叠层做质感 */
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  background-image:
    /* 颗粒噪点 */
    radial-gradient(rgba(255,255,255,.4) 1px,transparent 1px),
    radial-gradient(rgba(0,0,0,.35) 1px,transparent 1px),
    /* 细网格 */
    linear-gradient(rgba(96,165,250,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(96,165,250,.08) 1px,transparent 1px);
  background-size:3px 3px,4px 4px,48px 48px,48px 48px;
  mask-image:radial-gradient(ellipse 70% 80% at 50% 50%,#000 30%,transparent 75%);
  pointer-events:none;
  opacity:.8;
}
/* 深蓝金属斜向光束 */
.hero::after{
  content:"";position:absolute;inset:-40% -20%;z-index:1;pointer-events:none;
  background:linear-gradient(115deg, transparent 38%, rgba(96,165,250,.09) 46%, rgba(255,255,255,.1) 50%, rgba(244,180,0,.05) 54%, transparent 62%);
  transform:rotate(0deg);
  animation:hero-shimmer 14s ease-in-out infinite;
}
@keyframes hero-shimmer{ 0%,100%{transform:translateX(-5%)} 50%{transform:translateX(5%)} }
.hero-inner.container{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.08fr 1fr;gap:48px;align-items:center;
  padding-top:32px;padding-bottom:104px;
  min-height:640px;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  padding:5px 12px 5px 6px;border-radius:999px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  color:#fff;font-size:13px;font-weight:600;
  margin-bottom:24px;
  backdrop-filter:blur(10px);
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.eyebrow .flag{
  padding:2px 9px;border-radius:999px;
  background:linear-gradient(135deg,var(--amber-800),var(--amber-500));
  color:#fff;font-weight:800;font-size:11px;letter-spacing:1px;
  box-shadow:0 4px 10px rgba(244,180,0,.35),inset 0 1px 0 rgba(255,255,255,.25);
}
.hero h1{
  font-size:clamp(36px, 4.2vw, 56px);
  line-height:1.08;font-weight:800;letter-spacing:-.8px;
  color:#fff;margin:0 0 20px;
  max-width:620px;
  text-shadow:0 2px 22px rgba(0,0,0,.42), 0 1px 0 rgba(15,23,42,.35);
}
.hero h1 .accent{
  background:linear-gradient(135deg, #fff6d6 0%, var(--amber-400) 55%, #ffba08 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  position:relative;white-space:nowrap;
  filter:drop-shadow(0 1px 12px rgba(244,180,0,.22));
}
.hero h1 .accent::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;
  background:linear-gradient(90deg,rgba(255,214,102,.95),var(--amber-600));
  border-radius:2px;opacity:.55;
  box-shadow:0 0 10px rgba(244,180,0,.3);
}
.hero p.lead{
  font-size:17px;line-height:1.78;color:#fff;
  max-width:540px;margin:0 0 36px;font-weight:500;
  text-shadow:0 1px 14px rgba(0,0,0,.4), 0 1px 0 rgba(15,23,42,.45);
  letter-spacing:.1px;
}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:48px}
/* 次按钮：白底钴蓝字，低调衬托主按钮 */
.btn-ghost{
  display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border-radius:12px;
  background:#fff;color:#1e3a8a;font-weight:700;font-size:15px;
  border:1px solid rgba(255,255,255,.82);box-shadow:0 10px 24px rgba(0,0,0,.2);
  transition:all .2s;
}
.btn-ghost:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(0,0,0,.28);filter:brightness(1.03)}
/* 主按钮：琥珀金渐变（金蓝撞色更高端，深蓝工业背景上最耀眼的 CTA） */
.btn-primary{
  display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 24px;border-radius:12px;
  background:linear-gradient(135deg,#b45309,#d97706 30%,#f59e0b 60%,#fbbf24 100%);color:#1e1600;
  font-weight:800;font-size:15px;border:0;letter-spacing:.1px;
  box-shadow:0 14px 36px rgba(245,158,11,.52), inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(180,83,9,.25);
  transition:all .2s;
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 46px rgba(245,158,11,.65), inset 0 1px 0 rgba(255,255,255,.45), inset 0 0 0 1px rgba(180,83,9,.3);
  filter:brightness(1.05) saturate(1.05);
}

/* 兼容：旧 Banner DOM 内遗留的标题/按钮（比如"了解更多 >>"阴影框）
   因为 Banner 本身已 hidden，这里额外保险隐藏所有可能出现在 hero 内的旧 banner 文本/链接类 */
.hero .slides,
.hero .slides span,
.hero .slide .title,
.hero .slide .desc,
.hero .slide .link-arrow,
.hero .learn-more,
.hero .banner-title,
.hero .banner-desc{
  display:none !important;visibility:hidden !important;opacity:0 !important;
}

/* 5项工业承诺指标条：Hero 深色背景玻璃态（紧凑单行版） */
.promise-strip{
  display:flex !important;flex-wrap:nowrap !important;
  gap:12px;margin-top:32px;
  padding:16px 18px;
  border-radius:16px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 10px 32px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.12);
  overflow:visible;
}
.promise-item{
  flex:1 1 0 0 !important;
  min-width:0 !important;
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  position:relative;
  white-space:nowrap;
}
.promise-item + .promise-item::before{display:none}
.promise-item .badge-num{
  flex-shrink:0;width:44px;height:44px;border-radius:12px;
  background:linear-gradient(135deg,#1e3a8a,#2563eb);
  border:1px solid rgba(255,255,255,.22);
  display:grid;place-items:center;color:#fff;font-weight:800;font-family:"JetBrains Mono",monospace;font-size:13px;
  box-shadow:0 4px 14px rgba(37,99,235,.35),inset 0 1px 0 rgba(255,255,255,.18);
}
.promise-item:nth-child(2) .badge-num,
.promise-item:nth-child(4) .badge-num{
  background:linear-gradient(135deg,var(--amber-800),var(--amber-600));
  border-color:rgba(255,220,140,.4);
  color:#fff;
  box-shadow:0 4px 14px rgba(180,110,0,.32),inset 0 1px 0 rgba(255,255,255,.22);
}
.promise-item .txt{display:flex;flex-direction:column;gap:2px;min-width:0;overflow:hidden}
/* 单行标题，防止换行竖排 */
.promise-item .t{
  display:block;
  font-weight:700;font-size:14px;color:rgba(255,255,255,.97);
  text-shadow:0 1px 4px rgba(0,0,0,.25);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.3;
}
.promise-item .s{display:none} /* 隐藏副描述，保持单行紧凑 */

/* 右侧 Hero Visual - 工业产品场景组合 */
.hero-visual{
  position:relative;aspect-ratio:1/1;min-height:440px;max-width:500px;
  /* 右侧留 24px 边距，不再贴屏截断 */
  justify-self:end;width:calc(100% - 24px);margin-right:24px;
  overflow:visible;
}
/* ============================================================
   3 张 hv-card：transform 统一收敛到这里（单一控制源原则）
   - 默认 transform 由各子卡的 CSS 变量 --hv-rot 提供（经验 1089751：避免多选择器竞争）
   - hover 时追加 :is() 伪类统一添加 scale(1.03) + translateZ(0) 加速层
   - z-index: 默认分层 → hover: 999 统一推到最上层
   ============================================================ */
.hv-card{
  position:absolute;border-radius:var(--radius-l);overflow:hidden;
  background:#fff;border:1px solid rgba(255,255,255,.25);box-shadow:0 18px 48px rgba(0,0,0,.28);
  will-change:transform,z-index,box-shadow;
  /* —— 单一 transform 控制源：var(--hv-rot) 默认值 none —— */
  transform: var(--hv-rot, none) scale(1);
  transform-origin: var(--hv-origin, center);
  z-index: var(--hv-z, 2);
  /* 统一过渡：所有被 hover 改变的属性都走同一曲线 */
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, z-index 0s linear .35s, filter .35s ease;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  cursor:pointer;
}
/* Hover：置顶 + 微缩放 + 阴影加深 + 金边反光
   z-index 过渡策略：立即提升到 999（无延迟），离开时延迟 0.35s 再降（避免卡片抖动）*/
.hv-card:hover{
  z-index: 999 !important;
  /* 在原旋转 --hv-rot 基础上追加缩放 1.03 */
  transform: var(--hv-rot, none) scale(1.035) translateY(-2px);
  box-shadow:
    0 30px 68px rgba(0,0,0,.38),
    0 0 0 1px rgba(244,180,0,.35),
    0 0 28px 4px rgba(244,180,0,.18);
  filter: brightness(1.04) saturate(1.08);
  /* 立即置顶（不用等过渡） */
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, z-index 0s linear 0s, filter .35s ease;
}
/* Hover 时给卡面加琥珀金顶部扫光（纯 CSS 伪元素，不新增 DOM） */
.hv-card::before{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:linear-gradient(135deg, transparent 35%, rgba(255,255,255,.18) 49%, rgba(244,180,0,.15) 51%, transparent 65%);
  transform:translateX(-60%);opacity:0;
  transition:transform .8s cubic-bezier(.2,.8,.2,1), opacity .6s ease;
  border-radius:inherit;
  mix-blend-mode:screen;
}
.hv-card:hover::before{
  transform:translateX(60%);opacity:1;
}

.hv-card.main{
  /* left/top/width/height 显式定位，背景不变 */
  left:14%;top:4%;width:74%;height:76%;
  background:
    linear-gradient(160deg,rgba(30,58,138,.92) 0%,rgba(37,99,235,.72) 50%,rgba(244,180,0,.22) 100%),
    url('https://img.jxxdymall.com/appserver/system/燃气方案总背景.png') center/cover;
  /* 主卡：基础 z-index 1（作为底层） */
  --hv-z: 1;
  --hv-rot: none;
  --hv-origin: center;
}
.hv-card.main::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 30% 20%,rgba(255,255,255,.14),transparent 40%);
  pointer-events:none;
  z-index:1;
}
.hv-card .tag{
  position:absolute;top:18px;left:18px;z-index:3;
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 13px;border-radius:999px;background:rgba(0,0,0,.3);backdrop-filter:blur(12px);
  color:#fff;font-size:12px;font-weight:600;border:1px solid rgba(255,255,255,.22);
}
.hv-card .tag .live{
  width:7px;height:7px;border-radius:50%;background:#ef4444;
  box-shadow:0 0 0 3px rgba(239,68,68,.25);animation:pulse 1.8s infinite;
}
.hv-card .stats{
  position:absolute;bottom:20px;left:20px;right:20px;z-index:3;
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
}
.hv-stat{
  background:rgba(255,255,255,.12);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-m);
  padding:12px 10px;color:#fff;
  text-align:center;
}
.hv-stat .n{font-family:"JetBrains Mono",monospace;font-weight:800;font-size:20px;letter-spacing:-.5px;display:block;line-height:1.1}
.hv-stat .l{font-size:11px;opacity:.86;margin-top:4px;display:block}

/* 右上小卡（一站式采购） */
.hv-card.mini-top{
  /* 靠右对齐：transform-origin 右上点，旋转后右上角仍贴 hero-visual 右边缘不越界 */
  top:0;right:0;width:56%;aspect-ratio:16/9;
  background:linear-gradient(145deg,#172554 0%,#1e3a8a 40%,#3b82f6 100%);
  /* 旋转 1.5° 通过 CSS 变量 --hv-rot 写入 → hover 时统一在基础 transform 上追加 scale */
  --hv-rot: rotate(1.5deg);
  --hv-origin: top right;
  --hv-z: 3;
  transform-origin: top right;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:14px 22px 14px 18px;color:#fff;
  box-shadow:0 22px 48px rgba(30,58,138,.52), inset 0 1px 0 rgba(255,255,255,.22);
  border-radius:16px;
}
.hv-card.mini-top::before{ /* 径向高光层，不是 hover 扫光层，保留在 ::after */ }
.hv-card.mini-top::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 82% 20%,rgba(255,255,255,.24),transparent 52%);
  pointer-events:none;
  border-radius:inherit;
  z-index:1;
}
.hv-card.mini-top .mini-label{
  position:relative;z-index:2;text-align:center;width:100%;
}
.hv-card.mini-top .m-title{
  font-size:16px;font-weight:800;letter-spacing:.3px;margin-bottom:4px;line-height:1.3;
  background:linear-gradient(135deg,#fff7d6,var(--amber-400));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hv-card.mini-top .m-sub{
  font-size:11px;opacity:.95;letter-spacing:.3px;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* 左下小卡：白底信息卡 */
.hv-card.mini-bot{
  /* 位置：左下偏中，不贴边不溢出 */
  left:4%;bottom:0;width:56%;padding:16px 14px;
  display:flex;flex-direction:column;gap:10px;
  background:#fff;border:1px solid rgba(30,58,138,.1);
  box-shadow:0 22px 52px rgba(0,0,0,.22);
  border-radius:14px;
  /* 旋转 -3°：通过 CSS 变量，hover 时统一追加 */
  --hv-rot: rotate(-3deg);
  --hv-origin: bottom left;
  --hv-z: 4;
  transform-origin: bottom left;
}
.hv-card.mini-bot .row{display:flex;align-items:center;gap:10px}
.hv-card.mini-bot .av{
  flex-shrink:0;width:32px;height:32px;border-radius:9px;
  background:linear-gradient(135deg,#1e3a8a,#3b82f6);
  display:grid;place-items:center;color:#fff;font-size:11.5px;font-weight:800;
  box-shadow:0 4px 10px rgba(37,99,235,.28);
}
.hv-card.mini-bot .nm{font-size:12.5px;font-weight:700;color:var(--graphite-900)}
.hv-card.mini-bot .sb{font-size:11px;color:var(--graphite-500);line-height:1.4}
.hv-card.mini-bot .bar{height:5px;background:rgba(30,58,138,.08);border-radius:999px;overflow:hidden}
.hv-card.mini-bot .bar i{display:block;height:100%;width:78%;background:linear-gradient(90deg,#1e3a8a,var(--amber-600));border-radius:999px}

/* ============ 行业方案总览导航 ============ */
.solutions-nav-section{
  margin-top:-44px;position:relative;z-index:3;
}
.sol-nav{
  display:grid;grid-template-columns:repeat(6,1fr);gap:0;
  background:#fff;border-radius:var(--radius-l);border:1px solid var(--graphite-100);
  box-shadow:var(--shadow-3);overflow:hidden;
}
.sol-nav-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:22px 12px;border:0;background:transparent;cursor:pointer;position:relative;
  transition:background .22s,color .22s;
}
.sol-nav-btn + .sol-nav-btn::before{
  content:"";position:absolute;left:0;top:24px;bottom:24px;width:1px;background:var(--graphite-100);
}
.sol-icon-box{
  width:52px;height:52px;border-radius:16px;
  background:var(--ink-teal-50);display:grid;place-items:center;
  transition:transform .25s,background .25s,box-shadow .25s;
}
.sol-icon-box svg{width:26px;height:26px;color:var(--ink-teal-700)}
.sol-nav-btn .lbl{font-weight:700;font-size:14px;color:var(--graphite-900);transition:color .2s}
.sol-nav-btn .sub{font-size:11.5px;color:var(--graphite-500);margin-top:-6px}
.sol-nav-btn:hover{background:var(--limestone)}
.sol-nav-btn:hover .sol-icon-box{transform:translateY(-2px)}
.sol-nav-btn.is-active{background:linear-gradient(180deg,var(--ink-teal-50),transparent)}
.sol-nav-btn.is-active .sol-icon-box{
  background:linear-gradient(135deg,var(--ink-teal-700),var(--ink-teal-500));
  box-shadow:0 10px 20px rgba(24,108,112,.28),inset 0 1px 0 rgba(255,255,255,.2);
}
.sol-nav-btn.is-active .sol-icon-box svg{color:#fff}
.sol-nav-btn.is-active .lbl{color:var(--ink-teal-700)}

/* ============ Section 通用 ============ */
.section{padding:96px 0;position:relative}
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:44px;
}
.sec-eyebrow{
  display:inline-flex;align-items:center;gap:8px;color:var(--ink-teal-700);
  font-family:"JetBrains Mono",monospace;font-size:12.5px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;margin-bottom:10px;
}
.sec-eyebrow::before{content:"";width:28px;height:2px;background:var(--ink-teal-500);border-radius:2px}
.section-head h2{
  font-size:clamp(28px,3vw,38px);font-weight:800;letter-spacing:-.5px;line-height:1.15;
  margin:0;color:var(--graphite-900);max-width:620px;
}
.section-head .desc{font-size:15px;color:var(--graphite-500);max-width:420px;line-height:1.7;margin:0}

/* ============ 品牌合作伙伴（流光横带） ============ */
.brands-section{padding:80px 0;background:var(--ivory);border-top:1px solid var(--graphite-100);border-bottom:1px solid var(--graphite-100)}
.brands-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}
.brands-head .l{display:flex;align-items:baseline;gap:14px}
.brands-head h3{font-size:20px;font-weight:700;margin:0;color:var(--graphite-900)}
.brands-head .m{font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--graphite-500)}
.brands-head .m b{color:var(--amber-800);font-weight:800}
.brands-head .r a{font-size:13px;color:var(--ink-teal-700);font-weight:600}
.brands-marquee{
  position:relative;overflow:hidden;padding:14px 0;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.brands-track{
  display:flex;gap:44px;width:max-content;
  animation:mar 45s linear infinite;
}
@keyframes mar{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.brand-card{
  flex:0 0 auto;width:160px;height:80px;border-radius:var(--radius-m);
  background:#fff;border:1px solid var(--graphite-100);box-shadow:var(--shadow-1);
  display:grid;place-items:center;padding:0 18px;
  transition:transform .2s,box-shadow .2s;
}
.brand-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.brand-card .mark{
  font-weight:800;letter-spacing:1px;color:var(--graphite-700);
  font-family:"JetBrains Mono",monospace;
}
.brand-card .mark.gas{color:oklch(60% 0.16 30)}
.brand-card .mark.indu{color:oklch(48% 0.1 48)}
.brand-card .mark.muni{color:oklch(56% 0.15 260)}
.brand-card .mark.hvac{color:oklch(62% 0.13 38)}
.brand-card .mark.wate{color:oklch(62% 0.15 230)}
.brand-card .mark.fire{color:oklch(58% 0.2 20)}

/* ============ 热销榜（横向滚动Top10） ============ */
.tops{
  padding:32px;background:var(--ivory);border:1px solid var(--graphite-100);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-2);margin-bottom:72px;
}
.tops-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:20px}
.tops-title{display:flex;align-items:center;gap:12px}
.tops-title .medal{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,#fde68a,#f59e0b);color:#7c2d12;font-weight:800;
  box-shadow:0 6px 16px rgba(245,158,11,.28);
}
.tops-title h3{margin:0;font-size:20px;font-weight:800;color:var(--graphite-900)}
.tops-title .sp{font-size:13px;color:var(--graphite-500)}
.tops-controls{display:flex;gap:8px}
.tb{
  width:40px;height:40px;border-radius:12px;border:1px solid var(--graphite-100);background:#fff;
  display:grid;place-items:center;color:var(--graphite-700);transition:all .2s;
}
.tb:hover{color:var(--ink-teal-700);border-color:var(--ink-teal-300);background:var(--ink-teal-50)}
.tops-carousel{overflow:hidden}
.tops-track{display:flex;gap:16px;padding:2px 2px 4px}
.top-card{
  flex:0 0 260px;background:#fff;border-radius:var(--radius-m);
  border:1px solid var(--graphite-100);box-shadow:var(--shadow-1);
  padding:16px;display:flex;gap:14px;position:relative;
  transition:transform .22s,box-shadow .22s,border-color .22s;
}
.top-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:var(--ink-teal-300)}
.top-card .rank{
  position:absolute;top:-8px;left:-8px;width:30px;height:30px;border-radius:10px;
  display:grid;place-items:center;font-family:"JetBrains Mono",monospace;font-weight:800;font-size:13px;
  background:var(--graphite-700);color:#fff;box-shadow:0 6px 12px rgba(0,0,0,.18),0 0 0 2px var(--ivory);
}
.top-card:nth-child(1) .rank{background:linear-gradient(135deg,#f59e0b,#d97706)}
.top-card:nth-child(2) .rank{background:linear-gradient(135deg,#9ca3af,#6b7280)}
.top-card:nth-child(3) .rank{background:linear-gradient(135deg,#b45309,#92400e)}
.top-card .pic{
  width:80px;height:80px;border-radius:10px;flex-shrink:0;
  background:var(--limestone);overflow:hidden;
  background-size:cover;background-position:center;
}
.top-card .info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.top-card .name{font-size:13.5px;font-weight:600;color:var(--graphite-900);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.top-card .tag{
  display:inline-flex;padding:2px 8px;border-radius:999px;
  background:var(--amber-50);color:var(--amber-800);font-size:11px;font-weight:600;width:max-content;
}
.top-card .price{font-weight:800;color:var(--ink-teal-700);font-size:16px;font-family:"JetBrains Mono",monospace;margin-top:auto}
.top-card .sold{font-size:11px;color:var(--graphite-500)}

/* ============ 6大方案区（Editorial Momentum 差异化布局） ============ */
.sol-panels{display:flex;flex-direction:column;gap:96px}
.sol-panels > section{position:relative}

/* —— 通用：卡片 / 网格 —— */
.p-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.p-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.p-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

.p-card{
  background:#fff;border-radius:var(--radius-m);border:1px solid var(--graphite-100);
  overflow:hidden;box-shadow:var(--shadow-1);display:flex;flex-direction:column;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease;
}
.p-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--ink-teal-300)}
.p-card--lg{border-radius:var(--radius-l)}

.p-thumb{
  position:relative;aspect-ratio:4/3;background:var(--limestone);overflow:hidden;
  background-size:contain;background-position:center;background-repeat:no-repeat;
}
.p-thumb--lg{aspect-ratio:5/4}
.p-thumb--hero{aspect-ratio:16/10}
.p-thumb .cover{
  position:absolute;inset:0;opacity:0;transform:scale(1.05);
  background:linear-gradient(180deg,rgba(24,108,112,.15),rgba(24,108,112,.05));
  transition:opacity .3s,transform .5s;
}
.p-card:hover .p-thumb .cover{opacity:1;transform:scale(1)}
.p-thumb .ph{
  position:absolute;top:8px;left:8px;padding:3px 8px;border-radius:999px;
  background:rgba(255,255,255,.85);backdrop-filter:blur(8px);color:var(--graphite-700);
  font-size:10px;font-weight:700;border:1px solid rgba(0,0,0,.05);
}
.p-ribbon{
  position:absolute;top:12px;left:12px;z-index:2;
  padding:5px 12px;border-radius:999px;
  background:linear-gradient(135deg,#1e3a8a,#3b82f6);
  color:#fff;font-size:11px;font-weight:700;letter-spacing:1px;
  box-shadow:0 6px 14px rgba(37,99,235,.35);
}
.p-ribbon--amber{background:linear-gradient(135deg,#b45309,#f59e0b);box-shadow:0 6px 14px rgba(245,158,11,.4)}

.p-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.p-card--lg .p-body{padding:14px 16px 16px}
.p-name{
  font-size:13px;font-weight:600;color:var(--graphite-900);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px;
}
.p-name--lg{font-size:16px;font-weight:700;min-height:44px;line-height:1.35}
.p-meta{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.p-price{font-family:"JetBrains Mono",monospace;font-weight:800;font-size:15px;color:var(--ink-teal-700)}
.p-price .cur{font-size:11px;font-weight:600;margin-right:1px}
.p-act{
  width:30px;height:30px;border-radius:8px;border:1px solid var(--graphite-100);background:#fff;
  display:grid;place-items:center;color:var(--graphite-500);transition:all .2s;
}
.p-act:hover{color:#fff;background:var(--ink-teal-700);border-color:var(--ink-teal-700)}

/* ================================================================
   Luxury Industrial Showcase · 奢华工业展厅 六大方案区
   设计语言：工业杂志风 + 高端材料质感 + 杂志式节奏变化
   ================================================================ */

/* --- 区块通用外壳 --- */
.sol-panels{display:flex;flex-direction:column;gap:96px;margin-top:96px}
.sol{position:relative;border-radius:28px;padding:56px 48px;}
.sol__head{
  display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:flex-end;
  margin-bottom:36px;padding-bottom:28px;border-bottom:1px solid rgba(0,0,0,.06);
}
.sol__head-left{display:flex;gap:20px;align-items:flex-start}
.sol__no{
  flex-shrink:0;width:56px;height:56px;border-radius:16px;
  display:grid;place-items:center;font-family:"JetBrains Mono",monospace;
  font-size:22px;font-weight:800;letter-spacing:-.5px;
  background:linear-gradient(135deg,var(--ink-teal-900),var(--ink-teal-700));color:#fff;
  box-shadow:0 6px 18px rgba(30,57,50,.2),inset 0 1px 0 rgba(255,255,255,.12);
  position:relative;overflow:hidden;
}
.sol__no::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(244,180,0,.25) 50%,transparent 60%)}
.sol__eyebrow{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--ink-teal-500);margin-bottom:10px;position:relative;padding-left:18px;
}
.sol__eyebrow::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:12px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--ink-teal-500),var(--amber-500));
}
.sol__title{
  margin:0;font-size:30px;font-weight:800;letter-spacing:-.8px;line-height:1.25;color:var(--graphite-900);
}
.sol__title .sol__accent{
  background:linear-gradient(135deg,var(--amber-600),#b45309);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding:0 4px;
}
.sol__desc{
  margin:0;font-size:14.5px;line-height:1.75;color:var(--graphite-500);font-weight:400;
}

/* 浅色标题（用于深蓝底色区块） */
.sol__head--light{border-bottom-color:rgba(255,255,255,.14)}
.sol__head--light .sol__no{
  background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.06));
  color:var(--amber-400);border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 18px rgba(0,0,0,.2);
}
.sol__head--light .sol__eyebrow{color:var(--amber-400)}
.sol__head--light .sol__eyebrow::before{background:linear-gradient(90deg,var(--amber-400),#fff)}
.sol__head--light .sol__title{color:#fff}
.sol__head--light .sol__desc{color:rgba(255,255,255,.78)}

/* --- 分类轨道（通用，放产品区顶部） --- */
.cat-rail{
  display:flex;flex-wrap:wrap;gap:8px 10px;margin-bottom:28px;padding:16px 20px;
  border-radius:16px;background:rgba(0,0,0,.02);border:1px solid rgba(0,0,0,.05);
}
.cat-rail a{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:999px;font-size:13px;font-weight:600;
  background:#fff;color:var(--graphite-700);border:1px solid rgba(0,0,0,.07);
  transition:all .2s ease;text-decoration:none;white-space:nowrap;
}
.cat-rail a:hover{
  transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.cat-rail a .dot{
  width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5;
}
.cat-rail--light{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
.cat-rail--light a{
  background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.18);
  backdrop-filter:blur(6px);
}
.cat-rail--light a:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.35)}

/* --- 产品通用网格 2x4 --- */
.grid-24{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}

/* --- 2x4 玻璃拟态卡片（用于深色底市政区块） --- */
.grid-24--glass .p-card{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#fff;
  backdrop-filter:blur(14px);
}
.grid-24--glass .p-card:hover{
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);
  transform:translateY(-3px);
}
.grid-24--glass .p-name{color:#fff}
.grid-24--glass .p-price{color:var(--amber-400)}
.grid-24--glass .p-thumb{background-color:rgba(255,255,255,.05)}
.grid-24--glass .p-act{
  background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff;
}
.grid-24--glass .p-act:hover{background:var(--amber-600);border-color:var(--amber-600)}

/* ================================================================
   方案 01 · 燃气 GAS —— 左侧旗舰卡 + 右侧产品矩阵
   ================================================================ */
.sol--gas{
  background:
    radial-gradient(600px 320px at 0% 0%, rgba(249,115,22,.08), transparent 65%),
    radial-gradient(700px 480px at 100% 100%, rgba(15,118,110,.05), transparent 60%),
    #fff;
  border:1px solid rgba(0,0,0,.05);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 20px 60px -30px rgba(15,23,42,.12);
}
.sol--gas .sol__no{
  background:linear-gradient(135deg,oklch(42% .18 28),oklch(60% .18 45));
}
.cat-rail--gas{background:linear-gradient(180deg,rgba(249,115,22,.04),rgba(255,255,255,0));border-color:rgba(249,115,22,.12)}
.cat-rail--gas a:hover{color:#c2410c;border-color:rgba(249,115,22,.4);box-shadow:0 4px 14px rgba(249,115,22,.12)}
.cat-rail--gas a .dot{color:#f97316;opacity:.8}

.sol__grid--flagship{
  display:grid;grid-template-columns:320px 1fr;gap:20px;align-items:stretch;
}
.flagship{
  position:relative;border-radius:20px;padding:28px;overflow:hidden;
  color:#fff;
  display:flex;flex-direction:column;gap:20px;
  box-shadow:0 18px 40px -20px rgba(15,23,42,.35);
}
.flagship--gas{
  background:
    linear-gradient(180deg,rgba(15,23,42,.1) 0%,rgba(15,23,42,.78) 100%),
    url('https://img.jxxdymall.com/appserver/system/燃气方案总背景.png') center/cover;
}
.flagship--gas::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(249,115,22,.18) 45%,transparent 60%);
  mix-blend-mode:screen;
}
.flagship__top{display:flex;gap:8px;flex-wrap:wrap;position:relative;z-index:1}
.tag{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(10px);font-size:11.5px;font-weight:700;letter-spacing:.5px;
}
.tag--stocked{background:rgba(34,197,94,.18);border-color:rgba(34,197,94,.4);color:#bbf7d0}
.tag--ghost{background:rgba(255,255,255,.08)}
.flagship__mid{display:flex;flex-direction:column;gap:14px;margin-top:auto;position:relative;z-index:1}
.flagship__icon{
  width:56px;height:56px;color:#fcd34d;flex-shrink:0;
  filter:drop-shadow(0 2px 10px rgba(244,180,0,.4));
}
.flagship__title{
  font-size:24px;font-weight:800;letter-spacing:-.5px;line-height:1.25;
  text-shadow:0 2px 14px rgba(0,0,0,.45);
}
.flagship__txt{font-size:13px;line-height:1.7;margin:0;opacity:.88}
.flagship__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;position:relative;z-index:1}
.stat{
  padding:12px 14px;border-radius:12px;
  background:rgba(255,255,255,.12);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);
}
.stat__num{
  display:block;font-family:"JetBrains Mono",monospace;font-size:22px;font-weight:800;letter-spacing:-.5px;
  color:#fcd34d;
}
.stat__num em{font-style:normal;font-size:14px;font-weight:700;margin-left:1px;opacity:.85}
.stat__lbl{font-size:11px;opacity:.8}
.flagship__cta{
  display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:12px;
  background:#fff;color:var(--graphite-900);font-weight:700;font-size:13.5px;
  box-shadow:0 12px 28px rgba(0,0,0,.22);transition:all .22s;position:relative;z-index:1;
}
.flagship__cta:hover{
  transform:translateY(-2px);box-shadow:0 16px 36px rgba(0,0,0,.3);
  background:linear-gradient(135deg,#fff,#fef3c7);
}

/* ================================================================
   方案 02 · 工矿 INDUSTRIAL —— 工业标准横幅 + 产品矩阵 · 铜褐色调
   ================================================================ */
.sol--indu{
  background:
    linear-gradient(180deg,#FFF8EC 0%,#fff 60%),
    #fff;
  border:1px solid rgba(180,83,9,.15);
  box-shadow:0 20px 60px -30px rgba(180,83,9,.25);
}
.sol--indu .sol__no{
  background:linear-gradient(135deg,oklch(46% .14 58),oklch(62% .15 68));
}
.cat-rail--indu{background:rgba(180,83,9,.04);border-color:rgba(180,83,9,.12)}
.cat-rail--indu a:hover{color:#92400e;border-color:rgba(180,83,9,.35);box-shadow:0 4px 14px rgba(180,83,9,.1)}

/* 工业级标准横幅 */
.indu-specs{
  display:flex;align-items:center;gap:0;
  margin-bottom:24px;padding:20px 28px;border-radius:18px;
  background:
    linear-gradient(135deg, rgba(180,83,9,.06) 0%, rgba(180,83,9,.02) 100%),
    #FFFBF2;
  border:1px solid rgba(180,83,9,.14);
  position:relative;overflow:hidden;
}
.indu-specs::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#92400e 0%,#b45309 50%,#f59e0b 100%);
}
.indu-spec{
  flex:1;display:flex;align-items:center;gap:14px;padding:4px 16px;
}
.indu-spec__ico{
  flex-shrink:0;width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#92400e,#b45309);color:#fcd34d;
  box-shadow:0 6px 16px -4px rgba(180,83,9,.4);
}
.indu-spec__ico svg{width:22px;height:22px}
.indu-spec__body{display:flex;flex-direction:column;gap:2px}
.indu-spec__num{
  font-family:"JetBrains Mono",monospace;font-size:24px;font-weight:800;
  letter-spacing:-.5px;color:#92400e;line-height:1;
}
.indu-spec__num em{font-style:normal;font-size:13px;font-weight:700;margin-left:2px;opacity:.75}
.indu-spec__lbl{font-size:11.5px;color:rgba(120,53,15,.7);letter-spacing:.3px}
.indu-spec__div{
  width:1px;height:36px;flex-shrink:0;
  background:linear-gradient(180deg,transparent,rgba(180,83,9,.2),transparent);
}

/* ================================================================
   方案 03 · 市政 MUNICIPAL —— 深蓝全幅 + 毛玻璃产品卡
   ================================================================ */
.sol--muni{
  position:relative;padding:56px 48px;border-radius:28px;overflow:hidden;
  color:#fff;
  background:linear-gradient(135deg,#1e3a8a 0%,#1e40af 35%,#0f766e 100%);
  box-shadow:0 20px 60px -20px rgba(30,58,138,.45);
}
.sol--muni__bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(800px 500px at 95% -10%, rgba(251,191,36,.22), transparent 55%),
    radial-gradient(600px 500px at -5% 110%, rgba(96,165,250,.25), transparent 60%);
}
.sol--muni__bg::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 30%,transparent 80%);
}
.sol--muni > *{position:relative;z-index:1}
.cat-rail--muni a:hover{color:var(--amber-400);border-color:rgba(251,191,36,.5)}

/* ================================================================
   方案 04 · 水电暖通 HVAC —— 应用场景筛选 + 产品矩阵 · 琥珀金色调
   ================================================================ */
.sol--hvac{
  background:
    radial-gradient(500px 320px at 50% 0%, rgba(251,191,36,.1), transparent 60%),
    linear-gradient(180deg,#FFFBF0 0%,#fff 60%);
  border:1px solid rgba(217,119,6,.12);
  box-shadow:0 20px 60px -30px rgba(217,119,6,.2);
}
.sol--hvac .sol__no{background:linear-gradient(135deg,#b45309,#f59e0b)}
.cat-rail--hvac{background:rgba(217,119,6,.04);border-color:rgba(217,119,6,.12)}
.cat-rail--hvac a:hover{color:#92400e;border-color:rgba(245,158,11,.4);box-shadow:0 4px 14px rgba(245,158,11,.12)}

/* 应用场景筛选器 */
.hvac-scenarios{
  display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px;padding:6px;
  background:linear-gradient(135deg, rgba(217,119,6,.05), rgba(245,158,11,.03));
  border:1px solid rgba(217,119,6,.12);border-radius:16px;
}
.scn-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:10px 18px;border-radius:11px;border:1px solid transparent;
  background:transparent;color:#92400e;font-size:13.5px;font-weight:600;
  cursor:pointer;transition:all .25s ease;font-family:inherit;
}
.scn-btn svg{opacity:.7;transition:opacity .25s}
.scn-btn:hover{
  background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.25);
}
.scn-btn:hover svg{opacity:1}
.scn-btn.is-active{
  background:linear-gradient(135deg,#b45309,#d97706);color:#fff;
  border-color:#b45309;
  box-shadow:0 6px 18px -4px rgba(180,83,9,.4);
}
.scn-btn.is-active svg{opacity:1}
/* 产品卡场景筛选态 */
#hvacGrid .p-card{transition:opacity .3s ease, transform .3s ease, filter .3s ease}
#hvacGrid.is-filtered .p-card:not(.scn-match){
  opacity:.3;filter:grayscale(.8);transform:scale(.96);
}
#hvacGrid .p-card.scn-match{
  box-shadow:0 0 0 2px rgba(245,158,11,.4), 0 12px 28px -8px rgba(245,158,11,.25);
}

/* ================================================================
   方案 05 · 水务 WATER —— 工艺流程时间轴 + 产品矩阵 · 普鲁士蓝调
   ================================================================ */
.sol--water{
  background:
    radial-gradient(600px 400px at 0% 100%, rgba(8,47,73,.08), transparent 60%),
    #fff;
  border:1px solid rgba(8,47,73,.08);
  box-shadow:0 20px 60px -30px rgba(8,47,73,.2);
}
.sol--water .sol__no{background:linear-gradient(135deg,#1e3a8a,#0369a1)}
.cat-rail--water{background:rgba(30,58,138,.04);border-color:rgba(30,58,138,.1)}
.cat-rail--water a:hover{color:#1e40af;border-color:rgba(30,64,175,.35);box-shadow:0 4px 14px rgba(30,64,175,.1)}

/* 水处理工艺流程时间轴 */
.water-flow{
  display:flex;align-items:center;gap:0;margin-bottom:28px;padding:24px 28px;
  border-radius:18px;
  background:
    linear-gradient(135deg, rgba(8,47,73,.04) 0%, rgba(30,58,138,.02) 100%),
    #F8FAFC;
  border:1px solid rgba(8,47,73,.1);
  position:relative;overflow:hidden;
}
.water-flow::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#082F49 0%,#1e3a8a 50%,#0ea5e9 100%);
}
.wf-stage{
  flex:1;display:flex;align-items:center;gap:14px;padding:4px 12px;
  position:relative;
}
.wf-ico{
  flex-shrink:0;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#082F49,#1e3a8a);color:#7dd3fc;
  box-shadow:0 6px 18px -4px rgba(8,47,73,.35);
  position:relative;
}
.wf-ico::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  border:2px solid rgba(14,165,233,.2);
}
.wf-ico svg{width:22px;height:22px}
.wf-body{display:flex;flex-direction:column;gap:1px}
.wf-step{
  font-family:"JetBrains Mono",monospace;font-size:9.5px;font-weight:700;
  letter-spacing:1px;color:#0ea5e9;text-transform:uppercase;opacity:.8;
}
.wf-name{font-size:16px;font-weight:800;color:#082F49;letter-spacing:-.3px;line-height:1.2}
.wf-desc{font-size:11.5px;color:rgba(8,47,73,.6);line-height:1.3}
.wf-arrow{
  flex-shrink:0;width:36px;height:36px;display:grid;place-items:center;
  color:#0ea5e9;opacity:.5;
}
.wf-arrow svg{width:20px;height:20px}

/* ================================================================
   方案 06 · 消防 FIRE —— 警戒红 · 认证徽章 + 产品网格
   ================================================================ */
.sol--fire{
  background:
    repeating-linear-gradient(45deg, transparent 0 24px, rgba(239,68,68,.035) 24px 48px),
    linear-gradient(180deg, #fff 0%, #FFF7F5 100%);
  border:1px solid rgba(239,68,68,.12);
  box-shadow:0 20px 60px -30px rgba(239,68,68,.22);
}
.sol--fire .sol__no{background:linear-gradient(135deg,#991b1b,#dc2626)}
.cat-rail--fire{background:rgba(239,68,68,.04);border-color:rgba(239,68,68,.1)}
.cat-rail--fire a:hover{color:#b91c1c;border-color:rgba(239,68,68,.35);box-shadow:0 4px 14px rgba(239,68,68,.1)}

.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px}
.trust__item{
  display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;
  padding:18px;border-radius:16px;
  background:#fff;border:1px solid rgba(239,68,68,.14);box-shadow:var(--shadow-1);
  position:relative;overflow:hidden;transition:all .25s ease;
}
.trust__item::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#ef4444 0%,#f59e0b 100%);
  transform:scaleX(.3);transform-origin:left;transition:transform .4s ease;
}
.trust__item:hover{transform:translateY(-3px);box-shadow:0 14px 32px -14px rgba(239,68,68,.25)}
.trust__item:hover::before{transform:scaleX(1)}
.trust__icon{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,#fee2e2,#fecaca);color:#dc2626;flex-shrink:0;
}
.trust__icon svg{width:20px;height:20px}
.trust__h{font-size:12.5px;font-weight:700;color:var(--graphite-700);margin-bottom:6px}
.trust__v{display:flex;align-items:baseline;gap:8px}
.trust__v b{
  font-family:"JetBrains Mono",monospace;font-size:22px;font-weight:800;color:var(--graphite-900);
  letter-spacing:-.5px;
}
.trust__v span{font-size:12px;color:var(--graphite-500)}

/* ============ 最终 CTA 条 ============ */
.final-cta{
  margin-top:120px;padding:56px;border-radius:var(--radius-xl);
  background:
    radial-gradient(500px 280px at 100% 0%, rgba(244,180,0,.2),transparent 60%),
    linear-gradient(135deg, var(--ink-teal-900), var(--ink-teal-700));
  color:#fff;position:relative;overflow:hidden;
}
.final-cta::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:40px 40px;mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 30%,transparent 75%);
  pointer-events:none;
}
.final-cta .container{position:relative;display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
.final-cta h3{
  font-size:clamp(28px,3vw,40px);font-weight:800;margin:0 0 12px;letter-spacing:-.5px;line-height:1.2;
}
.final-cta h3 .gold{
  background:linear-gradient(135deg,#fcd34d,#f59e0b);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.final-cta p{color:rgba(255,255,255,.82);font-size:16px;line-height:1.7;margin:0;max-width:520px}
.final-cta .actions{display:flex;gap:12px;flex-wrap:wrap;justify-self:end}
.final-cta .phone{
  display:inline-flex;flex-direction:column;justify-content:center;padding:14px 20px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  border-radius:var(--radius-m);backdrop-filter:blur(10px);
}
.final-cta .phone .l{font-size:11px;opacity:.65;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:3px}
.final-cta .phone .n{font-family:"JetBrains Mono",monospace;font-weight:800;font-size:22px;letter-spacing:-.3px}

/* ============ Footer ============ */
.footer{margin-top:88px;background:var(--graphite-900);color:#d4d4d8;padding:72px 0 0;position:relative}
.footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--ink-teal-500),var(--amber-600))}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr;gap:48px;padding-bottom:56px}
.f-brand .logo-text .zh{color:#fff}
.f-brand .about{margin-top:18px;font-size:13.5px;line-height:1.8;opacity:.7;max-width:320px}
.f-brand .ctc{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.f-brand .ctc .i{display:flex;align-items:center;gap:12px;font-size:13.5px;opacity:.78}
.f-brand .ctc svg{flex-shrink:0;color:var(--amber-400)}
.f-col h5{font-size:14px;font-weight:700;color:#fff;margin:0 0 18px;letter-spacing:1px}
.f-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.f-col li{font-size:13px;opacity:.66;transition:opacity .2s,color .2s;cursor:pointer}
.f-col li:hover{opacity:1;color:var(--amber-400)}
.f-sub{
  padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);
  display:flex;gap:10px;margin-bottom:14px;
}
.f-sub input{flex:1;border:0;outline:0;background:transparent;color:#fff;font-size:13px}
.f-sub input::placeholder{color:#71717a}
.f-sub button{
  padding:0 14px;border-radius:8px;border:0;
  background:linear-gradient(135deg,var(--ink-teal-500),var(--amber-600));color:#fff;
  font-weight:700;font-size:13px;
}
.f-promo{font-size:12px;opacity:.52;line-height:1.6}
.f-bottom{
  border-top:1px solid rgba(255,255,255,.08);padding:20px 0;
  display:flex;align-items:center;justify-content:space-between;font-size:12.5px;opacity:.55;gap:20px;flex-wrap:wrap;
}
.f-bottom .disc{display:flex;gap:20px;align-items:center}
.f-bottom .disc i{color:var(--amber-400);font-style:normal;opacity:1;font-weight:700}

/* ============ 显示动画（失败开放） ============ */
.reveal{opacity:1;transform:none;transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(18px)}
  .reveal.is-in{opacity:1;transform:none}
}

/* ============ 响应式 ============ */
/* --------- 方案区新响应式 --------- */
@media (max-width:1100px){
  .hero .container{grid-template-columns:1fr;gap:48px;padding-top:48px;padding-bottom:64px}
  .hero-visual{justify-self:center;max-width:480px}
  .site-header .container{grid-template-columns:auto 1fr;gap:20px;height:auto;padding:12px 0}
  .search{display:none}
  .main-nav{display:none}
  .promise-strip{grid-template-columns:repeat(3,1fr)}
  .sol-nav{grid-template-columns:repeat(3,1fr)}

  /* 方案区响应式 */
  .sol{padding:40px 32px;border-radius:22px}
  .sol-panels{gap:72px;margin-top:72px}
  .sol__head{grid-template-columns:1fr;gap:16px;align-items:flex-start;margin-bottom:24px;padding-bottom:20px}
  .sol__title{font-size:26px}
  .grid-24{grid-template-columns:repeat(3,1fr)}
  .sol__grid--flagship{grid-template-columns:1fr}
  .flagship{padding:24px}
  .flagship__icon{width:48px;height:48px}
  .flagship__title{font-size:20px}
  .trust{grid-template-columns:repeat(2,1fr)}
  .cat-rail{padding:12px 14px;margin-bottom:20px}

  /* 工矿标准横幅 */
  .indu-specs{padding:16px 18px;gap:4px;flex-wrap:wrap}
  .indu-spec{min-width:42%;padding:6px 8px}
  .indu-spec__div{display:none}

  /* 暖通场景筛选 */
  .hvac-scenarios{padding:5px}
  .scn-btn{padding:8px 13px;font-size:12.5px}

  /* 水务工艺流程 */
  .water-flow{padding:18px 16px;flex-wrap:wrap;gap:8px}
  .wf-stage{min-width:42%;padding:6px 8px}
  .wf-arrow{transform:rotate(90deg);width:24px;height:24px}
  .wf-arrow svg{width:16px;height:16px}
}
@media (max-width:720px){
  .promise-strip{grid-template-columns:repeat(2,1fr)}
  .sol-nav{grid-template-columns:repeat(2,1fr)}
  .p-grid-4{grid-template-columns:repeat(2,1fr)}
  .p-grid-3{grid-template-columns:repeat(2,1fr)}
  .tops-head{flex-direction:column;align-items:flex-start}
  .f-grid{grid-template-columns:1fr}
  .section{padding:64px 0}
  .section-head{flex-direction:column;align-items:flex-start;gap:16px}
  .final-cta{padding:32px 24px}
  .final-cta .container{grid-template-columns:1fr;gap:24px}
  .final-cta .actions{justify-self:start}

  /* 新方案区移动端 */
  .sol{padding:28px 20px;border-radius:18px}
  .sol-panels{gap:56px;margin-top:56px}
  .sol__no{width:44px;height:44px;font-size:16px;border-radius:12px}
  .sol__head-left{gap:12px}
  .sol__title{font-size:22px;letter-spacing:-.4px}
  .sol__eyebrow{font-size:10.5px;letter-spacing:1.5px;margin-bottom:6px}
  .grid-24{grid-template-columns:repeat(2,1fr);gap:12px}
  .trust{grid-template-columns:1fr;gap:10px}
  .trust__item{padding:14px}
  .trust__v b{font-size:18px}

  .cat-rail a{font-size:12px;padding:6px 12px}
  .flagship__stats{grid-template-columns:repeat(2,1fr)}

  /* 工矿标准横幅移动端 */
  .indu-specs{padding:12px 14px}
  .indu-spec{min-width:100%;padding:8px 4px}
  .indu-spec__ico{width:36px;height:36px}
  .indu-spec__ico svg{width:18px;height:18px}
  .indu-spec__num{font-size:20px}
  .indu-spec__lbl{font-size:11px}

  /* 暖通场景筛选移动端 */
  .hvac-scenarios{gap:6px;padding:4px}
  .scn-btn{padding:7px 11px;font-size:12px;gap:5px}
  .scn-btn svg{width:14px;height:14px}

  /* 水务工艺流程移动端 */
  .water-flow{padding:14px 12px;gap:6px}
  .wf-stage{min-width:100%;padding:6px 4px}
  .wf-ico{width:38px;height:38px}
  .wf-ico svg{width:18px;height:18px}
  .wf-name{font-size:14px}
  .wf-step{font-size:9px}
  .wf-desc{font-size:11px}
}

/* ================================================================== */
/*  CMS Footer 布局修复（仅修复 Footer，保留服务特色区原样）               */
/*  使用 body 前缀 + !important 覆盖 CMS 内联 flex 布局为 grid          */
/* ================================================================== */

/* ---- Footer 导航区：flex → grid，文字左对齐 ---- */
body .footer-nav-wrapper{
  display:grid !important;
  grid-template-columns: repeat(5, 1fr) 1.4fr 1.2fr !important;
  gap:32px !important;
  text-align:left !important;
  justify-content:normal !important;
}
body .footer-nav-column{
  width:auto !important;
  text-align:left !important;
}
body .footer-nav-column-1{
  width:auto !important;
  text-align:left !important;
}
body .footer-nav-column-2{
  width:auto !important;
  gap:16px !important;
  justify-content:flex-start !important;
}

/* 标题：左对齐 + 小金色下划线 */
body .footer-nav-title{
  font-size:14px !important;
  font-weight:700 !important;
  color:#fff !important;
  margin-bottom:14px !important;
  padding-bottom:8px !important;
  text-align:left !important;
  justify-content:normal !important;
  display:block !important;
  position:relative;
}
body .footer-nav-title::after{
  content:"";position:absolute;left:0;bottom:0;
  width:24px;height:2px;border-radius:2px;
  background:linear-gradient(90deg, var(--amber-500), transparent);
}

/* 导航列表：纵向排列，去圆点 */
body .footer-nav-list{
  list-style:none !important;
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  padding:0 !important;
  margin:0 !important;
}
body .footer-nav-item{
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}
body .footer-nav-item a{
  color:rgba(255,255,255,.55) !important;
  font-size:13px !important;
  text-decoration:none !important;
  transition:color .2s;
}
body .footer-nav-item a:hover{
  color:var(--amber-400) !important;
}

/* 公司信息列：左对齐，图标+文字行内 */
body .footer-nav-title-1,
body .footer-nav-title-2,
body .footer-nav-title-3{
  justify-content:flex-start !important;
  align-items:center !important;
  text-align:left !important;
  gap:8px !important;
  padding:6px 0 !important;
  margin:0 !important;
  display:flex !important;
}
body .footer-nav-title-1{
  font-size:15px !important;
  font-weight:800 !important;
  background:linear-gradient(135deg,#fff,#ffe9a8,var(--amber-400));
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  margin-bottom:6px !important;
}
body .footer-nav-title-2{
  font-size:15px !important;
  color:var(--amber-400) !important;
}
body .footer-nav-title-3{
  font-size:13px !important;
  color:rgba(255,255,255,.72) !important;
}
body .footer-company-icon-1{width:20px !important;height:auto !important;}
body .footer-company-icon-2{width:16px !important;height:auto !important;padding-top:4px !important;}
body .footer-company-icon-3{width:14px !important;height:auto !important;}

/* 二维码列：两个码并排，缩小尺寸 */
body .footer-image-item{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  gap:4px !important;
}
body .footer-company-about-us,
body .footer-company-mobile-store{
  width:96px !important;
  height:96px !important;
  border:1px solid rgba(255,255,255,.15) !important;
  padding:4px !important;
  background:#fff !important;
  border-radius:8px !important;
  box-shadow:0 4px 14px rgba(0,0,0,.25) !important;
  object-fit:contain !important;
  margin:0 !important;
}
body .footer-image-caption{
  color:rgba(255,255,255,.7) !important;
  font-size:12px !important;
  font-weight:600 !important;
  margin:0 !important;
}

/* ---- Footer 响应式 ---- */
@media (max-width:1100px){
  body .footer-nav-wrapper{
    grid-template-columns:repeat(3,1fr) 1.4fr !important;
  }
  body .footer-nav-column-2{grid-column:1/-1}
}
@media (max-width:720px){
  body .footer-nav-wrapper{
    grid-template-columns:repeat(2,1fr) !important;
    gap:24px !important;
  }
  body .footer-nav-column-1,
  body .footer-nav-column-2{grid-column:1/-1}
  body .footer-company-about-us,
  body .footer-company-mobile-store{width:88px !important;height:88px !important}
}

/* ================================================================== */
/*  CMS 静态块 Premium 覆写                                              */
/*  pc-home-brand   → 高端品牌卡片网格                                    */
/*  pc-home-*-system → 标签 chip 分类导航（深/浅双态）                     */
/* ================================================================== */

/* ===== pc-home-brand：品牌 Logo 卡片网格 ===== */
.preference-brand .brand-grid-wrapper{
  margin-top:28px;
  padding:0 !important;
}
.preference-brand .brand-grid{
  display:grid !important;
  grid-template-columns:repeat(8, 1fr) !important;
  gap:16px !important;
  list-style:none !important;
  padding:0 !important;
  margin:0 !important;
}
.preference-brand .brand-item{
  width:auto !important;
  aspect-ratio:auto !important;
  background:#fff;
  border:1px solid var(--graphite-100);
  border-radius:var(--radius-m);
  padding:18px 12px;
  display:flex;align-items:center;justify-content:center;
  transition:all .25s cubic-bezier(.2,.8,.2,1);
  position:relative;overflow:hidden;
}
/* 卡片顶部琥珀金微光条（hover 显现） */
.preference-brand .brand-item::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg, var(--amber-600), var(--ink-teal-500));
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s ease;
}
.preference-brand .brand-item:hover{
  border-color:rgba(244,180,0,.35);
  box-shadow:0 12px 28px rgba(244,180,0,.12), 0 4px 10px rgba(0,0,0,.06);
  transform:translateY(-3px);
}
.preference-brand .brand-item:hover::before{transform:scaleX(1)}
.preference-brand .brand-item a{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
}
.preference-brand .brand-item img{
  max-width:100% !important;
  max-height:52px !important;
  width:auto !important;height:auto !important;
  object-fit:contain !important;
  filter:grayscale(.15) opacity(.85);
  transition:filter .3s ease;
}
.preference-brand .brand-item:hover img{
  filter:grayscale(0) opacity(1);
}

/* 品牌区响应式 */
@media (max-width:1100px){
  .preference-brand .brand-grid{grid-template-columns:repeat(6,1fr) !important}
}
@media (max-width:720px){
  .preference-brand .brand-grid{grid-template-columns:repeat(4,1fr) !important;gap:10px !important}
  .preference-brand .brand-item{padding:12px 8px}
  .preference-brand .brand-item img{max-height:36px !important}
}

/* ===== pc-home-*-system：标签 chip 分类导航（p-chip-wrap 强覆盖） ===== */
/* 基础 wrapper：消除旧 CSS 的浮动影响 */
.home-premium .p-chip-wrap,
.home-premium .p-chip-wrap .sidebar-nav,
.home-premium .p-chip-wrap .sidebar-nav__category,
.home-premium .p-chip-wrap .sidebar-nav__category.clearfix{
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  float:none !important;
  clear:none !important;
  display:block !important;
  line-height:1.2 !important;
}
.home-premium .p-chip-wrap .sidebar-nav__category{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  width:100% !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
}
/* 清除 clearfix hack */
.home-premium .p-chip-wrap .sidebar-nav__category::after,
.home-premium .p-chip-wrap .sidebar-nav__category::before{
  content:none !important;
  display:none !important;
}

/* ========== 核心 chip 通用骨架（所有 6 区共用） ========== */
.home-premium .p-chip-wrap .sidebar-nav__category a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  padding:8px 16px !important;
  border-radius:999px !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1.4 !important;
  text-decoration:none !important;
  text-align:center !important;
  white-space:nowrap !important;
  float:none !important;
  width:auto !important;
  height:auto !important;
  min-height:34px !important;
  margin:0 !important;
  box-sizing:border-box !important;
  transition:all .22s cubic-bezier(.2,.8,.2,1) !important;
  position:relative !important;
  cursor:pointer !important;
  user-select:none !important;
}

/* ========== 变体 A：浅色底 chip（工矿、暖通 cat-tree） ========== */
.home-premium .sol-indu .p-chip-wrap .sidebar-nav__category a,
.home-premium .sol-hvac .cat-tree .p-chip-wrap .sidebar-nav__category a{
  background:var(--ink-teal-50) !important;
  color:var(--ink-teal-700) !important;
  border:1px solid rgba(30,58,138,.12) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6) !important;
}
.home-premium .sol-indu .p-chip-wrap .sidebar-nav__category a:hover,
.home-premium .sol-hvac .cat-tree .p-chip-wrap .sidebar-nav__category a:hover{
  background:linear-gradient(135deg,#1e3a8a,#3b82f6) !important;
  color:#fff !important;
  border-color:#1e3a8a !important;
  box-shadow:0 6px 16px rgba(30,58,138,.32),inset 0 1px 0 rgba(255,255,255,.22) !important;
  transform:translateY(-1px) !important;
}

/* ========== 变体 B：深色玻璃态 chip（市政、水务、燃气 sol-banner） ========== */
.home-premium .sol-muni .p-chip-wrap .sidebar-nav__category a,
.home-premium .sol-water .p-chip-wrap .sidebar-nav__category a,
.home-premium .sol-gas .sol-banner .p-chip-wrap .sidebar-nav__category a{
  background:rgba(255,255,255,.12) !important;
  color:rgba(255,255,255,.92) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
}
.home-premium .sol-muni .p-chip-wrap .sidebar-nav__category a:hover,
.home-premium .sol-water .p-chip-wrap .sidebar-nav__category a:hover,
.home-premium .sol-gas .sol-banner .p-chip-wrap .sidebar-nav__category a:hover{
  background:linear-gradient(135deg, var(--amber-600), var(--amber-800)) !important;
  color:#fff !important;
  border-color:var(--amber-500) !important;
  box-shadow:0 6px 18px rgba(244,180,0,.38),inset 0 1px 0 rgba(255,255,255,.3) !important;
  transform:translateY(-1px) !important;
}

/* ========== 变体 C：消防微红 chip ========== */
.home-premium .sol-fire .p-chip-wrap .sidebar-nav__category a{
  background:rgba(239,68,68,.08) !important;
  color:#991b1b !important;
  border:1px solid rgba(239,68,68,.2) !important;
}
.home-premium .sol-fire .p-chip-wrap .sidebar-nav__category a:hover{
  background:linear-gradient(135deg,#ef4444,#f59e0b) !important;
  color:#fff !important;
  border-color:#ef4444 !important;
  box-shadow:0 6px 18px rgba(239,68,68,.32),inset 0 1px 0 rgba(255,255,255,.25) !important;
  transform:translateY(-1px) !important;
}

/* ========== 变体 D：兜底 chip（未明确指定的方案区 → 统一浅色） ========== */
.home-premium .p-chip-wrap .sidebar-nav__category a{
  background:var(--ink-teal-50) !important;
  color:var(--ink-teal-700) !important;
  border:1px solid rgba(30,58,138,.12) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6) !important;
}
.home-premium .p-chip-wrap .sidebar-nav__category a:hover{
  background:linear-gradient(135deg,#1e3a8a,#3b82f6) !important;
  color:#fff !important;
  border-color:#1e3a8a !important;
  box-shadow:0 6px 16px rgba(30,58,138,.3),inset 0 1px 0 rgba(255,255,255,.22) !important;
  transform:translateY(-1px) !important;
}

/* ========== 暖通 cat-tree 侧边栏 chip 适配（窄容器，紧凑版） ========== */
.home-premium .sol-hvac .cat-tree .p-chip-wrap{
  padding:12px 12px 14px !important;
  background:rgba(30,58,138,.03) !important;
  border-radius:12px !important;
  border:1px solid rgba(30,58,138,.08) !important;
  margin-top:10px !important;
}
.home-premium .sol-hvac .cat-tree .p-chip-wrap .sidebar-nav__category{
  gap:6px !important;
}
.home-premium .sol-hvac .cat-tree .p-chip-wrap .sidebar-nav__category a{
  padding:5px 11px !important;
  font-size:12px !important;
  min-height:30px !important;
}

/* ========== 消防 chip 包装容器 ========== */
.home-premium .sol-fire .p-chip-wrap{
  background:rgba(239,68,68,.04) !important;
  border-radius:12px !important;
  padding:14px 16px !important;
  margin-top:16px !important;
}

/* ========== 响应式 ========== */
@media (max-width:1100px){
  .home-premium .p-chip-wrap .sidebar-nav__category{gap:8px !important}
  .home-premium .p-chip-wrap .sidebar-nav__category a{padding:7px 13px !important;font-size:12.5px !important}
}
@media (max-width:720px){
  .home-premium .p-chip-wrap .sidebar-nav__category{gap:6px !important}
  .home-premium .p-chip-wrap .sidebar-nav__category a{padding:6px 11px !important;font-size:12px !important;min-height:28px !important}
}