/* Hallmark · shape: Catalogue (multi-page corporate) · genre: modern-minimal · theme: Vantage (deal 2/3, seed industrial-robot-agv-manufacturer-1bb6·acd6bfc3·2026-11-09·r0) · job: enquire
 * hero: Stage (index) / Banner (subpages) · nav: edge-aligned, one action · footer: mast · imagery: photographs, AI stand-ins in slots · signature: the live AGV point cloud with ≤5 mm callouts · vantage: object/steel
 * axes: dark/grotesk-sans/chromatic-lime · posture: restrained · contrast: pass · fold: pass · v2.0.0
 * finish-review: in-thread · sloplint render clean (0 FAIL, 0 REFLEX, 0 WARN) · 12 waived on record · 46a dismissed with source (client's live cases page) */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, corporate claims could fit any robot maker; anchored every section to the client's own figures (≤5 mm, 99.8%, 1000㎡) and the AGV cloud */
/* Hallmark · waive 1 · two families declared: Geologica leads the display stack, CJK system faces carry body · mainland deployment, no reliable webfont CDN; no network font request, Geologica renders when locally installed */
/* Hallmark · waive 44c · subpage heroes use the Banner posture, stamped hero: Stage (index) / Banner (subpages) · banner heroes end mid-screen by design, first section starts within the first screen */
/* Hallmark · waive 79 · the cases index keeps the Banner posture · the first case row is already visible inside the first screen, the page is an index not a full-bleed hero */
/* Hallmark · waive 77 · the FAQ lists the only two real questions (AGV 与 AMR 的选择、是否支持定制) · a third question would be an invented fact, the rows span the full container */
/* Hallmark · dismissed 46a · cases.html 的 99.9% 等成效数据逐条取自客户现有案例页（page_cases.html），非编造 */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --font-display: "Geologica", "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
  --font-body: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
  --display-weight: 400;
}

/* ---------- chrome ---------- */
.nav {
  position: sticky; top: 0; z-index: var(--z-sticky-nav);
  background: color-mix(in oklab, var(--color-paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.nav__bar { display: flex; align-items: center; gap: var(--space-xl); min-height: 64px; }
.brand { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; color: var(--color-ink); text-decoration: none; letter-spacing: 0.02em; white-space: nowrap; }
.brand b { color: var(--color-accent); font-weight: 700; }
.nav__links { display: flex; gap: var(--space-lg); list-style: none; margin: 0 auto; padding: 0; }
.nav__links a { font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none; padding: var(--space-xs) var(--space-2xs); white-space: nowrap; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--color-ink); }
.nav__links a[aria-current="page"] { box-shadow: inset 0 calc(-1 * var(--rule-hair)) var(--color-accent); }
.nav__cta { font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none; white-space: nowrap; }
.nav__cta:hover { color: var(--color-accent); }
.nav__toggle { display: none; background: none; border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-card); min-height: 44px; min-width: 44px; color: var(--color-ink); cursor: pointer; align-items: center; justify-content: center; }
.nav__toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.nav__toggle:active { background: var(--color-paper-2); }
.nav__toggle[disabled] { opacity: 0.55; cursor: not-allowed; }
@media (max-width: 60rem) {
  .nav__toggle { display: inline-flex; margin-left: auto; }
  .nav__links, .nav__cta { display: none; }
  .nav.is-open .nav__links { display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-md) 0 var(--space-lg); margin: 0; }
  .nav.is-open .nav__cta { display: block; padding: var(--space-sm) 0; }
}

/* footer */
.footer { border-top: var(--rule-hair) solid var(--color-rule); padding: var(--space-3xl) 0 var(--space-2xl); }
.footer__mast { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); }
.footer h2 { font-size: var(--text-title); margin-bottom: var(--space-md); }
.footer p, .footer address { font-style: normal; color: var(--color-muted); font-size: var(--text-sm); max-width: 32ch; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.footer a { color: var(--color-ink-2); text-decoration: none; }
.footer a:hover { color: var(--color-accent); }
.footer__legal { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); font-size: var(--text-xs); display: flex; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
@media (max-width: 60rem) { .footer__mast { grid-template-columns: 1fr; } }

/* ---------- shared section grammar ---------- */
.section { padding-block: var(--section-gap-s); }
.section--tight { padding-block: var(--space-2xl); }
.section--rule { border-top: var(--rule-hair) solid var(--color-rule); }
.head-split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gap-columns); align-items: baseline; margin-bottom: var(--space-2xl); }
.head-split .lead { margin: 0; }
@media (max-width: 60rem) { .head-split { grid-template-columns: 1fr; gap: var(--space-md); } }

.band { background: var(--color-paper-2); color: var(--color-ink); border-block: var(--rule-hair) solid var(--color-rule); }
.band__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--gap-columns); align-items: center; padding-block: var(--space-2xl); }
.band__phone { font-family: var(--font-display); font-size: var(--text-display-s); font-weight: 300; font-variant-numeric: tabular-nums; line-height: 1; }
.band__phone .u { font-size: 0.4em; color: var(--color-muted); }
.band__meta { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-md); }
@media (max-width: 60rem) { .band__inner { grid-template-columns: 1fr; } }

