/* ==========================================================================
   Serow Controls - site stylesheet (V3cms template package: serow)
   Ported verbatim from the reference site's site.css (the only viable path to
   pixel-level parity). Exactly 3 porting changes, all required by V3cms:
     1) the 4 @font-face blocks are removed -- Manifest::checkCssSelfContained
        (rule R2) forbids external font addresses in tpl/css/*.css, so the
        @font-face declarations live inline in skin/Public/file.html instead;
     2) html{font-size:125%} becomes :root{font-size:125%} -- rem units resolve
        against the ROOT element only;
     3) a "V3cms adaptation" block is appended at the end of the file:
        pagination .page, inquiry .wyt-modal, and the .serow-* variant hooks.
   Everything else is byte-identical: no reordering, no shorthand, no unit
   changes, no !important.
   ========================================================================== */


:root {
  --utility-h: 36px;
  --header-h: 64px;
  --paper: #f9f8f4;
  --paper-deep: #f2f1ec;
  --card: #ffffff;
  --ink: #11140f;
  --ink-soft: #2a2f27;
  --muted: #5e6458;
  --faint: #636a5c;
  --line: #dcd9cf;
  --line-dark: #bfbbae;
  --pine: #0d4d3a;
  --pine-deep: #083729;
  --pine-soft: #e1ebe3;
  --pine-tint: #edf3ee;
  --acid: #c7e86b;
  --amber: #a96524;
  --white: #ffffff;
  --font-display: "Archivo", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --container: 1240px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

:root {
  /* ★ 1rem = 20px：rem 只认根元素字号，必须挂在 :root；
     若改成 body 或作用域容器，全站 rem 尺寸会缩水 20%（像素验收必挂）。 */
  font-size: 125%;
}
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
}

body.nav-open { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--pine); color: var(--paper); }

.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.16em;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--pine);
  outline-offset: 3px;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

h1 { font-size: clamp(2.9rem, 5.6vw, 4.9rem); }
h2 { font-size: clamp(2rem, 3.6vw, 3.15rem); }
h3 { font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.02em; }
h4 { font-size: 1.05rem; line-height: 1.3; letter-spacing: -0.01em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.container {
  width: min(var(--container), calc(100% - 64px));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: 20px;
  z-index: 200;
  background: var(--pine);
  color: var(--white);
  padding: 12px 18px;
  font-size: 0.8125rem;
}
.skip-link:focus { top: 12px; }

/* ---------- type helpers ---------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--pine);
}
.eyebrow.on-dark { color: #b9c9bf; }
.eyebrow.on-dark::before { background: var(--acid); }

.lead {
  max-width: 640px;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--muted);
}
.lead.on-dark { color: #c3d2c8; }

.mono {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}
.muted { color: var(--muted); }
.small { font-size: 0.8125rem; line-height: 1.6; }
.tiny {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pine);
  border-bottom: 1px solid rgba(13, 77, 58, 0.35);
  padding-bottom: 3px;
  transition: border-color 0.2s, color 0.2s;
}
.text-link:hover { border-color: var(--pine); }
.text-link .arw { transition: transform 0.3s var(--ease); }
.text-link:hover .arw { transform: translateX(3px); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: none;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn .arw { transition: transform 0.3s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

.btn-primary { background: var(--pine); color: var(--white); }
.btn-primary:hover { background: var(--pine-deep); }

.btn-ghost {
  border-color: var(--line-dark);
  color: var(--ink);
}
.btn-ghost:hover { border-color: var(--pine); color: var(--pine); }

.btn-light { background: var(--paper); color: var(--pine-deep); }
.btn-light:hover { background: var(--white); }

.btn-outline-light {
  border-color: rgba(255, 255, 255, 0.34);
  color: var(--white);
}
.btn-outline-light:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.08); }

.btn-acid { background: var(--acid); color: var(--ink); }
.btn-acid:hover { background: #d6f08a; }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: var(--utility-h);
  z-index: 60;
  background: rgba(249, 248, 244, 0.92);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-h);
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex: none;
}
.brand-logo { display: block; height: 24px; width: auto; }
.brand-mark { width: 28px; height: 28px; }
.brand-copy { display: flex; flex-direction: column; line-height: 1; }
.brand-copy .brand-sub:first-child { margin-top: 0; }
.brand-word {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.24em;
}
.brand-sub {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  color: var(--muted);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav-item { position: relative; }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  color: var(--ink-soft);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s;
}
.nav-link:hover, .nav-link:focus-visible { color: var(--pine); }
.nav-link[aria-current="page"] { color: var(--pine); box-shadow: inset 0 -2px 0 var(--pine); }

.chev {
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s;
}
.has-menu.is-open > .nav-link .chev { transform: translateY(1px) rotate(225deg); }

.nav-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: -8px;
  width: 300px;
  padding: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 24px 48px rgba(17, 20, 15, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s, transform 0.2s var(--ease), visibility 0.2s;
}
.has-menu:hover .nav-panel,
.has-menu:focus-within .nav-panel,
.has-menu.is-open .nav-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}
/* Keep the pointer inside the hover area while it crosses the gap below the trigger. */
.nav-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}
/* The last menu sits next to the CTA; anchor its panel to the right so it
   cannot extend past the viewport on narrower desktop widths. */
.site-nav > .has-menu:last-of-type > .nav-panel { left: auto; right: -8px; }
.nav-panel-label {
  padding: 8px 12px 6px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.nav-panel a {
  display: block;
  padding: 9px 12px;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--ink-soft);
  transition: background 0.15s, color 0.15s;
}
.nav-panel a:hover { background: var(--pine-soft); color: var(--pine); }
.nav-panel a[aria-current="page"] { background: var(--pine-soft); color: var(--pine); }
.nav-panel a small {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--faint);
}

.nav-cta { margin-left: 14px; min-height: 40px; padding: 0 18px; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 2px;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle .bars { display: flex; flex-direction: column; gap: 4px; }
.nav-toggle .bars span { display: block; width: 18px; height: 1px; background: var(--ink); }

/* ---------- utility bar ---------- */

.utility {
  position: sticky;
  top: 0;
  z-index: 70;
  background: var(--pine-deep);
  color: rgba(255, 255, 255, 0.78);
}
.utility-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--utility-h);
}
.utility-social,
.lang-switch {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.utility-label {
  color: rgba(255, 255, 255, 0.58);
  letter-spacing: 0.16em;
}
/* social buttons in the utility bar — pill shape, lift + acid fill on hover */
.utility-social .social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 11px 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  flex: none;
  cursor: pointer;
  transition: color 0.22s var(--ease), background-color 0.22s var(--ease),
              border-color 0.22s var(--ease), transform 0.22s var(--ease),
              box-shadow 0.22s var(--ease);
}
.utility-social .social-link .icon {
  width: 13px;
  height: 13px;
  transition: transform 0.22s var(--ease);
}
/* no profile URL yet: dimmer idle state, hover still lifts to acid */
.utility-social .social-link.is-pending {
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.03);
  cursor: default;
}
.utility-social .social-link:hover,
.utility-social .social-link:focus-visible {
  color: var(--ink);
  background: var(--acid);
  border-color: var(--acid);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.32);
  outline: none;
}
.utility-social .social-link:hover .icon,
.utility-social .social-link:focus-visible .icon { transform: scale(1.12); }
.utility-social .social-link:active { transform: translateY(0); }
.utility-social .sep,
.lang-switch .sep { color: rgba(255, 255, 255, 0.26); }
.utility-tel,
.utility-mail {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  gap: 7px;
  margin-left: 8px;
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}
.utility-tel .icon,
.utility-mail .icon { width: 14px; height: 14px; }
.utility-tel:hover,
.utility-tel:focus-visible,
.utility-mail:hover,
.utility-mail:focus-visible { color: var(--acid); outline: none; }
.lang-switch { gap: 8px; }
.lang-switch a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 6px;
  color: rgba(255, 255, 255, 0.62);
}
.lang-switch a:hover { color: var(--white); }
.lang-switch a.is-active { color: var(--acid); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(900px 420px at 78% 6%, rgba(13, 77, 58, 0.09), transparent 65%),
    linear-gradient(180deg, #f7f5ef 0%, var(--paper) 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(17, 20, 15, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17, 20, 15, 0.045) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 56px;
  align-items: center;
  padding: 52px 0 46px;
}
.hero h1 { max-width: 800px; margin: 18px 0 20px; font-size: clamp(2.4rem, 4.4vw, 3.9rem); }
.hero h1 em { font-style: normal; color: var(--pine); }
.hero .lead { max-width: 560px; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.hero-fact .k {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.hero-fact .k .icon { width: 14px; height: 14px; color: var(--pine); }
.hero-fact .v { font-size: 0.9375rem; font-weight: 500; }

.hero-visual { position: relative; padding: 4px 0 18px; }

.schematic {
  position: relative;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px rgba(17, 20, 15, 0.07);
}
.schematic svg { width: 100%; height: auto; max-height: 500px; }

/* ---------- trust strip ---------- */

.trust { border-bottom: 1px solid var(--line); background: var(--paper); }
.trust-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
}
.trust-item { background: var(--paper); padding: 22px 20px; }
.trust-item .k {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
.trust-item .k .icon { width: 14px; height: 14px; color: var(--pine); }
.trust-item .v { margin-top: 4px; font-size: 0.8125rem; font-weight: 500; line-height: 1.45; }
.trust-item a:hover { color: var(--pine); }

/* ---------- homepage density tourniquet ---------- */

body.home .hero h1 { font-size: clamp(2.2rem, 3.8vw, 3.4rem); line-height: 1.08; }
body.home h2 { line-height: 1.08; }
body.home h2,
body.home h3 { text-wrap: balance; }
body.home .lead { text-wrap: pretty; }
body.home .section { padding: 64px 0; }
body.home .tag,
body.home .solution-card .idx,
body.home .trust-item .k { font-size: 0.6875rem; }
body.home .solution-card .idx { min-height: 2.7em; line-height: 1.35; align-items: flex-start; }
body.home .solution-card .idx .icon { margin-top: 1px; }
html[lang="zh-CN"] body.home h1,
html[lang="zh-CN"] body.home h2,
html[lang="zh-CN"] body.home h3 { line-height: 1.16; }

/* section label sitting on a rule, headline flush to the content axis: see file end */


@media (min-width: 1081px) {
  body.home .solution-grid { grid-template-columns: repeat(4, 1fr); }
  body.home .solution-card { padding: 26px; }
  body.home .solution-card .card-photo { margin: -26px -26px 18px; }
  body.home .solution-card h3 { margin: 18px 0 10px; font-size: 1.4rem; }
  html[lang="zh-CN"] body.home .solution-card h3 { font-size: 1.25rem; }
  body.home .cert-grid { grid-template-columns: repeat(6, 1fr); }
  body.home .case-list { grid-template-columns: repeat(3, 1fr); }
  body.home .case { display: flex; flex-direction: column; padding: 26px 22px; }
  body.home .case .numbers {
    display: flex;
    gap: 14px;
    margin-top: auto;
    padding: 18px 0 0;
    border-left: 0;
  }
  body.home .case .numbers .n { margin: 0; }
  body.home .case .numbers .k { font-size: 0.5625rem; letter-spacing: 0.04em; }
}

@media (max-width: 440px) {
  html[lang="zh-CN"] body.home .hero h1 { font-size: 1.9rem; }
}

/* ---------- section scaffolding ---------- */

.section { padding: 96px 0; border-bottom: 1px solid var(--line); }
.section.tint { background: var(--paper-deep); }
.section.flush { padding-bottom: 0; }
.section.dark { background: var(--ink); color: var(--paper); border-bottom-color: #2a2f27; }

.sec-head {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 50px;
}
.sec-head .eyebrow,
.band-head .eyebrow { white-space: nowrap; }
.sec-head h2 { max-width: 800px; }
.sec-head .lead { margin-top: 18px; }
.sec-head .head-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- solutions ---------- */

.solution-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}
.solution-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 330px;
  padding: 32px;
  background: var(--card);
  transition: background 0.25s;
}
.solution-card:hover { background: var(--pine-tint); }
.solution-card .idx {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--faint);
}
.solution-card .idx .icon { width: 18px; height: 18px; color: var(--pine); }
.solution-card h3 { max-width: 330px; margin: 24px 0 12px; font-size: 1.6rem; }
.solution-card p { max-width: 370px; font-size: 0.9375rem; color: var(--muted); }
.solution-card .card-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: auto;
  padding-top: 26px;
}
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  padding: 4px 8px;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.solution-card .go {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid var(--line-dark);
  font-size: 0.9rem;
  color: var(--pine);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.solution-card:hover .go { background: var(--pine); border-color: var(--pine); color: var(--white); }

/* ---------- process rail ---------- */

.process {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--line-dark);
  margin-top: 8px;
}
.process-step {
  position: relative;
  padding: 26px 18px 8px 0;
  border-right: 1px solid var(--line);
}
.process-step:last-child { border-right: 0; }
.process-step::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  border: 1px solid var(--pine);
  border-radius: 50%;
  background: var(--paper);
  transition: background 0.2s;
}
.process-step:hover::before { background: var(--pine); }
.process-step .step-k {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--faint);
}
.process-step .step-k .icon { width: 19px; height: 19px; color: var(--line-dark); transition: color 0.2s; }
.process-step:hover .step-k .icon { color: var(--pine); }
.process-step h3 {
  margin: 10px 0 6px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
}
.process-step p { margin: 0; font-size: 0.75rem; line-height: 1.55; color: var(--muted); }
.process-step .time {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--pine);
}

