@charset "utf-8";
/* ==========================================================================
   方灵帮 · 官网（fangling-guanwang）
   响应式静态站 · 设计令牌与原型 fangling desktop-prototype 完全一致
   默认配色：信任蓝 trust  (#1E5EFF)
   ========================================================================== */

:root{
  --brand:#1E5EFF; --brand-2:#4B82FF; --brand-soft:#EAF0FF;
  --bg:#F5F8FC; --card:#FFFFFF; --line:#E7EDF5; --line-2:#F0F4F9;
  --ink:#0F172A; --ink-2:#475569; --ink-3:#94A3B8;
  --ok:#0E9F6E; --ok-soft:#E7F7F0; --warn:#B45309; --warn-soft:#FEF3E2;
  --danger:#EF4444; --danger-soft:#FEECEC; --gold:#8C6A43;
  --sh-card:0 1px 2px rgba(15,23,42,.04), 0 10px 26px -18px rgba(15,23,42,.22);
  --sh-btn:0 10px 22px -12px var(--brand);
  --maxw:1180px;
}
/* 另两套配色保留（切换 html[data-theme] 即可换装，与原型一致） */
html[data-theme="teal"]{--brand:#147D73;--brand-2:#2AA196;--brand-soft:#E3F3EF;--bg:#F4FAF7;--line:#E2EFEA;--line-2:#EEF7F3}
html[data-theme="ink"]{--brand:#243242;--brand-2:#3D5063;--brand-soft:#EDF1F5;--bg:#F7F6F2;--line:#E9E5DB;--line-2:#F2EFE8;--gold:#8C6A43}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:#fff;color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 44px}

/* ============================== 顶栏 ============================== */
.site-head{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line-2);
}
.site-head .bar{height:66px;display:flex;align-items:center;gap:34px}
.lg2{display:flex;align-items:center;gap:10px;flex:none}
.lg2 .m{width:32px;height:32px;border-radius:10px;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px}
.lg2 b{font-size:17px;font-weight:800;letter-spacing:-.3px}
.wnav{display:flex;gap:30px;font-size:14px;font-weight:600;color:var(--ink-2)}
.wnav a{position:relative;padding:4px 0;transition:color .18s}
.wnav a:hover{color:var(--brand)}
.wnav a.on{color:var(--brand);font-weight:700}
.wnav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-19px;height:2.5px;background:var(--brand);border-radius:2px}
.tel{margin-left:auto;display:flex;align-items:center;gap:9px;font-size:14px;font-weight:800;color:var(--brand);white-space:nowrap}
.tel svg{width:17px;height:17px;stroke-width:2.1;flex:none}
.burger{display:none;margin-left:auto;width:38px;height:38px;border:1px solid var(--line);border-radius:11px;
  background:#fff;align-items:center;justify-content:center;cursor:pointer;flex-direction:column;gap:4px}
.burger i{display:block;width:17px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
.burger i:last-child{width:11px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){width:17px;transform:translateY(-6px) rotate(-45deg)}
.mnav{display:none;border-top:1px solid var(--line-2);background:#fff;padding:8px 0 14px}
.mnav a{display:block;padding:13px 44px;font-size:15px;font-weight:700;color:var(--ink-2);border-bottom:1px solid var(--line-2)}
.mnav a:last-child{border-bottom:none}
.mnav a.on{color:var(--brand);background:var(--brand-soft)}
.mnav.open{display:block}

/* ============================== 通用原子 ============================== */
.btn{border:none;cursor:pointer;font-family:inherit;font-weight:700;display:inline-flex;align-items:center;
  justify-content:center;gap:7px;border-radius:10px;transition:.18s;white-space:nowrap}
.btn svg{width:16px;height:16px;stroke-width:2;flex:none}
.btn.b1{height:38px;padding:0 18px;background:var(--brand);color:#fff;font-size:13.5px;box-shadow:var(--sh-btn)}
.btn.b1:hover{background:#1a53e6;transform:translateY(-1px)}
.btn.b2{height:38px;padding:0 18px;background:#fff;border:1px solid var(--line);color:var(--ink-2);font-size:13.5px}
.btn.b2:hover{border-color:var(--brand);color:var(--brand)}
.btn.lg{height:46px;padding:0 24px;font-size:15px;border-radius:11px}
.tag{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:7px;font-size:11.5px;font-weight:700;
  background:var(--brand-soft);color:var(--brand);white-space:nowrap}
.tag.gray{background:#F1F5F9;color:#64748B}
.tag.ok{background:var(--ok-soft);color:var(--ok)}
.muted{color:var(--ink-3);font-size:12.5px;line-height:1.6}
.hl{color:var(--brand);font-weight:700}

.notice{display:flex;gap:9px;align-items:flex-start;border-radius:11px;padding:12px 14px;font-size:12.5px;
  line-height:1.65;font-weight:500}
.notice svg{width:15px;height:15px;flex:none;margin-top:2px;stroke-width:2}
.notice b{font-weight:800}
.n-info{background:var(--brand-soft);color:var(--brand)}
.n-plain{background:#F4F6FA;color:#64748B}

.section{padding:38px 0}
.section h2{font-size:26px;font-weight:800;letter-spacing:-.6px}
.section .sdesc{font-size:14px;color:var(--ink-3);margin-top:9px;line-height:1.7;max-width:660px}
.sec-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--brand);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px}

.kv{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-2);font-size:13px}
.kv:last-child{border-bottom:none}
.kv .k{width:88px;flex:none;color:var(--ink-3);font-weight:500}
.kv .v{flex:1;font-weight:600;color:var(--ink)}

/* ============================== 首页 hero ============================== */
.hero{background:linear-gradient(140deg,var(--brand-soft) 0%,#fff 60%);border-bottom:1px solid var(--line-2)}
.hero .in{display:flex;align-items:center;gap:40px;padding:56px 0 52px}
.hero .txt{flex:1;min-width:0}
.hero h1{font-size:42px;font-weight:800;letter-spacing:-1.4px;line-height:1.22;margin-top:18px}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero p.sub{font-size:15px;color:var(--ink-2);line-height:1.8;margin-top:16px;max-width:520px}
.hero .acts{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.hero .shot{width:430px;flex:none}
.qrrow{display:flex;gap:16px}
.qrcard{flex:1;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;
  align-items:center;gap:14px;box-shadow:var(--sh-card)}
.qrbox{width:64px;height:64px;border-radius:10px;flex:none;border:1px solid var(--line);
  background:repeating-conic-gradient(#0F172A 0 25%,#fff 0 50%) 0 0/12px 12px}
.qrbox.lg{width:150px;height:150px;border-radius:14px;margin:0 auto;background-size:18px 18px}
.qrbox.sm{width:70px;height:70px;border-radius:12px;background-size:12px 12px}

/* ============================== 三卡 / 步骤 ============================== */
.cards3{display:flex;gap:16px;margin-top:24px}
.card3{flex:1;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--sh-card)}
.card3 .ic{width:44px;height:44px;border-radius:13px;background:var(--brand-soft);color:var(--brand);
  display:flex;align-items:center;justify-content:center}
.card3 .ic svg{width:22px;height:22px;stroke-width:1.9}
.card3 h4{font-size:16px;font-weight:800;margin-top:14px}
.card3 p{font-size:13px;color:var(--ink-2);line-height:1.75;margin-top:8px}
.card3.tight{padding:16px 18px}
.card3.tight h4{font-size:15px;margin-top:0}
.card3.tight p{margin-top:6px}

.steps{display:flex;gap:14px;margin-top:22px}
.step{flex:1;position:relative}
.step .n{width:30px;height:30px;border-radius:10px;background:var(--brand);color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:13px;font-weight:800}
.step h5{font-size:15px;font-weight:800;margin-top:12px}
.step p{font-size:12.5px;color:var(--ink-2);line-height:1.7;margin-top:6px}
.step::after{content:"";position:absolute;top:15px;left:38px;right:-8px;height:1.5px;background:var(--line)}
.step:last-child::after{display:none}

/* ============================== 客户端入口 ============================== */
.entry{display:flex;gap:18px;align-items:flex-start}
.entry .qrpanel{width:330px;flex:none;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:22px;text-align:center;box-shadow:var(--sh-card)}
.entry .qrpanel .nm{font-size:19px;font-weight:800;margin-top:16px}
.entry .qrpanel .acts{display:flex;gap:9px;margin-top:16px;justify-content:center}
.entry .howto{flex:1;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--sh-card)}
.entry .howto .t{font-size:16px;font-weight:800}
.steplist{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.steplist .it{display:flex;gap:12px;align-items:flex-start}
.steplist .it .n{width:25px;height:25px;border-radius:50%;background:#EEF2F7;color:#94A3B8;display:flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:800;flex:none}
.steplist .it.hot .n{background:var(--brand);color:#fff}
.steplist .it .tx{flex:1;font-size:13px;color:var(--ink-2);line-height:1.65}
.steplist .it .tx b{color:var(--ink)}

/* ============================== 联系方式 ============================== */
.contact-grid{display:flex;gap:20px;align-items:flex-start}
.contact-left{flex:1;min-width:0}
.telcard{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);border-radius:16px;padding:24px;color:#fff}
.telcard .lb{font-size:12.5px;opacity:.86;font-weight:600}
.telcard .num{font-size:33px;font-weight:800;letter-spacing:-1px;margin-top:8px}
.telcard .tm{font-size:13px;opacity:.86;margin-top:8px}
.telcard .acts{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.telcard .acts .btn{height:38px;padding:0 18px;font-size:13.5px;border-radius:10px}
.telcard .acts .k1{background:#fff;color:var(--brand)}
.telcard .acts .k2{background:rgba(255,255,255,.16);color:#fff}
.info-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:6px 20px;margin-top:16px;box-shadow:var(--sh-card)}
.contact-right{width:420px;flex:none}
.mapbox{height:296px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-card);
  position:relative;overflow:hidden}
.mapbox .grid{position:absolute;inset:0;background:
  repeating-linear-gradient(0deg,#F1F5FA 0 1px,transparent 1px 34px),
  repeating-linear-gradient(90deg,#F1F5FA 0 1px,transparent 1px 34px)}
.mapbox .pin{position:absolute;left:50%;top:46%;transform:translate(-50%,-100%)}
.mapbox .pin i{display:block;width:18px;height:18px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 7px var(--brand-soft)}
.mapbox .cap{position:absolute;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line-2);
  padding:12px 16px;display:flex;align-items:center;gap:9px}
.mapbox .cap b{font-size:13px;font-weight:700}
.mapbox .cap .tag{margin-left:auto}

/* ============================== 页脚 ============================== */
.site-foot{border-top:1px solid var(--line-2);background:#fff;padding:22px 0;margin-top:auto}
.site-foot .in{display:flex;align-items:center;gap:20px;font-size:12.5px;color:var(--ink-3);flex-wrap:wrap}
.site-foot .sp{margin-left:auto}

/* 页面底部边界说明条 */
.foot-note{background:var(--bg);border-top:1px solid var(--line-2);padding:20px 0}
.foot-note .in{font-size:12.5px;color:var(--ink-3);line-height:1.75}

/* ============================== 响应式 ============================== */
@media (max-width:1080px){
  .hero .shot{width:370px}
  .contact-right{width:340px}
  .entry .qrpanel{width:290px}
}
@media (max-width:900px){
  .wrap{padding:0 26px}
  .wnav,.tel{display:none}
  .burger{display:flex}
  .site-head .bar{gap:16px}
  .mnav a{padding:13px 26px}
  .hero .in{flex-direction:column;align-items:stretch;gap:28px;padding:38px 0 36px}
  .hero h1{font-size:32px;letter-spacing:-1px}
  .hero .shot{width:100%}
  .cards3,.steps{flex-direction:column;gap:12px}
  .step::after{display:none}
  .entry{flex-direction:column}
  .entry .qrpanel{width:100%}
  .contact-grid{flex-direction:column}
  .contact-right{width:100%}
  .mapbox{height:240px}
  .section{padding:28px 0}
  .section h2{font-size:22px}
  .telcard .num{font-size:28px}
}
@media (max-width:560px){
  .wrap{padding:0 20px}
  .mnav a{padding:13px 20px}
  .hero h1{font-size:28px;line-height:1.3}
  .hero .acts .btn{width:100%}
  .qrrow{flex-direction:column}
  .site-foot .in .sp{margin-left:0}
}