/* ============================================================
   客流多 官网 —— 设计系统（首页 + 5 个子页共用）
   2026-09-23 晚 · 正式版：老板当天挑定首屏风格 **A 直白利益**
   · 底子来自 /site-demo/ 那套（老板点过头的配色与排版），正式版只加不改风格
   · 品牌主色橙、亮色底、克制的动效；移动端底部常驻拨打条（见 site.js）
   · ⚠ 全站**不放任何登录/后台入口**（老板要求：不开放注册、别让人顺着找后台）
   ============================================================ */
:root{
  --ink:#111827; --ink2:#414b5a; --ink3:#6b7280; --ink4:#9aa2ae;
  --line:#e8eaee; --line2:#f1f3f6;
  --brand:#ff5a1f; --brand2:#e14a12; --brand-soft:#fff4ee; --brand-line:#ffd9c7;
  --bg:#ffffff; --bg2:#f7f8fa; --bg3:#0f172a;
  --ok:#0e9f6e; --warn:#d97706;
  --r:16px; --r2:12px; --sh:0 4px 16px rgba(17,24,39,.06); --sh2:0 16px 48px rgba(17,24,39,.10);
  --w:1140px; --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); line-height:1.75;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:var(--brand); text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:var(--w); margin:0 auto; padding:0 22px}
.center{text-align:center}
.mt0{margin-top:0}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:6px}

/* ---------- 顶部（由 site.js 注入，多页共用） ---------- */
.nav{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.9); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.nav .in{display:flex; align-items:center; gap:20px; height:66px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; color:var(--ink); letter-spacing:.2px}
.brand i{width:34px;height:34px;border-radius:10px;font-style:normal;font-weight:800;color:#fff;
  display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,var(--brand),#ffa273);
  box-shadow:0 4px 12px rgba(255,90,31,.28)}
.nav .links{display:flex; gap:4px; margin-left:8px}
.nav .links a{color:var(--ink2); font-size:15px; padding:8px 12px; border-radius:9px; transition:.16s var(--ease)}
.nav .links a:hover{background:var(--bg2); color:var(--ink)}
.nav .links a.on{color:var(--brand); background:var(--brand-soft); font-weight:700}
.nav .sp{flex:1}
.nav .tel{font-size:14.5px; color:var(--ink2); white-space:nowrap}
.nav .tel b{color:var(--ink); font-size:16px; letter-spacing:.4px}
.nav .burger{display:none; border:1px solid var(--line); background:#fff; border-radius:10px; width:40px; height:38px; font-size:18px; cursor:pointer}
@media (max-width:1000px){
  .nav .links{display:none; position:absolute; left:0; right:0; top:66px; background:#fff; border-bottom:1px solid var(--line);
    flex-direction:column; padding:8px 14px 14px; gap:2px}
  .nav .links.open{display:flex}
  .nav .links a{padding:11px 12px}
  .nav .burger{display:block}
  .nav .tel{display:none}
}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:12px;
  padding:13px 22px; font-size:15.5px; font-weight:700; border:1px solid var(--line); background:#fff; color:var(--ink);
  cursor:pointer; transition:.18s var(--ease); white-space:nowrap}
