:root{--bg:#0b1020;--bg2:#121a33;--card:#151f3d;--line:#25325c;--txt:#e8ecf8;--sub:#a9b4d6;--brand:#5b8cff;--brand2:#8a5bff;--ok:#33d6a6;--warn:#ffcc66;--glass:rgba(21,31,61,.55);--glass-line:rgba(120,150,255,.22);--shadow:0 18px 44px rgba(4,8,20,.55);--radius:16px;--radius-sm:12px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:linear-gradient(180deg,var(--bg),#070b16 60%,#05070f);color:var(--txt);font:16px/1.9 "Microsoft YaHei","PingFang SC","Hiragino Sans GB",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;overflow-x:hidden;min-height:100vh;letter-spacing:.1px}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(900px 480px at 8% -6%,rgba(91,140,255,.20),transparent 62%),radial-gradient(760px 420px at 96% 4%,rgba(138,91,255,.18),transparent 60%),radial-gradient(600px 400px at 50% 108%,rgba(51,214,166,.10),transparent 65%)}
a{color:var(--brand);text-decoration:none;transition:color .25s ease,opacity .25s ease}
a:hover{color:#9db9ff}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
img,svg{max-width:100%;display:block}
.wrap{width:min(1180px,94%);margin:0 auto}
header.site{position:sticky;top:0;z-index:50;background:rgba(11,16,32,.82);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);border-bottom:1px solid var(--glass-line);box-shadow:0 8px 30px rgba(4,8,20,.35)}
.nav{display:flex;align-items:center;gap:18px;padding:12px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px;color:var(--txt);transition:transform .3s ease}
.logo:hover{transform:translateY(-1px)}
.logo .mark{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,var(--brand),var(--brand2));display:grid;place-items:center;color:#fff;font-size:16px;box-shadow:0 6px 18px rgba(91,140,255,.45);transition:transform .4s cubic-bezier(.2,.8,.3,1.2)}
.logo:hover .mark{transform:rotate(-8deg) scale(1.06)}
nav ul{display:flex;flex-wrap:wrap;gap:14px;list-style:none;margin:0;padding:0}
nav a{color:var(--sub);font-size:15px;position:relative;padding:4px 2px}
nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--brand),var(--brand2));transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
nav a:hover{color:#fff}
nav a:hover::after{transform:scaleX(1)}
.tools{margin-left:auto;display:flex;gap:10px;align-items:center}
.btn{border:1px solid var(--line);background:var(--card);color:var(--txt);border-radius:11px;padding:8px 13px;cursor:pointer;font-size:14px;font-family:inherit;transition:transform .25s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease}
.btn:hover{transform:translateY(-2px);border-color:rgba(91,140,255,.55);box-shadow:0 10px 24px rgba(91,140,255,.22)}
.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand2));border:0;color:#fff;box-shadow:0 10px 26px rgba(91,140,255,.35)}
.btn.primary:hover{box-shadow:0 16px 34px rgba(138,91,255,.42);filter:brightness(1.06)}
.search{display:flex;gap:6px}
.search input{background:#0e1530;border:1px solid var(--line);color:var(--txt);border-radius:11px;padding:8px 11px;width:160px;font-family:inherit;font-size:14px;transition:border-color .25s ease,box-shadow .25s ease,width .25s ease}
.search input::placeholder{color:#6d7aa6}
.search input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(91,140,255,.18)}
.menu-toggle{display:none}
.hero{position:relative;padding:48px 0 30px;border-bottom:1px solid var(--line);background:linear-gradient(120deg,rgba(91,140,255,.16),rgba(138,91,255,.13) 48%,rgba(51,214,166,.08)),radial-gradient(900px 380px at 12% 0%,rgba(91,140,255,.24),transparent),radial-gradient(700px 320px at 88% 10%,rgba(138,91,255,.20),transparent);overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(2px 2px at 20% 30%,rgba(255,255,255,.7),transparent),radial-gradient(2px 2px at 62% 18%,rgba(255,255,255,.55),transparent),radial-gradient(1.5px 1.5px at 84% 62%,rgba(255,255,255,.5),transparent),radial-gradient(1.5px 1.5px at 34% 78%,rgba(255,255,255,.45),transparent),radial-gradient(2px 2px at 74% 88%,rgba(255,255,255,.4),transparent);opacity:.85;animation:twinkle 6s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.35}to{opacity:.9}}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:34px;line-height:1.35;margin:0 0 12px;background:linear-gradient(100deg,#ffffff,#cfe0ff 42%,#b79dff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{color:var(--sub);font-size:17px;max-width:900px}
.hero p.lead strong{color:#fff;font-weight:600}
.hero .kw{color:#fff;background:rgba(91,140,255,.18);border:1px solid rgba(91,140,255,.4);border-radius:8px;padding:2px 8px;box-shadow:0 0 0 1px rgba(138,91,255,.12) inset}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}
.stat{position:relative;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-line);border-radius:var(--radius);padding:16px;overflow:hidden;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.stat::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--brand),var(--brand2),var(--ok));opacity:.85}
.stat:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(91,140,255,.45)}
.stat b{display:block;font-size:26px;color:#fff;line-height:1.4}
.stat span{color:var(--sub);font-size:14px}
.carousel{position:relative;margin-top:26px;border:1px solid var(--glass-line);border-radius:var(--radius);overflow:hidden;background:linear-gradient(160deg,rgba(21,31,61,.75),rgba(14,21,48,.85));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow)}
.slides{display:flex;transition:transform .55s cubic-bezier(.4,.1,.2,1)}
.slide{min-width:100%;padding:28px;display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:center}
.slide h3{margin:0 0 10px;font-size:22px;color:#fff}
.slide p{color:var(--sub);margin:0}
.slide svg{border-radius:var(--radius-sm);border:1px solid var(--glass-line);transition:transform .5s ease}
.slide:hover svg{transform:scale(1.02) rotate(-.4deg)}
.dots{display:flex;gap:8px;justify-content:center;padding:12px}
.dot{width:10px;height:10px;border-radius:50%;background:#3a477a;border:0;cursor:pointer;padding:0;transition:background .3s ease,transform .3s ease,box-shadow .3s ease}
.dot:hover{transform:scale(1.25)}
.dot.active{background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:0 0 0 4px rgba(91,140,255,.18);transform:scale(1.15)}
main{padding:36px 0 64px}
section{padding:28px 0;border-bottom:1px dashed var(--line);scroll-margin-top:84px}
section:last-of-type{border-bottom:0}
h2{font-size:26px;margin:0 0 16px;padding-left:14px;border-left:4px solid transparent;border-image:linear-gradient(180deg,var(--brand),var(--brand2)) 1;color:#fff}
h3{font-size:20px;margin:24px 0 10px;color:#fff}
h4{font-size:17px;margin:16px 0 8px;color:#dfe6ff}
p{color:#d5dcf3}
.muted{color:var(--sub)}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{position:relative;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-line);border-radius:var(--radius);padding:18px;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease,background .35s ease;overflow:hidden}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(140deg,rgba(91,140,255,.14),transparent 42%);opacity:0;transition:opacity .35s ease}
.card:hover{transform:translateY(-5px);border-color:rgba(91,140,255,.5);box-shadow:var(--shadow)}
.card:hover::after{opacity:1}
.card h3{margin-top:0}
.tag{display:inline-block;font-size:12px;color:#cfe0ff;background:rgba(91,140,255,.16);border:1px solid rgba(91,140,255,.35);border-radius:20px;padding:2px 10px;margin:0 6px 6px 0;transition:background .25s ease,transform .25s ease}
.tag:hover{background:rgba(138,91,255,.24);transform:translateY(-1px)}
.list{padding-left:20px;color:#d5dcf3}
.list li{margin:6px 0}
.list li::marker{color:var(--brand)}
table{width:100%;border-collapse:collapse;margin-top:12px;font-size:15px;border-radius:var(--radius-sm);overflow:hidden}
th,td{border:1px solid var(--line);padding:10px;text-align:left;vertical-align:top}
th{background:#101a36;color:#fff}
tbody tr{transition:background .25s ease}
tbody tr:hover{background:rgba(91,140,255,.08)}
.article{position:relative;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-line);border-radius:var(--radius);padding:18px;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.article:hover{transform:translateY(-4px);border-color:rgba(138,91,255,.5);box-shadow:var(--shadow)}
.article h3{margin:0 0 6px}
.article h3 a{color:#fff}
.article h3 a:hover{color:#9db9ff}
.meta{font-size:13px;color:var(--sub);margin-bottom:8px}
.faq-item{border:1px solid var(--glass-line);border-radius:var(--radius-sm);background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);margin-bottom:10px;overflow:hidden;transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease}
.faq-item:hover{border-color:rgba(91,140,255,.45);box-shadow:0 10px 26px rgba(4,8,20,.4)}
.faq-item.open{border-color:rgba(91,140,255,.6);box-shadow:0 14px 32px rgba(91,140,255,.16)}
.faq-q{width:100%;text-align:left;background:transparent;border:0;color:#fff;font-size:16px;font-family:inherit;padding:14px 16px;cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:center;transition:color .25s ease}
.faq-q:hover{color:#9db9ff}
.faq-q span{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(91,140,255,.16);border:1px solid rgba(91,140,255,.35);font-size:14px;line-height:1;transition:transform .35s ease,background .3s ease}
.faq-item.open .faq-q span{background:linear-gradient(135deg,var(--brand),var(--brand2));transform:rotate(180deg)}
.faq-a{padding:0 16px 14px;color:#cfd7f0;display:none;animation:fadeSlide .4s ease}
.faq-item.open .faq-a{display:block}
@keyframes fadeSlide{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.steps{counter-reset:step}
.step{position:relative;padding-left:46px;margin:16px 0;transition:transform .3s ease}
.step:hover{transform:translateX(4px)}
.step:before{counter-increment:step;content:counter(step);position:absolute;left:0;top:2px;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;display:grid;place-items:center;font-weight:700;box-shadow:0 8px 20px rgba(91,140,255,.35)}
.breadcrumb{font-size:14px;color:var(--sub);margin:14px 0 0}
.breadcrumb a{color:var(--sub)}
.breadcrumb a:hover{color:#fff}
.breadcrumb span{margin:0 6px}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.show{opacity:1;transform:none}
footer.site{background:linear-gradient(180deg,#070b16,#05070f);border-top:1px solid var(--line);padding:32px 0;color:var(--sub)}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:20px}
footer h4{color:#fff;margin-top:0}
footer a{color:var(--sub)}
footer a:hover{color:#fff}
footer .list li::marker{color:var(--brand2)}
.copy{margin-top:20px;border-top:1px solid var(--line);padding-top:14px;font-size:13px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
#toTop{position:fixed;right:18px;bottom:22px;z-index:60;display:none;box-shadow:0 12px 30px rgba(91,140,255,.4)}
#toTop:hover{transform:translateY(-3px)}
body.dark{--bg:#05070f;--bg2:#0b1020;--card:#0e1428;--line:#1d2848;--txt:#eef2ff;--sub:#9aa6cc;--glass:rgba(14,20,40,.6);--glass-line:rgba(120,150,255,.18);--shadow:0 18px 44px rgba(0,0,0,.6)}
body.dark header.site{background:rgba(5,7,15,.86)}
body.dark footer.site{background:linear-gradient(180deg,#04060d,#03050a)}
::selection{background:rgba(91,140,255,.4);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0a1024}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--brand),var(--brand2));border-radius:10px;border:2px solid #0a1024}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#7ba6ff,#a97bff)}
@media(prefers-reduced-motion:reduce){
*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
html{scroll-behavior:auto}
.reveal{opacity:1;transform:none}
}
@media(max-width:960px){
.g4{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(2,1fr)}
.slide{grid-template-columns:1fr;padding:22px}
footer .cols{grid-template-columns:1fr 1fr}
.hero h1{font-size:30px}
}
@media(max-width:680px){
.wrap{width:92%}
.nav{flex-wrap:wrap;gap:10px}
nav{width:100%;order:3}
nav ul{display:none;flex-direction:column;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--glass-line);border-radius:var(--radius-sm);padding:12px;margin-top:8px;width:100%;box-shadow:var(--shadow)}
nav.open ul{display:flex;animation:fadeSlide .35s ease}
nav a{display:block;padding:8px 4px}
.menu-toggle{display:inline-block}
.tools{gap:8px}
.search input{width:110px}
.search input:focus{width:140px}
.hero{padding:32px 0 22px}
.hero h1{font-size:26px}
.hero p.lead{font-size:16px}
.stats,.g2,.g3,.g4{grid-template-columns:1fr}
.slide{padding:18px}
.slide h3{font-size:19px}
h2{font-size:22px}
h3{font-size:18px}
footer .cols{grid-template-columns:1fr}
.copy{flex-direction:column;gap:6px}
.stat b{font-size:23px}
section{padding:22px 0}
#toTop{right:12px;bottom:16px}
}
@media(max-width:400px){
.hero h1{font-size:22px}
.logo{font-size:18px}
.search input{width:92px}
}