/* ==========================================================================
   深圳市远邦新材料有限公司 · 官网样式
   Design tokens 与设计稿保持一致
   ========================================================================== */

:root{
  --blue:#0A6CFF;
  --blue-d:#0052D9;
  --blue-l:#EAF2FF;
  --cyan:#12C9C0;
  --cyan-d:#0E8F87;
  --ink:#0B1B2B;
  --ink-2:#17324A;
  --ink-3:#2C4A63;
  --body:#5B7286;
  --muted:#8CA2B5;
  --muted-2:#9AAFC2;
  --line:#E7F1F9;
  --line-2:#EDF4FA;
  --white:#fff;
  --bg-soft:#F7FAFD;
  --bg-tint:#F0F7FF;
  --navy:#06203A;
  --navy-2:#04182A;

  --r-xs:6px;
  --r-s:8px;
  --r:10px;
  --r-l:14px;
  --r-xl:20px;

  --sh-1:0 2px 10px rgba(10,42,69,.05);
  --sh-2:0 12px 34px rgba(10,42,69,.08);
  --sh-3:0 24px 60px rgba(10,42,69,.12);
  --sh-blue:0 12px 30px rgba(10,108,255,.22);

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --wrap:1200px;
  --hdr:84px;

  --ff:"PingFang SC","HarmonyOS Sans SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ff-num:"Inter Tight","Inter","Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--ff);
  font-size:15px;
  line-height:1.75;
  color:var(--body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:rgba(10,108,255,.16)}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.num{font-family:var(--ff-num);font-feature-settings:"tnum";letter-spacing:-.01em}

