:root { --sky:#78a7e6; --blue:#477fd2; --deep:#173764; --ink:#18304d; --cloud:#eef5ff; --lime:#b7e65d; --line:#cddcf0; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); font:15px/1.75 Arial,"Microsoft YaHei",sans-serif; } a { color:inherit; text-decoration:none; } button { color:inherit; font:inherit; }.shell { width:min(1180px,calc(100% - 48px)); margin:auto; }
.site-header { position:fixed; z-index:20; top:0; right:0; left:0; border-bottom:1px solid #c7d8ed; background:rgba(255,255,255,.97); }.nav-wrap { display:grid; grid-template-columns:220px 1fr auto; align-items:center; min-height:78px; gap:22px; }.brand { display:inline-flex; align-items:center; gap:12px; white-space:nowrap; }.brand img { width:46px; height:46px; padding:3px; border-radius:5px; object-fit:contain; background:#edf5ff; }.brand-copy { display:grid; gap:4px; line-height:1.1; }.brand-copy b { font-size:17px; }.brand-copy small { color:#60728b; font-size:12px; font-weight:600; }.site-nav ul { display:flex; justify-content:center; gap:22px; margin:0; padding:0; list-style:none; }.site-nav a { padding:8px 0; border-bottom:2px solid transparent; font-size:13px; font-weight:900; }.site-nav a:hover { border-color:var(--blue); color:var(--blue); }.nav-actions { display:flex; align-items:center; gap:10px; }.nav-download { padding:8px 13px; border-radius:5px; color:#fff; background:var(--blue); font-size:13px; font-weight:900; }.menu-toggle { display:none; width:38px; height:38px; padding:8px; border:1px solid var(--ink); border-radius:5px; background:#fff; }.menu-toggle i { display:block; height:2px; margin:4px 0; background:var(--ink); }
.hero { padding:146px 0 94px; overflow:hidden; background:linear-gradient(135deg,#e7f4ff,#91b8ed); }.hero-layout { display:grid; grid-template-columns:.84fr 1.16fr; align-items:center; gap:68px; }.eyebrow { margin:0 0 13px; color:var(--blue); font:900 12px/1 Arial,sans-serif; letter-spacing:2px; }h1 { margin:0 0 25px; font-size:clamp(50px,6vw,80px); line-height:1; letter-spacing:-4px; }.hero-intro { max-width:505px; margin:0; color:#3e5d84; font-size:17px; line-height:2; }.hero-actions { margin-top:28px; }.hero-download { display:inline-flex; align-items:center; justify-content:space-between; gap:39px; padding:15px 19px 15px 23px; border-radius:5px; color:#fff; background:var(--deep); font-weight:900; box-shadow:6px 6px 0 rgba(23,55,100,.23); }.hero-download b { font-size:21px; }.age-label { display:block; width:max-content; margin-top:14px; color:#507093; font-size:13px; }.hero-note { margin:29px 0 0; color:#456789; font-size:12px; font-weight:800; }
.launcher-stage { position:relative; display:grid; min-height:488px; place-items:center; }.block { position:absolute; width:115px; height:115px; background:linear-gradient(135deg,#5a9858 0 33%,#8f663c 33% 66%,#5a9858 66%); box-shadow:15px 15px 0 rgba(42,84,126,.12); }.block-one { top:14px; right:9%; transform:rotate(16deg); }.block-two { bottom:13px; left:0; width:82px; height:82px; transform:rotate(-18deg); }.launcher-device { position:relative; z-index:1; width:485px; overflow:hidden; border:8px solid #fff; border-radius:5px; background:#a7c3e8; box-shadow:16px 20px 0 rgba(42,74,113,.23); }.device-status { display:flex; align-items:center; justify-content:space-between; padding:9px 13px; color:#eaf4ff; background:#4877b4; font-size:10px; font-weight:900; }.device-body { display:grid; grid-template-columns:53px 1fr; min-height:337px; background:linear-gradient(135deg,rgba(129,178,232,.88),rgba(86,137,195,.74)); }.device-body aside { display:grid; align-content:start; gap:10px; padding:13px 8px; background:rgba(63,111,176,.9); }.launch-tab { width:35px; height:35px; border:0; border-radius:5px; color:#d8ecff; background:transparent; font-size:16px; cursor:pointer; }.launch-tab.is-active { color:#fff; background:#2c5f9f; }.launch-panel { padding:21px; color:#fff; }.panel-kicker { margin:0; color:#d3ff80; font-size:10px; font-weight:900; letter-spacing:1.4px; }.launch-panel h2 { margin:5px 0 15px; font-size:25px; line-height:1; }.panel-world { position:relative; display:grid; height:109px; place-items:center; overflow:hidden; border:1px solid rgba(255,255,255,.35); border-radius:5px; background:linear-gradient(#9bd0ff 0 52%,#83b85a 52%); }.panel-world i { position:absolute; width:24px; height:24px; background:#61903f; }.panel-world i:nth-child(1) { bottom:14px; left:25%; }.panel-world i:nth-child(2) { right:17%; bottom:24px; width:31px; height:31px; background:#8d6239; }.panel-world i:nth-child(3) { top:21px; left:17%; width:13px; height:13px; background:#fff; }.panel-world span { position:relative; z-index:1; padding:4px 9px; border-radius:5px; background:rgba(28,58,95,.78); font-size:11px; font-weight:900; }.panel-info { margin-top:13px; }.panel-info p { display:flex; justify-content:space-between; margin:6px 0; color:#ddecff; font-size:11px; }.launch-button { display:flex; justify-content:space-between; width:100%; margin-top:15px; padding:10px 13px; border:0; border-radius:5px; color:#173764; background:#b7e65d; font-size:13px; font-weight:900; cursor:pointer; }.stage-tip { position:absolute; right:0; bottom:-1px; margin:0; color:#42698f; font-size:11px; font-weight:800; }
.section-heading h2,.flow-heading h2,.review-heading h2,.faq-layout h2 { margin:0; font-size:clamp(40px,5vw,62px); line-height:1; letter-spacing:-3px; }.section-heading>p:not(.eyebrow) { max-width:500px; margin:18px 0 0; color:#60728b; }.features-section { padding:108px 0; background:#fff; }.feature-grid { display:grid; grid-template-columns:repeat(4,1fr); margin-top:55px; border-top:1px solid var(--ink); }.feature-grid article { min-height:245px; padding:21px; border-right:1px solid var(--line); }.feature-grid article:first-child { border-left:1px solid var(--line); }.feature-grid b { color:var(--blue); }.feature-grid h3 { margin:48px 0 9px; font-size:19px; }.feature-grid p { margin:0; color:#65768c; font-size:14px; }
.flow-section { padding:106px 0; color:#fff; background:linear-gradient(120deg,#224a82,#5e96d8); }.flow-section .eyebrow { color:var(--lime); }.flow-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin-top:47px; }.flow-grid article { position:relative; min-height:210px; padding:23px; border:1px solid rgba(255,255,255,.35); border-radius:5px; background:rgba(255,255,255,.1); }.flow-grid span { display:grid; width:32px; height:32px; place-items:center; border-radius:50%; color:#234c85; background:var(--lime); font-size:12px; font-weight:900; }.flow-grid h3 { margin:38px 0 9px; font-size:20px; }.flow-grid p { margin:0; color:#e4efff; }
.screens-section { padding:108px 0; background:var(--cloud); }.screens-scroll { margin-top:47px; }.screens-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.screens-grid figure { margin:0; padding:12px; border:1px solid #c7d9ef; border-radius:5px; background:#fff; }.screens-grid img { display:block; width:100%; height:auto; object-fit:contain; }.screens-grid figcaption { margin-top:10px; color:#59708c; font-size:12px; font-weight:800; }
.faq-section { padding:108px 0; background:#fff; }.faq-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:105px; }.faq-list { border-top:1px solid var(--ink); }.faq-list article { border-bottom:1px solid var(--line); }.faq-list button { display:flex; justify-content:space-between; width:100%; padding:21px 0; border:0; background:transparent; font-size:17px; font-weight:800; text-align:left; cursor:pointer; }.faq-list button b { color:var(--blue); font-size:23px; font-weight:400; }.faq-list article>div { display:grid; grid-template-rows:0fr; transition:grid-template-rows .2s ease; }.faq-list article.is-open>div { grid-template-rows:1fr; }.faq-list p { margin:0; overflow:hidden; color:#64758a; }.faq-list article.is-open p { padding:0 24px 20px 0; }
.official-faq-wrap {
  width:min(1200px,calc(100% - 48px));
  margin:18px auto 0;
}

.official-faq {
  border:1px solid var(--deep);
  border-radius:5px;
  background:#f8fbff;
}

.official-faq button {
  display:flex;
  justify-content:space-between;
  width:100%;
  padding:20px 22px;
  border:0;
  background:transparent;
  font-size:17px;
  font-weight:800;
  text-align:left;
  cursor:pointer;
}

.official-faq button span {
  display:flex;
  align-items:center;
  gap:12px;
}

.official-faq button i {
  position:relative;
  display:inline-block;
  width:18px;
  height:18px;
  flex:0 0 18px;
  border:2px solid #247349;
  border-radius:50%;
  color:transparent;
  background:transparent;
  font-size:0;
  font-style:normal;
}

.official-faq button i::before,
.official-faq button i::after {
  position:absolute;
  content:"";
}

.official-faq button i::before {
  top:1px;
  right:4px;
  bottom:1px;
  left:4px;
  border-right:1px solid #247349;
  border-left:1px solid #247349;
  border-radius:50%;
}

.official-faq button i::after {
  top:7px;
  right:1px;
  left:1px;
  border-top:1px solid #247349;
}

.official-faq button>b {
  color:var(--blue);
  font-size:23px;
  font-weight:400;
}

.official-faq>div {
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .2s ease;
}

.official-faq.is-open>div { grid-template-rows:1fr; }

.official-faq p {
  margin:0;
  overflow:hidden;
  color:var(--deep);
  font-weight:800;
}

.official-faq.is-open p { padding:0 22px 20px 56px; }
.review-section { padding:106px 0; color:#fff; background:#19365b; }
.review-section .eyebrow { color:var(--lime); }
.review-heading { display:flex; align-items:end; justify-content:space-between; gap:40px; }
.review-heading>p { max-width:380px; margin:0; color:#c1d6f2; }
.review-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:46px; }
.review-grid article { display:flex; flex-direction:column; min-height:250px; padding:23px; border-radius:5px; color:var(--ink); background:#fff; }
.review-meta { display:flex; align-items:center; gap:10px; }
.review-meta span { margin-left:auto; color:#ff5e89; font-size:13px; }
.review-grid p { flex:1; margin:20px 0; font-size:14px; }
.review-grid small { color:#697a90; text-align:right; }
.download-section { padding:78px 0; background:var(--lime); }.download-layout { display:flex; align-items:center; justify-content:space-between; gap:40px; }.download-layout p { margin:0 0 12px; color:#3d5a28; font-size:11px; font-weight:900; letter-spacing:1.8px; }.download-layout h2 { margin:0; font-size:clamp(35px,4.4vw,57px); line-height:1; letter-spacing:-3px; }.download-layout a { display:flex; align-items:center; justify-content:space-between; gap:35px; padding:15px 18px; border-radius:5px; color:#fff; background:var(--deep); font-weight:900; }.download-layout a b { font-size:20px; }
.site-footer { padding:19px 0; color:#fff; background:#101f31; }.footer-layout { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:25px; }.footer-brand img { width:35px; height:35px; }.footer-brand span { line-height:1.1; font-size:14px; font-weight:900; }.footer-brand small { display:block; margin-top:4px; color:#9dc0e6; font-size:10px; font-weight:400; }.footer-map ul { display:flex; flex-wrap:wrap; justify-content:center; gap:9px 15px; margin:0; padding:0; list-style:none; font-size:12px; font-weight:800; }.footer-map a:hover { color:var(--lime); }.footer-layout>p { margin:0; color:#b4c8df; font-size:12px; white-space:nowrap; }.back-to-top { position:fixed; z-index:15; right:22px; bottom:22px; display:grid; width:48px; height:48px; place-items:center; border-radius:5px; color:#fff; background:var(--deep); opacity:0; pointer-events:none; transform:translateY(12px); transition:opacity .2s ease,transform .2s ease; }.back-to-top.is-visible { opacity:1; pointer-events:auto; transform:none; }.back-to-top span { font-size:19px; line-height:1; }.back-to-top b { font-size:10px; line-height:1; }
@media (max-width:800px) {
  .shell { width:min(100% - 32px,590px); }
  .nav-wrap { grid-template-columns:auto 1fr auto; min-height:66px; gap:10px; }
  .brand img { width:37px; height:37px; }
  .brand-copy b { font-size:14px; }
  .brand-copy small { font-size:10px; }
  .site-nav { display:none; }
  .nav-actions { justify-self:end; }
  .nav-download { padding:8px 11px; }
  .menu-toggle { display:block; }
  .site-nav.is-open { position:absolute; top:66px; right:0; left:0; display:block; padding:12px 16px; background:#fff; box-shadow:0 12px 24px rgba(23,55,100,.16); }
  .site-nav.is-open ul { display:grid; overflow:hidden; border:1px solid #d9e2ee; border-radius:5px; }
  .site-nav.is-open li + li { border-top:1px solid #e3e9f2; }
  .site-nav.is-open a { display:flex; padding:11px 13px; font-size:13px; }
  .hero { padding:98px 0 55px; }
  .hero-layout { grid-template-columns:1fr; gap:34px; }
  .hero-copy { text-align:center; }
  .hero h1 { font-size:50px; }
  .hero-intro { max-width:395px; margin:auto; font-size:15px; line-height:1.9; }
  .age-label { margin:14px auto 0; }
  .launcher-stage { min-height:425px; border-radius:5px; background:rgba(255,255,255,.28); }
  .launcher-device { width:min(465px,calc(100% - 25px)); transform:scale(.9); }
  .stage-tip { right:15px; bottom:8px; }
  .features-section,.flow-section,.screens-section,.faq-section,.review-section { padding:72px 0; }
  .feature-grid { grid-template-columns:repeat(2,1fr); margin-top:36px; }
  .feature-grid article { min-height:200px; padding:17px; }
  .feature-grid h3 { margin-top:30px; font-size:17px; }
  .flow-grid { grid-template-columns:1fr; margin-top:32px; }
  .flow-grid article { min-height:0; }
  .flow-grid h3 { margin-top:25px; }
  .screens-scroll { margin-top:32px; overflow-x:auto; scroll-snap-type:x mandatory; }
  .screens-grid { display:flex; width:max-content; gap:12px; padding-right:16px; }
  .screens-grid figure { width:74vw; max-width:320px; scroll-snap-align:start; }
  .faq-layout { grid-template-columns:1fr; gap:37px; }
  .review-heading,.download-layout { display:block; }
  .review-heading>p { margin:18px 0 0; }
  .review-grid { grid-template-columns:1fr; gap:12px; margin-top:34px; }
  .review-grid article { min-height:0; }
  .download-section { padding:60px 0; }
  .download-layout { text-align:center; }
  .download-layout a { display:flex; width:max-content; margin:27px auto 0; }
  .footer-layout { grid-template-columns:1fr; justify-items:center; gap:15px; text-align:center; }
  .footer-brand { justify-content:center; }
  .footer-layout>p { white-space:normal; }
  .back-to-top { right:14px; bottom:14px; }
  a,button,summary { -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; }
}
@media (max-width:390px) { .brand { gap:6px; }.brand img { width:36px; height:36px; }.brand-copy b { font-size:13px; }.brand-copy small { font-size:10px; }.nav-download { padding:8px 9px; font-size:12px; }.hero h1 { font-size:43px; }.launcher-device { transform:scale(.76); }.launcher-stage { min-height:374px; }.feature-grid { grid-template-columns:1fr; }.feature-grid article { min-height:0; border-left:1px solid var(--line); } }

/* 页面图标统一由 i 标签及其伪元素绘制，不使用字符、位图或外链图标。 */
.icon {
  position:relative;
  display:inline-block;
  width:18px;
  height:18px;
  flex:0 0 18px;
  color:currentColor;
  vertical-align:middle;
}

.icon::before,
.icon::after,
.menu-toggle i::before,
.status-lights i::before,
.rating i::before,
.avatar::before,
.avatar::after {
  position:absolute;
  display:block;
  content:"";
}

.icon-download::before {
  top:1px;
  left:8px;
  width:2px;
  height:9px;
  background:currentColor;
}

.icon-download::after {
  top:7px;
  left:5px;
  width:6px;
  height:6px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
}

.icon-arrow::before,
.icon-up::before {
  width:8px;
  height:8px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
}

.icon-arrow::before {
  top:4px;
  left:3px;
  transform:rotate(45deg);
}

.icon-up::before {
  top:6px;
  left:4px;
  transform:rotate(-45deg);
}

.icon-up::after {
  top:5px;
  left:8px;
  width:2px;
  height:11px;
  background:currentColor;
}

.icon-play::before {
  top:3px;
  left:5px;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  border-left:9px solid currentColor;
}

.icon-settings::before {
  top:4px;
  left:4px;
  width:8px;
  height:8px;
  border:2px solid currentColor;
  border-radius:50%;
  box-shadow:0 -5px 0 -3px currentColor,0 5px 0 -3px currentColor,5px 0 0 -3px currentColor,-5px 0 0 -3px currentColor;
}

.icon-layout::before {
  top:3px;
  left:3px;
  width:5px;
  height:5px;
  background:currentColor;
  box-shadow:7px 0 0 currentColor,0 7px 0 currentColor,7px 7px 0 currentColor;
}

.icon-plus::before,
.icon-plus::after {
  top:8px;
  left:2px;
  width:14px;
  height:2px;
  background:currentColor;
}

.icon-plus::after { transform:rotate(90deg); }

.icon-globe {
  border:2px solid #247349;
  border-radius:50%;
  color:#247349;
  background:transparent;
}

.icon-globe::before {
  top:1px;
  right:4px;
  bottom:1px;
  left:4px;
  border-right:1px solid currentColor;
  border-left:1px solid currentColor;
  border-radius:50%;
}

.icon-globe::after {
  top:7px;
  right:1px;
  left:1px;
  border-top:1px solid currentColor;
}

.menu-toggle i {
  position:relative;
  display:block;
  height:4px;
  margin:2px 0;
  background:transparent;
}

.menu-toggle i::before {
  top:1px;
  right:0;
  left:0;
  height:2px;
  background:var(--ink);
}

.status-lights { display:flex; gap:4px; }

.status-lights i {
  position:relative;
  display:block;
  width:5px;
  height:5px;
}

.status-lights i::before {
  inset:0;
  border-radius:50%;
  background:currentColor;
}

.hero-download .icon,
.download-layout .icon,
.back-to-top .icon { color:#fff; }

.launch-button .icon { color:var(--deep); }

.launch-tab .icon { color:currentColor; }

.faq-list button>.icon,
.official-faq button>.icon-plus { color:var(--blue); }

.faq-list button>.icon { margin-left:18px; }

.official-faq button .icon-globe {
  width:18px;
  height:18px;
  flex:0 0 18px;
  font-size:0;
}

.official-faq button>.icon-plus {
  margin-left:18px;
  width:18px;
  height:18px;
  border:0;
  border-radius:0;
  background:transparent;
  font-size:0;
}

.official-faq button>.icon-plus::before,
.official-faq button>.icon-plus::after {
  top:8px;
  left:2px;
  width:14px;
  height:2px;
  border:0;
  border-radius:0;
  background:currentColor;
}

.official-faq button>.icon-plus::after { transform:rotate(90deg); }

.review-meta .avatar {
  position:relative;
  display:inline-block;
  width:38px;
  height:38px;
  flex:0 0 38px;
  overflow:hidden;
  border-radius:50%;
  background:var(--blue);
}

.avatar::before {
  top:7px;
  left:12px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#fff;
}

.avatar::after {
  right:7px;
  bottom:-7px;
  left:7px;
  height:20px;
  border-radius:50% 50% 0 0;
  background:#fff;
}

.review-meta .rating {
  display:flex;
  gap:2px;
  margin-left:auto;
  color:#ff5e89;
}

.review-meta .rating i {
  position:relative;
  display:inline-block;
  width:12px;
  height:12px;
}

.rating i::before {
  inset:0;
  background:currentColor;
  clip-path:polygon(50% 0,61% 34%,98% 36%,68% 57%,79% 94%,50% 73%,21% 94%,32% 57%,2% 36%,39% 34%);
}

.rating i.is-empty::after {
  position:absolute;
  top:2px;
  left:2px;
  width:8px;
  height:8px;
  content:"";
  background:#fff;
  clip-path:polygon(50% 0,61% 34%,98% 36%,68% 57%,79% 94%,50% 73%,21% 94%,32% 57%,2% 36%,39% 34%);
}

.back-to-top .icon { margin-top:4px; }

.site-nav.is-open a::after { content:none; }