:root {
  color-scheme: dark;
  --bg: #10120e;
  --panel: #181c16;
  --panel-up: #1c201a;
  --line: #353b30;
  --ink: #f4f5ee;
  --muted: #adb4a5;
  --acid: #dbf850;
  --dark: #181b0e;
  --wrap: 1240px;
  --pad: clamp(20px, 5vw, 76px);
  font-family: "Inter", "Noto Sans CJK SC", "Microsoft YaHei", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 105px; }
body { margin: 0; min-width: 300px; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button { color: inherit; }
img { display: block; width: 100%; }
svg { width: 1.1em; height: 1.1em; flex: 0 0 auto; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.18; }
:focus-visible { outline: 2px solid var(--acid); outline-offset: 5px; }
[hidden] { display: none !important; }
.wrap { width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; }
.muted { color: var(--muted); }
.mono { font-family: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace; }
.eyebrow { color: var(--acid); letter-spacing: .13em; font-size: 12px; font-weight: 750; }
.eyebrow::before { content: ""; width: 16px; height: 2px; display: inline-block; vertical-align: middle; margin-inline-end: 9px; background: var(--acid); }
.skip { position: fixed; z-index: 20; top: 12px; left: 12px; background: var(--acid); color: var(--dark); padding: 10px; transform: translateY(-180%); }
.skip:focus { transform: none; }
.loading { padding: 60px var(--pad); }
.site-header { position: sticky; top: 0; z-index: 5; background: #10120ef5; border-bottom: 1px solid #33372b; }
.header-inner { min-height: 75px; display: flex; gap: 24px; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 23px; font-weight: 880; letter-spacing: -.065em; white-space: nowrap; line-height: 1; }
.brand img { width: 32px; height: 32px; }
.primary-nav { display: flex; align-items: center; gap: clamp(20px, 3.4vw, 49px); font-weight: 620; font-size: 14px; color: var(--muted); }
.primary-nav a:hover, .primary-nav [aria-current] { color: var(--acid); }
.header-actions { display: flex; gap: 12px; align-items: center; }
.language { padding: 8px 9px; display: inline-flex; gap: 6px; align-items: center; background: transparent; border: 0; font-size: 13px; color: var(--muted); }
.language:hover { color: var(--ink); }
.button { min-height: 46px; display: inline-flex; justify-content: center; align-items: center; gap: 10px; padding: 0 17px; border: 1px solid transparent; border-radius: 4px; font-size: 14px; font-weight: 760; line-height: 1.3; }
.button:hover { filter: brightness(1.1); }
.button-primary { background: var(--acid); color: var(--dark); }
.button-primary:hover { background: #e7ff75; }
.button-outline { background: #171a15; border-color: #575e4f; color: var(--ink); }
.button-outline:hover { border-color: var(--acid); }
.button-small { min-height: 38px; padding-inline: 13px; }
.hero { isolation: isolate; min-height: clamp(460px, 38vw, 610px); position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: #151912; display: grid; align-items: center; }
.hero-photo { position: absolute; inset: 0 0 0 auto; width: 69%; height: 100%; object-fit: cover; object-position: center 51%; z-index: -3; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, #151912 16%, #151912 29%, #151912ef 39%, #15191258 61%, #10140d0d 90%), linear-gradient(0deg, #11150fe6, transparent 33%); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .3; background-image: linear-gradient(#d5e9b527 1px, transparent 1px), linear-gradient(90deg, #d5e9b527 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(90deg, black, transparent 62%); pointer-events: none; }
.hero-inner { position: relative; padding-block: 74px 95px; }
.hero-content { max-width: min(56%, 610px); }
.hero h1 { font-weight: 880; font-size: clamp(54px, 6.3vw, 94px); line-height: .99; letter-spacing: -.07em; margin-block: 23px; }
.hero h1 span { color: var(--acid); display: block; }
:lang(zh-CN) .hero h1 { letter-spacing: -.06em; line-height: 1.08; }
.hero-desc { color: #d1d6c9; font-size: clamp(15px, 1.35vw, 18px); max-width: 460px; }
.actions { display: flex; gap: 11px; flex-wrap: wrap; align-items: center; }
.hero .actions { margin-top: 28px; }
.hero-caption { position: absolute; bottom: 24px; right: max(var(--pad), calc((100vw - var(--wrap)) / 2)); display: inline-flex; gap: 8px; align-items: center; color: #f3f5ea; background: #11150de6; padding: 9px 12px; border: 1px solid #bfc7b360; border-radius: 4px; font-size: 12px; }
.hero-caption:hover { color: var(--acid); }
.catalog, .applications, .technology { padding-block: 60px; }
.section-head { display: flex; gap: 24px; align-items: end; justify-content: space-between; margin-bottom: 26px; }
.section-head h2, .section-title { font-size: clamp(32px, 4vw, 52px); letter-spacing: -.045em; margin-top: 9px; font-weight: 840; }
.section-head p:not(.eyebrow) { color: var(--muted); font-size: 14px; margin-top: 10px; }
.search { position: relative; min-width: min(100%, 310px); align-self: end; }
.search svg { position: absolute; top: 15px; left: 14px; color: var(--muted); pointer-events: none; }
.search input { width: 100%; min-height: 46px; color: var(--ink); padding: 10px 14px 10px 40px; background: #1b1e19; border: 1px solid var(--line); border-radius: 4px; font-size: 14px; }
.search input::placeholder { color: #a5ad9d; }
.filter-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; padding-block: 0 18px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filter { min-height: 37px; border: 1px solid var(--line); border-radius: 4px; background: #191c17; padding: 6px 13px; font-size: 13px; font-weight: 680; white-space: nowrap; }
.filter[aria-pressed="true"] { color: var(--acid); border-color: #a6b846; background: #2a311b; }
.filter:hover { border-color: var(--acid); }
.result-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.product-card { background: var(--panel); border: 1px solid var(--line); border-radius: 7px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.product-card:hover { border-color: #737f45; }
.card-photo { position: relative; display: block; aspect-ratio: 1.52; background: #e9eae5; overflow: hidden; }
.card-photo img { height: 100%; object-fit: contain; }
.card-photo:focus-visible { outline-offset: -4px; }
.category-chip { position: absolute; z-index: 1; top: 13px; left: 13px; padding: 5px 9px; color: var(--acid); background: #252b1f; font-size: 11px; font-weight: 760; border-radius: 3px; }
.card-info { flex: 1; display: flex; flex-direction: column; gap: 9px; padding: 17px; }
.card-info h3 { font-size: 19px; line-height: 1.35; font-weight: 790; }
.card-info h3 a:hover { color: var(--acid); }
.card-original { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.45; }
.facts { display: flex; gap: 6px; flex-wrap: wrap; padding-block: 3px; }
.fact { background: #252a21; color: #d9dfce; border: 1px solid #363e32; border-radius: 3px; padding: 3px 7px; font-size: 11px; }
.card-bottom { margin-top: auto; padding-top: 12px; display: flex; gap: 8px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); }
.price { font-weight: 790; color: var(--ink); }
.card-bottom .price { font-size: 15px; overflow-wrap: anywhere; }
.card-link { color: var(--acid); display: inline-flex; gap: 5px; align-items: center; font-size: 13px; font-weight: 700; white-space: nowrap; }
.card-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.more { margin-top: 24px; display: flex; justify-content: center; }
.empty { padding: 32px 18px; border: 1px solid var(--line); color: var(--muted); grid-column: 1 / -1; border-radius: 4px; }
.series-source { margin-top: 20px; font-size: 13px; color: var(--muted); }
.series-source a { color: var(--acid); display: inline-flex; gap: 5px; align-items: center; }
.series-source a:hover { text-decoration: underline; }
.applications { background: #151912; border-block: 1px solid var(--line); }
.scene-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.scene { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #1b2018; display: flex; flex-direction: column; }
.scene-photo { width: 100%; aspect-ratio: 1.82; object-fit: cover; object-position: center 44%; background: #242a20; }
.scene-info { display: grid; gap: 8px; padding: 18px; flex: 1; }
.scene-info p { font-size: 13px; color: var(--muted); }
.scene-info .card-link { justify-self: start; align-self: end; }
.tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tech-card { padding: 22px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); display: grid; gap: 11px; }
.tech-card > svg { color: var(--acid); width: 26px; height: 26px; }
.tech-card p { color: var(--muted); font-size: 14px; }
.home-contact { border-top: 1px solid var(--line); padding: 40px 0; background: #1e2516; }
.home-contact .wrap { display: flex; gap: 20px; align-items: center; justify-content: space-between; }
.home-contact h2 { font-size: clamp(25px, 3.2vw, 38px); }
.home-contact p { color: var(--muted); margin-top: 8px; }
.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.footer-inner { min-height: 105px; padding-block: 18px; display: flex; gap: 18px; align-items: center; justify-content: space-between; }
.footer-brand { color: var(--ink); }
.footer-inner .brand { font-size: 18px; }
.footer-inner .brand img { width: 25px; height: 25px; }
.footer-inner a:last-child:hover { color: var(--acid); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-block: 24px; color: var(--muted); font-size: 13px; }
.breadcrumb a:hover { color: var(--acid); }
.product-page, .inquiry-page { padding-bottom: 75px; }
.product-lead { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(22px, 4.5vw, 65px); align-items: start; }
.gallery-focus { padding: 0; border: 1px solid var(--line); border-radius: 6px; width: 100%; position: relative; background: #f0f0ee; overflow: hidden; display: block; }
.gallery-focus img { width: 100%; aspect-ratio: 1.25; object-fit: contain; }
.zoom { position: absolute; inset: auto 10px 10px auto; display: grid; place-items: center; background: #1b211c; border: 1px solid #5f6859; color: var(--ink); border-radius: 4px; width: 34px; height: 34px; }
.thumbnails { margin-top: 11px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.thumbnail { padding: 2px; border: 1px solid #62695a; background: #e9ebe6; border-radius: 4px; }
.thumbnail[aria-pressed="true"] { border: 2px solid var(--acid); padding: 1px; }
.thumbnail img { aspect-ratio: 1; object-fit: contain; }
.product-intro { padding-block: 6px; }
.product-intro h1, .inquiry-page h1 { font-size: clamp(29px, 4vw, 51px); letter-spacing: -.045em; line-height: 1.16; margin-block: 11px; overflow-wrap: anywhere; }
.product-original { color: #d4dbcb; font-size: 15px; }
.product-summary { color: var(--muted); font-size: 14px; margin-top: 13px; }
.detail-facts { margin-block: 15px; }
.detail-facts .fact { font-size: 13px; }
.quote-box { margin-block: 16px; padding: 13px 15px; background: var(--panel); border: 1px solid var(--line); border-radius: 5px; display: flex; flex-wrap: wrap; gap: 6px 15px; align-items: baseline; }
.quote-box .price { font-size: 25px; }
.quote-box .muted { font-size: 12px; }
.quote-box .price-label { width: 100%; }
.notice { margin-block: 18px; padding: 12px 14px; border-left: 3px solid #d5b56a; color: #e4d7b7; background: #272318; font-size: 13px; }
.notice strong { display: block; margin-bottom: 4px; }
.detail-nav { margin-block: 31px 25px; padding-block: 12px; border-block: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 24px; }
.detail-nav a { color: var(--acid); font-size: 13px; font-weight: 700; }
.detail-nav a:hover { text-decoration: underline; }
.detail-section { margin-block: 30px; }
.detail-section h2 { font-size: clamp(25px, 3.1vw, 38px); letter-spacing: -.04em; margin-bottom: 12px; }
.detail-section > p { color: var(--muted); font-size: 14px; margin-bottom: 10px; }
.spec-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; align-items: start; }
.data-box { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; min-width: 0; }
.data-box h3, .data-box summary { padding: 13px 15px; font-size: 16px; font-weight: 750; }
.data-box summary { cursor: pointer; }
.data-box[open] summary { border-bottom: 1px solid var(--line); }
.data-box + .data-box { margin-top: 0; }
table { border-collapse: collapse; width: 100%; font-size: 13px; text-align: left; table-layout: fixed; }
th, td { padding: 9px 14px; border-top: 1px solid #30372e; overflow-wrap: anywhere; white-space: pre-line; vertical-align: top; }
th { color: var(--muted); font-weight: 590; width: 47%; }
td { color: var(--ink); }
.source-copy { padding: 12px 17px 16px; font-size: 14px; color: #e3e6de; }
.source-copy ul { padding-inline-start: 18px; margin: 0; }
.source-copy li + li { margin-top: 8px; }
.source-copy details { border-bottom: 1px solid var(--line); padding-block: 10px; }
.source-copy summary { padding: 0; font-size: 14px; }
.source-copy details p { color: var(--muted); margin-top: 6px; }
.inquiry-grid { display: grid; grid-template-columns: 1.3fr .9fr; gap: clamp(16px, 4vw, 44px); margin-top: 25px; align-items: start; }
.inquiry-card { border: 1px solid var(--line); border-radius: 7px; padding: clamp(16px, 2.5vw, 29px); background: var(--panel); }
.inquiry-card h2 { font-size: 22px; margin-bottom: 13px; }
.form { display: grid; gap: 15px; }
.form label { display: grid; gap: 5px; font-size: 14px; font-weight: 650; min-width: 0; }
.form label small { color: var(--muted); font-size: 12px; font-weight: 400; }
.form :is(input,select,textarea), .draft-text { width: 100%; min-width: 0; color: var(--ink); background: #11140f; padding: 10px 11px; border: 1px solid #535d4e; border-radius: 4px; font-size: 14px; }
.form select { min-height: 44px; text-overflow: ellipsis; }
.form textarea, .draft-text { resize: vertical; }
.form .button { justify-self: start; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-selection { margin: -5px 0 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.draft-text { margin-top: 13px; font-size: 13px; }
.inquiry-card .actions { margin-top: 12px; }
.inquiry-card .muted { font-size: 14px; }
.inquiry-hint { margin-top: 12px; font-size: 13px; }
.draft-status { min-height: 1.5em; margin-top: 8px; color: var(--acid); font-size: 13px; }
.lightbox { padding: 12px; background: #171b14; color: var(--ink); border: 1px solid #646e59; border-radius: 6px; max-width: min(96vw, 880px); }
.lightbox::backdrop { background: #030503dc; }
.lightbox img { max-height: 75vh; width: auto; max-width: 100%; margin-inline: auto; object-fit: contain; }
.lightbox-controls { display: flex; justify-content: space-between; align-items: center; gap: 7px; margin-top: 8px; }
.lightbox-controls .button { min-height: 36px; }
@media (max-width: 920px) {
  .hero-photo { width: 75%; }
  .hero::before { background: linear-gradient(90deg, #151912 14%, #151912 27%, #151912d9 44%, #15191226 83%), linear-gradient(0deg, #11150fe6, transparent 30%); }
  .header-inner { gap: 15px; }
  .primary-nav { gap: 17px; }
  .cards { gap: 12px; }
  .card-info { padding: 12px; }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 119px; }
  .header-inner { flex-wrap: wrap; min-height: 0; padding-top: 10px; gap: 0; }
  .header-inner .brand { font-size: 20px; }
  .brand img { width: 28px; height: 28px; }
  .header-actions { gap: 5px; }
  .primary-nav { order: 3; min-width: 100%; justify-content: space-between; padding-block: 11px 9px; margin-top: 6px; border-top: 1px solid var(--line); }
  .hero { min-height: 0; align-items: end; }
  .hero-photo { width: 100%; height: 75%; object-position: center 39%; }
  .hero::before { background: linear-gradient(0deg, #151912 17%, #151912f0 28%, #15191282 50%, #1519120a 81%), linear-gradient(90deg, #15191233, transparent 70%); }
  .hero-inner { padding-block: clamp(185px, 46vw, 245px) 68px; }
  .hero-content { max-width: 100%; }
  .hero h1 { font-size: clamp(46px, 10vw, 66px); margin-block: 13px; }
  .hero-caption { bottom: 14px; }
  .hero .actions { margin-top: 19px; }
  .catalog, .applications, .technology { padding-block: 46px; }
  .section-head { align-items: start; flex-direction: column; gap: 14px; margin-bottom: 18px; }
  .search { width: 100%; }
  .cards, .scene-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-lead, .inquiry-grid, .spec-groups { grid-template-columns: 1fr; }
  .tech-grid { grid-template-columns: 1fr; }
  .footer-inner { flex-wrap: wrap; }
}
@media (max-width: 425px) {
  .cards, .scene-grid { grid-template-columns: 1fr; }
  .card-info { padding: 15px; }
  .home-contact .wrap { align-items: start; flex-direction: column; }
  .lightbox-controls .button { padding-inline: 9px; }
}

.company-teaser {
  background: #151912;
  border-block: 1px solid var(--line);
  padding-block: clamp(32px, 5vw, 66px);
}
.company-teaser-grid, .company-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 58px);
  align-items: center;
}
.company-teaser-photo {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.company-teaser-photo img { aspect-ratio: 1.85; object-fit: cover; height: auto; }
.company-play {
  position: absolute;
  inset: auto auto 12px 12px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  background: #151912f0;
  color: var(--acid);
  border: 1px solid #7d8a47;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
}
.company-teaser .muted, .company-intro .muted { margin-block: 13px 20px; max-width: 53ch; }
.company-page { padding-bottom: 55px; }
.company-page figure { margin: 0; min-width: 0; }
.company-intro { margin-top: 28px; }
.company-intro h1 {
  font-size: clamp(36px, 5.5vw, 74px);
  font-weight: 870;
  letter-spacing: -.055em;
  margin-block: 10px 14px;
}
.company-legal { font-size: 16px; font-weight: 670; }
.company-intro figure, .company-tour, .company-photo, .company-clips figure {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  overflow: hidden;
}
.company-intro img { aspect-ratio: 1.65; object-fit: cover; height: auto; }
.company-page figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  color: #e1e4d9;
  font-size: 13px;
}
.company-page figcaption .mono { color: var(--muted); white-space: nowrap; }
.company-nav { margin-top: clamp(24px, 4vw, 50px); }
.company-section { padding-block: clamp(25px, 4vw, 49px); }
.company-section + .company-section { border-top: 1px solid var(--line); }
.company-video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.company-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #0b0d0b;
}
.company-photos, .company-clips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.company-clips {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 19px;
}
.company-photo { display: flex; flex-direction: column; }
.company-photo a { display: block; background: #10130e; overflow: hidden; }
.company-photo a:hover { filter: brightness(1.12); }
.company-photo a:focus-visible { outline-offset: -4px; }
.company-photo img { aspect-ratio: 1.58; object-fit: cover; }
.company-photo-doc img { object-fit: contain; }
.company-subheading { margin-block: 28px 14px; font-size: clamp(21px, 3vw, 29px); }
.company-certificate-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.company-document-media { display: grid; gap: 14px; min-width: 0; }
.company-documents { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.company-documents .company-photo img { aspect-ratio: .75; }
.company-documents .company-photo:first-child img { background: #c1c7d0; }
.company-report-panel {
  padding: clamp(15px, 2.4vw, 27px);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}
.company-report-panel h3 { font-size: 19px; }
.company-report-panel .muted { margin-block: 14px; font-size: 13px; }
.company-reports { margin: 12px 0 0; }
.company-reports > div { display: grid; grid-template-columns: 85px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.company-reports dt { font-weight: 760; color: var(--acid); }
.company-reports dd { margin: 0; overflow-wrap: anywhere; }
.company-reports dd span { display: block; }
.company-reports dd span + span { color: var(--muted); }
@media (max-width: 1060px) {
  .primary-nav { gap: 14px; }
  .company-clips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .primary-nav { gap: 8px; font-size: 12px; flex-wrap: wrap; }
  .company-teaser-grid, .company-intro, .company-video-grid, .company-certificate-grid { grid-template-columns: 1fr; }
  .company-teaser-photo { grid-row: 2; }
  .company-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .company-intro h1 { margin-block: 8px 12px; }
}
@media (max-width: 375px) {
  .company-documents { grid-template-columns: 1fr; }
}
@media (max-width: 425px) {
  .header-actions .language { padding-inline: 5px; }
  .header-actions .button { padding-inline: 10px; font-size: 12px; }
}