/* Self-hosted fonts (regenerate with scripts/fetch-fonts.py, which lives
   outside site/ because site/ is the deployed root) — fonts.googleapis.com is
   unreachable in mainland China; local copies keep rendering identical. */
@import "fonts.css";

:root {
  color-scheme: dark;
  --ink: #f6f1e8;
  --ink-soft: rgba(246, 241, 232, 0.72);
  --ink-muted: rgba(246, 241, 232, 0.52);
  --bg: #0b0c0b;
  --bg-elevated: #111512;
  --bg-panel: #151915;
  --line: rgba(246, 241, 232, 0.16);
  --line-strong: rgba(246, 241, 232, 0.3);
  --jade: #7ee4bd;
  --jade-soft: rgba(126, 228, 189, 0.16);
  --amber: #d7ad62;
  --amber-soft: rgba(215, 173, 98, 0.18);
  --steel: #8ca7a0;
  --max-width: 1180px;
  --header-height: 76px;
  --radius: 8px;
  /* FIX-053: replace Inter (AI-slop default) with Bricolage Grotesque +
     Noto Sans SC. Bricolage carries the Latin display voice; Noto Sans SC
     handles Chinese glyphs. JetBrains Mono kept for metrics/code. */
  --font-display: "Bricolage Grotesque", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-body: "Bricolage Grotesque", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-family: var(--font-body);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* FIX-053: Distinctive display typography */
h1, h2, .page-hero-copy h1, .cinematic-band h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "opsz" 96;
}
h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
}
.eyebrow, .cinematic-eyebrow, .product-kicker, .tab-product-kicker {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
}

:focus-visible {
  outline: 2px solid var(--jade);
  outline-offset: 3px;
  border-radius: 4px;
}

a:focus-visible,
button:focus-visible {
  outline-offset: 4px;
}

::selection {
  background: var(--jade);
  color: #0b0c0b;
}

.metric-value {
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* FIX-054 — visual atmosphere upgrade */

/* Subtle grain texture overlay on every page — 3kb inline SVG noise */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Atmospheric radial accents per section-band — gives each screen its own light source */
.section-band {
  position: relative;
  isolation: isolate;
}
.section-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 60% at 12% 0%, rgba(126, 228, 189, 0.04), transparent 50%),
    radial-gradient(ellipse 60% 40% at 88% 100%, rgba(215, 173, 98, 0.025), transparent 50%);
}
.rehab-band::before {
  background:
    radial-gradient(ellipse 70% 50% at 85% 15%, rgba(126, 228, 189, 0.06), transparent 55%),
    radial-gradient(ellipse 50% 30% at 10% 90%, rgba(215, 173, 98, 0.03), transparent 50%);
}
.consumer-band::before {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(140, 167, 160, 0.05), transparent 55%);
}
.custom-band::before,
.shop-band::before {
  background:
    radial-gradient(ellipse 60% 60% at 0% 50%, rgba(215, 173, 98, 0.04), transparent 50%);
}

/* Scroll-reveal staggered fade-up — uses :has() with body data-revealed */
@media (prefers-reduced-motion: no-preference) {
  .compact-card,
  .product-card,
  .overview-grid li,
  .coop-modes-grid li,
  .news-item,
  .feature-list li,
  .cinematic-labels li {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .is-visible .compact-card,
  .is-visible .product-card,
  .is-visible .overview-grid li,
  .is-visible .coop-modes-grid li,
  .is-visible .news-item,
  .is-visible .feature-list li,
  .is-visible .cinematic-labels li {
    opacity: 1;
    transform: none;
  }
  .is-visible > *:nth-child(2),
  .is-visible li:nth-child(2) { transition-delay: 60ms; }
  .is-visible > *:nth-child(3),
  .is-visible li:nth-child(3) { transition-delay: 120ms; }
  .is-visible > *:nth-child(4),
  .is-visible li:nth-child(4) { transition-delay: 180ms; }
  .is-visible > *:nth-child(5),
  .is-visible li:nth-child(5) { transition-delay: 240ms; }
  .is-visible > *:nth-child(6),
  .is-visible li:nth-child(6) { transition-delay: 300ms; }
  .is-visible > *:nth-child(n + 7),
  .is-visible li:nth-child(n + 7) { transition-delay: 360ms; }
}

/* Section-heading: jade prefix line + larger optical-size headings */
.section-heading {
  position: relative;
}
.section-heading::before {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background: var(--jade);
  margin-bottom: 14px;
}
.section-heading.align-left::before { margin-left: 0; }

/* Card hover + glow upgrade — applies to all card variants */
.compact-card,
.product-card,
.overview-grid li,
.coop-modes-grid li,
.feature-list li {
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.compact-card::after,
.overview-grid li::after,
.coop-modes-grid li::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(126, 228, 189, 0.4), transparent 30%, transparent 70%, rgba(215, 173, 98, 0.25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.compact-card:hover,
.overview-grid li:hover,
.coop-modes-grid li:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px -16px rgba(126, 228, 189, 0.3);
}
.compact-card:hover::after,
.overview-grid li:hover::after,
.coop-modes-grid li:hover::after {
  opacity: 1;
}

/* Number chips on section-band — shows screen position within page */
.section-heading[data-screen]::after {
  content: "屏 " attr(data-screen);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(246, 241, 232, 0.4);
  padding: 4px 10px;
  border: 1px solid rgba(246, 241, 232, 0.18);
  border-radius: 999px;
  margin-left: 16px;
  vertical-align: middle;
  display: inline-block;
}

/* end FIX-054 atmosphere upgrade */

p {
  text-wrap: pretty;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 18% 8%, rgba(126, 228, 189, 0.09), transparent 26%),
    linear-gradient(180deg, #0a0b0a 0%, #11120f 45%, #090a09 100%);
  color: var(--ink);
  font-family: var(--font-body, var(--font-body));
  letter-spacing: 0;
}

body.nav-open {
  overflow: hidden;
}

a {
  color: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.skip-to-content {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: #0b0c0b;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 6px;
  transform: translateY(-200%);
  transition: transform 180ms ease;
}

.skip-to-content:focus {
  transform: translateY(0);
  outline: 2px solid var(--jade);
  outline-offset: 3px;
}

.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;
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding: 0 clamp(18px, 4vw, 48px);
  border-bottom: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(8, 10, 8, 0.78) 0%, rgba(8, 10, 8, 0.32) 70%, rgba(8, 10, 8, 0) 100%);
  backdrop-filter: blur(8px);
  transition: background 220ms ease, border-color 220ms ease, backdrop-filter 220ms ease;
}

.site-header.is-scrolled {
  background: rgba(8, 10, 8, 0.86);
  border-bottom-color: rgba(246, 241, 232, 0.10);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-decoration: none;
}

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background-image: url("../assets/images/logo-chip-2026-08.png");
  background-size: cover;
  background-position: center;
}

.brand-mark--legacy {
  position: relative;
  display: inline-grid;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  place-items: center;
  background: linear-gradient(145deg, rgba(126, 228, 189, 0.18), rgba(215, 173, 98, 0.1));
}

.brand-mark--legacy::before,
.brand-mark--legacy::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: var(--jade);
}

.brand-mark--legacy::before {
  width: 17px;
  height: 2px;
  transform: rotate(-24deg);
}

.brand-mark--legacy::after {
  width: 2px;
  height: 17px;
  transform: rotate(24deg);
}

.brand-name,
.brand-subtitle {
  display: block;
  line-height: 1;
}

.brand-name {
  font-size: 16px;
  font-weight: 700;
}

.brand-subtitle {
  margin-top: 5px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.metric-label,
.capability-kicker {
  font-family: var(--font-mono);
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 34px);
  /* FIX-030: feedback "未选中状态用浅白色 #CCCCCC" */
  color: #cccccc;
  font-size: 16px;
}

.primary-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  text-decoration: none;
  transition: color 180ms ease;
  /* multi-word labels (Products & Services) wrapped INSIDE the anchor
     when the flex row tightened — a two-line link reads as a broken nav */
  white-space: nowrap;
}

.primary-nav a:hover {
  color: var(--ink);
}

.primary-nav a.is-active {
  color: var(--jade);
}

.primary-nav a::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 6px;
  left: 12px;
  height: 2px;
  background: var(--jade);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease;
}

.primary-nav a:hover::after,
.primary-nav a.is-active::after {
  transform: scaleX(1);
}

/* 1081-1300px: the nine-item nav plus language switch does not fit at the
   base metrics (customer saw it wrap at ~1093px, a 1366 laptop at 125%
   scaling). Compact the metrics before the mobile menu takes over. */
@media (max-width: 1300px) and (min-width: 1081px) {
  .primary-nav {
    gap: clamp(10px, 1.6vw, 18px);
    font-size: 14.5px;
  }
  .primary-nav a {
    padding: 8px 7px;
  }
  html[lang="en"] .primary-nav {
    gap: clamp(8px, 1.2vw, 14px);
    font-size: 13.5px;
  }
  html[lang="en"] .primary-nav a {
    padding: 8px 5px;
  }
}

/* English labels run wider than the Chinese ones (Products & Services is
   the long pole); the base metrics wrap the EN nav even at 1440. Compact
   the EN nav wherever the inline nav is shown. */
html[lang="en"] .primary-nav {
  gap: clamp(10px, 1.8vw, 22px);
  font-size: 14.5px;
}

html[lang="en"] .primary-nav a {
  padding: 8px 8px;
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(246, 241, 232, 0.06);
  color: var(--ink);
}

.nav-toggle span:not(.sr-only) {
  display: block;
  width: 18px;
  height: 1px;
  margin: 5px auto;
  background: currentColor;
}

.hero-section {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  padding: calc(var(--header-height) + 70px) clamp(20px, 5vw, 64px) 42px;
  overflow: hidden;
  isolation: isolate;
}

.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(90deg, rgba(8, 10, 8, 0.96) 0%, rgba(8, 10, 8, 0.72) 42%, rgba(8, 10, 8, 0.3) 100%),
    repeating-linear-gradient(90deg, rgba(246, 241, 232, 0.04) 0 1px, transparent 1px 80px);
}

