/* =========================================================
   铸基机电 · 全局样式 main.css
   设计依据：design-spec.md + v2 淡色基调（用户 2026-10-24 定）
   基调：淡色为底（白/浅灰）· 墨蓝做骨架（标题/重点）· 暖橙只点睛（CTA/编号/短杠）
   四色锁版：墨蓝 / 暖橙 / 银灰 / 浅灰；不引入第五色
   管路语言：R7 圆角弯头，贯穿分隔线/列表标记/数据条
   ========================================================= */

/* ---------- 设计令牌 (Design Tokens) ---------- */
:root{
  /* 颜色 */
  --zj-navy:#12395C;
  --zj-orange:#E07B27;
  --zj-steel:#7C8794;
  --zj-mist:#EDF0F3;
  --zj-white:#FFFFFF;
  --zj-ink:#1B2A36;
  --zj-on-dark:#E8EDF1;
  --zj-line:#D8DEE3;
  --zj-steel-300:#AEB6BF;   /* 禁用/占位 */
  --zj-mist-200:#F6F8FA;    /* 卡片浅底 */

  /* 间距 8pt 体系 */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px;
  --sp-5:48px; --sp-6:64px; --sp-7:96px;

  /* 圆角 */
  --r-btn:6px;      /* 按钮 */
  --r-card:8px;     /* 卡片 */
  --r-tag:4px;      /* 标签 */
  --r-pipe:7px;     /* 管路弯头 R7 */

  /* 字体 */
  --font-cn:"Source Han Sans SC","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-en:"Inter","Helvetica Neue",Arial,sans-serif;
  --font-mono:"Roboto Mono","SFMono-Regular",Consolas,monospace; /* 数字/编号 */

  /* 字号阶梯 */
  --fs-h1:40px; --fs-hero:54px; --fs-h2:28px; --fs-h3:20px;
  --fs-body:16px; --fs-cap:13px; --fs-display:44px;

  /* 阴影（克制） */
  --shadow-card:0 2px 4px rgba(18,57,92,.08);

  /* 容器 */
  --container:1200px;
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-cn);
  font-size:var(--fs-body);
  line-height:1.7;
  color:var(--zj-ink);
  background:var(--zj-mist);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
h1,h2,h3,h4{color:var(--zj-navy);line-height:1.3;font-weight:700}
h1{font-size:var(--fs-h1);letter-spacing:-.5px}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);font-weight:600}
p{margin-bottom:var(--sp-2)}
.mono{font-family:var(--font-mono)}

/* ---------- 触屏优化（手机 / 平板） ---------- */
a,button,.btn,.nav-toggle,.intro__explore,.tag{touch-action:manipulation}
body{-webkit-tap-highlight-color:rgba(224,123,39,.16)}

/* ---------- 焦点环（无障碍，不移除默认 outline） ---------- */
a:focus-visible,button:focus-visible,.nav-toggle:focus-visible{
  outline:2px solid var(--zj-orange);
  outline-offset:2px;
  border-radius:2px;
}

/* ---------- 容器 ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--sp-3);
  padding-right:var(--sp-3);
}

/* ---------- 区块通用 ---------- */
.section{padding:var(--sp-6) 0}
.section--mist{background:var(--zj-mist)}
.section--white{background:var(--zj-white)}
.section__head{margin-bottom:var(--sp-5)}
.section__title{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.eyebrow{
  font-size:var(--fs-cap);letter-spacing:2px;text-transform:uppercase;
  color:var(--zj-steel);font-weight:600;
}
.lead{color:var(--zj-steel);max-width:60ch}

/* ---------- 管路分隔线（R7 弯头起笔） ---------- */
.pipe-divider{
  display:flex;align-items:flex-end;gap:0;
  margin:var(--sp-3) 0;
}
.pipe-divider .pipe-elbow{
  width:18px;height:18px;flex:none;
  border-left:3px solid var(--zj-orange);
  border-bottom:3px solid var(--zj-orange);
  border-bottom-left-radius:var(--r-pipe);
}
.pipe-divider .pipe-line{
  flex:1;height:1px;background:var(--zj-line);
}
/* 复用 SVG 版本（可选） */
.pipe-divider--svg{display:block;width:100%;height:24px;border:0}

/* ---------- 管路列表标记（90° 弯头 ┐ 暖橙） ---------- */
.pipe-list{display:flex;flex-direction:column;gap:var(--sp-2)}
.pipe-list li{
  display:flex;align-items:flex-start;gap:var(--sp-2);
}
.pipe-list li::before{
  content:"";flex:none;width:10px;height:10px;margin-top:7px;
  border-top:2px solid var(--zj-orange);
  border-right:2px solid var(--zj-orange);
  border-top-right-radius:6px;
}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-cn);font-size:var(--fs-body);font-weight:600;
  padding:12px 24px;border-radius:var(--r-btn);
  border:1px solid transparent;cursor:pointer;
  transition:background .12s ease,transform .12s ease,box-shadow .12s ease;
}
.btn--primary{background:var(--zj-orange);color:var(--zj-white);border-color:var(--zj-orange)}
/* hover/active 压暗基于同一橙色 token（brightness），不引入新色值 */
.btn--primary:hover{transform:translateY(-1px);filter:brightness(.92)}
.btn--primary:active{filter:brightness(.84)}
.btn--ondark{background:var(--zj-orange);color:var(--zj-white);border-color:var(--zj-orange)}
.btn--ondark:hover{transform:translateY(-1px);filter:brightness(.92)}
.btn--ghost{background:transparent;color:var(--zj-navy);border-color:var(--zj-navy)}
.btn--ghost:hover{background:rgba(18,57,92,.06)}
.btn--ghost:active{background:rgba(18,57,92,.12)}
.btn__arrow{font-family:var(--font-mono)}

