/* =========================================================
   大山峡 · 交互增强层
   鼠标悬停 / 触摸反馈 / 滚动动效 / 光标跟随
   —— 本文件在 styles.css 之后加载，用于覆盖与增强
   ========================================================= */

/* ---------------------------------------------------------
   01 · 基础
   --------------------------------------------------------- */
body{transition:opacity .28s var(--ease)}
body.is-leaving{opacity:0}

::selection{background:rgba(20,107,68,.16);color:var(--ink)}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#F4F8F5}
::-webkit-scrollbar-thumb{background:#CFE0D6;border-radius:9px;border:2px solid #F4F8F5}
::-webkit-scrollbar-thumb:hover{background:var(--green)}

:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* 锚点定位避开吸顶导航 */
[id]{scroll-margin-top:104px}

/* ---------------------------------------------------------
   02 · 注入型元素（滚动进度条 / 光标光斑 / 回到顶部）
   --------------------------------------------------------- */
.scrollbar-line{
  position:fixed;left:0;top:0;width:100%;height:2px;z-index:80;
  background:linear-gradient(90deg,var(--green) 0%,var(--aqua) 100%);
  transform:scaleX(0);transform-origin:0 50%;
  pointer-events:none;
}

.cursor-glow{
  position:fixed;left:0;top:0;width:360px;height:360px;margin:-180px 0 0 -180px;
  border-radius:50%;pointer-events:none;z-index:4;opacity:0;
  background:radial-gradient(circle,rgba(79,182,214,.13) 0%,rgba(79,182,214,0) 66%);
  transition:opacity .6s ease;will-change:transform;
}
.cursor-glow.on{opacity:1}

.totop{
  position:fixed;right:24px;bottom:24px;width:46px;height:46px;
  border:0;border-radius:50%;background:var(--green-d);color:#fff;
  display:grid;place-items:center;cursor:pointer;z-index:55;
  opacity:0;pointer-events:none;translate:0 14px;
  box-shadow:0 20px 40px -24px rgba(7,33,26,.9);
  transition:opacity .4s var(--ease),translate .4s var(--ease),background .3s;
}
.totop.on{opacity:1;pointer-events:auto;translate:0 0}
.totop:hover{background:var(--green);translate:0 -3px}
.totop svg{width:15px;height:15px;display:block}

/* ---------------------------------------------------------
   03 · 按钮：磁吸 + 光扫 + 涟漪
   --------------------------------------------------------- */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  translate:0 0;
  transition:translate .45s var(--ease),transform .35s var(--ease),
             background .3s,color .3s,box-shadow .35s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,var(--sheen,rgba(255,255,255,.42)) 50%,transparent 62%);
  transform:translateX(-130%);
  transition:transform .8s var(--ease);
}
.btn:hover::before{transform:translateX(130%)}
.btn--soft{--sheen:rgba(20,107,68,.16)}
.btn--line{--sheen:rgba(255,255,255,.16)}
.btn:active{transform:translateY(0) scale(.985)}
.btn:active::before{transform:translateX(130%)}

.btn--primary:hover{box-shadow:0 16px 34px -14px rgba(20,107,68,.75)}
.btn--soft:hover{box-shadow:0 14px 30px -20px rgba(20,107,68,.6)}
.btn--ghost:hover{box-shadow:0 14px 30px -18px rgba(0,0,0,.6)}

.ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 70%);
  transform:scale(0);
  animation:rippleOut .62s cubic-bezier(.22,.61,.36,1) forwards;
}
.btn--soft .ripple,.btn--line .ripple{
  background:radial-gradient(circle,rgba(20,107,68,.22) 0%,rgba(20,107,68,0) 70%);
}
@keyframes rippleOut{
  from{transform:scale(0);opacity:.9}
  to{transform:scale(1);opacity:0}
}

/* ---------------------------------------------------------
   04 · 导航
   --------------------------------------------------------- */
