/* 常州进坚商贸有限公司 — 构成主义方向：中性纸底 + 深炭主色 + 机器蓝强调 */
:root{
  --paper:#f4f2ec;
  --ink:#1e2228;
  --ink-soft:#4a4f57;
  --accent:#1d5fa8;      /* 工业机械漆蓝，来自设备涂装 */
  --accent-deep:#123f70;
  --line:#1e2228;
  --rule:#c9c4b6;
  --gap:24px;
  --fs-sm:.8125rem;
  --fs-base:1rem;
  --fs-md:1.1875rem;
  --fs-lg:1.5rem;
  --fs-xl:2.375rem;
  --fs-hero:clamp(2.25rem,5.2vw,4rem);
  --maxw:1280px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--paper);color:var(--ink);
  font-size:var(--fs-base);line-height:1.75;
}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gap)}
h1,h2,h3{font-weight:800;line-height:1.25;letter-spacing:.01em}
h2{font-size:var(--fs-xl);margin-bottom:var(--gap);border-left:6px solid var(--accent);padding-left:16px}
h3{font-size:var(--fs-lg)}
p{max-width:68ch}
a{color:var(--accent-deep);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--accent)}
a:focus,summary:focus,.btn:focus{outline:3px solid var(--accent);outline-offset:2px}
.kicker{font-size:var(--fs-sm);letter-spacing:.35em;color:var(--accent-deep);font-weight:700;margin-bottom:16px}
.btn{
  display:inline-block;background:var(--ink);color:var(--paper);
  padding:12px 32px;font-weight:700;text-decoration:none;
  clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);
}
.btn:hover{background:var(--accent);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn.ghost:hover{box-shadow:inset 0 0 0 2px var(--accent);color:var(--accent)}

/* header */
.site-header{border-bottom:3px solid var(--ink);background:var(--paper);position:sticky;top:0;z-index:10}
.header-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;padding-bottom:12px}
.brand img{display:block}
nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:4px 20px}
nav a{text-decoration:none;font-weight:600;font-size:var(--fs-sm);letter-spacing:.08em;padding:4px 0}
nav a:hover{color:var(--accent)}
nav a[aria-current="page"]{color:var(--accent);border-bottom:3px solid var(--accent)}

/* breadcrumb */
.breadcrumb{font-size:12px;letter-spacing:.12em;color:var(--ink-soft);padding:16px var(--gap);max-width:var(--maxw);margin:0 auto}
.breadcrumb a{color:var(--ink-soft)}
.breadcrumb span{margin:0 8px}

/* hero variants */
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding-top:64px;padding-bottom:64px}
.hero-copy h1{font-size:var(--fs-hero);margin-bottom:24px}
.lede{font-size:var(--fs-md);color:var(--ink-soft)}
.hero-actions{margin-top:32px;display:flex;gap:16px;flex-wrap:wrap}
.hero-fig img{width:100%;height:auto;display:block;border:3px solid var(--ink)}
.hero-mega{background:linear-gradient(135deg,var(--paper) 62%,#e3e9f2 62%)}
.hero-copy h1 em{font-style:normal;color:var(--accent)}

/* capabilities */
.caps{background:var(--ink);color:var(--paper);padding:64px 0}
.caps h2{color:var(--paper);border-left-color:var(--accent)}
.cap-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.cap{border-top:2px solid var(--accent);padding-top:16px}
.cap p{color:#c8ccd3;margin-top:8px}

/* 9-item grid */
.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}
.item{border:2px solid var(--ink);padding:0 0 16px;background:#fff}
.item img{border-bottom:2px solid var(--ink)}
.item h2,.item h3{padding:12px 16px 0;font-size:var(--fs-lg)}
.item p{padding:8px 16px 0;font-size:var(--fs-sm);color:var(--ink-soft);max-width:none}
.item ul{padding:8px 16px 0 32px;font-size:var(--fs-sm)}
.items-block{padding:64px 0}
.sec-intro{color:var(--ink-soft);margin-bottom:32px}
.more-link{margin-top:32px;font-weight:700}

/* process */
.process{padding:64px 0;border-top:3px solid var(--ink)}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);counter-reset:none}
.steps .no{display:block;font-size:var(--fs-xl);font-weight:800;color:var(--accent);line-height:1}
.steps h3{margin:8px 0}
.steps-side li{margin-bottom:24px;list-style:none;border-left:3px solid var(--accent);padding-left:16px}
.steps-side{list-style:none}

/* faq */
.faq-home{padding:64px 0}
.qa-list details{border-bottom:1px solid var(--rule);padding:12px 0}
.qa-list summary{cursor:pointer;font-weight:700;font-size:var(--fs-md);padding:4px 0}
.qa-list p{margin-top:8px;color:var(--ink-soft)}

/* cta */
.cta{background:var(--accent-deep);color:var(--paper);padding:64px 0}
.cta h2{color:var(--paper);border-left-color:var(--paper)}
.cta p{color:#cfdaeb;margin-bottom:24px}
.cta .btn{background:var(--paper);color:var(--ink)}
.cta .btn:hover{background:var(--ink);color:var(--paper)}

/* about */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:32px var(--gap) 64px}
.about-grid h1{font-size:var(--fs-hero);margin-bottom:24px}
.about-text h2{font-size:var(--fs-lg);margin:32px 0 12px}
.about-fig img,.contact-fig img,.guide-fig img{width:100%;height:auto;border:3px solid var(--ink);display:block}
.about-link{margin-top:24px;font-weight:700}

/* guide */
.guide-head{padding:32px var(--gap) 0}
.guide-head h1{font-size:var(--fs-hero);margin-bottom:24px}
.guide-fig{margin:32px 0}
.guide-body{padding-bottom:64px}
.guide-body h2{font-size:var(--fs-lg);margin:40px 0 12px;border-left-width:4px;padding-left:12px}
.guide-body table{width:100%;border-collapse:collapse;margin:24px 0;font-size:var(--fs-sm)}
.guide-body th,.guide-body td{border:1px solid var(--rule);padding:8px 12px;text-align:left}
.guide-body th{background:var(--ink);color:var(--paper)}

/* services intro */
.services-intro{padding:32px 0 8px}
.services-intro h1{font-size:var(--fs-hero);margin-bottom:24px}
section.items{padding-bottom:64px}

/* faq page / contact */
.faq-page,.contact-hero{padding:32px 0 64px}
.faq-page h1,.contact-hero h1{font-size:var(--fs-hero);margin-bottom:24px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.contact-side h2{font-size:var(--fs-lg);margin:32px 0 12px}

/* footer */
.site-footer{border-top:3px solid var(--ink);background:var(--ink);color:var(--paper);padding:48px 0;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:var(--gap)}
.f-name{font-weight:800;font-size:var(--fs-md)}
.f-desc{color:#c8ccd3;font-size:var(--fs-sm);margin-top:8px}
.site-footer nav a{color:var(--paper)}
.site-footer nav a:hover{color:var(--accent)}
.f-mail a{color:var(--paper)}
.f-mail a:hover{color:var(--accent)}

@media(max-width:900px){
  .hero-grid,.about-grid,.contact-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .cap-row,.items{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .footer-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
  .items{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){
  h2{font-size:var(--fs-lg)}
}