/* ---------- 页眉 / 导航（浅色底吸顶） ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--zj-white);
  border-bottom:1px solid var(--zj-line);
}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;
  height:72px;gap:var(--sp-3);
}
.brand-logo{display:flex;align-items:center}
.brand-logo img{height:40px;width:auto;object-fit:contain}
.nav{display:flex;align-items:center;gap:var(--sp-3)}
.nav a{
  position:relative;color:var(--zj-ink);font-weight:600;font-size:15px;
  padding:8px 2px;transition:color .12s ease;
}
.nav a::after{ /* 管路短杠（暖橙） */
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;
  background:var(--zj-orange);border-radius:var(--r-pipe);
  transform:scaleX(0);transform-origin:left;transition:transform .12s ease;
}
.nav a:hover{color:var(--zj-navy)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--zj-navy)}

/* 汉堡按钮（移动端） */
.nav-toggle{
  display:none;background:none;border:1px solid var(--zj-line);
  border-radius:var(--r-btn);padding:8px;cursor:pointer;
}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--zj-navy);margin:4px 0}
.nav-toggle span:first-child{margin-top:0}
.nav-toggle span:last-child{margin-bottom:0}

/* ---------- 页脚（淡色基调 / 墨蓝字） ---------- */
.site-footer{background:var(--zj-mist);color:var(--zj-ink);border-top:1px solid var(--zj-line)}
.site-footer__grid{
  display:grid;grid-template-columns:1fr;gap:var(--sp-4);
  padding:var(--sp-6) 0 var(--sp-4);
}
.site-footer .footer-logo{display:flex;align-items:center;gap:var(--sp-3)}
.site-footer .footer-logo img{height:44px;width:auto;object-fit:contain;margin-bottom:0}
.site-footer .footer-logo p{margin:0;max-width:60ch}
.site-footer h4{color:var(--zj-navy);font-size:15px;margin-bottom:var(--sp-2);letter-spacing:.5px}
.site-footer p,.site-footer li{color:var(--zj-ink);font-size:14px;line-height:1.9}
.site-footer a:hover{color:var(--zj-orange)}
.footer-contact{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);
  border-top:1px solid var(--zj-line);padding-top:var(--sp-3);
}
.footer-contact li{display:flex;flex-direction:column;gap:2px}
.footer-contact .label{color:var(--zj-steel);flex:none;min-width:0;font-size:13px}
.footer-bottom{
  border-top:1px solid var(--zj-line);
  padding:var(--sp-2) 0;font-size:var(--fs-cap);color:var(--zj-steel);
  padding-bottom:max(var(--sp-2),env(safe-area-inset-bottom)); /* iPhone 底部安全区 */
}
.footer-bottom .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* ---------- Hero（淡色基调 / 墨蓝标题） ---------- */
.hero{background:var(--zj-white);color:var(--zj-ink);position:relative;overflow:hidden;border-bottom:1px solid var(--zj-line)}
.hero__inner{
  display:grid;grid-template-columns:1.1fr .9fr;gap:var(--sp-5);
  align-items:center;padding-top:var(--sp-7);padding-bottom:var(--sp-7);
}
.hero h1{color:var(--zj-navy);font-size:var(--fs-h1);margin-bottom:var(--sp-2)}
.hero h1 span{display:inline-block}   /* 让标题按语义分块换行，避免「看得/懂的」被拆开 */

