/* ============================================================
   动效与新增模块  v1.0
   本文件只做「增强」：禁用后页面结构与内容完全不受影响
   ============================================================ */

/* ---------- 1. 顶部阅读进度条 ---------- */
.fx-progress{
  position:fixed;left:0;top:0;height:3px;width:0;z-index:1200;pointer-events:none;
  background:linear-gradient(90deg,#1a5bd6,#2f7bff 45%,#22d3ee);
  box-shadow:0 0 14px rgba(47,123,255,.45);
  transition:width .1s linear;
}

/* ---------- 2. 数据成就带 ---------- */
.fx-stats{
  position:relative;overflow:hidden;padding:60px 0;
  background:linear-gradient(120deg,#04122a 0%,#0a2247 55%,#12325e 100%);
}
.fx-stats::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 320px at 18% 0%,rgba(34,211,238,.16),transparent 62%),
             radial-gradient(760px 320px at 88% 100%,rgba(47,123,255,.22),transparent 62%);
}
.fx-stats .container{position:relative}
/* 深色数据带：一道青蓝流光持续横向掠过，与白区块的科技语言保持一致 */
.fx-stats::after{
  content:"";position:absolute;top:0;left:0;width:34%;height:100%;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(47,123,255,.12),rgba(34,211,238,.14),transparent);
  animation:fx-statbeam 16s linear infinite;
}
@keyframes fx-statbeam{0%{transform:translateX(-130%)}100%{transform:translateX(330%)}}
.fx-stats-head{text-align:center;margin-bottom:30px}
.fx-stats-head .kicker{justify-content:center}
.fx-stats-head h2{color:#fff;font-size:clamp(20px,2.4vw,28px)}
.fx-stats-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10);
  border-radius:18px;overflow:hidden;
}
.fx-stat{position:relative;padding:30px 26px;background:rgba(255,255,255,.03)}
.fx-stat b{
  display:block;font-size:40px;line-height:1.1;color:#fff;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.fx-stat b i{font-style:normal;font-size:21px;color:#7fb4ff;margin-left:2px}
.fx-stat > span{display:block;margin-top:8px;font-size:13px;color:#9db8dd;letter-spacing:.06em}
.fx-stat::after{
  content:"";position:absolute;left:26px;right:26px;bottom:0;height:2px;
  background:linear-gradient(90deg,#22d3ee,#1a5bd6);
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease);
}
.fx-stat.in::after{transform:scaleX(1)}
.fx-stat:nth-child(2)::after{transition-delay:.12s}
.fx-stat:nth-child(3)::after{transition-delay:.24s}
.fx-stat:nth-child(4)::after{transition-delay:.36s}

/* ---------- 3. 客户评价滚动墙 ---------- */
.fx-marquee{
  position:relative;overflow:hidden;margin-top:34px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.fx-marquee-track{display:flex;gap:18px;width:max-content;animation:fx-scroll 42s linear infinite}
.fx-marquee:hover .fx-marquee-track{animation-play-state:paused}
.fx-marquee.rev .fx-marquee-track{animation-direction:reverse}
.fx-marquee + .fx-marquee{margin-top:18px}
@keyframes fx-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.quote-card{
  flex:none;width:400px;max-width:86vw;padding:24px 26px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.quote-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#c9dcff}
.quote-card .qm{font-size:15px;line-height:1.85;color:var(--body);margin-bottom:16px}
.quote-card .qw{display:flex;align-items:center;gap:11px}
.quote-card .qav{
  flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,#eef5ff,#dceaff);color:var(--blue);font-size:14px;font-weight:700;
}
.quote-card .qw b{display:block;font-size:14px;color:var(--ink)}
.quote-card .qw span{display:block;font-size:12.5px;color:var(--muted)}
.quote-stars{color:#ffb020;font-size:12px;letter-spacing:2px;margin-bottom:10px}

/* ---------- 4. FAQ 手风琴 ---------- */
.faq-wrap{max-width:880px;margin:0 auto}
.faq-item{
  border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;margin-bottom:12px;
  transition:box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.faq-item.open{border-color:#c9dcff;box-shadow:0 12px 30px rgba(26,91,214,.10)}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;
  padding:18px 20px;background:none;border:0;text-align:left;
  font-size:16px;font-weight:600;color:var(--ink);font-family:inherit;line-height:1.5;
}
.faq-ic{
  flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--blue);font-size:17px;line-height:1;
  transition:transform .3s var(--ease),background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.faq-item.open .faq-ic{transform:rotate(45deg);background:var(--blue);border-color:var(--blue);color:#fff}
/* 无 JS（或关闭动效）时全部展开，保证内容与无障碍 */
.faq-js .faq-a{max-height:0;opacity:0;overflow:hidden;transition:max-height .35s var(--ease),opacity .28s var(--ease)}
.faq-js .faq-item.open .faq-a{opacity:1}
.faq-a-in{padding:0 20px 20px;font-size:15px;line-height:1.85;color:var(--body)}
.faq-a-in p:last-child{margin-bottom:0}

/* ---------- 5. 鼠标跟随高亮 ---------- */
.fx-spot{position:relative}
.fx-spot::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  border-radius:inherit;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(47,123,255,.13),transparent 66%);
  transition:opacity .3s var(--ease);
}
.fx-spot:hover::before{opacity:1}

/* ---------- 6. 3D 倾斜 ---------- */
.fx-tilt{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
  transition:transform .2s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
  will-change:transform;
}
.serv-card.fx-tilt:hover,.case-card.fx-tilt:hover,.news-card.fx-tilt:hover{--ty:-4px}

/* ---------- 7. Hero 粒子 / 视差 ---------- */
.fx-particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.fx-para{transition:transform .35s var(--ease)}
.fx-float{animation:fx-float 6s ease-in-out infinite}
.fx-float.d1{animation-duration:5s}
.fx-float.d2{animation-duration:7s;animation-delay:.6s}
@keyframes fx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ---------- 8. 向下滚动提示 ---------- */
.fx-hint{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:7px;
  font-size:11px;letter-spacing:.18em;color:#7ea0cc;z-index:2;pointer-events:none;
}
.fx-hint i{display:block;width:1px;height:34px;background:linear-gradient(180deg,#7ea0cc,transparent);animation:fx-hintline 1.9s ease-in-out infinite}
@keyframes fx-hintline{0%,100%{opacity:.25;transform:scaleY(.45)}50%{opacity:1;transform:scaleY(1)}}

/* ---------- 9. CTA 光扫 ---------- */
.cta-band::before{
  content:"";position:absolute;top:0;left:-40%;width:26%;height:100%;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent);
  transform:skewX(-12deg);animation:fx-sweep 8s ease-in-out infinite;
}
@keyframes fx-sweep{0%{left:-40%}60%{left:120%}100%{left:120%}}

/* ---------- 10. 返回顶部进度环 ---------- */
.fb-item{position:relative}
.fb-item.fx-ring{color:var(--blue);border-color:rgba(26,91,214,.32)}
.fb-item.fx-ring::before{
  content:"";position:absolute;inset:0;border-radius:999px;z-index:0;
  background:conic-gradient(var(--blue) calc(var(--p,0) * 1%),rgba(26,91,214,.13) 0);
}
.fb-item.fx-ring::after{
  content:"";position:absolute;inset:3px;border-radius:999px;background:#fff;z-index:0;
  transition:background .2s var(--ease);
}
.fb-item.fx-ring > *{position:relative;z-index:1}
.fb-item.fx-ring:hover{color:#fff}
.fb-item.fx-ring:hover::after{background:transparent}

/* ---------- 11. 打字机光标 ---------- */
.fx-caret{
  display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;
  background:#7fb4ff;animation:fx-blink 1s steps(1) infinite;
}
@keyframes fx-blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}

/* ---------- 12. 渐显增强 ---------- */
.fx-fade{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease);transition-delay:var(--d,0ms)}
.fx-fade.in{opacity:1;transform:none}

/* ============================================================
   13. 高级背景（白色 / 浅色区块的质感层）
   关闭「高级背景」后这些区块与普通白底完全一致
   ============================================================ */

/* 点阵网格 + 双色氛围光 + 极淡噪点，四周 mask 自然淡出 */
.fx-deco{position:relative;overflow:hidden}
.fx-deco::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(rgba(26,91,214,.085) 1.1px,transparent 1.2px) 0 0/34px 34px,
    radial-gradient(780px 440px at 84% -10%,rgba(47,123,255,.14),transparent 62%),
    radial-gradient(640px 400px at 4% 110%,rgba(34,211,238,.11),transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.6),transparent 30%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 42%,#000 40%,transparent 100%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 42%,#000 40%,transparent 100%);
}

/* 缓慢漂移的光斑，给静态页面一点呼吸感 */
.fx-deco::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:520px;height:520px;left:-6%;top:22%;border-radius:50%;
  background:radial-gradient(circle,rgba(47,123,255,.10),transparent 68%);
  animation:fx-blob 34s ease-in-out infinite alternate;
}
@keyframes fx-blob{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(140px,-110px,0) scale(1.14)}
}
.fx-deco > .container{position:relative;z-index:1}

/* 浅灰区块改为上下渐变过渡，消除生硬的色块边界 */
.section-soft{
  background:linear-gradient(180deg,#fff 0%,var(--bg) 24%,var(--bg) 76%,#fff 100%);
}

/* 区块小标题改为渐变字 */
.fx-deco .kicker:not(.light){
  background:linear-gradient(90deg,#1a5bd6,#2f7bff 48%,#0e7490);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.fx-stats .kicker.light{
  background:linear-gradient(90deg,#8fc0ff,#22d3ee);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

/* 卡片悬停时多一层蓝色光环 */
.serv-card.fx-spot:hover,
.case-card.fx-spot:hover,
.news-card.fx-spot:hover{
  box-shadow:var(--shadow-lg),0 0 0 3px rgba(26,91,214,.09);
}

/* 分隔用的柔和渐变细线 */
.fx-deco + .fx-deco{border-top:1px solid rgba(26,91,214,.06)}

/* 鼠标聚光灯（桌面端，柔光跟随） */
#fxSpot{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;
  transition:opacity .45s var(--ease);
  background:radial-gradient(560px circle at var(--x,50%) var(--y,50%),rgba(47,123,255,.075),transparent 68%);
}
body.has-fx-bg #fxSpot{opacity:1}
@media (max-width:1023px){#fxSpot{display:none}}

/* ============================================================
   14. 科技感持续动效层（白色 / 浅色区块）
   与站点主色一致：深蓝 #1a5bd6 → 亮蓝 #2f7bff → 青 #22d3ee
   特点：持续运行（非一次性入场）；仅 transform / opacity 动画
   离开视口自动暂停；系统「减少动效」时完全不生成
   ============================================================ */
.fx-techbox{position:relative;overflow:hidden}
.fx-techbox > .container{position:relative;z-index:1}

.fx-tech{position:absolute;inset:0;z-index:0;pointer-events:none}
.fx-techin{
  position:absolute;inset:0;
  -webkit-mask-image:radial-gradient(ellipse 86% 80% at 50% 48%,#000 42%,transparent 100%);
  mask-image:radial-gradient(ellipse 86% 80% at 50% 48%,#000 42%,transparent 100%);
}

/* 1) 45° 双向细网格，整层匀速平移，形成持续的数据底流 */
.fx-grid{
  position:absolute;left:-80px;right:-80px;top:-80px;bottom:-80px;
  background:
    repeating-linear-gradient(45deg,rgba(26,91,214,.075) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(-45deg,rgba(34,211,238,.06) 0 1px,transparent 1px 46px);
  animation:fx-grid 26s linear infinite;
}
/* 平移量 = 46 × √2，保证一个周期后完全无缝 */
@keyframes fx-grid{from{transform:translate3d(0,0,0)}to{transform:translate3d(65.05px,0,0)}}

/* 2) 扫描光带：自上而下缓慢往复，像数据在逐行刷新 */
.fx-scan{
  position:absolute;left:0;right:0;top:0;height:32%;
  background:linear-gradient(180deg,transparent,rgba(47,123,255,.06) 38%,rgba(34,211,238,.10) 64%,transparent);
  animation:fx-scan 17s cubic-bezier(.42,0,.58,1) infinite;
}
/* 扫描带前沿的那条亮线，是「科技感」最直观的一笔 */
.fx-scan::before{
  content:"";position:absolute;left:0;right:0;top:64%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.5) 22%,rgba(47,123,255,.55) 50%,rgba(34,211,238,.5) 78%,transparent);
}
@keyframes fx-scan{0%{transform:translateY(-110%)}100%{transform:translateY(330%)}}

/* 3) 数据总线：一条极细横线，上面有光点循环跑过 */
.fx-bus{
  position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(26,91,214,.10) 14%,rgba(26,91,214,.10) 86%,transparent);
}
.fx-bus::after{
  content:"";position:absolute;top:-1px;left:0;width:180px;height:3px;
  background:linear-gradient(90deg,transparent,rgba(47,123,255,.5),rgba(34,211,238,.8),transparent);
  animation:fx-bus var(--bd,9s) linear infinite;
  animation-delay:var(--bl,0s);
}
.fx-bus.b2::after{width:130px}
@keyframes fx-bus{0%{transform:translateX(-200px)}100%{transform:translateX(100vw)}}

/* 4) 脉冲节点：网格交叉点上的信号点，带扩散环 */
.fx-node{
  position:absolute;width:6px;height:6px;border-radius:50%;
  background:rgba(47,123,255,.55);opacity:.85;
  animation:fx-node 4.2s ease-out infinite;
}
@keyframes fx-node{
  0%{box-shadow:0 0 0 0 rgba(47,123,255,.28)}
  70%{box-shadow:0 0 0 24px rgba(47,123,255,0)}
  100%{box-shadow:0 0 0 0 rgba(47,123,255,0)}
}

/* 5) HUD 十字定位标记 */
.fx-cross{position:absolute;width:15px;height:15px;animation:fx-cross 5.4s ease-in-out infinite}
.fx-cross::before,.fx-cross::after{content:"";position:absolute;background:rgba(26,91,214,.34)}
.fx-cross::before{left:50%;top:0;width:1px;height:100%;margin-left:-.5px}
.fx-cross::after{top:50%;left:0;height:1px;width:100%;margin-top:-.5px}
@keyframes fx-cross{0%,100%{opacity:.28;transform:scale(.9)}50%{opacity:.65;transform:scale(1)}}

/* 6) 顶边流动光束 */
.fx-beam{
  position:absolute;top:0;left:0;width:30%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(47,123,255,.65),rgba(34,211,238,.9),transparent);
  animation:fx-beam 13s linear infinite;
}
@keyframes fx-beam{0%{transform:translateX(-120%)}100%{transform:translateX(340%)}}

/* 7) 对角 HUD 角标（不受遮罩影响，保留科技边框感） */
.fx-tick{position:absolute;width:26px;height:26px;border:0 solid rgba(26,91,214,.28);animation:fx-tick 6.5s ease-in-out infinite}
.fx-tick.tl{left:0;top:0;border-top-width:1px;border-left-width:1px}
.fx-tick.br{right:0;bottom:0;border-bottom-width:1px;border-right-width:1px}
@keyframes fx-tick{0%,100%{opacity:.45}50%{opacity:.9}}

/* 8) 小标题前的短线改为流动渐变 */
.fx-techbox .kicker:not(.light)::before{
  background:linear-gradient(90deg,#1a5bd6,#22d3ee,#1a5bd6);
  background-size:220% 100%;
  animation:fx-kglow 3.6s linear infinite;
}
@keyframes fx-kglow{from{background-position:0 0}to{background-position:-220% 0}}

/* 离开视口即暂停，回到视口继续（省电、不影响滚动流畅度） */
.fx-tech *{animation-play-state:paused}
.fx-techbox.fx-live .fx-tech *{animation-play-state:running}
.fx-techbox:not(.fx-live) .kicker::before{animation-play-state:paused}

/* 移动端与触屏：只保留网格与扫描带，去掉细碎元素 */
@media (max-width:900px){
  .fx-bus,.fx-node,.fx-cross,.fx-beam{display:none}
  .fx-grid{animation-duration:34s}
}

/* ---------- 响应式 ---------- */
@media (max-width:1000px){
  .fx-stats-grid{grid-template-columns:repeat(2,1fr)}
  .quote-card{width:330px}
  .fx-deco::before{background-size:28px 28px,auto,auto,auto}
}
@media (max-width:640px){
  .fx-stats{padding:44px 0}
  .fx-stat{padding:22px 18px}
  .fx-stat b{font-size:30px}
  .fx-hint{display:none}
}

/* ---------- 尊重系统「减少动效」设置 ---------- */
@media (prefers-reduced-motion:reduce){
  .fx-marquee-track{animation:none}
  .cta-band::before{animation:none;display:none}
  .fx-float,.ai-badge{animation:none!important}
  .fx-hint i{animation:none}
  .fx-progress{transition:none}
  .fx-deco::after{animation:none}
  #fxSpot{display:none}
  .fx-tech{display:none}
  .fx-techbox .kicker:not(.light)::before{animation:none}
}