style.css

/* Mox 官网 · 液态玻璃设计系统（与 index.html 视觉一致的核心类，可作为独立样式表复用） */
:root {
  --bg0:#070912; --bg1:#0d1124; --bg2:#120f2b;
  --glass:linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.035));
  --glass-strong:linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  --stroke:rgba(255,255,255,.14); --stroke-hi:rgba(255,255,255,.30);
  --text:rgba(255,255,255,.94); --dim:rgba(255,255,255,.56);
  --a1:#37d5d3; --a2:#8a7bff; --a3:#ff7ac3; --a4:#ffd27a;
  --radius:24px; --radius-sm:16px;
  --mx:50%; --my:20%;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  color:var(--text); min-height:100vh; overflow-x:hidden; position:relative;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","MiSans","Noto Sans SC","Microsoft YaHei",sans-serif;
  background:
    radial-gradient(48rem 38rem at 12% -8%, rgba(55,213,211,.14), transparent 60%),
    radial-gradient(46rem 34rem at 108% 14%, rgba(138,123,255,.18), transparent 60%),
    radial-gradient(40rem 40rem at 50% 120%, rgba(255,122,195,.10), transparent 60%),
    linear-gradient(180deg,var(--bg0),var(--bg1) 45%,var(--bg2));
  background-attachment:fixed;
}
body::before {
  content:""; position:fixed; inset:-20%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(32rem 32rem at 20% 30%, rgba(138,123,255,.20), transparent 60%),
    radial-gradient(28rem 28rem at 80% 60%, rgba(55,213,211,.16), transparent 60%),
    radial-gradient(30rem 30rem at 60% 85%, rgba(255,122,195,.12), transparent 60%);
  filter:blur(20px); opacity:.9; animation:aurora 26s ease-in-out infinite alternate;
}
@keyframes aurora {
  0%{ transform:translate3d(-3%,-2%,0) scale(1.05) rotate(0deg); }
  50%{ transform:translate3d(4%,3%,0) scale(1.12) rotate(8deg); }
  100%{ transform:translate3d(-2%,4%,0) scale(1.06) rotate(-6deg); }
}
.glass {
  position:relative; isolation:isolate; background:var(--glass);
  border:1px solid var(--stroke); border-radius:var(--radius);
  backdrop-filter:blur(24px) saturate(170%); -webkit-backdrop-filter:blur(24px) saturate(170%);
  box-shadow:0 18px 50px -16px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(255,255,255,.04), inset 0 0 36px rgba(255,255,255,.03);
  overflow:hidden;
}
.glass::before {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit;
  background:linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,0) 32%,
    rgba(255,255,255,0) 70%, rgba(255,255,255,.10));
  mix-blend-mode:screen; opacity:.55;
}
.glass::after {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(22rem 22rem at var(--mx) var(--my), rgba(255,255,255,.16), transparent 55%);
  opacity:0; transition:opacity .4s; mix-blend-mode:screen;
}
.glass:hover::after { opacity:1; }
.btn {
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; padding:14px 28px;
  border-radius:15px; font-size:15px; font-weight:650; border:1px solid var(--stroke);
  color:var(--text); text-decoration:none; background:var(--glass);
  backdrop-filter:blur(14px); transition:transform .22s, background .22s, box-shadow .22s;
}
.btn:hover { transform:translateY(-3px); background:var(--glass-strong); box-shadow:0 14px 34px -12px rgba(0,0,0,.6); }
.btn.primary { background:linear-gradient(100deg,rgba(55,213,211,.28),rgba(138,123,255,.34));
  border-color:rgba(138,123,255,.5); box-shadow:0 10px 32px rgba(138,123,255,.3), inset 0 1px 0 rgba(255,255,255,.3); }
.btn.primary:hover { box-shadow:0 18px 44px rgba(138,123,255,.45), inset 0 1px 0 rgba(255,255,255,.4); }