/* =========================================================
   Yanrium Technologies HK — 官网主样式
   主题：深蓝 / 藏青 科技风
   ========================================================= */

/* ---------- 1. 变量与重置 ---------- */
:root{
  --bg:#FFFFFF;
  --bg-2:#F5F8FD;
  --bg-3:#0A1B3D;
  --bg-4:#0C2350;

  --panel:#FFFFFF;
  --panel-2:#F4F7FC;
  --panel-3:#E9F0FA;
  --line:#DEE6F2;
  --line-2:#C5D2E6;
  --line-3:#9FB2CE;

  --txt:#0A1B3D;
  --txt-2:#3C4E70;
  --txt-3:#67789B;

  /* 深色岛屿（顶栏/页脚/CTA 等）在 .dark-island 作用域内保留原浅色系 */
  --dark-txt:#EAF0FB;
  --dark-txt-2:#A9BADB;
  --dark-txt-3:#7789AC;
  --dark-line:rgba(255,255,255,.09);
  --dark-line-2:rgba(255,255,255,.16);

  --brand:#2B6FF3;
  --brand-l:#2F6BE8;
  --cyan:#089FD6;
  --violet:#8B93FF;
  --grad:linear-gradient(135deg,#2B6FF3 0%,#0E9FE0 100%);
  --grad-soft:linear-gradient(135deg,rgba(43,111,243,.18) 0%,rgba(0,194,255,.10) 100%);

  --c-li:#3B82F6;      /* 锂电 */
  --c-na:#22D3EE;      /* 钠电 */
  --c-ssb:#8B93FF;     /* 固态 */

  --r-sm:10px;
  --r:16px;
  --r-lg:22px;
  --r-pill:999px;

  --shadow:0 24px 60px -28px rgba(10,27,61,.28);
  --shadow-sm:0 12px 30px -18px rgba(10,27,61,.22);

  --header-h:74px;
  --maxw:1240px;

  --ff:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",Roboto,Helvetica,Arial,sans-serif;
  --ff-en:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  --ff-mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
/* 横向溢出裁切放在 html（传播至视口），避免 body 成为滚动容器而使 position:sticky 失效 */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 18px);overflow-x:hidden}
body{
  margin:0;
  font-family:var(--ff);
  font-size:16px;
  line-height:1.75;
  color:var(--txt-2);
  background:var(--bg);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.nav-open{overflow:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5{margin:0;color:var(--txt);font-weight:700;line-height:1.25;letter-spacing:-.01em}
p{margin:0}
button{font-family:inherit;cursor:pointer}
::selection{background:rgba(43,111,243,.42);color:#fff}

/* 滚动条 */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#F1F5FB}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#B9C8E0,#D6E0F0);border-radius:8px;border:2px solid #F1F5FB}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#2B6FF3,#0E7FC4)}

/* ---------- 2. 背景装饰 ---------- */
.bg-deco{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-deco::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(10,27,61,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,27,61,.05) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 120% 80% at 50% 0%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 120% 80% at 50% 0%,#000 20%,transparent 78%);
}
.bg-orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.22}
.bg-orb--1{width:620px;height:620px;top:-220px;left:-160px;background:radial-gradient(circle,rgba(43,111,243,.42),transparent 68%)}
.bg-orb--2{width:560px;height:560px;top:180px;right:-200px;background:radial-gradient(circle,rgba(0,194,255,.26),transparent 68%)}
.bg-orb--3{width:700px;height:700px;bottom:-300px;left:32%;background:radial-gradient(circle,rgba(139,147,255,.18),transparent 70%)}

.page-wrap{position:relative;z-index:1}

/* ---------- 3. 容器与工具 ---------- */
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:104px 0;position:relative}
.section--tight{padding:76px 0}
.section--alt{background:linear-gradient(180deg,rgba(10,27,61,.035) 0%,rgba(255,255,255,0) 100%)}
.hr-glow{height:1px;border:0;background:linear-gradient(90deg,transparent,rgba(43,111,243,.35),rgba(0,194,255,.25),transparent);margin:0}

.grad-txt{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.mono{font-family:var(--ff-mono)}
.txt-center{text-align:center}

/* ---------- 4. 标题组 / 胶囊标签 ---------- */
.sec-head{max-width:780px;margin-bottom:56px}
.sec-head--center{margin-left:auto;margin-right:auto;text-align:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:var(--r-pill);
  border:1px solid rgba(43,111,243,.38);
  background:rgba(43,111,243,.10);
  color:var(--brand-l);
  font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:20px;white-space:nowrap;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.eyebrow--plain::before{display:none}
.sec-title{font-size:clamp(28px,3.6vw,42px);letter-spacing:-.02em;margin-bottom:16px}
.sec-desc{font-size:16.5px;color:var(--txt-2);max-width:720px}
.sec-head--center .sec-desc{margin:0 auto}

/* ---------- 5. 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;border-radius:var(--r-pill);
  font-size:15px;font-weight:600;line-height:1.4;
  border:1px solid transparent;
  transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s,background .25s,border-color .25s,color .25s;
  white-space:nowrap;
}
.btn svg{width:17px;height:17px;flex:none}
.btn--primary{background:var(--grad);color:#fff;box-shadow:0 12px 30px -12px rgba(43,111,243,.75)}
.btn--primary:hover{transform:translateY(-3px);box-shadow:0 18px 40px -14px rgba(0,194,255,.7)}
.btn--ghost{background:#FFFFFF;border-color:var(--line-2);color:var(--txt);box-shadow:0 2px 8px -4px rgba(10,27,61,.18)}
.btn--ghost:hover{transform:translateY(-3px);border-color:rgba(43,111,243,.55);background:rgba(43,111,243,.07);color:var(--brand)}
.btn--sm{padding:9px 18px;font-size:13.5px}
.btn--block{width:100%}
/* 深色岛屿内的幽灵按钮保持反白样式 */
.cta-band .btn--ghost,.mail-panel .btn--ghost,.site-footer .btn--ghost{background:rgba(255,255,255,.08);border-color:var(--line-2);color:#fff}
.cta-band .btn--ghost:hover,.mail-panel .btn--ghost:hover,.site-footer .btn--ghost:hover{background:#fff;border-color:#fff;color:var(--bg-3)}

.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.btn-row--center{justify-content:center}

/* ---------- 6. Header ---------- */
/* 深色岛屿：顶栏、移动抽屉、页脚、深蓝横幅内恢复原暗色变量（顶/底保持不变） */
.site-header,.mobile-nav,.site-footer,.cta-band,.mail-panel,.vis-frame{
  --txt:#EAF0FB;
  --txt-2:#A9BADB;
  --txt-3:#7789AC;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --line-3:rgba(255,255,255,.28);
  --panel:rgba(255,255,255,.035);
  --panel-2:rgba(255,255,255,.06);
  --brand-l:#5B93FF;
}
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--header-h);
  background:rgba(5,11,24,.94);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  backdrop-filter:saturate(160%) blur(18px);
  border-bottom:1px solid var(--dark-line);
  transition:background .3s,border-color .3s,backdrop-filter .3s;
}
.site-header.is-scrolled{
  background:rgba(5,11,24,.82);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  backdrop-filter:saturate(160%) blur(18px);
  border-bottom-color:var(--line);
}
.header-in{display:flex;align-items:center;gap:20px;height:var(--header-h)}

.brand{display:flex;align-items:center;gap:11px;margin-right:auto;flex:none}
.brand__mark{
  width:38px;height:38px;border-radius:11px;flex:none;
  background:var(--grad);
  display:grid;place-items:center;
  box-shadow:0 8px 22px -8px rgba(43,111,243,.9);
  position:relative;overflow:hidden;
}
.brand__mark::after{content:"";position:absolute;inset:0;background:linear-gradient(140deg,rgba(255,255,255,.45),transparent 55%)}
.brand__mark svg{width:21px;height:21px;color:#fff;position:relative;z-index:1}
.brand__txt{display:flex;flex-direction:column;line-height:1.15}
.brand__name{font-size:17.5px;font-weight:800;color:#fff;letter-spacing:.02em}
.brand__sub{font-size:10.5px;color:var(--txt-3);letter-spacing:.19em;text-transform:uppercase;font-weight:600}

.main-nav{display:flex;align-items:center;gap:4px}
.main-nav a{
  position:relative;display:block;padding:9px 15px;border-radius:var(--r-sm);
  font-size:14.8px;font-weight:500;color:var(--txt-2);
  transition:color .22s,background .22s;
}
.main-nav a:hover{color:#fff;background:rgba(255,255,255,.10)}
.main-nav a.is-active{color:#fff}
.main-nav a.is-active::after{
  content:"";position:absolute;left:15px;right:15px;bottom:2px;height:2px;border-radius:2px;
  background:var(--grad);box-shadow:0 0 10px rgba(0,194,255,.8);
}

.header-tools{display:flex;align-items:center;gap:10px;flex:none}
.lang-switch{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);background:rgba(255,255,255,.06);
  color:var(--dark-txt);font-size:13px;font-weight:600;letter-spacing:.03em;
  transition:border-color .22s,background .22s,color .22s;
}
.lang-switch svg{width:15px;height:15px;color:var(--cyan)}
.lang-switch:hover{border-color:rgba(0,194,255,.65);background:rgba(0,194,255,.12);color:#fff}

/* ---------- Header 搜索按钮 ---------- */
.search-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);background:rgba(255,255,255,.06);
  color:var(--dark-txt);cursor:pointer;
  transition:border-color .25s,background .25s,color .25s;
}
.search-btn svg{width:16px;height:16px;color:var(--cyan)}
.search-btn:hover{border-color:rgba(0,194,255,.65);background:rgba(0,194,255,.12);color:#fff}

/* ---------- 搜索弹层 ---------- */
.srch-overlay{position:fixed;inset:0;z-index:120;display:none}
.srch-overlay.is-open{display:block}
.srch-lock{overflow:hidden}
.srch-mask{position:absolute;inset:0;background:rgba(4,9,20,.55);backdrop-filter:blur(4px);animation:srch-fade .25s ease}
.srch-panel{
  position:absolute;left:50%;top:12vh;transform:translateX(-50%);
  width:min(680px,calc(100vw - 28px));max-height:74vh;
  display:flex;flex-direction:column;
  background:#FFFFFF;border:1px solid rgba(10,27,61,.16);border-radius:16px;
  box-shadow:0 40px 90px -30px rgba(4,10,25,.5);overflow:hidden;
  animation:srch-pop .28s cubic-bezier(.2,.8,.3,1);
}
@keyframes srch-fade{from{opacity:0}to{opacity:1}}
@keyframes srch-pop{from{opacity:0;transform:translateX(-50%) translateY(14px) scale(.98)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
.srch-input{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid rgba(10,27,61,.08)}
.srch-input svg{width:20px;height:20px;flex:none;color:#2B6FF3}
.srch-input input{flex:1;border:0;outline:0;background:transparent;font-family:var(--ff);font-size:16px;color:#131B2B}
.srch-input input::placeholder{color:#8B97AB}
.srch-esc{flex:none;font-family:var(--ff-mono);font-size:11px;color:#8B97AB;border:1px solid rgba(10,27,61,.16);border-radius:6px;padding:3px 8px;background:#F4F7FB}
.srch-meta{padding:9px 18px;font-size:12.5px;color:#71809A;border-bottom:1px solid rgba(10,27,61,.06);flex:none}
.srch-results{flex:1;overflow-y:auto;padding:8px}
.srch-empty{padding:34px 20px;text-align:center;color:#8B97AB;font-size:14px}
.srch-item{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:10px;text-decoration:none;color:inherit;transition:background .18s}
.srch-item:hover,.srch-item.is-active{background:#F0F5FC}
.srch-item__ico{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:rgba(43,111,243,.1);border:1px solid rgba(43,111,243,.28);color:#2563EB}
.srch-item__ico svg{width:16px;height:16px}
.srch-item__b{min-width:0;display:block}
.srch-item__t{display:block;font-size:14.6px;font-weight:600;color:#131B2B;line-height:1.45}
.srch-item__t em{font-style:normal;color:#2B6FF3;background:rgba(43,111,243,.12);border-radius:3px;padding:0 2px}
.srch-item__s{display:block;font-size:12.4px;color:#71809A;margin-top:3px;line-height:1.55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srch-item__tag{margin-left:auto;flex:none;font-size:11px;font-weight:700;color:#8B97AB;letter-spacing:.06em;padding-top:4px}
@media (max-width:560px){
  .srch-panel{top:8vh;max-height:80vh}
  .srch-esc,.srch-item__tag{display:none}
}

.nav-toggle{
  display:none;width:42px;height:42px;border-radius:11px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.05);
  color:var(--txt);place-items:center;
}
.nav-toggle svg{width:20px;height:20px}
.nav-toggle .i-close{display:none}
body.nav-open .nav-toggle .i-menu{display:none}
body.nav-open .nav-toggle .i-close{display:block}

.scroll-bar{position:fixed;top:0;left:0;height:2px;z-index:101;width:0;background:var(--grad);box-shadow:0 0 12px rgba(0,194,255,.9)}

/* 移动端抽屉 */
.mobile-nav{
  position:fixed;inset:var(--header-h) 0 0;z-index:99;
  background:rgba(5,11,24,.97);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  padding:26px 24px 40px;
  transform:translateY(-12px);opacity:0;visibility:hidden;
  transition:opacity .28s,transform .28s,visibility .28s;
  overflow-y:auto;
}
body.nav-open .mobile-nav{opacity:1;visibility:visible;transform:none}
.mobile-nav a{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 4px;border-bottom:1px solid var(--line);
  font-size:17px;font-weight:600;color:var(--txt-2);
}
.mobile-nav a.is-active{color:#fff}
.mobile-nav a svg{width:16px;height:16px;color:var(--brand-l);opacity:.7}
.mobile-nav .m-foot{margin-top:28px;display:grid;gap:12px}

/* ---------- 7. Hero ---------- */
.hero{
  position:relative;
  padding:calc(var(--header-h) + 76px) 0 88px;
  overflow:hidden;
}
.hero-in{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:56px;align-items:center}
.hero__badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 16px 7px 8px;border-radius:var(--r-pill);
  border:1px solid rgba(0,194,255,.3);background:rgba(0,194,255,.08);
  font-size:13px;color:var(--txt);margin-bottom:26px;
}
.hero__badge b{
  padding:3px 10px;border-radius:var(--r-pill);background:var(--grad);
  font-size:11.5px;font-weight:700;color:#fff;letter-spacing:.06em;
}
.hero__title{font-size:clamp(34px,5vw,60px);line-height:1.14;letter-spacing:-.028em;margin-bottom:22px}
.hero__title .line{display:block}
.hero__desc{font-size:17px;color:var(--txt-2);max-width:560px;margin-bottom:34px}
.hero__cta{margin-bottom:46px}

.hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.hero-stat{background:#FFFFFF;padding:20px 22px}
.hero-stat__n{font-size:clamp(22px,2.6vw,30px);font-weight:800;color:var(--txt);line-height:1.2;letter-spacing:-.02em}
.hero-stat__n i{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-stat__l{font-size:13px;color:var(--txt-3);margin-top:5px}

/* Hero 视觉 */
.hero-visual{position:relative}
.vis-frame{
  position:relative;border-radius:var(--r-lg);
  border:1px solid var(--line-2);
  background:
    radial-gradient(120% 100% at 12% 0%,rgba(43,111,243,.22),transparent 60%),
    linear-gradient(160deg,#0C2350,#06102A);
  box-shadow:var(--shadow);
  padding:26px;overflow:hidden;
}
.vis-frame::before{
  content:"";position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,194,255,.85),transparent);
}
.vis-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;position:relative;z-index:1}
.vis-chip{
  border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.035);padding:15px 16px;
  transition:transform .3s,border-color .3s,background .3s;
}
.vis-chip:hover{transform:translateY(-4px);border-color:rgba(0,194,255,.5);background:rgba(0,194,255,.07)}
.vis-chip__k{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.vis-chip__d{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:10.5px;font-weight:800;color:#fff;letter-spacing:.02em;flex:none}
.vis-chip__t{font-size:13.6px;font-weight:700;color:#fff;line-height:1.3}
.vis-chip__s{font-size:11.5px;color:var(--txt-3);line-height:1.5}
.vis-chip--wide{grid-column:span 2}
.d-li{background:linear-gradient(135deg,#3B82F6,#1E4FD8)}
.d-na{background:linear-gradient(135deg,#22D3EE,#0E8FB8)}
.d-ssb{background:linear-gradient(135deg,#8B93FF,#5A5FE0)}

.vis-lattice{margin-top:16px;border:1px solid var(--line);border-radius:14px;background:rgba(3,9,22,.55);overflow:hidden;position:relative;z-index:1}
.vis-lattice svg{width:100%;height:auto;display:block}

.float-tag{
  position:absolute;z-index:2;display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);background:rgba(8,18,38,.9);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:12.5px;font-weight:600;color:#fff;box-shadow:var(--shadow-sm);
  animation:floaty 6s ease-in-out infinite;
}
.float-tag svg{width:14px;height:14px;color:var(--cyan)}
.float-tag--a{top:-16px;right:14px}
.float-tag--b{bottom:-16px;left:10px;animation-delay:-3s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* 通用页头 banner */
.page-hero{padding:calc(var(--header-h) + 62px) 0 62px;position:relative;overflow:hidden}
.page-hero::after{
  content:"";position:absolute;left:50%;bottom:0;width:min(900px,100%);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(43,111,243,.6),rgba(0,194,255,.4),transparent);
}
.page-hero .eyebrow{margin-bottom:18px}
.page-hero h1{font-size:clamp(30px,4.4vw,50px);letter-spacing:-.025em;margin-bottom:16px}
.page-hero p{font-size:17px;max-width:760px;color:var(--txt-2)}
.crumb{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--txt-3);margin-bottom:22px;flex-wrap:wrap}
.crumb a:hover{color:var(--brand)}
.crumb svg{width:13px;height:13px;opacity:.55}

/* ---------- 8. 卡片 ---------- */
.grid{display:grid;gap:22px}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}

.card{
  position:relative;border-radius:var(--r);
  border:1px solid var(--line);background:var(--panel);
  padding:28px;overflow:hidden;
  box-shadow:0 1px 3px rgba(10,27,61,.05),0 10px 28px -18px rgba(10,27,61,.14);
  transition:transform .32s cubic-bezier(.2,.7,.3,1),border-color .32s,background .32s,box-shadow .32s;
}
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--grad);opacity:0;transition:opacity .32s;
}
.card:hover{transform:translateY(-6px);border-color:var(--line-2);background:var(--panel-2);box-shadow:var(--shadow-sm)}
.card:hover::before{opacity:1}
.card__ico{
  width:50px;height:50px;border-radius:14px;display:grid;place-items:center;
  background:var(--grad-soft);border:1px solid rgba(43,111,243,.35);
  color:var(--brand-l);margin-bottom:20px;
}
.card__ico svg{width:24px;height:24px}
.card h3{font-size:19px;margin-bottom:11px}
.card p{font-size:14.8px;color:var(--txt-2);line-height:1.72}
.card__list{margin-top:16px;display:grid;gap:9px}
.card__list li{display:flex;gap:9px;font-size:14px;color:var(--txt-2);line-height:1.6}
.card__list svg{width:16px;height:16px;flex:none;margin-top:4px;color:var(--cyan)}
.card__link{
  display:inline-flex;align-items:center;gap:7px;margin-top:20px;
  font-size:14px;font-weight:600;color:var(--brand-l);
}
.card__link svg{width:15px;height:15px;transition:transform .25s}
.card:hover .card__link svg{transform:translateX(4px)}

/* 白底卡片统一浅投影，避免纯白页面上边界发虚 */
.p-card,.topic,.ind,.step,.c-card,.check-grid li,.vis-chip,.side-help,.pillar__i,.family-head{
  box-shadow:0 1px 3px rgba(10,27,61,.05),0 10px 28px -18px rgba(10,27,61,.14);
}

/* 材料体系卡（首页） */
.line-card{padding:0;display:flex;flex-direction:column}
.line-card__top{padding:30px 28px 24px;position:relative;overflow:hidden}
.line-card__top::after{
  content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;
  background:var(--accent,#2B6FF3);opacity:.16;filter:blur(34px);
}
.line-card__idx{
  font-family:var(--ff-mono);font-size:12px;font-weight:700;letter-spacing:.16em;
  color:var(--accent,#2B6FF3);margin-bottom:14px;display:block;
}
.line-card__ico{
  width:54px;height:54px;border-radius:15px;display:grid;place-items:center;margin-bottom:18px;
  background:color-mix(in srgb,var(--accent,#2B6FF3) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--accent,#2B6FF3) 42%,transparent);
  color:var(--accent,#2B6FF3);
}
.line-card__ico svg{width:26px;height:26px}
.line-card h3{font-size:21px;margin-bottom:10px}
.line-card__en{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--txt-3);margin-bottom:14px;font-weight:600}
.line-card__top p{font-size:14.6px;color:var(--txt-2)}
.line-card__body{padding:0 28px 26px;margin-top:auto}
.line-card__tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}

.tag{
  display:inline-flex;align-items:center;
  padding:5px 11px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--panel-2);
  font-size:12.3px;color:var(--txt-2);line-height:1.5;white-space:nowrap;
}
.tag--accent{border-color:color-mix(in srgb,var(--accent,#2B6FF3) 40%,transparent);color:var(--accent,#2563EB)}

/* 统计条 */
.stat-band{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.stat-band__i{background:linear-gradient(160deg,#FFFFFF,#F4F8FD);padding:30px 26px;text-align:center}
.stat-band__n{font-size:clamp(28px,3.4vw,40px);font-weight:800;line-height:1.1;letter-spacing:-.02em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat-band__l{font-size:13.6px;color:var(--txt-2);margin-top:8px}

/* ---------- 9. CTA 横幅 ---------- */
.cta-band{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid rgba(43,111,243,.34);
  background:
    radial-gradient(110% 140% at 8% 0%,rgba(43,111,243,.34),transparent 58%),
    radial-gradient(90% 130% at 96% 100%,rgba(0,194,255,.22),transparent 60%),
    linear-gradient(150deg,#0A1B3D,#050C1A);
  padding:56px 48px;display:flex;align-items:center;gap:36px;justify-content:space-between;flex-wrap:wrap;
}
.cta-band::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 70% 100% at 100% 50%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 70% 100% at 100% 50%,#000,transparent 72%);
}
.cta-band__t{position:relative;z-index:1;max-width:620px}
.cta-band__t h2{font-size:clamp(24px,3vw,34px);margin-bottom:12px;letter-spacing:-.02em}
.cta-band__t p{font-size:15.6px;color:var(--txt-2)}
.cta-band__a{position:relative;z-index:1;display:flex;gap:13px;flex-wrap:wrap}

/* ---------- 10. 关于我们 ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.split--wide-l{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.prose p{font-size:16px;color:var(--txt-2);margin-bottom:18px}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--txt);font-weight:600}

.info-panel{
  border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(160deg,#FFFFFF,#F4F8FD);
  box-shadow:var(--shadow-sm);
  padding:30px;position:relative;overflow:hidden;
}
.info-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad)}
.info-panel h3{font-size:18px;margin-bottom:20px;display:flex;align-items:center;gap:10px}
.info-panel h3 svg{width:19px;height:19px;color:var(--cyan)}
.kv{display:grid;gap:14px}
.kv__r{display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;padding-bottom:14px;border-bottom:1px dashed var(--line)}
.kv__r:last-child{border-bottom:0;padding-bottom:0}
.kv__k{font-size:13.4px;color:var(--txt-3)}
.kv__v{font-size:14.4px;color:var(--txt);font-weight:500}

.pillar{display:grid;gap:20px}
.pillar__i{
  display:flex;gap:18px;padding:22px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--panel);
  transition:transform .3s,border-color .3s,background .3s;
}
.pillar__i:hover{transform:translateX(6px);border-color:rgba(0,194,255,.4);background:var(--panel-2)}
.pillar__n{
  flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:var(--grad-soft);border:1px solid rgba(43,111,243,.34);
  font-family:var(--ff-mono);font-size:14px;font-weight:700;color:var(--brand-l);
}
.pillar__i h4{font-size:16.5px;margin-bottom:7px}
.pillar__i p{font-size:14.2px;color:var(--txt-2);line-height:1.7}

.check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.check-grid li{
  display:flex;align-items:center;gap:10px;
  padding:13px 16px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--panel);
  font-size:14.2px;color:var(--txt);transition:border-color .25s,background .25s;
}
.check-grid li:hover{border-color:rgba(0,194,255,.45);background:rgba(0,194,255,.07)}
.check-grid svg{width:16px;height:16px;flex:none;color:var(--cyan)}

/* ---------- 11. 产品页 ---------- */
.prod-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:44px;align-items:start}
/* align-self:start 防止 grid 子项被拉伸至等高，否则 sticky 无滚动余量而失效 */
.prod-side{position:sticky;top:calc(var(--header-h) + 26px);align-self:start}
.side-nav{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:16px;overflow:hidden}
.side-nav__grp{margin-bottom:16px}
.side-nav__grp:last-child{margin-bottom:0}
.side-nav__t{
  display:flex;align-items:center;gap:9px;
  font-size:13.6px;font-weight:700;color:var(--txt);
  padding:9px 10px;border-radius:var(--r-sm);margin-bottom:4px;
}
.side-nav__t i{width:8px;height:8px;border-radius:3px;flex:none;background:var(--accent,#2B6FF3)}
.side-nav a.sub{
  display:block;padding:7px 10px 7px 27px;border-radius:8px;
  font-size:13.2px;color:var(--txt-3);transition:color .2s,background .2s;
}
.side-nav a.sub:hover{color:var(--txt);background:var(--panel-3)}
.side-nav a.sub.is-active{color:var(--brand-l);background:rgba(43,111,243,.13)}

.side-help{margin-top:16px;border:1px solid rgba(0,194,255,.28);border-radius:var(--r);
  background:linear-gradient(160deg,rgba(0,194,255,.10),rgba(43,111,243,.05));padding:20px}
.side-help p{font-size:13.4px;color:var(--txt-2);margin-bottom:14px;line-height:1.65}

/* 移动端子类芯片 */
.chips{display:none;gap:9px;overflow-x:auto;padding:2px 3px 8px;margin:0 -3px 26px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips a{flex:none;padding:8px 15px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--panel);font-size:13px;color:var(--txt-2);white-space:nowrap}
.chips a:active{border-color:var(--brand);color:var(--brand)}

.prod-family{margin-bottom:74px;scroll-margin-top:calc(var(--header-h) + 20px)}
.prod-family:last-child{margin-bottom:0}
.family-head{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:22px 26px;border-radius:var(--r);margin-bottom:14px;
  border:1px solid color-mix(in srgb,var(--accent,#2B6FF3) 34%,transparent);
  background:
    radial-gradient(100% 160% at 0% 0%,color-mix(in srgb,var(--accent,#2B6FF3) 20%,transparent),transparent 62%),
    rgba(255,255,255,1);
}
.family-head__ico{
  width:52px;height:52px;border-radius:14px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent,#2B6FF3) 18%,transparent);
  border:1px solid color-mix(in srgb,var(--accent,#2B6FF3) 44%,transparent);
  color:var(--accent,#8BB4FF);
}
.family-head__ico svg{width:26px;height:26px}
.family-head__ico{color:var(--accent,#2563EB)}
.family-head__t h2{font-size:clamp(21px,2.5vw,27px);margin-bottom:4px}
.family-head__t span{font-size:11.8px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);font-weight:600}
.family-head__c{
  margin-left:auto;padding:7px 15px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);background:#FFFFFF;
  font-family:var(--ff-mono);font-size:12.5px;color:var(--txt-2);white-space:nowrap;
}
.family-desc{font-size:15.4px;color:var(--txt-2);max-width:900px;margin:0 2px 30px}

.prod-group{margin-bottom:44px;scroll-margin-top:calc(var(--header-h) + 20px)}
.prod-group:last-child{margin-bottom:0}
.grp-head{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.grp-head__bar{width:4px;height:19px;border-radius:3px;background:var(--accent,#2B6FF3);flex:none}
.grp-head h3{font-size:18.5px}
.grp-head__en{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--txt-3);font-weight:600;padding-top:3px}
.grp-head__n{margin-left:auto;font-family:var(--ff-mono);font-size:12px;color:var(--txt-3);flex:none}

.prod-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.p-card{
  position:relative;border-radius:14px;border:1px solid var(--line);
  background:var(--panel);padding:20px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s,background .3s,box-shadow .3s;
}
.p-card::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--accent,#2B6FF3);opacity:0;transition:opacity .3s;
}
.p-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--accent,#2B6FF3) 45%,transparent);background:var(--panel-2);box-shadow:var(--shadow-sm)}
.p-card:hover::after{opacity:1}
.p-card__top{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px;flex-wrap:wrap}
/* 英文简称徽章：white-space:nowrap 强制单行；宽度随内容自适应且不超过卡片；超长简称用极小字号仍保持一行 */
.p-card__ab{
  flex:0 1 auto;min-width:52px;max-width:100%;height:34px;padding:0 10px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--accent,#2B6FF3) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--accent,#2B6FF3) 38%,transparent);
  font-family:var(--ff-mono);font-size:11.6px;font-weight:700;letter-spacing:0;line-height:1;
  color:var(--accent,#2563EB);
  white-space:nowrap;
}
.p-card__ab sub{font-size:.78em;line-height:0}
.p-card__tt{min-width:0;padding-top:2px}
.p-card h4{font-size:15.4px;line-height:1.42;color:var(--txt)}
.p-card__en{display:block;font-size:11.2px;color:var(--txt-3);font-weight:500;margin-top:4px;letter-spacing:.01em;line-height:1.45}
.p-card p{font-size:13.4px;color:var(--txt-2);line-height:1.68}
.p-card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}
.p-card__tags span{
  font-size:11.3px;padding:3px 9px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--panel-2);color:var(--txt-3);
}

.prod-note{
  margin-top:52px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);padding:26px 28px;display:flex;gap:18px;align-items:flex-start;
}
.prod-note svg{width:22px;height:22px;flex:none;color:var(--cyan);margin-top:2px}
.prod-note h4{font-size:16px;margin-bottom:8px}
.prod-note p{font-size:14.2px;color:var(--txt-2);line-height:1.72}

/* ---------- 12. 业务页 ---------- */
.biz-card{display:flex;flex-direction:column}
.biz-card__no{
  font-family:var(--ff-mono);font-size:12px;font-weight:700;letter-spacing:.14em;
  color:var(--brand-l);margin-bottom:16px;
}
.biz-card h3{font-size:20px;margin-bottom:6px}
.biz-card__en{font-size:11.6px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3);font-weight:600;margin-bottom:14px}
.biz-card p{font-size:14.6px;color:var(--txt-2);margin-bottom:4px}

.flow{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.flow::before{
  content:"";position:absolute;top:26px;left:6%;right:6%;height:1px;
  background:linear-gradient(90deg,rgba(43,111,243,.1),rgba(0,194,255,.55),rgba(43,111,243,.1));
}
.flow__s{position:relative;text-align:center;padding:0 4px}
.flow__n{
  position:relative;z-index:1;width:52px;height:52px;margin:0 auto 16px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(160deg,#0C2350,#071429);
  border:1px solid rgba(0,194,255,.45);
  font-family:var(--ff-mono);font-size:15px;font-weight:700;color:#5BE3FF;
  box-shadow:0 0 0 6px #FFFFFF,0 0 22px -6px rgba(0,194,255,.7);
}
.flow__s h4{font-size:15px;margin-bottom:8px}
.flow__s p{font-size:13.2px;color:var(--txt-3);line-height:1.62}

.ind-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ind{
  display:flex;align-items:center;gap:15px;padding:22px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--panel);
  transition:transform .3s,border-color .3s,background .3s;
}
.ind:hover{transform:translateY(-5px);border-color:rgba(0,194,255,.42);background:var(--panel-2)}
.ind__ico{width:44px;height:44px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:var(--grad-soft);border:1px solid rgba(43,111,243,.34);color:var(--brand-l)}
.ind__ico svg{width:22px;height:22px}
.ind h4{font-size:15.6px;margin-bottom:3px}
.ind span{font-size:12.8px;color:var(--txt-3)}

/* ---------- 13. 联系页 ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.c-card{
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  padding:32px 28px;text-align:center;position:relative;overflow:hidden;
  transition:transform .3s,border-color .3s,background .3s;
}
.c-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad);opacity:0;transition:opacity .3s}
.c-card:hover{transform:translateY(-6px);border-color:var(--line-2);background:var(--panel-2)}
.c-card:hover::before{opacity:1}
.c-card__ico{width:56px;height:56px;border-radius:16px;margin:0 auto 20px;display:grid;place-items:center;
  background:var(--grad-soft);border:1px solid rgba(43,111,243,.36);color:var(--brand-l)}
.c-card__ico svg{width:26px;height:26px}
.c-card h3{font-size:16.5px;margin-bottom:12px}
.c-card__v{font-size:16px;font-weight:600;color:var(--txt);word-break:break-word}
.c-card__v a{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.c-card__v a:hover{text-decoration:underline;text-decoration-color:rgba(0,194,255,.6);text-underline-offset:4px}
.c-card__h{font-size:13px;color:var(--txt-3);margin-top:9px}
.pending{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:var(--r-pill);
  border:1px dashed var(--line-2);background:var(--panel-2);
  font-size:13.4px;line-height:1.4;color:var(--txt-3);
}
.pending svg{width:15px;height:15px;flex:none}

.topic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.topic{
  border:1px solid var(--line);border-radius:var(--r);padding:26px;
  background:var(--panel);transition:transform .3s,border-color .3s,background .3s;
}
.topic:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--accent,#2B6FF3) 45%,transparent);background:var(--panel-2)}
.topic__d{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;
  background:color-mix(in srgb,var(--accent,#2B6FF3) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--accent,#2B6FF3) 40%,transparent);
  color:var(--accent,#2563EB)}
.topic__d svg{width:22px;height:22px}
.topic h4{font-size:16.4px;margin-bottom:9px}
.topic p{font-size:13.8px;color:var(--txt-2);line-height:1.7;margin-bottom:14px}
.topic a{display:inline-flex;align-items:center;gap:7px;font-size:13.4px;font-weight:600;color:var(--brand-l)}
.topic a svg{width:14px;height:14px}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;counter-reset:s}
.step{position:relative;padding:28px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel)}
.step__n{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;margin-bottom:18px;
  background:var(--grad);font-family:var(--ff-mono);font-size:15px;font-weight:700;color:#fff;
  box-shadow:0 10px 24px -12px rgba(43,111,243,.9);
}
.step h4{font-size:16.6px;margin-bottom:9px}
.step p{font-size:14px;color:var(--txt-2);line-height:1.7}

.mail-panel{
  border:1px solid rgba(0,194,255,.3);border-radius:var(--r-lg);padding:44px 40px;text-align:center;
  background:
    radial-gradient(90% 140% at 50% 0%,rgba(0,194,255,.16),transparent 62%),
    linear-gradient(160deg,#0A1B3D,#050C1A);
}
.mail-panel h2{font-size:clamp(22px,2.8vw,30px);margin-bottom:12px}
.mail-panel p{font-size:15.4px;color:var(--txt-2);max-width:620px;margin:0 auto 26px}
.mail-big{
  display:inline-flex;align-items:center;gap:11px;padding:15px 30px;border-radius:var(--r-pill);
  border:1px solid rgba(0,194,255,.4);background:rgba(0,194,255,.1);
  font-size:clamp(16px,2.4vw,22px);font-weight:700;color:#fff;word-break:break-all;
  transition:transform .25s,background .25s,box-shadow .25s;
}
.mail-big svg{width:22px;height:22px;color:var(--cyan);flex:none}
.mail-big:hover{transform:translateY(-3px);background:rgba(0,194,255,.18);box-shadow:0 18px 40px -18px rgba(0,194,255,.7)}

/* ---------- 14. Footer ---------- */
.site-footer{
  position:relative;margin-top:40px;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,#081226 0%,#050B14 100%);
}
.site-footer::before{content:"";position:absolute;top:0;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(43,111,243,.55),transparent)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:44px;padding:64px 0 46px}
.foot-brand p{font-size:14.2px;color:var(--txt-3);margin:20px 0 22px;max-width:330px;line-height:1.75}
.foot-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--panel);font-size:12.4px;color:var(--txt-2)}
.foot-badge svg{width:14px;height:14px;color:var(--cyan)}
.foot-col h4{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:20px;font-weight:700}
.foot-col li{margin-bottom:12px}
.foot-col a,.foot-col span{font-size:14.2px;color:var(--txt-3);transition:color .22s;display:inline-flex;align-items:center;gap:9px}
.foot-col a:hover{color:var(--cyan)}
.foot-col svg{width:15px;height:15px;flex:none;opacity:.75}
.foot-bottom{border-top:1px solid var(--line);padding:22px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-bottom p{font-size:13px;color:var(--txt-3)}
.foot-bottom .links{display:flex;gap:20px;flex-wrap:wrap}
.foot-bottom .links a{font-size:13px;color:var(--txt-3)}
.foot-bottom .links a:hover{color:var(--cyan)}

/* ---------- 15. 回到顶部 / reveal ---------- */
.to-top{
  position:fixed;right:26px;bottom:26px;z-index:90;
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.22);background:rgba(10,27,61,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#EAF0FB;opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s,transform .3s,visibility .3s,border-color .3s,background .3s;
  box-shadow:var(--shadow-sm);
}
.to-top svg{width:19px;height:19px}
.to-top.is-on{opacity:1;visibility:visible;transform:none}
.to-top:hover{border-color:rgba(0,194,255,.6);background:rgba(0,194,255,.16);color:#fff}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}
.reveal[data-d="4"]{transition-delay:.36s}

/* ---------- 16. 响应式 ---------- */
@media (max-width:1120px){
  .hero-in{grid-template-columns:1fr;gap:46px}
  .hero-visual{max-width:620px}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
  .flow::before{display:none}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}
}
@media (max-width:960px){
  .main-nav{display:none}
  .nav-toggle{display:grid}
  .prod-layout{grid-template-columns:1fr;gap:0}
  .prod-side{display:none}
  .chips{display:flex}
  .split,.split--wide-l{grid-template-columns:1fr;gap:36px}
  .section{padding:80px 0}
  .contact-grid,.topic-grid,.steps,.ind-grid{grid-template-columns:1fr}
  .stat-band{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  :root{--header-h:64px}
  .container{padding:0 18px}
  .section{padding:64px 0}
  .hero{padding:calc(var(--header-h) + 48px) 0 60px}
  .hero__desc{font-size:15.6px}
  .hero-stats{grid-template-columns:1fr;}
  .hero-stat{display:flex;align-items:center;gap:14px;padding:15px 18px}
  .hero-stat__n{font-size:22px}
  .hero-stat__l{margin-top:0}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .prod-grid{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr;gap:20px}
  .flow__s{display:flex;gap:16px;text-align:left;align-items:flex-start}
  .flow__n{margin:0;flex:none;width:44px;height:44px;box-shadow:0 0 0 5px rgba(5,11,24,.9)}
  .check-grid{grid-template-columns:1fr}
  .cta-band{padding:38px 26px;gap:24px}
  .foot-grid{grid-template-columns:1fr;gap:32px;padding:48px 0 34px}
  .mail-panel{padding:34px 22px}
  .prod-note{flex-direction:column;padding:22px}
  .family-head{padding:18px 20px}
  .family-head__c{margin-left:0}
  .kv__r{grid-template-columns:1fr;gap:4px}
  .to-top{right:16px;bottom:16px;width:42px;height:42px}
  .sec-head{margin-bottom:38px}
  .btn-row{gap:11px}
  .btn{padding:12px 22px;font-size:14.4px}
  .brand__sub{display:none}
}
@media (max-width:400px){
  .container{padding:0 14px}
  .hero__cta .btn{width:100%}
}

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

/* ---------- 16b. 产品卡片配图与详情页 ---------- */
/* 卡片改为链接：继承文本颜色、去下划线 */
a.p-card{display:flex;flex-direction:column;color:inherit;text-decoration:none}
a.p-card:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.p-card__img{
  display:block;border-radius:10px;overflow:hidden;margin-bottom:14px;
  aspect-ratio:4/3;background:var(--panel-2);border:1px solid var(--line);
}
.p-card__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.p-card:hover .p-card__img img{transform:scale(1.05)}
.p-card__more{
  display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:14px;
  font-size:12.6px;font-weight:600;color:var(--accent,#2B6FF3);
}
.p-card__more svg{width:13px;height:13px;transition:transform .3s}
.p-card:hover .p-card__more svg{transform:translateX(3px)}

/* --- 详情页 --- */
.pd-hero{padding-top:26px}
.pd-crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--txt-3);margin-bottom:22px}
.pd-crumb a{color:var(--txt-3)}
.pd-crumb a:hover{color:var(--brand)}
.pd-crumb svg{width:12px;height:12px;flex:none}
.pd-crumb__cur{color:var(--txt-2);font-weight:600}
.pd-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:38px;align-items:start}
.pd-fig{position:sticky;top:calc(var(--header-h) + 20px)}
.pd-fig__box{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow-sm)}
.pd-fig__box img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}
.pd-fig__cap{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;color:var(--txt-3)}
.pd-fig__cap svg{width:13px;height:13px;flex:none}
.pd-head{margin-bottom:6px}
.pd-head .p-card__ab{margin-bottom:14px}
.pd-head h1{font-size:clamp(24px,3.4vw,34px);line-height:1.28;margin:0 0 8px}
.pd-head__en{display:block;font-size:14px;color:var(--txt-3);font-weight:600;letter-spacing:.02em}
.pd-sum{margin:18px 0 0;font-size:15.4px;line-height:1.85;color:var(--txt-2);
  border-left:3px solid var(--accent,#2B6FF3);padding-left:16px}
.pd-hl{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 4px}
.pd-hl span{
  font-size:12.4px;font-weight:600;padding:6px 13px;border-radius:var(--r-pill);
  color:var(--accent,#2B6FF3);background:color-mix(in srgb,var(--accent,#2B6FF3) 11%,transparent);
  border:1px solid color-mix(in srgb,var(--accent,#2B6FF3) 32%,transparent);
}
.pd-sec{margin-top:30px}
.pd-sec h2{display:flex;align-items:center;gap:10px;font-size:17.5px;margin:0 0 10px}
.pd-sec h2 i{width:4px;height:17px;border-radius:3px;background:var(--accent,#2B6FF3);flex:none}
.pd-sec p{font-size:14.4px;line-height:1.9;color:var(--txt-2);margin:0}
.pd-meta{
  margin-top:34px;border:1px dashed var(--line-2);border-radius:var(--r);
  padding:18px 20px;display:flex;gap:26px;flex-wrap:wrap;background:var(--panel-2);
}
.pd-meta div{min-width:150px}
.pd-meta dt{font-size:11.6px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);font-weight:700;margin-bottom:5px}
.pd-meta dd{margin:0;font-size:13.6px;color:var(--txt-2);font-weight:600}
.pd-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:38px}
.pd-nav a{
  display:flex;flex-direction:column;gap:5px;padding:16px 18px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--panel);text-decoration:none;
  transition:border-color .3s,background .3s,transform .3s;
}
.pd-nav a:hover{border-color:color-mix(in srgb,var(--accent,#2B6FF3) 45%,transparent);background:var(--panel-2);transform:translateY(-2px)}
.pd-nav__d{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3);font-weight:700}
.pd-nav__t{font-size:14.2px;font-weight:700;color:var(--txt)}
.pd-nav a:last-child{text-align:right;align-items:flex-end}
@media (max-width:960px){
  .pd-grid{grid-template-columns:1fr;gap:26px}
  .pd-fig{position:static}
}
@media (max-width:560px){
  .pd-nav{grid-template-columns:1fr}
  .pd-nav a:last-child{text-align:left;align-items:flex-start}
}

/* ---------- 17. 打印 ---------- */
@media print{
  .site-header,.mobile-nav,.to-top,.bg-deco,.scroll-bar,.cta-band{display:none!important}
  body{background:#fff;color:#111}
  h1,h2,h3,h4{color:#0A1B3D}
}