:root {
  --ink: #08203a;
  --blue: #0c5f8f;
  --cyan: #0e6f9e;
  --ice: rgb(8 30 52 / 5%);
  --mist: rgb(8 30 52 / 9%);
  --line: #bcd4ea;
  --grid: #b3d2ec;
  --divider: #0a3f6e;
  --surface: #e4f0fa;
  --white: #eef4fb;
  --tint-position: #d7ebf9;
  --tint-views: #e1eef9;
  --tint-apps: #c8e1f3;
  --tint-capability: #dfecf8;
  --tint-spec: #d2e5f4;
  --tint-consult: #e1eef9;
  --bg-page:
    radial-gradient(1100px 760px at 84% -10%, rgb(70 160 210 / 16%), transparent 60%),
    radial-gradient(1000px 760px at -8% 12%, rgb(150 200 230 / 14%), transparent 58%),
    radial-gradient(1100px 820px at 50% 122%, rgb(40 130 185 / 15%), transparent 60%),
    linear-gradient(180deg, #cfe8f8 0%, #bcdcf0 50%, #cfe8f8 100%),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  --muted: #48647f;
  --navy: #06182c;
  --page-width: 1380px;
  --font-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: Consolas, ui-monospace, "SF Mono", Menlo, "Roboto Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background-color: #bfe0f0; background-image: var(--bg-page); background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 40px 40px, 40px 40px; background-attachment: fixed; }
body { margin: 0; min-width: 320px; overflow-x: hidden; color: var(--ink); background: transparent; font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.container { width: min(calc(100% - 72px), var(--page-width)); margin-inline: auto; }
.site-header { position: sticky; z-index: 50; top: 0; background: rgb(213 232 246 / 0.86); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 76px; }
.brand { width: max-content; text-decoration: none; }
.brand img { width: 154px; height: 54px; object-fit: contain; mix-blend-mode: multiply; }
.site-menu { display: flex; gap: 30px; }
.site-menu a { color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none; }
.site-menu a[aria-current="page"] { color: var(--blue); }
.product-menu { position: relative; }
.product-menu-trigger { display: flex; gap: 8px; align-items: center; padding: 0; color: var(--muted); background: transparent; border: 0; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.product-menu-trigger::after { width: 6px; height: 6px; border-right: 1px solid currentcolor; border-bottom: 1px solid currentcolor; content: ""; transform: translateY(-2px) rotate(45deg); transition: transform 180ms ease; }
.product-menu.is-open .product-menu-trigger, .product-menu-trigger:hover, .product-menu-trigger:focus-visible { color: var(--blue); }
.product-menu.is-open .product-menu-trigger::after { transform: translateY(2px) rotate(225deg); }
.product-submenu { position: absolute; top: calc(100% + 20px); left: 50%; display: grid; width: 300px; padding: 8px; visibility: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 20px 44px rgb(4 20 48 / 12%); opacity: 0; transform: translate(-50%, -8px); transition: opacity 180ms ease, transform 180ms ease, visibility 180ms; }
.product-menu.is-open .product-submenu { visibility: visible; opacity: 1; transform: translate(-50%, 0); }
.product-submenu a { display: grid; gap: 4px; padding: 15px 16px; color: var(--navy); border-bottom: 1px solid var(--line); }
.product-submenu a:last-child { border-bottom: 0; }
.product-submenu a:hover, .product-submenu a:focus-visible, .product-submenu a[aria-current="page"] { color: var(--white); background: var(--blue); }
.product-submenu strong { font-size: 15px; }
.product-submenu span { color: #4f647c; font-size: 12px; font-weight: 400; }
.product-submenu a:hover span, .product-submenu a:focus-visible span, .product-submenu a[aria-current="page"] span { color: var(--navy); }
.header-contact { justify-self: end; padding: 13px 18px; color: var(--white); background: var(--ink); font-size: 13px; font-weight: 700; text-decoration: none; }
.menu-toggle { display: none; }
.eyebrow, .section-label, .product-meta { margin: 0; color: var(--blue); font: 12px/1.4 var(--font-mono); }
.page-hero { display: grid; grid-template-columns: 0.78fr 1.22fr; min-height: 650px; border-bottom: 2px solid var(--divider); }
.page-hero-copy { align-self: end; padding: 90px 50px 86px 0; }
.page-hero h1 { margin: 26px 0 0; font-size: clamp(42px, 5.4vw, 82px); font-weight: 400; line-height: .98; letter-spacing: -.022em; }
.page-hero h1 strong { color: var(--blue); font-weight: 400; }
.page-hero-copy > p:last-child { max-width: 520px; margin: 34px 0 0; color: var(--muted); font-size: 18px; line-height: 1.8; }
.page-hero-media { min-height: 650px; overflow: hidden; background: var(--surface); }
.page-hero-media img { width: 100%; height: 100%; object-fit: contain; }
.catalog { padding-block: 96px 120px; }
.catalog-heading { display: grid; grid-template-columns: .65fr 1.35fr; gap: 8%; align-items: end; }
.catalog-heading h2, .detail-section h2 { margin: 0; font-size: clamp(31px, 3.7vw, 53px); font-weight: 400; line-height: 1.06; letter-spacing: -.021em; }
.filter-bar { display: flex; gap: 8px; margin: 54px 0 36px; }
.filter-button { min-height: 44px; padding: 0 18px; color: var(--muted); background: transparent; border: 1px solid var(--line); font: 14px var(--font-sans); cursor: pointer; }
.filter-button[aria-pressed="true"] { color: var(--white); background: var(--blue); border-color: var(--blue); }
.catalog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.catalog-item { display: grid; grid-template-rows: 480px auto; background: var(--white); border: 1px solid var(--line); }
.catalog-item[hidden] { display: none; }
.catalog-image { overflow: hidden; }
.catalog-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms ease; }
.catalog-item:hover .catalog-image img { transform: scale(1.025); }
.catalog-copy { padding: 30px; }
.catalog-copy h2, .catalog-copy h3 { margin: 28px 0 8px; font-size: 34px; font-weight: 500; letter-spacing: -.02em; }
.catalog-type { margin: 0; color: var(--blue); font-size: 16px; }
.catalog-summary { min-height: 58px; margin: 22px 0; color: var(--muted); font-size: 16px; line-height: 1.8; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.tag-list li { padding: 8px 10px; color: #2e4159; background: var(--mist); font-size: 13px; }
.detail-link, .back-link { display: inline-flex; margin-top: 18px; color: var(--ink); font-size: 14px; font-weight: 700; text-underline-offset: 6px; }
.detail-hero {
  position: relative;
  min-height: 640px;
  overflow: hidden;
  /* Same light blue wash + engineering grid as the homepage hero (user: 背景颜色
     跟主页那个蓝色网格一样，不要搞深蓝色). Text is dark ink — white copy would be
     invisible on this light band. */
  color: var(--ink);
  background:
    radial-gradient(840px 480px at 82% -4%, rgb(120 196 224 / 26%), transparent 62%),
    radial-gradient(1150px 660px at 4% 104%, rgb(40 130 185 / 14%), transparent 60%),
    linear-gradient(180deg, #d9eefb 0%, #c4ddf0 60%, #d9eefb 100%);
  border-bottom: 2px solid var(--divider);
}

/* faint engineering grid, identical to .hero::before on the homepage */
.detail-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(7 27 60 / 5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(7 27 60 / 5%) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(80% 74% at 50% 44%, #000 24%, transparent 100%);
  mask-image: radial-gradient(80% 74% at 50% 44%, #000 24%, transparent 100%);
  pointer-events: none;
}
/* Split hero: the name owns the left half, the machine owns the right half,
   and nothing else is on the screen (user: 第一眼就是一个非常大的产品图，和它的
   名字，其他小字全删掉；一半一半，中间来一点). */
.detail-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  min-height: 740px;
  /* a touch more room above and below the name (user: 上下间距再拉开一丢丢) */
  padding-block: 78px;
}
.detail-hero-name {
  display: grid;
  place-content: center;
  min-height: 480px;
  text-align: center;
}
/* max-width keeps a long product name inside its half instead of stretching
   the flex/grid item to max-content (which pushed the page wider than the
   viewport on narrow screens). */
.detail-hero-name h1 {
  max-width: 100%;
  overflow-wrap: break-word;
  /* keeps a two-line name balanced ("Shennong" / "Steed II") instead of
     orphaning the numeral on its own line */
  text-wrap: balance;
}
.detail-hero-media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
}
.detail-hero-media img {
  max-width: 100%;
  max-height: 612px;
  width: auto;
  height: auto;
  object-fit: contain;
  /* lighter shadow now that the band is pale instead of navy */
  filter: drop-shadow(0 26px 26px rgb(11 48 74 / 18%));
}
/* Display-size product name (user: 名字可以大一点，艺术字). Solid dark ink by
   default; a subtle blue gradient is layered on only where background-clip:text
   is supported, so the name can never disappear. */
.detail-hero h1 {
  margin: 0;
  text-align: center;
  font-size: clamp(52px, 6vw, 112px);
  font-weight: 600;
  /* a little more air between lines of a two-line name */
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: #0a3f63;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .detail-hero h1 {
    background: linear-gradient(96deg, #0a3f63 0%, #1f8fc4 54%, #0a3f63 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.detail-hero .product-kind { color: var(--blue); font-size: 20px; }
.detail-hero .hero-summary { max-width: 550px; margin: 30px 0 0; color: #324861; font-size: 18px; line-height: 1.8; }
.detail-section { padding-block: 110px; border-bottom: 2px solid var(--divider); background: var(--tint-position); }
.detail-section:nth-of-type(3) { background: var(--tint-views); }
.detail-section:nth-of-type(4) { background: var(--tint-apps); }
.detail-section:nth-of-type(5) { background: var(--tint-capability); }
.detail-section:nth-of-type(6) { background: var(--tint-spec); }
.detail-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 10%; }
.detail-copy { color: var(--muted); font-size: 18px; line-height: 1.9; }
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 70px; border-top: 1px solid var(--line); }
.value-item { min-height: 220px; padding: 28px 28px 0 0; border-right: 1px solid var(--line); }
.value-item:not(:first-child) { padding-left: 28px; }
.value-item:last-child { border-right: 0; }
.value-item span { color: var(--blue); font: 12px var(--font-mono); }
.value-item h3 { margin: 34px 0 14px; font-size: 21px; letter-spacing: -.015em; }
.value-item p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.scene-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 60px; align-items: start; }
.scene-grid img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: contain; display: block; }
/* ===== Product views gallery — front / side / angle (product pages) ===== */
.view-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 60px; align-items: start; }
.mini-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 60px; align-items: start; }
.view-item { margin: 0; overflow: hidden; }
.view-canvas { display: block; padding: 22px; background: var(--surface); border: 1px solid var(--line); }
.view-canvas img { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: contain; display: block; }
.view-canvas img.is-cutout { width: 100%; height: auto; max-width: 100%; max-height: none; filter: drop-shadow(0 18px 16px rgb(8 30 52 / 14%)); }
.view-item figcaption { padding: 13px 16px; border-top: 1px solid var(--line); text-align: center; font: 12px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.technology-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 60px; background: var(--line); }
.technology-list article { min-height: 220px; padding: 32px; background: var(--ice); }
.technology-list span { color: var(--blue); font: 12px var(--font-mono); }
.technology-list h3 { margin: 28px 0 12px; font-size: 21px; letter-spacing: -.015em; }
.technology-list p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.spec-section { color: var(--ink); background: var(--tint-spec); }
.spec-section .section-label { color: var(--blue); }
.spec-note { max-width: 660px; margin: 28px 0 0; color: #4f647c; font-size: 15px; line-height: 1.7; }
/* Spec table now mirrors the homepage .story-spec rows: label left, value right,
   hairline dividers (user: 做的和主页那个表格一样好看). It is a FLEX row set, not a
   fixed 4-column grid, because a grid leaves dead empty cells whenever the item
   count is not a multiple of the column count (19 specs = 3 empty cells).
   Flex + grow makes the last row stretch to fill — 不留空白的表格. */
.spec-grid { display: flex; flex-wrap: wrap; gap: 1px; margin-top: 60px; background: var(--line); }
.spec-grid div {
  display: flex;
  /* two cells per line: three columns still wrapped longer values
     ("Holds on a 20° slope", "2500 × 1000 × 700 mm (customisable)"). Two
     columns give every value room and read like the homepage rows. The row
     still grows to fill, so the last line never leaves a hole. */
  flex: 1 1 calc(50% - 1px);
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  min-height: 104px;
  padding: 24px 28px;
  background: var(--surface);
}
.spec-grid dt { margin: 0; color: #3f5872; font: 18px/1.5 var(--font-mono); text-align: left; }
.spec-grid dd { margin: 0; flex: 0 1 auto; font: 600 24px/1.3 var(--font-sans); color: var(--ink); text-align: right; overflow-wrap: anywhere; }
.consult { display: grid; grid-template-columns: 1.2fr .8fr; gap: 10%; align-items: end; padding-block: 110px; background: var(--tint-consult); border-bottom: 2px solid var(--divider); }
.consult h2 { margin: 20px 0 0; font-size: clamp(40px, 5.2vw, 74px); font-weight: 400; line-height: 1.04; letter-spacing: -.022em; }
.consult-actions { display: grid; gap: 12px; }
.consult-phone { display: flex; justify-content: space-between; padding: 22px 0; color: var(--blue); border-block: 1px solid var(--line); font: 22px var(--font-mono); text-decoration: none; }
.site-footer { padding-block: 34px; color: #9fbcd8; background: var(--navy); border-top: 2px solid var(--divider); font: 11px var(--font-mono); }
.footer-inner { display: flex; justify-content: space-between; gap: 24px; }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 650ms ease, transform 650ms ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* Center every section's copy and the consult band
   (user: 所有的字都往中间移). The spec table keeps the homepage's
   label-left / value-right alignment — that is the layout the user pointed at
   as the good one, so it is deliberately not centred here. */
.detail-section { text-align: center; }
.consult {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: 44px;
  align-items: center;
}
.consult .consult-phone {
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.consult .consult-email {
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.consult .consult-links { justify-items: center; }
.consult-actions { justify-items: center; }

/* --------------------------------------------------------------------------
   No tiny type anywhere on a product page (user: 小的字要么放大，要么删掉).
   The eyebrow / tag styles were authored for a light hero, so on the blue
   band they rendered dark-on-dark and became unreadable — high-contrast
   overrides below, plus one step up in size across the board.
   -------------------------------------------------------------------------- */
.section-label {
  font-size: 15px;
  letter-spacing: .1em;
}

/* --------------------------------------------------------------------------
   Capability list — one column, centred, one block per thing the machine
   actually does (user: 介绍它的功能，具体介绍详细一点).
   -------------------------------------------------------------------------- */
.feature-list {
  max-width: 960px;
  margin: 60px auto 0;
  text-align: center;
}

.feature-item {
  padding: 40px 0;
  border-top: 1px solid var(--line);
}

.feature-item:first-child {
  padding-top: 0;
  border-top: 0;
}

.feature-item span {
  display: block;
  color: var(--blue);
  font: 14px var(--font-mono);
  letter-spacing: .14em;
}

.feature-item h3 {
  margin: 16px 0 14px;
  font-size: clamp(23px, 2.1vw, 29px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.015em;
}

.feature-item p {
  margin: 0 auto;
  max-width: 780px;
  color: #3d566e;
  font-size: 19px;
  line-height: 1.85;
}

/* --------------------------------------------------------------------------
   Two real photographs. Equal frames, contain fit — the whole machine stays
   in shot whatever the source crop is.
   -------------------------------------------------------------------------- */
.photo-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 56px;
}

.photo-pair figure {
  margin: 0;
}

.photo-pair img {
  display: block;
  width: 100%;
  height: 460px;
  object-fit: contain;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.photo-pair figcaption {
  padding-top: 14px;
  color: var(--muted);
  font-size: 15px;
  text-align: center;
}

.view-item figcaption {
  font-size: 14px;
}

/* wide desktop: values can breathe a little more */
.spec-grid dd {
  font-size: 24px;
  line-height: 1.3;
}

.back-link {
  font-size: 16px;
}

@media (max-width: 860px) {
  .container { width: min(calc(100% - 40px), var(--page-width)); }
  .header-inner { grid-template-columns: 1fr auto; height: 68px; }
  .header-contact { display: none; }
  .menu-toggle { position: relative; z-index: 53; display: grid; width: 42px; height: 42px; padding: 0; place-items: center; background: transparent; border: 1px solid var(--line); }
  .menu-toggle::before, .menu-toggle::after { position: absolute; width: 18px; height: 1px; background: var(--ink); content: ""; transition: transform 200ms ease; }
  .menu-toggle::before { transform: translateY(-4px); }
  .menu-toggle::after { transform: translateY(4px); }
  .menu-toggle[aria-expanded="true"]::before { transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"]::after { transform: rotate(-45deg); }
  .site-menu { position: fixed; z-index: 52; top: 68px; right: 0; left: 0; display: grid; gap: 0; padding: 10px 20px 24px; background: var(--ice); border-bottom: 1px solid var(--line); opacity: 0; pointer-events: none; transform: translateY(-12px); transition: 200ms ease; }
  .site-menu.is-open { opacity: 1; pointer-events: auto; transform: none; }
  .site-menu a { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .product-menu-trigger { justify-content: space-between; width: 100%; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
  .product-submenu { position: static; width: 100%; max-height: 0; padding: 0; visibility: visible; overflow: hidden; box-shadow: none; opacity: 1; transform: none; transition: max-height 220ms ease; }
  .product-menu.is-open .product-submenu { max-height: 180px; transform: none; }
  .product-submenu a { padding: 14px 18px; border-color: var(--line); }
  .page-hero, .catalog-heading, .detail-grid, .consult { grid-template-columns: 1fr; }
  .page-hero-copy { padding: 74px 0 60px; }
  .page-hero-media { min-height: 500px; }
  .catalog-heading, .detail-grid, .consult { gap: 34px; }
  .catalog-grid { grid-template-columns: 1fr; }
  .catalog-item { grid-template-rows: 430px auto; }
  .value-grid { grid-template-columns: 1fr; }
  .detail-hero { min-height: 0; }
  .detail-hero-grid { grid-template-columns: 1fr; gap: 8px; min-height: 0; padding-block: 52px 44px; }
  .detail-hero-name { min-height: 0; }
  .detail-hero-media { min-height: 0; }
  .detail-hero-media img { max-height: 400px; }
  .feature-item { padding: 32px 0; }
  .feature-item p { font-size: 18px; }
  .photo-pair { grid-template-columns: 1fr; gap: 26px; }
  .photo-pair img { height: 340px; }
  .value-item, .value-item:not(:first-child) { min-height: auto; padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .scene-grid { grid-template-columns: 1fr; }
  .view-grid { grid-template-columns: 1fr; }
  .technology-list { grid-template-columns: 1fr; }
  /* one row per line below tablet width */
  .spec-grid div { flex-basis: 100%; }
  .spec-grid dd { font-size: 22px; overflow-wrap: anywhere; }
}

@media (max-width: 600px) {
  .container { width: min(calc(100% - 36px), var(--page-width)); }
  .brand img { width: 132px; height: 46px; }
  .page-hero h1 { font-size: 34px; }
  .page-hero-media { min-height: 360px; }
  .filter-bar { display: grid; grid-template-columns: 1fr; }
  .catalog-item { grid-template-rows: 300px auto; }
  .detail-hero, .detail-hero-inner { min-height: 0; }
  .detail-hero h1 { font-size: 40px; letter-spacing: -0.02em; }
  .detail-section { padding-block: 76px; }
  .spec-grid div { flex-basis: 100%; min-width: 0; min-height: 0; padding: 18px 20px; }
  .spec-grid dd { font-size: 21px; }
  .footer-inner { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}