/* ==========================================================================
   拾光整理 · 官方网站样式
   与 App 内视觉保持一致：暖橙主色、奶油底色、克制的圆角与边框。
   纯手写，无外部依赖（不引 CDN、不引外部字体），可直接部署到任意静态空间。
   ========================================================================== */

:root{
  --bg:#FDFCFA;
  --bg-alt:#F7F2EA;
  --card:#FFFFFF;
  --ink:#3A3530;
  --ink-2:#6B6259;
  --ink-3:#948A80;
  --line:#EAE3DA;
  --line-2:#F3EDE5;
  --accent:#B45309;
  --accent-2:#D97706;
  --accent-soft:#FFF7ED;
  --accent-line:#F3D9B8;
  --key-bg:#F3F8F4;
  --key-line:#C6DFC9;
  --key-ink:#2F6B3C;
  --warn-bg:#FEF6F4;
  --warn-line:#E8C4B8;
  --warn-ink:#8C3B3B;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(58,53,48,.04), 0 8px 24px -12px rgba(58,53,48,.14);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",sans-serif;
  font-size:16px; line-height:1.85; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
strong{font-weight:650}
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9em; background:var(--line-2); padding:1px 6px; border-radius:5px;
  color:var(--ink-2);
}

/* ---------- 布局容器 ---------- */
.wrap{max-width:1080px; margin:0 auto; padding:0 22px}
.wrap-narrow{max-width:820px; margin:0 auto; padding:0 22px}
.section{padding:76px 0}
.section-tight{padding:52px 0}
.section-alt{background:var(--bg-alt)}

/* ---------- 顶部导航 ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(253,252,250,.92);
  backdrop-filter:saturate(160%) blur(10px);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-in{
  max-width:1080px; margin:0 auto; padding:0 22px;
  height:62px; display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.logo{display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none}
.logo:hover{text-decoration:none}
.logo-mark{
  width:30px; height:30px; border-radius:9px; flex:0 0 auto;
  background:linear-gradient(145deg,var(--accent-2),var(--accent));
  color:#fff; font-size:15px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  letter-spacing:0;
}
.logo-text{font-size:16.5px; font-weight:650; letter-spacing:.06em}
.nav-links{display:flex; align-items:center; gap:4px}
.nav-links a{
  color:var(--ink-2); font-size:14.5px; padding:7px 12px; border-radius:8px;
  text-decoration:none; white-space:nowrap;
}
.nav-links a:hover{background:var(--line-2); color:var(--ink); text-decoration:none}
.nav-links a.active{color:var(--accent); background:var(--accent-soft)}

/* ---------- 首屏 ---------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 420px at 82% -12%, #FFEDD5 0%, rgba(255,237,213,0) 62%),
    radial-gradient(700px 360px at 6% 104%, #FDF0E4 0%, rgba(253,240,228,0) 60%),
    var(--bg);
  border-bottom:1px solid var(--line);
}
.hero-in{
  max-width:1080px; margin:0 auto; padding:88px 22px 80px;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:56px; align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:600; letter-spacing:.16em; color:var(--accent);
  background:var(--accent-soft); border:1px solid var(--accent-line);
  padding:6px 13px; border-radius:999px; margin-bottom:22px;
}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--accent);display:block}
h1{
  font-size:clamp(30px,4.6vw,46px); line-height:1.28; margin:0 0 20px;
  font-weight:700; letter-spacing:-.015em;
}
h1 em{font-style:normal; color:var(--accent); position:relative; white-space:nowrap}
.hero-sub{font-size:17.5px; color:var(--ink-2); margin:0 0 30px; max-width:34em; line-height:1.8}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:11px; font-size:15.5px; font-weight:600;
  border:1px solid transparent; text-decoration:none; cursor:pointer; transition:.16s;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 6px 18px -8px rgba(180,83,9,.6)}
.btn-primary:hover{background:#9A4708}
.btn-ghost{background:var(--card); color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--accent-line); background:var(--accent-soft); color:var(--accent)}
.hero-note{font-size:13.5px; color:var(--ink-3); margin-top:18px}

/* 首屏右侧：手机示意 */
.phone{
  width:262px; margin:0 auto; background:#fff; border:1px solid var(--line);
  border-radius:30px; padding:12px; box-shadow:var(--shadow);
}
.phone-screen{
  border-radius:21px; overflow:hidden; background:linear-gradient(170deg,#FFE7CF 0%,#FDF6EE 58%,#F5F1EA 100%);
  padding:26px 18px 22px; min-height:392px;
  display:flex; flex-direction:column;
}
.phone-brand{font-size:11.5px; letter-spacing:.3em; color:var(--accent); font-weight:600}
.phone-title{font-size:25px; font-weight:700; line-height:1.35; margin:12px 0 8px; letter-spacing:.02em}
.phone-cap{font-size:12.5px; color:var(--ink-2); line-height:1.7; margin-bottom:20px}
.phone-cards{display:flex; flex-direction:column; gap:9px; margin-top:auto}
.phone-card{
  background:rgba(255,255,255,.82); border:1px solid rgba(234,227,218,.9);
  border-radius:11px; padding:11px 13px; font-size:12.5px;
}
.phone-card b{display:block; font-size:13.5px; margin-bottom:2px; color:var(--ink)}
.phone-card span{color:var(--ink-3); font-size:11.5px}
.phone-tap{
  margin-top:14px; text-align:center; font-size:11.5px; color:var(--ink-3);
  letter-spacing:.18em; padding-top:12px; border-top:1px solid rgba(234,227,218,.85);
}

/* ---------- 通用标题 ---------- */
.sec-head{max-width:44em; margin-bottom:42px}
.sec-tag{
  font-size:12.5px; font-weight:600; letter-spacing:.16em; color:var(--accent);
  margin-bottom:12px;
}
h2{font-size:clamp(23px,2.7vw,30px); line-height:1.4; margin:0 0 14px; font-weight:700; letter-spacing:-.01em}
.sec-head p{font-size:16.5px; color:var(--ink-2); margin:0}

h3{font-size:17.5px; margin:0 0 8px; font-weight:650}
.sec-sub{font-size:15px; color:var(--ink-3); margin:44px 0 20px; font-weight:600; letter-spacing:.04em}

/* ---------- 卡片网格 ---------- */
.grid{display:grid; gap:18px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 24px 22px;
}
.card p{margin:0; font-size:15px; color:var(--ink-2); line-height:1.8}
.card-icon{
  width:36px; height:36px; border-radius:10px; margin-bottom:15px;
  background:var(--accent-soft); border:1px solid var(--accent-line);
  display:flex; align-items:center; justify-content:center;
}
.card-icon svg{width:19px; height:19px; stroke:var(--accent); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}

/* 两大功能组 */
.pillar{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:30px 30px 28px; position:relative; overflow:hidden;
}
.pillar::before{
  content:""; position:absolute; inset:0 auto 0 0; width:3px;
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
}
.pillar-head{display:flex; align-items:baseline; gap:12px; margin-bottom:16px; flex-wrap:wrap}
.pillar-head h3{font-size:21px; margin:0}
.tag{
  font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px;
  letter-spacing:.04em;
}
.tag-free{background:var(--key-bg); color:var(--key-ink); border:1px solid var(--key-line)}
.tag-paid{background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-line)}
.pillar > p{font-size:15.5px; color:var(--ink-2); margin:0 0 18px}
.checks{list-style:none; margin:0; padding:0}
.checks li{
  position:relative; padding-left:26px; font-size:15px; color:var(--ink);
  margin-bottom:11px; line-height:1.75;
}
.checks li:last-child{margin-bottom:0}
.checks li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:12px; height:7px; border-left:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:rotate(-45deg); border-radius:1px;
}
.checks li span{color:var(--ink-2)}

