:root{
  --color-primary-lighter:#f43f5e;
  --color-primary:#c8102e;
  --color-primary-darker:#a50d26;
  --color-primary-darkest:#111928;
  --color-secondary:#f7f8fa;
  --color-secondary-darker:#637381;
  --color-track:#c8102e;
  --color-shadow:#a6afc366;
  --color-brand:#c8102e;
  --color-hairline:#e6e9ee;
  --color-primary-a35:rgba(200,16,46,.35);

  --ev-container:1250px;
  --ev-font:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,
            'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
  --ev-mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,'Liberation Mono',monospace;
}

html[data-ev="blue"]{
  --color-primary-lighter:#5cb1e8;
  --color-primary:#0d81be;
  --color-primary-darker:#143e8b;
  --color-track:#15b8ca;
  --color-primary-a35:rgba(13,129,190,.35);
}

/* Self-hosted Inter, font-display:swap. Inter carries no CJK glyphs, so Chinese
   renders from the system fonts later in the stack (PingFang SC / Microsoft YaHei). */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/Inter-Regular.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/Inter-Medium.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/Inter-SemiBold.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/Inter-Bold.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/Inter-ExtraBold.woff2') format('woff2')}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--ev-font);
  font-size:1rem;
  line-height:1.6;
  color:var(--color-primary-darkest);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,h5{
  font-family:var(--ev-font);
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--color-primary-darkest);
}
a{color:var(--color-primary)}
strong,b{font-weight:600}
img{max-width:100%;height:auto}

.container{max-width:var(--ev-container);margin:0 auto;padding:0 2rem}
.section{padding:5rem 0}
.section.alt{background:var(--color-secondary)}

.section-title{
  font-size:2.25rem;
  line-height:3rem;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--color-primary-darkest);
  text-align:center;
  margin:0 0 1rem;
}
.section-subtitle{
  font-size:1rem;
  line-height:1.5rem;
  font-weight:400;
  color:var(--color-secondary-darker);
  text-align:center;
  text-transform:none;
  letter-spacing:0;
  margin:0 0 3.5rem;
}

.topbar{
  background:linear-gradient(90deg,var(--color-primary) 0%,var(--color-primary-darker) 100%);
  color:#fff;
  font-size:.875rem;
  line-height:1.375rem;
  font-weight:500;
  padding:0;
  border-bottom:0;
}
.topbar-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;min-height:2.8125rem;
}
.topbar-left{display:flex;align-items:center;gap:1.5rem;min-width:0}
.topbar a{color:#fff;text-decoration:none;opacity:.95}
.topbar a:hover{color:#fff;opacity:1}

/* Dark gradient topbar, so the toggle stays white-on-dark. Its light-background
   twin lives in bestfeeder.css -- change the two together. */
.topbar .lang-toggle{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.36);color:#fff}
.topbar .lang-toggle:hover,.topbar .lang-toggle:focus-visible{
  background:rgba(255,255,255,.26);border-color:#fff;color:#fff;
}
.topbar .lang-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}

.navbar{
  position:sticky;top:0;z-index:1000;
  height:auto;min-height:4.75rem;
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(17,25,40,.07);
  box-shadow:none;
}
.navbar .container{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.25rem;height:auto;min-height:4.75rem;
}
.navbar .logo{flex:0 0 auto;display:flex;align-items:center}
.navbar .logo img{height:40px!important;width:auto}

.navbar .nav-links{display:flex;align-items:center;gap:1.35rem}
.navbar .nav-links a{
  font-size:.95rem;
  font-weight:600;
  color:var(--color-secondary-darker);
  text-transform:none;
  letter-spacing:0;
  padding:.35rem 0;
  position:relative;
  white-space:nowrap;
  transition:color .25s ease;
}
.navbar .nav-links a:hover,
.navbar .nav-links a.active{color:var(--color-primary-darkest)}
.navbar .nav-links a::after{
  bottom:-4px;height:2px;
  background:var(--color-primary);
  transition:width .3s ease;
}
.navbar .nav-links a:hover::after,
.navbar .nav-links a.active::after{width:100%;background:var(--color-primary)}

.navbar .nav-links .btn-quote{
  padding:.6875rem 1.5rem!important;
  background:var(--color-primary);
  color:#fff!important;
  border:1px solid var(--color-primary);
  border-radius:.375rem;
  font-size:.95rem;font-weight:500;
  transition:background .3s ease,border-color .3s ease;
}
.navbar .nav-links .btn-quote:hover{background:var(--color-primary-darker);border-color:var(--color-primary-darker)}
.navbar .nav-links .btn-quote::after{display:none}

.navbar .menu-toggle span{background:var(--color-primary-darkest)}

/* ===== 主导航下拉组（2026-10-07）=====
   12 个平铺项 + logo + 搜索框在 1280px 实测需 ~1690px，必然横向溢出；
   现收纳为「产品 / 资源」两组下拉，一级项 7 个。下拉桌面靠 :hover 展开，
   键盘靠 :focus-within；窄屏（≤1279px 汉堡菜单）里子项直接展开成缩进列表。 */
.navbar .nav-dd-trigger{
  display:inline-flex;align-items:center;gap:.25rem;
  cursor:pointer;font-size:.95rem;font-weight:600;
  color:var(--color-secondary-darker);letter-spacing:0;text-transform:none;
  padding:.35rem 0;white-space:nowrap;
}
.navbar .nav-dd-trigger:hover{color:var(--color-primary-darkest)}
.navbar .nav-dd-caret{font-size:.6rem;line-height:1;opacity:.65;transition:transform .2s ease}
.navbar .nav-dropdown:hover .nav-dd-caret,
.navbar .nav-dropdown:focus-within .nav-dd-caret{transform:rotate(180deg)}
.navbar .nav-dd-menu{
  top:100%;margin-top:.5rem;min-width:200px;padding:.375rem;
  border:1px solid var(--color-hairline);border-radius:.5rem;
  box-shadow:0 14px 30px rgba(15,23,42,.12);
}
.navbar .nav-dd-menu a{
  padding:.55rem .75rem;font-size:.875rem;font-weight:500;
  border-radius:.375rem;border-bottom:0;
}
.navbar .nav-dd-menu a::after{display:none}
.navbar .nav-dropdown:focus-within .nav-dd-menu{display:block}

.btn-primary,.bx-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.75rem 1.75rem;
  border-radius:.375rem;
  background:var(--color-primary);
  border:1px solid var(--color-primary);
  color:#fff!important;
  font-size:1rem;font-weight:500;line-height:1.5;
  text-transform:none;letter-spacing:0;white-space:nowrap;cursor:pointer;
  box-shadow:none;transform:none;
  transition:background .3s ease,border-color .3s ease;
}
.btn-primary:hover,.bx-primary:hover{
  background:var(--color-primary-darker);
  border-color:var(--color-primary-darker);
  color:#fff!important;transform:none;box-shadow:none;
}
.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.75rem 1.75rem;
  border-radius:.375rem;
  background:#fff;
  border:1px solid var(--color-primary);
  color:var(--color-primary)!important;
  font-size:1rem;font-weight:500;line-height:1.5;
  text-transform:none;letter-spacing:0;
  transition:color .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.btn-outline:hover{
  background:#fff;
  color:var(--color-primary)!important;
  border-color:var(--color-primary);
  box-shadow:0 0 0 .125rem var(--color-primary);
  transform:none;
}

