:root {
  --brand: #2E7D4F;
  --brand-dark: #1B4D30;
  --accent: #E08A2C;
  --bg: #F5F7F4;
  --surface: #FFFFFF;
  --text: #1F2621;
  --muted: #6B7770;
  --font: 'Noto Sans TC','PingFang TC','Heiti TC',-apple-system,BlinkMacSystemFont,sans-serif;
  --radius: 16px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
  --shadow-md: 0 6px 24px rgba(0,0,0,.09);
}
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.75; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.container { max-width:1080px; margin:0 auto; padding:0 24px; }
.header { position:sticky; top:0; z-index:100; background:var(--surface); box-shadow:var(--shadow-sm); }
.header-content { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; }
.logo { display:flex; align-items:center; gap:10px; font-weight:700; }
.header-links { display:flex; gap:20px; font-size:.92rem; color:var(--muted); flex-wrap:wrap; }
.header-links a:hover { color:var(--brand); }
.hero { text-align:center; padding:72px 0 56px; }
.hero h1 { font-size:clamp(1.7rem,4.5vw,2.6rem); line-height:1.35; margin-bottom:14px; }
.hero p { color:var(--muted); font-size:clamp(1rem,2.2vw,1.15rem); max-width:36em; margin:0 auto; }
.badge { display:inline-block; margin-top:26px; padding:11px 22px; border-radius:999px;
  background:var(--brand); color:#fff; font-weight:700; font-size:.95rem; }
.badge.ghost { background:transparent; color:var(--muted); border:2px solid rgba(0,0,0,.12); }
.section { padding:56px 0; }
.section.alt { background:var(--surface); }
.section-title { text-align:center; font-size:clamp(1.3rem,3vw,1.8rem); margin-bottom:34px; }
.grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); }
.card { background:var(--bg); border:1px solid rgba(0,0,0,.06); border-radius:var(--radius); padding:22px; }
.section.alt .card { background:var(--surface); box-shadow:var(--shadow-sm); border:none; }
.card .ico { font-size:1.8rem; margin-bottom:8px; }
.card h3 { font-size:1.05rem; margin-bottom:6px; }
.card p { color:var(--muted); font-size:.94rem; }
.note { max-width:44em; margin:0 auto; background:var(--surface); border-left:4px solid var(--brand);
  border-radius:10px; padding:18px 22px; color:var(--muted); font-size:.95rem; }
.steps { max-width:52em; margin:0 auto; counter-reset:s; }
.step { display:flex; gap:16px; padding:16px 0; border-bottom:1px solid rgba(0,0,0,.06); }
.step:last-child { border-bottom:none; }
.step-n { flex:0 0 34px; height:34px; border-radius:50%; background:var(--brand); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:.9rem; }
.step h3 { font-size:1rem; margin-bottom:2px; }
.step p { color:var(--muted); font-size:.93rem; }
.doc { max-width:780px; margin:0 auto; padding:44px 24px 72px; }
.doc h1 { font-size:1.9rem; margin-bottom:6px; }
.doc .updated { color:var(--muted); font-size:.9rem; margin-bottom:28px; }
.doc h2 { font-size:1.15rem; margin:32px 0 10px; padding-bottom:6px; border-bottom:2px solid rgba(0,0,0,.07); }
.doc h3 { font-size:1rem; margin:20px 0 6px; color:var(--brand-dark); }
.doc p, .doc li { color:var(--text); }
.doc ul { margin:8px 0 8px 1.3em; }
.doc li { margin-bottom:5px; }
.doc .highlight { background:var(--surface); border-left:4px solid var(--accent);
  border-radius:10px; padding:16px 20px; margin:20px 0; }
.doc a { color:var(--brand); text-decoration:underline; }
.footer { background:var(--surface); padding:34px 0; text-align:center; color:var(--muted); font-size:.9rem; }
.footer nav { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-bottom:12px; }
.footer a:hover { color:var(--brand); }
@media (max-width:640px) { .header-content { flex-direction:column; align-items:flex-start; } }

/* App Store 徽章與截圖輪播 */
.hero-icon { width:104px; height:104px; border-radius:24px; margin:0 auto 22px; box-shadow:var(--shadow-md); }
.shots { padding:8px 0 48px; overflow-x:auto; }
.shots-inner { display:flex; gap:18px; padding:8px 24px; width:max-content; margin:0 auto; }
.shot { width:224px; border-radius:20px; box-shadow:var(--shadow-md); flex:0 0 auto; }
@media (max-width:640px) { .shot { width:180px; } }