@charset "utf-8";
/* ==========================================================
   苏州飓嘉澄科技有限公司 · 常见问题 FAQ 页
   依赖 css/home.css（设计变量 --ink / --gold / --wrap / --ease 等）
   视觉与首页、产品中心、关于我们保持一致，配色全部走主题变量（bluegold / apple_tech）
   ========================================================== */

/* ---------- 主体 ---------- */
.fsec{background:var(--paper2);padding:80px 0 96px;}
.fwrap{max-width:1180px;margin:0 auto;display:flex;align-items:flex-start;gap:36px;}
.fside{flex:none;width:222px;position:sticky;top:96px;}
.fmain{flex:1;min-width:0;}

/* ---------- 左侧竖排分类导航（与顶部分类联动） ---------- */
.fside-t{font-size:12px;letter-spacing:.12em;color:var(--muted);margin:0 4px 14px;text-transform:uppercase;}
.fside button{
  display:block;width:100%;text-align:left;font-family:inherit;cursor:pointer;
  padding:13px 16px;margin-bottom:8px;font-size:14.5px;letter-spacing:.02em;color:var(--text);
  background:var(--paper);border:1px solid var(--line);border-left:3px solid transparent;
  transition:all .3s var(--ease);
}
.fside button:hover{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 45%,var(--line));}
.fside button.on{
  color:var(--ink);font-weight:600;background:color-mix(in srgb,var(--gold) 12%,var(--paper));
  border-color:color-mix(in srgb,var(--gold) 45%,var(--line));border-left-color:var(--gold);
}

/* ---------- 顶部分类筛选（与左侧联动） ---------- */
.fcat{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:42px;}
.fcat button{
  font-family:inherit;cursor:pointer;
  padding:11px 24px;font-size:14.5px;letter-spacing:.04em;color:var(--text);
  background:var(--paper);border:1px solid var(--line);
  transition:all .3s var(--ease);
}
.fcat button:hover{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 45%,var(--line));}
.fcat button.on{
  color:var(--ink);border-color:transparent;
  background:var(--gold);
  box-shadow:0 10px 24px color-mix(in srgb,var(--gold) 30%,transparent);
}

/* ---------- 手风琴 ---------- */
.flist{display:flex;flex-direction:column;gap:14px;}
.fitem{
  background:var(--paper);border:1px solid var(--line);overflow:hidden;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.fitem.open{border-color:color-mix(in srgb,var(--gold) 45%,var(--line));box-shadow:0 18px 40px rgba(12,20,17,.08);}
.fq{
  display:flex;align-items:center;gap:16px;cursor:pointer;
  padding:20px 24px;user-select:none;
}
.fq .qb{
  flex:none;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--ink),var(--ink3));
  color:var(--gold2);font-size:15px;font-weight:600;font-style:italic;
}
.fq .qt{flex:1;font-size:16.5px;font-weight:600;color:var(--text);line-height:1.6;transition:color .3s;}
.fitem.open .fq .qt,.fq:hover .qt{color:var(--gold);}
.fq .arw{
  flex:none;width:18px;height:18px;position:relative;transition:transform .35s var(--ease);
  color:var(--muted);
}
.fq .arw::before,.fq .arw::after{
  content:'';position:absolute;top:8px;width:11px;height:2px;background:currentColor;border-radius:2px;
}
.fq .arw::before{left:0;transform:rotate(45deg);}
.fq .arw::after{right:0;transform:rotate(-45deg);}
.fitem.open .fq .arw{transform:rotate(180deg);color:var(--gold);}

.fa{
  max-height:0;overflow:hidden;
  transition:max-height .4s var(--ease);
}
.fa-in{padding:0 24px 22px 70px;font-size:15px;line-height:2;color:var(--muted);}
.fa-in b,.fa-in strong{color:var(--ink);font-weight:600;}

/* ---------- 分组小标题 & AI 角标（后台 GEO FAQ 追加数据源） ---------- */
.grp-t{
  display:flex;align-items:center;gap:10px;
  font-size:13px;color:var(--muted);letter-spacing:.06em;
  margin:26px 0 12px;
}
.grp-t::after{content:'';flex:1;height:1px;background:var(--line);}
.grp-t b{color:var(--gold);font-weight:700;}
.flist > .grp-t:first-child{margin-top:0;}
.tag-ai{
  display:inline-block;vertical-align:middle;font-weight:500;letter-spacing:.02em;
  background:linear-gradient(135deg,#2E5A4A,#3E7A64);color:#fff;
  font-size:11px;padding:2px 8px;border-radius:3px;margin-left:8px;
}

/* ---------- 详情页投放的问答区块（产品页 / 案例页复用） ---------- */
.pfaq{background:var(--paper2);padding:80px 0 90px;}
.pother + .pfaq{margin-top:-176px;}
.pfaq .flist{max-width:1000px;margin:0 auto;}
.pfaq .pnote a{color:var(--gold);border-bottom:1px solid color-mix(in srgb,var(--gold) 45%,var(--line));padding-bottom:2px;}
.pfaq .pnote a:hover{color:var(--ink);border-color:var(--ink);}
.pfaq .pnote b{font-weight:600;}

/* ---------- 响应式：两栏 → 单栏 ---------- */
@media (max-width:880px){
  .fwrap{display:block;max-width:1000px;}
  .fside{display:none;}
  .fcat{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px;}
  .fcat button{flex:none;}
}
@media (max-width:768px){
  .fsec{padding:56px 0 64px;}
  .fq{padding:16px 18px;gap:12px;}
  .fq .qt{font-size:15.5px;}
  .fa-in{padding:0 18px 18px 60px;font-size:14.5px;}
  .pfaq{padding:56px 0 64px;}
  .pother + .pfaq{margin-top:-110px;}
}