/* ==========================================================================
   home-pro.css — 首页视觉升级层（浅色版 v3）
   底色：纯白 #fff。技术感来源 = 极淡工程网格 + 低饱和几何色块 +
   等宽字体编号 + 描边几何，不靠深色压场。
   刻意克制：无自动弹跳 / 无彩虹渐变 / 无闪烁，
             所有运动周期 >= 22s，观感是"在呼吸"而不是"在闪"。
   只作用于 index.html，不影响 site.css / zd.css 负责的其它页面。
   ========================================================================== */

:root{
  --hp-ink:#0E1726;
  --hp-ink2:#3A4658;
  --hp-txt3:#8A93A6;
  --hp-line:#E6EAF2;
  --hp-line2:#D6DDEC;
  --hp-blue:#4E6EF2;
  --hp-cyan:#12B8A6;
  --hp-violet:#7C5CE6;
  --hp-amber:#D98A16;
  --hp-wrap:1180px;
  --hp-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 1. Hero：纯白底 + 工程网格 + 低饱和色块 + 漂移柔光 ---------- */
.zd-hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#fff;
  color:var(--hp-ink);
  padding:88px 0 52px;
}

/* 1.1 极淡工程网格：缓慢平移，像"图纸底噪" */
.zd-hero::before{
  content:"";
  position:absolute; inset:-40% -10%;
  z-index:0;
  background-image:
    linear-gradient(to right, rgba(30,64,175,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(30,64,175,.055) 1px, transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(120% 72% at 50% 26%, rgba(0,0,0,.9), transparent 78%);
  -webkit-mask-image:radial-gradient(120% 72% at 50% 26%, rgba(0,0,0,.9), transparent 78%);
  animation:hpGrid 52s linear infinite;
  /* 鼠标视差：与色块反向，幅度很小 */
  transform:translate3d(var(--gx,0px), var(--gy,0px), 0);
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}
@keyframes hpGrid{ from{background-position:0 0;} to{background-position:0 54px;} }

/* 1.2 顶部一道品牌色细条（蓝→青→紫），压住白顶 */
.zd-hero::after{
  content:""; position:absolute; left:0; right:0; top:0; height:2px; z-index:4;
  background:linear-gradient(90deg,#4E6EF2 0%, #12B8A6 46%, #7C5CE6 100%);
  opacity:.85;
}

/* 1.3 三团极低饱和柔光：白底上必须淡，否则发脏 */
.zd-hero .hp-glow{
  position:absolute; z-index:0; pointer-events:none;
  border-radius:50%; filter:blur(90px);
}
.zd-hero .hp-glow.g1{
  width:560px;height:560px;left:-160px;top:-280px;
  background:radial-gradient(circle, rgba(78,110,242,.16), transparent 70%);
  animation:hpFloat1 28s ease-in-out infinite alternate;
}
.zd-hero .hp-glow.g2{
  width:480px;height:480px;right:-140px;top:-120px;
  background:radial-gradient(circle, rgba(18,184,166,.13), transparent 70%);
  animation:hpFloat2 34s ease-in-out infinite alternate;
}
.zd-hero .hp-glow.g3{
  width:420px;height:420px;left:38%;bottom:-280px;
  background:radial-gradient(circle, rgba(124,92,230,.11), transparent 70%);
  animation:hpFloat3 40s ease-in-out infinite alternate;
}
@keyframes hpFloat1{ to{transform:translate3d(64px,40px,0) scale(1.08);} }
@keyframes hpFloat2{ to{transform:translate3d(-56px,36px,0) scale(1.06);} }
@keyframes hpFloat3{ to{transform:translate3d(40px,-32px,0) scale(1.07);} }

/* 1.4 鼠标跟随的微弱高光（JS 更新 --mx/--my） */
.zd-hero .hp-spot{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,40%),
             rgba(78,110,242,.07), transparent 66%);
  opacity:0; transition:opacity .6s ease;
}
.zd-hero:hover .hp-spot{ opacity:1; }

/* 1.5 几何色块拼贴：设计感的骨架，全部低饱和 + 描边 */
.zd-hero .hp-deco{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  /* 色块整体视差：随鼠标缓慢反向偏移，幅度 8px 以内 */
  transform:translate3d(var(--px,0px), var(--py,0px), 0);
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.zd-hero .hp-deco span{
  position:absolute; display:block;
  /* 默认可见：动画只做增强，任何情况下色块都不会消失 */
  opacity:var(--hp-o,1);
}

/* 右上：圆角色块（浅蓝→浅紫），慢浮 */
.zd-hero .hp-deco .d1{
  width:132px;height:132px;right:5%;top:12%;
  border-radius:26px;
  background:linear-gradient(135deg,#EDF2FF 0%,#F5F1FF 100%);
  border:1px solid #E2E9FB;
  box-shadow:0 18px 40px -26px rgba(78,110,242,.45);
  animation:hpFade .9s var(--hp-ease) .10s both,
            hpFloat1 30s ease-in-out 1.1s infinite alternate;
}
/* 右下：斜条块（条纹底噪） */
.zd-hero .hp-deco .d2{
  width:180px;height:64px;right:12%;bottom:16%;
  border-radius:14px;
  background:repeating-linear-gradient(115deg,
      rgba(18,184,166,.14) 0 2px, transparent 2px 11px);
  border:1px solid rgba(18,184,166,.18);
  animation:hpFade .9s var(--hp-ease) .24s both,
            hpFloat2 36s ease-in-out 1.2s infinite alternate;
}
/* 左侧：虚线圆环，极慢自转（技术图纸感） */
.zd-hero .hp-deco .d3{
  width:196px;height:196px;left:-70px;top:44%;
  border-radius:50%;
  border:1px dashed rgba(78,110,242,.30);
  animation:hpFade 1.1s var(--hp-ease) .38s both,
            hpSpin 64s linear 1.4s infinite;
}
.zd-hero .hp-deco .d3::after{
  content:""; position:absolute; inset:26px;
  border-radius:50%; border:1px solid rgba(124,92,230,.20);
}
/* 左上：点阵小方块 */
.zd-hero .hp-deco .d4{
  width:88px;height:88px;left:7%;top:9%;
  border-radius:12px;
  background-image:radial-gradient(rgba(78,110,242,.30) 1.1px, transparent 1.1px);
  background-size:11px 11px;
  --hp-o:.78;
  opacity:0;
  animation:hpFade .9s var(--hp-ease) .52s both,
            hpFloat3 44s ease-in-out 1.5s infinite alternate;
}
@keyframes hpFade{ from{opacity:0} to{opacity:var(--hp-o,1)} }
@keyframes hpSpin{ to{transform:rotate(360deg);} }

/* 1.6 世界地图底纹：白底下压到极淡，只当纹理 */
.zd-hero .hero-map{ opacity:.09 !important; filter:none !important; }
.zd-hero .hero-map img{ min-width:0 !important; width:100% !important; max-width:100% !important; }
.zd-hero > .wrap{ position:relative; z-index:3; }

/* ---------- Hero 文字层 ---------- */
.zd-hero h1{
  color:var(--hp-ink);
  font-size:clamp(26px,4vw,46px);
  line-height:1.2;
  letter-spacing:-.6px;
  font-weight:700;
  text-wrap:balance;
  max-width:100%;
}
.zd-hero h1 .brand{
  background:linear-gradient(92deg,#4E6EF2 0%, #12B8A6 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.zd-hero .sub{
  color:var(--hp-ink2); font-size:clamp(15px,1.5vw,19px);
  margin:18px 0 0; letter-spacing:.2px; font-weight:500;
}
.zd-hero .desc{
  color:var(--hp-ink2); max-width:62ch;
  margin:14px auto 28px;            /* 底部留白：与按钮组拉开 */
  line-height:1.9; font-size:15px;
  text-align:center;
}

/* 编号样式：等宽 + 品牌色，技术感的来源之一 */
.hp-num{
  font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;
  color:var(--hp-blue);
  font-weight:700;
}

/* ---------- 2. Hero 数字墙（白卡 + 细边框） ---------- */
.hp-stats-wrap{
  max-width:var(--hp-wrap); margin:0 auto;
  padding:28px 20px 26px; box-sizing:border-box;
}
.hp-stats{
  display:flex; flex-wrap:wrap; gap:0;
  margin:0; padding:0;
  border:1px solid #DCE3F2;
  border-radius:18px;
  background:linear-gradient(180deg,#FCFDFF 0%,#F6F8FC 100%);
  box-shadow:0 20px 44px -30px rgba(16,26,48,.38);
  overflow:hidden;
}
.hp-stat{
  flex:1 1 180px; min-width:0;
  padding:22px 24px;
  border-right:1px solid var(--hp-line);
  position:relative; text-align:left;
}
.hp-stat:last-child{ border-right:0; }
.hp-stat::after{  /* hover 时一道细高光扫过，不是整块变色 */
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,#4E6EF2,#12B8A6);
  transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--hp-ease);
}
.hp-stat:hover::after{ transform:scaleX(1); }
.hp-stat .v{
  font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:clamp(26px,3vw,36px); font-weight:700;
  color:var(--hp-ink); letter-spacing:-1px; line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.hp-stat .v em{ font-style:normal; color:var(--hp-blue); }
.hp-stat .k{
  margin-top:6px; font-size:12.5px; color:var(--hp-txt3);
  letter-spacing:1.2px; text-transform:uppercase;
}
.hp-stat .s{ margin-top:2px; font-size:12.5px; color:var(--hp-txt3); letter-spacing:.4px; }

/* 垂直节奏：desc → 按钮 → 标签 → 注脚，间距逐级均匀 */
.zd-hero .cta{ margin-bottom:20px; }
.zd-hero .hero-tags{ margin-bottom:2px; }
.zd-hero .hero-cap{ margin-top:22px; }
.zd-hero .hero-cap span{ color:var(--hp-txt3); }

/* 数字墙独立成块后：底部留一点呼吸 */
.hp-stats-wrap + .hp-wall,
.hp-stats-wrap + section{ margin-top:8px; }

/* Hero 标签：浅底保留，加轻微玻璃感 */
.zd-hero .hero-tags .tag{
  border:1px solid transparent !important;
  transition:transform .28s var(--hp-ease), box-shadow .28s var(--hp-ease);
}
.zd-hero .hero-tags .tag:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px -14px rgba(16,26,48,.40);
}

/* Hero 主按钮：品牌蓝渐变 + 长投影，白底上才立得住 */
.zd-hero .btn-zd.primary.lg{
  background:linear-gradient(92deg,#4E6EF2 0%, #3F63F0 100%) !important;
  border-color:transparent !important;
  color:#fff !important;
  box-shadow:0 14px 34px -14px rgba(78,110,242,.65);
}
.zd-hero .btn-zd.primary.lg:hover{
  background:linear-gradient(92deg,#3F63F0 0%, #3554DC 100%) !important;
  color:#fff !important;
}
.zd-hero .btn-zd.lg{
  border-color:var(--hp-line2) !important;
  background:#fff !important;
  color:var(--hp-ink) !important;
}
.zd-hero .btn-zd.lg:hover{
  border-color:var(--hp-blue) !important;
  color:var(--hp-blue) !important;
  box-shadow:0 12px 28px -18px rgba(78,110,242,.55);
}

/* ---------- 3. 行业分类墙（浅色版） ---------- */
.hp-wall{
  border-top:1px solid var(--hp-line);
  background:linear-gradient(180deg,#F8FAFD 0%, #FFFFFF 100%);
  padding:0 0 10px;
}
.hp-wall-in{ max-width:var(--hp-wrap); margin:0 auto; padding:0 20px; }
.hp-wall-head{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  padding-top:22px;
}
.hp-wall-head b{ color:var(--hp-ink); font-size:15px; font-weight:600; }
.hp-wall-head span{ color:var(--hp-txt3); font-size:13px; }
.hp-wall-head span i{ font-style:normal; color:var(--hp-blue); font-weight:700;
  font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace; }
.hp-wall-list{
  display:flex; flex-wrap:wrap; gap:8px;
  padding:16px 0 26px;
}
.hp-wall-list a{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:999px;
  border:1px solid var(--hp-line);
  background:#fff;
  color:var(--hp-ink2); font-size:13.5px;
  text-decoration:none;
  transition:color .25s ease, border-color .25s ease, background .25s ease,
             transform .25s var(--hp-ease), box-shadow .25s var(--hp-ease);
}
.hp-wall-list a i{
  font-style:normal;
  font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:11px; color:var(--hp-txt3);
  font-variant-numeric:tabular-nums;
}
.hp-wall-list a:hover{
  color:var(--hp-blue);
  border-color:rgba(78,110,242,.45);
  background:#F3F6FF;
  transform:translateY(-2px);
  box-shadow:0 10px 22px -16px rgba(78,110,242,.70);
}
.hp-wall-list a:hover i{ color:var(--hp-blue); }
.hp-wall-list a.on{
  color:#fff; background:linear-gradient(92deg,#4E6EF2,#12B8A6);
  border-color:transparent; font-weight:600;
}
.hp-wall-list a.on i{ color:rgba(255,255,255,.82); }

/* ---------- 3.5 精选范本图墙（参考 wei.ltd.com/fanben 的"真站大图"密度） ---------- */
.hp-shows{
  border-top:1px solid var(--hp-line);
  background:linear-gradient(180deg,#F7F9FC 0%, #FDFEFF 100%);
}
.hp-shows-in{ max-width:var(--hp-wrap); margin:0 auto; padding:44px 20px 40px; }
.hp-shows-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin-bottom:20px;
}
.hp-shows-head b{ color:var(--hp-ink); font-size:19px; font-weight:700; letter-spacing:-.3px; }
.hp-shows-head span{ color:var(--hp-txt3); font-size:13px; }
.hp-shows-head span i{ font-style:normal; color:var(--hp-blue); font-weight:700;
  font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace; }
.hp-shows-more{
  font-size:13.5px; color:var(--hp-blue); text-decoration:none; font-weight:500;
  transition:transform .25s var(--hp-ease);
}
.hp-shows-more:hover{ transform:translateX(3px); }
.hp-shows-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.hp-show{
  display:block; background:#fff; border:1px solid #E2E7F2; border-radius:14px;
  overflow:hidden; text-decoration:none;
  transition:transform .35s var(--hp-ease), box-shadow .35s var(--hp-ease), border-color .3s ease;
}
.hp-show:hover{
  transform:translateY(-5px);
  border-color:rgba(78,110,242,.45);
  box-shadow:0 22px 44px -24px rgba(16,26,48,.40);
  text-decoration:none;
}
.hp-shot{
  display:block; aspect-ratio:16/10; overflow:hidden; background:#EEF1F7;
}
.hp-shot img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  display:block;
  transition:transform .6s var(--hp-ease);
}
.hp-show:hover .hp-shot img{ transform:scale(1.045); }
.hp-show-meta{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; border-top:1px solid #EDF0F7;
}
.hp-show-meta b{
  flex:1; min-width:0; font-size:13px; font-weight:600; color:var(--hp-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hp-show-meta em{
  font-style:normal; font-size:11px; color:var(--hp-blue);
  background:#EDF1FF; border-radius:999px; padding:2px 8px; white-space:nowrap;
}
.hp-show-meta i{
  font-style:normal; font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:11px; color:var(--hp-txt3); font-variant-numeric:tabular-nums;
}

/* ---------- 4. 滚动入场（IntersectionObserver 加 .in） ---------- */
.hp-rise{
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:opacity .7s var(--hp-ease), transform .7s var(--hp-ease);
  will-change:opacity,transform;
}
.hp-rise.in{ opacity:1; transform:none; }

/* ---------- 5. 卡片：悬浮微抬 + 边框光 ---------- */
.svc-card,.way,.hp-tile{
  transition:transform .35s var(--hp-ease), box-shadow .35s var(--hp-ease), border-color .35s ease;
}
.svc-card:hover,.way:hover,.hp-tile:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 50px -26px rgba(16,26,48,.35);
  border-color:rgba(78,110,242,.28);
}

/* ---------- 6. 章节标题编号：品牌色小竖条 ---------- */
.zd-sechead h2{ position:relative; }
.zd-sechead h2::before{
  content:"";
  display:inline-block; width:3px; height:.92em;
  margin-right:12px; vertical-align:-.12em;
  border-radius:2px;
  background:linear-gradient(180deg,#4E6EF2,#12B8A6);
}

/* ---------- 7. 表单聚焦：品牌色描边 ---------- */
.lead-wrap input:focus,
.lead-wrap select:focus,
.lead-wrap textarea:focus{
  border-color:var(--hp-blue);
  box-shadow:0 0 0 3px rgba(78,110,242,.12);
}

/* ---------- 8. 降低动效偏好：尊重系统设置 ---------- */
@media (prefers-reduced-motion: reduce){
  .zd-hero::before,.zd-hero .hp-glow,.zd-hero .hp-deco span{ animation:none !important; }
  /* 关掉动画后色块必须可见，否则停在 opacity:0 */
  .zd-hero .hp-deco span{ opacity:var(--hp-o,1) !important; }
  .hp-rise{ opacity:1 !important; transform:none !important; transition:none !important; }
  .svc-card:hover,.way:hover,.hp-tile:hover{ transform:none; }
}

/* ---------- 9. 移动端收敛（含溢出兜底） ---------- */
@media (max-width:768px){
  .zd-hero{ padding:52px 0 30px; }
  .zd-hero .hp-deco .d1{ width:84px;height:84px;right:-16px;top:5%;border-radius:18px; }
  .zd-hero .hp-deco .d2{ display:none; }
  .zd-hero .hp-deco .d3{ width:130px;height:130px;left:-64px;top:auto;bottom:6%; }
  .zd-hero .hp-deco .d4{ width:60px;height:60px;left:5%;top:5%; }
  .zd-hero .hp-glow{ filter:blur(64px); transform:scale(.7); }
  .hp-stats-wrap{ padding:20px 20px 18px; }
  .hp-stats{ border-radius:14px; }
  .hp-stat{ flex:1 1 50%; border-bottom:1px solid var(--hp-line); padding:16px 14px; }
  .hp-stat:nth-child(2n){ border-right:0; }
  .hp-stat:nth-last-child(-n+1){ border-bottom:0; }
  .hp-wall-list{ gap:7px; padding-bottom:20px; }
  .hp-shows-in{ padding:32px 16px 28px; }
  .hp-shows-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .hp-show-meta{ padding:8px 10px; gap:6px; }
  .hp-show-meta em{ display:none; }

  /* 溢出兜底：窄屏所有 hero 内元素不得超出视口 */
  .zd-hero .wrap{
    width:100%; max-width:100%; box-sizing:border-box;
    padding-left:16px; padding-right:16px;
  }
  .zd-hero .cta{ flex-wrap:wrap; gap:10px; padding:0; }
  .zd-hero .cta .btn-zd{
    width:100%; max-width:100%; box-sizing:border-box;
    display:flex; align-items:center; justify-content:center;
    text-align:center;
  }
  .zd-hero .hero-tags{ flex-wrap:wrap; }
  .zd-hero h1,.zd-hero .sub,.zd-hero .desc{
    max-width:100%; overflow-wrap:break-word; word-break:break-word;
  }
  .hp-wall-in{ padding:0 20px; max-width:100%; box-sizing:border-box; }
}

@media (max-width:420px){
  .hp-stat{ flex:1 1 100%; border-right:0; }
}