/* ================================================================
   浪知潮官网改版 v3 —— 「深海极光」设计体系
   Design Tokens
================================================================ */
:root{
  --brand-950:#060F2B;
  --brand-900:#0B1B3F;
  --brand-800:#10295F;
  --brand-700:#16357F;
  --brand-600:#1D4ED8;
  --brand-500:#2563EB;
  --brand-400:#3B82F6;
  --brand-300:#60A5FA;
  --brand-200:#93C5FD;
  --brand-100:#DBEAFE;
  --brand-50:#EFF6FF;
  --cyan-600:#0891B2;
  --cyan:#06B6D4;
  --cyan-bright:#22D3EE;
  --cyan-soft:#67E8F9;
  --violet:#818CF8;
  --violet-bright:#A5B4FC;
  --ink:#0B1220;
  --ink-2:#2B3A55;
  --ink-3:#5B6B87;
  /* ⚠️ 原值 #8B99B3 在白底只有 2.87:1、在 --bg-soft(#EEF3FA) 只有 2.57:1，远不达 AA 4.5:1，
     17 页的 color-contrast 审计全部挂在这一条上。改 #5E6C87 后：白底 5.29:1 / #F6F8FC 4.98:1 / #EEF3FA 4.74:1。
     注意：这个 token 只用于浅底小字；深色区块一律用 rgba(226,236,255,*) 那套，别拿它去改深底。 */
  --ink-4:#5E6C87;
  --line:#E3E9F2;
  --bg:#F6F8FC;
  --bg-soft:#EEF3FA;
  --white:#FFFFFF;
  --amber:#F59E0B;
  --green:#10B981;

  --grad:linear-gradient(120deg,#16357F 0%,#2563EB 48%,#06B6D4 100%);
  --grad-live:linear-gradient(120deg,#2563EB,#06B6D4,#818CF8,#2563EB);
  --grad-text:linear-gradient(120deg,#16357F 10%,#2563EB 50%,#06B6D4 90%);
  --grad-soft:linear-gradient(140deg,#EFF6FF 0%,#ECFEFF 60%,#F5F3FF 100%);

  --radius-xl:26px;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(11,18,32,.05),0 2px 6px rgba(11,18,32,.05);
  --shadow-md:0 10px 24px -10px rgba(11,18,32,.14),0 2px 6px -2px rgba(11,18,32,.06);
  --shadow-lg:0 28px 56px -22px rgba(11,18,32,.25);
  --shadow-brand:0 16px 34px -12px rgba(37,99,235,.5);
  --shadow-cyan:0 16px 34px -14px rgba(6,182,212,.45);

  --font-sans:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-display:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
  --maxw:1440px;
  /* 顶栏高度：所有「减去顶栏」的算式（hero 首屏、粘性目录）都必须用它，
     不要写死 72px，否则改高度时会出现缝隙 / 高度错算。≥1025px 在文件 U2 节提到 84px。 */
  --hd-h:72px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);color:var(--ink);background:var(--white);
  line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
::selection{background:rgba(37,99,235,.22)}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--bg-soft)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#93C5FD,#67E8F9);border-radius:8px;border:3px solid var(--bg-soft)}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative}

/* ============ 通用 Section / 标题 ============ */
.section{padding:96px 0;position:relative}
.section-head{max-width:880px;margin:0 auto 56px;text-align:center;position:relative}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brand-600);
  padding:7px 16px 7px 14px;border-radius:999px;
  background:linear-gradient(120deg,rgba(37,99,235,.08),rgba(6,182,212,.1));
  border:1px solid rgba(37,99,235,.18);margin-bottom:20px;
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.section-title{font-size:clamp(28px,3.6vw,42px);font-weight:800;line-height:1.22;letter-spacing:-.02em;white-space:nowrap}
.section-title .accent{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.section-sub{font-size:16px;color:var(--ink-3);margin-top:16px;line-height:1.75}
/* 巨型水印编号 */
.watermark{
  position:absolute;left:50%;top:-34px;transform:translateX(-50%);
  font-family:var(--font-display);font-size:clamp(90px,12vw,150px);font-weight:800;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(37,99,235,.13);
  letter-spacing:.04em;pointer-events:none;user-select:none;white-space:nowrap;
}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:15px;font-weight:600;line-height:1;white-space:nowrap;
  padding:15px 28px;border-radius:13px;position:relative;overflow:hidden;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;
}
.btn svg{width:18px;height:18px;flex-shrink:0}
.btn-primary{background:var(--grad);color:#fff;box-shadow:var(--shadow-brand)}
.btn-primary::after{
  content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .55s var(--ease);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 40px -14px rgba(37,99,235,.6)}
.btn-primary:hover::after{left:130%}
.btn-primary:active{transform:translateY(0) scale(.98)}
.btn-ghost{background:#fff;color:var(--ink-2);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--brand-300);color:var(--brand-600);box-shadow:var(--shadow-md)}
.btn-light{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(8px)}
.btn-light:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--brand-700)}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(255,255,255,.35)}
.btn-lg{padding:17px 32px;font-size:16px;border-radius:15px}

/* ============ Header ============ */
/* 2026-09-25 兼容修复：老内核（夸克极速/U4 等）上 sticky+backdrop-filter 会产生
   合成层残影（滚动时页面中部多出一个 header 副本、fixed 快捷条消失）。
   translateZ(0) 强制 header 独立成层，是此类残影的标准规避手段，各内核无副作用。 */
.header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid rgba(227,233,242,.85);
  transition:border-color .25s,box-shadow .25s,background .25s;
}
/* ⚠️ 这里不要再加「顶部渐变条」：页面顶部已经有 .scroll-progress（固定定位、3px、z-index 1000），
   它是滚动进度条，用户明确要求保留。之前在 header 上叠了一条常驻渐变顶边（.header::before），
   与进度条位置完全重合、且始终显示，看起来像多出一条怪条 —— 已于 2026-09-24 移除。 */
.header.scrolled{
  background:rgba(255,255,255,.95);border-bottom-color:var(--line);
  box-shadow:0 10px 30px -14px rgba(11,27,63,.22);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:var(--hd-h);gap:20px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:20px;color:var(--ink)}
.brand img{flex-shrink:0;max-height:40px;width:auto;height:auto;display:block}
.brand small{display:block;font-size:10.5px;font-weight:600;color:var(--ink-4);letter-spacing:.08em;margin-top:-2px}
.nav{display:flex;align-items:center;gap:2px}
.nav>li{position:relative}
/* 下拉命中垫片（2026-09-24）：li 的盒高只到菜单项底部，而下拉在 12px 之后，
   鼠标穿过这段空隙时会离开 li → :hover 失效 → 下拉在滑向它的路上闪退（实测滑入后可见下拉数=0）。
   垫片是 li 的伪元素（属于 li 的渲染区），鼠标落在上面时 li:hover 依然成立。
   ⚠️ 它常驻且透明，会占住导航项正下方 16px 的命中区 —— 该区域本就没有可点内容，安全。 */
.nav>li.has-drop::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px}
.nav-link{
  position:relative;display:flex;align-items:center;gap:5px;padding:12px 19px;border-radius:12px;
  font-size:16px;font-weight:600;color:var(--ink-2);letter-spacing:.01em;
  transition:color .2s,background .2s;
}
/* hover / 当前项＝柔底 + 底部渐变下划线（自中间向两侧展开，比纯色块更精致） */
.nav-link::after{
  content:"";position:absolute;left:50%;right:50%;bottom:7px;height:2px;border-radius:2px;
  background:var(--grad);opacity:0;
  transition:left .28s var(--ease),right .28s var(--ease),opacity .2s;
}
.nav-link:hover::after,.nav-link.active::after{left:15px;right:15px;opacity:1}
.nav-link svg{width:14px;height:14px;transition:transform .2s}
.nav-link:hover,.nav-link.active{color:var(--brand-600);background:var(--brand-50)}
.nav>li:hover .nav-link svg{transform:rotate(180deg)}
.dropdown{
  position:absolute;top:calc(100% + 12px);left:0;min-width:252px;
  background:rgba(255,255,255,.97);backdrop-filter:blur(12px);
  border:1px solid var(--line);border-radius:16px;padding:12px 10px 10px;
  box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(10px) scale(.98);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
}
/* 补桥：下拉与导航项之间有 12px 空隙，鼠标穿过去时 hover 会断 → 用透明块接住 */
.dropdown::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
/* 顶部品牌渐变细条，与 header 顶边呼应 */
.dropdown::after{
  content:"";position:absolute;left:14px;right:14px;top:0;height:3px;border-radius:0 0 3px 3px;
  background:var(--grad);opacity:.85;pointer-events:none;
}
.nav>li:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.dropdown a{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:10px;font-size:14px;color:var(--ink-2);transition:background .18s,color .18s,padding-left .18s}
.dropdown a:hover{background:var(--brand-50);color:var(--brand-600);padding-left:16px}
.dropdown a i{width:8px;height:8px;border-radius:3px;background:var(--grad);flex-shrink:0}
/* ⚠️ CTA 区（电话 / 按钮 / 竖分割线）的「加大」只在 ≥1367px 生效（见文件末尾 W 节）：
   769–1366 的横向余量很紧，一旦加大会把 .brand 挤压缩小（logo 会等比缩到 16px 以下）。
   这里保持改前尺寸，只留 position:relative 给竖分割线用。 */
.header-cta{display:flex;align-items:center;gap:16px;position:relative}
.header-phone{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink);font-size:15px}
.header-phone .ph{width:40px;height:40px;border-radius:12px;background:var(--brand-50);color:var(--brand-600);display:flex;align-items:center;justify-content:center;transition:transform .25s,background .25s}
.header-phone:hover .ph{transform:rotate(-8deg) scale(1.06);background:var(--brand-100)}
.header-phone .ph svg{width:18px;height:18px}
.header-phone small{display:block;font-size:11px;font-weight:500;color:var(--ink-4);line-height:1.1}
.burger{display:none;width:46px;height:46px;border-radius:12px;border:1px solid var(--line);align-items:center;justify-content:center;color:var(--ink)}
.burger svg{width:22px;height:22px}

/* ============ Hero：深海极光 ============ */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:var(--brand-950);
  padding:104px 0 150px;
}
/* 极光层 */
.hero .aurora{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero .aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform}
.hero .aurora i:nth-child(1){width:640px;height:640px;background:radial-gradient(circle,#1D4ED8 0%,transparent 65%);top:-260px;right:-140px;animation:float1 16s ease-in-out infinite}
.hero .aurora i:nth-child(2){width:520px;height:520px;background:radial-gradient(circle,#06B6D4 0%,transparent 65%);bottom:-200px;left:-120px;opacity:.4;animation:float2 20s ease-in-out infinite}
.hero .aurora i:nth-child(3){width:420px;height:420px;background:radial-gradient(circle,#818CF8 0%,transparent 65%);top:30%;left:38%;opacity:.28;animation:float3 24s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-60px,50px) scale(1.12)}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(70px,-40px) scale(1.08)}}
@keyframes float3{0%,100%{transform:translate(0,0)}33%{transform:translate(40px,30px)}66%{transform:translate(-30px,50px)}}
/* 网格线 */
.hero .gridlines{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 75%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 75%);
}
/* 底部波浪 */
.hero .wave{position:absolute;left:0;right:0;bottom:-2px;z-index:2;pointer-events:none}
.hero .wave svg{display:block;width:100%;height:88px}
.hero-grid{position:relative;z-index:3;display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;
  padding:8px 18px;border-radius:999px;margin-bottom:26px;
  background:linear-gradient(120deg,rgba(6,182,212,.16),rgba(129,140,248,.14));
  border:1px solid rgba(103,232,249,.3);backdrop-filter:blur(6px);
  color:var(--cyan-soft);
}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--cyan-bright);animation:pulse 2.2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(34,211,238,.5)}50%{box-shadow:0 0 0 7px rgba(34,211,238,0)}}
.hero h1{font-size:clamp(28px,3.7vw,54px);font-weight:800;line-height:1.16;letter-spacing:-.02em;margin-bottom:22px;white-space:nowrap}
.hero h1 .grad{
  background:linear-gradient(120deg,#67E8F9 0%,#A5B4FC 55%,#93C5FD 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  background-size:200% 100%;animation:shineGrad 6s ease-in-out infinite;
}
@keyframes shineGrad{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero p.lead{font-size:clamp(16px,1.5vw,18.5px);color:rgba(226,236,255,.78);max-width:540px;margin-bottom:36px;line-height:1.8}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats{display:flex;gap:0;margin-top:52px;flex-wrap:wrap;align-items:stretch}
.hero-stats .stat{position:relative;padding:6px 22px;flex:1;min-width:0}
.hero-stats .stat:not(:last-child)::after{content:"";position:absolute;right:0;top:14%;bottom:14%;width:1px;background:rgba(255,255,255,.18)}
.hero-stats .stat:first-child{padding-left:0}
.hero-stats .stat::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:3px;background:var(--grad);display:none}
.hero-stats .num{font-size:clamp(28px,3vw,38px);font-weight:800;font-family:var(--font-display);background:linear-gradient(180deg,#fff,#BFD7FE);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1.1;display:flex;align-items:baseline;gap:2px;white-space:nowrap}
.hero-stats .num:not([data-count]){font-size:clamp(24px,2.6vw,32px)}
.hero-stats .lbl{font-size:13px;color:rgba(226,236,255,.6);margin-top:5px;line-height:1.55}

/* Hero 仪表盘卡片 */
.hero-visual{position:relative}
.hero-visual::before{
  content:"";position:absolute;inset:-30px -20px;border-radius:40px;z-index:0;
  background:radial-gradient(closest-side,rgba(6,182,212,.2),transparent);filter:blur(20px);
}
.hero-card{
  position:relative;z-index:1;
  background:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-xl);padding:28px;
  backdrop-filter:blur(14px);
  box-shadow:0 40px 80px -30px rgba(0,4,20,.6),inset 0 1px 0 rgba(255,255,255,.14);
}
.hero-card .tag{display:flex;align-items:center;justify-content:space-between;font-size:12px;letter-spacing:.16em;color:var(--cyan-bright);font-weight:700;text-transform:uppercase;margin-bottom:16px}
.hero-card .tag .live{display:inline-flex;align-items:center;gap:6px;color:#4ADE80;font-size:11px;letter-spacing:.08em}
.hero-card .tag .live::before{content:"";width:6px;height:6px;border-radius:50%;background:#4ADE80;box-shadow:0 0 0 3px rgba(74,222,128,.2);animation:pulse 2s infinite}
.chart{display:flex;align-items:flex-end;gap:7px;height:86px;margin-bottom:20px;padding:0 2px}
.chart i{
  flex:1;border-radius:5px 5px 2px 2px;transform-origin:bottom;
  background:linear-gradient(180deg,#67E8F9,rgba(37,99,235,.55));
  animation:growBar 1.2s var(--ease-out) both;
}
.chart i:nth-child(1){height:32%;animation-delay:.1s}
.chart i:nth-child(2){height:48%;animation-delay:.18s}
.chart i:nth-child(3){height:40%;animation-delay:.26s}
.chart i:nth-child(4){height:62%;animation-delay:.34s}
.chart i:nth-child(5){height:55%;animation-delay:.42s}
.chart i:nth-child(6){height:74%;animation-delay:.5s}
.chart i:nth-child(7){height:68%;animation-delay:.58s}
.chart i:nth-child(8){height:88%;animation-delay:.66s}
.chart i:nth-child(9){height:100%;animation-delay:.74s;background:linear-gradient(180deg,#4ADE80,rgba(6,182,212,.6))}
@keyframes growBar{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.mini-row{
  display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:13px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);margin-bottom:10px;
  transition:background .25s,transform .25s,border-color .25s;
}
.mini-row:last-child{margin-bottom:0}
.mini-row:hover{background:rgba(255,255,255,.1);transform:translateX(6px);border-color:rgba(103,232,249,.35)}
.mini-row .ic{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mini-row .ic svg{width:18px;height:18px}
.mini-row .t{font-size:14px;font-weight:600;color:#fff}
.mini-row .d{font-size:12px;color:rgba(226,236,255,.58)}
.mini-row .grow{margin-left:auto;font-size:12px;font-weight:700;color:#4ADE80}
/* 漂浮徽章 */
.float-chip{
  position:absolute;z-index:4;display:flex;align-items:center;gap:8px;
  padding:11px 18px;border-radius:14px;font-size:13px;font-weight:700;color:var(--brand-900);
  background:rgba(255,255,255,.95);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 18px 36px -14px rgba(0,4,20,.4),0 0 0 1px rgba(103,232,249,.18);
  animation:bob 5s ease-in-out infinite;
}
.float-chip svg{width:16px;height:16px;color:var(--brand-600)}
.float-chip.c1{top:-22px;right:34px;animation-delay:.6s}
.float-chip.c2{bottom:-20px;left:-14px}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ============ Hero 轮换词 ============ */
/* 2026-09-25 修复（手机端首页轮换词消失）：
   .rot-inner 的 transform 无限动画会提升为合成层，与 background-clip:text 组合
   在 Chromium 内核（PC Chrome / 手机夸克、UC、微信内置等）上渲染失效——
   渐变词整体透明不可见（DOM 与几何均正常，纯绘制层问题）。
   故弃用 clip:text，改为纯色 #67E8F9，与 .grad 渐变青色段协调。 */
.rotator{
  display:inline-block;height:1.16em;overflow:hidden;vertical-align:bottom;
  -webkit-text-fill-color:#67E8F9;
}
.rot-inner{display:flex;flex-direction:column;animation:rotRoll 6s cubic-bezier(.65,.05,.36,1) infinite}
.rot-inner span{display:block;line-height:1.16;white-space:nowrap}
@keyframes rotRoll{
  0%,24%{transform:translateY(0)}
  33%,57%{transform:translateY(-25%)}
  66%,90%{transform:translateY(-50%)}
  100%{transform:translateY(-75%)}
}

/* ============ 卡片鼠标光斑 ============ */
.spotlight{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .35s;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(37,99,235,.16),rgba(6,182,212,.08) 45%,transparent 70%);
}
.spot:hover .spotlight{opacity:1}
.spot{position:relative}

/* ============ 滚动进度条 ============ */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:1000;
  background:linear-gradient(90deg,#2563EB,#06B6D4,#818CF8);
  box-shadow:0 0 12px rgba(37,99,235,.5);
  transition:width .1s linear;
}

/* ============ 信任条 ============ */
/* ⚠️ 2026-09-24 修正（用户：「首页这个板块的白色背景很突兀，感觉突然多出来了」）：
   原写法 `.trustbar{margin-top:-56px}` 本意是让白卡「骑」在 hero 底边上，
   但首页 hero 与信任条之间还夹着一层 `nav.local-nav`（高 59px，背景 --bg-soft），
   负 margin 被它整条抵消 —— 实测卡片只上浮 3px，反而把二级导航盖掉 56px，
   而 .trustbar 自身没有背景，露出的裸 body 白（#FFF）在其左右两侧形成两条横带。
   现改为：信任条区自带与下方 Services 同色的背景（--bg），回归正常文档流，
   local-nav 完整显示，hero 以下到 Services 由「三块不同浅色」收敛为一整片。
   ⚠️ 若日后再给此处加负 margin，必须先确认它上方还有没有占位元素（margin 不会跨元素累加）。 */
.trustbar{position:relative;z-index:5;background:var(--bg);padding:30px 0 0}
.trustbar-inner{
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);border-radius:var(--radius-xl);
  box-shadow:0 18px 40px -24px rgba(11,18,32,.18);padding:26px 30px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}
.trust-item{display:flex;align-items:center;gap:15px;padding:8px 12px;border-radius:14px;transition:background .25s}
.trust-item:hover{background:var(--bg-soft)}
.trust-item .ic{
  width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:linear-gradient(140deg,var(--brand-50),#ECFEFF);color:var(--brand-600);
  transition:transform .3s var(--ease);
}
.trust-item:hover .ic{transform:scale(1.1) rotate(-4deg)}
.trust-item .ic svg{width:23px;height:23px}
.trust-item .t{font-size:15.5px;font-weight:700;color:var(--ink)}
.trust-item .d{font-size:12.5px;color:var(--ink-3)}

/* ============ Services：Bento 网格 ============ */
.services{background:var(--bg);overflow:hidden}
.services::before{
  content:"";position:absolute;top:-160px;right:-160px;width:480px;height:480px;border-radius:50%;
  background:radial-gradient(circle,rgba(6,182,212,.09),transparent 70%);pointer-events:none;
}
.grid-services{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative;align-items:stretch}
/* GEO 页：六大能力按 3 列整齐对齐 */
.geo-page .grid-services{grid-template-columns:repeat(3,1fr);gap:20px}
/* SEO 页：8 大平台 3×3，feature 跨 2 列做焦点卡 */
.seoyh-page .grid-services{grid-template-columns:repeat(3,1fr);gap:22px}
.seoyh-page .service-card.feature{grid-column:span 2;grid-row:span 1}
.service-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:28px 26px;position:relative;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.service-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad);transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease)}
.service-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.service-card:hover::before{transform:scaleY(1)}
.service-card .ic{
  width:54px;height:54px;border-radius:15px;display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;transition:transform .35s var(--ease);
  background:linear-gradient(140deg,var(--brand-50),#ECFEFF);color:var(--brand-600);
}
.service-card:hover .ic{transform:scale(1.08) rotate(-5deg);background:var(--grad);color:#fff;box-shadow:var(--shadow-cyan)}
.service-card .ic svg{width:26px;height:26px}
.service-card h3{font-size:18px;font-weight:700;margin-bottom:9px;color:var(--ink);line-height:1.45}
.service-card p{font-size:13.5px;color:var(--ink-3);margin-bottom:16px;line-height:1.7;flex:1}
.service-card ul.tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:8px}
.service-card ul.tags li{font-size:12px;color:var(--ink-2);background:var(--bg-soft);padding:5px 11px;border-radius:999px;transition:background .25s,color .25s}
.service-card:hover ul.tags li{background:var(--brand-50);color:var(--brand-700)}
.service-link{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--brand-600);margin-top:auto;padding-top:6px}
.service-link svg{width:15px;height:15px;transition:transform .25s}
.service-card:hover .service-link svg{transform:translateX(5px)}
/* Bento 焦点卡 */
.service-card.feature{
  grid-column:span 2;grid-row:span 1;
  background:linear-gradient(140deg,var(--brand-900) 0%,#16357F 55%,#0E7490 130%);
  border:none;color:#fff;overflow:hidden;
}
.service-card.feature::before{display:none}
.service-card.feature::after{
  content:"";position:absolute;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(34,211,238,.28),transparent 70%);
  top:-140px;right:-100px;pointer-events:none;
}
.service-card.feature .ic{background:rgba(255,255,255,.12);color:var(--cyan-soft)}
.service-card.feature:hover .ic{background:rgba(255,255,255,.2);box-shadow:none}
.service-card.feature h3{color:#fff;font-size:22px}
.service-card.feature p{color:rgba(226,236,255,.75);font-size:14.5px;max-width:420px}
.service-card.feature ul.tags li{background:rgba(255,255,255,.1);color:rgba(226,236,255,.85)}
.service-card.feature .service-link{color:var(--cyan-soft)}
.service-card.feature .mini-chart{position:absolute;right:34px;bottom:30px;display:flex;align-items:flex-end;gap:5px;height:64px;opacity:.9}
.service-card.feature .mini-chart i{width:9px;border-radius:4px;background:linear-gradient(180deg,#67E8F9,rgba(37,99,235,.4));animation:growBar 1.4s var(--ease-out) both}
.service-card.feature .mini-chart i:nth-child(1){height:36%}
.service-card.feature .mini-chart i:nth-child(2){height:56%}
.service-card.feature .mini-chart i:nth-child(3){height:44%}
.service-card.feature .mini-chart i:nth-child(4){height:72%}
.service-card.feature .mini-chart i:nth-child(5){height:100%;background:linear-gradient(180deg,#4ADE80,rgba(6,182,212,.5))}

/* ============ Advantages：渐变招牌卡 ============ */
#advantages{
  background:
    radial-gradient(900px 520px at 10% -5%,rgba(37,99,235,.07),transparent 62%),
    radial-gradient(820px 520px at 90% 12%,rgba(6,182,212,.08),transparent 62%),
    linear-gradient(180deg,#F5F8FD 0%,#FBFCFE 100%);
}
.advantage-wrap{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch}
.advantage-card{
  position:relative;border-radius:var(--radius-xl);background:#fff;overflow:hidden;
  border:1px solid var(--line);display:flex;flex-direction:column;
  box-shadow:var(--shadow-md);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.advantage-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
/* 渐变招牌头 */
.advantage-head{
  position:relative;padding:26px 28px;display:flex;align-items:center;gap:16px;overflow:hidden;
  background:linear-gradient(120deg,#16357F 0%,#2563EB 52%,#06B6D4 100%);
}
.advantage-card.d1 .advantage-head{background:linear-gradient(120deg,#0E7490 0%,#0891B2 46%,#6D28D9 115%)}
/* 6 色循环：每隔 6 张卡换一次渐变 */
.advantage-wrap .advantage-card:nth-child(6n+1) .advantage-head{background:linear-gradient(120deg,#16357F 0%,#2563EB 52%,#06B6D4 100%)}
.advantage-wrap .advantage-card:nth-child(6n+2) .advantage-head{background:linear-gradient(120deg,#0E7490 0%,#0891B2 46%,#6D28D9 115%)}
.advantage-wrap .advantage-card:nth-child(6n+3) .advantage-head{background:linear-gradient(120deg,#1E3A8A 0%,#6366F1 50%,#06B6D4 100%)}
.advantage-wrap .advantage-card:nth-child(6n+4) .advantage-head{background:linear-gradient(120deg,#5B21B6 0%,#818CF8 50%,#22D3EE 100%)}
.advantage-wrap .advantage-card:nth-child(6n+5) .advantage-head{background:linear-gradient(120deg,#0E7490 0%,#06B6D4 50%,#4ADE80 100%)}
.advantage-wrap .advantage-card:nth-child(6n+6) .advantage-head{background:linear-gradient(120deg,#155E75 0%,#0891B2 50%,#A855F7 100%)}
.advantage-head::after{content:"";position:absolute;inset:0;background:radial-gradient(560px 220px at 88% -30%,rgba(255,255,255,.28),transparent 62%)}
.advantage-num{
  position:absolute;right:20px;top:50%;transform:translateY(-50%);z-index:0;
  font-family:var(--font-display);font-size:128px;font-weight:800;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.22);
}
.advantage-head .ic{
  width:54px;height:54px;flex-shrink:0;border-radius:16px;color:#fff;z-index:1;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);
  box-shadow:0 10px 24px -10px rgba(0,0,0,.35);
}
.advantage-head .ic svg{width:26px;height:26px}
.advantage-title{position:relative;z-index:1}
.advantage-title h3{font-size:24px;font-weight:800;color:#fff;letter-spacing:-.01em}
.advantage-title .advantage-en{display:block;font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:4px}
/* 招牌头内 h3 标题：seoyh.html 的 6 个优势卡 h3 直接在 .advantage-head 中，需要单独白色 */
.advantage-head h3{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.01em;display:flex;align-items:center;gap:14px;margin:0;text-shadow:0 1px 2px rgba(0,8,40,.3)}
/* 悬浮数据条 */
.advantage-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:-20px 22px 22px;position:relative;z-index:2}
.advantage-stats .stat{
  padding:16px 8px 13px;border-radius:16px;text-align:center;background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s;
}
.advantage-stats .stat:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--brand-200)}
.advantage-stats .stat b{
  display:flex;align-items:baseline;justify-content:center;gap:2px;font-size:26px;font-weight:800;
  font-family:var(--font-display);line-height:1.1;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.advantage-card.d1 .stat b{background:linear-gradient(120deg,#0891B2,#6D28D9);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.advantage-stats .stat b i{font-size:14px;font-style:normal;font-weight:800}
.advantage-stats .stat>span{display:block;font-size:12px;color:var(--ink-3);margin-top:5px}
/* 优势条目 */
.advantage-list{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;padding:0 22px 26px;flex:1;align-content:start}
.advantage-body{display:flex;flex-direction:column;flex:1}
.advantage-item{position:relative;display:flex;gap:13px;padding:14px 14px 14px 18px;border-radius:14px;transition:background .25s,transform .25s var(--ease)}
.advantage-item::before{
  content:"";position:absolute;left:0;top:20px;bottom:20px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,#2563EB,#06B6D4);opacity:0;transition:opacity .25s;
}
.advantage-card.d1 .advantage-item::before{background:linear-gradient(180deg,#0891B2,#818CF8)}
.advantage-item:hover{background:var(--bg-soft);transform:translateX(5px)}
.advantage-item:hover::before{opacity:1}
.advantage-item .ic-box{
  width:38px;height:38px;flex-shrink:0;border-radius:11px;color:#fff;
  background:linear-gradient(135deg,#2563EB,#06B6D4);
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px -8px rgba(37,99,235,.55);
  transition:transform .25s var(--ease);
}
.advantage-card.d1 .advantage-item .ic-box{background:linear-gradient(135deg,#0891B2,#818CF8);box-shadow:0 8px 18px -8px rgba(6,182,212,.55)}
.advantage-item:hover .ic-box{transform:scale(1.1) rotate(-4deg)}
.advantage-item .ic-box svg{width:18px;height:18px}
.advantage-item h4{font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:3px}
.advantage-item p{font-size:12.5px;color:var(--ink-3);line-height:1.6}

/* ============ Value：深色价值带 ============ */
.value-band{background:var(--brand-950);color:#fff;position:relative;overflow:hidden}
.value-band .aurora{position:absolute;inset:0;pointer-events:none}
.value-band .aurora i{position:absolute;border-radius:50%;filter:blur(80px);opacity:.35}
.value-band .aurora i:nth-child(1){width:560px;height:560px;background:radial-gradient(circle,#2563EB,transparent 65%);top:-220px;right:-100px}
.value-band .aurora i:nth-child(2){width:460px;height:460px;background:radial-gradient(circle,#06B6D4,transparent 65%);bottom:-200px;left:-80px}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative;z-index:1;align-items:stretch}
.value-card{
  display:flex;flex-direction:column;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.11);border-radius:var(--radius-lg);
  padding:30px 28px;position:relative;overflow:hidden;
  transition:background .3s,transform .3s var(--ease),border-color .3s;
}
.value-card::after{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan-bright),transparent);
  opacity:0;transition:opacity .35s;
}
.value-card:hover{background:rgba(255,255,255,.09);transform:translateY(-6px);border-color:rgba(103,232,249,.3)}
.value-card:hover::after{opacity:1}
.value-card .ic{width:48px;height:48px;border-radius:13px;background:linear-gradient(140deg,rgba(34,211,238,.2),rgba(129,140,248,.16));color:var(--cyan-soft);display:flex;align-items:center;justify-content:center;margin-bottom:18px;transition:transform .35s var(--ease);flex-shrink:0}
.value-card:hover .ic{transform:scale(1.1) rotate(-5deg)}
.value-card .ic svg{width:22px;height:22px}
.value-card h4{font-size:17px;font-weight:700;margin-bottom:6px;display:flex;align-items:baseline;gap:10px;line-height:1.45}
.value-card .en{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(226,236,255,.4);font-weight:700}
.value-card p{font-size:13.5px;color:rgba(226,236,255,.66);line-height:1.7;margin:0}

/* ============ Industries ============ */
.industries{background:var(--bg-soft)}
.ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ind-card{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:190px;
  display:flex;flex-direction:column;justify-content:flex-end;padding:26px;color:#fff;
  transition:transform .3s var(--ease),box-shadow .3s;isolation:isolate;
}
.ind-card::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grad);opacity:.95;transition:transform .4s var(--ease)}
.ind-card::after{ /* 光泽扫过 */
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);
  transform:translateX(-110%);transition:transform .65s var(--ease);
}
.ind-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg)}
.ind-card:hover::before{transform:scale(1.07)}
.ind-card:hover::after{transform:translateX(110%)}
.ind-card .no{font-size:34px;font-weight:800;color:rgba(255,255,255,.35);position:absolute;top:18px;right:22px;font-family:var(--font-display)}
.ind-card .ic{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.18);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;position:absolute;top:18px;left:22px;transition:background .3s}
.ind-card:hover .ic{background:rgba(255,255,255,.3)}
.ind-card .ic svg{width:21px;height:21px}
.ind-card h3{font-size:19px;font-weight:800;margin-bottom:7px}
.ind-card p{font-size:12.5px;color:rgba(255,255,255,.85);line-height:1.6;max-width:300px}

/* ============ Cases ============ */
.cases{background:#fff}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.case-card{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:#fff;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.case-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:transparent}
.case-thumb{
  aspect-ratio:1/1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--grad);
}
.case-thumb img{
  width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);position:relative;z-index:1;
}
.case-card:hover .case-thumb img{transform:scale(1.08)}
.case-thumb::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.28) 50%,transparent 62%);
  transform:translateX(-110%);transition:transform .65s var(--ease);
}
.case-card:hover .case-thumb::after{transform:translateX(110%)}
.case-thumb .badge{
  position:absolute;top:14px;left:14px;z-index:3;font-size:11px;font-weight:700;padding:5px 12px;border-radius:999px;
  background:rgba(255,255,255,.92);color:var(--brand-700);backdrop-filter:blur(4px);letter-spacing:.03em;
}
.case-body{padding:22px;position:relative;display:flex;flex-direction:column;flex:1}
.case-body h3{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:7px;line-height:1.5;overflow:visible}
.case-body p{font-size:13px;color:var(--ink-3);line-height:1.65;margin-bottom:14px;overflow:visible}
.case-tag{font-size:12px;font-weight:600;color:var(--brand-600);background:var(--brand-50);padding:5px 12px;border-radius:999px;display:inline-flex;align-items:center;gap:4px;margin-top:auto;align-self:flex-start;transition:background .25s,color .25s,transform .25s}
.case-card:hover .case-tag{background:var(--grad);color:#fff;transform:translateX(3px)}

/* ============ News ============ */
.news{background:var(--bg)}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.news-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;display:flex;flex-direction:column;
  position:relative;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.news-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.news-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.news-card:hover::before{transform:scaleX(1)}
.news-meta{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.news-date{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:14px;font-weight:800;line-height:1;flex-shrink:0;
  background:linear-gradient(140deg,var(--brand-50),#ECFEFF);color:var(--brand-700);
  transition:background .3s,color .3s;
}
.news-card:hover .news-date{background:var(--grad);color:#fff}
.news-date .d{font-size:21px}
.news-date .m{font-size:10.5px;margin-top:3px;font-weight:600;opacity:.75}
.news-cat{font-size:12px;font-weight:700;color:var(--cyan-600);background:rgba(6,182,212,.1);padding:4px 12px;border-radius:999px}
.news-card h3{font-size:16.5px;font-weight:700;line-height:1.5;color:var(--ink);margin-bottom:11px;overflow:visible}
.news-card p{font-size:13px;color:var(--ink-3);line-height:1.65;overflow:visible;margin-bottom:18px}
.news-more{margin-top:auto;font-size:13.5px;font-weight:600;color:var(--brand-600);display:inline-flex;align-items:center;gap:6px}
.news-more svg{width:15px;height:15px;transition:transform .25s}
.news-card:hover .news-more svg{transform:translateX(5px)}

/* ============ Commitment ============ */
.commit{background:var(--brand-950);color:#fff;position:relative;overflow:hidden}
.commit::before{content:"";position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.3),transparent 68%);bottom:-240px;left:-160px}
.commit::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(6,182,212,.2),transparent 68%);top:-160px;right:-80px}
.commit-inner{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:center;position:relative;z-index:1}
.commit-head h2{font-size:clamp(26px,3.2vw,36px);font-weight:800;line-height:1.3;margin-bottom:18px}
.commit-head p{font-size:15px;color:rgba(226,236,255,.7);line-height:1.85;margin-bottom:30px;max-width:460px}
.commit-badge{
  display:inline-flex;align-items:center;gap:11px;padding:13px 22px;border-radius:14px;font-weight:700;font-size:14.5px;
  background:linear-gradient(120deg,rgba(245,158,11,.16),rgba(251,191,36,.1));
  border:1px solid rgba(245,158,11,.4);color:#FCD34D;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.commit-badge svg{width:18px;height:18px;flex-shrink:0}
.commit-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.commit-item{
  display:flex;flex-direction:column;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.11);border-radius:var(--radius-lg);
  padding:26px;position:relative;overflow:hidden;
  transition:background .3s,transform .3s var(--ease),border-color .3s;
}
.commit-item::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--cyan-bright),transparent);opacity:0;transition:opacity .35s}
.commit-item:hover{background:rgba(255,255,255,.09);transform:translateY(-5px);border-color:rgba(103,232,249,.3)}
.commit-item:hover::after{opacity:1}
.commit-item .ic{width:46px;height:46px;border-radius:12px;background:linear-gradient(140deg,rgba(34,211,238,.2),rgba(129,140,248,.16));color:var(--cyan-soft);display:flex;align-items:center;justify-content:center;margin-bottom:16px;flex-shrink:0;transition:transform .35s var(--ease)}
.commit-item:hover .ic{transform:scale(1.08) rotate(-5deg)}
.commit-item .ic svg{width:21px;height:21px}
.commit-item h4{font-size:16.5px;font-weight:700;margin-bottom:5px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.commit-item h4 span{font-size:12px;font-weight:600;color:rgba(226,236,255,.45);letter-spacing:.06em}
.commit-item p{font-size:13px;color:rgba(226,236,255,.62);line-height:1.7;margin:0}

/* ============ CTA：动态渐变 ============ */
.cta{padding:0 0 100px;background:var(--bg)}
.cta-box{
  position:relative;border-radius:var(--radius-xl);padding:64px 56px;color:#fff;overflow:hidden;
  display:grid;grid-template-columns:1.35fr .65fr;gap:36px;align-items:center;
  background:var(--grad-live);background-size:250% 250%;
  animation:gradShift 12s ease infinite;
  box-shadow:0 40px 80px -30px rgba(37,99,235,.55);
}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.cta-box::before{
  content:"";position:absolute;width:420px;height:420px;border-radius:50%;top:-160px;right:-80px;
  background:radial-gradient(circle,rgba(255,255,255,.2),transparent 70%);pointer-events:none;
}
.cta-box::after{ /* 细网格 */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 60% 80% at 80% 20%,#000,transparent 70%);
  mask-image:radial-gradient(ellipse 60% 80% at 80% 20%,#000,transparent 70%);
}
.cta-box>div:first-child{position:relative;z-index:1;align-self:center}
.cta-box h2{font-size:clamp(26px,3.4vw,36px);font-weight:800;line-height:1.3;margin-bottom:14px;position:relative;z-index:1}
.cta-box p{font-size:15.5px;color:rgba(255,255,255,.88);line-height:1.75;position:relative;z-index:1;max-width:520px}
.cta-actions{display:flex;flex-direction:column;gap:14px;position:relative;z-index:1;align-self:center;justify-self:end;width:100%;max-width:340px}
/* 2026-09-25（用户反馈：荣耀手机 CTA 卡片撑破出屏）：手机浏览器「字体放大」
   会等比放大 px 文字，.btn 的 white-space:nowrap 使 master@51landie.com 的
   min-content 超过 grid 列宽；grid 子项默认 min-width:auto 不许收缩，
   于是整张卡片被顶出视口右侧。允许收缩 + 长内容可断行：
   标准字号下按钮仍是单行（210px 文字 < 269px 按钮），视觉零变化。 */
.cta-box>div,.cta-actions{min-width:0}
/* 移动端把按钮字号/padding 收一档：让 19 字符的邮箱在 230px 按钮内单行放下
   （168px 文字+18 图标+9 间距+28 padding=223 ≤ 230），断行只作为字体放大兜底 */
@media(max-width:768px){
  .cta-actions .btn{font-size:14px;padding:15px 14px}
}
.cta-actions .btn{width:100%;justify-content:center;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.cta-box .cta-tip{font-size:13.5px;color:rgba(255,255,255,.68);margin-top:14px;line-height:1.6;max-width:520px}

/* ============ Footer ============ */
.footer{background:var(--brand-950);color:rgba(226,236,255,.68);padding:72px 0 0;position:relative}
.footer::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--brand-500),var(--cyan),transparent)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:48px}
.footer-brand .brand{color:#fff;margin-bottom:18px}
.footer-brand p{font-size:13.5px;line-height:1.85;color:rgba(226,236,255,.58);max-width:330px}
.footer h4{font-size:15px;font-weight:700;color:#fff;margin-bottom:20px;position:relative;padding-left:14px}
.footer h4::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:3px;background:var(--grad)}
.footer-links li{margin-bottom:12px}
.footer-links a{font-size:13.5px;color:rgba(226,236,255,.58);transition:color .2s,padding-left .25s;display:inline-flex;align-items:center;gap:7px}
.footer-links a::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--brand-400);opacity:.6;transition:opacity .2s,transform .2s}
.footer-links a:hover{color:#fff;padding-left:4px}
.footer-links a:hover::before{opacity:1;transform:scale(1.4)}
.footer-contact li{display:flex;gap:12px;margin-bottom:15px;font-size:13.5px;align-items:center}
.footer-contact li>a{display:flex;align-items:center;min-height:36px;line-height:1.45}
.footer-contact .ic{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.07);color:var(--cyan-bright);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .25s,transform .25s}
.footer-contact li:hover .ic{background:rgba(34,211,238,.18);transform:scale(1.08)}
.footer-contact .ic svg{width:16px;height:16px}
.footer-contact a:hover{color:#fff}
/* ⚠️ 原 alpha .42 混到 --brand-950(#060F2B) 上是 #626C84 → 只有 3.59:1，17 页 ×2 处全挂。
   .58 后约 5.86:1；再高就跟 .footer 正文(.68)没层次了。 */
.footer-bottom{border-top:1px solid rgba(255,255,255,.09);padding:22px 0;font-size:12.5px;color:rgba(226,236,255,.58);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ============ Back to top ============ */
/* 2026-09-27：AI 客服悬浮球 .aikf-ball 与本按钮同为 right:24/bottom:24，
   桌面端球(58px,z950)会盖住本按钮(48px,z90)——球实际渲染时 aikf.js 给 html
   加 .aikf-on，本按钮自动抬高到球的正上方（24+58+12=94px）；
   AI 客服后台关闭时保持贴角不变。移动端 mq-on 时本按钮本就隐藏，无影响。 */
.to-top{
  position:fixed;right:24px;bottom:24px;width:48px;height:48px;border-radius:14px;z-index:90;
  background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-brand);opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s,transform .3s,visibility .3s;
}
html.aikf-on .to-top{bottom:94px}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{transform:translateY(-3px)}
.to-top svg{width:20px;height:20px}

/* ============ 滚动渐显 ============ */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.in{opacity:1;transform:translateY(0)}
.d1{transition-delay:.06s}.d2{transition-delay:.14s}.d3{transition-delay:.22s}.d4{transition-delay:.3s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ============ Responsive ============ */
@media(min-width:1600px){
  :root{--maxw:1560px}
  body{font-size:16.5px}
  .hero{padding:120px 0 170px}
  .hero h1{font-size:clamp(40px,3vw,60px)}
  .hero p.lead{max-width:620px;font-size:20px}
  .hero-card{padding:34px}
  .section{padding:104px 0}
  .section-title{font-size:clamp(32px,2.4vw,46px)}
  .case-grid{grid-template-columns:repeat(3,1fr);gap:24px}
  .news-grid{grid-template-columns:repeat(4,1fr);gap:24px}
  .ind-grid{gap:20px}
  .ind-card{min-height:200px}
  .value-grid{gap:22px}
  .cta-box{padding:76px 68px}
  .trustbar-inner{padding:32px 38px}
}
@media(max-width:1024px){
  .grid-services{grid-template-columns:repeat(3,1fr)}
  .service-card.feature{grid-column:span 3}
  .geo-page .grid-services{grid-template-columns:1fr 1fr;gap:16px}
  .ind-grid{grid-template-columns:repeat(3,1fr)}
  .case-grid{grid-template-columns:repeat(2,1fr)}
  .news-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero h1{white-space:normal}
  .hero-visual{max-width:560px}
  .trustbar-inner{grid-template-columns:repeat(2,1fr)}
  .advantage-wrap{grid-template-columns:1fr}
  .value-grid{grid-template-columns:1fr 1fr}
  .commit-inner{grid-template-columns:1fr}
  .cta-box{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .float-chip{display:none}
}
@media(max-width:768px){
  .section{padding:68px 0}
  .header-phone{display:none}
  .header .btn{display:none}
  /* 2026-09-28（用户要求）：移动端保留 header「免费诊断」按钮作为常驻转化入口 */
  .header .btn-primary{display:inline-flex;align-items:center;justify-content:center;padding:9px 14px;font-size:13px;border-radius:10px;white-space:nowrap}
  .nav{
    position:fixed;top:var(--hd-h);left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;
    gap:2px;padding:16px 24px 28px;border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);
    transform:translateY(-14px);opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s;
    max-height:calc(100vh - var(--hd-h));overflow-y:auto;
  }
  /* ≤768：电话与 CTA 都隐藏、只剩汉堡，CTA 左侧那条竖分割线会悬空 → 关掉 */
  .header-cta{padding-left:0}
  .header-cta::before{display:none}
  /* ≤768 是垂直面板：横向导航用的「底部渐变下划线」在这里会变成一长条，关掉 */
  .nav-link::after{display:none}
  .nav.open{opacity:1;visibility:visible;transform:translateY(0)}
  .nav>li{width:100%}
  .nav-link{padding:13px 10px;border-radius:9px;width:100%;justify-content:space-between}
  /* 2026-09-25（用户反馈乱形）：这行的 › 与右侧 .nav-caret 的 ⌄ 位置几乎完全重叠
     （实测中心点仅差 4px），两组笔画叠加、ArkWeb 上渲染成交叉乱形。
     移动端隐藏链接内嵌箭头，展开/跳转语义只留 caret 一个按钮表达 */
  .nav-link svg{display:none}
  .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding:0 0 0 16px;min-width:0;max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
  .nav>li.open .dropdown{max-height:420px}
  .burger{display:flex}
  .grid-services{grid-template-columns:1fr 1fr}
  .service-card.feature{grid-column:span 2}
  .service-card.feature .mini-chart{display:none}
  .geo-page .grid-services{grid-template-columns:1fr 1fr;gap:16px}
  .ind-grid{grid-template-columns:1fr 1fr}
  .case-grid{grid-template-columns:1fr}
  .news-grid{grid-template-columns:1fr}
  .value-grid{grid-template-columns:1fr}
  .advantage-list{grid-template-columns:1fr}
  .advantage-title .advantage-en{display:none}
  .footer-grid{grid-template-columns:1fr}
  .cta-box{padding:44px 28px}
  .watermark{display:none}
}
@media(max-width:560px){
  .grid-services{grid-template-columns:1fr}
  .service-card.feature{grid-column:span 1}
  .geo-page .grid-services{grid-template-columns:1fr;gap:14px}
  .ind-grid{grid-template-columns:1fr}
  .trustbar-inner{grid-template-columns:1fr}
  .hero-stats{gap:22px}
  .hero{padding:76px 0 120px}
  .section-title{font-size:27px;white-space:normal}
  .advantage-stats .stat b{font-size:23px}
  .advantage-stats .stat b i{font-size:13px}
}

/* ================================================================
   GEO 页旧版「优势卡」样式（.geo-page 作用域覆盖首页新版招牌卡）
   ------------------------------------------------------------
   ⚠️ 2026-09-22 起 geo.html 的「我们的优势」已改版为「八大优势」（见文件末尾 R 节，
      类名 .g8-*），本段规则在 geo 页**已无对应元素**。
      故意保留不删：① 便于回滚；② .adv-* 是 9 个页面共用的全局类，
      这里只是 .geo-page 命名空间下的覆盖，删掉也影响不到别人，但留着零成本。
================================================================ */
.geo-page .advantage-card{
  position:relative;border-radius:var(--radius-xl);padding:0;background:#fff;overflow:hidden;
  border:1px solid var(--line);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
/* 招牌头：通栏渐变 + 毛玻璃图标 + 描边水印数字 */
.geo-page .advantage-card::before{
  content:"";position:absolute;top:-90px;right:-50px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(37,99,235,.14),transparent 70%);pointer-events:none;z-index:0;
}
.geo-page .advantage-card:nth-child(2)::before{background:radial-gradient(circle,rgba(6,182,212,.16),transparent 70%)}
.geo-page .advantage-card:nth-child(3)::before{background:radial-gradient(circle,rgba(129,140,248,.14),transparent 70%)}
.geo-page .advantage-card:nth-child(4)::before{background:radial-gradient(circle,rgba(34,211,238,.16),transparent 70%)}
.geo-page .advantage-card:hover{transform:translateY(-6px);box-shadow:0 24px 60px -20px rgba(37,99,235,.28);border-color:var(--brand-200)}
.geo-page .advantage-card .sub{font-size:12.5px;color:var(--ink-4);letter-spacing:.1em;text-transform:uppercase;margin:0 0 22px;padding-left:54px}
/* 招牌头容器 */
.geo-page .advantage-card .advantage-head{
  position:relative;padding:26px 32px 30px;
  background:linear-gradient(135deg,#2563EB 0%,#1D4ED8 45%,#0891B2 100%);
  color:#fff;overflow:hidden;
}
.geo-page .advantage-card:nth-child(2) .advantage-head{background:linear-gradient(135deg,#0891B2 0%,#06B6D4 45%,#818CF8 100%)}
.geo-page .advantage-card:nth-child(3) .advantage-head{background:linear-gradient(135deg,#6366F1 0%,#2563EB 45%,#0891B2 100%)}
.geo-page .advantage-card:nth-child(4) .advantage-head{background:linear-gradient(135deg,#06B6D4 0%,#22D3EE 45%,#818CF8 100%)}
/* 招牌头光晕 */
.geo-page .advantage-card .advantage-head::before{
  content:"";position:absolute;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 65%);
  top:-130px;right:-100px;pointer-events:none;
}
.geo-page .advantage-card .advantage-head::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.4) 1px,transparent 1px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 30% 50%,#000,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 80% at 30% 50%,#000,transparent 75%);
}
.geo-page .advantage-card .advantage-head h3{
  font-size:19px;font-weight:800;margin:0;color:#fff;
  display:flex;align-items:center;gap:12px;position:relative;z-index:1;letter-spacing:.02em;
}
.geo-page .advantage-card .advantage-head h3 .ic{
  width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.18);
  backdrop-filter:blur(8px);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px -4px rgba(0,0,0,.2);
  border:1px solid rgba(255,255,255,.28);
}
.geo-page .advantage-card .advantage-head h3 .ic svg{width:21px;height:21px}
.geo-page .advantage-card .advantage-head .advantage-en{
  margin-left:auto;font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;opacity:.78;position:relative;z-index:1;
}
.geo-page .advantage-card .advantage-head .advantage-num{
  position:absolute;right:24px;top:8px;font-family:var(--font-display);
  font-size:78px;font-weight:800;line-height:1;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.32);
  z-index:0;pointer-events:none;font-style:italic;
}
/* 卡片正文容器 */
.geo-page .advantage-card .advantage-body{position:relative;z-index:1;padding:28px 32px 30px}
.geo-page .advantage-list{display:grid;grid-template-columns:1fr;gap:14px;padding:0}
.geo-page .advantage-item{
  display:flex;gap:14px;padding:14px;border-radius:14px;
  transition:background .25s,transform .25s var(--ease);
  position:relative;overflow:hidden;
}
.geo-page .advantage-item::before{display:none}
/* 鼠标 hover 时左侧渐变竖线 */
.geo-page .advantage-item::after{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,#2563EB,#22D3EE);opacity:0;transform:scaleY(.4);
  transition:opacity .25s,transform .25s var(--ease);
}
.geo-page .advantage-item:hover{background:var(--bg-soft);transform:translateX(6px)}
.geo-page .advantage-item:hover::after{opacity:1;transform:scaleY(1)}
.geo-page .advantage-item .no{
  font-size:13px;font-weight:800;font-family:var(--font-display);flex-shrink:0;line-height:1.6;
  color:var(--brand-300);position:relative;padding-left:2px;
  transition:color .25s;
}
.geo-page .advantage-item:hover .no{color:var(--brand-600)}
.geo-page .advantage-item h4{font-size:15.5px;font-weight:700;color:var(--ink);margin-bottom:5px}
.geo-page .advantage-item p{font-size:13px;color:var(--ink-3);line-height:1.7}
@media(min-width:1600px){
  .geo-page .advantage-card{padding:46px}
}
@media(max-width:768px){
  .geo-page .advantage-list{grid-template-columns:1fr}
}

/* ============ GEO 页专属样式 ============ */

/* Hero AI 对话模拟 */
.ai-chat{display:flex;flex-direction:column;gap:14px}
.ai-q{
  align-self:flex-end;max-width:88%;padding:13px 18px;border-radius:16px 16px 4px 16px;font-size:14px;font-weight:600;
  background:linear-gradient(120deg,rgba(37,99,235,.55),rgba(6,182,212,.45));color:#fff;
  box-shadow:0 12px 28px -12px rgba(6,16,45,.5);animation:fadeInUp .7s var(--ease-out) both;
}
.ai-a{
  align-self:flex-start;max-width:96%;padding:16px 18px;border-radius:16px 16px 16px 4px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);font-size:13.5px;line-height:1.8;color:rgba(226,236,255,.85);
  animation:fadeInUp .7s var(--ease-out) .25s both;
}
.ai-a .hl{
  background:linear-gradient(120deg,rgba(103,232,249,.28),rgba(129,140,248,.28));
  border-bottom:2px solid var(--cyan-bright);padding:0 3px;color:#fff;font-weight:700;
}
.ai-a .src{display:inline-flex;align-items:center;gap:5px;margin:0 3px;padding:1px 9px;border-radius:999px;font-size:11.5px;font-weight:700;background:rgba(74,222,128,.16);border:1px solid rgba(74,222,128,.4);color:#4ADE80}
@keyframes fadeInUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.ai-plats{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.ai-plats span{
  font-size:12px;font-weight:600;color:rgba(226,236,255,.75);padding:6px 13px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);transition:all .3s;
}
.ai-plats span:hover{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(103,232,249,.4);transform:translateY(-2px)}
.typing{display:inline-flex;gap:5px;align-items:center;margin-top:8px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--cyan-bright);animation:tp 1.2s infinite}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
@keyframes tp{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

/* SEO vs GEO 对比 */
.vs-grid{display:grid;grid-template-columns:1fr 64px 1fr;gap:0;align-items:stretch}
.vs-card{
  border-radius:var(--radius-xl);padding:38px 34px;position:relative;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.vs-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.vs-card.seo{background:#fff;border:1px solid var(--line)}
.vs-card.geo{background:linear-gradient(150deg,var(--brand-900) 0%,#16357F 55%,#0E7490 130%);color:#fff}
.vs-card .tagline{font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px}
.vs-card.seo .tagline{color:var(--ink-4)}
.vs-card.geo .tagline{color:var(--cyan-soft)}
.vs-card h3{font-size:24px;font-weight:800;margin-bottom:20px}
.vs-card ul{display:flex;flex-direction:column;gap:13px}
.vs-card ul li{display:flex;gap:11px;font-size:14.5px;line-height:1.65}
.vs-card ul li svg{width:19px;height:19px;flex-shrink:0;margin-top:3px}
.vs-card.seo ul li{color:var(--ink-2)}
.vs-card.seo ul li svg{color:var(--ink-4)}
.vs-card.geo ul li{color:rgba(226,236,255,.88)}
.vs-card.geo ul li svg{color:var(--cyan-bright)}
.vs-mid{display:flex;align-items:center;justify-content:center}
.vs-mid span{
  width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:800;background:var(--grad);color:#fff;box-shadow:var(--shadow-brand);z-index:2;
}
/* 公式带：核心公式视觉锤 */
.formula-band{
  position:relative;margin-top:34px;border-radius:var(--radius-xl);padding:0;overflow:hidden;
  background:linear-gradient(135deg,#0B1B3F 0%,#1D4ED8 55%,#0891B2 100%);
  color:#fff;display:grid;grid-template-columns:auto 1fr;align-items:stretch;
  box-shadow:0 30px 70px -28px rgba(37,99,235,.55);
}
.formula-band::before{
  content:"";position:absolute;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 65%);
  top:-160px;right:-80px;pointer-events:none;
}
.formula-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:36px 36px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 80% 30%,#000,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 80% at 80% 30%,#000,transparent 75%);
}
.formula-band .fx{
  position:relative;z-index:1;padding:40px 44px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-size:clamp(22px,2.2vw,32px);font-weight:800;
  letter-spacing:.02em;line-height:1.2;white-space:nowrap;
  color:#fff;
  border-right:1px dashed rgba(255,255,255,.28);
  text-shadow:0 4px 20px rgba(0,0,0,.25);
}
.formula-band .fx i{
  font-style:normal;font-weight:800;margin:0 12px;display:inline-block;
  background:linear-gradient(180deg,#FDE68A,#FBBF24);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  font-size:1.25em;
}
.formula-band p{
  position:relative;z-index:1;padding:30px 40px;font-size:14.5px;color:rgba(226,236,255,.88);
  line-height:1.85;align-self:center;
}

/* 四步流程 */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:step;align-items:stretch;position:relative}
.step-card{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px 26px 28px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;overflow:hidden;
}
.step-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg);border-color:var(--brand-200)}
/* 步骤间虚线箭头连接 */
.step-card:not(:last-child)::before{
  content:"";position:absolute;top:42px;right:-14px;width:18px;height:1px;
  background-image:linear-gradient(90deg,var(--brand-300) 50%,transparent 0);
  background-size:6px 1px;background-repeat:repeat-x;z-index:5;
}
.step-card:not(:last-child)::after{
  content:"";position:absolute;top:38px;right:-12px;width:0;height:0;
  border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid var(--brand-400);z-index:5;
}
.step-card .no{
  font-family:var(--font-display);font-size:46px;font-weight:800;line-height:1;position:absolute;top:16px;right:20px;
  color:transparent;-webkit-text-stroke:1.5px rgba(37,99,235,.22);transition:all .35s;
}
.step-card:hover .no{-webkit-text-stroke:1.5px var(--brand-500);transform:scale(1.1)}
.step-card .ic{width:50px;height:50px;border-radius:14px;background:linear-gradient(140deg,var(--brand-50),#ECFEFF);color:var(--brand-600);display:flex;align-items:center;justify-content:center;margin-bottom:18px;transition:all .35s var(--ease);flex-shrink:0}
.step-card:hover .ic{background:var(--grad);color:#fff;box-shadow:var(--shadow-cyan);transform:scale(1.06) rotate(-4deg)}
.step-card .ic svg{width:24px;height:24px}
.step-card h3{font-size:17.5px;font-weight:700;margin-bottom:9px;color:var(--ink);line-height:1.5}
.step-card p{font-size:13.5px;color:var(--ink-3);line-height:1.7;margin:0}
.step-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.step-card:hover::after{transform:scaleX(1)}

/* 定价卡 */
.price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,460px));gap:24px;justify-content:center}
.price-card{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);padding:42px 38px;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.price-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg)}
.price-card.hot{
  background:linear-gradient(150deg,var(--brand-900) 0%,#16357F 55%,#0E7490 130%);border:none;color:#fff;
  box-shadow:0 40px 80px -30px rgba(6,16,45,.5);
}
.price-card .plan{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-600);margin-bottom:12px}
.price-card.hot .plan{color:var(--cyan-soft)}
.price-card .amount{font-family:var(--font-display);font-size:44px;font-weight:800;line-height:1.05;margin-bottom:6px}
.price-card .amount small{font-size:15px;font-weight:600;opacity:.65;margin-left:4px}
.price-card.hot .amount{background:linear-gradient(120deg,#67E8F9,#A5B4FC);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.price-card .for{font-size:13.5px;color:var(--ink-3);margin-bottom:26px}
.price-card.hot .for{color:rgba(226,236,255,.7)}
.price-card ul{display:flex;flex-direction:column;gap:12px;margin-bottom:30px}
.price-card ul li{display:flex;gap:10px;font-size:14px;line-height:1.6}
.price-card ul li svg{width:18px;height:18px;flex-shrink:0;margin-top:3px;color:var(--brand-600)}
.price-card.hot ul li{color:rgba(226,236,255,.85)}
.price-card.hot ul li svg{color:var(--cyan-bright)}
.price-card .btn{width:100%}
.price-card .hot-tag{
  position:absolute;top:22px;right:-1px;font-size:11.5px;font-weight:800;letter-spacing:.08em;
  padding:6px 16px;border-radius:999px 0 0 999px;background:linear-gradient(120deg,#F59E0B,#FBBF24);color:#7C2D12;
  box-shadow:0 8px 20px -8px rgba(245,158,11,.6);
}
/* GEO 课堂列表 */
.geo-news-list{display:flex;flex-direction:column;gap:14px;position:relative;max-width:100%}
.geo-news-list::before{
  content:"";position:absolute;left:30px;top:30px;bottom:30px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(37,99,235,.18) 12%,rgba(34,211,238,.18) 88%,transparent);
  pointer-events:none;
}
.gn-item{
  display:flex;align-items:center;gap:22px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-md);
  padding:22px 24px;position:relative;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
/* hover 时左侧渐变竖线 */
.gn-item::before{
  content:"";position:absolute;left:-1px;top:18px;bottom:18px;width:4px;border-radius:0 4px 4px 0;
  background:linear-gradient(180deg,#2563EB,#22D3EE);opacity:0;transform:scaleY(.3);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.gn-item:hover{transform:translateX(8px);box-shadow:0 20px 50px -22px rgba(37,99,235,.35);border-color:var(--brand-200)}
.gn-item:hover::before{opacity:1;transform:scaleY(1)}
/* 第 1 项加 CSS-only 角标 */
.gn-item:nth-child(1)::after{
  content:"精 选";
  position:absolute;top:14px;right:14px;
  font-size:10.5px;font-weight:800;letter-spacing:.16em;
  padding:4px 11px;border-radius:999px;
  background:linear-gradient(120deg,#F59E0B,#FBBF24);color:#7C2D12;
  box-shadow:0 6px 14px -4px rgba(245,158,11,.5);
}
.gn-date{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:16px;font-weight:800;line-height:1;flex-shrink:0;
  background:linear-gradient(140deg,var(--brand-50),#ECFEFF);color:var(--brand-700);
  border:1px solid rgba(37,99,235,.15);
  transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.gn-item:hover .gn-date{background:linear-gradient(135deg,#2563EB,#22D3EE);color:#fff;transform:scale(1.06) rotate(-3deg);box-shadow:0 10px 20px -8px rgba(37,99,235,.45)}
.gn-date .d{font-size:22px;font-family:var(--font-display)}
.gn-date .m{font-size:10.5px;margin-top:3px;font-weight:600;opacity:.75}
.gn-item h3{font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.55;margin-bottom:5px;overflow:visible}
.gn-item p{font-size:13px;color:var(--ink-3);line-height:1.6;overflow:visible}
.gn-item .go{margin-left:auto;flex-shrink:0;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:var(--ink-4);background:var(--bg-soft);transition:all .25s}
.gn-item:hover .go{background:linear-gradient(135deg,#2563EB,#22D3EE);color:#fff;transform:translateX(3px);box-shadow:0 8px 16px -6px rgba(37,99,235,.5)}
.gn-item .go svg{width:17px;height:17px}
/* 理念 */
.philo{
  text-align:center;padding:34px 26px;border-radius:var(--radius-lg);
  background:linear-gradient(140deg,rgba(37,99,235,.05),rgba(6,182,212,.06));
}
.philo h3{font-size:21px;font-weight:800;margin-bottom:14px}
.philo p{font-size:15px;color:var(--ink-3);line-height:2.1;max-width:640px;margin:0 auto}
.philo .hl-t{color:var(--brand-600);font-weight:700}

/* ============ SEO 页专属样式 ============ */
/* 6 大好处 */
.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;max-width:100%}
.benefit-card{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:30px 26px 30px;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;overflow:hidden;
}
.benefit-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.benefit-card::after{
  content:"";position:absolute;left:-1px;top:50%;width:3px;height:0;background:var(--grad);
  border-radius:0 4px 4px 0;transition:height .35s var(--ease);transform:translateY(-50%);
}
.benefit-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:var(--brand-200)}
.benefit-card:hover::before{transform:scaleX(1)}
.benefit-card:hover::after{height:60%}
.benefit-card .ic{
  width:56px;height:56px;border-radius:15px;
  background:linear-gradient(140deg,var(--brand-50),#ECFEFF);color:var(--brand-600);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
  transition:all .35s var(--ease);flex-shrink:0;
}
.benefit-card:hover .ic{background:var(--grad);color:#fff;box-shadow:var(--shadow-cyan);transform:scale(1.06) rotate(-4deg)}
.benefit-card .ic svg{width:26px;height:26px}
.benefit-card .num{
  position:absolute;top:22px;right:24px;font-family:var(--font-display);
  font-size:48px;font-weight:800;line-height:1;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1.5px var(--brand-200);
  transition:all .35s var(--ease);pointer-events:none;
}
.benefit-card:hover .num{-webkit-text-stroke:1.5px var(--brand-500);transform:scale(1.08) translateY(-2px)}
.benefit-card h3{font-size:17.5px;font-weight:700;color:var(--ink);margin-bottom:10px;line-height:1.45}
.benefit-card p{font-size:13.5px;color:var(--ink-3);line-height:1.7;margin:0}

/* SEO 课堂标签 */
.classroom-tabs{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:34px;position:relative;
}
.ct-tab{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 22px;border-radius:14px;font-size:14.5px;font-weight:700;color:var(--ink-2);
  background:#fff;border:1px solid var(--line);
  transition:all .3s var(--ease);cursor:pointer;
}
.ct-tab small{font-size:11.5px;font-weight:600;color:var(--ink-4);padding-left:6px;border-left:1px solid var(--line)}
.ct-tab:hover{border-color:var(--brand-300);color:var(--brand-700);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.ct-tab.active{
  background:linear-gradient(135deg,var(--brand-600),#06B6D4);color:#fff;border-color:transparent;
  box-shadow:0 12px 28px -10px rgba(37,99,235,.55);
}
.ct-tab.active small{color:rgba(255,255,255,.78);border-left-color:rgba(255,255,255,.32)}
/* 课堂 panel 切换：默认隐藏非默认 panel */
.geo-news-list.ct-panel{display:none}
.geo-news-list.ct-panel.is-active{display:flex}
.ct-placeholder{
  padding:60px 30px;text-align:center;border:2px dashed var(--line);border-radius:var(--radius-lg);
  color:var(--ink-3);font-size:14.5px;background:var(--bg-soft);
}
.ct-placeholder b{color:var(--brand-600);font-weight:700;margin-right:6px}

/* ============ 响应式 ============ */

@media(max-width:1024px){
  .vs-grid{grid-template-columns:1fr;gap:0}
  .vs-mid{height:64px}
  .steps{grid-template-columns:1fr 1fr;gap:16px}
  .price-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .geo-page .advantage-wrap{grid-template-columns:1fr}
  .formula-band{grid-template-columns:1fr}
  .formula-band .fx{border-right:none;border-bottom:1px dashed rgba(255,255,255,.28)}
  .benefit-grid{grid-template-columns:1fr 1fr;gap:16px;max-width:100%}
  .seoyh-page .grid-services{grid-template-columns:repeat(2,1fr);gap:16px}
  .seoyh-page .service-card.feature{grid-column:span 2}
  .case-grid{grid-template-columns:repeat(2,1fr);gap:18px}
  .commit-inner{grid-template-columns:1fr;gap:36px}
  .advantage-wrap{grid-template-columns:1fr}
  .cta-box{grid-template-columns:1fr;padding:52px 40px;text-align:center}
  .cta-box>div:first-child{margin:0 auto}
  .cta-actions{max-width:380px;margin:0 auto;justify-self:center}
  .hero-stats{gap:0}
  .hero-stats .stat{padding:6px 22px}
}
@media(max-width:768px){
  .steps{grid-template-columns:1fr}
  .gn-item{flex-wrap:wrap}
  .gn-item .go{display:none}
  .formula-band{flex-direction:column;text-align:center}
  .geo-page .advantage-card .advantage-head{padding:22px 24px 24px}
  .geo-page .advantage-card .advantage-num{font-size:60px;top:6px;right:18px}
  .geo-page .advantage-card .advantage-body{padding:24px 24px 26px}
  .benefit-grid{grid-template-columns:1fr}
  .classroom-tabs{gap:10px}
  .ct-tab{padding:10px 18px;font-size:13.5px}
  .seoyh-page .grid-services{grid-template-columns:1fr;gap:14px}
  .seoyh-page .service-card.feature{grid-column:span 1}
  .case-grid{grid-template-columns:1fr;gap:16px}
  .step-card:not(:last-child)::before,
  .step-card:not(:last-child)::after{display:none}
  .value-grid{grid-template-columns:1fr 1fr;gap:14px}
  .advantage-wrap{grid-template-columns:1fr}
  .commit-grid{grid-template-columns:1fr}
  .commit-inner{grid-template-columns:1fr;gap:32px;text-align:center}
  .commit-head p{margin-left:auto;margin-right:auto}
  .hero-stats{gap:0;flex-wrap:wrap}
  .hero-stats .stat{padding:8px 0;flex:0 0 50%;text-align:left}
  .hero-stats .stat:not(:last-child)::after{display:none}
  .hero-stats .stat:nth-child(2n){text-align:right}
  .cta-box{padding:46px 28px}
  .cta-actions{max-width:100%}
}
@media(max-width:560px){
  .price-card{padding:34px 26px}
  .vs-card{padding:30px 24px}
  .formula-band .fx{padding:28px 22px;font-size:18px;flex-wrap:wrap}
  .formula-band p{padding:24px 22px}
  .geo-page .advantage-card .advantage-head .advantage-num{font-size:48px}
  .geo-page .advantage-card .advantage-head h3 .ic{width:36px;height:36px}
  .geo-page .advantage-card .advantage-head h3 .ic svg{width:18px;height:18px}
  .hero-visual::after{display:none}
  .benefit-card{padding:24px 22px 26px}
  .value-grid{grid-template-columns:1fr}
  .hero-stats .stat{flex:0 0 100%;text-align:left;padding:8px 0}
  .hero-stats .stat:nth-child(2n){text-align:left}
  .hero-stats .stat:not(:first-child){border-top:1px solid rgba(255,255,255,.1);margin-top:8px;padding-top:18px}
  .cta-box{padding:40px 24px}
  .step-card{padding:30px 24px 26px}
  .commit-item{padding:24px}
}

/* ============ wzjs-page 专属样式 ============ */
.wxjs-page .services,.wxkf-page .services,.ydddz-page .services,.jjfa-page .services,.wjtgtc-page .services,.tgtc-page .services, .wztc-page .services, .seotc-page .services, .geotc-page .services{background:var(--bg)}
/* 01 浪知潮观点：5 项能力环（5 列网格 + 圆环图标） */
.capability-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;align-items:stretch}
.cap-card{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:32px 22px 30px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s;overflow:hidden;
}
.cap-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.cap-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:var(--brand-200)}
.cap-card:hover::before{transform:scaleX(1)}
.cap-card.d1:hover{border-color:#06B6D4}
.cap-card.d2:hover{border-color:#818CF8}
.cap-card.d3:hover{border-color:#22D3EE}
.cap-card.d4:hover{border-color:#0891B2}
.cap-ring{
  width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:conic-gradient(from 0deg,var(--brand-600),#06B6D4,var(--brand-600));
  position:relative;margin-bottom:14px;transition:transform .5s var(--ease);
}
.cap-card:hover .cap-ring{transform:rotate(360deg)}
.cap-ring::before{content:"";position:absolute;inset:8px;border-radius:50%;background:#fff}
.cap-ring::after{
  content:"";position:absolute;inset:14px;border-radius:50%;border:2px dashed rgba(37,99,235,.25);
  animation:spinSlow 16s linear infinite;
}
.cap-card.d1 .cap-ring{background:conic-gradient(from 0deg,#0891B2,#06B6D4,#22D3EE,#0891B2)}
.cap-card.d2 .cap-ring{background:conic-gradient(from 0deg,#6366F1,#818CF8,#2563EB,#6366F1)}
.cap-card.d3 .cap-ring{background:conic-gradient(from 0deg,#06B6D4,#22D3EE,#0891B2,#06B6D4)}
.cap-card.d4 .cap-ring{background:conic-gradient(from 0deg,#0891B2,#0E7490,#155E75,#0891B2)}
.ring-num{
  position:relative;z-index:2;font-family:var(--font-display);font-size:28px;font-weight:800;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  letter-spacing:-.02em;
}
.cap-card.d1 .ring-num{background:linear-gradient(120deg,#0891B2,#06B6D4);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cap-card.d2 .ring-num{background:linear-gradient(120deg,#6366F1,#818CF8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cap-card.d3 .ring-num{background:linear-gradient(120deg,#06B6D4,#22D3EE);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cap-card.d4 .ring-num{background:linear-gradient(120deg,#0891B2,#0E7490);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@keyframes spinSlow{to{transform:rotate(360deg)}}
.cap-card h3{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:.06em}
.cap-card .cap-en{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-4);font-weight:700}
.cap-card p{font-size:13px;color:var(--ink-3);line-height:1.7;margin-top:8px}

/* 02 浪知潮服务：4 张 Bento 卡 */
.wxjs-page .svc-bento,.wxkf-page .svc-bento,.ydddz-page .svc-bento,.jjfa-page .svc-bento,.wjtgtc-page .svc-bento,.tgtc-page .svc-bento, .wztc-page .svc-bento, .seotc-page .svc-bento, .geotc-page .svc-bento{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
.wxjs-page .svc-bento .svc-card,.wxkf-page .svc-bento .svc-card,.ydddz-page .svc-bento .svc-card,.jjfa-page .svc-bento .svc-card,.wjtgtc-page .svc-bento .svc-card,.tgtc-page .svc-bento .svc-card, .wztc-page .svc-bento .svc-card, .seotc-page .svc-bento .svc-card, .geotc-page .svc-bento .svc-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 26px 28px;
  position:relative;display:flex;flex-direction:column;gap:14px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s;overflow:hidden;
}
.wxjs-page .svc-bento .svc-card::before,.wxkf-page .svc-bento .svc-card::before,.ydddz-page .svc-bento .svc-card::before,.jjfa-page .svc-bento .svc-card::before,.wjtgtc-page .svc-bento .svc-card::before,.tgtc-page .svc-bento .svc-card::before, .wztc-page .svc-bento .svc-card::before, .seotc-page .svc-bento .svc-card::before, .geotc-page .svc-bento .svc-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad);transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease)}
.wxjs-page .svc-bento .svc-card:hover,.wxkf-page .svc-bento .svc-card:hover,.ydddz-page .svc-bento .svc-card:hover,.jjfa-page .svc-bento .svc-card:hover,.wjtgtc-page .svc-bento .svc-card:hover,.tgtc-page .svc-bento .svc-card:hover, .wztc-page .svc-bento .svc-card:hover, .seotc-page .svc-bento .svc-card:hover, .geotc-page .svc-bento .svc-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:var(--brand-200)}
.wxjs-page .svc-bento .svc-card:hover::before,.wxkf-page .svc-bento .svc-card:hover::before,.ydddz-page .svc-bento .svc-card:hover::before,.jjfa-page .svc-bento .svc-card:hover::before,.wjtgtc-page .svc-bento .svc-card:hover::before,.tgtc-page .svc-bento .svc-card:hover::before, .wztc-page .svc-bento .svc-card:hover::before, .seotc-page .svc-bento .svc-card:hover::before, .geotc-page .svc-bento .svc-card:hover::before{transform:scaleY(1)}
.wxjs-page .svc-bento .svc-card.feature,.wxkf-page .svc-bento .svc-card.feature,.ydddz-page .svc-bento .svc-card.feature,.jjfa-page .svc-bento .svc-card.feature,.wjtgtc-page .svc-bento .svc-card.feature,.tgtc-page .svc-bento .svc-card.feature, .wztc-page .svc-bento .svc-card.feature, .seotc-page .svc-bento .svc-card.feature, .geotc-page .svc-bento .svc-card.feature{
  background:linear-gradient(150deg,#0B1B3F 0%,#16357F 55%,#0891B2 100%);color:#fff;border-color:transparent;
  box-shadow:0 28px 60px -22px rgba(11,27,63,.5);
}
.wxjs-page .svc-bento .svc-card.feature::before,.wxkf-page .svc-bento .svc-card.feature::before,.ydddz-page .svc-bento .svc-card.feature::before,.jjfa-page .svc-bento .svc-card.feature::before,.wjtgtc-page .svc-bento .svc-card.feature::before,.tgtc-page .svc-bento .svc-card.feature::before, .wztc-page .svc-bento .svc-card.feature::before, .seotc-page .svc-bento .svc-card.feature::before, .geotc-page .svc-bento .svc-card.feature::before{display:none}
.wxjs-page .svc-bento .svc-card .ic,.wxkf-page .svc-bento .svc-card .ic,.ydddz-page .svc-bento .svc-card .ic,.jjfa-page .svc-bento .svc-card .ic,.wjtgtc-page .svc-bento .svc-card .ic,.tgtc-page .svc-bento .svc-card .ic, .wztc-page .svc-bento .svc-card .ic, .seotc-page .svc-bento .svc-card .ic, .geotc-page .svc-bento .svc-card .ic{
  width:54px;height:54px;border-radius:15px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--brand-50),#ECFEFF);color:var(--brand-600);
  transition:transform .35s var(--ease);
}
.wxjs-page .svc-bento .svc-card:hover .ic,.wxkf-page .svc-bento .svc-card:hover .ic,.ydddz-page .svc-bento .svc-card:hover .ic,.jjfa-page .svc-bento .svc-card:hover .ic,.wjtgtc-page .svc-bento .svc-card:hover .ic,.tgtc-page .svc-bento .svc-card:hover .ic, .wztc-page .svc-bento .svc-card:hover .ic, .seotc-page .svc-bento .svc-card:hover .ic, .geotc-page .svc-bento .svc-card:hover .ic{transform:scale(1.08) rotate(-5deg);background:var(--grad);color:#fff;box-shadow:var(--shadow-cyan)}
.wxjs-page .svc-bento .svc-card.feature .ic,.wxkf-page .svc-bento .svc-card.feature .ic,.ydddz-page .svc-bento .svc-card.feature .ic,.jjfa-page .svc-bento .svc-card.feature .ic,.wjtgtc-page .svc-bento .svc-card.feature .ic,.tgtc-page .svc-bento .svc-card.feature .ic, .wztc-page .svc-bento .svc-card.feature .ic, .seotc-page .svc-bento .svc-card.feature .ic, .geotc-page .svc-bento .svc-card.feature .ic{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2)}
.wxjs-page .svc-bento .svc-card .ic svg,.wxkf-page .svc-bento .svc-card .ic svg,.ydddz-page .svc-bento .svc-card .ic svg,.jjfa-page .svc-bento .svc-card .ic svg,.wjtgtc-page .svc-bento .svc-card .ic svg,.tgtc-page .svc-bento .svc-card .ic svg, .wztc-page .svc-bento .svc-card .ic svg, .seotc-page .svc-bento .svc-card .ic svg, .geotc-page .svc-bento .svc-card .ic svg{width:26px;height:26px}
.wxjs-page .svc-bento .svc-card h3,.wxkf-page .svc-bento .svc-card h3,.ydddz-page .svc-bento .svc-card h3,.jjfa-page .svc-bento .svc-card h3,.wjtgtc-page .svc-bento .svc-card h3,.tgtc-page .svc-bento .svc-card h3, .wztc-page .svc-bento .svc-card h3, .seotc-page .svc-bento .svc-card h3, .geotc-page .svc-bento .svc-card h3{font-size:19px;font-weight:800;color:var(--ink)}
.wxjs-page .svc-bento .svc-card.feature h3,.wxkf-page .svc-bento .svc-card.feature h3,.ydddz-page .svc-bento .svc-card.feature h3,.jjfa-page .svc-bento .svc-card.feature h3,.wjtgtc-page .svc-bento .svc-card.feature h3,.tgtc-page .svc-bento .svc-card.feature h3, .wztc-page .svc-bento .svc-card.feature h3, .seotc-page .svc-bento .svc-card.feature h3, .geotc-page .svc-bento .svc-card.feature h3{color:#fff}
.wxjs-page .svc-bento .svc-card p,.wxkf-page .svc-bento .svc-card p,.ydddz-page .svc-bento .svc-card p,.jjfa-page .svc-bento .svc-card p,.wjtgtc-page .svc-bento .svc-card p,.tgtc-page .svc-bento .svc-card p, .wztc-page .svc-bento .svc-card p, .seotc-page .svc-bento .svc-card p, .geotc-page .svc-bento .svc-card p{font-size:13.5px;color:var(--ink-3);line-height:1.7;margin:0}
.wxjs-page .svc-bento .svc-card.feature p,.wxkf-page .svc-bento .svc-card.feature p,.ydddz-page .svc-bento .svc-card.feature p,.jjfa-page .svc-bento .svc-card.feature p,.wjtgtc-page .svc-bento .svc-card.feature p,.tgtc-page .svc-bento .svc-card.feature p, .wztc-page .svc-bento .svc-card.feature p, .seotc-page .svc-bento .svc-card.feature p, .geotc-page .svc-bento .svc-card.feature p{color:rgba(226,236,255,.78)}
.wxjs-page .svc-bento .svc-card ul.tags,.wxkf-page .svc-bento .svc-card ul.tags,.ydddz-page .svc-bento .svc-card ul.tags,.jjfa-page .svc-bento .svc-card ul.tags,.wjtgtc-page .svc-bento .svc-card ul.tags,.tgtc-page .svc-bento .svc-card ul.tags, .wztc-page .svc-bento .svc-card ul.tags, .seotc-page .svc-bento .svc-card ul.tags, .geotc-page .svc-bento .svc-card ul.tags{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}
.wxjs-page .svc-bento .svc-card ul.tags li,.wxkf-page .svc-bento .svc-card ul.tags li,.ydddz-page .svc-bento .svc-card ul.tags li,.jjfa-page .svc-bento .svc-card ul.tags li,.wjtgtc-page .svc-bento .svc-card ul.tags li,.tgtc-page .svc-bento .svc-card ul.tags li, .wztc-page .svc-bento .svc-card ul.tags li, .seotc-page .svc-bento .svc-card ul.tags li, .geotc-page .svc-bento .svc-card ul.tags li{font-size:12px;color:var(--ink-2);background:var(--bg-soft);padding:5px 11px;border-radius:999px}
.wxjs-page .svc-bento .svc-card:hover ul.tags li,.wxkf-page .svc-bento .svc-card:hover ul.tags li,.ydddz-page .svc-bento .svc-card:hover ul.tags li,.jjfa-page .svc-bento .svc-card:hover ul.tags li,.wjtgtc-page .svc-bento .svc-card:hover ul.tags li,.tgtc-page .svc-bento .svc-card:hover ul.tags li, .wztc-page .svc-bento .svc-card:hover ul.tags li, .seotc-page .svc-bento .svc-card:hover ul.tags li, .geotc-page .svc-bento .svc-card:hover ul.tags li{background:var(--brand-50);color:var(--brand-700)}
.wxjs-page .svc-bento .svc-card.feature ul.tags li,.wxkf-page .svc-bento .svc-card.feature ul.tags li,.ydddz-page .svc-bento .svc-card.feature ul.tags li,.jjfa-page .svc-bento .svc-card.feature ul.tags li,.wjtgtc-page .svc-bento .svc-card.feature ul.tags li,.tgtc-page .svc-bento .svc-card.feature ul.tags li, .wztc-page .svc-bento .svc-card.feature ul.tags li, .seotc-page .svc-bento .svc-card.feature ul.tags li, .geotc-page .svc-bento .svc-card.feature ul.tags li{background:rgba(255,255,255,.1);color:rgba(226,236,255,.92)}
.wxjs-page .svc-bento .svc-card .service-link,.wxkf-page .svc-bento .svc-card .service-link,.ydddz-page .svc-bento .svc-card .service-link,.jjfa-page .svc-bento .svc-card .service-link,.wjtgtc-page .svc-bento .svc-card .service-link,.tgtc-page .svc-bento .svc-card .service-link, .wztc-page .svc-bento .svc-card .service-link, .seotc-page .svc-bento .svc-card .service-link, .geotc-page .svc-bento .svc-card .service-link{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--brand-600);margin-top:auto}
.wxjs-page .svc-bento .svc-card .service-link svg,.wxkf-page .svc-bento .svc-card .service-link svg,.ydddz-page .svc-bento .svc-card .service-link svg,.jjfa-page .svc-bento .svc-card .service-link svg,.wjtgtc-page .svc-bento .svc-card .service-link svg,.tgtc-page .svc-bento .svc-card .service-link svg, .wztc-page .svc-bento .svc-card .service-link svg, .seotc-page .svc-bento .svc-card .service-link svg, .geotc-page .svc-bento .svc-card .service-link svg{width:15px;height:15px;transition:transform .25s}
.wxjs-page .svc-bento .svc-card:hover .service-link svg,.wxkf-page .svc-bento .svc-card:hover .service-link svg,.ydddz-page .svc-bento .svc-card:hover .service-link svg,.jjfa-page .svc-bento .svc-card:hover .service-link svg,.wjtgtc-page .svc-bento .svc-card:hover .service-link svg,.tgtc-page .svc-bento .svc-card:hover .service-link svg, .wztc-page .svc-bento .svc-card:hover .service-link svg, .seotc-page .svc-bento .svc-card:hover .service-link svg, .geotc-page .svc-bento .svc-card:hover .service-link svg{transform:translateX(5px)}
.wxjs-page .svc-bento .svc-card.feature .service-link,.wxkf-page .svc-bento .svc-card.feature .service-link,.ydddz-page .svc-bento .svc-card.feature .service-link,.jjfa-page .svc-bento .svc-card.feature .service-link,.wjtgtc-page .svc-bento .svc-card.feature .service-link,.tgtc-page .svc-bento .svc-card.feature .service-link, .wztc-page .svc-bento .svc-card.feature .service-link, .seotc-page .svc-bento .svc-card.feature .service-link, .geotc-page .svc-bento .svc-card.feature .service-link{color:#22D3EE}

/* 03 6 优势卡已经在主样式中处理；这里只确保 .advantage-card 内容区显示 */
.wxjs-page .advantage-card,.wxkf-page .advantage-card,.ydddz-page .advantage-card,.jjfa-page .advantage-card,.wjtgtc-page .advantage-card,.tgtc-page .advantage-card, .wztc-page .advantage-card, .seotc-page .advantage-card, .geotc-page .advantage-card{display:flex;flex-direction:column;flex:1;min-height:0}
.wxjs-page .advantage-card p,.wxkf-page .advantage-card p,.ydddz-page .advantage-card p,.jjfa-page .advantage-card p,.wjtgtc-page .advantage-card p,.tgtc-page .advantage-card p, .wztc-page .advantage-card p, .seotc-page .advantage-card p, .geotc-page .advantage-card p{font-size:14px;color:var(--ink-3);line-height:1.75;padding:24px 26px 28px;margin:0;flex:1}

/* 04 9 步流程：3 × 3 网格 */
.step-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch;position:relative}
.step-cell{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:30px 26px 26px;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;overflow:hidden;
}
.step-cell::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad);transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease);
}
.step-cell:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--brand-200)}
.step-cell:hover::before{transform:scaleY(1)}
.step-num{
  font-family:var(--font-display);font-size:48px;font-weight:800;line-height:1;color:transparent;
  -webkit-text-stroke:1.5px rgba(37,99,235,.22);position:absolute;top:18px;right:22px;
  transition:all .35s var(--ease);
}
.step-cell:hover .step-num{-webkit-text-stroke:1.5px var(--brand-500);transform:scale(1.08)}
.step-cell .step-en{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-4);font-weight:700;margin-bottom:10px}
.step-cell h3{font-size:19px;font-weight:800;color:var(--ink);margin-bottom:8px}
.step-cell p{font-size:13.5px;color:var(--ink-3);line-height:1.7;margin:0}

/* 05 7 5 项保障：5 列图标卡 */
.guarantee-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;align-items:stretch}
.guarantee-card{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:30px 22px 26px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s;overflow:hidden;
}
.guarantee-card::after{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.guarantee-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--brand-200)}
.guarantee-card:hover::after{transform:scaleX(1)}
.guarantee-card .ic{
  width:56px;height:56px;border-radius:16px;color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 12px 24px -10px rgba(37,99,235,.5);
  transition:transform .35s var(--ease);
}
.guarantee-card:hover .ic{transform:scale(1.08) rotate(-6deg)}
.guarantee-card .ic svg{width:26px;height:26px}
.guarantee-card h3{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:.06em}
.guarantee-card p{font-size:13px;color:var(--ink-3);line-height:1.7;margin:0}

/* wzjs 响应式 */
@media(max-width:1024px){.wxjs-page .svc-bento,.wxkf-page .svc-bento,.ydddz-page .svc-bento,.jjfa-page .svc-bento,.wjtgtc-page .svc-bento,.tgtc-page .svc-bento, .wztc-page .svc-bento, .seotc-page .svc-bento, .geotc-page .svc-bento{grid-template-columns:1fr 1fr}
  .capability-grid{grid-template-columns:repeat(3,1fr)}
  .guarantee-grid{grid-template-columns:repeat(3,1fr)}
  .step-flow{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){.wxjs-page .svc-bento,.wxkf-page .svc-bento,.ydddz-page .svc-bento,.jjfa-page .svc-bento,.wjtgtc-page .svc-bento,.tgtc-page .svc-bento, .wztc-page .svc-bento, .seotc-page .svc-bento, .geotc-page .svc-bento{grid-template-columns:1fr}
  .capability-grid{grid-template-columns:repeat(2,1fr)}
  .guarantee-grid{grid-template-columns:repeat(2,1fr)}
  .step-flow{grid-template-columns:1fr}
}
@media(max-width:560px){
  .capability-grid{grid-template-columns:1fr}
  .guarantee-grid{grid-template-columns:1fr}
  .cap-card{padding:26px 18px 24px}
  .guarantee-card{padding:26px 18px 22px}
}

/* ============ ydddz-page 单独覆盖：commit-badge 配色更协调 ============ */
.ydddz-page .commit-badge{
  background:linear-gradient(120deg,rgba(34,211,238,.18),rgba(99,102,241,.14));
  border-color:rgba(34,211,238,.42);color:#67E8F9;
}

/* ============ jjfa-page 单独覆盖：方案列表页样式 ============ */
/* 通用信息列表容器 */
.jjfa-page .info-list{
  display:flex;flex-direction:column;gap:14px;
}
.jjfa-page .info-item{
  display:grid;grid-template-columns:96px 56px 1fr 40px;gap:20px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:22px 24px;text-decoration:none;color:inherit;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
  position:relative;overflow:hidden;
}
.jjfa-page .info-item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad);
  transform:scaleY(0);transform-origin:top;transition:transform .3s var(--ease);
}
.jjfa-page .info-item:hover{transform:translateX(4px);box-shadow:var(--shadow-md);border-color:var(--brand-200)}
.jjfa-page .info-item:hover::before{transform:scaleY(1)}

/* 左侧大序号 */
.jjfa-page .info-item:not(.info-item-figure) .info-num{
  font-size:42px;font-weight:900;line-height:1;letter-spacing:-.03em;
  background:linear-gradient(135deg,#2563EB 0%,#06B6D4 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-align:center;
}
.jjfa-page .info-item-thin:not(.info-item-figure) .info-num{font-size:34px}

/* 图标方块 */
.jjfa-page .info-item:not(.info-item-figure) .info-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:14px;color:#fff;flex-shrink:0;
  box-shadow:0 6px 18px -6px rgba(37,99,235,.42);
}
.jjfa-page .info-item:not(.info-item-figure) .info-ic svg{width:28px;height:28px}

/* 中间主内容 */
.jjfa-page .info-item .info-main{
  display:flex;flex-direction:column;gap:6px;min-width:0;
}
.jjfa-page .info-item .info-head{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.jjfa-page .info-item .info-label{
  display:inline-block;font-size:11.5px;font-weight:700;color:#fff;
  background:linear-gradient(120deg,#2563EB,#06B6D4);
  padding:4px 10px;border-radius:6px;letter-spacing:.04em;flex-shrink:0;
}
.jjfa-page .info-item .info-head h3{
  font-size:19px;font-weight:800;color:var(--ink);margin:0;
  letter-spacing:-.01em;
}
.jjfa-page .info-item .info-main p{
  font-size:13.5px;color:var(--ink-3);line-height:1.7;margin:4px 0 0;
}
.jjfa-page .info-item .info-tags{
  display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0;list-style:none;
}
.jjfa-page .info-item .info-tags li{
  font-size:12px;color:var(--ink-2);background:var(--bg-soft);
  padding:4px 10px;border-radius:999px;
  transition:background .25s,color .25s;
}
.jjfa-page .info-item:hover .info-tags li{background:var(--brand-50);color:var(--brand-700)}

/* 右侧跳转箭头 */
.jjfa-page .info-item:not(.info-item-figure) .info-go{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  background:var(--bg-soft);color:var(--ink-2);flex-shrink:0;
  transition:background .25s,color .25s,transform .25s;
}
.jjfa-page .info-item:not(.info-item-figure) .info-go svg{width:18px;height:18px}
.jjfa-page .info-item:not(.info-item-figure):hover .info-go{background:var(--brand-600);color:#fff;transform:translateX(4px)}

/* 简化版：thin（无图标无 tags，只有序号+标题+简介） */
.jjfa-page .info-item-thin{
  grid-template-columns:80px 1fr;
  padding:18px 24px;
}
.jjfa-page .info-item-thin .info-main p{font-size:13.5px;color:var(--ink-3);line-height:1.7;margin:4px 0 0}

/* 案例版：左侧是图片缩略图 */
.jjfa-page .info-list-case .info-item-case{
  grid-template-columns:96px 120px 1fr 40px;
}
.jjfa-page .info-item:not(.info-item-figure) .case-thumb{
  display:inline-block;width:120px;height:80px;border-radius:10px;overflow:hidden;
  background:var(--bg-soft);flex-shrink:0;
}
.jjfa-page .info-item:not(.info-item-figure) .case-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s var(--ease)}
.jjfa-page .info-item:not(.info-item-figure):hover .case-thumb img{transform:scale(1.06)}
.jjfa-page .info-item:not(.info-item-figure) .case-meta{
  font-size:12px;color:var(--ink-2);background:var(--bg-soft);
  padding:3px 9px;border-radius:6px;flex-shrink:0;
}

/* 响应式 */
@media(max-width:1024px){
  .jjfa-page .info-item:not(.info-item-figure){grid-template-columns:72px 48px 1fr 40px;gap:14px;padding:18px 20px}
  .jjfa-page .info-item:not(.info-item-figure) .info-num{font-size:34px}
  .jjfa-page .info-item:not(.info-item-figure) .info-ic{width:48px;height:48px;border-radius:12px}
  .jjfa-page .info-item:not(.info-item-figure) .info-ic svg{width:24px;height:24px}
  .jjfa-page .info-item .info-head h3{font-size:17px}
  .jjfa-page .info-item:not(.info-item-figure) .case-thumb{width:96px;height:64px}
}
@media(max-width:640px){
  .jjfa-page .info-item:not(.info-item-figure){
    grid-template-columns:48px 1fr;gap:12px;padding:16px 16px;
  }
  .jjfa-page .info-item:not(.info-item-figure) .info-ic,.jjfa-page .info-item:not(.info-item-figure) .info-go,.jjfa-page .info-item:not(.info-item-figure) .case-thumb, .wztc-page .info-item:not, .seotc-page .info-item:not(.info-item-figure) .case-thumb{display:none}
  .jjfa-page .info-item:not(.info-item-figure) .info-num{font-size:26px}
  .jjfa-page .info-item .info-head h3{font-size:16px}
  .jjfa-page .info-item-thin{grid-template-columns:48px 1fr;padding:14px 16px}
}

/* ============ jjfa-page footer 列数 ============ */
/* ⚠️ 2026-09-23 停用「3 列覆盖」：那是旧 footer（3 列）时代的遗留。全站 footer 已统一为
   4 列（品牌 / 全部服务 / 套餐报价 / 联系我们），保留 1.6fr 1fr 1.2fr 会把第 4 列
   「联系我们」挤到第二排，令 jjfa、170 两页 footer 比全站高 238px。现统一走全局 4 列。 */

/* ============ jjfa-page 图文列表样式 ============ */
/* 列表容器：去掉 gap，由 .info-item-figure 自带 padding 形成间距 */
.jjfa-page .info-list-figure{gap:18px}

/* 单条图文 */
.jjfa-page .info-item-figure{
  display:grid;
  grid-template-columns:340px 1fr;
  gap:32px;
  padding:20px;
  align-items:stretch;
}
/* hover 默认样式来自 .info-item，特化图文版：图片浮起更明显 */
.jjfa-page .info-item-figure:hover{transform:translateY(-6px)}

/* 图片块 */
.jjfa-page .info-item-figure .sol-figure{
  position:relative;height:200px;border-radius:12px;overflow:hidden;
  box-shadow:0 10px 30px -10px rgba(11,27,63,.25);
}
.jjfa-page .info-item-figure .sol-figure img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s var(--ease);
}
.jjfa-page .info-item-figure:hover .sol-figure img{transform:scale(1.07)}
/* 图片底部柔和暗色，保证白底序号水印清晰 */
.jjfa-page .info-item-figure .sol-figure::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,27,63,0) 55%,rgba(11,27,63,.42) 100%);
  pointer-events:none;
}
/* 序号水印：图片左上角 36×36 圆 + 数字 */
.jjfa-page .info-item-figure .sol-num{
  position:absolute;left:14px;top:14px;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;height:44px;padding:0 12px;border-radius:999px;
  background:linear-gradient(135deg,#2563EB 0%,#06B6D4 100%);
  color:#fff;font-size:14px;font-weight:900;letter-spacing:.06em;
  box-shadow:0 6px 18px -4px rgba(37,99,235,.5),inset 0 1px 0 rgba(255,255,255,.25);
}

/* 主内容区 */
.jjfa-page .info-item-figure .info-main{
  display:flex;flex-direction:column;justify-content:center;
  padding:6px 8px 6px 0;min-width:0;
}
.jjfa-page .info-item-figure .info-main .info-head{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:10px;
}
.jjfa-page .info-item-figure .info-main h3{
  font-size:22px;font-weight:800;color:var(--ink);margin:0;line-height:1.25;
  letter-spacing:-.01em;
}
.jjfa-page .info-item-figure .info-main p{
  font-size:14px;color:var(--ink-3);line-height:1.75;margin:0 0 14px;
}
/* tags 在图文版里更紧凑 */
.jjfa-page .info-item-figure .info-main .info-tags{
  display:flex;flex-wrap:wrap;gap:7px;margin:0 0 18px;padding:0;list-style:none;
}
.jjfa-page .info-item-figure .info-main .info-tags li{
  font-size:12px;color:var(--ink-2);background:var(--bg-soft);
  padding:5px 11px;border-radius:999px;
  transition:background .25s,color .25s;
}
.jjfa-page .info-item-figure:hover .info-main .info-tags li{background:var(--brand-50);color:var(--brand-700)}

/* 详情按钮：变成主 CTA 风 */
.jjfa-page .info-item-figure .info-main .info-go{
  appearance:none;-webkit-appearance:none;  /* iOS/Safari */
  border:0;outline:none;cursor:pointer;      /* button reset */
  font-family:inherit;                         /* 继承父字体 */
  /* 关键：覆盖老规则 .info-item .info-go 的 40x40 圆形锁死尺寸 */
  width:auto;height:auto;min-width:0;min-height:0;
  white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;align-self:flex-start;
  padding:10px 22px;border-radius:10px;
  background:linear-gradient(120deg,var(--brand-600),var(--brand-500));
  color:#fff;font-size:13.5px;font-weight:700;line-height:1;
  box-shadow:0 6px 18px -6px rgba(37,99,235,.45);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;
}
.jjfa-page .info-item-figure .info-main .info-go svg{
  width:15px;height:15px;transition:transform .25s var(--ease);
}
.jjfa-page .info-item-figure .info-main .info-go:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px -6px rgba(37,99,235,.55);
}
.jjfa-page .info-item-figure .info-main .info-go:hover svg{transform:translateX(4px)}

/* 响应式：1024 → 图片缩 260、间距收紧；640 → 图片置顶堆叠 */
@media(max-width:1024px){
  .jjfa-page .info-item-figure{grid-template-columns:260px 1fr;gap:22px;padding:18px}
  .jjfa-page .info-item-figure .sol-figure{height:170px}
  .jjfa-page .info-item-figure .info-main h3{font-size:19px}
  .jjfa-page .info-item-figure .info-main p{font-size:13.5px}
}
@media(max-width:640px){
  .jjfa-page .info-item-figure{grid-template-columns:1fr;gap:14px;padding:14px}
  .jjfa-page .info-item-figure .sol-figure{height:200px}
  .jjfa-page .info-item-figure .info-main{padding-right:0}
  .jjfa-page .info-item-figure .info-main h3{font-size:20px}
}

.jjfa-page .info-item-figure:hover .info-main .info-go{transform:none}
.jjfa-page .info-item-figure:hover .info-main .info-go:hover{transform:translateY(-2px)}
.jjfa-page .info-item-figure:hover .info-main .info-go:hover svg{transform:translateX(4px)}
/* 移动端：图文版按钮保持显示（避免被列表版 display:none 规则波及） */
@media(max-width:640px){
  .jjfa-page .info-item-figure .info-main .info-go{display:inline-flex}
}

/* ============ jjfa-page：Hero H1 长句允许自动折行（防溢出挤压右侧卡片） ============ */
.jjfa-page .hero h1{white-space:normal}

/* ============ solution-detail：方案详情内页样式（仅 170.html 等方案内页生效） ============ */
/* 通过双 class 选择器 .jjfa-page.solution-detail 同时匹配才能生效，列表页不受影响 */

/* --- Hero 面包屑 --- */
.jjfa-page.solution-detail .breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-3);
  margin-bottom:18px;
}
/* 分隔符改由 ::before 挂在每一项上自带的 —— 原来是独立 span，
   窄屏换行时会被孤立在行尾（「… 整合营销服务 ›」然后换行）*/
.jjfa-page.solution-detail .breadcrumb > * + *::before{
  content:"›";margin-right:4px;color:rgba(255,255,255,.25);font-size:14px;font-weight:400;
}
.jjfa-page.solution-detail .breadcrumb a{white-space:nowrap;
  color:var(--ink-3);text-decoration:none;transition:color .2s;
}
.jjfa-page.solution-detail .breadcrumb a:hover{color:var(--brand-600)}
.jjfa-page.solution-detail .breadcrumb span:not(.bc-current){color:rgba(255,255,255,.25);font-size:14px}
.jjfa-page.solution-detail .breadcrumb .bc-current{color:#67E8F9;font-weight:600;white-space:nowrap}

/* --- Hero 精简：标题稍小，让出空间给下方大段内容 --- */
.jjfa-page.solution-detail .hero h1{font-size:clamp(26px,3.4vw,50px);margin-bottom:18px}

/* --- Hero 右侧模拟电商交易链路 --- */
.jjfa-page.solution-detail .detail-hero-card .tag{
  background:linear-gradient(120deg,#0B1B3F,#1E3A8A);
}
.jjfa-page.solution-detail .detail-mock{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:14px;margin:14px 0;
}
.jjfa-page.solution-detail .dm-bar{
  display:flex;gap:6px;margin-bottom:12px;
}
.jjfa-page.solution-detail .dm-bar i{
  width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.16);
}
.jjfa-page.solution-detail .dm-bar i:nth-child(1){background:#FF5F57}
.jjfa-page.solution-detail .dm-bar i:nth-child(2){background:#FEBC2E}
.jjfa-page.solution-detail .dm-bar i:nth-child(3){background:#28C840}
.jjfa-page.solution-detail .dm-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px;
}
.jjfa-page.solution-detail .dm-card{
  position:relative;height:62px;border-radius:10px;padding:10px 12px;
  display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(135deg,rgba(37,99,235,.2),rgba(34,211,238,.18));
  border:1px solid rgba(34,211,238,.3);
  color:#fff;
}
.jjfa-page.solution-detail .dm-card i{
  width:22px;height:22px;border-radius:6px;background:rgba(255,255,255,.18);
}
.jjfa-page.solution-detail .dm-card b{font-size:14px;font-weight:700;letter-spacing:.02em}
.jjfa-page.solution-detail .dm-card-a{background:linear-gradient(135deg,#1E3A8A,#2563EB)}
.jjfa-page.solution-detail .dm-card-b{background:linear-gradient(135deg,#2563EB,#06B6D4)}
.jjfa-page.solution-detail .dm-card-c{background:linear-gradient(135deg,#06B6D4,#22D3EE)}
.jjfa-page.solution-detail .dm-card-d{background:linear-gradient(135deg,#22D3EE,#67E8F9);color:#0B1B3F}
.jjfa-page.solution-detail .dm-card-d b{color:#0B1B3F}
.jjfa-page.solution-detail .dm-stat{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 12px;background:rgba(34,211,238,.1);border-radius:10px;
  color:#A5B4FC;font-size:12px;
}
.jjfa-page.solution-detail .dm-stat strong{
  font-size:18px;font-weight:900;color:#67E8F9;letter-spacing:-.01em;
}
.jjfa-page.solution-detail .hero-card-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:8px;
}
.jjfa-page.solution-detail .hero-card-list li{
  display:flex;align-items:center;gap:9px;color:#DBEAFE;
  font-size:13px;font-weight:500;
}
.jjfa-page.solution-detail .hero-card-list li i{
  flex-shrink:0;width:18px;height:18px;border-radius:50%;
  background:linear-gradient(135deg,#22D3EE,#67E8F9);
  position:relative;
}
.jjfa-page.solution-detail .hero-card-list li i::after{
  content:"";position:absolute;left:6px;top:4px;width:6px;height:9px;
  border:solid #0B1B3F;border-width:0 2px 2px 0;transform:rotate(45deg);
}

/* --- 01 概述：左右布局 --- */
.jjfa-page.solution-detail .overview-grid{
  display:grid;grid-template-columns:1.4fr .9fr;gap:48px;align-items:start;
}
.jjfa-page.solution-detail .overview-text p{
  font-size:15px;line-height:1.85;color:var(--ink-2);margin:0 0 16px;
}
.jjfa-page.solution-detail .overview-text p strong{color:var(--brand-700);font-weight:700}
.jjfa-page.solution-detail .overview-points{
  list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;
}
.jjfa-page.solution-detail .overview-points li{
  display:flex;gap:18px;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:18px 22px;
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.jjfa-page.solution-detail .overview-points li:hover{
  transform:translateX(4px);border-color:var(--brand-300);
  box-shadow:0 8px 24px -10px rgba(37,99,235,.25);
}
.jjfa-page.solution-detail .overview-points .op-num{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:10px;
  background:linear-gradient(135deg,#2563EB,#22D3EE);color:#fff;
  font-size:15px;font-weight:900;letter-spacing:.04em;
}
.jjfa-page.solution-detail .overview-points h4{
  font-size:16px;font-weight:800;color:var(--ink);margin:0 0 6px;
}
.jjfa-page.solution-detail .overview-points p{
  font-size:13.5px;color:var(--ink-3);line-height:1.7;margin:0;
}
.jjfa-page.solution-detail .overview-side{
  position:sticky;top:88px;display:flex;flex-direction:column;gap:18px;
}
.jjfa-page.solution-detail .overview-poster{
  position:relative;border-radius:20px;overflow:hidden;
  box-shadow:0 24px 60px -20px rgba(11,27,63,.3);
}
.jjfa-page.solution-detail .overview-poster img{
  display:block;width:100%;height:auto;
  transition:transform .8s var(--ease);
}
.jjfa-page.solution-detail .overview-poster:hover img{transform:scale(1.05)}
.jjfa-page.solution-detail .overview-poster .op-badge{
  position:absolute;left:14px;top:14px;
  background:rgba(11,27,63,.78);backdrop-filter:blur(8px);
  color:#67E8F9;padding:6px 14px;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.05em;
}
.jjfa-page.solution-detail .overview-meta{
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 22px;
}
.jjfa-page.solution-detail .om-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:11px 0;border-bottom:1px dashed var(--line);
  font-size:13.5px;
}
.jjfa-page.solution-detail .om-row:last-child{border-bottom:0}
.jjfa-page.solution-detail .om-row span{color:var(--ink-3)}
.jjfa-page.solution-detail .om-row strong{color:var(--ink);font-weight:700}

/* --- 02 适用对象：4 列卡片 --- */
.jjfa-page.solution-detail .suitable-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
.jjfa-page.solution-detail .suit-card{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:28px 24px 24px;transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.jjfa-page.solution-detail .suit-card:hover{
  transform:translateY(-6px);box-shadow:0 18px 40px -16px rgba(37,99,235,.25);
}
.jjfa-page.solution-detail .suit-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:14px;color:#fff;margin-bottom:18px;
  box-shadow:0 8px 20px -8px currentColor;
}
.jjfa-page.solution-detail .suit-ic svg{width:28px;height:28px}
.jjfa-page.solution-detail .suit-ic.ic-1{background:linear-gradient(135deg,#2563EB,#06B6D4);color:#2563EB}
.jjfa-page.solution-detail .suit-ic.ic-2{background:linear-gradient(135deg,#7C3AED,#EC4899);color:#7C3AED}
.jjfa-page.solution-detail .suit-ic.ic-3{background:linear-gradient(135deg,#F59E0B,#EF4444);color:#F59E0B}
.jjfa-page.solution-detail .suit-ic.ic-4{background:linear-gradient(135deg,#10B981,#22D3EE);color:#10B981}
.jjfa-page.solution-detail .suit-card h3{
  font-size:19px;font-weight:800;color:var(--ink);margin:0 0 8px;letter-spacing:-.01em;
}
.jjfa-page.solution-detail .suit-card p{
  font-size:13.5px;color:var(--ink-3);line-height:1.7;margin:0 0 14px;
}
.jjfa-page.solution-detail .suit-card ul{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;
}
.jjfa-page.solution-detail .suit-card ul li{
  font-size:12.5px;color:var(--ink-2);padding-left:18px;position:relative;
}
.jjfa-page.solution-detail .suit-card ul li::before{
  content:"";position:absolute;left:0;top:7px;width:8px;height:8px;
  border-radius:50%;background:linear-gradient(135deg,#2563EB,#22D3EE);
}

/* --- 03 核心策略：6 张卡 --- */
.jjfa-page.solution-detail .strategy-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.jjfa-page.solution-detail .str-card{
  position:relative;background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:32px 26px 26px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.jjfa-page.solution-detail .str-card:hover{
  transform:translateY(-6px);box-shadow:0 18px 40px -16px rgba(37,99,235,.25);
}
.jjfa-page.solution-detail .str-card .str-num{
  display:inline-block;font-size:32px;font-weight:900;line-height:1;
  background:linear-gradient(135deg,#DBEAFE 0%,#CFFAFE 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:14px;letter-spacing:-.04em;
}
.jjfa-page.solution-detail .str-card h3{
  font-size:20px;font-weight:800;color:var(--ink);margin:0 0 10px;
}
.jjfa-page.solution-detail .str-card p{
  font-size:13.5px;color:var(--ink-3);line-height:1.75;margin:0 0 18px;
}
.jjfa-page.solution-detail .str-meta{
  list-style:none;margin:0;padding:14px 0 0;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:8px;
}
.jjfa-page.solution-detail .str-meta li{
  display:flex;justify-content:space-between;font-size:13px;
}
.jjfa-page.solution-detail .str-meta li span{color:var(--ink-3)}
.jjfa-page.solution-detail .str-meta li strong{
  color:var(--brand-700);font-weight:700;
}

/* --- 04 服务清单：双列 === */
.jjfa-page.solution-detail .servlist-grid{max-width:1180px;margin:0 auto}
.jjfa-page.solution-detail .servlist{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
}
.jjfa-page.solution-detail .servlist li{
  display:flex;gap:14px;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:18px 20px;
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.jjfa-page.solution-detail .servlist li:hover{
  transform:translateX(4px);border-color:var(--brand-300);
  box-shadow:0 8px 24px -10px rgba(37,99,235,.25);
}
.jjfa-page.solution-detail .servlist li .sl-ic{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:11px;
  background:linear-gradient(135deg,#DBEAFE,#CFFAFE);
  color:#2563EB;
}
.jjfa-page.solution-detail .servlist li .sl-ic svg{width:22px;height:22px}
.jjfa-page.solution-detail .servlist li strong{
  display:block;font-size:15px;font-weight:800;color:var(--ink);margin-bottom:4px;
}
.jjfa-page.solution-detail .servlist li p{
  margin:0;font-size:12.5px;color:var(--ink-3);line-height:1.6;
}

/* --- 05 实施步骤：时间轴 --- */
.jjfa-page.solution-detail .timeline{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:18px;
  max-width:980px;margin:0 auto;position:relative;
}
.jjfa-page.solution-detail .timeline::before{
  content:"";position:absolute;left:160px;top:24px;bottom:24px;width:2px;z-index:-1;
  background:linear-gradient(180deg,transparent,rgba(37,99,235,.25) 8%,rgba(34,211,238,.25) 92%,transparent);
}
.jjfa-page.solution-detail .tl-item{
  display:grid;grid-template-columns:110px 60px 1fr;gap:20px;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:22px 26px;position:relative;
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.jjfa-page.solution-detail .tl-item:hover{
  transform:translateX(4px);border-color:var(--brand-300);
  box-shadow:0 10px 30px -10px rgba(37,99,235,.25);
}
.jjfa-page.solution-detail .tl-time{
  font-size:13px;font-weight:700;color:var(--brand-600);
  letter-spacing:.04em;align-self:center;
}
.jjfa-page.solution-detail .tl-marker{
  position:relative;align-self:center;justify-self:center;
  width:44px;height:44px;border-radius:50%;
  background:#fff;border:2px solid var(--brand-200);
  display:flex;align-items:center;justify-content:center;
  z-index:1;
}
.jjfa-page.solution-detail .tl-marker span{
  font-size:13px;font-weight:900;color:var(--brand-600);letter-spacing:.04em;
}
.jjfa-page.solution-detail .tl-item:hover .tl-marker{
  background:linear-gradient(135deg,#2563EB,#22D3EE);border-color:transparent;
}
.jjfa-page.solution-detail .tl-item:hover .tl-marker span{color:#fff}
.jjfa-page.solution-detail .tl-body h3{
  font-size:17px;font-weight:800;color:var(--ink);margin:0 0 8px;
}
.jjfa-page.solution-detail .tl-body p{
  font-size:13.5px;color:var(--ink-3);line-height:1.75;margin:0 0 10px;
}
.jjfa-page.solution-detail .tl-out{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;color:var(--brand-700);font-weight:600;
  background:var(--brand-50);padding:5px 12px;border-radius:999px;
}

/* --- 06 案例成果：3 张横向大卡 --- */
.jjfa-page.solution-detail .case-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.jjfa-page.solution-detail .case-big{
  background:#fff;border:1px solid var(--line);border-radius:20px;
  overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease);
  display:flex;flex-direction:column;
}
.jjfa-page.solution-detail .case-big:hover{
  transform:translateY(-6px);box-shadow:0 20px 50px -16px rgba(11,27,63,.3);
}
.jjfa-page.solution-detail .cb-img{
  position:relative;aspect-ratio:16/10;overflow:hidden;
}
.jjfa-page.solution-detail .cb-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease);
}
.jjfa-page.solution-detail .case-big:hover .cb-img img{transform:scale(1.06)}
.jjfa-page.solution-detail .cb-body{padding:22px 24px 24px}
.jjfa-page.solution-detail .cb-tag{
  display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  color:var(--brand-700);background:var(--brand-50);
  padding:4px 11px;border-radius:999px;margin-bottom:10px;
}
.jjfa-page.solution-detail .cb-body h3{
  font-size:19px;font-weight:800;color:var(--ink);margin:0 0 8px;
}
.jjfa-page.solution-detail .cb-body p{
  font-size:13px;color:var(--ink-3);line-height:1.7;margin:0 0 18px;
}
.jjfa-page.solution-detail .cb-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  padding-top:14px;border-top:1px solid var(--line);
}
.jjfa-page.solution-detail .cb-stats div{text-align:center}
.jjfa-page.solution-detail .cb-stats strong{
  display:block;font-size:18px;font-weight:900;color:var(--brand-700);
  line-height:1.2;letter-spacing:-.01em;
}
.jjfa-page.solution-detail .cb-stats span{
  display:block;font-size:11.5px;color:var(--ink-3);margin-top:3px;letter-spacing:.02em;
}

/* --- 07 套餐：3 档卡片 --- */
.jjfa-page.solution-detail .price-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;
}
.jjfa-page.solution-detail .price-card{
  position:relative;background:#fff;border:1px solid var(--line);
  border-radius:20px;padding:36px 30px 30px;
  display:flex;flex-direction:column;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.jjfa-page.solution-detail .price-card:hover{
  transform:translateY(-6px);box-shadow:0 18px 40px -16px rgba(37,99,235,.25);
}
.jjfa-page.solution-detail .price-card.pc-featured{
  border:2px solid var(--brand-500);
  background:linear-gradient(180deg,#fff 0%,#EFF6FF 100%);
  box-shadow:0 18px 50px -16px rgba(37,99,235,.35);
  transform:translateY(-8px);
}
.jjfa-page.solution-detail .price-card.pc-featured:hover{transform:translateY(-14px)}
.jjfa-page.solution-detail .price-card .pc-tier{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;
  color:var(--brand-700);background:var(--brand-50);
  padding:5px 14px;border-radius:999px;margin-bottom:14px;align-self:flex-start;
}
.jjfa-page.solution-detail .price-card .pc-flag{
  position:absolute;right:-1px;top:-1px;
  background:linear-gradient(120deg,#F59E0B,#EF4444);
  color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;
  padding:6px 14px;border-radius:0 18px 0 18px;
}
.jjfa-page.solution-detail .price-card h3{
  font-size:22px;font-weight:800;color:var(--ink);margin:0 0 14px;letter-spacing:-.01em;
}
.jjfa-page.solution-detail .pc-price{
  display:flex;align-items:baseline;gap:4px;margin-bottom:8px;
}
.jjfa-page.solution-detail .pc-price span{
  font-size:18px;font-weight:700;color:var(--brand-700);
}
.jjfa-page.solution-detail .pc-price strong{
  font-size:38px;font-weight:900;color:var(--ink);letter-spacing:-.02em;line-height:1;
}
.jjfa-page.solution-detail .pc-price em{
  font-style:normal;font-size:13px;color:var(--ink-3);margin-left:2px;
}
.jjfa-page.solution-detail .pc-sub{
  font-size:13px;color:var(--ink-3);margin:0 0 22px;line-height:1.6;
  padding-bottom:18px;border-bottom:1px dashed var(--line);
}
.jjfa-page.solution-detail .pc-list{
  list-style:none;margin:0 0 24px;padding:0;
  display:flex;flex-direction:column;gap:10px;flex:1;
}
.jjfa-page.solution-detail .pc-list li{
  display:flex;align-items:flex-start;gap:9px;
  font-size:13px;color:var(--ink-2);line-height:1.6;
}
.jjfa-page.solution-detail .pc-list li i{
  flex-shrink:0;display:inline-block;width:18px;height:18px;
  border-radius:50%;background:linear-gradient(135deg,#2563EB,#22D3EE);
  margin-top:2px;position:relative;
}
.jjfa-page.solution-detail .pc-list li i::after{
  content:"";position:absolute;left:6px;top:4px;width:6px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.jjfa-page.solution-detail .price-card .btn{
  width:100%;justify-content:center;
}

/* --- 08 承诺：4 张卡 --- */
.jjfa-page.solution-detail .promise-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.jjfa-page.solution-detail .pm-card{
  position:relative;background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:30px 26px 26px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.jjfa-page.solution-detail .pm-card:hover{
  transform:translateY(-6px);box-shadow:0 16px 36px -14px rgba(37,99,235,.25);
}
.jjfa-page.solution-detail .pm-num{
  display:inline-block;font-size:13px;font-weight:900;color:#fff;
  background:linear-gradient(120deg,#2563EB,#06B6D4);
  padding:5px 13px;border-radius:8px;margin-bottom:16px;letter-spacing:.06em;
}
.jjfa-page.solution-detail .pm-card h3{
  font-size:18px;font-weight:800;color:var(--ink);margin:0 0 10px;
}
.jjfa-page.solution-detail .pm-card p{
  font-size:13.5px;color:var(--ink-3);line-height:1.75;margin:0;
}

/* --- 09 相关方案：3 张横卡 --- */
.jjfa-page.solution-detail .related-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
.jjfa-page.solution-detail .rel-card{
  position:relative;display:flex;flex-direction:column;gap:12px;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:26px 26px 22px;text-decoration:none;color:inherit;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
  overflow:hidden;
}
.jjfa-page.solution-detail .rel-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,#2563EB,#22D3EE);
  transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease);
}
.jjfa-page.solution-detail .rel-card:hover{
  transform:translateY(-6px);box-shadow:0 18px 40px -16px rgba(37,99,235,.25);
  border-color:var(--brand-200);
}
.jjfa-page.solution-detail .rel-card:hover::before{transform:scaleY(1)}
.jjfa-page.solution-detail .rel-num{
  display:inline-block;width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,#DBEAFE,#CFFAFE);
  color:var(--brand-700);font-size:14px;font-weight:900;
  display:flex;align-items:center;justify-content:center;letter-spacing:.04em;
  align-self:flex-start;
}
.jjfa-page.solution-detail .rel-card h3{
  font-size:18px;font-weight:800;color:var(--ink);margin:0;
}
.jjfa-page.solution-detail .rel-card p{
  font-size:13px;color:var(--ink-3);line-height:1.7;margin:0;flex:1;
}
.jjfa-page.solution-detail .rel-go{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  font-size:13px;font-weight:700;color:var(--brand-600);
  margin-top:auto;padding-top:6px;
}
.jjfa-page.solution-detail .rel-go svg{width:14px;height:14px;transition:transform .25s}
.jjfa-page.solution-detail .rel-card:hover .rel-go svg{transform:translateX(4px)}

/* --- 响应式 --- */
@media(max-width:1024px){
  .jjfa-page.solution-detail .overview-grid{grid-template-columns:1fr;gap:36px}
  .jjfa-page.solution-detail .overview-side{position:static}
  .jjfa-page.solution-detail .suitable-grid{grid-template-columns:repeat(2,1fr)}
  .jjfa-page.solution-detail .strategy-grid{grid-template-columns:repeat(2,1fr)}
  .jjfa-page.solution-detail .case-row{grid-template-columns:1fr}
  .jjfa-page.solution-detail .price-grid{grid-template-columns:1fr}
  .jjfa-page.solution-detail .price-card.pc-featured{transform:none}
  .jjfa-page.solution-detail .price-card.pc-featured:hover{transform:translateY(-6px)}
  .jjfa-page.solution-detail .promise-grid{grid-template-columns:repeat(2,1fr)}
  .jjfa-page.solution-detail .related-grid{grid-template-columns:1fr}
  .jjfa-page.solution-detail .servlist{grid-template-columns:1fr}
  .jjfa-page.solution-detail .timeline::before{left:130px}
  .jjfa-page.solution-detail .tl-item{grid-template-columns:80px 60px 1fr}
}
@media(max-width:640px){
  .jjfa-page.solution-detail .suitable-grid{grid-template-columns:1fr}
  .jjfa-page.solution-detail .strategy-grid{grid-template-columns:1fr}
  .jjfa-page.solution-detail .promise-grid{grid-template-columns:1fr}
  .jjfa-page.solution-detail .hero h1{font-size:30px}
  .jjfa-page.solution-detail .timeline::before{display:none}
  .jjfa-page.solution-detail .tl-item{
    grid-template-columns:1fr;gap:10px;padding:18px 18px;
  }
  .jjfa-page.solution-detail .tl-marker{justify-self:start}
  .jjfa-page.solution-detail .dm-grid{grid-template-columns:1fr 1fr}
}

/* ============ solution-detail Hero H1 防溢出兜底 ============ */
.jjfa-page.solution-detail .hero h1{white-space:normal}

/* ============ wjtgtc：建站+推广套餐页 专属样式 ============ */
/* 命名空间：.wjtgtc-page 隔离，与 wzjs/wxkf/ydddz/jjfa 共用样式不冲突 */

/* ---- 01 6 档套餐 grid（3 列 × 2 行，中间档推荐高亮） ---- */
.wjtgtc-page .price-grid-6,.tgtc-page .price-grid-6, .wztc-page .price-grid-6, .seotc-page .price-grid-6, .geotc-page .price-grid-6{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch;max-width:1200px;margin:0 auto}
.wjtgtc-page .price-card6,.tgtc-page .price-card6, .wztc-page .price-card6, .seotc-page .price-card6, .geotc-page .price-card6{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:30px 26px 28px;display:flex;flex-direction:column;gap:14px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s;overflow:hidden;
}
.wjtgtc-page .price-card6::before,.tgtc-page .price-card6::before, .wztc-page .price-card6::before, .seotc-page .price-card6::before, .geotc-page .price-card6::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad);
  transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease);
}
.wjtgtc-page .price-card6:hover,.tgtc-page .price-card6:hover, .wztc-page .price-card6:hover, .seotc-page .price-card6:hover, .geotc-page .price-card6:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:var(--brand-200)}
.wjtgtc-page .price-card6:hover::before,.tgtc-page .price-card6:hover::before, .wztc-page .price-card6:hover::before, .seotc-page .price-card6:hover::before, .geotc-page .price-card6:hover::before{transform:scaleY(1)}
.wjtgtc-page .price-card6 .pc6-tier,.tgtc-page .price-card6 .pc6-tier, .wztc-page .price-card6 .pc6-tier, .seotc-page .price-card6 .pc6-tier, .geotc-page .price-card6 .pc6-tier{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--brand-600);
  background:var(--brand-50);padding:5px 12px;border-radius:999px;align-self:flex-start;
}
.wjtgtc-page .price-card6 h3,.tgtc-page .price-card6 h3, .wztc-page .price-card6 h3, .seotc-page .price-card6 h3, .geotc-page .price-card6 h3{font-size:21px;font-weight:800;color:var(--ink);margin:0}
.wjtgtc-page .price-card6 .pc6-price,.tgtc-page .price-card6 .pc6-price, .wztc-page .price-card6 .pc6-price, .seotc-page .price-card6 .pc6-price, .geotc-page .price-card6 .pc6-price{
  display:flex;align-items:baseline;gap:6px;color:var(--ink);margin-top:2px;
}
.wjtgtc-page .price-card6 .pc6-price .sym,.tgtc-page .price-card6 .pc6-price .sym, .wztc-page .price-card6 .pc6-price .sym, .seotc-page .price-card6 .pc6-price .sym, .geotc-page .price-card6 .pc6-price .sym{font-size:18px;color:var(--brand-600);font-weight:800}
.wjtgtc-page .price-card6 .pc6-price strong,.tgtc-page .price-card6 .pc6-price strong, .wztc-page .price-card6 .pc6-price strong, .seotc-page .price-card6 .pc6-price strong, .geotc-page .price-card6 .pc6-price strong{
  font-family:var(--font-display);font-size:36px;font-weight:900;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:-.02em;line-height:1;
}
.wjtgtc-page .price-card6 .pc6-price em,.tgtc-page .price-card6 .pc6-price em, .wztc-page .price-card6 .pc6-price em, .seotc-page .price-card6 .pc6-price em, .geotc-page .price-card6 .pc6-price em{font-style:normal;font-size:13px;color:var(--ink-3)}
.wjtgtc-page .price-card6 .pc6-renew,.tgtc-page .price-card6 .pc6-renew, .wztc-page .price-card6 .pc6-renew, .seotc-page .price-card6 .pc6-renew, .geotc-page .price-card6 .pc6-renew{
  font-size:12.5px;color:var(--ink-3);padding:6px 10px;background:var(--bg);
  border-radius:8px;align-self:flex-start;
}
.wjtgtc-page .price-card6 .pc6-sub,.tgtc-page .price-card6 .pc6-sub, .wztc-page .price-card6 .pc6-sub, .seotc-page .price-card6 .pc6-sub, .geotc-page .price-card6 .pc6-sub{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin:0}
.wjtgtc-page .price-card6 .pc6-list,.tgtc-page .price-card6 .pc6-list, .wztc-page .price-card6 .pc6-list, .seotc-page .price-card6 .pc6-list, .geotc-page .price-card6 .pc6-list{
  list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;
  border-top:1px dashed var(--line);padding-top:14px;
}
.wjtgtc-page .price-card6 .pc6-list li,.tgtc-page .price-card6 .pc6-list li, .wztc-page .price-card6 .pc6-list li, .seotc-page .price-card6 .pc6-list li, .geotc-page .price-card6 .pc6-list li{
  position:relative;font-size:13px;color:var(--ink-2);line-height:1.6;
  padding-left:22px;
}
.wjtgtc-page .price-card6 .pc6-list li::before,.tgtc-page .price-card6 .pc6-list li::before, .wztc-page .price-card6 .pc6-list li::before, .seotc-page .price-card6 .pc6-list li::before, .geotc-page .price-card6 .pc6-list li::before{
  content:"";position:absolute;left:0;top:6px;width:14px;height:14px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>") center/contain no-repeat;
}
.wjtgtc-page .price-card6 .pc6-cta,.tgtc-page .price-card6 .pc6-cta, .wztc-page .price-card6 .pc6-cta, .seotc-page .price-card6 .pc6-cta, .geotc-page .price-card6 .pc6-cta{
  margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 18px;border-radius:10px;font-size:14px;font-weight:700;
  background:#fff;color:var(--brand-700);border:1px solid var(--brand-200);
  transition:all .25s var(--ease);text-align:center;
}
.wjtgtc-page .price-card6 .pc6-cta svg,.tgtc-page .price-card6 .pc6-cta svg, .wztc-page .price-card6 .pc6-cta svg, .seotc-page .price-card6 .pc6-cta svg, .geotc-page .price-card6 .pc6-cta svg{width:15px;height:15px;flex-shrink:0}
.wjtgtc-page .price-card6 .pc6-cta:hover,.tgtc-page .price-card6 .pc6-cta:hover, .wztc-page .price-card6 .pc6-cta:hover, .seotc-page .price-card6 .pc6-cta:hover, .geotc-page .price-card6 .pc6-cta:hover{background:var(--grad);color:#fff;border-color:transparent;transform:translateY(-2px);box-shadow:var(--shadow-brand)}
.wjtgtc-page .price-card6.feature,.tgtc-page .price-card6.feature, .wztc-page .price-card6.feature, .seotc-page .price-card6.feature, .geotc-page .price-card6.feature{
  background:linear-gradient(150deg,#0B1B3F 0%,#16357F 55%,#0891B2 100%);color:#fff;border-color:transparent;
  box-shadow:0 28px 60px -22px rgba(11,27,63,.5);
  padding-top:50px;
}
.wjtgtc-page .price-card6.feature::before,.tgtc-page .price-card6.feature::before, .wztc-page .price-card6.feature::before, .seotc-page .price-card6.feature::before, .geotc-page .price-card6.feature::before{display:none}
.wjtgtc-page .price-card6.feature h3,.tgtc-page .price-card6.feature h3, .wztc-page .price-card6.feature h3, .seotc-page .price-card6.feature h3, .geotc-page .price-card6.feature h3{color:#fff}
.wjtgtc-page .price-card6.feature .pc6-sub,.tgtc-page .price-card6.feature .pc6-sub, .wztc-page .price-card6.feature .pc6-sub, .seotc-page .price-card6.feature .pc6-sub, .geotc-page .price-card6.feature .pc6-sub{color:rgba(226,236,255,.8)}
.wjtgtc-page .price-card6.feature .pc6-tier,.tgtc-page .price-card6.feature .pc6-tier, .wztc-page .price-card6.feature .pc6-tier, .seotc-page .price-card6.feature .pc6-tier, .geotc-page .price-card6.feature .pc6-tier{background:rgba(255,255,255,.14);color:#67E8F9}
.wjtgtc-page .price-card6.feature .pc6-renew,.tgtc-page .price-card6.feature .pc6-renew, .wztc-page .price-card6.feature .pc6-renew, .seotc-page .price-card6.feature .pc6-renew, .geotc-page .price-card6.feature .pc6-renew{background:rgba(255,255,255,.08);color:rgba(226,236,255,.78)}
.wjtgtc-page .price-card6.feature .pc6-list,.tgtc-page .price-card6.feature .pc6-list, .wztc-page .price-card6.feature .pc6-list, .seotc-page .price-card6.feature .pc6-list, .geotc-page .price-card6.feature .pc6-list{border-top-color:rgba(255,255,255,.15)}
.wjtgtc-page .price-card6.feature .pc6-list li,.tgtc-page .price-card6.feature .pc6-list li, .wztc-page .price-card6.feature .pc6-list li, .seotc-page .price-card6.feature .pc6-list li, .geotc-page .price-card6.feature .pc6-list li{color:rgba(226,236,255,.92)}
.wjtgtc-page .price-card6.feature .pc6-list li::before,.tgtc-page .price-card6.feature .pc6-list li::before, .wztc-page .price-card6.feature .pc6-list li::before, .seotc-page .price-card6.feature .pc6-list li::before, .geotc-page .price-card6.feature .pc6-list li::before{
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2367E8F9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>") center/contain no-repeat;
}
.wjtgtc-page .price-card6.feature .pc6-cta,.tgtc-page .price-card6.feature .pc6-cta, .wztc-page .price-card6.feature .pc6-cta, .seotc-page .price-card6.feature .pc6-cta, .geotc-page .price-card6.feature .pc6-cta{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.3)}
.wjtgtc-page .price-card6.feature .pc6-cta:hover,.tgtc-page .price-card6.feature .pc6-cta:hover, .wztc-page .price-card6.feature .pc6-cta:hover, .seotc-page .price-card6.feature .pc6-cta:hover, .geotc-page .price-card6.feature .pc6-cta:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5)}
.wjtgtc-page .price-card6.feature .pc6-price .sym,.tgtc-page .price-card6.feature .pc6-price .sym, .wztc-page .price-card6.feature .pc6-price .sym, .seotc-page .price-card6.feature .pc6-price .sym, .geotc-page .price-card6.feature .pc6-price .sym{color:#67E8F9}
.wjtgtc-page .price-card6.feature .pc6-price strong,.tgtc-page .price-card6.feature .pc6-price strong, .wztc-page .price-card6.feature .pc6-price strong, .seotc-page .price-card6.feature .pc6-price strong, .geotc-page .price-card6.feature .pc6-price strong{background:linear-gradient(120deg,#67E8F9,#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
/* 推荐标签：卡片内顶部通栏彩条（原为悬浮胶囊，上半部分会被 overflow:hidden 裁掉） */
.wjtgtc-page .price-card6 .pc6-flag,.tgtc-page .price-card6 .pc6-flag, .wztc-page .price-card6 .pc6-flag, .seotc-page .price-card6 .pc6-flag, .geotc-page .price-card6 .pc6-flag{
  position:absolute;top:0;left:0;right:0;
  transform:none;
  background:linear-gradient(120deg,#F59E0B,#EF4444);color:#fff;
  font-size:11.5px;font-weight:800;letter-spacing:.08em;
  padding:8px 14px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  text-align:center;white-space:nowrap;z-index:2;
  box-shadow:0 6px 16px -10px rgba(239,68,68,.6);
}

/* ---- 02 阿里云架构 4 卡 bento ---- */
.wjtgtc-page .tech-grid,.tgtc-page .tech-grid, .wztc-page .tech-grid, .seotc-page .tech-grid, .geotc-page .tech-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1180px;margin:0 auto}
.wjtgtc-page .tech-card,.tgtc-page .tech-card, .wztc-page .tech-card, .seotc-page .tech-card, .geotc-page .tech-card{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:30px 24px;display:flex;flex-direction:column;gap:12px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s;
}
.wjtgtc-page .tech-card:hover,.tgtc-page .tech-card:hover, .wztc-page .tech-card:hover, .seotc-page .tech-card:hover, .geotc-page .tech-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--brand-200)}
.wjtgtc-page .tech-card .tc-ic,.tgtc-page .tech-card .tc-ic, .wztc-page .tech-card .tc-ic, .seotc-page .tech-card .tc-ic, .geotc-page .tech-card .tc-ic{
  width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--brand-50),#ECFEFF);color:var(--brand-600);
}
.wjtgtc-page .tech-card .tc-ic svg,.tgtc-page .tech-card .tc-ic svg, .wztc-page .tech-card .tc-ic svg, .seotc-page .tech-card .tc-ic svg, .geotc-page .tech-card .tc-ic svg{width:24px;height:24px}
.wjtgtc-page .tech-card h3,.tgtc-page .tech-card h3, .wztc-page .tech-card h3, .seotc-page .tech-card h3, .geotc-page .tech-card h3{font-size:17px;font-weight:800;color:var(--ink);margin:0}
.wjtgtc-page .tech-card p,.tgtc-page .tech-card p, .wztc-page .tech-card p, .seotc-page .tech-card p, .geotc-page .tech-card p{font-size:13px;color:var(--ink-3);line-height:1.65;margin:0}

/* ---- 03 FAQ 折叠列表 ---- */
:is(.geotc-page,.wjtgtc-page,.tgtc-page,.wztc-page,.seotc-page,.geo-page,.seoyh-page,.wxjs-page,.wxkf-page,.ydddz-page) .faq-list{max-width:960px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
:is(.geotc-page,.wjtgtc-page,.tgtc-page,.wztc-page,.seotc-page,.geo-page,.seoyh-page,.wxjs-page,.wxkf-page,.ydddz-page) .faq-item{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);
  overflow:hidden;transition:border-color .25s,box-shadow .25s;
}
:is(.geotc-page,.wjtgtc-page,.tgtc-page,.wztc-page,.seotc-page,.geo-page,.seoyh-page,.wxjs-page,.wxkf-page,.ydddz-page) .faq-item.open{border-color:var(--brand-300);box-shadow:var(--shadow-md)}
:is(.geotc-page,.wjtgtc-page,.tgtc-page,.wztc-page,.seotc-page,.geo-page,.seoyh-page,.wxjs-page,.wxkf-page,.ydddz-page) .faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:20px 26px;cursor:pointer;user-select:none;
  font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.55;
}
:is(.geotc-page,.wjtgtc-page,.tgtc-page,.wztc-page,.seotc-page,.geo-page,.seoyh-page,.wxjs-page,.wxkf-page,.ydddz-page) .faq-q:hover{background:var(--brand-50)}
:is(.geotc-page,.wjtgtc-page,.tgtc-page,.wztc-page,.seotc-page,.geo-page,.seoyh-page,.wxjs-page,.wxkf-page,.ydddz-page) .faq-q .faq-q-left{display:flex;align-items:center;gap:14px;flex:1}
:is(.geotc-page,.wjtgtc-page,.tgtc-page,.wztc-page,.seotc-page,.geo-page,.seoyh-page,.wxjs-page,.wxkf-page,.ydddz-page) .faq-q .faq-num{
  flex-shrink:0;width:32px;height:32px;border-radius:10px;
  background:linear-gradient(135deg,var(--brand-50),#ECFEFF);color:var(--brand-600);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:13px;font-weight:800;
}
:is(.geotc-page,.wjtgtc-page,.tgtc-page,.wztc-page,.seotc-page,.geo-page,.seoyh-page,.wxjs-page,.wxkf-page,.ydddz-page) .faq-q .faq-icon{
  flex-shrink:0;width:28px;height:28px;border-radius:50%;
  background:var(--bg);color:var(--brand-600);
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .3s var(--ease),background .25s;
}
:is(.geotc-page,.wjtgtc-page,.tgtc-page,.wztc-page,.seotc-page,.geo-page,.seoyh-page,.wxjs-page,.wxkf-page,.ydddz-page) .faq-q .faq-icon svg{width:14px;height:14px}
:is(.geotc-page,.wjtgtc-page,.tgtc-page,.wztc-page,.seotc-page,.geo-page,.seoyh-page,.wxjs-page,.wxkf-page,.ydddz-page) .faq-item.open .faq-q .faq-icon{transform:rotate(180deg);background:var(--grad);color:#fff}
:is(.geotc-page,.wjtgtc-page,.tgtc-page,.wztc-page,.seotc-page,.geo-page,.seoyh-page,.wxjs-page,.wxkf-page,.ydddz-page) .faq-a{
  max-height:0;overflow:hidden;transition:max-height .35s var(--ease);
  color:var(--ink-2);font-size:14px;line-height:1.8;
}
:is(.geotc-page,.wjtgtc-page,.tgtc-page,.wztc-page,.seotc-page,.geo-page,.seoyh-page,.wxjs-page,.wxkf-page,.ydddz-page) .faq-a-inner{padding:0 26px 20px 72px}
:is(.geotc-page,.wjtgtc-page,.tgtc-page,.wztc-page,.seotc-page,.geo-page,.seoyh-page,.wxjs-page,.wxkf-page,.ydddz-page) .faq-item.open .faq-a{max-height:340px}

/* ---- 响应式 ---- */
@media(max-width:1024px){
  .wjtgtc-page .price-grid-6,.tgtc-page .price-grid-6, .wztc-page .price-grid-6, .seotc-page .price-grid-6, .geotc-page .price-grid-6{grid-template-columns:repeat(2,1fr);max-width:760px}
  .wjtgtc-page .price-card6.feature,.tgtc-page .price-card6.feature, .wztc-page .price-card6.feature, .seotc-page .price-card6.feature, .geotc-page .price-card6.feature{grid-column:span 2}
  .wjtgtc-page .tech-grid,.tgtc-page .tech-grid, .wztc-page .tech-grid, .seotc-page .tech-grid, .geotc-page .tech-grid{grid-template-columns:repeat(2,1fr);max-width:680px}
  :is(.geotc-page,.wjtgtc-page,.tgtc-page,.wztc-page,.seotc-page,.geo-page,.seoyh-page,.wxjs-page,.wxkf-page,.ydddz-page) .faq-q{padding:18px 22px;font-size:15px}
  :is(.geotc-page,.wjtgtc-page,.tgtc-page,.wztc-page,.seotc-page,.geo-page,.seoyh-page,.wxjs-page,.wxkf-page,.ydddz-page) .faq-a-inner{padding-left:64px}
}
@media(max-width:640px){
  .wjtgtc-page .price-grid-6,.tgtc-page .price-grid-6, .wztc-page .price-grid-6, .seotc-page .price-grid-6, .geotc-page .price-grid-6{grid-template-columns:1fr;max-width:420px}
  .wjtgtc-page .price-card6.feature,.tgtc-page .price-card6.feature, .wztc-page .price-card6.feature, .seotc-page .price-card6.feature, .geotc-page .price-card6.feature{grid-column:auto}
  .wjtgtc-page .price-card6 .pc6-price strong,.tgtc-page .price-card6 .pc6-price strong, .wztc-page .price-card6 .pc6-price strong, .seotc-page .price-card6 .pc6-price strong, .geotc-page .price-card6 .pc6-price strong{font-size:32px}
  .wjtgtc-page .tech-grid,.tgtc-page .tech-grid, .wztc-page .tech-grid, .seotc-page .tech-grid, .geotc-page .tech-grid{grid-template-columns:1fr;max-width:420px}
  :is(.geotc-page,.wjtgtc-page,.tgtc-page,.wztc-page,.seotc-page,.geo-page,.seoyh-page,.wxjs-page,.wxkf-page,.ydddz-page) .faq-q{padding:16px 18px;font-size:14px;gap:10px}
  :is(.geotc-page,.wjtgtc-page,.tgtc-page,.wztc-page,.seotc-page,.geo-page,.seoyh-page,.wxjs-page,.wxkf-page,.ydddz-page) .faq-q .faq-num{width:28px;height:28px;font-size:12px}
  :is(.geotc-page,.wjtgtc-page,.tgtc-page,.wztc-page,.seotc-page,.geo-page,.seoyh-page,.wxjs-page,.wxkf-page,.ydddz-page) .faq-a-inner{padding:0 18px 18px 18px}
}

/* ============ wztc.html：4 档套餐大屏一行展示（仅覆盖 .wztc-page，不影响 wjtgtc 的 6 档 3 列） ============ */
@media(min-width:1240px){
  .wztc-page .price-grid-6, .seotc-page .price-grid-6{grid-template-columns:repeat(4,1fr);gap:18px;max-width:1320px}
  .wztc-page .price-card6, .seotc-page .price-card6{padding:26px 20px 24px}
  .wztc-page .price-card6 h3, .seotc-page .price-card6 h3{font-size:19px}
  .wztc-page .price-card6 .pc6-price, .seotc-page .price-card6 .pc6-price{gap:5px}
  .wztc-page .price-card6 .pc6-price .sym, .seotc-page .price-card6 .pc6-price .sym{font-size:15px}
  .wztc-page .price-card6 .pc6-price strong, .seotc-page .price-card6 .pc6-price strong{font-size:29px}
  .wztc-page .price-card6 .pc6-price em, .seotc-page .price-card6 .pc6-price em{font-size:12px}
  .wztc-page .price-card6 .pc6-sub, .seotc-page .price-card6 .pc6-sub{font-size:12.5px}
  .wztc-page .price-card6 .pc6-list, .seotc-page .price-card6 .pc6-list{gap:7px;padding-top:12px}
  .wztc-page .price-card6 .pc6-list li, .seotc-page .price-card6 .pc6-list li{font-size:12.5px;padding-left:20px;line-height:1.55}
  .wztc-page .price-card6 .pc6-list li::before, .seotc-page .price-card6 .pc6-list li::before{top:5px;width:13px;height:13px}
  .wztc-page .price-card6 .pc6-renew, .seotc-page .price-card6 .pc6-renew{font-size:12px}
  .wztc-page .price-card6 .pc6-cta, .seotc-page .price-card6 .pc6-cta{font-size:13px;padding:10px 14px}
  .wztc-page .price-card6.feature, .seotc-page .price-card6.feature{padding-top:46px}
  /* seotc 是 3 档（不是 wztc 的 4 档）：不跟着并到 4 列，也不缩字号；
     它要保持 3 列吃满容器、与全站同字号。放在本媒体查询之后靠源序覆盖上面的 4 列规则。 */
  .seotc-page .price-grid-6{grid-template-columns:repeat(3,1fr);max-width:100%;gap:20px}
  /* 推荐卡的补偿内边距归零：徽标已改成脱离文档流的角标，
     不再需要给顶部彩条留 20px，这样三卡的文字基线与顶边才能完全对齐。 */
  .seotc-page .price-card6.feature{padding-top:26px}
}
@media(max-width:1239px) and (min-width:641px){
  .wztc-page .price-grid-6, .seotc-page .price-grid-6{grid-template-columns:repeat(2,1fr);gap:18px;max-width:760px}
  .wztc-page .price-card6.feature, .seotc-page .price-card6.feature{grid-column:auto}
}

/* ================================================================
   seotc：谷歌 SEO 套餐页 专属样式
   命名空间：.seotc-page 隔离
   （price-card6 / faq / step-flow / guarantee 等组件样式已在上方 .wztc-page 组内一并扩展）
================================================================ */

/* ---- 03 三档套餐：3 卡同排 ---- */
/* 跟随容器内容宽（1384@1440 / 1504@≥1600），去掉原先写死的 1140px。
   原来 @1440 左右各空 122px、@1920 各空 182px，比上方 880 的标题区还窄，整段看着内缩。 */
.seotc-page .price-grid-6{max-width:100%}
/* 推荐卡徽标：原为顶部通栏彩条（绝对定位 top:0），压在「推荐型」pill 上方 20px，
   而 .feature 又用 padding-top:50px 给它腾位 —— 推荐卡整列文字因此比两侧低 20px、顶边错位。
   现在改为卡内右上角胶囊：仍走绝对定位（不占文档流 → 不影响对齐），
   top 改为与卡片 padding 同值 16px，卡片圆角半径 18px 处水平内缩 18px，整体落在圆角内。
   ⚠️ 不要用 translateY(-15px) 把它挪到卡外做「跨边缎带」：卡片是 overflow:hidden，
      负偏移会把徽标上半截裁掉、文字被切（实测 8 个视口全部被裁）。 */
.seotc-page .price-card6 .pc6-flag{
  left:auto;right:18px;top:16px;
  width:auto;padding:6px 14px;
  border-radius:999px;
  box-shadow:0 8px 18px -12px rgba(239,68,68,.7);
}

/* ---- 04 完整服务对比表 ---- */
:is(.seotc-page,.wjtgtc-page,.geotc-page) .cmp-wrap{
  max-width:100%;margin:0 auto;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);overflow:hidden;
}
:is(.seotc-page,.wjtgtc-page,.geotc-page) .cmp-cap{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
:is(.seotc-page,.wjtgtc-page,.geotc-page) .cmp-hint{
  display:none;margin:0;padding:10px 16px;text-align:center;
  font-size:12.5px;font-weight:600;color:var(--brand-700);
  background:var(--brand-50);border-bottom:1px solid var(--brand-100);
}
/* 2026-09-25 巡检：对比表 640~780px 宽塞进 332px 容器，但没有右缘渐隐提示，
   用户不知道右边还有内容。遮罩由 main.js 的 can-l/can-r 跟随滚动位置管理
   （与 gy-tl-scroll、zx-pills 同一套机制）。 */
:is(.seotc-page,.wjtgtc-page,.geotc-page) .cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
:is(.seotc-page,.wjtgtc-page,.geotc-page) .cmp-scroll.can-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
:is(.seotc-page,.wjtgtc-page,.geotc-page) .cmp-scroll.can-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 44px);mask-image:linear-gradient(90deg,transparent,#000 44px)}
:is(.seotc-page,.wjtgtc-page,.geotc-page) .cmp-scroll.can-r.can-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent)}

:is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp{
  width:100%;min-width:780px;border-collapse:collapse;
  font-size:14px;font-family:var(--font-sans);
}
:is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp th,:is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp td{
  padding:13px 18px;border-bottom:1px solid var(--line);vertical-align:middle;
}

/* 表头 */
:is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp thead th{
  background:linear-gradient(135deg,#0B1B3F 0%,#16357F 58%,#1D4ED8 100%);
  color:#fff;font-size:15px;font-weight:800;letter-spacing:.05em;
  text-align:center;border-bottom:1px solid rgba(255,255,255,.16);
}
:is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp thead th:first-child{text-align:left;padding-left:26px}
:is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp thead th .cmp-rec{
  display:inline-block;margin-left:9px;padding:2px 9px;border-radius:999px;
  background:linear-gradient(120deg,#F59E0B,#EF4444);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.06em;vertical-align:2px;
}

/* 服务费用行 */
:is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp tr.cmp-fee th{
  background:linear-gradient(135deg,#16357F 0%,#1D4ED8 100%);
  color:rgba(226,236,255,.92);font-size:13.5px;font-weight:700;
  text-align:left;padding-left:26px;border-bottom:1px solid rgba(255,255,255,.16);
}
:is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp tr.cmp-fee td{
  background:linear-gradient(135deg,#16357F 0%,#1D4ED8 100%);
  text-align:center;border-bottom:1px solid rgba(255,255,255,.16);
}
:is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp .cmp-money{
  font-family:var(--font-display);font-size:23px;font-weight:900;
  color:#fff;letter-spacing:-.01em;
}

/* 分组行 */
:is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp tr.cmp-grp th{
  background:linear-gradient(90deg,#16357F 0%,#2563EB 62%,#06B6D4 150%);
  color:#fff;font-size:13.5px;font-weight:800;letter-spacing:.12em;
  text-align:left;padding:12px 26px;border-bottom:none;
}

/* 行标签列 / 数据格 */
:is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp tbody th{
  background:#F3F7FE;color:var(--ink-2);
  font-size:13.5px;font-weight:600;text-align:left;padding-left:26px;
}
:is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp tbody td{
  text-align:center;color:var(--ink);font-weight:700;font-size:14px;
}

/* 高级版列高亮 */
:is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp thead th.cmp-hi{
  background:linear-gradient(135deg,#12306F 0%,#1E40AF 58%,#2563EB 100%);
}
:is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp tr.cmp-fee td.cmp-hi{
  background:linear-gradient(135deg,#1E4FD8,#2563EB);
}
:is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp tbody td.cmp-hi{background:#EDF4FF}

/* hover */
:is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp tbody tr:hover th,
:is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp tbody tr:hover td{background:#E8F1FF}
:is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp tbody tr.cmp-grp:hover th{
  background:linear-gradient(90deg,#16357F 0%,#2563EB 62%,#06B6D4 150%);
}
:is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp tbody tr:last-child th,
:is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp tbody tr:last-child td{border-bottom:none}

/* 勾选标记 */
:is(.seotc-page,.wjtgtc-page,.geotc-page) .cmp-yes{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:rgba(16,185,129,.18);color:#059669;
}
:is(.seotc-page,.wjtgtc-page,.geotc-page) .cmp-yes svg{width:13px;height:13px}

/* ---- 响应式 ---- */
@media(max-width:1024px){
  :is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp{min-width:720px;font-size:13.5px}
  :is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp th,:is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp td{padding:11px 12px}
  :is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp tbody th,
  :is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp thead th:first-child,
  :is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp tr.cmp-fee th{padding-left:16px}
  :is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp tr.cmp-grp th{padding:11px 16px}
  .seotc-page .price-grid-6{grid-template-columns:repeat(3,1fr);max-width:100%;gap:14px}
  .seotc-page .price-card6{padding:26px 18px 24px}
  /* 移动端同样保持三卡基线/顶边对齐（徽标为角标，不需要顶部补偿） */
  .seotc-page .price-card6.feature{padding-top:26px}
  .seotc-page .price-card6.feature{grid-column:auto}
}
@media(max-width:900px){
  .seotc-page .price-grid-6{grid-template-columns:1fr;max-width:520px}
}
@media(max-width:768px){
  :is(.seotc-page,.wjtgtc-page,.geotc-page) .cmp-hint{display:block}
  :is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp{min-width:640px}
  :is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp .cmp-money{font-size:19px}
  /* 移动端：左列行标签吸附，横向滑动时始终可见 */
  :is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp thead th:first-child,
  :is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp tr.cmp-fee th,
  :is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp tbody tr:not(.cmp-grp) th{
    position:sticky;left:0;z-index:2;
  }
  :is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp tbody tr:not(.cmp-grp):hover th{background:#E8F1FF}
  :is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp thead th:first-child::after,
  :is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp tr.cmp-fee th::after,
  :is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp tbody tr:not(.cmp-grp) th::after{
    content:"";position:absolute;top:0;right:-1px;bottom:0;width:6px;
    background:linear-gradient(90deg,rgba(15,23,42,.10),transparent);
    pointer-events:none;
  }
  /* 分组行跨 4 列，不吸附 */
  :is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp tbody tr.cmp-grp th{
    position:static;z-index:auto;
    background:linear-gradient(90deg,#16357F 0%,#2563EB 62%,#06B6D4 150%);color:#fff;
  }
}


/* ==========================================================================
   典型案例页 dxal.html —— 页面命名空间 .dxal-page
   仅作用于 <body class="dxal-page">，不污染任何共享选择器。
   ========================================================================== */

/* ---------- Hero 兜底：标题两段 <br> 拆行，窄屏允许换行 ---------- */
.dxal-page .hero h1{white-space:normal}
.dxal-page .hero .lead{max-width:620px}

/* ---------- 数字带（01） ---------- */
.dxal-page .dxal-stats-band{padding:76px 0}
.dxal-page .dxal-band{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-md);overflow:hidden;
}
.dxal-page .dxal-band-item{
  padding:34px 26px;text-align:center;position:relative;
}
.dxal-page .dxal-band-item + .dxal-band-item::before{
  content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;
  background:linear-gradient(180deg,transparent,var(--line) 20%,var(--line) 80%,transparent);
}
.dxal-page .dxal-band-item .n{
  font-family:var(--font-display);
  font-size:clamp(30px,3.4vw,42px);font-weight:800;line-height:1.05;
  letter-spacing:-.02em;background:var(--grad-text);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.dxal-page .dxal-band-item .t{font-size:15px;font-weight:700;color:var(--ink);margin-top:10px}
.dxal-page .dxal-band-item .d{font-size:12.5px;color:var(--ink-4);margin-top:6px;line-height:1.6}

/* ---------- 筛选栏 ---------- */
.dxal-page .dxal-filter{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin:-24px auto 26px;max-width:1020px;
}
.dxal-page .dxal-pill{
  display:inline-flex;align-items:center;gap:8px;
  font-family:inherit;font-size:14px;font-weight:600;line-height:1;
  color:var(--ink-2);background:#fff;
  border:1px solid var(--line);border-radius:999px;
  padding:11px 18px;cursor:pointer;
  transition:color .25s var(--ease),border-color .25s var(--ease),
             background .25s var(--ease),transform .25s var(--ease),
             box-shadow .25s var(--ease);
}
.dxal-page .dxal-pill em{
  font-style:normal;font-size:11.5px;font-weight:700;
  color:var(--ink-4);background:var(--bg);
  border-radius:999px;padding:3px 8px;
  transition:color .25s var(--ease),background .25s var(--ease);
}
.dxal-page .dxal-pill:hover{
  color:var(--brand-600);border-color:var(--brand-300);
  transform:translateY(-2px);box-shadow:var(--shadow-sm);
}
.dxal-page .dxal-pill.is-active{
  background:var(--grad);color:#fff;border-color:transparent;
  box-shadow:var(--shadow-brand);
}
.dxal-page .dxal-pill.is-active em{background:rgba(255,255,255,.22);color:#fff}
/* 空分类：可点（显示占位态），但视觉弱化 */
.dxal-page .dxal-pill.is-empty{color:var(--ink-4);border-style:dashed}
.dxal-page .dxal-pill.is-empty em{background:transparent;color:var(--ink-4);padding:0}
.dxal-page .dxal-pill.is-empty:hover{color:var(--ink-3);border-color:var(--line);transform:translateY(-2px)}

/* ---------- 结果计数条 ---------- */
.dxal-page .dxal-result{
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:13px;color:var(--ink-4);margin-bottom:26px;
}
.dxal-page .dxal-result .dxal-count b{
  font-size:17px;font-weight:800;color:var(--brand-600);
  font-family:var(--font-display);margin-right:3px;
}
.dxal-page .dxal-result .dxal-cur{
  color:var(--ink-3);font-weight:600;
  padding:3px 11px;border-radius:999px;
  background:linear-gradient(120deg,rgba(37,99,235,.08),rgba(6,182,212,.1));
  border:1px solid rgba(37,99,235,.14);
}

/* ---------- 案例分组容器 ---------- */
.dxal-page .dxal-groups{position:relative}
.dxal-page .dxal-group{display:block}
.dxal-page .dxal-group[hidden]{display:none}

/* ---------- 案例卡：把整卡包成 <a>，继承 .case-card 视觉 ---------- */
:is(.dxal-page,.dxal-detail-page) .case-card{padding:0;overflow:hidden}
:is(.dxal-page,.dxal-detail-page) .case-link{
  display:flex;flex-direction:column;height:100%;
  color:inherit;text-decoration:none;
}
:is(.dxal-page,.dxal-detail-page) .case-card .case-thumb{flex-shrink:0}
:is(.dxal-page,.dxal-detail-page) .case-card .case-thumb img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  aspect-ratio:16 / 11;display:block;
}
:is(.dxal-page,.dxal-detail-page) .case-body h3{transition:color .25s var(--ease)}
:is(.dxal-page,.dxal-detail-page) .case-card:hover .case-body h3{color:var(--brand-600)}
/* 卡片右上角外链小标 */
:is(.dxal-page,.dxal-detail-page) .case-tag .go{
  display:inline-flex;align-items:center;justify-content:center;
  font-style:normal;opacity:.55;
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
:is(.dxal-page,.dxal-detail-page) .case-tag .go svg{width:13px;height:13px;display:block}
:is(.dxal-page,.dxal-detail-page) .case-card:hover .case-tag .go{opacity:1;transform:translate(1px,-1px)}

/* ---------- 空分类占位卡 ---------- */
.dxal-page .dxal-empty-wrap{display:block}
.dxal-page .dxal-empty-wrap[hidden]{display:none}
.dxal-page .dxal-empty{
  max-width:620px;margin:0 auto;text-align:center;
  background:#fff;border:1px dashed var(--line);border-radius:var(--radius-xl);
  padding:56px 34px;box-shadow:var(--shadow-sm);
}
.dxal-page .dxal-empty-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:20px;margin-bottom:20px;
  background:linear-gradient(120deg,rgba(37,99,235,.09),rgba(6,182,212,.11));
  color:var(--brand-600);
}
.dxal-page .dxal-empty-ic svg{width:30px;height:30px;display:block}
.dxal-page .dxal-empty h3{font-size:19px;font-weight:700;color:var(--ink);margin-bottom:12px}
.dxal-page .dxal-empty p{
  font-size:14px;color:var(--ink-3);line-height:1.8;
  max-width:480px;margin:0 auto 24px;
}
.dxal-page .dxal-empty-actions{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
}

/* ---------- 底部「索取更多」 ---------- */
:is(.dxal-page,.dxal-detail-page) .dxal-more{
  text-align:center;margin-top:56px;padding-top:44px;position:relative;
}
:is(.dxal-page,.dxal-detail-page) .dxal-more::before{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:min(420px,80%);height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 30%,var(--line) 70%,transparent);
}
:is(.dxal-page,.dxal-detail-page) .dxal-more p{font-size:15px;color:var(--ink-3);margin-bottom:22px}

/* ---------- 服务能力（03） ---------- */
.dxal-page .dxal-ability{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:stretch;
}
.dxal-page .dxal-ability-card{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:32px 26px 30px;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.dxal-page .dxal-ability-card:hover{
  transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:transparent;
}
.dxal-page .dxal-ability-no{
  position:absolute;right:20px;top:14px;
  font-family:var(--font-display);font-size:52px;font-weight:800;line-height:1;
  color:var(--ink);opacity:.05;letter-spacing:-.03em;pointer-events:none;
}
.dxal-page .dxal-ability-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:16px;margin-bottom:20px;
  background:linear-gradient(120deg,rgba(37,99,235,.09),rgba(6,182,212,.11));
  color:var(--brand-600);flex-shrink:0;
}
.dxal-page .dxal-ability-ic svg{width:25px;height:25px;display:block}
.dxal-page .dxal-ability-card h3{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:10px}
.dxal-page .dxal-ability-card p{font-size:13.5px;color:var(--ink-3);line-height:1.75}

/* ---------- 合作流程（04） ---------- */
.dxal-page .dxal-flow{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.dxal-page .dxal-flow-item{
  position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:30px 26px 28px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.dxal-page .dxal-flow-item:hover{
  transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--brand-300);
}
.dxal-page .dxal-flow-item .dot{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:12px;margin-bottom:16px;
  font-family:var(--font-display);font-size:16px;font-weight:800;color:#fff;
  background:var(--grad);box-shadow:var(--shadow-brand);
}
.dxal-page .dxal-flow-item h4{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:9px}
.dxal-page .dxal-flow-item p{font-size:13.5px;color:var(--ink-3);line-height:1.75}

/* ---------- 响应式 ---------- */
@media(max-width:1239px){
  .dxal-page .dxal-ability{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1024px){
  .dxal-page .dxal-band{grid-template-columns:repeat(2,1fr)}
  .dxal-page .dxal-band-item:nth-child(3)::before{display:none}
  .dxal-page .dxal-band-item:nth-child(3),
  .dxal-page .dxal-band-item:nth-child(4){border-top:1px solid var(--line)}
  .dxal-page .dxal-flow{grid-template-columns:repeat(2,1fr)}
  .dxal-page .dxal-filter{margin-top:-16px}
}
@media(max-width:768px){
  .dxal-page .dxal-stats-band{padding:56px 0}
  .dxal-page .dxal-band-item{padding:26px 18px}
  .dxal-page .dxal-band-item + .dxal-band-item::before{display:none}
  .dxal-page .dxal-band-item:nth-child(2)::before{display:none}
  .dxal-page .dxal-band{border-radius:var(--radius-lg)}
  .dxal-page .dxal-filter{gap:8px;margin:-10px auto 20px}
  .dxal-page .dxal-pill{padding:9px 14px;font-size:13px}
  .dxal-page .dxal-pill em{font-size:11px;padding:2px 7px}
  .dxal-page .dxal-ability{grid-template-columns:1fr;gap:16px}
  .dxal-page .dxal-flow{grid-template-columns:1fr;gap:16px}
  .dxal-page .dxal-empty{padding:42px 22px}
  .dxal-page .dxal-empty-actions .btn{width:100%;justify-content:center}
  :is(.dxal-page,.dxal-detail-page) .dxal-more{margin-top:40px;padding-top:32px}
}
@media(max-width:560px){
  .dxal-page .dxal-band{grid-template-columns:1fr}
  .dxal-page .dxal-band-item:nth-child(2)::before,
  .dxal-page .dxal-band-item:nth-child(4)::before{display:none}
  .dxal-page .dxal-result{flex-direction:column;gap:8px}
}
@media(max-width:420px){
  .dxal-page .dxal-pill{padding:8px 12px;font-size:12.5px}
  .dxal-page .dxal-pill em{display:none}
}


/* 首页案例区「查看全部案例」区块 */
.case-more{text-align:center;margin-top:52px;padding-top:40px;position:relative}
.case-more::before{
  content://;position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:min(420px,80%);height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 30%,var(--line) 70%,transparent);
}
.case-more p{font-size:15px;color:var(--ink-3);margin-bottom:20px}
@media(max-width:768px){
  .case-more{margin-top:36px;padding-top:30px}
  .case-more .btn{width:100%;justify-content:center}
}


/* ==========================================================================
   案例详情页 dxal-detail.html —— 页面命名空间 .dxal-detail-page
   线上原型 /dxal-wzjs/893.html 的升级改版；通用模板，换案例只改 HTML 数据槽。
   ========================================================================== */

/* ---------- 案例头（深海极光 · 紧凑版） ---------- */
.dxal-detail-page .dd-hero{
  position:relative;overflow:hidden;color:#fff;
  background:var(--brand-950);
  padding:0 0 132px;
}
/* 极光与网格线：原规则只作用于 .hero，这里为 .dd-hero 复制一份 */
.dxal-detail-page .dd-hero .aurora{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.dxal-detail-page .dd-hero .aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;will-change:transform}
.dxal-detail-page .dd-hero .aurora i:nth-child(1){width:600px;height:600px;background:radial-gradient(circle,#1D4ED8 0%,transparent 65%);top:-280px;right:-120px}
.dxal-detail-page .dd-hero .aurora i:nth-child(2){width:480px;height:480px;background:radial-gradient(circle,#06B6D4 0%,transparent 65%);bottom:-240px;left:-140px;opacity:.34}
.dxal-detail-page .dd-hero .aurora i:nth-child(3){width:380px;height:380px;background:radial-gradient(circle,#818CF8 0%,transparent 65%);top:22%;left:42%;opacity:.22}
.dxal-detail-page .dd-hero .gridlines{
  position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 30%,transparent 100%);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 30%,transparent 100%);
}
.dxal-detail-page .dd-hero-inner{position:relative;z-index:3;padding-top:26px}
.dxal-detail-page .dd-hero .wave{position:absolute;left:0;right:0;bottom:-2px;z-index:2;pointer-events:none}
.dxal-detail-page .dd-hero .wave svg{display:block;width:100%;height:88px}

/* ---------- 面包屑 ---------- */
.dxal-detail-page .dd-crumb{margin-bottom:30px}
.dxal-detail-page .dd-crumb ol{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  font-size:13px;color:rgba(255,255,255,.6);
}
.dxal-detail-page .dd-crumb li{display:inline-flex;align-items:center;gap:9px}
.dxal-detail-page .dd-crumb li + li::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:rgba(255,255,255,.28);flex-shrink:0;
}
.dxal-detail-page .dd-crumb a{
  color:rgba(255,255,255,.68);text-decoration:none;
  transition:color .22s var(--ease);
}
.dxal-detail-page .dd-crumb a:hover{color:#22d3ee}
.dxal-detail-page .dd-crumb li[aria-current]{
  color:#fff;font-weight:600;
  max-width:22em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---------- 案例头主体 ---------- */
.dxal-detail-page .dd-hero-grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center;
}
.dxal-detail-page .dd-cat{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12.5px;font-weight:700;letter-spacing:.06em;
  color:#A5F3FC;
  padding:7px 16px;border-radius:999px;
  background:rgba(34,211,238,.12);
  border:1px solid rgba(34,211,238,.28);
  margin-bottom:20px;
}
.dxal-detail-page .dd-cat .dot{
  width:7px;height:7px;border-radius:50%;background:#22d3ee;
  box-shadow:0 0 0 3px rgba(34,211,238,.2);
}
.dxal-detail-page .dd-hero h1{
  font-family:var(--font-display);
  font-size:clamp(30px,4.2vw,52px);
  font-weight:800;line-height:1.16;letter-spacing:-.02em;
  white-space:normal;margin-bottom:18px;
}
.dxal-detail-page .dd-lead{
  font-size:16px;line-height:1.78;color:rgba(255,255,255,.76);
  max-width:620px;margin-bottom:24px;
}
.dxal-detail-page .dd-tags{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:30px}
.dxal-detail-page .dd-tag{
  font-size:13px;font-weight:600;color:rgba(255,255,255,.88);
  padding:7px 15px;border-radius:999px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.18);
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.dxal-detail-page .dd-tag:hover{background:rgba(34,211,238,.16);border-color:rgba(34,211,238,.4);transform:translateY(-2px)}
.dxal-detail-page .dd-hero-actions{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- 案例头右侧快照卡 ---------- */
.dxal-detail-page .dd-hero-card{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.13);
  border-radius:var(--radius-xl);
  padding:30px 30px 26px;
  backdrop-filter:blur(14px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
}
.dxal-detail-page .dd-hc-tag{
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#22d3ee;margin-bottom:20px;
}
.dxal-detail-page .dd-hero-card dl{margin:0;display:grid;gap:0}
.dxal-detail-page .dd-hero-card dl > div{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:13px 0;
  border-top:1px solid rgba(255,255,255,.09);
}
.dxal-detail-page .dd-hero-card dl > div:first-child{border-top:0;padding-top:0}
.dxal-detail-page .dd-hero-card dt{
  font-size:13px;color:rgba(255,255,255,.55);flex-shrink:0;
}
.dxal-detail-page .dd-hero-card dd{
  margin:0;font-size:13.5px;font-weight:600;color:#fff;
  text-align:right;word-break:break-all;
}
.dxal-detail-page .dd-hero-card dd a{
  color:#67E8F9;text-decoration:none;
  border-bottom:1px dashed rgba(103,232,249,.5);
  transition:color .22s var(--ease),border-color .22s var(--ease);
}
.dxal-detail-page .dd-hero-card dd a:hover{color:#fff;border-color:#fff}
.dxal-detail-page .dd-live{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:700;color:#6EE7B7;
}
.dxal-detail-page .dd-live::before{
  content:"";width:7px;height:7px;border-radius:50%;background:#34D399;
  box-shadow:0 0 0 3px rgba(52,211,153,.2);
}

/* ---------- 主体两栏 ---------- */
.dxal-detail-page .dd-body{padding:76px 0 96px}
.dxal-detail-page .dd-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:44px;align-items:start;
}
.dxal-detail-page .dd-head{margin-bottom:32px}
.dxal-detail-page .dd-head h2{
  font-size:clamp(24px,2.8vw,32px);font-weight:800;line-height:1.25;
  letter-spacing:-.02em;margin:14px 0 12px;
}
.dxal-detail-page .dd-head h2 .accent{
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.dxal-detail-page .dd-head p{font-size:14.5px;color:var(--ink-3);line-height:1.75}

/* ---------- 截图卡（仿浏览器窗口） ---------- */
.dxal-detail-page .dd-shots{display:grid;gap:30px}
.dxal-detail-page .dd-shot{
  margin:0;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-md);
  transition:box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.dxal-detail-page .dd-shot:hover{box-shadow:var(--shadow-lg);border-color:#CFDBEC}
.dxal-detail-page .dd-shot-bar{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;
  background:#F3F6FB;border-bottom:1px solid var(--line);
}
.dxal-detail-page .dd-dots{display:inline-flex;gap:6px;flex-shrink:0}
.dxal-detail-page .dd-dots i{width:10px;height:10px;border-radius:50%;background:#D7DEEA}
.dxal-detail-page .dd-dots i:nth-child(1){background:#FF5F57}
.dxal-detail-page .dd-dots i:nth-child(2){background:#FEBC2E}
.dxal-detail-page .dd-dots i:nth-child(3){background:#28C840}
.dxal-detail-page .dd-url{
  flex:1;min-width:0;text-align:center;
  font-size:12px;color:var(--ink-4);
  background:#fff;border:1px solid var(--line);border-radius:7px;
  padding:5px 12px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dxal-detail-page .dd-zoom{
  display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
  font-family:inherit;font-size:12px;font-weight:600;color:var(--ink-3);
  background:#fff;border:1px solid var(--line);border-radius:7px;
  padding:5px 10px;cursor:pointer;
  transition:color .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease);
}
.dxal-detail-page .dd-zoom svg{width:13px;height:13px;display:block}
.dxal-detail-page .dd-zoom:hover{color:var(--brand-600);border-color:var(--brand-300);background:#F8FBFF}

/* 长图裁切：默认限高 + 渐隐；.is-open 时完全展开 */
.dxal-detail-page .dd-shot-view{
  position:relative;overflow:hidden;
  max-height:620px;
  background:#EAEFF7;
  cursor:zoom-in;
}
.dxal-detail-page .dd-shot-view img{
  display:block;width:100%;height:auto;
}
.dxal-detail-page .dd-shot-view::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:150px;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.96));
  pointer-events:none;transition:opacity .3s var(--ease);
}
.dxal-detail-page .dd-shot-view.is-open{max-height:none;cursor:default}
.dxal-detail-page .dd-shot-view.is-open::after{opacity:0}

.dxal-detail-page .dd-shot-cap{
  display:flex;align-items:center;gap:14px;
  padding:15px 18px;border-top:1px solid var(--line);background:#fff;
}
.dxal-detail-page .dd-shot-no{
  font-family:var(--font-display);font-size:15px;font-weight:800;
  color:var(--brand-600);flex-shrink:0;
  width:34px;height:34px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(120deg,rgba(37,99,235,.09),rgba(6,182,212,.12));
}
.dxal-detail-page .dd-shot-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.dxal-detail-page .dd-shot-txt b{font-size:14.5px;font-weight:700;color:var(--ink)}
.dxal-detail-page .dd-shot-txt em{font-style:normal;font-size:12.5px;color:var(--ink-4);line-height:1.55}
.dxal-detail-page .dd-shot-toggle{
  display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
  font-family:inherit;font-size:13px;font-weight:600;color:var(--brand-600);
  background:var(--brand-50);border:1px solid rgba(37,99,235,.16);border-radius:999px;
  padding:8px 15px;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.dxal-detail-page .dd-shot-toggle svg{width:14px;height:14px;display:block;transition:transform .3s var(--ease)}
.dxal-detail-page .dd-shot-toggle:hover{background:var(--grad);color:#fff;border-color:transparent}
.dxal-detail-page .dd-shot-toggle[hidden]{display:none}
.dxal-detail-page .dd-shot-toggle.is-open svg{transform:rotate(180deg)}

/* ---------- 右侧 sticky 信息栏 ---------- */
.dxal-detail-page .dd-side{
  position:sticky;top:96px;
  display:grid;gap:20px;
}
.dxal-detail-page .dd-card{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:26px 24px;
  box-shadow:var(--shadow-sm);
}
.dxal-detail-page .dd-card-t{
  display:flex;align-items:center;gap:10px;
  font-size:15px;font-weight:700;color:var(--ink);
  margin-bottom:16px;
}
.dxal-detail-page .dd-card-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(120deg,rgba(37,99,235,.09),rgba(6,182,212,.12));
  color:var(--brand-600);
}
.dxal-detail-page .dd-card-ic svg{width:16px;height:16px;display:block}
.dxal-detail-page .dd-intro{
  font-size:13.5px;line-height:1.85;color:var(--ink-3);
  text-align:justify;
}
.dxal-detail-page .dd-meta{list-style:none;margin:0;padding:0}
.dxal-detail-page .dd-meta li{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:11px 0;border-top:1px dashed var(--line);
}
.dxal-detail-page .dd-meta li:first-child{border-top:0;padding-top:0}
.dxal-detail-page .dd-meta .k{font-size:13px;color:var(--ink-4);flex-shrink:0}
.dxal-detail-page .dd-meta .v{
  font-size:13px;font-weight:600;color:var(--ink-2);
  text-align:right;word-break:break-word;
}
.dxal-detail-page .dd-meta .v a{
  color:var(--brand-600);text-decoration:none;
  border-bottom:1px dashed rgba(37,99,235,.35);
  transition:border-color .22s var(--ease);
}
.dxal-detail-page .dd-meta .v a:hover{border-color:var(--brand-600)}

/* 侧栏 CTA 卡 */
.dxal-detail-page .dd-card-cta{
  background:linear-gradient(160deg,#0B1B3F 0%,#16357F 58%,#1B4FA8 100%);
  border-color:transparent;color:#fff;text-align:center;
  padding:30px 24px 26px;
}
.dxal-detail-page .dd-card-cta h3{font-size:17px;font-weight:800;margin-bottom:10px;color:#fff}
.dxal-detail-page .dd-card-cta p{
  font-size:13px;line-height:1.75;color:rgba(255,255,255,.72);margin-bottom:20px;
}
.dxal-detail-page .dd-card-cta .btn{width:100%;justify-content:center}
.dxal-detail-page .dd-cta-sub{
  display:inline-flex;align-items:center;gap:5px;
  margin-top:16px;font-size:13px;font-weight:600;color:#67E8F9;
  text-decoration:none;transition:color .22s var(--ease),gap .22s var(--ease);
}
.dxal-detail-page .dd-cta-sub svg{width:14px;height:14px;display:block}
.dxal-detail-page .dd-cta-sub:hover{color:#fff;gap:9px}

/* ---------- 相关案例 ---------- */
.dxal-detail-page .dd-related{padding:88px 0}

/* ---------- 图片放大层 ---------- */
.dxal-detail-page .dd-lightbox{
  position:fixed;inset:0;z-index:999;
  background:rgba(6,15,43,.93);
  backdrop-filter:blur(6px);
  display:flex;align-items:flex-start;justify-content:center;
}
.dxal-detail-page .dd-lightbox[hidden]{display:none}
.dxal-detail-page .dd-lb-scroll{
  width:100%;height:100%;overflow:auto;
  padding:56px 24px 48px;
  display:flex;justify-content:center;
  /* ⚠️ 必须 flex-start：flex 容器默认 align-items:normal 等同 stretch，
     会把 height:auto 的长图纵向拉满整屏高度 → 1440×4998 被压成 1180×896，严重变形 */
  align-items:flex-start;
  -webkit-overflow-scrolling:touch;
}
.dxal-detail-page .dd-lb-scroll img{
  display:block;width:100%;max-width:1180px;height:auto;
  /* 双重保险：即便父级 align-items 被改回，图片自身也不参与拉伸 */
  flex:0 1 auto;align-self:flex-start;
  border-radius:var(--radius-md);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85);
  background:#fff;
}
.dxal-detail-page .dd-lb-close{
  position:fixed;top:18px;right:20px;z-index:2;
  width:44px;height:44px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.24);
  cursor:pointer;transition:background .22s var(--ease),transform .22s var(--ease);
}
.dxal-detail-page .dd-lb-close svg{width:18px;height:18px;display:block}
.dxal-detail-page .dd-lb-close:hover{background:rgba(255,255,255,.24);transform:rotate(90deg)}

/* ---------- 响应式 ---------- */
@media(max-width:1239px){
  .dxal-detail-page .dd-hero-grid{grid-template-columns:1fr;gap:36px;align-items:start}
  .dxal-detail-page .dd-hero-card{max-width:560px}
}
@media(max-width:1024px){
  .dxal-detail-page .dd-layout{grid-template-columns:1fr;gap:36px}
  .dxal-detail-page .dd-side{position:static;grid-template-columns:repeat(2,1fr)}
  .dxal-detail-page .dd-card-cta{grid-column:1 / -1}
  .dxal-detail-page .dd-body{padding:60px 0 72px}
}
@media(max-width:768px){
  .dxal-detail-page .dd-hero{padding:0 0 110px}
  .dxal-detail-page .dd-hero-inner{padding-top:20px}
  .dxal-detail-page .dd-crumb{margin-bottom:22px}
  .dxal-detail-page .dd-crumb ol{font-size:12px;gap:7px}
  .dxal-detail-page .dd-crumb li[aria-current]{max-width:12em}
  .dxal-detail-page .dd-lead{font-size:14.5px}
  .dxal-detail-page .dd-hero-actions .btn{width:100%;justify-content:center}
  .dxal-detail-page .dd-hero-card{padding:24px 22px 20px;max-width:none}
  .dxal-detail-page .dd-hero-card dl > div{flex-direction:column;gap:5px;padding:11px 0}
  .dxal-detail-page .dd-hero-card dd{text-align:left}
  .dxal-detail-page .dd-side{grid-template-columns:1fr}
  .dxal-detail-page .dd-shot-view{max-height:440px}
  .dxal-detail-page .dd-shot-view::after{height:110px}
  .dxal-detail-page .dd-shot-cap{flex-wrap:wrap;gap:10px 12px;padding:14px 15px}
  .dxal-detail-page .dd-shot-txt{flex-basis:calc(100% - 46px)}
  .dxal-detail-page .dd-shot-toggle{width:100%;justify-content:center}
  .dxal-detail-page .dd-url{font-size:11px;padding:4px 8px}
  .dxal-detail-page .dd-zoom span{display:none}
  .dxal-detail-page .dd-related{padding:64px 0}
  .dxal-detail-page .dd-lb-scroll{padding:60px 12px 36px}
}
@media(max-width:420px){
  .dxal-detail-page .dd-zoom{display:none}
  .dxal-detail-page .dd-shot-view{max-height:360px}
  .dxal-detail-page .dd-hero h1{font-size:27px}
}


/* ==================================================================
   资讯中心 zxzx.html —— 页面命名空间
   骨架复用全站通用 hero / section / cta / footer，仅在此加本页专属组件
   ================================================================== */
.zxzx-page{--zx-sticky:var(--hd-h)}

/* 视觉隐藏（本页专用，不做全局工具类以免污染其他页） */
.zxzx-page .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;
}

/* ---------- Hero：搜索框 ---------- */
.zxzx-page .zx-search{
  display:flex;align-items:center;gap:6px;max-width:580px;
  margin:0 0 14px;padding:6px 6px 6px 18px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);border-radius:999px;
  backdrop-filter:blur(10px);
  transition:border-color .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease);
}
.zxzx-page .zx-search:focus-within{
  border-color:rgba(103,232,249,.6);background:rgba(255,255,255,.11);
  box-shadow:0 0 0 4px rgba(34,211,238,.12);
}
.zxzx-page .zx-search-ic{display:inline-flex;flex-shrink:0;color:rgba(226,236,255,.5)}
.zxzx-page .zx-search-ic svg{width:18px;height:18px;display:block}
.zxzx-page .zx-search-input{
  flex:1;min-width:0;background:none;border:0;outline:none;color:#fff;
  font-family:inherit;font-size:15px;line-height:1.4;padding:12px 10px;
  -webkit-appearance:none;appearance:none;
}
.zxzx-page .zx-search-input::placeholder{color:rgba(226,236,255,.42)}
.zxzx-page .zx-search-input::-webkit-search-cancel-button{filter:invert(1);opacity:.5}
.zxzx-page .zx-search-btn{
  flex-shrink:0;font-family:inherit;font-size:14px;font-weight:700;color:#fff;
  background:var(--grad);border:0;border-radius:999px;padding:13px 24px;cursor:pointer;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),filter .22s var(--ease);
}
.zxzx-page .zx-search-btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px -10px rgba(37,99,235,.8)}
.zxzx-page .zx-search-btn:active{transform:scale(.97)}
.zxzx-page .zx-search-hint{font-size:12.5px;color:rgba(226,236,255,.46);line-height:1.7;margin-bottom:0}

/* hero 左列轨道兜底：搜索框的长 placeholder 让 .zx-search-input 的 min-content 达到
   500~660px，把 1fr 轨道顶到 560px（390 视口）后被 .hero 的 overflow:hidden 裁掉，
   标题与搜索框右侧被切。minmax(0,…) 允许轨道收缩到容器宽度。 */
.zxzx-page .hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
@media(max-width:900px){
  .zxzx-page .hero-grid{grid-template-columns:minmax(0,1fr)}
}

/* Hero 右侧玻璃卡内的「最新发布」列表 */
.zxzx-page .zx-hero-list{display:block}
.zxzx-page .zx-hero-item{
  display:flex;align-items:center;gap:12px;padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.1);
  text-decoration:none;transition:transform .22s var(--ease);
}
.zxzx-page .zx-hero-item:last-child{border-bottom:0;padding-bottom:4px}
.zxzx-page .zx-hero-item:hover{transform:translateX(3px)}
.zxzx-page .zx-hero-cat{
  flex-shrink:0;font-size:11.5px;font-weight:700;color:var(--cyan-soft);
  background:rgba(103,232,249,.13);border:1px solid rgba(103,232,249,.22);
  border-radius:7px;padding:3px 8px;line-height:1.5;
}
.zxzx-page .zx-hero-t{
  flex:1;min-width:0;font-size:13px;font-weight:600;line-height:1.5;
  color:rgba(255,255,255,.84);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:color .22s var(--ease);
}
.zxzx-page .zx-hero-item:hover .zx-hero-t{color:#fff}
.zxzx-page .zx-hero-d{
  flex-shrink:0;font-size:11.5px;color:rgba(226,236,255,.4);
  font-variant-numeric:tabular-nums;
}

/* ---------- 数据带 ---------- */
.zxzx-page .zx-band{padding:64px 0 0;position:relative}
.zxzx-page .zx-band-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.zxzx-page .zx-band-item{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:30px 26px;box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.zxzx-page .zx-band-item:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:#CFDBEC}
.zxzx-page .zx-band-item .n{
  font-family:var(--font-display);font-size:clamp(30px,3vw,40px);font-weight:800;
  line-height:1;letter-spacing:-.02em;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.zxzx-page .zx-band-item .n sup{font-size:.46em;vertical-align:super;letter-spacing:0}
.zxzx-page .zx-band-item .t{font-size:14px;font-weight:700;color:var(--ink);margin:12px 0 7px}
.zxzx-page .zx-band-item p{font-size:12.5px;line-height:1.7;color:var(--ink-3)}

/* ---------- 主区两栏 ---------- */
.zxzx-page .zx-main{padding:76px 0 92px}
.zxzx-page .zx-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;align-items:start;
}

/* ---------- 吸顶筛选条 ---------- */
.zxzx-page .zx-bar{
  position:sticky;top:var(--zx-sticky);z-index:30;
  display:flex;align-items:center;gap:18px;
  margin:0 -2px 24px;padding:12px 2px;
  background:rgba(246,248,252,.94);
  backdrop-filter:blur(12px) saturate(1.3);
  border-bottom:1px solid var(--line);
}
.zxzx-page .zx-pills{
  flex:1;min-width:0;display:flex;gap:9px;
  overflow-x:auto;padding:2px 0 6px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.zxzx-page .zx-pills::-webkit-scrollbar{display:none}
/* ⚠️ 不要把 13 个 pill 改成 flex-wrap：
   双栏布局下列表列宽只有 745~905px，13 个 pill 会折成 3 行 → 吸顶条高 161px，
   白占 1/4 屏；且 1280 / 1100 / 1024 折出 3/2/3 行，视觉不稳定。
   → 保持单行横滚（吸顶条稳定 71px），用边缘渐隐 + 计数区提示告诉用户还能滑。
   .can-l / .can-r 由 JS 按 scrollLeft 切换，滚到尽头就不渐隐。 */
.zxzx-page .zx-pills.can-r{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 52px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 52px),transparent);
}
.zxzx-page .zx-pills.can-l.can-r{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 52px,#000 calc(100% - 52px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 52px,#000 calc(100% - 52px),transparent);
}
.zxzx-page .zx-pills.can-l:not(.can-r){
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 52px);
          mask-image:linear-gradient(90deg,transparent,#000 52px);
}
.zxzx-page .zx-pill{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink-2);
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:9px 16px;cursor:pointer;white-space:nowrap;
  transition:background .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.zxzx-page .zx-pill em{
  font-style:normal;font-size:11.5px;font-weight:700;color:var(--ink-4);
  background:var(--bg-soft);border-radius:999px;padding:1px 7px;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.zxzx-page .zx-pill:hover{border-color:#C3D4EE;transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.zxzx-page .zx-pill.is-active{
  color:#fff;background:var(--grad);border-color:transparent;
  box-shadow:0 12px 24px -12px rgba(37,99,235,.8);
}
.zxzx-page .zx-pill.is-active em{background:rgba(255,255,255,.26);color:#fff}
.zxzx-page .zx-pill:focus-visible{outline:2px solid var(--brand-600);outline-offset:2px}

.zxzx-page .zx-count-row{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:1px;
  font-size:12.5px;line-height:1.4;white-space:nowrap;
}
.zxzx-page .zx-count-row #zxCount{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:800;color:var(--ink);
}
.zxzx-page .zx-count-row #zxCount::before{
  content:"";width:3px;height:13px;border-radius:3px;background:var(--grad);
}
/* 单行横滚时才会出现：提示还有栏目在右边（JS 按是否溢出切 .is-scroll） */
.zxzx-page .zx-count-hint{display:none;font-size:11.5px;color:var(--ink-4)}
.zxzx-page .zx-bar.is-scroll .zx-count-hint{display:inline}
.zxzx-page .zx-count-row #zxRest{color:var(--ink-4)}

/* ---------- 文章网格 ---------- */
.zxzx-page .zx-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.zxzx-page .zx-card{
  position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.zxzx-page .zx-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.zxzx-page .zx-card[hidden]{display:none}
.zxzx-page .zx-card-link{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}

.zxzx-page .zx-thumb{position:relative;overflow:hidden;background:#E8EEF8;flex-shrink:0}
.zxzx-page .zx-card:not(.is-lead) .zx-thumb{aspect-ratio:4 / 3}
.zxzx-page .zx-thumb img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .55s var(--ease-out);
}
.zxzx-page .zx-card:hover .zx-thumb img{transform:scale(1.06)}
.zxzx-page .zx-cat{
  position:absolute;left:12px;top:12px;z-index:2;
  font-size:12px;font-weight:700;color:#fff;letter-spacing:.01em;
  background:rgba(6,15,43,.7);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:5px 11px;
}
.zxzx-page .zx-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.zxzx-page .zx-title{
  font-size:16px;font-weight:700;line-height:1.52;color:var(--ink);
  margin-bottom:8px;overflow-wrap:break-word;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .25s var(--ease);
}
.zxzx-page .zx-card:hover .zx-title{color:var(--brand-600)}
.zxzx-page .zx-desc{
  font-size:13px;line-height:1.72;color:var(--ink-3);margin-bottom:16px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.zxzx-page .zx-meta{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:14px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--ink-4);font-variant-numeric:tabular-nums;
}
.zxzx-page .zx-read{
  display:inline-flex;align-items:center;gap:4px;font-weight:700;color:var(--brand-600);
  transition:gap .25s var(--ease);
}
.zxzx-page .zx-read svg{width:14px;height:14px;display:block}
.zxzx-page .zx-card:hover .zx-read{gap:9px}

/* 头条卡：整行铺满 + 左图右文 */
.zxzx-page .zx-card.is-lead{grid-column:1 / -1}
.zxzx-page .zx-card.is-lead .zx-card-link{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:stretch;
}
.zxzx-page .zx-card.is-lead .zx-thumb{aspect-ratio:16 / 10}
.zxzx-page .zx-card.is-lead .zx-body{padding:34px 36px}
.zxzx-page .zx-card.is-lead .zx-title{
  font-size:clamp(19px,1.75vw,25px);line-height:1.42;margin-bottom:12px;
  -webkit-line-clamp:3;
}
.zxzx-page .zx-card.is-lead .zx-desc{font-size:14px;line-height:1.78;-webkit-line-clamp:3;margin-bottom:18px}

/* ---------- 空态 ---------- */
.zxzx-page .zx-empty{
  text-align:center;padding:72px 24px;margin-bottom:8px;
  background:#fff;border:1px dashed #D5DFEE;border-radius:var(--radius-lg);
}
.zxzx-page .zx-empty[hidden]{display:none}
.zxzx-page .zx-empty-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:60px;height:60px;border-radius:50%;margin-bottom:18px;
  background:var(--bg-soft);color:var(--ink-4);
}
.zxzx-page .zx-empty-ic svg{width:26px;height:26px;display:block}
.zxzx-page .zx-empty h3{font-size:18px;font-weight:800;color:var(--ink);margin-bottom:8px}
.zxzx-page .zx-empty p{font-size:13.5px;color:var(--ink-3);line-height:1.7;margin-bottom:22px}

/* ---------- 加载更多 ---------- */
.zxzx-page .zx-more-wrap{text-align:center;margin-top:40px}
.zxzx-page .zx-more-wrap[hidden]{display:none}
.zxzx-page .zx-more svg{transition:transform .3s var(--ease)}
.zxzx-page .zx-more:hover svg{transform:translateY(3px)}

/* ---------- 侧栏 ---------- */
.zxzx-page .zx-side{position:sticky;top:96px;display:grid;gap:22px}
.zxzx-page .zx-side-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:24px 22px;box-shadow:var(--shadow-sm);
}
.zxzx-page .zx-side-card h3{
  position:relative;font-size:15px;font-weight:800;color:var(--ink);
  padding-left:12px;margin-bottom:14px;
}
.zxzx-page .zx-side-card h3::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:15px;border-radius:3px;background:var(--grad);
}
.zxzx-page .zx-latest{list-style:none}
.zxzx-page .zx-latest li{padding:11px 0;border-bottom:1px dashed var(--line)}
.zxzx-page .zx-latest li:first-child{padding-top:0}
.zxzx-page .zx-latest li:last-child{border-bottom:0;padding-bottom:0}
.zxzx-page .zx-latest a{display:block;text-decoration:none;transition:color .22s var(--ease)}
.zxzx-page .zx-latest-t{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:13.5px;font-weight:600;line-height:1.6;color:var(--ink-2);
  transition:color .22s var(--ease);
}
.zxzx-page .zx-latest a:hover .zx-latest-t{color:var(--brand-600)}
.zxzx-page .zx-latest-m{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
.zxzx-page .zx-latest-m em{
  font-style:normal;font-size:11.5px;font-weight:700;color:var(--brand-600);
  background:var(--bg-soft);border-radius:999px;padding:2px 9px;white-space:nowrap;
}
.zxzx-page .zx-latest time{
  font-size:12px;color:var(--ink-4);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.zxzx-page .zx-side-cta{
  background:linear-gradient(160deg,#0B1B3F 0%,#16357F 58%,#1B4FA8 100%);
  border-color:transparent;
}
.zxzx-page .zx-side-cta h3{color:#fff}
.zxzx-page .zx-side-cta h3::before{background:linear-gradient(180deg,var(--cyan-soft),var(--violet-bright))}
.zxzx-page .zx-side-cta p{font-size:13px;line-height:1.78;color:rgba(255,255,255,.72);margin-bottom:20px}
.zxzx-page .zx-side-cta .btn{width:100%;justify-content:center}
.zxzx-page .zx-side-sub{
  display:inline-block;margin-top:16px;font-size:13px;font-weight:600;
  color:var(--cyan-soft);text-decoration:none;
  transition:color .22s var(--ease),transform .22s var(--ease);
}
.zxzx-page .zx-side-sub:hover{color:#fff;transform:translateX(3px)}

/* ---------- 栏目总览 ---------- */
.zxzx-page .zx-topics-sec{background:#fff}
.zxzx-page .zx-topics{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.zxzx-page .zx-topic{
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;
  font-family:inherit;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:24px 22px;cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),
             background .3s var(--ease),border-color .3s var(--ease);
}
.zxzx-page .zx-topic:hover{
  transform:translateY(-6px);background:#fff;border-color:transparent;
  box-shadow:var(--shadow-lg);
}
.zxzx-page .zx-topic:focus-visible{outline:2px solid var(--brand-600);outline-offset:2px}
.zxzx-page .zx-topic-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:12px;margin-bottom:14px;
  background:var(--brand-50);color:var(--brand-600);
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.zxzx-page .zx-topic-ic svg{width:21px;height:21px;display:block}
.zxzx-page .zx-topic:hover .zx-topic-ic{background:var(--grad);color:#fff;transform:scale(1.06)}
.zxzx-page .zx-topic-t{font-size:15.5px;font-weight:800;color:var(--ink);margin-bottom:7px}
.zxzx-page .zx-topic-d{
  font-size:12.5px;line-height:1.7;color:var(--ink-3);margin-bottom:16px;flex:1;
}
.zxzx-page .zx-topic-n{
  display:flex;align-items:center;gap:7px;width:100%;padding-top:13px;
  border-top:1px solid var(--line);
  font-family:var(--font-display);font-size:20px;font-weight:800;line-height:1;
  color:var(--brand-600);font-variant-numeric:tabular-nums;
}
.zxzx-page .zx-topic-n i{
  font-family:var(--font-sans);font-style:normal;font-size:12px;font-weight:600;
  color:var(--ink-4);align-self:flex-end;padding-bottom:1px;
}
.zxzx-page .zx-topic-n em{
  margin-left:auto;font-family:var(--font-sans);font-style:normal;
  font-size:12.5px;font-weight:700;color:var(--brand-600);
  opacity:0;transform:translateX(-5px);align-self:center;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.zxzx-page .zx-topic:hover .zx-topic-n em{opacity:1;transform:translateX(0)}

/* ---------- 响应式 ---------- */
@media(max-width:1239px){
  .zxzx-page .zx-layout{grid-template-columns:minmax(0,1fr);gap:40px}
  .zxzx-page .zx-side{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  .zxzx-page .zx-topics{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1024px){
  .zxzx-page .zx-band-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zxzx-page .zx-card.is-lead .zx-card-link{grid-template-columns:minmax(0,1fr)}
  .zxzx-page .zx-card.is-lead .zx-thumb{aspect-ratio:16 / 9}
  .zxzx-page .zx-card.is-lead .zx-body{padding:26px 26px 28px}
}
@media(max-width:900px){
  .zxzx-page .zx-topics{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:768px){
  .zxzx-page .zx-main{padding:56px 0 72px}
  .zxzx-page .zx-band{padding:48px 0 0}
  .zxzx-page .zx-bar{
    top:60px;flex-direction:column;align-items:stretch;gap:8px;padding:10px 0;
  }
  .zxzx-page .zx-count-row{flex-direction:row;align-items:center;justify-content:space-between}
  .zxzx-page .zx-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .zxzx-page .zx-card.is-lead{grid-column:auto}
  .zxzx-page .zx-card.is-lead .zx-title{-webkit-line-clamp:2}
  .zxzx-page .zx-search{
    flex-wrap:wrap;border-radius:20px;padding:12px 14px;gap:8px;max-width:100%;
  }
  .zxzx-page .zx-search-input{width:100%;padding:10px 6px}
  .zxzx-page .zx-search-btn{
    width:100%;border-radius:13px;padding:14px;order:3;
  }
  .zxzx-page .zx-search-hint{order:4;margin-top:-6px}
  .zxzx-page .zx-side{grid-template-columns:minmax(0,1fr)}
  .zxzx-page .zx-more{width:100%;justify-content:center}
}
@media(max-width:560px){
  .zxzx-page .zx-band-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .zxzx-page .zx-topics{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:420px){
  .zxzx-page .zx-body{padding:18px 18px 20px}
  .zxzx-page .zx-card.is-lead .zx-body{padding:22px 20px 24px}
  .zxzx-page .zx-pill{font-size:13px;padding:8px 14px}
}

/* ---------- 资讯中心站点级入口（index.html 新闻区） ---------- */
.news-all{margin-top:38px;text-align:center}
.news-all .btn{margin-bottom:12px}
.news-all p{font-size:13.5px;line-height:1.75;color:var(--ink-4);margin:0}

/* ============================================================
   资讯内页 · 通用模板（zxzx-detail.html）
   body.zxzx-detail-page
   ⚠️ 所有选择器都带 .zxzx-detail-page 前缀，不要写逗号并列
   ============================================================ */
.zxzx-detail-page{--zd-top:var(--hd-h);--zd-fs:17px}
.zxzx-detail-page .zd-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 文章头（深色，自复制一份极光/网格线/波浪，共用 .hero 下的拿不到） ---------- */
.zxzx-detail-page .zd-hero{position:relative;overflow:hidden;background:var(--brand-950);padding:46px 0 132px}
.zxzx-detail-page .zd-hero .aurora{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.zxzx-detail-page .zd-hero .aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;will-change:transform}
.zxzx-detail-page .zd-hero .aurora i:nth-child(1){width:560px;height:560px;background:radial-gradient(circle,#1D4ED8 0%,transparent 65%);top:-300px;right:-140px}
.zxzx-detail-page .zd-hero .aurora i:nth-child(2){width:460px;height:460px;background:radial-gradient(circle,#06B6D4 0%,transparent 65%);bottom:-260px;left:-140px;opacity:.32}
.zxzx-detail-page .zd-hero .aurora i:nth-child(3){width:380px;height:380px;background:radial-gradient(circle,#818CF8 0%,transparent 65%);top:18%;left:44%;opacity:.22}
.zxzx-detail-page .zd-hero .gridlines{position:absolute;inset:0;pointer-events:none;opacity:.5;
  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:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent)}
.zxzx-detail-page .zd-hero .wave{position:absolute;left:0;right:0;bottom:-2px;z-index:2;pointer-events:none}
.zxzx-detail-page .zd-hero .wave svg{display:block;width:100%;height:88px}
.zxzx-detail-page .zd-hero-inner{position:relative;z-index:3;max-width:920px}

/* 面包屑 */
.zxzx-detail-page .zd-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:13px;line-height:1.6;color:rgba(226,236,255,.5);margin-bottom:22px}
.zxzx-detail-page .zd-crumb a{color:rgba(226,236,255,.74);text-decoration:none;transition:color .22s var(--ease)}
.zxzx-detail-page .zd-crumb a:hover{color:#fff}
.zxzx-detail-page .zd-crumb .sep{opacity:.45}
.zxzx-detail-page .zd-crumb .cur{color:rgba(226,236,255,.5)}

/* 栏目标签 */
.zxzx-detail-page .zd-cat{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 14px;margin-bottom:18px;
  border-radius:999px;font-size:12.5px;font-weight:700;letter-spacing:.03em;text-decoration:none;
  color:var(--cyan-bright);background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.3);
  transition:background .22s var(--ease)}
.zxzx-detail-page .zd-cat .dot{width:6px;height:6px;border-radius:50%;background:var(--cyan-bright);box-shadow:0 0 0 3px rgba(34,211,238,.2)}
.zxzx-detail-page .zd-cat:hover{background:rgba(34,211,238,.2)}

/* 标题 ⚠️ 必须 white-space:normal —— 长标题要自动换行 */
.zxzx-detail-page .zd-hero h1{font-size:clamp(23px,2.9vw,40px);font-weight:800;line-height:1.28;
  letter-spacing:-.01em;color:#fff;margin:0 0 20px;white-space:normal;overflow-wrap:break-word}

.zxzx-detail-page .zd-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;font-size:13.5px;color:rgba(226,236,255,.66)}
.zxzx-detail-page .zd-meta span{display:inline-flex;align-items:center;gap:7px}
.zxzx-detail-page .zd-meta svg{width:15px;height:15px;flex:0 0 auto;opacity:.8}
.zxzx-detail-page .zd-meta time{font-variant-numeric:tabular-nums}

/* 工具条 */
.zxzx-detail-page .zd-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:28px}
.zxzx-detail-page .zd-tool{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 15px;
  border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);
  color:rgba(226,236,255,.86);font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;text-decoration:none;
  transition:background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease)}
.zxzx-detail-page .zd-tool:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.32);color:#fff}
.zxzx-detail-page .zd-tool svg{width:15px;height:15px;flex:0 0 auto}
.zxzx-detail-page .zd-tool.is-done{color:#6EE7B7;border-color:rgba(110,231,183,.42);background:rgba(16,185,129,.16)}
.zxzx-detail-page .zd-fs{min-width:96px}
.zxzx-detail-page .zd-toast{margin-left:2px;font-size:12.5px;color:var(--cyan-bright);opacity:0;transition:opacity .25s var(--ease)}
.zxzx-detail-page .zd-toast.is-on{opacity:1}

/* ---------- 封面 ---------- */
.zxzx-detail-page .zd-cover{position:relative;z-index:4;max-width:920px;margin:-64px auto 0;
  border-radius:var(--radius-xl);overflow:hidden;background:#fff;box-shadow:var(--shadow-lg)}
.zxzx-detail-page .zd-cover img{display:block;width:100%;height:auto}

/* ---------- 主体布局 ---------- */
.zxzx-detail-page .zd-wrap{padding:60px 0 24px}
.zxzx-detail-page .zd-layout{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:48px;align-items:start}
.zxzx-detail-page .zd-main{min-width:0}
.zxzx-detail-page .zd-side{min-width:0;position:sticky;top:calc(var(--zd-top) + 18px);display:flex;flex-direction:column;gap:16px}

/* ---------- 正文 ---------- */
.zxzx-detail-page .zd-body{font-size:var(--zd-fs);line-height:1.95;color:var(--ink-2);word-break:break-word}
.zxzx-detail-page .zd-body p{margin:0 0 22px}
.zxzx-detail-page .zd-body p:last-child{margin-bottom:0}
.zxzx-detail-page .zd-body strong{color:var(--ink);font-weight:700}
.zxzx-detail-page .zd-body a{color:var(--brand-600);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(37,99,235,.32)}
.zxzx-detail-page .zd-body a:hover{text-decoration-color:var(--brand-600)}
.zxzx-detail-page .zd-body>p.is-lead{font-size:calc(var(--zd-fs) + 2px);color:var(--ink-3)}
.zxzx-detail-page .zd-body h2,.zxzx-detail-page .zd-body h3{
  scroll-margin-top:calc(var(--zd-top) + 24px);
  font-family:var(--font-display);font-weight:800;color:var(--ink);letter-spacing:-.01em;line-height:1.45}
.zxzx-detail-page .zd-body h2{position:relative;font-size:calc(var(--zd-fs) + 7px);margin:44px 0 18px;padding-left:18px}
.zxzx-detail-page .zd-body h2::before{content:"";position:absolute;left:0;top:.34em;bottom:.34em;width:4px;border-radius:4px;background:var(--grad)}
.zxzx-detail-page .zd-body h3{font-size:calc(var(--zd-fs) + 3px);margin:32px 0 14px}
.zxzx-detail-page .zd-body ul,.zxzx-detail-page .zd-body ol{margin:0 0 22px;padding-left:1.4em}
.zxzx-detail-page .zd-body li{margin:0 0 8px}
.zxzx-detail-page .zd-body blockquote{margin:0 0 22px;padding:14px 18px;border-left:3px solid var(--brand-500);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:var(--bg-soft);color:var(--ink-3)}

/* 正文插图 */
.zxzx-detail-page .zd-fig{margin:30px 0}
.zxzx-detail-page .zd-fig-btn{position:relative;display:block;width:100%;padding:0;border:0;background:none;
  cursor:zoom-in;border-radius:var(--radius-lg);overflow:hidden}
.zxzx-detail-page .zd-fig-btn img{display:block;width:100%;height:auto;border-radius:var(--radius-lg);
  transition:transform .45s var(--ease)}
.zxzx-detail-page .zd-fig-btn:hover img{transform:scale(1.03)}
.zxzx-detail-page .zd-fig-zoom{position:absolute;right:14px;bottom:14px;width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;color:#fff;background:rgba(6,15,43,.55);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .25s var(--ease)}
.zxzx-detail-page .zd-fig-btn:hover .zd-fig-zoom,.zxzx-detail-page .zd-fig-btn:focus-visible .zd-fig-zoom{opacity:1}
.zxzx-detail-page .zd-fig-zoom svg{width:17px;height:17px;display:block}

/* 标签 */
.zxzx-detail-page .zd-tags{display:flex;flex-wrap:wrap;gap:10px;margin:38px 0 0;padding-top:26px;border-top:1px solid var(--line)}
.zxzx-detail-page .zd-tags em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--ink-4);align-self:center;margin-right:2px}
.zxzx-detail-page .zd-tags a{display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:999px;
  font-size:12.5px;font-weight:600;color:var(--ink-3);text-decoration:none;background:var(--bg-soft);border:1px solid var(--line);
  transition:color .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease)}
.zxzx-detail-page .zd-tags a:hover{color:var(--brand-600);border-color:rgba(37,99,235,.35);background:#fff}

/* 版权声明 */
.zxzx-detail-page .zd-copy{margin:20px 0 0;padding:15px 18px;border-radius:var(--radius-md);
  background:var(--bg-soft);border:1px solid var(--line);font-size:12.5px;line-height:1.85;color:var(--ink-4)}

/* 上下篇 */
.zxzx-detail-page .zd-pn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:24px}
.zxzx-detail-page .zd-pn a,.zxzx-detail-page .zd-pn .is-off{display:block;padding:16px 18px;border-radius:var(--radius-lg);
  background:#fff;border:1px solid var(--line);text-decoration:none;transition:border-color .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease)}
.zxzx-detail-page .zd-pn a:hover{border-color:rgba(37,99,235,.32);box-shadow:var(--shadow-md);transform:translateY(-2px)}
/* ⚠️ 原 opacity:.7 把整张卡连同文字一起调淡 → 上一篇/下一篇 1.85:1、已是最新 4.31:1，双双不达 AA。
   改用「虚线边框 + 浅底」表达禁用态，不再动透明度。 */
.zxzx-detail-page .zd-pn .is-off{background:var(--bg-soft);border-style:dashed}
.zxzx-detail-page .zd-pn .zd-pn-k{display:flex;align-items:center;gap:6px;font-size:11.5px;letter-spacing:.08em;
  color:var(--ink-4);margin-bottom:8px}
.zxzx-detail-page .zd-pn .zd-pn-k svg{width:13px;height:13px;flex:0 0 auto}
.zxzx-detail-page .zd-pn .zd-pn-r{text-align:right;justify-content:flex-end}
.zxzx-detail-page .zd-pn-t{font-size:14.5px;font-weight:600;line-height:1.62;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.zxzx-detail-page .zd-pn a:hover .zd-pn-t{color:var(--brand-600)}

/* ---------- 侧栏卡片 ---------- */
.zxzx-detail-page .zd-box{border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;padding:19px 19px 21px;box-shadow:var(--shadow-sm)}
.zxzx-detail-page .zd-box h3{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:800;color:var(--ink);margin:0 0 13px}
.zxzx-detail-page .zd-box h3::before{content:"";width:3px;height:15px;border-radius:3px;background:var(--grad);flex:0 0 auto}

/* 目录 */
.zxzx-detail-page .zd-toc ol{list-style:none;margin:0;padding:0 0 0 1px;border-left:1px solid var(--line)}
.zxzx-detail-page .zd-toc a{display:block;padding:8px 4px 8px 15px;font-size:13.5px;line-height:1.62;
  color:var(--ink-3);text-decoration:none;transition:color .22s var(--ease),box-shadow .22s var(--ease)}
.zxzx-detail-page .zd-toc a:hover{color:var(--brand-600)}
.zxzx-detail-page .zd-toc a.is-active{color:var(--brand-600);font-weight:700;box-shadow:-2px 0 0 var(--brand-600)}

/* 同栏目推荐 */
.zxzx-detail-page .zd-rel{list-style:none;margin:0;padding:0}
.zxzx-detail-page .zd-rel li+li{border-top:1px dashed var(--line)}
.zxzx-detail-page .zd-rel a{display:block;padding:11px 0;text-decoration:none}
.zxzx-detail-page .zd-rel-t{font-size:13.5px;font-weight:600;line-height:1.65;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .22s var(--ease)}
.zxzx-detail-page .zd-rel a:hover .zd-rel-t{color:var(--brand-600)}
.zxzx-detail-page .zd-rel-m{margin-top:5px;font-size:12px;color:var(--ink-4);font-variant-numeric:tabular-nums}

/* 侧栏 CTA */
.zxzx-detail-page .zd-scta{position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:22px 20px;
  background:var(--grad);color:#fff;box-shadow:var(--shadow-brand)}
.zxzx-detail-page .zd-scta::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;
  background:rgba(255,255,255,.12);pointer-events:none}
.zxzx-detail-page .zd-scta h3{margin:0 0 8px;font-size:16px;font-weight:800;color:#fff}
.zxzx-detail-page .zd-scta p{font-size:12.8px;line-height:1.75;color:rgba(255,255,255,.82);margin:0 0 15px}
.zxzx-detail-page .zd-scta a{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border-radius:999px;
  font-size:13px;font-weight:700;text-decoration:none;background:#fff;color:var(--brand-700);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.zxzx-detail-page .zd-scta a:hover{transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(0,0,0,.4)}
.zxzx-detail-page .zd-scta a svg{width:14px;height:14px;flex:0 0 auto}

/* ---------- 移动端目录 ---------- */
.zxzx-detail-page .zd-tocm{display:none;margin-bottom:26px;border:1px solid var(--line);border-radius:var(--radius-lg);
  background:#fff;box-shadow:var(--shadow-sm);overflow:hidden}
.zxzx-detail-page .zd-tocm[hidden]{display:none}
.zxzx-detail-page .zd-tocm-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  height:54px;padding:0 18px;background:none;border:0;font-family:inherit;font-size:15px;font-weight:700;
  color:var(--ink);cursor:pointer}
.zxzx-detail-page .zd-tocm-btn svg{width:16px;height:16px;flex:0 0 auto;transition:transform .26s var(--ease)}
.zxzx-detail-page .zd-tocm.is-open .zd-tocm-btn svg{transform:rotate(180deg)}
.zxzx-detail-page .zd-tocm ol{list-style:none;margin:0;padding:0 18px 16px;border-left:0}
.zxzx-detail-page .zd-tocm a{display:block;padding:8px 4px 8px 13px;font-size:13.5px;line-height:1.62;
  color:var(--ink-3);text-decoration:none;border-left:1px solid var(--line)}
.zxzx-detail-page .zd-tocm a.is-active{color:var(--brand-600);font-weight:700;border-left-color:var(--brand-600)}

/* ---------- 延伸阅读 ---------- */
.zxzx-detail-page .zd-more{padding:18px 0 92px}
.zxzx-detail-page .zd-more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.zxzx-detail-page .zd-mcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;
  transition:transform .26s var(--ease),box-shadow .26s var(--ease),border-color .26s var(--ease)}
.zxzx-detail-page .zd-mcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.zxzx-detail-page .zd-mcard-img{aspect-ratio:16/10;overflow:hidden;background:var(--bg-soft)}
.zxzx-detail-page .zd-mcard-img img{display:block;width:100%;height:100%;object-fit:cover}
.zxzx-detail-page .zd-mcard-b{padding:18px 19px 20px}
.zxzx-detail-page .zd-mcard-c{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.04em;
  color:var(--brand-600);margin-bottom:8px}
.zxzx-detail-page .zd-mcard-t{font-size:15.5px;font-weight:700;line-height:1.6;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .22s var(--ease)}
.zxzx-detail-page .zd-mcard:hover .zd-mcard-t{color:var(--brand-600)}
.zxzx-detail-page .zd-mcard-d{margin-top:9px;font-size:13px;line-height:1.7;color:var(--ink-4);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.zxzx-detail-page .zd-mcard-m{margin-top:12px;font-size:12px;color:var(--ink-4);font-variant-numeric:tabular-nums}

/* ---------- 图片放大层 ---------- */
.zxzx-detail-page .zd-lb,.dxal-detail-page .zd-lb{position:fixed;inset:0;z-index:999;background:rgba(6,15,43,.94);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.zxzx-detail-page .zd-lb[hidden],.dxal-detail-page .zd-lb[hidden]{display:none}
.zxzx-detail-page .zd-lb-scroll,.dxal-detail-page .zd-lb-scroll{width:100%;height:100%;overflow:auto;padding:56px 24px 48px;
  display:flex;justify-content:center;
  /* ⚠️ 必须 flex-start：flex 容器 align-items 默认 normal 等同 stretch，
     会把 height:auto 的图纵向拉满整屏 → 严重变形 */
  align-items:flex-start;-webkit-overflow-scrolling:touch}
.zxzx-detail-page .zd-lb-scroll img,.dxal-detail-page .zd-lb-scroll img{display:block;width:100%;max-width:1080px;height:auto;
  flex:0 1 auto;align-self:flex-start;border-radius:var(--radius-md);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85);background:#fff}
.zxzx-detail-page .zd-lb-close,.dxal-detail-page .zd-lb-close{position:fixed;top:18px;right:20px;z-index:2;width:44px;height:44px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;color:#fff;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.24);cursor:pointer;
  transition:background .22s var(--ease),transform .22s var(--ease)}
.zxzx-detail-page .zd-lb-close svg,.dxal-detail-page .zd-lb-close svg{width:18px;height:18px;display:block}
.zxzx-detail-page .zd-lb-close:hover,.dxal-detail-page .zd-lb-close:hover{background:rgba(255,255,255,.24);transform:rotate(90deg)}

/* ---------- 响应式 ---------- */
@media(max-width:1239px){
  .zxzx-detail-page .zd-more-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1024px){
  .zxzx-detail-page .zd-layout{grid-template-columns:minmax(0,1fr);gap:36px}
  .zxzx-detail-page .zd-side{position:static;top:auto}
  .zxzx-detail-page .zd-tocm{display:block}
  .zxzx-detail-page .zd-box-toc{display:none}
  .zxzx-detail-page .zd-hero{padding:40px 0 118px}
  .zxzx-detail-page .zd-cover{margin-top:-52px}
}
@media(max-width:768px){
  .zxzx-detail-page .zd-wrap{padding:44px 0 16px}
  .zxzx-detail-page .zd-body{line-height:1.9}
  .zxzx-detail-page .zd-pn{grid-template-columns:minmax(0,1fr)}
  .zxzx-detail-page .zd-pn .zd-pn-r{text-align:left;justify-content:flex-start}
  .zxzx-detail-page .zd-hero h1{font-size:23px}
  .zxzx-detail-page .zd-tools{width:100%}
  .zxzx-detail-page .zd-tool{flex:1 1 auto}
}
@media(max-width:560px){
  .zxzx-detail-page .zd-more-grid{grid-template-columns:minmax(0,1fr)}
  .zxzx-detail-page .zd-cover{border-radius:var(--radius-lg);margin-top:-40px}
  .zxzx-detail-page .zd-meta{gap:8px 14px;font-size:12.8px}
}

/* ============================================================================
   关于我们 gywm.html —— 命名空间 .gywm-page
   ============================================================================ */
.gywm-page{--gy-top:96px}

/* ---------- Hero ---------- */
.gywm-page .hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}
/* 命名空间下的 hero-grid 特异性(0,2,0)高于全局 .hero-grid(0,1,0)，
   会盖掉 style.css:709 的 @media(max-width:900px) 单列规则 → 必须自己同步一份，
   否则 390px 下仍是双列，文案被挤成 200px 窄条 */
@media(max-width:900px){.gywm-page .hero-grid{grid-template-columns:minmax(0,1fr)}}
.gywm-page .gy-crumbs{display:flex;align-items:center;gap:9px;font-size:13px;color:rgba(226,236,255,.52);margin-bottom:20px;flex-wrap:wrap}
.gywm-page .gy-crumbs a{color:rgba(226,236,255,.72);text-decoration:none;transition:color .2s}
.gywm-page .gy-crumbs a:hover{color:#fff}
.gywm-page .gy-crumbs svg{width:12px;height:12px;flex:none;opacity:.55}
.gywm-page .gy-crumbs b{font-weight:600;color:var(--cyan-soft)}
.gywm-page .hero p.lead{max-width:580px}
.gywm-page .hero-stats .num small{font-size:.5em;font-weight:700;letter-spacing:0;margin-left:1px}

/* 服务矩阵（hero 卡内） */
.gywm-page .gy-matrix{display:flex;flex-wrap:wrap;gap:9px}
.gywm-page .gy-mx{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;color:#DCE9FF;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.gywm-page .gy-mx:hover{background:rgba(34,211,238,.16);border-color:rgba(34,211,238,.42);transform:translateY(-2px)}
.gywm-page .gy-mx i{width:5px;height:5px;border-radius:50%;flex:none;background:linear-gradient(120deg,var(--cyan-bright),var(--violet-bright))}
.gywm-page .gy-mx-note{position:relative;margin:18px 0 0;padding-top:16px;border-top:1px dashed rgba(255,255,255,.14);font-size:12.5px;line-height:1.7;color:rgba(226,236,255,.55)}

/* ---------- 01 公司简介 ---------- */
.gywm-page .gy-intro{display:grid;grid-template-columns:minmax(0,1.34fr) minmax(0,.66fr);gap:52px;align-items:start}
.gywm-page .gy-prose p{position:relative;font-size:16.5px;line-height:1.95;color:var(--ink-2);margin:0 0 20px}
.gywm-page .gy-prose p:last-child{margin-bottom:0}
.gywm-page .gy-prose p.is-lead{font-size:19px;line-height:1.85;font-weight:600;color:var(--ink);padding-left:22px;margin-bottom:26px}
.gywm-page .gy-prose p.is-lead::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:3px;border-radius:3px;background:var(--grad)}
.gywm-page .gy-prose strong{font-weight:700;color:var(--brand-700)}
.gywm-page .gy-prose .gy-em{font-weight:700;color:var(--cyan-600)}

.gywm-page .gy-side{position:sticky;top:var(--gy-top);display:grid;gap:18px}
.gywm-page .gy-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 24px;box-shadow:var(--shadow-sm)}
.gywm-page .gy-card>h3{position:relative;padding-left:14px;font-size:16px;font-weight:800;color:var(--ink);margin:0 0 18px;line-height:1.45}
.gywm-page .gy-card>h3::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:3px;border-radius:3px;background:var(--grad)}
.gywm-page .gy-card>h3 span{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-400);margin-top:5px}
.gywm-page .gy-dl{margin:0;display:grid;gap:0}
.gywm-page .gy-dl>div{display:flex;gap:14px;justify-content:space-between;align-items:baseline;padding:11px 0;border-bottom:1px dashed var(--line)}
.gywm-page .gy-dl>div:last-child{border-bottom:0;padding-bottom:0}
.gywm-page .gy-dl>div:first-child{padding-top:0}
.gywm-page .gy-dl dt{flex:none;font-size:12.5px;color:var(--ink-4)}
.gywm-page .gy-dl dd{margin:0;text-align:right;font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.5;word-break:break-word}
.gywm-page .gy-dl dd a{color:var(--brand-600);text-decoration:none}
.gywm-page .gy-dl dd a:hover{text-decoration:underline}

.gywm-page .gy-side-cta{position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:26px 24px;color:#fff;background:linear-gradient(150deg,var(--brand-900) 0%,var(--brand-700) 58%,#0E7490 100%);box-shadow:var(--shadow-brand)}
.gywm-page .gy-side-cta::before{content:"";position:absolute;width:230px;height:230px;border-radius:50%;top:-96px;right:-76px;background:radial-gradient(circle,rgba(34,211,238,.4),transparent 70%);pointer-events:none}
.gywm-page .gy-side-cta h4{position:relative;font-size:17px;font-weight:800;margin:0 0 9px;line-height:1.5}
.gywm-page .gy-side-cta p{position:relative;font-size:13.5px;line-height:1.75;color:rgba(226,236,255,.78);margin:0 0 18px}
.gywm-page .gy-side-cta .btn{position:relative;width:100%;justify-content:center}
.gywm-page .gy-side-cta .gy-tel{position:relative;display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:15px;font-weight:800;color:var(--cyan-soft);text-decoration:none;font-variant-numeric:tabular-nums}
.gywm-page .gy-side-cta .gy-tel:hover{color:#fff}
.gywm-page .gy-side-cta .gy-tel svg{width:15px;height:15px;flex:none}

/* ---------- 02 发展历程 ---------- */
.gywm-page .gy-tl-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:24px;flex-wrap:wrap}
.gywm-page .gy-tl-legend{font-size:13px;color:var(--ink-4);line-height:1.7}
.gywm-page .gy-tl-legend b{color:var(--brand-600);font-weight:800;font-variant-numeric:tabular-nums}
.gywm-page .gy-tl-nav{display:flex;gap:10px;flex:none}
.gywm-page .gy-tl-nav button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .24s var(--ease),box-shadow .24s var(--ease),border-color .24s,color .24s}
.gywm-page .gy-tl-nav button:hover:not(:disabled){border-color:var(--brand-300);color:var(--brand-600);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.gywm-page .gy-tl-nav button:disabled{opacity:.36;cursor:not-allowed}
.gywm-page .gy-tl-nav svg{width:16px;height:16px}

.gywm-page .gy-tl-scroll{position:relative;overflow-x:auto;overflow-y:hidden;padding:6px 4px 8px;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
.gywm-page .gy-tl-scroll::-webkit-scrollbar{display:none}
.gywm-page .gy-tl-scroll.can-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
.gywm-page .gy-tl-scroll.can-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px);mask-image:linear-gradient(90deg,transparent,#000 56px)}
.gywm-page .gy-tl-scroll.can-l.can-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent)}
.gywm-page .gy-tl-track{position:relative;display:flex;align-items:flex-start;min-width:max-content}
.gywm-page .gy-tl-track::before{content:"";position:absolute;left:52px;right:52px;top:6px;height:2px;background:linear-gradient(90deg,rgba(37,99,235,.22),rgba(6,182,212,.28))}
.gywm-page .gy-tl-item{position:relative;flex:0 0 auto;width:104px;display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 0 4px;background:none;border:0;cursor:pointer;font-family:inherit;color:inherit}
.gywm-page .gy-tl-item:focus-visible{outline:2px solid var(--brand-400);outline-offset:3px;border-radius:10px}
.gywm-page .gy-tl-dot{position:relative;z-index:1;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--brand-300);flex:none;transition:transform .26s var(--ease),background .26s var(--ease),border-color .26s,box-shadow .26s}
.gywm-page .gy-tl-y{font-size:17px;font-weight:800;color:var(--ink-4);font-variant-numeric:tabular-nums;transition:color .24s;line-height:1.1}
.gywm-page .gy-tl-m{font-size:11.5px;font-weight:600;color:var(--ink-4);letter-spacing:.08em;font-variant-numeric:tabular-nums;margin-top:-6px;opacity:.8}
.gywm-page .gy-tl-item:hover .gy-tl-y{color:var(--brand-600)}
.gywm-page .gy-tl-item:hover .gy-tl-dot{border-color:var(--brand-400);transform:scale(1.12)}
.gywm-page .gy-tl-item.is-on .gy-tl-dot{background:var(--grad);border-color:transparent;transform:scale(1.22);box-shadow:0 0 0 5px rgba(37,99,235,.13)}
.gywm-page .gy-tl-item.is-on .gy-tl-y{color:var(--brand-600)}
.gywm-page .gy-tl-item.is-on .gy-tl-m{color:var(--cyan-600);opacity:1}

.gywm-page .gy-tl-panel{position:relative;margin-top:26px;overflow:hidden;border-radius:var(--radius-xl);padding:38px 42px;display:flex;align-items:center;gap:40px;color:#fff;background:linear-gradient(150deg,var(--brand-950) 0%,var(--brand-800) 62%,#0E7490 100%);box-shadow:var(--shadow-lg)}
.gywm-page .gy-tl-panel::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;top:-150px;right:-90px;background:radial-gradient(circle,rgba(34,211,238,.34),transparent 70%);pointer-events:none}
.gywm-page .gy-tl-panel::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.3;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(ellipse 70% 90% at 85% 10%,#000,transparent 72%);mask-image:radial-gradient(ellipse 70% 90% at 85% 10%,#000,transparent 72%)}
.gywm-page .gy-tl-big{position:relative;z-index:1;flex:none;text-align:right;padding-right:40px;border-right:1px solid rgba(255,255,255,.16)}
.gywm-page .gy-tl-big b{display:block;font-family:var(--font-display);font-size:clamp(46px,5.2vw,64px);font-weight:800;line-height:1;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fff,#8FD8F5);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.gywm-page .gy-tl-big span{display:block;margin-top:10px;font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--cyan-soft)}
.gywm-page .gy-tl-txt{position:relative;z-index:1;flex:1;min-width:0}
.gywm-page .gy-tl-idx{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan-bright);margin-bottom:13px}
.gywm-page .gy-tl-idx::before{content:"";width:22px;height:1px;background:rgba(103,232,249,.5)}
.gywm-page .gy-tl-txt h3{font-size:clamp(18px,2.05vw,23px);font-weight:700;line-height:1.62;margin:0;color:#fff}
.gywm-page .gy-tl-panel.is-swap .gy-tl-big,.gywm-page .gy-tl-panel.is-swap .gy-tl-txt{animation:gyFade .38s var(--ease-out)}
@keyframes gyFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- 03 我们的客户 ---------- */
.gywm-page .gy-quote{position:relative;max-width:960px;margin:0 auto 22px;padding:28px 34px 28px 40px;border-radius:var(--radius-lg);background:var(--grad-soft);border:1px solid rgba(37,99,235,.13);font-size:16.5px;line-height:1.92;color:var(--brand-800);font-weight:600}
.gywm-page .gy-quote::before{content:"\201C";position:absolute;left:14px;top:8px;font-family:Georgia,"Times New Roman",serif;font-size:60px;line-height:1;color:rgba(37,99,235,.2)}
.gywm-page .gy-quote-desc{max-width:960px;margin:0 auto 46px;text-align:center;font-size:15.5px;line-height:1.9;color:var(--ink-3)}
.gywm-page .gy-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:960px;margin:0 auto 52px}
.gywm-page .gy-num{position:relative;overflow:hidden;padding:26px 22px;border-radius:var(--radius-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);text-align:center;transition:transform .26s var(--ease),box-shadow .26s var(--ease),border-color .26s}
.gywm-page .gy-num::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad)}
.gywm-page .gy-num:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--brand-200)}
.gywm-page .gy-num b{display:block;font-family:var(--font-display);font-size:clamp(28px,3.2vw,38px);font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.gywm-page .gy-num span{display:block;margin-top:9px;font-size:13.5px;color:var(--ink-3)}

/* 行业覆盖（浅色语境下的 gy-mx 变体） */
.gywm-page .gy-inds{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:960px;margin:0 auto 42px}
.gywm-page .gy-inds .gy-mx{color:var(--brand-700);background:var(--brand-50);border-color:rgba(37,99,235,.14)}
.gywm-page .gy-inds .gy-mx:hover{background:#fff;border-color:var(--brand-300);color:var(--brand-600)}
.gywm-page .gy-inds .gy-mx i{background:var(--grad)}

.gywm-page .gy-wall{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);list-style:none;margin:0;padding:0}
.gywm-page .gy-wall li{display:flex;align-items:center;justify-content:center;background:#fff;padding:20px 16px;transition:background .26s var(--ease)}
.gywm-page .gy-wall li:hover{background:var(--brand-50)}
.gywm-page .gy-wall img{display:block;width:100%;max-width:132px;height:auto;align-self:center;filter:grayscale(1);opacity:.58;transition:filter .32s var(--ease),opacity .32s var(--ease),transform .32s var(--ease)}
.gywm-page .gy-wall li:hover img{filter:none;opacity:1;transform:scale(1.06)}

/* ---------- 04 设计呈现 ---------- */
.gywm-page .gy-shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.gywm-page .gy-shot{position:relative;overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--bg-soft);box-shadow:var(--shadow-sm);margin:0;aspect-ratio:460/310}
.gywm-page .gy-shot img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gywm-page .gy-shot:hover img{transform:scale(1.045)}
.gywm-page .gy-shot-a{aspect-ratio:1090/640}

/* ---------- 05 联系我们 ---------- */
.gywm-page .gy-contact{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:38px;align-items:stretch}
.gywm-page .gy-ccards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-content:start}
.gywm-page .gy-ccard{display:flex;gap:14px;align-items:flex-start;padding:20px 18px;border-radius:var(--radius-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);color:inherit;text-decoration:none;transition:transform .26s var(--ease),box-shadow .26s var(--ease),border-color .26s}
.gywm-page a.gy-ccard:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--brand-200)}
.gywm-page .gy-ccard .ic{width:40px;height:40px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--brand-600);background:linear-gradient(140deg,var(--brand-50),#ECFEFF);border:1px solid rgba(37,99,235,.14)}
.gywm-page .gy-ccard .ic svg{width:18px;height:18px}
.gywm-page .gy-ccard .tx{min-width:0;flex:1}
.gywm-page .gy-ccard .k{display:block;font-size:12.5px;color:var(--ink-4);margin-bottom:6px}
.gywm-page .gy-ccard .v{display:block;font-size:15.5px;font-weight:800;color:var(--ink);line-height:1.45;word-break:break-word;font-variant-numeric:tabular-nums}
.gywm-page .gy-ccard .v.is-link{color:var(--brand-600)}
.gywm-page .gy-ccard .hint{font-size:12px;line-height:1.65;color:var(--ink-4);margin-top:6px}
.gywm-page .gy-copy{margin-top:10px;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:12px;font-weight:600;color:var(--ink-3);cursor:pointer;font-family:inherit;transition:border-color .24s,color .24s,background .24s}
.gywm-page .gy-copy:hover{border-color:var(--brand-300);color:var(--brand-600)}
.gywm-page .gy-copy.is-done{border-color:rgba(16,185,129,.42);background:rgba(16,185,129,.09);color:#059669}
.gywm-page .gy-copy svg{width:13px;height:13px;flex:none}

.gywm-page .gy-qr{display:flex;gap:16px;align-items:center;grid-column:1/-1;padding:18px;border-radius:var(--radius-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.gywm-page .gy-qr img{display:block;width:104px;height:104px;flex:none;border-radius:12px;border:1px solid var(--line)}
.gywm-page .gy-qr .k{font-size:14.5px;font-weight:800;color:var(--ink);margin-bottom:7px}
.gywm-page .gy-qr p{font-size:12.5px;line-height:1.72;color:var(--ink-3);margin:0}

.gywm-page .gy-map{position:relative;overflow:hidden;min-height:352px;border-radius:var(--radius-xl);background:var(--brand-950);box-shadow:var(--shadow-lg)}
.gywm-page .gy-map img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72}
.gywm-page .gy-map::after{content:"";position:absolute;inset:0;background:linear-gradient(155deg,rgba(6,15,43,.86) 0%,rgba(6,15,43,.34) 52%,rgba(6,15,43,.78) 100%)}
.gywm-page .gy-map-in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;padding:34px}
.gywm-page .gy-map-in .pin{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan-soft);background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.32)}
.gywm-page .gy-map-in h3{font-size:clamp(20px,2.2vw,26px);font-weight:800;line-height:1.5;color:#fff;margin:0}
.gywm-page .gy-map-in p{font-size:14px;line-height:1.8;color:rgba(226,236,255,.76);margin:0;max-width:480px}
.gywm-page .gy-map-in .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}

.gywm-page .gy-toast{position:fixed;left:50%;bottom:40px;transform:translate(-50%,14px);z-index:120;padding:12px 22px;border-radius:999px;font-size:13.5px;font-weight:600;color:#fff;background:rgba(11,27,63,.95);box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity .26s var(--ease),transform .26s var(--ease)}
.gywm-page .gy-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- 响应式 ---------- */
@media(max-width:1239px){
  .gywm-page .gy-intro{grid-template-columns:minmax(0,1fr);gap:38px}
  .gywm-page .gy-side{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1024px){
  .gywm-page .gy-wall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gywm-page .gy-contact{grid-template-columns:minmax(0,1fr);gap:28px}
  .gywm-page .gy-map{min-height:320px}
  .gywm-page .gy-tl-panel{padding:32px 28px;gap:28px}
  .gywm-page .gy-tl-big{padding-right:28px}
  .gywm-page .gy-shots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gywm-page .gy-shot-a{grid-column:1/-1}
}
@media(max-width:900px){
  .gywm-page .gy-nums{gap:14px}
  .gywm-page .gy-num{padding:22px 16px}
  .gywm-page .gy-tl-scroll{padding-left:2px;padding-right:2px}
}
@media(max-width:768px){
  .gywm-page .gy-side{grid-template-columns:minmax(0,1fr)}
  .gywm-page .gy-quote{padding:24px 22px 24px 30px;font-size:15.5px}
  .gywm-page .gy-nums{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gywm-page .gy-num{padding:18px 8px}
  .gywm-page .gy-num b{font-size:24px}
  .gywm-page .gy-num span{font-size:12px}
  .gywm-page .gy-tl-panel{flex-direction:column;align-items:flex-start;gap:18px;padding:26px 22px}
  .gywm-page .gy-tl-big{display:flex;align-items:baseline;gap:12px;width:100%;text-align:left;padding:0 0 18px;border-right:0;border-bottom:1px solid rgba(255,255,255,.16)}
  .gywm-page .gy-tl-big b{font-size:42px}
  .gywm-page .gy-tl-big span{margin-top:0}
  .gywm-page .gy-ccards{grid-template-columns:minmax(0,1fr)}
  .gywm-page .gy-qr{grid-column:auto}
  .gywm-page .gy-shots{gap:12px}
  .gywm-page .gy-wall li{padding:13px 9px}
  .gywm-page .gy-wall img{max-width:100px}
  .gywm-page .gy-map-in{padding:26px}
}
@media(max-width:560px){
  .gywm-page .gy-nums{grid-template-columns:minmax(0,1fr);gap:12px}
  .gywm-page .gy-shots{grid-template-columns:minmax(0,1fr)}
  .gywm-page .gy-num{display:flex;align-items:center;gap:16px;text-align:left;padding:18px 20px}
  .gywm-page .gy-num b{flex:none;min-width:92px;font-size:28px}
  .gywm-page .gy-num span{margin-top:0}
  .gywm-page .gy-map{min-height:300px}
  .gywm-page .gy-tl-nav button{width:36px;height:36px}
  .gywm-page .gy-wall li{padding:11px 7px}
  .gywm-page .gy-wall img{max-width:84px}
}
@media(max-width:420px){
  .gywm-page .gy-prose p{font-size:15.5px}
  .gywm-page .gy-prose p.is-lead{font-size:17.5px;padding-left:18px}
  .gywm-page .gy-qr img{width:88px;height:88px}
  .gywm-page .gy-map-in{padding:22px}
}

/* 首页 #about 区块 -> 独立的「关于我们」页入口（gywm.html 上线时新增） */
.commit-more{
  display:flex;width:fit-content;align-items:center;gap:9px;margin-top:18px;
  padding:13px 24px;border-radius:999px;font-size:14.5px;font-weight:700;
  color:var(--brand-900);text-decoration:none;
  background:linear-gradient(120deg,#FFFFFF,#E8F1FF);
  box-shadow:0 14px 30px -12px rgba(6,182,212,.5);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.commit-more svg{width:16px;height:16px;flex:none;transition:transform .25s var(--ease)}
.commit-more:hover{transform:translateY(-2px);box-shadow:0 20px 38px -14px rgba(6,182,212,.62)}
.commit-more:hover svg{transform:translateX(3px)}

/* ================================================================
   关于我们 gywm.html —— 视觉升级 v2（2026-09-19）
   只覆盖 .gywm-page 命名空间内的视觉表现：
   A 区块节奏  B 标题  C Hero  D 简介  E 历程  F 客户  G 设计  H 联系
   I 焦点环  J 动效克制  K 响应式（与全局断点一致）
================================================================ */

/* ---------------- A. 区块节奏：白 → 浅蓝 → 白 → 渐变收尾 ---------------- */
.gywm-page .gy-tl-sec{background:linear-gradient(180deg,#FFFFFF 0%,#FAFCFF 100%)}
.gywm-page .gy-cli-sec{
  background:var(--bg-soft);
  border-top:1px solid rgba(37,99,235,.08);
  border-bottom:1px solid rgba(37,99,235,.08);
}
.gywm-page .gy-cli-sec::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58% 42% at 10% 0%,rgba(6,182,212,.10),transparent 68%),
    radial-gradient(52% 44% at 94% 100%,rgba(129,140,248,.13),transparent 70%);
}
.gywm-page .gy-design-sec{background:#FFFFFF}
.gywm-page .gy-contact-sec{background:linear-gradient(180deg,#FFFFFF 0%,#F4F8FD 52%,#E9F1FC 100%)}
/* 06 CTA：.cta 全站默认 background:var(--bg)（#F6F8FC，近白），与上方联系板块
   渐变的收尾色 #E9F1FC 硬接 → 视觉上多出一条白色横带。这里让背景延续该收尾
   色，接触点逐像素同色（零断层），底部再向 #EFF5FD 柔化收进深色页脚。
   ⚠️ 只在 .gywm-page 命名空间下覆盖，不影响首页/其他页的 .cta。 */
.gywm-page .cta{background:linear-gradient(180deg,#E9F1FC 0%,#EBF2FC 52%,#EFF5FD 100%)}

/* ---------------- B. 区块标题 ---------------- */
.gywm-page .section-head{margin-bottom:58px}
.gywm-page .eyebrow{box-shadow:0 10px 24px -16px rgba(37,99,235,.75)}
.gywm-page .section-title{font-size:clamp(30px,3.9vw,46px);letter-spacing:-.028em}
.gywm-page .section-sub{font-size:16.5px;margin-top:18px}
.gywm-page .watermark{top:-46px;-webkit-text-stroke:1.5px rgba(37,99,235,.10)}

/* ---------------- C. Hero：提亮 + 玻璃数据卡 ---------------- */
.gywm-page .hero{
  background:
    radial-gradient(90% 68% at 82% -8%,rgba(6,182,212,.26),transparent 58%),
    radial-gradient(78% 62% at 4% 4%,rgba(37,99,235,.26),transparent 62%),
    linear-gradient(168deg,#08152F 0%,#0B1F4C 46%,#081633 100%);
}
.gywm-page .hero .aurora i{opacity:.62;filter:blur(84px)}
.gywm-page .hero .aurora i:nth-child(2){opacity:.50}
.gywm-page .hero .aurora i:nth-child(3){opacity:.38}
.gywm-page .hero .gridlines{opacity:.70;background-size:56px 56px}
.gywm-page .hero h1{font-size:clamp(30px,3.9vw,58px);line-height:1.12;margin-bottom:22px}
.gywm-page .hero p.lead{max-width:600px;color:rgba(226,236,255,.82);margin-bottom:34px}
.gywm-page .hero-badge{
  background:linear-gradient(120deg,rgba(6,182,212,.20),rgba(129,140,248,.18));
  border-color:rgba(103,232,249,.36);
  box-shadow:0 12px 30px -16px rgba(6,182,212,.9);
}

/* 数据条 → 玻璃小卡 */
.gywm-page .hero-stats{gap:12px;margin-top:48px}
.gywm-page .hero-stats .stat{
  flex:1 1 0;padding:17px 18px 16px;border-radius:16px;
  background:linear-gradient(158deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13);
  transition:transform .3s var(--ease),border-color .3s,background .3s;
}
.gywm-page .hero-stats .stat:first-child{padding-left:18px}
.gywm-page .hero-stats .stat::after{display:none}
.gywm-page .hero-stats .stat:hover{
  transform:translateY(-3px);border-color:rgba(103,232,249,.36);
  background:linear-gradient(158deg,rgba(34,211,238,.15),rgba(255,255,255,.03));
}
.gywm-page .hero-stats .num{
  font-size:clamp(26px,2.9vw,36px);
  background:linear-gradient(180deg,#FFFFFF,#A9C9FF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.gywm-page .hero-stats .lbl{font-size:12.5px;color:rgba(226,236,255,.66);margin-top:6px}

/* 右侧服务矩阵卡 */
.gywm-page .hero-card{
  padding:26px 28px 24px;
  background:linear-gradient(155deg,rgba(255,255,255,.11),rgba(255,255,255,.028));
  border-color:rgba(255,255,255,.18);
  box-shadow:0 48px 96px -36px rgba(0,4,20,.75),inset 0 1px 0 rgba(255,255,255,.16);
}
.gywm-page .hero-card::after{
  content:"";position:absolute;left:28px;right:28px;top:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(103,232,249,.9),rgba(165,180,252,.9),transparent);
}
.gywm-page .hero-card .tag{font-size:12.5px;letter-spacing:.2em;margin-bottom:18px}
.gywm-page .hero-card .gy-mx{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13);color:#E8EFFC;font-weight:600;
  transition:transform .25s var(--ease),background .25s,border-color .25s,color .25s;
}
.gywm-page .hero-card .gy-mx:hover{
  background:rgba(34,211,238,.18);border-color:rgba(103,232,249,.5);color:#FFFFFF;transform:translateY(-2px);
}
.gywm-page .hero-card .gy-mx-note{color:rgba(226,236,255,.60);font-size:13px}
.gywm-page .float-chip{
  padding:12px 20px;font-size:13.5px;color:var(--brand-800);
  background:linear-gradient(140deg,#FFFFFF,#EAF3FF);border-color:rgba(255,255,255,.7);
  box-shadow:0 22px 44px -18px rgba(0,4,20,.55),0 0 0 1px rgba(103,232,249,.3);
}
.gywm-page .float-chip svg{color:var(--cyan-600)}

/* ---------------- D. 01 公司简介 ---------------- */
.gywm-page .gy-intro{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:56px}
.gywm-page .gy-prose p{font-size:16.5px;line-height:2;color:var(--ink-2);margin:0 0 24px}
/* 首段竖条用「padding-left 20 + margin-left -20」抵消，正文起始边和其它段严格对齐 */
.gywm-page .gy-prose p.is-lead{font-size:20px;line-height:1.82;padding-left:20px;margin-left:-20px}
.gywm-page .gy-prose p.is-lead::before{width:4px;border-radius:4px;top:7px;bottom:7px}
.gywm-page .gy-prose strong{
  font-weight:700;color:var(--brand-700);
  background:linear-gradient(180deg,transparent 64%,rgba(37,99,235,.16) 64%);
  padding:0 1px;border-radius:2px;
}
.gywm-page .gy-card{
  position:relative;padding:26px 24px 22px;border-color:rgba(37,99,235,.12);
  background:linear-gradient(180deg,#FFFFFF 0%,#FBFDFF 100%);
  box-shadow:0 22px 48px -32px rgba(11,27,63,.4);
}
.gywm-page .gy-card::after{
  content:"";position:absolute;left:24px;right:24px;top:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(37,99,235,.95),rgba(6,182,212,.85),rgba(129,140,248,.4));
}
.gywm-page .gy-dl>div{padding:12px 0}
.gywm-page .gy-dl dd{font-size:14px}
.gywm-page .gy-side-cta{
  padding:28px 24px 26px;border-radius:var(--radius-lg);
  background:linear-gradient(150deg,#0A1738 0%,#16357F 54%,#0E7490 100%);
  box-shadow:0 30px 60px -30px rgba(11,27,63,.65);
}
.gywm-page .gy-side-cta .btn{
  background:#FFFFFF;color:var(--brand-800);border:1px solid transparent;font-weight:700;
  box-shadow:0 16px 32px -16px rgba(0,0,0,.5);
}
.gywm-page .gy-side-cta .btn:hover{background:#FFFFFF;transform:translateY(-2px);box-shadow:0 20px 38px -16px rgba(0,0,0,.55)}
.gywm-page .gy-side-cta .gy-tel{color:rgba(226,236,255,.82)}

/* ---------------- E. 02 发展历程 ---------------- */
.gywm-page .gy-tl-head{margin-bottom:22px;padding-bottom:18px;border-bottom:1px dashed var(--line)}
.gywm-page .gy-tl-legend{font-size:13.5px;color:var(--ink-3)}
.gywm-page .gy-tl-legend b{font-size:15px}
.gywm-page .gy-tl-nav button{width:42px;height:42px;background:#FFFFFF;box-shadow:var(--shadow-sm)}
.gywm-page .gy-tl-nav button:hover:not(:disabled){background:var(--brand-50);box-shadow:var(--shadow-md)}
.gywm-page .gy-tl-scroll{padding:10px 4px}
.gywm-page .gy-tl-track::before{
  top:8px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,#E6ECF6,#DCE7F8,#E6ECF6);
}
.gywm-page .gy-tl-prog{
  position:absolute;left:52px;top:8px;height:3px;border-radius:3px;z-index:0;pointer-events:none;
  width:calc((100% - 104px) * var(--p,0));
  background:linear-gradient(90deg,#2563EB,#06B6D4);
  box-shadow:0 0 14px rgba(6,182,212,.55);
  transition:width .5s var(--ease);
}
.gywm-page .gy-tl-item{padding:0 0 6px;border-radius:12px;transition:background .25s}
.gywm-page .gy-tl-item:hover{background:rgba(37,99,235,.045)}
.gywm-page .gy-tl-item.is-on{background:var(--brand-50)}
.gywm-page .gy-tl-dot{width:16px;height:16px;border-width:3px}
.gywm-page .gy-tl-item.is-on .gy-tl-dot{
  transform:scale(1.18);
  box-shadow:0 0 0 5px rgba(6,182,212,.16),0 0 20px rgba(6,182,212,.7);
}
.gywm-page .gy-tl-y{font-size:17.5px;letter-spacing:-.01em}
.gywm-page .gy-tl-m{margin-top:-7px}

/* 面板：多出的一整列用来放派生信息，别再空着 60% */
.gywm-page .gy-tl-panel{
  margin-top:24px;padding:34px 40px;gap:34px;
  background:linear-gradient(132deg,#07122C 0%,#12305F 48%,#0B5A79 100%);
  box-shadow:0 36px 76px -34px rgba(4,12,36,.62);
}
.gywm-page .gy-tl-big{padding-right:34px}
.gywm-page .gy-tl-big b{font-size:clamp(50px,5.4vw,72px)}
.gywm-page .gy-tl-txt h3{font-size:clamp(19px,2.15vw,25px);line-height:1.58;letter-spacing:-.01em}
.gywm-page .gy-tl-meta{
  position:relative;z-index:1;flex:0 0 212px;align-self:stretch;align-content:center;
  display:grid;gap:13px;padding-left:34px;border-left:1px solid rgba(255,255,255,.14);
}
.gywm-page .gy-tl-ago{display:flex;align-items:center;gap:10px}
.gywm-page .gy-tl-ago b{
  font-family:var(--font-display);font-size:36px;font-weight:800;line-height:1;
  color:#FFFFFF;font-variant-numeric:tabular-nums;
}
.gywm-page .gy-tl-ago span{font-size:12.5px;line-height:1.35;color:rgba(226,236,255,.62)}
.gywm-page .gy-tl-bar{height:5px;border-radius:5px;background:rgba(255,255,255,.15);overflow:hidden}
.gywm-page .gy-tl-bar i{
  display:block;height:100%;width:0;border-radius:5px;
  background:linear-gradient(90deg,#22D3EE,#818CF8);
  transition:width .5s var(--ease);
}
.gywm-page .gy-tl-foot{
  display:flex;justify-content:space-between;gap:10px;
  font-size:11.5px;letter-spacing:.06em;color:rgba(226,236,255,.5);font-variant-numeric:tabular-nums;
}

/* ---------------- F. 03 我们的客户 ---------------- */
.gywm-page .gy-quote{
  max-width:1000px;padding:32px 40px 32px 48px;border-radius:var(--radius-xl);
  background:linear-gradient(140deg,#FFFFFF 0%,#F3F8FF 100%);
  border-color:rgba(37,99,235,.12);color:var(--brand-800);
  box-shadow:0 26px 54px -34px rgba(11,27,63,.34);
}
.gywm-page .gy-quote::before{left:16px;top:6px;font-size:70px;color:rgba(37,99,235,.16)}
.gywm-page .gy-quote-desc{max-width:1000px;margin-bottom:42px}
.gywm-page .gy-inds{gap:11px;margin-bottom:46px}
.gywm-page .gy-inds .gy-mx{
  padding:9px 17px;font-size:13.5px;font-weight:700;background:#FFFFFF;
  box-shadow:0 8px 18px -14px rgba(37,99,235,.9);
  transition:transform .25s var(--ease),background .25s,border-color .25s,color .25s;
}
.gywm-page .gy-inds .gy-mx:hover{background:var(--brand-50);transform:translateY(-2px)}
.gywm-page .gy-wall-cap{text-align:center;font-size:14px;color:var(--ink-3);margin:0 0 26px}
.gywm-page .gy-wall{border-radius:var(--radius-lg);box-shadow:0 26px 56px -38px rgba(11,27,63,.42)}
.gywm-page .gy-wall li{background:#FFFFFF}
.gywm-page .gy-wall li:hover{background:var(--brand-50);box-shadow:inset 0 0 0 1px rgba(37,99,235,.16)}
.gywm-page .gy-wall img{opacity:.52}
.gywm-page .gy-wall li:hover img{transform:scale(1.07)}

/* ---------------- G. 04 设计呈现：1 宽 + 2 窄 + 图注 ---------------- */
.gywm-page .gy-shots{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:1180px;margin:0 auto}
.gywm-page .gy-shot{
  display:flex;flex-direction:column;aspect-ratio:auto;margin:0;
  background:#FFFFFF;border-radius:var(--radius-lg);
  box-shadow:0 22px 48px -34px rgba(11,27,63,.42);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;
}
.gywm-page .gy-shot-a{grid-column:1/-1;aspect-ratio:auto}
.gywm-page .gy-shot:hover{transform:translateY(-4px);box-shadow:0 34px 68px -32px rgba(11,27,63,.46);border-color:var(--brand-200)}
.gywm-page .gy-shot-img{position:relative;overflow:hidden;background:#EFF4FB}
.gywm-page .gy-shot-a .gy-shot-img{aspect-ratio:1090/640}
.gywm-page .gy-shot-b .gy-shot-img,
.gywm-page .gy-shot-c .gy-shot-img{aspect-ratio:460/310}
.gywm-page .gy-shot img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.gywm-page .gy-shot:hover img{transform:scale(1.04)}
.gywm-page .gy-shot figcaption{padding:17px 20px 19px;border-top:1px solid var(--line);background:#FFFFFF}
.gywm-page .gy-shot figcaption b{display:block;font-size:15.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.gywm-page .gy-shot figcaption span{display:block;margin-top:5px;font-size:13px;line-height:1.65;color:var(--ink-3)}

/* ---------------- H. 05 联系我们 ---------------- */
.gywm-page .gy-contact{gap:34px}
.gywm-page .gy-ccards{gap:14px}
.gywm-page .gy-ccard{
  padding:20px;border-radius:var(--radius-md);border-color:rgba(37,99,235,.10);
  box-shadow:0 14px 34px -26px rgba(11,27,63,.5);
}
.gywm-page .gy-ccard .ic{
  width:44px;height:44px;border-radius:13px;color:var(--brand-600);
  background:linear-gradient(140deg,var(--brand-50),#ECFEFF);
  border:1px solid rgba(37,99,235,.14);
}
.gywm-page .gy-ccard .ic svg{width:19px;height:19px}
.gywm-page .gy-ccard .v{font-size:16px;letter-spacing:-.01em}
.gywm-page a.gy-ccard:hover{
  transform:translateY(-4px);border-color:var(--brand-200);
  box-shadow:0 26px 50px -28px rgba(37,99,235,.5);
}
.gywm-page .gy-copy{
  padding:7px 13px;font-weight:600;background:var(--bg);
  border-color:var(--line);color:var(--ink-3);
}
.gywm-page .gy-copy:hover{background:var(--brand-50)}
.gywm-page .gy-qr{
  padding:20px;border-radius:var(--radius-md);border-color:rgba(37,99,235,.10);
  background:linear-gradient(140deg,#FFFFFF 0%,#F2F8FF 100%);
  box-shadow:0 14px 34px -26px rgba(11,27,63,.5);
}
.gywm-page .gy-map{
  min-height:396px;
  box-shadow:0 34px 70px -36px rgba(11,27,63,.6);
  transition:box-shadow .4s var(--ease);
}
.gywm-page .gy-map:hover{box-shadow:0 40px 80px -34px rgba(11,27,63,.62)}
.gywm-page .gy-map img{opacity:.55;filter:saturate(.7)}
.gywm-page .gy-map::after{
  background:linear-gradient(104deg,rgba(6,15,43,.94) 0%,rgba(8,24,58,.85) 40%,rgba(11,45,92,.42) 100%);
}
.gywm-page .gy-map-in{padding:40px 42px}
.gywm-page .gy-map-in .pin{
  background:linear-gradient(120deg,var(--cyan),var(--violet));
  color:#FFFFFF;border:none;letter-spacing:.14em;
  box-shadow:0 12px 26px -12px rgba(6,182,212,.85);
}
.gywm-page .gy-map-in .acts .btn-light{
  background:var(--grad);color:#FFFFFF;border-color:transparent;font-weight:700;
  box-shadow:var(--shadow-brand);
}
.gywm-page .gy-map-in .acts .btn-light:hover{background:var(--grad);transform:translateY(-2px)}
.gywm-page .gy-map-in .acts .btn-ghost{
  background:rgba(255,255,255,.95);color:var(--brand-800);border-color:transparent;font-weight:700;
}
.gywm-page .gy-map-in .acts .btn-ghost:hover{background:#FFFFFF;color:var(--brand-600)}

/* ---------------- I. 无障碍：深浅底都看得见的焦点环 ---------------- */
.gywm-page a:focus-visible,
.gywm-page button:focus-visible{outline:3px solid var(--cyan-bright);outline-offset:3px}
.gywm-page .gy-tl-item:focus-visible{outline:3px solid var(--cyan-bright);outline-offset:4px;border-radius:12px}

/* ---------------- J. 动效克制 ---------------- */
@media(prefers-reduced-motion:reduce){
  .gywm-page *,.gywm-page *::before,.gywm-page *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}

/* ---------------- K. 响应式（断点与全局一致） ---------------- */
@media(max-width:1239px){
  .gywm-page .gy-intro{gap:42px}
}
@media(max-width:1024px){
  .gywm-page .gy-tl-meta{
    flex:1 1 100%;align-self:auto;align-content:start;
    padding:20px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.14);
  }
  .gywm-page .gy-map{min-height:340px}
  .gywm-page .gy-map-in{padding:34px 32px}
}
@media(max-width:900px){
  /* 移动端数据条改 2×2，别一条占一整行 */
  .gywm-page .hero-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:40px}
  .gywm-page .hero-stats .stat{padding:15px 16px}
  .gywm-page .hero-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .gywm-page .hero-actions .btn{width:100%;padding-left:16px;padding-right:16px}
}
@media(max-width:768px){
  .gywm-page .gy-shot figcaption{padding:14px 16px 17px}
  .gywm-page .gy-map{min-height:320px}
  .gywm-page .gy-map-in{padding:28px 24px}
  .gywm-page .gy-tl-panel{padding:26px 22px;gap:20px}
}
@media(max-width:560px){
  .gywm-page .hero-actions{grid-template-columns:minmax(0,1fr)}
  .gywm-page .gy-quote{padding:26px 22px 26px 30px}
  .gywm-page .gy-prose p.is-lead{padding-left:16px;margin-left:-16px;font-size:18px}
}
@media(max-width:420px){
  .gywm-page .gy-prose p.is-lead{padding-left:14px;margin-left:-14px;font-size:17.5px}
  .gywm-page .gy-tl-meta{flex:1 1 auto}
}
/* ---------------- L. 实测修正（v2.1） ---------------- */
/* 1) hero 浮标压住了服务矩阵的说明文字（实测重叠 1313px²）→ 下移 46px */
.gywm-page .float-chip.c2{bottom:-46px;left:-20px}
.gywm-page .gy-mx-note{padding-bottom:2px}

/* 2) 时间轴连线比末个圆点多伸 24px → 让轨道按内容宽度收缩，
      这样 left/right:52px 的两端正好落在首尾圆点圆心（且换节点数也不用改） */
.gywm-page .gy-tl-track{width:max-content}

/* 3) 引言卡的开引号与正文首字只差 4px 空隙 → 拉开到 18px */
.gywm-page .gy-quote{padding:32px 40px 32px 62px}
.gywm-page .gy-quote::before{left:16px;top:6px;font-size:56px}

/* 4) "2200 +" / "95 %+" 中间凭空多一道缝 */
.gywm-page .hero-stats .num{gap:0}
.gywm-page .hero-stats .num small{margin-left:0}

/* 5) 面板右侧信息列：大数码 + 小标签两行 */
.gywm-page .gy-tl-ago{align-items:baseline;gap:5px}
.gywm-page .gy-tl-ago b{font-size:38px}
.gywm-page .gy-tl-ago i{font-style:normal;font-size:14px;font-weight:700;color:rgba(226,236,255,.72)}
.gywm-page .gy-tl-agocap{margin-top:-6px;font-size:12px;letter-spacing:.04em;color:rgba(226,236,255,.6)}
/* ---------------- M. 对比度修正（v2.2，WCAG 2.2 AA） ---------------- */
/* 原设计中 --ink-4(#8B99B3) 打在白底上只有 2.87:1，深色面板上的 .5 透明度文字只有 2.8~3.5:1，
   正文级小字必须 ≥4.5:1。为了不动全站共享 token，只在 .gywm-page 里换成本页专用的弱色 #63738F（4.80:1） */
.gywm-page{--gy-mute:#63738F}
.gywm-page .gy-dl dt{color:var(--gy-mute)}
.gywm-page .gy-ccard .k{color:var(--gy-mute)}
.gywm-page .gy-tl-y{color:var(--gy-mute)}
.gywm-page .gy-tl-m{color:var(--gy-mute)}

/* 深色面板上的三处淡字：.5/.62 透明度在 #0B5A79 上分别只有 2.82:1 / 3.51:1 */
.gywm-page .gy-tl-ago span{color:rgba(226,236,255,.85)}
.gywm-page .gy-tl-ago i{color:rgba(226,236,255,.88)}
.gywm-page .gy-tl-agocap{color:rgba(226,236,255,.85)}
.gywm-page .gy-tl-foot{color:rgba(226,236,255,.78)}

/* 服务矩阵说明：1440 下第二行只剩一个「务。」孤字，让两行自己配平 */
.gywm-page .gy-mx-note{text-wrap:balance}

/* ---------------- N. 实测修正（v2.3） ---------------- */
/* 移动端 hero 徽标实测 13px × 30 字 ≈ 354px，装不进 390px 视口下的 334px 容器
   → 被折成 2 行且断在「服务/商」中间。缩字号收紧内边距后单行放下，
     keep-all 兜底：万一仍折行，只在「· 」分隔处断，不切碎中文词。 */
@media(max-width:560px){
  .gywm-page .hero-badge{
    font-size:12px;letter-spacing:.01em;padding:9px 14px;gap:7px;
    line-height:1.5;word-break:keep-all;overflow-wrap:anywhere;max-width:100%;
  }
  .gywm-page .hero-badge .dot{width:6px;height:6px}
}
/* ≤480px（单行需要 324px，即视口 380px 就放不下了）徽标会折成 2 行：
   胶囊外形一旦折行就像「挤爆了」，改成圆角块 + 圆点上移，看起来是有意的两行信息条。
   折行点在「· 」分隔符处（靠上面的 keep-all），不会切断中文词。    ⚠️ 阈值必须是 380 而不是 400：390 是项目测试下限，那里单行放得下，得保持胶囊。 */
@media(max-width:380px){
  .gywm-page .hero-badge{border-radius:14px;padding:10px 14px;line-height:1.6;align-items:flex-start}
  .gywm-page .hero-badge .dot{margin-top:6px}
}

/* ---------------- O. 01 公司简介：按线上原版重做（v3） ---------------- */
/* 线上 global.css 原版这一块是「居中标题 + 单栏首行缩进正文」，没有侧栏卡片：
     .tit_1{text-align:center}
     .tit_1 h2{color:#000;letter-spacing:1px;font-weight:700;font-size:48px}          -> 关于我们
     .tit_1 span{margin-top:20px;text-transform:uppercase;font-family:Cambria;
                 font-weight:700;font-size:26px}                                       -> COMPANY PROFILE
     .about .content1{padding:112px 0 114px}
     .about .content1 .p{color:#555;text-align:left;letter-spacing:1px;
                         font-size:16px;line-height:30px}
     .about .content1 .p p{text-indent:32px}                                          -> 首行缩进两字
   升级点只有排版：正文字号 16->17、行高 30->34，段落改用 margin 而不是 <p><br></p> 空行占位。
   ⚠️ 正文宽度必须**跟原版一致 = 1140px**：原版 .container 取自 bootstrap.css（≥1200px 时    max-width:1170px、padding:0 15px → 内容区 1140px）。曾自作主张收窄到 880px 当 reading
   measure，视觉上明显比原版窄一截，已改回 1140px。等效每行汉字数也和原版对齐，
   原版 16px + letter-spacing:1px → 1140/17 ≈ 67 字；本页 17px + .01em ↈ 1140/17.17 ≈ 66 字。

   ⚠️ 旧版的 sticky「公司档案」卡 +「先聊需求」深色 CTA 卡是自加的，实测在 769–1239px
   侧栏切 2 列后 CTA 卡被拉伸到 666–2067px 高、底部留白 380–1683px，视觉上是一块空板子。
   按原版直接去掉；档案里的 8 项信息（全称/成立/城市/地址/热线/手机/邮箱/QQ）在
   hero、02 发展历程、05 联系我们、页脚里都另有呈现，没有信息丢失。
   配套的 .gy-intro / .gy-side / .gy-card / .gy-dl / .gy-side-cta 规则已无对应元素，
   保留以备回滚，不再生效。 */
.gywm-page .gy-pf-head{margin-bottom:46px}
.gywm-page .gy-prose-c{max-width:min(100%,1140px);margin:0 auto;text-align:left}
.gywm-page .gy-prose-c p{
  margin:0 0 22px;
  text-indent:2em;                 /* 原版 text-indent:32px = 2em */
  font-size:17px;
  line-height:34px;
  letter-spacing:.01em;
  color:var(--ink-2);
  text-wrap:pretty;
}
.gywm-page .gy-prose-c p:last-child{margin-bottom:0}
@media(max-width:560px){
  .gywm-page .gy-pf-head{margin-bottom:34px}
  .gywm-page .gy-prose-c p{font-size:16px;line-height:31px;margin-bottom:18px}
}
@media(max-width:420px){
  .gywm-page .gy-prose-c p{font-size:15.5px;line-height:30px;margin-bottom:16px}
}

/* ================== M. 模块宽度统一（v5 / 2026-09-19） ==================
   目标：① 页宽与其它 16 页完全一致 —— 本页不再覆盖 --maxw，
          直接继承 :root 的全站值（1440px；@≥1600 时 1560px，见 style.css 顶部
          与 Responsive 段），这样 gywm 与 index / dxal / zxzx 等页同一条边界；
        ② 同一页内所有模块左右边界对齐（这是 v4 留下来的、要保留的部分）。
   做法：把 8 个原本写死 max-width 的模块统一改成 100%，跟着 .container 走。
         .container{width:100%;max-width:var(--maxw);padding:0 28px}
         → 内容宽 = maxw - 56px
   结果：@1440 → 1384；@1600 / @1920 / @2560 → 1504（与其它页一致）
        （v4 曾在本页把容器一路放大到 2160，用户反馈「太宽」，v5 已回退）
   备注：hero-grid 自带 .container 类，footer-grid 与 cta-box 都在 .container 内，
        会自动跟随，无需单独设置。
   ------------------------------------------------------------------- */

/* 取消各模块各自的宽度上限，统一跟随容器 */
.gywm-page .section-head{max-width:none}
.gywm-page .gy-prose-c{max-width:100%}
.gywm-page .gy-quote{max-width:100%}
.gywm-page .gy-quote-desc{max-width:100%}
.gywm-page .gy-nums{max-width:100%}
.gywm-page .gy-inds{max-width:100%}
.gywm-page .gy-shots{max-width:100%}
.gywm-page .gy-wall-cap{max-width:100%}

/* 备用开关：01 公司简介是整页唯一的「长文连续阅读」模块。
   现在它与其他模块同宽（@1920 一行约 88 汉字），视觉最整齐，
   但超出中文排版推荐的 45~75 字/行。
   若哪天觉得读起来累，取消下面这行的注释即可只给正文加阅读上限
   （1140px = 线上原版 bootstrap 内容宽；其余模块仍保持统一宽）：
.gywm-page .gy-prose-c{max-width:min(100%,1140px);margin-inline:auto} */

/* 大屏下几个居中型模块的内容同步放大，避免在宽容器里显得空 */
@media(min-width:1600px){
  .gywm-page .gy-num b{font-size:36px}
  .gywm-page .gy-num small{font-size:14px}
  .gywm-page .gy-inds .gy-mx{font-size:14px;padding:10px 17px}
  .gywm-page .gy-inds{gap:12px}
}
/* v5：容器最宽只到 1504（与其它页一致），不再需要 v4 为 2104 超宽容器
   准备的字号补偿，故撤掉 @≥1800 的放大档，正文回归 17px/34px */

/* ================== N. 时间轴轨道满宽（v6 / 2026-09-19） ==================
   问题：13 个节点固定 104px → 轨道总宽 1352px，而容器内容宽是 1384(@1440) / 1504(@≥1600)，
        → 年份轨道比下面的深色面板短一截（@1920 右侧空 152px），两块左右边界对不上。
   做法：① 轨道加 min-width:100% —— 装得下就撑满一整行；仍保留 max-content，
            ~1280px 以下依旧按 1352px 横滚（该行为是 v2.1 特意做的，不动）；
        ② 节点改 flex:1 1 104px + min-width:104px —— 等分整行，且永不小于 104px；
        ③ 连线与进度线原先把「半个节点 = 52px」写死，节点一变宽就会错位 →
           改用「节点份数」表达：半个节点 = 100%/(2n)，首尾圆心距 = 100% − 100%/n。
           在 104px 时 100%/26 = 52px，与原值**像素级等价**（是泛化，不是重新设计）。
   ⚠️ 改节点数量时只需同步 `.gy-tl-track` 上的 `--n`（三处几何自动跟随）。
   ------------------------------------------------------------------- */
.gywm-page .gy-tl-track{--n:13;width:max-content;min-width:100%}
.gywm-page .gy-tl-item{flex:1 1 104px;width:auto;min-width:104px}
.gywm-page .gy-tl-track::before{
  left:calc(100% / (var(--n) * 2));
  right:calc(100% / (var(--n) * 2));
}
.gywm-page .gy-tl-prog{
  left:calc(100% / (var(--n) * 2));
  width:calc((100% - 100% / var(--n)) * var(--p,0));
}

/* ================== O. 全站面包屑 site-crumb（2026-09-19） ==================
   适用范围：除首页外的所有页面，统一插在 hero 的 .hero-badge 之上。
   已有自有面包屑的 4 个页面保持原样不动（gy-crumbs / zd-crumb / dd-crumb / 170 的 breadcrumb），
   它们都是各页私有样式，本组件不参与改写，避免改一处炸一片。
   背景是深色 hero（--brand-950），所以文字取半透明白；
   语义：<nav aria-label="面包屑"> + <ol>，末项标 aria-current="page" 且不给链接。
   ------------------------------------------------------------------------- */
.site-crumb{margin-bottom:20px}
.site-crumb ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  margin:0;padding:0;list-style:none;font-size:13px;line-height:1.6;
}
.site-crumb li{display:inline-flex;align-items:center;gap:9px}
/* 分隔符：CSS 画的小箭头（>），不用额外 SVG，避免重复的 DOM */
.site-crumb li + li::before{
  content:"";flex:none;width:5px;height:5px;margin-right:1px;
  border-top:1.5px solid rgba(226,236,255,.34);
  border-right:1.5px solid rgba(226,236,255,.34);
  transform:rotate(45deg);
}
.site-crumb a{color:rgba(226,236,255,.72);text-decoration:none;transition:color .2s var(--ease)}
.site-crumb a:hover{color:#fff}
.site-crumb li[aria-current="page"]{color:var(--cyan-soft);font-weight:600}
@media(max-width:768px){
  .site-crumb{margin-bottom:16px}
  .site-crumb ol{font-size:12px;gap:7px}
  .site-crumb li{gap:7px}
}

/* ================== P. 首页全屏多屏轮播 .hero-fs（2026-09-19） ==================
   背景：原 hero 只有「极光 + 网格线」的纯色底，高度 104/150，在 PC 上占不满首屏。
   改造：① 高度改 min-height:calc(100vh - var(--hd-h))（--hd-h = .header-inner 高度，
            因为 header 是 sticky 参与文档流，减掉才是真正的「首屏」）；
        ② 背景换成 4 张线上真实 banner（images/hero/，≤768px 用 <picture> 切移动版构图）；
        ② 多屏切换：背景淡入 + Ken Burns 缓推，文案随屏切换，底部 4 个指示器可点击。
   ⚠️ 只作用于 index.html 的 .hero-fs —— 其余 16 页仍用共享的 .hero，不受影响。
      所有选择器都带 .hero-fs / .hfs- 前缀，且整块放在文件末尾，确保盖过
      @media(min-width:1600px){.hero{padding:...}} 等后来的同特异性规则。
   ⚠️ 文案四屏叠在同一个 grid 格子里（grid-area:1/1），容器高度恒等于最高的一屏，
      切换时不抖动；未激活屏用 visibility:hidden，同时从无障碍树里摘掉。
   ------------------------------------------------------------------------- */
.hero-fs{
  position:relative;overflow:hidden;
  /* ⚠️ 2026-09-19 第四轮定版（用户：「1920和3440宽度下，hero的内容都不垂直居中啊」）：
     hero 占满首屏 + **内容垂直居中**。
     ① min-height:calc(100vh - var(--hd-h)) —— 撑满首屏。
        --hd-h = .header-inner 高（sticky 参与文档流，必须减），低版本浏览器用 svh 再兜一层。
     ② justify-content:center —— 内容垂直居中。
        ⚠️ 前一版用的是 flex-start（内容靠上），在超高屏上极其失衡：实测 1920×1080 上留白 120 /
        下留白 273（偏上 153），3440×1440 上 120 / 下 **633**（偏上 513）—— 用户看到的就是这个。
     ③ **padding 必须上下对称**（同值）。
        ⚠️ 这是最容易踩的坑：flex 居中是在「去掉 padding 后的可用区」里居中，
           若 padT=104 而 padB=0，可用区中心本身比 hero 中心低 52px，
           内容会被「居中」到偏低的位置 —— 写了 center 却依然不居中。
           对称 padding 下可用区中心 == hero 中心，居中结果才真正等于几何中心。
     ④ **padding 只能当「下限」，不能再取固定大值**。
        ⚠️ 第二坑：内容块约 615px 高，若 padding 取 120，则 120+615+120 = 855 反而**超过**
           满屏高度 828（1920×900 / 1600×900），hero 被内容撑破首屏 28px —— 实测报「未满屏」。
           所以 padding 必须随视口高度收缩：`clamp(40px, 6vh, 104px)`。
           居中真正生效时，实际留白 = (hero高 − 内容高)/2，远大于 padding，padding 不参与观感；
           它只在内容快顶满首屏时兜底，防止文案贴边。
     ⑤ .hfs-nav 在文档流里紧跟 .hfs-wrap（margin-top:12），跟着内容一起居中。 */
  min-height:calc(100vh - var(--hd-h));
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(40px,6vh,104px) 0;
}
@supports (height:100svh){ .hero-fs{min-height:calc(100svh - var(--hd-h))} }

/* ---------- 背景轮播层 ---------- */
.hfs-media{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hfs-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s var(--ease)}
.hfs-slide.is-active{opacity:1}
.hfs-slide picture,.hfs-slide img{display:block;width:100%;height:100%}
.hfs-slide img{object-fit:cover;object-position:center 20%;transform:scale(1)}
/* ⚠️ object-position 的 20% 是算出来的，别随手改成 center：
   新底图主体（右侧玻璃体）在原图中贴近上边（y≈60/1072），
   若用 center，3440/2560×1080/1920×900 等「按宽铺满」的视口会把主体顶部切平。
   20% = 让裁切优先吃掉下方暗场，实测 12 档视口下主体均完整（仅超高屏吃到光晕余量）。
   窄视口（如 1440×900 及以下）改为「按高铺满」、垂直根本不裁，此项对其无影响。 */
.hfs-slide.is-active img{animation:hfsKen 9s linear forwards}
/* 四屏底图亮度归一化（2026-09-19 换图后新增，必读）：
   实测「主体区（x≥55%）亮度 p90」= 132 / 65 / 96 / 67 —— 第 2、4 屏明显偏暗，
   轮播切换时会忽明忽暗，像两张不同来源的素材。
   做法：以最亮的第 1 屏为基准，只提亮偏暗的屏，把四屏对齐到 p90 ≈ 100–115。
   ⚠️ 用 filter:brightness 而不是重编码图片 —— 可逆、可逐屏微调，且不动已定稿的 jpg。
   ⚠️ 第 2、3、4 屏只写 brightness，不写 saturate/contrast：
      否则会覆盖下面 ≤768 那条带 saturate 的移动端规则（见 .hfs-slide img 媒体查询）。
   若日后换图，先重测 p90 再改这里的系数，别照抄。 */
.hfs-slide:nth-child(2) img{filter:brightness(1.52)}   /* 65 → 100 */
.hfs-slide:nth-child(3) img{filter:brightness(1.14)}   /* 96 → 109 */
.hfs-slide:nth-child(4) img{filter:brightness(1.46)}   /* 67 → 98  */
@keyframes hfsKen{from{transform:scale(1)}to{transform:scale(1.08)}}
/* 双层遮罩：横向只在左侧文字区强压暗、向右快速收敛把主体让出来；
   纵向只压顶部（header 附近）与底部（信任条附近），中段不压。
   ⚠️ 2026-09-19 换底图后重调：旧参数（60% 处仍 .62、100% 处 .42）是为「亮色节点网格」旧图定的，
   套在新图上把右侧玻璃主体压得几乎看不见（实测文字对比度 18–19，远超标，等于白压）。
   现口径：左侧 0–26% 保持 ≥.90 保文字 AA，56% 之后降到 .12 以下让主体显出光泽。
   实测文字对比度仍全部 ≥ 12（AAA 门槛 7），余量充足。 */
.hfs-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(96deg,rgba(5,12,36,.94) 0%,rgba(5,12,36,.90) 26%,rgba(5,12,36,.70) 44%,rgba(5,12,36,.32) 64%,rgba(6,15,43,.12) 84%,rgba(6,15,43,.04) 100%),
    linear-gradient(180deg,rgba(5,12,36,.55) 0%,rgba(5,12,36,.06) 26%,rgba(5,12,36,0) 56%,rgba(5,12,36,.44) 100%),
    radial-gradient(120% 90% at 76% 40%,rgba(6,182,212,.10),transparent 64%);
}
.hfs-grid{
  position:absolute;inset:0;opacity:.24;
  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:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 22% 46%,#000 20%,transparent 74%);
  mask-image:radial-gradient(ellipse 70% 60% at 22% 46%,#000 20%,transparent 74%);
}

/* ---------- 内容层（沿用全站 .container 宽度口径 1384 / 1504） ---------- */
.hfs-wrap{
  position:relative;z-index:3;width:100%;
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:52px;align-items:center;
}
.hfs-copy{min-width:0}
.hero-fs .hero-badge{margin-bottom:22px}
.hero-fs h1{font-size:clamp(27px,3.1vw,46px);line-height:1.18;margin-bottom:20px}

/* ---------- 4 屏文案 ---------- */
.hfs-panels{display:grid}
.hfs-panel{
  grid-area:1/1;min-width:0;
  opacity:0;visibility:hidden;transform:translateY(16px);pointer-events:none;
  transition:opacity .5s var(--ease),transform .6s var(--ease),visibility .5s;
}
.hfs-panel.is-active{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.hfs-kicker{
  display:flex;align-items:center;gap:10px;margin-bottom:12px;
  font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--cyan-soft);
}
.hfs-kicker b{
  font-family:var(--font-display);font-size:14px;font-weight:800;letter-spacing:.02em;
  padding:3px 9px;border-radius:8px;
  background:rgba(103,232,249,.16);border:1px solid rgba(103,232,249,.32);
}
.hfs-title{
  font-size:clamp(21px,2.05vw,31px);font-weight:800;line-height:1.34;
  letter-spacing:-.01em;margin-bottom:14px;color:#fff;
}
.hfs-title .hl{
  background:linear-gradient(120deg,#67E8F9,#A5B4FC 58%,#93C5FD);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hfs-desc{font-size:15.5px;line-height:1.8;color:rgba(226,236,255,.82);max-width:640px;margin-bottom:26px}
.hfs-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-fs .hero-stats{margin-top:42px}

/* ---------- 右侧数据面板（沿用共享 .hero-card，只补定位） ---------- */
.hfs-visual{min-width:0;max-width:520px;margin-left:auto}

/* ---------- 底部多屏导航 ---------- */
.hfs-nav{position:relative;z-index:4;margin-top:12px}
/* ⚠️ 2026-09-19：导航条从 `position:absolute;left:0;right:0;bottom:74px` 改为**文档流**元素
   （.hero-fs 这个 flex 列的最后一个 item，紧跟 .hfs-wrap）。
   原因：用户要求 hero 满屏 + 切换按钮「紧跟内容块下方」。
   absolute + 固定 bottom 是把按钮钉在「离 hero 底固定距离」处，做不到「跟内容走」——
   视口越高按钮离内容越远（1920×1080 下会拉开 180px+，等于又变回「上下空间太高」）。
   现在 margin-top:12 就是「内容块底 → 按钮顶」的间距，与视口高度解耦，各断点通用。
   底部留白改由 hero 的 flex 剩余空间自然产生（见 .hero-fs 注释 ②③），
   因此**不再需要**逐档解 A/B 对称，也不再需要联动 padding-bottom。
   ⚠️ 别再改回 absolute：一旦改回，hero 满屏时按钮会被钉到离底 74px 处，
      与内容块之间拉开一大段空白，就不是用户截图那个效果了。 */
.hfs-nav-inner{display:flex;align-items:center;gap:18px}
.hfs-dots{display:flex;gap:12px;flex:1;min-width:0}
.hfs-dot{
  flex:1 1 0;min-width:0;max-width:260px;text-align:left;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;
  padding:12px 14px 13px;border-radius:14px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);color:rgba(226,236,255,.72);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s;
}
.hfs-dot .n{font-family:var(--font-display);font-size:12px;font-weight:800;letter-spacing:.06em}
.hfs-dot .t{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hfs-dot .bar{
  grid-column:1/-1;height:3px;margin-top:8px;border-radius:3px;
  background:rgba(255,255,255,.18);overflow:hidden;
}
.hfs-dot .bar i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,#22D3EE,#818CF8)}
.hfs-dot:hover{background:rgba(255,255,255,.14);color:#fff}
.hfs-dot.is-active{background:rgba(255,255,255,.16);border-color:rgba(103,232,249,.5);color:#fff}
.hfs-dot.is-active .n{color:var(--cyan-soft)}
/* 进度条时长必须与 main.js 的 HFS_DUR 一致（6000ms），否则条走完屏还没切 */
.hfs-dot.is-active .bar i{animation:hfsFill 6s linear forwards}
@keyframes hfsFill{from{width:0}to{width:100%}}
.hfs-arrows{display:flex;gap:10px;flex:none}
.hfs-arrow{
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);transition:background .25s var(--ease),transform .25s var(--ease),opacity .25s var(--ease);
  opacity:.45;
}
.hfs-arrow:hover,.hfs-arrow:active{background:rgba(255,255,255,.2);transform:translateY(-2px);opacity:1}
.hfs-arrow svg{width:18px;height:18px}

/* ---------- 响应式 ---------- */
/* ⚠️ ≥1600 不再单独放大 padding。居中模式下 padding 只是**下限**（见主规则注释 ④），
   取 120 会让 1920×900 的 hero 被撑到 855（满屏应 828）。现在统一由 clamp(40px,6vh,104px) 接管。
   687 行那条 @media(min-width:1600px){.hero{padding:120px 0 170px}} 仍会命中本元素
   （class="hero hero-fs"），所以**必须**在这里显式覆盖 —— 别把这条删掉，也别挪到 683 行之前。 */
@media(min-width:1600px){ .hero-fs{padding:clamp(40px,6vh,104px) 0} }

/* ---------- 矮屏（宽扁视口）----------
   ⚠️ 2026-09-19 第三轮（用户：「首页第一屏怎么成这样啦」@1920×728）。
   背景：hero 现在是「满屏 + 内容靠上 + 按钮紧跟内容」，但矮视口装不下这套内容 ——
   实测 1920×728 下 hero 满屏应 656，而内容需要 padT(120) + wrap(525) + 12 + nav(58) = 715，
   于是 hero 被内容撑破到 715、底边掉到 788（视口外 60px），
   连锁反应：① 切换按钮 730~788 整个被挤出首屏；② 按钮还被信任条（732 起）压住。
   所以矮屏下必须两件事同时做（缺一仍会溢出）：
     ① 减上留白：120/104 → 80；
     ② 压缩右栏数据面板：525 → ~430（chart 高度、mini-row 内边距、卡片内边距一起收）。
   验收判据（不是「hero 满屏」而是这三条，脚本 probe_hfs_all.py）：
     navBot(内容底+73) ≤ 视口高   且   navBot ≤ 信任条顶(heroBot-56)   且   hero 仍满屏。
   ⚠️ 断点宽度取 901 而不是 1025：901~1024 也是两列布局（见下方 900px 处注释），
      1024×768 同样会溢出，漏掉这段等于没修。
   ⚠️ 只压字号不够 —— 上面那版就只压了字号，结果 1920×728 仍溢出 59px。 */
@media(min-width:901px) and (max-height:820px){
  /* padding 沿用 clamp(40px,6vh,104px)：768 高 → 46、720 高 → 43。
     这里**不能**写死 80 —— 矮屏内容压到约 507 后，80+507+80 = 667 会超过满屏 656。 */
  .hero-fs{padding:clamp(40px,6vh,104px) 0}
  .hero-fs .hero-badge{margin-bottom:14px}
  .hero-fs h1{font-size:clamp(24px,2.4vw,36px);margin-bottom:12px}
  .hfs-kicker{margin-bottom:8px}
  .hfs-title{font-size:clamp(19px,1.6vw,25px);margin-bottom:9px}
  .hfs-desc{font-size:14px;line-height:1.72;margin-bottom:16px;max-width:540px}
  .hero-fs .hero-stats{margin-top:20px}
  .hero-fs .hero-stats .num{font-size:clamp(23px,2vw,28px)}
  .hero-fs .hero-stats .lbl{font-size:12px}
  /* 右栏数据面板压缩（522 → 约 430）。全部用 .hero-fs 前缀限定，
     不碰共享的 .hero-card / .chart / .mini-row 本体 —— 别的页也用它们。 */
  .hero-fs .hero-card{padding:22px 24px}
  .hero-fs .hero-card .tag{margin-bottom:10px}
  .hero-fs .chart{height:52px;margin-bottom:14px}
  .hero-fs .mini-row{padding:9px 12px;margin-bottom:7px}
  .hero-fs .mini-row .ic{width:32px;height:32px}
}
@media(max-width:1240px){
  .hfs-wrap{gap:36px}
  .hfs-visual{max-width:460px}
}
@media(max-width:1080px){
  .hfs-wrap{gap:26px}
  .hfs-visual{max-width:380px}
  .hfs-title{font-size:clamp(19px,1.9vw,26px)}
}
/* ⚠️ 两列一直保持到 901px：实测 1024px 下若在这里就变单列，右侧数据面板被折到下方，
   hero 会被撑到 1326px 高。900px 以下才收单列，同时隐藏数据面板。 */
@media(max-width:900px){
  /* 单列后内容很高，强行满屏只会被内容撑破（min-height 是下限、撑不住反差），
     所以 ≤900 起取消满屏，改成内容自适应 + 显式下留白（74 = 按钮下方空白，
     按钮已在文档流里、不再需要为绝对定位预留空间）。 */
  .hero-fs{min-height:0;padding:104px 0 74px}
  .hfs-wrap{grid-template-columns:1fr;gap:0}
  .hfs-visual{display:none}
  .hfs-desc{max-width:none}
  /* 移动端文案横跨整个宽度，横向渐变（左暗右亮）不再适用 ——
     换成整幅统一的纵向遮罩，保证任意图片位置上的字都 ≥ AA。
     ⚠️ 2026-09-19 换竖版新图后重调：旧值 .74/.66/.78 是为旧图的亮节点定的，
     套在新图上整块糊成一片、主体看不见。现值实测 390×844 下文字对比度仍 ≥ 17。 */
  .hfs-scrim{
    background:
      linear-gradient(180deg,rgba(6,15,43,.58) 0%,rgba(6,15,43,.46) 32%,rgba(6,15,43,.64) 100%),
      radial-gradient(110% 70% at 72% 30%,rgba(6,182,212,.10),transparent 60%);
  }
  /* 竖版底图在 390 宽下只显示中间约 64% 宽，主体又被整幅遮罩压着 —— 观感偏灰。
     这里给底图补一点亮度与饱和，把玻璃体的通透感找回来。
     实测提亮后 390×844 文字对比度仍有 16.9–18.2（AAA 门槛 7），余量充足。
     ⚠️ 第 2、3 屏必须在这里重写一遍：上面主区域的 .hfs-slide:nth-child(n)
        是 (0,2,1)、这条是 (0,1,1)，主区域那条特异性更高，不重写就会被它吃掉
        saturate/contrast，导致移动端第 2、3 屏比其它屏寡淡。
        竖版各屏主体 p90 = 101 / 64 / 79 / 112，同样按最亮的第 1 屏对齐（×1.14 为移动端基准）。 */
  .hfs-slide img{filter:saturate(1.12) brightness(1.14) contrast(1.04)}
  .hfs-slide:nth-child(2) img{filter:saturate(1.12) brightness(1.62) contrast(1.04)}
  .hfs-slide:nth-child(3) img{filter:saturate(1.12) brightness(1.30) contrast(1.04)}
  .hfs-dots{gap:8px}
  .hfs-dot{padding:10px 12px 11px;max-width:none}
  .hfs-dot .t{display:none}
  .hfs-arrow{width:40px;height:40px}
}
@media(max-width:560px){
  .hero-fs{padding:76px 0 74px}   /* 上留白与共享 .hero 的 759 行同值；下留白 74 = 按钮下方空白 */
  .hfs-arrows{display:none}
  .hfs-nav-inner{gap:0}
  .hfs-dot{padding:9px 8px 10px}
  .hfs-desc{font-size:14.5px;margin-bottom:20px}
  .hfs-actions .btn{width:100%}
  /* 全站规则在 ≤560 把 .hero-stats 拆成 4 行竖排（带分隔线），hero 直接被撑到 1083px；
     这里压回 2×2，省掉约 230px */
  .hero-fs .hero-stats{margin-top:26px}
  .hero-fs .hero-stats .stat{flex:0 0 50%;padding:6px 0;margin-top:0;border-top:0}
  .hero-fs .hero-stats .num{font-size:24px}
  .hero-fs .hero-stats .lbl{font-size:12px}
}

/* ---------- 超宽大屏（≥2000 宽 且 ≥1150 高）：纵向节奏展开 ----------
   ⚠️ 2026-09-19 第五轮（用户：「3440宽度下，hero内容和按钮部分可以分割空间大一些，
      这样上下空间没这么空」）。
   问题：内容块高度是**定值** —— badge/h1/panels/stats 的 margin 全是按手机与常规桌面
        定的小值（22/20/12/14/26/42/12），在 vh=1440 的超宽屏上内容只占 615px，
        `center` 又把剩余 753px 均分给上下 → 实测上下各留白 376px，看着很空。
   做法：只放大**间距**（不动字号、不动结构），让内容自然长高、把留白吃掉一部分。
        间距一律 `clamp(现用值, k*vh, 上限)`：下限就是现用值，保证只有超高屏才有增量。
   实测（probe_hero_xl.py / verify_hero.py）：
     3440×1440  内容 615 → 938   上下留白 376/376 → 215/215
     2560×1440  同上（留白只看视口高，与宽度无关）           → 215/215
     2560×1080  不命中（高 1080 < 1150）                     → 保持 196/196
     1920×1080  不命中（宽 1920 < 2000）                     → 保持 196/196
     1440×900   不命中                                       → 保持 109/109
   ⚠️ 门限必须**宽高同时**判：只判宽会让 2560×1080 的内容被撑到只剩 ~95px 留白（贴边）；
      只判高会让 1440×1440 这类方形屏（少见但存在）跟着变，把常规首屏的节奏打乱。
   ⚠️ clamp 的上限（第三值）不能省：防的是 3440×2000 这类极端屏 ——
      间距若按 vh 无上限增长，2000 高会得到 ~190px 的按钮间距，内容会被拆散。 */
@media(min-width:2000px) and (min-height:1150px){
  /* 左栏纵向节奏（徽标 → 标题 → 文案屏 → 数据条）；注释里的数字是 @1440 实测值 */
  .hero-fs .hero-badge{margin-bottom:clamp(22px,3.9vh,62px)}     /* 56（原 22） */
  .hero-fs h1{margin-bottom:clamp(20px,3.6vh,58px)}              /* 52（原 20） */
  .hfs-kicker{margin-bottom:clamp(12px,2.3vh,37px)}              /* 33（原 12） */
  .hfs-title{margin-bottom:clamp(14px,2.8vh,45px)}               /* 40（原 14） */
  .hfs-desc{margin-bottom:clamp(26px,4.4vh,70px)}                /* 63（原 26） */
  .hero-fs .hero-stats{margin-top:clamp(42px,8.9vh,142px)}       /* 128（原 42） */
  /* 「内容 → 底部切换按钮」这一处分割空间（用户点名要拉开的） */
  .hfs-nav{margin-top:clamp(12px,7.6vh,122px)}                   /* 109（原 12） */
  /* 右栏数据面板同步放大：左栏长到 938 而右栏仍 525 的话，右侧会显得又小又飘。
     全部用 .hero-fs 前缀限定，不碰共享的 .hero-card / .chart / .mini-row 本体。 */
  .hero-fs .hero-card{padding:40px 38px}
  .hero-fs .chart{height:clamp(86px,7.6vh,120px);margin-bottom:clamp(20px,2.2vh,34px)}
  .hero-fs .mini-row{padding:clamp(13px,1.25vh,22px) clamp(15px,1.4vh,24px);
                     margin-bottom:clamp(10px,1.15vh,18px)}
  .hero-fs .mini-row .ic{width:clamp(36px,3.25vh,50px);height:clamp(36px,3.25vh,50px)}
  .hero-fs .mini-row .ic svg{width:clamp(18px,1.6vh,24px);height:clamp(18px,1.6vh,24px)}
}

/* ---------- 超宽屏（≥2000 宽）：让底图主体退回背景层 ----------
   ⚠️ 2026-09-19 换底图新增。原因：object-fit:cover 在 3440 上把 1920 宽的图放大到 1.79 倍，
      右侧玻璃主体随之变得巨大且高光很强，与右栏数据面板抢视觉（面板几乎被亮部淹没）。
   做法：只在右缘再叠一层极轻的横向压暗（右缘 26%，到 62% 处渐隐为 0），
        完全不动左侧文字区 —— 0–44% 各停靠点与主遮罩逐字相同，文字对比度不受影响。
   为何不靠改 object-position：超宽屏下图是「按宽度铺满」，水平方向根本没有裁切余量，
   object-position 的 x 值在此无用；而主体放大是 cover 的必然结果，只能靠遮罩让它后退。 */
@media(min-width:2000px){
  .hfs-scrim{
    background:
      linear-gradient(96deg,rgba(5,12,36,.94) 0%,rgba(5,12,36,.90) 26%,rgba(5,12,36,.70) 44%,rgba(5,12,36,.32) 64%,rgba(6,15,43,.12) 84%,rgba(6,15,43,.04) 100%),
      linear-gradient(180deg,rgba(5,12,36,.55) 0%,rgba(5,12,36,.06) 26%,rgba(5,12,36,0) 56%,rgba(5,12,36,.44) 100%),
      radial-gradient(120% 90% at 76% 40%,rgba(6,182,212,.10),transparent 64%),
      linear-gradient(270deg,rgba(5,12,36,.26) 0%,rgba(5,12,36,.09) 34%,rgba(5,12,36,0) 62%);
  }
}


/* ================================================================
   Q. 多彩点缀色（2026-09-19）
   ------------------------------------------------------------
   问题：色彩审计（audit_color.py）显示全站 99% 颜色集中在 185°-235°
         （青→蓝→靛）区间，这是「单调」的量化根因。
   方案：品牌主色（蓝 / 青）**完全不动**，只在「点缀位」引入 5 色并按位置轮转 ——
         图标底、标签、图表柱、数据条、hover 装饰条、日期章。
         —— 需求原话：点缀多彩，主色不变。
   实现：一组 CSS 变量做「色槽」，容器上按 nth-child 赋值，子元素只消费变量。
         后续调色只需改下面 5 条赋值，不碰 15 条组件规则。
   轮转：① 品牌青（保留，做视觉锚点）② 琥珀 ③ 玫红 ④ 紫罗兰 ⑤ 翠绿 ⑥ 青柠
   对比度：-t 系列（浅底文字/图标）实测 ≥ 4.9:1，-l 系列（深色底）≥ 4.5:1；
          hover 态一律保留原品牌处理，不引入新的对比度风险。
   ⚠ 单独写一段而不是改中段：这些组件的基础规则散落在 311/477/603/978/1046/1078/1089
     等行且同特异性，写在前面会被后面的 @media(min-width:1600px) 段冲掉。
================================================================ */
:root{
  /* 默认值 = 原品牌色，保证任何未命中 nth 的元素行为完全不变 */
  --ax-g:linear-gradient(140deg,var(--brand-50),#ECFEFF);   /* 浅面图标底 */
  --ax-t:var(--brand-600);                                  /* 浅面图标 / 小字色 */
  --ax-rim:rgba(37,99,235,.15);                             /* 描边 */
  --ax-pill:var(--brand-50);                                /* 标签底 */
  --ax-l:var(--cyan-soft);                                  /* 深面图标色 */
  --ax-ds:linear-gradient(140deg,rgba(34,211,238,.2),rgba(129,140,248,.16)); /* 深面图标底 */
  --ax-bar:var(--grad);                                     /* 顶/侧装饰条 */
  --ax-line:linear-gradient(90deg,transparent,var(--cyan-bright),transparent);
  --ax-sol:linear-gradient(140deg,#3B82F6,#1D4ED8);   /* 浅面实心图标块 */
  /* 区块小标题徽章专用槽位（独立于卡级色槽，避免两者互相干扰） */
  --eb-g:linear-gradient(120deg,rgba(37,99,235,.08),rgba(6,182,212,.1));
  --eb-t:var(--brand-600);
  --eb-rim:rgba(37,99,235,.18);
  --ax-sod:linear-gradient(140deg,#A5F3FC,#67E8F9);   /* 深面实心图标块 */
  --ax-ink:#0B3A47;                                   /* 深面实心块上的图标色 */
}

/* ---- 色槽赋值：第 1 位留品牌做锚点，2-6 位轮转 5 色 ---- */
:is(.trust-item,.step-card,.value-card,.commit-item,.benefit-card,.gn-item,.case-card,.news-card,.service-card):not(.feature):nth-child(6n+2),
section:nth-of-type(6n+2):not(.commit){
  --ax-g:linear-gradient(140deg,#FFFBEB,#FEF3C7); --ax-t:#92400E; --ax-rim:rgba(245,158,11,.26); --ax-pill:#FEF3C7;
  --ax-l:#FCD34D; --ax-ds:linear-gradient(140deg,rgba(252,211,77,.22),rgba(245,158,11,.14));
  --ax-bar:linear-gradient(90deg,#B45309,#F59E0B); --ax-line:linear-gradient(90deg,transparent,#FCD34D,transparent);
  --ax-sol:linear-gradient(140deg,#D97706,#B45309); --ax-sod:linear-gradient(140deg,#FDE68A,#FCD34D); --ax-ink:#78350F;
  --eb-g:linear-gradient(120deg,#FFFBEB,#FEF3C7); --eb-t:#92400E; --eb-rim:rgba(245,158,11,.26);
}
:is(.trust-item,.step-card,.value-card,.commit-item,.benefit-card,.gn-item,.case-card,.news-card,.service-card):not(.feature):nth-child(6n+3),
section:nth-of-type(6n+3):not(.commit){
  --ax-g:linear-gradient(140deg,#FFF1F2,#FFE4E6); --ax-t:#9F1239; --ax-rim:rgba(244,63,94,.24); --ax-pill:#FFE4E6;
  --ax-l:#FDA4AF; --ax-ds:linear-gradient(140deg,rgba(253,164,175,.22),rgba(244,63,94,.14));
  --ax-bar:linear-gradient(90deg,#9F1239,#F43F5E); --ax-line:linear-gradient(90deg,transparent,#FDA4AF,transparent);
  --ax-sol:linear-gradient(140deg,#E11D48,#BE123C); --ax-sod:linear-gradient(140deg,#FECDD3,#FDA4AF); --ax-ink:#881337;
  --eb-g:linear-gradient(120deg,#FFF1F2,#FFE4E6); --eb-t:#9F1239; --eb-rim:rgba(244,63,94,.24);
}
:is(.trust-item,.step-card,.value-card,.commit-item,.benefit-card,.gn-item,.case-card,.news-card,.service-card):not(.feature):nth-child(6n+4),
section:nth-of-type(6n+4):not(.commit){
  --ax-g:linear-gradient(140deg,#F5F3FF,#EDE9FE); --ax-t:#5B21B6; --ax-rim:rgba(139,92,246,.26); --ax-pill:#EDE9FE;
  --ax-l:#C4B5FD; --ax-ds:linear-gradient(140deg,rgba(196,181,253,.22),rgba(139,92,246,.14));
  --ax-bar:linear-gradient(90deg,#5B21B6,#8B5CF6); --ax-line:linear-gradient(90deg,transparent,#C4B5FD,transparent);
  --ax-sol:linear-gradient(140deg,#8B5CF6,#6D28D9); --ax-sod:linear-gradient(140deg,#DDD6FE,#C4B5FD); --ax-ink:#4C1D95;
  --eb-g:linear-gradient(120deg,#F5F3FF,#EDE9FE); --eb-t:#5B21B6; --eb-rim:rgba(139,92,246,.26);
}
:is(.trust-item,.step-card,.value-card,.commit-item,.benefit-card,.gn-item,.case-card,.news-card,.service-card):not(.feature):nth-child(6n+5),
section:nth-of-type(6n+5):not(.commit){
  --ax-g:linear-gradient(140deg,#ECFDF5,#D1FAE5); --ax-t:#065F46; --ax-rim:rgba(16,185,129,.26); --ax-pill:#D1FAE5;
  --ax-l:#6EE7B7; --ax-ds:linear-gradient(140deg,rgba(110,231,183,.22),rgba(16,185,129,.14));
  --ax-bar:linear-gradient(90deg,#065F46,#10B981); --ax-line:linear-gradient(90deg,transparent,#6EE7B7,transparent);
  --ax-sol:linear-gradient(140deg,#059669,#047857); --ax-sod:linear-gradient(140deg,#A7F3D0,#6EE7B7); --ax-ink:#064E3B;
  --eb-g:linear-gradient(120deg,#ECFDF5,#D1FAE5); --eb-t:#065F46; --eb-rim:rgba(16,185,129,.26);
}
:is(.trust-item,.step-card,.value-card,.commit-item,.benefit-card,.gn-item,.case-card,.news-card,.service-card):not(.feature):nth-child(6n),
section:nth-of-type(6n+6):not(.commit){
  --ax-g:linear-gradient(140deg,#F7FEE7,#ECFCCB); --ax-t:#3F6212; --ax-rim:rgba(101,163,13,.26); --ax-pill:#ECFCCB;
  --ax-l:#BEF264; --ax-ds:linear-gradient(140deg,rgba(190,242,100,.22),rgba(101,163,13,.14));
  --ax-bar:linear-gradient(90deg,#3F6212,#84CC16); --ax-line:linear-gradient(90deg,transparent,#BEF264,transparent);
  --ax-sol:linear-gradient(140deg,#65A30D,#4D7C0F); --ax-sod:linear-gradient(140deg,#E4F9B8,#BEF264); --ax-ink:#3F6212;
  --eb-g:linear-gradient(120deg,#F7FEE7,#ECFCCB); --eb-t:#3F6212; --eb-rim:rgba(101,163,13,.26);
}

/* ---- 消费槽位：只写颜色属性，尺寸/动效仍由中段基础规则负责 ---- */
/* 浅面：信任条 / 流程步骤 / 优势卡 / 服务卡的图标底 */
/* ⚠ 这里用实心块而不是淡色底：audit_hue.py 实测淡底的方案只让旧色带占比降 0.6pt，
   50px 图标的像素量在整页里不足千分之三，肉眼等于没改。实心块才真正看得出「多彩」。
   对比度：白图标 vs 各渐变最浅端均 ≥ 3.09:1（图形 AA）；深色卡用浅亮块 + 深墨色 ≥ 5.06:1。 */
.trust-item .ic{background:var(--ax-sol);color:#fff;box-shadow:0 10px 22px -10px rgba(11,18,32,.28)}
.step-card .ic{background:var(--ax-sol);color:#fff;box-shadow:0 10px 22px -10px rgba(11,18,32,.28)}
.benefit-card .ic{background:var(--ax-sol);color:#fff;box-shadow:0 10px 22px -10px rgba(11,18,32,.28)}
.service-card .ic{background:var(--ax-sol);color:#fff;box-shadow:0 10px 22px -10px rgba(11,18,32,.28)}
/* 深面：价值卡 / 承诺卡 —— 深色卡上用浅亮实心块反向提亮 */
.value-card .ic{background:var(--ax-sod);color:var(--ax-ink)}
.commit-item .ic{background:var(--ax-sod);color:var(--ax-ink)}
/* 装饰条：默认隐藏，hover 才显现 —— 视觉丰富但不影响静态阅读 */
.service-card::before{background:var(--ax-bar)}
.news-card::before{background:var(--ax-bar)}
.benefit-card::before,.benefit-card::after{background:var(--ax-bar)}
.step-card::after{background:var(--ax-bar)}
/* 深色卡顶部的柔光线 */
.value-card::after,.commit-item::after{background:var(--ax-line)}
/* 标签：案例类别标签（hover 时仍是品牌渐变白字，不覆盖） */
.case-card .case-tag{background:var(--ax-pill);color:var(--ax-t)}
/* 资讯列表：日期章 + 右侧箭头钮（原 --ink-4 在白底仅 2.87:1，换 --ax-t 顺带达标） */
.gn-item .gn-date{background:var(--ax-g);color:var(--ax-t);border-color:var(--ax-rim)}
.gn-item .go{color:var(--ax-t);background:var(--ax-pill)}

/* ---- 数据可视化：柱状图按根轮转，间隔保留品牌青做锚点，末根留原亮绿收尾 ---- */
.chart i:nth-child(1){background:linear-gradient(180deg,#A5F3FC,rgba(8,145,178,.5))}
.chart i:nth-child(2){background:linear-gradient(180deg,#FCD34D,rgba(217,119,6,.45))}
.chart i:nth-child(3){background:linear-gradient(180deg,#FDA4AF,rgba(190,18,60,.42))}
.chart i:nth-child(4){background:linear-gradient(180deg,#93C5FD,rgba(37,99,235,.45))}
.chart i:nth-child(5){background:linear-gradient(180deg,#C4B5FD,rgba(109,40,217,.42))}
.chart i:nth-child(6){background:linear-gradient(180deg,#6EE7B7,rgba(4,120,87,.42))}
.chart i:nth-child(7){background:linear-gradient(180deg,#67E8F9,rgba(6,182,212,.48))}
.chart i:nth-child(8){background:linear-gradient(180deg,#D9F99D,rgba(77,124,15,.42))}
/* 焦点卡里的迷你柱（深色底，用浅色调） */
.service-card.feature .mini-chart i:nth-child(1){background:linear-gradient(180deg,#FCD34D,rgba(217,119,6,.45))}
.service-card.feature .mini-chart i:nth-child(2){background:linear-gradient(180deg,#FDA4AF,rgba(244,63,94,.42))}
.service-card.feature .mini-chart i:nth-child(3){background:linear-gradient(180deg,#C4B5FD,rgba(139,92,246,.42))}
.service-card.feature .mini-chart i:nth-child(4){background:linear-gradient(180deg,#D9F99D,rgba(101,163,13,.42))}

/* ---- 区块级节奏：每个 section 的小标题徽章换一种色调（第 1 段留品牌）----
   结构依据 probe_section.py：7 个抽样页里 .eyebrow 100% 落在 section 内，
   且同页所有 section 共享同一个父级（BODY 或 MAIN），nth-of-type 序号连续可用。
   ⚠ 深色区块的 .eyebrow 带内联 style（background/border-color/color），
     内联优先级更高 —— 这里不会破坏它们的浅色配色，只作用于浅色区块。 */
.eyebrow{background:var(--eb-g);border-color:var(--eb-rim);color:var(--eb-t)}


/* ================================================================
   R. GEO 页「八大优势」改版模块（2026-09-22）
   ------------------------------------------------------------
   内容来源：《浪知潮网络 GEO 优化八大优势》——每条 = 机制 / 同行 vs 浪知潮 / 客户价值。
   类名一律 .g8-* 且限定 .geo-page：
   ⚠️ 不能用 .advantage-*（.advantage-card 被 wxkf/ydddz/jjfa/wztc/seotc/tgtc/wjtgtc 等 9 页共用）。
   ⚠️ 也别再用 .adv-* 命名：EasyList 通用规则里有一条 `##.adv-banner`（easylist.txt:9247），
      带这个类名的元素会被 uBlock / AdGuard / ABP 等插件直接隐藏 —— 2026-09-24 首页优势卡
      的渐变招牌头就是这么「凭空消失」的，所以整族已改名 .advantage-*（见 fix_adv_adblock.py）。
   ⚠️ 颜色只消费 Q 节的 --ax-* 色槽（--ax-sol 实心图标块 / --ax-t 文字 / --ax-pill 标签底 /
      --ax-g 浅面底 / --ax-rim 描边），8 张卡自己赋一组值 —— 不碰品牌主色。
================================================================ */

/* ---- 一句话定位条 ---- */
.geo-page .g8-lead{
  position:relative;overflow:hidden;
  border-radius:var(--radius-xl);padding:34px 44px 36px;margin-bottom:30px;
  /* ⚠️ 尾端不要用 #0E7490（偏亮的青）：那一端叠上右上角白色高光后实测背景亮度 L≈0.22，
     rgba(226,236,255,.88) 的白字只剩 4.08:1，不到 AA。改成更深的 #0A5B72 + 高光降到 .16，
     正文给到纯白 —— 实测 5.19:1。强调改用 <b> 的青色下滑线，不靠颜色深浅区分。 */
  background:linear-gradient(120deg,#0B1B3F 0%,#16357F 48%,#0A5B72 100%);
  box-shadow:0 30px 64px -30px rgba(11,27,63,.55);
}
.geo-page .g8-lead::before{
  content:"";position:absolute;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 66%);
  top:-190px;right:-90px;pointer-events:none;
}
.geo-page .g8-lead::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;
  background-image:linear-gradient(rgba(255,255,255,.45) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.45) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(ellipse 62% 90% at 86% 26%,#000,transparent 74%);
          mask-image:radial-gradient(ellipse 62% 90% at 86% 26%,#000,transparent 74%);
}
.geo-page .g8-lead-s{
  position:relative;z-index:1;margin-bottom:12px;
  font-family:var(--font-display);font-weight:800;letter-spacing:-.01em;line-height:1.45;
  font-size:clamp(19px,2.1vw,27px);
  background:linear-gradient(100deg,#FDE68A 0%,#93C5FD 52%,#67E8F9 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.geo-page .g8-lead-t{position:relative;z-index:1;font-size:14.5px;line-height:1.9;color:#fff}
.geo-page .g8-lead-t b{font-weight:800;color:#fff;box-shadow:inset 0 -8px 0 rgba(34,211,238,.30);padding:0 2px}

/* ---- 8 卡网格 ---- */
.geo-page .g8-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:stretch}
.geo-page .g8-card{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px 28px 22px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.geo-page .g8-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--ax-bar);transform:scaleX(.24);transform-origin:left;
  transition:transform .45s var(--ease);
}
.geo-page .g8-card:hover::before{transform:scaleX(1)}
.geo-page .g8-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--brand-200)}

/* 卡头：实心图标块 + 序号章 */
.geo-page .g8-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.geo-page .g8-ic{
  width:46px;height:46px;border-radius:14px;flex-shrink:0;
  background:var(--ax-sol);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 22px -10px rgba(11,18,32,.30);
  transition:transform .3s var(--ease);
}
.geo-page .g8-card:hover .g8-ic{transform:scale(1.06) rotate(-4deg)}
.geo-page .g8-ic svg{width:22px;height:22px}
.geo-page .g8-no{
  flex-shrink:0;display:inline-flex;align-items:center;line-height:1;
  padding:6px 13px;border-radius:999px;
  font-family:var(--font-display);font-size:14px;font-weight:800;letter-spacing:.06em;
  background:var(--ax-pill);color:var(--ax-t);
}
.geo-page .g8-h{font-size:18px;font-weight:800;line-height:1.5;letter-spacing:-.01em;color:var(--ink);margin-bottom:12px}
.geo-page .g8-why{font-size:13.5px;line-height:1.85;color:var(--ink-3);margin-bottom:16px}
.geo-page .g8-tag{
  display:inline-block;font-style:normal;margin-right:8px;padding:2px 8px;border-radius:6px;
  font-size:11px;font-weight:800;letter-spacing:.08em;
  background:var(--ax-pill);color:var(--ax-t);
}

/* 同行 vs 浪知潮：两行对比 */
.geo-page .g8-cmp{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.geo-page .g8-row{display:flex;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid transparent}
.geo-page .g8-k{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  height:22px;padding:0 10px;border-radius:6px;line-height:1;
  font-size:11.5px;font-weight:800;letter-spacing:.03em;
}
.geo-page .g8-row p{font-size:13px;line-height:1.75;margin:0}
.geo-page .g8-plain{background:#F7F9FD;border-color:#EAEFF6}
.geo-page .g8-plain .g8-k{background:#E9EEF6;color:#4A5A75}
.geo-page .g8-plain p{color:#4A5A75}
.geo-page .g8-us{background:var(--ax-g);border-color:var(--ax-rim)}
.geo-page .g8-us .g8-k{background:var(--ax-pill);color:var(--ax-t)}
.geo-page .g8-us p{color:var(--ink-2);font-weight:600}

/* 客户价值：钉在卡底，同排卡片底边自动齐平 */
.geo-page .g8-val{
  margin-top:auto;display:flex;gap:10px;align-items:flex-start;
  padding:13px 15px;border-radius:12px;
  background:var(--ax-g);border:1px solid var(--ax-rim);
  font-size:13.5px;line-height:1.75;color:var(--ink-2);
}
.geo-page .g8-val svg{flex-shrink:0;width:18px;height:18px;margin-top:3px;color:var(--ax-t)}
.geo-page .g8-val b{font-weight:800;color:var(--ax-t)}

/* ---- 色槽赋值：第 1、7 张留品牌做锚点，其余轮转 Q 节 5 色 ---- */
.geo-page .g8-card:nth-child(1),
.geo-page .g8-card:nth-child(7){
  --ax-g:linear-gradient(140deg,var(--brand-50),#ECFEFF); --ax-t:var(--brand-600);
  --ax-rim:rgba(37,99,235,.15); --ax-pill:var(--brand-50);
  --ax-bar:linear-gradient(90deg,#2563EB,#06B6D4);
  --ax-sol:linear-gradient(140deg,#3B82F6,#1D4ED8);
}
.geo-page .g8-card:nth-child(2),
.geo-page .g8-card:nth-child(8){
  --ax-g:linear-gradient(140deg,#FFFBEB,#FEF3C7); --ax-t:#92400E;
  --ax-rim:rgba(245,158,11,.26); --ax-pill:#FEF3C7;
  --ax-bar:linear-gradient(90deg,#B45309,#F59E0B);
  --ax-sol:linear-gradient(140deg,#D97706,#B45309);
}
.geo-page .g8-card:nth-child(3){
  --ax-g:linear-gradient(140deg,#FFF1F2,#FFE4E6); --ax-t:#9F1239;
  --ax-rim:rgba(244,63,94,.24); --ax-pill:#FFE4E6;
  --ax-bar:linear-gradient(90deg,#9F1239,#F43F5E);
  --ax-sol:linear-gradient(140deg,#E11D48,#BE123C);
}
.geo-page .g8-card:nth-child(4){
  --ax-g:linear-gradient(140deg,#F5F3FF,#EDE9FE); --ax-t:#5B21B6;
  --ax-rim:rgba(139,92,246,.26); --ax-pill:#EDE9FE;
  --ax-bar:linear-gradient(90deg,#5B21B6,#8B5CF6);
  --ax-sol:linear-gradient(140deg,#8B5CF6,#6D28D9);
}
.geo-page .g8-card:nth-child(5){
  --ax-g:linear-gradient(140deg,#ECFDF5,#D1FAE5); --ax-t:#065F46;
  --ax-rim:rgba(16,185,129,.26); --ax-pill:#D1FAE5;
  --ax-bar:linear-gradient(90deg,#065F46,#10B981);
  --ax-sol:linear-gradient(140deg,#059669,#047857);
}
.geo-page .g8-card:nth-child(6){
  --ax-g:linear-gradient(140deg,#F7FEE7,#ECFCCB); --ax-t:#3F6212;
  --ax-rim:rgba(101,163,13,.26); --ax-pill:#ECFCCB;
  --ax-bar:linear-gradient(90deg,#3F6212,#84CC16);
  --ax-sol:linear-gradient(140deg,#65A30D,#4D7C0F);
}

/* ---- 断点 ----
   ⚠️ 双列断点定在 1180 而不是 1024：1025~1179 区间每列只有 ~510px，
      8 张卡的文案长度不一（机制段 90~120 字），同行排序后同排两卡的内容高度差
      实测可达 87px —— 等宽 grid 会把这 87px 变成卡内一块「空洞」（ margin-top:auto 吸收的那块 ）。
      实测 1180 处双列的最大内部空白 ~70px（可接受），1181 起更安全。 */
@media(max-width:1180px){
  .geo-page .g8-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:1024px){
  .geo-page .g8-lead{padding:28px 26px 30px}
  .geo-page .g8-card{padding:24px 24px 20px}
}
@media(max-width:560px){
  .geo-page .g8-grid{gap:16px}
  .geo-page .g8-lead{border-radius:var(--radius-lg);padding:24px 20px 26px}
  .geo-page .g8-lead-t{font-size:13.5px;line-height:1.85}
  .geo-page .g8-card{padding:22px 20px 18px}
  .geo-page .g8-ic{width:42px;height:42px;border-radius:12px}
  .geo-page .g8-ic svg{width:20px;height:20px}
  .geo-page .g8-row{flex-direction:column;gap:8px}
  .geo-page .g8-k{align-self:flex-start}
}

/* ================================================================
   S. 移动端增强（2026-09-22）
   ------------------------------------------------------------
   ① 底部快捷条 .mqbar —— 提交需求 / 电话咨询 / 首页 / 返回顶部 / 在线咨询
   ② 超长列表折叠 .m-more / .m-hide
   两条都只在 ≤768px 生效，桌面端零影响：不改任何既有断点、间距与字号体系。
   DOM 由 main.js 的 S 段注入（本站是 17 页共用一份 css/js 的结构）。
================================================================ */

/* ---------------- S1. 底部快捷条 ---------------- */
.mqbar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:88;
  align-items:flex-end;justify-content:space-around;
  background:rgba(255,255,255,.97);
  border-top:1px solid var(--line);
  box-shadow:0 -8px 26px -12px rgba(11,18,32,.22);
  padding:8px 6px calc(7px + env(safe-area-inset-bottom,0px));
  -webkit-backdrop-filter:saturate(1.6) blur(12px);
  backdrop-filter:saturate(1.6) blur(12px);
}

/* 2026-09-25 二次修复（荣耀/华为自带浏览器 ArkWeb 内核）：
   该内核上 sticky/fixed + backdrop-filter 的合成层残影无法用 translateZ 规避——
   滚动时页面中部会多出一个 header 副本、fixed 快捷条整条消失。
   ≤768px 内彻底弃用 backdrop-filter、背景改纯白，从根上绕开 blur 合成路径；
   毛玻璃只在 >768px（桌面）保留。 */
@media(max-width:768px){
  .header{
    background:#fff;
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .mqbar{
    background:#fff;
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  /* 2026-09-25 三次修复：hero 背景 9s Ken Burns 持续缩放动画压着一块
     900x1200 的大合成层，荣耀/华为 ArkWeb 内核上层回收有 bug——滚动后
     旧帧残留在页面里（按钮/文案"变两个"）。移动端关闭该纯装饰动画，
     背景改为静态展示；桌面端动画保留。 */
  .hfs-slide img{animation:none !important;transform:none !important}
  /* 2026-09-25 五次修复：撤销 translateZ 强制层（该内核独立层不随滚动重绘，
     反而透出旧帧）；隐藏不可靠的指示器条（切屏已有滑动手势）与滚动进度条；
     轮换词停 CSS 循环动画，由 JS 纯文本轮换接管（零合成层）。 */
  /* 指示器数字条（dots）在该内核渲染不可靠，仍隐藏；
     保留左右箭头按钮（静态、无动画层），居中展示提示用户可切换 */
  .hfs-nav{display:block !important}
  .hfs-dots{display:none !important}
  /* 切换箭头悬浮 hero 左右两侧、垂直居中（经典轮播样式）；
     容器 pointer-events:none，仅圆形按钮可点，不挡中间内容点击 */
  .hfs-nav{position:absolute;left:0;right:0;top:calc(50% - 20px);z-index:5;margin-top:0;pointer-events:none}
  .hfs-nav-inner{padding:0 6px}
  /* dots 隐藏后 nav-inner 只剩 arrows 一个子项，让 arrows 撑满宽度两端分布 */
  .hfs-arrows{display:flex !important;flex:1 1 auto;justify-content:space-between}
  .hfs-arrow{pointer-events:auto;transition:none !important;-webkit-backdrop-filter:none;backdrop-filter:none}
  /* 图标加粗放大：40px 圆钮里 2px 细线方向不易辨认 */
  .hfs-arrow svg{width:20px;height:20px;stroke-width:2.6}
  /* ≤560 老规则把箭头 display:none，这里恢复显示 */
  .hfs-arrows{display:flex !important}
  /* .scroll-progress 恢复显示（2026-09-25 用户要求）：3px 进度条仅 width 过渡、
     无 transform/backdrop-filter 合成层，不属于 ArkWeb 残影的成因组合 */
  .rot-inner{animation:none !important}
  /* 2026-09-25 四次修复（断根）：ArkWeb 内核对过渡层回收持续出错，
     移动端把所有产生合成层的过渡/动画全部改静态呈现：
     ① hero 面板/背景切换改硬切（无淡入淡出） ② 指示器进度条动画关闭
     ③ 滚动入场动画关闭（内容直接显示） ④ hero 钉为单一合成层，避免内核自行拆层。
     桌面端（>768px）全部动效保留。 */
  .hfs-panel{transition:none !important}
  .hfs-slide{transition:none !important}
  .hfs-dot .bar i{animation:none !important}
  .reveal{opacity:1;transform:none;transition:none !important}

  /* 2026-09-25 六次修复（zxyx/jjfa/services 等带 .hero 的页面）：
     手机端滚动后 hero-badge「9 类整合服务 · 按需组合 · 全链路落地」的位置
     透出「查看全部服务」按钮残影（顶部正常、一滚动就变）。
     成因组合：aurora 三块 blur(70px)+will-change 大合成层持续 float 动画，
     叠加 hero-badge / .btn-light 的 backdrop-filter，以及 badge 圆点 /
     live 点 pulse、标题 shineGrad 无限动画——ArkWeb 滚动重绘时层错位透帧。
     ≤768px 全部改静态（与此前 hfs 系列修复同一手法），桌面端动效保留。 */
  .aurora i{animation:none !important;will-change:auto !important}
  .hero .aurora i{transform:none !important}
  .hero-badge{-webkit-backdrop-filter:none;backdrop-filter:none;
    background:linear-gradient(120deg,rgba(6,182,212,.26),rgba(129,140,248,.22))}
  .hero-badge .dot,.hero-card .tag .live::before{animation:none !important}
  .btn-light{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.14)}
  .chart i{animation:none !important}
  .hero h1 .grad{animation:none !important}
  /* .header.scrolled(rgba .95) 特异度高于上面 .header 白底，滚动后深色 hero 文字
     会以 5% 透出 header（blur 已移除无法遮盖）——补一条同特异度纯白规则 */
  .header.scrolled{background:#fff}

  /* 2026-09-26 资讯详情页（zd-hero）残影补刀：
     手机端 header 下方透出深色圆角块 + 亮蓝横条。
     ① 深色块 = .zd-hero .aurora i 的 blur(70px)：blur 滤镜本身即强制合成层
        提升，仅关 animation/will-change 不够，≤768 一并关掉
        （radial-gradient 自带渐变过渡，视觉几乎无损）；
     ② 亮蓝横条 = .scroll-progress（fixed 渐变条 + 发光 box-shadow + width
        过渡）被 ArkWeb 错位绘制到 header 下方——去发光、去过渡。 */
  .aurora i{filter:none !important}
  .scroll-progress{box-shadow:none;transition:none}
  /* 2026-09-26 三次修复（zd-hero/dd-hero 残影仍在）：不再逐属性关闭，
     移动端直接摘除 hero 的全部装饰合成层（光斑容器/网格线），hero 变
     纯色底——ArkWeb 没有可错位的层，残影无从产生。桌面端装饰保留。 */
  .zd-hero .aurora,.zd-hero .gridlines,
  .dd-hero .aurora,.dd-hero .gridlines{display:none !important}
}
.mq-item{
  flex:1 1 0;min-width:0;height:56px;margin:0;padding:0;background:none;border:0;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;
  font-family:inherit;line-height:1;text-decoration:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.mq-ic{
  width:36px;height:36px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);color:#64748B;
  box-shadow:0 2px 8px -3px rgba(11,18,32,.18);
  transition:transform .25s var(--ease),border-color .25s,color .25s;
}
.mq-ic svg{width:19px;height:19px}
.mq-t{
  font-size:11px;font-weight:600;color:var(--brand-700);
  letter-spacing:.01em;white-space:nowrap;
}
.mq-item:not(.mq-home):active .mq-ic{transform:scale(.92)}
.mq-item:hover .mq-ic{border-color:#C3D4EE;color:var(--brand-600)}
/* 中间「首页」抬高 + 品牌圆环（对齐老版观感）
   ⚠️ 必须用「绝对定位」而不是负 margin：.mqbar 是 flex + align-items:flex-end，
      给 .mq-home 写 margin-top:-20px 只会把整条撑高、圆环并不凸出去
      （实测圆环顶只比条顶高 4px，看着像没抬高）。绝对定位不参与条高计算，
      圆环实测上凸 18px。 */
.mq-item.mq-home{position:relative}
.mq-item.mq-home .mq-ic{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  width:66px;height:66px;
  border:2px solid var(--brand-500);color:#3E4C63;
  box-shadow:0 8px 18px -6px rgba(37,99,235,.42),0 0 0 5px rgba(255,255,255,.92);
}
.mq-item.mq-home .mq-ic svg{width:28px;height:28px}
.mq-item.mq-home .mq-t{font-weight:700}

/* ---------------- S2. 超长列表折叠 ---------------- */
.m-more{display:none}
/* ⚠️ 只在移动端生效：万一 768 上下切换时 .m-hide 暂时滞留，桌面端也不会被藏内容 */
@media(max-width:768px){
  .m-hide{display:none!important}
}

@media(max-width:768px){
  .mqbar{display:flex}
  /* 给底部快捷条让位，否则会盖住 footer 最后一行 */
  /* 2026-09-25 巡检：78px 余量仅 6px，实测 5 个页面滚到底时最后一个可点卡片
     骑进快捷条顶线；真机三键导航还有 env(safe-area-inset-bottom) 再抬高快捷条。
     余量提到 20px + safe-area 兜底 */
  body.mq-on{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  /* 快捷条里已有「返回顶部」，右下角那个 48px 悬浮球在移动端藏掉，避免两个按钮叠在一起 */
  body.mq-on .to-top{display:none}

  .m-more{
    display:flex;align-items:center;justify-content:center;gap:7px;
    grid-column:1/-1;flex:0 0 100%;width:100%;
    /* 容器自身已有 gap（grid 22px / flex-column 14px），这里只补一点点，
       否则「gap + margin」叠起来会出现 30~38px 的突兀空档 */
    margin:4px 0 0;padding:13px 16px;min-height:46px;
    background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);
    font-family:inherit;font-size:13.5px;font-weight:600;color:var(--brand-700);
    cursor:pointer;-webkit-tap-highlight-color:transparent;
    transition:border-color .25s,background .25s;
  }
  .m-more:hover{border-color:#C3D4EE;background:var(--brand-50)}
  .m-caret{
    width:7px;height:7px;flex:none;margin-bottom:3px;
    border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;
    transform:rotate(45deg);
    transition:transform .3s var(--ease),margin .3s var(--ease);
  }
  .m-more.is-open .m-caret{transform:rotate(-135deg);margin-bottom:-4px}
}

/* ================================================================
   T. Lighthouse 合规修正（2026-09-22）
   ---------------------------------------------------------------
   T1 标题层级：一批 h4（前一标题是 h2，构成 h2->h4 跳级）升级成 h3，
      并带上 class="x4"。这里把「原 h4 的视觉规格」原样搬给 h3.x4 ——
      选择器一律写「容器 h3.x4」，不去动原来的「容器 h4」规则：
      seoyh 的 #advantage 里 h3 是分组标题、h4 是条目，两者规格不同，
      合并成 :is(h3,h4) 会把分组标题也压成条目字号，属于改版级事故。
   T2 导航「全部服务」原本是 <a href="javascript:void(0)">，既不可抓取
      也不是真链接，改成 <button> 后补样式重置（button 默认不继承字体）。
   ================================================================ */

/* ---------- T1 ---------- */
.advantage-item h3.x4{font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:3px}
.geo-page .advantage-item h3.x4{font-size:15.5px;font-weight:700;color:var(--ink);margin-bottom:5px}
.value-card h3.x4{font-size:17px;font-weight:700;margin-bottom:6px;display:flex;align-items:baseline;gap:10px;line-height:1.45}
.commit-item h3.x4{font-size:16.5px;font-weight:700;margin-bottom:5px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.commit-item h3.x4 span{font-size:12px;font-weight:600;color:rgba(226,236,255,.45);letter-spacing:.06em}
.footer h3.x4{font-size:15px;font-weight:700;color:#fff;margin-bottom:20px;position:relative;padding-left:14px}
.footer h3.x4::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:3px;background:var(--grad)}
.dxal-page .dxal-flow-item h3.x4{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:9px}
.jjfa-page.solution-detail .overview-points h3.x4{font-size:16px;font-weight:800;color:var(--ink);margin:0 0 6px}

/* ---------- T2 ---------- */
button.nav-link{
  font-family:inherit;background:none;border:0;cursor:pointer;text-align:left;
  -webkit-appearance:none;appearance:none;
}

/* ---------- T3 ----------
   折叠按钮放进 role="list" 容器（jjfa 的 .info-list 就是）时，
   必须包一层 role="listitem"，否则 aria-required-children 挂掉。
   原来 .m-more 自己是 grid/flex 子项，现在由这层壳顶上。
   ⚠️ 壳必须跟着按钮一起只在 ≤768 显示：桌面端按钮是 display:none（不参与 flex），
      但壳是普通块级元素，照样会成为一个 flex item —— 实测给 jjfa 的 .info-list
      多吃了一条 14px 的 gap + 4px margin，桌面 docH 平白 +22px。 */
.m-more-li{display:none}
@media(max-width:768px){
  .m-more-li{display:block;flex:0 0 100%;width:100%;margin-top:4px}
}
.m-more-li>.m-more{margin-top:0;width:100%}

/* ============================================================
   U. 全站导航统一化（2026-09-23）
   ------------------------------------------------------------
   ① 「全部服务 / 套餐报价」主栏目改成真链接（services.html / price.html），
      下拉的触发器拆到独立的 .nav-caret 按钮上：
        桌面 —— hover 展开下拉，点标题跳转；
        ≤768 —— 点标题跳转，点右侧箭头展开子菜单。
      不能不拆：如果触发器还挂在 .nav-link 上，≤768 点标题只会展开而无处跳转。
   ② .dd-group —— 下拉里的分组小标题（把服务按「搜索与 AI 排名 / 网站与应用 / 整合营销」分组）
   ③ .footer-quick —— footer brand 列下方的横向快捷链接（补上被挪走的「快速导航」列的位置）
   ④ services.html / price.html 两个聚合页的栅格列数
      ⚠️ 2026-09-23 起这两个页面不再用 .grid-services，改用「V. 通栏行」组件 .flrow-*
         （见文件末尾 V 节）。原 U 节为此写的列数与断点覆盖已删除。
   ============================================================ */
.nav-caret{display:none;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;border:0;background:none;color:var(--ink-3);cursor:pointer}
.nav-caret svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.nav>li.has-drop.open>.nav-caret svg{transform:rotate(180deg)}

.dd-group{display:block;padding:10px 13px 4px;font-size:12px;font-weight:700;
  letter-spacing:.06em;color:var(--ink-4)}

.footer-quick{display:flex;flex-wrap:wrap;gap:9px 16px;margin-top:18px}
.footer-quick a{font-size:12.5px;color:rgba(226,236,255,.58);transition:color .2s}
.footer-quick a:hover{color:#fff}

/* ④ 聚合页栅格 —— ⚠️ 2026-09-23 起废弃：
      services.html / price.html 已改用「V. 通栏行」组件（.flrow-*，见文件末尾 V 节），
      不再共用全局 .grid-services；原先为此写的列数与断点覆盖已一并删除。
      ⚠️ 下面 @768 里那条 .nav-caret 是「≤768 下拉箭头」本体，必须留着。 */
@media(max-width:768px){
  .nav>li.has-drop>.nav-caret{display:flex;position:absolute;right:4px;top:9px;border-radius:9px}
}

/* 769–1200px 的中等屏：把「本页目录」收起来，只留一级导航。
   ------------------------------------------------------------
   实测（2026-09-23）：一级 6 项 + 本页目录 6 项 = 12 项，
   在 1280px 以下就开始有个别项文字折成两行（navRows=2），900/820 还会横向溢出 24~104px。
   .header-inner 是固定 height:72px，折行不会撑高而是挤在一起，视觉很脏。
   ≤768 是固定垂直面板（.nav 变 absolute 面板），不挤，所以本页目录照常显示。 */
@media(max-width:1280px) and (min-width:769px){
  .nav-local{display:none}
}

/* 导航项永不折行 + 按屏宽收紧间距（2026-09-23）
   ------------------------------------------------------------
   .header-inner 是固定 height:72px，导航项一旦被压成两行不会撑高，只会挤成一团。
   12 项（一级 6 + 本页目录 6）在 1366 以下就开始被 flex 压缩 → 折行，
   所以给 .nav-link 加 nowrap，再按断点逐级收紧 padding / 字号把宽度换出来。
   ⚠️ 只作用于 >768 的横向导航；≤768 是垂直面板，不受这些限制。 */
.nav-link{white-space:nowrap}
@media(max-width:1366px) and (min-width:769px){
  .nav-link{padding:10px 11px;font-size:14.5px}
}
@media(max-width:1280px) and (min-width:769px){
  .nav-link{padding:9px 9px;font-size:14px}
}
@media(max-width:900px) and (min-width:769px){
  .nav-link{padding:8px 7px;font-size:13.5px}
  .header-inner{gap:12px}
}

/* 本页目录条（2026-09-23）
   ------------------------------------------------------------
   全局导航（一级 6 项）与「本页目录」分离后，页内锚点独占 hero 下方一行。
   两者挤在 72px 固定的 header 里没有出路：不 nowrap 就折行，nowrap 就在 1440 横向溢出。
   分离后顶部永远只有 6 项，任何视口都不折行、不溢出；页内目录横向药丸、自动换行。 */
/* ============================================================
   local-nav：hero 下方的「本页目录」条（全站统一组件）
   ------------------------------------------------------------
   ⚠️ 2026-09-24 背景由 --bg-soft(#EEF3FA) 改为 --bg(#F6F8FC)：
      每个页面的 hero 底部都有一道波浪装饰 `.wave`，它的 SVG fill 硬编码为 #F6F8FC
      （＝内容区背景色），设计意图是「内容区从 hero 中升起」。
      但 local-nav 原来用 --bg-soft，比波浪深 8 阶 → 波浪下方立刻出现一条色阶断层，
      视觉上像 hero 里「凭空多出来一块白」（用户 2026-09-24 反馈的即此）。
      现在把它对齐到 --bg，波浪→目录条→内容区连成一整片，断层消失，
      目录条本身靠 1px border-bottom 与下方内容分隔，不再依赖底色差。
   ⚠️ 若日后调整 --bg / wave 的 fill，必须两处一起改，否则断层会重现。 */
.local-nav{background:var(--bg);border-bottom:1px solid var(--line)}
.local-nav-inner{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  max-width:var(--maxw);margin:0 auto;padding:13px 28px}
.ln-label{font-size:12.5px;font-weight:700;color:var(--ink-4);letter-spacing:.06em;
  margin-right:2px;flex-shrink:0}
.local-nav a{font-size:13.5px;font-weight:500;color:var(--ink-2);background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:9px 15px;line-height:1.2;
  transition:color .2s,border-color .2s,background .2s}
.local-nav a:hover{color:var(--brand-700);border-color:var(--brand-400);background:var(--brand-50)}
@media(max-width:768px){
  .local-nav-inner{padding:11px 20px;gap:7px}
  .local-nav a{font-size:12.5px;padding:6px 12px}
}

/* ============================================================
   V. 聚合页「通栏行」.flrow-*（2026-09-23）
   ------------------------------------------------------------
   services.html（6 项）/ price.html（4 项）的内容量不大，
   沿用全站 .grid-services 卡片栅格会变成 3~4 列窄卡、正文被压成七八行。
   改成整行铺开：图标块 | 标题 + 描述 + 标签 | 按钮，一行一项。

   ⚠️ 必须做成一个独立组件，不要去改 .service-card：
      后者是全站 17 页共用的类（私服/服务页/首页都在用），改它会波及全部页面。
   ⚠️ .flrow-* 没加页面命名空间 —— 全站只有这两个聚合页在用，已确认无同名冲突
      （0 处旧引用）。将来若要在别的页面复用「通栏行」，先全局查重名再落地。

   颜色只消费 Q 节的 --ax-* 色槽（默认品牌值在 :root），nth-child 6 位一轮、
   第 1 位留品牌做锚点，与 geo 的 .g8-card 同一套口径。
   feature 行走深色渐变 + 白字，深浅混排形成节奏。
   ============================================================ */

.flrow-list{display:grid;gap:16px}

.flrow{
  display:grid;
  grid-template-columns:80px minmax(0,1fr) auto;
  align-items:center;
  gap:0 30px;
  padding:26px 30px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  position:relative;overflow:hidden;
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s var(--ease);
}
.flrow:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--ax-rim)}

/* 左侧实心图标块：渐变实底 + 白图标（淡底 + 同色浅图标等于看不出来） */
.flrow-ic{
  width:80px;height:80px;border-radius:21px;
  display:flex;align-items:center;justify-content:center;
  background:var(--ax-sol);color:#fff;
  box-shadow:0 12px 26px -12px rgba(11,18,32,.32);
  transition:transform .35s var(--ease);
}
.flrow-ic svg{width:36px;height:36px}
.flrow:hover .flrow-ic{transform:scale(1.06) rotate(-4deg)}

.flrow-main{min-width:0}
.flrow-main h3{font-size:21px;font-weight:800;color:var(--ink);line-height:1.45}
.flrow-main p{
  font-size:14.5px;line-height:1.85;color:var(--ink-3);
  margin-top:9px;max-width:880px;
}
.flrow-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}
.flrow-tags li{
  font-size:12.5px;font-weight:600;color:var(--ax-t);
  background:var(--ax-pill);border:1px solid var(--ax-rim);
  padding:5px 12px;border-radius:999px;
}

.flrow-side{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0}
.flrow-go{
  padding:13px 24px;font-size:14.5px;border-radius:999px;
  white-space:nowrap;
}
.flrow-go svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.flrow:hover .flrow-go svg{transform:translateX(4px)}

/* ---- feature 行：深色渐变 + 白字 ---- */
.flrow.feature{
  background:linear-gradient(120deg,var(--brand-900) 0%,#16357F 55%,#0E7490 130%);
  border-color:transparent;
}
.flrow.feature:hover{border-color:rgba(34,211,238,.35)}
.flrow.feature .flrow-ic{
  background:rgba(255,255,255,.14);color:var(--cyan-soft);box-shadow:none;
}
.flrow.feature .flrow-main h3{color:#fff}
.flrow.feature .flrow-main p{color:rgba(226,236,255,.78)}
.flrow.feature .flrow-tags li{
  background:rgba(255,255,255,.1);color:rgba(226,236,255,.88);
  border-color:rgba(255,255,255,.16);
}
.flrow.feature .flrow-go{background:#fff;color:var(--brand-700);box-shadow:0 14px 28px -14px rgba(3,10,26,.6)}
.flrow.feature:hover .flrow-go{background:var(--cyan-soft)}

/* feature 行侧栏的小柱状装饰（沿用 .service-card.feature 的做法，纯装饰，aria-hidden）
   ⚠️ 高度必须自己写：全局那条挂的是 .service-card.feature .mini-chart i:nth-child(N)，
      换了祖先就命中不到，不写会全部塌成 0 高。 */
.flrow .mini-chart{display:flex;align-items:flex-end;gap:5px;height:46px;margin-bottom:16px}
.flrow .mini-chart i{width:8px;border-radius:4px;background:linear-gradient(180deg,#67E8F9,rgba(37,99,235,.4))}
.flrow .mini-chart i:nth-child(1){height:36%}
.flrow .mini-chart i:nth-child(2){height:56%}
.flrow .mini-chart i:nth-child(3){height:44%}
.flrow .mini-chart i:nth-child(4){height:72%}
.flrow .mini-chart i:nth-child(5){height:100%;background:linear-gradient(180deg,#4ADE80,rgba(6,182,212,.5))}

/* ---- 色槽赋值：第 1、7 位留品牌，其余轮转 Q 节 5 色 ---- */
.flrow:nth-child(6n+1),
.flrow:nth-child(6n+7){
  --ax-g:linear-gradient(140deg,var(--brand-50),#ECFEFF); --ax-t:var(--brand-600);
  --ax-rim:rgba(37,99,235,.15); --ax-pill:var(--brand-50);
  --ax-bar:linear-gradient(90deg,#2563EB,#06B6D4);
  --ax-sol:linear-gradient(140deg,#3B82F6,#1D4ED8);
}
.flrow:nth-child(6n+2){
  --ax-g:linear-gradient(140deg,#FFFBEB,#FEF3C7); --ax-t:#92400E;
  --ax-rim:rgba(245,158,11,.26); --ax-pill:#FEF3C7;
  --ax-bar:linear-gradient(90deg,#B45309,#F59E0B);
  --ax-sol:linear-gradient(140deg,#D97706,#B45309);
}
.flrow:nth-child(6n+3){
  --ax-g:linear-gradient(140deg,#FFF1F2,#FFE4E6); --ax-t:#9F1239;
  --ax-rim:rgba(244,63,94,.24); --ax-pill:#FFE4E6;
  --ax-bar:linear-gradient(90deg,#9F1239,#F43F5E);
  --ax-sol:linear-gradient(140deg,#E11D48,#BE123C);
}
.flrow:nth-child(6n+4){
  --ax-g:linear-gradient(140deg,#F5F3FF,#EDE9FE); --ax-t:#5B21B6;
  --ax-rim:rgba(139,92,246,.26); --ax-pill:#EDE9FE;
  --ax-bar:linear-gradient(90deg,#5B21B6,#8B5CF6);
  --ax-sol:linear-gradient(140deg,#8B5CF6,#6D28D9);
}
.flrow:nth-child(6n+5){
  --ax-g:linear-gradient(140deg,#ECFDF5,#D1FAE5); --ax-t:#065F46;
  --ax-rim:rgba(16,185,129,.26); --ax-pill:#D1FAE5;
  --ax-bar:linear-gradient(90deg,#065F46,#10B981);
  --ax-sol:linear-gradient(140deg,#059669,#047857);
}
.flrow:nth-child(6n){
  --ax-g:linear-gradient(140deg,#F7FEE7,#ECFCCB); --ax-t:#3F6212;
  --ax-rim:rgba(101,163,13,.26); --ax-pill:#ECFCCB;
  --ax-bar:linear-gradient(90deg,#3F6212,#84CC16);
  --ax-sol:linear-gradient(140deg,#65A30D,#4D7C0F);
}

/* ---- 断点：中等屏先把按钮挪到下一行，窄屏整体堆叠 ---- */
@media(max-width:1024px){
  .flrow{grid-template-columns:66px minmax(0,1fr);gap:0 22px;padding:24px 22px}
  .flrow-ic{width:66px;height:66px;border-radius:18px}
  .flrow-ic svg{width:30px;height:30px}
  .flrow-side{grid-column:1/-1;justify-content:flex-start;margin-top:18px}
}
@media(max-width:560px){
  .flrow{grid-template-columns:1fr;gap:0;padding:20px 18px}
  .flrow-ic{margin-bottom:16px}
  .flrow-main h3{font-size:18.5px}
  .flrow-main p{font-size:13.5px;margin-top:8px}
  .flrow-side{width:100%;margin-top:18px}
  .flrow-go{width:100%;justify-content:center}
}

/* ============================================================
   W. 海外独立站套餐页 wjtgtc（2026-09-23）
   ① 3 档价格卡的断点：全站共享 .price-grid-6 原本按 4/6 张卡设计，
      ≤1024 会切成 2 列且让 feature 卡 span 2 —— 3 张卡会排成「半张 / 整行 / 半张」的畸形。
      这里覆盖成：>900 保持 3 列并排（901–1024 时压缩内边距），≤900 直接单列堆叠。
      ⚠️ 必须写在文件末尾：前面的 @media(max-width:1024px) 里有同名规则，后写者胜。
   ② .cmp-* 对比表由 :is(.seotc-page,.wjtgtc-page,.geotc-page) 共享，见上文（特异性不变，seotc 零差异）。
   ③ 推荐卡徽标改成「卡内右上角胶囊」，与 seotc 同款：
      原来是贯通卡顶的整条缎带，必须靠 padding-top:50px 让位（普通卡 30px），
      推荐卡整列文字因此比两侧低 20px —— 违反「同排卡 h3 同基线」。
      改成绝对定位的胶囊后不占文档流，三张卡 padding-top 统一，h3 自然对齐。
      ⚠️ 别用 translateY 把徽标挪到卡外做缎带：卡片 overflow:hidden 会把上半截裁掉。
   ============================================================ */
.wjtgtc-page .price-card6 .pc6-flag{
  left:auto;right:18px;top:16px;
  width:auto;padding:6px 14px;
  border-radius:999px;
  box-shadow:0 8px 18px -12px rgba(239,68,68,.7);
}
.wjtgtc-page .price-card6.feature{padding-top:30px}

@media(max-width:1024px){
  .wjtgtc-page .price-grid-6{grid-template-columns:repeat(3,1fr);max-width:100%;gap:14px}
  .wjtgtc-page .price-card6.feature{grid-column:auto;padding-top:24px}
  .wjtgtc-page .price-card6{padding:24px 16px 22px}
  .wjtgtc-page .price-card6 .pc6-price strong{font-size:26px}
  .wjtgtc-page .price-card6 .pc6-list li{font-size:12.5px}
}
@media(max-width:900px){
  .wjtgtc-page .price-grid-6{grid-template-columns:1fr;max-width:520px;gap:16px}
}

/* 行标签下方的说明小字。⚠️ 必须显式写 display:block —— 它是 <span>，
   一漏写就会在移动端退化成行内文本，把吸附的左列撑成几百像素宽（表格几乎没法横滚看）。 */
:is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp .cmp-note{
  display:block;margin-top:3px;font-weight:400;font-size:12px;line-height:1.5;color:var(--ink-3);
}
/* ≤768：左列是 sticky 的，说明文字整段藏掉，只留行标签，保证横滚时右侧还有位置看档位 */
@media(max-width:768px){
  :is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp .cmp-note{display:none}
}

/* ================================================================
   X. 区块标题居中对齐修复（2026-09-23）
   ------------------------------------------------------------
   症状：`05 独立站技术架构 WordPress + 港美服务器 + SSL + CDN` 这类长标题看着「向左歪」，
        并没有居中。

   根因：.section-head 限宽 880px，而 .section-title 带 white-space:nowrap。
        标题一旦宽过 880px 就会溢出，而此时浏览器会把 text-align:center
        **降级成起始对齐** —— 实测左隙 0、右隙 −164px：整条标题从容器左边缘起排、
        向右捅出容器，于是视觉上「重心偏左」。
        19 页 × 10 档视口实测，共 7 页 35 处中招（括号里是溢出像素，越大越明显）：
          wjtgtc 独立站技术架构(263@1920) · jjfa 9 类整合营销方案(164)
          seotc 浪知潮 Google SEO vs 传统 SEO(151) · wztc 全面应用阿里云计算(127)
          170 六大核心策略(112) · wjtgtc 浪知潮独立站 vs 模板自助建站(90)
          tgtc 推广监测+防恶意点击(81) · wxkf 5 重服务保障(75) · ydddz 5 重服务保障(44)

   同源的次生问题：561–719px 窄屏带上，nowrap 的标题会**把整页撑出横向滚动条**
        （wjtgtc 最多溢出 163px；seotc / jjfa / wztc / tgtc / 170 / wxkf / ydddz
        各有 9–117px），一直到 ≤560px 的 white-space:normal 才消失。

   修法：把「宽度约束」从整块 .section-head 下移到副标题身上 ——
     ① .section-head 放开限宽 → 标题拿到容器全宽，长标题也能**一行放下且真正居中**；
     ② 副标题仍按 880px 排版（margin auto 居中），换行位置一个像素都不变
        （已用改前/改后渲染快照逐条比对）；
     ③ .section-title 的 white-space 改 normal 兜底：容器本身也放不下时改为换行，
        而不是溢出 —— 这同时消掉了窄屏带那批横向滚动条。

   ⚠️ 不要再给 .section-head 加 max-width —— 那就是本 bug 的来源。
   ⚠️ 判定「标题是否居中」不能用 Range.getBoundingClientRect()：它会把空白文本节点的
      并入矩形算进去，读数会变成「左隙恒为 0」的假象。要用 range.getClientRects()
      滤掉 width<=0.5 的矩形，再取 min(left)/max(right)。
   ================================================================ */
.section-head{max-width:none}
/* 副标题维持原来的 880px 阅读宽度 —— 这是原 .section-head 限宽的唯一用意 */
.section-head .section-sub{max-width:880px;margin-left:auto;margin-right:auto}
/* 兜底：容器也放不下时换行，避免「居中降级成左对齐 + 把页面撑宽」 */
.section-title{white-space:normal}

/* ============================================================
   Y. 海外 GEO 套餐页 geotc（2026-09-23）
   ------------------------------------------------------------
   ① 命名空间接入：.geotc-page 已并入上方 price-card6 / tech-grid /
      advantage-card / faq-* / cmp-* 的共享选择器组（组内新增一项，既有页面零影响）。
   ② 4 档价格卡的断点：共享组默认按 3 档设计成 3 列，4 张卡会排成「3 + 1」，
      这里覆盖成：≥1240 四列并排 / 641–1239 两列 / ≤640 单列。
      ⚠️ 必须写在文件末尾：共享组与 @media(max-width:1024px) 里都有同名规则，后写者胜。
   ③ 推荐徽标同 seotc / wjtgtc：改「卡内右上角胶囊」，不占文档流，
      四张卡 padding-top 因此统一、h3 同基线（顶部缎带方案会让推荐卡整列低 20px）。
      ⚠️ 别用 translateY 把徽标挪出卡外：卡片是 overflow:hidden，会把上半截裁掉。
   ④ 对比表是 5 列（项目 + A/B/C/D），比共享组的 4 列多一列，min-width 相应放大。
   ============================================================ */
.geotc-page .price-card6 .pc6-flag{
  left:auto;right:18px;top:16px;
  width:auto;padding:6px 14px;
  border-radius:999px;
  box-shadow:0 8px 18px -12px rgba(239,68,68,.7);
}
.geotc-page .price-card6.feature{padding-top:30px}

.geotc-page table.cmp{min-width:940px}

@media(min-width:1240px){
  .geotc-page .price-grid-6{grid-template-columns:repeat(4,1fr);gap:18px;max-width:1320px}
  .geotc-page .price-card6{padding:26px 20px 24px}
  .geotc-page .price-card6 h3{font-size:19px}
  .geotc-page .price-card6 .pc6-price{gap:5px}
  .geotc-page .price-card6 .pc6-price .sym{font-size:15px}
  .geotc-page .price-card6 .pc6-price strong{font-size:29px}
  .geotc-page .price-card6 .pc6-price em{font-size:12px}
  .geotc-page .price-card6 .pc6-sub{font-size:12.5px}
  .geotc-page .price-card6 .pc6-list{gap:7px;padding-top:12px}
  .geotc-page .price-card6 .pc6-list li{font-size:12.5px;padding-left:20px;line-height:1.55}
  .geotc-page .price-card6 .pc6-list li::before{top:5px;width:13px;height:13px}
  .geotc-page .price-card6 .pc6-renew{font-size:12px}
  .geotc-page .price-card6 .pc6-cta{font-size:13px;padding:10px 14px}
  .geotc-page .price-card6.feature{padding-top:26px}
}
@media(min-width:641px) and (max-width:1239px){
  .geotc-page .price-grid-6{grid-template-columns:repeat(2,1fr);gap:18px;max-width:760px}
  .geotc-page .price-card6.feature{grid-column:auto}
}
@media(max-width:1024px){
  /* 共享组在 ≤1024 让 feature 卡 span 2 —— 4 张卡会排成「半张 / 整行 / 半张 / 半张」，这里取消 */
  .geotc-page .price-card6.feature{grid-column:auto}
  .geotc-page table.cmp{min-width:880px}
}
@media(max-width:768px){
  .geotc-page table.cmp{min-width:780px}
}
/* ============================================================
   Z. geotc 对比表「核心交付量」数值可读性（2026-09-23）
   ------------------------------------------------------------
   问题：`table.cmp .cmp-money` 原本只服务表头下方的「服务费用」深色行（白字白底反色），
   geotc 在 tbody 里复用了同一个类来放 ≥50 / ≥120 / ≥300 / ≥500 与文章篇数，
   于是这些数字变成「白字 + 白底（B 列是 #EDF4FF 浅蓝底）」—— 肉眼完全看不见。
   解决：按行区分。深色费用行（thead）保持原样白字；tbody 里的数值改深色。
   同时给推荐列 B 用品牌蓝，四档数值里「当前列」一眼可辨。
   ⚠️ 特异性：本规则 (0,3,2) > 原 `.cmp-money` (0,3,1) 与 ≤768 媒体查询里的
      `table.cmp .cmp-money{font-size:19px}` (0,3,1)，所以移动端字号也由这里统一。
   ⚠️ 只加 tbody 作用域，seotc / wjtgtc 的 tbody 不含 .cmp-money，两页渲染零影响。 */
:is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp tbody .cmp-money{
  font-family:var(--font-display);
  font-size:19px;font-weight:900;letter-spacing:-.01em;
  color:var(--brand-900);
}
:is(.seotc-page,.wjtgtc-page,.geotc-page) table.cmp tbody td.cmp-hi .cmp-money{
  color:var(--brand-600);
}
/* ============================================================
   AA. 全站对比度体检的其余修复（2026-09-23）
   ------------------------------------------------------------
   用 CDP 遍历 20 页全部文本节点、逐条算 WCAG 对比度（渐变底单独跳过）后的结论：
   唯一的「同源不可见」是 geotc 对比表数值，已在 Z 节修掉；
   另有一处真实低对比：dxal-detail 侧栏「项目状态 · 已上线运行」。
   .dd-live 的薄荷绿 #6EE7B7 是给深色 hero 卡（.dd-hero-card dd）配的，
   同一份 markup 又出现在白色 .dd-card 的 .dd-meta 列表里 —— 白底上只有 1.52:1，
   等于看不见。这里按容器区分：清单里的状态改深绿 #047857（白底 5.5:1）。
   非缺陷（不改）：170.html 面包屑的「›」是装饰性分隔符（2.18:1），
   以及 index 的 .ind-card 白字 —— 它的深色底来自 ::before 伪元素，探针看不到，实际对比度正常。 */
.dxal-detail-page .dd-meta .dd-live{color:#047857}
.dxal-detail-page .dd-meta .dd-live::before{
  background:#10B981;box-shadow:0 0 0 3px rgba(16,185,129,.16);
}

/* ============================================================
   AB. 404 引导页 404.html（2026-09-23）
   ------------------------------------------------------------
   把「死路」改成分流页：顶部回填用户真实访问的地址，中部给站内实时搜索 +
   17 个常用页面的分组入口，底部说明三种常见原因。
   只新增 .nf-* 类，全部挂在 .nf-page 命名空间下，不碰任何既有规则；
   深色 hero 直接复用全站 .hero —— 背景 / 极光 .aurora / 网格线 .gridlines
   都是 .hero 的后代选择器，404 页只要带上 class="hero" 就自动生效。
   ⚠️ .hero h1 全站统一 white-space:nowrap，404 的 h1 是长句 + 渐变短句，
      窄屏必须允许换行，否则会撑出横向滚动条（X 节的居中修复是同一类问题）。
   ============================================================ */
.nf-page .hero{padding:78px 0 88px}
.nf-page .hero h1{white-space:normal}
.nf-hero-grid{
  position:relative;z-index:3;display:grid;align-items:center;
  grid-template-columns:auto minmax(0,660px);
  justify-content:center;gap:clamp(26px,5vw,72px);
}
.nf-code{display:flex;flex-direction:column;gap:6px}
.nf-code-num{
  font-family:var(--font-display);font-size:clamp(84px,12vw,182px);font-weight:800;
  line-height:.86;letter-spacing:-.04em;
  background:linear-gradient(160deg,#67E8F9,#93C5FD 55%,#A5B4FC);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.nf-code-sub{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:rgba(226,236,255,.55)}
.nf-hero-text{max-width:660px}
.nf-hero-text .lead{max-width:660px;margin-bottom:30px}
.nf-path{
  display:inline-block;max-width:100%;padding:1px 10px;border-radius:8px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  color:#BFD7FE;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.92em;overflow-wrap:anywhere;
}

/* 站内搜索 */
.nf-search{
  display:flex;align-items:center;gap:12px;max-width:620px;margin:0 auto 14px;
  padding:7px 8px 7px 20px;background:#fff;border:1px solid var(--line);
  border-radius:999px;box-shadow:var(--shadow-md);
}
.nf-search:focus-within{border-color:var(--brand-400);box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.nf-search svg{width:20px;height:20px;color:var(--ink-4);flex-shrink:0}
.nf-search input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  font:16px/1.5 var(--font-sans);color:var(--ink);padding:10px 0;
}
.nf-search input::-webkit-search-cancel-button{display:none}
.nf-clear{
  flex-shrink:0;border:0;cursor:pointer;padding:9px 16px;border-radius:999px;
  background:var(--bg-soft);color:var(--ink-3);font:600 13px/1 var(--font-sans);
}
.nf-clear:hover{background:var(--brand-50);color:var(--brand-600)}
.nf-count{text-align:center;font-size:14px;color:var(--ink-4);margin-bottom:32px}

/* 全站入口索引 */
.nf-index{display:grid;gap:30px}
.nf-group.is-empty{display:none}
.nf-group-t{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
  font-size:15px;font-weight:800;color:var(--ink-2);
}
.nf-group-t::before{content:"";width:3px;height:15px;border-radius:3px;background:var(--grad)}
.nf-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.nf-links a{
  display:flex;flex-direction:column;gap:7px;padding:18px 20px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.nf-links a.is-hide{display:none}
.nf-links a:hover{border-color:var(--brand-300);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.nf-links strong{
  display:flex;align-items:center;gap:8px;
  font-size:16px;font-weight:700;color:var(--ink);
}
.nf-links strong::after{
  content:"";width:6px;height:6px;margin-left:2px;flex-shrink:0;
  border-top:1.6px solid var(--brand-400);border-right:1.6px solid var(--brand-400);
  transform:rotate(45deg);opacity:.8;transition:transform .25s var(--ease);
}
.nf-links a:hover strong::after{transform:rotate(45deg) translate(2px,-2px)}
.nf-links span{font-size:13.5px;color:var(--ink-4);line-height:1.65}
.nf-empty{text-align:center;font-size:15px;color:var(--ink-3);padding:24px 0 0}
.nf-empty a{color:var(--brand-600);font-weight:600;text-decoration:underline}

/* 常见原因 */
.nf-why{background:var(--bg)}
.nf-reasons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.nf-reason{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 24px}
.nf-reason-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:14px;margin-bottom:16px;
  background:var(--grad-soft);color:var(--brand-600);
}
.nf-reason-ic svg{width:22px;height:22px}
.nf-reason h3{font-size:17px;font-weight:800;color:var(--ink);margin-bottom:9px}
.nf-reason p{font-size:14px;color:var(--ink-4);line-height:1.75}

@media (max-width:1024px){
  .nf-links{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nf-reasons{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .nf-hero-grid{grid-template-columns:1fr;gap:0}
  .nf-code{flex-direction:row;align-items:baseline;gap:14px;margin-bottom:4px}
  .nf-code-num{font-size:clamp(64px,15vw,110px)}
}
@media (max-width:640px){
  .nf-page .hero{padding:62px 0 68px}
  .nf-links{grid-template-columns:1fr}
  .nf-reasons{grid-template-columns:1fr}
  .nf-search{padding:6px 6px 6px 16px;gap:8px}
  .nf-index{gap:26px}
}

/* ===================================================================
   AC 节（2026-09-23）：CMS 列表分页
   改版静态页没有分页组件，style.css 里也就没有 .pagination 规则；
   迅睿 {module page=1} 输出的是 <ul class="pagination">，必须补样式，
   否则分页是一串裸链接。作用域限定在列表页命名空间，别污染全站。
   ⚠️ 每新增一个「会输出分页的列表页」都要把它的 body 命名空间登记进 :is(...)：
   漏登记 = 该页分页裸奔（无边框/无居中/竖排）。全站已登记的：dxal / zxzx / jjfa。
   =================================================================== */
:is(.dxal-page,.zxzx-page,.jjfa-page) .dxal-pages{margin-top:30px;display:flex;justify-content:center}
:is(.dxal-page,.zxzx-page,.jjfa-page) .dxal-pages .pagination{display:flex;flex-wrap:wrap;gap:8px;align-items:center;list-style:none;padding:0;margin:0}
:is(.dxal-page,.zxzx-page,.jjfa-page) .dxal-pages .pagination li{list-style:none;margin:0}
:is(.dxal-page,.zxzx-page,.jjfa-page) .dxal-pages .pagination li a{
  display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 13px;
  border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink-2);
  font-size:14px;line-height:1;text-decoration:none;transition:border-color .2s,color .2s,background .2s}
:is(.dxal-page,.zxzx-page,.jjfa-page) .dxal-pages .pagination li a:hover{border-color:var(--brand-500);color:var(--brand-600)}
:is(.dxal-page,.zxzx-page,.jjfa-page) .dxal-pages .pagination li.active a{background:var(--brand-600);border-color:var(--brand-600);color:#fff;font-weight:600}
/* 第一个 li 是「共 N 条」计数，弱化显示 */
:is(.dxal-page,.zxzx-page,.jjfa-page) .dxal-pages .pagination li:first-child a{background:transparent;border-color:transparent;color:var(--ink-4);padding:0 6px 0 0}
@media (max-width:768px){
  :is(.dxal-page,.zxzx-page,.jjfa-page) .dxal-pages .pagination{gap:6px}
  :is(.dxal-page,.zxzx-page,.jjfa-page) .dxal-pages .pagination li a{min-width:34px;height:34px;padding:0 10px;font-size:13px}
}

/* ===================================================================
   AC 节（2026-09-23）：首页资讯中心 8 条对齐
   —— .news-grid 默认 3 列（4 列只在 ≥1600px），6 条刚好 3+3，改成 8 条
   会留 3+3+2 的残行。这里只给首页用的 .news-grid-8 加专属断点，不动
   .news-grid 本身，避免影响 zxzx / dxal 等列表页的列数。
   ≥1240 → 4 列（4+4 齐）；769–1239 → 2 列（2×4 齐）；≤768 沿用 1 列
   =================================================================== */
@media (min-width:1240px){.news-grid-8{grid-template-columns:repeat(4,1fr)}}
@media (min-width:769px) and (max-width:1239px){.news-grid-8{grid-template-columns:repeat(2,1fr)}}
/* 8 条里标题/摘要长短不一，光对齐列数还会出现「卡底参差」。
   标题钉死 2 行、摘要钉死 3 行（超出裁掉），配合 .news-more{margin-top:auto}
   让 8 张卡同一高度、底部同一条线。只作用于首页的 .news-grid-8，
   不影响 zxzx 列表页。 */
.news-grid-8 .news-card h3{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  min-height:3em;              /* 16.5px × 1.5 行高 × 2 行：1 行标题的卡也不塌 */
}
.news-grid-8 .news-card p{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  min-height:4.95em;           /* 13px × 1.65 行高 × 3 行 */
}

/* ==========================================================================
   资讯列表（CMS 化后）：筛选 pill 从 JS 按钮改成真实栏目链接
   ⚠️ 模板只取 <main> 内容，页内 <script>（负责加 .can-r/.is-scroll）不会跟着过来，
      所以右渐隐和「左右滑动」提示要改成 CSS 默认态，不能依赖 JS 切类。
   ========================================================================== */
.zxzx-page .zx-pills{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 52px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 52px),transparent);
}
.zxzx-page .zx-count-row{flex:0 0 auto;white-space:nowrap}
.zxzx-page .zx-count-row .zx-swipe{font-size:11.5px;color:var(--ink-4)}

/* ==========================================================================
   内容详情页通用正文排版（案例内页 / 方案内页共用 .v2-rich）
   CMS 正文是 UEditor 富文本（可能出现旧站塞进来的 table / 行内 style），
   这里统一兜底：图片自适应、表格可横滚，避免撑破容器造成横向溢出。
   ========================================================================== */
:is(.dxal-detail-page,.jjfa-page) .v2-rich{
  max-width:960px;margin:26px auto 0;font-size:16.5px;line-height:1.95;
  color:var(--ink-2);word-break:break-word;
}
:is(.dxal-detail-page,.jjfa-page) .v2-rich p{margin:0 0 18px}
:is(.dxal-detail-page,.jjfa-page) .v2-rich img{
  max-width:100%;height:auto;border-radius:14px;display:block;margin:0 auto 18px;
}
:is(.dxal-detail-page,.jjfa-page) .v2-rich h2{font-size:23px;margin:38px 0 16px;color:var(--ink)}
:is(.dxal-detail-page,.jjfa-page) .v2-rich h3{font-size:19px;margin:30px 0 14px;color:var(--ink)}
:is(.dxal-detail-page,.jjfa-page) .v2-rich ul,
:is(.dxal-detail-page,.jjfa-page) .v2-rich ol{margin:0 0 18px;padding-left:22px}
:is(.dxal-detail-page,.jjfa-page) .v2-rich li{margin-bottom:8px}
:is(.dxal-detail-page,.jjfa-page) .v2-rich a{color:var(--brand-600);text-decoration:underline}
:is(.dxal-detail-page,.jjfa-page) .v2-rich table{display:block;max-width:100%;overflow-x:auto}
:is(.dxal-detail-page,.jjfa-page) .v2-rich td,
:is(.dxal-detail-page,.jjfa-page) .v2-rich th{padding:8px 12px;border:1px solid var(--line)}

/* ==========================================================================
   内容页「本页目录」锚点偏移
   原来只有 .zd-body h2/h3 带 scroll-margin-top，栏目级锚点（#zdBody/#more/
   #shots/#related/#detail）跳转时会被 72px 固定导航盖住标题。这里统一兜底。
   ========================================================================== */
:is(.zxzx-detail-page,.dxal-detail-page,.jjfa-page) :is(#zdBody,#more,#shots,#related,#detail){
  scroll-margin-top:calc(var(--zd-top,72px) + 24px);
}

/* ---------- 资讯内页正文：表格 / 列表美化（2026-09-23） ----------
   ⚠️ 正文表格是 CMS 富文本出来的裸 <table>（没有 class、没有内联样式）：
      原来 td padding=0、表头无底色无边框、1440 下缩在 1020 正文列的一角，
      375 下 4 列被压成一团。.zd-tw 由 show_news.html 的 PHP 服务端套壳，
      CSS 只负责外观 —— 别改成纯 CSS 横滚（Chrome 不支持 display:table 的 overflow-x）。
   ⚠️ 正文 ul 被全局 reset 成 list-style:none（连圆点都没有），这里补回自定义标记。 */
.zxzx-detail-page .zd-body .zd-tw{
  margin:0 0 26px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--white);box-shadow:var(--shadow-sm);
}
.zxzx-detail-page .zd-body table{width:100%;min-width:460px;border-collapse:collapse;font-size:15px}
.zxzx-detail-page .zd-body th,
.zxzx-detail-page .zd-body td{
  padding:13px 16px;text-align:left;vertical-align:top;line-height:1.75;
  border-bottom:1px solid var(--line);
}
.zxzx-detail-page .zd-body thead th{
  font-weight:700;color:var(--brand-700);white-space:nowrap;
  background:linear-gradient(180deg,#F9FBFF 0%,var(--bg-soft) 100%);
  border-bottom:1px solid rgba(37,99,235,.18);
}
.zxzx-detail-page .zd-body thead th:not(:last-child),
.zxzx-detail-page .zd-body tbody td:not(:last-child){border-right:1px solid var(--line)}
.zxzx-detail-page .zd-body tbody tr:nth-child(even){background:#FBFCFE}
.zxzx-detail-page .zd-body tbody tr:hover{background:var(--brand-50)}
.zxzx-detail-page .zd-body tbody tr:last-child td{border-bottom:0}
/* 首列通常是「对比项」这类短标签，加粗当表头用。
   ⚠️ 别加 white-space:nowrap：遇到长首列的表格会被撑出横向滚动 */
.zxzx-detail-page .zd-body tbody td:first-child{color:var(--ink);font-weight:600}

/* ---------- 列表 ---------- */
.zxzx-detail-page .zd-body ul,
.zxzx-detail-page .zd-body ol{margin:0 0 24px;padding-left:0;list-style:none}
.zxzx-detail-page .zd-body li{position:relative;margin:0 0 12px;padding-left:28px;line-height:1.85}
.zxzx-detail-page .zd-body li:last-child{margin-bottom:0}
.zxzx-detail-page .zd-body ul>li::before{
  content:"";position:absolute;left:9px;top:.72em;width:7px;height:7px;border-radius:50%;
  background:var(--brand-500);box-shadow:0 0 0 3px var(--brand-50);
}
.zxzx-detail-page .zd-body ol{counter-reset:zdol}
.zxzx-detail-page .zd-body ol>li{counter-increment:zdol}
.zxzx-detail-page .zd-body ol>li::before{
  content:counter(zdol);
  position:absolute;left:0;top:.28em;width:20px;height:20px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:800;line-height:1;color:#fff;background:var(--brand-600);
  font-variant-numeric:tabular-nums;
}
.zxzx-detail-page .zd-body li>ul,
.zxzx-detail-page .zd-body li>ol{margin:10px 0 0}
.zxzx-detail-page .zd-body li>ul>li::before{background:var(--white);box-shadow:0 0 0 1.5px var(--brand-400)}

@media(max-width:768px){
  .zxzx-detail-page .zd-body .zd-tw{margin:0 0 20px;border-radius:var(--radius-sm)}
  .zxzx-detail-page .zd-body th,
  .zxzx-detail-page .zd-body td{padding:10px 12px;font-size:14px}
  .zxzx-detail-page .zd-body li{padding-left:24px}
}

/* 宽表滑动提示：只在真的滚得动时显示（JS 打 .is-scrollable），默认不占位 */
.zxzx-detail-page .zd-body .zd-swipe{
  display:none;margin:-16px 0 24px;font-size:12.5px;font-weight:600;
  color:var(--ink-4);letter-spacing:.02em;
}
.zxzx-detail-page .zd-body .zd-tw.is-scrollable+.zd-swipe{display:block}
@media(max-width:768px){
  .zxzx-detail-page .zd-body .zd-swipe{margin:-12px 0 20px}
}

/* 正文 h3：原来只有字号比正文大 3px，没有任何标识 —— 和 h2 的「渐变竖条」不成体系，
   扫读时分不清层级。改成「细下划线 + 左端渐变短横」：
   h2 = 左侧渐变竖条（大节），h3 = 左端渐变短横 + 细线（小节），一级一眼可辨。
   ⚠️ font-family / scroll-margin-top 走上面 h2,h3 的共用规则，这里只覆盖外观，别重复声明。 */
.zxzx-detail-page .zd-body h3{
  position:relative;margin:36px 0 16px;padding-bottom:12px;
  border-bottom:1px solid var(--line);
}
.zxzx-detail-page .zd-body h3::before{
  content:"";position:absolute;left:0;bottom:-1px;
  width:40px;height:3px;border-radius:3px;background:var(--grad);
}
@media(max-width:768px){
  .zxzx-detail-page .zd-body h3{margin:28px 0 14px;padding-bottom:10px}
  .zxzx-detail-page .zd-body h3::before{width:32px}
}

/* ---------- 正文图片：水平居中 + 圆角卡片化（2026-09-23） ----------
   ⚠️ 富文本里的图一律是 <p><img></p>，img 没有 class。
      全局只有 `img{max-width:100%;display:block}` —— 没有 margin:auto，
      所以「比正文列窄的图」会贴左边；display:block + margin:auto 才是真居中。
   ⚠️ 图片外面那层 <p> 有 22px 下边距，和 img 的 26px 会叠出上窄下宽的不对称，
      用 :has() 把它抹掉（不支持 :has() 的老内核只是间距略大，不影响可用）。 */
.zxzx-detail-page .zd-body img,
:is(.dxal-detail-page,.jjfa-page) .v2-rich img{
  display:block;margin:26px auto;max-width:100%;height:auto;
  border-radius:14px;background:var(--white);
  box-shadow:0 0 0 1px rgba(15,23,42,.06),
             0 14px 34px rgba(15,23,42,.10),
             0 3px 8px rgba(15,23,42,.05);
}
.zxzx-detail-page .zd-body p:has(>img:only-child),
:is(.dxal-detail-page,.jjfa-page) .v2-rich p:has(>img:only-child){margin:0}
@media(max-width:768px){
  .zxzx-detail-page .zd-body img,
  :is(.dxal-detail-page,.jjfa-page) .v2-rich img{margin:20px auto;border-radius:12px}
}

/* ---------- 资讯内页 hero 标题：PC 端通栏（2026-09-23） ----------
   原来 .zd-hero-inner 被限死 920px：40px 的标题一行只放得下约 23 个全角字，
   25 字的标题（如「南京GEO源头厂家，源头直供价格优，品质保障更放心」）就被挤成两行，
   还常常掉出「孤字」（第二行只剩 1 个字）—— 用户截图指的就是这里。
   PC 端放开宽度 = 跟正文列同宽（1440→1384 / 1600+→1504），一行能放 34+ 字。
   ⚠️ 必须包在 min-width:1025px 里：≤768 那条 h1{font-size:23px} 是媒体查询里的裸命名空间规则，
      写在文件末尾的同名规则会压过它（特异性相同、位置在后），移动端字号会被改掉。
   ⚠️ 极端长标题仍会换行，用 text-wrap:balance 让两行尽量均衡，不再出现孤字。 */
@media(min-width:1025px){
  .zxzx-detail-page .zd-hero-inner{max-width:none}
  .zxzx-detail-page .zd-hero h1{max-width:none;text-wrap:balance}
}

/* ---------- 资讯列表页筛选条：PC 端横滚可用性优化（2026-09-24） ----------
   用户反馈「PC 端不好滑动」。根因：13 个栏目 pill 单行约 1490px，列表列只有 745~905px，
   必须横滚；而 PC 端鼠标没有横向滚动、滚动条又被 ::-webkit-scrollbar{display:none} 藏了
   → 实际只能按住 shift 滚轮或拖拽，基本等于「滑不动」。
   做法（配合 main.js 的 .zx-nav 交互）：
     ① 两端箭头按钮：位置固定、可点、键盘可达，到端自动置灰
     ② PC 端给一条 5px 细滚动条：既提示「还能滚」，也告诉用户「滚到哪了」
     ③ 提示文案由 JS 按端改写（PC：滚轮或点箭头；移动端：左右滑动）
   ⚠️ 仍然保持单行横滚，不折行 —— 折行会让吸顶条变成 100~161px 高，白占屏幕。 */

/* 箭头占位会吃掉宽度，把 bar 的间距从 18px 收到 10px 补回来 */
.zxzx-page .zx-bar{gap:10px}

.zxzx-page .zx-nav{
  flex:0 0 auto;width:32px;height:32px;padding:0;border-radius:50%;
  align-items:center;justify-content:center;
  border:1px solid var(--line);background:#fff;color:var(--ink-2);cursor:pointer;
  transition:background .22s var(--ease),border-color .22s var(--ease),
             color .22s var(--ease),transform .22s var(--ease),opacity .22s var(--ease);
}
.zxzx-page .zx-nav svg{width:15px;height:15px}
.zxzx-page .zx-nav:hover:not(:disabled){border-color:#C3D4EE;background:#F4F8FF;color:var(--brand-600);transform:translateY(-1px)}
.zxzx-page .zx-nav:active:not(:disabled){transform:translateY(0)}
.zxzx-page .zx-nav:disabled{opacity:.3;cursor:default}
.zxzx-page .zx-nav:focus-visible{outline:2px solid var(--brand-600);outline-offset:2px}
.zxzx-page .zx-nav[hidden]{display:none!important}

/* 横滚容器可聚焦 → 键盘方向键也能滚（WCAG 2.1.1） */
.zxzx-page .zx-pills:focus-visible{outline:2px solid var(--brand-600);outline-offset:4px;border-radius:999px}

/* 有 JS 时遮罩交给 .can-l/.can-r；无 JS 才用上面那条「无条件右渐隐」兜底 */
.zxzx-page .zx-pills.zx-js:not(.can-l):not(.can-r){
  -webkit-mask-image:none;mask-image:none;
}

@media(min-width:1025px){
  .zxzx-page .zx-nav{display:inline-flex}
  /* ⚠️ PC 端不显示滚动条。
     2026-09-24 曾放出一条 5px 细滚动条，用户反馈「太难看了」已撤。
     可滚动性改由这四样提示：两端箭头、滚轮→横向映射、边缘渐隐、计数区文案。
     下面两条用同特异性写在文件末尾，兜住基础规则里那条 display:none。 */
  .zxzx-page .zx-pills{scrollbar-width:none;padding-bottom:6px}
  .zxzx-page .zx-pills::-webkit-scrollbar{display:none;height:0;width:0}
}
/* 移动端手指滑动更自然，箭头一律不出现（内联 display 也压不过 !important） */
@media(max-width:1024px){
  .zxzx-page .zx-nav{display:none!important}
  .zxzx-page .zx-pills{scrollbar-width:none}
  .zxzx-page .zx-pills::-webkit-scrollbar{display:none}
}

/* ---------- 搜索结果页：无缩略图占位 + 空态（2026-09-24） ----------
   ⚠️ 搜索标签返回的老内容里有 thumb 为空的条目，dr_thumb('') 会输出空 src
      → <img src=""> 会再请求一次当前页；给个占位块兜住，视觉上与有图的卡片一致。
   空态：未输入关键词 / 关键词无结果，两种都走 .zx-empty。 */

.zxzx-page .zx-thumb-ph{
  display:flex;align-items:center;justify-content:center;
  width:100%;aspect-ratio:4 / 3;color:#9DB6D8;
  background:linear-gradient(135deg,#EEF3FB 0%,#E3EBF7 100%);
}
.zxzx-page .zx-thumb-ph svg{width:52px;height:52px;opacity:.72}

.zxzx-page .zx-empty{
  border:1px dashed #D3E0F2;border-radius:20px;background:#fff;
  padding:56px 40px;text-align:center;
}
.zxzx-page .zx-empty-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:72px;height:72px;border-radius:50%;
  background:linear-gradient(135deg,#EEF4FF 0%,#E6F6FA 100%);
  color:var(--brand-600);margin-bottom:20px;
}
.zxzx-page .zx-empty-ic svg{width:32px;height:32px}
.zxzx-page .zx-empty h3{font-size:20px;font-weight:700;color:var(--ink);margin:0 0 12px}
.zxzx-page .zx-empty p{font-size:14px;line-height:1.8;color:var(--ink-3);max-width:560px;margin:0 auto 22px}
.zxzx-page .zx-empty-kw{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:28px}
.zxzx-page .zx-empty-kw a{
  display:inline-flex;align-items:center;height:34px;padding:0 15px;border-radius:999px;
  border:1px solid var(--line);background:#F7FAFF;color:var(--ink-2);
  font-size:13px;font-weight:600;text-decoration:none;
  transition:border-color .22s var(--ease),color .22s var(--ease),background .22s var(--ease);
}
.zxzx-page .zx-empty-kw a:hover{border-color:#C3D4EE;background:#fff;color:var(--brand-600)}
@media(max-width:768px){
  .zxzx-page .zx-empty{padding:40px 20px;border-radius:16px}
  .zxzx-page .zx-empty h3{font-size:17px}
  .zxzx-page .zx-empty-ic{width:60px;height:60px;margin-bottom:16px}
  .zxzx-page .zx-empty-ic svg{width:26px;height:26px}
}

/* --- 发展历程：16 个节点在 PC 端等分收缩，避免轨道溢出需要横滚（移动端仍横滚） --- */
@media(min-width:1025px){
  .gywm-page .gy-tl-track{min-width:100%}
  .gywm-page .gy-tl-item{flex:1 1 0;width:auto;min-width:0}
}

/* ===== 通用空态（列表无内容时）：非命名空间，全站可复用 ===== */
.v2-empty{margin:26px auto 0;max-width:720px;text-align:center;padding:46px 30px;border:1.5px dashed rgba(29,78,216,.28);border-radius:20px;background:linear-gradient(180deg,#fff,#f7f9ff)}
.v2-empty-ic{display:inline-flex;align-items:center;justify-content:center;width:66px;height:66px;border-radius:50%;background:rgba(29,78,216,.09);color:#1d4ed8;margin-bottom:16px}
.v2-empty-ic svg{width:28px;height:28px}
.v2-empty h3{font-size:21px;margin:0 0 10px;color:#0f172a}
.v2-empty p{margin:0 auto 22px;max-width:520px;color:#5b6478;line-height:1.8;font-size:15px}
.v2-empty-acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media(max-width:768px){.v2-empty{padding:32px 18px;border-radius:16px}.v2-empty h3{font-size:18px}.v2-empty p{font-size:14px}}

/* ===== 表单页 v2（/demand/ /seo-audit/）：非命名空间，通用 ===== */
.v2-form-wrap{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
.v2-form-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 28px;box-shadow:0 14px 34px rgba(15,23,42,.06)}
.v2-field{margin-bottom:18px}
.v2-field label{display:block;font-size:14px;font-weight:600;color:#0f172a;margin-bottom:8px}
.v2-field input,.v2-field textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:15px;color:#0f172a;background:#fff;transition:border-color .2s,box-shadow .2s;font-family:inherit}
.v2-field textarea{resize:vertical;min-height:110px;line-height:1.7}
.v2-field input:focus,.v2-field textarea:focus{outline:none;border-color:#1d4ed8;box-shadow:0 0 0 3px rgba(29,78,216,.12)}
.v2-field-code{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.v2-field-code input{flex:1 1 180px;min-width:0}
.v2-code{display:inline-flex;align-items:center;line-height:0}
.v2-code img{border-radius:10px;border:1px solid var(--line);height:38px}
.v2-form-foot{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:24px;padding-top:20px;border-top:1px dashed var(--line)}
.v2-form-note{font-size:13px;color:#6b7280;line-height:1.7;max-width:420px}
.v2-form-side{display:flex;flex-direction:column;gap:16px}
.v2-side-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 20px}
.v2-side-card h3{font-size:16px;margin:0 0 10px;color:#0f172a}
.v2-side-card p{margin:0;font-size:14px;color:#5b6478;line-height:1.8}
.v2-side-card ol{margin:0;padding-left:18px;font-size:14px;color:#5b6478;line-height:1.9}
.v2-side-cta{background:linear-gradient(160deg,#1d4ed8,#2563eb);border-color:transparent;color:#fff}
.v2-side-cta h3{color:#fff}
.v2-side-cta .btn{width:100%;justify-content:center;background:#fff;color:#1d4ed8}
.v2-side-sub{display:block;margin-top:12px;text-align:center;font-size:13.5px;color:rgba(255,255,255,.86)}
.v2-side-sub:hover{color:#fff}
@media(max-width:1024px){.v2-form-wrap{grid-template-columns:1fr}}
@media(max-width:768px){.v2-form-card{padding:22px 16px;border-radius:14px}.v2-form-foot{flex-direction:column;align-items:stretch}}



/* ================================================================
   关于我们 · 浪知潮理念（2026-09-24 v2：编号 04 + 4 张能力卡片）
   —— 整块替换原「04 设计呈现」。沿用全站 .commit 深色理念语言
      （与 /geo/ 的「浪知潮理念」同款卡片），文案由用户指定，卡片说明
      按其服务项目（建站 / GEO / SEO / 小程序 / APP / 抖音短视频）扩展。
   ⚠️ 深色块内不要用 .section-title + .accent：--grad-text 是深蓝渐变，
      压在深色底上几乎看不见。这里用专属 .gy-idea-title。
   ================================================================ */
.gywm-page .gy-idea-sec{background:var(--brand-950);color:#fff}
.gywm-page .gy-idea-sec .container{position:relative;z-index:1}
.gywm-page .gy-idea-head{margin-bottom:48px}
.gywm-page .gy-idea-head .watermark{-webkit-text-stroke:1.5px rgba(255,255,255,.12)}
.gywm-page .gy-idea-head .eyebrow{background:rgba(34,211,238,.1);border-color:rgba(34,211,238,.3);color:#67e8f9}
.gywm-page .gy-idea-title{
  font-size:clamp(28px,3.4vw,40px);font-weight:800;line-height:1.26;letter-spacing:-.02em;
  color:#fff;margin:0 0 20px}
.gywm-page .gy-idea-txt{
  font-size:clamp(15.5px,1.4vw,18px);line-height:2;color:rgba(226,236,255,.82);
  margin:0 auto;max-width:860px;text-wrap:pretty}
.gywm-page .gy-idea-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch}
.gywm-page .gy-idea-card h3.x4{color:#fff}
.gywm-page .gy-idea-card h3.x4 span{color:rgba(226,236,255,.45)}
@media (max-width:1239px){
  .gywm-page .gy-idea-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .gywm-page .gy-idea-head{margin-bottom:34px}
  .gywm-page .gy-idea-txt{line-height:1.9;text-align:left}
}
@media (max-width:640px){
  .gywm-page .gy-idea-grid{grid-template-columns:minmax(0,1fr);gap:14px}
}

/* ============================================================
   W. 导航栏升级 —— 更「大气」（2026-09-24）
   ------------------------------------------------------------
   用户反馈顶部导航「不够大气」。原状：条高 72px、菜单 15px/500 字重偏轻、
   logo 40px、白底无层次。本次做四件事：
     ① 加高 + 加松弛：≥1367px 条高 72→84px，菜单 16px/600、padding 12×19；
     ② 加层次：默认细底边、滚动后实底 + 加重阴影；
     ③ 加细节：菜单 hover/当前项＝柔底 + 底部渐变下划线；CTA 与电话之间加竖分割线；
     ④ 强化落点：电话 16.5px/800、图标 44px 方块；CTA 按钮加大。
   ⚠️ 尺寸只对 ≥1367px 加码：769–1366 的横向余量本就紧张（见 E 节断点收紧小节），
      那里保持原尺寸，否则会折行 / 横向溢出。改完必须多视口复验。
   ⛔ ② 原本还加了一条「header 顶部 3px 品牌渐变线」（.header::before），已按用户要求删除：
      页面顶部已有 .scroll-progress 滚动进度条（fixed / 3px / z-index 1000），两者位置完全重合，
      常驻渐变条会和进度条叠成一条「一直在那儿的怪条」。同理，以后别在 header 顶边再加任何装饰条。
   ============================================================ */
@media(min-width:1367px){
  :root{--hd-h:84px}
  .brand img{max-height:46px}
  .header-inner{gap:28px}
  .nav{gap:4px}
  .nav-link{gap:6px}
  /* CTA 区加大：电话更醒目、按钮更饱满、两者之间加一条竖分割线 */
  .header-cta{gap:18px;padding-left:20px}
  .header-cta::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:28px;background:var(--line)}
  .header-phone{gap:11px;font-size:16.5px;font-weight:800;letter-spacing:.01em}
  .header-phone .ph{width:44px;height:44px;border-radius:13px}
  .header-phone .ph svg{width:19px;height:19px}
  .header-phone small{font-size:11.5px;letter-spacing:.04em}
  .header .btn-primary{padding:13px 25px;font-size:15.5px;border-radius:14px;box-shadow:0 10px 24px -10px rgba(37,99,235,.55)}
  .header .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(37,99,235,.62)}
}
/* ≥1600px 的超大屏再放一档 */
@media(min-width:1600px){
  :root{--hd-h:88px}
  .brand img{max-height:48px}
  .nav-link{padding:13px 21px;font-size:16.5px}
  .header-inner{gap:32px}
}

/* ============================================================
   X. 顶栏透明化：未滚动＝透明（浮在深色 hero 上），滚动后渐变为白底（2026-09-24）
   ------------------------------------------------------------
   用户诉求：PC 端顶部导航未滚动时背景透明，滚动后渐变为白色，字体与 logo 随背景适配。

   ① 头号前提：header 是 sticky 且**参与文档流**，深色 hero 本来在它下面 ——
      直接把 header 背景设 transparent 只会露出页面底色（浅色），白字必瞎。
      所以必须先把 hero 拉到顶栏背后：margin-top:calc(var(--hd-h) * -1 - 1px)；
      再用**等量的 padding-top** 把 hero 内容推回原位 ——
      净效果：只有 hero 的背景往上延伸，版面一律不动（hero 底边也纹丝不动）。

   ② 只对「顶部确实是深色」的页面生效：main.js 探测后给 body 加 .hd-overlay。
      /city/、/demand/、/seo-audit/ 这类浅色顶的页面不加 → 保持原白底，不会白字失踪。

   ③ logo 不换图，用 filter:brightness(0) invert(1) 转成纯白剪影 ——
      与现成的 /v2/logo-white.png（实测平均亮度 255，就是纯白剪影）等效，
      好处是 filter 能跟着背景一起过渡，不会出现换图那种硬切。

   ⚠️ 全部用 var(--hd-h) 计算，改顶栏高度时自动跟随，别再写 84 / 72 硬值。
   ⚠️ ≤768 一律不参与（用户只要 PC；移动端顶栏仍是白底）。
   ⚠️ 新增「深色 hero」类时（比如以后又出一个 .xx-hero），要同步登记进本节，
      否则那类页面不会透明 —— 判据是「未滚动时顶栏还是白的」。
   ============================================================ */
@media(min-width:769px){
  /* ---- ① hero 上移到顶栏背后，并用等量 padding-top 把内容推回原位 ---- */
  body:where(.hd-overlay,:has(#main > :is(.hero,.zd-hero,.dd-hero):first-child)) :is(.hero,.zd-hero,.dd-hero){margin-top:calc(var(--hd-h) * -1 - 1px)}
  /* 常规 .hero：原 padding-top 104px（≥1600 为 120px，见下面那条） */
  body:where(.hd-overlay,:has(#main > :is(.hero,.zd-hero,.dd-hero):first-child)) .hero:not(.hero-fs){padding-top:calc(104px + var(--hd-h) + 1px)}
  /* 全屏 hero（首页 .hero-fs）：min-height 从 100vh-顶栏 改回 100vh（它现在从 0 开始），
     padding 只加到上边 —— 下边保持 clamp 原值，内容才仍落在「顶栏以下的可用区」正中 */
  body:where(.hd-overlay,:has(#main > :is(.hero,.zd-hero,.dd-hero):first-child)) .hero-fs{min-height:100vh;padding-top:calc(clamp(40px,6vh,104px) + var(--hd-h) + 1px)}
  @supports(height:100svh){ body:where(.hd-overlay,:has(#main > :is(.hero,.zd-hero,.dd-hero):first-child)) .hero-fs{min-height:100svh} }
  /* 资讯详情 .zd-hero 原 46px / 案例详情 .dd-hero 原 0 / 404 .nf-page .hero 原 78px */
  body:where(.hd-overlay,:has(#main > :is(.hero,.zd-hero,.dd-hero):first-child)).zxzx-detail-page .zd-hero{padding-top:calc(46px + var(--hd-h) + 1px)}
  body:where(.hd-overlay,:has(#main > :is(.hero,.zd-hero,.dd-hero):first-child)).dxal-detail-page .dd-hero{padding-top:calc(var(--hd-h) + 1px)}
  body:where(.hd-overlay,:has(#main > :is(.hero,.zd-hero,.dd-hero):first-child)).nf-page .hero:not(.hero-fs){padding-top:calc(78px + var(--hd-h) + 1px)}
}
@media(min-width:1600px){
  /* 大屏 .hero padding 是 120px，不能沿用 104px，否则内容会被抬高 16px */
  body:where(.hd-overlay,:has(#main > :is(.hero,.zd-hero,.dd-hero):first-child)) .hero:not(.hero-fs){padding-top:calc(120px + var(--hd-h) + 1px)}
}

/* ---- X 节 ②：顶栏本体透明 + 文字 / 图标 / logo 随背景适配 ---- */
@media(min-width:769px){
  /* 过渡：透明 ↔ 白底 的渐变（用户要的「渐变为白色」） */
  body:where(.hd-overlay,:has(#main > :is(.hero,.zd-hero,.dd-hero):first-child)) .header{
    transition:background-color .32s var(--ease),border-color .32s var(--ease),
               box-shadow .32s var(--ease),backdrop-filter .32s var(--ease);
  }
  body:where(.hd-overlay,:has(#main > :is(.hero,.zd-hero,.dd-hero):first-child)) .header .brand,
  body:where(.hd-overlay,:has(#main > :is(.hero,.zd-hero,.dd-hero):first-child)) .header .brand small,
  body:where(.hd-overlay,:has(#main > :is(.hero,.zd-hero,.dd-hero):first-child)) .header .header-phone,
  body:where(.hd-overlay,:has(#main > :is(.hero,.zd-hero,.dd-hero):first-child)) .header .header-phone small{transition:color .32s var(--ease)}
  body:where(.hd-overlay,:has(#main > :is(.hero,.zd-hero,.dd-hero):first-child)) .header .nav-link{transition:color .32s var(--ease),background-color .32s var(--ease)}
  body:where(.hd-overlay,:has(#main > :is(.hero,.zd-hero,.dd-hero):first-child)) .header .header-phone .ph{
    transition:transform .25s,background-color .32s var(--ease),color .32s var(--ease);
  }
  body:where(.hd-overlay,:has(#main > :is(.hero,.zd-hero,.dd-hero):first-child)) .header .brand img{transition:filter .32s var(--ease)}

  /* 未滚动：顶栏完全透明，浮在深色 hero 上 */
  body:where(.hd-overlay,:has(#main > :is(.hero,.zd-hero,.dd-hero):first-child)) .header:not(.scrolled){
    background:transparent;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    border-bottom-color:transparent;box-shadow:none;
  }
  /* logo → 纯白剪影（等效 logo-white.png，但能平滑过渡） */
  body:where(.hd-overlay,:has(#main > :is(.hero,.zd-hero,.dd-hero):first-child)) .header:not(.scrolled) .brand img{filter:brightness(0) invert(1)}

  /* 菜单文字 / 当前项 / 悬停：深色底上转白，胶囊底改成半透明白 */
  body:where(.hd-overlay,:has(#main > :is(.hero,.zd-hero,.dd-hero):first-child)) .header:not(.scrolled) .nav-link{color:rgba(255,255,255,.9)}
  body:where(.hd-overlay,:has(#main > :is(.hero,.zd-hero,.dd-hero):first-child)) .header:not(.scrolled) .nav-link:hover,
  body:where(.hd-overlay,:has(#main > :is(.hero,.zd-hero,.dd-hero):first-child)) .header:not(.scrolled) .nav-link.active{color:#fff;background:rgba(255,255,255,.14)}
  /* 底部渐变下划线在深色底上换成亮色，否则蓝→青的渐变压在深蓝上几乎看不见 */
  body:where(.hd-overlay,:has(#main > :is(.hero,.zd-hero,.dd-hero):first-child)) .header:not(.scrolled) .nav-link::after{background:linear-gradient(90deg,#93C5FD,#67E8F9)}

  /* 品牌字 / 电话：转白 */
  body:where(.hd-overlay,:has(#main > :is(.hero,.zd-hero,.dd-hero):first-child)) .header:not(.scrolled) .brand,
  body:where(.hd-overlay,:has(#main > :is(.hero,.zd-hero,.dd-hero):first-child)) .header:not(.scrolled) .header-phone{color:#fff}
  body:where(.hd-overlay,:has(#main > :is(.hero,.zd-hero,.dd-hero):first-child)) .header:not(.scrolled) .brand small,
  body:where(.hd-overlay,:has(#main > :is(.hero,.zd-hero,.dd-hero):first-child)) .header:not(.scrolled) .header-phone small{color:rgba(255,255,255,.72)}
  body:where(.hd-overlay,:has(#main > :is(.hero,.zd-hero,.dd-hero):first-child)) .header:not(.scrolled) .header-phone .ph{background:rgba(255,255,255,.16);color:#fff}
  /* CTA 与电话之间的竖分割线（只在 ≥1367 存在） */
  body:where(.hd-overlay,:has(#main > :is(.hero,.zd-hero,.dd-hero):first-child)) .header:not(.scrolled) .header-cta::before{background:rgba(255,255,255,.24)}
}

/* ---- X-③：首页全屏 hero 的背景图不再跟着顶栏带一起放大（2026-09-24）----
   起因：把 hero 撑到 100vh、背景铺到屏幕最上边之后，cover 只能按「高」铺满 ——
   1440×900 下图片由 1459×815（scale .760）被拉到 1613×900（scale .840），
   放大 10.5%、左右各多裁 86px 屏，右侧玻璃主体明显变大贴边，与原设计构图对不上。
   做法：让背景图**跳过顶栏那一条**（.hfs-slide top:var(--hd-h)），
   于是它的可用高度回到 100% − --hd-h，与改动前的容器**完全等尺寸**，缩放与裁切 1:1 复原；
   空出来的顶栏带用与图片顶部同色的深色填充，看上去就是 hero 背景的自然延伸。
   实测源图顶部 101px（＝屏顶 85px）本就是极暗深蓝：hero1 #0D1120 / hero2 #131827 /
   hero3 #141421 / hero4 #0D121E（亮度 13–20，横向波动 <6）；叠上 .hfs-scrim 的纵向压暗后
   与填充色 #101422 的色差 ≤2 阶，肉眼无缝（见下方判据）。
   ⚠️ .hfs-slide 必须补 overflow:hidden —— hfsKen 动画从中心放大到 1.08，图片上下各溢出约
      32px，不裁就会往上盖住顶栏带的填充色，接缝立刻显形。
   ⚠️ 若日后更换 hero 底图，遇到「顶部不是大面积暗场」的新图必须重取填充色，
      判据＝顶栏带下边缘一行像素与图片首行像素的色差 ΔE < 3，否则会看到一条横线。 */
@media(min-width:769px){
  body:where(.hd-overlay,:has(#main > .hero-fs:first-child)) .hero-fs .hfs-media{background:#101422}
  /* top 用 --hd-h + 1px：顶栏还有 1px border-bottom，.hero-fs 的上移量正是 -(hd-h+1px)，
     图片起点必须与之对齐，否则图片首行会钻到顶栏最后 1px 底下，接缝处露一条细线 */
  body:where(.hd-overlay,:has(#main > .hero-fs:first-child)) .hero-fs .hfs-slide{
    top:calc(var(--hd-h) + 1px);overflow:hidden;
    /* 柔性过渡：单色填充不可能对上 4 张底图各自的顶行（实测比第 3 屏暗 32 阶、
       比第 4 屏只差 4 阶），硬接会在轮播到某屏时显出一条淡淡的横线。
       做法＝图片顶部 64px 内由透明渐到不透明，让它自己融进填充带；
       顶行本来就是极暗场（亮度 13–20），淡出后几乎看不出图像被削。 */
    -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 20px,#000 64px);
    mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 20px,#000 64px);
  }
}


/* ================================================================
   板块接缝统一修复（2026-09-25，用户指认 /price/ 与 /zxzx/ 的 CTA 接缝）
   —— 病根：多数 .section 板块**根本没设背景**（computed = rgba(0,0,0,0)），
      显示的是 body 的白色 #FFFFFF；而 .local-nav 与 .cta 显式写了
      background:var(--bg)（#F6F8FC）。两者挨在一起必然差一档（实测 dE=11.79），
      在整片浅色里就是一条肉眼可辨的色带。
   —— 判据：接缝上下各 5px，取页面左右留白区（x<60 / x>1382）的中位色比色。
      dE >= 3 才算断层，但要排除两类「刻意」：
      ① footer / .value-band / .commit 等深色块（明暗交界＝设计）；
      ② .section 白 ↔ --bg ↔ --bg-soft 的斑马纹交替（板块节奏＝设计，勿统一）。
   —— 修法：让 .local-nav / .cta 跟随本页内容区的实际底色。
   ⚠️ .local-nav 自带 border-bottom（实测 #E3E9F2），那是刻意的分隔线，保留。
   ================================================================ */
/* 内容区为白底（.section 无背景 → 露 body 白）的页面：目录条与 CTA 转白 */
.services-page .local-nav,
.price-page .local-nav,
.gywm-page .local-nav{background:#FFFFFF}
/* zxzx 目录条上方是 hero 波浪（fill #F6F8FC 实测同色），下方 .zx-band 是白
   → 用渐变把两端都接上，任一端改成纯色都会在另一头断 */
.zxzx-page .local-nav{background:linear-gradient(180deg,#F6F8FC 0%,#FFFFFF 100%)}
.services-page .cta,
.price-page .cta,
.zxzx-page .cta{background:#FFFFFF}

/* ===== 方案列表：无封面图的渐变占位块（整合营销 9 篇方案无配图） ===== */
:is(.jjfa-page,.zxyx-page) .info-item-figure .sol-ph{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  width:100%;height:100%;
  background:linear-gradient(135deg,var(--ph-a,#2563EB) 0%,var(--ph-b,#22D3EE) 100%);
  transition:transform .55s var(--ease);
}
:is(.jjfa-page,.zxyx-page) .info-item-figure .sol-ph::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 100% 0%,rgba(255,255,255,.30) 0%,rgba(255,255,255,0) 62%),
    radial-gradient(80% 62% at 0% 100%,rgba(11,27,63,.30) 0%,rgba(11,27,63,0) 72%);
}
:is(.jjfa-page,.zxyx-page) .info-item-figure:hover .sol-ph{transform:scale(1.07)}
:is(.jjfa-page,.zxyx-page) .info-item-figure .sol-ph b{
  position:relative;z-index:1;margin:0 0 8px 18px;
  font-size:46px;font-weight:900;line-height:1;color:rgba(255,255,255,.94);
  letter-spacing:.02em;text-shadow:0 8px 20px rgba(11,27,63,.30);
}
:is(.jjfa-page,.zxyx-page) .info-item-figure .sol-ph em{
  position:relative;z-index:1;margin:0 0 20px 18px;
  font-style:normal;font-size:12px;font-weight:800;letter-spacing:.16em;
  color:rgba(255,255,255,.88);text-transform:uppercase;
}

/* ===== 详情页正文增强组件（方案内页 .v2-rich） ===== */
:is(.dxal-detail-page,.jjfa-page,.zxyx-page) .v2-rich .rx-lead{
  margin:0 0 26px;padding:20px 24px;border-radius:14px;
  background:linear-gradient(180deg,#F4F8FD 0%,#EDF3FC 100%);
  border:1px solid #E1EAF7;border-left:4px solid #2563EB;
  font-size:17px;line-height:1.85;color:var(--ink-2);
}
:is(.dxal-detail-page,.jjfa-page,.zxyx-page) .v2-rich .rx-table{
  display:table;width:100%;border-collapse:collapse;margin:6px 0 26px;
  font-size:15px;background:#fff;box-shadow:0 8px 24px -18px rgba(11,27,63,.35);
}
:is(.dxal-detail-page,.jjfa-page,.zxyx-page) .v2-rich .rx-table th{
  background:#EDF3FB;color:var(--ink);font-weight:700;text-align:left;white-space:nowrap;
}
:is(.dxal-detail-page,.jjfa-page,.zxyx-page) .v2-rich .rx-table th,
:is(.dxal-detail-page,.jjfa-page,.zxyx-page) .v2-rich .rx-table td{
  padding:12px 14px;border:1px solid var(--line);
}
:is(.dxal-detail-page,.jjfa-page,.zxyx-page) .v2-rich .rx-table tr:nth-child(even) td{background:#FAFCFF}
:is(.dxal-detail-page,.jjfa-page,.zxyx-page) .v2-rich .rx-note{
  margin:28px 0 0;padding:16px 20px;border-radius:12px;
  background:#F4F8FD;border:1px dashed #CBD9EE;font-size:15px;line-height:1.8;color:var(--ink-2);
}
@media (max-width:768px){
  :is(.dxal-detail-page,.jjfa-page,.zxyx-page) .v2-rich .rx-table{display:block;overflow-x:auto}
  :is(.dxal-detail-page,.jjfa-page,.zxyx-page) .v2-rich .rx-lead{font-size:16px;padding:16px 18px}
}
/* 2026-09-25 巡检：移动端菜单是 fixed 面板，打开后背景仍可滚动——面板不动、
   底下内容滚走，关菜单后页面位置漂移。打开期间锁住文档滚动。 */
html.nav-lock,body.nav-lock{overflow:hidden}

/* ==================================================================
   2026-09-27 移动端底栏「AI客服」按钮动效（体现 AI 客服入口重要性）
   ① 按钮底改为 AI 客服同款蓝青渐变球（与 PC 悬浮球品牌统一）
   ② 白色气泡内三点「AI 正在输入」闪烁（SVG class 钩子由 main.js 注入）
   ③ 外圈呼吸脉冲光环：纯 transform+opacity 小面积合成层，不用 blur，
      规避 ArkWeb 内核残影组合成因；prefers-reduced-motion 下全部关闭
   ================================================================== */
.mq-item.mq-home .mq-ic{
  background:linear-gradient(135deg,#2563EB,#06B6D4);
  border-color:#fff;
  color:#fff;
  box-shadow:0 8px 18px -6px rgba(37,99,235,.5),0 0 0 5px rgba(255,255,255,.92);
}
.mq-item.mq-home .mq-ic svg{width:30px;height:30px}
.mqai-dot{animation:mqai-blink 1.2s infinite}
.mqai-dot:nth-of-type(2){animation-delay:.2s}
.mqai-dot:nth-of-type(3){animation-delay:.4s}
@keyframes mqai-blink{0%,60%,100%{opacity:1}30%{opacity:.15}}
.mq-item.mq-home .mq-ic::after{
  content:'';position:absolute;inset:-3px;border-radius:50%;
  border:2px solid rgba(37,99,235,.6);
  animation:mqai-pulse 2.2s ease-out infinite;
  pointer-events:none;
}
@keyframes mqai-pulse{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(1.42);opacity:0}}
@media (prefers-reduced-motion: reduce){
  .mqai-dot,.mq-item.mq-home .mq-ic::after{animation:none}
  .mq-item.mq-home .mq-ic::after{display:none}
}

/* ================================================================
   2026-09-27 客户门户登录按钮（header-cta PC + 移动端汉堡菜单项）
   门户地址 /sg/portal.php（SEO/GEO 按天计费插件客户服务中心）
================================================================ */
.header-cta .btn-login{
  padding:13px 20px;border-radius:12px;font-size:14.5px;gap:7px;
  background:#fff;color:var(--ink);border:1.5px solid var(--line);
  transition:border-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.header-cta .btn-login svg{width:16px;height:16px}
.header-cta .btn-login:hover{
  border-color:var(--brand,#2563eb);color:var(--brand,#2563eb);
  transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(37,99,235,.45);
}
.nav-login-m{display:none}
@media(max-width:768px){
  .header-cta .btn-login{display:none}
  .nav-login-m{display:block}
}