/* =====================================================
   ST Lab / Sunrich Technology — global stylesheet
   Restored 1:1 from design comps (desktop 1897px logical)
   ===================================================== */

/* -----------------------------------------------------
   品牌字体 Helvetica Neue LT Pro
   客户指定三档：导航 75 Bold / 正文 45 Light / 标题 55 Roman，
   分别映射到 CSS 的 700 / 300 / 400。

   只自托管这三个字重。assets/fonts/ 里另有 47 个 .otf 没有用到，
   那个目录是公开可访问的，不该把整套商业字库摆在上面（见部署说明）。

   woff2 在前、otf 兜底：woff2 约 20KB/个，otf 约 35~43KB，
   现代浏览器全部走 woff2，三个字重合计约 62KB。

   字库只有 388 个字形（拉丁 + 常用标点），**没有中文**，
   所以 --font 后面必须留着 PingFang SC 这一档；
   ↧ ✎ ✓ 这类箭头符号字库里也没有，会逐字回退到 Arial —— 与改动前一致。

   font-display:swap：字体没到之前先用 Arial 显示，不留空白。 */
@font-face{
  font-family:"Helvetica Neue LT Pro";
  src:url(../assets/fonts/HelveticaNeueLTProLt.woff2) format("woff2"),
      url(../assets/fonts/HelveticaNeueLTProLt.otf) format("opentype");
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Helvetica Neue LT Pro";
  src:url(../assets/fonts/HelveticaNeueLTProRoman.woff2) format("woff2"),
      url(../assets/fonts/HelveticaNeueLTProRoman.otf) format("opentype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Helvetica Neue LT Pro";
  src:url(../assets/fonts/HelveticaNeueLTProBd.woff2) format("woff2"),
      url(../assets/fonts/HelveticaNeueLTProBd.otf) format("opentype");
  font-weight:700;font-style:normal;font-display:swap;
}

:root{
  --orange:      #F7941D;
  --orange-deep: #F15A24;
  --orange-brand:#EF8201;
  --grad:        linear-gradient(90deg,#F16122,#F6AB04);
  --grad-v:      linear-gradient(180deg,#FF6200,#FF8E00);
  --dark:        #1E1C20;
  --text:        #333;
  --muted:       #666;
  --light-bg:    #F5F6F8;
  --blue-bg:     #F3F8FC;
  --radius:      10px;
  --shadow:      0 6px 22px rgba(30,40,60,.10);
  --container:   1440px;
  --font: "Helvetica Neue LT Pro", Arial, "Helvetica Neue", Helvetica, "PingFang SC", sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
.pcard .pb,.lcard .pb,.relcard p,.f-contact li,.office li{overflow-wrap:anywhere}
/* 正文 45 Light（300）。标题回到 55 Roman（400）——继承 body 的话标题会跟正文一样细，
   层级就没了。下面各处原本写死 bold 的标题也一并改成 400，见「标题字重」一节。 */
body{font-family:var(--font);font-weight:300;color:var(--text);font-size:15px;line-height:1.6;background:#fff;min-height:100vh;display:flex;flex-direction:column}
h1,h2,h3,h4,h5,h6{font-weight:400}

/* 小字回到 55 Roman（400）。
   分界线定在 **13px 及以下**：45 Light 到这个字号，笔画细到 Windows 的 ClearType
   已经渲染不出来了，看着发虚、发灰，长时间读很累（同字号与 Arial 并排对比很明显）。
   13.5px 以上的正文段落仍然用 45 Light，文档指定的正文字重不变。

   这里列的都是「密集信息 / 副文本」：卡片副文本、页脚、元信息、日期、标签、
   下载条的文件说明。按钮、logo 副标不在其列——它们本来就有自己的字重。
   往下加小字样式时，如果字号 ≤13px，记得把选择器加进这张表。 */
.topbar-in,.footer-bottom,.f-contact li,
.pcard .pb,.lcard .pb,.relcard p,.oem-card p,
.factory .fbody .desc p,.dl-row .meta,.qa-card .date,
.resume-meta,.faq-main .result,.ac-item small,
.dlr-card .files a,.nf-link span,.pbadge,
.sr-item .tag,.sr-product-card .tag,.stat span,
.list-main .list-top,.pm-row .pstep span,.jobs-table .jrow .cells,
.jobs-table .jrow-head{font-weight:400}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button,input,select,textarea{font-family:inherit;font-size:inherit}
.container{max-width:var(--container);width:92%;margin:0 auto}

/* ---------- header ---------- */
.site-header{position:relative;z-index:50;color:#fff;
  background:linear-gradient(180deg,#141114 0%,#221c19 55%,#382c22 100%);}
.topbar{border-bottom:1px solid rgba(255,255,255,.08)}
.topbar-in{display:flex;justify-content:flex-end;align-items:center;gap:26px;height:40px;font-size:13px;color:rgba(255,255,255,.85)}
.topbar-in a{display:flex;align-items:center;gap:7px}
.topbar-in .ecat{color:var(--orange);font-weight:bold;letter-spacing:.4px}
.topbar-in svg{width:15px;height:15px;fill:currentColor}
.navrow{display:flex;align-items:center;height:78px;gap:30px}
.brand{display:flex;flex-direction:column;gap:3px;flex:0 0 auto}
.brand img{height:54px;width:auto}
.brand .tagline{font-size:11px;font-weight:bold;letter-spacing:.5px;color:#fff}
.mainnav{display:flex;flex:1;justify-content:center;gap:clamp(20px,3.4vw,58px)}
.mainnav>li{position:relative}
.mainnav>li>a{position:relative;display:block;font-size:17px;font-weight:700;padding:26px 4px;color:#fff;transition:color .22s ease}
.mainnav>li>a::after{content:"";position:absolute;left:50%;right:50%;bottom:15px;height:3px;
  background:linear-gradient(90deg,#F16122 0%,#F7941D 46%,#F6AB04 100%);
  border-radius:999px;opacity:0;box-shadow:0 0 12px rgba(247,148,29,.48);
  transition:left .28s ease,right .28s ease,opacity .22s ease,box-shadow .28s ease}
.mainnav>li.active>a,.mainnav>li:hover>a,.mainnav>li>a:focus-visible{color:var(--orange)}
.mainnav>li.active>a::after,.mainnav>li:hover>a::after,.mainnav>li>a:focus-visible::after{left:0;right:0;opacity:1;box-shadow:0 0 18px rgba(247,148,29,.72)}
.dropdown{position:absolute;top:100%;left:-6px;min-width:360px;background:rgba(56,62,74,.55);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.14);
  padding:14px 0 14px 52px;
  opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .22s ease,transform .22s ease,visibility .22s}
.dropdown::before{content:"";position:absolute;left:18px;top:18px;bottom:18px;width:3px;border-radius:999px;
  background:linear-gradient(180deg,rgba(246,171,4,.35) 0%,#F6AB04 22%,#F16122 58%,rgba(246,171,4,.42) 100%);
  box-shadow:0 0 14px rgba(247,148,29,.58),0 0 28px rgba(241,97,34,.28)}
.mainnav>li:hover .dropdown{opacity:1;visibility:visible;transform:none}
.dropdown a{transition:color .15s,padding-left .15s}
.dropdown a:hover{padding-left:10px}
.dropdown a{display:block;padding:11px 24px 11px 0;font-size:15px;color:#e9e9e9}
.dropdown a:hover,.dropdown a.on{color:var(--orange)}
.searchbox{flex:0 0 auto;display:flex;align-items:center;border:1.5px solid var(--orange);
  background:rgba(247,148,29,.1);
  border-radius:999px;padding:7px 16px;gap:10px;min-width:185px}
.searchbox input{background:none;border:none;outline:none;color:#fff;width:120px;font-size:14px}
.searchbox input::placeholder{color:rgba(255,255,255,.7)}
.searchbox svg{width:16px;height:16px;stroke:var(--orange);fill:none;stroke-width:2;flex:0 0 auto}
.hamburger,.m-search{display:none}

/* mobile menu */
.mobile-menu{display:none;background:rgba(24,23,28,.97);color:#fff;position:absolute;left:0;right:0;top:100%;z-index:60;
  max-height:calc(100vh - 70px);overflow:auto}
.mobile-menu.open{display:block}
/* 移动端菜单是主导航的另一种形态，字重跟着导航走（75 Bold） */
.mobile-menu .mm-head,.dropdown a{font-weight:700}
.mobile-menu .mm-item{border-bottom:1px solid rgba(247,148,29,.45)}
.mobile-menu .mm-head{display:flex;justify-content:space-between;align-items:center;padding:17px 26px;font-size:19px}
.mobile-menu .mm-head .chev{position:relative;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex:0 0 24px;color:#999;font-size:0;line-height:0;transition:transform .22s ease,color .18s ease}
.mobile-menu .mm-head .chev::before{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(225deg);margin-top:5px}
.mobile-menu .mm-item.open .mm-head{color:var(--orange)}
.mobile-menu .mm-item.open .chev{transform:rotate(180deg);color:var(--orange)}
.mobile-menu .mm-sub{display:none;padding:0 26px 12px 40px}
.mobile-menu .mm-item.open .mm-sub{display:block}
.mobile-menu .mm-sub a{display:block;padding:9px 0;font-size:16px;color:#eee}

/* ---------- page banner & breadcrumb ---------- */
.page-banner{position:relative;height:clamp(200px,26vw,500px);overflow:hidden;
  display:flex;align-items:center;background:#111 center/cover no-repeat}
.page-banner h1{font-size:clamp(34px,3.4vw,64px);font-weight:400;color:#fff;letter-spacing:1px}
.breadcrumb{background:var(--orange-brand);color:#fff}
.breadcrumb-in{display:flex;align-items:center;gap:14px;height:62px;font-size:14px}
.breadcrumb-in .sep{opacity:.85;font-family:serif}
.breadcrumb-in a:hover{text-decoration:underline}

/* ---------- buttons / titles ---------- */
/* 按钮显式 400（55 Roman）。不写的话 <a class="btn"> 会继承 body 的 300，而
   <button class="btn"> 拿的是浏览器默认的 400 —— 同一个按钮组件两种字重，
   而且按钮文字用 Light 本来就偏软（移动端 CTA 会掉到 11.5px）。 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;
  border-radius:999px;font-size:15px;font-weight:400;padding:12px 30px;color:#fff;transition:.2s}
.btn-grad{background:linear-gradient(90deg,#F16122,#F6AB04)}
.btn.btn-grad:not(.uiverse-search-btn){background-image:linear-gradient(30deg,#F16122,#F6AB04);background-size:100% auto;background-position:left center}
.btn.btn-grad:not(.uiverse-search-btn):hover,
.btn.btn-grad:not(.uiverse-search-btn):focus-visible{background-position:right center;background-size:200% auto;animation:btnPulseOrange 1.5s infinite;filter:none}
.m-searchbar .btn.btn-grad:hover{filter:brightness(1.07);animation:none;background-size:100% auto}
.btn-outline-w{background:#fff;color:#222;border:1px solid #ddd}
.btn-outline-o{background:#fff;color:var(--orange);border:1px solid var(--orange)}
.btn-sq{border-radius:8px}
.btn-common-fx,.btn-watch-fx{position:relative;isolation:isolate}
.btn-common-fx:active{transform:translateY(0) scale(.98)}
.btn-watch-fx{height:46px;min-width:168px;padding:5px 20px 5px 8px;gap:10px;overflow:hidden;
  border:0;border-radius:8px;color:#fff;font-size:18px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;text-shadow:1px 1px 0 rgba(0,0,0,.35);
  box-shadow:0 10px 22px rgba(241,97,34,.24)}
.btn-watch-fx .watch-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:32px;flex:0 0 36px;border-radius:4px;background:#fff;transition:transform .28s ease,background .28s ease,box-shadow .28s ease}
.btn-watch-fx .watch-icon::before{content:"";width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:13px solid #F7941D;
  margin-left:3px;transition:border-left-color .28s ease,transform .28s ease}
.btn-watch-fx .watch-label{position:relative;z-index:1;transition:transform .28s ease,letter-spacing .28s ease}
.btn-watch-fx:hover,.btn-watch-fx:focus-visible{transform:translateY(-3px);animation:none;box-shadow:0 14px 28px rgba(241,97,34,.34)}
.btn-watch-fx:hover .watch-icon,.btn-watch-fx:focus-visible .watch-icon{transform:translateX(3px) rotate(-4deg) scale(1.12);background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.18)}
.btn-watch-fx:hover .watch-icon::before,.btn-watch-fx:focus-visible .watch-icon::before{border-left-color:#F7941D;transform:scale(1.08)}
.btn-watch-fx:hover .watch-label,.btn-watch-fx:focus-visible .watch-label{transform:translateX(3px);letter-spacing:.12em}
.btn-watch-fx:active{transform:translateY(1px) scale(.98);box-shadow:0 6px 14px rgba(241,97,34,.24)}
.section-pill{display:table;margin:0 auto 46px;background:var(--grad);color:#fff;
  font-size:clamp(19px,1.6vw,30px);font-weight:bold;border-radius:999px;padding:15px 52px}
@keyframes btnPulseOrange{
  0%{box-shadow:0 0 0 0 rgba(247,148,29,.42)}
  70%{box-shadow:0 0 0 10px rgba(247,148,29,0)}
  100%{box-shadow:0 0 0 0 rgba(247,148,29,0)}
}

/* ---------- footer ---------- */
.site-footer{background:linear-gradient(180deg,#FF6200 0%,#FF8E00 100%);color:#fff;flex-shrink:0}
/* sticky footer：短内容页让主内容区自身背景撑满，避免内容与页脚之间露白 */
body>section:not(.page-banner){flex-grow:1}
.footer-grid{display:grid;grid-template-columns:300px minmax(270px,1.35fr) repeat(4,minmax(130px,1fr));gap:36px;padding:58px 0 44px}
.f-brand .logo-card{background:transparent;width:170px;margin-bottom:22px}
.f-brand .logo-card img{width:100%}
.f-contact li{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;margin-bottom:13px;line-height:1.5}
.f-contact svg{width:16px;height:16px;fill:#fff;flex:0 0 auto;margin-top:1px}
.f-col h4{font-size:16.5px;font-weight:400;margin-bottom:20px;padding-bottom:8px;position:relative;display:table}
.f-col h4::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:#fff}
.f-col a{display:block;font-size:13.5px;margin-bottom:13px;opacity:.95;white-space:nowrap}
.f-col a:hover{text-decoration:underline}
.footer-bottom{border-top:1px solid rgba(255,255,255,.4);text-align:center;font-size:13px;padding:17px 0}

/* ---------- CTA strip ---------- */
.cta-strip{background:linear-gradient(rgba(12,12,14,.62),rgba(12,12,14,.62)),url(../assets/img/bg-index02.jpg) center/cover;
  border-top:2px solid var(--orange);padding:22px 0}
.cta-in{display:flex;align-items:center;gap:34px;flex-wrap:wrap}
.cta-logo{flex:0 0 auto}
.cta-logo img{height:46px}
.cta-logo .tagline{font-size:10px;color:#fff;font-weight:bold;margin-top:3px}
.cta-strip h3{flex:1;color:#fff;font-size:clamp(18px,1.5vw,27px);line-height:1.35;min-width:240px}
.cta-actions{display:flex;gap:16px}
.cta-actions .btn{padding:12px 26px}

/* =====================================================
   HOME
   ===================================================== */
.hero{position:relative;background:url(../assets/img/hero-bg.jpg) center/cover;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:url(../assets/img/hero-bg.jpg) center/cover}
.hero-in{position:relative;z-index:1;min-height:clamp(430px,44vw,850px)}
.hero-cards{animation:heroFloat 7s ease-in-out infinite alternate}
@keyframes heroFloat{from{transform:translateY(0)}to{transform:translateY(-14px)}}
.hero-cards{position:absolute;right:1%;top:16%;width:64%;max-width:1050px}
.hero-copy{position:absolute;left:0;top:31%;max-width:400px;color:#fff}
.hero-copy h1{font-size:clamp(26px,2.6vw,49px);line-height:1.28;font-weight:400;margin-bottom:22px}
.hero-copy h1 span{background:var(--grad);padding:1px 12px 3px 2px;display:inline-block}
.hero-copy p{font-size:13.5px;line-height:1.75;margin-bottom:26px;color:rgba(255,255,255,.92);max-width:345px}
.hero .btn{padding:10px 24px;font-size:14px;border-radius:6px}
.dots{position:absolute;left:50%;transform:translateX(-50%);bottom:26px;display:flex;gap:9px;align-items:center}
.dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.6);cursor:pointer}
.dots i.on{width:30px;border-radius:5px;background:var(--grad)}

.stats-strip{background:#fff;padding:38px 0 30px}
.stats-in{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.stat{ text-align:center;padding:6px 8px;border-right:1px solid #E3E6EA;display:flex;flex-direction:column;align-items:center;gap:10px}
.stat:last-child{border-right:none}
.stat img{height:48px;width:auto}
.stat b{font-size:clamp(22px,1.8vw,34px);color:var(--orange);line-height:1}
.stat b small{font-size:.45em;font-weight:bold;margin-left:3px}
.stat span{font-size:14.5px;color:#555}

.featured{position:relative;background:#FAFBFC;padding:40px 0 56px;overflow:hidden;opacity:.9;background-image: url(../assets/img/bg-index01.png);background-size: 100% auto;background-repeat: repeat-y;}
.featured .decor{position:absolute;top:0;bottom:0;width:7%;background-size:100% auto;background-repeat:repeat-y;}
.featured .decor.l{left:0;background-image:url(../assets/img/decor-left.jpg)}
.featured .decor.r{right:0;background-image:url(../assets/img/decor-right.jpg)}
.prod-carousel{position:relative;padding:0 44px}
.pc-viewport{overflow:hidden}
.pc-track{display:flex;transition:transform .45s ease}
.pc-page{flex:0 0 100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.pcard{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 5px 16px rgba(20,30,50,.08);display:flex;flex-direction:column}
.pcard .ph1{position:relative;background:url(../assets/img/card-orange-bg1.jpg) center/cover;aspect-ratio:340/300;display:flex;align-items:center;justify-content:center}
.pcard .ph2{position:relative;background:url(../assets/img/card-orange-bg2.jpg) center/cover;aspect-ratio:340/300;display:flex;align-items:center;justify-content:center}
.pcard .ph3{position:relative;background:url(../assets/img/card-orange-bg3.jpg) center/cover;aspect-ratio:340/300;display:flex;align-items:center;justify-content:center}
.pcard .ph0{position:relative;aspect-ratio:340/300;display:flex;align-items:center;justify-content:center}
.pcard .ph img{width:86%;height:auto;filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))}
.pcard .pb{padding:13px 16px;font-size:13px;color:#555;line-height:1.75;flex:1}
.pcard.hl .pb{background:#F8931F;color:#fff}
.pc-arrow{position:absolute;top:42%;width:42px;height:42px;background:none;border:none;font-size:0;line-height:0;color:#222;cursor:pointer;padding:0}
.pc-arrow::before{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;border-right:5px solid currentColor;border-bottom:5px solid currentColor}
.pc-arrow.prev::before{transform:translate(-38%,-50%) rotate(135deg)}
.pc-arrow.next::before{transform:translate(-62%,-50%) rotate(-45deg)}
.pc-arrow.prev{left:-6px}.pc-arrow.next{right:-6px}
.featured .dots,.pc-dots{position:static;transform:none;justify-content:center;margin-top:34px}
.pc-dots{display:flex;gap:9px;align-items:center}
.pc-dots i{width:9px;height:9px;border-radius:50%;background:#C9CED4;cursor:pointer}
.pc-dots i.on{width:30px;border-radius:5px;background:var(--grad)}
/* 只有一页（Featured 产品不足一页）时，左右箭头没有意义，隐藏 */
.prod-carousel.pc-single .pc-arrow{display:none}

.company{position:relative;background:linear-gradient(rgba(225,231,238,.84),rgba(225,231,238,.84)),url(../assets/img/building.jpg) center/cover;padding:72px 0 64px}
.company h2{color:var(--orange);font-size:clamp(26px,2.2vw,42px);font-weight:600;margin-bottom:14px}
.company h3{color:var(--orange);font-size:clamp(17px,1.3vw,24px);font-weight:400;margin-bottom:26px}
.company p{max-width:1500px;font-size:16px;color:#3a3a3a;margin-bottom:16px;text-align:justify}
.company-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;margin:44px 0 40px;max-width:1500px}
.company-stats b{display:block;font-size:clamp(28px,2.4vw,46px);color:var(--orange);margin-bottom:12px}
.company-stats span{font-size:clamp(15px,1.2vw,22px);color:var(--orange);line-height:1.4;display:block;max-width:250px}

.services{background:var(--blue-bg);padding:64px 0 60px}
.process{display:flex;align-items:flex-start;justify-content:space-between;max-width:1520px;margin:0 auto 46px}
.pstep{display:flex;flex-direction:column;align-items:center;gap:14px;flex:0 0 auto;width:110px}
.pstep img{width:96px;height:96px;border-radius:50%;box-shadow:0 6px 16px rgba(30,40,60,.12);background:#fff;object-fit:cover}
.pstep span{font-size:16.5px;color:#333}
.pbar{flex:1;height:7px;border-radius:4px;margin-top:45px;max-width:150px;min-width:30px;margin-left:8px;margin-right:8px;
  position:relative;overflow:hidden;
  background:linear-gradient(90deg,#F16122,#F6AB04,#F16122,#F6AB04);background-size:300% 100%;
  animation:barFlow 3s linear infinite}
.pbar::after{content:"";position:absolute;top:0;bottom:0;left:0;width:34%;border-radius:4px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.9),rgba(255,255,255,0));
  transform:translateX(-120%);
  animation:barSweep 2.1s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes barFlow{from{background-position:100% 0}to{background-position:0 0}}
@keyframes barSweep{0%{transform:translateX(-120%)}55%,100%{transform:translateX(340%)}}
@media (prefers-reduced-motion: reduce){.pbar,.pbar::after{animation:none}}
.oem-card:nth-child(2) .oem-icon::before,.oem-card:nth-child(2) .oem-icon::after{animation-delay:.18s}
.oem-card:nth-child(3) .oem-icon::before,.oem-card:nth-child(3) .oem-icon::after{animation-delay:.36s}
.oem-card:nth-child(4) .oem-icon::before,.oem-card:nth-child(4) .oem-icon::after{animation-delay:.54s}
@media (prefers-reduced-motion: reduce){.oem-icon::before,.oem-icon::after{animation:none}}
.services .more{display:table;margin:0 auto}

/* =====================================================
   PRODUCTS overview
   ===================================================== */
.catgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 34px;padding:64px 0 80px}
.catcard .thumb{border-radius:6px;overflow:hidden}
.catcard h3{color:var(--orange-deep);font-size:21px;margin:24px 0 12px}
.catcard p{font-size:16px;color:#555;margin-bottom:12px;}
.catcard .view{color:var(--orange-deep);font-size:15px;border-bottom:1px solid var(--orange-deep);padding-bottom:2px}
.catcard .view i{font-style:normal}

/* =====================================================
   CATEGORY list + filter
   ===================================================== */
.listing{background:var(--light-bg);padding:44px 0 70px}
.listing-in{display:grid;grid-template-columns:300px 1fr;gap:34px;align-items:start}
.filter-card{background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:28px 26px;position:relative}
.eol-toggle{display:block;width:100%;margin-top:12px;padding:10px 14px;border:1px solid var(--orange);background:#fff;color:var(--orange);
  font:inherit;font-size:15px;line-height:1.2;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease}
.eol-toggle:hover,.eol-toggle:focus-visible,.eol-toggle.is-active{background:var(--orange);color:#fff}
.eol-toggle:focus-visible{outline:2px solid rgba(247,148,29,.28);outline-offset:3px}
.eol-toggle--inline{width:auto;margin:0 0 0 16px;padding:8px 18px}
.filter-card h3{font-size:23px;line-height:1.2;margin-bottom:20px;padding-right:118px}
.f-reset{position:absolute;top:50px;right:26px;transform:translateY(-100%);display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;
  color:var(--orange);font-size:14px;font-weight:bold;line-height:1;cursor:pointer;padding:0;letter-spacing:0;
  transition:color .2s ease,transform .2s ease}
.f-reset svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.f-reset-icon,.f-reset-text{display:inline-flex;transition:transform .2s ease}
.f-reset:hover,.f-reset:focus-visible{color:var(--orange-deep);transform:translate(-2px,-100%)}
.f-reset:focus-visible{outline:2px solid rgba(247,148,29,.36);outline-offset:4px;border-radius:999px}
.f-reset:hover .f-reset-icon{transform:rotate(-25deg)}
.f-reset:hover .f-reset-text{transform:translateX(-1px)}
.f-reset.is-animating .f-reset-icon{animation:filterResetSpin .65s cubic-bezier(.22,.75,.34,1)}
.f-reset.is-animating .f-reset-text{animation:filterResetText .65s ease}
@keyframes filterResetSpin{0%{transform:rotate(0)}70%{transform:rotate(-380deg)}100%{transform:rotate(-360deg)}}
@keyframes filterResetText{0%,100%{transform:translateX(0);opacity:1}40%{transform:translateX(4px);opacity:.55}70%{transform:translateX(-2px);opacity:1}}
.fgroup{margin-bottom:8px}
.fgroup .fhead{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:9px 0;font-size:16.5px;font-weight:bold;color:#222}
.fgroup .fhead .chev{position:relative;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:0 0 22px;color:#8A8A8A;font-size:0;line-height:0;transition:transform .22s ease,color .18s ease}
.fgroup .fhead .chev::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-4px}
.fgroup .fhead:hover .chev{color:var(--orange-deep)}
.fgroup.closed .fhead .chev{transform:rotate(180deg)}
.fgroup ul{padding:4px 0 14px}
.fgroup.closed ul{display:none}
.fgroup li{margin-bottom:12px}
.fgroup label{display:flex;align-items:center;gap:11px;font-size:16px;color:#444;cursor:pointer}
.fgroup input{display:none}
.fgroup .box{width:15px;height:15px;border:1.5px solid #9AA0A6;border-radius:3px;flex:0 0 auto}
.fgroup input:checked + .box{background:#FE941E;border-color:#FE941E}
.fgroup{border-bottom:2px solid #F07C00}
.fgroup:last-child{border-bottom:none}
.list-main .list-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;font-size:14px;color:#555}
.prodgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.lcard{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 4px 14px rgba(20,30,50,.07)}
.lcard .ph{background:#fff;padding:26px 30px;border-bottom:1px solid #eee}
.lcard .ph img{width:100%;height:auto}
.lcard .pb{padding:16px 18px 18px;font-size:13px;color:#555;line-height:1.7;height: 100%;}
.lcard .pb h3{font-size:15.5px;color:#222;line-height:1.4;margin-bottom:8px}
.lcard.hl .pb{background:#F8931F;color:#fff}
.lcard.hl .pb h3{color:#fff}
.prodgrid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1024px){.prodgrid.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pagination{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;margin-top:48px;font-size:15px;color:#555}
.pagination a{min-width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:5px}
.pagination a.on{background:#FE941E;color:#fff}
.pagination .arr{font-size:20px;font-family:serif}
.pagination .arr.dis{opacity:.35;pointer-events:none}
.pagination .gap{min-width:20px;text-align:center;color:#aaa;user-select:none}
@media (max-width:640px){.pagination{gap:6px;margin-top:32px}.pagination .gap{min-width:14px}}

/* =====================================================
   PRODUCT detail
   ===================================================== */
.pd-wrap{background:var(--light-bg);padding:40px 0 0}
.pd-hero{background:#fff;border-radius:10px;box-shadow:var(--shadow);padding:48px 54px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:60px}
.pd-gallery,.pd-info,.pd-topline{min-width:0}
.pd-gallery{position:relative}
.pd-main{position:relative;display:flex;align-items:center;min-width:0}
.pd-main img{width:100%;max-width:100%;height:auto;object-fit:contain}
.pd-gal-arrow{position:absolute;top:44%;width:34px;height:34px;border-radius:50%;background:#555;color:#fff;border:none;cursor:pointer;font-size:0;line-height:0;opacity:.85}
.pd-gal-arrow::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor}
.pd-gal-arrow.prev::before{transform:translate(-35%,-50%) rotate(135deg)}
.pd-gal-arrow.next::before{transform:translate(-65%,-50%) rotate(-45deg)}
.pd-gal-arrow.prev{left:-8px}.pd-gal-arrow.next{right:-8px}
.pd-info h1{font-size:clamp(19px,1.5vw,27px);line-height:1.4;margin-bottom:12px;padding-right:150px;position:relative}
.pd-topline{position:relative}
.pd-topline .btn{position:absolute;right:0;top:4px;padding:10px 22px;font-size:14px}
.pd-date{display:flex;align-items:center;gap:8px;color:#777;font-size:14.5px;margin-bottom:26px}
.pd-date svg{width:16px;height:16px;stroke:#777;fill:none;stroke-width:1.6}
.pd-info ul.feat{margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid #ddd}
.pd-info ul li{font-size:15px;margin-bottom:10px;padding-left:18px;position:relative}
.pd-info ul li::before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;border-radius:50%;background:#333}
.pd-thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin-top:34px;align-items:center;width:100%;max-width:100%;min-width:0;overflow:visible;padding-bottom:0;scrollbar-width:none;-ms-overflow-style:none}
.pd-thumbs::-webkit-scrollbar{display:none}
.pd-thumbs .th{justify-self:center;width:100%;max-width:110px;min-width:0;padding:8px;border:1px solid transparent;cursor:pointer;box-sizing:border-box}
.pd-thumbs .th img{width:100%;height:76px;object-fit:contain}
.pd-thumbs .th.on{border-color:#bbb}
.pd-tabs-card{background:#fff;border-radius:10px;box-shadow:var(--shadow);padding:44px 54px;margin-top:36px}
.tabbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:760px;border:1px solid #E8935A;margin-bottom:8px}
.tabbar button{padding:14px 10px;background:#fff;border:none;border-right:1px solid #E8935A;font-size:16px;color:#444;cursor:pointer}
.tabbar button:last-child{border-right:none}
.tabbar button.on{background:linear-gradient(90deg,#F0862C,#F49D22);color:#fff}
.tab-underline{height:1px;background:#E8935A;margin-bottom:34px;max-width:100%}
.tabpane{display:none}
.tabpane.on{display:block}
.tabpane p{font-size:16px;color:#333;line-height:1.9;margin-bottom:18px;text-align:justify}
.tabpane h4{font-size:16px;margin:26px 0 14px}
.tabpane ul li{font-size:16px;margin-bottom:10px;padding-left:16px;position:relative}
.tabpane ul li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:#333}
/* 规格表：铺满卡片、左右两列都居中（设计稿如此）。
   table-layout:fixed 让 26% 的表头列宽真正生效——auto 布局下浏览器会按内容重算，
   项目名长短不一时每张表的分栏位置都不一样。
   外层的 .spec-scroll 由发布器生成，负责窄屏横向滚动；老页面没有这层包裹也不会
   撑破布局：单元格能正常折行，超长无空格串再由 overflow-wrap 兜底。 */
/* 产品角标：NEW 用品牌橙渐变，EOL（停产）用中性灰——灰色本身就说明「不再主推」，
   与橙色一眼可分。两处共用：分类页卡片（绝对定位在图片左上角，.pbadge--card）
   与详情页标题旁（跟在 h1 后面随文排版）。 */
.pbadge{display:inline-block;font-size:11px;line-height:1.55;border-radius:999px;
  padding:2px 11px;color:#fff;white-space:nowrap;vertical-align:middle}
.pbadge--new{background:linear-gradient(90deg,#F16122,#F6AB04)}
.pbadge--eol{background:#8A9099}
.pbadge--card{position:absolute;top:10px;left:10px;z-index:2}
.pd-title-badge{margin-left:10px;position:relative;top:-2px}
.dlr-card .tag + .pbadge{margin-left:8px}
.dlr-card .info > .pbadge:first-child{margin-bottom:9px}
.dlr-card .repl-note{margin:8px 0 7px;color:#E85A1F;font-weight:bold}

.spec-scroll{overflow-x:auto;max-width:100%}
.spec-scroll .spec-table{min-width:560px}
.spec-table{width:100%;border-collapse:collapse;table-layout:fixed}
.spec-table th,.spec-table td{border:1px solid #BFC4CA;padding:13px 18px;font-size:16px;font-weight:normal;
  white-space:pre-line;overflow-wrap:anywhere;vertical-align:middle}
.spec-table th{width:26%;text-align:center;color:#222}
.spec-table td{text-align:center;color:#444}
.spec-table tr:nth-child(odd) th,.spec-table tr:nth-child(odd) td{background:#fff}
.spec-table tr:nth-child(even) th,.spec-table tr:nth-child(even) td{background:#F4F5F7}
.dl-sec{padding:4px 0 10px}
.dl-sec h3{font-size:19px;margin:28px 0 12px;color:#2F3338}
.dl-row{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:110px;padding:16px 0;font-size:16px;border-bottom:1px solid #F1E8E1}
.dl-sec h3 + .dl-row{border-bottom:none}
.dl-sec h3:nth-of-type(3) + .dl-row{border-bottom:1px solid #F1E8E1}
.dl-row .meta{color:#A2A7AD;font-size:12px;margin-left:16px;white-space:nowrap}
.dl-row .left{display:flex;align-items:baseline;flex:1;min-width:0;color:#24272B;overflow-wrap:anywhere}
.btn-dl{position:relative;isolation:isolate;overflow:visible;border:0;border-radius:10px;height:50px;padding:0;
  min-width:200px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  background:transparent;color:#fff;font-size:16px;font-weight:700;line-height:50px;text-align:center;text-decoration:none;
  transition:transform .24s ease,filter .24s ease}
.btn-dl-main{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:50px;
  padding:0 28px;border-radius:10px;background:linear-gradient(180deg,#FF9E1B 0%,#F16122 100%);color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.18);box-shadow:2px 2px 8px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.34);
  transition:box-shadow .24s ease,background .24s ease}
.btn-dl::before,.btn-dl::after{position:absolute;left:10px;z-index:1;width:calc(100% - 20px);height:24px;
  border-radius:6px;background:#222;color:#fff;font:12px/24px Helvetica,Arial,sans-serif;text-align:center;
  box-sizing:border-box;padding:0 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  letter-spacing:0;text-transform:none;pointer-events:none;
  transition:transform .4s ease,background .24s ease,box-shadow .24s ease}
.btn-dl::before{content:attr(data-top);top:8px}
.btn-dl::after{content:attr(data-bottom);bottom:8px}
.btn-dl:hover,.btn-dl:focus-visible{filter:saturate(1.05)}
.btn-dl:hover .btn-dl-main,.btn-dl:focus-visible .btn-dl-main{box-shadow:2px 5px 14px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.42)}
.btn-dl:hover::before,.btn-dl:focus-visible::before{transform:translateY(-26px);background:#252525;box-shadow:0 -3px 10px rgba(0,0,0,.22)}
.btn-dl:hover::after,.btn-dl:focus-visible::after{transform:translateY(26px);background:#252525;box-shadow:0 3px 10px rgba(0,0,0,.22)}
.btn-dl:active{transform:translateY(1px)}
.btn-dl:active .btn-dl-main{background:linear-gradient(180deg,#FF9E1B 36%,#E9571F 100%);box-shadow:1px 1px 5px rgba(0,0,0,.25),inset 0 2px 4px rgba(0,0,0,.14)}
.btn-dl:active::before{transform:translateY(-18px)}
.btn-dl:active::after{transform:translateY(18px)}
.btn-dl.solid,.btn-dl.line{color:#fff}
.qa-card{border:1px solid #F0C9A8;border-radius:10px;padding:22px 26px;margin-top:14px}
.qa-card .q{font-size:13.5px;color:#333;line-height:1.7}
.qa-card .q + .btn{display:table;margin-top:12px}
.qa-card .date{font-size:12px;color:#aaa;margin:8px 0}
.qa-card .a{font-size:13.5px;margin-bottom:16px}
.related{background:var(--light-bg);padding:36px 0 70px}
.related-in{background:#fff;border-radius:10px;box-shadow:var(--shadow);padding:50px 54px}
.relgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px}
.relcard img{width:88%;margin:0 auto 22px}
.relcard h3{font-size:15px;line-height:1.5;margin-bottom:8px}
.relcard p{font-size:13px;color:#555;line-height:1.7}

/* =====================================================
   OEM / ODM
   ===================================================== */
.oem-workflow{padding:56px 0 30px}
.oem-workflow img{width:100%;border-radius:6px}
.oem-workflow .mobile{display:none}
.oem-cards{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding:26px 0 64px}
.oem-card{background:#4B5058;border-radius:10px;padding:24px 28px;display:flex;gap:24px;align-items:flex-start;color:#fff}
.oem-icon{position:relative;display:block;width:86px;flex:0 0 86px;overflow:hidden;border-radius:8px;isolation:isolate;contain:paint}
.oem-icon img{position:relative;z-index:1;display:block;width:100%;height:auto;border-radius:8px}
.oem-icon::before,.oem-icon::after{content:"";position:absolute;z-index:2;left:0;width:100%;height:20.5%;pointer-events:none;
  background:linear-gradient(100deg,transparent 28%,rgba(255,255,255,.05) 42%,rgba(255,255,255,.9) 50%,rgba(255,255,255,.08) 58%,transparent 72%);
  background-size:280% 100%;background-position:160% 0;opacity:.82;
  -webkit-mask-image:url(../assets/icons/oem-ic-rd.png);mask-image:url(../assets/icons/oem-ic-rd.png);
  -webkit-mask-size:100% auto;mask-size:100% auto;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:oemArcSweep 2.2s ease-in-out infinite}
.oem-icon::before{top:0;-webkit-mask-position:center top;mask-position:center top}
.oem-icon::after{bottom:0;-webkit-mask-position:center bottom;mask-position:center bottom}
@keyframes oemArcSweep{0%{background-position:160% 0}58%,100%{background-position:-60% 0}}
.oem-card h4{font-size:17px;margin-bottom:8px}
.oem-card p{font-size:17px;color:#D7DADF;line-height:1.75;text-align:justify}
/* Each row keeps one factory photo. The collapsed header owns its tint, while
   the expanded body uses a white photo wash plus an orange description band. */
.factory .frow{--factory-open-height:420px;position:relative;color:#fff;background:#232327 center/cover no-repeat;overflow:hidden}
.factory .fhead2{display:flex;align-items:center;justify-content:space-between;padding:0;cursor:pointer;outline:none;
  background:rgba(18,18,20,.74);transition:background .3s}
.factory .frow:nth-child(even) .fhead2{background:linear-gradient(90deg,rgba(241,97,34,.85),rgba(246,171,4,.80))}
.factory .frow:hover .fhead2{background:rgba(18,18,20,.62)}
.factory .frow:nth-child(even):hover .fhead2{background:linear-gradient(90deg,rgba(241,97,34,.74),rgba(246,171,4,.68))}
.factory .fhead2:focus-visible{box-shadow:inset 0 0 0 3px rgba(255,255,255,.72)}
.factory .fhead2,.factory .fbody{position:relative;z-index:1}
.factory .fhead2 .container{display:flex;align-items:center;justify-content:space-between;padding-top:20px;padding-bottom:20px}
.factory .frow h3{font-size:clamp(22px,2.2vw,42px);text-shadow:0 2px 12px rgba(0,0,0,.65)}
.factory .frow h3 small{font-size:.5em;font-weight:bold;margin-left:10px}
.factory .toggle{width:50px;height:50px;border-radius:50%;background:rgba(241,90,36,.96);color:#fff;border:1.5px solid rgba(255,255,255,.7);font-size:0;cursor:pointer;line-height:0;flex:0 0 auto;position:relative;outline:none;box-shadow:0 10px 24px rgba(241,90,36,.28),inset 0 1px 0 rgba(255,255,255,.28);transition:transform .3s ease,background .3s ease,border-color .3s ease,box-shadow .3s ease}
.factory .toggle::before,.factory .toggle::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;border-radius:999px;transform:translate(-50%,-50%);transition:opacity .24s ease,transform .3s ease,background .3s ease}
.factory .toggle::before{width:20px;height:2px}
.factory .toggle::after{width:2px;height:20px}
.factory .frow:not(.open):hover .toggle{transform:rotate(90deg) scale(1.05);background:#263447;border-color:rgba(255,255,255,.9);box-shadow:0 14px 30px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.25)}
.factory .toggle:active{background:#f16122;border-color:rgba(255,255,255,.95);box-shadow:0 6px 16px rgba(241,90,36,.28),inset 0 2px 8px rgba(0,0,0,.18);transition-duration:0s}
.factory .frow.open .toggle{background:rgba(20,20,22,.78);border-color:rgba(255,255,255,.72);box-shadow:0 12px 26px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.16)}
.factory .frow.open .toggle::after{opacity:0;transform:translate(-50%,-50%) rotate(90deg)}
.factory .frow.open:hover .toggle{transform:rotate(180deg) scale(1.04);background:#263447;border-color:rgba(255,255,255,.9)}
.factory .toggle:focus-visible{box-shadow:0 0 0 4px rgba(255,255,255,.32),0 12px 26px rgba(241,90,36,.3),inset 0 1px 0 rgba(255,255,255,.28)}
/* The expanded body is white wherever there is no copy. Only the copy band is
   orange, matching the design while still revealing the factory image below. */
.factory .fbody{height:0;overflow:hidden;opacity:0;background:rgba(255,255,255,.72);
  transition:height .48s cubic-bezier(.22,.61,.36,1),opacity .24s ease;padding:0;will-change:height}
.factory .frow.open .fbody{opacity:1}
.factory .fbody .desc{position:relative;z-index:0;padding:28px 0 30px}
.factory .fbody .desc:not(:empty)::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;
  transform:translateX(-50%);background:linear-gradient(90deg,rgba(241,97,34,.86),rgba(246,171,4,.80))}
.factory .fbody .desc:empty{padding:0}
.factory .fbody .desc h4{font-size:18px;margin-bottom:10px;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.factory .fbody .desc p{font-size:18px;color:#fff;max-width:1500px;text-shadow:0 1px 8px rgba(0,0,0,.55)}

/* =====================================================
   COMPANY PROFILE
   ===================================================== */
.cp-hero{position:relative;background:linear-gradient(rgba(233,237,242,.78),rgba(233,237,242,.78)),url(../assets/img/building.jpg) center/cover;padding:74px 0 66px}
.cp-hero-in{display:flex;gap:72px;align-items:flex-start}
/* 左侧锚点导航：设计稿是裸文字（橙色，当前项加下划线），不再是橙色实心色块 ——
   色块和下面的统计卡片撞在一起，一个页面里两大块橙色反而把正文挤没了。 */
.cp-tabs{flex:0 0 168px;padding-top:6px}
.cp-tabs a{display:block;font-size:18px;font-weight:800;margin-bottom:30px;color:var(--orange-deep)}
.cp-tabs a:last-child{margin-bottom:0}
.cp-tabs a.on{font-weight:900;text-decoration:underline;text-underline-offset:7px}
.cp-copy h1{color:var(--orange);font-size:clamp(26px,2.2vw,40px);margin-bottom:10px;font-weight:bold;}
.cp-copy h3{color:var(--orange);font-size:clamp(16px,1.3vw,23px);margin-bottom:24px}
/* 左对齐而不是两端对齐：设计稿里正文右边缘是参差的，而 justify 在这个栏宽下
   会把词距拉得忽宽忽窄（移动端本来就已经单独退回左对齐了）。 */
.cp-copy p{font-size:16px;color:#3c3c3c;margin-bottom:16px;max-width:1180px}
/* 统计：四张等宽橙色卡片（设计稿）。等高由 grid 拉齐——后台可以把说明写得很长
   （现在就有一条 57 个字符的），卡片高度必须跟着最长的那条走，否则底边参差。
   数字后的 "+" 是独立的 <i class="plus">，才能单独定小字号；数字本身仍是 <b> 的
   第一个文本节点，滚动到时的计数动画照常识别（见 js/main.js 的 initCounters）。 */
.cp-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px;
  margin-top:56px;max-width:840px}
.cp-stats>div{background:var(--orange);color:#fff;border-radius:18px;padding:20px 18px 22px;
  box-shadow:0 8px 20px rgba(247,148,29,.26)}
/* nowrap：数字和它右上角的 "+" 必须待在同一行——"130,000 +" 这种长值一旦允许
   折行，+ 就会自己掉到第二行去。字号上限压到 28px 正是为了让最长的那个值在
   一张卡片里放得下。 */
.cp-stats b{position:relative;display:inline-block;width:max-content;max-width:100%;font-size:clamp(22px,2vw,28px);
  color:#fff;line-height:1.05;margin-bottom:14px;padding-right:.46em;white-space:nowrap}
.cp-stats b .plus{position:absolute;right:0;top:-.08em;font-size:.58em;font-style:normal;font-weight:900;line-height:1;opacity:1}
.cp-stats span{display:block;font-size:14px;color:#fff;line-height:1.4}
.profile-page{position:relative;background:#fff}
.profile-page::before{content:"";position:absolute;left:0;right:0;top:0;height:980px;background:linear-gradient(rgba(233,237,242,.74),rgba(233,237,242,.74)),url(../assets/img/building.jpg) center top/cover no-repeat;z-index:0;pointer-events:none}
.profile-page .breadcrumb,.profile-page .cp-hero{position:relative;z-index:1}
.profile-page .milestone,.profile-page .whyus,.profile-page .vision,.profile-page #site-footer{position:relative;z-index:2}
.profile-page .site-header{background:rgba(20,18,16,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 28px rgba(13,38,38,.2)}
.profile-page .breadcrumb{padding-top:118px;background:transparent;color:#fff}
.profile-page .breadcrumb::before{content:"";position:absolute;left:0;right:0;bottom:0;height:62px;background:rgba(239,130,1,.82);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:0}
.profile-page .breadcrumb-in{position:relative;z-index:1;max-width:var(--container);width:92%;padding:0;background:transparent}
.profile-page .cp-hero{background:transparent;padding-top:64px;padding-bottom:24px;min-height:0}
@media (max-width:900px){
  .profile-page{position:relative;background:#fff}
  .profile-page::before{display:block;content:"";position:absolute;left:0;right:0;top:0;height:118px;z-index:0;pointer-events:none;background:linear-gradient(rgba(233,237,242,.74),rgba(233,237,242,.74)),url(../assets/img/building.jpg) center top/cover no-repeat}
  .profile-page .site-header,.profile-page .breadcrumb,.profile-page .cp-hero{position:relative}
  .profile-page .breadcrumb,.profile-page .cp-hero{z-index:1}
  .profile-page .breadcrumb{margin-top:0;padding-top:0}
  .profile-page .breadcrumb::before{height:54px}
  .profile-page .breadcrumb-in{max-width:none;width:100%;height:54px;padding:0 4%;font-size:16px}
  .profile-page .cp-hero{padding-top:34px;background:linear-gradient(rgba(233,237,242,.74),rgba(233,237,242,.74)),url(../assets/img/building.jpg) center top/cover no-repeat}
  .profile-page .cp-hero .container{width:100%;padding:0 4vw;max-width:100%;overflow:hidden}
  .cp-copy{width:100%;min-width:0;overflow:hidden}
  .cp-copy h1,.cp-copy h3,.cp-copy p{max-width:100%;overflow-wrap:anywhere}
  .cp-copy p{text-align:left;word-spacing:normal}
  .cp-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px;width:100%;max-width:100%}
  .cp-stats b{font-size:clamp(24px,7vw,34px)}
  .cp-stats span{font-size:clamp(13px,3.6vw,16px)}
}
.milestone{background:linear-gradient(rgba(40,16,4,.32),rgba(40,16,4,.32)),url(../assets/img/bg-milestone.jpg) center/cover;color:#fff;padding:70px 0 90px}
.milestone h2{text-align:center;font-size:clamp(26px,2.2vw,40px);margin-bottom:60px;font-weight:bold}
.ms-in{display:flex;gap:8%;align-items:flex-start;max-width:1300px;margin:0 auto}
.ms-years{flex:0 0 190px;position:relative;text-align:center}
.ms-year-window{height:260px;overflow:hidden;position:relative}
.ms-year-track{transition:transform .35s cubic-bezier(.22,.75,.3,1);will-change:transform}
.ms-years .yr{font-size:clamp(26px,2.4vw,42px);font-weight:bold;color:rgba(255,255,255,.65);margin-bottom:26px;cursor:pointer}
.ms-years .yr.on{color:#fff;text-decoration:underline;text-underline-offset:10px}
.ms-arrows{position:absolute;right:-46px;top:54px;display:flex;flex-direction:column;gap:56px}
.ms-arrows button{position:relative;width:30px;height:30px;border-radius:50%;background:#2E2E33;color:#fff;border:none;cursor:pointer;font-size:0;line-height:0}
.ms-arrows button::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor}
.ms-arrows button:first-child::before{transform:translate(-50%,-35%) rotate(225deg)}
.ms-arrows button:last-child::before{transform:translate(-50%,-65%) rotate(45deg)}
.ms-points{flex:1;padding-top:36px}
.ms-points li{font-size:16px;line-height:1.75;margin-bottom:26px;padding-left:20px;position:relative;}
.ms-points li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:7px;border-radius:50%;background:#fff}
.whyus{padding:66px 0 74px}
.wu-row{display:flex;gap:30px;align-items:center;border:2px solid transparent;border-radius:70px;padding:26px 46px;margin-bottom:30px;color:#111}
.wu-row:nth-child(odd of .wu-row){/*noop*/}
.wu-row.line{border:2px solid;border-image:linear-gradient(90deg,#F6AB04,#F16122) 1;border-radius:70px;
  border-image-slice:1;background:#fff;
  /* fallback rounded gradient border */
  border:2px solid #F49D22}
.wu-row.fill{border:0;padding:28px 48px;background:linear-gradient(90deg,#F15A24,#F6AB04);overflow:hidden}
.wu-row img{width:96px;flex:0 0 auto;background:#fff;border-radius:14px}
.wu-row.fill img{background:transparent}
.wu-row h4{font-size:17.5px;margin-bottom:8px}
.wu-row p{font-size:16px;line-height:1.8;text-align:justify}
.wu-row.line p{color:#111}
.vision{background:linear-gradient(rgba(10,12,20,.62),rgba(10,12,20,.62)),url(../assets/img/bg-vision.jpg) center/cover;padding:76px 0 86px;color:#fff;text-align:center}
.vision h2{color:var(--orange);font-size:clamp(26px,2.2vw,40px);margin-bottom:46px;font-weight:bold}
.vision p{max-width:1350px;margin:0 auto 8px;font-size:16px;line-height:1.95}

/* =====================================================
   CONTACT / JOIN US
   ===================================================== */
.office-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;padding:56px 0 72px}
.office{background:#fff;border-radius:8px;box-shadow:0 4px 16px rgba(20,30,50,.08);padding:30px 32px}
.office h3{color:var(--orange);font-size:18.5px;margin-bottom:22px;font-weight:normal}
.office li{display:flex;gap:13px;font-size:15px;color:#444;margin-bottom:16px;line-height:1.55}
.office svg{width:17px;height:17px;fill:var(--orange);flex:0 0 auto;margin-top:2px}
.contact-page{background:var(--light-bg)}
.join-page{background:var(--light-bg);padding-bottom:70px}
.join-title{text-align:center;color:var(--orange);font-size:clamp(24px,2vw,36px);padding:54px 0 34px}
.join-intro{background:#fff;border-radius:8px;box-shadow:var(--shadow);padding:36px 44px;font-size:16px;color:#333;line-height:2.15}
.jobs-title{text-align:center;color:var(--orange);font-size:clamp(24px,2vw,34px);padding:52px 0 36px}
.jobs-table .jrow-head,.jobs-table .jrow .cells{display:grid;grid-template-columns:2fr 1.6fr 1.6fr 1.6fr 1.2fr;align-items:center}
.jobs-table .jrow-head{background:linear-gradient(90deg,#F7941D,#F58220);color:#fff;font-size:16px;border-radius:6px 6px 0 0;padding:18px 34px}
.jobs-table .jrow .cells{padding:17px 34px;font-size:16px;cursor:pointer}
.jobs-table .jrow{background:#fff}
.jobs-table .jrow.alt{background:#F9B233;color:#222}
.jobs-table .jrow .rm{display:flex;align-items:center;gap:8px}
.jobs-table .jrow .rm .chev{position:relative;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex:0 0 18px;color:#666;font-size:0;line-height:0;transform:rotate(180deg);transition:transform .22s ease,color .18s ease}
.jobs-table .jrow .rm .chev::before{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px}
.jobs-table .jrow:hover .rm .chev{color:var(--orange-deep)}
.jobs-table .jdetail{max-height:0;overflow:hidden;background:#fff;padding:0 34px;border-top:0 solid #eee;
  transition:max-height .5s ease,padding .5s ease}
.jobs-table .jrow.open + .jdetail{max-height:none;padding:12px 34px 34px;border-top:1px solid #eee}
.jobs-table .jrow.open .rm .chev{transform:rotate(0)}
.jdetail h4{font-size:16px;text-decoration:underline;text-underline-offset:5px;margin:18px 0 20px}
.jdetail li{font-size:16px;color:#333;margin-bottom:14px;padding-left:16px;position:relative;line-height:1.7}
.jdetail li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:#333}
.jdetail .btn{margin-top:12px;padding:10px 26px;font-size:14px}
.resume-modal{position:fixed;inset:0;z-index:130;background:rgba(12,12,16,.64);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease}
.resume-modal.open{opacity:1;visibility:visible}
.resume-dialog{width:min(760px,94vw);max-height:min(86vh,760px);overflow:auto;background:#fff;border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.32);transform:translateY(18px) scale(.98);transition:transform .24s cubic-bezier(.22,.75,.3,1)}
.resume-modal.open .resume-dialog{transform:none}
.resume-head{display:flex;align-items:center;justify-content:space-between;padding:20px 26px;border-bottom:1px solid #F0E1D6}
.resume-head h3{font-size:22px;color:#F16122}
.resume-close{width:34px;height:34px;border-radius:50%;border:none;background:#F6F7F9;color:#333;font-size:20px;cursor:pointer}
.resume-body{padding:24px 26px 28px}
.resume-job{background:#FFF7EF;border:1px solid #F4C39B;border-radius:10px;padding:18px 20px;margin-bottom:24px}
.resume-job h4{font-size:20px;color:#262A30;margin-bottom:8px}
.resume-meta{display:flex;flex-wrap:wrap;gap:10px 18px;color:#666;font-size:13px;margin-bottom:14px}
.resume-req{font-size:13.5px;color:#333;line-height:1.75;max-height:180px;overflow:auto;padding-right:4px}
.resume-form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.resume-field label{display:block;font-size:14px;color:#333;margin-bottom:8px}
.resume-field input{width:100%;height:44px;border:1px solid #CDD2D8;border-radius:5px;padding:0 12px;outline:none}
.resume-field input:focus{border-color:#F16122;box-shadow:0 0 0 3px rgba(241,97,34,.12)}
.resume-message{grid-column:1/-1;min-height:22px;font-size:13.5px;color:#666}
.resume-message.ok{color:#279E5C}
.resume-message.err{color:#C0392B}
.resume-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:12px;margin-top:4px}
.resume-actions .btn{padding:10px 28px}
.resume-actions .ghost{background:#fff;color:#555;border:1px solid #D8DDE3;transition:transform .18s ease,box-shadow .18s ease,color .18s ease,border-color .18s ease}
.resume-actions .ghost:hover,.resume-actions .ghost:focus-visible{color:#F16122;border-color:#F16122;box-shadow:0 10px 22px rgba(241,97,34,.18);filter:none}
.resume-send-btn{font-family:inherit;font-size:16px;font-weight:600;background:linear-gradient(90deg,#F16122,#F6AB04);color:#fff;padding:.72em 1.12em .72em .95em;display:flex;align-items:center;justify-content:center;border:none;border-radius:999px;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;cursor:pointer;min-width:112px;height:44px;box-shadow:0 10px 22px rgba(241,97,34,.28)}
.resume-send-btn .svg-wrapper-1{display:flex;align-items:center;justify-content:center}
.resume-send-btn .svg-wrapper{display:block;line-height:0}
.resume-send-btn .send-label{display:block;margin-left:.35em;transition:transform .3s ease-in-out,opacity .25s ease-in-out}
.resume-send-btn svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform-origin:center center;transition:transform .3s ease-in-out}
.resume-send-btn:hover{box-shadow:0 14px 28px rgba(241,97,34,.34)}
.resume-send-btn:hover .svg-wrapper{animation:resumeFly 0.6s ease-in-out infinite alternate}
.resume-send-btn:hover svg{transform:translateX(1.2em) rotate(45deg) scale(1.1)}
.resume-send-btn:hover .send-label{transform:translateX(6.5em);opacity:0}
.resume-send-btn:active{transform:scale(.95)}
.resume-send-btn:focus-visible{outline:3px solid rgba(247,148,29,.34);outline-offset:4px}
@keyframes resumeFly{
  from{transform:translateY(.1em)}
  to{transform:translateY(-.1em)}
}

/* =====================================================
   NEWS
   ===================================================== */
.news-page{background:var(--light-bg);padding:52px 0 66px}
.news-item{background:#fff;border-radius:10px;box-shadow:0 4px 14px rgba(20,30,50,.06);padding:26px;display:flex;gap:38px;margin-bottom:34px}
/* 缩略图框统一 680:312（默认图 news-computex.jpg 的比例），图片裁切填满。
   不固定比例时框高随图走：宽扁的产品 banner 矮、方图高，一列卡片参差不齐。 */
.news-item .thumb{flex:0 0 340px;align-self:flex-start;aspect-ratio:680/312;border-radius:6px;overflow:hidden;background:#EEF1F5}
.news-item .thumb img{display:block;width:100%;height:100%;object-fit:cover}
.news-item .date{color:#888;font-size:14px;margin:6px 0 8px}
.news-item h3{font-size:18.5px;margin-bottom:10px}
.news-item p{font-size:16px;color:#555;margin-bottom:18px}
.news-item .btn{padding:9px 24px;font-size:13.5px}
.article-card{background:#fff;border-radius:10px;box-shadow:var(--shadow);padding:44px 52px}
.article-card h1{font-size:21px;margin-bottom:6px}
.article-card .date{color:#888;font-size:14px;margin-bottom:26px}
.article-card p{font-size:16px;color:#333;line-height:2.3;margin-bottom:6px;text-align:justify}
.article-card .art-img{max-width:560px;margin:26px 0 8px}

/* ===== CMS 富文本正文排版 =====
   作用域：新闻正文（.article-card）、产品详情页 Overview（.tabpane）、
   招聘职责（.job-body）、公司信息（.about-body）—— 都是后台富文本编辑器产出的内容。

   为什么要单独一套：编辑器允许 h2/h3/引用/表格，而这几个容器此前只定义了
   h1/p（新闻）和 h4/ul（产品 Tab），其余标签全是浏览器默认样式，一用就露馅。

   ⚠️ 这里的标签集必须与 cms/lib/richtext.js 的白名单、cms/admin/app.js 的工具栏
      三边一致。多了没人产出，少了就会「编辑器里好好的、发布后没样式」。 */
/* 富文本里的小标题同样走 55 Roman；靠字号拉层级，不靠字重 */
.article-card h2,.tabpane h2{font-size:18px;margin:28px 0 12px;font-weight:400}
.article-card h3,.tabpane h3{font-size:16px;margin:22px 0 10px;font-weight:400}
.article-card strong,.article-card b,.tabpane strong,.tabpane b{font-weight:bold}
.article-card ul,.article-card ol,.tabpane ol{margin:0 0 18px;padding-left:22px}
.article-card li,.tabpane ol li{font-size:14px;color:#333;line-height:1.9;margin-bottom:8px}
.article-card ul{list-style:disc}
.article-card ol,.tabpane ol{list-style:decimal}
.article-card blockquote,.tabpane blockquote{
  margin:0 0 18px;padding:2px 0 2px 16px;border-left:3px solid var(--orange,#E8380D);
  color:#555;font-size:14px;line-height:1.9}
/* 富文本正文里的链接：橙色 + 下划线。
   **必须排除按钮** —— 产品详情页 Q&A 的「Read More」和下载区的按钮都是
   <a class="btn"> 且正好落在 .tabpane 里，而 .tabpane a (0,1,1) 压得过
   .btn (0,1,0)，结果是橙底上写橙字，按钮文字直接看不见（下载按钮则是被
   加了条多余的下划线）。 */
.article-card a:not([class*="btn"]),.tabpane a:not([class*="btn"]){
  color:var(--orange,#E8380D);text-decoration:underline}
.article-card img,.tabpane img{max-width:100%;height:auto;border-radius:6px;margin:8px 0}
.article-card hr,.tabpane hr{border:none;border-top:1px solid #E4E7EC;margin:26px 0}

/* 正文里的表格。与规格表 .spec-table 是两回事：那张表结构固定由发布器生成，
   这里是编辑器里手打的，列数不可控。
   **必须能横向滚动** —— 640px 断点下一张四列表格会把整个页面撑破，
   而页面一旦出现横向滚动条，所有区块的排版都会跟着错位。
   **必须排除 .spec-table** —— 这段写在 .spec-table 后面，不排除的话
   display:block 会让规格表塌成内容宽度（不铺满），text-align:left 又靠更高的
   特异性盖掉规格表的居中。规格表自己的横向滚动交给外层 .spec-scroll。 */
.article-card table,.tabpane table:not(.spec-table){
  display:block;overflow-x:auto;max-width:100%;
  border-collapse:collapse;margin:0 0 18px;font-size:14px}
.article-card table th,.tabpane table:not(.spec-table) th,
.article-card table td,.tabpane table:not(.spec-table) td{
  border:1px solid #E4E7EC;padding:9px 14px;text-align:left;line-height:1.7}
.article-card table th,.tabpane table:not(.spec-table) th{background:#F7F8FA;font-weight:700;white-space:nowrap}
.article-card table tr:nth-child(even) td,
.tabpane table:not(.spec-table) tr:nth-child(even) td{background:#FCFCFD}
.pn-grid{display:grid;grid-template-columns:1fr 1fr;gap:38px;margin-top:40px}
.pn-card{background:#fff;border:1px solid #ddd;border-radius:10px;padding:20px 28px}
.pn-card .lab{font-size:14px;color:#666;margin-bottom:8px}
.pn-card h3{font-size:17px;margin-bottom:6px}
.pn-card .date{font-size:13.5px;color:#888}

/* =====================================================
   FAQ
   ===================================================== */
.faq-page{padding:56px 0 64px;background:#fff}
.faq-card{background:#fff;border-radius:10px;box-shadow:var(--shadow);padding:44px 40px;display:grid;grid-template-columns:230px 1fr;gap:44px}
.faq-side h3{color:var(--orange);font-size:20px;margin-bottom:26px;font-weight:normal}
/* display:table shrinks each link to its text width so the underline aligns
   to the content; consecutive tables still stack vertically */
.faq-side a{display:table;font-size:16px;color:#555;margin-bottom:20px;position:relative}
.faq-side a::after{content:"";display:block;height:2px;background:var(--orange);margin-top:5px;
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.faq-side a:hover{color:var(--orange-deep)}
.faq-side a.on{color:var(--orange)}
.faq-side a:hover::after,.faq-side a.on::after{transform:scaleX(1)}
.faq-main{border-left:1px solid #E5C9A8;padding-left:44px}
.faq-main .result{font-size:12.5px;color:#666;margin-bottom:26px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px 60px}
.faq-q h4{font-size:17px;font-weight:normal;color:#222;line-height:1.6;margin-bottom:24px;min-height:76px}
.faq-q .btn{padding:9px 22px;font-size:13.5px}

/* =====================================================
   DOWNLOAD / QUOTE / SUPPORT forms
   ===================================================== */
.support-page{background:var(--light-bg);padding:48px 0 72px}
.intro-card{background:#fff;border-radius:8px;box-shadow:var(--shadow);padding:40px 44px;display:flex;gap:44px;align-items:center;margin-bottom:44px}
.intro-card img{flex:0 0 380px;width:380px;border-radius:4px}
.intro-card p{font-size:16px;color:#333;margin-bottom:16px}
.dl-search{display:flex;gap:22px;margin-bottom:52px}
.dl-search input{flex:1;height:54px;border:1.5px solid #3a3a3a;border-radius:999px;padding:0 28px;font-size:15.5px;outline:none;background:#fff;
  transition:border-color .2s,box-shadow .2s}
.dl-search input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(247,148,29,.14)}
.dl-search .btn{padding:0 48px;border-radius:999px;font-size:16px}
#dl-search-btn.uiverse-search-btn{--primary:#F7941D;--neutral-1:#fff;--neutral-2:#f3f4f6;--radius:16px;
  position:relative;isolation:isolate;overflow:visible;display:flex;align-items:center;justify-content:center;gap:0;
  min-width:220px;height:72px;padding:22px;border:0;border-radius:var(--radius);background:transparent;color:#292B30;
  font-size:19px;font-weight:700;letter-spacing:0;text-shadow:0 1px 1px rgba(255,255,255,.65);cursor:pointer;
  box-shadow:0 1px 1px rgba(255,255,255,.45),0 12px 24px rgba(0,0,0,.15),0 4px 8px rgba(0,0,0,.10);
  transition:transform .4s cubic-bezier(.175,.885,.32,1.275),box-shadow .4s cubic-bezier(.175,.885,.32,1.275)}
#dl-search-btn.uiverse-search-btn::after{content:"";position:absolute;inset:0;z-index:0;border:2.5px solid transparent;border-radius:var(--radius);
  background:linear-gradient(var(--neutral-1),var(--neutral-2)) padding-box,linear-gradient(to bottom,rgba(0,0,0,.1),rgba(0,0,0,.45)) border-box;
  transition:transform .4s ease,box-shadow .4s ease}
#dl-search-btn.uiverse-search-btn::before{content:"";position:absolute;inset:7px 6px 6px;z-index:2;border-radius:30px;
  background:linear-gradient(to top,var(--neutral-1),var(--neutral-2));filter:blur(.5px)}
#dl-search-btn.uiverse-search-btn:hover{transform:translateY(-2px) scale(1.02);
  box-shadow:0 2px 2px rgba(255,255,255,.4),0 18px 32px rgba(0,0,0,.15),0 8px 12px rgba(0,0,0,.10)}
#dl-search-btn.uiverse-search-btn:hover::after{transform:scale(1.05,1.1);box-shadow:inset 0 -1px 3px rgba(255,255,255,1)}
#dl-search-btn.uiverse-search-btn:active{transform:scale(1);box-shadow:0 0 1px 2px rgba(255,255,255,.3),0 10px 3px -3px rgba(0,0,0,.2)}
#dl-search-btn.uiverse-search-btn:focus-visible{outline:3px solid rgba(247,148,29,.36);outline-offset:6px}
#dl-search-btn .ub-outline{position:absolute;inset:-2px -3.5px;z-index:1;border-radius:inherit;overflow:hidden;opacity:0;transition:opacity .4s ease}
#dl-search-btn .ub-outline::before{content:"";position:absolute;inset:-100%;
  background:conic-gradient(from 180deg,transparent 60%,var(--primary) 85%,transparent 100%);
  opacity:.78;animation:ubSpin 2.5s linear infinite;animation-play-state:paused}
#dl-search-btn:hover .ub-outline{opacity:1}
#dl-search-btn:hover .ub-outline::before{animation-play-state:running}
#dl-search-btn .ub-state{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;padding-left:29px;color:#292B30}
#dl-search-btn .ub-icon{position:absolute;left:0;top:0;bottom:0;margin:auto;display:flex;align-items:center;justify-content:center;
  color:#3A3D44;transform:scale(1.25);transition:transform .3s ease,color .3s ease}
#dl-search-btn .ub-icon svg{overflow:visible}
#dl-search-btn .ub-text{display:flex;align-items:center;justify-content:center}
#dl-search-btn .ub-text span{display:block;opacity:0;animation:ubSlideDown .8s ease forwards calc(var(--i) * .03s)}
#dl-search-btn:hover .ub-text span{opacity:1;animation:ubWave .5s ease forwards calc(var(--i) * .02s)}
#dl-search-btn:focus .ub-text span{opacity:1;animation:ubDisappear .6s ease forwards calc(var(--i) * .03s)}
#dl-search-btn .ub-state--default .ub-icon svg{animation:ubLand .6s ease forwards}
#dl-search-btn:hover .ub-state--default .ub-icon{color:var(--primary);transform:rotate(45deg) scale(1.25)}
#dl-search-btn:focus .ub-state--default .ub-icon{transform:rotate(0) scale(1.25)}
#dl-search-btn:focus .ub-state--default .ub-icon svg{animation:ubTakeOff .8s linear forwards}
#dl-search-btn .ub-state--default .ub-icon::before{content:"";position:absolute;left:-5px;top:50%;width:0;height:2px;
  background:linear-gradient(to right,transparent,rgba(247,148,29,.72))}
#dl-search-btn:focus .ub-state--default .ub-icon::before{animation:ubContrail .8s linear forwards}
#dl-search-btn .ub-state--sent{display:none;color:var(--primary)}
#dl-search-btn .ub-state--sent .ub-icon{color:var(--primary)}
#dl-search-btn:focus .ub-state--default{position:absolute}
#dl-search-btn:focus .ub-state--sent{display:flex}
#dl-search-btn:focus .ub-state--sent .ub-text span{opacity:0;animation:ubSlideDown .8s ease forwards calc(var(--i) * .08s)}
#dl-search-btn:focus .ub-state--sent .ub-icon svg{opacity:0;animation:ubAppear 1.2s ease forwards .8s}
@keyframes ubSpin{to{transform:rotate(360deg)}}
@keyframes ubWave{30%{opacity:1;transform:translateY(4px) rotate(-3deg)}50%{opacity:1;transform:translateY(-3px) rotate(2deg);color:var(--primary)}100%{opacity:1;transform:translateY(0);color:#292B30}}
@keyframes ubSlideDown{0%{opacity:0;transform:translateY(-20px) rotate(-8deg);color:var(--primary);filter:blur(5px)}30%{opacity:1;transform:translateY(4px) rotate(3deg);filter:blur(0)}50%{transform:translateY(-3px) rotate(-1deg)}100%{opacity:1;transform:translateY(0);color:#292B30}}
@keyframes ubDisappear{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px);color:var(--primary);filter:blur(5px)}}
@keyframes ubTakeOff{0%{opacity:1;transform:translateX(0) rotate(0deg) scale(1)}20%{transform:translateX(-4px) rotate(-8deg) scale(1.05)}100%{opacity:0;transform:translateX(70px) rotate(45deg) scale(.9)}}
@keyframes ubLand{0%{transform:translateX(-55px) rotate(-35deg) scale(.95);opacity:0}100%{transform:translateX(0) rotate(0deg) scale(1);opacity:1}}
@keyframes ubContrail{0%{width:0;opacity:1}60%{width:32px;opacity:.8}100%{width:45px;opacity:0}}
@keyframes ubAppear{0%{opacity:0;transform:scale(.5) rotate(-10deg);filter:blur(4px)}50%{opacity:1;transform:scale(1.14) rotate(3deg);filter:blur(0)}100%{opacity:1;transform:scale(1) rotate(0)}}
/* find-your-product: category + model side by side (per comp) */
.dl-cats{display:grid;grid-template-columns:1fr 1fr;gap:26px 8%}
/* custom dropdown — trigger keeps the pill look; menu mirrors the search autocomplete (.ac-menu) */
.dd{position:relative}
.dd-trigger{width:100%;height:54px;border:1.5px solid #3a3a3a;border-radius:999px;padding:0 22px 0 24px;
  background:#fff;color:#333;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;
  transition:border-color .15s,box-shadow .15s}
.dd-trigger:hover{border-color:var(--orange)}
.dd.open .dd-trigger{border-color:var(--orange);box-shadow:0 0 0 3px rgba(247,148,29,.14)}
.dd-trigger:disabled{background:#F2F3F5;color:#A9AFB8;cursor:not-allowed;border-color:#D9DDE2}
.dd-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-label.ph{color:#8A90A0}
.dd-trigger:disabled .dd-label{color:#A9AFB8}
.dd-chev{position:relative;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:0 0 20px;font-size:0;line-height:0;color:#666;transition:transform .2s,color .18s}
.dd-chev::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-4px}
.dd.open .dd-chev{transform:rotate(180deg)}
.dd-trigger:disabled .dd-chev{color:#C2C7CE}
.dd-menu{position:absolute;left:0;right:0;top:calc(100% + 8px);background:#fff;border-radius:14px;
  box-shadow:0 16px 40px rgba(20,30,50,.2);padding:8px 0;z-index:30;display:none;max-height:330px;overflow:auto}
.dd.open .dd-menu{display:block;animation:fadeUp .2s ease}
.dd-item{padding:11px 22px;font-size:16px;color:#333;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .12s,color .12s}
.dd-item:hover,.dd-item.on{background:#FFF3E4;color:var(--orange-deep)}
.dd-menu .dd-empty{padding:12px 22px;font-size:13.5px;color:#999}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;max-width:560px}
.fitem{margin-bottom:34px}
.fitem.full{grid-column:1/-1}
.fitem label{display:block;font-size:16px;color:#333;margin-bottom:10px}
.fitem label i{color:#E8380D;font-style:normal;margin-left:3px}
.fitem label .field-err{color:#E8380D;font-style:normal;font-weight:600;font-size:12.5px;margin-left:8px}
.fitem input,.fitem select{width:100%;height:44px;border:1px solid #C9CDD2;border-radius:3px;padding:0 12px;font-size:14px;outline:none;background:#fff}
.fitem input.o,.fitem textarea{border:1px solid #F0A05A}
.fitem select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 18 11'><path d='M1 1l8 8 8-8' fill='none' stroke='%23333' stroke-width='2'/></svg>");background-repeat:no-repeat;background-position:right 12px center}
.fitem textarea{width:100%;height:210px;border-radius:6px;padding:14px;font-size:13.5px;outline:none;resize:vertical;color:#333}
.fitem textarea::placeholder,.fitem input::placeholder{color:#B9BDC4}
.form-wrap{display:grid;grid-template-columns:max-content minmax(320px,380px);gap:clamp(34px,4vw,72px);align-items:start}
.support-page .form-grid{max-width:760px}
.support-page .form-wrap{grid-template-columns:minmax(0,760px) minmax(320px,430px);gap:clamp(32px,3vw,56px)}
.support-page .form-side{padding-top:8px}
.form-side h3{color:var(--orange);font-size:19px;margin:26px 0 18px;font-weight:400}
.form-side p{font-size:16px;color:#222;margin-bottom:14px}
.captcha-blk{margin-top:70px}
.captcha-blk p{margin-bottom:14px}
.captcha-blk img{width:190px;aspect-ratio:140/46;border:1px solid #ccc;margin-bottom:5px;
  background:#F7F8FA;object-fit:contain;cursor:pointer;transition:opacity .15s}
.captcha-blk img.loading{opacity:.45}
.captcha-blk input{width:200px;height:38px;border:1px solid #F0A05A;border-radius:3px;padding:0 10px;outline:none}
.captcha-refresh{margin-left:8px;color:var(--orange-deep);text-decoration:underline;
  cursor:pointer;font-size:12.5px;white-space:nowrap}
.captcha-mobile{display:none}
/* 蜜罐字段：正常用户看不见也不会填；机器人批量填表时经常会填上所有输入框 */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* 简历弹层里的验证码：复用 .captcha-blk 的图片/输入框样式，但要盖掉它给询价页
   侧栏准备的 margin-top:70px —— 那是为了跟表单右侧对齐用的，放进弹层会顶出一大片空白。 */
.resume-field.captcha-blk{margin-top:0}
.resume-field.captcha-blk .resume-captcha-tip{font-size:13px;color:#666;margin-bottom:10px}
.resume-field.captcha-blk img{width:170px;margin-bottom:8px;cursor:pointer}
.resume-field.captcha-blk input{width:100%}
.form-title{color:var(--orange);font-size:clamp(22px,1.8vw,30px);margin:10px 0 12px}
.form-note{font-size:14px;color:#333;padding-bottom:16px;border-bottom:1px solid #ccc;margin-bottom:36px}
.form-note i{color:#E8380D;font-style:normal}
.submit-btn{padding:13px 34px;font-size:16px}

/* =====================================================
   responsive
   ===================================================== */
@media (max-width:1280px){
  .footer-grid{grid-template-columns:240px minmax(270px,1.35fr) repeat(2,minmax(150px,1fr));gap:28px}
  .catgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pd-hero{grid-template-columns:1fr;gap:36px;padding:34px}
  .pd-info{display:flex;flex-direction:column}
  .pd-thumbs{order:-1;margin-top:0;margin-bottom:30px}
  .pd-tabs-card{padding:32px}
}
@media (max-width:1024px){
  .prodgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pc-page{grid-template-columns:repeat(2,minmax(0,1fr))}
  .office-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .relgrid{grid-template-columns:1fr;max-width:420px;margin:0 auto}
  .form-wrap,.support-page .form-wrap{grid-template-columns:1fr}
  .captcha-desktop{display:none}
  .captcha-mobile{display:block;margin-top:0;margin-bottom:22px}
  .captcha-mobile img{width:min(190px,100%)}
  .captcha-mobile input{width:min(260px,100%)}
  .support-page .form-side{padding-top:0}
  .oem-cards{grid-template-columns:1fr}
  .faq-card{grid-template-columns:1fr;gap:20px}
  .faq-main{border-left:none;padding-left:0}
  .cp-hero-in{flex-direction:column}
  .cp-tabs{display:flex;gap:26px;flex-wrap:wrap;flex:none;padding-top:0}
  .cp-tabs a{margin-bottom:0}
  .cp-stats{grid-template-columns:repeat(2,minmax(0,1fr));max-width:460px}
  .news-item{flex-direction:column}
  .news-item .thumb{flex:none;align-self:stretch}
}
@media (max-width:900px){
  .mainnav,.searchbox,.topbar{display:none}
  .navrow{height:64px;justify-content:space-between}
  .hamburger{display:flex;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
  .hamburger i{width:26px;height:3px;background:#fff;border-radius:2px}
  .m-search{display:block;background:none;border:none}
  .m-search svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2}
  .brand{flex-direction:row;align-items:center;border-radius:4px;padding:5px 10px}
  .brand img{height:30px;content:url(../assets/img/logo.png)}
  .brand .tagline{display:none}
  .stats-in{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:26px}
  .stat:nth-child(3){border-right:none}
  .hero-copy{top:24%}
  .hero-cards{top:10%}
  .company-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process{flex-wrap:wrap;justify-content:center;gap:20px}
  .pbar{display:none}
  .cta-in{flex-direction:column;text-align:center}
  .footer-grid{grid-template-columns:1fr 1fr;padding:40px 0 20px}
  .listing-in{grid-template-columns:minmax(0,1fr)}
  .pc-page{gap:16px}
  .jobs-table .jrow-head,.jobs-table .jrow .cells{grid-template-columns:1.6fr 1.2fr 1.2fr 1.4fr 1fr;font-size:12.5px;padding:14px 16px}
  .intro-card{flex-direction:column;align-items:flex-start}
  .intro-card img{width:100%;flex:none}
  .pd-wrap .container{width:100%;max-width:100%;padding:0 14px;overflow:hidden}
  .pd-hero{display:flex!important;flex-direction:column;gap:18px;padding:18px;overflow:hidden;width:100%;max-width:calc(100vw - 28px);border-radius:0;box-sizing:border-box}
  .pd-gallery{width:100%;max-width:calc(100vw - 64px);min-width:0;overflow:hidden}
  .pd-main{min-width:0;overflow:hidden;justify-content:center}
  .pd-main img{width:100%;max-width:100%;height:auto;object-fit:contain}
  .pd-info{display:flex!important;flex-direction:column;width:100%;max-width:calc(100vw - 64px);min-width:0;overflow:hidden}
  .pd-thumbs{order:-3;display:flex!important;gap:10px;margin:0;width:100%;min-width:0;max-width:calc(100vw - 64px);justify-content:flex-start;overflow-x:auto;overflow-y:hidden;padding-bottom:8px;scroll-snap-type:x proximity}
  .pd-thumbs .th{flex:0 0 86px;width:86px;min-width:0;padding:6px}
  .pd-thumbs .th img{width:100%;height:64px;object-fit:contain}
  .pd-topline{order:-2;width:100%;max-width:calc(100vw - 64px);min-width:0;overflow:hidden}
  .pd-topline .btn{position:static;display:inline-flex;max-width:100%;margin:10px 0 16px;white-space:nowrap}
  .pd-topline h1,.pd-info h1{display:block!important;width:100%;max-width:calc(100vw - 96px);min-width:0;padding-right:0!important;font-size:20px;line-height:1.35;white-space:normal!important;overflow:visible;overflow-wrap:anywhere;word-break:break-word;box-sizing:border-box}
  .pd-date,.pd-info ul{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
  .oem-workflow .desktop{display:none}
  .oem-workflow .mobile{display:block;max-width:520px;margin:0 auto}
  .ms-in{flex-direction:column;gap:30px}
  .ms-arrows{display:none}
  .ms-years{display:flex;gap:22px;flex:none}
  .ms-year-window{height:auto;overflow:visible}
  .ms-year-track{display:flex;gap:22px;transform:none!important}
  .ms-years .yr{margin-bottom:0}
}
/* =====================================================
   interactions & motion
   ===================================================== */
html{scroll-behavior:smooth}
/* sticky header after scrolling past banner */
.site-header.fixed{position:fixed;top:-140px;left:0;right:0;transition:top .32s ease;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.site-header.fixed.show{top:0}
.site-header.fixed .topbar{display:none}
/* hover lifts */
.btn{transition:transform .18s ease,box-shadow .18s ease,filter .18s ease,background .18s ease,background-size .18s ease,background-position .18s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(241,97,34,.32)}
.btn.btn-grad:not(.uiverse-search-btn):hover,
.btn.btn-grad:not(.uiverse-search-btn):focus-visible{box-shadow:0 0 0 0 rgba(247,148,29,.42)}
.btn-outline-w:hover{box-shadow:0 10px 22px rgba(0,0,0,.18)}
.btn.btn-grad.btn-watch-fx:hover,
.btn.btn-grad.btn-watch-fx:focus-visible{background-image:linear-gradient(30deg,#F16122,#F6AB04);animation:none;box-shadow:0 14px 28px rgba(241,97,34,.34)}
.btn.btn-outline-w.btn-common-fx:hover,
.btn.btn-outline-w.btn-common-fx:focus-visible{background:#fff;color:#222;border-color:#ddd;animation:btnPulseOrange 1.5s infinite;box-shadow:0 0 0 0 rgba(247,148,29,.42)}
.pcard,.lcard,.office,.news-item,.oem-card,.pn-card,.catcard .thumb{transition:transform .25s ease,box-shadow .25s ease}
.pcard:hover,.lcard:hover,.office:hover,.news-item:hover,.pn-card:hover{transform:translateY(-6px);box-shadow:0 16px 32px rgba(20,30,50,.16)}
.lcard .ph{overflow:hidden}
.lcard .ph img,.catcard .thumb img,.news-item .thumb img,.relcard img{transition:transform .4s ease}
.lcard:hover .ph img,.catcard:hover .thumb img,.news-item:hover .thumb img,.relcard:hover img{transform:scale(1.05)}
.catcard .view{transition:letter-spacing .2s ease}
.catcard:hover .view{letter-spacing:.5px}
.pstep img{transition:transform .25s ease,box-shadow .25s ease}
.pstep:hover img{transform:translateY(-6px) scale(1.05);box-shadow:0 12px 24px rgba(241,97,34,.28)}
.pc-arrow,.pd-gal-arrow{transition:transform .18s ease,color .18s ease,background .18s ease}
.pc-arrow:hover{transform:scale(1.25);color:var(--orange-deep)}
.pd-gal-arrow:hover{background:var(--orange-deep)}
.f-col a,.faq-side a,.footer a{transition:opacity .15s,color .15s,padding-left .15s}
.searchbox{transition:border-color .2s,background .2s,box-shadow .2s}
.searchbox:focus-within{border-color:var(--orange-deep);background:rgba(247,148,29,.16);box-shadow:0 0 0 3px rgba(247,148,29,.2)}

/* 搜索框边框流光：一道高光沿着描边循环扫过。
   做法是在框上盖一层同样圆角的渐变，再用双层遮罩「挖掉中间只留边」——
   所以它只染边框、盖不住输入框里的文字，也不吃鼠标事件。
   遮罩不支持时整层不出现（见 @supports），此时就是原来的静态描边，不会糊成一块。 */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)){
  .searchbox{position:relative;isolation:isolate}
  .searchbox::before{
    content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
    /* 双色光带：白核 + 深橙两侧。顶栏是半透明玻璃，背后是深色 banner 还是白色
       正文都有可能——纯白光带在白底上等于隐形。白核负责在深色/橙色背景上发亮，
       深橙两侧负责在白色背景上显形，两种底色下都看得见。 */
    background:linear-gradient(100deg,
      transparent 38%, rgba(241,90,36,.35) 44%, #F15A24 47.5%,
      #FFFFFF 50%, #F15A24 52.5%, rgba(241,90,36,.35) 56%, transparent 62%);
    filter:drop-shadow(0 0 2px rgba(241,90,36,.5));
    background-size:220% 100%;background-repeat:no-repeat;background-position:140% 0;
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    animation:sb-flow 3.6s linear infinite;
  }
  /* 聚焦时扫得快一点，给一点「已激活」的反馈 */
  .searchbox:focus-within::before{animation-duration:1.8s}
  @keyframes sb-flow{from{background-position:140% 0}to{background-position:-60% 0}}
  @media (prefers-reduced-motion: reduce){.searchbox::before{animation:none;opacity:0}}
}
.fgroup label{transition:color .15s}
.fgroup label:hover{color:var(--orange-deep)}
.fgroup .box{transition:background .15s,border-color .15s}
.ms-years .yr{transition:color .2s}
.ms-years .yr:hover{color:#fff}
.pagination a{transition:background .15s,color .15s}
.pagination a:hover:not(.on){background:#ffe3c2}
/* scroll reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .65s ease,transform .65s ease}
.reveal.in{opacity:1;transform:none}
/* tab fade */
.tabpane.on{animation:fadeUp .35s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* milestone content swap */
.ms-points{transition:opacity .3s ease}
.ms-points.fade{opacity:0}
/* hamburger to X */
.hamburger i{transition:transform .28s ease,opacity .2s ease}
.hamburger.x i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburger.x i:nth-child(2){opacity:0}
.hamburger.x i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* mobile menu slide */
.mobile-menu{transform-origin:top;transform:scaleY(0);opacity:0;transition:transform .28s ease,opacity .28s ease;display:block;pointer-events:none}
.mobile-menu.open{transform:scaleY(1);opacity:1;pointer-events:auto}
/* mobile search bar */
.m-searchbar{display:none;background:#1d1a1e;padding:12px 4%;border-top:1px solid rgba(255,255,255,.1)}
.m-searchbar.open{display:flex;gap:10px}
.m-searchbar input{flex:1;height:40px;border-radius:999px;border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff;padding:0 18px;outline:none}
.m-searchbar .btn{padding:0 22px;height:40px}
/* back to top */
.to-top{position:fixed;right:26px;bottom:32px;width:46px;height:46px;border-radius:50%;background:var(--grad);
  color:#fff;border:none;cursor:pointer;font-size:0;line-height:0;z-index:90;box-shadow:0 8px 20px rgba(241,97,34,.4);
  opacity:0;visibility:hidden;transform:translateY(14px);transition:.25s}
.to-top::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;border-right:2.4px solid currentColor;border-bottom:2.4px solid currentColor;transform:translate(-50%,-32%) rotate(225deg)}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{filter:brightness(1.1)}
/* toast */
.toast{position:fixed;left:50%;bottom:44px;transform:translateX(-50%) translateY(20px);background:#2c2c30;color:#fff;
  padding:13px 28px;border-radius:999px;font-size:14.5px;z-index:99;opacity:0;visibility:hidden;transition:.3s;box-shadow:0 10px 26px rgba(0,0,0,.3)}
.toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.toast.err{background:#C0392B}
/* invalid field */
.fitem input.invalid,.fitem select.invalid,.fitem textarea.invalid{border-color:#E8380D;box-shadow:0 0 0 2px rgba(232,56,13,.15)}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero::before,.hero-cards{animation:none}
  html{scroll-behavior:auto}
}

@media (max-width:640px){
  .prodgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  /* per revision feedback: featured product = 1 per row x 4 rows, swipe to page.
     每页 4 个由 JS 分页保证（index.html: perPageNow），不再靠 CSS 藏第 5~8 个 */
  .pc-page{grid-template-columns:1fr;gap:18px}
  .pcard .ph{aspect-ratio:340/230}
  .pc-arrow{display:none}
  .prod-carousel{padding:0 6px}
  .office-grid{grid-template-columns:1fr}
  .catgrid{grid-template-columns:1fr}
  .stats-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{border-right:none}
  .faq-grid{grid-template-columns:1fr;gap:34px}
  .form-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:22px}
  .hero-copy{position:relative;left:0;top:0;padding:150px 0 60px;max-width:78%}
  .hero-cards{width:88%;top:4%}
  .hero-in{min-height:0}
  .breadcrumb-in{overflow-x:auto;white-space:nowrap;scrollbar-width:none}
  .breadcrumb-in::-webkit-scrollbar{display:none}
  .pd-wrap .container{width:100%;max-width:100%;padding:0 14px;overflow:hidden}
  .pd-hero{display:flex!important;flex-direction:column;gap:18px;padding:18px;overflow:hidden;width:100%;max-width:calc(100vw - 28px);border-radius:0;box-sizing:border-box}
  .pd-gallery{width:100%;max-width:calc(100vw - 64px);min-width:0;overflow:hidden}
  .pd-info{display:flex!important;flex-direction:column;width:100%;max-width:calc(100vw - 64px);min-width:0;overflow:hidden}
  .pd-main{min-width:0;overflow:hidden;justify-content:center}
  .pd-main img{width:100%;max-width:100%;height:auto;object-fit:contain}
  .pd-gal-arrow{top:50%;transform:translateY(-50%);z-index:2;width:32px;height:32px}
  .pd-gal-arrow.prev{left:6px}
  .pd-gal-arrow.next{right:6px}
  .pd-thumbs{order:-3;display:flex!important;gap:10px;margin:0;width:100%;min-width:0;max-width:calc(100vw - 64px);justify-content:flex-start;overflow-x:auto;overflow-y:hidden;padding-bottom:8px;scroll-snap-type:x proximity}
  .pd-thumbs .th{flex:0 0 86px;width:86px;min-width:0;padding:6px}
  .pd-thumbs .th img{width:100%;height:64px;object-fit:contain}
  .pd-topline{order:-2;width:100%;max-width:calc(100vw - 64px);min-width:0;overflow:hidden}
  .pd-topline .btn{position:static;display:inline-flex;max-width:100%;margin:10px 0 16px;white-space:nowrap}
  .pd-topline h1,.pd-info h1{display:block!important;width:100%;max-width:calc(100vw - 96px);min-width:0;padding-right:0!important;font-size:20px;line-height:1.35;white-space:normal!important;overflow:visible;overflow-wrap:anywhere;word-break:break-word;box-sizing:border-box}
  .pd-date,.pd-info ul{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
  .pd-tabs-card{padding:22px}
  .tabbar button{font-size:13px}
  .dl-search{flex-direction:column}
  .dl-search input{height:46px}
  .search-page .search-mainbar{gap:14px;margin-bottom:42px}
  .search-page .search-mainbar input{height:54px}
  .search-page .search-mainbar .btn{width:100%;height:48px;min-width:0}
  .sr-item.sr-media{grid-template-columns:1fr;gap:14px;padding:18px}
  .sr-thumb{aspect-ratio:16/9}
  .dl-row{align-items:flex-start;flex-direction:column;gap:10px}
  .dl-row .left{display:block}
  .dl-row .btn-dl{width:min(100%,calc(100vw - 96px));max-width:360px;margin-top:8px;align-self:flex-start;overflow:visible}
  .dl-row .btn-dl-main{padding:0 18px;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dl-row .btn-dl::before,.dl-row .btn-dl::after{left:8px;width:calc(100% - 16px);padding:0 8px;box-sizing:border-box}
  .article-card{padding:24px}
  .resume-form{grid-template-columns:1fr}
  .resume-actions{justify-content:stretch;flex-direction:column-reverse}
  .resume-actions .btn,.resume-send-btn{width:100%}
  .pn-grid{grid-template-columns:1fr}
  .lcard .ph{padding:14px}
  .lcard .pb{font-size:11.5px}
  .lcard .pb h3{font-size:13px}
  .pcard .pb{font-size:11.5px}
}

/* =====================================================
   phone-comp refinements (Home page phone.ai)
   ===================================================== */
.section-pill .m{display:none}
.process-m{display:none}
.f-col .fchev{display:none}
.f-col.m-only{display:none}
.float-contact{display:none}

@media (max-width:900px){
  /* S-shaped process flow */
  .process{display:none}
  .process-m{display:block;max-width:540px;margin:0 auto 40px}
  .pm-row{display:flex;align-items:flex-start;justify-content:space-between}
  .pm-row .pstep{width:88px;gap:10px}
  .pm-row .pstep img{width:58px;height:58px}
  .pm-row .pstep span{font-size:13px;text-align:center}
  .pm-row .pbar{display:block;flex:1;margin:26px 4px 0;max-width:84px;min-width:24px;height:6px}
  .pm-vrow{display:flex;justify-content:flex-end;padding-right:41px}
  .pm-v{width:6px;height:38px;border-radius:4px;background:linear-gradient(180deg,#F16122,#F6AB04);margin:6px 0}

  /* CTA strip: no logo, text left + buttons right in one row */
  .cta-in{flex-direction:row;flex-wrap:nowrap;text-align:left;gap:12px;align-items:center}
  .cta-logo{display:none}
  .cta-strip h3{font-size:13px;line-height:1.55;min-width:0}
  .cta-actions{flex:0 0 auto;flex-direction:row;gap:8px}
  .cta-actions .btn{padding:8px 13px;font-size:11.5px;white-space:nowrap}

  /* footer: white accordion nav + orange brand block */
  .site-footer{background:#fff;color:#222}
  .footer-grid{display:flex;flex-direction:column;gap:0;padding:8px 0 0}
  .f-col{border-bottom:1px solid #E4E4E4;padding:16px 4px}
  .f-col h4{margin:0;padding:0;font-size:19px;font-weight:normal;color:#333;
    display:flex;justify-content:space-between;align-items:center;width:100%;cursor:pointer}
  .f-col h4::after{display:none}
  .f-col .fchev{position:relative;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex:0 0 24px;color:#999;font-size:0;line-height:0;transition:transform .22s ease,color .18s ease}
  .f-col .fchev::before{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(225deg);margin-top:5px}
  .f-col a{display:none;font-size:15px;color:#555;margin:14px 0 0;padding-left:16px;opacity:1}
  .f-col a{white-space:normal}
  .f-col.open h4{color:var(--orange)}
  .f-col.open a{display:block}
  .f-col.open .fchev{transform:rotate(180deg);color:var(--orange)}
  .f-col.m-only{display:block}
  .f-brand{order:99;margin:26px calc(50% - 50vw) 0;padding:30px 6vw 4px;
    background:linear-gradient(90deg,#FF6200,#FF8E00);display:flex;flex-direction:column;align-items:center;color:#fff}
  .f-brand .logo-card{width:176px;margin-bottom:20px}
  .f-contact li{display:none}
  .f-contact li.f-addr{display:flex;justify-content:center;font-size:13px;margin-bottom:4px}
  .f-contact li.f-addr br{display:none}
  .footer-bottom{background:linear-gradient(90deg,#FF6200,#FF8E00);border-top:none;color:#fff;padding-top:8px}

  /* floating contact buttons —— 默认只显示电话键，点击后向上展开邮件与客服。
     电话键是整组的锚点，展开收起时位置不动 */
  .float-contact{display:flex;position:fixed;right:10px;bottom:92px;flex-direction:column;gap:12px;z-index:85}
  .float-contact a{width:44px;height:44px;border-radius:50%;background:#fff;
    box-shadow:0 4px 14px rgba(0,0,0,.16);display:flex;align-items:center;justify-content:center;
    flex:0 0 auto}
  .float-contact svg{width:20px;height:20px;stroke:var(--orange);fill:none;stroke-width:1.7}
  .fc-actions{display:flex;flex-direction:column;gap:12px}
  .fc-actions a{transition:opacity .22s ease,transform .26s cubic-bezier(.2,.9,.3,1.2)}
  /* 收起：缩回电话键的位置并淡出，同时不再占据布局高度 */
  .float-contact.collapsed .fc-actions{
    margin-bottom:-12px;                 /* 抵消与电话键之间的 gap */
    pointer-events:none}
  .float-contact.collapsed .fc-actions a{
    opacity:0;transform:translateY(24px) scale(.4);height:0;margin:-6px 0}
  /* 展开时错开一点点，看起来像依次弹出而不是整块闪现 */
  .float-contact:not(.collapsed) .fc-actions a:first-child{transition-delay:.06s}
  /* 展开状态给电话键一点视觉反馈 */
  .float-contact:not(.collapsed) .fc-main{background:var(--grad);box-shadow:0 6px 18px rgba(241,97,34,.4)}
  .float-contact:not(.collapsed) .fc-main svg{stroke:#fff}
  .to-top{right:10px;bottom:34px;width:44px;height:44px;z-index:85}
  body.mobile-menu-open .float-contact,
  body.mobile-menu-open .to-top{opacity:0;visibility:hidden;pointer-events:none}
}

@media (max-width:640px){
  /* stats: 3 columns x 2 rows per phone comp */
  .stats-in{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:30px}
  .stat{border-right:1px solid #E3E6EA;padding:2px 4px;gap:8px}
  .stat:nth-child(3n){border-right:none}
  .stat img{height:36px}
  .stat b{font-size:17px}
  .stat b small{font-size:.5em}
  .stat span{font-size:11px}
  /* company: hide paragraphs on phone */
  .company p{display:none}
  .company h3{margin-bottom:22px}
  /* pill text swap */
  .section-pill .d{display:none}
  .section-pill .m{display:inline}
  .section-pill{font-size:15.5px;padding:12px 30px;white-space:nowrap;margin-bottom:36px}
}

/* ===== mobile S-flow: direction-aware bar animations ===== */
@media (max-width:900px){
  /* row 2 runs right-to-left (Manufacturing -> QA -> Delivery) */
  .pm-row.rev .pbar{animation-name:barFlowR}
  .pm-row.rev .pbar::after{animation-name:barSweepR}
  /* vertical connector flows downward */
  .pm-v{position:relative;overflow:hidden;
    background:linear-gradient(180deg,#F16122,#F6AB04,#F16122,#F6AB04);background-size:100% 300%;
    animation:vbarFlow 3s linear infinite}
  .pm-v::after{content:"";position:absolute;left:0;right:0;top:0;height:42%;border-radius:4px;
    background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.9),rgba(255,255,255,0));
    transform:translateY(-120%);animation:vbarSweep 2.1s ease-in-out infinite;animation-delay:var(--d,0s)}
}
@keyframes barFlowR{from{background-position:0 0}to{background-position:100% 0}}
@keyframes barSweepR{0%{transform:translateX(340%)}55%,100%{transform:translateX(-120%)}}
@keyframes vbarFlow{from{background-position:0 100%}to{background-position:0 0}}
@keyframes vbarSweep{0%{transform:translateY(-120%)}55%,100%{transform:translateY(290%)}}
@media (prefers-reduced-motion: reduce){
  .pm-v,.pm-v::after,.pm-row.rev .pbar,.pm-row.rev .pbar::after{animation:none}
}

/* =====================================================
   glass header (70% transparent) — overlays banners
   ===================================================== */
.site-header{position:absolute;left:0;right:0;top:0;
  /* glassmorphism per uiverse/narmesh_sah "purple-quail-14":
     white translucent fill + white rim highlight + soft dark drop shadow */
  background:rgba(255,255,255,.15);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.18);
  box-shadow:0 8px 32px 0 rgba(13,38,38,.37),inset 0 1px 0 rgba(255,255,255,.3)}
.mainnav>li>a,.topbar-in,.brand .tagline{text-shadow:0 1px 10px rgba(10,14,20,.55)}
@supports not (backdrop-filter:blur(1px)){
  .site-header{background:rgba(30,32,40,.78)}
}
.site-header.fixed{background:rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 8px 32px 0 rgba(13,38,38,.42),inset 0 1px 0 rgba(255,255,255,.32)}
.header-underlay{background:linear-gradient(180deg,#141114 0%,#221c19 55%,#382c22 100%)}
.page-banner{height:clamp(280px,32vw,580px);padding-top:64px}
.hero-in{padding-top:60px}
.mobile-menu{background:rgba(24,23,28,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.m-searchbar{background:rgba(24,20,18,.85);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
@media (max-width:900px){
  .page-banner{padding-top:56px;height:clamp(230px,40vw,420px)}
  .hero-in{padding-top:0}
}

/* =====================================================
   mobile filter (category page phone comp)
   ===================================================== */
@media (max-width:900px){
  .listing{padding-top:0}
  .listing-in{width:100%;max-width:none;gap:6px}
  .filter-card{background:transparent;box-shadow:none;border-radius:0;padding:26px 4vw 18px;
    margin:0;background:#EEF0F3}
  .filter-card h3{text-align:center;font-size:27px;margin-bottom:8px;padding:0}
  .f-reset{position:static;display:flex;transform:none;justify-content:center;width:max-content;margin:0 auto 16px;font-size:15px}
  .f-reset:hover,.f-reset:focus-visible{transform:none}
  .fgroup-row{display:flex;gap:10px;overflow-x:auto;align-items:flex-start;padding-bottom:8px;
    scrollbar-width:none}
  .fgroup-row::-webkit-scrollbar{display:none}
  .fgroup{border-bottom:none;margin-bottom:0;flex:0 0 auto;max-width:70vw}
  .fgroup .fhead{background:#fff;border-radius:9px;padding:9px 15px;font-size:13.5px;font-weight:normal;
    gap:10px;white-space:nowrap;box-shadow:0 1px 4px rgba(20,30,50,.06)}
  .fgroup .fhead .chev{width:18px;height:18px;flex-basis:18px}
  .fgroup .fhead .chev::before{width:7px;height:7px;border-width:1.8px;margin-top:-3px}
  .fgroup ul{background:#fff;border-radius:12px;margin-top:10px;padding:14px 16px 6px;
    box-shadow:0 10px 24px rgba(20,30,50,.12);min-width:160px}
  .fgroup li{margin-bottom:12px}
  .fgroup label{font-size:13.5px;white-space:nowrap}
  .list-main{padding:0 4vw}
  .list-main .list-top{font-size:12.5px;padding:14px 2px 0}
  .lcard .ph{border-bottom:2px solid #F0812C}
}
@media (min-width:901px){
  .fgroup-row{display:contents}
}
/* search results page */
.search-page{background:var(--light-bg);padding:46px 0 70px}
.search-page .search-mainbar{align-items:stretch}
.search-page .search-mainbar .dl-ac{min-width:0}
.search-page .search-mainbar .btn{height:54px;min-width:150px}
.search-count{font-size:14.5px;color:#555;margin:26px 0 6px}
.search-count b{color:var(--orange-deep)}
.search-tabs{display:flex;gap:10px;margin:18px 0 24px;flex-wrap:wrap}
.search-tabs button{border:1px solid #D8DCE1;background:#fff;border-radius:999px;padding:7px 20px;
  font-size:13.5px;color:#555;cursor:pointer;transition:.15s}
.search-tabs button.on{background:var(--grad);color:#fff;border-color:transparent}
.sr-item{background:#fff;border-radius:10px;box-shadow:0 3px 12px rgba(20,30,50,.06);
  padding:20px 26px;margin-bottom:16px;display:block;transition:transform .2s,box-shadow .2s}
.sr-item:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(20,30,50,.12)}
.sr-item.sr-media{display:grid;grid-template-columns:180px minmax(0,1fr);gap:24px;align-items:center;padding:18px 24px}
.sr-thumb{display:block;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:#F4F6F8}
.sr-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.sr-item.sr-media:hover .sr-thumb img{transform:scale(1.05)}
/* 新闻封面是 2.2:1 的横幅（后台封面图那栏写了建议尺寸），塞进 4/3 的框里会被
   裁掉两侧一大截。新闻卡按封面自身比例给框，整张图就能完整显示；产品图仍是 4/3。 */
.sr-item.news .sr-thumb{aspect-ratio:680/312}
.sr-body{display:block;min-width:0}
.sr-item .tag{display:inline-block;font-size:11px;color:#fff;background:var(--orange);border-radius:4px;
  padding:2px 9px;margin-bottom:8px;letter-spacing:.4px}
.sr-item .tag.news{background:#5B8DEF}
.sr-item .tag.support{background:#8A94A6}
.sr-item h3{font-size:16.5px;color:#222;margin-bottom:6px}
.sr-item h3 mark,.sr-item p mark{background:#FFE2BC;color:#D9530B;padding:0 1px}
.sr-item p{font-size:15px;color:#666;line-height:1.7}
.sr-product-card .tag{display:inline-block;font-size:11px;color:#fff;background:var(--orange);border-radius:4px;
  padding:4px 10px;margin-bottom:10px;letter-spacing:.2px}
.sr-product-card mark{background:#FFE2BC;color:#D9530B;padding:0 1px}
.sr-empty{text-align:center;color:#888;padding:70px 0;font-size:15px}
.sr-empty b{display:block;font-size:40px;margin-bottom:14px;color:#D8DCE1}

@media (max-width:700px){
.wu-row{flex-direction:column;align-items:center;gap:18px;border-radius:34px;padding:24px 22px;margin-bottom:22px;text-align:center}
.wu-row.fill{padding:26px 24px}
  .wu-row img{width:88px;max-width:34vw}
  .wu-row h4{text-align:center;font-size:16px;line-height:1.4}
  .wu-row p{text-align:left;font-size:13.5px;line-height:1.75}
  .sr-item.sr-media{grid-template-columns:1fr;gap:14px;padding:18px}
  .sr-thumb{width:100%;aspect-ratio:16/10}
  .sr-body{width:100%}
  .sr-item h3{font-size:16px;line-height:1.45}
  .sr-item p{font-size:13.5px;line-height:1.65}
}

/* grid track blowout guards (mobile filter pills) */
@media (max-width:900px){
  .list-main,.filter-card{min-width:0;max-width:100%}
}

/* =====================================================
   round 5: video modal / dot progress / hover highlight / cascade
   ===================================================== */
/* video modal */
.vmodal{position:fixed;inset:0;background:rgba(10,10,12,.78);z-index:120;display:flex;align-items:center;
  justify-content:center;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.vmodal.open{opacity:1;visibility:visible}
.vmodal .vbox{width:min(880px,92vw);background:#000;border-radius:12px;overflow:hidden;position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.5);transform:translateY(24px) scale(.97);transition:transform .25s}
.vmodal.open .vbox{transform:none}
.vmodal video{width:100%;display:block;aspect-ratio:16/9;background:#000;object-fit:cover}
.vmodal .vclose{position:absolute;top:10px;right:10px;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.18);color:#fff;border:none;font-size:17px;cursor:pointer;z-index:2}
.vmodal .vclose:hover{background:var(--orange-deep)}
.vmodal .vnote{position:absolute;left:0;right:0;bottom:0;text-align:center;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.75));padding:34px 12px 14px;font-size:13px;display:none}
.vmodal.no-src .vnote{display:block}
body.modal-open{overflow:hidden}

/* hero dot progress (5s auto-rotate) */
.hero .dots i{transition:width .3s}
.hero .dots i.on{position:relative;overflow:hidden;background:rgba(255,255,255,.35)}
.hero .dots i.on::after{content:"";position:absolute;inset:0;border-radius:5px;background:var(--grad);
  transform-origin:left;transform:scaleX(0);animation:dotProg 5s linear forwards}
@keyframes dotProg{to{transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){.hero .dots i.on::after{animation:none;transform:none}}

/* selected-style moves to hover */
.pcard .pb,.lcard .pb,.lcard .pb h3{transition:background .25s ease,color .25s ease}
.pcard:hover .pb{background:#F8931F;color:#fff}
.lcard:hover .pb{background:#F8931F;color:#fff}
.lcard:hover .pb h3{color:#fff}


/* =====================================================
   round 6: banner motion / hero slider / download results
   ===================================================== */
/* --- inner-page banner (hero) motion --- */
.page-banner{isolation:isolate}
.page-banner::before{content:"";position:absolute;inset:0;z-index:-1;background:inherit}
.page-banner h1{animation:bannerIn .85s cubic-bezier(.22,.75,.3,1) both .1s}
.page-banner h1::after{content:"";display:block;width:78px;height:4px;border-radius:2px;background:var(--grad);
  margin-top:16px;transform-origin:left;animation:barGrow .6s ease both .6s}
.cat-banner h1{max-width:min(52%,760px);font-size:clamp(30px,3.05vw,56px);line-height:1.12;white-space:normal;text-wrap:balance}
@media (max-width:700px){
  .cat-banner h1{max-width:100%;font-size:clamp(28px,7vw,42px)}
}
@keyframes bannerIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* --- home hero slider: image/video layers + content swap --- */
.hero.has-slides::before{display:none}
.hero-bgs{position:absolute;inset:0;overflow:hidden}
.hero.has-slides{cursor:grab;touch-action:pan-y}
.hero.has-slides.is-dragging{cursor:grabbing}
.hero.has-slides .dots,.hero.has-slides a,.hero.has-slides button{cursor:pointer}
.hero-bg{position:absolute;inset:0;background:#111 center/cover no-repeat;opacity:0;transition:opacity .9s ease}
.hero-bg.on{opacity:1}

.hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-mobile-img{display:none}
.hero-copy{transition:opacity .28s ease,transform .28s ease}
.hero-copy.swap{opacity:0;transform:translateY(20px)}
.hero-cards{transition:opacity .6s ease}
.hero.no-cards .hero-cards{opacity:0}

@media (prefers-reduced-motion: reduce){
  .page-banner h1,.page-banner h1::after{animation:none}
}

/* Mobile home hero: keep the visual carousel visible on the first screen.

   高度跟素材的真实比例走，不再写死 .64。原先容器是 100vw:64vw（比例 1.5625），
   而后台上传的「移动端图」实际是 16:9 左右的横图（比例约 1.83），object-fit:cover
   于是左右各裁掉约 7% —— 裁掉的正是烤进图里的标题文字和高光块边缘，看着像是
   给 banner 加了放大效果。
   现在 --hero-mobile-ratio 由 js/main.js 按图片的 naturalWidth/naturalHeight 算好写进来
   （多张取最高的那张），配合 object-fit:contain：几张图规格一致时正好铺满、一寸不裁；
   规格不一致时也只是上下留一点底色，不会再切掉画面。
   取不到图片尺寸（JS 没跑、图挂了）时回落到 1.5625，也就是改动前的老样子。 */
@media (max-width:900px){
  .hero{--hero-mobile-ratio:1.5625;--hero-mobile-img-h:calc(100vw / var(--hero-mobile-ratio));
    min-height:var(--hero-mobile-img-h);background:#071426!important}
  .hero-in{min-height:inherit;padding-top:0}
  .hero.has-slides::before{display:none!important}
  .hero-bgs{inset:0;height:auto;min-height:0;overflow:hidden}
  .hero-bg{inset:0;min-height:0;height:100%;background:none!important;display:flex;align-items:center;justify-content:center}
  .hero-mobile-img{display:block;width:100%;height:100%;object-fit:contain;object-position:center center}
  .hero .dots{bottom:max(22px,env(safe-area-inset-bottom))}
}

@media (max-width:640px){
  .hero-in{min-height:inherit}
}

/* --- download (new comp): stacked white blocks, autocomplete, full-width result cards --- */
.dl-block{background:#fff;border-radius:8px;box-shadow:var(--shadow);padding:42px 48px}
.dl-block .section-pill{margin-bottom:42px}
.dl-block .dl-search{margin-bottom:46px}
.dl-ac{position:relative;flex:1;display:flex}
.dl-ac input{width:100%}
.ac-menu{position:absolute;left:16px;right:16px;top:calc(100% + 8px);background:#fff;border-radius:14px;
  box-shadow:0 16px 40px rgba(20,30,50,.2);padding:8px 0;z-index:30;display:none;max-height:330px;overflow:auto}
.ac-menu.open{display:block}
.ac-item{padding:11px 22px;font-size:14.5px;color:#333;cursor:pointer;display:flex;gap:12px;align-items:baseline}
.ac-item b{flex:0 0 auto}
.ac-item small{color:#999;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-item mark{background:none;color:var(--orange-deep)}
.ac-item:hover,.ac-item.sel{background:#FFF3E4}
.ac-none{padding:12px 22px;font-size:13.5px;color:#999}
.dl-count{font-size:14px;color:#666;margin:42px 4px 16px}
.dl-count b{color:var(--orange-deep)}
.dlr-card{background:#fff;border-radius:6px;box-shadow:0 4px 20px rgba(30,40,60,.14);padding:28px 40px;margin-bottom:22px;
  display:grid;grid-template-columns:minmax(220px,380px) 1fr;gap:44px;align-items:center;animation:fadeUp .4s ease both}
.dlr-card:last-child{margin-bottom:0}
.dlr-card .ph{display:flex;align-items:center;justify-content:center}
.dlr-card .ph img{max-width:100%;max-height:240px;width:auto;height:auto;object-fit:contain;transition:transform .35s ease}
.dlr-card:hover .ph img{transform:scale(1.04)}
.dlr-card h3{font-size:19px;color:#222;line-height:1.45;margin-bottom:14px}
.dlr-card .meta,.dlr-card .specs{list-style:disc;padding-left:18px;margin:0 0 14px;color:#333}
.dlr-card .meta li,.dlr-card .specs li{font-size:15px;color:#333;line-height:1.75;margin-bottom:3px}
.dlr-card .files{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.dlr-card .files a{font-size:13px;border:1px solid #F3C9A2;border-radius:999px;padding:6px 18px;transition:.15s}
.dlr-card .files a:hover{background:var(--grad);color:#fff;border-color:transparent}
.dl-empty{color:#888;font-size:14.5px;padding:38px 4px 4px}
/* --- FAQ mobile: categories as horizontal pill row (same treatment as product filter) --- */
@media (max-width:1024px){
  .faq-side{display:flex;align-items:center;gap:10px;overflow-x:auto;padding-bottom:10px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .faq-side::-webkit-scrollbar{display:none}
  .faq-side h3{flex:0 0 auto;margin:0;font-size:16px;white-space:nowrap}
  .faq-side a{display:block;flex:0 0 auto;margin:0;background:#F2F4F7;border-radius:999px;padding:8px 16px;
    font-size:15.5px;color:#555;white-space:nowrap;box-shadow:0 1px 4px rgba(20,30,50,.06);
    transition:background .2s,color .2s}
  .faq-side a.on{background:var(--grad);color:#fff}
  .faq-side a::after{display:none}
}

@media (max-width:900px){
  .dl-block{padding:26px 20px}
  .dl-block .dl-search{flex-direction:column}
  .dl-block .dl-search .btn{height:48px}
  .dl-block .dl-search #dl-search-btn.uiverse-search-btn{width:100%;min-width:0;height:64px;padding:18px;font-size:18px}
  .dl-cats{grid-template-columns:1fr;gap:16px}
  .dlr-card{grid-template-columns:1fr;padding:24px;gap:22px}
  .ac-menu{left:0;right:0}
}

/* =====================================================
   20260720 修改需求样式
   ===================================================== */
/* #9 里程碑年份：移动端横向可滑动 + 选中项居中 */
@media (max-width:900px){
  .ms-years{display:block;width:100%;flex:none}
  .ms-year-window{height:auto;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding:4px 0 10px}
  .ms-year-window::-webkit-scrollbar{display:none}
  .ms-year-track{display:flex;gap:34px;transform:none!important;
    padding:0 calc(50% - 40px);width:max-content}
  .ms-year-track .yr{flex:0 0 auto;scroll-snap-align:center;margin-bottom:0}
}

/* #2/#4 结果卡片 View product：默认按钮特效（小尺寸） */
.dl-view{padding:9px 22px;font-size:13.5px}

/* #2 Download 页搜索结果关键字标红 */
.dlr-card mark{background:transparent;color:#E8380D;font-weight:bold}

/* #5 轻量提示弹窗（No Driver Required.） */
.mini-modal{position:fixed;inset:0;background:rgba(10,10,12,.55);z-index:130;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s}
.mini-modal.open{opacity:1;visibility:visible}
.mini-modal .mm-box{background:#fff;border-radius:14px;padding:34px 44px 28px;text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.28);min-width:280px;max-width:86vw;
  transform:translateY(16px);transition:transform .22s}
.mini-modal.open .mm-box{transform:none}
.mini-modal .mm-msg{font-size:17px;color:#222;font-weight:bold;margin-bottom:22px}
.mini-modal .mm-ok{padding:9px 34px;font-size:14px}

/* =====================================================
   404 page
   ===================================================== */
.nf-page{background:var(--light-bg);padding:64px 0 84px}
.nf-in{max-width:860px;margin:0 auto;text-align:center}
.nf-code{display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:clamp(84px,13vw,150px);font-weight:bold;line-height:1;letter-spacing:-2px;
  background:linear-gradient(90deg,#F16122,#F6AB04);-webkit-background-clip:text;background-clip:text;
  color:transparent;margin-bottom:10px}
/* 中间的 0 用断开的端口/环形表现「链路断了」 */
.nf-zero{width:.62em;height:.86em;border:.13em solid #F5931A;border-radius:50%;
  position:relative;display:inline-block;animation:nfPulse 2.4s ease-in-out infinite}
.nf-zero::after{content:"";position:absolute;left:50%;top:-.09em;width:.2em;height:.18em;
  background:var(--light-bg);transform:translateX(-50%)}
@keyframes nfPulse{0%,100%{opacity:1}50%{opacity:.55}}
.nf-title{font-size:clamp(20px,2.1vw,29px);color:#24272B;margin-bottom:14px}
.nf-text{font-size:15px;color:#6A727E;line-height:1.85;max-width:560px;margin:0 auto 32px}
.nf-search{max-width:560px;margin:0 auto 40px}
.nf-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:40px;text-align:left}
.nf-link{background:#fff;border-radius:10px;padding:20px 22px;box-shadow:0 3px 12px rgba(20,30,50,.07);
  transition:transform .22s ease,box-shadow .22s ease;border-top:3px solid transparent}
.nf-link:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(20,30,50,.13);border-top-color:#F5931A}
.nf-link b{display:block;font-size:15.5px;color:#24272B;margin-bottom:6px}
.nf-link span{font-size:13px;color:#7A828E;line-height:1.6}
.nf-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
@media (max-width:900px){
  .nf-links{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .nf-page{padding:44px 0 60px}
  .nf-links{grid-template-columns:1fr;gap:12px}
  .nf-link{padding:16px 18px}
  .nf-actions .btn{width:100%}
}