/* ══════════════════════════════════════════════════════════════
   蜂群ERP · 落地页（fengqunerp.com/）
   与后台同一套 token，但语气不同：后台要密度，落地页要呼吸。
   ══════════════════════════════════════════════════════════════ */

:root{
  --bg:          #F3F6FC;
  --bg-2:        #EAF1FC;
  --surface:     #FFFFFF;
  --surface-2:   #F7F9FD;
  --line:        #E2E8F3;
  --line-2:      #CBD6E8;

  --ink:         #0D1728;
  --ink-2:       #37455C;
  --ink-3:       #66748D;
  --ink-4:       #97A3B8;

  --brand:       #2563EB;
  --brand-2:     #1D4ED8;
  --brand-3:     #14418F;
  --brand-wash:  #EDF3FF;
  --brand-line:  #C6D8FA;
  --brand-grad:  linear-gradient(135deg,#4C8DFF 0%,#1D5AE0 100%);

  --amber:       #E8890A;
  --amber-wash:  #FEF3E2;
  --amber-line:  #F3D4A4;

  --night:       #0B1526;
  --night-2:     #101E36;

  --ok:          #0E8A63;
  --ok-wash:     #E4F6EF;

  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --sh-1: 0 1px 2px rgba(13,23,40,.05), 0 4px 12px -6px rgba(13,23,40,.10);
  --sh-2: 0 10px 30px -12px rgba(13,23,40,.22);
  --sh-3: 0 34px 80px -28px rgba(13,23,40,.42);

  --wrap: 1200px;
  --sans: 'Plus Jakarta Sans', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.005em;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
::selection{ background:var(--brand-line); color:var(--brand-3); }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 28px; }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* ─── 导航 ─────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(243,246,252,.78);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s, background .2s;
}
.nav.stuck{ border-bottom-color:var(--line); background:rgba(255,255,255,.86); }
.nav-in{ display:flex; align-items:center; gap:14px; height:66px; }
.logo{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.logo svg{ width:30px; height:30px; }
.logo b{ font-size:16px; font-weight:800; letter-spacing:-.02em; white-space:nowrap; }
.logo i{
  font-style:normal; font-size:9.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-4); padding-left:2px;
}
.nav-links{ display:flex; gap:4px; margin-left:22px; }
.nav-links a{
  font-size:13.5px; color:var(--ink-2); font-weight:500; padding:7px 11px;
  border-radius:8px; transition:background .15s, color .15s;
}
.nav-links a:hover{ background:rgba(37,99,235,.07); color:var(--brand-3); }
.nav-grow{ flex:1; }
.nav-acts{ display:flex; align-items:center; gap:8px; }

