:root{
    --blue:#2E9BE6;
    --blue-deep:#1B62D6;
    --navy:#08182F;
    --navy-2:#0E2A52;
    --cyan:#5CF5D0;
    --orange:#FF9F43;
    --ink:#121C2B;
    --gray:#5B6B7E;
    --line:#E6EDF5;
    --bg:#FFFFFF;
    --soft:#F4F8FD;
    --r:20px;
    --shadow:0 10px 30px rgba(13,40,80,.08);
    --shadow-lg:0 30px 70px rgba(13,40,80,.16);
    --max:1200px;
  }

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

body{font-family:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
    color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}

a{text-decoration:none;color:inherit}

img{display:block;max-width:100%}

section{scroll-margin-top:92px}

.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 32px}

/* ---------- 按钮 ---------- */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
    padding:16px 34px;border-radius:999px;font-weight:800;font-size:16.5px;letter-spacing:.5px;
    transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s,background .25s,border-color .25s;
    cursor:pointer;border:1.5px solid transparent;white-space:nowrap}

.btn-primary{background:linear-gradient(135deg,#3AA6F0,#1B62D6);color:#fff;
    box-shadow:0 12px 26px rgba(27,98,214,.34)}

.btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(27,98,214,.42)}

.btn-orange{background:linear-gradient(135deg,#FFB463,#F08A1E);color:#fff;
    box-shadow:0 12px 26px rgba(240,138,30,.34)}

.btn-orange:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(240,138,30,.44)}

.btn-light{background:#fff;color:var(--blue-deep);box-shadow:0 12px 26px rgba(4,14,32,.22)}

.btn-light:hover{transform:translateY(-3px)}

.btn-ghost{background:#fff;color:var(--blue-deep);border-color:var(--line)}

.btn-ghost:hover{border-color:var(--blue);transform:translateY(-3px)}

/* ---------- 导航 ---------- */
  header.nav{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.88);
    backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
    border-bottom:1px solid var(--line);box-shadow:0 4px 20px rgba(13,40,80,.06);
    transition:border-color .3s,box-shadow .3s,background .3s}

header.nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(46,155,230,.55),rgba(27,98,214,.55),transparent);opacity:.5}

header.nav.scrolled{border-bottom-color:var(--line);box-shadow:0 10px 32px rgba(13,40,80,.12);
    background:rgba(255,255,255,.96)}

.nav-inner{display:flex;align-items:center;justify-content:space-between;height:86px;gap:24px}

.brand .logo{height:62px;width:auto;transition:transform .3s}

.brand:hover .logo{transform:scale(1.04)}

.nav-links{position:relative;display:flex;gap:34px;list-style:none}

.nav-links a{position:relative;font-size:15.5px;font-weight:700;letter-spacing:.6px;color:#3A4C63;
    padding:8px 2px;transition:color .25s}

.nav-links a:hover,.nav-links a.active{color:var(--blue-deep)}

.nav-indicator{position:absolute;bottom:-2px;left:0;height:3px;width:0;border-radius:3px;
    background:linear-gradient(90deg,var(--blue),var(--blue-deep));opacity:0;pointer-events:none;
    transition:transform .32s cubic-bezier(.4,0,.2,1),width .32s cubic-bezier(.4,0,.2,1),opacity .25s}

/* 导航中间竖分割线 */
  .nav-sep{position:relative;width:1px;height:28px;flex:none;margin:0 6px;
    background:linear-gradient(180deg,transparent,var(--line) 20%,var(--line) 80%,transparent)}

