:root {
  --ink: #111820;
  --ink-2: #18232d;
  --paper: #f4f6f7;
  --white: #ffffff;
  --line: #d9e0e4;
  --muted: #64717c;
  --cyan: #29bfd0;
  --cyan-soft: #8ce0e7;
  --blue: #07589f;
  --lime: #7fbe5b;
  --amber: #efb43d;
  --coral: #e86e60;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --header-height: 58px;
  --nav-height: 62px;
  color-scheme: light;
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
  letter-spacing: 0;
  padding-bottom: calc(var(--nav-height) + var(--safe-bottom));
}
body.dialog-open { overflow: hidden; }
button, a, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, dl, dd { margin: 0; }

.skip-link {
  position: fixed;
  left: 10px;
  top: -80px;
  z-index: 200;
  padding: 10px 14px;
  background: var(--white);
  color: var(--ink);
}
.skip-link:focus { top: 10px; }

.mobile-header {
  position: fixed;
  z-index: 80;
  inset: 0 0 auto;
  height: calc(var(--header-height) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(14, 20, 27, 0.7);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: background .25s ease;
}
.mobile-header.is-solid { background: rgba(14,20,27,.95); }
.mobile-brand { width: 118px; display: block; }
.mobile-brand img { width: 100%; height: 35px; object-fit: contain; object-position: left center; filter: brightness(0) invert(1); }
.header-meta { display: flex; align-items: center; gap: 12px; }
.header-progress { width: 44px; height: 2px; background: rgba(255,255,255,.2); overflow: hidden; }
.header-progress i { display: block; width: 100%; height: 100%; background: var(--cyan); transform: scaleX(0); transform-origin: left; }
.language-toggle {
  width: 40px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 4px;
  background: rgba(255,255,255,.06);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
}

.hero {
  position: relative;
  height: calc(100svh - 30px);
  min-height: 650px;
  max-height: 900px;
  overflow: hidden;
  color: #fff;
  background: #0f151c;
}
.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% center;
  transform: scale(1.48);
  filter: brightness(.72) saturate(.88) contrast(1.08);
}
.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8,13,18,.28) 0%, rgba(8,13,18,.42) 35%, rgba(8,13,18,.9) 100%),
    linear-gradient(90deg, rgba(8,14,20,.58), transparent 70%);
}
.hero-data-canvas, .hero-grid { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-grid {
  opacity: .26;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, transparent 12%, #000 52%, transparent 98%);
}
.hero-content {
  position: absolute;
  z-index: 3;
  inset: auto 20px 112px;
  max-width: 520px;
}
.eyebrow, .section-index {
  color: var(--cyan);
  font-size: 10px;
  line-height: 1.4;
  font-weight: 800;
  text-transform: uppercase;
}
.hero h1 {
  margin-top: 14px;
  max-width: 480px;
  font-size: 34px;
  line-height: 1.16;
  font-weight: 650;
  text-wrap: balance;
}
.hero-lead { margin-top: 16px; max-width: 420px; color: rgba(255,255,255,.76); font-size: 14px; line-height: 1.7; }
.hero-actions { display: flex; gap: 9px; margin-top: 25px; }
.button {
  min-height: 44px;
  padding: 0 15px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 750;
}
.button svg { width: 16px; height: 16px; }
.button-primary { background: var(--cyan); color: #082029; }
.button-glass { background: rgba(255,255,255,.07); color: #fff; border-color: rgba(255,255,255,.24); backdrop-filter: blur(8px); }
.hero-system-line { display: flex; align-items: center; gap: 8px; margin-top: 24px; color: rgba(255,255,255,.6); font-size: 9px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.hero-system-line i { width: 14px; height: 1px; background: rgba(255,255,255,.28); }
.hero-scroll { position: absolute; z-index: 4; left: 20px; bottom: 28px; display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,.64); font-size: 10px; }
.hero-scroll svg { width: 14px; animation: scroll-cue 1.8s ease-in-out infinite; }
@keyframes scroll-cue { 0%,100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }

.proof-strip { background: #fff; border-bottom: 1px solid var(--line); overflow: hidden; }
.proof-track { display: grid; grid-template-columns: repeat(4, minmax(105px, 1fr)); overflow-x: auto; scrollbar-width: none; }
.proof-track::-webkit-scrollbar, .horizontal-scroll::-webkit-scrollbar { display: none; }
.proof-track article { min-height: 96px; padding: 20px 16px; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; }
.proof-track strong { color: var(--blue); font-size: 24px; font-weight: 720; }
.proof-track span { margin-top: 6px; color: var(--muted); font-size: 11px; white-space: nowrap; }

.section-shell { width: 100%; max-width: 620px; margin: 0 auto; padding: 74px 18px; }
.light-section { background: var(--paper); }
.dark-section { background: var(--ink); color: #fff; }
.section-heading { display: grid; gap: 13px; }
.section-heading h2, .value-section h2, .model-section h2, .process-section h2, .case-section h2, .about-section h2, .contact-section h2 {
  margin-top: 10px;
  font-size: 29px;
  line-height: 1.2;
  font-weight: 680;
  text-wrap: balance;
}
.section-heading > p, .section-intro { color: var(--muted); font-size: 14px; line-height: 1.8; }
.on-dark > p, .dark-section .section-intro { color: #96a5b0; }
.value-section { background: #fff; }
.value-section .section-intro { margin-top: 16px; }
.value-journey { position: relative; margin-top: 35px; border-top: 1px solid var(--line); }
.value-journey article { position: relative; min-height: 112px; padding: 22px 8px 22px 56px; border-bottom: 1px solid var(--line); }
.value-journey article > span { position: absolute; top: 25px; left: 0; color: #9ba7af; font: 700 10px ui-monospace, monospace; }
.value-journey article > svg { position: absolute; top: 23px; left: 25px; width: 19px; color: var(--blue); }
.value-journey strong { display: block; font-size: 17px; }
.value-journey p { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.65; }

.stack-section { border-top: 1px solid var(--line); }
.stack-flow { margin-top: 34px; display: flex; flex-direction: column; }
.stack-layer {
  display: grid;
  grid-template-columns: 42px 1fr 34px;
  gap: 11px;
  align-items: center;
  min-height: 92px;
  padding: 15px;
  background: #fff;
  border: 1px solid #dce3e7;
  border-left: 3px solid var(--layer-color, var(--blue));
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(17,24,32,.055);
}
.stack-service { --layer-color: var(--coral); }
.stack-model { --layer-color: var(--amber); }
.stack-data { --layer-color: var(--cyan); }
.stack-sensing { --layer-color: var(--blue); }
.layer-icon { width: 38px; height: 38px; display: grid; place-items: center; background: color-mix(in srgb, var(--layer-color) 12%, white); color: var(--layer-color); border-radius: 4px; }
.layer-icon svg { width: 19px; }
.stack-layer span { color: var(--layer-color); font: 800 9px ui-monospace, monospace; }
.stack-layer h3 { margin-top: 3px; font-size: 16px; }
.stack-layer p { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.layer-toggle { width: 32px; height: 32px; border: 1px solid var(--line); background: transparent; border-radius: 4px; display: grid; place-items: center; }
.layer-toggle svg { width: 15px; transition: transform .25s; }
.stack-layer.is-open .layer-toggle svg { transform: rotate(45deg); }
.layer-detail { grid-column: 1 / -1; display: none; padding: 13px 4px 2px; border-top: 1px solid var(--line); color: #4f5d67; font-size: 12px; line-height: 1.7; }
.stack-layer.is-open .layer-detail { display: block; }
.data-lift { height: 54px; display: flex; align-items: center; gap: 12px; padding-left: 32px; color: #71808a; font-size: 10px; }
.data-lift i { position: relative; width: 2px; height: 100%; background: #d3dde2; overflow: hidden; }
.data-lift i::after { content: ""; position: absolute; left: 0; width: 2px; height: 14px; background: var(--cyan); animation: data-up 1.8s linear infinite; }
@keyframes data-up { from { top: 100%; } to { top: -14px; } }

.technology-section { background: #101820; }
.technology-section .section-shell { padding-bottom: 84px; }
.horizontal-scroll { display: flex; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; overscroll-behavior-inline: contain; }
.tech-tabs { gap: 8px; margin: 27px -18px 0; padding: 0 18px 10px; }
.tech-tab { flex: 0 0 auto; height: 42px; padding: 0 13px; border: 1px solid #33404a; border-radius: 5px; background: #18232c; color: #aeb9c1; display: flex; align-items: center; gap: 7px; font-size: 11px; }
.tech-tab svg { width: 16px; }
.tech-tab.is-active { color: #fff; border-color: var(--cyan); background: #183640; }
.tech-card { margin-top: 12px; background: #141e27; border: 1px solid #34414b; border-radius: 6px; overflow: hidden; }
.tech-copy { padding: 18px; border-bottom: 1px solid #34414b; }
.tech-copy > p:first-child { color: var(--cyan); font: 800 9px ui-monospace, monospace; }
.tech-copy h3 { margin-top: 7px; font-size: 21px; }
.tech-copy > p:last-of-type { margin-top: 10px; color: #9eabb4; font-size: 12px; line-height: 1.7; }
.tech-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 16px; background: #34414b; border: 1px solid #34414b; }
.tech-metrics div { min-width: 0; padding: 10px 8px; background: #17222b; }
.tech-metrics strong, .tech-metrics span { display: block; overflow-wrap: anywhere; }
.tech-metrics strong { font-size: 11px; color: #fff; }
.tech-metrics span { margin-top: 4px; color: #788791; font-size: 7px; }
.tech-visual { margin: 0; }
.live-visual-stage { position: relative; width: 100%; min-height: 460px; overflow: hidden; background: #10171e; }
.tech-visual figcaption { min-height: 38px; padding: 0 11px; display: flex; align-items: center; gap: 7px; color: #818f99; font-size: 8px; border-top: 1px solid #303c46; }
.tech-visual figcaption > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tech-visual figcaption b { margin-left: auto; color: var(--cyan); font: 700 7px ui-monospace, monospace; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgba(127,190,91,.12); }
.live-visual-loading, .live-visual-error { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: #77858f; font: 700 9px ui-monospace, monospace; }
.live-visual-loading span { width: 28px; height: 28px; border: 2px solid #30414d; border-top-color: var(--cyan); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.live-panel-enter { animation: panel-in .36s ease-out both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } }

/* Real inspection visual components */
.profile-live { min-height: 460px; padding: 10px; display: grid; grid-template-rows: 1fr 1fr auto; gap: 8px; }
.profile-result-panel { min-height: 0; border: 1px solid #303d47; background: #111920; overflow: hidden; }
.profile-result-heading { height: 29px; padding: 0 9px; display: flex; justify-content: space-between; align-items: center; color: #9aa8b2; font-size: 8px; border-bottom: 1px solid #303d47; }
.profile-result-heading strong { color: #657680; font: 600 7px ui-monospace, monospace; }
.profile-actual-image { position: relative; height: calc(100% - 29px); overflow: hidden; }
.profile-actual-image img { width: 100%; height: 100%; object-fit: contain; background: #0c1319; }
.profile-inspection-scan { position: absolute; left: 0; right: 0; height: 1px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: scan 2.8s ease-in-out infinite; }
@keyframes scan { 0%,100% { top: 12%; opacity: .2; } 50% { top: 88%; opacity: 1; } }
.live-readout-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: #33414b; border: 1px solid #33414b; }
.live-readout-row > div { min-height: 46px; padding: 8px; background: #17212a; }
.live-readout-row span, .live-readout-row strong { display: block; }
.live-readout-row span { color: #77858f; font-size: 7px; }
.live-readout-row strong { margin-top: 4px; color: #fff; font: 700 9px ui-monospace, monospace; }
.profile-verdict strong { color: #ff7b70; }
.pointcloud-live, .ai-live, .submicron-live { position: relative; min-height: 460px; overflow: hidden; background: #101820; }
.three-stage { position: absolute; inset: 0; }
.three-stage canvas, .submicron-three-stage canvas { width: 100%; height: 100%; touch-action: none; }
.three-topbar { position: absolute; z-index: 3; top: 8px; left: 8px; right: 8px; min-height: 39px; padding: 6px 7px; display: flex; align-items: center; justify-content: space-between; gap: 5px; background: rgba(13,20,27,.84); border: 1px solid #36444e; backdrop-filter: blur(8px); }
.three-topbar > span { max-width: 36%; display: flex; align-items: center; gap: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #9ba9b3; font-size: 7px; }
.three-topbar > span svg { width: 11px; }
.three-toolbar-actions, .three-z-control { display: flex; align-items: center; gap: 5px; }
.three-z-control > span { display: none; }
.three-z-control input { width: 84px; accent-color: var(--cyan); }
.three-z-control output { width: 29px; color: #fff; font: 700 8px ui-monospace, monospace; }
.live-icon-button { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid #45525c; border-radius: 3px; background: #151f27; color: #fff; }
.live-icon-button svg { width: 13px; }
.three-hud { position: absolute; z-index: 3; left: 8px; right: 8px; bottom: 9px; display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(13,20,27,.86); border: 1px solid #34424c; }
.three-hud > div { min-width: 0; min-height: 43px; padding: 7px; border-right: 1px solid #34424c; }
.three-hud > div:last-child { border-right: 0; }
.three-hud span, .three-hud strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.three-hud span { color: #6d7c86; font-size: 6px; }
.three-hud strong { margin-top: 4px; color: #fff; font: 700 8px ui-monospace, monospace; }
.height-legend { position: absolute; z-index: 2; top: 66px; right: 9px; bottom: 72px; display: flex; flex-direction: column; align-items: flex-end; color: #8a98a2; font: 600 7px ui-monospace, monospace; }
.height-legend i { width: 7px; flex: 1; margin: 4px 0; background: linear-gradient(#e9444a,#f7c33c,#5bd891,#22bed0,#2350d3); }
.ai-live > img { width: 100%; height: 100%; min-height: 460px; object-fit: cover; object-position: center; }
.ai-live::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 56%, rgba(8,13,18,.88)); pointer-events: none; }
.ai-scan-line { position: absolute; z-index: 2; left: 0; right: 0; top: 15%; height: 1px; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); animation: ai-scan 3.6s ease-in-out infinite; }
@keyframes ai-scan { 0%,100% { top: 13%; } 50% { top: 72%; } }
.ai-live-status { position: absolute; z-index: 3; left: 8px; right: 8px; bottom: 9px; display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(13,20,27,.86); border: 1px solid #34424c; }
.ai-live-status > div { min-width: 0; padding: 8px; border-right: 1px solid #34424c; }
.ai-live-status span, .ai-live-status strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-live-status span { color: #75838d; font-size: 6px; }
.ai-live-status strong { margin-top: 4px; color: #fff; font: 700 8px ui-monospace, monospace; }
.submicron-live { display: grid; grid-template-rows: 230px 300px; min-height: 530px; }
.submicron-cloud-panel, .submicron-profile-panel { position: relative; min-height: 0; overflow: hidden; }
.submicron-cloud-panel { border-bottom: 1px solid #34424c; }
.submicron-three-stage { position: absolute; inset: 0; }
.submicron-profile-panel { background: #111920; padding-top: 36px; }
.submicron-profile-title { position: absolute; z-index: 2; inset: 0 0 auto; height: 36px; padding: 0 8px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #303d47; color: #9daab3; font-size: 7px; }
.submicron-profile-actions { display: flex; align-items: center; gap: 5px; }
.submicron-profile-actions strong { display: none; }
.submicron-profile { height: 210px; }
.submicron-readouts { grid-template-columns: repeat(3, 1fr); margin: 0 7px 7px; }
.submicron-height-legend { top: 58px; bottom: 58px; }
.submicron-three-hud { bottom: 7px; }
.training-live { min-height: 460px; padding: 20px 14px; background: #111920; }
.training-hero p { color: var(--cyan); font: 800 8px ui-monospace, monospace; }
.training-hero h4 { margin: 7px 0 0; font-size: 21px; }
.training-hero span { display: block; margin-top: 8px; color: #87959f; font-size: 10px; line-height: 1.6; }
.training-bars { display: grid; gap: 12px; margin-top: 25px; }
.training-bars div { display: grid; grid-template-columns: 94px 1fr; gap: 5px 9px; color: #aab5bd; font-size: 8px; }
.training-bars i { position: relative; grid-column: 2; height: 15px; background: #27343e; overflow: hidden; }
.training-bars i::before, .training-bars i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; }
.training-bars i::before { width: var(--before); background: #45525c; }
.training-bars i::after { width: var(--after); background: var(--cyan); }
.training-bars strong { grid-column: 2; color: #fff; font: 700 8px ui-monospace, monospace; }
.training-stack { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 24px; background: #34414b; border: 1px solid #34414b; }
.training-stack div { padding: 12px; background: #17222b; }
.training-stack strong, .training-stack span { display: block; }
.training-stack strong { color: var(--amber); font: 700 10px ui-monospace, monospace; }
.training-stack span { margin-top: 4px; color: #7e8c96; font-size: 8px; }

.model-section { background: #18222b; border-top: 1px solid #33414b; }
.model-section .section-intro { margin-top: 15px; }
.synergy-line { display: grid; grid-template-columns: 1fr 34px 1fr; align-items: center; margin-top: 30px; }
.synergy-line article { min-height: 134px; padding: 14px; border: 1px solid #3b4852; background: #111920; }
.synergy-line > svg { width: 16px; justify-self: center; color: var(--cyan); }
.synergy-line span { color: #6f7e88; font: 700 7px ui-monospace, monospace; }
.synergy-line strong { display: block; margin-top: 9px; color: var(--cyan); font-size: 17px; overflow-wrap: anywhere; }
.synergy-line p { margin-top: 10px; color: #8d9aa4; font-size: 9px; line-height: 1.55; }
.model-results { display: grid; gap: 12px; margin-top: 14px; }
.accuracy-block, .benchmark-block { padding: 17px; background: #111920; border: 1px solid #3a4751; }
.accuracy-block > span { color: #aab4bb; font-size: 11px; }
.accuracy-block > div { display: grid; grid-template-columns: 65px 1fr 42px; align-items: center; gap: 8px; margin-top: 14px; }
.accuracy-block label { color: #7f8e98; font-size: 9px; }
.accuracy-block i { height: 7px; background: #26333d; }
.accuracy-block i::after { content: ""; display: block; width: var(--value); height: 100%; background: linear-gradient(90deg, var(--cyan), var(--lime)); transform-origin: left; animation: grow 1.2s ease both; }
@keyframes grow { from { transform: scaleX(0); } }
.accuracy-block strong { color: #fff; font: 700 9px ui-monospace, monospace; }
.benchmark-title span { color: var(--amber); font: 700 7px ui-monospace, monospace; }
.benchmark-title strong { display: block; margin-top: 6px; color: #fff; font-size: 11px; line-height: 1.45; }
.benchmark-block article { margin-top: 17px; }
.benchmark-block article > span { color: #8e9aa4; font-size: 9px; }
.benchmark-block article div { display: grid; grid-template-columns: 1fr 84px; align-items: center; gap: 7px; margin-top: 7px; }
.benchmark-block article i { display: block; width: var(--v); height: 6px; }
.benchmark-block .mvtec { background: #66727b; }
.benchmark-block .yj { background: var(--cyan); }
.benchmark-block b { color: #9aa7b0; font: 600 8px ui-monospace, monospace; }
.benchmark-block small { display: block; margin-top: 16px; color: #65737d; font-size: 7px; line-height: 1.5; }

.products-section { background: #fff; }
.product-rail { gap: 12px; margin: 28px -18px 0; padding: 0 18px 12px; }
.product-card { flex: 0 0 78%; max-width: 340px; scroll-snap-align: start; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; text-align: left; padding: 0; }
.product-image { height: 230px; display: grid; place-items: center; background: #f4f6f7; overflow: hidden; }
.product-image img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.product-card-copy { padding: 15px; }
.product-card-copy span { color: var(--blue); font: 800 8px ui-monospace, monospace; }
.product-card-copy h3 { margin-top: 8px; font-size: 16px; line-height: 1.35; }
.product-card-copy p { margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.product-card-copy b { display: flex; align-items: center; gap: 5px; margin-top: 13px; color: var(--blue); font-size: 10px; }
.product-card-copy b svg { width: 13px; }

.process-section { border-top: 1px solid var(--line); }
.process-section .section-intro { margin-top: 15px; }
.process-flow { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 30px; }
.process-flow::before { content: ""; position: absolute; left: 50%; top: 10px; bottom: 10px; width: 1px; background: #cad5db; }
.process-step { position: relative; min-height: 88px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 5px; }
.process-step:nth-child(4n+2), .process-step:nth-child(4n+3) { background: #edf6f7; }
.process-step span { color: #9aa6ae; font: 700 8px ui-monospace, monospace; }
.process-step strong { display: block; margin-top: 8px; font-size: 14px; }
.process-step em { display: block; margin-top: 5px; color: var(--blue); font-size: 8px; font-style: normal; }
.process-output { margin-top: 12px; padding: 16px; display: grid; grid-template-columns: 34px 1fr; gap: 12px; color: #fff; background: var(--ink); border-left: 3px solid var(--cyan); }
.process-output > svg { width: 24px; color: var(--cyan); }
.process-output span { color: var(--cyan); font: 700 8px ui-monospace, monospace; }
.process-output strong { display: block; margin-top: 7px; font-size: 11px; line-height: 1.65; }

.defects-section { background: #fff; border-top: 1px solid var(--line); }
.defect-tabs { gap: 8px; margin: 25px -18px 0; padding: 0 18px 9px; }
.defect-tab { flex: 0 0 auto; min-height: 38px; padding: 0 12px; border: 1px solid var(--line); background: #f4f6f7; border-radius: 4px; color: #5e6c76; font-size: 10px; }
.defect-tab.is-active { color: #fff; border-color: var(--blue); background: var(--blue); }
.defect-view { position: relative; width: 100%; margin-top: 8px; padding: 0; border: 1px solid var(--line); background: #fff; border-radius: 5px; overflow: hidden; }
.defect-view img { width: 100%; min-height: 260px; object-fit: contain; }
.defect-view > span { position: absolute; right: 8px; bottom: 8px; height: 34px; padding: 0 10px; display: flex; align-items: center; gap: 6px; background: rgba(13,22,29,.82); color: #fff; font-size: 9px; backdrop-filter: blur(5px); }
.defect-view svg { width: 13px; }

.customers-section { background: #101820; }
.video-stage { position: relative; aspect-ratio: 4 / 3; margin-top: 28px; overflow: hidden; border: 1px solid #394650; background: #0b1117; }
.video-stage video { width: 100%; height: 100%; object-fit: cover; }
.video-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 45%, rgba(5,10,14,.8)); }
.video-overlay { position: absolute; z-index: 2; left: 13px; right: 56px; bottom: 13px; }
.video-overlay span { color: var(--cyan); font: 700 7px ui-monospace, monospace; }
.video-overlay strong { display: block; margin-top: 5px; color: #fff; font-size: 14px; }
.video-play { position: absolute; z-index: 3; top: 50%; left: 50%; width: 50px; height: 50px; transform: translate(-50%,-50%); display: grid; place-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; background: rgba(10,17,23,.56); color: #fff; backdrop-filter: blur(8px); }
.video-play svg { width: 19px; fill: currentColor; }
.video-stage.is-playing .video-play { opacity: 0; pointer-events: none; }
.video-tabs { position: absolute; z-index: 3; right: 10px; bottom: 10px; display: flex; gap: 4px; }
.video-tabs button { width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.32); color: #fff; font-size: 8px; }
.video-tabs button.is-active { background: var(--cyan); color: #092029; border-color: var(--cyan); }
.deployment-rail { gap: 10px; margin: 16px -18px 0; padding: 0 18px 10px; }
.deployment-rail article { position: relative; flex: 0 0 70%; max-width: 290px; aspect-ratio: 4 / 3; overflow: hidden; scroll-snap-align: start; border: 1px solid #38454f; }
.deployment-rail article::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 44%, rgba(6,11,15,.87)); }
.deployment-rail img { width: 100%; height: 100%; object-fit: cover; }
.deployment-rail span, .deployment-rail strong { position: absolute; z-index: 2; left: 12px; color: #fff; }
.deployment-rail span { bottom: 34px; color: var(--cyan); font: 700 8px ui-monospace, monospace; }
.deployment-rail strong { bottom: 13px; font-size: 13px; }
.logo-wall-heading { margin-top: 30px; display: flex; justify-content: space-between; align-items: end; }
.logo-wall-heading h3 { font-size: 17px; }
.logo-wall-heading span { color: #73818b; font-size: 8px; }
.logo-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 13px; border-top: 1px solid #35414a; border-left: 1px solid #35414a; }
.logo-wall div { min-width: 0; min-height: 0; aspect-ratio: 1.18; display: grid; place-items: center; overflow: hidden; padding: 8px; background: #fff; border-right: 1px solid #dfe4e7; border-bottom: 1px solid #dfe4e7; }
.logo-wall img { width: 100%; height: 100%; object-fit: contain; }
.logo-wall img.portrait { transform: translateY(-15%); }
.logo-wall img.logo-xizhilang { width: 72%; height: 64%; transform: scale(.9); }
.logo-wall img.logo-beitel { width: 90%; height: 64%; transform: scale(1.12); }

.case-section { background: #18232c; border-top: 1px solid #34414b; }
.case-section .section-intro { margin-top: 15px; }
.case-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 28px; background: #3b4852; border: 1px solid #3b4852; }
.case-metrics article { min-height: 112px; padding: 16px; background: #121b23; }
.case-metrics strong { display: block; color: var(--cyan); font-size: 25px; }
.case-metrics span { display: block; margin-top: 9px; color: #8c9aa4; font-size: 10px; }

.about-section { background: #f1f4f5; }
.about-lead { margin-top: 15px; color: #4f5e68; font-size: 15px; line-height: 1.8; }
.about-machine { width: calc(100% + 36px); max-width: none; margin: 30px -18px 0; mix-blend-mode: multiply; }
.about-copy { display: grid; gap: 12px; margin-top: 24px; color: #56646e; font-size: 13px; line-height: 1.8; }
.history-line { position: relative; margin-top: 34px; padding-left: 34px; }
.history-line::before { content: ""; position: absolute; left: 10px; top: 8px; bottom: 8px; width: 1px; background: #c7d2d8; }
.history-line article { position: relative; padding: 0 0 28px; }
.history-line article:last-child { padding-bottom: 0; }
.history-line article::before { content: ""; position: absolute; left: -29px; top: 6px; width: 10px; height: 10px; border: 2px solid var(--blue); border-radius: 50%; background: var(--paper); }
.history-line span { color: var(--blue); font: 800 10px ui-monospace, monospace; }
.history-line strong { display: block; margin-top: 7px; font-size: 15px; }
.history-line p { margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.6; }

.contact-section { position: relative; overflow: hidden; background: #111820; color: #fff; }
.contact-bg { position: absolute; inset: 0; opacity: .22; background: url("../assets/equipment/363aea74d845aa89.jpg") center / cover; filter: grayscale(.6); }
.contact-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,24,32,.68), #111820 92%); }
.contact-shell { position: relative; z-index: 1; }
.contact-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 27px; }
.contact-list { margin-top: 28px; border-top: 1px solid #3a4650; }
.contact-list article { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 17px 0; border-bottom: 1px solid #3a4650; }
.contact-list svg { width: 18px; color: var(--cyan); }
.contact-list strong, .contact-list span { display: block; }
.contact-list strong { font-size: 12px; }
.contact-list span { margin-top: 6px; color: #91a0aa; font-size: 10px; line-height: 1.6; }
.pdf-link { min-height: 49px; margin-top: 18px; padding: 0 13px; display: grid; grid-template-columns: 20px 1fr 18px; align-items: center; gap: 9px; border: 1px solid #3a4650; color: #c6d0d6; font-size: 11px; }
.pdf-link svg { width: 16px; }
.pdf-link svg:first-child { color: var(--cyan); }
.site-footer { min-height: 220px; padding: 35px 20px calc(26px + var(--safe-bottom)); background: #0b1117; color: #6e7c86; }
.site-footer img { width: 128px; filter: brightness(0) invert(1); opacity: .92; }
.site-footer p { max-width: 270px; margin-top: 22px; color: #d8e0e4; font-size: 16px; line-height: 1.45; }
html[lang="zh-CN"] .site-footer p { max-width: none; white-space: nowrap; font-size: clamp(13px, 3.7vw, 16px); }
.site-footer span { display: block; margin-top: 13px; font-size: 8px; }
.site-footer .icp { display: block; margin-top: 13px; color: inherit; font-size: 8px; text-decoration: none; }

.bottom-nav {
  position: fixed;
  z-index: 90;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--nav-height) + var(--safe-bottom));
  padding: 6px 8px var(--safe-bottom);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(250,251,252,.96);
  border-top: 1px solid #d4dce1;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #687680; font-size: 8px; }
.bottom-nav svg { width: 18px; height: 18px; }
.bottom-nav a.is-active { color: var(--blue); }

dialog { margin: 0; max-width: none; max-height: none; border: 0; padding: 0; background: transparent; }
dialog::backdrop { background: rgba(4,8,12,.7); backdrop-filter: blur(5px); }
.detail-dialog { width: 100%; height: 100%; }
.dialog-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 92%; padding: 45px 18px calc(24px + var(--safe-bottom)); overflow-y: auto; background: #f5f7f8; border-radius: 8px 8px 0 0; animation: sheet-up .28s ease-out; }
@keyframes sheet-up { from { transform: translateY(40px); opacity: .6; } }
.dialog-close, .image-dialog-close { position: absolute; z-index: 3; top: 10px; right: 12px; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #d2dade; background: #fff; border-radius: 4px; }
.dialog-close svg, .image-dialog-close svg { width: 17px; }
.dialog-sheet > img { width: 100%; height: 250px; object-fit: contain; mix-blend-mode: multiply; }
.dialog-sheet > p:nth-of-type(1) { margin-top: 18px; color: var(--blue); font: 800 9px ui-monospace, monospace; }
.dialog-sheet h2 { margin-top: 8px; font-size: 25px; line-height: 1.25; }
.dialog-sheet > p:nth-of-type(2) { margin-top: 13px; color: var(--muted); font-size: 13px; line-height: 1.75; }
.dialog-sheet dl { display: grid; grid-template-columns: 1fr 1fr; margin-top: 20px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.dialog-sheet dl div { min-height: 70px; padding: 11px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dialog-sheet dt { color: #7a8892; font-size: 9px; }
.dialog-sheet dd { margin-top: 6px; font-size: 11px; line-height: 1.45; }
.dialog-sheet .button { width: 100%; margin-top: 18px; }
.image-dialog { width: 100%; height: 100%; background: #0c1319; }
.image-dialog-close { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); color: #fff; border-color: #4a565f; background: #18222b; }
.image-dialog img { width: 100%; height: 100%; padding: 60px 10px calc(20px + var(--safe-bottom)); object-fit: contain; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (min-width: 520px) {
  .hero-content { left: 30px; right: 30px; }
  .section-shell { padding-left: 28px; padding-right: 28px; }
  .tech-tabs, .product-rail, .defect-tabs, .deployment-rail { margin-left: -28px; margin-right: -28px; padding-left: 28px; padding-right: 28px; }
  .product-card { flex-basis: 62%; }
  .deployment-rail article { flex-basis: 58%; }
  .logo-wall { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .profile-live { min-height: 520px; }
  .live-visual-stage { min-height: 520px; }
  .pointcloud-live, .ai-live { min-height: 520px; }
  .ai-live > img { min-height: 520px; }
}

@media (max-width: 360px) {
  .hero h1 { font-size: 29px; }
  .section-heading h2, .value-section h2, .model-section h2, .process-section h2, .case-section h2, .about-section h2, .contact-section h2 { font-size: 26px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-system-line { gap: 5px; }
  .tech-metrics { grid-template-columns: 1fr 1fr; }
  .logo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact-actions { grid-template-columns: 1fr; }
}

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