/* =========================================================
   香香腐宅 · xiangxiangfuzhaiapp.cc
   站点样式（单一共享样式表）
   配色：香芋紫主 + 樱花粉辅 + 薄荷绿点缀 + 奶油黄 CTA
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

:root{
  --taro:#7C5CE0;
  --taro-d:#5F3FBF;
  --taro-l:#A98BF0;
  --pink:#FF8FB3;
  --pink-d:#E4568A;
  --mint:#3ECFA0;
  --mint-d:#22A87C;
  --cream:#FFD98E;
  --amber:#F5A623;
  --ink:#2E2547;
  --body:#5C5470;
  --muted:#8E87A3;
  --line:#EFE9F7;
  --bg:#FBF7FF;
  --card:#FFFFFF;
  --soft:#F6F1FE;
  --cta:linear-gradient(135deg,#FFDF9E,#FFB93D 46%,#F0921B);
  --cta-ink:#4A2E00;
  --brand-grad:linear-gradient(135deg,#A98BF0,#7C5CE0 54%,#5F3FBF);
  --radius:16px;
}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

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

h1,h2,h3,h4,h5,p,ul,ol,li,figure,figcaption,blockquote,dl,dd,dt,table,caption,th,td{margin:0;padding:0}
ul,ol{list-style:none}
img{max-width:100%;height:auto;display:block;border:0}
a{color:var(--taro-d);text-decoration:none}
a:hover{color:var(--pink-d)}
button{font:inherit;color:inherit}
b,strong{color:var(--ink)}
em,i{font-style:normal}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- 通用容器 ---------- */
.wrap{ width:100%; max-width:1128px; margin:0 auto; padding-left:22px; padding-right:22px; }

