:root {
  /* Night-agency palette from the app's intro screen and icon: deep indigo night,
     one warm lamp. The site stays dark in both system appearances. */
  --amber:     #F2C47A;
  --amber-hi:  #F5CF8A;
  --amber-lo:  #E3A14F;
  --ink:       #EDE8F7;
  --muted:     #9C98B8;
  --line:      #23244A;
  --bg:        #08081A;
  --card:      #121433;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, "Helvetica Neue", Arial, "PingFang SC", "PingFang TC", "Hiragino Sans GB", "Microsoft YaHei", "Microsoft JhengHei", sans-serif;
  color: var(--ink);
  background: radial-gradient(ellipse at 50% -10%, #1b1d45 0%, var(--bg) 60%) no-repeat, var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap-narrow { max-width: 720px; margin: 0 auto; padding: 0 16px; }

/* Nav */
nav.top {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding: 18px 16px;
  max-width: 1100px; margin: 0 auto;
  border-bottom: 1px solid var(--line);
}
nav.top .logo {
  font-weight: 700; font-size: 18px; letter-spacing: -0.01em;
  color: var(--ink);
  display: flex; align-items: center; gap: 10px;
}
nav.top .logo img { width: 28px; height: 28px; border-radius: 7px; }
nav.top .links { display: flex; align-items: center; gap: 18px; }
nav.top .links a { color: var(--muted); font-size: 14px; font-weight: 500; }
nav.top .links a:hover { color: var(--amber); text-decoration: none; }

.langs { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.langs button {
  background: none; border: 0; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600;
  padding: 5px 10px; cursor: pointer; min-width: 36px;
}
.langs button[aria-pressed="true"] { background: var(--card); color: var(--amber); }

/* Hero */
.hero { text-align: center; padding: 64px 16px 48px; }
.hero img.icon { width: 112px; height: 112px; border-radius: 25px; box-shadow: 0 10px 40px rgba(242, 196, 122, 0.18); }
.hero h1 {
  font-size: clamp(34px, 6vw, 54px); line-height: 1.1; letter-spacing: -0.03em;
  margin: 24px 0 14px;
}
.hero p.lead { font-size: clamp(17px, 2vw, 20px); color: var(--muted); max-width: 600px; margin: 0 auto 28px; }
.badge {
  display: inline-block; padding: 10px 20px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); font-size: 14px; font-weight: 600;
}

.features {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px;
  padding: 8px 16px 72px; max-width: 1000px; margin: 0 auto;
}
.feature { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.feature h3 { margin: 0 0 8px; font-size: 17px; color: var(--amber-hi); }
.feature p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.6; }

/* Content pages */
.page-body { padding: 44px 16px 88px; }
.page-body h1 { font-size: clamp(28px, 4vw, 36px); letter-spacing: -0.02em; margin: 0 0 8px; }
.page-body .updated { color: var(--muted); font-size: 14px; margin: 0 0 28px; }
.page-body h2 { margin: 34px 0 10px; font-size: 19px; letter-spacing: -0.01em; color: var(--amber-hi); }
.page-body p, .page-body li { font-size: 16px; line-height: 1.75; }
.page-body ul { padding-left: 22px; }
.page-body li { margin-bottom: 6px; }
.page-body .note {
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--amber-lo);
  border-radius: 10px; padding: 14px 16px; margin: 20px 0;
}

/* Footer */
footer {
  border-top: 1px solid var(--line); padding: 28px 16px 44px;
  color: var(--muted); font-size: 13px; text-align: center;
}
footer a { color: var(--muted); margin: 0 10px; }
footer a:hover { color: var(--amber); }
footer .copy { margin-top: 10px; opacity: 0.7; }

/* i18n: show only the active language */
html[lang="en"] .hans, html[lang="en"] .hant,
html[lang="zh-Hans"] .en, html[lang="zh-Hans"] .hant,
html[lang="zh-Hant"] .en, html[lang="zh-Hant"] .hans { display: none; }