:root{
  --bg:#05070d;
  --bg-soft:#0a0e18;
  --panel:rgba(255,255,255,.035);
  --line:rgba(255,255,255,.09);
  --txt:#e8ecf5;
  --txt-dim:#9aa6c0;
  --txt-faint:#6b7793;
  --c1:#4f7cff;
  --c2:#8b5cf6;
  --c3:#22d3ee;
  --radius:16px;
  --max:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--txt);
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* 背景光效 */
.bg-fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-fx .grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 100%);
}
.glow{position:absolute;border-radius:50%;filter:blur(110px);opacity:.5}
.g1{width:620px;height:620px;background:#2f5bff;top:-260px;left:-120px}
.g2{width:560px;height:560px;background:#7c3aed;top:-180px;right:-140px}
.g3{width:520px;height:520px;background:#0891b2;top:52%;left:38%;opacity:.22}
.stars{position:absolute;inset:0;
  background-image:radial-gradient(1.5px 1.5px at 20% 30%,rgba(255,255,255,.5),transparent),
                   radial-gradient(1.5px 1.5px at 70% 20%,rgba(255,255,255,.4),transparent),
                   radial-gradient(1.5px 1.5px at 85% 60%,rgba(255,255,255,.35),transparent),
                   radial-gradient(1.5px 1.5px at 40% 75%,rgba(255,255,255,.3),transparent),
                   radial-gradient(1.5px 1.5px at 12% 65%,rgba(255,255,255,.3),transparent);
}
main,header,footer{position:relative;z-index:1}

/* 导航 */
header{position:fixed;top:0;left:0;right:0;z-index:50;transition:.3s}
header.on{background:rgba(5,7,13,.78);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.5px;font-size:17px}
.logo .mark{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--c1),var(--c2));
  display:grid;place-items:center;box-shadow:0 6px 20px rgba(79,124,255,.45)}
.menu{display:flex;gap:34px;font-size:15px;color:var(--txt-dim);align-items:center}
.menu a{position:relative;transition:color .25s}
.menu a:hover{color:#fff}
.menu a::after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;background:linear-gradient(90deg,var(--c1),var(--c3));transition:width .25s}
.menu a:hover::after{width:100%}
.menu a.hl{color:#fff}
.menu a.hl::after{width:100%;background:linear-gradient(90deg,var(--c3),var(--c1))}
.menu a.hl::before{content:"";position:absolute;right:-11px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--c3);box-shadow:0 0 8px var(--c3)}
.burger{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);place-items:center;cursor:pointer}
.burger span{display:block;width:18px;height:1.5px;background:#fff;margin:3px auto;transition:.3s}

/* 通用区块 */
section{padding:96px 0}
.eyebrow{color:var(--c3);font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
h2{font-size:clamp(26px,4vw,42px);font-weight:800;letter-spacing:-.5px;margin:12px 0 14px;line-height:1.25}

/* 进场动画 */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}

@media(max-width:720px){
  .menu{position:fixed;top:72px;left:0;right:0;flex-direction:column;gap:0;align-items:stretch;
    background:rgba(5,7,13,.97);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
    padding:8px 24px 20px;transform:translateY(-12px);opacity:0;pointer-events:none;transition:.25s}
  .menu.open{transform:none;opacity:1;pointer-events:auto}
  .menu a{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.06)}
  .menu a::after,.menu a.hl::after{display:none}
  .menu a.hl::before{right:auto;left:76px;top:50%}
  .burger{display:grid}
  section{padding:70px 0}
}