.btn:hover{transform:translateY(-1px); box-shadow:var(--sh)}
.btn.p{background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 6px 18px rgba(255,90,31,.24)}
.btn.p:hover{background:var(--brand2); border-color:var(--brand2)}
.btn.dark{background:var(--bg3); border-color:var(--bg3); color:#fff}
.btn.ghost{background:transparent; border-color:var(--brand-line); color:var(--brand)}
.btn.sm{padding:9px 15px; font-size:14px; border-radius:10px}
.btn.block{width:100%}

/* ---------- 通用排版 ---------- */
section{padding:74px 0}
section.tight{padding:52px 0}
section.alt{background:var(--bg2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
section.dark{background:var(--bg3); color:#e8ecf4}
section.dark h2,section.dark h3{color:#fff}
section.dark .sub{color:#a7b0c0}
h1{font-size:clamp(30px,4.4vw,52px); line-height:1.16; letter-spacing:-1.2px; margin:16px 0 16px; font-weight:800}
h2{font-size:clamp(22px,2.7vw,32px); line-height:1.28; letter-spacing:-.5px; margin:12px 0 10px; font-weight:800}
h3{font-size:18px; margin:0 0 8px; font-weight:750}
h4{font-size:15.5px; margin:0 0 6px}
p{margin:0 0 14px; color:var(--ink2); font-size:15.5px}
.lead{font-size:clamp(16px,1.7vw,19px); color:var(--ink2); max-width:760px}
.sub{color:var(--ink3); font-size:15.5px; max-width:800px}
.eyebrow{display:inline-block; font-size:13px; font-weight:800; letter-spacing:.6px; color:var(--brand);
  background:var(--brand-soft); border:1px solid var(--brand-line); border-radius:999px; padding:5px 13px}
.mono{font-variant-numeric:tabular-nums}
.tiny{font-size:13px; color:var(--ink3)}
.mark{color:var(--ink); font-weight:700}
.hl{background:linear-gradient(180deg,transparent 62%,#ffe0cf 62%); padding:0 2px}
.grid{display:grid; gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){ .g2,.g3,.g4{grid-template-columns:1fr} }
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:22px; transition:.2s var(--ease)}
.card:hover{box-shadow:var(--sh); transform:translateY(-2px)}
.card.flat:hover{transform:none; box-shadow:none}
.card p:last-child{margin-bottom:0}
.icon{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:var(--brand-soft); color:var(--brand); font-size:19px; margin-bottom:12px; font-weight:800}
ul.clean{margin:10px 0 0; padding:0; list-style:none}
ul.clean li{position:relative; padding-left:24px; margin:8px 0; color:var(--ink2); font-size:15px}
ul.clean li:before{content:""; position:absolute; left:4px; top:9px; width:11px; height:6px;
  border-left:2.5px solid var(--brand); border-bottom:2.5px solid var(--brand); transform:rotate(-45deg)}
table{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
th,td{padding:14px 16px; border-bottom:1px solid var(--line); text-align:left; font-size:14.8px; color:var(--ink2)}
th{background:var(--bg2); font-size:13.5px; color:var(--ink3); font-weight:700}
tr:last-child td{border-bottom:0}
details{background:#fff; border:1px solid var(--line); border-radius:var(--r2); padding:15px 18px; margin-bottom:10px}
details summary{cursor:pointer; font-weight:700; font-size:15.5px}
details p{margin:10px 0 0; font-size:15px}
.pill{display:inline-block; font-size:13.5px; color:var(--ink2); background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:6px 13px; margin:0 8px 8px 0}
.pill.solid{background:var(--brand-soft); border-color:var(--brand-line); color:var(--brand2); font-weight:600}
.ph{display:inline-block; font-size:11.5px; color:var(--ink3); background:var(--line2); border-radius:6px; padding:2px 7px; vertical-align:middle}
.note{font-size:13.5px; color:var(--ink3); border-left:3px solid var(--brand-line); padding-left:12px; margin-top:16px}

/* ---------- 首屏 ---------- */
.hero{padding:64px 0 56px; position:relative; overflow:hidden; background:
  radial-gradient(760px 380px at 84% -12%, #fff0e7 0%, rgba(255,240,231,0) 62%),
  radial-gradient(520px 300px at 4% 4%, #f3f7ff 0%, rgba(243,247,255,0) 60%)}
.hero.slim{padding:40px 0 34px}
.hero .in{display:grid; grid-template-columns:1.06fr .94fr; gap:44px; align-items:center}
@media (max-width:1000px){ .hero .in{grid-template-columns:1fr; gap:28px} }
.hero .cta{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:24px}
.hero .facts{display:flex; gap:26px; flex-wrap:wrap; margin-top:26px}
.hero .facts div{min-width:104px}
.hero .facts b{display:block; font-size:25px; font-weight:800; letter-spacing:-.6px; color:var(--ink)}
.hero .facts b em{font-style:normal; color:var(--brand); font-size:15px; margin-left:2px}
.hero .facts span{font-size:13px; color:var(--ink3)}

/* ---------- 仿真示意（不依赖外图；屏里的画面用真实广告图） ---------- */
.mock{position:relative; border-radius:18px; padding:16px; border:1px solid var(--line);
  background:linear-gradient(180deg,#f4f5f7,#e9ebef); box-shadow:var(--sh2)}
.mock:after{content:""; position:absolute; inset:8px; border-radius:14px; pointer-events:none;
  background:linear-gradient(118deg, rgba(255,255,255,.6), rgba(255,255,255,0) 34%, rgba(255,255,255,0) 62%, rgba(255,255,255,.3))}
.scr{position:relative; border-radius:12px; overflow:hidden; background:#0b1020; box-shadow:0 0 0 6px #111827, 0 0 40px rgba(255,140,70,.35)}
.scr img{width:100%}
.scr .cap{position:absolute; left:10px; bottom:8px; font-size:11px; color:#fff; background:rgba(0,0,0,.45); border-radius:6px; padding:2px 7px}
.mock .stand{height:12px; width:46%; margin:14px auto 0; border-radius:0 0 10px 10px; background:linear-gradient(180deg,#cbd5e1,#98a2b3)}
.ui{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; box-shadow:var(--sh)}
.ui .bar{height:34px; background:var(--bg2); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:6px; padding:0 12px}
.ui .bar i{width:9px;height:9px;border-radius:50%;background:#dfe3e8}
.ui .bd{display:grid; grid-template-columns:116px 1fr; min-height:224px}
.ui .side{border-right:1px solid var(--line); background:var(--bg2); padding:12px}
.ui .side u{display:block; height:9px; border-radius:5px; background:var(--line2); margin:9px 0}
.ui .side u.on{background:var(--brand); opacity:.85}
.ui .main{padding:14px}
.ui .kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px}
.ui .kpis div{border:1px solid var(--line); border-radius:10px; padding:10px}
.ui .kpis b{display:block; font-size:18px; font-weight:800}
.ui .kpis s{display:block; height:8px; width:58%; background:var(--line2); border-radius:5px; margin-top:6px; text-decoration:none}
.chart{display:flex; align-items:flex-end; gap:7px; height:94px; padding:8px; border:1px solid var(--line); border-radius:10px}
.chart i{flex:1; display:block; border-radius:4px 4px 0 0; background:linear-gradient(180deg,var(--brand),#ffd0b8)}
.phone{width:200px; margin:0 auto; border-radius:26px; padding:9px; background:#0f172a; box-shadow:var(--sh2)}
.phone .s{border-radius:20px; background:var(--bg2); padding:11px}
.phone .s p{margin:8px 0; height:10px; border-radius:6px; background:var(--line2)}
.phone .s p.t{width:52%; background:var(--line)}
.phone .s .go{margin-top:10px; text-align:center; font-size:12.5px; font-weight:700; color:#fff; background:var(--brand); border-radius:10px; padding:8px}
.wall{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.wall div{border:1px solid var(--line); border-radius:var(--r2); padding:14px; background:#fff}
.wall b{display:block; margin-bottom:4px}
.wall span{font-size:13.5px; color:var(--ink3)}

/* ---------- 表格/价格卡 ---------- */
.plan{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:22px; display:flex; flex-direction:column}
.plan.best{border-color:var(--brand); box-shadow:0 14px 40px rgba(255,90,31,.14); position:relative}
.plan.best:before{content:"最常选"; position:absolute; top:-11px; left:22px; background:var(--brand); color:#fff;
  font-size:12px; font-weight:800; border-radius:999px; padding:3px 10px}
.plan h3{margin-top:6px}
.plan .price{font-size:15px; color:var(--ink3); margin:6px 0 14px}
.plan ul{margin:0 0 18px; padding:0; list-style:none}
.plan li{font-size:14.6px; color:var(--ink2); padding:6px 0 6px 22px; position:relative}
.plan li:before{content:"·"; position:absolute; left:8px; color:var(--brand); font-weight:900}

/* ---------- CTA 条 ---------- */
.band{background:linear-gradient(120deg,#111827,#26303f); color:#fff; border-radius:20px; padding:34px 30px;
  display:flex; align-items:center; gap:26px; flex-wrap:wrap; justify-content:space-between}
.band h2{color:#fff; margin:0 0 6px}
.band p{color:#b9c2d0; margin:0}

/* ---------- 页脚（由 site.js 注入） ---------- */
.foot{background:#0f172a; color:#c3cbd8; padding:44px 0 26px; margin-top:0}
.foot .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:26px}
@media (max-width:1000px){ .foot .cols{grid-template-columns:1fr 1fr} }
.foot b{color:#fff; display:block; margin-bottom:10px; font-size:15px}
.foot a{color:#c3cbd8; font-size:14px; line-height:2.1}
.foot a:hover{color:#fff}
.foot .sm{font-size:13.5px; color:#8d98a8; line-height:2}
.foot .base{margin-top:26px; padding-top:16px; border-top:1px solid #1e293b; font-size:13px; color:#8d98a8;
  /* 🏛 2026-09-28（老板："都换行了不要换行"）：备案号这一行**永远一行**，不折行。
     窄屏（手机）靠缩小字号与间距塞下；实在放不下就横向可滑，也不折成两行。 */
  display:flex; gap:14px; flex-wrap:nowrap; align-items:center; white-space:nowrap; overflow-x:auto}
.foot .base>span{white-space:nowrap}
@media (max-width:520px){ .foot .base{gap:8px; font-size:11.5px} }
.foot .base a{color:#8d98a8; font-size:13px; white-space:nowrap}

/* ---------- 移动端底部常驻拨打条（转化细节） ---------- */
.callbar{position:fixed; left:0; right:0; bottom:0; z-index:70; display:none; gap:10px; padding:9px 12px;
  background:rgba(255,255,255,.96); border-top:1px solid var(--line); backdrop-filter:blur(10px)}
.callbar .btn{flex:1}
@media (max-width:820px){ .callbar{display:flex} body{padding-bottom:64px} }

/* ---------- 动效（克制：进入视口淡入上移，只做一次） ---------- */
.rv{opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease), transform .5s var(--ease)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1; transform:none; transition:none} html{scroll-behavior:auto} }

/* 面包屑 */
.crumb{font-size:13.5px; color:var(--ink3); padding:18px 0 0}
.crumb a{color:var(--ink3)}
.crumb span{margin:0 6px; color:var(--ink4)}

/* ---------- 联系页常用 ---------- */
.qrbox{width:132px;height:132px;border:1px dashed var(--brand-line); border-radius:var(--r2); background:var(--brand-soft);
  display:flex; align-items:center; justify-content:center; color:var(--brand2); font-size:13px; text-align:center; padding:8px}
.big{font-size:26px; font-weight:800; letter-spacing:-.4px; color:var(--ink)}
.kv{display:flex; flex-wrap:wrap; gap:12px}
.kv div{flex:1 1 190px; background:var(--bg2); border:1px solid var(--line); border-radius:var(--r2); padding:14px}
.kv b{display:block; font-size:15px; margin-bottom:4px; color:var(--ink)}
.kv span{font-size:13.5px; color:var(--ink3)}