/* ---------- split / matrix ---------- */

.split {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 56px;
  align-items: start;
}
.split > * { min-width: 0; }
.split.reverse { grid-template-columns: 0.75fr 1.25fr; }

.matrix-scroll { overflow-x: auto; }
.matrix { width: 100%; min-width: 400px; border-collapse: collapse; font-size: 0.875rem; }
.matrix th {
  padding: 0 12px 12px;
  border-bottom: 1px solid var(--line-dark);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: left;
}
.matrix td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.matrix td:first-child { font-weight: 600; }
.matrix tr:last-child td { border-bottom: 0; }
.matrix .sub { display: block; margin-top: 2px; font-size: 0.75rem; font-weight: 400; color: var(--muted); }

.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pine); flex: none; }
.status.optional .dot { background: transparent; border: 1px solid var(--pine); }
.status.scope .dot { background: var(--line-dark); }
.status.scope { color: var(--muted); }

.side-card {
  position: sticky;
  top: calc(var(--utility-h) + var(--header-h) + 24px);
  padding: 28px;
  background: var(--card);
  border: 1px solid var(--line);
}
.side-card h3 { margin-bottom: 10px; font-size: 1.2rem; }
.side-card p { font-size: 0.875rem; color: var(--muted); }
.side-card .tiny,
.card .tiny { font-size: 0.6875rem; line-height: 1.5; }
.side-list { list-style: none; margin: 18px 0 24px; padding: 0; }
.side-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.8125rem;
}
.side-list li:last-child { border-bottom: 0; }
.side-list b { display: block; font-weight: 600; }
.side-list span { color: var(--muted); font-size: 0.75rem; }

/* ---------- metrics ---------- */

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}
.metric { padding: 26px 24px; background: var(--card); }
.metric .v {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--pine);
}
.metric .v small {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
}
.metric .k {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.metric p { margin: 8px 0 0; font-size: 0.8125rem; color: var(--muted); }

/* ---------- products ---------- */

.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  transition: border-color 0.2s, transform 0.3s var(--ease);
}
.product-card:hover { border-color: var(--line-dark); transform: translateY(-3px); }
.product-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 310px;
  padding: 28px;
  background:
    linear-gradient(160deg, #e8eee6 0%, #dce7de 100%);
  border-bottom: 1px solid var(--line);
}
.product-visual svg { height: 248px; width: auto; }
.product-body { display: flex; flex-direction: column; flex: 1; padding: 24px; }
.product-body .series {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.product-body .series .icon { width: 15px; height: 15px; color: var(--pine); }
.product-body h3 { margin: 8px 0 4px; font-size: 1.5rem; }
.product-body .model { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--muted); }
.product-body p { margin: 14px 0 0; font-size: 0.875rem; color: var(--muted); }
.spec-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.spec-mini span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.spec-mini b { font-size: 0.75rem; font-weight: 500; }
.product-body .text-link { margin-top: auto; padding-top: 22px; align-self: flex-start; }

/* ---------- cases ---------- */

.case-list { display: grid; gap: 1px; border: 1px solid var(--line); background: var(--line); }
.case {
  display: grid;
  grid-template-columns: 210px 1fr 220px;
  gap: 36px;
  padding: 36px;
  background: var(--card);
  align-items: start;
}
.case .case-meta .tag { display: inline-block; margin-bottom: 10px; }
.case .case-meta .loc { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--faint); letter-spacing: 0.06em; }
.case h3 { max-width: 540px; margin-bottom: 10px; font-size: 1.35rem; }
.case p { max-width: 620px; font-size: 0.9375rem; color: var(--muted); }
.case .deliverables { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.case .deliverables li {
  padding: 4px 8px;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.case .numbers { border-left: 1px solid var(--line); padding-left: 24px; }
.case .numbers .n { margin-bottom: 16px; }
.case .numbers .n:last-child { margin-bottom: 0; }
.case .numbers .v {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--pine);
  line-height: 1;
}
.case .numbers .k {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---------- certifications ---------- */

.cert-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}
.cert {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 150px;
  padding: 26px 22px;
  background: var(--card);
  transition: background 0.2s;
}
.cert:hover { background: var(--pine-tint); }
.cert .abbr {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.cert .name { margin-top: 4px; font-size: 0.75rem; color: var(--muted); }
.cert .link {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pine);
}

/* ---------- faq ---------- */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--pine);
}
.faq details[open] summary::after { content: "–"; }
.faq .answer { max-width: 780px; padding: 0 0 24px; font-size: 0.9375rem; color: var(--muted); }

/* ---------- cta band ---------- */

