:root{
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --blue:#22e6ff;
  --purple:#ba4dff;
  --gold:#ffe66d;
  --deep:#020519;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--deep);color:#fff;font-family:"Microsoft YaHei",Arial,sans-serif}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.page{position:relative;min-height:100dvh;overflow:hidden;padding:34px clamp(18px,4vw,60px);display:grid;grid-template-columns:minmax(310px,1.02fr) minmax(330px,.98fr);grid-template-areas:"hero card" "games games" "security security";align-items:center;gap:22px;isolation:isolate}
.bg{position:fixed;inset:0;z-index:-4;overflow:hidden;background:#020519}
.bg img{width:100%;height:100%;object-fit:cover;filter:blur(18px) brightness(.32) saturate(1.25);transform:scale(1.08)}
.bg::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 35% 22%,rgba(35,231,255,.24),transparent 35%),radial-gradient(circle at 72% 20%,rgba(191,58,255,.28),transparent 34%),linear-gradient(180deg,rgba(2,5,25,.34),rgba(2,5,25,.86) 78%,rgba(2,5,25,.96));}
.glow{position:fixed;z-index:-3;border-radius:999px;filter:blur(8px);opacity:.55;pointer-events:none}
.glow-a{width:360px;height:360px;left:-120px;top:10vh;background:radial-gradient(circle,rgba(28,224,255,.28),transparent 65%)}
.glow-b{width:420px;height:420px;right:-150px;top:8vh;background:radial-gradient(circle,rgba(198,64,255,.25),transparent 66%)}
.particles{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.particles i{position:absolute;border-radius:2px;filter:drop-shadow(0 0 6px rgba(255,255,255,.82));animation:fall linear infinite}
.hero{grid-area:hero;position:relative;z-index:1;min-width:0;padding:24px 0 10px}
.brand-row{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.brand-logo{width:92px;height:70px;object-fit:contain;filter:drop-shadow(0 0 16px rgba(34,230,255,.72))}
.brand-text b{display:block;font-size:30px;line-height:1;font-weight:1000;letter-spacing:.06em;text-shadow:0 0 18px rgba(34,230,255,.76)}
.brand-text span{display:block;margin-top:7px;font-size:12px;letter-spacing:.22em;color:#aeefff}
.eyebrow{display:inline-block;margin:0 0 12px;padding:7px 13px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.08);color:#d8f9ff;font-size:14px;letter-spacing:.16em;box-shadow:inset 0 0 18px rgba(255,255,255,.05)}
h1{margin:0;font-size:clamp(54px,7vw,96px);line-height:.98;font-weight:1000;letter-spacing:.02em;text-shadow:0 6px 0 rgba(0,0,0,.22),0 0 24px rgba(53,223,255,.45)}
h1 span{background:linear-gradient(180deg,#fff 0%,#a6f6ff 42%,#ffe66d 88%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.subtitle{margin:18px 0 0;color:#d7eaff;font-size:clamp(15px,1.4vw,20px);letter-spacing:.08em}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 26px}
.badges span{padding:9px 12px;border-radius:999px;background:linear-gradient(145deg,rgba(34,230,255,.17),rgba(186,77,255,.12));border:1px solid rgba(255,255,255,.16);font-size:14px;color:#ecfbff;box-shadow:inset 0 0 16px rgba(255,255,255,.04)}
.main-cta{position:relative;display:inline-flex;align-items:center;justify-content:center;width:min(285px,100%);height:66px;border-radius:999px;font-size:26px;font-weight:1000;letter-spacing:.08em;background:linear-gradient(90deg,#12d9ff 0%,#3054ff 45%,#ff3ee8 100%);box-shadow:0 0 0 1px rgba(255,255,255,.18),0 0 26px rgba(34,230,255,.45),0 16px 38px rgba(0,0,0,.28);overflow:hidden;animation:ctaPulse 2.8s ease-in-out infinite}
.main-cta::after{content:"›";margin-left:14px;font-size:42px;line-height:1}
.main-cta::before{content:"";position:absolute;top:-70%;left:-36%;width:23%;height:240%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);transform:rotate(20deg);animation:sweep 5.2s linear infinite}
.platform-card{grid-area:card;position:relative;z-index:1;justify-self:center;width:min(610px,100%);min-height:360px;border-radius:32px;padding:26px;overflow:hidden;background:linear-gradient(145deg,rgba(30,224,255,.18),rgba(126,51,255,.14) 48%,rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.22);box-shadow:0 24px 70px rgba(0,0,0,.34),0 0 45px rgba(34,230,255,.22),inset 0 0 38px rgba(255,255,255,.06);display:grid;grid-template-columns:210px 1fr;align-items:center;gap:24px;animation:cardBreath 4.6s ease-in-out infinite}
.platform-card::before{content:"";position:absolute;inset:10px;border-radius:26px;border:1px solid rgba(255,255,255,.12);pointer-events:none}
.platform-card::after{content:"";position:absolute;right:-80px;top:-80px;width:230px;height:230px;border-radius:999px;background:radial-gradient(circle,rgba(255,230,109,.22),transparent 70%);pointer-events:none}
.shine{position:absolute;top:-60%;left:-40%;width:25%;height:220%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);transform:rotate(20deg);animation:sweep 6.2s linear infinite;pointer-events:none}
.card-logo-wrap{position:relative;display:grid;place-items:center;height:230px;border-radius:28px;background:radial-gradient(circle,rgba(34,230,255,.32),rgba(10,48,130,.16) 54%,rgba(255,255,255,.05));box-shadow:inset 0 0 28px rgba(255,255,255,.09),0 0 35px rgba(34,230,255,.18)}
.card-logo-wrap img{width:196px;max-height:162px;object-fit:contain;filter:drop-shadow(0 0 18px rgba(34,230,255,.8))}
.card-copy{min-width:0}
.card-copy p{margin:0 0 8px;color:#8ef4ff;font-size:15px;letter-spacing:.20em;text-transform:uppercase}
.card-copy h2{margin:0;font-size:clamp(42px,5vw,66px);line-height:1;font-weight:1000;text-shadow:0 0 20px rgba(34,230,255,.62)}
.card-copy span{display:block;margin-top:12px;color:#e5f2ff;font-size:17px;line-height:1.65}
.card-btn{grid-column:1/-1;display:flex;align-items:center;justify-content:center;height:58px;border-radius:999px;background:linear-gradient(90deg,#20e6ff,#b94cff);font-size:22px;font-weight:1000;letter-spacing:.10em;box-shadow:0 0 18px rgba(34,230,255,.35)}
.games{grid-area:games;position:relative;z-index:1;margin-top:4px}.games h3{margin:0 0 14px;text-align:center;font-size:30px;letter-spacing:.12em;background:linear-gradient(180deg,#fff,#93f5ff 54%,#ffe66d);-webkit-background-clip:text;background-clip:text;color:transparent}.game-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.game-grid a{min-height:112px;border-radius:20px;background:linear-gradient(145deg,rgba(34,230,255,.13),rgba(186,77,255,.10));border:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:30px;box-shadow:inset 0 0 18px rgba(255,255,255,.05),0 10px 24px rgba(0,0,0,.18);transition:.18s ease}.game-grid a:hover{transform:translateY(-4px);box-shadow:0 0 18px rgba(34,230,255,.22),0 12px 28px rgba(0,0,0,.25)}.game-grid b{margin-top:7px;font-size:16px}.game-grid small{margin-top:5px;color:#bcd6ff;font-size:11px;white-space:nowrap}
.security{grid-area:security;position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.security div{min-height:70px;border-radius:18px;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:inset 0 0 16px rgba(255,255,255,.04)}.security b{font-size:17px}.security span{font-size:12px;color:#bdd7ff}
@media (max-width:1020px){.page{grid-template-columns:1fr;grid-template-areas:"hero" "card" "games" "security";padding:calc(var(--safe-top) + 18px) clamp(13px,4vw,28px) calc(var(--safe-bottom) + 18px);align-items:start}.hero{text-align:center;padding-top:0}.brand-row{justify-content:center}.badges{justify-content:center}.platform-card{min-height:0}.game-grid{grid-template-columns:repeat(3,1fr)}.security{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.page{gap:16px}.brand-row{gap:10px;margin-bottom:14px}.brand-logo{width:74px;height:58px}.brand-text b{font-size:24px}.headline h1{font-size:50px}.subtitle{font-size:14px}.badges{gap:8px;margin:18px 0 20px}.badges span{font-size:12px;padding:8px 10px}.main-cta{height:56px;font-size:21px;width:min(260px,100%)}.platform-card{border-radius:24px;padding:16px;grid-template-columns:112px 1fr;gap:12px}.platform-card::before{border-radius:19px;inset:7px}.card-logo-wrap{height:130px;border-radius:20px}.card-logo-wrap img{width:112px;max-height:98px}.card-copy p{font-size:12px;letter-spacing:.16em}.card-copy h2{font-size:34px}.card-copy span{font-size:13px;line-height:1.45}.card-btn{height:50px;font-size:18px}.games h3{font-size:24px;margin-bottom:10px}.game-grid{grid-template-columns:repeat(2,1fr);gap:10px}.game-grid a{min-height:90px;border-radius:17px;font-size:26px}.game-grid b{font-size:14px}.game-grid small{font-size:10px}.security{gap:10px}.security div{min-height:58px;border-radius:15px;flex-direction:column;gap:3px}.security b{font-size:13px}.security span{display:none}}
@media (max-width:370px){.headline h1{font-size:44px}.platform-card{grid-template-columns:96px 1fr}.card-logo-wrap{height:112px}.card-logo-wrap img{width:96px}.card-copy h2{font-size:30px}.card-copy span{font-size:12px}}
@keyframes fall{0%{transform:translate3d(0,-12vh,0) rotate(0deg);opacity:0}12%{opacity:.82}100%{transform:translate3d(var(--dx),105vh,0) rotate(360deg);opacity:0}}
@keyframes sweep{0%{transform:translateX(-170%) rotate(20deg);opacity:0}8%{opacity:.8}24%,100%{transform:translateX(480%) rotate(20deg);opacity:0}}
@keyframes ctaPulse{0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.18),0 0 26px rgba(34,230,255,.45),0 16px 38px rgba(0,0,0,.28)}50%{box-shadow:0 0 0 1px rgba(255,255,255,.24),0 0 38px rgba(34,230,255,.68),0 0 42px rgba(255,62,232,.30),0 16px 38px rgba(0,0,0,.30)}}
@keyframes cardBreath{0%,100%{filter:brightness(1)}50%{filter:brightness(1.045)}}