.nav-sep::after{content:"";position:absolute;top:50%;left:-2px;width:5px;height:5px;margin-top:-2.5px;
    border-radius:50%;background:#D7E3F0}

.nav-cta{display:flex;align-items:center;gap:16px}

.nav-toggle{display:none;background:none;border:1.5px solid var(--line);border-radius:12px;
    width:44px;height:44px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}

.nav-toggle span{display:block;width:19px;height:2px;background:#33425a;border-radius:2px;transition:.25s}

.nav-toggle.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}

.nav-toggle.on span:nth-child(2){opacity:0}

.nav-toggle.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- HERO ---------- */
  .hero{position:relative;isolation:isolate;overflow:hidden;text-align:center;color:#fff;
    background:linear-gradient(168deg,#040B18 0%,#0A1E3E 46%,#123B72 100%);
    padding:54px 0 80px}

.hero .aurora{position:absolute;inset:0;z-index:0;pointer-events:none}

.hero .aurora i{position:absolute;display:block;border-radius:50%;filter:blur(70px);opacity:.55}

.hero .aurora i:nth-child(1){width:620px;height:620px;left:-8%;top:-18%;
    background:radial-gradient(circle,#2E9BE6,transparent 68%);animation:float1 16s ease-in-out infinite}

.hero .aurora i:nth-child(2){width:520px;height:520px;right:-6%;top:6%;
    background:radial-gradient(circle,#5CF5D0,transparent 70%);opacity:.28;animation:float2 20s ease-in-out infinite}

.hero .aurora i:nth-child(3){width:560px;height:560px;left:34%;bottom:-32%;
    background:radial-gradient(circle,#FF9F43,transparent 70%);opacity:.22;animation:float1 24s ease-in-out infinite reverse}

@keyframes float1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(60px,40px,0) scale(1.12)}}

@keyframes float2{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-70px,50px,0) scale(1.1)}}

.hero .grid-bg{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
    background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
    background-size:72px 72px;
    -webkit-mask-image:radial-gradient(75% 62% at 50% 42%,#000 0%,transparent 100%);
    mask-image:radial-gradient(75% 62% at 50% 42%,#000 0%,transparent 100%)}

.hero .container{position:relative;z-index:3}

.hero-card{position:relative;max-width:920px;margin:0 auto;padding:50px 58px 46px;border-radius:32px;
    background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
    border:1px solid rgba(255,255,255,.20);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    box-shadow:0 40px 90px rgba(2,8,20,.5),inset 0 1px 0 rgba(255,255,255,.3)}

.hero-card::before{content:"";position:absolute;top:0;left:24%;right:24%;height:3px;border-radius:0 0 99px 99px;
    background:linear-gradient(90deg,transparent,#5CF5D0,#2E9BE6,transparent);opacity:.95}

.hero-top{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;margin-bottom:26px}

.chip{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:800;letter-spacing:.4px;
    padding:9px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.22);
    background:rgba(255,255,255,.07);color:#DDEAF9;backdrop-filter:blur(6px)}

.chip b{width:8px;height:8px;border-radius:50%;background:#5CF5D0;box-shadow:0 0 0 4px rgba(92,245,208,.22)}

.chip.hot{color:#FFE1BB;border-color:rgba(255,159,67,.45);background:rgba(255,159,67,.14);
    box-shadow:0 8px 20px rgba(255,159,67,.18);animation:pulse 2.6s ease-in-out infinite}

@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}

.hero h1{font-size:clamp(38px,5.6vw,66px);line-height:1.12;font-weight:900;letter-spacing:2px;color:#fff}

.hero h1 .hl{background:linear-gradient(115deg,#7FE3FF 0%,#5CF5D0 45%,#8FD3FF 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent}

.hero-rule{width:120px;height:3px;margin:26px auto 0;border-radius:99px;
    background:linear-gradient(90deg,transparent,#5CF5D0,#2E9BE6,transparent);opacity:.85}

.hero .slogan{font-size:clamp(17px,2.1vw,22px);color:#D3E4F7;font-weight:700;letter-spacing:.8px;margin-top:24px}

.hero .desc{font-size:16px;color:#A9C2DE;margin:14px auto 0;max-width:38em;line-height:1.9}

.hero-cta{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:38px}

.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:52px auto 0;max-width:640px;
    border:1px solid rgba(255,255,255,.14);border-radius:20px;background:rgba(255,255,255,.05);
    backdrop-filter:blur(10px);overflow:hidden}

.hero-stats div{padding:24px 12px;border-right:1px solid rgba(255,255,255,.10)}

.hero-stats div:last-child{border-right:none}

.hero-stats div b{display:block;font-size:34px;font-weight:900;line-height:1.1;
    background:linear-gradient(120deg,#fff,#9FD9FF);-webkit-background-clip:text;background-clip:text;color:transparent}

.hero-stats div span{display:block;font-size:13.5px;color:#9FB8D2;margin-top:6px;letter-spacing:.5px}

/* ---------- 通用区块 ---------- */
  section.block{padding:96px 0}

.head{text-align:center;max-width:44em;margin:0 auto 56px}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:900;letter-spacing:3px;
    color:var(--blue-deep);background:rgba(46,155,230,.10);border:1px solid rgba(46,155,230,.22);
    padding:7px 16px;border-radius:999px;text-transform:uppercase}

.head h2{font-size:clamp(26px,3.4vw,38px);font-weight:900;color:var(--navy-2);letter-spacing:1.5px;margin-top:18px}

.head p{color:#55677D;margin-top:14px;font-size:16.5px;line-height:1.9}

/* 鼠标跟随光斑 */
  .spot{position:relative;overflow:hidden}

.spot>.spotlight{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;z-index:0;
    background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(46,155,230,.13),transparent 66%)}

.spot:hover>.spotlight{opacity:1}

.spot>*{position:relative;z-index:1}

/* ---------- 两种模式 ---------- */
  #modes{background:var(--bg)}

.mode-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:34px}

.mode{position:relative;display:flex;flex-direction:column;border-radius:26px;padding:0;overflow:hidden;background:#fff;
    border:1px solid var(--line);box-shadow:var(--shadow);
    transition:translate .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s,border-color .35s}

.mode .bar{height:6px;width:100%;flex:none}

.mode.web .bar{background:linear-gradient(90deg,#3AA6F0,#1B62D6)}

.mode.app .bar{background:linear-gradient(90deg,#FFB463,#F08A1E)}

.mode .body{flex:1;display:flex;flex-direction:column;padding:0 40px 38px}

.mode .watermark{position:absolute;right:22px;bottom:-18px;font-size:132px;font-weight:900;font-style:italic;
    line-height:1;letter-spacing:-5px;opacity:.05;pointer-events:none}

.mode.web .watermark{color:#1B62D6}

.mode.app .watermark{color:#F08A1E}

.mode:hover{translate:0 -10px;box-shadow:var(--shadow-lg)}

.mode.web:hover{border-color:rgba(46,155,230,.55)}

.mode.app:hover{border-color:rgba(255,159,67,.55)}

.mode .num{width:44px;height:44px;border-radius:13px;flex:none;margin-left:auto;
    display:grid;place-items:center;font-size:18px;font-weight:900;color:#fff;font-style:italic}

.mode.web .num{background:linear-gradient(150deg,#3AA6F0,#1657C4);box-shadow:0 10px 22px rgba(22,87,196,.34)}

.mode.app .num{background:linear-gradient(150deg,#FFBA66,#F08A1E);box-shadow:0 10px 22px rgba(240,138,30,.34)}

/* 设备预览区 */
  .prev{position:relative;height:420px;margin:26px 0 0;border-radius:20px;overflow:hidden;
    display:flex;align-items:center;justify-content:center}

.mode.web .prev{background:linear-gradient(165deg,#F4F9FF,#E1EDFB)}

.mode.app .prev{background:linear-gradient(165deg,#FFF8F0,#FBE7D2)}

.prev::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(180px 70px at 50% 118%,rgba(255,255,255,.85),transparent 72%)}

/* 网页端：浏览器窗口 */
  .win{position:relative;width:calc(100% - 24px);max-width:404px;border-radius:14px;overflow:hidden;
    background:#0A1B33;border:1px solid rgba(255,255,255,.12);
    box-shadow:0 20px 44px rgba(10,27,51,.30);
    transform:translateY(12px) scale(.96);transition:transform .55s cubic-bezier(.2,.7,.3,1)}

.mode.web:hover .win{transform:translateY(0) scale(1)}

.win-top{display:flex;align-items:center;gap:7px;padding:10px 12px;
    background:#12294A;border-bottom:1px solid rgba(255,255,255,.08)}

.win-top i{width:9px;height:9px;border-radius:50%;flex:none}

.win-top i:nth-child(1){background:#FF5F57}

.win-top i:nth-child(2){background:#FEBC2E}

.win-top i:nth-child(3){background:#28C840}

.win-top em{flex:1;text-align:center;font-style:normal;font-size:11px;letter-spacing:.6px;color:#87A8CC;
    background:rgba(255,255,255,.07);border-radius:6px;padding:3px 8px;margin-left:8px}

.win-stage{position:relative;height:290px;overflow:hidden;
    background:linear-gradient(180deg,#08172C,#0B2344)}

/* ---- 网页端预览：照后台真实训练台复刻（HUD + 红蓝眼镜提示 + 训练画布 + 底部控件） ---- */
.tsc{position:absolute;inset:0;display:flex;flex-direction:column;
    background:linear-gradient(180deg,#0d1c33,#081425)}

.tsc-hd{flex:none;display:flex;align-items:center;gap:6px;padding:6px 8px;
    background:linear-gradient(180deg,#15263f,#0e1c33);box-shadow:0 2px 10px rgba(0,0,0,.35)}

.tsc-back{flex:none;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;
    font-size:13px;line-height:1;color:#eaf2ff;background:linear-gradient(160deg,#3f8df0,#5b6cff);
    box-shadow:0 3px 8px rgba(47,128,237,.45);padding-bottom:2px}

.tsc-hd em{flex:1;min-width:0;font-style:normal;font-size:10px;font-weight:800;color:#eaf2ff;
    letter-spacing:.2px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

.tsc-time{flex:none;font-size:9.5px;font-weight:800;color:#7fd1ff;font-family:ui-monospace,Consolas,monospace}

.tsc-pause{flex:none;font-size:9px;font-weight:700;color:#cfe0ff;background:#22335a;border-radius:7px;padding:2px 7px}

/* 红蓝眼镜提示条（后台训练页真实存在的一条） */
.tsc-glass{flex:none;display:flex;align-items:center;justify-content:center;gap:5px;padding:5px 8px;
    background:#13203a;color:#eaf2ff;font-size:9px;font-weight:800;border-bottom:1px solid rgba(255,255,255,.06)}

.tsc-glass i{width:8px;height:8px;border-radius:50%;flex:none}

.tsc-glass i.r{background:#ff3b3b;box-shadow:0 0 7px #ff3b3b}

.tsc-glass i.b{background:#19e0e0;box-shadow:0 0 7px #19e0e0}

.tsc-glass b{font-weight:800;color:#dbe7ff}

/* 训练画布：分视训练用严格中性灰（后台真实设定） */
.tsc-cv{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;
    background-image:linear-gradient(180deg,#a9a9a9,#8c8c8c)}

.st{position:absolute;width:16px;height:16px;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.30))}

.st svg{width:100%;height:100%;display:block;fill:#e23b3b}

.st.lure svg{fill:#2f6fe0}

.st.s1{left:17%;top:8%;animation:starFall 3.4s linear infinite}

.st.s2{left:63%;top:2%;animation:starFall 3.4s linear .9s infinite}

.st.s3{left:39%;top:38%;animation:starFall 3.4s linear 1.8s infinite}

@keyframes starFall{0%{transform:translateY(-20px) rotate(0)}100%{transform:translateY(168px) rotate(150deg)}}

/* 底部小筐（任务色梯形，后台接接乐同款） */
.bsk{position:absolute;left:50%;bottom:7px;margin-left:-31px;width:62px;height:12px;
    background:#e23b3b;clip-path:polygon(0 0,100% 0,88% 100%,12% 100%);
    box-shadow:0 3px 9px rgba(0,0,0,.32)}

.bsk::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:rgba(255,255,255,.38)}

.tsc-hud{position:absolute;left:0;right:0;top:6px;text-align:center;font-size:9px;font-weight:800;
    color:#1f2b3d;opacity:.72;letter-spacing:.2px}

.tsc-hud em{font-style:normal;color:#9a6b00}

/* 底部调节控件 */
.tsc-ctl{flex:none;display:flex;gap:5px;padding:6px 9px;background:#0e1726;
    border-top:1px solid rgba(255,255,255,.07)}

.tsc-ctl .cb{flex:1;text-align:center;font-size:9px;font-weight:800;color:#cfe0ff;
    background:#22335a;border-radius:99px;padding:3px 0}

.tsc-ctl .cb.on{background:linear-gradient(135deg,#3f8df0,#2f6fe0);color:#fff}

/* 产品页大图里的训练台：整体放大一档，细节看得清 */
.shot .tsc-hd{padding:11px 15px;gap:9px}
.shot .tsc-back{width:27px;height:27px;font-size:20px;box-shadow:0 4px 12px rgba(47,128,237,.5)}
.shot .tsc-hd em{font-size:15px}
.shot .tsc-time{font-size:13.5px}
.shot .tsc-pause{font-size:12px;padding:4px 11px;border-radius:9px}
.shot .tsc-glass{font-size:12.5px;padding:8px 14px;gap:9px}
.shot .tsc-glass i{width:12px;height:12px}
.shot .st{width:27px;height:27px}
.shot .st.s1,.shot .st.s2,.shot .st.s3{animation-name:starFallBig}
.shot .bsk{width:108px;height:21px;margin-left:-54px;bottom:14px}
.shot .tsc-hud{font-size:13px;top:11px}
.shot .tsc-ctl{padding:10px 15px;gap:8px}
.shot .tsc-ctl .cb{font-size:12.5px;padding:6px 0}
@keyframes starFallBig{0%{transform:translateY(-32px) rotate(0)}100%{transform:translateY(158px) rotate(150deg)}}

/* 减少动态效果偏好：关掉动画，静态展示（无障碍） */
@media (prefers-reduced-motion: reduce){
  .st,.bullseye i,.orb{animation:none !important}
}

.win-cap{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;
    padding:10px 13px;font-size:11.5px;font-weight:700;letter-spacing:.6px;color:#A9C8E8;
    background:linear-gradient(180deg,transparent,rgba(3,10,22,.88))}

/* 安卓端：真实界面截图 · 多图切换（img/mobile1.png、mobile.png、game.png） */
.app-box{width:100%;max-width:404px;height:calc(100% - 18px);margin:0 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  transform:translateY(4px);transition:transform .55s cubic-bezier(.2,.7,.3,1)}

.mode.app:hover .app-box{transform:translateY(0)}

.app-shot{position:relative;width:100%;flex:1 1 auto;min-height:0;overflow:hidden;
  border-radius:20px;
  background:linear-gradient(165deg,#F6FAFF,#E4EFFD);
  border:1px solid rgba(46,155,230,.16);
  box-shadow:0 20px 44px rgba(23,62,120,.18),inset 0 1px 0 rgba(255,255,255,.9);
  transition:box-shadow .55s}

.mode.app:hover .app-shot{
  box-shadow:0 26px 54px rgba(23,62,120,.24),inset 0 1px 0 rgba(255,255,255,.9)}

/* 图层面板：图片完整居中显示（不裁切、不拉伸） */
.shots{position:absolute;top:9px;right:9px;bottom:9px;left:9px}

.shots img{position:absolute;top:0;left:0;width:100%;height:100%;display:block;
  -o-object-fit:contain;object-fit:contain;
  opacity:0;pointer-events:none;transition:opacity .45s ease;
  -webkit-user-drag:none;-webkit-user-select:none;user-select:none}

.shots img.on{opacity:1}

/* 当前图注（跟切换控件同一行，不遮挡画面） */
.scap{font-size:12px;font-weight:800;letter-spacing:.3px;color:#1B4A86;white-space:nowrap}

.sdiv{width:1px;height:14px;background:rgba(46,155,230,.26);margin:0 1px;flex:none}

/* 切换控件（在截图下方，不遮挡画面） */
.shot-ui{flex:none;display:flex;align-items:center;gap:7px;padding:5px 9px 5px 13px;border-radius:99px;max-width:100%;
  background:rgba(255,255,255,.96);border:1px solid rgba(46,155,230,.16);
  box-shadow:0 6px 18px rgba(23,62,120,.16);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

.snav{width:24px;height:24px;padding:0 0 2px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(46,155,230,.12);color:#2563C9;font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s}

.snav:hover{background:#2E9BE6;color:#fff}

.snav:active{transform:scale(.94)}

.sdots{display:flex;align-items:center;gap:5px;padding:0 2px}

.sdots button{width:6px;height:6px;padding:0;border:0;border-radius:99px;cursor:pointer;
  background:#B9CFE8;transition:width .3s,background .3s}

.sdots button.on{width:16px;background:#2E9BE6}

.snav:focus-visible,.sdots button:focus-visible{outline:2px solid #2E9BE6;outline-offset:2px}

/* 产品页：同一组截图，卡片更大 */
.shot .app-box{max-width:424px;height:calc(100% - 20px);gap:12px;transform:none}

.shot .app-shot{border-radius:18px;
  background:linear-gradient(165deg,#FFFFFF,#EDF5FF);
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 26px 56px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.06)}

.shot .scap{font-size:12.5px}

.shot .shot-ui{padding:6px 9px}

@media(max-width:900px){
  .shot .app-box{max-width:100%;height:calc(100% - 16px);gap:9px}
  .shot .app-shot{border-radius:16px}
  .shot .scap{font-size:11.5px}
}

/* 卡片正文 */
  .mode .ttl{display:flex;align-items:center;gap:16px;margin-top:26px}

.mode .mico{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;flex:none}

.mode .mico svg{width:28px;height:28px;display:block}

.mode.web .mico{background:linear-gradient(150deg,#3AA6F0,#1657C4);box-shadow:0 12px 26px rgba(22,87,196,.30)}

.mode.app .mico{background:linear-gradient(150deg,#FFBA66,#F08A1E);box-shadow:0 12px 26px rgba(240,138,30,.30)}

.mode h3{font-size:24px;font-weight:900;color:var(--navy-2);letter-spacing:.8px;line-height:1.35}

.mode .tag{display:inline-block;font-size:12.5px;font-weight:800;padding:6px 14px;border-radius:999px;letter-spacing:.6px;margin-top:6px}

.mode.web .tag{color:var(--blue-deep);background:rgba(46,155,230,.12)}

.mode.app .tag{color:#C56A12;background:rgba(255,159,67,.16)}

.mode p{font-size:15px;color:var(--gray);line-height:1.9;margin-top:16px}

.mode .divider{height:1px;background:linear-gradient(90deg,var(--line),transparent);margin:22px 0 20px}

.mode ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:4px}

.mode li{display:flex;align-items:center;gap:11px;font-size:14.5px;color:#3A4A5E;font-weight:600}

.mode li .dot{width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center}

.mode li .dot::after{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

.mode.web li .dot{color:var(--blue);background:rgba(46,155,230,.14)}

.mode.app li .dot{color:var(--orange);background:rgba(255,159,67,.18)}


.mode-link{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:6;
    background:linear-gradient(135deg,#3AA6F0,#1B62D6);color:#fff;padding:13px 24px;border-radius:999px;
    font-size:14.5px;font-weight:900;letter-spacing:1.5px;white-space:nowrap;
    box-shadow:0 14px 32px rgba(27,98,214,.42),0 0 0 6px rgba(255,255,255,.9)}

/* ---------- 游戏分类 ---------- */
  #games{background:linear-gradient(180deg,var(--soft) 0%,#EAF3FC 100%)}

.game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

.game{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);
    padding:34px 28px 30px;text-align:center;box-shadow:var(--shadow);
    transition:translate .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s}

.game:hover{translate:0 -8px;box-shadow:var(--shadow-lg);border-color:rgba(46,155,230,.5)}

.game .emoji{width:68px;height:68px;margin:0 auto 16px;border-radius:22px;display:grid;place-items:center;
    font-size:36px;line-height:1;
    background:linear-gradient(150deg,rgba(46,155,230,.10),rgba(27,98,214,.05));
    border:1px solid rgba(46,155,230,.15);
    transition:transform .35s cubic-bezier(.2,.7,.3,1),background .3s,border-color .3s,box-shadow .3s}

/* 分类图标用系统 emoji，无需额外字体与 SVG */

.game:hover .emoji{transform:translateY(-4px) scale(1.07);background:#fff;
    border-color:rgba(46,155,230,.32);box-shadow:0 14px 28px rgba(27,98,214,.18)}

.game h4{font-size:18px;font-weight:900;color:var(--navy-2);letter-spacing:.6px}

.game p{font-size:14px;color:var(--gray);line-height:1.8;margin-top:8px}

/* ---------- 使用步骤 ---------- */
  #steps{background:linear-gradient(180deg,var(--soft) 0%,#EDF5FD 100%)}

.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;position:relative}

.step-grid::before{content:"";position:absolute;top:52px;left:16%;right:16%;height:2px;
    background:linear-gradient(90deg,transparent,var(--line) 12%,var(--line) 88%,transparent);z-index:0}

.step{position:relative;z-index:1;text-align:center;padding:0 12px}

.step .snum{width:76px;height:76px;margin:0 auto 22px;border-radius:24px;display:grid;place-items:center;
    font-size:24px;font-weight:900;font-style:italic;color:#fff;
    background:linear-gradient(150deg,#3AA6F0,#1657C4);box-shadow:0 16px 34px rgba(22,87,196,.34)}

.step:nth-child(2) .snum{background:linear-gradient(150deg,#2E9BE6,#0F4FA8)}

.step:nth-child(3) .snum{background:linear-gradient(150deg,#FFBA66,#F08A1E);box-shadow:0 16px 34px rgba(240,138,30,.34)}

.step h4{font-size:19px;font-weight:900;color:var(--navy-2);letter-spacing:.6px}

.step p{font-size:14.5px;color:var(--gray);line-height:1.85;margin-top:10px;max-width:20em;margin-left:auto;margin-right:auto}

/* ---------- 页脚 ---------- */
  footer{position:relative;overflow:hidden;color:#AEBDD2;padding:80px 0 26px;
    isolation:isolate;
    background:radial-gradient(900px 340px at 50% 0%,rgba(46,155,230,.18),transparent 70%),
               radial-gradient(760px 320px at 50% 104%,rgba(92,245,208,.10),transparent 72%),
               linear-gradient(180deg,#071632 0%,#040C1A 100%)}

footer::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:2;
    background:linear-gradient(90deg,transparent,rgba(46,155,230,.75),rgba(92,245,208,.75),transparent)}

footer::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
    background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:64px 64px;
    -webkit-mask-image:radial-gradient(72% 62% at 50% 42%,#000,transparent 100%);
    mask-image:radial-gradient(72% 62% at 50% 42%,#000,transparent 100%)}

.foot-wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}

/* 品牌 */
  .logo-box{display:inline-flex;align-items:center;padding:14px 24px;margin-bottom:20px;
    background:#fff;border-radius:20px;box-shadow:0 18px 38px rgba(2,8,20,.45);
    transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s}

.logo-box:hover{transform:translateY(-4px);box-shadow:0 26px 52px rgba(2,8,20,.58)}

.logo-box .logo{height:46px;width:auto}

.foot-name{font-size:clamp(21px,2.4vw,27px);font-weight:900;letter-spacing:4px;line-height:1.3;
    background:linear-gradient(120deg,#A8DCFF 0%,#7FE3FF 45%,#5CF5D0 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent}

.foot-brand .since{display:inline-flex;align-items:center;gap:8px;margin-top:12px;
    font-size:12.5px;font-weight:800;letter-spacing:2px;color:#6E88A8}

.foot-brand .since::before,.foot-brand .since::after{content:"";width:26px;height:1px;
    background:linear-gradient(90deg,transparent,rgba(110,136,168,.6))}

.foot-brand .since::after{background:linear-gradient(90deg,rgba(110,136,168,.6),transparent)}

.foot-brand p{font-size:15px;color:#93A6BF;line-height:1.95;max-width:32em;margin-top:16px}

/* 亮点标签 */
  .foot-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px}

.foot-tags span{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;
    color:#B9CADE;padding:8px 16px;border-radius:999px;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10)}

.foot-tags span b{width:5px;height:5px;border-radius:50%;background:#5CF5D0;
    box-shadow:0 0 8px rgba(92,245,208,.9)}

/* 横向虚线：两端渐隐 */
  .foot-split{width:min(620px,100%);height:1px;margin:32px 0;flex:none;
    background:repeating-linear-gradient(90deg,rgba(255,255,255,.32) 0 6px,transparent 6px 13px);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}

/* 入口胶囊 */
  .foot-nav{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}

.foot-nav a{font-size:14.5px;font-weight:700;color:#B9CADE;padding:11px 20px;border-radius:999px;
    border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);
    transition:color .25s,border-color .25s,background .25s,transform .25s,box-shadow .25s}

.foot-nav a:hover{color:#04101F;background:linear-gradient(135deg,#7FE3FF,#5CF5D0);
    border-color:transparent;transform:translateY(-2px);box-shadow:0 12px 26px rgba(92,245,208,.24)}

/* 联系卡片 */
  .foot-contact{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:28px;
    scroll-margin-top:100px}

.fc{display:flex;align-items:center;gap:12px;padding:13px 20px;border-radius:16px;text-align:left;
    background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);
    transition:background .28s,border-color .28s,transform .28s}

a.fc:hover{background:rgba(255,255,255,.09);border-color:rgba(92,245,208,.42);transform:translateY(-3px)}

.fc i{font-style:normal;font-size:16px;width:36px;height:36px;border-radius:12px;flex:none;
    display:grid;place-items:center;background:rgba(46,155,230,.20)}

.fc em{display:block;font-style:normal;font-size:12.5px;color:#7E93AD;line-height:1.5}

.fc b{display:block;font-size:14.5px;color:#E3EDF8;font-weight:800;letter-spacing:.4px;line-height:1.5}

/* 版权 */
  .foot-bottom{width:100%;margin-top:36px;padding-top:24px;border-top:1px solid rgba(255,255,255,.07);
    text-align:center;font-size:13px;color:#7386A0;line-height:1.9}

.foot-bottom .r2{display:block;margin-top:4px;font-size:12.5px;color:#5F7391}

.to-top{display:inline-flex;align-items:center;gap:7px;margin-top:18px;padding:9px 20px;border-radius:999px;
    font-family:inherit;font-size:13px;font-weight:800;color:#B9CADE;cursor:pointer;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
    transition:color .25s,background .25s,border-color .25s,transform .25s}

.to-top:hover{color:#04101F;background:linear-gradient(135deg,#7FE3FF,#5CF5D0);
    border-color:transparent;transform:translateY(-2px)}

/* ---------- 滚动入场 ---------- */
  .reveal{opacity:0;transform:translateY(28px);
    transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1);
    transition-delay:var(--d,0ms)}

.reveal.in{opacity:1;transform:none}


/* ==================== 子页通用（页头 / 卡片 / 文章 / 图文块） ==================== */

/* 锐晴视觉训练 · 站点通用样式
   供 product.html / article.html 使用，与 index.html 保持同一套视觉语言 */
:root{
  --blue:#2E9BE6;
  --blue-deep:#1B62D6;
  --navy:#08182F;
  --navy-2:#0E2A52;
  --cyan:#5CF5D0;
  --orange:#FF9F43;
  --ink:#121C2B;
  --gray:#5B6B7E;
  --line:#E6EDF5;
  --bg:#FFFFFF;
  --soft:#F4F8FD;
  --r:20px;
  --shadow:0 10px 30px rgba(13,40,80,.08);
  --shadow-lg:0 30px 70px rgba(13,40,80,.16);
  --max:1200px;
}

.nav-links a:hover,.nav-links a.active,.nav-links a.cur{color:var(--blue-deep)}

.nav-links a.cur::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--blue),var(--blue-deep))}

/* ---------- 子页页头 ---------- */
.subhero{position:relative;isolation:isolate;overflow:hidden;color:#fff;padding:78px 0 72px;text-align:center;
  background:linear-gradient(168deg,#040B18 0%,#0A1E3E 46%,#123B72 100%)}

.subhero .aurora{position:absolute;inset:0;z-index:0;pointer-events:none}

.subhero .aurora i{position:absolute;display:block;border-radius:50%;filter:blur(70px);opacity:.5}

.subhero .aurora i:nth-child(1){width:560px;height:560px;left:-8%;top:-30%;
  background:radial-gradient(circle,#2E9BE6,transparent 68%);animation:float1 16s ease-in-out infinite}

.subhero .aurora i:nth-child(2){width:460px;height:460px;right:-6%;top:-20%;
  background:radial-gradient(circle,#5CF5D0,transparent 70%);opacity:.26;animation:float2 20s ease-in-out infinite}

.subhero .grid-bg{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.45;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(75% 62% at 50% 42%,#000 0%,transparent 100%);
  mask-image:radial-gradient(75% 62% at 50% 42%,#000 0%,transparent 100%)}

.subhero .container{position:relative;z-index:3}

.crumb{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;color:#8FB0D4;font-weight:700;
  margin-bottom:18px}

.crumb a{transition:color .25s}

.crumb a:hover{color:#fff}

.crumb em{font-style:normal;opacity:.5}

.subhero h1{font-size:clamp(28px,4vw,44px);font-weight:900;letter-spacing:1.5px;line-height:1.25}

.subhero .sub{font-size:16.5px;color:#A9C2DE;margin:16px auto 0;max-width:38em;line-height:1.9}

.subhero .rule{width:110px;height:3px;margin:24px auto 0;border-radius:99px;
  background:linear-gradient(90deg,transparent,#5CF5D0,#2E9BE6,transparent);opacity:.85}

.soft{background:linear-gradient(180deg,var(--soft) 0%,#EDF5FD 100%)}

/* 卡片 */
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:32px 28px;box-shadow:var(--shadow);
  transition:translate .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s}

.card:hover{translate:0 -8px;box-shadow:var(--shadow-lg);border-color:rgba(46,155,230,.5)}

.card .cico{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(150deg,#3AA6F0,#1657C4);box-shadow:0 12px 26px rgba(22,87,196,.30)}

.card .cico.o{background:linear-gradient(150deg,#FFBA66,#F08A1E);box-shadow:0 12px 26px rgba(240,138,30,.30)}

.card .cico svg{width:28px;height:28px;display:block;stroke:#fff}

.card h4{font-size:18px;font-weight:900;color:var(--navy-2);letter-spacing:.6px}

.card p{font-size:14.5px;color:var(--gray);line-height:1.85;margin-top:9px}

.card .emoji{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;font-size:32px;
  margin-bottom:16px;background:linear-gradient(150deg,rgba(46,155,230,.10),rgba(27,98,214,.05));
  border:1px solid rgba(46,155,230,.15);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),background .3s,border-color .3s,box-shadow .3s}

.card:hover .emoji{transform:translateY(-4px) scale(1.07);background:#fff;
  border-color:rgba(46,155,230,.32);box-shadow:0 14px 28px rgba(27,98,214,.18)}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}

/* ---------- 文章排版 ---------- */
.article-wrap{max-width:820px;margin:0 auto}

.article-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}

.article-meta span{font-size:13px;font-weight:700;color:#CFE2F6;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);padding:6px 14px;border-radius:999px}

.article{font-size:16.5px;line-height:2;color:#33445A}

.article h2{font-size:clamp(21px,2.4vw,26px);font-weight:900;color:var(--navy-2);letter-spacing:1px;
  margin:52px 0 18px;padding-left:16px;border-left:5px solid var(--blue);line-height:1.5}

.article h3{font-size:18.5px;font-weight:900;color:var(--navy-2);margin:32px 0 12px;letter-spacing:.6px}

.article p{margin:0 0 18px}

.article strong{color:var(--navy-2);font-weight:800}

.article ul,.article ol{margin:0 0 22px;padding-left:22px}

.article li{margin-bottom:11px}

.article li::marker{color:var(--blue)}

.article blockquote{margin:28px 0;padding:22px 26px;border-radius:16px;
  background:linear-gradient(180deg,#F4F9FF,#EAF3FC);border-left:4px solid var(--blue);
  font-size:16px;color:#3A4E68;line-height:1.95}

.article blockquote b{display:block;color:var(--blue-deep);margin-bottom:6px;font-weight:900}

.callout{display:flex;gap:14px;margin:28px 0;padding:22px 24px;border-radius:16px;
  background:linear-gradient(180deg,#FFF8EE,#FEEFDA);border:1px solid rgba(255,159,67,.28)}

.callout .ci{font-size:24px;line-height:1;flex:none}

.callout h5{font-size:15.5px;font-weight:900;color:#B4690F;margin-bottom:6px;letter-spacing:.5px}

.callout p{font-size:14.5px;color:#8A6A38;line-height:1.85;margin:0}

.article-hr{height:1px;margin:44px 0;border:0;
  background:linear-gradient(90deg,transparent,var(--line),transparent)}

.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}

.tags span{font-size:13px;font-weight:700;color:var(--blue-deep);background:rgba(46,155,230,.10);
  border:1px solid rgba(46,155,230,.22);padding:7px 15px;border-radius:999px}

.disclaimer{margin-top:36px;padding:22px 26px;border-radius:16px;background:#F7FAFE;
  border:1px dashed rgba(46,155,230,.35);font-size:13.5px;color:#6B7C93;line-height:1.9}

/* FAQ */
.faq{max-width:860px;margin:0 auto}

.faq details{background:#fff;border:1px solid var(--line);border-radius:16px;margin-bottom:14px;
  box-shadow:var(--shadow);overflow:hidden;transition:border-color .25s}

.faq details:hover{border-color:rgba(46,155,230,.45)}

.faq summary{list-style:none;cursor:pointer;padding:20px 58px 20px 24px;position:relative;
  font-size:16px;font-weight:800;color:var(--navy-2);letter-spacing:.4px}

.faq summary::-webkit-details-marker{display:none}

.faq summary::after{content:"";position:absolute;right:24px;top:50%;width:11px;height:11px;
  border-right:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s}

.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}

.faq details[open] summary{color:var(--blue-deep)}

.faq .fa{font-size:15px;color:var(--gray);line-height:1.95;padding:0 24px 22px;border-top:1px solid var(--line);
  padding-top:16px}

/* 数字条 */
.statbar{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);
  border-radius:22px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}

.statbar div{padding:30px 16px;text-align:center;border-right:1px solid var(--line)}

.statbar div:last-child{border-right:none}

.statbar div b{display:block;font-size:32px;font-weight:900;line-height:1.1;
  background:linear-gradient(120deg,#1B62D6,#2E9BE6);-webkit-background-clip:text;background-clip:text;color:transparent}

.statbar div span{display:block;font-size:13.5px;color:var(--gray);margin-top:7px;letter-spacing:.5px}

/* 底部 CTA */
.cta-band{max-width:960px;margin:0 auto;text-align:center;padding:56px 40px;border-radius:28px;
  position:relative;overflow:hidden;
  background:radial-gradient(700px 320px at 88% 10%,rgba(92,245,208,.16),transparent 62%),
             radial-gradient(600px 320px at 6% 100%,rgba(255,159,67,.16),transparent 60%),
             linear-gradient(135deg,#08182F 0%,#0E2A52 52%,#14407E 100%);
  box-shadow:0 34px 80px rgba(8,24,47,.35)}

.cta-band h3{font-size:clamp(22px,2.6vw,30px);font-weight:900;color:#fff;letter-spacing:1.2px;line-height:1.4}

.cta-band p{font-size:15.5px;color:#AFC5DE;margin-top:12px;line-height:1.9}

.cta-band .acts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:28px}

.cta-band .note{margin-top:16px;font-size:13px;color:#8FA8C4}

/* ---------- 图文介绍块 ---------- */
.featrow{display:grid;grid-template-columns:1.02fr .98fr;gap:76px;align-items:center}

.featrow + .featrow{margin-top:112px}

.featrow.rev .fshot{order:-1}

.ftext .fno{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:900;letter-spacing:2.4px;
  color:var(--blue-deep);background:rgba(46,155,230,.10);border:1px solid rgba(46,155,230,.22);
  padding:7px 15px;border-radius:999px}

.ftext h3{font-size:clamp(23px,2.8vw,31px);font-weight:900;color:var(--navy-2);letter-spacing:1.2px;
  margin-top:20px;line-height:1.4}

.ftext .fsub{font-size:16.5px;color:#55677D;line-height:1.95;margin-top:15px}

.ftext ul{list-style:none;margin-top:26px;display:flex;flex-direction:column;gap:13px}

.ftext li{display:flex;align-items:center;gap:12px;font-size:15px;color:#3A4A5E;font-weight:600}

.ftext li .dt{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(46,155,230,.14)}

.ftext li .dt::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue)}

.ftext li.o .dt{background:rgba(240,138,30,.16)}

.ftext li.o .dt::after{background:var(--orange)}

/* 图框 */
.fshot{position:relative}

.fshot::before{content:"";position:absolute;z-index:0;left:-8%;right:-8%;top:4%;bottom:-8%;border-radius:50%;
  background:radial-gradient(circle,rgba(46,155,230,.20),transparent 70%);filter:blur(30px)}

.fshot::after{content:"";position:absolute;z-index:0;right:-6%;top:-12%;width:210px;height:210px;border-radius:50%;
  background:radial-gradient(circle,rgba(92,245,208,.22),transparent 70%);filter:blur(26px)}

.featrow.rev .fshot::after{right:auto;left:-6%}

.shot{position:relative;z-index:1;border-radius:22px;overflow:hidden;background:#fff;
  border:1px solid var(--line);box-shadow:0 30px 66px rgba(13,40,80,.18)}

.shot-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;
  background:linear-gradient(180deg,#F8FBFF,#EDF4FC);border-bottom:1px solid var(--line)}

.shot-bar i{width:10px;height:10px;border-radius:50%;background:#FF6058;flex:none}

.shot-bar i:nth-child(2){background:#FFBD2E}

.shot-bar i:nth-child(3){background:#28C840}

.shot-bar .url{flex:1;min-width:0;margin-left:10px;height:25px;border-radius:8px;background:#fff;
  border:1px solid var(--line);display:flex;align-items:center;padding:0 12px;
  font-size:11.5px;color:#8A9AB0;font-weight:700;letter-spacing:.3px;overflow:hidden;white-space:nowrap}

.shot-stage{position:relative;height:420px;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle at 50% 38%,#10305C,#050B18 76%)}

.shot-stage.light{background:linear-gradient(180deg,#F9FBFF,#E9F2FC)}

.shot-cap{position:absolute;left:0;right:0;bottom:0;padding:15px 18px;display:flex;align-items:center;
  justify-content:space-between;background:linear-gradient(180deg,rgba(5,11,24,0),rgba(5,11,24,.85));
  font-size:12.5px;color:#A9C2DE}

.shot-cap b{color:#fff;font-weight:800;font-size:13.5px}

/* 图1 · 训练台光球 */
.tgwrap{position:relative;width:214px;height:160px}

.tgwrap .orb {position:absolute;top:14px;width:100px;height:100px;border-radius:50%;opacity:.92}

.tgwrap .orb.r{left:0;background:radial-gradient(circle at 34% 30%,#FF9A9A,#DF3B3B 60%,rgba(223,59,59,.05));
  box-shadow:0 0 40px rgba(223,59,59,.42);animation:orbR 5.6s ease-in-out infinite}

.tgwrap .orb.b{right:0;background:radial-gradient(circle at 34% 30%,#8FCBFF,#2A6CE0 60%,rgba(42,108,224,.05));
  box-shadow:0 0 40px rgba(42,108,224,.42);animation:orbB 5.6s ease-in-out infinite}

@keyframes orbR{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(24px,-8px,0)}}

@keyframes orbB{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-24px,8px,0)}}

.bullseye{position:absolute;left:50%;top:32px;margin-left:-35px;width:70px;height:70px;border-radius:50%;
  border:3px solid rgba(92,245,208,.9);display:grid;place-items:center;box-shadow:0 0 26px rgba(92,245,208,.38)}

.bullseye::before{content:"";width:16px;height:16px;border-radius:50%;background:#5CF5D0;
  box-shadow:0 0 14px rgba(92,245,208,.9)}

.bullseye i{position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(92,245,208,.55);
  animation:ringPulse 2.6s ease-out infinite}

.bullseye i.d2{animation-delay:1.3s}

@keyframes ringPulse{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.9);opacity:0}}

/* 图3 · 训练记录：后台真实页面截图（img/record.png，手机竖屏，按高度完整显示） */
.shot-stage.rstage{height:auto;padding:38px 0 34px}

.recshot{position:relative;line-height:0;border-radius:20px;overflow:hidden;background:#fff;
  box-shadow:0 20px 46px rgba(23,62,120,.20),0 3px 10px rgba(23,62,120,.08),0 0 0 1px rgba(23,62,120,.07);
  transition:transform .55s cubic-bezier(.2,.7,.3,1),box-shadow .55s}

.recshot img{display:block;width:auto;height:auto;max-width:100%;max-height:640px;
  -webkit-user-drag:none;-webkit-user-select:none;user-select:none}

.featrow:hover .recshot{transform:translateY(-4px);
  box-shadow:0 26px 56px rgba(23,62,120,.26),0 4px 12px rgba(23,62,120,.10),0 0 0 1px rgba(23,62,120,.07)}

/* 图4 · 游戏分类：后台真实页面截图（img/game.png，横向） */
.gshot{width:100%;max-width:560px;margin:0 auto;line-height:0;
  border-radius:18px;overflow:hidden;background:#fff;
  box-shadow:0 20px 46px rgba(23,62,120,.20),0 3px 10px rgba(23,62,120,.08),0 0 0 1px rgba(23,62,120,.07);
  transition:transform .55s cubic-bezier(.2,.7,.3,1),box-shadow .55s}

/* 关键：宽度撑满 + 高度 auto，严格按原始比例缩放，绝不拉伸变形 */
.gshot img{display:block;width:100%;height:auto;max-width:100%;
  -webkit-user-drag:none;-webkit-user-select:none;user-select:none}

.featrow:hover .gshot{transform:translateY(-4px);
  box-shadow:0 26px 56px rgba(23,62,120,.26),0 4px 12px rgba(23,62,120,.10),0 0 0 1px rgba(23,62,120,.07)}

/* 03 / 04 截图下方图注 */
.gshot-cap{display:block;margin-top:14px;text-align:center;
  font-size:13px;font-weight:800;letter-spacing:.4px;color:#4A6A93}
/* ==================== 响应式 ==================== */

@media(max-width: 1024px){
.container{padding:0 22px}
.game-grid{grid-template-columns:repeat(2,1fr)}
.nav-links{gap:22px}
.mode .body{padding:0 30px 34px}
.prev{height:392px}
.grid3{grid-template-columns:repeat(2,1fr)}
.statbar{grid-template-columns:repeat(2,1fr)}
.statbar div:nth-child(2){border-right:none}
.statbar div:nth-child(1),.statbar div:nth-child(2){border-bottom:1px solid var(--line)}
.featrow{gap:48px}
.featrow + .featrow{margin-top:84px}
}

@media(max-width: 900px){
.nav-inner{height:72px}
.brand .logo{height:52px}
.nav-toggle{display:flex}
.nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
      background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow);
      max-height:0;overflow:hidden;transition:max-height .3s ease}
.nav-links.open{max-height:340px}
.nav-links li{border-top:1px solid var(--line)}
.nav-links a{display:block;padding:15px 24px;font-size:16.5px}
.nav-indicator{display:none}
.nav-sep{display:none}
.hero{padding:38px 0 54px}
.hero-card{padding:34px 22px 30px;border-radius:24px}
.hero-card::before{left:14%;right:14%}
.hero-stats{margin-top:38px}
.hero-stats div{padding:18px 8px}
.hero-stats div b{font-size:27px}
.hero-stats div span{font-size:11.5px}
.mode-grid,.game-grid,.step-grid{grid-template-columns:1fr}
.mode-link,.step-grid::before{display:none}
.mode .body{padding:0 26px 32px}
.mode .ttl{gap:12px}
.mode .num{width:38px;height:38px;border-radius:11px;font-size:16px}
.prev{height:388px;margin-top:22px}
.logo-box{padding:11px 18px;border-radius:15px}
.logo-box .logo{height:38px}
.foot-split{margin:26px 0}
.foot-name{letter-spacing:2px}
.foot-tags{gap:8px}
.foot-tags span{font-size:12.5px;padding:7px 13px}
.foot-contact{gap:10px;margin-top:22px}
.fc{padding:11px 16px}
.fc i{width:32px;height:32px;font-size:15px;border-radius:10px}
.fc b{font-size:13.5px}
footer{padding:52px 0 24px}
section.block{padding:64px 0}
.head{margin-bottom:40px}
.nav-links a.cur::after{display:none}
.nav-indicator,.nav-sep{display:none}
.subhero{padding:56px 0 54px}
.grid3,.grid2{grid-template-columns:1fr}
.featrow{grid-template-columns:1fr;gap:34px}
.featrow.rev .fshot{order:0}
.fshot{margin:0 auto;max-width:460px;width:100%}
.featrow + .featrow{margin-top:60px}
.shot-stage{height:356px}
.gshot{width:97%}
.gshot-cap{margin-top:12px;font-size:11.5px}
.shot-stage.rstage{padding:26px 0}
.recshot{border-radius:17px}
.recshot img{max-height:none;max-width:360px;width:100%}
.article{font-size:16px;line-height:1.95}
.article h2{margin:40px 0 14px}
.cta-band{padding:38px 24px;border-radius:22px}
}

@media(prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important}
.reveal{opacity:1;transform:none}
}