@charset "UTF-8";
/* ==========================================================================
   香香腐宅 · xxfz-app.com.cn
   配色：第 13 档 —— 蜜橘 #F0824B 主 + 黛蓝紫 #5A6BAD 辅 + 黛蓝紫渐变 CTA
        暖砂白底 #FDF8F4、深赭→靛 Hero、奶黄 #FFD98A 点缀
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html,body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,figcaption,blockquote,dl,dd,dt,fieldset,table,th,td{margin:0;padding:0}
ul,ol{list-style:none}
img{max-width:100%;height:auto;display:block;border:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}
:root{
  --orange:#F0824B; --orange-d:#C55A28; --orange-l:#FDE9DC;
  --slate:#5A6BAD;  --slate-d:#3D4B85;  --slate-l:#E8EBF7;
  --amber:#E9A93C;  --cream:#FFD98A;
  --ink:#26242A; --ink2:#57535E; --mut:#8C8794;
  --line:#F0E7DF; --line2:#E6DCD2;
  --bg:#FDF8F4; --card:#FFFFFF;
  --foot:#1E2338; --foot-tx:#C3CAE0;
  --shadow:0 12px 34px rgba(96,66,42,.09);
  --shadow-sm:0 4px 14px rgba(96,66,42,.07);
  --r:16px;
  --wrap:1180px;
}

body{
  font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB","Source Han Sans SC",sans-serif;
  background:var(--bg);color:var(--ink);
  font-size:16px;line-height:1.78;
  -webkit-font-smoothing:antialiased;
}

/* ── 通用容器 ───────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-left:22px;padding-right:22px}
.section{padding-top:70px;padding-bottom:70px}
.section.alt{background:#fff}
.sec-head{max-width:760px;margin:0 auto 34px;text-align:center}
.sec-head h2{font-size:27px;line-height:1.4;letter-spacing:.4px}
.sec-head-p{margin-top:12px;color:var(--ink2);font-size:15px}
.sec-body{max-width:760px;margin:0 auto 22px;color:var(--ink2);font-size:15.5px}

.eyebrow{
  display:inline-block;font-size:13px;font-weight:700;letter-spacing:1.2px;
  color:var(--orange-d);background:var(--orange-l);
  border-radius:999px;padding:4px 14px;margin-bottom:14px;
}

/* ── 按钮 ───────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 30px;border-radius:999px;font-size:16px;font-weight:700;
  color:#fff;background:linear-gradient(135deg,#8B9AD8,#5A6BAD 52%,#37427B);
  box-shadow:0 10px 24px rgba(58,70,128,.28);
  transition:transform .18s ease,box-shadow .18s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(58,70,128,.34)}
.btn i{font-size:15px}
.btn.ghost{
  background:transparent;color:var(--slate-d);border:1.5px solid var(--slate);
  box-shadow:none;font-weight:700;
}
.btn.ghost:hover{background:var(--slate-l)}
.btn.on-light{color:#fff}

/* ── 头部 ───────────────────────────────────────────────────── */
.site-head{
  position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
}
.head-in{
  max-width:var(--wrap);margin:0 auto;padding:10px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand img{width:42px;height:42px;border-radius:11px;box-shadow:var(--shadow-sm)}
.brand-name{display:flex;flex-direction:column;line-height:1.25}
.brand-name b{font-size:18px;letter-spacing:.6px}
.brand-name .sub{font-size:11.5px;color:var(--mut)}
.nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.nav a{
  font-size:14.5px;color:var(--ink2);padding:7px 12px;border-radius:9px;
  transition:background .16s ease,color .16s ease;
}
.nav a:hover{background:var(--orange-l);color:var(--orange-d)}
.nav a.active{color:var(--orange-d);background:var(--orange-l);font-weight:700}
.nav .header-cta{
  color:#fff;background:linear-gradient(135deg,#8B9AD8,#5A6BAD 52%,#37427B);
  padding:9px 20px;font-weight:700;font-size:14px;
}
.nav .header-cta:hover{color:#fff;background:linear-gradient(135deg,#96A5E0,#5A6BAD 52%,#37427B)}
.nav .header-cta::after{display:none}

/* ── Hero（浅暖砂底，深色文字） ─────────────────────────────── */
.hero{
  position:relative;overflow:hidden;color:var(--ink);
  background:linear-gradient(158deg,#FFF7F0,#FDE8D9 42%,#F0F1FC);
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(560px 420px at 10% 6%,rgba(240,130,75,.30),transparent 70%),
    radial-gradient(520px 460px at 90% 14%,rgba(90,107,173,.24),transparent 72%),
    radial-gradient(440px 380px at 64% 98%,rgba(255,217,138,.42),transparent 74%);
}
.hero::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(196,90,40,.12) 1px,transparent 1px);
  background-size:22px 22px;
}
.hero .wrap{position:relative;z-index:2}
.hero-grid{
  display:grid;grid-template-columns:1fr 380px;gap:44px;align-items:center;
  padding-top:66px;padding-bottom:74px;
}
.hero-grid>*{min-width:0}
.pill{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;
  color:var(--orange-d);background:#fff;
  border:1px solid var(--line2);border-radius:999px;padding:5px 15px;margin-bottom:18px;
  box-shadow:var(--shadow-sm);
}
.hero h1{
  font-size:40px;line-height:1.3;letter-spacing:.6px;color:var(--ink);
}
.hero-lead{margin-top:16px;font-size:16px;color:#5B524E;max-width:640px}
.hero-meta{display:flex;flex-wrap:wrap;gap:16px;margin-top:22px;font-size:14px;color:#6C6059}
.hero-meta span{display:inline-flex;align-items:center;gap:7px}
.hero-meta i{color:var(--orange-d)}
.hero-act{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.hero-act .btn.ghost{color:var(--slate-d);border-color:var(--slate)}
.hero-act .btn.ghost:hover{background:#fff}
.hero-visual{display:flex;align-items:flex-end;justify-content:center;gap:16px}
.phone{
  width:206px;flex:none;border-radius:22px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(90,107,173,.16),0 18px 40px rgba(120,80,50,.22);
  background:#fff;
}
.phone .screen img{width:100%;height:auto}
.phone.small{width:142px}

/* ── 数据条 ─────────────────────────────────────────────────── */
.stats{background:#fff;border-bottom:1px solid var(--line)}
.stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  padding-top:30px;padding-bottom:30px;
}
.stats .it{text-align:center}
.stats .it .num{
  display:block;font-size:29px;font-weight:800;color:var(--orange-d);line-height:1.2;
}
.stats .it .num em{font-style:normal;font-size:15px;margin-left:2px;color:var(--slate)}
.stats .it .lbl{display:block;margin-top:6px;font-size:13.5px;color:var(--mut)}

/* ── 卡片 ───────────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 22px;box-shadow:var(--shadow-sm);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--orange-l)}
.card-icon{
  width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  font-size:19px;color:#fff;background:linear-gradient(135deg,#F49A6A,#E06B33);margin-bottom:14px;
}
.card-icon.v{background:linear-gradient(135deg,#8B9AD8,#4E5EA3)}
.card h3{font-size:17.5px;margin-bottom:9px}
.card p{font-size:14.6px;color:var(--ink2)}

/* ── 截图栅格 ───────────────────────────────────────────────── */
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.shot{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;box-shadow:var(--shadow-sm);margin:0;
}
.shot img{width:100%;height:auto;border-radius:10px;box-shadow:0 0 0 1px var(--line)}
.shot figcaption{margin:11px 2px 2px;font-size:13.5px;color:var(--ink2);text-align:center}

/* ── 内页入口卡 ─────────────────────────────────────────────── */
.entries{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.entry{
  display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 20px;box-shadow:var(--shadow-sm);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.entry:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--slate-l)}
.entry i.ic{
  display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;
  background:var(--slate-l);color:var(--slate-d);font-size:17px;margin-bottom:13px;
}
.entry b{display:block;font-size:16.5px;margin-bottom:8px}
.entry span{display:block;font-size:14px;color:var(--ink2)}
.entry u{display:inline-block;margin-top:12px;font-size:13.5px;font-weight:700;color:var(--orange-d);text-decoration:none}

/* ── 评价 ───────────────────────────────────────────────────── */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.review{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 22px;box-shadow:var(--shadow-sm);
}
.review .stars{color:var(--amber);font-size:14px;letter-spacing:2px;margin-bottom:12px}
.review p{font-size:14.8px;color:var(--ink2)}
.review .who{display:flex;align-items:center;gap:11px;margin-top:16px;padding-top:14px;border-top:1px dashed var(--line2)}
.review .avt{
  display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;
  border-radius:50%;background:linear-gradient(135deg,#F49A6A,#D9602B);
  color:#fff;font-size:15px;font-weight:700;
}
.review .who b{display:block;font-size:14.5px}
.review .who b + span{display:block;font-size:12.5px;color:var(--mut)}

/* ── FAQ ────────────────────────────────────────────────────── */
.faq-list{max-width:860px;margin:0 auto}
.faq details,.faq-list details,.prose details{
  background:var(--card);border:1px solid var(--line);border-radius:13px;
  margin-bottom:11px;box-shadow:var(--shadow-sm);overflow:hidden;
}
.faq summary,.faq-list summary,.prose details > summary{
  cursor:pointer;list-style:none;padding:16px 52px 16px 20px;position:relative;
  font-size:15.6px;font-weight:700;color:var(--ink);
}
.faq summary::-webkit-details-marker,.faq-list summary::-webkit-details-marker,
.prose details > summary::-webkit-details-marker{display:none}
.faq summary::after,.faq-list summary::after,.prose details > summary::after{
  content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-size:20px;font-weight:400;color:var(--orange);line-height:1;
}
.faq details[open] > summary::after,.faq-list details[open] > summary::after,
.prose details[open] > summary::after{content:"\2212";color:var(--slate)}
.faq details[open],.faq-list details[open],.prose details[open]{border-color:var(--orange-l)}
.faq .ans,.faq-list .ans,.prose details .ans{
  padding:0 20px 18px;font-size:14.8px;color:var(--ink2);
}
.faq .ans p + p,.faq-list .ans p + p,.prose details .ans p + p{margin-top:8px}

/* ── CTA 条 ─────────────────────────────────────────────────── */
.band,.cta-band{
  background:linear-gradient(135deg,#FFF6EE,#FDECE0);
  border:1px solid var(--line2);border-radius:20px;padding:28px 26px;
  display:grid;grid-template-columns:1fr auto;gap:12px 22px;align-items:center;
}
.band h2,.cta-band h2{font-size:23px;line-height:1.4}
.band .btn,.cta-band .btn{grid-column:2;grid-row:1;justify-self:end}
.band-txt{grid-column:1 / -1;font-size:14.6px;color:var(--ink2)}

/* ── 内页横幅（与首页 Hero 同族，浅暖砂底） ─────────────────── */
.page-hero{
  position:relative;overflow:hidden;color:var(--ink);
  background:linear-gradient(158deg,#FFF7F0,#FDE8D9 46%,#F0F1FC);
}
.page-hero::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(196,90,40,.11) 1px,transparent 1px);
  background-size:22px 22px;
}
.page-hero .wrap{position:relative;z-index:2;padding-top:48px;padding-bottom:48px}
.crumb{font-size:13.5px;color:#8A7A70;margin-bottom:14px}
.crumb a:hover{color:var(--orange-d)}
.page-hero h1{font-size:32px;line-height:1.36;color:var(--ink)}
.page-hero .lead{margin-top:14px;font-size:15.6px;color:#5B524E;max-width:820px}

/* ── 正文 ───────────────────────────────────────────────────── */
.prose{width:100%;max-width:900px;min-width:0;margin:0 auto;padding:54px 22px 64px}
.prose h2{font-size:23px;line-height:1.45;margin:36px 0 14px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:17.5px;margin:24px 0 10px;color:var(--slate-d)}
.prose p{font-size:15.6px;color:var(--ink2);margin-bottom:14px}
.prose strong{color:var(--orange-d)}
.prose a{color:var(--slate-d);border-bottom:1px dashed var(--slate)}
.prose a:hover{color:var(--orange-d);border-color:var(--orange)}
.prose ul>li,.prose ol>li{position:relative;font-size:15.4px;color:var(--ink2);padding-left:22px;margin-bottom:9px}
.prose ul>li::before{
  content:"";position:absolute;left:3px;top:11px;width:7px;height:7px;border-radius:50%;
  background:var(--orange);
}
.prose ol{counter-reset:oli}
.prose ol>li{counter-increment:oli;padding-left:30px}
.prose ol>li::before{
  content:counter(oli);position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;
  background:var(--orange-l);color:var(--orange-d);font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.prose .steps{counter-reset:st;margin:18px 0 22px}
.prose .steps>li{
  counter-increment:st;padding:16px 18px 16px 60px;position:relative;
  background:#fff;border:1px solid var(--line);border-radius:13px;margin-bottom:12px;
  box-shadow:var(--shadow-sm);
}
.prose .steps>li::before{
  content:counter(st);position:absolute;left:18px;top:16px;
  width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,#F49A6A,#D9602B);
  color:#fff;font-size:13.5px;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.prose .steps>li b{display:block;font-size:15.8px;color:var(--ink);margin-bottom:5px}
.prose .steps ul{margin-top:8px}
.prose .steps ul>li{font-size:14.6px;padding-left:16px}
.prose .steps ul>li::before{width:5px;height:5px;background:var(--slate);top:11px}

.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:#fff;margin:18px 0 22px;box-shadow:var(--shadow-sm)}
.table-scroll table.cmp{border:0;border-radius:0}
table.cmp{width:100%;min-width:680px;font-size:14.6px}
table.cmp th,table.cmp td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.cmp thead th{background:var(--orange-l);color:var(--orange-d);font-weight:700;font-size:14.2px;white-space:nowrap}
table.cmp tbody tr:last-child td{border-bottom:0}
table.cmp td:first-child{font-weight:700;color:var(--ink);white-space:nowrap}

.prose .shot{margin:26px auto;max-width:368px}
.prose .shot img{width:100%;height:auto}

.note{
  background:#fff;border-left:4px solid var(--slate);border-radius:0 13px 13px 0;
  padding:15px 18px;margin:18px 0 22px;font-size:14.8px;color:var(--ink2);box-shadow:var(--shadow-sm);
}
.note b{color:var(--slate-d)}

.rel-links{margin:30px 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.prose .rel-links>li{padding-left:0;margin:0}
.prose .rel-links>li::before{display:none}
.rel-links a{
  display:block;background:#fff;border:1px solid var(--line);border-radius:13px;
  padding:15px 17px;border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .16s ease,border-color .16s ease;
}
.rel-links a:hover{transform:translateY(-2px);border-color:var(--orange-l);color:var(--orange-d)}
.rel-links b{display:block;font-size:15.4px;color:var(--ink);margin-bottom:5px}
.rel-links span{display:block;font-size:13.8px;color:var(--mut)}

/* ── 页脚 ───────────────────────────────────────────────────── */
.site-footer{background:var(--foot);color:var(--foot-tx);padding:44px 0 26px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
.foot-brand{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.foot-brand img{width:40px;height:40px;border-radius:11px}
.foot-brand b{color:#fff;font-size:17px;letter-spacing:.5px}
.foot-brand .sub{display:block;font-size:11.5px;color:#8E9AB8}
.site-footer h3{color:#fff;font-size:15px;margin-bottom:12px}
.site-footer ul li{font-size:14px;margin-bottom:8px}
.site-footer a:hover{color:#fff}
.footer-dl{
  display:inline-flex;align-items:center;gap:8px;margin-top:6px;
  padding:11px 24px;border-radius:999px;font-size:15px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#8B9AD8,#5A6BAD 52%,#37427B);
}
.foot-bottom{margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.13)}
.site-footer .disclaimer{font-size:13.2px;color:#9FABC7;line-height:1.7}
.site-footer .copyright{font-size:13.2px;color:#8E9AB8;margin-top:9px}

/* ── 渐显（仅首页使用） ─────────────────────────────────────── */
.reveal{transition:opacity .5s ease,transform .5s ease}
.js .reveal{opacity:0;transform:translateY(18px)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal,.reveal{opacity:1;transform:none;transition:none}
}

/* ── 断点 980 ───────────────────────────────────────────────── */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:34px;padding-top:48px;padding-bottom:56px}
  .hero-visual{order:2}
  .cards,.shots,.entries,.reviews{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .band,.cta-band{grid-template-columns:1fr}
  .band .btn,.cta-band .btn{grid-column:1;grid-row:auto;justify-self:start}
  .band h2,.cta-band h2{grid-column:1;grid-row:auto}
  .band-txt{grid-column:1}
  .rel-links{grid-template-columns:1fr}
}

/* ── 断点 620 ───────────────────────────────────────────────── */
@media (max-width:620px){
  body{font-size:15.4px}
  .section{padding-top:48px;padding-bottom:48px}
  .head-in{padding:9px 16px;gap:0}
  .brand{width:100%}
  .brand-name .sub{display:none}
  .nav{width:100%;gap:0;justify-content:flex-start}
  .nav a{flex:0 0 33.3333%;white-space:nowrap;text-align:center;padding:8px 4px;font-size:14px}
  .nav .header-cta{display:none}
  .hero h1{font-size:29px}
  .hero-lead{font-size:15.2px}
  .hero-visual{gap:12px}
  .phone{width:44vw;max-width:196px}
  .phone.small{width:30vw;max-width:132px}
  .sec-head h2{font-size:22px}
  .cards,.shots,.entries,.reviews{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .stats .it .num{font-size:24px}
  .page-hero .wrap{padding-top:34px;padding-bottom:36px}
  .page-hero h1{font-size:24px}
  .prose{padding:36px 22px 46px}
  .prose h2{font-size:20.5px}
  .foot-grid{grid-template-columns:1fr;gap:22px}
  .band,.cta-band{padding:22px 18px;border-radius:16px}
  .band h2,.cta-band h2{font-size:19.5px}
  .band-txt a{white-space:nowrap}
}