@charset "UTF-8";
/* ============================================================
   小保账GEO · 子页面共享样式层（纸本编辑部风格）
   与首页 index.html 共用同一套 Design Token
   维护：改这一个文件即可同步全站子页面视觉
   ============================================================ */

/* ---------- 1. Design Token（与首页完全一致） ---------- */
:root{
  --bg:#FBF9F5; --bg-alt:#F4F0E8; --ink:#16130F; --ink-2:#4A443C; --ink-3:#746C63;
  --rule:#DDD6CA; --rule-soft:#EDE8DE;
  --acc:#B93A26; --acc-2:#1E3A5F; --acc-soft:color-mix(in srgb,var(--acc) 10%,transparent);
  --inv:#16130F; --inv-fg:#FBF9F5;
  --acc-inv:#E5907E; --acc2-inv:#7FA8D4;
  --display:"Source Han Serif SC","Noto Serif SC","Songti SC","STSong",serif;
  --body:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",sans-serif;
  --num:"Source Han Serif SC","Songti SC",serif;
  --radius:6px;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --ease:cubic-bezier(.16,1,.3,1);
  --fast:180ms;--slow:520ms;
  --wrap:1280px;
  --tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  font-family:var(--body);background:var(--bg) var(--tex);color:var(--ink);
  font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased;
}

a{text-decoration:none;color:inherit}

::selection{background:var(--acc);color:var(--bg)}

:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,5vw,64px)}

/* ---------- 2. 站点头部（与首页同构） ---------- */
header{
  position:sticky;top:0;z-index:200;
  background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--rule);
}
.nav{display:flex;align-items:center;gap:var(--s7);height:78px;padding-right:200px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.mark{
  width:30px;height:30px;flex-shrink:0;color:var(--acc);
  transition:transform var(--slow) var(--ease);
}
.brand:hover .mark{transform:rotate(-8deg) scale(1.06)}
.mark svg{width:100%;height:100%;display:block}
.brand .cn{font-family:var(--display);font-size:21px;font-weight:700;letter-spacing:.04em}
.brand .en{font-size:10.5px;letter-spacing:.24em;color:var(--ink-3);text-transform:uppercase;font-weight:600}
.menu{display:flex;gap:var(--s5);margin-left:auto}
.menu a{font-size:14px;color:var(--ink-2);position:relative;padding:6px 0;transition:color var(--fast)}
.menu a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--acc);transform:scaleX(0);transform-origin:right;transition:transform var(--slow) var(--ease)}
.menu a:hover{color:var(--ink)}
.menu a[aria-current="page"]{color:var(--ink);font-weight:600}
.menu a[aria-current="page"]::after{transform:scaleX(1)}
.btn-phone{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--ink);padding:9px 17px;font-size:13.5px;font-weight:600;transition:all var(--fast) var(--ease)}
.btn-phone:hover{background:var(--ink);color:var(--bg)}
.btn-phone svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}

/* ---------- 3. 页脚（与首页同构） ---------- */
footer{border-top:1px solid var(--rule);padding:var(--s7) 0 var(--s6);margin-top:var(--s8)}
.foot-links{display:flex;gap:var(--s6);flex-wrap:wrap;padding-bottom:var(--s5);border-bottom:1px solid var(--rule);margin-bottom:var(--s5)}
.foot-col h5{font-size:11px;letter-spacing:.14em;color:var(--ink-3);margin-bottom:var(--s3);font-weight:700}
.foot-col a{display:block;font-size:13.5px;color:var(--ink-2);padding:3px 0;transition:color var(--fast)}
.foot-col a:hover{color:var(--acc)}
.foot-bot{font-size:12px;color:var(--ink-3);line-height:1.9}
.foot-bot a{color:var(--ink-3)}
.foot-bot a:hover{color:var(--acc)}

