/* ===== 链金引擎 V3.0 · 国际顶尖视觉系统 ===== */
/* 对标: Stripe / Linear / Vercel / Palantir 2026 */
/* 核心: Liquid Glass + WebGL Gradient + Editorial Typography + Agentic AI */

/* ===== 1. Liquid Glass 液态玻璃系统 ===== */
.glass-card{
  background:rgba(13,40,32,.55);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  position:relative;
  overflow:hidden;
  transition:all .5s cubic-bezier(.25,.46,.45,.94);
}
.glass-card::before{
  content:'';position:absolute;inset:0;border-radius:20px;padding:1px;
  background:linear-gradient(135deg,rgba(212,175,55,.3),transparent 40%,transparent 60%,rgba(212,175,55,.15));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;opacity:0;transition:.5s;
}
.glass-card:hover::before{opacity:1;}
.glass-card:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 60px rgba(212,175,55,.1),inset 0 1px 0 rgba(255,255,255,.1);
  border-color:rgba(212,175,55,.2);
}

.glass-hero{
  background:linear-gradient(135deg,rgba(13,40,32,.7),rgba(10,31,26,.5));
  backdrop-filter:blur(30px) saturate(200%);
  -webkit-backdrop-filter:blur(30px) saturate(200%);
  border:1px solid rgba(212,175,55,.15);
  border-radius:28px;
  box-shadow:0 40px 120px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1);
}

