:root {
  --ink: #17212b;
  --muted: #687681;
  --line: #dfe6e9;
  --paper: #f7fafb;
  --white: #ffffff;
  --orange: #f46a32;
  --orange-dark: #d95220;
  --green: #16866d;
  --navy: #1d3441;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 16px/1.7 "Microsoft YaHei", "PingFang SC", sans-serif; }
a { color: inherit; text-decoration: none; }
.wrap { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.site-header { height: 76px; padding: 0 max(24px, calc((100% - 1160px) / 2)); display: flex; align-items: center; justify-content: space-between; background: rgba(247,250,251,.94); border-bottom: 1px solid rgba(223,230,233,.7); position: sticky; top: 0; z-index: 5; backdrop-filter: blur(12px); }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; font-size: 19px; letter-spacing: .02em; }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
nav { display: flex; gap: 30px; color: var(--muted); font-size: 14px; }
nav a:hover, .text-link:hover { color: var(--orange-dark); }
.hero { min-height: 600px; padding: 92px 0 100px; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.eyebrow { margin: 0 0 14px; color: var(--orange-dark); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin: 0 7px 1px 0; border-radius: 50%; background: #2ab889; box-shadow: 0 0 0 4px rgba(42,184,137,.12); }
h1 { margin: 0; color: var(--navy); font-size: clamp(52px, 7vw, 88px); line-height: 1.05; letter-spacing: .06em; }
.hero-title { margin: 18px 0 12px; font-size: clamp(23px, 3vw, 34px); font-weight: 700; line-height: 1.35; }
em { color: var(--orange); font-style: normal; }
.hero-text { max-width: 510px; margin: 0; color: var(--muted); font-size: 16px; }
.hero-actions { display: flex; align-items: center; gap: 25px; margin-top: 31px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 17px; min-height: 48px; padding: 0 23px; border-radius: 5px; font-weight: 700; transition: transform .2s, background .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(244,106,50,.22); }
.button-primary { color: #fff; background: var(--orange); }
.button-primary:hover { background: var(--orange-dark); }
.text-link { color: var(--navy); font-size: 14px; font-weight: 700; }
.release-note { margin: 13px 0 0; color: #8a969d; font-size: 12px; }
.hero-visual { overflow: hidden; min-height: 355px; border: 1px solid #d6e0e3; border-radius: 8px; background: #fff; box-shadow: 20px 25px 60px rgba(26,52,65,.12); transform: rotate(1deg); }
.window-bar { height: 40px; display: flex; align-items: center; gap: 7px; padding: 0 16px; color: #7b8990; background: #f1f5f5; border-bottom: 1px solid #e2e9e9; font-size: 11px; }
.window-bar span { width: 8px; height: 8px; border-radius: 50%; background: #f5bd67; }.window-bar span:nth-child(2) { background: #76c7b0; }.window-bar span:nth-child(3) { background: #e88378; }.window-bar b { margin-left: 8px; font-weight: 600; }
.preview-content { padding: 27px 28px; }.preview-heading { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 15px; }.preview-heading span { font-size: 20px; font-weight: 800; }.preview-heading small { color: #849198; }
.metric-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 20px 0; }.metric-row div { padding: 13px 16px; background: #f5f8f8; border-left: 3px solid #bdd9d2; }.metric-row div:last-child { border-left-color: var(--orange); }.metric-row small { display: block; color: #7a888e; font-size: 12px; }.metric-row strong { display: block; margin-top: 4px; font-size: 26px; line-height: 1.2; }.metric-row .accent { color: var(--orange); }
.preview-table { color: #66757c; font-size: 12px; }.preview-table > div { display: grid; grid-template-columns: 1.6fr 1fr .7fr; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid #edf1f1; }.preview-table > div:first-child { color: #9aa5a9; border-bottom: 0; padding-bottom: 3px; }.preview-table b { color: #334751; font-weight: 700; }.good { color: var(--green); }.warn { color: #d27b31; }.preview-footer { display: flex; justify-content: space-between; padding-top: 16px; color: #98a3a7; font-size: 11px; }.preview-footer b { color: var(--green); }
.proof-strip { background: var(--navy); color: #d4e2e4; }.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); padding: 23px 0; }.proof-grid span { padding: 0 25px; border-right: 1px solid rgba(255,255,255,.16); font-size: 13px; }.proof-grid span:first-child { padding-left: 0; }.proof-grid span:last-child { border: 0; }.proof-grid b { display: block; color: #fff; font-size: 15px; }
.section { padding: 104px 0; }.section-heading { max-width: 620px; }.section-heading h2, .download-card h2 { margin: 0; color: var(--navy); font-size: clamp(28px, 4vw, 42px); line-height: 1.25; }.section-heading > p:last-child { margin: 15px 0 0; color: var(--muted); }.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 58px; border-top: 1px solid var(--line); }.feature { min-height: 245px; padding: 27px 32px 20px 0; border-right: 1px solid var(--line); }.feature + .feature { padding-left: 32px; }.feature:last-child { border: 0; }.feature-number { color: var(--orange); font-size: 12px; font-weight: 800; }.feature h3 { margin: 22px 0 11px; font-size: 20px; }.feature p { margin: 0; color: var(--muted); font-size: 14px; }
.section-tint { background: #edf3f2; }.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin-top: 43px; }.step { display: flex; gap: 17px; padding: 25px 25px 25px 0; border-top: 2px solid #a6c8bf; }.step > span { display: grid; place-items: center; width: 35px; height: 35px; flex: 0 0 35px; color: #fff; background: var(--green); border-radius: 50%; font-weight: 800; }.step h3 { margin: 0 0 5px; font-size: 17px; }.step p { margin: 0; color: var(--muted); font-size: 14px; }
.download-section { padding: 82px 0 105px; }.download-card { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 36px 42px; background: #fff; border: 1px solid var(--line); border-radius: 7px; box-shadow: 0 12px 35px rgba(22,52,65,.06); }.download-card h2 { font-size: 30px; }.download-card p { margin: 7px 0 0; color: var(--muted); }.details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 42px; }.details-grid h3 { margin: 0 0 8px; font-size: 16px; }.details-grid p { margin: 0; color: var(--muted); font-size: 13px; }.site-footer { padding: 24px 0; color: #879399; background: #e9eff0; font-size: 12px; }.site-footer .wrap { display: flex; justify-content: space-between; }
@media (max-width: 800px) { .site-header { height: 64px; }.site-header nav { display: none; }.wrap { width: min(100% - 32px, 560px); }.hero { min-height: auto; padding: 62px 0 70px; grid-template-columns: 1fr; gap: 45px; }.hero-visual { transform: none; }.proof-grid, .feature-grid, .steps-grid, .details-grid { grid-template-columns: 1fr; }.proof-grid { padding: 0; }.proof-grid span, .proof-grid span:first-child { padding: 17px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }.section { padding: 75px 0; }.feature, .feature + .feature { min-height: auto; padding: 25px 0; border-right: 0; border-bottom: 1px solid var(--line); }.download-section { padding: 60px 0 75px; }.download-card { align-items: flex-start; flex-direction: column; padding: 28px; }.download-card .button { width: 100%; }.site-footer .wrap { gap: 8px; flex-direction: column; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; } }