:root {
  --ink: #1b302c;
  --green: #153c36;
  --mint: #c7ff51;
  --orange: #f6bd3b;
  --paper: #f7f5ed;
  --line: #d8ddd2;
  --muted: #74817a;
  --white: #fffdf7;
  --sans: "Segoe UI", "Microsoft YaHei", sans-serif;
  --serif: Georgia, "Noto Serif CJK SC", "Microsoft YaHei", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 15px; }
a { color: inherit; }
.topbar { height: 76px; max-width: 1220px; margin: auto; padding: 0 32px; display: flex; align-items: center; border-bottom: 1px solid rgba(21,60,54,.13); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--green); font-weight: 800; font-size: 20px; }
.brand-mark { width: 31px; height: 31px; display: grid; place-items: center; background: var(--green); color: var(--mint); font-size: 17px; border-radius: 8px; }
.topbar nav { display: flex; gap: 32px; margin: auto; }
.topbar nav a, .top-download { font-size: 13px; font-weight: 600; text-decoration: none; color: var(--ink); }
.topbar nav a:hover { color: #167766; }
.top-download { padding: 11px 16px; border: 1px solid var(--green); border-radius: 4px; }
.top-download span { color: #db8c26; margin-left: 8px; }
.hero { position: relative; overflow: hidden; max-width: 1220px; min-height: 560px; margin: auto; padding: 74px 56px 65px; display: grid; grid-template-columns: 1fr 440px; align-items: center; gap: 54px; }
.hero-copy { position: relative; z-index: 2; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #267565; font-size: 11px; font-weight: 700; }
.live-dot { display: inline-block; width: 8px; height: 8px; background: #55bf8b; border-radius: 50%; box-shadow: 0 0 0 4px rgba(85,191,139,.16); }
h1, h2, h3, p { margin-top: 0; }
.hero h1, .section-heading h2, .download-copy h2 { font-family: var(--serif); font-weight: 700; }
.hero h1 { font-size: 52px; line-height: 1.28; margin: 23px 0 17px; }
.hero h1 em { font-style: normal; color: #e48b34; }
.hero-copy > p { max-width: 480px; color: #66766f; font-size: 15px; line-height: 1.95; margin-bottom: 24px; }
.hero-actions { display: flex; gap: 12px; align-items: center; }
.button { min-height: 46px; padding: 0 19px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; text-decoration: none; font-weight: 700; font-size: 13px; border-radius: 4px; }
.button.primary { background: var(--green); color: #fff; }
.button.primary span { color: var(--mint); font-size: 17px; }
.button.secondary { color: var(--green); border: 1px solid #b7c5bc; background: rgba(255,255,255,.3); }
.trust-line { margin-top: 31px; display: flex; align-items: center; gap: 14px; color: #718079; font-size: 11px; }
.trust-line i { width: 3px; height: 3px; background: #e29a43; border-radius: 50%; }
.preview { position: relative; z-index: 1; width: 100%; padding: 17px 19px 18px; background: #fffdf8; border: 1px solid #e2ded2; box-shadow: 0 24px 65px rgba(50,68,49,.14); border-radius: 7px; transform: rotate(1deg); }
.preview-top { height: 25px; display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: #6a7770; font-weight: 600; }
.window-dots { display: flex; gap: 4px; }
.window-dots i { display: block; width: 7px; height: 7px; background: #f1b84b; border-radius: 50%; }
.window-dots i:nth-child(2) { background: #69cba0; }
.window-dots i:nth-child(3) { background: #efa1a3; }
.preview-live { color: #239170; font-size: 9px; }
.preview-date { color: #79847b; font-size: 10px; margin: 14px 0 10px; }
.preview-card { background: #123d35; color: #fff1cf; padding: 17px 19px 13px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(204,255,81,.25); }
.preview-status { font-size: 10px; display: flex; align-items: center; gap: 8px; }
.preview-status .live-dot { width: 6px; height: 6px; }
.preview-caption { font-size: 10px; margin-top: 14px; color: #dce8d3; }
.preview-money { font-size: 36px; font-weight: 800; color: #f7c550; margin: 0; line-height: 1.3; }
.preview-rate { font-size: 10px; color: #d8e7d8; }
.meter { position: relative; height: 7px; background: rgba(255,255,255,.18); margin-top: 15px; overflow: hidden; border-radius: 5px; }
.meter span { position: absolute; inset: 0 auto 0 0; width: 61.6%; background: #d0ef47; border-radius: 5px; }
.meter i { position: absolute; left: 59%; top: 0; width: 8px; height: 7px; background: #fff7d9; filter: blur(2px); }
.meter-caption { display: flex; justify-content: flex-end; gap: 8px; font-size: 9px; color: #d5e3d6; margin-top: 6px; }
.meter-caption b { color: #f9cf56; }
.preview-stats { display: grid; grid-template-columns: 1fr 1fr; padding: 17px 4px 15px; }
.preview-stats div { display: flex; flex-direction: column; gap: 5px; }
.preview-stats small { color: #7b8981; font-size: 9px; }
.preview-stats b { font-size: 16px; }
.preview-quote { background: #ffdda0; padding: 11px 13px; position: relative; border-radius: 4px; }
.preview-quote span { font-size: 9px; color: #86572d; font-weight: 700; }
.preview-quote p { font-size: 11px; margin: 5px 16px 1px 0; color: #392d21; }
.preview-quote > b { position: absolute; right: 12px; top: 13px; color: #cb7229; }
.preview-spark { position: absolute; color: #ed9e35; z-index: 3; }
.spark-one { font-size: 25px; right: -13px; top: 72px; }
.spark-two { font-size: 18px; left: -17px; bottom: 80px; color: #65b995; }
.hero-orbit { position: absolute; border: 1px solid rgba(221,154,64,.2); border-radius: 50%; pointer-events: none; }
.orbit-one { width: 550px; height: 550px; right: -190px; top: -195px; }
.orbit-two { width: 390px; height: 390px; right: -107px; top: -115px; }
.presence-band { min-height: 168px; background: #153c36; color: #f4f8e9; display: grid; grid-template-columns: minmax(280px, 1.3fr) repeat(3, minmax(120px, .55fr)); align-items: center; gap: 0; padding: 26px max(32px, calc((100vw - 1120px) / 2)); }
.presence-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-right: 24px; }
.presence-live { display: inline-flex; align-items: center; gap: 9px; color: #bfff8f; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.presence-intro .live-dot { background: #bfff8f; box-shadow: 0 0 0 5px rgba(191,255,143,.14); }
.presence-intro h2 { margin: 0; font-size: 18px; line-height: 1.45; }
.presence-intro small { color: #b5c7bd; font-size: 10px; }
.presence-item { min-height: 82px; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 22px; border-left: 1px solid rgba(244,248,233,.22); }
.presence-item b { font-size: 48px; line-height: 1.1; font-variant-numeric: tabular-nums; color: #f8fbf1; }
.presence-item span { font-size: 12px; font-weight: 700; color: #cad7ce; }
.presence-item.working b { color: #c9ff85; }
.presence-item.overtime b { color: #ffc66e; }
.presence-item.online b { color: #7be5d2; }
.section-wrap { max-width: 1120px; margin: auto; padding-left: 32px; padding-right: 32px; }
.features { padding-top: 86px; padding-bottom: 92px; }
.section-heading { text-align: center; }
.section-heading > span { font-size: 11px; color: #c67b35; font-weight: 700; }
.section-heading h2 { font-size: 31px; line-height: 1.5; margin: 12px 0 35px; }
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }
.feature { min-height: 203px; padding: 23px 23px 19px; background: #fffdf8; border: 1px solid #e5e2d8; border-radius: 5px; position: relative; overflow: hidden; }
.feature:nth-child(2) { background: #e3f3e8; }
.feature:nth-child(3) { background: #ffe8db; }
.feature-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #f6d789; color: #315348; font-size: 18px; font-weight: 700; }
.feature-time .feature-icon { background: #b6e4ca; }
.feature-mood .feature-icon { background: #f5b3a1; }
.feature h3 { font-size: 15px; margin: 18px 0 8px; }
.feature p { color: #738078; font-size: 11px; line-height: 1.8; max-width: 260px; }
.feature-line { position: absolute; bottom: 0; left: 0; width: 46%; height: 3px; background: #e9ae49; }
.feature-time .feature-line { background: #58ae8b; }
.feature-mood .feature-line { background: #ed8d70; }
.download-section { border-top: 1px solid #dce0d7; padding-top: 68px; padding-bottom: 75px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.download-copy .eyebrow { font-size: 10px; }
.download-copy h2 { font-size: 31px; line-height: 1.5; margin: 13px 0; }
.download-copy p { font-size: 12px; color: #738078; }
.platform-note { font-size: 11px; font-weight: 700; color: #31594d; margin-top: 24px; }
.platform-note span { color: #de9c3d; margin: 0 7px; }
.download-list { display: flex; flex-direction: column; gap: 9px; }
.download-row { display: flex; align-items: center; justify-content: space-between; padding: 15px 17px; background: #fffdf8; border: 1px solid #e2e4dc; border-radius: 4px; text-decoration: none; color: var(--ink); }
.download-row:hover { border-color: #6ca98f; transform: translateY(-1px); }
.download-row strong { display: block; font-size: 13px; }
.download-row small { display: block; color: #829087; font-size: 10px; margin-top: 4px; }
.download-arrow { width: 32px; height: 32px; display: grid; place-items: center; background: #d9f2c1; border-radius: 50%; color: #255947; }
.loading-row, .empty-row { padding: 19px; background: #fffdf8; border: 1px solid #e2e4dc; color: #74817a; font-size: 12px; }
.footer { min-height: 75px; border-top: 1px solid #dce0d7; max-width: 1156px; margin: auto; padding: 18px; display: flex; align-items: center; justify-content: space-between; gap: 15px; color: #7c8881; font-size: 10px; }
.footer .brand { font-size: 15px; }
.footer .brand-mark { width: 25px; height: 25px; font-size: 13px; }
.quick-links { display: flex; gap: 14px; flex-wrap: wrap; }
.quick-links a { color: #54736a; text-decoration: none; }
.quick-links a:hover { color: #167766; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr 380px; padding: 58px 32px; gap: 25px; }
  .hero h1 { font-size: 40px; }
  .presence-band { grid-template-columns: minmax(210px, 1.2fr) repeat(3, minmax(90px, .55fr)); padding-left: 24px; padding-right: 24px; }
  .presence-item { padding-left: 15px; padding-right: 10px; }
  .presence-item b { font-size: 40px; }
  .section-wrap { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 680px) {
  .topbar { height: 63px; padding: 0 17px; }
  .topbar nav { display: none; }
  .top-download { margin-left: auto; padding: 9px 11px; font-size: 11px; }
  .brand { font-size: 17px; }
  .hero { display: flex; flex-direction: column; align-items: stretch; padding: 48px 21px 39px; gap: 33px; }
  .hero h1 { font-size: 37px; }
  .hero-copy > p { font-size: 13px; }
  .preview { max-width: 440px; margin: auto; transform: none; }
  .presence-band { grid-template-columns: 1fr 1fr; gap: 17px 0; padding: 25px 21px; }
  .presence-intro { grid-column: 1 / -1; padding: 0 0 5px; }
  .presence-intro h2 { font-size: 16px; }
  .presence-item { min-height: 70px; padding: 0 10px; }
  .presence-item:nth-of-type(2) { border-left: 0; padding-left: 0; }
  .presence-item b { font-size: 38px; }
  .presence-item span { font-size: 10px; }
  .features { padding-top: 59px; padding-bottom: 60px; }
  .section-heading h2, .download-copy h2 { font-size: 27px; }
  .feature-grid { grid-template-columns: 1fr; gap: 9px; }
  .feature { min-height: 165px; padding: 18px; }
  .feature h3 { margin-top: 12px; }
  .feature p { margin-bottom: 7px; }
  .download-section { grid-template-columns: 1fr; gap: 22px; padding-top: 48px; padding-bottom: 53px; }
  .footer { padding: 15px 18px; gap: 12px; flex-wrap: wrap; }
  .footer > span:nth-child(2) { display: none; }
}