:root{
  /* 底色改为深蓝墨色，比纯黑 #09090a 更柔和、更有层次 */
  --bg:#0b1122;
  --bg-2:#0a0e1c;
  --card:rgba(255,255,255,.052);
  --card-hi:rgba(255,255,255,.088);
  --line:rgba(255,255,255,.10);
  --line-hi:rgba(255,255,255,.17);
  --txt:#eef2fb;
  --txt-2:rgba(238,242,251,.68);
  --txt-3:rgba(238,242,251,.46);
  --txt-4:rgba(253, 28, 28, 0.46);
  --blue:#3485ff;
  --grad:linear-gradient(180deg,#3485ff,#00a3ff);
  --grad-hover:linear-gradient(180deg,#256be6,#138beb);
  --glow:rgba(52,133,255,.35);
  --r:18px;
  --ease:cubic-bezier(.16,1,.3,1);
  --shell:1200px;
  --pad:24px;
  --nav:68px;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:dark;}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* 全局环境光：多层柔和径向渐变，避免大面积纯黑发闷 */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1000px 680px at 8% -10%,rgba(52,133,255,.20),transparent 64%),
    radial-gradient(860px 620px at 96% 2%,rgba(0,190,255,.14),transparent 62%),
    radial-gradient(720px 560px at 50% 46%,rgba(80,110,255,.10),transparent 68%),
    radial-gradient(940px 720px at 50% 110%,rgba(122,70,255,.14),transparent 64%),
    linear-gradient(180deg,#0c1428 0%,#0a1020 40%,#090d1b 100%);
}
/* 极淡暗角，增加景深 */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 130% 90% at 50% 42%,transparent 46%,rgba(4,6,14,.42) 100%);
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
h1,h2,h3,p{margin:0;}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px;}



/* ---------- button ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:50px;padding:0 28px;border-radius:999px;
  font-size:15px;font-weight:600;white-space:nowrap;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease);
}
.btn svg{width:17px;height:17px;flex:none;}
.btn-main{
  background:var(--grad);color:#fff;
  box-shadow:0 12px 28px -10px var(--glow),inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-main:hover{background:var(--grad-hover);transform:translateY(-2px);box-shadow:0 18px 34px -12px var(--glow);}
.btn-line{background:var(--card);border:1px solid var(--line-hi);color:var(--txt);}
.btn-line:hover{background:var(--card-hi);border-color:rgba(52,133,255,.5);transform:translateY(-2px);}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;height:var(--nav);
  display:flex;align-items:center;
  background:rgba(11,17,34,.55);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.nav.is-stuck{background:rgba(10,15,30,.86);border-bottom-color:var(--line);}
.nav-bd{display:flex;align-items:center;gap:32px;width:100%;max-width:var(--shell);margin:0 auto;padding:0 var(--pad);}
.logo{display:flex;align-items:center;gap:10px;flex:none;}
.logo b{font-size:17.5px;font-weight:800;letter-spacing:-.2px;white-space:nowrap;}
.nav-menu{display:flex;align-items:center;gap:28px;flex:1;font-size:14.5px;color:var(--txt-2);}
.nav-menu a{transition:color .25s var(--ease);}
.nav-menu a:hover{color:var(--txt);}
.nav-act{display:flex;align-items:center;gap:12px;flex:none;margin-left:auto;}
.nav-act .btn{height:42px;padding:0 22px;font-size:14px;}

/* ---------- banner ---------- */
.banner{position:relative;overflow:hidden;padding:calc(var(--nav) + 96px) 0 96px;}
.bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.bg i{position:absolute;border-radius:50%;filter:blur(100px);}
.bg i:nth-child(1){width:600px;height:600px;background:#1f4dff;opacity:.16;top:-300px;left:-160px;}
.bg i:nth-child(2){width:540px;height:540px;background:#00b7ff;opacity:.13;top:-180px;right:-180px;}
.bg::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(ellipse 70% 55% at 50% 35%,#000,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 35%,#000,transparent 75%);
}
.banner-in{position:relative;z-index:2;display:flex;align-items:center;gap:60px;flex-wrap:wrap;width:100%;max-width:var(--shell);margin:0 auto;}
.banner-copy{flex:1 1 460px;min-width:0;display:flex;flex-direction:column;gap:24px;}
.badge{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  height:34px;padding:0 16px;border-radius:999px;
  background:var(--card);border:1px solid var(--line-hi);
  font-size:13px;color:var(--txt-2);
}
.badge em{width:6px;height:6px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 4px rgba(61,220,132,.16);}
.badge b{color:var(--txt);font-weight:600;}
.banner h1{font-size:clamp(40px,7vw,76px);line-height:1.05;font-weight:900;letter-spacing:-2.4px;}
.banner h1 em{
  font-style:normal;
  background:linear-gradient(100deg,#9ccbff,#3485ff 45%,#00e0ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.banner-sub{font-size:clamp(15px,1.6vw,17px);color:var(--txt-2);max-width:460px;}
.banner-dl{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px;}

.banner-art{flex:1 1 360px;min-width:0;display:flex;justify-content:center;}
.screen{
  width:min(100%,420px);border-radius:22px;overflow:hidden;
  background:linear-gradient(160deg,#26304a,#121727 62%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 46px 90px -34px rgba(0,0,0,.95),0 0 90px -24px var(--glow);
  transform:perspective(1300px) rotateY(-10deg) rotateX(4deg);
  transition:transform .8s var(--ease);
}
.screen:hover{transform:perspective(1300px) rotateY(-3deg) rotateX(1deg);}
.screen-bar{display:flex;align-items:center;gap:8px;height:40px;padding:0 15px;background:rgba(255,255,255,.055);border-bottom:1px solid rgba(255,255,255,.08);}
.screen-bar i{width:9px;height:9px;border-radius:50%;}
.screen-bar i:nth-child(1){background:#ff5f57;}
.screen-bar i:nth-child(2){background:#febc2e;}
.screen-bar i:nth-child(3){background:#28c840;}
.screen-bar em{flex:1;text-align:center;font-style:normal;font-size:11.5px;color:var(--txt-3);}
.screen-body{
  aspect-ratio:16/10;padding:18px;display:flex;flex-direction:column;gap:14px;
  background:radial-gradient(120% 90% at 50% 0%,#1e2a47,#0d1424 72%);
}
.screen-top{display:flex;align-items:center;justify-content:space-between;}
.screen-top span{font-size:11.5px;color:var(--txt-3);letter-spacing:.14em;text-transform:uppercase;}
.screen-top b{font-size:11px;font-weight:700;color:#0a0a0a;background:#3ddc84;padding:3px 10px;border-radius:999px;}
.apps{flex:1;display:flex;flex-wrap:wrap;align-content:flex-start;gap:13px;}
.apps i{
  width:calc((100% - 55px)/5);aspect-ratio:1;border-radius:15px;
  font-style:normal;font-size:14px;font-weight:600;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.3);
}
.apps i:nth-child(1){background:linear-gradient(140deg,#ffffff,#ffffff);}
.apps i:nth-child(2){background:linear-gradient(140deg,#ffffff‌,#ffffff‌);}
.apps i:nth-child(3){background:linear-gradient(140deg,#ffffff‌,#ffffff‌);}
.apps i:nth-child(4){background:linear-gradient(140deg,#ffffff,#ffffff);}
.apps i:nth-child(5){background:linear-gradient(140deg,#ffffff,#ffffff);}
.apps i:nth-child(6){background:linear-gradient(140deg,#ffffff,#ffffff);}
.apps i:nth-child(7){background:linear-gradient(140deg,#ffffff,#ffffff);}
.apps i:nth-child(8){background:linear-gradient(140deg,#ffffff,#ffffff);}
.apps i:nth-child(9){background:linear-gradient(140deg,#ffffff,#ffffff);}
.apps i:nth-child(10){background:rgba(255,255,255,.1);color:var(--txt-3);}
/* ----------
.apps i:nth-child(1){background:linear-gradient(140deg,#ff8a3d,#ff4d4d);}
.apps i:nth-child(2){background:linear-gradient(140deg,#5b8cff,#2d3dff);}
.apps i:nth-child(3){background:linear-gradient(140deg,#37d67a,#0f9d58);}
.apps i:nth-child(4){background:linear-gradient(140deg,#b06bff,#6a2dff);}
.apps i:nth-child(5){background:linear-gradient(140deg,#ffb64d,#ff7a00);}
.apps i:nth-child(6){background:linear-gradient(140deg,#4dd6ff,#0089c9);}
.apps i:nth-child(7){background:linear-gradient(140deg,#ff6ba9,#d61f6f);}
.apps i:nth-child(8){background:linear-gradient(140deg,#8d9bff,#4550c9);}
.apps i:nth-child(9){background:linear-gradient(140deg,#6be0c2,#159c7a);}
.apps i:nth-child(10){background:rgba(255,255,255,.1);color:var(--txt-3);}
---------- */
/* ---------- section ---------- */
.sec{padding:100px 0;width:100%;max-width:var(--shell);margin:0 auto;}
.sec--tint{background:linear-gradient(180deg,transparent,rgba(255,255,255,.024) 25%,rgba(255,255,255,.024) 75%,transparent);}
.head{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;margin-bottom:52px;}
.head h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.6px;line-height:1.25;}
.head p{color:var(--txt-3);font-size:15px;}

/* ---------- features ---------- */
.feats{display:flex;flex-wrap:wrap;gap:18px;}
.feats-item{
  flex:1 1 185px;min-width:0;
  display:flex;flex-direction:column;gap:14px;align-items:flex-start;
  padding:18px 16px;border-radius:var(--r);
  background:var(--card);border:1px solid var(--line);
  transition:.32s var(--ease);
}
.feats-item:hover{background:var(--card-hi);border-color:rgba(52,133,255,.45);transform:translateY(-5px);box-shadow:0 26px 48px -28px var(--glow);}
.feats-item h3{font-size:17px;font-weight:700;letter-spacing:-.2px;}
.feats-item em{font-style: normal;border: 1px solid var(--txt-3);padding: 2px 4px;border-radius: 3px;font-size: 12px;color:var(--txt-3)}
.feats-item p{font-size:14px;color:var(--txt-3);line-height:1.7;}

/* ---------- games ---------- */
.games{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;}
.game{width:78px;display:flex;flex-direction:column;align-items:center;gap:9px;transition:.3s var(--ease);}
.game i{
  width:78px;height:78px;border-radius:21px;
  display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:28px;font-weight:900;color:#fff;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.3),0 12px 24px -14px rgba(0,0,0,.9);
  transition:.3s var(--ease);
}
.game span{font-size:12px;color:var(--txt-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;transition:color .3s;}
.game:hover i{transform:translateY(-6px) scale(1.05);}
.game:hover span{color:var(--txt);}
.more{display:flex;justify-content:center;margin-top:46px;}
.more a{
  display:inline-flex;align-items:center;gap:8px;
  font-size:15px;font-weight:600;color:var(--blue);
  padding:12px 24px;border-radius:999px;border:1px solid var(--line-hi);
  transition:.28s var(--ease);
}
.more a:hover{background:var(--card-hi);color:#8ec2ff;border-color:rgba(52,133,255,.5);}
.more a svg{width:16px;height:16px;}

/* ---------- faq ---------- */
.faq{display:flex;flex-direction:column;gap:12px;max-width:860px;margin:0 auto;}
.item{
  border-radius:var(--r);background:var(--card);border:1px solid var(--line);
  overflow:hidden;transition:border-color .3s var(--ease),background .3s var(--ease);
}
.item.is-open{background:var(--card-hi);border-color:rgba(52,133,255,.42);}
.item-hd{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  width:100%;padding:22px 26px;text-align:left;
  font-size:16px;font-weight:600;
}
.item-hd:hover{color:#8ec2ff;}
.item-ic{
  width:26px;height:26px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--card-hi);border:1px solid var(--line);color:var(--txt-2);
  transition:.35s var(--ease);
}
.item-ic svg{width:13px;height:13px;}
.item.is-open .item-ic{background:var(--grad);border-color:transparent;color:#fff;transform:rotate(180deg);}
.item-bd{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--ease);}
.item.is-open .item-bd{grid-template-rows:1fr;}
.item-bd>div{overflow:hidden;}
.item-bd p{padding:0 26px 24px;font-size:14px;color:var(--txt-2);line-height:1.85;}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);margin-top:20px;font-size:14px;color:var(--txt-3);text-align: center;padding: 40PX 0;}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.is-in{opacity:1;transform:none;}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  :root{--pad:20px;}
  .nav-menu{display:none;}
  .nav-act .btn{height:38px;padding:0 18px;font-size:13.5px;}
  .sec{padding:76px 0;}
  .banner{padding:calc(var(--nav) + 56px) 0 72px;}
  .banner-in{gap:44px;}
  .screen{transform:none;}
  .feats-item{flex:1 1 calc((100% - 18px)/2);}
}
@media (max-width:768px){
  :root{--pad:16px;--nav:60px;}
  .sec{padding:60px 15px;}
  .head{margin-bottom:36px;}
  .banner{padding:calc(var(--nav) + 40px) 0 56px;}
  .banner-copy{gap:20px;flex:1 1 100%;align-items:center;text-align:center;padding: 0 15px}
  .badge{align-self:center;}
  .banner h1{letter-spacing:-1.2px;}
  .banner-sub{max-width:none;}
  .banner-art{flex:1 1 100%;padding: 0 15px}
  .banner-dl{gap:10px;justify-content:center;width:100%;}
  .banner-dl .btn{flex:1 1 100%;}
  .feats-item{flex:1 1 100%;padding:22px;gap:12px;}
  .games{gap:16px;}
  .game,.game i{width:64px;}
  .game i{height:64px;border-radius:18px;font-size:23px;}
  .game span{font-size:11px;}
  .item-hd{padding:18px 20px;font-size:15px;}
  .item-bd p{padding:0 20px 20px;}

}
@media (max-width:540px){
  .banner h1{font-size:38px;}
  .badge{font-size:12px;height:30px;padding:0 13px;}
  .game,.game i{width:56px;}
  .game i{height:56px;border-radius:16px;font-size:20px;}
  .game span{display:none;}

}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;}
  html{scroll-behavior:auto;}
}