.hero-loop {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
  filter: saturate(0.95) contrast(1.04);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* FIX-025/030: uniform 25% dim per feedback "背景图加 25% 灰色遮罩" */
    linear-gradient(180deg, rgba(8, 10, 8, 0.25), rgba(8, 10, 8, 0.25)),
    /* original framing gradient */
    linear-gradient(180deg, rgba(8, 10, 8, 0.32) 0%, rgba(8, 10, 8, 0) 30%, rgba(8, 10, 8, 0) 55%, rgba(8, 10, 8, 0.78) 100%);
  pointer-events: none;
}

.hero-en {
  display: block;
  margin-top: 8px;
  color: var(--jade);
  font-family: var(--font-mono);
  font-size: clamp(20px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.hero-en-lede,
.lede-en,
.p-en {
  display: inline-block;
  margin-top: 6px;
  color: var(--ink-muted);
  font-size: 0.92em;
  font-style: normal;
  letter-spacing: 0.01em;
}

.h2-en,
.h3-en {
  display: block;
  margin-top: 4px;
  color: var(--steel);
  font-family: var(--font-mono);
  font-size: 0.55em;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
}

.launch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* Scroll-triggered reveal — Neuralink/SpaceX feel */
.reveal {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition:
    opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Phone optimization */
@media (max-width: 540px) {
  body[data-page="home"] .hero-section h1 {
    font-size: clamp(28px, 7.6vw, 44px);
  }
  .primary-nav { flex-wrap: wrap; gap: 4px; font-size: 13px; }
  .primary-nav .lang-switch { margin-left: 4px; padding: 4px 8px; font-size: 11px; }
  h2 { font-size: clamp(26px, 8vw, 38px); }
  .stack-list .stack-with-media { padding: 28px 20px !important; }
  .stack-list .stack-with-media h3 { font-size: clamp(22px, 6vw, 28px); }
  .cinematic-band { height: clamp(420px, 70svh, 600px); }
  .cinematic-band[data-align="bottom-left"] { padding: 48px 22px; }
  .cinematic-band h2 { font-size: clamp(28px, 9vw, 44px); }
  .demo-band { padding: 40px 20px !important; }
  .product-grid { grid-template-columns: 1fr; }
  .hero-proof { grid-template-columns: 1fr; gap: 1px; }
  .architecture-flow { grid-template-columns: 1fr !important; }
  .evidence-grid { grid-template-columns: 1fr !important; }
}

.demo-band {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: clamp(56px, 8vw, 96px) clamp(20px, 5vw, 80px);
  background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-surface) 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.demo-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
  aspect-ratio: 16/9;
}

.demo-frame video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.demo-copy h2 {
  margin-top: 14px;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: -0.01em;
}

.demo-copy p {
  margin-top: 18px;
  max-width: 42ch;
}

@media (max-width: 900px) {
  .demo-band { grid-template-columns: 1fr; }
}

.site-footer {
  padding: clamp(48px, 6vw, 84px) clamp(20px, 5vw, 64px) 28px;
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 13px;
  letter-spacing: 0.02em;
  background: var(--bg-deep);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  max-width: var(--max-width);
  margin: 0 auto;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-mark {
  display: inline-block;
  width: 36px;
  height: 36px;
  margin-bottom: 8px;
  border-radius: 8px;
  background-image: url("../assets/images/logo-chip-2026-08.png");
  background-size: cover;
  background-position: center;
}

.footer-name {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.footer-sub {
  margin: 0;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footer-links,
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-h {
  margin: 0 0 4px;
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer-links a,
.footer-contact a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 14px;
  transition: color 160ms ease;
}

.footer-links a:hover,
.footer-contact a:hover {
  color: var(--jade);
}

.footer-addr {
  margin: 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.55;
}

.footer-copy {
  max-width: var(--max-width);
  margin: clamp(36px, 5vw, 64px) auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* Service-card hover: scale image + brighten overlay (M-3 polish) */
.service-card {
  background-size: 110% 110%;
  background-position: center;
  transition: transform 280ms ease, border-color 280ms ease, background-size 600ms ease;
}

.service-card:hover {
  background-size: 120% 120%;
}

/* Neuralink/SpaceX-inspired cinematic banner */
.cinematic-band {
  position: relative;
  height: clamp(560px, 86svh, 920px);
  overflow: hidden;
  isolation: isolate;
}

.cinematic-band > .cinematic-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  animation: kenburns 22s ease-in-out infinite alternate;
}

.cinematic-band[data-scheme="light"] {
  color: #11130f;
}

.cinematic-band[data-scheme="light"] .cinematic-bg {
  filter: contrast(1.02) saturate(0.95);
}

.cinematic-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* FIX-025/031: baseline 25% dim — match .hero-overlay + feedback spec */
    linear-gradient(180deg, rgba(8, 10, 8, 0.25), rgba(8, 10, 8, 0.25)),
    /* directional gradient keeps copy area readable */
    linear-gradient(180deg, rgba(8, 10, 8, 0.0) 0%, rgba(8, 10, 8, 0.42) 60%, rgba(8, 10, 8, 0.84) 100%);
  pointer-events: none;
}

.cinematic-band[data-align="bottom-left"] {
  display: grid;
  align-items: end;
  justify-items: start;
  padding: clamp(48px, 8vw, 120px) clamp(20px, 5vw, 80px);
}

.cinematic-band[data-align="bottom-right"] {
  display: grid;
  align-items: end;
  justify-items: end;
  padding: clamp(48px, 8vw, 120px) clamp(20px, 5vw, 80px);
}

.cinematic-band[data-align="bottom-right"] .cinematic-copy {
  text-align: right;
}

.cinematic-band[data-align="bottom-right"] .cinematic-eyebrow {
  margin-left: auto;
}

.cinematic-band[data-align="center"] {
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(48px, 8vw, 120px) clamp(20px, 5vw, 80px);
}

.cinematic-band .cinematic-copy {
  max-width: 760px;
}

.cinematic-band .cinematic-eyebrow,
.demo-band .cinematic-eyebrow {
  /* FIX-025/030: capsule label per feedback — deeper bg, jade border tint,
     14-16px (mine 14px to keep visual hierarchy). */
  display: inline-block;
  margin-bottom: 24px;
  padding: 8px 16px;
  border: 1px solid rgba(126, 228, 189, 0.32);
  border-radius: 999px;
  background: rgba(20, 22, 20, 0.88);
  color: var(--jade);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  backdrop-filter: blur(2px);
}

/* FIX-030: Page 4 / cineDecode — feedback wants the capsule pinned to
   the upper-right of the section, while the title + body block stays at
   bottom-right. We pull the eyebrow out of the flow and anchor it. */
.cinematic-band[aria-labelledby="cine-decode-title"] .cinematic-eyebrow {
  position: absolute;
  top: clamp(40px, 6vh, 60px);
  right: clamp(40px, 5vw, 80px);
  margin: 0;
  z-index: 3;
}

.cinematic-band h2 {
  color: var(--ink);
  /* FIX-030: feedback "字号 72-96px" — capped at 80 so 幻联康念 · NeuroHeal,
     the longest of the three, stays on one line in its 760px column. */
  font-size: clamp(48px, 6vw, 80px);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.cinematic-band p {
  /* FIX-030: feedback "副标题 20-24px, 行间距 1.5-1.6 倍" */
  margin-top: 24px;
  max-width: 640px;
  color: rgba(246, 241, 232, 0.86);
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.55;
}

@keyframes kenburns {
  from { transform: scale(1.04) translate(0, 0); }
  to { transform: scale(1.16) translate(-1.2%, -1.6%); }
}

@media (prefers-reduced-motion: reduce) {
  .cinematic-band > .cinematic-bg { animation: none; transform: none; }
}

/* Hero — center-aligned editorial mode (Neuralink-style override) */
body[data-page="home"] .hero-section {
  text-align: center;
  align-items: end;
  justify-items: center;
  padding-top: calc(var(--header-height) + 40px);
  padding-bottom: clamp(60px, 10vh, 120px);
}

body[data-page="home"] .hero-copy {
  margin: 0 auto;
  width: min(760px, 92%);
}

body[data-page="home"] .hero-lede {
  /* FIX-053: lede was 28-44px, competed with h1. Spec calls for a 副标题,
     not a co-headline. Drop to 18-22px so h1 keeps the visual weight. */
  font-size: clamp(17px, 1.7vw, 22px);
  line-height: 1.55;
  max-width: 580px;
  color: rgba(246, 241, 232, 0.78);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

body[data-page="home"] .hero-section h1 {
  margin: 0 auto;
  max-width: 18ch;
  /* FIX-045: shrink Chinese title to fit 13 chars on one line desktop */
  font-size: clamp(40px, 5.4vw, 80px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

body[data-page="home"] .hero-lede {
  margin-left: auto;
  margin-right: auto;
}

body[data-page="home"] .hero-actions {
  justify-content: center;
}

body[data-page="home"] .hero-proof {
  margin-top: clamp(28px, 5vw, 56px);
  width: min(960px, 94%);
  margin-left: auto;
  margin-right: auto;
}

body[data-page="home"] .hero-section::before {
  background:
    linear-gradient(180deg, rgba(8, 10, 8, 0.78) 0%, rgba(8, 10, 8, 0.42) 50%, rgba(8, 10, 8, 0.92) 100%),
    repeating-linear-gradient(90deg, rgba(246, 241, 232, 0.04) 0 1px, transparent 1px 80px);
}

.hero-scroll-cue {
  position: absolute;
  left: 24px;
  bottom: 18px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  animation: cuePulse 2.4s ease-in-out infinite;
  pointer-events: none;
}

@media (max-height: 760px) {
  .hero-scroll-cue { display: none; }
}

@keyframes cuePulse {
  0%, 100% { opacity: 0.55; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(6px); }
}

.lang-switch {
  margin-left: 12px;
  min-height: 44px;
  min-width: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
}

.lang-switch:hover {
  border-color: var(--jade);
  color: var(--jade);
}

.lang-picker {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  padding: 0 16px 0 0;
  cursor: pointer;
}

.hero-signal {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  opacity: 0.72;
}

.hero-copy {
  position: relative;
  z-index: 2;
  width: min(680px, 100%);
  margin-bottom: min(10vh, 96px);
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--jade);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* FIX-028: home hero eyebrow is the company tagline ("合肥幻联科技：植入式脑
   机接口系统解决方案提供商") — feedback wants ~1/5 of H1 (~22px on desktop),
   normal case (no uppercase, no narrow letter-spacing) to read like a real
   subtitle, not a tag. */
body[data-page="home"] .hero-copy .eyebrow {
  margin-bottom: 28px;
  color: var(--jade);
  font-size: clamp(15px, 1.7vw, 22px);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1,
h2,
h3 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  max-width: 12ch;
  font-size: clamp(58px, 9vw, 138px);
  line-height: 0.92;
}

h2 {
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.05;
}

h3 {
  font-size: clamp(18px, 2.1vw, 28px);
  line-height: 1.15;
}

p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.75;
}

.hero-lede {
  max-width: 620px;
  margin-top: 24px;
  color: rgba(246, 241, 232, 0.84);
  /* FIX-028: per feedback the lede should be ~1/3–1/4 of the H1 */
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.button {
  /* FIX-030/031: feedback spec — 圆角 8px, 内边距 12×24, 字号 18-22px (floor 18 matches spec floor) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-size: clamp(18px, 1.7vw, 22px);
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease,
    background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.button:hover {
  /* FIX-025: stronger lift + state shift per feedback */
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(126, 228, 189, 0.12);
}

.button-primary {
  /* FIX-053: jade-filled primary CTA so brand color earns its keep
     (was generic white pill). Black text on jade keeps WCAG AA. */
  background: var(--jade);
  color: #0a1b14;
  border: 1px solid var(--jade);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.button-primary:hover {
  background: #9eecc9;
  border-color: #9eecc9;
  transform: translateY(-1px);
}

.button-secondary {
  /* FIX-053: secondary stays line-style but with jade tint on hover */
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(246, 241, 232, 0.6);
  font-weight: 500;
}

.button-secondary:hover {
  background: rgba(126, 228, 189, 0.08);
  border-color: var(--jade);
  color: var(--jade);
}

.hero-media {
  position: absolute;
  right: clamp(22px, 6vw, 92px);
  bottom: clamp(130px, 20vh, 240px);
  width: min(44vw, 520px);
  aspect-ratio: 1.15;
  z-index: -1;
  opacity: 0.94;
}

.implant-core {
  position: absolute;
  inset: 15% 8% 7% 18%;
  border: 1px solid rgba(126, 228, 189, 0.28);
  border-radius: 50%;
  background:
    radial-gradient(circle at 44% 42%, rgba(126, 228, 189, 0.24), transparent 16%),
    radial-gradient(circle at 55% 58%, rgba(215, 173, 98, 0.2), transparent 20%),
    rgba(12, 16, 14, 0.58);
  box-shadow: 0 0 70px rgba(126, 228, 189, 0.08);
}

.implant-core::before,
.implant-core::after {
  content: "";
  position: absolute;
  inset: 16%;
  border: 1px solid rgba(246, 241, 232, 0.14);
  border-radius: 50%;
}

.implant-core::after {
  inset: 32%;
  border-color: rgba(215, 173, 98, 0.28);
}

.implant-node {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--jade);
  border-radius: 50%;
  background: #0a0c0b;
}

.node-a {
  top: 27%;
  left: 26%;
}

.node-b {
  right: 25%;
  top: 37%;
}

.node-c {
  right: 39%;
  bottom: 24%;
}

.implant-thread {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--jade), transparent);
  transform-origin: left center;
}

.thread-a {
  top: 34%;
  left: 29%;
  width: 44%;
  transform: rotate(15deg);
}

.thread-b {
  top: 43%;
  left: 54%;
  width: 32%;
  transform: rotate(92deg);
}

.thread-c {
  top: 60%;
  left: 31%;
  width: 42%;
  transform: rotate(-20deg);
}

.channel-readout {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(360px, 80%);
  border: 1px solid var(--line);
  background: rgba(10, 12, 11, 0.72);
  backdrop-filter: blur(12px);
}

.channel-readout span {
  display: grid;
  min-height: 58px;
  place-items: center;
  border-right: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.channel-readout span:last-child {
  border-right: 0;
}

.hero-proof {
  /* FIX-030: feedback "去掉生硬分隔线，三列间距均匀一致" — remove the
     1px line grid and use plain gap instead. */
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px);
  width: min(960px, 100%);
}

.hero-proof.partners-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(1080px, 100%);
  margin-top: 24px;
}

.hero-proof.partners-stats .metric-value {
  /* partners-stats is 4 columns; clamp smaller to avoid overflow */
  font-size: clamp(30px, 4vw, 48px);
}

@media (max-width: 900px) {
  .hero-proof.partners-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.hero-proof > div {
  /* FIX-030: no more dark cells with dividers — clean transparent columns. */
  min-height: 92px;
  padding: 0;
  background: transparent;
}

.metric-value,
.metric-label {
  display: block;
}

.metric-value {
  /* FIX-030: feedback wants 48-60px on desktop */
  font-size: clamp(34px, 5.2vw, 60px);
  font-weight: 750;
  line-height: 1.05;
  color: var(--ink);
}

.metric-label {
  /* FIX-030: feedback "字号设为数字二分之一" + 浅灰常规 */
  margin-top: 14px;
  color: rgba(246, 241, 232, 0.66);
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 400;
  line-height: 1.45;
}

/* Adjacent bands each carry the full vertical padding, so back-to-back
   sections met at double the intended rhythm (264px of void at desktop).
   Tighten the meeting side only; the first band after a hero is untouched. */
.section-band {
  padding: clamp(74px, 10vw, 132px) clamp(20px, 5vw, 64px);
}

.section-band + .section-band {
  padding-top: clamp(56px, 7vw, 96px);
}

.section-band:has(+ .section-band),
.section-band:has(+ .site-footer) {
  padding-bottom: 80px;
}

.section-grid,
.section-heading,
.capability-grid,
.architecture-flow,
.application-list,
.stack-list,
.evidence-grid,
.module-tabs,
.teaser-grid,
.research-grid,
.case-grid,
.coop-flow-steps,
.product-grid,
.spikelink-detail,
.intro-band .two-column {
  width: min(var(--max-width), 100%);
  margin: 0 auto;
}

.two-column {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(30px, 6vw, 84px);
  align-items: start;
}

.section-lede {
  color: var(--ink-soft);
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.65;
}

.intro-band {
  background: #11130f;
}

.capability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  margin-top: 58px;
  border: 1px solid var(--line);
  background: var(--line);
}

.capability-block {
  min-height: 290px;
  padding: clamp(24px, 4vw, 38px);
  background:
    linear-gradient(180deg, rgba(126, 228, 189, 0.06), transparent 55%),
    var(--bg-panel);
}

.capability-kicker {
  display: inline-flex;
  margin-bottom: 52px;
  color: var(--amber);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.capability-block p,
.architecture-flow p,
.application-list p,
.stack-list p,
.evidence-grid p {
  margin-top: 16px;
}

.architecture-band {
  background: linear-gradient(180deg, #0d0f0d, #121510);
}

.section-heading {
  text-align: center;
}

.section-heading > p:not(.eyebrow) {
  max-width: 680px;
  margin: 18px auto 0;
}

.align-left {
  text-align: left;
}

.align-left > p:not(.eyebrow) {
  margin-right: 0;
  margin-left: 0;
}

.architecture-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 52px;
  border: 1px solid var(--line);
  background: var(--line);
}

.architecture-flow article {
  position: relative;
  min-height: 260px;
  padding: 28px;
  background: rgba(15, 18, 16, 0.96);
  /* FIX-030: feedback "hover 状态可添加轻微背景高亮效果" */
  transition: background 220ms ease, transform 220ms ease;
}

.architecture-flow article:hover {
  background: rgba(126, 228, 189, 0.06);
  transform: translateY(-2px);
}

.architecture-flow article::after {
  content: "";
  position: absolute;
  right: -22px;
  top: 50%;
  z-index: 2;
  width: 42px;
  height: 1px;
  background: var(--jade);
}

.architecture-flow article:last-child::after {
  display: none;
}

.architecture-flow span,
.stack-index,
.priority-list span {
  display: inline-flex;
  margin-bottom: 48px;
  color: var(--jade);
  font-size: 12px;
  font-weight: 800;
}

.media-band {
  background: #f2eee4;
  color: #12130f;
}

.media-band .eyebrow,
.media-band h2,
.media-band {
  position: relative;
}

.media-band::before,
.media-band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 120px;
  pointer-events: none;
  z-index: 1;
}

.media-band::before {
  top: -1px;
  background: linear-gradient(180deg, rgba(11, 12, 11, 1) 0%, rgba(246, 241, 232, 0) 100%);
}

.media-band::after {
  bottom: -1px;
  background: linear-gradient(0deg, rgba(11, 12, 11, 1) 0%, rgba(246, 241, 232, 0) 100%);
}

.media-band > * {
  position: relative;
  z-index: 2;
}

.media-band h3 {
  color: #12130f;
}

.media-band p {
  color: rgba(18, 19, 15, 0.72);
}

.media-layout {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

.media-slots {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 12px;
}

.media-slot {
  position: relative;
  min-height: 220px;
  display: flex;
  align-items: end;
  margin: 0;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(18, 19, 15, 0.18);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(18, 19, 15, 0.12), rgba(126, 228, 189, 0.22)),
    repeating-linear-gradient(90deg, rgba(18, 19, 15, 0.08) 0 1px, transparent 1px 24px);
}

.media-slot::before {
  content: "";
  position: absolute;
  inset: 24px;
  border: 1px solid rgba(18, 19, 15, 0.22);
  border-radius: 50%;
}

.large-slot {
  grid-row: span 2;
  min-height: 452px;
}

.slot-number {
  position: absolute;
  top: 18px;
  left: 18px;
  color: rgba(18, 19, 15, 0.62);
  font-size: 12px;
  font-weight: 800;
}

.media-slot figcaption {
  position: relative;
  z-index: 1;
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 750;
}

.media-slot:has(img),
.media-slot:has(video) {
  padding: 0;
  align-items: stretch;
  background: #0b0c0b;
}

.media-slot:has(img)::before,
.media-slot:has(video)::before {
  content: none;
}

.media-slot img,
.media-slot video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.media-slot:has(img) figcaption,
.media-slot:has(video) figcaption {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(8, 10, 8, 0) 0%, rgba(8, 10, 8, 0.78) 60%, rgba(8, 10, 8, 0.92) 100%);
  color: #f6f1e8;
  font-size: clamp(13px, 1.3vw, 16px);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.applications-band {
  background: #0b0c0b;
}

.application-list {
  display: grid;
  gap: 1px;
  margin-top: 44px;
  border: 1px solid var(--line);
  background: var(--line);
}

.application-list article {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 28px;
  min-height: 150px;
  padding: 28px;
  background: #111512;
}

.contact-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  /* content onto the shared column without double-insetting (the section
     itself must stay full-bleed, so inset via padding like scenario-band) */
  padding: clamp(52px, 8vw, 88px) max(clamp(20px, 5vw, 64px), calc((100% - var(--max-width)) / 2));
  border-top: 1px solid var(--line);
}

.contact-band h2 {
  max-width: 780px;
}

.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.98fr) minmax(320px, 0.8fr);
  gap: clamp(34px, 6vw, 82px);
  align-items: center;
  min-height: 86svh;
  padding: calc(var(--header-height) + 76px) clamp(20px, 5vw, 64px) 74px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

/* removed: `.page-hero > div:first-child { width: min(690px, 100%) }` was
   written when the text column was the first child; current pages put the
   absolutely-positioned bg div first, so the rule clamped the bg to 690px
   leaving the right half of the hero black. `.page-hero-copy` already has
   its own `max-width: 1200px`, so no replacement is needed. */

/* Single-column hero (no media stage on right) — used by spec pages that fold
   overview content into the first screen */
.page-hero:has(.page-hero-copy) {
  grid-template-columns: 1fr;
  align-items: start;
  padding-top: calc(var(--header-height) + 56px);
}

.page-hero-copy {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
}

.page-hero-copy h1 {
  max-width: 16ch;
  font-size: clamp(44px, 6vw, 84px);
  letter-spacing: -0.02em;
  line-height: 1.06;
  margin-bottom: 12px;
}

.page-hero-lede {
  max-width: 760px;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.55;
  margin: 0 0 36px;
  color: rgba(246, 241, 232, 0.74);
}

.page-hero-copy .overview-grid {
  margin-top: 32px;
}

.page-hero h1 {
  max-width: 11ch;
  font-size: clamp(46px, 7vw, 98px);
}

.page-hero p:not(.eyebrow) {
  max-width: 680px;
  margin-top: 24px;
  font-size: clamp(17px, 2vw, 22px);
}

.tech-diagram,
.model-stage {
  position: relative;
  min-height: 420px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(126, 228, 189, 0.08), rgba(215, 173, 98, 0.08)),
    rgba(16, 18, 15, 0.76);
}

.tech-diagram {
  overflow: hidden;
}

.diagram-ring,
.diagram-axis,
.diagram-dot {
  position: absolute;
  display: block;
}

.diagram-ring {
  border: 1px solid rgba(126, 228, 189, 0.32);
  border-radius: 50%;
}

.ring-one {
  inset: 16%;
}

.ring-two {
  inset: 32%;
  border-color: rgba(215, 173, 98, 0.32);
}

.diagram-axis {
  background: linear-gradient(90deg, transparent, rgba(246, 241, 232, 0.42), transparent);
}

.axis-x {
  top: 50%;
  left: 8%;
  width: 84%;
  height: 1px;
}

.axis-y {
  top: 8%;
  left: 50%;
  width: 1px;
  height: 84%;
  background: linear-gradient(180deg, transparent, rgba(246, 241, 232, 0.42), transparent);
}

.diagram-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--jade);
  box-shadow: 0 0 28px rgba(126, 228, 189, 0.44);
}

.dot-one {
  top: 26%;
  left: 35%;
}

.dot-two {
  top: 54%;
  right: 28%;
  background: var(--amber);
}

.dot-three {
  bottom: 27%;
  left: 45%;
}

.challenge-band,
.asset-plan-band {
  background: #11130f;
}

.technology-stack {
  background: #0b0c0b;
}

.stack-list {
  display: grid;
  gap: 1px;
  margin-top: 44px;
  border: 1px solid var(--line);
  background: var(--line);
}

.stack-list article {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 24px;
  min-height: 170px;
  padding: 30px;
  background: var(--bg-panel);
}

.stack-index {
  margin: 0;
}

.evidence-band {
  background: #f2eee4;
  color: #12130f;
}

.evidence-band .eyebrow,
.evidence-band h2,
.evidence-band h3 {
  color: #12130f;
}

.evidence-band p {
  color: rgba(18, 19, 15, 0.72);
}

.evidence-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 44px;
}