.cta {
  position: relative;
  overflow: hidden;
  padding: 80px 0;
  background: var(--pine-deep);
  color: var(--white);
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(900px 400px at 78% 30%, #000, transparent 75%);
  mask-image: radial-gradient(900px 400px at 78% 30%, #000, transparent 75%);
}
.cta-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: 48px;
  align-items: end;
}
.cta h2 { max-width: 760px; color: var(--white); }
.cta p { max-width: 560px; margin-top: 18px; color: #c3d2c8; }
.cta .actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.cta .micro {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9fb2a6;
}

/* ---------- footer ---------- */

.site-footer { padding: 64px 0 28px; background: var(--paper); border-top: 1px solid var(--line); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr) 1.2fr;
  gap: 40px;
}
.footer-brand p { max-width: 300px; margin-top: 16px; font-size: 0.8125rem; color: var(--muted); }
.footer-col h3 {
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.footer-col a { display: block; padding: 4px 0; font-size: 0.8125rem; color: var(--ink-soft); }
.footer-col a:hover { color: var(--pine); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}
.footer-bottom a:hover { color: var(--pine); }

.social-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.social-link .icon { width: 14px; height: 14px; }
.social-row .fs-label { color: var(--faint); letter-spacing: 0.16em; }
.social-row a { color: var(--muted); }
.social-row a:hover { color: var(--pine); }
.social-row .social-link.is-pending { color: var(--faint); cursor: default; }
.footer-social {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 7px 14px;
  max-width: 360px;
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}
.footer-social .fs-label { grid-column: 1 / -1; }
.footer-social .sep { display: none; }
.footer-tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
}
.footer-col .footer-tel { display: inline-flex; }
.footer-tel .icon { width: 14px; height: 14px; }
.footer-grid.zh-grid { grid-template-columns: 1.8fr 1fr 1fr; }

/* ---------- inner page hero ---------- */

.page-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(820px 380px at 82% 0%, rgba(13, 77, 58, 0.085), transparent 65%),
    linear-gradient(180deg, #f7f5ef, var(--paper));
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(17, 20, 15, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17, 20, 15, 0.04) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 92%);
  mask-image: linear-gradient(to bottom, #000, transparent 92%);
}
.page-hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 56px;
  align-items: end;
  padding-top: 52px;
  padding-bottom: 56px;
}
.page-hero.simple .container { grid-template-columns: 1fr; }
.page-hero.simple.with-photo .container { grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: center; }
.hero-photo { margin: 0; }
.hero-photo .frame { border: 1px solid var(--line); background: var(--card); overflow: hidden; }
.hero-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: contrast(1.02);
}
.hero-photo figcaption {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
.hero-photo figcaption b { font-weight: 500; color: var(--ink); white-space: nowrap; }
.page-hero h1 { max-width: 860px; margin: 18px 0 20px; font-size: clamp(2.6rem, 4.8vw, 4.2rem); }
.page-hero .lead { max-width: 620px; }
.page-hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.page-hero .hero-aside { padding-left: 28px; border-left: 1px solid var(--line); }
.page-hero .hero-aside .aside-label {
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.page-hero .hero-aside ul { list-style: none; margin: 0; padding: 0; }
.page-hero .hero-aside li {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.8125rem;
}
.page-hero .hero-aside li:last-child { border-bottom: 0; }
.page-hero .hero-aside li b { display: block; font-weight: 500; }
.page-hero .hero-aside li span { font-size: 0.75rem; color: var(--muted); }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.breadcrumb a:hover { color: var(--pine); }
.breadcrumb .sep { color: var(--line-dark); }

/* ---------- anchor nav ---------- */

.anchor-nav {
  position: sticky;
  top: calc(var(--utility-h) + var(--header-h));
  z-index: 40;
  background: rgba(249, 248, 244, 0.95);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.anchor-nav .scroll {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  scrollbar-width: none;
}
.anchor-nav .scroll::-webkit-scrollbar { display: none; }
.anchor-nav a {
  padding: 15px 0;
  border-bottom: 1px solid transparent;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.anchor-nav a:hover { color: var(--pine); border-bottom-color: var(--pine); }

/* ---------- bands ---------- */

.band { padding: 76px 0; border-bottom: 1px solid var(--line); }
.band.tint { background: var(--paper-deep); }
.band.dark { background: var(--ink); color: var(--paper); border-bottom-color: #2a2f27; }
.band-head {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 48px;
  margin-bottom: 36px;
  align-items: start;
}
.band-head h2 { max-width: 740px; font-size: clamp(1.75rem, 2.8vw, 2.5rem); }
.band-head .lead { margin-top: 16px; font-size: 1rem; }

/* ---------- generic cards ---------- */

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.card {
  padding: 28px;
  background: var(--card);
  border: 1px solid var(--line);
}
.card .k,
.side-card .k {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
.card .k .icon,
.side-card .k .icon { width: 14px; height: 14px; color: var(--pine); }
.card h3 { margin-bottom: 10px; font-size: 1.15rem; }
.card p { font-size: 0.875rem; color: var(--muted); }
.card ul { margin: 0; padding: 0; list-style: none; }
.card li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.8125rem; }
.card li:last-child { border-bottom: 0; }

.card.emphasis { border-top: 2px solid var(--pine); }
.card.dark { background: var(--ink); color: var(--paper); border-color: #2a2f27; }
.card.dark p { color: #b9c9bf; }

/* ---------- photography ---------- */

.photo {
  margin: 0;
  overflow: hidden;
  background: var(--paper-deep);
  border: 1px solid var(--line);
}
.photo img,
.card-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.02);
}
.photo.ratio { aspect-ratio: 16 / 10; }
.card-photo {
  aspect-ratio: 16 / 10;
  margin: -28px -28px 22px;
  overflow: hidden;
  background: var(--paper-deep);
}
.card-photo img { transition: transform 0.45s ease; }
.card:hover .card-photo img,
.solution-card:hover .card-photo img { transform: scale(1.025); }
.solution-card .card-photo { margin: -32px -32px 22px; }
.media-stack { display: grid; gap: 18px; align-content: start; }
.media-stack > .card,
.media-stack > .side-card { position: static; }

/* full-width plate under a page hero */
.plate-band { padding: 40px 0 0; }
.plate {
  margin: 0;
  border: 1px solid var(--line);
  background: var(--card);
}
.plate img {
  display: block;
  width: 100%;
  aspect-ratio: 12 / 5;
  object-fit: cover;
  filter: contrast(1.02);
}
.plate figcaption {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 11px 16px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
.plate figcaption b { font-weight: 500; color: var(--ink); letter-spacing: 0.1em; white-space: nowrap; }

section[id] { scroll-margin-top: calc(var(--utility-h) + var(--header-h) + 12px); }
.anchor-nav ~ section[id] { scroll-margin-top: calc(var(--utility-h) + var(--header-h) + 60px); }

.checks { list-style: none; margin: 0; padding: 0; }
.checks li {
  position: relative;
  padding: 10px 0 10px 22px;
  border-bottom: 1px solid var(--line);
  font-size: 0.875rem;
}
.checks li:last-child { border-bottom: 0; }
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 9px;
  height: 9px;
  border: 1px solid var(--pine);
}
.checks li::after {
  content: "";
  position: absolute;
  left: 2.5px;
  top: 19.5px;
  width: 4px;
  height: 4px;
  background: var(--pine);
}
.checks.on-dark li { border-color: #2a2f27; }
.checks.on-dark li::before { border-color: var(--acid); }
.checks.on-dark li::after { background: var(--acid); }

/* ---------- data tables ---------- */

.data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.data-table caption {
  padding-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: left;
}
.data-table th {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-dark);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: left;
  white-space: nowrap;
}
.data-table td {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.data-table tr:hover td { background: rgba(13, 77, 58, 0.03); }
.data-table td:first-child { font-weight: 500; }
.data-table .nowrap { white-space: nowrap; }
.data-table .mono { font-size: 0.6875rem; }

.table-scroll { overflow-x: auto; border: 1px solid var(--line); background: var(--card); }
.table-scroll .data-table { min-width: 760px; }
.split .table-scroll .data-table { min-width: 0; }
.split .table-scroll .data-table td:first-child { white-space: nowrap; }
.table-scroll .data-table th { background: var(--paper-deep); padding-left: 18px; }
.table-scroll .data-table td { padding-left: 18px; }

/* ---------- timeline ---------- */

.timeline { margin-left: 4px; border-left: 1px solid var(--line-dark); }
.tl-item { position: relative; padding: 0 0 36px 30px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: "";
  position: absolute;
  left: -4.5px;
  top: 6px;
  width: 8px;
  height: 8px;
  border: 1px solid var(--pine);
  border-radius: 50%;
  background: var(--paper);
}
.tl-item .k {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.tl-item h3 { margin: 6px 0; font-size: 1.05rem; letter-spacing: -0.01em; }
.tl-item p { max-width: 640px; font-size: 0.875rem; color: var(--muted); }
.tl-item .time {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--pine);
}

/* ---------- callout ---------- */

.callout {
  padding: 22px 26px;
  border-left: 2px solid var(--pine);
  background: var(--pine-tint);
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.callout strong { color: var(--pine); }
.callout.on-dark { background: #151a14; border-left-color: var(--acid); color: #c3d2c8; }
.callout.on-dark strong { color: var(--acid); }

/* ---------- forms ---------- */

.form-shell {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 56px;
  align-items: start;
}
.form-card { padding: 36px; background: var(--card); border: 1px solid var(--line); }

.form-progress { display: flex; gap: 8px; margin-bottom: 30px; }
.form-progress span { flex: 1; height: 2px; background: var(--line); transition: background 0.3s; }
.form-progress span.is-active { background: var(--pine); }

.form-step { display: none; }
.form-step.is-active { display: block; animation: stepIn 0.35s var(--ease); }
@keyframes stepIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.form-step .k {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
.form-step h2 { margin: 8px 0 24px; font-size: 1.9rem; }

.field { margin-bottom: 20px; }
.field label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line-dark);
  border-radius: 2px;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--ink);
}
.field textarea { resize: vertical; min-height: 100px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--pine);
  outline: none;
  box-shadow: 0 0 0 3px rgba(13, 77, 58, 0.1);
}
.field .hint { margin-top: 6px; font-size: 0.6875rem; color: var(--faint); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.choice span {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--line-dark);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.choice input:checked + span {
  border-color: var(--pine);
  background: var(--pine-tint);
  color: var(--pine);
  font-weight: 600;
}
.choice input:focus-visible + span { outline: 2px solid var(--pine); outline-offset: 2px; }

.form-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.form-note { margin-top: 14px; font-size: 0.6875rem; line-height: 1.6; color: var(--muted); }

.contact-aside { position: sticky; top: calc(var(--utility-h) + var(--header-h) + 24px); }
.contact-block { padding: 20px 0; border-top: 1px solid var(--line); }
.contact-block:first-child { padding-top: 0; border-top: 0; }
.contact-block .k {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
.contact-block .k .icon { width: 14px; height: 14px; color: var(--pine); }
.contact-block .v { font-size: 0.9375rem; font-weight: 500; }
.contact-block p { font-size: 0.8125rem; color: var(--muted); }

/* ---------- compatibility checker ---------- */

.checker {
  padding: 34px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
}
.checker .k {
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a8b3a9;
}
.checker h2 { margin-bottom: 24px; font-size: 1.75rem; color: var(--white); }
.checker .field label { color: #a8b3a9; }
.checker .field select {
  background: #1a1f19;
  border-color: #3a423a;
  color: var(--paper);
}
.checker .field select:focus { border-color: var(--acid); box-shadow: 0 0 0 3px rgba(199, 232, 107, 0.12); }
.checker .btn { width: 100%; margin-top: 6px; }
.checker .micro {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: #8f9c92;
}

.result {
  display: none;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.result.is-visible { display: block; animation: stepIn 0.35s var(--ease); }
.result .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 5px 10px;
  border: 1px solid rgba(199, 232, 107, 0.4);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acid);
}
.result .badge .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--acid); }
.result h3 { margin-bottom: 8px; color: var(--white); font-size: 1.2rem; }
.result p { font-size: 0.875rem; color: #c3d2c8; }
.result .next {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: #a8b3a9;
}
.result .next b { color: var(--paper); font-weight: 500; }
.result .btn { width: auto; margin-top: 18px; }

/* ---------- prose (privacy) ---------- */

.prose { max-width: 760px; padding: 0 0 88px; }
.prose h2 { margin: 40px 0 14px; font-size: 1.5rem; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 0.9375rem; color: var(--muted); }
.prose ul { padding-left: 20px; }
.prose a { color: var(--pine); border-bottom: 1px solid rgba(13, 77, 58, 0.3); }

/* ---------- 404 ---------- */

.error-page {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 76px);
  padding: 80px 0;
  text-align: center;
}
.error-page .code {
  font-family: var(--font-display);
  font-size: clamp(6rem, 18vw, 12rem);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: var(--pine);
}
.error-page h1 { margin: 28px 0 14px; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.error-page p { max-width: 480px; margin: 0 auto 28px; color: var(--muted); }

/* ---------- responsive ---------- */

@media (max-width: 1180px) {
  .nav-link { padding-inline: 8px; font-size: 0.78rem; }
  .header-inner { gap: 16px; }
  .hero-inner { padding: 44px 0 30px; }
  .hero h1 { margin: 14px 0 16px; }
  .hero-actions { margin-top: 22px; }
  .hero-facts { margin-top: 24px; padding-top: 14px; }
  .hero-visual { padding-bottom: 10px; }
  .schematic svg { max-height: 440px; }
  .trust-item .k { gap: 5px; letter-spacing: 0.05em; }
  .trust-inner { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: repeat(4, 1fr); row-gap: 36px; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-h) - var(--utility-h));
    height: calc(100dvh - var(--header-h) - var(--utility-h));
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 24px 48px;
    overflow-y: auto;
    background: var(--paper);
    border-top: 1px solid var(--line);
  }
  .site-nav.is-open { display: flex; }
  .nav-item { width: 100%; }
  .nav-link {
    width: 100%;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
  }
  .nav-panel {
    position: static;
    display: none;
    width: auto;
    padding: 4px 0 10px 14px;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .has-menu.is-open .nav-panel { display: block; }
  .nav-panel-label { display: none; }
  .nav-panel a { padding: 10px 0; font-size: 0.875rem; }
  .nav-cta { margin: 22px 0 0; width: 100%; min-height: 48px; }

  .hero-inner, .page-hero .container { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { max-width: 560px; }
  .sec-head, .band-head { grid-template-columns: 1fr; gap: 18px; }
  .process { grid-template-columns: repeat(3, 1fr); }
  .process-step:nth-child(3) { border-right: 0; }
  .split, .split.reverse { grid-template-columns: 1fr; gap: 36px; }
  .side-card { position: static; }
  .product-grid { grid-template-columns: 1fr 1fr; }
  .case { grid-template-columns: 180px 1fr; }
  .case .numbers { grid-column: 1 / -1; display: flex; gap: 40px; border-left: 0; border-top: 1px solid var(--line); padding: 20px 0 0; }
  .case .numbers .n { margin-bottom: 0; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; row-gap: 36px; }
  .footer-brand { grid-column: 1 / -1; }
  .cta-inner { grid-template-columns: 1fr; gap: 28px; }
  .cta .actions { justify-content: flex-start; }
  .form-shell { grid-template-columns: 1fr; gap: 36px; }
  .contact-aside { position: static; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .container { width: calc(100% - 40px); }
  .brand-word { font-size: 0.95rem; letter-spacing: 0.2em; }
  .brand-sub { font-size: 0.4375rem; }

  .hero-inner { padding: 48px 0 52px; gap: 34px; }
  .hero h1 { margin-top: 16px; }
  .hero-facts { gap: 20px 28px; }
  .hero-fact { min-width: 120px; }
  .hero-visual { max-width: none; }
  .schematic { padding: 14px; }

  .trust-inner { grid-template-columns: 1fr 1fr; }
  .trust-item { padding: 16px; grid-column: auto; }
  .trust-item:nth-child(4),
  .trust-item:nth-child(5) { grid-column: auto; }
  .trust-item:last-child { grid-column: 1 / -1; }

  .section { padding: 64px 0; }
  .band { padding: 56px 0; }

  .solution-grid { grid-template-columns: 1fr; }
  .solution-card { min-height: 280px; padding: 26px; }
  .solution-card .card-photo { margin: -26px -26px 20px; }

  .process { grid-template-columns: 1fr 1fr; }
  .process-step { border-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 20px; }
  .process-step:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 16px; }
  .process-step:last-child { border-bottom: 0; }

  .metric-grid { grid-template-columns: 1fr 1fr; }
  .metric { padding: 20px 18px; }
  .metric .v { font-size: 2.1rem; }

  .product-grid { grid-template-columns: 1fr; }
  .product-visual { min-height: 260px; }

  .case { grid-template-columns: 1fr; gap: 18px; padding: 26px; }
  .case .numbers { flex-wrap: wrap; gap: 24px; }

  .cert-grid { grid-template-columns: 1fr 1fr; }
  .cert { min-height: 130px; padding: 20px 16px; }
  .cert .abbr { font-size: 1.2rem; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  .page-hero .container { padding-top: 38px; padding-bottom: 42px; }
  .page-hero .hero-aside { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 20px; }
  .anchor-nav { top: calc(var(--utility-h) + var(--header-h)); }
  .anchor-nav .scroll { gap: 20px; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid.zh-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: 8px; }

  .cta { padding: 60px 0; }
  .cta .actions .btn { width: 100%; }

  .form-card { padding: 24px 20px; }
  .field-row { grid-template-columns: 1fr; }
  .choice-grid { grid-template-columns: 1fr; }
  .form-actions .btn { flex: 1; padding-inline: 12px; }

  .checker { padding: 24px 20px; }
  .table-scroll .data-table { min-width: 680px; }

  .plate-band { padding-top: 28px; }
  .plate img { aspect-ratio: 3 / 2; }
  .plate figcaption { flex-direction: column; gap: 4px; }
  .page-hero.simple.with-photo .container { grid-template-columns: 1fr; gap: 28px; }
  .hero-photo figcaption { flex-direction: column; gap: 4px; }
}

@media (max-width: 440px) {
  .hero-actions .btn { width: 100%; }
  .metric-grid { grid-template-columns: 1fr; }
  .trust-inner { grid-template-columns: 1fr; }
  .trust-item:last-child { grid-column: auto; }
  .cert-grid { grid-template-columns: 1fr; }
  .footer-grid,
  .footer-grid.zh-grid { grid-template-columns: 1fr; }
  .process { grid-template-columns: 1fr; }
  .process-step, .process-step:nth-child(odd) { border-right: 0; }
}

/* ---------- chinese entry ---------- */

html[lang="zh-CN"] body {
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", var(--font-body), sans-serif;
}
html[lang="zh-CN"] h1,
html[lang="zh-CN"] h2,
html[lang="zh-CN"] h3 {
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", var(--font-display), sans-serif;
  letter-spacing: 0;
}
html[lang="zh-CN"] .cta h2 { max-width: 820px; font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
html[lang="zh-CN"] .eyebrow,
html[lang="zh-CN"] .hero-fact .k,
html[lang="zh-CN"] .card .k,
html[lang="zh-CN"] .contact-block .k,
html[lang="zh-CN"] .social-row,
html[lang="zh-CN"] .footer-bottom { letter-spacing: 0.08em; }
html[lang="zh-CN"] .hero-fact .k,
html[lang="zh-CN"] .card .k,
html[lang="zh-CN"] .contact-block .k { font-size: 0.6875rem; }
html[lang="zh-CN"] .footer-col h3 {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
}
html[lang="zh-CN"] .nav-panel-label,
html[lang="zh-CN"] .nav-panel a small { letter-spacing: 0.06em; }
.zh-actions { display: flex; align-items: center; gap: 18px; }
.zh-lang {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.zh-lang:hover { color: var(--pine); }

@media (max-width: 760px) {
  :root { --utility-h: 34px; --header-h: 60px; }
  .utility-inner { gap: 10px; min-height: var(--utility-h); }
  .utility-label { display: none; }
  .utility-social, .lang-switch { gap: 6px; font-size: 0.5625rem; letter-spacing: 0.04em; }
  .utility-social .icon { width: 14px; height: 14px; }
  .utility-social .social-link { width: 26px; min-height: 26px; padding: 0; border-radius: 50%; }
  .utility-social .social-name { display: none; }
  .utility-tel { margin-left: 2px; padding-left: 10px; gap: 5px; letter-spacing: 0.02em; }
  .utility-tel .icon { width: 13px; height: 13px; }
  /* email collapses to its icon on phones to keep the bar on one line */
  .utility-mail { margin-left: 2px; padding-left: 10px; gap: 0; }
  .utility-mail .icon { width: 13px; height: 13px; }
  .utility-mail span { display: none; }
  .lang-switch { white-space: nowrap; }
  .brand-logo { height: 20px; }
  .brand-mark { width: 26px; height: 26px; }
  .zh-actions { gap: 10px; }
  .zh-actions .btn { min-height: 40px; padding: 0 14px; font-size: 0.8rem; }
}

/* very narrow phones: phone number folds into its icon so nothing wraps */
@media (max-width: 420px) {
  .utility-tel { margin-left: 0; padding-left: 8px; gap: 0; }
  .utility-tel span { display: none; }
  .utility-mail { padding-left: 8px; }
}

@media (max-width: 560px) {
  .matrix-scroll { overflow-x: visible; }
  .matrix { min-width: 0; }
  .matrix thead { display: none; }
  .matrix tr {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
  }
  .matrix tr:last-child { border-bottom: 0; }
  .matrix td { padding: 0; border-bottom: 0; }
  .matrix td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .matrix td:nth-child(2) { grid-column: 1; grid-row: 2; margin-top: 4px; font-size: 0.8125rem; color: var(--muted); }
  .matrix td:nth-child(3) { grid-column: 2; grid-row: 1; padding-left: 14px; text-align: right; }
}

@media (max-width: 440px) {
  html[lang="zh-CN"] .page-hero h1 { font-size: clamp(1.9rem, 10.5vw, 2.4rem); }
}

/* ---------- document / chart figures ---------- */

.chart-figure {
  margin: 0;
  border: 1px solid var(--line);
  background: #fff;
  overflow-x: auto;
}
.chart-figure img {
  display: block;
  width: 100%;
  min-width: 720px;
  height: auto;
}
.chart-figure figcaption {
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: var(--card);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.chart-link {
  display: none;
  margin-top: 14px;
  font-size: 0.8125rem;
}
.chart-swipe {
  display: none;
  margin: 0;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  background: var(--card);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--faint);
}
@media (max-width: 760px) {
  /* 手机上保留整张图，字靠横向滑动放大看 */
  .chart-figure img { min-width: 900px; }
  .chart-swipe { display: block; }
  .chart-link { display: block; }
}

/* ---------- reliability test list ---------- */
.test-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  columns: 2;
  column-gap: 22px;
}
.test-list li {
  break-inside: avoid;
  display: flex;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.8125rem;
  line-height: 1.35;
}
.test-list li span {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  color: var(--faint);
  padding-top: 2px;
}
.test-list li em {
  font-style: normal;
  color: var(--amber);
}
@media (max-width: 1080px) {
  .test-list { columns: 1; }
  .test-list li { overflow-wrap: anywhere; }
}

/* utility bar: compact between the phone layout and the desktop layout
   断点必须与 .site-nav 折叠点（1080）对齐：1001–1080 这段一旦只折导航不收
   utility bar，语言切换器就会被挤到视口外（1024 实测横向溢出 89px）。 */
@media (min-width: 761px) and (max-width: 1080px) {
  .utility-label { display: none; }
  .utility-inner { gap: 12px; }
  .utility-social, .lang-switch { gap: 8px; }
  .utility-social .social-link {
    width: 26px;
    min-height: 26px;
    padding: 0;
    border-radius: 50%;
  }
  .utility-social .social-name,
  .utility-mail span { display: none; }
}

/* four-up cards are unreadable between the phone and desktop layouts */
@media (min-width: 761px) and (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- real product photos in product cards ---------- */
.product-visual.is-photo { background: #fff; padding: 20px; }
.product-visual.is-photo img {
  display: block;
  max-width: 100%;
  max-height: 248px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.product-grid.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) {
  .product-grid.two { grid-template-columns: 1fr; }
}

/* ---------- partner logo wall ---------- */
.logo-group + .logo-group { margin-top: 30px; }
.logo-group-label {
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.logo-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.logo-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.logo-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.logo-grid.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 560px; }
.logo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 24px 22px;
  background: #fff;
}
.logo-cell img {
  max-width: 100%;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (max-width: 760px) {
  .logo-grid.cols-4,
  .logo-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .logo-cell { min-height: 96px; padding: 16px; }
  .logo-cell img { max-height: 36px; }
}

/* ---------- 13-model comparison table ---------- */
.data-table.compare { font-size: 0.8125rem; }
.table-scroll .data-table.compare { min-width: 900px; }
.table-scroll .data-table.compare th,
.table-scroll .data-table.compare td { padding: 12px 8px; }
.table-scroll .data-table.compare th:first-child,
.table-scroll .data-table.compare td:first-child { padding-left: 14px; }
.data-table .th-sub { display: block; margin-top: 2px; font-size: 0.5rem; letter-spacing: 0.08em; color: var(--faint); opacity: 0.85; }
/* keep short CJK spec values from breaking mid-word */
.spec-mini b { word-break: keep-all; }

.table-hint { display: none; margin: 0 0 10px; }
@media (max-width: 1080px) { .table-hint { display: block; } }

/* ---------- product detail pages ---------- */
.detail-hero { padding: 26px 0 54px; }
.detail-hero .container { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: start; }
.detail-hero h1 { margin: 16px 0 8px; font-size: clamp(2.2rem, 3.6vw, 3.1rem); letter-spacing: -0.02em; }
.detail-sub { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.detail-hero .lead { max-width: 560px; margin-top: 20px; }
.detail-hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.detail-figure { margin: 0; padding: 34px; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; min-height: 340px; }
.detail-figure img { display: block; max-width: 100%; max-height: 400px; width: auto; height: auto; object-fit: contain; }
.detail-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 30px 0 0; background: var(--line); border: 1px solid var(--line); }
.detail-facts div { background: #fff; padding: 14px 16px; }
.detail-facts span { display: block; font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.detail-facts b { display: block; margin-top: 6px; font-weight: 500; font-size: 0.9375rem; }

.detail-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; }
.detail-main h2 { margin: 42px 0 14px; font-size: clamp(1.4rem, 2vw, 1.85rem); }
.detail-main h2:first-child { margin-top: 0; }
.detail-main > p + p { margin-top: 14px; }
.detail-main .checks { margin-top: 6px; }
.detail-side { display: grid; gap: 18px; align-content: start; }
.detail-side .side-card { position: static; }

.spec-list { border-top: 1px solid var(--line); max-width: 900px; }
.spec-list > div { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.spec-list dt { font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.spec-list dd { margin: 0; font-size: 0.9375rem; }

.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.related-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; background: #fff; border: 1px solid var(--line); text-decoration: none; }
.related-card:hover { border-color: var(--pine); }
.related-card .k { font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.related-card b { font-weight: 500; font-size: 1.05rem; color: var(--ink); }
.related-card span.note { font-size: 0.8125rem; color: var(--muted); }

@media (max-width: 1080px) {
  .detail-hero .container { grid-template-columns: 1fr; gap: 32px; }
  .detail-figure { min-height: 0; padding: 22px; }
  .detail-figure img { max-height: 300px; }
  .detail-body { grid-template-columns: 1fr; gap: 36px; }
  .detail-side { position: static; }
  .related-grid { grid-template-columns: 1fr; }
  .spec-list > div { grid-template-columns: 150px minmax(0, 1fr); gap: 14px; }
}

/* ---------- links from product cards and the compare table ---------- */
.product-body .card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; padding-bottom: 2px; font-size: 0.8125rem; color: var(--pine); text-decoration: none; border-bottom: 1px solid rgba(13, 77, 58, 0.35); }
.product-body .card-link:hover { color: var(--pine-deep); border-bottom-color: var(--pine-deep); }
.product-card { position: relative; cursor: pointer; }
.product-body .card-link::after { content: ""; position: absolute; inset: 0; }
.product-card .product-body > a.text-link::after { content: ""; position: absolute; inset: 0; }
.product-card:focus-within { border-color: var(--pine); }
.data-table td a { color: var(--pine); text-decoration: none; border-bottom: 1px solid rgba(13, 77, 58, 0.3); }
.data-table td a:hover { border-bottom-color: var(--pine); }

/* ---------- factory photo strip ---------- */
/* one treatment across mixed sources (floor snapshots and stock) so a page reads as one archive */
.shot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.shot { margin: 0; border: 1px solid var(--line); background: #fff; overflow: hidden; }
.shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; filter: contrast(1.02); }
.shot figcaption { display: flex; gap: 10px; padding: 11px 13px; font-size: 0.75rem; line-height: 1.45; color: var(--muted); }
.shot figcaption b { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.08em; color: var(--faint); }
@media (max-width: 760px) { .shot-grid { grid-template-columns: 1fr; } }

/* ---------- model name links (home + index cards) ---------- */
.model-link { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(13, 77, 58, 0.3); }
.model-link:hover { color: var(--pine); border-bottom-color: var(--pine); }
.side-list b .model-link { border-bottom-color: rgba(13, 77, 58, 0.3); }

/* ---------- section components: one head pattern across the site ---------- */

/* label sits on a hairline, headline starts on the content axis */
.sec-head,
.band-head {
  display: block;
  position: relative;
  padding-top: 26px;
  margin-bottom: 34px;
  border-top: 1px solid var(--line-dark);
}
.sec-head > div:first-child,
.band-head > div:first-child {
  position: absolute;
  top: -8px;
  left: 0;
  padding-right: 18px;
  background: var(--paper);
}
.section.tint .sec-head > div:first-child,
.band.tint .band-head > div:first-child { background: var(--paper-deep); }
.sec-head h2,
.band-head h2 { margin: 0; }
.sec-head .lead,
.band-head .lead { margin-top: 16px; }

/* a split that opens a section starts on the same hairline */
.split:has(> div:first-child > .eyebrow) {
  position: relative;
  padding-top: 26px;
  border-top: 1px solid var(--line-dark);
}
.split:has(> div:first-child > .eyebrow) > div:first-child > .eyebrow {
  position: absolute;
  top: -8px;
  left: 0;
  padding-right: 18px;
  background: var(--paper);
}
.section.tint .split:has(> div:first-child > .eyebrow) > div:first-child > .eyebrow,
.band.tint .split:has(> div:first-child > .eyebrow) > div:first-child > .eyebrow { background: var(--paper-deep); }
.split:has(> div:first-child > .eyebrow) > div:first-child > h2 { margin-top: 0 !important; }

/* process: three steps across, two rows, weeks on a common baseline */
.process-step {
  display: flex;
  flex-direction: column;
  border-right: 0;
}
.process-step::before { display: none; }
.process-step .step-k { gap: 12px; font-size: 1rem; letter-spacing: 0.02em; color: var(--pine); }
.process-step .step-k .icon { margin-left: auto; }
.process-step h3 { margin: 14px 0 8px; font-size: 1.0625rem; }
.process-step p { font-size: 0.875rem; line-height: 1.5; }
.process-step .time { margin-top: auto; padding-top: 16px; }

@media (min-width: 761px) {
  .process {
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--line-dark);
    margin-top: 0;
  }
  .process-step { padding: 26px 34px 24px 0; border-bottom: 1px solid var(--line); }
  .process-step:nth-child(3n+2),
  .process-step:nth-child(3n) {
    padding-left: 34px;
    border-left: 1px solid var(--line);
  }
  .process-step:nth-child(n+4) { border-bottom: 1px solid var(--line-dark); }
  .process-step:nth-child(5):last-child { grid-column: span 2; }
}

@media (min-width: 761px) and (max-width: 900px) {
  .process { grid-template-columns: 1fr 1fr; }
  .process-step:nth-child(3n+2),
  .process-step:nth-child(3n) { padding-left: 0; border-left: 0; }
  .process-step:nth-child(even) { padding-left: 30px; border-left: 1px solid var(--line); }
  .process-step:nth-child(n+4) { border-bottom: 1px solid var(--line); }
  .process-step:nth-child(n+5) { border-bottom: 1px solid var(--line-dark); }
  .process-step:nth-child(5):last-child { grid-column: auto; }
}

/* metrics: numbers over a hairline instead of a boxed grid */
.metric-grid { border: 0; background: none; gap: 40px; }
.metric { padding: 22px 0 0; background: none; border-top: 2px solid var(--pine); }
.metric .v { font-size: 3.4rem; }
.metric .k { margin-top: 10px; }
.metric p { font-size: 0.875rem; line-height: 1.45; }

.cert .link { margin-top: auto; padding-top: 18px; }

@media (max-width: 760px) {
  .process-step h3 { margin: 10px 0 6px; font-size: 1rem; }
  .process-step p { font-size: 0.8125rem; }
  .metric-grid { gap: 28px; }
  .metric .v { font-size: 2.4rem; }
}

/* ---------- breathing rhythm ---------- */
/* hairline grids read as one dense table; separated outlined cards read as a row of objects.
   side-shot puts an image beside a text block so the page gains pictures without gaining height. */

body.home .section { padding: 84px 0; }

.sec-head,
.band-head { margin-bottom: 42px; }

.solution-grid,
.case-list,
.cert-grid {
  gap: 20px;
  border: 0;
  background: none;
}
.solution-card,
.case,
.cert { border: 1px solid var(--line); }
.solution-card { background: var(--card); }
.cert { padding-inline: 20px; }

.process-step p { line-height: 1.62; }
.metric p { line-height: 1.58; }

.side-shot { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.side-shot > * { min-width: 0; }
/* body.home rules carry an element-class specificity, so match it from above */
body.home .side-shot .process { grid-template-columns: 1fr 1fr; }
body.home .side-shot .metric-grid { grid-template-columns: 1fr 1fr; }
body.home .side-shot .case-list { grid-template-columns: 1fr 1fr; }
.side-shot .shot-aside { margin: 0; }
.side-shot .shot-aside img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--white);
  filter: contrast(1.02);
}
.side-shot .shot-aside figcaption {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.side-shot .shot-aside figcaption b { font-weight: 500; color: var(--ink-soft); }

/* one archive treatment for every scene photo on the home pages; product cutouts stay untouched */
body.home .card-photo img,
body.home .photo:not(.is-photo) img {
  filter: contrast(1.02);
}

@media (max-width: 1080px) {
  .side-shot { grid-template-columns: 1fr; gap: 26px; }
  .side-shot .shot-aside { max-width: 460px; }
}

/* ---------- review fixes ---------- */

/* side-shot 2-col process: the 3-col nth-child separators misfire on a 2-col grid */
body.home .side-shot .process .process-step {
  padding: 26px 28px 24px 0;
  border-left: 0;
  border-bottom: 1px solid var(--line);
}
body.home .side-shot .process .process-step:nth-child(even) {
  padding: 26px 0 24px 28px;
  border-left: 1px solid var(--line);
}
body.home .side-shot .process .process-step:nth-last-child(-n+2) {
  border-bottom: 0;
}

/* case cards: photo band across the top; stack the card at every breakpoint */
body.home .case {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 26px 22px;
}
body.home .case .card-photo {
  margin: -26px -22px 18px;
  aspect-ratio: 16 / 10;
}
body.home .case .numbers {
  display: flex;
  gap: 24px;
  margin-top: auto;
  border-top: 1px solid var(--line);
}
body.home .case .numbers .n { flex: 1 1 0; min-width: 0; }
body.home .case .numbers .k { font-size: 0.625rem; }

/* ---------- dark band ---------- */
/* one deep block per page so the paper run breaks; the process band carries it on the home page */

body.home .section.dark {
  background: var(--pine-deep);
  color: var(--paper);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
body.home .section.dark .sec-head { border-top-color: rgba(255, 255, 255, 0.18); }
body.home .section.dark .sec-head > div:first-child { background: var(--pine-deep); }
body.home .section.dark .sec-head h2 { color: var(--paper); }

body.home .section.dark .side-shot .process { border-top-color: rgba(255, 255, 255, 0.18); }
body.home .section.dark .side-shot .process .process-step {
  border-bottom-color: rgba(255, 255, 255, 0.14);
  border-left-color: rgba(255, 255, 255, 0.14);
}
body.home .section.dark .process-step .step-k { color: var(--acid); }
body.home .section.dark .process-step .step-k span {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
body.home .section.dark .process-step .step-k .icon { color: rgba(243, 241, 234, 0.42); }
body.home .section.dark .process-step h3 { color: var(--paper); }
body.home .section.dark .process-step p { color: #b9c9bf; }
body.home .section.dark .process-step .time { color: var(--acid); }

body.home .section.dark .shot-aside img { border-color: rgba(255, 255, 255, 0.18); background: var(--ink); }
body.home .section.dark .shot-aside figcaption { color: rgba(243, 241, 234, 0.58); }
body.home .section.dark .shot-aside figcaption b { color: var(--paper); }

body.home .section.dark .text-link { color: var(--acid); border-bottom-color: rgba(199, 232, 107, 0.4); }
body.home .section.dark .text-link:hover { border-bottom-color: var(--acid); }

/* on the deep band the aside photo fills the row instead of leaving a void */
@media (min-width: 1081px) {
  body.home .section.dark .side-shot { align-items: stretch; }
  body.home .section.dark .shot-aside { display: flex; flex-direction: column; }
  body.home .section.dark .shot-aside img {
    flex: 1 1 auto;
    min-height: 0;
    aspect-ratio: auto;
    object-fit: cover;
  }
}

/* ---------- dark hero ---------- */
/* the first screen goes pine so it reads as the same material as the process
   band above the fold; near-black sat outside the warm paper/green palette */

body.home .hero {
  background: var(--pine-deep);
  color: var(--paper);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
body.home .hero::after {
  background-image:
    linear-gradient(to right, rgba(243, 241, 234, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(243, 241, 234, 0.05) 1px, transparent 1px);
}
body.home .hero h1 { color: var(--paper); }
body.home .hero h1 em { color: var(--acid); }

body.home .hero .btn-primary { background: var(--acid); color: var(--ink); }
body.home .hero .btn-primary:hover { background: #d8f18c; }
body.home .hero .btn-ghost { border-color: rgba(243, 241, 234, 0.3); color: var(--paper); }
body.home .hero .btn-ghost:hover { border-color: var(--acid); color: var(--acid); }

body.home .hero .schematic {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}

/* ---------- trust data force ---------- */
/* the four proof points are the first numbers on the page; give them the size of numbers */

body.home .trust-item { padding: 26px 22px 24px; }
body.home .trust-item .v { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; }
body.home .trust-item .v .n {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 3.8vw, 3.2rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--pine);
  font-variant-numeric: tabular-nums;
}
body.home .trust-item .v .u { font-size: 0.75rem; line-height: 1.35; color: var(--muted); }

@media (max-width: 760px) {
  body.home .trust-item { padding: 18px 16px; }
  body.home .trust-item .v { flex-wrap: wrap; gap: 4px 10px; }
  body.home .trust-item:last-child { grid-column: auto; }
}

@media (max-width: 1080px) {
  body.home .trust-item .v { flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* ---------- factory strip ---------- */
/* three floors between the process band and the protocol matrix; real photos, no headline */

.factory-band {
  padding: 30px 0 46px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.factory-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.factory-strip figure { margin: 0; }
.factory-strip img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--line);
  filter: contrast(1.02);
}
.factory-strip figcaption {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.factory-strip figcaption b { font-weight: 500; color: var(--ink-soft); }

@media (max-width: 760px) {
  .factory-band { padding: 22px 0 36px; }
  .factory-strip { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 440px) {
  body.home .trust-inner { grid-template-columns: 1fr 1fr; }
  body.home .trust-item { padding: 20px 16px; }
  body.home .trust-item .v .n { font-size: 2rem; }
}

/* ---------- batch 3: industrial texture (home only) ---------- */

/* fine dot matrix on the dark process band */
body.home .section.dark {
  background-color: var(--pine-deep);
  background-image: radial-gradient(rgba(243, 241, 234, 0.06) 1px, transparent 1.1px);
  background-size: 11px 11px;
}

/* drawing-frame corner ticks on the hero schematic */
body.home .schematic::before,
body.home .schematic::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(243, 241, 234, 0.5);
  pointer-events: none;
}
body.home .schematic::before {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
}
body.home .schematic::after {
  right: -1px;
  bottom: -1px;
  border-left: 0;
  border-top: 0;
}

/* ---------- batch 3: restrained motion (home only, opt-in via html.motion) ---------- */

/* The owner's call: motion plays for everyone, including visitors whose OS
   animation switch is off. The only opt-out left is JS not running at all. */

/* entrance: the hero builds itself on load, no scrolling required */
html.motion body.home .hero .eyebrow,
html.motion body.home .hero h1,
html.motion body.home .hero .lead,
html.motion body.home .hero-actions,
html.motion body.home .hero-visual {
  animation: motion-rise 0.85s cubic-bezier(0.22, 0.68, 0.24, 1) both;
}
html.motion body.home .hero .eyebrow { animation-delay: 0.05s; }
html.motion body.home .hero h1 { animation-delay: 0.14s; }
html.motion body.home .hero .lead { animation-delay: 0.24s; }
html.motion body.home .hero-actions { animation-delay: 0.34s; }
html.motion body.home .hero-visual { animation-delay: 0.2s; }

/* scroll reveal: only below the first screen */
html.motion body.home .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.68, 0.24, 1) var(--d, 0ms),
    transform 0.7s cubic-bezier(0.22, 0.68, 0.24, 1) var(--d, 0ms);
}
html.motion body.home .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* the remote draws itself */
html.motion body.home .schematic .draw-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: schematic-draw 1.35s cubic-bezier(0.35, 0.1, 0.2, 1) 0.65s forwards;
}

@keyframes motion-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes schematic-draw {
  to { stroke-dashoffset: 0; }
}

/* ---------- batch 4: home palette (green as content, not as a wash) ---------- */
/* The owner's read on the built page: the mid-page beige ran together into one
   dirty stretch. The palette now lives in :root, so every page sits on the same
   near-white base; the green comes from blocks rather than from a tint. */

/* the product cards carry the green: photograph on top, pine panel below */
body.home .product-card:hover { border-color: var(--line-dark); }
body.home .product-visual { border-bottom-color: rgba(255, 255, 255, 0.14); }
body.home .product-body { background: var(--pine-deep); color: var(--paper); }
body.home .product-body h3,
body.home .product-body h3 a { color: var(--paper); }
body.home .product-body .series { color: rgba(243, 241, 234, 0.55); }
body.home .product-body .series .icon { color: var(--acid); }
body.home .product-body .model { color: rgba(243, 241, 234, 0.6); }
body.home .product-body p { color: rgba(243, 241, 234, 0.72); }
body.home .product-body .text-link { color: var(--acid); }
body.home .product-body .text-link:hover { color: #d8f18c; }

/* certificate tiles sit as six green blocks, separated by the page, not by a grid line */
body.home .cert { background: var(--pine-deep); border-color: var(--pine-deep); color: var(--paper); }
body.home .cert:hover { background: #104a37; border-color: #104a37; }
body.home .cert .abbr { color: var(--paper); }
body.home .cert .name { color: rgba(243, 241, 234, 0.66); }
body.home .cert .link { color: var(--acid); }

/* footer: same green close on every page, with the acid label markers */
.site-footer {
  background: var(--pine-deep);
  border-top: 1px solid rgba(199, 232, 107, 0.55);
  color: rgba(243, 241, 234, 0.72);
}
.site-footer .brand-logo { filter: brightness(0) invert(1); }
.site-footer .brand-sub { color: var(--acid); }
.site-footer .footer-brand p { color: rgba(243, 241, 234, 0.66); }
.site-footer .footer-col h3,
.site-footer .footer-social .fs-label {
  position: relative;
  padding-left: 14px;
  color: rgba(243, 241, 234, 0.48);
}
.site-footer .footer-col h3::before,
.site-footer .footer-social .fs-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  background: var(--acid);
}
.site-footer .footer-col a { color: rgba(243, 241, 234, 0.8); }
.site-footer .footer-col a:hover { color: var(--acid); }
.site-footer .footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.12);
  color: rgba(243, 241, 234, 0.48);
}
.site-footer .footer-bottom a { color: rgba(243, 241, 234, 0.62); }
.site-footer .footer-bottom a:hover { color: var(--acid); }
.site-footer .footer-social { border-top-color: rgba(255, 255, 255, 0.12); }
.site-footer .social-row .fs-label { color: rgba(243, 241, 234, 0.45); }
.site-footer .social-row .social-link { color: rgba(243, 241, 234, 0.68); }
.site-footer .social-row .social-link .icon { color: var(--acid); }
.site-footer .social-row a:hover { color: var(--acid); }
.site-footer .footer-tel .icon { color: var(--acid); }

/* the Chinese home page carries the same two blocks in a different structure:
   the model list and the certificate list sit inside plain .card shells */
body.home #platforms .card,
body.home #quality .card {
  background: var(--pine-deep);
  border-color: var(--pine-deep);
  color: var(--paper);
}
body.home #platforms .card .k,
body.home #quality .card .k { color: rgba(243, 241, 234, 0.55); }
body.home #platforms .card .k .icon,
body.home #quality .card .k .icon { color: var(--acid); }
body.home #platforms .card li,
body.home #quality .card li { border-bottom-color: rgba(255, 255, 255, 0.14); }
body.home #platforms .card b,
body.home #quality .card b { color: var(--paper); }
body.home #platforms .card .model-link,
body.home #quality .card .model-link {
  color: var(--paper);
  border-bottom-color: rgba(199, 232, 107, 0.45);
}
body.home #platforms .card .model-link:hover,
body.home #quality .card .model-link:hover {
  color: var(--acid);
  border-bottom-color: var(--acid);
}
body.home #platforms .card span,
body.home #quality .card span { color: rgba(243, 241, 234, 0.68); }

/* on a phone six full-width green tiles in a row is too much green; hold two abreast */
@media (max-width: 440px) {
  body.home .cert-grid { grid-template-columns: 1fr 1fr; }
  body.home .cert { min-height: 112px; padding: 16px 14px; }
  body.home .cert .abbr { font-size: 1rem; }
}

/* ---------- batch 5: the home's language on the inner pages ---------- */


/* ---------- batch 5: the home's language on the inner pages ---------- */
/* Every inner page now opens in the same pine as the home first screen, carries one
   green anchor in the body (the sticky aside, or the table head) and closes in the
   green footer, so the language holds from the first screen to the last. */

.page-hero,
.detail-hero {
  position: relative;
  background-color: var(--pine-deep);
  background-image: radial-gradient(rgba(243, 241, 234, 0.06) 1px, transparent 1.1px);
  background-size: 11px 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--paper);
}
.page-hero::before { display: none; }
.page-hero h1,
.detail-hero h1 { color: var(--paper); }
.page-hero .lead,
.detail-hero .lead { color: rgba(243, 241, 234, 0.76); }
.page-hero .eyebrow,
.detail-hero .eyebrow { color: rgba(243, 241, 234, 0.62); }
.page-hero .eyebrow::before,
.detail-hero .eyebrow::before { background: var(--acid); }
/* 2026-11-02：这条原本是全局的（.detail-sub 只出现在深色 hero 里时没暴露问题）。
   新闻详情把 .detail-sub 用在浅色 .news-header 上，全局浅色 = 几乎看不见。
   按参考站改法收窄到深色 hero。 */
.page-hero .detail-sub,
.detail-hero .detail-sub { color: rgba(243, 241, 234, 0.55); }

.page-hero .breadcrumb,
.detail-hero .breadcrumb { color: rgba(243, 241, 234, 0.5); }
.page-hero .breadcrumb a:hover,
.detail-hero .breadcrumb a:hover { color: var(--acid); }
.page-hero .breadcrumb .sep,
.detail-hero .breadcrumb .sep { color: rgba(243, 241, 234, 0.28); }

.page-hero .muted,
.page-hero .small,
.detail-hero .muted,
.detail-hero .small { color: rgba(243, 241, 234, 0.62); }

.page-hero .btn-primary,
.detail-hero .btn-primary { background: var(--acid); color: var(--ink); }
.page-hero .btn-primary:hover,
.detail-hero .btn-primary:hover { background: #d8f18c; }
.page-hero .btn-ghost,
.detail-hero .btn-ghost { border-color: rgba(243, 241, 234, 0.3); color: var(--paper); }
.page-hero .btn-ghost:hover,
.detail-hero .btn-ghost:hover { border-color: var(--acid); color: var(--acid); }

.page-hero .hero-aside { border-left-color: rgba(255, 255, 255, 0.16); }
.page-hero .hero-aside .aside-label {
  position: relative;
  padding-left: 14px;
  color: rgba(243, 241, 234, 0.55);
}
.page-hero .hero-aside .aside-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  background: var(--acid);
}
.page-hero .hero-aside li { border-bottom-color: rgba(255, 255, 255, 0.14); }
.page-hero .hero-aside li b { color: var(--paper); }
.page-hero .hero-aside li span { color: rgba(243, 241, 234, 0.66); }

.hero-photo .frame { border-color: rgba(255, 255, 255, 0.16); background: transparent; }
.hero-photo figcaption { color: rgba(243, 241, 234, 0.55); }
.hero-photo figcaption b { color: var(--paper); }

.detail-figure { background: var(--paper); border-color: rgba(255, 255, 255, 0.14); }
.detail-facts {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.16);
}
.detail-facts div { background: transparent; }
.detail-facts span { color: rgba(243, 241, 234, 0.52); }
.detail-facts b { color: var(--paper); }

/* the sticky aside is the page's green anchor */
.side-card {
  background: var(--pine-deep);
  border-color: var(--pine-deep);
  color: var(--paper);
}
.side-card .k { color: rgba(243, 241, 234, 0.55); }
.side-card .k .icon { color: var(--acid); }
.side-card h3 { color: var(--paper); }
.side-card p,
.side-card .tiny { color: rgba(243, 241, 234, 0.72); }
.side-card .side-list li,
.side-card li { border-bottom-color: rgba(255, 255, 255, 0.14); }
.side-card .side-list b,
.side-card li b { color: var(--paper); }
.side-card .side-list span,
.side-card li span { color: rgba(243, 241, 234, 0.66); }
.side-card .checks li::before { border-color: var(--acid); }
.side-card .checks li::after { background: var(--acid); }
.side-card a:not(.btn) { color: var(--acid); }
.side-card a:not(.btn):hover { color: #d8f18c; }
.side-card .btn-primary { background: var(--acid); color: var(--ink); }
.side-card .btn-primary:hover { background: #d8f18c; }
.side-card .btn-ghost { border-color: rgba(243, 241, 234, 0.3); color: var(--paper); }
.side-card .btn-ghost:hover { border-color: var(--acid); color: var(--acid); }

/* table heads carry the green, so a data page has one too */
.table-scroll .data-table th,
.data-table th {
  background: var(--pine-deep);
  color: rgba(243, 241, 234, 0.78);
  border-bottom-color: var(--pine-deep);
}
.table-scroll { background: var(--card); }

/* ==========================================================================
   V3cms 适配区（移植之外的唯一新增内容）
   目的：把 V3cms 基线会输出、但 site.css 里没有对应规则的 3 组结构补上外观，
         并给 blocks.php 的 variants.wrap 提供类名挂点。
   约束：① 全部是「新增选择器」，不改上面任何既有规则 → 像素比对不受影响；
         ② 禁 !important（site.css 里一个都没有）；
         ③ 类名不新造版式语义，只做「外壳外观」与「变体挂点」。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) 分页 —— app/util/Page.php 输出的 HTML 契约：
        <div class="page"><a href>1</a><span class="current">2</span><a class="disabled">…</a></div>
   基线外观来自 bootstrap.css / wyt-front.css，两条链在本模板已切断，故补在此处。
   -------------------------------------------------------------------------- */
.page {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 40px 0 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.page a,
.page > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card);
  color: var(--ink);
  line-height: 1;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}

.page a:hover {
  border-color: var(--pine);
  color: var(--pine);
}

.page > span.current {
  border-color: var(--pine);
  background: var(--pine);
  color: var(--white);
}

.page a.disabled,
.page > span.disabled {
  border-color: var(--line);
  background: var(--paper-deep);
  color: var(--line-dark);
  pointer-events: none;
}

.page .total,
.page > span.total {
  border: 0;
  background: none;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   2) 询盘弹窗 —— 沿用基线的 .wyt-modal DOM 契约（Inquiry/check 提交 + 验证码），
      只在这里重新定义外观，不改 DOM、不改提交逻辑。
   -------------------------------------------------------------------------- */
.wyt-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.wyt-modal.open {
  display: flex;
}

.wyt-modal .wyt-modal-mask {
  position: absolute;
  inset: 0;
  background: rgba(3, 21, 14, 0.58);
}

.wyt-modal .wyt-modal-card {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  box-shadow: 0 24px 60px rgba(3, 21, 14, 0.24);
}

.wyt-modal .wyt-modal-head h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.wyt-modal .wyt-modal-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.wyt-modal .wyt-modal-x:hover {
  border-color: var(--pine);
  color: var(--pine);
}

.wyt-modal .wyt-field {
  display: block;
  margin: 0 0 14px;
}

.wyt-modal .wyt-field > span {
  display: block;
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.wyt-modal input[type="text"],
.wyt-modal input[type="tel"],
.wyt-modal input[type="email"],
.wyt-modal textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.9375rem;
}

.wyt-modal textarea {
  min-height: 96px;
  resize: vertical;
}

.wyt-modal input:focus,
.wyt-modal textarea:focus {
  outline: 2px solid var(--pine);
  outline-offset: 1px;
}

.wyt-modal .wyt-grid2 {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.wyt-modal .wyt-code-img {
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
}

.wyt-modal .wyt-modal-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--pine);
  border-radius: 4px;
  background: var(--pine);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.wyt-modal .wyt-modal-submit:hover {
  background: var(--pine-deep);
  border-color: var(--pine-deep);
}

/* --------------------------------------------------------------------------
   3) blocks.php variants.wrap 挂点
      SectionRegistry 会把 wrap 类名（如 "serow-scenes is-plain"）写到 section 外层，
      后台「板块外观」的底图 / 显隐 / 顺序契约依赖这些类名存在。
      这里只定义「没有 site.css 等价物」的差异化部分，其余留空(零覆盖)。
   -------------------------------------------------------------------------- */

/* serow-scenes / serow-catalog / serow-work / serow-metrics：site.css 的网格类
   （.solution-grid / .product-grid / .case-list / .metric-grid）已自带间距，
   此处仅做「变体切换」的兜底，空规则也必须存在。 */
.serow-scenes,
.serow-catalog,
.serow-work,
.serow-metrics,
.serow-flow,
.serow-split,
.serow-faq,
.serow-cta {
  display: block;
}

.serow-scenes.is-plain .card-photo {
  display: none;
}

.serow-work.is-grid .case-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.serow-metrics.is-grid .metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 注意：这里不能给 .serow-faq 本身设 display:grid。
   faq 版式的结构是 section > .container > .split > div + div.faq，
   .container 只有一个孩子；一旦把 section 变成两列栅格，整个容器会被塞进
   第一列、正文掉到半幅宽（2026-11-02 线上复现：.faq 只剩 186px）。
   分栏交给里面的 .split（1.25fr / 0.75fr）即可，与参考站一致。 */

.serow-cta.is-bar {
  background: var(--pine-tint);
  color: var(--ink);
}

.serow-cta.is-bar h2 {
  color: var(--ink);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
}

.serow-cta.is-bar .eyebrow,
.serow-cta.is-bar p {
  color: var(--pine);
}

@media (max-width: 1080px) {
  .serow-work.is-grid .case-list,
  .serow-metrics.is-grid .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .serow-work.is-grid .case-list,
  .serow-metrics.is-grid .metric-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 富文本 / 编辑器内容兜底（客户后台粘贴的 HTML 不会有 site.css 的类名） */
.prose img,
.wyt-modal img {
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   4) 网格列数修饰类（blocks.sections[].variants 里的 cols-2 / cols-3）
      site.css 的 .solution-grid 自带 4 列栅格与 media query，直接叠 .grid-N
      会破坏列宽计算（实测导致卡片变窄、.idx 标签折行）。这里只在显式声明
      2 / 3 列时覆盖，其余一律沿用 site.css 原样。
   -------------------------------------------------------------------------- */
.serow-scenes.is-cols-3 .solution-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.serow-scenes.is-cols-2 .solution-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1080px) {
  .serow-scenes.is-cols-3 .solution-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .serow-scenes.is-cols-2 .solution-grid,
  .serow-scenes.is-cols-3 .solution-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------------------
   同节续接（T04 单页族）
   一节内容被后台拆成多个 band 时（「标题 + 组织架构图 + 五个中心的卡片」是
   原站的一条 band），两段之间不能出现分隔线和双份留白，否则一条 band 会被
   看成两条。第一段挂 is-cont-start 去掉下边框与下留白，后续段挂 is-cont
   去掉上留白，视觉上重新缝成一整块。
   --------------------------------------------------------------------------- */
.section.is-cont-start,
.band.is-cont-start { border-bottom: 0; padding-bottom: 0; }

.section.is-cont,
.band.is-cont { padding-top: 0; }

/* 内页 .band 里直排的 h3（「小标题 + 一段话」，不在卡片里）需要一个下边距。
   选择器限定成 .container 的直接子元素，避免盖掉 .card h3 的既有节奏。 */
.band > .container > h3 { margin-bottom: 0.5rem; }
.band > .container > h3 + p { margin-top: 0; }

/* ---------------------------------------------------------------------------
   询盘表单补丁（T04-B）
   site.css 里没有这三条：分组标题、提交状态、成功卡片。
   结构与 .field 的既有节奏保持一致，不自造新的视觉语言。
   --------------------------------------------------------------------------- */
.field .field-label,
.field label.field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 8px;
}

.field label i { color: #b3261e; font-style: normal; margin-left: 2px; }

.form-status {
  margin: 14px 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted);
}

.form-status.is-error { color: #b3261e; }
.form-status.is-sending { color: var(--muted); }

.form-confirm {
  max-width: 640px;
  padding: 8px 0 4px;
}

.form-confirm h2 { margin: 10px 0 14px; font-size: clamp(1.6rem, 2.6vw, 2.2rem); }

/* 查询器：错误提示与结果卡的距离，site.css 里 .result 自带 margin-top */
.checker [data-check-hint] { margin-top: 12px; color: #b3261e; }

/* ==========================================================================
   新闻板块（2026-11-02 接入）
   --------------------------------------------------------------------------
   来源：参考站 site.css 的 "newsroom" 段，逐字移植（未改一个像素值）。
   为什么整段照搬而不是自己写：新闻列表是「100px 日期 + 正文 + 168px 缩略图」
   三列网格，首页新闻是「100px + 正文 + 168px + 28px 箭头」四列网格，
   列宽/间距/悬停底色全部是设计稿给的固定值，重写必偏。
   作用范围：.news-header / .news-list* / .news-item* / .news-home* /
   .article-band / .article-photo —— 全部是新闻专用类名，不污染其它页。
   ========================================================================== */

/* ---------- newsroom: index list and article header (scoped) ---------- */

.news-header {
  padding: 40px 0 32px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.news-header .breadcrumb { margin-bottom: 20px; }
.news-header h1 {
  max-width: 820px;
  margin: 12px 0 0;
  font-size: clamp(2rem, 3vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.news-header .detail-sub { margin-top: 14px; }
.news-header .lead { max-width: 700px; margin-top: 16px; }
body.news-article .news-header h1 {
  max-width: 800px;
  font-size: clamp(1.8rem, 2.7vw, 2.4rem);
  line-height: 1.18;
}
html[lang="zh-CN"] .news-header h1 { line-height: 1.35; }
html[lang="zh-CN"] .news-header .lead { max-width: 780px; }
html[lang="zh-CN"] body.news-article .news-header h1 { max-width: 880px; font-size: clamp(1.7rem, 2.4vw, 2.15rem); }

.news-list-band { padding-top: 36px; }
.news-list-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.news-list { list-style: none; margin: 0; padding: 0; }
.news-item { border-bottom: 1px solid var(--line); }
.news-item-link {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) 168px;
  gap: 28px;
  align-items: start;
  padding: 26px 0;
  color: inherit;
  text-decoration: none;
  transition: background-color 180ms ease;
}
.news-item-link:hover,
.news-item-link:focus-visible { background: #e3eee7; }
.news-item-link:hover time,
.news-item-link:focus-visible time { color: var(--pine); }
.news-item-link:hover .tag,
.news-item-link:focus-visible .tag { color: var(--pine); border-color: #a9c4b7; background: #f6faf7; }
.news-item-link:hover p,
.news-item-link:focus-visible p { color: #46564a; }
.news-item time {
  padding-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--faint);
}
.news-item .tag { transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease; }
.news-item h2 {
  margin: 8px 0 0;
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  font-weight: 500;
  line-height: 1.32;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
.news-item-link:hover h2,
.news-item-link:focus-visible h2 { color: var(--pine); text-decoration-color: rgba(13, 77, 58, 0.4); }
.news-item p {
  max-width: 620px;
  margin: 8px 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
}
.news-more {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.8125rem;
  color: var(--pine);
  border-bottom: 1px solid rgba(13, 77, 58, 0.3);
  transition: border-color 160ms ease;
}
.news-more .arw { display: inline-block; transition: transform 160ms ease; }
.news-item-link:hover .news-more { border-bottom-color: var(--pine); }
.news-item-link:hover .news-more .arw,
.news-item-link:focus-visible .news-more .arw { transform: translateX(4px); }
.news-item-thumb {
  display: block;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
}
.news-item-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.news-item-link:hover h2 { color: var(--pine); }
.news-item-link:hover .news-item-thumb { border-color: var(--pine); }

.article-band { padding-top: 40px; }
.article-photo { margin: 0 0 34px; }
.article-photo img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--card);
  border: 1px solid var(--line);
}

.news-home { border-top: 2px solid var(--ink); }
.news-home-item {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) 168px 28px;
  gap: 24px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: background-color 180ms ease;
}
.news-home-item time {
  padding-top: 3px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--faint);
  transition: color 180ms ease;
}
.news-home-item .tag { transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease; }
.news-home-item h3 {
  margin: 8px 0 0;
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  font-weight: 500;
  line-height: 1.32;
  color: var(--ink);
  transition: color 180ms ease;
}
.news-home-item p {
  max-width: 680px;
  margin: 7px 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
}
.news-home-thumb {
  display: block;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  transition: border-color 180ms ease;
}
.news-home-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.news-home-item .arw {
  padding-top: 24px;
  color: var(--pine);
  transition: transform 180ms ease;
}
.news-home-item:hover,
.news-home-item:focus-visible { background: #e3eee7; }
.news-home-item:hover time,
.news-home-item:focus-visible time { color: var(--pine); }
.news-home-item:hover h3,
.news-home-item:focus-visible h3 { color: var(--pine); }
.news-home-item:hover .tag,
.news-home-item:focus-visible .tag { color: var(--pine); border-color: #a9c4b7; background: #f6faf7; }
.news-home-item:hover .arw,
.news-home-item:focus-visible .arw { transform: translateX(4px); }
.news-home-item:hover .news-home-thumb,
.news-home-item:focus-visible .news-home-thumb { border-color: #a9c4b7; }

@media (max-width: 760px) {
  .news-header { padding: 30px 0 26px; }
  .news-header h1 { font-size: clamp(1.7rem, 6vw, 2.1rem); }
  body.news-article .news-header h1 { font-size: clamp(1.55rem, 5.4vw, 1.95rem); }
  .news-item-link { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; }
  .news-item time { padding-top: 0; }
  .news-item-thumb { display: none; }
  .news-item h2 { margin-top: 6px; }
  .article-band { padding-top: 28px; }
  .article-photo { margin-bottom: 26px; }
  .news-home-item { grid-template-columns: minmax(0, 1fr) 20px; gap: 8px 12px; padding: 20px 0; }
  .news-home-item time { grid-column: 1 / -1; padding-top: 0; }
  .news-home-thumb { display: none; }
  .news-home-item .arw { grid-column: 2; grid-row: 2; align-self: start; padding-top: 26px; }
}

/* --- V3cms 适配：新闻列表的分页器（参考站每页 6 篇，不分页，没有这套样式） --- */
.news-list-band .page { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.news-list-band .page a,
.news-list-band .page span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  background: var(--card);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--ink);
  text-decoration: none;
}
.news-list-band .page .current,
.news-list-band .page .active { background: var(--pine); border-color: var(--pine); color: #fff; }
.news-list-band .page a:hover { border-color: var(--pine); color: var(--pine); }