:root { --forest:#07542d; --green:#159447; --lime:#ccea73; --mint:#edf8ed; --paper:#fffef9; --ink:#103d29; --muted:#5f766a; --line:#cfe1d1; --page:min(1200px,calc(100% - 48px)); --header:74px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { min-width:320px; margin:0; color:var(--ink); background:var(--paper); font:14px/1.6 "Microsoft YaHei",sans-serif; }
body,a,button { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
button { font:inherit; border:0; cursor:pointer; }
img { display:block; max-width:100%; }
h1,h2,h3,p,figure,ul,ol { margin:0; }
ul,ol { padding:0; list-style:none; }
.page { width:var(--page); margin:auto; }
.icon { display:inline-block; width:18px; height:18px; flex:0 0 18px; }
.icon::before { display:block; width:100%; height:100%; background:center/contain no-repeat; content:""; }
.icon-download::before { background-image:url("../icons/download.svg"); }
.icon-menu::before { background-image:url("../icons/menu.svg"); }
.icon-book::before { background-image:url("../icons/book.svg"); }
.icon-search::before { background-image:url("../icons/search.svg"); }
.icon-chart::before { background-image:url("../icons/chart.svg"); }
.icon-clock::before { background-image:url("../icons/clock.svg"); }
.icon-bookmark::before { background-image:url("../icons/bookmark.svg"); }
.icon-spark::before { background-image:url("../icons/spark.svg"); }
.icon-chevron::before { background-image:url("../icons/chevron.svg"); }
.icon-globe::before { background-image:url("../icons/globe.svg"); }
.icon-arrow::before { background-image:url("../icons/arrow.svg"); }
.icon-heart::before { background-image:url("../icons/heart.svg"); }
.site-header { position:sticky; top:0; z-index:10; height:var(--header); border-bottom:1px solid var(--line); background:#fffefdf5; }
.header-inner { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; width:var(--page); height:100%; margin:auto; }
.brand { display:flex; align-items:center; gap:8px; font-size:19px; font-weight:800; }
.brand img { width:38px; height:38px; object-fit:contain; }
.site-nav ul { display:flex; gap:28px; }
.site-nav a { display:block; padding:25px 0 22px; border-bottom:3px solid transparent; font-weight:800; }
.site-nav a:hover,.site-nav a:focus-visible,.site-nav a.is-active { color:var(--green); border-color:var(--green); }
.header-actions { display:flex; justify-content:flex-end; gap:10px; }
.nav-download,.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 18px; border-radius:5px; color:#fff; background:var(--green); font-weight:800; transition:.18s; }
.nav-download:hover,.nav-download:focus-visible,.button:hover,.button:focus-visible { background:var(--forest); transform:translateY(-2px); }
.nav-download .icon,.button .icon { filter:brightness(0) invert(1); }
.menu-toggle { display:none; width:42px; height:42px; border:1px solid var(--forest); border-radius:5px; background:#fff; }
.hero { overflow:hidden; background:linear-gradient(90deg,#fffef9 0%,#f3faed 100%); }
.hero-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; min-height:565px; }
.hero-copy { padding:85px 0; }
.eyebrow,.heading>p,.download p { color:var(--green); font-size:13px; font-weight:800; letter-spacing:1.4px; }
.eyebrow::before,.heading>p::before,.download p::before { display:inline-block; width:26px; height:2px; margin:0 10px 4px 0; background:currentColor; content:""; }
.hero h1 { margin-top:12px; font-size:clamp(55px,6vw,82px); line-height:1.05; letter-spacing:-3px; }
.hero-copy>p:not(.eyebrow) { margin-top:16px; color:var(--muted); font-size:17px; }
.hero-copy .button { margin-top:28px; }
.hero time { display:block; margin-top:16px; color:var(--muted); font-size:13px; }
.hero-stage { position:relative; justify-self:end; width:480px; height:510px; }
.phone { position:absolute; top:20px; right:18px; z-index:1; width:230px; padding:9px; border:8px solid var(--forest); border-radius:30px; background:var(--forest); box-shadow:0 18px 36px #17412825; }
.phone img { display:block; width:100%; height:450px; object-fit:contain; border-radius:5px; background:#fff; }
.screen-grid img,.reading-map figure img { width:100%; height:auto; border-radius:5px; }
.route-card { position:absolute; bottom:92px; left:0; z-index:2; width:290px; padding:20px; border:1px solid var(--line); border-radius:5px; background:#f1fae7; box-shadow:0 16px 30px #1741281c; }
.route-card h2 { font-size:17px; }
.route-card ol { display:grid; gap:9px; margin:12px 0; }
.route-card li { display:flex; gap:12px; border-left:2px solid var(--green); padding-left:10px; }
.route-card li b { font-size:12px; color:var(--green); }
.route-card a { display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-radius:5px; color:#fff; background:var(--green); font-weight:800; }
.route-card a .icon { filter:brightness(0) invert(1); }
.section { padding:84px 0; }
.heading { margin-bottom:34px; }
.heading h2 { margin-top:7px; font-size:clamp(30px,3vw,42px); line-height:1.2; }
.center { text-align:center; }
.split { display:flex; justify-content:space-between; align-items:end; gap:30px; }
.split>span { max-width:330px; color:var(--muted); text-align:right; }
.route-features { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; position:relative; }
.route-features article { position:relative; padding:28px 22px; border:1px solid var(--line); border-radius:5px; background:#fff; text-align:center; }
.route-features article>b { display:grid; place-items:center; width:34px; height:34px; margin:-46px auto 12px; border-radius:50%; color:#fff; background:var(--green); }
.route-features .icon { width:30px; height:30px; }
.route-features h3 { margin-top:12px; font-size:18px; }
.route-features p { margin-top:4px; color:var(--muted); }
.screens,.reading-map { background:var(--mint); }
.screen-grid { display:grid; grid-template-columns:repeat(4,250px); justify-content:center; gap:16px; }
.screen-grid figure { min-width:0; }
.screen-grid figure>img { display:block; width:250px; max-width:100%; height:450px; margin:0 auto; border:1px solid var(--line); object-fit:contain; background:#fff; }
.screen-grid figcaption { display:grid; grid-template-columns:auto 1fr; gap:0 8px; margin-top:9px; }
.screen-grid figcaption b { grid-row:span 2; color:var(--green); font-size:12px; }
.screen-grid figcaption strong { font-size:14px; }
.screen-grid figcaption span { color:var(--muted); font-size:12px; }
.map-grid { display:grid; grid-template-columns:minmax(230px,.9fr) minmax(260px,1fr) 250px; align-items:start; gap:18px; padding:18px; border:1px solid var(--line); border-radius:5px; background:#f8fff5; }
.week-list { display:grid; align-content:start; gap:10px; }
.week-list li { display:flex; gap:14px; padding:12px 0 12px 14px; border-left:2px solid var(--green); }
.week-list b { color:var(--green); }
.week-list span,.week-list small { display:block; }
.week-list small { color:var(--muted); font-size:12px; }
.map-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-content:start; }
.map-stats>div { padding:14px; border:1px solid var(--line); border-radius:5px; background:#fff; }
.map-stats strong,.map-stats span { display:block; }
.map-stats strong { font-size:21px; }
.map-stats span { color:var(--muted); font-size:12px; }
.map-stats>p { grid-column:span 2; padding:14px; border:1px solid var(--line); border-radius:5px; background:#fff; }
.map-stats i { display:block; height:5px; margin-top:8px; border-radius:5px; background:#dcebd9; }
.map-stats i b { display:block; width:64%; height:100%; border-radius:5px; background:var(--green); }
.map-grid figure { width:250px; padding:8px; border:1px solid var(--line); border-radius:5px; background:#fff; }
.map-grid figure img { display:block; width:100%; height:450px; object-fit:contain; background:#fff; }
.help { padding-bottom:42px; background:#f8fff5; }
.faq-list { width:min(760px,100%); margin:auto; }
.faq-list article+.faq-list article { margin-top:10px; }
.faq-list article,.official article { overflow:hidden; border:1px solid var(--line); border-radius:5px; background:#fff; }
.faq-list button,.official button { display:flex; align-items:center; justify-content:space-between; width:100%; padding:16px; background:transparent; color:var(--ink); font-weight:800; text-align:left; }
.faq-list button .icon,.official button>.icon { width:15px; height:15px; transition:.18s; }
.faq-list button[aria-expanded="true"] .icon,.official button[aria-expanded="true"]>.icon { transform:rotate(180deg); }
.faq-list article>div,.official article>div { padding:0 16px 16px; color:var(--muted); }
.faq-list [hidden],.official [hidden] { display:none !important; }
.official { padding-top:24px; background:#f8fff5; }
.official button span { display:flex; align-items:center; gap:9px; }
.official a { color:var(--green); font-weight:800; }
.reviews { background:var(--paper); }
.review-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.review-grid article { min-height:220px; padding:18px; border:1px solid var(--line); border-radius:5px; background:#fff; }
.review-grid article>div { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:9px; }
.review-grid i { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; color:#fff; background:var(--green); font-style:normal; font-weight:800; }
.review-grid span,.review-grid time { display:block; }
.review-grid time { color:var(--muted); font-size:12px; }
.review-grid b { color:var(--green); font-size:12px; }
.review-grid article>p { margin-top:14px; color:var(--muted); font-size:13px; line-height:1.8; }
.download { padding:34px 0; background:var(--mint); }
.download>.page { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:31px 38px; border:1px dashed #91ba91; border-radius:5px; }
.download h2 { margin-top:7px; font-size:clamp(24px,3vw,36px); line-height:1.2; }
.download span { color:var(--muted); font-size:12px; }
.light { min-width:170px; }
.site-footer { padding:45px 0 20px; color:#dbeedc; background:var(--forest); }
.footer-grid { display:grid; grid-template-columns:1.5fr repeat(2,.8fr) 1fr; gap:28px; }
.footer-brand img { width:42px; height:42px; }
.footer-brand strong { display:block; margin-top:7px; color:#fff; font-size:18px; }
.footer-brand p,.site-footer li,.copyright { color:#b6d0bb; font-size:12px; }
.site-footer nav p,.social p { color:#fff; font-weight:800; }
.site-footer li+li { margin-top:6px; }
.social a { display:inline-grid; place-items:center; width:34px; height:34px; margin:8px 5px 0 0; border:1px solid #80a789; border-radius:50%; }
.social .icon { filter:brightness(0) invert(1); }
.copyright { width:var(--page); margin:30px auto 0; padding-top:16px; border-top:1px solid #2c7550; text-align:center; }
@media (max-width:720px) { :root { --page:min(100% - 30px,540px); --header:64px; } body { padding-top:var(--header); } .site-header { position:fixed; left:0; right:0; isolation:isolate; transform:translate3d(0,0,0); backface-visibility:hidden; } .header-inner { grid-template-columns:1fr auto; } .brand { font-size:17px; } .brand img { width:34px; height:34px; } .menu-toggle { display:inline-flex; align-items:center; justify-content:center; } .site-nav { position:absolute; top:calc(100% + 7px); left:0; right:0; display:none; width:var(--page); margin:auto; padding:10px; border:1px solid var(--line); border-radius:5px; background:#fff; box-shadow:0 16px 28px #17412826; } .site-nav.is-open { display:block; } .site-nav ul { display:grid; gap:2px; } .site-nav a { padding:10px 12px; border:0; border-left:3px solid transparent; } .site-nav a:hover,.site-nav a:focus-visible,.site-nav a.is-active { border-color:var(--green); background:var(--mint); } .nav-download { min-height:38px; padding:8px 10px; font-size:12px; } .nav-download .icon { display:none; } .hero-grid { grid-template-columns:1fr; } .hero-copy { padding:58px 0 28px; text-align:center; } .hero h1 { font-size:54px; } .hero-stage { justify-self:center; width:min(100%,400px); height:510px; } .phone { right:0; } .route-card { bottom:90px; width:min(280px,calc(100% - 45px)); } .section { padding:60px 0; } .split { display:block; } .split>span { display:block; margin-top:12px; text-align:left; } .route-features { grid-template-columns:1fr; gap:28px; } .route-features article>b { margin:-45px auto 12px; } .screen-grid { grid-template-columns:repeat(2,minmax(0,1fr)); justify-content:stretch; gap:10px; } .screen-grid figure>img { width:100%; height:450px; } .map-grid { grid-template-columns:1fr; } .map-grid figure { width:250px; margin:auto; } .review-grid { grid-template-columns:1fr; } .download>.page { display:grid; padding:28px 24px; text-align:center; } .download .button { width:100%; } .footer-grid { grid-template-columns:repeat(2,1fr); justify-items:center; text-align:center; } .footer-brand,.social { grid-column:1/-1; } .footer-brand img { margin:auto; } }