.evidence-grid article {
  min-height: 220px;
  padding: 24px;
  border: 1px solid rgba(18, 19, 15, 0.14);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.46);
}

.platform-hero {
  background:
    linear-gradient(90deg, rgba(11, 12, 11, 0.98), rgba(11, 12, 11, 0.72)),
    repeating-linear-gradient(0deg, rgba(246, 241, 232, 0.04) 0 1px, transparent 1px 76px);
}

.model-stage {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.model-stage > p,
.model-stage > figcaption {
  position: absolute;
  right: 22px;
  bottom: 18px;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  z-index: 2;
}

.model-stage > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: saturate(0.9) contrast(1.05);
}

.model-stage figure.model-stage,
figure.model-stage {
  margin: 0;
}

.tech-hero-media {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4/3;
  background: var(--bg-elevated);
}

.tech-hero-media img,
.tech-hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tech-hero-media figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(8, 10, 8, 0) 0%, rgba(8, 10, 8, 0.85) 100%);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Override .stack-list article default 2-col grid for media-rich rows */
.stack-list .stack-with-media {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(24px, 4vw, 56px);
  min-height: clamp(420px, 48vw, 540px);
  padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 56px);
  background: var(--bg-panel);
}

.stack-list .stack-with-media:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}

.stack-list .stack-with-media:nth-child(even) .stack-media {
  order: -1;
}

