/* =====================================================================
   fx.css —— 科技感增强层（纯新增，不覆盖任何 SEO 相关代码）
   加载位置：必须放在页面内联 </style> 之后，靠 CSS 层叠顺序生效。
   字体策略：100% 系统本地字体，不外链任何 Google Fonts / 第三方 CDN，
             不使用 @font-face、@import，零额外网络请求，不影响百度抓取与首屏速度。
   ===================================================================== */

/* ============================ 令牌补充 ============================ */
:root{
  /* 科技感专用色（在原有金/绿体系上延伸，不改动原变量） */
  --cyan:      #4FD1C5;                      /* 冷光青：数据感点缀 */
  --cyan-soft: rgba(79,209,197,.14);
  --gold-glow: rgba(198,169,107,.55);
  --grid-line: rgba(198,169,107,.055);        /* 背景网格线 */
  --hud:       rgba(198,169,107,.42);         /* HUD 角标线 */

  /* 数字/代码专用字体栈：全部系统自带，Win/Mac/安卓/iOS 全覆盖 */
  --font-tech: "SF Mono", "Cascadia Mono", "Consolas", "DejaVu Sans Mono",
               "Menlo", "Courier New", ui-monospace, monospace;

  /* 中文衬线回退优化：优先思源宋体/苹方系，最后才 SimSun，避免 Windows 上掉进老宋体 */
  --font-serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC",
                "STSong", "SimSun", Georgia, serif;
}

/* =====================================================================
   1. 全局背景：动态网格 + 缓慢漂移的光晕（营造"数据空间"纵深）
   用固定层 + transform 动画，不触发重排，GPU 合成，性能开销极低
   ===================================================================== */
.fx-grid{
  position:fixed; inset:-50% -50% -50% -50%; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(to right,  var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size:64px 64px;
  /* 中心亮、边缘淡出，避免网格铺满显得廉价 */
  -webkit-mask-image:radial-gradient(ellipse 55% 55% at 50% 40%, #000 0%, transparent 78%);
          mask-image:radial-gradient(ellipse 55% 55% at 50% 40%, #000 0%, transparent 78%);
  animation:gridDrift 40s linear infinite;
  opacity:.9;
}
@keyframes gridDrift{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(64px,64px,0)}
}

/* 极缓慢横向扫描光带：像仪表盘的刷新扫描 */
.fx-scan{
  position:fixed; left:0; right:0; height:180px; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(198,169,107,.030) 45%,
    rgba(198,169,107,.055) 50%,
    rgba(198,169,107,.030) 55%,
    transparent 100%);
  animation:scanDown 14s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes scanDown{
  0%  {transform:translate3d(0,-200px,0); opacity:0}
  8%  {opacity:1}
  92% {opacity:1}
  100%{transform:translate3d(0,100vh,0);  opacity:0}
}

/* Hero 星座粒子画布（JS 绘制，仅桌面端启用） */
#fxCanvas{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.55;
}
.hero > .container{position:relative; z-index:1}   /* 保证文字压在粒子之上 */

/* =====================================================================
   2. 导航栏：底部流光边 + 品牌徽标呼吸光环
   ===================================================================== */
.nav.scrolled::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,
    transparent, var(--gold-glow) 20%, var(--cyan) 50%, var(--gold-glow) 80%, transparent);
  background-size:200% 100%;
  animation:beamSlide 6s linear infinite;
}
@keyframes beamSlide{
  from{background-position:200% 0}
  to  {background-position:-200% 0}
}
.nav{position:fixed}                       /* 保持原定位，仅补 ::after 定位上下文 */
.brand .seal{position:relative; overflow:visible}
.brand .seal::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid var(--gold); opacity:0;
  animation:sealPulse 3.4s var(--ease) infinite;
}
@keyframes sealPulse{
  0%  {transform:scale(.92); opacity:.55}
  70% {transform:scale(1.28); opacity:0}
  100%{transform:scale(1.28); opacity:0}
}

/* 滚动进度条：加发光，更像仪表读数 */
.scroll-progress{
  box-shadow:0 0 12px var(--gold-glow), 0 0 4px var(--gold-2);
}

/* =====================================================================
   3. 标题：金线扫光 + eyebrow 数据点闪烁
   ===================================================================== */
.eyebrow{position:relative}
.eyebrow::after{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 8px var(--cyan);
  animation:blip 2s ease-in-out infinite;
}
@keyframes blip{
  0%,100%{opacity:.25; transform:scale(.8)}
  50%    {opacity:1;   transform:scale(1)}
}

