:root { --ink:#102d4f; --blue:#3979cf; --light:#edf5ff; --line:#c9dcf2; --mint:#b8ec64; --deep:#091c31; --muted:#5b7898; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); font:15px/1.8 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:30; top:0; right:0; left:0; border-bottom:1px solid rgba(22,66,109,.16); background:rgba(255,255,255,.96); backdrop-filter:blur(12px); }
.header-inner { display:grid; grid-template-columns:220px 1fr auto; align-items:center; min-height:78px; gap:22px; }
.brand { display:inline-flex; align-items:center; gap:11px; min-width:0; }
.brand img { width:43px; height:43px; padding:3px; border-radius:5px; background:#eff6ff; object-fit:contain; }
.brand span { display:grid; line-height:1.12; }
.brand b { font-size:16px; white-space:nowrap; }
.brand small { margin-top:4px; color:#557493; font-size:12px; font-weight:700; white-space:nowrap; }
.site-nav ul { display:flex; justify-content:center; gap:19px; margin:0; padding:0; list-style:none; }
.site-nav a { display:block; padding:8px 0; border-bottom:2px solid transparent; font-size:13px; font-weight:800; }
.site-nav a:hover { border-color:var(--blue); color:var(--blue); }
.header-actions { display:flex; align-items:center; gap:10px; }
.header-download { padding:8px 14px; border-radius:5px; color:#fff; background:var(--ink); font-size:13px; font-weight:800; }
.menu-toggle { display:none; width:39px; height:39px; padding:8px; border:1px solid var(--ink); border-radius:5px; background:#fff; }
.menu-toggle i { position:relative; display:block; height:5px; }
.menu-toggle i::before { position:absolute; top:1px; right:0; left:0; height:2px; background:var(--ink); content:""; }
.hero { padding:146px 0 96px; overflow:hidden; background:linear-gradient(120deg,#edf6ff 0 58%,#1d4c7e 58% 100%); }
.hero-grid { display:grid; grid-template-columns:.83fr 1.17fr; align-items:center; gap:69px; }
.eyebrow { margin:0 0 14px; color:var(--blue); font:900 12px/1 Arial,sans-serif; letter-spacing:2px; }
h1 { margin:0; font-size:clamp(54px,6.5vw,82px); line-height:.98; letter-spacing:-4px; }
.hero-text { max-width:500px; margin:25px 0 0; color:#496b8e; font-size:17px; line-height:2; }
.hero-download,.download a { display:inline-flex; align-items:center; justify-content:space-between; gap:36px; padding:15px 18px 15px 23px; border-radius:5px; color:#fff; background:var(--ink); box-shadow:6px 6px 0 rgba(16,45,79,.16); font-weight:900; }
.hero-download { margin-top:28px; }
.age-label { display:block; width:max-content; margin-top:15px; color:#527493; font-size:13px; }
.hero-note { margin:27px 0 0; color:#40668e; font-size:12px; font-weight:900; }
.hero-carousel { position:relative; padding:15px; border:1px solid rgba(255,255,255,.38); border-radius:5px; background:rgba(7,25,45,.5); box-shadow:18px 23px 0 rgba(8,33,59,.18); }
.carousel-top,.carousel-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; color:#dcecff; }
.carousel-top { padding-bottom:12px; font-size:10px; font-weight:900; letter-spacing:1.2px; }
.carousel-top p { margin:0; }
.carousel-viewport { position:relative; min-height:311px; overflow:hidden; border-radius:3px; background:#8bb2dc; }
.slide { position:absolute; inset:0; display:grid; margin:0; opacity:0; transition:opacity .5s ease; pointer-events:none; }
.slide.is-active { position:relative; opacity:1; pointer-events:auto; }
.slide img { display:block; width:100%; height:100%; object-fit:contain; background:#8bb2dc; }
.slide figcaption { position:absolute; right:12px; bottom:12px; padding:5px 9px; border-radius:3px; color:#fff; background:rgba(9,28,49,.78); font-size:11px; font-weight:800; }
.carousel-bottom { padding-top:13px; }
.carousel-dots { display:flex; gap:6px; }
.carousel-dots button { position:relative; width:26px; height:16px; padding:0; border:0; background:transparent; }
.carousel-dots i { position:absolute; top:7px; right:0; left:0; height:2px; background:#779fc8; }
.carousel-dots button.is-active i { height:3px; background:var(--mint); }
.carousel-buttons { display:flex; gap:7px; }
.carousel-buttons button { display:grid; width:29px; height:29px; place-items:center; border:1px solid rgba(255,255,255,.5); border-radius:3px; color:#fff; background:transparent; }
.features,.screens,.faq { padding:112px 0; }
.section-lead,.reviews-head { display:flex; align-items:end; justify-content:space-between; gap:50px; }
.section-lead h2,.guide h2,.faq h2,.reviews h2,.download h2 { margin:0; font-size:clamp(42px,5vw,64px); line-height:1; letter-spacing:-3px; }
.section-lead>p,.reviews-head>p { max-width:410px; margin:0; color:var(--muted); }
.use-map { display:grid; grid-template-columns:1fr 104px 1.28fr; gap:14px; align-items:stretch; margin-top:51px; }
.use-map article { position:relative; border-radius:5px; }
.use-problem { min-height:308px; padding:28px; color:#fff; background:var(--ink); }
.use-map article>span { display:block; margin-bottom:35px; font-size:11px; font-weight:900; letter-spacing:1px; }
.use-problem h3,.use-outcome h3 { max-width:230px; margin:0; font-size:27px; line-height:1.22; }
.use-problem p,.use-outcome p { max-width:250px; margin:15px 0 0; color:#bfd5ed; }
.use-problem>.icon { position:absolute; right:24px; bottom:23px; width:50px; height:50px; color:var(--mint); }
.use-connector { display:grid; align-content:center; justify-items:center; gap:12px; color:var(--blue); font-size:11px; font-weight:900; text-align:center; }
.use-connector>.icon { width:30px; height:30px; }
.use-result { grid-row:span 2; padding:28px; border:1px solid var(--line); background:#f6faff; }
.use-result ul { display:grid; gap:11px; margin:0; padding:0; list-style:none; }
.use-result li { display:grid; grid-template-columns:37px 1fr; align-items:center; gap:11px; padding:13px; border-radius:5px; background:#fff; box-shadow:0 4px 15px rgba(40,89,140,.07); }
.use-result li>.icon { display:grid; width:37px; height:37px; place-items:center; border-radius:5px; color:#fff; background:var(--blue); }
.use-result b,.use-result small { display:block; }
.use-result small { color:#6a86a2; font-size:11px; }
.use-outcome { padding:24px 28px; background:var(--mint); }
.use-outcome>span { margin-bottom:14px!important; color:#3d6330; }
.use-outcome h3 { font-size:23px; }
.use-outcome p { margin-top:9px; color:#456c39; }
.use-outcome>.icon { position:absolute; right:24px; bottom:23px; width:35px; height:35px; color:#21523e; }
.guide { padding:112px 0; color:#fff; background:#102b48; }
.guide .eyebrow { color:var(--mint); }
.guide-grid { display:grid; grid-template-columns:.75fr 1.25fr; gap:95px; }
.guide-copy>p:not(.eyebrow) { max-width:330px; margin:22px 0 0; color:#bbd3eb; }
.guide-board { display:grid; gap:11px; }
.guide-board article { display:grid; grid-template-columns:42px 1fr 138px; align-items:center; gap:17px; padding:15px; border:1px solid rgba(199,225,255,.3); border-radius:5px; background:rgba(255,255,255,.06); }
.guide-number { color:var(--mint); font-size:12px; font-weight:900; }
.guide-board h3 { margin:0; font-size:19px; }
.guide-board p { margin:4px 0 0; color:#c2d9ef; font-size:13px; }
.guide-board aside { display:grid; grid-template-columns:27px 1fr; align-items:center; gap:2px 9px; padding:9px; border-radius:3px; color:#d6e6f6; background:rgba(0,0,0,.17); font-size:10px; }
.guide-board aside>.icon { grid-row:span 2; color:var(--mint); }
.guide-board aside b { color:#fff; font-size:11px; }
.screens { background:#f0f6ff; }
.screens-scroll { margin-top:50px; }
.screen-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }
.screen-grid figure { margin:0; padding:11px; border:1px solid var(--line); border-radius:5px; background:#fff; }
.screen-grid img { display:block; width:100%; height:auto; object-fit:contain; }
.screen-grid figcaption { display:grid; gap:1px; margin-top:11px; }
.screen-grid figcaption b { font-size:14px; }
.screen-grid figcaption span { color:#66829f; font-size:12px; }
.faq-layout { display:grid; grid-template-columns:.75fr 1.25fr; gap:100px; }
.faq-list { border-top:1px solid var(--ink); }
.faq-list article { border-bottom:1px solid var(--line); }
.faq-list button,.official-faq button { display:flex; align-items:center; justify-content:space-between; width:100%; padding:21px 0; border:0; background:transparent; font-size:16px; font-weight:800; text-align:left; }
.faq-list button span { padding-right:20px; }
.faq-list article>div,.official-faq>div { display:grid; grid-template-rows:0fr; transition:grid-template-rows .22s ease; }
.faq-list article.is-open>div,.official-faq.is-open>div { grid-template-rows:1fr; }
.faq-list p,.official-faq p { margin:0; overflow:hidden; color:var(--muted); }
.faq-list article.is-open p { padding:0 30px 21px 0; }
.official-faq { width:min(1200px,calc(100% - 48px)); margin:20px auto 0; border:1px solid #287349; border-radius:5px; background:#f9fffb; }
.official-faq button { padding:19px 22px; }
.official-faq button span { display:flex; align-items:center; gap:12px; }
.official-faq.is-open p { padding:0 22px 20px 55px; color:#286044; font-weight:800; }
.reviews { padding:112px 0; color:#fff; background:linear-gradient(120deg,#143a5f,#3178b5); }
.reviews .eyebrow { color:var(--mint); }
.reviews-head>p { color:#cae1f5; }
.review-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin-top:48px; }
.review-grid article { display:flex; flex-direction:column; min-height:248px; padding:22px; border-radius:5px; color:var(--ink); background:#fff; }
.review-meta { display:flex; align-items:center; gap:10px; }
.review-grid article>p { flex:1; margin:19px 0; font-size:14px; }
.review-grid small { color:#6a839d; text-align:right; }
.download { padding:85px 0; background:var(--mint); }
.download-inner { display:flex; align-items:center; justify-content:space-between; gap:50px; }
.download .eyebrow { color:#3a632e; }
.download-inner>div>p:last-child { margin:18px 0 0; color:#496f3e; }
.site-footer { padding:19px 0; color:#fff; background:#071827; }
.footer-inner { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:25px; }
.footer-brand img { width:36px; height:36px; }
.footer-brand b { font-size:14px; }
.footer-brand small { color:#9bc5ed; font-size:10px; }
.footer-nav ul { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 15px; margin:0; padding:0; list-style:none; font-size:12px; font-weight:800; }
.footer-nav a:hover { color:var(--mint); }
.footer-inner>p { margin:0; color:#bdd4eb; font-size:12px; white-space:nowrap; }
.back-top { position:fixed; z-index:20; right:22px; bottom:22px; display:grid; width:49px; height:53px; place-items:center; border-radius:5px; color:#fff; background:var(--ink); opacity:0; pointer-events:none; transform:translateY(13px); transition:opacity .2s ease,transform .2s ease; }
.back-top.is-visible { opacity:1; pointer-events:auto; transform:none; }
.back-top span { font-size:10px; font-weight:800; }
.icon { position:relative; display:inline-block; width:18px; height:18px; flex:0 0 18px; color:currentColor; }
.icon::before,.icon::after,.avatar::before,.avatar::after,.rating i::before { 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-left::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-left::before { top:4px; left:7px; transform:rotate(-135deg); }
.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-sliders::before { top:3px; left:3px; width:12px; height:2px; background:currentColor; box-shadow:0 5px 0 currentColor,0 10px 0 currentColor; }
.icon-sliders::after { top:1px; left:6px; width:4px; height:4px; border-radius:50%; background:currentColor; box-shadow:4px 5px 0 currentColor,-3px 10px 0 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-version::before { top:3px; left:3px; width:12px; height:10px; border:2px solid currentColor; border-radius:2px; }
.icon-version::after { top:11px; left:6px; width:6px; height:2px; background:currentColor; box-shadow:0 -5px 0 currentColor; }
.icon-question::before { top:1px; left:4px; width:10px; height:10px; border:3px solid currentColor; border-bottom:0; border-radius:50% 50% 0 0; }
.icon-question::after { top:13px; left:8px; width:3px; height:3px; border-radius:50%; background:currentColor; box-shadow:0 -6px 0 -1px currentColor; }
.icon-check::before { top:4px; left:4px; width:10px; height:6px; border-bottom:2px solid currentColor; border-left:2px solid currentColor; transform:rotate(-45deg); }
.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; }
.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; }
.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; }
.rating { display:flex; gap:2px; margin-left:auto; color:#ff5e89; }
.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; background:#fff; content:""; clip-path:polygon(50% 0,61% 34%,98% 36%,68% 57%,79% 94%,50% 73%,21% 94%,32% 57%,2% 36%,39% 34%); }
@media (max-width:800px) { .shell { width:min(100% - 32px,590px); }.header-inner { display:flex; min-height:70px; gap:10px; }.brand { flex:1 1 auto; gap:9px; }.brand img { width:40px; height:40px; }.brand b { font-size:15px; }.brand small { margin-top:3px; font-size:11px; }.site-nav { display:none; }.site-nav.is-open { position:absolute; top:70px; right:0; left:0; display:block; padding:12px 16px; background:#fff; box-shadow:0 13px 24px rgba(14,42,73,.16); }.site-nav.is-open ul { display:grid; overflow:hidden; border:1px solid var(--line); border-radius:5px; }.site-nav.is-open li + li { border-top:1px solid var(--line); }.site-nav.is-open a { padding:11px 13px; }.header-actions { flex:0 0 auto; gap:9px; }.header-download { padding:9px 12px; }.menu-toggle { display:block; }.hero { padding:98px 0 65px; background:#edf6ff; }.hero-grid { grid-template-columns:1fr; gap:34px; }.hero-copy { text-align:center; }.hero-text { margin-right:auto; margin-left:auto; font-size:15px; }.hero-download { margin-top:25px; }.age-label { margin-right:auto; margin-left:auto; }.hero-note { margin-bottom:0; }.hero-carousel { width:100%; }.carousel-viewport { min-height:0; aspect-ratio:600/337; }.features,.guide,.screens,.faq,.reviews { padding:74px 0; }.section-lead,.reviews-head,.download-inner { display:block; }.section-lead>p,.reviews-head>p { margin:19px 0 0; }.use-map { grid-template-columns:1fr; gap:13px; margin-top:36px; }.use-problem { min-height:0; }.use-connector { display:flex; justify-content:center; }.use-connector>.icon { transform:rotate(90deg); }.use-result { grid-row:auto; }.guide-grid,.faq-layout { grid-template-columns:1fr; gap:37px; }.guide-board { margin-top:32px; }.guide-board article { grid-template-columns:32px 1fr; gap:12px; }.guide-board aside { grid-column:2; grid-template-columns:27px 1fr; }.screens-scroll { margin-top:34px; overflow-x:auto; scroll-snap-type:x mandatory; }.screen-grid { display:flex; width:max-content; gap:12px; padding-right:16px; }.screen-grid figure { width:74vw; max-width:320px; scroll-snap-align:start; }.official-faq { width:calc(100% - 32px); }.review-grid { grid-template-columns:1fr; gap:12px; margin-top:34px; }.review-grid article { min-height:0; }.download { padding:64px 0; text-align:center; }.download a { margin-top:28px; }.site-footer { padding:25px 0; }.footer-inner { grid-template-columns:1fr; justify-items:center; gap:16px; text-align:center; }.footer-nav ul { max-width:315px; }.footer-inner>p { white-space:normal; }.back-top { right:14px; bottom:14px; }a,button,summary { -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; } }
@media (max-width:390px) { .header-inner { gap:8px; }.brand { gap:7px; }.brand img { width:37px; height:37px; }.brand b { font-size:14px; }.brand small { font-size:10px; }.header-download { padding:9px 10px; font-size:12px; }.menu-toggle { width:39px; height:39px; }.hero h1 { font-size:46px; }.hero-carousel { padding:10px; }.carousel-top { padding-bottom:9px; }.carousel-bottom { padding-top:9px; }.guide-board article { padding:13px; } }