/* ============================================================
   Polymen Batteries — site stylesheet
   无框架、无外部字体依赖，首屏只有一张 webp。
   ============================================================ */

:root{
  --ink:#0E1114;
  --ink-2:#252B33;
  --ink-3:#59626F;
  --ink-4:#8A94A2;
  --line:#E3E7ED;
  --line-2:#EEF1F5;
  --paper:#FFFFFF;
  --tint:#F6F8FA;
  --tint-2:#EDF1F6;

  --red:#C6191F;
  --red-lt:#E8384F;
  --green:#559036;
  --blue:#2F93D1;

  --nav-h:70px;
  --wrap:1180px;
  --r:4px;

  --shadow-s:0 1px 2px rgba(14,17,20,.05), 0 2px 8px rgba(14,17,20,.04);
  --shadow-m:0 2px 6px rgba(14,17,20,.06), 0 12px 32px rgba(14,17,20,.08);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size:16px;
  line-height:1.66;
  color:var(--ink-2);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 28px; }
.wrap-n{ max-width:960px; }

/* ---------- 排版 ---------- */
h1,h2,h3,h4{ margin:0; color:var(--ink); font-weight:700; letter-spacing:-.02em; line-height:1.15; }
h1{ font-size:clamp(34px, 4.6vw, 56px); font-weight:800; letter-spacing:-.028em; }
h2{ font-size:clamp(26px, 3.2vw, 38px); font-weight:800; letter-spacing:-.025em; }
h3{ font-size:20px; letter-spacing:-.01em; }
h4{ font-size:16px; letter-spacing:0; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

.lead{ font-size:clamp(17px, 1.5vw, 19.5px); line-height:1.62; color:var(--ink-3); font-weight:400; }

.kicker{
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--red); margin-bottom:14px;
}
.kicker.mute{ color:var(--ink-4); }

.rule{ width:44px; height:3px; background:var(--red); border:0; margin:0 0 22px; }