.bx-hero{
  position:relative;
  display:flex;align-items:center;
  min-height:33.5rem;
  padding:5rem 0;
  color:#fff;
  overflow:hidden;
  background-color:var(--color-primary-darkest);
  background-image:
    linear-gradient(180deg,rgba(17,25,40,.34) 0%,rgba(17,25,40,.58) 100%),
    url('/images/products/hero-feeder-detail.jpg');
  background-position:50% 50%,50% 50%;
  background-repeat:no-repeat,no-repeat;
  background-size:cover,cover;
}
.bx-hero::before,.bx-hero::after{display:none}

.bx-hero > .container{
  position:relative;z-index:2;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:3.5rem;
}
.bx-hero-grid{display:block;max-width:56.3125rem;margin:0 auto;text-align:center}
.bx-hero-copy{text-align:center}
.bx-hero-media{display:none}

.bx-hero .bx-eyebrow{
  display:block;
  font-family:var(--ev-font);
  font-size:1rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.85);
  margin:0 0 1.25rem;
}
.bx-hero .bx-eyebrow::before{display:none}

.bx-hero h1{
  font-size:3.75rem;
  line-height:1.13;
  font-weight:800;
  letter-spacing:-.02em;
  color:#fff;
  margin:0 0 1.5rem;
  text-shadow:0 4px 4px rgba(0,0,0,.25);
}
.bx-hero .bx-lead{
  font-size:1.25rem;
  line-height:1.85;
  font-weight:400;
  color:rgba(255,255,255,.93);
  max-width:52rem;
  margin:0 auto 2rem;
  text-shadow:0 2px 4px rgba(0,0,0,.25);
}
.bx-hero .bx-cta{
  display:flex;flex-direction:row;flex-wrap:wrap;
  gap:1.5625rem;align-items:center;justify-content:center;
}
.bx-hero .bx-cta a{box-shadow:none;transform:none}
.bx-hero .bx-cta .bx-primary{
  background:var(--color-primary);border-color:var(--color-primary);color:#fff;
}
.bx-hero .bx-cta .bx-primary:hover{
  background:var(--color-primary-darker);border-color:var(--color-primary-darker);transform:none;
}
.bx-hero .bx-cta .bx-ghost{
  background:transparent;border:1px solid rgba(255,255,255,.6);color:#fff;
}
.bx-hero .bx-cta .bx-ghost:hover{
  background:rgba(255,255,255,.14);border-color:#fff;color:#fff;
}