/* buttons: one primary pill recipe */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-xl); border: 0; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font: 400 1rem/1 var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background var(--dur-short) var(--ease-out); }
.btn:hover { background: var(--color-accent-hi); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn--line { background: transparent; color: var(--color-ink); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule-2); }
.btn--line:hover { background: var(--color-paper-2); color: var(--color-ink); }
.btn--line:active { transform: none; }

/* corner-tick frame */
.ticks { position: relative; }
.ticks::before, .ticks::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: var(--rule-hair) solid var(--color-rule-2); -webkit-mask: conic-gradient(at var(--tick) var(--tick), transparent 75%, var(--color-ink) 0) 0 0 / calc(100% - var(--tick)) calc(100% - var(--tick)); mask: conic-gradient(at var(--tick) var(--tick), transparent 75%, var(--color-ink) 0) 0 0 / calc(100% - var(--tick)) calc(100% - var(--tick)); }

.num { font-variant-numeric: tabular-nums; font-weight: 400; }
.num .u { color: var(--color-muted); font-size: 0.6em; margin-left: 0.15em; }
figcaption { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-sm); }

/* reveal: visible without script */
.js .reveal { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- index hero ---------- */
.hero { min-height: calc(100dvh - 64px); display: grid; align-items: center; }
.hero__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-3xl); align-items: center; }
.hero h1 { margin-bottom: var(--space-lg); }
.hero .lead { color: var(--color-ink-2); margin-bottom: var(--space-xl); }
.hero__actions { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.hero__stage { position: relative; }
.hero__stage canvas { width: 100%; height: min(72dvh, 620px); display: block; }
.hero__stage figcaption { position: absolute; left: var(--space-xs); bottom: 0; }
.cloud-fig { margin: 0; }
@media (max-width: 60rem) {
  .hero { min-height: 0; padding-block: var(--space-2xl) var(--space-xl); }
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .hero__stage canvas { height: 340px; }
}

/* callouts on the cloud */
.callout { position: absolute; font-size: var(--text-sm); color: var(--color-ink-2); pointer-events: none; }
.callout::before { content: ""; position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--color-accent); left: -6px; top: 0.55em; }
.callout__fig { color: var(--color-ink); font-variant-numeric: tabular-nums; font-size: var(--text-lg); }

/* ---------- bento (products on index) ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); }
.bento__tile { position: relative; border-radius: var(--radius-card); overflow: hidden; background: var(--color-paper-2); min-height: 300px; display: flex; }
.bento__tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8) contrast(1.06); }
.bento__tile--lead { grid-column: span 8; min-height: 420px; }
.bento__tile--wide { grid-column: span 4; }
.tile__panel { position: relative; z-index: 1; margin-top: auto; width: 100%; padding: var(--space-lg); background: color-mix(in oklab, var(--color-paper) 82%, transparent); backdrop-filter: blur(6px); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-xs) var(--space-md); }
.tile__panel h3 { font-size: var(--text-lg); }
.tile__panel .num { color: var(--color-muted); font-size: var(--text-sm); white-space: nowrap; }
.tile__panel a { color: var(--color-ink); text-decoration: none; }
.tile__panel a:hover { color: var(--color-accent); }
.bento__row2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); grid-column: 1 / -1; }
@media (max-width: 60rem) {
  .bento__tile--lead, .bento__tile--wide { grid-column: 1 / -1; min-height: 300px; }
  .tile__panel h3 { font-size: 1rem; }
  .bento__row2 { grid-template-columns: minmax(0, 1fr); }
}

/* figures */
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.figures > div { padding: var(--space-lg) var(--space-lg); border-left: var(--rule-hair) solid var(--color-rule); }
.figures > div:first-child { border-left: 0; padding-left: 0; }
.figures dd { margin: 0; }
.figures dt { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-xs); }
.figures .figure { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.25rem, 3vw + 1rem, 3.75rem); line-height: 1; font-variant-numeric: tabular-nums; }
@media (max-width: 60rem) { .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } .figures > div:nth-child(odd) { border-left: 0; padding-left: 0; } }

/* split */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.split--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split__visual { margin: 0; }
.split__visual img { border-radius: var(--radius-card); width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; filter: saturate(0.8) contrast(1.06); }
.split h2 { margin-bottom: var(--space-md); }
.split p { color: var(--color-ink-2); margin-bottom: var(--space-md); }
@media (max-width: 60rem) { .split, .split--flip { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } }

