:root {
  --ink: #352014;
  --brown: #633918;
  --muted: #806a58;
  --line: rgba(109, 67, 31, .14);
  --cream: #fffaf4;
  --blue: #3972ef;
  --blue-dark: #2659ce;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #f8eee2;
  font: 15px/1.55 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
button, a { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.page-shell { position: relative; min-height: 100vh; overflow: hidden; isolation: isolate; }
.cloud-scene { position: absolute; z-index: -3; inset: 0; width: 100%; height: 780px; object-fit: cover; object-position: center top; opacity: .88; }
.scene-wash { position: absolute; z-index: -2; inset: 0; min-height: 820px; background: linear-gradient(110deg, rgba(255,248,239,.92) 0%, rgba(255,248,239,.62) 43%, rgba(255,247,235,.18) 100%), linear-gradient(180deg, transparent 62%, #f8eee2 100%); pointer-events: none; }
.site-header, main, .site-footer { width: min(1180px, calc(100% - 56px)); margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; padding: 27px 0; }
.brand { display: inline-flex; align-items: center; gap: 14px; }
.brand img { width: 106px; height: 54px; object-fit: contain; object-position: left center; }
.brand span { padding-left: 14px; border-left: 1px solid var(--line); color: #977b63; font-size: 13px; letter-spacing: .12em; }
.header-link { color: #76563d; font-size: 13px; font-weight: 650; }
.header-link span { margin-left: 4px; color: var(--blue); }
.header-link:hover { color: var(--blue-dark); }

.hero { display: grid; grid-template-columns: minmax(0, 1fr) 445px; align-items: center; gap: clamp(42px, 8vw, 120px); min-height: 610px; padding: 46px 0 72px; }
.hero-copy { max-width: 580px; padding-bottom: 28px; }
.eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 17px; color: #a17e60; font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: #d1843b; box-shadow: 0 0 0 4px rgba(209,132,59,.14); }
h1 { max-width: 580px; margin: 0; color: #3a2113; font-family: "STKaiti", "Kaiti SC", "KaiTi", serif; font-size: clamp(42px, 5.1vw, 70px); font-weight: 800; line-height: 1.12; letter-spacing: -.045em; }
h1 em { display: block; color: #3972ef; font-style: normal; }
.hero-lede { max-width: 490px; margin: 26px 0 28px; color: #765b45; font-size: 17px; line-height: 1.85; }
.trust-row { display: flex; flex-wrap: wrap; gap: 14px 22px; color: #806b59; font-size: 12px; }
.trust-row span { display: inline-flex; align-items: center; gap: 7px; }
.trust-row i { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: #f0e1d2; color: #9b673d; font-size: 12px; font-style: normal; font-weight: 800; }

.download-card { position: relative; overflow: hidden; padding: 27px 28px 23px; border: 1px solid rgba(109,67,31,.12); border-radius: 23px; background: rgba(255,252,248,.86); box-shadow: 0 24px 70px rgba(81,45,18,.14), inset 0 1px rgba(255,255,255,.9); backdrop-filter: blur(15px); }
.card-glow { position: absolute; z-index: -1; top: -90px; right: -50px; width: 230px; height: 230px; border-radius: 50%; background: rgba(107,153,255,.18); filter: blur(10px); }
.detected-label { display: flex; align-items: center; gap: 8px; color: #668159; font-size: 11px; font-weight: 700; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: #57a24c; box-shadow: 0 0 0 4px rgba(87,162,76,.14); }
.download-heading { display: flex; align-items: center; gap: 14px; margin: 26px 0 20px; }
.platform-mark { display: grid; width: 55px; height: 55px; place-items: center; border-radius: 16px; background: linear-gradient(145deg, #f2f6ff, #dce8ff); color: #4774d8; font-size: 30px; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(71,116,216,.12); }
.card-kicker { margin: 0 0 2px; color: #a17e60; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.download-heading h2 { margin: 0; color: #342014; font-size: 24px; letter-spacing: -.03em; }
.download-meta { margin: 3px 0 0; color: #8f7865; font-size: 12px; }
.download-button { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 14px 19px; border-radius: 12px; background: var(--blue); color: #fff; font-size: 14px; font-weight: 750; box-shadow: 0 10px 22px rgba(57,114,239,.24); transition: transform .16s, background .16s, box-shadow .16s; }
.download-button:hover { background: var(--blue-dark); box-shadow: 0 13px 27px rgba(57,114,239,.3); transform: translateY(-1px); }
.download-button[aria-disabled="true"] { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.button-arrow { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.18); font-size: 17px; }
.download-note { margin: 10px 0 0; color: #a28d7c; font-size: 11px; }
.other-downloads { margin-top: 23px; padding-top: 18px; border-top: 1px solid var(--line); }
.other-downloads > p { margin: 0 0 10px; color: #a17e60; font-size: 11px; font-weight: 750; letter-spacing: .08em; }
.platform-options { display: grid; gap: 7px; }
.platform-options button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #5e4939; text-align: left; transition: background .15s, border-color .15s; }
.platform-options button:hover, .platform-options button[aria-pressed="true"] { border-color: rgba(57,114,239,.2); background: #f5f8ff; }
.mini-mark { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 8px; background: #f0e9df; color: #785838; font-size: 16px; font-weight: 700; }
.windows-mark { color: #3c73db; background: #e9f0ff; }
.platform-options strong, .platform-options small { display: block; }
.platform-options strong { font-size: 12px; }
.platform-options small { margin-top: 1px; color: #9b8878; font-size: 10px; }

.feature-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 20px; border: 1px solid rgba(109,67,31,.11); border-radius: 18px; background: rgba(255,252,248,.63); box-shadow: 0 14px 40px rgba(81,45,18,.06); backdrop-filter: blur(8px); }
.feature { display: flex; align-items: center; gap: 12px; padding: 3px 10px; }
.feature + .feature { border-left: 1px solid var(--line); }
.feature-icon { display: grid; width: 38px; height: 38px; flex: none; place-items: center; border-radius: 12px; font-size: 19px; font-weight: 700; }
.feature-icon.warm { background: #faead9; color: #be7842; }.feature-icon.blue { background: #e8efff; color: #4c78d6; }.feature-icon.green { background: #e8f3e8; color: #5c9360; }
.feature strong { display: block; color: #4c3324; font-size: 13px; }.feature p { margin: 2px 0 0; color: #927965; font-size: 11px; }
.install-section { display: grid; grid-template-columns: .75fr 1.25fr; gap: 60px; padding: 94px 0 70px; }
.install-section h2 { max-width: 290px; margin: 0; color: #4a2d1b; font-family: "STKaiti", "Kaiti SC", serif; font-size: 33px; line-height: 1.3; }
.install-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; margin: 0; padding: 0; list-style: none; }
.install-steps li { padding: 4px 4px 4px 0; }.install-steps li > span { display: block; margin-bottom: 19px; color: #c18a5c; font: 700 12px/1 Georgia, serif; letter-spacing: .12em; }.install-steps strong { color: #4b3020; font-size: 13px; }.install-steps p { margin: 7px 0 0; color: #927965; font-size: 12px; line-height: 1.65; }
.site-footer { display: flex; justify-content: space-between; padding: 20px 0 30px; border-top: 1px solid rgba(109,67,31,.12); color: #a18875; font-size: 11px; }.site-footer span:first-child { color: #704222; font-weight: 800; }

@media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: 15px; padding-top: 25px; }.hero-copy { max-width: 650px; }.download-card { width: min(100%, 480px); }.feature-strip { grid-template-columns: 1fr; }.feature + .feature { border-top: 1px solid var(--line); border-left: 0; padding-top: 14px; }.install-section { grid-template-columns: 1fr; gap: 28px; padding-top: 65px; }.install-section h2 { max-width: none; }.install-steps { gap: 10px; } }
@media (max-width: 560px) { .site-header, main, .site-footer { width: min(100% - 32px, 1180px); }.site-header { padding: 18px 0; }.brand img { width: 86px; }.brand span { font-size: 11px; }.hero { min-height: 0; padding: 45px 0 45px; }.hero-lede { font-size: 15px; line-height: 1.75; }.download-card { padding: 23px 18px 18px; border-radius: 19px; }.install-steps { grid-template-columns: 1fr; gap: 20px; }.install-steps li { display: grid; grid-template-columns: 35px 1fr; gap: 6px; }.install-steps li > span { margin: 3px 0 0; }.site-footer { gap: 8px; flex-wrap: wrap; }.site-footer span:last-child { width: 100%; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.download-button { transition: none; } }