.bx-hero .bx-facts{
  display:flex;align-items:stretch;justify-content:center;
  gap:0;
  width:100%;max-width:56.3125rem;
  margin:0;
  padding:1.25rem .5rem;
  background-color:#00000096;
  border:2px solid var(--color-primary);
  border-radius:1rem;
}
.bx-hero .bx-fact{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex:1 1 0;min-width:0;
  padding:.5rem .75rem;
  border-right:0;border-bottom:0;
}
.bx-hero .bx-fact:not(:first-child){border-left:2px solid #fff}
.bx-hero .bx-fact b{
  display:block;
  font-family:var(--ev-font);
  font-size:2.25rem;
  line-height:1.15;
  font-weight:600;
  letter-spacing:-.01em;
  color:#fff;
  white-space:nowrap;
}
.bx-hero .bx-fact span{
  display:block;
  font-size:1rem;line-height:1.35;
  font-weight:400;color:#fff;
  text-align:center;margin-top:.25rem;
}

.bx-dark{
  position:relative;
  background:var(--color-secondary);
  color:var(--color-primary-darkest);
  padding:5rem 0;
  border-top:0;border-bottom:0;
}
.bx-dark::before{display:none}
.bx-dark .section-title{color:var(--color-primary-darkest)}
.bx-dark .section-subtitle{color:var(--color-secondary-darker)}

.bx-lines{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:1.875rem;
}
/* Hover grows a 0 -> 3px outer box-shadow ring instead of the border, so the box
   never reflows. */
.bx-line{
  position:relative;
  display:flex;flex-direction:column;
  background:#fff;
  border:1px solid var(--color-primary);
  border-radius:.375rem;
  overflow:hidden;
  color:var(--color-primary-darkest);
  text-decoration:none;transform:none;
  box-shadow:0 0 0 0 var(--color-primary),0 .0625rem .1875rem var(--color-shadow);
  transition:box-shadow .3s ease;
}
.bx-line::before{display:none}
.bx-line:hover{
  transform:none;
  border-color:var(--color-primary);
  box-shadow:0 0 0 .1875rem var(--color-primary),0 .0625rem .1875rem var(--color-shadow);
}
.bx-line-media{aspect-ratio:4/3;background:var(--color-secondary);overflow:hidden}
.bx-line-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease;
}
.bx-line:hover .bx-line-media img{transform:scale(1.04)}
.bx-line-body{padding:1.5rem 1.5rem 1.75rem;display:flex;flex-direction:column;flex:1}
.bx-line h3{
  font-size:1.375rem;line-height:1.75rem;font-weight:700;
  color:var(--color-primary-darkest);margin:0 0 .75rem;
}
.bx-line p{
  font-size:1rem;line-height:1.5rem;font-weight:400;
  color:var(--color-secondary-darker);margin:0 0 1rem;flex:1;
}
.bx-line .bx-line-meta{
  font-family:var(--ev-font);
  font-size:.9375rem;font-weight:600;letter-spacing:0;
  color:var(--color-primary);
}

.advantages-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1.875rem;
  counter-reset:ev-adv;
}
.advantage-item{
  text-align:left;transform:none;
  padding:2.25rem 1.75rem;
  background:#fff;
  border:1px solid var(--color-hairline);
  border-radius:.375rem;
  box-shadow:0 .0625rem .1875rem var(--color-shadow);
  transition:box-shadow .3s ease,border-color .3s ease;
}
.advantage-item:hover{
  transform:none;
  border-color:var(--color-primary);
  box-shadow:0 0 0 .1875rem var(--color-primary),0 .0625rem .1875rem var(--color-shadow);
}
.advantage-item::before{
  counter-increment:ev-adv;
  content:counter(ev-adv,decimal-leading-zero);
  display:flex;align-items:center;justify-content:center;
  width:4.25rem;height:4.25rem;
  margin:0 0 1.5rem;
  background:var(--color-primary);
  color:#fff;
  border-radius:1.25rem;
  font-size:1.5rem;font-weight:700;line-height:1;
}
.advantage-item h3,.advantage-item h4{
  font-size:1.375rem;line-height:1.75rem;font-weight:700;
  color:var(--color-primary-darkest);margin:0 0 .75rem;
}
.advantage-item p{
  font-size:1rem;line-height:1.5rem;font-weight:400;
  color:var(--color-secondary-darker);margin:0;
}

