/* ============================================================
   solution/trigix 极简编辑风覆盖层（白底 / 冷调 / Fraunces）
   在 trigix 内联 <style> 之后加载，覆盖原深色主题。
   ============================================================ */

@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: "JetBrains Mono";
  src: url("/static/assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-soft: #f6f7f8;
  --ink: #16171a;
  --muted: #52555c;
  --faint: #878b92;
  --line: #ebecee;
  --line-strong: #dcdee1;
  --green: #236a73;
  --green-2: #236a73;
  --blue: #1f6c9f;
  --gold: #8a5a00;
  --dark: #141413;
  --solid-ink: #141413;
  --act: #b1542f;        /* 暖陶土：主行动按钮 + 图标/数字暖点缀 */
  --act-hover: #9a4527;
  --act-soft: #f7eae3;
  --shadow: 0 1px 2px rgba(20, 20, 19, 0.04);
  --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(--bg) !important;
  background-size: auto !important;
  color: var(--ink);
  font-family: var(--rd-sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .brand {
  font-family: var(--rd-serif);
  letter-spacing: -0.02em;
  font-weight: 560;
}
h1 { font-weight: 580; }

/* ---------- 顶栏：白底毛玻璃 ---------- */
.topbar {
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(12px);
}
.nav { color: var(--ink); }
.brand { color: var(--ink); font-weight: 600; }
.brand-mark {
  background: var(--green);
  box-shadow: none;
}
.nav-links { font-weight: 500; }
.nav-links a { color: var(--muted); }
.nav-links a:hover { color: var(--ink); }

/* ---------- Hero：白底编辑式 ---------- */
.hero {
  color: var(--ink);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.hero::before { display: none; }
.hero-inner { align-items: center; }
.eyebrow {
  border: 1px solid var(--line);
  color: var(--green);
  background: var(--surface-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
}
h1 {
  color: var(--ink);
  font-size: clamp(40px, 5.6vw, 66px);
  line-height: 1.06;
}
.hero-copy p { color: var(--muted); font-size: 18px; line-height: 1.7; }

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

/* ---------- Hero 数据 ---------- */
.hero-facts div {
  border: 1px solid var(--line);
  background: var(--surface);
}
.hero-facts strong { color: var(--act); font-family: var(--rd-mono); font-weight: 500; }
.hero-facts span { color: var(--muted); }

/* ---------- 工作流可视化窗口：浅色 faux-OS ---------- */
.workflow-visual {
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.window-bar { border-bottom: 1px solid var(--line); }
.window-title { color: var(--muted); }
.canvas {
  background:
    linear-gradient(90deg, rgba(20, 20, 19, 0.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(20, 20, 19, 0.035) 1px, transparent 1px);
  background-color: var(--surface-soft);
}
.node {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.node i { color: var(--act); }
.node strong { color: var(--ink); }
.node span { color: var(--muted); }
.edge {
  background: linear-gradient(90deg, rgba(35, 106, 115, 0.25), rgba(35, 106, 115, 0.85));
}
.edge::after { border-left-color: rgba(35, 106, 115, 0.9); }

/* ---------- 区块标题 ---------- */
.section-head span, .label {
  border-radius: 999px;
  color: var(--green);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
h2 { color: var(--ink); font-size: clamp(28px, 3.2vw, 42px); line-height: 1.16; }
.section-head p { color: var(--muted); }

/* ---------- 能力 / 场景 / 部署卡：纯白扁平 ---------- */
.capability-card, .use-card, .deploy-card {
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.capability-card:hover, .use-card:hover, .deploy-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}
.capability-card::before, .deploy-card::before {
  height: 2px;
  border-radius: 0;
  background: var(--act);
}
.capability-card i, .use-card i, .deploy-card i { color: var(--act); }
.capability-card h3, .use-card h3, .deploy-card h3 { font-family: var(--rd-serif); font-weight: 560; color: var(--ink); }
.capability-card p, .use-card p, .deploy-card p { color: var(--muted); }

/* ---------- 开源区块：浅色 ---------- */
.opensource-band {
  background: var(--surface-soft);
  color: var(--ink);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.opensource-copy h2 { color: var(--ink); }
.opensource-copy p { color: var(--muted); }
.metrics div {
  border: 1px solid var(--line);
  background: var(--surface);
}
.metrics strong { color: var(--act); font-family: var(--rd-mono); font-weight: 500; }
.metrics span { color: var(--muted); }

/* 终端代码窗：浅色冷灰 */
.terminal {
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.terminal pre {
  color: var(--ink);
  font-family: var(--rd-mono);
  font-size: 14px;
}

/* ---------- CTA：实心 ink 收尾带 ---------- */
.cta-panel {
  color: #f4f4f2;
  background: var(--solid-ink);
  box-shadow: none;
}
.cta-panel h2 { color: #ffffff; }
.cta-panel p { color: #c9cbce; }
.cta-panel .btn {
  background: var(--act);
  color: #ffffff;
}
.cta-panel .btn:hover { background: var(--act-hover); }

/* ---------- 页脚：浅色 ---------- */
footer {
  color: var(--faint);
  background: var(--surface);
  border-top: 1px solid var(--line);
}
footer a { color: var(--muted); }