/* Aimer Industrial — site stylesheet
   固定字号刻度 + 组件类。无第三方 CDN，无外部字体。 */

:root{
  --ink:#0f1e2e; --ink-2:#3d5064; --ink-3:#6b7b8c;
  --line:#dde5ec; --line-2:#eef3f7;
  --bg:#ffffff; --bg-2:#f5f9fc; --bg-3:#eaf2f8;
  --brand:#0a6ea8; --brand-d:#075481; --brand-l:#e6f2f9;
  --accent:#12a5a5;
  --fs-1:0.75rem; --fs-2:0.8125rem; --fs-3:0.875rem; --fs-4:1rem;
  --fs-5:1.125rem; --fs-6:1.375rem; --fs-7:1.75rem; --fs-8:2.25rem; --fs-9:3rem;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:88px;
  --wrap:1200px; --r:6px; --r-l:12px;
  --sh:0 1px 2px rgba(15,30,46,.06),0 4px 14px rgba(15,30,46,.06);
  --sh-l:0 2px 6px rgba(15,30,46,.08),0 12px 34px rgba(15,30,46,.10);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:var(--fs-4); line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--brand); text-decoration:none}
a:hover{color:var(--brand-d)}
h1,h2,h3,h4{margin:0; line-height:1.22; font-weight:700; letter-spacing:-.01em}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--sp-5)}
.sec{padding:var(--sp-9) 0}
.sec-s{padding:var(--sp-7) 0}
.sec-alt{background:var(--bg-2)}
.center{text-align:center}
.stack>*+*{margin-top:var(--sp-4)}