.bx-spec-wrap{
  overflow-x:auto;margin:1.5rem 0 2rem;
  border:1px solid var(--color-hairline);border-radius:.375rem;
  box-shadow:0 .0625rem .1875rem var(--color-shadow);
}
table.bx-spec{width:100%;border-collapse:collapse;font-size:.9375rem;min-width:640px;background:#fff}
table.bx-spec th,table.bx-spec td{
  padding:.875rem 1.125rem;
  border-bottom:1px solid var(--color-hairline);
  text-align:left;vertical-align:top;line-height:1.5;
}
table.bx-spec thead th{
  background:var(--color-secondary);
  font-weight:700;color:var(--color-primary-darkest);
  border-bottom:1px solid var(--color-hairline);
}
table.bx-spec tbody tr:last-child td{border-bottom:0}
table.bx-spec tbody tr:hover{background:#fafbfd}
td.bx-num{white-space:nowrap;font-variant-numeric:tabular-nums}
/* 型号单元格不折行：LFYAMAHA-32 YS 这类「型号 + 后缀」必须在同一行 */
table.bx-spec td.bx-hl{white-space:nowrap}
.bx-hl{color:var(--color-primary);font-weight:600}
.bx-group{
  font-size:.9375rem;font-weight:700;
  margin:1.75rem 0 .625rem;padding-left:.75rem;
  border-left:3px solid var(--color-primary);
}
.bx-note{
  background:var(--color-secondary);
  border-left:3px solid var(--color-primary);
  padding:.875rem 1rem;border-radius:0 .375rem .375rem 0;
  font-size:.9375rem;line-height:1.6;color:var(--color-secondary-darker);
}
.bx-ph{
  border:1px dashed var(--color-hairline);border-radius:.375rem;
  background:var(--color-secondary);min-height:180px;
}
.bx-hl-list{list-style:none;display:grid;gap:.5625rem;padding:0;margin:0}
.bx-hl-list li{
  padding-left:1.625rem;font-size:.9375rem;line-height:1.6;
  color:var(--color-primary-darkest);
}
.bx-hl-list li::before{content:"★";color:var(--color-primary);font-size:.9em}

.bx-faq{display:grid;gap:1.25rem;max-width:56.3125rem;margin:0 auto}
.bx-faq-item{
  padding:1.5rem 1.75rem;
  background:#fff;
  border:2px solid var(--color-primary);
  border-radius:.75rem;
  outline:0 solid transparent;
  transition:outline .3s ease,box-shadow .3s ease;
}
.bx-faq-item:first-child{padding-top:1.5rem;border-top:2px solid var(--color-primary)}
.bx-faq-item:hover{
  outline:.0625rem solid var(--color-primary);
  box-shadow:0 .0625rem .1875rem var(--color-shadow);
}
.bx-faq-item h3{
  font-size:1.125rem;line-height:1.5;font-weight:600;
  color:var(--color-primary-darkest);margin:0 0 .625rem;
}
.bx-faq-item h3::before{display:none}
.bx-faq-item p{
  font-size:1rem;line-height:1.7;font-weight:400;
  color:var(--color-secondary-darker);margin:0;
}

.breadcrumb{
  background:#fff;
  border-bottom:1px solid var(--color-hairline);
  padding:.6875rem 0;
  font-size:.8125rem;line-height:1.4;
}
.breadcrumb .container{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}
.breadcrumb a{color:var(--color-secondary-darker);text-decoration:none;transition:color .25s ease}
.breadcrumb a:hover,.breadcrumb a:focus-visible{color:var(--color-primary-darkest)}
.breadcrumb .bc-sep{color:#94a3b8}
.breadcrumb .bc-current{color:var(--color-primary-darkest)}

.page-header{
  position:relative;
  background:var(--color-secondary);
  color:var(--color-primary-darkest);
  text-align:center;
  padding:4rem 0 3.25rem;
  border-bottom:1px solid var(--color-hairline);
  overflow:hidden;
}
.page-header::before{display:none}
.page-header > .container{position:relative;z-index:2}
.page-header h1{
  font-size:2.25rem;line-height:1.25;font-weight:700;
  color:var(--color-primary-darkest);margin:0 0 .75rem;
}
.page-header .section-subtitle{
  color:var(--color-secondary-darker);
  margin:0 auto;font-size:1rem;
  text-transform:none;letter-spacing:0;
}
/* 2026-09-24 全站页头改版：从「浅色居中色带」改成「满幅背景照片 + 文字压图 + 蒙版」。
   老板要求所有 banner 区域都要有背景照片；改版前 542 页里 378 个页头是纯色带
   （324 个型号页 + 54 个栏目/简单页）。取图规则见 layouts/partials/pagehero.html，
   图由 _build_scripts/prepare_banners.py 从照片库生成。
   没配到图的页面不带 .has-photo，继续走上面那套浅色居中样式，不会坏版。
   放在 event.css 是因为它最后加载、同特异性必胜（见本文件顶部说明）。
   上一版（2026-09-24 早些时候）这里临时恢复过 tech.css 的两栏 .bx-pagehero-grid 主图，
   那套左文右图结构已随本次改版整块废弃，相关规则也一并删掉了。 */
.page-header.has-photo{
  background:var(--color-primary-darkest);
  color:#fff;
  text-align:left;
  padding:5rem 0 4.5rem;
  min-height:clamp(260px,30vw,400px);
  display:grid;
  align-content:center;
  border-bottom:0;
}
/* 蒙版：左侧压暗保证标题可读，右侧留亮让照片透出来。
   这里必须复位 tech.css 给 .page-header::before 的网格 background-image 与 mask-image，
   否则网格纹会跟蒙版叠在一起。 */
.page-header.has-photo::before{
  display:block;
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background-image:linear-gradient(90deg,
    rgba(6,12,22,.92) 0%,
    rgba(6,12,22,.74) 40%,
    rgba(6,12,22,.30) 100%);
  background-size:auto;
  -webkit-mask-image:none;
  mask-image:none;
  pointer-events:none;
}
.page-header.has-photo > .container{position:relative;z-index:2}
.page-header.has-photo h1{
  color:#fff;
  font-size:2.35rem;
  margin:0 0 .75rem;
  text-shadow:0 2px 18px rgba(4,9,17,.6);
}
.page-header.has-photo .section-subtitle{
  color:rgba(255,255,255,.88);
  margin:0;
  text-shadow:0 1px 12px rgba(4,9,17,.55);
}
/* 满幅背景照片本身：绝对定位铺满页头，object-fit 保证不拉伸变形。
   装饰性图片，模板里 alt 留空 + aria-hidden，读屏软件不会念它。 */
.bx-pagehero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
}
@media(max-width:900px){
  .page-header.has-photo{padding:3.25rem 0 3rem;min-height:0}
  .page-header.has-photo::before{
    background-image:linear-gradient(180deg,rgba(6,12,22,.55) 0%,rgba(6,12,22,.90) 100%);
  }
  .page-header.has-photo h1{font-size:1.8rem}
}

.content-section{padding:3.75rem 0}
.content-section.alt{background:var(--color-secondary)}
.content-body{font-size:1rem;line-height:1.7;color:var(--color-secondary-darker)}
.content-body h2,.content-body h3,.content-body h4{
  color:var(--color-primary-darkest);
  font-weight:700;margin:2.25rem 0 1rem;
}
.content-body p{margin:0 0 1.125rem}
.content-body a{color:var(--color-primary);text-decoration:none;border-bottom:1px solid var(--color-primary-a35)}
.content-body a:hover{border-bottom-color:var(--color-primary)}

.bx-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.875rem}
.bx-cards.is-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bx-cards.is-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bx-cards.is-2 .bx-card-media{aspect-ratio:16/9}
.bx-card{
  display:flex;flex-direction:column;
  background:#fff;
  border:1px solid var(--color-primary);
  border-radius:.375rem;
  overflow:hidden;
  color:var(--color-primary-darkest);text-decoration:none;transform:none;
  box-shadow:0 0 0 0 var(--color-primary),0 .0625rem .1875rem var(--color-shadow);
  transition:box-shadow .3s ease;
}
.bx-card:hover{
  transform:none;
  box-shadow:0 0 0 .1875rem var(--color-primary),0 .0625rem .1875rem var(--color-shadow);
}
.bx-card-media{aspect-ratio:4/3;background:var(--color-secondary);overflow:hidden}
.bx-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.bx-card:hover .bx-card-media img{transform:scale(1.04)}
.bx-card-body{padding:1.375rem 1.5rem 1.625rem;display:flex;flex-direction:column;flex:1}
.bx-card-body h3{font-size:1.25rem;line-height:1.6;font-weight:700;color:var(--color-primary-darkest);margin:0 0 .625rem}
.bx-card-body p{font-size:.9375rem;line-height:1.6;color:var(--color-secondary-darker);margin:0 0 1rem;flex:1}
.bx-card-meta{font-size:.875rem;font-weight:600;color:var(--color-primary)}

.tech-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.25rem}
.tech-card{
  display:block;padding:1.5rem 1.75rem;
  background:#fff;text-decoration:none;transform:none;
  border:1px solid var(--color-primary);
  border-radius:.375rem;
  color:var(--color-primary-darkest);
  box-shadow:0 0 0 0 var(--color-primary),0 .0625rem .1875rem var(--color-shadow);
  transition:box-shadow .3s ease;
}
.tech-card:hover{transform:none;box-shadow:0 0 0 .1875rem var(--color-primary),0 .0625rem .1875rem var(--color-shadow)}
.tech-card h3{font-size:1.125rem;font-weight:600;color:var(--color-primary-darkest);margin:0 0 .5rem}
.tech-card p{font-size:.9375rem;line-height:1.6;color:var(--color-secondary-darker);margin:0}

