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

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

::selection {
  background: rgba(20, 107, 68, 0.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, 0.13) 0%, rgba(79, 182, 214, 0) 66%);
  transition: opacity 0.6s ease;
  will-change: transform;
}
.cursor-glow.on {
  opacity: 1;
}

.totop {
  position: fixed;
  right: 24px;
  bottom: 84px;
  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, 0.9);
  transition:
    opacity 0.4s var(--ease),
    translate 0.4s var(--ease),
    background 0.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 0.45s var(--ease),
    transform 0.35s var(--ease),
    background 0.3s,
    color 0.3s,
    box-shadow 0.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, 0.42)) 50%,
    transparent 62%
  );
  transform: translateX(-130%);
  transition: transform 0.8s var(--ease);
}
.btn:hover::before {
  transform: translateX(130%);
}
.btn--soft {
  --sheen: rgba(20, 107, 68, 0.16);
}
.btn--line {
  --sheen: rgba(255, 255, 255, 0.16);
}
.btn:active {
  transform: translateY(0) scale(0.985);
}
.btn:active::before {
  transform: translateX(130%);
}

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

.ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 70%);
  transform: scale(0);
  animation: rippleOut 0.62s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.btn--soft .ripple,
.btn--line .ripple {
  background: radial-gradient(circle, rgba(20, 107, 68, 0.22) 0%, rgba(20, 107, 68, 0) 70%);
}
@keyframes rippleOut {
  from {
    transform: scale(0);
    opacity: 0.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 0.35s var(--ease),
    transform 0.35s var(--ease);
}
.menu a:hover::before,
.menu a.is-active::before {
  opacity: 1;
  transform: translate(-50%, 0);
}

.logo {
  transition: translate 0.45s var(--ease);
}
.logo__cn {
  transition: color 0.3s;
}
.logo:hover .logo__cn {
  color: #0f5b39;
}
.footer .logo:hover .logo__cn {
  color: #6baa88;
}

.hot {
  transition: translate 0.4s var(--ease);
}
.hot strong {
  transition: color 0.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, 0.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 0.55s var(--ease),
    box-shadow 0.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, 0.6) 0%,
    rgba(255, 255, 255, 0) 68%
  );
  opacity: 0;
  transition: opacity 0.55s ease;
}
.arch:hover::after {
  opacity: 1;
}
.arch:hover {
  box-shadow:
    0 50px 90px -62px rgba(7, 33, 26, 0.75),
    0 2px 0 #f3f7f4;
}

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

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

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

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

/* ---------------------------------------------------------
   06 · 数据条
   --------------------------------------------------------- */
.stat {
  position: relative;
  transition: translate 0.5s var(--ease);
}
.stat:hover {
  translate: 0 -4px;
}
.stat__num {
  transition:
    color 0.35s,
    text-shadow 0.4s;
}
.stat:hover .stat__num {
  color: #c9eedc;
  text-shadow: 0 0 30px rgba(79, 182, 214, 0.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 0.6s var(--ease);
}
.stat:hover::after {
  transform: scaleX(1);
}

/* ---------------------------------------------------------
   07 · 产品卡
   --------------------------------------------------------- */
.prod-card {
  position: relative;
  transition:
    translate 0.5s var(--ease),
    box-shadow 0.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 0.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, 0.94);
  color: var(--green);
  display: grid;
  place-items: center;
  font-size: 14px;
  line-height: 1;
  opacity: 0;
  transform: scale(0.6) rotate(-25deg);
  transition:
    opacity 0.45s var(--ease),
    transform 0.45s var(--ease);
  box-shadow: 0 8px 20px -12px rgba(7, 33, 26, 0.6);
}
.prod-card:hover .prod-card__img::after {
  opacity: 1;
  transform: scale(1) rotate(0);
}
.prod-card__body h3 {
  transition: color 0.3s;
}
.prod-card:hover .prod-card__body h3 {
  color: var(--green);
}
.prod-card__spec {
  transition: letter-spacing 0.45s var(--ease);
}
.prod-card:hover .prod-card__spec {
  letter-spacing: 0.16em;
}

/* 产品列表行 */
.prod-list__row {
  position: relative;
  transition:
    padding-left 0.4s var(--ease),
    border-color 0.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 0.38s var(--ease);
}
.prod-list__row:hover {
  padding-left: 8px;
}
.prod-list__row:hover::before {
  height: 18px;
}
.prod-list__row b {
  transition: color 0.3s;
}
.prod-list__row:hover b {
  color: var(--green);
}
.prod-list__row span {
  transition:
    color 0.3s,
    translate 0.4s var(--ease);
}
.prod-list__row:hover span {
  color: var(--green);
  translate: -3px 0;
}

/* ---------------------------------------------------------
   08 · 工厂：图 / 能力清单 / 认证
   --------------------------------------------------------- */
.factory-visual {
  position: relative;
  transition: box-shadow 0.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, 0.7);
}
.factory-visual:hover img {
  transform: scale(1.035);
}