/* 区块大标题：进入视口时一道金光从左扫过文字 */
.section-head h2{
  background-image:linear-gradient(100deg,
    var(--ink) 0%, var(--ink) 38%,
    var(--gold-2) 48%, #fff 52%, var(--gold-2) 56%,
    var(--ink) 66%, var(--ink) 100%);
  background-size:280% 100%;
  background-position:100% 0;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.reveal.in .section-head h2,
.section-head.in h2{
  animation:titleSweep 1.9s var(--ease) .18s both;
}
@keyframes titleSweep{
  from{background-position:100% 0}
  to  {background-position:0% 0}
}
/* 兜底：万一动画未触发，文字也必须可见（SEO/可读性优先） */
.no-fx .section-head h2{
  -webkit-text-fill-color:var(--ink); color:var(--ink); background:none;
}

/* Hero 主标题高亮词：持续流动的金色光泽 */
.hero h1 .accent{
  background-image:linear-gradient(100deg,
    var(--gold) 0%, var(--gold-2) 25%, #FFF6DF 38%, var(--gold-2) 50%, var(--gold) 75%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:accentFlow 7s linear infinite;
}
@keyframes accentFlow{
  from{background-position:0% 0}
  to  {background-position:220% 0}
}
/* 高亮词下方的能量下划线 */
.hero h1 .accent::after{
  content:""; position:absolute; left:0; right:0; bottom:-.12em; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), var(--cyan), var(--gold), transparent);
  background-size:200% 100%;
  animation:beamSlide 4.5s linear infinite;
  border-radius:2px;
}

/* =====================================================================
   4. 卡片通用：HUD 四角 + 光标跟随聚光 + 边框流光
   （--mx/--my 由 fx.js 写入，是鼠标在卡片内的百分比坐标）
   ===================================================================== */
.pcard, .feat, .step, .ncard, .tier-card, .form-card{
  position:relative;
  isolation:isolate;
}

/* 4.1 光标聚光层 */
.pcard::before, .feat::before, .step::before, .ncard::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  border-radius:inherit; opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
             rgba(198,169,107,.13), transparent 62%);
  transition:opacity .4s var(--ease);
}
.pcard:hover::before, .feat:hover::before,
.step:hover::before, .ncard:hover::before{opacity:1}
.feat > *, .step > *, .ncard > *{position:relative; z-index:1}

/* 4.2 HUD 四角括号：hover 时向外张开 */
.feat::after, .step::after{
  content:""; position:absolute; inset:10px; z-index:0; pointer-events:none;
  border-radius:8px;
  background:
    linear-gradient(var(--hud),var(--hud)) 0 0/14px 1px no-repeat,
    linear-gradient(var(--hud),var(--hud)) 0 0/1px 14px no-repeat,
    linear-gradient(var(--hud),var(--hud)) 100% 0/14px 1px no-repeat,
    linear-gradient(var(--hud),var(--hud)) 100% 0/1px 14px no-repeat,
    linear-gradient(var(--hud),var(--hud)) 0 100%/14px 1px no-repeat,
    linear-gradient(var(--hud),var(--hud)) 0 100%/1px 14px no-repeat,
    linear-gradient(var(--hud),var(--hud)) 100% 100%/14px 1px no-repeat,
    linear-gradient(var(--hud),var(--hud)) 100% 100%/1px 14px no-repeat;
  opacity:0; transform:scale(.97);
  transition:opacity .45s var(--ease), transform .45s var(--ease), inset .45s var(--ease);
}
.feat:hover::after, .step:hover::after{opacity:1; transform:scale(1); inset:6px}

/* 4.3 主视觉卡 / 表单卡：旋转的边框光束（conic-gradient 遮罩描边） */
.tier-card, .form-card{overflow:hidden}
.tier-card::before, .form-card::before{
  content:""; position:absolute; z-index:-1;
  inset:-1px; border-radius:inherit; padding:1px;
  background:conic-gradient(from var(--beam,0deg),
    transparent 0deg, transparent 250deg,
    var(--gold) 300deg, var(--cyan) 330deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:beamRotate 7s linear infinite;
}
@property --beam{syntax:'<angle>'; inherits:false; initial-value:0deg}
@keyframes beamRotate{to{--beam:360deg}}
/* 不支持 @property 的浏览器（部分安卓内核）：退化为静态金边，不影响可读性 */
@supports not (background: conic-gradient(from 0deg, red, blue)){
  .tier-card::before, .form-card::before{display:none}
}

/* 4.4 阶梯节点：数据流脉冲 */
.tier .node{position:relative}
.tier .node::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1px solid var(--gold);
  animation:nodePulse 2.4s var(--ease) infinite;
}
.tier:nth-child(3) .node::after{animation-delay:.4s}
.tier:nth-child(4) .node::after{animation-delay:.8s}
@keyframes nodePulse{
  0%  {transform:scale(1);   opacity:.8}
  100%{transform:scale(2.6); opacity:0}
}
/* 阶梯之间的竖向连接线 + 下行光点 */
.tier + .tier::before{
  content:""; position:absolute; left:6px; top:-14px; width:1px; height:14px;
  background:linear-gradient(180deg, transparent, var(--gold));
  opacity:.5;
}
.tier .t-index{font-family:var(--font-tech); letter-spacing:.06em}

