/* 禄宪官网 · 设计系统（方向 B：实验室白） */

:root{
  --paper:#F7F5F0;
  --white:#FFFFFF;
  --ink:#15181B;
  --ink2:#41464C;
  --mute:#6E6A60;
  --rule:#E2DED5;
  --rule-soft:#EDEAE3;
  --red:#B7362B;

  --serif:"Songti SC","Noto Serif SC","Source Han Serif SC","STSong",serif;
  --sans:"PingFang SC","Noto Sans SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:"JetBrains Mono","SF Mono",ui-monospace,Menlo,monospace;

  --pad:64px;
  --maxw:1280px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:104px}
body{
  background:var(--white); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%}
a{color:inherit}
::selection{background:#E8DFD2}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* ---------- 页头 ---------- */
.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(1.4) blur(8px);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--rule-soft);
}
.site-head .wrap{display:flex; align-items:center; gap:48px; height:88px}
.brand{display:flex; align-items:center; gap:14px; text-decoration:none}
.brand img{height:28px; width:auto}
.brand__wm{font-family:"Helvetica Neue","Helvetica",Arial,sans-serif; font-size:20px; font-weight:600;
           letter-spacing:-.015em; color:var(--ink); line-height:1;
           border-left:1px solid var(--rule); padding-left:15px; white-space:nowrap}
.nav{display:flex; gap:34px; margin-left:auto}
.nav a{font-size:13.5px; letter-spacing:.06em; color:var(--ink2); text-decoration:none;
       padding:6px 0; border-bottom:1px solid transparent; white-space:nowrap}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink); border-color:var(--ink)}
.lang{font-family:var(--mono); font-size:12px; letter-spacing:.12em; color:var(--mute);
      border-left:1px solid var(--rule); padding-left:22px; display:flex; gap:6px}
.lang a{text-decoration:none; color:var(--mute)}
.lang a:hover{color:var(--ink)}
.lang .on{color:var(--ink)}

/* ---------- 首屏 ---------- */
.hero{display:grid; grid-template-columns:47% 53%; height:calc(100vh - 88px); min-height:640px;
      max-height:840px; overflow:hidden}
.hero__copy{background:var(--paper); border-right:1px solid var(--rule);
            display:flex; flex-direction:column; justify-content:center;
            padding:72px var(--pad) 72px max(calc((100vw - var(--maxw))/2 + var(--pad)), var(--pad))}
.hero__copy h1{font-family:var(--serif); font-size:clamp(38px,4.4vw,62px); font-weight:600;
               line-height:1.3; letter-spacing:.01em}
.hero__copy .sub{font-size:34px; font-weight:400; color:var(--ink2); letter-spacing:.14em;
                 display:block; margin-top:20px; font-family:var(--serif)}
.hero__copy p{margin-top:26px; max-width:420px; color:var(--ink2); line-height:2.05}
.hero__copy p b{color:var(--ink); font-weight:600}
.rule-red{width:46px; height:2px; background:var(--red); margin-top:30px}
.hero__actions{display:flex; align-items:center; gap:32px; margin-top:36px}
.hero__media{position:relative; background:var(--white); overflow:hidden}
.hero__media img{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
                 height:calc(100% - 110px); width:auto; max-width:calc(100% - 80px);
                 object-fit:contain}
.fig-no{position:absolute; left:40px; top:36px; font-family:var(--mono); font-size:11px;
        letter-spacing:.2em; color:var(--mute)}
.fig-cap{position:absolute; left:40px; right:40px; bottom:30px; display:flex; justify-content:space-between;
         font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--mute)}

/* ---------- 基础件 ---------- */
.btn{display:inline-flex; align-items:center; gap:10px; font-size:13.5px; letter-spacing:.08em;
     text-decoration:none; color:var(--ink); padding-bottom:7px; border-bottom:1px solid var(--ink);
     transition:gap .18s ease}
.btn:hover{gap:16px}
.btn--quiet{color:var(--ink2); border-color:transparent}
.btn--quiet:hover{color:var(--ink); border-color:var(--ink)}
.btn--solid{background:var(--ink); color:#fff; border:0; padding:15px 26px; font-size:13.5px;
            letter-spacing:.08em; text-decoration:none; display:inline-block; transition:background .18s}