.menu a::before{
  content:"";position:absolute;left:50%;top:-13px;width:4px;height:4px;border-radius:50%;
  background:var(--green);opacity:0;transform:translate(-50%,5px);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.menu a:hover::before,.menu a.is-active::before{opacity:1;transform:translate(-50%,0)}

.logo{transition:translate .45s var(--ease)}
.logo__cn{transition:color .3s}
.logo:hover .logo__cn{color:#0F5B39}
.footer .logo:hover .logo__cn{color:#6BAA88}

.hot{transition:translate .4s var(--ease)}
.hot strong{transition:color .3s}
.hot:hover{translate:0 -2px}
.hot:hover strong{color:var(--green)}

.nav-toggle:hover i{background:var(--green)}

/* ---------------------------------------------------------
   05 · Hero：拱形卡 3D 跟随 + 光斑 + 图片微缩放
   --------------------------------------------------------- */
.hero::before{
  content:"";position:absolute;right:-160px;top:-140px;width:640px;height:640px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(20,107,68,.07) 0%,rgba(20,107,68,0) 64%);
  animation:floaty 16s ease-in-out infinite;
}
@keyframes floaty{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-34px,28px)}
}

.hero-visual{perspective:1200px}

.arch{
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .55s var(--ease),box-shadow .6s var(--ease);
  will-change:transform;
}
.arch::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,28%),rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 68%);
  opacity:0;transition:opacity .55s ease;
}
.arch:hover::after{opacity:1}
.arch:hover{box-shadow:0 50px 90px -62px rgba(7,33,26,.75),0 2px 0 #F3F7F4}

.arch img{transition:transform 1.3s var(--ease)}
.arch:hover img{transform:scale(1.045)}

.arch__tag{
  transition:transform .5s var(--ease),background .3s,box-shadow .4s;
  box-shadow:0 10px 26px -16px rgba(7,33,26,.8);
}
.arch:hover .arch__tag{transform:translateX(-50%) translateY(-7px);background:var(--green)}

.badge-row .pill{transition:background .3s,color .3s,translate .4s var(--ease)}
.pill:hover{background:#D9EBE0;translate:0 -2px}

.trust span{transition:color .3s,translate .35s var(--ease);display:inline-block}
.trust span:hover{color:var(--green);translate:0 -2px}

/* ---------------------------------------------------------
   06 · 数据条
   --------------------------------------------------------- */
.stat{position:relative;transition:translate .5s var(--ease)}
.stat:hover{translate:0 -4px}
.stat__num{transition:color .35s,text-shadow .4s}
.stat:hover .stat__num{color:#C9EEDC;text-shadow:0 0 30px rgba(79,182,214,.35)}
.stat::after{
  content:"";position:absolute;left:12px;right:24px;bottom:-16px;height:1px;
  background:linear-gradient(90deg,var(--aqua),rgba(79,182,214,0));
  transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease);
}
.stat:hover::after{transform:scaleX(1)}

/* ---------------------------------------------------------
   07 · 产品卡
   --------------------------------------------------------- */
.prod-card{
  position:relative;
  transition:translate .5s var(--ease),box-shadow .55s var(--ease);
}
.prod-card:hover{translate:0 -8px;transform:none}
.prod-card__img{position:relative}
.prod-card__img img{transition:transform 1.1s var(--ease),filter .6s}
.prod-card:hover .prod-card__img img{transform:scale(1.06)}
.prod-card__img::after{
  content:"↗";position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--green);
  display:grid;place-items:center;font-size:14px;line-height:1;
  opacity:0;transform:scale(.6) rotate(-25deg);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
  box-shadow:0 8px 20px -12px rgba(7,33,26,.6);
}
.prod-card:hover .prod-card__img::after{opacity:1;transform:scale(1) rotate(0)}
.prod-card__body h3{transition:color .3s}
.prod-card:hover .prod-card__body h3{color:var(--green)}
.prod-card__spec{transition:letter-spacing .45s var(--ease)}
.prod-card:hover .prod-card__spec{letter-spacing:.16em}

/* 产品列表行 */
.prod-list__row{
  position:relative;
  transition:padding-left .4s var(--ease),border-color .4s;
}
.prod-list__row::before{
  content:"";position:absolute;left:-10px;top:50%;width:3px;height:0;border-radius:2px;
  background:var(--green);transform:translateY(-50%);
  transition:height .38s var(--ease);
}
.prod-list__row:hover{padding-left:8px}
.prod-list__row:hover::before{height:18px}
.prod-list__row b{transition:color .3s}
.prod-list__row:hover b{color:var(--green)}
.prod-list__row span{transition:color .3s,translate .4s var(--ease)}
.prod-list__row:hover span{color:var(--green);translate:-3px 0}

/* ---------------------------------------------------------
   08 · 工厂：图 / 能力清单 / 认证
   --------------------------------------------------------- */
.factory-visual{position:relative;transition:box-shadow .6s var(--ease)}
.factory-visual img{transition:transform 1.2s var(--ease)}
.factory-visual:hover{box-shadow:0 34px 70px -52px rgba(7,33,26,.7)}
.factory-visual:hover img{transform:scale(1.035)}

.cap-list li{
  position:relative;
  transition:translate .45s var(--ease);
}
.cap-list li::before{
  content:"";position:absolute;left:-16px;top:4px;bottom:4px;width:2px;border-radius:2px;
  background:var(--aqua);transform:scaleY(0);transform-origin:top;
  transition:transform .45s var(--ease);
}
.cap-list li:hover{translate:6px 0}
.cap-list li:hover::before{transform:scaleY(1)}
.cap-list em{transition:color .3s,letter-spacing .4s var(--ease)}
.cap-list li:hover em{color:var(--green);letter-spacing:.14em}
.cap-list h4{transition:color .3s}
.cap-list li:hover h4{color:var(--green)}

.gallery .shot{position:relative}
.gallery .shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(7,33,26,.42) 0%,rgba(7,33,26,0) 58%);
  opacity:0;transition:opacity .5s ease;
}
.gallery .shot:hover::after{opacity:1}
.gallery .shot{border:1px solid transparent;transition:border-color .4s,box-shadow .5s var(--ease)}
.gallery .shot:hover{border-color:rgba(20,107,68,.28);box-shadow:0 26px 50px -38px rgba(7,33,26,.6)}
.gallery figure .cap{transition:color .35s,translate .4s var(--ease)}
.gallery figure:hover .cap{color:var(--green);translate:0 -2px}

