/* ============================================================
   page-fuwu.css — 建站服务总览 fuwu.html 独有样式
   签名布局：目录式左右锚点（竖锚目录 + 分组卡片流 + 服务地图横卷）
   命名空间：body.page-fuwu
   ============================================================ */

/* ---------- 1. Hero 装饰 ---------- */
body.page-fuwu .svc-hero::after{
  content:"";position:absolute;right:-80px;top:-80px;width:380px;height:380px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(197,174,239,.35),transparent 70%);
}
body.page-fuwu .svc-hero h1{max-width:780px}

/* ---------- 2. 服务地图横卷卡片 ---------- */
body.page-fuwu .map-card{
  flex:0 0 auto;width:230px;display:block;
  background:#fff;border:1px solid var(--c-line);border-radius:var(--radius-md);
  overflow:hidden;box-shadow:var(--shadow-card);
  transition:transform .35s var(--ease),border-color .35s;
}
body.page-fuwu .map-card:hover{transform:translateY(-6px);border-color:var(--c-purple-300)}
body.page-fuwu .map-card img{width:100%;height:150px;object-fit:cover}
body.page-fuwu .map-card span{
  display:block;padding:12px 16px;font-weight:700;color:var(--c-ink);font-size:14.5px;
}

/* ---------- 3. 左右锚点布局 ---------- */
body.page-fuwu .anchor-layout{
  display:grid;grid-template-columns:220px 1fr;gap:44px;align-items:start;
}
body.page-fuwu .anchor-nav{
  position:sticky;top:96px;
  background:#fff;border:1px solid var(--c-line);border-radius:var(--radius-lg);
  padding:22px 18px;box-shadow:var(--shadow-card);
}
body.page-fuwu .anchor-nav h3{
  font-size:14px;letter-spacing:.12em;color:var(--c-muted);margin-bottom:14px;
  padding-bottom:12px;border-bottom:1px solid var(--c-line);
}
body.page-fuwu .anchor-nav nav{display:flex;flex-direction:column;gap:4px}
body.page-fuwu .anchor-nav nav a{
  padding:10px 14px;border-radius:10px;font-size:14.5px;font-weight:600;color:var(--c-text);
  transition:background .25s,color .25s;
}
body.page-fuwu .anchor-nav nav a:hover{background:var(--c-bg-pink);color:var(--c-ink)}
body.page-fuwu .anchor-main{display:flex;flex-direction:column;gap:44px;scroll-margin-top:90px}
body.page-fuwu .svc-group{scroll-margin-top:90px}
body.page-fuwu .svc-group-title{
  display:flex;align-items:center;gap:12px;font-size:19px;margin-bottom:18px;
}
body.page-fuwu .group-tag{
  font-size:12px;font-weight:700;letter-spacing:.08em;color:#fff;
  background:var(--grad-main);padding:5px 14px;border-radius:999px;flex:none;
}
body.page-fuwu .svc-cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
body.page-fuwu .svc-card{
  display:block;background:#fff;border:1px solid var(--c-line);border-radius:var(--radius-md);
  padding:22px 20px;box-shadow:var(--shadow-card);
  transition:transform .3s var(--ease),border-color .3s;
}
body.page-fuwu .svc-card:hover{transform:translateY(-5px);border-color:var(--c-pink-300)}
body.page-fuwu .svc-card h4{font-size:16px;margin-bottom:8px}
body.page-fuwu .svc-card p{font-size:13.5px;min-height:66px}
body.page-fuwu .svc-link{
  display:inline-block;margin-top:12px;font-size:13px;font-weight:700;color:var(--c-purple-400);
}

/* ---------- 4. 技术底座 ---------- */
body.page-fuwu .tech-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
body.page-fuwu .tech-card{
  background:var(--grad-soft);border:1px solid var(--c-line);border-radius:var(--radius-lg);
  padding:26px 22px;
}
body.page-fuwu .tech-card h4{margin-bottom:10px;font-size:16px}
body.page-fuwu .tech-card p{font-size:13.5px}

/* ---------- 5. 流程横卷区 ---------- */
body.page-fuwu .flow-wrap{
  display:grid;grid-template-columns:1fr 1.2fr;gap:36px;align-items:center;
}
body.page-fuwu .flow-wrap img{
  border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);width:100%;height:auto;
}
body.page-fuwu .flow-steps{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
body.page-fuwu .flow-steps li{
  background:#fff;border:1px solid var(--c-line);border-radius:var(--radius-md);
  padding:14px 18px;box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;gap:2px;
}
body.page-fuwu .flow-steps strong{font-size:14.5px;color:var(--c-ink)}
body.page-fuwu .flow-steps span{font-size:12.5px;color:var(--c-muted)}

/* ---------- 6. FAQ 摘要 ---------- */
body.page-fuwu .faq-mini{display:grid;grid-template-columns:1fr 1fr;gap:18px}
body.page-fuwu .faq-item{
  background:#fff;border:1px solid var(--c-line);border-radius:var(--radius-md);
  padding:18px 22px;box-shadow:var(--shadow-card);
}
body.page-fuwu .faq-item summary{
  cursor:pointer;font-weight:700;color:var(--c-ink);font-size:15px;list-style:none;
  display:flex;align-items:center;gap:8px;
}
body.page-fuwu .faq-item summary::before{
  content:"Q";flex:none;width:22px;height:22px;border-radius:8px;
  background:var(--c-purple-100);color:var(--c-purple-400);
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;
}
body.page-fuwu .faq-item p{margin-top:10px;font-size:13.5px}
body.page-fuwu .faq-item a{color:var(--c-purple-400);font-weight:600;border-bottom:1px dashed var(--c-purple-300)}

/* ---------- 7. CTA ---------- */
body.page-fuwu .cta-band{background:var(--grad-dark);padding:72px 0;text-align:center}
body.page-fuwu .cta-in h2{color:#fff}
body.page-fuwu .cta-in h2 .grad-text{
  background:linear-gradient(120deg,#F2A6CC,#C5AEEF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
body.page-fuwu .cta-in p{color:#C9BBD3;max-width:640px;margin:16px auto 0}
body.page-fuwu .cta-buttons{margin-top:28px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
body.page-fuwu .cta-buttons .btn-ghost{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}

/* ---------- 8. 响应式 ---------- */
@media (max-width:1100px){
  body.page-fuwu .anchor-layout{grid-template-columns:1fr;gap:28px}
  body.page-fuwu .anchor-nav{position:static}
  body.page-fuwu .anchor-nav nav{flex-direction:row;flex-wrap:wrap}
  body.page-fuwu .tech-grid{grid-template-columns:repeat(2,1fr)}
  body.page-fuwu .flow-wrap{grid-template-columns:1fr}
}
@media (max-width:768px){
  body.page-fuwu .svc-cards{grid-template-columns:1fr}
  body.page-fuwu .faq-mini{grid-template-columns:1fr}
  body.page-fuwu .map-card{width:190px}
  body.page-fuwu .map-card img{height:120px}
}
@media (max-width:480px){
  body.page-fuwu .tech-grid{grid-template-columns:1fr}
  body.page-fuwu .flow-steps{grid-template-columns:1fr}
}