/* ============================================================
   中蕙咨询 · 全站视觉系统 v1 (zhvis-v1)
   统一插图 / 大图卡片 / 页面头图 / 徽标 的样式与动效
   仅用 transform/opacity 做动效，兼容 prefers-reduced-motion
   ============================================================ */

/* ---------- 1. 页面头图 (page hero banner) ---------- */
.zh-hero-band{position:relative;width:100%;min-height:300px;display:flex;align-items:center;
  overflow:hidden;border-radius:0 0 28px 28px;background:#0D2240}
.zh-hero-band img.zh-band-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.04);animation:zhBandZoom 18s ease-in-out infinite alternate}
.zh-hero-band::after{content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(13,34,64,.95) 0%,rgba(13,34,64,.86) 42%,rgba(13,34,64,.55) 100%)}
.zh-hero-band .zh-band-inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;
  padding:56px 28px;width:100%}
.zh-hero-band h1{color:#fff;font-size:clamp(26px,3.6vw,42px);line-height:1.22;margin:0 0 14px;
  letter-spacing:-.5px;font-weight:800}
.zh-hero-band h1 .gold{background:linear-gradient(100deg,#E8D5A0,#C9A961 55%,#E8D5A0);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.zh-hero-band p{color:rgba(255,255,255,.80);font-size:clamp(14px,1.5vw,17px);line-height:1.72;
  max-width:720px;margin:0}
.zh-hero-band .zh-band-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.zh-hero-band .zh-band-tags span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  color:#E8D5A0;background:rgba(201,160,71,.13);border:1px solid rgba(201,160,71,.36);
  border-radius:999px;padding:6px 13px;backdrop-filter:blur(6px)}
@keyframes zhBandZoom{from{transform:scale(1.02)}to{transform:scale(1.10)}}

/* ---------- 2. 通用大图卡片 (photo card) ---------- */
.zh-pcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:20px;margin:26px 0}
.zh-pcards.col2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.zh-pcard{position:relative;display:block;border-radius:18px;overflow:hidden;
  background:#0D2240;text-decoration:none;min-height:240px;
  box-shadow:0 2px 14px rgba(13,34,64,.10);
  transition:transform .34s cubic-bezier(.22,.68,.34,1),box-shadow .34s}
.zh-pcard.tall{min-height:320px}
.zh-pcard.wide{grid-column:span 2;min-height:300px}
.zh-pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .65s cubic-bezier(.22,.68,.34,1)}
.zh-pcard .zh-pc-ov{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,34,64,0) 26%,rgba(13,34,64,.62) 62%,rgba(13,34,64,.94) 100%)}
.zh-pcard .zh-pc-cap{position:absolute;left:0;right:0;bottom:0;padding:20px 20px 18px;z-index:2}
.zh-pcard .zh-pc-tag{display:inline-block;font-size:11.5px;letter-spacing:.4px;
  color:#0D2240;background:linear-gradient(100deg,#E8D5A0,#C9A961);
  border-radius:999px;padding:4px 11px;font-weight:700;margin-bottom:9px}
.zh-pcard h3{color:#fff;font-size:18.5px;margin:0 0 7px;font-weight:750;line-height:1.34}
.zh-pcard h3 .zh-pc-arrow{display:inline-block;transition:transform .3s;margin-left:4px}
.zh-pcard p{color:rgba(255,255,255,.76);font-size:13px;line-height:1.62;margin:0}
.zh-pcard:hover{transform:translateY(-5px);box-shadow:0 16px 38px rgba(13,34,64,.24)}
.zh-pcard:hover img{transform:scale(1.075)}
.zh-pcard:hover h3 .zh-pc-arrow{transform:translateX(5px)}
@media(max-width:760px){.zh-pcard.wide{grid-column:span 1}}

/* ---------- 3. 图文两栏 (media split) ---------- */
.zh-split{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;margin:34px 0}
.zh-split.rev .zh-split-media{order:2}
.zh-split-media{position:relative;border-radius:20px;overflow:hidden;min-height:280px;
  box-shadow:0 8px 30px rgba(13,34,64,.16)}
.zh-split-media img{width:100%;height:100%;min-height:280px;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.22,.68,.34,1)}
.zh-split-media:hover img{transform:scale(1.05)}
.zh-split-media .zh-sm-badge{position:absolute;left:16px;top:16px;z-index:2;
  font-size:12px;font-weight:700;color:#0D2240;background:linear-gradient(100deg,#E8D5A0,#C9A961);
  border-radius:999px;padding:5px 13px}