/* ---------- 4. 页头区（面包屑 + 标题） ---------- */
.crumb{font-size:12.5px;color:var(--ink-3);padding:var(--s5) 0 0}
.crumb a{color:var(--ink-3);transition:color var(--fast)}
.crumb a:hover{color:var(--acc)}
.crumb span{margin:0 7px;opacity:.6}

.phead{padding:var(--s6) 0 clamp(40px,5vw,72px);border-bottom:1px solid var(--rule)}
.phead .eyebrow{display:inline-flex;align-items:center;gap:11px;font-size:11.5px;letter-spacing:.22em;color:var(--acc);font-weight:700;text-transform:uppercase;margin-bottom:var(--s5)}
.phead .eyebrow::before{content:"";width:34px;height:2px;background:var(--acc);flex-shrink:0}
.phead-grid{display:grid;grid-template-columns:3fr 9fr;gap:var(--s6);align-items:end}
.phead h1{
  font-family:var(--display);font-size:clamp(32px,5.4vw,64px);line-height:1.1;
  font-weight:700;letter-spacing:-.02em;
}
.phead .lead{font-size:17px;color:var(--ink-2);max-width:62ch;padding-bottom:6px}

/* 首字下沉（仅长正文块） */
.lede-first::first-letter{
  font-family:var(--display);font-size:3.05em;line-height:.86;
  float:left;padding:5px 12px 0 0;color:var(--acc);font-weight:700;
}

main{padding:var(--s7) 0 var(--s8)}

/* ---------- 5. 通用组件 ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:11px;font-size:11.5px;letter-spacing:.22em;color:var(--acc);font-weight:700;text-transform:uppercase}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--acc);flex-shrink:0}

h2{font-family:var(--display);font-size:clamp(24px,3.2vw,38px);line-height:1.18;font-weight:700;letter-spacing:-.015em}
h3{font-family:var(--display);font-size:clamp(19px,2vw,24px);line-height:1.3;font-weight:700}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;font-size:15px;font-weight:600;
  border:1.5px solid var(--ink);background:transparent;cursor:pointer;
  transition:all var(--fast) var(--ease);min-height:52px;
}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn-fill{background:var(--ink);color:var(--bg)}
.btn-fill:hover{background:var(--acc);border-color:var(--acc)}
.btn-acc{background:var(--acc);border-color:var(--acc);color:#fff}
.btn-acc:hover{background:var(--ink);border-color:var(--ink)}

.ic{width:1.06em;height:1.06em;display:inline-block;vertical-align:-.18em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* 深底区块 */
.panel{background:var(--inv);color:var(--inv-fg)}
.panel h2,.panel h3{color:var(--inv-fg)}
.panel a{color:var(--acc-inv)}
.panel .eyebrow{color:var(--acc-inv)}
.panel .eyebrow::before{background:var(--acc-inv)}

/* ---------- 6. FAQ 手风琴（纸本分隔线式，非卡片） ---------- */
.faq-list{border-top:2px solid var(--ink)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-item summary{
  display:grid;grid-template-columns:64px minmax(0,1fr) 28px;
  align-items:baseline;gap:var(--s4);
  cursor:pointer;list-style:none;padding:var(--s5) 0;
  font-family:var(--display);font-size:clamp(17px,1.8vw,21px);font-weight:700;line-height:1.45;
  transition:color var(--fast);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--acc)}
