*,*::before,*::after{box-sizing:border-box}
:root{--bg:#0a0d12; --ink:#eef1f6; --dim:#9aa3b2; --line:rgba(255,255,255,.06)}
html{scroll-snap-type:y proximity;scroll-behavior:smooth;scroll-padding-top:64px;
  -webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);overflow-x:hidden;
  font:400 16px/1.7 "Google Sans","Google Sans Text","Product Sans",Inter,
       system-ui,-apple-system,"Helvetica Neue","PingFang SC","PingFang TC",
       "Hiragino Sans","Apple SD Gothic Neo","Noto Sans Arabic",sans-serif;
  letter-spacing:-.01em;
}
a{color:inherit;text-decoration:none}
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
img{display:block;max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}
.msym{font-family:"Material Symbols Rounded";font-weight:400;font-style:normal;
  line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;
  direction:ltr;-webkit-font-feature-settings:'liga';font-variation-settings:'opsz' 24}

/* ---- 首屏背景：点阵 + 极光，都只覆盖第一屏并向下渐隐 ---- */
.bg{position:absolute;top:0;inset-inline:0;height:100vh;z-index:0;pointer-events:none}
.dotfield{
  background-image:radial-gradient(circle,rgba(200,200,207,.30) 1.4px,transparent 1.5px);
  background-size:14px 14px;
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);
}
.aurora{mix-blend-mode:screen;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 60%,transparent 100%)}
.aurora i{position:absolute;display:block;border-radius:50%;filter:blur(110px);opacity:.30}
.aurora i:nth-child(1){inset-inline-start:-8%;top:-26%;width:62vw;height:62vw;
  background:radial-gradient(circle,#e100ff 0%,transparent 66%);animation:drift 26s ease-in-out infinite}
.aurora i:nth-child(2){inset-inline-end:-10%;top:-18%;width:54vw;height:54vw;
  background:radial-gradient(circle,#4d3dff 0%,transparent 66%);animation:drift 32s ease-in-out infinite reverse}
.aurora i:nth-child(3){inset-inline-start:34%;top:18%;width:40vw;height:40vw;opacity:.12;
  background:radial-gradient(circle,#f7f7f7 0%,transparent 62%);animation:drift 38s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(4%,6%,0) scale(1.12)}}
@media(prefers-reduced-motion:reduce){.aurora i{animation:none}}

/* ---- 顶栏：吸顶，模糊条向下渐隐（无硬边）---- */
.hdr{position:sticky;top:0;z-index:30}
.hdr::before{content:'';position:absolute;top:0;inset-inline:0;bottom:-32px;z-index:-1;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  -webkit-mask-image:linear-gradient(to bottom,#000 42%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 42%,transparent 100%)}
.hdr .wrap{height:64px;display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:26px;height:26px;border-radius:7px}
.brand span{font-size:19px;font-weight:600;letter-spacing:-.02em}
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;
  border-radius:9999px;border:1px solid rgba(255,255,255,.2);color:#cbd2dd;font-size:12px}
.grow{flex:1}
.btn-try{display:inline-flex;align-items:center;height:36px;padding:0 20px;border-radius:9999px;
  background:#fff;color:#15171d;font-size:14px;font-weight:600;
  transition:filter .16s ease,transform .16s ease}
.btn-try:hover{filter:brightness(.94)}
.btn-try:active{transform:scale(.98)}
@media(max-width:700px){.btn-try{display:none}}

/* 语言切换：沿用 chip 外形 */
.langs{position:relative}
.langs summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  height:36px;padding:0 14px;border-radius:9999px;border:1px solid rgba(255,255,255,.14);
  color:#cbd2dd;font-size:14px;transition:border-color .18s ease,color .18s ease}
.langs summary::-webkit-details-marker{display:none}
.langs summary:hover{border-color:rgba(255,255,255,.32);color:#fff}
.langs ul{position:absolute;inset-inline-end:0;top:calc(100% + 8px);margin:0;padding:6px;
  list-style:none;min-width:180px;max-height:62vh;overflow:auto;border-radius:16px;
  background:#101520;border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 80px -40px rgba(0,0,0,.95)}
.langs li a{display:block;padding:9px 14px;font-size:14px;color:var(--dim);border-radius:10px}
.langs li a:hover{background:rgba(255,255,255,.06);color:#fff}
.langs li a[aria-current]{color:#fff}

/* ---- 各屏通用 ---- */
main{position:relative;z-index:10}
.screen{scroll-snap-align:start}
.h-font{letter-spacing:-.02em;font-weight:400;line-height:1.18}
h1{margin:0 0 24px;font-size:clamp(34px,3.7vw,56px)}
h2{margin:0 0 16px;font-size:clamp(30px,4.4vw,52px)}
h3{margin:0 0 8px;font-size:18px;font-weight:600;letter-spacing:-.01em}
.lede{color:rgba(255,255,255,.9);font-size:clamp(16px,1.6vw,19px);line-height:1.6;margin:0}
.sub{color:var(--dim);font-size:17px;line-height:1.65;margin:0 0 38px;max-width:46em}

/* 第一屏：左文右机。窗口拉高时空白落在上方（同 Reelab 的 align-end）*/
.hero{min-height:calc(100vh - 64px);display:grid;align-items:end;
  padding:4vh 32px 96px;position:relative;z-index:10}
.hero-in{width:100%;max-width:1220px;margin:0 auto;display:grid;gap:clamp(32px,5vw,72px);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center}
.hero-txt{max-width:36em}
.hero .lede{margin:0 0 40px}
.cta-btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 34px;
  border-radius:9999px;background:#fff;color:#15171d;font-size:16px;font-weight:700;
  transition:filter .16s ease,transform .16s ease}
.cta-btn:hover{filter:brightness(.94)}
.cta-btn:active{transform:scale(.98)}
.cta-btn .msym{font-size:20px}
.cta-note{color:rgba(255,255,255,.55);font-size:13px;margin:16px 0 0}
.scope{display:inline-flex;align-items:flex-start;gap:8px;margin:28px 0 0;padding:10px 18px;
  border-radius:16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);
  color:var(--dim);font-size:13.5px;line-height:1.55}
.scope .msym{font-size:17px;flex:none;margin-top:2px}

/* 手机外壳：外壳用 CSS 画，里面是 App 的真实截图（每种语言一张）*/
.phone{justify-self:center;height:min(70vh,700px);aspect-ratio:9/19.5;max-width:100%;
  position:relative;border-radius:44px;padding:11px;
  background:linear-gradient(160deg,#2b3140,#0f1319 55%);
  box-shadow:0 60px 120px -50px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.08),
             inset 0 1px 0 rgba(255,255,255,.14);
  animation:float 9s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media(prefers-reduced-motion:reduce){.phone{animation:none}}
.phone img{height:100%;width:100%;object-fit:cover;object-position:top;
  border-radius:34px;background:#07090d}

@media(max-width:960px){
  .hero{padding-bottom:64px;text-align:center}
  .hero-in{grid-template-columns:1fr;justify-items:center}
  .hero-txt{max-width:38em}
  .hero .lede{margin-inline:auto}
  .phone{height:min(62vh,580px)}
}

/* 第二屏：大圆角展示框，滚到时从小放大浮现（同 Reelab 的 video-showcase）。
   放的是各语言的应用展示图，竖版，所以框按内容高度走而不是锁 16:9——
   锁死比例会把竖图压到看不清字。 */
.showcase-sec{min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:80px 32px}
.showcase{position:relative;width:min(100%,1320px);border-radius:26px;overflow:hidden;
  border:1px solid rgba(255,255,255,.1);background-color:#0b0f16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'%3E%3Crect width='1.6' height='1.6' fill='%23c8c8cf' fill-opacity='0.1'/%3E%3C/svg%3E");
  background-size:15px 15px;padding:clamp(20px,3vw,46px);
  box-shadow:0 50px 130px -50px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.05);
  transform:scale(.2);opacity:.15;
  transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .7s ease}
.showcase.in{transform:scale(1);opacity:1}
/* 顶部流光带 */
.showcase::before{content:'';position:absolute;top:0;inset-inline:8%;height:1px;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(120,180,255,.5),rgba(180,120,255,.5),transparent)}
.shots{display:flex;align-items:stretch;justify-content:center;gap:clamp(10px,1.6vw,22px);
  direction:ltr}
.shots img{height:min(64vh,680px);width:auto;border-radius:clamp(10px,1.2vw,18px);
  border:1px solid rgba(255,255,255,.08);box-shadow:0 26px 70px -34px rgba(0,0,0,.9)}
@media(max-width:1100px){.shots img:nth-child(n+4){display:none}}
@media(max-width:820px){.shots img:nth-child(n+3){display:none}}
@media(max-width:560px){.shots img:nth-child(n+2){display:none}.shots img{height:min(62vh,600px)}}
@media(prefers-reduced-motion:reduce){.showcase{transform:none;opacity:1}}

/* ---- 内容屏 ---- */
.sec{padding:92px 0}
.cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(244px,1fr))}
.cell{border-radius:16px;background:rgba(255,255,255,.035);
  border:1px solid var(--line);padding:26px;transition:border-color .2s ease,background .2s ease}
.cell:hover{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.05)}
.cell p{margin:0;color:var(--dim);font-size:15px;line-height:1.65}
.cell .msym{font-size:26px;color:rgba(255,255,255,.72);margin-bottom:14px;display:block}
.cell .num{display:block;font-size:13px;font-weight:700;color:rgba(255,255,255,.4);margin-bottom:12px}
ol.cards{counter-reset:s;list-style:none;padding:0;margin:0}

ul.games{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
ul.games li{display:inline-flex;align-items:center;height:38px;padding:0 18px;
  border-radius:9999px;font-size:14.5px;color:#dfe4ec;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05)}

/* CTA 屏：射线背景 + 白色胶囊按钮 */
.cta-sec{min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:64px 32px;position:relative;overflow:hidden;text-align:center}
.burst{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:
    conic-gradient(from 0deg at 50% 50%,
      transparent 0deg, rgba(255,0,122,.22) 8deg, transparent 16deg,
      transparent 30deg, rgba(77,61,255,.22) 38deg, transparent 46deg,
      transparent 60deg, rgba(255,255,255,.14) 68deg, transparent 76deg,
      transparent 90deg, rgba(255,0,122,.18) 98deg, transparent 106deg,
      transparent 130deg, rgba(77,61,255,.20) 138deg, transparent 146deg,
      transparent 170deg, rgba(255,255,255,.12) 178deg, transparent 186deg,
      transparent 210deg, rgba(255,0,122,.20) 218deg, transparent 226deg,
      transparent 250deg, rgba(77,61,255,.22) 258deg, transparent 266deg,
      transparent 290deg, rgba(255,255,255,.12) 298deg, transparent 306deg,
      transparent 330deg, rgba(255,0,122,.18) 338deg, transparent 346deg, transparent 360deg);
  animation:spin 44s linear infinite;
  -webkit-mask-image:radial-gradient(closest-side,#000 18%,transparent 78%);
  mask-image:radial-gradient(closest-side,#000 18%,transparent 78%)}
@keyframes spin{to{transform:rotate(1turn)}}
@media(prefers-reduced-motion:reduce){.burst{animation:none}}
.cta-in{position:relative;z-index:10;max-width:60rem}
.cta-in h2{margin-bottom:24px;font-size:clamp(34px,5.4vw,66px)}
.cta-in p{color:rgba(255,255,255,.75);font-size:18px;line-height:1.7;margin:0 0 40px}

/* ---- FAQ 手风琴（Stitch 式暗色圆角条）---- */
.faq-sec{max-width:940px;margin:0 auto;padding:40px 32px 120px}
.faq-sec h2{margin-bottom:44px}
.faq-anim{display:block;margin-bottom:12px;transform:translateY(16px);opacity:0;
  transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .45s ease}
.faq-anim.in{transform:none;opacity:1}
.faq-item{border-radius:16px;background:rgba(255,255,255,.035);border:1px solid var(--line);
  overflow:hidden;transition:background .2s ease,border-color .2s ease}
.faq-item:hover{border-color:rgba(255,255,255,.12)}
.faq-item.open{background:rgba(255,255,255,.05)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 26px;text-align:start;color:var(--ink)}
.faq-q h3{margin:0;font-size:19px;font-weight:500;line-height:1.35}
.faq-plus{font-size:22px;color:rgba(255,255,255,.7);flex:none;
  transition:transform .3s cubic-bezier(.16,1,.3,1)}
.faq-item.open .faq-plus{transform:rotate(45deg)}
/* 答案常驻 DOM（爬虫/AI 不跑 JS 也读得到），只用 max-height 折叠 */
.faq-a-wrap{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.16,1,.3,1)}
.faq-a{padding:0 26px 22px;font-size:15.5px;line-height:1.75;color:var(--dim)}

footer{position:relative;z-index:10;border-top:1px solid rgba(255,255,255,.05);padding:32px 0}
footer .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  font-size:12.5px;color:#6b7280}
footer img{width:18px;height:18px;border-radius:5px;opacity:.75}
footer .links{margin-inline-start:auto;display:flex;flex-wrap:wrap;gap:20px}
footer a:hover{color:#cbd2dd}