/* 海洋蓄电池官网 · 设计系统 v2（VARTA 官方蓝 #00457F / 黄 #FEEE00 / 白底工业风） */
:root{
  --blue:#00457F; --blue-dk:#00304F; --blue-lt:#0A5FA8;
  --yellow:#FEEE00;
  --ink:#0B1620; --ink-2:#3E4C59; --ink-3:#6B7A89;
  --paper:#FFFFFF; --grey:#F2F4F7; --line:#DCE3EA;
  --r-sm:2px; --r-md:2px; --r-lg:2px;
  --s1:8px; --s2:12px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:64px;
  --max:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);line-height:1.7;
  font-family:"Noto Sans SC","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,4vw,40px)}

header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:36px;height:82px;padding:0 clamp(20px,4vw,40px)}
.logo{display:flex;align-items:flex-end;gap:26px;text-decoration:none;border:0;padding:6px 0}
.logo img{display:block;height:46px;width:auto}
.logo b{display:block;font-size:15px;font-weight:700;color:var(--ink-2)}
.logo span i{display:block;font-style:normal;font-size:10.5px;color:var(--ink-3);letter-spacing:.12em;margin-top:2px}
nav{display:flex;gap:30px;margin-left:auto}
nav a{color:var(--ink-2);text-decoration:none;font-size:14.5px;font-weight:600;padding:28px 0;border-bottom:3px solid transparent;transition:.15s}
nav a:hover{color:var(--blue)}
nav a.on{color:var(--blue);border-color:var(--yellow)}
.tel{display:inline-flex;align-items:center;gap:9px;text-decoration:none;background:var(--blue);color:#fff;
  padding:13px 22px;border-radius:2px;font-size:15px;font-weight:800;transition:.18s}
.tel:hover{background:var(--blue-dk)}

h1{font-size:clamp(30px,3.4vw,46px);line-height:1.14;letter-spacing:-.02em;font-weight:900;color:var(--ink);text-wrap:balance}
h1 em{font-style:normal;color:var(--blue);white-space:nowrap;position:relative}
h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.1em;height:.14em;background:var(--yellow);z-index:-1}
h2{font-size:clamp(24px,2.8vw,36px);line-height:1.24;letter-spacing:-.02em;font-weight:900;color:var(--ink);text-wrap:balance}
h3{font-size:16px;font-weight:800;color:var(--ink)}
.lede{margin-top:16px;font-size:16.5px;line-height:1.85;color:var(--ink-2);max-width:33em;text-wrap:pretty}
.nw{white-space:nowrap}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue);font-weight:800;margin-bottom:14px;border:0;background:none;padding:0}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--yellow)}

.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;padding:14px 26px;border-radius:2px;
  font-weight:800;font-size:15.5px;border:2px solid transparent;transition:.18s;cursor:pointer}