.faq-item[open] summary{color:var(--acc)}
.faq-num{
  font-family:var(--num);font-size:13px;font-weight:400;letter-spacing:.06em;
  color:var(--acc);font-variant-numeric:tabular-nums;padding-top:4px;
}
.faq-mark{
  width:22px;height:22px;position:relative;align-self:center;
  transition:transform var(--slow) var(--ease);
}
.faq-mark::before,.faq-mark::after{
  content:"";position:absolute;background:var(--ink);left:50%;top:50%;
}
.faq-mark::before{width:14px;height:1.6px;transform:translate(-50%,-50%)}
.faq-mark::after{width:1.6px;height:14px;transform:translate(-50%,-50%);transition:opacity var(--fast)}
.faq-item[open] .faq-mark{transform:rotate(90deg)}
.faq-item[open] .faq-mark::after{opacity:0}
.faq-a{
  padding:0 0 var(--s5) 64px;color:var(--ink-2);max-width:74ch;
  animation:faqIn .42s var(--ease);
}
.faq-a p+p{margin-top:var(--s3)}
.faq-a a{color:var(--acc);border-bottom:1px solid var(--acc-soft);transition:border-color var(--fast)}
.faq-a a:hover{border-bottom-color:var(--acc)}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- 7. 案例（数据表 + 衬线大数字） ---------- */
.case{border-top:1px solid var(--ink);padding:var(--s6) 0 var(--s7)}
.case:first-of-type{border-top:2px solid var(--ink)}
.case-head{display:grid;grid-template-columns:5fr 7fr;gap:var(--s6);align-items:start;margin-bottom:var(--s5)}
.case-head .ico{color:var(--acc);margin-bottom:var(--s3)}
.case-head .ico svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.case h2{margin-bottom:var(--s2)}
.case .sub{font-size:13.5px;color:var(--ink-3);letter-spacing:.02em}
.case-desc{color:var(--ink-2);font-size:16.5px}
.case-desc b{color:var(--ink);font-weight:600}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:var(--s5) 0}
.stat{padding:var(--s4) var(--s4) var(--s4) 0;border-left:1px solid var(--rule)}
.stat:first-child{border-left:none;padding-left:0}
.stat b{
  display:block;font-family:var(--num);font-size:clamp(26px,3.2vw,38px);
  font-weight:700;line-height:1.05;color:var(--acc);font-variant-numeric:tabular-nums;
}
.stat span{display:block;font-size:12px;color:var(--ink-3);margin-top:7px;letter-spacing:.03em}

.case-meta{list-style:none;display:grid;gap:0}
.case-meta li{
  display:grid;grid-template-columns:132px minmax(0,1fr);gap:var(--s4);
  padding:11px 0;border-bottom:1px solid var(--rule-soft);font-size:14.5px;color:var(--ink-2);
}
.case-meta li:last-child{border-bottom:none}
.case-meta b{color:var(--ink);font-weight:600}

.fit{
  margin-top:var(--s4);padding:13px 17px;font-size:14px;color:var(--ink-2);
  background:var(--acc-soft);border-left:2.5px solid var(--acc);
}
.fit b{color:var(--ink);font-weight:600}

.note{
  margin-top:var(--s7);padding:var(--s5) var(--s5) var(--s5) var(--s6);
  background:var(--bg-alt);border-left:2.5px solid var(--ink);
  font-size:14.5px;color:var(--ink-2);line-height:1.85;
}
.note b{color:var(--ink);font-weight:600}

