:root { color-scheme: light; --muted: #58585d; --line: #dedee2; scroll-behavior: smooth; }
* { box-sizing: border-box; }
body { margin: 0; color: #171717; font: 16px/1.6 Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid #609cea; outline-offset: 5px; }
header { background: #101010; color: #f5f5f5; border-bottom: 1px solid #303030; }
nav, .wrap { width: min(1100px, calc(100% - 48px)); margin: auto; }
nav, nav div, .brand { display: flex; align-items: center; gap: 24px; }
nav { min-height: 62px; justify-content: space-between; }
.brand { gap: 9px; font-weight: 650; }
nav div a { font-size: 14px; color: #ddd; }
nav a:hover, footer a:hover { text-decoration: underline; }
.hero { background: #080808; color: #fff; text-align: center; padding: clamp(56px, 9vw, 110px) 20px 0; overflow: hidden; }
.product { margin: 0 0 10px; font-weight: 600; color: #c3c3c8; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { line-height: 1.09; letter-spacing: -.045em; }
h1 { font-size: clamp(38px, 8vw, 96px); margin-bottom: 24px; }
h2 { font-size: clamp(30px, 5vw, 58px); margin-bottom: 32px; }
h3 { font-size: 24px; margin-bottom: 10px; }
.intro { font-size: clamp(16px, 2.35vw, 22px); color: #c9c9cd; margin-bottom: 28px; }
.button { display: inline-flex; gap: 12px; align-items: center; min-height: 46px; padding: 9px 22px; border: 1px solid transparent; border-radius: 100px; font-weight: 620; }
.button:hover { opacity: .8; }
.light { background: white; color: #101010; }
.dark { background: #161616; color: white; }
.outline { border-color: #a9a9ad; }
figure { margin: clamp(42px, 6vw, 72px) auto -1px; width: min(1100px, 100%); overflow: hidden; border: 1px solid #4b4b4b; border-radius: 19px 19px 0 0; background: #222; }
figure img { display: block; width: 100%; height: auto; }
.features { padding: clamp(60px, 10vw, 116px) 0; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; }
article { border-top: 1px solid var(--line); padding: 24px 0; }
article p, .downloads p, footer { color: var(--muted); }
article p { max-width: 38ch; margin-bottom: 0; }
.downloads { padding: clamp(60px, 8vw, 100px) 0; background: #f5f5f7; text-align: center; }
.downloads h2 { margin-bottom: 16px; }
.actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 24px 0 18px; }
.note { font-size: 13px; max-width: 58ch; margin: 0 auto; }
footer { border-top: 1px solid var(--line); font-size: 13px; }
footer .wrap { display: flex; justify-content: space-between; padding: 20px 0; }
@media (max-width: 620px) { .grid { grid-template-columns: 1fr; } nav, .wrap { width: calc(100% - 36px); } figure { border-radius: 10px 10px 0 0; } }
@media (prefers-reduced-motion: reduce) { :root { scroll-behavior: auto; } }