.btn--solid:hover{background:#000}

.kicker{font-family:var(--mono); font-size:11px; letter-spacing:.22em; color:var(--mute);
        text-transform:uppercase}
.section{padding:96px 0}
.section--paper{background:var(--paper); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:56px}
.sec-head h2{font-family:var(--serif); font-size:clamp(30px,3vw,42px); font-weight:600; line-height:1.35}
.sec-head p{max-width:420px; color:var(--mute); font-size:14px; line-height:1.9}
.sec-head .kicker{margin-bottom:16px; display:block}

/* ---------- 指标条 ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--rule)}
.stats div{padding:38px 0 0; border-left:1px solid var(--rule-soft); padding-left:32px}
.stats div:first-child{border-left:0; padding-left:0}
.stats .n{font-family:var(--mono); font-size:34px; letter-spacing:-.02em; line-height:1}
.stats .n em{font-style:normal; color:var(--red)}
.stats .k{margin-top:12px; font-size:12.5px; color:var(--mute); letter-spacing:.12em}

/* ---------- 产品行 ---------- */
.plist{border-top:1px solid var(--rule)}
.prow{display:grid; grid-template-columns:64px 132px 1fr auto; gap:34px; align-items:center;
      padding:26px 0; border-bottom:1px solid var(--rule); text-decoration:none; transition:background .18s}
.prow:hover{background:var(--paper)}
.prow__no{font-family:var(--mono); font-size:11px; color:var(--mute); letter-spacing:.1em}
.prow__thumb{height:96px; display:flex; align-items:center; justify-content:center; overflow:hidden}
.prow__thumb img{max-height:96px; width:auto; object-fit:contain}
.prow__name{display:block; font-family:var(--serif); font-size:25px; font-weight:600; line-height:1.4}
.prow__meta{display:block; font-size:12.5px; color:var(--mute); letter-spacing:.08em; margin-top:6px}
.prow__tag{font-family:var(--mono); font-size:12px; color:var(--ink2); letter-spacing:.04em;
           white-space:nowrap; padding-left:20px}
.prow:hover .prow__tag{color:var(--red)}

/* ---------- 工序轴 ---------- */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
       border-top:1px solid var(--ink); margin-top:8px}
.step{position:relative; padding:26px 26px 0 0}
.step:before{content:""; position:absolute; left:0; top:-1px; width:1px; height:12px; background:var(--ink)}
.step:after{content:""; position:absolute; left:-3px; top:-4px; width:7px; height:7px;
            background:var(--white); border:1px solid var(--ink); border-radius:50%}
.step .no{font-family:var(--mono); font-size:11px; color:var(--mute); letter-spacing:.16em}
.step h3{font-family:var(--serif); font-size:22px; margin-top:12px; font-weight:600}
.step p{font-size:13px; color:var(--mute); margin-top:10px; line-height:1.95; max-width:220px}
.step .tags{margin-top:16px; display:flex; flex-wrap:wrap; gap:6px}
.step .tags a{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--ink2);
              border:1px solid var(--rule); padding:3px 8px; text-decoration:none}
.step .tags a:hover{border-color:var(--ink); color:var(--ink)}

/* ---------- 客户 ---------- */
.clients{display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--rule)}
.clients div{padding:22px 0; border-bottom:1px solid var(--rule); font-size:14px; color:var(--ink2);
             letter-spacing:.04em}
.clients div:hover{color:var(--ink)}

/* ---------- 向下提示 ---------- */
.hint{display:inline-flex; align-items:center; gap:13px; margin-top:34px;
      font-size:14px; letter-spacing:.06em; color:var(--ink); text-decoration:none}
.hint:hover{color:var(--ink)}
.hint__dot{width:32px; height:32px; flex:none; border:1px solid #C9C2B3; border-radius:50%;
           display:flex; align-items:center; justify-content:center;
           animation:hintBob 2.6s ease-in-out infinite; transition:border-color .2s}
.hint:hover .hint__dot{border-color:var(--ink)}
.hint__dot svg{width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:1.4;
               stroke-linecap:round; stroke-linejoin:round}
@keyframes hintBob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@media (prefers-reduced-motion:reduce){.hint__dot{animation:none}}

/* ---------- 产品详情 ---------- */
.crumb{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--mute);
       padding:32px 0 0}
