/* ============================================================
   花流服务内页公用样式 · svc.css
   适用：website.html / ai-search.html / content-system.html / managed-growth.html
   设计规则：近黑主色 + 白/暖灰底 + 品牌紫仅作强调；零卡片边框，细线分割；图片做结构骨架
   ============================================================ */

:root{
  --ink:#14141A;
  --ink-2:#3C3C46;
  --muted:#7C7C86;
  --faint:#A8A8B2;
  --line:#E2E0DA;
  --line-2:#EFEEE9;
  --bg:#FFFFFF;
  --bg-warm:#F6F5F1;
  --bg-dark:#111116;
  --brand:#4B3F9E;
  --brand-2:#6B5CC4;
  --brand-soft:#EDEAF8;
  --serif:"Noto Serif SC","Songti SC","STSong",Georgia,serif;
  --ff:"PingFang SC","HarmonyOS Sans SC","Source Han Sans SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --ff-num:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --w:1200px;
}
*{box-sizing:border-box;}
body.ws2{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--ff);
  font-size:14px;line-height:1.8;-webkit-font-smoothing:antialiased;
}
body.ws2 img{display:block;max-width:100%;}
.wrap{max-width:var(--w);margin:0 auto;padding:0 32px;}

/* ---------- 通用排版 ---------- */
.sec{padding:118px 0 122px;}
.sec--warm{background:var(--bg-warm);}
.sec--tight{padding:88px 0;}
.eyebrow{
  display:flex;align-items:center;gap:14px;
  font-family:var(--ff-num);font-size:12px;letter-spacing:.16em;color:var(--muted);
  text-transform:uppercase;margin:0 0 26px;
}
.eyebrow::before{content:"";width:36px;height:1px;background:currentColor;opacity:.55;}
.sec--dark .eyebrow,.cta .eyebrow{color:rgba(255,255,255,.62);}
h2.ws2-h2{
  font-family:var(--serif);font-size:clamp(30px,3.5vw,46px);line-height:1.28;font-weight:700;
  letter-spacing:.004em;margin:0 0 22px;color:var(--ink);
}
.ws2-lead{font-size:13.5px;line-height:1.95;color:var(--ink-2);margin:0;max-width:36em;}

