/* 容器 */
.container{max-width:var(--container-max);margin:0 auto;padding:var(--container-padding)}
.section{padding:var(--space-2xl) 0;position:relative}
.section-title{font-size:var(--fs-3xl);font-weight:800;text-align:center;margin-bottom:var(--space-sm);background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.section-subtitle{text-align:center;color:var(--text-secondary);font-size:var(--fs-lg);margin-bottom:var(--space-xl);max-width:600px;margin-left:auto;margin-right:auto}

/* Hero区域 */
.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;background:var(--gradient-dark)}
.hero::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 50%,rgba(30,111,255,0.15) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(0,212,255,0.1) 0%,transparent 50%);pointer-events:none}
.hero::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(rgba(30,111,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(30,111,255,0.03) 1px,transparent 1px);background-size:50px 50px;pointer-events:none}
.hero-content{position:relative;z-index:2;max-width:800px}
.hero-badge{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-full);font-size:var(--fs-sm);color:var(--accent);margin-bottom:var(--space-md);backdrop-filter:var(--glass-blur)}
.hero-badge::before{content:"";width:8px;height:8px;background:var(--accent);border-radius:50%;box-shadow:0 0 10px var(--accent);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
.hero-title{font-size:var(--fs-hero);font-weight:900;line-height:1.08;margin-bottom:var(--space-md);letter-spacing:-0.02em;background:linear-gradient(135deg,#fff 0%,#a8d4ff 50%,#00d4ff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-desc{font-size:calc(var(--fs-lg) + 0.125rem);color:var(--text-secondary);margin-bottom:var(--space-xl);max-width:620px;line-height:1.85}
.hero-actions{display:flex;gap:var(--space-sm);flex-wrap:wrap}
.hero-stats{display:flex;gap:var(--space-xl);margin-top:var(--space-2xl);flex-wrap:wrap}
.hero-stat-item{text-align:left}
.hero-stat-number{font-size:var(--fs-3xl);font-weight:800;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-stat-label{font-size:var(--fs-sm);color:var(--text-muted);margin-top:0.25rem}

/* 按钮 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.875rem 2rem;font-size:var(--fs-base);font-weight:600;border-radius:var(--radius-md);transition:all var(--transition-base);position:relative;overflow:hidden;white-space:nowrap}
.btn-primary{background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-glow)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 40px rgba(30,111,255,0.5);color:#fff}
.btn-primary::after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:left 0.5s}
.btn-primary:hover::after{left:100%}
.btn-outline{border:1px solid var(--border-hover);color:var(--text-primary);background:transparent}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);background:rgba(0,212,255,0.05)}
.btn-glass{background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-primary);backdrop-filter:var(--glass-blur)}
.btn-glass:hover{border-color:var(--accent);color:var(--accent)}

/* 卡片 */
.card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-lg);transition:all var(--transition-base);position:relative;overflow:hidden}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--gradient-primary);transform:scaleX(0);transition:transform var(--transition-base);transform-origin:left}
.card:hover{transform:translateY(-4px);border-color:var(--border-hover);box-shadow:var(--shadow-lg)}
.card:hover::before{transform:scaleX(1)}
.card-icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:var(--gradient-card);border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:1.5rem;margin-bottom:var(--space-md)}
.card-title{font-size:var(--fs-xl);font-weight:700;margin-bottom:var(--space-xs);color:var(--text-primary)}
.card-desc{font-size:var(--fs-sm);color:var(--text-secondary);line-height:1.7}