/* steps */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); counter-reset: step; list-style: none; margin: 0; padding: 0; }
.steps--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.steps li { counter-increment: step; padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule-2); }
.steps li::before { content: counter(step); font-family: var(--font-display); font-weight: 300; font-size: var(--text-3xl); font-variant-numeric: tabular-nums; display: block; margin-bottom: var(--space-sm); color: var(--color-ink); }
.steps h3 { font-size: var(--text-lg); margin-bottom: var(--space-xs); }
.steps p { color: var(--color-muted); font-size: var(--text-sm); }
@media (max-width: 60rem) { .steps, .steps--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } .steps--five { grid-template-columns: minmax(0, 1fr); } }

/* contact facts */
.facts { border-top: var(--rule-hair) solid var(--color-rule); }
.facts > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.facts dt { color: var(--color-muted); font-size: var(--text-sm); }
.facts dd { margin: 0; }
.facts a { color: var(--color-ink); text-decoration: none; }
.facts a:hover { color: var(--color-accent); }
@media (max-width: 60rem) { .facts > div { grid-template-columns: 1fr; gap: var(--space-2xs); } }

/* rows / FAQ / certs */
.rows { border-top: var(--rule-hair) solid var(--color-rule); }
.row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.row dt { font-size: var(--text-title); font-weight: 400; }
.row dd { margin: 0; color: var(--color-ink-2); }
@media (max-width: 60rem) { .row { grid-template-columns: 1fr; gap: var(--space-xs); } }

/* banner hero (subpages) */
.banner { padding-block: var(--space-3xl) var(--space-xl); }
.banner .lead { color: var(--color-ink-2); }

/* product catalogue */
.catnav { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-xl); }
.catnav a { font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none; padding: var(--space-2xs) var(--space-md); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule-2); }
.catnav a:hover { color: var(--color-ink); background: var(--color-paper-2); }
.product { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; padding-block: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); scroll-margin-top: 96px; }
.product--flip .product__media { order: 2; }
.product__media { margin: 0; }
.product__media img { border-radius: var(--radius-card); width: 100%; object-fit: cover; aspect-ratio: 1; filter: saturate(0.8) contrast(1.06); }
.product h2 { font-size: var(--text-section); margin-bottom: var(--space-sm); }
.product .product__tags { color: var(--color-muted); font-size: var(--text-sm); margin-bottom: var(--space-lg); }
.specs { width: 100%; border-collapse: collapse; margin-bottom: var(--space-lg); }
.specs th { text-align: left; color: var(--color-muted); font-size: var(--text-sm); font-weight: 400; padding: var(--space-sm) var(--space-md) var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); width: 38%; }
.specs td { font-variant-numeric: tabular-nums; padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.specs tr:last-child th, .specs tr:last-child td { border-bottom: 0; }
.product p.scenario { color: var(--color-ink-2); margin-bottom: var(--space-lg); }
.product__actions { display: flex; gap: var(--space-md); flex-wrap: wrap; }
@media (max-width: 60rem) { .product { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); } .product--flip .product__media { order: 0; } }

/* case index */
.case { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 4fr) minmax(0, 6fr); gap: var(--gap-columns); padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.case h2 { font-size: var(--text-xl); }
.case__industry { color: var(--color-muted); font-size: var(--text-sm); }
.case p { color: var(--color-ink-2); margin-bottom: var(--space-md); }
.case__wins { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.case__wins li { color: var(--color-ink-2); font-size: var(--text-sm); }
.case__wins .num { color: var(--color-ink); }
.case--lead { border-top: 0; }
.case--lead h2 { font-size: var(--text-section); font-weight: 300; }
@media (max-width: 60rem) { .case { grid-template-columns: 1fr; gap: var(--space-sm); } }

/* qr + contact */
.qr-card { background: var(--color-paper-2); color: var(--color-ink); border-radius: var(--radius-card); padding: var(--space-lg); text-align: center; }
.qr-card img { width: 200px; height: 200px; margin-inline: auto; background: var(--color-contrast); padding: var(--space-xs); border-radius: var(--radius-2xs, 4px); }
.qr-card p { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-sm); }

/* form */
.form { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: start; }
.form__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.field { display: grid; gap: var(--space-2xs); }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--text-sm); color: var(--color-ink-2); }
.field input, .field select, .field textarea { background: var(--color-paper-2); color: var(--color-ink); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-card); min-height: 48px; padding: var(--space-sm) var(--space-md); font-size: 1rem; }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-rule-2); }
.form__note { grid-column: 1 / -1; color: var(--color-muted); font-size: var(--text-sm); min-height: 1lh; }
@media (max-width: 60rem) { .form { grid-template-columns: minmax(0, 1fr); } .form__fields { grid-template-columns: 1fr; } }

/* team / patent index */
.people { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.people li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 6fr); gap: var(--gap-columns); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.people .role { color: var(--color-ink-2); }
.people .desc { color: var(--color-muted); font-size: var(--text-sm); }
@media (max-width: 60rem) { .people li { grid-template-columns: 1fr 1fr; } .people .desc { grid-column: 1 / -1; } }

/* statement */
.statement { font-family: var(--font-display); font-weight: 300; font-size: var(--text-display-s); line-height: 1.25; letter-spacing: var(--tracking-display); max-width: 24ch; }