.btn-primary{background:var(--yellow);color:#12233A}
.btn-primary:hover{background:#FFE93D}
.btn-ghost,.btn-outline{color:var(--blue);border-color:var(--blue);background:#fff}
.btn-ghost:hover,.btn-outline:hover{background:var(--blue);color:#fff}

.card{background:#fff;border:1px solid var(--line);border-radius:2px;padding:24px;
  box-shadow:0 10px 30px -26px rgba(11,22,32,.5);transition:.18s}
.card:hover{border-color:#C6D2DE;box-shadow:0 18px 40px -32px rgba(0,69,127,.55)}
.grid{display:grid;gap:18px}
.grid-5{grid-template-columns:repeat(5,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:1fr 1fr}
.split{display:grid;gap:24px;grid-template-columns:1.1fr .9fr}
.split.even{grid-template-columns:1fr 1fr}
section.block{padding:clamp(48px,6vw,88px) 0}

.muted{color:var(--ink-3);font-size:13px}
table{width:100%;border-collapse:collapse;font-size:14px;background:#fff}
th,td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:left}
th{color:#fff;background:var(--blue);font-weight:700;font-size:12.5px;letter-spacing:.06em}
tr:nth-child(even) td{background:#FAFBFC}
tr:hover td{background:rgba(0,69,127,.04)}
tr:last-child td{border-bottom:none}
.tag{display:inline-block;font-size:11px;padding:3px 9px;border-radius:2px;
  background:var(--yellow);color:#12233A;font-weight:800;letter-spacing:.06em}

input,select,textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:2px;background:#fff;
  color:var(--ink);font-size:14.5px;font-family:inherit;transition:.15s}
input::placeholder,textarea::placeholder{color:#9AA7B4}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,69,127,.10)}
.field{display:grid;gap:10px}
.field label{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:800}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.brandwall{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.brandwall span{border:1px solid var(--line);border-radius:2px;padding:7px 14px;font-size:13px;
  color:var(--ink-2);background:#fff;font-weight:700}
.brandwall span.hi{color:#fff;background:var(--blue);border-color:var(--blue)}
.rule{height:1px;background:var(--line);margin:0 auto;max-width:1200px}
.brand-head{height:26px;margin-bottom:2px}

footer{background:var(--blue-dk);color:rgba(255,255,255,.82);padding:42px 0 54px;font-size:13px;line-height:2}

@media(max-width:1100px){
  .grid-5{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:960px){
  nav{display:none}
  .split,.split.even{grid-template-columns:1fr}
  .logo span i{display:none}
}
@media(max-width:760px){
  .grid-5,.grid-3,.grid-2{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .row2{grid-template-columns:1fr}
  header{height:72px;gap:16px}
  .logo img{height:36px}
}

/* ===== 手机端头部收敛（390px 实测溢出修复） ===== */
@media(max-width:640px){
  .topbar .wrap{height:auto;padding:7px clamp(12px,3vw,16px);gap:8px;flex-wrap:wrap;font-size:11.5px;line-height:1.5}
  .topbar .wrap span{flex:1 1 auto;min-width:0}
  .topbar .wrap span:last-child{display:none}
  .nav{gap:12px;height:auto;padding:10px clamp(14px,4vw,40px) 0}
  .logo{gap:12px}
  .logo img{height:34px}
  .logo .name{display:none}
  .tel{padding:10px 13px;font-size:13px;flex:0 0 auto}
  .tel small{display:none}
  
}

/* 手机端：导航不隐藏，改为横向滑动条（原逻辑直接 display:none，手机上无法进子页） */
@media(max-width:1040px){
  .nav{flex-wrap:wrap;height:auto;padding:10px clamp(14px,4vw,40px) 0;gap:10px}
  .menu{display:flex;order:3;width:100%;margin:0;gap:18px;overflow-x:auto;
    -webkit-overflow-scrolling:touch;padding:6px 0 10px;border-top:1px solid var(--line);scrollbar-width:none}
  .menu::-webkit-scrollbar{display:none}
  .menu a{padding:4px 0;font-size:13.5px;white-space:nowrap;border-bottom:2px solid transparent}
  .menu a.on{border-color:var(--yellow)}
}
@media(max-width:960px){
  nav{display:flex;order:3;width:100%;margin:0;gap:18px;overflow-x:auto;padding:6px 0 10px;
    border-top:1px solid var(--line);scrollbar-width:none}
  nav::-webkit-scrollbar{display:none}
  nav a{padding:4px 0;font-size:13.5px;white-space:nowrap}
  header{flex-wrap:wrap;height:auto;padding:10px clamp(14px,4vw,40px) 0}
}

/* 窄屏导航：换行显示（不再依赖横向滑动，保证 7 项全部可见可点） */
@media(max-width:700px){
  .menu,nav{flex-wrap:wrap;overflow:visible;row-gap:6px;column-gap:14px;padding:8px 0 10px}
  .menu a,nav a{font-size:13px}
}

/* 窄屏导航：4 列网格（4+3 两行，整齐不顶格、全部可点） */
@media(max-width:700px){
  .menu,nav{display:grid;grid-template-columns:repeat(4,1fr);gap:6px 12px;width:100%;
    margin:0;padding:8px 0 10px;box-sizing:border-box;border-top:1px solid var(--line);overflow:visible}
  .menu a,nav a{font-size:13px;padding:4px 0;border-bottom:2px solid transparent}
}