/* ===========================================================================
   自贡→成都 专题页重写（frontend-design「工业实用」+ ui-ux-pro-max 动态）
   设计要点：超大字号、等宽数字、发丝边框、单一强调色（橙）、动态元素突出。
   货主视角：少字、大字、说得清、能点。删掉行业清单式填充。
   =========================================================================== */
:root{
  --zg-ink:#10211F; --zg-ink-2:#334745;
  --zg-muted:#5C716E;
  --zg-line:#E2E8E6;
  --zg-line-2:#D2DBD8;
  --zg-teal:#0F5C61;
  --zg-teal-d:#0B474B;
  --zg-accent:#D24E0C;      /* 强调：返程便宜、CTA */
  --zg-accent-d:#A83C07;
  --zg-paper:#F6F4EF;      /* 暖白底，不用纯白 */
  --zg-surface:#FFFFFF;
  --zg-rail:#0B474B;
  --zg-step:6px;
  --zg-r-lg:18px; --zg-r-md:14px; --zg-r-sm:10px;
  --zg-f-display: "Arial Black","PingFang SC","Microsoft YaHei",sans-serif;
  --zg-f-body: "PingFang SC","Microsoft YaHei",-apple-system,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
.zg-body{font-family:var(--zg-f-body);color:var(--zg-ink);background:var(--zg-paper);
  -webkit-text-size-adjust:100%;line-height:1.6;font-size:17px}

/* ---------- 顶部强化条 ---------- */
.zg-hero{background:var(--zg-rail);color:#fff;position:relative;overflow:hidden;
  padding:54px 0 60px}
.zg-hero::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 80% at 85% -10%,rgba(210,78,12,.22),transparent 60%);
  pointer-events:none}
.zg-hero-in{max-width:1240px;margin:0 auto;padding:0 22px;position:relative;z-index:1}