.bx-mshots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.125rem}
.bx-mshots figure{margin:0}
.bx-mshots img{width:100%;border:1px solid var(--color-hairline);border-radius:.375rem}
.bx-mshots figure:hover img{box-shadow:0 .625rem 1.625rem rgba(20,24,31,.10)}
.bx-mshots figcaption{font-size:.8125rem;color:var(--color-secondary-darker);text-align:center;margin-top:.5rem}
.bx-mshots figcaption b{display:block;color:var(--color-primary-darkest)}
.bx-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1.125rem}
/* 正文中间的产品照片：一行两张，统一 4:3，避免一宽一窄参差 */
.bx-gallery.is-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;margin:1.75rem 0 2rem}
.bx-gallery.is-2 img{aspect-ratio:4/3;object-fit:cover}
.bx-gallery figure{margin:0}
.bx-gallery img{width:100%;border-radius:.375rem;border:1px solid var(--color-hairline)}
.bx-gallery figure:hover img{box-shadow:0 .5rem 1.375rem rgba(20,24,31,.10)}
.bx-gallery figcaption{font-size:.8rem;color:var(--color-secondary-darker);text-align:center;margin-top:.4rem}
.bx-gallery figcaption b{display:block;color:var(--color-primary-darkest)}
.bx-shot img{max-width:560px;border-radius:.375rem}
.bx-mmeta{
  display:flex;flex-wrap:wrap;gap:.5rem 1.625rem;
  font-size:.9375rem;color:var(--color-secondary-darker);
}