/* ---------- 按钮 ---------- */
.btn2{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 28px;font-size:13.5px;font-weight:600;letter-spacing:.02em;
  text-decoration:none;border-radius:2px;transition:background .18s,color .18s,border-color .18s;
}
.btn2--solid{background:var(--ink);color:#fff;}
.btn2--solid:hover{background:var(--brand);}
.btn2--line{border:1px solid var(--line);color:var(--ink);background:transparent;}
.btn2--line:hover{border-color:var(--ink);}
.btn2--light{background:#fff;color:var(--ink);}
.btn2--light:hover{background:var(--brand-soft);}
.btn2--ghost{border:1px solid rgba(255,255,255,.32);color:#fff;}
.btn2--ghost:hover{border-color:#fff;}

/* ---------- 服务切换条 ---------- */
.svcbar{border-bottom:1px solid var(--line);background:#fff;}
.svcbar .wrap{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.svcbar a{
  padding:17px 24px;font-size:14px;color:var(--muted);text-decoration:none;
  white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .16s,border-color .16s;
}
.svcbar a:first-child{padding-left:0;}
.svcbar a:hover{color:var(--ink);}
.svcbar a.on{color:var(--ink);font-weight:700;border-bottom-color:transparent;background:var(--bg-warm);}

/* ---------- Hero ---------- */
.hero{padding:64px 0 0;background:var(--bg);}
.hero-grid{
  display:grid;grid-template-columns:1fr 440px;gap:72px;align-items:center;
  min-height:min(74vh,760px);padding-bottom:56px;
}
.hero h1{
  font-family:var(--serif);font-size:clamp(38px,5.2vw,72px);line-height:1.12;font-weight:700;
  letter-spacing:.004em;margin:0 0 24px;color:var(--ink);
}
.hero h1 .accent{color:var(--brand);}
.hero-sub{font-size:13.5px;line-height:1.95;color:var(--ink-2);margin:0 0 34px;max-width:34em;}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;}
.hero-fig{position:relative;}
.hero-fig img{
  width:100%;height:520px;object-fit:cover;border-radius:2px;
  filter:grayscale(.18) contrast(1.04);
}
.hero-fig figcaption{
  display:flex;align-items:baseline;gap:10px;
  margin-top:14px;font-family:var(--ff-num);font-size:12px;letter-spacing:.06em;color:var(--faint);
}
.hero-fig figcaption b{color:var(--ink-2);font-weight:600;}

/* ---------- 三条硬事实 ---------- */
.facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);}
.facts div{padding:34px 32px 34px 0;}
.facts div + div{padding-left:32px;border-left:1px solid var(--line);}
.facts dt{font-family:var(--ff-num);font-size:11px;letter-spacing:.14em;color:var(--faint);margin:0 0 10px;}
.facts dd{margin:0;font-size:14px;line-height:1.7;color:var(--ink);font-weight:600;}

/* ---------- 痛点：暗色满幅 ---------- */
.pain{position:relative;background:var(--bg-dark);color:#fff;padding:130px 0 120px;overflow:hidden;}
.pain-bg{position:absolute;inset:0;z-index:0;}
.pain-bg img{width:100%;height:100%;object-fit:cover;opacity:.34;filter:grayscale(.3);}
.pain-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(17,17,22,.72) 0%,rgba(17,17,22,.55) 45%,rgba(17,17,22,.92) 100%);
}
.pain .wrap{position:relative;z-index:1;}
.pain h2{font-family:var(--serif);font-size:clamp(26px,3.2vw,42px);line-height:1.32;font-weight:700;margin:0 0 60px;max-width:780px;}
.pain-list{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin:0;padding:0;list-style:none;}
.pain-list li{border-top:1px solid rgba(255,255,255,.22);padding-top:22px;}
.pain-list .n{font-family:var(--ff-num);font-size:12px;color:rgba(255,255,255,.5);letter-spacing:.1em;}
.pain-list h3{font-size:17px;font-weight:600;margin:14px 0 10px;color:#fff;}
.pain-list p{margin:0;font-size:13.5px;line-height:1.85;color:rgba(255,255,255,.68);}
.pain-concl{
  margin:70px 0 0;padding-top:32px;border-top:1px solid rgba(255,255,255,.22);
  font-family:var(--serif);font-size:clamp(19px,2.2vw,27px);line-height:1.6;font-weight:600;color:#fff;max-width:840px;
}

/* ---------- 对照表 ---------- */
.cmp{width:100%;border-collapse:collapse;margin-top:56px;}
.cmp th,.cmp td{
  text-align:left;padding:26px 28px 26px 0;vertical-align:top;
  border-bottom:1px solid var(--line);font-size:14px;line-height:1.8;
}
.cmp thead th{
  font-family:var(--ff-num);font-size:11.5px;letter-spacing:.14em;font-weight:500;
  color:var(--faint);text-transform:uppercase;padding-bottom:14px;border-bottom:1px solid var(--ink);
}
.cmp thead th.us{color:var(--brand);}
.cmp td:first-child{color:var(--faint);width:40%;}
.cmp td:last-child{color:var(--ink);font-weight:500;padding-left:28px;border-left:1px solid var(--line-2);}
.cmp-note{
  margin:36px 0 0;font-size:17px;font-weight:600;color:var(--ink);
  padding-left:20px;border-left:3px solid var(--brand);
}

/* ---------- 图文交替模块 ---------- */
.mod{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;padding:72px 0;border-bottom:1px solid var(--line);}
.mod:first-of-type{padding-top:64px;}
.mod:last-of-type{border-bottom:0;padding-bottom:0;}
.mod:nth-of-type(even) .mod-fig{order:-1;}
.mod-fig{position:relative;}
.mod-fig img{width:100%;height:420px;object-fit:cover;border-radius:2px;filter:grayscale(.25);}
.mod-fig .tag{
  position:absolute;left:0;top:0;background:var(--ink);color:#fff;
  font-family:var(--ff-num);font-size:11px;letter-spacing:.12em;padding:7px 12px;
}
.mod-num{font-family:var(--ff-num);font-size:12px;letter-spacing:.14em;color:var(--brand);margin:0 0 16px;display:block;}
.mod h3{font-family:var(--serif);font-size:clamp(21px,2.2vw,27px);line-height:1.42;font-weight:700;margin:0 0 16px;}
.mod p{font-size:13.5px;line-height:1.9;color:var(--ink-2);margin:0 0 16px;}
.mod ul{margin:0;padding:0;list-style:none;}
.mod li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.85;color:var(--ink-2);margin-bottom:9px;}
.mod li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:1px;background:var(--brand);}
.mod li b{color:var(--ink);font-weight:600;}
.deliv{margin-top:24px;padding-top:16px;border-top:1px solid var(--line-2);font-size:13.5px;line-height:1.75;color:var(--muted);}
.deliv b{color:var(--brand);font-weight:600;}

/* ---------- 编号纵向列表（GEO 四层等） ---------- */
.geo-stack{margin:28px 0 0;padding:0;list-style:none;}
.geo-stack li{
  display:flex;gap:16px;align-items:baseline;
  padding:15px 0;border-top:1px solid var(--line-2);font-size:15px;line-height:1.7;color:var(--ink-2);
}
.geo-stack li:last-child{border-bottom:1px solid var(--line-2);}
.geo-stack .g-n{font-family:var(--ff-num);font-size:11.5px;color:var(--brand);letter-spacing:.1em;flex:0 0 26px;}
.geo-stack b{color:var(--ink);font-weight:600;}

/* ---------- 横排步骤 ---------- */
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin:64px 0 0;padding:0;list-style:none;counter-reset:s;}
.steps li{padding:0 18px 0 0;border-top:1px solid var(--ink);position:relative;}
.steps li::before{
  counter-increment:s;content:"0" counter(s);
  display:block;font-family:var(--ff-num);font-size:12px;letter-spacing:.1em;
  color:var(--brand);padding:16px 0 12px;
}
.steps h3{font-size:16px;font-weight:600;margin:0 0 8px;}
.steps p{margin:0;font-size:13.5px;line-height:1.75;color:var(--muted);}
.steps--4{grid-template-columns:repeat(4,1fr);}
.steps--5{grid-template-columns:repeat(5,1fr);}