.cap-list li {
  position: relative;
  transition: translate 0.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 0.45s var(--ease);
}
.cap-list li:hover {
  translate: 6px 0;
}
.cap-list li:hover::before {
  transform: scaleY(1);
}
.cap-list em {
  transition:
    color 0.3s,
    letter-spacing 0.4s var(--ease);
}
.cap-list li:hover em {
  color: var(--green);
  letter-spacing: 0.14em;
}
.cap-list h4 {
  transition: color 0.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, 0.42) 0%, rgba(7, 33, 26, 0) 58%);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.gallery .shot:hover::after {
  opacity: 1;
}
.gallery .shot {
  border: 1px solid transparent;
  transition:
    border-color 0.4s,
    box-shadow 0.5s var(--ease);
}
.gallery .shot:hover {
  border-color: rgba(20, 107, 68, 0.28);
  box-shadow: 0 26px 50px -38px rgba(7, 33, 26, 0.6);
}
.gallery figure .cap {
  transition:
    color 0.35s,
    translate 0.4s var(--ease);
}
.gallery figure:hover .cap {
  color: var(--green);
  translate: 0 -2px;
}

.gallery1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.gallery1.gallery5 {
  grid-template-columns: repeat(4, 1fr);
}
.gallery1 figure {
  margin: 0;
}
.gallery1 figure > figcaption {
  text-align: center;
  font-size: 1rem;
}

.gallery1.gallery2 {
  margin: 2rem 7rem 0;
  gap: 2rem;
}

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

/* ---------------------------------------------------------
   09 · 对比表
   --------------------------------------------------------- */
.compare__col {
  transition:
    translate 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
}
.compare__col:hover {
  translate: 0 -4px;
}
.compare__col--old:hover {
  box-shadow: 0 30px 60px -48px rgba(0, 0, 0, 0.9);
}
.compare__col--new:hover {
  box-shadow: 0 30px 64px -50px rgba(7, 33, 26, 0.55);
}
.compare__col li {
  transition:
    padding-left 0.38s var(--ease),
    color 0.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 0.4s var(--ease),
    opacity 0.3s;
}
.compare__col li:hover i {
  transform: scale(1.5);
  opacity: 1;
}

/* ---------------------------------------------------------
   10 · 通用卡片（理由卡 / 设备卡 / 工艺卡）
   --------------------------------------------------------- */
