/* ═══════════════════════════════════════════════════════════
   环众科技 · 全站公共动画 & 视觉增强系统 v3
   粒子 | 流光 | 渐变色 | 装饰元素 | 微交互 | 排版节奏
   引用：<link rel="stylesheet" href="css/animations.css">
   ═══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   0. 扩展调色板 + 缓动曲线 + 排版变量
   ══════════════════════════════════════════════════════ */
:root {
  /* 缓动 */
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --ease-out-back: cubic-bezier(.34,1.56,.64,1);
  --ease-in-out-circ: cubic-bezier(.85,0,.15,1);
  --ease-spring: cubic-bezier(.22,.68,0,1.2);

  /* 扩展配色 */
  --accent-teal:   #0EA5A0;
  --accent-amber:  #F59E0B;
  --accent-purple: #7C5CFC;
  --accent-rose:   #F43F5E;
  --accent-emerald:#10B981;
  --accent-sky:    #38BDF8;

  /* 渐变预设 */
  --grad-blue:   linear-gradient(135deg, #1E5AE8 0%, #3B7BF5 50%, #6BA0FF 100%);
  --grad-teal:   linear-gradient(135deg, #0EA5A0 0%, #14C9C3 100%);
  --grad-purple: linear-gradient(135deg, #7C5CFC 0%, #A78BFA 100%);
  --grad-amber:  linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
  --grad-rose:   linear-gradient(135deg, #F43F5E 0%, #FB7185 100%);
  --grad-dark:   linear-gradient(120deg, #071638 0%, #0C2555 55%, #163D7C 100%);
  --grad-card:   linear-gradient(180deg, #fff 0%, #F8FAFF 100%);

  /* 排版 */
  --font-display: "Outfit", sans-serif;
  --font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;

  /* 阴影层级 */
  --shadow-xs:   0 2px 6px rgba(8,23,64,.04);
  --shadow-sm:   0 4px 14px rgba(8,23,64,.06);
  --shadow-md:   0 10px 28px rgba(8,23,64,.08);
  --shadow-lg:   0 18px 44px rgba(8,23,64,.12);
  --shadow-xl:   0 24px 60px rgba(8,23,64,.18);
  --shadow-glow: 0 0 32px rgba(30,90,232,.25);
  --shadow-teal-glow: 0 0 28px rgba(14,165,160,.2);
  --shadow-purple-glow: 0 0 28px rgba(124,92,252,.2);
}


/* ══════════════════════════════════════════════════════
   1. 粒子系统 — Banner / Hero 浮动粒子
   ══════════════════════════════════════════════════════ */
.subhero, .hero { position:relative; overflow:hidden; }
.particles-layer {
  position:absolute; inset:0; pointer-events:none; z-index:0;
}
.particle {
  position:absolute; border-radius:50%;
  animation:particleFloat var(--dur, 6s) var(--delay, 0s) ease-in-out infinite;
  opacity:0;
}
.particle--dot {
  width:var(--sz, 4px); height:var(--sz, 4px);
  background:var(--clr, rgba(142,194,255,.5));
  box-shadow:0 0 var(--glow, 8px) var(--clr, rgba(142,194,255,.3));
}
.particle--ring {
  width:var(--sz, 10px); height:var(--sz, 10px);
  border:1.2px solid var(--clr, rgba(142,194,255,.25));
  background:transparent;
}
/* 新增：菱形粒子 */
.particle--diamond {
  width:var(--sz, 6px); height:var(--sz, 6px);
  background:var(--clr, rgba(142,194,255,.35));
  transform:rotate(45deg);
  border-radius:1.5px;
}
@keyframes particleFloat {
  0%   { transform:translateY(0) translateX(0) scale(1) rotate(0deg); opacity:0; }
  15%  { opacity:var(--peak, .65); }
  50%  { transform:translateY(calc(var(--ry, -80) * 1px)) translateX(calc(var(--rx, 30) * 1px)) scale(1.3) rotate(20deg); opacity:var(--peak, .55); }
  85%  { opacity:0; }
  100% { transform:translateY(calc(var(--ry, -80) * 2px)) translateX(calc(var(--rx, 30) * 1.6px)) scale(.5) rotate(-20deg); opacity:0; }
}


/* ══════════════════════════════════════════════════════
   2. 装饰性几何光晕 — 自动注入到 section
   ══════════════════════════════════════════════════════ */
.section-ornament {
  pointer-events:none; position:absolute; z-index:0;
  border-radius:50%; filter:blur(80px);
}
.section-ornament--blue {
  background:rgba(30,90,232,.06);
}
.section-ornament--teal {
  background:rgba(14,165,160,.05);
}
.section-ornament--purple {
  background:rgba(124,92,252,.04);
}


/* ══════════════════════════════════════════════════════
   3. 全站滚动进度条
   ══════════════════════════════════════════════════════ */
.scroll-progress {
  position:fixed; top:0; left:0; height:3px;
  background:linear-gradient(90deg, #1E5AE8, #3B7BF5, #6BA0FF, #8FC2FF);
  z-index:200; width:0;
  box-shadow:0 0 10px rgba(30,90,232,.35);
  border-radius:0 2px 2px 0;
  will-change:width;
}


/* ══════════════════════════════════════════════════════
   4. 通用入场动画 — 延长时间 + 弹性缓动
   ══════════════════════════════════════════════════════ */
.anim-up {
  opacity:0; transform:translateY(36px);
  transition:opacity .9s var(--ease-out-expo), transform .9s var(--ease-out-expo);
}
.anim-up.is-visible { opacity:1; transform:none; }
.anim-fade {
  opacity:0;
  transition:opacity 1s var(--ease-out-expo);
}
.anim-fade.is-visible { opacity:1; }


/* ══════════════════════════════════════════════════════
   5. Banner 入场 — 三阶递进 + 渐变装饰线
   ══════════════════════════════════════════════════════ */
.subhero .breadcrumb,
.hero .breadcrumb {
  opacity:0; transform:translateY(16px);
  transition:opacity .8s .05s var(--ease-out-expo), transform .8s .05s var(--ease-out-expo);
}
.subhero .subhero__title,
.hero .hero__title,
.hero .hero__title2 {
  opacity:0; transform:translateY(22px);
  transition:opacity .85s .18s var(--ease-out-expo), transform .85s .18s var(--ease-out-expo);
}
.subhero .subhero__sub,
.hero .hero__sub {
  opacity:0; transform:translateY(20px);
  transition:opacity .8s .32s var(--ease-out-expo), transform .8s .32s var(--ease-out-expo);
}
.subhero.is-visible .breadcrumb,
.subhero.is-visible .subhero__title,
.subhero.is-visible .subhero__sub,
.hero.is-visible .breadcrumb,
.hero.is-visible .hero__title,
.hero.is-visible .hero__title2,
.hero.is-visible .hero__sub {
  opacity:1; transform:none;
}

/* Banner 标题底部渐变装饰线 */
.subhero__title, .hero__title {
  position:relative; display:inline-block;
}
.subhero__title::after,
.hero__title::after {
  content:""; position:absolute; bottom:-10px; left:0;
  width:0; height:3px;
  background:linear-gradient(90deg, var(--primary, #1E5AE8), #8FC2FF, transparent);
  border-radius:2px;
  transition:width 1.2s .55s var(--ease-out-expo);
}
.subhero.is-visible .subhero__title::after,
.hero.is-visible .hero__title::after {
  width:100%;
}


/* ══════════════════════════════════════════════════════
   6. Section 标题 — 装饰性强调元素
   ══════════════════════════════════════════════════════ */
.sec-head--center .eyebrow,
.sec-head--row .eyebrow {
  opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--ease-out-expo), transform .6s var(--ease-out-expo);
}
.sec-head--center .sec-title,
.sec-head--row .sec-title {
  opacity:0; transform:translateY(18px);
  transition:opacity .65s .14s var(--ease-out-expo), transform .65s .14s var(--ease-out-expo);
  position:relative; display:inline-block;
}
.sec-head--center .sec-sub,
.sec-head--row .sec-sub {
  opacity:0; transform:translateY(16px);
  transition:opacity .55s .28s var(--ease-out-expo), transform .55s .28s var(--ease-out-expo);
}
.sec-head--center.is-visible .eyebrow,
.sec-head--center.is-visible .sec-title,
.sec-head--center.is-visible .sec-sub,
.sec-head--row.is-visible .eyebrow,
.sec-head--row.is-visible .sec-title,
.sec-head--row.is-visible .sec-sub {
  opacity:1; transform:none;
}

/* 标题左侧装饰短划线 */
.sec-head--row .sec-title::before,
.sec-head--center .sec-title::before {
  content:""; display:block; width:40px; height:4px;
  background:var(--grad-blue);
  border-radius:2px; margin:0 auto 14px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .6s .45s var(--ease-out-expo);
}
.sec-head--row.is-visible .sec-title::before,
.sec-head--center.is-visible .sec-title::before {
  transform:scaleX(1);
}

/* 小标题下方装饰点阵 */
.sec-title__dots {
  display:flex; gap:6px; justify-content:center; margin-top:6px; opacity:0;
  transition:opacity .5s .5s var(--ease-out-expo);
}
.sec-head--center.is-visible .sec-title__dots,
.sec-head--row.is-visible .sec-title__dots {
  opacity:1;
}
.sec-title__dots span {
  width:6px; height:6px; border-radius:50%;
  background:var(--primary);
  animation:dotPulse 1.8s ease-in-out infinite;
}
.sec-title__dots span:nth-child(2){animation-delay:.2s}
.sec-title__dots span:nth-child(3){animation-delay:.4s}
.sec-title__dots span:nth-child(4){animation-delay:.6s}
.sec-title__dots span:nth-child(5){animation-delay:.8s}
@keyframes dotPulse {
  0%,100%{transform:scale(1);opacity:.3}
  50%{transform:scale(1.8);opacity:1}
}


/* ══════════════════════════════════════════════════════
   7. 统计卡片 — 渐变底色 + 悬浮浮动 + 装饰光环
   ══════════════════════════════════════════════════════ */
.stat-card {
  position:relative;
  transition:transform .5s var(--ease-out-expo),
             box-shadow .5s var(--ease-out-expo),
             background .5s var(--ease-out-expo);
  overflow:hidden;
}
/* 卡片背板微光 */
.stat-card::before {
  content:""; position:absolute; top:-50%; left:-50%;
  width:200%; height:200%;
  background:radial-gradient(circle at 50% 50%, rgba(30,90,232,.03) 0%, transparent 60%);
  pointer-events:none; z-index:0;
  transition:opacity .5s;
  opacity:0;
}
.stat-card:hover::before { opacity:1; }

.stat-card:nth-child(odd)  { animation:statFloatA 4.5s var(--ease-out-expo) infinite; }
.stat-card:nth-child(even) { animation:statFloatB 5s var(--ease-out-expo) infinite; }
.stat-card:hover {
  animation:none;
  transform:translateY(-8px);
  box-shadow:0 18px 44px rgba(30,90,232,.12),
             0 0 0 1px rgba(30,90,232,.15);
  background:var(--grad-card);
}
.stat-card:hover .stat-num,
.stat-card:hover .stat-card__num {
  text-shadow:0 0 20px rgba(30,90,232,.25);
  transition:text-shadow .4s;
}

/* 卡片顶部装饰色条（hover 出现） */
.stat-card::after {
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:0; height:3px;
  background:var(--grad-blue);
  border-radius:0 0 3px 3px;
  transition:width .5s var(--ease-out-expo);
  z-index:1;
}
.stat-card:hover::after { width:60%; }

@keyframes statFloatA {
  0%,100%{transform:translateY(0)}
  30%{transform:translateY(-7px)}
  70%{transform:translateY(3px)}
}
@keyframes statFloatB {
  0%,100%{transform:translateY(0)}
  25%{transform:translateY(3px)}
  60%{transform:translateY(-6px)}
}

/* ══════════════════════════════════════════════════════
   8. 数字计数器 — 全格式支持 + 多层收尾
   ══════════════════════════════════════════════════════ */
.stat-num,
.stat-card__num[data-count],
.stat-card__num[data-animate-num] {
  display:inline-block; font-family:var(--font-display);
  font-weight:700; color:var(--primary, #1E5AE8);
  line-height:1; position:relative; z-index:1;
  will-change:transform,opacity,color;
}
.stat-num.is-counting,
.stat-card__num.is-counting {
  transition:none;
}
.stat-num.is-counting,
.stat-card__num.is-counting {
  animation:countingShimmer 1.2s ease-in-out infinite;
}

/* 弹跳 */
.stat-num.is-counted,
.stat-card__num.is-counted {
  animation:numBounce .7s var(--ease-out-back);
}
/* 高亮 */
.stat-num.is-glow,
.stat-card__num.is-glow {
  animation:numGlow 1s ease-out;
}
/* 爆发光圈 */
.stat-num.is-burst::after {
  content:""; position:absolute; inset:-10px;
  background:radial-gradient(circle, rgba(30,90,232,.18) 0%, transparent 70%);
  border-radius:50%; pointer-events:none;
  animation:burstPulse .8s ease-out;
}

@keyframes countingShimmer {
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.08)}
}
@keyframes numBounce {
  0%{transform:scale(1)}
  30%{transform:scale(1.22)}
  55%{transform:scale(.92)}
  75%{transform:scale(1.04)}
  100%{transform:scale(1)}
}
@keyframes numGlow {
  0%{text-shadow:0 0 0 rgba(30,90,232,0); filter:brightness(1)}
  25%{text-shadow:0 0 28px rgba(30,90,232,.7), 0 0 60px rgba(30,90,232,.3); filter:brightness(1.3)}
  60%{text-shadow:0 0 10px rgba(30,90,232,.3); filter:brightness(1.05)}
  100%{text-shadow:0 0 0 rgba(30,90,232,0); filter:brightness(1)}
}
@keyframes burstPulse {
  0%{transform:scale(.5);opacity:1}
  100%{transform:scale(2.5);opacity:0}
}

/* 百分比到位后底部装饰线 */
.stat-num[data-suffix="%"].is-counted::after,
.stat-card__num[data-suffix="%"].is-counted::after {
  content:""; position:absolute; bottom:-6px; left:0;
  width:0; height:2px;
  background:linear-gradient(90deg, var(--primary,#1E5AE8), #8FC2FF);
  border-radius:2px;
  animation:percentLine .6s .3s var(--ease-out-expo) forwards;
}
@keyframes percentLine { to { width:100%; } }


/* ══════════════════════════════════════════════════════
   9. 卡片悬停系统 — 梯度边框 + 微抬升 + 内部光扫
   ══════════════════════════════════════════════════════ */
.case, .case--detail, .s-card, .prod-card, .p-card, .i-card,
.info-card, .adv, .step-card, .product-detail,
.news-featured__main, .news-side-card, .news-item {
  transition:transform .5s var(--ease-out-expo),
             box-shadow .5s var(--ease-out-expo),
             border-color .4s var(--ease-out-expo) !important;
  will-change:transform,box-shadow;
  position:relative; overflow:hidden;
}

/* 卡片内侧渐变光扫效果 */
.case::after, .case--detail::after, .s-card::after, .p-card::after,
.info-card::after, .step-card::after, .product-detail::after,
.news-side-card::after, .news-item::after {
  content:""; position:absolute; top:0; left:-100%;
  width:60%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-25deg);
  transition:left .7s var(--ease-out-expo);
  pointer-events:none; z-index:2;
}
.case:hover::after, .case--detail:hover::after, .s-card:hover::after,
.p-card:hover::after, .info-card:hover::after, .step-card:hover::after,
.product-detail:hover::after, .news-side-card:hover::after, .news-item:hover::after {
  left:120%;
}

.case:hover, .case--detail:hover, .s-card:hover, .prod-card:hover,
.p-card:hover, .info-card:hover, .adv:hover, .step-card:hover,
.product-detail:hover, .news-featured__main:hover, .news-side-card:hover,
.news-item:hover {
  transform:translateY(-8px);
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(30,90,232,.12) !important;
}

/* 深色卡片 hover */
.i-card:hover {
  transform:translateY(-8px);
  box-shadow:0 16px 40px rgba(8,23,64,.35), 0 0 0 1px rgba(94,224,255,.15) !important;
}


/* ══════════════════════════════════════════════════════
   10. 按钮增强系统
   ══════════════════════════════════════════════════════ */
.btn--primary {
  transition:background .35s, transform .35s var(--ease-out-back),
             box-shadow .35s var(--ease-out-expo) !important;
  position:relative; overflow:hidden;
  background:var(--grad-blue);
  box-shadow:0 8px 22px rgba(30,90,232,.35);
}
.btn--primary:hover {
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 14px 32px rgba(30,90,232,.45);
  background:linear-gradient(135deg, #225FEB 0%, #4B8BFF 50%, #7BA8FF 100%);
}
.btn--primary:active {
  transform:translateY(0) scale(.97);
  transition:transform .12s !important;
}

/* 次要按钮 */
.btn--white {
  transition:background .35s, transform .35s var(--ease-out-back),
             box-shadow .35s var(--ease-out-expo) !important;
  position:relative; overflow:hidden;
}
.btn--white:hover {
  transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(0,0,0,.18);
}
.btn--outline-light {
  transition:background .35s, transform .35s var(--ease-out-back),
             border-color .35s, box-shadow .35s var(--ease-out-expo) !important;
}
.btn--outline-light:hover {
  transform:translateY(-3px);
  border-color:#fff;
  box-shadow:0 0 20px rgba(255,255,255,.12);
}

/* 幽灵按钮增强 */
.btn--ghost {
  transition:background .35s, transform .35s var(--ease-out-back) !important;
}
.btn--ghost:hover {
  transform:translateY(-2px);
  background:rgba(255,255,255,.18);
}

/* 按钮内部波纹 */
.btn--primary .ripple,
.btn--white .ripple {
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,.3);
  transform:scale(0);
  animation:btnRipple .6s ease-out forwards;
  pointer-events:none;
}
@keyframes btnRipple {
  to { transform:scale(4); opacity:0; }
}


/* ══════════════════════════════════════════════════════
   11. 导航链接 — 渐变下划线 + 微指示点
   ══════════════════════════════════════════════════════ */
.nav__link {
  position:relative;
  transition:color .3s, transform .3s var(--ease-spring);
}
.nav__link:hover {
  transform:translateY(-1px);
}
.nav__link::after {
  content:""; position:absolute; bottom:-3px; left:50%;
  width:0; height:2px;
  background:linear-gradient(90deg, #5EE0FF, #8FC2FF);
  border-radius:1px;
  transition:width .35s var(--ease-out-expo), left .35s var(--ease-out-expo);
}
.nav__link:hover::after,
.nav__link.is-active::after {
  width:100%; left:0;
}

/* 当前激活导航项加点 */
.nav__link.is-active::before {
  content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%;
  background:var(--cyan, #5EE0FF);
  box-shadow:0 0 8px rgba(94,224,255,.5);
}


/* ══════════════════════════════════════════════════════
   12. 底部 CTA 区块 — 流动光效 + 装饰波形
   ══════════════════════════════════════════════════════ */
.cta-band {
  opacity:0; transform:translateY(24px);
  transition:opacity .9s var(--ease-out-expo), transform .9s var(--ease-out-expo);
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, #1E5AE8 0%, #1636A8 50%, #0F2266 100%);
}
.cta-band.is-visible { opacity:1; transform:none; }

/* 流动光斑 */
.cta-band::before {
  content:""; position:absolute; top:-50%; left:-50%;
  width:200%; height:200%;
  background:
    radial-gradient(circle at 25% 35%, rgba(255,255,255,.08) 0%, transparent 45%),
    radial-gradient(circle at 70% 60%, rgba(94,224,255,.06) 0%, transparent 40%);
  animation:ctaShine 10s ease-in-out infinite;
  pointer-events:none;
}
@keyframes ctaShine {
  0%,100%{transform:translate(0,0) rotate(0deg)}
  33%{transform:translate(4%, -3%) rotate(1deg)}
  66%{transform:translate(-2%, 4%) rotate(-1deg)}
}

/* CTA 按钮加强 */
.cta-band .btn--white {
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.cta-band .btn--white:hover {
  box-shadow:0 16px 36px rgba(0,0,0,.3);
}


/* ══════════════════════════════════════════════════════
   13. 芯片按钮 — 弹入 + 渐变高亮 + 波纹
   ══════════════════════════════════════════════════════ */
.chip-btn {
  position:relative; overflow:hidden;
  transition:background .3s, color .3s, border-color .3s,
             box-shadow .3s var(--ease-out-expo),
             transform .35s var(--ease-out-back);
}
.chip-btn:not(.is-active):hover {
  border-color:var(--primary, #1E5AE8);
  color:var(--primary);
  box-shadow:0 0 20px rgba(30,90,232,.15);
  transform:translateY(-2px);
}
.chip-btn.is-active {
  background:var(--grad-blue);
  border-color:transparent;
  box-shadow:0 6px 20px rgba(30,90,232,.35);
  color:#fff;
}
.chip-btn .ripple {
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,.35);
  transform:scale(0);
  animation:ripple .6s ease-out forwards;
  pointer-events:none;
}
@keyframes ripple {
  to { transform:scale(3.5); opacity:0; }
}


/* ══════════════════════════════════════════════════════
   14. 表单微交互 — 聚焦光环 + 校验状态 + 打字反馈
   ══════════════════════════════════════════════════════ */
.cform input, .cform select, .cform textarea,
.modal__field input {
  transition:border-color .25s, box-shadow .35s var(--ease-out-expo),
             transform .2s var(--ease-out-expo);
}
.cform input:focus, .cform select:focus, .cform textarea:focus,
.modal__field input:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(30,90,232,.08), 0 0 0 1px rgba(30,90,232,.2);
  transform:translateY(-1px);
}

/* 输入有效性状态 */
.cform input:valid:not(:placeholder-shown),
.modal__field input:valid:not(:placeholder-shown) {
  border-color:#10B981;
}
.cform input:valid:not(:placeholder-shown):focus,
.modal__field input:valid:not(:placeholder-shown):focus {
  box-shadow:0 0 0 4px rgba(16,185,129,.08), 0 0 0 1px rgba(16,185,129,.2);
}
.cform input:invalid:not(:placeholder-shown):not(:focus),
.modal__field input:invalid:not(:placeholder-shown):not(:focus) {
  border-color:#F43F5E;
}

/* 聚焦时 placeholder 动画 */
.cform input:focus::placeholder,
.modal__field input:focus::placeholder {
  transform:translateY(-2px);
  opacity:.5;
  transition:transform .2s, opacity .2s;
}


/* ══════════════════════════════════════════════════════
   15. 特性列表 — 弹性滑入 + 强调
   ══════════════════════════════════════════════════════ */
.feat-list li {
  transition:transform .35s var(--ease-spring),
             opacity .35s var(--ease-out-expo),
             color .3s;
}
.feat-list li::before {
  transition:transform .3s var(--ease-out-back), color .3s;
}
.s-card:hover .feat-list li,
.case--detail:hover .feat-list li {
  color:var(--primary);
}
.s-card:hover .feat-list li::before,
.case--detail:hover .feat-list li::before {
  transform:scale(1.3);
}


/* ══════════════════════════════════════════════════════
   16. 弹窗视觉升级
   ══════════════════════════════════════════════════════ */
.modal__overlay {
  background:rgba(8,23,64,.6);
  backdrop-filter:blur(4px);
}
.modal__panel {
  animation:modalSlideIn .55s var(--ease-out-back);
  border:1px solid rgba(30,90,232,.08);
  box-shadow:0 30px 70px rgba(8,23,64,.35), 0 0 0 1px rgba(255,255,255,.1);
}
@keyframes modalSlideIn {
  0%{opacity:0; transform:translateY(40px) scale(.92)}
  100%{opacity:1; transform:none}
}

/* 关闭按钮增强 */
.modal__x {
  transition:background .25s, color .25s, transform .25s var(--ease-out-back);
}
.modal__x:hover {
  transform:rotate(90deg) scale(1.1);
  background:#FFE0E0;
  color:#E53E3E;
}

/* 微信二维码区光晕 */
.modal__qr {
  position:relative; overflow:hidden;
}
.modal__qr::before {
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 40%, rgba(30,90,232,.04) 0%, transparent 70%);
  pointer-events:none;
}


/* ══════════════════════════════════════════════════════
   17. 服务卡片 — 图标渐变背景
   ══════════════════════════════════════════════════════ */
.s-card__icon, .p-card__icon, .info-card__icon {
  position:relative; overflow:hidden;
  transition:transform .4s var(--ease-out-back),
             box-shadow .4s var(--ease-out-expo);
}
.s-card:hover .s-card__icon,
.p-card:hover .p-card__icon,
.info-card:hover .info-card__icon {
  transform:scale(1.08);
  box-shadow:0 8px 24px rgba(30,90,232,.15);
}

/* 图标装饰环 */
.s-card__icon::after, .p-card__icon::after, .info-card__icon::after {
  content:""; position:absolute; inset:0;
  border:1.5px solid rgba(30,90,232,.12);
  border-radius:inherit;
  opacity:0;
  transition:opacity .4s, transform .4s var(--ease-out-expo);
  transform:scale(.85);
}
.s-card:hover .s-card__icon::after,
.p-card:hover .p-card__icon::after,
.info-card:hover .info-card__icon::after {
  opacity:1;
  transform:scale(1.12);
}


/* ══════════════════════════════════════════════════════
   18. 合作伙伴/客户 logo — 渐变微交互
   ══════════════════════════════════════════════════════ */
.partners span {
  transition:all .35s var(--ease-out-expo);
  position:relative; overflow:hidden;
}
.partners span::before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(30,90,232,.03) 0%, transparent 60%);
  opacity:0; transition:opacity .35s;
}
.partners span:hover {
  color:var(--primary);
  border-color:#B0C8F0;
  box-shadow:0 8px 28px rgba(30,90,232,.1);
  transform:translateY(-3px);
}
.partners span:hover::before { opacity:1; }


/* ══════════════════════════════════════════════════════
   19. 联系页信息卡片 — 图标背光
   ══════════════════════════════════════════════════════ */
.info-card {
  position:relative; overflow:hidden;
}
.info-card::before {
  content:""; position:absolute; top:-30px; right:-30px;
  width:100px; height:100px;
  background:radial-gradient(circle, rgba(30,90,232,.06) 0%, transparent 70%);
  border-radius:50%; pointer-events:none;
  transition:transform .6s var(--ease-out-expo);
}
.info-card:hover::before {
  transform:scale(1.8);
}


/* ══════════════════════════════════════════════════════
   20. 时间线装饰增强
   ══════════════════════════════════════════════════════ */
.timeline::before {
  background:linear-gradient(to bottom,
    var(--accent-teal), var(--primary), var(--accent-purple), #D8E3FA) !important;
}
.timeline__year {
  box-shadow:0 0 0 4px rgba(30,90,232,.1);
  transition:transform .3s var(--ease-out-back),
             box-shadow .3s var(--ease-out-expo),
             background .3s;
}
.timeline__item:hover .timeline__year {
  transform:scale(1.1);
  box-shadow:0 0 0 8px rgba(30,90,232,.08);
  background:var(--primary);
  color:#fff;
}


/* ══════════════════════════════════════════════════════
   21. 对比表格增强
   ══════════════════════════════════════════════════════ */
.compare-table tr:hover td {
  background:linear-gradient(90deg, #F8FAFF, #F0F5FF, #F8FAFF);
}
.compare-table th:nth-child(2) {
  position:relative;
}
.compare-table th:nth-child(2)::after {
  content:""; position:absolute; bottom:0; left:20%; right:20%;
  height:2px; background:var(--grad-blue); border-radius:2px;
}


/* ══════════════════════════════════════════════════════
   22. 新闻列表增强
   ══════════════════════════════════════════════════════ */
.news-item:hover .news-item__arrow {
  transform:translateX(4px);
  transition:opacity .3s, transform .3s var(--ease-out-expo);
}
.news-item__img {
  transition:transform .5s var(--ease-out-expo);
}
.news-item:hover .news-item__img {
  transform:scale(1.04);
}
.news-featured__img {
  transition:transform .6s var(--ease-out-expo);
}
.news-featured__main:hover .news-featured__img {
  transform:scale(1.03);
}


/* ══════════════════════════════════════════════════════
   23. 案例卡片图片层增强
   ══════════════════════════════════════════════════════ */
.case__img, .news-featured__img, .news-item__img {
  overflow:hidden;
}
.case__img span, .news-featured__img span, .news-item__img span {
  position:relative; z-index:1;
  transition:transform .4s var(--ease-out-expo);
}
.case:hover .case__img span,
.news-featured__main:hover .news-featured__img span,
.news-item:hover .news-item__img span {
  transform:scale(1.06);
}

/* 图片渐变叠加（复用 style.css 的 ::after） */
.case__img::after, .news-featured__img::after, .news-item__img::after {
  transition:opacity .4s var(--ease-out-expo);
}


/* ══════════════════════════════════════════════════════
   24. 底部页脚 — logo 区装饰
   ══════════════════════════════════════════════════════ */
.footer__contact-line a {
  transition:color .25s, transform .25s var(--ease-spring);
  display:inline-block;
}
.footer__contact-line a:hover {
  transform:translateX(3px);
}


/* ══════════════════════════════════════════════════════
   25. 页面 Section 微渐变色交替
   ══════════════════════════════════════════════════════ */
.section--alt {
  background:linear-gradient(180deg, #F7F9FD 0%, #F2F6FF 50%, #F7F9FD 100%);
}
.section--tint {
  background:linear-gradient(180deg, #F2F6FF 0%, #EDF3FF 50%, #F2F6FF 100%);
}

/* section 之间加微过渡线 */
.section + .section {
  border-top:1px solid rgba(30,90,232,.04);
}


/* ══════════════════════════════════════════════════════
   26. 面包屑链接增强
   ══════════════════════════════════════════════════════ */
.breadcrumb a {
  transition:color .25s, transform .25s var(--ease-spring);
  display:inline-block;
}
.breadcrumb a:hover {
  transform:translateY(-1px);
}


/* ══════════════════════════════════════════════════════
   27. Hero 可视化增强
   ══════════════════════════════════════════════════════ */
.app-window {
  transition:transform .6s var(--ease-out-expo);
}
.hero:hover .app-window {
  transform:translateY(-4px);
}
.chip {
  transition:transform .4s var(--ease-out-back), box-shadow .4s;
}
.chip:hover {
  transform:translateY(-3px);
  box-shadow:0 14px 36px rgba(8,23,64,.25);
}


/* ══════════════════════════════════════════════════════
   28. 移动端适配
   ══════════════════════════════════════════════════════ */
@media (max-width:768px){
  .particle { display:none }
  .section-ornament { display:none }
  .stat-card:nth-child(odd),
  .stat-card:nth-child(even) { animation-duration:7s }
  .case:hover, .case--detail:hover, .s-card:hover, .prod-card:hover,
  .p-card:hover, .info-card:hover, .adv:hover, .step-card:hover,
  .product-detail:hover, .news-featured__main:hover, .news-side-card:hover,
  .news-item:hover {
    transform:translateY(-5px) !important;
  }
  .case::after, .case--detail::after, .s-card::after, .p-card::after,
  .info-card::after, .step-card::after, .product-detail::after,
  .news-side-card::after, .news-item::after {
    display:none;
  }
  .cform input:focus, .modal__field input:focus {
    transform:none;
  }
}


/* ══════════════════════════════════════════════════════
   29. 无障碍：减少动画偏好
   ══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .anim-up,.anim-fade,.particle,.section-ornament,
  .subhero .breadcrumb,.subhero .subhero__title,.subhero .subhero__sub,
  .hero .breadcrumb,.hero .hero__title,.hero .hero__sub,
  .sec-head--center .eyebrow,.sec-head--center .sec-title,.sec-head--center .sec-sub,
  .sec-head--row .eyebrow,.sec-head--row .sec-title,.sec-head--row .sec-sub,
  .cta-band,.subhero__title::after,.hero__title::after,
  .cta-band::before,
  .stat-num,.stat-card__num,
  .scroll-progress,
  .sec-head--row .sec-title::before,
  .sec-head--center .sec-title::before {
    opacity:1!important; transform:none!important;
    animation:none!important;
  }
}