.zh-split-body h2{font-size:clamp(21px,2.4vw,29px);color:#0D2240;margin:0 0 14px;line-height:1.32}
.zh-split-body p{color:#4A5A70;font-size:15px;line-height:1.85;margin:0 0 13px}
.zh-split-body ul{margin:14px 0 0;padding:0;list-style:none}
.zh-split-body ul li{position:relative;padding-left:24px;margin-bottom:10px;color:#3A4A60;
  font-size:14.5px;line-height:1.7}
.zh-split-body ul li::before{content:'✓';position:absolute;left:0;top:0;color:#C9A961;font-weight:800}
@media(max-width:860px){.zh-split{grid-template-columns:1fr;gap:22px}.zh-split.rev .zh-split-media{order:0}}

/* ---------- 4. 数字/卖点横条 ---------- */
.zh-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;
  margin:30px 0;padding:26px 22px;border-radius:18px;
  background:linear-gradient(120deg,#0D2240,#16345C 70%,#0D2240)}
.zh-stats .zh-st{text-align:center}
.zh-stats .zh-st b{display:block;font-size:clamp(24px,3vw,34px);
  background:linear-gradient(100deg,#E8D5A0,#C9A961);-webkit-background-clip:text;
  background-clip:text;color:transparent;font-weight:800;line-height:1.15}
.zh-stats .zh-st span{display:block;color:rgba(255,255,255,.68);font-size:12.5px;margin-top:6px;letter-spacing:.3px}

/* ---------- 5. SVG 插画容器 ---------- */
.zh-illus{width:100%;max-width:260px;margin:0 auto;display:block}
.zh-illus path,.zh-illus circle,.zh-illus rect,.zh-illus line,.zh-illus polyline{
  transition:transform .3s}
.zh-float-slow{animation:zhFloatSlow 6s ease-in-out infinite}
.zh-float-slow.d1{animation-delay:.9s}
.zh-float-slow.d2{animation-delay:1.8s}
@keyframes zhFloatSlow{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.zh-spin-slow{animation:zhSpinSlow 22s linear infinite;transform-origin:center}
@keyframes zhSpinSlow{to{transform:rotate(360deg)}}
.zh-draw{stroke-dasharray:900;stroke-dashoffset:900;animation:zhDraw 2.6s ease forwards}
@keyframes zhDraw{to{stroke-dashoffset:0}}

/* ---------- 6. 滚动入场 ---------- */
.zh-rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.68,.34,1)}
.zh-rv.on{opacity:1;transform:none}
.zh-rv.d1{transition-delay:.08s}.zh-rv.d2{transition-delay:.16s}.zh-rv.d3{transition-delay:.24s}

/* ---------- 7. 小节标题 ---------- */
.zh-hd{text-align:center;margin:0 0 30px}
.zh-hd .zh-hd-tag{display:inline-block;font-size:12px;letter-spacing:2px;color:#A8843C;
  text-transform:uppercase;margin-bottom:11px}
.zh-hd h2{font-size:clamp(22px,2.7vw,31px);color:#0D2240;margin:0 0 11px;line-height:1.3}
.zh-hd p{color:#63748C;font-size:14.5px;margin:0;line-height:1.7}

/* ---------- 无障碍 ---------- */
@media(prefers-reduced-motion:reduce){
  .zh-hero-band img.zh-band-img,.zh-float-slow,.zh-spin-slow,.zh-draw{animation:none!important}
  .zh-rv{opacity:1!important;transform:none!important;transition:none!important}
  .zh-pcard,.zh-pcard img,.zh-split-media img{transition:none!important}
}