/* 淄博荣腾节能科技有限公司 — 工业蓝图风：图纸灰底 + 深墨蓝 + 能源青绿 */
:root{
  --ink:#16262e;          /* 深墨蓝：来自工程图纸墨线 */
  --ink-2:#3d5560;
  --paper:#f2f0ea;        /* 图纸灰白 */
  --paper-2:#e8e5dc;
  --green:#2e6e5c;        /* 主色：能耗仪表的低饱和青绿 */
  --green-dk:#21523f;
  --line:#c8c3b6;
  --fs-xs:12px; --fs-s:15px; --fs-m:18px; --fs-l:26px; --fs-xl:38px; --fs-hero:56px;
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:24px; --sp6:32px; --sp7:48px; --sp8:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:var(--fs-s);line-height:1.8;
  background-image:repeating-linear-gradient(0deg,transparent,transparent 31px,var(--line) 31px,var(--line) 32px);
  background-image:linear-gradient(rgba(200,195,182,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(200,195,182,.14) 1px,transparent 1px);
  background-size:32px 32px;
}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--sp5)}
h1,h2,h3{font-weight:700;line-height:1.3;letter-spacing:.02em}
h1{font-size:var(--fs-hero)}
h2{font-size:var(--fs-xl);border-left:6px solid var(--green);padding-left:var(--sp4);margin:var(--sp7) 0 var(--sp5)}
h3{font-size:var(--fs-l)}
a{color:var(--green-dk);text-decoration:none;border-bottom:1px solid var(--green)}
a:hover{color:var(--ink);border-bottom-color:var(--ink)}
a:focus-visible,summary:focus-visible,.btn:focus-visible{outline:3px solid var(--green);outline-offset:2px}
p{max-width:68ch}

/* header */
.site-header{background:var(--ink);color:var(--paper)}
.header-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp4);padding-top:var(--sp4);padding-bottom:var(--sp4)}
.site-header nav{display:flex;flex-wrap:wrap;gap:var(--sp5)}
.site-header nav a{color:var(--paper);border-bottom:2px solid transparent;font-size:var(--fs-s);padding:var(--sp1) 0}
.site-header nav a:hover{border-bottom-color:var(--green);color:#fff}

/* breadcrumb */
.breadcrumb{font-size:var(--fs-xs);letter-spacing:.08em;color:var(--ink-2);padding-top:var(--sp5);display:flex;gap:var(--sp2)}
.breadcrumb a{border-bottom:none;color:var(--ink-2)}
.breadcrumb a:hover{color:var(--ink)}

/* hero variants — 每页结构不同 */
.hero{padding:var(--sp8) 0}
.kicker{font-size:var(--fs-xs);letter-spacing:.3em;text-transform:uppercase;color:var(--green-dk)}
.hero-home{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--sp7);align-items:center}
.hero-copy .lead{margin:var(--sp5) 0}
.hero-actions{margin-top:var(--sp5)}
.hero-fig img{width:100%;height:auto;border:2px solid var(--ink);display:block}
.hero-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--sp6);align-items:start}
.hero-split figure img{width:100%;height:auto;border:2px solid var(--ink)}
.hero-overlay{position:relative}
.hero-fig.full img{width:100%;height:auto;border:2px solid var(--ink)}
.overlay-box{max-width:640px;background:var(--paper);border:2px solid var(--ink);border-top:8px solid var(--green);padding:var(--sp5);margin-top:calc(-1 * var(--sp6));position:relative}
.hero-band{border-bottom:3px solid var(--ink)}
.hero-band .lead{margin-top:var(--sp4)}

.btn{display:inline-block;background:var(--green);color:#fff;border:2px solid var(--green-dk);padding:var(--sp3) var(--sp5);font-weight:700;letter-spacing:.05em}
.btn:hover{background:var(--green-dk);color:#fff;border-color:var(--green-dk)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}

/* 数据带 */
.band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp5);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);padding:var(--sp6) 0;margin:var(--sp7) 0}
.band .num{font-size:var(--fs-hero);font-weight:700;color:var(--green);display:block;line-height:1}
.band p{margin-top:var(--sp2)}

.cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp6)}
.cols-3 section{border-top:3px solid var(--green);padding-top:var(--sp4)}
.cols-3 p{margin-top:var(--sp3)}

/* 九宫格（契约结构） */
.items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.item img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;border:1px solid var(--ink)}
.item{border:2px solid var(--ink);background:var(--paper);padding:var(--sp4)}
.item h2,.item h3{font-size:var(--fs-m);margin-top:var(--sp3)}
.item p{margin-top:var(--sp2);font-size:var(--fs-s)}
.item ul{margin:var(--sp3) 0 0 var(--sp5);font-size:var(--fs-s);color:var(--ink-2)}
@media(max-width:760px){.items{grid-template-columns:minmax(0,1fr)}}

.steps{list-style:none;counter-reset:st;margin-top:var(--sp5)}
.steps li{counter-increment:st;border-left:3px solid var(--green);padding:var(--sp3) 0 var(--sp3) var(--sp5);position:relative;margin-bottom:var(--sp4)}
.steps li::before{content:counter(st,decimal-leading-zero);position:absolute;left:calc(-3px - 1.6em);top:var(--sp3);font-weight:700;color:var(--green);font-variant-numeric:tabular-nums}
.steps{margin-left:2.4em}

.faq-list details{border-bottom:1px solid var(--line);padding:var(--sp3) 0}
.faq-list summary{cursor:pointer;font-weight:700;font-size:var(--fs-m);padding:var(--sp2) 0}
.faq-list summary:hover{color:var(--green-dk)}
.faq-list p{margin-top:var(--sp3);margin-left:var(--sp4)}
details[open]{background:var(--paper-2)}

.alt-bg{background:var(--paper-2);border:2px solid var(--ink);padding:var(--sp6);margin:var(--sp7) 0}
.text-block{margin:var(--sp7) 0}

.cta{border:2px solid var(--ink);border-left:10px solid var(--green);padding:var(--sp6);margin:var(--sp8) 0}
.cta h2{border-left:none;padding-left:0;margin-top:0}
.cta p{margin-top:var(--sp3)}

.prose{max-width:none}
.prose h2{margin-top:var(--sp6)}
.prose p{margin-bottom:var(--sp4)}
.prose figure{margin:var(--sp5) 0}
.prose figure img{width:100%;height:auto;border:2px solid var(--ink)}
table.cmp{width:100%;border-collapse:collapse;margin:var(--sp5) 0;font-size:var(--fs-s)}
.cmp caption{caption-side:top;text-align:left;font-size:var(--fs-xs);letter-spacing:.1em;color:var(--ink-2);padding-bottom:var(--sp2)}
.cmp th,.cmp td{border:1px solid var(--ink);padding:var(--sp3) var(--sp4);text-align:left}
.cmp th{background:var(--ink);color:var(--paper)}
.cmp tr:nth-child(even) td{background:var(--paper-2)}

/* footer */
.site-footer{background:var(--ink);color:var(--paper);margin-top:var(--sp8)}
.footer-inner{display:grid;gap:var(--sp4);padding:var(--sp6) var(--sp5)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:var(--sp5)}
.site-footer a{color:var(--paper);border-bottom-color:var(--green)}
.site-footer a:hover{color:#fff}

/* responsive */
@media(max-width:900px){
  :root{--fs-hero:40px;--fs-xl:30px;--fs-l:22px}
  .hero-home,.hero-split{grid-template-columns:1fr}
  .cols-3,.band{grid-template-columns:1fr}
  .overlay-box{margin-top:var(--sp5)}
  h1{font-size:var(--fs-hero)}
}
@media(max-width:600px){
  :root{--fs-hero:32px;--fs-xl:26px}
  .header-inner{flex-direction:column;align-items:flex-start}
}