/* ==========================================================
   洪辉五金电器贸易部 · 方向C「画册杂志」
   摄影 + 留白 + 宋体大字 + 图注式排版
   ========================================================== */
:root{
  --ink:#0a3764;
  --ink-deep:#072a4e;
  --ink-ink:#062240;
  --paper:#faf9f7;
  --white:#ffffff;
  --cap:#5c6b7a;
  --cap-light:rgba(255,255,255,.62);
  --hairline:rgba(10,55,100,.16);
  --hairline-strong:rgba(10,55,100,.85);
  --hairline-dark:rgba(255,255,255,.16);
  --pad-x:clamp(20px,4.6vw,64px);
  --maxw:1400px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden;overflow-x:clip}
body{
  font-family:'Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  font-weight:400;
  background:var(--paper);
  color:#2c3a49;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
body.lock{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:none;cursor:pointer;color:inherit}
.serif{font-family:'Noto Serif SC','Songti SC','SimSun',serif}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}
.ico{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- 渐显动画（仅 transform/opacity，尊重 reduced-motion） ---------- */
html.js .rv{opacity:0;transform:translateY(26px);transition:opacity .85s ease,transform .85s ease}
html.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  html.js .rv{opacity:1;transform:none;transition:none}
  .slide,.slide .hero-copy,.hero-img{transition:none !important;animation:none !important}
}