/* ─── 按钮 ─────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:38px; padding:0 17px; border-radius:10px; cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:600; letter-spacing:-.005em;
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2);
  transition:background .15s, border-color .15s, box-shadow .15s, transform .12s, color .15s;
  white-space:nowrap;
}
.btn:hover{ border-color:var(--ink-4); color:var(--ink); }
.btn svg{ width:15px; height:15px; }
.btn.pri{
  background:var(--brand); border-color:var(--brand); color:#fff;
  box-shadow:0 1px 2px rgba(37,99,235,.30), 0 8px 20px -8px rgba(37,99,235,.55);
}
.btn.pri:hover{ background:var(--brand-2); border-color:var(--brand-2); color:#fff; transform:translateY(-1px); }
.btn.ghost{ border-color:transparent; background:transparent; }
.btn.ghost:hover{ background:rgba(37,99,235,.07); border-color:transparent; color:var(--brand-3); }
.btn.big{ height:46px; padding:0 24px; font-size:15px; border-radius:12px; }
.btn.gold{
  background:linear-gradient(135deg,#FBB13C,#E8890A); border-color:#D77F08; color:#3A2100;
  box-shadow:0 8px 20px -10px rgba(232,137,10,.7);
}
.btn.gold:hover{ filter:brightness(1.04); color:#3A2100; }
.btn .kbd{
  font-family:var(--mono); font-size:10px; padding:1px 5px; border-radius:4px;
  background:rgba(255,255,255,.20); margin-left:2px;
}

/* ─── 通用区块 ─────────────────────────────────────────────── */
.sec{ padding:92px 0; }
.sec.tight{ padding:64px 0; }
.sec.alt{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sec.dark{ background:linear-gradient(160deg,#101D33 0%,#0A1322 100%); color:#E6EDF9; }

.eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand);
}
.eyebrow::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--brand); }
.h2{
  font-size:36px; font-weight:800; letter-spacing:-.028em; line-height:1.22;
  margin:12px 0 12px;
}
.h2 em{ font-style:normal; color:var(--brand); }
.lead{ font-size:15.5px; color:var(--ink-3); max-width:620px; line-height:1.75; }
.sec-head{ margin-bottom:42px; }
.dark .h2{ color:#fff; }
.dark .lead{ color:#94A6C2; }
.dark .eyebrow{ color:#7FB0FF; }
.dark .eyebrow::before{ background:#7FB0FF; }

/* ─── Hero ─────────────────────────────────────────────────── */
.hero{
  position:relative; overflow:hidden;
  padding:56px 0 84px;
  background:
    radial-gradient(820px 420px at 78% -6%, rgba(37,99,235,.16), transparent 62%),
    radial-gradient(680px 360px at 8% 2%, rgba(76,141,255,.10), transparent 60%);
}
.hero::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line) 1px, transparent 1px),
                   linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(620px 420px at 62% 12%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(620px 420px at 62% 12%, #000 20%, transparent 78%);
}
.hero-in{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 1.06fr; gap:46px; align-items:center; }
.hero-l{ max-width:520px; }

.badge{
  display:inline-flex; align-items:center; gap:8px;
  height:30px; padding:0 13px 0 8px; border-radius:999px;
  background:var(--surface); border:1px solid var(--brand-line);
  box-shadow:0 3px 12px -4px rgba(37,99,235,.28);
  font-size:12.5px; font-weight:600; color:var(--brand-3);
}
.badge .dot{
  width:20px; height:20px; border-radius:50%; background:var(--brand-wash);
  display:flex; align-items:center; justify-content:center; color:var(--brand);
}
.badge .dot svg{ width:12px; height:12px; }

h1{
  font-size:54px; line-height:1.1; font-weight:800; letter-spacing:-.035em;
  margin:18px 0 0;
}
h1 em{
  font-style:normal;
  background:linear-gradient(120deg,#2563EB 0%,#1D4ED8 55%,#4C8DFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{
  font-size:16.5px; line-height:1.72; color:var(--ink-2); margin-top:18px; max-width:460px;
}
.hero-sub b{ color:var(--ink); font-weight:700; }
.hero-cta{ display:flex; gap:10px; margin-top:26px; flex-wrap:wrap; }
.hero-trust{
  display:flex; gap:18px; margin-top:22px; flex-wrap:wrap;
  font-size:12.5px; color:var(--ink-3);
}
.hero-trust span{ display:inline-flex; align-items:center; gap:6px; }
.hero-trust svg{ width:14px; height:14px; color:var(--ok); }

/* 浏览器框 */
.browser{
  position:relative; border-radius:14px; overflow:hidden;
  background:var(--surface); border:1px solid var(--line-2);
  box-shadow:var(--sh-3);
  transform:perspective(1600px) rotateY(-4deg) rotateX(1.5deg);
  transform-origin:left center;
}
.browser-bar{
  display:flex; align-items:center; gap:8px; height:34px; padding:0 12px;
  background:linear-gradient(#FBFCFE,#F2F5FB); border-bottom:1px solid var(--line);
}
.browser-bar .dots{ display:flex; gap:5px; }
.browser-bar .dots i{ width:9px; height:9px; border-radius:50%; background:#D8E0EF; }
.browser-bar .dots i:nth-child(1){ background:#FFBFB8; }
.browser-bar .dots i:nth-child(2){ background:#FFDCA8; }
.browser-bar .dots i:nth-child(3){ background:#B7E6C4; }
.browser-bar .addr{
  flex:1; height:20px; border-radius:6px; background:var(--surface);
  border:1px solid var(--line); display:flex; align-items:center; gap:6px;
  padding:0 8px; font-family:var(--mono); font-size:9.5px; color:var(--ink-4);
}
.browser-bar .addr svg{ width:9px; height:9px; color:var(--ok); }
.browser img{ width:100%; }

/* 浮在截图上的小卡 */
.float{
  position:absolute; background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.8);
  border-radius:12px; box-shadow:var(--sh-2); padding:11px 13px;
}
.float.a{ left:-30px; bottom:64px; }
.float.b{ right:-18px; top:72px; }
.float .fl{ font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); }
.float .fv{ font-family:var(--mono); font-size:19px; font-weight:700; letter-spacing:-.03em; margin-top:2px; }
.float .fv.sm{ font-size:13px; }
.float .fd{ font-size:10.5px; color:var(--ok); font-weight:600; margin-top:1px; }
.float .fd.amber{ color:var(--amber); }

/* ─── 数字条 ───────────────────────────────────────────────── */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
}
.stat{ background:var(--surface); padding:24px 22px; }
.stat .sv{ font-family:var(--mono); font-size:32px; font-weight:700; letter-spacing:-.04em; line-height:1.1; }
.stat .sv i{ font-style:normal; font-size:15px; font-weight:600; color:var(--ink-4); margin-left:2px; }
.stat .sl{ font-size:12.5px; color:var(--ink-3); margin-top:6px; }
.stat .sd{ font-size:11px; color:var(--ink-4); margin-top:2px; }

/* ─── 场景（图文交替） ─────────────────────────────────────── */
.scene{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:34px 0; }
.scene:nth-child(even) .scene-l{ order:2; }
.scene-l{ }
.scene-n{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:8px; background:var(--brand-wash);
  border:1px solid var(--brand-line); color:var(--brand); font-family:var(--mono);
  font-size:11.5px; font-weight:700;
}
.scene h3{ font-size:25px; font-weight:800; letter-spacing:-.025em; margin:14px 0 10px; line-height:1.3; }
.scene p{ font-size:14.5px; color:var(--ink-3); line-height:1.78; }
.scene ul{ list-style:none; margin-top:16px; display:flex; flex-direction:column; gap:9px; }
.scene li{ display:flex; gap:9px; font-size:13.5px; color:var(--ink-2); }
.scene li svg{ width:16px; height:16px; flex:0 0 16px; color:var(--ok); margin-top:1px; }
.scene-r{ position:relative; }
.shot{
  border-radius:var(--r); overflow:hidden; border:1px solid var(--line-2);
  background:var(--surface); box-shadow:var(--sh-2);
}
.shot img{ width:100%; }

/* ─── 功能网格 ─────────────────────────────────────────────── */
.fgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
        border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.fcell{
  background:var(--surface); padding:20px 22px 18px; position:relative;
  transition:background .16s;
}
.fcell:hover{ background:var(--surface-2); }
.fcell .fico{
  width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:var(--brand-wash); border:1px solid var(--brand-line); color:var(--brand);
}
.fcell .fico svg{ width:18px; height:18px; }
.fcell h4{ font-size:14.5px; font-weight:700; margin:13px 0 5px; letter-spacing:-.01em; }
.fcell .fen{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-4); font-weight:600;
}
.fcell p{ font-size:12.5px; color:var(--ink-3); line-height:1.72; margin-top:7px; }

/* ─── 三步 ─────────────────────────────────────────────────── */
.steps3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.step{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:22px; position:relative; overflow:hidden;
}
.step::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--brand-grad);
}
.step .sn{
  font-family:var(--mono); font-size:11px; font-weight:700; color:var(--brand);
  width:24px; height:24px; border-radius:7px; background:var(--brand-wash);
  display:flex; align-items:center; justify-content:center;
}
.step h4{ font-size:15px; font-weight:700; margin:12px 0 6px; }
.step p{ font-size:13px; color:var(--ink-3); line-height:1.75; }
.step code{
  font-family:var(--mono); font-size:11.5px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:5px; padding:1px 5px; color:var(--brand-3);
}

/* ─── 定价 ─────────────────────────────────────────────────── */
.pay-tabs{ display:inline-flex; padding:3px; background:var(--surface-3, #EDF1F9); border-radius:10px; gap:2px; }
.pay-tabs button{
  height:32px; padding:0 16px; border:0; background:transparent; border-radius:7px;
  font-family:inherit; font-size:13px; font-weight:600; color:var(--ink-3); cursor:pointer;
  transition:.14s;
}
.pay-tabs button.on{ background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(13,23,40,.14); }

.plans{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:22px; }
.plan{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:22px 20px 20px; overflow:hidden;
  transition:transform .16s, box-shadow .16s, border-color .16s;
}
.plan:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--line-2); }
.plan::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--brand-grad); opacity:.85;
}
.plan.best{ border-color:var(--brand); box-shadow:0 12px 34px -16px rgba(37,99,235,.5); }
.plan .ribbon{
  position:absolute; top:0; right:0; font-size:10px; font-weight:700; color:#fff;
  background:var(--brand); padding:3px 10px; border-radius:0 0 0 9px; letter-spacing:.04em;
}
.plan .pt{ font-size:13px; font-weight:700; color:var(--ink-2); }
.plan .pp{ margin-top:10px; display:flex; align-items:baseline; gap:1px; }
.plan .pp .cur{ font-size:15px; font-weight:700; color:var(--ink); }
.plan .pp .num{ font-family:var(--mono); font-size:34px; font-weight:700; letter-spacing:-.045em; line-height:1; }
.plan .pp .unit{ font-size:12px; color:var(--ink-4); margin-left:3px; }
.plan .orig{ font-size:11px; color:var(--ink-4); text-decoration:line-through; margin-top:3px; }
.plan .save{
  display:inline-block; font-size:10.5px; font-weight:700; color:var(--amber);
  background:var(--amber-wash); border:1px solid var(--amber-line);
  border-radius:5px; padding:1px 6px; margin-top:7px;
}
.plan .save.dim{
  color:var(--ink-3); background:var(--surface-2); border-color:var(--line); font-weight:600;
}
.plan ul{ list-style:none; margin:14px 0 16px; padding-top:14px; border-top:1px dashed var(--line);
          display:flex; flex-direction:column; gap:7px; }
.plan li{ font-size:12px; color:var(--ink-2); display:flex; gap:6px; }
.plan li svg{ width:13px; height:13px; color:var(--ok); flex:0 0 13px; margin-top:2px; }
.plan .pbtn{ width:100%; }
.plan-note{ font-size:12px; color:var(--ink-4); margin-top:16px; }
.plan-note b{ color:var(--ink-2); }

/* ─── 评价 ─────────────────────────────────────────────────── */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.quote{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:24px 22px; display:flex; flex-direction:column; gap:14px;
}
.quote .stars{ display:flex; gap:2px; color:var(--amber); }
.quote .stars svg{ width:13px; height:13px; }
.quote p{ font-size:13.5px; color:var(--ink-2); line-height:1.8; flex:1; }
.quote .who{ display:flex; align-items:center; gap:10px; padding-top:14px; border-top:1px solid var(--line); }
.quote .av{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:#fff; background:var(--brand-grad); flex:0 0 34px;
}
.quote .wn{ font-size:12.5px; font-weight:700; }
.quote .wd{ font-size:11px; color:var(--ink-4); }

/* ─── FAQ ──────────────────────────────────────────────────── */
.faq{ max-width:820px; margin:0 auto; }
.faq details{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:0 20px; margin-bottom:10px; transition:border-color .15s;
}
.faq details[open]{ border-color:var(--brand-line); }
.faq summary{
  cursor:pointer; list-style:none; padding:16px 0; font-size:14.5px; font-weight:600;
  display:flex; align-items:center; gap:10px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:'+'; margin-left:auto; font-family:var(--mono); font-size:17px; color:var(--ink-4);
  font-weight:400; transition:transform .18s;
}
.faq details[open] summary::after{ transform:rotate(45deg); color:var(--brand); }
.faq p{ padding:0 0 18px; font-size:13.5px; color:var(--ink-3); line-height:1.8; }

/* ─── 收尾 CTA ─────────────────────────────────────────────── */
.final{
  position:relative; overflow:hidden; text-align:center;
  background:linear-gradient(160deg,#101D33 0%,#0A1322 100%);
  border-radius:var(--r-xl); padding:62px 32px; color:#E6EDF9;
}
.final::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(560px 320px at 50% -30%, rgba(37,99,235,.55), transparent 66%);
}
.final > *{ position:relative; }
.final h2{ font-size:34px; font-weight:800; letter-spacing:-.03em; line-height:1.24; }
.final p{ font-size:14.5px; color:#94A6C2; margin:12px 0 24px; }
.final .cta{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.final .btn:not(.pri):not(.gold){ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#E6EDF9; }
.final .btn:not(.pri):not(.gold):hover{ background:rgba(255,255,255,.12); color:#fff; }
.final .tiny{ font-size:12px; color:#63758F; margin-top:16px; }

/* ─── 页脚 ─────────────────────────────────────────────────── */
footer{ border-top:1px solid var(--line); padding:44px 0 34px; margin-top:20px; }
.foot-in{ display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.foot-brand{ max-width:280px; }
.foot-brand .fl{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:15px; }
.foot-brand .fl svg{ width:24px; height:24px; }
.foot-brand p{ font-size:12.5px; color:var(--ink-4); margin-top:10px; line-height:1.75; }
.foot-cols{ display:flex; gap:56px; flex-wrap:wrap; }
.foot-col h5{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-4); margin-bottom:10px; font-weight:700; }
.foot-col a{ display:block; font-size:12.5px; color:var(--ink-2); padding:3px 0; }
.foot-col a:hover{ color:var(--brand); }
.foot-b{ margin-top:32px; padding-top:18px; border-top:1px solid var(--line);
         display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
         font-size:11.5px; color:var(--ink-4); }

/* ─── 响应式 ───────────────────────────────────────────────── */
@media (max-width:1100px){
  h1{ font-size:44px; }
  .hero-in{ grid-template-columns:1fr; gap:36px; }
  .hero-l{ max-width:none; }
  .browser{ transform:none; }
  .float.a{ left:auto; right:12px; bottom:-12px; }
  .float.b{ right:12px; top:-12px; }
  .scene{ grid-template-columns:1fr; gap:26px; padding:26px 0; }
  .scene:nth-child(even) .scene-l{ order:0; }
  .fgrid{ grid-template-columns:repeat(2,1fr); }
  .plans{ grid-template-columns:repeat(2,1fr); }
  .quotes{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px){
  .wrap{ padding:0 18px; }
  .nav-in{ height:58px; gap:8px; }
  .nav-acts .btn{ height:34px; padding:0 13px; font-size:12.5px; }
  .nav-acts .btn.ghost{ padding:0 8px; }
  .sec{ padding:56px 0; }
  .nav-links{ display:none; }
  h1{ font-size:33px; }
  .h2{ font-size:26px; }
  .hero{ padding:36px 0 56px; }
  .float{ display:none; }
  .steps3{ grid-template-columns:1fr; }
  .fgrid{ grid-template-columns:1fr; }
  .plans{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
  .final{ padding:44px 20px; border-radius:var(--r-lg); }
  .final h2{ font-size:25px; }
  .foot-in{ flex-direction:column; gap:26px; }
  .foot-cols{ gap:34px; }
  .logo i{ display:none; }
}

/* 图标占位容器 */
[data-i]{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }