:root { --text:#202631; --muted:#667180; --accent:#df493c; --soft:#f6f8fa; --border:#e6e9ed; --max:1120px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; color:var(--text); background:#fff; font-family:"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif; font-size:15px; line-height:1.8; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid #ad3027; outline-offset:5px; border-radius:4px; }
.shell { width:min(calc(100% - 48px),var(--max)); margin-inline:auto; }
.skip-link { position:absolute; top:-100px; left:20px; z-index:30; padding:8px 15px; background:white; }
.skip-link:focus { top:10px; }
.site-header { position:sticky; top:0; z-index:10; border-bottom:1px solid var(--border); background:rgba(255,255,255,.97); }
.nav { display:flex; height:78px; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; gap:12px; align-items:center; }
.brand-icon { display:block; width:36px; height:36px; object-fit:contain; object-position:center; flex-shrink:0; }
.brand-name { font-size:21px; font-weight:700; letter-spacing:.02em; }
.brand-note { margin-left:5px; color:var(--muted); font-size:12px; font-weight:400; }
.nav-links { display:flex; align-items:center; gap:30px; color:#505b68; font-size:14px; }
.nav-links a:hover,.nav-links [aria-current="page"] { color:var(--accent); }
.nav-links .nav-cta { padding:8px 19px; border:1px solid #efd3ce; border-radius:7px; color:var(--accent); }
.nav-links .nav-cta:hover { background:#fff4f2; }
.menu-button { display:none; padding:7px 12px; border:1px solid var(--border); border-radius:6px; background:white; }
.hero { background:linear-gradient(110deg,#fff 35%,#f6f8fa 100%); }
.hero-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; align-items:center; padding-block:64px 56px; }
.eyebrow { display:flex; align-items:center; gap:8px; margin:0 0 16px; color:var(--muted); font-size:13px; font-weight:500; }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); }
h1,h2,h3,p { margin-top:0; }
.hero h1 { margin-bottom:8px; font-size:clamp(38px,4.8vw,58px); font-weight:700; line-height:1.3; letter-spacing:-.025em; }
.hero h1 small { display:block; margin-top:13px; font-size:28px; font-weight:500; letter-spacing:0; }
.hero-description { max-width:445px; margin:22px 0 0; color:var(--muted); font-size:16px; line-height:1.95; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin:29px 0 13px; }
.button { display:inline-flex; min-height:49px; align-items:center; justify-content:center; gap:9px; padding:11px 23px; border:1px solid transparent; border-radius:7px; font:600 14px/1.6 "Segoe UI","Microsoft YaHei",sans-serif; cursor:pointer; transition:background .15s,border-color .15s; }
.button-primary { background:var(--accent); color:white; }
.button-primary:hover { background:#c73c30; }
.button-secondary { border-color:#d8dde3; background:white; color:#4c5764; }
.button-secondary:hover { border-color:#9ba5b2; background:var(--soft); }
.button.is-disabled,.button.is-disabled:hover { color:#903b32; border-color:#efd4cf; background:#f9e9e5; cursor:not-allowed; }
.fine-print { margin:0; color:var(--muted); font-size:12px; line-height:1.8; }
.fine-print a { text-decoration:underline; text-underline-offset:3px; }
.hero-meta { display:flex; gap:20px; margin-top:23px; color:#596473; font-size:12px; }
.hero-meta span { display:flex; gap:7px; align-items:center; }
.small-icon { width:16px; height:16px; flex-shrink:0; }
.hero-visual { margin:0; text-align:center; }
.hero-visual img { display:block; width:100%; height:auto; }
.hero-visual figcaption { color:#7c8693; font-size:11px; }
.overview-bar { border-block:1px solid var(--border); }
.overview-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; padding-block:22px; }
.overview-item { display:flex; gap:12px; align-items:center; color:#687380; font-size:13px; }
.overview-item strong { display:block; color:var(--text); font-size:14px; font-weight:600; }
.overview-icon { width:28px; height:28px; color:#8993a0; }
.section { padding-block:66px; }
#download,#highlights,#install { scroll-margin-top:100px; }
.section-soft { background:var(--soft); }
.section-title { max-width:760px; margin:0 auto 30px; text-align:center; }
.section-title h2,.split h2 { margin-bottom:10px; font-size:28px; line-height:1.5; font-weight:600; }
.section-title p,.split>div>p { margin:0; color:var(--muted); font-size:14px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
#highlights .grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.feature { padding:25px; border:1px solid var(--border); border-radius:10px; background:white; }
.feature-icon { display:grid; width:42px; height:42px; place-items:center; margin-bottom:18px; border-radius:9px; background:#fff0ed; color:var(--accent); }
.feature-icon svg { width:23px; height:23px; }
.feature h3 { margin-bottom:8px; font-size:18px; font-weight:600; }
.feature p { margin-bottom:0; color:var(--muted); font-size:14px; }
.feature p a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.split { display:grid; grid-template-columns:1fr; gap:32px; }
.text-link { display:inline-block; margin-top:24px; color:var(--accent); font-size:14px; font-weight:500; }
.text-link:hover { text-decoration:underline; }
.install-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; padding:0; margin:0; list-style:none; counter-reset:install; }
.install-steps li { display:flex; gap:17px; align-items:start; counter-increment:install; }
.install-steps li::before { content:counter(install); display:grid; width:30px; height:30px; flex-shrink:0; place-items:center; border:1px solid #dce1e7; border-radius:50%; background:white; color:#768190; font-size:13px; }
.install-steps h3 { margin:0 0 4px; font-size:15px; font-weight:600; }
.install-steps p { margin:0; color:var(--muted); font-size:13px; }
.faq-layout { display:grid; grid-template-columns:1fr; gap:32px; }
.faq-list { border-top:1px solid var(--border); }
details { border-bottom:1px solid var(--border); }
summary { position:relative; padding:18px 30px 18px 0; cursor:pointer; font-size:15px; font-weight:500; list-style:none; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; position:absolute; right:5px; top:14px; color:#7b8695; font-size:23px; font-weight:300; }
details[open] summary::after { content:"−"; }
details p { margin:0 0 20px; color:var(--muted); font-size:14px; line-height:1.9; }
.download-banner { display:flex; width:min(calc(100% - 48px),760px); align-items:center; justify-content:space-between; gap:28px; padding:29px 35px; border:1px solid var(--border); border-radius:10px; background:var(--soft); }
.download-banner h2 { margin-bottom:3px; font-size:22px; font-weight:600; }
.download-banner p { margin:0; color:var(--muted); font-size:13px; }
.download-banner .button { flex-shrink:0; }
.banner-section { padding:0 0 62px; }
.site-footer { padding-block:29px; border-top:1px solid var(--border); background:#fafbfc; color:var(--muted); font-size:12px; }
.footer-row { display:flex; justify-content:space-between; gap:30px; }
.footer-brand { display:grid; gap:2px; }
.footer-title { color:var(--text); font-size:16px; font-weight:700; letter-spacing:.02em; }
.footer-brand p { margin:0; }
.footer-brand .footer-copyright { margin-top:7px; color:#8993a0; font-size:11px; }
.footer-links { display:flex; align-items:center; flex-shrink:0; gap:22px; }
.footer-links a:hover { color:var(--accent); }
.page-hero { padding-block:36px 44px; border-bottom:1px solid var(--border); background:var(--soft); }
.breadcrumbs { display:flex; gap:10px; margin-bottom:24px; color:#788391; font-size:12px; }
.breadcrumbs a:hover { color:var(--accent); }
.page-hero h1 { margin-bottom:11px; font-size:clamp(29px,3.8vw,40px); line-height:1.4; font-weight:600; }
.page-hero p { max-width:650px; margin:0; color:var(--muted); }
.content-narrow { max-width:820px; }
.prose h2 { margin:35px 0 12px; font-size:22px; font-weight:600; }
.prose h2:first-child { margin-top:0; }
.prose p { color:var(--muted); font-size:14px; }
.notice { margin:25px 0; padding:16px 20px; border:1px solid #eadfd6; border-radius:8px; background:#fffbf5; color:#716353; }
.notice p { margin:0; color:inherit; font-size:13px; }
.download-panel { padding:28px; border:1px solid var(--border); border-radius:10px; background:var(--soft); }
.download-panel h2 { margin-top:0; }
.download-panel .fine-print { margin-top:12px; }
.steps { display:grid; grid-template-columns:1fr; gap:18px; margin-block:24px 36px; }
.step { padding:18px; border:1px solid var(--border); border-radius:8px; }
.step strong { display:block; margin-bottom:9px; color:var(--text); }
.step p { margin:0; font-size:13px; }
.download-features { margin:0 0 34px; }
.download-features .feature { padding:20px; }
.download-features .feature-icon { margin-bottom:13px; }
.download-features .feature h3 { font-size:16px; }
.check-list { display:grid; gap:10px; padding:0; margin:0 0 30px; list-style:none; }
.check-list li { position:relative; padding-left:25px; color:var(--muted); font-size:14px; }
.check-list li::before { content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700; }
.prose .faq-list { margin-top:20px; }
@media (max-width:960px) {
  .brand-note { display:none; }
  .hero h1 { font-size:45px; }
  .hero h1 small { font-size:24px; }
  .hero-grid { gap:10px; }
  .grid-3 { gap:16px; }
  .split,.faq-layout { gap:36px; }
}
@media (max-width:700px) {
  html { scroll-padding-top:80px; }
  .shell { width:calc(100% - 36px); }
  .nav { height:66px; }
  .brand-icon { width:30px; height:30px; }
  .menu-button { display:block; }
  .nav-links { position:absolute; top:66px; left:0; right:0; display:none; padding:16px 18px 20px; border-bottom:1px solid var(--border); background:white; }
  .nav-links.is-open { display:grid; gap:5px; }
  .nav-links a { padding:9px 12px; }
  .hero-grid { grid-template-columns:1fr; padding-block:35px 26px; }
  .hero h1 { font-size:40px; }
  .hero h1 small { margin-top:9px; font-size:22px; }
  .hero-description { margin-top:16px; font-size:14px; }
  .hero-actions { margin-top:22px; }
  .hero-meta { margin-top:17px; }
  .hero-visual { width:min(100%,390px); margin:4px auto 0; }
  .overview-row { gap:14px; padding-block:19px; }
  .overview-row,.grid-3,#highlights .grid-3,.install-steps { grid-template-columns:1fr; }
  .overview-item { flex:0 0 auto; gap:8px; font-size:11px; }
  .overview-item strong { font-size:12px; }
  .overview-icon { width:22px; height:22px; }
  .section { padding-block:42px; }
  .section-title h2,.split h2 { font-size:24px; }
  .split,.faq-layout { gap:26px; }
  .feature { padding:21px; }
  .feature-icon { margin-bottom:14px; }
  .section-title { margin-bottom:23px; }
  .download-banner { display:block; width:calc(100% - 36px); padding:24px; }
  .download-banner .button { margin-top:18px; }
  .banner-section { padding-bottom:40px; }
  .footer-row { flex-direction:column; gap:15px; }
  .footer-links { flex-wrap:wrap; gap:8px 18px; }
  .page-hero { padding-block:24px 31px; }
  .page-hero h1 { font-size:29px; }
  .page-hero p { font-size:14px; }
  .download-panel { padding:21px; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; }
}