.cert li{
  transition:color .3s,padding-left .45s var(--ease);
  font-family:var(--sans);
}
.cert li::before{transition:width .45s var(--ease),background .3s}
.cert li:hover{color:#fff;padding-left:28px}
.cert li:hover::before{width:16px;background:#7FD3EA}

/* ---------------------------------------------------------
   09 · 对比表
   --------------------------------------------------------- */
.compare__col{
  transition:translate .5s var(--ease),box-shadow .5s var(--ease);
}
.compare__col:hover{translate:0 -4px}
.compare__col--old:hover{box-shadow:0 30px 60px -48px rgba(0,0,0,.9)}
.compare__col--new:hover{box-shadow:0 30px 64px -50px rgba(7,33,26,.55)}
.compare__col li{transition:padding-left .38s var(--ease),color .3s}
.compare__col li:hover{padding-left:8px}
.compare__col--old li:hover{color:#C9DBD0}
.compare__col--new li:hover{color:var(--green)}
.compare__col li i{transition:transform .4s var(--ease),opacity .3s}
.compare__col li:hover i{transform:scale(1.5);opacity:1}

/* ---------------------------------------------------------
   10 · 通用卡片（理由卡 / 设备卡 / 工艺卡）
   --------------------------------------------------------- */
.card{
  position:relative;overflow:hidden;
  transition:translate .45s var(--ease),background .4s,box-shadow .5s var(--ease);
}
.card:hover{translate:0 -5px;transform:none;box-shadow:0 24px 48px -44px rgba(7,33,26,.6)}
.card::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--green),var(--aqua));
  transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease);
}
.card:hover::before{transform:scaleX(1)}
.card h3,.card h4{transition:color .3s}
.card:hover h3,.card:hover h4{color:var(--green)}
.card__tag{transition:letter-spacing .45s var(--ease)}
.card:hover .card__tag{letter-spacing:.26em}

