:root {
  --primary: #2563EB;
  --primary-deep: #0B1F4D;
  --primary-lift: #60A5FA;
  --accent: #7C3AED;
  --success: #10B981;
  --warning: #F59E0B;
  /* light (default) */
  --ink: #0F172A;
  --ink-muted: #64748B;
  --ink-faint: #94A3B8;
  --hairline: #F1F5F9;
  --surface: #FFFFFF;
  --surface-raised: #F8FAFC;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #E8EDF5;
    --ink-muted: #94A3B8;
    --ink-faint: #64748B;
    --hairline: #1E293B;
    --surface: #0B1220;
    --surface-raised: #0E1626;
  }
}

/* --- i18n display contract (load-bearing): show only the active language --- */
html[data-lang="zh"] [data-lang-en] { display: none; }
html[data-lang="en"] [data-lang-zh] { display: none; }

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background: var(--surface);
  line-height: 1.6;
}
section { max-width: 960px; margin: 0 auto; padding: 64px 24px; }

/* Nav */
.nav { display: flex; justify-content: space-between; align-items: center;
       max-width: 960px; margin: 0 auto; padding: 18px 24px; }
.logo { font-weight: 700; font-size: 18px; color: var(--ink); }
.logo .dot { color: var(--primary-lift); }
.lang-toggle, .linklike {
  font: inherit; cursor: pointer; color: var(--ink-muted);
  background: none; border: 1px solid var(--hairline); border-radius: 999px;
  padding: 4px 12px;
}
.linklike { border: none; padding: 0; text-decoration: underline; }

/* Hero */
.hero { position: relative; max-width: none; padding: 0; overflow: hidden;
        background: radial-gradient(120% 120% at 80% 0%, #2563EB 0%, #0B1F4D 55%, #081634 100%); }
.hero-inner { max-width: 960px; margin: 0 auto; padding: 80px 24px 96px; position: relative; }
.hero-glow { position: absolute; right: -60px; top: -80px; width: 320px; height: 320px;
             background: radial-gradient(circle, rgba(96,165,250,.35), transparent 70%); }
.hero h1 { color: #fff; font-size: clamp(28px, 5vw, 44px); letter-spacing: -.01em; margin: 0 0 16px; }
.hero-sub { color: #c9dbff; font-size: clamp(15px, 2.4vw, 18px); max-width: 560px; margin: 0 0 28px; }
.hero-cta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.cta { display: inline-block; font-weight: 600; border-radius: 10px; padding: 11px 20px; }
.cta-soon { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.4); }
.hero-platforms { color: #9fb6e6; font-size: 13px; }

/* Trust strip */
.trust { text-align: center; }
.trust p { font-size: clamp(17px, 2.6vw, 22px); font-weight: 600; color: var(--primary); margin: 0; }

/* Features */
.features h2, .how h2, .platforms h2, .faq h2 { font-size: 26px; margin: 0 0 28px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature { background: var(--surface-raised); border: 1px solid var(--hairline);
           border-radius: 14px; padding: 20px; }
.feature h3 { margin: 0 0 6px; font-size: 16px; }
.feature p { margin: 0; color: var(--ink-muted); font-size: 14px; }

/* How */
.steps { list-style: none; padding: 0; display: grid; gap: 12px; }
.steps li { background: var(--surface-raised); border: 1px solid var(--hairline);
            border-radius: 12px; padding: 14px 18px; }
.how-note { color: var(--ink-muted); font-size: 14px; margin-top: 18px; }

/* Platforms */
.platform-grid { display: flex; gap: 14px; flex-wrap: wrap; }
.platform { flex: 1 1 160px; text-align: center; background: var(--surface-raised);
            border: 1px solid var(--hairline); border-radius: 14px; padding: 22px;
            font-weight: 600; opacity: .7; }
.platform .soon { display: block; margin-top: 6px; font-size: 11px; font-weight: 500; color: var(--warning); }

/* FAQ */
.faq details { border-bottom: 1px solid var(--hairline); padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq p { color: var(--ink-muted); margin: 10px 0 0; }

/* Footer */
.footer { text-align: center; padding: 48px 24px; color: var(--ink-muted); font-size: 14px; }
.footer a, .footer .linklike { color: var(--ink-muted); }
.brandline em { color: var(--ink); font-style: italic; }
.copyright { color: var(--ink-faint); margin-top: 12px; }

/* Responsive */
@media (max-width: 720px) {
  .feature-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .feature-grid { grid-template-columns: 1fr; }
}