/* ============ 基础变量 ============ */
:root{
  --brand:#7C5CFC;
  --brand-2:#22D3EE;
  --ink:#0F1222;
  --ink-2:#3A3F55;
  --tx:#4B5066;
  --tx-3:#8A90A6;
  --bg:#ffffff;
  --bg-alt:#F6F7FB;
  --bd:#E8EAF2;
  --card:#ffffff;
  --grad:linear-gradient(120deg,#7C5CFC,#22D3EE);
  --shadow:0 18px 50px -22px rgba(40,30,90,.28);
  --shadow-sm:0 8px 24px -16px rgba(40,30,90,.35);
  --radius:18px;
  --max:1160px;
  --fm:'PingFang SC','Microsoft YaHei','Hiragino Sans GB',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--fm);
  color:var(--tx);
  background:var(--bg);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3,h4{color:var(--ink);line-height:1.25;font-weight:750}
.grad-text{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ============ 按钮 ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 20px;border-radius:999px;font-weight:650;font-size:14.5px;
  border:1.5px solid transparent;cursor:pointer;transition:.22s ease;white-space:nowrap;
}
.btn-lg{padding:15px 30px;font-size:16px}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 12px 26px -12px rgba(124,92,252,.7)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(124,92,252,.8)}
.btn-outline{border-color:var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.btn-ghost{color:var(--ink-2)}
.btn-ghost:hover{color:var(--brand)}

/* ============ 导航 ============ */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;transition:.3s;
}
.nav.scrolled{box-shadow:0 6px 24px -18px rgba(0,0,0,.4);border-color:var(--bd)}
.nav-inner{
  max-width:var(--max);margin:0 auto;padding:14px 22px;
  display:flex;align-items:center;gap:22px;
}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;color:var(--ink);font-size:18px}
.brand-mark{display:inline-flex;filter:drop-shadow(0 6px 12px rgba(124,92,252,.35))}
.brand-text{letter-spacing:.5px}
.nav-links{display:flex;gap:6px;margin-left:14px}
.nav-links a{
  padding:8px 13px;border-radius:10px;font-size:14.5px;color:var(--ink-2);font-weight:550;transition:.2s;
}
.nav-links a:hover,.nav-links a.active{color:var(--brand);background:#F2EFFF}
.nav-actions{margin-left:auto;display:flex;gap:10px;align-items:center}

.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto}
.nav-toggle span{width:24px;height:2.4px;background:var(--ink);border-radius:3px;transition:.3s}
.nav-toggle.open span:nth-child(1){transform:translateY(7.4px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7.4px) rotate(-45deg)}

