/* =========================================================
   星云云 · 官网门面样式
   独立静态站，套在智简魔方 V10 面板前面（对标 andnode 的做法）
   主色改动只需改下面 :root 里的 --brand / --brand-2
   ========================================================= */
:root{
  --brand:#1d63ed;
  --brand-2:#0ea5e9;
  --brand-dark:#0f4bc4;
  --ink:#0f172a;
  --ink-2:#334155;
  --muted:#64748b;
  --line:#e6eaf2;
  --bg:#ffffff;
  --bg-alt:#f6f8fc;
  --dark:#0a1225;
  --dark-2:#111d38;
  --ok:#0f9d58;
  --warn:#d97706;
  --radius:14px;
  --radius-sm:10px;
  /* 全站统一呼吸周期：所有呼吸共用这一个节拍，靠 delay 错开成波浪 */
  --breath:6.5s;
  --shadow:0 1px 2px rgba(15,23,42,.05), 0 8px 24px -12px rgba(15,23,42,.16);
  --shadow-lg:0 24px 60px -24px rgba(15,23,42,.32);
  --wrap:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--ink);background:var(--bg);
  font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:820px}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:40px;padding:0 18px;border-radius:var(--radius-sm);
  font-size:14px;font-weight:600;cursor:pointer;border:1px solid transparent;
  transition:.18s ease;white-space:nowrap;
}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:0 6px 18px -8px rgba(29,99,237,.7)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 24px -8px rgba(29,99,237,.8)}
.btn-ghost{color:var(--ink-2);border-color:var(--line);background:#fff}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn-outline{color:#fff;border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.06);backdrop-filter:blur(6px)}
.btn-outline:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.6)}
.btn-lg{height:48px;padding:0 26px;font-size:15px;border-radius:12px}
.btn-block{width:100%}

/* ---------- 导航 ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:.2s}
.nav.solid{border-bottom-color:var(--line);box-shadow:0 4px 20px -16px rgba(15,23,42,.4)}
.nav-inner{display:flex;align-items:center;gap:32px;height:66px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand-mark{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font-weight:800;font-size:16px;
}
.brand-text{font-size:16.5px;font-weight:800;letter-spacing:.01em;display:flex;align-items:baseline;gap:6px}
.brand-text em{font-style:normal;font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:.14em}
.nav-links{display:flex;gap:26px;margin-left:8px}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--ink-2);transition:.16s}
.nav-links a:hover{color:var(--brand)}
.nav-actions{display:flex;gap:10px;margin-left:auto}
.nav-toggle{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:8px}
.nav-toggle span{width:20px;height:2px;background:var(--ink);border-radius:2px}

/* ---------- Hero（浅色 + 三个彩色光球游走：灵动感的主体，肉眼可见） ---------- */
.hero{position:relative;background:#f7fafd;color:var(--ink);overflow:hidden;padding:74px 0 66px}
.hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(720px 360px at 8% 6%,rgba(56,189,248,.18),transparent 64%),
    radial-gradient(620px 340px at 92% 14%,rgba(14,165,233,.16),transparent 62%),
    radial-gradient(560px 320px at 55% 110%,rgba(29,99,237,.14),transparent 64%);
  pointer-events:none;
}
/* 三个柔光球：各自沿曲线大幅游走 + 明暗呼吸，「物体在动」而不是背景微移 */
.orb{position:absolute;border-radius:50%;pointer-events:none;will-change:transform,opacity}
.orb-a{
  width:460px;height:460px;top:-14%;left:-6%;
  background:radial-gradient(circle at 38% 38%,rgba(56,189,248,.55),rgba(56,189,248,.22) 55%,transparent 72%);
  filter:blur(56px);
  animation:orbA 13s ease-in-out infinite alternate;
}
@keyframes orbA{
  0%  {transform:translate(0,0) scale(1);opacity:.55}
  33% {transform:translate(220px,70px) scale(1.22);opacity:.95}
  66% {transform:translate(90px,190px) scale(.9);opacity:.6}
  100%{transform:translate(260px,110px) scale(1.12);opacity:.9}
}
.orb-b{
  width:400px;height:400px;top:6%;right:-8%;
  background:radial-gradient(circle at 40% 40%,rgba(34,211,238,.5),rgba(34,211,238,.2) 55%,transparent 72%);
  filter:blur(60px);
  animation:orbB 16s ease-in-out infinite alternate;
}
@keyframes orbB{
  0%  {transform:translate(0,0) scale(1.1);opacity:.9}
  40% {transform:translate(-190px,120px) scale(.86);opacity:.5}
  75% {transform:translate(-80px,220px) scale(1.15);opacity:.85}
  100%{transform:translate(-230px,60px) scale(1);opacity:.6}
}
.orb-c{
  width:340px;height:340px;bottom:-20%;left:10%;
  background:radial-gradient(circle at 42% 42%,rgba(99,142,244,.48),rgba(99,142,244,.2) 55%,transparent 72%);
  filter:blur(64px);
  animation:orbC 11s ease-in-out infinite alternate;
}
@keyframes orbC{
  0%  {transform:translate(0,0) scale(.95);opacity:.5}
  50% {transform:translate(-120px,-90px) scale(1.2);opacity:.9}
  100%{transform:translate(70px,-160px) scale(1.05);opacity:.65}
}
/* 淡网格：随呼吸明暗，给光球一个「坐标感」 */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(29,99,237,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(29,99,237,.07) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(circle at 50% 32%,#000,transparent 78%);
  mask-image:radial-gradient(circle at 50% 32%,#000,transparent 78%);
  animation:gridBreath 9s ease-in-out infinite alternate;
}
@keyframes gridBreath{0%{opacity:.25}100%{opacity:.8}}
.hero-inner{position:relative;display:flex;justify-content:center;text-align:center}
.hero-copy{max-width:760px}
.hero h1{font-size:44px;line-height:1.24;font-weight:800;letter-spacing:-.015em;color:var(--ink)}
.grad{
  background:linear-gradient(100deg,#1d63ed,#0ea5e9 40%,#38bdf8 65%,#1d63ed);
  background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gradFlow 7s linear infinite;   /* 标题流光，静止也能看见 */
}
@keyframes gradFlow{0%{background-position:0% 50%}100%{background-position:220% 50%}}
.hero-sub{margin-top:18px;font-size:15.5px;line-height:1.85;color:var(--ink-2)}
.hero-sub strong{color:var(--ink);font-weight:700}
/* 四条核心优势：节点 / 性能 / 性价比 / 交付与售后，居中，竖线分隔 */
.hero-points{
  list-style:none;display:flex;justify-content:center;flex-wrap:nowrap;
  gap:20px;margin:24px auto 0;max-width:900px;
}
.hero-points li{display:flex;flex-direction:column;gap:2px;position:relative;text-align:center;flex:1;min-width:0}
.hero-points li+li::before{
  content:"";position:absolute;left:-10px;top:5px;bottom:5px;width:1px;background:#d5e1f5;
}
.hero-points b{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap}
.hero-points span{font-size:12px;color:var(--muted);line-height:1.5;white-space:nowrap}
.hero-cta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;justify-content:center}
/* 浅底上的次要按钮：白底描边（覆盖深底版 btn-outline） */
.hero-cta .btn-outline{color:var(--ink-2);border-color:#cfdcf5;background:rgba(255,255,255,.8);backdrop-filter:blur(6px)}
.hero-cta .btn-outline:hover{border-color:var(--brand);color:var(--brand);background:#fff}

/* ---------- 数据条 ---------- */
.stats{background:var(--bg-alt);border-bottom:1px solid var(--line)}
.stats-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:26px 24px}
.stat{text-align:center}
.stat b{
  display:block;font-size:27px;font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(135deg,var(--brand),var(--brand-2) 70%,#38bdf8);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat span{font-size:13px;color:var(--muted)}

/* ---------- 通用区块 ---------- */
.section{padding:72px 0}
.section-alt{background:var(--bg-alt)}
.sec-head{text-align:center;max-width:660px;margin:0 auto 44px}
.sec-head h2{font-size:29px;font-weight:800;letter-spacing:-.015em}
.sec-head p{margin-top:12px;color:var(--muted);font-size:15px}

.badge{
  position:absolute;top:14px;right:14px;font-size:11px;font-weight:700;
  background:#fff4e0;color:#b45309;border-radius:6px;padding:2px 8px;
}
.badge.blue{background:#e8f0ff;color:var(--brand)}

/* ---------- 套餐 ---------- */
.plan-tabs{display:flex;justify-content:center;gap:8px;margin-bottom:22px;flex-wrap:wrap}
.plan-tab{
  padding:7px 18px;border-radius:999px;border:1px solid var(--line);background:#fff;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  color:var(--ink-2);cursor:pointer;transition:.16s;
}
.plan-tab:hover{border-color:#c9d9f8}
.plan-tab.on{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 8px 20px -10px rgba(29,99,237,.8)}
.pt-name{font-size:14px;font-weight:600;line-height:1.3;white-space:nowrap}
.pt-line{font-size:11px;font-weight:500;opacity:.62;line-height:1.3;white-space:nowrap}

/* ---------- 当前节点信息条 ---------- */
.node-bar{
  position:relative;display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  background:linear-gradient(118deg,#fbfdff,#f3f8ff 60%,#eef5ff);
  border:1px solid #e2ecff;border-radius:var(--radius);
  padding:16px 22px;margin-bottom:26px;
  box-shadow:0 14px 34px -24px rgba(29,99,237,.5);
}
.nb-left{display:flex;align-items:center;gap:12px;min-width:200px}
.nb-flag{font-size:24px;line-height:1}
.nb-line{font-size:14px;font-weight:700;color:var(--brand)}
.nb-lat{font-size:12.5px;color:var(--muted);margin-top:3px}
.nb-mid{display:flex;align-items:center;gap:8px}
/* 延迟徽标：<50ms 绿 / 50–120ms 蓝 / >120ms 橙 / 未接入 灰 */
.nb-ping{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;color:var(--muted);
  padding:4px 11px;border-radius:999px;background:#f2f8f4;border:1px solid #d6ebe0;
}
.nb-ping i{width:7px;height:7px;border-radius:50%;background:#0f6b3f;flex:none}
.nb-ping b{font-weight:800;font-size:14px;color:#0f6b3f;letter-spacing:.01em}
.nb-ping.mid{background:#f2f6fd;border-color:#dbe6fa}
.nb-ping.mid i{background:#3d7ce8}
.nb-ping.mid b{color:var(--brand)}
.nb-ping.far{background:#fff6ec;border-color:#fbe3c8}
.nb-ping.far i{background:#d98a1f}
.nb-ping.far b{color:#b96a10}
.nb-ping.off{background:#f7f9fc;border-color:var(--line)}
.nb-ping.off i{background:#c3ccd8}
.nb-ping.off b{color:var(--muted);font-weight:600;font-size:13px}
@keyframes nbPulse{0%,100%{opacity:1}50%{opacity:.25}}
.nb-ping:not(.off) i{animation:nbPulse var(--breath) ease-in-out infinite}
.nb-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.nb-count{font-size:13px;color:var(--muted)}
.nb-from{font-size:20px;font-weight:800;color:var(--ink)}
.nb-from em{font-size:12px;font-weight:500;color:var(--muted);font-style:normal;margin-left:3px}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;perspective:1400px}
.plan{
  position:relative;border:1px solid var(--line);border-radius:16px;padding:26px 24px;
  display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s;
  transform-style:preserve-3d;
  background:
    radial-gradient(130% 90% at 100% 0%,rgba(29,99,237,.055),transparent 58%),
    linear-gradient(180deg,#fff,#fcfdff);
  animation:floatY 7s ease-in-out infinite alternate, breatheShadow var(--breath) ease-in-out infinite alternate;
}
/* 卡片浮动：整张卡缓慢上下漂（±几像素），肉眼可见的「灵」 */
@keyframes floatY{0%{transform:translateY(-5px)}100%{transform:translateY(3px)}}
/* 卡片呼吸：只有底部蓝光在明暗起伏，克制但有生命感 */
@keyframes breatheShadow{
  0%  {box-shadow:0 1px 2px rgba(15,23,42,.04),0 6px 14px -10px rgba(15,23,42,.10),0 18px 34px -26px rgba(29,99,237,.34)}
  100%{box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 16px -10px rgba(15,23,42,.12),0 26px 50px -24px rgba(29,99,237,.66)}
}
/* 波浪：三张卡错峰浮动+呼吸，视觉上像波浪推过去 */
.plan:nth-child(2){animation-delay:-2.4s,-2.2s}
.plan:nth-child(3){animation-delay:-4.7s,-4.3s}
.plan::after{ /* 顶部一道渐变高光，随呼吸节拍明暗起伏 */
  content:"";position:absolute;left:12px;right:12px;top:0;height:2px;border-radius:0 0 2px 2px;
  background:linear-gradient(90deg,transparent,rgba(29,99,237,.35),rgba(56,189,248,.85),rgba(29,99,237,.35),transparent);
  animation:hiBreath var(--breath) ease-in-out infinite alternate;pointer-events:none;
}
@keyframes hiBreath{0%{opacity:.4}100%{opacity:1}}
/* 浮动动画接管 transform，hover 用提亮反馈（不与动画打架） */
.plan:hover{border-color:#c9d9f8;filter:brightness(1.015)}
.plan:hover::after{opacity:1}
/* 主推款：浮动 + 流动渐变描边 + 呼吸外发光（三动画组合） */
.plan.hot{border-color:transparent;animation:floatY 7s ease-in-out infinite alternate,hotGlow var(--breath) ease-in-out infinite alternate}
@keyframes hotGlow{
  0%  {box-shadow:0 18px 40px -26px rgba(29,99,237,.45),0 0 0 0 rgba(56,189,248,0)}
  100%{box-shadow:0 28px 62px -22px rgba(29,99,237,.95),0 0 44px -6px rgba(56,189,248,.55)}
}
.plan.hot::before{
  content:"";position:absolute;inset:0;border-radius:16px;padding:2px;pointer-events:none;
  background:linear-gradient(115deg,var(--brand),var(--brand-2),#7dd3fc,var(--brand),var(--brand-2));
  background-size:300% 100%;
  animation:flowBorder 4.5s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
}
@keyframes flowBorder{0%{background-position:0% 50%}100%{background-position:300% 50%}}
.plan-flag{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:.04em;border-radius:999px;padding:4px 14px;white-space:nowrap;
}
.plan-name{font-size:17px;font-weight:700}
.plan-tier{font-size:12px;color:var(--muted);margin-top:3px;text-transform:uppercase;letter-spacing:.08em}
.plan-price{display:flex;align-items:baseline;gap:3px;margin:18px 0 4px}
.plan-price .cur{font-size:16px;font-weight:700;color:var(--brand)}
.plan-price .num{font-size:38px;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1}
.plan-price .unit{font-size:14px;color:var(--muted);font-weight:500}
.plan-price2{font-size:12.5px;color:var(--muted);margin-bottom:18px}
.plan-spec{list-style:none;display:grid;gap:9px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:18px}
.plan-spec li{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink-2)}
.plan-spec li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand);flex-shrink:0;opacity:.75}
.plan-stock{font-size:12.5px;color:var(--muted);margin-bottom:16px;display:flex;align-items:center;gap:6px}
.plan-stock .dot{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.plan-stock.low .dot{background:#ef4444}
.plan-stock.low{color:#b91c1c}
.plan .btn{margin-top:auto}
.plan-foot{text-align:center;margin-top:26px;font-size:13px;color:var(--muted)}
.plan-foot a{color:var(--brand);font-weight:600}

/* ---------- 优势 ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat{
  position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);padding:24px;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s;
  background:radial-gradient(130% 90% at 100% 0%,rgba(29,99,237,.05),transparent 58%),#fff;
  animation:floatY 8s ease-in-out infinite alternate, breatheShadow var(--breath) ease-in-out infinite alternate;
}
.feat:nth-child(2){animation-delay:-1.4s,-1.1s}
.feat:nth-child(3){animation-delay:-2.8s,-2.2s}
.feat:nth-child(4){animation-delay:-4.1s,-3.2s}
.feat:nth-child(5){animation-delay:-5.5s,-4.3s}
.feat:nth-child(6){animation-delay:-6.8s,-5.4s}
.feat::after{ /* 顶部渐变高光，随呼吸起伏 */
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(56,189,248,.7),transparent);
  animation:hiBreath var(--breath) ease-in-out infinite alternate;
}
.feat:hover{border-color:#c9d9f8;filter:brightness(1.015)}
.feat:hover::after{opacity:1}
.feat-ico{
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:20px;
  background:linear-gradient(135deg,#e8f0ff,#e6f7ff);margin-bottom:14px;
  box-shadow:0 10px 22px -12px rgba(29,99,237,.75);
  transition:transform .32s cubic-bezier(.2,.7,.3,1);
}
.feat:hover .feat-ico{transform:translateY(-4px) rotate(-8deg) scale(1.08)}
.feat h3{font-size:16px;font-weight:700;margin-bottom:8px}
.feat p{font-size:14px;color:var(--muted);line-height:1.75}

/* ---------- 步骤 ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;position:relative;
  overflow:hidden;transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s;
  animation:floatY 7.5s ease-in-out infinite alternate, breatheShadow var(--breath) ease-in-out infinite alternate;
}
.step:nth-child(2){animation-delay:-2.6s,-2.2s}
.step:nth-child(3){animation-delay:-5.1s,-4.3s}
.step::before{ /* 顶部流动光带，静态常亮 */
  content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--brand),var(--brand-2),#7dd3fc,var(--brand));
  background-size:220% 100%;animation:flowBorder 4.5s linear infinite;opacity:.9;
}
.step:hover{border-color:#c9d9f8;filter:brightness(1.015)}
.step-no{
  font-size:13px;font-weight:800;letter-spacing:.1em;font-family:ui-monospace,Menlo,monospace;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.step h3{font-size:16.5px;font-weight:700;margin:10px 0 8px}
.step p{font-size:14px;color:var(--muted)}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:10px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.faq-q{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:17px 20px;font-size:15px;font-weight:600;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:inherit;
}
.faq-q::after{content:"+";font-size:19px;color:var(--brand);font-weight:400;transition:.2s;flex-shrink:0}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .26s ease;color:var(--muted);font-size:14px;line-height:1.8}
.faq-a div{padding:0 20px 18px}
.faq-item.open .faq-a{max-height:320px}

/* ---------- CTA ---------- */
.cta-band{
  background:linear-gradient(120deg,#12326e,#1d63ed 55%,#0ea5e9);
  color:#fff;padding:56px 0;position:relative;overflow:hidden;
}
.cta-band::before{ /* 底部一道流动光带 */
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:linear-gradient(90deg,transparent,#7dd3fc,var(--brand-2),transparent);
  background-size:200% 100%;animation:flowBorder 5s linear infinite;opacity:.7;
}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta-inner h2{font-size:25px;font-weight:800;letter-spacing:-.01em}
.cta-inner p{margin-top:10px;color:#b6c4de;font-size:14.5px}

/* ---------- 页脚 ---------- */
.footer{background:#0d2148;color:#8ea0bf;padding:54px 0 26px;font-size:13.5px}
.footer-inner{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;padding-bottom:34px}
.footer-brand .brand{margin-bottom:14px}
.footer-brand .brand-text{color:#fff}
.footer-brand p{line-height:1.8;max-width:300px}
.footer-col h4{color:#fff;font-size:14px;font-weight:700;margin-bottom:14px}
.footer-col a{display:block;margin-bottom:9px;transition:.16s}
.footer-col a:hover{color:#7dd3fc}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);padding-top:20px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:#63748f;
}

/* ---------- 浮动客服 ---------- */
.float-kf{
  position:fixed;right:22px;bottom:26px;width:50px;height:50px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font-size:21px;
  display:grid;place-items:center;box-shadow:0 14px 30px -10px rgba(29,99,237,.75);z-index:70;transition:.2s;
}
.float-kf:hover{transform:scale(1.07)}

/* =========================================================
   视觉增强：3D / 流动 / 科技感
   原则：动效只服务「看得懂」，不抢内容。全部走 transform/opacity，
        不触发重排，低端机也不卡。
   ========================================================= */

/* 主按钮：hover 时一道光泽扫过 */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::before{
  content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);transition:left .62s ease;
}
.btn-primary:hover::before{left:130%}

/* 区块标题：下方一道渐变短线 */
.sec-head h2{position:relative}
.sec-head h2::after{
  content:"";position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);
  width:54px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
}
.sec-head p{margin-top:26px}

/* 优势区：极淡网格底 + 中心聚光，科技感但不抢内容 */
#features{position:relative;background:linear-gradient(180deg,#fff,#f8fbff)}
#features::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(29,99,237,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(29,99,237,.055) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 18%,#000,transparent 74%);
  mask-image:radial-gradient(ellipse at 50% 18%,#000,transparent 74%);
}
#features .wrap{position:relative;z-index:1}

/* 节点条：顶部流动光带（静态常亮） */
.node-bar::before{
  content:"";position:absolute;left:0;top:0;height:2px;width:100%;
  border-radius:var(--radius) var(--radius) 0 0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(56,189,248,.9),var(--brand),rgba(56,189,248,.9),transparent);
  background-size:200% 100%;animation:flowBorder 4s linear infinite;
}

/* 数据条：数字随呼吸节拍发光（一明一暗，像仪表读数） */
.stat b{animation:statGlow var(--breath) ease-in-out infinite alternate}
.stat:nth-child(2) b{animation-delay:-1.6s}
.stat:nth-child(3) b{animation-delay:-3.2s}
.stat:nth-child(4) b{animation-delay:-4.9s}
@keyframes statGlow{
  0%  {filter:drop-shadow(0 2px 6px rgba(29,99,237,.15))}
  100%{filter:drop-shadow(0 5px 18px rgba(29,99,237,.55))}
}

/* Hero 主按钮：呼吸光晕（与全站同节拍，幅度加大），视线自然被引导到「立即选购」 */
.hero-cta .btn-primary{animation:ctaPulse var(--breath) ease-in-out infinite alternate}
@keyframes ctaPulse{
  0%  {box-shadow:0 6px 18px -8px rgba(29,99,237,.6),0 0 0 rgba(56,189,248,0)}
  100%{box-shadow:0 12px 30px -8px rgba(29,99,237,1),0 0 34px -2px rgba(56,189,248,.6)}
}

/* 导航：滚动后底部出现一道渐变发光细线 */
.nav::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(29,99,237,.4),rgba(56,189,248,.45),transparent);
  opacity:0;transition:opacity .3s;
}
.nav.solid::after{opacity:1}

/* 套餐区：背景两团光斑随呼吸明暗，把卡片托起来 */
#plans{position:relative}
#plans::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(620px 320px at 4% 2%,rgba(56,189,248,.13),transparent 66%),
    radial-gradient(580px 320px at 96% 98%,rgba(14,165,233,.13),transparent 66%);
  animation:hiBreath var(--breath) ease-in-out infinite alternate;
}
#plans .wrap{position:relative;z-index:1}

/* 滚动入场：淡淡浮起（JS 加 .reveal / .in） */
.reveal{opacity:0;transform:translateY(22px)}
.reveal.in{
  opacity:1;transform:none;
  transition:opacity .62s cubic-bezier(.2,.7,.3,1),transform .62s cubic-bezier(.2,.7,.3,1);
}

/* 尊重系统「减少动态效果」：老人机 / 眩晕用户自动关掉所有动画 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .plan,.feat,.step{box-shadow:0 1px 2px rgba(15,23,42,.04),0 18px 34px -26px rgba(29,99,237,.45)}
}

/* ---------- 响应式 ---------- */
@media (max-width:1000px){
  .hero h1{font-size:34px}
  /* 四点改两行两列，去竖线 */
  .hero-points{flex-wrap:wrap;gap:14px 12px}
  .hero-points li{flex:0 0 calc(50% - 6px)}
  .hero-points li+li::before{display:none}
  .plan-grid{grid-template-columns:repeat(2,1fr)}
  .feat-grid,.steps{grid-template-columns:repeat(2,1fr)}
  .footer-inner{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
}
@media (max-width:640px){
  .wrap{padding:0 18px}
  .section{padding:52px 0}
  .hero{padding:52px 0 46px}
  .hero h1{font-size:27px}
  /* 窄屏四点改竖排 */
  .hero-points{flex-direction:column;gap:12px;align-items:center}
  .hero-points li{flex:none}
  .hero-cta .btn{width:100%}
  .stats-inner{grid-template-columns:repeat(2,1fr);padding:20px 18px}
  .stat b{font-size:22px}
  .plan-grid,.feat-grid,.steps{grid-template-columns:1fr}
  .node-bar{flex-direction:column;align-items:flex-start;gap:12px;padding:18px}
  .nb-right{margin-left:0;width:100%;justify-content:space-between}
  .sec-head h2{font-size:23px}
  .cta-inner h2{font-size:20px}
  .footer-inner{grid-template-columns:1fr;gap:26px}
  .nav-actions .btn-ghost{display:none}
  .nav-toggle{display:flex}
  .nav.menu-open .nav-links{
    display:flex;flex-direction:column;gap:0;position:absolute;top:66px;left:0;right:0;
    background:#fff;border-bottom:1px solid var(--line);padding:8px 24px 16px;box-shadow:var(--shadow);
  }
  .nav.menu-open .nav-links a{padding:11px 0;border-bottom:1px solid var(--line)}
}