/* ---------- 通用文本 ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);
}
.eyebrow::before{content:"";width:16px;height:1px;background:currentColor;opacity:.6}
.sec-title{font-size:clamp(26px,2.6vw,38px);line-height:1.32;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.sec-desc{font-size:14.5px;line-height:1.85;color:var(--body);max-width:600px}
.grad{background:linear-gradient(100deg,var(--blue),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);display:inline-block;position:relative}
.dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--cyan);opacity:.5;animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:.6}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:50px;padding:0 26px;border-radius:var(--r-s);
  font-size:14.5px;font-weight:600;letter-spacing:.01em;white-space:nowrap;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .3s,border-color .3s,color .3s;
  position:relative;overflow:hidden;
}
.btn svg{flex:none}
.btn--primary{background:var(--blue);color:#fff;box-shadow:0 8px 24px rgba(10,108,255,.24)}
.btn--primary::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.26) 50%,transparent 80%);
  transform:translateX(-120%);transition:transform .8s var(--ease);
}
.btn--primary:hover{background:var(--blue-d);box-shadow:0 14px 34px rgba(10,108,255,.34);transform:translateY(-2px)}
.btn--primary:hover::after{transform:translateX(120%)}
.btn--ghost{border:1px solid #CFE3F5;color:var(--ink-2);background:#fff}
.btn--ghost:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px);box-shadow:0 10px 26px rgba(10,108,255,.12)}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(0,0,0,.18)}
.btn--outline-l{border:1px solid rgba(255,255,255,.34);color:#DCEBFA}
.btn--outline-l:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6);color:#fff}
.btn--sm{height:42px;padding:0 20px;font-size:13.5px}
.btn--lg{height:54px;padding:0 30px;font-size:15px}
.btn--block{width:100%}

.link-arrow{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--blue)}
.link-arrow svg{transition:transform .45s var(--ease)}
.link-arrow:hover svg{transform:translateX(5px)}

/* ---------- 顶部信息条 ---------- */
.topbar{background:var(--navy);color:rgba(255,255,255,.7);font-size:12px;height:40px;display:flex;align-items:center}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.topbar__tag{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.82)}
.topbar__right{display:flex;align-items:center;gap:16px}
.topbar__right a{transition:color .25s}
.topbar__right a:hover{color:#fff}
.topbar__right a[href^="tel"]{font-family:var(--ff-num);font-size:14px;font-weight:800;color:#fff;letter-spacing:.03em}
.topbar .sep{width:1px;height:11px;background:rgba(255,255,255,.18)}

/* ---------- 头部 ---------- */
.header{
  position:sticky;top:0;z-index:80;background:rgba(255,255,255,.92);
  border-bottom:1px solid var(--line);
  transition:height .45s var(--ease),box-shadow .45s var(--ease),background .45s,transform .5s var(--ease);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
}
.header__in{display:flex;align-items:center;justify-content:space-between;height:var(--hdr);transition:height .45s var(--ease)}
.header.is-compact{box-shadow:var(--sh-1)}
.header.is-compact .header__in{height:66px}
.header.is-hidden{transform:translateY(-100%)}
.logo{display:flex;align-items:center;flex:none}
.logo__img{height:41px;width:auto;display:block}
.logo__mark{width:34px;height:34px;flex:none}
.logo__txt{display:flex;flex-direction:column;line-height:1.15}
.logo__txt b{font-size:17.5px;font-weight:700;color:var(--ink);letter-spacing:.02em}
.logo__txt i{font-family:var(--ff-num);font-size:8.5px;font-style:normal;letter-spacing:.14em;color:var(--muted-2);margin-top:3px}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto;margin-right:26px}
.nav a{
  position:relative;padding:0 15px;height:38px;display:inline-flex;align-items:center;
  font-size:14px;font-weight:500;color:#3B4E60;border-radius:var(--r-xs);
  transition:color .3s;
}
.nav a::after{
  content:"";position:absolute;left:15px;right:15px;bottom:2px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.nav a:hover{color:var(--blue)}
.nav a:hover::after{transform:scaleX(1)}
.nav a.is-active{color:var(--blue);font-weight:600}
.nav a.is-active::after{transform:scaleX(1)}
.header__act{display:flex;align-items:center;gap:12px;flex:none}
.burger{display:none;width:42px;height:42px;border-radius:var(--r-xs);position:relative}
.burger span{position:absolute;left:11px;width:20px;height:1.6px;background:var(--ink);border-radius:2px;transition:transform .4s var(--ease),opacity .3s}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:20px}
.burger span:nth-child(3){top:25px}
body.nav-open .burger span:nth-child(1){transform:translateY(5px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* ---------- Hero 轮播：横向推挤 + 落焦式缩放 ---------- */
.hero{position:relative;height:620px;overflow:hidden;background:#fff;--d:1}
.hero__slide{
  position:absolute;inset:0;z-index:1;visibility:hidden;
  transform:translate3d(calc(var(--d) * 100%),0,0);
  transition:none;
  will-change:transform;
}
/* 前后各挂一条出界柔影：推向哪边，哪边的边界就有了「浮起」的层次，
   静止时两端都在视口外，不留痕迹 */
.hero__slide::before,.hero__slide::after{
  content:"";position:absolute;top:0;bottom:0;width:130px;pointer-events:none;
}
.hero__slide::before{right:100%;background:linear-gradient(90deg,rgba(11,27,43,0),rgba(11,27,43,.2))}
.hero__slide::after{left:100%;background:linear-gradient(90deg,rgba(11,27,43,.2),rgba(11,27,43,0))}
.hero__slide.is-on{
  z-index:3;visibility:visible;transform:translate3d(0,0,0);
  transition:transform 1.05s cubic-bezier(.22,.68,.16,1),opacity .45s linear,visibility 0s;
}
.hero__slide.is-out{
  z-index:2;visibility:visible;opacity:0;
  transform:translate3d(calc(var(--d) * -16%),0,0);
  transition:transform 1.05s cubic-bezier(.22,.68,.16,1),opacity .95s linear,visibility 0s linear 1.05s;
}
/* 退场时文案留在原位，跟着整块画面一起被推走，而不是先变空 */
.hero__slide.is-out .hero__copy>*{opacity:1;transform:none;transition:none}
.hero__bg{position:absolute;inset:0;overflow:hidden}
.hero__bg img{
  width:100%;height:100%;object-fit:cover;object-position:72% 50%;
  transform:scale(1.12);transition:transform 1.9s cubic-bezier(.22,.68,.16,1);
}
.hero__slide.is-on .hero__bg img{transform:scale(1)}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.95) 34%,rgba(255,255,255,.52) 53%,rgba(255,255,255,0) 73%);
}
/* 首屏料粒图水平镜像：把颗粒放到右侧，左侧留给文案 */
.hero__bg--flip img{transform:scale(-1.12,1.12);object-position:46% 52%}
.hero__slide.is-on .hero__bg--flip img{transform:scale(-1,1)}
.hero__grid{
  position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(90deg,rgba(10,108,255,.055) 1px,transparent 1px),linear-gradient(rgba(10,108,255,.055) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(90deg,#000,transparent 62%);
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 62%);
}
.hero__in{position:relative;height:100%;display:flex;align-items:center}
.hero__copy{max-width:660px;padding:0 0 74px}
.hero__badge{
  display:inline-flex;align-items:center;gap:9px;height:32px;padding:0 15px;border-radius:100px;
  background:rgba(234,242,255,.9);border:1px solid rgba(10,108,255,.1);
  font-size:12.5px;font-weight:600;color:#1B63C9;
}
.hero h1{
  font-size:clamp(34px,3.7vw,54px);line-height:1.24;font-weight:700;color:var(--ink);
  letter-spacing:-.02em;margin:22px 0 20px;
}
.hero h1 em{font-style:normal;display:block}
.hero p.lead{font-size:15px;line-height:1.95;color:var(--body);max-width:560px}
.hero__acts{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.hero__metrics{display:flex;gap:40px;margin-top:42px;flex-wrap:wrap}
.hero__metrics b{display:block;font-family:var(--ff-num);font-size:25px;font-weight:600;color:var(--ink);line-height:1.1}
.hero__metrics b span{font-size:12.5px;color:var(--muted);margin-left:3px;font-family:var(--ff)}
.hero__metrics i{font-style:normal;font-size:12px;color:var(--muted)}

/* 文案逐条上浮（每屏独立触发） */
.hero__copy>*{opacity:0;transform:translateY(26px);transition:opacity .62s var(--ease-out),transform .62s var(--ease-out)}
.hero__slide.is-on .hero__copy>*{opacity:1;transform:none}
.hero__slide.is-on .hero__copy>*:nth-child(1){transition-delay:.30s}
.hero__slide.is-on .hero__copy>*:nth-child(2){transition-delay:.39s}
.hero__slide.is-on .hero__copy>*:nth-child(3){transition-delay:.48s}
.hero__slide.is-on .hero__copy>*:nth-child(4){transition-delay:.57s}
.hero__slide.is-on .hero__copy>*:nth-child(5){transition-delay:.66s}

/* 轮播索引条 */
.hero-idx{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;z-index:2}
.hero-idx__in{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.hero-idx__item{padding:0 24px 0 0;cursor:pointer;text-align:left;border:0;background:none}
.hero-idx__item:first-child{padding-left:0}
.hero-idx__item:not(:first-child){padding-left:24px;border-left:1px solid var(--line)}
.hero-idx__bar{height:2px;background:#E4EDF7;position:relative;overflow:hidden;margin-bottom:16px}
.hero-idx__bar i{position:absolute;inset:0;background:linear-gradient(90deg,var(--blue),var(--cyan));transform:scaleX(0);transform-origin:left;transition:transform .3s}
.hero-idx__item.is-on .hero-idx__bar i{transform:scaleX(1)}
.hero-idx__item.is-done .hero-idx__bar i{transform:scaleX(1);background:#D7E5F5}
.hero-idx__txt{display:flex;align-items:center;gap:10px;padding-bottom:16px;font-size:13.5px;color:var(--muted-2);transition:color .3s}
.hero-idx__txt b{font-family:var(--ff-num);font-size:11.5px;font-weight:600}
.hero-idx__item.is-on .hero-idx__txt{color:var(--blue);font-weight:600}
.hero-idx__item:hover .hero-idx__txt{color:var(--ink-2)}

/* ---------- 区块 ---------- */
.sec{padding:86px 0;position:relative}
.sec--soft{background:var(--bg-soft)}
.sec--tight{padding:64px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:44px}
.sec-head__l{max-width:640px}
.sec-head .sec-title{margin-top:14px}
.sec-head .sec-desc{margin-top:14px}
.sec-head__r{flex:none;padding-bottom:4px}

/* 资质承诺条 */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.trust__in{display:grid;grid-template-columns:repeat(4,1fr)}
.trust__item{padding:26px 24px;display:flex;gap:14px;align-items:flex-start}
.trust__item+.trust__item{border-left:1px solid var(--line)}
.trust__ico{width:34px;height:34px;border-radius:9px;background:var(--blue-l);display:grid;place-items:center;flex:none}
.trust__item b{display:block;font-size:13.5px;color:var(--ink);font-weight:600;line-height:1.5}
.trust__item span{font-size:11.5px;color:var(--muted);line-height:1.6}

/* 仓储 */
.ware{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.ware__media{position:relative;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-3)}
.ware__media img{width:100%;height:440px;object-fit:cover;transition:transform 1.2s var(--ease)}
.ware__media:hover img{transform:scale(1.04)}
.ware__badge{
  position:absolute;left:22px;bottom:22px;padding:14px 18px;border-radius:var(--r);
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);box-shadow:var(--sh-2);
  display:flex;align-items:center;gap:12px;
}
.ware__badge b{font-family:var(--ff-num);font-size:22px;color:var(--ink);line-height:1}
.ware__badge span{font-size:11.5px;color:var(--muted);line-height:1.4}
.ware__list{margin-top:30px;display:grid;gap:0}
.ware__row{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line)}
.ware__row:first-child{padding-top:0}
.ware__row b{display:block;font-size:14px;color:var(--ink);font-weight:600;margin-bottom:4px}
.ware__row p{font-size:13px;line-height:1.7;color:var(--body)}
.ware__no{font-family:var(--ff-num);font-size:11.5px;color:var(--blue);font-weight:600;padding-top:3px;min-width:22px}
.ware__stats{display:flex;gap:0;margin-top:30px;border-top:1px solid var(--line);padding-top:26px}
.ware__stat{flex:1}
.ware__stat+.ware__stat{padding-left:26px;border-left:1px solid var(--line)}
.ware__stat b{display:block;font-family:var(--ff-num);font-size:28px;color:var(--ink);line-height:1.1;font-weight:600}
.ware__stat b span:not([data-count]){font-size:13px;color:var(--muted);margin-left:2px;font-family:var(--ff)}
.ware__stat i{font-style:normal;font-size:12px;color:var(--muted)}

/* 应用 */
.apps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.app{
  position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;
  box-shadow:var(--sh-1);isolation:isolate;background:#0b2033;
}
.app img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .6s}
.app::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(4,24,42,.06) 0%,rgba(4,24,42,.32) 46%,rgba(4,24,42,.86) 100%);
  transition:opacity .5s;
}
.app:hover img{transform:scale(1.06)}
.app__body{position:absolute;left:0;right:0;bottom:0;padding:22px 22px 20px;z-index:2;color:#fff}
.app__body b{display:block;font-size:15.5px;font-weight:600;letter-spacing:.01em}
.app__body p{font-size:12px;color:rgba(255,255,255,.72);margin-top:5px;line-height:1.6}
.app__tag{
  position:absolute;top:16px;left:16px;z-index:2;padding:5px 10px;border-radius:100px;
  background:rgba(6,24,40,.42);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.28);
  font-size:10.5px;color:#fff;font-family:var(--ff-num);letter-spacing:.06em;
}
.app__go{
  position:absolute;right:18px;bottom:18px;z-index:2;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  display:grid;place-items:center;color:#fff;opacity:0;transform:translateY(6px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),background .3s;
}
.app:hover .app__go{opacity:1;transform:translateY(0)}
.app:hover .app__go{background:var(--blue);border-color:var(--blue)}

/* 材质矩阵 */
.mats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mat{
  position:relative;display:block;min-height:134px;padding:24px 22px 20px;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;transition:border-color .4s,box-shadow .5s var(--ease),transform .5s var(--ease);
  overflow:hidden;
}
.mat::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--blue),var(--cyan));
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease);
}
.mat:hover{border-color:#CFE3F5;box-shadow:var(--sh-2);transform:translateY(-3px)}
.mat:hover::before{transform:scaleY(1)}
/* 材质卡背景粒子图：右侧实拍，左侧用白色蒙版淡出，保证文字可读 */
.mat__bg{
  position:absolute;right:0;top:0;height:100%;width:60%;object-fit:cover;object-position:74% 50%;
  opacity:.95;z-index:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 26%,rgba(0,0,0,.4) 52%,rgba(0,0,0,.9) 80%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,transparent 26%,rgba(0,0,0,.4) 52%,rgba(0,0,0,.9) 80%,#000 100%);
  transition:transform .8s var(--ease),opacity .5s var(--ease);
  transform:scale(1.02);
}
.mat:hover .mat__bg{transform:scale(1.09);opacity:1}
.mat__code,.mat__name,.mat__en{position:relative;z-index:1}
.mat__code{font-family:var(--ff-num);font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.mat__name{font-size:12px;color:var(--muted);margin-top:3px}
.mat__en{font-family:var(--ff-num);font-size:9.5px;letter-spacing:.06em;color:#AEC2D2;margin-top:10px;text-transform:uppercase;max-width:44%;line-height:1.5}
.mat__arrow{position:absolute;right:20px;top:22px;color:#C9DBEB;transition:color .3s,transform .45s var(--ease);z-index:1;filter:drop-shadow(0 0 2px rgba(255,255,255,.95)) drop-shadow(0 0 5px rgba(255,255,255,.7))}
.mat:hover .mat__arrow{color:var(--blue);transform:translate(2px,-2px)}

/* 品牌墙（官方 logo） */
.bwall{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bwall__item{
  position:relative;height:136px;border:1px solid var(--line);border-radius:var(--r);background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:20px 24px;overflow:hidden;
  transition:border-color .35s,box-shadow .5s var(--ease),transform .5s var(--ease);
}
.bwall__item::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);
}
.bwall__logo{
  width:auto;max-width:100%;object-fit:contain;
  opacity:.94;
  transition:opacity .5s var(--ease),transform .55s var(--ease);
}
.bwall__item span{
  font-family:var(--ff-num);font-size:10.5px;letter-spacing:.05em;color:#AFC1D1;
  transition:color .4s;white-space:nowrap;
}
.bwall__item:hover{border-color:#CFE3F5;box-shadow:var(--sh-2);transform:translateY(-3px)}
.bwall__item:hover::before{transform:scaleX(1)}
.bwall__item:hover .bwall__logo{opacity:1;transform:scale(1.04)}
.bwall__item:hover span{color:var(--blue)}

/* 服务流程 */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);padding-top:36px;margin-top:8px}
.step{position:relative;padding-right:34px}
.step:not(:last-child)::after{
  content:"";position:absolute;right:14px;top:26px;width:1px;height:calc(100% - 26px);
  background:linear-gradient(180deg,var(--line),transparent);
}
.step__no{font-family:var(--ff-num);font-size:11.5px;color:var(--blue);font-weight:600;letter-spacing:.1em}
.step b{display:block;font-size:15.5px;color:var(--ink);font-weight:600;margin:10px 0 8px}
.step p{font-size:12.5px;line-height:1.75;color:var(--body)}

/* 底部转化条 */
.cta{background:linear-gradient(100deg,#04182A,#0A2C4C 58%,#0B3C63);position:relative;overflow:hidden}
.cta::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(60% 100% at 80% 50%,#000,transparent);
  -webkit-mask-image:radial-gradient(60% 100% at 80% 50%,#000,transparent);
}
.cta__in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:44px;padding:56px 0}
.cta h2{font-size:clamp(24px,2.4vw,32px);color:#fff;font-weight:700;letter-spacing:-.01em;line-height:1.35}
.cta p{font-size:13.5px;color:#A8BFD2;margin-top:10px}
.cta__acts{display:flex;gap:14px;flex:none;flex-wrap:wrap}

/* ---------- 内页横幅（图片背景） ---------- */
.banner{position:relative;overflow:hidden;background:#04182A;padding:66px 0 62px;border-bottom:1px solid rgba(10,108,255,.2)}
.banner__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.banner__bg img{
  width:100%;height:100%;object-fit:cover;object-position:center 54%;
  transform:scale(1.04);
  animation:bannerBreath 26s ease-in-out infinite alternate;
}
@keyframes bannerBreath{from{transform:scale(1.04)}to{transform:scale(1.11)}}
.banner__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(4,24,42,.97) 0%,rgba(5,28,48,.9) 34%,rgba(6,32,58,.66) 64%,rgba(6,32,58,.36) 100%);
}
.banner__grid{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(110% 130% at 10% 38%,#000,transparent 74%);
  mask-image:radial-gradient(110% 130% at 10% 38%,#000,transparent 74%);
}
.banner .wrap{position:relative;z-index:2}
.crumb{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted-2);margin-bottom:20px}
.crumb a:hover{color:var(--blue)}
.crumb i{font-style:normal;color:#C6D6E4}
.crumb b{font-weight:500;color:#3B4E60}
.banner .crumb{color:rgba(255,255,255,.46);margin-bottom:22px}
.banner .crumb a:hover{color:#fff}
.banner .crumb i{color:rgba(255,255,255,.26)}
.banner .crumb b{color:rgba(255,255,255,.86);font-weight:500}
.banner h1{font-size:clamp(29px,3.1vw,41px);color:#fff;font-weight:700;letter-spacing:-.02em}
.banner p{font-size:14px;line-height:1.85;color:rgba(214,232,247,.78);margin-top:15px;max-width:640px}

/* ---------- 锚点定位（避免被吸顶导航遮挡） ---------- */
#quote{scroll-margin-top:calc(var(--hdr) + 16px)}
.qr-card.is-flash{animation:qrFlash 2.2s var(--ease) 1}
@keyframes qrFlash{
  0%{box-shadow:0 0 0 0 rgba(10,108,255,.38),var(--sh-2)}
  55%{box-shadow:0 0 0 12px rgba(10,108,255,0),var(--sh-2)}
  100%{box-shadow:0 0 0 0 rgba(10,108,255,0),var(--sh-2)}
}
html{scroll-behavior:smooth}

/* ---------- 产品中心 ---------- */
.prod-layout{display:grid;grid-template-columns:236px minmax(0,1fr);gap:46px;align-items:start;padding:52px 0 80px}
.mat-nav{position:sticky;top:104px}
.mat-nav__t{font-size:11px;color:var(--muted-2);margin-bottom:10px;letter-spacing:.04em}
.mat-nav a{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  height:42px;padding:0 14px;border-radius:var(--r-xs);font-size:13.5px;color:#3B4E60;
  transition:background .3s,color .3s;
}
.mat-nav a span{font-family:var(--ff-num);font-size:10.5px;color:#C1D2E1}
.mat-nav a:hover{background:#F4F9FE;color:var(--blue)}
.mat-nav a.is-on{background:var(--blue-l);color:var(--blue);font-weight:600}
.mat-nav a.is-on span{color:rgba(10,108,255,.55)}
.mat-nav__note{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);font-size:11.5px;line-height:1.8;color:var(--muted)}

.prod-head{display:flex;align-items:flex-start;justify-content:space-between;gap:30px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.prod-head__code{font-family:var(--ff-num);font-size:12px;color:var(--blue);letter-spacing:.14em;font-weight:600}
.prod-head h2{font-size:28px;color:var(--ink);font-weight:700;margin-top:8px;letter-spacing:-.01em}
.prod-head h2 span{font-family:var(--ff-num);font-size:15px;color:var(--muted-2);font-weight:400;margin-left:10px;letter-spacing:.02em}
.prod-head p{font-size:13.5px;line-height:1.8;color:var(--body);margin-top:12px;max-width:560px}
.prod-props{display:flex;gap:26px;flex:none;padding-top:6px}
.prod-prop{text-align:right}
.prod-prop b{display:block;font-family:var(--ff-num);font-size:19px;color:var(--ink);font-weight:600;line-height:1.2}
.prod-prop i{font-style:normal;font-size:10.5px;color:var(--muted-2)}

.brand-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:22px 0 4px}
.brand-bar__t{font-size:11.5px;color:var(--muted-2);margin-right:4px}
.bchip{
  height:56px;padding:0 15px 0 16px;border-radius:10px;border:1px solid var(--line);background:#fff;
  font-size:13px;font-weight:700;color:#3B4E60;display:inline-flex;align-items:center;gap:8px;
  transition:all .35s var(--ease);
}
.bchip i{font-family:var(--ff-num);font-size:10.5px;font-style:normal;color:#A9BFD2;font-weight:600}
.bchip:hover{border-color:#CFE3F5;color:var(--blue);transform:translateY(-1px)}
.bchip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.bchip.is-on i{color:rgba(255,255,255,.62)}

/* 品牌 logo 卡：logo + 中文名，统一 56px 高 */
.bchip--logo{padding:0 16px 0 15px;gap:10px}
.bchip__logo{
  height:22px;width:auto;max-width:74px;object-fit:contain;flex:none;
  transition:filter .35s var(--ease),opacity .35s var(--ease);
}
.bchip--logo:hover{box-shadow:0 8px 18px rgba(10,42,69,.08)}
.bchip--logo.is-on .bchip__logo{filter:brightness(0) invert(1)}
.bchip--logo.is-on{box-shadow:0 8px 20px rgba(11,27,43,.18)}
.bchip__name{font-size:13.5px;font-weight:700;letter-spacing:.01em;white-space:nowrap;line-height:1}

.grade-tools{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:20px 0 0}
.grade-search{position:relative;flex:1;max-width:340px}
.grade-search input{
  width:100%;height:42px;border:1px solid var(--line);border-radius:var(--r-xs);
  padding:0 14px 0 38px;font-size:13px;color:var(--ink);background:#fff;outline:none;
  transition:border-color .3s,box-shadow .3s;
}
.grade-search input::placeholder{color:#AEC1D2}
.grade-search input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(10,108,255,.08)}
.grade-search svg{position:absolute;left:13px;top:13px;color:#AEC1D2}
.grade-count{font-size:12px;color:var(--muted-2)}
.grade-count b{font-family:var(--ff-num);color:var(--blue);font-size:13px}

.table{width:100%;margin-top:16px;border-top:1px solid var(--line)}
.trow{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1.5fr) 84px minmax(0,1.5fr) 96px;
  gap:18px;align-items:center;padding:17px 12px;border-bottom:1px solid var(--line);
  transition:background .35s,box-shadow .35s;position:relative;
}
.thead{
  font-size:11px;color:var(--muted-2);letter-spacing:.06em;padding-top:12px;padding-bottom:12px;
  background:#FBFDFF;border-bottom:1px solid var(--line);
}
.trow:not(.thead):hover{background:#FAFCFF;box-shadow:inset 2px 0 0 var(--blue)}
.trow__grade{display:flex;flex-direction:column;gap:2px;min-width:0}
.trow__grade b{font-family:var(--ff-num);font-size:14px;color:var(--ink);font-weight:600;letter-spacing:-.005em}
.trow__grade i{font-style:normal;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trow__feats{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:10.5px;color:#4B6D89;background:#F1F7FD;border-radius:4px;padding:3px 8px;white-space:nowrap}
.tag--blue{color:#1B63C9;background:#EAF2FF}
.trow__mfr{font-family:var(--ff-num);font-size:13px;color:var(--ink-3)}
.trow__mfr span{font-size:10px;color:var(--muted-2);margin-left:2px}
.trow__app{font-size:12px;color:var(--body);line-height:1.6}
.trow__act{text-align:right}
.quote-btn{
  display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 12px;border-radius:var(--r-xs);
  border:1px solid #CFE3F5;font-size:12px;color:var(--blue);background:#fff;transition:all .3s var(--ease);
}
.quote-btn:hover{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 8px 18px rgba(10,108,255,.24)}
.trow__empty{padding:60px 0;text-align:center;color:var(--muted);font-size:13px;display:block !important}

/* ---------- 搜索器 ---------- */
.finder-hero{background:linear-gradient(160deg,#04182A,#0A2C4C 62%,#0B3F68);padding:56px 0 48px;position:relative;overflow:hidden}
.finder-hero::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(70% 90% at 50% 0%,#000,transparent);
  -webkit-mask-image:radial-gradient(70% 90% at 50% 0%,#000,transparent);
}
.finder-hero__in{position:relative;max-width:860px;margin:0 auto;text-align:center}
.finder-hero .crumb{justify-content:center;color:rgba(255,255,255,.4)}
.finder-hero .crumb b{color:rgba(255,255,255,.8)}
.finder-hero h1{font-size:clamp(26px,3vw,38px);color:#fff;font-weight:700;letter-spacing:-.01em}
.finder-hero p{font-size:13.5px;color:#A8BFD2;margin-top:12px}
.fsearch{position:relative;margin-top:30px}
.fsearch input{
  width:100%;height:64px;border-radius:var(--r);border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);color:#fff;padding:0 150px 0 54px;font-size:15px;outline:none;
  transition:border-color .35s,box-shadow .35s,background .35s;
}
.fsearch input::placeholder{color:rgba(255,255,255,.42)}
.fsearch input:focus{border-color:rgba(18,201,192,.6);background:rgba(255,255,255,.1);box-shadow:0 0 0 5px rgba(18,201,192,.1)}
.fsearch__ico{position:absolute;left:20px;top:22px;color:rgba(255,255,255,.45)}
.fsearch__btn{
  position:absolute;right:7px;top:7px;height:50px;padding:0 26px;border-radius:var(--r-s);
  background:var(--blue);color:#fff;font-size:14px;font-weight:600;
  transition:background .3s,box-shadow .3s;
}
.fsearch__btn:hover{background:var(--blue-d);box-shadow:0 8px 20px rgba(10,108,255,.3)}
.hot{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.hot span{font-size:11.5px;color:rgba(255,255,255,.4)}
.hot button{
  font-size:11.5px;color:rgba(255,255,255,.78);padding:5px 12px;border-radius:100px;
  border:1px solid rgba(255,255,255,.16);transition:all .3s;
}
.hot button:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);color:#fff}

.filters{display:grid;gap:16px;padding:26px 0 22px;border-bottom:1px solid var(--line)}
.frow{display:flex;gap:14px;align-items:flex-start}
.frow__t{flex:none;width:52px;font-size:11.5px;color:var(--muted-2);padding-top:8px}
.frow__c{display:flex;gap:8px;flex-wrap:wrap;flex:1}
.fopt{
  height:32px;padding:0 13px;border-radius:100px;border:1px solid var(--line);background:#fff;
  font-size:12px;color:#3B4E60;transition:all .3s var(--ease);
}
.fopt:hover{border-color:#CFE3F5;color:var(--blue)}
.fopt.is-on{background:var(--blue-l);border-color:#BED9FF;color:var(--blue);font-weight:600}
.fbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0 10px}
.fbar__c{font-size:12.5px;color:var(--muted)}
.fbar__c b{font-family:var(--ff-num);font-size:15px;color:var(--ink)}
.fclear{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:5px;transition:color .3s}
.fclear:hover{color:var(--blue)}
.results{padding-bottom:40px}
.res{
  display:grid;grid-template-columns:118px minmax(0,1.1fr) minmax(0,1.4fr) 96px;
  gap:20px;align-items:center;padding:18px 6px;border-bottom:1px solid var(--line);
  animation:rowIn .55s var(--ease) both;
}
@keyframes rowIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.res:hover{background:#FAFCFF}
.res__mat{display:flex;flex-direction:column;gap:3px}
.res__mat b{font-family:var(--ff-num);font-size:12.5px;color:var(--blue);font-weight:600;letter-spacing:.04em}
.res__mat span{font-size:10.5px;color:var(--muted-2)}
.res__grade b{display:block;font-family:var(--ff-num);font-size:15px;color:var(--ink);font-weight:600}
.res__grade span{font-size:11.5px;color:var(--muted)}
.res__meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.res__act{text-align:right}
.empty{padding:70px 0;text-align:center}
.empty b{display:block;font-size:15px;color:var(--ink);font-weight:600;margin-bottom:8px}
.empty p{font-size:13px;color:var(--muted)}

/* ---------- 关于我们 ---------- */
.about-intro{display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:center}
.about-intro p{font-size:14px;line-height:1.95;color:var(--body);margin-top:16px}
.about-intro p+p{margin-top:12px}
.about-media{position:relative;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-3)}
.about-media img{width:100%;height:420px;object-fit:cover}
.about-media__cap{
  position:absolute;left:18px;bottom:18px;right:18px;padding:14px 16px;border-radius:var(--r-s);
  background:rgba(6,32,58,.62);backdrop-filter:blur(10px);color:#fff;font-size:12px;
  display:flex;align-items:center;gap:10px;
}
.stats{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-1)}
.stats__i{padding:34px 28px;position:relative}
.stats__i+.stats__i{border-left:1px solid var(--line)}
.stats__i b{display:block;font-family:var(--ff-num);font-size:38px;font-weight:600;color:var(--ink);line-height:1;letter-spacing:-.02em}
.stats__i b span:not([data-count]){font-size:15px;color:var(--blue);margin-left:3px;font-family:var(--ff)}
.stats__i i{font-style:normal;display:block;font-size:12.5px;color:var(--muted);margin-top:10px}
.stats__i::after{
  content:"";position:absolute;left:28px;bottom:22px;width:24px;height:1px;background:var(--line);
}

.timeline{position:relative;padding-left:0}
.timeline::before{content:"";position:absolute;left:146px;top:8px;bottom:8px;width:1px;background:var(--line)}
.tl{display:grid;grid-template-columns:112px 1fr;gap:34px;padding:0 0 34px;position:relative}
.tl__y{font-family:var(--ff-num);font-size:15px;font-weight:600;color:var(--blue);padding-top:2px;letter-spacing:.02em}
.tl__b{position:relative;padding-left:34px}
.tl__b::before{
  content:"";position:absolute;left:-4px;top:9px;width:9px;height:9px;border-radius:50%;
  background:#fff;border:2px solid var(--blue);box-shadow:0 0 0 4px #fff;
}
.tl__b b{display:block;font-size:15px;color:var(--ink);font-weight:600}
.tl__b p{font-size:12.5px;line-height:1.8;color:var(--body);margin-top:6px;max-width:620px}

/* ---------- 联系我们 ---------- */
.contact-grid{display:grid;grid-template-columns:440px minmax(0,1fr);gap:56px;padding:64px 0 72px;align-items:start}
.direct{background:linear-gradient(150deg,#06203A,#0A2C4C);border-radius:var(--r);padding:30px 32px;color:#fff;position:relative;overflow:hidden}
.direct::after{
  content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(18,201,192,.22),transparent 66%);
}
.direct__eyebrow{font-family:var(--ff-num);font-size:10.5px;letter-spacing:.16em;color:#6FA3C5}
.direct__name{font-size:28px;font-weight:700;margin:12px 0 6px;letter-spacing:.02em}
.direct__role{font-size:12.5px;color:#9DB4C8}
.direct__div{height:1px;background:#1B3E5C;margin:22px 0 18px}
.dline{display:flex;align-items:center;gap:14px;padding:9px 0;transition:transform .4s var(--ease)}
.dline:hover{transform:translateX(3px)}
.dline__ico{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.07);display:grid;place-items:center;flex:none}
.dline b{font-family:var(--ff-num);font-size:23px;font-weight:800;letter-spacing:.02em;color:#fff;display:block;line-height:1.25}
.dline span{font-size:10.5px;color:#7E97AE}
.info-list{padding-top:26px;display:grid;gap:16px}
.info{display:flex;gap:14px;align-items:flex-start}
.info__ico{width:30px;height:30px;border-radius:8px;background:var(--bg-tint);display:grid;place-items:center;flex:none;margin-top:2px}
.info b{display:block;font-size:11px;color:var(--muted-2);font-weight:500;letter-spacing:.02em}
.info span{font-size:13px;color:var(--ink-3);line-height:1.65}
.notice{margin-top:26px;padding:22px 24px;border-radius:var(--r);background:var(--bg-soft);border:1px solid var(--line-2)}
.notice>p{font-size:11.5px;font-weight:600;color:var(--ink);margin-bottom:14px}
.notice__row{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:7px 0}
.notice__row span{font-size:11.5px;color:var(--muted)}
.notice__row b{font-size:11.5px;font-weight:500;color:var(--ink-3)}

.qr-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:38px 40px;
  box-shadow:var(--sh-2);transition:box-shadow .6s var(--ease),border-color .6s;
}
.qr-card:target{border-color:#BED9FF;box-shadow:0 0 0 5px rgba(10,108,255,.1),var(--sh-2)}
.qr-card__top{display:flex;align-items:center;justify-content:space-between;gap:20px}
.qr-card__eyebrow{font-family:var(--ff-num);font-size:10.5px;letter-spacing:.16em;color:var(--muted-2)}
.qr-card__top h2{font-size:24px;color:var(--ink);font-weight:700;margin-top:8px;letter-spacing:-.01em}
.pill-on{
  display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 13px;border-radius:100px;
  background:#EAF8F6;color:var(--cyan-d);font-size:11px;font-weight:500;flex:none;
}
.qr-card__body{display:flex;gap:34px;align-items:center;margin-top:26px}
.qr-box{
  width:200px;height:200px;flex:none;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-soft);
  display:grid;place-items:center;position:relative;overflow:hidden;
}
.qr-box img{width:168px;height:168px;border-radius:4px}
.qr-box::after{
  content:"";position:absolute;left:14px;right:14px;height:1px;top:0;
  background:linear-gradient(90deg,transparent,rgba(10,108,255,.6),transparent);
  animation:qrScan 3.6s var(--ease) infinite;
}
@keyframes qrScan{0%{transform:translateY(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(172px);opacity:0}}
.qsteps{flex:1;display:grid;gap:18px}
.qstep{display:flex;gap:12px;align-items:flex-start}
.qstep__no{
  width:24px;height:24px;border-radius:50%;background:var(--blue-l);color:var(--blue);flex:none;
  display:grid;place-items:center;font-family:var(--ff-num);font-size:10.5px;font-weight:600;
}
.qstep b{display:block;font-size:13px;color:var(--ink);font-weight:600}
.qstep p{font-size:11.5px;color:var(--muted);line-height:1.7;margin-top:2px}
.qr-card__div{height:1px;background:var(--line);margin:28px 0 24px}
.qr-card__acts{display:flex;gap:14px}
.qr-card__acts .btn{flex:1}
.qr-card__acts .btn--ghost{flex:none}
.tipbar{
  display:flex;gap:14px;align-items:flex-start;padding:20px 24px;border-radius:var(--r);
  background:var(--bg-tint);margin-top:20px;
}
.tipbar p{font-size:12.5px;line-height:1.8;color:#3F6480}
.areas{padding:40px 0 44px;background:var(--bg-soft);border-top:1px solid var(--line)}
.area b{display:block;font-size:13px;color:var(--ink);font-weight:600;margin-bottom:8px}
.area p{font-size:12px;line-height:1.75;color:var(--muted)}

/* ---------- 页脚 ---------- */
.footer{background:#04182A;color:#8FA6BB;padding:64px 0 0;position:relative;overflow:hidden}
.footer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(10,108,255,.5),rgba(18,201,192,.4),transparent);
}
.footer__in{display:grid;grid-template-columns:1.5fr .8fr .8fr 1.1fr;gap:48px;padding-bottom:52px}
.footer__brand{display:flex;align-items:center;gap:11px;margin-bottom:20px}
.footer__logo{height:42px;width:auto;display:block}
.footer__brand b{font-size:16.5px;color:#fff;font-weight:600;letter-spacing:.02em}
.footer__brand i{display:block;font-family:var(--ff-num);font-style:normal;font-size:8px;letter-spacing:.16em;color:#5D7C96;margin-top:2px}
.footer p.desc{font-size:12.5px;line-height:1.9;color:#7C93A9;max-width:330px}
.footer__contact{margin-top:22px;display:grid;gap:10px}
.footer__contact a,.footer__contact span{font-size:13px;color:#A8BFD2;display:flex;align-items:center;gap:9px;transition:color .3s}
.footer__contact a[href^="tel"]{font-family:var(--ff-num);font-size:16px;font-weight:800;color:#E3EFFA;letter-spacing:.02em}
.footer__contact a:hover{color:#fff}
.footer h4{font-size:12px;color:#fff;font-weight:600;letter-spacing:.06em;margin-bottom:16px}
.footer__links{display:grid;gap:10px}
.footer__links a{font-size:12.5px;color:#7C93A9;transition:color .3s,transform .3s}
.footer__links a:hover{color:#fff;transform:translateX(3px)}
.footer__qr{display:flex;gap:16px;align-items:center;margin-top:16px}
.footer__qr img{width:92px;height:92px;border-radius:6px;background:#fff;padding:4px}
.footer__qr p{font-size:11px;line-height:1.7;color:#7C93A9}
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.07);padding:20px 0;display:flex;
  align-items:center;justify-content:space-between;gap:20px;font-size:11.5px;color:#5D7C96;
}
.footer__bottom a:hover{color:#A8BFD2}

/* ---------- 悬浮工具条 ---------- */
.dock{position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;gap:10px}
.dock__item{
  width:50px;height:50px;border-radius:var(--r);background:#fff;border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(10,42,69,.09);display:grid;place-items:center;color:var(--blue);
  position:relative;transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .3s,color .3s,border-color .3s;
}
.dock__item:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(10,108,255,.18);border-color:#CFE3F5}
.dock__item--wx{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 8px 22px rgba(10,108,255,.3)}
.dock__item--wx:hover{background:var(--blue-d);border-color:var(--blue-d);box-shadow:0 14px 30px rgba(10,108,255,.38)}
.dock__tip{
  position:absolute;right:60px;top:50%;transform:translate(6px,-50%);
  background:var(--ink);color:#fff;font-size:11.5px;line-height:1;padding:8px 11px;border-radius:5px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s,transform .4s var(--ease);
}
.dock__tip::after{
  content:"";position:absolute;right:-4px;top:50%;transform:translateY(-50%) rotate(45deg);
  width:8px;height:8px;background:var(--ink);
}
.dock__item:hover .dock__tip{opacity:1;transform:translate(0,-50%)}
.dock__item.is-hidden{opacity:0;pointer-events:none;transform:translateY(-6px) scale(.92)}
.dock__qr{
  position:absolute;right:70px;top:-16px;width:292px;padding:22px 24px 22px;background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:0 22px 54px rgba(6,26,44,.2);text-align:center;
  opacity:0;transform:translate(10px,0) scale(.96);pointer-events:none;
  transition:opacity .35s var(--ease),transform .45s var(--ease);transform-origin:right top;
}
.dock__qr.is-open{opacity:1;transform:none;pointer-events:auto}
.dock__qr b{display:block;font-size:17px;font-weight:800;color:var(--ink);letter-spacing:.01em;margin-bottom:14px}
.dock__qr img{width:236px;height:236px;margin:0 auto;border-radius:8px;display:block}
.dock__qr p{font-size:14px;line-height:1.7;color:#274257;margin-top:14px;font-weight:700}
.dock__qr p strong{color:var(--blue);font-weight:800}
.dock__qr-tel{
  margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);
  font-family:var(--ff-num);font-size:20px;font-weight:800;color:var(--ink);letter-spacing:.02em;
}
.dock__qr-tel i{display:block;font-style:normal;font-size:12px;font-weight:700;color:#5A7386;letter-spacing:.04em;margin-bottom:4px;font-family:var(--ff)}
.dock__qr::after{
  content:"";position:absolute;right:-5px;top:22px;width:10px;height:10px;background:#fff;
  border-right:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg);
}

/* ---------- 入场动效 ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal="fade"]{transform:none}
[data-reveal="left"]{transform:translateX(-24px)}
[data-reveal="right"]{transform:translateX(24px)}
[data-reveal="scale"]{transform:scale(.97)}

/* 页面切换进度条 */
.pagebar{
  position:fixed;left:0;top:0;height:2px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  box-shadow:0 0 12px rgba(10,108,255,.6);
  transition:width .5s var(--ease),opacity .4s;
}
body.page-out{opacity:.55;transition:opacity .28s}
body{transition:opacity .3s}

/* 回到顶部的手势提示 */
.dock__item svg{transition:transform .4s var(--ease)}
.dock__item[data-dock="top"]:hover svg{transform:translateY(-2px)}

/* ---------- 响应式 ---------- */
@media (max-width:1180px){
  .prod-layout{grid-template-columns:210px minmax(0,1fr);gap:34px}
  .contact-grid{grid-template-columns:390px minmax(0,1fr);gap:40px}
  .qr-card{padding:32px}
}
@media (max-width:1024px){
  .hero{height:auto;min-height:560px;padding:64px 0 0}
  .hero__copy{padding-bottom:64px}
  .hero__in{min-height:496px}
  .ware{grid-template-columns:1fr;gap:40px}
  .about-intro{grid-template-columns:1fr;gap:40px}
  .footer__in{grid-template-columns:1fr 1fr;gap:36px}
  .apps{grid-template-columns:repeat(2,1fr)}
  .mats{grid-template-columns:repeat(3,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats__i:nth-child(3){border-left:0}
  .stats__i:nth-child(n+3){border-top:1px solid var(--line)}
  .prod-layout{grid-template-columns:1fr;gap:24px}
  .mat-nav{position:static;display:flex;gap:8px;overflow-x:auto;padding-bottom:8px}
  .mat-nav__t,.mat-nav__note{display:none}
  .mat-nav a{height:38px;white-space:nowrap;background:#F4F9FE}
  .contact-grid{grid-template-columns:1fr;gap:32px}
  .areas{grid-template-columns:1fr;gap:24px}
  .cta__in{flex-direction:column;align-items:flex-start}
  .trow{grid-template-columns:minmax(0,1.2fr) minmax(0,1.4fr) 76px 92px}
  .trow__app{display:none}
  .res{grid-template-columns:104px minmax(0,1fr) 92px}
  .res__app{display:none}
}
@media (max-width:768px){
  body{font-size:14.5px}
  :root{--hdr:66px}
  .wrap{padding:0 18px}
  .topbar{height:38px;font-size:11px}
  .topbar__in{height:38px;gap:10px}
  .topbar__tag{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}
  .topbar__tag .dot{flex:none}
  .topbar__right{flex:none;gap:10px}
  .topbar__right span:last-child,.topbar .sep{display:none}
  .topbar__right a[href^="tel"]{font-size:13px}
  .nav{
    position:fixed;left:0;right:0;top:calc(34px + var(--hdr));background:#fff;
    flex-direction:column;align-items:stretch;gap:0;padding:8px 18px 18px;
    border-bottom:1px solid var(--line);box-shadow:var(--sh-2);
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .35s,transform .4s var(--ease);
    margin:0;z-index:79;
  }
  body.nav-open .nav{opacity:1;transform:none;pointer-events:auto}
  .nav a{height:50px;padding:0 6px;font-size:15px;border-bottom:1px solid var(--line-2)}
  .nav a::after{display:none}
  .burger{display:block}
  .header__act .btn{display:none}
  .header{position:sticky}
  .hero{height:540px;padding:0;min-height:0}
  .hero__in{height:540px;min-height:0;align-items:flex-end}
  .hero__copy{padding:0 0 36px}
  .hero__bg::after{background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.38) 26%,rgba(255,255,255,.88) 52%,#fff 72%)}
  .hero__bg img{object-position:76% 34%}
  .hero h1{margin:16px 0 14px}
  .hero p.lead{font-size:13px;line-height:1.8}
  .hero p.lead br{display:none}
  .hero__acts{margin-top:24px;gap:10px}
  .hero__acts .btn{height:46px;font-size:13.5px;padding:0 20px}
  .hero__metrics{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;margin-top:24px}
  .hero__metrics b{font-size:20px}
  .hero-idx__in{grid-template-columns:repeat(4,1fr);gap:8px;padding-top:12px;padding-bottom:12px}
  .hero-idx__item{padding:0 !important;border-left:0 !important}
  .hero-idx__bar{margin-bottom:8px}
  .hero-idx__txt{font-size:0;padding-bottom:0;justify-content:center;gap:0}
  .hero-idx__txt b{font-size:11px}
  .sec{padding:56px 0}
  .sec-head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:30px}
  .sec-head__r{padding-bottom:0}
  .trust__in{grid-template-columns:1fr 1fr}
  .trust__item{padding:18px 12px}
  .trust__item:nth-child(3){border-left:0}
  .trust__item:nth-child(n+3){border-top:1px solid var(--line)}
  .apps{grid-template-columns:1fr}
  .mats{grid-template-columns:1fr 1fr;gap:12px}
  .mat{min-height:120px;padding:18px 16px 16px}
  .mat__code{font-size:17px}
  .mat__name{font-size:11.5px;max-width:66%}
  .mat__en{display:none}
  .mat__arrow{right:14px;top:16px}
  .mat__bg{
    width:60%;opacity:.85;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 34%,rgba(0,0,0,.5) 60%,rgba(0,0,0,.92) 88%,#000 100%);
    mask-image:linear-gradient(90deg,transparent 0%,transparent 34%,rgba(0,0,0,.5) 60%,rgba(0,0,0,.92) 88%,#000 100%);
  }
  .bwall{grid-template-columns:1fr 1fr;gap:10px}
  .bwall__item{height:104px;padding:16px 12px;gap:12px}
  .bwall__logo{max-height:40px}
  .bwall__item span{font-size:9.5px;letter-spacing:.02em;white-space:normal;text-align:center;line-height:1.5}
  .steps{grid-template-columns:1fr 1fr;gap:26px 0;padding-top:28px}
  .step{padding-right:20px}
  .step:not(:last-child)::after{display:none}
  .ware__media img{height:280px}
  .ware__stats{flex-wrap:wrap;gap:20px 0}
  .ware__stat{flex:0 0 50%}
  .ware__stat:nth-child(3){padding-left:0;border-left:0}
  .cta__in{padding:44px 0}
  .footer__in{grid-template-columns:1fr;gap:30px;padding-bottom:36px}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:8px}
  .banner{padding:32px 0 34px}
  .prod-layout{padding:32px 0 56px}
  .bchip{height:46px;padding:0 12px;border-radius:9px;gap:7px;font-size:12.5px}
  .bchip--logo{padding:0 12px 0 11px;gap:8px}
  .bchip__logo{height:18px;max-width:58px}
  .bchip__name{font-size:12.5px}
  .bchip i{font-size:10px}
  .prod-head{flex-direction:column;gap:20px}
  .prod-props{gap:20px}
  .prod-prop{text-align:left}
  .trow{grid-template-columns:1fr 1fr;gap:10px 14px;padding:14px 6px}
  .thead{display:none}
  .trow__app{display:block;grid-column:1/-1;font-size:11.5px;color:var(--muted)}
  .trow__mfr{text-align:right}
  .trow__act{grid-column:1/-1;text-align:left}
  .trow__feats{grid-column:1/-1}
  .res{grid-template-columns:1fr;gap:8px}
  .res__act{text-align:left}
  .fbar{flex-direction:column;align-items:flex-start;gap:10px}
  .fsearch input{height:56px;padding-right:110px;font-size:14px}
  .fsearch__btn{height:44px;padding:0 18px;font-size:13px}
  .fsearch__ico{top:19px}
  .qr-card{padding:26px 22px}
  .qr-card__body{flex-direction:column;gap:24px}
  .qr-box{width:100%;height:auto;padding:16px 0}
  .qr-card__acts{flex-direction:column}
  .qr-card__acts .btn--ghost{width:100%}
  .dock{right:10px;gap:8px;top:auto;bottom:16px;transform:none}
  .dock__item{width:40px;height:40px;border-radius:9px}
  .dock__item svg{width:19px;height:19px}
  .dock__qr{right:56px;bottom:0;top:auto;width:176px}
  .dock__qr img{width:132px;height:132px}
  .dock__tip{display:none}
  .about-media img{height:280px}
  .stats__i{padding:24px 18px}
  .stats__i b{font-size:30px}
  .timeline::before{left:8px}
  .tl{grid-template-columns:1fr;gap:6px;padding-bottom:26px;padding-left:26px}
  .tl__b{padding-left:0}
  .tl__b::before{left:-22px}
  .filter-row{}
}
@media (max-width:420px){
  .topbar__tag{display:none}
  .topbar__in{justify-content:flex-end}
  .mat{padding:20px 16px 18px}
  .mat__code{font-size:17px}
  .trust__in{grid-template-columns:1fr}
  .trust__item{border-left:0 !important}
  .trust__item+.trust__item{border-top:1px solid var(--line)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  [data-reveal],.hero__copy>*{opacity:1 !important;transform:none !important}
}