/* ============================================================
   有点真知 · 个人站 v3 —— 大图封面 / 毛玻璃 / 卡片流 / 粒子
   （参考个人主页博客风：全屏封面 + 一言 + 轻动效）
   ============================================================ */
:root {
  --bg: #f6f5f2;
  --card: #ffffff;
  --ink: #232120;
  --ink-soft: #5c5852;
  --ink-faint: #9a948b;
  --line: #e8e4dc;
  --red: #d24535;
  --red-deep: #a82f22;
  --amber: #e8a33d;
  --cover-dark: #16131c;
  --serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --shadow: 0 10px 34px rgba(30, 25, 20, 0.09);
  --shadow-hover: 0 22px 48px rgba(30, 25, 20, 0.16);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
::selection { background: var(--red); color: #fff; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.85;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
body.inner { padding-top: 70px; }

a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ============ 导航（透明 → 毛玻璃） ============ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s;
}
.site-header .bar {
  max-width: 1160px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; height: 70px;
}
.brand { display: flex; align-items: center; gap: 12px; color: #fff; }
.brand:hover { text-decoration: none; }
.seal {
  width: 38px; height: 38px; flex: none;
  background: var(--red); color: #fff;
  font-family: var(--serif); font-weight: 900; font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(210, 69, 53, .45);
}
.brand-name { font-family: var(--serif); font-size: 19px; font-weight: 900; letter-spacing: 3px; line-height: 1.2; display: block; }
.brand-sub { font-size: 10.5px; color: rgba(255,255,255,.65); letter-spacing: 2px; font-family: var(--mono); }
.nav { display: flex; gap: 8px; }
.nav a {
  color: rgba(255,255,255,.88); font-size: 14.5px; font-weight: 600;
  padding: 7px 16px; border-radius: 999px; transition: background .2s, color .2s;
}
.nav a:hover { text-decoration: none; background: rgba(255,255,255,.16); color: #fff; }
.nav a.active { background: rgba(255,255,255,.2); color: #fff; }

/* 滚动后：毛玻璃浅色（仅当导航进入浅色内容区，由 JS 按深色头部位置切换 .solid） */
.site-header.solid {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 2px 18px rgba(30,25,20,.07);
}
.site-header.solid .brand { color: var(--ink); }
.site-header.solid .brand-sub { color: var(--ink-faint); }
.site-header.solid .nav a { color: var(--ink-soft); }
.site-header.solid .nav a:hover { background: rgba(210,69,53,.09); color: var(--red); }
.site-header.solid .nav a.active { background: rgba(210,69,53,.12); color: var(--red); }

/* ============ 全屏封面 ============ */
.cover {
  position: relative; height: 100vh; min-height: 560px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: #fff; overflow: hidden;
  background: var(--cover-dark);
}
.cover .aurora {
  position: absolute; inset: -20%;
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(210, 69, 53, 0.35), transparent 60%),
    radial-gradient(ellipse 55% 45% at 80% 25%, rgba(232, 163, 61, 0.22), transparent 60%),
    radial-gradient(ellipse 70% 60% at 50% 90%, rgba(86, 64, 148, 0.4), transparent 65%);
  animation: aurora 16s ease-in-out infinite alternate;
}
@keyframes aurora {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
  50%  { transform: translate3d(2.5%, 2%, 0) scale(1.06); }
  100% { transform: translate3d(-1%, 1.5%, 0) scale(1.02); }
}
#particles { position: absolute; inset: 0; width: 100%; height: 100%; }
.cover-inner { position: relative; z-index: 2; padding: 0 24px; }
.cover .badge {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
  padding: 6px 18px; font-family: var(--mono); font-size: 12px; letter-spacing: 2.5px;
  color: rgba(255,255,255,.85); margin-bottom: 30px;
  background: rgba(255,255,255,.06); backdrop-filter: blur(6px);
}
.cover .badge::before { content: "●"; color: var(--amber); font-size: 9px; animation: blink 2s infinite; }
@keyframes blink { 50% { opacity: .3; } }
.cover h1 {
  font-family: var(--serif); font-size: clamp(44px, 8vw, 84px);
  font-weight: 900; letter-spacing: 8px; text-shadow: 0 6px 40px rgba(0,0,0,.4);
}
.cover .role {
  margin-top: 18px; font-size: clamp(15px, 2vw, 18px); letter-spacing: 4px;
  color: rgba(255,255,255,.85); font-weight: 600;
}
.cover .quote {
  margin: 40px auto 0; max-width: 560px; min-height: 64px;
  font-family: var(--serif); font-size: clamp(16px, 2.2vw, 19px);
  color: rgba(255,255,255,.92); letter-spacing: 2px; line-height: 1.9;
  transition: opacity .6s ease;
}
.cover .quote.fade { opacity: 0; }
.cover .quote .qfrom { display: block; margin-top: 8px; font-size: 12.5px; color: rgba(255,255,255,.5); font-family: var(--sans); letter-spacing: 2px; }
.scroll-hint {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  z-index: 2; color: rgba(255,255,255,.7); font-size: 12px; letter-spacing: 3px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.scroll-hint i {
  width: 22px; height: 36px; border: 2px solid rgba(255,255,255,.5); border-radius: 12px; position: relative;
}
.scroll-hint i::after {
  content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 8px; border-radius: 2px; background: #fff;
  animation: wheel 1.6s infinite;
}
@keyframes wheel { 0% { opacity: 1; top: 7px; } 70% { opacity: 0; top: 18px; } 100% { opacity: 0; } }

/* ============ 通用区块 ============ */
.section { padding: 84px 0 20px; }
.sec-head { text-align: center; margin-bottom: 48px; }
.sec-head .en { font-family: var(--mono); font-size: 12px; letter-spacing: 4px; color: var(--red); font-weight: 700; }
.sec-head h2 {
  font-family: var(--serif); font-size: clamp(26px, 3.6vw, 36px); font-weight: 900;
  letter-spacing: 4px; margin-top: 8px;
}
.sec-head .line { width: 46px; height: 3px; background: var(--red); border-radius: 2px; margin: 16px auto 0; }

/* 简介卡 */
.intro {
  background: var(--card); border-radius: 20px; box-shadow: var(--shadow);
  padding: 44px 48px; display: grid; grid-template-columns: 1fr auto; gap: 36px; align-items: center;
}
.intro .big {
  font-family: var(--serif); font-size: clamp(19px, 2.4vw, 24px); font-weight: 700;
  line-height: 1.9; letter-spacing: 1px;
}
.intro .big em { font-style: normal; color: var(--red); }
.intro .stats { display: flex; gap: 0; border-left: 1px solid var(--line); padding-left: 36px; }
.intro .stat { text-align: center; padding: 0 22px; border-right: 1px solid var(--line); }
.intro .stat:last-child { border-right: none; }
.intro .stat .n { font-family: var(--serif); font-size: 34px; font-weight: 900; color: var(--red); line-height: 1.2; }
.intro .stat .l { font-size: 12.5px; color: var(--ink-faint); margin-top: 4px; letter-spacing: 1px; }

/* ============ 作品卡片 ============ */
.works { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.work-card {
  background: var(--card); border-radius: 20px; overflow: hidden;
  box-shadow: var(--shadow); color: var(--ink);
  transition: transform .25s ease, box-shadow .25s ease;
  display: flex; flex-direction: column;
}
.work-card:hover { text-decoration: none; transform: translateY(-8px); box-shadow: var(--shadow-hover); }
.work-cover {
  height: 190px; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.work-cover .num {
  font-family: var(--serif); font-size: 88px; font-weight: 900; color: rgba(255,255,255,.9);
  text-shadow: 0 8px 30px rgba(0,0,0,.25); letter-spacing: 0; transition: transform .35s ease;
}
.work-card:hover .work-cover .num { transform: scale(1.08); }
.work-cover .cv-tag {
  position: absolute; top: 16px; left: 16px;
  background: rgba(0,0,0,.32); color: #fff; backdrop-filter: blur(6px);
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px;
  padding: 4px 12px; border-radius: 999px;
}
.work-cover.c1 { background: linear-gradient(135deg, #3a2a3f 0%, #8e3b32 55%, #d24535 100%); }
.work-cover.c2 { background: linear-gradient(135deg, #243b55 0%, #2b6a8f 60%, #4ea6c4 100%); }
.work-cover.c3 { background: linear-gradient(135deg, #2f3b2c 0%, #5e7a43 55%, #a8b95a 100%); }
.work-cover.c4 { background: linear-gradient(135deg, #1e1e2a 0%, #43415e 60%, #7c78a8 100%); }
.work-body { padding: 24px 26px 26px; flex: 1; display: flex; flex-direction: column; }
.work-body h3 { font-family: var(--serif); font-size: 20px; font-weight: 900; letter-spacing: 1px; }
.work-body .tagline { font-size: 14px; color: var(--ink-soft); margin: 10px 0 16px; line-height: 1.75; flex: 1; }
.work-body .chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font-family: var(--mono); font-size: 11px; color: var(--ink-soft);
  background: var(--bg); border-radius: 6px; padding: 3px 10px; letter-spacing: .5px;
}
.chip.hot { color: var(--red-deep); background: rgba(210,69,53,.09); font-weight: 700; }
.work-body .go {
  margin-top: 18px; font-size: 13.5px; font-weight: 700; color: var(--red);
  display: flex; align-items: center; gap: 6px;
}
.work-body .go::after { content: "→"; transition: transform .2s; }
.work-card:hover .go::after { transform: translateX(5px); }

/* ============ 方法论 ============ */
.tenets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tenet {
  background: var(--card); border-radius: 18px; box-shadow: var(--shadow);
  padding: 32px 28px; position: relative; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.tenet:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.tenet .ico {
  width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 24px; font-weight: 900; color: #fff; margin-bottom: 18px;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.tenet:nth-child(1) .ico { background: linear-gradient(135deg, #d24535, #a82f22); }
.tenet:nth-child(2) .ico { background: linear-gradient(135deg, #2b6a8f, #243b55); }
.tenet:nth-child(3) .ico { background: linear-gradient(135deg, #5e7a43, #2f3b2c); }
.tenet h3 { font-family: var(--serif); font-size: 20px; font-weight: 900; letter-spacing: 3px; margin-bottom: 10px; }
.tenet p { font-size: 14px; color: var(--ink-soft); line-height: 1.8; }
.manifesto {
  margin-top: 30px; text-align: center;
  background: linear-gradient(135deg, #23202b, #3a2a3f);
  color: #fff; border-radius: 20px; padding: 40px 32px;
  font-family: var(--serif); font-size: clamp(16px, 2.2vw, 20px); letter-spacing: 1.5px; line-height: 2;
  box-shadow: var(--shadow);
}
.manifesto em { font-style: normal; color: #f0b429; }

/* ============ 联系 ============ */
.contact-card {
  background: var(--card); border-radius: 20px; box-shadow: var(--shadow);
  padding: 40px 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; align-items: center;
}
.contact-card .txt p { color: var(--ink-soft); font-size: 15px; }
.contact-list { list-style: none; display: grid; gap: 12px; }
.contact-list li {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg); border-radius: 12px; padding: 12px 18px; font-size: 14.5px;
}
.contact-list .k {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 1px;
  color: #fff; background: var(--ink); border-radius: 6px; padding: 3px 10px; flex: none;
}
.contact-list .v { font-family: var(--mono); font-size: 14px; word-break: break-all; }

/* ============ 页脚 ============ */
.site-footer {
  margin-top: 90px; background: #1c1920; color: rgba(255,255,255,.6);
  padding: 40px 0 44px; font-size: 13px;
}
.site-footer .bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; align-items: center; }
.site-footer b { color: #fff; font-family: var(--serif); letter-spacing: 3px; font-size: 15px; }

/* ============ 内页 ============ */
.page { padding: 56px 0 80px; }
.case-banner {
  border-radius: 20px; padding: 44px 46px; color: #fff; position: relative; overflow: hidden;
  box-shadow: var(--shadow); margin-bottom: 40px;
}
.case-banner.b1 { background: linear-gradient(135deg, #3a2a3f 0%, #8e3b32 60%, #d24535 100%); }
.case-banner.b2 { background: linear-gradient(135deg, #243b55 0%, #2b6a8f 70%, #4ea6c4 100%); }
.case-banner.b3 { background: linear-gradient(135deg, #2f3b2c 0%, #5e7a43 60%, #a8b95a 100%); }
.case-banner .kicker { font-family: var(--mono); font-size: 12px; letter-spacing: 3px; opacity: .85; font-weight: 700; }
.case-banner h1 { font-family: var(--serif); font-size: clamp(26px, 3.6vw, 36px); font-weight: 900; letter-spacing: 2px; margin: 10px 0 12px; }
.case-banner .onesent { font-size: 15.5px; line-height: 1.8; opacity: .92; max-width: 720px; }
.case-banner .case-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.case-banner .chip { background: rgba(255,255,255,.16); color: #fff; }
.case-banner .chip.hot { background: rgba(0,0,0,.28); color: #ffd9a8; font-weight: 700; }

.page-title-wrap { text-align: center; margin-bottom: 44px; }
.page-title-wrap h1 { font-family: var(--serif); font-size: clamp(30px, 4.4vw, 42px); font-weight: 900; letter-spacing: 4px; }
.page-title-wrap .page-sub { font-family: var(--mono); color: var(--ink-faint); font-size: 12px; letter-spacing: 3px; margin-top: 10px; }

.prose { font-size: 16px; max-width: 860px; margin: 0 auto; }
.prose h2 {
  font-family: var(--serif); font-size: 23px; margin: 56px 0 18px;
  letter-spacing: 2px; font-weight: 900; display: flex; align-items: center; gap: 12px;
}
.prose h2::before { content: ""; width: 22px; height: 4px; background: var(--red); border-radius: 2px; flex: none; }
.prose h3 { font-family: var(--serif); font-size: 18px; margin: 30px 0 10px; font-weight: 900; }
.prose p { margin: 14px 0; color: var(--ink); }
.prose ul, .prose ol { margin: 14px 0 14px 22px; color: var(--ink-soft); }
.prose li { margin: 7px 0; }
.prose strong { font-weight: 700; }
.prose blockquote {
  margin: 24px 0; padding: 18px 24px; background: #fff; border-radius: 0 14px 14px 0;
  border-left: 4px solid var(--red); color: var(--ink-soft); font-size: 15.5px; box-shadow: var(--shadow);
}

.shot { margin: 30px 0; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: var(--shadow); }
.shot .bar {
  display: flex; align-items: center; gap: 7px; padding: 12px 18px;
  background: #f0ede7; border-bottom: 1px solid var(--line);
}
.shot .bar i { width: 11px; height: 11px; border-radius: 50%; background: #d9d4ca; }
.shot .bar i:first-child { background: var(--red); }
.shot .bar i:nth-child(2) { background: var(--amber); }
.shot .bar span { margin-left: 8px; font-size: 12px; color: var(--ink-faint); font-family: var(--mono); }
.shot .body { min-height: 200px; display: flex; align-items: center; justify-content: center; color: var(--ink-faint); font-size: 14px; padding: 28px; text-align: center; }
.shot img { display: block; width: 100%; }
.shot .cap { padding: 10px 18px; font-size: 12.5px; color: var(--ink-faint); background: #faf9f6; font-family: var(--mono); }

.arch { margin: 30px auto; background: #fff; border-radius: 16px; padding: 26px 20px 18px; overflow-x: auto; box-shadow: var(--shadow); max-width: 900px; }
.arch .arch-title { font-family: var(--mono); font-size: 12px; color: var(--red); letter-spacing: 2px; margin-bottom: 16px; text-align: center; font-weight: 700; }
.arch svg { display: block; margin: 0 auto; min-width: 580px; }
.arch .cap { text-align: center; font-size: 12.5px; color: var(--ink-faint); margin-top: 14px; font-family: var(--mono); }

.decision {
  background: #fff; border-radius: 16px; padding: 26px 30px; margin: 22px 0;
  box-shadow: var(--shadow); border-top: 4px solid var(--ink);
}
.decision .q { font-family: var(--serif); font-weight: 900; font-size: 17.5px; margin-bottom: 14px; letter-spacing: .5px; }
.decision .q::before {
  content: "DECISION"; display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 2.5px; color: var(--red); margin-bottom: 8px;
}
.decision .row { display: grid; grid-template-columns: 62px 1fr; gap: 6px 16px; font-size: 15px; margin: 8px 0; }
.decision .row b {
  font-family: var(--mono); font-weight: 700; font-size: 11px; color: #fff;
  background: var(--ink); padding: 2px 9px; height: fit-content; width: fit-content;
  letter-spacing: 1px; margin-top: 4px; border-radius: 5px;
}
.decision .row p { color: var(--ink-soft); margin: 0; }

.postmortem {
  border-radius: 18px; background: linear-gradient(135deg, rgba(210,69,53,.07), rgba(210,69,53,.02));
  border: 1.5px solid rgba(210,69,53,.4); padding: 34px 36px 28px; margin: 48px 0 20px; position: relative;
}
.postmortem .stamp {
  position: absolute; top: -17px; right: 30px;
  border: 2.5px solid var(--red); color: var(--red);
  font-family: var(--serif); font-weight: 900; font-size: 16px; letter-spacing: 6px;
  padding: 5px 14px 5px 20px; transform: rotate(-5deg);
  background: var(--bg); border-radius: 4px;
}
.postmortem h3 { color: var(--red-deep); font-family: var(--serif); font-size: 21px; margin-bottom: 14px; font-weight: 900; letter-spacing: 2px; }
.postmortem p, .postmortem li { color: var(--ink-soft); font-size: 15.5px; }

.case-nav { display: flex; justify-content: space-between; gap: 16px; margin: 70px auto 0; max-width: 860px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14.5px; font-weight: 600; }

.about-card {
  background: #fff; border-radius: 20px; box-shadow: var(--shadow);
  padding: 44px 48px; max-width: 860px; margin: 0 auto;
}
.about-card .prose p { font-size: 16px; }

/* 浮现：默认可见（无 JS / JS 失败时内容不消失），仅在 html.js 时才做入场动画 */
html.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}

/* 响应式 */
@media (max-width: 860px) {
  .intro { grid-template-columns: 1fr; padding: 32px 26px; gap: 26px; }
  .intro .stats { border-left: none; padding-left: 0; justify-content: center; }
  .works { grid-template-columns: 1fr; }
  .tenets { grid-template-columns: 1fr; }
  .contact-card { grid-template-columns: 1fr; padding: 30px 26px; }
  .about-card { padding: 30px 24px; }
  .case-banner { padding: 30px 26px; }
  .brand-sub { display: none; }
  .nav a { padding: 6px 11px; font-size: 13.5px; }
  .decision .row { grid-template-columns: 1fr; gap: 4px; }
  .postmortem { padding: 28px 22px; }
  .intro .stat { padding: 0 14px; }
}

/* ============ 留言板 ============ */
.mb-panel { background: #fff; border-radius: 16px; box-shadow: var(--shadow); padding: 26px 28px; max-width: 760px; margin: 0 auto; }
.mb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.mb-input, .mb-textarea {
  width: 100%; border: 1.5px solid var(--line); border-radius: 10px;
  padding: 10px 14px; font-size: 14.5px; font-family: var(--sans);
  background: var(--bg); color: var(--ink); transition: border-color .2s, box-shadow .2s;
}
.mb-input:focus, .mb-textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(210,69,53,.1); background: #fff; }
.mb-textarea { resize: vertical; min-height: 96px; margin-bottom: 12px; }
.mb-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.mb-hint { font-size: 12.5px; color: var(--ink-faint); }
.mb-btn {
  background: linear-gradient(135deg, var(--red), var(--red-deep)); color: #fff;
  border: none; border-radius: 10px; padding: 10px 26px; font-size: 14.5px; font-weight: 700;
  cursor: pointer; transition: transform .15s, box-shadow .15s, opacity .15s;
  box-shadow: 0 6px 16px rgba(210,69,53,.3);
}
.mb-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(210,69,53,.35); }
.mb-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.mb-list { max-width: 760px; margin: 34px auto 0; display: grid; gap: 14px; }
.msg-item { background: #fff; border-radius: 14px; box-shadow: var(--shadow); padding: 20px 24px; }
.msg-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.msg-nick { font-weight: 700; font-size: 15px; color: var(--ink); }
.msg-date { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }
.msg-content { font-size: 14.5px; color: var(--ink-soft); line-height: 1.8; margin: 0; white-space: pre-wrap; word-break: break-word; }
.msg-link { display: inline-block; margin-top: 10px; font-family: var(--mono); font-size: 12.5px; }
.mb-empty { text-align: center; color: var(--ink-faint); font-size: 14.5px; padding: 40px 0; }
.toast {
  position: fixed; bottom: 34px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff; padding: 12px 24px; border-radius: 12px;
  font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s;
  z-index: 200; box-shadow: 0 10px 30px rgba(0,0,0,.25); max-width: 86vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: var(--red-deep); }

/* ============ 友链 ============ */
.friends-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 760px; margin: 0 auto; }
.friend-card {
  display: flex; gap: 16px; align-items: center; background: #fff;
  border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow); color: var(--ink);
  transition: transform .2s ease, box-shadow .2s ease;
}
.friend-card:hover { text-decoration: none; transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.friend-avatar {
  width: 48px; height: 48px; flex: none; border-radius: 12px;
  background: linear-gradient(135deg, var(--red), var(--red-deep)); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 900; font-size: 20px;
}
.friend-name { font-weight: 700; font-size: 15px; }
.friend-desc { font-size: 13px; color: var(--ink-faint); margin-top: 3px; }

/* ============ 文章 ============ */
.article-list { max-width: 760px; margin: 0 auto; display: grid; gap: 22px; }
.article-card {
  display: block; background: #fff; border-radius: 16px; padding: 30px 34px;
  box-shadow: var(--shadow); color: var(--ink); transition: transform .22s ease, box-shadow .22s ease;
}
.article-card:hover { text-decoration: none; transform: translateY(-5px); box-shadow: var(--shadow-hover); }
.art-meta { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.art-tag {
  font-size: 11.5px; font-weight: 700; color: var(--red-deep);
  background: rgba(210,69,53,.09); border-radius: 6px; padding: 3px 10px; letter-spacing: 1px;
}
.art-date { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }
.article-card h2 { font-family: var(--serif); font-size: 21px; font-weight: 900; letter-spacing: 1px; line-height: 1.5; }
.article-card p { font-size: 14px; color: var(--ink-soft); margin: 12px 0 0; line-height: 1.8; }
.art-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.article-card .go { margin-top: 16px; font-size: 13.5px; font-weight: 700; color: var(--red); }
.art-header { max-width: 760px; margin: 0 auto 44px; }
.art-header h1 { font-family: var(--serif); font-size: clamp(24px, 3.6vw, 34px); font-weight: 900; letter-spacing: 1px; line-height: 1.5; margin-top: 14px; }
.art-header .art-sub { color: var(--ink-faint); font-size: 15px; margin-top: 12px; }

/* 文章内页组件 */
.callout {
  margin: 24px 0; background: linear-gradient(135deg, rgba(210,69,53,.07), rgba(210,69,53,.02));
  border: 1.5px solid rgba(210,69,53,.35); border-radius: 12px; padding: 20px 24px;
  color: var(--ink-soft); font-size: 15px; line-height: 1.9;
}
.callout-title {
  font-family: var(--serif); font-weight: 900; color: var(--red-deep);
  font-size: 15.5px; margin-bottom: 8px; letter-spacing: 2px;
}
.callout-title::before { content: "※ "; color: var(--red); }
.chain {
  text-align: center; font-family: var(--serif); font-weight: 900; font-size: clamp(16px, 2.4vw, 21px);
  letter-spacing: 1px; background: var(--ink); color: #f8f4ec;
  border-radius: 12px; padding: 18px 20px; margin: 22px 0;
}
.chain span { color: var(--amber); margin: 0 8px; }

@media (max-width: 720px) {
  .mb-row { grid-template-columns: 1fr; }
  .friends-grid { grid-template-columns: 1fr; }
  .article-card { padding: 24px 22px; }
  .mb-panel { padding: 22px 18px; }
}

/* ============ 内页统一小 banner（极光同色系，紧凑） ============ */
body.inner { padding-top: 0; }
.page { padding-top: 96px; }
.page.has-hero { padding-top: 36px; }
.page-hero {
  position: relative;
  background: var(--cover-dark);
  color: #fff;
  padding: 86px 24px 30px;
  text-align: center;
  overflow: hidden;
}
.page-hero .aurora {
  position: absolute; inset: -80%;
  background:
    radial-gradient(ellipse 40% 90% at 15% 10%, rgba(210, 69, 53, 0.28), transparent 60%),
    radial-gradient(ellipse 38% 80% at 85% 5%, rgba(232, 163, 61, 0.15), transparent 60%),
    radial-gradient(ellipse 70% 100% at 50% 120%, rgba(86, 64, 148, 0.32), transparent 65%);
  animation: aurora 16s ease-in-out infinite alternate;
}
.page-hero .hero-inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
.page-hero .en {
  font-family: var(--mono); font-size: 11px; letter-spacing: 4px;
  color: var(--amber); font-weight: 700; margin-bottom: 8px;
}
.page-hero h1 {
  font-family: var(--serif); font-weight: 900; letter-spacing: 3px;
  font-size: clamp(20px, 2.8vw, 25px); text-shadow: 0 3px 20px rgba(0,0,0,.4);
}
.page-hero .sub { margin-top: 8px; color: rgba(255,255,255,.7); font-size: 13.5px; letter-spacing: .5px; line-height: 1.75; }
.page-hero .sub a { color: #ffd9a8; }
.page-hero .case-meta { justify-content: center; margin-top: 14px; }
.page-hero canvas.hero-particles { opacity: .7; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* 友链页 */
.links-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 820px; margin: 0 auto; }
.link-apply {
  max-width: 820px; margin: 26px auto 0;
  background: linear-gradient(135deg, #23202b, #3a2a3f);
  border-radius: 16px; padding: 28px 32px; color: rgba(255,255,255,.85);
}
.link-apply h3 { font-family: var(--serif); color: #fff; font-size: 18px; letter-spacing: 2px; margin-bottom: 12px; }
.link-apply p { font-size: 14px; line-height: 1.9; margin: 6px 0; }
.link-apply b { color: var(--amber); font-family: var(--mono); font-weight: 700; }
.link-apply .fmt {
  margin-top: 14px; background: rgba(255,255,255,.08); border-radius: 10px;
  padding: 14px 18px; font-family: var(--mono); font-size: 13px; line-height: 2;
}
@media (max-width: 720px) {
  .links-grid { grid-template-columns: 1fr; }
  .page-hero { padding: 76px 18px 26px; }
}

/* 案例页正文导语（原 banner 副标题移入） */
.case-lede {
  background: #fff; border-radius: 14px; box-shadow: var(--shadow);
  padding: 22px 28px; margin-bottom: 30px;
}
.case-lede p { font-size: 15.5px; color: var(--ink-soft); line-height: 1.9; margin: 0 0 12px; }
.case-lede .case-meta { margin-top: 4px; }

/* ============ 作品列表页（横排卡片） ============ */
.works-list { max-width: 880px; margin: 0 auto; display: grid; gap: 22px; }
.work-row {
  display: grid; grid-template-columns: 150px 1fr 44px; gap: 24px; align-items: center;
  background: #fff; border-radius: 18px; padding: 24px 28px; box-shadow: var(--shadow);
  color: var(--ink); transition: transform .22s ease, box-shadow .22s ease;
}
.work-row:hover { text-decoration: none; transform: translateY(-5px); box-shadow: var(--shadow-hover); }
.wr-cover {
  position: relative; height: 110px; border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.wr-cover.c1 { background: linear-gradient(135deg, #3a2a3f, #8e3b32 60%, #d24535); }
.wr-cover.c2 { background: linear-gradient(135deg, #243b55, #2b6a8f 60%, #4ea6c4); }
.wr-cover.c3 { background: linear-gradient(135deg, #2f3b2c, #5e7a43 55%, #a8b95a); }
.wr-cover.c4 { background: linear-gradient(135deg, #1e1e2a, #43415e 60%, #7c78a8); }
.wr-num { font-family: var(--serif); font-size: 46px; font-weight: 900; color: rgba(255,255,255,.92); text-shadow: 0 6px 20px rgba(0,0,0,.3); }
.wr-cover.has-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.wr-tag { position: absolute; top: 10px; left: 10px; font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,.85); background: rgba(0,0,0,.28); padding: 2px 8px; border-radius: 999px; letter-spacing: 1px; }
.wr-body h3 { font-family: var(--serif); font-size: 19px; font-weight: 900; letter-spacing: 1px; }
.wr-body p { font-size: 14px; color: var(--ink-soft); line-height: 1.75; margin: 8px 0 12px; }
.wr-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.wr-arrow { font-size: 24px; color: var(--red); justify-self: end; transition: transform .2s; }
.work-row:hover .wr-arrow { transform: translate(4px, -4px); }
@media (max-width: 720px) {
  .work-row { grid-template-columns: 1fr; gap: 14px; padding: 22px 20px; }
  .wr-cover { height: 90px; }
  .wr-arrow { display: none; }
}

/* ============ 移动端汉堡菜单 ============ */
.nav-toggle {
  display: none;
  width: 42px; height: 42px; border: none; cursor: pointer;
  background: rgba(255,255,255,.12); border-radius: 10px;
  color: #fff; font-size: 20px; line-height: 1;
  align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.site-header.solid .nav-toggle { background: rgba(210,69,53,.1); color: var(--ink); }
.nav-toggle i { position: relative; width: 18px; height: 2px; background: currentColor; display: block; transition: transform .25s, opacity .2s; }
.nav-toggle i::before, .nav-toggle i::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; transition: transform .25s, top .25s; }
.nav-toggle i::before { top: -6px; }
.nav-toggle i::after { top: 6px; }
.nav-toggle.open i { background: transparent; }
.nav-toggle.open i::before { top: 0; transform: rotate(45deg); }
.nav-toggle.open i::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .site-header .bar { height: 60px; }
  .nav {
    position: fixed; top: 66px; right: 14px; left: 14px;
    flex-direction: column; gap: 4px;
    background: rgba(24, 20, 28, .97);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px; padding: 12px;
    box-shadow: 0 18px 50px rgba(0,0,0,.35);
    transform: translateY(-12px) scale(.98); opacity: 0; visibility: hidden;
    transition: transform .25s ease, opacity .25s ease, visibility .25s;
    z-index: 99;
  }
  .nav.open { transform: translateY(0) scale(1); opacity: 1; visibility: visible; }
  .nav a {
    color: rgba(255,255,255,.9) !important;
    padding: 13px 18px; border-radius: 10px; font-size: 15.5px;
    background: transparent !important;
  }
  .nav a:active, .nav a.active { background: rgba(210,69,53,.22) !important; color: #fff !important; }
}

/* ============ 落地页（产品获客页） ============ */
.lp { --lp-red: #d24535; }
.lp-wrap { max-width: 960px; margin: 0 auto; padding: 0 24px; }

/* 首屏 */
.lp-hero { position: relative; overflow: hidden; background: linear-gradient(160deg, #1d1825 0%, #3a2a3f 48%, #7a2f28 100%); color: #fff; padding: 96px 24px 84px; text-align: center; }
.lp-hero .aurora {
  position: absolute; inset: -60%; pointer-events: none;
  background:
    radial-gradient(ellipse 42% 80% at 18% 8%, rgba(210,69,53,.32), transparent 60%),
    radial-gradient(ellipse 40% 70% at 82% 0%, rgba(232,163,61,.18), transparent 60%),
    radial-gradient(ellipse 70% 90% at 50% 120%, rgba(86,64,148,.35), transparent 65%);
  animation: aurora 16s ease-in-out infinite alternate;
}
.lp-hero-inner { position: relative; z-index: 2; max-width: 780px; margin: 0 auto; }
.lp-kicker { font-family: var(--mono); font-size: 12px; letter-spacing: 3px; color: #ffd9a8; font-weight: 700; margin-bottom: 18px; }
.lp-hero h1 { font-family: var(--serif); font-size: clamp(28px, 4.6vw, 44px); font-weight: 900; letter-spacing: 2px; line-height: 1.4; text-shadow: 0 3px 24px rgba(0,0,0,.4); }
.lp-hero h1 em { font-style: normal; color: #ffb4a3; }
.lp-hero .lp-sub { margin: 20px auto 0; max-width: 640px; font-size: 16px; line-height: 2; color: rgba(255,255,255,.82); }
.lp-hero-cta { margin-top: 32px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.lp-btn {
  display: inline-block; border-radius: 12px; padding: 14px 34px; font-size: 15.5px; font-weight: 700;
  letter-spacing: 1px; cursor: pointer; border: none; transition: transform .18s, box-shadow .18s, background .18s;
}
.lp-btn-primary { background: linear-gradient(135deg, #e8533f, #c23a2c); color: #fff; box-shadow: 0 10px 28px rgba(210,69,53,.45); }
.lp-btn-primary:hover { text-decoration: none; transform: translateY(-3px); box-shadow: 0 16px 36px rgba(210,69,53,.5); color: #fff; }
.lp-btn-ghost { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.28); }
.lp-btn-ghost:hover { text-decoration: none; background: rgba(255,255,255,.18); color: #fff; }
.lp-hero-note { margin-top: 16px; font-size: 12.5px; color: rgba(255,255,255,.5); letter-spacing: .5px; }

/* 事实条 */
.lp-stats { background: #fff; border-bottom: 1px solid var(--line); }
.lp-stats .lp-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding-top: 30px; padding-bottom: 30px; }
.lp-stat { text-align: center; padding: 6px 10px; border-right: 1px solid var(--line); }
.lp-stat:last-child { border-right: none; }
.lp-stat .n { font-family: var(--serif); font-size: 30px; font-weight: 900; color: var(--red-deep); line-height: 1.2; }
.lp-stat .l { font-size: 12.5px; color: var(--ink-faint); margin-top: 4px; letter-spacing: .5px; }

/* 通用段落 */
.lp-section { padding: 72px 0 8px; }
.lp-sec-head { text-align: center; margin-bottom: 44px; }
.lp-sec-head .en { font-family: var(--mono); font-size: 11.5px; letter-spacing: 4px; color: var(--red); font-weight: 700; }
.lp-sec-head h2 { font-family: var(--serif); font-size: clamp(23px, 3vw, 30px); font-weight: 900; letter-spacing: 2px; margin-top: 10px; }
.lp-sec-head p { color: var(--ink-faint); font-size: 14.5px; margin-top: 10px; }

/* 痛点 */
.lp-pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lp-pain {
  background: #fff; border-radius: 16px; padding: 28px 26px; box-shadow: var(--shadow);
  border-top: 4px solid var(--ink); position: relative;
}
.lp-pain .q { font-family: var(--serif); font-weight: 900; font-size: 17px; line-height: 1.7; margin-bottom: 12px; }
.lp-pain .q::before { content: "“"; color: var(--red); font-size: 26px; font-family: var(--serif); margin-right: 2px; }
.lp-pain .q::after { content: "”"; color: var(--red); font-size: 26px; font-family: var(--serif); margin-left: 2px; }
.lp-pain p { font-size: 14px; color: var(--ink-faint); line-height: 1.85; margin: 0; }
.lp-pain .arrow { display: block; margin: 14px 0 6px; color: var(--red); font-weight: 700; font-size: 13.5px; }

/* 场景功能（左右交替） */
.lp-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; margin-bottom: 64px; }
.lp-feature:last-child { margin-bottom: 0; }
.lp-feature.reverse .lp-f-text { order: 2; }
.lp-f-num { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--red); letter-spacing: 2px; }
.lp-f-text h3 { font-family: var(--serif); font-size: 22px; font-weight: 900; letter-spacing: 1px; margin: 10px 0 16px; line-height: 1.5; }
.lp-f-text .before, .lp-f-text .after { font-size: 14.5px; line-height: 1.9; padding: 12px 16px; border-radius: 10px; margin: 10px 0; }
.lp-f-text .before { background: #f0ede7; color: var(--ink-faint); }
.lp-f-text .before b { color: var(--ink-soft); }
.lp-f-text .after { background: rgba(210,69,53,.07); color: var(--ink-soft); border-left: 3px solid var(--red); }
.lp-f-text .after b { color: var(--red-deep); }
.lp-f-text .tag { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); display: block; margin-top: 12px; letter-spacing: .5px; }

/* 截图框（含 CSS 模拟界面） */
.lp-shot { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: var(--shadow-hover); border: 1px solid var(--line); }
.lp-realshot { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: var(--shadow-hover); border: 1px solid var(--line); max-width: 920px; margin: 0 auto; }
.lp-realshot .bar { display: flex; align-items: center; gap: 7px; padding: 11px 16px; background: #f0ede7; border-bottom: 1px solid var(--line); }
.lp-realshot .bar i { width: 10px; height: 10px; border-radius: 50%; background: #d9d4ca; }
.lp-realshot .bar i:first-child { background: var(--red); }
.lp-realshot .bar i:nth-child(2) { background: var(--amber); }
.lp-realshot .bar span { margin-left: 8px; font-size: 11.5px; color: var(--ink-faint); font-family: var(--mono); }
.lp-realshot img { display: block; width: 100%; }
.lp-realshot .cap { padding: 9px 16px; font-size: 12px; color: var(--ink-faint); background: #fff; border-top: 1px solid var(--line); text-align: center; }
.lp-shot .bar { display: flex; align-items: center; gap: 7px; padding: 11px 16px; background: #f0ede7; border-bottom: 1px solid var(--line); }
.lp-shot .bar i { width: 10px; height: 10px; border-radius: 50%; background: #d9d4ca; }
.lp-shot .bar i:first-child { background: var(--red); }
.lp-shot .bar i:nth-child(2) { background: var(--amber); }
.lp-shot .bar span { margin-left: 8px; font-size: 11.5px; color: var(--ink-faint); font-family: var(--mono); }
.lp-shot .screen { padding: 22px 20px; min-height: 240px; background: #faf9f6; }
.lp-shot .cap { padding: 9px 16px; font-size: 12px; color: var(--ink-faint); background: #fff; border-top: 1px solid var(--line); text-align: center; }
.lp-shot img { display: block; width: 100%; }
/* 模拟聊天气泡 */
.mock-chat { display: grid; gap: 12px; }
.mock-row { display: flex; gap: 10px; align-items: flex-start; }
.mock-row.user { justify-content: flex-end; }
.mock-avatar { width: 30px; height: 30px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; font-weight: 700; }
.mock-avatar.ai { background: linear-gradient(135deg, #d24535, #a82f22); }
.mock-avatar.user { background: #3a3742; }
.mock-bubble { max-width: 78%; padding: 10px 14px; border-radius: 12px; font-size: 12.5px; line-height: 1.75; text-align: left; }
.mock-row.ai .mock-bubble { background: #fff; border: 1px solid var(--line); color: var(--ink-soft); border-top-left-radius: 4px; }
.mock-row.user .mock-bubble { background: #2b2733; color: rgba(255,255,255,.92); border-top-right-radius: 4px; }
.mock-bubble b { color: var(--red-deep); }
.mock-bubble .mini-tag { display: inline-block; font-size: 10.5px; font-family: var(--mono); background: rgba(210,69,53,.1); color: var(--red-deep); border-radius: 5px; padding: 1px 7px; margin: 2px 4px 2px 0; }
.mock-draft { margin-top: 8px; border: 1.5px dashed var(--amber); border-radius: 8px; padding: 8px 10px; font-size: 12px; color: var(--ink-soft); background: #fffdf6; }
.mock-draft .draft-act { margin-top: 6px; display: flex; gap: 8px; }
.mock-draft .draft-act i { font-style: normal; font-size: 11px; border-radius: 5px; padding: 2px 10px; }
.mock-draft .draft-act .ok { background: var(--red); color: #fff; }
.mock-draft .draft-act .no { background: #e8e4dc; color: var(--ink-faint); }
/* 模拟老板看板 */
.mock-board { display: grid; gap: 10px; }
.mock-board .b-top { display: flex; gap: 10px; }
.mock-kpi { flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.mock-kpi .kn { font-family: var(--serif); font-size: 22px; font-weight: 900; color: var(--ink); }
.mock-kpi .kn.warn { color: var(--red-deep); }
.mock-kpi .kl { font-size: 11px; color: var(--ink-faint); margin-top: 2px; }
.mock-alert { background: rgba(210,69,53,.07); border: 1px solid rgba(210,69,53,.25); border-radius: 10px; padding: 10px 14px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.8; }
.mock-alert b { color: var(--red-deep); }
.mock-funnel { display: grid; gap: 6px; margin-top: 2px; }
.mock-funnel .f-step { height: 26px; border-radius: 6px; display: flex; align-items: center; padding: 0 12px; font-size: 11.5px; color: #fff; font-weight: 700; }
/* 模拟决策链 */
.mock-chain { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 6px 0; }
.mock-role { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; text-align: center; min-width: 86px; }
.mock-role .rn { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.mock-role .rt { font-size: 10.5px; font-family: var(--mono); margin-top: 3px; border-radius: 5px; padding: 1px 7px; display: inline-block; }
.rt-decide { background: rgba(210,69,53,.12); color: var(--red-deep); }
.rt-eval { background: rgba(43,106,143,.12); color: #2b6a8f; }
.rt-user { background: rgba(94,122,67,.14); color: #4f6638; }
.rt-unknown { background: #efe9df; color: var(--ink-faint); }
.mock-role.miss { border: 1.5px dashed var(--red); background: rgba(210,69,53,.04); }

/* 安全信任条 */
.lp-trust { background: #fff; border-radius: 18px; box-shadow: var(--shadow); padding: 36px 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.lp-trust .t-item { text-align: center; }
.lp-trust .t-ico { font-size: 22px; margin-bottom: 8px; }
.lp-trust h4 { font-family: var(--serif); font-size: 15.5px; font-weight: 900; margin-bottom: 6px; }
.lp-trust p { font-size: 12.5px; color: var(--ink-faint); line-height: 1.8; margin: 0; }

/* 留资卡 */
.lp-lead {
  margin: 80px auto 0; max-width: 680px; border-radius: 22px; overflow: hidden;
  background: linear-gradient(150deg, #23202b 0%, #3a2a3f 55%, #8e3b32 120%);
  color: #fff; padding: 46px 44px; text-align: center; box-shadow: 0 24px 60px rgba(58,42,63,.35);
}
.lp-lead h3 { font-family: var(--serif); font-size: clamp(22px, 3vw, 27px); font-weight: 900; letter-spacing: 2px; }
.lp-lead .lead-sub { font-size: 14px; color: rgba(255,255,255,.72); margin: 12px 0 26px; line-height: 1.9; }
.lp-form { display: grid; gap: 12px; text-align: left; }
.lp-form .lp-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lp-form input, .lp-form textarea {
  width: 100%; border: 1.5px solid rgba(255,255,255,.18); border-radius: 10px;
  padding: 12px 16px; font-size: 14.5px; font-family: var(--sans);
  background: rgba(255,255,255,.08); color: #fff; transition: border-color .2s, box-shadow .2s, background .2s;
}
.lp-form input::placeholder, .lp-form textarea::placeholder { color: rgba(255,255,255,.42); }
.lp-form input:focus, .lp-form textarea:focus { outline: none; border-color: #ffb4a3; box-shadow: 0 0 0 3px rgba(210,69,53,.25); background: rgba(255,255,255,.12); }
.lp-form textarea { resize: vertical; min-height: 76px; }
.lp-form .hp { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lp-form .lp-submit {
  margin-top: 6px; background: linear-gradient(135deg, #e8533f, #c23a2c); color: #fff; border: none;
  border-radius: 12px; padding: 14px; font-size: 16px; font-weight: 700; letter-spacing: 2px; cursor: pointer;
  box-shadow: 0 10px 28px rgba(210,69,53,.4); transition: transform .18s, box-shadow .18s, opacity .18s;
}
.lp-form .lp-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(210,69,53,.5); }
.lp-form .lp-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.lp-form .lp-form-note { font-size: 12px; color: rgba(255,255,255,.45); text-align: center; margin-top: 2px; }
.lp-lead .lead-done { display: none; padding: 20px 0 6px; }
.lp-lead .lead-done .check { font-size: 40px; }
.lp-lead .lead-done p { font-size: 15px; color: rgba(255,255,255,.85); margin-top: 10px; line-height: 1.9; }
.lp-lead.form-sent .lp-form { display: none; }
.lp-lead.form-sent .lead-done { display: block; }

.lp-footer-nav { display: flex; justify-content: center; gap: 28px; margin: 56px auto 0; font-size: 13.5px; color: var(--ink-faint); flex-wrap: wrap; }
.lp-footer-nav a { color: var(--ink-soft); font-weight: 600; }

@media (max-width: 860px) {
  .lp-stats .lp-wrap { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
  .lp-stat:nth-child(2) { border-right: none; }
  .lp-pains { grid-template-columns: 1fr; }
  .lp-feature { grid-template-columns: 1fr; gap: 22px; margin-bottom: 48px; }
  .lp-feature.reverse .lp-f-text { order: 0; }
  .lp-trust { grid-template-columns: repeat(2, 1fr); padding: 28px 24px; gap: 26px 16px; }
  .lp-lead { padding: 36px 24px; }
  .lp-form .lp-row2 { grid-template-columns: 1fr; }
  .lp-hero { padding: 80px 20px 64px; }
}

/* ============ 落地页 v3：FAQ / 升级条 / 知识卡 ============ */
.lp-faq { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.lp-faq details {
  background: #fff; border-radius: 14px; box-shadow: var(--shadow);
  padding: 4px 22px; transition: box-shadow .2s;
}
.lp-faq details[open] { box-shadow: var(--shadow-hover); }
.lp-faq summary {
  cursor: pointer; list-style: none; padding: 18px 0; font-weight: 700; font-size: 15.5px;
  color: var(--ink); display: flex; align-items: center; gap: 10px;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::before {
  content: "Q"; flex: none; width: 24px; height: 24px; border-radius: 7px;
  background: rgba(210,69,53,.1); color: var(--red-deep);
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.lp-faq summary::after {
  content: "+"; margin-left: auto; font-size: 20px; color: var(--ink-faint);
  transition: transform .2s; flex: none;
}
.lp-faq details[open] summary::after { transform: rotate(45deg); }
.lp-faq details .a {
  padding: 0 0 18px 34px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.95;
}
.lp-faq details .a b { color: var(--red-deep); }

.lp-upgrade {
  margin-top: 56px; border-radius: 18px; padding: 34px 38px;
  background: linear-gradient(135deg, #f1ead9, #f8f4ec);
  border: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center;
}
.lp-upgrade .u-ico {
  width: 64px; height: 64px; border-radius: 16px; flex: none;
  background: linear-gradient(135deg, #3a2a3f, #8e3b32); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 28px;
}
.lp-upgrade h3 { font-family: var(--serif); font-size: 18px; font-weight: 900; letter-spacing: 1px; margin-bottom: 8px; }
.lp-upgrade p { font-size: 14px; color: var(--ink-soft); line-height: 1.9; margin: 0; }
@media (max-width: 720px) {
  .lp-upgrade { grid-template-columns: 1fr; padding: 26px 22px; text-align: center; }
  .lp-upgrade .u-ico { margin: 0 auto; }
  .lp-faq details { padding: 4px 16px; }
  .lp-faq details .a { padding-left: 0; }
}

/* ============ 落地页 v4：耐思简历（JD 诊断 / 备战 / 复盘 / 定价） ============ */
.mock-gap { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.mock-gap .gap-h { font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.mock-gap .gap-item { font-size: 12px; line-height: 2.1; color: var(--ink-soft); }
.mock-gap .gap-item.ok { color: #4f6638; }
.mock-gap .gap-item.miss { color: var(--red-deep); }
.mock-gap .gap-item.warn { color: #8a6d1f; }
.mock-report { margin-top: 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.mock-report .rp-h { font-size: 12.5px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.mock-report .rp-row { display: grid; grid-template-columns: 72px 1fr 30px; align-items: center; gap: 10px; font-size: 11.5px; color: var(--ink-faint); margin: 5px 0; }
.mock-report .rp-row b { text-align: right; color: var(--ink); font-size: 12px; }
.mock-report .rp-row.miss b { color: var(--red-deep); }
.mock-report .rp-bar { height: 7px; border-radius: 4px; background: #eee9e0; overflow: hidden; }
.mock-report .rp-bar i { display: block; height: 100%; border-radius: 4px; background: #5e7a43; }
.mock-report .rp-bar i[style*="b23a2b"] { background: var(--red-deep); }

/* 定价双卡 */
.lp-price { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; max-width: 900px; margin: 0 auto; }
.price-card { border-radius: 18px; padding: 34px 32px; }
.price-card.main {
  background: linear-gradient(155deg, #23202b 0%, #3a2a3f 60%, #8e3b32 130%);
  color: #fff; box-shadow: 0 24px 60px rgba(58,42,63,.35);
}
.price-card .price-tag { font-size: 15px; color: rgba(255,255,255,.75); letter-spacing: 1px; }
.price-card .price-now { font-family: var(--serif); font-size: 44px; font-weight: 900; color: #ffd9a8; margin: 0 4px; }
.price-card .price-old { font-size: 18px; color: rgba(255,255,255,.4); text-decoration: line-through; }
.price-card .price-sub { font-size: 13px; color: rgba(255,255,255,.6); margin-top: 4px; letter-spacing: 2px; }
.price-card .price-list { list-style: none; margin: 22px 0 20px; padding: 0; display: grid; gap: 12px; }
.price-card .price-list li { font-size: 14px; line-height: 1.75; color: rgba(255,255,255,.88); padding-left: 26px; position: relative; }
.price-card .price-list li::before { content: "✓"; position: absolute; left: 0; color: #ffd9a8; font-weight: 900; }
.price-card .price-list b { color: #ffd9a8; }
.price-card .price-after { border-top: 1px solid rgba(255,255,255,.16); padding-top: 16px; font-size: 13.5px; color: rgba(255,255,255,.82); line-height: 1.9; }
.price-card .price-after b { color: #ffd9a8; font-size: 16px; }
.price-card .price-note { display: block; font-size: 12px; color: rgba(255,255,255,.5); margin-top: 4px; }
.price-card.compare { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); align-self: start; }
.price-card.compare .cmp-h { font-family: var(--serif); font-weight: 900; font-size: 16px; margin-bottom: 16px; color: var(--ink); }
.price-card.compare .cmp-row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; color: var(--ink-faint); }
.price-card.compare .cmp-row b { font-family: var(--serif); font-size: 17px; color: var(--ink-soft); }
.price-card.compare .cmp-row.hl { border-bottom: none; margin-top: 6px; background: rgba(210,69,53,.07); border-radius: 10px; padding: 12px 14px; }
.price-card.compare .cmp-row.hl span { color: var(--red-deep); font-weight: 700; }
.price-card.compare .cmp-row.hl b { color: var(--red-deep); font-size: 20px; }
.price-card.compare .cmp-foot { margin-top: 14px; font-size: 12.5px; color: var(--ink-faint); line-height: 1.8; text-align: center; }
@media (max-width: 760px) {
  .lp-price { grid-template-columns: 1fr; }
  .price-card { padding: 28px 22px; }
}

/* 算账条 + 零风险承诺（耐思落地页 v4） */
.lp-roi { max-width: 900px; margin: 0 auto 40px; }
.lp-roi .roi-row { display: grid; grid-template-columns: 1fr auto 1.3fr auto 1.2fr; gap: 14px; align-items: center; }
.roi-item { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px 18px; text-align: center; box-shadow: var(--shadow); }
.roi-item .roi-num { font-family: var(--serif); font-size: clamp(26px, 3.4vw, 36px); font-weight: 900; color: var(--ink); line-height: 1.2; }
.roi-item .roi-lbl { font-size: 12.5px; color: var(--ink-faint); margin-top: 8px; line-height: 1.7; }
.roi-item .roi-lbl b { color: var(--ink-soft); }
.roi-item.big { background: linear-gradient(150deg, #f1ead9, #f8f4ec); border-color: #d8c9a8; }
.roi-item.big .roi-num { color: #4f6638; }
.roi-item.big .roi-lbl b { color: #4f6638; }
.roi-item.warn { border-color: rgba(178,58,43,.35); background: rgba(210,69,53,.05); }
.roi-item.warn .roi-num { color: var(--red-deep); }
.roi-item.warn .roi-lbl b { color: var(--red-deep); }
.roi-vs { font-size: 22px; color: var(--ink-faint); font-family: var(--serif); }
.roi-punch { margin-top: 22px; text-align: center; font-size: 15.5px; color: var(--ink-soft); line-height: 2; }
.roi-punch b { color: var(--red-deep); font-size: 17px; }

.lp-guarantee {
  max-width: 760px; margin: 28px auto 0; border-radius: 16px; padding: 24px 28px;
  background: linear-gradient(135deg, #f1ead9, #f8f4ec); border: 1.5px dashed #c9a95e;
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center;
}
.lp-guarantee .g-badge {
  flex: none; background: linear-gradient(135deg, #b8860b, #8a6d1f); color: #fff;
  font-weight: 900; font-size: 14px; padding: 10px 16px; border-radius: 10px; letter-spacing: 1px;
  white-space: nowrap;
}
.lp-guarantee p { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.95; }
.lp-guarantee p b { color: var(--red-deep); }
@media (max-width: 760px) {
  .lp-roi .roi-row { grid-template-columns: 1fr; gap: 10px; }
  .roi-vs { transform: rotate(90deg); text-align: center; margin: -4px 0; }
  .lp-guarantee { grid-template-columns: 1fr; text-align: center; padding: 22px 20px; }
}

/* ============ 落地页 v4：记账管家（消费排行 / 主动推送） ============ */
.mock-rank { display: grid; gap: 6px; margin-top: 4px; }
.mock-rank .rk-row {
  display: flex; justify-content: space-between; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 9px 14px;
  font-size: 12.5px; color: var(--ink-soft);
}
.mock-rank .rk-row b { font-family: var(--serif); font-size: 13.5px; color: var(--ink); }
.mock-push { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; text-align: left; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(31,28,24,.05); }
.mock-push:last-child { margin-bottom: 0; }
.mock-push .push-h { font-size: 13px; font-weight: 700; color: var(--ink); display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.mock-push .push-h span { font-size: 10.5px; font-family: var(--mono); font-weight: 400; color: var(--ink-faint); }
.mock-push .push-body { font-size: 12.5px; color: var(--ink-soft); line-height: 1.9; }
.mock-push .push-body b { color: var(--red-deep); }
.mock-push .push-alert { margin-top: 8px; background: rgba(210,69,53,.07); border: 1px solid rgba(210,69,53,.22); border-radius: 8px; padding: 8px 11px; font-size: 12px; line-height: 1.7; }

/* iOS 快捷指令记账 mock（记账落地页） */
.mock-ios { display: grid; gap: 12px; }
.ios-siri { display: flex; flex-direction: column; align-items: center; gap: 8px; background: linear-gradient(160deg, #2b2733, #3a3550); border-radius: 14px; padding: 20px 16px; }
.ios-siri .siri-orb { width: 46px; height: 46px; border-radius: 50%; background: conic-gradient(from 0deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #b06bff, #ff6b6b); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; animation: siri-spin 6s linear infinite; }
@keyframes siri-spin { to { transform: rotate(360deg); } }
.ios-siri .siri-text { color: #fff; font-size: 14.5px; font-weight: 600; letter-spacing: .5px; }
.ios-toast { background: rgba(43,39,51,.92); color: #fff; font-size: 12.5px; border-radius: 10px; padding: 10px 14px; text-align: center; }
.ios-widget { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.ios-widget .wd-h { font-size: 11.5px; color: var(--ink-faint); letter-spacing: 1px; }
.ios-widget .wd-num { font-family: var(--serif); font-size: 30px; font-weight: 900; color: var(--ink); line-height: 1.25; }
.ios-widget .wd-sub { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }
.ios-widget .wd-bar { height: 6px; border-radius: 3px; background: #eee9e0; margin-top: 10px; overflow: hidden; }
.ios-widget .wd-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #5e7a43, #7d9a5a); }

/* 背面三击 + 图片识别记账 mock（记账落地页） */
.ios-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 8px; align-items: stretch; }
.flow-step { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 6px; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.flow-step i { font-style: normal; font-size: 20px; }
.flow-step b { font-size: 12.5px; color: var(--ink); }
.flow-step span { font-size: 10.5px; color: var(--ink-faint); }
.flow-arrow { align-self: center; color: var(--ink-faint); font-size: 15px; }
.ios-recognize { display: grid; grid-template-columns: 1fr auto 1.2fr; gap: 10px; align-items: center; }
.rec-shot { background: linear-gradient(160deg, #2b2733, #3a3550); color: #fff; border-radius: 12px; padding: 14px 12px; text-align: center; }
.rec-shot .rec-app { font-size: 11px; color: rgba(255,255,255,.6); }
.rec-shot .rec-ok { font-size: 12px; color: #9adf8a; margin-top: 6px; }
.rec-shot .rec-amt { font-family: var(--serif); font-size: 24px; font-weight: 900; margin: 4px 0; }
.rec-shot .rec-time { font-size: 10px; color: rgba(255,255,255,.5); }
.rec-mid { font-size: 11px; color: var(--ink-faint); text-align: center; white-space: nowrap; }
.rec-result { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; text-align: left; }
.rec-result .rr-h { font-size: 11px; font-family: var(--mono); color: var(--ink-faint); letter-spacing: 1px; margin-bottom: 6px; }
.rec-result .rr-line { font-size: 12.5px; color: var(--ink-soft); line-height: 2; }
.rec-result .rr-line b { color: var(--ink); }
.rec-result .rr-done { margin-top: 8px; font-size: 12px; font-weight: 700; color: #4f6638; background: rgba(94,122,67,.1); border-radius: 8px; padding: 6px 10px; text-align: center; }
@media (max-width: 760px) {
  .ios-flow { grid-template-columns: 1fr; }
  .flow-arrow { transform: rotate(90deg); }
  .ios-recognize { grid-template-columns: 1fr; }
  .rec-mid { white-space: normal; }
}

/* 识别结果：标签点选 + 金额确认 */
.rec-result .rr-edit { font-size: 10.5px; color: var(--ink-faint); border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; margin-left: 6px; }
.rr-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.rr-tag { font-size: 11.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: #faf9f6; color: var(--ink-faint); cursor: default; }
.rr-tag.on { background: rgba(210,69,53,.1); border-color: rgba(210,69,53,.4); color: var(--red-deep); font-weight: 700; }
.rec-result .rr-done { margin-top: 10px; font-size: 12.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #e8533f, #c23a2c); border-radius: 8px; padding: 8px 10px; text-align: center; }

/* ============ 文章系列：列表 tab + 文末系列导航 ============ */
.series-tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 36px; }
.series-tab {
  font-family: var(--sans); font-size: 14px; padding: 8px 20px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--ink-faint);
  cursor: pointer; transition: all .18s;
}
.series-tab:hover { border-color: var(--red); color: var(--red-deep); }
.series-tab.on { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 700; }

.series-nav {
  max-width: 860px; margin: 44px auto 0; border-radius: 16px; padding: 26px 30px;
  background: linear-gradient(135deg, #f1ead9, #f8f4ec); border: 1px solid var(--line);
}
.series-nav .sn-head { display: flex; align-items: center; gap: 12px; }
.series-nav .sn-badge {
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 1px;
  background: var(--ink); color: #fff; border-radius: 6px; padding: 4px 12px;
}
.series-nav .sn-pos { font-size: 12.5px; color: var(--ink-faint); font-family: var(--mono); }
.series-nav .sn-note { font-size: 14px; color: var(--ink-soft); line-height: 1.85; margin: 12px 0 16px; }
.series-nav .sn-links { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.series-nav .sn-links a { font-size: 14px; color: var(--ink-faint); font-weight: 600; }
.series-nav .sn-links a.sn-next {
  background: linear-gradient(135deg, #e8533f, #c23a2c); color: #fff;
  border-radius: 10px; padding: 10px 20px; font-weight: 700; box-shadow: 0 6px 18px rgba(210,69,53,.3);
}
.series-nav .sn-links a.sn-next:hover { text-decoration: none; transform: translateY(-2px); }
@media (max-width: 640px) {
  .series-nav { padding: 22px 20px; }
  .series-nav .sn-links { flex-direction: column; align-items: stretch; gap: 10px; text-align: center; }
}