.stack-list .stack-with-media .stack-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

.stack-list .stack-with-media .stack-index {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  align-self: flex-start;
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.stack-list .stack-with-media h3 {
  margin: 4px 0 0;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.stack-list .stack-with-media p {
  margin: 0;
  max-width: 48ch;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
}

.stack-media {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-elevated);
  min-height: clamp(280px, 36vw, 460px);
}

.stack-media img,
.stack-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.stack-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 35%;
  background: linear-gradient(180deg, rgba(8,10,8,0) 0%, rgba(8,10,8,0.45) 100%);
  pointer-events: none;
}

.stack-caption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: 14px 18px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}

@media (max-width: 900px) {
  .stack-list .stack-with-media,
  .stack-list .stack-with-media:nth-child(even) {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .stack-list .stack-with-media:nth-child(even) .stack-media {
    order: 0;
  }
  .stack-media {
    min-height: 260px;
  }
}

.model-shell {
  position: relative;
  width: min(280px, 70%);
  aspect-ratio: 0.92;
  transform: rotateX(56deg) rotateZ(-28deg);
  transform-style: preserve-3d;
}

.model-layer {
  position: absolute;
  left: 50%;
  width: 76%;
  height: 34%;
  border: 1px solid rgba(246, 241, 232, 0.32);
  border-radius: 50%;
  background: rgba(126, 228, 189, 0.16);
  transform: translateX(-50%);
}

.layer-top {
  top: 8%;
}

.layer-mid {
  top: 29%;
  width: 92%;
  background: rgba(215, 173, 98, 0.18);
}

.layer-bottom {
  top: 52%;
  width: 110%;
  background: rgba(246, 241, 232, 0.08);
}

.model-filament {
  position: absolute;
  top: 61%;
  left: 50%;
  width: 2px;
  height: 130px;
  background: linear-gradient(180deg, var(--jade), transparent);
  transform-origin: top center;
}

.filament-one {
  transform: translateX(-50%) rotate(8deg);
}

.filament-two {
  transform: translateX(-50%) rotate(-12deg);
}

.filament-three {
  transform: translateX(-50%) rotate(24deg);
}

.product-band {
  background: #f2eee4;
  color: #12130f;
}

.product-band .eyebrow,
.product-band h2,
.product-band h3 {
  color: #12130f;
}

.product-band p {
  color: rgba(18, 19, 15, 0.72);
}

.module-tabs {
  margin-top: 44px;
}

.tab-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.tab-controls button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 64px;
  padding: 12px 20px;
  border: 1px solid rgba(18, 19, 15, 0.16);
  border-radius: var(--radius);
  background: transparent;
  color: rgba(18, 19, 15, 0.7);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-align: left;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.tab-controls button em {
  font-style: normal;
  color: rgba(18, 19, 15, 0.45);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.tab-controls button:hover {
  border-color: var(--jade);
}

.tab-controls button[aria-selected="true"] {
  background: #12130f;
  border-color: #12130f;
  color: var(--ink);
}

.tab-controls button[aria-selected="true"] em {
  color: var(--jade);
}

.tab-panel {
  padding: clamp(20px, 3vw, 36px) 0 0;
  animation: tabFade 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tab-panel[hidden] {
  display: none;
}

@keyframes tabFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tab-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: stretch;
}

.tab-media {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(18, 19, 15, 0.16);
  background: var(--bg-elevated);
  aspect-ratio: 4/3;
}

.tab-media img,
.tab-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tab-media figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 12px 16px;
  background: linear-gradient(180deg, transparent, rgba(8,10,8,0.78));
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tab-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  color: #12130f;
}

.tab-product-kicker {
  margin: 0;
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tab-content h3 {
  margin: 0;
  color: #12130f;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.tab-content p {
  margin: 0;
  color: rgba(18, 19, 15, 0.74);
  font-size: 15px;
  line-height: 1.6;
}

.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.feature-list li {
  display: grid;
  grid-template-columns: minmax(110px, max-content) 1fr;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(15, 18, 16, 0.62);
  border: 1px solid rgba(246, 241, 232, 0.08);
  border-left: 2px solid var(--jade);
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.55;
}

.feature-list strong {
  /* the panel behind this went dark; dark ink here made all four rows invisible */
  color: rgba(246, 241, 232, 0.94);
  font-weight: 500;
}

.feature-list span {
  color: rgba(246, 241, 232, 0.72);
}

.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 8px 0 4px;
  border: 1px solid rgba(18, 19, 15, 0.16);
  background: rgba(18, 19, 15, 0.16);
  border-radius: var(--radius);
  overflow: hidden;
}

.spec-grid > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: rgba(242, 238, 228, 0.94);
}

.spec-grid dt {
  color: rgba(18, 19, 15, 0.5);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.spec-grid dd {
  margin: 0;
  color: #12130f;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tab-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

@media (max-width: 900px) {
  .tab-panel-grid { grid-template-columns: 1fr; }
  .tab-media { aspect-ratio: 16/10; }
  .tab-controls button { min-height: 56px; }
}

.spec-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(18, 19, 15, 0.16);
  background: rgba(18, 19, 15, 0.16);
}

.spec-list span {
  display: grid;
  min-height: 120px;
  place-items: center;
  background: rgba(242, 238, 228, 0.9);
  color: #12130f;
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 800;
}

.priority-list {
  display: grid;
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.priority-list article {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 18px;
  padding: 22px;
  background: var(--bg-panel);
}

.priority-list span {
  margin: 0;
}

/* Teaser band on home — link cards to apps / partners / contact */
.teaser-band {
  background: var(--bg-deep);
}

.teaser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 36px;
}

.teaser-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 260px;
  padding: 24px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(11,12,11,0.55) 0%, rgba(11,12,11,0.92) 70%, rgba(11,12,11,0.97) 100%),
    var(--bg-image, none),
    var(--bg-panel);
  background-size: cover, cover, auto;
  background-position: center, center, center;
  transition: transform 220ms ease, border-color 220ms ease;
}

.teaser-card:hover {
  transform: translateY(-3px);
  border-color: var(--jade);
}

.teaser-tag {
  display: inline-block;
  align-self: flex-start;
  padding: 3px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(8, 10, 8, 0.46);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.teaser-card h3 {
  margin: 4px 0 0;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.teaser-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
}

/* Contact page support */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 36px;
}

.paths-band .contact-grid {
  width: min(var(--max-width), 100%);
  margin: 36px auto 0;
}

/* three cards in a 2-track grid (tablet portrait) left the third alone
   in the left cell with a half-row of empty background — the same
   ragged-row class the shop grid already handles. An odd-positioned
   last card spans the full row; at one column (phone) and three columns
   (desktop) this changes nothing. */
.paths-band .contact-grid .contact-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.contact-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-panel);
}

.contact-card .contact-icon {
  margin: 0;
  font-size: 28px;
  line-height: 1;
  color: var(--jade);
  font-family: var(--font-mono);
}

.contact-card h3 {
  margin: 4px 0 0;
  font-size: 20px;
  letter-spacing: -0.01em;
}

.contact-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
}

.contact-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}

.contact-checklist li {
  position: relative;
  padding-left: 28px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.55;
}

.contact-checklist li::before {
  content: "→";
  position: absolute;
  left: 4px;
  top: 1px;
  color: var(--jade);
  font-family: var(--font-mono);
  font-weight: 700;
}

/* R7 · 联系我们一屏版（2026-08-27 改版轮，客户 Word 第 7 条）：删整屏
   hero，联系方式与询价清单两栏合为一屏；≤980px 退回纵向堆叠。
   两种语言均需在 1440×900 下完整显示右栏的两张二维码。 */
.contact-quick-head {
  width: min(var(--max-width), 100%);
  margin: 0 auto;
  /* the fixed .site-header (76px, opaque) covers the top band — every
     other first-section clears it; so must this one (devin review R1). */
  padding: calc(var(--header-height, 76px) + 18px) clamp(20px, 5vw, 64px) 0;
}
.contact-quick-head h1 {
  max-width: none;
  margin: 0 0 8px;
  font-size: clamp(30px, 3.2vw, 44px);
  letter-spacing: -0.015em;
}
.contact-quick-lede {
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.6;
}
.contact-quick {
  width: min(var(--max-width), 100%);
  margin: 0 auto;
  padding: 10px clamp(20px, 5vw, 64px) 40px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.contact-quick .section-heading h2 {
  font-size: clamp(20px, 2vw, 26px);
}
.contact-quick .contact-grid {
  margin-top: 14px;
  grid-template-columns: 1fr;
  gap: 10px;
}
.contact-quick .contact-card {
  padding: 14px 18px;
  gap: 3px;
}
.contact-quick .contact-card .contact-icon {
  font-size: 18px;
}
.contact-quick .contact-card h3 {
  margin-top: 2px;
  font-size: 17px;
}
.contact-quick .contact-checklist {
  margin-top: 14px;
  gap: 9px;
}
.contact-quick .contact-checklist li {
  font-size: 14.5px;
  line-height: 1.5;
}
.contact-qr-row {
  display: flex;
  gap: 14px;
  margin-top: 14px;
}
.contact-qr {
  margin: 0;
  text-align: center;
}
.contact-qr img {
  display: block;
  width: 132px;
  height: 132px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.contact-qr figcaption {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-soft);
}

.contact-quick-cta {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.contact-quick-cta h2 {
  margin: 0 0 6px;
  font-size: 20px;
}
.contact-quick-cta p {
  margin: 0 0 14px;
  color: var(--ink-soft);
}
.contact-quick-cta .launch-actions {
  margin-top: 12px;
}
.contact-quick-cta .button {
  font-size: 18px;
  padding-inline: 16px;
}
@media (max-width: 980px) {
  .contact-quick {
    grid-template-columns: 1fr;
  }
}

/* Research support services — 3×2 card grid with photo bg */
.services-band {
  background: var(--bg-deep);
  color: var(--ink);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 44px;
}

@media (max-width: 1000px) {
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .services-grid { grid-template-columns: 1fr; }
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 360px;
  padding: 28px 24px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  background-color: var(--bg-panel);
  background-image: var(--bg-image, none);
  background-size: cover;
  background-position: center;
  transition: transform 280ms ease, border-color 280ms ease;
}

.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(170deg, rgba(11,12,11,0.32) 0%, rgba(11,12,11,0.78) 55%, rgba(11,12,11,0.96) 100%);
  transition: background 280ms ease;
}

.service-card:hover {
  transform: translateY(-3px);
  border-color: var(--jade);
}

.service-card:hover::before {
  background: linear-gradient(170deg, rgba(11,12,11,0.20) 0%, rgba(11,12,11,0.65) 55%, rgba(11,12,11,0.94) 100%);
}

.service-num {
  margin: 0;
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.service-tag {
  display: inline-block;
  margin: 0;
  padding: 3px 9px;
  align-self: flex-start;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(8, 10, 8, 0.46);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.service-card h3 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.service-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
}

.service-link {
  margin-top: auto;
  padding-top: 12px;
  color: var(--jade);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-top: 1px dashed var(--line);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 160ms ease, gap 160ms ease;
}

.service-link:hover {
  color: var(--ink);
  gap: 10px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* 981-1080px bridge: the compacted nav still does not reliably fit here
   (wrapped at 1024 before), so the mobile menu starts at 1080 instead of
   980. Layout rules below 980 are untouched. */
@media (max-width: 1080px) {
  .nav-toggle {
    display: inline-block;
  }

  .primary-nav {
    position: fixed;
    inset: var(--header-height) 0 0 0;
    display: none;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    padding: 24px;
    background: rgba(8, 10, 8, 0.96);
  }

  body.nav-open .primary-nav {
    display: flex;
  }

  .primary-nav a {
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    font-size: 22px;
  }
}

@media (max-width: 980px) {
  .primary-nav {
    position: fixed;
    inset: var(--header-height) 0 0 0;
    display: none;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    padding: 24px;
    background: rgba(8, 10, 8, 0.96);
  }

  body.nav-open .primary-nav {
    display: flex;
  }

  .primary-nav a {
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    font-size: 22px;
  }

  .nav-toggle {
    display: inline-block;
  }

  .hero-section {
    min-height: auto;
    padding-top: calc(var(--header-height) + 80px);
  }

  .hero-media {
    position: relative;
    right: auto;
    bottom: auto;
    order: 2;
    width: min(100%, 560px);
    height: auto;
    min-height: 340px;
    margin: 12px 0 34px auto;
  }

  .hero-copy {
    margin-bottom: 44px;
  }

  .two-column,
  .media-layout,
  .page-hero,
  .tab-panel {
    grid-template-columns: 1fr;
  }

  .capability-grid,
  .architecture-flow,
  .evidence-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .architecture-flow article::after {
    display: none;
  }

  .contact-band {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 700px) {
  :root {
    --header-height: 66px;
  }

  .site-header {
    padding-inline: 16px;
  }

  .brand-subtitle {
    display: none;
  }

  .hero-section,
  .page-hero,
  .section-band,
  .contact-band {
    padding-inline: 18px;
  }

  h1 {
    font-size: clamp(48px, 17vw, 76px);
  }

  h2 {
    font-size: clamp(30px, 10vw, 44px);
  }

  .hero-proof,
  .capability-grid,
  .architecture-flow,
  .media-slots,
  .application-list article,
  .stack-list article,
  .evidence-grid,
  .priority-list article,
  .spec-list {
    grid-template-columns: 1fr;
  }

  .large-slot {
    grid-row: auto;
    min-height: 280px;
  }

  .media-slot {
    min-height: 210px;
  }

  .page-hero {
    min-height: auto;
    padding-top: calc(var(--header-height) + 58px);
  }

  .tech-diagram,
  .model-stage {
    min-height: 320px;
  }

  .tab-panel {
    min-height: auto;
    padding: 22px;
  }

  .spec-list span {
    min-height: 86px;
  }
}

/* Shop page */
.shop-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 60px);
  align-items: end;
  padding: calc(var(--header-height) + 64px) clamp(20px, 5vw, 64px) 56px;
  border-bottom: 1px solid var(--line);
}

.shop-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-self: end;
  align-self: end;
}

.shop-tags span {
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.shop-band {
  padding-block: clamp(56px, 8vw, 96px);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 36px;
}

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 200ms ease, transform 200ms ease;
}

.product-card:hover {
  border-color: var(--jade-soft);
  transform: translateY(-2px);
}

.product-thumb {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(126, 228, 189, 0.05), rgba(215, 173, 98, 0.05)),
    var(--bg-elevated);
}