/* ===== 2. WebGL 风格动态渐变背景 ===== */
.mesh-gradient{
  position:fixed;top:0;left:0;width:100%;height:100%;
  pointer-events:none;z-index:0;overflow:hidden;
}
.mesh-blob{
  position:absolute;border-radius:50%;filter:blur(100px);opacity:.12;
  animation:meshFloat 20s ease-in-out infinite;
}
.mesh-blob-1{width:600px;height:600px;background:#d4af37;top:-200px;right:-100px;animation-delay:0s;}
.mesh-blob-2{width:500px;height:500px;background:#0d9488;bottom:-150px;left:-100px;animation-delay:-5s;}
.mesh-blob-3{width:400px;height:400px;background:#059669;top:40%;left:50%;animation-delay:-10s;}
@keyframes meshFloat{
  0%,100%{transform:translate(0,0) scale(1);}
  25%{transform:translate(50px,-50px) scale(1.1);}
  50%{transform:translate(-30px,30px) scale(.95);}
  75%{transform:translate(-50px,-30px) scale(1.05);}
}

.noise-overlay{
  position:fixed;top:0;left:0;width:100%;height:100%;
  pointer-events:none;z-index:1;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== 3. 编辑级排版系统 (Editorial Typography) ===== */
.editorial-display{
  font-size:clamp(42px,6vw,72px);
  font-weight:300;
  line-height:1.05;
  letter-spacing:-0.02em;
  color:#fff;
}
.editorial-display strong{
  font-weight:700;
  background:linear-gradient(135deg,#f6e27a 0%,#d4af37 50%,#b8860b 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.editorial-sub{
  font-size:clamp(16px,1.5vw,20px);
  font-weight:300;
  line-height:1.6;
  color:rgba(255,255,255,.6);
  letter-spacing:0.01em;
}
.editorial-eyebrow{
  font-size:11px;
  font-weight:600;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:#d4af37;
  display:inline-flex;align-items:center;gap:8px;
}
.editorial-eyebrow::before{
  content:'';width:24px;height:1px;background:linear-gradient(90deg,#d4af37,transparent);
}

/* ===== 4. Agentic AI 多智能体协作展示 ===== */
.agent-orbit{
  position:relative;width:100%;aspect-ratio:1;max-width:500px;margin:0 auto;
}
.agent-center{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:120px;height:120px;border-radius:50%;
  background:linear-gradient(135deg,#d4af37,#b8860b);
  display:flex;align-items:center;justify-content:center;
  font-size:40px;box-shadow:0 0 60px rgba(212,175,55,.4);
  z-index:2;
}
.agent-center::after{
  content:'';position:absolute;inset:-20px;border-radius:50%;
  border:1px solid rgba(212,175,55,.3);
  animation:orbitPulse 3s ease-in-out infinite;
}
@keyframes orbitPulse{0%,100%{transform:scale(1);opacity:.5;}50%{transform:scale(1.15);opacity:.2;}}
.agent-node{
  position:absolute;width:70px;height:70px;border-radius:16px;
  background:rgba(13,40,32,.8);backdrop-filter:blur(10px);
  border:1px solid rgba(212,175,55,.2);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;transition:.4s;cursor:pointer;
}
.agent-node:hover{
  border-color:rgba(212,175,55,.5);
  box-shadow:0 0 30px rgba(212,175,55,.2);
  transform:scale(1.1);
}
.agent-node-label{
  position:absolute;bottom:-24px;left:50%;transform:translateX(-50%);
  font-size:10px;color:#8b92b0;white-space:nowrap;font-weight:500;
}
.agent-connection{
  position:absolute;top:0;left:0;width:100%;height:100%;
  pointer-events:none;z-index:1;
}

/* ===== 5. 增长飞轮 (Growth Flywheel) ===== */
.flywheel{
  position:relative;width:100%;aspect-ratio:1;max-width:400px;margin:0 auto;
}
.flywheel-ring{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(212,175,55,.15);
  animation:flywheelRotate 30s linear infinite;
}
.flywheel-ring::before{
  content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  width:12px;height:12px;border-radius:50%;background:#d4af37;
  box-shadow:0 0 20px rgba(212,175,55,.6);
}
@keyframes flywheelRotate{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.flywheel-center{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  text-align:center;
}
.flywheel-center-icon{font-size:48px;margin-bottom:8px;}
.flywheel-center-title{font-size:18px;font-weight:700;color:#f6e27a;}
.flywheel-center-desc{font-size:12px;color:#8b92b0;margin-top:4px;}
.flywheel-node{
  position:absolute;width:90px;text-align:center;
  background:rgba(13,40,32,.8);backdrop-filter:blur(10px);
  border:1px solid rgba(212,175,55,.2);border-radius:12px;padding:12px 8px;
  transition:.3s;
}
.flywheel-node:hover{border-color:rgba(212,175,55,.5);transform:scale(1.05);}
.flywheel-node-icon{font-size:24px;margin-bottom:4px;}
.flywheel-node-title{font-size:11px;font-weight:600;color:#fff;}
.flywheel-node-desc{font-size:9px;color:#8b92b0;margin-top:2px;}

/* ===== 6. 资本市场指标卡片 (SEC-grade Metrics) ===== */
.metric-hero{
  text-align:center;padding:32px 24px;
}
.metric-hero-number{
  font-size:clamp(48px,8vw,96px);
  font-weight:200;
  line-height:1;
  background:linear-gradient(135deg,#fff 0%,#f6e27a 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.03em;
}
.metric-hero-label{
  font-size:13px;color:#8b92b0;margin-top:8px;
  text-transform:uppercase;letter-spacing:0.15em;font-weight:500;
}
.metric-hero-trend{
  display:inline-flex;align-items:center;gap:4px;
  font-size:14px;font-weight:600;color:#4ade80;margin-top:12px;
  padding:4px 12px;border-radius:20px;background:rgba(34,197,94,.1);
}

.metric-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,255,255,.06);border-radius:16px;overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
}
.metric-cell{
  background:rgba(10,31,26,.8);padding:24px 20px;text-align:center;
  transition:.3s;
}
.metric-cell:hover{background:rgba(13,40,32,.9);}
.metric-cell-value{
  font-size:28px;font-weight:600;color:#f6e27a;
  font-variant-numeric:tabular-nums;line-height:1.2;
}
.metric-cell-label{
  font-size:11px;color:#8b92b0;margin-top:6px;
  text-transform:uppercase;letter-spacing:0.1em;
}

/* ===== 7. 技术参数前沿性展示 ===== */
.tech-spec-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 0;border-bottom:1px solid rgba(255,255,255,.06);
}
.tech-spec-row:last-child{border-bottom:none;}
.tech-spec-name{font-size:14px;color:#c0c6d8;display:flex;align-items:center;gap:10px;}
.tech-spec-icon{width:32px;height:32px;border-radius:8px;
  background:rgba(212,175,55,.1);display:flex;align-items:center;justify-content:center;font-size:14px;}
.tech-spec-value{font-size:14px;font-weight:600;color:#f6e27a;
  font-variant-numeric:tabular-nums;}
.tech-spec-badge{
  display:inline-block;padding:2px 8px;border-radius:6px;
  font-size:10px;font-weight:700;background:rgba(34,197,94,.15);color:#4ade80;
  margin-left:8px;
}

/* ===== 8. 实时状态指示器 ===== */
.live-indicator{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:600;color:#4ade80;
  padding:4px 10px;border-radius:20px;background:rgba(34,197,94,.1);
  border:1px solid rgba(34,197,94,.2);
}
.live-dot{
  width:6px;height:6px;border-radius:50%;background:#4ade80;
  animation:livePulse 1.5s ease-in-out infinite;
}
@keyframes livePulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,197,94,.4);}50%{opacity:.6;box-shadow:0 0 0 6px rgba(34,197,94,0);}}

/* ===== 9. 数据流光效 ===== */
.data-stream{
  position:relative;overflow:hidden;border-radius:12px;
  background:rgba(13,40,32,.5);border:1px solid rgba(255,255,255,.06);
}
.data-stream::after{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(212,175,55,.1),transparent);
  animation:dataSweep 3s linear infinite;
}
@keyframes dataSweep{to{left:100%;}}

/* ===== 10. 响应式 ===== */
@media(max-width:900px){
  .metric-grid{grid-template-columns:repeat(2,1fr);}
  .editorial-display{font-size:clamp(32px,8vw,48px);}
}
@media(max-width:600px){
  .metric-grid{grid-template-columns:1fr;}
  .glass-card{border-radius:16px;}
}