.card {
  position: relative;
  overflow: hidden;
  transition:
    translate 0.45s var(--ease),
    background 0.4s,
    box-shadow 0.5s var(--ease);
}
.card:hover {
  translate: 0 -5px;
  transform: none;
  box-shadow: 0 24px 48px -44px rgba(7, 33, 26, 0.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 0.55s var(--ease);
}
.card:hover::before {
  transform: scaleX(1);
}
.card h3,
.card h4 {
  transition: color 0.3s;
}
.card:hover h3,
.card:hover h4 {
  color: var(--green);
}
.card__tag {
  transition: letter-spacing 0.45s var(--ease);
}
.card:hover .card__tag {
  letter-spacing: 0.26em;
}

/* 合作模式卡（招商页） */
.plan {
  position: relative;
  overflow: hidden;
  transition:
    translate 0.5s var(--ease),
    background 0.4s,
    box-shadow 0.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 0.55s var(--ease);
}
.plan:hover::before {
  transform: scaleX(1);
}
.plan--hero::before {
  background: linear-gradient(90deg, var(--aqua), #6baa88);
}
.plan h3 {
  transition: color 0.3s;
}
.plan:hover h3 {
  color: var(--green);
}
.plan--hero:hover h3 {
  color: #fff;
}
.plan li {
  transition: padding-left 0.35s var(--ease);
}
.plan li:hover {
  padding-left: 6px;
}

/* 产品全系列小卡 */
.mini {
  position: relative;
  overflow: hidden;
  transition:
    translate 0.45s var(--ease),
    background 0.35s,
    box-shadow 0.45s var(--ease);
}
.mini:hover {
  translate: 0 -4px;
  transform: none;
  box-shadow: 0 22px 42px -40px rgba(7, 33, 26, 0.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 0.5s var(--ease);
}
.mini:hover::before {
  transform: scaleX(1);
}
.mini h4 {
  transition: color 0.3s;
}
.mini:hover h4 {
  color: var(--green);
}

/* ---------------------------------------------------------
   11 · 时间轴 / 流程
   --------------------------------------------------------- */
.tl {
  position: relative;
  transition: translate 0.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 0.55s var(--ease);
}
.tl:hover {
  translate: 0 -4px;
}
.tl:hover::after {
  transform: scaleX(1);
}
.tl__phase {
  transition:
    color 0.3s,
    letter-spacing 0.45s var(--ease);
}
.tl:hover .tl__phase {
  color: #0e7a50;
  letter-spacing: 0.26em;
}
.tl h4 {
  transition: color 0.3s;
}
.tl:hover h4 {
  color: var(--green);
}

.flow__step,
.flowline > div {
  transition: translate 0.45s var(--ease);
}
.flow__step:hover,
.flowline > div:hover {
  translate: 0 -4px;
}
.flow__step .n,
.flowline .n {
  transition:
    transform 0.45s var(--ease),
    color 0.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 0.4s,
    color 0.3s;
}
.flow__step:hover h4,
.flowline > div:hover h4 {
  border-color: var(--aqua);
  color: #fff;
}

/* ---------------------------------------------------------
   12 · FAQ
   --------------------------------------------------------- */
.faq summary {
  transition: color 0.3s;
}
.faq summary::after {
  transition:
    transform 0.4s var(--ease),
    color 0.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 0.45s var(--ease) both;
}
@keyframes faqIn {
  from {
    opacity: 0;
    transform: translateY(-7px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

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

.fields input {
  transition:
    box-shadow 0.3s,
    background 0.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, 0.7);
}

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

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

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

.qr {
  transition:
    transform 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
}
.qr-wrap:hover .qr {
  transform: scale(1.05) rotate(-1.5deg);
  box-shadow: 0 22px 44px -34px rgba(0, 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 0.4s var(--ease);
}
.tabs a:hover::after,
.tabs a.on::after {
  transform: scaleX(1);
}

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

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

.detail__img {
  transition: box-shadow 0.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, 0.8);
}
.detail__img:hover img {
  transform: scale(1.04);
}

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

/* ---------------------------------------------------------
   16 · 页脚
   --------------------------------------------------------- */
.footer ul a {
  position: relative;
  display: inline-block;
  transition:
    color 0.25s,
    translate 0.4s var(--ease);
}
.footer ul a::before {
  content: '';
  position: absolute;
  left: -13px;
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--aqua);
  transition: width 0.4s var(--ease);
}
.footer ul a:hover {
  translate: 13px 0;
  color: #fff;
}
.footer ul a:hover::before {
  width: 8px;
}
.footer h4 {
  transition: letter-spacing 0.45s var(--ease);
}
.footer h4:hover {
  letter-spacing: 0.22em;
}
.footer-bar p {
  transition: color 0.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, 0.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, 0.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: 0.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, 0.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, 0.2) 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, 0.2),
    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, 0.17));
  transition:
    transform 0.8s var(--ease),
    filter 0.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: 0.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: 0.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 0.3s,
    translate 0.4s var(--ease),
    box-shadow 0.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, 0.16));
  transition: transform 0.55s var(--ease);
  margin-bottom: 4px;
}
.pmini b {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.pmini span {
  font-size: 10px;
  color: var(--muted-l);
  letter-spacing: 0.04em;
}
.pmini:hover {
  background: #eaf3ed;
  translate: 0 -4px;
  box-shadow: 0 18px 30px -26px rgba(7, 33, 26, 0.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, 0.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, 0.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, 0.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, 0.88);
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 10.5px;
  letter-spacing: 0.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, 0.45);
  transition:
    translate 0.5s var(--ease),
    box-shadow 0.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, 0.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, 0.16));
  transition: transform 0.7s var(--ease);
}
.pcard:hover {
  translate: 0 -6px;
  box-shadow: 0 34px 58px -36px rgba(7, 33, 26, 0.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: 0.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: 0.02em;
}
.pcard__meta p {
  font-size: 11px;
  color: var(--muted-l);
  margin: 0;
  letter-spacing: 0.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, 0.3);
  transition:
    translate 0.45s var(--ease),
    border-color 0.3s,
    background 0.3s;
}
.custom h4 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 7px;
  letter-spacing: 0.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: 0.04em;
  white-space: nowrap;
  transition: translate 0.4s var(--ease);
}
.custom:hover {
  translate: 0 -3px;
  border-color: rgba(20, 107, 68, 0.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%;
  }
  .gallery1.gallery5 {
    grid-template-columns: repeat(2,1fr);
  }
  .eyebrow {
    display: none;
  }
}
@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, 0.07);
}
.prod-card--once {
  box-shadow:
    0 0 0 1px rgba(20, 107, 68, 0.22),
    0 26px 50px -40px rgba(7, 33, 26, 0.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, 0.07);
}

/* 白卡边界与产品占比（产品页六卡） */
.pcard {
  box-shadow:
    0 0 0 1px rgba(20, 107, 68, 0.08),
    0 20px 44px -36px rgba(7, 33, 26, 0.45);
}
.pcard:hover {
  box-shadow:
    0 0 0 1px rgba(20, 107, 68, 0.2),
    0 34px 58px -36px rgba(7, 33, 26, 0.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, 0.08);
}

/* 落地阴影收窄，避免横贯整卡形成深色带 */
.pcard__img::after {
  width: 54%;
  height: 28px;
  background: radial-gradient(
    50% 50% at 50% 100%,
    rgba(20, 107, 68, 0.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, 0.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: 0.02em;
  }
  .custom {
    padding: 20px;
  }
  .custom h4 {
    font-size: 15px;
  }
  .stg__badge {
    font-size: 9px;
    padding: 7px 13px;
    bottom: 16px;
  }
  .nav-right .btn {
    display: none;
  }
}
@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;
  }

  .gallery1 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .gallery1.gallery2 {
    margin: 0;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-top: 1rem;
  }
  .gallery1 figure > figcaption {
    font-size: 12px;
  }
  .gallery3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }
}

/* 窄屏数据条字号收小，避免数字宽度撑破格子 */
@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: 0.06em;
  }
}