/* 合作模式卡（招商页） */
.plan{
  position:relative;overflow:hidden;
  transition:translate .5s var(--ease),background .4s,box-shadow .5s var(--ease);
}
.plan:hover{translate:0 -6px}
.plan::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--green),var(--aqua));
  transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease);
}
.plan:hover::before{transform:scaleX(1)}
.plan--hero::before{background:linear-gradient(90deg,var(--aqua),#6BAA88)}
.plan h3{transition:color .3s}
.plan:hover h3{color:var(--green)}
.plan--hero:hover h3{color:#fff}
.plan li{transition:padding-left .35s var(--ease)}
.plan li:hover{padding-left:6px}

/* 产品全系列小卡 */
.mini{
  position:relative;overflow:hidden;
  transition:translate .45s var(--ease),background .35s,box-shadow .45s var(--ease);
}
.mini:hover{translate:0 -4px;transform:none;box-shadow:0 22px 42px -40px rgba(7,33,26,.55)}
.mini::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--green),var(--aqua));
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.mini:hover::before{transform:scaleX(1)}
.mini h4{transition:color .3s}
.mini:hover h4{color:var(--green)}

/* ---------------------------------------------------------
   11 · 时间轴 / 流程
   --------------------------------------------------------- */
.tl{
  position:relative;
  transition:translate .45s var(--ease);
}
.tl::after{
  content:"";position:absolute;left:0;top:-1px;width:100%;height:1px;
  background:var(--green);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease);
}
.tl:hover{translate:0 -4px}
.tl:hover::after{transform:scaleX(1)}
.tl__phase{transition:color .3s,letter-spacing .45s var(--ease)}
.tl:hover .tl__phase{color:#0E7A50;letter-spacing:.26em}
.tl h4{transition:color .3s}
.tl:hover h4{color:var(--green)}

.flow__step,.flowline > div{transition:translate .45s var(--ease)}
.flow__step:hover,.flowline > div:hover{translate:0 -4px}
.flow__step .n,.flowline .n{
  transition:transform .45s var(--ease),color .3s;
  transform-origin:left center;
}
.flow__step:hover .n,.flowline > div:hover .n{transform:scale(1.12);color:#8FE0F4}
.flow__step h4,.flowline h4{transition:border-color .4s,color .3s}
.flow__step:hover h4,.flowline > div:hover h4{border-color:var(--aqua);color:#fff}

/* ---------------------------------------------------------
   12 · FAQ
   --------------------------------------------------------- */
.faq summary{transition:color .3s}
.faq summary::after{transition:transform .4s var(--ease),color .3s}
.faq details:hover summary{color:var(--green)}
.faq details:hover summary::after{color:var(--green)}
.faq details[open] summary{color:var(--green)}
.faq details[open] p{animation:faqIn .45s var(--ease) both}
@keyframes faqIn{
  from{opacity:0;transform:translateY(-7px)}
  to{opacity:1;transform:none}
}

/* ---------------------------------------------------------
   13 · 表单
   --------------------------------------------------------- */
.formcard{transition:box-shadow .55s var(--ease)}
.formcard:hover{box-shadow:0 30px 70px -62px rgba(7,33,26,.55)}

.fields input{transition:box-shadow .3s,background .3s}
.fields input:hover{background:#EDF4EF}
.fields input:focus{background:#fff;box-shadow:0 0 0 1.5px var(--green),0 10px 26px -18px rgba(20,107,68,.7)}

/* ---------------------------------------------------------
   14 · 新闻 / 联系
   --------------------------------------------------------- */
.news-lead{position:relative}
.news-lead .tag{transition:letter-spacing .45s var(--ease)}
.news-lead .tag::after{
  content:"→";display:inline-block;margin-left:8px;
  opacity:0;transform:translateX(-6px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.news-lead:hover .tag::after{opacity:1;transform:none}
.news-lead:hover .tag{letter-spacing:.26em}
.news-lead h3{transition:color .3s}
.news-lead:hover h3{color:var(--green)}
.news-lead .date{transition:color .3s}
.news-lead:hover .date{color:var(--green)}

.news-row b{transition:color .3s}
.news-row:hover b{color:var(--green)}
.news-row span{transition:color .3s,translate .4s var(--ease)}
.news-row:hover span{color:var(--green);translate:-4px 0}

.info li{transition:color .3s,translate .35s var(--ease)}
.info li:hover{color:#fff;translate:4px 0}
.info li b{transition:color .3s}
.info li:hover b{color:#8FE0F4}

.qr{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.qr-wrap:hover .qr{transform:scale(1.05) rotate(-1.5deg);box-shadow:0 22px 44px -34px rgba(0,0,0,.7)}

/* ---------------------------------------------------------
   15 · 分类 tabs / 参数表 / 场景
   --------------------------------------------------------- */
.tabs a{position:relative}
.tabs a::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;
  background:var(--green);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.tabs a:hover::after,.tabs a.on::after{transform:scaleX(1)}

.spec li{transition:padding-left .35s var(--ease),background .35s}
.spec li:hover{padding-left:8px;background:#FAFCFA}
.spec li span{transition:color .3s}
.spec li:hover span{color:var(--green)}

.scenes > div{transition:translate .45s var(--ease)}
.scenes > div:hover{translate:0 -4px}
.scenes h4{transition:color .3s}
.scenes > div:hover h4{color:var(--aqua)}

.detail__img{transition:box-shadow .6s var(--ease)}
.detail__img img{transition:transform 1.2s var(--ease)}
.detail__img:hover{box-shadow:0 50px 90px -70px rgba(7,33,26,.8)}
.detail__img:hover img{transform:scale(1.04)}

.champ__card{position:relative}
.champ__card img{transition:transform 1.4s var(--ease),filter .6s}
.champ__card:hover img{transform:scale(1.035)}

/* ---------------------------------------------------------
   16 · 页脚
   --------------------------------------------------------- */
.footer ul a{
  position:relative;display:inline-block;
  transition:color .25s,translate .4s var(--ease);
}
.footer ul a::before{
  content:"";position:absolute;left:-13px;top:50%;width:0;height:1px;
  background:var(--aqua);transition:width .4s var(--ease);
}
.footer ul a:hover{translate:13px 0;color:#fff}
.footer ul a:hover::before{width:8px}
.footer h4{transition:letter-spacing .45s var(--ease)}
.footer h4:hover{letter-spacing:.22em}
.footer-bar p{transition:color .3s}
.footer-bar p:hover{color:#8FA79A}

/* ---------------------------------------------------------
   17 · 卡片光标光斑（JS 写入 --mx / --my）
   --------------------------------------------------------- */
[data-glow]{position:relative}
[data-glow].is-pointer{
  background-image:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(20,107,68,.085) 0%,rgba(20,107,68,0) 68%);
}
.compare__col--old.is-pointer{
  background-image:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(79,182,214,.14) 0%,rgba(79,182,214,0) 68%);
}

/* ---------------------------------------------------------
   18 · 降级 / 无障碍
   --------------------------------------------------------- */
@media (hover:none){
  .btn,.logo,.hot,.stat,.card,.plan,.mini,.prod-card,.tl,
  .flow__step,.flowline > div,.scenes > div,.cap-list li,
  .compare__col,.news-row,.info li,.footer ul a{translate:0 0 !important}
  .cursor-glow{display:none}
}

@media (prefers-reduced-motion:reduce){
  .cursor-glow,.scrollbar-line,.hero::before{display:none}
  .arch{transform:none !important}
  .btn::before{display:none}
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important}
}

/* ---------------------------------------------------------
   19 · 产品实拍图（透明 WebP · 产品台）
   --------------------------------------------------------- */

/* Hero 拱形卡：真产品站立在拱形底部 */
.arch img{
  position:absolute;left:50%;bottom:0;z-index:1;
  translate:-50% 0;
  width:auto;height:90%;
  max-width:none;
  object-fit:contain;object-position:50% 100%;
  mix-blend-mode:normal;
  filter:drop-shadow(0 20px 24px rgba(7,33,26,.22));
}
.arch__bubble{
  position:absolute;left:50%;top:20%;translate:-50% 0;z-index:0;
  width:80%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(79,182,214,.20) 0%,rgba(79,182,214,0) 62%);
}
.arch__tag{z-index:2}

/* 首页产品卡：图区做成品台 */
.prod-card__img{
  position:relative;
  background:linear-gradient(170deg,#F9FCFA 0%,#E7F2EB 100%);
  display:flex;align-items:flex-end;justify-content:center;
  padding:30px 0 0;
}
.prod-card__img::after{
  content:"";position:absolute;left:50%;bottom:0;translate:-50% 0;
  width:70%;height:46px;
  background:radial-gradient(50% 50% at 50% 100%,rgba(20,107,68,.20),rgba(20,107,68,0) 72%);
  pointer-events:none;
}
.prod-card__img img{
  position:relative;z-index:1;
  width:auto;height:86%;max-width:74%;
  object-fit:contain;
  filter:drop-shadow(0 16px 20px rgba(7,33,26,.17));
  transition:transform .8s var(--ease),filter .8s var(--ease);
}
.prod-card:hover .prod-card__img img{transform:translateY(-11px) scale(1.035)}
.prod-card--once .prod-card__img{background:linear-gradient(170deg,#F4FAF7 0%,#DCEEE3 100%)}
.prod-card__flag{
  position:absolute;top:16px;left:16px;z-index:2;
  background:var(--green);color:#fff;
  font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.2em;
  padding:5px 9px;border-radius:3px;
}

/* 首页其余系列：2×2 缩略产品格 */
.prod-side{
  background:#fff;border-radius:var(--radius);padding:24px;
  display:flex;flex-direction:column;gap:16px;
}
.prod-side h4{
  font-size:11px;font-weight:500;letter-spacing:.2em;color:var(--muted-l);margin:0;
}
.prod-mini-grid{
  flex:1;display:grid;grid-template-columns:1fr 1fr;gap:12px;
}
.pmini{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:14px 8px;border-radius:12px;background:#F6FAF7;
  text-decoration:none;text-align:center;
  transition:background .3s,translate .4s var(--ease),box-shadow .4s var(--ease);
}
.pmini img{
  height:112px;width:auto;max-width:100%;object-fit:contain;
  filter:drop-shadow(0 8px 10px rgba(7,33,26,.16));
  transition:transform .55s var(--ease);
  margin-bottom:4px;
}
.pmini b{font-size:12.5px;font-weight:500;color:var(--ink);letter-spacing:.02em;line-height:1.3}
.pmini span{font-size:10px;color:var(--muted-l);letter-spacing:.04em}
.pmini:hover{background:#EAF3ED;translate:0 -4px;box-shadow:0 18px 30px -26px rgba(7,33,26,.5)}
.pmini:hover img{transform:translateY(-6px) scale(1.06)}

/* 产品页主推：大产品台 */
.stg{
  position:relative;
  display:flex;align-items:flex-end;justify-content:center;
  background:
    radial-gradient(68% 52% at 50% 76%,rgba(79,182,214,.22) 0%,rgba(79,182,214,0) 72%),
    linear-gradient(170deg,#F9FCFA 0%,#E4F0E9 100%);
}
.stg img{
  position:relative;z-index:1;
  width:auto;height:90%;max-width:100%;
  object-fit:contain;
  filter:drop-shadow(0 32px 34px rgba(7,33,26,.24));
}
.stg__halo{
  position:absolute;left:50%;bottom:0;translate:-50% 0;z-index:0;
  width:74%;height:32%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 100%,rgba(20,107,68,.22),rgba(20,107,68,0) 74%);
}
.stg__badge{
  position:absolute;left:50%;bottom:24px;translate:-50% 0;z-index:2;
  background:rgba(7,33,26,.88);color:#fff;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:10.5px;letter-spacing:.12em;
  padding:9px 17px;border-radius:999px;white-space:nowrap;
}

/* 产品页六款带图卡 */
.pcard{
  display:block;text-decoration:none;
  background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 20px 44px -36px rgba(7,33,26,.45);
  transition:translate .5s var(--ease),box-shadow .5s var(--ease);
}
.pcard__img{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center;
  padding:22px 16px 0;
  background:linear-gradient(170deg,#F9FCFA 0%,#E9F3ED 100%);
}
.pcard__img::after{
  content:"";position:absolute;left:50%;bottom:0;translate:-50% 0;
  width:74%;height:38px;
  background:radial-gradient(50% 50% at 50% 100%,rgba(20,107,68,.18),rgba(20,107,68,0) 74%);
  pointer-events:none;
}
.pcard__img img{
  position:relative;z-index:1;
  width:auto;height:86%;max-width:100%;
  object-fit:contain;
  filter:drop-shadow(0 14px 18px rgba(7,33,26,.16));
  transition:transform .7s var(--ease);
}
.pcard:hover{translate:0 -6px;box-shadow:0 34px 58px -36px rgba(7,33,26,.5)}
.pcard:hover .pcard__img img{transform:translateY(-10px) scale(1.05)}
.pcard--once .pcard__img{background:linear-gradient(170deg,#F4FAF7 0%,#D9EDE2 100%)}
.pcard__flag{
  position:absolute;top:13px;right:13px;z-index:2;
  background:var(--green);color:#fff;
  font-size:9px;font-weight:600;letter-spacing:.18em;
  padding:4px 8px;border-radius:3px;
}
.pcard__meta{padding:17px 19px 21px}
.pcard__meta h4{
  font-family:var(--serif);font-size:15.5px;font-weight:600;color:var(--ink);
  margin:0 0 7px;letter-spacing:.02em;
}
.pcard__meta p{font-size:11px;color:var(--muted-l);margin:0;letter-spacing:.04em}

/* 品牌定制横条 */
.custom{
  display:flex;align-items:center;justify-content:space-between;gap:36px;
  margin-top:22px;padding:26px 34px;
  background:#fff;border-radius:16px;text-decoration:none;
  border:1px dashed rgba(20,107,68,.30);
  transition:translate .45s var(--ease),border-color .3s,background .3s;
}
.custom h4{
  font-family:var(--serif);font-size:17px;font-weight:600;color:var(--ink);
  margin:0 0 7px;letter-spacing:.02em;
}
.custom p{font-size:12px;line-height:1.8;color:var(--muted);margin:0}
.custom__go{
  flex:none;font-size:13px;font-weight:500;color:var(--green);
  letter-spacing:.04em;white-space:nowrap;
  transition:translate .4s var(--ease);
}
.custom:hover{translate:0 -3px;border-color:rgba(20,107,68,.6);background:#F7FBF8}
.custom:hover .custom__go{translate:5px 0}

@media (max-width:820px){
  .custom{flex-direction:column;align-items:flex-start;gap:16px;padding:22px}
  .prod-list__row b{font-size:13px}
  .arch img{height:96%}
}
@media (hover:none){
  .prod-card__img img,.pcard__img img,.prod-list__row img{transition:none}
  .prod-list__row,.pcard,.custom{translate:0 0 !important}
}

/* ---------------------------------------------------------
   20 · 产品卡微调（边界、产品占比）
   --------------------------------------------------------- */
.prod-card{box-shadow:0 0 0 1px rgba(20,107,68,.07)}
.prod-card--once{
  box-shadow:0 0 0 1px rgba(20,107,68,.22),0 26px 50px -40px rgba(7,33,26,.6);
}
.prod-card__img{background:linear-gradient(170deg,#F1F8F4 0%,#E4F0E9 100%)}
.prod-card--once .prod-card__img{background:linear-gradient(170deg,#EDF7F1 0%,#D5EADD 100%)}
.prod-card__img img{height:90%}
.pmini{background:#EEF5F0}
.pmini img{height:148px}
.prod-side{box-shadow:0 0 0 1px rgba(20,107,68,.07)}

/* 白卡边界与产品占比（产品页六卡） */
.pcard{
  box-shadow:0 0 0 1px rgba(20,107,68,.08),0 20px 44px -36px rgba(7,33,26,.45);
}
.pcard:hover{
  box-shadow:0 0 0 1px rgba(20,107,68,.2),0 34px 58px -36px rgba(7,33,26,.5);
}
.pcard__img{background:linear-gradient(170deg,#F1F8F4 0%,#E4F0E9 100%)}
.pcard--once .pcard__img{background:linear-gradient(170deg,#EDF7F1 0%,#D5EADD 100%)}
.pcard__img img{height:90%}
.grid6{gap:24px}
.custom{margin-top:24px;box-shadow:0 0 0 1px rgba(20,107,68,.08)}

/* 落地阴影收窄，避免横贯整卡形成深色带 */
.pcard__img::after{
  width:54%;height:28px;
  background:radial-gradient(50% 50% at 50% 100%,rgba(20,107,68,.16),rgba(20,107,68,0) 78%);
}
.prod-card__img::after{
  width:58%;height:34px;
  background:radial-gradient(50% 50% at 50% 100%,rgba(20,107,68,.17),rgba(20,107,68,0) 78%);
}

/* 窄屏六卡两列，避免单列过长 */
@media (max-width:820px){
  .grid6{grid-template-columns:1fr 1fr;gap:14px}
  .pcard__img{padding:16px 10px 0}
  .pcard__meta{padding:13px 14px 16px}
  .pcard__meta h4{font-size:13px;margin-bottom:5px}
  .pcard__meta p{font-size:9.5px;letter-spacing:.02em}
  .custom{padding:20px}
  .custom h4{font-size:15px}
  .stg__badge{font-size:9px;padding:7px 13px;bottom:16px}
}
@media (max-width:520px){
  .prod-mini-grid{gap:10px}
  .pmini img{height:112px}
  .pmini b{font-size:11.5px}
}

/* ---------------------------------------------------------
   21 · 修复 .hero-inner 覆盖 .wrap 左右内边距（窄屏贴边）
   --------------------------------------------------------- */
.hero-inner{padding-left:24px;padding-right:24px}
@media (max-width:820px){
  .hero-inner{padding-left:20px;padding-right:20px}
  .stats-inner{padding-left:20px;padding-right:20px}
}

/* 窄屏数据条字号收小，避免数字宽度撑破格子 */
@media (max-width:520px){
  .stat{padding:0}
  .stat + .stat{padding-left:0}
  .stat:nth-child(even){padding-left:20px}
  .stat__num{font-size:26px;letter-spacing:0}
  .stat__label{font-size:11px;letter-spacing:.06em}
}