.product-thumb img,
.product-thumb video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-thumb.placeholder {
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(126, 228, 189, 0.06), rgba(215, 173, 98, 0.04)),
    repeating-linear-gradient(45deg, rgba(246, 241, 232, 0.025) 0 1px, transparent 1px 14px),
    var(--bg-elevated);
}

.placeholder-label {
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.product-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 10px;
  background: rgba(8, 10, 8, 0.78);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--jade);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.product-kicker .product-badge {
  position: static;
  display: inline-block;
  margin-left: 8px;
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 22px 24px;
}

.product-kicker {
  margin: 0;
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.product-info h3 {
  margin: 0;
  color: var(--ink);
  font-size: 19px;
  line-height: 1.25;
}

.product-info p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
}

.product-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

/* Shop cards are ~220px wide; the global 18-22px button type wraps inside
   them ("询价 Headstage" broke across two lines). */
.product-meta .button {
  min-height: 36px;
  padding: 8px 14px;
  font-size: 14px;
}

.product-meta > span {
  color: var(--steel);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
}

@media (max-width: 900px) {
  .shop-hero {
    grid-template-columns: 1fr;
  }
  .shop-tags {
    justify-self: start;
  }
}

/* FOUL fix: hide body until i18n applies for non-default languages.
   Inline <head> script sets html.i18n-await; i18n.js removes it after
   applyDict (or after a 1.2s safety timeout). */
html.i18n-await body {
  opacity: 0;
}

html.i18n-ready body,
html:not(.i18n-await) body {
  opacity: 1;
  transition: opacity 0.18s ease;
}

@media (prefers-reduced-motion: reduce) {
  html.i18n-ready body,
  html:not(.i18n-await) body {
    transition: none;
  }
}

/* News page */
.news-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 24px;
}

.news-filter {
  padding: 8px 16px;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 999px;
  font-size: 14px;
  cursor: pointer;
  color: var(--ink-soft);
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.news-filter:hover {
  border-color: var(--jade);
  color: var(--ink);
}

.news-filter.is-active {
  background: var(--jade);
  border-color: var(--jade);
  color: rgba(18, 19, 15, 0.92);
}

.news-list {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  /* One row holds two news items (deck screen 23). */
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 34px 28px;
}

@media (min-width: 900px) {
  .news-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Two-column news cards per the 2026-08-17 deck, screen 23:
   image on top, then title, then the date. Colours are token-based — the old
   rules used a dark ink on this dark band, leaving dates and body text unreadable. */
.news-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 0 20px;
  border-top: 0;
}

.news-item.is-hidden {
  display: none;
}

.news-thumb {
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--line);
}

.news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-date {
  font-size: 13px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  order: 3;
}

.news-cat {
  font-size: 12px;
  color: var(--jade);
  background: var(--jade-soft);
  padding: 4px 10px;
  border-radius: 4px;
  align-self: flex-start;
  order: 4;
}

.news-title {
  margin: 0;
  font-size: 19px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink);
  order: 2;
}

.news-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  order: 5;
}

.news-more {
  margin-top: 24px;
  text-align: center;
}

.media-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.media-item {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  padding: 16px 20px;
  background: rgba(242, 238, 228, 0.6);
  border-radius: 6px;
  font-size: 14px;
}

.media-name {
  color: rgba(18, 19, 15, 0.74);
  font-weight: 500;
}

.media-title {
  color: rgba(18, 19, 15, 0.66);
}

@media (max-width: 720px) {
  .news-item {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .news-title,
  .news-body {
    grid-column: 1;
  }
  .media-item {
    grid-template-columns: 1fr;
  }
}

/* Technology page — company & technology overview (spec 2026-08-17, screen 1) */
.tech-overview {
  width: min(var(--max-width), 100%);
  margin: 20px auto 0;
}

.tech-overview p {
  max-width: 74ch;
}

/* Applications — one detail band per scenario (deck screens 15-18).
   Media and copy sit side by side, stacking on narrow viewports. */
.scenario-band {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
  /* the section IS the grid: push its tracks onto the shared content
     column once the viewport is wider than that column */
  padding-left: max(clamp(20px, 5vw, 64px), calc((100% - var(--max-width)) / 2));
  padding-right: max(clamp(20px, 5vw, 64px), calc((100% - var(--max-width)) / 2));
}

@media (max-width: 860px) {
  .scenario-band {
    grid-template-columns: minmax(0, 1fr);
  }
}

.scenario-media {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--line);
  position: sticky;
  top: calc(var(--header-height) + 24px);
}

@media (max-width: 860px) {
  .scenario-media {
    position: static;
  }
}

.scenario-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.scenario-copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.scenario-copy h2 {
  margin: 0;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.scenario-lede {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 60ch;
}

.scenario-block {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.scenario-label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jade);
}

.scenario-block p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 60ch;
}

.scenario-link a {
  color: var(--jade);
  text-decoration: none;
  border-bottom: 1px solid rgba(126, 228, 189, 0.3);
  padding-bottom: 2px;
}

.scenario-link a:hover {
  color: #9eecc9;
  border-bottom-color: var(--jade);
}

.scenario-related {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.scenario-related a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 14.5px;
  border-bottom: 1px solid transparent;
}

.scenario-related a:hover {
  color: var(--jade);
  border-bottom-color: rgba(126, 228, 189, 0.4);
}

/* Partners — collaboration case studies (deck screen 20; content sourced from
   the product manual, pp. 27-30) */
.case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 28px;
}

.case-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.case-thumb {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--line);
}

.case-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.case-tag {
  align-self: flex-start;
  font-size: 12px;
  color: var(--jade);
  background: var(--jade-soft);
  padding: 3px 9px;
  border-radius: 4px;
}

.case-card h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink);
}

.case-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.form-other {
  max-width: 640px;
  margin: 18px 0 0;
  font-size: 13.5px;
  color: var(--ink-muted);
}

/* About page */
.about-prose {
  max-width: 760px;
  margin: 16px 0 0;
  margin-left: max(0px, calc((100% - var(--max-width)) / 2));
  margin-right: auto;
  text-align: left;
}

.about-prose p {
  margin: 0 0 24px;
  text-indent: 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(18, 19, 15, 0.78);
}

.about-prose p:last-child {
  margin-bottom: 0;
}

/* SpikeLink standalone detail section (platform §第2屏) */
.spikelink-band {
  padding: 60px clamp(20px, 5vw, 64px) 80px;
}
.spikelink-detail {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-top: 28px;
}
.spikelink-media {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(246, 241, 232, 0.08);
}
.spikelink-media video,
.spikelink-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.spikelink-media figcaption {
  position: absolute;
  bottom: 16px;
  left: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(246, 241, 232, 0.7);
  padding: 4px 10px;
  background: rgba(11, 12, 11, 0.7);
  backdrop-filter: blur(8px);
  border-radius: 999px;
}
.spikelink-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.spikelink-body {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(246, 241, 232, 0.82);
  margin: 0;
}
.spikelink-features {
  margin: 4px 0 0;
}
.spikelink-applications {
  margin: 8px 0 0;
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(246, 241, 232, 0.74);
  background: rgba(126, 228, 189, 0.06);
  border-left: 2px solid var(--jade);
  border-radius: 4px;
}
.spikelink-applications .app-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--jade);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.feat-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--jade);
  margin: 0 0 8px;
}

.spikelink-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}

@media (max-width: 880px) {
  .spikelink-detail {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* Research 10-product grid (platform §第3屏) */
.research-band {
  padding: 60px clamp(20px, 5vw, 64px) 80px;
}
.research-grid {
  list-style: none;
  margin: 28px auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}

/* auto-fill above (not auto-fit) so the single in-vitro product keeps one
   column instead of stretching across the whole band. */

.research-card {
  position: relative;
  padding: 0;
  background: rgba(15, 18, 16, 0.7);
  border: 1px solid rgba(246, 241, 232, 0.06);
  border-top: 2px solid var(--jade);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(12px);
}
.research-card-text {
  padding-top: 28px;
}
.research-num {
  position: absolute;
  top: 10px;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--jade);
  z-index: 2;
}
.research-thumb {
  margin: 0;
  height: 130px;
  overflow: hidden;
  position: relative;
}
.research-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,12,11,0) 40%, rgba(11,12,11,0.85) 100%);
}
.research-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.research-card:hover .research-thumb img { transform: scale(1.05); }
.overview-grid-rich .card-thumb .product-art,
.product-thumb .product-art,
.research-thumb .product-art {
  object-fit: contain;
}
.research-card h4 {
  margin: 14px 18px 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.research-card p {
  margin: 0 18px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(246, 241, 232, 0.66);
  flex: 1;
}
.research-card .card-cta {
  margin: 0 18px 18px;
  font-size: 13px;
  color: var(--jade);
  text-decoration: none;
  border-bottom: 1px solid rgba(126, 228, 189, 0.3);
  padding-bottom: 2px;
  align-self: flex-start;
}
.research-card .card-cta:hover {
  color: #9eecc9;
  border-bottom-color: var(--jade);
}

/* Numbered prose paragraphs for about page */
.about-prose-numbered {
  display: grid;
  gap: 28px;
}
.about-prose-numbered .prose-para {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  padding-top: 8px;
  border-top: 1px solid rgba(126, 228, 189, 0.18);
}
.about-prose-numbered .prose-num {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--jade);
  padding-top: 4px;
}
.about-prose-numbered .prose-para p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(246, 241, 232, 0.82);
}

.honors-grid {
  list-style: none;
  margin: 16px 0 0;
  margin-left: max(0px, calc((100% - var(--max-width)) / 2));
  margin-right: auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 680px;
}