/* ============ Hero ============ */
.hero{position:relative;overflow:hidden;padding:96px 22px 110px;background:
  radial-gradient(1200px 600px at 80% -10%,rgba(34,211,238,.16),transparent 60%),
  radial-gradient(900px 500px at 10% 10%,rgba(124,92,252,.18),transparent 55%),
  #0B0E1C;
}
.hero-orbs{position:absolute;inset:0;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(40px);opacity:.55;animation:float 9s ease-in-out infinite}
.orb-1{width:340px;height:340px;background:#7C5CFC;top:-60px;left:-40px}
.orb-2{width:300px;height:300px;background:#22D3EE;bottom:-80px;right:6%;animation-delay:1.5s}
.orb-3{width:220px;height:220px;background:#F472B6;top:40%;right:32%;opacity:.35;animation-delay:3s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-26px)}}
.hero-inner{position:relative;max-width:880px;margin:0 auto;text-align:center;color:#EAEcff}
.badge-pop{
  display:inline-block;padding:7px 16px;border-radius:999px;font-size:13.5px;font-weight:600;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#C9CBF5;margin-bottom:26px;
}
.hero-title{font-size:clamp(34px,6vw,60px);font-weight:850;color:#fff;letter-spacing:.5px}
.hero-sub{margin:24px auto 0;max-width:640px;font-size:17px;color:#B9BCE0;line-height:1.85}
.hero-sub strong{color:#fff;font-weight:700}
.hero-cta{margin-top:36px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero-trust{margin-top:34px;display:flex;gap:10px 22px;justify-content:center;flex-wrap:wrap;font-size:13.5px;color:#A6A9D6}
.hero-trust span{display:inline-flex;align-items:center;gap:6px}

/* ============ 数据看板 ============ */
.stats{background:var(--ink);padding:46px 22px}
.stats-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.stat{text-align:center;color:#fff}
.stat-num{font-size:clamp(30px,4.5vw,46px);font-weight:850;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-variant-numeric:tabular-nums}
.stat-label{margin-top:6px;color:#A6A9D6;font-size:14.5px}

/* ============ 通用 section ============ */
.section{max-width:var(--max);margin:0 auto;padding:92px 22px}
.section-alt{background:var(--bg-alt);max-width:none}
.section-alt>*{max-width:var(--max);margin-left:auto;margin-right:auto}
.section-head{text-align:center;max-width:680px;margin:0 auto 52px}
.eyebrow{display:inline-block;font-size:13.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--brand);background:#F2EFFF;padding:5px 14px;border-radius:999px;margin-bottom:16px}
.section-head h2{font-size:clamp(26px,3.6vw,38px);margin-bottom:14px}
.section-head p{color:var(--tx-3);font-size:16px}

/* ============ 网格 ============ */
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}

/* ============ 卡片 ============ */
.card{
  background:var(--card);border:1px solid var(--bd);border-radius:var(--radius);
  padding:28px;box-shadow:var(--shadow-sm);transition:.25s ease;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
.feature .ico{
  width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 10px 22px -12px var(--c1);margin-bottom:18px;
}
.feature h3{font-size:19px;margin-bottom:9px}
.feature p{font-size:14.8px;color:var(--tx)}

/* ============ 角色卡 ============ */
.role{display:flex;flex-direction:column}
.role-badge{
  align-self:flex-start;font-weight:800;font-size:15px;color:#fff;padding:7px 16px;border-radius:999px;
  background:var(--c);box-shadow:0 10px 22px -12px var(--c);margin-bottom:16px;
}
.role h3{font-size:20px;margin-bottom:14px}
.tick{list-style:none;display:flex;flex-direction:column;gap:11px}
.tick li{position:relative;padding-left:26px;font-size:14.8px;color:var(--ink-2)}
.tick li::before{content:"";position:absolute;left:0;top:8px;width:16px;height:16px;border-radius:50%;
  background:var(--grad);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat;}

/* ============ 步骤 ============ */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;position:relative}
.steps-4{grid-template-columns:repeat(4,1fr)}
.step{
  background:var(--card);border:1px solid var(--bd);border-radius:var(--radius);padding:26px 20px;text-align:center;
  position:relative;box-shadow:var(--shadow-sm);transition:.25s;
}
.step:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.step-no{
  width:46px;height:46px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;
  font-weight:850;font-size:20px;color:#fff;background:var(--grad);box-shadow:0 12px 24px -12px var(--brand);
}
.step h3{font-size:17.5px;margin-bottom:8px}
.step p{font-size:14px;color:var(--tx-3)}
.center-cta{text-align:center;margin-top:42px}

/* ============ 分成 ============ */
.rule-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.rule-top b{font-size:21px;color:var(--ink)}
.rule-tag{font-size:13px;font-weight:700;color:var(--brand);background:#F2EFFF;padding:4px 12px;border-radius:999px;--c:var(--brand)}
.rule p{font-size:14.8px;color:var(--ink-2)}
.rule-note{
  margin-top:26px;display:flex;align-items:center;gap:10px;justify-content:center;text-align:center;
  background:#F2EFFF;border:1px dashed #C9BCFB;border-radius:14px;padding:16px 22px;font-size:14.5px;color:var(--ink-2);
}

/* ============ 安全 ============ */
.sec h3{font-size:19px;margin-bottom:10px}
.sec p{font-size:14.8px;color:var(--ink-2)}

/* ============ 游戏 ============ */
.games{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.game{
  background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:22px 12px;text-align:center;
  font-weight:650;color:var(--ink-2);font-size:15px;box-shadow:var(--shadow-sm);transition:.22s;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.game:hover{transform:translateY(-4px);border-color:var(--brand);color:var(--brand);box-shadow:var(--shadow)}
.game .game-emoji{font-size:30px;line-height:1}

/* ============ CTA band ============ */
.cta-band{background:
  radial-gradient(800px 400px at 20% 0%,rgba(124,92,252,.35),transparent 60%),
  radial-gradient(700px 400px at 90% 100%,rgba(34,211,238,.3),transparent 60%),
  #0B0E1C;color:#fff;padding:84px 22px;text-align:center}
.cta-inner{max-width:760px;margin:0 auto}
.cta-band h2{color:#fff;font-size:clamp(26px,3.6vw,38px);margin-bottom:14px}
.cta-band p{color:#B9BCE0;font-size:16.5px;margin-bottom:30px}
.cta-band .btn-outline{border-color:#fff;color:#fff}
.cta-band .btn-outline:hover{background:#fff;color:var(--ink)}

/* ============ 页脚 ============ */
.footer{background:#0B0E1C;color:#A6A9D6;padding:64px 22px 30px}
.footer-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:34px}
.footer .brand{color:#fff;margin-bottom:14px}
.footer-desc{font-size:14px;line-height:1.8;max-width:300px}
.footer-col h4{color:#fff;font-size:15px;margin-bottom:16px}
.footer-col a{display:block;font-size:14px;color:#A6A9D6;padding:6px 0;transition:.2s}
.footer-col a:hover{color:#fff}
.footer-bottom{max-width:var(--max);margin:40px auto 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:#7C7FA6}
.footer-links a{margin-left:18px}
.footer-links a:hover{color:#fff}

/* ============ 返回顶部 ============ */
.to-top{
  position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:var(--grad);color:#fff;font-size:20px;box-shadow:0 12px 26px -10px rgba(124,92,252,.8);
  opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;transition:.3s;z-index:90;
}
.to-top.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}

/* ============ 滚动揭示 ============ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ============ 响应式 ============ */
@media (max-width:980px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .steps,.steps-4{grid-template-columns:repeat(2,1fr)}
  .games{grid-template-columns:repeat(4,1fr)}
  .footer-inner{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .nav-links{
    position:fixed;top:64px;left:0;right:0;background:#fff;flex-direction:column;gap:0;
    padding:10px 16px 20px;border-bottom:1px solid var(--bd);box-shadow:var(--shadow);
    transform:translateY(-130%);transition:.32s ease;margin-left:0;
  }
  .nav-links.open{transform:translateY(0)}
  .nav-links a{padding:13px 8px;border-radius:8px}
  .nav-actions{display:none}
  .nav-toggle{display:flex}
  .stats-inner{grid-template-columns:repeat(2,1fr);gap:30px 16px}
  .section{padding:68px 18px}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .steps,.steps-4{grid-template-columns:1fr}
  .games{grid-template-columns:repeat(3,1fr)}
  .footer-inner{grid-template-columns:1fr;gap:26px}
  .hero{padding:72px 18px 86px}
}
@media (max-width:420px){
  .games{grid-template-columns:repeat(2,1fr)}
}