/* ---------- 8. 博客列表（编辑部目录式） ---------- */
.posts{border-top:2px solid var(--ink)}
.post{
  display:grid;grid-template-columns:118px minmax(0,1fr);
  gap:var(--s5);padding:var(--s5) 0;border-bottom:1px solid var(--rule);
  transition:background var(--fast);
}
.post:hover{background:var(--bg-alt)}
.post:hover h2{color:var(--acc)}
.post-side{display:flex;flex-direction:column;gap:var(--s2);padding-top:5px}
.post-tag{
  font-size:11px;letter-spacing:.14em;color:var(--acc);font-weight:700;text-transform:uppercase;
}
.post-date{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.post h2{font-size:clamp(18px,2.1vw,25px);margin-bottom:var(--s2);transition:color var(--fast)}
.post p{color:var(--ink-2);font-size:15.5px;max-width:74ch}
.post-meta{font-size:12.5px;color:var(--ink-3);margin-top:var(--s3)}

/* ---------- 9. 转化区块 ---------- */
.cta{
  margin-top:var(--s8);padding:clamp(32px,4.5vw,56px);
  background:var(--inv);color:var(--inv-fg);
  display:grid;grid-template-columns:7fr 5fr;gap:var(--s6);align-items:center;
}
.cta h2{color:var(--inv-fg);margin-bottom:var(--s3)}
.cta p{color:color-mix(in srgb,var(--inv-fg) 76%,transparent);font-size:15.5px}
.cta .eyebrow{color:var(--acc-inv);margin-bottom:var(--s4)}
.cta .eyebrow::before{background:var(--acc-inv)}
.cta-act{display:flex;flex-direction:column;gap:var(--s3);align-items:stretch}
.cta-act .btn{border-color:var(--inv-fg);color:var(--inv-fg)}
.cta-act .btn:hover{background:var(--inv-fg);color:var(--inv)}
.cta-note{font-size:12.5px;color:color-mix(in srgb,var(--inv-fg) 58%,transparent);line-height:1.7}

/* ---------- 10. 移动端底部操作条 ---------- */
.floatbar{
  position:fixed;bottom:0;left:0;right:0;z-index:250;display:none;
  grid-template-columns:1fr 1fr;background:var(--inv);
  box-shadow:0 -8px 32px rgba(0,0,0,.22);
}
.floatbar a{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 0;font-size:14px;font-weight:600;min-height:54px;
}
.floatbar .fb-tel{background:var(--bg);color:var(--ink)}
.floatbar .fb-wx{background:var(--acc);color:#fff}
.floatbar svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 11. 渐入（动画仅作增强，无 JS / 观察器失效时内容必须可见） ---------- */
.rv{opacity:1;transform:none}
html.js .rv{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js .rv.in{opacity:1;transform:none}
/* 安全兜底：JS 已就绪但观察器未触发时（如打印、截图、后台标签页），内容不得永久隐藏 */
@media print{
  html.js .rv{opacity:1!important;transform:none!important}
}

@media(prefers-reduced-motion:reduce){
  html.js .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

/* ---------- 12. 响应式 ---------- */
@media(max-width:1080px){
  .phead-grid{grid-template-columns:1fr;gap:var(--s4);align-items:start}
  .case-head{grid-template-columns:1fr;gap:var(--s4)}
  .stats{grid-template-columns:1fr 1fr}
  .stat{border-left:none;border-top:1px solid var(--rule);padding:var(--s4) var(--s4) var(--s4) 0}
  .stat:nth-child(-n+2){border-top:none}
  .stat:nth-child(even){border-left:1px solid var(--rule);padding-left:var(--s4)}
  .cta{grid-template-columns:1fr;gap:var(--s5)}
}
@media(max-width:860px){
  body{font-size:16px;padding-bottom:54px}
  .menu{display:none}
  .nav{padding-right:0;height:66px}
  /* 移动端隐藏顶部电话按钮，避免号码折行；改由底部操作条承载 */
  .btn-phone{display:none}
  .floatbar{display:grid}
  /* 移动端触控目标不小于 44px（WCAG 2.5.5） */
  .brand{min-height:44px}
  .foot-col a{min-height:44px;display:flex;align-items:center}
  .foot-col h5{margin-bottom:var(--s2)}
  .faq-item summary{grid-template-columns:38px minmax(0,1fr) 22px;gap:var(--s3);padding:var(--s4) 0}
  .faq-a{padding-left:0}
  .post{grid-template-columns:1fr;gap:var(--s3)}
  .post-side{flex-direction:row;align-items:center;gap:var(--s4)}
}
@media(max-width:560px){
  .stats{grid-template-columns:1fr}
  .stat{border-left:none!important;padding-left:0!important}
  .stat:nth-child(2){border-top:1px solid var(--rule)}
  .case-meta li{grid-template-columns:1fr;gap:2px}
  .cta-act{flex-direction:column}
  .btn{width:100%;justify-content:center}
  h1{font-size:clamp(28px,8.6vw,40px)}
  .lede-first::first-letter{font-size:2.6em}
}