/* ==========================================================
   质保云 SaaS · 前台样式
   设计方向：混合 —— 官方落地页用品牌质感，内部后台用工具风
   ========================================================== */
:root{
  --ink:#0a0f1e;
  --ink-2:#3f4654;
  --ink-3:#8b94a6;
  --line:#e9ebf0;
  --gold:#c9a76b;
  --blue:#1d4ed8;
  --bg-soft:#fbfbfd;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--ink);background:#fff;line-height:1.6;
}
a{color:inherit}
.wrap{max-width:1140px;margin:0 auto;padding:0 36px}

/* ---------- 导航 ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:.3s}
.nav.scrolled{background:rgba(8,9,12,.86);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.07)}
.nav-in{height:80px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:11px;font-weight:700;font-size:17.5px;color:#fff;text-decoration:none;letter-spacing:.01em}
.logo .mark{
  width:32px;height:32px;border-radius:8px;background:linear-gradient(145deg,#fff,#c8d0e0);
  color:#08090c;display:grid;place-items:center;font-size:15px;font-weight:900;flex:0 0 auto;
}
.nav-links{display:flex;align-items:center;gap:36px}
.nav-links a{color:rgba(255,255,255,.62);text-decoration:none;font-size:14.5px;font-weight:500;transition:.2s}
.nav-links a:hover{color:#fff}
.nav-cta{display:flex;align-items:center;gap:14px}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:44px;padding:0 22px;border-radius:8px;font-size:14.5px;font-weight:600;
  text-decoration:none;border:1px solid transparent;transition:.2s;white-space:nowrap;cursor:pointer;
  font-family:inherit;
}
.btn-ghost{color:rgba(255,255,255,.8)}
.btn-ghost:hover{color:#fff}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:#f2f4f8;transform:translateY(-1px)}
.btn-gold{background:linear-gradient(135deg,#d8b87e,#a9853f);color:#1a1408;box-shadow:0 2px 4px rgba(0,0,0,.2),0 12px 28px -12px rgba(201,167,107,.55)}
.btn-gold:hover{transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,0,0,.24),0 16px 34px -12px rgba(201,167,107,.65)}
.btn-lg{height:52px;padding:0 30px;font-size:15.5px;border-radius:9px}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#1a1d24;transform:translateY(-1px)}
.btn-line{background:#fff;color:var(--ink);border-color:#d8dde6}
.btn-line:hover{border-color:#9aa4b5}
.btn-block{display:flex;width:100%}

/* ---------- 首屏 ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;padding:170px 0 0}
.hero::before{
  content:"";position:absolute;left:-15%;top:-30%;width:900px;height:900px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(80,110,200,.22),transparent 70%);pointer-events:none;
}
.hero::after{
  content:"";position:absolute;right:-18%;top:8%;width:800px;height:800px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(184,146,90,.14),transparent 70%);pointer-events:none;
}
.grid-lines{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000,transparent);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000,transparent);
}
.hero-in{position:relative;z-index:2;text-align:center;max-width:820px;margin:0 auto}
.badge{
  display:inline-flex;align-items:center;gap:9px;height:32px;padding:0 15px;
  border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.05);
  font-size:12.5px;color:rgba(255,255,255,.78);letter-spacing:.02em;margin-bottom:32px;
}
.badge .pulse{width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.16);animation:pl 2.4s infinite}
@keyframes pl{0%,100%{opacity:1}50%{opacity:.35}}
.hero h1{font-size:clamp(38px,5.6vw,72px);line-height:1.06;letter-spacing:-.04em;font-weight:800;margin-bottom:26px}
.hero h1 .grad{background:linear-gradient(180deg,#ffffff 25%,#9aa6c0);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 .gold{background:linear-gradient(180deg,#e6c893,#a9853f);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{font-size:17.5px;color:rgba(255,255,255,.62);line-height:1.75;max-width:56ch;margin:0 auto}
.hero-actions{display:flex;gap:14px;justify-content:center;margin-top:40px;flex-wrap:wrap}
.hero-note{margin-top:20px;font-size:13px;color:rgba(255,255,255,.4)}
.hero-note b{color:rgba(255,255,255,.72);font-weight:600}

.nums{position:relative;z-index:2;margin-top:76px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.1)}
.num{padding:30px 12px;text-align:center;border-right:1px solid rgba(255,255,255,.07)}
.num:last-child{border-right:0}
.num strong{display:block;font-size:32px;font-weight:750;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.num span{display:block;font-size:12.5px;color:rgba(255,255,255,.42);margin-top:6px;letter-spacing:.03em}

/* 悬浮查询卡 */
.preview-wrap{position:relative;z-index:2;display:flex;justify-content:center;padding:0 0 88px;background:var(--ink)}
.qcard{
  width:380px;background:#fff;border-radius:18px;padding:26px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06);
  color:var(--ink);transform:translateY(-40px);
}
.qcard .qh{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.qcard .qh .ic{width:34px;height:34px;border-radius:10px;background:#f4f6fa;display:grid;place-items:center;font-size:15px}
.qcard .qh div{font-size:13.5px;font-weight:650}
.qcard .qh small{display:block;font-size:11.5px;color:var(--ink-3);font-weight:400;margin-top:2px}
.qfield{height:44px;border-radius:10px;background:#f5f7fa;border:1px solid #edf0f5;display:flex;align-items:center;padding:0 14px;font-size:13.5px;color:var(--ink-3);margin-bottom:12px}
.qbtn{height:44px;border-radius:10px;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:600;margin-bottom:20px}
.qresult{border-top:1px solid var(--line);padding-top:18px}
.qrow{display:flex;justify-content:space-between;font-size:13px;padding:8px 0}
.qrow span{color:var(--ink-3)}
.qrow b{font-weight:600}
.qok{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding:7px 12px;border-radius:8px;background:#ecfdf5;color:#047857;font-size:12.5px;font-weight:650}

/* ---------- 区块 ---------- */
section{padding:110px 0}
.sec-head{max-width:660px;margin-bottom:60px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.kicker{display:inline-block;font-size:11.5px;font-weight:750;color:var(--gold);letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px}
.sec-head h2{font-size:clamp(29px,3.3vw,42px);line-height:1.18;letter-spacing:-.032em;font-weight:760}
.sec-sub{margin-top:18px;color:var(--ink-2);font-size:16px;line-height:1.76}

/* 功能 */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.fbox{background:#fff;padding:40px 32px;transition:.25s}
.fbox:hover{background:#fafbfd}
.fbox .icn{
  width:44px;height:44px;border-radius:12px;background:linear-gradient(160deg,#f4f6fa,#e9edf4);
  display:grid;place-items:center;font-size:19px;margin-bottom:22px;border:1px solid #eef1f6;
}
.fbox h3{font-size:17px;font-weight:700;letter-spacing:-.018em;margin-bottom:9px}
.fbox p{font-size:14.2px;color:var(--ink-2);line-height:1.74}

/* 定价 */
.pricing{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.plan{background:#fff;border:1px solid var(--line);border-radius:18px;padding:38px 32px;display:flex;flex-direction:column;transition:.28s;position:relative}
.plan:hover{transform:translateY(-3px);box-shadow:0 30px 60px -30px rgba(10,15,30,.16)}
.plan.hero-plan{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 40px 80px -34px rgba(10,15,30,.55)}
.plan.hero-plan .desc{color:rgba(255,255,255,.45)}
.plan.hero-plan .price .cur,.plan.hero-plan .price .per{color:rgba(255,255,255,.5)}
.plan.hero-plan .meta{color:rgba(255,255,255,.38);border-bottom-color:rgba(255,255,255,.1)}
.plan.hero-plan li{color:rgba(255,255,255,.7)}
.plan.hero-plan li b{color:#fff}
.pill{
  position:absolute;top:-12px;right:28px;height:25px;padding:0 12px;border-radius:999px;
  background:linear-gradient(135deg,#d8b87e,#a9853f);color:#1a1408;
  font-size:11.5px;font-weight:750;display:inline-flex;align-items:center;letter-spacing:.04em;
}
.plan h3{font-size:16px;font-weight:700;letter-spacing:-.01em;margin-bottom:7px;display:flex;align-items:baseline;gap:8px}
.plan h3 em{font-style:normal;font-size:11.5px;font-weight:500;color:var(--ink-3);letter-spacing:.02em}
.plan.hero-plan h3 em{color:rgba(255,255,255,.5)}
.plan .desc{font-size:13.2px;color:var(--ink-3);min-height:20px}
.price{display:flex;align-items:baseline;gap:5px;margin:24px 0 6px}
.price .cur{font-size:20px;font-weight:600;color:var(--ink-2)}
.price .num{font-size:48px;font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.price .per{font-size:13.5px;color:var(--ink-3)}
.plan .meta{font-size:12.6px;color:var(--ink-3);padding-bottom:24px;border-bottom:1px solid var(--line);margin-bottom:24px}
.plan ul{list-style:none;display:grid;gap:13px;margin-bottom:30px;flex:1}
.plan li{display:flex;gap:10px;font-size:14px;color:var(--ink-2);line-height:1.55;align-items:flex-start}
.plan li b{font-weight:650;color:var(--ink)}
.ck{width:14px;height:14px;flex:0 0 auto;margin-top:3px;position:relative}
.ck::before{content:"";position:absolute;left:3px;top:1px;width:5px;height:9px;border:solid currentColor;border-width:0 1.8px 1.8px 0;transform:rotate(45deg);opacity:.75}
.plan.hero-plan .ck{color:var(--gold)}
.plan .btn{width:100%}
.pricing-note{text-align:center;margin-top:28px;font-size:12.8px;color:var(--ink-3)}

/* 步骤 */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative}
.steps::before{
  content:"";position:absolute;top:26px;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 15%,var(--line) 85%,transparent);
}
.step{text-align:center;padding:0 26px;position:relative}
.step .n{
  width:52px;height:52px;border-radius:15px;margin:0 auto 24px;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;font-size:16px;font-weight:800;letter-spacing:-.02em;position:relative;z-index:1;
  box-shadow:0 4px 14px -6px rgba(8,9,12,.14);
}
.step h3{font-size:16.5px;font-weight:700;margin-bottom:9px;letter-spacing:-.015em}
.step p{font-size:14px;color:var(--ink-2);line-height:1.74}

/* CTA */
.cta{position:relative;background:var(--ink);color:#fff;padding:100px 0;overflow:hidden;text-align:center}
.cta::before{content:"";position:absolute;left:50%;top:-50%;width:1100px;height:800px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(201,167,107,.18),transparent 70%)}
.cta-in{position:relative;z-index:1;max-width:620px;margin:0 auto}
.cta h2{font-size:clamp(28px,3.4vw,44px);letter-spacing:-.035em;line-height:1.15}
.cta p{color:rgba(255,255,255,.5);margin-top:18px;font-size:16px}
.cta .hero-actions{margin-top:36px}

/* 页脚 */
footer{background:#08090c;color:rgba(255,255,255,.5);padding:64px 0 40px;border-top:1px solid rgba(255,255,255,.06)}
.fgrid2{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:44px;margin-bottom:52px}
.fbrand p{font-size:13.5px;line-height:1.75;margin-top:16px;max-width:32ch;color:rgba(255,255,255,.35)}
.fcol h4{font-size:12px;font-weight:750;color:rgba(255,255,255,.85);letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
.fcol a{display:block;font-size:13.5px;color:rgba(255,255,255,.4);text-decoration:none;margin-bottom:11px;transition:.2s}
.fcol a:hover{color:#fff}
.fbot{border-top:1px solid rgba(255,255,255,.07);padding-top:26px;display:flex;justify-content:space-between;font-size:12.5px;color:rgba(255,255,255,.3);flex-wrap:wrap;gap:10px}

/* ---------- 响应式 ---------- */
@media(max-width:1000px){
  .fgrid,.plans,.steps,.fgrid2{grid-template-columns:1fr}
  .steps::before{display:none}
  .step{padding:0 0 40px}
  .nums{grid-template-columns:repeat(2,1fr)}
  .num:nth-child(2){border-right:0}
  .nav-links{display:none}
  section{padding:76px 0}
  .hero{padding:130px 0 0}
  .qcard{width:100%;max-width:380px}
  .wrap{padding:0 22px}
}

/* ==========================================================
   v2 · 质感升级：极光背景 / 玻璃拟态 / 微动效
   ========================================================== */
/* 首屏极光光斑 */
.hero .aurora{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.hero .aurora i{
  position:absolute;display:block;border-radius:50%;filter:blur(90px);opacity:.5;
  animation:drift 16s ease-in-out infinite alternate;
}
.hero .aurora i:nth-child(1){width:560px;height:560px;left:8%;top:-12%;background:radial-gradient(circle,rgba(88,112,255,.30),transparent 65%)}
.hero .aurora i:nth-child(2){width:460px;height:460px;right:4%;top:16%;background:radial-gradient(circle,rgba(201,167,107,.24),transparent 65%);animation-delay:-6s}
.hero .aurora i:nth-child(3){width:380px;height:380px;left:42%;top:44%;background:radial-gradient(circle,rgba(110,140,255,.13),transparent 65%);animation-delay:-11s}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(60px,34px) scale(1.12)}}

/* 查询卡悬浮呼吸 */
.qcard{animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(-40px)}50%{transform:translateY(-48px)}}

/* 玻璃徽章 */
.badge{backdrop-filter:blur(8px);background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.03))}

/* 功能卡：立体图标 + 悬浮上浮 */
.fbox{position:relative}
.fbox::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:.3s}
.fbox:hover{transform:translateY(-4px)}
.fbox:hover::after{opacity:1}
.fbox .icn{transition:.3s}
.fbox:hover .icn{background:linear-gradient(160deg,#fff4e3,#f3e2c8);border-color:#e8d5b0;transform:scale(1.06) rotate(-3deg)}

/* 定价卡光泽 */
.plan{overflow:hidden}
.plan::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(184,146,90,.55),transparent);opacity:.7}
.plan.hero-plan::before{background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:1}
.hero-plan::after{
  content:"";position:absolute;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(184,146,90,.22),transparent);pointer-events:none;
}

/* 滚动入场动效 */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* 导航毛玻璃（顶部未滚动时也可读） */
.nav:not(.scrolled){background:linear-gradient(180deg,rgba(10,15,30,.55),transparent)}

/* 步骤数字渐变金 */
.step .n{background:linear-gradient(160deg,#fff,#f6f1e8);color:#8a6a38}

/* ====== v7 配色精修 ====== */
body{background:#fdfdfc}
.pricing{background:#f9f9fb}
.kicker{letter-spacing:.22em}
.plan:hover{box-shadow:0 34px 64px -30px rgba(10,15,30,.22)}
.plan.hero-plan{background:linear-gradient(165deg,#121a30,#0a0f1e 60%)}
.cta{background:linear-gradient(180deg,#0a0f1e,#0d1428)}
.cta::before{background:radial-gradient(closest-side,rgba(201,167,107,.22),transparent 70%)}
.nav.scrolled{background:rgba(255,255,255,.82);backdrop-filter:saturate(1.4) blur(14px)}
.step .n{background:linear-gradient(145deg,#d8b87e,#a9853f)}
.fbox .icn{background:linear-gradient(160deg,#f6f4ef,#ece7db);border-color:#eee7d6}