:root {
  color-scheme: light;
  --green-950:#073d34; --green-800:#0d594b; --green-700:#146b5a;
  --green-100:#e7f1ec; --gold:#d9ad56; --cream:#faf7ef;
  --text:#123f38; --muted:#687d77; --line:rgba(18,63,56,.13);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}
* { box-sizing:border-box; }
body { margin:0; color:var(--text); background:linear-gradient(145deg,#eef4ec 0%,var(--cream) 68%,#f1dfbd 100%); min-height:100vh; }
.site-header { max-width:1160px; margin:auto; min-height:92px; padding:18px 28px; display:flex; align-items:center; justify-content:space-between; }
.brand { color:inherit; text-decoration:none; display:flex; align-items:center; gap:12px; }
.brand img { border-radius:16px; box-shadow:0 8px 20px rgba(143,42,32,.14); }
.brand strong,.brand small { display:block; } .brand strong { font-size:20px; } .brand small { margin-top:3px; color:var(--muted); font-size:12px; }
.official-badge { padding:8px 13px; border-radius:999px; background:#fff8e8; color:#8a6118; font-size:12px; font-weight:700; }
main { max-width:1160px; margin:auto; padding:20px 28px 64px; }
.hero { min-height:620px; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr); align-items:center; gap:74px; }
.eyebrow { color:var(--green-700); font-weight:800; letter-spacing:.16em; }
h1 { margin:18px 0; font-size:clamp(44px,6vw,72px); line-height:1.08; letter-spacing:-.04em; }
.lead { color:var(--muted); font-size:20px; }
.benefits { list-style:none; padding:0; margin:28px 0; display:flex; flex-wrap:wrap; gap:10px; }
.benefits li { padding:10px 14px; border-radius:999px; background:rgba(255,255,255,.7); border:1px solid var(--line); font-weight:700; }
.download-actions { display:flex; gap:12px; flex-wrap:wrap; }
.button { min-height:54px; padding:0 24px; border-radius:15px; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; font-weight:800; }
.button-primary { background:var(--green-800); color:#fff; box-shadow:0 12px 26px rgba(13,89,75,.2); }
.button-primary:not([aria-disabled="true"]):hover { background:var(--green-950); transform:translateY(-1px); }
.button-secondary { border:1px solid rgba(13,89,75,.2); background:rgba(255,255,255,.76); color:var(--green-800); box-shadow:0 10px 22px rgba(13,89,75,.1); }
.button-secondary:hover { border-color:var(--green-700); background:#fff; transform:translateY(-1px); }
.button-primary[aria-disabled="true"] { border:1px solid var(--line); background:rgba(255,255,255,.56); color:#899690; cursor:not-allowed; box-shadow:none; }
.ios-backups { width:min(100%,430px); margin-top:12px; }
.ios-backups summary { min-height:44px; display:flex; align-items:center; color:var(--green-700); font-weight:700; cursor:pointer; }
.ios-backup-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding-top:4px; }
.ios-backup-grid a { min-height:44px; border:1px solid var(--line); border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.68); color:var(--green-800); font-weight:700; text-decoration:none; }
.ios-backup-grid a:hover { border-color:var(--green-700); background:#fff; }
.phone { width:min(100%,390px); margin:auto; padding:12px; border-radius:48px; background:var(--green-950); box-shadow:0 34px 80px rgba(7,61,52,.25); transform:rotate(2deg); }
.phone-screen { min-height:560px; padding:26px 20px; border-radius:38px; background:linear-gradient(#f4f7f2,#fff); overflow:hidden; }
.phone-brand { font-weight:900; font-size:19px; }
.phone-hero { margin-top:24px; padding:22px; border-radius:22px; background:var(--green-800); color:#fff; }
.phone-hero small,.phone-hero strong { display:block; } .phone-hero strong { margin-top:8px; font-size:25px; }
.phone-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.phone-grid span { height:88px; border-radius:18px; background:var(--green-100); } .phone-grid span:nth-child(2n) { background:#fff1d7; }
.phone-card { height:110px; margin-top:16px; border-radius:20px; background:#fff; box-shadow:0 10px 24px rgba(18,63,56,.08); }
.install-help { display:grid; grid-template-columns:repeat(3,1fr); background:rgba(255,255,255,.62); border:1px solid var(--line); border-radius:24px; }
.install-help>div { display:flex; gap:14px; padding:22px; align-items:center; } .install-help>div+div { border-left:1px solid var(--line); }
.install-help span { color:var(--gold); font-weight:900; } .install-help p,.install-help small { margin:0; display:block; } .install-help small { margin-top:4px; color:var(--muted); }
footer { padding:30px 20px 44px; text-align:center; color:var(--muted); font-size:13px; }
@media (min-width: 761px) and (max-width: 900px) {
  .hero { grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr); gap:38px; }
}
@media (max-width: 760px) {
  .site-header { min-height:78px; padding:14px 20px; } .brand img { width:48px; height:48px; }
  main { padding:8px 20px 42px; } .hero { min-height:auto; grid-template-columns:1fr; gap:44px; text-align:center; }
  h1 { font-size:42px; } .lead { font-size:17px; } .benefits,.download-actions { justify-content:center; }
  .download-actions,.button,.ios-backups { width:100%; } .phone { width:min(82vw,330px); transform:none; }
  .phone-screen { min-height:465px; } .install-help { grid-template-columns:1fr; margin-top:48px; }
  .install-help>div+div { border-left:0; border-top:1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }