/* SalesBuddy 落地页 · 暖纸 Kraft（与 web 端定稿主题同源） */
:root {
  --paper: #f6f1e8;
  --card: #fdfaf4;
  --ink: #2c261e;
  --ink-2: #6f6557;
  --ink-3: #a39683;
  --line: #e6dccb;
  --line-2: #d5cec0;
  --terra: #b04f2c;
  --terra-deep: #8c3b1e;
  --terra-soft: #f4e2d8;
  --green: #47664f; --green-soft: #e5ecdf;
  --serif: "Songti SC", "STSong", "Noto Serif SC", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans); background: var(--paper); color: var(--ink);
  font-size: 14px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
}
::selection { background: var(--terra-soft); }
a { color: var(--terra-deep); text-decoration: none; }

/* ── 导航 ── */
.lp-nav {
  height: 64px; display: flex; align-items: center; gap: 40px;
  padding: 0 96px; border-bottom: 1px solid var(--line);
  background: rgba(246,241,232,.94); position: sticky; top: 0; z-index: 20;
}
.lp-brand { font-family: var(--serif); font-size: 20px; font-weight: 700; letter-spacing: .02em; }
.lp-brand em { font-style: normal; color: var(--terra); }
.lp-nav-links { display: flex; gap: 30px; font-size: 13px; color: var(--ink-2); margin: 0 auto; }
.lp-nav-links a { color: var(--ink-2); }
.lp-nav-links a:hover { color: var(--ink); }
.lp-nav-right { display: flex; align-items: center; gap: 20px; }
.lp-nav-login { font-size: 13px; color: var(--ink-2); }

.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 30px; border-radius: 4px;
  font-size: 14.5px; font-weight: 650; font-family: var(--sans);
  background: var(--terra); color: #fff; border: 1px solid var(--terra);
  transition: background .15s;
}
.lp-btn:hover { background: var(--terra-deep); border-color: var(--terra-deep); }
.lp-btn.sm { height: 38px; padding: 0 20px; font-size: 13px; }
.lp-btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.lp-btn.ghost:hover { background: var(--card); color: var(--terra-deep); border-color: var(--terra); }

/* ── Hero ── */
.lp-hero {
  display: grid; grid-template-columns: 1.02fr 1fr; gap: 72px;
  padding: 84px 96px 76px; align-items: center;
  max-width: 1500px; margin: 0 auto;
}
.lp-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .22em; color: var(--terra-deep);
}
.lp-kicker::before { content: ""; width: 28px; height: 2px; background: var(--terra); }
.lp-hero h1 {
  font-family: var(--serif); font-size: 55px; font-weight: 700;
  line-height: 1.22; letter-spacing: .01em; margin-top: 20px;
}
.lp-hero h1 em { font-style: normal; color: var(--terra); }
.lp-hero .sub { font-size: 15.5px; line-height: 2.05; color: var(--ink-2); margin-top: 22px; max-width: 460px; }
.lp-hero .sub b { color: var(--ink); font-weight: 650; }
.lp-hero-cta { display: flex; align-items: center; gap: 16px; margin-top: 34px; }
.lp-hero-meta { font-size: 12px; color: var(--ink-3); margin-top: 16px; letter-spacing: .04em; }
.lp-shot-wrap { position: relative; }
.lp-shot {
  background: var(--card); border: 1px solid var(--line-2); border-radius: 6px; padding: 10px;
  box-shadow: 0 24px 64px rgba(44,38,30,.16), 0 2px 8px rgba(44,38,30,.06);
}
.lp-shot img { display: block; width: 100%; border-radius: 3px; }
.lp-quote {
  position: absolute; left: -44px; bottom: -30px; width: 300px;
  background: var(--card); border: 1px solid var(--line-2); border-radius: 4px;
  padding: 16px 18px; box-shadow: 0 12px 32px rgba(44,38,30,.14);
}
.lp-quote .t { font-family: var(--serif); font-size: 14.5px; font-weight: 700; line-height: 1.7; }
.lp-quote .m { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.lp-quote .s { font-size: 10.5px; color: var(--ink-3); }
.lp-quote .tag { font-size: 10px; font-weight: 650; color: var(--green); background: var(--green-soft); border-radius: 2px; padding: 1.5px 7px; }

/* ── 分节 ── */
.lp-section { padding: 76px 96px; max-width: 1500px; margin: 0 auto; }
.lp-hairline { border-top: 1px solid var(--line); }
.lp-sechead { margin-bottom: 44px; }
.lp-sechead h2 { font-family: var(--serif); font-size: 34px; font-weight: 700; margin-top: 16px; line-height: 1.4; }
.lp-sechead .desc { font-size: 14px; color: var(--ink-2); margin-top: 12px; }

/* ── 六大功能 ── */
.lp-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 40px; }
.lp-feat { border-top: 1px solid var(--line-2); padding-top: 22px; }
.lp-feat-ico {
  width: 38px; height: 38px; border-radius: 4px;
  background: var(--terra-soft); color: var(--terra-deep);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 17px; font-weight: 700;
}
.lp-feat h3 { font-family: var(--serif); font-size: 19px; font-weight: 700; margin-top: 16px; }
.lp-feat p { font-size: 12.5px; line-height: 1.95; color: var(--ink-2); margin-top: 10px; }

/* ── 四步流程 ── */
.lp-how { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; }
.lp-step { position: relative; padding-top: 18px; border-top: 2px solid var(--ink); }
.lp-step .no { font-family: var(--serif); font-size: 44px; font-weight: 700; line-height: 1; color: var(--terra); }
.lp-step h4 { font-size: 14.5px; font-weight: 700; margin-top: 14px; }
.lp-step p { font-size: 12px; line-height: 1.85; color: var(--ink-2); margin-top: 8px; }

/* ── 定价 ── */
.lp-plan-group-label {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--ink-2); margin: 0 0 16px;
}
.lp-plan-group-label small { font-size: 11px; color: var(--ink-3); font-weight: 500; letter-spacing: .02em; }
.lp-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }
.lp-plans.three { grid-template-columns: repeat(3, 1fr); }
.lp-plan {
  position: relative; background: var(--card);
  border: 1px solid var(--line); border-radius: 5px;
  padding: 22px 22px 20px; display: flex; flex-direction: column;
}
.lp-plan.popular { border: 2px solid var(--terra); }
.lp-plan-badge {
  position: absolute; top: -11px; left: 20px;
  font-size: 10.5px; font-weight: 700; color: #fff;
  background: var(--terra); border-radius: 2px; padding: 3px 10px; letter-spacing: .08em;
}
.lp-plan-name { font-size: 13px; font-weight: 700; }
.lp-plan-price { display: flex; align-items: baseline; gap: 5px; margin-top: 12px; }
.lp-plan-price .p { font-family: var(--serif); font-size: 33px; font-weight: 700; line-height: 1; }
.lp-plan-price .u { font-size: 11.5px; color: var(--ink-3); }
.lp-plan hr { border: none; border-top: 1px solid var(--line); margin: 16px 0 12px; }
.lp-plan ul { list-style: none; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.lp-plan li { display: flex; gap: 8px; font-size: 12px; color: #55504a; line-height: 1.6; }
.lp-plan li::before { content: "✓"; color: var(--terra); font-weight: 700; font-size: 11px; }
.lp-plan .lp-plan-btn {
  margin-top: 18px; text-align: center; font-size: 12.5px; font-weight: 650;
  border: 1px solid var(--line-2); border-radius: 4px; padding: 9px 0; color: var(--ink-2);
}
.lp-plan.popular .lp-plan-btn { background: var(--terra); border-color: var(--terra); color: #fff; }
.lp-plan-note { font-size: 12px; color: var(--ink-3); margin-top: 18px; }
.lp-hardware {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  background: var(--card); border: 1px solid var(--line); border-radius: 5px;
  padding: 22px 28px; margin-top: 24px;
}
.lp-hardware .t { font-family: var(--serif); font-size: 18px; font-weight: 700; }
.lp-hardware .d { font-size: 12.5px; color: var(--ink-2); margin-top: 6px; line-height: 1.8; }
.lp-hardware .right { display: flex; align-items: center; gap: 22px; flex-shrink: 0; }
.lp-hardware .price { font-family: var(--serif); font-size: 26px; font-weight: 700; }
.lp-hardware .price small { font-family: var(--sans); font-size: 11px; color: var(--ink-3); font-weight: 500; }

/* ── FAQ ── */
.lp-faq { max-width: 860px; }
.lp-faq-item { border-top: 1px solid var(--line-2); padding: 20px 0; }
.lp-faq-item:last-child { border-bottom: 1px solid var(--line-2); }
.lp-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.lp-faq-q .q { font-family: var(--serif); font-size: 16.5px; font-weight: 700; }
.lp-faq-q .plus { font-size: 20px; color: var(--terra); font-weight: 500; line-height: 1; }
.lp-faq-a { font-size: 13px; line-height: 1.95; color: var(--ink-2); margin-top: 12px; max-width: 720px; }

/* ── CTA ── */
.lp-cta {
  background: var(--ink); color: var(--paper);
  padding: 64px 96px; display: flex; align-items: center; justify-content: space-between; gap: 40px;
  max-width: 1500px; margin: 0 auto;
}
.lp-cta h2 { font-family: var(--serif); font-size: 30px; font-weight: 700; line-height: 1.4; }
.lp-cta .sub { font-size: 13px; opacity: .72; margin-top: 10px; }

/* ── 页脚 ── */
.lp-footer { padding: 52px 96px 36px; max-width: 1500px; margin: 0 auto; }
.lp-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; }
.lp-footer .lp-brand { font-size: 18px; }
.lp-footer .tagline { font-size: 12.5px; color: var(--ink-2); margin-top: 12px; line-height: 1.9; max-width: 320px; }
.lp-footer-col h5 { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--ink-3); margin-bottom: 14px; }
.lp-footer-col a { display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 9px; }
.lp-footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line); margin-top: 44px; padding-top: 22px;
  font-size: 11.5px; color: var(--ink-3);
}

@media (max-width: 1100px) {
  .lp-nav, .lp-hero, .lp-section, .lp-cta, .lp-footer { padding-left: 32px; padding-right: 32px; }
  .lp-hero { grid-template-columns: 1fr; gap: 48px; }
  .lp-features { grid-template-columns: repeat(2, 1fr); }
  .lp-plans, .lp-plans.three { grid-template-columns: repeat(2, 1fr); }
  .lp-how { grid-template-columns: repeat(2, 1fr); }
  .lp-quote { left: 8px; }
}