/* FoxTake 站点样式
 * 色值正本:Sources/Brand.swift → OPENCODE-PLAN/品牌设计/产品家族规范.md
 * 🔴 珊瑚底上的文字一律用 --ink。白字在珊瑚上只有 2.1:1,小字会糊。
 */

:root {
  --teal:      #1F4A4E;  /* 容器色 Deep Teal */
  --coral:     #FF9A7A;  /* 强调色 珊瑚 */
  --ink:       #172238;  /* 珊瑚上唯一够对比度的字色(7.7:1) */
  --slate:     #7295C4;
  --off-white: #F4F7FB;
  --sheet-bg:  #171A1E;  /* 面板底,带 Deep Teal 冷调,不是中性灰 */
  --surface:   #252A31;
  --surface-hi:#323842;
  --text-dim:  #98A0AC;
  --text-faint:#868E9A;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--sheet-bg);
  color: var(--off-white);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

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

/* ---------- 头部 ---------- */

header {
  padding: 64px 0 40px;
  text-align: center;
  /* Deep Teal 往下淡出,和 App 图标容器同族 */
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%,
                    rgba(31, 74, 78, .55) 0%,
                    rgba(31, 74, 78, 0) 70%);
}

.app-icon {
  width: 108px;
  height: 108px;
  border-radius: 24px;
  display: block;
  margin: 0 auto 20px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
}

h1 {
  margin: 0 0 6px;
  font-size: 32px;
  font-weight: 650;
  letter-spacing: .5px;
}

/* 背书行:16px / Cool Gray / 字距 3.5 / 全大写 —— 规范 §六 */
.endorse {
  margin: 0;
  font-size: 13px;
  letter-spacing: 3.5px;
  color: var(--text-faint);
  text-transform: uppercase;
}

.tagline {
  margin: 20px auto 0;
  max-width: 480px;
  color: var(--text-dim);
  font-size: 17px;
}

/* ---------- 通用区块 ---------- */

main { padding-bottom: 48px; }

section { margin: 44px 0; }

h2 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--surface-hi);
}

h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 26px 0 8px;
  color: var(--off-white);
}

p { margin: 0 0 14px; }

a {
  color: var(--coral);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 154, 122, .35);
}
a:hover { border-bottom-color: var(--coral); }

strong { color: var(--off-white); font-weight: 600; }

/* ---------- 特性卡 ---------- */

.features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}

.features li {
  background: var(--surface);
  border-radius: 12px;
  padding: 18px 20px;
}

.features b {
  display: block;
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 600;
}

.features span {
  color: var(--text-dim);
  font-size: 15px;
}

/* ---------- 隐私要点条 ---------- */

.privacy-note {
  background: linear-gradient(135deg,
              rgba(31, 74, 78, .5), rgba(37, 42, 49, .5));
  border: 1px solid rgba(114, 149, 196, .25);
  border-radius: 12px;
  padding: 20px 22px;
}

.privacy-note p:last-child { margin-bottom: 0; }

/* ---------- 定义列表(支持页 FAQ) ---------- */

dl { margin: 0; }
dt {
  font-weight: 600;
  margin-top: 22px;
  color: var(--off-white);
}
dd {
  margin: 6px 0 0;
  color: var(--text-dim);
}

/* ---------- 页脚 ---------- */

footer {
  border-top: 1px solid var(--surface-hi);
  padding: 28px 0 40px;
  text-align: center;
  font-size: 13px;
  color: var(--text-faint);
  line-height: 2;
}

footer a {
  color: var(--text-dim);
  border-bottom: none;
}
footer a:hover { color: var(--coral); }

.footer-nav { margin-bottom: 8px; }
.footer-nav a { margin: 0 10px; }

/* ---------- 小屏 ---------- */

@media (max-width: 480px) {
  header { padding: 44px 0 32px; }
  h1 { font-size: 27px; }
  .app-icon { width: 92px; height: 92px; }
  .tagline { font-size: 16px; }
}

/* ---------- 尊重减少动效偏好 ---------- */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}