:root{
  --site-bg:#050608;
  --site-bg-soft:#0b0d12;
  --site-surface:rgba(18,20,27,.56);
  --site-surface-strong:rgba(22,24,32,.78);
  --site-line:rgba(255,255,255,.13);
  --site-line-strong:rgba(255,255,255,.22);
  --site-text:#f6f7fb;
  --site-muted:#a9afbd;
  --site-weak:#717786;
  --site-blue:#58a6ff;
  --site-blue-2:#8ec5ff;
  --site-red:#ff2b2b;
  --site-green:#31d77a;
  --site-radius:24px;
  --site-shadow:0 28px 90px rgba(0,0,0,.52);
  --site-font:system-ui,-apple-system,"Segoe UI",Roboto,"Microsoft YaHei UI","Microsoft YaHei","Noto Sans CJK SC",Arial,sans-serif;
  --site-mono:"Consolas","SFMono-Regular","Cascadia Mono",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  background:var(--site-bg);
  color:var(--site-text);
  font-family:var(--site-font);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.page,.site-page{
  min-height:100vh;
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(circle at 14% -5%,rgba(88,166,255,.26),transparent 33%),
    radial-gradient(circle at 86% 10%,rgba(255,43,43,.13),transparent 30%),
    radial-gradient(circle at 58% 92%,rgba(49,215,122,.10),transparent 32%),
    linear-gradient(180deg,#080a0f 0%,#040506 52%,#07080a 100%);
}
.page::before,.site-page::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  opacity:.44;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.48) 0 1px,transparent 1.8px),
    radial-gradient(circle,rgba(88,166,255,.40) 0 1px,transparent 1.7px),
    radial-gradient(circle,rgba(255,43,43,.22) 0 1px,transparent 1.6px);
  background-size:92px 92px,138px 138px,188px 188px;
  background-position:0 0,24px 44px,78px 18px;
  animation:particleDrift 24s linear infinite;
}
.page::after,.site-page::after{
  content:"";
  position:fixed;
  inset:-18%;
  z-index:-1;
  pointer-events:none;
  background:
    conic-gradient(from 120deg at 24% 32%,transparent 0 28%,rgba(88,166,255,.13) 38%,transparent 48%),
    conic-gradient(from 310deg at 82% 42%,transparent 0 34%,rgba(255,255,255,.08) 43%,transparent 53%);
  filter:blur(28px);
  opacity:.68;
  animation:lightSweep 18s ease-in-out infinite alternate;
}
@keyframes particleDrift{to{background-position:92px 92px,162px 182px,266px 206px}}
@keyframes lightSweep{from{transform:translate3d(-1.5%,-1%,0) rotate(-1deg)}to{transform:translate3d(1.5%,1%,0) rotate(1deg)}}
.frame{width:min(1180px,calc(100% - 40px));margin:0 auto}
.glass{
  position:relative;
  border:1px solid var(--site-line);
  background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.045) 42%,rgba(255,255,255,.075));
  box-shadow:var(--site-shadow),inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter:blur(26px) saturate(142%);
}
.interactive-glow{position:relative;overflow:hidden}
.topbar{
  position:sticky;
  top:0;
  z-index:1000;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:rgba(5,7,10,.66);
  backdrop-filter:blur(24px) saturate(150%);
}
.topbar-inner{
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-mark{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  color:#06111f;
  font-weight:950;
  background:linear-gradient(145deg,#f7fbff,#7dbdff 56%,#4d8cff);
  box-shadow:0 14px 34px rgba(88,166,255,.28),inset 0 1px 0 rgba(255,255,255,.75);
}
.brand img,.brand-mark img{width:42px;height:42px;border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.42)}
.brand-title{font-weight:900;font-size:18px;line-height:1.08;letter-spacing:0}
.brand-sub{font-size:12px;color:var(--site-muted);line-height:1.2;margin-top:3px}
.nav{display:flex;align-items:center;gap:8px}
.nav a{
  font-size:14px;
  color:var(--site-muted);
  padding:9px 14px;
  border-radius:999px;
  transition:background .2s,color .2s,border-color .2s,transform .2s;
}
.nav a:hover,.nav a.active{
  color:#fff;
  background:rgba(255,255,255,.09);
}
.nav .download,.nav .btn-small,.nav .nav-cta{
  color:#06111f;
  font-weight:900;
  background:linear-gradient(180deg,var(--site-blue-2),var(--site-blue));
  box-shadow:0 14px 34px rgba(88,166,255,.25);
}
.nav .download:hover,.nav .btn-small:hover,.nav .nav-cta:hover{color:#06111f;transform:translateY(-1px)}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 22px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  font-weight:900;
  transition:transform .2s,box-shadow .2s,background .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  color:#06111f;
  background:linear-gradient(180deg,var(--site-blue-2),var(--site-blue));
  box-shadow:0 18px 44px rgba(88,166,255,.26);
}
.btn-soft,.btn-secondary{
  color:#fff;
  background:rgba(255,255,255,.075);
  backdrop-filter:blur(18px);
}
.section{padding:58px 0}
.section-title{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:22px;
}
.section-title h2{margin:0;font-size:32px;line-height:1.15;letter-spacing:0}
.section-title p{margin:0;color:var(--site-muted);max-width:580px}
.liquid-card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--site-line);
  border-radius:var(--site-radius);
  background:linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.045) 46%,rgba(255,255,255,.07));
  box-shadow:0 24px 70px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter:blur(24px) saturate(140%);
}
.liquid-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(115deg,rgba(255,255,255,.18),transparent 28%),
    radial-gradient(circle at 86% 10%,rgba(88,166,255,.18),transparent 30%);
  opacity:.9;
}
.liquid-card::after,.interactive-glow::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.20),rgba(88,166,255,.12) 32%,transparent 68%);
  transition:opacity .18s ease;
}
.liquid-card:hover::after,.interactive-glow:hover::after{opacity:1}
.liquid-card>*{position:relative}
.footer{
  margin-top:54px;
  padding:34px 0;
  border-top:1px solid rgba(255,255,255,.10);
  color:var(--site-muted);
  font-size:13px;
  background:rgba(5,7,10,.48);
  backdrop-filter:blur(22px) saturate(140%);
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.footer-brand{display:flex;align-items:center;gap:12px;color:#fff;font-weight:900}
.footer-brand .brand-mark{width:34px;height:34px;border-radius:12px;font-size:13px}
.footer-meta{color:var(--site-weak);margin-top:3px;font-weight:500}
.footer-links{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.footer-links a,.beian a{color:var(--site-muted)}
.footer-links a:hover,.beian a:hover{color:#fff}
.copyright,.beian{color:var(--site-weak)}
.digital-time{
  font-family:var(--site-mono);
  font-weight:950;
  color:var(--site-red);
  line-height:1;
  letter-spacing:.05em;
  transform:skewX(-7deg);
  text-shadow:0 0 8px rgba(255,43,43,.85),0 0 22px rgba(255,43,43,.44),0 0 56px rgba(255,43,43,.22);
  filter:drop-shadow(0 0 14px rgba(255,43,43,.20));
}
.digital-time .colon{display:inline-block;transform:skewX(7deg);margin:0 .02em;color:#ff3a3a}
@media (max-width:900px){
  .topbar-inner{height:auto;min-height:70px;padding:12px 0;align-items:flex-start}
  .nav{justify-content:flex-end;flex-wrap:wrap;gap:6px}
  .nav a{padding:8px 10px}
  .section-title{display:block}
  .section-title p{margin-top:8px}
}
@media (max-width:620px){
  .frame{width:min(100% - 24px,1180px)}
  .brand-sub{display:none}
  .brand img,.brand-mark{width:36px;height:36px;border-radius:12px}
  .brand-title{font-size:16px}
  .nav a:not(.download):not(.btn-small):not(.nav-cta){display:none}
  .btn{width:100%}
  .footer-inner{display:block}
  .footer-links{margin-top:14px}
}