.crumb a{text-decoration:none; color:var(--mute)}
.crumb a:hover{color:var(--ink)}
.crumb span{margin:0 10px}

.dhero{display:grid; grid-template-columns:50% 50%; gap:0; padding:44px 0 0; align-items:center}
.dhero--half .dhero__media{height:clamp(180px, calc((100vh - 240px) / 2), 310px)}
.dhero__copy{padding-right:64px}
.dhero__copy .model{font-family:var(--mono); font-size:12px; letter-spacing:.16em; color:var(--red)}
.dhero__copy h1{font-family:var(--serif); font-size:clamp(28px,2.9vw,40px); font-weight:600;
                line-height:1.35; margin-top:16px}
.dhero__copy .tag{margin-top:18px; font-family:var(--mono); font-size:13px; letter-spacing:.06em; color:var(--ink2)}
.dhero__copy .intro{margin-top:26px; color:var(--ink2); line-height:2.1; max-width:460px}
.dhero__media{background:var(--white); display:flex; align-items:center; justify-content:center;
              height:clamp(360px, calc(100vh - 240px), 620px); padding:20px; overflow:hidden}
.dhero__media img{height:100%; width:auto; max-width:100%; object-fit:contain}

.highlights{display:grid; grid-template-columns:repeat(2,1fr); gap:0 56px; margin-top:16px}
.highlights div{padding:26px 0; border-top:1px solid var(--rule)}
.highlights h3{font-size:16px; font-weight:600; letter-spacing:.02em}
.highlights p{font-size:13.5px; color:var(--mute); margin-top:8px; line-height:1.95}

.specs{border-top:1px solid var(--ink); margin-top:8px}
.specs dl{display:grid; grid-template-columns:280px 1fr; gap:0}
.specs dt,.specs dd{padding:18px 0; border-bottom:1px solid var(--rule); font-size:14px; line-height:1.8}
.specs dt{color:var(--mute); letter-spacing:.04em}
.specs dd{color:var(--ink); padding-left:24px; border-left:1px solid var(--rule-soft)}
.spec-note{font-size:12.5px; color:var(--mute); margin-top:16px}

.gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:28px; margin-top:8px}
.gallery figure{margin:0}
.gallery img{width:100%; height:230px; object-fit:contain; background:var(--white); padding:14px;
             border:1px solid var(--rule)}
.gallery figcaption{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--mute);
                    margin-top:12px}

.related{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule);
         border:1px solid var(--rule)}
.related a{background:var(--white); padding:26px 24px; text-decoration:none; display:block}
.related a:hover{background:var(--paper)}
.related .m{font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--mute)}
.related .n{font-family:var(--serif); font-size:19px; margin-top:10px; font-weight:600}

/* ---------- 关于 / 客户 / 联系 ---------- */
.prose{max-width:660px}
.prose p{margin-bottom:22px; color:var(--ink2); line-height:2.15}
.prose p:first-child::first-letter{font-family:var(--serif); font-size:44px; float:left;
                                   line-height:.95; margin:6px 12px 0 0; color:var(--ink)}
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.split img{width:100%; aspect-ratio:16/9; object-fit:cover; border:1px solid var(--rule)}
.figrow{display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:56px}
.figrow figure{margin:0}
.figrow img{width:100%; height:260px; object-fit:cover; border:1px solid var(--rule); background:var(--paper)}
.figrow figcaption{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--mute); margin-top:12px}

.reasons{display:grid; grid-template-columns:repeat(3,1fr); gap:48px; margin-top:8px}
.reasons div{border-top:1px solid var(--ink); padding-top:24px}
.reasons h3{font-family:var(--serif); font-size:21px; font-weight:600}
.reasons p{font-size:13.5px; color:var(--mute); margin-top:12px; line-height:2}

.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule);
              border:1px solid var(--rule)}
.contact-card{background:var(--white); padding:44px 40px}
.contact-card .role{font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--mute)}
.contact-card .who{margin-top:18px; font-family:var(--serif); font-size:26px; font-weight:600}
.contact-card .tel{margin-top:14px; font-family:var(--mono); font-size:22px; letter-spacing:.02em;
                   text-decoration:none; display:inline-block}
