/* ============================================================
   solution/ 营销页 极简编辑风覆盖层（白底 / 冷调 / Fraunces）
   与全站 redesign.css 保持一致；在各页内联 <style> 之后加载，覆盖原深色/teal 主题。
   ============================================================ */

@font-face {
  font-family: "Fraunces";
  src: url("/static/assets/fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/static/assets/fonts/fraunces-latin-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #16171a;
  --muted: #52555c;
  --faint: #878b92;
  --line: #ebecee;
  --line-strong: #dcdee1;
  --paper: #ffffff;
  --mist: #f6f7f8;
  --night: #ffffff;
  --teal: #236a73;
  --cyan: #236a73;
  --blue: #236a73;
  --blue-dark: #1b545c;
  --amber: #8a5a00;
  --green: #346538;
  --rose: #9f2f2d;
  --primary: #236a73;
  --primary-dark: #1b545c;
  --primary-soft: #e9f3f4;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(20, 20, 19, 0.04);
  --solid-ink: #141413;
  --act: #b1542f;        /* 暖陶土：主行动按钮 + 图标/数字暖点缀 */
  --act-hover: #9a4527;
  --act-soft: #f7eae3;
  --rd-serif: "Fraunces", "Songti SC", "Noto Serif SC", "Source Han Serif SC", Georgia, serif;
  --rd-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", system-ui, Arial, sans-serif;
  --rd-mono: "JetBrains Mono", "SF Mono", ui-monospace, Consolas, monospace;
}

/* ---------- 基础 ---------- */
body {
  background: var(--paper) !important;
  color: var(--ink);
  font-family: var(--rd-sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand-title {
  font-family: var(--rd-serif);
  letter-spacing: -0.02em;
  font-weight: 560;
}

h1 { font-weight: 580; }

code, pre, kbd, .mono { font-family: var(--rd-mono); }

/* ---------- 导航：白底毛玻璃 + 细线 ---------- */
.nav {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  backdrop-filter: saturate(180%) blur(12px);
}
.brand,
.nav-home-link { color: var(--ink); }
.brand-title { font-size: 18px; font-weight: 600; }
.nav-links { color: var(--muted); font-weight: 500; }
.nav-links a::after { background: var(--ink); }
.nav-links a:hover { color: var(--ink); }

/* ---------- Hero：白底编辑式，去深色图层与阴影文字 ---------- */
.hero {
  min-height: auto;
  color: var(--ink);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.hero-inner { padding: 132px 0 76px; }
.hero-panel {
  max-width: 920px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.hero-panel .eyebrow,
.hero h1,
.hero-copy { text-shadow: none; }
.eyebrow {
  color: var(--teal);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
}
.hero h1 {
  max-width: 16ch;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
}
.hero-copy {
  max-width: 60ch;
  color: var(--muted);
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.65;
}

/* ---------- 按钮 ---------- */
.button {
  min-height: 46px;
  padding: 0 22px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
}
.button:active { transform: scale(0.98); }
.button.primary {
  color: #ffffff;
  background: var(--act);
  border-color: var(--act);
  box-shadow: none;
}
.button.primary:hover { background: var(--act-hover); border-color: var(--act-hover); }
.button.secondary {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--line-strong);
}
.button.secondary:hover { border-color: var(--ink); }

/* ---------- Hero 数据条：浅色卡片 + 等宽数字 ---------- */
.hero-strip {
  margin-top: 56px;
  border: 1px solid var(--line);
  background: var(--line);
}
.hero-stat { background: var(--paper); }
.hero-stat strong {
  color: var(--act);
  font-family: var(--rd-mono);
  font-weight: 500;
  font-size: 26px;
}
.hero-stat span { color: var(--muted); }

/* ---------- 区块标题 ---------- */
.kicker {
  color: var(--teal);
  font-size: 13px;
  letter-spacing: 0.12em;
  font-weight: 600;
}
h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.14; }
.lead { color: var(--muted); font-size: 19px; line-height: 1.7; }

/* ---------- 特性卡：纯白扁平 + 细线 ---------- */
.feature-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.feature-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}
.feature-card .icon {
  color: var(--act);
  background: var(--act-soft) !important;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
}
.feature-card h3 { font-family: var(--rd-serif); font-weight: 560; }
.feature-card p { color: var(--muted); }

/* ---------- showcase / 媒体框 ---------- */
.showcase { background: var(--mist); }
.media-frame { border: 1px solid var(--line); box-shadow: var(--shadow); }

/* ---------- benefit ---------- */
.benefit { background: var(--paper); border: 1px solid var(--line); }
.benefit span { color: var(--muted); }
.dot { background: var(--teal); }
.plain-list li { color: var(--muted); }

/* ---------- 原深色区块 → 浅色（避免亮页里突兀深块） ---------- */
.dark {
  color: var(--ink);
  background: var(--mist);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.dark .kicker { color: var(--teal); }
.dark .lead { color: var(--muted); }
.audience-item {
  border: 1px solid var(--line);
  background: var(--paper);
}
.audience-item strong { color: var(--ink); }
.audience-item span { color: var(--muted); }

/* ---------- beta ---------- */
.beta { background: var(--mist); }
.beta-box { border: 1px solid var(--line); background: var(--paper); }
.beta-box p { color: var(--muted); }

/* ---------- CTA：实心 ink 收尾带（编辑式强对比，整页唯一深色） ---------- */
.cta {
  color: #f4f4f2;
  background: var(--solid-ink);
}
.cta .kicker { color: #b9c6c6; }
.cta h2 { color: #ffffff; }
.cta p { color: #c9cbce; }
.cta .button.primary {
  color: #ffffff;
  background: var(--act);
  border-color: var(--act);
}
.cta .button.primary:hover { background: var(--act-hover); border-color: var(--act-hover); }

/* ---------- 页脚 ---------- */
.footer { color: var(--faint); border-top: 1px solid var(--line); }
.footer a { color: var(--muted); }