/* ================= 导航 ================= */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;height:76px;color:#fff;transition:background .35s ease,color .35s ease,box-shadow .35s ease}
.nav.on{background:var(--white);color:var(--ink);box-shadow:0 1px 0 var(--hairline)}
.nav-in{max-width:var(--maxw);margin:0 auto;height:100%;display:flex;align-items:center;gap:1.2rem;padding:0 var(--pad-x)}
.brand{display:flex;align-items:center;flex:none;margin-right:auto}
.brand .logo-w,.brand .logo-c{height:44px;width:auto;max-width:176px;object-fit:contain}
.brand .logo-c{display:none}
.nav.on .brand .logo-w{display:none}
.nav.on .brand .logo-c{display:block}
.nlinks{display:flex;align-items:center;gap:.15rem}
.nlink{position:relative;display:inline-flex;align-items:center;gap:.35rem;padding:.55rem .8rem;font-size:.94rem;font-weight:500;letter-spacing:.05em;white-space:nowrap}
.nlink::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.15rem;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.nlink:hover::after,.nlink.active::after{transform:scaleX(1)}
.dd{position:relative}
.dd-panel{position:absolute;top:calc(100% + 10px);left:0;min-width:216px;background:var(--white);border:1px solid var(--hairline);box-shadow:0 24px 56px rgba(7,42,78,.14);padding:.5rem;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease,visibility .25s;z-index:60}
.dd:hover .dd-panel,.dd:focus-within .dd-panel{opacity:1;visibility:visible;transform:translateY(0)}
.dd-panel a,.dd-panel .lang-opt{display:block;width:100%;text-align:left;padding:.6rem .85rem;color:#2c3a49;font-size:.92rem;transition:background .2s ease,color .2s ease}
.dd-panel a:hover,.dd-panel .lang-opt:hover{background:var(--ink);color:#fff}
.dd-panel .lang-opt.active{background:var(--ink);color:#fff}
.dd-right{left:auto;right:0;min-width:150px}
.lang-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .75rem;font-size:.9rem;letter-spacing:.04em;white-space:nowrap}
.nav-tel{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .2rem .55rem .9rem;font-size:.94rem;font-weight:600;letter-spacing:.05em;white-space:nowrap;border-left:1px solid currentColor;margin-left:.3rem}
.nav.on .nav-tel{border-color:var(--hairline)}
.mmenu-btn{display:none;align-items:center;justify-content:center;width:44px;height:44px}
.mmenu-btn svg{width:24px;height:24px}

/* 移动端菜单 */
.mmenu{position:fixed;inset:0;z-index:95;background:var(--ink-deep);color:#fff;transform:translateX(103%);transition:transform .38s ease;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mmenu.open{transform:translateX(0)}
.mmenu-head{display:flex;align-items:center;justify-content:space-between;padding:18px var(--pad-x)}
.mmenu-head img{height:40px;width:auto}
.mmenu-close{width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.mmenu-close svg{width:24px;height:24px}
.mmenu-body{padding:1.2rem var(--pad-x) 3rem}
.mmenu-body > a{display:block;padding:.85rem 0;font-size:1.12rem;font-weight:500;letter-spacing:.06em;border-bottom:1px solid var(--hairline-dark)}
.mmenu-sub{padding:.15rem 0 .6rem 1.1rem;border-bottom:1px solid var(--hairline-dark)}
.mmenu-sub a{display:block;padding:.4rem 0;font-size:.95rem;color:var(--cap-light)}
.mmenu-langs{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:1.6rem 0}
.mmenu-langs .lang-opt{padding:.65rem .3rem;border:1px solid var(--hairline-dark);font-size:.9rem;color:#fff;text-align:center;letter-spacing:.04em}
.mmenu-langs .lang-opt.active{background:#fff;color:var(--ink);border-color:#fff}
.mmenu-tel{border-top:1px solid var(--hairline-dark);padding-top:1.3rem}
.mmenu-tel .lb{font-size:.8rem;letter-spacing:.18em;color:var(--cap-light)}
.mmenu-tel .no{font-family:'Noto Serif SC',serif;font-size:1.5rem;font-weight:700;margin:.2rem 0 .1rem}
.mmenu-tel .hr{font-size:.85rem;color:var(--cap-light)}

/* ================= 首屏（全幅出血大图） ================= */
.hero{position:relative;height:100vh;height:100svh;min-height:600px;max-height:1080px;overflow:hidden;background:var(--ink-ink)}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1s ease,visibility 1s ease}
.slide.on{opacity:1;visibility:visible;z-index:2}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,34,64,.82) 0%,rgba(6,34,64,.34) 34%,rgba(6,34,64,0) 58%)}
.hero-copy{position:absolute;left:0;right:0;bottom:0;color:#fff;padding:0 var(--pad-x) clamp(96px,14vh,140px);max-width:var(--maxw);opacity:0;transform:translateY(26px);transition:opacity .9s ease .3s,transform .9s ease .3s}
.slide.on .hero-copy{opacity:1;transform:none}
.hero-kicker{display:flex;align-items:center;gap:.9rem;font-size:.88rem;letter-spacing:.22em;color:var(--cap-light);margin-bottom:1.1rem}
.hero-kicker::before{content:"";width:44px;height:1px;background:rgba(255,255,255,.5)}
.hero h1{font-family:'Noto Serif SC','Songti SC',serif;font-weight:900;font-size:clamp(2.35rem,6vw,4.9rem);line-height:1.18;letter-spacing:.02em;margin-bottom:1.1rem;text-wrap:balance}
.hero-desc{max-width:600px;font-size:clamp(.95rem,1.3vw,1.08rem);font-weight:300;color:rgba(255,255,255,.88);margin-bottom:1.9rem}
.hero-acts{display:flex;flex-wrap:wrap;gap:.9rem}
.lnk{display:inline-flex;align-items:center;gap:.55rem;padding:.78rem 1.9rem;font-size:.95rem;font-weight:500;letter-spacing:.08em;border:1px solid transparent;transition:background .25s ease,color .25s ease,border-color .25s ease}
.lnk-solid{background:#fff;color:var(--ink)}
.lnk-solid:hover{background:transparent;color:#fff;border-color:#fff}
.lnk-ghost{border-color:rgba(255,255,255,.65);color:#fff}
.lnk-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.hero-index{position:absolute;right:var(--pad-x);bottom:clamp(38px,6.5vh,60px);z-index:5;display:flex;align-items:baseline;gap:1.5rem}
.hero-index button{font-family:'Noto Serif SC',serif;font-size:1rem;color:rgba(255,255,255,.55);padding:.2rem .1rem .5rem;position:relative;letter-spacing:.08em;transition:color .3s ease}
.hero-index button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.hero-index button.on{color:#fff}
.hero-index button.on::after{transform:scaleX(1)}

/* ================= 数据条（刊头） ================= */
.stats{background:#fff;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:clamp(1.9rem,3.4vw,3rem) clamp(1rem,2.4vw,2.4rem);border-left:1px solid var(--hairline)}
.stat:first-child{border-left:none;padding-left:0}
.stat .num{font-family:'Noto Serif SC',serif;font-weight:700;font-size:clamp(2.2rem,3.8vw,3.4rem);line-height:1.1;color:var(--ink)}
.stat .num sup{font-size:.45em;font-weight:600;margin-left:.1em}
.stat .lb{margin-top:.45rem;font-size:.88rem;letter-spacing:.14em;color:var(--cap)}

/* ================= 章节头（杂志版式） ================= */
.sec{padding:clamp(72px,10vw,128px) 0}
.sec-head{border-top:1px solid var(--hairline-strong);padding-top:1.15rem;margin-bottom:clamp(2.4rem,5vw,4.2rem);display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.kicker{display:block;font-size:.85rem;letter-spacing:.3em;color:var(--cap);margin-bottom:.7rem}
.sec-head h2{font-family:'Noto Serif SC','Songti SC',serif;font-weight:700;font-size:clamp(1.85rem,3.4vw,2.85rem);line-height:1.25;color:var(--ink);letter-spacing:.03em}
.sec-head .aside{max-width:430px;text-align:right}
.sec-head .aside p{font-size:.92rem;color:var(--cap)}
.alink{display:inline-flex;align-items:center;gap:.45rem;margin-top:.55rem;font-size:.92rem;font-weight:600;color:var(--ink);letter-spacing:.06em;border-bottom:1px solid var(--ink);padding-bottom:.15rem;transition:opacity .25s ease}
.alink:hover{opacity:.72}
.alink svg{width:.9em;height:.9em}

/* ================= 产品图鉴（非对称拼贴） ================= */
.pgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2.2vw,30px)}
.ptile{display:block}
.ph{position:relative;overflow:hidden;background:#e9e6e0}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease,opacity .4s ease}
.ptile:hover .ph img{transform:scale(1.045)}
.ptile.dq{grid-column:1/8}
.ptile.dq .ph{height:clamp(300px,42vw,620px)}
.ptile.zm{grid-column:8/13}
.ptile.zm .ph{height:clamp(300px,42vw,620px)}
.ptile.wj{grid-column:1/5}
.ptile.fs{grid-column:5/9}
.ptile.gj{grid-column:9/13}
.ptile.wj .ph,.ptile.fs .ph,.ptile.gj .ph{height:clamp(200px,24vw,340px)}
.ptile.xc{grid-column:1/13}
.ptile.xc .ph{height:clamp(220px,27vw,400px)}
.ph-ov{position:absolute;left:0;right:0;bottom:0;padding:3rem 1.5rem 1.35rem;color:#fff;background:linear-gradient(to top,rgba(6,34,64,.78),rgba(6,34,64,0))}
.ph-ov h3{font-family:'Noto Serif SC',serif;font-weight:700;font-size:clamp(1.3rem,2.2vw,1.8rem);letter-spacing:.04em}
.ph-ov .b{font-size:.88rem;color:rgba(255,255,255,.82);margin-top:.15rem;letter-spacing:.06em}
.pcap{padding-top:.85rem}
.pcap::before{content:"";display:block;width:30px;height:1px;background:var(--ink);opacity:.45;margin-bottom:.7rem}
.pcap .t{display:flex;align-items:baseline;gap:.65rem}
.pcap .no{font-family:'Noto Serif SC',serif;font-weight:700;font-size:1rem;color:var(--ink);opacity:.55}
.pcap h3{font-family:'Noto Serif SC',serif;font-weight:700;font-size:1.16rem;color:var(--ink);letter-spacing:.05em}
.pcap .b{font-size:.86rem;color:var(--cap);letter-spacing:.08em;margin-top:.15rem}
.pcap .d{font-size:.88rem;color:#71808f;margin-top:.25rem}
.ptile:hover .pcap h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* ================= 仓储与实力（跨页） ================= */
.co{background:#fff;border-top:1px solid var(--hairline)}
.co-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,56px);align-items:start}
.co-photo{grid-column:1/6;margin-left:calc(-1 * var(--pad-x))}
.co-photo .ph{aspect-ratio:3/4;max-height:820px}
.co-photo .ph img{height:100%}
.co-cap{margin-top:.8rem;font-size:.85rem;letter-spacing:.12em;color:var(--cap);display:flex;align-items:center;gap:.7rem}
.co-cap::before{content:"";width:26px;height:1px;background:var(--ink);opacity:.45}
.co-text{grid-column:6/13;padding-top:.4rem}
.co-text h2{font-family:'Noto Serif SC',serif;font-weight:700;font-size:clamp(1.8rem,3.2vw,2.7rem);color:var(--ink);line-height:1.3;letter-spacing:.03em;margin:.4rem 0 1.4rem}
.co-text .p{font-size:.98rem;color:#3d4c5c;max-width:620px}
.co-text .p + .p{margin-top:.9rem}
.adv{margin-top:2.2rem;border-top:1px solid var(--hairline)}
.adv li{list-style:none;display:grid;grid-template-columns:52px 1fr;gap:1.1rem;padding:1.05rem 0;border-bottom:1px solid var(--hairline)}
.adv .no{font-family:'Noto Serif SC',serif;font-weight:700;font-size:1.15rem;color:var(--ink);opacity:.6;line-height:1.9}
.adv h4{font-size:1.02rem;font-weight:700;color:var(--ink);letter-spacing:.06em}
.adv p{font-size:.9rem;color:var(--cap);margin-top:.1rem}
/* 工地跨页大图 */
.field{position:relative;height:clamp(320px,52vh,560px);overflow:hidden;margin-top:clamp(64px,8vw,110px)}
.field img{width:100%;height:100%;object-fit:cover}
.field-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,34,64,.72),rgba(6,34,64,0) 45%)}
.field-cap{position:absolute;left:0;bottom:0;color:#fff;padding:0 var(--pad-x) clamp(1.6rem,4vw,2.8rem);max-width:var(--maxw);margin:0 auto;right:0}
.field-cap .k{font-size:.82rem;letter-spacing:.28em;color:var(--cap-light);margin-bottom:.4rem}
.field-cap h3{font-family:'Noto Serif SC',serif;font-weight:700;font-size:clamp(1.25rem,2.4vw,1.9rem);letter-spacing:.05em}
.field-cap .d{font-size:.9rem;color:rgba(255,255,255,.82);margin-top:.3rem}

/* ================= 荣誉档案 ================= */
.hgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px)}
.hcard{background:#fff;border:1px solid var(--hairline);transition:box-shadow .3s ease}
.hcard:hover{box-shadow:0 18px 44px rgba(7,42,78,.12)}
.hcard .ph{aspect-ratio:1/1}
.hbody{border-top:1px solid var(--hairline);padding:1rem 1.15rem 1.25rem}
.hbody .row{display:flex;align-items:baseline;gap:.6rem}
.hbody .no{font-family:'Noto Serif SC',serif;font-weight:700;font-size:.95rem;color:var(--ink);opacity:.5}
.hbody h3{font-family:'Noto Serif SC',serif;font-weight:700;font-size:1.08rem;color:var(--ink);letter-spacing:.05em}
.hbody .s{font-size:.86rem;color:var(--cap);margin-top:.2rem;letter-spacing:.06em}

/* ================= 客户名录（深蓝章节） ================= */
.clients{background:var(--ink);color:#fff}
.clients .sec-head{border-top-color:rgba(255,255,255,.65)}
.clients .kicker{color:var(--cap-light)}
.clients .sec-head h2{color:#fff}
.clients .aside p{color:var(--cap-light)}
.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0 clamp(18px,3vw,48px)}
.citem{display:flex;align-items:baseline;gap:.9rem;padding:1.05rem .2rem;border-top:1px solid var(--hairline-dark)}
.citem .no{font-family:'Noto Serif SC',serif;font-size:.85rem;color:var(--cap-light);letter-spacing:.1em}
.citem .nm{font-family:'Noto Serif SC',serif;font-weight:600;font-size:1.06rem;letter-spacing:.08em;color:rgba(255,255,255,.92)}

/* ================= 新闻（特稿版式） ================= */
.news{background:var(--paper)}
.ngrid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(18px,2.6vw,40px)}
.nfeature{grid-column:1/8}
.nfeature .ph{aspect-ratio:16/10}
.nside{grid-column:8/13;display:flex;flex-direction:column;justify-content:space-between;gap:1.2rem}
.nitem{display:grid;grid-template-columns:150px 1fr;gap:1.1rem;align-items:start;padding:1.1rem 0;border-top:1px solid var(--hairline)}
.nitem .ph{aspect-ratio:4/3}
.nmeta{display:flex;align-items:center;gap:.9rem;margin:.55rem 0 .35rem;font-size:.83rem;color:var(--cap)}
.nmeta time{font-family:'Noto Serif SC',serif;font-weight:600;letter-spacing:.08em}
.ntag{border:1px solid var(--hairline);color:var(--ink);padding:.05rem .55rem;font-size:.75rem;letter-spacing:.1em}
.nfeature h3,.nitem h3{font-family:'Noto Serif SC',serif;font-weight:700;color:var(--ink);letter-spacing:.03em;line-height:1.5}
.nfeature h3{font-size:clamp(1.3rem,2.2vw,1.8rem);margin-top:.9rem}
.nitem h3{font-size:1.02rem}
.nfeature .x,.nitem .x{font-size:.9rem;color:#71808f;margin-top:.4rem}
.nfeature:hover h3,.nitem:hover h3,.ptile:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* ================= 页脚 ================= */
footer{background:var(--ink-ink);color:#fff}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:clamp(2rem,4vw,4rem);padding:clamp(3.5rem,6vw,5.5rem) 0 clamp(2.5rem,4vw,4rem)}
.f-brand img{height:46px;width:auto;margin-bottom:1.3rem}
.f-brand p{font-size:.9rem;color:var(--cap-light);max-width:340px}
.f-social{display:flex;gap:.7rem;margin-top:1.4rem}
.f-social a{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .95rem;border:1px solid var(--hairline-dark);font-size:.85rem;color:rgba(255,255,255,.85);transition:background .25s ease,color .25s ease}
.f-social a:hover{background:#fff;color:var(--ink-ink)}
.f-h{font-size:.8rem;letter-spacing:.26em;color:var(--cap-light);margin-bottom:1.4rem}
.f-links li{list-style:none;margin-bottom:.75rem}
.f-links a{font-size:.93rem;color:rgba(255,255,255,.85);transition:color .2s ease}
.f-links a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.f-contact li{list-style:none;display:flex;gap:.7rem;align-items:flex-start;font-size:.9rem;color:rgba(255,255,255,.85);margin-bottom:.9rem;line-height:1.6}
.f-contact .ico{margin-top:.35rem;color:var(--cap-light)}
.f-qr{margin-top:1.4rem;display:flex;align-items:center;gap:1rem}
.f-qr .qrbox{width:104px;height:104px;background:#fff;padding:7px;flex:none}
.f-qr .qrbox img{width:100%;height:100%;object-fit:contain}
.f-qr p{font-size:.78rem;color:var(--cap-light);letter-spacing:.08em}
.f-bottom{border-top:1px solid var(--hairline-dark);padding:1.4rem 0 1.6rem}
.f-bottom .in{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.83rem;color:var(--cap-light)}

/* ================= 响应式 ================= */
@media (max-width:1200px){
  .nav-tel{display:none}
}
@media (max-width:1024px){
  .nlinks{display:none}
  .nav-lang-desktop{display:none}
  .mmenu-btn{display:flex}
  .ptile.dq{grid-column:1/7}
  .ptile.zm{grid-column:7/13}
  .ptile.wj{grid-column:1/7}
  .ptile.fs{grid-column:7/13}
  .ptile.gj{grid-column:1/13}
  .ptile.xc{grid-column:1/13}
  .co-photo{grid-column:1/13;margin-left:calc(-1 * var(--pad-x))}
  .co-photo .ph{aspect-ratio:4/3;max-height:560px}
  .co-text{grid-column:1/13}
  .hgrid{grid-template-columns:repeat(2,1fr)}
  .cgrid{grid-template-columns:repeat(2,1fr)}
  .nfeature{grid-column:1/13}
  .nside{grid-column:1/13}
}
@media (max-width:640px){
  .hero{min-height:560px}
  .hero-copy{padding-bottom:clamp(120px,22vh,150px)}
  .hero-index{bottom:clamp(28px,5vh,44px);gap:1.1rem}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat{padding:1.4rem 1.2rem}
  .stat:nth-child(odd){border-left:none;padding-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--hairline)}
  .sec-head .aside{text-align:left}
  .pgrid{gap:18px}
  .ptile.dq,.ptile.zm,.ptile.wj,.ptile.fs,.ptile.gj,.ptile.xc{grid-column:1/13}
  .ptile.dq .ph,.ptile.zm .ph{height:min(64vw,420px)}
  .ptile.wj .ph,.ptile.fs .ph,.ptile.gj .ph{height:min(52vw,320px)}
  .ptile.xc .ph{height:min(50vw,300px)}
  .hgrid{grid-template-columns:repeat(2,1fr);gap:12px}
  .cgrid{grid-template-columns:repeat(2,1fr)}
  .nitem{grid-template-columns:118px 1fr}
  .f-grid{grid-template-columns:1fr;gap:2.2rem}
  .hero-acts .lnk{padding:.7rem 1.4rem}
}
/* ================= 内页扉页 ================= */
.page-hero{position:relative;height:clamp(320px,48vh,520px);overflow:hidden;background:var(--ink-ink)}
.page-hero .hero-scrim{background:linear-gradient(to top,rgba(6,34,64,.82),rgba(6,34,64,.22) 55%,rgba(6,34,64,0))}
.page-hero-copy{position:absolute;left:0;right:0;bottom:0;max-width:var(--maxw);margin:0 auto;color:#fff;padding:0 var(--pad-x) clamp(2rem,5vw,3.2rem)}
.page-hero .kicker{color:var(--cap-light)}
.page-hero h1{font-family:'Noto Serif SC','Songti SC',serif;font-weight:900;font-size:clamp(2rem,4.6vw,3.6rem);letter-spacing:.03em;line-height:1.25}
.page-hero .d{margin-top:.7rem;font-size:.95rem;color:rgba(255,255,255,.85);max-width:620px}

/* ================= 分类筛选 ================= */
.filters{display:flex;flex-wrap:wrap;gap:.6rem .8rem;margin-bottom:1.4rem}
.fbtn{display:inline-flex;align-items:baseline;gap:.5rem;padding:.55rem 1.15rem;border:1px solid var(--hairline);background:#fff;font-size:.92rem;color:#3d4c5c;letter-spacing:.05em;transition:background .25s ease,color .25s ease,border-color .25s ease}
.fbtn .no{font-family:'Noto Serif SC',serif;font-size:.8rem;opacity:.5}
.fbtn:hover{border-color:var(--ink);color:var(--ink)}
.fbtn.on{background:var(--ink);border-color:var(--ink);color:#fff}
.fbtn.on .no{opacity:.7}
.fcount{font-size:.86rem;color:var(--cap);letter-spacing:.1em;margin-bottom:1.8rem}

/* ================= 产品图鉴卡 ================= */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)}
.pcard{display:block;background:#fff;border:1px solid var(--hairline);transition:box-shadow .3s ease,transform .3s ease}
.pcard:hover{box-shadow:0 18px 44px rgba(7,42,78,.12);transform:translateY(-3px)}
.pcard .ph{aspect-ratio:4/3;overflow:hidden;background:#e9e6e0}
.pcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.pcard:hover .ph img{transform:scale(1.05)}
.pcard .bd{padding:.95rem 1.1rem 1.15rem;border-top:1px solid var(--hairline)}
.pcard .no{font-family:'Noto Serif SC',serif;font-size:.82rem;color:var(--ink);opacity:.45;letter-spacing:.1em}
.pcard h3{font-family:'Noto Serif SC',serif;font-weight:700;font-size:1.05rem;color:var(--ink);margin-top:.15rem;letter-spacing:.03em}
.pcard .bname{font-size:.83rem;color:var(--cap);margin-top:.2rem;letter-spacing:.08em}
.pcard .cat{display:inline-block;margin-top:.6rem;font-size:.74rem;color:var(--ink);border:1px solid var(--hairline);padding:.05rem .5rem;letter-spacing:.1em}
.empty{border:1px dashed var(--hairline);padding:3rem 2rem;text-align:center;color:var(--cap);font-size:.95rem;letter-spacing:.06em}

/* ================= 历程时间线 ================= */
.timeline{border-top:1px solid var(--hairline-strong)}
.tl{display:grid;grid-template-columns:170px 1fr;gap:clamp(1.2rem,4vw,3rem);padding:1.7rem 0;border-bottom:1px solid var(--hairline);align-items:baseline}
.tl .no{font-family:'Noto Serif SC',serif;font-weight:700;font-size:clamp(1.5rem,2.8vw,2.2rem);color:var(--ink);opacity:.85}
.tl h3{font-family:'Noto Serif SC',serif;font-weight:700;font-size:1.18rem;color:var(--ink);letter-spacing:.04em}
.tl p{font-size:.93rem;color:#5c6b7a;margin-top:.35rem;max-width:38em}

/* ================= 企业文化 ================= */
.cul-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,30px)}
.cul .ph{aspect-ratio:3/2;overflow:hidden;background:#e9e6e0}
.cul .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.cul:hover .ph img{transform:scale(1.04)}
.cul .pcap{padding-top:.85rem}
.cul .pcap::before{content:"";display:block;width:30px;height:1px;background:var(--ink);opacity:.45;margin-bottom:.7rem}
.cul .t{display:flex;align-items:baseline;gap:.65rem}
.cul .no{font-family:'Noto Serif SC',serif;font-weight:700;font-size:1rem;color:var(--ink);opacity:.55}
.cul h3{font-family:'Noto Serif SC',serif;font-weight:700;font-size:1.16rem;color:var(--ink);letter-spacing:.05em}
.cul .d{font-size:.88rem;color:#71808f;margin-top:.3rem;max-width:30em}

/* ================= 下载档案 ================= */
.dl-list{border-top:1px solid var(--hairline-strong)}
.dl-row{display:grid;grid-template-columns:64px 1fr auto auto;gap:1.2rem;align-items:center;padding:1.3rem 0;border-bottom:1px solid var(--hairline)}
.dl-row .no{font-family:'Noto Serif SC',serif;font-weight:700;font-size:1.05rem;color:var(--ink);opacity:.5}
.dl-row h3{font-family:'Noto Serif SC',serif;font-weight:700;font-size:1.08rem;color:var(--ink);letter-spacing:.03em}
.dl-row .fmt{font-size:.74rem;letter-spacing:.14em;color:var(--ink);border:1px solid var(--hairline);padding:.1rem .55rem}
.dl-row .act{display:inline-flex;align-items:center;gap:.45rem;font-size:.9rem;font-weight:600;color:var(--ink);letter-spacing:.06em;border-bottom:1px solid var(--ink);padding-bottom:.12rem;transition:opacity .25s ease;white-space:nowrap}
.dl-row .act:hover{opacity:.7}
.dl-row .act svg{width:.9em;height:.9em}

/* ================= 联系页 ================= */
.cgrid2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,24px)}
.ccell{background:#fff;border:1px solid var(--hairline);padding:1.5rem 1.7rem}
.ccell .k{font-size:.78rem;letter-spacing:.26em;color:var(--cap);margin-bottom:.65rem}
.ccell .v{font-family:'Noto Serif SC',serif;font-weight:700;font-size:1.12rem;color:var(--ink);letter-spacing:.03em;line-height:1.65}
.ccell .v a:hover{text-decoration:underline;text-underline-offset:4px}
.trans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,30px)}
.tcell{border-top:1px solid var(--hairline-strong);padding-top:1.05rem}
.tcell .ico{width:1.35rem;height:1.35rem;color:var(--ink)}
.tcell h4{font-family:'Noto Serif SC',serif;font-weight:700;font-size:1.05rem;color:var(--ink);margin:.55rem 0 .3rem;letter-spacing:.05em}
.tcell p{font-size:.9rem;color:#5c6b7a;line-height:1.75}
.qr-strip{display:flex;align-items:center;gap:1.3rem;background:#fff;border:1px solid var(--hairline);padding:1.2rem 1.4rem;max-width:560px}
.qr-strip .qrbox{width:112px;height:112px;background:#fff;border:1px solid var(--hairline);padding:8px;flex:none}
.qr-strip .qrbox img{width:100%;height:100%;object-fit:contain}
.qr-strip h4{font-family:'Noto Serif SC',serif;font-weight:700;font-size:1.02rem;color:var(--ink);letter-spacing:.04em}
.qr-strip p{font-size:.84rem;color:var(--cap);margin-top:.25rem}
.jobs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,30px)}
.job{background:#fff;border:1px solid var(--hairline);padding:1.5rem 1.6rem;transition:box-shadow .3s ease}
.job:hover{box-shadow:0 18px 44px rgba(7,42,78,.1)}
.job .row{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;flex-wrap:wrap}
.job h3{font-family:'Noto Serif SC',serif;font-weight:700;font-size:1.12rem;color:var(--ink);letter-spacing:.04em}
.job .sal{font-size:.78rem;color:var(--ink);border:1px solid var(--hairline);padding:.08rem .55rem;letter-spacing:.08em;white-space:nowrap}
.job p{font-size:.88rem;color:#5c6b7a;margin-top:.65rem;line-height:1.75}
.job .alink{margin-top:1.05rem}
.perks{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.perks span{font-size:.82rem;letter-spacing:.12em;color:var(--ink);border:1px solid var(--hairline);padding:.35rem .9rem;background:#fff}

/* ================= 深蓝 CTA 段 ================= */
.cta-band{background:var(--ink);color:#fff}
.cta-band .in{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;padding:clamp(2.6rem,5vw,4rem) var(--pad-x)}
.cta-band h2{font-family:'Noto Serif SC',serif;font-weight:700;font-size:clamp(1.5rem,2.8vw,2.2rem);letter-spacing:.04em}
.cta-band p{color:var(--cap-light);margin-top:.4rem;font-size:.95rem;max-width:520px}
.cta-band .acts{display:flex;gap:.9rem;flex-wrap:wrap}
.cta-band .lnk-solid{background:#fff;color:var(--ink)}
.cta-band .lnk-solid:hover{background:transparent;color:#fff;border-color:#fff}
.cta-band .lnk-ghost{border-color:rgba(255,255,255,.65);color:#fff}
.cta-band .lnk-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}

/* ================= toast ================= */
.toast{position:fixed;left:50%;bottom:2.4rem;transform:translateX(-50%) translateY(20px);background:var(--ink-ink);color:#fff;padding:.85rem 1.6rem;font-size:.9rem;letter-spacing:.04em;opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease;z-index:120;box-shadow:0 18px 44px rgba(6,34,64,.4);max-width:min(90vw,480px);text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ================= 内页响应式 ================= */
@media (max-width:1024px){
  .prod-grid{grid-template-columns:repeat(3,1fr)}
  .jobs{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .tl{grid-template-columns:84px 1fr;gap:1rem;padding:1.3rem 0}
  .cul-grid,.trans,.jobs,.cgrid2{grid-template-columns:1fr}
  .dl-row{grid-template-columns:40px 1fr auto;gap:.8rem}
  .dl-row .fmt{display:none}
  .qr-strip{flex-direction:column;text-align:center}
  .cta-band .in{flex-direction:column;align-items:flex-start}
}

/* ================= 帮助中心 FAQ ================= */
.faq-group{margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.faq-group:first-of-type{margin-top:0}
.faq-group .gk{font-size:.8rem;letter-spacing:.26em;color:var(--cap);margin-bottom:.5rem}
.faq{border-top:1px solid var(--hairline-strong)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{display:grid;grid-template-columns:46px 1fr 16px;gap:1rem;align-items:baseline;padding:1.3rem 0;cursor:pointer;list-style:none;transition:opacity .2s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover h3{opacity:.75}
.faq summary .no{font-family:'Noto Serif SC',serif;font-weight:700;font-size:1rem;color:var(--ink);opacity:.5}
.faq summary h3{font-family:'Noto Serif SC',serif;font-weight:700;font-size:1.08rem;color:var(--ink);letter-spacing:.03em;line-height:1.6}
.faq summary .pm{position:relative;width:14px;height:14px;justify-self:end;align-self:center;flex:none}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;background:var(--ink);left:0;top:6.5px;width:14px;height:1.5px;transition:transform .3s ease,opacity .3s ease}
.faq summary .pm::after{transform:rotate(90deg)}
.faq details[open] summary .pm::after{transform:rotate(0deg);opacity:0}
.faq .ans{padding:0 2rem 1.4rem calc(46px + 1rem)}
.faq .ans p{font-size:.93rem;color:#5c6b7a;line-height:1.9;max-width:46em}
@media (prefers-reduced-motion: no-preference){
  .faq details[open] .ans{animation:faqIn .38s ease}
  @keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}
@media (max-width:640px){
  .faq summary{grid-template-columns:34px 1fr 14px;gap:.7rem;padding:1.1rem 0}
  .faq .ans{padding:0 .5rem 1.2rem 0}
}