.honor-item {
  /* was a cream fill with a dashed border — i.e. styled as an empty slot, which
     read as unfinished once the real honours went in. Now matches .compact-card. */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 24px 20px;
  background: rgba(15, 18, 16, 0.62);
  border-radius: 8px;
  border-top: 2px solid var(--jade);
  border-right: 1px solid rgba(246, 241, 232, 0.06);
  border-bottom: 1px solid rgba(246, 241, 232, 0.06);
  border-left: 1px solid rgba(246, 241, 232, 0.06);
}

.honor-mark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--jade-soft);
  border: 1px solid var(--jade);
  box-shadow: 0 0 0 4px rgba(126, 228, 189, 0.06);
}

.honor-name {
  margin: 0;
  font-size: 14px;
  color: rgba(246, 241, 232, 0.86);
}

.contact-info-band .contact-grid {
  width: min(var(--max-width), 100%);
  margin: 16px auto 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.contact-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.contact-row dt {
  color: var(--ink-muted);
  font-size: 13px;
}

.contact-row dd {
  margin: 0;
  font-size: 16px;
  color: var(--ink);
}

.contact-row a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--jade);
}

/* Partners — cooperation modes, flow, form */
.coop-modes-grid {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  /* 320px caps the row at 3 cards on a 1200px hero, so 6 cards land as 3x2. */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.coop-modes-grid li {
  padding: 22px 24px;
  background: rgba(15, 18, 16, 0.62);
  border-radius: 8px;
  border-top: 2px solid var(--jade);
  border-right: 1px solid rgba(246, 241, 232, 0.06);
  border-bottom: 1px solid rgba(246, 241, 232, 0.06);
  border-left: 1px solid rgba(246, 241, 232, 0.06);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
}

.coop-modes-grid h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 500;
  /* Had both `color: var(--ink)` and a dark-ink override on the next line;
     the override won, so all six mode titles were invisible. */
  color: var(--ink);
}

.coop-modes-grid p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(246, 241, 232, 0.72);
}

.coop-flow-steps {
  list-style: none;
  margin: 16px auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  counter-reset: step;
  position: relative;
}

.coop-flow-steps li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(15, 18, 16, 0.62);
  border: 1px solid rgba(246, 241, 232, 0.08);
  border-radius: 6px;
  position: relative;
}

.coop-flow-step {
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 500;
  color: var(--jade);
  letter-spacing: 0.04em;
}

.coop-flow-steps h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

.coop-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px 24px;
  max-width: var(--max-width);
  margin: 16px 0 0;
}

.coop-form .form-row-wide {
  grid-column: 1 / -1;
}

@media (max-width: 720px) {
  .coop-form {
    grid-template-columns: 1fr;
  }
}

.form-row {
  display: grid;
  /* 150px, not 110px: the deck's labels (机构/单位全称 *, 合作意向描述（可选）)
     are longer than the ones this column was sized for. */
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.form-row > input,
.form-row > select,
.form-row > textarea {
  min-width: 0;
  width: 100%;
}

.form-row label {
  font-size: 14px;
  font-weight: 500;
  /* Was rgba(18,19,15,.82) — dark ink on a dark band, so every field label on
     the collaboration form was invisible. */
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}

.form-row input,
.form-row select,
.form-row textarea {
  padding: 14px 16px;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(18, 19, 15, 0.14);
  border-radius: 6px;
  color: rgba(18, 19, 15, 0.92);
  font: inherit;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.form-row textarea {
  resize: vertical;
  min-height: 84px;
}

.form-row input::placeholder,
.form-row textarea::placeholder {
  color: rgba(18, 19, 15, 0.38);
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--jade);
  box-shadow: 0 0 0 4px rgba(126, 228, 189, 0.18);
}

.form-actions {
  grid-template-columns: 150px auto 1fr;
  align-items: center;
}

.form-status {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--jade);
}

.form-status .button-tiny {
  margin-top: 8px;
}

.quote-form .form-actions,
.coop-form .form-actions {
  grid-template-columns: auto 1fr;
  align-items: center;
}

.form-actions .button {
  white-space: nowrap;
}

.form-actions .button {
  justify-self: start;
}

.form-note {
  margin: 0;
  font-size: 13px;
  color: var(--ink-muted);
}

@media (max-width: 720px) {
  .form-row,
  .form-actions {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .form-actions .button {
    justify-self: stretch;
  }
}

/* Shop quote cart */
.button-tiny {
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 4px;
  /* .button sets min-height:48px; without this override a "tiny" button is
     still 48px tall and reads as an empty box. */
  min-height: 32px;
}

[data-add-quote] {
  background: transparent;
  border: 1px solid var(--jade);
  /* Was rgba(18,19,15,.86) — dark ink on a transparent button over a dark
     card, so the 「+ 询价单」 label was invisible and the control looked like
     an empty outline. */
  color: var(--jade);
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}

[data-add-quote]:hover {
  background: var(--jade-soft);
}

[data-add-quote].is-added {
  background: var(--jade);
  color: rgba(18, 19, 15, 0.92);
  border-color: var(--jade);
}

.quote-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px 24px;
  max-width: var(--max-width);
  margin: 16px 0 0;
}

/* rehab grid holds 6 cards. auto-fit gives 2 tracks below 1000px and 3 up to
1301px — both divide 6 evenly, so no fill rule may apply there, or row 2
overflows. The 4th track needs 4*280 + 3*18 = 1174px of container; the
container caps at --max-width 1180 and the page eats 128px of padding, so
4 tracks start at exactly 1302px of viewport. There row 2 holds 2 cards and
ends two tracks short, so those last two each span two. */
@media (min-width: 1302px) {
  #shop-rehab .product-grid .product-card:nth-last-child(-n + 2) {
    grid-column: span 2;
  }
}

.quote-form .form-row-textarea,
.quote-form .form-actions,
.quote-form .quote-cart {
  grid-column: 1 / -1;
}

@media (max-width: 720px) {
  .quote-form {
    grid-template-columns: 1fr;
  }
}

.quote-cart {
  display: grid;
  gap: 8px;
  padding: 16px 20px;
  background: rgba(15, 18, 16, 0.62);
  border: 1px solid rgba(246, 241, 232, 0.08);
  border-radius: 6px;
}

.quote-cart > label {
  font-size: 13px;
  color: rgba(246, 241, 232, 0.66);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.quote-cart-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.quote-cart-empty {
  font-size: 14px;
  color: rgba(246, 241, 232, 0.7);
  font-style: italic;
}

.quote-cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(246, 241, 232, 0.08);
  border: 1px solid rgba(246, 241, 232, 0.1);
  border-radius: 4px;
  font-size: 14px;
  color: rgba(246, 241, 232, 0.9);
}

.quote-cart-remove {
  background: transparent;
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: rgba(246, 241, 232, 0.66);
}

.quote-cart-remove:hover {
  background: rgba(246, 241, 232, 0.1);
  color: rgba(246, 241, 232, 0.96);
}

.quote-contact {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
}

.form-row-textarea {
  align-items: start;
}

.form-row textarea {
  padding: 10px 12px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(18, 19, 15, 0.18);
  border-radius: 4px;
  color: rgba(18, 19, 15, 0.92);
  font: inherit;
  resize: vertical;
  min-height: 80px;
}

.form-row textarea:focus {
  outline: 2px solid var(--jade);
  outline-offset: 1px;
  border-color: var(--jade);
}

.quote-bar {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: rgba(18, 19, 15, 0.94);
  color: rgba(242, 238, 228, 0.94);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 50;
  font-size: 14px;
}

.quote-bar strong {
  font-size: 18px;
  color: var(--jade);
  margin-right: 4px;
}

.quote-bar[hidden] {
  display: none;
}

/* Platform — compact product grids (rehab + consumer) */
/* 技术详解 holds exactly six items; at auto-fill widths that lands 5 + 1 and the
   lone card reads as a bug. Three columns gives two even rows. */
.detail-band .compact-grid {
  /* exactly six items: pin three columns so they read 3 x 2 instead of 4 + 2 */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .detail-band .compact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .detail-band .compact-grid { grid-template-columns: 1fr; }
}

.compact-grid {
  display: grid;
  /* auto-fill, not auto-fit: a group holding one card (e.g. 信号采集) keeps a
     single column instead of stretching across the band. */
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  /* <ul> without a reset: UA padding-left sat the cards 40px right of every
     container edge they were supposed to share (technology headings, platform
     group titles). Join the shared content column instead. */
  list-style: none;
  padding: 0;
  width: min(var(--max-width), 100%);
  margin-left: auto;
  margin-right: auto;
}

/* A group holding a single product (离体产品, 信号采集, 康复机器人) rendered as a
   lone narrow chip against a wide empty band. Two columns' worth reads as a
   deliberate card, without stretching across the whole band. */
.compact-grid > :only-child,
.research-grid > :only-child {
  grid-column: span 2;
  max-width: 620px;
}
@media (max-width: 700px) {
  .compact-grid > :only-child,
  .research-grid > :only-child { grid-column: auto; max-width: none; }
}

.compact-card {
  padding: 22px 24px;
  background: rgba(15, 18, 16, 0.62);
  border-radius: 8px;
  border-top: 2px solid var(--jade);
  border-right: 1px solid rgba(246, 241, 232, 0.06);
  border-bottom: 1px solid rgba(246, 241, 232, 0.06);
  border-left: 1px solid rgba(246, 241, 232, 0.06);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.compact-card h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.compact-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(246, 241, 232, 0.72);
}

.card-cta {
  margin-top: auto;
  font-size: 13px;
  /* Was rgba(18,19,15,.74) — dark ink on a dark band, so only the jade
     underline showed and the link text was invisible. The .research-card and
     .overview-grid-rich overrides already used --jade; this matches them. */
  color: var(--jade);
  text-decoration: none;
  align-self: flex-start;
  border-bottom: 1px solid rgba(126, 228, 189, 0.3);
  padding-bottom: 2px;
}

.card-cta:hover {
  color: #9eecc9;
  border-bottom-color: var(--jade);
}

