:root { --ink:#18252d; --blue:#3d56dc; --violet:#7545d7; --lime:#d7ff3f; --coral:#ff6d5c; --paper:#f4f3ee; --line:#d9dce2; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff; 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; }
main { display:flex; flex-direction:column; }
.hero { order:0; }
.features-section { order:1; }
.archive-section { order:2; }
.screens-section { order:3; }
.faq-section { order:4; }
.review-section { order:5; }
.download-section { order:6; }
.site-header { position:fixed; z-index:20; top:0; right:0; left:0; border-bottom:1px solid #e2e1dc; background:rgba(255,255,255,.97); }
.nav-wrap { display:grid; grid-template-columns:220px 1fr auto; align-items:center; min-height:78px; gap:24px; }
.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:#f2f4ff; }
.brand-copy { display:grid; gap:4px; line-height:1.1; }
.brand-copy b { font-size:17px; letter-spacing:-.3px; }
.brand-copy small { color:#5e6a7c; font-size:12px; font-weight:600; }
.site-nav ul { display:flex; justify-content:center; gap:21px; 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(--coral); color:var(--coral); }
.nav-actions { display:flex; align-items:center; gap:10px; }
.nav-download { padding:8px 13px; border:1px solid var(--ink); border-radius:5px; color:var(--ink); 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 92px; background:linear-gradient(90deg,#fff 0 49%,var(--paper) 49%); }
.hero-layout { display:grid; grid-template-columns:.82fr 1.18fr; align-items:center; gap:58px; }
.eyebrow { margin:0 0 14px; color:var(--coral); font:900 12px/1 Arial,sans-serif; letter-spacing:2px; }
h1 { margin:0 0 25px; font-size:clamp(50px,6.2vw,81px); line-height:.98; letter-spacing:-4px; }
.hero-intro { max-width:500px; margin:0; color:#53606c; font-size:17px; line-height:2; }
.hero-actions { margin-top:29px; }
.primary-download { display:inline-flex; align-items:center; gap:40px; padding:15px 19px 15px 23px; border-radius:5px; color:#fff; background:var(--coral); font-weight:900; box-shadow:7px 7px 0 var(--ink); }
.primary-download b { font-size:21px; }
.age-label { display:block; width:max-content; margin-top:15px; color:#5e6874; font-size:13px; }
.hero-hint { margin:30px 0 0; color:#6f7783; font-size:12px; font-weight:800; }
.showcase { padding:23px; border:1px solid #d7d6d0; border-radius:5px; background:#fff; box-shadow:13px 13px 0 #c7c7c0; }
.showcase-head { display:flex; align-items:end; justify-content:space-between; margin-bottom:16px; }
.showcase-head p { margin:0; color:var(--blue); font-size:10px; font-weight:900; letter-spacing:1.5px; }
.showcase-head h2 { margin:0; font-size:31px; line-height:1; letter-spacing:-2px; }
.showcase-window { position:relative; overflow:hidden; border-radius:5px; background:#e8e8e0; }
.showcase-track { display:flex; transition:transform .55s cubic-bezier(.2,.75,.25,1); }
.showcase-slide { position:relative; flex:0 0 100%; height:388px; margin:0; background:#e8e8e0; }
.showcase-slide img { display:block; width:100%; height:100%; object-fit:contain; }
.showcase-slide:after { position:absolute; right:0; bottom:0; left:0; height:34%; content:""; background:linear-gradient(transparent,rgba(24,37,45,.85)); }
.showcase-slide figcaption { position:absolute; z-index:1; right:0; bottom:0; left:0; display:flex; justify-content:space-between; padding:18px; color:#fff; }
.showcase-slide figcaption b { font-size:20px; }
.showcase-slide figcaption span { font-size:12px; }
.showcase-control { position:absolute; z-index:2; top:calc(50% - 20px); display:grid; width:40px; height:40px; place-items:center; border:0; border-radius:50%; color:#fff; background:rgba(24,37,45,.83); font-size:22px; cursor:pointer; }
.showcase-prev { left:13px; }
.showcase-next { right:13px; }
.showcase-foot { display:flex; align-items:center; justify-content:space-between; padding:13px 0 0; }
.showcase-foot p { margin:0; color:#77808b; font-size:12px; font-weight:800; }
.showcase-current { color:var(--coral); font-size:20px; }
.showcase-dots { display:flex; gap:7px; }
.showcase-dots button { width:18px; height:5px; padding:0; border:0; border-radius:5px; background:#c4c8cd; cursor:pointer; }
.showcase-dots .is-active { width:38px; background:var(--coral); }
.features-section { padding:112px 0; background:var(--blue); color:#fff; }
.feature-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; }
.features-section .eyebrow { color:var(--lime); }
.feature-intro h2,.section-top h2,.faq-layout h2 { margin:0; font-size:clamp(40px,5vw,62px); line-height:1; letter-spacing:-3px; }
.feature-intro>p:not(.eyebrow) { max-width:360px; margin:20px 0 0; color:#dce4ff; }
.feature-list { border-top:1px solid rgba(255,255,255,.5); }
.feature-list article { display:grid; grid-template-columns:70px 1fr; gap:16px; padding:24px 0; border-bottom:1px solid rgba(255,255,255,.35); }
.feature-list article>b { color:var(--lime); font-size:13px; }
.feature-list h3 { margin:0 0 6px; font-size:21px; }
.feature-list p { margin:0; color:#dfe6ff; }
.archive-section { padding:108px 0; background:#fff9f6; }
.archive-section .eyebrow { color:var(--coral); }
.archive-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:48px; }
.archive-grid article { min-height:230px; padding:22px; border:1px solid #e0d8d3; border-radius:5px; background:#fff; }
.archive-grid article:nth-child(1) { border-top:5px solid #c79d30; }
.archive-grid article:nth-child(2) { border-top:5px solid #3573bc; }
.archive-grid article:nth-child(3) { border-top:5px solid #ef7da0; }
.archive-grid article:nth-child(4) { border-top:5px solid var(--violet); }
.archive-grid b { color:#788291; font-size:11px; letter-spacing:1.2px; }
.archive-grid h3 { margin:46px 0 10px; font-size:20px; }
.archive-grid p { margin:0; color:#657080; font-size:14px; }
.screens-section { padding:112px 0; background:#fff; }
.section-top { display:flex; align-items:end; justify-content:space-between; gap:45px; }
.section-top>p { max-width:365px; margin:0; color:#617080; }
.screens-scroll { margin-top:48px; }
.screens-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }
.screens-grid figure { margin:0; padding:11px; border:1px solid var(--line); border-radius:5px; background:#fafafa; }
.screens-grid img { display:block; width:100%; height:auto; object-fit:contain; }
.screens-grid figcaption { margin-top:10px; color:#596575; font-size:12px; font-weight:800; }
.review-section { padding:110px 0; background:#f3efe5; }
.review-top .eyebrow { color:var(--violet); }
.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:1px solid #d8d5ce; border-radius:5px; background:#fff; }
.review-meta { display:flex; align-items:center; gap:10px; }
.review-meta i { width:38px; height:38px; border-radius:50%; background:var(--violet) url('../icons/avatar.svg') center/21px no-repeat; }
.review-meta span { margin-left:auto; color:var(--coral); font-size:13px; }
.review-grid p { flex:1; margin:20px 0; font-size:14px; }
.review-grid small { color:#718090; text-align:right; }
.faq-section { padding:105px 0; background:#172530; color:#fff; }
.faq-section .eyebrow { color:var(--lime); }
.faq-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; }
.faq-list { border-top:1px solid rgba(255,255,255,.3); }
.faq-list article { border-bottom:1px solid rgba(255,255,255,.25); }
.faq-list button { display:flex; justify-content:space-between; width:100%; padding:21px 0; border:0; color:#fff; background:transparent; font-size:17px; font-weight:800; text-align:left; cursor:pointer; }
.faq-list button b { color:var(--lime); 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:#c1ced5; }
.faq-list article.is-open p { padding:0 20px 20px 0; }
.download-section { padding:82px 0; background:var(--lime); }
.download-card { display:grid; grid-template-columns:1fr auto; align-items:center; gap:35px; padding:34px; border:2px solid var(--ink); border-radius:5px; box-shadow:11px 11px 0 var(--ink); }
.download-card>p { margin:0; grid-column:1; font-size:11px; font-weight:900; letter-spacing:2px; }
.download-card h2 { margin:0; grid-column:1; font-size:clamp(36px,4.3vw,58px); line-height:1; letter-spacing:-3px; }
.download-card a { grid-column:2; grid-row:1 / span 2; display:flex; align-items:center; justify-content:space-between; gap:35px; padding:15px 18px; border-radius:5px; color:#fff; background:var(--ink); font-weight:900; }
.download-card a b { font-size:20px; }
.site-footer { padding:20px 0; color:#fff; background:#101820; }
.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:#8d9baa; font-size:10px; font-weight:400; }
.footer-map { display:flex; flex-wrap:wrap; justify-content:center; gap:9px 15px; font-size:12px; font-weight:800; }
.footer-map a:hover { color:var(--lime); }
.footer-layout>p { margin:0; color:#a7b1bd; 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(--ink); 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; border-top:1px solid #e1e4eb; background:#fff; box-shadow:0 12px 24px rgba(24,37,45,.15); }
  .site-nav.is-open ul { display:grid; gap:0; border:1px solid #dce1e9; border-radius:5px; overflow:hidden; }
  .site-nav.is-open li + li { border-top:1px solid #e2e6ed; }.site-nav.is-open a { display:flex; justify-content:space-between; padding:11px 13px; font-size:13px; }.site-nav.is-open a:after { color:var(--coral); content:"→"; }
  .hero { padding:98px 0 55px; background:#fff; }.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; }
  .showcase { padding:13px; box-shadow:8px 8px 0 #c7c7c0; }.showcase-slide { height:315px; }.showcase-head h2 { font-size:27px; }.showcase-slide figcaption { padding:14px; }.showcase-slide figcaption b { font-size:18px; }.showcase-control { width:36px; height:36px; font-size:19px; }
  .features-section,.archive-section,.screens-section,.review-section,.faq-section { padding:72px 0; }.feature-layout,.faq-layout { grid-template-columns:1fr; gap:36px; }.feature-intro>p:not(.eyebrow) { max-width:none; }.feature-list article { grid-template-columns:48px 1fr; }.section-top { display:block; }.section-top>p { margin:18px 0 0; }.archive-grid { grid-template-columns:repeat(2,1fr); margin-top:32px; }.archive-grid article { min-height:190px; padding:17px; }.archive-grid h3 { margin-top:30px; font-size:18px; }
  .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:67vw; max-width:270px; scroll-snap-align:start; }
  .review-grid { grid-template-columns:1fr; gap:12px; margin-top:34px; }.review-grid article { min-height:0; }
  .download-section { padding:62px 0; }.download-card { grid-template-columns:1fr; padding:26px; text-align:center; }.download-card>p,.download-card h2,.download-card a { grid-column:1; }.download-card a { grid-row:auto; justify-self:center; margin-top:5px; }
  .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; }.showcase-slide { height:275px; }.feature-list h3 { font-size:18px; }.archive-grid { grid-template-columns:1fr; }.archive-grid article { min-height:0; } }