/* 运单抬头 */
.zg-waybill{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:13px;letter-spacing:.04em;color:#BFE3E2;margin-bottom:22px}
.zg-waybill .no{font-family:var(--zg-f-display);font-weight:700;color:#fff;
  background:rgba(255,255,255,.08);padding:3px 10px;border-radius:6px;letter-spacing:.05em}
.zg-waybill .tag{margin-left:auto;color:var(--zg-accent);font-weight:700;
  background:rgba(210,78,12,.16);padding:3px 10px;border-radius:6px}
.zg-waybill .sp{flex:1}

/* 超大标题 */
.zg-h1{font-family:var(--zg-f-display);font-weight:900;color:#fff;
  font-size:clamp(34px,7.4vw,72px);line-height:1.02;letter-spacing:-.01em;margin:0 0 18px;
  text-shadow:0 2px 0 rgba(0,0,0,.18)}
.zg-h1 em{color:var(--zg-accent);font-style:normal}
.zg-lead{font-size:clamp(16px,2.4vw,20px);color:#EAF4F3;max-width:46em;margin:0 0 30px;line-height:1.65}

/* 动态指标：超大数字 + 等宽 */
.zg-meters{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.zg-meter{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--zg-r-lg);padding:20px 18px}
.zg-meter .k{font-size:13px;color:#A9CFCD;letter-spacing:.06em}
.zg-meter .v{font-family:var(--zg-f-display);font-weight:900;color:#fff;
  font-size:clamp(30px,5vw,46px);line-height:1;margin:10px 0 4px;font-variant-numeric:tabular-nums}
.zg-meter .v small{font-size:.42em;font-weight:700;margin-left:4px;color:#CFE7E5}
.zg-meter.accent .v{color:var(--zg-accent)}
.zg-meter.accent{background:rgba(210,78,12,.16);border-color:rgba(210,78,12,.4)}
.zg-meter .n{font-size:12.5px;color:#BFE3E2}

/* ---------- 路由动画（动态元素） ---------- */
.zg-route{margin-top:34px}
.zg-route svg{width:100%;height:74px;display:block;overflow:visible}
.zg-route .rk{font-family:var(--zg-f-display);font-weight:700;font-size:13px;fill:#EAF4F3}
.zg-route .rk.k{fill:var(--zg-accent)}
.zg-route .dot{fill:#fff;stroke:var(--zg-accent);stroke-width:3}
.zg-route .road{stroke:#fff;stroke-width:3;fill:none;stroke-dasharray:260;stroke-dashoffset:260;
  animation:zgDraw 2.4s ease forwards .2s}
@keyframes zgDraw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.zg-route .road{animation:none;stroke-dashoffset:0}}

/* ---------- 区块通用 ---------- */
.zg-sec{max-width:1240px;margin:0 auto;padding:54px 22px}
.zg-sec-hd{margin-bottom:30px}
.zg-sec-hd .ey{font-family:var(--zg-f-display);font-weight:700;color:var(--zg-accent);
  letter-spacing:.08em;font-size:13px;text-transform:uppercase}
.zg-sec-hd h2{font-family:var(--zg-f-display);font-weight:900;color:var(--zg-ink);
  font-size:clamp(26px,4.6vw,40px);line-height:1.1;margin:6px 0 0;letter-spacing:-.01em}

/* 「能运啥」四大货类：大卡 */
.zg-goods{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.zg-card{background:var(--zg-surface);border:1px solid var(--zg-line);border-radius:var(--zg-r-lg);
  padding:24px;position:relative;overflow:hidden}
.zg-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--zg-teal)}
.zg-card .ic{font-family:var(--zg-f-display);font-weight:900;font-size:30px;color:var(--zg-teal);line-height:1}
.zg-card h3{font-size:21px;font-weight:800;margin:12px 0 8px;color:var(--zg-ink)}
.zg-card p{color:var(--zg-ink-2);font-size:15.5px;margin:0 0 12px;line-height:1.6}
.zg-card .how{background:var(--zg-paper);border-radius:var(--zg-r-sm);padding:10px 12px;
  font-size:14px;color:var(--zg-muted)}
.zg-card .how b{color:var(--zg-accent);font-weight:700}

/* 价格口径：大白卡 */
.zg-price{background:var(--zg-teal);color:#fff;border-radius:var(--zg-r-lg);padding:34px;
  display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center}
.zg-price .big{font-family:var(--zg-f-display);font-weight:900;font-size:clamp(40px,8vw,68px);
  line-height:1;font-variant-numeric:tabular-nums}
.zg-price .big small{font-size:.34em;display:block;font-weight:700;color:#CFE7E5;margin-top:6px;letter-spacing:.02em}
.zg-price ul{list-style:none;margin:0;padding:0}
.zg-price li{display:flex;gap:12px;padding:11px 0;border-top:1px solid rgba(255,255,255,.16);font-size:15.5px;color:#EAF4F3}
.zg-price li:first-child{border-top:0}
.zg-price li b{color:#fff;font-weight:700;min-width:74px;font-family:var(--zg-f-display)}

/* 上门范围：四区两县大字横排 */
.zg-zones{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.zg-zone{background:var(--zg-surface);border:1px solid var(--zg-line);border-radius:var(--zg-r-md);
  padding:18px;font-size:18px;font-weight:700;color:var(--zg-ink);position:relative}
.zg-zone span{display:block;font-size:13px;font-weight:500;color:var(--zg-muted);margin-top:4px}
.zg-zone::after{content:"✓";position:absolute;right:14px;top:14px;color:var(--zg-teal);font-weight:900}

/* 常见问题：大字号 */
.zg-faq{display:grid;gap:12px}
.zg-q{background:var(--zg-surface);border:1px solid var(--zg-line);border-radius:var(--zg-r-md);
  padding:0;overflow:hidden}
.zg-q summary{cursor:pointer;list-style:none;padding:20px 22px;font-size:18px;font-weight:800;color:var(--zg-ink);
  display:flex;gap:14px;align-items:flex-start}
.zg-q summary::-webkit-details-marker{display:none}
.zg-q summary .q{font-family:var(--zg-f-display);color:var(--zg-accent);font-size:22px;flex:0 0 auto}
.zg-q summary .ar{margin-left:auto;color:var(--zg-muted);transition:transform .2s;font-size:20px}
.zg-q[open] summary .ar{transform:rotate(45deg)}
.zg-q .a{padding:0 22px 20px;color:var(--zg-ink-2);font-size:15.5px;line-height:1.7}

/* 底部 CTA 大按钮 */
.zg-cta{background:var(--zg-rail);color:#fff;border-radius:var(--zg-r-lg);padding:38px 30px;
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:space-between}
.zg-cta .tx b{font-family:var(--zg-f-display);font-weight:900;font-size:clamp(22px,4vw,32px);display:block;line-height:1.15}
.zg-cta .tx span{color:#CFE7E5;font-size:15.5px}
.zg-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--zg-f-display);font-weight:800;
  font-size:19px;padding:16px 26px;border-radius:12px;text-decoration:none;white-space:nowrap}
.zg-btn.primary{background:var(--zg-accent);color:#fff;box-shadow:0 8px 22px rgba(210,78,12,.4)}
.zg-btn.primary:active{background:var(--zg-accent-d)}
.zg-btn.ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.3)}

/* ---------- 入场动画（只动 transform/opacity） ---------- */
.zg-rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.zg-rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.zg-rv{opacity:1;transform:none;transition:none}}

/* ================= V2 专属：浅底对话式 HERO（与 V1 深底数据风拉开差异） ================= */
.zg-v2hero{background:linear-gradient(180deg,#FBF7F0 0%,var(--zg-paper) 100%);
  border-bottom:1px solid var(--zg-line);padding:52px 0 46px;position:relative;overflow:hidden}
.zg-v2hero::before{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(210,78,12,.12),transparent 70%);pointer-events:none}
.zg-v2hero-in{max-width:1240px;margin:0 auto;padding:0 22px;position:relative;z-index:1}
.zg-v2kick{display:inline-flex;align-items:center;gap:8px;font-family:var(--zg-f-display);font-weight:700;
  font-size:13px;letter-spacing:.08em;color:var(--zg-accent);text-transform:uppercase;margin-bottom:16px}
.zg-v2kick::before{content:"";width:26px;height:3px;background:var(--zg-accent);border-radius:2px}
.zg-v2h1{font-family:var(--zg-f-display);font-weight:900;color:var(--zg-ink);
  font-size:clamp(30px,6.4vw,62px);line-height:1.08;letter-spacing:-.01em;margin:0 0 16px}
.zg-v2h1 em{color:var(--zg-accent);font-style:normal}
.zg-v2lead{font-size:clamp(16px,2.3vw,20px);color:var(--zg-ink-2);max-width:44em;line-height:1.7;margin:0 0 26px}
.zg-v2price{display:inline-flex;align-items:baseline;gap:14px;flex-wrap:wrap;background:#fff;
  border:1px solid var(--zg-line-2);border-radius:14px;padding:16px 22px;box-shadow:0 10px 30px rgba(11,71,75,.08)}
.zg-v2price .pl{font-size:14px;color:var(--zg-muted);font-weight:700;align-self:center}
.zg-v2price .pv{font-family:var(--zg-f-display);font-weight:900;color:var(--zg-accent);
  font-size:clamp(30px,5.4vw,46px);line-height:1;font-variant-numeric:tabular-nums}
.zg-v2price .pv small{font-size:.34em;font-weight:700;color:var(--zg-ink-2);margin-left:4px}
.zg-v2price .pt{font-size:14px;color:var(--zg-teal);font-weight:800;align-self:center;
  background:rgba(15,92,97,.1);padding:4px 12px;border-radius:999px}

@media (max-width:900px){
  .zg-v2hero{padding:38px 0 34px}
}

/* ================= 移动端 ================= */
@media (max-width:900px){
  .zg-hero{padding:40px 0 46px}
  .zg-meters{grid-template-columns:1fr 1fr;gap:10px}
  .zg-goods{grid-template-columns:1fr}
  .zg-price{grid-template-columns:1fr;padding:26px}
  .zg-zones{grid-template-columns:1fr 1fr}
  .zg-sec{padding:42px 16px}
  .zg-cta{flex-direction:column;align-items:stretch;text-align:left;gap:16px}
  .zg-btn{justify-content:center}
}
@media (max-width:430px){
  .zg-body{font-size:16px}
  .zg-zones{grid-template-columns:1fr}
  .zg-waybill{border-radius:8px}
}

/* ============ V2 专属：场景对话 / 步骤流 / 故事 / 竖向路由 ============ */
.zg-talk{max-width:1240px;margin:0 auto;padding:54px 22px}
.zg-talk .qbig{font-family:var(--zg-f-display);font-weight:900;color:var(--zg-ink);
  font-size:clamp(26px,5vw,46px);line-height:1.12;margin:0 0 18px;letter-spacing:-.01em}
.zg-talk .qbig em{color:var(--zg-accent);font-style:normal}
.zg-talk .a{font-size:clamp(16px,2.4vw,20px);color:var(--zg-ink-2);max-width:48em;line-height:1.7}

.zg-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.zg-step{background:var(--zg-surface);border:1px solid var(--zg-line);border-radius:var(--zg-r-lg);padding:24px;position:relative}
.zg-step .no{position:absolute;right:18px;top:10px;font-family:var(--zg-f-display);font-weight:900;font-size:46px;color:var(--zg-line)}
.zg-step h4{font-size:19px;font-weight:800;margin:0 0 8px;color:var(--zg-teal);display:flex;gap:8px;align-items:center}
.zg-step p{margin:0;color:var(--zg-ink-2);font-size:15px;line-height:1.6}

.zg-story{background:var(--zg-paper);border:1px solid var(--zg-line);border-left:5px solid var(--zg-accent);
  border-radius:var(--zg-r-md);padding:26px 28px;max-width:1240px;margin:14px auto 0}
.zg-story b{color:var(--zg-accent)}
.zg-story p{margin:0;font-size:16.5px;line-height:1.75;color:var(--zg-ink-2)}

.zg-rt{display:flex;gap:18px;align-items:flex-start;margin-top:26px;flex-wrap:wrap}
.zg-rt-line{width:4px;background:var(--zg-line);border-radius:4px;position:relative;align-self:stretch;min-height:120px}
.zg-rt-line::after{content:"";position:absolute;left:0;top:0;width:4px;height:0;background:var(--zg-accent);border-radius:4px;
  animation:zgFill 2s ease forwards .2s}
@keyframes zgFill{to{height:100%}}
.zg-rt-items{display:grid;gap:14px;flex:1;min-width:240px}
.zg-rt-i{display:flex;align-items:center;gap:12px}
.zg-rt-i .d{width:13px;height:13px;border-radius:50%;background:#fff;border:3px solid var(--zg-accent);flex:0 0 auto}
.zg-rt-i.k .d{background:var(--zg-accent);border-color:var(--zg-accent)}
.zg-rt-i span{font-size:16px;font-weight:700;color:var(--zg-ink)}
.zg-rt-i.k span{color:var(--zg-accent)}

@media (max-width:900px){
  .zg-steps{grid-template-columns:1fr}
  .zg-talk{padding:42px 16px}
}