/* ---------- 三档分层 ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:56px;border-top:1px solid var(--ink);}
.plan{padding:32px 32px 36px 0;display:flex;flex-direction:column;}
.plan + .plan{padding-left:32px;border-left:1px solid var(--line);}
.plan-tag{font-family:var(--ff-num);font-size:11.5px;letter-spacing:.14em;color:var(--muted);display:block;margin-bottom:16px;}
.plan h3{font-family:var(--serif);font-size:21px;font-weight:700;margin:0 0 12px;}
.plan p{font-size:13.5px;line-height:1.85;color:var(--ink-2);margin:0 0 20px;min-height:54px;}
.plan ul{margin:0 0 26px;padding:0;list-style:none;}
.plan li{font-size:13.5px;line-height:1.8;color:var(--ink-2);padding:9px 0;border-bottom:1px solid var(--line);}
.plan .plan-foot{font-size:13px;line-height:1.7;color:var(--faint);margin:0;margin-top:auto;min-height:0;}
.plan--hot{background:var(--ink);color:#fff;padding-left:32px;padding-right:32px;}
.plan--hot .plan-tag{color:var(--brand-2);}
.plan--hot h3{color:#fff;}
.plan--hot p,.plan--hot li{color:rgba(255,255,255,.76);}
.plan--hot li{border-bottom-color:rgba(255,255,255,.14);}
.plan--hot .plan-foot{color:rgba(255,255,255,.46);}

/* ---------- 信任 ---------- */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:56px;margin-top:56px;}
.trust blockquote{margin:0;padding:0;}
.trust blockquote::before{
  content:"\201C";display:block;font-size:56px;line-height:.7;color:var(--brand);opacity:.28;
  font-family:Georgia,serif;margin-bottom:10px;
}
.trust h3{font-family:var(--serif);font-size:20px;font-weight:700;margin:0 0 12px;}
.trust p{margin:0;font-size:13.5px;line-height:1.85;color:var(--ink-2);}

/* ---------- 合规 ---------- */
.legal{margin-top:80px;padding-top:32px;border-top:1px solid var(--line);}
.legal h3{font-family:var(--ff-num);font-size:11.5px;letter-spacing:.14em;color:var(--faint);margin:0 0 20px;text-transform:uppercase;}
.legal ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 48px;}
.legal li{font-size:13.5px;line-height:1.8;color:var(--muted);}
.legal b{color:var(--ink-2);font-weight:600;}

/* ---------- CTA ---------- */
.cta{background:var(--bg-dark);color:#fff;padding:110px 0;}
.cta h2{font-family:var(--serif);font-size:clamp(28px,3.4vw,44px);line-height:1.3;font-weight:700;margin:0 0 18px;max-width:760px;}
.cta p{font-size:13.5px;line-height:1.95;color:rgba(255,255,255,.7);margin:0 0 36px;max-width:36em;}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:40px;}
  .hero-fig img{height:380px;}
  .mod{grid-template-columns:1fr;gap:36px;}
  .mod:nth-of-type(even) .mod-fig{order:0;}
  .mod-fig img{height:300px;}
  .steps,.steps--4,.steps--5{grid-template-columns:repeat(3,1fr);row-gap:36px;}
  .plans{grid-template-columns:1fr;}
  .plan{padding:28px 0;}
  .plan + .plan{padding-left:0;border-left:0;border-top:1px solid var(--line);}
  .plan--hot{padding-left:22px;padding-right:22px;}
  .plan p{min-height:0;}
  .trust{grid-template-columns:1fr;gap:40px;}
  .legal ul{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .wrap{padding:0 20px;}
  .sec,.sec--tight{padding:72px 0;}
  .hero{padding-top:44px;}
  .hero h1{font-size:34px;}
  .hero-sub{font-size:13.5px;}
  .hero-fig img{height:260px;}
  .svcbar a{padding:14px 16px;font-size:13px;}
  .facts{grid-template-columns:1fr;}
  .facts div{padding:24px 0;}
  .facts div + div{padding-left:0;border-left:0;border-top:1px solid var(--line-2);}
  .pain{padding:80px 0 72px;}
  .pain-list{grid-template-columns:1fr;gap:32px;}
  .pain h2{margin-bottom:44px;}
  .cmp th,.cmp td{padding:18px 12px 18px 0;font-size:14px;}
  .cmp td:last-child{padding-left:14px;}
  .mod{padding:48px 0;}
  .steps,.steps--4,.steps--5{grid-template-columns:repeat(2,1fr);}
  .cta{padding:76px 0;}
}