.contact-card .tel:hover{color:var(--red)}
.addr{margin-top:56px; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:48px}
.addr h3{font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--mute); margin-bottom:14px}
.addr p{font-size:14.5px; line-height:2.1; color:var(--ink2); max-width:420px}

/* ---------- 公众号 ---------- */
.wechat{display:grid; grid-template-columns:auto 1fr; gap:72px; align-items:center; max-width:980px}
.qr{width:240px; height:240px; background:var(--white); border:1px solid var(--rule); padding:14px}
.qr img{width:100%; height:100%; object-fit:contain; display:block}
.qr--pending{border-style:dashed; border-color:#D3CDC0; display:flex; align-items:center;
             justify-content:center; text-align:center; color:var(--mute);
             font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; line-height:2}
.wechat__copy h2{font-family:var(--serif); font-size:clamp(26px,2.6vw,36px); font-weight:600;
                 line-height:1.45; margin-top:14px}
.wechat__copy p{margin-top:18px; color:var(--ink2); line-height:2.05; max-width:440px}
.wechat__copy ul{list-style:none; margin:20px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.wechat__copy li{font-size:12.5px; color:var(--ink2); border:1px solid var(--rule); padding:6px 12px;
                 letter-spacing:.04em}
.wechat__note{font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; color:var(--mute);
              margin-top:24px !important}

/* ---------- 页脚 ---------- */
.site-foot{background:var(--paper); border-top:1px solid var(--rule); padding:64px 0 32px; margin-top:0}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:48px}
.foot-grid img{height:28px; margin-bottom:22px}
.foot-grid p{font-size:13px; color:var(--mute); line-height:2}
.foot-grid h4{font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--mute);
              margin-bottom:16px; font-weight:400}
.foot-grid a{display:block; font-size:13px; color:var(--ink2); text-decoration:none; margin-bottom:9px}
.foot-grid a:hover{color:var(--ink)}
.foot-bottom{display:flex; justify-content:space-between; gap:24px; margin-top:56px; padding-top:24px;
             border-top:1px solid var(--rule); font-family:var(--mono); font-size:10.5px;
             letter-spacing:.12em; color:var(--mute)}

/* ---------- 响应式 ---------- */
@media (max-width:1100px){
  :root{--pad:40px}
  .hero{grid-template-columns:1fr; max-height:none}
  .hero__copy{padding:56px var(--pad)}
  .hero__media{min-height:420px; padding:40px 24px}
  .grid-3,.related{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .clients{grid-template-columns:repeat(3,1fr)}
  .dhero{grid-template-columns:1fr}
  .dhero__copy{padding-right:0}
  .stats{grid-template-columns:repeat(2,1fr); gap:0 32px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  :root{--pad:22px}
  body{font-size:14.5px}
  .site-head .wrap{height:auto; flex-wrap:wrap; padding-top:14px; padding-bottom:8px; gap:0}
  .brand__wm{display:none}
  .lang{margin-left:auto; border-left:0; padding-left:0}
  .nav{order:3; width:100%; margin:12px 0 0; overflow-x:auto; gap:17px; padding-bottom:2px;
       scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{font-size:13px; padding:4px 0}
  .hero__copy h1{font-size:34px}
  .hero__copy .sub{font-size:24px}
  .hero__copy p{font-size:14px}
  .section{padding:64px 0}
  .sec-head{display:block}
  .sec-head p{margin-top:16px}
  .prow{grid-template-columns:40px 1fr; gap:16px; padding:20px 0}
  .prow__thumb{display:none}
  .prow__tag{grid-column:2; padding-left:0; font-size:11px}
  .gallery,.related,.reasons,.split,.figrow,.contact-grid,.addr{grid-template-columns:1fr}
  .wechat{grid-template-columns:1fr; gap:32px; justify-items:start}
  .qr{width:200px; height:200px}
  .specs dl{grid-template-columns:1fr}
  .specs dt{border-bottom:0; padding-bottom:2px; font-size:12.5px}
  .specs dd{padding:0 0 16px; border-left:0}
  .stats{grid-template-columns:1fr 1fr}
  .stats .n{font-size:26px}
  .steps{grid-template-columns:1fr}
  .clients{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr}
  .foot-bottom{display:block; line-height:2.2}
  .gallery img{height:200px}
}