.band-sub-title {
  /* sit on the shared content column, not the band's padding edge */
  width: min(var(--max-width), 100%);
  margin: 32px auto 4px;
  font-size: 16px;
  font-weight: 600;
  /* Was rgba(18,19,15,.66) — a dark ink on a dark band, i.e. invisible.
     Every band using this class sits on the dark ground. */
  color: var(--ink);
  letter-spacing: 0.02em;
}

.band-sub-note {
  width: min(var(--max-width), 100%);
  margin: 0 auto 4px;
  font-size: 13.5px;
  color: var(--ink-muted);
}

.research-sub {
  margin: 2px 0 8px;
  font-size: 13px;
  color: var(--jade);
  letter-spacing: 0.01em;
}

/* Cinematic tag — short callout under titles */
.cinematic-illus {
  margin: 6px 0 0;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}

.cinematic-tag {
  margin: 8px 0 12px;
  font-size: 18px;
  font-weight: 500;
  color: var(--jade);
  letter-spacing: 0.02em;
}

.cinematic-labels {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 15px;
  color: rgba(242, 238, 228, 0.92);
}

.cinematic-labels li {
  position: relative;
  padding-left: 18px;
}

.cinematic-labels li::before {
  content: "·";
  color: var(--jade);
  position: absolute;
  left: 6px;
  top: -2px;
  font-size: 22px;
  font-weight: 700;
}

.cinematic-link {
  margin: 16px 0 0;
}

.cinematic-link a {
  color: var(--jade);
  text-decoration: none;
  font-size: 15px;
  border-bottom: 1px solid var(--jade);
  padding-bottom: 2px;
}

.cinematic-link a:hover {
  color: rgba(242, 238, 228, 0.96);
  border-bottom-color: rgba(242, 238, 228, 0.96);
}

/* Platform 5-category overview cards */
.overview-grid {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

/* Rich variant — with thumbnail + numbered ribbon */
.overview-grid-rich {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.overview-grid-rich li {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: rgba(20, 22, 20, 0.7);
  border: 1px solid rgba(246, 241, 232, 0.08);
  border-top: 2px solid var(--jade);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}
.overview-grid-rich .card-num {
  position: absolute;
  top: 10px;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(246, 241, 232, 0.54);
  z-index: 2;
}
.overview-grid-rich .card-thumb {
  margin: 0;
  height: 120px;
  overflow: hidden;
  position: relative;
}
.overview-grid-rich .card-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,12,11,0) 40%, rgba(11,12,11,0.85) 100%);
  pointer-events: none;
}
.overview-grid-rich .card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.overview-grid-rich li:hover .card-thumb img {
  transform: scale(1.04);
}
.overview-grid-rich h3 {
  margin: 14px 18px 6px;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
}
.overview-grid-rich p {
  margin: 0 18px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(246, 241, 232, 0.62);
  flex: 1;
}
.overview-grid-rich .card-cta {
  margin: 0 18px 18px;
  font-size: 13px;
  color: var(--jade);
  text-decoration: none;
  border-bottom: 1px solid rgba(126, 228, 189, 0.3);
  padding-bottom: 2px;
  align-self: flex-start;
}
.overview-grid-rich .card-cta:hover {
  border-bottom-color: var(--jade);
  color: #9eecc9;
}

/* Technology hero — chip-macro background variant */
.tech-hero-rich {
  position: relative;
  overflow: hidden;
}
.tech-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.tech-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  opacity: 0.65;
  filter: contrast(1.15) saturate(0.85);
}
.tech-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 80% at 18% 55%, rgba(11, 12, 11, 0.94), transparent 65%),
    linear-gradient(180deg, rgba(11, 12, 11, 0.5) 0%, rgba(11, 12, 11, 0.15) 35%, rgba(11, 12, 11, 0.85) 100%);
}
.tech-hero-rich .page-hero-copy {
  position: relative;
  z-index: 1;
}

/* Unified cinematic hero — dedicated photoreal background per page */
.platform-hero-rich,
.shop-hero-rich,
.partners-hero-rich,
.news-hero-rich,
.about-hero-rich,
.apps-hero-rich,
.contact-hero-rich {
  position: relative;
  overflow: hidden;
}
.platform-hero-bg,
.shop-hero-bg,
.partners-hero-bg,
.news-hero-bg,
.about-hero-bg,
.apps-hero-bg,
.contact-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.platform-hero-bg img,
.shop-hero-bg img,
.partners-hero-bg img,
.news-hero-bg img,
.about-hero-bg img,
.apps-hero-bg img,
.contact-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.7;
  filter: contrast(1.05) saturate(0.9);
}
.platform-hero-bg::after,
.shop-hero-bg::after,
.partners-hero-bg::after,
.news-hero-bg::after,
.about-hero-bg::after,
.apps-hero-bg::after,
.contact-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11,12,11,0.95) 0%, rgba(11,12,11,0.75) 35%, rgba(11,12,11,0.15) 70%, rgba(11,12,11,0.45) 100%),
    linear-gradient(180deg, rgba(11,12,11,0.4) 0%, transparent 30%, rgba(11,12,11,0.6) 100%);
}
.platform-hero-rich .page-hero-copy,
.shop-hero-rich .page-hero-copy,
.partners-hero-rich .page-hero-copy,
.news-hero-rich .page-hero-copy,
.about-hero-rich .page-hero-copy,
.apps-hero-rich .page-hero-copy,
.contact-hero-rich .page-hero-copy {
  position: relative;
  z-index: 1;
}

/* Bigger cinematic hero titles — closer to mockup proportions */
.platform-hero-rich .page-hero-copy h1,
.shop-hero-rich .page-hero-copy h1,
.partners-hero-rich .page-hero-copy h1,
.news-hero-rich .page-hero-copy h1,
.about-hero-rich .page-hero-copy h1,
.apps-hero-rich .page-hero-copy h1,
.contact-hero-rich .page-hero-copy h1,
.tech-hero-rich .page-hero-copy h1 {
  font-size: clamp(56px, 7.4vw, 112px);
  letter-spacing: -0.025em;
  line-height: 1.02;
}

/* News list lives inside a dark cinematic hero, so repaint light-theme defaults. */
.news-hero-rich p.news-more {
  max-width: none;
}

.news-hero-rich .news-list {
  padding: 12px 20px;
  background: rgba(11, 12, 11, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid rgba(246, 241, 232, 0.08);
}
.news-hero-rich .news-item {
  border-top-color: rgba(246, 241, 232, 0.12);
  padding: 18px 4px;
}
.news-hero-rich .news-item:first-child {
  border-top: none;
}
.news-hero-rich .news-date {
  color: rgba(246, 241, 232, 0.65);
}
.news-hero-rich .news-title {
  color: var(--bone, #f6f1e8);
}
.news-hero-rich .news-body {
  color: rgba(246, 241, 232, 0.78);
}

/* Pillar cards — large numbered tiles, 3-up */
.pillar-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.pillar-card {
  position: relative;
  padding: 28px 24px 24px;
  background: rgba(20, 22, 20, 0.86);
  border-radius: 8px;
  border: 1px solid rgba(126, 228, 189, 0.18);
  border-top: 2px solid var(--jade);
  backdrop-filter: blur(8px);
}
.pillar-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--jade);
  margin-bottom: 12px;
  opacity: 0.9;
}
.pillar-card h4 {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 10px;
}
.pillar-card p {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(246, 241, 232, 0.68);
  margin: 0;
}

/* Partners coop modes — numbered ribbon */
.coop-modes-grid li {
  position: relative;
}
.mode-num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--jade);
  margin-bottom: 10px;
}

/* Subtle dot-network background on partners hero */
.partners-hero {
  position: relative;
  overflow: hidden;
}
.partners-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(126, 228, 189, 0.18) 0, transparent 2px),
    radial-gradient(circle at 32% 70%, rgba(126, 228, 189, 0.12) 0, transparent 2px),
    radial-gradient(circle at 78% 18%, rgba(215, 173, 98, 0.10) 0, transparent 2px),
    radial-gradient(circle at 84% 64%, rgba(126, 228, 189, 0.14) 0, transparent 2px),
    radial-gradient(circle at 58% 38%, rgba(126, 228, 189, 0.08) 0, transparent 2px),
    radial-gradient(circle at 22% 52%, rgba(215, 173, 98, 0.08) 0, transparent 2px);
  background-size: 100% 100%;
  opacity: 1;
}

.overview-grid li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px;
  background: rgba(15, 18, 16, 0.62);
  border: 1px solid rgba(246, 241, 232, 0.06);
  border-top: 2px solid var(--jade);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  color: var(--ink);
  border-radius: 6px;
  border-top: 2px solid var(--jade);
}

.overview-grid h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.overview-grid p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(246, 241, 232, 0.72);
}

.overview-grid .card-cta {
  margin-top: auto;
}

@media (max-width: 720px) {
  .form-row-textarea {
    grid-template-columns: 1fr;
  }
  .quote-bar {
    bottom: 12px;
    right: 12px;
    left: 12px;
    justify-content: space-between;
  }
  /* Avoid the fixed quote bar covering submit button when bar is visible */
  body[data-page="shop"]:has([data-quote-bar]:not([hidden])) main {
    padding-bottom: 96px;
  }
}

/* .section-heading is a var(--max-width) block with auto side margins, so its text
   starts inset from the band's padding edge. Forms below it sat flush at that edge,
   giving each application screen two competing left axes. Derive the same inset
   rather than hardcoding it. */
.coop-form-band .coop-form,
.coop-form-band .form-other,
.quote-form-band form {
  margin-left: max(0px, calc((100% - var(--max-width)) / 2));
}

/* Phone product grid — MUST come after the .product-grid base rule: the
   earlier responsive block (near line 623) is overridden by it, so auto-fit
   kept running at phone width and split the 354px container into 280px +
   56px tracks, stacking long-titled cards one character per line. */
@media (max-width: 719px) {
  .product-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .product-card {
    max-width: 100%;
  }
  .product-info {
    min-width: 0;
  }
  .product-info h3 {
    overflow-wrap: anywhere;
  }
}

/* the mark tile already carries the original 幻联 wordmark — the Chinese
   name line next to it duplicates it verbatim */
.brand .brand-name {
  display: none;
}