/* 项目三 · Huaxin Jiayuan — 无外部依赖，系统字体（GDPR 友好，不引 Google Fonts） */
:root{
  --ink:#14202b; --muted:#5b6b7a; --line:#e3e8ee; --bg:#ffffff; --soft:#f6f8fa;
  --accent:#0f6b5c; --accent-dark:#0b5145; --maxw:1180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* header */
header.site{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:20}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:74px}
.brand{font-weight:700;font-size:20px;color:var(--ink);display:flex;flex-direction:column;line-height:1.15}
.brand span{font-weight:400;font-size:11.5px;color:var(--muted);letter-spacing:.2px}
header.site nav ul{list-style:none;display:flex;gap:4px;margin:0;padding:0;flex-wrap:wrap}
header.site nav li{position:relative}
header.site nav > ul > li > a{display:block;padding:10px 12px;color:var(--ink);font-size:14.5px;border-radius:6px}
header.site nav > ul > li > a:hover{background:var(--soft);text-decoration:none}
header.site nav ul ul{display:none;position:absolute;left:0;top:100%;background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:6px;min-width:238px;box-shadow:0 12px 28px rgba(16,32,48,.10);list-style:none;margin:0}
header.site nav li:hover ul,
header.site nav li:focus-within ul{display:block}
header.site nav ul ul a{display:block;padding:8px 10px;font-size:14px;color:var(--ink);border-radius:6px}
header.site nav ul ul a:hover{background:var(--soft);text-decoration:none}

/* main */
main{padding:34px 0 10px}
.kicker{text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--accent);font-weight:600;margin:0 0 8px}
h1{font-size:clamp(28px,3.4vw,40px);line-height:1.2;margin:0 0 14px;letter-spacing:-.4px}
h2{font-size:22px;margin:34px 0 10px;letter-spacing:-.2px}
h3{font-size:17px;margin:22px 0 6px}
.lede{font-size:18.5px;color:#33434f;max-width:74ch}
main p,main li{max-width:80ch}
ul,ol{padding-left:22px}
li{margin:5px 0}
table.specs{width:100%;border-collapse:collapse;margin:10px 0 6px;font-size:15px}
table.specs th{text-align:left;width:230px;padding:10px 14px;background:var(--soft);border:1px solid var(--line);
  font-weight:600;color:#2b3a46;vertical-align:top}
table.specs td{padding:10px 14px;border:1px solid var(--line)}
.faq details{border:1px solid var(--line);border-radius:8px;padding:12px 16px;margin:8px 0;background:#fff}
.faq summary{cursor:pointer;font-weight:600}
.faq div{padding-top:8px;color:#2f3f4b}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:16px;margin:18px 0 6px}
.card{border:1px solid var(--line);border-radius:10px;padding:18px;background:#fff}
.card h3{margin:0 0 6px;font-size:17px}
.card p{margin:0;color:var(--muted);font-size:14.5px}
.card a.more{display:inline-block;margin-top:10px;font-size:14px;font-weight:600}

/* cta */
.cta{margin:42px 0 24px;padding:26px;border-radius:12px;background:var(--soft);border:1px solid var(--line)}
.cta h2{margin-top:0}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:11px 20px;border-radius:8px;font-weight:600}
.btn:hover{background:var(--accent-dark);text-decoration:none}

/* forms */
form.rfq{display:grid;gap:12px;max-width:660px}
form.rfq label{font-size:14px;font-weight:600}
form.rfq input,form.rfq textarea,form.rfq select{width:100%;padding:10px 12px;border:1px solid #cfd8e0;
  border-radius:8px;font:inherit;background:#fff}
form.rfq textarea{min-height:120px}

/* footer */
footer.site{margin-top:52px;border-top:1px solid var(--line);background:var(--soft);padding:30px 0 22px;font-size:14.5px}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px}
footer.site h4{margin:0 0 8px;font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:#2b3a46}
footer.site ul{list-style:none;padding:0;margin:0}
footer.site ul a{color:#3b4b58}
footer.site p{margin:0;color:var(--muted)}
.fine{font-size:13px;color:var(--muted);margin-top:22px}
main.fine{padding-top:0}
@media(max-width:880px){
  header.site .wrap{flex-direction:column;align-items:flex-start;padding-top:12px;padding-bottom:8px}
  header.site nav ul ul{display:block;position:static;border:0;box-shadow:none;padding:0 0 0 14px;min-width:0}
  footer.site .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){ footer.site .cols{grid-template-columns:1fr} table.specs th{width:auto} }

/* 语言切换器（多语言上线后显示） */
.langs { font-size: .82rem; }
.langs ul { list-style: none; display: flex; gap: .6rem; margin: .3rem 0 0; padding: 0; }
.langs a { text-decoration: none; opacity: .75; }
.langs a:hover { opacity: 1; text-decoration: underline; }
/* 页脚栏目列数自适应（多了 rPET 一栏也不挤） */
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 24px; }

/* 页脚社交主页（填了地址才渲染） */
.social h4 { margin: 0 0 8px; }
.social ul { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 14px; padding: 0; }
.social a { font-size: 14px; }

/* ---------- 欧盟惯例与可访问性（EN 301 549 / WCAG 2.2 AA 基础项） ---------- */
/* 跳到正文：键盘用户第一个 Tab 就能跳过导航 */
.skip { position: absolute; left: -9999px; top: 0; background: #fff; color: var(--ink);
  padding: 10px 16px; border: 2px solid var(--accent); border-radius: 0 0 8px 0; z-index: 99; }
.skip:focus { left: 0; }
/* 键盘焦点必须可见（WCAG 2.4.7） */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
/* 尊重系统的减少动效设置（WCAG 2.3.3） */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
/* 语言切换器做成 nav 后的排版 */
nav.langs ul { list-style: none; display: flex; gap: .6rem; margin: .3rem 0 0; padding: 0; }
nav.langs a { text-decoration: none; opacity: .8; font-size: .82rem; }
nav.langs a:hover { opacity: 1; text-decoration: underline; }