/* 1024–1199：双栏下文案列只有约 460px，40px 标题会把「气，」挤到第三行 */
@media (min-width:1024px) and (max-width:1199px){
  :root{--fs-hero:46px}
}
.hero .hero__sub{color:var(--zj-steel);font-size:18px;line-height:1.7;max-width:46ch;margin-bottom:var(--sp-4)}
.hero .hero__cta{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.hero__art{align-self:stretch;display:flex;align-items:center;justify-content:center}
.hero__art svg{max-width:100%;height:auto}

/* ---------- 首屏：左文右按钮（两个按钮上下排列、等宽右对齐，底端与副文对齐） ---------- */
.hero--statement{padding-top:74px;padding-bottom:66px}
.hero__eyebrow{
  display:block;margin:0 0 24px;
  font-size:16px;letter-spacing:1.2px;color:#2C4A66;font-weight:600;
}
.hero__statement{
  display:grid;grid-template-columns:1fr auto;column-gap:72px;align-items:end;
}
.hero--statement h1{
  grid-column:1;grid-row:1;font-size:var(--fs-hero);line-height:1.18;
  letter-spacing:-.5px;margin:0 0 22px;
}
.hero--statement .hero__sub{
  grid-column:1;grid-row:2;font-size:17px;line-height:1.7;color:#5A6875;
  max-width:600px;margin:0;text-wrap:pretty;
}
/* 按钮各自贴住左边对应的正文：主按钮对齐标题首行（下移 10px），次按钮对齐副文那一段 */
.hero--statement .hero__cta{display:contents}
.hero--statement .hero__cta .btn--ondark{
  grid-column:2;grid-row:1;justify-self:end;align-self:start;
  margin-top:10px;width:236px;
}
.hero--statement .hero__cta .btn--ghost{
  /* 底边抬到副文上沿：与主按钮之间的空档从 115px 收到约 86px */
  grid-column:2;grid-row:2;justify-self:end;align-self:end;
  position:relative;top:-29px;width:236px;
}

/* ---------- 全年能耗：全幅数据板块 ---------- */
.energy{padding:76px 0 84px;border-bottom:1px solid var(--zj-line)}
.energy__head{margin-bottom:34px}
.energy__head .lead{max-width:none}   /* 721 字宽，1440 下整句一行 */

.energy-steps{
  display:flex;list-style:none;margin:0 0 20px;padding:0;
  border-top:1px solid var(--zj-line);
}
.energy-steps li{
  flex:1;position:relative;display:flex;align-items:baseline;gap:8px;
  padding:13px 14px 0 0;font-size:13px;color:#9AA6B2;
}
.energy-steps li::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:transparent;
  transition:background .25s ease;
}
.energy-steps li b{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.5px;color:#BCC7D0}
.energy-steps li.is-done{color:var(--zj-navy)}
.energy-steps li.is-done b{color:#8A98A6}
.energy-steps li.is-done::before{background:#CBD6DE}
.energy-steps li.is-on{color:var(--zj-orange);font-weight:600}
.energy-steps li.is-on b{color:var(--zj-orange)}
.energy-steps li.is-on::before{background:var(--zj-orange)}

.energy-chart{margin:0}
.energy-chart__grid{
  display:grid;grid-template-columns:196px 1fr;column-gap:30px;
  grid-template-rows:100fr 100fr 100fr 90fr;height:360px;
}
.energy-row{grid-column:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 7px;padding-top:7px}
.energy-row__name{
  flex:0 0 100%;position:relative;padding-left:13px;
  font-size:13px;color:var(--zj-steel);line-height:1.4;
}
.energy-row__name::before{
  content:"";position:absolute;left:0;top:5px;width:6px;height:6px;border-radius:50%;
}
.energy-row__val{
  font-family:var(--font-mono);font-size:24px;line-height:1.15;letter-spacing:-.6px;
  font-variant-numeric:tabular-nums;color:var(--zj-navy);
}
.energy-row__unit{font-size:11px;color:#8E9BA8}
.energy-row--e .energy-row__name::before{background:#12395C}
.energy-row--g .energy-row__name::before{background:#E07B27}
.energy-row--g .energy-row__val{color:#BC5F16}
.energy-row--w .energy-row__name::before{background:#34808F}
.energy-row--w .energy-row__val{color:#2E6B78}
.energy-row--dev .energy-row__name::before{background:#C05E12}
.energy-row--dev .energy-row__val{color:#7C8794;font-size:20px}
.energy-row--dev .energy-row__val.is-over{color:#C05E12}

.energy-chart__svg{
  grid-column:2;grid-row:1 / 5;
  display:block;width:100%;height:100%;overflow:visible;
}
.he-s{fill:none;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.he-s--e{stroke:#12395C}
.he-s--g{stroke:#E07B27}
.he-s--w{stroke:#34808F}
.he-ghost .he-s{stroke-opacity:.13;stroke-width:1.6}
.he-series .he-s{stroke-opacity:1}
.he-base{stroke:#E4E9ED;stroke-width:1;vector-effect:non-scaling-stroke}
.he-band rect{fill:#E9F0F4;stroke:#D9E3E9;stroke-width:1;vector-effect:non-scaling-stroke}
.he-band line{stroke:#D3DDE4;stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.he-dev__area{fill:#E07B27;fill-opacity:.20}
.he-s--dev{stroke:#C05E12;stroke-width:1.9}
.he-ghost .he-s--dev{stroke-opacity:.12;stroke-width:1.3}
.he-cursor{stroke:#B9C6D0;stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.he-dot{fill:var(--zj-white);stroke-width:2.2;vector-effect:non-scaling-stroke}
.he-dot--e{stroke:#12395C}
.he-dot--g{stroke:#E07B27}
.he-dot--w{stroke:#34808F}
.he-mt{stroke:#DDE4E9;stroke-width:1;vector-effect:non-scaling-stroke}
.he-mt--opt{stroke:#E9EEF2}

.energy-chart__months{
  display:grid;grid-template-columns:repeat(12,1fr);margin-left:226px;
  margin-top:4px;font-size:12px;color:var(--zj-steel);text-align:center;
}
.energy-chart__foot{display:flex;align-items:baseline;gap:18px;margin-top:9px}
.energy-chart__say{
  flex:1;margin:0;font-size:13px;line-height:1.5;color:#54626F;
  transition:opacity .18s ease;
}
.energy-chart__date{
  font-family:var(--font-mono);font-size:13px;color:var(--zj-navy);
  font-variant-numeric:tabular-nums;letter-spacing:.3px;
}

/* ---------- 卡片 ---------- */
.card{
  background:var(--zj-white);border:1px solid var(--zj-line);
  border-radius:var(--r-card);padding:var(--sp-3);
  transition:border-color .12s ease,box-shadow .12s ease;
}
.card:hover{border-color:var(--zj-navy);box-shadow:var(--shadow-card)}
/* 业务卡：顶部 3px 暖橙短杠（管路弯头意象） */
.card--biz{border-top:3px solid var(--zj-orange)}
.card__num{font-family:var(--font-mono);font-size:14px;color:var(--zj-orange);font-weight:700}
.card h3{margin:6px 0 10px}
.card p{color:var(--zj-steel);font-size:15px;margin-bottom:var(--sp-2)}
.card .card__meta{font-size:var(--fs-cap);color:var(--zj-steel);border-top:1px solid var(--zj-line);padding-top:var(--sp-2);margin-top:auto}

/* 网格 */
.grid{display:grid;gap:var(--sp-3)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}

/* ---------- 信任数据条（淡色 / 墨蓝大数字） ---------- */
.statbar{background:var(--zj-mist);color:var(--zj-ink);border-top:1px solid var(--zj-line);border-bottom:1px solid var(--zj-line)}
.statbar__inner{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);
  padding:var(--sp-5) 0;text-align:center;
}
.stat{display:flex;flex-direction:column;gap:4px;position:relative}
.stat__num{font-family:var(--font-mono);font-size:var(--fs-display);font-weight:700;color:var(--zj-navy);line-height:1}
.stat__label{color:var(--zj-steel);font-size:15px}

/* ---------- 行业标签 ---------- */
.tags{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.tag{
  background:var(--zj-mist-200);color:var(--zj-navy);
  border-radius:var(--r-tag);padding:6px 14px;font-size:14px;font-weight:600;
}

/* ---------- 底部 CTA（淡色 / 暖橙主按钮点睛） ---------- */
.cta{background:var(--zj-white);color:var(--zj-ink);border-top:1px solid var(--zj-line)}
.cta__inner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-5) 0;flex-wrap:wrap;
}
.cta h2{color:var(--zj-navy);margin-bottom:6px}
.cta p{color:var(--zj-steel);margin:0}

/* ---------- 联系展示块（淡色白卡，替代表单） ---------- */
.contact-block{background:var(--zj-white);border-top:1px solid var(--zj-line)}
.contact-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);
  padding:var(--sp-5) 0;
}
.contact-card{
  background:var(--zj-mist-200);
  border:1px solid var(--zj-line);
  border-radius:var(--r-card);padding:var(--sp-3);
  display:flex;flex-direction:column;gap:var(--sp-2);
}
.contact-card .ic{width:32px;height:32px;color:var(--zj-orange)}
.contact-card .label{font-size:var(--fs-cap);letter-spacing:1px;color:var(--zj-steel);text-transform:uppercase}
.contact-card .value{font-size:18px;color:var(--zj-navy);font-weight:600;word-break:break-all}
.placeholder-note{color:var(--zj-orange);font-size:13px;font-weight:600}

/* ---------- 案例 / 新闻占位卡 ---------- */
.placeholder-card{
  background:var(--zj-white);border:1px solid var(--zj-line);
  border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column;
}
.placeholder-card .thumb{
  aspect-ratio:16/9;background:var(--zj-mist);
  display:flex;align-items:center;justify-content:center;
  color:var(--zj-steel);font-size:14px;border-bottom:1px solid var(--zj-line);
  overflow:hidden;
}
.placeholder-card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.placeholder-card .body{padding:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-2);flex:1}
.placeholder-card .flag{
  display:inline-block;font-size:12px;font-weight:700;color:var(--zj-orange);
  background:rgba(224,123,39,.1);border-radius:var(--r-tag);padding:4px 10px;align-self:flex-start;
}
.placeholder-card h3{margin-top:4px}
.placeholder-card p{color:var(--zj-steel);font-size:14px;margin:0}

/* ---------- 通用占位提示条 ---------- */
.notice{
  background:var(--zj-mist-200);border:1px dashed var(--zj-line);
  border-radius:var(--r-card);padding:var(--sp-3);color:var(--zj-steel);
  font-size:14px;margin-bottom:var(--sp-4);
}
.notice strong{color:var(--zj-orange)}

/* ---------- 关于页两栏 / 工商卡 ---------- */
.two-col{display:grid;grid-template-columns:1.3fr .7fr;gap:var(--sp-5);align-items:start}
.biz-card{
  background:var(--zj-white);border:1px solid var(--zj-line);
  border-radius:var(--r-card);padding:var(--sp-3);
}
.biz-card dl{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-2) var(--sp-3)}
.biz-card dt{color:var(--zj-steel);font-size:14px;white-space:nowrap}
.biz-card dd{color:var(--zj-ink);font-weight:600;font-family:var(--font-mono);font-size:15px}

/* 资质三栏 */
.feature{display:flex;flex-direction:column;gap:var(--sp-2)}
.feature .feature__ic{width:36px;height:36px;color:var(--zj-orange)}
.feature h3{margin-top:4px}
.feature p{color:var(--zj-steel);font-size:15px;margin:0}

/* 业务板块列表（编号+标题+简述+暖橙短杠） */
.biz-section{
  background:var(--zj-white);border:1px solid var(--zj-line);
  border-radius:var(--r-card);padding:var(--sp-3);margin-bottom:var(--sp-3);
  border-left:3px solid var(--zj-orange);
}
.biz-section__head{display:flex;align-items:baseline;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.biz-section__num{font-family:var(--font-mono);color:var(--zj-orange);font-weight:700;font-size:18px}
.biz-section h3{margin:0}
.biz-section p{color:var(--zj-steel);margin-bottom:var(--sp-2)}
.biz-section .applies{font-size:var(--fs-cap);color:var(--zj-steel)}
.biz-section .applies b{color:var(--zj-navy)}

/* 亮点小节（洁净车间系统集成） */
.highlight{
  background:var(--zj-mist-200);border:1px solid var(--zj-line);
  border-radius:var(--r-card);padding:var(--sp-4);margin-top:var(--sp-4);
}
.highlight h2{margin-bottom:var(--sp-2)}

/* 关于页团队照片卡 */
.card--biz img{width:100%;height:auto;display:block;border-radius:var(--r-tag)}

/* 地图占位 */
.map-placeholder{
  aspect-ratio:16/7;background:var(--zj-mist);border:1px dashed var(--zj-line);
  border-radius:var(--r-card);display:flex;align-items:center;justify-content:center;
  color:var(--zj-steel);margin-top:var(--sp-4);
  text-align:center;padding:var(--sp-4);
}
.map-note{display:flex;flex-direction:column;gap:6px;align-items:center}
.map-note strong{color:var(--zj-navy);font-size:18px;letter-spacing:2px}
.map-note p{margin:0;color:var(--zj-steel);font-size:15px}

/* =========================================================
   响应式分档：
   ≥1024 桌面 ｜ 900–1023 平板横屏 / 小笔电 ｜ 640–899 平板竖屏（导航收汉堡）
   ＜640 手机 ｜ 横屏矮屏适配见 intro.css
   ========================================================= */

/* ---------- 平板（≤1023）：单列 Hero、双列网格、字号回落 ---------- */
@media (max-width:1023px){
  :root{ --fs-h1:34px; --fs-hero:34px; --fs-h2:26px; --fs-display:38px }
  .section{padding:var(--sp-5) 0}
  .section__head{margin-bottom:var(--sp-4)}
  .hero__inner{grid-template-columns:1fr;gap:var(--sp-4);padding-top:var(--sp-6);padding-bottom:var(--sp-6)}
  .hero__art{order:-1;max-width:400px;margin:0 auto}
  .he-m text{font-size:13px}
  .he-p__name{font-size:15px}
  .he-p__unit{font-size:12px}
  .energy-chart__grid{height:320px}
  .hero .hero__sub{font-size:17px;max-width:52ch}
  /* 首屏：≤1023 收成单列，按钮横排回到文字下方 */
  .hero--statement{padding-top:52px;padding-bottom:48px}
  .hero__statement{grid-template-columns:1fr;row-gap:26px}
  .hero--statement h1{grid-column:1;grid-row:1;margin-bottom:0;max-width:640px}
  .hero--statement .hero__sub{grid-column:1;grid-row:2;font-size:16px;max-width:none}
  .hero--statement .hero__cta{
    display:flex;grid-column:1;grid-row:3;justify-self:start;
    flex-direction:row;flex-wrap:wrap;gap:var(--sp-2);
  }
  .hero--statement .hero__cta .btn{
    grid-column:auto;grid-row:auto;margin-top:0;width:auto;
    position:static;top:auto;   /* 横排时清掉桌面端为对齐副文加的上移 */
  }
  .two-col{grid-template-columns:1fr;gap:var(--sp-4)}
  .two-col .card--biz{max-width:640px}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:repeat(2,1fr)}
  .statbar__inner{gap:var(--sp-3);padding:var(--sp-4) 0}
  .stat__num{font-size:36px}
}

/* ---------- 平板竖屏 / 横屏手机（≤899）：导航收为汉堡菜单 ---------- */
@media (max-width:899px){
  .nav{
    display:none;position:absolute;top:72px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--zj-white);padding:var(--sp-2) var(--sp-3) var(--sp-3);
    border-bottom:1px solid var(--zj-line);box-shadow:var(--shadow-card);
  }
  .nav.is-open{display:flex}
  .nav a{color:var(--zj-ink);padding:14px 4px;border-bottom:1px solid var(--zj-line);font-size:16px}
  .nav a:last-child{border-bottom:0}
  .nav a::after{display:none}
  .nav a[aria-current="page"]{color:var(--zj-orange)}
  .nav-toggle{display:block}
}

/* ---------- 手机（＜640）：单列网格、CTA 通栏、工商卡竖排 ---------- */
@media (max-width:639px){
  :root{--fs-h1:30px;--fs-h2:23px;--fs-h3:18px;--fs-display:34px}
  .container{padding-left:var(--sp-2);padding-right:var(--sp-2)}
  .hero .hero__sub{font-size:16px}
  .hero__eyebrow{font-size:14px;letter-spacing:.8px;margin-bottom:18px}
  .hero--statement h1{font-size:27px;line-height:1.35}
  .hero__statement{row-gap:20px}
  .hero--statement .hero__sub{font-size:16px;line-height:1.65}
  /* 手机上按钮通栏竖排（首屏规则特异性更高，需同权重覆盖） */
  .hero--statement .hero__cta{flex-direction:column;align-items:stretch;width:100%}
  .hero--statement .hero__cta .btn{width:100%}
  .energy-chart__months{font-size:10px}
  .energy-chart__months span{white-space:nowrap}
  .energy{padding:52px 0 60px}
  .energy__head{margin-bottom:24px}
  .energy-chart__grid{grid-template-columns:104px 1fr;column-gap:14px;height:300px}
  .energy-row{padding-top:5px}
  .energy-row__name{font-size:11.5px;padding-left:10px}
  .energy-row__name::before{width:5px;height:5px;top:4px}
  .energy-row__val{font-size:17px;letter-spacing:-.3px}
  .energy-row__unit{font-size:10px}
  .energy-row--dev .energy-row__val{font-size:15px}
  .energy-chart__months{margin-left:118px;font-size:11px}
  .energy-steps li span{display:none}
  .energy-steps li{padding-right:0}
  .energy-chart__months span:nth-child(2),
  .energy-chart__months span:nth-child(3),
  .energy-chart__months span:nth-child(5),
  .energy-chart__months span:nth-child(6),
  .energy-chart__months span:nth-child(8),
  .energy-chart__months span:nth-child(9),
  .energy-chart__months span:nth-child(11),
  .energy-chart__months span:nth-child(12){visibility:hidden}
  .hero__chart-say{flex:1 1 100%;order:3;white-space:normal;font-size:11.5px}
  .he-m text{font-size:14px}
  .he-p__name{font-size:17px}
  .he-p__unit{font-size:13.5px}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
  .site-footer__grid{grid-template-columns:1fr;gap:var(--sp-4)}
  .site-footer .footer-logo{flex-direction:column;align-items:flex-start;gap:var(--sp-2)}
  .site-footer .footer-logo p{max-width:none}
  .footer-contact{grid-template-columns:1fr;gap:var(--sp-2)}
  .footer-contact li{flex-direction:row;gap:8px;align-items:baseline}
  .footer-contact .label{min-width:42px}
  .grid--4,.grid--3,.grid--2{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .statbar__inner{grid-template-columns:1fr;gap:var(--sp-3);padding:var(--sp-4) 0}
  .stat{flex-direction:row;align-items:baseline;justify-content:center;gap:var(--sp-2)}
  .stat__num{font-size:32px}
  .cta__inner{flex-direction:column;align-items:flex-start}
  .cta__inner .btn{width:100%}
  /* 工商信息卡：竖排，长值允许断行 */
  .biz-card dl{grid-template-columns:1fr;gap:6px var(--sp-3)}
  .biz-card dt{margin-top:var(--sp-1)}
  .biz-card dt:first-child{margin-top:0}
  .biz-card dd{word-break:break-all}
  /* 页脚底部：竖排 */
  .footer-bottom .container{flex-direction:column;gap:4px}
  /* 正文字号微调 */
  .card p,.feature p{font-size:14px}
  .map-placeholder{aspect-ratio:4/3}
}

/* ---------- 动效降级（无障碍） ---------- */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .btn,.nav a::after{transition:none!important}
  .btn--primary:hover,.btn--ondark:hover{transform:none!important}
}

/* ---------- 客户登录入口（B2 · 极简双行 + 副行流光） ---------- */
/* 字形不写死，直接继承 .nav a（桌面 15px/600，窄屏 16px/600），
   保证两端都与导航项同源。只在结构、颜色、装饰上做区分。 */
.nav a.nav__login{
  position:relative;
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  margin-left:8px;
  padding:6px 4px 6px 13px;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--zj-ink);
  line-height:1.25;
  text-decoration:none;
  isolation:isolate;
}
/* 覆盖 .nav a::after 的橙色短杠（登录项改用左侧竖管） */
.nav a.nav__login::after{display:none;content:none;transform:none}
/* 左侧橙色竖管，呼应站点「管路语言」 */
.nav a.nav__login::before{
  content:"";
  position:absolute;
  left:0;top:3px;bottom:3px;width:2px;
  background:var(--zj-orange);
  border-radius:var(--r-pipe);
  opacity:.85;
  transition:opacity .2s ease;
}
.nav a.nav__login:hover::before{opacity:1}

/* 主行：客户登录 —— 字号/字重/字距全部继承 .nav a，不做任何覆盖 */
.nav a.nav__login .nav__login__main{
  display:inline-flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
}
.nav a.nav__login .nav__login__arrow{
  font-size:.72em;
  color:var(--zj-orange);
  opacity:.9;
  transition:transform .22s cubic-bezier(.34,1.4,.5,1);
}
.nav a.nav__login:hover .nav__login__arrow{transform:translateX(3px)}

/* 副行：探索全年能耗 —— 盒宽撑满，右缘与主行箭头右缘对齐 */
.nav a.nav__login .nav__login__sub{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  font-size:10px;
  font-weight:400;
  letter-spacing:normal;
  line-height:1.3;
  color:var(--zj-steel);
  white-space:nowrap;
  overflow:hidden;
  transition:color .18s ease;
}
.nav a.nav__login .nav__login__subtext{position:relative;z-index:2;flex:0 0 auto}
.nav a.nav__login:hover .nav__login__sub{color:var(--zj-navy)}

/* 副行动效：版本 B · 原版垂直流光 + 呼吸
   流光轨迹与原版完全一致（仍垂直扫过文字面），透明度由 .82 降到 .55，
   且文字层始终压在光带之上，扫过时不再糊字；文字同时做银灰↔墨蓝呼吸。 */
.nav a.nav__login .nav__login__sub::after{
  content:"";
  position:absolute;
  top:-3px;bottom:-3px;left:-24px;width:24px;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(224,123,39,.55),rgba(224,123,39,.65),rgba(224,123,39,.55),transparent);
  pointer-events:none;
  animation:zjLoginSweep 3.4s cubic-bezier(.5,0,.35,1) infinite;
}
@keyframes zjLoginSweep{
  0%{left:-24px;opacity:0}
  9%{opacity:1}
  58%{left:100%;opacity:1}
  68%,100%{left:100%;opacity:0}
}
.nav a.nav__login .nav__login__subtext{animation:zjLoginText 3.4s ease-in-out infinite}
@keyframes zjLoginText{
  0%,14%{color:var(--zj-steel)}
  46%,64%{color:var(--zj-navy)}
  88%,100%{color:var(--zj-steel)}
}

.nav a.nav__login:focus-visible{outline:2px solid var(--zj-orange);outline-offset:3px}

/* 窄屏展开菜单内：整行铺开，竖管拉满，副行稍放大便于阅读 */
@media (max-width:899px){
  .nav a.nav__login{
    margin-left:0;
    padding:12px 4px 12px 14px;
    border-bottom:1px solid var(--zj-line);
    color:var(--zj-navy);
  }
  .nav a.nav__login::before{top:0;bottom:0}
  /* 副行只占文字宽度，扫光行程与桌面一致，不会横穿整屏 */
  .nav a.nav__login .nav__login__sub{width:auto;align-self:flex-start;font-size:11px}
}

/* 无障碍：尊重系统「减少动态效果」
   放在文件末尾且选择器与前文一致，靠源码顺序覆盖；
   另用 :root 提升特异性，确保即使 main.css 日后追加规则也不受影响 */
@media (prefers-reduced-motion:reduce){
  :root .nav a.nav__login .nav__login__sub::after{animation:none;opacity:0}
  :root .nav a.nav__login .nav__login__subtext{animation:none}
  :root .nav a.nav__login .nav__login__arrow{transition:none}
}

/* ===== 页眉手写「探索全年能耗」· 逐笔书写 + 落笔确认一横（笔画路径 SVG / 5s 循环） ===== */
.hw-anno{
  position:relative;flex:1;display:none;align-items:center;justify-content:flex-start;
  top:8px;                     /* 光学中心与 logo 对齐 */
  pointer-events:none;
}
.hw-anno__wrap{position:relative;display:inline-block;margin-left:46px}
.hw-anno__wrap picture{display:block}
/* 视图框比字形宽：左侧 7.62px、上方 1px 是留给横线出头与落笔余量的空白，用负边距抵掉 */
.hw-anno__write{display:block;width:175.7px;height:auto;max-width:none;margin-left:-7.62px}

@media (min-width:1025px){
  .hw-anno{display:flex}
  .hw-anno__wrap{animation:hwSettle 5s ease-out infinite both}
}

/* 落笔后整块轻轻一沉，像笔尖压了一下纸 */
@keyframes hwSettle{
  0%,49.6%{transform:translateY(0)}
  51.2%{transform:translateY(1px)}
  53%,100%{transform:translateY(0)}
}

@media (prefers-reduced-motion: reduce){
  .hw-anno__wrap{animation:none!important;transform:none!important}
}

/* ---------- 登录门户页（login/register/forgot）底部备案信息 ---------- */
/* 三页共用：main.css 的 flex-direction 不会被页内 inline 样式覆盖（它们没写这个属性） */
.login-wrap{flex-direction:column;gap:var(--sp-3)}
.login-legal{
  margin:0;max-width:600px;text-align:center;
  font-size:12px;line-height:1.75;color:var(--zj-steel);
}
.login-legal .li,.login-legal a{white-space:nowrap}
.login-legal a{color:var(--zj-steel);text-decoration:none;border-bottom:1px solid var(--zj-line)}
.login-legal a:hover{color:var(--zj-navy);border-bottom-color:var(--zj-navy)}
.login-legal .sep{margin:0 6px;color:var(--zj-steel-300)}
@media (max-width:480px){.login-legal{font-size:11px}}