/* Use installed fonts: third-party font CSS must not block first paint. */

:root {
  --blue: #001c83;
  --blue-dark: #001c83;
  --blue-deep: #001c83;
  --gold: #c8963e;
  --ink: #10131a;
  --steel: #5f6673;
  --line: #dfe3ea;
  --soft: #f4f6f9;
  --white: #fff;
  --max: 1280px;
  --pad: clamp(22px, 5vw, 72px);
  --font-sans: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;

  --text-2xs: 10px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 22px;
  --text-xl: 28px;
  --text-2xl: 36px;
  --text-3xl: 46px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  color: var(--ink);
  background: var(--white);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
img[src*="logo-"], .site-header a img, .footer-brand h2 { pointer-events: auto; -webkit-user-select: auto; user-select: auto; }
img[src*="projects/"]:not([src*="brand/"]), img[src*="case-"], img[src*="factory/"]:not([src*="brand/"]),
.system-image:not([src*="brand/"]), .story img, .equipment-card > img:not([src*="brand/"]),
.capability-media img:not([src*="brand/"]), .split-image:not([src*="brand/"]),
.project-feature img, .page-hero.dark img:not([src*="brand/"]), .hero-media:not([src*="brand/"]),
img[src*="puma-"]:not([src*="brand/"]) {
  filter: contrast(1.06) saturate(.82) brightness(.96);
}
.story img, .project-feature img { filter: contrast(1.04) saturate(.78) brightness(.97); }
.equipment-card > img:not([src*="brand/"]), .capability-media img:not([src*="brand/"]), img[src*="factory/"]:not([src*="brand/"]), img[src*="puma"]:not([src*="brand/"]) { filter: contrast(1.10) saturate(.75) brightness(.94); }
.project-logo-track img { filter: grayscale(1) contrast(.9); border-radius: 2px; }
.site-header .brand img, .hero-wordmark, img[src*="brand/"], img[src*="wordmark"], img[src*="logo-"] { filter: none; }
button, input, textarea, select { font: inherit; }
h1, h2, h3, h4, h5, h6,
.site-header, .eyebrow, .hero-kicker, .btn, .card-index,
.system-index, .system-en, .project-tag, .side-index,
.footer-col, .footer-bottom, small { font-family: var(--font-sans); }

.hero {
  min-height: 100svh;
  position: relative;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
  background: #07132c;
}
.hero-slides { position: absolute; inset: 0; }
.hero-slides .hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.hero-slides .hero-media.is-active { opacity: 1; }
.hero-slides .hero-hot-press { object-position:center center; }
.hero:has(.hero-hot-press.is-active)::before { content:""; position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(0,14,62,.78) 0%,rgba(0,19,72,.58) 28%,rgba(0,19,72,.18) 58%,rgba(0,19,72,0) 78%),linear-gradient(0deg,rgba(0,18,70,.42),rgba(0,18,70,0) 52%); }
.hero-wordmark { width: 100%; max-width: none; }
.hero::after { display:none; }
.hero-inner {
  position: relative;
  z-index: 2;
  width: min(900px, calc(100% - 150px));
  margin: 0;
  padding: 76px 0 0 clamp(32px, 6vw, 108px);
  text-shadow:none;
  animation:heroTextRise .9s cubic-bezier(.22,.65,.28,1) both;
}
@keyframes heroTextRise { from { opacity:0; transform:translateY(76px); } to { opacity:1; transform:translateY(0); } }
@keyframes heroTextLeave { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(42px); } }
.hero-inner.is-leaving { animation:heroTextLeave .38s ease-in both; }
.hero-inner.is-entering { animation:heroTextRise .72s cubic-bezier(.22,.65,.28,1) both; }
.hero.hero-dark-text .hero-inner { color:#082c74; }
.hero.hero-dark-text .hero-title-en { max-width:820px; color:rgba(8,44,116,.78); font-size:clamp(34px,4.1vw,58px); line-height:1.12; }
.hero.hero-dark-text .hero-trust > span { color:#082c74; border-color:rgba(8,44,116,.38); }
.hero.hero-dark-text .hero-dot { border-color:rgba(8,44,116,.5); }
.hero.hero-dark-text .hero-dot span { background:rgba(8,44,116,.45); }
.hero.hero-dark-text .hero-dot.is-active span { background:#082c74; }
.hero-kicker, .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.hero-kicker { color: rgba(255,255,255,.72); }
.hero-kicker::before, .eyebrow::before { display:none; }
.hero h1 {
  margin-top: 24px;
  font-size: clamp(60px, 10vw, 142px);
  line-height: .88;
  letter-spacing: -.055em;
  font-weight: 760;
}
.hero-wordmark {
  width: clamp(270px, 44vw, 650px);
  height: auto;
  margin-top: 28px;
  filter: brightness(0) invert(1);
}
.hero-title-zh {
  max-width: 780px;
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: .02em;
}
.hero-title-en { margin:0 0 22px; color:#fff; font-size:clamp(48px,6.6vw,92px); line-height:1.05; font-weight:300; letter-spacing:.01em; text-transform:uppercase; }
.hero-copy {
  max-width: 710px;
  margin-top: 28px;
  color: rgba(255,255,255,.78);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.8;
}
.hero-actions, .button-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.hero-trust { display:flex; align-items:center; flex-wrap:wrap; gap:12px; width:min(900px,100%); margin-top:34px; }
.hero-trust > span { padding:8px 16px; border:1px solid #fff; border-radius:999px; color:#fff; font-size:15px; font-weight:300; letter-spacing:.05em; }
.hero-dots { position:absolute; z-index:3; top:50%; right:clamp(18px,3.2vw,58px); display:flex; flex-direction:column; gap:16px; transform:translateY(-50%); }
.hero-dot { width:48px; height:48px; display:grid; place-items:center; padding:0; border:1px solid rgba(255,255,255,.62); border-radius:50%; background:transparent; cursor:pointer; transition:border-color .25s, transform .25s; }
.hero-dot span { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.55); transition:background .25s, transform .25s; }
.hero-dot:hover { border-color:#fff; transform:scale(1.06); }
.hero-dot.is-active span { background:#fff; transform:scale(1.15); }
.project-logo-strip { padding:18px 0 20px; overflow:hidden; border-bottom:1px solid var(--line); background:#fff; }
.project-logo-label { margin-bottom:11px; color:#a1a6af; font-size:var(--text-2xs); font-weight:700; letter-spacing:.2em; text-align:center; }
.project-logo-track-wrap { overflow:hidden; }
.project-logo-track { display:flex; width:max-content; animation:projectLogoScroll 150s linear infinite; }
.project-logo-track:hover { animation-play-state:paused; }
.project-logo-track a { display:flex; align-items:center; justify-content:center; width:250px; height:54px; padding:6px 32px; border-right:1px solid var(--line); opacity:.42; transition:opacity .2s; }
.project-logo-track a:hover { opacity:.82; }
.project-logo-track img { width:180px; max-width:180px; height:40px; object-fit:contain; filter:grayscale(1); }
@keyframes projectLogoScroll { to { transform:translateX(-50%); } }
.btn {
  min-height: 50px;
  padding: 0 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: .04em;
  transition: transform .2s, background .2s, color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-white { background: #fff; color: var(--blue); }
.btn-outline { border-color: rgba(255,255,255,.45); color: #fff; background: rgba(0,0,0,.08); }
.btn-blue { background: var(--blue); color: #fff; }
.btn-line { border-color: var(--line); background: #fff; color: var(--ink); }

.section { padding: clamp(82px, 10vw, 144px) var(--pad); }
.section-soft { background: var(--soft); }
.section-dark { background: var(--blue); color: #fff; }
.container { width: min(100%, var(--max)); margin: 0 auto; }
.eyebrow { color: var(--blue); }
.section-dark .eyebrow { color: #91a7ff; }
.display {
  max-width: 970px;
  margin-top: 26px;
  font-family: var(--font-sans);
  font-size: clamp(28px, 3.3vw, var(--text-2xl));
  line-height: 1.32;
  letter-spacing: .055em;
  font-weight: 600;
}
.section-lead {
  max-width: 760px;
  margin-top: 30px;
  color: var(--steel);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.85;
}
.section-dark .section-lead { color: rgba(255,255,255,.62); }
.statement-grid {
  margin-top: 72px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.statement-item { padding: 30px 28px 20px 0; border-right: 1px solid var(--line); }
.statement-item + .statement-item { padding-left: 28px; }
.statement-item:last-child { border-right: 0; }
.statement-num { color: var(--blue); font-size: var(--text-xs); font-weight: 800; letter-spacing: .12em; }
.statement-item h3 { margin-top: 18px; font-size: 20px; font-weight: 600; }
.statement-item p { margin-top: 10px; color: var(--steel); font-size: var(--text-sm); }

.system-journey { position:relative; height:360svh; background:#fff; }
.system-journey-sticky { position:sticky; top:0; height:100svh; min-height:680px; padding:clamp(108px,12vh,138px) var(--pad) clamp(54px,7vh,82px); display:flex; align-items:center; overflow:hidden; background:#fff; }
.system-journey-inner { width:min(100%, var(--max)); margin-inline:auto; }
.journey-intro { padding-inline:0; }
.journey-intro .display { margin-top:18px; }
.journey-intro .section-lead { max-width:850px; margin-top:18px; }
.journey-axis { position:relative; width:min(100%,1120px); margin:clamp(44px,6vh,68px) auto 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.journey-axis-track { position:absolute; z-index:0; top:39px; left:12.5%; right:12.5%; height:2px; overflow:hidden; background:#e4eaf3; }
.journey-axis-progress { display:block; width:100%; height:100%; background:var(--blue); transform:scaleX(var(--journey-progress,0)); transform-origin:left center; will-change:transform; }
.journey-node { position:relative; z-index:1; min-width:0; padding:0 10px; display:grid; justify-items:center; border:0; background:transparent; color:#343b48; text-align:center; cursor:pointer; }
.journey-number { height:28px; color:#4c5563; font-size:14px; font-weight:650; letter-spacing:.14em; transition:color .42s cubic-bezier(.22,1,.36,1); }
.journey-dot { width:15px; height:15px; margin:4px 0 16px; border:3px solid #fff; border-radius:50%; background:#c9d3e2; box-shadow:0 0 0 1px #c9d3e2; transition:background .42s cubic-bezier(.22,1,.36,1), box-shadow .42s cubic-bezier(.22,1,.36,1), transform .42s cubic-bezier(.22,1,.36,1); }
.journey-label-zh { color:#343b48; font-size:18px; font-weight:560; letter-spacing:.05em; transition:color .42s cubic-bezier(.22,1,.36,1); }
.journey-label-en { margin-top:7px; color:#929ba8; font-size:10px; font-weight:650; letter-spacing:.12em; text-transform:uppercase; transition:color .42s cubic-bezier(.22,1,.36,1); }
.journey-node:hover .journey-label-zh { color:#111722; }
.journey-node:hover .journey-dot { background:#8ba5dc; box-shadow:0 0 0 1px #8ba5dc; }
.journey-node.is-active .journey-number,
.journey-node.is-active .journey-label-zh,
.journey-node.is-active .journey-label-en { color:var(--blue); }
.journey-node.is-active .journey-dot { background:var(--blue); box-shadow:0 0 0 1px var(--blue),0 0 0 8px rgba(0,46,157,.08); transform:scale(1.06); }
.journey-detail { width:min(760px,92%); min-height:172px; margin:clamp(46px,6vh,70px) auto 0; display:flex; justify-content:center; text-align:center; }
.journey-detail-content { transition:opacity .4s cubic-bezier(.22,1,.36,1),transform .4s cubic-bezier(.22,1,.36,1); }
.journey-detail-content.is-leaving { opacity:0; transform:translateY(-12px); }
.journey-detail-content.is-entering { opacity:0; transform:translateY(12px); }
.journey-detail-number { color:var(--blue); font-size:11px; font-weight:700; letter-spacing:.16em; }
.journey-detail h3 { margin-top:10px; color:var(--blue); font-size:clamp(24px,2.5vw,34px); font-weight:560; }
.journey-detail-en { display:block; margin-top:6px; color:var(--blue); font-size:11px; font-weight:650; letter-spacing:.14em; text-transform:uppercase; }
.journey-detail p { margin-top:20px; color:var(--steel); font-size:clamp(15px,1.2vw,18px); line-height:1.8; }

@media (max-height:760px) and (min-width:861px) {
  .system-journey-sticky { padding-top:96px; padding-bottom:34px; align-items:flex-start; }
  .journey-intro .display { font-size:34px; line-height:1.22; }
  .journey-intro .section-lead { margin-top:10px; font-size:14px; line-height:1.65; }
  .journey-axis { margin-top:28px; }
  .journey-detail { min-height:130px; margin-top:30px; }
  .journey-detail p { margin-top:12px; }
}

@media (max-width:860px) {
  .system-journey { height:320svh; }
  .system-journey-sticky { min-height:620px; padding:94px 18px 42px; align-items:flex-start; }
  .journey-intro .display { margin-top:14px; font-size:clamp(28px,9vw,42px); }
  .journey-intro { padding-inline:0; }
  .journey-intro .section-lead { margin-top:14px; font-size:14px; line-height:1.65; }
  .journey-axis { width:100%; margin-top:38px; }
  .journey-axis-track { top:35px; }
  .journey-node { padding:0 3px; }
  .journey-number { height:25px; font-size:12px; }
  .journey-dot { width:13px; height:13px; margin:4px 0 12px; }
  .journey-label-zh { font-size:13px; letter-spacing:.02em; }
  .journey-label-en { margin-top:5px; font-size:8px; line-height:1.35; letter-spacing:.06em; }
  .journey-detail { width:96%; min-height:158px; margin-top:42px; }
  .journey-detail h3 { font-size:24px; }
  .journey-detail p { margin-top:15px; font-size:14px; line-height:1.7; }
}

.system-stack { margin-top: 66px; display: grid; gap: 26px; }
.system-card {
  height: clamp(560px, 48vw, 650px);
  min-height: 0;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  border: 1px solid rgba(12, 34, 88, .10);
  border-radius: 24px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 22px 58px rgba(17, 34, 70, .09);
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s cubic-bezier(.22,1,.36,1);
}
.system-card:hover { transform: translateY(-4px); box-shadow: 0 28px 70px rgba(17, 34, 70, .12); }
.system-card:nth-child(even) .system-image { order: 2; }
.system-image { min-height: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.system-copy { padding: clamp(38px, 5.6vw, 84px); display: flex; flex-direction: column; justify-content: space-between; }
.system-index { color: var(--blue); font-size: var(--text-xs); font-weight: 800; letter-spacing: .16em; }
.system-copy h3 { margin-top: 22px; font-size: clamp(26px, 2.5vw, 36px); line-height: 1.14; letter-spacing: -.02em; }
.system-en { margin-top: 14px; color: var(--steel); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .1em; }
.system-copy > div > p { max-width: 510px; margin-top: 26px; color: var(--steel); font-size: var(--text-base); }
.link-arrow { display: inline-flex; width:max-content; align-items: center; gap: 10px; margin-top: 36px; padding:5px 14px; border:1px solid currentColor; border-radius:999px; font-size: var(--text-sm); font-weight: 500; line-height:1.2; }
.link-arrow::after { content: "\2192"; font-size: 17px; line-height:1; transition: transform .2s; }
.link-arrow:hover::after { transform: translateX(5px); }

.capability-stage { margin-top: 58px; min-height: 650px; display: grid; grid-template-columns: 1.18fr .82fr; background: var(--blue-deep); color: #fff; }
.capability-media { min-width: 0; display: grid; grid-template-rows: 1fr 1fr; }
.capability-media figure { min-height: 0; position: relative; overflow: hidden; }
.capability-media figure + figure { border-top: 1px solid rgba(255,255,255,.18); }
.capability-media img { width: 100%; height: 100%; object-fit: cover; }
.capability-media figcaption { position: absolute; left: 22px; bottom: 18px; padding: 8px 11px; background: rgba(0,28,131,.94); color: #fff; font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.capability-copy { padding: clamp(38px, 5vw, 70px); display: flex; flex-direction: column; justify-content: space-between; }
.capability-copy h3 { margin-top: 22px; font-size: clamp(26px, 2.5vw, 36px); line-height: 1.16; letter-spacing: -.02em; }
.capability-copy > div > p { margin-top: 22px; color: rgba(255,255,255,.66); font-size: var(--text-sm); }
.capability-list { margin-top: 38px; border-top: 1px solid rgba(255,255,255,.18); }
.capability-list li { list-style: none; padding: 15px 0; display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid rgba(255,255,255,.18); }
.capability-list small { color: rgba(255,255,255,.4); font-family: var(--font-sans); font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.capability-copy .link-arrow { color: #fff; }
.capability-copy .system-index { color:#fff; }

.network-strip { margin-top: 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; padding: 1px; background: var(--line); }
.network-node { min-height: 172px; padding: 26px; background: #fff; }
.network-node small { color: var(--blue); font-family: var(--font-sans); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.network-node h3 { margin-top: 24px; font-size: 20px; line-height: 1.3; }
.network-node p { margin-top: 12px; color: var(--steel); font-size: var(--text-sm); line-height: 1.65; }
.section-dark .network-strip { background: rgba(255,255,255,.16); }
.section-dark .network-node { background: var(--blue-deep); }
.section-dark .network-node small { color: #91a7ff; }
.section-dark .network-node p { color: rgba(255,255,255,.52); }

.product-map { margin-top: 54px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.product-family { padding: 34px; border: 1px solid rgba(255,255,255,.16); }
.product-family > small { color: #91a7ff; font-family: var(--font-sans); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.product-family h3 { margin-top: 18px; font-size: 22px; }
.product-family > p { margin-top: 12px; color: rgba(255,255,255,.56); font-size: var(--text-sm); }
.product-links { margin-top: 26px; border-top: 1px solid rgba(255,255,255,.16); }
.product-links a { padding: 13px 0; display: flex; justify-content: space-between; gap: 18px; border-bottom: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.78); font-size: var(--text-sm); }
.product-links a::after { content: "\2192"; color: #91a7ff; }

.equipment-grid { margin-top: 54px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.equipment-card { border: 1px solid var(--line); background: #fff; overflow: hidden; }
.equipment-card > img, .asset-placeholder { width: 100%; aspect-ratio: 4/3; height: auto; }
.equipment-card > img { object-fit: cover; }
.equipment-card > img[src*="cert-"], .equipment-card > img[src*="product"] { object-fit: contain; padding: 20px; background: #fff; }
.equipment-card-body { padding: 30px; }
.equipment-card-body small { color: var(--blue); font-family: var(--font-sans); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.equipment-card-body h3 { margin-top: 16px; font-size: 22px; line-height: 1.3; }
.equipment-card-body p { margin-top: 13px; color: var(--steel); font-size: var(--text-sm); }
.asset-placeholder { padding: 26px; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(135deg, #eef1f7, #dfe5ef); color: #687286; }
.asset-placeholder span { font-family: var(--font-sans); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.asset-placeholder strong { margin-top: 9px; color: #3f4859; font-size: var(--text-md); font-weight: 600; }

.process-flow { margin-top: 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; padding: 1px; background: var(--line); }
.process-step { min-height: 154px; padding: 22px; background: #fff; }
.process-step small { color: var(--blue); font-family: var(--font-sans); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.process-step h3 { margin-top: 16px; font-size: var(--text-md); line-height: 1.25; }
.process-step p { margin-top: 9px; color: var(--steel); font-size: var(--text-xs); line-height: 1.65; }
.process-step.is-core { background: var(--blue); color: #fff; }
.process-step.is-core small, .process-step.is-core p { color: rgba(255,255,255,.7); }
.data-note { margin-top: 18px; padding-left: 14px; border-left: 2px solid var(--gold); color: var(--steel); font-size: var(--text-xs); }

.product-hero-grid { width: min(100%, var(--max)); margin: 0 auto; display: grid; grid-template-columns: 1fr .82fr; gap: clamp(42px, 7vw, 100px); align-items: end; }
.product-hero-grid .page-hero-inner { width: auto; margin: 0; }
.hero-asset-placeholder { min-height: 330px; }

.split { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: clamp(46px, 8vw, 120px); align-items: center; }
.split-image { width:100%; height:auto; aspect-ratio: 4/3; object-fit: cover; }
.bullet-list { margin-top: 32px; border-top: 1px solid var(--line); }
.bullet-list li { list-style: none; padding: 19px 0; display: flex; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); font-weight: 600; }
.bullet-list small { color: var(--steel); font-size: var(--text-xs); font-weight: 500; letter-spacing: .05em; }

.card-grid { margin-top: 58px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { min-height: 330px; padding: 34px; border: 1px solid var(--line); background: #fff; display: flex; flex-direction: column; }
.card-dark { color: #fff; background: var(--blue-deep); border-color: var(--blue-deep); }
.card-index { color: var(--blue); font-size: var(--text-xs); font-weight: 800; letter-spacing: .14em; }
.card-dark .card-index { color: #91a7ff; }
.card h3 { margin-top: 34px; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.3; letter-spacing: -.01em; }
.card p { margin-top: 17px; color: var(--steel); font-size: var(--text-sm); }
.card-dark p { color: rgba(255,255,255,.62); }
.card .link-arrow { margin-top: auto; color: var(--blue); }
.card-dark .link-arrow { color: #fff; }

.technology-cards { gap:24px; }
.technology-cards .card {
  border:0;
  border-radius:20px;
  background:#fff;
  color:var(--ink);
  box-shadow:0 18px 48px rgba(16,19,26,.07);
}
.technology-cards .card-index,
.technology-cards .card .link-arrow { color:var(--steel); }
.technology-cards .card .link-arrow { border-color:rgba(95,102,115,.5); }

.industry-grid { margin-top: 54px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid rgba(255,255,255,.15); }
.industry-item { min-height: 230px; padding: 28px; border-right: 1px solid rgba(255,255,255,.15); display: flex; flex-direction: column; justify-content: space-between; }
.industry-item:last-child { border-right: 0; }
.industry-item span { color: #91a7ff; font-size: var(--text-xs); font-weight: 800; letter-spacing: .14em; }
.industry-item h3 { font-size: 20px; line-height: 1.3; }
.industry-item p { color: rgba(255,255,255,.52); font-size: var(--text-sm); }

.project-feature { margin-top: 58px; display: grid; grid-template-columns: 1.35fr .65fr; min-height: 580px; background: var(--blue-deep); color: #fff; }
.project-feature img { width: 100%; height: 100%; object-fit: cover; }
.project-copy { padding: clamp(36px, 5vw, 70px); display: flex; flex-direction: column; justify-content: flex-end; }
.project-tag { color: #91a7ff; font-size: var(--text-xs); font-weight: 800; letter-spacing: .14em; }
.project-copy h3 { margin-top: 22px; font-size: clamp(25px, 2.4vw, 34px); line-height: 1.18; }
.project-copy p { margin-top: 20px; color: rgba(255,255,255,.62); }

.cta-band { padding: clamp(28px, 3.5vw, 40px) var(--pad); border-top: 1px solid var(--line); background: var(--soft); color: var(--ink); }
.cta-inner { width: min(100%, var(--max)); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 28px; }
.cta-band h2 { max-width: 760px; font-size: clamp(22px, 2.1vw, 28px); line-height: 1.2; letter-spacing: -.015em; }
.cta-band p { margin-top: 10px; color: var(--steel); }

.page-hero { min-height: 68svh; padding: 190px var(--pad) 92px; display: flex; align-items: flex-end; background: var(--soft); }
.page-hero.dark { position: relative; color: #fff; background: var(--blue-deep); overflow: hidden; }
.page-hero.dark img { position: absolute; inset: 0; height: 100%; object-fit: cover; opacity: .48; }
/* The three system entry heroes fill the viewport without a tinted backdrop. */
.page-hero.dark:has(> img[src*="system-map-"]) { min-height:100svh; }
.page-hero.dark > img[src*="system-map-"] { width:100%; max-width:none; height:100%; object-fit:cover; opacity:1; filter:none; }
.page-hero.dark::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,12,62,.92), rgba(0,28,131,.26)); }
.page-hero-inner { position: relative; z-index: 2; width: min(100%, var(--max)); margin: 0 auto; }
.page-hero h1 { max-width: 980px; margin-top: 24px; font-size: clamp(34px, 4vw, 50px); line-height: 1.3; letter-spacing: .055em; }
.page-hero p { max-width: 760px; margin-top: 26px; color: var(--steel); font-size: clamp(15px, 1.25vw, 18px); }
.page-hero.dark p { color: rgba(255,255,255,.72); }

/* About page full-screen image hero */
.about-full-hero {
  position:relative;
  min-height:100svh;
  overflow:hidden;
  background:#001c83;
}
.about-full-hero > img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center center;
}
.about-wide-page .about-full-hero::after { content:""; position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(0,28,131,.72) 0%,rgba(0,28,131,.46) 28%,rgba(0,28,131,.12) 54%,rgba(0,28,131,0) 72%); }
.about-hero-copy {
  position:absolute;
  z-index:2;
  left:clamp(96px,9vw,150px);
  top:50%;
  max-width:300px;
  color:#fff;
  transform:translateY(-50%);
}
.about-hero-en {
  color:#fff;
  font-family:var(--font-sans);
  font-size:clamp(44px,4.35vw,60px);
  font-weight:500;
  line-height:1.12;
  letter-spacing:.05em;
  animation:aboutHeroFromLeft .9s cubic-bezier(.22,1,.36,1) both;
}
.about-hero-copy h1 {
  margin-top:24px;
  color:#fff;
  font-size:clamp(36px,3.5vw,48px);
  font-weight:500;
  line-height:1.28;
  letter-spacing:.12em;
  animation:aboutHeroFromRight .9s .12s cubic-bezier(.22,1,.36,1) both;
}
.about-hero-copy p {
  margin-top:34px;
  color:#fff;
  font-size:clamp(16px,1.35vw,20px);
  font-weight:400;
  letter-spacing:.08em;
  animation:heroTextRise .8s .26s cubic-bezier(.22,1,.36,1) both;
}
.system-full-hero .about-hero-copy {
  width:min(860px,calc(100% - clamp(96px,9vw,150px) - 48px));
  max-width:none;
  text-align:left;
}
.system-full-hero .about-hero-copy p { color:#fff; }
@media (max-width:760px) {
  .system-full-hero .about-hero-copy { width:calc(100% - 44px); max-width:none; }
  .system-full-hero .about-hero-copy p { font-size:16px; line-height:1.8; }
}

/* Homepage industry solutions — light, photographic, data-driven showcase */
.industry-showcase {
  --industry-accent:var(--blue);
  --industry-brand:var(--blue-deep);
  --industry-muted:var(--steel);
  --industry-line:#dfe6ed;
  position:relative;
  overflow:hidden;
  padding:110px 0;
  background:#f6f8fb;
}
.industry-showcase .section-bg { position:absolute; top:-8%; left:0; z-index:0; width:100%; height:116%; background:url('images/web-display/e0a7cfb3c50b67288edf.webp') center/cover no-repeat; will-change:transform; }
.industry-showcase .section-veil { position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(ellipse at 20% 0%,rgba(0,28,131,.06),transparent 45%),linear-gradient(to bottom,rgba(246,248,251,.90) 0%,rgba(248,250,253,.94) 45%,rgba(246,248,251,.90) 100%); }
.industry-showcase > .container { position:relative; z-index:1; width:80%; max-width:none; margin:0 auto; padding:0; }
.industry-heading { max-width:760px; margin:0 auto; text-align:center; }
.industry-heading > span { color:var(--industry-accent); font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; }
.industry-heading h2 { margin-top:14px; color:var(--industry-brand); font-size:clamp(30px,4vw,46px); font-weight:800; line-height:1.2; }
.industry-heading p { max-width:660px; margin:18px auto 0; color:var(--industry-muted); font-size:16px; line-height:1.85; }
.industry-card-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; margin-top:50px; }
.industry-card { overflow:hidden; border:1px solid var(--industry-line); border-radius:20px; background:rgba(255,255,255,.88); box-shadow:0 12px 34px rgba(2,22,48,.04); opacity:0; transform:translateY(22px); cursor:pointer; backdrop-filter:blur(14px) saturate(120%); transition:opacity .55s ease var(--reveal-delay),transform .55s ease var(--reveal-delay),border-color .3s ease,box-shadow .3s ease; }
.cards-visible .industry-card { opacity:1; transform:translateY(0); }
.cards-visible .industry-card:hover,.cards-visible .industry-card.active { transform:translateY(-6px); border-color:rgba(0,28,131,.28); box-shadow:0 22px 50px rgba(2,22,48,.10); }
.industry-card:focus-visible { outline:3px solid rgba(0,28,131,.22); outline-offset:3px; }
.industry-card .card-media { position:relative; height:190px; overflow:hidden; }
.industry-card .card-media::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(2,22,48,.42),transparent 58%); pointer-events:none; }
.industry-card .card-media img { width:100%; height:100%; object-fit:cover; filter:saturate(.92); transition:transform .65s ease,filter .65s ease; }
.industry-card:hover .card-media img,.industry-card.active .card-media img { transform:scale(1.07); filter:saturate(1.05); }
.industry-card .card-media span { position:absolute; top:14px; left:14px; z-index:1; padding:7px 11px 6px; border:1px solid rgba(255,255,255,.62); border-radius:999px; background:rgba(255,255,255,.76); color:var(--industry-brand); font-size:11px; font-weight:800; letter-spacing:1.5px; backdrop-filter:blur(10px); }
.industry-card .card-body { padding:24px; }
.industry-card .card-body h3 { color:var(--industry-brand); font-size:19px; font-weight:800; line-height:1.45; }
.industry-card .card-body small { display:block; margin-top:7px; color:#7b8796; font-size:11px; letter-spacing:.04em; }
.industry-card .card-body p { overflow:hidden; max-height:0; margin-top:0; color:var(--industry-muted); font-size:13.5px; line-height:1.75; opacity:0; transition:max-height .45s ease,opacity .35s ease,margin .35s ease; }
.industry-card:hover .card-body p,.industry-card.active .card-body p { max-height:140px; margin-top:15px; opacity:1; }
.industry-card .card-body button { display:flex; align-items:center; gap:8px; margin-top:19px; padding:0; border:0; background:transparent; color:var(--industry-accent); font-family:var(--font-sans); font-size:13px; font-weight:700; cursor:pointer; }
.industry-card .card-body button i { font-style:normal; transition:transform .25s ease; }
.industry-card:hover .card-body button i { transform:translateX(5px); }
.industry-card.active .card-body button i { transform:rotate(-90deg); }
.industry-detail { position:relative; overflow:hidden; max-height:0; margin-top:22px; border:1px solid transparent; border-radius:20px; background:rgba(255,255,255,.94); box-shadow:0 20px 55px rgba(2,22,48,.08); opacity:0; transform:translateY(18px); backdrop-filter:blur(16px) saturate(120%); transition:max-height .72s cubic-bezier(.2,.75,.25,1),opacity .35s ease,transform .45s ease,border-color .3s ease; }
.industry-detail.open { max-height:800px; border-color:var(--industry-line); opacity:1; transform:translateY(0); }
.industry-detail .detail-inner { display:grid; grid-template-columns:1.05fr 1fr; }
.industry-detail .detail-media { position:relative; min-height:420px; overflow:hidden; background:#e9edf2; }
.industry-detail .detail-media::after { content:""; position:absolute; inset:0; background:linear-gradient(to right,transparent 55%,rgba(255,255,255,.35)); pointer-events:none; }
.industry-detail .detail-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.04); transition:opacity .42s ease,transform .7s ease; }
.industry-detail .detail-media img.show { opacity:1; transform:scale(1); }
.industry-detail .detail-body { padding:44px; }
.industry-detail .detail-body > small { color:var(--industry-accent); font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; }
.industry-detail .detail-body h3 { margin-top:12px; color:var(--industry-brand); font-size:28px; font-weight:800; }
.industry-detail .detail-description { margin-top:16px; color:var(--industry-muted); font-size:15px; line-height:1.85; }
.industry-detail .detail-body h4 { margin-top:27px; color:var(--industry-brand); font-size:15px; font-weight:800; }
.industry-detail .detail-body ul { display:grid; gap:11px; margin-top:15px; }
.industry-detail .detail-body li { display:flex; align-items:center; gap:10px; color:#475668; font-size:14px; opacity:0; transform:translateX(14px); }
.industry-detail.open .detail-body li { animation:industryPointIn .45s ease forwards; animation-delay:calc(.18s + var(--point-delay)); }
.industry-detail .detail-body li span { display:grid; width:20px; height:20px; flex:0 0 auto; place-items:center; border-radius:50%; background:rgba(0,28,131,.08); color:var(--industry-accent); font-size:12px; font-weight:800; }
.industry-detail .detail-cta { position:relative; display:inline-flex; align-items:center; gap:18px; overflow:hidden; margin-top:28px; padding:7px 7px 7px 22px; border:1px solid rgba(0,28,131,.18); border-radius:999px; background:linear-gradient(135deg,#001c83 0%,#052e9e 100%); box-shadow:0 10px 24px rgba(0,28,131,.16); color:#fff; font-size:13px; font-weight:700; letter-spacing:.04em; transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease; }
.industry-detail .detail-cta::before { content:""; position:absolute; top:-70%; left:-25%; width:55%; height:240%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent); transform:rotate(18deg) translateX(-150%); transition:transform .65s ease; }
.industry-detail .detail-cta:hover { border-color:rgba(0,28,131,.32); background:linear-gradient(135deg,#001c83 0%,#0637b8 100%); box-shadow:0 15px 32px rgba(0,28,131,.23); transform:translateY(-3px); }
.industry-detail .detail-cta:hover::before { transform:rotate(18deg) translateX(330%); }
.industry-detail .detail-cta span { position:relative; z-index:1; display:grid; width:34px; height:34px; place-items:center; border-radius:50%; background:rgba(255,255,255,.16); font-size:16px; transition:transform .28s ease,background .28s ease; }
.industry-detail .detail-cta:hover span { background:rgba(255,255,255,.24); transform:translateX(2px); }
.industry-detail-close { position:absolute; top:18px; right:18px; z-index:4; display:grid; width:40px; height:40px; place-items:center; border:1px solid rgba(255,255,255,.7); border-radius:50%; background:rgba(255,255,255,.8); color:#697484; font-size:20px; cursor:pointer; backdrop-filter:blur(10px); transition:transform .3s ease,background .3s ease,color .3s ease; }
.industry-detail-close:hover { background:var(--industry-accent); color:#fff; transform:rotate(90deg); }
@keyframes industryPointIn { to { opacity:1; transform:translateX(0); } }
@media (max-width:960px) {
  .industry-showcase > .container { width:88%; }
  .industry-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .industry-detail.open { max-height:1200px; }
  .industry-detail .detail-inner { grid-template-columns:1fr; }
  .industry-detail .detail-media { min-height:340px; }
  .industry-detail .detail-media::after { background:linear-gradient(to bottom,transparent 65%,rgba(255,255,255,.25)); }
}
@media (max-width:600px) {
  .industry-showcase { padding:78px 0; }
  .industry-showcase > .container { width:auto; margin:0 18px; padding:0; }
  .industry-card-grid { grid-template-columns:1fr; gap:16px; margin-top:36px; }
  .industry-card .card-media { height:210px; }
  .industry-card .card-body p { max-height:140px; margin-top:15px; opacity:1; }
  .industry-detail.open { max-height:1400px; }
  .industry-detail .detail-media { min-height:260px; }
  .industry-detail .detail-body { padding:34px 24px 30px; }
  .industry-detail .detail-body h3 { font-size:24px; }
}

/* Homepage manufacturing proof wall */
.manufacturing-proof{margin-top:58px;padding:clamp(18px,2.2vw,30px);border:1px solid #e3e9ef;border-radius:28px;background:#f5f7f9;box-shadow:0 24px 60px rgba(31,55,76,.08)}
.production-lines{display:grid;grid-template-columns:1.12fr .88fr;gap:18px}.production-line-card{position:relative;min-width:0;overflow:hidden;border-radius:20px;background:#fff;box-shadow:0 12px 32px rgba(25,47,67,.08)}.production-line-card figure{height:clamp(300px,34vw,510px);margin:0;overflow:hidden}.production-line-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)}.production-line-card:hover img{transform:scale(1.025)}.production-line-copy{padding:25px 26px 28px}.production-line-copy small{color:var(--blue);font-family:var(--font-sans);font-size:9px;font-weight:800;letter-spacing:.11em}.production-line-copy h3{margin-top:11px;color:var(--ink);font-size:clamp(21px,2vw,30px)}.production-line-copy p{margin-top:12px;color:var(--steel);font-size:var(--text-sm);line-height:1.75}.manufacturing-pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:18px;overflow:hidden;border:1px solid #e3e9ef;border-radius:17px;background:#e3e9ef}.manufacturing-pillars article{min-height:112px;padding:23px;background:#fff}.manufacturing-pillars small{display:block;color:#7c8a98;font-family:var(--font-sans);font-size:9px;font-weight:800;letter-spacing:.12em}.manufacturing-pillars strong{display:block;margin-top:20px;color:#172433;font-size:14px;line-height:1.5}.proof-action{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:24px 5px 2px}.proof-action p{color:var(--steel);font-size:var(--text-sm)}.home-network{grid-template-columns:repeat(5,1fr);overflow:hidden;border-radius:20px;box-shadow:0 15px 42px rgba(31,55,76,.06)}.home-network .network-node{min-height:158px;transition:transform .3s ease,background .3s ease}.home-network .network-node:hover{z-index:1;transform:translateY(-3px);background:#f7f9fb}.home-network .network-node h3{font-size:17px}.home-network .network-node p{font-size:11px}
@media(max-width:1000px){.home-network{grid-template-columns:repeat(3,1fr)}.manufacturing-pillars{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.production-lines{grid-template-columns:1fr}.production-line-card figure{height:300px}.manufacturing-pillars{grid-template-columns:1fr}.proof-action{align-items:flex-start;flex-direction:column}.home-network{grid-template-columns:1fr}.manufacturing-proof{border-radius:20px}.production-line-card{border-radius:15px}}
@media (prefers-reduced-motion:reduce) {
  .system-full-hero .about-hero-copy > * { animation:none; }
}

.contact-full-hero .about-hero-copy,
.projects-full-hero .about-hero-copy,
.products-full-hero .about-hero-copy { max-width:700px; }
@keyframes aboutHeroFromLeft {
  from { opacity:0; transform:translateX(-108px); }
  to { opacity:1; transform:translateX(0); }
}
@keyframes aboutHeroFromRight {
  from { opacity:0; transform:translateX(108px); }
  to { opacity:1; transform:translateX(0); }
}

@media (max-width:760px) {
  .about-full-hero { min-height:100svh; }
  .about-full-hero > img { object-position:55% center; }
  .about-hero-copy { left:22px; right:auto; top:50%; max-width:190px; }
  .about-hero-en { font-size:clamp(27px,8vw,38px); }
  .about-hero-copy h1 { margin-top:14px; font-size:clamp(23px,6.8vw,32px); }
}

/* Fixed backgrounds clipped by scrolling sections; text scrolls normally. */
.technology-full-hero,
.projects-full-hero,
.contact-full-hero {
  clip-path: inset(0);
  isolation: isolate;
}
.technology-full-hero > img,
.projects-full-hero > img,
.contact-full-hero > img {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100lvh !important;
  object-fit: cover;
  transform: none !important;
}

/* Technology page: full-screen image with a local text-only gradient panel. */
.technology-full-hero {
  position:relative;
  min-height:100svh;
  overflow:hidden;
  background:#001c83;
}
.technology-full-hero > img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center center;
}
.technology-hero-copy {
  position:absolute;
  z-index:2;
  left:0;
  top:50%;
  width:min(1240px,92vw);
  padding:46px 52px 48px clamp(96px,9vw,150px);
  color:#fff;
  transform:translateY(-50%);
  isolation:isolate;
}
.technology-hero-copy::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(90deg,rgba(0,28,131,.94) 0%,rgba(0,28,131,.78) 56%,rgba(0,28,131,.32) 82%,rgba(0,28,131,0) 100%);
}
.technology-hero-en {
  color:#fff;
  font-size:clamp(27px,2.65vw,40px);
  font-weight:500;
  line-height:1.12;
  letter-spacing:.05em;
  white-space:nowrap;
  animation:aboutHeroFromLeft .9s cubic-bezier(.22,1,.36,1) both;
}
.technology-hero-copy h1 {
  margin-top:24px;
  color:#fff;
  font-size:clamp(36px,3.5vw,48px);
  font-weight:500;
  line-height:1.28;
  letter-spacing:.12em;
  white-space:nowrap;
  animation:aboutHeroFromRight .9s .12s cubic-bezier(.22,1,.36,1) both;
}
.technology-hero-copy p {
  max-width:none;
  margin-top:34px;
  color:#fff;
  font-size:clamp(16px,1.35vw,20px);
  line-height:1.8;
  white-space:nowrap;
  animation:heroTextRise .8s .26s cubic-bezier(.22,1,.36,1) both;
}
@media (max-width:760px) {
  .technology-full-hero > img { object-position:55% center; }
  .technology-hero-copy { left:22px; right:22px; width:auto; padding:30px 26px 32px; }
  .technology-hero-en { font-size:clamp(14px,4.2vw,18px); }
  .technology-hero-copy h1 { margin-top:18px; font-size:clamp(23px,6.8vw,32px); }
  .technology-hero-copy p { margin-top:24px; font-size:14px; white-space:normal; }
  .contact-full-hero .about-hero-copy,
  .projects-full-hero .about-hero-copy,
  .products-full-hero .about-hero-copy { max-width:calc(100vw - 44px); }
}

.detail-layout { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 70px; align-items: start; }
.side-index { position: sticky; top: 110px; border-top: 1px solid var(--line); }
.side-index a { display: block; padding: 15px 0; border-bottom: 1px solid var(--line); color: var(--steel); font-size: var(--text-sm); }
.side-index a:hover { color: var(--blue); }
.content-block + .content-block { margin-top: 84px; }
.content-block h2 { font-size: clamp(26px, 2.5vw, 36px); line-height: 1.32; letter-spacing: .055em; }
.content-block > p { max-width: 800px; margin-top: 22px; color: var(--steel); font-size: var(--text-base); }
.spec-grid { margin-top: 34px; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); }
.spec { padding: 24px 28px 24px 0; border-bottom: 1px solid var(--line); }
.spec:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--line); }
.spec small { color: var(--blue); font-weight: 800; letter-spacing: .1em; }
.spec h3 { margin-top: 12px; font-size: 21px; }
.spec p { margin-top: 8px; color: var(--steel); font-size: var(--text-sm); }

.story-grid { margin-top: 54px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.story { border: 1px solid var(--line); background: #fff; overflow: hidden; }
.story img { aspect-ratio: 16/10; height:auto; object-fit: cover; }
.story-body { padding: 30px; }
.story-body small { color: var(--blue); font-weight: 800; letter-spacing: .12em; }
.story-body h3 { margin-top: 14px; font-size: 23px; line-height: 1.25; }
.story-body p { margin-top: 14px; color: var(--steel); }
.story-steps { margin-top: 24px; display: grid; gap: 12px; }
.story-step { padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--text-sm); color: var(--steel); }
.story-step strong { display: inline-block; width: 94px; color: var(--ink); }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 50px; }
.contact-card { padding: 40px; min-height: 270px; border: 1px solid var(--line); }
.contact-card small { color: var(--blue); font-weight: 800; letter-spacing: .12em; }
.contact-card h3 { margin-top: 24px; font-size: 23px; }
.contact-card p { margin-top: 14px; color: var(--steel); }
.contact-card a:not(.btn) { display: block; margin-top: 8px; color: var(--blue); font-weight: 650; }

.site-footer { padding: 36px var(--pad) 22px; border-top: 1px solid rgba(255,255,255,.12); background: #070a12; color: #fff; }
.footer-inner { width: min(100%, var(--max)); margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: 1.1fr repeat(3, .6fr); gap: 28px; }
.footer-brand h2 { font-size: 0; }
.footer-brand h2::before {
  content: "";
  display: block;
  width: min(150px, 48vw);
  aspect-ratio: 4935 / 1405;
  background: url("images/logo-white.png.optimized.webp") left center / contain no-repeat;
}
.footer-brand p { width:min(150px,48vw); margin-top:14px; color:rgba(255,255,255,.78); font-weight:700; line-height:1.65; }
.footer-brand p span { display:block; width:100%; text-align:justify; text-align-last:justify; white-space:nowrap; }
.footer-brand p span:first-child { font-size:17px; letter-spacing:.08em; }
.footer-brand p span:last-child { margin-top:2px; font-size:11px; letter-spacing:.025em; }
.cta-band .btn { min-height: 44px; padding-inline: 22px; }
.cta-band .btn-white { border-color: var(--blue); background: var(--blue); color: #fff; }
.footer-col h3 { color: rgba(255,255,255,.42); font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; }
.footer-col a { display: block; margin-top: 8px; color: rgba(255,255,255,.72); font-size: var(--text-sm); }
.footer-bottom { margin-top: 24px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.13); display: flex; justify-content: space-between; gap: 20px; color: rgba(255,255,255,.38); font-size: var(--text-xs); }

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

@media (max-width: 1050px) {


  .statement-grid, .industry-grid { grid-template-columns: repeat(2, 1fr); }
  .statement-item:nth-child(2) { border-right: 0; }
  .industry-item:nth-child(2) { border-right: 0; }
  .industry-item:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.15); }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .network-strip { grid-template-columns: repeat(2, 1fr); }
  .process-flow { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {

  .nav-en { padding-left: 0; border-left: 0; }
  .system-card, .split, .project-feature, .detail-layout, .capability-stage, .product-hero-grid { grid-template-columns: 1fr; }
  .system-card:nth-child(even) .system-image { order: 0; }
  .system-image { min-height: 360px; height:auto; aspect-ratio: 4/3; }
  .side-index { position: static; display: flex; overflow-x: auto; border-bottom: 1px solid var(--line); }
  .side-index a { min-width: max-content; margin-right: 24px; }
  .project-feature img { aspect-ratio: 4/3; object-fit: cover; }
  .capability-media { min-height: 390px; grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .capability-media figure + figure { border-top: 0; border-left: 1px solid rgba(255,255,255,.18); }
  .cta-inner { align-items: flex-start; flex-direction: column; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 26px; }
  .footer-brand h2::before, .footer-brand p { width: min(145px, 42vw); }
  .product-map, .equipment-grid { grid-template-columns: 1fr; }
  .node-gallery { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .hero-asset-placeholder { min-height: 220px; }
}

@media (max-width: 620px) {
  :root { --pad: 20px; }
  .hero-inner { padding-top: 136px; }
  .hero h1 { font-size: 58px; }


  .hero-title-zh { font-size: clamp(28px, 7.5vw, 40px); }
  .hero-title-en { font-size: clamp(32px, 8vw, 46px); }
  .hero.hero-dark-text .hero-title-en { max-width:calc(100vw - 110px); font-size:clamp(25px,6.6vw,34px); }
  .hero-copy br { display: none; }
  .hero-trust { gap:9px 18px; margin-top:26px; }
  .hero-trust > span { font-size:12px; }
  .hero-inner { width:calc(100% - 72px); padding:76px 18px 0 24px; }
  .hero-dots { right:12px; gap:12px; }
  .hero-dot { width:36px; height:36px; }
  .hero-dot span { width:8px; height:8px; }
  .project-logo-track a { width:190px; height:48px; padding:5px 24px; }
  .project-logo-track img { width:142px; max-width:142px; height:34px; }
  .statement-grid, .industry-grid, .card-grid, .story-grid, .contact-grid, .spec-grid { grid-template-columns: 1fr; }
  .network-strip { grid-template-columns: 1fr; }
  .process-flow { grid-template-columns: 1fr; }
  .node-gallery { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .statement-item, .statement-item + .statement-item { padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .industry-item { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.15); }
  .system-card { min-height: 0; }
  .system-copy { min-height: 460px; }
  .capability-media { min-height: 520px; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .capability-media figure + figure { border-left: 0; border-top: 1px solid rgba(255,255,255,.18); }
  .spec:nth-child(even) { padding-left: 0; border-left: 0; }
  .story img { aspect-ratio: 16/10; }
  .contact-card { padding: 28px; }
  .footer-top { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand h2::before, .footer-brand p { width: min(135px, 40vw); }
  .footer-col:last-child { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; }
}

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

html[lang="zh-CN"] h1,
html[lang="zh-CN"] h2,
html[lang="zh-CN"] h3,
html[lang="zh-CN"] .hero-title-zh {
  line-height:1.3;
  letter-spacing:.055em;
}

.technology-trigger { position: relative; cursor: pointer; transition: background .25s ease, color .25s ease, transform .25s ease; }
.technology-trigger:hover, .technology-trigger:focus-visible { background: var(--blue); color: #fff; outline: none; transform: translateY(-2px); }
.technology-trigger:hover p, .technology-trigger:focus-visible p { color: rgba(255,255,255,.72); }
.technology-trigger:hover small, .technology-trigger:focus-visible small { color: #aab9ff; }
.technology-trigger-action { display: block; margin-top: 24px; color: var(--blue); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 800; letter-spacing: .08em; }
.technology-trigger:hover .technology-trigger-action, .technology-trigger:focus-visible .technology-trigger-action { color: #fff; }
.detail-trigger { cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.detail-trigger:hover, .detail-trigger:focus-visible { transform: translateY(-3px); border-color: rgba(0,28,131,.42); box-shadow: 0 18px 46px rgba(0,28,131,.10); outline: none; }
.detail-trigger.card-dark .technology-trigger-action, .detail-trigger.industry-item .technology-trigger-action { color: #aab9ff; }
.card-detail-image:empty { display: none; }
.card-modal-placeholder { min-height: 210px; margin-top: 28px; }
.card-modal-images { display:grid; margin-top:28px; border:1px solid var(--line); background:var(--soft); overflow:hidden; }
.card-modal-images.is-split { grid-template-columns:1fr 1fr; }
.card-modal-images img { width:100%; height:clamp(280px,42vw,520px); object-fit:contain; background:#fff; }
.card-modal-images.is-split img { height:clamp(240px,30vw,420px); }
.card-modal-images.is-split img + img { border-left:1px solid var(--line); }
.cleanroom-family-media { margin:28px 0 32px; border:1px solid var(--line); background:#f4f6fa; overflow:hidden; }
.cleanroom-family-media img { display:block; width:100%; height:auto; max-height:720px; object-fit:cover; }
.production-line-gallery { margin-top:clamp(44px,6vw,72px); padding-top:32px; border-top:2px solid var(--ink); }
.production-line-gallery-head { max-width:720px; margin-bottom:24px; }
.production-line-gallery-head > span { color:var(--blue); font-family:var(--font-sans); font-size:10px; font-weight:800; letter-spacing:.16em; }
.production-line-gallery-head h3 { margin:10px 0 8px; font-size:clamp(26px,3vw,40px); }
.production-line-gallery-head p { margin:0; color:var(--muted); }
.production-line-gallery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.production-line-gallery figure { margin:0; border:1px solid var(--line); background:#fff; overflow:hidden; }
.production-line-gallery figure img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--soft); }
.production-line-gallery figcaption { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 20px; border-top:1px solid var(--line); }
.production-line-gallery figcaption small { color:var(--blue); font-weight:800; letter-spacing:.12em; }
.production-line-gallery figcaption strong { font-size:17px; }
@media (max-width:720px) { .production-line-gallery-grid { grid-template-columns:1fr; } }
.gallery-preview { position:relative; display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; gap:12px; margin-top:38px; }
.gallery-preview-stage { position:relative; min-height:clamp(330px,38vw,470px); overflow:hidden; }
.gallery-preview-card { position:absolute; top:50%; left:50%; width:clamp(230px,31vw,380px); color:var(--ink); background:#fff; border:1px solid var(--line); box-shadow:0 16px 42px rgba(18,31,55,.08); opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(.78); transition:transform .42s ease,opacity .42s ease,filter .42s ease; overflow:hidden; }
.gallery-preview-card img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:#fff; }
.gallery-preview-card span { display:block; padding:18px 14px; border-top:1px solid var(--line); text-align:center; font-size:18px; font-weight:700; }
.gallery-preview-card.is-active { z-index:3; opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
.gallery-preview-card.is-before { z-index:1; opacity:.52; transform:translate(-112%,-50%) scale(.82); filter:saturate(.75); }
.gallery-preview-card.is-after { z-index:2; opacity:.68; transform:translate(12%,-50%) scale(.88); filter:saturate(.84); }
.gallery-preview-arrow { display:grid; place-items:center; width:44px; height:44px; border:1px solid #cfd5e1; border-radius:50%; color:var(--blue); background:rgba(255,255,255,.76); font-size:21px; cursor:pointer; transition:border-color .2s ease,background .2s ease,transform .2s ease; z-index:5; }
.gallery-preview-arrow:hover { border-color:var(--blue); background:#fff; transform:scale(1.04); }
.gallery-preview-arrow:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
.gallery-preview-status { grid-column:2; min-height:18px; margin-top:2px; text-align:center; color:var(--muted); font-size:12px; letter-spacing:.1em; }
.gallery-preview-action { justify-content:center; margin-top:18px; }
@media (max-width:720px) { .gallery-preview { grid-template-columns:38px minmax(0,1fr) 38px; gap:4px; } .gallery-preview-stage { min-height:360px; } .gallery-preview-card { width:min(76vw,300px); } .gallery-preview-card.is-before { transform:translate(-126%,-50%) scale(.78); } .gallery-preview-card.is-after { transform:translate(26%,-50%) scale(.78); } .gallery-preview-arrow { width:38px; height:38px; } }
@media (max-width:620px) { .card-modal-images.is-split { grid-template-columns:1fr; } .card-modal-images.is-split img + img { border-left:0; border-top:1px solid var(--line); } }
.technology-dialog { position: fixed; inset: 0; width: min(780px, calc(100vw - 48px)); max-height: calc(100vh - 64px); margin: auto; padding: 54px; border: 0; border-top: 5px solid var(--blue); background: #fff; color: var(--ink); box-shadow: 0 34px 110px rgba(0,16,74,.34); overflow: auto; }
.technology-dialog::backdrop { background: rgba(2,8,28,.68); backdrop-filter: blur(6px); }
.technology-dialog-close { position: absolute; top: 18px; right: 22px; width: 42px; height: 42px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 28px; line-height: 1; cursor: pointer; }
.technology-dialog-kicker { color: var(--blue); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 800; letter-spacing: .16em; }
.technology-dialog h2 { margin-top: 18px; font-family: var(--font-sans); font-size: clamp(32px, 5vw, 52px); line-height: 1.08; }
.technology-dialog-intro { margin-top: 22px; color: var(--gray); font-size: var(--text-md); line-height: 1.8; }
.technology-dialog h3 { margin-top: 32px; font-family: var(--font-sans); font-size: var(--text-md); }
.technology-dialog-list { margin-top: 14px; padding-left: 20px; color: var(--gray); line-height: 1.9; }
.technology-dialog-result { margin-top: 28px; padding: 18px 20px; border-left: 3px solid var(--blue); background: var(--soft); font-size: var(--text-sm); line-height: 1.7; }
.card-detail-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 32px; }
.card-detail-columns > div + div { padding-left: 34px; border-left: 1px solid var(--line); }
.card-detail-columns h3 { margin-top: 0; }
.history-grid { margin-top: 54px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.history-item { min-height: 240px; padding: 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.history-item small { color: var(--blue); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 800; letter-spacing: .1em; }
.history-item h3 { margin-top: 30px; font-family: var(--font-sans); font-size: 21px; }
.history-item p { margin-top: 14px; color: var(--gray); font-size: var(--text-sm); line-height: 1.75; }
.history-item.is-latest { background: var(--blue); color: #fff; }
.history-item.is-latest small, .history-item.is-latest p { color: rgba(255,255,255,.72); }
.credential-strip { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:20px; margin-top:48px; }
.credential-badge { text-align:center; padding:28px 18px 22px; border:1px solid var(--line); background:#fff; }
.credential-badge img { height:160px; object-fit:contain; margin:0 auto; background:#fff; border-radius:2px; }
.credential-badge h3 { margin-top:18px; font-size:var(--text-sm); font-weight:600; line-height:1.3; }
.credential-badge small { display:block; margin-top:4px; color:var(--steel); font-size:var(--text-2xs); letter-spacing:.1em; }
@media (max-width: 860px) { .credential-strip { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 620px) { .credential-strip { grid-template-columns: repeat(2, minmax(0,1fr)); } .credential-badge img { height:110px; } }
.detail-input-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,5vw,72px); align-items:stretch; margin-top:clamp(42px,6vw,76px); padding-top:clamp(30px,4vw,52px); border-top:1px solid var(--line); }
.detail-input-grid h3 { margin:12px 0 18px; font-family:var(--font-sans); font-size:clamp(24px,2.3vw,36px); }
.detail-input-grid ul { margin:0; padding:0; list-style:none; }
.detail-input-grid li { position:relative; padding:13px 0 13px 24px; border-bottom:1px solid var(--line); color:var(--gray); line-height:1.7; }
.detail-input-grid li::before { content:'+'; position:absolute; left:0; color:var(--blue); font-weight:800; }
.detail-input-grid .asset-placeholder { min-height:310px; }
.detail-disclaimer { margin:28px 0 0; padding:18px 0 0; border-top:1px solid var(--line); color:var(--gray); font-size:13px; line-height:1.8; }
.node-gallery { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; margin-top:48px; }
.node-figure { margin:0; overflow:hidden; border:1px solid var(--line); background:#fff; transition:transform .25s ease; }
.node-figure:hover { transform:translateY(-3px); }
.node-figure img { aspect-ratio:4/3; object-fit:cover; width:100%; }
.node-figure figcaption { padding:14px 16px; }
.node-figure figcaption strong { display:block; font-size:var(--text-sm); color:var(--ink); }
.node-figure figcaption small { display:block; margin-top:4px; color:var(--steel); font-size:var(--text-xs); }
.floating-contact { position:fixed; right:20px; bottom:24px; z-index:100; display:flex; flex-direction:column; gap:8px; }
.floating-contact a { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--blue); color:#fff; box-shadow:0 4px 20px rgba(0,16,74,.28); transition:transform .2s,background .2s; }
.floating-contact a:hover { transform:scale(1.12); background:var(--blue-dark); }
.floating-contact svg { width:20px; height:20px; fill:currentColor; }
@media (max-width: 620px) { .floating-contact { right:14px; bottom:18px; gap:6px; } .floating-contact a { width:44px; height:44px; } }
body.dialog-open { overflow: hidden; }

@media (max-width: 620px) {
  .technology-dialog { width: calc(100vw - 24px); max-height: calc(100vh - 24px); padding: 46px 24px 28px; }
  .technology-dialog .button-row { align-items: stretch; }
  .technology-dialog .btn { width: 100%; text-align: center; }
  .card-detail-columns { grid-template-columns: 1fr; gap: 24px; }
  .card-detail-columns > div + div { padding-left: 0; padding-top: 24px; border-left: 0; border-top: 1px solid var(--line); }
  .history-grid { grid-template-columns: 1fr; }
  .history-item { min-height: 0; }
  .detail-input-grid { grid-template-columns:1fr; }
  .detail-input-grid .asset-placeholder { min-height:230px; }
}

.spec-table { width:100%; margin-top:36px; border-collapse:collapse; font-size:var(--text-sm); }
.spec-table caption { text-align:left; margin-bottom:10px; color:var(--steel); font-size:var(--text-xs); }
.spec-table th, .spec-table td { padding:14px 18px; text-align:left; border-bottom:1px solid var(--line); }
.spec-table th { background:var(--soft); color:var(--blue); font-weight:700; font-size:var(--text-xs); letter-spacing:.06em; white-space:nowrap; }
.spec-table td { color:var(--ink); }
.spec-table td:first-child { color:var(--blue); font-weight:650; }
.spec-table tr:last-child td { border-bottom:0; }
.spec-table .na { color:var(--steel); }
.spec-note { margin-top:14px; padding:12px 16px; background:var(--soft); border-left:3px solid var(--gold); color:var(--steel); font-size:var(--text-xs); line-height:1.8; }

@media (max-width: 620px) {
  .spec-table { font-size:var(--text-xs); }
  .spec-table th, .spec-table td { padding:10px 12px; }
}

/* Product photo catalog */
.catalog-jump { position:sticky; top:72px; z-index:20; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.96); backdrop-filter:blur(12px); }
.catalog-jump .container { display:flex; gap:8px; padding-top:14px; padding-bottom:14px; overflow-x:auto; }
.catalog-jump a { flex:0 0 auto; padding:9px 15px; border:1px solid var(--line); color:var(--ink); font-family:var(--font-sans); font-size:var(--text-xs); font-weight:700; }
.catalog-jump a:hover, .catalog-jump a:focus-visible { border-color:var(--blue); background:var(--blue); color:#fff; }
.catalog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:48px; }
.catalog-card { margin:0; overflow:hidden; border:1px solid var(--line); background:#fff; }
.catalog-card a { display:block; overflow:hidden; background:#f5f6f8; }
.catalog-card img { width:100%; aspect-ratio:4/3; object-fit:contain; background:#f5f6f8; transition:transform .3s ease; }
.catalog-card a:hover img { transform:scale(1.025); }
.catalog-card figcaption { display:flex; justify-content:space-between; gap:16px; padding:16px 18px; border-top:1px solid var(--line); }
.catalog-card strong { font-size:var(--text-sm); line-height:1.45; }
.catalog-card small { flex:0 0 auto; color:var(--steel); font-size:var(--text-2xs); letter-spacing:.08em; }
@media (max-width:860px) { .catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px) { .catalog-jump { top:62px; } .catalog-grid { grid-template-columns:1fr; gap:14px; margin-top:32px; } }

/* Manually controlled product carousels */
.catalog-product-sets { margin-top:52px; }
.product-carousel-set { margin-top:38px; padding-top:30px; border-top:1px solid var(--line); }
.product-carousel-set:first-child { margin-top:0; }
.product-carousel-head { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin-bottom:20px; }
.product-carousel-head h3 { margin-top:9px; font-size:clamp(22px,2vw,30px); line-height:1.2; }
.product-carousel-head p { max-width:660px; margin-top:10px; color:var(--gray); line-height:1.7; }
.product-carousel-controls { display:flex; flex:0 0 auto; align-items:center; gap:8px; padding:0; border:0; background:transparent; box-shadow:none; }
.product-carousel-controls button { width:auto; min-width:82px; height:40px; padding:0 12px; border:1px solid var(--line); background:#fff; color:var(--ink); font-family:var(--font-sans); font-size:12px; font-weight:700; cursor:pointer; transition:background .2s,border-color .2s,color .2s; }
.product-carousel-controls button:hover:not(:disabled), .product-carousel-controls button:focus-visible:not(:disabled) { border-color:var(--blue); background:var(--soft); color:var(--blue); transform:none; }
.product-carousel-controls button:disabled { border-color:var(--line); background:#f7f8fa; color:#aab0bd; cursor:not-allowed; }
.product-carousel-count { min-width:48px; color:var(--steel); font-family:var(--font-sans); font-size:12px; font-weight:650; text-align:center; letter-spacing:.06em; }
.product-carousel-track { display:flex; gap:20px; overflow-x:auto; padding-bottom:8px; scroll-behavior:smooth; scroll-snap-type:x mandatory; scrollbar-width:none; }
.product-carousel-track::-webkit-scrollbar { display:none; }
.product-slide { flex:0 0 calc((100% - 40px)/3); margin:0; overflow:hidden; border:1px solid var(--line); background:#fff; scroll-snap-align:start; }
.product-slide a { display:block; overflow:hidden; background:#f5f6f8; }
.product-slide img { width:100%; aspect-ratio:4/3; object-fit:contain; background:#f5f6f8; transition:transform .3s ease; }
.product-slide a:hover img { transform:scale(1.025); }
.product-slide figcaption { display:flex; justify-content:space-between; gap:14px; padding:16px 18px; border-top:1px solid var(--line); }
.product-slide strong { font-size:var(--text-sm); line-height:1.45; }
.product-slide small { flex:0 0 auto; color:var(--steel); font-size:var(--text-2xs); letter-spacing:.08em; }
.embedded-product-gallery { margin-top:38px; }
.embedded-product-gallery .product-carousel-set { padding:26px; border:1px solid var(--line); background:var(--soft); }
.embedded-product-gallery .product-carousel-set + .product-carousel-set { margin-top:24px; }
.embedded-product-gallery .product-slide { flex-basis:calc((100% - 20px)/2); }
@media (max-width:860px) { .product-slide { flex-basis:calc((100% - 20px)/2); } .embedded-product-gallery .product-slide { flex-basis:78%; } }
@media (max-width:620px) { .catalog-product-sets { margin-top:34px; } .product-carousel-head { align-items:flex-start; flex-direction:column; gap:18px; } .product-carousel-controls { align-self:stretch; justify-content:flex-end; } .product-carousel-controls button { min-width:82px; } .product-slide, .embedded-product-gallery .product-slide { flex-basis:88%; } .embedded-product-gallery .product-carousel-set { padding:20px; } }

/* Quick model selector for grouped profiled-steel products */
.product-model-selector { margin-top:38px; padding-top:30px; border-top:1px solid var(--line); }
.product-model-selector-head h3 { margin-top:9px; font-size:clamp(24px,2.2vw,32px); }
.product-model-selector-head p { max-width:760px; margin-top:12px; color:var(--gray); line-height:1.7; }
.product-model-selector-layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:28px; margin-top:28px; align-items:start; }
.product-model-list { display:flex; flex-direction:column; border:1px solid var(--line); background:#fff; }
.product-model-list button { width:100%; padding:14px 16px; border:0; border-bottom:1px solid var(--line); background:#fff; color:var(--ink); font-family:var(--font-sans); font-size:13px; font-weight:650; text-align:left; cursor:pointer; }
.product-model-list button:last-child { border-bottom:0; }
.product-model-list button:hover, .product-model-list button:focus-visible { background:var(--soft); color:var(--blue); }
.product-model-list button.is-active { background:var(--blue); color:#fff; }
.product-model-stage .product-carousel-set { margin-top:0; padding-top:0; border-top:0; }
@media (max-width:860px) { .product-model-selector-layout { grid-template-columns:1fr; } .product-model-list { flex-direction:row; overflow-x:auto; } .product-model-list button { flex:0 0 auto; width:auto; white-space:nowrap; border-right:1px solid var(--line); border-bottom:0; } }

/* Unified section-title and view-action treatment across every site page. */
html[lang="zh-CN"] main h1,
html[lang="zh-CN"] main h2,
html[lang="zh-CN"] main h3,
html[lang="zh-CN"] .technology-dialog h2,
html[lang="zh-CN"] .technology-dialog h3 {
  line-height: 1.32;
  letter-spacing: .055em;
}

.hero-kicker::before,
.eyebrow::before { display:none; }

.btn { border-width:1px; border-radius:999px; }

@media (max-width:760px) {
  .system-card { height:auto; border-radius:18px; grid-template-columns:1fr; }
  .system-card:nth-child(even) .system-image { order:0; }
  .system-image { min-height:0; aspect-ratio:16/10; }
  .system-copy { min-height:390px; }
}

/* 2 × 2 photographic drawer presentation */
.industry-showcase { display:flex; height:100vh; min-height:850px; padding:58px 0 54px; }
.industry-showcase > .container { display:flex; width:90%; max-width:none; flex-direction:column; }
.industry-heading { flex:0 0 auto; }
.industry-heading h2 { margin-top:9px; }
.industry-heading p { margin-top:10px; line-height:1.7; }
.industry-card-grid { display:grid; min-height:0; flex:1 1 auto; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:18px; margin-top:34px; }
.industry-card.industry-drawer-card { position:relative; min-height:0; border:0; border-radius:20px; background:#13233a; box-shadow:0 16px 42px rgba(2,22,48,.09); isolation:isolate; }
.industry-drawer-card .industry-cover { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; filter:saturate(.94); transform:scale(1.001); transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .6s ease; }
.industry-drawer-card:hover .industry-cover,.industry-drawer-card.active .industry-cover { filter:saturate(1.04); transform:scale(1.045); }
.industry-drawer-card .industry-image-shade { position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(2,18,39,.68) 0%,rgba(2,18,39,.35) 46%,rgba(2,18,39,.08) 76%),linear-gradient(to top,rgba(2,18,39,.42),transparent 55%); transition:opacity .5s ease; }
.industry-drawer-card:hover .industry-image-shade,.industry-drawer-card.active .industry-image-shade { opacity:.92; }
.industry-card-summary { position:absolute; left:30px; bottom:27px; z-index:3; width:calc(44% - 38px); color:#fff; transition:transform .58s cubic-bezier(.22,.75,.25,1); }
.industry-card-summary > span { display:inline-flex; padding:6px 11px 5px; border:1px solid rgba(255,255,255,.34); border-radius:999px; background:rgba(255,255,255,.18); font-size:11px; font-weight:800; letter-spacing:1.4px; backdrop-filter:blur(8px); }
.industry-card-summary h3 { margin-top:14px; color:#fff; font-size:clamp(19px,1.55vw,27px); font-weight:800; line-height:1.25; white-space:nowrap; }
.industry-card-summary small { display:block; margin-top:7px; color:rgba(255,255,255,.74); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap; }
.industry-card-summary button { display:flex; align-items:center; gap:9px; margin-top:18px; padding:0; border:0; background:transparent; color:#fff; font-family:var(--font-sans); font-size:12px; cursor:pointer; }
.industry-card-summary button b { font-weight:700; }
.industry-card-summary button i { font-style:normal; transition:transform .28s ease; }
.industry-drawer-card:hover .industry-card-summary button i,.industry-drawer-card.active .industry-card-summary button i { transform:translateX(5px); }
.industry-card-drawer { position:absolute; top:0; right:0; bottom:0; z-index:4; width:56%; padding:26px 28px 22px; border-left:1px solid rgba(0,28,131,.10); background:rgba(255,255,255,.96); color:var(--ink); opacity:0; transform:translate3d(102%,0,0); backdrop-filter:blur(18px) saturate(115%); transition:transform .62s cubic-bezier(.2,.78,.24,1),opacity .35s ease; }
.industry-drawer-card:hover .industry-card-drawer,.industry-drawer-card.active .industry-card-drawer { opacity:1; transform:translate3d(0,0,0); }
.industry-card-drawer .drawer-kicker { color:var(--blue); font-size:10.5px; font-weight:800; letter-spacing:.12em; }
.industry-card-drawer h4 { margin-top:14px; color:var(--blue-deep); font-size:20px; font-weight:800; }
.industry-card-drawer > p { margin-top:13px; color:var(--steel); font-size:12.5px; line-height:1.7; }
.industry-card-drawer ul { display:grid; gap:0; margin-top:14px; }
.industry-card-drawer li { display:flex; align-items:center; gap:9px; padding:8px 0; border-bottom:1px solid #e9edf2; color:#455365; font-size:12px; transform:translateX(12px); opacity:0; transition:transform .35s ease,opacity .35s ease; }
.industry-drawer-card:hover .industry-card-drawer li,.industry-drawer-card.active .industry-card-drawer li { transform:translateX(0); opacity:1; }
.industry-card-drawer li:nth-child(2) { transition-delay:.05s; }.industry-card-drawer li:nth-child(3) { transition-delay:.1s; }.industry-card-drawer li:nth-child(4) { transition-delay:.15s; }
.industry-card-drawer li span { color:var(--blue); font-weight:900; }
.industry-card-drawer .detail-cta { display:inline-flex; align-items:center; gap:13px; margin-top:15px; padding:10px 15px 10px 17px; border-radius:999px; background:var(--blue); box-shadow:0 8px 20px rgba(0,28,131,.14); color:#fff; font-size:11.5px; font-weight:750; transition:transform .25s ease,box-shadow .25s ease,background .25s ease; }
.industry-card-drawer .detail-cta span { display:grid; width:24px; height:24px; place-items:center; border-radius:50%; background:rgba(255,255,255,.16); }
.industry-card-drawer .detail-cta:hover { background:#012ba8; box-shadow:0 12px 25px rgba(0,28,131,.22); transform:translateY(-2px); }
.industry-showcase .industry-detail { display:none!important; }
@media (max-width:1100px) {
  .industry-showcase { height:auto; min-height:100vh; }
  .industry-showcase > .container { width:90%; }
  .industry-card-grid { grid-template-rows:repeat(2,390px); }
  .industry-card-drawer { width:60%; }
  .industry-card-summary { width:calc(40% - 38px); }
}
@media (max-width:820px) {
  .industry-card-grid { grid-template-columns:1fr; grid-template-rows:none; }
  .industry-drawer-card { min-height:390px; }
}
@media (max-width:600px) {
  .industry-showcase { padding:70px 0; }
  .industry-showcase > .container { width:auto; margin:0 16px; }
  .industry-card-grid { margin-top:30px; }
  .industry-drawer-card { min-height:480px; }
  .industry-card-summary { left:22px; bottom:24px; width:calc(100% - 44px); }
  .industry-card-summary h3 { font-size:22px; }
  .industry-card-drawer { top:auto; left:0; width:100%; height:64%; padding:24px; transform:translate3d(0,102%,0); }
  .industry-drawer-card:hover .industry-card-drawer,.industry-drawer-card.active .industry-card-drawer { transform:translate3d(0,0,0); }
}

/* Six-sector horizontal accordion */
.industry-showcase { min-height:760px; }
.industry-showcase .industry-card-grid { position:relative; display:flex; min-height:510px; flex:1 1 auto; gap:10px; grid-template-columns:none; grid-template-rows:none; margin-top:30px; }
.industry-accordion-panel { position:relative; overflow:hidden; min-width:68px; flex:.72 1 0; contain:paint; border:1px solid rgba(255,255,255,.3); border-radius:20px; box-shadow:0 14px 36px rgba(2,22,48,.08); opacity:0; transform:translateY(18px); cursor:pointer; isolation:isolate; transition:flex .72s cubic-bezier(.2,.8,.22,1),filter .35s ease,opacity .5s ease var(--reveal-delay),transform .5s ease var(--reveal-delay),box-shadow .35s ease; }
.cards-visible .industry-accordion-panel { opacity:1; transform:translateY(0); }
.industry-accordion-panel.active { flex:4.8 1 0; box-shadow:0 22px 52px rgba(2,22,48,.16); }
.industry-accordion-panel > img { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; backface-visibility:hidden; filter:brightness(.72) saturate(.88); transform:translateZ(0) scale(1.08); transition:transform 1.1s cubic-bezier(.2,.72,.2,1),filter .5s ease; }
.industry-accordion-panel:hover > img { filter:brightness(.82) saturate(.98); }
.industry-accordion-panel.active > img { filter:brightness(.92) saturate(1); transform:translateZ(0) scale(1); }
.industry-accordion-panel .panel-shade { position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(0,20,55,.84) 0%,rgba(0,24,66,.56) 42%,rgba(0,24,66,.08) 78%),linear-gradient(to top,rgba(0,18,47,.52),transparent 52%); opacity:.72; transition:opacity .45s ease; }
.industry-accordion-panel.active .panel-shade { opacity:1; }
.panel-icon { display:grid; width:42px; height:42px; place-items:center; border:1px solid rgba(255,255,255,.42); border-radius:50%; background:rgba(255,255,255,.14); color:#fff; backdrop-filter:blur(8px); }
.panel-icon svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.panel-collapsed { position:absolute; inset:0; z-index:2; display:flex; align-items:center; flex-direction:column; justify-content:flex-end; gap:18px; padding:24px 12px; color:#fff; transition:opacity .28s ease,transform .45s ease; }
.panel-collapsed h3 { color:#fff; font-size:17px; font-weight:800; line-height:1.25; letter-spacing:.08em; text-align:center; writing-mode:vertical-rl; }
.industry-accordion-panel.active .panel-collapsed { opacity:0; transform:translateX(-24px); pointer-events:none; }
.panel-expanded { position:absolute; left:0; bottom:0; z-index:3; width:min(610px,78%); padding:42px 42px 38px; color:#fff; opacity:0; transform:translateX(28px); transition:opacity .38s ease .18s,transform .55s cubic-bezier(.2,.75,.2,1) .12s; pointer-events:none; }
.industry-accordion-panel.active .panel-expanded { opacity:1; transform:translateX(0); pointer-events:auto; }
.panel-expanded small { display:block; margin-top:16px; color:rgba(255,255,255,.72); font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.panel-expanded h3 { margin-top:9px; color:#fff; font-size:clamp(27px,2.7vw,43px); font-weight:800; line-height:1.17; }
.panel-expanded p { max-width:550px; margin-top:16px; color:rgba(255,255,255,.82); font-size:14px; line-height:1.75; }
.panel-expanded ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; margin-top:19px; }
.panel-expanded li { display:flex; align-items:center; gap:9px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.9); font-size:12.5px; opacity:0; transform:translateX(24px); }
.industry-accordion-panel.active .panel-expanded li { animation:accordionPointIn .45s ease forwards; }
.industry-accordion-panel.active .panel-expanded li:nth-child(2) { animation-delay:.08s; }.industry-accordion-panel.active .panel-expanded li:nth-child(3) { animation-delay:.16s; }.industry-accordion-panel.active .panel-expanded li:nth-child(4) { animation-delay:.24s; }
.panel-expanded li span { color:#8eb4ff; font-weight:900; }
.panel-expanded > a { display:inline-flex; align-items:center; gap:12px; margin-top:22px; padding:11px 17px; border:1px solid rgba(255,255,255,.38); border-radius:999px; background:rgba(255,255,255,.13); color:#fff; font-size:12px; font-weight:700; backdrop-filter:blur(10px); transition:background .25s ease,transform .25s ease; }
.panel-expanded > a:hover { background:#fff; color:var(--blue); transform:translateY(-2px); }
.panel-expanded > a i { font-style:normal; }
.industry-next { position:absolute; right:-26px; top:50%; z-index:1000; display:grid; width:58px; height:58px; place-items:center; border:1px solid rgba(255,255,255,.7); border-radius:50%; background:rgba(255,255,255,.48); box-shadow:0 10px 28px rgba(2,22,48,.14),inset 0 1px 0 rgba(255,255,255,.7); color:var(--blue); cursor:pointer; -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%); transform:translateY(-50%); transition:transform .3s ease,box-shadow .3s ease,background .3s ease; }
.industry-next svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.industry-next:hover { background:rgba(255,255,255,.72); box-shadow:0 14px 34px rgba(2,22,48,.2),inset 0 1px 0 #fff; transform:translate(4px,-50%); }
@keyframes accordionPointIn { to { opacity:1; transform:translateX(0); } }
@media (max-width:1000px) {
  .industry-showcase { height:auto; min-height:900px; }
  .industry-showcase .industry-card-grid { min-height:650px; }
  .industry-accordion-panel { min-width:54px; }
  .panel-expanded { width:88%; padding:34px; }
  .panel-expanded ul { grid-template-columns:1fr; }
}
@media (max-width:700px) {
  .industry-showcase .industry-card-grid { display:grid; min-height:0; grid-template-columns:1fr; }
  .industry-accordion-panel,.industry-accordion-panel.active { min-height:108px; flex:none; }
  .industry-accordion-panel.active { min-height:520px; }
  .panel-collapsed { align-items:center; flex-direction:row; justify-content:flex-start; padding:20px; }
  .panel-collapsed h3 { font-size:16px; writing-mode:horizontal-tb; }
  .panel-expanded { width:100%; padding:28px 24px; }
  .industry-next { right:8px; top:auto; bottom:-34px; transform:none; }
  .industry-next:hover { transform:translateX(3px); }
}
@media (prefers-reduced-motion:reduce) { .industry-accordion-panel > img,.panel-collapsed,.panel-expanded,.panel-expanded li { transition:none!important; animation:none!important; } }

/* White, flush and layered accordion refinement */
.industry-showcase { background:#fff; }
.industry-showcase .section-bg,.industry-showcase .section-veil { display:none; }
.industry-showcase .industry-card-grid { gap:0; overflow:visible; }
.industry-accordion-panel { margin-left:-10px; border:0; border-radius:0; box-shadow:-12px 0 28px rgba(2,22,48,.16); }
.industry-accordion-panel:first-child { margin-left:0; }
.industry-accordion-panel:nth-child(1) { z-index:6; }.industry-accordion-panel:nth-child(2) { z-index:5; }.industry-accordion-panel:nth-child(3) { z-index:4; }.industry-accordion-panel:nth-child(4) { z-index:3; }.industry-accordion-panel:nth-child(5) { z-index:2; }.industry-accordion-panel:nth-child(6) { z-index:1; }
.industry-accordion-panel.active { z-index:10; box-shadow:-18px 0 38px rgba(2,22,48,.20),18px 0 38px rgba(2,22,48,.12); }
.industry-accordion-panel { flex:0 0 118px; transition:flex-basis 1.42s cubic-bezier(.22,.68,.18,1),filter .72s ease,opacity .5s ease var(--reveal-delay),transform .82s cubic-bezier(.22,.68,.18,1) var(--reveal-delay),box-shadow .72s ease!important; will-change:flex-basis; }
.industry-accordion-panel.active { flex-basis:calc(100% - 530px); }
.panel-collapsed { left:-9px; right:9px; display:grid; grid-template-rows:42px 210px; align-content:center; justify-items:center; gap:18px; padding:24px 16px; transition:opacity .48s ease .08s,transform .78s cubic-bezier(.22,.68,.18,1); }
.panel-collapsed .panel-icon { align-self:start; backdrop-filter:none; }
.panel-collapsed h3 { display:block; width:auto; height:210px; margin:0; text-align:start; }
.panel-expanded { left:0; bottom:50%; width:560px; max-width:none; padding:42px 44px; text-align:left; transform:translate(-38px,50%); transition:opacity .2s ease,transform .34s ease; }
.industry-accordion-panel.active .panel-expanded { transform:translate(0,50%); transition:opacity .62s ease .5s,transform .92s cubic-bezier(.22,.68,.18,1) .38s; }
.panel-expanded .panel-icon { margin:0; }
.panel-expanded p { margin-right:0; margin-left:0; }
.panel-expanded ul { text-align:left; }
@media (max-width:700px) {
  .industry-accordion-panel { margin-top:-8px; margin-left:0; box-shadow:0 -10px 24px rgba(2,22,48,.14); }
  .industry-accordion-panel,.industry-accordion-panel.active { flex:none; }
  .industry-accordion-panel:first-child { margin-top:0; }
  .panel-expanded { left:0; bottom:0; width:100%; padding:28px 24px; text-align:left; transform:translateY(20px); }
  .industry-accordion-panel.active .panel-expanded { transform:translateY(0); }
  .panel-expanded .panel-icon { margin:0; }
}
@media (min-width:701px) and (max-width:1000px) {
  .industry-accordion-panel { flex-basis:82px; }
  .industry-accordion-panel.active { flex-basis:calc(100% - 336px); }
}
@media (prefers-reduced-motion:reduce) {
  .industry-showcase .section-bg,.industry-card,.industry-card .card-media img,.industry-detail,.industry-detail .detail-media img,.industry-detail .detail-body li { transition:none!important; animation:none!important; }
  .industry-card,.industry-detail.open,.industry-detail.open .detail-body li { opacity:1; transform:none; }
  /* This accordion's width transition communicates state; keep it gentle even when ambient motion is reduced. */
  .industry-accordion-panel { transition:flex-basis 1.42s cubic-bezier(.22,.68,.18,1),box-shadow .72s ease!important; }
  .industry-accordion-panel > img { transition:transform 1.55s cubic-bezier(.22,.68,.18,1),filter .72s ease!important; }
  .industry-accordion-panel .panel-collapsed { transition:opacity .48s ease .08s,transform .78s cubic-bezier(.22,.68,.18,1)!important; }
  .industry-accordion-panel .panel-expanded { transition:opacity .2s ease,transform .34s ease!important; }
  .industry-accordion-panel.active .panel-expanded { transition:opacity .62s ease .5s,transform .92s cubic-bezier(.22,.68,.18,1) .38s!important; }
  .industry-accordion-panel.active .panel-expanded li { opacity:1; transform:none; }
}

/* Preserve the requested drawer state transition against the site's global motion reset. */
.industry-showcase .industry-accordion-panel {
  transition-property:flex-basis,box-shadow!important;
  transition-duration:1.42s,.72s!important;
  transition-timing-function:cubic-bezier(.22,.68,.18,1),ease!important;
  transition-delay:0s,0s!important;
}

/* Content is visible at first paint; entrance observers must not gate reading. */
.reveal,.reveal.is-visible{opacity:1;transform:none;transition:none}
.industry-card,.industry-accordion-panel,.pir-card{opacity:1!important;transform:none;--reveal-delay:0s;--delay:0s}
.wall-profile-explorer .wall-profile-heading,.wall-profile-explorer .wall-profile-shell{opacity:1!important;transform:none!important;transition:none!important}
.wall-profile-image img{opacity:1!important}
.about-motion-ready .about-system-screen:not(.is-visible) .about-system-copy{visibility:visible!important}
.about-system-copy,.system-scene.is-active .system-scene-copy>*{animation:none!important;opacity:1;transform:none}
.icp-record{text-align:center;padding:0 20px 24px;font-size:13px;color:inherit}.icp-record a{color:inherit;text-decoration:none}.icp-record a:hover{text-decoration:underline}