*{box-sizing:border-box}
:root{color-scheme:dark;--bg:#020817;--cyan:#46dcff;--blue:#087dff}
html,body{margin:0;width:100%;min-height:100%;background:var(--bg)}
body{overflow-x:hidden;font-family:Arial,"Microsoft YaHei",sans-serif;-webkit-tap-highlight-color:transparent}
.page{width:100%;background:#020817}
.visual{position:relative;width:100%;max-width:1672px;margin:0 auto;aspect-ratio:1672/941;overflow:hidden;background:#020817;isolation:isolate}
.visual picture,.visual__image{display:block;width:100%;height:100%}
.visual__image{object-fit:cover;user-select:none;pointer-events:none}
#particles{position:absolute;inset:0;z-index:2;width:100%;height:100%;opacity:.2;pointer-events:none;mix-blend-mode:screen}
.hotspot{position:absolute;z-index:4;top:46%;height:11.4%;border-radius:18px;cursor:pointer;transition:.22s ease}
.hotspot--ios{left:7.1%;width:20.1%}
.hotspot--android{left:27.8%;width:20.4%}
.hotspot:hover,.hotspot:focus-visible{transform:translateY(-2px) scale(1.015);box-shadow:0 0 12px #63eaff,0 0 34px rgba(0,125,255,.85),inset 0 0 22px rgba(82,215,255,.22);outline:2px solid rgba(111,231,255,.9);background:rgba(0,153,255,.08)}
.mobile-download{display:none}

@media(max-width:768px){
  .visual{width:100%;max-width:none;aspect-ratio:750/1180}
  .visual__image{object-fit:cover}
  #particles{opacity:.12}
  .hotspot{display:block;top:33.1%;height:9%;border-radius:14px}
  .hotspot--ios{left:10.2%;width:43%}
  .hotspot--android{left:55.5%;width:43%}
  .mobile-download{
    display:block;
    padding:26px 16px calc(26px + env(safe-area-inset-bottom));
    text-align:center;
    background:
      radial-gradient(circle at 50% 0,rgba(0,126,255,.25),transparent 55%),
      linear-gradient(180deg,#03112b,#020817);
    border-top:1px solid rgba(72,184,255,.28)
  }
  .mobile-download h2{margin:0 0 8px;font-size:26px;color:#fff}
  .mobile-download p{margin:0 0 18px;color:#8ecdf7;font-size:14px}
  .mobile-download__buttons{display:grid;grid-template-columns:1fr;gap:14px;max-width:520px;margin:0 auto}
  .mobile-btn{
    display:flex;align-items:center;justify-content:center;gap:14px;
    min-height:74px;padding:12px 18px;border-radius:18px;text-decoration:none;color:#fff;
    border:2px solid rgba(70,205,255,.8);
    background:linear-gradient(180deg,rgba(10,49,111,.96),rgba(3,16,44,.98));
    box-shadow:0 0 15px rgba(0,204,255,.35),0 0 34px rgba(0,102,255,.25),inset 0 0 22px rgba(0,126,255,.2)
  }
  .mobile-btn--android{border-color:rgba(106,255,78,.72)}
  .mobile-btn__icon{font-size:38px;line-height:1}
  .mobile-btn small,.mobile-btn strong{display:block;text-align:left}
  .mobile-btn small{font-size:12px;color:#b9dfff;margin-bottom:2px}
  .mobile-btn strong{font-size:23px}
  .mobile-btn:active{transform:scale(.985);filter:brightness(1.15)}
}

@media(max-width:420px){
  .mobile-download{padding-left:12px;padding-right:12px}
  .mobile-btn{min-height:68px;border-radius:16px}
  .mobile-btn strong{font-size:21px}
}
@media(prefers-reduced-motion:reduce){
  #particles{display:none}
  .hotspot,.mobile-btn{transition:none}
}