/* ---------- 排版 ---------- */
.eyebrow{
  font-size:var(--fs-1); letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand); font-weight:700; margin-bottom:var(--sp-3)
}
.h-page{font-size:var(--fs-8)}
.h-sec{font-size:var(--fs-7); margin-bottom:var(--sp-3)}
.h-sub{font-size:var(--fs-6)}
.h-card{font-size:var(--fs-5)}
.lede{font-size:var(--fs-5); color:var(--ink-2); max-width:70ch}
.muted{color:var(--ink-3)}
.small{font-size:var(--fs-3)}
.sec-head{margin-bottom:var(--sp-6)}
.sec-head.center{margin-left:auto; margin-right:auto; max-width:74ch}
.prose p{margin:0 0 var(--sp-4); color:var(--ink-2)}
.prose h3{font-size:var(--fs-6); margin:var(--sp-7) 0 var(--sp-3); color:var(--ink)}
.prose h3:first-child{margin-top:0}
.prose ul{margin:0 0 var(--sp-4); padding:0; list-style:none}
.prose ul li{position:relative; padding-left:var(--sp-5); margin-bottom:var(--sp-2); color:var(--ink-2)}
.prose ul li::before{
  content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px;
  border-radius:50%; background:var(--accent)
}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:13px 26px; border-radius:var(--r); font-size:var(--fs-3);
  font-weight:600; border:1px solid transparent; cursor:pointer; transition:.15s
}
.btn-pri{background:var(--brand); color:#fff}
.btn-pri:hover{background:var(--brand-d); color:#fff}
.btn-sec{background:#fff; color:var(--ink); border-color:var(--line)}
.btn-sec:hover{border-color:var(--brand); color:var(--brand)}
.btn-ghost{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.5)}
.btn-ghost:hover{background:#fff; color:var(--ink)}
.btn-row{display:flex; flex-wrap:wrap; gap:var(--sp-3)}

/* ---------- 页头 ---------- */
.top{background:var(--ink); color:#c6d4e0; font-size:var(--fs-2)}
.top .wrap{display:flex; justify-content:space-between; gap:var(--sp-4); padding-top:9px; padding-bottom:9px; flex-wrap:wrap}
.top a{color:#c6d4e0}
.top a:hover{color:#fff}
.top-c{display:flex; gap:var(--sp-5); flex-wrap:wrap}

.hdr{position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5); height:76px}
.brand{display:flex; flex-direction:column; line-height:1.1}
.brand b{font-size:var(--fs-6); color:var(--ink); letter-spacing:-.02em}
.brand span{font-size:var(--fs-1); color:var(--ink-3); letter-spacing:.1em; text-transform:uppercase}

.nav{display:flex; align-items:center; gap:var(--sp-2)}
.nav>li{list-style:none; position:static}
.nav a.nav-l{
  display:block; padding:var(--sp-3) var(--sp-4); font-size:var(--fs-3);
  font-weight:600; color:var(--ink); border-radius:var(--r)
}
.nav a.nav-l:hover,.nav .on>a.nav-l{color:var(--brand); background:var(--brand-l)}
.nav ul{margin:0; padding:0}

/* Mega menu：靠 :hover 于 li，中间无间隙，不会闪退 */
.mega{
  position:absolute; left:0; right:0; top:100%;
  background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  box-shadow:var(--sh-l); padding:var(--sp-6) 0;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s
}
.has-mega:hover .mega,.mega:hover{opacity:1; visibility:visible; transform:none}
.mega-grid{
  max-width:var(--wrap); margin:0 auto; padding:0 var(--sp-5);
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4) var(--sp-5)
}
.mega-i{display:flex; gap:var(--sp-3); align-items:center; padding:var(--sp-2); border-radius:var(--r)}
.mega-i:hover{background:var(--bg-2)}
.mega-i img{width:56px; height:56px; object-fit:contain; background:var(--bg-3); border-radius:var(--r); flex:none}
.mega-i b{display:block; font-size:var(--fs-3); color:var(--ink)}
.mega-i span{font-size:var(--fs-1); color:var(--ink-3)}
.mega-foot{
  max-width:var(--wrap); margin:var(--sp-5) auto 0; padding:var(--sp-4) var(--sp-5) 0;
  border-top:1px solid var(--line-2); display:flex; gap:var(--sp-5); flex-wrap:wrap; font-size:var(--fs-3)
}

.burger{display:none; background:none; border:1px solid var(--line); border-radius:var(--r); padding:10px 12px}
.burger span{display:block; width:20px; height:2px; background:var(--ink); margin:4px 0}

/* ---------- Hero ---------- */
.hero{position:relative; color:#fff; overflow:hidden; background:var(--ink)}
.hero-bg{position:absolute; inset:0; display:grid; grid-template-columns:repeat(3,1fr)}
.hero-bg img{width:100%; height:100%; object-fit:cover; opacity:.30}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(9,26,42,.96) 0%,rgba(9,26,42,.88) 48%,rgba(9,26,42,.68) 100%)
}
.hero .wrap{position:relative; z-index:2; padding-top:var(--sp-9); padding-bottom:var(--sp-9)}
.hero h1{font-size:var(--fs-9); max-width:19ch; margin-bottom:var(--sp-4)}
.hero p{font-size:var(--fs-5); color:#d3e2ee; max-width:60ch; margin:0 0 var(--sp-6)}
.hero-pts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4);
  margin-top:var(--sp-8); padding-top:var(--sp-6); border-top:1px solid rgba(255,255,255,.18)
}
.hero-pts b{display:block; font-size:var(--fs-2); letter-spacing:.12em; text-transform:uppercase; color:#7fc4e8; margin-bottom:6px}
.hero-pts span{font-size:var(--fs-3); color:#d3e2ee}

.pagehead{background:var(--bg-2); border-bottom:1px solid var(--line); padding:var(--sp-7) 0}
.crumb{font-size:var(--fs-2); color:var(--ink-3); margin-bottom:var(--sp-3)}
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--brand)}

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

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-l);
  overflow:hidden; display:flex; flex-direction:column; transition:.18s
}
.card:hover{border-color:#b9d4e6; box-shadow:var(--sh-l); transform:translateY(-2px)}
.card-img{background:var(--bg-3); aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; padding:var(--sp-4)}
.card-img img{max-height:100%; width:auto; object-fit:contain}
.card-b{padding:var(--sp-4) var(--sp-5) var(--sp-5); display:flex; flex-direction:column; flex:1}
.card-b .tag{font-size:var(--fs-1); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px}
.card-b h3{font-size:var(--fs-4); margin-bottom:var(--sp-2)}
.card-b p{font-size:var(--fs-3); color:var(--ink-2); margin:0 0 var(--sp-4); flex:1}
.card-b .more{font-size:var(--fs-3); font-weight:600}

.cat-card{
  display:block; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-l); padding:var(--sp-5); transition:.18s
}
.cat-card:hover{border-color:#b9d4e6; box-shadow:var(--sh); transform:translateY(-2px)}
.cat-card img{height:110px; width:auto; margin:0 auto var(--sp-4); object-fit:contain}
.cat-card h3{font-size:var(--fs-4); color:var(--ink); margin-bottom:var(--sp-2)}
.cat-card p{font-size:var(--fs-3); color:var(--ink-2); margin:0 0 var(--sp-3)}
.cat-card .n{font-size:var(--fs-1); color:var(--ink-3); letter-spacing:.08em; text-transform:uppercase}

/* ---------- 产品详情 ---------- */
.pdp{display:grid; grid-template-columns:1.05fr 1fr; gap:var(--sp-8); align-items:start}
.gal-main{
  background:var(--bg-3); border:1px solid var(--line); border-radius:var(--r-l);
  padding:var(--sp-6); display:flex; align-items:center; justify-content:center; min-height:340px
}
.gal-main img{max-height:430px; width:auto; object-fit:contain}
.gal-thumbs{display:flex; gap:var(--sp-3); margin-top:var(--sp-3); flex-wrap:wrap}
.gal-thumbs img{
  width:78px; height:78px; object-fit:contain; padding:6px;
  background:var(--bg-3); border:1px solid var(--line); border-radius:var(--r)
}
.model{
  display:inline-block; font-size:var(--fs-2); font-weight:700; letter-spacing:.08em;
  background:var(--brand-l); color:var(--brand-d); padding:5px 11px; border-radius:var(--r); margin-bottom:var(--sp-3)
}
.pdp-cta{border-top:1px solid var(--line); margin-top:var(--sp-6); padding-top:var(--sp-5)}

.table-wrap{overflow-x:auto; margin:0 0 var(--sp-5); border:1px solid var(--line); border-radius:var(--r-l)}
table{border-collapse:collapse; width:100%; font-size:var(--fs-3); background:#fff}
th,td{border-bottom:1px solid var(--line-2); border-right:1px solid var(--line-2); padding:11px 14px; text-align:left; vertical-align:top; color:var(--ink-2)}
tr:last-child th,tr:last-child td{border-bottom:none}
th:last-child,td:last-child{border-right:none}
tbody tr:first-child td{background:var(--bg-2); font-weight:600; color:var(--ink)}
table td:first-child{font-weight:600; color:var(--ink); background:var(--bg-2); white-space:nowrap}
.table-plain td:first-child{background:#fff; font-weight:400; color:var(--ink-2); white-space:normal}

.dl-row{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-l); padding:var(--sp-4) var(--sp-5)
}

.side-nav{border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden}
.side-nav b{display:block; background:var(--bg-2); padding:var(--sp-3) var(--sp-4); font-size:var(--fs-3); border-bottom:1px solid var(--line)}
.side-nav a{display:block; padding:11px var(--sp-4); font-size:var(--fs-3); color:var(--ink-2); border-bottom:1px solid var(--line-2)}
.side-nav a:last-child{border-bottom:none}
.side-nav a:hover,.side-nav a.on{background:var(--brand-l); color:var(--brand-d); font-weight:600}

/* ---------- 特性 / FAQ / CTA ---------- */
.feat{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5)}
.feat-i b{display:block; font-size:var(--fs-4); margin-bottom:var(--sp-2)}
.feat-i p{font-size:var(--fs-3); color:var(--ink-2); margin:0}
.feat-n{
  width:36px; height:36px; border-radius:50%; background:var(--brand-l); color:var(--brand-d);
  display:flex; align-items:center; justify-content:center; font-size:var(--fs-3); font-weight:700; margin-bottom:var(--sp-3)
}

.faq{max-width:800px; margin:0 auto}
.faq details{border:1px solid var(--line); border-radius:var(--r-l); margin-bottom:var(--sp-3); background:#fff}
.faq summary{padding:var(--sp-4) var(--sp-5); font-weight:600; font-size:var(--fs-4); cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:var(--sp-4)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--brand); font-weight:400; font-size:var(--fs-6); line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq .a{padding:0 var(--sp-5) var(--sp-4); color:var(--ink-2); font-size:var(--fs-3)}

.cta{background:var(--ink); color:#fff; border-radius:var(--r-l); padding:var(--sp-8) var(--sp-7); text-align:center}
.cta h2{font-size:var(--fs-7); margin-bottom:var(--sp-3)}
.cta p{color:#c6d4e0; margin:0 auto var(--sp-6); max-width:58ch}
.cta .btn-row{justify-content:center}

/* ---------- 页脚 ---------- */
.ftr{background:var(--ink); color:#9fb3c4; font-size:var(--fs-3); padding:var(--sp-8) 0 0; margin-top:var(--sp-9)}
.ftr-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:var(--sp-6)}
.ftr h4{color:#fff; font-size:var(--fs-3); letter-spacing:.1em; text-transform:uppercase; margin-bottom:var(--sp-4)}
.ftr a{color:#9fb3c4; display:block; margin-bottom:9px}
.ftr a:hover{color:#fff}
.ftr .brand b{color:#fff}
.ftr .brand span{color:#7f93a5}
.ftr address{font-style:normal; line-height:1.9}
.ftr-btm{border-top:1px solid rgba(255,255,255,.12); margin-top:var(--sp-7); padding:var(--sp-5) 0; font-size:var(--fs-2); display:flex; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap}

.float{
  position:fixed; right:20px; bottom:20px; z-index:60;
  display:inline-flex; align-items:center; gap:var(--sp-2);
  background:var(--brand); color:#fff; padding:13px 20px; border-radius:100px;
  font-size:var(--fs-3); font-weight:600; box-shadow:var(--sh-l)
}
.float:hover{background:var(--brand-d); color:#fff}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .feat,.hero-pts{grid-template-columns:repeat(2,1fr)}
  .pdp{grid-template-columns:1fr; gap:var(--sp-6)}
  .ftr-grid{grid-template-columns:repeat(2,1fr)}
  .mega-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  :root{--fs-8:1.75rem; --fs-9:2.125rem; --fs-7:1.5rem; --sp-9:56px}
  .burger{display:block}
  .nav{
    display:none; position:absolute; left:0; right:0; top:76px; background:#fff;
    flex-direction:column; align-items:stretch; padding:var(--sp-3);
    border-bottom:1px solid var(--line); box-shadow:var(--sh-l)
  }
  .nav.open{display:flex}
  .mega{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; padding:0 0 var(--sp-3); display:none}
  .has-mega.open .mega{display:block}
  .mega-grid{grid-template-columns:1fr; padding:0; gap:var(--sp-2)}
  .mega-foot{padding-left:0; padding-right:0}
  .g-2,.g-3,.g-4,.feat,.hero-pts{grid-template-columns:1fr}
  .grid.g-4,.grid.g-3{gap:var(--sp-4)}
  .hero-pts{gap:var(--sp-5)}
  .ftr-grid{grid-template-columns:1fr}
  .cta{padding:var(--sp-7) var(--sp-5)}
  .float{padding:12px 16px; right:14px; bottom:14px}
}
@media (max-width:520px){
  .g-4,.grid.g-4{grid-template-columns:repeat(2,1fr)}
  .card-b{padding:var(--sp-3) var(--sp-4) var(--sp-4)}
  .card-b h3{font-size:var(--fs-3)}
  .card-b p{display:none}
}