/* ============================================================
   faq.html 常见问题总览样式
   布局：全屏 Hero → 分类字母卡 → 双列手风琴组 → 电话横条 → 入口
   ============================================================ */

/* ---------- Hero ---------- */
.f-hero{
  position:relative;min-height:70vh;display:flex;align-items:center;
  padding:150px 0 90px;overflow:hidden;
}
.f-hero-bg{z-index:0}
.f-hero-veil{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(120deg,rgba(20,20,20,.82) 0%,rgba(20,20,20,.55) 60%,rgba(20,20,20,.35));
}
.f-hero-inner{position:relative;z-index:2;color:#fff;max-width:760px}
.f-hero .crumb{display:flex;align-items:center;gap:10px;font-size:13px;margin-bottom:22px;color:#E9E2D6}
.f-hero .crumb a{color:#E9E2D6}
.f-hero .crumb a:hover{color:var(--coffee-bright)}
.f-hero .crumb em{font-style:normal;color:var(--coffee-bright)}
.f-hero-title{font-size:clamp(38px,5.6vw,64px);font-weight:900;color:#fff;line-height:1.12;margin-bottom:20px}
.ht-gold{background:linear-gradient(120deg,#E9D3A8,#C9A87C);-webkit-background-clip:text;background-clip:text;color:transparent}
.f-hero-sub{font-size:16px;color:#EDE6DA;line-height:1.9;margin-bottom:32px}
.f-hero-cta{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- 分类字母卡 ---------- */
.f-cats{padding-bottom:40px}
.cat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:52px}
.cat-card{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);
  padding:30px 26px 26px;display:block;overflow:hidden;
  transition:all .4s cubic-bezier(.22,.68,.4,1);
}
.cat-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad-coffee);
  transform:scaleY(0);transform-origin:top;transition:transform .4s;
}
.cat-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:transparent}
.cat-card:hover::before{transform:scaleY(1)}
.cat-num{
  font-size:44px;font-weight:900;font-style:italic;font-family:Georgia,serif;
  color:var(--coffee-bg-2);line-height:1;margin-bottom:16px;display:block;
}
.cat-card h3{font-size:19px;margin-bottom:10px}
.cat-card p{font-size:13.5px;color:var(--text-2);line-height:1.8;margin-bottom:18px}
.cat-go{font-size:13px;font-weight:800;color:var(--coffee-deep)}

/* ---------- 手风琴组 ---------- */
.acc-wrap{display:grid;grid-template-columns:1fr 1fr;gap:36px 40px;max-width:1100px;margin:0 auto}
.acc-group-title{
  font-size:22px;font-weight:900;margin-bottom:18px;display:flex;align-items:center;gap:12px;
}
.acc-group-title span{
  font-size:12px;font-weight:800;letter-spacing:.2em;color:var(--coffee-deep);
  background:var(--coffee-bg);border:1px solid var(--line);
  padding:4px 12px;border-radius:100px;
}
.acc-item{
  background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:14px;
  overflow:hidden;transition:box-shadow .3s;
}
.acc-item.open{box-shadow:var(--shadow-md);border-color:var(--coffee-bright)}
.acc-head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  text-align:left;padding:18px 22px;font-size:15.5px;font-weight:700;color:var(--ink);
  background:transparent;
}
.acc-ic{
  position:relative;width:22px;height:22px;flex-shrink:0;border-radius:50%;
  background:var(--coffee-bg);transition:all .35s;
}
.acc-ic::before,.acc-ic::after{
  content:"";position:absolute;background:var(--coffee-deep);border-radius:2px;
  top:50%;left:50%;transform:translate(-50%,-50%);transition:transform .35s;
}
.acc-ic::before{width:10px;height:2px}
.acc-ic::after{width:2px;height:10px}
.acc-item.open .acc-ic{background:var(--grad-coffee)}
.acc-item.open .acc-ic::before,.acc-item.open .acc-ic::after{background:#fff}
.acc-item.open .acc-ic::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.acc-panel{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.22,.68,.4,1)}
.acc-panel p{padding:0 22px 20px;font-size:14.5px;color:var(--text-2);line-height:1.95}

/* ---------- 电话横条 ---------- */
.f-telband{
  background:var(--grad-ink);padding:56px 0;position:relative;overflow:hidden;
}
.f-telband::before{
  content:"";position:absolute;right:-80px;top:-80px;width:320px;height:320px;border-radius:50%;
  border:60px solid rgba(201,168,124,.12);
}
.telband-inner{display:flex;align-items:center;gap:26px;flex-wrap:wrap;position:relative;z-index:1}
.telband-text{flex:1;min-width:260px}
.telband-text h2{color:#fff;font-size:clamp(22px,3vw,32px);margin-bottom:6px}
.telband-text p{color:#B7AE9E;font-size:14px}

/* ---------- 底部入口 ---------- */
.link-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.link-entry{
  display:block;padding:26px 24px;border-radius:var(--radius-md);
  border:1px solid var(--line);background:#fff;transition:all .35s;
}
.link-entry:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--coffee)}
.link-entry b{display:block;font-size:18px;margin-bottom:8px}
.link-entry span{font-size:13px;color:var(--text-2)}

/* ---------- 响应式 ---------- */
@media (max-width:980px){
  .cat-row{grid-template-columns:1fr 1fr}
  .acc-wrap{grid-template-columns:1fr}
  .link-row{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .cat-row{grid-template-columns:1fr}
  .link-row{grid-template-columns:1fr}
}