/* ---------- 头部 ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(150%) blur(8px);
}
.header-inner{ display:flex; align-items:center; min-height:68px; gap:14px; }
.brand{ display:flex; align-items:center; gap:10px; flex:none; }
.brand img{ width:42px; height:42px; border-radius:11px; box-shadow:0 4px 12px rgba(124,92,224,.22); }
.brand-name{ display:flex; flex-direction:column; line-height:1.18; }
.brand-name b{ font-size:18px; letter-spacing:.6px; color:var(--ink); }
.brand-name .sub{ font-size:11.5px; color:var(--muted); letter-spacing:.4px; }

.nav{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav a{
  display:inline-block; padding:8px 13px; border-radius:9px;
  font-size:14.5px; color:var(--body); font-weight:600;
}
.nav a:hover{ background:var(--soft); color:var(--taro-d); }
.nav a.on{ color:var(--taro-d); background:var(--soft); }
.nav .header-cta{
  margin-left:8px; padding:10px 20px; border-radius:22px; font-size:14.5px; font-weight:800;
  color:var(--cta-ink); background:var(--cta); display:inline-flex; align-items:center; gap:6px;
  box-shadow:0 6px 16px rgba(240,146,27,.28);
}
.nav .header-cta::after{ display:none; }
.nav .header-cta:hover{ color:var(--cta-ink); filter:brightness(1.04); }

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(150deg,#241147,#4A2483 46%,#7A3FB0 100%);
  color:#E9E1F8; position:relative; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(560px 320px at 12% 8%, rgba(255,143,179,.34), transparent 68%),
    radial-gradient(520px 300px at 88% 16%, rgba(62,207,160,.26), transparent 70%),
    radial-gradient(600px 340px at 70% 96%, rgba(255,217,142,.20), transparent 72%),
    linear-gradient(0deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:auto,auto,auto,22px 22px,22px 22px;
}
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center;
  padding-top:66px; padding-bottom:74px;
}
.hero-grid > *{ min-width:0; }
.eyebrow{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:16px;
  padding:6px 14px; border-radius:20px; font-size:12.5px; font-weight:700; letter-spacing:.5px;
  color:#4A2E00; background:linear-gradient(135deg,#FFE7B4,#FFC95E);
}
.hero h1{
  font-size:40px; line-height:1.24; color:#fff; letter-spacing:1px; font-weight:800;
  text-shadow:0 2px 18px rgba(0,0,0,.18);
}
.hero-lead{ margin-top:16px; font-size:15.5px; line-height:1.9; color:#DCD2F6; max-width:560px; }
.hero-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:26px; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 28px; border-radius:26px; font-weight:800; font-size:15.5px;
  color:var(--cta-ink); background:var(--cta);
  box-shadow:0 10px 24px rgba(240,146,27,.30); transition:transform .18s ease, filter .18s ease;
}
.btn:hover{ color:var(--cta-ink); transform:translateY(-2px); filter:brightness(1.05); }
.btn-ghost{
  display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:26px;
  font-weight:700; font-size:14.5px; color:#fff; border:1px solid rgba(255,255,255,.42);
}
.btn-ghost:hover{ color:#fff; background:rgba(255,255,255,.12); }
.hero-note{ margin-top:16px; font-size:13px; color:#B9AAD8; }

.hero-visual{ display:flex; justify-content:center; }
.phone-stage{ display:flex; align-items:flex-end; justify-content:center; gap:18px; }
.phone{
  width:206px; flex:none; padding:9px; border-radius:26px;
  background:#0E0A1C; box-shadow:0 22px 48px rgba(8,2,26,.46);
}
.phone.small{ width:142px; }
.phone .screen{ border-radius:19px; overflow:hidden; background:#fff; }
.phone .screen img{ width:100%; height:auto; display:block; }

/* ---------- 信任条 ---------- */
.stats{ border-bottom:1px solid var(--line); background:#fff; }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.stats-grid .it{ padding:24px 6px; text-align:center; }
.stats-grid .it .num{
  display:block; font-size:29px; font-weight:800; line-height:1.1;
  background:var(--brand-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stats-grid .it .lb{ display:block; margin-top:6px; font-size:13px; color:var(--muted); }
.stats-note{ padding:0 0 20px; font-size:12.5px; color:var(--muted); text-align:center; }

/* ---------- 区块 ---------- */
.section{ padding-top:66px; padding-bottom:66px; }
.section.alt{ background:#fff; }
.sec-head{ text-align:center; max-width:760px; margin:0 auto 36px; }
.sec-head h2{ font-size:29px; color:var(--ink); letter-spacing:.5px; line-height:1.36; }
.sec-head .sec-head-p{ margin-top:13px; font-size:15px; color:var(--muted); }
.sec-title{ display:flex; align-items:center; gap:11px; margin-bottom:22px; }
.sec-title i{ width:6px; height:24px; border-radius:3px; background:var(--brand-grad); }
.sec-title h2{ font-size:23px; color:var(--ink); letter-spacing:.4px; }

/* ---------- 能力卡 ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card{
  display:flex; flex-direction:column; padding:26px 24px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 8px 22px rgba(94,66,158,.06); transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(94,66,158,.12); }
.card .ico{
  width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  font-size:19px; color:#fff; background:var(--brand-grad); margin-bottom:15px;
}
.card .ico.p{ background:linear-gradient(135deg,#FFAECB,#FF7FA8) }
.card .ico.m{ background:linear-gradient(135deg,#66E0BC,#2FBE92) }
.card h3{ font-size:17.5px; color:var(--ink); margin-bottom:9px; }
.card p{ font-size:14.5px; line-height:1.85; }
.card-body{ display:flex; flex-direction:column; }
.card .use{
  margin-top:auto; padding-top:14px; border-top:1px dashed var(--line);
  font-size:13.5px; color:var(--pink-d); font-weight:700;
}

/* ---------- 预览图 ---------- */
.shots{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.shot{ display:flex; flex-direction:column; }
.shot img{
  width:100%; height:auto; border-radius:14px; border:1px solid var(--line);
  box-shadow:0 10px 26px rgba(94,66,158,.10); background:#fff;
}
.shot figcaption{ margin-top:11px; font-size:13.5px; color:var(--muted); text-align:center; }

/* ---------- 深度入口 ---------- */
.entries{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.entry{
  display:flex; flex-direction:column; padding:24px 22px; border-radius:var(--radius);
  background:linear-gradient(160deg,#FBF5FF,#F2EAFE); border:1px solid var(--line);
}
.entry h3{ font-size:17px; color:var(--ink); margin-bottom:9px; }
.entry p{ font-size:14px; line-height:1.82; }
.entry .go{ margin-top:auto; padding-top:14px; font-size:14px; font-weight:800; color:var(--taro-d); }
.entry .go::after{ content:" ›"; }

/* ---------- 评价 ---------- */
.reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.review{
  display:flex; flex-direction:column; padding:24px 22px; border-radius:var(--radius);
  background:var(--card); border:1px solid var(--line);
}
.review .stars{ color:#FFB93D; font-size:14px; letter-spacing:2px; margin-bottom:11px; }
.review p{ font-size:14.5px; line-height:1.86; }
.review .who{ margin-top:auto; padding-top:15px; border-top:1px dashed var(--line);
  font-size:13px; color:var(--muted); }

/* ---------- FAQ 速览 ---------- */
.faq-list{ display:grid; gap:12px; }
.prose .faq-list{ margin-top:18px; }
.faq-list details, .prose details{
  background:var(--card); border:1px solid var(--line); border-radius:13px;
  padding:0 18px; overflow:hidden;
}
.faq-list summary, .prose details > summary{
  list-style:none; cursor:pointer; position:relative;
  padding:17px 34px 17px 0; font-size:15.5px; font-weight:700; color:var(--ink);
}
.faq-list summary::-webkit-details-marker, .prose details > summary::-webkit-details-marker{ display:none; }
.faq-list summary::after, .prose details > summary::after{
  content:"+"; position:absolute; right:2px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; line-height:20px; text-align:center; border-radius:50%;
  background:var(--soft); color:var(--taro-d); font-size:15px; font-weight:800;
}
.faq-list details[open] summary::after, .prose details[open] > summary::after{ content:"–"; }
.faq-list .ans, .prose details .ans{ padding:0 0 19px; font-size:14.5px; line-height:1.9; color:var(--body); }
.faq-list details[open], .prose details[open]{ border-color:#DED0F8; }

/* ---------- CTA 条 ---------- */
.band{
  background:linear-gradient(150deg,#241147,#4A2483 48%,#7A3FB0 100%);
  border-radius:20px; padding:34px 34px; color:#E9E1F8;
  display:grid; grid-template-columns:1fr auto; gap:14px 30px; align-items:center;
}
.band h2{ font-size:24px; color:#fff; letter-spacing:.5px; }
.band .btn{ justify-self:end; }
.band-txt{ grid-column:1 / -1; font-size:14.5px; color:#CFC2EC; line-height:1.88; }
.band-txt a, .band p a{ color:#FFD9A8; border-bottom:1px dashed rgba(255,217,168,.55); }
.band-txt a:hover, .band p a:hover{ color:#fff; border-bottom-color:#fff; }

/* ---------- 内页 ---------- */
.page-hero{
  background:linear-gradient(140deg,#2A1450,#522B90 52%,#7C4CC0 100%);
  color:#E6DCF8; position:relative; overflow:hidden;
}
.page-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(420px 240px at 14% 20%, rgba(255,143,179,.28), transparent 70%),
    radial-gradient(420px 240px at 86% 80%, rgba(62,207,160,.20), transparent 72%),
    linear-gradient(0deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:auto,auto,22px 22px,22px 22px;
}
.page-hero .in{ position:relative; z-index:1; padding-top:52px; padding-bottom:56px; }
.crumb{ font-size:13px; color:#B9AAD8; margin-bottom:14px; }
.crumb a{ color:#D9CBF0; }
.crumb a:hover{ color:#fff; }
.page-hero h1{ font-size:31px; line-height:1.34; color:#fff; letter-spacing:.6px; font-weight:800; }
.page-hero .lead{ margin-top:15px; font-size:15px; line-height:1.9; color:#D4C8EE; max-width:820px; }
.page-hero .lead a, .page-hero .crumb a{ color:#C6F1DF; border-bottom:1px dashed rgba(198,241,223,.6); }
.page-hero .lead a:hover, .page-hero .crumb a:hover{ color:#fff; border-bottom-color:#fff; }

.layout{ display:block; }
.prose{
  width:100%; max-width:900px; min-width:0; margin:0 auto;
  padding:54px 22px 64px;
}
.prose > h2{
  margin-top:38px; margin-bottom:0; font-size:22px; color:var(--ink); letter-spacing:.3px;
  padding-left:14px; border-left:5px solid var(--taro);
}
.prose > h2:first-child{ margin-top:0; }
.prose .sec-body{ margin-top:15px; }
.prose .sec-body p, .prose > p{ font-size:15.4px; line-height:1.92; margin-bottom:13px; }
.prose .sec-body p:last-child{ margin-bottom:0; }
.prose .lead-p{ font-size:16px; color:var(--ink); }

.prose ul, .prose ol{ margin-top:15px; }
.prose ul > li, .prose ol > li{
  position:relative; padding-left:18px; margin-bottom:9px;
  font-size:15.2px; line-height:1.92;
}
.prose ul > li::before{
  content:""; position:absolute; left:2px; top:12px; width:6px; height:6px;
  border-radius:50%; background:var(--mint);
}
.prose ol{ counter-reset:pl; }
.prose ol > li{ counter-increment:pl; padding-left:31px; }
.prose ol > li::before{
  content:counter(pl); position:absolute; left:0; top:3px;
  width:21px; height:21px; line-height:21px; text-align:center; border-radius:50%;
  background:#EFE7FD; color:var(--taro-d); font-size:12.5px; font-weight:800;
}
.prose .rel-links li::before{ display:none; }

/* 步骤列表（编号徽章只写在直接子项上） */
.prose .steps{ counter-reset:st; margin-top:18px; }
.prose .steps > li{
  position:relative; padding-left:58px; padding-bottom:20px; margin-bottom:0;
  font-size:15.4px; line-height:1.9;
}
.prose .steps > li::before{
  counter-increment:st; content:counter(st);
  position:absolute; left:0; top:1px; width:36px; height:36px; line-height:36px;
  text-align:center; border-radius:11px; font-size:15px; font-weight:800;
  color:#fff; background:linear-gradient(135deg,#66E0BC,#2FBE92);
}
.prose .steps > li > b{ display:block; color:var(--ink); font-size:15.8px; margin-bottom:5px; }
.prose .steps > li > p{ font-size:15px; line-height:1.88; color:var(--body); }
.prose .steps > li > ul > li{
  position:relative; padding-left:17px; margin-bottom:7px;
  font-size:14.6px; line-height:1.86; color:var(--body);
}
.prose .steps > li > ul > li::before{
  content:""; position:absolute; left:2px; top:11px; width:6px; height:6px;
  border-radius:50%; background:var(--pink);
}
.prose .steps > li > ul > li::after{ content:none; }

/* 表格 */
.table-scroll{ overflow-x:auto; margin-top:20px; border:1px solid var(--line); border-radius:12px; background:#fff; }
table.cmp{ width:100%; min-width:680px; border-collapse:collapse; font-size:14.2px; }
table.cmp caption{ text-align:left; padding:12px 15px; font-size:13.5px; color:var(--muted); }
table.cmp th, table.cmp td{ padding:12px 15px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; line-height:1.72; }
table.cmp thead th{ background:var(--soft); color:var(--ink); font-size:13.8px; white-space:nowrap; }
table.cmp tbody tr:last-child th, table.cmp tbody tr:last-child td{ border-bottom:0; }
table.cmp tbody th{ font-weight:700; color:var(--ink); white-space:nowrap; }

/* 提示块 */
.tip{
  margin-top:22px; padding:17px 20px; border-radius:12px;
  background:#F3FCF8; border:1px solid #D3F0E3; font-size:14.6px; line-height:1.9; color:#2C5A49;
}
.tip b{ color:var(--mint-d); }
.note{
  margin-top:22px; padding:17px 20px; border-radius:12px;
  background:#FFF8EA; border:1px solid #FBE2B4; font-size:14.6px; line-height:1.9; color:#6B4A06;
}
.note b{ color:#B07A0B; }

/* 插图 */
.prose .shot{ margin:28px auto; max-width:368px; }
.prose .shot img{ width:100%; height:auto; border-radius:14px; border:1px solid var(--line); }
.prose .shot figcaption{ margin-top:10px; font-size:13px; color:var(--muted); text-align:center; }

/* 相关链接 */
.prose .rel-links{ margin-top:26px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.prose .rel-links li{ padding-left:0; margin-bottom:0; }
.prose .rel-links a{
  display:block; padding:16px 18px; border-radius:12px; background:var(--soft);
  font-size:14.4px; font-weight:700; color:var(--taro-d); border:1px solid var(--line);
}
.prose .rel-links a:hover{ background:#EEE5FE; color:var(--pink-d); }

/* ---------- 页脚 ---------- */
.site-footer{ background:#1F1140; color:#B7A9D6; padding-top:52px; font-size:14px; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:34px; }
.footer-col h4{ font-size:15px; color:#fff; margin-bottom:15px; letter-spacing:.5px; }
.footer-col p{ font-size:13.6px; line-height:1.9; color:#A493C9; }
.footer-col ul{ display:grid; gap:9px; }
.footer-col a{ display:block; color:#B7A9D6; font-size:13.8px; }
.footer-col a:hover{ color:#fff; }
.footer-col .footer-dl{
  display:inline-flex; align-items:center; gap:7px; margin-top:6px;
  padding:10px 20px; border-radius:22px; font-size:14px; font-weight:800;
  color:var(--cta-ink); background:var(--cta);
}
.footer-col .footer-dl:hover{ color:var(--cta-ink); filter:brightness(1.05); }
.footer-bot{
  margin-top:40px; padding:22px 0 26px; border-top:1px solid #33225C;
  font-size:13px; color:#9481BC; line-height:1.9;
}
.footer-bot .disc{ margin-top:8px; font-size:12.8px; color:#8878AC; }

/* ---------- 渐显 ---------- */
.reveal{ transition:opacity .6s ease, transform .6s ease; }
.js .reveal{ opacity:0; transform:translateY(18px); }
.js .reveal.is-in{ opacity:1; transform:none; }
@media print{ .js .reveal, .reveal{ opacity:1 !important; transform:none !important; } }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js .reveal, .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .card, .btn{ transition:none !important; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; gap:34px; padding-top:52px; padding-bottom:58px; text-align:center; }
  .hero h1{ font-size:33px; }
  .hero-lead{ margin-left:auto; margin-right:auto; }
  .hero-actions{ justify-content:center; }
  .hero-visual{ order:2; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .shots{ grid-template-columns:repeat(3,1fr); }
  .entries{ grid-template-columns:repeat(2,1fr); }
  .reviews{ grid-template-columns:1fr; }
  .prose .rel-links{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:28px; }
  .band{ grid-template-columns:1fr; gap:12px; }
  .band .btn{ justify-self:start; }
  .sec-head h2{ font-size:25px; }
  .section{ padding-top:52px; padding-bottom:52px; }
}

@media (max-width: 620px){
  .header-inner{ flex-wrap:wrap; min-height:0; padding-top:10px; padding-bottom:10px; gap:8px; }
  .brand{ width:100%; }
  .brand-name .sub{ display:none; }
  .nav{ width:100%; margin-left:0; flex-wrap:wrap; gap:0; justify-content:flex-start; }
  .nav a{ flex:0 0 33.3333%; text-align:center; padding:8px 0; font-size:14.5px; white-space:nowrap; }
  .nav .header-cta{ display:none; }

  .hero-grid{ padding-top:38px; padding-bottom:44px; gap:26px; }
  .hero h1{ font-size:27px; }
  .hero-lead{ font-size:14.6px; }
  .hero-actions{ gap:11px; }
  .btn{ padding:12px 22px; font-size:14.8px; }
  .phone-stage{ gap:12px; }
  .phone{ width:44vw; max-width:196px; }
  .phone.small{ width:30vw; max-width:132px; }

  .stats-grid .it{ padding:18px 4px; }
  .stats-grid .it .num{ font-size:24px; }
  .cards{ grid-template-columns:1fr; }
  .shots{ grid-template-columns:repeat(2,1fr); gap:13px; }
  .shot img{ border-radius:11px; }
  .shot figcaption{ font-size:12.6px; margin-top:8px; }
  .entries{ grid-template-columns:1fr; }
  .section{ padding-top:44px; padding-bottom:44px; }
  .sec-head{ margin-bottom:26px; }
  .sec-head h2{ font-size:22px; }
  .sec-title h2{ font-size:20px; }
  .band{ padding:26px 22px; }
  .band h2{ font-size:20px; }

  .page-hero .in{ padding-top:36px; padding-bottom:40px; }
  .page-hero h1{ font-size:23px; }
  .page-hero .lead{ font-size:14.4px; }
  .prose{ padding:38px 22px 46px; }
  .prose > h2{ font-size:19.5px; margin-top:30px; }
  .prose .sec-body p, .prose > p{ font-size:15px; }
  .prose .steps > li{ padding-left:48px; }
  .prose .steps > li > b{ font-size:15.2px; }
  .footer-grid{ grid-template-columns:1fr; gap:24px; }
}