/* =====================================================================
   5. 产品卡：全息扫光 + 编号数码化
   ===================================================================== */
.pcard .thumb::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(115deg,
    transparent 30%, rgba(255,255,255,.10) 45%,
    rgba(228,206,154,.24) 50%, rgba(255,255,255,.10) 55%, transparent 70%);
  background-size:250% 250%; background-position:120% 0;
  opacity:0; transition:opacity .2s;
}
.pcard:hover .thumb::after{
  opacity:1;
  animation:holoSweep 1.05s var(--ease);
}
@keyframes holoSweep{
  from{background-position:120% 0}
  to  {background-position:-60% 0}
}
.pcard .tag{
  font-family:var(--font-tech); letter-spacing:.14em;
  border-color:var(--hud);
}
.pcard:hover .tag{
  color:#241C0B; background:var(--gold);
  box-shadow:0 0 16px var(--gold-glow);
}
.pcard .cap .plus{font-family:var(--font-tech)}

/* =====================================================================
   6. 数据条：HUD 分隔 + 数字等宽 + 顶部扫描线
   ===================================================================== */
.marquee-strip{position:relative; overflow:hidden}
.marquee-strip::before{
  content:""; position:absolute; top:0; left:0; width:35%; height:1px;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent);
  animation:stripRun 5.5s var(--ease) infinite;
}
@keyframes stripRun{
  0%  {transform:translateX(-100%)}
  100%{transform:translateX(400%)}
}
.strip-item{position:relative; transition:background .4s var(--ease)}
.strip-item:hover{background:rgba(198,169,107,.045)}
.strip-item .k{
  font-variant-numeric:tabular-nums;
  transition:text-shadow .4s var(--ease)}
.strip-item:hover .k{text-shadow:0 0 18px var(--gold-glow)}
/* 计数动画用（JS 给带 data-count 的元素加 .counting） */
.strip-item .k[data-count]{font-family:var(--font-tech)}

/* =====================================================================
   7. 合作流程：贯穿的数据流轨道
   ===================================================================== */
.steps{position:relative}
.steps::before{
  content:""; position:absolute; top:52px; left:6%; right:6%; height:1px;
  background:linear-gradient(90deg,
    transparent, var(--line), var(--line), transparent);
  z-index:0;
}
.steps::after{
  content:""; position:absolute; top:50px; left:6%; width:70px; height:3px;
  border-radius:3px;
  background:linear-gradient(90deg, transparent, var(--gold-2), var(--cyan), transparent);
  box-shadow:0 0 14px var(--gold-glow);
  animation:flowRun 5s cubic-bezier(.55,0,.45,1) infinite;
  z-index:0;
}
@keyframes flowRun{
  0%  {transform:translateX(0);    opacity:0}
  10% {opacity:1}
  90% {opacity:1}
  100%{transform:translateX(calc(88vw - 70px)); opacity:0}
}
@media (min-width:1250px){
  .steps::after{animation-name:flowRunWide}
  @keyframes flowRunWide{
    0%{transform:translateX(0); opacity:0}
    10%{opacity:1} 90%{opacity:1}
    100%{transform:translateX(1010px); opacity:0}
  }
}
.step .n{font-family:var(--font-tech); letter-spacing:.02em; transition:opacity .4s, text-shadow .4s}
.step:hover .n{opacity:1; text-shadow:0 0 22px var(--gold-glow)}
/* 步骤序号上方的小方块指示灯 */
.step > .n::before{
  content:""; display:block; width:22px; height:2px; margin-bottom:12px;
  background:var(--gold); box-shadow:0 0 10px var(--gold-glow);
  transform-origin:left; transform:scaleX(.45);
  transition:transform .45s var(--ease);
}
.step:hover > .n::before{transform:scaleX(1)}

/* =====================================================================
   8. 按钮：扫光 + 磁吸（磁吸位移由 fx.js 写 --tx/--ty）
   ===================================================================== */