/* ---------- 承诺条 ---------- */
.pledge{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden;
}
.pledge-item{background:var(--card); padding:26px 24px}
.pledge-item .k{font-size:16.5px; font-weight:650; margin-bottom:7px; color:var(--ink)}
.pledge-item .v{font-size:14.5px; color:var(--ink-2); line-height:1.75}

/* ---------- 价格 ---------- */
.price-box{
  background:var(--card); border:1px solid var(--accent-line); border-radius:18px;
  padding:38px 34px; box-shadow:var(--shadow);
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:36px; align-items:center;
}
.price-amount{display:flex; align-items:baseline; gap:8px; margin:6px 0 14px}
.price-amount .num{font-size:52px; font-weight:700; color:var(--accent); line-height:1; letter-spacing:-.02em}
.price-amount .cur{font-size:24px; font-weight:650; color:var(--accent)}
.price-amount .unit{font-size:15px; color:var(--ink-3)}
.price-list{list-style:none; margin:0; padding:0}
.price-list li{font-size:14.5px; color:var(--ink-2); margin-bottom:7px; padding-left:18px; position:relative}
.price-list li::before{content:""; position:absolute; left:0; top:.72em; width:5px; height:5px; border-radius:50%; background:var(--accent-2)}

/* ---------- 提示块 ---------- */
.callout{
  border-radius:var(--radius-sm); padding:16px 19px; margin:20px 0;
  font-size:15px; line-height:1.8;
}
.callout .t{font-weight:650; display:block; margin-bottom:5px}
.callout.key{background:var(--key-bg); border:1px solid var(--key-line); color:var(--key-ink)}
.callout.warn{background:var(--warn-bg); border:1px solid var(--warn-line); color:var(--warn-ink)}
.callout.note{background:var(--accent-soft); border:1px solid var(--accent-line); color:#8A4A0A}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; padding:20px 40px 20px 0; position:relative;
  font-size:16.5px; font-weight:600; list-style:none; color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:8px; top:50%; width:9px; height:9px;
  border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg); transition:.2s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg); border-color:var(--accent)}
.faq .ans{padding:0 40px 24px 0; font-size:15.5px; color:var(--ink-2); line-height:1.85}
.faq .ans p{margin:0 0 12px}
.faq .ans p:last-child{margin-bottom:0}
.faq .ans ul{margin:0 0 12px; padding-left:20px}