.mono{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* ---------- 顶部信息条 ---------- */
.topbar{
  background:var(--ink); color:#A8B2BF; font-size:12.5px;
  letter-spacing:.02em; border-bottom:1px solid rgba(255,255,255,.07);
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between;
  height:38px; gap:20px; }
.topbar a{ color:#C9D1DA; }
.topbar a:hover{ color:#fff; }
.topbar .tb-l{ display:flex; gap:18px; align-items:center; }
.topbar .tb-dot{ width:3px; height:3px; border-radius:50%; background:#5C6773; }

/* ---------- 导航 ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease;
}
.nav.stuck{ box-shadow:0 1px 16px rgba(14,17,20,.09); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between;
  height:var(--nav-h); gap:28px; }

.brand{ display:flex; align-items:center; gap:11px; flex:0 0 auto; }
.brand svg{ width:30px; height:39px; display:block; flex:0 0 auto; }
.brand-txt{ display:flex; flex-direction:column; line-height:1; }
.brand-txt b{
  font-size:20px; font-weight:800; letter-spacing:.055em; color:var(--ink);
}
.brand-txt i{
  font-style:normal; font-size:10.5px; font-weight:700; letter-spacing:.30em;
  color:var(--red); margin-top:3px;
}

.nav-links{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav-links a{
  padding:9px 13px; font-size:14.5px; font-weight:600; color:var(--ink-3);
  border-radius:var(--r); transition:color .16s, background .16s; white-space:nowrap;
}
.nav-links a:hover{ color:var(--ink); background:var(--tint); }
.nav-links a.on{ color:var(--ink); }
.nav-links a.on::after{
  content:""; display:block; height:2px; background:var(--red);
  margin-top:5px; border-radius:2px;
}

.nav-cta{
  margin-left:14px; padding:11px 20px !important; background:var(--ink) !important;
  color:#fff !important; font-weight:700 !important; border-radius:var(--r);
  transition:background .18s !important;
}
.nav-cta:hover{ background:var(--red) !important; }

.burger{
  display:none; width:42px; height:42px; border:1px solid var(--line);
  background:#fff; border-radius:var(--r); cursor:pointer; padding:0;
  align-items:center; justify-content:center;
}
.burger span{ display:block; width:18px; height:2px; background:var(--ink);
  position:relative; transition:.2s; }
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:18px; height:2px;
  background:var(--ink); transition:.2s;
}
.burger span::before{ top:-6px; }
.burger span::after{ top:6px; }

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 26px; border-radius:var(--r);
  font-size:15px; font-weight:700; letter-spacing:.01em;
  border:1.5px solid transparent; cursor:pointer;
  transition:background .18s, color .18s, border-color .18s, transform .18s;
}
.btn-p{ background:var(--red); color:#fff; }
.btn-p:hover{ background:#A8141A; }
.btn-d{ background:var(--ink); color:#fff; }
.btn-d:hover{ background:var(--red); }
.btn-o{ border-color:var(--line); color:var(--ink); background:#fff; }
.btn-o:hover{ border-color:var(--ink); }
.btn-ghost{ border-color:rgba(255,255,255,.28); color:#fff; }
.btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn svg{ width:16px; height:16px; flex:0 0 auto; }

.btn-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

/* ---------- Hero ---------- */
.hero{
  position:relative; background:var(--ink); color:#fff; overflow:hidden;
  isolation:isolate;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(900px 520px at 78% 34%, rgba(47,147,209,.14), transparent 62%),
    radial-gradient(700px 460px at 12% 88%, rgba(198,25,31,.13), transparent 66%);
}
.hero > .wrap{
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  align-items:center; gap:40px; padding-top:76px; padding-bottom:76px;
  min-height:min(76vh, 660px);
}
.hero-txt{ max-width:600px; }
.hero .kicker{ color:var(--red-lt); }
.hero h1{ color:#fff; }
.hero h1 em{ font-style:normal; color:var(--red-lt); }
.hero .lead{ color:#A9B3C0; margin-top:20px; max-width:520px; }
.hero .btn-row{ margin-top:34px; }
.hero-meta{
  display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:34px;
  font-size:13px; color:#7C8794; letter-spacing:.01em;
}
.hero-meta span{ display:flex; align-items:center; gap:7px; }
.hero-meta b{ color:#D3DAE3; font-weight:700; }

.hero-art{ position:relative; display:flex; justify-content:center; }
.hero-art img{
  width:100%; max-width:640px;
  filter:drop-shadow(0 26px 54px rgba(0,0,0,.55))
         drop-shadow(0 0 90px rgba(47,147,209,.13));
}

/* 数字条 */
.kpi{ border-top:1px solid rgba(255,255,255,.11); background:rgba(0,0,0,.18); }
.kpi .wrap{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; }
.kpi div{
  padding:24px 4px 26px; border-left:1px solid rgba(255,255,255,.09);
}
.kpi div:first-child{ border-left:0; }
.kpi b{
  display:block; font-size:clamp(22px, 2.4vw, 30px); font-weight:800;
  color:#fff; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1;
}
.kpi span{ display:block; font-size:12px; color:#7C8794; margin-top:7px;
  letter-spacing:.06em; text-transform:uppercase; font-weight:600; }

/* ---------- 区块 ---------- */
.sec{ padding:88px 0; }
.sec.tight{ padding:64px 0; }
.sec.tint{ background:var(--tint); }
.sec.dark{ background:var(--ink); color:#A9B3C0; }
.sec.dark h2, .sec.dark h3, .sec.dark h4{ color:#fff; }
.sec.dark .lead{ color:#9AA5B3; }

.sec-head{ max-width:760px; margin-bottom:52px; }
.sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.sec-head p{ margin-top:16px; color:var(--ink-3); font-size:17px; }
.sec.dark .sec-head p{ color:#8E99A7; }

/* ---------- 网格 ---------- */
.grid{ display:grid; gap:26px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }

/* ---------- 产品卡 ---------- */
.pcard{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; transition:box-shadow .22s, border-color .22s, transform .22s;
}
.pcard:hover{ box-shadow:var(--shadow-m); border-color:#D3D9E1; transform:translateY(-2px); }
.pcard-img{ background:var(--tint); aspect-ratio:3/2; overflow:hidden; }
.pcard-img img{ width:100%; height:100%; object-fit:cover; }
.pcard-body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.pcard-tag{
  display:inline-block; align-self:flex-start;
  font-size:10.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  color:#fff; background:var(--ink); padding:4px 9px; border-radius:2px; margin-bottom:12px;
}
.pcard-tag.r{ background:var(--red); }
.pcard-tag.b{ background:var(--blue); }
.pcard-tag.g{ background:var(--green); }
.pcard h3{ font-size:18.5px; margin-bottom:6px; }
.pcard .spec{
  font-size:13.5px; color:var(--ink-4); font-variant-numeric:tabular-nums;
  margin-bottom:12px; letter-spacing:.01em;
}
.pcard p{ font-size:14.5px; color:var(--ink-3); line-height:1.6; }
.pcard-more{
  margin-top:auto; padding-top:16px; font-size:13.5px; font-weight:700; color:var(--red);
  display:inline-flex; align-items:center; gap:6px;
}
.pcard-more svg{ width:13px; height:13px; transition:transform .2s; }
.pcard:hover .pcard-more svg{ transform:translateX(3px); }

/* ---------- 表格 ---------- */
.tbl-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:var(--r); }
table{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:640px; }
thead th{
  background:var(--ink); color:#fff; text-align:left;
  padding:13px 16px; font-size:11.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; white-space:nowrap;
}
tbody td{ padding:13px 16px; border-bottom:1px solid var(--line-2); vertical-align:top; }
tbody tr:last-child td{ border-bottom:0; }
tbody tr:nth-child(even){ background:#FBFCFD; }
tbody th{
  text-align:left; font-weight:700; color:var(--ink); padding:13px 16px;
  border-bottom:1px solid var(--line-2); background:#fff;
}
td.n, th.n{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.tbl-note{ font-size:13px; color:var(--ink-4); margin-top:14px; line-height:1.6; }

/* ---------- 特性块 ---------- */
.feat{ border-top:2px solid var(--ink); padding-top:20px; }
.feat .n{
  font-size:12px; font-weight:800; color:var(--red); letter-spacing:.12em;
  font-variant-numeric:tabular-nums; display:block; margin-bottom:10px;
}
.feat h3{ font-size:17.5px; margin-bottom:9px; }
.feat p{ font-size:14.5px; color:var(--ink-3); line-height:1.62; }
.sec.dark .feat{ border-top-color:rgba(255,255,255,.22); }
.sec.dark .feat p{ color:#8E99A7; }

/* ---------- 带色块 ---------- */
.band{
  background:var(--tint); border-left:3px solid var(--red);
  padding:26px 30px; border-radius:0 var(--r) var(--r) 0;
}
.band h3{ font-size:18px; margin-bottom:10px; }
.band p{ font-size:15px; color:var(--ink-3); }
.band.dark{ background:rgba(255,255,255,.05); border-left-color:var(--red-lt); }
.band.dark p{ color:#9AA5B3; }

/* ---------- 清单 ---------- */
.checks{ list-style:none; margin:0; padding:0; display:grid; gap:13px; }
.checks li{ position:relative; padding-left:30px; font-size:15px; color:var(--ink-3); }
.checks li::before{
  content:""; position:absolute; left:0; top:7px; width:16px; height:16px;
  background:var(--red);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6.2 11.4L2.6 7.8l1.1-1.1 2.5 2.5 6-6 1.1 1.1z'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6.2 11.4L2.6 7.8l1.1-1.1 2.5 2.5 6-6 1.1 1.1z'/></svg>") center/contain no-repeat;
}
.checks li b{ color:var(--ink); font-weight:700; }
.sec.dark .checks li{ color:#8E99A7; }
.sec.dark .checks li b{ color:#fff; }

/* ---------- 两栏图文 ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.split.wide-l{ grid-template-columns:1.15fr .85fr; }
.split img{ border-radius:var(--r); }
.split .fig{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--tint); }

/* ---------- 图片横幅 ---------- */
.banner{
  position:relative; min-height:360px; display:flex; align-items:flex-end;
  color:#fff; overflow:hidden; background:var(--ink);
}
.banner img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.55; }
.banner::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,17,20,.25) 0%, rgba(14,17,20,.86) 100%);
}
.banner .wrap{ position:relative; z-index:2; padding-top:70px; padding-bottom:56px; }
.banner h2{ color:#fff; max-width:640px; }
.banner p{ color:#B4BEC9; max-width:560px; margin-top:14px; }

/* ---------- CTA ---------- */
.cta{ background:var(--ink); color:#fff; padding:76px 0; position:relative; overflow:hidden; }
.cta::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(700px 380px at 85% 20%, rgba(198,25,31,.20), transparent 68%);
}
.cta .wrap{ position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:48px; flex-wrap:wrap; }
.cta h2{ color:#fff; max-width:640px; }
.cta p{ color:#9AA5B3; margin-top:14px; max-width:560px; }

/* ---------- 表单 ---------- */
.form{ display:grid; gap:18px; }
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:13px; font-weight:700; color:var(--ink-2); letter-spacing:.01em; }
.field label .req{ color:var(--red); }
.field input, .field select, .field textarea{
  font:inherit; font-size:15px; color:var(--ink);
  padding:12px 14px; border:1px solid var(--line); border-radius:var(--r);
  background:#fff; transition:border-color .16s, box-shadow .16s; width:100%;
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(14,17,20,.07);
}
.field .hint{ font-size:12.5px; color:var(--ink-4); }
.form-note{ font-size:13px; color:var(--ink-4); line-height:1.6; }

/* ---------- 页脚 ---------- */
.foot{ background:#0A0D10; color:#7C8794; padding:64px 0 0; font-size:14px; }
.foot-grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:44px;
  padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.08);
}
.foot .brand-txt b{ color:#fff; }
.foot p{ color:#7C8794; font-size:13.5px; line-height:1.7; margin-top:16px; max-width:300px; }
.foot h4{
  color:#fff; font-size:12px; letter-spacing:.13em; text-transform:uppercase;
  margin-bottom:16px; font-weight:800;
}
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.foot li a{ color:#8E99A7; font-size:13.5px; transition:color .16s; }
.foot li a:hover{ color:#fff; }
.foot .addr{ font-size:13.5px; line-height:1.8; color:#8E99A7; }
.foot .addr b{ color:#C9D1DA; font-weight:600; display:block; margin-bottom:4px; }
.foot-btm{
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:22px 0; font-size:12.5px; color:#5C6773; flex-wrap:wrap;
}
.foot-btm a{ color:#7C8794; }
.foot-btm a:hover{ color:#fff; }

/* ---------- 页头（内页） ---------- */
.phead{ background:var(--tint); border-bottom:1px solid var(--line); padding:60px 0 56px; }
.phead .lead{ max-width:790px; margin-top:18px; }
.crumb{ font-size:12.5px; color:var(--ink-4); margin-bottom:18px; letter-spacing:.03em; }
.crumb a{ color:var(--ink-3); }
.crumb a:hover{ color:var(--red); }
.crumb span{ margin:0 8px; color:#C3CAD3; }

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .hero > .wrap{ grid-template-columns:1fr; min-height:0; padding-top:56px; padding-bottom:52px; gap:8px; }
  .hero-art{ order:-1; }
  .hero-art img{ max-width:440px; }
  .kpi .wrap{ grid-template-columns:repeat(3,1fr); }
  .kpi div:nth-child(4){ border-left:0; }
  .g4{ grid-template-columns:repeat(2,1fr); }
  .split, .split.wide-l{ grid-template-columns:1fr; gap:34px; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:34px; }
  .sec{ padding:68px 0; }
}

@media (max-width:860px){
  .nav-links{
    position:fixed; inset:var(--nav-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--line);
    padding:8px 20px 20px; box-shadow:0 18px 40px rgba(14,17,20,.12);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .18s, transform .18s;
    max-height:calc(100vh - var(--nav-h)); overflow-y:auto;
  }
  .nav-links.open{ transform:none; opacity:1; pointer-events:auto; }
  .nav-links a{ padding:15px 4px; border-bottom:1px solid var(--line-2); font-size:16px; }
  .nav-links a.on::after{ display:none; }
  .nav-cta{ margin:14px 0 0 !important; text-align:center; justify-content:center; }
  .burger{ display:flex; }
  .g3{ grid-template-columns:1fr; }
  .g2{ grid-template-columns:1fr; }
  .frow{ grid-template-columns:1fr; }
  .topbar .tb-r{ display:none; }
}

@media (max-width:640px){
  .wrap{ padding:0 20px; }
  .topbar .wrap{ height:34px; }
  .topbar .tb-l span, .topbar .tb-dot{ display:none; }
  .topbar .tb-l{ font-size:12px; }
  .sec{ padding:54px 0; }
  .sec-head{ margin-bottom:36px; }
  .kpi .wrap{ grid-template-columns:repeat(2,1fr); }
  .kpi div{ padding:18px 2px 20px; }
  .kpi div:nth-child(odd){ border-left:0; }
  .g4{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; gap:30px; }
  .cta .wrap{ flex-direction:column; align-items:flex-start; }
  .btn{ width:100%; justify-content:center; }
  .btn-row .btn{ width:100%; }
  .banner{ min-height:300px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* 打印 */
@media print{
  .nav,.topbar,.cta,.burger{ display:none; }
  body{ font-size:11pt; }
  .sec{ padding:24px 0; }
}

/* ---------- 产品长条目（products 页） ---------- */
.prow{
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
  padding:58px 0; border-bottom:1px solid var(--line);
}
.prow:last-of-type{ border-bottom:0; }
.prow:nth-child(even) .prow-img{ order:2; }
.prow-img{ background:var(--tint); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.prow-img img{ width:100%; display:block; }
.prow-txt h2{ font-size:clamp(24px,2.6vw,32px); margin-bottom:8px; }
.prow-txt .spec{ font-size:14.5px; color:var(--red); font-weight:700;
  font-variant-numeric:tabular-nums; letter-spacing:.01em; margin-bottom:16px; }
.prow-txt p{ font-size:15.5px; color:var(--ink-3); }

.kv{ display:grid; grid-template-columns:auto 1fr; gap:10px 26px;
  margin:24px 0 0; font-size:14.5px; line-height:1.5; }
.kv dt{ color:var(--ink-4); font-weight:600; white-space:nowrap; }
.kv dd{ margin:0; color:var(--ink); font-variant-numeric:tabular-nums; font-weight:600; }

/* ---------- 编号步骤 ---------- */
.steps{ counter-reset:s; display:grid; gap:0; }
.steps > div{ position:relative; padding:22px 0 22px 56px; border-bottom:1px solid var(--line-2); }
.steps > div:last-child{ border-bottom:0; }
.steps > div::before{
  counter-increment:s; content:counter(s,decimal-leading-zero);
  position:absolute; left:0; top:22px; font-size:13px; font-weight:800;
  color:var(--red); letter-spacing:.1em; font-variant-numeric:tabular-nums;
}
.steps h4{ font-size:16.5px; margin-bottom:5px; }
.steps p{ font-size:14.5px; color:var(--ink-3); margin:0; }
.sec.dark .steps > div{ border-bottom-color:rgba(255,255,255,.09); }
.sec.dark .steps h4{ color:#fff; }
.sec.dark .steps p{ color:#8E99A7; }

@media (max-width:860px){
  .prow{ grid-template-columns:1fr; gap:26px; padding:40px 0; }
  .prow:nth-child(even) .prow-img{ order:0; }
}