/* 网格 */
.grid{display:grid;gap:var(--space-md)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* 统计区域 */
.stats-section{background:var(--gradient-dark);position:relative;overflow:hidden}
.stats-section::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 50% 50%,rgba(30,111,255,0.1) 0%,transparent 70%)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-lg);position:relative;z-index:2}
.stat-item{text-align:center;padding:var(--space-lg)}
.stat-icon{font-size:2rem;margin-bottom:var(--space-sm);opacity:0.8}
.stat-num{font-size:var(--fs-4xl);font-weight:900;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.stat-label{font-size:var(--fs-sm);color:var(--text-muted);margin-top:var(--space-xs)}

/* 响应式 */
@media(max-width:1024px){.grid-4{grid-template-columns:repeat(2,1fr)}.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.grid-2{grid-template-columns:1fr}.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}.hero-title{font-size:clamp(2.2rem,7vw,3.2rem)!important}.hero-desc{font-size:1rem!important}.stats-grid{grid-template-columns:repeat(2,1fr)}.hero{min-height:auto;padding:var(--space-2xl) 0}.hero-title{font-size:2.25rem}.section{padding:var(--space-xl) 0}}
@media(max-width:480px){.stats-grid{grid-template-columns:1fr}.hero{padding:80px 0 60px}.hero-title{font-size:clamp(1.9rem,8vw,2.6rem)!important}.hero-desc{font-size:0.95rem!important;max-width:100%}.section-title{font-size:1.5rem!important}.section-sub{font-size:0.9rem!important}.hero-stats{gap:var(--space-md)}.stat-num{font-size:var(--fs-3xl)}}

/* wm-mobile: single column for grid-3/4 under 480px */
@media (max-width: 480px) { .grid-3, .grid-4 { grid-template-columns: 1fr !important; } }

/* 移动端增强断点 P28 → P29 */
@media (max-width: 1024px) { .grid-5, .grid-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .grid-5, .grid-6 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .grid-4, .grid-5, .grid-6 { grid-template-columns: 1fr !important; } }


/* ===== 移动端底部导航（统一版）===== */
/* PC端默认隐藏 */
.mb-tab{display:none !important;}
/* 移动端(≤768px)显示 */
@media (max-width:768px){
  .mb-tab{display:flex !important;position:fixed;bottom:0;left:0;right:0;z-index:999;align-items:center;background:rgba(7,16,30,.94);backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);border-top:1px solid rgba(30,111,255,.18);padding:7px 4px calc(7px + env(safe-area-inset-bottom));box-shadow:0 -10px 36px rgba(4,10,20,.6)}
  .mb-tab::before{content:"";position:absolute;top:-1px;left:16%;right:16%;height:1px;background:linear-gradient(90deg,transparent,rgba(0,212,255,.55) 30%,rgba(30,111,255,.65) 70%,transparent);pointer-events:none}
  .mb-tab a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:12px;color:#7a8ca6;text-decoration:none;padding:3px 0;border-radius:14px;position:relative;transition:color .22s ease,transform .16s ease;-webkit-tap-highlight-color:transparent}
  .mb-tab a svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:filter .22s ease,transform .22s ease}
  .mb-tab a:active{transform:scale(.9)}
  .mb-tab a.on{color:#00d4ff;font-weight:600}
  .mb-tab a.on svg{filter:drop-shadow(0 0 6px rgba(0,212,255,.55))}
  .mb-tab a.on::after{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:22px;height:3px;border-radius:0 0 5px 5px;background:linear-gradient(90deg,#1e6fff,#00d4ff);box-shadow:0 0 10px rgba(0,212,255,.65)}
  body{padding-bottom:64px}
}
/* 页面Banner公共样式 */
.page-banner{
  padding: 8rem 0 4rem;
  background: var(--gradient-dark);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-banner::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 50%, rgba(30,111,255,0.15) 0%, transparent 70%);
}
.page-banner h1{
  font-size: var(--fs-3xl);
  font-weight: 800;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1rem;
  position: relative;
  z-index: 2;
}
.page-banner p{
  color: var(--text-secondary);
  font-size: var(--fs-lg);
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
/* 移动端调整 */
@media (max-width: 768px){
  .page-banner{
    padding: 7rem 0 3rem;
  }
  .page-banner h1{
    font-size: var(--fs-2xl);
  }
  .page-banner p{
    font-size: var(--fs-base);
  }
}