/* ---------- 表格 ---------- */
.table-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--card)}
table{width:100%; border-collapse:collapse; font-size:14.5px; min-width:520px}
th,td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--line-2); vertical-align:top}
th{background:var(--bg-alt); font-weight:650; font-size:13.5px; color:var(--ink-2); white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
td.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12.8px; word-break:break-all}

/* ---------- 页脚 ---------- */
.foot{background:var(--bg-alt); border-top:1px solid var(--line); padding:52px 0 40px; margin-top:0}
.foot-in{max-width:1080px; margin:0 auto; padding:0 22px}
.foot-top{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); gap:36px; margin-bottom:34px}
.foot-slogan{font-size:16px; font-weight:650; margin:0 0 8px}
.foot-desc{font-size:14px; color:var(--ink-2); margin:0; line-height:1.8; max-width:30em}
.foot-h{font-size:13px; font-weight:650; color:var(--ink-3); letter-spacing:.1em; margin-bottom:12px}
.foot-col a{display:block; font-size:14.5px; color:var(--ink-2); margin-bottom:9px; text-decoration:none}
.foot-col a:hover{color:var(--accent)}
.foot-col p{font-size:14.5px; color:var(--ink-2); margin:0 0 9px; line-height:1.75}
.foot-bottom{
  border-top:1px solid var(--line); padding-top:22px;
  font-size:13.5px; color:var(--ink-3); line-height:2;
  display:flex; flex-wrap:wrap; gap:6px 20px; align-items:center;
}
.foot-bottom .sep{color:var(--line)}
.foot-bottom a{color:var(--ink-3); text-decoration:none}
.foot-bottom a:hover{color:var(--accent)}

/* ---------- 法律页 ---------- */
.legal-head{padding:54px 0 30px; border-bottom:1px solid var(--line); margin-bottom:36px}
.legal-head .brand{
  display:inline-flex; align-items:center; gap:9px; font-size:13px; color:var(--accent);
  font-weight:600; letter-spacing:.14em; margin-bottom:16px;
}
.legal-head .brand i{width:7px;height:7px;border-radius:50%;background:var(--accent);display:block}
.legal-head h1{font-size:31px; margin:0 0 16px}
.legal-meta{font-size:13.5px; color:var(--ink-3); line-height:2}
.legal-meta b{color:var(--ink-2); font-weight:600}
.legal-lead{
  font-size:16.5px; color:var(--ink-2); background:var(--card);
  border:1px solid var(--line); border-radius:12px; padding:20px 22px; margin-bottom:8px;
}
.legal h2{font-size:20px; margin:52px 0 18px; padding-top:6px}
.legal h2 .num{color:var(--accent); font-variant-numeric:tabular-nums; margin-right:10px; font-size:17px}
.legal h3{font-size:16.5px; margin:30px 0 10px; font-weight:650}
.legal p{margin:0 0 15px}
.legal ul,.legal ol{margin:0 0 15px; padding-left:22px}
.legal li{margin-bottom:9px}
.legal li:last-child{margin-bottom:0}
.toc{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 24px; margin-bottom:8px;
}
.toc .t{font-size:13px; font-weight:650; color:var(--ink-3); letter-spacing:.1em; margin-bottom:12px}
.toc ol{margin:0; padding-left:20px; column-gap:32px}
.toc li{font-size:14.5px; margin-bottom:7px; color:var(--ink-2)}
.toc a{color:var(--ink-2)}
.toc a:hover{color:var(--accent)}

/* ---------- 响应式 ---------- */
@media (max-width:960px){
  .hero-in{grid-template-columns:1fr; gap:44px; padding:64px 22px 60px}
  .phone{order:-1}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .section{padding:56px 0}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .pledge{grid-template-columns:1fr}
  .price-box{grid-template-columns:1fr; gap:24px; padding:30px 24px}
  .nav-in{height:auto; padding:10px 22px; flex-direction:column; align-items:flex-start; gap:8px}
  .nav-links{width:100%; overflow-x:auto}
  .foot-top{grid-template-columns:1fr}
  .toc ol{column-count:1}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}

/* ---------- 待替换占位 ---------- */
/* 上线前需要替换为真实信息的内联标记。全部替换完成后，本段样式可一并删除。 */
.ph{
  display:inline-block; background:#FFF8E6; border:1px dashed #E8D28A;
  border-radius:5px; padding:0 6px; color:#8A6A11; font-size:.94em;
  font-style:normal; font-weight:600; word-break:break-all;
}
/* 是给编辑者看的整块提示，上线前整块删除 */
.todo{
  background:#FFF8E6; border:1px solid #E8D28A; border-radius:var(--radius-sm);
  padding:16px 19px; margin:22px 0; font-size:14.5px; line-height:1.8; color:#8A6A11;
}
.todo .t{display:block; font-weight:650; margin-bottom:5px}

/* ---------- 打印（备案材料留存用） ---------- */
@media print{
  .nav,.foot,.hero-actions{display:none}
  body{font-size:12pt; background:#fff}
  .card,.pillar,.price-box,.toc{break-inside:avoid; box-shadow:none}
}