/* 颜色照紫藤设计系统（guides/design/design-system/README.md）：字一律炭黑，颜色只上在底色、图标和线条上 */
:root {
  --bg: #FFFFFF;
  --band: #F2F2F7;
  --text: #2C3137;
  --text-2: rgba(44, 49, 55, 0.72);
  --separator: rgba(60, 60, 67, 0.18);
  --primary: #7C5DC2;
  --on-primary: #FFFFFF;
  --accent-soft: #E9E6F5;
  --fill-quiet: rgba(118, 118, 128, 0.12);
  --cat-audio: #9476CF;
  --cat-shot: #4E8CD9;
  --cat-egg: #DB8A00;
  --cat-toilet: #3EA2B0;
  --shadow: 0 18px 40px rgba(60, 40, 110, 0.18), 0 2px 6px rgba(60, 40, 110, 0.08);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --band: #1C1C1E;
    --text: #F2F3F5;
    --text-2: rgba(235, 235, 245, 0.64);
    --separator: rgba(84, 84, 88, 0.6);
    --accent-soft: rgba(148, 118, 207, 0.26);
    --fill-quiet: rgba(118, 118, 128, 0.24);
    --cat-egg: #F2B54B;
    --shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  }
}

/* 中英文切换：<html lang> 是哪种就只留哪种 */
html[lang="en"] [data-l="zh"],
html[lang="zh-Hans"] [data-l="en"] { display: none !important; }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  -webkit-font-smoothing: antialiased;
}

html[lang="zh-Hans"] body { line-height: 1.75; }

img { display: block; max-width: 100%; height: auto; }

h1, h2, .lead { text-wrap: balance; }

a { color: inherit; }

.wrap {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 顶栏 */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  text-decoration: none;
}

.brand img { width: 32px; height: 32px; }

.lang {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  background: var(--fill-quiet);
  border: 0;
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
}

.lang:hover { background: var(--accent-soft); }

/* 开头一屏 */
.hero {
  text-align: center;
  padding-top: 40px;
  padding-bottom: 72px;
}

.hero-icon {
  width: 128px;
  height: 128px;
  margin: 0 auto 24px;
  filter: drop-shadow(0 12px 24px rgba(92, 61, 184, 0.28));
}

h1 {
  margin: 0;
  font-size: clamp(44px, 8vw, 68px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.lead {
  max-width: 30ch;
  margin: 16px auto 0;
  font-size: clamp(21px, 3.2vw, 27px);
  line-height: 1.35;
  font-weight: 600;
}

.sub {
  max-width: 44ch;
  margin: 14px auto 0;
  color: var(--text-2);
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: 28px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 700;
  text-decoration: none;
}

.cta:hover { filter: brightness(1.08); }

/* TestFlight 链接还没有时：灰底、点不动 */
.cta.is-disabled {
  background: var(--fill-quiet);
  color: var(--text-2);
  cursor: default;
  filter: none;
}

.note {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--text-2);
}

/* 功能：手机上一列，电脑上文字和截图左右并排、一行换一边 */
.feature {
  display: grid;
  gap: 32px;
  align-items: center;
  padding: 48px 0;
}

.copy { max-width: 32rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
}

.eyebrow i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dot);
}

h2 {
  margin: 10px 0 14px;
  font-size: clamp(27px, 4vw, 38px);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.copy p:last-child {
  margin: 0;
  color: var(--text-2);
  font-size: 18px;
}

.shot {
  width: min(300px, 78vw);
  margin: 0 auto;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--primary);
}

.cities {
  margin: 24px 0 72px;
  padding: 40px 24px;
  border-radius: 28px;
  background: var(--accent-soft);
}

@media (min-width: 800px) {
  .feature {
    grid-template-columns: minmax(0, 30rem) 300px;
    justify-content: center;
    gap: 88px;
    padding: 64px 0;
  }
  .feature:nth-child(even) { grid-template-columns: 300px minmax(0, 30rem); }
  .feature:nth-child(even) .copy { order: 2; }
  .shot { width: 300px; }
  .cities { padding: 56px 64px; }
}

/* 页脚 */
.foot {
  padding-top: 28px;
  padding-bottom: 48px;
  border-top: 1px solid var(--separator);
  font-size: 15px;
  color: var(--text-2);
}

.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

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

.foot p { margin: 16px 0 0; }