/* ============================================================
   列表页（案例墙 / 知识库）· 供 CMS 模板生成使用
   ============================================================ */
.wall-hero{padding:96px 0 0;}
.wall-hero h1{
  font-size:clamp(30px,4vw,52px);line-height:1.24;font-weight:700;
  letter-spacing:-.02em;margin:0 0 20px;max-width:820px;color:var(--ink);
}
.wall-sub{font-size:17px;line-height:1.9;color:var(--ink-2);margin:0;max-width:660px;}
.wall-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin:60px 0 0;padding:0;}
.wall-stats > div{padding:26px 24px 0 0;border-right:1px solid var(--line-2);}
.wall-stats > div:last-child{border-right:0;padding-right:0;}
.wall-stats dt{font-family:var(--ff-num);font-size:11px;letter-spacing:.14em;color:var(--faint);margin:0 0 10px;}
.wall-stats dd{margin:0;font-size:16px;font-weight:600;color:var(--ink);}
.wall-empty{color:var(--muted);padding:60px 0;}

/* 知识库列表 */
.kb-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink);}
.kb-row{
  display:grid;grid-template-columns:190px 1fr;gap:36px;align-items:center;
  padding:26px 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;transition:opacity .18s;
}
.kb-row:hover{opacity:.66;}
.kb-row-pic{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--bg-warm);}
.kb-row-pic img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2);}
.kb-row-pic img.placeholder{object-fit:contain;padding:16px;filter:none;}
.kb-row-body{display:block;}
.kb-row-date{display:block;font-family:var(--ff-num);font-size:12px;letter-spacing:.06em;color:var(--faint);margin-bottom:10px;}
.kb-row-title{display:block;font-size:19px;line-height:1.55;font-weight:600;color:var(--ink);margin-bottom:10px;}
.kb-row-more{display:inline-block;font-size:13px;color:var(--brand);font-weight:600;}

/* 案例墙 */
.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:52px 40px;}
.case-card{text-decoration:none;color:inherit;display:block;transition:opacity .18s;}
.case-card:hover{opacity:.72;}
.case-pic{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--bg-warm);margin-bottom:20px;}
.case-pic img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2);transition:transform .4s ease;}
.case-card:hover .case-pic img{transform:scale(1.03);}
.case-pic img.placeholder{object-fit:contain;padding:30px;filter:none;}
.case-body{display:block;}
.case-tag{display:block;font-family:var(--ff-num);font-size:11.5px;letter-spacing:.12em;color:var(--brand);margin-bottom:12px;}
.case-title{display:block;font-size:21px;line-height:1.45;font-weight:700;margin:0 0 8px;color:var(--ink);}
.case-client{display:block;font-size:14px;line-height:1.7;color:var(--muted);margin:0;}

@media (max-width:1024px){
  .wall-hero{padding:72px 0 0;}
  .kb-row{grid-template-columns:140px 1fr;gap:24px;}
  .case-grid{grid-template-columns:1fr;gap:40px;}
}
@media (max-width:640px){
  .wall-stats{grid-template-columns:1fr;}
  .wall-stats > div{border-right:0;border-bottom:1px solid var(--line-2);padding:18px 0;}
  .kb-row{grid-template-columns:110px 1fr;gap:16px;padding:20px 0;}
  .kb-row-title{font-size:16px;}
}

/* ---------- 全宽图带 ---------- */
.band{position:relative;height:420px;overflow:hidden;margin-bottom:112px;}
.band img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35);}
.band::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(17,17,22,.86) 0%,rgba(17,17,22,.42) 52%,rgba(17,17,22,.72) 100%);
}
.band-txt{position:absolute;inset:0;display:flex;align-items:center;z-index:1;}
.band-txt p{margin:0;color:#fff;font-size:clamp(18px,2.2vw,27px);line-height:1.6;font-weight:600;max-width:660px;}
.band-txt b{color:#CFC6FF;font-weight:600;}
@media (max-width:640px){.band{height:300px;}}