.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:.75rem 1rem;
  border:1px solid #dfe4ea;border-radius:.375rem;
  font-size:.9375rem;font-family:var(--ev-font);
  background:#fff;color:var(--color-primary-darkest);
  transition:box-shadow .3s ease,border-color .3s ease;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:0;border-color:var(--color-primary);
  box-shadow:0 0 0 .125rem var(--color-primary-lighter);
}

.search-box input[type="search"]{
  width:200px;padding:.6rem 1.125rem;
  font-size:.9375rem;color:var(--color-primary-darkest);
  background:#fff;border:1px solid #dfe4ea;border-radius:.375rem;
  transition:box-shadow .3s ease,border-color .3s ease,width .25s ease;
}
.search-box input[type="search"]::placeholder{color:#9aa5b1}
.search-box input[type="search"]:focus{
  background:#fff;border-color:var(--color-primary);
  box-shadow:0 0 0 .125rem var(--color-primary-lighter);
  width:250px;
}
.search-results{
  border:1px solid var(--color-hairline);border-radius:.375rem;
  background:#fff;box-shadow:0 .625rem 1.875rem rgba(0,0,0,.10);
}
.sr-box input:focus{border-color:var(--color-primary);box-shadow:0 0 0 .125rem var(--color-primary-lighter)}

.footer{
  background:var(--color-secondary);
  color:var(--color-secondary-darker);
  padding:4rem 0 0;
  border-top:1px solid var(--color-hairline);
}
.footer::before{display:none}
.footer-grid{
  display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:3rem;
  padding-bottom:2.5rem;border-bottom:1px solid var(--color-hairline);
}
.footer-col h4,.footer-contact-row h4,.footer .footer-brand-name{
  color:var(--color-primary-darkest);
  font-size:1rem;line-height:1.5rem;font-weight:700;
  letter-spacing:0;text-transform:none;margin:0 0 1rem;
}
.footer-col p{font-size:.9375rem;line-height:1.7;color:var(--color-secondary-darker)}
.footer-logo{height:96px;display:block;margin-bottom:1rem}
.footer a{
  color:var(--color-secondary-darker);
  font-size:.9375rem;text-decoration:none;
  transition:color .25s ease;
}
.footer a:hover{color:var(--color-primary-darkest)}
.footer-prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:.625rem 1.25rem}
.footer-prod-grid a{font-size:.875rem;line-height:1.5}
.footer-contact-row{padding:2rem 0;border-bottom:1px solid var(--color-hairline)}
.footer-contact-matrix{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:.75rem 3rem}
.fc-item{display:flex;align-items:center;gap:.5rem;font-size:.875rem;line-height:1.6;color:var(--color-secondary-darker);min-width:0}
.fc-item svg,.footer-site svg{width:15px;height:15px;flex-shrink:0;opacity:.65}
.fc-item a{color:var(--color-secondary-darker)}
.fc-item a:hover{color:var(--color-primary-darkest)}
.fc-label{color:#98a2b3;margin-right:.375rem}
.fc-flag{
  flex-shrink:0;font-size:.6875rem;font-weight:700;letter-spacing:.04em;line-height:1.5;
  padding:0 .25rem;border:1px solid #cbd5e1;border-radius:.25rem;color:var(--color-secondary-darker);
}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.25rem 0;border-top:0;text-align:left;
}
.footer-bottom p{font-size:.8125rem;color:var(--color-secondary-darker);letter-spacing:0}
.footer-site{display:inline-flex;align-items:center;gap:.4375rem;color:var(--color-secondary-darker)!important}