.btn{position:relative; overflow:hidden}
.btn::after{
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform:skewX(-22deg); pointer-events:none;
}
.btn:hover::after{animation:btnShine .85s var(--ease)}
@keyframes btnShine{to{left:130%}}
.btn-gold{
  transform:translate3d(var(--tx,0px), var(--ty,0px), 0);
}
.btn-gold:hover{
  transform:translate3d(var(--tx,0px), calc(var(--ty,0px) - 2px), 0) scale(1.02);
}

/* 悬浮球与移动底部条：呼吸增强 */
.fab .phone-fab{box-shadow:0 12px 30px -8px var(--gold-glow), 0 0 0 0 var(--gold-glow)}
.mobile-bar .m-call{position:relative; overflow:hidden}
.mobile-bar .m-call::after{
  content:""; position:absolute; top:0; left:-120%; width:55%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-22deg);
  animation:mCall 3.6s var(--ease) infinite;
}
@keyframes mCall{0%{left:-120%} 45%{left:130%} 100%{left:130%}}

/* =====================================================================
   9. 表单：聚焦光晕 + 输入框扫描底线
   ===================================================================== */
.field{position:relative}
.field input, .field textarea{font-family:var(--font-sans)}
.field input:focus, .field textarea:focus{
  box-shadow:0 0 0 3px rgba(198,169,107,.16), 0 0 24px -6px var(--gold-glow);
}
.field::after{
  content:""; position:absolute; left:14px; right:14px; bottom:0; height:1px;
  background:linear-gradient(90deg, var(--gold), var(--cyan));
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
  pointer-events:none;
}
.field:focus-within::after{transform:scaleX(1)}
/* 电话/数字输入等宽 */
#phone{font-family:var(--font-tech); letter-spacing:.04em}
.nav-phone .num, .hero-phone .meta b,
.contact-info .big-phone b, .foot-phone,
.drawer .drawer-phone strong{
  font-family:var(--font-tech) !important;
  letter-spacing:.02em;
}

/* =====================================================================
   10. 揭示动画升级：clip-path 幕布 + 轻微位移（比单纯淡入更"有工程感"）
   ===================================================================== */
.reveal{
  clip-path:inset(0 0 100% 0);
  transition:opacity .85s var(--ease), transform .85s var(--ease),
             clip-path .95s var(--ease);
}
.reveal.in{clip-path:inset(0 0 0 0)}
/* 横滑容器内的卡片不做裁切，避免和 scroll-snap 打架 */
.grid-products .reveal, .grid-news .reveal{clip-path:none !important}

/* =====================================================================
   11. 可访问性：修正原方案里对比度不足的弱文字
   （原 --faint #64726A 在深底上仅 3.7:1，未达 WCAG AA 正文 4.5:1）
   ===================================================================== */
:root{--faint:#84948A}   /* 由 #64726A 提升，深底上约 5.4:1，达 WCAG AA 正文标准 */

/* 焦点态更明显，键盘可达 */
:focus-visible{
  outline:2px solid var(--cyan) !important;
  outline-offset:3px;
  box-shadow:0 0 0 5px var(--cyan-soft);
}

/* =====================================================================
   12. 性能与无障碍闸门
   ===================================================================== */
/* 移动端关掉最耗 GPU 的项：conic 光束、粒子、聚光、全息扫光 */
@media (max-width:768px){
  #fxCanvas{display:none}
  .tier-card::before, .form-card::before{display:none}
  .pcard::before, .feat::before, .step::before, .ncard::before{display:none}
  .pcard .thumb::after{display:none}
  .fx-scan{display:none}
  .fx-grid{background-size:44px 44px; opacity:.65; animation-duration:60s}
  .steps::before, .steps::after{display:none}
  .feat::after, .step::after{display:none}
}

/* 用户在系统里开了"减少动态效果"：全部静止，内容照常可见 */
@media (prefers-reduced-motion:reduce){
  .fx-grid, .fx-scan, #fxCanvas{display:none !important}
  .nav.scrolled::after, .brand .seal::after, .eyebrow::after,
  .marquee-strip::before, .steps::after, .tier .node::after,
  .mobile-bar .m-call::after, .tier-card::before, .form-card::before,
  .hero h1 .accent::after{
    animation:none !important;
  }
  .hero h1 .accent{
    animation:none !important;
    -webkit-text-fill-color:var(--gold-2); color:var(--gold-2); background:none;
  }
  .section-head h2{
    animation:none !important;
    -webkit-text-fill-color:var(--ink); color:var(--ink); background:none;
  }
  .reveal{clip-path:none !important; opacity:1 !important; transform:none !important}
}

/* 打印：去掉所有装饰 */
@media print{
  .fx-grid, .fx-scan, #fxCanvas, .fab, .mobile-bar, .scroll-progress{display:none !important}
}