@media(max-width:1250px){
  .bx-hero > .container{gap:2.75rem}
}
@media(max-width:1100px){
  .navbar .nav-links{gap:1rem}
  .navbar .nav-links a{font-size:.9rem}
}
@media(max-width:980px){
  .container{padding:0 1.5rem}
  .section{padding:4rem 0}
  .section-title{font-size:1.875rem;line-height:2.5rem}
  .section-subtitle{margin-bottom:2.75rem}

  .bx-hero{min-height:0;padding:4rem 0 3.5rem}
  .bx-hero h1{font-size:2.625rem;line-height:1.15}
  .bx-hero .bx-lead{font-size:1.125rem;line-height:1.75}
  .bx-hero .bx-facts{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.75rem 0;padding:1rem .5rem;
  }
  .bx-hero .bx-fact:not(:first-child){border-left:0}
  .bx-hero .bx-fact:nth-child(even){border-left:2px solid #fff}
  .bx-hero .bx-fact b{font-size:1.875rem}

  .bx-hero-grid{max-width:100%}
  .advantages-grid{grid-template-columns:repeat(2,1fr)}
  .bx-cards.is-3{grid-template-columns:repeat(2,minmax(0,1fr))}

  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .footer-contact-matrix{grid-template-columns:1fr 1fr;gap:.75rem 1.5rem}
  .page-header{padding:3rem 0 2.5rem}
  .page-header h1{font-size:1.875rem}
}
@media(max-width:860px){
  .topbar-left{white-space:nowrap;overflow:hidden}
  .topbar-left > span:nth-child(n+2){display:none}
  .topbar-left a{text-decoration:none}
}
@media(max-width:768px){
  .section{padding:3.5rem 0}
  .content-section{padding:3rem 0}
  .bx-hero h1{font-size:2.125rem}
  .bx-lines{grid-template-columns:1fr;gap:1.5rem}
  .advantages-grid{grid-template-columns:1fr}
  .bx-cards,.bx-cards.is-2,.bx-cards.is-3,.tech-list{grid-template-columns:1fr}
  .bx-gallery.is-2{grid-template-columns:1fr}
  .bx-faq-item{padding:1.25rem 1.25rem}
  .bx-mshots{grid-template-columns:1fr}
  .footer-grid,.footer-contact-matrix{grid-template-columns:1fr;gap:1.5rem}
}
@media(max-width:560px){
  .container{padding:0 1.125rem}
  .section{padding:3rem 0}
  .section-title{font-size:1.625rem;line-height:2.125rem}
  .section-subtitle{font-size:.9375rem;margin-bottom:2.25rem}

  .bx-hero{padding:3rem 0 2.75rem}
  .bx-hero h1{font-size:1.75rem;line-height:1.2}
  .bx-hero .bx-lead{font-size:1rem;line-height:1.7;margin-bottom:1.5rem}
  .bx-hero .bx-eyebrow{font-size:.8125rem;letter-spacing:.12em}
  .bx-hero .bx-cta{flex-direction:column;align-items:stretch;gap:1rem}
  .bx-hero .bx-cta a{width:100%}
  .bx-hero .bx-facts{grid-template-columns:1fr;gap:0}
  .bx-hero .bx-fact{padding:.875rem .5rem}
  .bx-hero .bx-fact:nth-child(even){border-left:0}
  .bx-hero .bx-fact:not(:first-child){border-top:2px solid #fff}
  .bx-hero .bx-fact b{font-size:1.625rem;white-space:normal}

  .bx-line-body{padding:1.25rem 1.25rem 1.5rem}
  .advantage-item{padding:1.75rem 1.375rem}
  .page-header h1{font-size:1.5rem}
  .footer-logo{height:80px}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}

:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* ===== 窄屏主导航折叠（2026-09-24 修）=====
   本层（event.css）在 style.css 之后加载，两层选择器特异性相同，
   所以这里的规则靠「后出现」取胜。
   问题：上面第 123 行的 .navbar .nav-links{display:flex} 没有媒体查询，
   会把 style.css 里 @media(max-width:992px) 的 display:none 盖掉 ——
   手机端导航永远展开，390px 实测占 440px 高（约半屏），压住首屏内容。
   断点取 1280 而不是 992：桌面横排 8 个导航项实测需要约 1222px 容器宽，
   993–1279 之间放不下（1024 档实测横向溢出 121px，改动前已存在）。
   收起后汉堡菜单承担这部分宽度，横向溢出归零。 */
@media(max-width:1279px){
  .navbar .menu-toggle{display:flex}
  .navbar .nav-links{
    display:none;
    position:absolute;top:100%;left:0;right:0;width:100%;
    flex-direction:column;align-items:stretch;gap:0;
    padding:.5rem 1.25rem 1rem;
    background:rgba(255,255,255,.98);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(17,25,40,.08);
    box-shadow:0 12px 24px rgba(15,23,42,.08);
    max-height:calc(100vh - 5rem);overflow-y:auto;
  }
  .navbar .nav-links.open{display:flex}
  .navbar .nav-links a{
    width:100%;padding:.8rem 0;
    font-size:.95rem;
    text-transform:none;letter-spacing:0;
    border-bottom:1px solid #f1f5f9;
  }
  .navbar .nav-links a::after{display:none}
  .navbar .nav-links .btn-quote{
    margin:.75rem 0 0!important;
    padding:.75rem 1.5rem!important;
    text-align:center;align-self:stretch;
  }
  /* 下拉组在汉堡菜单里直接展开成缩进列表（触屏没有 hover） */
  .navbar .nav-dd-trigger{display:block;width:100%;padding:.8rem 0;font-size:.95rem;border-bottom:1px solid #f1f5f9}
  .navbar .nav-dd-caret{display:none}
  .navbar .nav-dd-menu{
    position:static;top:auto;left:auto;transform:none;display:block;
    min-width:0;margin:0;padding:0 0 .25rem .9rem;
    border:0;border-radius:0;box-shadow:none;
  }
  .navbar .nav-dd-menu::before{display:none}
  .navbar .nav-dd-menu a{padding:.55rem 0;font-size:.9rem;border-radius:0}
  /* 展开时把汉堡按钮的 aria 状态显性化（三条线变叉） */
  .navbar .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .navbar .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .navbar .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}

/* 关联企业互链（页脚） */
.footer-related{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.375rem;padding:1.125rem 0 .375rem;font-size:.75rem;border-top:1px solid var(--color-hairline)}
.footer-related .fr-label{opacity:.6;font-weight:600;letter-spacing:.25px}
/* 2026-10-07 修：`.footer a{font-size:.9375rem}`（15px）会盖掉本块的 .75rem，
   友情链接比旁边的「关联企业」标签还大。这里显式收回小字。 */
.footer-related a{font-size:.75rem;text-decoration:none;border-bottom:1px dotted currentColor;opacity:.85}
.footer-related a:hover{opacity:1;border-bottom-style:solid}


/* ===== 媒体中心（2026-10-07，页面 /media-center/）=====
   风格沿用本站 event 设计层：白底卡片 + 1px 主色/发丝线边框 + .375rem 圆角。 */
.bx-media-intro{max-width:52rem;margin:0 0 2.5rem}
.bx-media-intro p{font-size:1.0625rem;line-height:1.8;color:var(--color-secondary-darker);margin:0}
.bx-media-h2{font-size:1.75rem;line-height:1.35;font-weight:700;color:var(--color-primary-darkest);margin:2.75rem 0 1.5rem}
.bx-media-h2:first-of-type{margin-top:0}
.bx-media-group{margin:0 0 3rem}
.bx-media-group h3{font-size:1.3125rem;line-height:1.4;font-weight:700;color:var(--color-primary-darkest);margin:0 0 .5rem;padding-left:.75rem;border-left:3px solid var(--color-primary)}
.bx-media-note{font-size:.9375rem;line-height:1.7;color:var(--color-secondary-darker);margin:0 0 1.375rem;padding-left:.9375rem}
.bx-media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}
.bx-media-item{margin:0;background:#fff;border:1px solid var(--color-hairline);border-radius:.375rem;overflow:hidden;transition:box-shadow .3s ease,border-color .3s ease}
.bx-media-item:hover{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary),0 .0625rem .1875rem var(--color-shadow)}
.bx-media-link{display:block;position:relative;aspect-ratio:4/3;background:var(--color-secondary);cursor:zoom-in}
.bx-media-link img{width:100%;height:100%;object-fit:cover;display:block}
.bx-media-zoom{position:absolute;right:.625rem;bottom:.625rem;padding:.25rem .625rem;border-radius:.25rem;background:rgba(17,25,40,.75);color:#fff;font-size:.75rem;line-height:1.5;opacity:0;transition:opacity .25s ease}
.bx-media-item:hover .bx-media-zoom,.bx-media-link:focus-visible .bx-media-zoom{opacity:1}
.bx-media-item figcaption{padding:.875rem 1rem 1rem;font-size:.875rem;line-height:1.55;color:var(--color-primary-darkest)}
.bx-media-video{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:1.75rem;align-items:center;background:#fff;border:1px solid var(--color-hairline);border-radius:.375rem;padding:1.25rem}
.bx-media-video video{width:100%;height:auto;display:block;border-radius:.25rem;background:#000}
.bx-media-video-body h3{font-size:1.1875rem;font-weight:700;color:var(--color-primary-darkest);margin:0 0 .5rem}
.bx-media-video-body p{font-size:.9375rem;line-height:1.7;color:var(--color-secondary-darker);margin:0}
.bx-media-cta{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between;margin-top:3.25rem;padding:1.75rem 2rem;background:var(--color-secondary);border:1px solid var(--color-hairline);border-left:4px solid var(--color-primary);border-radius:.375rem}
.bx-media-cta h3{font-size:1.25rem;font-weight:700;color:var(--color-primary-darkest);margin:0 0 .5rem}
.bx-media-cta p{font-size:.9375rem;line-height:1.7;color:var(--color-secondary-darker);margin:0;max-width:44rem}
.bx-lightbox{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:2.5rem 1rem;background:rgba(10,14,20,.93)}
.bx-lightbox.is-open{display:flex}
.bx-lightbox figure{margin:0;text-align:center;max-width:94vw}
.bx-lightbox img{max-width:min(1200px,94vw);max-height:80vh;width:auto;height:auto;border-radius:.25rem;background:#fff}
.bx-lightbox figcaption{margin-top:1rem;color:#fff;font-size:.9375rem;line-height:1.6}
.bx-lightbox-close{position:absolute;top:.75rem;right:1.25rem;padding:0;background:none;border:0;color:#fff;font-size:2.25rem;line-height:1;cursor:pointer;opacity:.8}
.bx-lightbox-close:hover{opacity:1}
@media(max-width:900px){
  .bx-media-video{grid-template-columns:1fr;gap:1rem}
}
@media(max-width:860px){
  .bx-media-h2{font-size:1.5rem}
  .bx-media-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
  .bx-media-item figcaption{padding:.75rem .875rem .875rem;font-size:.8125rem}
  .bx-media-cta{padding:1.375rem 1.25rem}
}
@media(max-width:560px){
  .bx-media-grid{grid-template-columns:1fr}
}

/* ===== 桌面主导航紧凑排布（2026-10-07）=====
   收纳后的 7 个一级项 + logo + 搜索框 + 报价按钮，在 1280px 容器内一次排下。
   注意 html[lang="zh-CN"] 那几条在 style.css 里特异性更高，中文要单独压一遍。 */
@media(min-width:1280px){
  .navbar .nav-links{gap:.5rem}
  .navbar .nav-links a,
  .navbar .nav-dd-trigger{font-size:.875rem;padding:.35rem .25rem}
  html[lang="zh-CN"] .navbar .nav-links a,
  html[lang="zh-CN"] .navbar .nav-dd-trigger{font-size:.875rem}
  .navbar .nav-links .btn-quote{padding:.6rem 1.1rem!important;font-size:.875rem}
}